@hanzo/ui 8.27.10 → 8.27.12

package/dist/backends/gui/editor.d.ts

@@ -1,23 +1,23 @@
 /**
- * Editor — a rich-text surface: a toolbar of bold/italic/bulleted-list/numbered-list
- * toggles above a contentEditable region, reporting its HTML back on every edit.
+ * Editor — a minimal rich-text field: a toolbar of formatting buttons above a
+ * `contentEditable` surface.
  *
- * Formatting a live selection is a browser primitive with no cross-platform
- * equivalent in gui, so this wraps the two platform primitives directly —
- * `contentEditable` for the surface, `document.execCommand` for the commands —
- * inside a gui frame for layout and theming. It is web-only for that reason;
- * native has no selection to format.
+ * Bold, italic and the two list commands run through the browser's own
+ * `document.execCommand`, the one API that turns a toolbar click into a real
+ * selection edit inside a `contentEditable` region — there is no gui primitive
+ * for rich-text editing, so this wraps that platform primitive in a gui frame
+ * the way `CodeEditor` wraps a plain field. The surface is HTML: `value` and
+ * `onChange` carry the region's `innerHTML`, matching what the toolbar
+ * commands actually produce.
  */
 import { type YStackProps } from '@hanzo/gui';
 import * as React from 'react';
-/** The four formatting commands the toolbar issues via `document.execCommand`. */
 export type EditorCommand = 'bold' | 'italic' | 'insertUnorderedList' | 'insertOrderedList';
 export interface EditorProps extends Omit<YStackProps, 'children' | 'onChange'> {
-    /** A controlled value; omit it and edit freely to let the surface own its HTML. */
+    /** The region's HTML. Omit it and the region keeps its own content. */
     value?: string;
     onChange?: (value: string) => void;
     placeholder?: string;
-    readOnly?: boolean;
 }
-export declare function Editor({ value, onChange, placeholder, readOnly, ...props }: EditorProps): React.JSX.Element;
+export declare function Editor({ value, onChange, placeholder, ...props }: EditorProps): React.JSX.Element;
 //# sourceMappingURL=editor.d.ts.map

package/dist/backends/gui/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/editor.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,kFAAkF;AAClF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,qBAAqB,GAAG,mBAAmB,CAAA;AAE3F,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAC7E,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAA+B,EAAE,QAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBA0EnH"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/editor.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,qBAAqB,GAAG,mBAAmB,CAAA;AAE3F,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAC7E,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAA+B,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBA6EjG"}

package/dist/backends/gui/editor.js

@@ -1,45 +1,49 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Editor — a rich-text surface: a toolbar of bold/italic/bulleted-list/numbered-list
- * toggles above a contentEditable region, reporting its HTML back on every edit.
+ * Editor — a minimal rich-text field: a toolbar of formatting buttons above a
+ * `contentEditable` surface.
  *
- * Formatting a live selection is a browser primitive with no cross-platform
- * equivalent in gui, so this wraps the two platform primitives directly —
- * `contentEditable` for the surface, `document.execCommand` for the commands —
- * inside a gui frame for layout and theming. It is web-only for that reason;
- * native has no selection to format.
+ * Bold, italic and the two list commands run through the browser's own
+ * `document.execCommand`, the one API that turns a toolbar click into a real
+ * selection edit inside a `contentEditable` region — there is no gui primitive
+ * for rich-text editing, so this wraps that platform primitive in a gui frame
+ * the way `CodeEditor` wraps a plain field. The surface is HTML: `value` and
+ * `onChange` carry the region's `innerHTML`, matching what the toolbar
+ * commands actually produce.
  */
 import { XStack, YStack } from '@hanzo/gui';
 import { Bold, Italic, List, ListOrdered } from '@hanzogui/lucide-icons-2';
 import * as React from 'react';
 import { Button } from './button.js';
 import { slot } from './slot.js';
