@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/figures/tokamak/index.d.ts

@@ -0,0 +1,4 @@
+import type { FigureMeta } from '../types.js';
+import { mount } from './figure.js';
+export declare const meta: FigureMeta;
+export { mount };

package/dist/figures/tokamak/index.js

@@ -0,0 +1,16 @@
+import { PARAMS } from './model.js';
+import { anchorsOf, mount } from './figure.js';
+export const meta = {
+    id: 'tokamak',
+    title: 'How a fusion reactor works',
+    params: PARAMS,
+    readouts: [
+        { key: 'temperature', label: 'Plasma core', unit: 'million °C' },
+        { key: 'fusion', label: 'Fusion power', unit: 'MW' },
+        { key: 'gain', label: 'Gain Q' }
+    ],
+    get anchors() {
+        return anchorsOf();
+    }
+};
+export { mount };

package/dist/figures/tokamak/model.d.ts

@@ -0,0 +1,65 @@
+export interface TokamakParams {
+    current: number;
+    heating: number;
+}
+export interface ParamSpec {
+    key: keyof TokamakParams;
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    unit: string;
+    value: number;
+}
+export declare const PARAMS: ParamSpec[];
+/** Machine: metres and tesla. */
+export declare const MACHINE: {
+    readonly R: 6.2;
+    readonly a: 2;
+    readonly kappa: 1.7;
+    readonly B: 5.3;
+    readonly mass: 2.5;
+    readonly zeff: 1.7;
+    readonly greenwald: 0.85;
+    readonly fuel: 0.82;
+    readonly H: 1.15;
+};
+/** Plasma volume, m3 (a torus of elliptical cross-section). */
+export declare const VOLUME: number;
+/** Million degrees per keV. */
+export declare const MK_PER_KEV = 11.6;
+export declare function clampParams(p?: Partial<Record<string, unknown>>): TokamakParams;
+/** Bosch-Hale D-T reactivity <sigma v>, m3/s, T in keV. */
+export declare function reactivity(T: number): number;
+/** Electron density, m^-3: 85% of the Greenwald limit Ip / (pi a^2). */
+export declare const densityOf: (p: TokamakParams) => number;
+/** Edge safety factor q95: how many times a field line goes round the long way for once round the short way. */
+export declare const q95Of: (p: TokamakParams) => number;
+export interface PlasmaState {
+    /** Core temperature, keV. */
+    core: number;
+    /** Fusion power, MW. */
+    fusion: number;
+    /** Gain: fusion power over heating power. */
+    gain: number;
+    /** Electron density, m^-3. */
+    density: number;
+    /** Energy confinement time, s. */
+    tau: number;
+    q95: number;
+}
+export declare function solve(p: TokamakParams): PlasmaState;
+export declare const millionDegrees: (s: PlasmaState) => number;
+export declare function readoutsOf(p: TokamakParams): Record<string, string>;
+export declare function describe(p: TokamakParams): string;
+/** Glow 0..1 of the plasma, from its core temperature (cold below 2 keV, full at 20). */
+export declare const glowOf: (s: PlasmaState) => number;
+/**
+ * Field-line pitch: the poloidal turn per toroidal turn on flux surface rho
+ * (0 = magnetic axis, 1 = edge), 1 / q with q rising from 1 on axis to q95.
+ */
+export declare const twistAt: (p: TokamakParams, rho: number) => number;
+/** Toroidal drift of the drawn particles, radians a second (the drawing is slowed far below real speed). */
+export declare const streamSpeedOf: (s: PlasmaState) => number;
+/** Beam dash speed, units a second, from the heating power. */
+export declare const beamSpeedOf: (p: TokamakParams) => number;

package/dist/figures/tokamak/model.js

