@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/vertical/org-chart-layout.js

@@ -0,0 +1,192 @@
+// org-chart-layout.ts: the pure half of OrgChart.svelte. It normalizes the
+// model's `root` into a clean tree (never throws), picks a layout by fit, and
+// works out selection and default expansion. No DOM, no Svelte.
+//
+// Layout is a fit ladder, not a breakpoint: an org chart's width need comes
+// from the data (14 direct reports overflow any card), so the component
+// measures its body width and asks pickMode. `tree` puts every leaf in its own
+// column; `stacked` stacks a manager's all-leaf team in one column under it;
+// `list` is the indented outline and always fits. The px widths here are the
+// same constants the component writes into its CSS, so the formula and the
+// drawn tree cannot drift apart.
+//
+// Keys are path-based ("0.2.1"), so duplicate, missing or half-streamed ids
+// never collide. Selection matches String(value) === String(id), first person
+// in reading order wins.
+import { safeUrl } from '@ripple-ui/core';
+import { safeArray } from '../../utils/safe-props.js';
+import { asText } from '../text-coerce';
+import { plain } from '../data-kit/format.js';
+export const CARD_W = 152;
+export const GAP = 16;
+export const UNIT = CARD_W + GAP;
+/** A stacked team's column sits this far right of its manager's card. */
+export const STACK_INDENT = 16;
+export const MAX_DEPTH = 16;
+export const CHART_MAX_PEOPLE = 24;
+export const CHART_MIN_WIDTH = 480;
+export const MAX_STACK = 8;
+/** List rows stop indenting past this many levels below the root. */
+export const LIST_INDENT_CAP = 5;
+function idOf(v) {
+    if (typeof v === 'number' && Number.isFinite(v))
+        return v;
+    if (typeof v === 'string' && v.trim() !== '')
+        return v;
+    return undefined;
+}
+function isObj(v) {
+    return v !== null && typeof v === 'object' && !Array.isArray(v);
+}
+function make(name, title, id, avatar, key, depth) {
+    const src = typeof avatar === 'string' ? safeUrl(avatar, { kind: 'resource' }) : '';
+    return { key, id, name: name || 'Unnamed', unnamed: !name, title, avatar: src || undefined, children: [], more: 0, depth };
+}
+function countBelow(kids, seen) {
+    let n = 0;
+    for (const k of kids) {
+        if (typeof k === 'string')
+            n += plain(k) ? 1 : 0;
+        else if (isObj(k) && !seen.has(k)) {
+            seen.add(k);
+            n += 1 + countBelow(safeArray(k.children), seen);
+        }
+    }
+    return n;
+}
+function person(raw, key, depth, ancestors) {
+    if (typeof raw === 'string') {
+        const name = plain(raw);
+        return name ? make(name, '', undefined, undefined, key, depth) : null;
+    }
+    // A child that is its own ancestor is a loop: nothing new to show.
+    if (!isObj(raw) || ancestors.has(raw))
+        return null;
+    const p = make(plain(raw.name), plain(raw.title), idOf(raw.id), raw.avatar, key, depth);
+    const kids = safeArray(raw.children);
+    if (depth + 1 >= MAX_DEPTH) {
+        p.more = countBelow(kids, new WeakSet([raw, ...ancestors]));
+        return p;
+    }
+    ancestors.add(raw);
+    for (const k of kids) {
+        const c = person(k, `${key}.${p.children.length}`, depth + 1, ancestors);
+        if (c)
+            p.children.push(c);
+    }
+    ancestors.delete(raw);
+    return p;
+}
+/** The model's `root` as a forest: [] when empty, several roots for an array. */
+export function normalize(root) {
+    const tops = Array.isArray(root) ? root : isObj(root) ? [root] : [];
+    const out = [];
+    for (const t of tops) {
+        const p = person(t, String(out.length), 0, new Set());
+        if (p)
+            out.push(p);
+    }
+    return out;
+}
+function walk(forest, fn) {
+    for (const p of forest) {
+        fn(p);
+        walk(p.children, fn);
+    }
+}
+export function stats(forest) {
+    let people = 0;
+    let levels = 0;
+    let cut = false;
+    walk(forest, (p) => {
+        people += 1 + p.more;
+        levels = Math.max(levels, p.depth + 1);
+        if (p.more)
+            cut = true;
+    });
+    return { people, levels, cut };
+}
+export function summary(forest) {
+    const { people, levels } = stats(forest);
+    if (people === 0)
+        return '';
+    if (people === 1)
+        return '1 person';
+    if (forest.length > 1)
+        return `${people} people · ${forest.length} teams`;
+    return `${people} people · ${levels} ${levels === 1 ? 'level' : 'levels'}`;
+}
+/** A manager whose two or more reports are all leaves: one column in `stacked`. */
+export function isStack(p) {
+    return p.children.length >= 2 && p.children.every((c) => c.children.length === 0 && c.more === 0);
+}
+/** Columns a subtree needs in a chart mode. */
+export function columns(p, mode) {
+    if (p.children.length === 0)
+        return 1;
+    if (mode === 'stacked' && isStack(p))
+        return 1;
+    return p.children.reduce((n, c) => n + columns(c, mode), 0);
+}
+/** Width in px a subtree takes when drawn; the component sets exactly this. */
+export function nodeWidth(p, mode) {
+    if (p.children.length === 0)
+        return UNIT;
+    if (mode === 'stacked' && isStack(p))
+        return UNIT + STACK_INDENT;
+    return p.children.reduce((n, c) => n + nodeWidth(c, mode), 0);
+}
+function longestStack(forest) {
+    let n = 0;
+    walk(forest, (p) => {
+        if (isStack(p))
+            n = Math.max(n, p.children.length);
+    });
+    return n;
+}
+/** The first layout that fits `width` px of content. 0 (not measured yet) is `list`. */
+export function pickMode(forest, width) {
+    const { people, cut } = stats(forest);
+    if (people === 0 || cut || people > CHART_MAX_PEOPLE || width < CHART_MIN_WIDTH)
+        return 'list';
+    const w = (mode) => forest.reduce((n, p) => n + nodeWidth(p, mode), 0);
+    if (w('tree') <= width)
+        return 'tree';
+    if (w('stacked') <= width && longestStack(forest) <= MAX_STACK)
+        return 'stacked';
+    return 'list';
+}
+/** Keys from the root down to the selected person (inclusive), or []. */
+export function selectedPath(forest, value) {
+    if (typeof value !== 'string' && typeof value !== 'number')
+        return [];
+    const want = String(value);
+    if (want === '')
+        return [];
+    const find = (ps, trail) => {
+        for (const p of ps) {
+            const here = [...trail, p.key];
+            if (p.id !== undefined && String(p.id) === want)
+                return here;
+            const hit = find(p.children, here);
+            if (hit)
+                return hit;
+        }
+        return null;
+    };
+    return find(forest, []) ?? [];
+}
+/**
+ * Managers open by default in the list: all of them up to CHART_MAX_PEOPLE;
+ * past that the roots and their direct reports, plus every ancestor of the
+ * selected person.
+ */
+export function defaultOpen(forest, path) {
+    const all = stats(forest).people <= CHART_MAX_PEOPLE;
+    const open = new Set(path.slice(0, -1));
+    walk(forest, (p) => {
+        if (p.children.length && (all || p.depth <= 1))
+            open.add(p.key);
+    });
+    return open;
+}

