@embedpdf/svelte 0.0.0-stage → 3.0.0-next.15

package/dist/toolbar/DefaultOverflowMenu.svelte

@@ -0,0 +1,106 @@
+<!--
+  The default "More" menu: a minimal popover under its button in a horizontal toolbar and beside
+  it in a vertical one, one section after another. A press anywhere outside it closes it, and
+  while it's open it takes the menu keys (`attachMenuKeys`): focus on its first row, the arrows,
+  typeahead, Enter, and Escape back to its button. A row that opens a submenu keeps the menu
+  open; every other row closes it after running.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { OverflowRow } from '@embedpdf/core-ui';
+  import {
+    attachMenuKeys,
+    focusablesIn,
+    observeOutsidePress,
+    type Orientation,
+  } from '@embedpdf/web';
+  import type { OverflowMenuView } from './views.js';
+  import { BORDER, SURFACE } from './paint.js';
+
+  let { view, orientation }: { view: OverflowMenuView; orientation: Orientation } = $props();
+  let menu = $state<HTMLElement | null>(null);
+
+  // Whether it's open, apart from the view: the toolbar hands a new view on every change, and
+  // attaching again would put focus back on the first row.
+  const isOpen = $derived(view.isOpen);
+
+  $effect(() => {
+    const element = menu;
+    if (!isOpen || !element) return;
+    return untrack(() => {
+      // The menu's parent holds its button too: a press on it is the button's own toggle.
+      const container = element.parentElement ?? element;
+      const trigger =
+        focusablesIn(container).find((candidate) => !element.contains(candidate)) ?? null;
+      const close = () => view.close();
+      const stopOutside = observeOutsidePress(container, close);
+      const detachKeys = attachMenuKeys(element, { trigger, close });
+      return () => {
+        stopOutside();
+        detachKeys();
+      };
+    });
+  });
+
+  /** Under a horizontal toolbar's button, beside a vertical one's. */
+  const placement = $derived(
+    orientation === 'vertical'
+      ? 'top: 0; inset-inline-start: 100%;'
+      : 'top: 100%; inset-inline-end: 0;',
+  );
+
+  function choose(row: OverflowRow) {
+    view.execute(row.command);
+    if (row.type !== 'submenu') view.close();
+  }
+</script>
+
+{#if isOpen}
+  <div
+    bind:this={menu}
+    role="menu"
+    style="position: absolute; {placement}"
+    style:z-index="41"
+    style:min-width="200px"
+    style:padding="4px"
+    style:background={SURFACE}
+    style:border="1px solid {BORDER}"
+    style:border-radius="6px"
+    style:box-shadow="0 4px 16px rgba(0,0,0,0.15)"
+  >
+    {#each view.sections as section, index (index)}
+      {#if index > 0}
+        <div style:height="1px" style:background={BORDER} style:margin="4px 0"></div>
+      {/if}
+      {#each section.rows as row (row.command)}
+        {@const command = view.resolve(row.command)}
+        {#if command}
+          <button
+            type="button"
+            role={section.role === 'radio' ? 'menuitemradio' : 'menuitem'}
+            aria-checked={section.role === 'radio' ? command.active : undefined}
+            disabled={!command.enabled}
+            tabindex="-1"
+            onclick={() => choose(row)}
+            style:display="flex"
+            style:width="100%"
+            style:align-items="center"
+            style:justify-content="space-between"
+            style:gap="16px"
+            style:padding="6px 8px"
+            style:border="none"
+            style:color="inherit"
+            style:font="inherit"
+            style:background="transparent"
+            style:cursor={command.enabled ? 'pointer' : 'default'}
+            style:opacity={command.enabled ? 1 : 0.4}
+            style:white-space="nowrap"
+          >
+            <span>{command.active && section.role === 'radio' ? '• ' : ''}{command.label}</span>
+            {#if row.type === 'submenu'}<span>▸</span>{/if}
+          </button>
+        {/if}
+      {/each}
+    {/each}
+  </div>
+{/if}

package/dist/toolbar/DefaultOverflowMenu.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Orientation } from '@embedpdf/web';
+import type { OverflowMenuView } from './views.js';
+type $$ComponentProps = {
+    view: OverflowMenuView;
+    orientation: Orientation;
+};
+declare const DefaultOverflowMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultOverflowMenu = ReturnType<typeof DefaultOverflowMenu>;
+export default DefaultOverflowMenu;

package/dist/toolbar/DefaultOverflowTrigger.svelte

@@ -0,0 +1,25 @@
+<!-- The default "More" button: a plain ⋯ that shows whether its menu is open. -->
+<script lang="ts">
+  import { ACTIVE, BORDER } from './paint.js';
+
+  let { isOpen, toggle }: { isOpen: boolean; toggle: () => void } = $props();
+</script>
+
+<button
+  type="button"
+  onclick={toggle}
+  aria-haspopup="menu"
+  aria-expanded={isOpen}
+  title="More"
+  style:display="inline-flex"
+  style:align-items="center"
+  style:padding="4px 8px"
+  style:color="inherit"
+  style:font="inherit"
+  style:border="1px solid {BORDER}"
+  style:border-radius="4px"
+  style:background={isOpen ? ACTIVE : 'transparent'}
+  style:cursor="pointer"
+>
+  ⋯
+</button>

package/dist/toolbar/DefaultOverflowTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    isOpen: boolean;
+    toggle: () => void;
+};
+declare const DefaultOverflowTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultOverflowTrigger = ReturnType<typeof DefaultOverflowTrigger>;
+export default DefaultOverflowTrigger;

package/dist/toolbar/Measured.svelte

@@ -0,0 +1,46 @@
+<!--
+  One element of the toolbar's measurement layer: reports its length along the toolbar (its width,
+  or its height in a vertical one) now and whenever it resizes (a new language, a font loading,
+  your CSS). With `onlyWhenDrawn` it reports only while it holds something: a custom item that
+  draws nothing here is measured where it renders, by the `ctx.measure` it reports to.
+-->
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import { observeLength, type Orientation } from '@embedpdf/web';
+
+  let {
+    orientation,
+    onLength,
+    onlyWhenDrawn = false,
+    children,
+  }: {
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    onlyWhenDrawn?: boolean;
+    children?: Snippet;
+  } = $props();
+
+  let element: HTMLSpanElement | undefined = $state();
+
+  /** Whether `element` holds an element or text: a snippet that drew nothing leaves only anchors. */
+  const drewSomething = (measured: Element): boolean =>
+    [...measured.childNodes].some(
+      (node) =>
+        node.nodeType === Node.ELEMENT_NODE ||
+        (node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== ''),
+    );
+
+  $effect(() => {
+    const measured = element;
+    const along = orientation;
+    if (!measured) return;
+    // The report writes the toolbar's lengths, which this effect must not depend on.
+    return untrack(() =>
+      observeLength(measured, along, (length) => {
+        if (!onlyWhenDrawn || drewSomething(measured)) onLength(length);
+      }),
+    );
+  });
+</script>
+
+<span bind:this={element} style="display: inline-flex; flex-shrink: 0">{@render children?.()}</span>

package/dist/toolbar/Measured.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type Orientation } from '@embedpdf/web';
+type $$ComponentProps = {
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    onlyWhenDrawn?: boolean;
+    children?: Snippet;
+};
+declare const Measured: import("svelte").Component<$$ComponentProps, {}, "">;
+type Measured = ReturnType<typeof Measured>;
+export default Measured;

package/dist/toolbar/NativeSlotSocket.svelte

@@ -0,0 +1,43 @@
+<!--
+  The socket for a custom item when no `custom` snippet draws it: a real, native <slot> element.
+  Inside a shadow root (a custom element that renders the toolbar) the browser projects the
+  host's same-named children into it; anywhere else it shows its own content, the item's
+  command. It is measured where it renders, never in the measurement layer: only the first
+  <slot> of a name gets the projected children.
+-->
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import { observeLength, type Orientation } from '@embedpdf/web';
+
+  let {
+    name,
+    orientation,
+    onLength,
+    children,
+  }: {
+    name: string;
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    children?: Snippet;
+  } = $props();
+
+  let socket: HTMLElement | undefined = $state();
+
+  // A child slotted in or out resizes the socket's box, so one observer covers both.
+  $effect(() => {
+    const element = socket;
+    const along = orientation;
+    if (!element) return;
+    return untrack(() => observeLength(element, along, (length) => onLength(length)));
+  });
+</script>
+
+<!-- `svelte:element` makes the element itself: Svelte reads a <slot> tag as its own syntax. -->
+<svelte:element
+  this={'slot'}
+  bind:this={socket}
+  {name}
+  style="display: inline-flex; align-items: center; flex-shrink: 0"
+>
+  {@render children?.()}
+</svelte:element>

package/dist/toolbar/NativeSlotSocket.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type Orientation } from '@embedpdf/web';
+type $$ComponentProps = {
+    name: string;
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    children?: Snippet;
+};
+declare const NativeSlotSocket: import("svelte").Component<$$ComponentProps, {}, "">;
+type NativeSlotSocket = ReturnType<typeof NativeSlotSocket>;
+export default NativeSlotSocket;

package/dist/toolbar/Toolbar.svelte

@@ -0,0 +1,314 @@
+<!--
+  <Toolbar>: measures what fits and makes room, and you draw every part.
+
+    1. A hidden measurement layer renders every unit in every variant (and the folded groups and
+       the "More" button), each watched with `observeLength` from @embedpdf/web along the toolbar
+       (widths, or heights when it is vertical), so a new language, a font loading, browser zoom
+       and your CSS all re-measure on their own (`createToolbarLengths`).
+    2. core-ui's `solve()` gives each unit a variant, a folded group or the "More" menu
+       (`layoutToolbar` turns that into parts).
+    3. The live row draws the parts; the "More" menu is derived from what didn't fit
+       (`projectOverflow`), never written by hand.
+
+  The toolbar is one tab stop with arrow keys along it (`attachToolbarFocus`), and its default
+  menus take the menu keys (`attachMenuKeys`). Every part is a snippet with a plain default:
+  `command`, `custom`, `collapsed`, `groupTrigger`, `separator`, `overflowTrigger` and
+  `overflowMenu`. The defaults' colors come from the `--epdf-toolbar-*` CSS variables only.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { layoutToolbar, normalizeBar, type LiveSection } from '@embedpdf/core-ui';
+  // The "More" menu asks which menu a command opens, a host fact, so the host lens is bound here.
+  import { CommandsToken } from '@embedpdf/plugin-commands/contract/host';
+  import { unregisteredCommand } from '@embedpdf/plugin-commands/contract';
+  import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+  import {
+    TOOLBAR_ITEM_ATTRIBUTE,
+    attachToolbarFocus,
+    createToolbarLengths,
+    observeContentLength,
+    toolbarMeasureKey,
+    type RovingFocus,
+  } from '@embedpdf/web';
+  import { useKernelBinding } from '../runtime/binding.svelte.js';
+  import { useCapability, useDocumentId } from '../runtime/readers.svelte.js';
+  import DefaultCollapsed from './DefaultCollapsed.svelte';
+  import DefaultCommand from './DefaultCommand.svelte';
+  import DefaultGroupTrigger from './DefaultGroupTrigger.svelte';
+  import DefaultOverflowMenu from './DefaultOverflowMenu.svelte';
+  import DefaultOverflowTrigger from './DefaultOverflowTrigger.svelte';
+  import Measured from './Measured.svelte';
+  import NativeSlotSocket from './NativeSlotSocket.svelte';
+  import type { ToolbarProps } from './props.js';
+  import type { OverflowMenuView, ToolbarPart } from './views.js';
+
+  let {
+    bar,
+    orientation = 'horizontal',
+    gap = 8,
+    separatorWidth = 1,
+    'aria-label': ariaLabel,
+    class: className,
+    style,
+    command,
+    custom,
+    collapsed,
+    groupTrigger,
+    separator,
+    overflowTrigger,
+    overflowMenu,
+  }: ToolbarProps = $props();
+
+  const binding = useKernelBinding();
+  const commands = useCapability(CommandsToken);
+  const documentId = useDocumentId();
+  const vertical = $derived(orientation === 'vertical');
+
+  // ── measuring ──────────────────────────────────────────────────────────────
+
+  let container: HTMLDivElement | undefined = $state();
+  let containerLength = $state(0);
+  $effect(() => {
+    const element = container;
+    const along = orientation;
+    if (!element) return;
+    return untrack(() =>
+      observeContentLength(element, along, (length) => (containerLength = length)),
+    );
+  });
+
+  // A length that changed by more than half a pixel fits (and draws) again. Untracked: a report
+  // can come from an effect, which must not run again because the count moved.
+  const lengths = createToolbarLengths();
+  let measured = $state(0);
+  function report(key: string, length: number) {
+    untrack(() => {
+      if (lengths.report(orientation, key, length)) measured += 1;
+    });
+  }
+
+  // ── the fit ────────────────────────────────────────────────────────────────
+
+  const normalized = $derived(normalizeBar(bar));
+
+  const resolve = (id: string): ResolvedCommand | null =>
+    commands.resolveCommand(id, documentId.current ?? undefined);
+  const execute = (id: string): void =>
+    void commands.execute(id, { documentId: documentId.current ?? undefined });
+
+  // Command state is derived on read, so this runs again on every kernel change: labels, `active`
+  // and `visible` (and with them the measurement layer) stay live. A toolbar is a few dozen
+  // items, so drawing it again on each change is the simple, correct baseline.
+  const layout = $derived.by(() => {
+    binding.track();
+    void measured;
+    return layoutToolbar({
+      bar: normalized,
+      resolve,
+      unregistered: unregisteredCommand,
+      execute,
+      menuTarget: (id) => commands.getMenuTarget(id),
+      metrics: lengths.metrics(orientation, gap, separatorWidth),
+      measureKey: toolbarMeasureKey,
+      containerLength,
+      orientation,
+    });
+  });
+
+  // ── the "More" menu ────────────────────────────────────────────────────────
+
+  let overflowOpen = $state(false);
+  const hasOverflow = $derived(layout.hasOverflow);
+  $effect(() => {
+    if (!hasOverflow) overflowOpen = false;
+  });
+  const toggleOverflow = () => (overflowOpen = !overflowOpen);
+  const noop = () => {};
+
+  const overflowView: OverflowMenuView = $derived({
+    sections: layout.overflow,
+    isOpen: overflowOpen,
+    close: () => (overflowOpen = false),
+    resolve,
+    execute,
+  });
+
+  // ── the keyboard ───────────────────────────────────────────────────────────
+
+  // One tab stop, and arrow keys along the toolbar. The handle is no state: nothing draws from it.
+  const keyboard: { focus: RovingFocus | null } = { focus: null };
+  $effect(() => {
+    const element = container;
+    const along = orientation;
+    if (!element) return;
+    return untrack(() => {
+      const focus = attachToolbarFocus(element, along);
+      keyboard.focus = focus;
+      return () => {
+        focus.detach();
+        keyboard.focus = null;
+      };
+    });
+  });
+  // Any draw can add, remove or disable an item, so the tab stop is checked after each one: a new
+  // fit, the "More" menu, or snippets of yours that draw the parts. An effect runs after the DOM
+  // it follows is updated.
+  $effect(() => {
+    void [layout, overflowOpen, command, custom, collapsed, groupTrigger, overflowTrigger];
+    untrack(() => keyboard.focus?.refresh());
+  });
+
+  // ── layout ─────────────────────────────────────────────────────────────────
+
+  /**
+   * The sections run along the toolbar. The center one carries auto margins: it centers in the
+   * space the other two leave, and gives way before anything overlaps. The toolbar itself has no
+   * gap, so what the fit says fits, fits. Sections never grow or shrink: fitting is the solver's
+   * job, not flexbox's.
+   */
+  const sectionStyle = (name: LiveSection['name']) =>
+    `display: flex; flex-direction: ${vertical ? 'column' : 'row'}; align-items: center; ` +
+    `gap: ${gap}px; flex: 0 0 auto;` +
+    (name !== 'center'
+      ? ''
+      : vertical
+        ? ' margin-top: auto; margin-bottom: auto;'
+        : ' margin-left: auto; margin-right: auto;');
+
+  /** The default separator: a 1px line across the toolbar, flat in a vertical one. */
+  const separatorStyle = $derived(
+    `${vertical ? 'height' : 'width'}: 1px; align-self: stretch; background: currentColor; ` +
+      'opacity: 0.2',
+  );
+
+  /** The toolbar runs along its orientation; a `style` of yours comes after. */
+  const rootStyle = $derived(
+    `position: relative; display: flex; flex-direction: ${vertical ? 'column' : 'row'}; ` +
+      `align-items: center; ${style ?? ''}`,
+  );
+
+  /** Marks the element around each item of the live row: its first focusable element is a stop. */
+  const TOOLBAR_ITEM = { [TOOLBAR_ITEM_ATTRIBUTE]: '' };
+
+  /**
+   * The hidden measurement layer: a row for a horizontal toolbar, a column for a vertical one, and
+   * no height either way, so it never adds to the page. A column keeps each item at its own
+   * width, so no text wraps and changes the heights it reports.
+   */
+  const measureLayerStyle = $derived(
+    'position: absolute; left: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; ' +
+      'pointer-events: none; display: flex; white-space: nowrap;' +
+      (vertical ? ' flex-direction: column; align-items: flex-start;' : ''),
+  );
+</script>
+
+{#snippet commandButton(item: ResolvedCommand, variant: string, run: () => void)}
+  {#if command}
+    {@render command(item, variant, run)}
+  {:else}
+    <DefaultCommand command={item} {run} />
+  {/if}
+{/snippet}
+
+{#snippet part(item: ToolbarPart, layer: 'live' | 'measure')}
+  {#if item.kind === 'command'}
+    {@render commandButton(item.command, item.variant, item.run)}
+  {:else if item.kind === 'custom'}
+    {#if custom}
+      {@render custom(item.name, item.variant, {
+        layer,
+        measure: (length) => report(item.measureKey, length),
+      })}
+    {:else}
+      <NativeSlotSocket
+        name={item.name}
+        {orientation}
+        onLength={(length) => report(item.measureKey, length)}
+      >
+        {#if item.terminal}
+          {@render commandButton(item.terminal, 'icon', item.runTerminal)}
+        {/if}
+      </NativeSlotSocket>
+    {/if}
+  {:else if item.kind === 'collapsed'}
+    {#if collapsed}
+      {@render collapsed(item.view)}
+    {:else}
+      <DefaultCollapsed view={item.view} {orientation} />
+    {/if}
+  {:else if groupTrigger}
+    {@render groupTrigger(item.view)}
+  {:else}
+    <DefaultGroupTrigger view={item.view} {orientation} />
+  {/if}
+{/snippet}
+
+{#snippet moreButton(isOpen: boolean, toggle: () => void)}
+  {#if overflowTrigger}
+    {@render overflowTrigger(isOpen, toggle)}
+  {:else}
+    <DefaultOverflowTrigger {isOpen} {toggle} />
+  {/if}
+{/snippet}
+
+<div
+  bind:this={container}
+  role="toolbar"
+  aria-orientation={orientation}
+  aria-label={ariaLabel}
+  class={className}
+  style={rootStyle}
+>
+  {#each layout.sections as section (section.name)}
+    <div style={sectionStyle(section.name)}>
+      {#each section.groups as group, index (group.id)}
+        {#if index > 0}
+          {#if separator}
+            {@render separator()}
+          {:else}
+            <span style={separatorStyle}></span>
+          {/if}
+        {/if}
+        {#each group.parts as item (item.key)}
+          <!-- The element around an item adds no box: the item lays out as the section's child. -->
+          <span {...TOOLBAR_ITEM} style="display: contents">{@render part(item, 'live')}</span>
+        {/each}
+      {/each}
+      {#if section.name === 'end' && layout.hasOverflow}
+        <span {...TOOLBAR_ITEM} style="position: relative; display: inline-flex">
+          {@render moreButton(overflowOpen, toggleOverflow)}
+          {#if overflowMenu}
+            {@render overflowMenu(overflowView)}
+          {:else}
+            <DefaultOverflowMenu view={overflowView} {orientation} />
+          {/if}
+        </span>
+      {/if}
+    </div>
+  {/each}
+
+  <!-- The measurement layer: hidden, inert and observed. Text reflow (a language, a font,
+       browser zoom) fires the observers; no code handles it. -->
+  <div aria-hidden="true" inert style={measureLayerStyle}>
+    {#each layout.measured as measuredPart (measuredPart.measureKey)}
+      <!-- A custom item without a `custom` snippet is a socket, measured where it renders: a
+           second <slot> of its name here would take the projected children from the row. One
+           whose snippet draws nothing here is measured where it renders too, by `ctx.measure`. -->
+      {#if measuredPart.kind !== 'custom' || custom}
+        <Measured
+          {orientation}
+          onlyWhenDrawn={measuredPart.kind === 'custom'}
+          onLength={(length) => report(measuredPart.measureKey, length)}
+        >
+          {@render part(measuredPart, 'measure')}
+        </Measured>
+      {/if}
+    {/each}
+    <Measured
+      {orientation}
+      onLength={(length) => report(toolbarMeasureKey.overflowTrigger, length)}
+    >
+      {@render moreButton(false, noop)}
+    </Measured>
+  </div>
+</div>

package/dist/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarProps } from './props.js';
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/toolbar/paint.d.ts

@@ -0,0 +1,3 @@
+export declare const SURFACE: string;
+export declare const BORDER: string;
+export declare const ACTIVE: string;

package/dist/toolbar/paint.js

@@ -0,0 +1,9 @@
+/**
+ * The default parts' colors: CSS variables only, because the defaults are meant to be replaced.
+ * `--epdf-toolbar-surface` (the "More" menu and folded groups), `--epdf-toolbar-border` and
+ * `--epdf-toolbar-active` (a pressed or open button).
+ */
+import { paintDefault } from '@embedpdf/web';
+export const SURFACE = paintDefault('toolbar-surface');
+export const BORDER = paintDefault('toolbar-border');
+export const ACTIVE = paintDefault('toolbar-active');

package/dist/toolbar/props.d.ts

@@ -0,0 +1,48 @@
+/** The props of `<Toolbar>`: the bar and how it runs, and a snippet for every part you draw. */
+import type { Snippet } from 'svelte';
+import type { BarSchema, CustomSlotCtx } from '@embedpdf/core-ui';
+import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+import type { CollapsedGroupView, GroupDisclosureView, OverflowMenuView } from './views.js';
+export interface ToolbarProps {
+    /** What goes in the toolbar: its sections, groups and items. */
+    bar: BarSchema;
+    /**
+     * Which way the toolbar runs. A vertical toolbar fits the height it's given, so give it one; it
+     * stacks its sections top, middle and bottom, and draws every command at `'icon'`, with the
+     * label for a tooltip. Default `'horizontal'`.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Px between adjacent items (the CSS flex gap; the fit budgets the same number). Default 8. */
+    gap?: number;
+    /**
+     * The thickness of the separator your `separator` snippet draws: its width across a horizontal
+     * toolbar, its height in a vertical one. Default 1.
+     */
+    separatorWidth?: number;
+    /** The toolbar's name for screen readers, for a page with more than one toolbar. */
+    'aria-label'?: string;
+    class?: string;
+    style?: string;
+    /** A command's button at a variant. Default: a plain `<button>` with the command's label. */
+    command?: Snippet<[command: ResolvedCommand, variant: string, run: () => void]>;
+    /**
+     * Your own items, by `name` (from `custom(name, command)`): it draws every custom item in the
+     * bar, in the live row and in the hidden measurement layer (`ctx.layer`). Without it, each item
+     * is a native `<slot name>` element with its command's button inside, for a custom element's
+     * children to fill. An item the snippet draws nothing for in the measurement layer
+     * (`ctx.layer === 'measure'`) is measured where it renders instead: report its length with
+     * `ctx.measure`. The first element of an item that takes focus is the item's stop in the
+     * toolbar's arrow-key order.
+     */
+    custom?: Snippet<[name: string, variant: string, ctx: CustomSlotCtx]>;
+    /** A folded group: its button and its menu. Default: a `<select>` for `'select'`, a menu button for `'menu'`. */
+    collapsed?: Snippet<[view: CollapsedGroupView]>;
+    /** The button of a group that shed items, and its menu. Default: a chevron opening a menu. */
+    groupTrigger?: Snippet<[view: GroupDisclosureView]>;
+    /** The line between groups. Default: a 1px line across the toolbar. */
+    separator?: Snippet;
+    /** The "More" button. Default: a plain ⋯ button. */
+    overflowTrigger?: Snippet<[isOpen: boolean, toggle: () => void]>;
+    /** The "More" menu, with its sections, rows and the call that runs each one. Default: a minimal popover. */
+    overflowMenu?: Snippet<[view: OverflowMenuView]>;
+}

package/dist/toolbar/props.js

@@ -0,0 +1 @@
+export {};

package/dist/toolbar/strip.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { BarSchema, StripView as StripViewOf, StripViewGroup as StripViewGroupOf } from '@embedpdf/core-ui';
+import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+import { type CurrentValue, type MaybeGetter } from '../runtime/values.svelte.js';
+/** A group of a strip: its visible commands, in bar order. Groups are separator boundaries. */
+export type StripViewGroup = StripViewGroupOf<ResolvedCommand>;
+/** A strip, resolved: only visible commands, only groups with one; `execute` runs one for this component's document. */
+export type StripView = StripViewOf<ResolvedCommand>;
+/**
+ * The strip a bar shows now, as `{ current }`: the schema says what could appear, each command's
+ * `visible` decides what does. `null` while nothing applies, so `{#if strip.current}` is all the
+ * show-and-hide logic a strip needs. `current` changes only when a command in it changes. Pass a
+ * function for a bar that changes.
+ */
+export declare function useStripView(bar: MaybeGetter<BarSchema | undefined>): CurrentValue<StripView | null>;