@@ -0,0 +1,132 @@
+// figures/tokamak/model.ts: the one model behind the fusion reactor figure.
+// Pure, no DOM. A zero-dimensional power balance for a reactor-scale tokamak
+// (major radius 6.2 m, minor radius 2 m, elongation 1.7, 5.3 T on axis,
+// deuterium-tritium fuel): from the plasma current and the outside heating
+// power it finds the steady temperature where the heat leaking out (the
+// IPB98(y,2) confinement-time scaling, plus bremsstrahlung) equals the heat
+// going in (the heating beams plus the 3.5 MeV alpha particles that stay
+// inside). Fusion power uses the Bosch-Hale D-T reactivity over a parabolic
+// temperature profile; density sits at 85% of the Greenwald limit, so more
+// current holds more fuel; 18% of the electrons belong to helium ash and
+// impurities. The confinement factor H is tuned so 15 MA with 50 MW of
+// heating gives Q = 10 and about 500 MW, the usual reactor-scale design point.
+// When the solution has more than one temperature, the lowest one wins: a
+// plasma heats up from cold, so a plasma that radiates more than it is
+// heated stays cold, the way a real one does.
+export const PARAMS = [
+    { key: 'current', label: 'Plasma current', min: 5, max: 17, step: 0.5, unit: 'MA', value: 15 },
+    { key: 'heating', label: 'Heating power', min: 10, max: 75, step: 5, unit: 'MW', value: 50 }
+];
+/** Machine: metres and tesla. */
+export const MACHINE = { R: 6.2, a: 2, kappa: 1.7, B: 5.3, mass: 2.5, zeff: 1.7, greenwald: 0.85, fuel: 0.82, H: 1.15 };
+/** Plasma volume, m3 (a torus of elliptical cross-section). */
+export const VOLUME = 2 * Math.PI * MACHINE.R * Math.PI * MACHINE.a * MACHINE.a * MACHINE.kappa;
+const KEV = 1.602e-16; // joules
+const MEV_DT = 17.6e3; // keV released per reaction
+/** Million degrees per keV. */
+export const MK_PER_KEV = 11.6;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const fin = (v, fallback) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback);
+const snap = (v, s) => clamp(Math.round((v - s.min) / s.step) * s.step + s.min, s.min, s.max);
+export function clampParams(p = {}) {
+    const [current, heating] = PARAMS;
+    return { current: snap(fin(p.current, current.value), current), heating: snap(fin(p.heating, heating.value), heating) };
+}
+/** Bosch-Hale D-T reactivity <sigma v>, m3/s, T in keV. */
+export function reactivity(T) {
+    const [BG, MRC2, C1, C2, C3, C4, C5, C6, C7] = [34.3827, 1124656, 1.17302e-9, 1.51361e-2, 7.51886e-2, 4.60643e-3, 1.35e-2, -1.0675e-4, 1.366e-5];
+    const th = T / (1 - (T * (C2 + T * (C4 + T * C6))) / (1 + T * (C3 + T * (C5 + T * C7))));
+    const xi = Math.cbrt((BG * BG) / (4 * th));
+    return C1 * th * Math.sqrt(xi / (MRC2 * T ** 3)) * Math.exp(-3 * xi) * 1e-6;
+}
+/** Electron density, m^-3: 85% of the Greenwald limit Ip / (pi a^2). */
+export const densityOf = (p) => ((MACHINE.greenwald * p.current) / (Math.PI * MACHINE.a ** 2)) * 1e20;
+/** Edge safety factor q95: how many times a field line goes round the long way for once round the short way. */
+export const q95Of = (p) => (1.3 * 5 * MACHINE.a ** 2 * MACHINE.B * (1 + MACHINE.kappa ** 2)) / (2 * MACHINE.R * p.current);
+/** Profile sums at core temperature T0 (keV): fusion and bremsstrahlung power (MW) and stored energy (MJ). */
+function profile(T0, n) {
+    let fusion = 0;
+    let brems = 0;
+    let energy = 0;
+    const N = 32;
+    const nd = MACHINE.fuel * n;
+    for (let i = 0; i < N; i++) {
+        const r = (i + 0.5) / N;
+        const w = (2 * r) / N; // volume weight of the shell
+        const T = Math.max(0.05, T0 * (1 - r * r));
+        fusion += w * 0.25 * nd * nd * reactivity(T) * MEV_DT * KEV;
+        brems += w * 5.35e-37 * MACHINE.zeff * n * n * Math.sqrt(T);
+        energy += w * 3 * n * T * KEV;
+    }
+    return { fusion: (fusion * VOLUME) / 1e6, brems: (brems * VOLUME) / 1e6, energy: (energy * VOLUME) / 1e6 };
+}
+/** IPB98(y,2) energy confinement time, s, at loss power P (MW). */
+function tauOf(p, n, P) {
+    const { R, a, kappa, B, mass, H } = MACHINE;
+    return H * 0.0562 * p.current ** 0.93 * B ** 0.15 * Math.max(P, 1) ** -0.69 * (n / 1e19) ** 0.41 * mass ** 0.19 * R ** 1.97 * (a / R) ** 0.58 * kappa ** 0.78;
+}
+const cache = new Map();
+export function solve(p) {
+    const key = `${p.current}|${p.heating}`;
+    const hit = cache.get(key);
+    if (hit)
+        return hit;
+    const n = densityOf(p);
+    const gap = (T0) => {
+        const s = profile(T0, n);
+        const heat = p.heating + s.fusion / 5; // alphas carry a fifth of each reaction's energy
+        return s.energy / tauOf(p, n, heat) + s.brems - heat;
+    };
+    let T = 0.5;
+    let prev = gap(T);
+    for (let x = 1; x <= 60; x += 0.5) {
+        const g = gap(x);
+        if (prev < 0 && g >= 0) {
+            let [lo, hi] = [x - 0.5, x];
+            for (let i = 0; i < 40; i++) {
+                const mid = (lo + hi) / 2;
+                if (gap(mid) < 0)
+                    lo = mid;
+                else
+                    hi = mid;
+            }
+            T = (lo + hi) / 2;
+            break;
+        }
+        prev = g;
+        T = x;
+    }
+    const s = profile(T, n);
+    const out = { core: T, fusion: s.fusion, gain: s.fusion / p.heating, density: n, tau: tauOf(p, n, p.heating + s.fusion / 5), q95: q95Of(p) };
+    cache.set(key, out);
+    return out;
+}
+export const millionDegrees = (s) => s.core * MK_PER_KEV;
+export function readoutsOf(p) {
+    const s = solve(p);
+    return {
+        temperature: Math.round(millionDegrees(s)).toString(),
+        fusion: Math.round(s.fusion).toString(),
+        gain: s.gain < 10 ? s.gain.toFixed(1) : Math.round(s.gain).toString()
+    };
+}
+export function describe(p) {
+    const s = solve(p);
+    return (`A tokamak fusion reactor, cut open: a ring-shaped vacuum vessel inside 18 D-shaped toroidal field coils, with the central solenoid in the hole of the ring, ` +
+        `poloidal field coils around the outside, blanket modules lining the vessel, the divertor at its floor and a heating beam injector at the side. ` +
+        `Inside, a ring of deuterium-tritium plasma carries ${p.current} million amps and takes ${p.heating} MW of heating. ` +
+        `Its core reaches about ${Math.round(millionDegrees(s))} million degrees, hot enough for the nuclei to fuse into helium and fast neutrons, ` +
+        `making ${Math.round(s.fusion)} MW of fusion power, ${s.gain < 10 ? s.gain.toFixed(1) : Math.round(s.gain)} times the heating put in.`);
+}
+// ---- motion -----------------------------------------------------------------
+/** Glow 0..1 of the plasma, from its core temperature (cold below 2 keV, full at 20). */
+export const glowOf = (s) => clamp((s.core - 2) / 18, 0, 1);
+/**
+ * Field-line pitch: the poloidal turn per toroidal turn on flux surface rho
+ * (0 = magnetic axis, 1 = edge), 1 / q with q rising from 1 on axis to q95.
+ */
+export const twistAt = (p, rho) => 1 / (1 + (q95Of(p) - 1) * rho * rho);
+/** Toroidal drift of the drawn particles, radians a second (the drawing is slowed far below real speed). */
+export const streamSpeedOf = (s) => 0.12 + 0.05 * Math.sqrt(Math.max(s.core, 0));
+/** Beam dash speed, units a second, from the heating power. */
+export const beamSpeedOf = (p) => 6 + p.heating * 0.4;

