@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/compare/CompareBlock.svelte

@@ -0,0 +1,484 @@
+<script lang="ts">
+  /**
+   * compare block — two media sides revealed through one draggable divider.
+   *
+   * a sits underneath (fully visible when the divider is at 0), b is clipped
+   * on top and revealed toward the right (vertical divider) or bottom
+   * (horizontal). The divider is a keyboard-accessible slider (role="slider":
+   * arrows, Home/End, Shift for a bigger step) and the whole stage is
+   * pointer-draggable with pointer capture.
+   *
+   * Under a 480px container the SAME DOM falls back to a side-by-side grid
+   * (CSS container query — no JS, SSR-safe): both sides fully visible with
+   * their labels, no divider, so a phone never hides half the comparison.
+   *
+   * Videos are muted + looping and start PAUSED — a shared play/pause runs
+   * both sides in sync while the divider moves. No autoplay: reduced-motion
+   * viewers get exactly what everyone else gets, just not moving.
+   *
+   * The optional pick verdict persists { pick: 'a' | 'b', at } through
+   * ctx.saveState; read-only surfaces render the saved pick as a badge with
+   * no buttons and never call saveState.
+   */
+  import Icon from "../checklist/Icon.svelte"
+  import type { BlockProps } from "../../types.js"
+  import {
+    altOf,
+    clipFor,
+    dividerValueText,
+    kindOf,
+    labelOf,
+    parsePick,
+    stepFor,
+    type CompareMedia,
+    type CompareParams,
+    type CompareSide,
+  } from "./schema.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<CompareParams> = $props()
+
+  // ---- geometry -------------------------------------------------------------
+  const orientation = $derived(params?.orientation ?? "vertical")
+  const vertical = $derived(orientation === "vertical")
+  /** Divider position, % of the stage from left/top. Authored start is
+   * clamped to 5-95 so a spec can never publish a nearly-shut wipe. */
+  let percent = $state(Math.min(95, Math.max(5, params?.startPercent ?? 50)))
+
+  const clip = $derived(clipFor(percent, orientation))
+  const valueText = $derived(
+    dividerValueText(percent, {
+      a: labelOf(params?.a ?? { src: "" }, "a"),
+      b: labelOf(params?.b ?? { src: "" }, "b"),
+    }),
+  )
+
+  // ---- dragging (pointer) ---------------------------------------------------
+  let stageEl: HTMLDivElement | null = $state(null)
+  let dragging = $state(false)
+
+  function percentFromEvent(e: PointerEvent): number {
+    if (!stageEl) return percent
+    const rect = stageEl.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return percent
+    const frac = vertical
+      ? (e.clientX - rect.left) / rect.width
+      : (e.clientY - rect.top) / rect.height
+    return Math.min(100, Math.max(0, frac * 100))
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    dragging = true
+    try {
+      stageEl?.setPointerCapture?.(e.pointerId)
+    } catch {
+      /* jsdom / detached node — drag still works through move events */
+    }
+    percent = percentFromEvent(e)
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!dragging) return
+    percent = percentFromEvent(e)
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    dragging = false
+    try {
+      stageEl?.releasePointerCapture?.(e.pointerId)
+    } catch {
+      /* capture was never taken or already released */
+    }
+  }
+
+  // ---- divider (keyboard) ---------------------------------------------------
+  function onDividerKey(e: KeyboardEvent) {
+    const next = stepFor(e.key, orientation, e.shiftKey, percent)
+    if (next === undefined) return
+    e.preventDefault()
+    percent = next
+  }
+
+  // ---- video transport ------------------------------------------------------
+  const kindA = $derived(kindOf(params?.a ?? { src: "" }))
+  const kindB = $derived(kindOf(params?.b ?? { src: "" }))
+  const anyVideo = $derived(kindA === "video" || kindB === "video")
+  let playing = $state(false)
+
+  /** The <video> elements inside the stage (both sides), SSR-safe. */
+  function videos(): HTMLVideoElement[] {
+    if (!stageEl) return []
+    return [...stageEl.querySelectorAll("video")]
+  }
+
+  function safePlay(v: HTMLVideoElement) {
+    try {
+      const p = v.play() as unknown
+      if (p && typeof (p as Promise<void>).catch === "function")
+        (p as Promise<void>).catch(() => {})
+    } catch {
+      /* jsdom or autoplay refusal — the paused start is the fallback */
+    }
+  }
+
+  function togglePlay() {
+    const vids = videos()
+    if (playing) {
+      for (const v of vids) v.pause()
+      playing = false
+    } else {
+      for (const v of vids) safePlay(v)
+      playing = true
+    }
+  }
+
+  // ---- pick A/B verdict -----------------------------------------------------
+  /** Interactive = the viewer can pick here (and it would persist). */
+  const interactive = $derived(Boolean(ctx?.saveState) && !ctx?.readonly)
+  const hasPick = $derived(Boolean(params?.pick))
+  /**
+   * This viewer's pick. ctx.state is keyed per (artifact, version, user,
+   * blockId) and does not change while mounted — one mount-time read, like
+   * the callout/checklist blocks; after that the local value is the truth.
+   */
+  let pick = $state<CompareSide | null>(parsePick(ctx?.state))
+  let saveError = $state<string | null>(null)
+
+  async function choose(side: CompareSide) {
+    if (!interactive || !ctx?.saveState) return
+    saveError = null
+    pick = side
+    try {
+      await ctx.saveState({ pick: side, at: new Date().toISOString() })
+    } catch (e) {
+      saveError = e instanceof Error ? e.message : "Saving failed"
+    }
+  }
+
+  /** Labels/alt for chips, fallback headers and the pick buttons. */
+  const labelA = $derived(labelOf(params?.a ?? { src: "" }, "a"))
+  const labelB = $derived(labelOf(params?.b ?? { src: "" }, "b"))
+  const altA = $derived(altOf(params?.a ?? { src: "" }, "a"))
+  const altB = $derived(altOf(params?.b ?? { src: "" }, "b"))
+</script>
+
+{#snippet media(m: CompareMedia, alt: string)}
+  {#if kindOf(m) === "video"}
+    <video src={m.src} muted loop playsinline preload="metadata"></video>
+  {:else}
+    <img src={m.src} {alt} loading="lazy" decoding="async" />
+  {/if}
+{/snippet}
+
+<section class="artifact-compare w-full">
+  {#if params?.title}
+    <div class="mb-2 flex items-center gap-2">
+      <div class="min-w-0 text-sm font-medium">{params.title}</div>
+      <SectionTools {ctx} inline />
+    </div>
+  {/if}
+
+  <div class="compare-frame rounded-box border border-base-300 bg-base-100">
+    <div
+      class="compare-stage touch-none"
+      class:dragging
+      style="height:{params?.height ?? 420}px; --stage-h:{params?.height ??
+        420}px"
+      bind:this={stageEl}
+      role="group"
+      aria-label={params?.title ?? "Before and after comparison"}
+      onpointerdown={onPointerDown}
+      onpointermove={onPointerMove}
+      onpointerup={onPointerUp}
+      onpointercancel={onPointerUp}
+    >
+      <div class="layer layer-a">
+        <span class="chip">{labelA}</span>
+        {@render media(params.a, altA)}
+      </div>
+      <div class="layer layer-b" style="clip-path:{clip}">
+        <span class="chip">{labelB}</span>
+        {@render media(params.b, altB)}
+      </div>
+
+      <div
+        class="divider"
+        class:horizontal={!vertical}
+        style={vertical ? `left:${percent}%` : `top:${percent}%`}
+      >
+        <button
+          type="button"
+          role="slider"
+          tabindex="0"
+          aria-label="Comparison divider"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(percent)}
+          aria-valuetext={valueText}
+          aria-orientation={vertical ? "horizontal" : "vertical"}
+          onkeydown={onDividerKey}
+        >
+          <span class="grip" aria-hidden="true"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  {#if anyVideo || hasPick}
+    <div class="mt-2 flex flex-wrap items-center justify-between gap-2">
+      {#if anyVideo}
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm rounded-field"
+          aria-pressed={playing}
+          onclick={togglePlay}
+        >
+          {#if playing}
+            <Icon name="pause" size={14} aria-hidden="true" />
+            Pause both
+          {:else}
+            <Icon name="play" size={14} aria-hidden="true" />
+            Play both in sync
+          {/if}
+        </button>
+      {:else}
+        <span></span>
+      {/if}
+
+      {#if hasPick && interactive}
+        <div
+          class="flex items-center gap-2"
+          role="group"
+          aria-label={params.pick?.question}
+        >
+          <span class="text-xs text-base-content/70">
+            {params.pick?.question}
+          </span>
+          <button
+            type="button"
+            class="btn btn-sm rounded-field {pick === 'a'
+              ? 'btn-primary'
+              : 'btn-outline'}"
+            aria-pressed={pick === "a"}
+            onclick={() => choose("a")}
+          >
+            A · {labelA}
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm rounded-field {pick === 'b'
+              ? 'btn-primary'
+              : 'btn-outline'}"
+            aria-pressed={pick === "b"}
+            onclick={() => choose("b")}
+          >
+            B · {labelB}
+          </button>
+          {#if saveError}
+            <span class="text-xs text-error" role="alert">{saveError}</span>
+          {/if}
+        </div>
+      {:else if hasPick && pick}
+        <span
+          class="badge badge-ghost gap-1 rounded-field text-xs"
+          aria-label="Saved pick"
+        >
+          <Icon name="check" size={12} aria-hidden="true" />
+          {params.pick?.question}: {pick === "a" ? labelA : labelB}
+        </span>
+      {/if}
+    </div>
+  {/if}
+</section>
+
+<style>
+  /* container-type turns .compare-frame into the query container the
+     side-by-side fallback reads — width of the BLOCK, not the viewport,
+     which is what matters for "is there room to wipe". */
+  .compare-frame {
+    container-type: inline-size;
+  }
+
+  .compare-stage {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .compare-stage.dragging {
+    cursor: grabbing;
+  }
+
+  .layer {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .layer :is(img, video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    user-select: none;
+  }
+
+  /* Floating label chips over each side. */
+  .chip {
+    position: absolute;
+    z-index: 2;
+    top: 8px;
+    left: 8px;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    background: color-mix(in oklch, var(--color-base-100) 88%, transparent);
+    color: var(--color-base-content);
+    border: 1px solid
+      color-mix(in oklch, var(--color-base-content) 12%, transparent);
+    font-size: 0.6875rem;
+    line-height: 1.4;
+    font-weight: 500;
+    pointer-events: none;
+  }
+
+  .layer-b .chip {
+    left: auto;
+    right: 8px;
+  }
+
+  /* Horizontal divider: B is revealed at the BOTTOM, so its chip moves to
+     the bottom edge to sit over its own side. */
+  .compare-stage:has(.divider.horizontal) .layer-b .chip {
+    top: auto;
+    bottom: 8px;
+  }
+
+  /* The divider: a 1px line across the stage + a centered round handle. */
+  .divider {
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+  }
+
+  .divider.horizontal {
+    top: 50%;
+    bottom: auto;
+    left: 0;
+    right: 0;
+    height: 0;
+    width: auto;
+  }
+
+  .divider::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -0.5px;
+    width: 1px;
+    background: color-mix(in oklch, var(--color-base-100) 85%, transparent);
+  }
+
+  .divider.horizontal::before {
+    top: -0.5px;
+    bottom: auto;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: 1px;
+  }
+
+  .divider button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 28px;
+    height: 28px;
+    border-radius: 9999px;
+    border: 1px solid
+      color-mix(in oklch, var(--color-base-content) 15%, transparent);
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: ew-resize;
+    box-shadow: 0 1px 4px
+      color-mix(in oklch, var(--color-base-content) 25%, transparent);
+  }
+
+  .divider.horizontal button {
+    cursor: ns-resize;
+  }
+
+  .divider button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* The three-line grip. */
+  .grip {
+    display: block;
+    width: 10px;
+    height: 2px;
+    border-radius: 9999px;
+    background: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+    box-shadow:
+      0 -3px 0 color-mix(in oklch, var(--color-base-content) 55%, transparent),
+      0 3px 0 color-mix(in oklch, var(--color-base-content) 55%, transparent);
+  }
+
+  /* ── Phone fallback: same DOM, side-by-side ─────────────────────────────
+     Under a 480px container the wipe halves get tiny, so BOTH sides are
+     shown fully, side by side, with their labels as headers. Pure CSS:
+     no JS mode switch, nothing to hydrate, SSR renders identically. */
+  @container (max-width: 479.9px) {
+    .compare-stage {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      height: auto !important;
+      background: color-mix(
+        in oklch,
+        var(--color-base-content) 10%,
+        transparent
+      );
+    }
+
+    .layer {
+      position: static;
+      clip-path: none !important;
+      flex-direction: column;
+    }
+
+    .layer-a {
+      grid-column: 1;
+    }
+
+    .layer-b {
+      grid-column: 2;
+    }
+
+    .layer :is(img, video) {
+      height: var(--stage-h, 420px);
+    }
+
+    .chip {
+      position: static;
+      order: -1;
+      align-self: flex-start;
+      margin: 6px 0 6px 6px;
+      border-radius: 9999px;
+    }
+
+    .divider {
+      display: none;
+    }
+  }
+</style>

package/dist/artifact-blocks/blocks/compare/CompareBlock.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { BlockProps } from "../../types.js";
+declare const CompareBlock: import("svelte").Component<BlockProps<{
+    a: {
+        src: string;
+        kind?: "video" | "image" | undefined;
+        label?: string | undefined;
+        alt?: string | undefined;
+    };
+    b: {
+        src: string;
+        kind?: "video" | "image" | undefined;
+        label?: string | undefined;
+        alt?: string | undefined;
+    };
+    startPercent: number;
+    orientation: "horizontal" | "vertical";
+    height: number;
+    title?: string | undefined;
+    pick?: {
+        question: string;
+    } | undefined;
+    dataKey?: string | undefined;
+}>, {}, "">;
+type CompareBlock = ReturnType<typeof CompareBlock>;
+export default CompareBlock;

package/dist/artifact-blocks/blocks/compare/block.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Compare block definition (block type "compare").
+ * Contract: src/lib/artifact-blocks/CONTRACT.md — registry.ts discovers this
+ * folder; nothing else registers a block.
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type CompareParams } from "./schema.js";
+declare const def: ArtifactBlockDef<CompareParams>;
+export default def;

package/dist/artifact-blocks/blocks/compare/block.js

@@ -0,0 +1,32 @@
+import CompareBlock from "./CompareBlock.svelte";
+import { compareSchema } from "./schema.js";
+const EXAMPLE = {
+    title: "Landing hero — before / after",
+    a: {
+        src: "/media/hero-v1.jpg",
+        label: "Before",
+        alt: "First landing hero, centered text over a flat color band",
+    },
+    b: {
+        src: "/media/hero-v2.jpg",
+        label: "After",
+        alt: "Revised landing hero, left-aligned text over product photography",
+    },
+    startPercent: 50,
+    orientation: "vertical",
+    height: 420,
+    pick: { question: "Which hero should ship?" },
+};
+const def = {
+    type: "compare",
+    title: "Compare (before/after slider)",
+    description: "Two media items (images or videos) revealed through one draggable divider — the classic before/after wipe. a sits underneath (shown when the divider is fully left/top), b is clipped on top and revealed toward the right/bottom. Every string is text (labels default to Before/After); media src is an https:// URL or a root-relative MOS path — never base64. On narrow containers (< 480px) the slider falls back to showing BOTH sides side-by-side with their labels, so a phone never hides half the comparison. The divider is a keyboard-accessible slider (arrow keys, Home/End, Shift = bigger step). Videos render muted + looping and start PAUSED — a shared play/pause runs both sides in sync while dragging; reduced-motion viewers get the same paused start. Optional pick: { question } adds an interactive A/B verdict persisted per viewer via ctx.saveState as { pick: 'a' | 'b', at } — it renders read-only (saved pick as a badge, no buttons) where saving is impossible. Tip: keep both sides the same aspect ratio so the wipe aligns; use one compare per idea and put the why in a neighboring markdown block, not in the labels.",
+    schema: compareSchema,
+    component: CompareBlock,
+    // mos-8fvt9: the section's Listen + comment sit on the heading row.
+    hostsTools: (p) => Boolean(p.title),
+    example: EXAMPLE,
+    interactive: true,
+    dataParam: "dataKey",
+};
+export default def;

package/dist/artifact-blocks/blocks/compare/schema.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Compare block — params schema + pure helpers (before/after slider).
+ *
+ * Pure functions only (no DOM) so `block.test.ts` can exercise them and
+ * `CompareBlock.svelte` stays a thin renderer. Untrusted input rules
+ * (CONTRACT.md): URLs go through the shared `urlSchema` (https:// or
+ * root-relative — never data:/javascript:/http://), every string is
+ * length-capped, media is by URL only (never base64).
+ */
+import { z } from "zod";
+declare const COMPARE_SIDES: readonly ["a", "b"];
+export type CompareSide = (typeof COMPARE_SIDES)[number];
+export type MediaKind = "image" | "video";
+export declare const compareSchema: z.ZodObject<{
+    title: z.ZodOptional<z.ZodString>;
+    a: z.ZodObject<{
+        src: z.ZodString;
+        kind: z.ZodOptional<z.ZodEnum<{
+            video: "video";
+            image: "image";
+        }>>;
+        label: z.ZodOptional<z.ZodString>;
+        alt: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    b: z.ZodObject<{
+        src: z.ZodString;
+        kind: z.ZodOptional<z.ZodEnum<{
+            video: "video";
+            image: "image";
+        }>>;
+        label: z.ZodOptional<z.ZodString>;
+        alt: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    startPercent: z.ZodDefault<z.ZodNumber>;
+    orientation: z.ZodDefault<z.ZodEnum<{
+        horizontal: "horizontal";
+        vertical: "vertical";
+    }>>;
+    height: z.ZodDefault<z.ZodNumber>;
+    pick: z.ZodOptional<z.ZodObject<{
+        question: z.ZodString;
+    }, z.core.$strip>>;
+    dataKey: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type CompareParams = z.infer<typeof compareSchema>;
+export type CompareMedia = CompareParams["a"];
+/** The renderer kind for a side: explicit param wins, else the extension. */
+export declare function kindOf(media: CompareMedia): MediaKind;
+/** Effective chip label for a side: authored, else Before/After. */
+export declare function labelOf(media: CompareMedia, side: CompareSide): string;
+/** Effective alt text: authored alt, else the chip label, else the side. */
+export declare function altOf(media: CompareMedia, side: CompareSide): string;
+/** Clamp a divider position into [DIVIDER_MIN, DIVIDER_MAX]. */
+export declare function clampPercent(p: number): number;
+/** Next divider position for a key press (undefined = key does nothing). */
+export declare function stepFor(key: string, orientation: "vertical" | "horizontal", shift: boolean, current: number): number | undefined;
+/** Accessible description of the divider position for aria-valuetext. */
+export declare function dividerValueText(percent: number, labels: Record<CompareSide, string>): string;
+/**
+ * clip-path insets that reveal side B from the right (vertical divider) or
+ * the bottom (horizontal) while side A sits fully underneath. Both sides
+ * always render; the clip does the reveal.
+ */
+export declare function clipFor(percent: number, orientation: "vertical" | "horizontal"): string;
+/** State saved through ctx.saveState for the pick verdict. */
+export interface CompareState {
+    /** Chosen side, when the viewer has picked. */
+    pick?: CompareSide;
+    /** ISO timestamp of the last save. */
+    at?: string;
+}
+/** Read untrusted saved state into a pick — junk in, null out. */
+export declare function parsePick(state: unknown): CompareSide | null;
+export {};