@textui/widgets 0.1.0

package/dist/find.js

@@ -0,0 +1,102 @@
+import { useStoreValue } from '@textui/core';
+/**
+ * Finding things in text.
+ *
+ * The query lives in the store rather than in whatever component is showing
+ * the text, for the usual reason: a search box, a status bar counting matches
+ * and the viewer painting them are three things that have to agree, and the
+ * only way three things agree is by reading one answer.
+ *
+ * The matching itself is here and not in the editor because a viewer wants it
+ * too, and so will a results panel: given a string and a query, which spans
+ * matched. Nothing here knows what a caret is.
+ */
+export const FIND_ROOT = '$/ui/find';
+export const FIND_QUERY = `${FIND_ROOT}/query`;
+export const FIND_CASE = `${FIND_ROOT}/matchCase`;
+/** Bumped to ask whoever is showing the text to move to the next match. */
+export const FIND_STEP = `${FIND_ROOT}/step`;
+/**
+ * Every match in a document, in reading order.
+ *
+ * Overlapping matches are not a thing: a search steps past what it found, so
+ * `aa` in `aaaa` is two matches and not three. That is what every editor does
+ * and what "next" means when you press it twice.
+ */
+export function findMatches(text, query) {
+    const needle = query.matchCase === true ? query.text : query.text.toLowerCase();
+    if (needle === '')
+        return [];
+    const out = [];
+    const lines = text.split('\n');
+    for (let line = 0; line < lines.length; line++) {
+        const raw = lines[line];
+        const haystack = query.matchCase === true ? raw : raw.toLowerCase();
+        let at = haystack.indexOf(needle);
+        while (at !== -1) {
+            out.push({ line, start: at, end: at + needle.length });
+            at = haystack.indexOf(needle, at + needle.length);
+        }
+    }
+    return out;
+}
+/**
+ * The match a caret should go to next, wrapping at the end.
+ *
+ * From *after* the caret, not from the caret: pressing next while sitting on a
+ * match has to move, or "next" is a key that does nothing. Backwards is the
+ * mirror, and both wrap, because a search that stops at the end of the file is
+ * a search you have to restart by hand.
+ */
+export function stepMatch(matches, from, direction) {
+    if (matches.length === 0)
+        return -1;
+    if (direction === 1) {
+        const found = matches.findIndex((m) => m.line > from.line || (m.line === from.line && m.start > from.column));
+        return found === -1 ? 0 : found;
+    }
+    /*
+     * Backwards, from *before* the caret - and the caret is usually sitting at
+     * the end of the match it just stepped to, so "before" has to mean the match
+     * *ends* before it. Comparing starts instead finds the match the caret is
+     * standing in and calls that the previous one, which is a key that does
+     * nothing every other press.
+     */
+    for (let i = matches.length - 1; i >= 0; i--) {
+        const m = matches[i];
+        if (m.line < from.line || (m.line === from.line && m.end < from.column))
+            return i;
+    }
+    return matches.length - 1;
+}
+/** Which match the caret is sitting inside, or -1. */
+export function matchAt(matches, at) {
+    return matches.findIndex((m) => m.line === at.line && at.column >= m.start && at.column <= m.end);
+}
+export function readQuery(store) {
+    return {
+        text: store.get(FIND_QUERY) ?? '',
+        matchCase: store.get(FIND_CASE) === true,
+    };
+}
+export function setQuery(store, text) {
+    store.set(FIND_QUERY, text);
+}
+/**
+ * Ask whoever is showing the text to move.
+ *
+ * A counter rather than a command, so the thing that moves is the thing that
+ * knows where the caret is - and so two panels showing the same file each move
+ * their own.
+ */
+export function stepFind(store, direction) {
+    const at = store.get(FIND_STEP);
+    store.set(FIND_STEP, { n: (at?.n ?? 0) + 1, direction });
+}
+/** The current query, and the ask to move, for a component showing text. */
+export function useFind() {
+    const text = useStoreValue(FIND_QUERY, '') ?? '';
+    const matchCase = useStoreValue(FIND_CASE, false) === true;
+    const step = useStoreValue(FIND_STEP);
+    return { query: { text, matchCase }, step };
+}

