@inkbar/svelte 0.4.0 → 0.5.0

package/README.md

@@ -20,7 +20,7 @@
 
 ---
 
-Drop a PDF viewer into your Svelte app and let people highlight text, leave notes with replies and review redactions. `@inkbar/svelte` gives you components to build your own toolbars, popovers for comment threads and suggested redactions, and hooks for anything else. `@inkbar/theme` styles them all.
+Drop a PDF viewer into your Svelte app and let people highlight text, leave notes with replies and redact. `@inkbar/svelte` gives you components to build your own toolbars, a popover for comment threads, and hooks for anything else. `@inkbar/theme` styles them all.
 
 Annotations are plain typed objects. Bind them with `bind:annotations` to keep them in your own state, or let Inkbar hold them with undo and redo.
 
@@ -52,7 +52,6 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
     InkZoomSelect,
     InkZoomIn,
     InkThreadPopover,
-    InkSuggestionCard,
   } from '@inkbar/svelte'
   import type { Annotation } from '@inkbar/core'
   import { assets } from 'virtual:inkbar-assets'
@@ -85,7 +84,6 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
     <InkZoomIn />
   </InkToolbar>
   <InkThreadPopover />
-  <InkSuggestionCard />
 </InkRoot>
 ```
 
@@ -161,7 +159,7 @@ The highlight tool leaves `contents` free for the comment. `doc.text(page)` retu
 
 ## Custom rendering
 
-Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkThreadPopover` and `InkSuggestionCard` take `children` as a snippet that receives the popover's props. `InkToolButton` takes `children` as a snippet of `{ active, label }`. The props each receives are typed as `AnnotationSlotProps`, `ThreadPopoverSlotProps` and `SuggestionCardSlotProps`, the same types the Vue and React packages export.
+Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkThreadPopover` takes `children` as a snippet that receives the popover's props. `InkToolButton` takes `children` as a snippet of `{ active, label }`. The props each receives are typed as `AnnotationSlotProps` and `ThreadPopoverSlotProps`, the same types the Vue and React packages export.
 
 `InkRoot`, `InkToolbar`, `InkToolButton`, `InkUndo`, `InkRedo`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take a `child` snippet to render your own element. Spread the `props` it gives you on that element. The snippet type is exported as `ChildSnippet`.
 
@@ -183,7 +181,7 @@ The scroll area takes focus. From there:
 
 On a focused annotation:
 
-- `Enter` or `Space` selects and activates it. A note opens its thread and a suggested redaction its card; other types are only selected.
+- `Enter` or `Space` selects and activates it. A note or text markup opens its thread; other types are only selected.
 - `ArrowUp` and `ArrowDown` move to the previous or next annotation on the page.
 - `Shift` + arrow moves it by 1 pt, or by 10 pt with `Alt` as well.
 - `Ctrl` or `Cmd` + `Shift` + arrow resizes an area redaction, text box or shape.

package/dist/components/InkAnnotation.svelte

@@ -17,8 +17,6 @@
    * default visual for every annotation that is not custom, so this never draws a second one.
    * InkPage portals it into the annotation's overlay element.
    */
-  import { acceptSuggestion } from '@inkbar/core'
-
   import { useInkContext } from '../context.js'
 
   import type { AnnotationState } from '@inkbar/core/dom'
@@ -48,9 +46,6 @@
     return () => observer.disconnect()
   })
 
-  const isSuggestion = $derived(
-    annotation.type === 'redact' && annotation.origin === 'suggested'
-  )
   const locked = $derived(annotation.locked === true)
   const selected = $derived(ctx.selection.includes(annotation.id))
   const store = () => ctx.document?.annotations
@@ -60,13 +55,6 @@
     locked,
     select: () => store()?.select([annotation.id]),
     remove: () => void store()?.remove(annotation.id),
-    accept: () => {
-      const s = store()
-      if (s && isSuggestion) acceptSuggestion(s, annotation.id)
-    },
-    dismiss: () => {
-      if (isSuggestion) store()?.remove(annotation.id)
-    },
   })
 </script>
 

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

@@ -1 +1 @@
-{"version":3,"file":"InkAnnotation.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkAnnotation.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,UAAU,CAAA;IACtB,mFAAmF;IACnF,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACjC,QAAQ,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;CACzC;AA2EH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InkAnnotation.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkAnnotation.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,UAAU,CAAA;IACtB,mFAAmF;IACnF,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACjC,QAAQ,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;CACzC;AA6DH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkColorMenu.svelte

@@ -28,6 +28,8 @@
      * tool is active, and recolours the selection only when it is all in the group.
      */
     group?: StyleGroup | undefined
+    /** The colour new annotations get while the style leaves it unset; the swatch shows it. */
+    fallback?: string | undefined
   }
 </script>
 
@@ -54,6 +56,7 @@
     children,
     standalone = false,
     group,
+    fallback,
     disabled,
     onclick,
     onkeydown,
@@ -63,7 +66,9 @@
   const style = useToolStyle(() => group)
   let open = $state(false)
 
-  const model = $derived(colorMenuModel(property, style.current, style.supported))
+  const model = $derived(
+    colorMenuModel(property, style.current, style.supported, fallback)
+  )
   const name = $derived(label ?? model.label)
   const trigger = $derived(model.trigger)
 

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

@@ -26,6 +26,8 @@ export interface InkColorMenuProps extends Omit<HTMLButtonAttributes, 'children'
      * tool is active, and recolours the selection only when it is all in the group.
      */
     group?: StyleGroup | undefined;
+    /** The colour new annotations get while the style leaves it unset; the swatch shows it. */
+    fallback?: string | undefined;
 }
 declare const InkColorMenu: import("svelte").Component<InkColorMenuProps, {}, "">;
 type InkColorMenu = ReturnType<typeof InkColorMenu>;

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

@@ -1 +1 @@
-{"version":3,"file":"InkColorMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkColorMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAC/E,iCAAiC;IACjC,QAAQ,EAAE,aAAa,CAAA;IACvB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CAC/B;AA0JH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"InkColorMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkColorMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAC/E,iCAAiC;IACjC,QAAQ,EAAE,aAAa,CAAA;IACvB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAC9B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B;AA6JH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InkHighlightMenu.svelte

@@ -31,6 +31,7 @@
   import { ChevronDown } from '@inkbar/icons'
   import { Popover, Toolbar } from 'bits-ui'
 
+  import { useDocument } from '../hooks/useDocument.svelte.js'
   import { useTool } from '../hooks/useTool.svelte.js'
   import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
 
@@ -40,10 +41,15 @@
   let { class: className, children, ...rest }: InkHighlightMenuProps = $props()
 
   const current = useTool()
+  const inkDocument = useDocument()
   const highlight = useToolOptions<HighlightOptions>('highlight')
   let open = $state(false)
+  /** The split button: the panel lines up under it rather than the chevron. */
+  let group = $state<HTMLElement | null>(null)
 
   const model = $derived(highlightMenuModel(highlight.options, MARKUP_KINDS))
+  /** The colour the chosen kind gets while the markup style leaves it unset. */
+  const fallback = $derived(inkDocument.document?.annotations.defaults.color(model.kind))
   const active = $derived(current.tool === 'highlight')
 
   let menu = $state<HTMLElement | null>(null)
@@ -69,6 +75,7 @@
 </script>
 
 <div
+  bind:this={group}
   role="group"
   aria-label="Highlight"
   class={['ink-split-button ink-highlight-menu', className]}
@@ -116,6 +123,7 @@
         class="ink-select-content ink-menu-content"
         data-ink-select-content=""
         data-ink-menu="highlight"
+        customAnchor={group}
         side="bottom"
         align="start"
         sideOffset={4}
@@ -156,6 +164,7 @@
             group="markup"
             label="Highlight colour"
             standalone
+            {fallback}
             role="menuitem"
             tabindex={-1}
           />

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

@@ -1 +1 @@
-{"version":3,"file":"InkHighlightMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkHighlightMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AA2GH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InkHighlightMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkHighlightMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAkHH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/InkRoot.svelte

@@ -11,7 +11,7 @@
     PdfAssets,
     SignatureStore,
   } from '@inkbar/core'
-  import type { Tool, ToolId, ZoomValue } from '@inkbar/core/dom'
+  import type { DecorateAnnotation, Tool, ToolId, ZoomValue } from '@inkbar/core/dom'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
@@ -39,6 +39,13 @@
      * document opens.
      */
     tools?: Tool[] | undefined
+    /**
+     * Adds `data-*` attributes, classes and a screen-reader description to each annotation's
+     * element (see `DecorateAnnotation`). Decorations re-apply whenever the annotations change
+     * and when this prop changes, without rebuilding the viewer. Pass a new function when its
+     * output would change for any other reason.
+     */
+    decorateAnnotation?: DecorateAnnotation | undefined
     /**
      * The font families text boxes offer, replacing the PDF standard families
      * (`FONT_FAMILIES`). Fonts beyond those are the PDF writer's to embed.
@@ -107,6 +114,7 @@
     tool = $bindable(),
     onToolChange,
     tools: hostTools,
+    decorateAnnotation,
     fonts,
     signatures: signatureStore,
     signatureFonts,
@@ -279,6 +287,8 @@
   })
 
   function setTool(id: ToolId): void {
+    // Picking the active tool again starts it afresh, as after a one-shot tool's use.
+    if (currentTool === id && tools?.active.get() === id) tools.set(id)
     tool = id
     onToolChange?.(id)
   }
@@ -364,6 +374,9 @@
     get hostTools() {
       return hostTools
     },
+    get decorateAnnotation() {
+      return decorateAnnotation
+    },
     get fonts() {
       return fonts ?? FONT_FAMILIES
     },

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

@@ -1,6 +1,6 @@
 import type { ChildSnippet } from './child-snippet.js';
 import type { Annotation, AnnotationChange, AnnotationDefaults, DocumentSource, InkDocument, InkError, InkStatus, PdfAssets, SignatureStore } from '@inkbar/core';
-import type { Tool, ToolId, ZoomValue } from '@inkbar/core/dom';
+import type { DecorateAnnotation, Tool, ToolId, ZoomValue } from '@inkbar/core/dom';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange' | 'onerror'> {
@@ -24,6 +24,13 @@ export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
      * document opens.
      */
     tools?: Tool[] | undefined;
+    /**
+     * Adds `data-*` attributes, classes and a screen-reader description to each annotation's
+     * element (see `DecorateAnnotation`). Decorations re-apply whenever the annotations change
+     * and when this prop changes, without rebuilding the viewer. Pass a new function when its
+     * output would change for any other reason.
+     */
+    decorateAnnotation?: DecorateAnnotation | undefined;
     /**
      * The font families text boxes offer, replacing the PDF standard families
      * (`FONT_FAMILIES`). Fonts beyond those are the PDF writer's to embed.

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

@@ -1 +1 @@
-{"version":3,"file":"InkRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkRoot.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"InkRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkRoot.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/InkShapeMenu.svelte

@@ -41,6 +41,8 @@
   const current = useTool()
   const shape = useToolOptions<ShapeOptions>('shape')
   let open = $state(false)
+  /** The split button: the panel lines up under it rather than the chevron. */
+  let group = $state<HTMLElement | null>(null)
 
   const model = $derived(shapeMenuModel(shape.options, SHAPE_KINDS))
   const active = $derived(current.tool === 'shape')
@@ -68,6 +70,7 @@
 </script>
 
 <div
+  bind:this={group}
   role="group"
   aria-label="Shape"
   class={['ink-split-button ink-shape-menu', className]}
@@ -115,6 +118,7 @@
         class="ink-select-content ink-menu-content"
         data-ink-select-content=""
         data-ink-menu="shape"
+        customAnchor={group}
         side="bottom"
         align="start"
         sideOffset={4}

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

@@ -1 +1 @@
-{"version":3,"file":"InkShapeMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkShapeMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAoGH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"InkShapeMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkShapeMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAsGH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InkSignatureMenu.svelte

@@ -58,6 +58,8 @@
   const model = $derived(signatureMenuModel(templates.current, signature.options))
   const active = $derived(current.tool === 'signature')
   let open = $state(false)
+  /** The split button: the panel lines up under it rather than the chevron. */
+  let group = $state<HTMLElement | null>(null)
   let creating = $state(false)
   let menu = $state<HTMLElement | null>(null)
   let main = $state<HTMLElement | null>(null)
@@ -115,6 +117,7 @@
 </script>
 
 <div
+  bind:this={group}
   role="group"
   aria-label={SIGNATURE_LABELS.sign}
   class={['ink-split-button ink-signature-menu', className]}
@@ -160,6 +163,7 @@
         class="ink-select-content ink-menu-content"
         data-ink-select-content=""
         data-ink-menu="signature"
+        customAnchor={group}
         side="bottom"
         align="start"
         sideOffset={4}

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSignatureMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC;AAuLH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InkSignatureMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSignatureMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC;AAyLH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/InkThreadPopover.svelte

@@ -137,6 +137,13 @@
   }
 </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}

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

@@ -1 +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"}
+{"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/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',
@@ -126,6 +126,8 @@
       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,
@@ -155,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())
@@ -229,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;AA8RH,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/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

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

@@ -1 +1 @@
-{"version":3,"file":"popover-focus.d.ts","sourceRoot":"","sources":["../../src/lib/components/popover-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,iFAAiF;AACjF,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IACzC,mGAAmG;IACnG,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACvC,4FAA4F;IAC5F,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACrE;AAED,8GAA8G;AAC9G,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAE9D;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,kBAAkB,CAkClE"}
+{"version":3,"file":"popover-focus.d.ts","sourceRoot":"","sources":["../../src/lib/components/popover-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAA;AAKzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,iFAAiF;AACjF,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IACzC,mGAAmG;IACnG,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACvC;;;;;;;;OAQG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;IAChF,6CAA6C;IAC7C,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,4FAA4F;IAC5F,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACrE;AAED,8GAA8G;AAC9G,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAE9D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,kBAAkB,CAiDlE"}

package/dist/components/popover-focus.js

@@ -1,4 +1,5 @@
 import { createFocusReturn, shouldKeepOpenOnAnnotation, } from '@inkbar/core/dom';
+import { flushSync } from 'svelte';
 import { peekActivated } from '../context.js';
 /** Bits UI's `onInteractOutside` handler: a press that will activate an annotation keeps the popover open. */
 export function keepOpenOnAnnotation(event) {
@@ -16,8 +17,10 @@ export function keepOpenOnAnnotation(event) {
  * 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
@@ -35,7 +38,25 @@ export function useFocusReturn(ctx) {
     /** Open and close reports so far, so a deferred close can tell what followed it. */
     let opens = 0;
     let closes = 0;
+    /** A press closed the popover, and the planner answers that close without moving focus. */
+    let pressed = false;
     return {
+        onPressOutside(event, inside, close) {
+            const target = event.target;
+            if (event.button !== 0 || !(target instanceof Element))
+                return;
+            if (target.closest(inside) || shouldKeepOpenOnAnnotation(target))
+                return;
+            const scroll = target.closest('[data-ink-scroll]');
+            if (!scroll || !ctx.rootEl?.contains(scroll))
+                return;
+            pressed = true;
+            close();
+            flushSync();
+        },
+        onPressEnd() {
+            pressed = false;
+        },
         beforeRemove: (anchor, prefer) => planner.beforeRemove(anchor, prefer),
         onOpenAutoFocus() {
             opens += 1;
@@ -50,7 +71,7 @@ export function useFocusReturn(ctx) {
                 if (close !== closes)
                     return;
                 // An open followed: the popover is open, so only the plan is cleared.
-                discarding = opens !== opensBefore;
+                discarding = opens !== opensBefore || pressed;
                 try {
                     planner.onCloseAutoFocus(event, anchor);
                 }

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 import type { Annotation, InkDocument, InkStatus, PdfAssets, SignatureLibrary } from '@inkbar/core';
-import type { Tool, ToolController, ToolId, ToolOptions, ToolStyle, Viewport, ZoomValue } from '@inkbar/core/dom';
+import type { DecorateAnnotation, 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 {
@@ -35,6 +35,8 @@ export interface InkContext {
     setTool(id: ToolId): void;
     /** Host tools from InkRoot's `tools` prop; InkViewport registers them. */
     readonly hostTools: Tool[] | undefined;
+    /** InkRoot's `decorateAnnotation` prop. InkViewport re-applies decorations when it changes. */
+    readonly decorateAnnotation: DecorateAnnotation | 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. */
@@ -52,6 +54,11 @@ export interface InkContext {
     reportPage(p: number): void;
     /** Last activated annotation (Enter, click with the note tool, etc.). Popovers key off this. */
     readonly activated: string | null;
+    /**
+     * Activates annotation `id`, or clears the activation with `null`. This is the context's
+     * own: unlike core's `Viewer.setActivated`, it calls InkRoot's `onActivate` for an id, and
+     * it does not check that the id is in the document.
+     */
     setActivated(id: string | null): void;
     readonly history: InkHistory;
     readonly rootEl: HTMLElement | null;

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"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"}