-export function Editor({ value, onChange, placeholder = 'Start typing...', readOnly = false, ...props }) {
-    const surface = React.useRef(null);
-    const [empty, setEmpty] = React.useState(!value);
-    // A controlled value is written into the surface only when it changes out
-    // from under the caller (e.g. a reset button) — writing it on every render
-    // would fight the surface's own DOM as the user types and jump the caret.
+export function Editor({ value, onChange, placeholder = 'Start typing...', ...props }) {
+    const field = React.useRef(null);
+    const shown = React.useRef(value);
+    const run = (command) => {
+        document.execCommand(command, false);
+        field.current?.focus();
+    };
+    const input = () => {
+        if (field.current)
+            onChange?.(field.current.innerHTML);
+    };
+    // A controlled `value` is only ever WRITTEN into the region when it changed
+    // out from under the caller — writing it on every render would reset the
+    // caret to the start on each keystroke, because `innerHTML` replaces the
+    // whole subtree rather than patching it.
     React.useEffect(() => {
-        const el = surface.current;
-        if (el && value !== undefined && value !== el.innerHTML)
-            el.innerHTML = value;
+        if (field.current && value !== undefined && value !== shown.current) {
+            field.current.innerHTML = value;
+        }
+        shown.current = value;
     }, [value]);
-    const report = React.useCallback(() => {
-        const el = surface.current;
-        if (!el)
-            return;
-        setEmpty(el.textContent === '');
-        onChange?.(el.innerHTML);
-    }, [onChange]);
-    const command = (name) => () => {
-        document.execCommand(name);
-        surface.current?.focus();
-        report();
-    };
-    return (_jsxs(YStack, { ...slot('editor'), gap: "$2", ...props, children: [_jsxs(XStack, { ...slot('editor-toolbar'), gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", pb: "$2", children: [_jsx(Button, { ...slot('editor-bold'), variant: "ghost", size: "icon-sm", type: "button", onClick: command('bold'), "aria-label": "Bold", children: _jsx(Bold, { size: 16 }) }), _jsx(Button, { ...slot('editor-italic'), variant: "ghost", size: "icon-sm", type: "button", onClick: command('italic'), "aria-label": "Italic", children: _jsx(Italic, { size: 16 }) }), _jsx(Button, { ...slot('editor-bullet-list'), variant: "ghost", size: "icon-sm", type: "button", onClick: command('insertUnorderedList'), "aria-label": "Bulleted list", children: _jsx(List, { size: 16 }) }), _jsx(Button, { ...slot('editor-ordered-list'), variant: "ghost", size: "icon-sm", type: "button", onClick: command('insertOrderedList'), "aria-label": "Numbered list", children: _jsx(ListOrdered, { size: 16 }) })] }), _jsx(YStack, { ...slot('editor-surface'), ref: surface, 
-                // @ts-expect-error — contentEditable is a DOM attribute gui does not type; it forwards unknown props on web and drops them on native
-                contentEditable: !readOnly, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-empty": empty || undefined, minH: 200, borderWidth: 1, borderColor: "$borderColor", rounded: "$3", p: "$4", onInput: report, dangerouslySetInnerHTML: value === undefined ? { __html: '' } : undefined, style: { outline: 'none' } })] }));
+    return (_jsxs(YStack, { ...slot('editor'), gap: "$2", ...props, children: [_jsxs(XStack, { ...slot('editor-toolbar'), items: "center", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", pb: "$2", children: [_jsx(Button, { ...slot('editor-bold'), variant: "ghost", size: "sm", type: "button", onClick: () => run('bold'), children: _jsx(Bold, { size: 16 }) }), _jsx(Button, { ...slot('editor-italic'), variant: "ghost", size: "sm", type: "button", onClick: () => run('italic'), children: _jsx(Italic, { size: 16 }) }), _jsx(Button, { ...slot('editor-bullet-list'), variant: "ghost", size: "sm", type: "button", onClick: () => run('insertUnorderedList'), children: _jsx(List, { size: 16 }) }), _jsx(Button, { ...slot('editor-ordered-list'), variant: "ghost", size: "sm", type: "button", onClick: () => run('insertOrderedList'), children: _jsx(ListOrdered, { size: 16 }) })] }), _jsx("div", { ref: field, ...slot('editor-content'), contentEditable: true, onInput: input, "data-placeholder": placeholder, suppressContentEditableWarning: true, dangerouslySetInnerHTML: value === undefined ? undefined : { __html: value }, style: {
+                    minHeight: 200,
+                    borderRadius: 8,
+                    border: '1px solid var(--borderColor)',
+                    padding: 16,
+                    outline: 'none',
+                } })] }));
 }
 //# sourceMappingURL=editor.js.map

package/dist/backends/gui/editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../src/backends/gui/editor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../src/backends/gui/editor.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/field.cjs

@@ -0,0 +1,132 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldGroup = exports.FieldContent = void 0;
+exports.Field = Field;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldLabel = FieldLabel;
+exports.FieldLegend = FieldLegend;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldTitle = FieldTitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Field — the parts a form composes a labeled control from.
+ *
+ * `FieldSet`/`FieldLegend` group related fields inside a real `<fieldset>` so
+ * keyboard and screen-reader users get the grouping for free. `FieldGroup`
+ * stacks `Field`s with one rhythm. `Field` is the per-control wrapper —
+ * `role="group"`, an `orientation` (vertical / horizontal / responsive), and a
+ * `data-invalid` switch that turns the whole block destructive-colored so a
+ * sighted user and a screen reader see the same boundary. `FieldContent` keeps
+ * a label and its description together when the label sits beside the control.
+ * `FieldLabel` also doubles as a selectable "choice card" when its only child
+ * is a `Field` — border, radius and padding appear around it.
+ * `FieldTitle`/`FieldDescription`/`FieldError` are the text leaves;
+ * `FieldSeparator` divides a `FieldGroup`.
+ *
+ * `responsive` is mobile-first like `vertical` already is: a column below
+ * `$md`, a row from `$md` up — this config's media props are min-width (see
+ * the compiled `@media (min-width: …)` any `$md` prop emits), so there are no
+ * container queries to reach for and none are needed: the same direction every
+ * other responsive prop in this codebase is written in.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const box_1 = require("../../box.cjs");
+const label_1 = require("./label.cjs");
+const layout_1 = require("./layout.cjs");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+function FieldSet({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "fieldset", className: "flex flex-col gap-6", ...(0, slot_1.slot)('field-set'), ...props, children: children }));
+}
+function FieldLegend({ variant = 'legend', children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "legend", className: variant === 'label' ? 'mb-3 text-sm font-medium' : 'mb-3 text-base font-medium', ...(0, slot_1.slot)('field-legend'), "data-variant": variant, ...props, children: children }));
+}
+const FieldGroup = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'FieldGroup',
+    width: '100%',
+    gap: '$7',
+});
+exports.FieldGroup = FieldGroup;
+const FieldContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({
+    orientation: 'vertical',
+});
+const FieldFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Field',
+    context: FieldContext,
+    width: '100%',
+    gap: '$3',
+    variants: {
+        orientation: {
+            vertical: { flexDirection: 'column' },
+            horizontal: { flexDirection: 'row', items: 'center' },
+            // Mobile-first, the way `vertical` already is: a column below `$md`,
+            // a row from `$md` up — this config's media props are min-width, so the
+            // base case is the narrow one and `$md` is where it widens.
+            responsive: {
+                flexDirection: 'column',
+                $md: { flexDirection: 'row', items: 'center' },
+            },
+        },
+        invalid: {
+            true: { color: '$red9' },
+        },
+    },
+    defaultVariants: { orientation: 'vertical' },
+});
+function Field({ orientation = 'vertical', ...props }) {
+    const invalid = props['data-invalid'];
+    return ((0, jsx_runtime_1.jsx)(FieldFrame, { role: "group", ...(0, slot_1.slot)('field'), "data-orientation": orientation, orientation: orientation, invalid: invalid, ...props }));
+}
+const FieldContent = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'FieldContent',
+    flex: 1,
+    gap: '$1.5',
+});
+exports.FieldContent = FieldContent;
+/** A `Field` nested directly inside a `FieldLabel` reads as a choice card. */
+const isFieldChild = (children) => (0, react_1.isValidElement)(children) && children.type === Field;
+function FieldLabel({ className, children, ...props }) {
+    const card = isFieldChild(children);
+    return ((0, jsx_runtime_1.jsx)(label_1.Label, { ...(0, slot_1.slot)('field-label'), gap: "$2", ...(card
+            ? {
+                width: '100%',
+                flexDirection: 'column',
+                rounded: '$3',
+                borderWidth: 1,
+                borderColor: '$borderColor',
+                p: '$4',
+            }
+            : { self: 'flex-start' }), className: className, ...props, children: children }));
+}
+function FieldTitle({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('field-label'), self: "flex-start", items: "center", gap: "$2", ...props, children: (0, ink_1.ink)(children, gui_1.SizableText, { fontSize: '$2', fontWeight: '500' }) }));
+}
+function FieldDescription({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('field-description'), fontSize: "$2", fontWeight: "400", color: "$quiet", ...props, children: children }));
+}
+function FieldSeparator({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('field-separator'), "data-content": !!children, items: "center", gap: "$2", ...props, children: [(0, jsx_runtime_1.jsx)(layout_1.Separator, { flex: 1 }), children && ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('field-separator-content'), color: "$quiet", fontSize: "$2", children: children })), children && (0, jsx_runtime_1.jsx)(layout_1.Separator, { flex: 1 })] }));
+}
+function fieldErrorContent(children, errors, issues) {
+    if (children)
+        return children;
+    const list = errors ?? issues;
+    if (!list)
+        return null;
+    const messages = list.filter((e) => !!e?.message);
+    if (messages.length === 0)
+        return null;
+    if (messages.length === 1)
+        return messages[0].message;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "ul", className: "ml-4 flex flex-col gap-1", style: { listStyleType: 'disc' }, ...(0, slot_1.slot)('field-error-list'), children: messages.map((error, index) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "li", className: "text-sm text-red9", children: error.message }, index))) }));
+}
+function FieldError({ children, errors, issues, ...props }) {
+    const content = fieldErrorContent(children, errors, issues);
+    if (!content)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { role: "alert", ...(0, slot_1.slot)('field-error'), ...props, children: (0, ink_1.ink)(content, gui_1.SizableText, { fontSize: '$2', fontWeight: '400', color: '$red9' }) }));
+}

