@inkbar/svelte 0.5.0 → 0.7.0

package/dist/components/InkRoot.svelte

@@ -11,7 +11,13 @@
     PdfAssets,
     SignatureStore,
   } from '@inkbar/core'
-  import type { DecorateAnnotation, Tool, ToolId, ZoomValue } from '@inkbar/core/dom'
+  import type {
+    DecorateAnnotation,
+    InkPlugin,
+    Tool,
+    ToolId,
+    ZoomValue,
+  } from '@inkbar/core/dom'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
@@ -39,6 +45,12 @@
      * document opens.
      */
     tools?: Tool[] | undefined
+    /**
+     * Plugins, set up once when the root is created; a later change to this prop is not
+     * applied. Their tools join `tools`, their decoration and page layers apply to every
+     * document, and their commands are placed with `InkCommand` or `useCommand`.
+     */
+    plugins?: InkPlugin[] | undefined
     /**
      * Adds `data-*` attributes, classes and a screen-reader description to each annotation's
      * element (see `DecorateAnnotation`). Decorations re-apply whenever the annotations change
@@ -86,13 +98,20 @@
     createSnapshotHistory,
     InkError as InkErrorClass,
     openDocument,
+    readonly,
+    writable,
   } from '@inkbar/core'
   import {
+    createPluginHost,
+    createSearchController,
     createToolOptions,
     cssVariableDefaults,
     FONT_FAMILIES,
+    handleFindKey,
+    pageSelectionText,
     SIGNATURE_FONTS,
     trackToolStyle,
+    viewerSearchOf,
   } from '@inkbar/core/dom'
   import { DEV } from 'esm-env'
   import { untrack } from 'svelte'
@@ -101,7 +120,13 @@
   import { setInkContext, type InkContext, type InkHistory } from '../context.js'
   import { useReadable } from '../use-readable.svelte.js'
 
-  import type { ToolController, Viewport } from '@inkbar/core/dom'
+  import type { PluginHistory } from '@inkbar/core'
+  import type {
+    PluginHost,
+    SearchController,
+    ToolController,
+    Viewport,
+  } from '@inkbar/core/dom'
 
   let {
     src,
@@ -114,6 +139,7 @@
     tool = $bindable(),
     onToolChange,
     tools: hostTools,
+    plugins,
     decorateAnnotation,
     fonts,
     signatures: signatureStore,
@@ -146,6 +172,7 @@
   const IDLE: InkStatus = { state: 'idle' }
   const NO_ANNOTATIONS: readonly Annotation[] = []
   const NO_IDS: readonly string[] = []
+  const noop = (): void => undefined
 
   /** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */
   function identity(source: DocumentSource | null): unknown {
@@ -160,6 +187,8 @@
   }
 
   let document = $state.raw<InkDocument | null>(null)
+  /** The same document outside the reactive graph, for the plugins' history. */
+  let documentNow: InkDocument | null = null
   /** Overrides the document's status while opening, and when opening itself failed. */
   let override = $state.raw<InkStatus | null>(null)
   let activated = $state<string | null>(null)
@@ -206,6 +235,8 @@
     const pw = sourcePassword
     let cancelled = false
     let opened: InkDocument | null = null
+    /** The snapshot history's hold on a controlled document's store. */
+    let detach: () => void = noop
     untrack(() => snapshotHistory.clear())
     const source = untrack(() => src)
     if (source === null) {
@@ -249,7 +280,13 @@
         const current = untrack(() => annotations)
         if (doc.annotations.mode === 'controlled' && current !== undefined)
           doc.annotations.setControlledValue(current)
+        documentNow = doc
         document = doc
+        // Controlled edits run the plugins' reactions inside their own snapshot step.
+        if (doc.annotations.mode === 'controlled')
+          detach = snapshotHistory.attach(doc.annotations)
+        // The document is current, so the host reads its history when it hears of it.
+        hostDocument.set(doc)
         override = null
         setTestHook(ref, doc)
         const s = doc.status.get()
@@ -272,7 +309,11 @@
     })()
     return () => {
       cancelled = true
+      // Cleared first, so the plugins close their stores while the document is still alive.
+      hostDocument.set(null)
+      detach()
       opened?.destroy()
+      documentNow = null
       document = null
       setTestHook(ref, undefined)
     }
