@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/ToastCard.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * One toast: the look both toast stacks share.
+ *
+ * The manager (`ui/ToastHost.vue`, fed by `useToast()`) and the canvas
+ * (`shared/Toast.vue`, fed by `toast-store`) used to draw toasts two ways:
+ * different surfaces, borders, icons and action buttons. Now each host keeps
+ * only its own store and its own place on screen, and renders this card.
+ * It reads only SHARED_TOKENS, so it wears the colours of the side it is on.
+ *
+ * `tone` follows the kit's names; the canvas store's `warning` maps to
+ * `warn` in its host.
+ */
+const props = defineProps<{
+  tone: "info" | "success" | "warn" | "error";
+  summary: string;
+  detail?: string | undefined;
+  /** Label of the inline action (Undo, Open…); emits `action`. */
+  actionLabel?: string | undefined;
+}>();
+
+const emit = defineEmits<{ action: []; dismiss: [] }>();
+
+const ICONS = {
+  info: "pi-info-circle",
+  success: "pi-check-circle",
+  warn: "pi-exclamation-triangle",
+  error: "pi-times-circle",
+} as const;
+</script>
+
+<template>
+  <div :class="['wp-toast', `wp-toast--${props.tone}`]" role="status" data-test="toast">
+    <i :class="['pi', ICONS[props.tone], 'wp-toast__icon']" aria-hidden="true" />
+    <div class="wp-toast__text">
+      <div class="wp-toast__summary">{{ summary }}</div>
+      <div v-if="detail" class="wp-toast__detail">{{ detail }}</div>
+    </div>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="wp-toast__action"
+      data-test="toast-action"
+      @click="emit('action')"
+    >{{ actionLabel }}</button>
+    <button
+      type="button"
+      class="wp-toast__close"
+      aria-label="Dismiss"
+      @click="emit('dismiss')"
+    ><i class="pi pi-times" aria-hidden="true" /></button>
+  </div>
+</template>
+
+<style scoped>
+.wp-toast {
+  --toast-tone: var(--wp-info);
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+  min-width: 220px;
+  max-width: 420px;
+  padding: var(--wp-space-4) var(--wp-space-4) var(--wp-space-4) var(--wp-space-5);
+  /* Slightly see-through with a blur, so it reads as floating over
+     whatever is underneath without a heavy shadow. */
+  background: color-mix(in oklab, var(--wp-bg-3) 94%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--wp-border-strong);
+  border-left: 3px solid var(--toast-tone);
+  border-radius: var(--wp-radius-md);
+  box-shadow: var(--wp-shadow-md);
+  color: var(--wp-text);
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-sm);
+  line-height: 1.4;
+}
+.wp-toast--success { --toast-tone: var(--wp-success); }
+.wp-toast--warn { --toast-tone: var(--wp-warn); }
+.wp-toast--error { --toast-tone: var(--wp-danger); }
+
+.wp-toast__icon { flex-shrink: 0; font-size: 14px; color: var(--toast-tone); }
+.wp-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.wp-toast__summary { font-weight: 600; }
+.wp-toast__detail { margin-top: 1px; color: var(--wp-text-muted); font-size: var(--wp-text-xs); }
+
+.wp-toast__action {
+  flex-shrink: 0;
+  height: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-4);
+  background: transparent;
+  border: 1px solid var(--wp-border-strong);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text);
+  font: 600 var(--wp-text-xs) var(--wp-font-sans);
+  cursor: pointer;
+  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
+}
+.wp-toast__action:hover { background: var(--wp-bg-4); border-color: var(--wp-accent-500); }
+
+.wp-toast__close {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-dim);
+  cursor: pointer;
+}
+.wp-toast__close .pi { font-size: 10px; }
+.wp-toast__close:hover { color: var(--wp-text); background: var(--wp-bg-4); }
+.wp-toast__action:focus-visible,
+.wp-toast__close:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+</style>

