@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/field.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Field — the parts a form composes a labeled control from.
+ *
+ * `FieldSet`/`FieldLegend` group related fields inside a real `<fieldset>` so
+ * keyboard and screen-reader users get the grouping for free. `FieldGroup`
+ * stacks `Field`s with one rhythm. `Field` is the per-control wrapper —
+ * `role="group"`, an `orientation` (vertical / horizontal / responsive), and a
+ * `data-invalid` switch that turns the whole block destructive-colored so a
+ * sighted user and a screen reader see the same boundary. `FieldContent` keeps
+ * a label and its description together when the label sits beside the control.
+ * `FieldLabel` also doubles as a selectable "choice card" when its only child
+ * is a `Field` — border, radius and padding appear around it.
+ * `FieldTitle`/`FieldDescription`/`FieldError` are the text leaves;
+ * `FieldSeparator` divides a `FieldGroup`.
+ *
+ * `responsive` is mobile-first like `vertical` already is: a column below
+ * `$md`, a row from `$md` up — this config's media props are min-width (see
+ * the compiled `@media (min-width: …)` any `$md` prop emits), so there are no
+ * container queries to reach for and none are needed: the same direction every
+ * other responsive prop in this codebase is written in.
+ */
+import { SizableText, XStack, YStack, createStyledContext, styled } from '@hanzo/gui';
+import { isValidElement } from 'react';
+import { Box } from '../../box.js';
+import { Label } from './label.js';
+import { Separator } from './layout.js';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+function FieldSet({ children, ...props }) {
+    return (_jsx(Box, { tag: "fieldset", className: "flex flex-col gap-6", ...slot('field-set'), ...props, children: children }));
+}
+function FieldLegend({ variant = 'legend', children, ...props }) {
+    return (_jsx(Box, { tag: "legend", className: variant === 'label' ? 'mb-3 text-sm font-medium' : 'mb-3 text-base font-medium', ...slot('field-legend'), "data-variant": variant, ...props, children: children }));
+}
+const FieldGroup = styled(YStack, {
+    name: 'FieldGroup',
+    width: '100%',
+    gap: '$7',
+});
+const FieldContext = /* @__PURE__ */ createStyledContext({
+    orientation: 'vertical',
+});
+const FieldFrame = styled(XStack, {
+    name: 'Field',
+    context: FieldContext,
+    width: '100%',
+    gap: '$3',
+    variants: {
+        orientation: {
+            vertical: { flexDirection: 'column' },
+            horizontal: { flexDirection: 'row', items: 'center' },
+            // Mobile-first, the way `vertical` already is: a column below `$md`,
+            // a row from `$md` up — this config's media props are min-width, so the
+            // base case is the narrow one and `$md` is where it widens.
+            responsive: {
+                flexDirection: 'column',
+                $md: { flexDirection: 'row', items: 'center' },
+            },
+        },
+        invalid: {
+            true: { color: '$red9' },
+        },
+    },
+    defaultVariants: { orientation: 'vertical' },
+});
+function Field({ orientation = 'vertical', ...props }) {
+    const invalid = props['data-invalid'];
+    return (_jsx(FieldFrame, { role: "group", ...slot('field'), "data-orientation": orientation, orientation: orientation, invalid: invalid, ...props }));
+}
+const FieldContent = styled(YStack, {
+    name: 'FieldContent',
+    flex: 1,
+    gap: '$1.5',
+});
+/** A `Field` nested directly inside a `FieldLabel` reads as a choice card. */
+const isFieldChild = (children) => isValidElement(children) && children.type === Field;
+function FieldLabel({ className, children, ...props }) {
+    const card = isFieldChild(children);
+    return (_jsx(Label, { ...slot('field-label'), gap: "$2", ...(card
+            ? {
+                width: '100%',
+                flexDirection: 'column',
+                rounded: '$3',
+                borderWidth: 1,
+                borderColor: '$borderColor',
+                p: '$4',
+            }
+            : { self: 'flex-start' }), className: className, ...props, children: children }));
+}
+function FieldTitle({ children, ...props }) {
+    return (_jsx(XStack, { ...slot('field-label'), self: "flex-start", items: "center", gap: "$2", ...props, children: ink(children, SizableText, { fontSize: '$2', fontWeight: '500' }) }));
+}
+function FieldDescription({ children, ...props }) {
+    return (_jsx(SizableText, { ...slot('field-description'), fontSize: "$2", fontWeight: "400", color: "$quiet", ...props, children: children }));
+}
+function FieldSeparator({ children, ...props }) {
+    return (_jsxs(XStack, { ...slot('field-separator'), "data-content": !!children, items: "center", gap: "$2", ...props, children: [_jsx(Separator, { flex: 1 }), children && (_jsx(SizableText, { ...slot('field-separator-content'), color: "$quiet", fontSize: "$2", children: children })), children && _jsx(Separator, { flex: 1 })] }));
+}
+function fieldErrorContent(children, errors, issues) {
+    if (children)
+        return children;
+    const list = errors ?? issues;
+    if (!list)
+        return null;
+    const messages = list.filter((e) => !!e?.message);
+    if (messages.length === 0)
+        return null;
+    if (messages.length === 1)
+        return messages[0].message;
+    return (_jsx(Box, { tag: "ul", className: "ml-4 flex flex-col gap-1", style: { listStyleType: 'disc' }, ...slot('field-error-list'), children: messages.map((error, index) => (_jsx(Box, { tag: "li", className: "text-sm text-red9", children: error.message }, index))) }));
+}
+function FieldError({ children, errors, issues, ...props }) {
+    const content = fieldErrorContent(children, errors, issues);
+    if (!content)
+        return null;
+    return (_jsx(XStack, { role: "alert", ...slot('field-error'), ...props, children: ink(content, SizableText, { fontSize: '$2', fontWeight: '400', color: '$red9' }) }));
+}
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/backends/gui/field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACrF,OAAO,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAK7B,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA8B;IAClE,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAC,UAAU,EAAC,SAAS,EAAC,qBAAqB,KAAK,IAAI,CAAC,WAAW,CAAC,KAAM,KAAK,YACjF,QAAQ,GACL,CACP,CAAA;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAE5D;IACC,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B,KACtF,IAAI,CAAC,cAAc,CAAC,kBACV,OAAO,KACjB,KAAK,YAER,QAAQ,GACL,CACP,CAAA;AACH,CAAC;AAID,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;IAChC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,IAAI;CACV,CAAC,CAAA;AAIF,MAAM,YAAY,GAAG,eAAe,CAAC,mBAAmB,CAAoC;IAC1F,WAAW,EAAE,UAAU;CACxB,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;IAChC,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,IAAI;IAET,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,QAAQ,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE;YACrC,UAAU,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;YACrD,qEAAqE;YACrE,wEAAwE;YACxE,4DAA4D;YAC5D,UAAU,EAAE;gBACV,aAAa,EAAE,QAAQ;gBACvB,GAAG,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;aAC/C;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;SACzB;KACO;IAEV,eAAe,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;CAC7C,CAAC,CAAA;AAOF,SAAS,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,EAAE,GAAG,KAAK,EAAc;IAC/D,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,CAAC,CAAA;IACrC,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,KACR,IAAI,CAAC,OAAO,CAAC,sBACC,WAAW,EAC7B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,KACZ,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE;IAClC,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,MAAM;CACZ,CAAC,CAAA;AAIF,8EAA8E;AAC9E,MAAM,YAAY,GAAG,CAAC,QAAmB,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,KAAK,KAAK,CAAA;AAEjG,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgC;IACjF,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;IACnC,OAAO,CACL,KAAC,KAAK,OACA,IAAI,CAAC,aAAa,CAAC,EACvB,GAAG,EAAC,IAAI,KACJ,CAAC,IAAI;YACP,CAAC,CAAC;gBACE,KAAK,EAAE,MAAe;gBACtB,aAAa,EAAE,QAAiB;gBAChC,OAAO,EAAE,IAAI;gBACb,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,cAAc;gBAC3B,CAAC,EAAE,IAAI;aACR;YACH,CAAC,CAAC,EAAE,IAAI,EAAE,YAAqB,EAAE,CAAC,EACpC,SAAS,EAAE,SAAS,KAChB,KAAK,YAER,QAAQ,GACH,CACT,CAAA;AACH,CAAC;AAID,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiC;IACvE,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,KAAK,KAAK,YACjF,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,GAC3D,CACV,CAAA;AACH,CAAC;AAID,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsC;IAClF,OAAO,CACL,KAAC,WAAW,OAAK,IAAI,CAAC,mBAAmB,CAAC,EAAE,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,KAAK,KAAK,YAChG,QAAQ,GACG,CACf,CAAA;AACH,CAAC;AAID,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAE3C;IACC,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,iBAAiB,CAAC,kBAAgB,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,KAAK,KAAK,aAC9F,KAAC,SAAS,IAAC,IAAI,EAAE,CAAC,GAAI,EACrB,QAAQ,IAAI,CACX,KAAC,WAAW,OAAK,IAAI,CAAC,yBAAyB,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI,YAC3E,QAAQ,GACG,CACf,EACA,QAAQ,IAAI,KAAC,SAAS,IAAC,IAAI,EAAE,CAAC,GAAI,IAC5B,CACV,CAAA;AACH,CAAC;AAMD,SAAS,iBAAiB,CACxB,QAAmB,EACnB,MAAsD,EACtD,MAAsD;IAEtD,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAA;IAC7B,MAAM,IAAI,GAAG,MAAM,IAAI,MAAM,CAAA;IAC7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAwB,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;IACvE,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACtC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IACrD,OAAO,CAKL,KAAC,GAAG,IACF,GAAG,EAAC,IAAI,EACR,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,KAC5B,IAAI,CAAC,kBAAkB,CAAC,YAE3B,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,KAAC,GAAG,IAAa,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,mBAAmB,YACpD,KAAK,CAAC,OAAO,IADN,KAAK,CAET,CACP,CAAC,GACE,CACP,CAAA;AACH,CAAC;AAQD,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,EAAmB;IACzE,MAAM,OAAO,GAAG,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC3D,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IACzB,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,KAAK,IAAI,CAAC,aAAa,CAAC,KAAM,KAAK,YACpD,GAAG,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,GAC1E,CACV,CAAA;AACH,CAAC;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,UAAU,GACX,CAAA"}

