@elaraai/east-ui 1.0.4 → 1.0.6

package/dist/test/forms/tags-input.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.examples.js","sourceRoot":"","sources":["../../../test/forms/tags-input.examples.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tags-input.examples.js","sourceRoot":"","sources":["../../../test/forms/tags-input.examples.tsx"],"names":[],"mappings":"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"}

package/dist/test/forms/textarea.examples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.examples.d.ts","sourceRoot":"","sources":["../../../test/forms/textarea.examples.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa,6CAWxB,CAAC;AAEH,eAAO,MAAM,mBAAmB,6CAsB9B,CAAC;AAEH,eAAO,MAAM,mBAAmB,6CAgC9B,CAAC;AAEH,eAAO,MAAM,kBAAkB,6CAqB7B,CAAC"}
+{"version":3,"file":"textarea.examples.d.ts","sourceRoot":"","sources":["../../../test/forms/textarea.examples.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,6CAOxB,CAAC;AAEH,eAAO,MAAM,mBAAmB,6CAmB9B,CAAC;AAEH,eAAO,MAAM,mBAAmB,6CA6B9B,CAAC;AAEH,eAAO,MAAM,kBAAkB,6CAmB7B,CAAC"}

package/dist/test/forms/textarea.examples.js

@@ -1,48 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/east-ui/jsx-runtime";
 /**
  * Copyright (c) 2025 Elara AI Pty Ltd
  * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
  */
+/** @jsxImportSource @elaraai/east-ui */
 import { East, IntegerType, NullType, StringType, example } from "@elaraai/east";
-import { Reactive, Stack, State, Text, Textarea, UIComponentType } from "@elaraai/east-ui";
+import { State, UIComponentType } from "@elaraai/east-ui";
+import { Text, Textarea, VStack, HStack, Reactive } from "@elaraai/east-ui";
 export const textareaBasic = example({
     keywords: ["Textarea", "Root", "placeholder", "rows", "resize"],
     description: "Multi-line text input",
     fn: East.function([], UIComponentType, (_$) => {
-        return Textarea.Root("", {
-            placeholder: "Enter your message...",
-            rows: 4,
-            resize: "vertical",
-        });
+        return _jsx(Textarea, { value: "", placeholder: "Enter your message...", rows: 4, resize: "vertical" });
     }),
     inputs: [],
 });
 export const textareaInteractive = example({
     keywords: ["Textarea", "Root", "Reactive", "State", "onChange", "interactive"],
     description: "Type to see character count update",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
             const textBind = $.let(State.bind([StringType], "form_textarea", ""));
             const text = $.let(textBind.read());
             const onChange = $.const(East.function([StringType], NullType, ($, newValue) => {
                 $(textBind.write(newValue));
             }));
-            return Stack.VStack([
-                Textarea.Root(text, {
-                    placeholder: "Write something...",
-                    rows: 3,
-                    onChange,
-                }),
-                Text.Presets.MonoLabel(East.str `${text.length()} CHARS`),
-            ], { gap: "3", align: "stretch" });
-        }));
-    }),
+            return (_jsxs(VStack, { gap: "3", align: "stretch", children: [_jsx(Textarea, { value: text, placeholder: "Write something...", rows: 3, onChange: onChange }), _jsx(Text.MonoLabel, { children: East.str `${text.length()} CHARS` })] }));
+        } }))),
     inputs: [],
 });
 export const textareaOnFocusBlur = example({
     keywords: ["Textarea", "Root", "Reactive", "State", "onFocus", "onBlur", "interactive"],
     description: "Textarea exercising onFocus and onBlur callbacks",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
             const focusBind = $.let(State.bind([IntegerType], "textarea_focus_count", 0n));
             const blurBind = $.let(State.bind([IntegerType], "textarea_blur_count", 0n));
             const focusCount = $.let(focusBind.read());
@@ -55,42 +44,21 @@ export const textareaOnFocusBlur = example({
                 const cur = $.let(blurBind.read());
                 $(blurBind.write(cur.add(1n)));
             }));
-            return Stack.VStack([
-                Textarea.Root("", {
-                    placeholder: "Click in/out to fire focus/blur",
-                    rows: 3,
-                    onFocus,
-                    onBlur,
-                }),
-                Stack.HStack([
-                    Text.Presets.MonoLabel(East.str `FOCUS · ${focusCount}`),
-                    Text.Presets.MonoLabel(East.str `BLUR · ${blurCount}`),
-                ], { gap: "4" }),
-            ], { gap: "3", align: "stretch" });
-        }));
-    }),
+            return (_jsxs(VStack, { gap: "3", align: "stretch", children: [_jsx(Textarea, { value: "", placeholder: "Click in/out to fire focus/blur", rows: 3, onFocus: onFocus, onBlur: onBlur }), _jsxs(HStack, { gap: "4", children: [_jsx(Text.MonoLabel, { children: East.str `FOCUS · ${focusCount}` }), _jsx(Text.MonoLabel, { children: East.str `BLUR · ${blurCount}` })] })] }));
+        } }))),
     inputs: [],
 });
 export const textareaOnValidate = example({
     keywords: ["Textarea", "Root", "Reactive", "State", "onValidate", "interactive"],
     description: "Textarea whose onValidate records the latest validated value",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
             const validBind = $.let(State.bind([StringType], "textarea_validated", ""));
             const last = $.let(validBind.read());
             const onValidate = $.const(East.function([StringType], NullType, ($, val) => {
                 $(validBind.write(val));
             }));
-            return Stack.VStack([
-                Textarea.Root("", {
-                    placeholder: "Type — every keystroke fires onValidate",
-                    rows: 3,
-                    onValidate,
-                }),
-                Text.Root(East.str `Last validated: ${last}`),
-            ], { gap: "3", align: "stretch" });
-        }));
-    }),
+            return (_jsxs(VStack, { gap: "3", align: "stretch", children: [_jsx(Textarea, { value: "", placeholder: "Type \u2014 every keystroke fires onValidate", rows: 3, onValidate: onValidate }), _jsx(Text, { children: East.str `Last validated: ${last}` })] }));
+        } }))),
     inputs: [],
 });
 //# sourceMappingURL=textarea.examples.js.map

