@celestia-island/hikari 0.55.123 → 0.55.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.123",
+  "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/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;
+}

package/src/components/HkTemplateField.test.tsx

@@ -0,0 +1,388 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, ref } from "vue";
+
+import HkTemplateField from "./HkTemplateField";
+
+/**
+ * HkTemplateField contract tests:
+ *
+ * - RENDER: modelValue renders literal runs + whole-token chips; the
+ *   chip carries the byte-exact data-raw, so a `{{name}}` that came
+ *   from storage renders styled but still serializes verbatim
+ * - CONVERT: a hand-typed `{{ word }}` (input event after a manual DOM
+ *   text append, what a real browser does between events) folds into a
+ *   chip on the next input pass, and the emitted value is byte-exact
+ * - PANEL: typing an open `{{ quer` opens the vocabulary panel; picking
+ *   a row replaces the trigger with the chip and emits the new value
+ * - CHIP EDITOR: clicking a chip opens the popover form (focus moves
+ *   into its search input); picking a vocabulary row swaps the token
+ *   in place; Remove drops the whole chip — every mutation emits the
+ *   serialized value, never a chip markup string
+ * - SUBMIT: Enter with no panel open fires submitOnEnter
+ *
+ * happy-dom has no real editing engine: the tests drive the DOM the
+ * way the browser would (mutate text nodes, then dispatch `input`),
+ * which pins exactly the component's own contracts — serialization,
+ * normalization, panel state and editor plumbing.
+ */
+
+const mounts: { app: ReturnType<typeof createApp>; container: HTMLElement }[] = [];
+
+interface MountOpts {
+  modelValue?: string;
+  onUpdate?: (v: string) => void;
+  submitOnEnter?: () => void;
+}
+
+function mount(opts: MountOpts = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkTemplateField, {
+        modelValue: opts.modelValue ?? "",
+        tokens: [
+          { name: "md5_email", description: "MD5 of the account email" },
+          { name: "sha256_email", description: "SHA-256 of the account email" },
+          { name: "username", description: "The account name" },
+        ],
+        "onUpdate:modelValue": (v: string) => opts.onUpdate?.(v),
+        submitOnEnter: opts.submitOnEnter,
+      }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+function editable(el: HTMLElement): HTMLElement {
+  const edit = el.querySelector<HTMLElement>(".hk-template-field-edit");
+  if (!edit) throw new Error("editable not found");
+  return edit;
+}
+
+function fireInput(edit: HTMLElement) {
+  edit.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts) {
+    app.unmount();
+    container.remove();
+  }
+  mounts.length = 0;
+});
+
+describe("HkTemplateField render + value contract", () => {
+  it("renders tokens as chips with byte-exact raw", async () => {
+    const el = mount({ modelValue: "https://g.com/{{username}}.png" });
+    await nextTick();
+    const chips = el.querySelectorAll<HTMLElement>(".hk-tpl-chip");
+    expect(chips).toHaveLength(1);
+    expect(chips[0]!.dataset.token).toBe("username");
+    expect(chips[0]!.dataset.raw).toBe("{{username}}");
+    expect(chips[0]!.textContent).toBe("{{ username }}");
+    expect(editable(el).textContent).toContain("https://g.com/");
+  });
+
+  it("re-renders when the parent changes the value", async () => {
+    const container = mount({ modelValue: "" });
+    await nextTick();
+    // Remount-ish: drive the prop through a second mount with a value.
+    const edit = editable(container);
+    edit.textContent = "{{ a }}";
+    fireInput(edit);
+    await nextTick();
+    expect(edit.querySelectorAll<HTMLElement>(".hk-tpl-chip")).toHaveLength(1);
+  });
+
+  it("an external write re-renders; a parent echo of our own emit must not", async () => {
+    // The controlled-value contract: the parent writing a NEW value
+    // rebuilds the DOM; the parent echoing back the value we just
+    // emitted must NOT (a rebuild under the caret is what breaks
+    // mid-typing edits in controlled setups).
+    const value = ref("");
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      setup() {
+        return () =>
+          h(HkTemplateField, {
+            modelValue: value.value,
+            tokens: [{ name: "username" }],
+            "onUpdate:modelValue": (v: string) => { value.value = v; },
+          });
+      },
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    await nextTick();
+
+    // External write: chips appear.
+    value.value = "x {{ username }} y";
+    await nextTick();
+    let edit = editable(container);
+    expect(edit.querySelectorAll<HTMLElement>(".hk-tpl-chip")).toHaveLength(1);
+
+    // Echo path: type more (emit fires, the parent writes the SAME
+    // string back); a planted marker node must survive — a rebuild
+    // would have dropped it.
+    const marker = document.createTextNode("");
+    edit.appendChild(marker);
+    edit.append(document.createTextNode("z"));
+    fireInput(edit);
+    await nextTick();
+    edit = editable(container);
+    expect(edit.contains(marker), "echo must not rebuild the DOM").toBe(true);
+    expect(edit.textContent).toContain("{{ username }}");
+    expect(value.value).toBe("x {{ username }} yz");
+  });
+
+  it("converts a hand-typed closed token into a chip and emits byte-exact", async () => {
+    const seen: string[] = [];
+    const el = mount({ modelValue: "x ", onUpdate: (v) => seen.push(v) });
+    await nextTick();
+    const edit = editable(el);
+    // The browser's text insertion between events, emulated.
+    edit.append(document.createTextNode("{{ md5_email }}"));
+    fireInput(edit);
+    await nextTick();
+    const chips = edit.querySelectorAll<HTMLElement>(".hk-tpl-chip");
+    expect(chips).toHaveLength(1);
+    expect(chips[0]!.dataset.raw).toBe("{{ md5_email }}");
+    expect(seen.at(-1)).toBe("x {{ md5_email }}");
+  });
+
+  it("leaves non-identifier braces as literal text", async () => {
+    const el = mount({ modelValue: "" });
+    await nextTick();
+    const edit = editable(el);
+    edit.append(document.createTextNode("{{ filter | pipe }}"));
+    fireInput(edit);
+    await nextTick();
+    expect(edit.querySelectorAll<HTMLElement>(".hk-tpl-chip")).toHaveLength(0);
+    expect(edit.textContent).toContain("{{ filter | pipe }}");
+  });
+
+  it("paste stays plain text and converts tokens", async () => {
+    const seen: string[] = [];
+    const el = mount({ modelValue: "", onUpdate: (v) => seen.push(v) });
+    await nextTick();
+    const edit = editable(el);
+    const dt = new DataTransfer();
+    dt.setData("text/plain", "<b>{{ username }}</b>");
+    const pasteEvent = new ClipboardEvent("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(pasteEvent, "clipboardData", { value: dt });
+    edit.dispatchEvent(pasteEvent);
+    await nextTick();
+    expect(edit.querySelector("b")).toBeNull();
+    const chips = edit.querySelectorAll<HTMLElement>(".hk-tpl-chip");
+    expect(chips).toHaveLength(1);
+    expect(seen.at(-1)).toBe("<b>{{ username }}</b>");
+  });
+});
+
+describe("HkTemplateField vocabulary panel", () => {
+  it("opens on an open-brace trigger and picks a row into a chip", async () => {
+    const seen: string[] = [];
+    const el = mount({ modelValue: "", onUpdate: (v) => seen.push(v) });
+    await nextTick();
+    const edit = editable(el);
+    edit.append(document.createTextNode("https://x/{{ us"));
+    // Caret at the end of the typed run (what typing leaves behind).
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.setStart(edit.lastChild!, edit.lastChild!.nodeValue!.length);
+    range.collapse(true);
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    fireInput(edit);
+    await nextTick();
+    // The panel's rows are teleported to body by HkMenu's surface.
+    const row = document.body.querySelector<HTMLButtonElement>(".hk-tpl-row");
+    expect(row).not.toBeNull();
+    row!.click();
+    await nextTick();
+    const chips = editable(el).querySelectorAll<HTMLElement>(".hk-tpl-chip");
+    expect(chips).toHaveLength(1);
+    expect(chips[0]!.dataset.token).toBe("username");
+    expect(seen.at(-1)).toBe("https://x/{{ username }}");
+  });
+
+  it("arrow keys + Enter pick the highlighted row", async () => {
+    const seen: string[] = [];
+    const el = mount({ modelValue: "", onUpdate: (v) => seen.push(v) });
+    await nextTick();
+    const edit = editable(el);
+    edit.append(document.createTextNode("{{ "));
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.setStart(edit.lastChild!, 3);
+    range.collapse(true);
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    fireInput(edit);
+    await nextTick();
+    edit.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    edit.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    // Active row starts at 0 (md5_email); one ArrowDown highlights
+    // sha256_email, and Enter picks it.
+    expect(seen.at(-1)).toBe("{{ sha256_email }}");
+    expect(editable(el).querySelectorAll<HTMLElement>(".hk-tpl-chip")).toHaveLength(1);
+  });
+});
+
+describe("HkTemplateField chip editor", () => {
+  it("click on a chip opens the editor; picking swaps the token", async () => {
+    const seen: string[] = [];
+    const el = mount({
+      modelValue: "https://g.com/{{username}}.png",
+      onUpdate: (v) => seen.push(v),
+    });
+    await nextTick();
+    const chip = editable(el).querySelector<HTMLElement>(".hk-tpl-chip")!;
+    chip.click();
+    await nextTick();
+    // The editor is teleported; its rows exist with the current row
+    // marked active.
+    const rows = Array.from(document.body.querySelectorAll<HTMLButtonElement>(".hk-tpl-editor .hk-tpl-row"));
+    expect(rows.length).toBeGreaterThan(0);
+    expect(rows.some((r) => r.dataset.active !== undefined && r.textContent!.includes("username"))).toBe(true);
+    // Swap to sha256_email.
+    const target = rows.find((r) => r.textContent!.includes("sha256_email"))!;
+    target.click();
+    await nextTick();
+    expect(seen.at(-1)).toBe("https://g.com/{{ sha256_email }}.png");
+    const nextChip = editable(el).querySelector<HTMLElement>(".hk-tpl-chip")!;
+    expect(nextChip.dataset.token).toBe("sha256_email");
+  });
+
+  it("Remove drops the whole chip and emits the residue", async () => {
+    const seen: string[] = [];
+    const el = mount({
+      modelValue: "a {{ md5_email }} b",
+      onUpdate: (v) => seen.push(v),
+    });
+    await nextTick();
+    editable(el).querySelector<HTMLElement>(".hk-tpl-chip")!.click();
+    await nextTick();
+    const remove = Array.from(document.body.querySelectorAll<HTMLButtonElement>(".hk-tpl-editor button"))
+      .find((b) => b.textContent!.trim().length > 0 && !b.closest(".hk-tpl-editor-rows"))!;
+    remove.click();
+    await nextTick();
+    expect(seen.at(-1)).toBe("a  b");
+    expect(editable(el).querySelectorAll<HTMLElement>(".hk-tpl-chip")).toHaveLength(0);
+  });
+});
+
+describe("HkTemplateField keyboard", () => {
+  it("Enter without a panel fires the submit intent", async () => {
+    const submit = vi.fn();
+    const el = mount({ modelValue: "", submitOnEnter: submit });
+    await nextTick();
+    editable(el).dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+    expect(submit).toHaveBeenCalledTimes(1);
+  });
+});
+
+/** Drive the editable into an open `{{ query` trigger state with the
+ * caret at the end of the typed run, so the panel opens. */
+async function openTrigger(el: HTMLElement, typed: string) {
+  const edit = editable(el);
+  edit.append(document.createTextNode(typed));
+  const sel = window.getSelection();
+  const range = document.createRange();
+  range.setStart(edit.lastChild!, edit.lastChild!.nodeValue!.length);
+  range.collapse(true);
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+  fireInput(edit);
+  await nextTick();
+}
+
+describe("HkTemplateField vocabulary guardrails (R2 gap killers)", () => {
+  it("falls back to in-order subsequence matching (md5e finds md5_email)", async () => {
+    const el = mount({ modelValue: "" });
+    await nextTick();
+    // "md5e" is not a substring of any name/description — only the
+    // subsequence pass can surface the row.
+    await openTrigger(el, "{{ md5e");
+    const rows = Array.from(document.body.querySelectorAll<HTMLButtonElement>(".hk-tpl-row"));
+    expect(rows.some((r) => r.textContent!.includes("md5_email"))).toBe(true);
+  });
+
+  it("Shift+Tab does NOT pick the highlighted row", async () => {
+    const seen: string[] = [];
+    const el = mount({ modelValue: "", onUpdate: (v) => seen.push(v) });
+    await nextTick();
+    await openTrigger(el, "{{ us");
+    const before = seen.length;
+    editable(el).dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(seen.length).toBe(before);
+    expect(editable(el).querySelectorAll<HTMLElement>(".hk-tpl-chip")).toHaveLength(0);
+  });
+
+  it("a paste whose selection straddles the field boundary appends at the end", async () => {
+    const el = mount({ modelValue: "x" });
+    await nextTick();
+    const edit = editable(el);
+    // A selection that starts inside the field and ends in an outside
+    // node: the guard must treat it as foreign (delete nothing past
+    // the field, insert at the end).
+    const outsider = document.createElement("span");
+    outsider.textContent = "OUTSIDE";
+    el.appendChild(outsider);
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.setStart(edit.firstChild!, 0);
+    range.setEnd(outsider.firstChild!, 2);
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+
+    const seen: string[] = [];
+    const dt = new DataTransfer();
+    dt.setData("text/plain", "{{ username }}");
+    const pasteEvent = new ClipboardEvent("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(pasteEvent, "clipboardData", { value: dt });
+    edit.dispatchEvent(pasteEvent);
+    await nextTick();
+    // The outside node survived the straddling selection…
+    expect(outsider.textContent).toBe("OUTSIDE");
+    // …and the paste landed at the field's end, chips up.
+    const chips = edit.querySelectorAll<HTMLElement>(".hk-tpl-chip");
+    expect(chips).toHaveLength(1);
+    expect(edit.textContent).toContain("x");
+  });
+
+  it("Enter in the chip editor search picks the first matching row", async () => {
+    const seen: string[] = [];
+    const el = mount({
+      modelValue: "a {{ username }} b",
+      onUpdate: (v) => seen.push(v),
+    });
+    await nextTick();
+    editable(el).querySelector<HTMLElement>(".hk-tpl-chip")!.click();
+    await nextTick();
+    const search = document.body.querySelector<HTMLInputElement>(".hk-tpl-editor-search input")!;
+    expect(search).toBeTruthy();
+    search.value = "md5";
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    search.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(seen.at(-1)).toBe("a {{ md5_email }} b");
+  });
+});