@inkbar/svelte 0.0.0-stage → 0.1.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPageCount.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkPageCount.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAClF;AAkBD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InkPageInput.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  export type InkPageInputProps = Omit<
+    HTMLInputAttributes,
+    'value' | 'onchange' | 'oninput' | 'type' | 'min' | 'max' | 'children'
+  >
+</script>
+
+<script lang="ts">
+  import { usePage } from '../hooks/usePage.svelte.js'
+
+  let { class: className, onkeydown, ...rest }: InkPageInputProps = $props()
+
+  const page = usePage()
+  // Writable derived: follows the current page, and holds what the user types until then.
+  let draft = $derived(String(page.current + 1))
+
+  /** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */
+  function commit(value: string): void {
+    const n = Number(value)
+    if (Number.isInteger(n) && n >= 1 && n <= page.count) {
+      if (n - 1 !== page.current) page.goTo(n - 1)
+    } else draft = String(page.current + 1)
+  }
+  function onKeyDown(e: KeyboardEvent & { currentTarget: HTMLInputElement }): void {
+    onkeydown?.(e)
+    if (e.defaultPrevented || e.key !== 'Enter') return
+    e.preventDefault()
+    commit(draft)
+  }
+</script>
+
+<!-- `onchange` is the native change event: it fires on blur after typing, and on each step of
+     the spinner or the arrow keys. `oninput` keeps the draft for Enter. -->
+<input
+  class={['ink-page-input', className]}
+  data-ink-page-input=""
+  type="number"
+  inputmode="numeric"
+  aria-label="Page"
+  min={1}
+  max={page.count}
+  value={draft}
+  oninput={(e) => (draft = e.currentTarget.value)}
+  onchange={(e) => commit(e.currentTarget.value)}
+  onkeydown={onKeyDown}
+  {...rest}
+/>

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

@@ -0,0 +1,6 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type InkPageInputProps = Omit<HTMLInputAttributes, 'value' | 'onchange' | 'oninput' | 'type' | 'min' | 'max' | 'children'>;
+declare const InkPageInput: import("svelte").Component<InkPageInputProps, {}, "">;
+type InkPageInput = ReturnType<typeof InkPageInput>;
+export default InkPageInput;
+//# sourceMappingURL=InkPageInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPageInput.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkPageInput.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,CACvE,CACF;AAmCD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InkRoot.svelte

