@joewinke/jatui 0.37.0 → 0.38.0

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

@@ -0,0 +1,30 @@
+/**
+   * 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";
+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;
+}
+declare const Markdown: import("svelte").Component<Props, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

package/dist/artifact-blocks/NoteComposer.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  /**
+   * NoteComposer (jatui-vsuzi) — the ONE composer mount every artifact-block
+   * surface uses (verdict notes, comment threads, the Finish note, and the
+   * blocks' own per-item notes). It resolves the host's composer from the
+   * adapter (HostAdapter.composer — MOS passes its ReviewComposer) and its
+   * upload leg (HostAdapter.upload(artifactId)); without either it falls back
+   * to jatui's text composer. Blocks import THIS, never a host composer.
+   */
+  import { hostAdapter } from "./adapter.js"
+  import PlainComposer from "./PlainComposer.svelte"
+  import type { NoteComposerProps } from "./types.js"
+
+  interface Props extends NoteComposerProps {
+    /** The artifact the note belongs to — the upload leg's target. */
+    artifactId: string
+  }
+
+  let {
+    artifactId,
+    text = $bindable(""),
+    clips = $bindable([]),
+    ...rest
+  }: Props = $props()
+
+  const adapter = hostAdapter()
+  const Composer = adapter.composer ?? PlainComposer
+  const upload = $derived(adapter.upload?.(artifactId))
+</script>
+
+<Composer bind:text bind:clips {...rest} upload={rest.upload ?? upload} />

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

@@ -0,0 +1,8 @@
+import type { NoteComposerProps } from "./types.js";
+interface Props extends NoteComposerProps {
+    /** The artifact the note belongs to — the upload leg's target. */
+    artifactId: string;
+}
+declare const NoteComposer: import("svelte").Component<Props, {}, "text" | "clips">;
+type NoteComposer = ReturnType<typeof NoteComposer>;
+export default NoteComposer;

