@softov/scena 0.1.2

package/dist/ui/display/Text.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { appearance } from '../../styles/index.js';
+import './Text.css';
+export function Text({ text, variant = 'body', muted, weight, align, tone, style, }) {
+    const cls = [
+        appearance('oo-text', { variant }),
+        muted ? 'oo-text--muted' : '',
+        weight === 'bold' ? 'oo-text--bold' : '',
+        align ? `oo-text--align-${align}` : '',
+        tone ? `oo-text--tone-${tone}` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("span", { className: cls, style: style, children: text }));
+}

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

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

package/dist/ui/display/catalog.js

@@ -0,0 +1,12 @@
+// Catalog registration for display components (dynamic import — no eager load).
+export const CATALOG_DISPLAY_MAP = [
+    { component: 'Card', category: 'inline', renderer: { kind: 'react', load: () => import('./Card.js').then((m) => ({ default: m.Card })) } },
+    { component: 'Divider', category: 'inline', renderer: { kind: 'react', load: () => import('./Divider.js').then((m) => ({ default: m.Divider })) } },
+    { component: 'Alert', category: 'inline', renderer: { kind: 'react', load: () => import('./Alert.js').then((m) => ({ default: m.Alert })) } },
+    { component: 'Badge', category: 'inline', renderer: { kind: 'react', load: () => import('./Badge.js').then((m) => ({ default: m.Badge })) } },
+    { component: 'Text', category: 'inline', renderer: { kind: 'react', load: () => import('./Text.js').then((m) => ({ default: m.Text })) } },
+    { component: 'Image', category: 'inline', renderer: { kind: 'react', load: () => import('./Image.js').then((m) => ({ default: m.Image })) } },
+    { component: 'Icon', category: 'inline', renderer: { kind: 'react', load: () => import('./Icon.js').then((m) => ({ default: m.Icon })) } },
+    { component: 'DetailList', category: 'inline', renderer: { kind: 'react', load: () => import('./DetailList.js').then((m) => ({ default: m.DetailList })) } },
+    { component: 'DetailHeader', category: 'inline', renderer: { kind: 'react', load: () => import('./DetailHeader.js').then((m) => ({ default: m.DetailHeader })) } },
+];

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

@@ -0,0 +1,22 @@
+export { Card } from './Card.js';
+export { Divider } from './Divider.js';
+export { Text } from './Text.js';
+export { Image } from './Image.js';
+export { Icon, NAMED_GLYPH } from './Icon.js';
+export type { IconName } from './Icon.js';
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertTone } from './Alert.js';
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeTone } from './Badge.js';
+export { DetailList } from './DetailList.js';
+export type { DetailListProps, DetailItem } from './DetailList.js';
+export { DetailHeader } from './DetailHeader.js';
+export type { DetailHeaderProps, DetailHeaderMeta } from './DetailHeader.js';
+export { DetailContainer } from './DetailContainer.js';
+export type { DetailContainerProps } from './DetailContainer.js';
+export { DetailNotFound } from './DetailNotFound.js';
+export type { DetailNotFoundProps, DetailNotFoundAction } from './DetailNotFound.js';
+export { AddPlaceholder } from './AddPlaceholder.js';
+export type { AddPlaceholderProps } from './AddPlaceholder.js';
+export { SectionTitle } from './SectionTitle.js';
+export type { SectionTitleProps } from './SectionTitle.js';

package/dist/ui/display/index.js

@@ -0,0 +1,14 @@
+// Direct-React re-exports. Catalog registration lives in ../catalog.ts.
+export { Card } from './Card.js';
+export { Divider } from './Divider.js';
+export { Text } from './Text.js';
+export { Image } from './Image.js';
+export { Icon, NAMED_GLYPH } from './Icon.js';
+export { Alert } from './Alert.js';
+export { Badge } from './Badge.js';
+export { DetailList } from './DetailList.js';
+export { DetailHeader } from './DetailHeader.js';
+export { DetailContainer } from './DetailContainer.js';
+export { DetailNotFound } from './DetailNotFound.js';
+export { AddPlaceholder } from './AddPlaceholder.js';
+export { SectionTitle } from './SectionTitle.js';

