@inkbar/svelte 0.1.1 → 0.3.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 a default toolbar and popovers styled by `@inkbar/theme`, plus the unstyled components and hooks they are made from, so you can keep the defaults or build your own UI.
+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.
 
 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.
 
@@ -30,7 +30,7 @@ Annotations are plain typed objects. Bind them with `bind:annotations` to keep t
 pnpm add @inkbar/svelte @inkbar/core @inkbar/theme
 ```
 
-Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/core/vite` so the PDF engine can load its worker and fonts; the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#serving-pdfjs-assets) covers it. The package ships `.svelte` sources, so your bundler compiles them for your target, including the server.
+Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/core/vite` so PDF.js can load its worker and fonts; the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#serving-pdfjs-assets) covers it. The package ships `.svelte` sources, so your bundler compiles them for your target, including the server.
 
 ## Usage
 
@@ -39,7 +39,18 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
   import {
     InkRoot,
     InkViewport,
-    DefaultToolbar,
+    InkToolbar,
+    InkToolButton,
+    InkToolbarSeparator,
+    InkUndo,
+    InkRedo,
+    InkPrevPage,
+    InkPageInput,
+    InkPageCount,
+    InkNextPage,
+    InkZoomOut,
+    InkZoomSelect,
+    InkZoomIn,
     InkNotePopover,
     InkSuggestionCard,
   } from '@inkbar/svelte'
@@ -53,14 +64,32 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
 </script>
 
 <InkRoot src={{ url: signedUrl, key: documentId }} {assets} bind:annotations>
-  <DefaultToolbar />
+  <InkToolbar>
+    <InkToolButton tool="view" />
+    <InkToolButton tool="select" />
+    <InkToolButton tool="highlight" />
+    <InkToolButton tool="redact-area" />
+    <InkToolButton tool="note" />
+    <InkToolbarSeparator />
+    <InkUndo />
+    <InkRedo />
+  </InkToolbar>
   <InkViewport />
+  <InkToolbar label="Page and zoom">
+    <InkPrevPage />
+    <InkPageInput />
+    <InkPageCount />
+    <InkNextPage />
+    <InkZoomOut />
+    <InkZoomSelect />
+    <InkZoomIn />
+  </InkToolbar>
   <InkNotePopover />
   <InkSuggestionCard />
 </InkRoot>
 ```
 
-`bind:annotations` makes your list the source of truth. Leave it off and Inkbar keeps the state itself, with undo and redo.
+Each toolbar control is a component, so keep the ones you need and put them where you like. Buttons show icons from `@inkbar/icons`. Pass your own as `children` to replace one, and use `InkIcon` to put the same icons on your own buttons. `bind:annotations` makes your list the source of truth. Leave it off and Inkbar keeps the state itself, with undo and redo.
 
 ## Controlled mode
 
@@ -122,13 +151,13 @@ Inside `InkRoot`, `useHistory()` returns the same object. Its `batch(fn)` runs `
 
 `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.
 
-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: 'note', ... })`), 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. 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.
 
 ## 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.
 
-`InkRoot`, `InkToolbar`, `InkToolButton`, `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`, `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>
@@ -140,11 +169,24 @@ Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation
 
 ## Keyboard
 
