@celestia-island/hikari 0.55.161 → 0.55.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.161",
+  "version": "0.55.162",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkBreadcrumb.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, type PropType } from "vue";
+import { safeHref } from "../utils/safeHref";
 import { useI18n } from "../i18n/context";
 import "./HkBreadcrumb.scss";
 
@@ -19,7 +20,7 @@ export default defineComponent({
           {props.items.map((item, index) => (
             <li key={index} class="hk-breadcrumb-item">
               {item.to ? (
-                <a href={item.to} class="hk-breadcrumb-link">{item.label}</a>
+                <a href={safeHref(item.to)} class="hk-breadcrumb-link">{item.label}</a>
               ) : (
                 <span class="hk-breadcrumb-link">{item.label}</span>
               )}

package/src/components/HkFilterPanel.scss

@@ -9,10 +9,12 @@
  * Row anatomy: [field label | operator symbol group | value control +
  * remove]. Rows are the page's ACTIVE conditions; the trailing add row
  * (button parked in the operator column, user direction 2026-10-12)
- * materializes the next latent field. Edits commit LIVE (the desktop
- * panel has no confirm button); the mobile sheet's single confirm merely
- * closes — the standard HkPopover sheetOnMobile split renders the same
- * panel in both shapes.
+ * opens the FIELD CHOOSER — a popover of the latent fields (user
+ * direction 2026-10-14: add means pick WHO, never append by declaration
+ * order) and the picked field materializes as a row. Edits commit LIVE
+ * (the desktop panel has no confirm button); the mobile sheet's single
+ * confirm merely closes — the standard HkPopover sheetOnMobile split
+ * renders the same panel in both shapes.
  *
  * ONE GRID, ONE AXIS (user direction 2026-10-12): the panel itself is
  * the grid and each row contributes `display: contents` cells, so the
@@ -21,6 +23,7 @@
  * puts every cell of every row on the same vertical axis — label,
  * symbol group, control, and remove button all share it.
  */
+@use "./menu-item" as mi;
 
 .hk-filter-panel {
   display: grid;
@@ -179,6 +182,64 @@
   cursor: not-allowed;
 }
 
+/* The trigger's open face while the chooser is up (the popup-select
+ * trigger's [data-state="open"] grammar — the user must see the button
+ * and its menu as one surface). */
+.hk-filter-panel-add[data-state="open"] {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+/* ── The add-condition field chooser ───────────────────────────────
+ * A popover of the LATENT fields (user direction 2026-10-14): the
+ * add button opens it, the picked field materializes as a row. Same
+ * popout geometry as the panel's popup selects (min-width floor, one
+ * 240px content cap, then viewport scroll); item rows speak the
+ * unified menu-item spec, so the list reads as one family with select
+ * options and menu rows around it. The mobile sheet form flows from
+ * the shared `.hk-is-sheet` token context — touch geometry comes
+ * free, no per-component media query. */
+.hk-filter-add-content {
+  min-width: 180px;
+  max-height: 240px;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.hk-filter-add-viewport .hk-scroll-container-viewport {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-filter-add-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+
+.hk-filter-add-item {
+  @include mi.item;
+  width: 100%;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+/* Keyboard highlight face — identical values to the popup-select item's
+ * [data-highlighted]; hover comes from mi.item's own guarded :hover. */
+.hk-filter-add-item[data-highlighted] {
+  background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
+  border-color: var(--c-primary-medium, rgb(var(--color-primary) / 25%));
+  color: rgb(var(--color-text));
+}
+
+.hk-filter-add-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 /* Phones: the operator column widens a touch (user direction
  * 2026-10-12 — the old 4.25rem cap cramped the symbol group) and the
  * row lets the value control take the remaining width. The group itself

package/src/components/HkFilterPanel.styles.test.ts

@@ -79,4 +79,15 @@ describe("HkFilterPanel stylesheet contract", () => {
     expect(media).toMatch(/max-width:\s*5\.25rem/);
     expect(media).toMatch(/minmax\(4\.75rem,\s*auto\)/);
   });
+
+  it("registers the chooser rows in the sheet-context token swap (44px touch rows)", () => {
+    // The add-condition chooser docks as a bottom sheet on mobile; its
+    // items must ride the unified menu-item SHEET geometry. The swap
+    // lives in _menu-item.scss's adopter list (pulled in via the
+    // @use chain) — an unregistered class silently keeps the 34px
+    // desktop rows (R1 2026-10-14 finding: exactly that happened).
+    expect(css).toMatch(
+      /\.hk-popover-panel\.hk-is-sheet[^{]*\.hk-filter-add-item[^{]*\{[^}]*--hk-menu-item-min-h:\s*44px/,
+    );
+  });
 });

package/src/components/HkFilterPanel.test.tsx

@@ -19,6 +19,11 @@ afterEach(() => {
     app.unmount();
     container.remove();
   }
+  // The field chooser (and any popout it opened) teleports to <body>
+  // (HkPopover) — sweep the leftovers so the next test starts clean.
+  document.body
+    .querySelectorAll(".hk-filter-add-item, .hk-popover-panel, .hk-select-popout-host")
+    .forEach((el) => el.remove());
 });
 
 const FIELDS = [
@@ -59,7 +64,34 @@ describe("HkFilterPanel", () => {
     expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(FIELDS.length);
   });
 
-  it("adds the next latent field with its kind's default operator and an empty value", () => {
+  it("opens a field chooser on the add verb instead of appending anything", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const add = c.querySelector<HTMLButtonElement>(".hk-filter-panel-add")!;
+    expect(add.getAttribute("aria-haspopup")).toBe("menu");
+    expect(add.getAttribute("aria-expanded")).toBe("false");
+    add.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    // The click itself appends NOTHING (user direction 2026-10-14: add
+    // means pick WHO — never the next field in declaration order)…
+    expect(seen).toBeNull();
+    // …and the chooser lists ONLY the latent fields, in declaration
+    // order, labeled by the field defs.
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")].map(
+      (el) => el.textContent,
+    );
+    expect(items).toEqual(["Calls", "Agent", "Since"]);
+    expect(add.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("materializes the picked field with its kind's default operator and closes the chooser", async () => {
     let seen: HkFilterState | null = null;
     const c = mount(
       h(HkFilterPanel, {
@@ -69,9 +101,48 @@ describe("HkFilterPanel", () => {
       }),
     );
     c.querySelector(".hk-filter-panel-add")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = [...document.body.querySelectorAll(".hk-filter-add-item")].find(
+      (el) => el.textContent === "Agent",
+    )!;
+    expect(item, "chooser lists the latent Agent field").toBeTruthy();
+    item.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
     expect(seen).not.toBeNull();
-    // "count" is the next unused field in declaration order; its kind's
-    // first operator (lt) and an empty value.
+    // The picked field joins with its kind's first operator (select →
+    // eq) and an empty value; the existing condition is untouched.
+    expect(seen!["agent"]).toEqual({ op: "eq", value: "" });
+    expect(seen!["tool"]).toEqual({ op: "eq", value: "web" });
+    // The chooser leaves with the pick (after the leave settle).
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeNull();
+  });
+
+  it("drives the chooser from the add button — arrows highlight, Enter picks", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: {},
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const add = c.querySelector<HTMLButtonElement>(".hk-filter-panel-add")!;
+    // ArrowDown opens the chooser with the first item highlighted.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")];
+    expect(items).toHaveLength(4);
+    expect(items[0]!.getAttribute("data-highlighted")).toBe("true");
+    // ArrowDown again moves the highlight to the second item.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await Promise.resolve();
+    expect(items[1]!.getAttribute("data-highlighted")).toBe("true");
+    // Enter confirms the highlighted field — "Calls" (number kind → lt).
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await Promise.resolve();
     expect(seen!["count"]).toEqual({ op: "lt", value: "" });
   });
 

package/src/components/HkFilterPanel.tsx

@@ -1,9 +1,11 @@
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, nextTick, ref, watch, type PropType } from "vue";
 import { Plus, X } from "lucide-vue-next";
 
 import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
+import HkPopover from "./HkPopover";
 import HkPopupSelect, { type HkPopupSelectOption } from "./HkPopupSelect";
+import HkScrollContainer from "./HkScrollContainer";
 import { useI18n } from "../i18n/context";
 import "./HkFilterPanel.scss";
 
@@ -138,15 +140,91 @@ export default defineComponent({
       () => props.fields.filter((f) => conditionFor(f).value !== "").length,
     );
 
+    // The visible rows ARE the state record's declared fields, in
+    // declaration order; the rest stay latent behind the add row.
+    const rows = computed(() => props.fields.filter((f) => props.modelValue[f.key] !== undefined));
+    const addable = computed(() => props.fields.filter((f) => props.modelValue[f.key] === undefined));
+
+    // ── The add-condition field chooser (user direction 2026-10-14) ──
+    // "Add condition" NEVER appends by declaration order — it opens a
+    // menu of the latent fields and the user picks WHO joins the panel.
+    // The menu is a popover anchored to the add button (a bottom sheet
+    // on mobile, same split as every other panel popout); the keyboard
+    // model mirrors HkPopupSelect: focus stays on the trigger, arrows
+    // move a highlight, Enter confirms it.
+    const addMenuOpen = ref(false);
+    const addBtnRef = ref<HTMLElement | null>(null);
+    const addHighlight = ref(-1);
+
+    function openAddMenu() {
+      addMenuOpen.value = true;
+      // First item pre-highlighted: arrows and Enter work immediately.
+      addHighlight.value = addable.value.length > 0 ? 0 : -1;
+    }
+
+    function closeAddMenu() {
+      addMenuOpen.value = false;
+      addHighlight.value = -1;
+    }
+
+    function pickAddable(field: HkFilterFieldDef) {
+      // Materialize the row: the kind's default operator, empty value.
+      emitCondition(field, { op: operatorsFor(field)[0]!, value: "" });
+      closeAddMenu();
+    }
+
+    // The latent list can change under an open menu (a row removed while
+    // the menu is open grows it; the last latent field picked empties
+    // it) — keep the highlight in range and close on an empty menu.
+    watch(addable, (list) => {
+      if (!addMenuOpen.value) return;
+      if (list.length === 0) {
+        closeAddMenu();
+        return;
+      }
+      if (addHighlight.value >= list.length) addHighlight.value = list.length - 1;
+    });
+
+    watch(addHighlight, (i) => {
+      if (i < 0) return;
+      nextTick(() => {
+        document
+          .querySelector(`[data-add-index="${i}"]`)
+          ?.scrollIntoView({ block: "nearest" });
+      });
+    });
+
+    function onAddTriggerKeydown(e: KeyboardEvent) {
+      if (props.disabled) return;
+      const count = addable.value.length;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!addMenuOpen.value) openAddMenu();
+        else addHighlight.value = (addHighlight.value + 1) % count;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!addMenuOpen.value) openAddMenu();
+        else addHighlight.value = (addHighlight.value - 1 + count) % count;
+      } else if ((e.key === "Enter" || e.key === " ") && addMenuOpen.value) {
+        // With the menu open, Enter/Space CONFIRM the highlighted field;
+        // the native button activation (a toggle click) is suppressed.
+        e.preventDefault();
+        const field = addable.value[addHighlight.value];
+        if (field) pickAddable(field);
+      } else if (e.key === "Escape" && addMenuOpen.value) {
+        // Escape closes ONE layer — the menu, not the host panel: stop
+        // the bubble before the host popover's own Escape handler.
+        e.preventDefault();
+        e.stopPropagation();
+        closeAddMenu();
+      }
+    }
+
     return () => {
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
-      // The visible rows ARE the state record's declared fields, in
-      // declaration order; the rest stay latent behind the add row.
-      const rows = props.fields.filter((f) => props.modelValue[f.key] !== undefined);
-      const addable = props.fields.filter((f) => props.modelValue[f.key] === undefined);
       return (
         <div class="hk-filter-panel" data-testid="hk-filter-panel" data-active={activeCount.value > 0 || undefined} aria-label={label}>
-          {rows.map((field) => {
+          {rows.value.map((field) => {
             const condition = conditionFor(field);
             const ops = operatorsFor(field);
             return (
@@ -240,24 +318,72 @@ export default defineComponent({
               </div>
             );
           })}
-          {addable.length > 0 && (
+          {addable.value.length > 0 && (
             <div class="hk-filter-panel-addrow">
               {/* The ONE growth verb, parked in the operator column so
                * the row grid reads as one aligned axis (user direction
-               * 2026-10-12). Appends the next unused field with its
+               * 2026-10-12). It no longer appends by declaration order
+               * (user direction 2026-10-14): the click opens the field
+               * chooser and the picked field materializes with its
                * kind's default operator and an empty value. */}
               <button
+                ref={addBtnRef}
                 type="button"
                 class="hk-filter-panel-add"
                 disabled={props.disabled}
-                onClick={() => {
-                  const field = addable[0]!;
-                  emitCondition(field, { op: operatorsFor(field)[0]!, value: "" });
-                }}
+                aria-haspopup="menu"
+                aria-expanded={addMenuOpen.value ? "true" : "false"}
+                data-state={addMenuOpen.value ? "open" : "closed"}
+                onClick={() => (addMenuOpen.value ? closeAddMenu() : openAddMenu())}
+                onKeydown={onAddTriggerKeydown}
               >
                 <Plus size={14} aria-hidden="true" />
                 <span>{t("hikari::filterPanel.addCondition", "Add condition")}</span>
               </button>
+              {/* The chooser itself: a popover anchored to the add button
+               * (top-start — the button sits at the panel's bottom edge,
+               * so the list opens over the panel's own rows; autoFlip
+               * drops it below when the viewport says otherwise), a
+               * bottom sheet on mobile — the same split as every other
+               * popout this panel hosts. */}
+              <HkPopover
+                modelValue={addMenuOpen.value}
+                onUpdate:modelValue={(v: boolean) => (v ? openAddMenu() : closeAddMenu())}
+                anchorRef={addBtnRef.value}
+                placement="top-start"
+                offset={4}
+                backdrop={false}
+                sheetOnMobile
+                title={t("hikari::filterPanel.addCondition", "Add condition")}
+                class="hk-filter-add-content"
+              >
+                <HkScrollContainer class="hk-filter-add-viewport">
+                  {/* role=menu lives on the inner list (HkScrollContainer
+                   * owns its root's attr surface); items carry menuitem. */}
+                  <div
+                    class="hk-filter-add-list"
+                    role="menu"
+                    aria-label={t("hikari::filterPanel.chooseField", "Choose a field to add")}
+                  >
+                    {addable.value.map((field, i) => (
+                      <button
+                        key={field.key}
+                        type="button"
+                        class="hk-filter-add-item"
+                        role="menuitem"
+                        data-kind={field.kind}
+                        data-highlighted={addHighlight.value === i || undefined}
+                        data-add-index={i}
+                        disabled={props.disabled}
+                        onClick={() => pickAddable(field)}
+                        onPointerenter={() => { addHighlight.value = i; }}
+                      >
+                        <span class="hk-filter-add-item-label">{field.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </HkScrollContainer>
+              </HkPopover>
             </div>
           )}
         </div>

package/src/components/HkFilterTrigger.test.tsx

@@ -80,4 +80,252 @@ describe("HkFilterTrigger", () => {
     const empty = mount(h(HkFilterTrigger, { fields: FIELDS, modelValue: {} }));
     expect(empty.querySelector(".hk-filter-trigger-dot")).toBeNull();
   });
+
+  // ── Nested-popout regression (2026-10-14) ──────────────────────────
+  // A popout opened from INSIDE the panel teleports to <body>, so the
+  // panel popover's outside-click shield cannot see the nesting by DOM
+  // containment — until the shield learned data-hk-popout-layer, picking
+  // from the add-condition chooser (or a select row's popup) slammed the
+  // whole panel shut and swallowed the pick. Both paths pinned here.
+
+  it("keeps the panel open when a field is picked from the add-condition chooser", async () => {
+    let seen: Record<string, unknown> | null = null;
+    const c = mount(
+      h(HkFilterTrigger, {
+        fields: FIELDS,
+        modelValue: {},
+        "onUpdate:modelValue": (s: Record<string, unknown>) => (seen = s),
+      }),
+    );
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-filter-panel-add")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = document.body.querySelector<HTMLElement>(".hk-filter-add-item")!;
+    expect(item, "chooser mounted").toBeTruthy();
+    item.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 60));
+    // The pick landed…
+    expect(seen).not.toBeNull();
+    expect(Object.keys(seen!)).toContain("tool");
+    // …and the PANEL is still open — the chooser's click is not a
+    // backdrop dismissal for it.
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+  });
+
+  it("keeps the panel open when an option is picked from a select condition row", async () => {
+    const selectFields = [
+      { key: "tool", label: "Tool", kind: "text" as const },
+      { key: "agent", label: "Agent", kind: "select" as const, options: [{ value: "a1", label: "Agent One" }] },
+    ];
+    let seen: Record<string, unknown> | null = null;
+    const c = mount(
+      h(HkFilterTrigger, {
+        fields: selectFields,
+        modelValue: { agent: { op: "eq", value: "" } },
+        "onUpdate:modelValue": (s: Record<string, unknown>) => (seen = s),
+      }),
+    );
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    // The popout's FIRST item is the prepended "All" clear row — pick
+    // the real option by its label.
+    const option = [...document.body.querySelectorAll<HTMLElement>(".hk-popup-select-item")].find(
+      (el) => el.textContent?.trim() === "Agent One",
+    )!;
+    expect(option, "select popout mounted").toBeTruthy();
+    option.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 60));
+    // The option landed on the condition…
+    expect((seen! as { agent: { value: string } }).agent.value).toBe("a1");
+    // …and the panel survived the nested pick.
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+    document.body.querySelectorAll(".hk-popup-select-item, .hk-popover-panel").forEach((el) => el.remove());
+  });
+
+  // ── Escape closes ONE layer (2026-10-14) ──────────────────────────
+  // An open nested popout absorbs the Escape itself (stopPropagation
+  // before the host popover's panel keydown); a closed one lets it
+  // bubble so the host panel closes. Both nested popout kinds pinned —
+  // HkPopupSelect used to close BOTH layers on one Escape.
+
+  it("Escape with the chooser open closes the chooser but keeps the panel", async () => {
+    const c = mount(h(HkFilterTrigger, { fields: FIELDS, modelValue: {} }));
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    const add = document.body.querySelector<HTMLButtonElement>(
+      ".hk-filter-panel .hk-filter-panel-add",
+    )!;
+    add.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeTruthy();
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await new Promise((r) => setTimeout(r, 60));
+    // The chooser left…
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeNull();
+    // …the panel stayed.
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+    // A second Escape (nothing nested open) bubbles on to close the panel.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".hk-filter-panel")).toBeNull();
+  });
+
+  it("Escape with a select popout open closes the popout but keeps the panel", async () => {
+    const selectFields = [
+      { key: "tool", label: "Tool", kind: "text" as const },
+      { key: "agent", label: "Agent", kind: "select" as const, options: [{ value: "a1", label: "Agent One" }] },
+    ];
+    const c = mount(
+      h(HkFilterTrigger, { fields: selectFields, modelValue: { agent: { op: "eq", value: "" } } }),
+    );
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    const selectTrigger = document.body.querySelector<HTMLButtonElement>(
+      ".hk-filter-panel .hk-popup-select-trigger",
+    )!;
+    selectTrigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(document.body.querySelector(".hk-popup-select-item")).toBeTruthy();
+    selectTrigger.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await new Promise((r) => setTimeout(r, 60));
+    // The popout left…
+    expect(document.body.querySelector(".hk-popup-select-item")).toBeNull();
+    // …the panel stayed.
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+    document.body.querySelectorAll(".hk-popover-panel").forEach((el) => el.remove());
+  });
+
+  // ── One popout at a time (R2 2026-10-14 finding) ──────────────────
+  // The chooser and a select popout are SIBLINGS riding the same host
+  // panel. The shield must not treat the shared HOST layer as "above":
+  // opening one closes the other, in both directions — never both at
+  // once, and an open chooser must not swallow in-panel clicks.
+
+  it("opening a select popout closes an open chooser (never both at once)", async () => {
+    const selectFields = [
+      { key: "tool", label: "Tool", kind: "text" as const },
+      { key: "agent", label: "Agent", kind: "select" as const, options: [{ value: "a1", label: "Agent One" }] },
+    ];
+    const c = mount(
+      h(HkFilterTrigger, { fields: selectFields, modelValue: { agent: { op: "eq", value: "" } } }),
+    );
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-filter-panel-add")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeTruthy();
+    // Now open a select row's popout from inside the host panel…
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 60));
+    // …the chooser left…
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeNull();
+    // …the select popout is the one live surface…
+    expect(document.body.querySelector(".hk-popup-select-item")).toBeTruthy();
+    // …and the panel stayed open through the swap.
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+    document.body.querySelectorAll(".hk-popover-panel").forEach((el) => el.remove());
+  });
+
+  it("opening the chooser closes an open select popout (the reverse swap)", async () => {
+    const selectFields = [
+      { key: "tool", label: "Tool", kind: "text" as const },
+      { key: "agent", label: "Agent", kind: "select" as const, options: [{ value: "a1", label: "Agent One" }] },
+    ];
+    const c = mount(
+      h(HkFilterTrigger, { fields: selectFields, modelValue: { agent: { op: "eq", value: "" } } }),
+    );
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(document.body.querySelector(".hk-popup-select-item")).toBeTruthy();
+    // Now click the add verb from inside the host panel…
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-filter-panel-add")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 60));
+    // …the select popout left…
+    expect(document.body.querySelector(".hk-popup-select-item")).toBeNull();
+    // …the chooser is the one live surface…
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeTruthy();
+    // …and the panel stayed open through the swap.
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+    document.body.querySelectorAll(".hk-popover-panel").forEach((el) => el.remove());
+  });
+
+  it("an in-panel click while the chooser is open dismisses the chooser", async () => {
+    let seen: Record<string, unknown> | null = null;
+    const c = mount(
+      h(HkFilterTrigger, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "" } },
+        "onUpdate:modelValue": (s: Record<string, unknown>) => (seen = s),
+      }),
+    );
+    c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    document.body
+      .querySelector<HTMLButtonElement>(".hk-filter-panel .hk-filter-panel-add")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeTruthy();
+    // A row's operator toggle is an in-panel click — the chooser must
+    // stand down for it, not swallow it. (Pick the ≈ toggle; the first
+    // op button is the already-pressed =.)
+    const op = [...document.body.querySelectorAll<HTMLButtonElement>(".hk-filter-panel .hk-filter-panel-op")].find(
+      (b) => b.textContent === "≈",
+    )!;
+    op.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeNull();
+    expect((seen! as { tool: { op: string } }).tool.op).toBe("approx");
+    expect(document.body.querySelector(".hk-filter-panel")).toBeTruthy();
+    document.body.querySelectorAll(".hk-popover-panel").forEach((el) => el.remove());
+  });
 });