package/dist/figures/types.d.ts

@@ -0,0 +1,43 @@
+export interface FigureParam {
+    key: string;
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    unit?: string;
+    value: number;
+}
+export interface FigureReadout {
+    key: string;
+    label: string;
+    unit?: string;
+}
+export interface FigureAnchor {
+    id: string;
+    label: string;
+    /** Position in percent of the figure box (0..100). */
+    x: number;
+    y: number;
+}
+export interface FigureMeta {
+    id: string;
+    title: string;
+    params: FigureParam[];
+    readouts: FigureReadout[];
+    anchors: FigureAnchor[];
+}
+export type FigureTheme = 'dark' | 'light';
+export interface FigureHandle {
+    update(params: Record<string, number>): void;
+    setTheme(theme: FigureTheme): void;
+    seek(t: number): void;
+    destroy(): void;
+}
+export interface FigureModule {
+    meta: FigureMeta;
+    mount(el: HTMLElement, options: {
+        theme?: FigureTheme;
+        params?: Record<string, number>;
+        onReadout?: (values: Record<string, string>) => void;
+    }): FigureHandle;
+}

package/dist/figures/types.js

@@ -0,0 +1,4 @@
+// figures/types.ts: the contract every curated figure module meets, so the
+// `figure` widget can render any of them: meta for the frame, sliders,
+// readouts and pins, and `mount` that draws the figure live into an element.
+export {};

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export { default as Ripple } from './Ripple.svelte';
+export { StateManager, createStateManager } from './core/state-manager.svelte.js';
+export { EventDispatcher, createEventDispatcher, FlowAbortError, MAX_FLOW_DEPTH, CONFIRM_STATE_KEY, FLOW_ERROR_STATE_KEY, type PendingConfirm } from '@ripple-ui/core';
+export { WidgetRegistry, createWidgetRegistry, type WidgetMethod } from '@ripple-ui/core';
+export { evaluateExpression, resolveString, resolveObject, resolveValue, evaluateCondition, hasExpressions, withFlowContext, type ResolverContext } from '@ripple-ui/core';
+export { normalizeSpec } from '@ripple-ui/core';
+export { themeToCssVars, themeToStyleString } from '@ripple-ui/core';
+export { validateCatalog, specIssues, type SpecIssue, type UnknownNode, type ValidateCatalogOptions } from './widgets/validate-catalog-bound.js';
+export { formatSpecIssues } from '@ripple-ui/core';
+export { newNodeId, isValidNodeId, ensureNodeIds } from '@ripple-ui/core';
+export { findById, findParent, applyAddNode, applyReplaceNode, applySetNodeProp, applyMoveNode, applyRemoveNode, applySetPropArrayItem, applyAppendPropArrayItem, applyRemovePropArrayItem, applyOp, type AddNodeOp, type ReplaceNodeOp, type SetNodePropOp, type MoveNodeOp, type RemoveNodeOp, type SetPropArrayItemOp, type AppendPropArrayItemOp, type RemovePropArrayItemOp } from '@ripple-ui/core';
+export { getStatePath, setStatePath, appendStatePath, removeStatePath, patchState, applyStateOp } from '@ripple-ui/core';
+export { checkIllustrationSvg, checkIllustrationAnnotations, sanitizeIllustrationSvg, type IllustrationCheck } from './security/illustration-svg.js';
+export { setModelAssetBase, getModelAssetBase, resolveModelAsset, type ModelAnchor, type ModelAsset, type ModelCatalog, type ResolvedModelAsset } from './widgets/media/model-asset-types.js';
+export { setMapDefaultTiles, type TilePreset as MapTilePreset } from './widgets/data/Map.svelte';
+export { getWidget, registerWidget, unregisterWidget, hasWidget, getWidgetTypes, resetRegistry } from './widgets/index.js';
+export { UISpec, UINode, ThemeOverrides, parseUISpec, safeParseUISpec, CURRENT_SPEC_VERSION, isCompatibleUISpecVersion, isCompatibleSpecVersion } from '@ripple-ui/core';
+export { UniversalSpec, IntentType, LifecycleType, FlowAction, parseUniversalSpec, safeParseUniversalSpec } from '@ripple-ui/core';
+export { EventHandler, EventAction, EventHandlerOrArray } from '@ripple-ui/core';
+export { ChainExecutor, MAX_HISTORY_DEPTH, FlowRunner, buildOnboardingWizard, type ChainState, type TerminalResult } from './intent/index.js';
+export { WidgetType, WIDGET_CATEGORIES } from '@ripple-ui/core';
+export { reorderable, type ReorderableOptions } from './actions/reorderable.js';
+export { withMotion } from './actions/index.js';
+export { movingIndicator, type MovingIndicatorOptions, type IndicatorRect, type ActiveSource, } from './motion/moving-indicator.js';
+export { FF_SPRING_TOKENS } from '@ripple-ui/core';
+export { playCue, setSoundEnabled, soundEnabled, type CueName } from './sound/index.js';
+export { wghtStyle, animateWght, proximity, proximityHover, nextElevation, surfaceVar, currentElevation, provideElevation, ELEVATION_MAX, } from './systems/index.js';
+export type { RippleEvent, RippleEventResult } from '@ripple-ui/core';
+export type { OnEventCallback } from '@ripple-ui/core';

