@hanzo/ui 8.27.91 → 8.28.0

package/NOTICE

@@ -23,3 +23,28 @@ The derived files are the builder workspace in pkg/ui/src/agents:
 Workspace, Choice, FileTree, FileTabs, PreviewFrame, Console, Suggestions,
 Attachments and Feedback (.tsx), and tree, log and bridge (.ts). The MIT
 permission notice that governs them is the one in LICENSE-MIT.
+
+This product includes software derived from Twenty's twenty-ui package
+(https://github.com/twentyhq/twenty, packages/twenty-ui, commit
+dd7099a02f83ddc021231b71d5344d3b83f4cf7d), licensed under MIT:
+
+    Copyright (c) 2023-present Twenty.com, PBC
+
+The derived parts are the record kit: every file under pkg/ui/src and
+pkg/data/src whose header names twenty-ui. Each re-expresses a twenty-ui
+component's props, states and measured values on @hanzo/gui; no twenty-ui
+source, stylesheet or asset is copied. "Twenty" and the Twenty logo are
+trademarks of Twenty.com, PBC and are not licensed; neither appears in this
+product.
+
+This product includes the colour scales of Radix Colors
+(https://github.com/radix-ui/colors), licensed under MIT:
+
+    Copyright (c) 2021 Radix
+
+They are the data palette in pkg/tokens/src/data.ts: twenty-four of its
+twenty-five pickable hues and all five tinted neutrals are Radix Colors 3.0.0
+scales (its `blue` is Radix indigo, its `teal` Radix teal), as twenty-ui ships
+them, converted from display-p3 to sRGB. Its `gray` is twenty-ui's own.
+
+The MIT permission notice that governs both is the one in LICENSE-MIT.

package/README.md

@@ -212,7 +212,7 @@ emit({ component: 'PlanCard', action: 'select', id: 'pro' })
 
 - **One home, no duplication** — components are extracted, never copied. The record layer's source of truth stays in `@hanzo/data`; `@hanzo/ui` composes it.
 - **Host-agnostic** — data + effects injected; zero coupling to any app.
-- **Clean-room** — original implementation, no GPL / Twenty code. Airtable/Twenty-*class* polish, our own code.
+- **Clean-room** — our own implementation on @hanzo/gui, no GPL code; parts that re-express MIT-licensed work are credited in NOTICE.
 - **Cross-platform** — web + native + desktop, because it's only `@hanzo/gui`.
 
 Hanzo AI, Inc — licensed [Apache-2.0](./LICENSE-APACHE) OR [MIT](./LICENSE-MIT), at your

package/dist/backends/gui/alert-dialog.cjs

@@ -11,6 +11,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * flattens its compound parts into the shadcn names and dresses them in the
  * Hanzo tokens, exactly as `dialog.tsx` does for the ordinary modal.
  *
+ * `size` gives it the record frame Dialog's `size` does (twenty-ui's
+ * AlertDialog, MIT, NOTICE): the same widths less `compact`, the same sections
+ * and scrim, from the one frame definition in dialog.tsx.
+ *
  * `AlertDialogContent` mounts its OWN portal + overlay (so callers never wrap
  * it) and re-applies the trigger's resolved theme inside the portal via
  * `PortalTheme` — gui portals re-root the subtree, so React theme context does
@@ -35,6 +39,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * button is `primary` and Cancel is `outline`.
  */
 const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const dialog_1 = require("./dialog.cjs");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 const button_1 = require("./button.cjs");
 const slot_1 = require("./slot.cjs");
@@ -48,18 +54,30 @@ const AlertDialogPortal = gui_1.AlertDialog.Portal;
 exports.AlertDialogPortal = AlertDialogPortal;
 const AlertDialogOverlay = (props) => ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Overlay, { ...(0, slot_1.slot)('alert-dialog-overlay'), bg: "rgba(0,0,0,0.5)", opacity: 0.5, ...props }));
 exports.AlertDialogOverlay = AlertDialogOverlay;
-const AlertDialogContent = ({ children, ...props }) => {
+const AlertDialogContent = ({ children, size, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
-    return ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Portal, { children: (0, jsx_runtime_1.jsxs)(portal_theme_1.PortalTheme, { name: themeName, children: [(0, jsx_runtime_1.jsx)(AlertDialogOverlay, {}), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Content, { ...(0, slot_1.slot)('alert-dialog-content'), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...props, children: children })] }) }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Portal, { children: (0, jsx_runtime_1.jsxs)(portal_theme_1.PortalTheme, { name: themeName, children: [(0, jsx_runtime_1.jsx)(AlertDialogOverlay, { ...(size ? dialog_1.scrim : null) }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Content, { ...(0, slot_1.slot)('alert-dialog-content'), ...(size ? { 'data-size': size } : null), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...(size ? (0, dialog_1.frame)(size) : null), ...props, children: (0, jsx_runtime_1.jsx)(dialog_1.Sized.Provider, { value: size ?? null, children: children }) })] }) }));
 };
 exports.AlertDialogContent = AlertDialogContent;
-const AlertDialogHeader = (props) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('alert-dialog-header'), gap: "$2", ...props }));
+const AlertDialogHeader = (props) => {
+    const sized = (0, react_1.useContext)(dialog_1.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('alert-dialog-header'), gap: "$2", ...(sized ? dialog_1.section.header : null), ...props });
+};
 exports.AlertDialogHeader = AlertDialogHeader;