package/dist/backends/gui/financials.cjs

@@ -0,0 +1,45 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Financials = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Financials — a TradingView financial-statements widget for one symbol, in a
+ * gui frame.
+ *
+ * The statements, ratios and estimates are TradingView's, drawn inside
+ * TradingView's own document, so the widget is an `<iframe>` and nothing here
+ * draws a row of it. What this owns is the frame around it and the settings it
+ * opens with — symbol, display mode, theme — written into the iframe's address
+ * the way TradingView's own embed script writes them:
+ * `/embed-widget/financials/?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 widget 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 new `symbol` would change the URL and leave the old
+ * widget on screen.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/financials/?locale=';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ symbol = 'NASDAQ:AAPL', width = '100%', height = 800, colorTheme = 'dark', isTransparent = false, displayMode = 'adaptive', largeChartUrl = '', }) => ({
+    symbol,
+    width,
+    height,
+    colorTheme,
+    isTransparent,
+    displayMode,
+    largeChartUrl,
+});
+const Financials = ({ symbol, width, height, locale = 'en', colorTheme, isTransparent, displayMode, largeChartUrl, ...props }) => {
+    const s = settings({ symbol, width, height, colorTheme, isTransparent, displayMode, largeChartUrl });
+    const src = EMBED + encodeURIComponent(locale) + '#' + encodeURIComponent(JSON.stringify(s));
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('financials'), "data-symbol": s.symbol, "data-display-mode": s.displayMode, 
+        // 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: `${s.symbol} financials`, loading: "lazy", scrolling: "no", allowFullScreen: true, style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+exports.Financials = Financials;

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

@@ -0,0 +1,36 @@
+/**
+ * Financials — a TradingView financial-statements widget for one symbol, in a
+ * gui frame.
+ *
+ * The statements, ratios and estimates are TradingView's, drawn inside
+ * TradingView's own document, so the widget is an `<iframe>` and nothing here
+ * draws a row of it. What this owns is the frame around it and the settings it
+ * opens with — symbol, display mode, theme — written into the iframe's address
+ * the way TradingView's own embed script writes them:
+ * `/embed-widget/financials/?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 widget 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 new `symbol` would change the URL and leave the old
+ * widget on screen.
+ */
+import { type YStackProps } from '@hanzo/gui';
+export type FinancialsDisplayMode = 'adaptive' | 'regular' | 'compact';
+export type FinancialsTheme = 'light' | 'dark';
+export interface FinancialsProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
+    /** The symbol to report on, exchange-qualified. */
+    symbol?: string;
+    width?: string | number;
+    height?: string | number;
+    locale?: string;
+    /** The widget's own palette; independent of the surrounding gui theme. */
+    colorTheme?: FinancialsTheme;
+    isTransparent?: boolean;
+    displayMode?: FinancialsDisplayMode;
+    largeChartUrl?: string;
+}
+declare const Financials: ({ symbol, width, height, locale, colorTheme, isTransparent, displayMode, largeChartUrl, ...props }: FinancialsProps) => import("react").JSX.Element;
+export { Financials };
+//# sourceMappingURL=financials.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"financials.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/financials.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAG5D,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAA;AAEtE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAA;AAE9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtF,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAuBD,QAAA,MAAM,UAAU,uGAUb,eAAe,gCA8BjB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/backends/gui/financials.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Financials — a TradingView financial-statements widget for one symbol, in a
+ * gui frame.
+ *
+ * The statements, ratios and estimates are TradingView's, drawn inside
+ * TradingView's own document, so the widget is an `<iframe>` and nothing here
+ * draws a row of it. What this owns is the frame around it and the settings it
+ * opens with — symbol, display mode, theme — written into the iframe's address
+ * the way TradingView's own embed script writes them:
+ * `/embed-widget/financials/?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 widget 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 new `symbol` would change the URL and leave the old
+ * widget on screen.
+ */
+import { YStack, isWeb } from '@hanzo/gui';
+import { slot } from './slot.js';
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/financials/?locale=';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ symbol = 'NASDAQ:AAPL', width = '100%', height = 800, colorTheme = 'dark', isTransparent = false, displayMode = 'adaptive', largeChartUrl = '', }) => ({
+    symbol,
+    width,
+    height,
+    colorTheme,
+    isTransparent,
+    displayMode,
+    largeChartUrl,
+});
+const Financials = ({ symbol, width, height, locale = 'en', colorTheme, isTransparent, displayMode, largeChartUrl, ...props }) => {
+    const s = settings({ symbol, width, height, colorTheme, isTransparent, displayMode, largeChartUrl });
+    const src = EMBED + encodeURIComponent(locale) + '#' + encodeURIComponent(JSON.stringify(s));
+    return (_jsx(YStack, { ...slot('financials'), "data-symbol": s.symbol, "data-display-mode": s.displayMode, 
+        // 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: `${s.symbol} financials`, loading: "lazy", scrolling: "no", allowFullScreen: true, style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+export { Financials };
+//# sourceMappingURL=financials.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"financials.js","sourceRoot":"","sources":["../../../src/backends/gui/financials.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAoB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAmB7B,MAAM,KAAK,GAAG,qEAAqE,CAAA;AAEnF,8EAA8E;AAC9E,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,aAAa,EACtB,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,GAAG,EACZ,UAAU,GAAG,MAAM,EACnB,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,UAAU,EACxB,aAAa,GAAG,EAAE,GACF,EAAE,EAAE,CAAC,CAAC;IACtB,MAAM;IACN,KAAK;IACL,MAAM;IACN,UAAU;IACV,aAAa;IACb,WAAW;IACX,aAAa;CACd,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,IAAI,EACb,UAAU,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC,CAAA;IACpG,MAAM,GAAG,GAAG,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5F,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,YAAY,CAAC,iBACT,CAAC,CAAC,MAAM,uBACF,CAAC,CAAC,WAAW;QAChC,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,CAAC,CAAC,MAAM,aAAa,EAC/B,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,IAAI,EACd,eAAe,QACf,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,IANhE,GAAG,CAOR,CACH,GACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/backends/gui/forex-market.cjs

@@ -0,0 +1,21 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForexMarket = ForexMarket;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ForexMarket — the forex-flavored opening of the TradingView market-overview
+ * table that `./crypto-market` already renders.
+ *
+ * `market-overview.tsx`, `crypto-market.tsx`, `forex-market.tsx` and
+ * `stock-market.tsx` are four doc pages for ONE upstream widget, told apart
+ * only by which tab it opens on — crypto, forex, indices. Duplicating the
+ * iframe address, the preset table and the settings object under a second
+ * name would give the table two places to drift out of sync with itself, so
+ * this file holds none of that: it is `MarketOverview` with its `tabs` default
+ * turned from `['crypto']` to `['forex']`, nothing else.
+ */
+const crypto_market_1 = require("./crypto-market.cjs");
+function ForexMarket({ tabs = ['forex'], ...props }) {
+    return (0, jsx_runtime_1.jsx)(crypto_market_1.MarketOverview, { tabs: tabs, ...props });
+}

package/dist/backends/gui/forex-market.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ForexMarket — the forex-flavored opening of the TradingView market-overview
+ * table that `./crypto-market` already renders.
+ *
+ * `market-overview.tsx`, `crypto-market.tsx`, `forex-market.tsx` and
+ * `stock-market.tsx` are four doc pages for ONE upstream widget, told apart
+ * only by which tab it opens on — crypto, forex, indices. Duplicating the
+ * iframe address, the preset table and the settings object under a second
+ * name would give the table two places to drift out of sync with itself, so
+ * this file holds none of that: it is `MarketOverview` with its `tabs` default
+ * turned from `['crypto']` to `['forex']`, nothing else.
+ */
+import { type MarketOverviewProps } from './crypto-market.js';
+export type { MarketOverviewPreset as ForexMarketPreset, MarketOverviewSymbol as ForexMarketSymbol, MarketOverviewTab as ForexMarketTab, MarketOverviewTheme as ForexMarketTheme, } from './crypto-market.js';
+export type ForexMarketProps = MarketOverviewProps;
+export declare function ForexMarket({ tabs, ...props }: ForexMarketProps): import("react").JSX.Element;
+//# sourceMappingURL=forex-market.d.ts.map

package/dist/backends/gui/forex-market.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forex-market.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/forex-market.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1E,YAAY,EACV,oBAAoB,IAAI,iBAAiB,EACzC,oBAAoB,IAAI,iBAAiB,EACzC,iBAAiB,IAAI,cAAc,EACnC,mBAAmB,IAAI,gBAAgB,GACxC,MAAM,iBAAiB,CAAA;AAExB,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,CAAA;AAElD,wBAAgB,WAAW,CAAC,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAE3E"}

package/dist/backends/gui/forex-market.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ForexMarket — the forex-flavored opening of the TradingView market-overview
+ * table that `./crypto-market` already renders.
+ *
+ * `market-overview.tsx`, `crypto-market.tsx`, `forex-market.tsx` and
+ * `stock-market.tsx` are four doc pages for ONE upstream widget, told apart
+ * only by which tab it opens on — crypto, forex, indices. Duplicating the
+ * iframe address, the preset table and the settings object under a second
+ * name would give the table two places to drift out of sync with itself, so
+ * this file holds none of that: it is `MarketOverview` with its `tabs` default
+ * turned from `['crypto']` to `['forex']`, nothing else.
+ */
+import { MarketOverview } from './crypto-market.js';
+export function ForexMarket({ tabs = ['forex'], ...props }) {
+    return _jsx(MarketOverview, { tabs: tabs, ...props });
+}
+//# sourceMappingURL=forex-market.js.map

package/dist/backends/gui/forex-market.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forex-market.js","sourceRoot":"","sources":["../../../src/backends/gui/forex-market.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,cAAc,EAA4B,MAAM,iBAAiB,CAAA;AAW1E,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,EAAoB;IAC1E,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAAA;AAClD,CAAC"}

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

@@ -0,0 +1,57 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForexScreener = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ForexScreener — a TradingView currency-pair screener table, 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 and preset screen it opens on, 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.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+/** `forex` is the one short name; every other market is its own screener_type. */
+const screenerType = (market) => market === 'forex' ? 'forex_mkt' : market;
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/screener/?locale=';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ market = 'forex', defaultColumn = 'overview', defaultScreen = 'general', showToolbar = true, colorTheme = 'dark', isTransparent = false, locale = 'en', width = '100%', height = 550, }) => ({
+    defaultColumn,
+    defaultScreen,
+    screener_type: screenerType(market),
+    showToolbar,
+    colorTheme,
+    isTransparent,
+    locale,
+    width,
+    height,
+});
+const ForexScreener = ({ market, defaultColumn, defaultScreen, showToolbar, colorTheme, isTransparent, locale, width, height, ...props }) => {
+    const s = settings({
+        market,
+        defaultColumn,
+        defaultScreen,
+        showToolbar,
+        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)('forex-screener'), "data-market": market ?? 'forex', "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 ?? 'forex'} screener`, loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+exports.ForexScreener = ForexScreener;

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

