@celestia-island/hikari 0.55.77 → 0.55.78

package/src/components/HkStepGuide.scss

@@ -0,0 +1,177 @@
+// HkStepGuide — the big-artwork illustrated step cards.
+//
+// Grammar (wowsp's 待命 walkthrough, user direction 2026-09-25): every
+// step is a rounded SURFACE card. The artwork — stroke SVG, icon, or
+// bitmap — is drawn LARGE and bare on the card face (no frame, no bed);
+// the ordinal is a solid primary disc pinned to the card's outer
+// top corner, half outside it; the title and one-line description sit
+// left-aligned under the art. Completed steps swap the ordinal for a
+// check and pick up a success edge, letting the guide double as a
+// checklist while the flow progresses.
+//
+// Orientation follows the guide's OWN width (it is a container-query
+// root): wide → cards sit side by side with a chevron bridging
+// consecutive steps; narrow → they stack full-width. Fixed 520px
+// breakpoint: container-query conditions cannot carry var(), so
+// per-host thresholds would need a prop.
+
+.hk-step-guide {
+  container-type: inline-size;
+}
+
+.hk-step-guide-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  margin: 0 0 var(--space-12, 0.75rem);
+}
+
+.hk-step-guide-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  // Headroom so the corner-pinned ordinals never crowd the section label.
+  padding-block-start: var(--space-10, 0.625rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-20, 1.25rem);
+}
+
+// ── the card ────────────────────────────────────────────────────────────────
+.hk-step-guide-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-10, 0.625rem);
+  padding: var(--space-20, 1.25rem);
+  padding-block-start: calc(var(--space-20, 1.25rem) + var(--space-2, 0.125rem));
+  border-radius: var(--radius-lg, 1rem);
+  background: var(--hi-color-surface, #f0f4f8);
+
+  &[data-done] {
+    box-shadow: inset 0 0 0 1px rgb(from var(--hi-color-success, #0eb840) r g b / 0.55);
+
+    .hk-step-guide-ordinal {
+      background: var(--hi-color-success, #0eb840);
+    }
+
+    .hk-step-guide-art {
+      opacity: 0.45;
+    }
+  }
+}
+
+// ── the ordinal, pinned to the card's outer corner ──────────────────────────
+.hk-step-guide-ordinal {
+  position: absolute;
+  top: calc(var(--space-10, 0.625rem) * -1);
+  inset-inline-start: calc(var(--space-10, 0.625rem) * -1);
+  width: var(--space-24, 1.5rem);
+  height: var(--space-24, 1.5rem);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hi-color-primary, #7aa2f7);
+  color: rgb(var(--color-on-solid-icon, 255 255 255));
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  box-sizing: border-box;
+}
+
+.hk-step-guide-check {
+  width: 62%;
+  height: 62%;
+}
+
+// ── the artwork, large and bare on the card face ────────────────────────────
+.hk-step-guide-art {
+  width: 100%;
+  height: var(--hk-step-guide-art-height, 128px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--hi-color-primary, #7aa2f7);
+  transition: opacity 200ms ease;
+}
+
+.hk-step-guide-art-svg {
+  width: 68%;
+  height: 100%;
+}
+
+.hk-step-guide-art-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: calc(var(--radius-lg, 1rem) - var(--space-6, 0.375rem));
+}
+
+// ── the caption ─────────────────────────────────────────────────────────────
+.hk-step-guide-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.125rem);
+}
+
+.hk-step-guide-item-title {
+  font-size: var(--text-base, 0.9375rem);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--hi-color-text-primary, #1e1e1e);
+}
+
+.hk-step-guide-item-desc {
+  font-size: var(--text-sm, 0.8125rem);
+  line-height: 1.55;
+  color: var(--hi-color-text-tertiary, #8b949e);
+}
+
+// ── wide host: the cards lie side by side, chevron between ──────────────────
+@container (min-width: 520px) {
+  .hk-step-guide-list {
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--space-24, 1.5rem);
+  }
+
+  .hk-step-guide-item {
+    flex: 1 1 0;
+    min-width: 0;
+
+    // A chevron centered in the gap, pointing at the next card.
+    &:not(:last-child)::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      inset-inline-end: calc(var(--space-24, 1.5rem) * -1 + var(--space-2, 0.125rem));
+      width: 9px;
+      height: 9px;
+      border-inline-end: 2px solid var(--hi-color-text-tertiary, #8b949e);
+      border-block-end: 2px solid var(--hi-color-text-tertiary, #8b949e);
+      transform: translateY(-50%) rotate(-45deg);
+    }
+  }
+}
+
+// ── grid layout: auto-fill cards ────────────────────────────────────────────
+.hk-step-guide[data-layout="grid"] {
+  .hk-step-guide-list {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--hk-step-guide-card-min, 200px), 100%), 1fr)
+    );
+    gap: var(--space-20, 1.25rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-step-guide-art {
+    transition: none;
+  }
+}