-const AlertDialogFooter = (props) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('alert-dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...props }));
+const AlertDialogFooter = (props) => {
+    const sized = (0, react_1.useContext)(dialog_1.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('alert-dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...(sized ? dialog_1.section.footer : null), ...props });
+};
 exports.AlertDialogFooter = AlertDialogFooter;
-const AlertDialogTitle = (props) => ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Title, { ...(0, slot_1.slot)('alert-dialog-title'), size: "$5", fontWeight: "600", ...props }));
+const AlertDialogTitle = (props) => {
+    const sized = (0, react_1.useContext)(dialog_1.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Title, { ...(0, slot_1.slot)('alert-dialog-title'), size: "$5", fontWeight: "600", ...(sized ? dialog_1.section.title : null), ...props });
+};
 exports.AlertDialogTitle = AlertDialogTitle;
-const AlertDialogDescription = (props) => ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Description, { ...(0, slot_1.slot)('alert-dialog-description'), size: "$2", color: "$quiet", ...props }));
+const AlertDialogDescription = (props) => {
+    const sized = (0, react_1.useContext)(dialog_1.Sized);
+    return ((0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Description, { ...(0, slot_1.slot)('alert-dialog-description'), size: "$2", color: "$quiet", ...(sized ? dialog_1.section.description : null), ...props }));
+};
 exports.AlertDialogDescription = AlertDialogDescription;
 /**
  * Both buttons are the one `Button` with gui's close part as its HOST — the

package/dist/backends/gui/alert-dialog.d.ts

@@ -6,6 +6,10 @@
  * flattens its compound parts into the shadcn names and dresses them in the
  * Hanzo tokens, exactly as `dialog.tsx` does for the ordinary modal.
  *
+ * `size` gives it the record frame Dialog's `size` does (twenty-ui's
+ * AlertDialog, MIT, NOTICE): the same widths less `compact`, the same sections
+ * and scrim, from the one frame definition in dialog.tsx.
+ *
  * `AlertDialogContent` mounts its OWN portal + overlay (so callers never wrap
  * it) and re-applies the trigger's resolved theme inside the portal via
  * `PortalTheme` — gui portals re-root the subtree, so React theme context does
@@ -30,7 +34,8 @@
  * button is `primary` and Cancel is `outline`.
  */
 import { AlertDialog as GuiAlertDialog, XStack, YStack } from '@hanzo/gui';
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DialogSize } from './dialog.js';
 import { type ButtonProps } from './button.js';
 export type AlertDialogProps = ComponentProps<typeof GuiAlertDialog>;
 declare const AlertDialog: (p: AlertDialogProps) => import("react").JSX.Element;
@@ -38,8 +43,11 @@ declare const AlertDialogTrigger: typeof GuiAlertDialog.Trigger;
 declare const AlertDialogPortal: typeof GuiAlertDialog.Portal;
 export type AlertDialogOverlayProps = ComponentProps<typeof GuiAlertDialog.Overlay>;
 declare const AlertDialogOverlay: (props: AlertDialogOverlayProps) => import("react").JSX.Element;
-export type AlertDialogContentProps = ComponentProps<typeof GuiAlertDialog.Content>;
-declare const AlertDialogContent: ({ children, ...props }: AlertDialogContentProps) => import("react").JSX.Element;
+export type AlertDialogContentProps = ComponentProps<typeof GuiAlertDialog.Content> & {
+    /** The record dialog's sizes (Dialog's, less `compact`): the same frame, scrim and sections. */
+    size?: Exclude<DialogSize, 'compact'>;
+};
+declare const AlertDialogContent: ({ children, size, ...props }: AlertDialogContentProps) => import("react").JSX.Element;
 export type AlertDialogSectionProps = ComponentProps<typeof YStack> & {
     children?: ReactNode;
 };

package/dist/backends/gui/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/alert-dialog.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAMnD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAEpE,QAAA,MAAM,WAAW,MAAO,gBAAgB,gCAA8B,CAAA;AACtE,QAAA,MAAM,kBAAkB,EAAE,OAAO,cAAc,CAAC,OAAgC,CAAA;AAChF,QAAA,MAAM,iBAAiB,EAAE,OAAO,cAAc,CAAC,MAA8B,CAAA;AAE7E,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,kBAAkB,UAAW,uBAAuB,gCAOzD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,kBAAkB,2BAA4B,uBAAuB,gCAuB1E,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAE9F,QAAA,MAAM,iBAAiB,UAAW,uBAAuB,gCAExD,CAAA;AAED,QAAA,MAAM,iBAAiB,UAAW,cAAc,CAAC,OAAO,MAAM,CAAC,gCAE9D,CAAA;AAED,QAAA,MAAM,gBAAgB,UAAW,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,gCAE3E,CAAA;AAED,QAAA,MAAM,sBAAsB,UAAW,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,gCAOvF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,iBAAiB,2BAA4B,WAAW,gCAI7D,CAAA;AAED,QAAA,MAAM,iBAAiB,2BAA4B,WAAW,gCAI7D,CAAA;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/alert-dialog.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC1E,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAExE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAMnD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAEpE,QAAA,MAAM,WAAW,MAAO,gBAAgB,gCAA8B,CAAA;AACtE,QAAA,MAAM,kBAAkB,EAAE,OAAO,cAAc,CAAC,OAAgC,CAAA;AAChF,QAAA,MAAM,iBAAiB,EAAE,OAAO,cAAc,CAAC,MAA8B,CAAA;AAE7E,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,kBAAkB,UAAW,uBAAuB,gCAOzD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACpF,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;CACtC,CAAA;AAED,QAAA,MAAM,kBAAkB,iCAAkC,uBAAuB,gCAyBhF,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAE9F,QAAA,MAAM,iBAAiB,UAAW,uBAAuB,gCAGxD,CAAA;AAED,QAAA,MAAM,iBAAiB,UAAW,cAAc,CAAC,OAAO,MAAM,CAAC,gCAG9D,CAAA;AAED,QAAA,MAAM,gBAAgB,UAAW,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,gCAG3E,CAAA;AAED,QAAA,MAAM,sBAAsB,UAAW,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,gCAWvF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,iBAAiB,2BAA4B,WAAW,gCAI7D,CAAA;AAED,QAAA,MAAM,iBAAiB,2BAA4B,WAAW,gCAI7D,CAAA;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}

