@inkbar/svelte 0.5.0 → 0.7.0

package/README.md

@@ -157,11 +157,35 @@ The highlight tool leaves `contents` free for the comment. `doc.text(page)` retu
 
 `InkSignatureMenu` lists saved signatures, picks one for the `signature` tool, removes them, and opens `InkSignatureDialog` to draw, type or upload a new one. These are marks on the page, not cryptographic signatures. Pass `signatures` to `InkRoot` to keep them somewhere: `createLocalSignatureStore(key)` from `@inkbar/core` uses `localStorage`, and without it they last until reload. `signatureFonts` lists the handwriting fonts the Type tab offers; load them with `@font-face`. A placed signature keeps its aspect ratio when resized.
 
+## Plugins
+
+A plugin from `definePlugin` (in `@inkbar/core/dom`) adds commands, tools, decorations, page layers and its own record stores. Pass plugins to `InkRoot` once: the prop is read when the root is created. Nothing a plugin registers shows until you place it:
+
+```svelte
+<InkRoot {src} {assets} plugins={[suggestions]}>
+  <InkToolbar>
+    <InkCommand id="sandbox.suggest" />
+    <InkToolButton tool="sandbox.stamp" />
+  </InkToolbar>
+  <InkViewport />
+</InkRoot>
+```
+
+`InkCommand` is a button named by the command's label, disabled while the command is, and its status in a live region beside it. While the command runs, the button keeps focus and has `aria-busy` and `aria-disabled`, and pressing it does nothing. It shows the command's icon, or its label as text when the command has no icon. To build your own, `useCommand(id)` returns `run`, `enabled`, `busy`, `status`, `label` and `icon`. Plugins are set up once `InkRoot` has mounted in the browser, never on the server. Until then the command is disabled and has no label, and `InkCommand` keeps its button out of the accessibility tree (`aria-hidden`). Read `label` and `icon` off the handle, as you read `enabled`, so they fill in then. An id no plugin registered stays that way: `InkCommand` and `useCommand` log an `InkError('UnknownCommand')` to the console once, naming the id and the registered ones, and nothing throws. `InkToolButton` takes a plugin tool's own label and icon.
+
+Plugin stores undo with annotations. In controlled mode with `history`, each undo step also snapshots the plugin stores, so accepting something and undoing it restores both.
+
+## Search
+
+`InkFindBar` is the find bar and `InkSearchButton` opens it. Place the bar anywhere inside `InkRoot`, once `InkViewport` is there; Ctrl/Cmd+F opens it while it is mounted. `useSearch()` returns the search `state` and its actions (`open`, `setQuery`, `setMatchCase`, `next`, `previous`, `close`) for your own control. See the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#search) for the API.
+
+The bar handles Escape itself and stops it there, so an `onkeydown` you pass to `InkFindBar` never sees Escape.
+
 ## Custom rendering
 
-Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkThreadPopover` takes `children` as a snippet that receives the popover's props. `InkToolButton` takes `children` as a snippet of `{ active, label }`. The props each receives are typed as `AnnotationSlotProps` and `ThreadPopoverSlotProps`, the same types the Vue and React packages export.
+Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkThreadPopover` takes `children` as a snippet that receives the popover's props. `InkToolButton` takes `children` as a snippet of `{ active, label }`, and `InkCommand` one of `{ label, busy }`. The props each receives are typed as `AnnotationSlotProps` and `ThreadPopoverSlotProps`, the same types the Vue and React packages export.
 
