@inkbar/svelte 0.8.0 → 0.10.0

package/dist/components/InkShapeMenu.svelte

@@ -29,8 +29,9 @@
   import { ChevronDown } from '@inkbar/icons'
   import { Popover, Toolbar } from 'bits-ui'
 
+  import { useRegisteredTool } from '../hooks/useRegisteredTool.svelte.js'
   import { useTool } from '../hooks/useTool.svelte.js'
-  import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
+  import { useToolOptionsWhile } from '../hooks/useToolOptions.svelte.js'
 
   import InkIcon from './InkIcon.svelte'
   import { createMenuOpenFocus } from './menu-open-focus.js'
@@ -38,7 +39,9 @@
   let { class: className, children, ...rest }: InkShapeMenuProps = $props()
 
   const current = useTool()
-  const shape = useToolOptions<ShapeOptions>('shape')
+  // Nothing renders while no `shape` tool is registered.
+  const registered = useRegisteredTool('shape')
+  const shape = useToolOptionsWhile<ShapeOptions>('shape', () => registered.current)
   let open = $state(false)
   /** The split button: the panel lines up under it rather than the chevron. */
   let group = $state<HTMLElement | null>(null)
@@ -67,88 +70,90 @@
   }
 </script>
 
-<div
-  bind:this={group}
-  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 registered.current}
+  <div
+    bind:this={group}
+    role="group"
+    aria-label="Shape"
+    class={['ink-split-button ink-shape-menu', className]}
+    data-ink-shape-menu=""
+    {...rest}
   >
