@joewinke/jatui 0.36.3 → 0.38.0

package/dist/artifact-blocks/blocks/collage/CollageBlock.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+  /**
+   * collage block — 2-40 captioned images as masonry / grid / strip, with an
+   * optional full-width hero and an accessible lightbox.
+   *
+   * The lightbox is view-only interaction (no per-viewer state): it works on
+   * public share pages exactly as in the app. Esc closes, arrow keys walk the
+   * images in DISPLAY order (hero first), focus moves into the dialog on
+   * open and returns to the trigger on close, Tab is trapped inside, and the
+   * body scroll locks while it is open (all restored on close/unmount).
+   *
+   * SSR-safe: the dialog exists only after a click; no browser APIs run at
+   * init. Images are lazy + async-decoded; captions render as text.
+   */
+  import type { BlockProps } from "../../types"
+  import {
+    altOf,
+    defaultColumnsFor,
+    GRID_COLS_CLASS,
+    itemLabel,
+    MASONRY_COLS_CLASS,
+    viewOrder,
+    type CollageItem,
+    type CollageParams,
+  } from "./schema"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<CollageParams> = $props()
+
+  const layout = $derived(params?.layout ?? "grid")
+  const items = $derived(params?.items ?? [])
+  const heroIndex = $derived(params?.heroIndex)
+  const lightboxOn = $derived(params?.lightbox !== false)
+
+  /** Display order the lightbox walks: hero first, then the rest. */
+  const order = $derived(viewOrder(items.length, heroIndex))
+  const cols = $derived(params?.columns ?? defaultColumnsFor(items.length))
+  const colsClass = $derived(GRID_COLS_CLASS[cols] ?? GRID_COLS_CLASS[2])
+  const masonryClass = $derived(
+    MASONRY_COLS_CLASS[cols] ?? MASONRY_COLS_CLASS[2],
+  )
+
+  // ---- lightbox --------------------------------------------------------------
+  let open = $state(false)
+  /** Position within `order`, not the raw item index. */
+  let pos = $state(0)
+  let lastFocus: Element | null = null
+  let closeBtn: HTMLButtonElement | null = $state(null)
+  let dialogRef: HTMLDivElement | null = $state(null)
+
+  const current = $derived(items[order[pos] ?? 0] as CollageItem | undefined)
+
+  /** Item index → its position in display order. */
+  function posOf(index: number): number {
+    return Math.max(0, order.indexOf(index))
+  }
+
+  function openAt(p: number) {
+    if (!lightboxOn) return
+    pos = p
+    lastFocus = document.activeElement
+    open = true
+  }
+
+  function close() {
+    open = false
+    if (lastFocus instanceof HTMLElement) lastFocus.focus()
+    lastFocus = null
+  }
+
+  function step(delta: number) {
+    const n = order.length
+    if (n === 0) return
+    pos = (((pos + delta) % n) + n) % n
+  }
+
+  function onWindowKey(e: KeyboardEvent) {
+    if (!open) return
+    if (e.key === "Escape") {
+      e.preventDefault()
+      close()
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault()
+      step(1)
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault()
+      step(-1)
+    } else if (e.key === "Tab") {
+      // Minimal focus trap: wrap at the dialog's button bounds.
+      const focusables = dialogRef
+        ? [...dialogRef.querySelectorAll<HTMLButtonElement>("button")]
+        : []
+      if (focusables.length === 0) return
+      const first = focusables[0]
+      const last = focusables[focusables.length - 1]
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault()
+        first.focus()
+      }
+    }
+  }
+
+  // Focus the dialog's close button once it exists; lock body scroll while
+  // open (both restore on close / unmount via the effect teardown).
+  $effect(() => {
+    if (open && closeBtn) closeBtn.focus()
+  })
+  $effect(() => {
+    if (!open) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.body.style.overflow = prev
+    }
+  })
+
+  // ---- media -----------------------------------------------------------------
+  /** Object-fit classes per surface; masonry keeps the natural ratio. */
+  function mediaClass(surface: "hero" | "cell"): string {
+    if (layout === "masonry") return "w-full h-auto"
+    if (surface === "hero") return "aspect-video w-full object-cover"
+    return "aspect-[4/3] w-full object-cover"
+  }
+</script>
+
+{#snippet figure(item: CollageItem, index: number, surface: "hero" | "cell")}
+  {#if lightboxOn}
+    <button
+      type="button"
+      class="group block w-full text-left"
+      aria-label={itemLabel(item, index + 1)}
+      onclick={() => openAt(posOf(index))}
+    >
+      <span class="block overflow-hidden rounded-field">
+        <img
+          src={item.src}
+          alt={altOf(item)}
+          loading="lazy"
+          decoding="async"
+          class={mediaClass(surface)}
+        />
+      </span>
+      {#if item.caption}
+        <span class="mt-1 block text-xs text-base-content/70">
+          {item.caption}
+        </span>
+      {/if}
+    </button>
+  {:else}
+    <figure class="m-0">
+      <span class="block overflow-hidden rounded-field">
+        <img
+          src={item.src}
+          alt={altOf(item)}
+          loading="lazy"
+          decoding="async"
+          class={mediaClass(surface)}
+        />
+      </span>
+      {#if item.caption}
+        <figcaption class="mt-1 text-xs text-base-content/70">
+          {item.caption}
+        </figcaption>
+      {/if}
+    </figure>
+  {/if}
+{/snippet}
+
+<section class="artifact-collage 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}
+
+  {#if heroIndex !== undefined && items[heroIndex]}
+    <div class="mb-3">
+      {@render figure(items[heroIndex], heroIndex, "hero")}
+    </div>
+  {/if}
+
+  {#if layout === "masonry"}
+    <div class="columns-2 gap-3 {masonryClass}">
+      {#each items as item, i (i)}
+        {@const isHero = heroIndex === i}
+        {#if !isHero}
+          <div class="mb-3 break-inside-avoid">
+            {@render figure(item, i, "cell")}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else if layout === "strip"}
+    <div
+      class="flex gap-3 overflow-x-auto pb-1 snap-x"
+      role="region"
+      aria-label={params?.title ?? "Image strip"}
+      tabindex="0"
+    >
+      {#each items as item, i (i)}
+        {@const isHero = heroIndex === i}
+        {#if !isHero}
+          <div class="w-60 shrink-0 snap-center sm:w-72">
+            {@render figure(item, i, "cell")}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <div class="grid grid-cols-2 gap-3 {colsClass}">
+      {#each items as item, i (i)}
+        {@const isHero = heroIndex === i}
+        {#if !isHero}
+          {@render figure(item, i, "cell")}
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</section>
+
+{#if open && current}
+  <!-- The lightbox: a fixed overlay, NOT a <dialog> — jsdom + print + the
+       blocks host all treat a plain overlay the same, and focus stays ours. -->
+  <!-- The backdrop is a deliberate click-only dismiss surface: the keyboard
+       path is Esc and the Close button inside the dialog. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-neutral/90 p-4 sm:p-8"
+    role="presentation"
+    onclick={(e) => {
+      if (e.target === e.currentTarget) close()
+    }}
+  >
+    <div
+      class="flex max-h-full w-full max-w-4xl flex-col items-center"
+      bind:this={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label={params?.title ?? "Image viewer"}
+    >
+      <img
+        src={current.src}
+        alt={altOf(current)}
+        class="max-h-[78vh] w-auto max-w-full rounded-box object-contain"
+      />
+      {#if current.caption}
+        <p class="mt-2 text-center text-sm text-neutral-content">
+          {current.caption}
+        </p>
+      {/if}
+      <div class="mt-2 flex items-center gap-2">
+        <button
+          type="button"
+          class="btn btn-sm rounded-field border-base-content/15 bg-base-100 text-base-content"
+          aria-label="Previous image"
+          onclick={() => step(-1)}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+        </button>
+        <span class="text-sm tabular-nums text-neutral-content">
+          {pos + 1} / {order.length}
+        </span>
+        <button
+          type="button"
+          class="btn btn-sm rounded-field border-base-content/15 bg-base-100 text-base-content"
+          aria-label="Next image"
+          onclick={() => step(1)}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm rounded-field border-base-content/15 bg-base-100 text-base-content"
+          aria-label="Close viewer"
+          bind:this={closeBtn}
+          onclick={close}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<svelte:window onkeydown={onWindowKey} />

package/dist/artifact-blocks/blocks/collage/CollageBlock.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+   * collage block — 2-40 captioned images as masonry / grid / strip, with an
+   * optional full-width hero and an accessible lightbox.
+   *
+   * The lightbox is view-only interaction (no per-viewer state): it works on
+   * public share pages exactly as in the app. Esc closes, arrow keys walk the
+   * images in DISPLAY order (hero first), focus moves into the dialog on
+   * open and returns to the trigger on close, Tab is trapped inside, and the
+   * body scroll locks while it is open (all restored on close/unmount).
+   *
+   * SSR-safe: the dialog exists only after a click; no browser APIs run at
+   * init. Images are lazy + async-decoded; captions render as text.
+   */
+import type { BlockProps } from "../../types";
+declare const CollageBlock: import("svelte").Component<BlockProps<{
+    layout: "grid" | "masonry" | "strip";
+    items: {
+        src: string;
+        caption?: string | undefined;
+        alt?: string | undefined;
+    }[];
+    lightbox: boolean;
+    title?: string | undefined;
+    columns?: number | undefined;
+    heroIndex?: number | undefined;
+    dataKey?: string | undefined;
+}>, {}, "">;
+type CollageBlock = ReturnType<typeof CollageBlock>;
+export default CollageBlock;

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

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

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

@@ -0,0 +1,29 @@
+import CollageBlock from "./CollageBlock.svelte";
+import { collageSchema } from "./schema";
+const EXAMPLE = {
+    title: "Site relaunch — art direction round 2",
+    layout: "masonry",
+    items: [
+        { src: "/media/relaunch/hero-dusk.jpg", caption: "Hero, dusk grade" },
+        { src: "/media/relaunch/service-cards.jpg", caption: "Service card set" },
+        { src: "/media/relaunch/logo-lockup.jpg", caption: "Logo lockup" },
+        { src: "/media/relaunch/booking-panel.jpg", caption: "Booking panel" },
+        { src: "/media/relaunch/404.jpg", caption: "404 page" },
+    ],
+    heroIndex: 0,
+    columns: 3,
+    lightbox: true,
+};
+const def = {
+    type: "collage",
+    title: "Collage (image gallery)",
+    description: "2-40 captioned images in one gallery: layout 'masonry' (CSS columns, natural aspect ratios — art/brand rounds), 'grid' (uniform 4:3 cells — UI screenshots, contact sheets) or 'strip' (horizontal scroll row — before/after sets, film strips). Every item is { src, caption?, alt? } — src is an https:// URL or a root-relative MOS path (never base64), captions render as text under each image, alt defaults to the caption. heroIndex lifts one item to a full-width 16:9 hero above the rest. Clicking an image opens an accessible lightbox (Esc closes, arrow keys move, focus returns to the trigger) walking items in DISPLAY order — hero first; lightbox:false turns the whole thing static figures. Grid/masonry columns default by count (≤4 → 2, ≤9 → 3, else 4; phones always 2). Tip: masonry for mixed-ratio art, grid when rows should align; keep captions to one line — the story goes in a neighboring markdown block.",
+    schema: collageSchema,
+    component: CollageBlock,
+    // mos-8fvt9: the section's Listen + comment sit on the heading row.
+    hostsTools: (p) => Boolean(p.title),
+    example: EXAMPLE,
+    reviewableByDefault: true,
+    dataParam: "dataKey",
+};
+export default def;

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

@@ -0,0 +1,52 @@
+/**
+ * Collage block — params schema + pure layout helpers.
+ *
+ * Pure functions only (no DOM) so `block.test.ts` can exercise them and
+ * `CollageBlock.svelte` stays a thin renderer. Untrusted input rules
+ * (CONTRACT.md): image srcs go through the shared `urlSchema` (https:// or
+ * root-relative — never data:/javascript:), every string is length-capped,
+ * media is by URL only (never base64).
+ */
+import { z } from "zod";
+declare const COLLAGE_LAYOUTS: readonly ["masonry", "grid", "strip"];
+export type CollageLayout = (typeof COLLAGE_LAYOUTS)[number];
+declare const itemSchema: z.ZodObject<{
+    src: z.ZodString;
+    caption: z.ZodOptional<z.ZodString>;
+    alt: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type CollageItem = z.infer<typeof itemSchema>;
+export declare const collageSchema: z.ZodObject<{
+    title: z.ZodOptional<z.ZodString>;
+    layout: z.ZodDefault<z.ZodEnum<{
+        grid: "grid";
+        masonry: "masonry";
+        strip: "strip";
+    }>>;
+    items: z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        caption: z.ZodOptional<z.ZodString>;
+        alt: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    columns: z.ZodOptional<z.ZodNumber>;
+    heroIndex: z.ZodOptional<z.ZodNumber>;
+    lightbox: z.ZodDefault<z.ZodBoolean>;
+    dataKey: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type CollageParams = z.infer<typeof collageSchema>;
+/** Column count when the spec doesn't name one: small sets stay chunky. */
+export declare function defaultColumnsFor(count: number): 2 | 3 | 4;
+/** Static Tailwind classes — dynamic class names break extraction. */
+export declare const GRID_COLS_CLASS: Record<number, string>;
+export declare const MASONRY_COLS_CLASS: Record<number, string>;
+/**
+ * Display order of item indexes: the hero (when set) comes first, then the
+ * remaining items in their array order. The lightbox walks THIS order, so
+ * its prev/next matches what a viewer sees left-to-right.
+ */
+export declare function viewOrder(count: number, heroIndex: number | undefined): number[];
+/** Effective alt text: authored alt, else the caption, else none. */
+export declare function altOf(item: CollageItem): string;
+/** Screen-reader label for an item's open button. */
+export declare function itemLabel(item: CollageItem, position: number): string;
+export {};

package/dist/artifact-blocks/blocks/collage/schema.js

@@ -0,0 +1,86 @@
+/**
+ * Collage block — params schema + pure layout helpers.
+ *
+ * Pure functions only (no DOM) so `block.test.ts` can exercise them and
+ * `CollageBlock.svelte` stays a thin renderer. Untrusted input rules
+ * (CONTRACT.md): image srcs go through the shared `urlSchema` (https:// or
+ * root-relative — never data:/javascript:), every string is length-capped,
+ * media is by URL only (never base64).
+ */
+import { z } from "zod";
+import { shortTextSchema, urlSchema } from "../../params";
+const COLLAGE_LAYOUTS = ["masonry", "grid", "strip"];
+/** A collage of fewer than 2 images is not a collage; 41 is a page. */
+const MIN_ITEMS = 2;
+const MAX_ITEMS = 40;
+const itemSchema = z.object({
+    src: urlSchema,
+    /** Short line under the image. */
+    caption: shortTextSchema.optional(),
+    /** Alt text; defaults to the caption (both empty → decorative). */
+    alt: shortTextSchema.optional(),
+});
+export const collageSchema = z
+    .object({
+    title: shortTextSchema.optional(),
+    layout: z.enum(COLLAGE_LAYOUTS).default("grid"),
+    items: z.array(itemSchema).min(MIN_ITEMS).max(MAX_ITEMS),
+    /**
+     * Grid/masonry column count at sm+ (phone is always 2). Defaults by
+     * count — see defaultColumnsFor().
+     */
+    columns: z.number().int().min(2).max(4).optional(),
+    /** Index into `items` of the large hero rendered above the rest. */
+    heroIndex: z.number().int().min(0).optional(),
+    /** Click an image to open the lightbox (default true). */
+    lightbox: z.boolean().default(true),
+    /** Phase-3 live data: key into ctx.data whose value replaces params. */
+    dataKey: z.string().max(80).optional(),
+})
+    .superRefine((v, ctx) => {
+    if (v.heroIndex !== undefined && v.heroIndex >= v.items.length)
+        ctx.addIssue({
+            code: "custom",
+            path: ["heroIndex"],
+            message: `heroIndex must be an index into items (0-${v.items.length - 1})`,
+        });
+});
+// ── Pure helpers ──────────────────────────────────────────────────────────
+/** Column count when the spec doesn't name one: small sets stay chunky. */
+export function defaultColumnsFor(count) {
+    if (count <= 4)
+        return 2;
+    if (count <= 9)
+        return 3;
+    return 4;
+}
+/** Static Tailwind classes — dynamic class names break extraction. */
+export const GRID_COLS_CLASS = {
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-3",
+    4: "sm:grid-cols-4",
+};
+export const MASONRY_COLS_CLASS = {
+    2: "sm:columns-2",
+    3: "sm:columns-3",
+    4: "sm:columns-4",
+};
+/**
+ * Display order of item indexes: the hero (when set) comes first, then the
+ * remaining items in their array order. The lightbox walks THIS order, so
+ * its prev/next matches what a viewer sees left-to-right.
+ */
+export function viewOrder(count, heroIndex) {
+    const all = Array.from({ length: count }, (_, i) => i);
+    if (heroIndex === undefined || heroIndex < 0 || heroIndex >= count)
+        return all;
+    return [heroIndex, ...all.filter((i) => i !== heroIndex)];
+}
+/** Effective alt text: authored alt, else the caption, else none. */
+export function altOf(item) {
+    return item.alt ?? item.caption ?? "";
+}
+/** Screen-reader label for an item's open button. */
+export function itemLabel(item, position) {
+    return item.caption ? `Open: ${item.caption}` : `Open image ${position}`;
+}