package/dist/test/forms/textarea.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.examples.js","sourceRoot":"","sources":["../../../test/forms/textarea.examples.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"textarea.examples.js","sourceRoot":"","sources":["../../../test/forms/textarea.examples.tsx"],"names":[],"mappings":"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"}

package/dist/test/forms/time-range-input.examples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-range-input.examples.d.ts","sourceRoot":"","sources":["../../../test/forms/time-range-input.examples.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,6CAS9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,6CAoBjC,CAAC;AAEH,eAAO,MAAM,qBAAqB,6CAyBhC,CAAC;AAEH,eAAO,MAAM,qBAAqB,6CAehC,CAAC;AAEH,eAAO,MAAM,mBAAmB,6CAa9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,6CASjC,CAAC"}
+{"version":3,"file":"time-range-input.examples.d.ts","sourceRoot":"","sources":["../../../test/forms/time-range-input.examples.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,6CAS9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,6CAsBjC,CAAC;AAEH,eAAO,MAAM,qBAAqB,6CA6BhC,CAAC;AAEH,eAAO,MAAM,qBAAqB,6CAShC,CAAC;AAEH,eAAO,MAAM,mBAAmB,6CAe9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,6CASjC,CAAC"}

package/dist/test/forms/time-range-input.examples.js

@@ -1,24 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/east-ui/jsx-runtime";
 /**
  * Copyright (c) 2025 Elara AI Pty Ltd
  * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
  */
+/** @jsxImportSource @elaraai/east-ui */
 import { East, IntegerType, NullType, example } from "@elaraai/east";
-import { Reactive, Stack, State, Text, TimeRangeInput, UIComponentType } from "@elaraai/east-ui";
+import { State, UIComponentType } from "@elaraai/east-ui";
+import { Text, TimeRangeInput, VStack, Reactive } from "@elaraai/east-ui";
 export const timeRangeInputBasic = example({
     keywords: ["TimeRangeInput", "Root", "shift", "time", "range"],
     description: "Basic 06:00 – 14:00 morning window with 15-min step",
     fn: East.function([], UIComponentType, ($) => {
         const start = $.let(360n, IntegerType);
         const end = $.let(840n, IntegerType);
-        return TimeRangeInput.Root(start, end, { step: 15n });
+        return _jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n });
     }),
     inputs: [],
 });
 export const timeRangeInputReactive = example({
     keywords: ["TimeRangeInput", "Reactive", "State", "onChange", "interactive"],
     description: "Reactive range bound to State — both inputs write back through the same callback",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
             const startBind = $.let(State.bind([IntegerType], "trin.start", 360n));
             const endBind = $.let(State.bind([IntegerType], "trin.end", 840n));
             const start = $.let(startBind.read(), IntegerType);
@@ -27,19 +29,14 @@ export const timeRangeInputReactive = example({
                 $(startBind.write(s));
                 $(endBind.write(e));
             }));
-            return Stack.VStack([
-                TimeRangeInput.Root(start, end, { step: 15n, onChange }),
-                Text.Presets.MonoLabel(East.str `MIN · ${start} → ${end}`),
-            ], { gap: "3", align: "flex-start" });
-        }));
-    }),
+            return (_jsxs(VStack, { gap: "3", align: "flex-start", children: [_jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, onChange: onChange }), _jsx(Text.MonoLabel, { children: East.str `MIN · ${start} → ${end}` })] }));
+        } }))),
     inputs: [],
 });
 export const timeRangeInputPresets = example({
     keywords: ["TimeRangeInput", "presets", "shift", "morning", "afternoon", "night"],
     description: "Three named shift presets — clicking applies the start/end pair",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
             const startBind = $.let(State.bind([IntegerType], "trin.preset.start", 360n));
             const endBind = $.let(State.bind([IntegerType], "trin.preset.end", 840n));
             const start = $.let(startBind.read(), IntegerType);
@@ -48,32 +45,21 @@ export const timeRangeInputPresets = example({
                 $(startBind.write(s));
                 $(endBind.write(e));
             }));
-            return TimeRangeInput.Root(start, end, {
-                step: 15n,
-                onChange,
-                presets: [
-                    { label: "Morning", start: 360n, end: 840n }, // 06:00 – 14:00
-                    { label: "Afternoon", start: 840n, end: 1320n }, // 14:00 – 22:00
-                    { label: "Night", start: 1320n, end: 360n }, // 22:00 – 06:00 (overnight)
-                ],
-            });
-        }));
-    }),
+            return (_jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, onChange: onChange, presets: [
+                    { label: "Morning", start: 360n, end: 840n },
+                    { label: "Afternoon", start: 840n, end: 1320n },
+                    { label: "Night", start: 1320n, end: 360n },
+                ] }));
+        } }))),
     inputs: [],
 });
 export const timeRangeInputColours = example({
     keywords: ["TimeRangeInput", "colour", "color", "escape", "hatches"],
     description: "Explicit colour overrides — text / background / border / focus border",
     fn: East.function([], UIComponentType, ($) => {
-        const start = $.let(540n, IntegerType); // 09:00
-        const end = $.let(1020n, IntegerType); // 17:00
-        return TimeRangeInput.Root(start, end, {
-            step: 15n,
-            color: "fg",
-            background: "bg.subtle",
-            borderColor: "blue.300",
-            focusBorderColor: "blue.500",
-        });
+        const start = $.let(540n, IntegerType);
+        const end = $.let(1020n, IntegerType);
+        return _jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, color: "fg", background: "bg.subtle", borderColor: "blue.300", focusBorderColor: "blue.500" });
     }),
     inputs: [],
 });
