@inkbar/svelte 0.2.0 → 0.4.0

package/dist/components/InkLineStyleMenu.svelte

@@ -0,0 +1,141 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  /**
+   * Line weight, solid or dashed, and arrowheads, for the selection or the active tool. Each
+   * section disables when nothing selected (or no active tool) supports its props. The
+   * trigger carries `data-mixed` when the selection disagrees on any of them; a section with
+   * no single value shows no checkmark.
+   */
+  export interface InkLineStyleMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  import {
+    focusInitialMenuItem,
+    handleMenuKeys,
+    lineStyleMenuModel,
+    menuItems,
+  } from '@inkbar/core/dom'
+  import { Check, Minus } from '@inkbar/icons'
+  import { Popover, Toolbar } from 'bits-ui'
+
+  import { useToolStyle } from '../hooks/useToolStyle.svelte.js'
+
+  import { asBitsProps, composeHandlers } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  let {
+    class: className,
+    children,
+    disabled,
+    onclick,
+    onkeydown,
+    ...rest
+  }: InkLineStyleMenuProps = $props()
+
+  const style = useToolStyle()
+  let open = $state(false)
+
+  const model = $derived(lineStyleMenuModel(style.current, style.supported))
+
+  let menu = $state<HTMLElement | null>(null)
+
+  // The menu closes when the control disables (the selection cleared while it was open).
+  $effect(() => {
+    if (!model.enabled) open = false
+  })
+
+  /** 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.
+  $effect(() => {
+    if (!open) focusFirst = false
+  })
+  function onTriggerKeydown(e: KeyboardEvent): void {
+    if (e.key !== 'ArrowDown' || e.defaultPrevented || open || !model.enabled) return
+    e.preventDefault()
+    focusFirst = true
+    open = true
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Toolbar.Button
+        {...props}
+        {...asBitsProps(rest)}
+        class={['ink-menu-trigger ink-line-style-menu', className]}
+        data-ink-line-style-menu=""
+        data-state={open ? 'open' : 'closed'}
+        data-mixed={model.mixed ? '' : undefined}
+        aria-label="Line style"
+        title="Line style"
+        aria-haspopup="menu"
+        onclick={composeHandlers(onclick, props.onclick)}
+        onkeydown={composeHandlers(onkeydown, props.onkeydown, onTriggerKeydown)}
+        disabled={!!disabled || !model.enabled}
+      >
+        {#if children}{@render children()}{:else}<InkIcon icon={Minus} />{/if}
+      </Toolbar.Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      bind:ref={menu}
+      role="menu"
+      aria-label="Line style"
+      class="ink-select-content ink-menu-content"
+      data-ink-select-content=""
+      data-ink-menu="line-style"
+      side="bottom"
+      align="start"
+      sideOffset={4}
+      collisionPadding={8}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault()
+        if (menu) {
+          if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
+          else focusInitialMenuItem(menu)
+        }
+      }}
+      onkeydown={(e) => menu && handleMenuKeys(e, menu)}
+    >
+      {#each model.sections as section (section.label)}
+        <div
+          role="group"
+          class="ink-menu-group"
+          aria-label={section.label}
+          aria-disabled={section.disabled || undefined}
+          data-disabled={section.disabled ? '' : undefined}
+        >
+          <div class="ink-menu-label" aria-hidden="true">{section.label}</div>
+          {#each section.items as item (item.key)}
+            <button
+              type="button"
+              role="menuitemradio"
+              class="ink-select-item ink-menu-item"
+              data-ink-select-item=""
+              tabindex={-1}
+              aria-checked={item.checked}
+              disabled={section.disabled}
+              data-state={item.checked ? 'checked' : 'unchecked'}
+              onclick={() => style.set(item.patch)}
+            >
+              {item.label}
+              {#if item.checked}
+                <span class="ink-select-indicator"
+                  ><InkIcon icon={Check} size={16} /></span
+                >
+              {/if}
+            </button>
+          {/each}
+        </div>
+      {/each}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/**
+ * Line weight, solid or dashed, and arrowheads, for the selection or the active tool. Each
+ * section disables when nothing selected (or no active tool) supports its props. The
+ * trigger carries `data-mixed` when the selection disagrees on any of them; a section with
+ * no single value shows no checkmark.
+ */
+export interface InkLineStyleMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined;
+}
+declare const InkLineStyleMenu: import("svelte").Component<InkLineStyleMenuProps, {}, "">;
+type InkLineStyleMenu = ReturnType<typeof InkLineStyleMenu>;
+export default InkLineStyleMenu;
+//# sourceMappingURL=InkLineStyleMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkLineStyleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkLineStyleMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAmGH,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

