@softov/scena 0.1.2

package/dist/ui/chart/Donut.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import './Donut.css';
+export interface DonutSlice {
+    value: number;
+    color: string;
+    label?: string;
+}
+export interface DonutProps {
+    slices: DonutSlice[];
+    size?: number;
+    thickness?: number;
+    centerLabel?: string;
+    style?: CSSProperties;
+}
+export declare function Donut({ slices, size, thickness, centerLabel, style }: DonutProps): import("react").JSX.Element;

package/dist/ui/chart/Donut.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Donut.css';
+export function Donut({ slices, size = 96, thickness = 12, centerLabel, style }) {
+    // Bound props can resolve to undefined before their store path is seeded.
+    slices = slices ?? [];
+    const total = slices.reduce((sum, s) => sum + s.value, 0) || 1;
+    const r = (size - thickness) / 2;
+    const c = 2 * Math.PI * r;
+    const cx = size / 2;
+    let acc = 0;
+    return (_jsxs("div", { className: "oo-donut", style: { width: size, height: size, ...style }, children: [_jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: _jsxs("g", { transform: `rotate(-90 ${cx} ${cx})`, children: [_jsx("circle", { cx: cx, cy: cx, r: r, fill: "none", stroke: "var(--oo-color-border)", strokeWidth: thickness }), slices.map((s, i) => {
+                            const frac = s.value / total;
+                            const dash = frac * c;
+                            const arc = (_jsx("circle", { cx: cx, cy: cx, r: r, fill: "none", stroke: s.color, strokeWidth: thickness, strokeDasharray: `${dash} ${c - dash}`, strokeDashoffset: -acc * c, children: s.label ? _jsx("title", { children: `${s.label}: ${s.value}` }) : null }, i));
+                            acc += frac;
+                            return arc;
+                        })] }) }), centerLabel ? _jsx("div", { className: "oo-donut__center", children: centerLabel }) : null] }));
+}

package/dist/ui/chart/LineChart.css

@@ -0,0 +1,8 @@
+.oo-linechart {
+  display: block;
+  overflow: visible;
+}
+.oo-linechart__axis {
+  stroke: var(--oo-color-border);
+  stroke-width: 1;
+}

package/dist/ui/chart/LineChart.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+import './LineChart.css';
+export interface LineSeries {
+    points: number[];
+    color?: string;
+    label?: string;
+}
+export interface LineChartProps {
+    series: LineSeries[];
+    height?: number;
+    width?: number | string;
+    fill?: boolean;
+    showAxis?: boolean;
+    style?: CSSProperties;
+}
+export declare function LineChart({ series, height, width, fill, showAxis, style }: LineChartProps): import("react").JSX.Element;
+export interface SparklineProps {
+    points: number[];
+    color?: string;
+    height?: number;
+    fill?: boolean;
+    style?: CSSProperties;
+}
+export declare function Sparkline({ points, color, height, fill, style }: SparklineProps): import("react").JSX.Element;