@@ -83,11 +69,7 @@ export const timeRangeInputSizes = example({
     fn: East.function([], UIComponentType, ($) => {
         const start = $.let(360n, IntegerType);
         const end = $.let(840n, IntegerType);
-        return Stack.VStack([
-            TimeRangeInput.Root(start, end, { step: 15n, size: "sm" }),
-            TimeRangeInput.Root(start, end, { step: 15n, size: "md" }),
-            TimeRangeInput.Root(start, end, { step: 15n, size: "lg" }),
-        ], { gap: "3", align: "flex-start" });
+        return (_jsxs(VStack, { gap: "3", align: "flex-start", children: [_jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, size: "sm" }), _jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, size: "md" }), _jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, size: "lg" })] }));
     }),
     inputs: [],
 });
@@ -97,7 +79,7 @@ export const timeRangeInputDisabled = example({
     fn: East.function([], UIComponentType, ($) => {
         const start = $.let(360n, IntegerType);
         const end = $.let(840n, IntegerType);
-        return TimeRangeInput.Root(start, end, { step: 15n, disabled: true });
+        return _jsx(TimeRangeInput, { startValue: start, endValue: end, step: 15n, disabled: true });
     }),
     inputs: [],
 });

package/dist/test/forms/time-range-input.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-range-input.examples.js","sourceRoot":"","sources":["../../../test/forms/time-range-input.examples.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-range-input.examples.js","sourceRoot":"","sources":["../../../test/forms/time-range-input.examples.tsx"],"names":[],"mappings":"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"}