package/src/ToastHost.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * The manager's toast stack (bottom right). The toast itself is the shared
+ * ToastCard, the same one the canvas stack draws.
+ */
+import { useToast } from "./useToast";
+import ToastCard from "./ToastCard.vue";
+
+const { toasts, push, dismiss } = useToast();
+
+async function runAction(id: string, handler: () => void | Promise<void>) {
+  try {
+    await handler();
+  } catch (e) {
+    push({
+      severity: "error",
+      summary: "Undo failed",
+      detail: e instanceof Error ? e.message : String(e),
+      life: 4000,
+    });
+  } finally {
+    dismiss(id);
+  }
+}
+</script>
+
+<template>
+  <div class="wp-toast-stack" aria-live="polite" aria-atomic="true">
+    <ToastCard
+      v-for="t in toasts"
+      :key="t.id"
+      :tone="t.severity"
+      :summary="t.summary"
+      :detail="t.detail"
+      :action-label="t.action?.label"
+      @action="t.action && runAction(t.id, t.action.run)"
+      @dismiss="dismiss(t.id)"
+    />
+  </div>
+</template>

package/src/Toggle.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * The manager's on/off switch: the shared WpSwitch at the
+ * manager size, so the canvas and the manager draw one switch. Use it for a
+ * setting that takes effect at once.
+ */
+import WpSwitch from "./WpSwitch.vue";
+
+interface Props {
+  modelValue: boolean;
+  label?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  /** @deprecated use `invalid`. */
+  error?: boolean | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { size: "md", label: undefined, ariaLabel: undefined });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+}>();
+</script>
+
+<template>
+  <WpSwitch
+    :model-value="props.modelValue"
+    :size="props.size"
+    :label="props.label"
+    :aria-label="props.ariaLabel ?? props.label"
+    :disabled="props.disabled"
+    :invalid="props.invalid || props.error"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>

