@inkbar/svelte 0.4.0 → 0.6.0

package/README.md

@@ -20,7 +20,7 @@
 
 ---
 
-Drop a PDF viewer into your Svelte app and let people highlight text, leave notes with replies and review redactions. `@inkbar/svelte` gives you components to build your own toolbars, popovers for comment threads and suggested redactions, and hooks for anything else. `@inkbar/theme` styles them all.
+Drop a PDF viewer into your Svelte app and let people highlight text, leave notes with replies and redact. `@inkbar/svelte` gives you components to build your own toolbars, a popover for comment threads, and hooks for anything else. `@inkbar/theme` styles them all.
 
 Annotations are plain typed objects. Bind them with `bind:annotations` to keep them in your own state, or let Inkbar hold them with undo and redo.
 
@@ -52,7 +52,6 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
     InkZoomSelect,
     InkZoomIn,
     InkThreadPopover,
-    InkSuggestionCard,
   } from '@inkbar/svelte'
   import type { Annotation } from '@inkbar/core'
   import { assets } from 'virtual:inkbar-assets'
@@ -85,7 +84,6 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
     <InkZoomIn />
   </InkToolbar>
   <InkThreadPopover />
-  <InkSuggestionCard />
 </InkRoot>
 ```
 
@@ -159,11 +157,29 @@ 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.
+
 ## Custom rendering
 
-Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkThreadPopover` and `InkSuggestionCard` take `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`, `ThreadPopoverSlotProps` and `SuggestionCardSlotProps`, 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>
@@ -183,7 +199,7 @@ The scroll area takes focus. From there:
 
 On a focused annotation:
 
-- `Enter` or `Space` selects and activates it. A note opens its thread and a suggested redaction its card; other types are only selected.
+- `Enter` or `Space` selects and activates it. A note or text markup opens its thread; other types are only selected.
 - `ArrowUp` and `ArrowDown` move to the previous or next annotation on the page.
 - `Shift` + arrow moves it by 1 pt, or by 10 pt with `Alt` as well.
 - `Ctrl` or `Cmd` + `Shift` + arrow resizes an area redaction, text box or shape.
@@ -197,7 +213,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/InkAnnotation.svelte

@@ -17,8 +17,6 @@
    * default visual for every annotation that is not custom, so this never draws a second one.
    * InkPage portals it into the annotation's overlay element.
    */
-  import { acceptSuggestion } from '@inkbar/core'
-
   import { useInkContext } from '../context.js'
 
   import type { AnnotationState } from '@inkbar/core/dom'
@@ -48,9 +46,6 @@
     return () => observer.disconnect()
   })
 
-  const isSuggestion = $derived(
-    annotation.type === 'redact' && annotation.origin === 'suggested'
-  )
   const locked = $derived(annotation.locked === true)
   const selected = $derived(ctx.selection.includes(annotation.id))
   const store = () => ctx.document?.annotations
@@ -60,13 +55,6 @@
     locked,
     select: () => store()?.select([annotation.id]),
     remove: () => void store()?.remove(annotation.id),
-    accept: () => {
-      const s = store()
-      if (s && isSuggestion) acceptSuggestion(s, annotation.id)
-    },
-    dismiss: () => {
-      if (isSuggestion) store()?.remove(annotation.id)
-    },
   })
 </script>
 

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

@@ -1 +1 @@
-{"version":3,"file":"InkAnnotation.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkAnnotation.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,UAAU,CAAA;IACtB,mFAAmF;IACnF,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACjC,QAAQ,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;CACzC;AA2EH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InkAnnotation.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkAnnotation.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,UAAU,CAAA;IACtB,mFAAmF;IACnF,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACjC,QAAQ,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;CACzC;AA6DH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkColorMenu.svelte

@@ -28,17 +28,13 @@
      * tool is active, and recolours the selection only when it is all in the group.
      */
     group?: StyleGroup | undefined
+    /** The colour new annotations get while the style leaves it unset; the swatch shows it. */
+    fallback?: string | undefined
   }
 </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'
 
@@ -46,6 +42,7 @@
 
   import { asBitsProps, composeHandlers } from './child-snippet.js'
   import InkIcon from './InkIcon.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   let {
     property,
@@ -54,6 +51,7 @@
     children,
     standalone = false,
     group,
+    fallback,
     disabled,
     onclick,
     onkeydown,
@@ -63,7 +61,9 @@
   const style = useToolStyle(() => group)
   let open = $state(false)
 
-  const model = $derived(colorMenuModel(property, style.current, style.supported))
+  const model = $derived(
+    colorMenuModel(property, style.current, style.supported, fallback)
+  )
   const name = $derived(label ?? model.label)
   const trigger = $derived(model.trigger)
 
@@ -77,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
   }
 
@@ -159,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

@@ -26,6 +26,8 @@ export interface InkColorMenuProps extends Omit<HTMLButtonAttributes, 'children'
      * tool is active, and recolours the selection only when it is all in the group.
      */
     group?: StyleGroup | undefined;
+    /** The colour new annotations get while the style leaves it unset; the swatch shows it. */
+    fallback?: string | undefined;
 }
 declare const InkColorMenu: import("svelte").Component<InkColorMenuProps, {}, "">;
 type InkColorMenu = ReturnType<typeof InkColorMenu>;

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;CAC/B;AA0JH,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/InkHighlightMenu.svelte

@@ -19,45 +19,49 @@
 
 <script lang="ts">
   import {
-    focusInitialMenuItem,
     handleMenuKeys,
     highlightMenuModel,
     MARKUP_ICONS,
     MARKUP_KINDS,
-    menuItems,
     type HighlightOptions,
     type MarkupKind,
   } from '@inkbar/core/dom'
   import { ChevronDown } from '@inkbar/icons'
   import { Popover, Toolbar } from 'bits-ui'
 
+  import { useDocument } from '../hooks/useDocument.svelte.js'
   import { useTool } from '../hooks/useTool.svelte.js'
   import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
 
   import InkColorMenu from './InkColorMenu.svelte'
   import InkIcon from './InkIcon.svelte'
+  import { createMenuOpenFocus } from './menu-open-focus.js'
 
   let { class: className, children, ...rest }: InkHighlightMenuProps = $props()
 
   const current = useTool()
+  const inkDocument = useDocument()
   const highlight = useToolOptions<HighlightOptions>('highlight')
   let open = $state(false)
+  /** The split button: the panel lines up under it rather than the chevron. */
+  let group = $state<HTMLElement | null>(null)
 
   const model = $derived(highlightMenuModel(highlight.options, MARKUP_KINDS))
+  /** The colour the chosen kind gets while the markup style leaves it unset. */
+  const fallback = $derived(inkDocument.document?.annotations.defaults.color(model.kind))
   const active = $derived(current.tool === 'highlight')
 
   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
   }
 
@@ -69,6 +73,7 @@
 </script>
 
 <div
+  bind:this={group}
   role="group"
   aria-label="Highlight"
   class={['ink-split-button ink-highlight-menu', className]}
@@ -116,17 +121,13 @@
         class="ink-select-content ink-menu-content"
         data-ink-select-content=""
         data-ink-menu="highlight"
+        customAnchor={group}
         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)
-          }
-        }}
+        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">
@@ -156,6 +157,7 @@
             group="markup"
             label="Highlight colour"
             standalone
+            {fallback}
             role="menuitem"
             tabindex={-1}
           />

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"}