package/dist/backends/gui/alert-dialog.js

@@ -8,6 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * flattens its compound parts into the shadcn names and dresses them in the
  * Hanzo tokens, exactly as `dialog.tsx` does for the ordinary modal.
  *
+ * `size` gives it the record frame Dialog's `size` does (twenty-ui's
+ * AlertDialog, MIT, NOTICE): the same widths less `compact`, the same sections
+ * and scrim, from the one frame definition in dialog.tsx.
+ *
  * `AlertDialogContent` mounts its OWN portal + overlay (so callers never wrap
  * it) and re-applies the trigger's resolved theme inside the portal via
  * `PortalTheme` — gui portals re-root the subtree, so React theme context does
@@ -32,6 +36,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * button is `primary` and Cancel is `outline`.
  */
 import { AlertDialog as GuiAlertDialog, XStack, YStack } from '@hanzo/gui';
+import { useContext } from 'react';
+import { Sized, frame, scrim, section } from './dialog.js';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
 import { Button } from './button.js';
 import { slot } from './slot.js';
@@ -41,14 +47,26 @@ const AlertDialog = (p) => _jsx(GuiAlertDialog, { ...p });
 const AlertDialogTrigger = GuiAlertDialog.Trigger;
 const AlertDialogPortal = GuiAlertDialog.Portal;
 const AlertDialogOverlay = (props) => (_jsx(GuiAlertDialog.Overlay, { ...slot('alert-dialog-overlay'), bg: "rgba(0,0,0,0.5)", opacity: 0.5, ...props }));
