@hanzo/ui 8.27.10 → 8.27.11

package/dist/backends/gui/gantt.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"gantt.js","sourceRoot":"","sources":["../../../src/backends/gui/gantt.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"gantt.js","sourceRoot":"","sources":["../../../src/backends/gui/gantt.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;GAOG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,YAAY,GAAG,EAAE,CAAA;AAWvB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;IAChC,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,aAAa;IACjB,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,OAAO,EAAE,IAAI;IACb,CAAC,EAAE,IAAI;CACR,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAA;AAEhE,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;IAChC,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,OAAO;IACX,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE;IAC9B,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,mBAAmB;CACxB,CAAC,CAAA;AAMF,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,KAAK,EAAc;IACxD,OAAO,CACL,KAAC,UAAU,OAAK,IAAI,CAAC,OAAO,CAAC,KAAM,KAAK,YACrC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,KAAC,MAAM,OAAK,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,CAAC,EAAC,IAAI,YACpE,GAAG,CAAC,uDAAuD,EAAE,WAAW,EAAE;gBACzE,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,QAAQ;aAChB,CAAC,GACK,CACV,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,YACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAA;gBAC/D,OAAO,CACL,MAAC,QAAQ,OAAmB,IAAI,CAAC,YAAY,CAAC,mBAAiB,QAAQ,aACrE,MAAC,MAAM,IAAC,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,aAC3C,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAC9D,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAC3D,EACT,KAAC,UAAU,OAAK,IAAI,CAAC,aAAa,CAAC,YACjC,KAAC,QAAQ,OAAK,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAI,GAC/C,EACb,MAAC,MAAM,IAAC,OAAO,EAAC,eAAe,aAC5B,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAClF,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAkB,EAAE,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAC1E,KAXI,IAAI,CAAC,EAAE,CAYX,CACZ,CAAA;YACH,CAAC,CAAC,GACK,CACV,GACU,CACd,CAAA;AACH,CAAC"}

package/dist/backends/gui/glimpse.cjs

@@ -0,0 +1,88 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlimpseDescription = exports.GlimpseTitle = exports.GlimpseImage = exports.GlimpseContent = exports.GlimpseTrigger = void 0;
+exports.Glimpse = Glimpse;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Glimpse — a link preview: rest a pointer on a trigger and see the page it
+ * points to, image and title and description, before following it.
+ *
+ * Built the way `hover-card.tsx` is: a `Popover` in hover mode. `hoverable`
+ * puts floating-ui's `useHover` + `safePolygon` on the popper so the cursor can
+ * cross the gap into the panel without it closing, `useFocus` opens it from the
+ * keyboard, and `place()` rejoins the `side`/`align`/`sideOffset` API a call
+ * site is written against onto the one `placement`/`offset` the popper root
+ * owns (shared with `popover.tsx` and `hover-card.tsx` rather than spelled
+ * again here). Press is not a trigger — the trigger is usually a link whose
+ * click must navigate.
+ *
+ * Content is composed directly on `GuiPopover.Content` rather than by wrapping
+ * `HoverCard`, because a link preview's layout is not uniform padding: the
+ * image bleeds to the panel's rounded edges and only the text sits in a
+ * margin, which `HoverCardContent`'s single `p` cannot express. Content itself
+ * carries no padding — `GlimpseImage` fills it edge to edge, `GlimpseTitle` and
+ * `GlimpseDescription` carry their own.
+ *
+ * `GlimpseImage` owns one bit of state Radix's original left to `next/image`:
+ * a broken `src` swaps the frame for an `ImageOff` glyph rather than the
+ * browser's own broken-image icon.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const aspect_ratio_1 = require("./aspect-ratio.cjs");
+const ink_1 = require("./ink.cjs");
+const place_1 = require("./place.cjs");
+const slot_1 = require("./slot.cjs");
+const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
+/** Radix's hover card defaults, kept so a migrated call site behaves identically. */
+const OPEN_DELAY = 700;
+const CLOSE_DELAY = 300;
+const DEFAULT_OFFSET = 4;
+/** Radix/shadcn ship `w-80`. */
+const WIDTH = 320;
+const DEFAULT_RATIO = 16 / 9;
+/** Root-owned floating geometry. Content publishes into it; see `place.ts`. */
+const FloatContext = /* @__PURE__ */ (0, react_1.createContext)(null);
+function Glimpse({ openDelay = OPEN_DELAY, closeDelay = CLOSE_DELAY, ...props }) {
+    const [float, setFloat] = (0, react_1.useState)({
+        placement: 'bottom',
+        offset: DEFAULT_OFFSET,
+    });
+    // Identity-stable: an unchanged publish returns the same object, so Content's
+    // effect cannot drive a render loop.
+    const publish = (0, react_1.useCallback)((placement, offset) => setFloat((f) => (f.placement === placement && f.offset === offset ? f : { placement, offset })), []);
+    return ((0, jsx_runtime_1.jsx)(FloatContext.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Popover, { hoverable: { delay: { open: openDelay, close: closeDelay } }, placement: float.placement, offset: float.offset, ...props }) }));
+}
+const GlimpseTrigger = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { ...(0, slot_1.slot)('glimpse-trigger'), disablePressTrigger: true, ...props }));
+exports.GlimpseTrigger = GlimpseTrigger;
+const GlimpseContent = ({ side = 'bottom', align = 'center', sideOffset = DEFAULT_OFFSET, children, ...props }) => {
+    const themeName = (0, portal_theme_1.useThemeName)();
+    const publish = (0, react_1.useContext)(FloatContext);
+    (0, react_1.useEffect)(() => publish?.((0, place_1.place)(side, align), sideOffset), [publish, side, align, sideOffset]);
+    return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('glimpse-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", width: WIDTH, ...props, children: (0, ink_1.ink)(children, undefined, { size: '$2' }) }) }));
+};
+exports.GlimpseContent = GlimpseContent;
+/**
+ * The preview thumbnail. Fills its frame edge to edge — `GlimpseContent` gives
+ * it no margin to bleed out of, unlike Radix/shadcn's negative-margin trick.
+ * A `src` that fails to load swaps the frame for an `ImageOff` glyph rather
+ * than the browser's own broken-image icon.
+ */
+const GlimpseImage = ({ ratio = DEFAULT_RATIO, onError, ...props }) => {
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(aspect_ratio_1.AspectRatio, { ratio: ratio, bg: "$edge", ...(0, slot_1.slot)('glimpse-image'), children: failed ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", height: "100%", items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ImageOff, { size: 20, color: "$quiet" }) })) : ((0, jsx_runtime_1.jsx)(gui_1.Image, { width: "100%", height: "100%", objectFit: "cover", onError: (event) => {
+                setFailed(true);
+                // gui's Image intersects RN's and web's onError, two incompatible
+                // event types; this branch is always the web one, forwarding it
+                // through the union-typed prop is what the cast is for.
+                // @ts-expect-error see above
+                onError?.(event);
+            }, ...props })) }));
+};
+exports.GlimpseImage = GlimpseImage;
+const GlimpseTitle = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('glimpse-title'), size: "$3", fontWeight: "600", px: "$3", pt: "$3", numberOfLines: 1, ...props, children: children }));
+exports.GlimpseTitle = GlimpseTitle;
+const GlimpseDescription = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('glimpse-description'), size: "$2", color: "$quiet", px: "$3", pb: "$3", numberOfLines: 2, ...props, children: children }));
+exports.GlimpseDescription = GlimpseDescription;

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