@@ -0,0 +1,358 @@
+<script module lang="ts">
+  import type { ChildSnippet } from './child-snippet.js'
+  import type {
+    Annotation,
+    AnnotationChange,
+    AnnotationDefaults,
+    DocumentSource,
+    InkDocument,
+    InkError,
+    InkStatus,
+    PdfAssets,
+  } from '@inkbar/core'
+  import type { ToolId, ZoomValue } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkRootProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children' | 'onchange' | 'onerror'
+  > {
+    src: DocumentSource | null
+    assets: PdfAssets
+    password?: string | undefined
+    /** Colour defaults. Without it, the theme's CSS variables on the root element apply. */
+    defaults?: AnnotationDefaults | undefined
+    /**
+     * Pass (with `bind:`) to put annotations under the host's control. The mode is fixed when a
+     * document opens: passing or dropping this prop later takes effect on the next open. A host
+     * that decides on each proposal uses a function binding.
+     */
+    annotations?: Annotation[] | undefined
+    onAnnotationsChange?: ((next: Annotation[]) => void) | undefined
+    onChange?: ((change: AnnotationChange) => void) | undefined
+    tool?: ToolId | undefined
+    onToolChange?: ((tool: ToolId) => void) | undefined
+    page?: number | undefined
+    onPageChange?: ((page: number) => void) | undefined
+    zoom?: ZoomValue | undefined
+    onZoomChange?: ((zoom: ZoomValue) => void) | undefined
+    /** Undo history. Defaults to on for uncontrolled, off for controlled. */
+    history?: boolean | undefined
+    onReady?: ((doc: InkDocument) => void) | undefined
+    onError?: ((error: InkError) => void) | undefined
+    onActivate?: ((id: string) => void) | undefined
+    /** The root element, for hosts that bind it. */
+    ref?: HTMLElement | null
+    children?: Snippet<[{ status: InkStatus; document: InkDocument | null }]>
+    /**
+     * Render your own root element: spread `props` on it and put your content inside. The
+     * context is still provided, so Inkbar components work inside it.
+     */
+    child?: ChildSnippet
+  }
+</script>
+
+<script lang="ts">
+  import {
+    createSnapshotHistory,
+    InkError as InkErrorClass,
+    openDocument,
+  } from '@inkbar/core'
+  import { cssVariableDefaults } from '@inkbar/core/dom'
+  import { DEV } from 'esm-env'
+  import { untrack } from 'svelte'
+  import { createAttachmentKey } from 'svelte/attachments'
+
+  import { setInkContext, type InkContext, type InkHistory } from '../context.js'
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import type { ToolController, Viewport } from '@inkbar/core/dom'
+
+  let {
+    src,
+    assets,
+    password,
+    defaults,
+    annotations = $bindable(),
+    onAnnotationsChange,
+    onChange,
+    tool = $bindable(),
+    onToolChange,
+    page = $bindable(),
+    onPageChange,
+    zoom = $bindable(),
+    onZoomChange,
+    history: historyProp,
+    onReady,
+    onError,
+    onActivate,
+    ref = $bindable(null),
+    children,
+    child,
+    ...rest
+  }: InkRootProps = $props()
+
+  type TestHookElement = HTMLElement & { __inkDocument?: InkDocument | undefined }
+
+  const IDLE: InkStatus = { state: 'idle' }
+  const NO_ANNOTATIONS: readonly Annotation[] = []
+  const NO_IDS: readonly string[] = []
+
+  /** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */
+  function identity(source: DocumentSource | null): unknown {
+    if (source === null) return null
+    if (typeof source === 'string') return source
+    if ('key' in source) return source.key
+    return source
+  }
+
+  function setTestHook(el: HTMLElement | null, doc: InkDocument | undefined): void {
+    if (el && DEV) (el as TestHookElement).__inkDocument = doc
+  }
+
+  let document = $state.raw<InkDocument | null>(null)
+  /** Overrides the document's status while opening, and when opening itself failed. */
+  let override = $state.raw<InkStatus | null>(null)
+  let activated = $state<string | null>(null)
+  /** The same value outside the reactive graph, for the popovers' close handlers. */
+  let activatedNow: string | null = null
+  let viewport = $state.raw<Viewport | null>(null)
+  let tools = $state.raw<ToolController | null>(null)
+
+  const documentStatus = useReadable<InkStatus>(() => document?.status, IDLE)
+  const status = $derived(override ?? documentStatus.current)
+  const annotationList = useReadable<readonly Annotation[]>(
+    () => document?.annotations.list,
+    NO_ANNOTATIONS
+  )
+  const selection = useReadable<readonly string[]>(
+    () => document?.annotations.selection,
+    NO_IDS
+  )
+  const currentTool = $derived<ToolId>(tool ?? 'view')
+
+  // What the next open will do follows the prop; the open document's mode is fixed.
+  const controlledProp = $derived(annotations !== undefined)
+  const controlled = $derived(
+    document ? document.annotations.mode === 'controlled' : controlledProp
+  )
+  const historyEnabled = $derived(controlled && historyProp === true)
+
+  const snapshotHistory = createSnapshotHistory({
+    apply: (list) => document?.annotations.replaceAll(list, 'history'),
+    enabled: () => historyEnabled,
+  })
+  $effect(() => {
+    snapshotHistory.observe(annotations)
+  })
+
+  // Open for a new source identity or password. The effect reads them through deriveds, which
+  // notify only when the value changes: a host that spreads its props, or passes a new URL under
+  // the same key, invalidates `src` without changing the identity. Everything else is read under
+  // `untrack`, so a changed `assets`, `defaults` or callback never reopens.
+  const sourceIdentity = $derived(identity(src))
+  const sourcePassword = $derived(password)
+  $effect(() => {
+    void sourceIdentity
+    const pw = sourcePassword
+    let cancelled = false
+    let opened: InkDocument | null = null
+    untrack(() => snapshotHistory.clear())
+    const source = untrack(() => src)
+    if (source === null) {
+      override = null
+      return
+    }
+    override = { state: 'loading' }
+    void (async () => {
+      try {
+        const doc = await openDocument(
+          source,
+          untrack(() => ({
+            assets,
+            password: pw,
+            defaults: defaults ?? (ref ? cssVariableDefaults(ref) : undefined),
+            // Controlled hosts get the snapshot history; core's own stack stays off.
+            history: controlledProp ? false : (historyProp ?? true),
+            annotations: controlledProp
+              ? {
+                  mode: 'controlled' as const,
+                  initial: annotations ?? [],
+                  onChange: (next: Annotation[], change: AnnotationChange) => {
+                    // A proposal made in the tick this root unmounts or reopens never reaches
+                    // the host. Writing the bindable hands it to a bound host now; the effect
+                    // below pushes the applied list to the store in Svelte's next effect flush.
+                    if (cancelled) return
+                    annotations = next
+                    onAnnotationsChange?.(next)
+                    onChange?.(change)
+                  },
+                }
+              : { mode: 'uncontrolled' as const },
+          }))
+        )
+        if (cancelled) {
+          doc.destroy()
+          return
+        }
+        opened = doc
+        // The prop may have changed while the file loaded, when there was no store to apply it to.
+        const current = untrack(() => annotations)
+        if (doc.annotations.mode === 'controlled' && current !== undefined)
+          doc.annotations.setControlledValue(current)
+        document = doc
+        override = null
+        setTestHook(ref, doc)
+        const s = doc.status.get()
+        if (s.state === 'ready') onReady?.(doc)
+        else if (s.state === 'error') onError?.(s.error)
+      } catch (cause) {
+        if (cancelled) return
+        const error =
+          cause instanceof InkErrorClass
+            ? cause
+            : new InkErrorClass(
+                'InvalidPdf',
+                cause instanceof Error ? cause.message : String(cause),
+                {},
+                cause
+              )
+        override = { state: 'error', error }
+        onError?.(error)
+      }
+    })()
+    return () => {
+      cancelled = true
+      opened?.destroy()
+      document = null
+      setTestHook(ref, undefined)
+    }
+  })
+
+  // The host's list reaches the store; the echo of a proposal it applied is the same list.
+  $effect(() => {
+    const list = annotations
+    const doc = document
+    if (list && doc?.annotations.mode === 'controlled')
+      untrack(() => doc.annotations.setControlledValue(list))
+  })
+
+  function setTool(id: ToolId): void {
+    tool = id
+    onToolChange?.(id)
+  }
+  function setActivated(id: string | null): void {
+    activated = id
+    activatedNow = id
+    if (id) onActivate?.(id)
+  }
+  function reportZoom(z: ZoomValue): void {
+    zoom = z
+    onZoomChange?.(z)
+  }
+  function reportPage(p: number): void {
+    page = p
+    onPageChange?.(p)
+  }
+
+  const snapCanUndo = useReadable(() => snapshotHistory.canUndo, false)
+  const snapCanRedo = useReadable(() => snapshotHistory.canRedo, false)
+  const coreCanUndo = useReadable(() => document?.history.canUndo, false)
+  const coreCanRedo = useReadable(() => document?.history.canRedo, false)
+  const inkHistory: InkHistory = {
+    get canUndo() {
+      return controlled ? historyEnabled && snapCanUndo.current : coreCanUndo.current
+    },
+    get canRedo() {
+      return controlled ? historyEnabled && snapCanRedo.current : coreCanRedo.current
+    },
+    undo: () => (controlled ? snapshotHistory.undo() : document?.history.undo()),
+    redo: () => (controlled ? snapshotHistory.redo() : document?.history.redo()),
+    clear: () => (controlled ? snapshotHistory.clear() : document?.history.clear()),
+    batch: (fn) => {
+      if (controlled) snapshotHistory.batch(fn)
+      else if (document) document.history.batch(fn)
+      else fn()
+    },
+  }
+
+  const context: InkContext = {
+    get assets() {
+      return assets
+    },
+    get document() {
+      return document
+    },
+    get status() {
+      return status
+    },
+    get annotations() {
+      return annotationList.current
+    },
+    get selection() {
+      return selection.current
+    },
+    get viewport() {
+      return viewport
+    },
+    get tools() {
+      return tools
+    },
+    get tool() {
+      return currentTool
+    },
+    setTool,
+    get zoomModel() {
+      return zoom
+    },
+    get pageModel() {
+      return page
+    },
+    reportZoom,
+    reportPage,
+    get activated() {
+      return activated
+    },
+    setActivated,
+    history: inkHistory,
+    get rootEl() {
+      return ref
+    },
+    setViewport(vp, tc) {
+      viewport = vp
+      tools = tc
+    },
+  }
+  setInkContext(context, () => activatedNow)
+
+  // Instance exports, for hosts that `bind:this`. Svelte exposes constants and functions, not
+  // getters, so the document and status are read through functions.
+  export const history = inkHistory
+  export function getDocument(): InkDocument | null {
+    return document
+  }
+  export function getStatus(): InkStatus {
+    return status
+  }
+
+  /** For the `child` snippet: captures the host's element the way `bind:this` would. */
+  const attachRoot = {
+    [createAttachmentKey()]: (node: HTMLElement) => {
+      ref = node
+      return () => {
+        ref = null
+      }
+    },
+  }
+</script>
+
+{#if child}
+  {@render child({
+    props: { ...rest, 'data-ink-root': '', 'data-state': status.state, ...attachRoot },
+  })}
+{:else}
+  <div bind:this={ref} {...rest} data-ink-root="" data-state={status.state}>
+    {@render children?.({ status, document })}
+  </div>
+{/if}

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

@@ -0,0 +1,51 @@
+import type { ChildSnippet } from './child-snippet.js';
+import type { Annotation, AnnotationChange, AnnotationDefaults, DocumentSource, InkDocument, InkError, InkStatus, PdfAssets } from '@inkbar/core';
+import type { ToolId, ZoomValue } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange' | 'onerror'> {
+    src: DocumentSource | null;
+    assets: PdfAssets;
+    password?: string | undefined;
+    /** Colour defaults. Without it, the theme's CSS variables on the root element apply. */
+    defaults?: AnnotationDefaults | undefined;
+    /**
+     * Pass (with `bind:`) to put annotations under the host's control. The mode is fixed when a
+     * document opens: passing or dropping this prop later takes effect on the next open. A host
+     * that decides on each proposal uses a function binding.
+     */
+    annotations?: Annotation[] | undefined;
+    onAnnotationsChange?: ((next: Annotation[]) => void) | undefined;
+    onChange?: ((change: AnnotationChange) => void) | undefined;
+    tool?: ToolId | undefined;
+    onToolChange?: ((tool: ToolId) => void) | undefined;
+    page?: number | undefined;
+    onPageChange?: ((page: number) => void) | undefined;
+    zoom?: ZoomValue | undefined;
+    onZoomChange?: ((zoom: ZoomValue) => void) | undefined;
+    /** Undo history. Defaults to on for uncontrolled, off for controlled. */
+    history?: boolean | undefined;
+    onReady?: ((doc: InkDocument) => void) | undefined;
+    onError?: ((error: InkError) => void) | undefined;
+    onActivate?: ((id: string) => void) | undefined;
+    /** The root element, for hosts that bind it. */
+    ref?: HTMLElement | null;
+    children?: Snippet<[{
+        status: InkStatus;
+        document: InkDocument | null;
+    }]>;
+    /**
+     * Render your own root element: spread `props` on it and put your content inside. The
+     * context is still provided, so Inkbar components work inside it.
+     */
+    child?: ChildSnippet;
+}
+import { type InkHistory } from '../context.js';
+declare const InkRoot: import("svelte").Component<InkRootProps, {
+    history: InkHistory;
+    getDocument: () => InkDocument | null;
+    getStatus: () => InkStatus;
+}, "page" | "annotations" | "tool" | "zoom" | "ref">;
+type InkRoot = ReturnType<typeof InkRoot>;
+export default InkRoot;
+//# sourceMappingURL=InkRoot.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkRoot.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,UAAU,GAAG,SAAS,CACpC;IACC,GAAG,EAAE,cAAc,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,wFAAwF;IACxF,QAAQ,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,SAAS,CAAA;IACtC,mBAAmB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAChE,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACnD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACtD,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAClD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACjD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC/C,gDAAgD;IAChD,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,SAAS,CAAC;QAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAA;IACzE;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;CACrB;AAaH,OAAO,EAAkC,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAqT/E,QAAA,MAAM,OAAO;;uBAhCc,WAAW,GAAG,IAAI;qBAGpB,SAAS;oDA6BmB,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/InkSuggestionCard.svelte