package/src/TokenizedValue.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+/**
+ * Read-only renderer for a wildcard-grammar value string.
+ *
+ * Consumes the token stream from `tokenizeRich` (chunk A1) and paints each
+ * token as a coloured inline span or chip — vars (green), refs (magenta),
+ * brace alternations (amber scaffolding) and multi-picks (green scaffolding).
+ * The component is RECURSIVE: brace arms re-enter `TokenizedValue` so a
+ * `@{uuid}` or `$var` nested inside `{a|@{…}|$rank}` still renders as a chip.
+ *
+ * No `v-html` — every token becomes a `v-for`-rendered element (CLAUDE.md
+ * confines raw-HTML rendering to `utils/sanitize.ts`). This mirrors the
+ * sister project's RefChip + rich-text.css chrome (read, not imported — the
+ * two repos diverge) but emits a flat, framework-local span tree.
+ *
+ * The token stream is pre-flattened in `<script>` into a single list of
+ * `RenderItem`s (text / escape / var / ref / scaffolding-glyph / nested
+ * child). That keeps the template a flat `v-for` — no nested branch loops —
+ * which both reads cleanly and lets adjacent items abut with no stray
+ * whitespace (tokens are contiguous; an inter-element space would corrupt
+ * the rendered value).
+ */
+import { computed } from "vue";
+import {
+  splitRefFilter,
+  tokenizeRich,
+  type RichToken,
+} from "./rich-tokenize";
+
+defineOptions({ name: "TokenizedValue" });
+
+const props = withDefaults(
+  defineProps<{
+    /** The raw wildcard-grammar string to render. */
+    value: string;
+    /** uuid → display-name map for resolving `@{uuid}` refs. Empty by default
+     *  (callers without a catalog still render; refs fall back to #name/uuid). */
+    uuidToName?: ReadonlyMap<string, string>;
+  }>(),
+  { uuidToName: () => new Map<string, string>() },
+);
+
+/** Concrete (never-undefined) map for binding into nested instances —
+ *  `withDefaults` guarantees a value, but the recursive self-reference's
+ *  optional prop type needs an explicitly non-optional source under
+ *  `exactOptionalPropertyTypes`. */
+const refMap = computed<ReadonlyMap<string, string>>(() => props.uuidToName);
+
+/** One drawable unit. A brace/multi token expands into several of these
+ *  (scaffolding glyphs interleaved with `child` arms); every other token
+ *  maps to exactly one. */
+type RenderItem =
+  | { key: string; kind: "text" | "escape"; text: string }
+  | { key: string; kind: "var"; label: string; neg: boolean }
+  | { key: string; kind: "scaf"; text: string; flavor: "brace" | "multi" }
+  | { key: string; kind: "child"; value: string }
+  | {
+      key: string;
+      kind: "ref";
+      uuid: string;
+      label: string;
+      resolved: boolean;
+      expr: string;
+      excludeNull: boolean;
+    };
+
+/** Var chip label: `$name` plus an optional `.K` list accessor (SP2a) and
+ *  `.neg` negatives read (schema v8). */
+function varLabel(meta: RichToken["meta"]): string {
+  const idx = meta?.index;
+  return (
+    "$" +
+    (meta?.name ?? "") +
+    (idx !== undefined ? "." + idx : "") +
+    (meta?.neg ? ".neg" : "")
+  );
+}
+
+/** Resolve a ref token into its chip view. Resolution precedence: live map
+ *  name → cached `#name` → bare uuid. The raw `:`-filter is peeled into an
+ *  expression + exclude-null flag (the expression rides in the hover title,
+ *  never inline, so long filters can't blow out the chip). */
+function refItem(token: RichToken, key: string): Extract<RenderItem, { kind: "ref" }> {
+  const meta = token.meta ?? {};
+  const uuid = meta.uuid ?? "";
+  const mapped = props.uuidToName.get(uuid);
+  const fromMap = typeof mapped === "string" && mapped.length > 0 ? mapped : "";
+  const cached = typeof meta.name === "string" && meta.name.length > 0 ? meta.name : "";
+  const resolvedName = fromMap || cached;
+  const { expr, excludeNull } = splitRefFilter((meta.sub_categories ?? []).join(","));
+  return {
+    key,
+    kind: "ref",
+    uuid,
+    label: resolvedName || uuid,
+    resolved: resolvedName.length > 0,
+    expr,
+    excludeNull,
+  };
+}
+
+/** Reconstruct a multi-pick's opening scaffolding from its meta: `{N`, `-M`
+ *  (range only), `~` (independent), then the `$$sep$$` delimiter. Inverse of
+ *  the tokenizer so a decomposed block reads identically to its source. */
+function multiPrefix(meta: RichToken["meta"]): string {
+  const min = meta?.min ?? 0;
+  const max = meta?.max ?? min;
+  const range = max !== min ? "-" + max : "";
+  const indep = meta?.independent ? "~" : "";
+  return "{" + min + range + indep + "$$" + (meta?.sep ?? "") + "$$";
+}
+
+/** Flatten a brace/multi token into scaffolding glyphs + child arms. */
+function expandBlock(
+  token: RichToken,
+  flavor: "brace" | "multi",
+  open: string,
+  base: string,
+): RenderItem[] {
+  const out: RenderItem[] = [];
+  const branches = token.meta?.branches ?? [];
+  out.push({ key: base + "-o", kind: "scaf", text: open, flavor });
+  branches.forEach((branch, bi) => {
+    if (bi > 0) out.push({ key: `${base}-p${bi}`, kind: "scaf", text: "|", flavor });
+    out.push({ key: `${base}-c${bi}`, kind: "child", value: branch });
+  });
+  out.push({ key: base + "-x", kind: "scaf", text: "}", flavor });
+  return out;
+}
+
+const items = computed<RenderItem[]>(() => {
+  const out: RenderItem[] = [];
+  for (const token of tokenizeRich(props.value)) {
+    const key = String(token.start);
+    switch (token.kind) {
+      case "text":
+        out.push({ key, kind: "text", text: token.raw });
+        break;
+      case "escape":
+        out.push({ key, kind: "escape", text: token.raw });
+        break;
+      case "var":
+        out.push({ key, kind: "var", label: varLabel(token.meta), neg: token.meta?.neg === true });
+        break;
+      case "ref":
+        out.push(refItem(token, key));
+        break;
+      case "dp-brace":
+        out.push(...expandBlock(token, "brace", "{", key));
+        break;
+      case "dp-multi":
+        out.push(...expandBlock(token, "multi", multiPrefix(token.meta), key));
+        break;
+      default:
+        // Defensive: any future/unhandled kind still shows its raw text so
+        // the lossless invariant holds visually.
+        out.push({ key, kind: "text", text: token.raw });
+    }
+  }
+  return out;
+});
+</script>
+
+<template>
+  <span class="wp-tv">
+    <template
+      v-for="item in items"
+      :key="item.key"
+    >
+      <span
+        v-if="item.kind === 'text'"
+        class="wp-tv-text"
+      >{{ item.text }}</span>
+      <span
+        v-else-if="item.kind === 'escape'"
+        class="wp-tv-escape"
+      >{{ item.text }}</span>
+      <span
+        v-else-if="item.kind === 'var'"
+        class="wp-tv-var"
+        :data-neg="item.neg || null"
+      >{{ item.label }}</span>
+      <span
+        v-else-if="item.kind === 'scaf'"
+        class="wp-tv-scaf"
+        :class="item.flavor === 'multi' ? 'wp-tv-scaf--multi' : 'wp-tv-scaf--brace'"
+      >{{ item.text }}</span>
+      <TokenizedValue
+        v-else-if="item.kind === 'child'"
+        :value="item.value"
+        :uuid-to-name="refMap"
+      />
+      <span
+        v-else-if="item.kind === 'ref'"
+        class="wp-tv-ref"
+        :class="{ 'wp-tv-ref--unresolved': !item.resolved }"
+        :title="item.expr || undefined"
+      >
+        <i
+          class="pi wp-tv-ref__icon"
+          :class="item.resolved ? 'pi-sparkles' : 'pi-question-circle'"
+          aria-hidden="true"
+        />
+        <span class="wp-tv-ref__label">{{ item.label }}</span>
+        <i
+          v-if="item.expr"
+          class="pi pi-filter wp-tv-ref__funnel"
+          aria-hidden="true"
+        />
+        <i
+          v-if="item.excludeNull"
+          class="pi pi-ban wp-tv-ref__nonull"
+          aria-hidden="true"
+        />
+      </span>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.wp-tv {
+  /* Host text size — chips deliberately read SMALLER than this line. */
+  font-size: 13px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.wp-tv-text {
+  color: var(--wp-text);
+}
+
+.wp-tv-escape {
+  color: var(--wp-text-dim);
+}
+
+/* ── Chips (var + ref) ───────────────────────────────────────────────
+ * Inline (not inline-flex) so they wrap with the surrounding prose and
+ * sit on the text baseline. 11px < the 13px host line keeps them from
+ * towering over the text. */
+.wp-tv-var,
+.wp-tv-ref {
+  display: inline;
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+/* $var — green. */
+.wp-tv-var {
+  background: color-mix(in oklab, var(--wp-success) 16%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-success) 50%, transparent);
+  color: var(--wp-success);
+  font-weight: 500;
+}
+/* $var.neg — reads the variable's negatives, so it wears the negative red. */
+.wp-tv-var[data-neg] {
+  background: color-mix(in oklab, var(--wp-danger) 14%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-danger) 45%, transparent);
+  color: var(--wp-danger-text, var(--wp-danger));
+}
+
+/* @{uuid} ref — magenta. Carries a hover title (the filter), so `help`. */
+.wp-tv-ref {
+  background: color-mix(in oklab, var(--wp-kind-ref) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-kind-ref) 50%, transparent);
+  color: var(--wp-kind-ref);
+  font-weight: 500;
+  cursor: help;
+}
+
+/* Unresolved ref — red. Overrides the magenta tone above. */
+.wp-tv-ref--unresolved {
+  background: color-mix(in oklab, var(--wp-danger) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-danger) 50%, transparent);
+  color: var(--wp-danger);
+}
+
+/* In-chip PrimeIcons — small + baseline-nudged so they don't lift the line. */
+.wp-tv-ref__icon,
+.wp-tv-ref__funnel,
+.wp-tv-ref__nonull {
+  font-size: 8px;
+  vertical-align: 0;
+}
+.wp-tv-ref__icon {
+  margin-right: 3px;
+}
+.wp-tv-ref__funnel {
+  margin-left: 3px;
+  color: var(--wp-warn);
+}
+.wp-tv-ref__nonull {
+  margin-left: 2px;
+  color: var(--wp-text-dim);
+}
+
+/* ── Brace / multi scaffolding ───────────────────────────────────────
+ * Colour-only (no background, no box) — the bordered chips are the nested
+ * arms. Brace = amber, multi = green. */
+.wp-tv-scaf--brace {
+  color: var(--wp-warn);
+  font-weight: 600;
+}
+.wp-tv-scaf--multi {
+  color: var(--wp-kind-derivation);
+  font-weight: 600;
+}
+</style>