package/dist/widgets/vertical/saved-views.d.ts

@@ -0,0 +1,22 @@
+export type SavedView = {
+    id: string;
+    label: string;
+    icon?: string;
+    pinned: boolean;
+    count?: number;
+};
+/** More views than this collapse to the first COLLAPSE_AT - 1, plus the selected one. */
+export declare const COLLAPSE_AT = 8;
+/** true, "true" and "yes" (any case) mean pinned; nothing else does. */
+export declare function isPinned(v: unknown): boolean;
+/** A whole count >= 0, or undefined (negative, NaN and words show no count). */
+export declare function sanitizeCount(v: unknown): number | undefined;
+export declare function normalizeViews(v: unknown): SavedView[];
+/** Index of the selected view: the first matching `value`, else the first pinned, else 0; -1 when empty. */
+export declare function selectedIndex(views: readonly SavedView[], value: unknown): number;
+/** Indexes to render: all, or (past COLLAPSE_AT, folded) the first COLLAPSE_AT - 1 plus the selected one. */
+export declare function visibleIndexes(total: number, selected: number, expanded: boolean): number[];
+/** "2,847" below 10,000; "12.4K", "1M" from there. */
+export declare function countText(n: number): string;
+/** "Closed, 2,847 items, pinned": label, then the full count, then pinned. */
+export declare function viewName(v: SavedView): string;

