@softov/scena 0.1.2

package/dist/ui/forms/LoginForm.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { useStore } from '../../react/hooks/useStore.js';
+import { useI18n } from '../../react/hooks/useI18n.js';
+import { Button } from '../control/Button.js';
+import { usePorta } from '../../porta/PortaContext.js';
+import { SIGILLUM_PATHS } from '../../porta/sigillum.js';
+// import { Field } from '../ui/forms/Field.js';
+import '../control/_field-parts.css';
+import './LoginForm.css';
+function bindingPath(value) {
+    return value && typeof value === 'object' && 'path' in value ? value.path : undefined;
+}
+// Resolve a string|DataBinding label to text, reactively. `useStore(undefined)`
+// is a no-op, so this stays a single unconditional hook. A binding (e.g.
+// `{ path: '$/t/auth/usernameLabel' }`) follows locale switches via the $/t
+// backend.
+function useLabel(value, fallback = '') {
+    const bound = useStore(bindingPath(value));
+    if (bindingPath(value))
+        return bound ?? fallback;
+    return (typeof value === 'string' ? value : undefined) ?? fallback;
+}
+// One OAuth button — resolves its (possibly bound) provider label reactively.
+function OAuthButton({ provider, pending, fire, t, }) {
+    const label = useLabel(provider.label, provider.id);
+    return (_jsx(Button, { label: `${provider.icon ? `${provider.icon} ` : ''}${t('auth/providerLabel', {
+            provider: label,
+            fallback: 'Continue with {provider}',
+        })}`, disabled: pending, onClick: () => fire('sigillum.signin', { providerId: provider.id, credentials: {} }) }));
+}
+// A field label: resolves a `{ path }` binding via the store (reactive), else
+// renders the literal string.
+function ProviderFieldLabel({ field }) {
+    const path = field.label && typeof field.label === 'object' && 'path' in field.label ? bindingPath(field.label) : undefined;
+    const bound = useStore(path);
+    if (path)
+        return _jsx(_Fragment, { children: bound ?? '' });
+    return _jsx(_Fragment, { children: typeof field.label === 'string' ? field.label : '' });
+}
+export function LoginForm({ providers: filter, allowSignup = false, allowForgotPassword = false, onSignup, onForgotPassword, }) {
+    const scena = useScena();
+    const porta = usePorta();
+    const { t } = useI18n();
+    const pending = Boolean(useStore(SIGILLUM_PATHS.pending));
+    const error = useStore(SIGILLUM_PATHS.error) ?? null;
+    const challenge = useStore(SIGILLUM_PATHS.challenge) ?? null;
+    const visible = useMemo(() => (filter ? porta.providers.filter((p) => filter.includes(p.id)) : porta.providers), [porta.providers, filter]);
+    const oauthButtons = visible.filter((p) => p.kind === 'oauth-button');
+    const formFieldsProviders = visible.filter((p) => p.kind === 'form-fields');
+    const otpProviders = visible.filter((p) => p.kind === 'otp');
+    const magicProviders = visible.filter((p) => p.kind === 'magic-link');
+    // Merge fields across all form-fields providers by name (first wins).
+    const mergedFields = useMemo(() => {
+        const out = [];
+        const seen = new Set();
+        for (const p of formFieldsProviders) {
+            for (const f of p.fields ?? []) {
+                if (seen.has(f.name))
+                    continue;
+                seen.add(f.name);
+                out.push({ field: f, ownerId: p.id });
+            }
+        }
+        return out;
+    }, [formFieldsProviders]);
+    const [fieldValues, setFieldValues] = useState({});
+    function setField(name, value) {
+        setFieldValues((prev) => ({ ...prev, [name]: value }));
+    }
+    function fire(commandId, args) {
+        void scena.commands.execute(commandId, args);
+    }
+    function onSubmit(e) {
+        e.preventDefault();
+        if (formFieldsProviders.length === 0)
+            return;
+        // When multiple form-fields providers exist, prefer 'password' if present;
+        // otherwise the first one. Apps with stricter needs can use the
+        // `providers` prop to disambiguate.
+        const target = formFieldsProviders.find((p) => p.id === 'password') ?? formFieldsProviders[0];
+        if (!target)
+            return;
+        fire('sigillum.signin', { providerId: target.id, credentials: fieldValues });
+    }
+    const hasSecondaryUi = mergedFields.length > 0 || otpProviders.length > 0 || magicProviders.length > 0;
+    // Submit button label — prefer the 'password' provider's label, else the
+    // first form provider's. Resolved reactively (string or $/t binding).
+    const submitProvider = formFieldsProviders.find((p) => p.id === 'password') ?? formFieldsProviders[0];
+    const submitLabel = useLabel(submitProvider?.label, t('auth/signIn', 'Sign in'));
+    return (_jsxs("form", { className: "porta-form", onSubmit: onSubmit, children: [oauthButtons.length > 0 ? (_jsx("div", { className: "porta-form__oauth", children: oauthButtons.map((p) => (_jsx(OAuthButton, { provider: p, pending: pending, fire: fire, t: t }, p.id))) })) : null, oauthButtons.length > 0 && hasSecondaryUi ? (_jsx("div", { className: "porta-form__divider", children: "or" })) : null, mergedFields.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "porta-form__fields", children: mergedFields.map(({ field }) => (_jsxs("label", { className: "oo-field", children: [_jsx("span", { className: "oo-field__label", children: field.label && typeof field.label === 'object' && 't' in field.label ? t(field.label.t, {
+                                        ...field.label.args,
+                                        fallback: '???',
+                                    }) : _jsx(ProviderFieldLabel, { field: field }) }), _jsx("input", { className: "oo-input", type: field.type, name: field.name, autoComplete: field.autoComplete, required: field.required, placeholder: field.placeholder, value: fieldValues[field.name] ?? '', onChange: (e) => setField(field.name, e.currentTarget.value) })] }, field.name))) }), _jsx(Button, { type: "submit", variant: "primary", label: submitLabel, disabled: pending })] })) : null, otpProviders.map((p) => (_jsx(OtpRow, { provider: p, challenge: challenge, pending: pending, fire: fire }, p.id))), magicProviders.map((p) => (_jsx(MagicLinkRow, { provider: p, challenge: challenge, pending: pending, fire: fire }, p.id))), _jsxs("div", { className: "porta-form__footer", children: [_jsxs("span", { children: [pending ? _jsx("span", { className: "porta-form__pending", children: "Working\u2026" }) : null, error ? _jsx("span", { className: "porta-form__error", children: error }) : null] }), _jsxs("div", { className: "porta-form__aux", children: [allowForgotPassword ? (_jsx("button", { type: "button", onClick: onForgotPassword, children: t('auth/forgotPassword', 'Forgot password?') })) : null, allowSignup ? (_jsx("button", { type: "button", onClick: onSignup, children: t('auth/createAccount', 'Create account') })) : null] })] })] }));
+}
+function OtpRow({ provider, challenge, pending, fire, }) {
+    const { t } = useI18n('auth');
+    const label = useLabel(provider.label, provider.id);
+    const stage2 = challenge?.providerId === provider.id;
+    const digits = provider.otp?.digits ?? 6;
+    const [address, setAddress] = useState('');
+    const [code, setCode] = useState('');
+    return (_jsxs("div", { className: "porta-form__two-step", children: [_jsxs("span", { className: "porta-form__two-step-label", children: [provider.icon ? `${provider.icon} ` : '', label] }), stage2 ? (_jsxs("div", { className: "porta-form__two-step-row", children: [_jsx(DigitsInput, { digits: digits, value: code, onChange: setCode }), _jsx(Button, { label: "Verify", variant: "primary", disabled: pending || code.length !== digits, onClick: () => fire('sigillum.verifyOtp', { providerId: provider.id, code }) })] })) : (_jsxs("div", { className: "porta-form__two-step-row", children: [_jsxs("label", { className: "oo-field", children: [_jsx("span", { className: "oo-field__label", children: provider.otp?.channel === 'sms'
+                                    ? t('phoneLabel', 'Phone number')
+                                    : t('emailLabel', 'Email address') }), _jsx("input", { className: "oo-input", type: provider.otp?.channel === 'sms' ? 'tel' : 'email', value: address, placeholder: provider.otp?.channel === 'sms' ? '+1 555 …' : 'you@example.com', onChange: (e) => setAddress(e.currentTarget.value) })] }), _jsx(Button, { label: provider.otp?.sendLabel ?? t('sendCode', 'Send code'), disabled: pending || !address, onClick: () => fire('sigillum.requestOtp', { providerId: provider.id, value: address }) })] }))] }));
+}
+function MagicLinkRow({ provider, challenge, pending, fire, }) {
+    const { t } = useI18n('auth');
+    const label = useLabel(provider.label, provider.id);
+    const stage2 = challenge?.providerId === provider.id;
+    const [address, setAddress] = useState('');
+    return (_jsxs("div", { className: "porta-form__two-step", children: [_jsxs("span", { className: "porta-form__two-step-label", children: [provider.icon ? `${provider.icon} ` : '', label] }), stage2 ? (_jsxs("span", { className: "porta-form__pending", children: ["Check your ", provider.magicLink?.channel ?? 'inbox', " for the link."] })) : (_jsxs("div", { className: "porta-form__two-step-row", children: [_jsxs("label", { className: "oo-field", children: [_jsx("span", { className: "oo-field__label", children: provider.magicLink?.channel === 'sms'
+                                    ? t('phoneLabel', 'Phone number')
+                                    : t('emailLabel', 'Email address') }), _jsx("input", { className: "oo-input", type: provider.magicLink?.channel === 'sms' ? 'tel' : 'email', value: address, placeholder: provider.magicLink?.channel === 'sms' ? '+1 555 …' : 'you@example.com', onChange: (e) => setAddress(e.currentTarget.value) })] }), _jsx(Button, { label: provider.magicLink?.sendLabel ?? t('sendLink', 'Send link'), disabled: pending || !address, onClick: () => fire('sigillum.requestOtp', { providerId: provider.id, value: address }) })] }))] }));
+}
+function DigitsInput({ digits, value, onChange, }) {
+    const refs = useRef([]);
+    useEffect(() => {
+        refs.current = refs.current.slice(0, digits);
+    }, [digits]);
+    const chars = value.padEnd(digits, ' ').slice(0, digits).split('');
+    function setChar(idx, ch) {
+        const next = chars.slice();
+        next[idx] = ch.slice(-1) || ' ';
+        onChange(next.join('').trimEnd());
+        if (ch && idx + 1 < digits)
+            refs.current[idx + 1]?.focus();
+    }
+    return (_jsx("div", { className: "porta-form__otp-digits", children: Array.from({ length: digits }).map((_, i) => (_jsx("input", { ref: (el) => {
+                refs.current[i] = el;
+            }, className: "porta-form__otp-digit", inputMode: "numeric", maxLength: 1, value: chars[i]?.trim() ?? '', onChange: (e) => setChar(i, e.currentTarget.value), onKeyDown: (e) => {
+                if (e.key === 'Backspace' && !chars[i]?.trim() && i > 0) {
+                    refs.current[i - 1]?.focus();
+                }
+            } }, i))) }));
+}

