@softov/scena 0.1.2

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

@@ -0,0 +1,11 @@
+export { List } from './List.js';
+export { DataTable } from './DataTable.js';
+export type { DataTableProps, DataColumn, DataRow } from './DataTable.js';
+export { Tree } from './Tree.js';
+export type { TreeProps, TreeNode } from './Tree.js';
+export { Listable } from './Listable.js';
+export type { ListableProps, ListableColumn, ListableCellProps, ListableTitleProps, ListableSort, ListableRenderContext, } from './Listable.js';
+export { Pagination } from './Pagination.js';
+export type { PaginationProps } from './Pagination.js';
+export { Filter } from './Filter.js';
+export type { FilterProps, FilterField } from './Filter.js';

package/dist/ui/data/index.js

@@ -0,0 +1,7 @@
+// Direct-React re-exports. Catalog registration lives in ../catalog.ts.
+export { List } from './List.js';
+export { DataTable } from './DataTable.js';
+export { Tree } from './Tree.js';
+export { Listable } from './Listable.js';
+export { Pagination } from './Pagination.js';
+export { Filter } from './Filter.js';

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface AddPlaceholderProps {
+    label: string;
+    onClick: () => void;
+}
+export declare function AddPlaceholder({ label, onClick }: AddPlaceholderProps): ReactNode;

package/dist/ui/display/AddPlaceholder.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A subtle full-width "add" affordance rendered AFTER an explorer list (mirrors
+// web's AddPlaceholder). The primary New action lives in the section header;
+// this is the convenient end-of-list shortcut.
+export function AddPlaceholder({ label, onClick }) {
+    return (_jsxs("button", { type: "button", className: "oo-add-placeholder", onClick: onClick, style: style, children: [_jsx("span", { "aria-hidden": true, children: "\uFF0B" }), " ", label] }));
+}
+const style = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    width: '100%',
+    boxSizing: 'border-box',
+    padding: '8px 12px',
+    margin: 0,
+    background: 'transparent',
+    border: '1px dashed var(--oo-color-border, #2b2f37)',
+    borderRadius: 6,
+    color: 'var(--oo-color-muted, #8a8f98)',
+    cursor: 'pointer',
+    font: 'inherit',
+    fontSize: 'var(--oo-font-size-xs, 12px)',
+    textAlign: 'left',
+};

package/dist/ui/display/Alert.css