@@ -9,8 +9,9 @@
     InkError,
     InkStatus,
     PdfAssets,
+    SignatureStore,
   } from '@inkbar/core'
-  import type { ToolId, ZoomValue } from '@inkbar/core/dom'
+  import type { Tool, ToolId, ZoomValue } from '@inkbar/core/dom'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
@@ -33,6 +34,24 @@
     onChange?: ((change: AnnotationChange) => void) | undefined
     tool?: ToolId | undefined
     onToolChange?: ((tool: ToolId) => void) | undefined
+    /**
+     * Host tools, added to the built-ins; one with a built-in's id replaces it. Read when a
+     * document opens.
+     */
+    tools?: Tool[] | undefined
+    /**
+     * The font families text boxes offer, replacing the PDF standard families
+     * (`FONT_FAMILIES`). Fonts beyond those are the PDF writer's to embed.
+     */
+    fonts?: string[] | undefined
+    /**
+     * Where saved signatures live. Default: memory, gone on reload.
+     * `createLocalSignatureStore` keeps them in the browser; a host can keep them anywhere.
+     * A new store takes effect at once, for the menus and the `signature` tool alike.
+     */
+    signatures?: SignatureStore | undefined
+    /** The handwriting fonts a typed signature offers; the host loads them. */
+    signatureFonts?: string[] | undefined
     page?: number | undefined
     onPageChange?: ((page: number) => void) | undefined
     zoom?: ZoomValue | undefined
@@ -55,11 +74,19 @@
 
 <script lang="ts">
   import {
+    createMemorySignatureStore,
+    createSignatureLibrary,
     createSnapshotHistory,
     InkError as InkErrorClass,
     openDocument,
   } from '@inkbar/core'
-  import { cssVariableDefaults } from '@inkbar/core/dom'
+  import {
+    createToolOptions,
+    cssVariableDefaults,
+    FONT_FAMILIES,
+    SIGNATURE_FONTS,
+    trackToolStyle,
+  } from '@inkbar/core/dom'
   import { DEV } from 'esm-env'
   import { untrack } from 'svelte'
   import { createAttachmentKey } from 'svelte/attachments'
@@ -79,6 +106,10 @@
     onChange,
     tool = $bindable(),
     onToolChange,
+    tools: hostTools,
+    fonts,
+    signatures: signatureStore,
+    signatureFonts,
     page = $bindable(),
     onPageChange,
     zoom = $bindable(),
@@ -95,6 +126,15 @@
 
   type TestHookElement = HTMLElement & { __inkDocument?: InkDocument | undefined }
 
+  const signatures = $derived(
+    createSignatureLibrary(signatureStore ?? createMemorySignatureStore())
+  )
+  $effect(() => {
+    void signatures.refresh()
+  })
+  /** Tool options last as long as the root; the tool style is per document. */
+  const toolOptions = createToolOptions()
+
   const IDLE: InkStatus = { state: 'idle' }
   const NO_ANNOTATIONS: readonly Annotation[] = []
   const NO_IDS: readonly string[] = []
@@ -130,7 +170,7 @@
     () => document?.annotations.selection,
     NO_IDS
   )
-  const currentTool = $derived<ToolId>(tool ?? 'view')
+  const currentTool = $derived<ToolId>(tool ?? 'select-text')
 
   // What the next open will do follows the prop; the open document's mode is fixed.
   const controlledProp = $derived(annotations !== undefined)
@@ -277,6 +317,24 @@
     },
   }
 
