@inkbar/svelte 0.8.0 → 0.10.0

package/dist/components/InkThumbnail.svelte

@@ -0,0 +1,74 @@
+<script module lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkThumbnailProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** 0-based. */
+    page: number
+    /** Width in CSS pixels; the height follows the page. Default 120 unless `height` is given. */
+    width?: number | undefined
+    /** Height in CSS pixels; the width follows the page. */
+    height?: number | undefined
+    /** Draw the page's annotations. Default true. */
+    annotations?: boolean | undefined
+    /** Draw plugin marks. Default true. */
+    marks?: boolean | undefined
+    /** The accessible name. Default "Page N". */
+    label?: string | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * One page as a static image, with its live annotations and plugin marks: core's thumbnail
+   * painter on this element, which sizes it, names it ("Page N" unless `label` says otherwise)
+   * and draws it once it nears the visible area. It is not focusable and does nothing on click:
+   * wrap it in the control you need. Inside `InkRoot`; it renders empty on the server.
+   */
+  import { createThumbnailPainter, type ThumbnailPainter } from '@inkbar/core/dom'
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { toReadable } from '../to-readable.svelte.js'
+
+  let {
+    page,
+    width,
+    height,
+    annotations = true,
+    marks = true,
+    label,
+    class: className,
+    ...rest
+  }: InkThumbnailProps = $props()
+
+  const ctx = useInkContext('InkThumbnail')
+  const deps = {
+    document: toReadable(() => ctx.document),
+    pluginHost: toReadable(() => ctx.pluginHost),
+  }
+  const options = () => ({ page, width, height, annotations, marks, label })
+
+  let el = $state<HTMLDivElement | null>(null)
+  let painter: ThumbnailPainter | null = null
+  // Before the painter is made, so a new painter does not take its first options twice.
+  $effect(() => {
+    const next = options()
+    untrack(() => painter?.update(next))
+  })
+  $effect(() => {
+    const target = el
+    if (!target) return
+    const p = untrack(() => createThumbnailPainter(target, deps, options()))
+    painter = p
+    return () => {
+      p.destroy()
+      painter = null
+    }
+  })
+</script>
+
+<!-- The class is the painter's too: kept here, a re-render never drops it. -->
+<div {...rest} bind:this={el} class={['ink-thumbnail', className]}></div>

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 0-based. */
+    page: number;
+    /** Width in CSS pixels; the height follows the page. Default 120 unless `height` is given. */
+    width?: number | undefined;
+    /** Height in CSS pixels; the width follows the page. */
+    height?: number | undefined;
+    /** Draw the page's annotations. Default true. */
+    annotations?: boolean | undefined;
+    /** Draw plugin marks. Default true. */
+    marks?: boolean | undefined;
+    /** The accessible name. Default "Page N". */
+    label?: string | undefined;
+}
+declare const InkThumbnail: import("svelte").Component<InkThumbnailProps, {}, "">;
+type InkThumbnail = ReturnType<typeof InkThumbnail>;
+export default InkThumbnail;
+//# sourceMappingURL=InkThumbnail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkThumbnail.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,eAAe;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACjC,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B;AAmEH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InkThumbnails.svelte