@@ -0,0 +1,42 @@
+.oo-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--oo-spacing-sm);
+  padding: var(--oo-spacing-md);
+  border-radius: var(--oo-radius-md, 8px);
+  font-size: var(--oo-font-size-sm);
+  line-height: 1.5;
+  background: rgb(var(--oo-color, var(--oo-color-blue)) / 0.1);
+  color: rgb(var(--oo-color, var(--oo-color-blue)));
+  border: 1px solid rgb(var(--oo-color, var(--oo-color-blue)) / 0.25);
+}
+.oo-alert[data-tone='info']    { --oo-color: var(--oo-color-blue); }
+.oo-alert[data-tone='success'] { --oo-color: var(--oo-color-green); }
+.oo-alert[data-tone='warning'] { --oo-color: var(--oo-color-amber); }
+.oo-alert[data-tone='danger']  { --oo-color: var(--oo-color-red); }
+.oo-alert__icon {
+  flex: 0 0 auto;
+  margin-top: 2px;
+}
+.oo-alert__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: var(--oo-color-fg);
+}
+.oo-alert__title {
+  color: rgb(var(--oo-color));
+}
+.oo-alert__close {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0 4px;
+  line-height: 1;
+  opacity: 0.7;
+}
+.oo-alert__close:hover { opacity: 1; }

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

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Alert.css';
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps {
+    tone?: AlertTone;
+    title?: string;
+    children?: ReactNode;
+    message?: ReactNode;
+    icon?: string;
+    onClose?: () => void;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Alert({ tone, title, children, message, icon, onClose, style, className, }: AlertProps): import("react").JSX.Element;

package/dist/ui/display/Alert.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Alert.css';
+import { NAMED_GLYPH } from './Icon.js';
+const TONE_ICON = {
+    info: 'ℹ',
+    success: '✓',
+    warning: '⚠',
+    danger: '✕',
+};
+export function Alert({ tone = 'info', title, children, message, icon, onClose, style, className, }) {
+    const body = children ?? message;
+    return (_jsxs("div", { className: ['oo-alert', className].filter(Boolean).join(' '), "data-tone": tone, role: "status", style: style, children: [_jsx("span", { className: "oo-alert__icon", "aria-hidden": true, children: icon ?? TONE_ICON[tone] }), _jsxs("div", { className: "oo-alert__body", children: [title ? _jsx("strong", { className: "oo-alert__title", children: title }) : null, body ? _jsx("span", { className: "oo-alert__message", children: body }) : null] }), onClose ? (_jsx("button", { type: "button", className: "oo-alert__close", onClick: onClose, "aria-label": "Dismiss", children: NAMED_GLYPH.closePanel })) : null] }));
+}

package/dist/ui/display/Avatar.css

@@ -0,0 +1,19 @@
+.oo-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+  color: #fff;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.oo-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import { type IconName } from './Icon.js';
+import './Avatar.css';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps {
+    name?: string;
+    icon?: IconName | string | {
+        path: string;
+    };
+    imgSrc?: string;
+    size?: AvatarSize | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Avatar({ name, icon, imgSrc, size, color, className, style, }: AvatarProps): import("react").JSX.Element;

package/dist/ui/display/Avatar.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from './Icon.js';
+import './Avatar.css';
+// Palette tuned for both light and dark themes — enough chroma to be
+// distinct, enough lightness to read white text on top.
+const PALETTE = [
+    '#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b',
+    '#10b981', '#06b6d4', '#f97316', '#84cc16',
+];
+const SIZE_PX = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+    xl: 56,
+};
+function hashColor(name) {
+    if (!name)
+        return PALETTE[0];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+function getInitials(name) {
+    if (!name)
+        return '??';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1)
+        return (parts[0]?.slice(0, 2) ?? '??').toUpperCase();
+    return ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')).toUpperCase();
+}
+export function Avatar({ name, icon, imgSrc, size = 'md', color, className, style, }) {
+    const px = typeof size === 'number' ? size : SIZE_PX[size];
+    const bg = color ?? (name ? hashColor(name) : PALETTE[0]);
+    const baseStyle = {
+        width: px,
+        height: px,
+        background: imgSrc ? undefined : bg,
+        ...style,
+    };
+    const classes = ['oo-avatar', className].filter(Boolean).join(' ');
+    if (imgSrc) {
+        return (_jsx("span", { className: classes, style: baseStyle, "aria-label": name, children: _jsx("img", { src: imgSrc, alt: name ?? '', className: "oo-avatar__img" }) }));
+    }
+    if (icon !== undefined) {
+        // Icon component sizes itself; pick ~60% of the circle so it sits
+        // comfortably inside without crowding the edges.
+        return (_jsx("span", { className: classes, style: baseStyle, "aria-label": name, children: _jsx(Icon, { name: icon, size: Math.round(px * 0.6), color: "#fff" }) }));
+    }
+    return (_jsx("span", { className: classes, style: { ...baseStyle, fontSize: Math.round(px * 0.4) }, "aria-label": name, children: getInitials(name ?? '') }));
+}

package/dist/ui/display/Badge.css

@@ -0,0 +1,26 @@
+.oo-badge {
+  --oo-badge-padding-y: 2px;
+  --oo-badge-padding-x: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--oo-badge-padding-y) var(--oo-badge-padding-x);
+  border-radius: 9999px;
+  font-size: var(--oo-font-size-xs);
+  font-weight: 500;
+  line-height: 1.4;
+  background: rgb(var(--oo-color, var(--oo-rgb-muted)) / 0.15);
+  color: rgb(var(--oo-color, var(--oo-rgb-muted)));
+  white-space: nowrap;
+}
+.oo-badge[data-variant='default'] {
+  --oo-color: var(--oo-rgb-muted);
+}
+.oo-badge[data-variant='success'] { --oo-color: var(--oo-rgb-green); }
+.oo-badge[data-variant='warning'] { --oo-color: var(--oo-rgb-amber); }
+.oo-badge[data-variant='danger']  { --oo-color: var(--oo-rgb-red); }
+.oo-badge[data-variant='info']    { --oo-color: var(--oo-rgb-blue); }
+.oo-badge[data-outline='true'] {
+  background: transparent;
+  border: 1px solid rgb(var(--oo-color, var(--oo-rgb-muted)) / 0.5);
+}

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

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type ResourceColor } from '../../types/colors.js';
+import './Badge.css';
+export type BadgeTone = 'default' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeProps {
+    children?: ReactNode;
+    label?: string | number;
+    text?: string | number;
+    tone?: BadgeTone;
+    variant?: BadgeTone;
+    color?: ResourceColor;
+    outline?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Badge({ children, text, label, tone, variant, color, outline, style, className, }: BadgeProps): import("react").JSX.Element;

package/dist/ui/display/Badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveColorVar } from '../../types/colors.js';
+import './Badge.css';
+export function Badge({ children, text, label, tone, variant, color, outline, style, className, }) {
+    const inline = color
+        ? { ['--oo-color']: resolveColorVar(color), ...style }
+        : (style ?? {});
+    return (_jsx("span", { className: ['oo-badge', className].filter(Boolean).join(' '), "data-tone": tone, "data-variant": tone ?? variant, "data-outline": outline ? 'true' : undefined, style: inline, children: label ?? text ?? children }));
+}

