@celestia-island/hikari 0.55.183 → 0.55.185

package/package.json

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

package/src/components/HkDraggableList.scss

@@ -108,6 +108,23 @@
   }
 }
 
+/* The per-row actions lane: renders only when the host supplies the
+ * `actions` slot (render-side guard), as a SIBLING of the content lane
+ * inside the row's flex layout — never a child of it, so the content
+ * lane's `> :only-child` fill above keeps stretching single-root rows
+ * even when actions ride along. Pinning is structural: the content lane
+ * keeps flex: 1 and this lane only refuses to shrink, so the actions
+ * land on the row's far edge — no margin-left:auto patch (it would
+ * paper over a content-lane regression instead of letting the fill rule
+ * fail loudly) and no directional property, so the lane follows the
+ * row's inline direction under RTL too. */
+.hk-draggable-list-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  flex-shrink: 0;
+}
+
 .hk-draggable-list-ghost {
   position: fixed;
   top: 0;

package/src/components/HkDraggableList.styles.test.ts

@@ -81,3 +81,30 @@ describe("HkDraggableList content-lane fill sheet", () => {
     expect(fillRules[0]).toContain(":only-child");
   });
 });
+
+describe("HkDraggableList actions-lane sheet", () => {
+  const css = listCss();
+
+  it("keeps the actions lane fixed at its natural width", () => {
+    const body = ruleBody(css, ".hk-draggable-list-actions");
+    expect(body, "the actions-lane rule must exist").not.toBeNull();
+    expect(body).toContain("display: flex");
+    expect(body).toContain("align-items: center");
+    expect(body).toContain("flex-shrink: 0");
+    // Multiple host buttons in one lane need the lane's own gap so they
+    // never fuse into one cluster against the row edge.
+    expect(body).toContain("gap:");
+  });
+
+  // The right-edge pinning is STRUCTURAL, not a margin patch: the item
+  // row is a flex row and the content lane keeps flex: 1, so the lane
+  // needs nothing beyond shrink-resistance. A margin-left: auto here
+  // would paper over a future content-lane regression instead of
+  // letting the fill sheet fail loudly — pin by ownership, not by patch.
+  it("pins by the content lane's flex: 1, not a margin patch", () => {
+    const body = ruleBody(css, ".hk-draggable-list-actions");
+    expect(body).not.toContain("margin-left: auto");
+    const content = ruleBody(css, ".hk-draggable-list-content");
+    expect(content).toContain("flex: 1");
+  });
+});

package/src/components/HkDraggableList.test.tsx

@@ -390,3 +390,138 @@ describe("HkDraggableList press ergonomics (clickable rows)", () => {
     }
   });
 });