@@ -0,0 +1,146 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkThumbnailsProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** 0-based pages to list, in order. Default: every page. */
+    pages?: readonly number[] | undefined
+    /** Thumbnail width in CSS pixels. Default: the list's width less a 16px gutter each side. */
+    width?: number | undefined
+    /** Draw each page's annotations. Default true. */
+    annotations?: boolean | undefined
+    /** Draw plugin marks. Default true. */
+    marks?: boolean | undefined
+    /**
+     * Renders inside each item, after its page number. The item's height is fixed from the
+     * page's, so keep what you add out of the flow (position it absolutely) or small.
+     */
+    item?: Snippet<[{ page: number; current: boolean }]> | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * The pages as a list of thumbnails: `createThumbnails`' markup on core's thumbnails
+   * controller, which holds the current page, the keys, the clicks, the Tab stop and the window.
+   * Only the items near the visible part are mounted, each placed at its offset over a spacer of
+   * the full height, and each holds an `InkThumbnail`. An item is a button that scrolls the
+   * viewport to its page; the current page's has `aria-current="page"`. Inside `InkRoot`; it
+   * renders empty on the server.
+   */
+  import {
+    createThumbnailsController,
+    THUMBNAIL_WIDTH,
+    type ThumbnailsController,
+    type ThumbnailsState,
+  } from '@inkbar/core/dom'
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { toReadable } from '../to-readable.svelte.js'
+
+  import InkThumbnail from './InkThumbnail.svelte'
+
+  let {
+    pages,
+    width,
+    annotations = true,
+    marks = true,
+    item,
+    class: className,
+    ...rest
+  }: InkThumbnailsProps = $props()
+
+  const ctx = useInkContext('InkThumbnails')
+  const deps = {
+    document: toReadable(() => ctx.document),
+    pluginHost: toReadable(() => ctx.pluginHost),
+    viewport: toReadable(() => ctx.viewport),
+  }
+  const options = () => ({ pages, width, annotations, marks })
+
+  let scroller = $state<HTMLDivElement | null>(null)
+  let controller = $state.raw<ThumbnailsController | null>(null)
+  /** Until the list mounts, and on the server: nothing listed. */
+  let listed = $state.raw<ThumbnailsState>({
+    pages: [],
+    current: -1,
+    window: { start: 0, end: 0 },
+    offsets: [0],
+    width: THUMBNAIL_WIDTH,
+  })
+
+  // A list unchanged in content publishes nothing, so an inline `pages` array cannot loop.
+  $effect(() => {
+    const c = controller
+    const next = options()
+    if (c) untrack(() => c.update(next))
+  })
+  $effect(() => {
+    const el = scroller
+    if (!el) return
+    return untrack(() => {
+      const c = createThumbnailsController(deps, options())
+      controller = c
+      listed = c.state.get()
+      const stop = c.state.subscribe((s) => {
+        listed = s
+      })
+      c.attach(el)
+      return () => {
+        stop()
+        c.destroy()
+        controller = null
+      }
+    })
+  })
+
+  const items = $derived.by(() => {
+    const { pages: list, current, window, offsets } = listed
+    return list.slice(window.start, window.end).map((page, k) => {
+      const top = offsets[window.start + k]!
+      const bottom = offsets[window.start + k + 1]!
+      // Only a mounted controller has a window, so `controller` is set here.
+      const attrs = controller?.itemAttrs(window.start + k) ?? {}
+      return { page, current: page === current, top, height: bottom - top, attrs }
+    })
+  })
+</script>
+
+<div
+  {...rest}
+  bind:this={scroller}
+  class={['ink-thumbnails', className]}
+  data-ink-thumbnails=""
+  role="list"
+>
+  <div
+    class="ink-thumbnails-spacer"
+    aria-hidden="true"
+    style:height="{listed.offsets.at(-1) ?? 0}px"
+  ></div>
+  {#each items as entry (entry.page)}
+    <div
+      class="ink-thumbnails-entry"
+      {...entry.attrs}
+      style:top="{entry.top}px"
+      style:height="{entry.height}px"
+    >
+      <!-- The controller sets the tabindex. The thumbnail names the button "Page N"; the
+           visible number repeats it. -->
+      <button
+        type="button"
+        class="ink-thumbnails-item"
+        data-ink-thumbnail-item={entry.page}
+        aria-current={entry.current ? 'page' : undefined}
+      >
+        <InkThumbnail page={entry.page} width={listed.width} {annotations} {marks} />
+        <span class="ink-thumbnails-label" aria-hidden="true">{entry.page + 1}</span>
+        {@render item?.({ page: entry.page, current: entry.current })}
+      </button>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkThumbnailsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 0-based pages to list, in order. Default: every page. */
+    pages?: readonly number[] | undefined;
+    /** Thumbnail width in CSS pixels. Default: the list's width less a 16px gutter each side. */
+    width?: number | undefined;
+    /** Draw each page's annotations. Default true. */
+    annotations?: boolean | undefined;
+    /** Draw plugin marks. Default true. */
+    marks?: boolean | undefined;
+    /**
+     * Renders inside each item, after its page number. The item's height is fixed from the
+     * page's, so keep what you add out of the flow (position it absolutely) or small.
+     */
+    item?: Snippet<[{
+        page: number;
+        current: boolean;
+    }]> | undefined;
+}
+declare const InkThumbnails: import("svelte").Component<InkThumbnailsProps, {}, "">;
+type InkThumbnails = ReturnType<typeof InkThumbnails>;
+export default InkThumbnails;
+//# sourceMappingURL=InkThumbnails.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkThumbnails.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACjC,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;CACjE;AAsHH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkToolButton.svelte