package/dist/ui/forms/SchemaForm.css

@@ -0,0 +1,81 @@
+.oo-schema-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-md);
+}
+.oo-schema-form__modebar {
+  display: flex;
+  gap: var(--oo-spacing-xs);
+  align-self: flex-end;
+}
+.oo-schema-form__modebar button {
+  font: inherit;
+  font-size: var(--oo-font-size-xs);
+  padding: 2px var(--oo-spacing-sm);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.oo-schema-form__modebar button[data-active='true'] {
+  background: var(--oo-color-active);
+  border-color: var(--oo-color-accent);
+}
+.oo-schema-form__modebar .oo-schema-form__reset {
+  color: var(--oo-color-warning);
+  border-color: var(--oo-color-warning);
+}
+.oo-schema-form__json {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--oo-font-mono);
+  font-size: var(--oo-font-size-xs);
+  resize: vertical;
+  padding: var(--oo-spacing-sm);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  background: var(--oo-color-canvas);
+  color: inherit;
+}
+.oo-schema-form__empty {
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+  font-style: italic;
+}
+.oo-schema-form__union {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-sm);
+}
+.oo-schema-form__array {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+}
+.oo-schema-form__array-item {
+  display: flex;
+  gap: var(--oo-spacing-xs);
+  align-items: flex-start;
+}
+.oo-schema-form__array-control {
+  flex: 1;
+}
+.oo-schema-form__array-remove {
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  background: transparent;
+  color: var(--oo-color-danger);
+  font-weight: 700;
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm);
+  cursor: pointer;
+}
+.oo-schema-form__array-add {
+  align-self: flex-start;
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  background: transparent;
+  color: inherit;
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm);
+  cursor: pointer;
+}

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

