@softov/scena 0.1.2

package/dist/ui/display/Icon.css

@@ -0,0 +1,10 @@
+.oo-icon {
+  display: inline-block;
+  line-height: 1;
+  /* display: inline-flex; */
+  align-items: center;
+  justify-content: center;
+  min-width: 14px;
+  flex-shrink: 0;
+  color: rgb(var(--oo-color, var(--oo-color-muted)));
+}

package/dist/ui/display/Icon.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import './Icon.css';
+export declare function toMonochromeEmoji(input: string): string;
+export declare const NAMED_GLYPH: Record<string, string>;
+export type IconName = keyof typeof NAMED_GLYPH;
+export interface IconProps {
+    name?: IconName | string | {
+        path: string;
+    };
+    size?: number;
+    color?: string;
+    style?: CSSProperties;
+}
+export declare function Icon({ name, size, color, style }: IconProps): import("react").JSX.Element;

package/dist/ui/display/Icon.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Icon.css';
+// a2ui v0.10: `name` is required and is either a known enum value (~58 names)
+// OR an object `{ path: <svg path> }` for custom SVG glyphs. scena also
+// tolerates a freeform string (any unicode/emoji glyph) as a scena extension.
+const VS_TEXT = '\uFE0E'; // text / monochrome request
+const VS_EMOJI = '\uFE0F'; // emoji / color request
+// Emoji-ish chars that commonly accept FE0E.
+// Includes pictographic emoji + older symbol emoji like ⏰, ⚙, ★, etc.
+const TEXT_VARIANT_TARGET = /[\p{Extended_Pictographic}\u2194-\u21AA\u231A-\u231B\u23E9-\u23F3\u2460-\u24FF\u25A0-\u25FF\u2600-\u27BF\u2B00-\u2BFF]/u;
+export function toMonochromeEmoji(input) {
+    const chars = Array.from(String(input));
+    let out = '';
+    for (let i = 0; i < chars.length; i++) {
+        const ch = chars[i];
+        // Convert FE0F -> FE0E
+        if (ch === VS_EMOJI) {
+            out += VS_TEXT;
+            continue;
+        }
+        // Keep existing FE0E
+        if (ch === VS_TEXT) {
+            out += ch;
+            continue;
+        }
+        out += ch;
+        // If char can use text presentation and does not already have a selector,
+        // append FE0E.
+        const next = chars[i + 1];
+        if (TEXT_VARIANT_TARGET.test(ch) && next !== VS_TEXT && next !== VS_EMOJI) {
+            out += VS_TEXT;
+        }
+    }
+    return out;
+}
+// Unicode glyph fallback for the enum names. Until a real font / SVG sprite
+// registry lands, this gives `{name:'check'}` a sensible rendering.
+export const NAMED_GLYPH = {
+    accountCircle: '\u{1F464}',
+    add: '+',
+    // add: '＋',
+    arrowBack: '←',
+    arrowDown: '↓',
+    arrowForward: '→',
+    arrowLeft: '←',
+    arrowRight: '→',
+    arrowUp: '↑',
+    // attachFile: '\u{1F4CE}',
+    attachFile: toMonochromeEmoji('📎'), // 📎
+    calendarToday: toMonochromeEmoji('\u{1F4C5}'),
+    call: toMonochromeEmoji('\u{1F4DE}'),
+    camera: toMonochromeEmoji('\u{1F4F7}'),
+    // camera: toMonochromeEmoji('📸'), // 📸
+    chatModeAsk: toMonochromeEmoji('❓'), // ❓ 💬
+    chatModeAuto: toMonochromeEmoji('⚡'), // ⚡
+    chatModeDirect: toMonochromeEmoji('📨'), // 📨
+    chatModePlan: '🗒',
+    check: '✓',
+    chevronDown: '⮟',
+    chevronUp: '⮝',
+    close: '✕',
+    // close: toMonochromeEmoji('×'), // ×
+    closePanel: '⨉',
+    copy: '⎘',
+    cut: '✂',
+    delete: '🗑',
+    // delete: toMonochromeEmoji('⌫'), // ⌫
+    // download: '↓',
+    download: toMonochromeEmoji('⏬'), // ⏬
+    edit: '✎',
+    error: '!',
+    event: toMonochromeEmoji('\u{1F4C5}'),
+    fastForward: toMonochromeEmoji('⏩'),
+    favorite: '♥',
+    favoriteOff: '♡',
+    fileText: '▤',
+    folder: toMonochromeEmoji('\u{1F4C1}'),
+    folderNormal: toMonochromeEmoji('📁'), // 📁︎
+    folderOpen: toMonochromeEmoji('📂'), // 📂︎
+    help: '?',
+    home: '⌂',
+    imageVideo: '🖼', // 🖼
+    info: 'ℹ',
+    locationOn: toMonochromeEmoji('\u{1F4CD}'),
+    lock: toMonochromeEmoji('🔒'),
+    lockOpen: toMonochromeEmoji('🔓'),
+    mail: '✉',
+    menu: '☰',
+    mobileGo: toMonochromeEmoji('📲'), // 📲
+    mobileOff: toMonochromeEmoji('📴'), // 📴
+    mobileStatus: toMonochromeEmoji('📳'), // 📳
+    moreHoriz: '⋯',
+    moreVert: '⋮',
+    notifications: toMonochromeEmoji('\u{1F514}'),
+    notificationsOff: toMonochromeEmoji('\u{1F515}'),
+    pause: '⏸',
+    payment: toMonochromeEmoji('\u{1F4B3}'),
+    person: toMonochromeEmoji('\u{1F464}'),
+    phone: toMonochromeEmoji('\u{1F4DE}'),
+    photo: toMonochromeEmoji('\u{1F5BC}'),
+    pin: toMonochromeEmoji('📌'),
+    play: '▶',
+    print: toMonochromeEmoji('\u{1F5A8}'),
+    profile: toMonochromeEmoji('♙'), // ♙︎
+    recordAudio: toMonochromeEmoji('🎙'), // 🎙
+    refresh: '↻',
+    reload: toMonochromeEmoji('⟳'), // ⟳
+    rewind: '⏪',
+    route: toMonochromeEmoji('⤳'), // ⤳
+    run: toMonochromeEmoji('▶'), // ▶
+    save: toMonochromeEmoji('✓'), // ✓
+    // search: toMonochromeEmoji('\u{1F50D}'),
+    search: toMonochromeEmoji('⌕'), // ⌕
+    send: '➤',
+    settings: '⚙',
+    share: '↗',
+    shoppingCart: toMonochromeEmoji('\u{1F6D2}'),
+    skipNext: '⏭',
+    skipPrevious: '⏮',
+    star: '★',
+    starHalf: '⯨',
+    starOff: '☆',
+    stop: '⏹',
+    trash: toMonochromeEmoji('🗑'), // 🗑
+    unpin: toMonochromeEmoji('📍'),
+    upload: toMonochromeEmoji('⏫'), // ⏫
+    visibility: '👁',
+    visibilityOff: toMonochromeEmoji('\u{1F576}'),
+    volumeDown: toMonochromeEmoji('\u{1F509}'),
+    volumeMute: toMonochromeEmoji('\u{1F507}'),
+    volumeOff: toMonochromeEmoji('\u{1F507}'),
+    volumeUp: toMonochromeEmoji('\u{1F50A}'),
+    warning: '⚠',
+};
+function isKnownName(v) {
+    return Object.prototype.hasOwnProperty.call(NAMED_GLYPH, v);
+}
+export function Icon({ name = '•', size = 16, color, style }) {
+    if (typeof name === 'object' && name && 'path' in name) {
+        return (_jsx("span", { "aria-hidden": true, className: "oo-icon oo-icon--svg", style: { width: size, height: size, color, display: 'inline-flex', ...style }, children: _jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: name.path }) }) }));
+    }
+    const text = typeof name === 'string' && isKnownName(name) ? NAMED_GLYPH[name] : name;
+    return (_jsx("span", { "aria-hidden": true, className: "oo-icon", style: { fontSize: size, color, ...style }, children: text }));
+}

