@hanzo/ui 8.0.27 → 8.0.28

package/dist/backends/gui/aspect-ratio.cjs

@@ -0,0 +1,15 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AspectRatio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AspectRatio — a box that holds a width-to-height ratio.
+ *
+ * `aspectRatio` is a first-class layout property of the gui/Yoga box model, so
+ * there is nothing to compute and no padding-bottom trick: the ratio is the
+ * style. That is why this is the whole component on web, native and desktop.
+ */
+const gui_1 = require("@hanzo/gui");
+const AspectRatio = ({ ratio = 1, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-slot": "aspect-ratio", width: "100%", aspectRatio: ratio, ...props }));
+exports.AspectRatio = AspectRatio;

package/dist/backends/gui/aspect-ratio.d.ts

@@ -12,3 +12,4 @@ export interface AspectRatioProps extends YStackProps {
 }
 declare const AspectRatio: ({ ratio, ...props }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;
 export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/backends/gui/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/aspect-ratio.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAErD,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,WAAW,GAAI,qBAAyB,gBAAgB,4CAE7D,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/backends/gui/aspect-ratio.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AspectRatio — a box that holds a width-to-height ratio.
+ *
+ * `aspectRatio` is a first-class layout property of the gui/Yoga box model, so
+ * there is nothing to compute and no padding-bottom trick: the ratio is the
+ * style. That is why this is the whole component on web, native and desktop.
+ */
+import { YStack } from '@hanzo/gui';
+const AspectRatio = ({ ratio = 1, ...props }) => (_jsx(YStack, { "data-slot": "aspect-ratio", width: "100%", aspectRatio: ratio, ...props }));
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/backends/gui/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../../src/backends/gui/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AAOrD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,iBAAW,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,KAAM,KAAK,GAAI,CAChF,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/backends/gui/avatar.cjs

@@ -0,0 +1,20 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFallback = exports.AvatarImage = exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Avatar — circular image with a text fallback.
+ *
+ * @hanzogui/avatar owns the load/error state machine and the fallback delay, so
+ * this only names the three parts and dresses them in tokens.
+ */
+const gui_1 = require("@hanzo/gui");
+const SIZE = 32;
+const Avatar = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Avatar, { "data-slot": "avatar", circular: true, size: SIZE, shrink: 0, overflow: "hidden", ...props }));
+exports.Avatar = Avatar;
+const AvatarImage = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Avatar.Image, { "data-slot": "avatar-image", width: "100%", height: "100%", ...props }));
+exports.AvatarImage = AvatarImage;
+/** Bare text needs a Text host to render on native; elements pass through. */
+const AvatarFallback = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Avatar.Fallback, { "data-slot": "avatar-fallback", bg: "$color4", items: "center", justify: "center", ...props, children: typeof children === 'string' || typeof children === 'number' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$color11", children: children })) : (children) }));
+exports.AvatarFallback = AvatarFallback;

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

@@ -14,3 +14,4 @@ declare const AvatarImage: (props: AvatarImageProps) => import("react/jsx-runtim
 /** Bare text needs a Text host to render on native; elements pass through. */
 declare const AvatarFallback: ({ children, ...props }: AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/avatar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAe,MAAM,YAAY,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAC1D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;AACrE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAA;AAE3E,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,4CAEjC,CAAA;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAE3C,CAAA;AAED,8EAA8E;AAC9E,QAAA,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,4CAgBlE,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/avatar.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Avatar — circular image with a text fallback.
+ *
+ * @hanzogui/avatar owns the load/error state machine and the fallback delay, so
+ * this only names the three parts and dresses them in tokens.
+ */
+import { Avatar as GuiAvatar, SizableText } from '@hanzo/gui';
+const SIZE = 32;
+const Avatar = (props) => (_jsx(GuiAvatar, { "data-slot": "avatar", circular: true, size: SIZE, shrink: 0, overflow: "hidden", ...props }));
+const AvatarImage = (props) => (_jsx(GuiAvatar.Image, { "data-slot": "avatar-image", width: "100%", height: "100%", ...props }));
+/** Bare text needs a Text host to render on native; elements pass through. */
+const AvatarFallback = ({ children, ...props }) => (_jsx(GuiAvatar.Fallback, { "data-slot": "avatar-fallback", bg: "$color4", items: "center", justify: "center", ...props, children: typeof children === 'string' || typeof children === 'number' ? (_jsx(SizableText, { size: "$2", color: "$color11", children: children })) : (children) }));
+export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/backends/gui/avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG7D,MAAM,IAAI,GAAG,EAAE,CAAA;AAMf,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CACrC,KAAC,SAAS,iBAAW,QAAQ,EAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,KAAK,KAAK,GAAI,CAC9F,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CAC/C,KAAC,SAAS,CAAC,KAAK,iBAAW,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,KAAK,KAAK,GAAI,CACnF,CAAA;AAED,8EAA8E;AAC9E,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE,CAAC,CACtE,KAAC,SAAS,CAAC,QAAQ,iBACP,iBAAiB,EAC3B,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,KACZ,KAAK,YAER,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9D,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACpC,QAAQ,GACG,CACf,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACkB,CACtB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/badge.cjs

@@ -0,0 +1,80 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeVariants = void 0;
+exports.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Badge — the gui-backend original.
+ *
+ * `Badge`, `badgeVariants`, `data-slot`/`data-variant`, `asChild`. The substrate
+ * is @hanzo/gui: `styled()` variants and theme tokens, so it renders on web,
+ * native (expo) and Tauri.
+ *
+ * Surface and ink are two concerns, so they are two styled parts sharing one
+ * `variant` through a styled context — the frame owns background/border, the
+ * text owns color/weight/case. Nothing reads `variant` twice by hand.
+ */
+const gui_1 = require("@hanzo/gui");
+const ink_1 = require("./ink.cjs");
+const gesture_1 = require("./gesture.cjs");
+/** A badge is a 24px pill; the slop makes its press area meet the 44px floor. */
+const MIN_TOUCH = 44;
+const HEIGHT = 24;
+const BadgeContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({ variant: 'default' });
+const BadgeFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Badge',
+    context: BadgeContext,
+    self: 'flex-start',
+    items: 'center',
+    justify: 'center',
+    shrink: 0,
+    minH: HEIGHT,
+    px: '$2.5',
+    py: '$1',
+    gap: '$1.5',
+    rounded: '$2',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    overflow: 'hidden',
+    variants: {
+        variant: {
+            default: { bg: '$color12' },
+            secondary: { bg: '$color4' },
+            destructive: { bg: '$red9' },
+            outline: { bg: '$background', borderColor: '$borderColor' },
+            ghost: { bg: 'transparent', hoverStyle: { bg: '$color3' } },
+            link: { bg: 'transparent' },
+            inputAdornment: { bg: '$color3', px: '$2' },
+            tags: { bg: '$color3', borderColor: '$borderColor', rounded: '$3' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const BadgeText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'BadgeText',
+    context: BadgeContext,
+    size: '$1',
+    fontWeight: '600',
+    variants: {
+        variant: {
+            default: { color: '$color1' },
+            secondary: { color: '$color12' },
+            destructive: { color: '$white1' },
+            outline: { color: '$color12' },
+            ghost: { color: '$color12' },
+            link: { color: '$color12', textDecorationLine: 'underline' },
+            inputAdornment: { color: '$color12', fontWeight: '500' },
+            tags: { color: '$color11', fontWeight: '400', textTransform: 'capitalize' },
+        },
+    },
+});
+/**
+ * A stable class handle for hosts that hook badges from CSS. Styling lives in
+ * the tokens; this only names the variant.
+ */
+const badgeVariants = ({ variant } = {}) => `hanzo-badge hanzo-badge--${variant ?? 'default'}`;
+exports.badgeVariants = badgeVariants;
+function Badge({ className, variant = 'default', asChild = false, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(BadgeFrame, { "data-slot": "badge", "data-variant": variant, variant: variant ?? 'default', asChild: asChild, render: asChild ? undefined : 'span', ...(0, gesture_1.touch)(HEIGHT, MIN_TOUCH, 'y'), className: [(0, exports.badgeVariants)({ variant }), className].filter(Boolean).join(' '), ...props, children: asChild ? children : (0, ink_1.ink)(children, BadgeText) }));
+}

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

@@ -17,3 +17,4 @@ export type BadgeProps = React.ComponentProps<'span'> & {
     asChild?: boolean;
 };
 export declare function Badge({ className, variant, asChild, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,MAAM,CAAA;AA4DV;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,cAAa;IAAE,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CAAO,WAC7B,CAAA;AAEpD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,2CAeZ"}

package/dist/backends/gui/badge.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Badge — the gui-backend original.
+ *
+ * `Badge`, `badgeVariants`, `data-slot`/`data-variant`, `asChild`. The substrate
+ * is @hanzo/gui: `styled()` variants and theme tokens, so it renders on web,
+ * native (expo) and Tauri.
+ *
+ * Surface and ink are two concerns, so they are two styled parts sharing one
+ * `variant` through a styled context — the frame owns background/border, the
+ * text owns color/weight/case. Nothing reads `variant` twice by hand.
+ */
+import { SizableText, XStack, createStyledContext, styled } from '@hanzo/gui';
+import { ink } from './ink.js';
+import { touch } from './gesture.js';
+/** A badge is a 24px pill; the slop makes its press area meet the 44px floor. */
+const MIN_TOUCH = 44;
+const HEIGHT = 24;
+const BadgeContext = /* @__PURE__ */ createStyledContext({ variant: 'default' });
+const BadgeFrame = styled(XStack, {
+    name: 'Badge',
+    context: BadgeContext,
+    self: 'flex-start',
+    items: 'center',
+    justify: 'center',
+    shrink: 0,
+    minH: HEIGHT,
+    px: '$2.5',
+    py: '$1',
+    gap: '$1.5',
+    rounded: '$2',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    overflow: 'hidden',
+    variants: {
+        variant: {
+            default: { bg: '$color12' },
+            secondary: { bg: '$color4' },
+            destructive: { bg: '$red9' },
+            outline: { bg: '$background', borderColor: '$borderColor' },
+            ghost: { bg: 'transparent', hoverStyle: { bg: '$color3' } },
+            link: { bg: 'transparent' },
+            inputAdornment: { bg: '$color3', px: '$2' },
+            tags: { bg: '$color3', borderColor: '$borderColor', rounded: '$3' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const BadgeText = styled(SizableText, {
+    name: 'BadgeText',
+    context: BadgeContext,
+    size: '$1',
+    fontWeight: '600',
+    variants: {
+        variant: {
+            default: { color: '$color1' },
+            secondary: { color: '$color12' },
+            destructive: { color: '$white1' },
+            outline: { color: '$color12' },
+            ghost: { color: '$color12' },
+            link: { color: '$color12', textDecorationLine: 'underline' },
+            inputAdornment: { color: '$color12', fontWeight: '500' },
+            tags: { color: '$color11', fontWeight: '400', textTransform: 'capitalize' },
+        },
+    },
+});
+/**
+ * A stable class handle for hosts that hook badges from CSS. Styling lives in
+ * the tokens; this only names the variant.
+ */
+export const badgeVariants = ({ variant } = {}) => `hanzo-badge hanzo-badge--${variant ?? 'default'}`;
+export function Badge({ className, variant = 'default', asChild = false, children, ...props }) {
+    return (_jsx(BadgeFrame, { "data-slot": "badge", "data-variant": variant, variant: variant ?? 'default', asChild: asChild, render: asChild ? undefined : 'span', ...touch(HEIGHT, MIN_TOUCH, 'y'), className: [badgeVariants({ variant }), className].filter(Boolean).join(' '), ...props, children: asChild ? children : ink(children, BadgeText) }));
+}
+//# sourceMappingURL=badge.js.map

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

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

package/dist/backends/gui/button.cjs

@@ -0,0 +1,114 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = void 0;
+exports.Button = Button;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Button — the gui-backend original.
+ *
+ * `variant`, `size`, `asChild`, `isLoading`, `buttonVariants`, and the
+ * `data-slot`/`data-variant`/`data-size` markers.
+ *
+ * The substrate is @hanzo/gui's Button FRAME (`Button.Frame`), not the compound
+ * `Button`. The compound is `Frame.styleable(...)`, i.e. an HOC — `styled()` over
+ * it does not compile style props to classes, so under `asChild` every variant
+ * style leaked onto the child as an invalid lowercase HTML attribute
+ * (`backgroundcolor="var(--background)"`) and nothing was styled. Extending the
+ * frame keeps one component with one API and makes `asChild` a first-class
+ * pattern; the frame already renders a real `<button>` on web and provides the
+ * styled context that `Button.Text` reads.
+ *
+ * Type size rides on that Text, never on the frame: `fontSize` is not a frame
+ * style prop, so setting it there leaked a `font-size="var(--f-size-3)"`
+ * attribute and every size rendered at the same 16px.
+ *
+ * The 44px touch floor comes from `touch()`, which is platform-correct on web
+ * as well as native — visual density stays at 36/32/40px.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const ink_1 = require("./ink.cjs");
+const gesture_1 = require("./gesture.cjs");
+const HEIGHT = {
+    default: 36,
+    sm: 32,
+    lg: 40,
+    icon: 36,
+    'icon-sm': 32,
+    'icon-lg': 40,
+};
+/** Type scale per size — applied to the Text host, which is what renders it. */
+const TYPE = {
+    default: '$3',
+    sm: '$2',
+    lg: '$3',
+    icon: '$3',
+    'icon-sm': '$2',
+    'icon-lg': '$3',
+};
+const Frame = (0, gui_1.styled)(gui_1.Button.Frame, {
+    name: 'Button',
+    items: 'center',
+    justify: 'center',
+    gap: '$2',
+    shrink: 0,
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    cursor: 'pointer',
+    variants: {
+        variant: {
+            default: { bg: '$color12', color: '$color1', hoverStyle: { opacity: 0.9 } },
+            primary: { bg: '$color12', color: '$color1', hoverStyle: { opacity: 0.9 } },
+            destructive: { bg: '$red9', color: '$white1', hoverStyle: { opacity: 0.9 } },
+            outline: {
+                bg: '$background',
+                color: '$color12',
+                borderColor: '$borderColor',
+                hoverStyle: { bg: '$color3' },
+            },
+            secondary: { bg: '$color4', color: '$color12', hoverStyle: { opacity: 0.8 } },
+            ghost: { bg: 'transparent', color: '$color12', hoverStyle: { bg: '$color3' } },
+            link: { bg: 'transparent', color: '$color12', hoverStyle: { textDecorationLine: 'underline' } },
+            linkFG: { bg: 'transparent', color: '$color12', hoverStyle: { textDecorationLine: 'underline' } },
+            linkMuted: {
+                bg: 'transparent',
+                color: '$color11',
+                hoverStyle: { color: '$color12', textDecorationLine: 'underline' },
+            },
+        },
+        size: {
+            default: { height: HEIGHT.default, px: '$4' },
+            sm: { height: HEIGHT.sm, px: '$3', gap: '$1.5' },
+            lg: { height: HEIGHT.lg, px: '$6' },
+            icon: { height: HEIGHT.icon, width: HEIGHT.icon, px: 0 },
+            'icon-sm': { height: HEIGHT['icon-sm'], width: HEIGHT['icon-sm'], px: 0 },
+            'icon-lg': { height: HEIGHT['icon-lg'], width: HEIGHT['icon-lg'], px: 0 },
+        },
+        disabled: {
+            true: { opacity: 0.5, pointerEvents: 'none', cursor: 'default' },
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+/**
+ * A stable class handle for hosts that hook buttons from CSS. Styling lives in
+ * the tokens; this only names the variant and size.
+ */
+const buttonVariants = ({ variant, size, className, } = {}) => [`hanzo-button`, `hanzo-button--${variant ?? 'default'}`, `hanzo-button--${size ?? 'default'}`, className]
+    .filter(Boolean)
+    .join(' ');
+exports.buttonVariants = buttonVariants;
+function Button({ className, variant = 'default', size = 'default', asChild = false, isLoading = false, disabled, children, ...props }) {
+    const resolved = size ?? 'default';
+    // gui's own `asChild` cannot merge into the child here: the Button frame bakes
+    // a `render: <button>`, so asChild WRAPS the child in a button and drops every
+    // compiled style (measured: `<button class="is_View "><a>…</a></button>`).
+    // `render` is the mechanism that merges — it emits the child's own tag carrying
+    // the full compiled class list. So asChild is expressed through render, and
+    // Button-as-link comes out as a styled <a> with valid markup.
+    const host = asChild && (0, react_1.isValidElement)(children) ? children : null;
+    const body = host ? host.props.children : children;
+    return ((0, jsx_runtime_1.jsxs)(Frame, { "data-slot": "button", "data-variant": variant ?? 'default', "data-size": resolved, variant: variant ?? 'default', size: resolved, render: host ? (0, react_1.createElement)(host.type, { ...host.props, children: undefined }) : undefined, disabled: disabled || isLoading, ...(0, gesture_1.touch)(HEIGHT[resolved], 44, 'y'), className: (0, exports.buttonVariants)({ variant, size, className }), ...props, children: [isLoading && (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small" }), (0, ink_1.ink)(body, gui_1.Button.Text, { fontSize: TYPE[resolved] })] }));
+}

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

@@ -1,32 +1,12 @@
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'primary' | 'linkFG' | 'linkMuted';
 export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/web").StackNonStyleProps & {
-    icon?: import("react").JSX.Element | import("react").FunctionComponent<{
-        color?: any;
-        size?: any;
-    }> | null;
-    iconAfter?: import("react").JSX.Element | import("react").FunctionComponent<{
-        color?: any;
-        size?: any;
-    }> | null;
-    scaleIcon?: number;
-    iconSize?: import("@hanzogui/web").SizeTokens;
-    type?: "submit" | "reset" | "button";
-    form?: string;
-    formAction?: string;
-    formEncType?: string;
-    formMethod?: string;
-    formNoValidate?: boolean;
-    formTarget?: string;
-    name?: string;
-    value?: string | readonly string[] | number;
-}, import("@hanzogui/web").StackStyleBase, {
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/web").StackNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     size?: number | "sm" | "lg" | "default" | import("@hanzogui/web").SizeTokens | "icon" | "icon-sm" | "icon-lg" | undefined;
     disabled?: boolean | undefined;
     unstyled?: boolean | undefined;
-    variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | "primary" | "linkFG" | "linkMuted" | "outlined" | undefined;
+    variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | "primary" | "linkFG" | "linkMuted" | "outlined" | undefined;
     circular?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
@@ -42,9 +22,9 @@ export declare const buttonVariants: ({ variant, size, className, }?: {
 export type ButtonProps = Omit<ComponentProps<typeof Frame>, 'variant' | 'size' | 'children'> & {
     variant?: ButtonVariant | null;
     size?: ButtonSize | null;
-    asChild?: boolean;
     isLoading?: boolean;
     children?: ReactNode;
 };
 declare function Button({ className, variant, size, asChild, isLoading, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/button.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAiC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK1F,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,GACN,SAAS,GACT,QAAQ,GACR,WAAW,CAAA;AAEf,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAqBjF,QAAA,MAAM,KAAK;;;;;;;;8CA8CT,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,gCAI5B;IAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,WAG1E,CAAA;AAEd,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,SAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CA2Bb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/button.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Button — the gui-backend original.
+ *
+ * `variant`, `size`, `asChild`, `isLoading`, `buttonVariants`, and the
+ * `data-slot`/`data-variant`/`data-size` markers.
+ *
+ * The substrate is @hanzo/gui's Button FRAME (`Button.Frame`), not the compound
+ * `Button`. The compound is `Frame.styleable(...)`, i.e. an HOC — `styled()` over
+ * it does not compile style props to classes, so under `asChild` every variant
+ * style leaked onto the child as an invalid lowercase HTML attribute
+ * (`backgroundcolor="var(--background)"`) and nothing was styled. Extending the
+ * frame keeps one component with one API and makes `asChild` a first-class
+ * pattern; the frame already renders a real `<button>` on web and provides the
+ * styled context that `Button.Text` reads.
+ *
+ * Type size rides on that Text, never on the frame: `fontSize` is not a frame
+ * style prop, so setting it there leaked a `font-size="var(--f-size-3)"`
+ * attribute and every size rendered at the same 16px.
+ *
+ * The 44px touch floor comes from `touch()`, which is platform-correct on web
+ * as well as native — visual density stays at 36/32/40px.
+ */
+import { Button as GuiButton, Spinner, styled } from '@hanzo/gui';
+import { createElement, isValidElement } from 'react';
+import { ink } from './ink.js';
+import { touch } from './gesture.js';
+const HEIGHT = {
+    default: 36,
+    sm: 32,
+    lg: 40,
+    icon: 36,
+    'icon-sm': 32,
+    'icon-lg': 40,
+};
+/** Type scale per size — applied to the Text host, which is what renders it. */
+const TYPE = {
+    default: '$3',
+    sm: '$2',
+    lg: '$3',
+    icon: '$3',
+    'icon-sm': '$2',
+    'icon-lg': '$3',
+};
+const Frame = styled(GuiButton.Frame, {
+    name: 'Button',
+    items: 'center',
+    justify: 'center',
+    gap: '$2',
+    shrink: 0,
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    cursor: 'pointer',
+    variants: {
+        variant: {
+            default: { bg: '$color12', color: '$color1', hoverStyle: { opacity: 0.9 } },
+            primary: { bg: '$color12', color: '$color1', hoverStyle: { opacity: 0.9 } },
+            destructive: { bg: '$red9', color: '$white1', hoverStyle: { opacity: 0.9 } },
+            outline: {
+                bg: '$background',
+                color: '$color12',
+                borderColor: '$borderColor',
+                hoverStyle: { bg: '$color3' },
+            },
+            secondary: { bg: '$color4', color: '$color12', hoverStyle: { opacity: 0.8 } },
+            ghost: { bg: 'transparent', color: '$color12', hoverStyle: { bg: '$color3' } },
+            link: { bg: 'transparent', color: '$color12', hoverStyle: { textDecorationLine: 'underline' } },
+            linkFG: { bg: 'transparent', color: '$color12', hoverStyle: { textDecorationLine: 'underline' } },
+            linkMuted: {
+                bg: 'transparent',
+                color: '$color11',
+                hoverStyle: { color: '$color12', textDecorationLine: 'underline' },
+            },
+        },
+        size: {
+            default: { height: HEIGHT.default, px: '$4' },
+            sm: { height: HEIGHT.sm, px: '$3', gap: '$1.5' },
+            lg: { height: HEIGHT.lg, px: '$6' },
+            icon: { height: HEIGHT.icon, width: HEIGHT.icon, px: 0 },
+            'icon-sm': { height: HEIGHT['icon-sm'], width: HEIGHT['icon-sm'], px: 0 },
+            'icon-lg': { height: HEIGHT['icon-lg'], width: HEIGHT['icon-lg'], px: 0 },
+        },
+        disabled: {
+            true: { opacity: 0.5, pointerEvents: 'none', cursor: 'default' },
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+/**
+ * A stable class handle for hosts that hook buttons from CSS. Styling lives in
+ * the tokens; this only names the variant and size.
+ */
+export const buttonVariants = ({ variant, size, className, } = {}) => [`hanzo-button`, `hanzo-button--${variant ?? 'default'}`, `hanzo-button--${size ?? 'default'}`, className]
+    .filter(Boolean)
+    .join(' ');
+function Button({ className, variant = 'default', size = 'default', asChild = false, isLoading = false, disabled, children, ...props }) {
+    const resolved = size ?? 'default';
+    // gui's own `asChild` cannot merge into the child here: the Button frame bakes
+    // a `render: <button>`, so asChild WRAPS the child in a button and drops every
+    // compiled style (measured: `<button class="is_View "><a>…</a></button>`).
+    // `render` is the mechanism that merges — it emits the child's own tag carrying
+    // the full compiled class list. So asChild is expressed through render, and
+    // Button-as-link comes out as a styled <a> with valid markup.
+    const host = asChild && isValidElement(children) ? children : null;
+    const body = host ? host.props.children : children;
+    return (_jsxs(Frame, { "data-slot": "button", "data-variant": variant ?? 'default', "data-size": resolved, variant: variant ?? 'default', size: resolved, render: host ? createElement(host.type, { ...host.props, children: undefined }) : undefined, disabled: disabled || isLoading, ...touch(HEIGHT[resolved], 44, 'y'), className: buttonVariants({ variant, size, className }), ...props, children: [isLoading && _jsx(Spinner, { size: "small" }), ink(body, GuiButton.Text, { fontSize: TYPE[resolved] })] }));
+}
+export { Button };
+//# sourceMappingURL=button.js.map

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

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

package/dist/backends/gui/card.cjs

@@ -0,0 +1,49 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContent = exports.CardDescription = exports.CardAction = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Card — surface, header, title, description, action, content, footer.
+ *
+ * The header is a row whose action sits at its end: gui/Yoga has no CSS grid,
+ * and a row is the one box model that also exists on native.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const PAD = 24;
+const CardFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Card',
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$6',
+    py: PAD,
+    gap: PAD,
+});
+const HeaderFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'CardHeader',
+    px: PAD,
+    gap: '$2',
+    items: 'flex-start',
+    justify: 'space-between',
+});
+const TitleFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'CardTitle', size: '$4', fontWeight: '600' });
+const DescriptionFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'CardDescription', size: '$2', color: '$color11' });
+const ActionFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'CardAction', self: 'flex-start', shrink: 0 });
+const ContentFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'CardContent', px: PAD });
+const FooterFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'CardFooter', px: PAD, items: 'center' });
+const Card = (p) => (0, jsx_runtime_1.jsx)(CardFrame, { ...(0, slot_1.slot)('card'), ...p });
+exports.Card = Card;
+const CardHeader = (p) => (0, jsx_runtime_1.jsx)(HeaderFrame, { ...(0, slot_1.slot)('card-header'), ...p });
+exports.CardHeader = CardHeader;
+const CardTitle = (p) => (0, jsx_runtime_1.jsx)(TitleFrame, { ...(0, slot_1.slot)('card-title'), ...p });
+exports.CardTitle = CardTitle;
+const CardDescription = (p) => (0, jsx_runtime_1.jsx)(DescriptionFrame, { ...(0, slot_1.slot)('card-description'), ...p });
+exports.CardDescription = CardDescription;
+const CardAction = (p) => (0, jsx_runtime_1.jsx)(ActionFrame, { ...(0, slot_1.slot)('card-action'), ...p });
+exports.CardAction = CardAction;
+const CardContent = (p) => (0, jsx_runtime_1.jsx)(ContentFrame, { ...(0, slot_1.slot)('card-content'), ...p });
+exports.CardContent = CardContent;
+const CardFooter = (p) => (0, jsx_runtime_1.jsx)(FooterFrame, { ...(0, slot_1.slot)('card-footer'), ...p });
+exports.CardFooter = CardFooter;

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

@@ -42,3 +42,4 @@ declare const CardAction: (p: CardActionProps) => import("react/jsx-runtime").JS
 declare const CardContent: (p: CardContentProps) => import("react/jsx-runtime").JSX.Element;
 declare const CardFooter: (p: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,QAAA,MAAM,SAAS;;;8CAQb,CAAA;AAEF,QAAA,MAAM,WAAW;;;8CAMf,CAAA;AAEF,QAAA,MAAM,UAAU;;;8CAA4E,CAAA;AAC5F,QAAA,MAAM,gBAAgB;;;8CAAkF,CAAA;AACxG,QAAA,MAAM,WAAW;;;8CAAwE,CAAA;AACzF,QAAA,MAAM,YAAY;;;8CAAmD,CAAA;AACrE,QAAA,MAAM,WAAW;;;8CAAmE,CAAA;AAEpF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AACxD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAChE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAC9D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC1E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAChE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AAClE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEhE,QAAA,MAAM,IAAI,GAAI,GAAG,SAAS,4CAA2C,CAAA;AACrE,QAAA,MAAM,UAAU,GAAI,GAAG,eAAe,4CAAoD,CAAA;AAC1F,QAAA,MAAM,SAAS,GAAI,GAAG,cAAc,4CAAkD,CAAA;AACtF,QAAA,MAAM,eAAe,GAAI,GAAG,oBAAoB,4CAA8D,CAAA;AAC9G,QAAA,MAAM,UAAU,GAAI,GAAG,eAAe,4CAAoD,CAAA;AAC1F,QAAA,MAAM,WAAW,GAAI,GAAG,gBAAgB,4CAAsD,CAAA;AAC9F,QAAA,MAAM,UAAU,GAAI,GAAG,eAAe,4CAAoD,CAAA;AAE1F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}