package/dist/artifact-blocks/PlainComposer.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  /**
+   * PlainComposer (jatui-vsuzi) — the default note composer when the host
+   * supplies none (HostAdapter.composer). Text first; with an `upload` leg
+   * it also takes files (picker, paste, drop) and shows them as chips. No
+   * recording: hosts that want voice/video/screen capture pass their own
+   * composer (MOS's ReviewComposer), which takes the same NoteComposerProps.
+   *
+   * Two modes, like every composer: a submit row (`submitLabel` +
+   * `onSubmit`, cleared on success, kept on failure) or host-driven
+   * (`bind:text` / `bind:clips`, no submit row).
+   */
+  import type { NoteAttachment, NoteComposerProps } from "./types.js"
+  import AttachmentChip from "./AttachmentChip.svelte"
+
+  let {
+    upload = undefined,
+    placeholder = "Type a note…",
+    label = "Note",
+    maxLength = undefined,
+    rows = 2,
+    submitLabel = undefined,
+    onSubmit = undefined,
+    busy = false,
+    disabled = false,
+    error = null,
+    onInput = undefined,
+    onBlur = undefined,
+    clips = $bindable([]),
+    onClipsChange = undefined,
+    maxClips = 10,
+    autofocus = false,
+    text = $bindable(""),
+    class: className = "",
+  }: NoteComposerProps = $props()
+
+  let inputEl = $state<HTMLTextAreaElement | null>(null)
+  let fileEl = $state<HTMLInputElement | null>(null)
+  let uploading = $state(0)
+  let localError = $state<string | null>(null)
+  let submitting = $state(false)
+
+  $effect(() => {
+    if (autofocus && inputEl) inputEl.focus()
+  })
+
+  const canAttach = $derived(Boolean(upload) && !disabled)
+  const shown = $derived(error ?? localError)
+
+  function setClips(next: NoteAttachment[]) {
+    clips = next
+    onClipsChange?.(next)
+  }
+
+  async function addFiles(files: Iterable<File>) {
+    if (!upload) return
+    for (const f of files) {
+      if ((clips?.length ?? 0) + uploading >= maxClips) {
+        localError = `Up to ${maxClips} attachments per note.`
+        break
+      }
+      uploading++
+      localError = null
+      try {
+        const clip = await upload(f, "file")
+        setClips([...(clips ?? []), clip])
+      } catch (e) {
+        localError = e instanceof Error ? e.message : "Couldn't attach that file."
+      } finally {
+        uploading--
+      }
+    }
+  }
+
+  function onPaste(e: ClipboardEvent) {
+    if (!canAttach) return
+    const files = [...(e.clipboardData?.files ?? [])]
+    if (files.length === 0) return
+    e.preventDefault()
+    void addFiles(files)
+  }
+
+  function onDrop(e: DragEvent) {
+    if (!canAttach) return
+    const files = [...(e.dataTransfer?.files ?? [])]
+    if (files.length === 0) return
+    e.preventDefault()
+    void addFiles(files)
+  }
+
+  async function submit() {
+    if (!onSubmit || submitting || busy) return
+    const body = text.trim()
+    if (!body && (clips?.length ?? 0) === 0) return
+    submitting = true
+    localError = null
+    try {
+      await onSubmit({ text: body, clips: clips ?? [] })
+      text = ""
+      setClips([])
+    } catch (e) {
+      // The draft stays; the host's `error` (or this) says why.
+      if (!error)
+        localError = e instanceof Error ? e.message : "Could not send that."
+    } finally {
+      submitting = false
+    }
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (submitLabel && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      void submit()
+    }
+  }
+</script>
+
+<div
+  class="flex flex-col gap-2 {className}"
+  ondragover={(e) => canAttach && e.preventDefault()}
+  ondrop={onDrop}
+  role="group"
+  aria-label={label}
+  data-plain-composer
+>
+  <textarea
+    bind:this={inputEl}
+    bind:value={text}
+    class="textarea textarea-sm w-full rounded-field"
+    {rows}
+    maxlength={maxLength}
+    {placeholder}
+    aria-label={label}
+    disabled={disabled || busy || submitting}
+    oninput={() => onInput?.(text)}
+    onblur={() => onBlur?.()}
+    onpaste={onPaste}
+    onkeydown={onKeydown}
+  ></textarea>
+  {#if (clips?.length ?? 0) > 0 || uploading > 0}
+    <ul class="flex flex-wrap items-center gap-1.5" aria-label="Attachments">
+      {#each clips ?? [] as clip (clip.name)}
+        <li class="flex items-center gap-0.5">
+          <AttachmentChip {clip} />
+          {#if !disabled}
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs btn-circle"
+              aria-label="Remove {clip.label ?? clip.name}"
+              onclick={() => setClips((clips ?? []).filter((c) => c !== clip))}
+              >✕</button
+            >
+          {/if}
+        </li>
+      {/each}
+      {#if uploading > 0}
+        <li class="text-base-content/60 flex items-center gap-1.5 text-xs">
+          <span class="loading loading-spinner loading-xs"></span>Attaching…
+        </li>
+      {/if}
+    </ul>
+  {/if}
+  {#if shown}
+    <p role="alert" class="text-error text-xs">{shown}</p>
+  {/if}
+  {#if canAttach || submitLabel}
+    <div class="flex flex-wrap items-center gap-2">
+      {#if canAttach}
+        <input
+          bind:this={fileEl}
+          type="file"
+          multiple
+          class="hidden"
+          onchange={(e) => {
+            const input = e.currentTarget as HTMLInputElement
+            void addFiles([...(input.files ?? [])])
+            input.value = ""
+          }}
+        />
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs rounded-field"
+          onclick={() => fileEl?.click()}
+        >
+          Attach file
+        </button>
+      {/if}
+      {#if submitLabel}
+        <button
+          type="button"
+          class="btn btn-primary btn-sm rounded-field ml-auto"
+          disabled={disabled || busy || submitting || uploading > 0}
+          onclick={submit}
+        >
+          {busy || submitting ? "Sending…" : submitLabel}
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+/**
+   * PlainComposer (jatui-vsuzi) — the default note composer when the host
+   * supplies none (HostAdapter.composer). Text first; with an `upload` leg
+   * it also takes files (picker, paste, drop) and shows them as chips. No
+   * recording: hosts that want voice/video/screen capture pass their own
+   * composer (MOS's ReviewComposer), which takes the same NoteComposerProps.
+   *
+   * Two modes, like every composer: a submit row (`submitLabel` +
+   * `onSubmit`, cleared on success, kept on failure) or host-driven
+   * (`bind:text` / `bind:clips`, no submit row).
+   */
+import type { NoteComposerProps } from "./types.js";
+declare const PlainComposer: import("svelte").Component<NoteComposerProps, {}, "text" | "clips">;
+type PlainComposer = ReturnType<typeof PlainComposer>;
+export default PlainComposer;

package/dist/artifact-blocks/SectionTools.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  /**
+   * SectionTools (origin mos-8fvt9) — a section's own controls on its
+   * heading row: the block's Listen pill (when it reads prose) and its
+   * comment pill, right-aligned and compact, ON the heading's line rather
+   * than stacked above it.
+   *
+   * Placement is a right float the heading (and the text after it) wraps
+   * around, so a long heading never collides with the controls on a phone.
+   * The host wraps it in a `flow-root` box so the float never overhangs
+   * into the next block. When a Listen player opens, its bar replaces the
+   * pill and the group takes the full width — the transport lives with the
+   * text it reads.
+   *
+   * Listen comes from the host's Listen snippet (HostAdapter.listen, or a
+   * provideBlockListen() override below it; none on a share link → no
+   * Listen); the comment pill is `ctx.tools` from BlockRenderer (none
+   * without comments → nothing). With neither, nothing renders at all.
+   */
+  import { hostAdapter } from "./adapter.js"
+  import { blockListen } from "./listen/context.js"
+  import type { BlockContext } from "./types.js"
+
+  interface Props {
+    ctx: BlockContext | undefined
+    /**
+     * Human name of what this block's Listen reads ("What this page is"),
+     * completing "Listen to: <label>". Omitted = no Listen (a block that
+     * is not prose: a stats grid, a table).
+     */
+    listenLabel?: string | null
+    /**
+     * A flex item in the block's own title row instead of a float (blocks
+     * whose title is a short line above a grid, table or media: a float
+     * there would narrow the grid beside it).
+     */
+    inline?: boolean
+  }
+
+  let { ctx, listenLabel = null, inline = false }: Props = $props()
+
+  const override = blockListen()
+  const adapter = hostAdapter()
+  const listen = $derived(
+    listenLabel !== null ? (override ? override.render : (adapter.listen ?? null)) : null,
+  )
+  const group = $derived(`block-${ctx?.blockId ?? ""}`)
+
+  /** The block's own section is the highlight/scroll-follow target: the
+   * group IS BlockRenderer's `<section id>`. */
+  function anchorFor(g: string): string {
+    return typeof CSS !== "undefined" && CSS.escape ? `#${CSS.escape(g)}` : `#${g}`
+  }
+</script>
+
+{#if listen || ctx?.tools}
+  <div class="section-tools" class:inline data-section-tools>
+    {#if listen}
+      {@render listen({ group, label: listenLabel ?? "", anchor: anchorFor(group) })}
+    {/if}
+    {#if ctx?.tools}
+      {@render ctx.tools()}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  /* Float at the heading's right; the heading wraps around it. The element
+     right after the float drops its top margin (a prose h2 carries 2em),
+     so the heading's first line sits level with the controls instead of
+     a heading-margin below them. */
+  .section-tools {
+    float: right;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin: 0 0 0.25rem 0.75rem;
+  }
+  .section-tools + :global(*) {
+    margin-top: 0 !important;
+  }
+  .section-tools.inline {
+    float: none;
+    flex-shrink: 0;
+    margin: 0 0 0 auto;
+  }
+  /* Open: the bar takes the full width, the comment pill stays beside it.
+     `.lc-bar` is jatui ListenControl's open bar; a host player can opt in
+     with `data-listen-open`. */
+  .section-tools:has(:global(.lc-bar)),
+  .section-tools:has(:global([data-listen-open])) {
+    float: none;
+    clear: both;
+    width: 100%;
+    margin: 0 0 0.5rem 0;
+  }
+  .section-tools:has(:global(.lc-bar)) > :global(:first-child),
+  .section-tools:has(:global([data-listen-open])) > :global(:first-child) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { BlockContext } from "./types.js";
+interface Props {
+    ctx: BlockContext | undefined;
+    /**
+     * Human name of what this block's Listen reads ("What this page is"),
+     * completing "Listen to: <label>". Omitted = no Listen (a block that
+     * is not prose: a stats grid, a table).
+     */
+    listenLabel?: string | null;
+    /**
+     * A flex item in the block's own title row instead of a float (blocks
+     * whose title is a short line above a grid, table or media: a float
+     * there would narrow the grid beside it).
+     */
+    inline?: boolean;
+}
+declare const SectionTools: import("svelte").Component<Props, {}, "">;
+type SectionTools = ReturnType<typeof SectionTools>;
+export default SectionTools;

package/dist/artifact-blocks/adapter.d.ts

@@ -0,0 +1,13 @@
+import type { BlockServices, HostAdapter } from "./types.js";
+/**
+ * The context key itself, for tests that mount a block or a chrome piece
+ * directly (`mount(C, { context: new Map([[HOST_ADAPTER_KEY, adapter]]) })`).
+ * Hosts call provideHostAdapter() (or pass `adapter` to the view).
+ */
+export declare const HOST_ADAPTER_KEY: symbol;
+/** Host-side: publish the adapter to every component below. */
+export declare function provideHostAdapter(adapter: HostAdapter | null | undefined): void;
+/** Component-side: the adapter, or the empty (read-only) one. */
+export declare function hostAdapter(): HostAdapter;
+/** The block services (always an object). */
+export declare function hostServices(adapter: HostAdapter): BlockServices;

package/dist/artifact-blocks/adapter.js

@@ -0,0 +1,31 @@
+/**
+ * The HostAdapter on the Svelte context chain (jatui-vsuzi).
+ *
+ * BlocksArtifactView (or a bare BlockRenderer) publishes the host's adapter
+ * once; every component below — BlockVerdict, BlockComments, NoteComposer,
+ * SectionTools and any block — reads it from here instead of importing a
+ * host module. No adapter → the read-only defaults: no comments, no review
+ * send, text-only notes, no Listen, no history, no live-data refresh.
+ */
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("artifact-blocks-host-adapter");
+/**
+ * The context key itself, for tests that mount a block or a chrome piece
+ * directly (`mount(C, { context: new Map([[HOST_ADAPTER_KEY, adapter]]) })`).
+ * Hosts call provideHostAdapter() (or pass `adapter` to the view).
+ */
+export const HOST_ADAPTER_KEY = KEY;
+const EMPTY = Object.freeze({});
+const NO_SERVICES = Object.freeze({});
+/** Host-side: publish the adapter to every component below. */
+export function provideHostAdapter(adapter) {
+    setContext(KEY, adapter ?? EMPTY);
+}
+/** Component-side: the adapter, or the empty (read-only) one. */
+export function hostAdapter() {
+    return getContext(KEY) ?? EMPTY;
+}
+/** The block services (always an object). */
+export function hostServices(adapter) {
+    return adapter.services ?? NO_SERVICES;
+}

package/dist/artifact-blocks/autoSend.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Auto-send when a review is complete (mos-yra79, Joe 2026-10-19: "after I
+ * do it in the page I have to come back here and click Send? Why didn't
+ * they send at the time?").
+ *
+ * The moment the viewer decides the LAST open item on a page, the page
+ * sends by itself after a short grace: "All decided · sending in 5s ·
+ * Undo". Undo keeps the page a draft. The send is the page's own Send
+ * (Finish review / Done reviewing): no new semantics.
+ *
+ * The rule, as a state machine fed by the page on every change:
+ *
+ *   - it arms only on a TRANSITION to complete seen in this tab. A page
+ *     that loads already complete (an old unsent draft) never sends by
+ *     itself; the desk's "Send all" is for those;
+ *   - any open item again (an undecided verdict) cancels, and re-arms on
+ *     the next completion;
+ *   - Undo cancels and stays cancelled until the page is incomplete again,
+ *     so a viewer who said "not yet" is not asked again by the next save;
+ *   - typing (`bump`) restarts the grace, so a note the viewer is still
+ *     writing is never cut off mid-word. The send flushes it first.
+ *
+ * Runes module: each call creates its own state capsule.
+ */
+export interface AutoSend {
+    /** A send is counting down. */
+    readonly pending: boolean;
+    /** Whole seconds left on the countdown (0 when not pending). */
+    readonly remaining: number;
+    /** Feed the page's state: every unit decided, and a send is possible. */
+    update: (complete: boolean, eligible: boolean) => void;
+    /** Cancel the countdown and keep the page a draft. */
+    undo: () => void;
+    /** Send now, skipping the rest of the grace. */
+    sendNow: () => void;
+    /** The viewer is still typing: restart the grace. */
+    bump: () => void;
+    /** Tear down timers (unmount). */
+    stop: () => void;
+}
+interface AutoSendOptions {
+    /** The grace before the send, in ms. */
+    delayMs?: number;
+    /** The page's own send. */
+    onSend: () => void | Promise<void>;
+}
+export declare const AUTO_SEND_DELAY_MS = 5000;
+export declare function createAutoSend(opts: AutoSendOptions): AutoSend;
+export {};

package/dist/artifact-blocks/autoSend.js

@@ -0,0 +1,103 @@
+/* autoSend.svelte.js generated by Svelte v5.53.11 */
+import * as $ from 'svelte/internal/client';
+
+export const AUTO_SEND_DELAY_MS = 5_000;
+
+export function createAutoSend(opts) {
+	const delay = opts.delayMs ?? AUTO_SEND_DELAY_MS;
+	let pending = $.state(false);
+	let remaining = $.state(0);
+
+	/** The last state seen; null before the first update (the baseline). */
+	let wasComplete = null;
+
+	/** Undo was pressed on this completion. */
+	let dismissed = false;
+
+	let deadline = 0;
+	let fireTimer = null;
+	let tickTimer = null;
+
+	function clearTimers() {
+		if (fireTimer !== null) clearTimeout(fireTimer);
+		if (tickTimer !== null) clearInterval(tickTimer);
+
+		fireTimer = null;
+		tickTimer = null;
+	}
+
+	function cancel() {
+		clearTimers();
+		$.set(pending, false);
+		$.set(remaining, 0);
+	}
+
+	function fire() {
+		cancel();
+		void opts.onSend();
+	}
+
+	function arm() {
+		clearTimers();
+		$.set(pending, true);
+		deadline = Date.now() + delay;
+		$.set(remaining, Math.ceil(delay / 1000), true);
+		fireTimer = setTimeout(fire, delay);
+
+		tickTimer = setInterval(
+			() => {
+				$.set(remaining, Math.max(0, Math.ceil((deadline - Date.now()) / 1000)), true);
+			},
+			250
+		);
+	}
+
+	return {
+		get pending() {
+			return $.get(pending);
+		},
+
+		get remaining() {
+			return $.get(remaining);
+		},
+
+		update(complete, eligible) {
+			const prev = wasComplete;
+
+			wasComplete = complete;
+
+			if (!complete) {
+				dismissed = false;
+
+				if ($.get(pending)) cancel();
+
+				return;
+			}
+
+			if (!eligible) {
+				if ($.get(pending)) cancel();
+
+				return;
+			}
+
+			if (prev === false && !$.get(pending) && !dismissed) arm();
+		},
+
+		undo() {
+			dismissed = true;
+			cancel();
+		},
+
+		sendNow() {
+			if ($.get(pending)) fire();
+		},
+
+		bump() {
+			if ($.get(pending)) arm();
+		},
+
+		stop() {
+			clearTimers();
+		}
+	};
+}