package/dist/ui/display/Image.css

@@ -0,0 +1 @@
+.oo-image { display: block; }

package/dist/ui/display/Image.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import './Image.css';
+export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scaleDown';
+export type ImageVariant = 'icon' | 'avatar' | 'smallFeature' | 'mediumFeature' | 'largeFeature' | 'header';
+export interface ImageProps {
+    url?: string;
+    description?: string;
+    fit?: ImageFit;
+    variant?: ImageVariant;
+    width?: number | string;
+    height?: number | string;
+    style?: CSSProperties;
+    src?: string;
+    alt?: string;
+}
+export declare function Image({ url, description, fit, variant, width, height, style, src, alt, }: ImageProps): import("react").JSX.Element | null;

package/dist/ui/display/Image.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Image.css';
+function mapFit(f) {
+    switch (f) {
+        case 'cover': return 'cover';
+        case 'contain': return 'contain';
+        case 'none': return 'none';
+        case 'scaleDown': return 'scale-down';
+        case 'fill':
+        default: return 'fill';
+    }
+}
+export function Image({ url, description, fit = 'fill', variant, width, height, style, src, alt, }) {
+    const effectiveUrl = url ?? src;
+    if (!effectiveUrl)
+        return null;
+    const effectiveAlt = description ?? alt ?? '';
+    return (_jsx("img", { className: "oo-image", "data-variant": variant, src: effectiveUrl, alt: effectiveAlt, style: { width, height, objectFit: mapFit(fit), ...style } }));
+}

