@softov/scena 0.1.2 → 0.1.3

package/dist/ui/_utils.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { Label } from '../types/label.js';
+import type { Label } from '../sdk/label.js';
 export declare function labelText(label?: Label): string;
 export type StyleJustify = 'start' | 'center' | 'end' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly' | 'stretch' | 'space-around' | 'space-between';
 export type StyleAlign = 'start' | 'center' | 'end' | 'stretch';

package/dist/ui/_utils.js

@@ -1,5 +1,5 @@
-import { resolveLabel } from '../core/label.js';
-import { translate } from '../i18n/registry.js';
+import { resolveLabel } from '../sdk/label.js';
+import { translate } from '../core/i18n/registry.js';
 // Resolve a Label (string | { t }) to a plain string for non-reactive contexts.
 // `{ path }` titles are resolved reactively by the layout headers via
 // MountTitle / useMountTitle (which descend + subscribe against the mount's

package/dist/ui/campus/CampusMappa.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from 'react';
 import { useCampus } from './context.js';
-import { resolveColorAlpha } from '../../types/colors.js';
+import { resolveColorAlpha } from '../../sdk/colors.js';
 const DEFAULT_W = 160;
 const DEFAULT_H = 110;
 const DEFAULT_PADDING = 12;

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

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

package/dist/ui/control/ButtonBar.css

@@ -0,0 +1,61 @@
+.oo-button-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--oo-spacing-xs);
+  height: var(--oo-button-bar-height, 22px);
+  padding: 0 var(--oo-spacing-sm);
+  border: none;
+  border-radius: var(--oo-radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--oo-font-size-xs);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.oo-button-bar[data-interactive='true'] { cursor: pointer; }
+.oo-button-bar[data-interactive='true']:hover { background: var(--oo-color-hover); }
+.oo-button-bar[data-interactive='true']:active { background: var(--oo-color-active); }
+
+.oo-button-bar:focus-visible {
+  outline: 1px solid var(--oo-color-accent);
+  outline-offset: -1px;
+}
+
+.oo-button-bar[disabled] { opacity: 0.5; cursor: default; }
+.oo-button-bar[data-active='true'] {
+  background: var(--oo-color-active);
+  color: var(--oo-color-accent);
+}
+
+.oo-button-bar[data-tone='accent']  { color: var(--oo-color-accent); }
+.oo-button-bar[data-tone='danger']  { color: var(--oo-color-danger); }
+.oo-button-bar[data-tone='warning'] { color: var(--oo-color-warning); }
+.oo-button-bar[data-tone='success'] { color: var(--oo-color-success); }
+.oo-button-bar[data-tone='muted']   { color: var(--oo-color-muted); }
+
+.oo-button-bar__value { font-weight: 600; }
+
+/* In a bar, quieter and smaller -- keyed on the ROLE the shell stamped, not on
+ * a surface name, so an app's own `alert:top` gets the same treatment without
+ * scena having heard of it.
+ *
+ * It deliberately does NOT distinguish the title bar from the status bar. That
+ * difference is real in most editors, but it is an app's opinion about its own
+ * two bars, and an app can express it in one rule keyed on `data-surface`,
+ * which it is free to do because it knows its own surface names. scena styling
+ * the kind, apps styling the identity, is the line.
+ *
+ * The attribute plus the class beats `.oo-bar__slot button` in bar.css (one
+ * class + one type) rather than tying on specificity and losing to source
+ * order. */
+[data-surface-role='bar'] .oo-button-bar {
+  height: var(--oo-button-bar-height-sm, 20px);
+  color: var(--oo-color-muted);
+}
+
+[data-surface-role='bar'] .oo-button-bar[data-interactive='true']:hover {
+  color: var(--oo-color-text);
+}

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