+
+describe("HkDraggableList actions lane", () => {
+  /** The standard row-actions contract: hosts inject trailing buttons
+   *  through the scoped `actions` slot instead of hand-rolling
+   *  ml-auto/flex-1 spacers inside the row content (chest's pricing
+   *  ladder shipped exactly such a hand-rolled group and its buttons
+   *  hugged the row's text mid-card). The lane renders as a SIBLING of
+   *  the content lane — never inside it — so the content sheet's
+   *  `> :only-child` fill keeps matching single-root rows even when
+   *  actions ride along (sheet twin: HkDraggableList.styles.test.ts). */
+
+  function mountWithActions(items: { key: string }[], opts?: { lockedKeys?: string[] }): HTMLElement {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(
+          HDraggableList,
+          { items, lockedKeys: opts?.lockedKeys ?? [] },
+          {
+            item: ({ item }: { item: { key: string } }) =>
+              h("span", { class: "row-body" }, item.key),
+            actions: ({
+              item,
+              index,
+              locked,
+            }: {
+              item: { key: string };
+              index: number;
+              locked: boolean;
+            }) =>
+              h("span", {
+                class: "row-actions",
+                "data-key": item.key,
+                "data-index": index,
+                "data-locked": locked,
+              }),
+          },
+        ),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container.querySelector(".hk-draggable-list") as HTMLElement;
+  }
+
+  it("renders a right-lane sibling per row only when the slot is provided", () => {
+    const root = mountWithActions([{ key: "a" }, { key: "b" }]);
+
+    const lanes = Array.from(root.querySelectorAll(".hk-draggable-list-actions"));
+    expect(lanes).toHaveLength(2);
+    for (const lane of lanes) {
+      // Sibling of the content lane, not a child of it — the :only-child
+      // fill contract above must keep matching the row body.
+      expect(lane.closest(".hk-draggable-list-content")).toBeNull();
+      expect(lane.previousElementSibling?.classList.contains("hk-draggable-list-content")).toBe(
+        true,
+      );
+    }
+  });
+
+  it("keeps the content lane's :only-child fill intact alongside the lane", () => {
+    const root = mountWithActions([{ key: "a" }]);
+
+    const content = root.querySelector(".hk-draggable-list-content") as HTMLElement;
+    const elementChildren = Array.from(content.children);
+    expect(elementChildren).toHaveLength(1);
+    expect(elementChildren[0]!.classList.contains("row-body")).toBe(true);
+  });
+
+  it("scopes the slot with item, index, and locked-ness", () => {
+    const root = mountWithActions([{ key: "a" }, { key: "b" }], { lockedKeys: ["b"] });
+
+    const marks = Array.from(root.querySelectorAll(".row-actions")) as HTMLElement[];
+    expect(marks).toHaveLength(2);
+    expect(marks.map((m) => `${m.dataset.key}:${m.dataset.index}:${m.dataset.locked}`).join(",")).toBe(
+      "a:0:false,b:1:true",
+    );
+  });
+
+  it("renders no lane for hosts that do not adopt the slot", () => {
+    const root = mountList(["a"], []);
+
+    expect(root.querySelectorAll(".hk-draggable-list-actions")).toHaveLength(0);
+  });
+
+  it("keeps a press on a lane button from arming a drag — the handle still drags", async () => {
+    /** The lane exists to host buttons, so the row's interactive-content
+     *  exclusion (button, a, input, textarea, select, [contenteditable])
+     *  must own every press that starts on one — and a lane FULL of
+     *  buttons must leave the handle's drag path untouched. */
+    const PointerEventCtor: typeof MouseEvent =
+      (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+    const fire = (el: Element, type: string, x = 0, y = 0) =>
+      el.dispatchEvent(
+        new PointerEventCtor(type, { bubbles: true, cancelable: true, button: 0, clientX: x, clientY: y }),
+      );
+    const fireWin = (type: string, x = 0, y = 0) =>
+      window.dispatchEvent(new PointerEventCtor(type, { bubbles: true, cancelable: true, clientX: x, clientY: y }));
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HDraggableList, { items: [{ key: "a" }] }, {
+          item: ({ item }: { item: { key: string } }) => h("span", { class: "row-body" }, item.key),
+          actions: () => [
+            h("button", { class: "lane-button", type: "button" }, "✏"),
+            h("button", { class: "lane-button", type: "button" }, "⋯"),
+          ],
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    const root = container.querySelector(".hk-draggable-list") as HTMLElement;
+    const row = root.querySelector(".hk-draggable-list-item") as HTMLElement;
+    const button = row.querySelector(".lane-button") as HTMLElement;
+    const handle = row.querySelector(".hk-draggable-list-handle") as HTMLElement;
+
+    // Press ON the button (target = button, bubbling to the row) and
+    // travel far past the arm threshold: no drag may publish.
+    fire(button, "pointerdown", 10, 10);
+    fireWin("pointermove", 30, 40);
+    await nextTick();
+    expect(row.hasAttribute("data-dragging")).toBe(false);
+
+    // The same gesture on the handle still arms — a button-filled lane
+    // never breaks the drag path.
+    fire(handle, "pointerdown", 10, 10);
+    fireWin("pointermove", 30, 40);
+    await nextTick();
+    expect(row.getAttribute("data-dragging")).not.toBeNull();
+
+    fireWin("pointerup");
+  });
+});

package/src/components/HkDraggableList.tsx

@@ -334,6 +334,19 @@ export default defineComponent({
                 <div class="hk-draggable-list-content">
                   {slots.item?.({ item, index, locked })}
                 </div>
+                {/* The standard row-actions lane: when the host provides
+                 * an `actions` slot, every row renders this right-pinned
+                 * lane (the content lane keeps flex: 1, so the buttons
+                 * land on the row's far edge structurally — hosts stop
+                 * hand-rolling ml-auto/flex-1 spacers). The lane is
+                 * host-decided content: locked rows may still carry
+                 * actions (chest's pricing ladder), so locked-ness is
+                 * only reported through the slot scope. */}
+                {slots.actions ? (
+                  <div class="hk-draggable-list-actions">
+                    {slots.actions({ item, index, locked })}
+                  </div>
+                ) : null}
               </div>
             );
           })}

