@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/c4/semantic.js

@@ -0,0 +1,241 @@
+// semantic.ts — the pure core of C4Diagram's semantic zoom: one canvas where an expanded element
+// draws its children inside its own box. Given the element tree and the `expanded` ids it works out
+// what is drawn (cards, boundaries, code panels), which edges connect what, which nodes are ghosted
+// context, where markers land, and what an in-map code panel shows. No DOM, no Svelte, no ELK.
+//
+// Edges: a relationship is drawn between the two SIBLINGS that contain its ends, the children of
+// the ends' lowest common ancestor (only when that ancestor is the root or an expanded boundary;
+// otherwise it is internal to a collapsed card and not drawn). Everything that lifts onto the same
+// sibling pair is one edge with a count. Where an end is an expanded boundary, the edge meets the
+// boundary's border and carries a port badge there ("→ Ripple · 2"). A relationship that crosses
+// the scope boundary but is drawn further out becomes a chip on the scope boundary instead, so the
+// view you are inside never loses its outside connections.
+//
+// Element ids must be unique across the whole tree: indexTree throws on a repeat, which the
+// diagram's layout turns into its error state.
+import { codeBlockGutter } from '../display/gutter.js';
+/** Nested children of any kind: `children`, else `containers`, else `components`. */
+export function childrenOf(el) {
+    const e = el;
+    return e.children ?? e.containers ?? e.components ?? [];
+}
+/** The boundary/eyebrow label for an element's C4 kind. */
+export function kindLabel(el) {
+    if (el.kind === 'container')
+        return 'Container';
+    if (el.kind === 'component')
+        return 'Component';
+    if (el.kind === 'code')
+        return 'Code';
+    if (el.kind === 'person')
+        return 'Person';
+    return el.external ? 'External System' : 'Software System';
+}
+/** Throws on an id used twice: a child reusing an ancestor's id would be its own parent. */
+export function indexTree(elements) {
+    const byId = new Map();
+    const parent = new Map();
+    const order = [];
+    const walk = (els, p) => {
+        for (const el of els) {
+            if (byId.has(el.id))
+                throw new Error(`C4 element id "${el.id}" is used more than once`);
+            byId.set(el.id, el);
+            parent.set(el.id, p);
+            order.push(el.id);
+            walk(childrenOf(el), el.id);
+        }
+    };
+    walk(elements, null);
+    return { byId, parent, order };
+}
+/** Ids from the top level down to `id`, inclusive; empty for an unknown id or a parent cycle. */
+export function pathTo(tree, id) {
+    const path = [];
+    const seen = new Set();
+    for (let cur = id; cur; cur = tree.parent.get(cur)) {
+        if (!tree.byId.has(cur) || seen.has(cur))
+            return [];
+        seen.add(cur);
+        path.unshift(cur);
+    }
+    return path;
+}
+export function computeVisibility(tree, expanded) {
+    const visible = [];
+    const boundaries = new Set();
+    const panels = new Set();
+    const walk = (ids) => {
+        for (const id of ids) {
+            const el = tree.byId.get(id);
+            if (!el)
+                continue;
+            visible.push(id);
+            if (!expanded.has(id))
+                continue;
+            const kids = childrenOf(el);
+            if (kids.length > 0) {
+                boundaries.add(id);
+                walk(kids.map((k) => k.id));
+            }
+            else if (el.code)
+                panels.add(id);
+        }
+    };
+    walk(tree.order.filter((id) => tree.parent.get(id) === null));
+    return { visible, boundaries, panels };
+}
+/** The deepest drawn element on the path to `id` (itself when drawn). */
+export function representative(tree, vis, id) {
+    const drawn = new Set(vis.visible);
+    return pathTo(tree, id).filter((p) => drawn.has(p)).at(-1);
+}
+const nameOf = (tree, id) => tree.byId.get(id)?.name ?? id;
+const labelOf = (r) => [r.label, r.technology ? `[${r.technology}]` : ''].filter(Boolean).join(' ');
+/** "→ Ripple · 2" from `side`'s point of view: arrows by direction, ⇄ when mixed. */
+function badge(tree, other, items, outward) {
+    const out = items.filter(outward).length;
+    const arrow = out === items.length ? '→' : out === 0 ? '←' : '⇄';
+    return `${arrow} ${nameOf(tree, other)} · ${items.length}`;
+}
+const inside = (tree, id, root) => pathTo(tree, id).includes(root);
+/**
+ * Lift every relationship onto drawn siblings and aggregate. Also returns the chips for `scopeId`
+ * (relationships crossing its border that are drawn further out) and the item lists by edge.
+ */
+export function liftRelationships(tree, vis, relationships, scopeId) {
+    const drawn = new Set(vis.visible);
+    const byPair = new Map();
+    const chipItems = new Map();
+    for (const r of relationships) {
+        const pa = pathTo(tree, r.from);
+        const pb = pathTo(tree, r.to);
+        if (pa.length === 0 || pb.length === 0)
+            continue;
+        let i = 0;
+        while (i < pa.length && i < pb.length && pa[i] === pb[i])
+            i++;
+        if (i === pa.length || i === pb.length)
+            continue; // one end contains the other
+        const lca = i === 0 ? null : pa[i - 1];
+        const [sa, sb] = [pa[i], pb[i]];
+        const item = { from: r.from, to: r.to, label: labelOf(r) || undefined, ...(r.style ? { style: r.style } : {}) };
+        if (lca === null || vis.boundaries.has(lca)) {
+            if (drawn.has(sa) && drawn.has(sb)) {
+                const key = [sa, sb].sort().join('|');
+                const pair = byPair.get(key) ?? { a: sa, b: sb, items: [], direct: [] };
+                pair.items.push(item);
+                if (sa === r.from && sb === r.to)
+                    pair.direct.push(labelOf(r));
+                byPair.set(key, pair);
+            }
+        }
+        // A crossing of the scope border not drawn at the scope itself becomes a chip there.
+        if (scopeId && vis.boundaries.has(scopeId)) {
+            const fromIn = inside(tree, r.from, scopeId);
+            const toIn = inside(tree, r.to, scopeId);
+            const drawnAtScope = sa === scopeId || sb === scopeId;
+            if (fromIn !== toIn && !drawnAtScope) {
+                const far = representative(tree, vis, fromIn ? r.to : r.from);
+                if (far)
+                    chipItems.set(far, [...(chipItems.get(far) ?? []), item]);
+            }
+        }
+    }
+    const edges = [...byPair.entries()].map(([key, { a, b, items, direct }]) => {
+        const aBox = vis.boundaries.has(a);
+        const bBox = vis.boundaries.has(b);
+        const fromA = (it) => inside(tree, it.from, a);
+        const fromB = (it) => inside(tree, it.from, b);
+        // Direct relationships keep their words; the ones lifted from deeper levels are counted.
+        const named = direct.filter(Boolean);
+        const lifted = items.length - direct.length;
+        const label = aBox || bBox
+            ? undefined
+            : named.length > 0
+                ? `${named.join(' · ')}${lifted > 0 ? ` +${lifted}` : ''}`
+                : `${items.length} connection${items.length === 1 ? '' : 's'}`;
+        return {
+            key,
+            from: a,
+            to: b,
+            items,
+            label,
+            fromBadge: aBox ? badge(tree, b, items, fromA) : undefined,
+            toBadge: bBox ? badge(tree, a, items, fromB) : undefined,
+        };
+    });
+    const chips = [...chipItems.entries()].map(([target, items]) => ({
+        target,
+        items,
+        text: badge(tree, target, items, (it) => !!scopeId && inside(tree, it.from, scopeId)),
+    }));
+    return { edges, chips };
+}
+/** Drawn elements outside the scope: not the scope, not inside it, not one of its ancestors. */
+export function ghostIds(tree, vis, scopeId) {
+    if (!scopeId || !tree.byId.has(scopeId))
+        return new Set();
+    const around = new Set(pathTo(tree, scopeId));
+    return new Set(vis.visible.filter((id) => !around.has(id) && !inside(tree, id, scopeId)));
+}
+/** Markers on hidden elements move to their drawn ancestor; one dot per marker id. */
+export function liftMarkers(tree, vis, markers) {
+    if (!markers)
+        return undefined;
+    const out = {};
+    for (const [id, list] of Object.entries(markers)) {
+        const at = representative(tree, vis, id);
+        if (!at)
+            continue;
+        const here = (out[at] ??= []);
+        for (const m of list)
+            if (!here.some((h) => h.id === m.id))
+                here.push(m);
+    }
+    return out;
+}
+/**
+ * What a panel shows for one side. `after` composes the replacement into the surrounding lines.
+ * `changed` is clamped to the excerpt's lines; a range wholly outside it counts as absent.
+ */
+export function codeView(code, side) {
+    const { startLine, before, after } = code;
+    const lo = code.changed && Math.max(code.changed[0], startLine);
+    const hi = code.changed && Math.min(code.changed[1], startLine + before.length - 1);
+    const changed = lo !== undefined && hi !== undefined && lo <= hi ? [lo, hi] : undefined;
+    const view = (lines, highlight, tone = 'accent') => ({
+        text: lines.join('\n'),
+        startLine,
+        highlight,
+        tone,
+        lineCount: lines.length,
+    });
+    if (side === 'before' || !after)
+        return view(before, changed, after ? 'removed' : 'accent');
+    if (before.length === 0 || !changed) {
+        return view(after, after.length ? [startLine, startLine + after.length - 1] : undefined, 'added');
+    }
+    const head = before.slice(0, changed[0] - startLine);
+    const tail = before.slice(changed[1] - startLine + 1);
+    return view([...head, ...after, ...tail], after.length ? [changed[0], changed[0] + after.length - 1] : undefined, 'added');
+}
+export function defaultCodeSide(code) {
+    return code.after ? 'after' : 'before';
+}
+/** Panel geometry. Matches CodeBlock's body: 12.5px mono at 1.65 leading, wrapping lines. */
+export const CODE_PANEL = { width: 720, header: 44, padY: 24, lineHeight: 20.625, charWidth: 7.55, minHeight: 180 };
+/** A box tall enough for the longer side once lines wrap, so toggling never overflows. */
+export function codePanelSize(code) {
+    const sides = code.after ? [codeView(code, 'before'), codeView(code, 'after')] : [codeView(code, 'before')];
+    const rows = Math.max(0, ...sides.map((v) => {
+        const gutter = codeBlockGutter(v.startLine, v.lineCount);
+        const perLine = Math.floor((CODE_PANEL.width - 2 - gutter - 16) / CODE_PANEL.charWidth);
+        // Word wrap breaks a little early: a small allowance and one spare row. Past
+        // that the panel body scrolls rather than clipping.
+        const wrapped = v.text ? v.text.split('\n').reduce((n, l) => n + Math.max(1, Math.ceil(l.length / perLine)), 0) : 0;
+        return Math.ceil(wrapped * 1.05) + 1;
+    }));
+    const height = CODE_PANEL.header + CODE_PANEL.padY + rows * CODE_PANEL.lineHeight + 8;
+    return { width: CODE_PANEL.width, height: Math.max(CODE_PANEL.minHeight, Math.round(height)) };
+}

