@inkbar/svelte 0.9.0 → 0.11.0

package/dist/components/InkSearchResults.svelte

@@ -0,0 +1,72 @@
+<script module lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkSearchResultsProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** Show the query field. Default true; turn it off when a find bar is on the page. */
+    field?: boolean | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * The search hits as a list of cards, for a sidebar panel: `createSearchResults` on core's
+   * record list controller over the root's search. One card per hit, with its page and the text
+   * around it. Choosing a card makes its hit current, as the find bar's next and previous do, and
+   * the current hit is the selected card. Above the cards, a query field (`field={false}`
+   * leaves it out when a find bar is on the page); under them, the find bar's match count.
+   * Field and find bar share the search state, so they never disagree. It fills its parent's
+   * height. Inside `InkRoot`; it renders empty on the server.
+   */
+  import {
+    findCountText,
+    handleResultsFieldKey,
+    isBlankQuery,
+    searchSource,
+  } from '@inkbar/core/dom'
+  import { Search } from '@inkbar/icons'
+
+  import { useInkContext } from '../context.js'
+  import { useSearch } from '../hooks/useSearch.svelte.js'
+
+  import InkIcon from './InkIcon.svelte'
+  import RecordCards from './RecordCards.svelte'
+
+  let { field = true, class: className, ...rest }: InkSearchResultsProps = $props()
+
+  const ctx = useInkContext('InkSearchResults')
+  const search = useSearch()
+  const source = $derived(ctx.search ? searchSource(ctx.search) : null)
+  // Nothing found yet is the count's to say while a query is in: "No results", or a scan.
+  const blank = $derived(isBlankQuery(search.state.query))
+</script>
+
+<div {...rest} class={['ink-search-results', className]} data-ink-search-results="">
+  {#if field}
+    <div class="ink-search-results-bar" role="search">
+      <!-- The field is the search state's: a query typed in the find bar shows here. -->
+      <div class="ink-input-group">
+        <span class="ink-input-accessory"><InkIcon icon={Search} /></span>
+        <input
+          type="text"
+          aria-label="Find in document"
+          placeholder="Search for a word or phrase"
+          autocomplete="off"
+          spellcheck={false}
+          value={search.state.query}
+          oninput={(e) => search.setQuery(e.currentTarget.value)}
+          onkeydown={(e) => handleResultsFieldKey(e, search)}
+        />
+      </div>
+    </div>
+  {/if}
+  <RecordCards {source} emptyShown={blank}>
+    {#snippet empty()}Search to list every match.{/snippet}
+  </RecordCards>
+  <!-- A footer under the cards, hidden while empty. -->
+  <div class="ink-search-results-count" data-ink-search-results-count="">
+    {findCountText(search.state)}
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkSearchResultsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Show the query field. Default true; turn it off when a find bar is on the page. */
+    field?: boolean | undefined;
+}
+declare const InkSearchResults: import("svelte").Component<InkSearchResultsProps, {}, "">;
+type InkSearchResults = ReturnType<typeof InkSearchResults>;
+export default InkSearchResults;
+//# sourceMappingURL=InkSearchResults.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSearchResults.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSearchResults.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5B;AAqEH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/InkSidebar.svelte

@@ -0,0 +1,179 @@
+<script module lang="ts">
+  import type { SidebarLayout, SidebarOpen, SidebarSide } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkSidebarProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** Which edge the rail and border sit on. Default `'left'`. */
+    side?: SidebarSide | undefined
+    /** `'rail'` (default), `'tabs'` or `'stack'`. */
+    layout?: SidebarLayout | undefined
+    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */
+    visible?: boolean | undefined
+    /**
+     * Bindable: the open panel's id (or null) for rail and tabs, the expanded ids for stack.
+     * Left out, the first panel starts open.
+     */
+    open?: SidebarOpen | undefined
+    /** The `InkPanel`s. */
+    children?: Snippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * A sidebar of `InkPanel`s: `createSidebar`'s markup on core's sidebar controller, which holds
+   * the open state, the ARIA, the keys and the clicks. Rail and tabs render their triggers here;
+   * in a stack each panel renders its own header. Panels register as they initialise and take
+   * their place in DOM order once mounted, so a panel added later with `{#if}` slots in where
+   * it stands. A closed panel stays mounted and hidden, and the panels' content stays in place
+   * across layouts, so its state survives switching.
+   *
+   * `bind:open` is the open panel's id (or null) for rail and tabs, and the expanded ids for
+   * stack. Left out, the first panel starts open. It needs no document, so it works outside
+   * `InkRoot`. The server renders the root, the panels (the open one shown) and the stack
+   * headers; rail and tab buttons follow once mounted, as the panels register after the root
+   * has rendered.
+   */
+  import { createSidebarController } from '@inkbar/core/dom'
+  import { untrack } from 'svelte'
+
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import { setSidebarContext, type SidebarPanelEntry } from './sidebar-context.js'
+  import SidebarTrigger from './SidebarTrigger.svelte'
+
+  let {
+    side = 'left',
+    layout = 'rail',
+    visible = true,
+    open = $bindable(),
+    class: className,
+    children,
+    ...rest
+  }: InkSidebarProps = $props()
+
+  // The same ids on the server and the client.
+  const idPrefix = $props.id()
+
+  let entries = $state.raw<SidebarPanelEntry[]>([])
+  const infos = () => entries.map((e) => e.info())
+
+  // Pending until mounted: the panels register one by one as they initialise, and an open id
+  // not registered yet is not a removed panel.
+  const controller = untrack(() =>
+    createSidebarController({
+      layout,
+      side,
+      visible,
+      panels: [],
+      ...(open !== undefined && { open }),
+      pending: true,
+      onOpenChange: (value) => {
+        open = value
+      },
+      idPrefix,
+    })
+  )
+  const current = useReadable(() => controller.state, controller.state.get())
+  // Destroyed before the panels go: this pre-effect comes before the template's, so its
+  // teardown runs first. Unregistering into a live controller would take each panel for a
+  // removed one and write the fallback to the bound `open`.
+  $effect.pre(() => () => controller.destroy())
+
+  // Before the DOM updates, so the panels render the attributes these give.
+  $effect.pre(() => {
+    const next = { layout, side, visible, open }
+    untrack(() =>
+      controller.update({
+        layout: next.layout,
+        side: next.side,
+        visible: next.visible,
+        ...(next.open !== undefined && { open: next.open }),
+      })
+    )
+  })
+  // A panel's label, icon or badge changing.
+  $effect.pre(() => {
+    const panels = infos()
+    untrack(() => controller.update({ panels }))
+  })
+
+  // Panels register while they initialise, inside the parent's render: untracked, so the
+  // writes are not taken for state changed by a template expression. On the server too.
+  function register(entry: SidebarPanelEntry): () => void {
+    untrack(() => {
+      entries = [...entries, entry]
+      controller.update({ panels: infos() })
+    })
+    return () =>
+      untrack(() => {
+        entries = entries.filter((e) => e !== entry)
+        controller.update({ panels: infos() })
+      })
+  }
+
+  function arrange(): void {
+    untrack(() => {
+      const list = entries
+      const sorted = [...list].sort((a, b) => {
+        const x = a.element()
+        const y = b.element()
+        if (!x || !y || x === y) return 0
+        return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+      })
+      if (sorted.some((e, i) => e !== list[i])) {
+        entries = sorted
+        controller.update({ panels: infos() })
+      }
+    })
+  }
+
+  setSidebarContext({ controller, state: current, register, arrange })
+
+  const view = $derived.by(() => {
+    const s = current.current
+    return {
+      layout: s.layout,
+      root: controller.rootAttrs(),
+      tablist: controller.tablistAttrs(),
+      triggers: s.panels.map((panel) => ({
+        panel,
+        attrs: controller.triggerAttrs(panel.id),
+      })),
+    }
+  })
+
+  let root = $state<HTMLDivElement | null>(null)
+  // The controller handles the triggers' clicks and keys, stack headers included. The panels
+  // have registered by now.
+  $effect(() => {
+    const el = root
+    if (!el) return
+    const unbind = untrack(() => controller.bindTriggers(el))
+    untrack(() => controller.update({ pending: false }))
+    return unbind
+  })
+</script>
+
+<div {...rest} bind:this={root} class={['ink-sidebar', className]} {...view.root}>
+  {#if view.layout !== 'stack'}
+    <div
+      class={view.layout === 'rail' ? 'ink-sidebar-rail' : 'ink-sidebar-tabs'}
+      {...view.tablist}
+    >
+      {#each view.triggers as t (t.panel.id)}
+        <button {...t.attrs}>
+          <SidebarTrigger panel={t.panel} rail={view.layout === 'rail'} />
+        </button>
+      {/each}
+    </div>
+  {/if}
+  <!-- One element in every layout, so the panels are never remounted. -->
+  <div class={{ 'ink-sidebar-panels': view.layout !== 'stack' }}>
+    {@render children?.()}
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+import type { SidebarLayout, SidebarOpen, SidebarSide } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkSidebarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which edge the rail and border sit on. Default `'left'`. */
+    side?: SidebarSide | undefined;
+    /** `'rail'` (default), `'tabs'` or `'stack'`. */
+    layout?: SidebarLayout | undefined;
+    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */
+    visible?: boolean | undefined;
+    /**
+     * Bindable: the open panel's id (or null) for rail and tabs, the expanded ids for stack.
+     * Left out, the first panel starts open.
+     */
+    open?: SidebarOpen | undefined;
+    /** The `InkPanel`s. */
+    children?: Snippet | undefined;
+}
+declare const InkSidebar: import("svelte").Component<InkSidebarProps, {}, "open">;
+type InkSidebar = ReturnType<typeof InkSidebar>;
+export default InkSidebar;
+//# sourceMappingURL=InkSidebar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSidebar.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,iDAAiD;IACjD,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IAClC,wHAAwH;IACxH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAwKH,QAAA,MAAM,UAAU,yDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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/InkViewport.svelte

@@ -14,6 +14,8 @@
     gap?: number
     /** Pages kept mounted either side of the visible ones. */
     buffer?: number
+    /** Pinch to zoom the pages. Off leaves the browser's own touch handling alone. */
+    pinchZoom?: boolean
     loading?: Snippet | undefined
     empty?: Snippet | undefined
     error?: Snippet<[{ error: InkError }]> | undefined
@@ -63,6 +65,7 @@
     rotation = 0,
     gap = 16,
     buffer = 2,
+    pinchZoom = true,
     loading,
     empty,
     error,
@@ -100,7 +103,12 @@
    */
   let build = 0
   /** The construction options the engine was last built with, so a rebuild runs only on a change. */
-  let builtWith: { gap: number; buffer: number; custom: boolean } | null = null
+  let builtWith: {
+    gap: number
+    buffer: number
+    pinchZoom: boolean
+    custom: boolean
+  } | null = null
   let stops: (() => void)[] = []
   /** The zoom and page last reported to the host. */
   let lastReportedZoom: ZoomValue | undefined
@@ -135,7 +143,7 @@
     let first = true
     build += 1
     const custom = !!annotation
-    builtWith = { gap, buffer, custom }
+    builtWith = { gap, buffer, pinchZoom, 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({
@@ -147,6 +155,7 @@
       rotation,
       gap,
       buffer,
+      pinchZoom,
       tool: ctx.tool,
       ...(ctx.hostTools ? { tools: ctx.hostTools } : {}),
       // The engine adds the plugins' tools and layers, and decorates through the host, which
@@ -253,7 +262,7 @@
 
   // Construction-only options rebuild the engine for the same document, keeping zoom and page.
   // The deriveds notify only on a real change: a host that spreads its props invalidates `gap`
-  // and `buffer` without changing them. One effect for all three, so a gap and a snippet change
+  // and `buffer` without changing them. One effect for all of them, so a gap and a snippet change
   // in the same tick rebuild once. It skips its first run (and any run after a build that
   // already used these values) by comparing with `builtWith`.
   //
@@ -264,15 +273,22 @@
   // `pages` for the new build's pages. The rebuild keeps the scroll position.
   const buildGap = $derived(gap)
   const buildBuffer = $derived(buffer)
+  const buildPinchZoom = $derived(pinchZoom)
   const buildCustom = $derived(!!annotation)
   $effect(() => {
-    const next = { gap: buildGap, buffer: buildBuffer, custom: buildCustom }
+    const next = {
+      gap: buildGap,
+      buffer: buildBuffer,
+      pinchZoom: buildPinchZoom,
+      custom: buildCustom,
+    }
     untrack(() => {
       const built = builtWith
       if (!engine || !built) return
       if (
         built.gap === next.gap &&
         built.buffer === next.buffer &&
+        built.pinchZoom === next.pinchZoom &&
         built.custom === next.custom
       )
         return
@@ -281,6 +297,7 @@
       engine.rebuild({
         gap: next.gap,
         buffer: next.buffer,
+        pinchZoom: next.pinchZoom,
         customAnnotations: next.custom,
       })
     })

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

@@ -9,6 +9,8 @@ export interface InkViewportProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     gap?: number;
     /** Pages kept mounted either side of the visible ones. */
     buffer?: number;
+    /** Pinch to zoom the pages. Off leaves the browser's own touch handling alone. */
+    pinchZoom?: boolean;
     loading?: Snippet | undefined;
     empty?: Snippet | undefined;
     error?: Snippet<[{

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;AA2WH,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,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,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;AA0XH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}