diff --git a/internal/router/frontend.go b/internal/router/frontend.go
index 04f0ce4a..c78bf54b 100644
--- a/internal/router/frontend.go
+++ b/internal/router/frontend.go
@@ -722,7 +722,11 @@ func registerFrontendRoutes(cfg *Config) {
 				}
 			}
 		}
-		fieldsJSON := templates.JSONArg(services.FilterFieldsPayload(scope))
+		fieldsPayload, merr := json.Marshal(services.FilterFieldsPayload(scope))
+		if merr != nil {
+			fieldsPayload = []byte("[]")
+		}
+		fieldsJSON := string(fieldsPayload)
 
 		colData := templates.CollectionData{
 			ID:          collectionID,
diff --git a/templates/bookshelf.templ b/templates/bookshelf.templ
index 64b3948b..e224aeea 100644
--- a/templates/bookshelf.templ
+++ b/templates/bookshelf.templ
@@ -180,7 +180,7 @@ templ BookShelf(
 									data-filter-fields={ JSONArg(services.FilterFieldsPayload("books")) }
 									x-effect="filtersOpen === true && ensureReadyRule()"
 								>
-																		@FilterBuilderRows("books")
+																		@FilterBuilderRows("book")
 								</div>
 							</div>
 							<div class="sticky bottom-0 px-6 py-4 border-t" style="background-color: var(--bg-secondary); border-color: color-mix(in srgb, var(--text-primary) 7%, transparent);">
diff --git a/templates/bookshelf_templ.go b/templates/bookshelf_templ.go
index 4e5a59ce..1e116d17 100644
--- a/templates/bookshelf_templ.go
+++ b/templates/bookshelf_templ.go
@@ -424,7 +424,7 @@ func BookShelf(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = FilterBuilderRows("books").Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = FilterBuilderRows("book").Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/collection_rules.templ b/templates/collection_rules.templ
index 0f9ee43d..73d9a65c 100644
--- a/templates/collection_rules.templ
+++ b/templates/collection_rules.templ
@@ -21,7 +21,7 @@ templ CollectionRules(user User, collection CollectionData, fieldsJSON string, t
 			class={ "theme-" + user.Theme }
 			x-data="collectionRules"
 			data-collection-name={ collection.Name }
-			x-init={ "initCollectionRules('" + collection.ID + "', '" + scope + "', " + JSONArg(treeJSON) + ")" }
+			x-init={ "initCollectionRules('" + collection.ID + "', '" + scope + "')" }
 		>
 			@Header(user, "/collections")
 			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -52,15 +52,15 @@ templ CollectionRules(user User, collection CollectionData, fieldsJSON string, t
 				     root mode IS the collection's match semantics. -->
 				<div
 					x-data="filterBuilderExtra"
-					data-filter-fields={ JSONArg(fieldsJSON) }
-						data-scope={ scope }
-					data-tree={ JSONArg(treeJSON) }
+					data-filter-fields={ fieldsJSON }
+					data-scope={ scope }
+					data-tree={ treeJSON }
 					class="card p-6"
 				>
 					<div class="flex items-center justify-between mb-3 px-1">
 						<h2 class="text-lg font-bold" style="color: var(--text-primary)">Filter tree</h2>
 					</div>
-					@FilterBuilderRows("items")
+					@FilterBuilderRows("item")
 <div class="mt-4 pt-4 border-t flex justify-end gap-2" style="border-color: var(--border);">
 						<button type="button" @click="backToCollection()" class="btn btn-secondary">Cancel</button>
 						<button type="button" @click="applyCollectionTree()" class="btn btn-primary">Apply to Collection</button>
diff --git a/templates/collection_rules_templ.go b/templates/collection_rules_templ.go
index 2b2fc3fe..7135cf8e 100644
--- a/templates/collection_rules_templ.go
+++ b/templates/collection_rules_templ.go
@@ -89,9 +89,9 @@ func CollectionRules(user User, collection CollectionData, fieldsJSON string, tr
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.ResolveAttributeValue("initCollectionRules('" + collection.ID + "', '" + scope + "', " + JSONArg(treeJSON) + ")")
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.ResolveAttributeValue("initCollectionRules('" + collection.ID + "', '" + scope + "')")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 24, Col: 102}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 24, Col: 75}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
 		if templ_7745c5c3_Err != nil {
@@ -172,9 +172,9 @@ func CollectionRules(user User, collection CollectionData, fieldsJSON string, tr
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var10 string
-		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue(JSONArg(fieldsJSON))
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue(fieldsJSON)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 55, Col: 45}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 55, Col: 36}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
 		if templ_7745c5c3_Err != nil {
@@ -187,7 +187,7 @@ func CollectionRules(user User, collection CollectionData, fieldsJSON string, tr
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.ResolveAttributeValue(scope)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 56, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 56, Col: 23}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11)
 		if templ_7745c5c3_Err != nil {
@@ -198,9 +198,9 @@ func CollectionRules(user User, collection CollectionData, fieldsJSON string, tr
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.ResolveAttributeValue(JSONArg(treeJSON))
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.ResolveAttributeValue(treeJSON)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 57, Col: 34}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 57, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12)
 		if templ_7745c5c3_Err != nil {
@@ -210,7 +210,7 @@ func CollectionRules(user User, collection CollectionData, fieldsJSON string, tr
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = FilterBuilderRows("items").Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = FilterBuilderRows("item").Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/filter_builder.templ b/templates/filter_builder.templ
index 498dd714..c8385dd2 100644
--- a/templates/filter_builder.templ
+++ b/templates/filter_builder.templ
@@ -10,7 +10,7 @@ templ FilterBuilderRows(countNoun string) {
 <template x-for="row in builderRows" :key="row.key">
 										<div>
 											<template x-if="row.type === 'groupOpen'">
-												<div :class="row.depth > 0 ? 'fb-nested' : ''" class="flex items-center gap-1.5 flex-wrap py-1" :style="`margin-left:${row.depth * 14}px`">
+												<div :class="row.depth > 0 ? 'fb-nested' : ''" class="flex items-center gap-1.5 flex-wrap py-1" :style="'margin-left:' + (row.depth * 14) + 'px'">
 													<span class="text-[11px] font-semibold uppercase tracking-wide" style="color: var(--text-secondary)" x-text="row.depth === 0 ? 'Match' : 'Group'"></span>
 													<span class="flex-1"></span>
 													<button type="button" class="fb-mini-btn" @click="addRule(row.path)">+ rule</button>
@@ -19,7 +19,7 @@ templ FilterBuilderRows(countNoun string) {
 												</div>
 											</template>
 											<template x-if="row.type === 'rule'">
-												<div :class="row.depth > 0 ? 'fb-nested' : ''" class="flex items-center gap-1.5 flex-wrap py-0.5" :style="`margin-left:${(row.depth + 1) * 14}px`">
+												<div :class="row.depth > 0 ? 'fb-nested' : ''" class="flex items-center gap-1.5 flex-wrap py-0.5" :style="'margin-left:' + ((row.depth + 1) * 14) + 'px'">
 													<button type="button" class="fb-connective fb-connective-btn" :class="row.chipClickable ? '' : 'fb-chip-static'" x-show="!row.isFirst" x-text="row.chip" @click="if (row.chipClickable) toggleRuleConnective(row.path)" :title="row.chipClickable ? 'Switch this rule between AND / OR' : 'This rule joins with ' + row.chip"></button>
 													<!-- field picker: grouped menu -->
 													<div class="relative">
@@ -60,8 +60,8 @@ templ FilterBuilderRows(countNoun string) {
 													</template>
 													<template x-if="hasValueCell(row.rule) && (valueArity(row.rule) === 'one' || valueArity(row.rule) === 'many')">
 														<span class="fb-value-cell relative flex items-center gap-1">
-															<input type="text" class="input fb-value" :value="row.rule.values.join(',')" @input.debounce.250ms="setRuleValue(row.path, 0, $el.value)" @focus="openValueMenu(row.key, row.path, row.rule)" :placeholder="fieldMeta(row.rule.field)?.valueKind === 'days' ? 'days' : 'value'"/>
-															<template x-if="fieldMeta(row.rule.field)?.valueKind === 'days'">
+															<input type="text" class="input fb-value" :value="row.rule.values.join(',')" @input.debounce.250ms="setRuleValue(row.path, 0, $el.value)" @focus="openValueMenu(row.key, row.path, row.rule)" :placeholder="fieldIsDays(row.rule.field) ? 'days' : 'value'"/>
+															<template x-if="fieldIsDays(row.rule.field)">
 																<span class="text-xs whitespace-nowrap" style="color: var(--text-secondary)" x-text="'days'"></span>
 															</template>
 															<!-- field-aware value menu: server JSON (the other
@@ -69,7 +69,7 @@ templ FilterBuilderRows(countNoun string) {
 																Clicks anywhere inside the value cell never close
 																it — the opening focus-click must not race the
 																outside handler. -->
-															<div class="fb-menu fb-menu-value" x-show="suggestionShown(row.key)" @click.outside="if (!$event.target.closest('.fb-value-cell')) suggestionsOpen = ''">
+															<div class="fb-menu fb-menu-value" x-show="suggestionShown(row.key)" @click.outside="dismissSuggestions($event)">
 																<template x-for="s in (suggestions[row.key] || [])" :key="s.value">
 																	<button type="button" class="fb-menu-item" @click="pickSuggestion(row.key, row.path, s)">
 																		<span x-text="s.display || s.value"></span>
@@ -86,7 +86,7 @@ templ FilterBuilderRows(countNoun string) {
 												</div>
 											</template>
 											<template x-if="row.type === 'groupClose' && row.depth > 0">
-												<div class="fb-group-end" :style="`margin-left:${row.depth * 14}px`"></div>
+												<div class="fb-group-end" :style="'margin-left:' + (row.depth * 14) + 'px'"></div>
 											</template>
 										</div>
 									</template>
diff --git a/templates/filter_builder_templ.go b/templates/filter_builder_templ.go
index 5ababd60..acbdc3cc 100644
--- a/templates/filter_builder_templ.go
+++ b/templates/filter_builder_templ.go
@@ -35,7 +35,7 @@ func FilterBuilderRows(countNoun string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<template x-for=\"row in builderRows\" :key=\"row.key\"><div><template x-if=\"row.type === 'groupOpen'\"><div :class=\"row.depth > 0 ? 'fb-nested' : ''\" class=\"flex items-center gap-1.5 flex-wrap py-1\" :style=\"`margin-left:${row.depth * 14}px`\"><span class=\"text-[11px] font-semibold uppercase tracking-wide\" style=\"color: var(--text-secondary)\" x-text=\"row.depth === 0 ? 'Match' : 'Group'\"></span> <span class=\"flex-1\"></span> <button type=\"button\" class=\"fb-mini-btn\" @click=\"addRule(row.path)\">+ rule</button> <button type=\"button\" class=\"fb-mini-btn\" @click=\"addGroup(row.path)\">+ group</button> <button type=\"button\" class=\"fb-mini-btn fb-danger\" @click=\"removeNode(row.path)\" aria-label=\"Remove group\">×</button></div></template><template x-if=\"row.type === 'rule'\"><div :class=\"row.depth > 0 ? 'fb-nested' : ''\" class=\"flex items-center gap-1.5 flex-wrap py-0.5\" :style=\"`margin-left:${(row.depth + 1) * 14}px`\"><button type=\"button\" class=\"fb-connective fb-connective-btn\" :class=\"row.chipClickable ? '' : 'fb-chip-static'\" x-show=\"!row.isFirst\" x-text=\"row.chip\" @click=\"if (row.chipClickable) toggleRuleConnective(row.path)\" :title=\"row.chipClickable ? 'Switch this rule between AND / OR' : 'This rule joins with ' + row.chip\"></button><!-- field picker: grouped menu --><div class=\"relative\"><button type=\"button\" class=\"fb-picker\" :class=\"{'fb-picker-active': row.rule.field !== ''}\" @click=\"toggleMenu(row.key + ':field')\" x-text=\"fieldLabelOf(row.rule.field)\"></button><div class=\"fb-menu fb-menu-fields\" x-show=\"openMenu === row.key + ':field'\" @click.outside=\"openMenu = ''\"><div class=\"fb-menu-filter-wrap\"><input type=\"text\" class=\"fb-menu-filter\" placeholder=\"Filter fields…\" x-model=\"fieldFilter\" @keydown.enter.prevent @click.stop></div><div class=\"fb-menu-scroll\"><template x-for=\"grp in visibleFieldGroups\" :key=\"grp.group\"><div><div class=\"fb-menu-group\" x-text=\"grp.group\"></div><template x-for=\"f in grp.fields\" :key=\"f.key\"><button type=\"button\" class=\"fb-menu-item\" :class=\"row.rule.field === f.key ? 'fb-menu-item-active' : ''\" @click=\"setRuleField(row.path, f.key)\" x-text=\"f.label\"></button></template></div></template><div class=\"fb-menu-empty\" x-show=\"visibleFieldGroups.length === 0\">No matching fields</div></div></div></div><!-- operator picker (negation lives here) --><div class=\"relative\"><button type=\"button\" class=\"fb-picker fb-picker-op\" :class=\"{'fb-negated-text': isNegated(row.rule)}\" @click=\"toggleMenu(row.key + ':op')\" x-text=\"opLabelOf(row.rule)\"></button><div class=\"fb-menu\" x-show=\"openMenu === row.key + ':op'\" @click.outside=\"openMenu = ''\"><template x-for=\"o in opsFor(row.rule.field)\" :key=\"o.key\"><button type=\"button\" class=\"fb-menu-item\" :class=\"[row.rule.op === o.key ? 'fb-menu-item-active' : '', o.negated ? 'fb-negated-text' : '']\" @click=\"setRuleOp(row.path, o.key)\" x-text=\"o.label\"></button></template></div></div><!-- value cell: shape follows the operator + field kind --><template x-if=\"hasValueCell(row.rule) && valueArity(row.rule) === 'two'\"><span class=\"flex items-center gap-1\"><input type=\"text\" class=\"input fb-value\" :value=\"row.rule.values[0] || ''\" @input.debounce.250ms=\"setRuleValue(row.path, 0, $el.value)\" @focus=\"openValueMenu(row.key, row.path, row.rule)\" @click.outside=\"suggestionsOpen = ''\" placeholder=\"From\"> <span class=\"text-xs\" style=\"color: var(--text-secondary)\">and</span> <input type=\"text\" class=\"input fb-value\" :value=\"row.rule.values[1] || ''\" @input.debounce.250ms=\"setRuleValue(row.path, 1, $el.value)\" placeholder=\"To\"></span></template><template x-if=\"hasValueCell(row.rule) && (valueArity(row.rule) === 'one' || valueArity(row.rule) === 'many')\"><span class=\"fb-value-cell relative flex items-center gap-1\"><input type=\"text\" class=\"input fb-value\" :value=\"row.rule.values.join(',')\" @input.debounce.250ms=\"setRuleValue(row.path, 0, $el.value)\" @focus=\"openValueMenu(row.key, row.path, row.rule)\" :placeholder=\"fieldMeta(row.rule.field)?.valueKind === 'days' ? 'days' : 'value'\"><template x-if=\"fieldMeta(row.rule.field)?.valueKind === 'days'\"><span class=\"text-xs whitespace-nowrap\" style=\"color: var(--text-secondary)\" x-text=\"'days'\"></span></template><!-- field-aware value menu: server JSON (the other\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trules bound), or the field's fixed options.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tClicks anywhere inside the value cell never close\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tit — the opening focus-click must not race the\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toutside handler. --><div class=\"fb-menu fb-menu-value\" x-show=\"suggestionShown(row.key)\" @click.outside=\"if (!$event.target.closest('.fb-value-cell')) suggestionsOpen = ''\"><template x-for=\"s in (suggestions[row.key] || [])\" :key=\"s.value\"><button type=\"button\" class=\"fb-menu-item\" @click=\"pickSuggestion(row.key, row.path, s)\"><span x-text=\"s.display || s.value\"></span> <span class=\"text-xs\" style=\"color: var(--text-secondary)\" x-show=\"s.count > 0\" x-text=\"s.count + ' books'\"></span></button></template><div class=\"fb-menu-empty\" x-show=\"suggestionsLoading === row.key\">Loading…</div><div class=\"fb-menu-empty\" x-show=\"suggestionsLoading !== row.key && !(suggestions[row.key] || []).length\">No matching values</div></div></span></template><!-- delete rule --><button type=\"button\" class=\"fb-mini-btn fb-danger\" @click=\"removeNode(row.path)\" aria-label=\"Remove rule\">×</button></div></template><template x-if=\"row.type === 'groupClose' && row.depth > 0\"><div class=\"fb-group-end\" :style=\"`margin-left:${row.depth * 14}px`\"></div></template></div></template><!-- footer: add rule/group + the debounced live count\n\t\t\t\t\t\t\t\t\t(the composed engine's true COUNT — what the surface will\n\t\t\t\t\t\t\t\t\tshow once applied) --><div class=\"flex items-center justify-between px-1 py-2\"><div class=\"flex items-center gap-1.5\"><button type=\"button\" class=\"fb-mini-btn\" @click=\"addRule([])\">+ Rule</button> <button type=\"button\" class=\"fb-mini-btn\" @click=\"addGroup([])\">+ Group</button></div><span class=\"text-xs\" style=\"color: var(--text-secondary)\" x-show=\"matchCount !== null\" x-text=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<template x-for=\"row in builderRows\" :key=\"row.key\"><div><template x-if=\"row.type === 'groupOpen'\"><div :class=\"row.depth > 0 ? 'fb-nested' : ''\" class=\"flex items-center gap-1.5 flex-wrap py-1\" :style=\"'margin-left:' + (row.depth * 14) + 'px'\"><span class=\"text-[11px] font-semibold uppercase tracking-wide\" style=\"color: var(--text-secondary)\" x-text=\"row.depth === 0 ? 'Match' : 'Group'\"></span> <span class=\"flex-1\"></span> <button type=\"button\" class=\"fb-mini-btn\" @click=\"addRule(row.path)\">+ rule</button> <button type=\"button\" class=\"fb-mini-btn\" @click=\"addGroup(row.path)\">+ group</button> <button type=\"button\" class=\"fb-mini-btn fb-danger\" @click=\"removeNode(row.path)\" aria-label=\"Remove group\">×</button></div></template><template x-if=\"row.type === 'rule'\"><div :class=\"row.depth > 0 ? 'fb-nested' : ''\" class=\"flex items-center gap-1.5 flex-wrap py-0.5\" :style=\"'margin-left:' + ((row.depth + 1) * 14) + 'px'\"><button type=\"button\" class=\"fb-connective fb-connective-btn\" :class=\"row.chipClickable ? '' : 'fb-chip-static'\" x-show=\"!row.isFirst\" x-text=\"row.chip\" @click=\"if (row.chipClickable) toggleRuleConnective(row.path)\" :title=\"row.chipClickable ? 'Switch this rule between AND / OR' : 'This rule joins with ' + row.chip\"></button><!-- field picker: grouped menu --><div class=\"relative\"><button type=\"button\" class=\"fb-picker\" :class=\"{'fb-picker-active': row.rule.field !== ''}\" @click=\"toggleMenu(row.key + ':field')\" x-text=\"fieldLabelOf(row.rule.field)\"></button><div class=\"fb-menu fb-menu-fields\" x-show=\"openMenu === row.key + ':field'\" @click.outside=\"openMenu = ''\"><div class=\"fb-menu-filter-wrap\"><input type=\"text\" class=\"fb-menu-filter\" placeholder=\"Filter fields…\" x-model=\"fieldFilter\" @keydown.enter.prevent @click.stop></div><div class=\"fb-menu-scroll\"><template x-for=\"grp in visibleFieldGroups\" :key=\"grp.group\"><div><div class=\"fb-menu-group\" x-text=\"grp.group\"></div><template x-for=\"f in grp.fields\" :key=\"f.key\"><button type=\"button\" class=\"fb-menu-item\" :class=\"row.rule.field === f.key ? 'fb-menu-item-active' : ''\" @click=\"setRuleField(row.path, f.key)\" x-text=\"f.label\"></button></template></div></template><div class=\"fb-menu-empty\" x-show=\"visibleFieldGroups.length === 0\">No matching fields</div></div></div></div><!-- operator picker (negation lives here) --><div class=\"relative\"><button type=\"button\" class=\"fb-picker fb-picker-op\" :class=\"{'fb-negated-text': isNegated(row.rule)}\" @click=\"toggleMenu(row.key + ':op')\" x-text=\"opLabelOf(row.rule)\"></button><div class=\"fb-menu\" x-show=\"openMenu === row.key + ':op'\" @click.outside=\"openMenu = ''\"><template x-for=\"o in opsFor(row.rule.field)\" :key=\"o.key\"><button type=\"button\" class=\"fb-menu-item\" :class=\"[row.rule.op === o.key ? 'fb-menu-item-active' : '', o.negated ? 'fb-negated-text' : '']\" @click=\"setRuleOp(row.path, o.key)\" x-text=\"o.label\"></button></template></div></div><!-- value cell: shape follows the operator + field kind --><template x-if=\"hasValueCell(row.rule) && valueArity(row.rule) === 'two'\"><span class=\"flex items-center gap-1\"><input type=\"text\" class=\"input fb-value\" :value=\"row.rule.values[0] || ''\" @input.debounce.250ms=\"setRuleValue(row.path, 0, $el.value)\" @focus=\"openValueMenu(row.key, row.path, row.rule)\" @click.outside=\"suggestionsOpen = ''\" placeholder=\"From\"> <span class=\"text-xs\" style=\"color: var(--text-secondary)\">and</span> <input type=\"text\" class=\"input fb-value\" :value=\"row.rule.values[1] || ''\" @input.debounce.250ms=\"setRuleValue(row.path, 1, $el.value)\" placeholder=\"To\"></span></template><template x-if=\"hasValueCell(row.rule) && (valueArity(row.rule) === 'one' || valueArity(row.rule) === 'many')\"><span class=\"fb-value-cell relative flex items-center gap-1\"><input type=\"text\" class=\"input fb-value\" :value=\"row.rule.values.join(',')\" @input.debounce.250ms=\"setRuleValue(row.path, 0, $el.value)\" @focus=\"openValueMenu(row.key, row.path, row.rule)\" :placeholder=\"fieldIsDays(row.rule.field) ? 'days' : 'value'\"><template x-if=\"fieldIsDays(row.rule.field)\"><span class=\"text-xs whitespace-nowrap\" style=\"color: var(--text-secondary)\" x-text=\"'days'\"></span></template><!-- field-aware value menu: server JSON (the other\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trules bound), or the field's fixed options.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tClicks anywhere inside the value cell never close\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tit — the opening focus-click must not race the\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toutside handler. --><div class=\"fb-menu fb-menu-value\" x-show=\"suggestionShown(row.key)\" @click.outside=\"dismissSuggestions($event)\"><template x-for=\"s in (suggestions[row.key] || [])\" :key=\"s.value\"><button type=\"button\" class=\"fb-menu-item\" @click=\"pickSuggestion(row.key, row.path, s)\"><span x-text=\"s.display || s.value\"></span> <span class=\"text-xs\" style=\"color: var(--text-secondary)\" x-show=\"s.count > 0\" x-text=\"s.count + ' books'\"></span></button></template><div class=\"fb-menu-empty\" x-show=\"suggestionsLoading === row.key\">Loading…</div><div class=\"fb-menu-empty\" x-show=\"suggestionsLoading !== row.key && !(suggestions[row.key] || []).length\">No matching values</div></div></span></template><!-- delete rule --><button type=\"button\" class=\"fb-mini-btn fb-danger\" @click=\"removeNode(row.path)\" aria-label=\"Remove rule\">×</button></div></template><template x-if=\"row.type === 'groupClose' && row.depth > 0\"><div class=\"fb-group-end\" :style=\"'margin-left:' + (row.depth * 14) + 'px'\"></div></template></div></template><!-- footer: add rule/group + the debounced live count\n\t\t\t\t\t\t\t\t\t(the composed engine's true COUNT — what the surface will\n\t\t\t\t\t\t\t\t\tshow once applied) --><div class=\"flex items-center justify-between px-1 py-2\"><div class=\"flex items-center gap-1.5\"><button type=\"button\" class=\"fb-mini-btn\" @click=\"addRule([])\">+ Rule</button> <button type=\"button\" class=\"fb-mini-btn\" @click=\"addGroup([])\">+ Group</button></div><span class=\"text-xs\" style=\"color: var(--text-secondary)\" x-show=\"matchCount !== null\" x-text=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/web/src/collection-rules.ts b/web/src/collection-rules.ts
index 032e7c3b..94636058 100644
--- a/web/src/collection-rules.ts
+++ b/web/src/collection-rules.ts
@@ -16,8 +16,11 @@ function initCollectionRules(id: string, _scope: string, _treeJSON: string): voi
   collectionId = id;
 
   // The builder island emits its APPLY wire through this hook — the
-  // page (not the shared component) owns the collection write.
-  window.Alpine?.store("collectionTreeApply", {
+  // page (not the shared component) owns the collection write. The
+  // IMPORTED Alpine instance owns the store registry (the bookPicker
+  // pattern); window.Alpine is optional-chained elsewhere and may be
+  // absent at init timing.
+  Alpine.store("collectionTreeApply", {
     hook: async (wire: string) => {
       const token = localStorage.getItem("token");
       if (!token) {
diff --git a/web/src/filter_builder.ts b/web/src/filter_builder.ts
index 88d5081a..04d0c8e5 100644
--- a/web/src/filter_builder.ts
+++ b/web/src/filter_builder.ts
@@ -393,10 +393,10 @@ function filterBuilderData() {
     // applyCollectionTree delegates to the page-registered hook (the
     // collection editor PUTs the tree; All-Books never sets one).
     applyCollectionTree(): void {
-      const hook = (
-        window.Alpine?.store("collectionTreeApply") as { hook?: (wire: string) => void } | undefined
-      )?.hook;
-      if (hook) hook(this.treeJSON());
+      const store = Alpine.store("collectionTreeApply") as
+        | { hook?: (wire: string) => void }
+        | undefined;
+      if (store?.hook) store.hook(this.treeJSON());
     },
     // Rule tree (source of truth; hidden wire inputs are synced after
     // every mutation).
@@ -426,6 +426,20 @@ function filterBuilderData() {
     fieldMeta(key: string): FieldMeta | undefined {
       return FIELD_BY_KEY.get(key);
     },
+    // CSP-safe accessor: attribute expressions cannot use optional
+    // chaining (the CSP parser rejects `?.`), so the null-walk lives
+    // here.
+    fieldIsDays(key: string): boolean {
+      return this.fieldMeta(key)?.valueKind === "days";
+    },
+    // CSP-safe click-outside for the value menu (attribute expressions
+    // cannot carry if-statements).
+    dismissSuggestions(e: Event): void {
+      const target = e.target as HTMLElement | null;
+      if (!target || !target.closest(".fb-value-cell")) {
+        this.suggestionsOpen = "";
+      }
+    },
     fieldLabelOf(key: string): string {
       return FIELD_BY_KEY.get(key)?.label ?? "Field";
     },