package/dist/test/layout/box.examples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.examples.d.ts","sourceRoot":"","sources":["../../../test/layout/box.examples.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ,6CASnB,CAAC;AAEH,eAAO,MAAM,SAAS,6CAcpB,CAAC;AAEH,eAAO,MAAM,UAAU,6CAoBrB,CAAC;AAEH,eAAO,MAAM,aAAa,6CAqBxB,CAAC;AAEH,eAAO,MAAM,QAAQ,6CAkBnB,CAAC;AAEH,eAAO,MAAM,SAAS,6CAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,6CAoCrB,CAAC;AAEH,eAAO,MAAM,UAAU,6CAiCrB,CAAC;AAEH,eAAO,MAAM,cAAc,6CAsBzB,CAAC;AAMH,eAAO,MAAM,SAAS,6CAqBpB,CAAC;AAEH,eAAO,MAAM,WAAW,6CActB,CAAC;AAEH,eAAO,MAAM,WAAW,6CAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,6CAmB5B,CAAC"}
+{"version":3,"file":"box.examples.d.ts","sourceRoot":"","sources":["../../../test/layout/box.examples.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,QAAQ,6CAOnB,CAAC;AAEH,eAAO,MAAM,SAAS,6CAWpB,CAAC;AAEH,eAAO,MAAM,UAAU,6CAarB,CAAC;AAEH,eAAO,MAAM,aAAa,6CAaxB,CAAC;AAEH,eAAO,MAAM,QAAQ,6CAWnB,CAAC;AAEH,eAAO,MAAM,SAAS,6CAapB,CAAC;AAEH,eAAO,MAAM,UAAU,6CAmBrB,CAAC;AAEH,eAAO,MAAM,UAAU,6CAmBrB,CAAC;AAEH,eAAO,MAAM,cAAc,6CAwBzB,CAAC;AAEH,eAAO,MAAM,SAAS,6CAgBpB,CAAC;AAEH,eAAO,MAAM,WAAW,6CAWtB,CAAC;AAEH,eAAO,MAAM,WAAW,6CAYtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,6CAe5B,CAAC"}

package/dist/test/layout/box.examples.js

@@ -1,16 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/east-ui/jsx-runtime";
 /**
  * Copyright (c) 2025 Elara AI Pty Ltd
  * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
  */
+/** @jsxImportSource @elaraai/east-ui */
 import { East, IntegerType, NullType, example } from "@elaraai/east";
-import { Box, Button, Reactive, Stack, State, Text, Style, UIComponentType } from "@elaraai/east-ui";
+import { State, UIComponentType } from "@elaraai/east-ui";
+import { Box, Button, Text, VStack, HStack, Reactive } from "@elaraai/east-ui";
 export const boxBasic = example({
     keywords: ["Box", "Root", "basic", "container"],
     description: "Simple container with no styling",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Text.Root("Content inside a basic box"),
-        ]);
+        return _jsx(Box, { children: _jsx(Text, { children: "Content inside a basic box" }) });
     }),
     inputs: [],
 });
@@ -18,14 +19,7 @@ export const boxStyled = example({
     keywords: ["Box", "Root", "padding", "background", "borderRadius", "color"],
     description: "Box with background, padding, and border radius",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Text.Root("Styled container content"),
-        ], {
-            padding: "4",
-            background: "blue.50",
-            color: "blue.800",
-            borderRadius: "md",
-        });
+        return (_jsx(Box, { padding: "4", background: "blue.50", color: "blue.800", borderRadius: "md", children: _jsx(Text, { children: "Styled container content" }) }));
     }),
     inputs: [],
 });