@@ -0,0 +1,36 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { BindingPath } from '../../sdk/component-graph.js';
+import './ButtonBar.css';
+export type ButtonBarTone = 'default' | 'accent' | 'danger' | 'warning' | 'success' | 'muted';
+export interface ButtonBarProps {
+    icon?: string;
+    label?: string;
+    value?: string | number;
+    valuePath?: BindingPath;
+    command?: string;
+    args?: Record<string, unknown>;
+    onClick?: () => void;
+    tone?: ButtonBarTone;
+    active?: boolean;
+    disabled?: boolean;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The button that goes in a bar.
+ *
+ * One component for the title bar and the status bar rather than two, because
+ * the difference between them is entirely presentational — the status bar is
+ * smaller and quieter — and that difference is carried by the surrounding
+ * `.oo-bar` context in CSS, not by a prop. A caller that wants the status-bar
+ * treatment puts it in the status bar.
+ *
+ * Both apps grew a near-identical `CommandButton` for this; the useful part is
+ * the parts they each got slightly wrong. It renders nothing when there is
+ * nothing to show, it does not swallow a click while a command is missing, and
+ * `title` falls back to the label so an icon-only button is never unlabelled
+ * for a screen reader.
+ */
+export declare function ButtonBar({ icon, label, value, valuePath, command, args, onClick, tone, active, disabled, title, className, style, }: ButtonBarProps): ReactNode;
+export default ButtonBar;

package/dist/ui/control/ButtonBar.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { useStore } from '../../react/hooks/useStore.js';
+import './ButtonBar.css';
+/**
+ * The button that goes in a bar.
+ *
+ * One component for the title bar and the status bar rather than two, because
+ * the difference between them is entirely presentational — the status bar is
+ * smaller and quieter — and that difference is carried by the surrounding
+ * `.oo-bar` context in CSS, not by a prop. A caller that wants the status-bar
+ * treatment puts it in the status bar.
+ *
+ * Both apps grew a near-identical `CommandButton` for this; the useful part is
+ * the parts they each got slightly wrong. It renders nothing when there is
+ * nothing to show, it does not swallow a click while a command is missing, and
+ * `title` falls back to the label so an icon-only button is never unlabelled
+ * for a screen reader.
+ */
+export function ButtonBar({ icon, label, value, valuePath, command, args, onClick, tone = 'default', active, disabled, title, className, style, }) {
+    const scena = useScena();
+    const bound = useStore(valuePath);
+    const shown = valuePath ? bound : value;
+    // Nothing to render is not an error, but an empty button is a dead 24px of
+    // bar that still takes a click.
+    if (icon === undefined && label === undefined && shown === undefined)
+        return null;
+    const accessible = title ?? label ?? command;
+    function handleClick() {
+        if (disabled)
+            return;
+        if (onClick) {
+            onClick();
+            return;
+        }
+        if (command)
+            void scena.commands.execute(command, args);
+    }
+    const interactive = !disabled && (onClick !== undefined || command !== undefined);
+    return (_jsxs("button", { type: "button", className: ['oo-button-bar', className].filter(Boolean).join(' '), style: style, "data-tone": tone, "data-active": active ?? undefined, "data-interactive": interactive, disabled: disabled, title: accessible, "aria-label": accessible, "aria-pressed": active, onClick: handleClick, children: [icon !== undefined ? (_jsx("span", { className: "oo-button-bar__icon", "aria-hidden": "true", children: icon })) : null, label !== undefined ? _jsx("span", { className: "oo-button-bar__label", children: label }) : null, shown !== undefined ? _jsx("span", { className: "oo-button-bar__value", children: shown }) : null] }));
+}
+export default ButtonBar;

package/dist/ui/control/ThemeModeToggle.css

@@ -0,0 +1,22 @@
+.oo-theme-mode-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--oo-spacing-xs);
+  height: 22px;
+  padding: 0 var(--oo-spacing-sm);
+  border: none;
+  border-radius: var(--oo-radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--oo-font-size-xs);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.oo-theme-mode-toggle:hover { background: var(--oo-color-hover); }
+.oo-theme-mode-toggle:focus-visible {
+  outline: 1px solid var(--oo-color-accent);
+  outline-offset: -1px;
+}
+.oo-theme-mode-toggle[data-mode='system'] { color: var(--oo-color-muted); }

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

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type ThemeModeChoice } from '../../styles/controller.js';
+import './ThemeModeToggle.css';
+export interface ThemeModeToggleProps {
+    modes?: ThemeModeChoice[];
+    display?: 'icon' | 'text' | 'both';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Cycles the theme mode. A view over `$/ui/theme/mode` — it writes the store
+ * and nothing else, so `registerThemeController` stays the only thing that
+ * touches the DOM or localStorage, and any other control over the same path
+ * (a settings select, say) stays in agreement with it for free.
+ *
+ * Requires `registerThemeController`; without it the path is never applied and
+ * clicking appears to do nothing.
+ */
+export declare function ThemeModeToggle({ modes, display, className, style, }: ThemeModeToggleProps): ReactNode;
+export default ThemeModeToggle;

package/dist/ui/control/ThemeModeToggle.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore, useStoreSetter } from '../../react/hooks/useStore.js';
+import { THEME_MODE_PATH } from '../../styles/controller.js';
+import './ThemeModeToggle.css';
+const ORDER = ['light', 'dark', 'system'];
+const ICON = {
+    light: '☀︎',
+    dark: '☾︎',
+    system: '◐︎',
+};
+const TITLE = {
+    light: 'Light',
+    dark: 'Dark',
+    system: 'Follow system',
+};
+/**
+ * Cycles the theme mode. A view over `$/ui/theme/mode` — it writes the store
+ * and nothing else, so `registerThemeController` stays the only thing that
+ * touches the DOM or localStorage, and any other control over the same path
+ * (a settings select, say) stays in agreement with it for free.
+ *
+ * Requires `registerThemeController`; without it the path is never applied and
+ * clicking appears to do nothing.
+ */
+export function ThemeModeToggle({ modes = ORDER, display = 'icon', className, style, }) {
+    const mode = useStore(THEME_MODE_PATH) ?? 'system';
+    const setStore = useStoreSetter();
+    const index = modes.indexOf(mode);
+    // An unlisted current mode would make indexOf return -1 and the first click
+    // land on modes[0] — which is the right recovery, so it is left alone.
+    const next = modes[(index + 1) % modes.length] ?? modes[0];
+    return (_jsxs("button", { type: "button", className: ['oo-theme-mode-toggle', className].filter(Boolean).join(' '), style: style, "data-mode": mode, title: `${TITLE[mode]} — click for ${TITLE[next].toLowerCase()}`, "aria-label": `Theme mode: ${TITLE[mode]}`, onClick: () => setStore(THEME_MODE_PATH, next), children: [display !== 'text' ? _jsx("span", { "aria-hidden": "true", children: ICON[mode] }) : null, display !== 'icon' ? _jsx("span", { children: TITLE[mode] }) : null] }));
+}
+export default ThemeModeToggle;