package/dist/ui/display/Markdown.css

@@ -0,0 +1,38 @@
+.oo-markdown {
+  color: var(--oo-color-fg);
+  font-size: var(--oo-font-size-md);
+  line-height: 1.6;
+}
+.oo-markdown h1 { font-size: 22px; margin: 12px 0 6px; font-weight: 700; }
+.oo-markdown h2 { font-size: 18px; margin: 16px 0 6px; font-weight: 600; }
+.oo-markdown h3 { font-size: 15px; margin: 12px 0 4px; font-weight: 600; }
+.oo-markdown p { margin: 6px 0 10px; }
+.oo-markdown ul {
+  margin: 6px 0 10px;
+  padding-left: 22px;
+}
+.oo-markdown li { margin-bottom: 3px; }
+.oo-markdown a { color: var(--oo-color-accent); text-decoration: none; }
+.oo-markdown a:hover { text-decoration: underline; }
+.oo-markdown code {
+  font-family: var(--oo-font-mono);
+  font-size: 0.92em;
+  padding: 1px 5px;
+  background: var(--oo-color-active);
+  border-radius: 3px;
+}
+.oo-markdown pre {
+  background: var(--oo-color-active);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-md, 8px);
+  padding: var(--oo-spacing-md);
+  font-size: 12px;
+  font-family: var(--oo-font-mono);
+  overflow-x: auto;
+  margin: 6px 0 10px;
+}
+.oo-markdown pre code {
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+}