package/dist/widgets/vertical/saved-views.js

@@ -0,0 +1,77 @@
+// widgets/vertical/saved-views.ts: the pure half of SavedViews. `views` is model
+// output, so it is normalised here once (bare strings, missing ids or labels,
+// string counts, "yes" for pinned, nulls) before the component sees it. Also
+// holds the default-selection rule (value, else the first pinned view, else the
+// first view), the count-based collapse past COLLAPSE_AT views, and the count
+// text. Everything here returns a value and never throws.
+import { finite, num, plain } from '../data-kit/format.js';
+import { safeArray } from '../../utils/safe-props.js';
+/** More views than this collapse to the first COLLAPSE_AT - 1, plus the selected one. */
+export const COLLAPSE_AT = 8;
+/** true, "true" and "yes" (any case) mean pinned; nothing else does. */
+export function isPinned(v) {
+    if (v === true)
+        return true;
+    return typeof v === 'string' && /^(true|yes)$/i.test(v.trim());
+}
+/** A whole count >= 0, or undefined (negative, NaN and words show no count). */
+export function sanitizeCount(v) {
+    const n = finite(v);
+    return n === undefined || n < 0 ? undefined : Math.round(n);
+}
+function idText(v) {
+    return typeof v === 'string' || typeof v === 'number' ? String(v).trim() : '';
+}
+export function normalizeViews(v) {
+    const out = [];
+    for (const raw of safeArray(v, { widget: 'saved-views', key: 'views' })) {
+        if (typeof raw === 'string' || typeof raw === 'number') {
+            const label = plain(raw);
+            if (label)
+                out.push({ id: String(raw).trim(), label, pinned: false });
+            continue;
+        }
+        if (raw === null || typeof raw !== 'object' || Array.isArray(raw))
+            continue;
+        const o = raw;
+        const label = plain(o.label ?? '');
+        const id = idText(o.id) || label;
+        if (!id)
+            continue;
+        const icon = typeof o.icon === 'string' && o.icon.trim() ? o.icon.trim() : undefined;
+        out.push({ id, label: label || id, icon, pinned: isPinned(o.pinned), count: sanitizeCount(o.count) });
+    }
+    return out;
+}
+/** Index of the selected view: the first matching `value`, else the first pinned, else 0; -1 when empty. */
+export function selectedIndex(views, value) {
+    if (!views.length)
+        return -1;
+    const want = idText(value);
+    const hit = want ? views.findIndex((v) => v.id === want) : -1;
+    if (hit >= 0)
+        return hit;
+    const pinned = views.findIndex((v) => v.pinned);
+    return pinned >= 0 ? pinned : 0;
+}
+/** Indexes to render: all, or (past COLLAPSE_AT, folded) the first COLLAPSE_AT - 1 plus the selected one. */
+export function visibleIndexes(total, selected, expanded) {
+    const all = Array.from({ length: total }, (_, i) => i);
+    if (expanded || total <= COLLAPSE_AT)
+        return all;
+    const head = all.slice(0, COLLAPSE_AT - 1);
+    return selected >= head.length ? [...head, selected] : head;
+}
+/** "2,847" below 10,000; "12.4K", "1M" from there. */
+export function countText(n) {
+    return n < 10_000 ? num(n, { digits: 0 }) : num(n, { compact: true });
+}
+/** "Closed, 2,847 items, pinned": label, then the full count, then pinned. */
+export function viewName(v) {
+    const parts = [v.label];
+    if (v.count !== undefined)
+        parts.push(`${num(v.count, { digits: 0 })} ${v.count === 1 ? 'item' : 'items'}`);
+    if (v.pinned)
+        parts.push('pinned');
+    return parts.join(', ');
+}

