@celestia-island/hikari 0.55.288 → 0.55.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.288",
+  "version": "0.55.290",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkConfirmDialog.scss

@@ -2,9 +2,11 @@
 //
 // Compact confirmation sheet — sized like a dropdown popover (24rem) so
 // short messages do not float in a half-empty 32rem modal. The message
-// block centers vertically between the title and the actions; the two
-// buttons share the row equally (no right-clustering of tiny sm buttons),
-// and on touch-width viewports they grow to the 44px thumb standard.
+// block centers vertically between the title and the actions; the action
+// pair lives in the modal's footer band (2026-11-05 move — the same slot
+// HkMessageBox hosts its pair in) and right-aligns there at its natural
+// width, the two buttons still sharing that row equally via flex; on
+// touch-width viewports they grow to the 44px thumb standard.
 
 @use "../styles/polyfill" as *;
 
@@ -38,9 +40,11 @@
   min-width: 0;
 }
 
-/* Touch-width viewports: thumb-friendly actions — full-width halves with
-   the 44px minimum hit target; the dialog keeps its centered popover
-   sizing but with slimmer side insets so the buttons get the width. */
+/* Touch-width viewports: keep the 44px thumb target on the pair. The
+   modal footer's own mobile lift owns padding/font-size for sm/md
+   buttons inside the band (HkModal.scss .hk-modal-footer .hk-btn-md),
+   so the old 15px font-size override stayed behind on the move into
+   the footer — buttons read like every other lifted footer button. */
 @media (max-width: 640px) {
   .hk-confirm-dialog {
     gap: 1rem;
@@ -48,7 +52,6 @@
 
   .hk-confirm-dialog-btn {
     min-height: 44px;
-    font-size: 0.9375rem;
   }
 
   .hk-confirm-dialog-actions {

package/src/components/HkConfirmDialog.tsx

@@ -67,31 +67,38 @@ export default defineComponent({
           default: () => (
             <div class="hk-confirm-dialog">
               <p class="hk-confirm-dialog-message">{props.message}</p>
-              {/* Primary action first, dismiss second — the message-box order
-               *  the confirmation surfaces share (HkMessageBox,
-               *  HkBlockingToast); form-dialog footers keep the primary
-               *  rightmost. It mirrors under `dir="rtl"` because the row only
-               *  reverses visually. */}
-              <div class="hk-confirm-dialog-actions">
-                <HButton
-                  class="hk-confirm-dialog-btn"
-                  variant={props.confirmVariant}
-                  size="md"
-                  loading={props.loading}
-                  onClick={onConfirm}
-                >
-                  {props.confirmLabel || t("hikari::confirmDialog.confirm", "Confirm")}
-                </HButton>
-                <HButton
-                  class="hk-confirm-dialog-btn"
-                  variant="secondary"
-                  size="md"
-                  disabled={props.loading}
-                  onClick={onCancel}
-                >
-                  {props.cancelLabel || t("hikari::confirmDialog.cancel", "Cancel")}
-                </HButton>
-              </div>
+            </div>
+          ),
+          /* The confirm pair lives in the modal's standard footer band —
+           * it used to render inline under the message while HkMessageBox
+           * (the sibling MODAL confirmation surface) already hosted the
+           * same pair in this exact slot. HkBlockingToast keeps its own
+           * inline pair by design — it is a toast card, not a modal — so
+           * the family now has exactly two placements: this footer band
+           * for every modal-hosted confirm, and the toast card's inline
+           * row. Primary action first, dismiss second — the message-box
+           * order; it mirrors under `dir="rtl"` because the row only
+           * reverses visually. */
+          footer: () => (
+            <div class="hk-confirm-dialog-actions">
+              <HButton
+                class="hk-confirm-dialog-btn"
+                variant={props.confirmVariant}
+                size="md"
+                loading={props.loading}
+                onClick={onConfirm}
+              >
+                {props.confirmLabel || t("hikari::confirmDialog.confirm", "Confirm")}
+              </HButton>
+              <HButton
+                class="hk-confirm-dialog-btn"
+                variant="secondary"
+                size="md"
+                disabled={props.loading}
+                onClick={onCancel}
+              >
+                {props.cancelLabel || t("hikari::confirmDialog.cancel", "Cancel")}
+              </HButton>
             </div>
           ),
         }}

package/src/components/HkJsonTree.contract.test.ts

@@ -113,3 +113,88 @@ describe("HkJsonTree spacing contract", () => {
     expect(scss).not.toMatch(/margin-inline-start: 0\.\d+em/);
   });
 });
+
+/**
+ * Selection + fold-motion contract (2026-11-05 user direction).
+ *
+ * The tree is a viewer, not a document: rows must NOT be selectable by
+ * default, and the only re-enable site is the explicit `selectable` opt-in.
+ * The fold is animated through the shared motion family — the JS side reads
+ * the two `--jt-fold-*` properties, so a theme retime moves the tree with the
+ * rest of the system; the chevron is ONE glyph rotated by those same tokens
+ * (not a glyph swap) and must honour reduced motion.
+ */
+describe("HkJsonTree selection + motion contract", () => {
+  const rowBlock = scss.slice(scss.indexOf(".s-jt-row {"), scss.indexOf("/* The ONLY place"));
+
+  it("denies text selection on rows by default", () => {
+    expect(rowBlock, ".s-jt-row rule present").not.toBe("");
+    expect(rowBlock).toContain("@include user-select(none)");
+    expect(rowBlock).not.toContain("@include user-select(text)");
+    // iOS long-press must not raise the callout menu over a row that is
+    // itself a toggle target; the opt-in rule is the only place that lifts it.
+    const treeBlock = scss.slice(scss.indexOf(".s-tool-json-tree {"), scss.indexOf("/* ONE SCROLLBAR"));
+    expect(treeBlock).toContain("-webkit-touch-callout: none;");
+  });
+
+  it("re-enables selection only through the explicit selectable hook", () => {
+    expect(scss).toContain(".s-tool-json-tree.s-jt-selectable .s-jt-row {");
+    expect(scss).toContain("@include user-select(text)");
+    // Exactly one opt-in selector site: a second selector that re-enables
+    // selection without the host asking would silently undo the contract.
+    expect(scss.match(/s-jt-selectable/g)?.length).toBe(2); // the comment + this selector
+    expect(scss.slice(scss.indexOf(".s-tool-json-tree.s-jt-selectable .s-jt-row {"))).toContain(
+      "-webkit-touch-callout: default;",
+    );
+  });
+
+  it("seeds the fold tokens from the shared motion family", () => {
+    expect(scss).toContain(
+      "--jt-fold-duration: var(--hi-duration-fast, var(--duration-fast, 0.15s));",
+    );
+    expect(scss).toContain(
+      "--jt-fold-ease: var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));",
+    );
+  });
+
+  it("rotates one chevron with the fold tokens instead of swapping glyphs", () => {
+    const tsx = readFileSync(join(here, "HkJsonTree.tsx"), "utf-8");
+    expect(tsx).toContain('class="s-jt-chevron"');
+    expect(tsx).not.toContain("ChevronDown");
+    expect(scss).toContain(".s-jt-group[data-open] > .s-jt-row .s-jt-chevron {");
+    expect(scss).toContain("transform: rotate(90deg);");
+    // Child combinator, not a descendant: an open group must not rotate the
+    // chevrons of collapsed grandchildren nested below it.
+    const rotateAt = scss.indexOf(".s-jt-group[data-open] > .s-jt-row .s-jt-chevron {");
+    expect(rotateAt).toBeGreaterThanOrEqual(0);
+    const rotateRule = scss.slice(rotateAt, scss.indexOf("}", rotateAt));
+    expect(rotateRule).toContain("rotate(90deg)");
+    const chevron = scss.slice(scss.indexOf(".s-jt-chevron {"), scss.indexOf(".s-jt-group[data-open]"));
+    expect(chevron).toContain("var(--jt-fold-duration");
+    expect(chevron).toContain("var(--jt-fold-ease");
+  });
+
+  it("switches the chevron rotation off under reduced motion", () => {
+    // The whole rule must live INSIDE the media block: slicing to EOF would
+    // also pass if a later bare `.s-jt-chevron { transition: none }` was
+    // added outside it (R2 2026-11-05), which would disable the rotation
+    // for everyone instead of just reduced-motion users.
+    expect(scss).toMatch(
+      /@media \(prefers-reduced-motion: reduce\) \{\s*\.s-jt-chevron \{\s*transition: none;\s*\}\s*\}/,
+    );
+  });
+
+  it("keeps the JS fallback duration equal to the sheet fallback", () => {
+    const tsx = readFileSync(join(here, "HkJsonTree.tsx"), "utf-8");
+    const jsFallback = /const JT_FOLD_FALLBACK_MS = (\d+);/.exec(tsx)?.[1];
+    expect(jsFallback).toBe("150");
+    expect(scss).toContain(
+      "--jt-fold-duration: var(--hi-duration-fast, var(--duration-fast, 0.15s));",
+    );
+  });
+
+  it("pins the selectable prop default to off", () => {
+    const tsx = readFileSync(join(here, "HkJsonTree.tsx"), "utf-8");
+    expect(tsx).toContain("selectable: { type: Boolean, default: false }");
+  });
+});