package/dist/index.js

@@ -0,0 +1,53 @@
+// Updated 2026-05-22: export validateCatalog so hosts can gate a spec
+// against the widget catalog before mount (Increment 5 catalog-as-allowlist).
+// Updated 2026-05-30 (Phase 2): export withMotion + the Fluid Functionalism
+// systems layer (variable-font-weight, proximity-hover, elevation ladder).
+// Updated 2026-05-30 (Phase 4): export themeToCssVars + themeToStyleString
+// (the white-label theme-applier).
+// Main component
+export { default as Ripple } from './Ripple.svelte';
+// Core engine
+export { StateManager, createStateManager } from './core/state-manager.svelte.js';
+export { EventDispatcher, createEventDispatcher, FlowAbortError, MAX_FLOW_DEPTH, CONFIRM_STATE_KEY, FLOW_ERROR_STATE_KEY } from '@ripple-ui/core';
+export { WidgetRegistry, createWidgetRegistry } from '@ripple-ui/core';
+export { evaluateExpression, resolveString, resolveObject, resolveValue, evaluateCondition, hasExpressions, withFlowContext } from '@ripple-ui/core';
+export { normalizeSpec } from '@ripple-ui/core';
+export { themeToCssVars, themeToStyleString } from '@ripple-ui/core';
+// Bound to this renderer's widget registry — the engine's own
+// `validateCatalog` takes the catalog as an argument so @ripple-ui/core
+// stays free of any renderer dependency. Callers see no difference.
+export { validateCatalog, specIssues } from './widgets/validate-catalog-bound.js';
+export { formatSpecIssues } from '@ripple-ui/core';
+export { newNodeId, isValidNodeId, ensureNodeIds } from '@ripple-ui/core';
+export { findById, findParent, applyAddNode, applyReplaceNode, applySetNodeProp, applyMoveNode, applyRemoveNode, applySetPropArrayItem, applyAppendPropArrayItem, applyRemovePropArrayItem, applyOp } from '@ripple-ui/core';
+export { getStatePath, setStatePath, appendStatePath, removeStatePath, patchState, applyStateOp } from '@ripple-ui/core';
+// The `illustration` widget's SVG policy check and rebuild, for host card policies.
+export { checkIllustrationSvg, checkIllustrationAnnotations, sanitizeIllustrationSvg } from './security/illustration-svg.js';
+// The `model-viewer` widget's built-in model library contract and asset base.
+export { setModelAssetBase, getModelAssetBase, resolveModelAsset } from './widgets/media/model-asset-types.js';
+// The `map` widget's tile preset when a map sets none (a CSP that only allows OSM sets 'osm').
+export { setMapDefaultTiles } from './widgets/data/Map.svelte';
+// Widget registry
+export { getWidget, registerWidget, unregisterWidget, hasWidget, getWidgetTypes, resetRegistry } from './widgets/index.js';
+// Schema
+export { UISpec, UINode, ThemeOverrides, parseUISpec, safeParseUISpec, CURRENT_SPEC_VERSION, isCompatibleUISpecVersion, 
+// Deprecated alias of isCompatibleUISpecVersion (Gen-1 only — see schema).
+isCompatibleSpecVersion } from '@ripple-ui/core';
+export { UniversalSpec, IntentType, LifecycleType, FlowAction, parseUniversalSpec, safeParseUniversalSpec } from '@ripple-ui/core';
+export { EventHandler, EventAction, EventHandlerOrArray } from '@ripple-ui/core';
+// Chain Flow primitive (RFC 13) — the client-side, zero-roundtrip multi-step
+// flow runtime. `ChainExecutor` walks a nested chain/chain_map tree; `FlowRunner`
+// hosts it over `<Ripple>` so a flow renders in a Pocket (or any surface).
+export { ChainExecutor, MAX_HISTORY_DEPTH, FlowRunner, buildOnboardingWizard } from './intent/index.js';
+export { WidgetType, WIDGET_CATEGORIES } from '@ripple-ui/core';
+// Actions
+export { reorderable } from './actions/reorderable.js';
+export { withMotion } from './actions/index.js';
+// Motion primitives (Fluid Functionalism) — reusable by host apps for
+// shared-layout sliding indicators (animated tabs/segmented nav) and FF timing.
+export { movingIndicator, } from './motion/moving-indicator.js';
+export { FF_SPRING_TOKENS } from '@ripple-ui/core';
+// Sound cues — host apps can play a cue or offer their own mute button.
+export { playCue, setSoundEnabled, soundEnabled } from './sound/index.js';
+// Fluid Functionalism systems layer (MIT)
+export { wghtStyle, animateWght, proximity, proximityHover, nextElevation, surfaceVar, currentElevation, provideElevation, ELEVATION_MAX, } from './systems/index.js';

