@celestia-island/hikari 0.43.0 → 0.43.1

package/package.json

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

package/src/DemoApp.tsx

@@ -150,6 +150,8 @@ export default defineComponent({
         { key: "c", label: "Archived" },
       ],
     });
+    const centerAnchor = ref<HTMLElement | null>(null);
+    const centerPanelOpen = ref(false);
     function togglePanelOpt(key: string, v: boolean) {
       panel.value.checked = v
         ? [...panel.value.checked, key]
@@ -417,6 +419,26 @@ export default defineComponent({
                 >{opt.label}</HCheckbox>
               ))}
             </HSelectPanel>
+            <span style="align-self:center;color:var(--color-muted, gray)">center placement:</span>
+            <span ref={centerAnchor} style="display:inline-flex">
+              <HButton onClick={() => (centerPanelOpen.value = !centerPanelOpen.value)}>Engine {centerPanelOpen.value ? <ChevronUp size={14} /> : <ChevronDown size={14} />}</HButton>
+            </span>
+            <HSelectPanel
+              open={centerPanelOpen.value}
+              onUpdate:open={(v: boolean) => (centerPanelOpen.value = v)}
+              anchorRef={centerAnchor.value ?? null}
+              title="Engine"
+              placement="top-center"
+              matchAnchorWidth={false}
+            >
+              {panel.value.opts.map((opt) => (
+                <HCheckbox
+                  key={opt.key}
+                  modelValue={panel.value.checked.includes(opt.key)}
+                  onUpdate:modelValue={(v: boolean) => togglePanelOpt(opt.key, v)}
+                >{opt.label}</HCheckbox>
+              ))}
+            </HSelectPanel>
           </div>
         </section>
 

package/src/components/HkSelect.scss

@@ -106,14 +106,16 @@
   position: fixed;
   min-width: 180px;
 
-  /* Pop motion family — the popout grows out of the anchor edge it sits
-   * on (data-side/data-align are set by HkSelectPanel from the RESOLVED
-   * placement, including after an auto-flip) and retracts back into it.
-   * Same tokens as HkPopover/HkTooltip so every anchored surface moves
-   * with one curve. */
+  /* Pop motion family — the popout grows out of the anchor edge (or
+   * midpoint, for the -center placements) it sits on (data-side/data-align
+   * are set by HkSelectPanel from the RESOLVED placement, including after
+   * an auto-flip) and retracts back into it. Same tokens as
+   * HkPopover/HkTooltip so every anchored surface moves with one curve. */
   &[data-side="bottom"] { transform-origin: top left; }
+  &[data-side="bottom"][data-align="center"] { transform-origin: top center; }
   &[data-side="bottom"][data-align="end"] { transform-origin: top right; }
   &[data-side="top"] { transform-origin: bottom left; }
+  &[data-side="top"][data-align="center"] { transform-origin: bottom center; }
   &[data-side="top"][data-align="end"] { transform-origin: bottom right; }
 }
 

package/src/components/HkSelectPanel.test.tsx

@@ -301,6 +301,94 @@ describe("HkSelectPanel custom invocation", () => {
     expect(flipped).toBeGreaterThan(8);
   });
 
