@hanzo/ui 8.27.10 → 8.27.11

package/dist/backends/gui/pill.cjs

@@ -0,0 +1,82 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pillVariants = void 0;
+exports.Pill = Pill;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Pill — a small rounded label for a status, a tag or a filter, with an
+ * optional remove control. `variant`, `onRemove`, `pillVariants`, and the
+ * `data-slot`/`data-variant` markers, rendering through @hanzo/gui so the
+ * same component runs on web, native and Tauri.
+ *
+ * Surface and label are two styled parts sharing one `variant` through a
+ * styled context, the same split Badge uses — the frame owns background and
+ * text color, the label owns type. The remove control reuses this backend's
+ * own Button (ghost, icon-sized, shrunk to fit the pill) rather than a raw
+ * element, so it already carries the real `<button type="button">` host and
+ * the 44px touch floor.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const sx_1 = require("../../sx.cjs");
+const button_1 = require("./button.cjs");
+const ink_1 = require("./ink.cjs");
+const gesture_1 = require("./gesture.cjs");
+const slot_1 = require("./slot.cjs");
+/** A pill is a 28px capsule; the slop makes its remove control meet the 44px floor. */
+const MIN_TOUCH = 44;
+const HEIGHT = 28;
+const REMOVE = 16;
+const PillContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({ variant: 'default' });
+const PillFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Pill',
+    context: PillContext,
+    display: 'inline-flex',
+    self: 'flex-start',
+    items: 'center',
+    justify: 'center',
+    shrink: 0,
+    gap: '$1.5',
+    minH: HEIGHT,
+    px: '$3',
+    py: '$1',
+    rounded: 999,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    overflow: 'hidden',
+    variants: {
+        variant: {
+            default: { bg: '$accentBackground' },
+            secondary: { bg: '$edge' },
+            outline: { bg: '$background', borderColor: '$borderColor' },
+            success: { bg: '$green4' },
+            warning: { bg: '$yellow4' },
+            error: { bg: '$red4' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const PillText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'PillText',
+    context: PillContext,
+    size: '$2',
+    fontWeight: '500',
+    variants: {
+        variant: {
+            default: { color: '$accentColor' },
+            secondary: { color: '$ink' },
+            outline: { color: '$ink' },
+            success: { color: '$green11' },
+            warning: { color: '$yellow11' },
+            error: { color: '$red11' },
+        },
+    },
+});
+/** A pill's classes, for hosts that hook it from CSS. Styling lives in the tokens. */
+const pillVariants = ({ variant } = {}) => `pill pill-${variant ?? 'default'}`;
+exports.pillVariants = pillVariants;
+function Pill({ className, variant = 'default', onRemove, children, ...props }) {
+    const resolved = variant ?? 'default';
+    return ((0, jsx_runtime_1.jsxs)(PillFrame, { ...(0, slot_1.slot)('pill'), "data-variant": resolved, variant: resolved, ...(0, sx_1.sx)([(0, exports.pillVariants)({ variant: resolved }), className].filter(Boolean).join(' ')), ...props, children: [(0, ink_1.ink)(children, PillText), onRemove ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('pill-remove'), variant: "ghost", size: "icon", minH: REMOVE, minW: REMOVE, rounded: 999, ...(0, gesture_1.touch)(REMOVE, MIN_TOUCH), "aria-label": "Remove", onPress: onRemove, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }) })) : null] }));
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type PillVariant = 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'error';
+/** A pill's classes, for hosts that hook it from CSS. Styling lives in the tokens. */
+export declare const pillVariants: ({ variant }?: {
+    variant?: PillVariant | null;
+}) => string;
+export type PillProps = React.ComponentProps<'span'> & {
+    variant?: PillVariant | null;
+    onRemove?: () => void;
+};
+export declare function Pill({ className, variant, onRemove, children, ...props }: PillProps): React.JSX.Element;
+//# sourceMappingURL=pill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/pill.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AA0D/F,sFAAsF;AACtF,eAAO,MAAM,YAAY,iBAAiB;IAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,WACrC,CAAA;AAErC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IACrD,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBA4B/F"}