@@ -33,20 +27,7 @@ export const boxFlexRow = example({
     keywords: ["Box", "Root", "flex", "row", "justifyContent", "alignItems"],
     description: "Horizontal flex container with gap",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Text.Root("Item 1"),
-            Text.Root("Item 2"),
-            Text.Root("Item 3"),
-        ], {
-            display: Style.Display("flex"),
-            flexDirection: Style.FlexDirection("row"),
-            justifyContent: Style.JustifyContent("space-between"),
-            alignItems: Style.AlignItems("center"),
-            gap: "4",
-            padding: "4",
-            background: "gray.100",
-            borderRadius: "md",
-        });
+        return (_jsxs(Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", gap: "4", padding: "4", background: "gray.100", borderRadius: "md", children: [_jsx(Text, { children: "Item 1" }), _jsx(Text, { children: "Item 2" }), _jsx(Text, { children: "Item 3" })] }));
     }),
     inputs: [],
 });
@@ -54,21 +35,7 @@ export const boxFlexColumn = example({
     keywords: ["Box", "Root", "flex", "column", "vertical"],
     description: "Vertical flex container with items centered",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Text.Root("Top"),
-            Text.Root("Middle"),
-            Text.Root("Bottom"),
-        ], {
-            display: Style.Display("flex"),
-            flexDirection: Style.FlexDirection("column"),
-            justifyContent: Style.JustifyContent("space-around"),
-            alignItems: Style.AlignItems("center"),
-            height: "150px",
-            padding: "4",
-            background: "purple.50",
-            color: "purple.800",
-            borderRadius: "lg",
-        });
+        return (_jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "space-around", alignItems: "center", height: "150px", padding: "4", background: "purple.50", color: "purple.800", borderRadius: "lg", children: [_jsx(Text, { children: "Top" }), _jsx(Text, { children: "Middle" }), _jsx(Text, { children: "Bottom" })] }));
     }),
     inputs: [],
 });
@@ -76,18 +43,7 @@ export const boxFixed = example({
     keywords: ["Box", "Root", "width", "height", "fixed", "dimensions"],
     description: "Box with explicit width and height",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Text.Root("200x100 box"),
-        ], {
-            display: Style.Display("flex"),
-            width: "200px",
-            height: "100px",
-            justifyContent: Style.JustifyContent("center"),
-            alignItems: Style.AlignItems("center"),
-            background: "teal.100",
-            color: "teal.800",
-            borderRadius: "sm",
-        });
+        return (_jsx(Box, { display: "flex", width: "200px", height: "100px", justifyContent: "center", alignItems: "center", background: "teal.100", color: "teal.800", borderRadius: "sm", children: _jsx(Text, { children: "200x100 box" }) }));
     }),
     inputs: [],
 });
@@ -95,19 +51,7 @@ export const boxNested = example({
     keywords: ["Box", "Root", "nested", "container"],
     description: "Box containing another styled box",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Box.Root([
-                Text.Root("Inner box"),
-            ], {
-                padding: "2",
-                background: "blue.100",
-                borderRadius: "sm",
-            }),
-        ], {
-            padding: "4",
-            background: "gray.100",
-            borderRadius: "md",
-        });
+        return (_jsx(Box, { padding: "4", background: "gray.100", borderRadius: "md", children: _jsx(Box, { padding: "2", background: "blue.100", borderRadius: "sm", children: _jsx(Text, { children: "Inner box" }) }) }));
     }),
     inputs: [],
 });
