@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/craft/ContextToolbar.svelte

@@ -0,0 +1,162 @@
+<!--
+  widgets/craft/ContextToolbar.svelte
+  The selection-aware toolbar of a craft editor: the five to seven edits that
+  matter for what is selected (font, size, colour, effects, "Ask Paw"), with a
+  `>>` button that opens the full edit panel for it. On `./ui` only.
+
+  - variant 'floating' (Quick mode): absolutely positioned in its parent, centred
+    over `anchor` (the selection's rect in SCREEN space, the frame CanvasViewport's
+    `overlay` and EditorShell's `floating` layer share). It flips below when there
+    is no room above, clamps inside the parent (or `bounds`), and hides when the
+    anchor leaves the view or is null. Maths in `toolbar-math.ts`.
+  - variant 'docked' (Pro density): an in-flow bar on --ripple-surface; no anchor.
+  - The host's controls are `children`. `panel` (InspectorSection content) opens
+    in a portaled popover from `>>`, so it escapes the stage's clipping.
+  - Only the bar itself takes pointer events. It carries `data-canvas-ui`, so a
+    CanvasViewport never treats a press on it as a canvas gesture. Prefer mounting
+    it in EditorShell's `floating` slot, outside the stage.
+  - role="toolbar"; Left/Right/Home/End move focus between its buttons (inputs
+    keep their arrows). Floating paints on --ripple-popover with a blur, fades in,
+    and drops the fade under prefers-reduced-motion.
+  Tokens only, no colour literals.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import * as Popover from '../../components/ui/popover/index.js';
+  import ChevronsRightIcon from '@lucide/svelte/icons/chevrons-right';
+  import { placeToolbar, type Size } from './toolbar-math.js';
+  import type { ScreenRect } from './types.js';
+
+  interface Props {
+    variant?: 'floating' | 'docked';
+    /** The selection's rect in screen space. Null or absent hides a floating bar. */
+    anchor?: ScreenRect | null;
+    /** The space to stay inside. Defaults to the parent element's size. */
+    bounds?: Size;
+    prefer?: 'top' | 'bottom';
+    /** Space between the selection and the bar, px. */
+    gap?: number;
+    /** The host's controls. */
+    children?: Snippet;
+    /** The full edit panel behind `>>`. No panel, no `>>` button. */
+    panel?: Snippet;
+    panelTitle?: string;
+    /** Bindable. */
+    panelOpen?: boolean;
+    moreLabel?: string;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    variant = 'floating',
+    anchor = null,
+    bounds,
+    prefer = 'top',
+    gap = 8,
+    children,
+    panel,
+    panelTitle = 'Edit',
+    panelOpen = $bindable(false),
+    moreLabel = 'More options',
+    label = 'Selection tools',
+    class: className,
+  }: Props = $props();
+
+  const floating = $derived(variant === 'floating');
+
+  let root = $state<HTMLDivElement | null>(null);
+  let width = $state(0);
+  let height = $state(0);
+  let parentSize = $state<Size>({ width: 0, height: 0 });
+
+  $effect(() => {
+    const parent = floating && !bounds ? root?.parentElement : null;
+    if (!parent) return;
+    const read = () => (parentSize = { width: parent.clientWidth, height: parent.clientHeight });
+    read();
+    if (typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(read);
+    ro.observe(parent);
+    return () => ro.disconnect();
+  });
+
+  const place = $derived(
+    floating && anchor ? placeToolbar(anchor, { width, height }, bounds ?? parentSize, { prefer, gap }) : null,
+  );
+  /* Unmeasured (first frame) counts as hidden, so the bar never flashes at 0,0. */
+  const hidden = $derived(floating && (!place || place.hidden || width === 0));
+
+  $effect(() => {
+    if (hidden && panelOpen) panelOpen = false;
+  });
+
+  function onkeydown(e: KeyboardEvent) {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;
+    const target = e.target as HTMLElement;
+    if (target.tagName !== 'BUTTON' || !root) return;
+    const items = [...root.querySelectorAll<HTMLElement>('button:not([disabled])')];
+    const i = items.indexOf(target);
+    if (i < 0) return;
+    e.preventDefault();
+    const next =
+      e.key === 'Home' ? 0
+      : e.key === 'End' ? items.length - 1
+      : (i + (e.key === 'ArrowRight' ? 1 : -1) + items.length) % items.length;
+    items[next].focus();
+  }
+</script>
+
+<div
+  bind:this={root}
+  bind:offsetWidth={width}
+  bind:offsetHeight={height}
+  role="toolbar"
+  tabindex="-1"
+  aria-label={label}
+  aria-orientation="horizontal"
+  aria-hidden={hidden || undefined}
+  data-slot="context-toolbar"
+  data-variant={variant}
+  data-side={place?.side}
+  data-canvas-ui=""
+  inert={hidden || undefined}
+  {onkeydown}
+  class={cn(
+    'flex items-center gap-1',
+    floating
+      ? 'pointer-events-auto absolute top-0 left-0 z-10 w-max max-w-[calc(100%-16px)] rounded-xl bg-ripple-popover p-1 text-ripple-popover-foreground shadow-md ring-1 ring-ripple-border backdrop-blur-md transition-opacity duration-150 ease-ripple-out motion-reduce:transition-none'
+      : 'min-h-11 w-full border-b border-ripple-border bg-ripple-surface px-2 py-1 text-ripple-surface-foreground',
+    className,
+  )}
+  style:transform={place ? `translate(${place.x}px, ${place.y}px)` : undefined}
+  style:opacity={floating ? (hidden ? 0 : 1) : undefined}
+  style:visibility={hidden ? 'hidden' : undefined}
+>
+  {@render children?.()}
+  {#if panel}
+    <Popover.Root bind:open={panelOpen}>
+      <Popover.Trigger
+        aria-label={moreLabel}
+        title={moreLabel}
+        class="ml-0.5 inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-ripple-muted-foreground transition-colors duration-150 ease-ripple-out hover:bg-ripple-muted hover:text-current focus-visible:outline-2 focus-visible:outline-ripple-ring aria-expanded:bg-ripple-muted aria-expanded:text-current motion-reduce:transition-none"
+      >
+        <ChevronsRightIcon size={18} aria-hidden="true" />
+      </Popover.Trigger>
+      <Popover.Content
+        side={floating ? (place?.side ?? 'bottom') : 'bottom'}
+        align="end"
+        sideOffset={8}
+        data-slot="context-toolbar-panel"
+        aria-label={panelTitle}
+        class="max-h-[min(70vh,34rem)] w-80 gap-0 overflow-y-auto p-0"
+      >
+        <div class="sticky top-0 z-10 border-b border-ripple-border bg-ripple-popover px-3 py-2 text-[13px] font-semibold">
+          {panelTitle}
+        </div>
+        <div class="py-1">{@render panel()}</div>
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+</div>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import { type Size } from './toolbar-math.js';
+import type { ScreenRect } from './types.js';
+interface Props {
+    variant?: 'floating' | 'docked';
+    /** The selection's rect in screen space. Null or absent hides a floating bar. */
+    anchor?: ScreenRect | null;
+    /** The space to stay inside. Defaults to the parent element's size. */
+    bounds?: Size;
+    prefer?: 'top' | 'bottom';
+    /** Space between the selection and the bar, px. */
+    gap?: number;
+    /** The host's controls. */
+    children?: Snippet;
+    /** The full edit panel behind `>>`. No panel, no `>>` button. */
+    panel?: Snippet;
+    panelTitle?: string;
+    /** Bindable. */
+    panelOpen?: boolean;
+    moreLabel?: string;
+    label?: string;
+    class?: string;
+}
+declare const ContextToolbar: import("svelte").Component<Props, {}, "panelOpen">;
+type ContextToolbar = ReturnType<typeof ContextToolbar>;
+export default ContextToolbar;

package/dist/widgets/craft/EditorShell.svelte

@@ -0,0 +1,196 @@
+<!--
+  widgets/craft/EditorShell.svelte
+  The layout every craft editor shares (vector, photo, layout), at two densities.
+  On `./ui` only (no registry or manifest entry).
+
+    ┌ title ┬─────────── topbar ─────────────┐
+    │rail│ left │  children + floating │ right │
+    │    │  ⇔   │  prompt              │ ⇔ tabs│
+    ├──────────────── pages ─────────────────┤
+    └──────────────── status ────────────────┘
+
+  Every region is an optional snippet. `title` never shrinks; `topbar` takes the
+  rest of the row, scrolls sideways when crowded, and its root fills the region so
+  a host's flex-1 spacer pushes trailing controls right. `left` / `right` are
+  resizable px panels (`leftWidth`, `rightWidth`, bindable; `minPanel` 180, the
+  right floor `minRight` 240) hidden with `leftOpen` / `rightOpen`. `rightTabs`
+  tabs the right panel and `right` gets the active tab id (only that tab mounts).
+  `data-slot="editor-center"` wraps the canvas: `relative`, clipping, sized.
+  `floating` is a pointer-transparent layer over the canvas whose interactive children
+  (buttons, links, inputs, role=button) take clicks again, so a badge or toolbar floated
+  there works; a ContextToolbar also sets pointer-events back on itself, and while hidden
+  it is visibility: hidden, so it never swallows a canvas click. `prompt` sits under the canvas, `pages` above
+  the status bar. All three render at either density.
+
+  density 'pro' (default) is the layout above. 'quick' is the simple front door:
+  no rail, a taller topbar, and `left` sized by its content with no resize handle
+  (an AssetPanel owns its own width and collapse). The shell paints no background,
+  so a host's frosted glass shows through; panels sit on --ripple-surface with
+  --ripple-border hairlines. Not layout/Split (percent-based, imports the
+  renderer). Tokens only, no colour literals.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import * as Tabs from '../../components/ui/tabs/index.js';
+  import ResizeHandle from './ResizeHandle.svelte';
+  import type { EditorPanelTab } from './types.js';
+
+  interface Props {
+    /** Left end of the top bar; never shrinks or gets overlapped. */
+    title?: Snippet;
+    topbar?: Snippet;
+    rail?: Snippet;
+    left?: Snippet;
+    children?: Snippet;
+    right?: Snippet<[string]>;
+    status?: Snippet;
+    /** Pointer-transparent layer over the canvas (its buttons, links and inputs still take clicks), for a floating ContextToolbar or badges. */
+    floating?: Snippet;
+    /** Row under the canvas, for a prompt bar. */
+    prompt?: Snippet;
+    /** Row above the status bar, for a PageStrip. */
+    pages?: Snippet;
+    /** 'pro' (default): rail + resizable panels. 'quick': no rail, content-sized left panel. */
+    density?: 'quick' | 'pro';
+    rightTabs?: EditorPanelTab[];
+    /** Active right-panel tab id. Defaults to the first tab. */
+    rightTab?: string;
+    leftOpen?: boolean;
+    rightOpen?: boolean;
+    leftWidth?: number;
+    rightWidth?: number;
+    minPanel?: number;
+    /** The right panel's minimum; inspectors need more room than a left list. */
+    minRight?: number;
+    maxPanel?: number;
+    class?: string;
+  }
+
+  let {
+    title,
+    topbar,
+    rail,
+    left,
+    children,
+    right,
+    status,
+    floating,
+    prompt,
+    pages,
+    density = 'pro',
+    rightTabs = [],
+    rightTab = $bindable(),
+    leftOpen = $bindable(true),
+    rightOpen = $bindable(true),
+    leftWidth = $bindable(240),
+    rightWidth = $bindable(280),
+    minPanel = 180,
+    minRight = 240,
+    maxPanel = 520,
+    class: className,
+  }: Props = $props();
+
+  const quick = $derived(density === 'quick');
+
+  $effect.pre(() => {
+    if (rightTabs.length && !rightTabs.some((t) => t.id === rightTab)) rightTab = rightTabs[0].id;
+  });
+</script>
+
+{#snippet canvas()}
+  <main
+    data-slot="editor-center"
+    class={cn('relative min-w-0 flex-1 overflow-hidden', prompt && 'min-h-0', !prompt && left && leftOpen && 'border-l border-ripple-border')}
+  >
+    {@render children?.()}
+    {#if floating}
+      <!-- See-through over the canvas, except what can be clicked: a hidden ContextToolbar stays unclickable (visibility: hidden). -->
+      <div data-slot="editor-floating" class="pointer-events-none absolute inset-0 z-10 [&_:is(button,a[href],input,select,textarea,[role=button])]:pointer-events-auto">{@render floating()}</div>
+    {/if}
+  </main>
+{/snippet}
+
+<div
+  data-slot="editor-shell"
+  data-density={density}
+  class={cn('flex size-full min-h-0 flex-col overflow-hidden text-ripple-surface-foreground', className)}
+>
+  {#if title || typeof topbar === 'function'}
+    <div data-slot="editor-topbar" class="flex {quick ? 'min-h-12 px-3' : 'min-h-10 px-2'} shrink-0 items-center gap-2 border-b border-ripple-border bg-ripple-surface">
+      {#if title}
+        <div data-slot="editor-title" class="flex shrink-0 items-center">{@render title()}</div>
+      {/if}
+      {#if typeof topbar === 'function'}
+        <div data-slot="editor-tools" class="flex min-w-0 flex-1 items-center overflow-x-auto [scrollbar-width:thin] [&>*]:flex-1">{@render topbar()}</div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="flex min-h-0 flex-1">
+    {#if rail && !quick}
+      <div data-slot="editor-rail" class="flex shrink-0 flex-col border-r border-ripple-border bg-ripple-surface">
+        {@render rail()}
+      </div>
+    {/if}
+
+    {#if left && leftOpen && quick}
+      <aside data-slot="editor-left" class="flex min-h-0 shrink-0 flex-col bg-ripple-surface">
+        {@render left()}
+      </aside>
+    {:else if left && leftOpen}
+      <aside data-slot="editor-left" class="flex min-h-0 shrink-0 flex-col overflow-auto bg-ripple-surface" style:width="{leftWidth}px">
+        {@render left()}
+      </aside>
+      <ResizeHandle bind:value={leftWidth} min={minPanel} max={maxPanel} edge="left" label="Resize left panel" />
+    {/if}
+
+    {#if prompt}
+      <div class={cn('flex min-w-0 flex-1 flex-col', left && leftOpen && 'border-l border-ripple-border')}>
+        {@render canvas()}
+        <div data-slot="editor-prompt" class="shrink-0 px-3 pt-2 pb-3">{@render prompt()}</div>
+      </div>
+    {:else}
+      {@render canvas()}
+    {/if}
+
+    {#if right && rightOpen}
+      <ResizeHandle bind:value={rightWidth} min={minRight} max={maxPanel} edge="right" label="Resize right panel" />
+      <aside
+        data-slot="editor-right"
+        class="flex min-h-0 shrink-0 flex-col border-l border-ripple-border bg-ripple-surface"
+        style:width="{rightWidth}px"
+      >
+        {#if rightTabs.length && rightTab}
+          <Tabs.Root bind:value={rightTab} class="min-h-0 flex-1 gap-0">
+            <div class="shrink-0 border-b border-ripple-border p-1.5">
+              <Tabs.List class="h-7 w-full">
+                {#each rightTabs as tab (tab.id)}
+                  <Tabs.Trigger value={tab.id} class="text-[12px]">{tab.label}</Tabs.Trigger>
+                {/each}
+              </Tabs.List>
+            </div>
+            <Tabs.Content value={rightTab} class="min-h-0 flex-1 overflow-auto">
+              {#key rightTab}{@render right(rightTab)}{/key}
+            </Tabs.Content>
+          </Tabs.Root>
+        {:else}
+          <div class="min-h-0 flex-1 overflow-auto">{@render right('')}</div>
+        {/if}
+      </aside>
+    {/if}
+  </div>
+
+  {#if pages}
+    <div data-slot="editor-pages" class="shrink-0 border-t border-ripple-border bg-ripple-surface">{@render pages()}</div>
+  {/if}
+
+  {#if status}
+    <div
+      data-slot="editor-status"
+      class="flex h-6 shrink-0 items-center gap-3 border-t border-ripple-border bg-ripple-surface px-2 text-[11px] tabular-nums text-ripple-muted-foreground"
+    >
+      {@render status()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { EditorPanelTab } from './types.js';
+interface Props {
+    /** Left end of the top bar; never shrinks or gets overlapped. */
+    title?: Snippet;
+    topbar?: Snippet;
+    rail?: Snippet;
+    left?: Snippet;
+    children?: Snippet;
+    right?: Snippet<[string]>;
+    status?: Snippet;
+    /** Pointer-transparent layer over the canvas (its buttons, links and inputs still take clicks), for a floating ContextToolbar or badges. */
+    floating?: Snippet;
+    /** Row under the canvas, for a prompt bar. */
+    prompt?: Snippet;
+    /** Row above the status bar, for a PageStrip. */
+    pages?: Snippet;
+    /** 'pro' (default): rail + resizable panels. 'quick': no rail, content-sized left panel. */
+    density?: 'quick' | 'pro';
+    rightTabs?: EditorPanelTab[];
+    /** Active right-panel tab id. Defaults to the first tab. */
+    rightTab?: string;
+    leftOpen?: boolean;
+    rightOpen?: boolean;
+    leftWidth?: number;
+    rightWidth?: number;
+    minPanel?: number;
+    /** The right panel's minimum; inspectors need more room than a left list. */
+    minRight?: number;
+    maxPanel?: number;
+    class?: string;
+}
+declare const EditorShell: import("svelte").Component<Props, {}, "rightTab" | "leftOpen" | "rightOpen" | "leftWidth" | "rightWidth">;
+type EditorShell = ReturnType<typeof EditorShell>;
+export default EditorShell;

package/dist/widgets/craft/InspectorSection.svelte

@@ -0,0 +1,64 @@
+<!--
+  widgets/craft/InspectorSection.svelte
+  A titled group of inspector rows (Transform, Fill, Text …) for a dense side
+  panel. On `./ui` only. The title is a 12px semibold sentence-case label on the
+  same left edge as PropertyRow's labels (px-3), the disclosure chevron sits at
+  the right, and sections are divided by a hairline, so a stack of sections
+  reads as calm bands with a clear hierarchy: section title > row label.
+  `open` is bindable; `collapsible={false}` renders a plain heading. `meta` is a
+  muted note after the title (the selection's kind, a count). `actions` sits at
+  the right of the header (an add button) and never toggles the section.
+  Tokens only.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+  interface Props {
+    title: string;
+    open?: boolean;
+    collapsible?: boolean;
+    /** Muted text after the title, e.g. the selected object's kind. */
+    meta?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let { title, open = $bindable(true), collapsible = true, meta, actions, children, class: className }: Props = $props();
+  const shown = $derived(!collapsible || open);
+</script>
+
+{#snippet heading()}
+  <span class="truncate text-[12px] font-semibold text-ripple-surface-foreground">{title}</span>
+  {#if meta}<span class="truncate text-[11px] text-ripple-muted-foreground">{meta}</span>{/if}
+{/snippet}
+
+<section data-slot="inspector-section" class={cn('border-b border-ripple-border/70 pb-2 last:border-b-0', className)}>
+  <div class="flex h-9 items-center gap-1 pl-3 pr-1.5">
+    {#if collapsible}
+      <button
+        type="button"
+        aria-expanded={open}
+        onclick={() => (open = !open)}
+        class="group/sec flex h-7 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-sm text-left outline-none focus-visible:ring-2 focus-visible:ring-ripple-ring/60"
+      >
+        {@render heading()}
+        <ChevronDownIcon
+          size={13}
+          class={cn(
+            'ml-auto mr-1 shrink-0 text-ripple-muted-foreground opacity-60 transition-[transform,opacity] duration-150 ease-ripple-out group-hover/sec:opacity-100',
+            !open && '-rotate-90'
+          )}
+        />
+      </button>
+    {:else}
+      <h3 class="flex min-w-0 flex-1 items-center gap-2">{@render heading()}</h3>
+    {/if}
+    {#if typeof actions === 'function'}<div class="flex shrink-0 items-center gap-0.5">{@render actions()}</div>{/if}
+  </div>
+  {#if shown}
+    <div class="flex flex-col gap-1">{@render children?.()}</div>
+  {/if}
+</section>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    open?: boolean;
+    collapsible?: boolean;
+    /** Muted text after the title, e.g. the selected object's kind. */
+    meta?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const InspectorSection: import("svelte").Component<Props, {}, "open">;
+type InspectorSection = ReturnType<typeof InspectorSection>;
+export default InspectorSection;