-`InkRoot`, `InkToolbar`, `InkToolButton`, `InkUndo`, `InkRedo`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take a `child` snippet to render your own element. Spread the `props` it gives you on that element. The snippet type is exported as `ChildSnippet`.
+`InkRoot`, `InkToolbar`, `InkToolButton`, `InkCommand`, `InkUndo`, `InkRedo`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take a `child` snippet to render your own element. Spread the `props` it gives you on that element. The snippet type is exported as `ChildSnippet`.
 
 ```svelte
 <InkToolbar>
@@ -195,7 +219,7 @@ Components carry state on data attributes, for example `[data-annotation][data-s
 
 ## Hooks
 
-`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory` and `useEmbedded` read the state of the nearest `InkRoot`. Call them during component initialisation, as you would `getContext`. Each returns an object whose reactive members are getters: read `useZoom().zoom` in your template or an effect and it tracks; destructure it (`const { zoom } = useZoom()`) and you copy the value once. Keep the object and read through it. Tool options, such as the shape kind, last as long as `InkRoot`. The tool style that `useToolStyle` reads and sets (colours, line style, text style) belongs to the document: opening another one starts again from the theme's defaults.
+`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory`, `useEmbedded` and `useCommand` read the state of the nearest `InkRoot`. Call them during component initialisation, as you would `getContext`. Each returns an object whose reactive members are getters: read `useZoom().zoom` in your template or an effect and it tracks; destructure it (`const { zoom } = useZoom()`) and you copy the value once. Keep the object and read through it. Tool options, such as the shape kind, last as long as `InkRoot`. The tool style that `useToolStyle` reads and sets (colours, line style, text style) belongs to the document: opening another one starts again from the theme's defaults.
 
 ## Licence
 

package/dist/components/InkColorMenu.svelte

@@ -34,13 +34,7 @@
 </script>
 
 <script lang="ts">
-  import {
-    COLOR_COLUMNS,
-    colorMenuModel,
-    focusInitialMenuItem,
-    handleMenuKeys,
-    menuItems,
-  } from '@inkbar/core/dom'
+  import { COLOR_COLUMNS, colorMenuModel, handleMenuKeys } from '@inkbar/core/dom'
   import { Check } from '@inkbar/icons'
   import { Popover, Toolbar } from 'bits-ui'
 
@@ -48,6 +42,7 @@
 
   import { asBitsProps, composeHandlers } from './child-snippet.js'
   import InkIcon from './InkIcon.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   let {
     property,
@@ -82,15 +77,14 @@
   })
 
   /** 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 || !model.enabled) return
     e.preventDefault()
-    focusFirst = true
+    openFocus.first()
     open = true
   }
 
@@ -164,13 +158,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) => {
         // Nested in another panel, Escape closes this menu alone; Bits would otherwise pick
         // the layer to close by registration order.

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

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

package/dist/components/InkCommand.svelte

@@ -0,0 +1,63 @@
+<script module lang="ts">
+  import type { ChildSnippet } from './child-snippet.js'
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  export interface InkCommandProps extends Omit<HTMLButtonAttributes, 'id' | 'children'> {
+    /** The command's namespaced id, such as `sandbox.suggest`. Read once. */
+    id: string
+    children?: Snippet<[{ label: string; busy: boolean }]> | undefined
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * A plugin command as a toolbar button with its status beside it: the markup of core's
+   * `createCommandButton`, so the theme styles both alike. The button is named by the command's
+   * label and disabled while the command is, except while it runs: then it keeps focus, with
+   * `aria-busy` and `aria-disabled`, and a press does nothing. The status is a live region. A command without an icon shows its label as the button's text. Until the plugins
+   * are set up (once InkRoot has mounted; never on the server) the button is disabled and
+   * `aria-hidden`. An id no plugin registered stays that way and logs
+   * `InkError('UnknownCommand')` to the console once.
+   */
+  import { Toolbar } from 'bits-ui'
+  import { untrack } from 'svelte'
+
+  import { useCommand } from '../hooks/useCommand.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  let { id, children, child, disabled, onclick, ...rest }: InkCommandProps = $props()
+
+  // The id is read once, as `useCommand` does: a different command is a different component.
+  const commandId = untrack(() => id)
+  const command = useCommand(commandId)
+</script>
+
+<div class="ink-command">
+  <Toolbar.Button
+    type="button"
+    data-command={commandId}
+    aria-label={command.label || undefined}
+    title={command.label || undefined}
+    aria-hidden={command.label ? undefined : 'true'}
+    aria-busy={command.busy}
+    aria-disabled={command.busy ? 'true' : undefined}
+    disabled={(!command.enabled && !command.busy) || !!disabled}
+    {...child ? { child } : {}}
+    {...asBitsProps(rest)}
+    onclick={(e) => {
+      onclick?.(e)
+      if (!e.defaultPrevented) void command.run()
+    }}
+  >
+    {#if children}{@render children({
+        label: command.label,
+        busy: command.busy,
+      })}{:else if command.icon}<InkIcon icon={command.icon} />{:else}{command.label}{/if}
+  </Toolbar.Button>
+  <span class="ink-command-status" role="status">{command.status}</span>
+</div>

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

@@ -0,0 +1,17 @@
+import type { ChildSnippet } from './child-snippet.js';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface InkCommandProps extends Omit<HTMLButtonAttributes, 'id' | 'children'> {
+    /** The command's namespaced id, such as `sandbox.suggest`. Read once. */
+    id: string;
+    children?: Snippet<[{
+        label: string;
+        busy: boolean;
+    }]> | undefined;
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined;
+}
+declare const InkCommand: import("svelte").Component<InkCommandProps, {}, "">;
+type InkCommand = ReturnType<typeof InkCommand>;
+export default InkCommand;
+//# sourceMappingURL=InkCommand.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkCommand.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkCommand.svelte.ts"],"names":[],"mappings":"AAGE,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,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,UAAU,CAAC;IACpF,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IAClE,oDAAoD;IACpD,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC;AAsDH,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/InkFindBar.svelte