package/src/components/HkLogo.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, type PropType } from "vue";
 import { useI18n } from "../i18n/context";
+import { safeHref } from "../utils/safeHref";
 import "./HkLogo.scss";
 
 const sizeMap: Record<string, string> = {
@@ -71,7 +72,7 @@ export default defineComponent({
       return () => (
         <a
           class="hk-logo"
-          href={props.href}
+          href={safeHref(props.href)}
           onClick={(e: MouseEvent) => emit("click", e)}
           style={{ lineHeight: 0 }}
         >

package/src/components/HkNavItem.tsx

@@ -1,4 +1,5 @@
 import { ChevronRight } from "lucide-vue-next";
+import { safeHref } from "../utils/safeHref";
 import { defineComponent, computed, ref, type PropType } from "vue";
 import type { Component } from "vue";
 
@@ -116,7 +117,7 @@ export default defineComponent({
       if (props.to) {
         return (
           <a
-            href={props.to}
+            href={safeHref(props.to)}
             class={cls}
             {...dataAttrs.value}
             aria-disabled={props.disabled}
@@ -131,7 +132,7 @@ export default defineComponent({
       if (props.href) {
         return (
           <a
-            href={props.href}
+            href={safeHref(props.href)}
             class={cls}
             {...dataAttrs.value}
             aria-disabled={props.disabled}

package/src/components/HkPopover.shield.test.tsx

@@ -0,0 +1,124 @@
+/**
+ * HkPopover outside-click shield × nested popout layers: a popover
+ * opened from INSIDE another popover teleports to <body>, so the outer
+ * shield cannot see the nesting by DOM containment. The host marks
+ * every layer with data-hk-popout-layer and the shield honors it — a
+ * click inside a nested layer is that layer's business, never a
+ * backdrop dismissal for the ancestor (2026-10-14: picking a select
+ * option inside a filter panel used to slam the whole panel shut).
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkPopover from "./HkPopover";
+
+const apps: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+afterEach(() => {
+  for (const { app, container } of apps.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body
+    .querySelectorAll(".hk-popover-panel, .hk-popover-scrim")
+    .forEach((el) => el.remove());
+});
+
+/** Outer popover hosting a trigger that opens an inner (teleported)
+ * popover — the filter-panel nesting shape in miniature. */
+const Host = defineComponent({
+  name: "ShieldProbeHost",
+  setup() {
+    const outerOpen = ref(false);
+    const innerOpen = ref(false);
+    const outerAnchor = ref<HTMLElement | null>(null);
+    const innerAnchor = ref<HTMLElement | null>(null);
+    return () => (
+      <div>
+        <button ref={outerAnchor} type="button" class="outer-toggle" onClick={() => (outerOpen.value = !outerOpen.value)}>
+          outer
+        </button>
+        <HkPopover
+          modelValue={outerOpen.value}
+          onUpdate:modelValue={(v: boolean) => (outerOpen.value = v)}
+          anchorRef={outerAnchor.value}
+          title="outer"
+        >
+          <button ref={innerAnchor} type="button" class="inner-toggle" onClick={() => (innerOpen.value = !innerOpen.value)}>
+            inner
+          </button>
+          <HkPopover
+            modelValue={innerOpen.value}
+            onUpdate:modelValue={(v: boolean) => (innerOpen.value = v)}
+            anchorRef={innerAnchor.value}
+            title="inner"
+          >
+            <div class="inner-body">inner content</div>
+          </HkPopover>
+        </HkPopover>
+      </div>
+    );
+  },
+});
+
+function mountHost() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(Host);
+  app.mount(container);
+  apps.push({ app, container });
+  return container;
+}
+
+describe("HkPopover outside-click shield vs nested layers", () => {
+  it("marks its teleported host as a popout layer", async () => {
+    const c = mountHost();
+    c.querySelector<HTMLButtonElement>(".outer-toggle")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await nextTick();
+    await nextTick();
+    const hosts = [...document.body.querySelectorAll("[data-hk-popout-layer]")];
+    expect(hosts.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("a click inside a nested popout does not dismiss the ancestor", async () => {
+    const c = mountHost();
+    // Open both layers.
+    c.querySelector<HTMLButtonElement>(".outer-toggle")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await nextTick();
+    await nextTick();
+    // The outer panel content (including the inner toggle) teleports to
+    // body — query there, not in the host container.
+    document.body
+      .querySelector<HTMLButtonElement>(".inner-toggle")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+    await nextTick();
+    const innerBody = document.body.querySelector<HTMLElement>(".inner-body")!;
+    expect(innerBody, "inner layer teleported to body").toBeTruthy();
+    // The nested click: NOT a backdrop dismissal for the outer popover.
+    innerBody.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".inner-body")).toBeTruthy();
+    expect(document.body.querySelector(".outer-toggle")).toBeTruthy(); // outer panel content
+  });
+
+  it("a true outside click still dismisses the ancestor", async () => {
+    const c = mountHost();
+    c.querySelector<HTMLButtonElement>(".outer-toggle")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".inner-toggle")).toBeTruthy();
+    // A click on plain body (no layer, no anchor): the classic dismissal.
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".inner-toggle")).toBeNull();
+  });
+});

package/src/components/HkPopover.tsx

@@ -568,6 +568,30 @@ export default defineComponent({
       if (panelHostRef.value?.contains(target)) return;
       if (panelRef.value?.contains(target)) return;
       if (props.anchorRef?.contains(target)) return;
+      // A click inside another popout LAYER stacked ABOVE this one — a
+      // popover opened from inside this surface (the filter panel's
+      // popup selects, its add-condition field menu) teleports to
+      // <body>, so DOM containment cannot see the nesting. Every host
+      // marks its layer (data-hk-popout-layer) with its popup-manager
+      // id; a HIGHER live layer governs its own clicks, never a
+      // backdrop dismissal for THIS popover (2026-10-14: picking a
+      // select option inside a filter panel used to slam the whole
+      // panel shut and, in engines that detach mid-dispatch, swallow
+      // the pick itself). Layers NOT above — the HOST panel a nested
+      // surface rides in, or a sibling below — are "the page" for this
+      // popover: clicks there dismiss it (R2 2026-10-14: matching any
+      // layer left the chooser and a select popout open at once and
+      // made an open chooser ignore every in-panel click).
+      if (target instanceof Element) {
+        const layerEl = target.closest("[data-hk-popout-layer]");
+        if (layerEl) {
+          const layerId = layerEl.getAttribute("data-hk-popout-id");
+          const mine = handle.value;
+          if (mine && layerId === mine.id) return;
+          const above = mine && layerId ? manager.registry.value.get(layerId) : null;
+          if (above && above.zIndex > mine!.zIndex) return;
+        }
+      }
       close();
     }
 
@@ -660,7 +684,18 @@ export default defineComponent({
             style={{ zIndex: backdropZ.value }}
           />
         )}
-        <div ref={panelHostRef} style={panelStyle.value}>
+        {/* data-hk-popout-layer marks this host as a live popup layer so
+            ANCESTOR popovers' outside-click shields can tell a click
+            inside a nested layer (never a backdrop dismissal — see
+            onDocumentClick) from a true outside click. The -id pairing
+            with the popup-manager registration lets those shields tell
+            ABOVE layers (ignore) from the host/siblings (dismiss). */}
+        <div
+          ref={panelHostRef}
+          data-hk-popout-layer=""
+          data-hk-popout-id={handle.value?.id}
+          style={panelStyle.value}
+        >
               <div
                 ref={panelRef}
                 class={[

package/src/components/HkPopupSelect.tsx

@@ -142,6 +142,16 @@ export default defineComponent({
             normalizedOptions.value.length;
         }
       } else if (e.key === "Escape") {
+        if (isOpen.value) {
+          // Escape closes ONE layer — the popout only, not the host
+          // surface it rides in (a select inside a filter panel row must
+          // not take the whole panel with it; same contract as the
+          // filter panel's own add-condition chooser). A closed popout
+          // keeps bubbling: that Escape was meant for whatever hosts
+          // this control.
+          e.preventDefault();
+          e.stopPropagation();
+        }
         isOpen.value = false;
       }
     }

package/src/components/_menu-item.scss

@@ -79,6 +79,7 @@
   .hk-menu-action-item,
   .hk-select-option,
   .hk-popup-select-item,
+  .hk-filter-add-item,
   .s-theme-item-row,
   .s-theme-item-btn,
   .s-popup-menu-item,

package/src/i18n/locales/ar/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "تطبيق",
     "hikari::filterPanel.all": "الكل",
     "hikari::filterPanel.addCondition": "إضافة شرط",
+    "hikari::filterPanel.chooseField": "اختر حقلًا لإضافته",
     "hikari::filterPanel.removeCondition": "إزالة الشرط",
     "hikari::filterBar.reset": "إعادة تعيين",
     "hikari::filterPanel.op.eq": "يساوي",

package/src/i18n/locales/de/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "Anwenden",
     "hikari::filterPanel.all": "Alle",
     "hikari::filterPanel.addCondition": "Bedingung hinzufügen",
+    "hikari::filterPanel.chooseField": "Feld zum Hinzufügen wählen",
     "hikari::filterPanel.removeCondition": "Bedingung entfernen",
     "hikari::filterBar.reset": "Zurücksetzen",
     "hikari::filterPanel.op.eq": "gleich",

package/src/i18n/locales/en/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "Apply",
     "hikari::filterPanel.all": "All",
     "hikari::filterPanel.addCondition": "Add condition",
+    "hikari::filterPanel.chooseField": "Choose a field to add",
     "hikari::filterPanel.removeCondition": "Remove condition",
     "hikari::filterBar.reset": "Reset",
     "hikari::filterPanel.op.eq": "equals",

package/src/i18n/locales/es/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "Aplicar",
     "hikari::filterPanel.all": "Todos",
     "hikari::filterPanel.addCondition": "Añadir condición",
+    "hikari::filterPanel.chooseField": "Elige un campo para añadir",
     "hikari::filterPanel.removeCondition": "Eliminar condición",
     "hikari::filterBar.reset": "Restablecer",
     "hikari::filterPanel.op.eq": "igual a",

package/src/i18n/locales/fr/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "Appliquer",
     "hikari::filterPanel.all": "Tous",
     "hikari::filterPanel.addCondition": "Ajouter une condition",
+    "hikari::filterPanel.chooseField": "Choisir un champ à ajouter",
     "hikari::filterPanel.removeCondition": "Supprimer la condition",
     "hikari::filterBar.reset": "Réinitialiser",
     "hikari::filterPanel.op.eq": "égal à",

package/src/i18n/locales/ja/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "適用",
     "hikari::filterPanel.all": "すべて",
     "hikari::filterPanel.addCondition": "条件を追加",
+    "hikari::filterPanel.chooseField": "追加するフィールドを選択",
     "hikari::filterPanel.removeCondition": "条件を削除",
     "hikari::filterBar.reset": "リセット",
     "hikari::filterPanel.op.eq": "等しい",

package/src/i18n/locales/ko/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "적용",
     "hikari::filterPanel.all": "전체",
     "hikari::filterPanel.addCondition": "조건 추가",
+    "hikari::filterPanel.chooseField": "추가할 필드 선택",
     "hikari::filterPanel.removeCondition": "조건 삭제",
     "hikari::filterBar.reset": "초기화",
     "hikari::filterPanel.op.eq": "같음",

package/src/i18n/locales/pt/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "Aplicar",
     "hikari::filterPanel.all": "Todos",
     "hikari::filterPanel.addCondition": "Adicionar condição",
+    "hikari::filterPanel.chooseField": "Escolha um campo para adicionar",
     "hikari::filterPanel.removeCondition": "Remover condição",
     "hikari::filterBar.reset": "Redefinir",
     "hikari::filterPanel.op.eq": "igual a",

package/src/i18n/locales/ru/components.json

@@ -201,6 +201,7 @@
     "hikari::filterBar.apply": "Применить",
     "hikari::filterPanel.all": "Все",
     "hikari::filterPanel.addCondition": "Добавить условие",
+    "hikari::filterPanel.chooseField": "Выберите поле для добавления",
     "hikari::filterPanel.removeCondition": "Удалить условие",
     "hikari::filterBar.reset": "Сбросить",
     "hikari::filterPanel.op.eq": "равно",

package/src/i18n/locales/zh-Hans/components.json

@@ -205,6 +205,7 @@
     "hikari::filterBar.apply": "应用",
     "hikari::filterPanel.all": "全部",
     "hikari::filterPanel.addCondition": "添加条件",
+    "hikari::filterPanel.chooseField": "选择要添加的字段",
     "hikari::filterPanel.removeCondition": "移除条件",
     "hikari::filterBar.reset": "重置",
     "hikari::filterPanel.op.eq": "等于",

package/src/i18n/locales/zh-Hant/components.json

@@ -205,6 +205,7 @@
     "hikari::filterBar.apply": "套用",
     "hikari::filterPanel.all": "全部",
     "hikari::filterPanel.addCondition": "新增條件",
+    "hikari::filterPanel.chooseField": "選擇要新增的欄位",
     "hikari::filterPanel.removeCondition": "移除條件",
     "hikari::filterBar.reset": "重設",
     "hikari::filterPanel.op.eq": "等於",

package/src/index.ts

@@ -173,6 +173,7 @@ export { default as HLogo } from "./components/HkLogo";
 // Component types
 export { type BadgeVariant } from "./components/HkBadge";
 export { type BoardNodeInput, type BoardEdgeInput } from "./components/HkBoard";
+export { isSafeHref, safeHref } from "./utils/safeHref";
 export { type BoardAnchorMode, type BoardEdgeStyle, type BoardPoint } from "./utils/boardEdges";
 export { type BoardCamera, type BoardRect, type BoardViewport } from "./utils/boardCamera";
 export { type ModalAction } from "./components/HkModal";

package/src/utils/safeHref.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { isSafeHref, safeHref } from "./safeHref";
+
+describe("isSafeHref (audit hikari-R1-4)", () => {
+  it("accepts the allowlisted schemes and relative forms", () => {
+    for (const href of [
+      "https://example.com/x",
+      "http://example.com/",
+      "mailto:ops@example.com",
+      "tel:+810000000000",
+      "/dashboard",
+      "#section",
+      "./relative",
+      "../parent",
+    ]) {
+      expect(isSafeHref(href)).toBe(true);
+    }
+  });
+
+  it("rejects executable and exotic schemes", () => {
+    for (const href of [
+      "javascript:alert(1)",
+      " jAvAsCrIpT:alert(1)", // case + leading whitespace
+      "vbscript:msgbox",
+      "data:text/html,<script>alert(1)</script>",
+      "file:///etc/passwd",
+    ]) {
+      expect(isSafeHref(href)).toBe(false);
+    }
+  });
+
+  it("rejects empty input", () => {
+    expect(isSafeHref("")).toBe(false);
+  });
+});
+
+describe("safeHref (audit hikari-R1-4)", () => {
+  it("passes safe values through unchanged", () => {
+    expect(safeHref("https://example.com/x")).toBe("https://example.com/x");
+    expect(safeHref("/dashboard")).toBe("/dashboard");
+  });
+
+  it("neutralizes dangerous schemes to an inert anchor", () => {
+    expect(safeHref("javascript:alert(1)")).toBe("#");
+    expect(safeHref(undefined)).toBe("#");
+    expect(safeHref(null)).toBe("#");
+  });
+});

package/src/utils/safeHref.ts

@@ -0,0 +1,34 @@
+/**
+ * Audit hikari-R1-4: URL scheme allowlist for component `href` props.
+ *
+ * The component library renders caller-supplied `href` values verbatim —
+ * a caller that routes user data into a nav item or breadcrumb gets a
+ * `javascript:` XSS for free. This helper enforces a scheme allowlist
+ * (http/https/mailto/tel/relative/fragment) and neutralizes anything
+ * else to an inert `"#"` so the anchor stays clickable but harmless.
+ */
+const SAFE_HREF_PATTERN = /^(?:https?:|mailto:|tel:|\/|#|\.\/|\.\.\/)/i;
+const DANGEROUS_SCHEME_PATTERN = /^\s*(?:javascript|vbscript|data):/i;
+
+export function isSafeHref(href: string): boolean {
+  const trimmed = href.trim();
+  if (trimmed.length === 0) {
+    return false;
+  }
+  if (DANGEROUS_SCHEME_PATTERN.test(trimmed)) {
+    return false;
+  }
+  return SAFE_HREF_PATTERN.test(trimmed);
+}
+
+/**
+ * Return `href` when it passes the scheme allowlist, otherwise `"#"`.
+ * Relative paths, fragments, and absolute http(s)/mailto/tel URLs pass
+ * through unchanged.
+ */
+export function safeHref(href: string | undefined | null): string {
+  if (!href) {
+    return "#";
+  }
+  return isSafeHref(href) ? href : "#";
+}