package/dist/ui/embed/HtmlEmbed.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+export interface HtmlEmbedProps {
+    html: string;
+    height?: number | string;
+    width?: number | string;
+    allowScripts?: boolean;
+    sandbox?: string;
+    title?: string;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function HtmlEmbed({ html, height, width, allowScripts, sandbox, title, style, className, }: HtmlEmbedProps): import("react").JSX.Element;

package/dist/ui/embed/HtmlEmbed.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HtmlEmbed({ html, height = 200, width = '100%', allowScripts, sandbox, title, style, className, }) {
+    const effective = sandbox ?? (allowScripts ? 'allow-scripts allow-same-origin' : 'allow-same-origin');
+    return (_jsx("div", { className: ['oo-html-embed', className].filter(Boolean).join(' '), style: {
+            border: '1px solid var(--oo-color-border)',
+            borderRadius: 'var(--oo-radius-md, 8px)',
+            overflow: 'hidden',
+            background: 'var(--oo-color-canvas)',
+            ...style,
+        }, children: _jsx("iframe", { srcDoc: html, sandbox: effective, title: title ?? 'embedded HTML', style: {
+                width,
+                height,
+                border: 'none',
+                display: 'block',
+            } }) }));
+}

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

@@ -0,0 +1,2 @@
+export { HtmlEmbed } from './HtmlEmbed.js';
+export type { HtmlEmbedProps } from './HtmlEmbed.js';

package/dist/ui/embed/index.js

@@ -0,0 +1 @@
+export { HtmlEmbed } from './HtmlEmbed.js';

package/dist/ui/forms/DangerZone.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface DangerZoneProps {
+    label: string;
+    description?: ReactNode;
+    confirmMessage?: string;
+    onConfirm: () => void | Promise<void>;
+}
+export declare function DangerZone({ label, description, confirmMessage, onConfirm }: DangerZoneProps): ReactNode;

package/dist/ui/forms/DangerZone.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../control/Button.js';
+// A bordered destructive-action block for settings panels (mirrors web's
+// DangerZone). Used by SettingsContainer so resources don't re-implement the
+// delete affordance.
+export function DangerZone({ label, description, confirmMessage, onConfirm }) {
+    function run() {
+        if (confirmMessage && !window.confirm(confirmMessage))
+            return;
+        void onConfirm();
+    }
+    return (_jsxs("div", { className: "oo-danger-zone", style: wrap, children: [_jsx("div", { style: title, children: "\u26A0\uFE0E DANGER ZONE" }), description ? _jsx("div", { style: desc, children: description }) : null, _jsx("div", { children: _jsx(Button, { label: `🗑︎ ${label}`, variant: "danger", size: "sm", onClick: run }) })] }));
+}
+const wrap = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    borderTop: '1px solid rgb(var(--oo-rgb-danger) / 0.3)',
+    paddingTop: 'var(--oo-spacing-md, 16px)',
+    paddingBottom: 'var(--oo-spacing-md, 16px)',
+    paddingLeft: 'var(--oo-spacing-md, 16px)',
+    paddingRight: 'var(--oo-spacing-md, 16px)',
+};
+const title = {
+    fontSize: 'var(--oo-font-size-sm)',
+    color: 'var(--oo-color-danger)',
+};
+const desc = {
+    fontSize: 'var(--oo-font-size-xs)',
+    color: 'var(--oo-color-muted)',
+};

package/dist/ui/forms/Field.css

@@ -0,0 +1,15 @@
+.oo-field-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+}
+.oo-field-row__labelline {
+  display: flex;
+  align-items: baseline;
+  gap: var(--oo-spacing-xs);
+}
+.oo-field-row__label {
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-text);
+  font-weight: 600;
+}

package/dist/ui/forms/Field.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import './Field.css';
+export interface FieldLabelProps {
+    htmlFor?: string;
+    label: string;
+    required?: boolean;
+    typeTag?: string;
+}
+export declare function FieldLabel({ htmlFor, label, required, typeTag }: FieldLabelProps): import("react").JSX.Element;
+export interface FieldHintProps {
+    text?: string;
+}
+export declare function FieldHint({ text }: FieldHintProps): import("react").JSX.Element | null;
+export interface FieldErrorProps {
+    name?: string;
+    error?: string;
+}
+export declare function FieldError({ name, error }: FieldErrorProps): import("react").JSX.Element | null;
+export interface FieldProps {
+    name: string;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    typeTag?: string;
+    error?: string;
+    children?: ReactNode;
+}
+export declare function Field({ name, label, hint, required, typeTag, error, children }: FieldProps): import("react").JSX.Element;