-    {#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"
-        customAnchor={group}
-        side="bottom"
-        align="start"
-        sideOffset={4}
-        collisionPadding={8}
-        onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
-        onfocusin={openFocus.onfocusin}
-        onkeydown={(e) => menu && handleMenuKeys(e, menu)}
-      >
-        <div
-          role="group"
+    <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-shape-grid"
-          data-ink-menu-columns={SHAPE_COLUMNS}
+          class="ink-select-content ink-menu-content"
+          data-ink-select-content=""
+          data-ink-menu="shape"
+          customAnchor={group}
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          collisionPadding={8}
+          onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
+          onfocusin={openFocus.onfocusin}
+          onkeydown={(e) => menu && handleMenuKeys(e, menu)}
         >
-          {#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>
+          <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>
+{/if}

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

package/dist/components/InkSidebar.svelte

@@ -0,0 +1,179 @@
+<script module lang="ts">
+  import type { SidebarLayout, SidebarOpen, SidebarSide } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkSidebarProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** Which edge the rail and border sit on. Default `'left'`. */
+    side?: SidebarSide | undefined
+    /** `'rail'` (default), `'tabs'` or `'stack'`. */
+    layout?: SidebarLayout | undefined
+    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */
+    visible?: boolean | undefined
+    /**
+     * Bindable: the open panel's id (or null) for rail and tabs, the expanded ids for stack.
+     * Left out, the first panel starts open.
+     */
+    open?: SidebarOpen | undefined
+    /** The `InkPanel`s. */
+    children?: Snippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * A sidebar of `InkPanel`s: `createSidebar`'s markup on core's sidebar controller, which holds
+   * the open state, the ARIA, the keys and the clicks. Rail and tabs render their triggers here;
+   * in a stack each panel renders its own header. Panels register as they initialise and take
+   * their place in DOM order once mounted, so a panel added later with `{#if}` slots in where
+   * it stands. A closed panel stays mounted and hidden, and the panels' content stays in place
+   * across layouts, so its state survives switching.
+   *
+   * `bind:open` is the open panel's id (or null) for rail and tabs, and the expanded ids for
+   * stack. Left out, the first panel starts open. It needs no document, so it works outside
+   * `InkRoot`. The server renders the root, the panels (the open one shown) and the stack
+   * headers; rail and tab buttons follow once mounted, as the panels register after the root
+   * has rendered.
+   */
+  import { createSidebarController } from '@inkbar/core/dom'
+  import { untrack } from 'svelte'
+
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import { setSidebarContext, type SidebarPanelEntry } from './sidebar-context.js'
+  import SidebarTrigger from './SidebarTrigger.svelte'
+
+  let {
+    side = 'left',
+    layout = 'rail',
+    visible = true,
+    open = $bindable(),
+    class: className,
+    children,
+    ...rest
+  }: InkSidebarProps = $props()
+
+  // The same ids on the server and the client.
+  const idPrefix = $props.id()
+
+  let entries = $state.raw<SidebarPanelEntry[]>([])
+  const infos = () => entries.map((e) => e.info())
+
+  // Pending until mounted: the panels register one by one as they initialise, and an open id
+  // not registered yet is not a removed panel.
+  const controller = untrack(() =>
+    createSidebarController({
+      layout,
+      side,
+      visible,
+      panels: [],
+      ...(open !== undefined && { open }),
+      pending: true,
+      onOpenChange: (value) => {
+        open = value
+      },
+      idPrefix,
+    })
+  )
+  const current = useReadable(() => controller.state, controller.state.get())
+  // Destroyed before the panels go: this pre-effect comes before the template's, so its
+  // teardown runs first. Unregistering into a live controller would take each panel for a
+  // removed one and write the fallback to the bound `open`.
+  $effect.pre(() => () => controller.destroy())
+
+  // Before the DOM updates, so the panels render the attributes these give.
+  $effect.pre(() => {
+    const next = { layout, side, visible, open }
+    untrack(() =>
+      controller.update({
+        layout: next.layout,
+        side: next.side,
+        visible: next.visible,
+        ...(next.open !== undefined && { open: next.open }),
+      })
+    )
+  })
+  // A panel's label, icon or badge changing.
+  $effect.pre(() => {
+    const panels = infos()
+    untrack(() => controller.update({ panels }))
+  })
+
+  // Panels register while they initialise, inside the parent's render: untracked, so the
+  // writes are not taken for state changed by a template expression. On the server too.
+  function register(entry: SidebarPanelEntry): () => void {
+    untrack(() => {
+      entries = [...entries, entry]
+      controller.update({ panels: infos() })
+    })
+    return () =>
+      untrack(() => {
+        entries = entries.filter((e) => e !== entry)
+        controller.update({ panels: infos() })
+      })
+  }
+
+  function arrange(): void {
+    untrack(() => {
+      const list = entries
+      const sorted = [...list].sort((a, b) => {
+        const x = a.element()
+        const y = b.element()
+        if (!x || !y || x === y) return 0
+        return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+      })
+      if (sorted.some((e, i) => e !== list[i])) {
+        entries = sorted
+        controller.update({ panels: infos() })
+      }
+    })
+  }
+
+  setSidebarContext({ controller, state: current, register, arrange })
+
+  const view = $derived.by(() => {
+    const s = current.current
+    return {
+      layout: s.layout,
+      root: controller.rootAttrs(),
+      tablist: controller.tablistAttrs(),
+      triggers: s.panels.map((panel) => ({
+        panel,
+        attrs: controller.triggerAttrs(panel.id),
+      })),
+    }
+  })
+
+  let root = $state<HTMLDivElement | null>(null)
+  // The controller handles the triggers' clicks and keys, stack headers included. The panels
+  // have registered by now.
+  $effect(() => {
+    const el = root
+    if (!el) return
+    const unbind = untrack(() => controller.bindTriggers(el))
+    untrack(() => controller.update({ pending: false }))
+    return unbind
+  })
+</script>
+
+<div {...rest} bind:this={root} class={['ink-sidebar', className]} {...view.root}>
+  {#if view.layout !== 'stack'}
+    <div
+      class={view.layout === 'rail' ? 'ink-sidebar-rail' : 'ink-sidebar-tabs'}
+      {...view.tablist}
+    >
+      {#each view.triggers as t (t.panel.id)}
+        <button {...t.attrs}>
+          <SidebarTrigger panel={t.panel} rail={view.layout === 'rail'} />
+        </button>
+      {/each}
+    </div>
+  {/if}
+  <!-- One element in every layout, so the panels are never remounted. -->
+  <div class={{ 'ink-sidebar-panels': view.layout !== 'stack' }}>
+    {@render children?.()}
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+import type { SidebarLayout, SidebarOpen, SidebarSide } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkSidebarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which edge the rail and border sit on. Default `'left'`. */
+    side?: SidebarSide | undefined;
+    /** `'rail'` (default), `'tabs'` or `'stack'`. */
+    layout?: SidebarLayout | undefined;
+    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */
+    visible?: boolean | undefined;
+    /**
+     * Bindable: the open panel's id (or null) for rail and tabs, the expanded ids for stack.
+     * Left out, the first panel starts open.
+     */
+    open?: SidebarOpen | undefined;
+    /** The `InkPanel`s. */
+    children?: Snippet | undefined;
+}
+declare const InkSidebar: import("svelte").Component<InkSidebarProps, {}, "open">;
+type InkSidebar = ReturnType<typeof InkSidebar>;
+export default InkSidebar;
+//# sourceMappingURL=InkSidebar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSidebar.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,iDAAiD;IACjD,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IAClC,wHAAwH;IACxH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAwKH,QAAA,MAAM,UAAU,yDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/InkSignatureDialog.svelte

@@ -5,7 +5,7 @@
    * "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, unless
-   * `select` is false, selects it for the `signature` tool. Escape, Cancel or a press outside
+   * `select` is false or no `signature` tool is registered, selects it for that tool. Escape, Cancel or a press outside
    * closes it.
    */
   export interface InkSignatureDialogProps {
@@ -14,8 +14,9 @@
     /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined
     /**
-     * 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`.
+     * Whether saving selects the new signature for the `signature` tool, when one is
+     * registered. 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`). */
@@ -30,6 +31,7 @@
   import { SIGNATURE_LABELS } from '@inkbar/core/dom'
   import { Dialog } from 'bits-ui'
 
+  import { lockBody } from './body-lock.js'
   import SignatureForm from './SignatureForm.svelte'
 
   let {
@@ -58,6 +60,8 @@
       class={['ink-dialog ink-signature-dialog', className]}
       data-ink-signature-dialog=""
       aria-modal="true"
+      preventScroll={false}
+      {@attach lockBody}
       onOpenAutoFocus={(e) => {
         e.preventDefault()
         content

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

@@ -3,7 +3,7 @@ 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, unless
- * `select` is false, selects it for the `signature` tool. Escape, Cancel or a press outside
+ * `select` is false or no `signature` tool is registered, selects it for that tool. Escape, Cancel or a press outside
  * closes it.
  */
 export interface InkSignatureDialogProps {
@@ -12,8 +12,9 @@ export interface InkSignatureDialogProps {
     /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined;
     /**
-     * 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`.
+     * Whether saving selects the new signature for the `signature` tool, when one is
+     * registered. 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`). */

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;;;;;;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"}
+{"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;;;;OAIG;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;AAqDH,QAAA,MAAM,kBAAkB,iEAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/InkSignatureMenu.svelte

@@ -26,8 +26,9 @@
   import { untrack } from 'svelte'
 
   import { useInkContext } from '../context.js'
+  import { useRegisteredTool } from '../hooks/useRegisteredTool.svelte.js'
   import { useTool } from '../hooks/useTool.svelte.js'
-  import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
+  import { useToolOptionsWhile } from '../hooks/useToolOptions.svelte.js'
   import { useReadable } from '../use-readable.svelte.js'
 
   import InkIcon from './InkIcon.svelte'
@@ -43,7 +44,12 @@
 
   const ctx = useInkContext('InkSignatureMenu')
   const current = useTool()
-  const signature = useToolOptions<SignatureOptions>('signature')
+  // Nothing renders while no `signature` tool is registered.
+  const registered = useRegisteredTool('signature')
+  const signature = useToolOptionsWhile<SignatureOptions>(
+    'signature',
+    () => registered.current
+  )
   const templates = useReadable(() => ctx.signatures.templates, NO_TEMPLATES)
   // An old removal error is not news when the menu opens again.
   $effect(() => {
@@ -91,81 +97,83 @@
   }
 </script>
 
-<div
-  bind:this={group}
-  role="group"
-  aria-label={SIGNATURE_LABELS.sign}
-  class={['ink-split-button ink-signature-menu', className]}
-  data-ink-signature-menu=""
-  {...rest}
->
-  <Toolbar.Button
-    bind:ref={main}
-    class="ink-tool-button ink-signature-button"
-    data-ink-tool-button=""
-    data-ink-signature-button=""
-    data-tool="signature"
-    data-state={active ? 'on' : 'off'}
-    aria-pressed={active}
+{#if registered.current}
+  <div
+    bind:this={group}
+    role="group"
     aria-label={SIGNATURE_LABELS.sign}
-    title={SIGNATURE_LABELS.sign}
-    onclick={onMain}
+    class={['ink-split-button ink-signature-menu', className]}
+    data-ink-signature-menu=""
+    {...rest}
   >
-    {#if children}{@render children()}{:else}<InkIcon icon={Signature} />{/if}
-  </Toolbar.Button>
-  <Popover.Root bind:open>
-    <Popover.Trigger>
-      {#snippet child({ props })}
-        <Toolbar.Button
-          {...props}
-          class="ink-menu-trigger ink-signature-menu-trigger"
-          data-ink-signature-menu-trigger=""
-          data-state={open ? 'open' : 'closed'}
-          aria-label={SIGNATURE_LABELS.trigger}
-          title={SIGNATURE_LABELS.trigger}
-          aria-haspopup="menu"
-          onkeydown={onTriggerKeydown}
+    <Toolbar.Button
+      bind:ref={main}
+      class="ink-tool-button ink-signature-button"
+      data-ink-tool-button=""
+      data-ink-signature-button=""
+      data-tool="signature"
+      data-state={active ? 'on' : 'off'}
+      aria-pressed={active}
+      aria-label={SIGNATURE_LABELS.sign}
+      title={SIGNATURE_LABELS.sign}
+      onclick={onMain}
+    >
+      {#if children}{@render children()}{:else}<InkIcon icon={Signature} />{/if}
+    </Toolbar.Button>
+    <Popover.Root bind:open>
+      <Popover.Trigger>
+        {#snippet child({ props })}
+          <Toolbar.Button
+            {...props}
+            class="ink-menu-trigger ink-signature-menu-trigger"
+            data-ink-signature-menu-trigger=""
+            data-state={open ? 'open' : 'closed'}
+            aria-label={SIGNATURE_LABELS.trigger}
+            title={SIGNATURE_LABELS.trigger}
+            aria-haspopup="menu"
+            onkeydown={onTriggerKeydown}
+          >
+            <InkIcon icon={ChevronDown} />
+          </Toolbar.Button>
+        {/snippet}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <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"
+          customAnchor={group}
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          collisionPadding={8}
+          onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
+          onfocusin={openFocus.onfocusin}
+          onCloseAutoFocus={(e) => {
+            if (toDialog) e.preventDefault()
+            toDialog = false
+          }}
+          onkeydown={(e) => menu && handleMenuKeys(e, menu)}
         >
-          <InkIcon icon={ChevronDown} />
-        </Toolbar.Button>
-      {/snippet}
-    </Popover.Trigger>
-    <Popover.Portal>
-      <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"
-        customAnchor={group}
-        side="bottom"
-        align="start"
-        sideOffset={4}
-        collisionPadding={8}
-        onOpenAutoFocus={(e) => openFocus.onOpenAutoFocus(e, menu)}
-        onfocusin={openFocus.onfocusin}
-        onCloseAutoFocus={(e) => {
-          if (toDialog) e.preventDefault()
-          toDialog = false
-        }}
-        onkeydown={(e) => menu && handleMenuKeys(e, menu)}
-      >
-        <SignatureMenuPanel
-          items={model.items}
-          menu={() => menu}
-          onChoose={(t) => choose(t.id)}
-          onCreate={create}
-        />
-      </Popover.Content>
-    </Popover.Portal>
-  </Popover.Root>
-  <InkSignatureDialog
-    bind:open={creating}
-    {fonts}
-    onCloseAutoFocus={(e) => {
-      e.preventDefault()
-      main?.focus({ preventScroll: true })
-    }}
-  />
-</div>
+          <SignatureMenuPanel
+            items={model.items}
+            menu={() => menu}
+            onChoose={(t) => choose(t.id)}
+            onCreate={create}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+    <InkSignatureDialog
+      bind:open={creating}
+      {fonts}
+      onCloseAutoFocus={(e) => {
+        e.preventDefault()
+        main?.focus({ preventScroll: true })
+      }}
+    />
+  </div>
+{/if}

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;AA2HH,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;AAoIH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}