package/dist/widgets/c4/types.d.ts

@@ -0,0 +1,192 @@
+/** The C4 abstraction an element is. When absent, the shape is inferred from
+ *  which fields are present (see getNodeType) — the legacy behaviour. */
+export type C4Kind = 'person' | 'system' | 'container' | 'component' | 'code';
+/** Live state of an element. `changing` is the only one that moves (a calm
+ *  pulse); the rest are static treatments. `planned` marks a blueprint node
+ *  that does not exist in code yet (dashed outline, dimmed, no card fill);
+ *  `future` is the same blueprint on a later horizon (dotted, fainter);
+ *  `added` is an element new since a comparison's base (a heavier double
+ *  success ring); `removed` is an element that is gone, drawn as a ghost (card kept, content
+ *  faded, dashed error-toned outline) so a comparison can still show it. */
+export type C4Status = 'changing' | 'changed' | 'landed' | 'drift' | 'failed' | 'planned' | 'future' | 'added' | 'removed';
+/** A small dot on a node: who (or what) is there right now. `color` is any CSS
+ *  colour, including a `var(--…)` token. */
+export interface C4Marker {
+    id: string;
+    label: string;
+    color: string;
+}
+/** Which way a highlight follows relationships: upstream callers, downstream callees, or both
+ *  (in plus out; a co-caller of the same element is not reached). */
+export type C4Reach = 'in' | 'out' | 'both';
+/** Light one element's reach and dim the rest: `reach` defaults to both, `depth` (hops) to 3. */
+export interface C4Highlight {
+    id: string;
+    reach?: C4Reach;
+    depth?: number;
+}
+/** One step of a flow. A message travels a relationship (`reverse`: the model draws it `to` → `from`,
+ *  the reply runs back along it; `implied`: no relationship, drawn as a dashed hop); a process
+ *  happens at one element; a note is text only. */
+export type C4FlowStep = {
+    from: string;
+    to: string;
+    label: string;
+    technology?: string;
+    reverse?: boolean;
+    implied?: boolean;
+} | {
+    at: string;
+    label: string;
+} | {
+    note: string;
+};
+/** A data flow over the diagram, played one step at a time (the `flow` and `step` props). */
+export interface C4Flow {
+    id: string;
+    name: string;
+    description?: string;
+    steps: C4FlowStep[];
+}
+/** How edges draw along ELK's route: orthogonal with rounded corners, or a smooth curve with arrowheads. */
+export type C4EdgeShape = 'orthogonal' | 'curved';
+/** An excerpt of a code element's file, shown in-map when the element is
+ *  expanded (semantic zoom). Line numbers are the file's own. */
+export interface C4Code {
+    /** Line number of `before[0]` (or of `after[0]` for a new file). */
+    startLine: number;
+    /** The lines as they are, or were before the change. Empty for a new file. */
+    before: string[];
+    /** The replacement for `changed`, or the whole new file. Its presence turns
+     *  on the Before/After toggle. */
+    after?: string[];
+    /** Inclusive [first, last] line numbers of `before` that `after` replaces. */
+    changed?: [number, number];
+    /** Highlighter hint (any truthy value colours the code). */
+    language?: string;
+}
+/** One aggregated connection as a badge or chip shows it: the text, and the
+ *  relationships behind it (names, not ids) for its hover list. */
+export interface C4PortView {
+    text: string;
+    items: {
+        from: string;
+        to: string;
+        label?: string;
+    }[];
+}
+/** Fields every element may carry on top of its own shape. */
+interface C4ElementBase {
+    /** Explicit C4 kind; overrides shape inference. */
+    kind?: C4Kind;
+    /** Show the drill affordance and route clicks to `ondrilldown`, even when
+     *  the children are not part of this diagram. */
+    drillable?: boolean;
+    /** Nested elements of the next level down, any kind. In semantic zoom (the
+     *  `expanded` prop) they are drawn inside this element when it is expanded;
+     *  `containers` and `components` count as children too. */
+    children?: C4Element[];
+    /** For a `code` element: the excerpt its expanded panel shows. */
+    code?: C4Code;
+}
+export interface C4Person extends C4ElementBase {
+    id: string;
+    name: string;
+    description?: string;
+    external?: boolean;
+    tags?: string[];
+}
+export interface C4System extends C4ElementBase {
+    id: string;
+    name: string;
+    description?: string;
+    technology?: string;
+    external?: boolean;
+    /** Nested inside this element's boundary. With `kind`, any lower level can
+     *  nest here (a container's components, a component's code). */
+    containers?: C4Container[];
+    tags?: string[];
+}
+export interface C4Container extends C4ElementBase {
+    id: string;
+    name: string;
+    description?: string;
+    technology?: string;
+    external?: boolean;
+    type?: 'webapp' | 'api' | 'database' | 'queue' | 'filesystem' | 'mobile' | 'desktop';
+    components?: C4Component[];
+    kb_article?: string;
+    tags?: string[];
+}
+export interface C4Component extends C4ElementBase {
+    id: string;
+    name: string;
+    description?: string;
+    technology?: string;
+    external?: boolean;
+    type?: 'service' | 'controller' | 'repository' | 'model' | 'middleware';
+    kb_article?: string;
+    tags?: string[];
+}
+export interface C4Relationship {
+    from: string;
+    to: string;
+    label?: string;
+    technology?: string;
+    style?: 'sync' | 'async' | 'event';
+}
+export type C4Element = C4Person | C4System | C4Container | C4Component;
+export interface C4Diagram {
+    level: 'context' | 'container' | 'component' | 'code';
+    title: string;
+    description?: string;
+    elements: C4Element[];
+    relationships: C4Relationship[];
+}
+/** Internal layout position computed by the layout engine */
+export interface LayoutNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Node data payload passed into each SvelteFlow custom node component.
+ * These are set on node.data when converting C4Diagram → SvelteFlow nodes.
+ */
+export interface C4NodeData {
+    /** Display name */
+    name: string;
+    /** Subtitle / description text */
+    description?: string;
+    /** Technology badge text, e.g. "PostgreSQL" */
+    technology?: string;
+    /** Whether the element is an external actor/system */
+    external?: boolean;
+    /** Container/component sub-type (database, queue, webapp, …) */
+    subtype?: string;
+    /** True when element has drillable children */
+    drillable?: boolean;
+    /** Link to wiki / KB article */
+    kb_article?: string;
+    /** Tags for filtering */
+    tags?: string[];
+    /** Explicit C4 kind, when the element set one */
+    kind?: C4Kind;
+    /** Semantic zoom: chips on the scope boundary for crossings drawn further out. */
+    ports?: C4PortView[];
+    /** Semantic zoom: the excerpt an expanded code element's panel shows. */
+    code?: C4Code;
+    /** Semantic zoom: how the element is drawn (a card's node type, `group` or `code`). */
+    view?: string;
+    /** Original C4 element for click handlers */
+    element: C4Element;
+    /** Callback when element is clicked */
+    onclick?: (element: C4Element) => void;
+    /** Callback when drilldown is triggered */
+    ondrilldown?: (element: C4Element, level: string) => void;
+    /** Current diagram level — used to compute next level on drilldown */
+    diagramLevel: 'context' | 'container' | 'component' | 'code';
+}
+export {};