package/src/Toolbar.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+/**
+ * Toolbar: a row of controls that is one Tab stop. Inside it the arrow keys
+ * move between the controls, Home/End jump to the ends, and the toolbar
+ * remembers where you were (APG toolbar). `attached` joins its buttons into
+ * one button group. Works on the canvas and in the manager.
+ *
+ *   <Toolbar label="Text">
+ *     <Button variant="ghost" icon="pi-bold" aria-label="Bold" />
+ *     <Separator orientation="vertical" />
+ *     <Button variant="ghost" icon="pi-copy" aria-label="Copy" />
+ *   </Toolbar>
+ *
+ * Put buttons, toggles and selects in it. A text box inside a toolbar keeps
+ * its own left/right keys.
+ */
+import { onMounted, onUpdated, ref } from "vue";
+
+const props = withDefaults(defineProps<{
+  /** The toolbar's name for screen readers. */
+  label: string;
+  orientation?: "horizontal" | "vertical" | undefined;
+  /** Join the buttons into one group with shared borders. */
+  attached?: boolean | undefined;
+  /** Gap between controls. */
+  size?: "sm" | "md" | undefined;
+}>(), { orientation: "horizontal", size: "md" });
+
+const rootEl = ref<HTMLElement | null>(null);
+const last = ref(0);
+
+const ITEMS = "button:not([disabled]), [role=button]:not([aria-disabled=true]), a[href], input:not([disabled]), select:not([disabled]), [role=switch], [role=checkbox], [role=radio]";
+
+function items(): HTMLElement[] {
+  return rootEl.value ? [...rootEl.value.querySelectorAll<HTMLElement>(ITEMS)] : [];
+}
+
+/** Roving tabindex: only the remembered control is in the Tab order. */
+function sync(): void {
+  const list = items();
+  if (!list.length) return;
+  const at = Math.min(last.value, list.length - 1);
+  list.forEach((el, i) => el.setAttribute("tabindex", i === at ? "0" : "-1"));
+}
+
+function isTextField(el: Element | null): boolean {
+  return !!el && el.tagName === "INPUT" && !["checkbox", "radio", "button"].includes((el as HTMLInputElement).type);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  const list = items();
+  const at = list.indexOf(document.activeElement as HTMLElement);
+  if (at < 0) return;
+  const fwd = props.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+  const back = props.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+  if (isTextField(document.activeElement) && (ev.key === "ArrowLeft" || ev.key === "ArrowRight" || ev.key === "Home" || ev.key === "End")) return;
+  let next: number;
+  if (ev.key === fwd) next = (at + 1) % list.length;
+  else if (ev.key === back) next = (at - 1 + list.length) % list.length;
+  else if (ev.key === "Home") next = 0;
+  else if (ev.key === "End") next = list.length - 1;
+  else return;
+  ev.preventDefault();
+  last.value = next;
+  sync();
+  list[next].focus();
+}
+
+function onFocusin(ev: FocusEvent): void {
+  const i = items().indexOf(ev.target as HTMLElement);
+  if (i >= 0 && i !== last.value) { last.value = i; sync(); }
+}
+
+onMounted(sync);
+onUpdated(sync);
+</script>
+
+<!-- role="toolbar" moves focus between its own controls. -->
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+  <div
+    ref="rootEl"
+    class="wp-tools"
+    role="toolbar"
+    :aria-label="label"
+    :aria-orientation="orientation"
+    :data-orientation="orientation"
+    :data-attached="attached || undefined"
+    :data-size="size"
+    @keydown="onKeydown"
+    @focusin="onFocusin"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.wp-tools { display: inline-flex; align-items: center; gap: var(--wp-space-2); flex-wrap: wrap; min-width: 0; }
+.wp-tools[data-size="md"] { gap: var(--wp-space-3); }
+.wp-tools[data-orientation="vertical"] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
+.wp-tools[data-attached] { gap: 0; flex-wrap: nowrap; }
+.wp-tools[data-attached] > :deep(*) { border-radius: 0; }
+.wp-tools[data-attached] > :deep(*:not(:first-child)) { margin-left: -1px; }
+.wp-tools[data-attached] > :deep(*:first-child) { border-top-left-radius: var(--wp-radius); border-bottom-left-radius: var(--wp-radius); }
+.wp-tools[data-attached] > :deep(*:last-child) { border-top-right-radius: var(--wp-radius); border-bottom-right-radius: var(--wp-radius); }
+.wp-tools[data-attached] > :deep(*:focus-visible) { position: relative; z-index: 1; }
+.wp-tools[data-attached][data-orientation="vertical"] > :deep(*:not(:first-child)) { margin-left: 0; margin-top: -1px; }
+.wp-tools[data-attached][data-orientation="vertical"] > :deep(*:first-child) { border-radius: var(--wp-radius) var(--wp-radius) 0 0; }
+.wp-tools[data-attached][data-orientation="vertical"] > :deep(*:last-child) { border-radius: 0 0 var(--wp-radius) var(--wp-radius); }
+</style>