@@ -115,36 +59,7 @@ export const boxBorders = example({
     keywords: ["Box", "Root", "border", "borderColor", "borderWidth", "solid", "dashed"],
     description: "Box with border, borderColor, and borderWidth",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Box.Root([
-                Text.Root("Solid border"),
-            ], {
-                padding: "4",
-                border: "2px solid",
-                borderColor: "blue.500",
-                borderRadius: "md",
-            }),
-            Box.Root([
-                Text.Root("Dashed border"),
-            ], {
-                padding: "4",
-                border: "2px dashed",
-                borderColor: "green.500",
-                borderRadius: "md",
-            }),
-            Box.Root([
-                Text.Root("Custom width"),
-            ], {
-                padding: "4",
-                borderWidth: "4px",
-                borderColor: "red.500",
-                background: "red.50",
-                borderRadius: "lg",
-            }),
-        ], {
-            display: Style.Display("flex"),
-            gap: "4",
-        });
+        return (_jsxs(Box, { display: "flex", gap: "4", children: [_jsx(Box, { padding: "4", border: "2px solid", borderColor: "blue.500", borderRadius: "md", children: _jsx(Text, { children: "Solid border" }) }), _jsx(Box, { padding: "4", border: "2px dashed", borderColor: "green.500", borderRadius: "md", children: _jsx(Text, { children: "Dashed border" }) }), _jsx(Box, { padding: "4", borderWidth: "4px", borderColor: "red.500", background: "red.50", borderRadius: "lg", children: _jsx(Text, { children: "Custom width" }) })] }));
     }),
     inputs: [],
 });
@@ -152,78 +67,31 @@ export const boxJustify = example({
     keywords: ["Box", "Root", "justifyContent", "flex-start", "center", "flex-end"],
     description: "Different justify-content values",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Box.Root([Text.Root("start")], {
-                display: Style.Display("flex"),
-                justifyContent: Style.JustifyContent("flex-start"),
-                padding: "2",
-                background: "green.100",
-                borderRadius: "sm",
-            }),
-            Box.Root([Text.Root("center")], {
-                display: Style.Display("flex"),
-                justifyContent: Style.JustifyContent("center"),
-                padding: "2",
-                background: "green.100",
-                borderRadius: "sm",
-            }),
-            Box.Root([Text.Root("end")], {
-                display: Style.Display("flex"),
-                justifyContent: Style.JustifyContent("flex-end"),
-                padding: "2",
-                background: "green.100",
-                borderRadius: "sm",
-            }),
-        ], {
-            display: Style.Display("flex"),
-            flexDirection: Style.FlexDirection("column"),
-            gap: "2",
-        });
+        return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "2", children: [_jsx(Box, { display: "flex", justifyContent: "flex-start", padding: "2", background: "green.100", borderRadius: "sm", children: _jsx(Text, { children: "start" }) }), _jsx(Box, { display: "flex", justifyContent: "center", padding: "2", background: "green.100", borderRadius: "sm", children: _jsx(Text, { children: "center" }) }), _jsx(Box, { display: "flex", justifyContent: "flex-end", padding: "2", background: "green.100", borderRadius: "sm", children: _jsx(Text, { children: "end" }) })] }));
     }),
     inputs: [],
 });
 export const boxInteractive = example({
     keywords: ["Box", "Reactive", "State", "interactive", "background", "toggle"],
     description: "Box whose background colour alternates each click",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
             const counter = $.let(State.bind([IntegerType], "box_counter", 0n));
             const value = $.let(counter.read());
             const isEven = $.let(value.remainder(2n).equal(0n));
-            const bg = $.let(isEven.ifElse(() => East.value("blue.100"), () => East.value("green.100")));
+            const bg = $.let(isEven.ifElse(() => "blue.100", () => "green.100"));
             const inc = $.const(East.function([], NullType, $ => {
                 const cur = $.let(counter.read());
                 $(counter.write(cur.add(1n)));
             }));
-            return Stack.VStack([
-                Box.Root([
-                    Text.Root("Box background toggles between blue and green"),
-                ], { padding: "4", background: bg, borderRadius: "md" }),
-                Button.Root("Toggle background", { onClick: inc }),
-            ], { gap: "3", align: "stretch" });
-        }));
-    }),
+            return (_jsxs(VStack, { gap: "3", align: "stretch", children: [_jsx(Box, { padding: "4", background: bg, borderRadius: "md", children: _jsx(Text, { children: "Box background toggles between blue and green" }) }), _jsx(Button, { onClick: inc, children: "Toggle background" })] }));
+        } }))),
     inputs: [],
 });