+  /** The document's tool style; it batches through `inkHistory`, whichever mode is on. */
+  const styleTracker = $derived.by(() => {
+    const doc = document
+    if (!doc) return null
+    return untrack(() =>
+      trackToolStyle({
+        store: doc.annotations,
+        history: { batch: (fn) => inkHistory.batch(fn) },
+        tools: hostTools,
+        tool: currentTool,
+      })
+    )
+  })
+  $effect(() => {
+    const id = currentTool
+    styleTracker?.setTool(id)
+  })
+
   const context: InkContext = {
     get assets() {
       return assets
@@ -303,6 +361,22 @@
       return currentTool
     },
     setTool,
+    get hostTools() {
+      return hostTools
+    },
+    get fonts() {
+      return fonts ?? FONT_FAMILIES
+    },
+    toolOptions,
+    get signatures() {
+      return signatures
+    },
+    get signatureFonts() {
+      return signatureFonts ?? SIGNATURE_FONTS
+    },
+    get toolStyle() {
+      return styleTracker?.toolStyle ?? null
+    },
     get zoomModel() {
       return zoom
     },

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 } from '@inkbar/core';
-import type { ToolId, ZoomValue } from '@inkbar/core/dom';
+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 { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange' | 'onerror'> {
@@ -19,6 +19,24 @@ export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     onChange?: ((change: AnnotationChange) => void) | undefined;
     tool?: ToolId | undefined;
     onToolChange?: ((tool: ToolId) => void) | undefined;
+    /**
+     * Host tools, added to the built-ins; one with a built-in's id replaces it. Read when a
+     * document opens.
+     */
+    tools?: Tool[] | undefined;
+    /**
+     * The font families text boxes offer, replacing the PDF standard families
+     * (`FONT_FAMILIES`). Fonts beyond those are the PDF writer's to embed.
+     */
+    fonts?: string[] | undefined;
+    /**
+     * Where saved signatures live. Default: memory, gone on reload.
+     * `createLocalSignatureStore` keeps them in the browser; a host can keep them anywhere.
+     * A new store takes effect at once, for the menus and the `signature` tool alike.
+     */
+    signatures?: SignatureStore | undefined;
+    /** The handwriting fonts a typed signature offers; the host loads them. */
+    signatureFonts?: string[] | undefined;
     page?: number | undefined;
     onPageChange?: ((page: number) => void) | undefined;
     zoom?: ZoomValue | undefined;

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":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,UAAU,GAAG,SAAS,CACpC;IACC,GAAG,EAAE,cAAc,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,wFAAwF;IACxF,QAAQ,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,SAAS,CAAA;IACtC,mBAAmB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAChE,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACnD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACtD,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAClD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACjD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC/C,gDAAgD;IAChD,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,SAAS,CAAC;QAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAA;IACzE;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;CACrB;AAaH,OAAO,EAAkC,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAqT/E,QAAA,MAAM,OAAO;;uBAhCc,WAAW,GAAG,IAAI;qBAGpB,SAAS;oDA6BmB,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"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

@@ -0,0 +1,157 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A split button for the shape tool. The main part activates the tool with the current
+   * kind and draws that kind's icon; the chevron opens a two-column grid of kinds. Choosing
+   * a kind switches to the tool with it.
+   */
+  export interface InkShapeMenuProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** Replaces the main button's icon. */
+    children?: Snippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  import {
+    focusInitialMenuItem,
+    handleMenuKeys,
+    menuItems,
+    SHAPE_COLUMNS,
+    SHAPE_ICONS,
+    SHAPE_KINDS,
+    shapeMenuModel,
+    type ShapeKind,
+    type ShapeOptions,
+  } from '@inkbar/core/dom'
+  import { ChevronDown } from '@inkbar/icons'
+  import { Popover, Toolbar } from 'bits-ui'
+
+  import { useTool } from '../hooks/useTool.svelte.js'
+  import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
+
+  import InkIcon from './InkIcon.svelte'
+
+  let { class: className, children, ...rest }: InkShapeMenuProps = $props()
+
+  const current = useTool()
+  const shape = useToolOptions<ShapeOptions>('shape')
+  let open = $state(false)
+
+  const model = $derived(shapeMenuModel(shape.options, SHAPE_KINDS))
+  const active = $derived(current.tool === 'shape')
+
+  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.
+  $effect(() => {
+    if (!open) focusFirst = false
+  })
+  function onTriggerKeydown(e: KeyboardEvent): void {
+    if (e.key !== 'ArrowDown' || e.defaultPrevented || open) return
+    e.preventDefault()
+    focusFirst = true
+    open = true
+  }
+
+  function choose(kind: ShapeKind): void {
+    shape.setOptions({ kind })
+    current.setTool('shape')
+    open = false
+  }
+</script>
+
+<div
+  role="group"
+  aria-label="Shape"
+  class={['ink-split-button ink-shape-menu', className]}
+  data-ink-shape-menu=""
+  {...rest}
+>
+  <Toolbar.Button
+    class="ink-tool-button ink-shape-button"
+    data-ink-tool-button=""
+    data-ink-shape-button=""
+    data-tool="shape"
+    data-kind={model.kind}
+    data-state={active ? 'on' : 'off'}
+    aria-pressed={active}
+    aria-label={model.label}
+    title={model.label}
+    onclick={() => current.setTool('shape')}
+  >
+    {#if children}{@render children()}{:else}<InkIcon
+        icon={SHAPE_ICONS[model.kind]}
+      />{/if}
+  </Toolbar.Button>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Toolbar.Button
+          {...props}
+          class="ink-menu-trigger ink-shape-menu-trigger"
+          data-ink-shape-menu-trigger=""
+          data-state={open ? 'open' : 'closed'}
+          aria-label="Choose shape"
+          title="Choose shape"
+          aria-haspopup="menu"
+          onkeydown={onTriggerKeydown}
+        >
+          <InkIcon icon={ChevronDown} />
+        </Toolbar.Button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content
+        bind:ref={menu}
+        role="menu"
+        aria-label="Shapes"
+        class="ink-select-content ink-menu-content"
+        data-ink-select-content=""
+        data-ink-menu="shape"
+        side="bottom"
+        align="start"
+        sideOffset={4}
+        collisionPadding={8}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault()
+          if (menu) {
+            if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
+            else focusInitialMenuItem(menu)
+          }
+        }}
+        onkeydown={(e) => menu && handleMenuKeys(e, menu)}
+      >
+        <div
+          role="group"
+          aria-label="Shapes"
+          class="ink-shape-grid"
+          data-ink-menu-columns={SHAPE_COLUMNS}
+        >
+          {#each model.items as item (item.kind)}
+            <button
+              type="button"
+              role="menuitemradio"
+              class="ink-select-item ink-menu-item ink-shape-item"
+              data-ink-select-item=""
+              tabindex={-1}
+              data-key={item.kind}
+              aria-checked={item.checked}
+              data-state={item.checked ? 'checked' : 'unchecked'}
+              onclick={() => choose(item.kind)}
+            >
+              <InkIcon icon={SHAPE_ICONS[item.kind]} size={16} />
+              {item.label}
+            </button>
+          {/each}
+        </div>
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A split button for the shape tool. The main part activates the tool with the current
+ * kind and draws that kind's icon; the chevron opens a two-column grid of kinds. Choosing
+ * a kind switches to the tool with it.
+ */
+export interface InkShapeMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Replaces the main button's icon. */
+    children?: Snippet | undefined;
+}
+declare const InkShapeMenu: import("svelte").Component<InkShapeMenuProps, {}, "">;
+type InkShapeMenu = ReturnType<typeof InkShapeMenu>;
+export default InkShapeMenu;
+//# sourceMappingURL=InkShapeMenu.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/InkSignatureDialog.svelte