package/dist/ui/chart/LineChart.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './LineChart.css';
+const DEFAULT_COLOR = 'var(--oo-color-accent)';
+export function LineChart({ series, height = 80, width = '100%', fill, showAxis, style }) {
+    // Bound props can resolve to undefined before their store path is seeded.
+    const safeSeries = (series ?? []).map((s) => ({ ...s, points: s.points ?? [] }));
+    const all = safeSeries.flatMap((s) => s.points);
+    const min = all.length > 0 ? Math.min(...all) : 0;
+    const max = all.length > 0 ? Math.max(...all) : 1;
+    const span = max - min || 1;
+    const toXY = (points) => points
+        .map((v, i) => {
+        const x = points.length > 1 ? (i / (points.length - 1)) * 100 : 0;
+        const y = 100 - ((v - min) / span) * 100;
+        return `${x},${y}`;
+    })
+        .join(' ');
+    return (_jsxs("svg", { className: "oo-linechart", viewBox: "0 0 100 100", preserveAspectRatio: "none", style: { width, height, ...style }, children: [showAxis ? (_jsx("line", { className: "oo-linechart__axis", x1: "0", y1: "100", x2: "100", y2: "100", vectorEffect: "non-scaling-stroke" })) : null, safeSeries.map((s, i) => {
+                const color = s.color ?? DEFAULT_COLOR;
+                const xy = toXY(s.points);
+                if (!xy)
+                    return null;
+                return (_jsxs("g", { children: [fill ? _jsx("polygon", { points: `0,100 ${xy} 100,100`, fill: color, opacity: 0.15 }) : null, _jsx("polyline", { points: xy, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] }, i));
+            })] }));
+}
+// A single-series LineChart, compact, no axis. The common inline use.
+export function Sparkline({ points, color, height = 24, fill, style }) {
+    return _jsx(LineChart, { series: [{ points, color }], height: height, fill: fill, style: style });
+}

package/dist/ui/chart/catalog.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDefinition } from '../../types/component-registry.js';
+export declare const CATALOG_CHART_MAP: ComponentDefinition[];

package/dist/ui/chart/catalog.js

@@ -0,0 +1,7 @@
+// Catalog registration for chart components (dynamic import — no eager load).
+export const CATALOG_CHART_MAP = [
+    { component: 'BarChart', category: 'inline', renderer: { kind: 'react', load: () => import('./BarChart.js').then((m) => ({ default: m.BarChart })) } },
+    { component: 'LineChart', category: 'inline', renderer: { kind: 'react', load: () => import('./LineChart.js').then((m) => ({ default: m.LineChart })) } },
+    { component: 'Sparkline', category: 'inline', renderer: { kind: 'react', load: () => import('./LineChart.js').then((m) => ({ default: m.Sparkline })) } },
+    { component: 'Donut', category: 'inline', renderer: { kind: 'react', load: () => import('./Donut.js').then((m) => ({ default: m.Donut })) } },
+];

package/dist/ui/chart/index.d.ts

@@ -0,0 +1,6 @@
+export { BarChart } from './BarChart.js';
+export type { BarChartProps, BarChartBar, BarChartSegment } from './BarChart.js';
+export { LineChart, Sparkline } from './LineChart.js';
+export type { LineChartProps, LineSeries, SparklineProps } from './LineChart.js';
+export { Donut } from './Donut.js';
+export type { DonutProps, DonutSlice } from './Donut.js';

package/dist/ui/chart/index.js

@@ -0,0 +1,4 @@
+// Direct-React re-exports. Catalog registration lives in ../catalog.ts.
+export { BarChart } from './BarChart.js';
+export { LineChart, Sparkline } from './LineChart.js';
+export { Donut } from './Donut.js';

package/dist/ui/control/Button.css

@@ -0,0 +1,7 @@
+.oo-btn {  
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--oo-spacing-xs);
+}

package/dist/ui/control/Button.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import type { SizeName } from '../../styles/index.js';
+import './Button.css';
+export interface ButtonProps {
+    type?: 'button' | 'submit' | 'reset';
+    weight?: number;
+    title?: string;
+    label?: string;
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'default' | 'borderless';
+    disabled?: boolean;
+    onClick?: () => void | Promise<void>;
+    style?: CSSProperties;
+    size?: SizeName;
+    children?: React.ReactNode;
+    rounded?: SizeName;
+}
+export declare function Button({ type, title, label, variant, disabled, onClick, weight, size, style, children, rounded, }: ButtonProps): import("react").JSX.Element;

package/dist/ui/control/Button.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { appearance, resolveVariableFontSize, resolveVariableSize } from '../../styles/index.js';
+import { weightStyle } from '../_utils.js';
+import './Button.css';
+export function Button({ type = 'button', title, label, variant = 'default', disabled, onClick, weight, size = 'sm', style, children, rounded = 'sm', }) {
+    const inlineStyle = {
+        ['--button-padding-y']: `var(${resolveVariableSize(size)})`,
+        ['--button-padding-x']: `var(${resolveVariableSize(size)})`,
+        ['--button-font-size']: `var(${resolveVariableFontSize(size)})`,
+        ['--button-border-radius']: `var(${resolveVariableSize(rounded ?? size)})`,
+        ...weightStyle(weight),
+        ...style
+    };
+    return (_jsx("button", { type: type ?? 'button', disabled: disabled, onClick: () => {
+            void onClick?.();
+        }, "data-variant": variant, className: appearance('oo-btn', { variant }), style: inlineStyle, title: title, children: label ?? children ?? 'Button' }));
+}

package/dist/ui/control/CheckBox.css