-// -----------------------------------------------------------------------------
-// Tokenised style fields: position / shadow / animation / fontVariantNumeric
-// -----------------------------------------------------------------------------
 export const boxSticky = example({
     keywords: ["Box", "position", "sticky", "scroll", "header"],
     description: "Box with position=\"sticky\" — a header row that stays pinned while its parent scrolls",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Box.Root([Text.Root("Sticky header")], {
-                position: "sticky",
-                top: "0",
-                zIndex: "sticky",
-                padding: "3",
-                background: "white",
-                borderColor: "gray.200",
-                borderWidth: "thin",
-            }),
-            Stack.VStack(Array.from({ length: 10 }, (_, i) => Text.Root(`Row ${i + 1}`)), { gap: "2", padding: "3" }),
-        ], { overflowY: "auto", height: "240px", borderColor: "gray.300", borderWidth: "thin" });
+        return (_jsxs(Box, { overflowY: "auto", height: "240px", borderColor: "gray.300", borderWidth: "thin", children: [_jsx(Box, { position: "sticky", top: "0", zIndex: "sticky", padding: "3", background: "white", borderColor: "gray.200", borderWidth: "thin", children: _jsx(Text, { children: "Sticky header" }) }), _jsx(VStack, { gap: "2", padding: "3", children: Array.from({ length: 10 }, (_, i) => _jsx(Text, { children: `Row ${i + 1}` })) })] }));
     }),
     inputs: [],
 });
@@ -231,14 +99,7 @@ export const boxElevated = example({
     keywords: ["Box", "boxShadow", "borderRadius", "elevated", "card"],
     description: "Box with boxShadow=\"md\" + borderRadius=\"md\" to produce a card surface",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Text.Root("Elevated card — BoxShadow.md"),
-        ], {
-            padding: "4",
-            background: "white",
-            borderRadius: "md",
-            boxShadow: "md",
-        });
+        return (_jsx(Box, { padding: "4", background: "white", borderRadius: "md", boxShadow: "md", children: _jsx(Text, { children: "Elevated card \u2014 BoxShadow.md" }) }));
     }),
     inputs: [],
 });
@@ -246,16 +107,7 @@ export const boxAnimated = example({
     keywords: ["Box", "animation", "pulse", "status", "live", "recomputing"],
     description: "Box with animation=\"pulse\" — a \"recomputing\" status dot inside a chip",
     fn: East.function([], UIComponentType, (_$) => {
-        return Stack.HStack([
-            Box.Root([], {
-                width: "10px",
-                height: "10px",
-                borderRadius: "full",
-                background: "orange.500",
-                animation: "pulse",
-            }),
-            Text.Root("Recomputing…"),
-        ], { gap: "2", align: "center" });
+        return (_jsxs(HStack, { gap: "2", align: "center", children: [_jsx(Box, { width: "10px", height: "10px", borderRadius: "full", background: "orange.500", animation: "pulse" }), _jsx(Text, { children: "Recomputing\u2026" })] }));
     }),
     inputs: [],
 });
@@ -263,19 +115,7 @@ export const boxTabularNumeric = example({
     keywords: ["Box", "fontFamily", "mono", "fontVariantNumeric", "tabular-nums", "KPI"],
     description: "Box with fontFamily=\"mono\" + fontVariantNumeric=\"tabular-nums\" — KPI digits align across rows",
     fn: East.function([], UIComponentType, (_$) => {
-        return Box.Root([
-            Stack.VStack([
-                Text.Root("  1,234.56"),
-                Text.Root("    56.07"),
-                Text.Root("789,012.30"),
-            ], { gap: "1", align: "flex-end" }),
-        ], {
-            fontFamily: "mono",
-            fontVariantNumeric: "tabular-nums",
-            padding: "3",
-            background: "gray.50",
-            borderRadius: "md",
-        });
+        return (_jsx(Box, { fontFamily: "mono", fontVariantNumeric: "tabular-nums", padding: "3", background: "gray.50", borderRadius: "md", children: _jsxs(VStack, { gap: "1", align: "flex-end", children: [_jsx(Text, { children: "  1,234.56" }), _jsx(Text, { children: "    56.07" }), _jsx(Text, { children: "789,012.30" })] }) }));
     }),
     inputs: [],
 });