@inkbar/svelte 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,17 @@
+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;
+}
+declare const InkToolButton: import("svelte").Component<InkToolButtonProps, {}, "">;
+type InkToolButton = ReturnType<typeof InkToolButton>;
+export default InkToolButton;
+//# sourceMappingURL=InkToolButton.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/InkToolbar.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import type { ChildSnippet } from './child-snippet.js'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkToolbarProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    label?: string | undefined
+    children?: Snippet | undefined
+    /** Render your own toolbar element: spread `props` on it and put the controls inside. */
+    child?: ChildSnippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  import { Toolbar } from 'bits-ui'
+
+  import { asBitsProps } from './child-snippet.js'
+
+  let {
+    label = 'Document tools',
+    class: className,
+    children,
+    child,
+    ...rest
+  }: InkToolbarProps = $props()
+</script>
+
+<Toolbar.Root
+  orientation="horizontal"
+  aria-label={label}
+  data-ink-toolbar=""
+  class={['ink-toolbar', className]}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+>
+  {@render children?.()}
+</Toolbar.Root>

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

@@ -0,0 +1,13 @@
+import type { ChildSnippet } from './child-snippet.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label?: string | undefined;
+    children?: Snippet | undefined;
+    /** Render your own toolbar element: spread `props` on it and put the controls inside. */
+    child?: ChildSnippet | undefined;
+}
+declare const InkToolbar: import("svelte").Component<InkToolbarProps, {}, "">;
+type InkToolbar = ReturnType<typeof InkToolbar>;
+export default InkToolbar;
+//# sourceMappingURL=InkToolbar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkToolbar.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,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,yFAAyF;IACzF,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC;AA6BH,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/InkViewport.svelte