@@ -0,0 +1,16 @@
+.oo-checkbox-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+  align-items: flex-start;
+}
+.oo-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--oo-spacing-xs);
+  cursor: pointer;
+}
+.oo-checkbox[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/ui/control/CheckBox.d.ts

@@ -0,0 +1,15 @@
+import { type CheckRuleResolved } from './Checks.js';
+import './CheckBox.css';
+export interface CheckBoxProps {
+    label?: string;
+    value?: boolean;
+    weight?: number;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    checks?: CheckRuleResolved[];
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    onChange?: (next: boolean) => void;
+}
+export declare function CheckBox({ value, defaultValue, label, disabled, checks, weight, hint, error, required, onChange: onChangeProp, }: CheckBoxProps): import("react").JSX.Element;

package/dist/ui/control/CheckBox.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { weightStyle } from '../_utils.js';
+import { Checks } from './Checks.js';
+import { ControlHint, ControlError } from './_field-parts.js';
+import './CheckBox.css';
+export function CheckBox({ value, defaultValue, label, disabled, checks, weight, hint, error, required, onChange: onChangeProp, }) {
+    const writeValue = useWriteBack('value');
+    const [internal, setInternal] = useState(value ?? defaultValue ?? false);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    function onChange(e) {
+        const next = e.currentTarget.checked;
+        setInternal(next);
+        writeValue(next);
+        onChangeProp?.(next);
+    }
+    return (_jsxs("div", { className: "oo-checkbox-field", style: weightStyle(weight), children: [_jsxs("label", { className: "oo-checkbox", "data-disabled": disabled ? 'true' : 'false', children: [_jsx("input", { type: "checkbox", checked: internal, disabled: disabled, onChange: onChange }), label ? (_jsxs("span", { children: [label, required ? _jsx("span", { className: "oo-field__required", children: "*" }) : null] })) : null] }), _jsx(ControlHint, { text: hint }), _jsx(ControlError, { text: error }), _jsx(Checks, { checks: checks })] }));
+}

package/dist/ui/control/Checks.css

@@ -0,0 +1,6 @@
+.oo-checks {
+  color: var(--oo-color-danger);
+  font-size: var(--oo-font-size-xs);
+  margin-top: 2px;
+}
+.oo-checks__item { line-height: 1.4; }

package/dist/ui/control/Checks.d.ts

@@ -0,0 +1,9 @@
+import './Checks.css';
+export interface CheckRuleResolved {
+    condition: unknown;
+    message?: string;
+}
+export interface ChecksProps {
+    checks?: CheckRuleResolved[];
+}
+export declare function Checks({ checks }: ChecksProps): import("react").JSX.Element | null;

package/dist/ui/control/Checks.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Checks.css';
+export function Checks({ checks }) {
+    if (!checks || checks.length === 0)
+        return null;
+    const failed = checks.filter((c) => !c.condition);
+    if (failed.length === 0)
+        return null;
+    return (_jsx("div", { className: "oo-checks", children: failed.map((c, i) => (_jsx("div", { className: "oo-checks__item", children: c.message ?? 'invalid' }, i))) }));
+}

package/dist/ui/control/ChoicePicker.css

@@ -0,0 +1,16 @@
+.oo-select {
+  width: 100%;
+}
+
+.oo-radios {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+}
+
+.oo-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--oo-spacing-xs);
+  cursor: pointer;
+}

package/dist/ui/control/ChoicePicker.d.ts

