@ripple-ui/svelte 0.0.0-stage → 0.9.0-next.0

package/dist/widgets/craft/PageStrip.svelte

@@ -0,0 +1,280 @@
+<!--
+  widgets/craft/PageStrip.svelte
+  The pages of a multi-page design as thumbnails: a horizontal strip under the
+  canvas, or (the grid toggle) a wrapping grid of larger pages. On `./ui` only.
+
+  - The current page is marked (aria-selected + an accent ring); a click or the
+    arrow keys select (`onselect`, `current` is bindable). While `current` is not
+    in `pages` (a page just added or deleted) the first page is shown as current,
+    but `current` is never rewritten: the host owns it.
+  - "+" adds a page after the current one (`onadd(index)`), drag reorders
+    (`onmove(id, index)`, the index it should hold afterwards; maths in
+    page-strip.ts), and Alt+Left/Right moves the focused page by one.
+  - Right-click (or Shift+F10) opens a menu with Duplicate and Delete. Its items
+    act only on a real click (press and release on the item) or the keyboard: the
+    opening gesture's own release, which lands on the first item when the menu
+    opens under the pointer (a quick right-click, a two-finger tap), never picks
+    (guarded in the shared context-menu item).
+  - Each control renders only when its handler is passed, like Tree's layer
+    mode; Delete is disabled on the last page. The host owns the page list.
+  - Thumbnails: the `thumbnail` snippet, else `thumb` (an image), else a blank
+    page, all at the page's aspect ratio. Strip pages are 56px tall, grid 128px.
+  role="listbox" (horizontal) of options with roving tabindex. Tokens only.
+-->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import * as ContextMenu from '../../components/ui/context-menu/index.js';
+  import PlusIcon from '@lucide/svelte/icons/plus';
+  import LayoutGridIcon from '@lucide/svelte/icons/layout-grid';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import TrashIcon from '@lucide/svelte/icons/trash-2';
+  import { PAGE_MIME, reorderIndex, type PageItem } from './page-strip.js';
+
+  interface Props {
+    pages: PageItem[];
+    /** Current page id. Bindable; defaults to the first page. */
+    current?: string;
+    /** Bindable. */
+    view?: 'strip' | 'grid';
+    onselect?: (id: string) => void;
+    /** Add a page at this index (after the current page). */
+    onadd?: (index: number) => void;
+    /** Move page `id` so it ends up at `index`. */
+    onmove?: (id: string, index: number) => void;
+    onduplicate?: (id: string) => void;
+    ondelete?: (id: string) => void;
+    thumbnail?: Snippet<[PageItem, number]>;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    pages,
+    current = $bindable(),
+    view = $bindable('strip'),
+    onselect,
+    onadd,
+    onmove,
+    onduplicate,
+    ondelete,
+    thumbnail,
+    label = 'Pages',
+    class: className,
+  }: Props = $props();
+
+  let root = $state<HTMLElement | null>(null);
+  const grid = $derived(view === 'grid');
+  const thumbH = $derived(grid ? 128 : 56);
+  /* The page shown as current: the host's, or the first page while the host's is not in the list
+     (a page just added, before the host's list catches up). Never written back to `current`, so the
+     host's value wins as soon as its page arrives. */
+  const active = $derived(pages.some((p) => p.id === current) ? current : pages[0]?.id);
+  const index = $derived(Math.max(0, pages.findIndex((p) => p.id === active)));
+  const hasMenu = $derived(!!(onduplicate || ondelete));
+
+  let drag = $state<{ id: string; over: number; after: boolean } | null>(null);
+
+  const name = (p: PageItem, i: number) => p.label ?? `Page ${i + 1}`;
+  const thumbW = (p: PageItem) => Math.round(thumbH * (p.width && p.height ? Math.min(3, Math.max(0.5, p.width / p.height)) : 1));
+
+  /** The context-menu trigger's props with our handlers chained after its own. */
+  function withHandlers(props: Record<string, unknown>, own: Record<string, (e: never) => void>) {
+    const out: Record<string, unknown> = { ...props };
+    for (const [k, fn] of Object.entries(own)) {
+      const prev = props[k];
+      out[k] = typeof prev === 'function' ? (e: never) => (prev(e), fn(e)) : fn;
+    }
+    return out;
+  }
+
+  function select(id: string) {
+    current = id;
+    onselect?.(id);
+  }
+
+  function focusPage(id: string) {
+    queueMicrotask(() => [...(root?.querySelectorAll<HTMLElement>('[data-page]') ?? [])].find((el) => el.dataset.page === id)?.focus());
+  }
+
+  function onkeydown(e: KeyboardEvent, i: number) {
+    const back = e.key === 'ArrowLeft' || (grid && e.key === 'ArrowUp');
+    const fwd = e.key === 'ArrowRight' || (grid && e.key === 'ArrowDown');
+    if (e.altKey && onmove && (back || fwd)) {
+      const to = i + (fwd ? 1 : -1);
+      if (to < 0 || to >= pages.length) return;
+      e.preventDefault();
+      onmove(pages[i].id, to);
+      focusPage(pages[i].id);
+      return;
+    }
+    let next = -1;
+    if (back) next = Math.max(0, i - 1);
+    else if (fwd) next = Math.min(pages.length - 1, i + 1);
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = pages.length - 1;
+    else if (e.key === 'Enter' || e.key === ' ') next = i;
+    if (next < 0) return;
+    e.preventDefault();
+    select(pages[next].id);
+    focusPage(pages[next].id);
+  }
+
+  function ondragstart(e: DragEvent, p: PageItem, i: number) {
+    if (!onmove || !e.dataTransfer) return;
+    e.dataTransfer.setData(PAGE_MIME, p.id);
+    e.dataTransfer.effectAllowed = 'move';
+    drag = { id: p.id, over: i, after: false };
+  }
+
+  function ondragover(e: DragEvent, i: number) {
+    if (!drag || !Array.from(e.dataTransfer?.types ?? []).includes(PAGE_MIME)) return;
+    e.preventDefault();
+    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    drag.over = i;
+    drag.after = e.clientX > r.left + r.width / 2;
+  }
+
+  function ondrop(e: DragEvent, i: number) {
+    if (!drag || !onmove) return;
+    e.preventDefault();
+    const from = pages.findIndex((p) => p.id === drag!.id);
+    const to = reorderIndex(from, i, drag.after);
+    if (from >= 0 && to !== null) onmove(drag.id, to);
+    drag = null;
+  }
+</script>
+
+{#snippet option(p: PageItem, i: number, menuProps: Record<string, unknown> = {})}
+  {@const selected = p.id === active}
+  {@const marker = drag && drag.over === i && drag.id !== p.id ? (drag.after ? 'after' : 'before') : undefined}
+  <div
+    {...withHandlers(menuProps, {
+      onclick: () => select(p.id),
+      onkeydown: (e: KeyboardEvent) => onkeydown(e, i),
+      ondragstart: (e: DragEvent) => ondragstart(e, p, i),
+      ondragover: (e: DragEvent) => ondragover(e, i),
+      ondrop: (e: DragEvent) => ondrop(e, i),
+      ondragend: () => (drag = null),
+    })}
+    role="option"
+    aria-selected={selected}
+    aria-label={name(p, i)}
+    tabindex={selected ? 0 : -1}
+    draggable={onmove ? 'true' : undefined}
+    data-page={p.id}
+    data-drop={marker}
+    class={cn(
+      'page-thumb group relative flex shrink-0 cursor-pointer flex-col items-center gap-1 rounded-lg p-1 outline-none focus-visible:outline-2 focus-visible:outline-ripple-ring',
+      drag?.id === p.id && 'opacity-50',
+    )}
+  >
+    <span
+      class={cn(
+        'block overflow-hidden rounded-md bg-ripple-muted ring-1 transition-shadow duration-150 ease-ripple-out motion-reduce:transition-none',
+        selected ? 'ring-2 ring-ripple-accent' : 'ring-ripple-border group-hover:ring-ripple-surface-foreground/30',
+      )}
+      style:width="{thumbW(p)}px"
+      style:height="{thumbH}px"
+    >
+      {#if thumbnail}
+        {@render thumbnail(p, i)}
+      {:else if p.thumb}
+        <img src={safeUrl(p.thumb, { kind: 'resource' })} alt="" loading="lazy" decoding="async" draggable="false" class="size-full object-contain" />
+      {/if}
+    </span>
+    <span class={cn('text-[11px] tabular-nums leading-none', selected ? 'font-semibold text-ripple-accent' : 'text-ripple-muted-foreground')}>{i + 1}</span>
+  </div>
+{/snippet}
+
+{#snippet page(p: PageItem, i: number)}
+  {#if hasMenu}
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        {#snippet child({ props })}{@render option(p, i, props)}{/snippet}
+      </ContextMenu.Trigger>
+      <ContextMenu.Content class="w-44">
+        {#if onduplicate}
+          <ContextMenu.Item onSelect={() => onduplicate(p.id)}><CopyIcon size={14} aria-hidden="true" />Duplicate page</ContextMenu.Item>
+        {/if}
+        {#if ondelete}
+          <ContextMenu.Item disabled={pages.length < 2} onSelect={() => ondelete(p.id)}><TrashIcon size={14} aria-hidden="true" />Delete page</ContextMenu.Item>
+        {/if}
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  {:else}
+    {@render option(p, i)}
+  {/if}
+{/snippet}
+
+<div bind:this={root} data-slot="page-strip" data-view={view} class={cn('flex min-w-0 flex-col', className)}>
+  <div class={cn('flex min-w-0 items-center gap-2 px-3', grid ? 'pt-2 pb-1' : 'py-1.5')}>
+    <span class="shrink-0 text-[12px] font-medium text-ripple-muted-foreground">
+      {label} <span class="tabular-nums">{index + 1}/{pages.length}</span>
+    </span>
+    {#if !grid}
+      {@render list()}
+    {:else}
+      <span class="flex-1"></span>
+    {/if}
+    <button
+      type="button"
+      aria-pressed={grid}
+      aria-label="Show all pages"
+      title="Show all pages"
+      onclick={() => (view = grid ? 'strip' : 'grid')}
+      class={cn(
+        'flex size-9 shrink-0 items-center justify-center rounded-lg transition-colors duration-150 ease-ripple-out focus-visible:outline-2 focus-visible:outline-ripple-ring motion-reduce:transition-none',
+        grid ? 'bg-ripple-accent/10 text-ripple-accent' : 'text-ripple-muted-foreground hover:bg-ripple-muted hover:text-ripple-surface-foreground',
+      )}
+    >
+      <LayoutGridIcon size={18} aria-hidden="true" />
+    </button>
+  </div>
+  {#if grid}
+    <div class="max-h-[50vh] overflow-y-auto px-3 pb-3">{@render list()}</div>
+  {/if}
+</div>
+
+{#snippet list()}
+  <div class={cn('flex min-w-0 items-center gap-1', grid ? 'flex-wrap content-start gap-2' : 'flex-1 overflow-x-auto [scrollbar-width:thin]')}>
+    <div role="listbox" aria-label={label} aria-orientation={grid ? undefined : 'horizontal'} class={cn('flex items-end gap-1', grid && 'flex-wrap gap-2')}>
+      {#each pages as p, i (p.id)}
+        {@render page(p, i)}
+      {/each}
+    </div>
+    {#if onadd}
+      <button
+        type="button"
+        aria-label="Add page"
+        title="Add page"
+        onclick={() => onadd(index + 1)}
+        class="mb-[18px] flex shrink-0 items-center justify-center rounded-lg border border-dashed border-ripple-border text-ripple-muted-foreground transition-colors duration-150 ease-ripple-out hover:border-ripple-accent hover:text-ripple-accent focus-visible:outline-2 focus-visible:outline-ripple-ring motion-reduce:transition-none"
+        style:width="{grid ? 96 : 44}px"
+        style:height="{thumbH}px"
+      >
+        <PlusIcon size={grid ? 22 : 18} aria-hidden="true" />
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+<style>
+  .page-thumb[data-drop='before']::before,
+  .page-thumb[data-drop='after']::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    bottom: 18px;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--ripple-accent);
+  }
+  .page-thumb[data-drop='before']::before {
+    left: -2px;
+  }
+  .page-thumb[data-drop='after']::after {
+    right: -2px;
+  }
+</style>

package/dist/widgets/craft/PageStrip.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import { type PageItem } from './page-strip.js';
+interface Props {
+    pages: PageItem[];
+    /** Current page id. Bindable; defaults to the first page. */
+    current?: string;
+    /** Bindable. */
+    view?: 'strip' | 'grid';
+    onselect?: (id: string) => void;
+    /** Add a page at this index (after the current page). */
+    onadd?: (index: number) => void;
+    /** Move page `id` so it ends up at `index`. */
+    onmove?: (id: string, index: number) => void;
+    onduplicate?: (id: string) => void;
+    ondelete?: (id: string) => void;
+    thumbnail?: Snippet<[PageItem, number]>;
+    label?: string;
+    class?: string;
+}
+declare const PageStrip: import("svelte").Component<Props, {}, "view" | "current">;
+type PageStrip = ReturnType<typeof PageStrip>;
+export default PageStrip;

package/dist/widgets/craft/PropertyRow.svelte

@@ -0,0 +1,59 @@
+<!--
+  widgets/craft/PropertyRow.svelte
+  One compact inspector field: label on the left, control on the right, on a
+  fixed label column (`labelWidth`, default 4.5rem) so every row in a panel
+  shares one aligned label edge and one control edge. On `./ui` only.
+  - The control column is a flex row whose children may shrink (min-w-0);
+    compact NumberInputs fill it, so a lone field is exactly as wide as a
+    two-up pair below it.
+  - `stacked` puts the label above a full-width control (a textarea, a long
+    icon group) for rows that need the whole panel width.
+  - Pass `for` with the control's id to get a real <label>; otherwise the label
+    is a span. Either way the row publishes its label (input/field-name.ts), and
+    a NumberInput or ColorPicker inside it with no label of its own takes it as
+    its accessible name. `hint` is the row's tooltip. Tokens only.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { provideFieldName } from '../input/field-name.js';
+
+  interface Props {
+    label: string;
+    /** id of the control, for a <label for>. */
+    for?: string;
+    hint?: string;
+    labelWidth?: string;
+    stacked?: boolean;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let { label, for: htmlFor, hint, labelWidth = '4.5rem', stacked = false, children, class: className }: Props = $props();
+  provideFieldName(() => label);
+</script>
+
+{#snippet text()}
+  {#if htmlFor}
+    <label for={htmlFor} class="truncate text-ripple-muted-foreground">{label}</label>
+  {:else}
+    <span class="truncate text-ripple-muted-foreground">{label}</span>
+  {/if}
+{/snippet}
+
+{#if stacked}
+  <div data-slot="property-row" class={cn('flex flex-col gap-1.5 px-3 py-0.5 text-[12px]', className)} title={hint}>
+    {@render text()}
+    <div class="flex min-w-0 items-center gap-1.5">{@render children?.()}</div>
+  </div>
+{:else}
+  <div
+    data-slot="property-row"
+    class={cn('grid min-h-7 items-center gap-2 px-3 text-[12px]', className)}
+    style:grid-template-columns="{labelWidth} minmax(0, 1fr)"
+    title={hint}
+  >
+    {@render text()}
+    <div class="flex min-w-0 items-center gap-1.5">{@render children?.()}</div>
+  </div>
+{/if}

package/dist/widgets/craft/PropertyRow.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    /** id of the control, for a <label for>. */
+    for?: string;
+    hint?: string;
+    labelWidth?: string;
+    stacked?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+declare const PropertyRow: import("svelte").Component<Props, {}, "">;
+type PropertyRow = ReturnType<typeof PropertyRow>;
+export default PropertyRow;

package/dist/widgets/craft/ResizeHandle.svelte

@@ -0,0 +1,67 @@
+<!--
+  widgets/craft/ResizeHandle.svelte
+  Internal to EditorShell (not exported): the drag gutter that sets a side
+  panel's width in px. role="slider" with arrow keys (Shift = 32px steps),
+  the same pattern as layout/Split, because svelte-ignore does not silence
+  a11y_* under $props(). `edge` says which side the panel is on, so a drag
+  toward the centre always widens it.
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: number;
+    min: number;
+    max: number;
+    edge: 'left' | 'right';
+    label: string;
+  }
+
+  let { value = $bindable(), min, max, edge, label }: Props = $props();
+
+  let drag: { x: number; w: number } | null = $state(null);
+  const clampW = (w: number) => Math.round(Math.min(max, Math.max(min, w)));
+  const sign = $derived(edge === 'left' ? 1 : -1);
+
+  function onpointerdown(e: PointerEvent) {
+    e.preventDefault();
+    drag = { x: e.clientX, w: value };
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+  }
+  function onpointermove(e: PointerEvent) {
+    if (drag) value = clampW(drag.w + (e.clientX - drag.x) * sign);
+  }
+  function onpointerup(e: PointerEvent) {
+    drag = null;
+    (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+  }
+  function onkeydown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 32 : 8;
+    if (e.key === 'ArrowRight') value = clampW(value + step * sign);
+    else if (e.key === 'ArrowLeft') value = clampW(value - step * sign);
+    else return;
+    e.preventDefault();
+  }
+</script>
+
+<div
+  role="slider"
+  aria-label={label}
+  aria-orientation="vertical"
+  aria-valuenow={value}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  tabindex="0"
+  data-slot="resize-handle"
+  class={cn(
+    'relative z-10 -mx-1 w-2 shrink-0 cursor-col-resize outline-none',
+    'after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:transition-colors',
+    'hover:after:bg-ripple-accent/50 focus-visible:after:bg-ripple-accent',
+    drag && 'after:bg-ripple-accent'
+  )}
+  {onpointerdown}
+  {onpointermove}
+  {onpointerup}
+  onpointercancel={onpointerup}
+  {onkeydown}
+></div>

package/dist/widgets/craft/ResizeHandle.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    value: number;
+    min: number;
+    max: number;
+    edge: 'left' | 'right';
+    label: string;
+}
+declare const ResizeHandle: import("svelte").Component<Props, {}, "value">;
+type ResizeHandle = ReturnType<typeof ResizeHandle>;
+export default ResizeHandle;

package/dist/widgets/craft/ToolRail.svelte

@@ -0,0 +1,163 @@
+<!--
+  widgets/craft/ToolRail.svelte
+  The tool picker of a craft editor (vector, photo, layout): a vertical or
+  horizontal strip of icon buttons with exactly one active tool. On `./ui`
+  only (no registry or manifest entry).
+
+  - role="toolbar" with roving tabindex: the active tool is the tab stop, the
+    arrow keys move focus (both axes work), Home/End jump, Enter/Space select.
+  - Each button carries aria-pressed and aria-keyshortcuts, and a tooltip with
+    the label and the hotkey.
+  - `hotkeys` (opt-in) listens on window for an unmodified single key matching
+    a tool's `hotkey`. It ignores keys aimed at text fields, keys while a
+    dialog, menu, listbox or popover is open, and keys while the rail sits in
+    an inert subtree (`hotkeysBlocked` in types.ts).
+  - Icons come from the `icon` snippet (the host maps `tool.icon` to a glyph);
+    without one the button shows the label's first letter.
+  - Consecutive tools sharing `group` render as one role="group", with a
+    hairline separator between groups.
+  Tokens only, no colour literals.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import * as Tooltip from '../../components/ui/tooltip/index.js';
+  import { type CraftTool, hotkeysBlocked, isEditableTarget } from './types.js';
+
+  interface Props {
+    tools: CraftTool[];
+    /** Active tool id. Bindable; `onselect` fires either way. */
+    active?: string;
+    onselect?: (id: string) => void;
+    orientation?: 'vertical' | 'horizontal';
+    /** Listen on window for single-key tool hotkeys. Off by default. */
+    hotkeys?: boolean;
+    /** Show each group's name as a small caption. */
+    showGroupLabels?: boolean;
+    icon?: Snippet<[CraftTool]>;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    tools,
+    active = $bindable(),
+    onselect,
+    orientation = 'vertical',
+    hotkeys = false,
+    showGroupLabels = false,
+    icon,
+    label = 'Tools',
+    class: className,
+  }: Props = $props();
+
+  let root = $state<HTMLDivElement | null>(null);
+
+  const groups = $derived.by(() => {
+    const out: { name?: string; tools: CraftTool[] }[] = [];
+    for (const t of tools) {
+      const last = out.at(-1);
+      if (last && last.name === t.group) last.tools.push(t);
+      else out.push({ name: t.group, tools: [t] });
+    }
+    return out;
+  });
+
+  const enabled = $derived(tools.filter((t) => !t.disabled));
+  // The tab stop: the active tool, or the first enabled one.
+  const stop = $derived(enabled.some((t) => t.id === active) ? active : enabled[0]?.id);
+
+  function select(id: string) {
+    active = id;
+    onselect?.(id);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    const prev = ['ArrowUp', 'ArrowLeft'].includes(e.key);
+    const next = ['ArrowDown', 'ArrowRight'].includes(e.key);
+    if (!prev && !next && e.key !== 'Home' && e.key !== 'End') return;
+    const buttons = [...(root?.querySelectorAll<HTMLButtonElement>('button[data-tool]:not(:disabled)') ?? [])];
+    if (!buttons.length) return;
+    e.preventDefault();
+    const i = buttons.indexOf(document.activeElement as HTMLButtonElement);
+    const n = buttons.length;
+    const to = e.key === 'Home' ? 0 : e.key === 'End' ? n - 1 : (i + (next ? 1 : -1) + n) % n;
+    buttons[to].focus();
+  }
+
+  $effect(() => {
+    if (!hotkeys) return;
+    const onWindowKey = (e: KeyboardEvent) => {
+      if (e.repeat || e.ctrlKey || e.metaKey || e.altKey || isEditableTarget(e.target) || hotkeysBlocked(root)) return;
+      const hit = enabled.find((t) => t.hotkey && t.hotkey.toLowerCase() === e.key.toLowerCase());
+      if (!hit) return;
+      e.preventDefault();
+      select(hit.id);
+    };
+    window.addEventListener('keydown', onWindowKey);
+    return () => window.removeEventListener('keydown', onWindowKey);
+  });
+</script>
+
+<div
+  bind:this={root}
+  role="toolbar"
+  aria-label={label}
+  aria-orientation={orientation}
+  tabindex="-1"
+  {onkeydown}
+  data-slot="tool-rail"
+  class={cn(
+    'flex gap-1 p-1',
+    orientation === 'vertical' ? 'flex-col items-center' : 'flex-row items-center',
+    className
+  )}
+>
+  {#each groups as g, gi (gi)}
+    {#if gi > 0}
+      <div
+        aria-hidden="true"
+        class={cn('shrink-0 bg-ripple-border', orientation === 'vertical' ? 'my-0.5 h-px w-5' : 'mx-0.5 h-5 w-px')}
+      ></div>
+    {/if}
+    <div
+      role="group"
+      aria-label={g.name}
+      class={cn('flex gap-0.5', orientation === 'vertical' ? 'flex-col items-center' : 'flex-row items-center')}
+    >
+      {#if showGroupLabels && g.name}
+        <span class="px-1 text-[10px] font-medium uppercase tracking-wide text-ripple-muted-foreground">{g.name}</span>
+      {/if}
+      {#each g.tools as tool (tool.id)}
+        {@const on = tool.id === active}
+        <Tooltip.Root delayDuration={400}>
+          <Tooltip.Trigger
+            data-tool={tool.id}
+            aria-label={tool.label}
+            aria-pressed={on ? 'true' : 'false'}
+            aria-keyshortcuts={tool.hotkey}
+            disabled={tool.disabled}
+            tabindex={tool.id === stop ? 0 : -1}
+            onclick={() => select(tool.id)}
+            class={cn(
+              'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-[13px] outline-none',
+              'text-ripple-muted-foreground transition-colors duration-150 ease-ripple-out',
+              'hover:bg-ripple-accent/10 hover:text-ripple-surface-foreground',
+              'focus-visible:ring-2 focus-visible:ring-ripple-ring/60',
+              'disabled:pointer-events-none disabled:opacity-40',
+              on && 'bg-ripple-accent/15 text-ripple-accent hover:bg-ripple-accent/20 hover:text-ripple-accent'
+            )}
+          >
+            {#if icon}{@render icon(tool)}{:else}<span aria-hidden="true">{tool.label.charAt(0)}</span>{/if}
+          </Tooltip.Trigger>
+          <Tooltip.Content side={orientation === 'vertical' ? 'right' : 'bottom'} sideOffset={6}>
+            {tool.label}
+            {#if tool.hotkey}
+              <kbd data-slot="kbd" class="rounded-sm px-1 font-mono text-[10px] uppercase opacity-70">{tool.hotkey}</kbd>
+            {/if}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      {/each}
+    </div>
+  {/each}
+</div>

package/dist/widgets/craft/ToolRail.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type CraftTool } from './types.js';
+interface Props {
+    tools: CraftTool[];
+    /** Active tool id. Bindable; `onselect` fires either way. */
+    active?: string;
+    onselect?: (id: string) => void;
+    orientation?: 'vertical' | 'horizontal';
+    /** Listen on window for single-key tool hotkeys. Off by default. */
+    hotkeys?: boolean;
+    /** Show each group's name as a small caption. */
+    showGroupLabels?: boolean;
+    icon?: Snippet<[CraftTool]>;
+    label?: string;
+    class?: string;
+}
+declare const ToolRail: import("svelte").Component<Props, {}, "active">;
+type ToolRail = ReturnType<typeof ToolRail>;
+export default ToolRail;