@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/Timeline.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * Timeline: events in order, each a dot on one line with its time, title
+ * and an optional body (History, an AI trace, a pack build log). Works on
+ * the canvas and in the manager.
+ *
+ *   <Timeline :items="[{ id: 1, title: 'Saved Hair colour', time: '5 min ago', tone: 'success', icon: 'pi-check' }]" />
+ *   <Timeline :items="steps"><template #body="{ item }"><CodeBlock :code="item.args" bare /></template></Timeline>
+ *
+ * It is an ordered list. `#body` and `#time` slots let a screen draw its own
+ * body (a diff, a code block) or a RelativeDate. The last item can be
+ * `pending` (a pulsing dot) while a job is still running.
+ */
+export interface TimelineItem {
+  id: string | number;
+  title: string;
+  /** Shown after the title, e.g. "5 min ago". */
+  time?: string | undefined;
+  /** A line or two of text under the title. */
+  body?: string | undefined;
+  tone?: "neutral" | "info" | "success" | "warn" | "danger" | "accent" | undefined;
+  /** A PrimeIcons class inside the dot. */
+  icon?: string | undefined;
+  /** Still running: the dot pulses. */
+  pending?: boolean | undefined;
+}
+
+withDefaults(defineProps<{
+  items: TimelineItem[];
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+}>(), { size: "md", ariaLabel: undefined });
+</script>
+
+<template>
+  <ol class="wp-timeline" :data-size="size" :aria-label="ariaLabel">
+    <li
+      v-for="it in items"
+      :key="it.id"
+      class="wp-timeline__item"
+      :data-tone="it.tone ?? 'neutral'"
+      :data-pending="it.pending || undefined"
+      :data-icon="it.icon ? 'true' : undefined"
+    >
+      <span class="wp-timeline__dot" aria-hidden="true"><i v-if="it.icon" class="pi" :class="it.icon" /></span>
+      <div class="wp-timeline__main">
+        <div class="wp-timeline__head">
+          <span class="wp-timeline__title">{{ it.title }}</span>
+          <span v-if="it.time || $slots.time" class="wp-timeline__time"><slot name="time" :item="it">{{ it.time }}</slot></span>
+        </div>
+        <div v-if="it.body || $slots.body" class="wp-timeline__body"><slot name="body" :item="it">{{ it.body }}</slot></div>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.wp-timeline { --_dot: 20px; margin: 0; padding: 0; list-style: none; font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans); min-width: 0; }
+.wp-timeline[data-size="sm"] { --_dot: 16px; font-size: var(--wp-text-xs); }
+.wp-timeline__item { --_tone: var(--wp-text-dim); position: relative; display: flex; gap: var(--wp-space-4); padding-bottom: var(--wp-space-5); }
+.wp-timeline[data-size="sm"] .wp-timeline__item { gap: var(--wp-space-3); padding-bottom: var(--wp-space-4); }
+.wp-timeline__item:last-child { padding-bottom: 0; }
+.wp-timeline__item[data-tone="info"] { --_tone: var(--wp-info); }
+.wp-timeline__item[data-tone="success"] { --_tone: var(--wp-success); }
+.wp-timeline__item[data-tone="warn"] { --_tone: var(--wp-warn); }
+.wp-timeline__item[data-tone="danger"] { --_tone: var(--wp-danger); }
+.wp-timeline__item[data-tone="accent"] { --_tone: var(--wp-accent); }
+.wp-timeline__item:not(:last-child)::before {
+  content: ""; position: absolute; top: calc(var(--_dot) + 2px); bottom: 2px; left: calc(var(--_dot) / 2 - 1px);
+  width: 2px; border-radius: min(1px, var(--wp-radius-cap, 999px)); background: var(--wp-border);
+}
+.wp-timeline__dot {
+  position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box;
+  width: var(--_dot); height: var(--_dot); margin-top: 1px; border-radius: 50%; /* round: timeline dot */
+  border: 2px solid var(--_tone); background: var(--wp-bg-1); color: var(--_tone);
+}
+.wp-timeline__item:not([data-icon]) .wp-timeline__dot { transform: scale(0.6); background: var(--_tone); }
+.wp-timeline__dot .pi { font-size: calc(var(--_dot) * 0.45); }
+.wp-timeline__item[data-pending] .wp-timeline__dot::after {
+  content: ""; position: absolute; inset: -4px; border-radius: 50%; /* round: timeline dot ring */ border: 2px solid var(--_tone);
+  animation: wp-timeline-pulse 1.6s ease-out infinite;
+}
+@keyframes wp-timeline-pulse { from { opacity: 0.7; transform: scale(0.8); } to { opacity: 0; transform: scale(1.4); } }
+.wp-timeline__main { flex: 1; min-width: 0; }
+.wp-timeline__head { display: flex; align-items: baseline; gap: var(--wp-space-3); flex-wrap: wrap; }
+.wp-timeline__title { color: var(--wp-text); font-weight: 500; }
+.wp-timeline__time { color: var(--wp-text-dim); font-size: var(--wp-text-xs); font-variant-numeric: tabular-nums; }
+.wp-timeline__body { margin-top: 2px; color: var(--wp-text-muted); overflow-wrap: anywhere; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-timeline__item[data-pending] .wp-timeline__dot::after { animation: none; display: none; }
+}
+</style>

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>