package/dist/backends/gui/pill.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pill — a small rounded label for a status, a tag or a filter, with an
+ * optional remove control. `variant`, `onRemove`, `pillVariants`, and the
+ * `data-slot`/`data-variant` markers, rendering through @hanzo/gui so the
+ * same component runs on web, native and Tauri.
+ *
+ * Surface and label are two styled parts sharing one `variant` through a
+ * styled context, the same split Badge uses — the frame owns background and
+ * text color, the label owns type. The remove control reuses this backend's
+ * own Button (ghost, icon-sized, shrunk to fit the pill) rather than a raw
+ * element, so it already carries the real `<button type="button">` host and
+ * the 44px touch floor.
+ */
+import { SizableText, XStack, createStyledContext, styled } from '@hanzo/gui';
+import { X } from '@hanzogui/lucide-icons-2';
+import { sx } from '../../sx.js';
+import { Button } from './button.js';
+import { ink } from './ink.js';
+import { touch } from './gesture.js';
+import { slot } from './slot.js';
+/** A pill is a 28px capsule; the slop makes its remove control meet the 44px floor. */
+const MIN_TOUCH = 44;
+const HEIGHT = 28;
+const REMOVE = 16;
+const PillContext = /* @__PURE__ */ createStyledContext({ variant: 'default' });
+const PillFrame = styled(XStack, {
+    name: 'Pill',
+    context: PillContext,
+    display: 'inline-flex',
+    self: 'flex-start',
+    items: 'center',
+    justify: 'center',
+    shrink: 0,
+    gap: '$1.5',
+    minH: HEIGHT,
+    px: '$3',
+    py: '$1',
+    rounded: 999,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    overflow: 'hidden',
+    variants: {
+        variant: {
+            default: { bg: '$accentBackground' },
+            secondary: { bg: '$edge' },
+            outline: { bg: '$background', borderColor: '$borderColor' },
+            success: { bg: '$green4' },
+            warning: { bg: '$yellow4' },
+            error: { bg: '$red4' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const PillText = styled(SizableText, {
+    name: 'PillText',
+    context: PillContext,
+    size: '$2',
+    fontWeight: '500',
+    variants: {
+        variant: {
+            default: { color: '$accentColor' },
+            secondary: { color: '$ink' },
+            outline: { color: '$ink' },
+            success: { color: '$green11' },
+            warning: { color: '$yellow11' },
+            error: { color: '$red11' },
+        },
+    },
+});
+/** A pill's classes, for hosts that hook it from CSS. Styling lives in the tokens. */
+export const pillVariants = ({ variant } = {}) => `pill pill-${variant ?? 'default'}`;
+export function Pill({ className, variant = 'default', onRemove, children, ...props }) {
+    const resolved = variant ?? 'default';
+    return (_jsxs(PillFrame, { ...slot('pill'), "data-variant": resolved, variant: resolved, ...sx([pillVariants({ variant: resolved }), className].filter(Boolean).join(' ')), ...props, children: [ink(children, PillText), onRemove ? (_jsx(Button, { ...slot('pill-remove'), variant: "ghost", size: "icon", minH: REMOVE, minW: REMOVE, rounded: 999, ...touch(REMOVE, MIN_TOUCH), "aria-label": "Remove", onPress: onRemove, children: _jsx(X, { size: 12 }) })) : null] }));
+}
+//# sourceMappingURL=pill.js.map

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

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

package/dist/backends/gui/pin-list.cjs

@@ -0,0 +1,82 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinList = PinList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * PinList — a list of rows a viewer can pin to the top: a favourites list, a
+ * recent-files rail, a set of saved queries. Pinning is order, not deletion —
+ * a pinned row moves to its own group above the rest and an unpinned one keeps
+ * its original position among its peers.
+ *
+ * Controlled the same shape as `ToggleGroup`: `value`/`defaultValue` is the set
+ * of pinned ids, `onValueChange` fires the next set, and `useControllableState`
+ * is the one place that reconciles "does the caller drive this" so an
+ * uncontrolled `PinList` and a controlled one share every other line.
+ *
+ * `max` caps how many rows may be pinned at once — reaching it disables the pin
+ * toggle on every UNPINNED row while leaving every PINNED row free to unpin,
+ * because the cap is on how many are held, never on which one a viewer chooses
+ * to release.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const gesture_1 = require("./gesture.cjs");
+const ICON = 14;
+const BUTTON = 28;
+const RowFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'PinListRow',
+    items: 'center',
+    gap: '$3',
+    px: '$3',
+    py: '$2.5',
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    hoverStyle: { bg: '$hover' },
+    variants: {
+        pinned: {
+            true: { bg: '$edge' },
+            false: {},
+        },
+    },
+    defaultVariants: { pinned: false },
+});
+const PinButton = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'PinListPin',
+    items: 'center',
+    justify: 'center',
+    width: BUTTON,
+    height: BUTTON,
+    rounded: '$2',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$background' },
+});
+/** A list of rows a viewer can pin to the top. */
+function PinList({ items, value, defaultValue, onValueChange, pinnedFirst = true, max, ...props }) {
+    const [pinned, setPinned] = (0, gui_1.useControllableState)({
+        prop: value,
+        defaultProp: defaultValue ?? [],
+        onChange: onValueChange,
+    });
+    const current = pinned ?? [];
+    const atMax = max != null && current.length >= max;
+    const toggle = (id) => {
+        const next = current.includes(id)
+            ? current.filter((existing) => existing !== id)
+            : [...current, id];
+        setPinned(next);
+    };
+    const ordered = pinnedFirst
+        ? [...items.filter((item) => current.includes(item.id)), ...items.filter((item) => !current.includes(item.id))]
+        : items;
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('pin-list'), gap: "$1", render: "ul", ...props, children: ordered.map((item) => {
+            const isPinned = current.includes(item.id);
+            const pinDisabled = Boolean(item.disabled) || (!isPinned && atMax);
+            return ((0, jsx_runtime_1.jsxs)(RowFrame, { ...(0, slot_1.slot)('pin-list-row'), "data-pinned": isPinned, pinned: isPinned, render: "li", children: [item.icon, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, gap: "$0.5", children: [(0, ink_1.ink)(item.label, gui_1.SizableText, { fontSize: '$3', fontWeight: '500', color: '$color' }), item.description
+                                ? (0, ink_1.ink)(item.description, gui_1.SizableText, { fontSize: '$2', color: '$quiet' })
+                                : null] }), (0, jsx_runtime_1.jsx)(PinButton, { ...(0, slot_1.slot)('pin-list-toggle'), ...(0, slot_1.tip)(isPinned ? `Unpin ${item.label}` : `Pin ${item.label}`), ...(0, gesture_1.touch)(BUTTON, 44), render: "button", ...{ type: 'button', disabled: pinDisabled }, "aria-pressed": isPinned, "aria-label": isPinned ? `Unpin ${item.label}` : `Pin ${item.label}`, opacity: pinDisabled ? 0.4 : 1, cursor: pinDisabled ? 'not-allowed' : 'pointer', onClick: () => !pinDisabled && toggle(item.id), children: isPinned ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pin, { size: ICON, fill: "currentColor" }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.PinOff, { size: ICON }) })] }, item.id));
+        }) }));
+}