@@ -0,0 +1,213 @@
+<script module lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type InkFindBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+</script>
+
+<script lang="ts">
+  /*
+   * The find bar: a field, the match count, previous and next, a match-case toggle and close,
+   * a view of the root's search state. Place it anywhere inside `InkRoot`: it portals itself
+   * into `[data-ink-viewport-root]`, the positioned ancestor the theme floats it from over the
+   * top-right of the pages (as `InkThreadPopover` anchors to the root's overlay rather than
+   * where it is written). It renders nothing until `InkViewport` has mounted, and is hidden
+   * while the search is closed. While it is mounted it registers with the search controller,
+   * which is what lets Ctrl/Cmd+F open it.
+   *
+   * Enter in the field steps to the next match, Shift+Enter to the previous, Escape closes.
+   * Closing returns focus to where it was before the bar opened, else to the document.
+   */
+  import { findAnnouncer, findCountText } from '@inkbar/core/dom'
+  import { CaseSensitive, ChevronDown, ChevronUp, X } from '@inkbar/icons'
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { useSearch } from '../hooks/useSearch.svelte.js'
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import InkIcon from './InkIcon.svelte'
+
+  import type { SearchState } from '@inkbar/core/dom'
+
+  let { class: className, ...rest }: InkFindBarProps = $props()
+
+  const ctx = useInkContext('InkFindBar')
+  const search = useSearch()
+  const scroll = useReadable(() => ctx.viewportEl, null)
+  /** The viewport root: the scroll element's parent, once InkViewport has mounted. */
+  const target = $derived(scroll.current?.parentElement ?? null)
+
+  let bar = $state<HTMLDivElement | null>(null)
+  let field = $state<HTMLInputElement | null>(null)
+  let live = $state<HTMLDivElement | null>(null)
+  /** Where focus was when the bar opened, and whether it was open on the last pass. */
+  let before: HTMLElement | null = null
+  let wasOpen = false
+
+  const open = $derived(search.state.open)
+  const query = $derived(search.state.query)
+
+  // After the update, so the bar is shown (and can take focus) when it opens.
+  $effect(() => {
+    const el = bar
+    const input = field
+    const isOpen = open
+    const text = query
+    if (!el || !input) return
+    untrack(() => {
+      if (isOpen !== wasOpen) {
+        wasOpen = isOpen
+        const doc = el.ownerDocument
+        if (isOpen) {
+          const active = doc.activeElement
+          before =
+            active instanceof HTMLElement && active !== doc.body && !el.contains(active)
+              ? active
+              : null
+          input.focus()
+          input.select()
+        } else {
+          // Focus inside the bar is about to be lost with it; focus elsewhere is left alone.
+          const hadFocus =
+            el.contains(doc.activeElement) || doc.activeElement === doc.body
+          if (hadFocus) {
+            const to =
+              before?.isConnected && !el.contains(before) ? before : scroll.current
+            to?.focus({ preventScroll: true })
+          }
+          before = null
+        }
+      }
+      if (input.value !== text) {
+        input.value = text
+        // A query set from code arrives after the bar opened: keep the new text selected.
+        if (el.ownerDocument.activeElement === input) input.select()
+      }
+    })
+  })
+
+  // Registered while mounted.
+  $effect(() => {
+    const controller = ctx.search
+    if (!controller || !target) return
+    return controller.attachBar()
+  })
+
+  // The live region follows the controller's state change by change, as the vanilla bar does,
+  // and is written directly. An update shows only the last of the changes batched into it, so
+  // two steps in one task that end where they began would otherwise say nothing.
+  $effect(() => {
+    const controller = ctx.search
+    const el = live
+    if (!controller || !el) return
+    return untrack(() => {
+      const announce = findAnnouncer()
+      const say = (s: SearchState): void => {
+        const text = announce(s)
+        if (el.textContent !== text) el.textContent = text
+      }
+      say(controller.state.get())
+      return controller.state.subscribe(say)
+    })
+  })
+
+  // A native listener, so Escape stops at the bar as it does in the vanilla and Vue bars;
+  // Svelte's delegated events would stop it only after the root's own listeners saw it.
+  $effect(() => {
+    const controller = ctx.search
+    const el = bar
+    if (!controller || !el) return
+    const onKeydown = (e: KeyboardEvent): void => {
+      if (e.key !== 'Escape' || e.defaultPrevented || e.isComposing) return
+      e.preventDefault()
+      e.stopPropagation()
+      controller.close()
+    }
+    el.addEventListener('keydown', onKeydown)
+    return () => el.removeEventListener('keydown', onKeydown)
+  })
+
+  /**
+   * Moves the bar itself into the viewport root, leaving nothing where it is written. Svelte
+   * removes it when its own `{#if}` branch goes, but not when an ancestor's block goes and
+   * takes only the nodes still in place, so the cleanup removes it too. A keyed `{#each}` that
+   * reorders would move the bar back to where it is written, so keep `InkFindBar` out of one.
+   */
+  const into = (to: Element) => (el: HTMLElement) => {
+    to.appendChild(el)
+    return () => el.remove()
+  }
+</script>
+
+{#if target}
+  <div
+    {...rest}
+    bind:this={bar}
+    class={['ink-find-bar', className]}
+    data-ink-find-bar=""
+    role="search"
+    hidden={!open}
+    {@attach into(target)}
+  >
+    <input
+      bind:this={field}
+      type="text"
+      aria-label="Find in document"
+      autocomplete="off"
+      spellcheck={false}
+      oninput={(e) => search.setQuery(e.currentTarget.value)}
+      onkeydown={(e) => {
+        if (e.key !== 'Enter' || e.isComposing) return
+        e.preventDefault()
+        if (e.shiftKey) search.previous()
+        else search.next()
+      }}
+    />
+    <span class="ink-find-count" data-ink-find-count=""
+      >{findCountText(search.state)}</span
+    >
+    <button
+      type="button"
+      data-ink-find-previous=""
+      aria-label="Previous match"
+      title="Previous match"
+      onclick={() => search.previous()}
+    >
+      <InkIcon icon={ChevronUp} />
+    </button>
+    <button
+      type="button"
+      data-ink-find-next=""
+      aria-label="Next match"
+      title="Next match"
+      onclick={() => search.next()}
+    >
+      <InkIcon icon={ChevronDown} />
+    </button>
+    <button
+      type="button"
+      data-ink-find-match-case=""
+      aria-label="Match case"
+      title="Match case"
+      aria-pressed={search.state.matchCase}
+      onclick={() => search.setMatchCase(!search.state.matchCase)}
+    >
+      <InkIcon icon={CaseSensitive} />
+    </button>
+    <button
+      type="button"
+      data-ink-find-close=""
+      aria-label="Close find"
+      title="Close find"
+      onclick={() => search.close()}
+    >
+      <InkIcon icon={X} />
+    </button>
+    <div
+      bind:this={live}
+      class="ink-visually-hidden"
+      data-ink-find-status=""
+      aria-live="polite"
+    ></div>
+  </div>
+{/if}

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type InkFindBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const InkFindBar: import("svelte").Component<InkFindBarProps, {}, "">;
+type InkFindBar = ReturnType<typeof InkFindBar>;
+export default InkFindBar;
+//# sourceMappingURL=InkFindBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkFindBar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkFindBar.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAC/E;AAmLD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/InkHighlightMenu.svelte

@@ -19,12 +19,10 @@
 
 <script lang="ts">
   import {
-    focusInitialMenuItem,
     handleMenuKeys,
     highlightMenuModel,
     MARKUP_ICONS,
     MARKUP_KINDS,
-    menuItems,
     type HighlightOptions,
     type MarkupKind,
   } from '@inkbar/core/dom'
@@ -37,6 +35,7 @@
 
   import InkColorMenu from './InkColorMenu.svelte'
   import InkIcon from './InkIcon.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   let { class: className, children, ...rest }: InkHighlightMenuProps = $props()
 
@@ -55,15 +54,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
   }
 