@@ -0,0 +1,45 @@
+/**
+ * ForexScreener — a TradingView currency-pair screener table, 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 and preset screen it opens on, 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.
+ */
+import { type YStackProps } from '@hanzo/gui';
+/**
+ * The market the table screens — TradingView's own `screener_type` values
+ * (`america`, `india`, `crypto_mkt`, `bond_mkt`, …), plus `forex` as the
+ * short name for `forex_mkt` this component defaults to.
+ */
+export type ForexScreenerMarket = 'forex' | (string & {});
+export type ForexScreenerColumn = 'overview' | 'performance' | 'oscillators' | 'moving_averages';
+export type ForexScreenerScreen = 'general' | 'top_gainers' | 'top_losers' | 'most_volatile' | (string & {});
+export type ForexScreenerTheme = 'light' | 'dark';
+export interface ForexScreenerProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
+    /** Which market the table screens. */
+    market?: ForexScreenerMarket;
+    /** Which column set the table opens on. */
+    defaultColumn?: ForexScreenerColumn;
+    /** Which preset screen the table opens filtered to. */
+    defaultScreen?: ForexScreenerScreen;
+    /** Whether the toolbar (screen picker, column picker) is shown. */
+    showToolbar?: boolean;
+    /** The table's own palette; independent of the surrounding gui theme. */
+    colorTheme?: ForexScreenerTheme;
+    isTransparent?: boolean;
+    locale?: string;
+    width?: string | number;
+    height?: string | number;
+}
+declare const ForexScreener: ({ market, defaultColumn, defaultScreen, showToolbar, colorTheme, isTransparent, locale, width, height, ...props }: ForexScreenerProps) => import("react").JSX.Element;
+export { ForexScreener };
+//# sourceMappingURL=forex-screener.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"forex-screener.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/forex-screener.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAG5D;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEzD,MAAM,MAAM,mBAAmB,GAC3B,UAAU,GACV,aAAa,GACb,aAAa,GACb,iBAAiB,CAAA;AAErB,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,aAAa,GACb,YAAY,GACZ,eAAe,GACf,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEjB,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAA;AAMjD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzF,sCAAsC;IACtC,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,uDAAuD;IACvD,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yEAAyE;IACzE,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,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;AA2BD,QAAA,MAAM,aAAa,sHAWhB,kBAAkB,gCAuCpB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ForexScreener — a TradingView currency-pair screener table, 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 and preset screen it opens on, 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.
+ */
+import { YStack, isWeb } from '@hanzo/gui';
+import { slot } from './slot.js';
+/** `forex` is the one short name; every other market is its own screener_type. */
+const screenerType = (market) => market === 'forex' ? 'forex_mkt' : market;
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/screener/?locale=';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ market = 'forex', defaultColumn = 'overview', defaultScreen = 'general', showToolbar = true, colorTheme = 'dark', isTransparent = false, locale = 'en', width = '100%', height = 550, }) => ({
+    defaultColumn,
+    defaultScreen,
+    screener_type: screenerType(market),
+    showToolbar,
+    colorTheme,
+    isTransparent,
+    locale,
+    width,
+    height,
+});
+const ForexScreener = ({ market, defaultColumn, defaultScreen, showToolbar, colorTheme, isTransparent, locale, width, height, ...props }) => {
+    const s = settings({
+        market,
+        defaultColumn,
+        defaultScreen,
+        showToolbar,
+        colorTheme,
+        isTransparent,
+        locale,
+        width,
+        height,
+    });
+    const src = `${EMBED}${s.locale}#${encodeURIComponent(JSON.stringify(s))}`;
+    return (_jsx(YStack, { ...slot('forex-screener'), "data-market": market ?? 'forex', "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 ?? 'forex'} screener`, loading: "lazy", scrolling: "no", style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+export { ForexScreener };
+//# sourceMappingURL=forex-screener.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"forex-screener.js","sourceRoot":"","sources":["../../../src/backends/gui/forex-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;AAwB7B,kFAAkF;AAClF,MAAM,YAAY,GAAG,CAAC,MAA2B,EAAE,EAAE,CACnD,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AAmB3C,MAAM,KAAK,GAAG,mEAAmE,CAAA;AAEjF,8EAA8E;AAC9E,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,OAAO,EAChB,aAAa,GAAG,UAAU,EAC1B,aAAa,GAAG,SAAS,EACzB,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,MAAM,EACnB,aAAa,GAAG,KAAK,EACrB,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,GAAG,GACO,EAAE,EAAE,CAAC,CAAC;IACzB,aAAa;IACb,aAAa;IACb,aAAa,EAAE,YAAY,CAAC,MAAM,CAAC;IACnC,WAAW;IACX,UAAU;IACV,aAAa;IACb,MAAM;IACN,KAAK;IACL,MAAM;CACP,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,aAAa,EACb,MAAM,EACN,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,QAAQ,CAAC;QACjB,MAAM;QACN,aAAa;QACb,aAAa;QACb,WAAW;QACX,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,gBAAgB,CAAC,iBACb,MAAM,IAAI,OAAO,sBACZ,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,OAAO,WAAW,EACtC,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,aAAa,EAAE,CAAA"}

package/dist/backends/gui/gantt.cjs

@@ -0,0 +1,48 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gantt = Gantt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Gantt — a task list with a per-row progress track and a start/end date.
+ *
+ * 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.
+ */
+const gui_1 = require("@hanzo/gui");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const TRACK_HEIGHT = 32;
+const GanttFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Gantt',
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$6',
+    p: '$6',
+});
+const RowFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'GanttRow', gap: '$2' });
+const TrackFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'GanttTrack',
+    height: TRACK_HEIGHT,
+    rounded: '$3',
+    bg: '$edge',
+    overflow: 'hidden',
+});
+const BarFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'GanttBar',
+    height: '100%',
+    rounded: '$3',
+    bg: '$accentBackground',
+});
+function Gantt({ tasks = [], ...props }) {
+    return ((0, jsx_runtime_1.jsx)(GanttFrame, { ...(0, slot_1.slot)('gantt'), ...props, children: tasks.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('gantt-empty'), items: "center", justify: "center", p: "$8", children: (0, ink_1.ink)('No tasks available. Add tasks to display Gantt chart.', gui_1.SizableText, {
+                size: '$2',
+                color: '$quiet',
+            }) })) : ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$4", children: tasks.map((task) => {
+                const progress = Math.min(100, Math.max(0, task.progress ?? 0));
+                return ((0, jsx_runtime_1.jsxs)(RowFrame, { ...(0, slot_1.slot)('gantt-task'), "data-progress": progress, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "center", children: [(0, ink_1.ink)(task.name, gui_1.SizableText, { size: '$3', fontWeight: '600' }), (0, ink_1.ink)(`${progress}%`, gui_1.SizableText, { size: '$3', color: '$quiet' })] }), (0, jsx_runtime_1.jsx)(TrackFrame, { ...(0, slot_1.slot)('gantt-track'), children: (0, jsx_runtime_1.jsx)(BarFrame, { ...(0, slot_1.slot)('gantt-bar'), width: `${progress}%` }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", children: [(0, ink_1.ink)(task.start.toLocaleDateString(), gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(task.end.toLocaleDateString(), gui_1.SizableText, { size: '$1', color: '$quiet' })] })] }, task.id));
+            }) })) }));
+}

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

