@celestia-island/hikari 0.55.183 → 0.55.184

package/package.json

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

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";