@celestia-island/hikari 0.55.130 → 0.55.132

package/package.json

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

package/src/components/HkContextMenuProvider.quadrant.test.ts

@@ -0,0 +1,52 @@
+// Unit tests for the context-menu quadrant pick: the pointer's nearest
+// halves split the POPUP viewport (the window minus the app-chrome band
+// the host configured), so a menu opened over a reserved strip grows
+// into the usable space.
+//
+// AI disclosure: drafted by GLM via the ZCode agent, directed and
+// reviewed by langyo — SySL-1.0 §2.3.
+import { afterEach, describe, expect, it } from "vitest";
+
+import { configurePopupInsets } from "../runtime/popupBounds";
+import { quadrantPlacement } from "./HkContextMenuProvider";
+
+const PREV_INNER = { width: window.innerWidth, height: window.innerHeight };
+
+afterEach(() => {
+  configurePopupInsets(null);
+  window.innerWidth = PREV_INNER.width;
+  window.innerHeight = PREV_INNER.height;
+});
+
+describe("quadrantPlacement", () => {
+  it("splits the raw window in half when no band is configured", () => {
+    window.innerWidth = 800;
+    window.innerHeight = 600;
+    expect(quadrantPlacement(100, 100)).toBe("bottom-start");
+    expect(quadrantPlacement(700, 100)).toBe("bottom-end");
+    expect(quadrantPlacement(100, 500)).toBe("top-start");
+    expect(quadrantPlacement(700, 500)).toBe("top-end");
+    // On the midlines the lower/right halves win (<=), unchanged.
+    expect(quadrantPlacement(400, 300)).toBe("bottom-start");
+  });
+
+  it("splits the popup viewport when an app-chrome band is configured", () => {
+    window.innerWidth = 800;
+    window.innerHeight = 600;
+    // A 400px title-bar stack: popups live in y 400..600, so the frame
+    // midline is y=500 — a pointer at y=550 (raw-window TOP half) now
+    // grows UP, staying inside the frame's lower half.
+    configurePopupInsets({ top: 400 });
+    expect(quadrantPlacement(500, 550)).toBe("top-end");
+    expect(quadrantPlacement(100, 450)).toBe("bottom-start");
+    expect(quadrantPlacement(700, 450)).toBe("bottom-end");
+  });
+
+  it("honors a side band on the horizontal split", () => {
+    window.innerWidth = 800;
+    window.innerHeight = 600;
+    configurePopupInsets({ left: 600 }); // frame x 600..800, midline 700
+    expect(quadrantPlacement(650, 100)).toBe("bottom-start");
+    expect(quadrantPlacement(750, 100)).toBe("bottom-end");
+  });
+});

package/src/components/HkContextMenuProvider.tsx

@@ -24,6 +24,7 @@
 
 import { computed, defineComponent, provide, ref, shallowRef } from "vue";
 