+  it("balances a top-center popout on the anchor's horizontal midpoint", async () => {
+    // happy-dom lays nothing out, so the panel measures at the
+    // max(anchor, 180) fallback width — anchor spanning 200..360 (midpoint
+    // 280, fallback width 180) puts the balanced left edge at
+    // 280 - 180/2 = 190.
+    const { container, open } = mountPanel({ placement: "top-center" });
+    await nextTick();
+
+    const anchor = container.querySelector<HTMLButtonElement>("button")!;
+    anchor.getBoundingClientRect = () =>
+      ({ top: 500, bottom: 520, left: 200, right: 360, width: 160, height: 20 }) as DOMRect;
+    open.value = true;
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.style.left).toBe("190px");
+    // Top-side still honored (anchor bottom 520 → panel above it), and the
+    // resolved alignment drives the pop motion's transform origin.
+    expect(Number.parseInt(host.style.top, 10)).toBeLessThan(520);
+    expect(host.dataset.align).toBe("center");
+    expect(host.dataset.side).toBe("top");
+
+    // A centered panel poking past the left edge clamps to the viewport
+    // pad instead of mirroring the overflow to both sides: anchor
+    // 0..40 → raw left (20 - 180/2) = -70 → clamped to 8.
+    anchor.getBoundingClientRect = () =>
+      ({ top: 500, bottom: 520, left: 0, right: 40, width: 40, height: 20 }) as DOMRect;
+    window.dispatchEvent(new Event("resize"));
+    await nextTick();
+    expect(host.style.left).toBe("8px");
+  });
+
+  it("reports center alignment through an auto-flip so the pop origin follows", async () => {
+    // mountPanel's rig anchor sits at the very top of the test layout, so
+    // a top-center panel cannot fit above and flips bottom-side — the
+    // flip must carry data-side/data-align with it (transform origin).
+    const { container, open } = mountPanel({ placement: "top-center" });
+    await nextTick();
+    open.value = true;
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.dataset.side).toBe("bottom");
+    expect(host.dataset.align).toBe("center");
+  });
+
+  it("opens an unflipped bottom-center popout below the anchor", async () => {
+    // The bottom-center twin: same balance math, opposite side, and no
+    // flip here (the faked anchor sits low with room below).
+    const { container, open } = mountPanel({ placement: "bottom-center" });
+    await nextTick();
+
+    const anchor = container.querySelector<HTMLButtonElement>("button")!;
+    anchor.getBoundingClientRect = () =>
+      ({ top: 100, bottom: 120, left: 200, right: 360, width: 160, height: 20 }) as DOMRect;
+    open.value = true;
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.dataset.side).toBe("bottom");
+    expect(host.dataset.align).toBe("center");
+    // Anchor top 100 + offset 4 → the panel hangs below 104.
+    expect(Number.parseInt(host.style.top, 10)).toBeGreaterThan(120);
+    expect(host.style.left).toBe("190px");
+  });
+
+  it("clamps a centered popout at the right viewport pad near the right edge", async () => {
+    // Anchor hugging the right edge: raw balanced left 1100 + (80 - 180)/2
+    // = 1050 would poke past 1200 - 8 - 180 = 1012 → pinned at the pad.
+    // The expected left edge is viewport arithmetic, so pin the width here
+    // (happy-dom's bare default is 1024 — the afterEach reset only helps
+    // full-file runs, not -t filtering; afterEach re-asserts 1200 anyway).
+    setViewport(1200);
+    const { container, open } = mountPanel({ placement: "bottom-center" });
+    await nextTick();
+
+    const anchor = container.querySelector<HTMLButtonElement>("button")!;
+    anchor.getBoundingClientRect = () =>
+      ({ top: 100, bottom: 120, left: 1100, right: 1180, width: 80, height: 20 }) as DOMRect;
+    open.value = true;
+    await nextTick();
+
+    const host = document.body.querySelector<HTMLElement>(".hk-select-popout-host")!;
+    expect(host.style.left).toBe("1012px");
+  });
+
   it("clamps a tall flipped popout into the viewport instead of going negative", async () => {
     // The taller viewport-relative CSS cap admits ~576px panels: anchored
     // mid-viewport (top 380 / bottom 424 on an 800px-tall viewport), a

package/src/components/HkSelectPanel.tsx

@@ -56,8 +56,10 @@ import "./HkSelect.scss";
 
 export type SelectPanelPlacement =
   | "bottom-start"
+  | "bottom-center"
   | "bottom-end"
   | "top-start"
+  | "top-center"
   | "top-end";
 
 const VIEWPORT_PAD = 8;
@@ -71,7 +73,10 @@ export default defineComponent({
     anchorRef: { type: Object as PropType<HTMLElement | null>, default: null },
     /** Sheet header on mobile / a11y name for the panel. */
     title: { type: String, default: "" },
-    /** Base placement of the popout relative to the anchor (auto-flips). */
+    /** Base placement of the popout relative to the anchor (auto-flips).
+     *  The `-center` variants center the popout on the anchor's horizontal
+     *  midpoint (footer-center triggers whose menus would otherwise read
+     *  as lopsided off a narrow pill). */
     placement: {
       type: String as PropType<SelectPanelPlacement>,
       default: "bottom-start",
@@ -474,9 +479,10 @@ export default defineComponent({
     // again after the DOM settles, when the panel's real box is known and
     // flip/clamp decisions can use actual numbers.
     /** Resolved popout orientation — drives the pop transition's
-     *  transform-origin (grow from the anchor edge, data-side/align on
-     *  the host). Updated by positionPanel on every reposition. */
-    const resolved = ref<{ side: "top" | "bottom"; align: "start" | "end" }>({
+     *  transform-origin (grow from the anchor edge or midpoint,
+     *  data-side/align on the host). Updated by positionPanel on every
+     *  reposition. */
+    const resolved = ref<{ side: "top" | "bottom"; align: "start" | "center" | "end" }>({
       side: "bottom",
       align: "start",
     });
@@ -501,10 +507,12 @@ export default defineComponent({
         side = "bottom";
         top = r.bottom + props.offset;
       }
-      resolved.value = {
-        side,
-        align: props.placement.endsWith("-end") ? "end" : "start",
-      };
+      const align = props.placement.endsWith("-center")
+        ? "center"
+        : props.placement.endsWith("-end")
+          ? "end"
+          : "start";
+      resolved.value = { side, align };
       // One flip never re-checks: taller menu panels (the viewport-relative
       // CSS cap) made this band reachable — a mid-viewport anchor flips
       // bottom→top into a negative top that was applied verbatim. Clamp so
@@ -512,7 +520,15 @@ export default defineComponent({
       // the panel's own internal scroll takes over.
       const maxTop = Math.max(VIEWPORT_PAD, window.innerHeight - VIEWPORT_PAD - ph);
       top = Math.min(Math.max(top, VIEWPORT_PAD), maxTop);
-      let left = props.placement.endsWith("-end") ? r.right - pw : r.left;
+      // -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).
+      let left =
+        align === "center"
+          ? r.left + (r.width - pw) / 2
+          : props.placement.endsWith("-end")
+            ? r.right - pw
+            : r.left;
       const maxLeft = Math.max(VIEWPORT_PAD, window.innerWidth - VIEWPORT_PAD - pw);
       left = Math.min(Math.max(left, VIEWPORT_PAD), maxLeft);
       coords.value = {