@@ -13,21 +13,12 @@
 </script>
 
 <script lang="ts">
-  import { TOOL_LABELS } from '@inkbar/core/dom'
-  import {
-    Highlighter,
-    MessageSquare,
-    PenLine,
-    PenTool,
-    Signature,
-    Square,
-    SquareDashedMousePointer,
-    TextCursor,
-    Type,
-  } from '@inkbar/icons'
+  import { TOOL_LABELS, withHostTools } from '@inkbar/core/dom'
+  import { SquareDashedMousePointer, TextCursor } from '@inkbar/icons'
   import { Toolbar } from 'bits-ui'
 
   import { useInkContext } from '../context.js'
+  import { useRegisteredTool } from '../hooks/useRegisteredTool.svelte.js'
   import { useTool } from '../hooks/useTool.svelte.js'
 
   import { asBitsProps } from './child-snippet.js'
@@ -38,15 +29,19 @@
   const ICONS: Readonly<Partial<Record<ToolId, IconNode>>> = {
     'select-text': TextCursor,
     select: SquareDashedMousePointer,
-    highlight: Highlighter,
-    'redact-area': Square,
-    sketch: PenTool,
-    draw: PenLine,
-    note: MessageSquare,
-    freetext: Type,
-    signature: Signature,
   }
 
+  // A tool nobody registered leaves the button disabled, hidden from assistive tech, unnamed
+  // and inert, whatever the host passed.
+  const MISSING = {
+    disabled: true,
+    'aria-hidden': 'true',
+    'aria-pressed': undefined,
+    'aria-label': undefined,
+    title: undefined,
+    onclick: undefined,
+  } as const
+
   let {
     tool,
     label,
@@ -60,9 +55,10 @@
   const ctx = useInkContext('InkToolButton')
   const current = useTool()
   const active = $derived(current.tool === tool)
-  /** A host or plugin tool by this id, for the name and icon core has none for. */
+  const registered = useRegisteredTool(() => tool)
+  /** The registered tool by this id, for the name and icon core has none for. */
   const own = $derived(
-    [...(ctx.hostTools ?? []), ...(ctx.pluginHost?.tools ?? [])].find(
+    withHostTools([...(ctx.hostTools ?? []), ...(ctx.pluginHost?.tools ?? [])]).find(
       (t) => t.id === tool
     )
   )
@@ -85,8 +81,11 @@
     onclick?.(e)
     if (!e.defaultPrevented) current.setTool(tool)
   }}
+  {...registered.current ? {} : MISSING}
 >