+import { popupViewportRect } from "../runtime/popupBounds";
 import HkMenu from "./HkMenu";
 import {
   CONTEXT_MENU_KEY,
@@ -33,10 +34,15 @@ import {
 
 /** Pick the HkMenu placement that grows away from the pointer's nearest
  * edges: `bottom-*` when there is more room below, `*-start` when there
- * is more room to the right. */
-function quadrantPlacement(x: number, y: number): "bottom-start" | "bottom-end" | "top-start" | "top-end" {
-  const below = y <= (typeof window !== "undefined" ? window.innerHeight : 0) / 2;
-  const right = x <= (typeof window !== "undefined" ? window.innerWidth : 0) / 2;
+ * is more room to the right. The halves split the POPUP viewport (the
+ * window minus the app-chrome band the host configured — popupBounds),
+ * so a menu opened over a desktop shell's reserved strip grows into the
+ * usable space like every other popup. */
+export function quadrantPlacement(x: number, y: number): "bottom-start" | "bottom-end" | "top-start" | "top-end" {
+  if (typeof window === "undefined") return "bottom-start";
+  const frame = popupViewportRect();
+  const below = y <= frame.y + frame.height / 2;
+  const right = x <= frame.x + frame.width / 2;
   if (below && right) return "bottom-start";
   if (below) return "bottom-end";
   return right ? "top-start" : "top-end";

package/src/components/HkMenu.test.ts

@@ -1,6 +1,7 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref, type ComponentPublicInstance } from "vue";
 
+import { configurePopupInsets } from "../runtime/popupBounds";
 import HkMenu, { type HkMenuItem } from "./HkMenu";
 
 /** Regional-indicator flag pair for an ISO 3166-1 alpha-2 code, built
@@ -186,6 +187,7 @@ afterEach(async () => {
     .querySelectorAll(".hk-select-popout, .hk-select-sheet-panel, .hk-select-sheet-scrim")
     .forEach((el) => el.remove());
   while (containers.length) containers.pop()?.remove();
+  configurePopupInsets(null);
   window.innerWidth = 1024;
 });
 
@@ -1081,3 +1083,45 @@ describe("HkMenu close linger (leave-transition window)", () => {
     expect(popouts().length).toBe(1);
   });
 });
+
+describe("HkMenu cascade against an app-chrome band", () => {
+  it("opens a right-start cascade on the side the band leaves room for", async () => {
+    // An 850px right-docked band on a 1200px window leaves the popup
+    // frame 0..350. The anchor's right edge sits at 130: the RAW window
+    // would host the 224px cascade beside it (130 + 6 + 224 = 360 ≤
+    // 1184), but the frame's gutter line is 350 - 16 = 334 — so the
+    // cascade flips to the anchor's left, pinned at the frame's leading
+    // gutter instead of the window's.
+    const rect = (x: number, y: number, w: number, h: number): DOMRect =>
+      ({ x, y, width: w, height: h, top: y, left: x, right: x + w, bottom: y + h, toJSON: () => ({}) }) as DOMRect;
+
+    window.innerWidth = 1200;
+    const openRef = ref(false);
+    const first = mountMenu(openRef, items, {}, { props: { placement: "right-start" } });
+    vi.spyOn(first.anchor, "getBoundingClientRect").mockReturnValue(rect(50, 100, 80, 40));
+    openRef.value = true;
+    await settle();
+    expect(popoutHosts()[0].style.left).toBe("136px"); // r.right + gap
+    first.unmount();
+
+    configurePopupInsets({ right: 850 });
+    const openRef2 = ref(false);
+    const second = mountMenu(openRef2, items, {}, { props: { placement: "right-start" } });
+    vi.spyOn(second.anchor, "getBoundingClientRect").mockReturnValue(rect(50, 100, 80, 40));
+    openRef2.value = true;
+    await settle();
+    expect(popoutHosts()[0]?.style.left).toBe("16px"); // frame.x + gutter
+    second.unmount();
+
+    // A LEFT band pins the flipped cascade at the frame's leading edge —
+    // max(frame.x + pad, …), not max(pad, …): a swapped origin would land
+    // this at 820 (16 would fail the frame's own leading gutter).
+    configurePopupInsets({ left: 1000 });
+    const openRef3 = ref(false);
+    const third = mountMenu(openRef3, items, {}, { props: { placement: "right-start" } });
+    vi.spyOn(third.anchor, "getBoundingClientRect").mockReturnValue(rect(1050, 100, 80, 40));
+    openRef3.value = true;
+    await settle();
+    expect(popoutHosts()[0]?.style.left).toBe("1016px"); // frame.x + gutter
+  });
+});

package/src/components/HkMenu.tsx

@@ -14,6 +14,7 @@ import { Check, ChevronRight } from "lucide-vue-next";
 
 import { useBreakpoint } from "../runtime/useBreakpoint";
 import { ancestorZoom } from "../runtime/cssZoom";
+import { popupViewportRect } from "../runtime/popupBounds";
 import { viewportGutterPx } from "../runtime/viewportGutter";
 import HkSelectPanel, { type SelectPanelPlacement } from "./HkSelectPanel";
 import "./HkMenu.scss";
@@ -426,8 +427,9 @@ export default defineComponent({
             const cascadeW = CASCADE_PANEL_W * ancestorZoom(document.body);
             // Shared viewport gutter (--viewport-gutter: 8 mobile / 16 desktop).
             const pad = viewportGutterPx();
-            const openRight = r.right + cascadeW <= window.innerWidth - pad;
-            const left = openRight ? r.right : Math.max(pad, r.left - cascadeW);
+            const frame = popupViewportRect();
+            const openRight = r.right + cascadeW <= frame.x + frame.width - pad;
+            const left = openRight ? r.right : Math.max(frame.x + pad, r.left - cascadeW);
             return pointRect(left, r.top);
           },
           contains: (node) => !!rowRefs.value[id]?.contains(node),
@@ -451,11 +453,12 @@ export default defineComponent({
           const cascadeW = CASCADE_PANEL_W * ancestorZoom(document.body);
           // Shared viewport gutter (--viewport-gutter: 8 mobile / 16 desktop).
           const pad = viewportGutterPx();
-          const openRight = r.right + gap + cascadeW <= window.innerWidth - pad;
+          const frame = popupViewportRect();
+          const openRight = r.right + gap + cascadeW <= frame.x + frame.width - pad;
           const left =
             side === "right" && openRight
               ? r.right + gap
-              : Math.max(pad, r.left - cascadeW - gap);
+              : Math.max(frame.x + pad, r.left - cascadeW - gap);
           return pointRect(left, r.top);
         },
         contains: (node) => !!props.anchorRef?.contains(node),

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

@@ -11,6 +11,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
+import { configurePopupInsets } from "../runtime/popupBounds";
 import HkPopover from "./HkPopover";
 
 const mounts: ReturnType<typeof createApp>[] = [];
@@ -64,7 +65,7 @@ async function flushFrames() {
   }
 }
 
-function mountPopover(anchor: HTMLElement, placement: "bottom" | "top-start" = "bottom") {
+function mountPopover(anchor: HTMLElement, placement: "bottom" | "top-start" | "bottom-start" = "bottom") {
   const container = document.createElement("div");
   document.body.appendChild(container);
   containers.push(container);
@@ -152,3 +153,72 @@ describe("HkPopover anchoring under root CSS zoom", () => {
     expect(parseFloat(host.style.left)).toBeCloseTo(20 / 3, 2);
   });
 });
+
+describe("HkPopover anchoring against an app-chrome band", () => {
+  const PREV_HEIGHT = window.innerHeight;
+
+  afterEach(() => {
+    configurePopupInsets(null);
+    window.innerHeight = PREV_HEIGHT;
+  });
+
+  it("clamps the panel inside the band's frame, not the raw window", async () => {
+    // The band reserves the BOTTOM 700px of the window — the popup frame
+    // is the top 100px strip. The anchor sits inside the band's territory
+    // (y=700): both sides are starved inside the frame, the flip picks
+    // top (more room), and the main-axis clamp pins the panel bottom at
+    // the FRAME's lower gutter (y=84) instead of the window's.
+    window.innerWidth = 1200;
+    window.innerHeight = 800;
+    patchRootZoom("1");
+
+    // Control, no band: the same anchor clamps against the WINDOW bottom
+    // edge — panel bottom 104px above it.
+    const anchor = document.createElement("button");
+    patchRects(anchor, rect(100, 700, 80, 32), rect(0, 0, 200, 60));
+    const open = mountPopover(anchor, "bottom");
+    open.value = true;
+    await flushFrames();
+    const panels = document.body.querySelectorAll<HTMLElement>(".hk-popover-panel");
+    const host = panels[panels.length - 1]!.parentElement!;
+    expect(host.style.bottom).toBe("104px");
+    open.value = false;
+    await flushFrames();
+
+    configurePopupInsets({ bottom: 700 });
+    const anchor2 = document.createElement("button");
+    patchRects(anchor2, rect(100, 700, 80, 32), rect(0, 0, 200, 60));
+    const open2 = mountPopover(anchor2, "bottom");
+    open2.value = true;
+    await flushFrames();
+    // happy-dom never fires transitionend, so the control panel may
+    // linger — the freshly positioned one is the LAST in the body.
+    const panels2 = document.body.querySelectorAll<HTMLElement>(".hk-popover-panel");
+    const host2 = panels2[panels2.length - 1]!.parentElement!;
+    // Panel bottom pinned at frame.y + frame.height - gutter = 100 - 16,
+    // written as the viewport-bottom distance 800 - 84 = 716.
+    expect(host2.style.bottom).toBe("716px");
+    // Cross axis stays HORIZONTAL: centered at 40, inside the frame's
+    // x-gutter as-is (an axis-swapped frame would pin it to 16).
+    expect(host2.style.left).toBe("40px");
+  });
+
+  it("keeps the no-band cross clamp on the horizontal axis of a landscape window", async () => {
+    // Regression pin for the cross-axis frame mapping: on a non-square
+    // window the cross clamp of a vertically-stacked panel must measure
+    // against the WIDTH (1440), not the height (900) — the swapped
+    // mapping clamped this start-aligned panel to 634px.
+    window.innerWidth = 1440;
+    window.innerHeight = 900;
+    patchRootZoom("1");
+    const anchor = document.createElement("button");
+    patchRects(anchor, rect(1300, 500, 40, 40), rect(0, 0, 250, 90));
+    const open = mountPopover(anchor, "bottom-start");
+    open.value = true;
+    await flushFrames();
+    const panels = document.body.querySelectorAll<HTMLElement>(".hk-popover-panel");
+    const host = panels[panels.length - 1]!.parentElement!;
+    expect(host.style.left).toBe("1174px"); // 1440 - 250 - 16
+    expect(host.style.top).toBe("544px"); // anchor bottom 540 + offset 4
+  });
+});

package/src/components/HkPopover.tsx

@@ -15,6 +15,7 @@ import {
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
 import { useBreakpoint } from "../runtime/useBreakpoint";
 import { ancestorZoom } from "../runtime/cssZoom";
+import { popupViewportRect } from "../runtime/popupBounds";
 import { clampWithGutter, viewportGutterPx } from "../runtime/viewportGutter";
 import { useI18n } from "../i18n/context";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
@@ -342,6 +343,12 @@ export default defineComponent({
       }
       const vw = window.innerWidth;
       const vh = window.innerHeight;
+      // The popup viewport: the window minus the app-chrome band the host
+      // configured (popupBounds) — full-window when none, in which case
+      // every space check and clamp below is the raw-window math. vw/vh
+      // stay for the CSS-coordinate writes (`bottom`/`right` are measured
+      // from the VIEWPORT edges regardless of the band).
+      const frame = popupViewportRect();
       // The shared viewport gutter (--viewport-gutter: 8px mobile / 16px
       // desktop) — read per reposition so a viewport crossing the
       // breakpoint re-clamps with the right value on the next pass.
@@ -352,26 +359,26 @@ export default defineComponent({
 
       if (props.autoFlip) {
         if (side === "bottom") {
-          const spaceBelow = vh - anchorRect.bottom;
-          const spaceAbove = anchorRect.top;
+          const spaceBelow = frame.y + frame.height - anchorRect.bottom;
+          const spaceAbove = anchorRect.top - frame.y;
           if (spaceBelow < panelRect.height + pad && spaceAbove > spaceBelow) {
             side = "top";
           }
         } else if (side === "top") {
-          const spaceAbove = anchorRect.top;
-          const spaceBelow = vh - anchorRect.bottom;
+          const spaceAbove = anchorRect.top - frame.y;
+          const spaceBelow = frame.y + frame.height - anchorRect.bottom;
           if (spaceAbove < panelRect.height + pad && spaceBelow > spaceAbove) {
             side = "bottom";
           }
         } else if (side === "right") {
-          const spaceRight = vw - anchorRect.right;
-          const spaceLeft = anchorRect.left;
+          const spaceRight = frame.x + frame.width - anchorRect.right;
+          const spaceLeft = anchorRect.left - frame.x;
           if (spaceRight < panelRect.width + pad && spaceLeft > spaceRight) {
             side = "left";
           }
         } else if (side === "left") {
-          const spaceLeft = anchorRect.left;
-          const spaceRight = vw - anchorRect.right;
+          const spaceLeft = anchorRect.left - frame.x;
+          const spaceRight = frame.x + frame.width - anchorRect.right;
           if (spaceLeft < panelRect.width + pad && spaceRight > spaceLeft) {
             side = "right";
           }
@@ -387,7 +394,8 @@ export default defineComponent({
       const anchorStart = isVertical ? anchorRect.left : anchorRect.top;
       const anchorEnd = isVertical ? anchorRect.right : anchorRect.bottom;
       const anchorSize = isVertical ? anchorRect.width : anchorRect.height;
-      const viewportSize = isVertical ? vw : vh;
+      const frameSize = isVertical ? frame.width : frame.height;
+      const frameOrigin = isVertical ? frame.x : frame.y;
 
       let crossPos: number;
       if (align === "start") {
@@ -397,7 +405,10 @@ export default defineComponent({
       } else {
         crossPos = anchorStart + (anchorSize - panelSize) / 2;
       }
-      crossPos = clampWithGutter(crossPos, panelSize, viewportSize, pad);
+      // Clamps run against the popup viewport, frame-relative and re-based
+      // onto the frame origin — with no band configured the origin is 0
+      // and every clamp is the plain viewport-gutter clamp.
+      crossPos = clampWithGutter(crossPos - frameOrigin, panelSize, frameSize, pad) + frameOrigin;
 
       if (side === "bottom") {
         c.top = anchorRect.bottom + off;
@@ -414,13 +425,21 @@ export default defineComponent({
       }
 
       if (side === "bottom") {
-        c.top = clampWithGutter(c.top!, panelRect.height, vh, pad);
+        c.top = clampWithGutter(c.top! - frame.y, panelRect.height, frame.height, pad) + frame.y;
       } else if (side === "top") {
-        c.bottom = clampWithGutter(c.bottom ?? 0, panelRect.height, vh, pad);
+        // `bottom` counts from the viewport's bottom edge — shift it into
+        // frame-relative space (0 when no band is configured) and back.
+        const fromFrameBottom = vh - (frame.y + frame.height);
+        c.bottom =
+          clampWithGutter((c.bottom ?? 0) - fromFrameBottom, panelRect.height, frame.height, pad) +
+          fromFrameBottom;
       } else if (side === "right") {
-        c.left = clampWithGutter(c.left!, panelRect.width, vw, pad);
+        c.left = clampWithGutter(c.left! - frame.x, panelRect.width, frame.width, pad) + frame.x;
       } else {
-        c.right = clampWithGutter(c.right ?? 0, panelRect.width, vw, pad);
+        const fromFrameRight = vw - (frame.x + frame.width);
+        c.right =
+          clampWithGutter((c.right ?? 0) - fromFrameRight, panelRect.width, frame.width, pad) +
+          fromFrameRight;
       }
 
       coords.value = c;

package/src/components/HkSelectPanel.rootzoom.test.tsx

@@ -11,6 +11,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 import type { ComponentPublicInstance } from "vue";
 
+import { configurePopupInsets } from "../runtime/popupBounds";
 import HkSelectPanel from "./HkSelectPanel";
 
 const mounts: ReturnType<typeof createApp>[] = [];
@@ -123,3 +124,34 @@ describe("HkSelectPanel popout under root CSS zoom", () => {
     expect(host.style.left).toBe("100px");
   });
 });
+
+describe("HkSelectPanel popout against an app-chrome band", () => {
+  const PREV_HEIGHT = window.innerHeight;
+
+  afterEach(() => {
+    configurePopupInsets(null);
+    window.innerHeight = PREV_HEIGHT;
+  });
+
+  it("flips a top-placed panel below its anchor when the band eats the space", async () => {
+    // A 260px band (a docked header stack) leaves frame 260..800. The
+    // anchor at y=300 with a top placement: the RAW-viewport top space
+    // (300 - 16) holds the 200px panel — the pre-bounds math pinned it
+    // at top 96, across the band. Inside the frame only 300 - 260 - 16 =
+    // 24 remains → flip below; the clamp keeps the flipped panel inside
+    // the frame (344 + 200 = 544 ≤ 800 - 16).
+    window.innerWidth = 1200;
+    window.innerHeight = 800;
+    patchRootZoom("1");
+    configurePopupInsets({ top: 260 });
+    const { button } = mountPanel();
+    vi.spyOn(button, "getBoundingClientRect").mockReturnValue(rect(200, 300, 100, 40));
+
+    button.click();
+    await flush();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.style.top).toBe("344px"); // anchor bottom 340 + offset 4
+    expect(host.style.left).toBe("200px"); // start, inside the frame as-is
+  });
+});

package/src/components/HkSelectPanel.tsx

@@ -14,6 +14,7 @@ import { useOverlay } from "../runtime/useOverlay";
 import { useBreakpoint } from "../runtime/useBreakpoint";
 import { createBackGuard } from "../runtime/backStack";
 import { ancestorZoom } from "../runtime/cssZoom";
+import { popupViewportRect } from "../runtime/popupBounds";
 import { clampWithGutter, viewportGutterPx } from "../runtime/viewportGutter";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
@@ -547,16 +548,20 @@ export default defineComponent({
       // The shared viewport gutter (--viewport-gutter: 8px mobile / 16px
       // desktop), read per positioning pass.
       const pad = viewportGutterPx();
+      // The popup viewport: the window minus the app-chrome band the host
+      // configured (popupBounds) — full-window when none, in which case
+      // every flip and clamp below is the raw-window math.
+      const frame = popupViewportRect();
       let side: "top" | "bottom" = props.placement.startsWith("top-") ? "top" : "bottom";
       let top =
         side === "top"
           ? r.top - props.offset - ph
           : r.bottom + props.offset;
       // Auto-flip when the chosen side cannot host the panel.
-      if (side === "bottom" && top + ph > window.innerHeight - pad) {
+      if (side === "bottom" && top + ph > frame.y + frame.height - pad) {
         side = "top";
         top = r.top - props.offset - ph;
-      } else if (side === "top" && top < pad) {
+      } else if (side === "top" && top < frame.y + pad) {
         side = "bottom";
         top = r.bottom + props.offset;
       }
@@ -571,7 +576,7 @@ export default defineComponent({
       // bottom→top into a negative top that was applied verbatim. Clamp so
       // the whole panel stays on-screen; when content exceeds the CSS cap
       // the panel's own internal scroll takes over.
-      top = clampWithGutter(top, ph, window.innerHeight, pad);
+      top = clampWithGutter(top - frame.y, ph, frame.height, pad) + frame.y;
       // -center balances the panel on the anchor's horizontal midpoint
       // (still clamped, so a half-off-screen anchor keeps the panel
       // readable instead of mirroring the overflow to both edges).
@@ -581,7 +586,7 @@ export default defineComponent({
           : props.placement.endsWith("-end")
             ? r.right - pw
             : r.left;
-      const clampedLeft = clampWithGutter(left, pw, window.innerWidth, pad);
+      const clampedLeft = clampWithGutter(left - frame.x, pw, frame.width, pad) + frame.x;
       coords.value = {
         top: `${Math.round(top / z)}px`,
         left: `${Math.round(clampedLeft / z)}px`,

package/src/components/HkUserPicker.scss

@@ -0,0 +1,184 @@
+// HkUserPicker (components/HkUserPicker.tsx) — the tag field + search
+// dialog pair. Tokens follow the house scale (--space-*, --radius-*,
+// rgb(var(--color-*)) — the HkKeywordSearchModal.scss conventions).
+
+.hk-user-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 0.5rem);
+
+  &.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}
+
+.hk-user-picker-label {
+  font-size: 0.75rem;
+  color: rgb(var(--color-text) / 70%);
+}
+
+.hk-user-picker-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  min-height: 2.5rem;
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
+  background: var(--hi-color-surface, rgba(240, 244, 248, 0.95));
+  border: 1px solid var(--hk-kw-border, rgb(var(--color-border) / 8%));
+  border-radius: var(--radius-lg, 0.75rem);
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--hi-color-primary, #7aa2f7);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 12%, transparent);
+  }
+}
+
+.hk-user-picker-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  max-width: 100%;
+  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
+  border-radius: var(--radius-md, 0.5rem);
+  background: rgb(var(--color-primary) / 12%);
+  border: 1px solid rgb(var(--color-primary) / 20%);
+}
+
+.hk-user-picker-tag-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.hk-user-picker-tag-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgb(var(--color-text));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-user-picker-tag-email {
+  font-size: 0.625rem;
+  color: rgb(var(--color-text) / 60%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-user-picker-tag-x {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: rgb(var(--color-text) / 60%);
+  font-size: 0.875rem;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(var(--color-text) / 10%);
+    color: rgb(var(--color-text));
+  }
+}
+
+.hk-user-picker-add {
+  font-size: 0.75rem;
+  color: rgb(var(--color-text) / 60%);
+
+  &.is-placeholder {
+    color: rgb(var(--color-text) / 45%);
+  }
+}
+
+.hk-user-picker-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12, 0.75rem);
+  padding: var(--space-4, 0.25rem) 0;
+}
+
+.hk-user-picker-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 0.25rem);
+  min-height: 6rem;
+}
+
+.hk-user-picker-note {
+  margin: 0;
+  padding: var(--space-12, 0.75rem) 0;
+  font-size: 0.75rem;
+  color: rgb(var(--color-text) / 55%);
+  text-align: center;
+}
+
+.hk-user-picker-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8, 0.5rem);
+  width: 100%;
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 0.5rem);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(var(--color-text) / 6%);
+  }
+
+  &.is-selected {
+    background: rgb(var(--color-primary) / 12%);
+    border-color: rgb(var(--color-primary) / 25%);
+  }
+}
+
+.hk-user-picker-row-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.hk-user-picker-row-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: rgb(var(--color-text));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-user-picker-row-email {
+  font-size: 0.6875rem;
+  color: rgb(var(--color-text) / 60%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-user-picker-row-check {
+  flex: none;
+  color: var(--hi-color-primary, #7aa2f7);
+  font-weight: 700;
+}
+
+.hk-user-picker-count {
+  margin: 0;
+  font-size: 0.6875rem;
+  color: rgb(var(--color-text) / 55%);
+  text-align: right;
+}