package/dist/backends/gui/pin-list.d.ts

@@ -0,0 +1,42 @@
+/**
+ * PinList — a list of rows a viewer can pin to the top: a favourites list, a
+ * recent-files rail, a set of saved queries. Pinning is order, not deletion —
+ * a pinned row moves to its own group above the rest and an unpinned one keeps
+ * its original position among its peers.
+ *
+ * Controlled the same shape as `ToggleGroup`: `value`/`defaultValue` is the set
+ * of pinned ids, `onValueChange` fires the next set, and `useControllableState`
+ * is the one place that reconciles "does the caller drive this" so an
+ * uncontrolled `PinList` and a controlled one share every other line.
+ *
+ * `max` caps how many rows may be pinned at once — reaching it disables the pin
+ * toggle on every UNPINNED row while leaving every PINNED row free to unpin,
+ * because the cap is on how many are held, never on which one a viewer chooses
+ * to release.
+ */
+import { YStack } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+export interface PinListItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export type PinListProps = Omit<ComponentProps<typeof YStack>, 'children' | 'onChange' | 'items'> & {
+    /** Rows to list, in their unpinned (base) order. */
+    items: PinListItem[];
+    /** The pinned ids — controlled. */
+    value?: string[];
+    /** The pinned ids — uncontrolled initial state. */
+    defaultValue?: string[];
+    /** Fires with the next set of pinned ids whenever a row is pinned or unpinned. */
+    onValueChange?: (value: string[]) => void;
+    /** Group pinned rows above the rest. Defaults to `true`; `false` pins in place. */
+    pinnedFirst?: boolean;
+    /** How many rows may be pinned at once. Unset means no limit. */
+    max?: number;
+};
+/** A list of rows a viewer can pin to the top. */
+export declare function PinList({ items, value, defaultValue, onValueChange, pinnedFirst, max, ...props }: PinListProps): import("react").JSX.Element;
+//# sourceMappingURL=pin-list.d.ts.map