package/dist/ui/control/ThemePicker.css

@@ -0,0 +1,24 @@
+.oo-theme-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--oo-spacing-xs);
+  font-size: var(--oo-font-size-xs);
+}
+
+.oo-theme-picker__label { color: var(--oo-color-muted); }
+
+.oo-theme-picker__select {
+  height: 22px;
+  padding: 0 var(--oo-spacing-xs);
+  border: 1px solid var(--oo-input-border);
+  border-radius: var(--oo-radius-sm);
+  background: var(--oo-input-bg);
+  color: var(--oo-input-fg);
+  font: inherit;
+  font-size: var(--oo-font-size-xs);
+}
+
+.oo-theme-picker__select:focus-visible {
+  outline: 1px solid var(--oo-color-accent);
+  outline-offset: -1px;
+}

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

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './ThemePicker.css';
+export interface ThemePickerProps {
+    themes?: string[];
+    label?: string;
+    compact?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Picks the theme family. A view over `$/ui/theme/id`, same contract as
+ * `ThemeModeToggle`: it writes the store and `registerThemeController` does
+ * the applying.
+ *
+ * The options come from the theme registry rather than from a prop, so a theme
+ * registered later — by an extension, or lazily — appears here without this
+ * component knowing anything about it. That is also why it reads the registry
+ * on render instead of caching: `registerTheme` has no change event, and the
+ * list is short enough that it does not matter.
+ *
+ * Renders nothing below two choices. One theme is not a choice, and a select
+ * with a single option is a control that cannot do anything — an app that ships
+ * only the built-in theme can mount this unconditionally and it stays out of
+ * the way until a second theme is registered.
+ */
+export declare function ThemePicker({ themes, label, compact, className, style, }: ThemePickerProps): ReactNode;
+export default ThemePicker;

package/dist/ui/control/ThemePicker.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore, useStoreSetter } from '../../react/hooks/useStore.js';
+import { listThemes } from '../../styles/index.js';
+import { THEME_ID_PATH } from '../../styles/controller.js';
+import './ThemePicker.css';
+/**
+ * Picks the theme family. A view over `$/ui/theme/id`, same contract as
+ * `ThemeModeToggle`: it writes the store and `registerThemeController` does
+ * the applying.
+ *
+ * The options come from the theme registry rather than from a prop, so a theme
+ * registered later — by an extension, or lazily — appears here without this
+ * component knowing anything about it. That is also why it reads the registry
+ * on render instead of caching: `registerTheme` has no change event, and the
+ * list is short enough that it does not matter.
+ *
+ * Renders nothing below two choices. One theme is not a choice, and a select
+ * with a single option is a control that cannot do anything — an app that ships
+ * only the built-in theme can mount this unconditionally and it stays out of
+ * the way until a second theme is registered.
+ */
+export function ThemePicker({ themes, label = 'Theme', compact = false, className, style, }) {
+    const current = useStore(THEME_ID_PATH) ?? 'default';
+    const setStore = useStoreSetter();
+    const all = listThemes();
+    const items = themes
+        ? themes.map((id) => all.find((t) => t.id === id)).filter((t) => t !== undefined)
+        : all;
+    if (items.length < 2)
+        return null;
+    return (_jsxs("label", { className: ['oo-theme-picker', className].filter(Boolean).join(' '), style: style, title: label, children: [compact ? null : _jsx("span", { className: "oo-theme-picker__label", children: label }), _jsx("select", { className: "oo-theme-picker__select", value: current, "aria-label": label, onChange: (e) => setStore(THEME_ID_PATH, e.currentTarget.value), children: items.map((theme) => (_jsx("option", { value: theme.id, children: theme.label }, theme.id))) })] }));
+}
+export default ThemePicker;

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

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

