@inkbar/svelte 0.1.1 → 0.2.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.
 
@@ -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,30 @@ 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="select" />
+    <InkToolButton tool="highlight" />
+    <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
 
@@ -144,7 +171,7 @@ The scroll element takes focus. With the highlight or redact tool active, `Enter
 
 ## 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/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

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

@@ -0,0 +1 @@
+{"version":3,"file":"history-button.d.ts","sourceRoot":"","sources":["../../src/lib/components/history-button.ts"],"names":[],"mappings":"AAAA,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,0FAA0F;AAC1F,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,oDAAoD;IACpD,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC"}

package/dist/components/history-button.js

@@ -0,0 +1 @@
+export {};

package/dist/components/page-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 `InkPrevPage` and `InkNextPage`: a toolbar button that may render through `child`. */
+export interface InkPageButtonProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined;
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined;
+}
+//# sourceMappingURL=page-button.d.ts.map

package/dist/components/page-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-button.d.ts","sourceRoot":"","sources":["../../src/lib/components/page-button.ts"],"names":[],"mappings":"AAAA,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,kGAAkG;AAClG,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAChF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,oDAAoD;IACpD,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC"}

package/dist/components/page-button.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -24,8 +24,15 @@ export { default as InkAnnotation } from './components/InkAnnotation.svelte';
 export type { InkAnnotationProps } from './components/InkAnnotation.svelte';
 export { default as InkToolbar } from './components/InkToolbar.svelte';
 export type { InkToolbarProps } from './components/InkToolbar.svelte';
+export { default as InkIcon } from './components/InkIcon.svelte';
+export type { InkIconProps } from './components/InkIcon.svelte';
 export { default as InkToolButton } from './components/InkToolButton.svelte';
 export type { InkToolButtonProps } from './components/InkToolButton.svelte';
+export { default as InkToolbarSeparator } from './components/InkToolbarSeparator.svelte';
+export type { InkToolbarSeparatorProps } from './components/InkToolbarSeparator.svelte';
+export { default as InkUndo } from './components/InkUndo.svelte';
+export { default as InkRedo } from './components/InkRedo.svelte';
+export type { InkHistoryButtonProps } from './components/history-button.js';
 export { default as InkZoomIn } from './components/InkZoomIn.svelte';
 export { default as InkZoomOut } from './components/InkZoomOut.svelte';
 export type { InkZoomButtonProps } from './components/zoom-button.js';
@@ -35,8 +42,9 @@ export { default as InkPageInput } from './components/InkPageInput.svelte';
 export type { InkPageInputProps } from './components/InkPageInput.svelte';
 export { default as InkPageCount } from './components/InkPageCount.svelte';
 export type { InkPageCountProps } from './components/InkPageCount.svelte';
-export { default as DefaultToolbar } from './compositions/DefaultToolbar.svelte';
-export type { DefaultToolbarProps } from './compositions/DefaultToolbar.svelte';
+export { default as InkPrevPage } from './components/InkPrevPage.svelte';
+export { default as InkNextPage } from './components/InkNextPage.svelte';
+export type { InkPageButtonProps } from './components/page-button.js';
 export type { ChildSnippet } from './components/child-snippet.js';
 export { default as InkNotePopover } from './components/InkNotePopover.svelte';
 export type { InkNotePopoverProps } from './components/InkNotePopover.svelte';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -13,12 +13,17 @@ export { default as InkViewport } from './components/InkViewport.svelte';
 export { default as InkPage } from './components/InkPage.svelte';
 export { default as InkAnnotation } from './components/InkAnnotation.svelte';
 export { default as InkToolbar } from './components/InkToolbar.svelte';
+export { default as InkIcon } from './components/InkIcon.svelte';
 export { default as InkToolButton } from './components/InkToolButton.svelte';
+export { default as InkToolbarSeparator } from './components/InkToolbarSeparator.svelte';
+export { default as InkUndo } from './components/InkUndo.svelte';
+export { default as InkRedo } from './components/InkRedo.svelte';
 export { default as InkZoomIn } from './components/InkZoomIn.svelte';
 export { default as InkZoomOut } from './components/InkZoomOut.svelte';
 export { default as InkZoomSelect } from './components/InkZoomSelect.svelte';
 export { default as InkPageInput } from './components/InkPageInput.svelte';
 export { default as InkPageCount } from './components/InkPageCount.svelte';
-export { default as DefaultToolbar } from './compositions/DefaultToolbar.svelte';
+export { default as InkPrevPage } from './components/InkPrevPage.svelte';
+export { default as InkNextPage } from './components/InkNextPage.svelte';
 export { default as InkNotePopover } from './components/InkNotePopover.svelte';
 export { default as InkSuggestionCard } from './components/InkSuggestionCard.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/svelte",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Svelte 5 components and hooks for Inkbar, the browser PDF viewer and editor.",
   "license": "MIT",
   "homepage": "https://inkbar.dev",
@@ -26,19 +26,19 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@inkbar/icons": "^0.2.0",
     "@internationalized/date": "^3.12.4",
-    "@lucide/svelte": "^1.56.0",
     "bits-ui": "^2.19.5",
     "esm-env": "^1.2.0"
   },
   "peerDependencies": {
-    "@inkbar/core": "^0.1.1",
+    "@inkbar/core": "^0.2.0",
     "svelte": "^5.46.4"
   },
   "devDependencies": {
-    "@inkbar/core": "0.1.1",
+    "@inkbar/core": "0.2.0",
     "@inkbar/fixtures": "0.0.0",
-    "@inkbar/theme": "0.1.1",
+    "@inkbar/theme": "0.2.0",
     "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@vitest/browser-playwright": "^5.0.4",

package/dist/class-names.d.ts

@@ -1,3 +0,0 @@
-/** Joins class names, dropping empties. */
-export declare function cx(...parts: (string | undefined | null | false)[]): string | undefined;
-//# sourceMappingURL=class-names.d.ts.map

package/dist/class-names.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"class-names.d.ts","sourceRoot":"","sources":["../src/lib/class-names.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,SAAS,CAGtF"}

package/dist/class-names.js

@@ -1,5 +0,0 @@
-/** Joins class names, dropping empties. */
-export function cx(...parts) {
-    const out = parts.filter(Boolean).join(' ');
-    return out === '' ? undefined : out;
-}

package/dist/compositions/DefaultToolbar.svelte

@@ -1,90 +0,0 @@
-<script module lang="ts">
-  import type { Snippet } from 'svelte'
-
-  export interface DefaultToolbarProps {
-    label?: string | undefined
-    class?: string | undefined
-    children?: Snippet | undefined
-  }
-</script>
-
-<script lang="ts">
-  /*
-   * The standard toolbar: tools, zoom and page controls with icons. It adds no styles of its
-   * own; the theme styles the `data-ink-*` hooks. Extra controls go in `children`.
-   */
-  // One module per icon: the package's index evaluates every icon it ships, which costs a
-  // server (or a test) that imports this file well over a second. A new icon also goes in the
-  // browser tests' `optimizeDeps.include` in vitest.config.ts.
-  import Hand from '@lucide/svelte/icons/hand'
-  import Highlighter from '@lucide/svelte/icons/highlighter'
-  import MessageSquare from '@lucide/svelte/icons/message-square'
-  import MousePointer2 from '@lucide/svelte/icons/mouse-pointer-2'
-  import Square from '@lucide/svelte/icons/square'
-  import ZoomIn from '@lucide/svelte/icons/zoom-in'
-  import ZoomOut from '@lucide/svelte/icons/zoom-out'
-
-  import { cx } from '../class-names.js'
-  import InkPageCount from '../components/InkPageCount.svelte'
-  import InkPageInput from '../components/InkPageInput.svelte'
-  import InkToolbar from '../components/InkToolbar.svelte'
-  import InkToolButton from '../components/InkToolButton.svelte'
-  import InkZoomIn from '../components/InkZoomIn.svelte'
-  import InkZoomOut from '../components/InkZoomOut.svelte'
-  import InkZoomSelect from '../components/InkZoomSelect.svelte'
-
-  let {
-    label = 'Document tools',
-    class: className,
-    children,
-  }: DefaultToolbarProps = $props()
-
-  const ICON = 18
-</script>
-
-<InkToolbar
-  {label}
-  class={cx('ink-default-toolbar', className)}
-  data-ink-default-toolbar=""
->
-  <div
-    class="ink-toolbar-group"
-    data-ink-toolbar-group="tools"
-    role="group"
-    aria-label="Tools"
-  >
-    <InkToolButton tool="view"><Hand size={ICON} aria-hidden="true" /></InkToolButton>
-    <InkToolButton tool="select"
-      ><MousePointer2 size={ICON} aria-hidden="true" /></InkToolButton
-    >
-    <InkToolButton tool="highlight"
-      ><Highlighter size={ICON} aria-hidden="true" /></InkToolButton
-    >
-    <InkToolButton tool="redact-area"
-      ><Square size={ICON} aria-hidden="true" /></InkToolButton
-    >
-    <InkToolButton tool="note"
-      ><MessageSquare size={ICON} aria-hidden="true" /></InkToolButton
-    >
-  </div>
-  <div
-    class="ink-toolbar-group"
-    data-ink-toolbar-group="zoom"
-    role="group"
-    aria-label="Zoom"
-  >
-    <InkZoomOut><ZoomOut size={ICON} aria-hidden="true" /></InkZoomOut>
-    <InkZoomSelect />
-    <InkZoomIn><ZoomIn size={ICON} aria-hidden="true" /></InkZoomIn>
-  </div>
-  <div
-    class="ink-toolbar-group"
-    data-ink-toolbar-group="page"
-    role="group"
-    aria-label="Page"
-  >
-    <InkPageInput />
-    <InkPageCount />
-  </div>
-  {@render children?.()}
-</InkToolbar>

package/dist/compositions/DefaultToolbar.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-export interface DefaultToolbarProps {
-    label?: string | undefined;
-    class?: string | undefined;
-    children?: Snippet | undefined;
-}
-declare const DefaultToolbar: import("svelte").Component<DefaultToolbarProps, {}, "">;
-type DefaultToolbar = ReturnType<typeof DefaultToolbar>;
-export default DefaultToolbar;
-//# sourceMappingURL=DefaultToolbar.svelte.d.ts.map

package/dist/compositions/DefaultToolbar.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/compositions/DefaultToolbar.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAkFH,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}