@inkbar/svelte 0.3.0 → 0.5.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 notes 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.
 
@@ -51,8 +51,7 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
     InkZoomOut,
     InkZoomSelect,
     InkZoomIn,
-    InkNotePopover,
-    InkSuggestionCard,
+    InkThreadPopover,
   } from '@inkbar/svelte'
   import type { Annotation } from '@inkbar/core'
   import { assets } from 'virtual:inkbar-assets'
@@ -65,7 +64,7 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
 
 <InkRoot src={{ url: signedUrl, key: documentId }} {assets} bind:annotations>
   <InkToolbar>
-    <InkToolButton tool="view" />
+    <InkToolButton tool="select-text" />
     <InkToolButton tool="select" />
     <InkToolButton tool="highlight" />
     <InkToolButton tool="redact-area" />
@@ -84,8 +83,7 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
     <InkZoomSelect />
     <InkZoomIn />
   </InkToolbar>
-  <InkNotePopover />
-  <InkSuggestionCard />
+  <InkThreadPopover />
 </InkRoot>
 ```
 
@@ -147,15 +145,21 @@ Inside `InkRoot`, `useHistory()` returns the same object. Its `batch(fn)` runs `
 
 `key` identifies the document. Reuse the same key when only the signed URL changes and the document is not reloaded.
 
-## Note popover
+## Thread popover
 
-`InkNotePopover` opens the thread of the activated note. A new note has no text yet, so the form first writes the note's own text (labelled "Comment"); after that it adds replies.
+`InkThreadPopover` opens the comment thread of the activated note or text markup (a highlight, underline, strikeout or squiggly). A new note or highlight has no text yet, so the form first writes its own `contents` (labelled "Comment"); after that it adds replies. A highlight with a comment shows a small marker at its end. Replies show in the thread only; the page draws just the note or highlight they answer.
 
-A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. Locked notes are never removed. If you add notes yourself (`add({ type: 'text', ... })`), give them `contents`, or they will be removed the first time someone opens and closes them.
+A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. A highlight stays: the mark is the point. Locked annotations are never removed. If you add notes yourself (`add({ type: 'text', ... })`), give them `contents`, or they will be removed the first time someone opens and closes them.
+
+The highlight tool leaves `contents` free for the comment. `doc.text(page)` returns the page's text items; match the markup's `quads` against them to get the marked text. `InkHighlightMenu` is a split button for the tool: it picks the markup kind and its colour.
+
+## Signatures
+
+`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.
 
 ## Custom rendering
 
-Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkNotePopover` 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`, `NotePopoverSlotProps` 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 }`. 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`.
 
@@ -173,10 +177,11 @@ The scroll area takes focus. From there:
 
 - With the `highlight` or `redact-area` tool active, `Enter` turns the text selection into a mark.
 - With the `note` tool active, `Enter` places a note at the centre of the current page and opens it.
+- With the `signature` tool active, `Enter` places the chosen signature at the centre of the current page.
 
 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.
@@ -190,7 +195,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.
+`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.
 
 ## 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