package/dist/ui/control/catalog.js

@@ -1,10 +1,14 @@
+import { Button } from './Button.js';
 // Catalog registration for control components (dynamic import — no eager load).
 export const CATALOG_CONTROLS_MAP = [
-    { component: 'Button', category: 'inline', renderer: { kind: 'react', load: () => import('./Button.js').then((m) => ({ default: m.Button })) } },
+    { component: 'Button', category: 'inline', renderer: { kind: 'react', load: async () => ({ default: Button }) } },
     { component: 'TextField', category: 'inline', renderer: { kind: 'react', load: () => import('./TextField.js').then((m) => ({ default: m.TextField })) } },
     { component: 'CheckBox', category: 'inline', renderer: { kind: 'react', load: () => import('./CheckBox.js').then((m) => ({ default: m.CheckBox })) } },
     { component: 'ChoicePicker', category: 'inline', renderer: { kind: 'react', load: () => import('./ChoicePicker.js').then((m) => ({ default: m.ChoicePicker })) } },
     { component: 'Slider', category: 'inline', renderer: { kind: 'react', load: () => import('./Slider.js').then((m) => ({ default: m.Slider })) } },
     { component: 'DateTimeInput', category: 'inline', renderer: { kind: 'react', load: () => import('./DateTimeInput.js').then((m) => ({ default: m.DateTimeInput })) } },
     { component: 'LocaleToggle', category: 'inline', renderer: { kind: 'react', load: () => import('./LocaleToggle.js').then((m) => ({ default: m.LocaleToggle })) } },
+    { component: 'ButtonBar', category: 'inline', renderer: { kind: 'react', load: () => import('./ButtonBar.js').then((m) => ({ default: m.ButtonBar })) } },
+    { component: 'ThemePicker', category: 'inline', renderer: { kind: 'react', load: () => import('./ThemePicker.js').then((m) => ({ default: m.ThemePicker })) } },
+    { component: 'ThemeModeToggle', category: 'inline', renderer: { kind: 'react', load: () => import('./ThemeModeToggle.js').then((m) => ({ default: m.ThemeModeToggle })) } },
 ];

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