@@ -0,0 +1,26 @@
+import { type ComponentType, type CSSProperties } from 'react';
+import { type JsonSchemaField, type JsonSchemaObject } from './schema-walk.js';
+import './SchemaForm.css';
+export interface FormatRendererProps {
+    value: unknown;
+    onChange: (next: unknown) => void;
+    field: JsonSchemaField;
+    error?: string;
+}
+export type FormatRenderer = ComponentType<FormatRendererProps>;
+export interface SchemaFormProps {
+    schema: JsonSchemaObject;
+    value?: Record<string, unknown>;
+    defaultValue?: Record<string, unknown>;
+    onChange?: (next: Record<string, unknown>) => void;
+    errors?: Record<string, string>;
+    namespace?: string;
+    header?: string;
+    formatRenderers?: Record<string, FormatRenderer>;
+    jsonTextRoot?: boolean;
+    jsonTextFields?: boolean;
+    baseline?: Record<string, unknown>;
+    onDirtyChange?: (dirty: boolean) => void;
+    style?: CSSProperties;
+}
+export declare function SchemaForm({ schema, value, defaultValue, onChange, errors, namespace, header, formatRenderers, jsonTextRoot, jsonTextFields, baseline, onDirtyChange, style, }: SchemaFormProps): import("react").JSX.Element;

