@hanzo/ui 8.27.10 → 8.27.12

package/dist/backends/gui/comparison.cjs

@@ -4,40 +4,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Comparison = Comparison;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Comparison — a pricing/feature table laid out as one column per plan.
+ * Comparison — a plan/feature grid: one column per plan, one row per feature.
  *
- * Each column lists the same rows in the same order; a row's value is either a
- * boolean (rendered as a check or a cross) or a string (rendered as text), so
- * a caller mixes "Users: 25" with "Support: yes" in one column without two
- * component shapes. `highlighted` marks the plan the table wants to sell.
- *
- * Layout is `../../grid`'s real CSS grid — equal tracks, one per column — with
- * `YStack`/`XStack` for the card and its rows.
+ * Columns are laid out with `Grid`/`Cell` (real CSS grid, tracks owned by the
+ * container) rather than a row of stacks, so every column stays the same
+ * width regardless of its content. A boolean item renders as a check or an
+ * cross; a string item renders as text.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const grid_1 = require("../../grid.cjs");
+const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
-const ICON = 20;
-const Card = (0, gui_1.styled)(gui_1.YStack, {
+const ColumnFrame = (0, gui_1.styled)(gui_1.YStack, {
     name: 'ComparisonColumn',
-    p: '$5',
-    rounded: '$4',
     borderWidth: 1,
     borderColor: '$borderColor',
+    rounded: '$4',
+    p: '$5',
     gap: '$4',
     variants: {
         highlighted: {
-            true: {
-                borderColor: '$color9',
-                shadowColor: '$shadowColor',
-                shadowRadius: 12,
-                shadowOffset: { width: 0, height: 4 },
-            },
+            true: { borderColor: '$color', shadowColor: '$shadowColor', shadowRadius: 12, shadowOpacity: 0.15 },
         },
     },
 });
-const Row = ({ item }) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('comparison-item'), items: "center", gap: "$3", children: [typeof item.value === 'boolean' ? (item.value ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { ...(0, slot_1.slot)('comparison-item-check'), size: ICON, color: "$green9" })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { ...(0, slot_1.slot)('comparison-item-cross'), size: ICON, color: "$red9" }))) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('comparison-item-value'), fontWeight: "600", children: item.value })), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", children: item.label })] }));
-function Comparison({ columns }) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...(0, slot_1.slot)('comparison'), style: { overflowX: 'auto' }, children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: columns.length, gap: "$4", children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(Card, { ...(0, slot_1.slot)('comparison-column'), "data-highlighted": column.highlighted ? '' : undefined, highlighted: column.highlighted, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$6", fontWeight: "600", children: column.title }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$3", children: column.items.map((item, itemIndex) => ((0, jsx_runtime_1.jsx)(Row, { item: item }, item.label || itemIndex))) })] }, column.title || index))) }) }));
+const Title = (0, gui_1.styled)(gui_1.SizableText, { name: 'ComparisonTitle', size: '$5', fontWeight: '600' });
+const Label = (0, gui_1.styled)(gui_1.SizableText, { name: 'ComparisonLabel', size: '$2' });
+const Value = (0, gui_1.styled)(gui_1.SizableText, { name: 'ComparisonValue', size: '$2', fontWeight: '600' });
+const Row = (0, gui_1.styled)(gui_1.XStack, { name: 'ComparisonRow', items: 'center', gap: '$3' });
+const mark = (value) => typeof value === 'boolean' ? (value ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { ...(0, slot_1.slot)('comparison-item-check'), size: 18, color: "$green9" })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { ...(0, slot_1.slot)('comparison-item-cross'), size: 18, color: "$red9" }))) : ((0, jsx_runtime_1.jsx)(Value, { children: value }));
+function Comparison({ columns, gap = '$4', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { ...(0, slot_1.slot)('comparison'), columns: columns.length || 1, gap: gap, ...props, children: columns.map((column, i) => ((0, jsx_runtime_1.jsx)(grid_1.Cell, { children: (0, jsx_runtime_1.jsxs)(ColumnFrame, { ...(0, slot_1.slot)('comparison-column'), "data-highlighted": column.highlighted ? '' : undefined, highlighted: column.highlighted, children: [(0, ink_1.ink)(column.title, Title), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$3", children: column.items.map((item, j) => ((0, jsx_runtime_1.jsxs)(Row, { ...(0, slot_1.slot)('comparison-item'), children: [mark(item.value), (0, jsx_runtime_1.jsx)(Label, { children: item.label })] }, j))) })] }) }, i))) }));
 }

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

@@ -1,3 +1,4 @@
+import { type GridProps } from '../../grid.js';
 export interface ComparisonItem {
     label: string;
     value: boolean | string;
@@ -5,12 +6,10 @@ export interface ComparisonItem {
 export interface ComparisonColumn {
     title: string;
     items: ComparisonItem[];
-    /** Marks the plan the table wants to sell: a raised border and shadow. */
     highlighted?: boolean;
 }
-export interface ComparisonProps {
+export type ComparisonProps = Omit<GridProps, 'columns' | 'children'> & {
     columns: ComparisonColumn[];
-    children?: never;
-}
-export declare function Comparison({ columns }: ComparisonProps): import("react").JSX.Element;
+};
+export declare function Comparison({ columns, gap, ...props }: ComparisonProps): import("react").JSX.Element;
 //# sourceMappingURL=comparison.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"comparison.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/comparison.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB;AA6CD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,+BAwBtD"}
+{"version":3,"file":"comparison.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/comparison.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAIvD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAkCD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACtE,OAAO,EAAE,gBAAgB,EAAE,CAAA;CAC5B,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAU,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAwB5E"}

package/dist/backends/gui/comparison.js

@@ -1,41 +1,37 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Comparison — a pricing/feature table laid out as one column per plan.
+ * Comparison — a plan/feature grid: one column per plan, one row per feature.
  *
- * Each column lists the same rows in the same order; a row's value is either a
- * boolean (rendered as a check or a cross) or a string (rendered as text), so
- * a caller mixes "Users: 25" with "Support: yes" in one column without two
- * component shapes. `highlighted` marks the plan the table wants to sell.
- *
- * Layout is `../../grid`'s real CSS grid — equal tracks, one per column — with
- * `YStack`/`XStack` for the card and its rows.
+ * Columns are laid out with `Grid`/`Cell` (real CSS grid, tracks owned by the
+ * container) rather than a row of stacks, so every column stays the same
+ * width regardless of its content. A boolean item renders as a check or an
+ * cross; a string item renders as text.
  */
 import { SizableText, YStack, XStack, styled } from '@hanzo/gui';
 import { Check, X } from '@hanzogui/lucide-icons-2';
-import { Grid } from '../../grid.js';
+import { Grid, Cell } from '../../grid.js';
+import { ink } from './ink.js';
 import { slot } from './slot.js';
-const ICON = 20;
-const Card = styled(YStack, {
+const ColumnFrame = styled(YStack, {
     name: 'ComparisonColumn',
-    p: '$5',
-    rounded: '$4',
     borderWidth: 1,
     borderColor: '$borderColor',
+    rounded: '$4',
+    p: '$5',
     gap: '$4',
     variants: {
         highlighted: {
-            true: {
-                borderColor: '$color9',
-                shadowColor: '$shadowColor',
-                shadowRadius: 12,
-                shadowOffset: { width: 0, height: 4 },
-            },
+            true: { borderColor: '$color', shadowColor: '$shadowColor', shadowRadius: 12, shadowOpacity: 0.15 },
         },
     },
 });
-const Row = ({ item }) => (_jsxs(XStack, { ...slot('comparison-item'), items: "center", gap: "$3", children: [typeof item.value === 'boolean' ? (item.value ? (_jsx(Check, { ...slot('comparison-item-check'), size: ICON, color: "$green9" })) : (_jsx(X, { ...slot('comparison-item-cross'), size: ICON, color: "$red9" }))) : (_jsx(SizableText, { ...slot('comparison-item-value'), fontWeight: "600", children: item.value })), _jsx(SizableText, { size: "$3", children: item.label })] }));
-export function Comparison({ columns }) {
-    return (_jsx("div", { ...slot('comparison'), style: { overflowX: 'auto' }, children: _jsx(Grid, { columns: columns.length, gap: "$4", children: columns.map((column, index) => (_jsxs(Card, { ...slot('comparison-column'), "data-highlighted": column.highlighted ? '' : undefined, highlighted: column.highlighted, children: [_jsx(SizableText, { size: "$6", fontWeight: "600", children: column.title }), _jsx(YStack, { gap: "$3", children: column.items.map((item, itemIndex) => (_jsx(Row, { item: item }, item.label || itemIndex))) })] }, column.title || index))) }) }));
+const Title = styled(SizableText, { name: 'ComparisonTitle', size: '$5', fontWeight: '600' });
+const Label = styled(SizableText, { name: 'ComparisonLabel', size: '$2' });
+const Value = styled(SizableText, { name: 'ComparisonValue', size: '$2', fontWeight: '600' });
+const Row = styled(XStack, { name: 'ComparisonRow', items: 'center', gap: '$3' });
+const mark = (value) => typeof value === 'boolean' ? (value ? (_jsx(Check, { ...slot('comparison-item-check'), size: 18, color: "$green9" })) : (_jsx(X, { ...slot('comparison-item-cross'), size: 18, color: "$red9" }))) : (_jsx(Value, { children: value }));
+export function Comparison({ columns, gap = '$4', ...props }) {
+    return (_jsx(Grid, { ...slot('comparison'), columns: columns.length || 1, gap: gap, ...props, children: columns.map((column, i) => (_jsx(Cell, { children: _jsxs(ColumnFrame, { ...slot('comparison-column'), "data-highlighted": column.highlighted ? '' : undefined, highlighted: column.highlighted, children: [ink(column.title, Title), _jsx(YStack, { gap: "$3", children: column.items.map((item, j) => (_jsxs(Row, { ...slot('comparison-item'), children: [mark(item.value), _jsx(Label, { children: item.label })] }, j))) })] }) }, i))) }));
 }
 //# sourceMappingURL=comparison.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"comparison.js","sourceRoot":"","sources":["../../../src/backends/gui/comparison.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,0BAA0B,CAAA;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAmB7B,MAAM,IAAI,GAAG,EAAE,CAAA;AAEf,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE;IAC1B,IAAI,EAAE,kBAAkB;IACxB,CAAC,EAAE,IAAI;IACP,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,GAAG,EAAE,IAAI;IAET,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,IAAI,EAAE;gBACJ,WAAW,EAAE,SAAS;gBACtB,WAAW,EAAE,cAAc;gBAC3B,YAAY,EAAE,EAAE;gBAChB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;aACtC;SACF;KACO;CACX,CAAC,CAAA;AAEF,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAA4B,EAAa,EAAE,CAAC,CAC7D,MAAC,MAAM,OAAK,IAAI,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzD,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACjC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,OACA,IAAI,CAAC,uBAAuB,CAAC,EACjC,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,SAAS,GACf,CACH,CAAC,CAAC,CAAC,CACF,KAAC,CAAC,OAAK,IAAI,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,OAAO,GAAG,CACnE,CACF,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,OAAK,IAAI,CAAC,uBAAuB,CAAC,EAAE,UAAU,EAAC,KAAK,YAC7D,IAAI,CAAC,KAAK,GACC,CACf,EACD,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,YAAE,IAAI,CAAC,KAAK,GAAe,IAC1C,CACV,CAAA;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAmB;IACrD,OAAO,CACL,iBAAS,IAAI,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YACvD,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAC,IAAI,YACpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,MAAC,IAAI,OAEC,IAAI,CAAC,mBAAmB,CAAC,sBACX,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACrD,WAAW,EAAE,MAAM,CAAC,WAAW,aAE/B,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,YACpC,MAAM,CAAC,KAAK,GACD,EACd,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,YACb,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,KAAC,GAAG,IAA+B,IAAI,EAAE,IAAI,IAAnC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAgB,CAClD,CAAC,GACK,KAZJ,MAAM,CAAC,KAAK,IAAI,KAAK,CAarB,CACR,CAAC,GACG,GACH,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"comparison.js","sourceRoot":"","sources":["../../../src/backends/gui/comparison.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/crypto-screener.cjs

@@ -4,30 +4,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CryptoScreener = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * CryptoScreener — a TradingView screener table, in a gui frame.
+ * CryptoScreener — TradingView's crypto market screener, in a gui frame.
  *
- * The rows are TradingView's, drawn inside TradingView's own document, so the
- * table is an `<iframe>` and nothing here draws a pixel of it. What this owns
- * is the frame around it and the settings the table opens with — which market
- * it screens, which column set it opens on, the display currency, the theme —
- * written into the iframe's address the way TradingView's own embed script
- * writes them: `/embed-widget/screener/?locale=…#<settings as JSON>`. Nothing
- * is fetched or injected at mount, so the markup is the same on the server and
- * in the browser, and the frame has its height before the table arrives.
+ * The table is TradingView's own document, so it is an `<iframe>` and nothing
+ * here draws a row of it. What this owns is the frame around it and the
+ * settings the screener opens with — the column set, the display currency,
+ * the theme — written into the iframe's address the way TradingView's own
+ * embed script writes them:
+ * `/embed-widget/screener/?locale=…#<settings as JSON>`. Nothing is fetched or
+ * injected at mount, so the markup is the same on the server and in the
+ * browser, and the frame has its height before the table arrives.
  *
- * The iframe is keyed on that address. A browser treats a `src` that differs
- * only in its fragment as a same-document navigation and does not reload, so
- * without the key a changed `market` would leave the old table on screen.
+ * The iframe is keyed on that address, because a browser treats a `src` that
+ * differs only in its fragment as a same-document navigation and does not
+ * reload — without the key a new `defaultColumn` would change the URL and
+ * leave the old table on screen.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
-/** `crypto` is the one short name; every other market is its own screener_type. */
-const screenerType = (market) => market === 'crypto' ? 'crypto_mkt' : market;
-const EMBED = 'https://www.tradingview-widget.com/embed-widget/screener/?locale=';
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/screener/?locale=en#';
 /** The settings TradingView reads, with the documented defaults filled in. */
-const settings = ({ market = 'crypto', defaultColumn = 'overview', displayCurrency = 'USD', colorTheme = 'dark', isTransparent = false, locale = 'en', width = '100%', height = 550, }) => ({
+const settings = ({ defaultColumn = 'overview', displayCurrency = 'USD', colorTheme = 'dark', isTransparent = false, locale = 'en', width = '100%', height = 550, }) => ({
     defaultColumn,
-    screener_type: screenerType(market),
+    screener_type: 'crypto_mkt',
     displayCurrency,
     colorTheme,
     isTransparent,
@@ -35,21 +34,12 @@ const settings = ({ market = 'crypto', defaultColumn = 'overview', displayCurren
     width,
     height,
 });
-const CryptoScreener = ({ market, defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height, ...props }) => {
-    const s = settings({
-        market,
-        defaultColumn,
-        displayCurrency,
-        colorTheme,
-        isTransparent,
-        locale,
-        width,
-        height,
-    });
-    const src = `${EMBED}${s.locale}#${encodeURIComponent(JSON.stringify(s))}`;
-    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('crypto-screener'), "data-market": market ?? 'crypto', "data-color-theme": s.colorTheme, 
+const CryptoScreener = ({ market: _market, defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height, ...props }) => {
+    const s = settings({ defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height });
+    const src = EMBED + encodeURIComponent(JSON.stringify(s));
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('crypto-screener'), "data-column": s.defaultColumn, "data-color-theme": s.colorTheme, 
         // The documented size is TradingView's — a number or a percent string —
         // and gui declares a narrower one; on web both reach CSS as written.
-        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: gui_1.isWeb && ((0, jsx_runtime_1.jsx)("iframe", { src: src, title: `${market ?? 'crypto'} screener`, loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: gui_1.isWeb && ((0, jsx_runtime_1.jsx)("iframe", { src: src, title: "Crypto screener", loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
 };
 exports.CryptoScreener = CryptoScreener;

package/dist/backends/gui/crypto-screener.d.ts

@@ -1,42 +1,38 @@
 /**
- * CryptoScreener — a TradingView screener table, in a gui frame.
+ * CryptoScreener — TradingView's crypto market screener, in a gui frame.
  *
- * The rows are TradingView's, drawn inside TradingView's own document, so the
- * table is an `<iframe>` and nothing here draws a pixel of it. What this owns
- * is the frame around it and the settings the table opens with — which market
- * it screens, which column set it opens on, the display currency, the theme —
- * written into the iframe's address the way TradingView's own embed script
- * writes them: `/embed-widget/screener/?locale=…#<settings as JSON>`. Nothing
- * is fetched or injected at mount, so the markup is the same on the server and
- * in the browser, and the frame has its height before the table arrives.
+ * The table is TradingView's own document, so it is an `<iframe>` and nothing
+ * here draws a row of it. What this owns is the frame around it and the
+ * settings the screener opens with — the column set, the display currency,
+ * the theme — written into the iframe's address the way TradingView's own
+ * embed script writes them:
+ * `/embed-widget/screener/?locale=…#<settings as JSON>`. Nothing is fetched or
+ * injected at mount, so the markup is the same on the server and in the
+ * browser, and the frame has its height before the table arrives.
  *
- * The iframe is keyed on that address. A browser treats a `src` that differs
- * only in its fragment as a same-document navigation and does not reload, so
- * without the key a changed `market` would leave the old table on screen.
+ * The iframe is keyed on that address, because a browser treats a `src` that
+ * differs only in its fragment as a same-document navigation and does not
+ * reload — without the key a new `defaultColumn` would change the URL and
+ * leave the old table on screen.
  */
 import { type YStackProps } from '@hanzo/gui';
-/**
- * The market the table screens — TradingView's own `screener_type` values
- * (`america`, `india`, `forex_mkt`, `bond_mkt`, …), plus `crypto` as the
- * short name for `crypto_mkt` this component defaults to.
- */
-export type CryptoScreenerMarket = 'crypto' | (string & {});
-export type CryptoScreenerColumn = 'overview' | 'performance' | 'oscillators' | 'moving_averages' | 'valuation';
+export type CryptoScreenerColumn = 'overview' | 'performance' | 'oscillators' | 'moving_averages';
 export type CryptoScreenerTheme = 'light' | 'dark';
+export type CryptoScreenerMarket = 'crypto';
 export interface CryptoScreenerProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
-    /** Which market the table screens. */
+    /** The market the screener lists; TradingView's crypto table. */
     market?: CryptoScreenerMarket;
-    /** Which column set the table opens on. */
+    /** Which column set opens first; the toolbar still switches it live. */
     defaultColumn?: CryptoScreenerColumn;
-    /** The currency prices and volumes are shown in. */
+    /** The currency prices and market caps are shown in. */
     displayCurrency?: string;
-    /** The table's own palette; independent of the surrounding gui theme. */
+    /** The screener's own palette; independent of the surrounding gui theme. */
     colorTheme?: CryptoScreenerTheme;
     isTransparent?: boolean;
     locale?: string;
     width?: string | number;
     height?: string | number;
 }
-declare const CryptoScreener: ({ market, defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height, ...props }: CryptoScreenerProps) => import("react").JSX.Element;
+declare const CryptoScreener: ({ market: _market, defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height, ...props }: CryptoScreenerProps) => import("react").JSX.Element;
 export { CryptoScreener };
 //# sourceMappingURL=crypto-screener.d.ts.map

package/dist/backends/gui/crypto-screener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crypto-screener.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/crypto-screener.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAG5D;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAE3D,MAAM,MAAM,oBAAoB,GAC5B,UAAU,GACV,aAAa,GACb,aAAa,GACb,iBAAiB,GACjB,WAAW,CAAA;AAEf,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAA;AAMlD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1F,sCAAsC;IACtC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yEAAyE;IACzE,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAyBD,QAAA,MAAM,cAAc,2GAUjB,mBAAmB,gCAsCrB,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"crypto-screener.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/crypto-screener.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAG5D,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,GAAG,iBAAiB,CAAA;AACjG,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAA;AAClD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAA;AAE3C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1F,iEAAiE;IACjE,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,wEAAwE;IACxE,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAwBD,QAAA,MAAM,cAAc,oHAUjB,mBAAmB,gCA6BrB,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/crypto-screener.js

@@ -1,30 +1,29 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * CryptoScreener — a TradingView screener table, in a gui frame.
+ * CryptoScreener — TradingView's crypto market screener, in a gui frame.
  *
- * The rows are TradingView's, drawn inside TradingView's own document, so the
- * table is an `<iframe>` and nothing here draws a pixel of it. What this owns
- * is the frame around it and the settings the table opens with — which market
- * it screens, which column set it opens on, the display currency, the theme —
- * written into the iframe's address the way TradingView's own embed script
- * writes them: `/embed-widget/screener/?locale=…#<settings as JSON>`. Nothing
- * is fetched or injected at mount, so the markup is the same on the server and
- * in the browser, and the frame has its height before the table arrives.
+ * The table is TradingView's own document, so it is an `<iframe>` and nothing
+ * here draws a row of it. What this owns is the frame around it and the
+ * settings the screener opens with — the column set, the display currency,
+ * the theme — written into the iframe's address the way TradingView's own
+ * embed script writes them:
+ * `/embed-widget/screener/?locale=…#<settings as JSON>`. Nothing is fetched or
+ * injected at mount, so the markup is the same on the server and in the
+ * browser, and the frame has its height before the table arrives.
  *
- * The iframe is keyed on that address. A browser treats a `src` that differs
- * only in its fragment as a same-document navigation and does not reload, so
- * without the key a changed `market` would leave the old table on screen.
+ * The iframe is keyed on that address, because a browser treats a `src` that
+ * differs only in its fragment as a same-document navigation and does not
+ * reload — without the key a new `defaultColumn` would change the URL and
+ * leave the old table on screen.
  */
 import { YStack, isWeb } from '@hanzo/gui';
 import { slot } from './slot.js';
-/** `crypto` is the one short name; every other market is its own screener_type. */
-const screenerType = (market) => market === 'crypto' ? 'crypto_mkt' : market;
-const EMBED = 'https://www.tradingview-widget.com/embed-widget/screener/?locale=';
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/screener/?locale=en#';
 /** The settings TradingView reads, with the documented defaults filled in. */
-const settings = ({ market = 'crypto', defaultColumn = 'overview', displayCurrency = 'USD', colorTheme = 'dark', isTransparent = false, locale = 'en', width = '100%', height = 550, }) => ({
+const settings = ({ defaultColumn = 'overview', displayCurrency = 'USD', colorTheme = 'dark', isTransparent = false, locale = 'en', width = '100%', height = 550, }) => ({
     defaultColumn,
-    screener_type: screenerType(market),
+    screener_type: 'crypto_mkt',
     displayCurrency,
     colorTheme,
     isTransparent,
@@ -32,22 +31,13 @@ const settings = ({ market = 'crypto', defaultColumn = 'overview', displayCurren
     width,
     height,
 });
-const CryptoScreener = ({ market, defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height, ...props }) => {
-    const s = settings({
-        market,
-        defaultColumn,
-        displayCurrency,
-        colorTheme,
-        isTransparent,
-        locale,
-        width,
-        height,
-    });
-    const src = `${EMBED}${s.locale}#${encodeURIComponent(JSON.stringify(s))}`;
-    return (_jsx(YStack, { ...slot('crypto-screener'), "data-market": market ?? 'crypto', "data-color-theme": s.colorTheme, 
+const CryptoScreener = ({ market: _market, defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height, ...props }) => {
+    const s = settings({ defaultColumn, displayCurrency, colorTheme, isTransparent, locale, width, height });
+    const src = EMBED + encodeURIComponent(JSON.stringify(s));
+    return (_jsx(YStack, { ...slot('crypto-screener'), "data-column": s.defaultColumn, "data-color-theme": s.colorTheme, 
         // The documented size is TradingView's — a number or a percent string —
         // and gui declares a narrower one; on web both reach CSS as written.
-        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: isWeb && (_jsx("iframe", { src: src, title: `${market ?? 'crypto'} screener`, loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: isWeb && (_jsx("iframe", { src: src, title: "Crypto screener", loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
 };
 export { CryptoScreener };
 //# sourceMappingURL=crypto-screener.js.map

package/dist/backends/gui/crypto-screener.js.map

@@ -1 +1 @@
-{"version":3,"file":"crypto-screener.js","sourceRoot":"","sources":["../../../src/backends/gui/crypto-screener.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAoB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAkB7B,mFAAmF;AACnF,MAAM,YAAY,GAAG,CAAC,MAA4B,EAAE,EAAE,CACpD,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAA;AAiB7C,MAAM,KAAK,GAAG,mEAAmE,CAAA;AAEjF,8EAA8E;AAC9E,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,QAAQ,EACjB,aAAa,GAAG,UAAU,EAC1B,eAAe,GAAG,KAAK,EACvB,UAAU,GAAG,MAAM,EACnB,aAAa,GAAG,KAAK,EACrB,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,GAAG,GACQ,EAAE,EAAE,CAAC,CAAC;IAC1B,aAAa;IACb,aAAa,EAAE,YAAY,CAAC,MAAM,CAAC;IACnC,eAAe;IACf,UAAU;IACV,aAAa;IACb,MAAM;IACN,KAAK;IACL,MAAM;CACP,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,CAAC,EACtB,MAAM,EACN,aAAa,EACb,eAAe,EACf,UAAU,EACV,aAAa,EACb,MAAM,EACN,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,CAAC,GAAG,QAAQ,CAAC;QACjB,MAAM;QACN,aAAa;QACb,eAAe;QACf,UAAU;QACV,aAAa;QACb,MAAM;QACN,KAAK;QACL,MAAM;KACP,CAAC,CAAA;IACF,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,MAAM,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,iBAAiB,CAAC,iBACd,MAAM,IAAI,QAAQ,sBACb,CAAC,CAAC,UAAU;QAC9B,wEAAwE;QACxE,qEAAqE;QACrE,KAAK,EAAE,CAAC,CAAC,KAA6B,EACtC,MAAM,EAAE,CAAC,CAAC,MAA+B,EACzC,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,QAAQ,KACP,KAAK,YAER,KAAK,IAAI,CACR,iBAEE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,GAAG,MAAM,IAAI,QAAQ,WAAW,EACvC,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,IAAI,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,IALhE,GAAG,CAMR,CACH,GACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"crypto-screener.js","sourceRoot":"","sources":["../../../src/backends/gui/crypto-screener.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAoB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAqB7B,MAAM,KAAK,GAAG,sEAAsE,CAAA;AAEpF,8EAA8E;AAC9E,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,GAAG,UAAU,EAC1B,eAAe,GAAG,KAAK,EACvB,UAAU,GAAG,MAAM,EACnB,aAAa,GAAG,KAAK,EACrB,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,GAAG,GACQ,EAAE,EAAE,CAAC,CAAC;IAC1B,aAAa;IACb,aAAa,EAAE,YAAY;IAC3B,eAAe;IACf,UAAU;IACV,aAAa;IACb,MAAM;IACN,KAAK;IACL,MAAM;CACP,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,CAAC,EACtB,MAAM,EAAE,OAAO,EACf,aAAa,EACb,eAAe,EACf,UAAU,EACV,aAAa,EACb,MAAM,EACN,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IACxG,MAAM,GAAG,GAAG,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzD,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,iBAAiB,CAAC,iBACd,CAAC,CAAC,aAAa,sBACV,CAAC,CAAC,UAAU;QAC9B,wEAAwE;QACxE,qEAAqE;QACrE,KAAK,EAAE,CAAC,CAAC,KAA6B,EACtC,MAAM,EAAE,CAAC,CAAC,MAA+B,EACzC,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,QAAQ,KACP,KAAK,YAER,KAAK,IAAI,CACR,iBAEE,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,IAAI,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,IALhE,GAAG,CAMR,CACH,GACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/cursor.cjs

@@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cursor = Cursor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Cursor — a custom pointer that replaces the native one only inside its own
- * frame, following the mouse and optionally carrying a short label.
+ * Cursor — a container that replaces the pointer with a small round follower
+ * while the pointer sits over it.
  *
- * Position tracks locally off `getBoundingClientRect`, so the dot sits in the
- * frame's own coordinate space rather than the viewport's, and it renders
- * nothing until the pointer has actually entered — a plain `mouseenter`/
- * `mouseleave` pair, no document listener, since the effect never needs to
- * reach past the frame it is masking. `cursor: none` is scoped to that same
- * frame, so nothing outside it loses its native pointer.
+ * A `mousemove` on the frame turns the client point into a position relative
+ * to the frame's own box (`getBoundingClientRect`), so the follower is placed
+ * with plain `left`/`top` inside a `position: relative` parent — no fixed
+ * positioning, no document listener, and nothing rendered before the pointer
+ * has actually entered. `cursorText` draws a label inside the dot; leaving it
+ * unset draws a bare dot. The frame hides the native cursor for its own box
+ * only (`cursor: none`), so the effect is local to whatever the caller wraps,
+ * unlike a page-wide replacement.
  */
 const gui_1 = require("@hanzo/gui");
 const react_1 = require("react");
@@ -21,20 +23,15 @@ const slot_1 = require("./slot.cjs");
 function Cursor({ children, cursorText, cursorSize = 20, className }) {
     const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const handleMouseMove = (e) => {
-        const rect = e.currentTarget.getBoundingClientRect();
-        setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    };
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('cursor'), position: "relative", style: gui_1.isWeb ? { cursor: 'none' } : undefined, onMouseMove: handleMouseMove, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), ...(0, sx_1.sx)(className), children: [children, isHovered && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('cursor-dot'), items: "center", justify: "center", style: {
-                    position: 'absolute',
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('cursor'), position: "relative", style: gui_1.isWeb ? { cursor: 'none' } : undefined, ...(0, sx_1.sx)(className), onMouseMove: (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [children, isHovered && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('cursor-dot'), position: "absolute", items: "center", justify: "center", rounded: 9999, bg: "$color6", pointerEvents: "none", style: {
                     left: position.x,
                     top: position.y,
                     width: cursorSize,
                     height: cursorSize,
-                    borderRadius: '50%',
                     transform: 'translate(-50%, -50%)',
-                    backgroundColor: 'color-mix(in srgb, var(--color) 20%, transparent)',
-                    pointerEvents: 'none',
                     zIndex: 50,
-                }, children: cursorText && ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('cursor-text'), size: "$1", fontWeight: "600", color: "$color", children: cursorText })) }))] }));
+                }, children: cursorText && ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontWeight: "500", color: "$color", children: cursorText })) }))] }));
 }

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

@@ -4,12 +4,13 @@ export type CursorPosition = {
     y: number;
 };
 export type CursorProps = {
+    /** Content the cursor effect plays over. */
     children: ReactNode;
-    /** Short label shown inside the dot. */
+    /** Label drawn inside the follower dot; omit for a bare dot. */
     cursorText?: string;
-    /** Diameter of the dot, in px. */
+    /** Diameter of the follower dot, in px. */
     cursorSize?: number;
-    /** Class notation for the frame. */
+    /** Class notation, converted to style props on the frame. */
     className?: string;
 };
 export declare function Cursor({ children, cursorText, cursorSize, className }: CursorProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/cursor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAe,EAAE,SAAS,EAAE,EAAE,WAAW,+BA+CvF"}
+{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/cursor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAe,EAAE,SAAS,EAAE,EAAE,WAAW,+BA6CvF"}

package/dist/backends/gui/cursor.js

@@ -1,15 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Cursor — a custom pointer that replaces the native one only inside its own
- * frame, following the mouse and optionally carrying a short label.
+ * Cursor — a container that replaces the pointer with a small round follower
+ * while the pointer sits over it.
  *
- * Position tracks locally off `getBoundingClientRect`, so the dot sits in the
- * frame's own coordinate space rather than the viewport's, and it renders
- * nothing until the pointer has actually entered — a plain `mouseenter`/
- * `mouseleave` pair, no document listener, since the effect never needs to
- * reach past the frame it is masking. `cursor: none` is scoped to that same
- * frame, so nothing outside it loses its native pointer.
+ * A `mousemove` on the frame turns the client point into a position relative
+ * to the frame's own box (`getBoundingClientRect`), so the follower is placed
+ * with plain `left`/`top` inside a `position: relative` parent — no fixed
+ * positioning, no document listener, and nothing rendered before the pointer
+ * has actually entered. `cursorText` draws a label inside the dot; leaving it
+ * unset draws a bare dot. The frame hides the native cursor for its own box
+ * only (`cursor: none`), so the effect is local to whatever the caller wraps,
+ * unlike a page-wide replacement.
  */
 import { SizableText, YStack, isWeb } from '@hanzo/gui';
 import { useState } from 'react';
@@ -18,21 +20,16 @@ import { slot } from './slot.js';
 export function Cursor({ children, cursorText, cursorSize = 20, className }) {
     const [position, setPosition] = useState({ x: 0, y: 0 });
     const [isHovered, setIsHovered] = useState(false);
-    const handleMouseMove = (e) => {
-        const rect = e.currentTarget.getBoundingClientRect();
-        setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    };
-    return (_jsxs(YStack, { ...slot('cursor'), position: "relative", style: isWeb ? { cursor: 'none' } : undefined, onMouseMove: handleMouseMove, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), ...sx(className), children: [children, isHovered && (_jsx(YStack, { ...slot('cursor-dot'), items: "center", justify: "center", style: {
-                    position: 'absolute',
+    return (_jsxs(YStack, { ...slot('cursor'), position: "relative", style: isWeb ? { cursor: 'none' } : undefined, ...sx(className), onMouseMove: (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [children, isHovered && (_jsx(YStack, { ...slot('cursor-dot'), position: "absolute", items: "center", justify: "center", rounded: 9999, bg: "$color6", pointerEvents: "none", style: {
                     left: position.x,
                     top: position.y,
                     width: cursorSize,
                     height: cursorSize,
-                    borderRadius: '50%',
                     transform: 'translate(-50%, -50%)',
-                    backgroundColor: 'color-mix(in srgb, var(--color) 20%, transparent)',
-                    pointerEvents: 'none',
                     zIndex: 50,
-                }, children: cursorText && (_jsx(SizableText, { ...slot('cursor-text'), size: "$1", fontWeight: "600", color: "$color", children: cursorText })) }))] }));
+                }, children: cursorText && (_jsx(SizableText, { size: "$1", fontWeight: "500", color: "$color", children: cursorText })) }))] }));
 }
 //# sourceMappingURL=cursor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cursor.js","sourceRoot":"","sources":["../../../src/backends/gui/cursor.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAc7B,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,GAAG,EAAE,EAAE,SAAS,EAAe;IACtF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACxE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,MAAM,eAAe,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC9D,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAA;QACpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;IACpE,CAAC,CAAA;IAED,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,QAAQ,CAAC,EAClB,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7C,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,KACnC,EAAE,CAAC,SAAS,CAAC,aAEhB,QAAQ,EACR,SAAS,IAAI,CACZ,KAAC,MAAM,OACD,IAAI,CAAC,YAAY,CAAC,EACtB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,QAAQ,CAAC,CAAC;oBAChB,GAAG,EAAE,QAAQ,CAAC,CAAC;oBACf,KAAK,EAAE,UAAU;oBACjB,MAAM,EAAE,UAAU;oBAClB,YAAY,EAAE,KAAK;oBACnB,SAAS,EAAE,uBAAuB;oBAClC,eAAe,EAAE,mDAAmD;oBACpE,aAAa,EAAE,MAAM;oBACrB,MAAM,EAAE,EAAE;iBACX,YAEA,UAAU,IAAI,CACb,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,YAC5E,UAAU,GACC,CACf,GACM,CACV,IACM,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"cursor.js","sourceRoot":"","sources":["../../../src/backends/gui/cursor.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAe7B,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,GAAG,EAAE,EAAE,SAAS,EAAe;IACtF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACxE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,QAAQ,CAAC,EAClB,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,KACzC,EAAE,CAAC,SAAS,CAAC,EACjB,WAAW,EAAE,CAAC,CAAgC,EAAE,EAAE;YAChD,MAAM,IAAI,GAAI,CAAC,CAAC,aAA6B,CAAC,qBAAqB,EAAE,CAAA;YACrE,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,aAEtC,QAAQ,EACR,SAAS,IAAI,CACZ,KAAC,MAAM,OACD,IAAI,CAAC,YAAY,CAAC,EACtB,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,IAAI,EACb,EAAE,EAAC,SAAS,EACZ,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE;oBACL,IAAI,EAAE,QAAQ,CAAC,CAAC;oBAChB,GAAG,EAAE,QAAQ,CAAC,CAAC;oBACf,KAAK,EAAE,UAAU;oBACjB,MAAM,EAAE,UAAU;oBAClB,SAAS,EAAE,uBAAuB;oBAClC,MAAM,EAAE,EAAE;iBACX,YAEA,UAAU,IAAI,CACb,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,YACnD,UAAU,GACC,CACf,GACM,CACV,IACM,CACV,CAAA;AACH,CAAC"}