@hanzo/ui 8.0.44 → 8.0.46

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/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' },

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,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"}
+{"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' },

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,7 @@ 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;
@@ -40,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 });
@@ -54,3 +71,25 @@ const CardContent = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(ContentFrame
 exports.CardContent = CardContent;
 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: ({ children, ...p }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
 declare const CardFooter: ({ children, ...p }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+/**
+ * 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;AAM3C,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,oBAAoB,gBAAgB,4CAExD,CAAA;AACD,QAAA,MAAM,UAAU,GAAI,oBAAoB,eAAe,4CAEtD,CAAA;AAED,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,8 @@ 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;
@@ -37,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 = ({ children, ...p }) => (_jsx(ContentFrame, { ...slot('card-content'), ...p, children: ink(children) }));
 const CardFooter = ({ children, ...p }) => (_jsx(FooterFrame, { ...slot('card-footer'), ...p, children: ink(children) }));
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+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":"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"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/grid.cjs

@@ -0,0 +1,61 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Grid — a real CSS grid whose tracks come from the CONTAINER, not the children.
+ *
+ * This exists to kill a specific shipped defect: hand-rolled
+ * `width="calc(25% - 7.5px)"` grids that collapse asymmetrically. That shape is
+ * broken by construction — each child computes its own width, so the row is only
+ * even while every child agrees, and one long word or one `box-sizing` surprise
+ * makes the row ragged. Nothing about it can be fixed by tuning the number.
+ *
+ * Here the parent declares the tracks once and the children have no say. Equal
+ * columns are structural, not arithmetic, and no child can widen its own track.
+ *
+ * Why a plain div and not a gui YStack: gui's box model is Yoga, which is
+ * flexbox and has no grid — a YStack would compile its own `display:flex`
+ * atomic class and fight the grid. Inline styles, not a stylesheet class, so
+ * there is no rule to fail to ship: this package's own checker exists because
+ * "class with no rule" has shipped here three times.
+ *
+ * The two track formulas, both deliberate:
+ *
+ *   auto  repeat(auto-fill, minmax(min(Npx, 100%), 1fr))
+ *         The `min(Npx, 100%)` is what makes it safe below N: a bare
+ *         `minmax(240px, 1fr)` forces a 240px track inside a 200px phone and
+ *         overflows the viewport horizontally. Responsive with ZERO breakpoint
+ *         props — the wrap count follows the container, so the same tree is
+ *         right at 390 and at 1280.
+ *
+ *   cols  repeat(n, minmax(0, 1fr))
+ *         `1fr` alone means `minmax(auto, 1fr)`, and `auto` floors the track at
+ *         the content's min-content width — so one long unbroken string pushes
+ *         its own column wider and every sibling narrower. That IS the ragged
+ *         row. `minmax(0, 1fr)` is the fix.
+ *
+ * `[data-slot='grid'] > *` also gets `min-width: 0` in the stylesheet, for the
+ * same reason: a grid item's default `min-width: auto` lets its content set the
+ * floor and blow the track out.
+ */
+const gui_1 = require("@hanzo/gui");
+/** `'$3'` -> 12. A raw number passes through as px. */
+const space = (v, fallback) => {
+    if (v == null)
+        return fallback;
+    if (typeof v === 'number')
+        return v;
+    const t = (0, gui_1.getTokenValue)(v, 'space');
+    return typeof t === 'number' ? t : fallback;
+};
+const Grid = ({ min = 240, cols, gap = '$3', style, ...props }) => {
+    const g = space(gap, 12);
+    const columns = cols
+        ? `repeat(${cols}, minmax(0, 1fr))`
+        : `repeat(auto-fill, minmax(min(${min}px, 100%), 1fr))`;
+    const grid = { display: 'grid', gridTemplateColumns: columns, gap: g };
+    return (0, jsx_runtime_1.jsx)("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
+};
+exports.Grid = Grid;

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

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * Narrowest a column may get before the grid drops one. The whole responsive
+     * story: no breakpoints, no props per screen size.
+     */
+    min?: number;
+    /** Fixed column count. Overrides `min` — use it when the count is the design. */
+    cols?: number;
+    /** A `$n` space token or a raw px number. */
+    gap?: number | string;
+    children?: ReactNode;
+}
+declare const Grid: ({ min, cols, gap, style, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
+export { Grid };
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAUD,QAAA,MAAM,IAAI,GAAI,qCAAkD,SAAS,4CAOxE,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/backends/gui/grid.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Grid — a real CSS grid whose tracks come from the CONTAINER, not the children.
+ *
+ * This exists to kill a specific shipped defect: hand-rolled
+ * `width="calc(25% - 7.5px)"` grids that collapse asymmetrically. That shape is
+ * broken by construction — each child computes its own width, so the row is only
+ * even while every child agrees, and one long word or one `box-sizing` surprise
+ * makes the row ragged. Nothing about it can be fixed by tuning the number.
+ *
+ * Here the parent declares the tracks once and the children have no say. Equal
+ * columns are structural, not arithmetic, and no child can widen its own track.
+ *
+ * Why a plain div and not a gui YStack: gui's box model is Yoga, which is
+ * flexbox and has no grid — a YStack would compile its own `display:flex`
+ * atomic class and fight the grid. Inline styles, not a stylesheet class, so
+ * there is no rule to fail to ship: this package's own checker exists because
+ * "class with no rule" has shipped here three times.
+ *
+ * The two track formulas, both deliberate:
+ *
+ *   auto  repeat(auto-fill, minmax(min(Npx, 100%), 1fr))
+ *         The `min(Npx, 100%)` is what makes it safe below N: a bare
+ *         `minmax(240px, 1fr)` forces a 240px track inside a 200px phone and
+ *         overflows the viewport horizontally. Responsive with ZERO breakpoint
+ *         props — the wrap count follows the container, so the same tree is
+ *         right at 390 and at 1280.
+ *
+ *   cols  repeat(n, minmax(0, 1fr))
+ *         `1fr` alone means `minmax(auto, 1fr)`, and `auto` floors the track at
+ *         the content's min-content width — so one long unbroken string pushes
+ *         its own column wider and every sibling narrower. That IS the ragged
+ *         row. `minmax(0, 1fr)` is the fix.
+ *
+ * `[data-slot='grid'] > *` also gets `min-width: 0` in the stylesheet, for the
+ * same reason: a grid item's default `min-width: auto` lets its content set the
+ * floor and blow the track out.
+ */
+import { getTokenValue } from '@hanzo/gui';
+/** `'$3'` -> 12. A raw number passes through as px. */
+const space = (v, fallback) => {
+    if (v == null)
+        return fallback;
+    if (typeof v === 'number')
+        return v;
+    const t = getTokenValue(v, 'space');
+    return typeof t === 'number' ? t : fallback;
+};
+const Grid = ({ min = 240, cols, gap = '$3', style, ...props }) => {
+    const g = space(gap, 12);
+    const columns = cols
+        ? `repeat(${cols}, minmax(0, 1fr))`
+        : `repeat(auto-fill, minmax(min(${min}px, 100%), 1fr))`;
+    const grid = { display: 'grid', gridTemplateColumns: columns, gap: g };
+    return _jsx("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
+};
+export { Grid };
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAgB1C,uDAAuD;AACvD,MAAM,KAAK,GAAG,CAAC,CAA8B,EAAE,QAAgB,EAAU,EAAE;IACzE,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,QAAQ,CAAA;IAC9B,IAAI,OAAO,CAAC,KAAK,QAAQ;QAAE,OAAO,CAAC,CAAA;IACnC,MAAM,CAAC,GAAG,aAAa,CAAC,CAAU,EAAE,OAAO,CAAC,CAAA;IAC5C,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IAC3E,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IACxB,MAAM,OAAO,GAAG,IAAI;QAClB,CAAC,CAAC,UAAU,IAAI,mBAAmB;QACnC,CAAC,CAAC,gCAAgC,GAAG,kBAAkB,CAAA;IACzD,MAAM,IAAI,GAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAA;IACrF,OAAO,2BAAe,MAAM,EAAC,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AAC1E,CAAC,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}