@inkbar/svelte 0.6.0 → 0.8.0

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

@@ -1,5 +1,5 @@
 import type { ChildSnippet } from './child-snippet.js';
-import type { Annotation, AnnotationChange, AnnotationDefaults, DocumentSource, InkDocument, InkError, InkStatus, PdfAssets, SignatureStore } from '@inkbar/core';
+import type { Annotation, AnnotationChange, AnnotationDefaults, DocumentSource, FieldsChange, FieldValues, FormAction, InkDocument, InkError, InkStatus, PdfAssets, SignatureStore } from '@inkbar/core';
 import type { DecorateAnnotation, InkPlugin, Tool, ToolId, ZoomValue } from '@inkbar/core/dom';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -17,6 +17,21 @@ export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     annotations?: Annotation[] | undefined;
     onAnnotationsChange?: ((next: Annotation[]) => void) | undefined;
     onChange?: ((change: AnnotationChange) => void) | undefined;
+    /**
+     * Pass (with `bind:`) to put the form's field values under the host's control. A commit
+     * shows at once and is reported after; the host's push wins. The mode is fixed when a
+     * document opens, as for `annotations`.
+     */
+    fields?: FieldValues | undefined;
+    /**
+     * Committed field values, in full, with what changed them. Called only while the fields
+     * are controlled, after the bound value is written.
+     */
+    onFieldsChange?: ((next: FieldValues, change: FieldsChange) => void) | undefined;
+    /** The form asked to submit, open a link, send mail, print or prompt. Inkbar does none. */
+    onformaction?: ((action: FormAction) => void) | undefined;
+    /** Tints fillable form fields. Default true. A change applies to the open document in place. */
+    formHighlight?: boolean | undefined;
     tool?: ToolId | undefined;
     onToolChange?: ((tool: ToolId) => void) | undefined;
     /**
@@ -57,6 +72,11 @@ export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     /** Undo history. Defaults to on for uncontrolled, off for controlled. */
     history?: boolean | undefined;
     onReady?: ((doc: InkDocument) => void) | undefined;
+    /**
+     * Opening failed, or later: a form script failed (`FormScriptError`; the form stays
+     * fillable), or a signature field refused its signing (`FieldSigned`, `FieldReadOnly`).
+     * An error from while the document opened comes after `onReady`.
+     */
     onError?: ((error: InkError) => void) | undefined;
     onActivate?: ((id: string) => void) | undefined;
     /** The root element, for hosts that bind it. */
@@ -76,7 +96,7 @@ declare const InkRoot: import("svelte").Component<InkRootProps, {
     history: InkHistory;
     getDocument: () => InkDocument | null;
     getStatus: () => InkStatus;
-}, "page" | "annotations" | "tool" | "zoom" | "ref">;
+}, "page" | "annotations" | "fields" | "tool" | "zoom" | "ref">;
 type InkRoot = ReturnType<typeof InkRoot>;
 export default InkRoot;
 //# sourceMappingURL=InkRoot.svelte.d.ts.map

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

