@celestia-island/hikari 0.36.0 → 0.37.0

package/package.json

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

package/src/components/HkErrorLanding.scss

@@ -0,0 +1,179 @@
+// HkErrorLanding — shared error landing page.
+//
+// Token strategy: every color reads the host's RGB-triplet theme vars and
+// falls back to a neutral light scheme, so the component renders correctly
+// standalone (server error page without hikari theme init) and adapts to
+// host themes (dark mode etc.) when the vars exist.
+
+.hk-error-landing {
+  --hel-background: var(--color-background, 246 247 249);
+  --hel-surface: var(--color-surface, 255 255 255);
+  --hel-text: var(--color-text, 30 32 36);
+  --hel-muted: var(--color-muted, 118 122 128);
+  --hel-border: var(--color-border, 222 224 228);
+  --hel-primary: var(--color-primary, 58 118 236);
+  --hel-error: var(--color-error, 226 84 84);
+  --hel-warning: var(--color-warning, 222 168 62);
+
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-20, 1.25rem);
+  background: rgb(var(--hel-background));
+  color: rgb(var(--hel-text));
+  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+}
+
+.hk-error-landing__card {
+  width: min(430px, 100%);
+  background: rgb(var(--hel-surface));
+  border: 1px solid rgb(var(--hel-border) / 70%);
+  border-radius: var(--radius-lg, 16px);
+  box-shadow: var(--shadow-lg, 0 18px 48px rgb(0 0 0 / 8%));
+  padding: 2rem 1.75rem;
+  text-align: center;
+}
+
+.hk-error-landing__brand {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--space-16, 1rem);
+
+  &:empty {
+    display: none;
+  }
+}
+
+.hk-error-landing__icon {
+  width: 58px;
+  height: 58px;
+  margin: 0 auto var(--space-16, 1rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+
+  &,
+  svg {
+    color: rgb(var(--hel-error));
+  }
+
+  background: rgb(var(--hel-error) / 12%);
+  border: 1px solid rgb(var(--hel-error) / 22%);
+}
+
+.hk-error-landing.is-warning .hk-error-landing__icon {
+  &,
+  svg {
+    color: rgb(var(--hel-warning));
+  }
+
+  background: rgb(var(--hel-warning) / 12%);
+  border-color: rgb(var(--hel-warning) / 24%);
+}
+
+.hk-error-landing.is-info .hk-error-landing__icon {
+  &,
+  svg {
+    color: rgb(var(--hel-primary));
+  }
+
+  background: rgb(var(--hel-primary) / 10%);
+  border-color: rgb(var(--hel-primary) / 20%);
+}
+
+.hk-error-landing__title {
+  margin: 0;
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 600;
+  line-height: 1.35;
+  color: rgb(var(--hel-text));
+}
+
+.hk-error-landing__desc {
+  margin: var(--space-8, 0.5rem) 0 0;
+  font-size: var(--text-sm, 0.8125rem);
+  line-height: 1.6;
+  color: rgb(var(--hel-muted));
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+.hk-error-landing__meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--space-6, 0.375rem);
+  margin-top: var(--space-10, 0.625rem);
+}
+
+.hk-error-landing__code {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--hel-muted));
+  background: rgb(var(--hel-muted) / 8%);
+  border: 1px solid rgb(var(--hel-border) / 80%);
+  border-radius: var(--radius-sm, 4px);
+  padding: 0.1em 0.55em;
+  overflow-wrap: anywhere;
+}
+
+.hk-error-landing__status {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--hel-muted));
+  border: 1px dashed rgb(var(--hel-border));
+  border-radius: var(--radius-sm, 4px);
+  padding: 0.1em 0.55em;
+}
+
+.hk-error-landing__details {
+  margin-top: var(--space-16, 1rem);
+  text-align: left;
+}
+
+.hk-error-landing__details-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  background: transparent;
+  padding: 2px 4px;
+  font: inherit;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--hel-muted));
+  cursor: pointer;
+  border-radius: var(--radius-xs, 4px);
+
+  &:hover {
+    color: rgb(var(--hel-text));
+    background: rgb(var(--hel-muted) / 8%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--hel-primary) / 60%);
+    outline-offset: 1px;
+  }
+}
+
+.hk-error-landing__details-body {
+  margin-top: var(--space-6, 0.375rem);
+}
+
+.hk-error-landing__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--space-8, 0.5rem);
+  margin-top: var(--space-16, 1rem);
+}
+
+@media (max-width: 480px) {
+  .hk-error-landing__card {
+    padding: 1.5rem 1.125rem;
+  }
+}