-const AlertDialogContent = ({ children, ...props }) => {
+const AlertDialogContent = ({ children, size, ...props }) => {
     const themeName = useThemeName();
-    return (_jsx(GuiAlertDialog.Portal, { children: _jsxs(PortalTheme, { name: themeName, children: [_jsx(AlertDialogOverlay, {}), _jsx(GuiAlertDialog.Content, { ...slot('alert-dialog-content'), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...props, children: children })] }) }));
+    return (_jsx(GuiAlertDialog.Portal, { children: _jsxs(PortalTheme, { name: themeName, children: [_jsx(AlertDialogOverlay, { ...(size ? scrim : null) }), _jsx(GuiAlertDialog.Content, { ...slot('alert-dialog-content'), ...(size ? { 'data-size': size } : null), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...(size ? frame(size) : null), ...props, children: _jsx(Sized.Provider, { value: size ?? null, children: children }) })] }) }));
+};
+const AlertDialogHeader = (props) => {
+    const sized = useContext(Sized);
+    return _jsx(YStack, { ...slot('alert-dialog-header'), gap: "$2", ...(sized ? section.header : null), ...props });
+};
+const AlertDialogFooter = (props) => {
+    const sized = useContext(Sized);
+    return _jsx(XStack, { ...slot('alert-dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...(sized ? section.footer : null), ...props });
+};
+const AlertDialogTitle = (props) => {
+    const sized = useContext(Sized);
+    return _jsx(GuiAlertDialog.Title, { ...slot('alert-dialog-title'), size: "$5", fontWeight: "600", ...(sized ? section.title : null), ...props });
+};
+const AlertDialogDescription = (props) => {
+    const sized = useContext(Sized);
+    return (_jsx(GuiAlertDialog.Description, { ...slot('alert-dialog-description'), size: "$2", color: "$quiet", ...(sized ? section.description : null), ...props }));
 };
-const AlertDialogHeader = (props) => (_jsx(YStack, { ...slot('alert-dialog-header'), gap: "$2", ...props }));
-const AlertDialogFooter = (props) => (_jsx(XStack, { ...slot('alert-dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...props }));
-const AlertDialogTitle = (props) => (_jsx(GuiAlertDialog.Title, { ...slot('alert-dialog-title'), size: "$5", fontWeight: "600", ...props }));
-const AlertDialogDescription = (props) => (_jsx(GuiAlertDialog.Description, { ...slot('alert-dialog-description'), size: "$2", color: "$quiet", ...props }));
 /**
  * Both buttons are the one `Button` with gui's close part as its HOST — the
  * `Button asChild` direction, the same one `Button`-as-link already takes, and

package/dist/backends/gui/alert-dialog.js.map

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

package/dist/backends/gui/alert.cjs

@@ -2,6 +2,7 @@
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertDescription = exports.AlertTitle = void 0;
+exports.CalloutAction = CalloutAction;
 exports.Alert = Alert;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
@@ -15,11 +16,25 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * needs no `icon` prop and a trailing action stays in the flow. Surface, icon,
  * title and description are four styled parts sharing one `variant` through a
  * styled context — the surface owns the border, the other three own color.
+ *
+ * ── The callout (twenty-ui's Callout, MIT — NOTICE) ─────────────────────────
+ * Naming a `status`, a `color`, a `title`, an `action` or an `onDismiss` draws
+ * the record kit's callout: a titled card up to 512 wide (`fullWidth` lifts the
+ * cap), padding 12 12 8, 8px corners, its colour's faint ground and edge (data
+ * steps 1 and 6) and its icon in step 9 — the help circle unless one is given —
+ * a 13px medium one-line title beside a 24px dismiss, a 12px soft description
+ * indented to clear the icon, and actions at the end of a footer. The status
+ * reaches the colour through the one status map (feedback.ts), so an `error`
+ * callout and an `error` banner are the same red. Without those props an Alert
+ * renders exactly as it always has.
  */
 const react_1 = require("react");
 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 button_1 = require("./button.cjs");
+const feedback_1 = require("./feedback.cjs");
 const ICON = 16;
 const ICON_GUTTER = 28;
 const AlertContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({ variant: 'default' });
@@ -92,7 +107,23 @@ const IconSlot = (0, gui_1.styled)(gui_1.SizableText, {
         },
     },
 });
-function Alert({ variant = 'default', children, ...props }) {
+/** A callout's own action: a small ghost button at regular weight. */
+function CalloutAction(props) {
+    return (0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('alert-action'), variant: "ghost", size: "xs", fontWeight: "400", ...props });
+}
+/** The callout icon: data step 9 of its hue (its ground and edge, steps 1 and 6, are the status map's). */
+const step9 = (hue) => `var(--data-${hue}-9)`;
+function Callout({ status, color, title, description, icon, action, onDismiss, closeLabel = 'Dismiss', fullWidth = false, children, ...props }) {
+    const hue = (0, feedback_1.colorOf)(status ?? 'info', color);
+    const lead = icon === undefined ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CircleHelp, { size: 16, color: step9(hue) }) : icon;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack
+    // A callout that is not an alarm is a note: read where it sits, not
+    // announced. gui's role union is React Native's and lacks `note`.
+    , { ...{ role: status === 'error' || status === 'warning' ? 'alert' : 'note' }, ...(0, slot_1.slot)('alert'), "data-variant": "callout", "data-color": hue, width: "100%", maxW: fullWidth ? undefined : 512, gap: "$2", pt: "$3", px: "$3", pb: "$2", rounded: "$3", borderWidth: 1, borderColor: feedback_1.STATUS_PAINT[hue].edge, bg: feedback_1.STATUS_PAINT[hue].ground, ...props, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('alert-header'), items: "center", gap: "$2", minH: 24, children: [lead ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('alert-icon'), shrink: 0, width: 16, height: 16, items: "center", justify: "center", children: lead })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('alert-title'), flex: 1, minW: 0, size: "$2", lineHeight: 18, fontWeight: "500", color: "$ink", numberOfLines: 1, children: title }), onDismiss ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('alert-dismiss'), variant: "ghost", size: "icon-xs", emphasis: "subtle", "aria-label": closeLabel, onPress: onDismiss, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, {}) })) : null] }), description || children ? ((0, jsx_runtime_1.jsxs)(gui_1.SizableText, { ...(0, slot_1.slot)('alert-description'), render: "div", size: "$1", lineHeight: 17, color: "$hint", pl: lead ? 24 : 0, pb: action ? 0 : '$2', children: [description, children] })) : null, action ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('alert-footer'), justify: "flex-end", gap: "$2", children: action })) : null] }));
+}
+function Alert({ variant = 'default', status, color, title, description, icon: lead, action, onDismiss, closeLabel, fullWidth, children, ...props }) {
+    if ([status, color, title, description, lead, action, onDismiss].some((v) => v !== undefined))
+        return ((0, jsx_runtime_1.jsx)(Callout, { status: status, color: color, title: title, description: description, icon: lead, action: action, onDismiss: onDismiss, closeLabel: closeLabel, fullWidth: fullWidth, ...props, children: children }));
     const resolved = variant ?? 'default';
     const items = react_1.Children.toArray(children);
     const head = items[0];

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

@@ -9,8 +9,21 @@
  * needs no `icon` prop and a trailing action stays in the flow. Surface, icon,
  * title and description are four styled parts sharing one `variant` through a
  * styled context — the surface owns the border, the other three own color.
+ *
+ * ── The callout (twenty-ui's Callout, MIT — NOTICE) ─────────────────────────
+ * Naming a `status`, a `color`, a `title`, an `action` or an `onDismiss` draws
+ * the record kit's callout: a titled card up to 512 wide (`fullWidth` lifts the
+ * cap), padding 12 12 8, 8px corners, its colour's faint ground and edge (data
+ * steps 1 and 6) and its icon in step 9 — the help circle unless one is given —
+ * a 13px medium one-line title beside a 24px dismiss, a 12px soft description
+ * indented to clear the icon, and actions at the end of a footer. The status
+ * reaches the colour through the one status map (feedback.ts), so an `error`
+ * callout and an `error` banner are the same red. Without those props an Alert
+ * renders exactly as it always has.
  */
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ButtonProps } from './button.js';
+import { type FeedbackColor, type FeedbackStatus } from './feedback.js';
 export type AlertVariant = 'default' | 'destructive';
 declare const AlertFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
