@at-flux/astroflare 1.0.8 → 1.0.9

package/dist/core.cjs

@@ -2,11 +2,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_forms = require("./forms-8uIdWmMD.cjs");
 //#region src/tag-colors.ts
 const DEFAULT_OVERRIDES = {
-	shoots: "#dc3545",
-	tech: "#8a95a5",
-	ai: "#6b7b8d",
-	sites: "#7dd3c0",
-	flow: "#b367e0"
+	shoots: "#c4786a",
+	tech: "#4d8c7a",
+	ai: "#d9773a",
+	sites: "#b8942e",
+	flow: "#9b6bc9"
 };
 const hashStringToHue = (input) => {
 	let hash = 0;
@@ -56,9 +56,9 @@ const resolveHue = (tag, options) => {
 const getTagPalette = (tag, options = {}) => {
 	const hue = resolveHue(tag, options);
 	return {
-		bg: `hsla(${hue} 48% 58% / 0.12)`,
-		border: `hsla(${hue} 52% 58% / 0.34)`,
-		text: `hsl(${hue} 50% 66%)`
+		bg: `hsla(${hue} 58% 56% / 0.16)`,
+		border: `hsla(${hue} 56% 46% / 0.42)`,
+		text: `hsl(${hue} 58% 32%)`
 	};
 };
 //#endregion
@@ -79,6 +79,13 @@ const formatDisplayDate = (date, config = {}) => {
 //#region src/collection-query.ts
 const normalizeFilterToken = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").replace(/_+/g, "_");
 const parseFilterValueList = (value) => (value ?? "").split(",").map(normalizeFilterToken).filter(Boolean).filter((token, index, list) => list.indexOf(token) === index);
+const normalizeFilterValue = (key, value) => {
+	if (key === "date_from" || key === "date_to") {
+		const canonical = value.trim().replace(/_/g, "-");
+		return /^\d{4}-\d{2}-\d{2}$/.test(canonical) ? canonical : "";
+	}
+	return parseFilterValueList(value).join(",");
+};
 const formatFilterValueListLabel = (value) => parseFilterValueList(value).map((token) => token.replace(/_/g, " ").toUpperCase()).join(", ");
 const toInt = (value, fallback) => {
 	const parsed = Number.parseInt(value ?? "", 10);
@@ -95,7 +102,7 @@ const parseCollectionQuery = (searchParams, options = {}) => {
 	let filters = {};
 	if (rawFilters) try {
 		const parsed = JSON.parse(rawFilters);
-		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, parseFilterValueList(String(value)).join(",")]));
+		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, normalizeFilterValue(key, String(value))]).filter(([, value]) => value.length > 0));
 	} catch {
 		filters = {};
 	}
@@ -131,7 +138,7 @@ const buildCollectionHref = (pathname, query, overrides = {}) => {
 		offset: String(offsetFromPage)
 	});
 	if (Object.keys(next.filters ?? {}).length > 0) {
-		const normalizedFilters = Object.fromEntries(Object.entries(next.filters).map(([key, value]) => [key, parseFilterValueList(value).join(",")]));
+		const normalizedFilters = Object.fromEntries(Object.entries(next.filters).map(([key, value]) => [key, normalizeFilterValue(key, value)]));
 		params.set("filters", JSON.stringify(normalizedFilters));
 	}
 	return `${pathname}?${params.toString()}`;

package/dist/core.js

@@ -1,11 +1,11 @@
 import { composeEmailAddress, generateFormResultHtml, generateFormSectionHtml, renderEmailTemplate, sendEmail, t as forms_exports } from "./forms/index.js";
 //#region src/tag-colors.ts
 const DEFAULT_OVERRIDES = {
-	shoots: "#dc3545",
-	tech: "#8a95a5",
-	ai: "#6b7b8d",
-	sites: "#7dd3c0",
-	flow: "#b367e0"
+	shoots: "#c4786a",
+	tech: "#4d8c7a",
+	ai: "#d9773a",
+	sites: "#b8942e",
+	flow: "#9b6bc9"
 };
 const hashStringToHue = (input) => {
 	let hash = 0;
@@ -55,9 +55,9 @@ const resolveHue = (tag, options) => {
 const getTagPalette = (tag, options = {}) => {
 	const hue = resolveHue(tag, options);
 	return {
-		bg: `hsla(${hue} 48% 58% / 0.12)`,
-		border: `hsla(${hue} 52% 58% / 0.34)`,
-		text: `hsl(${hue} 50% 66%)`
+		bg: `hsla(${hue} 58% 56% / 0.16)`,
+		border: `hsla(${hue} 56% 46% / 0.42)`,
+		text: `hsl(${hue} 58% 32%)`
 	};
 };
 //#endregion
@@ -78,6 +78,13 @@ const formatDisplayDate = (date, config = {}) => {
 //#region src/collection-query.ts
 const normalizeFilterToken = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").replace(/_+/g, "_");
 const parseFilterValueList = (value) => (value ?? "").split(",").map(normalizeFilterToken).filter(Boolean).filter((token, index, list) => list.indexOf(token) === index);
+const normalizeFilterValue = (key, value) => {
+	if (key === "date_from" || key === "date_to") {
+		const canonical = value.trim().replace(/_/g, "-");
+		return /^\d{4}-\d{2}-\d{2}$/.test(canonical) ? canonical : "";
+	}
+	return parseFilterValueList(value).join(",");
+};
 const formatFilterValueListLabel = (value) => parseFilterValueList(value).map((token) => token.replace(/_/g, " ").toUpperCase()).join(", ");
 const toInt = (value, fallback) => {
 	const parsed = Number.parseInt(value ?? "", 10);
@@ -94,7 +101,7 @@ const parseCollectionQuery = (searchParams, options = {}) => {
 	let filters = {};
 	if (rawFilters) try {
 		const parsed = JSON.parse(rawFilters);
-		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, parseFilterValueList(String(value)).join(",")]));
+		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, normalizeFilterValue(key, String(value))]).filter(([, value]) => value.length > 0));
 	} catch {
 		filters = {};
 	}