package/src/components/HkErrorLanding.test.tsx

@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HkErrorLanding } from "./HkErrorLanding";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+interface MountOptions {
+  title?: string;
+  description?: string;
+  code?: string;
+  status?: number;
+  tone?: "error" | "warning" | "info";
+  detailsOpen?: boolean;
+  details?: () => ReturnType<typeof h>;
+  actions?: () => ReturnType<typeof h>;
+  brand?: () => ReturnType<typeof h>;
+}
+
+function mountLanding(opts: MountOptions = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkErrorLanding, {
+        title: opts.title ?? "",
+        description: opts.description ?? "",
+        code: opts.code ?? "",
+        status: opts.status,
+        tone: opts.tone ?? "error",
+        detailsOpen: opts.detailsOpen ?? true,
+      }, {
+        ...(opts.details ? { default: opts.details } : {}),
+        ...(opts.actions ? { actions: opts.actions } : {}),
+        ...(opts.brand ? { brand: opts.brand } : {}),
+      }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts) {
+    app.unmount();
+    container.remove();
+  }
+  mounts.length = 0;
+});
+
+describe("HkErrorLanding", () => {
+  it("renders the fallback title when none is given", () => {
+    const el = mountLanding({});
+    expect(el.querySelector(".hk-error-landing__title")!.textContent).toBe("Something went wrong");
+  });
+
+  it("renders the given title, description, and meta chips", () => {
+    const el = mountLanding({ title: "OAuth failed", description: "line1\nline2", code: "unknown_provider", status: 400 });
+    expect(el.querySelector(".hk-error-landing__title")!.textContent).toBe("OAuth failed");
+    expect(el.querySelector(".hk-error-landing__code")!.textContent).toBe("unknown_provider");
+    expect(el.querySelector(".hk-error-landing__status")!.textContent).toBe("HTTP 400");
+  });
+
+  it("omits meta chips when neither code nor status is set", () => {
+    const el = mountLanding({ title: "Boom" });
+    expect(el.querySelector(".hk-error-landing__meta")).toBeNull();
+  });
+
+  it("renders the details slot with the raw JSON tree pane and toggles it", async () => {
+    const el = mountLanding({
+      details: () => h("pre", { class: "s-tool-json-tree" }, "raw"),
+    });
+    const toggle = el.querySelector<HTMLButtonElement>(".hk-error-landing__details-toggle")!;
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(el.querySelector(".hk-error-landing__details-body")).not.toBeNull();
+    toggle.click();
+    await nextTick();
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(el.querySelector(".hk-error-landing__details-body")).toBeNull();
+  });
+
+  it("keeps details collapsed when detailsOpen is false", () => {
+    const el = mountLanding({ detailsOpen: false, details: () => h("pre", {}, "raw") });
+    expect(el.querySelector(".hk-error-landing__details-body")).toBeNull();
+  });
+
+  it("renders no details section without a default slot", () => {
+    const el = mountLanding({});
+    expect(el.querySelector(".hk-error-landing__details")).toBeNull();
+  });
+
+  it("renders action and brand slots and applies the tone class", () => {
+    const el = mountLanding({
+      tone: "warning",
+      actions: () => h("button", { class: "fake-action" }, "Back"),
+      brand: () => h("div", { class: "fake-brand" }, "brand"),
+    });
+    expect(el.querySelector(".hk-error-landing")!.classList.contains("is-warning")).toBe(true);
+    expect(el.querySelector(".fake-action")).not.toBeNull();
+    expect(el.querySelector(".fake-brand")).not.toBeNull();
+  });
+});