package/dist/ui/display/Card.css

@@ -0,0 +1,15 @@
+.oo-card {
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  padding: var(--oo-spacing-md);
+  background: var(--oo-card-bg);
+}
+.oo-card__title {
+  font-weight: 600;
+  margin-bottom: var(--oo-spacing-xs);
+}
+.oo-card__subtitle {
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+  margin-bottom: var(--oo-spacing-sm);
+}

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

@@ -0,0 +1,11 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Card.css';
+export interface CardProps {
+    child?: ReactNode;
+    weight?: number;
+    title?: string;
+    subtitle?: string;
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function Card({ title, subtitle, child, children, weight, style }: CardProps): import("react").JSX.Element;

package/dist/ui/display/Card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { weightStyle } from '../_utils.js';
+import './Card.css';
+export function Card({ title, subtitle, child, children, weight, style }) {
+    const body = child ?? children;
+    const inlineStyle = { ...weightStyle(weight), ...style };
+    return (_jsxs("div", { className: "oo-card", style: inlineStyle, children: [title ? _jsx("div", { className: "oo-card__title", children: title }) : null, subtitle ? _jsx("div", { className: "oo-card__subtitle", children: subtitle }) : null, body] }));
+}

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

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

package/dist/ui/display/DetailContainer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The outer wrapper for a resource detail page: full height, column flow,
+// scrollable. Pairs with DetailHeader + Tabs. Replaces the repeated inline
+// `<div style={{ height:'100%', display:'flex', flexDirection:'column', overflow:'auto' }}>`.
+export function DetailContainer({ children, style }) {
+    return (_jsx("div", { className: "oo-detail", style: { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'auto', ...style }, children: children }));
+}

package/dist/ui/display/DetailHeader.css

@@ -0,0 +1,53 @@
+.oo-detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--oo-spacing-md);
+  padding: var(--oo-spacing-md);
+}
+.oo-detail-header__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.oo-detail-header__titleline {
+  display: flex;
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+}
+.oo-detail-header__title {
+  font-size: var(--oo-font-size-lg);
+  font-weight: 600;
+  color: var(--oo-color-text);
+}
+.oo-detail-header__subtitle {
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-muted);
+}
+.oo-detail-header__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--oo-spacing-md);
+  margin-top: 4px;
+}
+.oo-detail-header__meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.oo-detail-header__meta-label {
+  font-size: var(--oo-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--oo-color-muted);
+}
+.oo-detail-header__meta-value {
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-text);
+}
+.oo-detail-header__actions {
+  display: flex;
+  gap: var(--oo-spacing-sm);
+  align-items: center;
+}

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

@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type BadgeTone } from './Badge.js';
+import './DetailHeader.css';
+export interface DetailHeaderMeta {
+    label: ReactNode;
+    value: ReactNode;
+}
+export interface DetailHeaderProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    avatarName?: string;
+    avatarSrc?: string;
+    avatarColor?: string;
+    status?: {
+        label: string;
+        tone?: BadgeTone;
+    };
+    meta?: DetailHeaderMeta[];
+    actions?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function DetailHeader({ title, subtitle, avatarName, avatarSrc, avatarColor, status, meta, actions, style, }: DetailHeaderProps): import("react").JSX.Element;