@@ -0,0 +1,25 @@
+import { type CheckRuleResolved } from './Checks.js';
+import './ChoicePicker.css';
+export type ChoiceOption = string | {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export interface ChoicePickerProps {
+    options?: ChoiceOption[];
+    value?: string;
+    label?: string;
+    displayStyle?: 'checkbox' | 'chips';
+    filterable?: boolean;
+    weight?: number;
+    defaultValue?: string;
+    disabled?: boolean;
+    variant?: 'select' | 'radio';
+    checks?: CheckRuleResolved[];
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    typeTag?: string;
+    onChange?: (next: string) => void;
+}
+export declare function ChoicePicker({ value, defaultValue, options, label, disabled, variant, displayStyle: _displayStyle, filterable, weight, checks, hint, error, required, typeTag, onChange: onChangeProp, }: ChoicePickerProps): import("react").JSX.Element;

package/dist/ui/control/ChoicePicker.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { weightStyle } from '../_utils.js';
+import { Checks } from './Checks.js';
+import { ControlLabel, ControlHint, ControlError } from './_field-parts.js';
+import './ChoicePicker.css';
+function normalize(o) {
+    if (typeof o === 'string')
+        return { label: o, value: o };
+    return o;
+}
+export function ChoicePicker({ value, defaultValue, options = [], label, disabled, variant = 'select', displayStyle: _displayStyle, filterable, weight, checks, hint, error, required, typeTag, onChange: onChangeProp, }) {
+    // displayStyle is accepted for spec parity but visual treatment (chips
+    // rendering) is deferred to Group D rework.
+    void _displayStyle;
+    const writeValue = useWriteBack('value');
+    const opts = options.map(normalize);
+    const [internal, setInternal] = useState(value ?? defaultValue ?? opts[0]?.value ?? '');
+    const [filter, setFilter] = useState('');
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    function select(next) {
+        setInternal(next);
+        writeValue(next);
+        onChangeProp?.(next);
+    }
+    function onSelectChange(e) {
+        select(e.currentTarget.value);
+    }
+    const visibleOpts = filterable && filter
+        ? opts.filter((o) => o.label.toLowerCase().includes(filter.toLowerCase()))
+        : opts;
+    return (_jsxs("label", { className: "oo-field", style: weightStyle(weight), children: [_jsx(ControlLabel, { label: label, required: required, typeTag: typeTag }), _jsx(ControlHint, { text: hint }), filterable ? (_jsx("div", { className: "oo-control", children: _jsx("input", { className: "oo-input", type: "search", placeholder: "Filter\u2026", value: filter, onChange: (e) => setFilter(e.currentTarget.value), disabled: disabled }) })) : null, variant === 'radio' ? (_jsx("div", { className: "oo-radios", children: visibleOpts.map((o) => (_jsxs("label", { className: "oo-radio", children: [_jsx("input", { type: "radio", value: o.value, checked: internal === o.value, disabled: disabled || o.disabled, onChange: () => select(o.value) }), _jsx("span", { children: o.label })] }, o.value))) })) : (_jsx("select", { className: "oo-select", value: internal, disabled: disabled, onChange: onSelectChange, children: visibleOpts.map((o) => (_jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))) })), _jsx(ControlError, { text: error }), _jsx(Checks, { checks: checks })] }));
+}

package/dist/ui/control/DateTimeInput.css

@@ -0,0 +1 @@
+/* DateTimeInput reuses .oo-field + .oo-input from the shared input rules. */

package/dist/ui/control/DateTimeInput.d.ts

@@ -0,0 +1,22 @@
+import { type CheckRuleResolved } from './Checks.js';
+import './DateTimeInput.css';
+import './TextField.css';
+export interface DateTimeInputProps {
+    value?: string;
+    enableDate?: boolean;
+    enableTime?: boolean;
+    label?: string;
+    min?: string;
+    max?: string;
+    weight?: number;
+    defaultValue?: string;
+    mode?: 'date' | 'time' | 'datetime';
+    disabled?: boolean;
+    checks?: CheckRuleResolved[];
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    typeTag?: string;
+    onChange?: (next: string) => void;
+}
+export declare function DateTimeInput({ value, defaultValue, mode, enableDate, enableTime, min, max, label, disabled, weight, checks, hint, error, required, typeTag, onChange: onChangeProp, }: DateTimeInputProps): import("react").JSX.Element;