package/dist/ui/display/Markdown.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from 'react';
+import './Markdown.css';
+export interface MarkdownProps {
+    text?: string;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Markdown({ text, style, className }: MarkdownProps): import("react").JSX.Element;

package/dist/ui/display/Markdown.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import './Markdown.css';
+export function Markdown({ text = '', style, className }) {
+    const blocks = parseBlocks(text);
+    return (_jsx("div", { className: ['oo-kdown', className].filter(Boolean).join(' '), style: style, children: blocks.map((b, i) => renderBlock(b, i)) }));
+}
+function parseBlocks(text) {
+    const blocks = [];
+    const lines = text.split(/\r?\n/);
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i] ?? '';
+        if (line.startsWith('```')) {
+            const lang = line.slice(3).trim();
+            const body = [];
+            i += 1;
+            while (i < lines.length && !(lines[i] ?? '').startsWith('```')) {
+                body.push(lines[i] ?? '');
+                i += 1;
+            }
+            i += 1; // consume closing fence
+            blocks.push({ kind: 'code', lang, body: body.join('\n') });
+            continue;
+        }
+        if (line.startsWith('### ')) {
+            blocks.push({ kind: 'h', level: 3, text: line.slice(4) });
+            i += 1;
+            continue;
+        }
+        if (line.startsWith('## ')) {
+            blocks.push({ kind: 'h', level: 2, text: line.slice(3) });
+            i += 1;
+            continue;
+        }
+        if (line.startsWith('# ')) {
+            blocks.push({ kind: 'h', level: 1, text: line.slice(2) });
+            i += 1;
+            continue;
+        }
+        if (/^[-*] /.test(line)) {
+            const items = [];
+            while (i < lines.length && /^[-*] /.test(lines[i] ?? '')) {
+                items.push((lines[i] ?? '').slice(2));
+                i += 1;
+            }
+            blocks.push({ kind: 'ul', items });
+            continue;
+        }
+        if (line.trim() === '') {
+            i += 1;
+            continue;
+        }
+        // Paragraph — gather consecutive non-empty, non-special lines.
+        const pl = [];
+        while (i < lines.length &&
+            (lines[i] ?? '').trim() !== '' &&
+            !(lines[i] ?? '').startsWith('#') &&
+            !/^[-*] /.test(lines[i] ?? '') &&
+            !(lines[i] ?? '').startsWith('```')) {
+            pl.push(lines[i] ?? '');
+            i += 1;
+        }
+        if (pl.length > 0)
+            blocks.push({ kind: 'p', lines: pl });
+    }
+    return blocks;
+}
+function renderBlock(b, key) {
+    switch (b.kind) {
+        case 'h': {
+            const Tag = (`h${b.level}`);
+            return _jsx(Tag, { children: inline(b.text) }, key);
+        }
+        case 'ul':
+            return (_jsx("ul", { children: b.items.map((it, j) => _jsx("li", { children: inline(it) }, j)) }, key));
+        case 'code':
+            return (_jsx("pre", { "data-lang": b.lang || undefined, children: _jsx("code", { children: b.body }) }, key));
+        case 'p':
+            return (_jsx("p", { children: b.lines.map((l, j) => (_jsxs(Fragment, { children: [inline(l), j < b.lines.length - 1 ? _jsx("br", {}) : null] }, j))) }, key));
+    }
+}
+// Inline parser — runs left-to-right, picking the earliest match for each
+// supported syntax (links / bold / italic / inline code). Plain text is
+// accumulated between matches.
+function inline(s) {
+    const out = [];
+    let i = 0;
+    let buf = '';
+    function flushBuf() { if (buf) {
+        out.push(buf);
+        buf = '';
+    } }
+    while (i < s.length) {
+        // [text](url)
+        if (s[i] === '[') {
+            const close = s.indexOf(']', i + 1);
+            if (close > 0 && s[close + 1] === '(') {
+                const urlEnd = s.indexOf(')', close + 2);
+                if (urlEnd > 0) {
+                    flushBuf();
+                    out.push(_jsx("a", { href: s.slice(close + 2, urlEnd), target: "_blank", rel: "noreferrer noopener", children: s.slice(i + 1, close) }, i));
+                    i = urlEnd + 1;
+                    continue;
+                }
+            }
+        }
+        if (s.slice(i, i + 2) === '**') {
+            const end = s.indexOf('**', i + 2);
+            if (end > 0) {
+                flushBuf();
+                out.push(_jsx("strong", { children: s.slice(i + 2, end) }, i));
+                i = end + 2;
+                continue;
+            }
+        }
+        if (s[i] === '*' && s[i + 1] !== '*') {
+            const end = s.indexOf('*', i + 1);
+            if (end > 0) {
+                flushBuf();
+                out.push(_jsx("em", { children: s.slice(i + 1, end) }, i));
+                i = end + 1;
+                continue;
+            }
+        }
+        if (s[i] === '`') {
+            const end = s.indexOf('`', i + 1);
+            if (end > 0) {
+                flushBuf();
+                out.push(_jsx("code", { children: s.slice(i + 1, end) }, i));
+                i = end + 1;
+                continue;
+            }
+        }
+        buf += s[i];
+        i += 1;
+    }
+    flushBuf();
+    return out;
+}

package/dist/ui/display/Progress.css