@@ -0,0 +1,57 @@
+/**
+ * Glimpse — a link preview: rest a pointer on a trigger and see the page it
+ * points to, image and title and description, before following it.
+ *
+ * Built the way `hover-card.tsx` is: a `Popover` in hover mode. `hoverable`
+ * puts floating-ui's `useHover` + `safePolygon` on the popper so the cursor can
+ * cross the gap into the panel without it closing, `useFocus` opens it from the
+ * keyboard, and `place()` rejoins the `side`/`align`/`sideOffset` API a call
+ * site is written against onto the one `placement`/`offset` the popper root
+ * owns (shared with `popover.tsx` and `hover-card.tsx` rather than spelled
+ * again here). Press is not a trigger — the trigger is usually a link whose
+ * click must navigate.
+ *
+ * Content is composed directly on `GuiPopover.Content` rather than by wrapping
+ * `HoverCard`, because a link preview's layout is not uniform padding: the
+ * image bleeds to the panel's rounded edges and only the text sits in a
+ * margin, which `HoverCardContent`'s single `p` cannot express. Content itself
+ * carries no padding — `GlimpseImage` fills it edge to edge, `GlimpseTitle` and
+ * `GlimpseDescription` carry their own.
+ *
+ * `GlimpseImage` owns one bit of state Radix's original left to `next/image`:
+ * a broken `src` swaps the frame for an `ImageOff` glyph rather than the
+ * browser's own broken-image icon.
+ */
+import { Popover as GuiPopover, SizableText, type ImageProps } from '@hanzo/gui';
+import { type ComponentProps } from 'react';
+import { type Align, type Side } from './place.js';
+export type GlimpseProps = Omit<ComponentProps<typeof GuiPopover>, 'hoverable' | 'placement' | 'offset'> & {
+    openDelay?: number;
+    closeDelay?: number;
+};
+declare function Glimpse({ openDelay, closeDelay, ...props }: GlimpseProps): import("react").JSX.Element;
+export type GlimpseTriggerProps = ComponentProps<typeof GuiPopover.Trigger>;
+declare const GlimpseTrigger: (props: GlimpseTriggerProps) => import("react").JSX.Element;
+export type GlimpseContentProps = ComponentProps<typeof GuiPopover.Content> & {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+};
+declare const GlimpseContent: ({ side, align, sideOffset, children, ...props }: GlimpseContentProps) => import("react").JSX.Element;
+export type GlimpseImageProps = Omit<ImageProps, 'width' | 'height'> & {
+    /** Width divided by height of the preview frame. 16:9 by default. */
+    ratio?: number;
+};
+/**
+ * The preview thumbnail. Fills its frame edge to edge — `GlimpseContent` gives
+ * it no margin to bleed out of, unlike Radix/shadcn's negative-margin trick.
+ * A `src` that fails to load swaps the frame for an `ImageOff` glyph rather
+ * than the browser's own broken-image icon.
+ */
+declare const GlimpseImage: ({ ratio, onError, ...props }: GlimpseImageProps) => import("react").JSX.Element;
+export type GlimpseTitleProps = ComponentProps<typeof SizableText>;
+declare const GlimpseTitle: ({ children, ...props }: GlimpseTitleProps) => import("react").JSX.Element;
+export type GlimpseDescriptionProps = ComponentProps<typeof SizableText>;
+declare const GlimpseDescription: ({ children, ...props }: GlimpseDescriptionProps) => import("react").JSX.Element;
+export { Glimpse, GlimpseTrigger, GlimpseContent, GlimpseImage, GlimpseTitle, GlimpseDescription };
+//# sourceMappingURL=glimpse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"glimpse.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/glimpse.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAS,OAAO,IAAI,UAAU,EAAE,WAAW,EAAU,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAE/F,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAId,OAAO,EAAS,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAA;AAmBtD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,cAAc,CAAC,OAAO,UAAU,CAAC,EACjC,WAAW,GAAG,WAAW,GAAG,QAAQ,CACrC,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,iBAAS,OAAO,CAAC,EAAE,SAAsB,EAAE,UAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAsB5F;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,CAAA;AAE3E,QAAA,MAAM,cAAc,UAAW,mBAAmB,gCAEjD,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,cAAc,oDAMjB,mBAAmB,gCAuBrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IACrE,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;GAKG;AACH,QAAA,MAAM,YAAY,iCAAkD,iBAAiB,gCA0BpF,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAElE,QAAA,MAAM,YAAY,2BAA4B,iBAAiB,gCAY9D,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAExE,QAAA,MAAM,kBAAkB,2BAA4B,uBAAuB,gCAY1E,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/backends/gui/glimpse.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Glimpse — a link preview: rest a pointer on a trigger and see the page it
+ * points to, image and title and description, before following it.
+ *
+ * Built the way `hover-card.tsx` is: a `Popover` in hover mode. `hoverable`
+ * puts floating-ui's `useHover` + `safePolygon` on the popper so the cursor can
+ * cross the gap into the panel without it closing, `useFocus` opens it from the
+ * keyboard, and `place()` rejoins the `side`/`align`/`sideOffset` API a call
+ * site is written against onto the one `placement`/`offset` the popper root
+ * owns (shared with `popover.tsx` and `hover-card.tsx` rather than spelled
+ * again here). Press is not a trigger — the trigger is usually a link whose
+ * click must navigate.
+ *
+ * Content is composed directly on `GuiPopover.Content` rather than by wrapping
+ * `HoverCard`, because a link preview's layout is not uniform padding: the
+ * image bleeds to the panel's rounded edges and only the text sits in a
+ * margin, which `HoverCardContent`'s single `p` cannot express. Content itself
+ * carries no padding — `GlimpseImage` fills it edge to edge, `GlimpseTitle` and
+ * `GlimpseDescription` carry their own.
+ *
+ * `GlimpseImage` owns one bit of state Radix's original left to `next/image`:
+ * a broken `src` swaps the frame for an `ImageOff` glyph rather than the
+ * browser's own broken-image icon.
+ */
+import { Image, Popover as GuiPopover, SizableText, YStack } from '@hanzo/gui';
+import { ImageOff } from '@hanzogui/lucide-icons-2';
+import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
+import { AspectRatio } from './aspect-ratio.js';
+import { ink } from './ink.js';
+import { place } from './place.js';
+import { slot } from './slot.js';
+import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
+/** Radix's hover card defaults, kept so a migrated call site behaves identically. */
+const OPEN_DELAY = 700;
+const CLOSE_DELAY = 300;
+const DEFAULT_OFFSET = 4;
+/** Radix/shadcn ship `w-80`. */
+const WIDTH = 320;
+const DEFAULT_RATIO = 16 / 9;
+/** Root-owned floating geometry. Content publishes into it; see `place.ts`. */
+const FloatContext = /* @__PURE__ */ createContext(null);
+function Glimpse({ openDelay = OPEN_DELAY, closeDelay = CLOSE_DELAY, ...props }) {
+    const [float, setFloat] = useState({
+        placement: 'bottom',
+        offset: DEFAULT_OFFSET,
+    });
+    // Identity-stable: an unchanged publish returns the same object, so Content's
+    // effect cannot drive a render loop.
+    const publish = useCallback((placement, offset) => setFloat((f) => (f.placement === placement && f.offset === offset ? f : { placement, offset })), []);
+    return (_jsx(FloatContext.Provider, { value: publish, children: _jsx(GuiPopover, { hoverable: { delay: { open: openDelay, close: closeDelay } }, placement: float.placement, offset: float.offset, ...props }) }));
+}
+const GlimpseTrigger = (props) => (_jsx(GuiPopover.Trigger, { ...slot('glimpse-trigger'), disablePressTrigger: true, ...props }));
+const GlimpseContent = ({ side = 'bottom', align = 'center', sideOffset = DEFAULT_OFFSET, children, ...props }) => {
+    const themeName = useThemeName();
+    const publish = useContext(FloatContext);
+    useEffect(() => publish?.(place(side, align), sideOffset), [publish, side, align, sideOffset]);
+    return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('glimpse-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", width: WIDTH, ...props, children: ink(children, undefined, { size: '$2' }) }) }));
+};
+/**
+ * The preview thumbnail. Fills its frame edge to edge — `GlimpseContent` gives
+ * it no margin to bleed out of, unlike Radix/shadcn's negative-margin trick.
+ * A `src` that fails to load swaps the frame for an `ImageOff` glyph rather
+ * than the browser's own broken-image icon.
+ */
+const GlimpseImage = ({ ratio = DEFAULT_RATIO, onError, ...props }) => {
+    const [failed, setFailed] = useState(false);
+    return (_jsx(AspectRatio, { ratio: ratio, bg: "$edge", ...slot('glimpse-image'), children: failed ? (_jsx(YStack, { width: "100%", height: "100%", items: "center", justify: "center", children: _jsx(ImageOff, { size: 20, color: "$quiet" }) })) : (_jsx(Image, { width: "100%", height: "100%", objectFit: "cover", onError: (event) => {
+                setFailed(true);
+                // gui's Image intersects RN's and web's onError, two incompatible
+                // event types; this branch is always the web one, forwarding it
+                // through the union-typed prop is what the cast is for.
+                // @ts-expect-error see above
+                onError?.(event);
+            }, ...props })) }));
+};
+const GlimpseTitle = ({ children, ...props }) => (_jsx(SizableText, { ...slot('glimpse-title'), size: "$3", fontWeight: "600", px: "$3", pt: "$3", numberOfLines: 1, ...props, children: children }));
+const GlimpseDescription = ({ children, ...props }) => (_jsx(SizableText, { ...slot('glimpse-description'), size: "$2", color: "$quiet", px: "$3", pb: "$3", numberOfLines: 2, ...props, children: children }));
+export { Glimpse, GlimpseTrigger, GlimpseContent, GlimpseImage, GlimpseTitle, GlimpseDescription };
+//# sourceMappingURL=glimpse.js.map

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

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

package/dist/backends/gui/grid-pattern.cjs

@@ -0,0 +1,119 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridPatternPresets = exports.GridPattern = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * GridPattern — a decorative, tiled SVG background: dots, lines, crosses,
+ * plus-marks or squares repeated across the whole of its parent.
+ *
+ * It is purely visual, so it draws with a plain <svg>, the same choice
+ * `AnimatedBeam` makes — gui has no vector primitive of its own. One `<pattern>`
+ * tile carries the chosen mark and is stamped across a full-size `<rect>`; an
+ * optional mask (a linear or radial gradient of white-to-transparent) fades the
+ * tile at its edges, its center, or radially outward, and an optional second
+ * `<rect>` paints a linear-gradient tint over the top. Motion is one CSS
+ * animation, hoisted once as a `<style>` sibling the way the beam's keyframe
+ * is: the keyframe itself only ever slides by the two custom properties
+ * `--grid-pattern-x`/`-y`, so any number of instances at any gap share it.
+ */
+const React = __importStar(require("react"));
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const KEYFRAMES = `
+@keyframes grid-pattern-move { from { transform: translate(0, 0) } to { transform: translate(var(--grid-pattern-x, 0px), var(--grid-pattern-y, 0px)) } }
+@media (prefers-reduced-motion: reduce) { [data-slot="grid-pattern"] { animation: none !important } }
+`;
+const mark = (variant, size, step, color, opacity, strokeWidth) => {
+    switch (variant) {
+        case 'dots':
+            return (0, jsx_runtime_1.jsx)("circle", { cx: size.width / 2, cy: size.height / 2, r: size.width / 2, fill: color, opacity: opacity });
+        case 'lines':
+            // Spans the full tile (gap), not the mark size, so adjoining tiles meet into one continuous grid line.
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: step.y, stroke: color, strokeWidth: strokeWidth, opacity: opacity }), (0, jsx_runtime_1.jsx)("line", { x1: 0, y1: 0, x2: step.x, y2: 0, stroke: color, strokeWidth: strokeWidth, opacity: opacity })] }));
+        case 'crosses':
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: size.width / 2, y1: 0, x2: size.width / 2, y2: size.height, stroke: color, strokeWidth: strokeWidth, opacity: opacity }), (0, jsx_runtime_1.jsx)("line", { x1: 0, y1: size.height / 2, x2: size.width, y2: size.height / 2, stroke: color, strokeWidth: strokeWidth, opacity: opacity })] }));
+        case 'plus':
+            return ((0, jsx_runtime_1.jsx)("path", { d: `M ${size.width / 2} 0 L ${size.width / 2} ${size.height} M 0 ${size.height / 2} L ${size.width} ${size.height / 2}`, stroke: color, strokeWidth: strokeWidth, opacity: opacity, fill: "none", strokeLinecap: "round" }));
+        case 'squares':
+            return (0, jsx_runtime_1.jsx)("rect", { width: size.width, height: size.height, fill: "none", stroke: color, strokeWidth: strokeWidth, opacity: opacity });
+    }
+};
+const fadeStops = (fade) => {
+    if (fade === 'center')
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: 1 }), (0, jsx_runtime_1.jsx)("stop", { offset: "70%", stopColor: "white", stopOpacity: 1 }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })] }));
+    if (fade === 'radial')
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: 0 }), (0, jsx_runtime_1.jsx)("stop", { offset: "30%", stopColor: "white", stopOpacity: 1 }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "white", stopOpacity: 1 })] }));
+    // 'edges' and `true` share the same edge-to-edge fade.
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: 0 }), (0, jsx_runtime_1.jsx)("stop", { offset: "10%", stopColor: "white", stopOpacity: 1 }), (0, jsx_runtime_1.jsx)("stop", { offset: "90%", stopColor: "white", stopOpacity: 1 }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })] }));
+};
+exports.GridPattern = React.forwardRef(({ variant = 'dots', size = 4, gap = 20, color = 'currentColor', opacity = 0.4, strokeWidth = 1, fade = false, gradient, animation, offset, maxArea, style, ...props }, ref) => {
+    const patternId = React.useId();
+    const maskId = React.useId();
+    const gradientId = React.useId();
+    const tile = typeof size === 'number' ? { width: size, height: size } : { width: size.width ?? 4, height: size.height ?? 4 };
+    const step = typeof gap === 'number' ? { x: gap, y: gap } : { x: gap.x ?? 20, y: gap.y ?? 20 };
+    const shift = { x: offset?.x ?? 0, y: offset?.y ?? 0 };
+    const animationStyle = animation
+        ? {
+            animationName: 'grid-pattern-move',
+            animationDuration: `${animation.duration ?? 10}s`,
+            animationTimingFunction: animation.timing ?? 'linear',
+            animationDirection: animation.direction ?? 'normal',
+            animationIterationCount: 'infinite',
+            '--grid-pattern-x': `${step.x}px`,
+            '--grid-pattern-y': `${step.y}px`,
+        }
+        : {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { href: "grid-pattern", precedence: "default", children: KEYFRAMES }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: ref, ...(0, slot_1.slot)('grid-pattern'), position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", style: { ...animationStyle, ...style }, ...props, children: (0, jsx_runtime_1.jsxs)("svg", { ...(0, slot_1.slot)('grid-pattern-svg'), style: {
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        transform: `translate(${shift.x}px, ${shift.y}px)`,
+                    }, children: [(0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("pattern", { id: patternId, x: 0, y: 0, width: step.x, height: step.y, patternUnits: "userSpaceOnUse", children: mark(variant, tile, step, color, opacity, strokeWidth) }), fade && (fade === 'center' || fade === 'radial' ? ((0, jsx_runtime_1.jsx)("radialGradient", { id: maskId, children: fadeStops(fade) })) : ((0, jsx_runtime_1.jsx)("linearGradient", { id: maskId, children: fadeStops(fade) }))), gradient && ((0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: gradient.from ?? 'transparent' }), gradient.via && (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: gradient.via }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: gradient.to ?? 'transparent' })] }))] }), (0, jsx_runtime_1.jsx)("rect", { ...(0, slot_1.slot)('grid-pattern-tiles'), width: maxArea?.width ?? '100%', height: maxArea?.height ?? '100%', fill: `url(#${patternId})`, mask: fade ? `url(#${maskId})` : undefined }), gradient && ((0, jsx_runtime_1.jsx)("rect", { ...(0, slot_1.slot)('grid-pattern-tint'), width: maxArea?.width ?? '100%', height: maxArea?.height ?? '100%', fill: `url(#${gradientId})`, opacity: gradient.opacity ?? 0.5 }))] }) })] }));
+});
+exports.GridPattern.displayName = 'GridPattern';
+/** Named, ready-to-spread configurations for the common backgrounds. */
+exports.GridPatternPresets = {
+    dotMatrix: { variant: 'dots', size: 3, gap: 30, opacity: 0.3 },
+    fineDots: { variant: 'dots', size: 1, gap: 10, opacity: 0.4 },
+    gridLines: { variant: 'lines', gap: 40, strokeWidth: 1, opacity: 0.2 },
+    crosshatch: { variant: 'crosses', size: 10, gap: 20, strokeWidth: 1, opacity: 0.3 },
+    blueprint: { variant: 'lines', gap: 20, strokeWidth: 0.5, color: '#3b82f6', opacity: 0.3 },
+    graph: { variant: 'lines', gap: { x: 50, y: 50 }, strokeWidth: 1, opacity: 0.15, fade: 'edges' },
+    isometric: { variant: 'lines', gap: { x: 30, y: 17.32 }, strokeWidth: 0.5, opacity: 0.2 },
+    hexagon: { variant: 'dots', size: 2, gap: { x: 30, y: 26 }, opacity: 0.3 },
+};

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