package/src/components/HkQuote.scss

@@ -0,0 +1,98 @@
+/* HkQuote — the Markdown-blockquote-style info block.
+ *
+ * Two layers: the OUTER box (`.hk-quote`) only positions the block
+ * (centered in its host for fit="fill", a capped centered column for
+ * fit="page"); the INNER mark (`.hk-quote-mark`) is the blockquote
+ * itself — the 3px accent bar on the inline-start edge plus quiet
+ * prose, sized to its content like a real Markdown `>` quote. No
+ * surface of its own (no background, no radius, no shadow): the bar IS
+ * the visual. The tone class only selects the bar color; text colors
+ * stay in the standard primary/secondary text slots for every tone. */
+
+.hk-quote {
+  --hk-quote-bar: var(--hi-color-primary, #7aa2f7);
+
+  display: flex;
+  box-sizing: border-box;
+}
+
+.hk-quote--neutral {
+  --hk-quote-bar: var(--hi-color-text-tertiary, #8b949e);
+}
+
+.hk-quote--danger {
+  --hk-quote-bar: var(--hi-color-danger, #f7768e);
+}
+
+.hk-quote--warning {
+  --hk-quote-bar: var(--hi-color-warning, #eed677);
+}
+
+.hk-quote--success {
+  --hk-quote-bar: var(--hi-color-success, #0eb840);
+}
+
+/* fit="fill": the quote block centers itself inside its host (an empty
+ * panel body, a split view) — the host keeps its own size, the quote
+ * floats mid-host as an info block. */
+.hk-quote--fill {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+/* fit="page": a standalone block on a page — capped width, centered
+ * horizontally, never spanning the whole column. */
+.hk-quote--page {
+  width: 100%;
+  margin-inline: auto;
+  justify-content: center;
+}
+
+@media (min-width: 48rem) {
+  .hk-quote--page {
+    max-width: clamp(20rem, 30vw, 35rem);
+  }
+}
+
+.hk-quote-mark {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-8, 0.5rem);
+  padding: 0.5rem 0.875rem;
+  border-inline-start: 3px solid var(--hk-quote-bar);
+  text-align: start;
+  max-width: 100%;
+}
+
+.hk-quote-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 0.25rem);
+  max-width: 100%;
+}
+
+.hk-quote-title {
+  margin: 0;
+  font-size: var(--text-base, 0.875rem);
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--hi-color-text-primary, #1e1e1e);
+}
+
+.hk-quote-desc {
+  margin: 0;
+  font-size: var(--text-sm, 0.8125rem);
+  line-height: 1.55;
+  color: var(--hi-color-text-secondary, #666666);
+  max-width: 36rem;
+}
+
+.hk-quote-action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+}

package/src/components/HkQuote.test.tsx

@@ -0,0 +1,131 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, type VNode } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkQuote from "./HkQuote";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(renderNode: () => VNode) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: renderNode });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+/**
+ * HkQuote is the Markdown-blockquote grammar as a component: an accent
+ * bar on the inline-start edge (tone-colored), quiet prose, NO card
+ * chrome — no icon, no background, no boxed surface (user direction
+ * 2026-10-18: the no-content/error states must read as a quoted info
+ * block with a primary-color left bar, not an icon card).
+ */
+describe("HkQuote", () => {
+  it("renders the quoted title and description inside a note region", () => {
+    const c = mount(() =>
+      h(HkQuote, {
+        title: "This panel has no content yet",
+        description: "Configure the data source, or let the agent generate content.",
+      }),
+    );
+    const root = c.querySelector(".hk-quote")!;
+    expect(root.getAttribute("role")).toBe("note");
+    expect(c.querySelector(".hk-quote-title")!.textContent).toBe("This panel has no content yet");
+    expect(c.querySelector(".hk-quote-desc")!.textContent).toContain("Configure the data source");
+  });
+
+  it("defaults to the primary tone and fill fit; every tone has a class", () => {
+    const c = mount(() => h(HkQuote, { title: "t" }));
+    const root = c.querySelector(".hk-quote")!;
+    expect(root.classList.contains("hk-quote--primary")).toBe(true);
+    expect(root.classList.contains("hk-quote--fill")).toBe(true);
+
+    for (const tone of ["neutral", "danger", "warning", "success"] as const) {
+      const toneRoot = mount(() => h(HkQuote, { title: "t", tone })).querySelector(".hk-quote")!;
+      expect(toneRoot.classList.contains(`hk-quote--${tone}`)).toBe(true);
+    }
+  });
+
+  it("centers itself for fill and renders a width-capped page block for page", () => {
+    const fill = mount(() => h(HkQuote, { title: "t" })).querySelector(".hk-quote")!;
+    expect(fill.classList.contains("hk-quote--fill")).toBe(true);
+    const page = mount(() => h(HkQuote, { title: "t", fit: "page" })).querySelector(".hk-quote")!;
+    expect(page.classList.contains("hk-quote--page")).toBe(true);
+  });
+
+  it("renders the action row and the default body slot", () => {
+    const c = mount(() =>
+      h(HkQuote, { title: "t" }, {
+        default: () => h("p", { class: "extra" }, "extra line"),
+        action: () => h("button", { type: "button" }, "Edit panel"),
+      }),
+    );
+    expect(c.querySelector(".hk-quote-body .extra")!.textContent).toBe("extra line");
+    const action = c.querySelector<HTMLButtonElement>(".hk-quote-action button")!;
+    expect(action.textContent).toBe("Edit panel");
+    // The action row is a SIBLING of the body inside the mark (pinned:
+    // nesting it would halve the desc→action gap to the body's --space-4).
+    expect(action.closest(".hk-quote-body")).toBeNull();
+    expect(action.closest(".hk-quote-mark")).not.toBeNull();
+  });
+
+  it("passes call-site classes onto the root (no card chrome of its own)", () => {
+    const c = mount(() => h(HkQuote, { title: "t", class: "host-skin" }));
+    const root = c.querySelector(".hk-quote")!;
+    expect(root.classList.contains("host-skin")).toBe(true);
+    // The mark is the blockquote itself — the component adds no icon,
+    // no boxed surface of its own (see the styles contract below).
+    expect(c.querySelector(".hk-empty-icon")).toBeNull();
+    expect(c.querySelector("svg")).toBeNull();
+  });
+
+  it("lets the call site override the role (error tones announce as alert)", () => {
+    // Consumers rendering an error quote pass role="alert" — Vue's attr
+    // fallthrough must win over the rendered default (pinned because the
+    // chest error-state story depends on it).
+    const c = mount(() => h(HkQuote, { title: "Couldn't load", role: "alert" }));
+    expect(c.querySelector(".hk-quote")!.getAttribute("role")).toBe("alert");
+  });
+});
+
+/** The visual grammar contract: the bar IS the visual. The mark carries
+ *  the accent bar (border-inline-start, tone variable); it must NOT
+ *  paint a background, border-radius, or shadow — anything card-like
+ *  would turn the quote back into the placeholder card the component
+ *  exists to replace. */
+describe("HkQuote styles contract", () => {
+  const scss = readFileSync(join(here, "HkQuote.scss"), "utf8");
+
+  it("draws the accent bar with the tone variable on the mark", () => {
+    expect(scss).toMatch(/\.hk-quote-mark[\s\S]*?border-inline-start:\s*3px solid var\(--hk-quote-bar\)/);
+    expect(scss).toMatch(/--hk-quote-bar:\s*var\(--hi-color-primary/);
+  });
+
+  it("maps every tone class onto a house color token", () => {
+    expect(scss).toMatch(/hk-quote--neutral[\s\S]*?--hi-color-text-tertiary/);
+    expect(scss).toMatch(/hk-quote--danger[\s\S]*?--hi-color-danger/);
+    expect(scss).toMatch(/hk-quote--warning[\s\S]*?--hi-color-warning/);
+    expect(scss).toMatch(/hk-quote--success[\s\S]*?--hi-color-success/);
+  });
+
+  it("ships no card chrome on the mark (no background / radius / shadow)", () => {
+    const markBlock = scss.match(/\.hk-quote-mark \{[\s\S]*?\n\}/)?.[0] ?? "";
+    expect(markBlock, "the .hk-quote-mark rule exists").toMatch(/^\./);
+    expect(markBlock).not.toMatch(/background/);
+    expect(markBlock).not.toMatch(/border-radius/);
+    expect(markBlock).not.toMatch(/box-shadow/);
+  });
+});

package/src/components/HkQuote.tsx

@@ -0,0 +1,85 @@
+import { defineComponent, type PropType } from "vue";
+
+import "./HkQuote.scss";
+
+/** The tone grammar of the quote's accent bar. */
+export type HkQuoteTone = "primary" | "neutral" | "danger" | "warning" | "success";
+
+/**
+ * HkQuote — the Markdown-blockquote-style info block.
+ *
+ * The house grammar for "this surface has something to SAY, not
+ * something to show": a vertical accent bar in the tone color on the
+ * inline-start edge, the message set as quoted prose beside it — the
+ * same visual language a Markdown `>` blockquote renders with, promoted
+ * to a first-class component with tone and centering. The bar hugs the
+ * prose (the block sizes to its content, like a real blockquote); the
+ * OUTER box centers that block inside the host.
+ *
+ * Deliberately NOT an empty-state card: there is no icon, no boxed
+ * surface, no chrome of its own — hosts that want the message centered
+ * in an otherwise empty body pass `fit="fill"` (the block centers
+ * itself in the host) or `fit="page"` (a standalone, width-capped,
+ * horizontally centered block). The optional `action` slot renders a
+ * quiet row of buttons under the prose (e.g. "Edit panel", "Retry") —
+ * affordances belong to the host's story, never chrome bolted onto the
+ * quote.
+ *
+ * ```tsx
+ * // A panel that was never generated: quote it, don't card it.
+ * <HkQuote tone="primary" fit="fill"
+ *   title={t("viewPanel.empty.panelNoContent")}
+ *   description={t("viewPanel.empty.panelNoContentDesc")}>
+ *   {{ action: () => <HkButton size="sm" onClick={edit}>Edit panel</HkButton> }}
+ * </HkQuote>
+ * ```
+ *
+ * A11y: the block is a `role="note"` region by default; pass
+ * `role="alert"` (or any other attrs) from the call site for error
+ * tones — attrs land on the root element.
+ */
+export default defineComponent({
+  name: "HkQuote",
+  props: {
+    /** Lead line — the quoted statement itself. Bold, primary text. */
+    title: { type: String, default: undefined },
+    /** Follow-up prose — context or the way out. Muted, smaller. */
+    description: { type: String, default: undefined },
+    /** The accent bar's color grammar. Default: the primary tone. */
+    tone: {
+      type: String as PropType<HkQuoteTone>,
+      default: "primary",
+    },
+    /** page = standalone, centered, width-capped block; fill = the
+     *  block centers itself inside its host (panels, split views). */
+    fit: {
+      type: String as PropType<"page" | "fill">,
+      default: "fill",
+    },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div
+        class={[
+          "hk-quote",
+          `hk-quote--${props.tone}`,
+          props.fit === "fill" ? "hk-quote--fill" : "hk-quote--page",
+        ]}
+        role="note"
+      >
+        <div class="hk-quote-mark">
+          <div class="hk-quote-body">
+            {props.title ? <p class="hk-quote-title">{props.title}</p> : null}
+            {props.description ? (
+              <p class="hk-quote-desc">{props.description}</p>
+            ) : null}
+            {slots.default?.()}
+          </div>
+          {slots.action ? (
+            <div class="hk-quote-action">{slots.action()}</div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+});

package/src/index.ts

@@ -54,6 +54,7 @@ export { default as HPhaseTransition } from "./components/HkPhaseTransition";
 export { default as HGaugeRing } from "./components/HkGaugeRing";
 export { default as HProgressRing } from "./components/HkProgressRing";
 export { default as HQrCode } from "./components/HkQrCode";
+export { default as HQuote, type HkQuoteTone as HQuoteTone } from "./components/HkQuote";
 export { default as HRollingNumber } from "./components/HkRollingNumber";
 export { default as HLocalePickerPopup } from "./components/HkLocalePickerPopup";
 export { default as HHoverRevealAction } from "./components/HkHoverRevealAction";
@@ -641,6 +642,8 @@ export { default as HkPhaseTransition } from "./components/HkPhaseTransition";
 export { default as HkGaugeRing } from "./components/HkGaugeRing";
 export { default as HkProgressRing } from "./components/HkProgressRing";
 export { default as HkQrCode } from "./components/HkQrCode";
+export { default as HkQuote } from "./components/HkQuote";
+export type { HkQuoteTone } from "./components/HkQuote";
 export { default as HkRollingNumber } from "./components/HkRollingNumber";
 export { default as HkLocalePickerPopup } from "./components/HkLocalePickerPopup";
 export { default as HkHoverRevealAction } from "./components/HkHoverRevealAction";