package/dist/ui/control/DateTimeInput.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { weightStyle } from '../_utils.js';
+import { Checks } from './Checks.js';
+import { ControlLabel, ControlHint, ControlError } from './_field-parts.js';
+import './DateTimeInput.css';
+// DateTimeInput reuses .oo-field + .oo-input from TextField's CSS.
+import './TextField.css';
+function deriveType(opts) {
+    if (opts.mode === 'date')
+        return 'date';
+    if (opts.mode === 'time')
+        return 'time';
+    if (opts.mode === 'datetime')
+        return 'datetime-local';
+    // From enableDate / enableTime per spec:
+    if (opts.enableDate && opts.enableTime)
+        return 'datetime-local';
+    if (opts.enableTime)
+        return 'time';
+    if (opts.enableDate)
+        return 'date';
+    return 'datetime-local'; // sensible scena fallback
+}
+export function DateTimeInput({ value, defaultValue, mode, enableDate, enableTime, min, max, label, disabled, weight, checks, hint, error, required, typeTag, onChange: onChangeProp, }) {
+    const writeValue = useWriteBack('value');
+    const [internal, setInternal] = useState(value ?? defaultValue ?? '');
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    function onChange(e) {
+        const next = e.currentTarget.value;
+        setInternal(next);
+        writeValue(next);
+        onChangeProp?.(next);
+    }
+    return (_jsxs("label", { className: "oo-field", style: weightStyle(weight), children: [_jsx(ControlLabel, { label: label, required: required, typeTag: typeTag }), _jsx(ControlHint, { text: hint }), _jsx("div", { className: "oo-control", children: _jsx("input", { className: "oo-input", type: deriveType({ mode, enableDate, enableTime }), value: internal, min: min, max: max, disabled: disabled, onChange: onChange }) }), _jsx(ControlError, { text: error }), _jsx(Checks, { checks: checks })] }));
+}

package/dist/ui/control/LocaleToggle.css