package/src/components/HkStepGuide.test.tsx

@@ -0,0 +1,81 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h } from "vue";
+
+import HkStepGuide, { type StepGuideItem } from "./HkStepGuide";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+const StubIcon = defineComponent({
+  name: "StubIcon",
+  setup() {
+    return () => h("i", { class: "stub-step-icon" });
+  },
+});
+
+const ITEMS: StepGuideItem[] = [
+  { id: "power", title: "插入电源", description: "接通设备供电", icon: StubIcon },
+  { id: "card", title: "装入 SD 卡", image: "https://example.com/card.png" },
+  { id: "net", title: "连接网线" },
+];
+
+describe("HkStepGuide", () => {
+  it("renders every item as a list entry with its title", () => {
+    const c = mount(h(HkStepGuide, { items: ITEMS }));
+    const items = Array.from(c.querySelectorAll(".hk-step-guide-item"));
+    expect(items.length).toBe(3);
+    const titles = items.map((i) => i.querySelector(".hk-step-guide-item-title")?.textContent);
+    expect(titles).toEqual(["插入电源", "装入 SD 卡", "连接网线"]);
+    // An ordered list — a guide is sequential by contract.
+    expect(c.querySelector(".hk-step-guide-list")?.tagName).toBe("OL");
+  });
+
+  it("numbers the steps and swaps the ordinal for a check on done steps", () => {
+    const c = mount(h(HkStepGuide, { items: ITEMS, doneIds: ["power"] }));
+    const ordinals = Array.from(c.querySelectorAll(".hk-step-guide-ordinal"));
+    expect(ordinals[0].querySelector(".hk-step-guide-check")).not.toBeNull();
+    expect(ordinals[1].textContent?.trim()).toBe("2");
+    expect(ordinals[2].textContent?.trim()).toBe("3");
+    // The done step's art dims.
+    const arts = Array.from(c.querySelectorAll(".hk-step-guide-item"));
+    expect(arts[0].hasAttribute("data-done")).toBe(true);
+    expect(arts[1].hasAttribute("data-done")).toBe(false);
+  });
+
+  it("renders the icon component when given, the image otherwise, nothing last", () => {
+    const c = mount(h(HkStepGuide, { items: ITEMS }));
+    const arts = Array.from(c.querySelectorAll(".hk-step-guide-art"));
+    expect(arts[0].querySelector(".stub-step-icon")).not.toBeNull();
+    const img = arts[1].querySelector("img.hk-step-guide-art-img") as HTMLImageElement;
+    expect(img?.getAttribute("src")).toBe("https://example.com/card.png");
+    expect(img?.getAttribute("alt")).toBe("装入 SD 卡");
+    expect(arts[2].children.length).toBe(0);
+    expect(arts[2].getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("renders the section title and honors the grid layout hook", () => {
+    const c = mount(h(HkStepGuide, { items: ITEMS, title: "上架步骤", layout: "grid" }));
+    expect(c.querySelector(".hk-step-guide-title")?.textContent).toBe("上架步骤");
+    expect(c.querySelector(".hk-step-guide")?.getAttribute("data-layout")).toBe("grid");
+  });
+
+  it("renders nothing for an empty item list", () => {
+    const c = mount(h(HkStepGuide, { items: [] }));
+    expect(c.querySelector(".hk-step-guide")).toBeNull();
+  });
+});

package/src/components/HkStepGuide.tsx

@@ -0,0 +1,129 @@
+import { defineComponent, h, type Component, type PropType } from "vue";
+
+import "./HkStepGuide.scss";
+
+/**
+ * One step of an illustrated how-to guide.
+ *
+ * Each step renders as a CARD — the step's OWN artwork (an SVG component,
+ * a lucide icon, or a bitmap URL) drawn large on the card face, with the
+ * ordinal pinned to the card's outer corner and the caption beneath it.
+ */
+export interface StepGuideItem {
+  /** Stable key (also the list rendering key). */
+  id: string;
+  /** Short imperative title ("插入 SD 卡"). */
+  title: string;
+  /** One-line elaboration under the title. */
+  description?: string;
+  /** SVG/lucide component rendered as the artwork. */
+  icon?: Component;
+  /** Bitmap/photo URL for the artwork (`icon` wins when both given). */
+  image?: string;
+  /** Accessible name when the artwork is decorative-only. Defaults to the title. */
+  alt?: string;
+}
+
+/**
+ * HkStepGuide — the big-artwork illustrated step cards.
+ *
+ * The "what do I physically do now?" surface for hardware-adjacent flows
+ * (upstreamed from the flasher's 等待上线 step and wowsp's install
+ * walkthrough, user direction 2026-09-25): every step is a rounded card —
+ * large artwork on the face, a short title and a one-line description
+ * under it, the ordinal badge pinned to the card's outer top corner.
+ *
+ * Orientation follows the AVAILABLE WIDTH, not the viewport: the guide is
+ * its own container query root, so wide hosts lay the cards side by side
+ * with a chevron bridging consecutive steps, and only stack them
+ * vertically once the width runs out. `layout="grid"` instead wraps the
+ * cards as an auto-fill grid.
+ *
+ * The artwork slots are deliberately permissive: pass a Vue component
+ * (`icon: MySvg`) for crisp theme-aware SVGs, or `image: url` for
+ * photos/screenshots the docs pipeline produces. Steps may be marked
+ * `data-done` through the `doneIds` prop (the check replaces the ordinal,
+ * the card picks up a success edge) so the guide doubles as a checklist
+ * while the flow progresses.
+ */
+export default defineComponent({
+  name: "HkStepGuide",
+  props: {
+    items: { type: Array as PropType<StepGuideItem[]>, required: true },
+    /** Steps whose ids appear here render as completed (check, success edge). */
+    doneIds: { type: Array as PropType<string[]>, default: () => [] },
+    /** Width-responsive flow cards (default) or an auto-fill card grid. */
+    layout: { type: String as PropType<"list" | "grid">, default: "list" },
+    /** Section heading above the steps. */
+    title: { type: String, default: undefined },
+  },
+  setup(props) {
+    return () => {
+      if (!props.items.length) return null;
+      const done = new Set(props.doneIds);
+      return (
+        <div class="hk-step-guide" data-layout={props.layout}>
+          {props.title && <h4 class="hk-step-guide-title">{props.title}</h4>}
+          <ol class="hk-step-guide-list">
+            {props.items.map((item, idx) => {
+              const isDone = done.has(item.id);
+              const Art = item.icon;
+              const alt = item.alt ?? item.title;
+              return (
+                <li
+                  key={item.id}
+                  class="hk-step-guide-item"
+                  data-done={isDone || undefined}
+                >
+                  <span class="hk-step-guide-ordinal">
+                    {isDone ? (
+                      <svg
+                        class="hk-step-guide-check"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M20 6L9 17l-5-5"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="3"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    ) : (
+                      idx + 1
+                    )}
+                  </span>
+                  <span
+                    class="hk-step-guide-art"
+                    aria-hidden={Art || item.image ? undefined : true}
+                  >
+                    {Art ? (
+                      h(Art, { class: "hk-step-guide-art-svg" })
+                    ) : item.image ? (
+                      <img
+                        class="hk-step-guide-art-img"
+                        src={item.image}
+                        alt={alt}
+                        draggable={false}
+                      />
+                    ) : null}
+                  </span>
+                  <span class="hk-step-guide-body">
+                    <span class="hk-step-guide-item-title">{item.title}</span>
+                    {item.description && (
+                      <span class="hk-step-guide-item-desc">
+                        {item.description}
+                      </span>
+                    )}
+                  </span>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+      );
+    };
+  },
+});

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "إعادة تعيين التكبير",
     "hikari::zoomToolbar.zoomIn": "تكبير",
     "hikari::zoomToolbar.zoomOut": "تصغير",
-    "hikari::zoomToolbar.zoomSlider": "مستوى التكبير"
+    "hikari::zoomToolbar.zoomSlider": "مستوى التكبير",
+    "hikari::filterBar.trigger": "عوامل التصفية",
+    "hikari::filterBar.apply": "تطبيق",
+    "hikari::filterBar.reset": "إعادة تعيين"
   },
   "hikari::affixPicker.unset": "غير محدد",
   "hikari::affixPicker.title": "الخيارات",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "Zoom zurücksetzen",
     "hikari::zoomToolbar.zoomIn": "Vergrößern",
     "hikari::zoomToolbar.zoomOut": "Verkleinern",
-    "hikari::zoomToolbar.zoomSlider": "Zoom-Stufe"
+    "hikari::zoomToolbar.zoomSlider": "Zoom-Stufe",
+    "hikari::filterBar.trigger": "Filter",
+    "hikari::filterBar.apply": "Anwenden",
+    "hikari::filterBar.reset": "Zurücksetzen"
   },
   "hikari::affixPicker.unset": "Nicht festgelegt",
   "hikari::affixPicker.title": "Optionen",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "Reset zoom",
     "hikari::zoomToolbar.zoomIn": "Zoom in",
     "hikari::zoomToolbar.zoomOut": "Zoom out",
-    "hikari::zoomToolbar.zoomSlider": "Zoom level"
+    "hikari::zoomToolbar.zoomSlider": "Zoom level",
+    "hikari::filterBar.trigger": "Filters",
+    "hikari::filterBar.apply": "Apply",
+    "hikari::filterBar.reset": "Reset"
   },
   "hikari::affixPicker.title": "Options",
   "hikari::affixPicker.search": "Search",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "Restablecer zoom",
     "hikari::zoomToolbar.zoomIn": "Acercar",
     "hikari::zoomToolbar.zoomOut": "Alejar",
-    "hikari::zoomToolbar.zoomSlider": "Nivel de zoom"
+    "hikari::zoomToolbar.zoomSlider": "Nivel de zoom",
+    "hikari::filterBar.trigger": "Filtros",
+    "hikari::filterBar.apply": "Aplicar",
+    "hikari::filterBar.reset": "Restablecer"
   },
   "hikari::affixPicker.unset": "Sin establecer",
   "hikari::affixPicker.title": "Opciones",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "Réinitialiser le zoom",
     "hikari::zoomToolbar.zoomIn": "Agrandir",
     "hikari::zoomToolbar.zoomOut": "Réduire",
-    "hikari::zoomToolbar.zoomSlider": "Niveau de zoom"
+    "hikari::zoomToolbar.zoomSlider": "Niveau de zoom",
+    "hikari::filterBar.trigger": "Filtres",
+    "hikari::filterBar.apply": "Appliquer",
+    "hikari::filterBar.reset": "Réinitialiser"
   },
   "hikari::affixPicker.unset": "Non défini",
   "hikari::affixPicker.title": "Options",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "ズームをリセット",
     "hikari::zoomToolbar.zoomIn": "拡大",
     "hikari::zoomToolbar.zoomOut": "縮小",
-    "hikari::zoomToolbar.zoomSlider": "ズーム倍率"
+    "hikari::zoomToolbar.zoomSlider": "ズーム倍率",
+    "hikari::filterBar.trigger": "絞り込み",
+    "hikari::filterBar.apply": "適用",
+    "hikari::filterBar.reset": "リセット"
   },
   "hikari::affixPicker.unset": "未設定",
   "hikari::affixPicker.title": "オプション",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "줌 초기화",
     "hikari::zoomToolbar.zoomIn": "확대",
     "hikari::zoomToolbar.zoomOut": "축소",
-    "hikari::zoomToolbar.zoomSlider": "확대 수준"
+    "hikari::zoomToolbar.zoomSlider": "확대 수준",
+    "hikari::filterBar.trigger": "필터",
+    "hikari::filterBar.apply": "적용",
+    "hikari::filterBar.reset": "초기화"
   },
   "hikari::affixPicker.unset": "미설정",
   "hikari::affixPicker.title": "옵션",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "Redefinir zoom",
     "hikari::zoomToolbar.zoomIn": "Ampliar",
     "hikari::zoomToolbar.zoomOut": "Reduzir",