package/dist/widgets/workflow/WorkflowEdge.svelte

@@ -0,0 +1,77 @@
+<!--
+  WorkflowEdge.svelte: the one edge type of the workflow canvas.
+
+  LR: a plain edge (target in the next column) runs straight out of its exit to
+  its own channel in the column gap, across to the target's row and straight in,
+  so the edges of a fan-out or fan-in never overlap; its chip rides the last run.
+  TB rows: a plain edge drops from its exit, turns below its chip (each edge of
+  a fan-out or fan-in at its own height) and drops into the target; the chip
+  sits just under the exit. A loop (a back edge, or one that skips a column or
+  row) runs in its own outside lane layout.ts reserved for it, so it never
+  crosses a node or a label; a skip enters its target's top, a back edge its
+  side. The spine plans every route whole (branch lane, rail, back lane) in
+  layout.ts; here its ends only snap to the drawn handles.
+  A back edge is dashed. Chips are one line, clamped
+  with the full text on hover. Colours come from the --xy-* tokens Workflow.svelte
+  maps to ripple tokens; an animated edge marks live flow in the accent and stops
+  under reduced motion.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { BaseEdge, EdgeLabel, getSmoothStepPath, type EdgeProps } from '@xyflow/svelte';
+  import { dropRoute, loopRoute, roundedPath, stepRoute, type PlacedEdge } from './layout.js';
+  import type { Direction } from './types.js';
+
+  let { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd }: EdgeProps = $props();
+
+  const edge = $derived((data as { edge: PlacedEdge; direction: Direction }).edge);
+  const dir = $derived((data as { edge: PlacedEdge; direction: Direction }).direction);
+
+  const route = $derived.by(() => {
+    const s = { x: sourceX, y: sourceY };
+    const t = { x: targetX, y: targetY };
+    // The spine plans the whole route; its ends snap to the drawn handles.
+    if (edge.points) {
+      const p = edge.points.map((q) => ({ ...q }));
+      const n = p.length - 1;
+      if (n === 1) return { path: roundedPath([s, t]), x: edge.at!.x, y: edge.at!.y };
+      p[1].x = s.x;
+      if (p[n - 1].x === p[n].x) p[n - 1].x = t.x;
+      else p[n - 1].y = t.y;
+      p[0] = s;
+      p[n] = t;
+      return { path: roundedPath(p), x: edge.at!.x, y: edge.at!.y };
+    }
+    if (edge.loop) {
+      const r = loopRoute(dir, s, t, edge.lane, edge.chan, edge.turn, edge.chipY, edge.sideExit, !edge.back);
+      const at = edge.at ?? r.label;
+      return { path: roundedPath(r.points), x: at.x, y: at.y };
+    }
+    if (dir === 'LR' && targetX > sourceX + edge.chan + 4) {
+      const r = stepRoute(s, t, edge.chan);
+      return { path: roundedPath(r.points), x: r.label.x, y: r.label.y };
+    }
+    // TB: a labelled edge turns below its chip, and the chip sits under the exit.
+    if (dir === 'TB' && targetY > sourceY + edge.turn + 4) {
+      const path = roundedPath(dropRoute(s, t, edge.turn));
+      return edge.label ? { path, x: sourceX, y: sourceY + edge.chipY } : { path, x: (sourceX + targetX) / 2, y: (sourceY + targetY) / 2 };
+    }
+    // Model positions can put a target behind its source: the library's step routing copes.
+    const [path, x, y] = getSmoothStepPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, borderRadius: 8 });
+    return { path, x, y };
+  });
+</script>
+
+<BaseEdge
+  {id}
+  path={route.path}
+  labelX={route.x}
+  labelY={route.y}
+  {markerEnd}
+  class={['wf-edge', edge.back && 'wf-back', edge.animated && 'wf-live'].filter(Boolean).join(' ')}
+/>
+{#if edge.label}
+  <EdgeLabel x={route.x} y={route.y} class="wf-chip" style={safeStyle(`max-width:${edge.chip}px`)} title={edge.label}>
+    <span>{edge.label}</span>
+  </EdgeLabel>
+{/if}

package/dist/widgets/workflow/WorkflowEdge.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type EdgeProps } from '@xyflow/svelte';
+declare const WorkflowEdge: import("svelte").Component<EdgeProps, {}, "">;
+type WorkflowEdge = ReturnType<typeof WorkflowEdge>;
+export default WorkflowEdge;

