@inkbar/svelte 0.3.0 → 0.5.0

package/dist/components/{InkNotePopover.svelte → InkThreadPopover.svelte}

@@ -1,24 +1,26 @@
 <script module lang="ts">
-  import type { NotePopoverSlotProps } from '@inkbar/core/dom'
+  import type { ThreadPopoverSlotProps } from '@inkbar/core/dom'
   import type { Snippet } from 'svelte'
 
-  export interface InkNotePopoverProps {
-    children?: Snippet<[NotePopoverSlotProps]> | undefined
+  export interface InkThreadPopoverProps {
+    children?: Snippet<[ThreadPopoverSlotProps]> | undefined
   }
 </script>
 
 <script lang="ts">
   /*
-   * The thread for the activated note, anchored to the note's overlay element. Activating a
-   * reply opens the whole thread from its root. Closing (Close, Escape, a press outside) clears
-   * `activated`.
+   * The thread for the activated note or text markup, anchored to the root's overlay
+   * element. Activating a reply opens the whole thread from its root. Closing (Close, Escape,
+   * a press outside) clears `activated`.
    *
-   * A new note has no text. While its root is empty (and unlocked) the default form writes the
-   * root's own `contents`, labelled "Comment", and the thread list stays hidden until there is
-   * something in it; after that the form adds replies. Closing a root that is still empty and
-   * has no replies removes it, so an abandoned note does not stay on the page.
+   * A new note, or a highlight, has no text. While its root is empty (and unlocked) the
+   * default form writes the root's own `contents`, labelled "Comment", and the thread list
+   * stays hidden until there is something in it; after that the form adds replies. Closing a
+   * note that is still empty and has no replies removes it, so an abandoned note does not stay
+   * on the page. Markup stays: the mark is the point.
    */
   import { isAbandonedNote, threadOf, threadRoot } from '@inkbar/core'
+  import { threadDeleteLabel, threadPopoverLabel } from '@inkbar/core/dom'
   import { Popover } from 'bits-ui'
   import { untrack } from 'svelte'
 
@@ -29,18 +31,18 @@
   import { keepOpenOnAnnotation, useFocusReturn } from './popover-focus.js'
   import ThreadForm from './ThreadForm.svelte'
 
-  import type { Annotation, NoteAnnotation } from '@inkbar/core'
+  import type { Annotation, ThreadRoot } from '@inkbar/core'
 
-  let { children }: InkNotePopoverProps = $props()
+  let { children }: InkThreadPopoverProps = $props()
 
-  const ctx = useInkContext('InkNotePopover')
+  const ctx = useInkContext('InkThreadPopover')
   const store = useAnnotations()
 
-  const note = $derived.by<NoteAnnotation | null>(() => {
+  const note = $derived.by<ThreadRoot | null>(() => {
     const a = ctx.activated
       ? store.annotations.find((x) => x.id === ctx.activated)
       : undefined
-    return a?.type === 'text' ? threadRoot(store.annotations, a) : null
+    return a ? threadRoot(store.annotations, a) : null
   })
   const anchorRef = useAnnotationElement(
     () => ctx.rootEl,
@@ -51,11 +53,11 @@
   const open = $derived(note !== null && anchor !== null)
   /** The root, then every reply below it, depth first, each level in creation order. */
   const thread = $derived<Annotation[]>(note ? threadOf(store.annotations, note) : [])
-  /** True while the default form writes the root note's own text rather than a reply. */
+  /** True while the default form writes the root's own text rather than a reply. */
   const editingRoot = $derived(note !== null && !note.locked && !note.contents?.trim())
 
   /**
-   * Notes this popover wrote text or a reply for. In controlled mode the write is a proposal
+   * Roots this popover wrote text or a reply for. In controlled mode the write is a proposal
    * the host may not have applied yet, so the applied list still shows the note empty; these
    * are never dropped as abandoned. Bookkeeping only: nothing renders from it.
    */
@@ -67,7 +69,13 @@
 
   /** Removes an unlocked root note with no text and no replies. True when it did. */
   function dropIfEmpty(id: string): boolean {
-    if (dropped.has(id) || written.has(id) || !isAbandonedNote(store.annotations, id))
+    const a = store.annotations.find((x) => x.id === id)
+    if (
+      !a ||
+      dropped.has(id) ||
+      written.has(id) ||
+      !isAbandonedNote(a, store.annotations)
+    )
       return false
     dropped.add(id)
     store.remove(id)
@@ -97,13 +105,9 @@
       inReplyTo: root.id,
     })
   }
-  function isEmptyRoot(root: NoteAnnotation): boolean {
-    return (
-      !written.has(root.id) &&
-      !root.locked &&
-      !root.contents?.trim() &&
-      thread.length === 1
-    )
+  /** A note that closing now would remove. */
+  function isEmptyRoot(root: ThreadRoot): boolean {
+    return !written.has(root.id) && isAbandonedNote(root, store.annotations)
   }
   function close(): void {
     const root = note
@@ -118,12 +122,12 @@
     if (contents.trim()) written.add(note.id)
     store.update(note.id, { contents })
   }
-  /** Locked notes cannot be removed: removing one does nothing and keeps the popover. */
+  /** Locked roots cannot be removed: removing one does nothing and keeps the popover. */
   function removeThread(): void {
     const root = note
     if (!root || root.locked) return
     focusReturn.beforeRemove(anchor)
-    // Under a slow controlled host the note stays listed for a while; it is not asked for again.
+    // Under a slow controlled host the root stays listed for a while; it is not asked for again.
     dropped.add(root.id)
     store.remove(root.id)
     ctx.setActivated(null)
@@ -133,17 +137,24 @@
   }
 </script>
 
+<svelte:document
+  onpointerdowncapture={(e) =>
+    open && focusReturn.onPressOutside(e, '[data-ink-thread-popover]', close)}
+  onpointerup={focusReturn.onPressEnd}
+  onpointercancel={focusReturn.onPressEnd}
+/>
+
 <Popover.Root bind:open={() => open, onOpenChange}>
   <Popover.Portal>
     {#if note && anchor}
       <Popover.Content
-        class="ink-note-popover"
-        data-ink-note-popover=""
+        class="ink-thread-popover"
+        data-ink-thread-popover=""
         role="dialog"
         side="right"
         sideOffset={8}
         collisionPadding={8}
-        aria-label="Note thread"
+        aria-label={threadPopoverLabel(note)}
         customAnchor={anchor}
         onInteractOutside={keepOpenOnAnnotation}
         onOpenAutoFocus={focusReturn.onOpenAutoFocus}
@@ -151,7 +162,7 @@
       >
         {#if children}
           {@render children({
-            note,
+            root: note,
             replies: thread.slice(1),
             reply,
             update: updateContents,
@@ -176,11 +187,12 @@
               {/each}
             </ol>
           {/if}
-          <!-- Keyed by note: moving to another note starts with an empty draft at once. -->
+          <!-- Keyed by root: moving to another thread starts with an empty draft at once. -->
           {#key note.id}
             <ThreadForm
               {editingRoot}
               locked={!!note.locked}
+              deleteLabel={threadDeleteLabel(note)}
               onSubmit={(text) => (editingRoot ? updateContents(text) : reply(text))}
               onRemove={removeThread}
               onClose={close}

package/dist/components/InkThreadPopover.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ThreadPopoverSlotProps } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+export interface InkThreadPopoverProps {
+    children?: Snippet<[ThreadPopoverSlotProps]> | undefined;
+}
+declare const InkThreadPopover: import("svelte").Component<InkThreadPopoverProps, {}, "">;
+type InkThreadPopover = ReturnType<typeof InkThreadPopover>;
+export default InkThreadPopover;
+//# sourceMappingURL=InkThreadPopover.svelte.d.ts.map

package/dist/components/InkThreadPopover.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkThreadPopover.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkThreadPopover.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAC9D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAAC,GAAG,SAAS,CAAA;CACzD;AAgMH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/InkToolButton.svelte

@@ -14,7 +14,17 @@
 
 <script lang="ts">
   import { TOOL_LABELS } from '@inkbar/core/dom'
-  import { Hand, Highlighter, MessageSquare, MousePointer2, Square } from '@inkbar/icons'
+  import {
+    Highlighter,
+    MessageSquare,
+    PenLine,
+    PenTool,
+    Signature,
+    Square,
+    SquareDashedMousePointer,
+    TextCursor,
+    Type,
+  } from '@inkbar/icons'
   import { Toolbar } from 'bits-ui'
 
   import { useTool } from '../hooks/useTool.svelte.js'
@@ -24,12 +34,16 @@
 
   import type { IconNode } from '@inkbar/icons'
 
-  const ICONS: Readonly<Record<ToolId, IconNode>> = {
-    view: Hand,
-    select: MousePointer2,
+  const ICONS: Readonly<Partial<Record<ToolId, IconNode>>> = {
+    'select-text': TextCursor,
+    select: SquareDashedMousePointer,
     highlight: Highlighter,
     'redact-area': Square,
+    sketch: PenTool,
+    draw: PenLine,
     note: MessageSquare,
+    freetext: Type,
+    signature: Signature,
   }
 
   let {
@@ -44,7 +58,9 @@
 
   const current = useTool()
   const active = $derived(current.tool === tool)
-  const name = $derived(label ?? TOOL_LABELS[tool])
+  // A host tool has no built-in name or icon: `label` and `children` supply them.
+  const name = $derived(label ?? TOOL_LABELS[tool] ?? tool)
+  const icon = $derived(ICONS[tool])
 </script>
 
 <Toolbar.Button
@@ -62,7 +78,7 @@
     if (!e.defaultPrevented) current.setTool(tool)
   }}
 >
-  {#if children}{@render children({ active, label: name })}{:else}<InkIcon
-      icon={ICONS[tool]}
+  {#if children}{@render children({ active, label: name })}{:else if icon}<InkIcon
+      {icon}
     />{/if}
 </Toolbar.Button>

package/dist/components/InkToolButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolButton.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IACpE,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC;AA4DH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InkToolButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolButton.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IACpE,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC;AA4EH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkViewport.svelte

@@ -43,7 +43,7 @@
   import InkPage from './InkPage.svelte'
 
   import type { InkDocument, InkStatus } from '@inkbar/core'
-  import type { PageMount, ViewerEngine, ZoomValue } from '@inkbar/core/dom'
+  import type { PageMount, ToolId, ViewerEngine, ZoomValue } from '@inkbar/core/dom'
 
   let {
     mode = 'continuous',
@@ -125,6 +125,15 @@
       gap,
       buffer,
       tool: ctx.tool,
+      ...(ctx.hostTools ? { tools: ctx.hostTools } : {}),
+      // Read through, so the effect below can re-apply a new function without a rebuild.
+      decorateAnnotation: (a) => ctx.decorateAnnotation?.(a),
+      ...(ctx.toolStyle ? { toolStyle: ctx.toolStyle } : {}),
+      toolHistory: { batch: (fn) => ctx.history.batch(fn) },
+      toolOptions: ctx.toolOptions,
+      fonts: [...ctx.fonts],
+      // Read through, so a new `signatures` store reaches the tool as well as the menus.
+      signatureLibrary: () => ctx.signatures,
       customAnnotations: custom,
       onActivate: (id) => ctx.setActivated(id),
       onBuild: (vp, tc) => {
@@ -148,7 +157,15 @@
           lastReportedPage = p
           ctx.reportPage(p)
         }
-        stops = [vp.zoom.subscribe(reportZoom), vp.currentPage.subscribe(reportPage)]
+        // A tool that switches itself (a one-shot tool once used) is reported as a pick.
+        const followTool = (id: ToolId): void => {
+          if (id !== ctx.tool) ctx.setTool(id)
+        }
+        stops = [
+          vp.zoom.subscribe(reportZoom),
+          vp.currentPage.subscribe(reportPage),
+          tc.active.subscribe(followTool),
+        ]
         // Whatever the build restored is reported once; nothing is when it matched.
         reportZoom(vp.zoom.get())
         reportPage(vp.currentPage.get())
@@ -222,6 +239,13 @@
     })
   })
 
+  // A new decorateAnnotation re-applies to the mounted annotation elements at once.
+  const decorate = $derived(ctx.decorateAnnotation)
+  $effect(() => {
+    void decorate
+    untrack(() => engine?.redecorate())
+  })
+
   // The setters below run untracked: core relays out inside them and the engine's page
   // callbacks read and write `pages`. Tracked, each effect would depend on the list it changes
   // and run again, without end when the host holds a zoom the viewport clamps.

package/dist/components/InkViewport.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkViewport.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,GAAG,SAAS,CAAA;IACvD,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;CACrE;AAuRH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"InkViewport.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkViewport.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,GAAG,SAAS,CAAA;IACvD,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;CACrE;AA+SH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/SignatureForm.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  /*
+   * The body of `InkSignatureDialog`, mounted while it is open: one draft per opening. Draw,
+   * Type and Image tabs, then Cancel and Save.
+   */
+  import {
+    createSignatureDraft,
+    fontFamilyValue,
+    handleRadioKeys,
+    handleTabKeys,
+    SIGNATURE_LABELS,
+    SIGNATURE_TABS,
+    type SignatureTab,
+  } from '@inkbar/core/dom'
+  import { Dialog } from 'bits-ui'
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { useTool } from '../hooks/useTool.svelte.js'
+  import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import type { SignatureOptions, SignatureTemplate } from '@inkbar/core'
+
+  let {
+    fonts,
+    onSaved,
+    onClose,
+  }: {
+    fonts: readonly string[] | undefined
+    onSaved: (t: SignatureTemplate) => void
+    onClose: () => void
+  } = $props()
+
+  const ctx = useInkContext('InkSignatureDialog')
+  const current = useTool()
+  const signature = useToolOptions<SignatureOptions>('signature')
+  // One draft per opening: the fonts are read once.
+  const draft = untrack(() =>
+    createSignatureDraft({ fonts: fonts ?? ctx.signatureFonts })
+  )
+  const draftState = useReadable(() => draft.state, draft.state.get())
+  const s = $derived(draftState.current)
+  const uid = $props.id()
+  let padHost = $state<HTMLDivElement | null>(null)
+
+  $effect(() => {
+    if (!padHost) return
+    return draft.attachPad(padHost)
+  })
+  $effect(() => () => draft.destroy())
+
+  function save(): void {
+    draft.save(ctx.signatures).then(
+      (t) => {
+        if (!t) return
+        signature.setOptions({ templateId: t.id })
+        current.setTool('signature')
+        onSaved(t)
+        onClose()
+      },
+      () => {
+        // The host's store refused it: the dialog stays open to try again.
+      }
+    )
+  }
+
+  const tabId = (tab: SignatureTab) => `${uid}-tab-${tab}`
+  const panelId = (tab: SignatureTab) => `${uid}-panel-${tab}`
+  const shown = $derived(s.name.trim() || SIGNATURE_LABELS.namePlaceholder)
+</script>
+
+<div
+  role="tablist"
+  tabindex="-1"
+  aria-label={SIGNATURE_LABELS.tabs}
+  class="ink-tabs"
+  onkeydown={(e) => handleTabKeys(e, e.currentTarget)}
+>
+  {#each SIGNATURE_TABS as tab (tab)}
+    <button
+      type="button"
+      role="tab"
+      id={tabId(tab)}
+      aria-controls={panelId(tab)}
+      aria-selected={s.tab === tab}
+      tabindex={s.tab === tab ? 0 : -1}
+      class="ink-tab"
+      data-key={tab}
+      data-state={s.tab === tab ? 'active' : 'inactive'}
+      onclick={() => draft.setTab(tab)}
+    >
+      {SIGNATURE_LABELS[tab]}
+    </button>
+  {/each}
+</div>
+<div
+  role="tabpanel"
+  id={panelId('draw')}
+  aria-labelledby={tabId('draw')}
+  class="ink-tab-panel"
+  data-key="draw"
+  hidden={s.tab !== 'draw'}
+>
+  <div
+    bind:this={padHost}
+    class="ink-signature-pad-host"
+    data-ink-signature-pad-host=""
+    role="img"
+    aria-label={SIGNATURE_LABELS.pad}
+  ></div>
+  <div class="ink-dialog-row">
+    <button
+      type="button"
+      class="ink-button"
+      data-ink-signature-clear=""
+      disabled={s.padEmpty}
+      onclick={() => draft.clearPad()}
+    >
+      {SIGNATURE_LABELS.clear}
+    </button>
+  </div>
+</div>
+<div
+  role="tabpanel"
+  id={panelId('type')}
+  aria-labelledby={tabId('type')}
+  class="ink-tab-panel"
+  data-key="type"
+  hidden={s.tab !== 'type'}
+>
+  <label class="ink-field">
+    <span>{SIGNATURE_LABELS.name}</span>
+    <input
+      type="text"
+      class="ink-input"
+      data-ink-signature-name=""
+      autocomplete="name"
+      placeholder={SIGNATURE_LABELS.namePlaceholder}
+      value={s.name}
+      oninput={(e) => draft.setName(e.currentTarget.value)}
+    />
+  </label>
+  <div
+    role="radiogroup"
+    tabindex="-1"
+    aria-label={SIGNATURE_LABELS.fonts}
+    class="ink-signature-fonts"
+    onkeydown={(e) => handleRadioKeys(e, e.currentTarget)}
+  >
+    {#each draft.fonts as font (font)}
+      <button
+        type="button"
+        role="radio"
+        aria-checked={s.font === font}
+        aria-label={font}
+        tabindex={s.font === font ? 0 : -1}
+        class="ink-signature-font"
+        data-key={font}
+        data-state={s.font === font ? 'checked' : 'unchecked'}
+        onclick={() => draft.setFont(font)}
+      >
+        <!-- The font is the option itself, so it is set here, not left to the theme. -->
+        <span class="ink-signature-font-sample" style:font-family={fontFamilyValue(font)}
+          >{shown}</span
+        >
+      </button>
+    {/each}
+  </div>
+</div>
+<div
+  role="tabpanel"
+  id={panelId('image')}
+  aria-labelledby={tabId('image')}
+  class="ink-tab-panel"
+  data-key="image"
+  hidden={s.tab !== 'image'}
+>
+  <label class="ink-field">
+    <span>{SIGNATURE_LABELS.file}</span>
+    <input
+      type="file"
+      accept="image/png,image/jpeg"
+      class="ink-input"
+      data-ink-signature-file=""
+      onchange={(e) => void draft.chooseFile(e.currentTarget.files?.[0])}
+    />
+  </label>
+  {#if s.image?.kind === 'image'}
+    <img class="ink-signature-image" src={s.image.imagedata} alt="" />
+  {/if}
+  {#if s.imageError}
+    <p class="ink-field-error" role="alert">{s.imageError}</p>
+  {/if}
+</div>
+{#if s.saveError}
+  <p class="ink-field-error" role="alert" data-ink-signature-save-error="">
+    {s.saveError}
+  </p>
+{/if}
+<div class="ink-dialog-actions">
+  <Dialog.Close>
+    {#snippet child({ props })}
+      <button {...props} type="button" class="ink-button" data-ink-signature-cancel="">
+        {SIGNATURE_LABELS.cancel}
+      </button>
+    {/snippet}
+  </Dialog.Close>
+  <button
+    type="button"
+    class="ink-button"
+    data-variant="primary"
+    data-ink-signature-save=""
+    disabled={!s.canSave}
+    onclick={save}
+  >
+    {SIGNATURE_LABELS.save}
+  </button>
+</div>

package/dist/components/SignatureForm.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SignatureTemplate } from '@inkbar/core';
+type $$ComponentProps = {
+    fonts: readonly string[] | undefined;
+    onSaved: (t: SignatureTemplate) => void;
+    onClose: () => void;
+};
+declare const SignatureForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignatureForm = ReturnType<typeof SignatureForm>;
+export default SignatureForm;
+//# sourceMappingURL=SignatureForm.svelte.d.ts.map

package/dist/components/SignatureForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureForm.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SignatureForm.svelte.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEvE,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACpC,OAAO,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACvC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAuHJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/ThreadForm.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  /** The default form: the root note's own text while it is empty, replies after that. */
+  /** The default form: the root's own text while it is empty, replies after that. */
   let {
     editingRoot,
     locked,
+    deleteLabel,
     onSubmit,
     onRemove,
     onClose,
   }: {
     editingRoot: boolean
     locked: boolean
+    deleteLabel: string
     onSubmit: (text: string) => void
     onRemove: () => void
     onClose: () => void
@@ -35,7 +37,7 @@
       >{editingRoot ? 'Comment' : 'Reply'}</button
     >
     {#if !locked}
-      <button type="button" onclick={onRemove}>Delete</button>
+      <button type="button" onclick={onRemove}>{deleteLabel}</button>
     {/if}
     <button type="button" onclick={onClose}>Close</button>
   </div>

package/dist/components/ThreadForm.svelte.d.ts

@@ -1,6 +1,7 @@
 type $$ComponentProps = {
     editingRoot: boolean;
     locked: boolean;
+    deleteLabel: string;
     onSubmit: (text: string) => void;
     onRemove: () => void;
     onClose: () => void;

package/dist/components/ThreadForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadForm.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ThreadForm.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAkCJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThreadForm.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ThreadForm.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAmCJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/child-snippet.d.ts

@@ -19,4 +19,12 @@ export type BitsProps<T> = {
  * `loop`) receives the explicit `null` or `undefined`. This is the one place the cast lives.
  */
 export declare function asBitsProps<T extends object>(rest: T): BitsProps<T>;
+type Handler<E> = ((e: E) => unknown) | null | undefined;
+/**
+ * One handler for an element both the host and the component listen on: the host's first,
+ * then each of `inner` in turn unless the host (or an earlier one) prevented the default.
+ * `inner` takes Bits UI's own handler from its `props`, typed `unknown` there.
+ */
+export declare function composeHandlers<E extends Event>(host: Handler<E>, ...inner: unknown[]): (e: E) => void;
+export {};
 //# sourceMappingURL=child-snippet.d.ts.map

package/dist/components/child-snippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"child-snippet.d.ts","sourceRoot":"","sources":["../../src/lib/components/child-snippet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,qEAAqE;AACrE,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,CAAC,CAAC,CAAA;AAExE,6FAA6F;AAC7F,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAAE,CAAA;AAE9E;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAEnE"}
+{"version":3,"file":"child-snippet.d.ts","sourceRoot":"","sources":["../../src/lib/components/child-snippet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,qEAAqE;AACrE,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,CAAC,CAAC,CAAA;AAExE,6FAA6F;AAC7F,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAAE,CAAA;AAE9E;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAEnE;AAED,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,EAC7C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAChB,GAAG,KAAK,EAAE,OAAO,EAAE,GAClB,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAQhB"}

package/dist/components/child-snippet.js

@@ -12,3 +12,18 @@
 export function asBitsProps(rest) {
     return rest;
 }
+/**
+ * One handler for an element both the host and the component listen on: the host's first,
+ * then each of `inner` in turn unless the host (or an earlier one) prevented the default.
+ * `inner` takes Bits UI's own handler from its `props`, typed `unknown` there.
+ */
+export function composeHandlers(host, ...inner) {
+    return (e) => {
+        host?.(e);
+        for (const fn of inner) {
+            if (e.defaultPrevented)
+                return;
+            fn?.(e);
+        }
+    };
+}

package/dist/components/popover-focus.d.ts

@@ -5,6 +5,18 @@ export interface PopoverFocusReturn {
     beforeRemove: FocusReturn['beforeRemove'];
     /** Bits UI's `onOpenAutoFocus` handler. Leaves the default alone: focus moves into the popover. */
     onOpenAutoFocus: (event: Event) => void;
+    /**
+     * A document-level pointer press, captured. `inside` selects the popover's content. A press on
+     * the viewer's own scroll element, outside the popover, that will not activate an annotation
+     * closes it now, through `close`, before the press moves focus. Bits UI closes it a beat
+     * later, and its focus trap pulls focus back into the popover in between, which ends a text
+     * selection the press has just begun. Nothing is focused when it closes this way: the press
+     * places focus. Every other press (a toolbar, a host's menu portaled out of the popover) is
+     * left to Bits UI, whose layer stack knows what belongs to the popover.
+     */
+    onPressOutside: (event: PointerEvent, inside: string, close: () => void) => void;
+    /** A pointer release or cancel, captured. */
+    onPressEnd: () => void;
     /** Bits UI's `onCloseAutoFocus` handler. Prevents the default; the planner places focus. */
     onCloseAutoFocus: (event: Event, anchor: HTMLElement | null) => void;
 }
@@ -21,8 +33,10 @@ export declare function keepOpenOnAnnotation(event: PointerEvent): void;
  * close reaches the planner one microtask late, and only when no open was reported after it.
  *
  * This relies on Bits UI reporting a remount as a close and then an open within one synchronous
- * call (observed in bits-ui 2.19.5, `FocusScope.mount`). If that changes, the browser case 'a
- * card opened by selection alone takes focus without passing it through the annotation' fails.
+ * call (observed in bits-ui 2.19.5, `FocusScope.mount`). The unit case 'a close followed by an
+ * open in the same tick moves no focus and uses up the removal plan' pins the planner's side, and
+ * the browser case 'a popover opened without passing focus through the annotation takes focus'
+ * checks that an open moves focus straight into the popover.
  *
  * A close that is superseded this way moves no focus, but it still uses up whatever
  * `beforeRemove` planned for it, so the plan cannot leak into a later close. A close that is