@@ -0,0 +1,38 @@
+.oo-locale-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.oo-locale-toggle__sep {
+  color: var(--oo-color-muted, #8a8f98);
+  opacity: 0.4;
+  user-select: none;
+}
+
+.oo-locale-toggle__item {
+  appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 2px 4px;
+  cursor: pointer;
+  font: inherit;
+  color: var(--oo-color-muted, #8a8f98);
+  border-radius: 4px;
+  transition: color 0.12s ease;
+}
+
+.oo-locale-toggle__item:hover {
+  color: var(--oo-color-text, #e6e8eb);
+  background: none;
+}
+
+.oo-locale-toggle__item--active {
+  /* color: var(--oo-color-text, #e6e8eb); */
+  font-weight: 600;
+  /* box-shadow: inset 0 -2px 0 var(--oo-color-accent, #4c7fff); */
+  color: var(--oo-color-accent, #4c7fff);
+}

package/dist/ui/control/LocaleToggle.d.ts

@@ -0,0 +1,11 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './LocaleToggle.css';
+export type LocaleToggleDisplay = 'text' | 'emoji' | 'both';
+export interface LocaleToggleProps {
+    display?: LocaleToggleDisplay;
+    locales?: string[];
+    separator?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function LocaleToggle({ display, locales, separator, className, style, }: LocaleToggleProps): ReactNode;

package/dist/ui/control/LocaleToggle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useI18n } from '../../react/hooks/useI18n.js';
+import './LocaleToggle.css';
+// A configurable language switcher. Reads the registered locales + active
+// locale from the i18n registry (useI18n); clicking sets the locale, which
+// re-renders every translated view. The active locale gets an accent.
+export function LocaleToggle({ display = 'text', locales, separator = '|', className, style, }) {
+    const { locale: current, locales: all, setLocale } = useI18n();
+    const items = locales
+        ? locales.map((l) => all.find((i) => i.locale === l)).filter(Boolean)
+        : all;
+    return (_jsx("div", { className: ['oo-locale-toggle', className].filter(Boolean).join(' '), style: style, role: "group", children: items.map((info, i) => (_jsxs(Fragment, { children: [i > 0 && separator != null ? (_jsx("span", { className: "oo-locale-toggle__sep", "aria-hidden": "true", children: separator })) : null, _jsx("button", { type: "button", className: 'oo-locale-toggle__item' +
+                        (info.locale === current ? ' oo-locale-toggle__item--active' : ''), "aria-pressed": info.locale === current, title: info.name ?? info.locale, onClick: () => setLocale(info.locale), children: labelFor(info, display) })] }, info.locale))) }));
+}
+function labelFor(info, display) {
+    const text = (info.language ?? info.locale).toUpperCase();
+    if (display === 'emoji')
+        return info.emoji ?? text;
+    if (display === 'both')
+        return info.emoji ? `${info.emoji} ${text}` : text;
+    return text;
+}

package/dist/ui/control/ReloadButton.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface ReloadButtonProps {
+    onClick: () => void | Promise<void>;
+    title?: string;
+}
+export declare function ReloadButton({ onClick, title }: ReloadButtonProps): ReactNode;

package/dist/ui/control/ReloadButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from './Button.js';
+import { useI18n } from '../../react/hooks/useI18n.js';
+// One consistent reload affordance for detail headers: an icon button with a
+// tooltip. Use everywhere instead of hand-rolling a per-resource button.
+export function ReloadButton({ onClick, title }) {
+    const { t } = useI18n();
+    return _jsx(Button, { title: title ?? t('common/reload', 'Reload'), label: "\u27F3", variant: "ghost", onClick: onClick });
+}

package/dist/ui/control/Slider.css

@@ -0,0 +1,2 @@
+.oo-slider { width: 100%; }
+.oo-slider__value { margin-left: var(--oo-spacing-sm); }

package/dist/ui/control/Slider.d.ts

@@ -0,0 +1,21 @@
+import { type CheckRuleResolved } from './Checks.js';
+import './Slider.css';
+export interface SliderProps {
+    value?: number;
+    max?: number;
+    label?: string;
+    min?: number;
+    step?: number;
+    weight?: number;
+    defaultValue?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    checks?: CheckRuleResolved[];
+    style?: React.CSSProperties;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    typeTag?: string;
+    onChange?: (next: number) => void;
+}
+export declare function Slider({ value, defaultValue, min, max, step, label, disabled, showValue, weight, checks, style, hint, error, required, typeTag, onChange: onChangeProp, }: SliderProps): import("react").JSX.Element;

package/dist/ui/control/Slider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { weightStyle } from '../_utils.js';
+import { Checks } from './Checks.js';
+import { ControlLabel, ControlHint, ControlError } from './_field-parts.js';
+import './Slider.css';
+export function Slider({ value, defaultValue, min = 0, max = 100, step = 1, label, disabled, showValue = true, weight, checks, style, hint, error, required, typeTag, onChange: onChangeProp, }) {
+    const writeValue = useWriteBack('value');
+    const [internal, setInternal] = useState(value ?? defaultValue ?? min);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    function onChange(e) {
+        const next = Number(e.currentTarget.value);
+        setInternal(next);
+        writeValue(next);
+        onChangeProp?.(next);
+    }
+    // function stepFromSegments(min: number, max: number, segments: number): number {
+    //   const delta = max - min;
+    //   if (!Number.isFinite(delta) || delta <= 0) return 1;
+    //   if (!Number.isFinite(segments) || segments <= 0) return 1;
+    //   return delta / segments;
+    // }
+    const rawMin = Number(min);
+    const rawMax = Number(max);
+    const defmin = Number.isFinite(rawMin) ? rawMin : 0;
+    const defmax = Number.isFinite(rawMax) ? Math.max(defmin + 1, rawMax) : defmin + 100;
+    const defStep = typeof step === 'number' && Number.isFinite(step) && step > 0
+        ? step
+        : 1;
+    const htmlStep = Math.min(defStep, Math.min(defmax - defmin, 1));
+    return (_jsxs("label", { className: "oo-field", style: weightStyle(weight), children: [_jsx(ControlLabel, { label: label, required: required, typeTag: typeTag, extra: showValue ? _jsx("span", { className: "oo-slider__value", children: internal }) : null }), _jsx(ControlHint, { text: hint }), _jsx("div", { className: "oo-control", children: _jsx("input", { className: "oo-slider", type: "range", value: internal, min: min, max: max, step: htmlStep, disabled: disabled, onChange: onChange, style: style }) }), _jsx(ControlError, { text: error }), _jsx(Checks, { checks: checks })] }));
+}

package/dist/ui/control/TextField.d.ts

@@ -0,0 +1,25 @@
+import { type CheckRuleResolved } from './Checks.js';
+import './TextField.css';
+export type InputType = React.HTMLInputTypeAttribute;
+export interface TextFieldProps {
+    id?: string;
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    weight?: number;
+    defaultValue?: string;
+    type?: InputType;
+    disabled?: boolean;
+    readOnly?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    min?: number;
+    max?: number;
+    checks?: CheckRuleResolved[];
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    typeTag?: string;
+    onChange?: (next: string) => void;
+}
+export declare function TextField({ value, defaultValue, placeholder, label, type, disabled, readOnly, multiline, rows, min, max, checks, weight, hint, error, required, typeTag, onChange: onChangeProp, }: TextFieldProps): import("react").JSX.Element;