package/dist/backends/gui/pin-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-list.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/pin-list.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAuB,MAAM,EAAgC,MAAM,YAAY,CAAA;AAEtF,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAkCD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAClG,oDAAoD;IACpD,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,kDAAkD;AAClD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAkB,EAClB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAsDd"}

package/dist/backends/gui/pin-list.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PinList — a list of rows a viewer can pin to the top: a favourites list, a
+ * recent-files rail, a set of saved queries. Pinning is order, not deletion —
+ * a pinned row moves to its own group above the rest and an unpinned one keeps
+ * its original position among its peers.
+ *
+ * Controlled the same shape as `ToggleGroup`: `value`/`defaultValue` is the set
+ * of pinned ids, `onValueChange` fires the next set, and `useControllableState`
+ * is the one place that reconciles "does the caller drive this" so an
+ * uncontrolled `PinList` and a controlled one share every other line.
+ *
+ * `max` caps how many rows may be pinned at once — reaching it disables the pin
+ * toggle on every UNPINNED row while leaving every PINNED row free to unpin,
+ * because the cap is on how many are held, never on which one a viewer chooses
+ * to release.
+ */
+import { SizableText, XStack, YStack, styled, useControllableState } from '@hanzo/gui';
+import { Pin, PinOff } from '@hanzogui/lucide-icons-2';
+import { ink } from './ink.js';
+import { slot, tip } from './slot.js';
+import { touch } from './gesture.js';
+const ICON = 14;
+const BUTTON = 28;
+const RowFrame = styled(XStack, {
+    name: 'PinListRow',
+    items: 'center',
+    gap: '$3',
+    px: '$3',
+    py: '$2.5',
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    hoverStyle: { bg: '$hover' },
+    variants: {
+        pinned: {
+            true: { bg: '$edge' },
+            false: {},
+        },
+    },
+    defaultVariants: { pinned: false },
+});
+const PinButton = styled(XStack, {
+    name: 'PinListPin',
+    items: 'center',
+    justify: 'center',
+    width: BUTTON,
+    height: BUTTON,
+    rounded: '$2',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$background' },
+});
+/** A list of rows a viewer can pin to the top. */
+export function PinList({ items, value, defaultValue, onValueChange, pinnedFirst = true, max, ...props }) {
+    const [pinned, setPinned] = useControllableState({
+        prop: value,
+        defaultProp: defaultValue ?? [],
+        onChange: onValueChange,
+    });
+    const current = pinned ?? [];
+    const atMax = max != null && current.length >= max;
+    const toggle = (id) => {
+        const next = current.includes(id)
+            ? current.filter((existing) => existing !== id)
+            : [...current, id];
+        setPinned(next);
+    };
+    const ordered = pinnedFirst
+        ? [...items.filter((item) => current.includes(item.id)), ...items.filter((item) => !current.includes(item.id))]
+        : items;
+    return (_jsx(YStack, { ...slot('pin-list'), gap: "$1", render: "ul", ...props, children: ordered.map((item) => {
+            const isPinned = current.includes(item.id);
+            const pinDisabled = Boolean(item.disabled) || (!isPinned && atMax);
+            return (_jsxs(RowFrame, { ...slot('pin-list-row'), "data-pinned": isPinned, pinned: isPinned, render: "li", children: [item.icon, _jsxs(YStack, { flex: 1, gap: "$0.5", children: [ink(item.label, SizableText, { fontSize: '$3', fontWeight: '500', color: '$color' }), item.description
+                                ? ink(item.description, SizableText, { fontSize: '$2', color: '$quiet' })
+                                : null] }), _jsx(PinButton, { ...slot('pin-list-toggle'), ...tip(isPinned ? `Unpin ${item.label}` : `Pin ${item.label}`), ...touch(BUTTON, 44), render: "button", ...{ type: 'button', disabled: pinDisabled }, "aria-pressed": isPinned, "aria-label": isPinned ? `Unpin ${item.label}` : `Pin ${item.label}`, opacity: pinDisabled ? 0.4 : 1, cursor: pinDisabled ? 'not-allowed' : 'pointer', onClick: () => !pinDisabled && toggle(item.id), children: isPinned ? _jsx(Pin, { size: ICON, fill: "currentColor" }) : _jsx(PinOff, { size: ICON }) })] }, item.id));
+        }) }));
+}
+//# sourceMappingURL=pin-list.js.map