@@ -0,0 +1,18 @@
+export interface GanttTask {
+    id: string;
+    name: string;
+    start: Date;
+    end: Date;
+    /** 0–100. Defaults to 0. */
+    progress?: number;
+}
+declare const GanttFrame: 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;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type GanttProps = Omit<import('react').ComponentProps<typeof GanttFrame>, 'children'> & {
+    tasks?: GanttTask[];
+};
+export declare function Gantt({ tasks, ...props }: GanttProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=gantt.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gantt.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/gantt.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;IACT,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,UAAU;;;8CAOd,CAAA;AAmBF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,OAAO,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7F,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;CACpB,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,KAAU,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAkCzD"}

package/dist/backends/gui/gantt.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Gantt — a task list with a per-row progress track and a start/end date.
+ *
+ * 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 TRACK_HEIGHT = 32;
+const GanttFrame = styled(YStack, {
+    name: 'Gantt',
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$6',
+    p: '$6',
+});
+const RowFrame = styled(YStack, { name: 'GanttRow', gap: '$2' });
+const TrackFrame = styled(YStack, {
+    name: 'GanttTrack',
+    height: TRACK_HEIGHT,
+    rounded: '$3',
+    bg: '$edge',
+    overflow: 'hidden',
+});
+const BarFrame = styled(YStack, {
+    name: 'GanttBar',
+    height: '100%',
+    rounded: '$3',
+    bg: '$accentBackground',
+});
+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',
+            }) })) : (_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));
+            }) })) }));
+}
+//# sourceMappingURL=gantt.js.map