@@ -27,12 +40,32 @@ declare const AlertDescriptionText: import("@hanzogui/web").GuiComponent<import(
     unstyled?: boolean | undefined;
     variant?: "default" | "destructive" | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
-export type AlertProps = Omit<ComponentProps<typeof AlertFrame>, 'variant'> & {
+export type AlertProps = Omit<ComponentProps<typeof AlertFrame>, 'variant' | 'color' | 'title'> & {
     variant?: AlertVariant | null;
+    /** What the callout reports; picks its colour through the status map. */
+    status?: FeedbackStatus;
+    /** The colour, when it is not the status's. */
+    color?: FeedbackColor;
+    /** The callout's title (one line). */
+    title?: ReactNode;
+    /** The line under the title. */
+    description?: ReactNode;
+    /** The leading icon; the help circle by default. `null` draws none. */
+    icon?: ReactNode | null;
+    /** The footer's controls — usually `<CalloutAction>`s. */
+    action?: ReactNode;
+    /** Offer a dismiss button. */
+    onDismiss?: () => void;
+    /** The dismiss button's name. */
+    closeLabel?: string;
+    /** Lift the 512px cap. */
+    fullWidth?: boolean;
 };
+/** A callout's own action: a small ghost button at regular weight. */
+export declare function CalloutAction(props: Omit<ButtonProps, 'variant' | 'size'>): import("react").JSX.Element;
 export type AlertTitleProps = ComponentProps<typeof AlertTitleText>;
 export type AlertDescriptionProps = ComponentProps<typeof AlertDescriptionText>;
-declare function Alert({ variant, children, ...props }: AlertProps): import("react").JSX.Element;
+declare function Alert({ variant, status, color, title, description, icon: lead, action, onDismiss, closeLabel, fullWidth, children, ...props }: AlertProps): import("react").JSX.Element;
 declare const AlertTitle: (props: AlertTitleProps) => import("react").JSX.Element;
 declare const AlertDescription: (props: AlertDescriptionProps) => import("react").JSX.Element;
 export { Alert, AlertTitle, AlertDescription };

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/alert.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAKrE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,aAAa,CAAA;AAOpD,QAAA,MAAM,UAAU;;;;8CAmBd,CAAA;AAEF,QAAA,MAAM,cAAc;;;;8CAgBlB,CAAA;AAGF,QAAA,MAAM,oBAAoB;;;;8CAaxB,CAAA;AAyBF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5E,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CAC9B,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AACnE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE/E,iBAAS,KAAK,CAAC,EAAE,OAAmB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAkBrE;AAED,QAAA,MAAM,UAAU,UAAW,eAAe,gCAA2D,CAAA;AAErG,QAAA,MAAM,gBAAgB,UAAW,qBAAqB,gCAErD,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/alert.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAA4B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKrF,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAyB,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3F,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,aAAa,CAAA;AAOpD,QAAA,MAAM,UAAU;;;;8CAmBd,CAAA;AAEF,QAAA,MAAM,cAAc;;;;8CAgBlB,CAAA;AAGF,QAAA,MAAM,oBAAoB;;;;8CAaxB,CAAA;AAyBF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC,GAAG;IAChG,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,yEAAyE;IACzE,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gCAAgC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,+BAEzE;AA6ED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AACnE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE/E,iBAAS,KAAK,CAAC,EACb,OAAmB,EACnB,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EAAE,IAAI,EACV,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,+BAmCZ;AAED,QAAA,MAAM,UAAU,UAAW,eAAe,gCAA2D,CAAA;AAErG,QAAA,MAAM,gBAAgB,UAAW,qBAAqB,gCAErD,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/backends/gui/alert.js

@@ -11,11 +11,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * needs no `icon` prop and a trailing action stays in the flow. Surface, icon,
  * title and description are four styled parts sharing one `variant` through a
  * styled context — the surface owns the border, the other three own color.
+ *
+ * ── The callout (twenty-ui's Callout, MIT — NOTICE) ─────────────────────────
+ * Naming a `status`, a `color`, a `title`, an `action` or an `onDismiss` draws
+ * the record kit's callout: a titled card up to 512 wide (`fullWidth` lifts the
+ * cap), padding 12 12 8, 8px corners, its colour's faint ground and edge (data
+ * steps 1 and 6) and its icon in step 9 — the help circle unless one is given —
+ * a 13px medium one-line title beside a 24px dismiss, a 12px soft description
+ * indented to clear the icon, and actions at the end of a footer. The status
+ * reaches the colour through the one status map (feedback.ts), so an `error`
+ * callout and an `error` banner are the same red. Without those props an Alert
+ * renders exactly as it always has.
  */
 import { Children, isValidElement } from 'react';
-import { SizableText, YStack, createStyledContext, styled } from '@hanzo/gui';
+import { SizableText, XStack, YStack, createStyledContext, styled } from '@hanzo/gui';
+import { CircleHelp, X } from '@hanzogui/lucide-icons-2';
 import { ink } from './ink.js';
 import { slot } from './slot.js';
+import { Button } from './button.js';
+import { colorOf, STATUS_PAINT } from './feedback.js';
 const ICON = 16;
 const ICON_GUTTER = 28;
 const AlertContext = /* @__PURE__ */ createStyledContext({ variant: 'default' });
@@ -88,7 +102,23 @@ const IconSlot = styled(SizableText, {
         },
     },
 });