-The scroll element takes focus. With the highlight or redact tool active, `Enter` turns the text selection into a mark; with the note tool, `Enter` places a note in the middle of the current page and opens it. 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), `ArrowUp` and `ArrowDown` move between annotations, `Shift` + arrow moves it by 1 pt (add `Alt` for 10 pt), `Ctrl` or `Cmd` + `Shift` + arrow resizes an area mark, and `Delete` removes it. The full table is in the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#tools-and-keyboard).
+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.
+
+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.
+- `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.
+- `Delete` or `Backspace` removes it.
+
+The full table, with the zoom and page keys, is in the [`@inkbar/core` README](https://github.com/inkbar/inkbar/tree/main/packages/core#tools-and-keyboard).
 
 ## Styling
 
-Components carry state on data attributes, for example `[data-annotation][data-state="selected"]` and `[data-tool="highlight"][data-state="on"]`. `@inkbar/theme` gives a default look. Your own CSS overrides it without `!important`. `InkRoot`, `InkViewport`, `DefaultToolbar` and the toolbar controls accept `class`.
+Components carry state on data attributes, for example `[data-annotation][data-state="selected"]` and `[data-tool="highlight"][data-state="on"]`. `@inkbar/theme` gives a default look. Your own CSS overrides it without `!important`. `InkRoot`, `InkViewport`, `InkToolbar` and the toolbar controls accept `class`.
 
 ## Hooks
 

package/dist/components/InkIcon.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { IconNode } from '@inkbar/icons'
+
+  export interface InkIconProps {
+    icon: IconNode
+    size?: number | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * An icon from `@inkbar/icons`, hidden from assistive technology: the control it sits in
+   * carries the name. The theme sizes it with `--ink-icon-size`.
+   */
+  import { ICON_ATTRIBUTES } from '@inkbar/icons'
+
+  let { icon, size = 18 }: InkIconProps = $props()
+</script>
+
+<svg {...ICON_ATTRIBUTES} width={size} height={size} class="ink-icon" aria-hidden="true">
+  {#each icon as [tag, attrs], i (i)}
+    <svelte:element this={tag} {...attrs} />
+  {/each}
+</svg>

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

@@ -0,0 +1,9 @@
+import type { IconNode } from '@inkbar/icons';
+export interface InkIconProps {
+    icon: IconNode;
+    size?: number | undefined;
+}
+declare const InkIcon: import("svelte").Component<InkIconProps, {}, "">;
+type InkIcon = ReturnType<typeof InkIcon>;
+export default InkIcon;
+//# sourceMappingURL=InkIcon.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkIcon.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B;AA0BH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/InkNextPage.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { ChevronRight } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+
+  import { usePage } from '../hooks/usePage.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkPageButtonProps } from './page-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkPageButtonProps = $props()
+
+  const page = usePage()
+</script>
+
+<Toolbar.Button
+  class={['ink-next-page', className]}
+  data-ink-next-page=""
+  aria-label="Next page"
+  title="Next page"
+  disabled={page.current >= page.count - 1 || !!disabled}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) page.next()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={ChevronRight} />{/if}
+</Toolbar.Button>

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

@@ -0,0 +1,5 @@
+import type { InkPageButtonProps } from './page-button.js';
+declare const InkNextPage: import("svelte").Component<InkPageButtonProps, {}, "">;
+type InkNextPage = ReturnType<typeof InkNextPage>;
+export default InkNextPage;
+//# sourceMappingURL=InkNextPage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkNextPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkNextPage.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAkC3D,QAAA,MAAM,WAAW,wDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/InkNotePopover.svelte

@@ -40,7 +40,7 @@
     const a = ctx.activated
       ? store.annotations.find((x) => x.id === ctx.activated)
       : undefined
-    return a?.type === 'note' ? threadRoot(store.annotations, a) : null
+    return a?.type === 'text' ? threadRoot(store.annotations, a) : null
   })
   const anchorRef = useAnnotationElement(
     () => ctx.rootEl,
@@ -90,7 +90,7 @@
     if (!root || !contents) return
     written.add(root.id)
     store.add({
-      type: 'note',
+      type: 'text',
       page: root.page,
       rect: root.rect,
       contents,

package/dist/components/InkPrevPage.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { ChevronLeft } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+
+  import { usePage } from '../hooks/usePage.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkPageButtonProps } from './page-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkPageButtonProps = $props()
+
+  const page = usePage()
+</script>
+
+<Toolbar.Button
+  class={['ink-prev-page', className]}
+  data-ink-prev-page=""
+  aria-label="Previous page"
+  title="Previous page"
+  disabled={page.current <= 0 || !!disabled}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) page.previous()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={ChevronLeft} />{/if}
+</Toolbar.Button>

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

@@ -0,0 +1,5 @@
+import type { InkPageButtonProps } from './page-button.js';
+declare const InkPrevPage: import("svelte").Component<InkPageButtonProps, {}, "">;
+type InkPrevPage = ReturnType<typeof InkPrevPage>;
+export default InkPrevPage;
+//# sourceMappingURL=InkPrevPage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPrevPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkPrevPage.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAkC3D,QAAA,MAAM,WAAW,wDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/InkRedo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Redo2 } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+
+  import { useHistory } from '../hooks/useHistory.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkHistoryButtonProps } from './history-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkHistoryButtonProps = $props()
+
+  const history = useHistory()
+</script>
+
+<Toolbar.Button
+  class={['ink-redo', className]}
+  data-ink-redo=""
+  aria-label="Redo"
+  title="Redo"
+  disabled={!history.canRedo || !!disabled}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) history.redo()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={Redo2} />{/if}
+</Toolbar.Button>

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

@@ -0,0 +1,5 @@
+import type { InkHistoryButtonProps } from './history-button.js';
+declare const InkRedo: import("svelte").Component<InkHistoryButtonProps, {}, "">;
+type InkRedo = ReturnType<typeof InkRedo>;
+export default InkRedo;
+//# sourceMappingURL=InkRedo.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkRedo.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkRedo.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAkCjE,QAAA,MAAM,OAAO,2DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/InkToolButton.svelte

@@ -14,11 +14,23 @@
 
 <script lang="ts">
   import { TOOL_LABELS } from '@inkbar/core/dom'
+  import { Hand, Highlighter, MessageSquare, MousePointer2, Square } from '@inkbar/icons'
   import { Toolbar } from 'bits-ui'
 
   import { useTool } from '../hooks/useTool.svelte.js'
 
   import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { IconNode } from '@inkbar/icons'
+
+  const ICONS: Readonly<Record<ToolId, IconNode>> = {
+    view: Hand,
+    select: MousePointer2,
+    highlight: Highlighter,
+    'redact-area': Square,
+    note: MessageSquare,
+  }
 
   let {
     tool,
@@ -50,5 +62,7 @@
     if (!e.defaultPrevented) current.setTool(tool)
   }}
 >
-  {#if children}{@render children({ active, label: name })}{:else}{name}{/if}
+  {#if children}{@render children({ active, label: name })}{:else}<InkIcon
+      icon={ICONS[tool]}
+    />{/if}
 </Toolbar.Button>

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

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolButton.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IACpE,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC;AA4CH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InkToolButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolButton.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IACpE,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC;AA4DH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkToolbarSeparator.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type InkToolbarSeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+</script>
+
+<script lang="ts">
+  /* A divider between groups of controls in a horizontal toolbar. Not focusable. */
+  let { class: className, ...rest }: InkToolbarSeparatorProps = $props()
+</script>
+
+<div
+  role="separator"
+  aria-orientation="vertical"
+  class={['ink-toolbar-separator', className]}
+  data-ink-toolbar-separator=""
+  {...rest}
+></div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkToolbarSeparator.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolbarSeparator.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CACxF;AAYD,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/InkUndo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Undo2 } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+
+  import { useHistory } from '../hooks/useHistory.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkHistoryButtonProps } from './history-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkHistoryButtonProps = $props()
+
+  const history = useHistory()
+</script>
+
+<Toolbar.Button
+  class={['ink-undo', className]}
+  data-ink-undo=""
+  aria-label="Undo"
+  title="Undo"
+  disabled={!history.canUndo || !!disabled}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) history.undo()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={Undo2} />{/if}
+</Toolbar.Button>

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

@@ -0,0 +1,5 @@
+import type { InkHistoryButtonProps } from './history-button.js';
+declare const InkUndo: import("svelte").Component<InkHistoryButtonProps, {}, "">;
+type InkUndo = ReturnType<typeof InkUndo>;
+export default InkUndo;
+//# sourceMappingURL=InkUndo.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkUndo.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkUndo.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAkCjE,QAAA,MAAM,OAAO,2DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/InkZoomIn.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import { ZoomIn } from '@inkbar/icons'
   import { Toolbar } from 'bits-ui'
 
   import { useZoom } from '../hooks/useZoom.svelte.js'
 
   import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
 
   import type { InkZoomButtonProps } from './zoom-button.js'
 
@@ -30,5 +32,5 @@
     if (!e.defaultPrevented) zoom.zoomIn()
   }}
 >
-  {#if children}{@render children()}{:else}+{/if}
+  {#if children}{@render children()}{:else}<InkIcon icon={ZoomIn} />{/if}
 </Toolbar.Button>

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomIn.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkZoomIn.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA+B3D,QAAA,MAAM,SAAS,wDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"InkZoomIn.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkZoomIn.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAiC3D,QAAA,MAAM,SAAS,wDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/InkZoomOut.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import { ZoomOut } from '@inkbar/icons'
   import { Toolbar } from 'bits-ui'
 
   import { useZoom } from '../hooks/useZoom.svelte.js'
 
   import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
 
   import type { InkZoomButtonProps } from './zoom-button.js'
 
@@ -30,5 +32,5 @@
     if (!e.defaultPrevented) zoom.zoomOut()
   }}
 >
-  {#if children}{@render children()}{:else}−{/if}
+  {#if children}{@render children()}{:else}<InkIcon icon={ZoomOut} />{/if}
 </Toolbar.Button>

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomOut.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkZoomOut.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA+B3D,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InkZoomOut.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkZoomOut.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAiC3D,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/InkZoomSelect.svelte

@@ -1,21 +1,29 @@
 <script module lang="ts">
-  import type { HTMLSelectAttributes } from 'svelte/elements'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
 
-  export type InkZoomSelectProps = Omit<
-    HTMLSelectAttributes,
-    'value' | 'onchange' | 'children'
-  >
+  /** Attributes for the trigger button. The listbox and its options are the component's own. */
+  export type InkZoomSelectProps = Omit<HTMLButtonAttributes, 'value' | 'children'>
 </script>
 
 <script lang="ts">
   import { ZOOM_LEVELS, type ZoomValue } from '@inkbar/core/dom'
+  import { Check, ChevronDown } from '@inkbar/icons'
+  import { Select } from 'bits-ui'
 
   import { useZoom } from '../hooks/useZoom.svelte.js'
 
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
   let { class: className, ...rest }: InkZoomSelectProps = $props()
 
   const CUSTOM = 'custom:'
+  const FITS = [
+    { value: 'fit-width', label: 'Fit width' },
+    { value: 'fit-page', label: 'Fit page' },
+  ]
   const level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)
+  const percent = (z: number) => `${Math.round(z * 100)}%`
 
   const zoom = useZoom()
   /** A numeric zoom that is not one of the levels (zoom in and out multiply). */
@@ -29,28 +37,69 @@
         ? String(level(zoom.zoom))
         : `${CUSTOM}${zoom.zoom}`
   )
-  function onchange(e: Event & { currentTarget: HTMLSelectElement }): void {
-    const v = e.currentTarget.value
+  /** The levels, with a custom zoom in its place among them. */
+  const levels = $derived.by(() => {
+    const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))
+    if (custom !== null)
+      list.push({ z: custom, value: `${CUSTOM}${custom}`, label: percent(zoom.scale) })
+    return list.sort((a, b) => a.z - b.z)
+  })
+  // Every option, for the trigger's label and typeahead: the items mount only while it is open.
+  const items = $derived([...FITS, ...levels])
+
+  function onValueChange(v: string): void {
+    if (v === value) return
     const next: ZoomValue =
       v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))
     zoom.setZoom(next)
   }
 </script>
 
-<select
-  class={['ink-zoom-select', className]}
-  data-ink-zoom-select=""
-  aria-label="Zoom"
-  {value}
-  {onchange}
-  {...rest}
->
-  <option value="fit-width">Fit width</option>
-  <option value="fit-page">Fit page</option>
-  {#each ZOOM_LEVELS as l (l)}
-    <option value={String(l)}>{Math.round(l * 100)}%</option>
-  {/each}
-  {#if custom !== null}
-    <option value={`${CUSTOM}${custom}`}>{Math.round(zoom.scale * 100)}%</option>
-  {/if}
-</select>
+<!-- Bits UI's trigger is a plain button with a listbox popup; the role makes it the
+     select-only combobox of the ARIA pattern, as Reka UI and Radix render it. -->
+<Select.Root type="single" {items} bind:value={() => value, onValueChange}>
+  <Select.Trigger
+    class={['ink-zoom-select', 'ink-select-trigger', className]}
+    data-ink-zoom-select=""
+    role="combobox"
+    aria-label="Zoom"
+    {...asBitsProps(rest)}
+  >
+    <Select.Value class="ink-select-value" />
+    <span class="ink-select-icon" aria-hidden="true">
+      <InkIcon icon={ChevronDown} size={16} />
+    </span>
+  </Select.Trigger>
+  <Select.Portal>
+    <Select.Content
+      class="ink-select-content"
+      data-ink-select-content=""
+      side="top"
+      sideOffset={4}
+    >
+      <Select.Viewport>
+        {#each items as o, i (o.value)}
+          <!-- The fits, then the levels. -->
+          {#if i === FITS.length}
+            <div class="ink-select-separator" aria-hidden="true"></div>
+          {/if}
+          <Select.Item
+            value={o.value}
+            label={o.label}
+            class="ink-select-item"
+            data-ink-select-item=""
+          >
+            {#snippet children({ selected })}
+              <span>{o.label}</span>
+              {#if selected}
+                <span class="ink-select-indicator">
+                  <InkIcon icon={Check} size={16} />
+                </span>
+              {/if}
+            {/snippet}
+          </Select.Item>
+        {/each}
+      </Select.Viewport>
+    </Select.Content>
+  </Select.Portal>
+</Select.Root>

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

@@ -1,5 +1,6 @@
-import type { HTMLSelectAttributes } from 'svelte/elements';
-export type InkZoomSelectProps = Omit<HTMLSelectAttributes, 'value' | 'onchange' | 'children'>;
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/** Attributes for the trigger button. The listbox and its options are the component's own. */
+export type InkZoomSelectProps = Omit<HTMLButtonAttributes, 'value' | 'children'>;
 declare const InkZoomSelect: import("svelte").Component<InkZoomSelectProps, {}, "">;
 type InkZoomSelect = ReturnType<typeof InkZoomSelect>;
 export default InkZoomSelect;

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkZoomSelect.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,EACpB,OAAO,GAAG,UAAU,GAAG,UAAU,CAClC,CACF;AAmDD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InkZoomSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkZoomSelect.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,8FAA8F;AAC9F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,CAClF;AAiGD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/history-button.d.ts

@@ -0,0 +1,10 @@
+import type { ChildSnippet } from './child-snippet.js';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/** Props of `InkUndo` and `InkRedo`: a toolbar button that may render through `child`. */
+export interface InkHistoryButtonProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined;
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined;
+}
+//# sourceMappingURL=history-button.d.ts.map