Feature - Add multi-facet / nested filters pattern

[Copilot]

HyperUX lacked a central orchestrator for complex filter UIs composed of mixed input types. This change introduces a new Alpine pattern that manages unified filter state, debounced updates, runtime facet registration, and intersection metadata for disabling impossible option combinations.

• New pattern runtime: huxMultiFacetFilters

  • Added to PatternRegistration.astro as a first-class registration script.
  • Supports multi, single, search, and range facets.
  • Maintains unified filterState, computed filteredItems, availableValueMap, and invalidValueMap.
  • Supports dynamic registerFacet / unregisterFacet.
  • Emits both global and scoped change events:
    • hux-multi-facet-filters:change
    • hux-multi-facet-filters:{filtersId}:change

• Composable API for custom UIs

  • Added public methods for orchestration-only composition:
    • setFilterValue, toggleFilterValue, clearFacet, clearAllFilters, applyFilters
    • isValueAvailable, isValueInvalid, facetOptions
  • Debounce behavior is configurable (debounceMs) and controllable per update.

• New demo: mixed facet types working together

  • Added src/components/demos/MultiFacetFilters.astro.
  • Demonstrates checkboxes, search, range sliders, and select input coordinated through one state tree.
  • Surfaces invalid intersections to drive disabled/greyed option states.
  • Includes accessible live status messaging and semantic controls.

• New docs page

  • Added src/content/patterns/multi-facet-filters.mdx.
  • Documents runtime constraints, API, options, behavior contract, error handling, accessibility notes, and usage patterns aligned to HyperUX doc conventions.

<div x-data="huxMultiFacetFilters({ sourceItems, facets, filterState, debounceMs: 200 })">
  <input
    type="search"
    x-model="filterState.query"
    x-on:input="setFilterValue('query', filterState.query)"
  />

  <template x-for="option in facetOptions('categories')" x-bind:key="option.value">
    <label>
      <input
        type="checkbox"
        x-bind:checked="option.isSelected"
        x-bind:disabled="option.isInvalid && !option.isSelected"
        x-on:change="toggleFilterValue('categories', option.value)"
      />
      <span x-text="option.value"></span>
    </label>
  </template>
</div>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.google.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/astro dev --host 0.0.0.0 --port 4321 (dns block)
• sparrow.cloudflare.com
  • Triggering command: /opt/hostedtoolcache/node/24.15.0/x64/bin/node /opt/hostedtoolcache/node/24.15.0/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hyperux/hyperux/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/astro check (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/astro build (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/astro dev --host 0.0.0.0 --port 4321 (dns block)
• workers.cloudflare.com
  • Triggering command: /opt/hostedtoolcache/node/24.15.0/x64/bin/node /opt/hostedtoolcache/node/24.15.0/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hyperux/hyperux/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/astro check (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	hyperux	708db3e	Commit Preview URL Branch Preview URL	May 21 2026, 04:31 PM