-function Alert({ variant = 'default', children, ...props }) {
+/** A callout's own action: a small ghost button at regular weight. */
+export function CalloutAction(props) {
+    return _jsx(Button, { ...slot('alert-action'), variant: "ghost", size: "xs", fontWeight: "400", ...props });
+}
+/** The callout icon: data step 9 of its hue (its ground and edge, steps 1 and 6, are the status map's). */
+const step9 = (hue) => `var(--data-${hue}-9)`;
+function Callout({ status, color, title, description, icon, action, onDismiss, closeLabel = 'Dismiss', fullWidth = false, children, ...props }) {
+    const hue = colorOf(status ?? 'info', color);
+    const lead = icon === undefined ? _jsx(CircleHelp, { size: 16, color: step9(hue) }) : icon;
+    return (_jsxs(YStack
+    // A callout that is not an alarm is a note: read where it sits, not
+    // announced. gui's role union is React Native's and lacks `note`.
+    , { ...{ role: status === 'error' || status === 'warning' ? 'alert' : 'note' }, ...slot('alert'), "data-variant": "callout", "data-color": hue, width: "100%", maxW: fullWidth ? undefined : 512, gap: "$2", pt: "$3", px: "$3", pb: "$2", rounded: "$3", borderWidth: 1, borderColor: STATUS_PAINT[hue].edge, bg: STATUS_PAINT[hue].ground, ...props, children: [_jsxs(XStack, { ...slot('alert-header'), items: "center", gap: "$2", minH: 24, children: [lead ? (_jsx(XStack, { ...slot('alert-icon'), shrink: 0, width: 16, height: 16, items: "center", justify: "center", children: lead })) : null, _jsx(SizableText, { ...slot('alert-title'), flex: 1, minW: 0, size: "$2", lineHeight: 18, fontWeight: "500", color: "$ink", numberOfLines: 1, children: title }), onDismiss ? (_jsx(Button, { ...slot('alert-dismiss'), variant: "ghost", size: "icon-xs", emphasis: "subtle", "aria-label": closeLabel, onPress: onDismiss, children: _jsx(X, {}) })) : null] }), description || children ? (_jsxs(SizableText, { ...slot('alert-description'), render: "div", size: "$1", lineHeight: 17, color: "$hint", pl: lead ? 24 : 0, pb: action ? 0 : '$2', children: [description, children] })) : null, action ? (_jsx(XStack, { ...slot('alert-footer'), justify: "flex-end", gap: "$2", children: action })) : null] }));
+}
+function Alert({ variant = 'default', status, color, title, description, icon: lead, action, onDismiss, closeLabel, fullWidth, children, ...props }) {
+    if ([status, color, title, description, lead, action, onDismiss].some((v) => v !== undefined))
+        return (_jsx(Callout, { status: status, color: color, title: title, description: description, icon: lead, action: action, onDismiss: onDismiss, closeLabel: closeLabel, fullWidth: fullWidth, ...props, children: children }));
     const resolved = variant ?? 'default';
     const items = Children.toArray(children);
     const head = items[0];

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

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

package/dist/backends/gui/avatar-group.cjs

@@ -0,0 +1,28 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = AvatarGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AvatarGroup — overlapping avatars with a "+N" for the rest: an event's
+ * attendees, a thread's participants, who has a record open.
+ *
+ * Each avatar after the first pulls `overlapOffset` over its neighbour on the
+ * reading direction's start side (`marginStart`), so the edge item never carries
+ * a negative margin in either direction. `overlap` decides which neighbour is on
+ * top. A server-side `total` larger than the list supplied still counts the
+ * rest. With nothing to show it renders nothing.
+ *
+ * Re-expressed from twenty-ui's AvatarGroup (MIT, see NOTICE): four visible,
+ * a 3px overlap, the overflow box on the hover rung behind a ground-coloured
+ * edge, 12px medium quiet text.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+function AvatarGroup({ avatars, maxVisible = 4, total, renderOverflow, overflowShape = 'square', overlap = 'right', overlapOffset = 3, ...props }) {
+    const shown = avatars.slice(0, Math.max(0, maxVisible));
+    const hidden = Math.max(0, (total ?? avatars.length) - shown.length);
+    if (shown.length === 0 && hidden === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('avatar-group'), items: "center", self: "flex-start", ...props, children: [shown.map((avatar, i) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('avatar-group-item'), ...(i > 0 ? { marginStart: -overlapOffset } : null), z: overlap === 'right' ? i : shown.length - i, position: "relative", children: avatar }, i))), hidden > 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('avatar-group-overflow'), ...(shown.length > 0 ? { marginStart: -overlapOffset } : null), z: overlap === 'right' ? shown.length : 0, position: "relative", self: "stretch", items: "center", px: "$1", bg: "$hover", borderWidth: 1, borderColor: "$background", rounded: overflowShape === 'circle' ? '$3' : '$xs', children: renderOverflow ? (renderOverflow(hidden)) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", lineHeight: 13, fontWeight: "500", color: "$aside", children: `+${hidden}` })) })) : null] }));
+}

package/dist/backends/gui/avatar-group.d.ts

@@ -0,0 +1,33 @@
+/**
+ * AvatarGroup — overlapping avatars with a "+N" for the rest: an event's
+ * attendees, a thread's participants, who has a record open.
+ *
+ * Each avatar after the first pulls `overlapOffset` over its neighbour on the
+ * reading direction's start side (`marginStart`), so the edge item never carries
+ * a negative margin in either direction. `overlap` decides which neighbour is on
+ * top. A server-side `total` larger than the list supplied still counts the
+ * rest. With nothing to show it renders nothing.
+ *
+ * Re-expressed from twenty-ui's AvatarGroup (MIT, see NOTICE): four visible,
+ * a 3px overlap, the overflow box on the hover rung behind a ground-coloured
+ * edge, 12px medium quiet text.
+ */
+import { XStack } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+import type { AvatarShape } from './avatar.js';
+export type AvatarGroupProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    /** The avatars, in order. */
+    avatars: ReactNode[];
+    /** How many are drawn before the rest become "+N". */
+    maxVisible?: number;
+    /** Everyone, when the list supplied is a page of a larger set. */
+    total?: number;
+    /** Draw the overflow yourself, given how many are hidden. */
+    renderOverflow?: (hidden: number) => ReactNode;
+    overflowShape?: AvatarShape;
+    /** Which neighbour is on top: `right` draws each later avatar over the one before. */
+    overlap?: 'right' | 'left';
+    overlapOffset?: number;
+};
+export declare function AvatarGroup({ avatars, maxVisible, total, renderOverflow, overflowShape, overlap, overlapOffset, ...props }: AvatarGroupProps): import("react").JSX.Element | null;
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/backends/gui/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/avatar-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,6BAA6B;IAC7B,OAAO,EAAE,SAAS,EAAE,CAAA;IACpB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAA;IAC9C,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAc,EACd,KAAK,EACL,cAAc,EACd,aAAwB,EACxB,OAAiB,EACjB,aAAiB,EACjB,GAAG,KAAK,EACT,EAAE,gBAAgB,sCA2ClB"}

