@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/editor/RippleEditorOverlay.svelte

@@ -0,0 +1,204 @@
+<!--
+  @file editor/RippleEditorOverlay.svelte
+  @description L2 (Svelte) selection + hover overlay for the Ripple visual editor.
+    Given a render `container` (the element wrapping a mounted <Ripple>), it:
+      - delegates ONE click + ONE mousemove (+ mouseleave) listener on the
+        container, resolving the event target to a node id via the L1
+        `resolveElementToNodeId` (SELECT-PARENT ancestor walk for the widgets
+        that don't forward `id`), and updates an `EditorSelection`;
+      - draws an absolutely-positioned selection box and hover box using the L1
+        `BoundsIndex` (id -> container-relative Rect) + `rectToStyle`.
+    Re-measures the index on mount, whenever `renderVersion` changes (the host
+    bumps it after a spec edit / re-render — the renderVersion-guard idea lifted
+    from svelte-visual-builder's BuilderPreview), and on container resize
+    (ResizeObserver, feature-detected so jsdom doesn't crash). The overlay is
+    `pointer-events: none` so it never eats clicks; the listeners live on the
+    container, and the overlay needs a positioned ancestor shared with the
+    container so box coordinates line up.
+
+    SCOPE (SP-1a): selection + overlay ONLY. No inline text edit (SP-1b), no
+    drag/drop (SP-1c), no persistence. Pixel-correct box positioning needs
+    BROWSER confirmation — jsdom returns zero rects.
+  @created 2026-06-27 (SP-1a — branch spike/editor-domid-overlay)
+  @changes 2026-06-30 (EP-2): selection/hover RESOLUTION now routes through the
+    LaneAdapter port (`adapter.resolveElement(el)`), not the direct L1
+    `resolveElementToNodeId`. DOM GEOMETRY stays lane-agnostic and local: the
+    overlay still measures rects with `buildBoundsIndex`/`BoundsIndex` and draws
+    boxes by uid, and still takes `knownIds` PURELY as the geometry id allow-list
+    (the adapter carries its own knownIds + boundary for resolution). Behavior is
+    byte-identical to the pre-port overlay.
+-->
+<script lang="ts">
+  import { buildBoundsIndex, BoundsIndex, type LaneAdapter } from './core/index.js';
+import { rectToStyle } from './core/index.js';
+  import { EditorSelection } from './editor-selection.svelte.js';
+
+  interface Props {
+    /** The lane adapter clicks/hovers RESOLVE through — the only port seam the overlay touches. */
+    adapter: LaneAdapter;
+    /** Element wrapping the mounted <Ripple> whose nodes are measured/selected. */
+    container?: HTMLElement | null;
+    /** Shared selection store; one is created if omitted. */
+    selection?: EditorSelection;
+    /** Bump to force a re-measure after a spec edit / re-render. */
+    renderVersion?: number;
+    /**
+     * Node ids known from the spec — the precise id allow-list for GEOMETRY
+     * (buildBoundsIndex). Resolution does NOT use this: the adapter carries its
+     * own knownIds + boundary. Kept because the bounds index still measures rects
+     * by node id (a lane-agnostic DOM concern, not a port one).
+     */
+    knownIds?: Set<string> | null;
+    /** When false, listeners detach and the boxes hide (preview mode). */
+    enabled?: boolean;
+    /** Fired after a click resolves (id, or null when clicking empty space). */
+    onselect?: (id: string | null) => void;
+    /** Fired as the hovered node changes (id or null). */
+    onhover?: (id: string | null) => void;
+  }
+
+  let {
+    adapter,
+    container = null,
+    selection = new EditorSelection(),
+    renderVersion = 0,
+    knownIds = null,
+    enabled = true,
+    onselect,
+    onhover
+  }: Props = $props();
+
+  // Resolve a DOM event target to a node uid THROUGH THE PORT. The adapter carries
+  // its own knownIds + boundary (the stage), so this is identical to the pre-port
+  // resolveElementToNodeId(target, { knownIds, boundary: container }).
+  function resolveId(target: EventTarget | null): string | null {
+    return target instanceof Element ? (adapter.resolveElement(target)?.uid ?? null) : null;
+  }
+
+  let index = $state<BoundsIndex | null>(null);
+  // Local re-measure trigger, bumped by the ResizeObserver. Combined with the
+  // host's `renderVersion` and `knownIds` to drive the measure effect.
+  let measureTick = $state(0);
+
+  // Re-measure whenever the container, the host's renderVersion, the knownIds
+  // set, or the resize tick changes. The reads below are tracked dependencies.
+  $effect(() => {
+    void renderVersion;
+    void measureTick;
+    void knownIds;
+    if (!container) {
+      index = null;
+      return;
+    }
+    index = buildBoundsIndex(container, { knownIds });
+  });
+
+  // Delegate the interaction listeners on the container + observe its size.
+  // Everything is torn down via the returned cleanup, so re-running on a
+  // container/enabled change never leaks listeners.
+  $effect(() => {
+    const el = container;
+    if (!el || !enabled) return;
+
+    const onClick = (e: MouseEvent) => {
+      const id = resolveId(e.target);
+      selection.select(id);
+      onselect?.(id);
+    };
+    const onMove = (e: MouseEvent) => {
+      const id = resolveId(e.target);
+      if (id !== selection.hoverId) {
+        selection.hover(id);
+        onhover?.(id);
+      }
+    };
+    const onLeave = () => {
+      if (selection.hoverId !== null) {
+        selection.hover(null);
+        onhover?.(null);
+      }
+    };
+
+    el.addEventListener('click', onClick);
+    el.addEventListener('mousemove', onMove);
+    el.addEventListener('mouseleave', onLeave);
+
+    let ro: ResizeObserver | undefined;
+    if (typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver(() => {
+        measureTick++;
+      });
+      ro.observe(el);
+    }
+
+    return () => {
+      el.removeEventListener('click', onClick);
+      el.removeEventListener('mousemove', onMove);
+      el.removeEventListener('mouseleave', onLeave);
+      ro?.disconnect();
+    };
+  });
+
+  const selectedRect = $derived(
+    enabled && index && selection.selectedId ? (index.get(selection.selectedId) ?? null) : null
+  );
+  // Hide the hover box when it would sit exactly under the selection box.
+  const hoverRect = $derived(
+    enabled && index && selection.hoverId && selection.hoverId !== selection.selectedId
+      ? (index.get(selection.hoverId) ?? null)
+      : null
+  );
+</script>
+
+<div class="ripple-editor-overlay" data-ripple-editor-overlay aria-hidden="true">
+  {#if hoverRect}
+    <div class="ripple-editor-box ripple-editor-box--hover" style={rectToStyle(hoverRect)}></div>
+  {/if}
+  {#if selectedRect}
+    <div class="ripple-editor-box ripple-editor-box--selected" style={rectToStyle(selectedRect)}>
+      {#if selection.selectedId}
+        <span class="ripple-editor-tag">{selection.selectedId}</span>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ripple-editor-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: visible;
+    z-index: 50;
+  }
+  .ripple-editor-box {
+    position: absolute;
+    box-sizing: border-box;
+    border-radius: 3px;
+    pointer-events: none;
+    transition:
+      left 80ms ease,
+      top 80ms ease,
+      width 80ms ease,
+      height 80ms ease;
+  }
+  .ripple-editor-box--hover {
+    border: 1px dashed color-mix(in oklab, #3b82f6 55%, transparent);
+    background: color-mix(in oklab, #3b82f6 8%, transparent);
+  }
+  .ripple-editor-box--selected {
+    border: 2px solid #3b82f6;
+    box-shadow: 0 0 0 1px color-mix(in oklab, #3b82f6 35%, transparent);
+  }
+  .ripple-editor-tag {
+    position: absolute;
+    top: -1.45rem;
+    left: -2px;
+    font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: #fff;
+    background: #3b82f6;
+    padding: 1px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+  }
+</style>

package/dist/editor/RippleEditorOverlay.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type LaneAdapter } from './core/index.js';
+import { EditorSelection } from './editor-selection.svelte.js';
+interface Props {
+    /** The lane adapter clicks/hovers RESOLVE through — the only port seam the overlay touches. */
+    adapter: LaneAdapter;
+    /** Element wrapping the mounted <Ripple> whose nodes are measured/selected. */
+    container?: HTMLElement | null;
+    /** Shared selection store; one is created if omitted. */
+    selection?: EditorSelection;
+    /** Bump to force a re-measure after a spec edit / re-render. */
+    renderVersion?: number;
+    /**
+     * Node ids known from the spec — the precise id allow-list for GEOMETRY
+     * (buildBoundsIndex). Resolution does NOT use this: the adapter carries its
+     * own knownIds + boundary. Kept because the bounds index still measures rects
+     * by node id (a lane-agnostic DOM concern, not a port one).
+     */
+    knownIds?: Set<string> | null;
+    /** When false, listeners detach and the boxes hide (preview mode). */
+    enabled?: boolean;
+    /** Fired after a click resolves (id, or null when clicking empty space). */
+    onselect?: (id: string | null) => void;
+    /** Fired as the hovered node changes (id or null). */
+    onhover?: (id: string | null) => void;
+}
+declare const RippleEditorOverlay: import("svelte").Component<Props, {}, "">;
+type RippleEditorOverlay = ReturnType<typeof RippleEditorOverlay>;
+export default RippleEditorOverlay;

package/dist/editor/RippleInlineEditor.svelte

@@ -0,0 +1,201 @@
+<!--
+  @file editor/RippleInlineEditor.svelte
+  @description L2 (Svelte) INLINE EDIT controller for the Ripple visual editor.
+    A headless controller (renders no chrome, only a `:global` editing-outline
+    style): it delegates ONE `dblclick` listener on the render `container`,
+    resolves the target to a node ref THROUGH THE LaneAdapter port
+    (`adapter.resolveElement`, the same SELECT-PARENT walk the overlay uses), and
+    opens a pluggable `InlineEditor` on it.
+
+    SLOT SELECTION (EP-3) — the controller no longer mounts TipTap / contenteditable
+    itself; it picks an `InlineEditor` impl by the node's edit policy:
+      • PLAIN TEXT (`isInlineTextWidget`) — heading / text / badge / button: always
+        `ContentEditableInlineEditor`, seeded from the element's textContent.
+      • RICH HTML (`isRichTextWidget`) — `richtext`: the LANE's rich editor, chosen
+        by `adapter.inlineEditor` ('tiptap' -> the built-in `TipTapInlineEditor`;
+        'squire' / 'overlay' resolved from the registry, reserved for EP-4's
+        source-fidelity lane), seeded from `RICH_TEXT_PROP` read through the port.
+    The chosen impl OWNS its Enter / Escape / blur, focus, teardown, and the
+    `data-ripple-editing` clearing (the EP-1 stuck-outline fix). The controller only
+    marks `data-ripple-editing` on open, routes the impl's `onCommit(value)` to
+    `adapter.applyEdit(ref, { kind: 'setText', html: value })`, and tears the active
+    impl down (`handle.destroy()`) on re-entry / unmount. Ripple behavior is
+    UNCHANGED — same widgets, same keys, same commit semantics — only the mounting
+    is now behind the slot, so EP-4 can supply a Squire/overlay impl with no edit
+    here.
+
+    Both commit paths write THROUGH THE LaneAdapter PORT (`applyEdit({ kind:
+    'setText' })`), so the canvas repaints reactively (SP-0 §3) and persistence
+    intercepts the same op stream via the adapter's `onApplied` — the adapter maps
+    `setText` to the same `node_prop_set` on the node's primary text (or `html`)
+    prop the pre-port path emitted, so the write is byte-identical.
+  @created 2026-06-27 (SP-1b — branch spike/editor-domid-overlay)
+  @changes 2026-06-30 (editor chrome PIECE 1): added the TipTap RICH-HTML path for
+    `richtext` widgets alongside the existing contenteditable text path.
+  @changes 2026-06-30 (EP-2): migrated onto the LaneAdapter PORT — resolution,
+    edit-path decision + seed read, and commits all go through the adapter.
+  @changes 2026-08-04 (security): the RICH seed is SANITIZED before it reaches an
+    editor impl. `adapter.readProp(RICH_TEXT_PROP)` returns the RAW spec value, which
+    is LLM-authored and prompt-injectable; the impls write their seed back to
+    `el.innerHTML` on teardown, so the raw value was an XSS sink in the host origin
+    (the display side was already sanitized by RichTextDisplay, so only this lane
+    leaked). Sanitizing HERE is the chokepoint: every impl — the TipTap built-in and
+    any lane-registered editor — is seeded with clean HTML without having to be
+    trusted. It also fixes a fidelity mismatch: the editor now opens on exactly the
+    markup the user sees rendered. The PLAIN path is unaffected (it seeds from
+    `textContent`, never HTML).
+  @changes 2026-06-30 (EP-3): extracted the editor MOUNTING into the pluggable
+    `InlineEditor` slot. The controller no longer imports `@tiptap/core` or mounts
+    contenteditable directly — it selects an impl (plain -> `ContentEditableInline
+    Editor`; rich -> the lane's editor via `adapter.inlineEditor`) and delegates
+    mount / commit / cancel / teardown to it. Zero behavior change.
+-->
+<script lang="ts">
+  import { findNodeElement, isInlineTextWidget, isRichTextWidget, primaryTextProp, RICH_TEXT_PROP, ContentEditableInlineEditor, TipTapInlineEditor, resolveInlineEditor, type LaneAdapter, type TargetRef, type InlineEditor, type InlineEditorHandle } from './core/index.js';
+  import { EditorSelection } from './editor-selection.svelte.js';
+  import { sanitizeHtml } from '../utils/sanitize-html.js';
+
+  interface Props {
+    /** The lane adapter the editor RESOLVES / READS / WRITES through (its only port seam). */
+    adapter: LaneAdapter;
+    /** Element wrapping the mounted <Ripple> whose nodes are edited. */
+    container?: HTMLElement | null;
+    /** Shared selection store — double-click also selects the targeted node. */
+    selection?: EditorSelection;
+    /** When false, double-click does nothing (preview mode). */
+    enabled?: boolean;
+    /** Fired when an element enters edit mode. */
+    onbeginedit?: (id: string) => void;
+    /** Fired after a commit applies an op (content actually changed). */
+    oncommit?: (id: string, prop: string, value: string) => void;
+    /** Fired when an edit is cancelled (Escape) — no op applied. */
+    oncancel?: (id: string) => void;
+  }
+
+  let {
+    adapter,
+    container = null,
+    selection = new EditorSelection(),
+    enabled = true,
+    onbeginedit,
+    oncommit,
+    oncancel
+  }: Props = $props();
+
+  // Build the lane-scoped ref for a resolved node id (the adapter stamps the lane).
+  const refOf = (uid: string): TargetRef => ({ uid, lane: adapter.id });
+
+  // The RICH editor impl for this lane. 'tiptap' is the ripple built-in; other kinds
+  // ('squire' / 'overlay') resolve from the registry, which EP-4 populates from the
+  // svelte lane WITHOUT editing this controller. Unregistered kind -> null (no edit).
+  function richInlineEditorFor(kind: string): InlineEditor | null {
+    return kind === 'tiptap' ? TipTapInlineEditor : resolveInlineEditor(kind);
+  }
+
+  // The current edit: the element under edit, its node id, and the live impl handle.
+  // Held OUTSIDE $state on purpose — this is imperative edit bookkeeping, not render
+  // state; the visible result comes from the op -> reactive re-render.
+  interface ActiveEdit {
+    el: HTMLElement;
+    id: string;
+    handle: InlineEditorHandle;
+  }
+  let active: ActiveEdit | null = null;
+
+  // Open `impl` on `el` for node `id`, routing its commit/cancel back through the
+  // port. `prop` is the prop reported on the `oncommit` event (text prop / html).
+  function openEditor(impl: InlineEditor, el: HTMLElement, id: string, prop: string, content: string): void {
+    el.setAttribute('data-ripple-editing', id); // the editing outline (impl clears it on teardown)
+    const handle = impl.mount(el, {
+      content,
+      onCommit: (value: string) => {
+        // Write THROUGH THE PORT: setText targets the node's primary text / html prop
+        // — the adapter maps it to the same node_prop_set the pre-port path emitted.
+        const applied = adapter.applyEdit(refOf(id), { kind: 'setText', html: value });
+        if (applied) oncommit?.(id, prop, value);
+        if (active?.handle === handle) active = null;
+      },
+      onCancel: () => {
+        // No op applied (the impl already restored the seed content).
+        if (active?.handle === handle) active = null;
+        oncancel?.(id);
+      }
+    });
+    active = { el, id, handle };
+    onbeginedit?.(id);
+  }
+
+  $effect(() => {
+    const root = container;
+    if (!root || !enabled) return;
+
+    const onDblClick = (e: MouseEvent) => {
+      const target = e.target as Element | null;
+      // Ignore double-clicks inside the element we're already editing.
+      if (active && target && active.el.contains(target)) return;
+
+      // Resolve THROUGH THE PORT — the adapter carries its own knownIds + boundary,
+      // so this is identical to the pre-port resolveElementToNodeId on the stage.
+      const ref = target instanceof Element ? adapter.resolveElement(target) : null;
+      if (!ref) return;
+      const id = ref.uid;
+      // A fresh double-click on a different node tears the previous edit down first
+      // (in a browser its blur already committed it; this clears the outline in any
+      // case — the EP-1 stuck-outline regression).
+      if (active && active.id !== id) {
+        active.handle.destroy();
+        active = null;
+      }
+
+      selection.select(id);
+      // Read the node THROUGH THE PORT to pick the edit path by its type.
+      const node = adapter.readNode(ref);
+      if (!node) return;
+      // Find the DOM element to mount on — lane-agnostic DOM location (like the
+      // overlay's buildBoundsIndex). The recognized id format matches every ripple
+      // node id, so the already-resolved id needs no knownIds allow-list to locate.
+      const el = findNodeElement(root, id);
+      if (!el) return; // non-id-forwarding widget — inspector handles it
+
+      if (isRichTextWidget(node.type)) {
+        const impl = richInlineEditorFor(adapter.inlineEditor ?? 'tiptap');
+        if (!impl) return; // no rich editor registered for this lane (e.g. squire pre-EP-4)
+        e.preventDefault();
+        // Seed the rich editor from the html prop, read back THROUGH THE PORT, then
+        // SANITIZE: the raw prop is untrusted spec content and the impls write their
+        // seed back to innerHTML on teardown (see the @changes note above).
+        const html = adapter.readProp(ref, RICH_TEXT_PROP);
+        openEditor(impl, el, id, RICH_TEXT_PROP, typeof html === 'string' ? sanitizeHtml(html) : '');
+        return;
+      }
+
+      if (!isInlineTextWidget(node.type)) return; // inspector handles the rest
+      const prop = primaryTextProp(node.type);
+      if (!prop) return;
+
+      e.preventDefault();
+      // Seed the plain editor from the element's textContent (== its primary prop).
+      openEditor(ContentEditableInlineEditor, el, id, prop, el.textContent ?? '');
+    };
+
+    root.addEventListener('dblclick', onDblClick);
+    return () => {
+      root.removeEventListener('dblclick', onDblClick);
+      // Silent teardown of any in-flight edit (no commit / cancel) on unmount.
+      active?.handle.destroy();
+      active = null;
+    };
+  });
+</script>
+
+<style>
+  /* The edited element lives in the host's <Ripple> render (outside this
+     component's scope), so the editing affordance must be global. */
+  :global([data-ripple-editing]) {
+    outline: 2px solid #6366f1;
+    outline-offset: 2px;
+    border-radius: 2px;
+    cursor: text;
+    caret-color: #6366f1;
+  }
+</style>

package/dist/editor/RippleInlineEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type LaneAdapter } from './core/index.js';
+import { EditorSelection } from './editor-selection.svelte.js';
+interface Props {
+    /** The lane adapter the editor RESOLVES / READS / WRITES through (its only port seam). */
+    adapter: LaneAdapter;
+    /** Element wrapping the mounted <Ripple> whose nodes are edited. */
+    container?: HTMLElement | null;
+    /** Shared selection store — double-click also selects the targeted node. */
+    selection?: EditorSelection;
+    /** When false, double-click does nothing (preview mode). */
+    enabled?: boolean;
+    /** Fired when an element enters edit mode. */
+    onbeginedit?: (id: string) => void;
+    /** Fired after a commit applies an op (content actually changed). */
+    oncommit?: (id: string, prop: string, value: string) => void;
+    /** Fired when an edit is cancelled (Escape) — no op applied. */
+    oncancel?: (id: string) => void;
+}
+declare const RippleInlineEditor: import("svelte").Component<Props, {}, "">;
+type RippleInlineEditor = ReturnType<typeof RippleInlineEditor>;
+export default RippleInlineEditor;

package/dist/editor/RippleInspector.svelte

@@ -0,0 +1,201 @@
+<!--
+  @file editor/RippleInspector.svelte
+  @description L2 (Svelte) PROPERTIES PANEL for the Ripple visual editor — the
+    reusable inspector. As of EP-1 it is migrated onto the lane-agnostic
+    `LaneAdapter` PORT: given an `adapter` + a `target` (TargetRef), it derives the
+    editable fields via `adapter.getFields(target)` and renders the right control
+    per kind (text / textarea / number / boolean / select). Every edit routes
+    through `adapter.applyEdit(target, { kind: 'setProp', name, value })` with the
+    RAW control value — the adapter owns coercion + the spec-mutator write, so this
+    panel imports NOTHING from inferFields / coerceFieldValue / editor-ops anymore;
+    it touches only the port. The same chrome can thus later drive other substrates
+    (svelte source, html/css) by swapping the adapter.
+
+    Behavior is identical to the pre-port panel: same controls, same empty/theming,
+    and `onedit` still reports the COERCED stored value (read back through the port
+    after the apply) so its readout is byte-for-byte what it was. Fully theme-aware:
+    reads shadcn tokens as `var(--token)` (NOT `hsl(var(--token))` — the tokens
+    already resolve to full hsl()).
+  @created 2026-06-29 (editor chrome — properties panel)
+  @changes 2026-06-30 (EP-1): migrate off node+ops onto the LaneAdapter port
+    (adapter + target); coercion + write now live behind the port.
+  @changes 2026-06-30 (EP-1 review): read `onedit`'s value via `adapter.readProp`
+    (was `readNode().props[prop]`), so it reports the real stored value for
+    top-level-colliding (`bind`) + dotted props instead of undefined.
+-->
+<script lang="ts">
+  import type { LaneAdapter, TargetRef } from './core/index.js';
+
+  interface Props {
+    /** The lane adapter the panel edits through (the only seam it touches). */
+    adapter: LaneAdapter;
+    /** The selected target to edit, or null for the empty state. */
+    target?: TargetRef | null;
+    /** Extra classes for the panel root. */
+    class?: string;
+    /** Fired after an edit applies (uid, prop, coerced value). */
+    onedit?: (uid: string, prop: string, value: unknown) => void;
+  }
+
+  let { adapter, target = null, class: className = '', onedit }: Props = $props();
+
+  // Read the target node + its fields through the port. Both re-derive when the
+  // adapter's live root mutates (getFields/readNode read it), so controls stay in
+  // sync after an op — the panel is a pure view over the adapter.
+  const node = $derived(target ? adapter.readNode(target) : null);
+  const fields = $derived(target ? adapter.getFields(target) : []);
+
+  // Pass the RAW control value to the port; the adapter coerces it. Report the
+  // coerced, stored value back via `onedit` using `readProp` (mirrors the write
+  // routing) — `readNode().props[prop]` misses top-level-colliding props like
+  // `bind`, so the readback would otherwise be undefined for ~23 widgets.
+  function commit(prop: string, raw: unknown) {
+    if (!target) return;
+    if (adapter.applyEdit(target, { kind: 'setProp', name: prop, value: raw })) {
+      onedit?.(target.uid, prop, adapter.readProp(target, prop));
+    }
+  }
+</script>
+
+<div class={`ripple-inspector ${className}`} data-ripple-inspector>
+  {#if !node}
+    <p class="ri-empty">Select an element to edit its properties.</p>
+  {:else}
+    <header class="ri-head">
+      <span class="ri-type">{node.type}</span>
+      <span class="ri-id" title={node.uid}>{node.uid}</span>
+    </header>
+
+    {#if fields.length === 0}
+      <p class="ri-empty">No editable properties for this widget.</p>
+    {:else}
+      <div class="ri-fields">
+        {#each fields as f (f.prop)}
+          <label class="ri-field" title={f.description}>
+            <span class="ri-label">{f.label}</span>
+
+            {#if f.kind === 'boolean'}
+              <input
+                class="ri-checkbox"
+                type="checkbox"
+                checked={Boolean(f.value)}
+                onchange={(e) => commit(f.prop, (e.currentTarget as HTMLInputElement).checked)}
+              />
+            {:else if f.kind === 'select'}
+              <select
+                class="ri-input"
+                value={String(f.value ?? '')}
+                onchange={(e) => commit(f.prop, (e.currentTarget as HTMLSelectElement).value)}
+              >
+                {#each f.options ?? [] as opt (opt)}
+                  <option value={opt}>{opt}</option>
+                {/each}
+              </select>
+            {:else if f.kind === 'number'}
+              <input
+                class="ri-input"
+                type="number"
+                value={f.value as number}
+                oninput={(e) => commit(f.prop, (e.currentTarget as HTMLInputElement).value)}
+              />
+            {:else if f.kind === 'textarea'}
+              <textarea
+                class="ri-input ri-textarea"
+                rows="3"
+                value={String(f.value ?? '')}
+                oninput={(e) => commit(f.prop, (e.currentTarget as HTMLTextAreaElement).value)}
+              ></textarea>
+            {:else}
+              <input
+                class="ri-input"
+                type="text"
+                value={String(f.value ?? '')}
+                oninput={(e) => commit(f.prop, (e.currentTarget as HTMLInputElement).value)}
+              />
+            {/if}
+          </label>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .ripple-inspector {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    color: var(--foreground);
+    font-size: 0.85rem;
+  }
+  .ri-empty {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.85rem;
+  }
+  .ri-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border);
+  }
+  .ri-type {
+    font-weight: 600;
+    font-size: 0.8rem;
+  }
+  .ri-id {
+    font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--muted-foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 55%;
+  }
+  .ri-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .ri-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  /* Boolean rows read better as a single inline line. */
+  .ri-field:has(.ri-checkbox) {
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+  .ri-label {
+    font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--muted-foreground);
+  }
+  .ri-input {
+    width: 100%;
+    font: 400 0.85rem/1.4 ui-sans-serif, system-ui;
+    padding: 6px 8px;
+    border: 1px solid var(--input);
+    border-radius: 6px;
+    background: var(--background);
+    color: var(--foreground);
+  }
+  .ri-input:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 0;
+    border-color: var(--ring);
+  }
+  .ri-textarea {
+    resize: vertical;
+    min-height: 56px;
+  }
+  .ri-checkbox {
+    width: 15px;
+    height: 15px;
+    accent-color: var(--primary);
+    cursor: pointer;
+  }
+</style>

package/dist/editor/RippleInspector.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { LaneAdapter, TargetRef } from './core/index.js';
+interface Props {
+    /** The lane adapter the panel edits through (the only seam it touches). */
+    adapter: LaneAdapter;
+    /** The selected target to edit, or null for the empty state. */
+    target?: TargetRef | null;
+    /** Extra classes for the panel root. */
+    class?: string;
+    /** Fired after an edit applies (uid, prop, coerced value). */
+    onedit?: (uid: string, prop: string, value: unknown) => void;
+}
+declare const RippleInspector: import("svelte").Component<Props, {}, "">;
+type RippleInspector = ReturnType<typeof RippleInspector>;
+export default RippleInspector;