@@ -0,0 +1,96 @@
+/**
+ * GridPattern — a decorative, tiled SVG background: dots, lines, crosses,
+ * plus-marks or squares repeated across the whole of its parent.
+ *
+ * It is purely visual, so it draws with a plain <svg>, the same choice
+ * `AnimatedBeam` makes — gui has no vector primitive of its own. One `<pattern>`
+ * tile carries the chosen mark and is stamped across a full-size `<rect>`; an
+ * optional mask (a linear or radial gradient of white-to-transparent) fades the
+ * tile at its edges, its center, or radially outward, and an optional second
+ * `<rect>` paints a linear-gradient tint over the top. Motion is one CSS
+ * animation, hoisted once as a `<style>` sibling the way the beam's keyframe
+ * is: the keyframe itself only ever slides by the two custom properties
+ * `--grid-pattern-x`/`-y`, so any number of instances at any gap share it.
+ */
+import * as React from 'react';
+import { type GuiElement } from '@hanzo/gui';
+export type GridPatternVariant = 'dots' | 'lines' | 'crosses' | 'plus' | 'squares';
+export type GridPatternSize = number | {
+    width?: number;
+    height?: number;
+};
+export type GridPatternGap = number | {
+    x?: number;
+    y?: number;
+};
+export type GridPatternFade = boolean | 'edges' | 'center' | 'radial';
+export type GridPatternGradient = {
+    from?: string;
+    via?: string;
+    to?: string;
+    opacity?: number;
+};
+export type GridPatternAnimation = {
+    duration?: number;
+    direction?: 'normal' | 'reverse' | 'alternate';
+    timing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+};
+export type GridPatternOffset = {
+    x?: number;
+    y?: number;
+};
+export type GridPatternMaxArea = {
+    width?: number;
+    height?: number;
+};
+export type GridPatternProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Which mark repeats across the tile. */
+    variant?: GridPatternVariant;
+    /** Size of the mark itself, uniform or per axis. */
+    size?: GridPatternSize;
+    /** Spacing between tiles, uniform or per axis. */
+    gap?: GridPatternGap;
+    /** Color of the mark. */
+    color?: string;
+    /** Opacity of the mark. */
+    opacity?: number;
+    /** Stroke width for the line-based variants. */
+    strokeWidth?: number;
+    /** Fades the whole pattern at its edges, its center, or radially. */
+    fade?: GridPatternFade;
+    /** A linear-gradient tint painted over the pattern. */
+    gradient?: GridPatternGradient;
+    /** Slides the whole pattern by one tile, on a loop. */
+    animation?: GridPatternAnimation;
+    /** Shifts the pattern's origin before any animation is applied. */
+    offset?: GridPatternOffset;
+    /** Caps the area the pattern rect covers, for very large viewports. */
+    maxArea?: GridPatternMaxArea;
+};
+export declare const GridPattern: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Which mark repeats across the tile. */
+    variant?: GridPatternVariant;
+    /** Size of the mark itself, uniform or per axis. */
+    size?: GridPatternSize;
+    /** Spacing between tiles, uniform or per axis. */
+    gap?: GridPatternGap;
+    /** Color of the mark. */
+    color?: string;
+    /** Opacity of the mark. */
+    opacity?: number;
+    /** Stroke width for the line-based variants. */
+    strokeWidth?: number;
+    /** Fades the whole pattern at its edges, its center, or radially. */
+    fade?: GridPatternFade;
+    /** A linear-gradient tint painted over the pattern. */
+    gradient?: GridPatternGradient;
+    /** Slides the whole pattern by one tile, on a loop. */
+    animation?: GridPatternAnimation;
+    /** Shifts the pattern's origin before any animation is applied. */
+    offset?: GridPatternOffset;
+    /** Caps the area the pattern rect covers, for very large viewports. */
+    maxArea?: GridPatternMaxArea;
+} & React.RefAttributes<GuiElement>>;
+/** Named, ready-to-spread configurations for the common backgrounds. */
+export declare const GridPatternPresets: Record<string, GridPatternProps>;
+//# sourceMappingURL=grid-pattern.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-pattern.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grid-pattern.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAGpD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;AAElF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAErE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAA;IAC9C,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAA;CACpE,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1D,MAAM,MAAM,kBAAkB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACpE,0CAA0C;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,oDAAoD;IACpD,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,kDAAkD;IAClD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,uDAAuD;IACvD,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,uEAAuE;IACvE,OAAO,CAAC,EAAE,kBAAkB,CAAA;CAC7B,CAAA;AA6FD,eAAO,MAAM,WAAW;IAnHtB,0CAA0C;cAChC,kBAAkB;IAC5B,oDAAoD;WAC7C,eAAe;IACtB,kDAAkD;UAC5C,cAAc;IACpB,yBAAyB;YACjB,MAAM;IACd,2BAA2B;cACjB,MAAM;IAChB,gDAAgD;kBAClC,MAAM;IACpB,qEAAqE;WAC9D,eAAe;IACtB,uDAAuD;eAC5C,mBAAmB;IAC9B,uDAAuD;gBAC3C,oBAAoB;IAChC,mEAAmE;aAC1D,iBAAiB;IAC1B,uEAAuE;cAC7D,kBAAkB;oCAuM7B,CAAA;AAGD,wEAAwE;AACxE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAS/D,CAAA"}