package/dist/ui/display/DetailHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from './Avatar.js';
+import { Badge } from './Badge.js';
+import './DetailHeader.css';
+export function DetailHeader({ title, subtitle, avatarName, avatarSrc, avatarColor, status, meta, actions, style, }) {
+    const showAvatar = Boolean(avatarName || avatarSrc);
+    return (_jsxs("header", { className: "oo-detail-header", style: style, children: [showAvatar ? (_jsx(Avatar, { name: avatarName, imgSrc: avatarSrc, color: avatarColor, size: 56 })) : null, _jsxs("div", { className: "oo-detail-header__body", children: [_jsxs("div", { className: "oo-detail-header__titleline", children: [_jsx("span", { className: "oo-detail-header__title", children: title }), status ? _jsx(Badge, { tone: status.tone, label: status.label }) : null] }), subtitle ? _jsx("div", { className: "oo-detail-header__subtitle", children: subtitle }) : null, meta && meta.length > 0 ? (_jsx("div", { className: "oo-detail-header__meta", children: meta.map((m, i) => (_jsxs("span", { className: "oo-detail-header__meta-item", children: [_jsx("span", { className: "oo-detail-header__meta-label", children: m.label }), _jsx("span", { className: "oo-detail-header__meta-value", children: m.value })] }, i))) })) : null] }), actions ? _jsx("div", { className: "oo-detail-header__actions", children: actions }) : null] }));
+}

package/dist/ui/display/DetailList.css

@@ -0,0 +1,26 @@
+.oo-detail-list {
+  display: grid;
+  gap: var(--oo-spacing-md);
+  margin: 0;
+}
+.oo-detail-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.oo-detail-list__item--span {
+  grid-column: 1 / -1;
+}
+.oo-detail-list__label {
+  font-size: var(--oo-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--oo-color-muted);
+}
+.oo-detail-list__value {
+  margin: 0;
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-text);
+  overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,13 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './DetailList.css';
+export interface DetailItem {
+    label: ReactNode;
+    value: ReactNode;
+    span?: boolean;
+}
+export interface DetailListProps {
+    items: DetailItem[];
+    columns?: number;
+    style?: CSSProperties;
+}
+export declare function DetailList({ items, columns, style }: DetailListProps): import("react").JSX.Element;

package/dist/ui/display/DetailList.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './DetailList.css';
+export function DetailList({ items, columns = 2, style }) {
+    return (_jsx("dl", { className: "oo-detail-list", style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style }, children: items.map((item, i) => (_jsxs("div", { className: `oo-detail-list__item${item.span ? ' oo-detail-list__item--span' : ''}`, children: [_jsx("dt", { className: "oo-detail-list__label", children: item.label }), _jsx("dd", { className: "oo-detail-list__value", children: item.value })] }, i))) }));
+}

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type ButtonProps } from '../control/Button.js';
+import type { ResourceColor } from '../../types/colors.js';
+export interface DetailNotFoundAction {
+    label: string;
+    onClick: () => void;
+    variant?: ButtonProps['variant'];
+}
+export interface DetailNotFoundProps {
+    title: string;
+    icon?: ReactNode;
+    color?: ResourceColor;
+    actions?: DetailNotFoundAction[];
+    onRetry?: () => void;
+    onClose?: () => void;
+}
+export declare function DetailNotFound({ title, icon, color, actions, onRetry, onClose }: DetailNotFoundProps): ReactNode;

package/dist/ui/display/DetailNotFound.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { translate } from '../../i18n/registry.js';
+import { Button } from '../control/Button.js';
+// Centered empty/error state for a detail surface: a colored icon, a title, and
+// optional action buttons. Replaces the ad-hoc `<div>… not found</div>` each
+// resource Detail used. Close/Retry labels use the shared `common/*` messages.
+export function DetailNotFound({ title, icon, color, actions, onRetry, onClose }) {
+    const buttons = [
+        ...(actions ?? []),
+        ...(onRetry ? [{ label: translate('common/retry', 'Retry'), onClick: onRetry, variant: 'primary' }] : []),
+        ...(onClose ? [{ label: translate('common/close', 'Close'), onClick: onClose, variant: 'default' }] : []),
+    ];
+    return (_jsxs("div", { style: wrap, children: [icon ? (_jsx("div", { className: "oo-detail-notfound__icon", "data-color": color, style: iconCircle, children: icon })) : null, _jsx("div", { style: titleStyle, children: title }), buttons.length ? (_jsx("div", { style: { display: 'flex', gap: 8 }, children: buttons.map((a, i) => (_jsx(Button, { label: a.label, variant: a.variant ?? 'default', onClick: a.onClick }, i))) })) : null] }));
+}
+const wrap = {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 'var(--oo-spacing-md, 12px)',
+    padding: 'var(--oo-spacing-lg, 24px)',
+    textAlign: 'center',
+};
+const iconCircle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 48,
+    height: 48,
+    borderRadius: '50%',
+    fontSize: 24,
+    background: 'var(--oo-color-surface, #1e2128)',
+    border: '1px solid var(--oo-color-border, #2b2f37)',
+};
+const titleStyle = {
+    fontSize: 'var(--oo-font-size-md, 15px)',
+    color: 'var(--oo-color-text, #e6e8eb)',
+};