package/dist/widgets/workflow/WorkflowNode.svelte

@@ -0,0 +1,173 @@
+<!--
+  WorkflowNode.svelte: one step card on the workflow canvas.
+
+  A token card (raised fill, 1px border) with a 28px icon tile at the leading
+  edge, a label clamped to two lines (full text on hover) and, for any status
+  but idle, a 16px status badge on the trailing corner so status never rides on
+  colour alone. The icon comes from closed maps (workflowIcon): a model-written
+  icon string is never printed. Only the trigger's tile wears the accent; a
+  running step adds an accent ring. Handles are the ones layout.ts placed (an
+  exit per condition branch, entries), drawn as small dots under the line ends.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { Handle, Position } from '@xyflow/svelte';
+  import CircleCheck from '@lucide/svelte/icons/circle-check';
+  import OctagonAlert from '@lucide/svelte/icons/octagon-alert';
+  import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+  import Clock from '@lucide/svelte/icons/clock';
+  import { ICON, workflowIcon } from '../data-kit/icons.js';
+  import type { PlacedNode } from './layout.js';
+
+  let { data }: { data: { node: PlacedNode } } = $props();
+
+  const SIDE = { top: Position.Top, right: Position.Right, bottom: Position.Bottom, left: Position.Left } as const;
+  // Node status onto the shared status tones; idle draws nothing (absence is calm).
+  const STATUS = {
+    success: { Icon: CircleCheck, tone: 'success', word: 'done' },
+    error: { Icon: OctagonAlert, tone: 'error', word: 'failed' },
+    running: { Icon: LoaderCircle, tone: 'accent', word: 'running' },
+    waiting: { Icon: Clock, tone: 'warning', word: 'waiting' },
+  } as const;
+
+  const node = $derived(data.node);
+  const Icon = $derived(workflowIcon(node.type, node.icon));
+  const status = $derived(node.status === 'idle' ? undefined : STATUS[node.status]);
+  const typeWord = $derived(node.type[0].toUpperCase() + node.type.slice(1));
+</script>
+
+<div
+  class="wf-node"
+  class:wf-running={node.status === 'running'}
+  class:wf-trigger={node.type === 'trigger'}
+  title={node.label || typeWord}
+>
+  <span class="wf-tile" aria-hidden="true"><Icon {...ICON.row} /></span>
+  <span class="wf-label" class:wf-empty={!node.label}>{node.label || typeWord}</span>
+  {#if status}
+    <span class="wf-badge wf-{status.tone}" title={status.word}>
+      <status.Icon size={14} strokeWidth={2} aria-hidden="true" />
+    </span>
+  {/if}
+  {#each node.handles as h (h.id)}
+    <Handle
+      id={h.id}
+      type={h.type}
+      position={SIDE[h.side]}
+      isConnectable={false}
+      class="wf-handle"
+      style={safeStyle(h.side === 'top' || h.side === 'bottom' ? `left:${h.pct}%` : `top:${h.pct}%`)}
+    />
+  {/each}
+</div>
+
+<style>
+  .wf-node {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 12px 0 10px;
+    border-radius: var(--ripple-radius, 10px);
+    border: 1px solid var(--ripple-border);
+    background: var(--wf-card);
+    color: var(--ripple-surface-foreground);
+    transition: border-color 0.15s var(--ripple-ease-out), box-shadow 0.15s var(--ripple-ease-out);
+  }
+
+  .wf-node:hover {
+    border-color: var(--ripple-control-border);
+  }
+
+  /* A 1.5px live ring: the 1px border in accent plus half a pixel outside it. */
+  .wf-running {
+    border-color: var(--ripple-accent);
+    box-shadow: 0 0 0 0.5px var(--ripple-accent);
+  }
+
+  .wf-tile {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: calc(var(--ripple-radius, 10px) * 0.7);
+    background: var(--ripple-muted);
+    color: var(--ripple-muted-foreground);
+  }
+
+  .wf-trigger .wf-tile {
+    background: var(--ripple-accent);
+    color: var(--ripple-accent-foreground);
+  }
+
+  .wf-label {
+    flex: 1;
+    min-width: 0;
+    font-size: var(--text-callout, 12px);
+    line-height: var(--lh-callout, 15px);
+    font-weight: var(--weight-medium, 500);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow-wrap: anywhere;
+  }
+
+  .wf-empty {
+    color: var(--ripple-muted-foreground);
+    font-weight: var(--weight-regular, 400);
+  }
+
+  .wf-badge {
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    display: grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--wf-ground);
+    box-shadow: 0 0 0 1px var(--ripple-border);
+  }
+
+  .wf-success { color: var(--ripple-success-text); }
+  .wf-error { color: var(--ripple-error-text); }
+  .wf-warning { color: var(--ripple-warning-text); }
+  .wf-accent { color: var(--ripple-accent-text); }
+
+  .wf-accent :global(svg) {
+    animation: wf-spin 1.1s linear infinite;
+  }
+
+  @keyframes wf-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wf-accent :global(svg) { animation: none; }
+    .wf-node { transition: none; }
+  }
+
+  /* Anchors for edges, not connectors (nothing is connectable): a 4px dot where
+     a line leaves, nothing where it arrives, so a connector reads as one line. */
+  .wf-node :global(.wf-handle) {
+    width: 4px;
+    height: 4px;
+    min-width: 0;
+    min-height: 0;
+    background: var(--ripple-control-border);
+    border: 0;
+    border-radius: 999px;
+    cursor: default;
+  }
+
+  .wf-node :global(.wf-handle.target) {
+    opacity: 0;
+  }
+</style>

package/dist/widgets/workflow/WorkflowNode.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PlacedNode } from './layout.js';
+type $$ComponentProps = {
+    data: {
+        node: PlacedNode;
+    };
+};
+declare const WorkflowNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkflowNode = ReturnType<typeof WorkflowNode>;
+export default WorkflowNode;

package/dist/widgets/workflow/index.d.ts

@@ -0,0 +1,4 @@
+export { default as WorkflowNode } from './WorkflowNode.svelte';
+export { default as WorkflowEdge } from './WorkflowEdge.svelte';
+export { autoLayout, planWorkflow, sanitizeWorkflow } from './layout.js';
+export type { WorkflowNodeData, WorkflowEdgeData } from './types.js';

package/dist/widgets/workflow/index.js

@@ -0,0 +1,4 @@
+// Workflow widget submodule: the node and edge components and the layout planner.
+export { default as WorkflowNode } from './WorkflowNode.svelte';
+export { default as WorkflowEdge } from './WorkflowEdge.svelte';
+export { autoLayout, planWorkflow, sanitizeWorkflow } from './layout.js';