@celestia-island/hikari 0.55.122 → 0.55.124

package/package.json

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

package/src/components/HkButton.scss

@@ -168,6 +168,135 @@
   width: 100%;
 }
 
+/* ---- Responsive label collapse ---- */
+/* A `collapseLabel` button carries icon + text at wide viewports and
+   collapses to the SAME icon-only square below the chosen breakpoint
+   (chest 2026-10-05 direction: the ad-hoc `hidden sm:inline` label-span
+   pattern left the button as a padded icon rectangle on phones — the
+   exact squat shape the icon-only contract exists to prevent). The
+   geometry mirrors the icon-only ladder above per size; the breakpoint
+   px values mirror the runtime useBreakpoint scale (sm 640 / md 768 /
+   lg 1024 / xl 1280) — a media query cannot read the TS constant, keep
+   the two tables in sync. The TS side suppresses the collapse class
+   together with `block` (a full-width button has nothing to collapse
+   into), so no block override is needed here. */
+.hk-btn-label {
+  /* Inline-flex so multi-node labels (text + inline marks) stay on one
+     row and center against the glyph box. */
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+@mixin hk-btn-collapse-geometry($square) {
+  .hk-btn-label {
+    display: none;
+  }
+
+  /* The exact icon-only geometry (all-side padding zero, width locked),
+     mirrored per size from the ladder above. */
+  padding: 0;
+  box-sizing: border-box;
+  width: $square;
+}
+
+.hk-btn-label-collapse-sm.hk-btn-xs {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-sm {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-md {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-lg {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-xs {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-sm {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-md {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-lg {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-xs {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-sm {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-md {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-lg {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-xs {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-sm {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-md {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-lg {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+
 /* ---- Primary ---- */
 
 .hk-btn-primary {

package/src/components/HkButton.test.tsx

@@ -255,3 +255,134 @@ describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
     expect(cls).toContain("extra-class");
   });
 });
+
+describe("HkButton label prop + responsive collapse contract", () => {
+  it("renders the label prop in a .hk-btn-label span and keeps the button textual", () => {
+    const c = mount(h(HkButton, { icon: "gauge", label: "Test all" }));
+    const btn = button(c);
+    const label = c.querySelector(".hk-btn-label");
+    expect(label).not.toBeNull();
+    expect(label!.textContent).toBe("Test all");
+    // icon + label = a text button at wide viewports, never icon-only.
+    expect(btn.className).not.toContain("hk-btn-icon-only");
+    // The label prop is the accessible name unless one is given.
+    expect(btn.getAttribute("aria-label")).toBe("Test all");
+  });
+
+  it("prefers the label prop over the default slot and an explicit ariaLabel over the label", () => {
+    const c = mount(h(HkButton, { label: "From prop" }, () => "From slot"));
+    expect(c.querySelector(".hk-btn-label")!.textContent).toBe("From prop");
+    expect(c.textContent).not.toContain("From slot");
+
+    const named = mount(h(HkButton, { label: "Visible", ariaLabel: "Custom" }));
+    expect(button(named).getAttribute("aria-label")).toBe("Custom");
+  });
+
+  it("emits the collapse modifier class from collapseLabel", () => {
+    const c = mount(h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm" }));
+    expect(button(c).className).toContain("hk-btn-label-collapse-sm");
+  });
+
+  it("suppresses the collapse class with block or shortcut (nothing to collapse into)", () => {
+    const blocked = mount(
+      h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm", block: true }),
+    );
+    expect(button(blocked).className).not.toContain("hk-btn-label-collapse");
+
+    const withShortcut = mount(
+      h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm", shortcut: "Ctrl+B" }),
+    );
+    expect(button(withShortcut).className).not.toContain("hk-btn-label-collapse");
+  });
+
+  it("keeps label-prop buttons out of the icon-only square class", () => {
+    // The narrow-end square is the SCSS media query's job; the class
+    // must not flip at mount time or the wide viewport would square a
+    // labeled button.
+    const c = mount(h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm" }));
+    expect(button(c).className).not.toContain("hk-btn-icon-only");
+  });
+});
+
+// SCSS geometry contract for the responsive collapse (same textual style
+// as the icon-only contract above — happy-dom does not lay out): every
+// collapse breakpoint × size pair must exist, must collapse below the
+// useBreakpoint px scale (sm 640 / md 768 / lg 1024 / xl 1280), and must
+// land on the exact icon-only square width of its size.
+describe("HkButton label-collapse SCSS contract", () => {
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+
+  const breakpoints: Array<[string, string]> = [
+    ["sm", "639.98px"],
+    ["md", "767.98px"],
+    ["lg", "1023.98px"],
+    ["xl", "1279.98px"],
+  ];
+  const squares: Array<[string, string]> = [
+    ["xs", "1.375rem"],
+    ["sm", "1.75rem"],
+    ["md", "2.5rem"],
+    ["lg", "2.75rem"],
+  ];
+
+  it("collapses every breakpoint × size pair to the icon-only square", () => {
+    for (const [bp, query] of breakpoints) {
+      for (const [size, square] of squares) {
+        const rule = scss.match(
+          new RegExp(
+            `\\.hk-btn-label-collapse-${bp}\\.hk-btn-${size}\\s*{\\s*@media \\(max-width: ${query}\\) {`,
+          ),
+        )?.[0];
+        expect(rule, `${bp}×${size} collapse rule must exist`).toBeTruthy();
+      }
+    }
+  });
+
+  it("hides the label and lands on the exact square inside each media block", () => {
+    // The per-pair rules @include one shared mixin; the geometry lives in
+    // its definition (the compiled CSS materializes it per media block).
+    const start = scss.indexOf("@mixin hk-btn-collapse-geometry($square) {");
+    expect(start, "collapse mixin must exist").toBeGreaterThan(-1);
+    // Slice to the mixin's closing brace (nested rules make a [^}] scan
+    // stop early, so index from the header to the documented tail line).
+    const end = scss.indexOf("width: $square;", start);
+    const mixin = scss.slice(start, end + "width: $square;".length);
+    expect(mixin).toContain(".hk-btn-label");
+    expect(mixin).toContain("display: none;");
+    expect(mixin).toContain("padding: 0;");
+    expect(mixin).toContain("box-sizing: border-box;");
+    expect(mixin).toContain("width: $square");
+
+    const smBlock = scss.match(
+      /\.hk-btn-label-collapse-sm\.hk-btn-sm\s*{\s*@media \(max-width: 639\.98px\) {([^}]*)}/,
+    )?.[1];
+    expect(smBlock, "sm×sm collapse body must exist").toBeTruthy();
+    expect(smBlock).toContain("@include hk-btn-collapse-geometry(1.75rem)");
+  });
+
+  it("mirrors the useBreakpoint scale breakpoints in order", () => {
+    // Keep the SCSS table honest against the runtime scale document —
+    // the px values appear in ascending breakpoint order.
+    const queries = [...scss.matchAll(/@media \(max-width: (\d+(?:\.\d+)?px)\)/g)].map(
+      (m) => m[1],
+    );
+    expect(queries).toEqual([
+      "639.98px",
+      "639.98px",
+      "639.98px",
+      "639.98px",
+      "767.98px",
+      "767.98px",
+      "767.98px",
+      "767.98px",
+      "1023.98px",
+      "1023.98px",
+      "1023.98px",
+      "1023.98px",
+      "1279.98px",
+      "1279.98px",
+      "1279.98px",
+      "1279.98px",
+    ]);
+  });
+});

package/src/components/HkButton.tsx

@@ -13,6 +13,14 @@ export type ButtonVariant =
   | "outline";
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
+/** Breakpoints below which a `collapseLabel` button hides its label and
+ *  collapses to the icon-only square. Mirrors the runtime useBreakpoint
+ *  scale (sm 640 / md 768 / lg 1024 / xl 1280) — the SCSS side repeats
+ *  the px values because a media query cannot read a TS constant; keep
+ *  the two in sync. "xs" is deliberately absent: collapse-at-xs means
+ *  "always collapsed", which is just the icon prop + label-less button. */
+export type ButtonLabelCollapse = "sm" | "md" | "lg" | "xl";
+
 export default defineComponent({
   name: "HkButton",
   inheritAttrs: false,
@@ -26,6 +34,24 @@ export default defineComponent({
     shortcut: { type: String, default: undefined },
     icon: { type: String, default: undefined },
     suffix: { type: String, default: undefined },
+    /** Plain-text label, rendered in a `.hk-btn-label` span after the
+     *  glyph. Pairs with `collapseLabel`: at wide viewports the button
+     *  reads icon + text; below the chosen breakpoint the label hides
+     *  and the button collapses to the icon-only square. When set, the
+     *  default slot is ignored (one label source per button) and the
+     *  accessible name falls back to this text, so the button keeps its
+     *  name at breakpoints where the visible label is display:none. */
+    label: { type: String, default: undefined },
+    /** Breakpoint below which the label hides and the button collapses
+     *  to the icon-only square (see `ButtonLabelCollapse`). Requires
+     *  `label`; ignored together with `block` (a full-width button has
+     *  nothing to collapse into) and with `shortcut` (the shortcut chip
+     *  is an extra child the square width would visibly clip — the same
+     *  exclusion the icon-only contract applies). */
+    collapseLabel: {
+      type: String as PropType<ButtonLabelCollapse>,
+      default: undefined,
+    },
   },
   emits: {
     click: (_e: MouseEvent) => true,
@@ -40,6 +66,9 @@ export default defineComponent({
       props.block ? "hk-btn-block" : "",
       props.loading ? "hk-btn-loading" : "",
       props.shortcut ? "hk-btn-has-shortcut" : "",
+      props.collapseLabel && props.label && !props.block && !props.shortcut
+        ? `hk-btn-label-collapse-${props.collapseLabel}`
+        : "",
     ]);
 
     return () => {
@@ -51,9 +80,13 @@ export default defineComponent({
       // reactive, so a cached flag would go stale when a parent toggles
       // the label slot without touching the icon props. A shortcut chip
       // is excluded: it renders as an extra flex child the fixed square
-      // width would visibly clip.
+      // width would visibly clip. A `label` prop counts as text (the
+      // responsive collapse handles the narrow end via CSS instead).
       const iconOnly =
-        !slots.default && Boolean(props.icon || props.suffix) && !props.shortcut;
+        !slots.default &&
+        props.label === undefined &&
+        Boolean(props.icon || props.suffix) &&
+        !props.shortcut;
 
       return (
         <button
@@ -62,7 +95,7 @@ export default defineComponent({
           disabled={props.disabled || props.loading}
           class={[buttonClass.value, iconOnly ? "hk-btn-icon-only" : "", attrs.class]}
           style={attrs.style || undefined}
-          aria-label={props.ariaLabel}
+          aria-label={props.ariaLabel ?? props.label}
           aria-busy={props.loading || undefined}
           onClick={(e) => emit("click", e)}
         >
@@ -116,7 +149,11 @@ export default defineComponent({
               <HIcon name={props.icon} size={16} />
             </span>
           ) : null}
-          {slots.default?.()}
+          {props.label !== undefined && props.label !== "" ? (
+            <span class="hk-btn-label">{props.label}</span>
+          ) : (
+            slots.default?.()
+          )}
           {props.suffix ? (
             <span class="hk-btn-suffix">
               <HIcon name={props.suffix} size={16} />

package/src/components/HkTemplateField.scss

@@ -0,0 +1,238 @@
+// HkTemplateField / HkTemplateText — the fill-template surfaces.
+// Self-sufficient styling (house rule): the field box, label, hint and
+// error rows live here rather than borrowing HkInput's sheet, and the
+// chip is THE shared token visual — the editor's chips and the
+// read-only renderer's chips are the same class, so a stored template
+// reads identically wherever it appears.
+
+.hk-template-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 4px);
+  width: 100%;
+
+  &[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}
+
+.hk-template-field-label {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 500;
+  color: var(--hi-color-text-primary);
+}
+
+.hk-template-field-hint,
+.hk-template-field-error {
+  margin: 0;
+  font-size: var(--text-2xs, 0.625rem);
+  line-height: 1.4;
+}
+
+.hk-template-field-hint {
+  color: var(--hi-color-muted);
+}
+
+.hk-template-field-error {
+  color: var(--hi-color-danger);
+}
+
+.hk-template-field-box {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: var(--space-6, 0.375rem) var(--space-10, 0.625rem);
+  background: var(--hi-color-surface);
+  border: 1px solid var(--hi-color-border);
+  border-radius: 6px;
+  transition:
+    border-color var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
+    box-shadow var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
+
+  &:hover {
+    border-color: var(--hi-color-primary);
+  }
+
+  &:focus-within {
+    border-color: var(--hi-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 18%, transparent);
+  }
+}
+
+.hk-template-field-box-error {
+  border-color: var(--hi-color-danger);
+
+  &:focus-within {
+    border-color: var(--hi-color-danger);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-danger) 15%, transparent);
+  }
+}
+
+.hk-template-field-edit {
+  // Slightly tighter than a plain input: chips carry their own padding,
+  // and the field must not read taller than the HkInput beside it.
+  min-height: calc(1.5rem + var(--space-4, 4px));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 3px;
+  font-size: var(--text-base, 0.875rem);
+  line-height: 1.5;
+  color: var(--hi-color-text-primary);
+  outline: none;
+  word-break: break-all;
+  cursor: text;
+
+  &:empty::before {
+    content: attr(data-ph);
+    color: var(--hi-color-muted);
+    opacity: 0.6;
+  }
+}
+
+// ── The chip ─────────────────────────────────────────────────────────
+// Monospace (it IS code — the exact text the host fills), primary
+// tinted, unbreakable. Editable context adds the click affordance and
+// the unknown marker both surfaces share.
+
+.hk-tpl-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--space-6, 6px);
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid color-mix(in srgb, var(--hi-color-primary) 32%, transparent);
+  background: color-mix(in srgb, var(--hi-color-primary) 12%, transparent);
+  color: color-mix(in srgb, var(--hi-color-primary) 70%, rgb(0 0 0));
+  font-family: var(--font-mono, monospace);
+  font-size: 0.8em;
+  line-height: 1.5;
+  white-space: nowrap;
+  user-select: none;
+
+  [data-theme="dark"] & {
+    color: color-mix(in srgb, var(--hi-color-primary) 60%, rgb(255 255 255));
+  }
+
+  &[data-unknown] {
+    border-color: var(--hi-color-border);
+    background: color-mix(in srgb, var(--hi-color-warning) 12%, transparent);
+    color: var(--hi-color-muted);
+    font-style: italic;
+  }
+}
+
+.hk-template-field-edit .hk-tpl-chip {
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--hi-color-primary);
+    background: color-mix(in srgb, var(--hi-color-primary) 20%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary);
+    outline-offset: 1px;
+  }
+}
+
+.hk-template-text {
+  display: inline;
+  max-width: 100%;
+
+  &[data-multiline] {
+    display: block;
+    overflow-wrap: anywhere;
+  }
+}
+
+.hk-template-text-run {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+// ── Vocabulary rows (panel + chip editor share them) ────────────────
+
+.hk-tpl-rows,
+.hk-tpl-editor-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--space-4, 4px);
+}
+
+.hk-tpl-row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  padding: var(--space-4, 4px) var(--space-8, 8px);
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: var(--hi-color-text-primary);
+  text-align: start;
+  cursor: pointer;
+
+  &:hover,
+  &[data-active] {
+    background: color-mix(in srgb, var(--hi-color-primary) 10%, transparent);
+  }
+}
+
+.hk-tpl-row-name {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.hk-tpl-row-desc {
+  font-size: var(--text-2xs, 0.625rem);
+  color: var(--hi-color-muted);
+  line-height: 1.4;
+}
+
+.hk-tpl-rows-empty {
+  padding: var(--space-8, 8px) var(--space-12, 12px);
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--hi-color-muted);
+}
+
+// ── Chip editor form ────────────────────────────────────────────────
+
+.hk-tpl-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 8px);
+  min-width: 16rem;
+  max-width: min(22rem, 90vw);
+  padding: var(--space-8, 8px);
+}
+
+.hk-tpl-editor-current {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-8, 8px);
+  flex-wrap: wrap;
+}
+
+.hk-tpl-editor-desc {
+  font-size: var(--text-2xs, 0.625rem);
+  color: var(--hi-color-muted);
+  line-height: 1.4;
+  flex: 1 1 10rem;
+}
+
+// ONE scrollbar per window (family contract): the mobile sheet's panel
+// already scrolls the whole form through its own overlay scrollbar, so
+// the rows cap exists ONLY in the desktop popover (which sizes to
+// content and otherwise has no scroll region at all).
+.hk-popover-panel:not(.hk-is-sheet) .hk-tpl-editor-rows {
+  max-height: min(16rem, 40dvh);
+  overflow-y: auto;
+}
+
+.hk-tpl-editor-footer {
+  display: flex;
+  justify-content: flex-end;
+}