@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/HistoryScrubber.svelte

@@ -0,0 +1,500 @@
+<script lang="ts">
+  /**
+   * HistoryScrubber (origin mos-p9m3g, living artifacts phase 4) — "what did
+   * this page look like yesterday at 9am?"
+   *
+   * A collapsed "History" control on a blocks page. On mount it loads the
+   * timeline through the host's HistoryService (layout versions + data
+   * snapshots) and renders NOTHING until there is something to scrub: a page
+   * with one version and no data trail (or a failed load) shows no control.
+   * Opened, a slider walks the timeline stop by stop, ending at "Now". At any
+   * past stop it shows:
+   *
+   *   - which layout version and which data snapshot were live then;
+   *   - the diff of that data against now — KPI deltas for stats-shaped
+   *     values, added / removed / changed rows for tables, changed leaves for
+   *     anything else (history.ts diffData);
+   *   - the page itself as it was, rendered read-only by BlockRenderer from
+   *     the past spec + past data.
+   *
+   * "Compare with" swaps "now" for a second stop: diff A → B.
+   *
+   * Self-contained by design: the view mounts it with the artifact id, the
+   * live data it is already polling and the host's HistoryService; no
+   * service → it is not mounted.
+   */
+  import BlockRenderer from "./BlockRenderer.svelte"
+  import {
+    buildTimeline,
+    diffData,
+    formatDelta,
+    HISTORY_RETENTION,
+    type DataDiff,
+    type HistorySnapshot,
+    type HistoryVersion,
+    type TimelinePoint,
+  } from "./history.js"
+  import type { HistoryPastState, HistoryService } from "./types.js"
+
+  interface Props {
+    artifactId: string
+    /** The live data the host is showing now (its poller's blob). */
+    currentData: Record<string, unknown>
+    /** The layout version live now. */
+    currentVersion: number
+    /** The host's history reads (HostAdapter.history). */
+    service: HistoryService
+    /** Start expanded once there is a trail (tests, deep links). */
+    open?: boolean
+  }
+
+  let {
+    artifactId,
+    currentData,
+    currentVersion,
+    service,
+    open = $bindable(false),
+  }: Props = $props()
+
+  type PastState = HistoryPastState
+
+  /** A stop on the slider: a timeline point, or the synthetic "Now" end. */
+  type Stop = TimelinePoint | { kind: "now"; at: null; ms: number }
+
+  let loadState = $state<"idle" | "loading" | "ready" | "error">("idle")
+  let versions: HistoryVersion[] = $state([])
+  let snapshots: HistorySnapshot[] = $state([])
+  let trailStartAt: string | null = $state(null)
+
+  const stops: Stop[] = $derived([
+    ...buildTimeline(versions, snapshots),
+    { kind: "now", at: null, ms: Infinity },
+  ])
+
+  /** Selected stop (A), and the compare-with stop (B) in compare mode. */
+  let index = $state(0)
+  let compare = $state(false)
+  let compareIndex = $state(0)
+
+  const stateCache = new Map<string, PastState>()
+  let selected = $state<PastState | null>(null)
+  let compared = $state<PastState | null>(null)
+  let stateError = $state("")
+  let fetching = $state(false)
+
+  const dateFmt = new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  })
+
+  function fmt(iso: string | null): string {
+    if (!iso) return "now"
+    const d = new Date(iso)
+    return Number.isNaN(d.getTime()) ? iso : dateFmt.format(d)
+  }
+
+  function stopLabel(s: Stop): string {
+    if (s.kind === "now") return "Now (live)"
+    if (s.kind === "version") return `${fmt(s.at)} · layout v${s.version}`
+    return `${fmt(s.at)} · data update`
+  }
+
+  async function loadTimeline() {
+    loadState = "loading"
+    try {
+      const body = (await service.timeline({ artifactId })) as {
+        versions?: HistoryVersion[]
+        snapshots?: HistorySnapshot[]
+        trailStart?: string | null
+      }
+      versions = Array.isArray(body.versions) ? body.versions : []
+      snapshots = Array.isArray(body.snapshots) ? body.snapshots : []
+      trailStartAt = body.trailStart ?? null
+      index = stops.length - 1
+      compareIndex = stops.length - 1
+      loadState = "ready"
+    } catch {
+      // History is an optional affordance: a page whose trail cannot be read
+      // simply shows no control, never an error the viewer cannot act on.
+      loadState = "error"
+    }
+  }
+
+  $effect(() => {
+    if (loadState === "idle") void loadTimeline()
+  })
+
+  /** Something to scrub: more than the single layout version + "Now". */
+  const hasTrail = $derived(loadState === "ready" && stops.length > 2)
+
+  async function fetchState(s: Stop): Promise<PastState | null> {
+    if (s.kind === "now") return null
+    const hit = stateCache.get(s.at)
+    if (hit) return hit
+    const body = await service.at({ artifactId, at: s.at })
+    stateCache.set(s.at, body)
+    return body
+  }
+
+  // Resolve the selected (and compared) stops. Debounced so dragging the
+  // slider asks for the stop it lands on, not every stop it crosses; a
+  // stale response never overwrites a newer selection.
+  let ticket = 0
+  $effect(() => {
+    if (loadState !== "ready") return
+    const a = stops[index]
+    const b = compare ? stops[compareIndex] : undefined
+    const mine = ++ticket
+    const run = async () => {
+      fetching = true
+      stateError = ""
+      try {
+        const [sa, sb] = await Promise.all([
+          a ? fetchState(a) : null,
+          b ? fetchState(b) : null,
+        ])
+        if (mine !== ticket) return
+        selected = sa
+        compared = sb
+      } catch {
+        if (mine === ticket) stateError = "Could not load that point in time."
+      } finally {
+        if (mine === ticket) fetching = false
+      }
+    }
+    const t = setTimeout(run, 150)
+    return () => clearTimeout(t)
+  })
+
+  const atNow = $derived(stops[index]?.kind === "now")
+  const bAtNow = $derived(!compare || stops[compareIndex]?.kind === "now")
+
+  /** A's data and B's data (B = now unless comparing). */
+  const fromData = $derived(atNow ? currentData : (selected?.data ?? null))
+  const toData = $derived(bAtNow ? currentData : (compared?.data ?? null))
+  const fromVersion = $derived(atNow ? currentVersion : selected?.version)
+  const toVersion = $derived(bAtNow ? currentVersion : compared?.version)
+
+  const diff: DataDiff | null = $derived(
+    fromData && toData && !(atNow && bAtNow)
+      ? diffData(fromData, toData)
+      : null,
+  )
+  const changed = $derived(
+    diff ? diff.keys.filter((k) => k.status !== "same") : [],
+  )
+
+  function step(delta: number) {
+    index = Math.min(stops.length - 1, Math.max(0, index + delta))
+  }
+
+  // Change is shown by sign, never by color: whether "up" is good is the
+  // metric's business (a stats card's goodDirection), not the diff's.
+
+  function num(v: number | null): string {
+    return v === null
+      ? "-"
+      : v.toLocaleString(undefined, { maximumFractionDigits: 2 })
+  }
+
+  function leafText(v: unknown): string {
+    if (v === undefined) return "-"
+    const s = typeof v === "string" ? v : JSON.stringify(v)
+    return s.length > 60 ? `${s.slice(0, 59)}…` : s
+  }
+
+  const toLabel = $derived(
+    bAtNow ? "now" : fmt(stops[compareIndex]?.at ?? null),
+  )
+</script>
+
+{#if hasTrail}
+  <!-- mos-8fvt9: collapsed, one quiet line (no card, no comment pill);
+       opened, the scrubber's card. -->
+  <section
+    class={open
+      ? "border-base-content/10 bg-base-100 rounded-box mb-4 border"
+      : "mb-2"}
+    aria-label="Page history"
+    data-history-scrubber
+  >
+    <button
+      type="button"
+      class={open
+        ? "btn btn-ghost btn-sm rounded-field w-full justify-between"
+        : "btn btn-ghost btn-xs rounded-field text-base-content/60 -ml-2 gap-1.5 font-normal"}
+      aria-expanded={open}
+      onclick={() => (open = !open)}
+    >
+      {#if open}
+        <span>History</span>
+        <span class="text-base-content/60 text-xs font-normal">Hide</span>
+      {:else}
+        <!-- History glyph (lucide "history" path), inline: no icon dependency. -->
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          ><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path
+            d="M3 3v5h5"
+          /><path d="M12 7v5l4 2" /></svg
+        >
+        <span>History</span>
+        <span class="text-base-content/40"
+          >· see this page at an earlier time</span
+        >
+      {/if}
+    </button>
+
+    {#if open}
+      <div class="border-base-content/10 space-y-4 border-t p-3 sm:p-4">
+        <div class="space-y-2">
+          <label
+            class="block text-sm font-medium"
+            for="history-at-{artifactId}"
+          >
+            {compare ? "Compare from" : "Show the page as it was at"}
+          </label>
+          <input
+            id="history-at-{artifactId}"
+            type="range"
+            class="range range-sm range-primary w-full"
+            min="0"
+            max={stops.length - 1}
+            step="1"
+            bind:value={index}
+            aria-valuetext={stopLabel(stops[index])}
+          />
+          <div class="flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs rounded-field"
+              disabled={index === 0}
+              onclick={() => step(-1)}
+              aria-label="Earlier point">← Earlier</button
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs rounded-field"
+              disabled={index === stops.length - 1}
+              onclick={() => step(1)}
+              aria-label="Later point">Later →</button
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs rounded-field"
+              disabled={atNow}
+              onclick={() => (index = stops.length - 1)}>Back to now</button
+            >
+            <label class="label ml-auto cursor-pointer gap-2 text-sm">
+              <input
+                type="checkbox"
+                class="toggle toggle-sm"
+                bind:checked={compare}
+              />
+              Compare with…
+            </label>
+          </div>
+          <p class="text-sm" aria-live="polite" data-history-selected>
+            <span class="font-medium">{stopLabel(stops[index])}</span>
+            <span class="text-base-content/60">
+              · {index + 1} of {stops.length}</span
+            >
+          </p>
+
+          {#if compare}
+            <label
+              class="block pt-2 text-sm font-medium"
+              for="history-to-{artifactId}">Compare to</label
+            >
+            <input
+              id="history-to-{artifactId}"
+              type="range"
+              class="range range-sm range-secondary w-full"
+              min="0"
+              max={stops.length - 1}
+              step="1"
+              bind:value={compareIndex}
+              aria-valuetext={stopLabel(stops[compareIndex])}
+            />
+            <p class="text-sm" data-history-compared>
+              <span class="font-medium">{stopLabel(stops[compareIndex])}</span>
+            </p>
+          {/if}
+        </div>
+
+        {#if trailStartAt}
+          <p class="text-base-content/60 text-xs">
+            Data history starts {fmt(trailStartAt)}. Up to {HISTORY_RETENTION.maxSnapshots}
+            updates from the last {HISTORY_RETENTION.maxAgeDays} days are kept.
+          </p>
+        {/if}
+
+        {#if stateError}
+          <div
+            role="alert"
+            class="border-error/30 bg-error/10 text-error-content rounded-box border p-3 text-sm"
+          >
+            {stateError}
+          </div>
+        {:else if atNow && bAtNow}
+          <p class="text-base-content/70 text-sm">
+            You are looking at the live page. Move the slider back to see an
+            earlier state and what changed since.
+          </p>
+        {:else if fetching && !diff}
+          <p class="text-base-content/70 text-sm" role="status">Loading…</p>
+        {:else if diff}
+          <div class="space-y-3" data-history-diff>
+            <h3 class="text-sm font-semibold">
+              What changed, {atNow ? "now" : fmt(stops[index]?.at ?? null)} → {toLabel}
+            </h3>
+            {#if fromVersion !== undefined && toVersion !== undefined && fromVersion !== toVersion}
+              <p class="text-sm">
+                Layout changed: v{fromVersion} → v{toVersion}
+              </p>
+            {/if}
+            {#if selected?.beforeTrail && !atNow}
+              <p
+                class="bg-warning/10 text-warning-content rounded-box p-2 text-xs"
+              >
+                This point is older than the retained data history; the page
+                shows its built-in numbers, which may differ from what was on
+                screen then.
+              </p>
+            {/if}
+            {#if changed.length === 0}
+              <p class="text-base-content/70 text-sm">No data changed.</p>
+            {/if}
+            {#each changed as k (k.key)}
+              <div class="border-base-content/10 rounded-box border p-2">
+                <p class="text-sm font-medium">
+                  <code class="text-xs">{k.key}</code>
+                  {#if k.status === "added"}
+                    <span class="badge badge-success badge-sm ml-1">added</span>
+                  {:else if k.status === "removed"}
+                    <span class="badge badge-error badge-sm ml-1">removed</span>
+                  {/if}
+                </p>
+                {#if k.status === "changed" && k.shape === "kpi"}
+                  <div class="overflow-x-auto">
+                    <table class="table table-xs mt-1">
+                      <thead>
+                        <tr>
+                          <th scope="col">Metric</th>
+                          <th scope="col" class="text-right">Then</th>
+                          <th scope="col" class="text-right">Now</th>
+                          <th scope="col" class="text-right">Change</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {#each k.kpis as kpi (kpi.label)}
+                          <tr>
+                            <th scope="row" class="font-normal">{kpi.label}</th>
+                            <td class="text-right tabular-nums"
+                              >{num(kpi.then)}</td
+                            >
+                            <td class="text-right tabular-nums"
+                              >{num(kpi.now)}</td
+                            >
+                            <td class="text-right font-medium tabular-nums">
+                              {kpi.delta === null
+                                ? "-"
+                                : formatDelta(kpi.delta, kpi.pct)}
+                            </td>
+                          </tr>
+                        {/each}
+                      </tbody>
+                    </table>
+                  </div>
+                {:else if k.status === "changed" && k.shape === "table"}
+                  <p class="text-sm">
+                    <span class="text-success">{k.added.length} added</span>
+                    · <span class="text-error">{k.removed.length} removed</span>
+                    · <span>{k.changed.length} changed</span>
+                    {#if k.truncated}
+                      <span class="text-base-content/60">
+                        (+{k.truncated} more)</span
+                      >
+                    {/if}
+                  </p>
+                  <ul class="mt-1 space-y-0.5 text-xs">
+                    {#each k.added as r (`a-${r.key}`)}
+                      <li><span class="text-success">+</span> {r.key}</li>
+                    {/each}
+                    {#each k.removed as r (`r-${r.key}`)}
+                      <li><span class="text-error">−</span> {r.key}</li>
+                    {/each}
+                    {#each k.changed as r (`c-${r.key}`)}
+                      <li>
+                        <span class="text-base-content/60">~</span>
+                        {r.key}:
+                        <span class="text-base-content/70"
+                          >{r.fields.join(", ")}</span
+                        >
+                      </li>
+                    {/each}
+                  </ul>
+                {:else if k.status === "changed" && k.shape === "value"}
+                  <ul class="mt-1 space-y-0.5 text-xs">
+                    {#each k.leaves as l (l.path)}
+                      <li class="break-words">
+                        <code>{l.path}</code>:
+                        {leafText(l.then)} → {leafText(l.now)}
+                        {#if l.delta !== null}
+                          <span class="font-medium"
+                            >({formatDelta(l.delta)})</span
+                          >
+                        {/if}
+                      </li>
+                    {/each}
+                    {#if k.truncated}
+                      <li class="text-base-content/60">+{k.truncated} more</li>
+                    {/if}
+                  </ul>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        {#if !compare && !atNow && selected}
+          <div
+            class="border-base-content/10 rounded-box border"
+            data-history-past-page
+          >
+            <p
+              class="bg-base-200 text-base-content/80 rounded-t-box border-base-content/10 border-b px-3 py-2 text-xs"
+            >
+              The page as it was {fmt(selected.at)}: layout v{selected.version}{selected.dataAt
+                ? `, data from ${fmt(selected.dataAt)}`
+                : ""}. Read-only.
+            </p>
+            <div class="p-3">
+              {#if selected.spec}
+                <BlockRenderer
+                  spec={selected.spec}
+                  {artifactId}
+                  version={selected.version}
+                  data={selected.data}
+                  readonly
+                />
+              {:else}
+                <p class="text-base-content/70 text-sm">
+                  Version {selected.version} is not a blocks page, so it cannot be
+                  shown here.
+                </p>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </section>
+{/if}

package/dist/artifact-blocks/HistoryScrubber.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HistoryService } from "./types.js";
+interface Props {
+    artifactId: string;
+    /** The live data the host is showing now (its poller's blob). */
+    currentData: Record<string, unknown>;
+    /** The layout version live now. */
+    currentVersion: number;
+    /** The host's history reads (HostAdapter.history). */
+    service: HistoryService;
+    /** Start expanded once there is a trail (tests, deep links). */
+    open?: boolean;
+}
+declare const HistoryScrubber: import("svelte").Component<Props, {}, "open">;
+type HistoryScrubber = ReturnType<typeof HistoryScrubber>;
+export default HistoryScrubber;

package/dist/artifact-blocks/Markdown.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+  /**
+   * Markdown (jatui-vsuzi) — the ONE rich-prose surface of artifact blocks:
+   * source → the shared sanitized renderer (blocks/markdown/render.ts) →
+   * {@html}, with the prose styles carried HERE rather than borrowed from a
+   * host's typography plugin. A host without `@tailwindcss/typography` (the
+   * jat IDE) rendered MOS markdown as flat text with invisible links
+   * (PARAMS-SPEC §4); these scoped styles make headings, lists, tables,
+   * code and — above all — links visible everywhere.
+   *
+   * Token-only theming (DaisyUI `--color-*` → jatui radius tokens), light +
+   * dark by construction, phone-safe (tables scroll inside the block, long
+   * words wrap). Paragraphs and list items cap near 70ch.
+   *
+   * The {@html} here is the contract's sanctioned path: the HTML has passed
+   * marked + DOMPurify with the blocks URL policy.
+   */
+  import type { Snippet } from "svelte"
+  import {
+    renderBlockMarkdown,
+    renderBlockMarkdownInline,
+  } from "./blocks/markdown/render.js"
+
+  interface Props {
+    source: string | null | undefined
+    /** Inline only: no paragraphs/headings (labels, option details). */
+    inline?: boolean
+    /** Smaller body text (card sections, comment threads). */
+    size?: "base" | "sm"
+    class?: string
+    /** Rendered before the prose (SectionTools floats here). */
+    children?: Snippet
+  }
+
+  let {
+    source,
+    inline = false,
+    size = "base",
+    class: className = "",
+    children,
+  }: Props = $props()
+
+  const html = $derived(
+    inline ? renderBlockMarkdownInline(source) : renderBlockMarkdown(source),
+  )
+</script>
+
+{#if inline}
+  <span class="ab-md ab-md-inline {className}">{@html html}</span>
+{:else}
+  <div class="ab-md flow-root text-base-content {className}" class:ab-md-sm={size === "sm"}>
+    {@render children?.()}
+    {@html html}
+  </div>
+{/if}
+
+<style>
+  .ab-md {
+    min-width: 0;
+    max-width: 100%;
+    font-size: 1rem;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+  }
+  .ab-md-sm {
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+  .ab-md :global(:where(p, ul, ol, blockquote, pre, hr, .md-table)) {
+    margin-block: 0.75em;
+  }
+  .ab-md :global(:where(p, li)) {
+    max-width: 70ch;
+  }
+  .ab-md > :global(:first-child),
+  .ab-md :global(:where(li) > :first-child) {
+    margin-top: 0;
+  }
+  .ab-md > :global(:last-child) {
+    margin-bottom: 0;
+  }
+  .ab-md :global(:where(h1, h2, h3, h4, h5, h6)) {
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    margin-block: 1.4em 0.5em;
+  }
+  .ab-md :global(h1) {
+    font-size: 1.5em;
+  }
+  .ab-md :global(h2) {
+    font-size: 1.25em;
+  }
+  .ab-md :global(h3) {
+    font-size: 1.1em;
+  }
+  .ab-md :global(:where(h4, h5, h6)) {
+    font-size: 1em;
+  }
+  .ab-md :global(:where(strong, b)) {
+    font-weight: 600;
+  }
+  /* Links are VISIBLE: primary hue + underline, never inherited body text. */
+  .ab-md :global(a[href]) {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.15em;
+  }
+  .ab-md :global(a[href]:hover) {
+    text-decoration-thickness: 2px;
+  }
+  .ab-md :global(a[href]:focus-visible) {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--jatui-radius-field, 0.25rem);
+  }
+  .ab-md :global(ul) {
+    list-style: disc;
+    padding-left: 1.4em;
+  }
+  .ab-md :global(ol) {
+    list-style: decimal;
+    padding-left: 1.6em;
+  }
+  .ab-md :global(li) {
+    margin-block: 0.25em;
+  }
+  .ab-md :global(li::marker) {
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+  }
+  .ab-md :global(blockquote) {
+    border-left: 3px solid
+      color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    padding-left: 0.9em;
+    color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+  }
+  .ab-md :global(hr) {
+    border: 0;
+    border-top: 1px solid
+      color-mix(in oklab, var(--color-base-content) 15%, transparent);
+  }
+  .ab-md :global(:not(pre) > code) {
+    font-size: 0.875em;
+    padding: 0.1em 0.4em;
+    border-radius: var(--jatui-radius-field, 0.25rem);
+    background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+  }
+  .ab-md :global(pre) {
+    overflow-x: auto;
+    padding: 0.8em 1em;
+    border-radius: var(--jatui-radius-box, 0.5rem);
+    background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
+    font-size: 0.875em;
+    line-height: 1.5;
+    overflow-wrap: normal;
+  }
+  .ab-md :global(.md-table) {
+    overflow-x: auto;
+  }
+  .ab-md :global(table) {
+    border-collapse: collapse;
+    font-size: 0.875em;
+    min-width: 100%;
+  }
+  .ab-md :global(:where(th, td)) {
+    padding: 0.4em 0.75em;
+    border-bottom: 1px solid
+      color-mix(in oklab, var(--color-base-content) 12%, transparent);
+    text-align: left;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: normal;
+  }
+  .ab-md :global(th) {
+    font-weight: 600;
+  }
+  .ab-md :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--jatui-radius-box, 0.5rem);
+  }
+  .ab-md-inline :global(p) {
+    display: inline;
+    margin: 0;
+  }
+</style>