package/dist/widgets/c4/types.js

@@ -0,0 +1,8 @@
+// C4 Model diagram widget types — the data model for all 4 C4 levels, the
+// SvelteFlow node payload, the optional live-state shapes (status, crew
+// markers, a highlighted reach) a host passes to show work happening on the map,
+// and the flow a host can play over it step by step.
+//
+// Every live field is optional: a diagram without `kind`, `drillable`,
+// `status`, `markers`, `highlight` or `flow` renders exactly as it did before they existed.
+export {};

package/dist/widgets/c4/url-sanitizer.d.ts

@@ -0,0 +1 @@
+export { safeHref as safeKbUrl } from '../../utils/url-sanitizer.js';

package/dist/widgets/c4/url-sanitizer.js

@@ -0,0 +1,6 @@
+// url-sanitizer.ts — kb_article href sanitizer.
+// Created: 2026-04-10 — Added to fix XSS in kb_article href rendering (PR #14).
+// 2026-09-06 — the implementation moved to src/lib/utils/url-sanitizer.ts so
+//   the table link column shares it; safeKbUrl is kept as a thin re-export so
+//   the C4 node call sites are unchanged.
+export { safeHref as safeKbUrl } from '../../utils/url-sanitizer.js';

package/dist/widgets/call/BottomSheet.svelte