-    "hikari::zoomToolbar.zoomSlider": "Nível de zoom"
+    "hikari::zoomToolbar.zoomSlider": "Nível de zoom",
+    "hikari::filterBar.trigger": "Filtros",
+    "hikari::filterBar.apply": "Aplicar",
+    "hikari::filterBar.reset": "Redefinir"
   },
   "hikari::affixPicker.unset": "Não definido",
   "hikari::affixPicker.title": "Opções",

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

@@ -189,7 +189,10 @@
     "hikari::zoomToolbar.reset": "Сбросить масштаб",
     "hikari::zoomToolbar.zoomIn": "Увеличить",
     "hikari::zoomToolbar.zoomOut": "Уменьшить",
-    "hikari::zoomToolbar.zoomSlider": "Уровень масштаба"
+    "hikari::zoomToolbar.zoomSlider": "Уровень масштаба",
+    "hikari::filterBar.trigger": "Фильтры",
+    "hikari::filterBar.apply": "Применить",
+    "hikari::filterBar.reset": "Сбросить"
   },
   "hikari::affixPicker.unset": "Не задано",
   "hikari::affixPicker.title": "Параметры",

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

@@ -193,7 +193,10 @@
     "hikari::statusBar.region.CN": "中国大陆",
     "hikari::statusBar.region.HK": "中国香港",
     "hikari::statusBar.region.MO": "中国澳门",