@@ -11,3 +11,9 @@ export { Checks } from './Checks.js';
 export type { CheckRuleResolved, ChecksProps } from './Checks.js';
 export { LocaleToggle } from './LocaleToggle.js';
 export type { LocaleToggleProps, LocaleToggleDisplay } from './LocaleToggle.js';
+export { ButtonBar } from './ButtonBar.js';
+export type { ButtonBarProps, ButtonBarTone } from './ButtonBar.js';
+export { ThemePicker } from './ThemePicker.js';
+export type { ThemePickerProps } from './ThemePicker.js';
+export { ThemeModeToggle } from './ThemeModeToggle.js';
+export type { ThemeModeToggleProps } from './ThemeModeToggle.js';

package/dist/ui/control/index.js

@@ -9,3 +9,6 @@ export { Slider } from './Slider.js';
 export { DateTimeInput } from './DateTimeInput.js';
 export { Checks } from './Checks.js';
 export { LocaleToggle } from './LocaleToggle.js';
+export { ButtonBar } from './ButtonBar.js';
+export { ThemePicker } from './ThemePicker.js';
+export { ThemeModeToggle } from './ThemeModeToggle.js';

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { WhereOp } from '../../types/query.js';
+import type { WhereOp } from '../../sdk/query.js';
 export interface FilterField {
     field: string;
     label?: string;

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

@@ -1,5 +1,5 @@
 import { type CSSProperties, type DragEvent as ReactDragEvent, type ReactNode } from 'react';
-import type { BindingPath } from '../../types/component-graph.js';
+import type { BindingPath } from '../../sdk/component-graph.js';
 import './Listable.css';
 export interface ListableRenderContext {
     tableMode: boolean;
@@ -48,6 +48,7 @@ export interface ListableProps<T> {
     onSortChange?: (next: ListableSort | null) => void;
     tableBreakpoint?: number;
     renderListRow?: (item: T) => ReactNode;
+    getRowStyle?: (item: T, renderCtx: ListableRenderContext) => CSSProperties | undefined;
     contextMenuSlot?: string;
     contextFor?: (item: T) => Record<string, unknown>;
     contextDataContext?: BindingPath;
@@ -57,4 +58,4 @@ export interface ListableProps<T> {
     style?: CSSProperties;
     manageKeys?: boolean;
 }
-export declare function Listable<T>({ items, columns, getKey, title, toolbar, selectedKey, onSelect, onActivate, initialSort, sort, onSortChange, tableBreakpoint, renderListRow, contextMenuSlot, contextFor, contextDataContext, onRowDragStart, emptyState, className, style, manageKeys, }: ListableProps<T>): ReactNode;
+export declare function Listable<T>({ items, columns, getKey, title, toolbar, selectedKey, onSelect, onActivate, initialSort, sort, onSortChange, tableBreakpoint, renderListRow, getRowStyle, contextMenuSlot, contextFor, contextDataContext, onRowDragStart, emptyState, className, style, manageKeys, }: ListableProps<T>): ReactNode;

package/dist/ui/data/Listable.js

@@ -33,7 +33,7 @@ function sortItems(items, columns, sort) {
     return [...items].sort((a, b) => sign * cmp(a, b));
 }
 const DEFAULT_TABLE_BREAKPOINT = 480;
-export function Listable({ items, columns, getKey, title, toolbar, selectedKey, onSelect, onActivate, initialSort, sort, onSortChange, tableBreakpoint = DEFAULT_TABLE_BREAKPOINT, renderListRow, contextMenuSlot, contextFor, contextDataContext, onRowDragStart, emptyState, className, style, manageKeys = false, }) {
+export function Listable({ items, columns, getKey, title, toolbar, selectedKey, onSelect, onActivate, initialSort, sort, onSortChange, tableBreakpoint = DEFAULT_TABLE_BREAKPOINT, renderListRow, getRowStyle, contextMenuSlot, contextFor, contextDataContext, onRowDragStart, emptyState, className, style, manageKeys = false, }) {
     const rootRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
     const [internalSort, setInternalSort] = useState(initialSort ?? null);
@@ -175,8 +175,10 @@ export function Listable({ items, columns, getKey, title, toolbar, selectedKey,
     function renderStackedRow(item) {
         const key = getKey(item);
         const selected = key === selectedKey;
+        const styleRow = getRowStyle ? getRowStyle(item, renderCtx) : undefined;
         return (_jsx("div", { role: "row", "data-key": key, "data-selected": selected ? 'true' : undefined, className: "oo-listable__item oo-listable__stack", draggable: onRowDragStart ? true : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(e, item) : undefined, onClick: () => onSelect?.(item), onDoubleClick: () => onActivate?.(item), onContextMenu: (e) => openContextMenu(e, item), style: {
-                cursor: onSelect ? 'pointer' : undefined
+                cursor: onSelect ? 'pointer' : undefined,
+                ...styleRow,
             }, children: renderListRow
                 ? renderListRow(item)
                 : visibleColumns.map((col) => {

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

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
 export interface PaginationProps {
     namespace: string;
+    count?: 'items' | 'pages';
+    pageSizes?: number[];
+    always?: boolean;
 }
-export declare function Pagination({ namespace }: PaginationProps): ReactNode;
+export declare function Pagination({ namespace, count, pageSizes, always, }: PaginationProps): ReactNode;

package/dist/ui/data/Pagination.js

@@ -4,23 +4,40 @@ import { useStore } from '../../react/hooks/useStore.js';
 import { useI18n } from '../../react/hooks/useI18n.js';
 // Generic pager bound to a resource's query/view. Writes `$/<ns>/query.page`;
 // the data provider re-resolves the view (server window or client slice).
-// Hidden when everything fits on one page.
-export function Pagination({ namespace }) {
+export function Pagination({ namespace, count = 'items', pageSizes, always = false, }) {
     const scena = useScena();
     const { t } = useI18n('query');
     const view = useStore(`$/${namespace}/view`);
     const query = useStore(`$/${namespace}/query`);
     const total = view?.total ?? 0;
-    const page = query?.page ?? 1;
     const pageSize = query?.pageSize ?? 50;
     const pages = Math.max(1, Math.ceil(total / pageSize));
-    if (total <= pageSize)
+    // Clamped, because `total` can shrink under a reader - a filter narrowing,
+    // rows being deleted - and page 7 of a 2-page list renders as empty with
+    // both arrows disabled, which looks like a broken list rather than a stale
+    // page number.
+    const page = Math.min(Math.max(1, query?.page ?? 1), pages);
+    if (total <= pageSize && !always && !pageSizes?.length)
         return null;
-    const setPage = (p) => scena.store.set(`$/${namespace}/query`, {
-        ...query,
-        page: Math.min(pages, Math.max(1, p)),
-    });
-    return (_jsxs("div", { style: bar, children: [_jsx("button", { style: btn, disabled: page <= 1, onClick: () => setPage(page - 1), "aria-label": "Previous", children: "\u2039" }), _jsx("span", { style: { fontSize: 12, color: 'var(--oo-color-muted, #8a8f98)' }, children: t('pageOf', { page, pages, fallback: '{page} / {pages}' }) }), _jsx("button", { style: btn, disabled: page >= pages, onClick: () => setPage(page + 1), "aria-label": "Next", children: "\u203A" })] }));
+    // The window this page actually covers. `first` is 0 only when there is
+    // nothing at all, which is the one case where "1 – 0 of 0" would be absurd.
+    const first = total === 0 ? 0 : (page - 1) * pageSize + 1;
+    const last = Math.min(page * pageSize, total);
+    const write = (next) => scena.store.set(`$/${namespace}/query`, { ...query, ...next });
+    const setPage = (p) => write({ page: Math.min(pages, Math.max(1, p)) });
+    const label = count === 'pages'
+        ? t('pageOf', { page, pages, fallback: '{page} / {pages}' })
+        : total === 0
+            ? t('noItems', { fallback: 'nothing' })
+            : t('itemRange', {
+                first,
+                last,
+                total,
+                fallback: '{first} – {last} of {total}',
+            });
+    return (_jsxs("div", { style: bar, children: [_jsx("button", { style: btn, disabled: page <= 1, onClick: () => setPage(page - 1), "aria-label": "Previous", children: "\u2039" }), _jsx("span", { style: { fontSize: 12, color: 'var(--oo-color-muted, #8a8f98)', fontVariantNumeric: 'tabular-nums' }, "aria-live": "polite", children: label }), _jsx("button", { style: btn, disabled: page >= pages, onClick: () => setPage(page + 1), "aria-label": "Next", children: "\u203A" }), pageSizes && pageSizes.length > 0 ? (_jsx("select", { style: select, value: pageSize, "aria-label": t('perPage', { fallback: 'Rows per page' }), onChange: (event) => write({ page: 1, pageSize: Number(event.currentTarget.value) }), children: [...new Set([...pageSizes, pageSize])]
+                    .sort((a, b) => a - b)
+                    .map((size) => (_jsx("option", { value: size, children: t('perPageOption', { size, fallback: '{size} / page' }) }, size))) })) : null] }));
 }
 const bar = {
     display: 'flex',
@@ -41,3 +58,14 @@ const btn = {
     height: 24,
     lineHeight: '20px',
 };
+const select = {
+    appearance: 'none',
+    background: 'var(--oo-color-canvas, #14171c)',
+    border: '1px solid var(--oo-color-border, #2b2f37)',
+    borderRadius: 4,
+    color: 'var(--oo-color-muted, #8a8f98)',
+    cursor: 'pointer',
+    font: 'inherit',
+    fontSize: 11,
+    padding: '2px 4px',
+};

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

@@ -1,6 +1,6 @@
 import { type ClipboardEvent as ReactClipboardEvent, type CSSProperties, type DragEvent as ReactDragEvent, type ReactNode } from 'react';
-import type { BindingPath } from '../../types/component-graph.js';
-import type { PickerAction } from '../../types/host.js';
+import type { BindingPath } from '../../sdk/component-graph.js';
+import type { PickerAction } from '../../sdk/host.js';
 import './Tree.css';
 export interface TreeNode<T = unknown> {
     key: string;

package/dist/ui/data/Tree.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { ContextMenu } from '../menu/ContextMenu.js';
 import './Tree.css';
-import { resolveColorVar } from '../../types/colors.js';
+import { resolveColorVar } from '../../sdk/colors.js';
 function flatten(nodes, expanded, depth = 0, parentKey = null, out = []) {
     for (const n of nodes) {
         const hasChildren = n.children !== undefined;

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

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

package/dist/ui/display/Alert.css

@@ -1,19 +1,24 @@
 .oo-alert {
+  --oo-alert-rgb: var(--oo-rgb-blue);
+  --oo-alert-color: rgb(var(--oo-alert-rgb));
+  --oo-alert-spacing: var(--oo-spacing-sm);
+  --oo-alert-background: rgb(var(--oo-alert-rgb) / 0.1);
+  --oo-alert-border: rgb(var(--oo-alert-rgb) / 0.25);
   display: flex;
   align-items: flex-start;
-  gap: var(--oo-spacing-sm);
-  padding: var(--oo-spacing-md);
+  gap: var(--oo-alert-spacing);
+  padding: var(--oo-alert-spacing);
   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);
+  background: var(--oo-alert-background);
+  color: var(--oo-alert-color);
+  border: 1px solid var(--oo-alert-border);
 }
-.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[data-tone='info']    { --oo-alert-rgb: var(--oo-rgb-blue); }
+.oo-alert[data-tone='success'] { --oo-alert-rgb: var(--oo-rgb-green); }
+.oo-alert[data-tone='warning'] { --oo-alert-rgb: var(--oo-rgb-amber); }
+.oo-alert[data-tone='danger']  { --oo-alert-rgb: var(--oo-rgb-red); }
 .oo-alert__icon {
   flex: 0 0 auto;
   margin-top: 2px;
@@ -27,7 +32,7 @@
   color: var(--oo-color-fg);
 }
 .oo-alert__title {
-  color: rgb(var(--oo-color));
+  color: rgb(var(--oo-alert-rgb));
 }
 .oo-alert__close {
   background: none;

package/dist/ui/display/Badge.css

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