package/dist/backends/gui/pin-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-list.js","sourceRoot":"","sources":["../../../src/backends/gui/pin-list.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AACtF,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,IAAI,GAAG,EAAE,CAAA;AACf,MAAM,MAAM,GAAG,EAAE,CAAA;AAUjB,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE;IAC9B,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,IAAI;IACT,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,MAAM;IACV,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,aAAa;IAC1B,UAAU,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE;IAE5B,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,IAAI,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE;YACrB,KAAK,EAAE,EAAE;SACV;KACO;IAEV,eAAe,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;CACnC,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC/B,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;CAClC,CAAC,CAAA;AAiBF,kDAAkD;AAClD,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,IAAI,EAClB,GAAG,EACH,GAAG,KAAK,EACK;IACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,oBAAoB,CAAW;QACzD,IAAI,EAAE,KAAK;QACX,WAAW,EAAE,YAAY,IAAI,EAAE;QAC/B,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAA;IACF,MAAM,OAAO,GAAG,MAAM,IAAI,EAAE,CAAA;IAC5B,MAAM,KAAK,GAAG,GAAG,IAAI,IAAI,IAAI,OAAO,CAAC,MAAM,IAAI,GAAG,CAAA;IAElD,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE;QAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC/B,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,EAAE,CAAC;YAC/C,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,CAAC,CAAA;QACpB,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,WAAW;QACzB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAC/G,CAAC,CAAC,KAAK,CAAA;IAET,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,KAAK,KAAK,YACzD,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAC1C,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAA;YAElE,OAAO,CACL,MAAC,QAAQ,OAAmB,IAAI,CAAC,cAAc,CAAC,iBAAe,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAC,IAAI,aACnG,IAAI,CAAC,IAAI,EACV,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,MAAM,aACxB,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EACpF,IAAI,CAAC,WAAW;gCACf,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;gCACzE,CAAC,CAAC,IAAI,IACD,EACT,KAAC,SAAS,OACJ,IAAI,CAAC,iBAAiB,CAAC,KACvB,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAC3D,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,EACrB,MAAM,EAAC,QAAQ,KACV,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAa,kBAC3C,QAAQ,gBACV,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,EAClE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC9B,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,YAE7C,QAAQ,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,GAClE,KArBC,IAAI,CAAC,EAAE,CAsBX,CACZ,CAAA;QACH,CAAC,CAAC,GACK,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/pixel-image.cjs

@@ -0,0 +1,63 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PixelImage = PixelImage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * PixelImage — a source image redrawn as flat pixelation blocks.
+ *
+ * Sampling one colour per block and filling that block flat is 2D Canvas work
+ * — draw the image once, read its pixels back, paint blocks over them — and no
+ * gui primitive performs it, so a raw `<canvas>` is mounted inside a gui frame
+ * (`YStack`) and everything around it (the frame, the slot marker, the layout
+ * props) is ordinary gui. Web-only: `isWeb` gates the canvas draw, and native
+ * or a server render gets the empty frame with nothing to choke on.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("./slot.cjs");
+function PixelImage({ src, pixelSize = 10, alt, ...props }) {
+    const canvasRef = (0, react_1.useRef)(null);
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!gui_1.isWeb)
+            return undefined;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return undefined;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return undefined;
+        let cancelled = false;
+        setLoaded(false);
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            if (cancelled)
+                return;
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(img, 0, 0);
+            const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let y = 0; y < canvas.height; y += pixelSize) {
+                for (let x = 0; x < canvas.width; x += pixelSize) {
+                    const i = (y * canvas.width + x) * 4;
+                    const r = data[i];
+                    const g = data[i + 1];
+                    const b = data[i + 2];
+                    const a = data[i + 3] / 255;
+                    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+                    ctx.fillRect(x, y, pixelSize, pixelSize);
+                }
+            }
+            setLoaded(true);
+        };
+        img.src = src;
+        return () => {
+            cancelled = true;
+        };
+    }, [src, pixelSize]);
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('pixel-image'), maxW: "100%", "data-loaded": loaded, ...props, children: gui_1.isWeb && ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, ...(0, slot_1.slot)('pixel-image-canvas'), "data-pixel-size": pixelSize, "aria-label": alt, role: alt ? 'img' : undefined, style: { display: 'block', maxWidth: '100%' } })) }));
+}