package/dist/form/danger-zone.d.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@textui/core';
+export interface DangerZoneProps extends BoxProps {
+    title?: string;
+    description?: string;
+    actionLabel: string;
+    onAction?(): void;
+    /** Require typing this exact text before the action is enabled. */
+    confirmText?: string;
+}
+export declare const DangerZone: (props: DangerZoneProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=danger-zone.d.ts.map

package/dist/form/danger-zone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"danger-zone.d.ts","sourceRoot":"","sources":["../../src/form/danger-zone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,iEAoBrB,CAAC"}

package/dist/form/danger-zone.js

@@ -0,0 +1,15 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { Button } from '../control/index.js';
+export const DangerZone = defineComponent('DangerZone', (props) => {
+    const theme = useTheme();
+    const { title = 'Danger zone', description, actionLabel, onAction, confirmText, ...rest } = props;
+    return h('box', {
+        border: { style: theme.border, color: 'danger' },
+        padding: [0, 1],
+        direction: 'column',
+        title: ` ${title} `,
+        ...rest,
+    }, description ? h('text', { content: description, fg: 'muted', wrap: 'word' }) : null, confirmText
+        ? h('text', { content: `Type "${confirmText}" to confirm.`, fg: 'subtle' })
+        : null, h('box', { direction: 'row', justify: 'end' }, h(Button, { label: actionLabel, tone: 'danger', variant: 'outline', onPress: onAction })));
+});

package/dist/form/field.d.ts

@@ -0,0 +1,19 @@
+import type { BoxProps } from '@textui/core';
+export interface FieldProps extends BoxProps {
+    name: string;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    /** Cells reserved for the label, so a column of fields lines up. */
+    labelWidth?: number;
+    /** Label above the control rather than beside it. */
+    stacked?: boolean;
+}
+/**
+ * A labelled control with its error.
+ *
+ * The error line is always reserved when one could appear, so a form does not
+ * jump a row every time validation fires.
+ */
+export declare const Field: (props: FieldProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=field.d.ts.map

package/dist/form/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/form/field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,4DAuChB,CAAC"}

package/dist/form/field.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { useFormContext } from './shared.js';
+/**
+ * A labelled control with its error.
+ *
+ * The error line is always reserved when one could appear, so a form does not
+ * jump a row every time validation fires.
+ */
+export const Field = defineComponent('Field', (props) => {
+    const theme = useTheme();
+    const form = useFormContext();
+    const { name, label, hint, required, labelWidth, stacked, children, ...rest } = props;
+    const error = form.errorFor(name);
+    const labelNode = label
+        ? h('box', { direction: 'row', gap: 0, width: stacked ? undefined : labelWidth }, h('text', { content: label, fg: error ? 'danger' : 'muted' }), required ? h('text', { content: '*', fg: 'danger' }) : null)
+        : null;
+    return h('box', { direction: 'column', ...rest }, 
+    // Centred, so the label sits on the control's line of text rather than on
+    // the top edge of its frame.
+    //
+    // A row stretches its children, so a one-row label beside a three-row
+    // bordered input was drawn at the top of three rows - level with the
+    // border, one above the text it names. Borderless controls are one row
+    // and were fine, which is why a form mixing the two had half its labels
+    // aligned and half of them a row high.
+    h('box', {
+        direction: stacked ? 'column' : 'row',
+        gap: stacked ? 0 : 1,
+        ...(stacked ? {} : { align: 'center' }),
+    }, labelNode, h('box', { flex: 1 }, children)), error
+        ? h('box', { direction: 'row', gap: 1 }, stacked ? null : h('box', { width: labelWidth }), h('text', { content: theme.glyphs.warning, fg: 'danger' }), h('text', { content: error, fg: 'danger', wrap: 'word' }))
+        : hint
+            ? h('box', { direction: 'row', gap: 1 }, stacked ? null : h('box', { width: labelWidth }), h('text', { content: hint, fg: 'subtle' }))
+            : null);
+});

package/dist/form/form-actions.d.ts

@@ -0,0 +1,11 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface FormActionsProps extends BoxProps {
+    submitLabel?: string;
+    cancelLabel?: string;
+    onCancel?(): void;
+    tone?: SemanticVariant;
+    /** Disable submit until something changed. */
+    requireDirty?: boolean;
+}
+export declare const FormActions: (props: FormActionsProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=form-actions.d.ts.map

package/dist/form/form-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.d.ts","sourceRoot":"","sources":["../../src/form/form-actions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,kEAoBtB,CAAC"}

package/dist/form/form-actions.js

@@ -0,0 +1,16 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { Button } from '../control/index.js';
+import { useFormContext } from './shared.js';
+export const FormActions = defineComponent('FormActions', (props) => {
+    const theme = useTheme();
+    const form = useFormContext();
+    const { submitLabel = 'Submit', cancelLabel = 'Cancel', onCancel, tone = 'primary', requireDirty = false, ...rest } = props;
+    const blocked = form.submitting || (requireDirty && !form.dirty);
+    return h('box', { direction: 'row', gap: 1, justify: 'end', ...rest }, onCancel ? h(Button, { label: cancelLabel, onPress: onCancel }) : null, h(Button, {
+        label: form.submitting ? `${submitLabel}${theme.glyphs.ellipsis}` : submitLabel,
+        tone,
+        variant: 'solid',
+        disabled: blocked,
+        onPress: () => void form.submit(),
+    }));
+});

package/dist/form/form-section.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps } from '@textui/core';
+export interface FormSectionProps extends BoxProps {
+    title: string;
+    description?: string;
+}
+export declare const FormSection: (props: FormSectionProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=form-section.d.ts.map

package/dist/form/form-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../src/form/form-section.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,kEAOtB,CAAC"}

package/dist/form/form-section.js

@@ -0,0 +1,5 @@
+import { defineComponent, h } from '@textui/core';
+export const FormSection = defineComponent('FormSection', (props) => {
+    const { title, description, children, ...rest } = props;
+    return h('box', { direction: 'column', ...rest }, h('text', { content: title, bold: true }), description ? h('text', { content: description, fg: 'muted', wrap: 'word' }) : null, h('box', { direction: 'column' }, children));
+});

package/dist/form/form.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps } from '@textui/core';
+import type { FormApi } from './shared.js';
+export interface FormProps extends BoxProps {
+    form: FormApi<Record<string, unknown>>;
+}
+export declare const Form: (props: FormProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=form.d.ts.map

package/dist/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,IAAI,2DAGhB,CAAC"}

package/dist/form/form.js

@@ -0,0 +1,3 @@
+import { defineComponent, h } from '@textui/core';
+import { FormContext } from './shared.js';
+export const Form = defineComponent('Form', ({ form, children, ...rest }) => h(FormContext.Provider, { value: form }, h('box', { role: 'form', direction: 'column', ...rest }, children)));

package/dist/form/index.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentDefinition } from '@textui/core';
+import type { FormApi, FormErrors } from './shared.js';
+/**
+ * Forms and validation.
+ *
+ * Validation runs on a whole values object rather than per field, because the
+ * rules people actually need are cross-field - "confirm must match password",
+ * "end must be after start" - and a per-field validator cannot see its
+ * siblings. Fields subscribe to the errors that name them.
+ */
+export * from './danger-zone.js';
+export * from './field.js';
+export * from './form.js';
+export * from './form-actions.js';
+export * from './form-section.js';
+export type { FormApi, FormErrors, FormState } from './shared.js';
+export { useFormContext } from './shared.js';
+export type Validator<T> = (values: T) => FormErrors<T> | null;
+export interface UseFormOptions<T extends Record<string, unknown>> {
+    initialValues: T;
+    validate?: Validator<T>;
+    onSubmit?(values: T): void | Promise<void>;
+}
+export declare function useForm<T extends Record<string, unknown>>(options: UseFormOptions<T>): FormApi<T>;
+/** Small composable validators, because every form needs the same four. */
+export declare const validators: {
+    required: (message?: string) => (value: unknown) => string | undefined;
+    minLength: (n: number, message?: string) => (value: unknown) => string | undefined;
+    maxLength: (n: number, message?: string) => (value: unknown) => string | undefined;
+    pattern: (re: RegExp, message?: string) => (value: unknown) => string | undefined;
+    range: (min: number, max: number, message?: string) => (value: unknown) => string | undefined;
+};
+/**
+ * Build a whole-form validator from per-field rules.
+ *
+ * Returns the error map rather than `FormErrors | null`, so it composes: a
+ * caller can take the result, add a cross-field rule, and hand the whole thing
+ * to `useForm` without a null check in between.
+ */
+export declare function fieldValidators<T extends Record<string, unknown>>(rules: Partial<Record<keyof T & string, ((value: unknown) => string | undefined)[]>>): (values: T) => FormErrors<T>;
+export declare const FORM_COMPONENTS: ComponentDefinition[];
+//# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOxD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD;;;;;;;GAOG;AACH,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;AAE/D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,aAAa,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5C;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvD,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GACzB,OAAO,CAAC,CAAC,CAAC,CAyFZ;AAID,2EAA2E;AAC3E,eAAO,MAAM,UAAU;qCAElB,OAAO,OAAO,KAAG,MAAM,GAAG,SAAS;mBAGvB,MAAM,YAAY,MAAM,MACpC,OAAO,OAAO,KAAG,MAAM,GAAG,SAAS;mBAKvB,MAAM,YAAY,MAAM,MACpC,OAAO,OAAO,KAAG,MAAM,GAAG,SAAS;kBAKxB,MAAM,wBACjB,OAAO,OAAO,KAAG,MAAM,GAAG,SAAS;iBAGzB,MAAM,OAAO,MAAM,YAAY,MAAM,MAC/C,OAAO,OAAO,KAAG,MAAM,GAAG,SAAS;CAMvC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC,CAAC,GACnF,CAAC,MAAM,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAc9B;AAED,eAAO,MAAM,eAAe,EAAE,mBAAmB,EAMhD,CAAC"}

package/dist/form/index.js

@@ -0,0 +1,140 @@
+import { useCallback, useMemo, useState } from '@textui/core';
+import { DangerZone } from './danger-zone.js';
+import { Field } from './field.js';
+import { FormActions } from './form-actions.js';
+import { FormSection } from './form-section.js';
+import { Form } from './form.js';
+/**
+ * Forms and validation.
+ *
+ * Validation runs on a whole values object rather than per field, because the
+ * rules people actually need are cross-field - "confirm must match password",
+ * "end must be after start" - and a per-field validator cannot see its
+ * siblings. Fields subscribe to the errors that name them.
+ */
+export * from './danger-zone.js';
+export * from './field.js';
+export * from './form.js';
+export * from './form-actions.js';
+export * from './form-section.js';
+export { useFormContext } from './shared.js';
+export function useForm(options) {
+    const [values, setValuesState] = useState(options.initialValues);
+    // Validate the initial values immediately: a form whose required fields are
+    // empty is not valid, and reporting it as valid until the first keystroke
+    // makes `form.valid` useless for enabling a submit button.
+    const [errors, setErrors] = useState(() => options.validate?.(options.initialValues) ?? {});
+    const [touched, setTouched] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const [initial] = useState(options.initialValues);
+    const runValidation = useCallback((next) => options.validate?.(next) ?? {}, [options.validate]);
+    const setValue = (field, value) => {
+        const next = { ...values, [field]: value };
+        setValuesState(next);
+        // Re-validate as they type, but only surface what they have touched.
+        setErrors(runValidation(next));
+    };
+    const dirty = useMemo(() => JSON.stringify(values) !== JSON.stringify(initial), [values, initial]);
+    const api = {
+        values,
+        errors,
+        touched,
+        submitting,
+        submitted,
+        valid: Object.keys(errors).length === 0,
+        dirty,
+        setValue,
+        setValues(patch) {
+            const next = { ...values, ...patch };
+            setValuesState(next);
+            setErrors(runValidation(next));
+        },
+        setError(field, message) {
+            setErrors({ ...errors, [field]: message });
+        },
+        touch(field) {
+            if (touched[field])
+                return;
+            setTouched({ ...touched, [field]: true });
+        },
+        reset(next) {
+            setValuesState(next ?? initial);
+            setErrors({});
+            setTouched({});
+            setSubmitted(false);
+        },
+        validate() {
+            const found = runValidation(values);
+            setErrors(found);
+            return Object.keys(found).length === 0;
+        },
+        async submit() {
+            const found = runValidation(values);
+            setErrors(found);
+            // Submitting reveals every error, touched or not.
+            setTouched(Object.keys(values).reduce((acc, key) => ({ ...acc, [key]: true }), {}));
+            if (Object.keys(found).length > 0)
+                return;
+            setSubmitting(true);
+            try {
+                await options.onSubmit?.(values);
+                setSubmitted(true);
+            }
+            finally {
+                setSubmitting(false);
+            }
+        },
+        errorFor(field) {
+            return touched[field] || submitted ? errors[field] : undefined;
+        },
+    };
+    return api;
+}
+// ------------------------------------------------------------- validators
+/** Small composable validators, because every form needs the same four. */
+export const validators = {
+    required: (message = 'Required') => (value) => value === undefined || value === null || value === '' ? message : undefined,
+    minLength: (n, message) => (value) => typeof value === 'string' && value.length < n
+        ? message ?? `Must be at least ${n} characters`
+        : undefined,
+    maxLength: (n, message) => (value) => typeof value === 'string' && value.length > n
+        ? message ?? `Must be at most ${n} characters`
+        : undefined,
+    pattern: (re, message = 'Invalid format') => (value) => typeof value === 'string' && value !== '' && !re.test(value) ? message : undefined,
+    range: (min, max, message) => (value) => {
+        const n = Number(value);
+        return Number.isNaN(n) || n < min || n > max
+            ? message ?? `Must be between ${min} and ${max}`
+            : undefined;
+    },
+};
+/**
+ * Build a whole-form validator from per-field rules.
+ *
+ * Returns the error map rather than `FormErrors | null`, so it composes: a
+ * caller can take the result, add a cross-field rule, and hand the whole thing
+ * to `useForm` without a null check in between.
+ */
+export function fieldValidators(rules) {
+    return (values) => {
+        const errors = {};
+        for (const [field, checks] of Object.entries(rules)) {
+            for (const check of checks ?? []) {
+                const message = check(values[field]);
+                if (message) {
+                    errors[field] = message;
+                    break;
+                }
+            }
+        }
+        return errors;
+    };
+}
+export const FORM_COMPONENTS = [
+    { component: 'Form', category: 'form', renderer: { kind: 'function', render: Form }, role: 'form', description: 'Provides form state to its fields.' },
+    { component: 'Field', category: 'form', renderer: { kind: 'function', render: Field }, description: 'Label, control and error, aligned.' },
+    { component: 'FormSection', category: 'form', renderer: { kind: 'function', render: FormSection }, description: 'A titled group of fields.' },
+    { component: 'FormActions', category: 'form', renderer: { kind: 'function', render: FormActions }, description: 'Submit and cancel.' },
+    { component: 'DangerZone', category: 'form', renderer: { kind: 'function', render: DangerZone }, description: 'Destructive action, fenced off.' },
+];

package/dist/form/shared.d.ts

@@ -0,0 +1,25 @@
+export type FormErrors<T> = Partial<Record<keyof T & string, string>>;
+export interface FormState<T extends Record<string, unknown>> {
+    values: T;
+    errors: FormErrors<T>;
+    /** Fields the user has interacted with. Errors show only for these. */
+    touched: Partial<Record<keyof T & string, boolean>>;
+    submitting: boolean;
+    submitted: boolean;
+    valid: boolean;
+    dirty: boolean;
+}
+export interface FormApi<T extends Record<string, unknown>> extends FormState<T> {
+    setValue<K extends keyof T & string>(field: K, value: T[K]): void;
+    setValues(values: Partial<T>): void;
+    setError(field: keyof T & string, message: string | undefined): void;
+    touch(field: keyof T & string): void;
+    reset(values?: T): void;
+    validate(): boolean;
+    submit(): Promise<void>;
+    /** The error to show for a field: only after it has been touched. */
+    errorFor(field: keyof T & string): string | undefined;
+}
+export declare const FormContext: import("@textui/core").Context<FormApi<Record<string, unknown>> | null>;
+export declare function useFormContext<T extends Record<string, unknown>>(): FormApi<T>;
+//# sourceMappingURL=shared.d.ts.map

package/dist/form/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/form/shared.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEtE,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1D,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAClE,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACrE,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,QAAQ,IAAI,OAAO,CAAC;IACpB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,qEAAqE;IACrE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACvD;AAED,eAAO,MAAM,WAAW,yEAAuE,CAAC;AAEhG,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAM9E"}

package/dist/form/shared.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from '@textui/core';
+export const FormContext = createContext('Form', null);
+export function useFormContext() {
+    const form = useContext(FormContext);
+    if (!form) {
+        throw new Error('[textui] a Field must be rendered inside a Form');
+    }
+    return form;
+}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentDefinition, TextUIApp, Disposable } from '@textui/core';
+export * from './layout/index.js';
+export * from './display/index.js';
+export * from './control/index.js';
+export * from './form/index.js';
+export * from './data/index.js';
+export * from './navigation/index.js';
+export * from './overlay/index.js';
+export * from './chart/index.js';
+export * from './surface/index.js';
+export * from './shells/index.js';
+export * from './panel/index.js';
+export * from './decorations.js';
+export * from './find.js';
+export * from './viewport.js';
+export * from './tone.js';
+/** Every component the library ships, in one list. */
+export declare const CATALOG: ComponentDefinition[];
+/**
+ * Register the catalog, the surface layouts and the built-in shells.
+ *
+ * One call, because a half-registered catalog fails at mount time rather than
+ * at boot - and a runtime miss is much harder to read than a boot error.
+ */
+export declare function registerBuiltins(app: TextUIApp): Disposable;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAc/E,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAE1B,sDAAsD;AACtD,eAAO,MAAM,OAAO,EAAE,mBAAmB,EAaxC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,GAAG,UAAU,CAU3D"}

package/dist/index.js

@@ -0,0 +1,62 @@
+import { createBag, PRIMITIVES } from '@textui/core';
+import { LAYOUT_COMPONENTS } from './layout/index.js';
+import { DISPLAY_COMPONENTS } from './display/index.js';
+import { CONTROL_COMPONENTS } from './control/index.js';
+import { FORM_COMPONENTS } from './form/index.js';
+import { DATA_COMPONENTS } from './data/index.js';
+import { NAVIGATION_COMPONENTS } from './navigation/index.js';
+import { OVERLAY_COMPONENTS } from './overlay/index.js';
+import { CHART_COMPONENTS } from './chart/index.js';
+import { SURFACE_COMPONENTS, BUILTIN_LAYOUTS } from './surface/index.js';
+import { SHELL_COMPONENTS, BUILTIN_SHELLS } from './shells/index.js';
+import { PANEL_COMPONENTS, panelCommands } from './panel/index.js';
+export * from './layout/index.js';
+export * from './display/index.js';
+export * from './control/index.js';
+export * from './form/index.js';
+export * from './data/index.js';
+export * from './navigation/index.js';
+export * from './overlay/index.js';
+export * from './chart/index.js';
+export * from './surface/index.js';
+export * from './shells/index.js';
+export * from './panel/index.js';
+export * from './decorations.js';
+export * from './find.js';
+export * from './viewport.js';
+export * from './tone.js';
+/** Every component the library ships, in one list. */
+export const CATALOG = [
+    ...PRIMITIVES,
+    ...LAYOUT_COMPONENTS,
+    ...DISPLAY_COMPONENTS,
+    ...CONTROL_COMPONENTS,
+    ...FORM_COMPONENTS,
+    ...DATA_COMPONENTS,
+    ...NAVIGATION_COMPONENTS,
+    ...OVERLAY_COMPONENTS,
+    ...CHART_COMPONENTS,
+    ...SURFACE_COMPONENTS,
+    ...SHELL_COMPONENTS,
+    ...PANEL_COMPONENTS,
+];
+/**
+ * Register the catalog, the surface layouts and the built-in shells.
+ *
+ * One call, because a half-registered catalog fails at mount time rather than
+ * at boot - and a runtime miss is much harder to read than a boot error.
+ */
+export function registerBuiltins(app) {
+    const bag = createBag();
+    bag.add(app.components.registerMany(CATALOG));
+    for (const layout of BUILTIN_LAYOUTS)
+        bag.add(app.layouts.register(layout));
+    for (const shell of BUILTIN_SHELLS)
+        bag.add(app.shells.register(shell));
+    // The panel commands come with the panel: what they offer is read off the
+    // resource registry, so a host that mounts a panel has already said
+    // everything "open with" needs. Keys stay the host's choice.
+    for (const command of panelCommands(app))
+        bag.add(app.commands.register(command));
+    return bag;
+}

package/dist/layout/center.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps } from '@textui/core';
+export interface CenterProps extends BoxProps {
+    /** Centre horizontally, vertically, or both. */
+    axis?: 'both' | 'horizontal' | 'vertical';
+}
+export declare const Center: (props: CenterProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=center.d.ts.map

package/dist/layout/center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center.d.ts","sourceRoot":"","sources":["../../src/layout/center.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;CAC3C;AAED,eAAO,MAAM,MAAM,6DAQlB,CAAC"}

package/dist/layout/center.js

@@ -0,0 +1,8 @@
+import { defineComponent, h } from '@textui/core';
+export const Center = defineComponent('Center', ({ axis = 'both', ...props }) => h('box', {
+    flex: props.flex ?? 1,
+    direction: 'column',
+    justify: axis === 'horizontal' ? 'start' : 'center',
+    align: axis === 'vertical' ? 'stretch' : 'center',
+    ...props,
+}));

package/dist/layout/column.d.ts

@@ -0,0 +1,3 @@
+import type { BoxProps } from '@textui/core';
+export declare const Column: (props: BoxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=column.d.ts.map

package/dist/layout/column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../src/layout/column.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,eAAO,MAAM,MAAM,0DAElB,CAAC"}

package/dist/layout/column.js

@@ -0,0 +1,2 @@
+import { defineComponent, h } from '@textui/core';
+export const Column = defineComponent('Column', (props) => h('box', { direction: 'column', ...props }));

package/dist/layout/divider.d.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@textui/core';
+export interface DividerProps extends Omit<BoxProps, 'direction'> {
+    /** A divider runs across the flow, so it names its own axis. */
+    direction?: 'horizontal' | 'vertical';
+    /** Text set into the rule. */
+    label?: string;
+    labelAlign?: 'left' | 'center' | 'right';
+    char?: string;
+}
+export declare const Divider: (props: DividerProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=divider.d.ts.map