@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/AttachmentChip.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  /**
+   * AttachmentChip (jatui-vsuzi) — the default chip for one note attachment:
+   * a labelled link to the stored bytes (kind · name · size). Hosts with a
+   * richer chip (inline player, transcript) pass HostAdapter.attachmentChip.
+   * The URL is host-issued, but still policy-checked: an unsafe one renders
+   * the label as plain text.
+   */
+  import { isSafeLinkUrl } from "./params.js"
+  import type { NoteAttachment } from "./types.js"
+
+  let { clip }: { clip: NoteAttachment } = $props()
+
+  const KIND_LABEL: Record<string, string> = {
+    screen: "Screen",
+    voice: "Voice",
+    audio: "Audio",
+    video: "Video",
+    image: "Image",
+    file: "File",
+  }
+
+  function size(bytes: number): string {
+    if (!Number.isFinite(bytes) || bytes <= 0) return ""
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  }
+
+  function duration(s: number | null): string {
+    if (s == null || !Number.isFinite(s)) return ""
+    const m = Math.floor(s / 60)
+    const r = Math.round(s % 60)
+    return `${m}:${String(r).padStart(2, "0")}`
+  }
+
+  const name = $derived(clip.label ?? clip.name)
+  const meta = $derived(
+    [KIND_LABEL[clip.kind] ?? "File", duration(clip.durationSeconds) || size(clip.sizeBytes)]
+      .filter(Boolean)
+      .join(" · "),
+  )
+  const href = $derived(typeof clip.url === "string" && isSafeLinkUrl(clip.url) ? clip.url : null)
+</script>
+
+{#if href}
+  <a
+    {href}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="border-base-content/15 hover:border-primary inline-flex max-w-[16rem] items-center gap-1.5 rounded-field border px-2 py-0.5 text-xs"
+    title={clip.transcript ?? name}
+    data-attachment-chip
+  >
+    <span class="truncate">{name}</span>
+    {#if meta}<span class="text-base-content/50 shrink-0">{meta}</span>{/if}
+  </a>
+{:else}
+  <span
+    class="border-base-content/15 inline-flex max-w-[16rem] items-center gap-1.5 rounded-field border px-2 py-0.5 text-xs"
+    data-attachment-chip
+  >
+    <span class="truncate">{name}</span>
+    {#if meta}<span class="text-base-content/50 shrink-0">{meta}</span>{/if}
+  </span>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { NoteAttachment } from "./types.js";
+type $$ComponentProps = {
+    clip: NoteAttachment;
+};
+declare const AttachmentChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type AttachmentChip = ReturnType<typeof AttachmentChip>;
+export default AttachmentChip;

package/dist/artifact-blocks/BlockComments.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  /**
+   * BlockComments (origin mos-kib2f) — the per-block comment thread: an icon
+   * + unresolved-count chip under each block that opens a small thread
+   * drawer.
+   *
+   * The drawer reads and posts through the host's CommentsService
+   * (HostAdapter.comments):
+   *   - the thread restores on first open (`load`);
+   *   - posting is the host's call (`post`) — a comment is attributable to a
+   *     person, so a host should only offer it to a signed-in viewer;
+   *   - the poster can resolve their OWN comment (`setResolved`) — the
+   *     resolved flag is per-poster, never someone else's.
+   *
+   * No service, or a disabled surface → renders NOTHING (the read-only
+   * mode). Theming is token-only, radius tokens, light + dark + phone, and
+   * every animation sits under motion-safe.
+   */
+  import CommentPill from "./CommentPill.svelte"
+  import NoteComposer from "./NoteComposer.svelte"
+  import AttachmentChip from "./AttachmentChip.svelte"
+  import { hostAdapter } from "./adapter.js"
+  import type { BlockComment, NoteAttachment } from "./types.js"
+
+  interface Props {
+    artifactId: string
+    version: number
+    blockId: string
+    /** The block's label (the block title / type) — the drawer's heading. */
+    blockLabel: string
+    /** Server-rendered unresolved count for THIS block (0 until first load). */
+    count?: number
+    /** A session member is viewing (false on the public share route). */
+    enabled: boolean
+    /**
+     * The block below breaks out of the reading column (a wide table).
+     * The trigger row then uses the SAME breakout — the pill must align
+     * with the block's actual right edge, never sit inboard of it, and
+     * never touch the block's chrome (mos-51g8l).
+     */
+    wide?: boolean
+    /**
+     * The trigger lives elsewhere (mos-8fvt9): the block's heading row
+     * renders a CommentPill through SectionTools and drives `open`. This
+     * component then renders only the thread drawer — kept here, at the
+     * section level, where no block's `@container` can trap its
+     * position: fixed.
+     */
+    hosted?: boolean
+    /** The drawer is open (bindable, so a hosted trigger can drive it). */
+    open?: boolean
+    /** Reports the live unresolved count to a hosted trigger. */
+    onunresolved?: (n: number) => void
+  }
+
+  let {
+    artifactId,
+    version,
+    blockId,
+    blockLabel,
+    count = 0,
+    enabled,
+    wide = false,
+    hosted = false,
+    open = $bindable(false),
+    onunresolved = undefined,
+  }: Props = $props()
+
+  type CommentRow = BlockComment
+
+  const adapter = hostAdapter()
+  const service = adapter.comments
+  const Chip = adapter.attachmentChip ?? AttachmentChip
+  /** Live only with a service: no service is the read-only mode. */
+  const live = $derived(enabled && service !== undefined)
+
+  let loaded = $state(false)
+  /** The thread could not be read: say so, never "No comments yet". */
+  let loadFailed = $state(false)
+  let comments = $state<CommentRow[]>([])
+  let sending = $state(false)
+  let error = $state("")
+
+  /** The chip's number: unresolved, live-updated as the thread changes. */
+  const unresolved = $derived(
+    comments.length > 0
+      ? comments.filter((c) => !c.resolved).length
+      : (count ?? 0),
+  )
+
+  $effect(() => {
+    onunresolved?.(unresolved)
+  })
+
+  // The thread restores on first open, whoever opened it (own trigger or a
+  // hosted one).
+  $effect(() => {
+    if (open && !loaded && live) void load()
+  })
+
+  function close() {
+    open = false
+    error = ""
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape" && open) close()
+  }
+
+  function toggle() {
+    if (open) close()
+    else open = true
+  }
+
+  async function load() {
+    if (!service) return
+    loaded = true
+    loadFailed = false
+    try {
+      comments = (await service.load({ artifactId, version, blockId })) ?? []
+    } catch {
+      loadFailed = true
+      // History is a convenience; a failed GET must not block commenting.
+    }
+  }
+
+  async function post(payload: { text: string; clips: NoteAttachment[] }) {
+    const text = payload.text
+    if (sending) return
+    if (!text && payload.clips.length === 0) return
+    sending = true
+    error = ""
+    try {
+      if (!service) throw new Error("Comments are not available here")
+      const comment = await service.post({
+        artifactId,
+        version,
+        blockId,
+        body: text,
+        attachments: payload.clips,
+      })
+      comments = [...comments, comment]
+    } catch (e) {
+      error = e instanceof Error ? e.message : "Could not comment right now"
+      // The composer keeps the draft; it surfaces the failure.
+      throw e
+    } finally {
+      sending = false
+    }
+  }
+
+  async function toggleResolved(c: CommentRow) {
+    if (!c.mine) return // only the poster flips their own flag
+    const next = !c.resolved
+    try {
+      if (!service) throw new Error("Could not update the comment")
+      await service.setResolved({ artifactId, commentId: c.id, resolved: next })
+      comments = comments.map((row) =>
+        row.id === c.id ? { ...row, resolved: next } : row,
+      )
+    } catch (e) {
+      error = e instanceof Error ? e.message : "Could not update the comment"
+    }
+  }
+
+  const timeFmt = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  })
+  function when(iso: string): string {
+    const d = new Date(iso)
+    return Number.isFinite(d.getTime()) ? timeFmt.format(d) : ""
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if live}
+  <!-- mb-2: the trigger NEVER touches block chrome (a pill kissing a wide
+       table's filter box). Matches the failed-save strip's mb-2, so chrome
+       rows read at one rhythm. -->
+  {#if !hosted}
+    <div class="mb-2 flex justify-end" class:bc-wide={wide}>
+      <CommentPill label={blockLabel} {unresolved} {open} onclick={toggle} />
+    </div>
+  {/if}
+
+  {#if open}
+    <div
+      role="dialog"
+      aria-label="Comments on {blockLabel}"
+      class="border-base-content/10 bg-base-100 fixed inset-x-2 bottom-16 z-40 flex max-h-[60vh] flex-col rounded-box border shadow-xl sm:inset-x-auto sm:right-4 sm:w-[22rem]"
+    >
+      <header
+        class="border-base-content/10 flex items-center gap-2 border-b px-4 py-3"
+      >
+        <h2 class="min-w-0 truncate text-sm font-semibold">{blockLabel}</h2>
+        <span class="text-base-content/50 shrink-0 text-xs">comments</span>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs btn-circle ml-auto"
+          aria-label="Close comments"
+          onclick={close}
+        >
+          ✕
+        </button>
+      </header>
+
+      <div class="flex-1 overflow-y-auto px-4 py-3" tabindex="-1">
+        {#if error}
+          <p role="alert" class="text-error-content text-sm">{error}</p>
+        {/if}
+
+        {#if loadFailed}
+          <p class="text-base-content/60 text-sm" data-comments-load-failed>
+            Couldn't load earlier comments.
+            <button
+              type="button"
+              class="link link-primary"
+              onclick={() => void load()}>Try again</button
+            >
+          </p>
+        {:else if comments.length === 0}
+          <p class="text-base-content/50 text-sm">No comments yet.</p>
+        {/if}
+
+        <ul class="flex flex-col gap-3">
+          {#each comments as c (c.id)}
+            <li
+              class="rounded-field border border-base-content/10 px-3 py-2 {c.resolved
+                ? 'opacity-60'
+                : ''}"
+            >
+              {#if c.body}
+                <p
+                  class="text-sm {c.resolved
+                    ? 'line-through'
+                    : ''} whitespace-pre-wrap"
+                >
+                  {c.body}
+                </p>
+              {/if}
+              {#if c.attachments && c.attachments.length > 0}
+                <ul
+                  class="mt-1.5 flex flex-wrap items-center gap-1.5"
+                  aria-label="Comment attachments"
+                >
+                  {#each c.attachments as a (a.name)}
+                    <li><Chip clip={a} /></li>
+                  {/each}
+                </ul>
+              {/if}
+              <div
+                class="text-base-content/40 mt-1 flex items-center gap-2 text-2xs"
+              >
+                <span>{when(c.created_at)}</span>
+                {#if c.mine}
+                  <button
+                    type="button"
+                    class="link link-hover text-base-content/60"
+                    onclick={() => toggleResolved(c)}
+                  >
+                    {c.resolved ? "unresolve" : "resolve"}
+                  </button>
+                {/if}
+              </div>
+            </li>
+          {/each}
+        </ul>
+      </div>
+
+      <footer class="border-base-content/10 border-t px-4 py-3">
+        <!-- The ONE composer (the host's, else jatui's text composer). Its
+             submit row posts; a failed post keeps the draft. -->
+        <NoteComposer
+          {artifactId}
+          submitLabel="Comment"
+          onSubmit={post}
+          busy={sending}
+          {error}
+          placeholder="Comment on this block…"
+          label="Your comment on {blockLabel}"
+          rows={2}
+          maxLength={20000}
+          autofocus
+        />
+      </footer>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  /* Wide block (mos-51g8l): the trigger row breaks out with the SAME
+     formula the wide block itself uses (`.tb-wide` in TableBlock.svelte) —
+     centred on the reading column, capped at 80rem, kept 1.5rem inside the
+     page view (--artifact-page-w is the page's MEASURED width, so an admin
+     sidebar host stays correct). The two edges move together, so the pill's
+     right edge sits on the block's right edge instead of inboard of it.
+     Only the /a page opts in — pinned/embedded hosts (no
+     [data-artifact-page]) keep the column, and there the formula degrades
+     to 100% anyway (min(100% - 3rem, 80rem) < 100%). */
+  :global([data-artifact-page]) .bc-wide {
+    --bc-w: max(100%, min(var(--artifact-page-w, 100%) - 3rem, 80rem));
+    width: var(--bc-w);
+    margin-inline: calc((100% - var(--bc-w)) / 2);
+  }
+</style>

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

@@ -0,0 +1,33 @@
+interface Props {
+    artifactId: string;
+    version: number;
+    blockId: string;
+    /** The block's label (the block title / type) — the drawer's heading. */
+    blockLabel: string;
+    /** Server-rendered unresolved count for THIS block (0 until first load). */
+    count?: number;
+    /** A session member is viewing (false on the public share route). */
+    enabled: boolean;
+    /**
+     * The block below breaks out of the reading column (a wide table).
+     * The trigger row then uses the SAME breakout — the pill must align
+     * with the block's actual right edge, never sit inboard of it, and
+     * never touch the block's chrome (mos-51g8l).
+     */
+    wide?: boolean;
+    /**
+     * The trigger lives elsewhere (mos-8fvt9): the block's heading row
+     * renders a CommentPill through SectionTools and drives `open`. This
+     * component then renders only the thread drawer — kept here, at the
+     * section level, where no block's `@container` can trap its
+     * position: fixed.
+     */
+    hosted?: boolean;
+    /** The drawer is open (bindable, so a hosted trigger can drive it). */
+    open?: boolean;
+    /** Reports the live unresolved count to a hosted trigger. */
+    onunresolved?: (n: number) => void;
+}
+declare const BlockComments: import("svelte").Component<Props, {}, "open">;
+type BlockComments = ReturnType<typeof BlockComments>;
+export default BlockComments;