package/dist/backends/gui/field.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Field — the parts a form composes a labeled control from.
+ *
+ * `FieldSet`/`FieldLegend` group related fields inside a real `<fieldset>` so
+ * keyboard and screen-reader users get the grouping for free. `FieldGroup`
+ * stacks `Field`s with one rhythm. `Field` is the per-control wrapper —
+ * `role="group"`, an `orientation` (vertical / horizontal / responsive), and a
+ * `data-invalid` switch that turns the whole block destructive-colored so a
+ * sighted user and a screen reader see the same boundary. `FieldContent` keeps
+ * a label and its description together when the label sits beside the control.
+ * `FieldLabel` also doubles as a selectable "choice card" when its only child
+ * is a `Field` — border, radius and padding appear around it.
+ * `FieldTitle`/`FieldDescription`/`FieldError` are the text leaves;
+ * `FieldSeparator` divides a `FieldGroup`.
+ *
+ * `responsive` is mobile-first like `vertical` already is: a column below
+ * `$md`, a row from `$md` up — this config's media props are min-width (see
+ * the compiled `@media (min-width: …)` any `$md` prop emits), so there are no
+ * container queries to reach for and none are needed: the same direction every
+ * other responsive prop in this codebase is written in.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+import { Label } from './label.js';
+export type FieldOrientation = 'vertical' | 'horizontal' | 'responsive';
+export type FieldLegendVariant = 'legend' | 'label';
+declare function FieldSet({ children, ...props }: ComponentProps<'fieldset'>): import("react").JSX.Element;
+export type FieldSetProps = ComponentProps<typeof FieldSet>;
+declare function FieldLegend({ variant, children, ...props }: ComponentProps<'legend'> & {
+    variant?: FieldLegendVariant;
+}): import("react").JSX.Element;
+export type FieldLegendProps = ComponentProps<typeof FieldLegend>;
+declare const FieldGroup: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type FieldGroupProps = ComponentProps<typeof FieldGroup>;
+declare const FieldFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    invalid?: boolean | undefined;
+    orientation?: "horizontal" | "responsive" | "vertical" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type FieldProps = Omit<ComponentProps<typeof FieldFrame>, 'orientation'> & {
+    orientation?: FieldOrientation;
+    'data-invalid'?: boolean;
+};
+declare function Field({ orientation, ...props }: FieldProps): import("react").JSX.Element;
+declare const FieldContent: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type FieldContentProps = ComponentProps<typeof FieldContent>;
+declare function FieldLabel({ className, children, ...props }: ComponentProps<typeof Label>): import("react").JSX.Element;
+export type FieldLabelProps = ComponentProps<typeof FieldLabel>;
+declare function FieldTitle({ children, ...props }: ComponentProps<typeof XStack>): import("react").JSX.Element;
+export type FieldTitleProps = ComponentProps<typeof FieldTitle>;
+declare function FieldDescription({ children, ...props }: ComponentProps<typeof SizableText>): import("react").JSX.Element;
+export type FieldDescriptionProps = ComponentProps<typeof FieldDescription>;
+declare function FieldSeparator({ children, ...props }: ComponentProps<typeof XStack> & {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export type FieldSeparatorProps = ComponentProps<typeof FieldSeparator>;
+export type FieldErrorIssue = {
+    message?: string;
+};
+export type FieldErrorProps = ComponentProps<typeof XStack> & {
+    errors?: Array<FieldErrorIssue | undefined>;
+    /** Issues from any [Standard Schema](https://standardschema.dev/) validator. */
+    issues?: Array<FieldErrorIssue | undefined>;
+};
+declare function FieldError({ children, errors, issues, ...props }: FieldErrorProps): import("react").JSX.Element | null;
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
+//# sourceMappingURL=field.d.ts.map

package/dist/backends/gui/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/field.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/field.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Field — the parts a form composes a labeled control from.
+ *
+ * `FieldSet`/`FieldLegend` group related fields inside a real `<fieldset>` so
+ * keyboard and screen-reader users get the grouping for free. `FieldGroup`
+ * stacks `Field`s with one rhythm. `Field` is the per-control wrapper —
+ * `role="group"`, an `orientation` (vertical / horizontal / responsive), and a
+ * `data-invalid` switch that turns the whole block destructive-colored so a
+ * sighted user and a screen reader see the same boundary. `FieldContent` keeps
+ * a label and its description together when the label sits beside the control.
+ * `FieldLabel` also doubles as a selectable "choice card" when its only child
+ * is a `Field` — border, radius and padding appear around it.
+ * `FieldTitle`/`FieldDescription`/`FieldError` are the text leaves;
+ * `FieldSeparator` divides a `FieldGroup`.
+ *
+ * `responsive` is mobile-first like `vertical` already is: a column below
+ * `$md`, a row from `$md` up — this config's media props are min-width (see
+ * the compiled `@media (min-width: …)` any `$md` prop emits), so there are no
+ * container queries to reach for and none are needed: the same direction every
+ * other responsive prop in this codebase is written in.
+ */
+import { SizableText, XStack, YStack, createStyledContext, styled } from '@hanzo/gui';
+import { isValidElement } from 'react';
+import { Box } from '../../box.js';
+import { Label } from './label.js';
+import { Separator } from './layout.js';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+function FieldSet({ children, ...props }) {
+    return (_jsx(Box, { tag: "fieldset", className: "flex flex-col gap-6", ...slot('field-set'), ...props, children: children }));
+}
+function FieldLegend({ variant = 'legend', children, ...props }) {
+    return (_jsx(Box, { tag: "legend", className: variant === 'label' ? 'mb-3 text-sm font-medium' : 'mb-3 text-base font-medium', ...slot('field-legend'), "data-variant": variant, ...props, children: children }));
+}
+const FieldGroup = styled(YStack, {
+    name: 'FieldGroup',
+    width: '100%',
+    gap: '$7',
+});
+const FieldContext = /* @__PURE__ */ createStyledContext({
+    orientation: 'vertical',
+});
+const FieldFrame = styled(XStack, {
+    name: 'Field',
+    context: FieldContext,
+    width: '100%',
+    gap: '$3',
+    variants: {
+        orientation: {
+            vertical: { flexDirection: 'column' },
+            horizontal: { flexDirection: 'row', items: 'center' },
+            // Mobile-first, the way `vertical` already is: a column below `$md`,
+            // a row from `$md` up — this config's media props are min-width, so the
+            // base case is the narrow one and `$md` is where it widens.
+            responsive: {
+                flexDirection: 'column',
+                $md: { flexDirection: 'row', items: 'center' },
+            },
+        },
+        invalid: {
+            true: { color: '$red9' },
+        },
+    },
+    defaultVariants: { orientation: 'vertical' },
+});
+function Field({ orientation = 'vertical', ...props }) {
+    const invalid = props['data-invalid'];
+    return (_jsx(FieldFrame, { role: "group", ...slot('field'), "data-orientation": orientation, orientation: orientation, invalid: invalid, ...props }));
+}
+const FieldContent = styled(YStack, {
+    name: 'FieldContent',
+    flex: 1,
+    gap: '$1.5',
+});
+/** A `Field` nested directly inside a `FieldLabel` reads as a choice card. */
+const isFieldChild = (children) => isValidElement(children) && children.type === Field;
+function FieldLabel({ className, children, ...props }) {
+    const card = isFieldChild(children);
+    return (_jsx(Label, { ...slot('field-label'), gap: "$2", ...(card
+            ? {
+                width: '100%',
+                flexDirection: 'column',
+                rounded: '$3',
+                borderWidth: 1,
+                borderColor: '$borderColor',
+                p: '$4',
+            }
+            : { self: 'flex-start' }), className: className, ...props, children: children }));
+}
+function FieldTitle({ children, ...props }) {
+    return (_jsx(XStack, { ...slot('field-label'), self: "flex-start", items: "center", gap: "$2", ...props, children: ink(children, SizableText, { fontSize: '$2', fontWeight: '500' }) }));
+}
+function FieldDescription({ children, ...props }) {
+    return (_jsx(SizableText, { ...slot('field-description'), fontSize: "$2", fontWeight: "400", color: "$quiet", ...props, children: children }));
+}
+function FieldSeparator({ children, ...props }) {
+    return (_jsxs(XStack, { ...slot('field-separator'), "data-content": !!children, items: "center", gap: "$2", ...props, children: [_jsx(Separator, { flex: 1 }), children && (_jsx(SizableText, { ...slot('field-separator-content'), color: "$quiet", fontSize: "$2", children: children })), children && _jsx(Separator, { flex: 1 })] }));
+}
+function fieldErrorContent(children, errors, issues) {
+    if (children)
+        return children;
+    const list = errors ?? issues;
+    if (!list)
+        return null;
+    const messages = list.filter((e) => !!e?.message);
+    if (messages.length === 0)
+        return null;
+    if (messages.length === 1)
+        return messages[0].message;
+    return (_jsx(Box, { tag: "ul", className: "ml-4 flex flex-col gap-1", style: { listStyleType: 'disc' }, ...slot('field-error-list'), children: messages.map((error, index) => (_jsx(Box, { tag: "li", className: "text-sm text-red9", children: error.message }, index))) }));
+}
+function FieldError({ children, errors, issues, ...props }) {
+    const content = fieldErrorContent(children, errors, issues);
+    if (!content)
+        return null;
+    return (_jsx(XStack, { role: "alert", ...slot('field-error'), ...props, children: ink(content, SizableText, { fontSize: '$2', fontWeight: '400', color: '$red9' }) }));
+}
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
+//# sourceMappingURL=field.js.map

package/dist/backends/gui/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/backends/gui/field.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/gantt.cjs

@@ -4,47 +4,45 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gantt = Gantt;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Gantt — a vertical list of tasks, each drawn as a labelled progress bar
- * spanning its own start and end date.
+ * Gantt — a task list with a per-row progress track and a start/end date.
  *
- * One row is one task: a name and a percentage on top, a filled track for
- * progress in the middle, the start and end dates below. No timeline axis is
- * computed — each row's fill is just `progress`, so the component stays a
- * plain list (one YStack, one axis) rather than a two-dimensional layout, and
- * needs no `Grid`.
+ * One row is three lines: name and percent, a filled track, then the two
+ * dates. The substrate is @hanzo/gui: `styled()` frames and theme tokens, so
+ * it renders on web, native (expo) and Tauri. An empty task list renders a
+ * placeholder rather than nothing.
  */
 const gui_1 = require("@hanzo/gui");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
-const Frame = (0, gui_1.styled)(gui_1.YStack, {
+const TRACK_HEIGHT = 32;
+const GanttFrame = (0, gui_1.styled)(gui_1.YStack, {
     name: 'Gantt',
     bg: '$background',
     borderWidth: 1,
     borderColor: '$borderColor',
     rounded: '$6',
     p: '$6',
-    gap: '$4',
 });
-const Track = (0, gui_1.styled)(gui_1.YStack, {
+const RowFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'GanttRow', gap: '$2' });
+const TrackFrame = (0, gui_1.styled)(gui_1.YStack, {
     name: 'GanttTrack',
-    height: 32,
+    height: TRACK_HEIGHT,
     rounded: '$3',
     bg: '$edge',
     overflow: 'hidden',
 });
-const Fill = (0, gui_1.styled)(gui_1.YStack, {
-    name: 'GanttFill',
+const BarFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'GanttBar',
     height: '100%',
     rounded: '$3',
     bg: '$accentBackground',
 });
-const clamp = (n) => Math.min(100, Math.max(0, n));
 function Gantt({ tasks = [], ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Frame, { ...(0, slot_1.slot)('gantt'), ...props, children: tasks.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('gantt-empty'), items: "center", justify: "center", p: "$8", children: (0, ink_1.ink)('No tasks available. Add tasks to display Gantt chart.', gui_1.SizableText, {
+    return ((0, jsx_runtime_1.jsx)(GanttFrame, { ...(0, slot_1.slot)('gantt'), ...props, children: tasks.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('gantt-empty'), items: "center", justify: "center", p: "$8", children: (0, ink_1.ink)('No tasks available. Add tasks to display Gantt chart.', gui_1.SizableText, {
                 size: '$2',
                 color: '$quiet',
-            }) })) : (tasks.map((task) => {
-            const progress = clamp(task.progress ?? 0);
-            return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('gantt-task'), gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", children: [(0, ink_1.ink)(task.name, gui_1.SizableText, { size: '$2', fontWeight: '600' }), (0, ink_1.ink)(`${progress}%`, gui_1.SizableText, { size: '$2', color: '$quiet' })] }), (0, jsx_runtime_1.jsx)(Track, { ...(0, slot_1.slot)('gantt-track'), children: (0, jsx_runtime_1.jsx)(Fill, { ...(0, slot_1.slot)('gantt-fill'), width: `${progress}%` }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", children: [(0, ink_1.ink)(task.start.toLocaleDateString(), gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(task.end.toLocaleDateString(), gui_1.SizableText, { size: '$1', color: '$quiet' })] })] }, task.id));
-        })) }));
+            }) })) : ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$4", children: tasks.map((task) => {
+                const progress = Math.min(100, Math.max(0, task.progress ?? 0));
+                return ((0, jsx_runtime_1.jsxs)(RowFrame, { ...(0, slot_1.slot)('gantt-task'), "data-progress": progress, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "center", children: [(0, ink_1.ink)(task.name, gui_1.SizableText, { size: '$3', fontWeight: '600' }), (0, ink_1.ink)(`${progress}%`, gui_1.SizableText, { size: '$3', color: '$quiet' })] }), (0, jsx_runtime_1.jsx)(TrackFrame, { ...(0, slot_1.slot)('gantt-track'), children: (0, jsx_runtime_1.jsx)(BarFrame, { ...(0, slot_1.slot)('gantt-bar'), width: `${progress}%` }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", children: [(0, ink_1.ink)(task.start.toLocaleDateString(), gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(task.end.toLocaleDateString(), gui_1.SizableText, { size: '$1', color: '$quiet' })] })] }, task.id));
+            }) })) }));
 }

package/dist/backends/gui/gantt.d.ts

@@ -1,4 +1,3 @@
-import type { ComponentProps } from 'react';
 export interface GanttTask {
     id: string;
     name: string;
@@ -7,13 +6,13 @@ export interface GanttTask {
     /** 0–100. Defaults to 0. */
     progress?: number;
 }
-declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+declare const GanttFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
-export type GanttProps = ComponentProps<typeof Frame> & {
+export type GanttProps = Omit<import('react').ComponentProps<typeof GanttFrame>, 'children'> & {
     tasks?: GanttTask[];
 };
-declare function Gantt({ tasks, ...props }: GanttProps): import("react").JSX.Element;
-export { Gantt };
+export declare function Gantt({ tasks, ...props }: GanttProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=gantt.d.ts.map

package/dist/backends/gui/gantt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gantt.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/gantt.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;IACT,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,KAAK;;;8CAQT,CAAA;AAmBF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;CACpB,CAAA;AAED,iBAAS,KAAK,CAAC,EAAE,KAAU,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAgClD;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"gantt.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/gantt.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;IACT,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,UAAU;;;8CAOd,CAAA;AAmBF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,OAAO,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7F,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;CACpB,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,KAAU,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAkCzD"}