package/src/components/HkErrorLanding.tsx

@@ -0,0 +1,92 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { ChevronDown, ChevronRight, Info, TriangleAlert } from "lucide-vue-next";
+import { useI18n } from "../i18n/context";
+
+import "./HkErrorLanding.scss";
+
+/** Visual severity of the landing icon and accents. */
+export type HErrorTone = "error" | "warning" | "info";
+
+/**
+ * HkErrorLanding — the shared full-page error landing.
+ *
+ * Login-page-like layout: a centered card over a full-viewport backdrop,
+ * carrying a tone icon, a (pre-translated) title and description, the wire
+ * error code / HTTP status as meta chips, a collapsible raw-details section
+ * (the default slot — hosts render HkJsonTree there) and an actions slot.
+ *
+ * The component is presentation-only and route-agnostic: it never touches
+ * the router and can be mounted by an SPA overlay, a modal, or a standalone
+ * server-rendered error page alike. All host-facing copy (`title`,
+ * `description`, action buttons) arrives pre-translated; the component only
+ * translates its own two labels via `hikari::errors.*`.
+ */
+export const HkErrorLanding = defineComponent({
+  name: "HkErrorLanding",
+  props: {
+    /** Pre-translated headline. Falls back to `hikari::errors.defaultTitle`. */
+    title: { type: String, default: "" },
+    /** Pre-translated secondary text; newlines render as line breaks. */
+    description: { type: String, default: "" },
+    /** Wire error code chip, e.g. `unknown_provider`. */
+    code: { type: String, default: "" },
+    /** HTTP status chip, e.g. 400. */
+    status: { type: Number, default: undefined },
+    tone: { type: String as PropType<HErrorTone>, default: "error" },
+    /** Initial expansion of the raw-details section. */
+    detailsOpen: { type: Boolean, default: true },
+  },
+  setup(props, { slots }) {
+    const { t } = useI18n();
+    const detailsExpanded = ref(props.detailsOpen);
+
+    const titleText = computed(() => props.title || t("hikari::errors.defaultTitle", "Something went wrong"));
+    const hasDetails = computed(() => slots.default != null);
+
+    function toggleDetails() {
+      detailsExpanded.value = !detailsExpanded.value;
+    }
+
+    return () => (
+      <div class={`hk-error-landing is-${props.tone}`}>
+        <div class="hk-error-landing__card">
+          {slots.brand?.()}
+
+          <div class="hk-error-landing__icon" aria-hidden="true">
+            {props.tone === "info" ? <Info size={26} /> : <TriangleAlert size={26} />}
+          </div>
+
+          <h1 class="hk-error-landing__title">{titleText.value}</h1>
+
+          {props.description && <p class="hk-error-landing__desc">{props.description}</p>}
+
+          {(props.code || props.status != null) && (
+            <div class="hk-error-landing__meta">
+              {props.code && <code class="hk-error-landing__code">{props.code}</code>}
+              {props.status != null && <span class="hk-error-landing__status">HTTP {props.status}</span>}
+            </div>
+          )}
+
+          {hasDetails.value && (
+            <div class="hk-error-landing__details">
+              <button
+                type="button"
+                class="hk-error-landing__details-toggle"
+                aria-expanded={detailsExpanded.value}
+                onClick={toggleDetails}
+              >
+                {detailsExpanded.value ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+                <span>{t("hikari::errors.rawDetails", "Raw error details")}</span>
+              </button>
+              {detailsExpanded.value && (
+                <div class="hk-error-landing__details-body">{slots.default?.()}</div>
+              )}
+            </div>
+          )}
+
+          {slots.actions && <div class="hk-error-landing__actions">{slots.actions()}</div>}
+        </div>
+      </div>
+    );
+  },
+});

package/src/components/HkJsonTree.scss

@@ -0,0 +1,161 @@
+// HkJsonTree — the interactive JSON tree pane.
+// Class names are the legacy `s-jt-*` / `s-jv-*` set shared verbatim with
+// HkToolBlock (the tree was extracted from it); hosts may target
+// `.s-tool-json-tree` for pane-level chrome such as overlay scrollbars.
+
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+
+.s-tool-json-tree {
+  --jt-toggle: 14px;
+  margin: var(--space-4, 0.25rem) 0;
+  padding: var(--space-6, 0.375rem);
+  font-family: var(--font-mono, vars.$hikari-font-family-mono);
+  font-size: var(--text-2xs, 0.625rem);
+  line-height: 1.55;
+  background: rgb(var(--color-surface) / 0.5);
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  user-select: none;
+  max-height: 320px;
+  overflow: auto;
+
+  /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
+     hidden, never styled. */
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.s-jt-row {
+  /* Baseline alignment keeps the small type hints (boolean/number/string)
+     on the value's text baseline instead of floating above it. */
+  display: flex;
+  align-items: baseline;
+  min-height: 1.55em;
+  padding: 0 var(--space-6, 0.375rem);
+  border-radius: var(--radius-xs, 2px);
+  cursor: default;
+}
+
+.s-jt-row[data-parent] {
+  cursor: pointer;
+}
+
+.s-jt-row:hover {
+  background: rgb(var(--color-primary) / 4%);
+}
+
+.s-jt-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--jt-toggle);
+  height: var(--jt-toggle);
+  flex-shrink: 0;
+  margin-right: 2px;
+  /* The toggle box has no text baseline of its own — pin it to the line
+     top instead of letting it join the row's baseline group with a
+     synthesized border-box baseline. */
+  align-self: flex-start;
+}
+
+.s-jt-toggle[data-parent] {
+  color: rgb(var(--color-muted));
+  border-radius: var(--radius-xs, 2px);
+}
+
+.s-jt-leaf {
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgb(var(--color-muted) / 25%);
+}
+
+.s-jt-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.s-jt-children {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: var(--guide-left, 11px);
+    top: 0;
+    bottom: 2px;
+    width: 1px;
+    background: var(--border-faint, rgb(var(--color-border) / 10%));
+  }
+}
+
+.s-jt-key {
+  color: rgb(var(--color-primary));
+}
+
+.s-jt-colon {
+  color: rgb(var(--color-muted));
+  margin-right: 0.35em;
+}
+
+.s-jv-null {
+  color: rgb(var(--color-muted));
+  font-style: italic;
+}
+
+.s-jv-str {
+  color: #98c379;
+  word-break: break-all;
+}
+
+.s-jv-num {
+  color: #d19a66;
+}
+
+.s-jv-bool {
+  color: #c678dd;
+}
+
+.s-jv-str-raw {
+  color: #98c379;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.s-jt-type {
+  color: rgb(var(--color-muted) / 0.6);
+  font-size: var(--text-3xs, 0.5rem);
+  font-style: italic;
+  margin-left: 0.75em;
+  font-weight: 400;
+}
+
+.s-jt-badge {
+  color: rgb(var(--color-muted));
+  font-size: var(--text-3xs, 0.5rem);
+  font-weight: 500;
+  background: rgb(var(--color-surface) / 0.6);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  border-radius: var(--radius-sm, 4px);
+  padding: 0 0.3em;
+  line-height: 1.4;
+}
+
+.s-jt-badge.is-open {
+  color: rgb(var(--color-muted));
+  background: transparent;
+  border-color: transparent;
+  font-weight: 400;
+}
+
+.s-jt-preview {
+  color: rgb(var(--color-muted));
+  font-size: var(--text-3xs, 0.5rem);
+  font-weight: 400;
+  opacity: 0.7;
+}