-    "hikari::statusBar.region.TW": "中国台湾"
+    "hikari::statusBar.region.TW": "中国台湾",
+    "hikari::filterBar.trigger": "筛选",
+    "hikari::filterBar.apply": "应用",
+    "hikari::filterBar.reset": "重置"
   },
   "hikari::affixPicker.title": "选项",
   "hikari::affixPicker.search": "搜索",

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

@@ -193,7 +193,10 @@
     "hikari::statusBar.region.CN": "中國大陸",
     "hikari::statusBar.region.HK": "中國香港",
     "hikari::statusBar.region.MO": "中國澳門",
-    "hikari::statusBar.region.TW": "中國台灣"
+    "hikari::statusBar.region.TW": "中國台灣",
+    "hikari::filterBar.trigger": "篩選",
+    "hikari::filterBar.apply": "套用",
+    "hikari::filterBar.reset": "重設"
   },
   "hikari::affixPicker.title": "選項",
   "hikari::affixPicker.search": "搜尋",

package/src/index.ts

@@ -25,6 +25,8 @@ export {
 } from "./components/HkDockBar";
 export { default as HDrawer } from "./components/HkDrawer";
 export { default as HEmptyState } from "./components/HkEmptyState";
+export { default as HStepGuide } from "./components/HkStepGuide";
+export type { StepGuideItem } from "./components/HkStepGuide";
 export { default as HExpansionPanel } from "./components/HkExpansionPanel";
 export { default as HFab, type HFabAction } from "./components/HkFab";
 export { default as HIcon } from "./components/HkIcon";