package/dist/backends/gui/avatar-group.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AvatarGroup — overlapping avatars with a "+N" for the rest: an event's
+ * attendees, a thread's participants, who has a record open.
+ *
+ * Each avatar after the first pulls `overlapOffset` over its neighbour on the
+ * reading direction's start side (`marginStart`), so the edge item never carries
+ * a negative margin in either direction. `overlap` decides which neighbour is on
+ * top. A server-side `total` larger than the list supplied still counts the
+ * rest. With nothing to show it renders nothing.
+ *
+ * Re-expressed from twenty-ui's AvatarGroup (MIT, see NOTICE): four visible,
+ * a 3px overlap, the overflow box on the hover rung behind a ground-coloured
+ * edge, 12px medium quiet text.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { slot } from './slot.js';
+export function AvatarGroup({ avatars, maxVisible = 4, total, renderOverflow, overflowShape = 'square', overlap = 'right', overlapOffset = 3, ...props }) {
+    const shown = avatars.slice(0, Math.max(0, maxVisible));
+    const hidden = Math.max(0, (total ?? avatars.length) - shown.length);
+    if (shown.length === 0 && hidden === 0)
+        return null;
+    return (_jsxs(XStack, { ...slot('avatar-group'), items: "center", self: "flex-start", ...props, children: [shown.map((avatar, i) => (_jsx(XStack, { ...slot('avatar-group-item'), ...(i > 0 ? { marginStart: -overlapOffset } : null), z: overlap === 'right' ? i : shown.length - i, position: "relative", children: avatar }, i))), hidden > 0 ? (_jsx(XStack, { ...slot('avatar-group-overflow'), ...(shown.length > 0 ? { marginStart: -overlapOffset } : null), z: overlap === 'right' ? shown.length : 0, position: "relative", self: "stretch", items: "center", px: "$1", bg: "$hover", borderWidth: 1, borderColor: "$background", rounded: overflowShape === 'circle' ? '$3' : '$xs', children: renderOverflow ? (renderOverflow(hidden)) : (_jsx(SizableText, { size: "$1", lineHeight: 13, fontWeight: "500", color: "$aside", children: `+${hidden}` })) })) : null] }));
+}
+//# sourceMappingURL=avatar-group.js.map

package/dist/backends/gui/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../../src/backends/gui/avatar-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAkB7B,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,GAAG,CAAC,EACd,KAAK,EACL,cAAc,EACd,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,OAAO,EACjB,aAAa,GAAG,CAAC,EACjB,GAAG,KAAK,EACS;IACjB,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAA;IACvD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;IACpE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEnD,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,YAAY,KAAK,KAAK,aACzE,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,OAED,IAAI,CAAC,mBAAmB,CAAC,KACzB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EACpD,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAC7C,QAAQ,EAAC,UAAU,YAElB,MAAM,IANF,CAAC,CAOC,CACV,CAAC,EACD,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,OACD,IAAI,CAAC,uBAAuB,CAAC,KAC7B,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAC/D,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACzC,QAAQ,EAAC,UAAU,EACnB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,QAAQ,EACX,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,aAAa,EACzB,OAAO,EAAE,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,YAEjD,cAAc,CAAC,CAAC,CAAC,CAChB,cAAc,CAAC,MAAM,CAAC,CACvB,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAE,EAAE,EAAE,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,YACnE,IAAI,MAAM,EAAE,GACD,CACf,GACM,CACV,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/avatar.cjs