package/dist/backends/gui/pixel-image.d.ts

@@ -0,0 +1,21 @@
+/**
+ * PixelImage — a source image redrawn as flat pixelation blocks.
+ *
+ * Sampling one colour per block and filling that block flat is 2D Canvas work
+ * — draw the image once, read its pixels back, paint blocks over them — and no
+ * gui primitive performs it, so a raw `<canvas>` is mounted inside a gui frame
+ * (`YStack`) and everything around it (the frame, the slot marker, the layout
+ * props) is ordinary gui. Web-only: `isWeb` gates the canvas draw, and native
+ * or a server render gets the empty frame with nothing to choke on.
+ */
+import { type YStackProps } from '@hanzo/gui';
+export interface PixelImageProps extends Omit<YStackProps, 'children'> {
+    /** The image to pixelate. */
+    src: string;
+    /** Edge length, in source pixels, of one pixelation block. */
+    pixelSize?: number;
+    /** Accessible label for the pictured image. */
+    alt?: string;
+}
+export declare function PixelImage({ src, pixelSize, alt, ...props }: PixelImageProps): import("react").JSX.Element;
+//# sourceMappingURL=pixel-image.d.ts.map

package/dist/backends/gui/pixel-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-image.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/pixel-image.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAI5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACpE,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,SAAc,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BA6DjF"}

package/dist/backends/gui/pixel-image.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PixelImage — a source image redrawn as flat pixelation blocks.
+ *
+ * Sampling one colour per block and filling that block flat is 2D Canvas work
+ * — draw the image once, read its pixels back, paint blocks over them — and no
+ * gui primitive performs it, so a raw `<canvas>` is mounted inside a gui frame
+ * (`YStack`) and everything around it (the frame, the slot marker, the layout
+ * props) is ordinary gui. Web-only: `isWeb` gates the canvas draw, and native
+ * or a server render gets the empty frame with nothing to choke on.
+ */
+import { YStack, isWeb } from '@hanzo/gui';
+import { useEffect, useRef, useState } from 'react';
+import { slot } from './slot.js';
+export function PixelImage({ src, pixelSize = 10, alt, ...props }) {
+    const canvasRef = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        if (!isWeb)
+            return undefined;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return undefined;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return undefined;
+        let cancelled = false;
+        setLoaded(false);
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            if (cancelled)
+                return;
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(img, 0, 0);
+            const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let y = 0; y < canvas.height; y += pixelSize) {
+                for (let x = 0; x < canvas.width; x += pixelSize) {
+                    const i = (y * canvas.width + x) * 4;
+                    const r = data[i];
+                    const g = data[i + 1];
+                    const b = data[i + 2];
+                    const a = data[i + 3] / 255;
+                    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+                    ctx.fillRect(x, y, pixelSize, pixelSize);
+                }
+            }
+            setLoaded(true);
+        };
+        img.src = src;
+        return () => {
+            cancelled = true;
+        };
+    }, [src, pixelSize]);
+    return (_jsx(YStack, { ...slot('pixel-image'), maxW: "100%", "data-loaded": loaded, ...props, children: isWeb && (_jsx("canvas", { ref: canvasRef, ...slot('pixel-image-canvas'), "data-pixel-size": pixelSize, "aria-label": alt, role: alt ? 'img' : undefined, style: { display: 'block', maxWidth: '100%' } })) }));
+}
+//# sourceMappingURL=pixel-image.js.map

package/dist/backends/gui/pixel-image.js.map

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

package/dist/backends/gui/positions-list.cjs