@@ -128,13 +126,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}
         onkeydowncapture={(e: KeyboardEvent) => menu && handleMenuKeys(e, menu)}
       >
         <div role="group" aria-label="Kinds" class="ink-highlight-kinds">

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

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

package/dist/components/InkLineStyleMenu.svelte

@@ -14,12 +14,7 @@
 </script>
 
 <script lang="ts">
-  import {
-    focusInitialMenuItem,
-    handleMenuKeys,
-    lineStyleMenuModel,
-    menuItems,
-  } from '@inkbar/core/dom'
+  import { handleMenuKeys, lineStyleMenuModel } from '@inkbar/core/dom'
   import { Check, Minus } from '@inkbar/icons'
   import { Popover, Toolbar } from 'bits-ui'
 
@@ -27,6 +22,7 @@
 
   import { asBitsProps, composeHandlers } from './child-snippet.js'
   import InkIcon from './InkIcon.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   let {
     class: className,
@@ -50,15 +46,14 @@
   })
 
   /** 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 || !model.enabled) return
     e.preventDefault()
-    focusFirst = true
+    openFocus.first()
     open = true
   }
 </script>
@@ -96,13 +91,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)}
     >
       {#each model.sections as section (section.label)}

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

@@ -1 +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"}
+{"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;AAyFH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}