@@ -1,17 +1,67 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarFallback = exports.AvatarImage = exports.Avatar = void 0;
+exports.AvatarFallback = exports.AvatarImage = exports.Avatar = exports.initialOf = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Avatar — circular image with a text fallback.
+ * Avatar — an image with an initial or an icon behind it.
  *
  * @hanzogui/avatar owns the load/error state machine and the fallback delay, so
  * this only names the three parts and dresses them in tokens.
+ *
+ * Two looks, one component. With no `size`, it is the account avatar every
+ * Hanzo surface already draws: a 32px circle, its fallback on the edge rung.
+ * With a `size` it is a RECORD avatar (re-expressed from twenty-ui's Avatar,
+ * MIT, see NOTICE): xs 12 · sm 14 · md 16 · lg 24 · xl 40, square by default
+ * (2px), rounded (4px) or a circle, and its initial drawn in the record's own
+ * hue — twenty-ui's string hash over `colorSeed` (a record id, so a rename keeps
+ * the colour) or `name`, the hue's step 12 on step 4 (soft) or on step 5 inside
+ * a step 6 edge (outline). Given `src` or `name` directly it draws its own
+ * image and fallback; given children it is the compound it always was.
  */
 const gui_1 = require("@hanzo/gui");
+const data_1 = require("@hanzo/tokens/data");
+const react_1 = require("react");
+const hue_1 = require("./hue.cjs");
+const press_1 = require("./press.cjs");
 const SIZE = 32;
-const Avatar = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Avatar, { "data-slot": "avatar", circular: true, size: SIZE, shrink: 0, overflow: "hidden", ...props }));
+/**
+ * The record sizes: box, and the initial's rung. xs and sm sit on Hanzo's text
+ * floor, 12px (design's --text-floor): twenty-ui draws 8 and 10px initials there,
+ * which Hanzo does not render. The box clips, so the glyph never spills.
+ */
+const RECORD = {
+    xs: { box: 12, font: '$1' },
+    sm: { box: 14, font: '$1' },
+    md: { box: 16, font: '$1' },
+    lg: { box: 24, font: '$2' },
+    xl: { box: 40, font: '$4' },
+};
+const RADIUS = { square: '$2xs', rounded: '$xs', circle: '$10' };
+/** The first character of the trimmed name, uppercased; `-` with none. */
+const initialOf = (name) => {
+    const first = [...(name ?? '').trim()][0];
+    return first ? first.toLocaleUpperCase() : '-';
+};
+exports.initialOf = initialOf;
+const Avatar = ({ size, shape, src, name, colorSeed, icon, variant = 'soft', ring = false, pulsing = false, onPress, alt, children, style, ...props }) => {
+    const record = typeof size === 'string' && size in RECORD ? RECORD[size] : null;
+    // A box gui's Avatar takes directly: the account look at that size.
+    const box = record?.box ?? (size != null && !record ? size : SIZE);
+    const corner = RADIUS[shape ?? (record ? 'square' : 'circle')];
+    const seed = colorSeed ?? name ?? '';
+    const { style: hueStyle, tone } = (0, hue_1.useTone)((0, data_1.hueOf)(seed), [4, 5, 6, 12]);
+    const own = children == null && (src != null || name != null || icon != null);
+    const trimmed = (name ?? '').trim();
+    const fallback = own ? ((0, jsx_runtime_1.jsx)(AvatarFallback, { bg: icon ? 'transparent' : trimmed ? tone(variant === 'outline' ? 5 : 4) : '$hover', ...(variant === 'outline' && trimmed && !icon ? { borderWidth: 1, borderColor: tone(6) } : null), rounded: corner, children: icon ? ((0, react_1.isValidElement)(icon) && icon.props.size == null
+            ? (0, react_1.cloneElement)(icon, { size: box })
+            : icon) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: (record?.font ?? '$2'), lineHeight: box, fontWeight: "500", color: trimmed ? tone(12) : '$hint', select: "none", children: (0, exports.initialOf)(name) })) })) : null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Avatar, { "data-slot": "avatar", ...(record ? { 'data-size': size } : null), ...(onPress ? (0, press_1.press)(onPress) : null), circular: corner === '$10', size: box, ...(record || shape ? { rounded: corner } : null), shrink: 0, overflow: "hidden", ...(onPress ? { cursor: 'pointer', hoverStyle: { outlineColor: '$hover', outlineWidth: 4, outlineStyle: 'solid' }, focusVisibleStyle: press_1.RING } : null), ...(pulsing ? { 'data-motion': 'pulse' } : null), style: {
+            ...(own && trimmed ? hueStyle : null),
+            ...(ring ? { boxShadow: '0 0 0 1px var(--border), 0 0 0 3px var(--background)' } : null),
+            ...style,
+        }, ...props, children: [own && src ? (0, jsx_runtime_1.jsx)(AvatarImage, { src: src, ...(alt ? { alt } : null) }) : null, fallback, children] }));
+};
 exports.Avatar = Avatar;
 const AvatarImage = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Avatar.Image, { "data-slot": "avatar-image", width: "100%", height: "100%", ...props }));
 exports.AvatarImage = AvatarImage;