@hanzo/ui 8.0.43 → 8.0.45

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

@@ -9,7 +9,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `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.
+ *
+ * The reason to reach for it is that the box has an intrinsic height BEFORE its
+ * content loads. An `<img>` with no ratio is 0px tall until the bytes arrive,
+ * which is both the "media box rendered at zero height" defect and the layout
+ * shift when it finally does. Ratio first, content second — the box is never
+ * zero-height, so nothing below it ever moves.
+ *
+ * `overflow: hidden` is not decoration: the child is sized to FILL this box (see
+ * the `[data-slot='aspect-ratio'] > img` rule in styles/motion.css), and a
+ * cover-fitted image is by definition larger than its frame on one axis.
+ * `position: relative` makes this the containing block, so an absolutely
+ * positioned overlay — a play button, a scrim, a badge — lands on the media
+ * instead of on the page.
  */
 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 }));
+const AspectRatio = ({ ratio = 1, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-slot": "aspect-ratio", width: "100%", aspectRatio: ratio, overflow: "hidden", position: "relative", ...props, "data-ratio": "" }));
 exports.AspectRatio = AspectRatio;

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

@@ -4,6 +4,19 @@
  * `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.
+ *
+ * The reason to reach for it is that the box has an intrinsic height BEFORE its
+ * content loads. An `<img>` with no ratio is 0px tall until the bytes arrive,
+ * which is both the "media box rendered at zero height" defect and the layout
+ * shift when it finally does. Ratio first, content second — the box is never
+ * zero-height, so nothing below it ever moves.
+ *
+ * `overflow: hidden` is not decoration: the child is sized to FILL this box (see
+ * the `[data-slot='aspect-ratio'] > img` rule in styles/motion.css), and a
+ * cover-fitted image is by definition larger than its frame on one axis.
+ * `position: relative` makes this the containing block, so an absolutely
+ * positioned overlay — a play button, a scrim, a badge — lands on the media
+ * instead of on the page.
  */
 import { type YStackProps } from '@hanzo/gui';
 export interface AspectRatioProps extends YStackProps {

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

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

@@ -6,8 +6,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * `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.
+ *
+ * The reason to reach for it is that the box has an intrinsic height BEFORE its
+ * content loads. An `<img>` with no ratio is 0px tall until the bytes arrive,
+ * which is both the "media box rendered at zero height" defect and the layout
+ * shift when it finally does. Ratio first, content second — the box is never
+ * zero-height, so nothing below it ever moves.
+ *
+ * `overflow: hidden` is not decoration: the child is sized to FILL this box (see
+ * the `[data-slot='aspect-ratio'] > img` rule in styles/motion.css), and a
+ * cover-fitted image is by definition larger than its frame on one axis.
+ * `position: relative` makes this the containing block, so an absolutely
+ * positioned overlay — a play button, a scrim, a badge — lands on the media
+ * instead of on the page.
  */
 import { YStack } from '@hanzo/gui';
-const AspectRatio = ({ ratio = 1, ...props }) => (_jsx(YStack, { "data-slot": "aspect-ratio", width: "100%", aspectRatio: ratio, ...props }));
+const AspectRatio = ({ ratio = 1, ...props }) => (_jsx(YStack, { "data-slot": "aspect-ratio", width: "100%", aspectRatio: ratio, overflow: "hidden", position: "relative", ...props, "data-ratio": "" }));
 export { AspectRatio };
 //# sourceMappingURL=aspect-ratio.js.map

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

@@ -1 +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"}
+{"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../../src/backends/gui/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;GAmBG;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,iBACK,cAAc,EACxB,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,UAAU,KACf,KAAK,gBAME,EAAE,GACb,CACH,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/backends/gui/badge.cjs

@@ -79,7 +79,7 @@ const BadgeText = (0, gui_1.styled)(gui_1.SizableText, {
  * 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'}`;
+const badgeVariants = ({ variant } = {}) => `badge 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.map

@@ -1 +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;AAkEV;;;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"}
+{"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;AAkEV;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,cAAa;IAAE,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CAAO,WAC1C,CAAA;AAEvC;;;;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

@@ -75,7 +75,7 @@ const BadgeText = styled(SizableText, {
  * 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 const badgeVariants = ({ variant } = {}) => `badge 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) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE7E,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAYjC,iFAAiF;AACjF,MAAM,SAAS,GAAG,EAAE,CAAA;AACpB,MAAM,MAAM,GAAG,EAAE,CAAA;AAEjB,MAAM,YAAY,GAAG,eAAe,CAAC,mBAAmB,CAA4B,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;AAE3G,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;IAChC,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,YAAY;IACrB,0EAA0E;IAC1E,6EAA6E;IAC7E,+EAA+E;IAC/E,6EAA6E;IAC7E,qEAAqE;IACrE,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,MAAM;IACX,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,QAAQ;IAElB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE;YAC3B,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE;YAC5B,WAAW,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE;YAC5B,OAAO,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE;YAC3D,KAAK,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE;YAC3D,IAAI,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;YAC3B,cAAc,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE;YAC3C,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE;SACpE;KACO;IAEV,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;CACxC,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,EAAE;IACpC,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,YAAY;IACrB,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,KAAK;IAEjB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE;YAChC,WAAW,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YACjC,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE;YAC9B,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE;YAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE;YAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE;YACxD,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE;SAC5E;KACO;CACX,CAAC,CAAA;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,KAAwC,EAAE,EAAE,EAAE,CACnF,4BAA4B,OAAO,IAAI,SAAS,EAAE,CAAA;AAYpD,MAAM,UAAU,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,KAAK,EACG;IACX,OAAO,CACL,KAAC,UAAU,iBACC,OAAO,kBACH,OAAO,EACrB,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,KAChC,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,CAAC,EACjC,SAAS,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACvE,KAAiD,YAErD,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,GACnC,CACd,CAAA;AACH,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/button.cjs