package/dist/ui/forms/Field.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from './Form.js';
+import './Field.css';
+export function FieldLabel({ htmlFor, label, required, typeTag }) {
+    return (_jsxs("span", { className: "oo-field-row__labelline", children: [_jsx("label", { className: "oo-field-row__label", htmlFor: htmlFor, children: label }), required ? _jsx("span", { className: "oo-field__required oo-field-row__required", children: "*" }) : null, typeTag ? _jsx("span", { className: "oo-field-row__type", children: typeTag }) : null] }));
+}
+export function FieldHint({ text }) {
+    if (!text)
+        return null;
+    return _jsx("span", { className: "oo-field__hint oo-field-row__hint", children: text });
+}
+export function FieldError({ name, error }) {
+    const { errors } = useFormContext();
+    const message = error ?? (name ? errors?.[name] : undefined);
+    if (!message)
+        return null;
+    return _jsx("span", { className: "oo-field__error oo-field-row__error", children: message });
+}
+// A field ROW for content that owns no single focusable input — array
+// repeaters, custom format renderers, union pickers. The heading is a <span>,
+// not a <label> (there is no input to associate). Scalar controls do NOT use
+// Field: they render their own <label> via the control's field chrome.
+export function Field({ name, label, hint, required, typeTag, error, children }) {
+    return (_jsxs("div", { className: "oo-field-row", children: [label ? (_jsxs("span", { className: "oo-field-row__labelline", children: [_jsx("span", { className: "oo-field-row__label", children: label }), required ? _jsx("span", { className: "oo-field__required oo-field-row__required", children: "*" }) : null, typeTag ? _jsx("span", { className: "oo-field__type oo-field-row__type", children: typeTag }) : null] })) : null, _jsx(FieldHint, { text: hint }), _jsx("div", { className: "oo-field-row__control", children: children }), _jsx(FieldError, { name: name, error: error })] }));
+}

package/dist/ui/forms/FieldGroup.css

@@ -0,0 +1,15 @@
+.oo-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-md);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  padding: var(--oo-spacing-md);
+  margin: 0;
+}
+.oo-field-group__legend {
+  font-size: var(--oo-font-size-xs);
+  font-weight: 600;
+  color: var(--oo-color-muted);
+  padding: 0 var(--oo-spacing-xs);
+}

package/dist/ui/forms/FieldGroup.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import './FieldGroup.css';
+export interface FieldGroupProps {
+    legend?: string;
+    children?: ReactNode;
+}
+export declare function FieldGroup({ legend, children }: FieldGroupProps): import("react").JSX.Element;

package/dist/ui/forms/FieldGroup.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './FieldGroup.css';
+// Fieldset-style grouping of related fields. No header border (that is
+// FormSection's job) — just an optional legend and a bordered box.
+export function FieldGroup({ legend, children }) {
+    return (_jsxs("fieldset", { className: "oo-field-group", children: [legend ? _jsx("legend", { className: "oo-field-group__legend", children: legend }) : null, children] }));
+}

package/dist/ui/forms/Form.css

@@ -0,0 +1,14 @@
+.oo-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-form-gap, var(--oo-spacing-md));
+  padding: var(--oo-form-padding, var(--oo-spacing-md));
+}
+
+/* Async-load state. Placeholder treatment — refine per design. Disables input
+   while data streams in and fades the body. */
+.oo-form[data-loading='true'] {
+  opacity: 0.55;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}

package/dist/ui/forms/Form.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './Form.css';
+export interface FormContextValue {
+    errors?: Record<string, string>;
+    namespace?: string;
+}
+export declare const FormContext: import("react").Context<FormContextValue>;
+export declare function useFormContext(): FormContextValue;
+export interface FormProps {
+    children?: ReactNode;
+    errors?: Record<string, string>;
+    namespace?: string;
+    gap?: number | string;
+    loading?: boolean;
+    onSubmit?: () => void;
+    style?: CSSProperties;
+}
+export declare function Form({ children, errors, namespace, gap, loading, onSubmit, style }: FormProps): import("react").JSX.Element;

package/dist/ui/forms/Form.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import './Form.css';
+export const FormContext = createContext({});
+export function useFormContext() {
+    return useContext(FormContext);
+}
+export function Form({ children, errors, namespace, gap, loading, onSubmit, style }) {
+    const formStyle = {
+        ...(gap !== undefined ? { gap } : null),
+        ...style,
+    };
+    return (_jsx(FormContext.Provider, { value: { errors, namespace }, children: _jsx("form", { className: "oo-form", "data-loading": loading ? 'true' : undefined, style: formStyle, onSubmit: (e) => {
+                e.preventDefault();
+                onSubmit?.();
+            }, children: children }) }));
+}

package/dist/ui/forms/FormActions.css