package/src/components/HkJsonTree.test.tsx

@@ -0,0 +1,111 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HkJsonTree, buildJsonTree, tryParseJson } from "./HkJsonTree";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountTree(props: Record<string, unknown>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => h(HkJsonTree, props) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts) {
+    app.unmount();
+    container.remove();
+  }
+  mounts.length = 0;
+});
+
+describe("tryParseJson", () => {
+  it("parses objects and arrays but rejects primitives", () => {
+    expect(tryParseJson('{"a":1}')).toEqual({ a: 1 });
+    expect(tryParseJson("[1,2]")).toEqual([1, 2]);
+    expect(tryParseJson("42")).toBeNull();
+    expect(tryParseJson('"str"')).toBeNull();
+    expect(tryParseJson("not json")).toBeNull();
+    expect(tryParseJson("")).toBeNull();
+  });
+});
+
+describe("buildJsonTree", () => {
+  it("builds nested nodes with stable unique ids", () => {
+    const root = buildJsonTree({ a: 1, b: { c: "x" } });
+    expect(root).not.toBeNull();
+    expect(root!.childCount).toBe(2);
+    expect(root!.children.map(c => c.key)).toEqual(["a", "b"]);
+    const ids = [root!.id, ...root!.children.flatMap(c => [c.id, ...c.children.map(g => g.id)])];
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it("returns null for non-containers", () => {
+    expect(buildJsonTree("text")).toBeNull();
+    expect(buildJsonTree(null)).toBeNull();
+  });
+
+  it("respects maxDepth when building children", () => {
+    const root = buildJsonTree({ a: { b: { c: 1 } } }, 1);
+    expect(root!.children[0]!.children).toHaveLength(0);
+    expect(root!.children[0]!.childCount).toBe(1);
+  });
+});
+
+describe("HkJsonTree component", () => {
+  it("renders rows for keys and primitive values from text", () => {
+    const el = mountTree({ text: '{"name":"chest","tries":3}' });
+    const rows = el.querySelectorAll(".s-jt-row");
+    expect(rows.length).toBe(3);
+    expect(el.querySelector(".s-jt-key")!.textContent).toBe("name");
+    expect(el.querySelector(".s-jv-str")!.textContent).toBe('"chest"');
+    expect(el.querySelector(".s-jv-num")!.textContent).toBe("3");
+    expect(el.querySelectorAll(".s-jt-type").length).toBeGreaterThan(0);
+  });
+
+  it("renders nothing for non-container input", () => {
+    const el = mountTree({ text: '"just a string"' });
+    expect(el.querySelector(".s-tool-json-tree")).toBeNull();
+  });
+
+  it("toggles containers open and closed on row clicks", async () => {
+    const el = mountTree({ text: '{"cfg":{"retries":2}}' });
+    // Root + first-level children start expanded: the leaf row is visible.
+    expect(el.querySelector(".s-jv-num")!.textContent).toBe("2");
+    // Collapse the root container.
+    const rootRow = el.querySelector('.s-jt-row[data-parent]')!;
+    (rootRow as HTMLElement).click();
+    await nextTick();
+    // Closed container shows the inline preview instead of children.
+    expect(el.querySelector(".s-jt-preview")).not.toBeNull();
+    expect(el.querySelector(".s-jv-num")).toBeNull();
+    // Re-open restores the child rows.
+    (rootRow as HTMLElement).click();
+    await nextTick();
+    expect(el.querySelector(".s-jv-num")!.textContent).toBe("2");
+  });
+
+  it("collapses and re-expands long strings via row clicks", async () => {
+    const long = Array.from({ length: 15 }, (_, i) => `line-${i}`).join("\n");
+    const el = mountTree({ text: JSON.stringify({ log: long }) });
+    // Direct children of the root start expanded: raw per-line rows show.
+    expect(el.querySelectorAll(".s-jv-str-raw")).toHaveLength(15);
+    // data-parent rows: [0] is the root container, [1] the long string.
+    const row = el.querySelectorAll(".s-jt-row[data-parent]")[1]!;
+    (row as HTMLElement).click();
+    await nextTick();
+    expect(el.querySelectorAll(".s-jv-str-raw")).toHaveLength(0);
+    (row as HTMLElement).click();
+    await nextTick();
+    expect(el.querySelectorAll(".s-jv-str-raw")).toHaveLength(15);
+  });
+
+  it("prefers the value prop over text", () => {
+    const el = mountTree({ value: { from: "value" }, text: '{"from":"text"}' });
+    expect(el.querySelector(".s-jt-key")!.textContent).toBe("from");
+    expect(el.querySelector(".s-jv-str")!.textContent).toBe('"value"');
+  });
+});