@@ -0,0 +1,70 @@
+<script module lang="ts">
+  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.
+   */
+  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. */
+    onSave?: ((template: SignatureTemplate) => void) | undefined
+    /** Where focus goes on close; by default, back to what had it before. */
+    onCloseAutoFocus?: ((event: Event) => void) | undefined
+    class?: string | undefined
+  }
+</script>
+
+<script lang="ts">
+  import { SIGNATURE_LABELS } from '@inkbar/core/dom'
+  import { Dialog } from 'bits-ui'
+
+  import SignatureForm from './SignatureForm.svelte'
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    fonts,
+    onSave,
+    onCloseAutoFocus,
+    class: className,
+  }: InkSignatureDialogProps = $props()
+
+  let content = $state<HTMLElement | null>(null)
+
+  function setOpen(next: boolean): void {
+    open = next
+    onOpenChange?.(next)
+  }
+</script>
+
+<Dialog.Root bind:open={() => open, setOpen}>
+  <Dialog.Portal>
+    <Dialog.Overlay class="ink-dialog-overlay" data-ink-dialog-overlay="" />
+    <Dialog.Content
+      bind:ref={content}
+      class={['ink-dialog ink-signature-dialog', className]}
+      data-ink-signature-dialog=""
+      aria-modal="true"
+      onOpenAutoFocus={(e) => {
+        e.preventDefault()
+        content
+          ?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')
+          ?.focus({ preventScroll: true })
+      }}
+      onCloseAutoFocus={(e) => onCloseAutoFocus?.(e)}
+    >
+      <Dialog.Title class="ink-dialog-title">{SIGNATURE_LABELS.dialog}</Dialog.Title>
+      <SignatureForm
+        {fonts}
+        onSaved={(t) => onSave?.(t)}
+        onClose={() => setOpen(false)}
+      />
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

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

@@ -0,0 +1,22 @@
+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.
+ */
+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. */
+    onSave?: ((template: SignatureTemplate) => void) | undefined;
+    /** Where focus goes on close; by default, back to what had it before. */
+    onCloseAutoFocus?: ((event: Event) => void) | undefined;
+    class?: string | undefined;
+}
+declare const InkSignatureDialog: import("svelte").Component<InkSignatureDialogProps, {}, "open">;
+type InkSignatureDialog = ReturnType<typeof InkSignatureDialog>;
+export default InkSignatureDialog;
+//# sourceMappingURL=InkSignatureDialog.svelte.d.ts.map

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

@@ -0,0 +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"}