@@ -0,0 +1,306 @@
+<script module lang="ts">
+  import type { InkError } from '@inkbar/core'
+  import type { AnnotationSlotProps, LayoutMode, ViewRotation } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export interface InkViewportProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    mode?: LayoutMode
+    rotation?: ViewRotation
+    /** Gap between pages, CSS px. */
+    gap?: number
+    /** Pages kept mounted either side of the visible ones. */
+    buffer?: number
+    loading?: Snippet | undefined
+    empty?: Snippet | undefined
+    error?: Snippet<[{ error: InkError }]> | undefined
+    annotation?: Snippet<[AnnotationSlotProps]> | undefined
+    /** Shown inside a page that failed to render. The rest of the document stays usable. */
+    pageError?: Snippet<[{ error: InkError; page: number }]> | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page
+   * layers, the tool controller and the keyboard shortcuts in it; Svelte never renders children
+   * into it. The engine reports each page host it mounts, and InkPage components rendered here
+   * (they render nothing visible in place) portal the page-error and annotation snippets into
+   * them.
+   *
+   * Two-way zoom and page: the viewport's own changes are reported through the context, and
+   * the host's props are applied only when they differ from the viewport's state, so the echo
+   * of a reported value does nothing.
+   */
+  import { mountViewer } from '@inkbar/core/dom'
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+
+  import InkPage from './InkPage.svelte'
+
+  import type { InkDocument, InkStatus } from '@inkbar/core'
+  import type { PageMount, ViewerEngine, ZoomValue } from '@inkbar/core/dom'
+
+  let {
+    mode = 'continuous',
+    rotation = 0,
+    gap = 16,
+    buffer = 2,
+    loading,
+    empty,
+    error,
+    annotation,
+    pageError,
+    class: className,
+    ...rest
+  }: InkViewportProps = $props()
+
+  interface MountedPage {
+    /** The engine build the host belongs to; part of the InkPage key. */
+    build: number
+    page: number
+    host: HTMLElement
+    mount: PageMount
+    error: InkError | null
+    /** Whether the build that mounted the page renders the annotation snippet. */
+    custom: boolean
+  }
+
+  const ctx = useInkContext('InkViewport')
+  let scroll = $state<HTMLDivElement | null>(null)
+  /** Page hosts, mounts and errors the engine reported; InkPage renders portals for them. */
+  let pages = $state.raw<MountedPage[]>([])
+
+  let engine: ViewerEngine | null = null
+  /**
+   * Numbered before each build starts, so the pages a build mounts carry its own number. A
+   * rebuild gives each page a new host and mount, so pages from an earlier build must remount,
+   * not be reused.
+   */
+  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 stops: (() => void)[] = []
+  /** The zoom and page last reported to the host. */
+  let lastReportedZoom: ZoomValue | undefined
+  let lastReportedPage: number | undefined
+
+  // The engine's page callbacks fire synchronously inside the effects below (and on scroll).
+  // They read and write `pages`, so every call into the engine from an effect runs untracked:
+  // tracked, the effect would depend on the list it changes and run again.
+  function teardown(): void {
+    for (const stop of stops) stop()
+    stops = []
+    // Unmounts every page, which empties `pages` through `onPageUnmount`.
+    engine?.destroy()
+    engine = null
+    builtWith = null
+    ctx.setViewport(null, null)
+    if (pages.length > 0) pages = []
+  }
+
+  function setup(
+    doc: InkDocument | null,
+    state: InkStatus['state'],
+    el: HTMLDivElement | null
+  ): void {
+    lastReportedZoom = undefined
+    lastReportedPage = undefined
+    if (!doc || !el || state !== 'ready') return
+    let first = true
+    build += 1
+    const custom = !!annotation
+    builtWith = { gap, buffer, custom }
+    engine = mountViewer({
+      container: el,
+      document: doc,
+      zoom: ctx.zoomModel ?? 'fit-width',
+      ...(ctx.pageModel === undefined ? {} : { page: ctx.pageModel }),
+      mode,
+      rotation,
+      gap,
+      buffer,
+      tool: ctx.tool,
+      customAnnotations: custom,
+      onActivate: (id) => ctx.setActivated(id),
+      onBuild: (vp, tc) => {
+        ctx.setViewport(vp, tc)
+        if (first) {
+          // A new document starts from where the viewport opens (its zoom, on the first page:
+          // `createViewport` always starts at page 0); only later changes are reported, the
+          // restored page among them, since the engine has already scrolled to it.
+          first = false
+          lastReportedZoom = vp.zoom.get()
+          lastReportedPage = 0
+        }
+        for (const stop of stops) stop()
+        const reportZoom = (z: ZoomValue): void => {
+          if (z === lastReportedZoom) return
+          lastReportedZoom = z
+          ctx.reportZoom(z)
+        }
+        const reportPage = (p: number): void => {
+          if (p === lastReportedPage) return
+          lastReportedPage = p
+          ctx.reportPage(p)
+        }
+        stops = [vp.zoom.subscribe(reportZoom), vp.currentPage.subscribe(reportPage)]
+        // Whatever the build restored is reported once; nothing is when it matched.
+        reportZoom(vp.zoom.get())
+        reportPage(vp.currentPage.get())
+      },
+      onPageMount: (page, mount, host) => {
+        // `build` and `builtWith` belong to the build in progress: both are set before it starts.
+        const own = {
+          build,
+          page,
+          host,
+          mount,
+          error: null,
+          custom: builtWith?.custom ?? false,
+        }
+        pages = [...pages, own]
+      },
+      onPageUnmount: (page) => {
+        pages = pages.filter((p) => p.page !== page)
+      },
+      onPageError: (page, err) => {
+        pages = pages.map((p) => (p.page === page ? { ...p, error: err } : p))
+      },
+    })
+  }
+
+  // Build for a new document or status; tear down on the next change and on unmount. Only the
+  // values read before `untrack` are dependencies, each through a derived, which notifies only
+  // when the value changes: the status is a new object on every engine report.
+  const buildDocument = $derived(ctx.document)
+  const buildState = $derived(ctx.status.state)
+  $effect(() => {
+    const doc = buildDocument
+    const state = buildState
+    const el = scroll
+    untrack(() => setup(doc, state, el))
+    return () => untrack(teardown)
+  })
+
+  // 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
+  // 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`.
+  //
+  // A snippet toggle never puts a portal into an overlay built with the other setting. The
+  // template updates before this effect runs, so for a moment the old build's pages see the new
+  // `annotation` prop, but each InkPage reads targets only when the build that mounted it was
+  // custom (`p.custom`), and shows them only while the snippet is given. Then this effect swaps
+  // `pages` for the new build's pages. The rebuild keeps the scroll position.
+  const buildGap = $derived(gap)
+  const buildBuffer = $derived(buffer)
+  const buildCustom = $derived(!!annotation)
+  $effect(() => {
+    const next = { gap: buildGap, buffer: buildBuffer, custom: buildCustom }
+    untrack(() => {
+      const built = builtWith
+      if (!engine || !built) return
+      if (
+        built.gap === next.gap &&
+        built.buffer === next.buffer &&
+        built.custom === next.custom
+      )
+        return
+      build += 1
+      builtWith = next
+      engine.rebuild({
+        gap: next.gap,
+        buffer: next.buffer,
+        customAnnotations: next.custom,
+      })
+    })
+  })
+
+  // The setters below run untracked: core relays out inside them and the engine's page
+  // callbacks read and write `pages`. Tracked, each effect would depend on the list it changes
+  // and run again, without end when the host holds a zoom the viewport clamps.
+  $effect(() => {
+    const z = ctx.zoomModel
+    const vp = engine?.viewport
+    if (vp && z !== undefined && z !== vp.zoom.get()) untrack(() => vp.setZoom(z))
+  })
+  $effect(() => {
+    const p = ctx.pageModel
+    const vp = engine?.viewport
+    if (!vp || p === undefined || p === lastReportedPage) return
+    if (p !== vp.currentPage.get()) untrack(() => vp.scrollToPage(p))
+  })
+  $effect(() => {
+    const t = ctx.tool
+    const tc = engine?.tools
+    if (tc && tc.active.get() !== t) untrack(() => tc.set(t))
+  })
+  // The build applied both; these only act on a later change, not on mount.
+  $effect(() => {
+    const m = mode
+    const vp = engine?.viewport
+    if (vp && vp.mode.get() !== m) untrack(() => vp.setMode(m))
+  })
+  $effect(() => {
+    const r = rotation
+    const vp = engine?.viewport
+    if (vp && vp.rotation.get() !== r) untrack(() => vp.setRotation(r))
+  })
+
+  // Not `state`: next to the `$state` rune, Svelte reads that name as a store.
+  const viewState = $derived(buildState)
+  const err = $derived(ctx.status.state === 'error' ? ctx.status.error : null)
+</script>
+
+<div
+  {...rest}
+  class={['ink-viewport-root', className]}
+  data-ink-viewport-root=""
+  data-state={viewState}
+>
+  {#if viewState === 'loading'}
+    <div class="ink-status" role="status" aria-live="polite">
+      {#if loading}{@render loading()}{:else}Loading document…{/if}
+    </div>
+  {:else if err}
+    <div class="ink-status ink-error" role="alert">
+      {#if error}
+        {@render error({ error: err })}
+      {:else}
+        <p class="ink-error-title">This document could not be opened.</p>
+        <!-- The message comes from the PDF engine and is not written for readers: it stays
+             off the page, on the code's tooltip. -->
+        <p><code class="ink-error-code" title={err.message}>{err.code}</code></p>
+      {/if}
+    </div>
+  {:else if viewState === 'idle'}
+    <div class="ink-status ink-empty">{@render empty?.()}</div>
+  {/if}
+  <!-- The scroll element takes focus so the keyboard can scroll, zoom and page through it. -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    bind:this={scroll}
+    class="ink-scroll"
+    data-ink-scroll=""
+    tabindex="0"
+    role="document"
+    aria-label="Document"
+  ></div>
+  {#each pages as p (`${p.build}:${p.page}`)}
+    <InkPage
+      page={p.page}
+      host={p.host}
+      mount={p.mount}
+      error={p.error}
+      customAnnotations={p.custom}
+      {annotation}
+      {pageError}
+    />
+  {/each}
+</div>

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

@@ -0,0 +1,27 @@
+import type { InkError } from '@inkbar/core';
+import type { AnnotationSlotProps, LayoutMode, ViewRotation } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InkViewportProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    mode?: LayoutMode;
+    rotation?: ViewRotation;
+    /** Gap between pages, CSS px. */
+    gap?: number;
+    /** Pages kept mounted either side of the visible ones. */
+    buffer?: number;
+    loading?: Snippet | undefined;
+    empty?: Snippet | undefined;
+    error?: Snippet<[{
+        error: InkError;
+    }]> | undefined;
+    annotation?: Snippet<[AnnotationSlotProps]> | undefined;
+    /** Shown inside a page that failed to render. The rest of the document stays usable. */
+    pageError?: Snippet<[{
+        error: InkError;
+        page: number;
+    }]> | undefined;
+}
+declare const InkViewport: import("svelte").Component<InkViewportProps, {}, "">;
+type InkViewport = ReturnType<typeof InkViewport>;
+export default InkViewport;
+//# sourceMappingURL=InkViewport.svelte.d.ts.map

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

@@ -0,0 +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;AAuRH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/InkZoomIn.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Toolbar } from 'bits-ui'
+
+  import { useZoom } from '../hooks/useZoom.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+
+  import type { InkZoomButtonProps } from './zoom-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    onclick,
+    ...rest
+  }: InkZoomButtonProps = $props()
+
+  const zoom = useZoom()
+</script>
+
+<Toolbar.Button
+  class={['ink-zoom-in', className]}
+  data-ink-zoom-in=""
+  aria-label="Zoom in"
+  title="Zoom in"
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) zoom.zoomIn()
+  }}
+>
+  {#if children}{@render children()}{:else}+{/if}
+</Toolbar.Button>

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

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

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

@@ -0,0 +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"}

package/dist/components/InkZoomOut.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Toolbar } from 'bits-ui'
+
+  import { useZoom } from '../hooks/useZoom.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+
+  import type { InkZoomButtonProps } from './zoom-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    onclick,
+    ...rest
+  }: InkZoomButtonProps = $props()
+
+  const zoom = useZoom()
+</script>
+
+<Toolbar.Button
+  class={['ink-zoom-out', className]}
+  data-ink-zoom-out=""
+  aria-label="Zoom out"
+  title="Zoom out"
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) zoom.zoomOut()
+  }}
+>
+  {#if children}{@render children()}{:else}−{/if}
+</Toolbar.Button>

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

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

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

@@ -0,0 +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"}

package/dist/components/InkZoomSelect.svelte

@@ -0,0 +1,56 @@
+<script module lang="ts">
+  import type { HTMLSelectAttributes } from 'svelte/elements'
+
+  export type InkZoomSelectProps = Omit<
+    HTMLSelectAttributes,
+    'value' | 'onchange' | 'children'
+  >
+</script>
+
+<script lang="ts">
+  import { ZOOM_LEVELS, type ZoomValue } from '@inkbar/core/dom'
+
+  import { useZoom } from '../hooks/useZoom.svelte.js'
+
+  let { class: className, ...rest }: InkZoomSelectProps = $props()
+
+  const CUSTOM = 'custom:'
+  const level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)
+
+  const zoom = useZoom()
+  /** A numeric zoom that is not one of the levels (zoom in and out multiply). */
+  const custom = $derived(
+    typeof zoom.zoom === 'number' && level(zoom.zoom) === undefined ? zoom.zoom : null
+  )
+  const value = $derived(
+    typeof zoom.zoom !== 'number'
+      ? zoom.zoom
+      : custom === null
+        ? String(level(zoom.zoom))
+        : `${CUSTOM}${zoom.zoom}`
+  )
+  function onchange(e: Event & { currentTarget: HTMLSelectElement }): void {
+    const v = e.currentTarget.value
+    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>

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

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

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

@@ -0,0 +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"}

package/dist/components/ThreadForm.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  /** The default form: the root note's own text while it is empty, replies after that. */
+  let {
+    editingRoot,
+    locked,
+    onSubmit,
+    onRemove,
+    onClose,
+  }: {
+    editingRoot: boolean
+    locked: boolean
+    onSubmit: (text: string) => void
+    onRemove: () => void
+    onClose: () => void
+  } = $props()
+
+  let draft = $state('')
+  function submit(e: SubmitEvent): void {
+    e.preventDefault()
+    const text = draft.trim()
+    if (!text) return
+    onSubmit(text)
+    draft = ''
+  }
+</script>
+
+<form class="ink-thread-reply" data-ink-thread-reply="" onsubmit={submit}>
+  <textarea
+    bind:value={draft}
+    aria-label={editingRoot ? 'Comment' : 'Reply'}
+    rows="2"
+    placeholder={editingRoot ? 'Comment' : 'Reply'}></textarea>
+  <div class="ink-thread-actions">
+    <button type="submit" disabled={!draft.trim()}
+      >{editingRoot ? 'Comment' : 'Reply'}</button
+    >
+    {#if !locked}
+      <button type="button" onclick={onRemove}>Delete</button>
+    {/if}
+    <button type="button" onclick={onClose}>Close</button>
+  </div>
+</form>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    editingRoot: boolean;
+    locked: boolean;
+    onSubmit: (text: string) => void;
+    onRemove: () => void;
+    onClose: () => void;
+};
+declare const ThreadForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThreadForm = ReturnType<typeof ThreadForm>;
+export default ThreadForm;
+//# sourceMappingURL=ThreadForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadForm.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ThreadForm.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAkCJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/annotation-element.svelte.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The overlay element core draws for an annotation, for anchoring a popover to it. Core
+ * creates and removes these elements outside Svelte, so this follows the root's subtree while
+ * an id is wanted.
+ */
+export declare function useAnnotationElement(root: () => HTMLElement | null, id: () => string | null): {
+    readonly current: HTMLElement | null;
+};
+//# sourceMappingURL=annotation-element.svelte.d.ts.map

package/dist/components/annotation-element.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-element.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/annotation-element.svelte.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,WAAW,GAAG,IAAI,EAC9B,EAAE,EAAE,MAAM,MAAM,GAAG,IAAI,GACtB;IAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAkB1C"}