@@ -492,7 +494,7 @@ export type { ChallengeDescriptor } from "./utils/powNonce";
 export { HkAdminTablePage as HAdminTablePage } from "./components/HkAdminTablePage";
 export type { HTableColumn } from "./components/HkAdminTablePage";
 export { HkPageHeader as HPageHeader } from "./components/HkPageHeader";
-export { HkStatCard as HStatCard, type StatTone } from "./components/HkStatCard";
+export { HkStatCard as HStatCard } from "./components/HkStatCard";
 export { HkStatusPill as HStatusPill, type PillState } from "./components/HkStatusPill";
 export { HkShareBar as HShareBar } from "./components/HkShareBar";
 export { HkSecretRevealModal as HSecretRevealModal } from "./components/HkSecretRevealModal";
@@ -749,7 +751,10 @@ export { HkLocalePicker as HkLocalePicker } from "./components/HkLocalePicker";
 export { HkAdminTablePage as HkAdminTablePage } from "./components/HkAdminTablePage";
 export { HkPageHeader as HkPageHeader } from "./components/HkPageHeader";
 export { HkStatCard as HkStatCard } from "./components/HkStatCard";
+export { statToneColor, type StatTone as StatTone, type StatVariant as StatVariant } from "./components/HkStatCard";
 export { HkStatusPill as HkStatusPill } from "./components/HkStatusPill";
+export { default as HkFilterBar } from "./components/HkFilterBar";
+export { default as HFilterBar } from "./components/HkFilterBar";
 export { HkShareBar as HkShareBar } from "./components/HkShareBar";
 export { HkSecretRevealModal as HkSecretRevealModal } from "./components/HkSecretRevealModal";
 export { HkCaptchaWidget as HkCaptchaWidget } from "./components/HkCaptchaWidget";

package/src/styles/admin-tokens.scss

@@ -1040,3 +1040,24 @@
 .a-auth-page {
   min-height: calc(100vh - var(--s-footer-height, 3rem));
 }
+
+// ── adjacent-button spacing (the button-row grammar) ──────────────────────
+// EVERY horizontal run of buttons keeps a visible gap between neighbours —
+// two buttons touching reads as one split control (user direction
+// 2026-09-25). Hosts wrap their button clusters in .hk-button-row and get
+// the house rhythm; modal footers and step docks already carry their own
+// gap on the same token, so everything agrees.
+.hk-button-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-12, 0.75rem);
+
+  &[data-compact] {
+    gap: var(--space-8, 0.5rem);
+  }
+
+  &[data-end] {
+    justify-content: flex-end;
+  }
+}