package/dist/ui/display/Divider.css

@@ -0,0 +1,6 @@
+.oo-divider {
+  background: var(--oo-color-border);
+  flex: 0 0 auto;
+}
+.oo-divider--horizontal { width: 100%; height: 1px; }
+.oo-divider--vertical   { width: 1px;  height: 100%; }

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

@@ -0,0 +1,8 @@
+import './Divider.css';
+export interface DividerProps {
+    axis?: 'horizontal' | 'vertical';
+    weight?: number;
+    thickness?: number;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare function Divider({ axis, orientation, weight, thickness }: DividerProps): import("react").JSX.Element;

package/dist/ui/display/Divider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { appearance } from '../../styles/index.js';
+import { weightStyle } from '../_utils.js';
+import './Divider.css';
+export function Divider({ axis, orientation, weight, thickness }) {
+    const effectiveAxis = axis ?? orientation ?? 'horizontal';
+    const sizeStyle = thickness !== undefined
+        ? effectiveAxis === 'horizontal'
+            ? { height: thickness }
+            : { width: thickness }
+        : undefined;
+    const flexStyle = weightStyle(weight);
+    const hasFlex = Object.keys(flexStyle).length > 0;
+    const style = sizeStyle || hasFlex ? { ...sizeStyle, ...flexStyle } : undefined;
+    return (_jsx("div", { role: "separator", className: appearance('oo-divider', { variant: effectiveAxis }), style: style }));
+}

package/dist/ui/display/Divisor.css

@@ -0,0 +1,30 @@
+.oo-divisor {
+  flex: 0 0 auto;
+  background: var(--oo-color-border);
+  user-select: none;
+  touch-action: none;
+
+  height: 100%;
+  transition: background 0.15s;
+  position: relative;
+
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  touch-action: none;
+
+}
+
+.oo-divisor:hover {
+  background: var(--oo-color-accent);
+}
+
+.oo-divisor__row {
+  width: 1px;
+  cursor: ew-resize;
+}
+
+.oo-divisor__col {
+  height: 1px;
+  cursor: ns-resize;
+}

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

@@ -0,0 +1,11 @@
+import './Divisor.css';
+export interface DivisorProps {
+    id?: string | number;
+    direction: 'row' | 'col';
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    onCommit: (ratio: number, id?: string | number) => void;
+}
+export declare function Divisor({ id, direction, containerRef, min, max, disabled, onCommit, }: DivisorProps): import("react").JSX.Element;

package/dist/ui/display/Divisor.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import './Divisor.css';
+export function Divisor({ id, direction, containerRef, min = 0.01, max = 0.99, disabled = false, onCommit, }) {
+    const draggingRef = useRef(false);
+    const rafRef = useRef(null);
+    const pendingRef = useRef(null);
+    function flush() {
+        if (pendingRef.current !== null) {
+            onCommit(pendingRef.current, id);
+            pendingRef.current = null;
+        }
+        rafRef.current = null;
+    }
+    function onPointerDown(e) {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        draggingRef.current = true;
+    }
+    function onPointerMove(e) {
+        if (!draggingRef.current || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const ratio = direction === 'row'
+            ? (e.clientX - rect.left) / Math.max(1, rect.width)
+            : (e.clientY - rect.top) / Math.max(1, rect.height);
+        pendingRef.current = clamp(ratio, min, max);
+        if (rafRef.current === null)
+            rafRef.current = requestAnimationFrame(flush);
+    }
+    function onPointerUp(e) {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            flush();
+        }
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        draggingRef.current = false;
+    }
+    return (_jsx("div", { className: `oo-divisor oo-divisor__${direction}`, "data-divisor-id": id, "aria-disabled": disabled || undefined, "aria-direction": direction, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": pendingRef.current ?? undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onMouseDown: (e) => e.preventDefault() }));
+}
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}