@@ -96,12 +96,36 @@ const Frame = (0, gui_1.styled)(gui_1.Button.Frame, {
             },
         },
         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 },
+            // minHeight, NOT height. A control has to be a predictable size, and it
+            // still is: text at this type scale is shorter than the box, so every
+            // ordinary Button renders at exactly these numbers. What changes is the
+            // failure: a pinned `height` CLIPS anything taller, which is how a 119px
+            // thumbnail shipped rendered as a 30px sliver with a green build. A floor
+            // cannot clip — the button grows and the mistake is visible immediately
+            // instead of silently cropping content.
+            //
+            // Same for the icon sizes' width: a floor keeps them square without
+            // truncating a child that is wider than the box.
+            // `height: 'auto'` + `minHeight`, and BOTH halves are load-bearing.
+            //
+            // minHeight alone is not enough: dropping `height` lets GuiButton.Frame's
+            // own size variant supply one (measured: 44px), which re-pins the box and
+            // ALSO makes every ordinary button 8px taller. `height: 'auto'` is what
+            // turns that off, and minHeight is what keeps the control its designed
+            // size once it is off.
+            //
+            // Together: text is shorter than the floor, so an ordinary Button still
+            // measures exactly these numbers. Anything taller GROWS instead of being
+            // cropped — a pinned height is how a 119px thumbnail shipped rendered as
+            // a 36px sliver with a green build. Both directions are asserted in
+            // consumer.spec.ts, because getting one right and the other wrong is
+            // exactly what happened on the first attempt.
+            default: { height: 'auto', minHeight: HEIGHT.default, px: '$4' },
+            sm: { height: 'auto', minHeight: HEIGHT.sm, px: '$3', gap: '$1.5' },
+            lg: { height: 'auto', minHeight: HEIGHT.lg, px: '$6' },
+            icon: { height: 'auto', minHeight: HEIGHT.icon, width: 'auto', minWidth: HEIGHT.icon, px: 0 },
+            'icon-sm': { height: 'auto', minHeight: HEIGHT['icon-sm'], width: 'auto', minWidth: HEIGHT['icon-sm'], px: 0 },
+            'icon-lg': { height: 'auto', minHeight: HEIGHT['icon-lg'], width: 'auto', minWidth: HEIGHT['icon-lg'], px: 0 },
         },
         disabled: {
             true: { opacity: 0.5, pointerEvents: 'none', cursor: 'default' },
@@ -113,8 +137,11 @@ const Frame = (0, gui_1.styled)(gui_1.Button.Frame, {
  * 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)
+const buttonVariants = ({ variant, size, className, } = {}) => 
+// Variant and size share the `btn-` namespace, so the two defaults collide on
+// `btn-default`. A Set emits it once; no name is used by both a variant and a
+// size, so nothing else can merge.
+[...new Set([`btn`, `btn-${variant ?? 'default'}`, `btn-${size ?? 'default'}`, className].filter(Boolean))]
     .join(' ');
 exports.buttonVariants = buttonVariants;
 function Button({ className, variant = 'default', size = 'default', asChild = false, isLoading = false, disabled, children, ...props }) {

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

@@ -1 +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;;;;;;;;8CA+DT,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;IACpB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,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"}
+{"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;;;;;;;;8CAuFT,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,WAK1E,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;IACpB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,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

@@ -92,12 +92,36 @@ const Frame = styled(GuiButton.Frame, {
             },
         },
         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 },
+            // minHeight, NOT height. A control has to be a predictable size, and it
+            // still is: text at this type scale is shorter than the box, so every
+            // ordinary Button renders at exactly these numbers. What changes is the
+            // failure: a pinned `height` CLIPS anything taller, which is how a 119px
+            // thumbnail shipped rendered as a 30px sliver with a green build. A floor
+            // cannot clip — the button grows and the mistake is visible immediately
+            // instead of silently cropping content.
+            //
+            // Same for the icon sizes' width: a floor keeps them square without
+            // truncating a child that is wider than the box.
+            // `height: 'auto'` + `minHeight`, and BOTH halves are load-bearing.
+            //
+            // minHeight alone is not enough: dropping `height` lets GuiButton.Frame's
+            // own size variant supply one (measured: 44px), which re-pins the box and
+            // ALSO makes every ordinary button 8px taller. `height: 'auto'` is what
+            // turns that off, and minHeight is what keeps the control its designed
+            // size once it is off.
+            //
+            // Together: text is shorter than the floor, so an ordinary Button still
+            // measures exactly these numbers. Anything taller GROWS instead of being
+            // cropped — a pinned height is how a 119px thumbnail shipped rendered as
+            // a 36px sliver with a green build. Both directions are asserted in
+            // consumer.spec.ts, because getting one right and the other wrong is
+            // exactly what happened on the first attempt.
+            default: { height: 'auto', minHeight: HEIGHT.default, px: '$4' },
+            sm: { height: 'auto', minHeight: HEIGHT.sm, px: '$3', gap: '$1.5' },
+            lg: { height: 'auto', minHeight: HEIGHT.lg, px: '$6' },
+            icon: { height: 'auto', minHeight: HEIGHT.icon, width: 'auto', minWidth: HEIGHT.icon, px: 0 },
+            'icon-sm': { height: 'auto', minHeight: HEIGHT['icon-sm'], width: 'auto', minWidth: HEIGHT['icon-sm'], px: 0 },
+            'icon-lg': { height: 'auto', minHeight: HEIGHT['icon-lg'], width: 'auto', minWidth: HEIGHT['icon-lg'], px: 0 },
         },
         disabled: {
             true: { opacity: 0.5, pointerEvents: 'none', cursor: 'default' },
@@ -109,8 +133,11 @@ const Frame = styled(GuiButton.Frame, {
  * 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)
+export const buttonVariants = ({ variant, size, className, } = {}) => 
+// Variant and size share the `btn-` namespace, so the two defaults collide on
+// `btn-default`. A Set emits it once; no name is used by both a variant and a
+// size, so nothing else can merge.
+[...new Set([`btn`, `btn-${variant ?? 'default'}`, `btn-${size ?? 'default'}`, className].filter(Boolean))]
     .join(' ');
 function Button({ className, variant = 'default', size = 'default', asChild = false, isLoading = false, disabled, children, ...props }) {
     const resolved = size ?? 'default';

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

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

package/dist/backends/gui/card.cjs

@@ -1,7 +1,7 @@
 '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;
+exports.CardMedia = 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.
@@ -10,6 +10,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * and a row is the one box model that also exists on native.
  */
 const gui_1 = require("@hanzo/gui");
+const aspect_ratio_1 = require("./aspect-ratio.cjs");
+const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
 const PAD = 24;
 const CardFrame = (0, gui_1.styled)(gui_1.YStack, {
@@ -39,8 +41,24 @@ const DescriptionFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'CardDescr
 const ActionFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'CardAction', self: 'flex-end', 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 Card = ({ interactive, onPress, ...p }) => ((0, jsx_runtime_1.jsx)(CardFrame, { ...(0, slot_1.slot)('card'), ...(interactive
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            cursor: 'pointer',
+            hoverStyle: { borderColor: '$color8' },
+            focusStyle: { borderColor: '$color8', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$color8' },
+            // A div with role="button" is not a button: the browser gives it no
+            // keyboard activation, so it has to be spelled out or the card is
+            // mouse-only. Space must also preventDefault or the page scrolls.
+            onKeyDown: (e) => {
+                if (e.key !== 'Enter' && e.key !== ' ')
+                    return;
+                e.preventDefault();
+                onPress?.(e);
+            },
+        }
+        : null), onPress: onPress, ...p }));
 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 });
@@ -49,7 +67,29 @@ const CardDescription = (p) => (0, jsx_runtime_1.jsx)(DescriptionFrame, { ...(0,
 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 });
+const CardContent = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(ContentFrame, { ...(0, slot_1.slot)('card-content'), ...p, children: (0, ink_1.ink)(children) }));
 exports.CardContent = CardContent;
-const CardFooter = (p) => (0, jsx_runtime_1.jsx)(FooterFrame, { ...(0, slot_1.slot)('card-footer'), ...p });
+const CardFooter = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(FooterFrame, { ...(0, slot_1.slot)('card-footer'), ...p, children: (0, ink_1.ink)(children) }));
 exports.CardFooter = CardFooter;
+const CardMedia = ({ ratio = 16 / 10, ...p }) => ((0, jsx_runtime_1.jsx)(aspect_ratio_1.AspectRatio, { ...(0, slot_1.slot)('card-media'), ratio: ratio, mt: -PAD, ...p }));
+exports.CardMedia = CardMedia;
+/**
+ * The dot-namespace. `Card.Media`, `Card.Body`, `Card.Title`, `Card.Meta` are
+ * the SAME components as the named exports beside them, not second copies —
+ * `withStaticProperties` hangs the existing implementations off `Card`. Nothing
+ * here can drift from the named export, because there is nothing here to drift.
+ *
+ * The named exports keep their shadcn-lineage spelling because 79 call sites in
+ * hanzo.app are written against it; renaming them would be a breaking change
+ * bought for nothing.
+ */
+const CardNamespace = (0, gui_1.withStaticProperties)(Card, {
+    Media: CardMedia,
+    Header: CardHeader,
+    Title: CardTitle,
+    Meta: CardDescription,
+    Body: CardContent,
+    Action: CardAction,
+    Footer: CardFooter,
+});
+exports.Card = CardNamespace;

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

@@ -1,4 +1,5 @@
 import type { ComponentProps } from 'react';
+import { type AspectRatioProps } from './aspect-ratio.js';
 declare const CardFrame: 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;
@@ -27,19 +28,63 @@ declare const FooterFrame: import("@hanzogui/web").GuiComponent<import("@hanzogu
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
-export type CardProps = ComponentProps<typeof CardFrame>;
+export type CardProps = ComponentProps<typeof CardFrame> & {
+    /**
+     * The whole card is the control. Makes it focusable, gives it the button role
+     * and the Enter/Space keys, and lights it on hover and focus.
+     *
+     * This exists so nobody wraps a Card in a <Button> again. A Button pins its
+     * own height — correctly, it is a control — and a card put inside one gets
+     * clipped to a 30px sliver. The affordance belongs on the surface, not around
+     * it.
+     */
+    interactive?: boolean;
+};
 export type CardHeaderProps = ComponentProps<typeof HeaderFrame>;
 export type CardTitleProps = ComponentProps<typeof TitleFrame>;
 export type CardDescriptionProps = ComponentProps<typeof DescriptionFrame>;
 export type CardActionProps = ComponentProps<typeof ActionFrame>;
 export type CardContentProps = ComponentProps<typeof ContentFrame>;
 export type CardFooterProps = ComponentProps<typeof FooterFrame>;
-declare const Card: (p: CardProps) => import("react/jsx-runtime").JSX.Element;
 declare const CardHeader: (p: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
 declare const CardTitle: (p: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
 declare const CardDescription: (p: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 declare const CardAction: (p: CardActionProps) => import("react/jsx-runtime").JSX.Element;
-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 };
+declare const CardContent: ({ children, ...p }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardFooter: ({ children, ...p }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * CardMedia — the picture at the top of a card, edge to edge.
+ *
+ * Full-bleed needs one correction and only one: the Card frame has vertical
+ * padding and no horizontal padding (the header/content/footer carry their own
+ * `px`), so the media is already the full width and only has to climb back over
+ * the frame's top padding. Hence `mt: -PAD` and nothing else — no negative
+ * horizontal margin, which is the version that leaks past a rounded corner.
+ *
+ * It is an AspectRatio, so it has a height before the image loads. That is the
+ * whole point: a card whose media is a bare <img> is a card that is 0px tall
+ * until the network answers, and then jumps.
+ */
+export type CardMediaProps = AspectRatioProps;
+declare const CardMedia: ({ ratio, ...p }: CardMediaProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The dot-namespace. `Card.Media`, `Card.Body`, `Card.Title`, `Card.Meta` are
+ * the SAME components as the named exports beside them, not second copies —
+ * `withStaticProperties` hangs the existing implementations off `Card`. Nothing
+ * here can drift from the named export, because there is nothing here to drift.
+ *
+ * The named exports keep their shadcn-lineage spelling because 79 call sites in
+ * hanzo.app are written against it; renaming them would be a breaking change
+ * bought for nothing.
+ */
+declare const CardNamespace: (({ interactive, onPress, ...p }: CardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Media: ({ ratio, ...p }: CardMediaProps) => import("react/jsx-runtime").JSX.Element;
+    Header: (p: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Title: (p: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Meta: (p: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, ...p }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+    Action: (p: CardActionProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, ...p }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { CardNamespace as Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia, };
 //# sourceMappingURL=card.d.ts.map

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

@@ -1 +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;AASF,QAAA,MAAM,WAAW;;;8CAKf,CAAA;AAEF,QAAA,MAAM,UAAU;;;8CAA4E,CAAA;AAC5F,QAAA,MAAM,gBAAgB;;;8CAAkF,CAAA;AACxG,QAAA,MAAM,WAAW;;;8CAAsE,CAAA;AACvF,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"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAMnE,QAAA,MAAM,SAAS;;;8CAQb,CAAA;AASF,QAAA,MAAM,WAAW;;;8CAKf,CAAA;AAEF,QAAA,MAAM,UAAU;;;8CAA4E,CAAA;AAC5F,QAAA,MAAM,gBAAgB;;;8CAAkF,CAAA;AACxG,QAAA,MAAM,WAAW;;;8CAAsE,CAAA;AACvF,QAAA,MAAM,YAAY;;;8CAAmD,CAAA;AACrE,QAAA,MAAM,WAAW;;;8CAAmE,CAAA;AAEpF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AACD,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;AA0BhE,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,oBAAoB,gBAAgB,4CAExD,CAAA;AACD,QAAA,MAAM,UAAU,GAAI,oBAAoB,eAAe,4CAEtD,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAA;AAC7C,QAAA,MAAM,SAAS,GAAI,iBAA2B,cAAc,4CAE3D,CAAA;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,oCA/D2B,SAAS;6BAiDT,cAAc;gBAzBrC,eAAe;eAChB,cAAc;cACR,oBAAoB;+BAEP,gBAAgB;gBADlC,eAAe;iCAIE,eAAe;CAwCrD,CAAA;AAEF,OAAO,EACL,aAAa,IAAI,IAAI,EACrB,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAA"}

package/dist/backends/gui/card.js

@@ -6,7 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * 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.
  */
-import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { SizableText, XStack, YStack, styled, withStaticProperties } from '@hanzo/gui';
+import { AspectRatio } from './aspect-ratio.js';
+import { ink } from './ink.js';
 import { slot } from './slot.js';
 const PAD = 24;
 const CardFrame = styled(YStack, {
@@ -36,12 +38,49 @@ const DescriptionFrame = styled(SizableText, { name: 'CardDescription', size: '$
 const ActionFrame = styled(XStack, { name: 'CardAction', self: 'flex-end', shrink: 0 });
 const ContentFrame = styled(YStack, { name: 'CardContent', px: PAD });
 const FooterFrame = styled(XStack, { name: 'CardFooter', px: PAD, items: 'center' });
-const Card = (p) => _jsx(CardFrame, { ...slot('card'), ...p });
+const Card = ({ interactive, onPress, ...p }) => (_jsx(CardFrame, { ...slot('card'), ...(interactive
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            cursor: 'pointer',
+            hoverStyle: { borderColor: '$color8' },
+            focusStyle: { borderColor: '$color8', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$color8' },
+            // A div with role="button" is not a button: the browser gives it no
+            // keyboard activation, so it has to be spelled out or the card is
+            // mouse-only. Space must also preventDefault or the page scrolls.
+            onKeyDown: (e) => {
+                if (e.key !== 'Enter' && e.key !== ' ')
+                    return;
+                e.preventDefault();
+                onPress?.(e);
+            },
+        }
+        : null), onPress: onPress, ...p }));
 const CardHeader = (p) => _jsx(HeaderFrame, { ...slot('card-header'), ...p });
 const CardTitle = (p) => _jsx(TitleFrame, { ...slot('card-title'), ...p });
 const CardDescription = (p) => _jsx(DescriptionFrame, { ...slot('card-description'), ...p });
 const CardAction = (p) => _jsx(ActionFrame, { ...slot('card-action'), ...p });
-const CardContent = (p) => _jsx(ContentFrame, { ...slot('card-content'), ...p });
-const CardFooter = (p) => _jsx(FooterFrame, { ...slot('card-footer'), ...p });
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+const CardContent = ({ children, ...p }) => (_jsx(ContentFrame, { ...slot('card-content'), ...p, children: ink(children) }));
+const CardFooter = ({ children, ...p }) => (_jsx(FooterFrame, { ...slot('card-footer'), ...p, children: ink(children) }));
+const CardMedia = ({ ratio = 16 / 10, ...p }) => (_jsx(AspectRatio, { ...slot('card-media'), ratio: ratio, mt: -PAD, ...p }));
+/**
+ * The dot-namespace. `Card.Media`, `Card.Body`, `Card.Title`, `Card.Meta` are
+ * the SAME components as the named exports beside them, not second copies —
+ * `withStaticProperties` hangs the existing implementations off `Card`. Nothing
+ * here can drift from the named export, because there is nothing here to drift.
+ *
+ * The named exports keep their shadcn-lineage spelling because 79 call sites in
+ * hanzo.app are written against it; renaming them would be a breaking change
+ * bought for nothing.
+ */
+const CardNamespace = withStaticProperties(Card, {
+    Media: CardMedia,
+    Header: CardHeader,
+    Title: CardTitle,
+    Meta: CardDescription,
+    Body: CardContent,
+    Action: CardAction,
+    Footer: CardFooter,
+});
+export { CardNamespace as Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia, };
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,GAAG,GAAG,EAAE,CAAA;AAEd,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC/B,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,aAAa;IACjB,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,GAAG;IACP,GAAG,EAAE,GAAG;CACT,CAAC,CAAA;AAEF,oEAAoE;AACpE,4EAA4E;AAC5E,2EAA2E;AAC3E,oEAAoE;AACpE,0EAA0E;AAC1E,sEAAsE;AACtE,6EAA6E;AAC7E,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IACjC,IAAI,EAAE,YAAY;IAClB,EAAE,EAAE,GAAG;IACP,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,YAAY;CACpB,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAA;AAC5F,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAA;AACxG,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;AACvF,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;AACrE,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;AAUpF,MAAM,IAAI,GAAG,CAAC,CAAY,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,IAAI,CAAC,MAAM,CAAC,KAAM,CAAC,GAAI,CAAA;AACrE,MAAM,UAAU,GAAG,CAAC,CAAkB,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAC1F,MAAM,SAAS,GAAG,CAAC,CAAiB,EAAE,EAAE,CAAC,KAAC,UAAU,OAAK,IAAI,CAAC,YAAY,CAAC,KAAM,CAAC,GAAI,CAAA;AACtF,MAAM,eAAe,GAAG,CAAC,CAAuB,EAAE,EAAE,CAAC,KAAC,gBAAgB,OAAK,IAAI,CAAC,kBAAkB,CAAC,KAAM,CAAC,GAAI,CAAA;AAC9G,MAAM,UAAU,GAAG,CAAC,CAAkB,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAC1F,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,IAAI,CAAC,cAAc,CAAC,KAAM,CAAC,GAAI,CAAA;AAC9F,MAAM,UAAU,GAAG,CAAC,CAAkB,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAE1F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/collapsible.cjs

@@ -5,11 +5,16 @@ exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible =
 const jsx_runtime_1 = require("react/jsx-runtime");
 /** Collapsible — @hanzogui/collapsible's three parts under the flat names. */
 const gui_1 = require("@hanzo/gui");
+const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const Collapsible = (p) => (0, jsx_runtime_1.jsx)(gui_1.Collapsible, { ...(0, slot_1.slot)('collapsible'), ...p });
 exports.Collapsible = Collapsible;
-const CollapsibleTrigger = (p) => ((0, jsx_runtime_1.jsx)(gui_1.Collapsible.Trigger, { ...(0, slot_1.slot)('collapsible-trigger'), unstyled: true, ...(0, gesture_1.touch)(28), ...p }));
+const CollapsibleTrigger = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Collapsible.Trigger, { ...(0, slot_1.slot)('collapsible-trigger'), unstyled: true, 
+    // `unstyled` means gui applies nothing — which on web leaves the UA's own
+    // button chrome, and a native <button> is #efefef with a 2px outset black
+    // border. Unstyled must mean "no chrome", not "the browser's chrome".
+    bg: "transparent", borderWidth: 0, cursor: "pointer", ...(0, gesture_1.touch)(28), ...p, children: (0, ink_1.ink)(children, undefined, { color: '$color12' }) }));
 exports.CollapsibleTrigger = CollapsibleTrigger;
 const CollapsibleContent = (p) => ((0, jsx_runtime_1.jsx)(gui_1.Collapsible.Content, { ...(0, slot_1.slot)('collapsible-content'), ...p }));
 exports.CollapsibleContent = CollapsibleContent;

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

@@ -5,7 +5,7 @@ export type CollapsibleProps = ComponentProps<typeof GuiCollapsible>;
 export type CollapsibleTriggerProps = ComponentProps<typeof GuiCollapsible.Trigger>;
 export type CollapsibleContentProps = ComponentProps<typeof GuiCollapsible.Content>;
 declare const Collapsible: (p: CollapsibleProps) => import("react/jsx-runtime").JSX.Element;
-declare const CollapsibleTrigger: (p: CollapsibleTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleTrigger: ({ children, ...p }: CollapsibleTriggerProps) => import("react/jsx-runtime").JSX.Element;
 declare const CollapsibleContent: (p: CollapsibleContentProps) => import("react/jsx-runtime").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
 //# sourceMappingURL=collapsible.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/collapsible.tsx"],"names":[],"mappings":"AAEA,8EAA8E;AAC9E,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AACpE,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AACnF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,WAAW,GAAI,GAAG,gBAAgB,4CAAuD,CAAA;AAC/F,QAAA,MAAM,kBAAkB,GAAI,GAAG,uBAAuB,4CAErD,CAAA;AACD,QAAA,MAAM,kBAAkB,GAAI,GAAG,uBAAuB,4CAErD,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/collapsible.tsx"],"names":[],"mappings":"AAEA,8EAA8E;AAC9E,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AACpE,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AACnF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,WAAW,GAAI,GAAG,gBAAgB,4CAAuD,CAAA;AAC/F,QAAA,MAAM,kBAAkB,GAAI,oBAAoB,uBAAuB,4CAetE,CAAA;AACD,QAAA,MAAM,kBAAkB,GAAI,GAAG,uBAAuB,4CAErD,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/backends/gui/collapsible.js

@@ -2,10 +2,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Collapsible — @hanzogui/collapsible's three parts under the flat names. */
 import { Collapsible as GuiCollapsible } from '@hanzo/gui';
+import { ink } from './ink.js';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 const Collapsible = (p) => _jsx(GuiCollapsible, { ...slot('collapsible'), ...p });
-const CollapsibleTrigger = (p) => (_jsx(GuiCollapsible.Trigger, { ...slot('collapsible-trigger'), unstyled: true, ...touch(28), ...p }));
+const CollapsibleTrigger = ({ children, ...p }) => (_jsx(GuiCollapsible.Trigger, { ...slot('collapsible-trigger'), unstyled: true, 
+    // `unstyled` means gui applies nothing — which on web leaves the UA's own
+    // button chrome, and a native <button> is #efefef with a 2px outset black
+    // border. Unstyled must mean "no chrome", not "the browser's chrome".
+    bg: "transparent", borderWidth: 0, cursor: "pointer", ...touch(28), ...p, children: ink(children, undefined, { color: '$color12' }) }));
 const CollapsibleContent = (p) => (_jsx(GuiCollapsible.Content, { ...slot('collapsible-content'), ...p }));
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
 //# sourceMappingURL=collapsible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../../../src/backends/gui/collapsible.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,8EAA8E;AAC9E,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAMjC,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE,CAAC,KAAC,cAAc,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAC/F,MAAM,kBAAkB,GAAG,CAAC,CAA0B,EAAE,EAAE,CAAC,CACzD,KAAC,cAAc,CAAC,OAAO,OAAK,IAAI,CAAC,qBAAqB,CAAC,EAAE,QAAQ,WAAK,KAAK,CAAC,EAAE,CAAC,KAAM,CAAC,GAAI,CAC3F,CAAA;AACD,MAAM,kBAAkB,GAAG,CAAC,CAA0B,EAAE,EAAE,CAAC,CACzD,KAAC,cAAc,CAAC,OAAO,OAAK,IAAI,CAAC,qBAAqB,CAAC,KAAM,CAAC,GAAI,CACnE,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../../../src/backends/gui/collapsible.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,8EAA8E;AAC9E,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AAE1D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAMjC,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE,CAAC,KAAC,cAAc,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAC/F,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,EAA2B,EAAE,EAAE,CAAC,CAC1E,KAAC,cAAc,CAAC,OAAO,OACjB,IAAI,CAAC,qBAAqB,CAAC,EAC/B,QAAQ;IACR,0EAA0E;IAC1E,0EAA0E;IAC1E,sEAAsE;IACtE,EAAE,EAAC,aAAa,EAChB,WAAW,EAAE,CAAC,EACd,MAAM,EAAC,SAAS,KACZ,KAAK,CAAC,EAAE,CAAC,KACT,CAAC,YAEJ,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,GACzB,CAC1B,CAAA;AACD,MAAM,kBAAkB,GAAG,CAAC,CAA0B,EAAE,EAAE,CAAC,CACzD,KAAC,cAAc,CAAC,OAAO,OAAK,IAAI,CAAC,qBAAqB,CAAC,KAAM,CAAC,GAAI,CACnE,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}