@@ -0,0 +1,11 @@
+.oo-form-actions {
+  display: flex;
+  gap: var(--oo-spacing-sm);
+  align-items: center;
+}
+.oo-form-actions[data-align='end'] {
+  justify-content: flex-end;
+}
+.oo-form-actions[data-align='between'] {
+  justify-content: space-between;
+}

package/dist/ui/forms/FormActions.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { type ButtonProps } from '../control/Button.js';
+import './FormActions.css';
+export interface FormActionItem {
+    label: string;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonProps['variant'];
+    disabled?: boolean;
+    hidden?: boolean;
+    icon?: string;
+}
+export interface FormActionsProps {
+    actions?: FormActionItem[];
+    align?: 'start' | 'end' | 'between';
+    children?: ReactNode;
+}
+export declare function FormActions({ actions, align, children }: FormActionsProps): import("react").JSX.Element;

package/dist/ui/forms/FormActions.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../control/Button.js';
+import './FormActions.css';
+export function FormActions({ actions, align = 'start', children }) {
+    return (_jsxs("div", { className: "oo-form-actions", "data-align": align, children: [actions
+                ? actions
+                    .filter((a) => !a.hidden)
+                    .map((a, i) => (_jsx(Button, { type: a.type ?? 'button', label: a.icon ? `${a.icon} ${a.label}` : a.label, variant: a.variant, disabled: a.disabled, onClick: a.onClick }, i)))
+                : null, children] }));
+}

package/dist/ui/forms/FormSection.css

@@ -0,0 +1,19 @@
+.oo-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-sm);
+}
+.oo-form-section__header {
+  font-size: var(--oo-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--oo-color-muted);
+  border-bottom: 1px solid var(--oo-color-border);
+  padding-bottom: var(--oo-spacing-xs);
+}
+.oo-form-section__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-md);
+}

package/dist/ui/forms/FormSection.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import './FormSection.css';
+export interface FormSectionProps {
+    title: string;
+    children?: ReactNode;
+}
+export declare function FormSection({ title, children }: FormSectionProps): import("react").JSX.Element;

package/dist/ui/forms/FormSection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './FormSection.css';
+// Section header (uppercase title + bottom border) + its fields. This is the
+// `x-header` pattern from web's JsonSchemaForm.
+export function FormSection({ title, children }) {
+    return (_jsxs("section", { className: "oo-form-section", children: [_jsx("header", { className: "oo-form-section__header", children: title }), _jsx("div", { className: "oo-form-section__body", children: children })] }));
+}

package/dist/ui/forms/LoginForm.css

@@ -0,0 +1,105 @@
+.porta-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-md);
+  max-width: 360px;
+}
+
+.porta-form__oauth {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+}
+
+.porta-form__divider {
+  display: flex;
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.porta-form__divider::before,
+.porta-form__divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--oo-color-border);
+}
+
+.porta-form__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-sm);
+}
+
+.porta-form__two-step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+  padding: var(--oo-spacing-sm);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+}
+.porta-form__two-step-label {
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+}
+.porta-form__two-step-row {
+  display: flex;
+  gap: var(--oo-spacing-xs);
+  align-items: flex-end;
+}
+.porta-form__two-step-row .oo-field {
+  flex: 1;
+}
+
+.porta-form__otp-digits {
+  display: flex;
+  gap: 4px;
+}
+.porta-form__otp-digit {
+  width: 32px;
+  height: 36px;
+  text-align: center;
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-family: var(--oo-font-mono);
+}
+.porta-form__otp-digit:focus {
+  outline: 2px solid var(--oo-color-accent);
+  outline-offset: -2px;
+}
+
+.porta-form__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--oo-spacing-sm);
+}
+.porta-form__error {
+  color: var(--oo-color-danger);
+  font-size: var(--oo-font-size-xs);
+}
+.porta-form__pending {
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+}
+.porta-form__aux {
+  display: flex;
+  gap: var(--oo-spacing-md);
+}
+.porta-form__aux button {
+  background: transparent;
+  border: none;
+  color: var(--oo-color-accent);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--oo-font-size-xs);
+  padding: 0;
+  text-decoration: underline;
+}

package/dist/ui/forms/LoginForm.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import '../control/_field-parts.css';
+import './LoginForm.css';
+export interface LoginFormProps {
+    /** Filter to a subset by provider id; omit to render every registered provider. */
+    providers?: string[];
+    allowSignup?: boolean;
+    allowForgotPassword?: boolean;
+    onSignup?: () => void;
+    onForgotPassword?: () => void;
+}
+export declare function LoginForm({ providers: filter, allowSignup, allowForgotPassword, onSignup, onForgotPassword, }: LoginFormProps): ReactNode;