@@ -0,0 +1,187 @@
+<script lang="ts">
+  /*
+   * The signature menu for a signature field, opened from the field's "Sign" button and
+   * anchored to its box. It lists the saved signatures and "Create signature", as
+   * `InkSignatureMenu` does. Picking one signs the field with it (`signField`); a signature
+   * made in `InkSignatureDialog` signs the field once saved, without picking the signature
+   * tool. Focus returns to the field. InkViewport mounts it, one per document; hosts compose
+   * nothing.
+   */
+  import { InkError, signField } from '@inkbar/core'
+  import {
+    handleMenuKeys,
+    SIGNATURE_LABELS,
+    signatureMenuModel,
+    watchDetached,
+  } from '@inkbar/core/dom'
+  import { Popover } from 'bits-ui'
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import InkSignatureDialog from './InkSignatureDialog.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
+  import SignatureMenuPanel from './SignatureMenuPanel.svelte'
+
+  import type { InkDocument, SignatureTemplate } from '@inkbar/core'
+  import type { SignFieldRequest } from '@inkbar/core/dom'
+
+  let {
+    request,
+    onClose,
+  }: {
+    /** The field to sign; `null` while the menu is closed. */
+    request: SignFieldRequest | null
+    onClose: () => void
+  } = $props()
+
+  const NO_TEMPLATES: readonly SignatureTemplate[] = []
+
+  const ctx = useInkContext('InkSignFieldPopover')
+  const templates = useReadable(() => ctx.signatures.templates, NO_TEMPLATES)
+  // No signature is "chosen" here: each signing picks its own.
+  const model = $derived(signatureMenuModel(templates.current, {}))
+  const open = $derived(request !== null)
+  let menu = $state<HTMLElement | null>(null)
+  /** The field the dialog signs once its signature is saved, and the document it is in. */
+  let creatingFor = $state.raw<{ req: SignFieldRequest; doc: InkDocument } | null>(null)
+  /**
+   * The request the menu last opened for, kept to return focus once it closes. Untracked:
+   * Bits UI reports the close from an effect teardown, where a reactive read of `request`
+   * returns the value from before the close.
+   */
+  let last: SignFieldRequest | null = null
+  /** Set while the menu closes for the dialog, which takes focus instead of the field. */
+  let toDialog = false
+  /** Cleared on destroy, so a dialog save that settles after the document went signs nothing. */
+  let alive = true
+  $effect(() => () => {
+    alive = false
+  })
+
+  $effect(() => {
+    if (request) last = request
+  })
+  // The field's box went (its page unmounted, its layer rebuilt): the menu has nothing to
+  // stand by.
+  $effect(() => {
+    const req = request
+    if (!req) return
+    return watchDetached(req.anchor, () => untrack(onClose))
+  })
+  // An old removal error is not news when the menu opens again.
+  $effect(() => {
+    if (open) untrack(() => ctx.signatures.clearRemoveError())
+  })
+  const openFocus = createMenuOpenFocus()
+  $effect(() => {
+    if (!open) openFocus.reset()
+  })
+
+  /** The field's own button, which focus returns to. */
+  const control = (req: SignFieldRequest | null): HTMLElement | null =>
+    req?.anchor.querySelector<HTMLElement>('button.ink-form-control') ?? null
+
+  /** Focus goes back to the field's button, or to the scroll element once the field's box has gone. */
+  function returnFocus(req: SignFieldRequest | null): void {
+    const c = control(req)
+    ;(c?.isConnected ? c : ctx.viewportEl.get())?.focus({ preventScroll: true })
+  }
+
+  /** Signs the request's field with `t`; a refusal (signed, read-only by now) goes to `onError`. */
+  function sign(req: SignFieldRequest, doc: InkDocument, t: SignatureTemplate): void {
+    // The document the request came from is still the open one.
+    if (!alive || ctx.document !== doc) return
+    try {
+      signField(doc, req.field, req.widget, t)
+    } catch (e) {
+      if (!(e instanceof InkError)) throw e
+      ctx.reportError(e)
+    }
+  }
+
+  function choose(t: SignatureTemplate): void {
+    const req = request
+    const doc = ctx.document
+    onClose()
+    if (req && doc) sign(req, doc, t)
+  }
+
+  function create(): void {
+    const req = request
+    const doc = ctx.document
+    if (!req || !doc) return
+    toDialog = true
+    creatingFor = { req, doc }
+    onClose()
+  }
+
+  function onInteractOutside(e: PointerEvent): void {
+    // A press on this field's own button toggles the menu through the engine; it must not
+    // also close it here first, or the click would open it again.
+    const target = e.target
+    if (target instanceof Node && request?.anchor.contains(target)) e.preventDefault()
+  }
+</script>
+
+<Popover.Root
+  bind:open={
+    () => open,
+    (next) => {
+      if (!next) onClose()
+    }
+  }
+>
+  <Popover.Portal>
+    {#if request}
+      <Popover.Content
+        bind:ref={menu}
+        role="menu"
+        aria-label={SIGNATURE_LABELS.menu}
+        class="ink-select-content ink-menu-content"
+        data-ink-select-content=""
+        data-ink-menu="signature"
+        data-ink-sign-field-menu={request.field}
+        customAnchor={request.anchor}
+        side="bottom"
+        align="start"
+        sideOffset={4}
+        collisionPadding={8}
+        onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
+        onfocusin={openFocus.onfocusin}
+        onCloseAutoFocus={(e) => {
+          e.preventDefault()
+          if (!toDialog) returnFocus(last)
+          toDialog = false
+        }}
+        {onInteractOutside}
+        onkeydown={(e) => menu && handleMenuKeys(e, menu)}
+      >
+        <SignatureMenuPanel
+          items={model.items}
+          menu={() => menu}
+          onChoose={choose}
+          onCreate={create}
+        />
+      </Popover.Content>
+    {/if}
+  </Popover.Portal>
+</Popover.Root>
+<InkSignatureDialog
+  bind:open={
+    () => creatingFor !== null,
+    (next) => {
+      if (!next) creatingFor = null
+    }
+  }
+  select={false}
+  onSave={(t) => {
+    const c = creatingFor
+    if (c) sign(c.req, c.doc, t)
+  }}
+  onCloseAutoFocus={(e) => {
+    e.preventDefault()
+    returnFocus(last)
+  }}
+/>

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

@@ -0,0 +1,10 @@
+import type { SignFieldRequest } from '@inkbar/core/dom';
+type $$ComponentProps = {
+    /** The field to sign; `null` while the menu is closed. */
+    request: SignFieldRequest | null;
+    onClose: () => void;
+};
+declare const InkSignFieldPopover: import("svelte").Component<$$ComponentProps, {}, "">;
+type InkSignFieldPopover = ReturnType<typeof InkSignFieldPopover>;
+export default InkSignFieldPopover;
+//# sourceMappingURL=InkSignFieldPopover.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSignFieldPopover.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSignFieldPopover.svelte.ts"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,gBAAgB,GAAI;IACtB,0DAA0D;IAC1D,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AA2IJ,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/InkSignatureDialog.svelte

@@ -4,15 +4,21 @@
   /**
    * "Create signature": a modal with Draw, Type and Image tabs. Draw is a pad with the draw
    * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG
-   * or JPEG scan. Save stores the template through InkRoot's signature store and selects it
-   * for the `signature` tool. Escape, Cancel or a press outside closes it.
+   * or JPEG scan. Save stores the template through InkRoot's signature store and, unless
+   * `select` is false, selects it for the `signature` tool. Escape, Cancel or a press outside
+   * closes it.
    */
   export interface InkSignatureDialogProps {
     open?: boolean
     onOpenChange?: ((open: boolean) => void) | undefined
     /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined
-    /** Called with the new template once it is saved and selected. */
+    /**
+     * Whether saving selects the new signature for the `signature` tool. Default true. False
+     * leaves the tool alone, for a dialog that signs a field with it through `onSave`.
+     */
+    select?: boolean | undefined
+    /** Called with the new template once it is saved (and selected, with `select`). */
     onSave?: ((template: SignatureTemplate) => void) | undefined
     /** Where focus goes on close; by default, back to what had it before. */
     onCloseAutoFocus?: ((event: Event) => void) | undefined
@@ -30,6 +36,7 @@
     open = $bindable(false),
     onOpenChange,
     fonts,
+    select = true,
     onSave,
     onCloseAutoFocus,
     class: className,
@@ -62,6 +69,7 @@
       <Dialog.Title class="ink-dialog-title">{SIGNATURE_LABELS.dialog}</Dialog.Title>
       <SignatureForm
         {fonts}
+        {select}
         onSaved={(t) => onSave?.(t)}
         onClose={() => setOpen(false)}
       />

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

@@ -2,15 +2,21 @@ import type { SignatureTemplate } from '@inkbar/core';
 /**
  * "Create signature": a modal with Draw, Type and Image tabs. Draw is a pad with the draw
  * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG
- * or JPEG scan. Save stores the template through InkRoot's signature store and selects it
- * for the `signature` tool. Escape, Cancel or a press outside closes it.
+ * or JPEG scan. Save stores the template through InkRoot's signature store and, unless
+ * `select` is false, selects it for the `signature` tool. Escape, Cancel or a press outside
+ * closes it.
  */
 export interface InkSignatureDialogProps {
     open?: boolean;
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined;
-    /** Called with the new template once it is saved and selected. */
+    /**
+     * Whether saving selects the new signature for the `signature` tool. Default true. False
+     * leaves the tool alone, for a dialog that signs a field with it through `onSave`.
+     */
+    select?: boolean | undefined;
+    /** Called with the new template once it is saved (and selected, with `select`). */
     onSave?: ((template: SignatureTemplate) => void) | undefined;
     /** Where focus goes on close; by default, back to what had it before. */
     onCloseAutoFocus?: ((event: Event) => void) | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSignatureDialog.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACpD,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC,kEAAkE;IAClE,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC5D,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B;AAkDH,QAAA,MAAM,kBAAkB,iEAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"InkSignatureDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSignatureDialog.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAErD;;;;;;GAMG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACpD,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC5B,mFAAmF;IACnF,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC5D,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B;AAmDH,QAAA,MAAM,kBAAkB,iEAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/InkSignatureMenu.svelte

@@ -20,15 +20,10 @@
 </script>
 
 <script lang="ts">
-  import {
-    handleMenuKeys,
-    SIGNATURE_LABELS,
-    signatureMenuModel,
-    signaturePreview,
-  } from '@inkbar/core/dom'
-  import { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'
+  import { handleMenuKeys, SIGNATURE_LABELS, signatureMenuModel } from '@inkbar/core/dom'
+  import { ChevronDown, Signature } from '@inkbar/icons'
   import { Popover, Toolbar } from 'bits-ui'
-  import { tick, untrack } from 'svelte'
+  import { untrack } from 'svelte'
 
   import { useInkContext } from '../context.js'
   import { useTool } from '../hooks/useTool.svelte.js'
@@ -38,6 +33,7 @@
   import InkIcon from './InkIcon.svelte'
   import InkSignatureDialog from './InkSignatureDialog.svelte'
   import { createMenuOpenFocus } from './menu-open-focus.js'
+  import SignatureMenuPanel from './SignatureMenuPanel.svelte'
 
   import type { SignatureOptions, SignatureTemplate } from '@inkbar/core'
 
@@ -49,7 +45,6 @@
   const current = useTool()
   const signature = useToolOptions<SignatureOptions>('signature')
   const templates = useReadable(() => ctx.signatures.templates, NO_TEMPLATES)
-  const removeError = useReadable(() => ctx.signatures.removeError, undefined)
   // An old removal error is not news when the menu opens again.
   $effect(() => {
     if (open) untrack(() => ctx.signatures.clearRemoveError())
@@ -89,24 +84,6 @@
     open = false
   }
 
-  /** Removes a template; focus moves to the signature now in its row, else "Create signature". */
-  function remove(id: string, row: number): void {
-    ctx.signatures.remove(id).then(
-      async () => {
-        await tick()
-        if (!menu) return
-        const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')
-        const next =
-          rows[Math.min(row, rows.length - 1)] ??
-          menu.querySelector<HTMLElement>('[data-ink-signature-create]')
-        next?.focus({ preventScroll: true })
-      },
-      () => {
-        // The host's store refused: the signature stays.
-      }
-    )
-  }
-
   function create(): void {
     toDialog = true
     open = false
@@ -174,78 +151,12 @@
         }}
         onkeydown={(e) => menu && handleMenuKeys(e, menu)}
       >
-        {#if model.items.length > 0}
-          <div
-            role="group"
-            aria-label={SIGNATURE_LABELS.saved}
-            class="ink-signature-list"
-            data-ink-menu-columns="2"
-          >
-            {#each model.items as item, row (item.id)}
-              {@const preview =
-                item.template.kind === 'ink' ? signaturePreview(item.template) : null}
-              <button
-                type="button"
-                role="menuitemradio"
-                aria-checked={item.checked}
-                aria-label={item.label}
-                tabindex={-1}
-                class="ink-select-item ink-menu-item ink-signature-item"
-                data-ink-select-item=""
-                data-key={item.id}
-                data-state={item.checked ? 'checked' : 'unchecked'}
-                onclick={() => choose(item.id)}
-              >
-                <span class="ink-signature-preview" data-kind={item.template.kind}>
-                  {#if item.template.kind === 'image'}
-                    <img src={item.template.imagedata} alt="" draggable="false" />
-                  {:else if preview}
-                    <svg viewBox={preview.viewBox} aria-hidden="true">
-                      {#each preview.paths as d, i (i)}
-                        <path {d} fill="currentColor" />
-                      {/each}
-                    </svg>
-                  {/if}
-                </span>
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                aria-label={item.removeLabel}
-                title={item.removeLabel}
-                tabindex={-1}
-                class="ink-menu-item ink-signature-remove"
-                data-ink-signature-remove=""
-                data-key={item.id}
-                onclick={() => remove(item.id, row)}
-              >
-                <InkIcon icon={Trash2} size={16} />
-              </button>
-            {/each}
-          </div>
-          <div role="separator" class="ink-select-separator"></div>
-        {/if}
-        <button
-          type="button"
-          role="menuitem"
-          tabindex={-1}
-          class="ink-select-item ink-menu-item ink-signature-create"
-          data-ink-select-item=""
-          data-ink-signature-create=""
-          onclick={create}
-        >
-          <InkIcon icon={Plus} size={16} />
-          {SIGNATURE_LABELS.create}
-        </button>
-        {#if removeError.current}
-          <p
-            class="ink-field-error ink-signature-remove-error"
-            role="alert"
-            data-ink-signature-remove-error=""
-          >
-            {removeError.current}
-          </p>
-        {/if}
+        <SignatureMenuPanel
+          items={model.items}
+          menu={() => menu}
+          onChoose={(t) => choose(t.id)}
+          onCreate={create}
+        />
       </Popover.Content>
     </Popover.Portal>
   </Popover.Root>

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

@@ -34,16 +34,28 @@
    * Two-way zoom and page: the viewport's own changes are reported through the context, and
    * the host's props are applied only when they differ from the viewport's state, so the echo
    * of a reported value does nothing.
+   *
+   * Form fields render in the engine's form layer. A signature field's "Sign" opens
+   * `InkSignFieldPopover`, and a form script's alert shows in `InkFormAlert`; both are mounted
+   * here, so hosts compose nothing for them.
    */
   import { mountViewer } from '@inkbar/core/dom'
   import { untrack } from 'svelte'
 
   import { useInkContext } from '../context.js'
 
+  import InkFormAlert from './InkFormAlert.svelte'
   import InkPage from './InkPage.svelte'
+  import InkSignFieldPopover from './InkSignFieldPopover.svelte'
 
   import type { InkDocument, InkStatus } from '@inkbar/core'
-  import type { PageMount, ToolId, ViewerEngine, ZoomValue } from '@inkbar/core/dom'
+  import type {
+    PageMount,
+    SignFieldRequest,
+    ToolId,
+    ViewerEngine,
+    ZoomValue,
+  } from '@inkbar/core/dom'
 
   let {
     mode = 'continuous',
@@ -74,6 +86,10 @@
   let scroll = $state<HTMLDivElement | null>(null)
   /** Page hosts, mounts and errors the engine reported; InkPage renders portals for them. */
   let pages = $state.raw<MountedPage[]>([])
+  /** The signature field whose menu is open. */
+  let signRequest = $state.raw<SignFieldRequest | null>(null)
+  /** The form script's message on show, and how many have been shown. */
+  let alert = $state.raw<{ message: string; shown: number } | null>(null)
 
   let engine: ViewerEngine | null = null
   /**
@@ -101,6 +117,9 @@
     builtWith = null
     ctx.setViewport(null, null)
     if (pages.length > 0) pages = []
+    // Their fields and the document they came from are gone.
+    signRequest = null
+    alert = null
   }
 
   function setup(
@@ -129,6 +148,8 @@
       // 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 } : {}),
@@ -138,6 +159,15 @@
       // Read through, so a new `signatures` store reaches the tool as well as the menus.
       signatureLibrary: () => ctx.signatures,
       customAnnotations: custom,
+      ...(ctx.formHighlight === undefined ? {} : { formHighlight: ctx.formHighlight }),
+      // The field's own button again, while its menu is open, closes the menu.
+      onSignField: (req) => {
+        signRequest = signRequest?.widget === req.widget ? null : req
+      },
+      onFormAction: (a) => ctx.reportFormAction(a),
+      onFormAlert: (message) => {
+        alert = { message, shown: (alert?.shown ?? 0) + 1 }
+      },
       onActivate: (id) => ctx.setActivated(id),
       onBuild: (vp, tc) => {
         ctx.setViewport(vp, tc)
@@ -278,6 +308,11 @@
     const tc = engine?.tools
     if (tc && tc.active.get() !== t) untrack(() => tc.set(t))
   })
+  // The tint follows `formHighlight` in place, without a new document.
+  $effect(() => {
+    const on = ctx.formHighlight ?? true
+    untrack(() => engine?.setFormHighlight(on))
+  })
   // The build applied both; these only act on a later change, not on mount.
   $effect(() => {
     const m = mode
@@ -340,4 +375,14 @@
       {pageError}
     />
   {/each}
+  <!-- Keyed by document, so the menu and its dialog start afresh for each one. -->
+  {#key buildDocument}
+    <InkSignFieldPopover request={signRequest} onClose={() => (signRequest = null)} />
+  {/key}
+  <InkFormAlert
+    message={alert?.message ?? null}
+    shown={alert?.shown ?? 0}
+    fallback={() => scroll}
+    onClose={() => (alert = null)}
+  />
 </div>

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