@@ -0,0 +1,184 @@
+<!--
+  BottomSheet.svelte — a NON-modal bottom sheet with three stops: peek, half,
+  full. NEW 2026-09-30 (call UI new look, slice 0). Lifted from
+  paw-enterprise's CallChatSheet (the phone in-call chat).
+
+  Not the `Sheet` overlay: no dialog role, no focus trap, no backdrop. It is an
+  overlay positioned absolute at the bottom of its positioned parent, so what
+  sits under it never remounts. Content stays mounted across stops.
+  Handle: drag it more than 48px to move one stop (up: peek→half→full, down:
+  full→half→peek); a press under 6px is a tap and toggles (peek→half,
+  half→full, full→half). Keyboard on the handle: Enter/Space toggle,
+  ArrowUp/ArrowDown step. `stop` is bindable and reflected as data-state;
+  onStopChange fires on every change the sheet makes. handleLabel(stop) names
+  the handle (default "Expand" / "Shrink"); handleTestId tags it.
+  Heights: peek 3.5rem, half 50%, full 100%, overridable via --ripple-sheet-peek
+  / --ripple-sheet-half. Tokens only.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../utils.js';
+
+  type Stop = 'peek' | 'half' | 'full';
+
+  let {
+    stop = $bindable('peek'),
+    label,
+    onStopChange,
+    handleLabel = (s: Stop) => (s === 'full' ? 'Shrink' : 'Expand'),
+    handleTestId,
+    class: className,
+    style,
+    children,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    stop?: Stop;
+    label?: string;
+    onStopChange?: (stop: Stop) => void;
+    handleLabel?: (stop: Stop) => string;
+    handleTestId?: string;
+    style?: string;
+    children?: Snippet;
+  } = $props();
+
+  const ORDER: Stop[] = ['peek', 'half', 'full'];
+  const DRAG = 48;
+  const TAP = 6;
+
+  let dragging = $state(false);
+  let dy = $state(0);
+  let startY = 0;
+
+  function go(next: Stop) {
+    if (next === stop) return;
+    stop = next;
+    onStopChange?.(next);
+  }
+  const step = (dir: 1 | -1) => go(ORDER[Math.max(0, Math.min(2, ORDER.indexOf(stop) + dir))]);
+  const toggle = () => go(stop === 'half' ? 'full' : 'half');
+
+  function down(e: PointerEvent) {
+    if (e.button !== 0) return;
+    dragging = true;
+    dy = 0;
+    startY = e.clientY;
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+  }
+  function move(e: PointerEvent) {
+    if (dragging) dy = e.clientY - startY;
+  }
+  function up() {
+    if (!dragging) return;
+    const d = dy;
+    dragging = false;
+    dy = 0;
+    if (d < -DRAG) step(1);
+    else if (d > DRAG) step(-1);
+    else if (Math.abs(d) < TAP) toggle();
+  }
+  function key(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      step(1);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      step(-1);
+    }
+  }
+</script>
+
+<div
+  role="region"
+  aria-label={label}
+  data-slot="bottom-sheet"
+  data-state={stop}
+  data-dragging={dragging ? '' : undefined}
+  class={cn('ripple-sheet', className)}
+  style={safeStyle(`${dragging && dy ? `transform:translateY(${dy}px);` : ''}${style ?? ''}`)}
+  {...rest}
+>
+  <div
+    role="button"
+    tabindex="0"
+    aria-label={handleLabel(stop)}
+    data-slot="bottom-sheet-handle"
+    data-testid={handleTestId}
+    class="ripple-sheet-handle"
+    onpointerdown={down}
+    onpointermove={move}
+    onpointerup={up}
+    onpointercancel={up}
+    onkeydown={key}
+  >
+    <span class="ripple-sheet-grip" aria-hidden="true"></span>
+  </div>
+  <div class="ripple-sheet-body">{@render children?.()}</div>
+</div>
+
+<style>
+  .ripple-sheet {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    height: var(--ripple-sheet-peek, 3.5rem);
+    overflow: hidden;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
+    border: 1px solid var(--ripple-border);
+    border-bottom: 0;
+    color: var(--ripple-surface-foreground);
+    background: color-mix(in oklch, var(--ripple-surface) 88%, transparent);
+    backdrop-filter: blur(28px) saturate(1.5);
+    -webkit-backdrop-filter: blur(28px) saturate(1.5);
+    transition:
+      height 260ms var(--ripple-ease-out),
+      transform 260ms var(--ripple-ease-out);
+  }
+  .ripple-sheet[data-state='half'] {
+    height: var(--ripple-sheet-half, 50%);
+  }
+  .ripple-sheet[data-state='full'] {
+    height: 100%;
+    border-radius: 0;
+  }
+  .ripple-sheet[data-dragging] {
+    transition: none;
+  }
+  .ripple-sheet-handle {
+    display: grid;
+    place-items: center;
+    flex: none;
+    height: 1.25rem;
+    cursor: grab;
+    touch-action: none;
+    outline: none;
+  }
+  .ripple-sheet-handle:focus-visible .ripple-sheet-grip {
+    box-shadow: 0 0 0 2px var(--ripple-ring);
+  }
+  .ripple-sheet-grip {
+    width: 2.25rem;
+    height: 0.25rem;
+    border-radius: 999px;
+    background: color-mix(in oklch, var(--ripple-surface-foreground) 35%, transparent);
+  }
+  .ripple-sheet-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ripple-sheet {
+      transition: none;
+    }
+  }
+</style>

package/dist/widgets/call/BottomSheet.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Stop = 'peek' | 'half' | 'full';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    stop?: Stop;
+    label?: string;
+    onStopChange?: (stop: Stop) => void;
+    handleLabel?: (stop: Stop) => string;
+    handleTestId?: string;
+    style?: string;
+    children?: Snippet;
+};
+declare const BottomSheet: import("svelte").Component<$$ComponentProps, {}, "stop">;
+type BottomSheet = ReturnType<typeof BottomSheet>;
+export default BottomSheet;