@@ -0,0 +1,39 @@
+.oo-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+.oo-progress__head {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+}
+.oo-progress__label {
+  font-weight: 500;
+}
+.oo-progress__value {
+  font-family: var(--oo-font-mono);
+}
+.oo-progress__track {
+  width: 100%;
+  height: var(--oo-progress-height, 6px);
+  background: var(--oo-color-border);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+.oo-progress__bar {
+  height: 100%;
+  background: rgb(var(--oo-progress-color));
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+.oo-progress__bar--indet {
+  width: 30%;
+  animation: oo-progress-indet 1.4s linear infinite;
+}
+@keyframes oo-progress-indet {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}

package/dist/ui/display/Progress.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import { type ResourceColor } from '../../types/colors.js';
+import './Progress.css';
+export interface ProgressProps {
+    value?: number;
+    max?: number;
+    label?: string;
+    display?: 'value' | 'percent' | string;
+    color?: ResourceColor;
+    indeterminate?: boolean;
+    height?: number;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Progress({ value, max, label, display, color, indeterminate, height, style, className, }: ProgressProps): import("react").JSX.Element;

package/dist/ui/display/Progress.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveColorVar } from '../../types/colors.js';
+import './Progress.css';
+export function Progress({ value = 0, max = 100, label, display, color, indeterminate, height, style, className, }) {
+    const safeMax = max > 0 ? max : 100;
+    const pct = Math.max(0, Math.min(100, (value / safeMax) * 100));
+    const colorVar = color ? resolveColorVar(color) : 'var(--oo-color-accent-rgb, 0 102 204)';
+    const wrapperStyle = {
+        ['--oo-progress-color']: colorVar,
+        ['--oo-progress-height']: height ? `${height}px` : undefined,
+        ...style,
+    };
+    const valueText = display === 'value' ? `${value} / ${safeMax}`
+        : display === 'percent' ? `${Math.round(pct)}%`
+            : display;
+    return (_jsxs("div", { className: ['oo-progress', className].filter(Boolean).join(' '), style: wrapperStyle, children: [label || valueText ? (_jsxs("div", { className: "oo-progress__head", children: [label ? _jsx("span", { className: "oo-progress__label", children: label }) : null, valueText ? _jsx("span", { className: "oo-progress__value", children: valueText }) : null] })) : null, _jsx("div", { className: "oo-progress__track", role: "progressbar", "aria-valuenow": indeterminate ? undefined : value, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuetext": label, children: indeterminate ? (_jsx("div", { className: "oo-progress__bar oo-progress__bar--indet" })) : (_jsx("div", { className: "oo-progress__bar", style: { width: `${pct}%` } })) })] }));
+}

package/dist/ui/display/SectionTitle.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface SectionTitleProps {
+    children: ReactNode;
+    style?: CSSProperties;
+}
+export declare function SectionTitle({ children, style }: SectionTitleProps): ReactNode;

package/dist/ui/display/SectionTitle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A small uppercase section heading inside a detail panel — e.g. "USAGE",
+// "Active agents", "Records". Reusable so every section label is consistent.
+export function SectionTitle({ children, style }) {
+    return (_jsx("div", { className: "oo-section-title", style: { ...style }, children: children }));
+}

package/dist/ui/display/Skeleton.css

@@ -0,0 +1,20 @@
+.oo-skeleton {
+  background: var(--oo-color-border);
+  border-radius: var(--oo-radius-sm, 4px);
+  animation: oo-skeleton-pulse 1.5s ease-in-out infinite;
+}
+.oo-skeleton--line {
+  height: 12px;
+  margin-bottom: var(--oo-spacing-sm);
+}
+.oo-skeleton--block {
+  border-radius: var(--oo-radius-md, 8px);
+}oo
+.oo-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+}
+@keyframes oo-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}

package/dist/ui/display/Skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'react';
+import './Skeleton.css';
+export interface SkeletonProps {
+    lines?: number;
+    block?: boolean;
+    width?: number | string;
+    height?: number | string;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Skeleton({ lines, block, width, height, style, className, }: SkeletonProps): import("react").JSX.Element;

package/dist/ui/display/Skeleton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Skeleton.css';
+export function Skeleton({ lines = 3, block, width, height, style, className, }) {
+    if (block) {
+        return (_jsx("div", { className: ['oo-skeleton', 'oo-skeleton--block', className].filter(Boolean).join(' '), "aria-busy": "true", style: { width: width ?? '100%', height: height ?? 80, ...style } }));
+    }
+    return (_jsx("div", { className: ['oo-skeleton-lines', className].filter(Boolean).join(' '), "aria-busy": "true", style: style, children: Array.from({ length: lines }).map((_, i) => (_jsx("div", { className: "oo-skeleton oo-skeleton--line", style: {
+                width: i === lines - 1 ? '60%' : '100%',
+                animationDelay: `${i * 0.1}s`,
+            } }, i))) }));
+}

package/dist/ui/display/Spinner.css

@@ -0,0 +1,20 @@
+.oo-spinner-wrap {
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-muted);
+}
+.oo-spinner {
+  display: inline-block;
+  width: var(--oo-spinner-size, 16px);
+  height: var(--oo-spinner-size, 16px);
+  border: 2px solid var(--oo-color-border);
+  border-top-color: var(--oo-spinner-color, var(--oo-color-accent));
+  border-radius: 50%;
+  animation: oo-spin 0.8s linear infinite;
+  flex: 0 0 auto;
+}
+@keyframes oo-spin {
+  to { transform: rotate(360deg); }
+}
+.oo-spinner__label { line-height: 1; }

package/dist/ui/display/Spinner.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+import { type ResourceColor } from '../../types/colors.js';
+import './Spinner.css';
+export interface SpinnerProps {
+    label?: string;
+    size?: number;
+    color?: ResourceColor;
+    inline?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Spinner({ label, size, color, inline, style, className, }: SpinnerProps): import("react").JSX.Element;

package/dist/ui/display/Spinner.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveColorVar } from '../../types/colors.js';
+import './Spinner.css';
+export function Spinner({ label, size = 16, color, inline = true, style, className, }) {
+    const wrapperStyle = {
+        ['--oo-spinner-size']: `${size}px`,
+        ['--oo-spinner-color']: color ? resolveColorVar(color) : 'var(--oo-color-accent)',
+        ...(inline ? { display: 'inline-flex' } : { display: 'flex' }),
+        ...style,
+    };
+    return (_jsxs("span", { role: "status", "aria-live": "polite", "aria-label": label ?? 'Loading', className: ['oo-r-wrap', className].filter(Boolean).join(' '), style: wrapperStyle, children: [_jsx("span", { className: "oo-spinner", "aria-hidden": true }), label ? _jsx("span", { className: "oo-spinner__label", children: label }) : null] }));
+}

package/dist/ui/display/Svg.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+import { type ResourceColor } from '../../types/colors.js';
+export interface SvgProps {
+    markup?: string;
+    path?: string;
+    width?: number | string;
+    height?: number | string;
+    color?: ResourceColor;
+    viewBox?: string;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Svg({ markup, path, width, height, color, viewBox, style, className, }: SvgProps): import("react").JSX.Element | null;

package/dist/ui/display/Svg.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveColorAlpha } from '../../types/colors.js';
+export function Svg({ markup, path, width = 24, height = 24, color, viewBox = '0 0 24 24', style, className, }) {
+    const inlineStyle = {
+        color: color ? resolveColorAlpha(color) : 'currentColor',
+        ...style,
+    };
+    if (markup) {
+        return (_jsx("span", { className: ['oo-svg', className].filter(Boolean).join(' '), style: { display: 'inline-flex', width, height, ...inlineStyle }, 
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: { __html: markup } }));
+    }
+    if (path) {
+        return (_jsx("svg", { className: ['oo-svg', className].filter(Boolean).join(' '), viewBox: viewBox, width: width, height: height, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", style: inlineStyle, children: _jsx("path", { d: path }) }));
+    }
+    return null;
+}

package/dist/ui/display/Text.css

@@ -0,0 +1,20 @@
+.oo-text                { color: inherit; }
+.oo-text--muted         { color: var(--oo-color-muted); }
+.oo-text--bold          { font-weight: 600; }
+.oo-text--align-start   { text-align: left; }
+.oo-text--align-center  { text-align: center; }
+.oo-text--align-end     { text-align: right; }
+
+/* Semantic tone — wins over muted when both are present (later cascade). */
+.oo-text--tone-accent   { color: var(--oo-color-accent); }
+.oo-text--tone-success  { color: var(--oo-color-success); }
+.oo-text--tone-warning  { color: var(--oo-color-warning); }
+.oo-text--tone-danger   { color: var(--oo-color-danger); }
+
+.oo-text--body    { font-size: var(--oo-font-size-md); }
+.oo-text--caption { font-size: var(--oo-font-size-xs); }
+.oo-text--h1      { font-size: var(--oo-font-size-xl); font-weight: 600; }
+.oo-text--h2      { font-size: var(--oo-font-size-lg); font-weight: 600; }
+.oo-text--h3      { font-size: var(--oo-font-size-md); font-weight: 600; }
+.oo-text--h4      { font-size: var(--oo-font-size-md); font-weight: 600; opacity: 0.9; }
+.oo-text--h5      { font-size: var(--oo-font-size-sm); font-weight: 600; opacity: 0.85; }

package/dist/ui/display/Text.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+import './Text.css';
+export type TextTone = 'accent' | 'success' | 'warning' | 'danger';
+export interface TextProps {
+    text?: string | number | boolean;
+    variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'caption';
+    muted?: boolean;
+    weight?: 'normal' | 'bold';
+    align?: 'start' | 'center' | 'end';
+    tone?: TextTone;
+    style?: CSSProperties;
+}
+export declare function Text({ text, variant, muted, weight, align, tone, style, }: TextProps): import("react").JSX.Element;