@@ -0,0 +1,60 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PositionsList = PositionsList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * PositionsList — a list of open trading positions, each row showing its
+ * ticker, share count, average and current price, total value and P&L, with
+ * the P&L sign colouring the row's trend icon. Clicking a row is optional; it
+ * only becomes a button when `onPositionClick` is given.
+ *
+ * The two price stats and the two value stats sit in `@hanzo/ui`'s own `Grid`
+ * — a real CSS grid, so both pairs of columns stay even regardless of how wide
+ * any one value is.
+ */
+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");
+/** The ticker half of an exchange-qualified symbol, e.g. `NASDAQ:AAPL` -> `AAPL`. */
+const ticker = (symbol) => symbol.split(':')[1] || symbol;
+const RowFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'PositionsListRow',
+    bg: '$hover',
+    rounded: '$4',
+    p: '$3',
+    gap: '$2',
+    variants: {
+        clickable: { true: { cursor: 'pointer', hoverStyle: { bg: '$edge' } } },
+    },
+});
+function PositionRow({ position, onPositionClick, }) {
+    const pl = (position.currentPrice - position.avgPrice) * position.shares;
+    const plPercent = ((position.currentPrice - position.avgPrice) / position.avgPrice) * 100;
+    const totalValue = position.currentPrice * position.shares;
+    const gain = pl >= 0;
+    return ((0, jsx_runtime_1.jsxs)(RowFrame, { ...(0, slot_1.slot)('positions-list-row'), "data-trend": gain ? 'up' : 'down', clickable: !!onPositionClick, onPress: onPositionClick ? () => onPositionClick(position) : undefined, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "center", children: [(0, ink_1.ink)(ticker(position.symbol), gui_1.SizableText, { fontWeight: '600' }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", children: [gain ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.TrendingUp, { size: 14, color: "$green9" }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.TrendingDown, { size: 14, color: "$red9" }), (0, ink_1.ink)(`${gain ? '+' : ''}${plPercent.toFixed(2)}%`, gui_1.SizableText, {
+                                size: '$1',
+                                fontWeight: '600',
+                                color: gain ? '$green9' : '$red9',
+                            })] })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 2, gap: "$2", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, ink_1.ink)('Shares', gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(String(position.shares), gui_1.SizableText, { size: '$1', fontWeight: '500' })] }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, ink_1.ink)('Avg Price', gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(`$${position.avgPrice.toFixed(2)}`, gui_1.SizableText, {
+                                    size: '$1',
+                                    fontWeight: '500',
+                                })] }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 2, gap: "$2", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, ink_1.ink)('Current Price', gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(`$${position.currentPrice.toFixed(2)}`, gui_1.SizableText, {
+                                    size: '$1',
+                                    fontWeight: '500',
+                                })] }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, ink_1.ink)('Total Value', gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(`$${totalValue.toFixed(2)}`, gui_1.SizableText, { size: '$1', fontWeight: '500' })] }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('positions-list-pnl'), justify: "space-between", items: "center", children: [(0, ink_1.ink)('P&L', gui_1.SizableText, { size: '$1', color: '$quiet' }), (0, ink_1.ink)(`${gain ? '+' : ''}$${pl.toFixed(2)}`, gui_1.SizableText, {
+                        size: '$1',
+                        fontWeight: '600',
+                        color: gain ? '$green9' : '$red9',
+                    })] })] }));
+}
+function PositionsList({ positions = [], onPositionClick }) {
+    if (positions.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('positions-list-empty'), items: "center", py: "$8", children: (0, ink_1.ink)('No open positions', gui_1.SizableText, { size: '$2', color: '$quiet' }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('positions-list'), gap: "$2", p: "$4", children: positions.map((position) => ((0, jsx_runtime_1.jsx)(PositionRow, { position: position, onPositionClick: onPositionClick }, position.symbol))) }));
+}
+exports.default = PositionsList;

package/dist/backends/gui/positions-list.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface Position {
+    symbol: string;
+    shares: number;
+    avgPrice: number;
+    currentPrice: number;
+}
+export interface PositionsListProps {
+    positions: Position[];
+    onPositionClick?: (position: Position) => void;
+}
+export declare function PositionsList({ positions, onPositionClick }: Partial<PositionsListProps>): React.JSX.Element;
+export default PositionsList;
+//# sourceMappingURL=positions-list.d.ts.map