@@ -130,7 +137,7 @@ const buildCollectionHref = (pathname, query, overrides = {}) => {
 		offset: String(offsetFromPage)
 	});
 	if (Object.keys(next.filters ?? {}).length > 0) {
-		const normalizedFilters = Object.fromEntries(Object.entries(next.filters).map(([key, value]) => [key, parseFilterValueList(value).join(",")]));
+		const normalizedFilters = Object.fromEntries(Object.entries(next.filters).map(([key, value]) => [key, normalizeFilterValue(key, value)]));
 		params.set("filters", JSON.stringify(normalizedFilters));
 	}
 	return `${pathname}?${params.toString()}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@at-flux/astroflare",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "description": "Reusable headless components, styles, and utilities for Astro + Tailwind v4 + Cloudflare projects",
   "author": "atflux <dev@atflux.uk>",

package/src/collection-query.ts

@@ -34,6 +34,14 @@ export const parseFilterValueList = (value: string | undefined): string[] =>
     .filter(Boolean)
     .filter((token, index, list) => list.indexOf(token) === index);
 
+const normalizeFilterValue = (key: string, value: string): string => {
+  if (key === "date_from" || key === "date_to") {
+    const canonical = value.trim().replace(/_/g, "-");
+    return /^\d{4}-\d{2}-\d{2}$/.test(canonical) ? canonical : "";
+  }
+  return parseFilterValueList(value).join(",");
+};
+
 export const formatFilterValueListLabel = (value: string | undefined): string =>
   parseFilterValueList(value)
     .map((token) => token.replace(/_/g, " ").toUpperCase())
@@ -71,7 +79,8 @@ export const parseCollectionQuery = (
       filters = Object.fromEntries(
         Object.entries(parsed)
           .filter(([, value]) => typeof value === "string")
-          .map(([key, value]) => [key, parseFilterValueList(String(value)).join(",")]),
+          .map(([key, value]) => [key, normalizeFilterValue(key, String(value))])
+          .filter(([, value]) => value.length > 0),
       );
     } catch {
       filters = {};
@@ -123,7 +132,7 @@ export const buildCollectionHref = (
     const normalizedFilters = Object.fromEntries(
       Object.entries(next.filters).map(([key, value]) => [
         key,
-        parseFilterValueList(value).join(","),
+        normalizeFilterValue(key, value),
       ]),
     );
     params.set("filters", JSON.stringify(normalizedFilters));

package/src/components/CollectionFooterControls.astro

@@ -9,8 +9,10 @@ import { buildCollectionHref, buildPageSequence, type CollectionQueryState } fro
 interface Props {
   pathname: string;
   query: CollectionQueryState;
+  stickyParams?: Record<string, string>;
   totalPages: number;
   currentPage: number;
+  totalItems?: number;
   sizeOptions?: number[];
   maxPageButtons?: number;
   class?: string;
@@ -19,8 +21,10 @@ interface Props {
 const {
   pathname,
   query,
+  stickyParams = {},
   totalPages,
   currentPage,
+  totalItems = 0,
   sizeOptions = [4, 2, 8, 12, 16],
   maxPageButtons = 7,
   class: className = "",
@@ -40,34 +44,58 @@ const pagerItems = buildPageSequence(totalPages, currentPage, maxPageButtons).ma
 const sanitizedSizeOptions = Array.from(
   new Set([query.size, ...sizeOptions].filter((value) => Number.isFinite(value) && value > 0)),
 ).sort((a, b) => a - b);
+const pageSizeDisabled = totalItems === 0;
+const pageSizeDisabledTitle = "Unavailable ⛔ Nothing to show. Reset filters to change page size.";
+const withStickyParams = (href: string): string => {
+  if (Object.keys(stickyParams).length === 0) return href;
+  const url = new URL(href, "https://astroflare.local");
+  for (const [key, value] of Object.entries(stickyParams)) {
+    url.searchParams.set(key, value);
+  }
+  return `${url.pathname}?${url.searchParams.toString()}`;
+};
+const pagerItemsWithSticky = pagerItems.map((item) =>
+  "href" in item && typeof item.href === "string"
+    ? { ...item, href: withStickyParams(item.href) }
+    : item,
+);
 ---
 
-<div class:list={["af-collection-footer grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-center", className]}>
-  <div class="af-collection-summary text-sm text-light-text-subtle dark:text-dark-text-subtle">
+<div class:list={["af-collection-footer grid gap-3", className]}>
+  <div class="af-collection-controls-row flex items-center justify-between gap-3">
+    <Pager items={pagerItemsWithSticky} />
+    <form method="get" action={pathname} data-astro-reload>
+      <input type="hidden" name="page" value="1" />
+      <input type="hidden" name="offset" value="0" />
+      {Object.entries(stickyParams).map(([key, value]) => (
+        <input type="hidden" name={key} value={value} />
+      ))}
+      {Object.keys(activeFilters).length > 0 && (
+        <input type="hidden" name="filters" value={JSON.stringify(activeFilters)} />
+      )}
+      <label
+        class:list={["af-page-size-label inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle", pageSizeDisabled && "is-disabled"]}
+        title={pageSizeDisabled ? pageSizeDisabledTitle : undefined}
+      >
+        <span>Page size</span>
+        <select
+          name="size"
+          disabled={pageSizeDisabled}
+          class="select-none rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+          onchange="this.form?.submit()"
+        >
+          {sanitizedSizeOptions.map((size) => (
+            <option value={String(size)} selected={size === query.size}>
+              {size}
+            </option>
+          ))}
+        </select>
+      </label>
+    </form>
+  </div>
+  <div class="af-collection-summary text-right text-sm text-light-text-subtle dark:text-dark-text-subtle">
     <slot name="summary" />
   </div>
-  <Pager items={pagerItems} class="md:col-start-2 md:justify-center" />
-  <form method="get" action={pathname} data-astro-reload class="md:col-start-3 md:justify-self-end">
-    <input type="hidden" name="page" value="1" />
-    <input type="hidden" name="offset" value="0" />
-    {Object.keys(activeFilters).length > 0 && (
-      <input type="hidden" name="filters" value={JSON.stringify(activeFilters)} />
-    )}
-    <label class="af-page-size-label inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle">
-      <span>Page size</span>
-      <select
-        name="size"
-        class="select-none rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
-        onchange="this.form?.submit()"
-      >
-        {sanitizedSizeOptions.map((size) => (
-          <option value={String(size)} selected={size === query.size}>
-            {size}
-          </option>
-        ))}
-      </select>
-    </label>
-  </form>
 </div>
 
 <style is:global>
@@ -81,4 +109,12 @@ const sanitizedSizeOptions = Array.from(
     user-select: none;
     -webkit-user-select: none;
   }
+  .af-page-size-label.is-disabled {
+    opacity: 0.58;
+    cursor: not-allowed;
+  }
+  .af-page-size-label.is-disabled select {
+    cursor: not-allowed;
+    border-style: dashed;
+  }
 </style>

package/src/components/CollectionQuery.astro

@@ -1,5 +1,7 @@
 ---
 import FilterPills from "./FilterPills.astro";
+import FilterPanel from "./FilterPanel.astro";
+import FilterRow from "./FilterRow.astro";
 import Pager from "./Pager.astro";
 import {
   buildCollectionHref,
@@ -13,10 +15,15 @@ type Props = CollectionQueryProps;
 const {
   useServer = false,
   filters = [],
+  filtersTitle = "Filters",
+  filtersLabel = "Tags",
+  extraFiltersLabel = "Date",
+  showExtraFilters = false,
   maxPageButtons = 7,
   filtersClass = "mb-8",
   pagerClass = "mt-6",
   sizeOptions = [4, 2, 8, 12, 16],
+  stickyParams = {},
   showPageSize = true,
   pageSizeClass = "",
   perPage = 9,
@@ -37,7 +44,10 @@ const normalize = (value: string): string => value.trim().toLowerCase();
 const maxTagFilters = 5;
 const activeTagTokens = parseFilterValueList(activeFilters.tag);
 const lockFiltersToAll = totalItems === 0 && activeTagTokens.length >= 2;
-const allHref = buildCollectionHref(pathname, query, { filters: {}, page: 1, offset: 0 });
+const clearTagFilters = Object.fromEntries(
+  Object.entries(activeFilters).filter(([key]) => key !== "tag"),
+);
+const allHref = buildCollectionHref(pathname, query, { filters: clearTagFilters, page: 1, offset: 0 });
 const serverFilterItems = filters.map((option) => {
   const isTagFilter = option.key === "tag";
   const normalizedOptionValue = normalizeFilterToken(option.value);
@@ -92,6 +102,26 @@ const pagerItems = buildPageSequence(totalPages, currentPage, maxPageButtons).ma
 const sanitizedSizeOptions = Array.from(
   new Set([query.size, ...sizeOptions].filter((value) => Number.isFinite(value) && value > 0)),
 ).sort((a, b) => a - b);
+const pageSizeDisabled = totalItems === 0;
+const pageSizeDisabledTitle = "Unavailable ⛔ Nothing to show. Reset filters to change page size.";
+const withStickyParams = (href: string): string => {
+  if (Object.keys(stickyParams).length === 0) return href;
+  const url = new URL(href, "https://astroflare.local");
+  for (const [key, value] of Object.entries(stickyParams)) {
+    url.searchParams.set(key, value);
+  }
+  return `${url.pathname}?${url.searchParams.toString()}`;
+};
+const allHrefWithSticky = withStickyParams(allHref);
+const serverFilterItemsWithSticky = serverFilterItems.map((item) => ({
+  ...item,
+  href: item.href ? withStickyParams(item.href) : item.href,
+}));
+const pagerItemsWithSticky = pagerItems.map((item) =>
+  "href" in item && typeof item.href === "string"
+    ? { ...item, href: withStickyParams(item.href) }
+    : item,
+);
 ---
 
 {useServer && (
@@ -100,30 +130,46 @@ const sanitizedSizeOptions = Array.from(
       name="filters"
     >
       {serverFilterItems.length > 0 && (
-        <FilterPills
-          items={serverFilterItems}
-          allHref={allHref}
-          active={Object.keys(activeFilters).length === 0 ? "all" : "__filtered__"}
-          class={filtersClass}
-        />
+        <FilterPanel title={filtersTitle}>
+          <FilterRow label={filtersLabel}>
+            <FilterPills
+              items={serverFilterItemsWithSticky}
+              allHref={allHrefWithSticky}
+              active={activeTagTokens.length === 0 ? "all" : "__filtered__"}
+              class={filtersClass}
+            />
+          </FilterRow>
+          {showExtraFilters && Astro.slots.has("extra-filters") && (
+            <FilterRow label={extraFiltersLabel}>
+              <slot name="extra-filters" />
+            </FilterRow>
+          )}
+        </FilterPanel>
       )}
     </slot>
     <slot />
     <slot name="pager">
-      <div class:list={["af-query-pager-row grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-center", pagerClass]}>
-        <Pager items={pagerItems} class="md:col-start-2 md:justify-center" />
+      <div class:list={["af-query-pager-row flex items-center justify-between gap-3", pagerClass]}>
+        <Pager items={pagerItemsWithSticky} />
         {showPageSize && (
           <form method="get" action={pathname} data-astro-reload class:list={["af-query-size-form md:col-start-3 md:justify-self-end", pageSizeClass]}>
             <input type="hidden" name="page" value="1" />
             <input type="hidden" name="offset" value="0" />
+            {Object.entries(stickyParams).map(([key, value]) => (
+              <input type="hidden" name={key} value={value} />
+            ))}
             {Object.keys(activeFilters).length > 0 && (
               <input type="hidden" name="filters" value={JSON.stringify(activeFilters)} />
             )}
-            <label class="af-page-size-label inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle">
+            <label
+              class:list={["af-page-size-label inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle", pageSizeDisabled && "is-disabled"]}
+              title={pageSizeDisabled ? pageSizeDisabledTitle : undefined}
+            >
               <span>Page size</span>
               <select
                 name="size"
                 class="select-none rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+                disabled={pageSizeDisabled}
                 onchange="this.form?.submit()"
               >
                 {sanitizedSizeOptions.map((size) => (
@@ -184,4 +230,12 @@ const sanitizedSizeOptions = Array.from(
     user-select: none;
     -webkit-user-select: none;
   }
+  .af-page-size-label.is-disabled {
+    opacity: 0.58;
+    cursor: not-allowed;
+  }
+  .af-page-size-label.is-disabled select {
+    cursor: not-allowed;
+    border-style: dashed;
+  }
 </style>

package/src/components/DateRangeFilterControls.astro

@@ -0,0 +1,106 @@
+---
+import FilterPills from "./FilterPills.astro";
+
+interface DatePresetItem {
+  value: string;
+  label: string;
+  href: string;
+  active?: boolean;
+  colorKey?: string;
+}
+
+interface Props {
+  pathname: string;
+  size: number;
+  activeDateFrom?: string;
+  activeDateTo?: string;
+  baseFilters: Record<string, string>;
+  anyDateHref: string;
+  datePresets: DatePresetItem[];
+  stickyParams?: Record<string, string>;
+  class?: string;
+}
+
+const {
+  pathname,
+  size,
+  activeDateFrom = "",
+  activeDateTo = "",
+  baseFilters,
+  anyDateHref,
+  datePresets,
+  stickyParams = {},
+  class: className = "",
+} = Astro.props;
+---
+
+<div class:list={["af-date-range-controls space-y-3", className]}>
+  <form
+    method="get"
+    action={pathname}
+    data-astro-reload
+    class="af-date-range-form flex flex-wrap items-end gap-2"
+    data-base-filters={JSON.stringify(baseFilters)}
+    onsubmit="const f=this;const base=JSON.parse(f.dataset.baseFilters||'{}');const from=f.querySelector('[data-date-from]')?.value?.trim();const to=f.querySelector('[data-date-to]')?.value?.trim();if(from)base.date_from=from;else delete base.date_from;if(to)base.date_to=to;else delete base.date_to;const hidden=f.querySelector('[data-filters-json]');if(Object.keys(base).length===0){hidden.removeAttribute('name');hidden.value='';}else{hidden.setAttribute('name','filters');hidden.value=JSON.stringify(base);}"
+  >
+    <input type="hidden" name="page" value="1" />
+    <input type="hidden" name="offset" value="0" />
+    <input type="hidden" name="size" value={String(size)} />
+    {Object.entries(stickyParams).map(([key, value]) => (
+      <input type="hidden" name={key} value={value} />
+    ))}
+    <input type="hidden" data-filters-json value={JSON.stringify(baseFilters)} />
+    <label class="inline-flex items-center gap-2 text-[0.68rem] font-medium uppercase tracking-[0.06em] text-light-text-subtle dark:text-dark-text-subtle">
+      <span>From</span>
+      <input
+        type="date"
+        data-date-from
+        value={activeDateFrom}
+        oninput="if(this.value===''||/^\d{4}-\d{2}-\d{2}$/.test(this.value)){this.form?.requestSubmit?.() ?? this.form?.submit()}"
+        onchange="this.form?.requestSubmit?.() ?? this.form?.submit()"
+        class="af-date-chip-input rounded-full border border-light-border bg-light-surface px-2.5 py-0.5 text-[0.68rem] font-medium tracking-[0.06em] text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+      />
+    </label>
+    <label class="inline-flex items-center gap-2 text-[0.68rem] font-medium uppercase tracking-[0.06em] text-light-text-subtle dark:text-dark-text-subtle">
+      <span>To</span>
+      <input
+        type="date"
+        data-date-to
+        value={activeDateTo}
+        oninput="if(this.value===''||/^\d{4}-\d{2}-\d{2}$/.test(this.value)){this.form?.requestSubmit?.() ?? this.form?.submit()}"
+        onchange="this.form?.requestSubmit?.() ?? this.form?.submit()"
+        class="af-date-chip-input rounded-full border border-light-border bg-light-surface px-2.5 py-0.5 text-[0.68rem] font-medium tracking-[0.06em] text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+      />
+    </label>
+  </form>
+  <FilterPills
+    includeAll
+    allLabel="Any Date"
+    allHref={anyDateHref}
+    active={datePresets.some((item) => item.active) ? "__filtered__" : "all"}
+    itemCase="none"
+    items={datePresets}
+  />
+</div>
+
+<style is:global>
+  .af-date-range-form input[type="date"] {
+    color-scheme: light;
+    min-height: 1.625rem;
+  }
+  [data-theme="dark"] .af-date-range-form input[type="date"] {
+    color-scheme: dark;
+  }
+  .af-date-range-form input[type="date"]::-webkit-calendar-picker-indicator {
+    opacity: 0.95;
+    cursor: pointer;
+    filter: saturate(0) brightness(0.38) contrast(1.2);
+  }
+  [data-theme="dark"] .af-date-range-form input[type="date"]::-webkit-calendar-picker-indicator {
+    filter: saturate(0) brightness(1.15) contrast(1.05);
+  }
+  .af-date-range-form input[type="date"]:focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--color-secondary, #7c3aed) 55%, transparent);
+    outline-offset: 2px;
+  }
+</style>

package/src/components/DisclosurePanel.astro

@@ -0,0 +1,118 @@
+---
+interface Props {
+  summary: string;
+  open?: boolean;
+  class?: string;
+  summaryClass?: string;
+  contentClass?: string;
+}
+
+const {
+  summary,
+  open = false,
+  class: className = "",
+  summaryClass = "",
+  contentClass = "",
+} = Astro.props;
+---
+
+<details class:list={["af-disclosure", className]} open={open}>
+  <summary class:list={["af-disclosure-summary", summaryClass]}>
+    <span>{summary}</span>
+    <span class="af-disclosure-chevron" aria-hidden="true">
+      <svg viewBox="0 0 16 16" width="16" height="16" focusable="false" aria-hidden="true">
+        <path d="M4 6.5L8 10.5L12 6.5" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </span>
+  </summary>
+  <div class:list={["af-disclosure-content", contentClass]}>
+    <slot />
+  </div>
+</details>
+
+<script>
+  const parseHasActiveFilters = () => {
+    const params = new URLSearchParams(window.location.search);
+    const rawFilters = params.get("filters");
+    if (!rawFilters) return false;
+    try {
+      const parsed = JSON.parse(rawFilters);
+      return Boolean(parsed && typeof parsed === "object" && Object.keys(parsed).length > 0);
+    } catch {
+      return false;
+    }
+  };
+
+  const ensureStickyInput = (form) => {
+    let input = form.querySelector('input[name="filters_open"]');
+    if (!input) {
+      input = document.createElement("input");
+      input.setAttribute("type", "hidden");
+      input.setAttribute("name", "filters_open");
+      form.appendChild(input);
+    }
+    input.setAttribute("value", "1");
+  };
+
+  const syncFiltersOpenState = (isOpen) => {
+    const hasActiveFilters = parseHasActiveFilters();
+    const shouldPersistOpen = isOpen || hasActiveFilters;
+    const forms = document.querySelectorAll('form[method="get"]');
+
+    for (const formNode of forms) {
+      if (!(formNode instanceof HTMLFormElement)) continue;
+      if (shouldPersistOpen) {
+        ensureStickyInput(formNode);
+      } else {
+        const input = formNode.querySelector('input[name="filters_open"]');
+        if (input) input.remove();
+      }
+    }
+
+    const nextUrl = new URL(window.location.href);
+    if (shouldPersistOpen) nextUrl.searchParams.set("filters_open", "1");
+    else nextUrl.searchParams.delete("filters_open");
+    if (nextUrl.toString() !== window.location.href) {
+      window.history.replaceState(window.history.state, "", nextUrl.toString());
+    }
+  };
+
+  const disclosures = document.querySelectorAll("details.af-disclosure");
+  for (const disclosureNode of disclosures) {
+    if (!(disclosureNode instanceof HTMLDetailsElement)) continue;
+    syncFiltersOpenState(disclosureNode.open);
+    disclosureNode.addEventListener("toggle", () => {
+      syncFiltersOpenState(disclosureNode.open);
+    });
+  }
+</script>
+
+<style is:global>
+  .af-disclosure-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    cursor: pointer;
+    list-style: none;
+  }
+  .af-disclosure-summary::-webkit-details-marker {
+    display: none;
+  }
+  .af-disclosure-chevron {
+    display: inline-flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border: 1px solid currentColor;
+    flex: 0 0 auto;
+    opacity: 0.88;
+    transition: transform 140ms ease;
+    transform-origin: center;
+  }
+  .af-disclosure[open] .af-disclosure-chevron {
+    transform: rotate(180deg);
+  }
+</style>

package/src/components/FilterPanel.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  title?: string;
+  class?: string;
+}
+
+const { title = "Filters", class: className = "" } = Astro.props;
+---
+
+<section class:list={["af-filter-panel", className]} aria-label={title}>
+  {title && <p class="af-filter-panel-title">{title}</p>}
+  <div class="af-filter-panel-body">
+    <slot />
+  </div>
+</section>
+
+<style is:global>
+  .af-filter-panel-title {
+    margin: 0 0 0.8rem 0;
+    font-size: 0.82rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: color-mix(in oklab, var(--color-light-text-title, #1f2937) 72%, var(--color-light-text-subtle, #6b7280));
+  }
+  [data-theme="dark"] .af-filter-panel-title {
+    color: color-mix(in oklab, var(--color-dark-text-title, #f3f4f6) 72%, var(--color-dark-text-subtle, #9ca3af));
+  }
+</style>

package/src/components/FilterPills.astro

@@ -112,9 +112,9 @@ const normalizedItems = items.map((item) =>
                 type="submit"
                 class:list={["af-filter-pill", isActive && "is-active"]}
                 style={{
-                  "--af-pill-bg": palette.bg,
-                  "--af-pill-border": palette.border,
-                  "--af-pill-text": palette.text,
+                  "--af-tag-bg": palette.bg,
+                  "--af-tag-border": palette.border,
+                  "--af-tag-text": palette.text,
                 }}
               >
                 {label}
@@ -127,11 +127,12 @@ const normalizedItems = items.map((item) =>
           type="button"
           disabled
           aria-disabled="true"
+          title="Nothing to show with current filters. Reset or remove filters."
           class:list={["af-filter-pill", isActive && "is-active"]}
           style={{
-            "--af-pill-bg": palette.bg,
-            "--af-pill-border": palette.border,
-            "--af-pill-text": palette.text,
+            "--af-tag-bg": palette.bg,
+            "--af-tag-border": palette.border,
+            "--af-tag-text": palette.text,
           }}
         >
           {label}
@@ -142,9 +143,9 @@ const normalizedItems = items.map((item) =>
           data-filter={item.value}
           class:list={["af-filter-pill", isActive && "is-active"]}
           style={{
-            "--af-pill-bg": palette.bg,
-            "--af-pill-border": palette.border,
-            "--af-pill-text": palette.text,
+            "--af-tag-bg": palette.bg,
+            "--af-tag-border": palette.border,
+            "--af-tag-text": palette.text,
           }}
         >
           {label}
@@ -157,13 +158,13 @@ const normalizedItems = items.map((item) =>
 <style>
   .af-filter-pill {
     border-radius: 9999px;
-    border: 1px solid var(--af-pill-border, var(--color-light-border));
-    background: var(--af-pill-bg, color-mix(in oklab, var(--color-light-surface) 80%, transparent));
-    color: var(--af-pill-text, color-mix(in oklab, var(--color-light-text-subtle) 78%, transparent));
-    padding: 0.35rem 0.9rem;
-    font-size: 0.72rem;
+    border: 1px solid var(--af-tag-border, var(--color-light-border));
+    background: var(--af-tag-bg, color-mix(in oklab, var(--color-light-surface) 80%, transparent));
+    color: var(--af-tag-text, color-mix(in oklab, var(--color-light-text-body, #111827) 88%, transparent));
+    padding: 0.125rem 0.625rem;
+    font-size: 0.68rem;
     font-weight: 500;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.06em;
     text-transform: uppercase;
     cursor: pointer;
     transition: transform 130ms ease, filter 130ms ease;
@@ -179,19 +180,20 @@ const normalizedItems = items.map((item) =>
   }
 
   .af-filter-pill:hover {
-    filter: brightness(1.04);
+    filter: brightness(0.97) saturate(1.04);
   }
   .af-filter-pill:disabled,
   .af-filter-pill[aria-disabled="true"] {
     cursor: not-allowed;
-    opacity: 0.48;
-    filter: grayscale(0.3);
+    opacity: 0.34;
+    filter: grayscale(0.45) contrast(0.86);
+    color: color-mix(in oklab, var(--af-tag-text, var(--color-light-text-subtle, #6b7280)) 42%, var(--color-light-text-subtle, #6b7280));
   }
 
   .af-filter-pill.is-active {
-    border-color: color-mix(in oklab, var(--af-pill-text, var(--color-secondary)) 80%, transparent);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--af-pill-text, var(--color-secondary)) 36%, transparent);
-    outline: 2px solid color-mix(in oklab, var(--af-pill-text, var(--color-secondary)) 48%, transparent);
+    border-color: color-mix(in oklab, var(--af-tag-text, var(--color-secondary)) 80%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--af-tag-text, var(--color-secondary)) 36%, transparent);
+    outline: 2px solid color-mix(in oklab, var(--af-tag-text, var(--color-secondary)) 48%, transparent);
     outline-offset: 1px;
     font-weight: 600;
     filter: saturate(1.14) brightness(1.06);
@@ -200,28 +202,34 @@ const normalizedItems = items.map((item) =>
     text-underline-offset: 0.15em;
   }
   .af-filter-pill.af-filter-pill-all {
-    --af-pill-bg: transparent;
-    --af-pill-border: color-mix(in oklab, var(--color-light-text-subtle) 45%, transparent);
-    --af-pill-text: color-mix(in oklab, var(--color-light-text-body) 92%, transparent);
+    --af-tag-bg: transparent;
+    --af-tag-border: color-mix(in oklab, var(--color-light-text-subtle) 45%, transparent);
+    --af-tag-text: color-mix(in oklab, var(--color-light-text-body) 92%, transparent);
   }
   .af-filter-pill.af-filter-pill-all.is-active {
-    --af-pill-bg: color-mix(in oklab, var(--color-light-text-body) 7%, transparent);
-    --af-pill-border: color-mix(in oklab, var(--color-light-text-body) 72%, transparent);
-    --af-pill-text: var(--color-light-text-body);
+    --af-tag-bg: color-mix(in oklab, var(--color-light-text-body) 7%, transparent);
+    --af-tag-border: color-mix(in oklab, var(--color-light-text-body) 72%, transparent);
+    --af-tag-text: var(--color-light-text-body);
   }
   :global([data-theme="dark"]) .af-filter-pill {
-    color: var(--af-pill-text, color-mix(in oklab, var(--color-dark-text-subtle) 85%, transparent));
-    border-color: var(--af-pill-border, var(--color-dark-border));
-    background: var(--af-pill-bg, color-mix(in oklab, var(--color-dark-surface) 70%, transparent));
+    color: color-mix(in oklab, var(--af-tag-text, #d1d5db) 34%, var(--color-dark-text-body, #f3f4f6));
+    border-color: color-mix(in oklab, var(--af-tag-border, var(--color-dark-border)) 62%, var(--color-dark-border) 38%);
+    background: color-mix(in oklab, var(--af-tag-bg, transparent) 48%, var(--color-dark-surface, #1f2937) 52%);
   }
   :global([data-theme="dark"]) .af-filter-pill.af-filter-pill-all {
-    --af-pill-bg: transparent;
-    --af-pill-border: color-mix(in oklab, var(--color-dark-text-subtle) 48%, transparent);
-    --af-pill-text: color-mix(in oklab, var(--color-dark-text-body) 90%, transparent);
+    --af-tag-bg: transparent;
+    --af-tag-border: color-mix(in oklab, var(--color-dark-text-subtle) 48%, transparent);
+    --af-tag-text: color-mix(in oklab, var(--color-dark-text-body) 90%, transparent);
   }
   :global([data-theme="dark"]) .af-filter-pill.af-filter-pill-all.is-active {
-    --af-pill-bg: color-mix(in oklab, var(--color-dark-text-body) 10%, transparent);
-    --af-pill-border: color-mix(in oklab, var(--color-dark-text-body) 70%, transparent);
-    --af-pill-text: var(--color-dark-text-body);
+    --af-tag-bg: color-mix(in oklab, var(--color-dark-text-body) 10%, transparent);
+    --af-tag-border: color-mix(in oklab, var(--color-dark-text-body) 70%, transparent);
+    --af-tag-text: var(--color-dark-text-body);
+  }
+  :global([data-theme="dark"]) .af-filter-pill:disabled,
+  :global([data-theme="dark"]) .af-filter-pill[aria-disabled="true"] {
+    opacity: 0.42;
+    filter: grayscale(0.35) contrast(0.9);
+    color: color-mix(in oklab, var(--color-dark-text-subtle, #9ca3af) 68%, var(--af-tag-text, #d1d5db));
   }
 </style>

package/src/components/FilterRow.astro

@@ -0,0 +1,57 @@
+---
+interface Props {
+  label: string;
+  class?: string;
+}
+
+const { label, class: className = "" } = Astro.props;
+---
+
+<div class:list={["af-filter-row", className]}>
+  <p class="af-filter-row-label">{label}</p>
+  <div class="af-filter-row-content">
+    <slot />
+  </div>
+</div>
+
+<style is:global>
+  .af-filter-row {
+    display: grid;
+    grid-template-columns: 4.75rem 1fr;
+    align-items: start;
+    column-gap: 0.75rem;
+  }
+  .af-filter-row + .af-filter-row {
+    margin-top: 0.95rem;
+    padding-top: 0.9rem;
+    border-top: 1px solid color-mix(in oklab, var(--color-area-divider-light, var(--color-light-border, #d1d5db)) 58%, transparent);
+  }
+  .af-filter-row-label {
+    margin: 0;
+    padding-top: 0.35rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--color-area-ui-label-light, color-mix(in oklab, var(--color-light-text-subtle, #6b7280) 92%, transparent));
+  }
+  .af-filter-row-content {
+    min-width: 0;
+    padding-bottom: 0.15rem;
+  }
+  [data-theme="dark"] .af-filter-row-label {
+    color: var(--color-area-ui-label-dark, color-mix(in oklab, var(--color-dark-text-body, #f3f4f6) 68%, var(--color-dark-text-subtle, #9ca3af) 32%));
+  }
+  [data-theme="dark"] .af-filter-row + .af-filter-row {
+    border-top-color: color-mix(in oklab, var(--color-area-divider-dark, var(--color-dark-border, #374151)) 58%, transparent);
+  }
+  @media (max-width: 640px) {
+    .af-filter-row {
+      grid-template-columns: 1fr;
+      row-gap: 0.35rem;
+    }
+    .af-filter-row-label {
+      padding-top: 0;
+    }
+  }
+</style>

package/src/components/Pager.astro

@@ -53,6 +53,7 @@ const formPartsFromHref = (href: string): { action: string; fields: Array<{ name
             data-page={String(item.page)}
             disabled={item.disabled ?? item.active}
             aria-disabled={item.disabled ?? item.active}
+            title={(item.disabled ?? item.active) ? "Unavailable ⛔" : undefined}
             class:list={["af-pager-pill", item.active && "is-active"]}
           >
             {item.label ?? item.page}
@@ -97,7 +98,6 @@ const formPartsFromHref = (href: string): { action: string; fields: Array<{ name
   .af-pager .af-pager-pill[aria-disabled="true"] {
     cursor: not-allowed;
     opacity: 0.5;
-    pointer-events: none;
     border-color: color-mix(in oklab, var(--color-light-border) 65%, transparent);
     color: color-mix(in oklab, var(--color-light-text-subtle) 50%, transparent);
     background: color-mix(in oklab, var(--color-light-surface) 35%, transparent);

package/src/components/TagSummary.astro

@@ -43,12 +43,12 @@ const overflowTooltip = overflowItems.map(formatItem).join(", ");
     return (
       <span
         style={{
-          backgroundColor: palette.bg,
-          borderColor: palette.border,
-          color: palette.text,
+          "--af-tag-bg": palette.bg,
+          "--af-tag-border": palette.border,
+          "--af-tag-text": palette.text,
         }}
         class:list={[
-          "inline-block rounded-full border px-2.5 py-0.5 text-[0.68rem] font-medium uppercase tracking-[0.06em]",
+          "af-tag-tone inline-block rounded-full border px-2.5 py-0.5 text-[0.68rem] font-medium uppercase tracking-[0.06em]",
           itemClass,
         ]}
       >
@@ -69,3 +69,16 @@ const overflowTooltip = overflowItems.map(formatItem).join(", ");
     </Tooltip>
   )}
 </div>
+
+<style is:global>
+  .af-tag-tone {
+    background: var(--af-tag-bg, color-mix(in oklab, var(--color-light-surface) 86%, transparent));
+    border-color: var(--af-tag-border, color-mix(in oklab, var(--color-light-border) 72%, transparent));
+    color: var(--af-tag-text, color-mix(in oklab, var(--color-light-text-title) 84%, var(--color-light-text-subtle) 16%));
+  }
+  [data-theme="dark"] .af-tag-tone {
+    background: color-mix(in oklab, var(--af-tag-bg, transparent) 48%, var(--color-dark-surface) 52%);
+    border-color: color-mix(in oklab, var(--af-tag-border, var(--color-dark-border)) 62%, var(--color-dark-border) 38%);
+    color: color-mix(in oklab, var(--af-tag-text, var(--color-dark-text-body)) 38%, var(--color-dark-text-body) 62%);
+  }
+</style>

package/src/components/collection-query-props.ts

@@ -7,6 +7,16 @@ export interface CollectionQueryFilterOption {
 }
 
 interface CollectionQueryBaseProps {
+  /** Extra query params to preserve across filter/pager/size interactions. */
+  stickyParams?: Record<string, string>;
+  /** Optional title shown above filters block in server mode. */
+  filtersTitle?: string;
+  /** Label shown left of tag pills in server mode. */
+  filtersLabel?: string;
+  /** Label shown left of optional extra filters slot in server mode. */
+  extraFiltersLabel?: string;
+  /** Controls whether the optional extra-filters row renders. */
+  showExtraFilters?: boolean;
   /** Available filters for filter pill rendering. */
   filters?: CollectionQueryFilterOption[];
   /** Max visible pager buttons before ellipsis. */

package/src/tag-colors.ts

@@ -13,11 +13,11 @@ export interface TagColorOptions {
 }
 
 const DEFAULT_OVERRIDES: Record<string, string> = {
-  shoots: "#dc3545",
-  tech: "#8a95a5",
-  ai: "#6b7b8d",
-  sites: "#7dd3c0",
-  flow: "#b367e0",
+  shoots: "#c4786a",
+  tech: "#4d8c7a",
+  ai: "#d9773a",
+  sites: "#b8942e",
+  flow: "#9b6bc9",
 };
 
 const hashStringToHue = (input: string): number => {
@@ -82,8 +82,8 @@ export const getTagPalette = (
 ): TagPalette => {
   const hue = resolveHue(tag, options);
   return {
-    bg: `hsla(${hue} 48% 58% / 0.12)`,
-    border: `hsla(${hue} 52% 58% / 0.34)`,
-    text: `hsl(${hue} 50% 66%)`,
+    bg: `hsla(${hue} 58% 56% / 0.16)`,
+    border: `hsla(${hue} 56% 46% / 0.42)`,
+    text: `hsl(${hue} 58% 32%)`,
   };
 };