@inkbar/svelte 0.0.0-stage → 0.2.0

package/dist/components/InkPage.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+  import type { InkError } from '@inkbar/core'
+  import type { AnnotationSlotProps, PageMount } from '@inkbar/core/dom'
+  import type { Snippet } from 'svelte'
+
+  export interface InkPageProps {
+    page: number
+    host: HTMLElement
+    /** The engine's page mount in `host`. */
+    mount: PageMount
+    /** The engine's error for this page, `null` while it renders. */
+    error: InkError | null
+    /** Fixed for the life of the mount: the engine rebuilds when it changes. */
+    customAnnotations?: boolean
+    annotation?: Snippet<[AnnotationSlotProps]> | undefined
+    pageError?: Snippet<[{ error: InkError; page: number }]> | undefined
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * One page the viewer engine mounted. Renders nothing visible in place; the portal attachment
+   * moves the page error into the host and each custom annotation's content into its overlay
+   * element.
+   *
+   * The overlay creates and removes those elements as the annotation list changes, outside
+   * Svelte. So the portal targets come from a list read after every overlay render: this
+   * component subscribes to the store after the overlay does (the engine created the mount
+   * first), and core notifies subscribers in order, so the elements already exist when the list
+   * arrives here.
+   *
+   * The engine tracks page errors and sets `data-state="error"` on the host; this component
+   * portals the page error into it while `error` is set.
+   */
+  import { untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+
+  import InkAnnotation from './InkAnnotation.svelte'
+  import { portal } from './portal.js'
+
+  import type { Annotation } from '@inkbar/core'
+
+  let {
+    page,
+    host,
+    mount,
+    error,
+    customAnnotations = false,
+    annotation,
+    pageError,
+  }: InkPageProps = $props()
+
+  interface Target {
+    annotation: Annotation
+    el: HTMLElement
+  }
+
+  function sameTargets(a: readonly Target[], b: readonly Target[]): boolean {
+    return (
+      a.length === b.length &&
+      a.every((t, i) => t.annotation === b[i]!.annotation && t.el === b[i]!.el)
+    )
+  }
+
+  const ctx = useInkContext('InkPage')
+  let targets = $state.raw<Target[]>([])
+
+  // Targets are read from the current mount, and read again when InkViewport hands this page a
+  // new one (the page left and came back within one tick, under the same key). The props are
+  // read through deriveds, which notify only when the value changes: InkViewport replaces this
+  // page's whole entry when its error changes, and that invalidates every prop without
+  // changing the mount.
+  const listPage = $derived(page)
+  const listMount = $derived(mount)
+  const listCustom = $derived(customAnnotations)
+  $effect(() => {
+    const p = listPage
+    const m = listMount
+    const custom = listCustom
+    const doc = untrack(() => ctx.document)
+    if (!doc || !custom) {
+      if (untrack(() => targets).length > 0) targets = []
+      return
+    }
+    const read = (): void => {
+      const next = doc.annotations.byPage(p).flatMap((a) => {
+        const el = m.overlay.elementFor(a.id)
+        return el ? [{ annotation: a, el }] : []
+      })
+      // A change elsewhere in the document leaves this page's targets as they were. The
+      // first read runs inside the effect, which must not come to depend on its own list.
+      if (
+        !sameTargets(
+          untrack(() => targets),
+          next
+        )
+      )
+        targets = next
+    }
+    const stop = doc.annotations.list.subscribe(read)
+    read()
+    return stop
+  })
+</script>
+
+{#if error}
+  <div hidden {@attach portal(host)}>
+    <div class="ink-page-error" data-ink-page-error="" role="alert">
+      {#if pageError}
+        {@render pageError({ error, page })}
+      {:else}
+        <p>Page {page + 1} could not be shown.</p>
+        <code class="ink-error-code">{error.code}</code>
+      {/if}
+    </div>
+  </div>
+{/if}
+{#if annotation}
+  {#each targets as t (t.annotation.id)}
+    <div hidden {@attach portal(t.el)}>
+      <InkAnnotation annotation={t.annotation} element={t.el} children={annotation} />
+    </div>
+  {/each}
+{/if}

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

@@ -0,0 +1,22 @@
+import type { InkError } from '@inkbar/core';
+import type { AnnotationSlotProps, PageMount } from '@inkbar/core/dom';
+import type { Snippet } from 'svelte';
+export interface InkPageProps {
+    page: number;
+    host: HTMLElement;
+    /** The engine's page mount in `host`. */
+    mount: PageMount;
+    /** The engine's error for this page, `null` while it renders. */
+    error: InkError | null;
+    /** Fixed for the life of the mount: the engine rebuilds when it changes. */
+    customAnnotations?: boolean;
+    annotation?: Snippet<[AnnotationSlotProps]> | undefined;
+    pageError?: Snippet<[{
+        error: InkError;
+        page: number;
+    }]> | undefined;
+}
+declare const InkPage: import("svelte").Component<InkPageProps, {}, "">;
+type InkPage = ReturnType<typeof InkPage>;
+export default InkPage;
+//# sourceMappingURL=InkPage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkPage.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,WAAW,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,SAAS,CAAA;IAChB,iEAAiE;IACjE,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAA;IACtB,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,GAAG,SAAS,CAAA;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAA;CACrE;AA4HH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/InkPageCount.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type InkPageCountProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>
+</script>
+
+<script lang="ts">
+  import { usePage } from '../hooks/usePage.svelte.js'
+
+  let { class: className, ...rest }: InkPageCountProps = $props()
+
+  const page = usePage()
+</script>
+
+<span
+  class={['ink-page-count', className]}
+  data-ink-page-count=""
+  aria-live="polite"
+  {...rest}>of {page.count}</span
+>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { ChevronLeft } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+
+  import { usePage } from '../hooks/usePage.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkPageButtonProps } from './page-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkPageButtonProps = $props()
+
+  const page = usePage()
+</script>
+
+<Toolbar.Button
+  class={['ink-prev-page', className]}
+  data-ink-prev-page=""
+  aria-label="Previous page"
+  title="Previous page"
+  disabled={page.current <= 0 || !!disabled}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) page.previous()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={ChevronLeft} />{/if}
+</Toolbar.Button>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPrevPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkPrevPage.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAkC3D,QAAA,MAAM,WAAW,wDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/InkRedo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Redo2 } from '@inkbar/icons'
+  import { Toolbar } from 'bits-ui'
+
+  import { useHistory } from '../hooks/useHistory.svelte.js'
+
+  import { asBitsProps } from './child-snippet.js'
+  import InkIcon from './InkIcon.svelte'
+
+  import type { InkHistoryButtonProps } from './history-button.js'
+
+  let {
+    class: className,
+    children,
+    child,
+    disabled,
+    onclick,
+    ...rest
+  }: InkHistoryButtonProps = $props()
+
+  const history = useHistory()
+</script>
+
+<Toolbar.Button
+  class={['ink-redo', className]}
+  data-ink-redo=""
+  aria-label="Redo"
+  title="Redo"
+  disabled={!history.canRedo || !!disabled}
+  {...child ? { child } : {}}
+  {...asBitsProps(rest)}
+  onclick={(e) => {
+    onclick?.(e)
+    if (!e.defaultPrevented) history.redo()
+  }}
+>
+  {#if children}{@render children()}{:else}<InkIcon icon={Redo2} />{/if}
+</Toolbar.Button>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkRedo.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkRedo.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAkCjE,QAAA,MAAM,OAAO,2DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}