package/dist/intent/ChainProgress.svelte

@@ -0,0 +1,224 @@
+<!--
+  ChainProgress.svelte — step progress chrome for Chain Flow (RFC 13, every-surface).
+  Created 2026-06-07.
+  Ported from ocean-flow's ChainProgress.svelte and re-themed onto Ripple's
+  --ripple-* design tokens. Two modes:
+    - 'dots'    minimal Apple-style circles + "Step N of M" counter (default);
+    - 'stepper' compact horizontal chips of completed steps + a "current" pill.
+  The genesis quizMode (correct/incorrect colouring) is intentionally dropped for
+  this slice — it pulled quiz-specific deps and the flow primitive has no quiz
+  concept yet. Steps are PURELY presentational: this reads `completed`/`current`/
+  `total` already computed by FlowRunner from the executor's history; it never
+  touches the executor or any service.
+-->
+<script lang="ts">
+	interface StepInfo {
+		/** Step heading (spec title), used in the hover tooltip. */
+		title?: string;
+		/** Short display value for the step (e.g. the selection label). */
+		value?: string;
+	}
+
+	interface Props {
+		/** Completed steps to display (everything before the current one). */
+		steps?: StepInfo[];
+		/** Current step number (1-indexed). */
+		current: number;
+		/** Total steps if known; when absent, only the live count is shown. */
+		total?: number;
+		/** 'dots' for minimal, 'stepper' for labelled chips. */
+		mode?: 'dots' | 'stepper';
+	}
+
+	let { steps = [], current, total, mode = 'dots' }: Props = $props();
+
+	// When total is unknown (dynamic chain_map ahead), fall back to the live count.
+	const totalCount = $derived(total ?? Math.max(steps.length + 1, current));
+	const completedSteps = $derived(steps.length);
+</script>
+
+<div class="chain-progress" data-mode={mode}>
+	{#if mode === 'dots'}
+		<div class="chain-progress__dots">
+			{#each Array(totalCount) as _, i}
+				{@const stepNum = i + 1}
+				{@const isCompleted = stepNum <= completedSteps}
+				{@const isCurrent = stepNum === current}
+				{@const stepData = steps[i]}
+				<div class="chain-progress__dot-wrap">
+					<span
+						class="chain-progress__dot"
+						class:is-current={isCurrent}
+						class:is-completed={isCompleted && !isCurrent}
+					></span>
+					{#if isCompleted && stepData?.value}
+						<span class="chain-progress__tip">{stepData.value}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		<p class="chain-progress__counter">
+			Step {current}{total ? ` of ${total}` : ''}
+		</p>
+	{:else}
+		<div class="chain-progress__stepper">
+			{#each steps as step, i (i)}
+				<div class="chain-progress__chip">
+					<span class="chain-progress__chip-num">{i + 1}</span>
+					<span class="chain-progress__chip-label">
+						{step.value || step.title || `Step ${i + 1}`}
+					</span>
+				</div>
+				<span class="chain-progress__connector"></span>
+			{/each}
+			<div class="chain-progress__chip chain-progress__chip--current">
+				<span class="chain-progress__chip-num chain-progress__chip-num--current">{current}</span>
+				<span class="chain-progress__chip-label">Current</span>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.chain-progress {
+		padding: 0.5rem 0;
+	}
+
+	/* ---- Dots mode ---- */
+	.chain-progress__dots {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+	}
+
+	.chain-progress__dot-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.chain-progress__dot {
+		display: block;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: color-mix(in oklch, var(--ripple-muted-foreground) 25%, transparent);
+		transition:
+			width 200ms ease-out,
+			height 200ms ease-out,
+			background-color 200ms ease-out,
+			transform 200ms ease-out;
+	}
+
+	.chain-progress__dot.is-completed {
+		background: color-mix(in oklch, var(--ripple-accent) 45%, transparent);
+	}
+
+	.chain-progress__dot.is-current {
+		width: 0.625rem;
+		height: 0.625rem;
+		background: var(--ripple-accent);
+		transform: scale(1.1);
+	}
+
+	.chain-progress__tip {
+		position: absolute;
+		bottom: calc(100% + 0.4rem);
+		left: 50%;
+		transform: translateX(-50%);
+		padding: 0.15rem 0.45rem;
+		font-size: 0.7rem;
+		white-space: nowrap;
+		border-radius: var(--ripple-radius);
+		background: var(--ripple-surface);
+		color: var(--ripple-surface-foreground);
+		border: 1px solid var(--ripple-border);
+		box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 200ms ease-out;
+		z-index: 20;
+	}
+
+	.chain-progress__dot-wrap:hover .chain-progress__tip {
+		opacity: 1;
+	}
+
+	.chain-progress__counter {
+		margin-top: 0.5rem;
+		text-align: center;
+		font-size: 0.7rem;
+		font-weight: 500;
+		letter-spacing: 0.02em;
+		color: var(--ripple-muted-foreground);
+	}
+
+	/* ---- Stepper mode ---- */
+	.chain-progress__stepper {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	.chain-progress__stepper::-webkit-scrollbar {
+		display: none;
+	}
+
+	.chain-progress__chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.2rem 0.55rem;
+		border-radius: 9999px;
+		font-size: 0.72rem;
+		background: var(--ripple-muted);
+		color: var(--ripple-muted-foreground);
+		flex-shrink: 0;
+		transition: background-color 200ms ease-out;
+	}
+
+	.chain-progress__chip--current {
+		background: var(--ripple-accent);
+		color: var(--ripple-accent-foreground);
+		font-weight: 500;
+	}
+
+	.chain-progress__chip-num {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1rem;
+		height: 1rem;
+		border-radius: 9999px;
+		font-size: 0.62rem;
+		font-weight: 600;
+		background: color-mix(in oklch, var(--ripple-accent) 12%, transparent);
+	}
+
+	.chain-progress__chip-num--current {
+		background: color-mix(in oklch, var(--ripple-accent-foreground) 20%, transparent);
+	}
+
+	.chain-progress__chip-label {
+		max-width: 80px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 500;
+	}
+
+	.chain-progress__connector {
+		width: 0.5rem;
+		height: 1px;
+		background: var(--ripple-border);
+		flex-shrink: 0;
+	}
+
+	.chain-progress__connector:last-of-type {
+		display: none;
+	}
+</style>

package/dist/intent/ChainProgress.svelte.d.ts

@@ -0,0 +1,19 @@
+interface StepInfo {
+    /** Step heading (spec title), used in the hover tooltip. */
+    title?: string;
+    /** Short display value for the step (e.g. the selection label). */
+    value?: string;
+}
+interface Props {
+    /** Completed steps to display (everything before the current one). */
+    steps?: StepInfo[];
+    /** Current step number (1-indexed). */
+    current: number;
+    /** Total steps if known; when absent, only the live count is shown. */
+    total?: number;
+    /** 'dots' for minimal, 'stepper' for labelled chips. */
+    mode?: 'dots' | 'stepper';
+}
+declare const ChainProgress: import("svelte").Component<Props, {}, "">;
+type ChainProgress = ReturnType<typeof ChainProgress>;
+export default ChainProgress;