@@ -0,0 +1,121 @@
+<script module lang="ts">
+  import type { SuggestionCardSlotProps } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+
+  export interface InkSuggestionCardProps {
+    children?: Snippet<[SuggestionCardSlotProps]> | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * Review card for a suggested redaction: opens when the activated annotation, or the only
+   * selected one, is a redaction with `origin: 'suggested'`. Locked suggestions cannot be
+   * dismissed, so they get no Dismiss button. A press on the overlay selects and activates, so a
+   * click opens it whatever the tool. Closing clears `activated` and the selection.
+   */
+  import { confidenceBucket } from '@inkbar/core'
+  import { Popover } from 'bits-ui'
+
+  import { useInkContext } from '../context.js'
+  import { useAnnotations } from '../hooks/useAnnotations.svelte.js'
+
+  import { useAnnotationElement } from './annotation-element.svelte.js'
+  import { keepOpenOnAnnotation, useFocusReturn } from './popover-focus.js'
+
+  import type { ConfidenceBucket, RedactAnnotation } from '@inkbar/core'
+
+  let { children }: InkSuggestionCardProps = $props()
+
+  const ctx = useInkContext('InkSuggestionCard')
+  const store = useAnnotations()
+
+  function suggestion(id: string | null | undefined): RedactAnnotation | null {
+    const a = id ? store.annotations.find((x) => x.id === id) : undefined
+    return a?.type === 'redact' && a.origin === 'suggested' ? a : null
+  }
+  // The activated annotation when it is a suggestion; otherwise the only selected one (a
+  // marquee selects without activating).
+  const target = $derived(
+    suggestion(ctx.activated) ??
+      (store.selection.length === 1 ? suggestion(store.selection[0]) : null)
+  )
+  const anchorRef = useAnnotationElement(
+    () => ctx.rootEl,
+    () => target?.id ?? null
+  )
+  const anchor = $derived(anchorRef.current)
+  const focusReturn = useFocusReturn(ctx)
+  const open = $derived(target !== null && anchor !== null)
+  const bucket = $derived<ConfidenceBucket | undefined>(
+    target?.suggestion ? confidenceBucket(target.suggestion.confidence) : undefined
+  )
+
+  function close(): void {
+    ctx.setActivated(null)
+    store.select([])
+  }
+  function accept(): void {
+    if (target) store.accept(target.id)
+    close()
+  }
+  /** Locked annotations cannot be removed: dismissing one does nothing and keeps the card. */
+  function dismiss(): void {
+    if (!target || target.locked) return
+    focusReturn.beforeRemove(anchor, '[data-origin="suggested"]')
+    store.dismiss(target.id)
+    close()
+  }
+  function onOpenChange(next: boolean): void {
+    if (!next) close()
+  }
+</script>
+
+<Popover.Root bind:open={() => open, onOpenChange}>
+  <Popover.Portal>
+    {#if target && anchor}
+      <Popover.Content
+        class="ink-suggestion-card"
+        data-ink-suggestion-card=""
+        role="dialog"
+        side="bottom"
+        sideOffset={6}
+        collisionPadding={8}
+        aria-label="Suggested redaction"
+        customAnchor={anchor}
+        onInteractOutside={keepOpenOnAnnotation}
+        onOpenAutoFocus={focusReturn.onOpenAutoFocus}
+        onCloseAutoFocus={(e) => focusReturn.onCloseAutoFocus(e, anchor)}
+      >
+        {#if children}
+          {@render children({
+            annotation: target,
+            suggestion: target.suggestion,
+            bucket,
+            accept,
+            dismiss,
+            close,
+          })}
+        {:else}
+          <p class="ink-suggestion-reason">
+            <strong>{target.suggestion?.reason ?? 'Suggested redaction'}</strong>
+            {#if bucket}
+              <span class="ink-suggestion-confidence" data-confidence={bucket}>
+                {bucket} confidence
+              </span>
+            {/if}
+          </p>
+          {#if target.suggestion?.explanation}
+            <p class="ink-suggestion-explanation">{target.suggestion.explanation}</p>
+          {/if}
+          <div class="ink-suggestion-actions">
+            <button type="button" onclick={accept}>Accept</button>
+            {#if !target.locked}
+              <button type="button" onclick={dismiss}>Dismiss</button>
+            {/if}
+          </div>
+        {/if}
+      </Popover.Content>
+    {/if}
+  </Popover.Portal>
+</Popover.Root>

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

@@ -0,0 +1,9 @@
+import type { SuggestionCardSlotProps } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+export interface InkSuggestionCardProps {
+    children?: Snippet<[SuggestionCardSlotProps]> | undefined;
+}
+declare const InkSuggestionCard: import("svelte").Component<InkSuggestionCardProps, {}, "">;
+type InkSuggestionCard = ReturnType<typeof InkSuggestionCard>;
+export default InkSuggestionCard;
+//# sourceMappingURL=InkSuggestionCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSuggestionCard.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSuggestionCard.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC,GAAG,SAAS,CAAA;CAC1D;AAwHH,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/InkToolButton.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">
+  import type { ChildSnippet } from './child-snippet.js'
+  import type { ToolId } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  export interface InkToolButtonProps extends Omit<HTMLButtonAttributes, 'children'> {
+    tool: ToolId
+    label?: string | undefined
+    children?: Snippet<[{ active: boolean; label: string }]> | undefined
+    child?: ChildSnippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  import { TOOL_LABELS } from '@inkbar/core/dom'
+  import { Toolbar } from 'bits-ui'
+
+  import { useTool } from '../hooks/useTool.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+
+  let {
+    tool,
+    label,
+    class: className,
+    children,
+    child,
+    onclick,
+    ...rest
+  }: InkToolButtonProps = $props()
+
+  const current = useTool()
+  const active = $derived(current.tool === tool)
+  const name = $derived(label ?? TOOL_LABELS[tool])
+</script>
+
+<Toolbar.Button
+  class={['ink-tool-button', className]}
+  data-ink-tool-button=""
+  data-tool={tool}
+  data-state={active ? 'on' : 'off'}
+  aria-pressed={active}
+  aria-label={name}
+  title={name}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) current.setTool(tool)
+  }}
+>
+  {#if children}{@render children({ active, label: name })}{:else}{name}{/if}
+</Toolbar.Button>