@inkbar/svelte 0.2.0 → 0.4.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 === 'note' ? 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)
@@ -90,20 +98,16 @@
     if (!root || !contents) return
     written.add(root.id)
     store.add({
-      type: 'note',
+      type: 'text',
       page: root.page,
       rect: root.rect,
       contents,
       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)
@@ -137,13 +141,13 @@
   <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 +155,7 @@
       >
         {#if children}
           {@render children({
-            note,
+            root: note,
             replies: thread.slice(1),
             reply,
             update: updateContents,
@@ -176,11 +180,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;AA6LH,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

@@ -125,6 +125,13 @@
       gap,
       buffer,
       tool: ctx.tool,
+      ...(ctx.hostTools ? { tools: ctx.hostTools } : {}),
+      ...(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) => {

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;AA8RH,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/context.d.ts

@@ -1,5 +1,5 @@
-import type { Annotation, InkDocument, InkStatus, PdfAssets } from '@inkbar/core';
-import type { ToolController, ToolId, Viewport, ZoomValue } from '@inkbar/core/dom';
+import type { Annotation, InkDocument, InkStatus, PdfAssets, SignatureLibrary } from '@inkbar/core';
+import type { Tool, ToolController, ToolId, ToolOptions, ToolStyle, Viewport, ZoomValue } from '@inkbar/core/dom';
 export type { InkStatus };
 /** Undo and redo for the current document, whichever mode its annotations are in. */
 export interface InkHistory {
@@ -33,6 +33,18 @@ export interface InkContext {
     /** Desired tool; InkViewport applies it to the controller. */
     readonly tool: ToolId;
     setTool(id: ToolId): void;
+    /** Host tools from InkRoot's `tools` prop; InkViewport registers them. */
+    readonly hostTools: Tool[] | undefined;
+    /** The font families text boxes offer: InkRoot's `fonts`, else `FONT_FAMILIES`. */
+    readonly fonts: readonly string[];
+    /** The tools' options for InkRoot's life, so they persist across documents. */
+    readonly toolOptions: ToolOptions;
+    /** The saved signatures, from InkRoot's `signatures` store (memory by default). */
+    readonly signatures: SignatureLibrary;
+    /** The fonts a typed signature offers: InkRoot's `signatureFonts`, else `SIGNATURE_FONTS`. */
+    readonly signatureFonts: readonly string[];
+    /** The open document's tool style; `null` while no document is open. */
+    readonly toolStyle: ToolStyle | null;
     /** Desired zoom and page from the host's props; InkViewport applies and reports back. */
     readonly zoomModel: ZoomValue | undefined;
     readonly pageModel: number | undefined;

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEnF,YAAY,EAAE,SAAS,EAAE,CAAA;AAEzB,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,IAAI,IAAI,IAAI,CAAA;IACZ,IAAI,IAAI,IAAI,CAAA;IACZ,KAAK,IAAI,IAAI,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAAA;CAC5B;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;IACrC,2FAA2F;IAC3F,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAA;IAC1B,QAAQ,CAAC,WAAW,EAAE,SAAS,UAAU,EAAE,CAAA;IAC3C,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IACrC,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,yFAAyF;IACzF,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CAAA;IACzC,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IACtC,UAAU,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,gGAAgG;IAChG,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAA;IAC5B,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC,WAAW,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3E;AAWD,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,CAGvF;AAED,4FAA4F;AAC5F,wBAAgB,aAAa,CAAC,GAAG,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAG5D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAY1D"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"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"}