package/dist/ui/forms/SchemaForm.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useWriteBack, WriteContext } from '../../react/mount-context.js';
+import { TextField } from '../control/TextField.js';
+import { CheckBox } from '../control/CheckBox.js';
+import { ChoicePicker } from '../control/ChoicePicker.js';
+import { FormContext } from './Form.js';
+import { Field } from './Field.js';
+import { FormSection } from './FormSection.js';
+import { cleanDescription, deepEqual, defaultValueForSchema, effectiveType, isObjectRecord, normalizeUnionOptions, resolveArrayItemSchema, textareaRows, } from './schema-walk.js';
+import './SchemaForm.css';
+import { NAMED_GLYPH } from '../display/Icon.js';
+import { Markdown } from '../display/Markdown.js';
+function hasFormatRenderer(field, renderers) {
+    return Boolean(field.format && renderers?.[field.format]);
+}
+export function SchemaForm({ schema, value, defaultValue, onChange, errors, namespace, header, formatRenderers, jsonTextRoot, jsonTextFields, baseline, onDirtyChange, style, }) {
+    const writeValue = useWriteBack('value');
+    const [internal, setInternal] = useState(value ?? defaultValue ?? {});
+    const [mode, setMode] = useState('fields');
+    const [jsonText, setJsonText] = useState(() => JSON.stringify(value ?? defaultValue ?? {}, null, 2));
+    // Root shows its switch unless explicitly disabled. Nested object sections
+    // follow `jsonTextFields`, which defaults to the effective root value.
+    const showRootToggle = jsonTextRoot ?? true;
+    const childToggle = jsonTextFields ?? showRootToggle;
+    // Pristine baseline: explicit prop, else the first value this form saw.
+    const initialRef = useRef(value ?? defaultValue ?? {});
+    const baselineValue = baseline ?? initialRef.current;
+    const dirty = !deepEqual(internal, baselineValue);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    useEffect(() => {
+        onDirtyChange?.(dirty);
+        // Fires on dirty transitions only. `onDirtyChange` is excluded on purpose:
+        // callers routinely pass an inline arrow, and including it would re-fire
+        // the callback on every parent render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dirty]);
+    const properties = schema.properties;
+    if (!properties || Object.keys(properties).length === 0) {
+        return _jsx("div", { className: "oo-schema-form__empty", children: "No parameters defined." });
+    }
+    const requiredSet = new Set(schema.required ?? []);
+    function commit(next) {
+        setInternal(next);
+        writeValue(next); // bound/graph: writes the whole object back (no-op in plain React)
+        onChange?.(next); // controlled: direct-React parent
+    }
+    function setField(key, val) {
+        commit({ ...internal, [key]: val });
+    }
+    function enterJson() {
+        setJsonText(JSON.stringify(internal, null, 2));
+        setMode('json');
+    }
+    function reset() {
+        commit(baselineValue);
+        setJsonText(JSON.stringify(baselineValue, null, 2));
+    }
+    function renderField(key, field) {
+        // x-show-if — hide unless a sibling field matches.
+        const showIf = field['x-show-if'];
+        if (showIf && internal[showIf.field] !== showIf.value)
+            return null;
+        const type = effectiveType(field);
+        const isEnum = (field.enum?.length ?? 0) > 0 || (field['x-enumOptions']?.length ?? 0) > 0;
+        const set = (next) => setField(key, next);
+        const meta = {
+            label: field.title ?? key,
+            hint: cleanDescription(field.description),
+            required: requiredSet.has(key),
+            error: errors?.[key],
+            typeTag: isEnum ? 'enum' : type,
+        };
+        const childNamespace = namespace ? `${namespace}_${key}` : undefined;
+        // Object → a titled section with a nested form (its fields carry labels).
+        if (type === 'object' && !isEnum && !hasFormatRenderer(field, formatRenderers)) {
+            return (_jsx(FormSection, { title: meta.label ?? key, children: _jsx(SchemaForm, { schema: { type: 'object', properties: field.properties ?? {}, required: field.required ?? [] }, value: isObjectRecord(internal[key]) ? internal[key] : {}, baseline: isObjectRecord(baselineValue[key]) ? baselineValue[key] : {}, onChange: set, namespace: childNamespace, formatRenderers: formatRenderers, jsonTextRoot: childToggle }) }, key));
+        }
+        // Composite — owns no single focusable input, so Field provides the label.
+        const isComposite = normalizeUnionOptions(field).length > 0 ||
+            type === 'array' ||
+            hasFormatRenderer(field, formatRenderers);
+        if (isComposite) {
+            return (_jsx(Field, { name: key, label: meta.label, hint: meta.hint, required: meta.required, typeTag: meta.typeTag, error: meta.error, children: _jsx(SchemaControl, { field: field, value: internal[key], onChange: set, required: meta.required, error: meta.error, namespace: childNamespace, formatRenderers: formatRenderers, jsonTextFields: childToggle }) }, key));
+        }
+        // Scalar — the control owns its own <label>; pass the chrome straight in.
+        return (_jsx(SchemaControl, { field: field, value: internal[key], onChange: set, meta: meta, required: meta.required, error: meta.error, namespace: childNamespace, formatRenderers: formatRenderers }, key));
+    }
+    const rows = mode === 'fields' ? Object.entries(properties).map(([key, field]) => renderField(key, field)) : null;
+    const modebar = showRootToggle || dirty ? (_jsxs("div", { className: "oo-schema-form__modebar", children: [showRootToggle ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-active": mode === 'fields', onClick: () => setMode('fields'), children: "fields" }), _jsx("button", { type: "button", "data-active": mode === 'json', onClick: enterJson, children: "json" })] })) : null, dirty ? (_jsx("button", { type: "button", className: "oo-schema-form__reset", onClick: reset, children: "reset" })) : null] })) : null;
+    const body = mode === 'json' ? (_jsx("textarea", { className: "oo-schema-form__json", value: jsonText, spellCheck: false, rows: 16, onChange: (e) => {
+            setJsonText(e.target.value);
+            try {
+                const parsed = JSON.parse(e.target.value);
+                if (isObjectRecord(parsed))
+                    commit(parsed);
+            }
+            catch {
+                /* keep editing until the JSON parses */
+            }
+        } })) : header ? (_jsx(FormSection, { title: header, children: rows })) : (rows);
+    // Suppress ambient write-back for the field controls: each control reports
+    // through its explicit onChange, and SchemaForm aggregates into one object.
+    return (_jsx(FormContext.Provider, { value: { errors, namespace }, children: _jsx(WriteContext.Provider, { value: null, children: _jsxs("div", { className: "oo-schema-form", style: style, children: [schema.description ? _jsx(Markdown, { text: schema.description }) : null, modebar, body] }) }) }));
+}
+function SchemaControl({ field, value, onChange, meta, required, error, namespace, formatRenderers, jsonTextFields }) {
+    const unionOptions = normalizeUnionOptions(field);
+    const [unionIndex, setUnionIndex] = useState(0);
+    // Union (oneOf / anyOf): pick a variant, then render its sub-schema.
+    if (unionOptions.length > 0) {
+        const idx = unionOptions[unionIndex] ? unionIndex : 0;
+        const current = unionOptions[idx] ?? unionOptions[0];
+        const options = unionOptions.map((opt, i) => {
+            const t = effectiveType(opt);
+            const enumLabel = opt.const !== undefined
+                ? String(opt.const)
+                : opt.enum && opt.enum.length === 1
+                    ? opt.enum[0]
+                    : opt.title ?? t;
+            return { value: String(i), label: opt.title ? `${opt.title} (${enumLabel})` : enumLabel };
+        });
+        return (_jsxs("div", { className: "oo-schema-form__union", children: [_jsx(ChoicePicker, { options: options, value: String(idx), onChange: (v) => {
+                        const next = Number(v);
+                        const safe = Number.isFinite(next) ? Math.max(0, Math.min(next, unionOptions.length - 1)) : 0;
+                        setUnionIndex(safe);
+                        onChange(defaultValueForSchema(unionOptions[safe]));
+                    } }), _jsx(SchemaControl, { field: current, value: value, onChange: onChange, namespace: namespace, formatRenderers: formatRenderers, jsonTextFields: jsonTextFields })] }));
+    }
+    // Custom format renderer — checked before the built-in dispatch.
+    if (field.format && formatRenderers?.[field.format]) {
+        const Renderer = formatRenderers[field.format];
+        return _jsx(Renderer, { value: value, onChange: onChange, field: field, error: error });
+    }
+    const type = effectiveType(field);
+    // Enum / rich enum → ChoicePicker (owns its label via meta).
+    if ((field.enum && field.enum.length > 0) || (field['x-enumOptions'] && field['x-enumOptions'].length > 0)) {
+        const rich = field['x-enumOptions'];
+        const options = rich
+            ? rich.map((o) => ({ value: o.value, label: o.description ? `${o.label} — ${o.description}` : o.label }))
+            : (field.enum ?? []);
+        const withPlaceholder = required
+            ? options
+            : [{ value: '', label: '— select —' }, ...options];
+        return (_jsx(ChoicePicker, { options: withPlaceholder, value: String(value ?? field.default ?? ''), onChange: (v) => onChange(v), label: meta?.label, hint: meta?.hint, error: meta?.error, required: meta?.required, typeTag: meta?.typeTag }));
+    }
+    if (type === 'boolean') {
+        return (_jsx(CheckBox, { value: Boolean(value ?? field.default ?? false), onChange: (v) => onChange(v), label: meta?.label, hint: meta?.hint, error: meta?.error, required: meta?.required }));
+    }
+    if (type === 'number' || type === 'integer') {
+        return (_jsx(TextField, { type: "number", value: value !== undefined ? String(value) : '', min: field.minimum, max: field.maximum, onChange: (s) => onChange(s === '' ? undefined : Number(s)), label: meta?.label, hint: meta?.hint, error: meta?.error, required: meta?.required, typeTag: meta?.typeTag }));
+    }
+    if (type === 'color') {
+        return (_jsx(TextField, { type: "color", value: value !== undefined ? String(value) : '', min: field.minimum, max: field.maximum, onChange: (s) => onChange(s === '' ? undefined : Number(s)), label: meta?.label, hint: meta?.hint, error: meta?.error, required: meta?.required, typeTag: meta?.typeTag }));
+    }
+    if (type === 'array') {
+        return _jsx(ArrayControl, { field: field, value: value, onChange: onChange, namespace: namespace, formatRenderers: formatRenderers, jsonTextFields: jsonTextFields });
+    }
+    if (type === 'object') {
+        return (_jsx(SchemaForm, { schema: { type: 'object', properties: field.properties ?? {}, required: field.required ?? [] }, value: isObjectRecord(value) ? value : {}, onChange: (next) => onChange(next), namespace: namespace, formatRenderers: formatRenderers, jsonTextRoot: jsonTextFields }));
+    }
+    // string (default), with password + textarea variants.
+    const rows = textareaRows(field);
+    return (_jsx(TextField, { type: field.format === 'password' ? 'password' : 'text', multiline: rows !== null, rows: rows ?? undefined, value: String(value ?? field.default ?? ''), onChange: (s) => onChange(s), label: meta?.label, hint: meta?.hint, error: meta?.error, required: meta?.required, typeTag: meta?.typeTag }));
+}
+function ArrayControl({ field, value, onChange, namespace, formatRenderers, jsonTextFields }) {
+    const items = Array.isArray(value) ? value : [];
+    const itemSchema = resolveArrayItemSchema(field);
+    // Tuple arrays — edited as raw JSON.
+    if (!itemSchema) {
+        return (_jsx(TextField, { multiline: true, rows: 5, value: JSON.stringify(items, null, 2), onChange: (s) => {
+                try {
+                    const parsed = JSON.parse(s);
+                    if (Array.isArray(parsed))
+                        onChange(parsed);
+                }
+                catch {
+                    /* keep previous valid array */
+                }
+            } }));
+    }
+    return (_jsxs("div", { className: "oo-schema-form__array", children: [items.map((item, index) => (_jsxs("div", { className: "oo-schema-form__array-item", children: [_jsx("div", { className: "oo-schema-form__array-control", children: _jsx(SchemaControl, { field: itemSchema, value: item, onChange: (next) => onChange(items.map((it, i) => (i === index ? next : it))), namespace: namespace, formatRenderers: formatRenderers, jsonTextFields: jsonTextFields }) }), _jsx("button", { type: "button", className: "oo-schema-form__array-remove", onClick: () => onChange(items.filter((_, i) => i !== index)), "aria-label": "Remove item", children: NAMED_GLYPH.closePanel })] }, index))), _jsx("button", { type: "button", className: "oo-btn oo-schema-form__array-add", onClick: () => onChange([...items, defaultValueForSchema(itemSchema)]), children: "+ add item" })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type DangerZoneProps } from './DangerZone.js';
+export interface SettingsContainerProps {
+    children: ReactNode;
+    danger?: DangerZoneProps;
+    style?: CSSProperties;
+}
+export declare function SettingsContainer({ children, danger, style }: SettingsContainerProps): ReactNode;

package/dist/ui/forms/SettingsContainer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DangerZone } from './DangerZone.js';
+// Standard layout for a resource's Settings tab: the form, then an optional
+// DangerZone. Keeps every resource's Settings tab consistent without repeating
+// the wrapper + delete affordance.
+export function SettingsContainer({ children, danger, style }) {
+    return (_jsxs("div", { className: "oo-settings", style: { display: 'flex', flexDirection: 'column', gap: 24, ...style }, children: [children, danger ? _jsx(DangerZone, { ...danger }) : null] }));
+}

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

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

package/dist/ui/forms/catalog.js

@@ -0,0 +1,11 @@
+// Catalog registration for form components (dynamic import — no eager load).
+// FieldLabel / FieldError / FieldHint are internal parts of Field, not catalog
+// components — see ./index.ts.
+export const CATALOG_FORMS_MAP = [
+    { component: 'Form', category: 'page', renderer: { kind: 'react', load: () => import('./Form.js').then((m) => ({ default: m.Form })) } },
+    { component: 'Field', category: 'inline', renderer: { kind: 'react', load: () => import('./Field.js').then((m) => ({ default: m.Field })) } },
+    { component: 'FieldGroup', category: 'inline', renderer: { kind: 'react', load: () => import('./FieldGroup.js').then((m) => ({ default: m.FieldGroup })) } },
+    { component: 'FormSection', category: 'inline', renderer: { kind: 'react', load: () => import('./FormSection.js').then((m) => ({ default: m.FormSection })) } },
+    { component: 'FormActions', category: 'inline', renderer: { kind: 'react', load: () => import('./FormActions.js').then((m) => ({ default: m.FormActions })) } },
+    { component: 'SchemaForm', category: 'page', renderer: { kind: 'react', load: () => import('./SchemaForm.js').then((m) => ({ default: m.SchemaForm })) } },
+];

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

@@ -0,0 +1,19 @@
+export { Form, FormContext, useFormContext } from './Form.js';
+export type { FormProps, FormContextValue } from './Form.js';
+export { Field, FieldLabel, FieldError, FieldHint } from './Field.js';
+export type { FieldProps, FieldLabelProps, FieldErrorProps, FieldHintProps } from './Field.js';
+export { FieldGroup } from './FieldGroup.js';
+export type { FieldGroupProps } from './FieldGroup.js';
+export { FormSection } from './FormSection.js';
+export type { FormSectionProps } from './FormSection.js';
+export { FormActions } from './FormActions.js';
+export type { FormActionsProps, FormActionItem } from './FormActions.js';
+export { SchemaForm } from './SchemaForm.js';
+export type { SchemaFormProps, FormatRenderer, FormatRendererProps } from './SchemaForm.js';
+export { DangerZone } from './DangerZone.js';
+export type { DangerZoneProps } from './DangerZone.js';
+export { SettingsContainer } from './SettingsContainer.js';
+export type { SettingsContainerProps } from './SettingsContainer.js';
+export type { JsonSchemaField, JsonSchemaObject, EnumOption } from './schema-walk.js';
+export { LoginForm } from './LoginForm.js';
+export type { LoginFormProps } from './LoginForm.js';

package/dist/ui/forms/index.js

@@ -0,0 +1,12 @@
+// Direct-React re-exports. Catalog registration lives in ../catalog.ts.
+// FieldLabel / FieldError / FieldHint are internal parts of Field — exported
+// here for hand-composed forms, but NOT registered as catalog components.
+export { Form, FormContext, useFormContext } from './Form.js';
+export { Field, FieldLabel, FieldError, FieldHint } from './Field.js';
+export { FieldGroup } from './FieldGroup.js';
+export { FormSection } from './FormSection.js';
+export { FormActions } from './FormActions.js';
+export { SchemaForm } from './SchemaForm.js';
+export { DangerZone } from './DangerZone.js';
+export { SettingsContainer } from './SettingsContainer.js';
+export { LoginForm } from './LoginForm.js';

package/dist/ui/forms/schema-walk.d.ts

@@ -0,0 +1,50 @@
+export interface EnumOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+export interface JsonSchemaField {
+    type?: string | string[];
+    title?: string;
+    anyOf?: JsonSchemaField[];
+    oneOf?: JsonSchemaField[];
+    allOf?: JsonSchemaField[];
+    const?: unknown;
+    description?: string;
+    enum?: string[];
+    /** Rich enum options: label + optional description per option. */
+    'x-enumOptions'?: EnumOption[];
+    minimum?: number;
+    maximum?: number;
+    default?: unknown;
+    format?: string;
+    items?: JsonSchemaField | JsonSchemaField[];
+    properties?: Record<string, JsonSchemaField>;
+    required?: string[];
+    additionalProperties?: boolean;
+    /** Show this field only when a sibling field equals a value. */
+    'x-show-if'?: {
+        field: string;
+        value: unknown;
+    };
+    /** OAuth connect metadata — routed to a format renderer by the consumer. */
+    'x-oauth-slug'?: string;
+    'x-oauth-flow'?: 'pkce' | 'device';
+    /** Render this object field as a section header (FormSection). */
+    'x-header'?: boolean;
+}
+export interface JsonSchemaObject {
+    type?: string;
+    properties?: Record<string, JsonSchemaField>;
+    required?: string[];
+    description?: string;
+}
+export declare function isObjectRecord(value: unknown): value is Record<string, unknown>;
+export declare function deepEqual(a: unknown, b: unknown): boolean;
+export declare function effectiveType(field: JsonSchemaField): string;
+export declare function resolveUnionOptions(field: JsonSchemaField): JsonSchemaField[];
+export declare function normalizeUnionOptions(field: JsonSchemaField): JsonSchemaField[];
+export declare function resolveArrayItemSchema(field: JsonSchemaField): JsonSchemaField | null;
+export declare function defaultValueForSchema(field: JsonSchemaField): unknown;
+export declare function cleanDescription(description?: string): string | undefined;
+export declare function textareaRows(field: JsonSchemaField): number | null;