-  {#if children}{@render children({ active, label: name })}{:else if icon}<InkIcon
-      {icon}
-    />{/if}
+  {#if registered.current}
+    {#if children}{@render children({ active, label: name })}{:else if icon}<InkIcon
+        {icon}
+      />{/if}
+  {/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;AAqFH,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;AAoFH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/InkToolbarButton.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import type { ChildSnippet } from './child-snippet.js'
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  export interface InkToolbarButtonProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined
+  }
+</script>
+
+<!--
+  Your own button in an `InkToolbar`. It joins the toolbar's arrow-key focus and takes the
+  theme's toolbar button styles; what it shows and does is up to you.
+-->
+<script lang="ts">
+  import { Toolbar } from 'bits-ui'
+
+  import { asBitsProps } from './child-snippet.js'
+
+  let { class: className, children, child, ...rest }: InkToolbarButtonProps = $props()
+</script>
+
+<Toolbar.Button
+  type="button"
+  class={['ink-toolbar-button', className]}
+  data-ink-toolbar-button=""
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+>
+  {@render children?.()}
+</Toolbar.Button>

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

@@ -0,0 +1,12 @@
+import type { ChildSnippet } from './child-snippet.js';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface InkToolbarButtonProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined;
+    /** Render your own button: spread `props` on it. */
+    child?: ChildSnippet | undefined;
+}
+declare const InkToolbarButton: import("svelte").Component<InkToolbarButtonProps, {}, "">;
+type InkToolbarButton = ReturnType<typeof InkToolbarButton>;
+export default InkToolbarButton;
+//# sourceMappingURL=InkToolbarButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkToolbarButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolbarButton.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,WAAW,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;AAwBH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/InkViewport.svelte

@@ -43,6 +43,7 @@
   import { untrack } from 'svelte'
 
   import { useInkContext } from '../context.js'
+  import { toolIdsOf } from '../hooks/useRegisteredTool.svelte.js'
 
   import InkFormAlert from './InkFormAlert.svelte'
   import InkPage from './InkPage.svelte'
@@ -115,6 +116,7 @@
     engine?.destroy()
     engine = null
     builtWith = null
+    ctx.setOpenedToolIds(null)
     ctx.setViewport(null, null)
     if (pages.length > 0) pages = []
     // Their fields and the document they came from are gone.
@@ -134,6 +136,8 @@
     build += 1
     const custom = !!annotation
     builtWith = { gap, buffer, custom }
+    // The tools this viewer registers, from the same inputs; a later `tools` waits for a rebuild.
+    ctx.setOpenedToolIds(toolIdsOf(ctx.hostTools, ctx.pluginHost))
     engine = mountViewer({
       container: el,
       document: doc,

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

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkViewport.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,GAAG,SAAS,CAAA;IACvD,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;CACrE;AAsWH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"InkViewport.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkViewport.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,GAAG,SAAS,CAAA;IACvD,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;CACrE;AA2WH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/InkZoomSelect.svelte

@@ -59,7 +59,7 @@
      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]}
+    class={['ink-select', 'ink-select-trigger', 'ink-zoom-select', className]}
     data-ink-zoom-select=""
     role="combobox"
     aria-label="Zoom"

package/dist/components/RecordCards.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  /*
+   * A record list's markup on core's record list controller, shared by `InkRecordList` and
+   * `InkSearchResults`: `createRecordList`'s `div.ink-records` holding `ul.ink-record-list` with
+   * one `li.ink-record` card per row, the empty text and a polite live region. The controller
+   * holds the rows, the count and the announcement, and handles the clicks, keys, Tab stop,
+   * focus and scrolling. Empty, with no empty text, until there is a source.
+   */
+  import {
+    createRecordListController,
+    type RecordListController,
+    type RecordListRow,
+    type RecordListSource,
+  } from '@inkbar/core/dom'
+  import { untrack, type Snippet } from 'svelte'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    source,
+    emptyShown = true,
+    empty,
+    oncount,
+    class: className,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    source: RecordListSource | null
+    /** Whether the empty text shows when there are no rows. Default true. */
+    emptyShown?: boolean | undefined
+    /** Replaces "Nothing here yet.". */
+    empty?: Snippet | undefined
+    /** Called with the number listed whenever it changes. */
+    oncount?: ((count: number) => void) | undefined
+  } = $props()
+
+  /** A focused action button whose row re-renders: where to put focus back if it goes. */
+  interface HeldFocus {
+    button: HTMLElement
+    id: string
+    index: number
+  }
+
+  const actionButtons = (row: Element): HTMLElement[] => [
+    ...row.querySelectorAll<HTMLElement>('.ink-card-actions > button'),
+  ]
+
+  let root = $state<HTMLDivElement | null>(null)
+  let controller = $state.raw<RecordListController | null>(null)
+  let rows = $state.raw<readonly RecordListRow[]>([])
+  let announcement = $state('')
+  const showEmpty = $derived(controller !== null && rows.length === 0 && emptyShown)
+
+  /** The count last reported, across sources. */
+  let reported: number | null = null
+  let held: HeldFocus | null = null
+
+  function report(count: number): void {
+    if (count === reported) return
+    reported = count
+    oncount?.(count)
+  }
+
+  /**
+   * Before the rows re-render under a focused action whose button goes (its card lost that
+   * action), note where it was; the effect below focuses the same place in the card, else the
+   * row. A row that goes is the controller's to re-home.
+   */
+  function holdActionFocus(el: HTMLElement): void {
+    const active = el.ownerDocument.activeElement
+    if (!(active instanceof HTMLButtonElement) || !el.contains(active)) return
+    const row = active.closest<HTMLElement>('[data-ink-record]')
+    const id = row?.dataset.inkRecord
+    if (!row || id === undefined) return
+    held = { button: active, id, index: actionButtons(row).indexOf(active) }
+  }
+
+  $effect(() => {
+    const el = root
+    const s = source
+    if (!el || !s) return
+    return untrack(() => {
+      const c = createRecordListController(s)
+      controller = c
+      rows = c.rows.get()
+      announcement = c.announcement.get()
+      report(c.count.get())
+      const stops = [
+        c.rows.subscribe((next) => {
+          holdActionFocus(el)
+          rows = next
+        }),
+        c.count.subscribe(report),
+        c.announcement.subscribe((text) => {
+          announcement = text
+        }),
+      ]
+      const detach = c.attach(el)
+      return () => {
+        for (const stop of stops) stop()
+        detach()
+        c.destroy()
+        controller = null
+        rows = []
+        announcement = ''
+      }
+    })
+  })
+
+  // After the rows have re-rendered.
+  $effect(() => {
+    void rows
+    const el = root
+    untrack(() => {
+      const focus = held
+      held = null
+      if (!focus || !el || focus.button.isConnected) return
+      const row = [...el.querySelectorAll<HTMLElement>('[data-ink-record]')].find(
+        (r) => r.dataset.inkRecord === focus.id
+      )
+      if (row) (actionButtons(row)[focus.index] ?? row).focus({ preventScroll: true })
+    })
+  })
+</script>
+
+<div
+  {...rest}
+  bind:this={root}
+  class={['ink-records', className]}
+  data-ink-records=""
+  tabindex="-1"
+>
+  <ul class="ink-record-list" role="list" hidden={rows.length === 0}>
+    <!-- The controller sets each row's tabindex. -->
+    {#each rows as { item, card, selected } (item.id)}
+      <li
+        class="ink-record"
+        data-ink-record={item.id}
+        aria-current={selected ? 'true' : undefined}
+        data-selected={selected ? '' : undefined}
+      >
+        <div class={['ink-card', card?.className]}>
+          {#if card}
+            <p class="ink-card-title">{card.title}</p>
+            {#if card.meta !== undefined}
+              <!-- prettier-ignore -->
+              <p class="ink-card-meta">{#if card.swatch !== undefined}<span class="ink-card-swatch" style:background={card.swatch}></span>{/if}{card.meta}</p>
+            {/if}
+            {#if card.body !== undefined}
+              <p class="ink-card-body">{card.body}</p>
+            {/if}
+            {#if card.excerpt !== undefined}
+              <!-- prettier-ignore -->
+              <p class="ink-card-excerpt">{card.excerpt.before}<mark>{card.excerpt.match}</mark>{card.excerpt.after}</p>
+            {/if}
+            <div class="ink-card-actions">
+              {#each Object.keys(card.actions) as label (label)}
+                <button type="button" onclick={() => controller?.act(item.id, label)}
+                  >{label}</button
+                >
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ul>
+  <p class="ink-record-list-empty" hidden={!showEmpty}>
+    {#if empty}{@render empty()}{:else}Nothing here yet.{/if}
+  </p>
+  <div class="ink-visually-hidden" aria-live="polite" data-ink-record-status="">
+    {announcement}
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+import { type RecordListSource } from '@inkbar/core/dom';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    source: RecordListSource | null;
+    /** Whether the empty text shows when there are no rows. Default true. */
+    emptyShown?: boolean | undefined;
+    /** Replaces "Nothing here yet.". */
+    empty?: Snippet | undefined;
+    /** Called with the number listed whenever it changes. */
+    oncount?: ((count: number) => void) | undefined;
+};
+declare const RecordCards: import("svelte").Component<$$ComponentProps, {}, "">;
+type RecordCards = ReturnType<typeof RecordCards>;
+export default RecordCards;
+//# sourceMappingURL=RecordCards.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCards.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/RecordCards.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAIH,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAA;AAC3B,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAA;AAE9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASrD,KAAK,gBAAgB,GAAI,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACzE,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,yDAAyD;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CAChD,CAAC;AA2IJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/SidebarTrigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  /*
+   * A sidebar trigger's content: `createSidebar`'s markup, so the theme styles both alike. The
+   * rail shows the icon alone (the trigger's `title` carries the label); tabs and stack headers
+   * show the label too. The badge is hidden from assistive technology: the trigger's name has it.
+   */
+  import { sidebarBadge, type SidebarPanelInfo } from '@inkbar/core/dom'
+
+  import InkIcon from './InkIcon.svelte'
+
+  let { panel, rail }: { panel: SidebarPanelInfo; rail: boolean } = $props()
+
+  const badge = $derived(sidebarBadge(panel.badge))
+</script>
+
+{#if panel.icon}<InkIcon icon={panel.icon} />{/if}{#if !panel.icon || !rail}<span
+    class="ink-sidebar-label">{panel.label}</span
+  >{/if}<span class="ink-sidebar-badge" aria-hidden="true" hidden={badge === null}
+  >{badge}</span
+>