@@ -0,0 +1,247 @@
+<script module lang="ts">
+  import type { StyleGroup } from '@inkbar/core'
+  import type { ColorProperty } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  /**
+   * A colour menu for one colour property (border, fill or text) of the selection or the
+   * active tool. The trigger shows the current colour as a swatch: split when the selection
+   * disagrees, slashed for no fill. The panel is a palette grid, plus "No fill" for `fill`
+   * and "Custom…", which opens a native colour input. The menu disables when nothing
+   * supports the property.
+   */
+  export interface InkColorMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
+    /** The colour this menu sets. */
+    property: ColorProperty
+    /** Accessible name; defaults to "Border colour", "Fill colour" or "Text colour". */
+    label?: string | undefined
+    /** Replaces the swatch. */
+    children?: Snippet | undefined
+    /**
+     * Renders the trigger outside the toolbar's roving focus, for a menu nested in another
+     * panel (the text style menu's text colour).
+     */
+    standalone?: boolean | undefined
+    /**
+     * Scopes the menu to one style group: it shows and sets that group's colour whatever
+     * 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 { Check } 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 {
+    property,
+    label,
+    class: className,
+    children,
+    standalone = false,
+    group,
+    fallback,
+    disabled,
+    onclick,
+    onkeydown,
+    ...rest
+  }: InkColorMenuProps = $props()
+
+  const style = useToolStyle(() => group)
+  let open = $state(false)
+
+  const model = $derived(
+    colorMenuModel(property, style.current, style.supported, fallback)
+  )
+  const name = $derived(label ?? model.label)
+  const trigger = $derived(model.trigger)
+
+  let menu = $state<HTMLElement | null>(null)
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let customInput = $state<HTMLInputElement | 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
+  }
+
+  const triggerAttrs = $derived({
+    class: ['ink-menu-trigger ink-color-menu', className],
+    'data-ink-color-menu': property,
+    'data-state': open ? 'open' : 'closed',
+    'data-mixed': model.mixed ? '' : undefined,
+    'aria-label': name,
+    title: name,
+    'aria-haspopup': 'menu' as const,
+    disabled: !!disabled || !model.enabled,
+  })
+  /** The trigger's handlers: the host's first, then Bits UI's and the menu's. */
+  const handlers = (props: Record<string, unknown>) => ({
+    onclick: composeHandlers(onclick, props.onclick),
+    onkeydown: composeHandlers(onkeydown, props.onkeydown, onTriggerKeydown),
+  })
+</script>
+
+{#snippet body()}
+  {#if children}
+    {@render children()}
+  {:else}
+    <span
+      class="ink-swatch"
+      data-ink-swatch=""
+      data-property={property}
+      data-kind={trigger.kind}
+      data-color={trigger.kind === 'color' ? trigger.color : undefined}
+      style={trigger.kind === 'color' ? `--ink-swatch: ${trigger.color}` : undefined}
+      aria-hidden="true"
+    ></span>
+  {/if}
+{/snippet}
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      {#if standalone}
+        <button
+          bind:this={triggerEl}
+          {...props}
+          {...asBitsProps(rest)}
+          {...triggerAttrs}
+          {...handlers(props)}
+        >
+          {@render body()}
+        </button>
+      {:else}
+        <Toolbar.Button
+          {...props}
+          {...asBitsProps(rest)}
+          {...triggerAttrs}
+          {...handlers(props)}
+        >
+          {@render body()}
+        </Toolbar.Button>
+      {/if}
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      bind:ref={menu}
+      role="menu"
+      aria-label={name}
+      class="ink-select-content ink-menu-content"
+      data-ink-select-content=""
+      data-ink-menu={`color-${property}`}
+      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) => {
+        // Nested in another panel, Escape closes this menu alone; Bits would otherwise pick
+        // the layer to close by registration order.
+        if (standalone && e.key === 'Escape') {
+          e.stopPropagation()
+          e.preventDefault()
+          open = false
+          triggerEl?.focus()
+          return
+        }
+        if (menu) handleMenuKeys(e, menu)
+      }}
+    >
+      {#if model.noFill}
+        {@const noFill = model.noFill}
+        <button
+          type="button"
+          role="menuitemradio"
+          class="ink-select-item ink-menu-item"
+          data-ink-select-item=""
+          tabindex={-1}
+          aria-checked={noFill.checked}
+          data-state={noFill.checked ? 'checked' : 'unchecked'}
+          onclick={() => style.set(noFill.patch)}
+        >
+          No fill
+          {#if noFill.checked}
+            <span class="ink-select-indicator"><InkIcon icon={Check} size={16} /></span>
+          {/if}
+        </button>
+      {/if}
+      <div
+        role="group"
+        aria-label="Colours"
+        class="ink-color-grid"
+        data-ink-menu-columns={COLOR_COLUMNS}
+      >
+        {#each model.swatches as sw (sw.key)}
+          <button
+            type="button"
+            role="menuitemradio"
+            class="ink-swatch-item"
+            tabindex={-1}
+            aria-label={sw.label}
+            aria-checked={sw.checked}
+            data-state={sw.checked ? 'checked' : 'unchecked'}
+            style={`--ink-swatch: ${sw.color}`}
+            onclick={() => style.set(sw.patch)}
+          ></button>
+        {/each}
+      </div>
+      <button
+        type="button"
+        role="menuitem"
+        class="ink-select-item ink-menu-item"
+        data-ink-select-item=""
+        tabindex={-1}
+        onclick={() => customInput?.click()}
+      >
+        Custom…
+      </button>
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>
+<input
+  bind:this={customInput}
+  type="color"
+  class="ink-color-input"
+  aria-label="Custom colour"
+  data-ink-color-input={property}
+  tabindex={-1}
+  value={model.customValue.toLowerCase()}
+  onchange={(e) => style.set(model.custom(e.currentTarget.value))}
+/>

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

@@ -0,0 +1,35 @@
+import type { StyleGroup } from '@inkbar/core';
+import type { ColorProperty } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/**
+ * A colour menu for one colour property (border, fill or text) of the selection or the
+ * active tool. The trigger shows the current colour as a swatch: split when the selection
+ * disagrees, slashed for no fill. The panel is a palette grid, plus "No fill" for `fill`
+ * and "Custom…", which opens a native colour input. The menu disables when nothing
+ * supports the property.
+ */
+export interface InkColorMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
+    /** The colour this menu sets. */
+    property: ColorProperty;
+    /** Accessible name; defaults to "Border colour", "Fill colour" or "Text colour". */
+    label?: string | undefined;
+    /** Replaces the swatch. */
+    children?: Snippet | undefined;
+    /**
+     * Renders the trigger outside the toolbar's roving focus, for a menu nested in another
+     * panel (the text style menu's text colour).
+     */
+    standalone?: boolean | undefined;
+    /**
+     * Scopes the menu to one style group: it shows and sets that group's colour whatever
+     * 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>;
+export default InkColorMenu;
+//# sourceMappingURL=InkColorMenu.svelte.d.ts.map

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

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

package/dist/components/InkHighlightMenu.svelte

@@ -0,0 +1,175 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A split button for the highlight tool. The main part activates the tool with the current
+   * markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus
+   * the markup colour. Choosing a kind switches to the tool with it. The colour is a nested
+   * `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.
+   */
+  export interface InkHighlightMenuProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** Replaces the main button's icon. */
+    children?: Snippet | undefined
+  }
+</script>
+
+<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'
+
+  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.
+  $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: MarkupKind): void {
+    highlight.setOptions({ kind })
+    current.setTool('highlight')
+    open = false
+  }
+</script>
+
+<div
+  bind:this={group}
+  role="group"
+  aria-label="Highlight"
+  class={['ink-split-button ink-highlight-menu', className]}
+  data-ink-highlight-menu=""
+  {...rest}
+>
+  <Toolbar.Button
+    class="ink-tool-button ink-highlight-button"
+    data-ink-tool-button=""
+    data-ink-highlight-button=""
+    data-tool="highlight"
+    data-kind={model.kind}
+    data-state={active ? 'on' : 'off'}
+    aria-pressed={active}
+    aria-label={model.label}
+    title={model.label}
+    onclick={() => current.setTool('highlight')}
+  >
+    {#if children}{@render children()}{:else}<InkIcon
+        icon={MARKUP_ICONS[model.kind]}
+      />{/if}
+  </Toolbar.Button>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Toolbar.Button
+          {...props}
+          class="ink-menu-trigger ink-highlight-menu-trigger"
+          data-ink-highlight-menu-trigger=""
+          data-state={open ? 'open' : 'closed'}
+          aria-label="Choose highlight"
+          title="Choose highlight"
+          aria-haspopup="menu"
+          onkeydown={onTriggerKeydown}
+        >
+          <InkIcon icon={ChevronDown} />
+        </Toolbar.Button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content
+        bind:ref={menu}
+        role="menu"
+        aria-label="Highlights"
+        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)
+          }
+        }}
+        onkeydowncapture={(e: KeyboardEvent) => menu && handleMenuKeys(e, menu)}
+      >
+        <div role="group" aria-label="Kinds" class="ink-highlight-kinds">
+          {#each model.items as item (item.kind)}
+            <button
+              type="button"
+              role="menuitemradio"
+              class="ink-select-item ink-menu-item ink-highlight-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={MARKUP_ICONS[item.kind]} size={16} />
+              {item.label}
+            </button>
+          {/each}
+        </div>
+        <div role="separator" class="ink-select-separator"></div>
+        <div role="group" aria-label="Colour" class="ink-highlight-colour">
+          <span class="ink-highlight-colour-label" aria-hidden="true">Colour</span>
+          <!-- Capture on the panel moves on from this item before its own ArrowDown opens it. -->
+          <InkColorMenu
+            property="border"
+            group="markup"
+            label="Highlight colour"
+            standalone
+            {fallback}
+            role="menuitem"
+            tabindex={-1}
+          />
+        </div>
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A split button for the highlight tool. The main part activates the tool with the current
+ * markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus
+ * the markup colour. Choosing a kind switches to the tool with it. The colour is a nested
+ * `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.
+ */
+export interface InkHighlightMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Replaces the main button's icon. */
+    children?: Snippet | undefined;
+}
+declare const InkHighlightMenu: import("svelte").Component<InkHighlightMenuProps, {}, "">;
+type InkHighlightMenu = ReturnType<typeof InkHighlightMenu>;
+export default InkHighlightMenu;
+//# sourceMappingURL=InkHighlightMenu.svelte.d.ts.map

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

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