@@ -295,6 +336,7 @@
   function setActivated(id: string | null): void {
     activated = id
     activatedNow = id
+    hostActivated.set(id)
     if (id) onActivate?.(id)
   }
   function reportZoom(z: ZoomValue): void {
@@ -325,8 +367,93 @@
       else if (document) document.history.batch(fn)
       else fn()
     },
+    track: (store) => pluginHistory.track(store),
+    react: (fn) => pluginHistory.react(fn),
+  }
+
+  /**
+   * The history the plugins reach, picked by the open document's mode when they call. The host
+   * reads it as soon as a document opens, so it goes by `documentNow`, which is set by then.
+   */
+  const activeHistory = (): PluginHistory | undefined => {
+    const doc = documentNow
+    if (!doc) return undefined
+    return doc.annotations.mode === 'controlled' ? snapshotHistory : doc.history
+  }
+  const pluginHistory: PluginHistory = {
+    batch: (fn) => {
+      const h = activeHistory()
+      if (h) h.batch(fn)
+      else fn()
+    },
+    track: (store) => activeHistory()?.track(store) ?? noop,
+    react: (fn) => activeHistory()?.react(fn) ?? noop,
   }
 
+  /*
+   * One plugin host for the root's life, built in an effect so that no `setup` runs on the
+   * server, where effects never run and nothing would clean it up. Until then `pluginHost` is
+   * null and InkCommand renders its command disabled. The open effect above runs first, but
+   * the document it opens arrives after an await, so the host is in place by then. It follows
+   * these writables rather than the root's state: the open effect sets `hostDocument` once
+   * `documentNow` is current.
+   */
+  const hostDocument = writable<InkDocument | null>(null)
+  const hostActivated = writable<string | null>(null)
+  const viewportEl = writable<HTMLElement | null>(null)
+  let pluginHost = $state.raw<PluginHost | null>(null)
+  /** One search controller for the root's life, built with the plugin host that shares it. */
+  let search = $state.raw<SearchController | null>(null)
+  $effect(() => {
+    const controller = untrack(() =>
+      createSearchController({
+        document: readonly(hostDocument),
+        viewport: () => viewport,
+      })
+    )
+    const host = untrack(() =>
+      createPluginHost({
+        // Read once, as documented on the prop.
+        plugins: plugins ?? [],
+        document: readonly(hostDocument),
+        history: () => pluginHistory,
+        activated: readonly(hostActivated),
+        // As in `createViewer`: an id not in the open document is ignored.
+        setActivated: (id) => {
+          if (id === null || documentNow?.annotations.get(id)) setActivated(id)
+        },
+        root: readonly(viewportEl),
+        decorate: () => decorateAnnotation,
+        viewport: () => viewport,
+        search: viewerSearchOf(controller),
+      })
+    )
+    search = controller
+    pluginHost = host
+    // Destroyed after InkViewport's engine and its plugin layers, as in `createViewer`: Svelte
+    // creates a component's effects after its template and tears them down in creation order,
+    // so the children's teardowns run first.
+    return () => {
+      host.destroy()
+      controller.destroy()
+    }
+  })
+
+  /*
+   * Ctrl/Cmd+F while focus is in the root and a find bar is mounted; else the browser's. A
+   * native listener: the handler reads the event's `currentTarget`, which is the root here.
+   */
+  $effect(() => {
+    const el = ref
+    const controller = search
+    if (!el || !controller) return
+    const onKeydown = (e: KeyboardEvent): void => {
+      handleFindKey(e, controller, () => pageSelectionText(el))
+    }
+    el.addEventListener('keydown', onKeydown)
+    return () => el.removeEventListener('keydown', onKeydown)
+  })
+
   /** The document's tool style; it batches through `inkHistory`, whichever mode is on. */
   const styleTracker = $derived.by(() => {
     const doc = document
@@ -335,7 +462,8 @@
       trackToolStyle({
         store: doc.annotations,
         history: { batch: (fn) => inkHistory.batch(fn) },
-        tools: hostTools,
+        // The plugins' tools too, so a plugin tool's style group applies.
+        tools: [...(hostTools ?? []), ...(pluginHost?.tools ?? [])],
         tool: currentTool,
       })
     )
@@ -361,6 +489,13 @@
     get selection() {
       return selection.current
     },
+    get pluginHost() {
+      return pluginHost
+    },
+    get search() {
+      return search
+    },
+    viewportEl,
     get viewport() {
       return viewport
     },

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 { DecorateAnnotation, Tool, ToolId, ZoomValue } from '@inkbar/core/dom';
+import type { DecorateAnnotation, InkPlugin, 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,12 @@ export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
      * document opens.
      */
     tools?: Tool[] | undefined;
+    /**
+     * Plugins, set up once when the root is created; a later change to this prop is not
+     * applied. Their tools join `tools`, their decoration and page layers apply to every
+     * document, and their commands are placed with `InkCommand` or `useCommand`.
+     */
+    plugins?: InkPlugin[] | undefined;
     /**
      * Adds `data-*` attributes, classes and a screen-reader description to each annotation's
      * element (see `DecorateAnnotation`). Decorations re-apply whenever the annotations change

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/InkSearchButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  /*
+   * Opens the find bar; pressed while it is open. Pressing it again focuses the field. Place
+   * it in a toolbar next to `InkFindBar`, which it needs for the field to focus. Disabled until
+   * a document is open.
+   */
+  import { Search } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+  import { tick } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { useDocument } from '../hooks/useDocument.svelte.js'
+  import { useSearch } from '../hooks/useSearch.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkSearchButtonProps } from './search-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkSearchButtonProps = $props()
+
+  const ctx = useInkContext('InkSearchButton')
+  const search = useSearch()
+  const doc = useDocument()
+</script>
+
+<Toolbar.Button
+  {...asBitsProps(rest)}
+  class={['ink-search-button', className]}
+  data-ink-search-button=""
+  aria-label="Find"
+  title="Find"
+  aria-pressed={search.state.open}
+  data-state={search.state.open ? 'on' : 'off'}
+  disabled={!doc.isReady || !!disabled}
+  {...child ? { child } : {}}
+  onclick={async (e) => {
+    onclick?.(e)
+    if (e.defaultPrevented) return
+    search.open()
+    // The bar shows once this update lands; its field takes focus then.
+    await tick()
+    const field = ctx.rootEl?.querySelector<HTMLInputElement>('[data-ink-find-bar] input')
+    field?.focus()
+    field?.select()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={Search} />{/if}
+</Toolbar.Button>

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

@@ -0,0 +1,5 @@
+import type { InkSearchButtonProps } from './search-button.js';
+declare const InkSearchButton: import("svelte").Component<InkSearchButtonProps, {}, "">;
+type InkSearchButton = ReturnType<typeof InkSearchButton>;
+export default InkSearchButton;
+//# sourceMappingURL=InkSearchButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSearchButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSearchButton.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AA8C/D,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/InkShapeMenu.svelte

@@ -18,9 +18,7 @@
 
 <script lang="ts">
   import {
-    focusInitialMenuItem,
     handleMenuKeys,
-    menuItems,
     SHAPE_COLUMNS,
     SHAPE_ICONS,
     SHAPE_KINDS,
@@ -35,6 +33,7 @@
   import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
 
   import InkIcon from './InkIcon.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   let { class: className, children, ...rest }: InkShapeMenuProps = $props()
 
@@ -50,15 +49,14 @@
   let menu = $state<HTMLElement | null>(null)
 
   /** ArrowDown opens on the first item; a click opens on the checked one. */
-  let focusFirst = false
-  // Bits runs the open-focus callback more than once, so the flag outlives it; reset on close.
+  const openFocus = createMenuOpenFocus()
   $effect(() => {
-    if (!open) focusFirst = false
+    if (!open) openFocus.reset()
   })
   function onTriggerKeydown(e: KeyboardEvent): void {
     if (e.key !== 'ArrowDown' || e.defaultPrevented || open) return
     e.preventDefault()
-    focusFirst = true
+    openFocus.first()
     open = true
   }
 
@@ -123,13 +121,8 @@
         align="start"
         sideOffset={4}
         collisionPadding={8}
-        onOpenAutoFocus={(e) => {
-          e.preventDefault()
-          if (menu) {
-            if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
-            else focusInitialMenuItem(menu)
-          }
-        }}
+        onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
+        onfocusin={openFocus.onfocusin}
         onkeydown={(e) => menu && handleMenuKeys(e, menu)}
       >
         <div

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;AAsGH,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;AA+FH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InkSignatureMenu.svelte

@@ -21,9 +21,7 @@
 
 <script lang="ts">
   import {
-    focusInitialMenuItem,
     handleMenuKeys,
-    menuItems,
     SIGNATURE_LABELS,
     signatureMenuModel,
     signaturePreview,
@@ -39,6 +37,7 @@
 
   import InkIcon from './InkIcon.svelte'
   import InkSignatureDialog from './InkSignatureDialog.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   import type { SignatureOptions, SignatureTemplate } from '@inkbar/core'
 
@@ -65,10 +64,9 @@
   let main = $state<HTMLElement | null>(null)
 
   /** ArrowDown opens on the first item; a click opens on the checked one. */
-  let focusFirst = false
-  // Bits runs the open-focus callback more than once, so the flag outlives it; reset on close.
+  const openFocus = createMenuOpenFocus()
   $effect(() => {
-    if (!open) focusFirst = false
+    if (!open) openFocus.reset()
   })
   /** Set while the menu closes for the dialog, which takes focus instead of the trigger. */
   let toDialog = false
@@ -76,7 +74,7 @@
   function onTriggerKeydown(e: KeyboardEvent): void {
     if (e.key !== 'ArrowDown' || e.defaultPrevented || open) return
     e.preventDefault()
-    focusFirst = true
+    openFocus.first()
     open = true
   }
 
@@ -168,13 +166,8 @@
         align="start"
         sideOffset={4}
         collisionPadding={8}
-        onOpenAutoFocus={(e) => {
-          e.preventDefault()
-          if (menu) {
-            if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
-            else focusInitialMenuItem(menu)
-          }
-        }}
+        onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
+        onfocusin={openFocus.onfocusin}
         onCloseAutoFocus={(e) => {
           if (toDialog) e.preventDefault()
           toDialog = false

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;AAyLH,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;AAkLH,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

@@ -27,6 +27,7 @@
   } from '@inkbar/icons'
   import { Toolbar } from 'bits-ui'
 
+  import { useInkContext } from '../context.js'
   import { useTool } from '../hooks/useTool.svelte.js'
 
   import { asBitsProps } from './child-snippet.js'
@@ -56,11 +57,18 @@
     ...rest
   }: InkToolButtonProps = $props()
 
+  const ctx = useInkContext('InkToolButton')
   const current = useTool()
   const active = $derived(current.tool === 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])
+  /** A host or plugin tool by this id, for the name and icon core has none for. */
+  const own = $derived(
+    [...(ctx.hostTools ?? []), ...(ctx.pluginHost?.tools ?? [])].find(
+      (t) => t.id === tool
+    )
+  )
+  // `label` and `children` win; then core's name and icon; then the tool's own.
+  const name = $derived(label ?? TOOL_LABELS[tool] ?? own?.label ?? tool)
+  const icon = $derived(ICONS[tool] ?? own?.icon)
 </script>
 
 <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;AA4EH,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;AAqFH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkViewport.svelte

@@ -126,6 +126,11 @@
       buffer,
       tool: ctx.tool,
       ...(ctx.hostTools ? { tools: ctx.hostTools } : {}),
+      // The engine adds the plugins' tools and layers, and decorates through the host, which
+      // reads `decorateAnnotation` first.
+      ...(ctx.pluginHost ? { plugins: ctx.pluginHost } : {}),
+      // The highlights draw from the shared search.
+      ...(ctx.search ? { search: ctx.search } : {}),
       // 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 } : {}),
@@ -191,6 +196,16 @@
     })
   }
 
+  // The plugins' `root`. Before the build below, so it is set when the engine mounts.
+  $effect(() => {
+    const el = scroll
+    const { viewportEl } = ctx
+    viewportEl.set(el)
+    return () => {
+      if (viewportEl.get() === el) viewportEl.set(null)
+    }
+  })
+
   // Build for a new document or status; tear down on the next change and on unmount. Only the
   // values read before `untrack` are dependencies, each through a derived, which notifies only
   // when the value changes: the status is a new object on every engine report.

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;AA+SH,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;AA8TH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/menu-open-focus.d.ts

@@ -0,0 +1,12 @@
+export interface MenuOpenFocus {
+    /** Makes the next open start on the first item (ArrowDown on the trigger). */
+    first: () => void;
+    /** For the content's `onOpenAutoFocus`. */
+    onOpenAutoFocus: (e: Event, menu: HTMLElement | null) => void;
+    /** For the content's `onfocusin`: remembers where the user is. */
+    onfocusin: (e: FocusEvent) => void;
+    /** Call when the menu closes. */
+    reset: () => void;
+}
+export declare function createMenuOpenFocus(): MenuOpenFocus;
+//# sourceMappingURL=menu-open-focus.d.ts.map

package/dist/components/menu-open-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-open-focus.d.ts","sourceRoot":"","sources":["../../src/lib/components/menu-open-focus.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,2CAA2C;IAC3C,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,kEAAkE;IAClE,SAAS,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IAClC,iCAAiC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,wBAAgB,mBAAmB,IAAI,aAAa,CAsBnD"}

package/dist/components/menu-open-focus.js

@@ -0,0 +1,35 @@
+/*
+ * Where a toolbar menu puts focus as it opens: the first item when ArrowDown opened it, else the
+ * checked one. Bits can remount a popover's focus scope just after it opens, which sends focus
+ * to the trigger and runs the open-focus callback again; by then the user may have moved on, so
+ * a repeat run goes back to the item they last focused.
+ */
+import { focusInitialMenuItem, menuItems } from '@inkbar/core/dom';
+export function createMenuOpenFocus() {
+    let first = false;
+    let last = null;
+    return {
+        first: () => {
+            first = true;
+        },
+        onOpenAutoFocus: (e, menu) => {
+            e.preventDefault();
+            if (!menu)
+                return;
+            if (last && menu.contains(last))
+                last.focus({ preventScroll: true });
+            else if (first)
+                menuItems(menu)[0]?.focus({ preventScroll: true });
+            else
+                focusInitialMenuItem(menu);
+        },
+        onfocusin: (e) => {
+            if (e.target instanceof HTMLElement)
+                last = e.target;
+        },
+        reset: () => {
+            first = false;
+            last = null;
+        },
+    };
+}

package/dist/components/search-button.d.ts

@@ -0,0 +1,10 @@
+import type { ChildSnippet } from './child-snippet.js';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/** Props of `InkSearchButton`: a toolbar button that may render through `child`. */
+export interface InkSearchButtonProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined;
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined;
+}
+//# sourceMappingURL=search-button.d.ts.map

package/dist/components/search-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-button.d.ts","sourceRoot":"","sources":["../../src/lib/components/search-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,oFAAoF;AACpF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAClF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,oDAAoD;IACpD,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC"}

package/dist/components/search-button.js

@@ -0,0 +1 @@
+export {};

package/dist/context.d.ts

@@ -1,8 +1,11 @@
-import type { Annotation, InkDocument, InkStatus, PdfAssets, SignatureLibrary } from '@inkbar/core';
-import type { DecorateAnnotation, Tool, ToolController, ToolId, ToolOptions, ToolStyle, Viewport, ZoomValue } from '@inkbar/core/dom';
+import type { Annotation, InkDocument, InkStatus, PdfAssets, PluginHistory, SignatureLibrary, Writable } from '@inkbar/core';
+import type { DecorateAnnotation, PluginHost, SearchController, 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 {
+/**
+ * Undo and redo for the current document, whichever mode its annotations are in. `track` and
+ * `react` (from `PluginHistory`) reach the same history, so plugin stores undo with the edits.
+ */
+export interface InkHistory extends PluginHistory {
     readonly canUndo: boolean;
     readonly canRedo: boolean;
     undo(): void;
@@ -27,6 +30,20 @@ export interface InkContext {
     readonly status: InkStatus;
     readonly annotations: readonly Annotation[];
     readonly selection: readonly string[];
+    /**
+     * The plugins from InkRoot's `plugins` prop, set up once the root has mounted and kept for
+     * its life; `null` before that, and on the server. InkViewport hands it to the engine;
+     * InkCommand places its commands.
+     */
+    readonly pluginHost: PluginHost | null;
+    /**
+     * The root's search controller, built with the plugin host and kept for its life; `null`
+     * before the root has mounted, and on the server. InkViewport hands it to the engine, which
+     * draws the highlights; `useSearch` and the find bar read it.
+     */
+    readonly search: SearchController | null;
+    /** InkViewport's scroll element while it is mounted: the plugins' `root`. */
+    readonly viewportEl: Writable<HTMLElement | null>;
     /** Set by InkViewport once it has built its viewport and tool controller. */
     readonly viewport: Viewport | null;
     readonly tools: ToolController | null;