@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/Header-D1I_OlBk.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('./Txt-DXjXpX9r.cjs');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+const Header = ({ children, border = true, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      className: utils_cn.cn(
+        "z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2",
+        {
+          // Layout headers share the same edge color as their surrounding surface.
+          "border-b border-surface-rim": border
+        },
+        className
+      ),
+      children
+    }
+  );
+};
+const HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "h1", variant: "body", tone: "ink", className: "flex items-center gap-2", children });
+};
+const HeaderAction = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-3", children });
+};
+const HeaderGroup = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children });
+};
+
+exports.Header = Header;
+exports.HeaderAction = HeaderAction;
+exports.HeaderGroup = HeaderGroup;
+exports.HeaderTitle = HeaderTitle;
+//# sourceMappingURL=Header-D1I_OlBk.cjs.map

package/dist/Header-D1I_OlBk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header-D1I_OlBk.cjs","sources":["../src/ds/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface HeaderProps {\n  children?: React.ReactNode;\n  border?: boolean;\n  className?: string;\n}\n\nexport const Header = ({ children, border = true, className }: HeaderProps) => {\n  return (\n    <header\n      className={cn(\n        'z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2',\n        {\n          // Layout headers share the same edge color as their surrounding surface.\n          'border-b border-surface-rim': border,\n        },\n        className,\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport const HeaderTitle = ({ children }: HeaderProps) => {\n  return (\n    <Txt as=\"h1\" variant=\"body\" tone=\"ink\" className=\"flex items-center gap-2\">\n      {children}\n    </Txt>\n  );\n};\n\nexport const HeaderAction = ({ children }: HeaderProps) => {\n  return <div className=\"ml-auto flex items-center gap-3\">{children}</div>;\n};\n\nexport const HeaderGroup = ({ children }: HeaderProps) => {\n  return <div className=\"flex items-center gap-2\">{children}</div>;\n};\n"],"names":["jsx","cn","Txt"],"mappings":";;;;;;AAWO,MAAM,SAAS,CAAC,EAAE,UAAU,MAAA,GAAS,IAAA,EAAM,WAAU,KAAmB;AAC7E,EAAA,uBACEA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,0EAAA;AAAA,QACA;AAAA;AAAA,UAEE,6BAAA,EAA+B;AAAA,SACjC;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBACED,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,QAAO,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,yBAAA,EAC9C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAAmB;AACzD,EAAA,uBAAOF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAS,CAAA;AACpE;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBAAOA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAC5D;;;;;;;"}

package/dist/Header-DexJT3FP.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const Header = ({ children, border = true, className }) => {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(
+        "z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2",
+        {
+          // Layout headers share the same edge color as their surrounding surface.
+          "border-b border-surface-rim": border
+        },
+        className
+      ),
+      children
+    }
+  );
+};
+const HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "body", tone: "ink", className: "flex items-center gap-2", children });
+};
+const HeaderAction = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-3", children });
+};
+const HeaderGroup = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children });
+};
+
+export { Header as H, HeaderAction as a, HeaderGroup as b, HeaderTitle as c };
+//# sourceMappingURL=Header-DexJT3FP.js.map

package/dist/Header-DexJT3FP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header-DexJT3FP.js","sources":["../src/ds/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface HeaderProps {\n  children?: React.ReactNode;\n  border?: boolean;\n  className?: string;\n}\n\nexport const Header = ({ children, border = true, className }: HeaderProps) => {\n  return (\n    <header\n      className={cn(\n        'z-50 flex h-header-default w-full items-center gap-2 bg-transparent px-2',\n        {\n          // Layout headers share the same edge color as their surrounding surface.\n          'border-b border-surface-rim': border,\n        },\n        className,\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport const HeaderTitle = ({ children }: HeaderProps) => {\n  return (\n    <Txt as=\"h1\" variant=\"body\" tone=\"ink\" className=\"flex items-center gap-2\">\n      {children}\n    </Txt>\n  );\n};\n\nexport const HeaderAction = ({ children }: HeaderProps) => {\n  return <div className=\"ml-auto flex items-center gap-3\">{children}</div>;\n};\n\nexport const HeaderGroup = ({ children }: HeaderProps) => {\n  return <div className=\"flex items-center gap-2\">{children}</div>;\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,SAAS,CAAC,EAAE,UAAU,MAAA,GAAS,IAAA,EAAM,WAAU,KAAmB;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,0EAAA;AAAA,QACA;AAAA;AAAA,UAEE,6BAAA,EAA+B;AAAA,SACjC;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,QAAO,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,yBAAA,EAC9C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAAmB;AACzD,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAS,CAAA;AACpE;AAEO,MAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAS,KAAmB;AACxD,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAC5D;;;;"}

package/dist/Notice-Wy1grdLu.js

@@ -0,0 +1,102 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { isValidElement, Children } from 'react';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+import { FileTextIcon, InfoIcon, TriangleAlertIcon, OctagonAlertIcon, LightbulbIcon } from 'lucide-react';
+import { G as GrainFill } from './grain-fill-DznD1Fnx.js';
+import { textStyle } from './primitives/text.es.js';
+
+import './Notice.css';function nativeButtonProps(render) {
+  if (!render || isValidElement(render) && render.type === "button") return { type: "button" };
+  return {};
+}
+function NoticeButton({ render, icon, className, children, ...props }) {
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps(
+      nativeButtonProps(render),
+      {
+        className: cn(
+          "inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-xs text-label text-foreground",
+          "underline decoration-foreground/40 underline-offset-4 hover:decoration-foreground",
+          transitions.colors,
+          "outline-offset-2 focus-visible:outline-2 focus-visible:outline-border-focus",
+          "disabled:cursor-not-allowed disabled:text-muted-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          children
+        ] })
+      },
+      props
+    )
+  });
+}
+
+function NoticeMessage({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+
+const variantConfig = {
+  success: { icon: /* @__PURE__ */ jsx(LightbulbIcon, {}), iconClass: "text-success-indicator" },
+  destructive: { icon: /* @__PURE__ */ jsx(OctagonAlertIcon, {}), iconClass: "text-destructive-indicator" },
+  warning: { icon: /* @__PURE__ */ jsx(TriangleAlertIcon, {}), iconClass: "text-warning-foreground" },
+  info: { icon: /* @__PURE__ */ jsx(InfoIcon, {}), iconClass: "text-info-indicator" },
+  note: { icon: /* @__PURE__ */ jsx(FileTextIcon, {}), iconClass: "text-muted-foreground" }
+};
+const titledMessage = { variant: "caption", tone: "muted" };
+const plainMessage = { variant: "body-sm", tone: "ink" };
+function hasContent(content) {
+  return Children.toArray(content).some((child) => child !== "");
+}
+function lastRowOf(hasAction, hasMessage) {
+  if (hasAction) return "action";
+  if (hasMessage) return "message";
+  return "title";
+}
+function NoticeRoot({ variant, title, icon, action, children, className }) {
+  const { icon: defaultIcon, iconClass } = variantConfig[variant];
+  const glyph = /* @__PURE__ */ jsx("span", { className: cn("flex h-lh shrink-0 items-center [&>svg]:size-icon-sm", iconClass), children: icon ?? defaultIcon });
+  const hasTitle = hasContent(title);
+  const hasMessage = hasContent(children);
+  const hasAction = hasContent(action);
+  const lastRow = lastRowOf(hasAction, hasMessage);
+  const messageText = hasTitle ? titledMessage : plainMessage;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "notice",
+      className: cn(
+        "relative isolate flex flex-col gap-2 overflow-hidden rounded-2xl border border-surface-rim p-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "notice-background", "aria-hidden": true, className: "absolute inset-0 -z-10 bg-card", children: variant !== "note" && /* @__PURE__ */ jsx(GrainFill, { tone: variant, width: 464, height: 200, className: "absolute inset-0 max-w-116 mask-r-from-34%" }) }),
+        hasTitle && /* @__PURE__ */ jsxs("div", { className: cn(textStyle({ variant: "subheading", tone: "ink" }), "flex min-w-0 items-start gap-2"), children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: title }),
+          lastRow === "title" && glyph
+        ] }),
+        hasMessage && /* @__PURE__ */ jsxs("div", { className: cn(textStyle(messageText), "flex min-w-0 items-end gap-2"), children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2 wrap-anywhere", children }),
+          lastRow === "message" && glyph
+        ] }),
+        hasAction && /* @__PURE__ */ jsxs("div", { className: cn(textStyle({ variant: "label" }), "flex min-w-0 items-center justify-between gap-2"), children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0", children: action }),
+          glyph
+        ] })
+      ]
+    }
+  );
+}
+
+const Notice = Object.assign(NoticeRoot, {
+  Message: NoticeMessage,
+  Button: NoticeButton
+});
+
+export { Notice as N };
+//# sourceMappingURL=Notice-Wy1grdLu.js.map

package/dist/Notice-Wy1grdLu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice-Wy1grdLu.js","sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement, type ReactNode } from 'react';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          'inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-xs text-label text-foreground',\n          'underline decoration-foreground/40 underline-offset-4 hover:decoration-foreground',\n          transitions.colors,\n          'outline-offset-2 focus-visible:outline-2 focus-visible:outline-border-focus',\n          'disabled:cursor-not-allowed disabled:text-muted-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            {children}\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon } from 'lucide-react';\nimport { Children, type ReactNode } from 'react';\nimport './notice.css';\nimport { GrainFill } from '@/ds/components/GrainFill/grain-fill';\nimport { textStyle } from '@/ds/primitives/text';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nconst titledMessage = { variant: 'caption', tone: 'muted' } as const;\nconst plainMessage = { variant: 'body-sm', tone: 'ink' } as const;\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nfunction lastRowOf(hasAction: boolean, hasMessage: boolean) {\n  if (hasAction) return 'action';\n  if (hasMessage) return 'message';\n  return 'title';\n}\n\nexport interface NoticeRootProps {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function NoticeRoot({ variant, title, icon, action, children, className }: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const glyph = (\n    <span className={cn('flex h-lh shrink-0 items-center [&>svg]:size-icon-sm', iconClass)}>{icon ?? defaultIcon}</span>\n  );\n\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n  const lastRow = lastRowOf(hasAction, hasMessage);\n  const messageText = hasTitle ? titledMessage : plainMessage;\n\n  return (\n    <div\n      data-slot=\"notice\"\n      className={cn(\n        'relative isolate flex flex-col gap-2 overflow-hidden rounded-2xl border border-surface-rim p-3',\n        className,\n      )}\n    >\n      <div data-slot=\"notice-background\" aria-hidden className=\"absolute inset-0 -z-10 bg-card\">\n        {variant !== 'note' && (\n          <GrainFill tone={variant} width={464} height={200} className=\"absolute inset-0 max-w-116 mask-r-from-34%\" />\n        )}\n      </div>\n      {hasTitle && (\n        <div className={cn(textStyle({ variant: 'subheading', tone: 'ink' }), 'flex min-w-0 items-start gap-2')}>\n          <span className=\"min-w-0 flex-1 truncate\">{title}</span>\n          {lastRow === 'title' && glyph}\n        </div>\n      )}\n      {hasMessage && (\n        <div className={cn(textStyle(messageText), 'flex min-w-0 items-end gap-2')}>\n          {/* wrap-anywhere — messages carry URLs and tokens with no break opportunity */}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2 wrap-anywhere\">{children}</div>\n          {lastRow === 'message' && glyph}\n        </div>\n      )}\n      {hasAction && (\n        <div className={cn(textStyle({ variant: 'label' }), 'flex min-w-0 items-center justify-between gap-2')}>\n          <div className=\"flex min-w-0\">{action}</div>\n          {glyph}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"names":[],"mappings":"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"}

package/dist/Notice-c8dMiAtZ.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+require('./Notice.css');const jsxRuntime = require('react/jsx-runtime');
+const mergeProps = require('@base-ui/react/merge-props');
+const useRender = require('@base-ui/react/use-render');
+const React = require('react');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+const lucideReact = require('lucide-react');
+const grainFill = require('./grain-fill-CfEdTWKl.cjs');
+const primitives_text = require('./primitives/text.cjs.js');
+
+function nativeButtonProps(render) {
+  if (!render || React.isValidElement(render) && render.type === "button") return { type: "button" };
+  return {};
+}
+function NoticeButton({ render, icon, className, children, ...props }) {
+  return useRender.useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps.mergeProps(
+      nativeButtonProps(render),
+      {
+        className: utils_cn.cn(
+          "inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-xs text-label text-foreground",
+          "underline decoration-foreground/40 underline-offset-4 hover:decoration-foreground",
+          primitives_transitions.transitions.colors,
+          "outline-offset-2 focus-visible:outline-2 focus-visible:outline-border-focus",
+          "disabled:cursor-not-allowed disabled:text-muted-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0",
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon,
+          children
+        ] })
+      },
+      props
+    )
+  });
+}
+
+function NoticeMessage({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+}
+
+const variantConfig = {
+  success: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LightbulbIcon, {}), iconClass: "text-success-indicator" },
+  destructive: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonAlertIcon, {}), iconClass: "text-destructive-indicator" },
+  warning: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}), iconClass: "text-warning-foreground" },
+  info: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}), iconClass: "text-info-indicator" },
+  note: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileTextIcon, {}), iconClass: "text-muted-foreground" }
+};
+const titledMessage = { variant: "caption", tone: "muted" };
+const plainMessage = { variant: "body-sm", tone: "ink" };
+function hasContent(content) {
+  return React.Children.toArray(content).some((child) => child !== "");
+}
+function lastRowOf(hasAction, hasMessage) {
+  if (hasAction) return "action";
+  if (hasMessage) return "message";
+  return "title";
+}
+function NoticeRoot({ variant, title, icon, action, children, className }) {
+  const { icon: defaultIcon, iconClass } = variantConfig[variant];
+  const glyph = /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("flex h-lh shrink-0 items-center [&>svg]:size-icon-sm", iconClass), children: icon ?? defaultIcon });
+  const hasTitle = hasContent(title);
+  const hasMessage = hasContent(children);
+  const hasAction = hasContent(action);
+  const lastRow = lastRowOf(hasAction, hasMessage);
+  const messageText = hasTitle ? titledMessage : plainMessage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "notice",
+      className: utils_cn.cn(
+        "relative isolate flex flex-col gap-2 overflow-hidden rounded-2xl border border-surface-rim p-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "notice-background", "aria-hidden": true, className: "absolute inset-0 -z-10 bg-card", children: variant !== "note" && /* @__PURE__ */ jsxRuntime.jsx(grainFill.GrainFill, { tone: variant, width: 464, height: 200, className: "absolute inset-0 max-w-116 mask-r-from-34%" }) }),
+        hasTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(primitives_text.textStyle({ variant: "subheading", tone: "ink" }), "flex min-w-0 items-start gap-2"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: title }),
+          lastRow === "title" && glyph
+        ] }),
+        hasMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(primitives_text.textStyle(messageText), "flex min-w-0 items-end gap-2"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2 wrap-anywhere", children }),
+          lastRow === "message" && glyph
+        ] }),
+        hasAction && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(primitives_text.textStyle({ variant: "label" }), "flex min-w-0 items-center justify-between gap-2"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0", children: action }),
+          glyph
+        ] })
+      ]
+    }
+  );
+}
+
+const Notice = Object.assign(NoticeRoot, {
+  Message: NoticeMessage,
+  Button: NoticeButton
+});
+
+exports.Notice = Notice;
+//# sourceMappingURL=Notice-c8dMiAtZ.cjs.map

package/dist/Notice-c8dMiAtZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice-c8dMiAtZ.cjs","sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement, type ReactNode } from 'react';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          'inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-xs text-label text-foreground',\n          'underline decoration-foreground/40 underline-offset-4 hover:decoration-foreground',\n          transitions.colors,\n          'outline-offset-2 focus-visible:outline-2 focus-visible:outline-border-focus',\n          'disabled:cursor-not-allowed disabled:text-muted-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            {children}\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon } from 'lucide-react';\nimport { Children, type ReactNode } from 'react';\nimport './notice.css';\nimport { GrainFill } from '@/ds/components/GrainFill/grain-fill';\nimport { textStyle } from '@/ds/primitives/text';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nconst titledMessage = { variant: 'caption', tone: 'muted' } as const;\nconst plainMessage = { variant: 'body-sm', tone: 'ink' } as const;\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nfunction lastRowOf(hasAction: boolean, hasMessage: boolean) {\n  if (hasAction) return 'action';\n  if (hasMessage) return 'message';\n  return 'title';\n}\n\nexport interface NoticeRootProps {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function NoticeRoot({ variant, title, icon, action, children, className }: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const glyph = (\n    <span className={cn('flex h-lh shrink-0 items-center [&>svg]:size-icon-sm', iconClass)}>{icon ?? defaultIcon}</span>\n  );\n\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n  const lastRow = lastRowOf(hasAction, hasMessage);\n  const messageText = hasTitle ? titledMessage : plainMessage;\n\n  return (\n    <div\n      data-slot=\"notice\"\n      className={cn(\n        'relative isolate flex flex-col gap-2 overflow-hidden rounded-2xl border border-surface-rim p-3',\n        className,\n      )}\n    >\n      <div data-slot=\"notice-background\" aria-hidden className=\"absolute inset-0 -z-10 bg-card\">\n        {variant !== 'note' && (\n          <GrainFill tone={variant} width={464} height={200} className=\"absolute inset-0 max-w-116 mask-r-from-34%\" />\n        )}\n      </div>\n      {hasTitle && (\n        <div className={cn(textStyle({ variant: 'subheading', tone: 'ink' }), 'flex min-w-0 items-start gap-2')}>\n          <span className=\"min-w-0 flex-1 truncate\">{title}</span>\n          {lastRow === 'title' && glyph}\n        </div>\n      )}\n      {hasMessage && (\n        <div className={cn(textStyle(messageText), 'flex min-w-0 items-end gap-2')}>\n          {/* wrap-anywhere — messages carry URLs and tokens with no break opportunity */}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2 wrap-anywhere\">{children}</div>\n          {lastRow === 'message' && glyph}\n        </div>\n      )}\n      {hasAction && (\n        <div className={cn(textStyle({ variant: 'label' }), 'flex min-w-0 items-center justify-between gap-2')}>\n          <div className=\"flex min-w-0\">{action}</div>\n          {glyph}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"names":["isValidElement","useRender","mergeProps","cn","transitions","jsxs","Fragment","jsx","LightbulbIcon","OctagonAlertIcon","TriangleAlertIcon","InfoIcon","FileTextIcon","Children","GrainFill","textStyle"],"mappings":"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"}

package/dist/Notice.css

@@ -0,0 +1,33 @@
+@keyframes notice-enter {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--spacing) * -2));
+  }
+}
+
+@layer components {
+  [data-slot='notice'] {
+    box-shadow: var(--elevation-lip), var(--elevation-raised);
+  }
+
+  /* Play on mount without relying on @starting-style support. Backwards fill
+   * leaves no animation transform or opacity override after the entrance. */
+  @media (prefers-reduced-motion: no-preference) {
+    [data-slot='notice'] {
+      animation: notice-enter var(--duration-normal) var(--ease-out-custom) backwards;
+    }
+  }
+
+  /* This highlight belongs to the frame, not the square background layers.
+   * Match its border box and radius; the transparent border keeps the white
+   * inset rim inside the existing surface border. Paint above the grain. */
+  html.light [data-slot='notice']::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border: 1px solid transparent;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 0.5px white;
+  }
+}

package/dist/Txt-BuzYj7Vy.js

@@ -0,0 +1,20 @@
+import { useRender } from '@base-ui/react/use-render';
+import { textStyle } from './primitives/text.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function Txt({ as, className, variant, tone, font, ...props }) {
+  return useRender({
+    defaultTagName: as ?? "p",
+    props: {
+      ...props,
+      className: cn(
+        textStyle({ variant: variant ?? "body", tone, font }),
+        variant === void 0 && (as === "strong" || as === "b") && "font-bold",
+        className
+      )
+    }
+  });
+}
+
+export { Txt as T };
+//# sourceMappingURL=Txt-BuzYj7Vy.js.map

package/dist/Txt-BuzYj7Vy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt-BuzYj7Vy.js","sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport type { ComponentPropsWithoutRef, HTMLAttributes, Ref } from 'react';\n\nimport { textStyle } from '@/ds/primitives/text';\nimport type { TextStyleProps } from '@/ds/primitives/text';\nimport { cn } from '@/lib/utils';\n\ntype TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong' | 'b' | 'time';\n\nexport interface TxtProps extends HTMLAttributes<HTMLElement>, TextStyleProps {\n  as?: TextElement;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n}\n\ntype ElementTxtProps<T extends TextElement> = TextStyleProps & {\n  as?: T;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n} & Omit<ComponentPropsWithoutRef<T>, keyof TextStyleProps | 'as' | 'ref'>;\n\n/** Typography for text elements. Controls and layout containers own their markup. */\nexport function Txt<T extends TextElement = 'p'>({ as, className, variant, tone, font, ...props }: ElementTxtProps<T>) {\n  return useRender({\n    defaultTagName: as ?? 'p',\n    props: {\n      ...props,\n      className: cn(\n        textStyle({ variant: variant ?? 'body', tone, font }),\n        variant === undefined && (as === 'strong' || as === 'b') && 'font-bold',\n        className,\n      ),\n    },\n  });\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,GAAA,CAAiC,EAAE,EAAA,EAAI,SAAA,EAAW,SAAS,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAuB;AACrH,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,gBAAgB,EAAA,IAAM,GAAA;AAAA,IACtB,KAAA,EAAO;AAAA,MACL,GAAG,KAAA;AAAA,MACH,SAAA,EAAW,EAAA;AAAA,QACT,UAAU,EAAE,OAAA,EAAS,WAAW,MAAA,EAAQ,IAAA,EAAM,MAAM,CAAA;AAAA,QACpD,OAAA,KAAY,MAAA,KAAc,EAAA,KAAO,QAAA,IAAY,OAAO,GAAA,CAAA,IAAQ,WAAA;AAAA,QAC5D;AAAA;AACF;AACF,GACD,CAAA;AACH;;;;"}

package/dist/Txt-DXjXpX9r.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const useRender = require('@base-ui/react/use-render');
+const primitives_text = require('./primitives/text.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function Txt({ as, className, variant, tone, font, ...props }) {
+  return useRender.useRender({
+    defaultTagName: as ?? "p",
+    props: {
+      ...props,
+      className: utils_cn.cn(
+        primitives_text.textStyle({ variant: variant ?? "body", tone, font }),
+        variant === void 0 && (as === "strong" || as === "b") && "font-bold",
+        className
+      )
+    }
+  });
+}
+
+exports.Txt = Txt;
+//# sourceMappingURL=Txt-DXjXpX9r.cjs.map

package/dist/Txt-DXjXpX9r.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt-DXjXpX9r.cjs","sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport type { ComponentPropsWithoutRef, HTMLAttributes, Ref } from 'react';\n\nimport { textStyle } from '@/ds/primitives/text';\nimport type { TextStyleProps } from '@/ds/primitives/text';\nimport { cn } from '@/lib/utils';\n\ntype TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong' | 'b' | 'time';\n\nexport interface TxtProps extends HTMLAttributes<HTMLElement>, TextStyleProps {\n  as?: TextElement;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n}\n\ntype ElementTxtProps<T extends TextElement> = TextStyleProps & {\n  as?: T;\n  ref?: Ref<HTMLElement>;\n  htmlFor?: string;\n} & Omit<ComponentPropsWithoutRef<T>, keyof TextStyleProps | 'as' | 'ref'>;\n\n/** Typography for text elements. Controls and layout containers own their markup. */\nexport function Txt<T extends TextElement = 'p'>({ as, className, variant, tone, font, ...props }: ElementTxtProps<T>) {\n  return useRender({\n    defaultTagName: as ?? 'p',\n    props: {\n      ...props,\n      className: cn(\n        textStyle({ variant: variant ?? 'body', tone, font }),\n        variant === undefined && (as === 'strong' || as === 'b') && 'font-bold',\n        className,\n      ),\n    },\n  });\n}\n"],"names":["useRender","cn","textStyle"],"mappings":";;;;;;AAsBO,SAAS,GAAA,CAAiC,EAAE,EAAA,EAAI,SAAA,EAAW,SAAS,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAuB;AACrH,EAAA,OAAOA,mBAAA,CAAU;AAAA,IACf,gBAAgB,EAAA,IAAM,GAAA;AAAA,IACtB,KAAA,EAAO;AAAA,MACL,GAAG,KAAA;AAAA,MACH,SAAA,EAAWC,WAAA;AAAA,QACTC,0BAAU,EAAE,OAAA,EAAS,WAAW,MAAA,EAAQ,IAAA,EAAM,MAAM,CAAA;AAAA,QACpD,OAAA,KAAY,MAAA,KAAc,EAAA,KAAO,QAAA,IAAY,OAAO,GAAA,CAAA,IAAQ,WAAA;AAAA,QAC5D;AAAA;AACF;AACF,GACD,CAAA;AACH;;;;"}

package/dist/activity-D92LbV6O.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+require('./activity.css');const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+const PILLS = [0, 1, 2, 3, 4];
+const STATUS_TITLE = {
+  initializing: "Initializing",
+  working: "Working",
+  ready: "Waiting on you"
+};
+function statusAttributes(status, label) {
+  return label ? { role: "status", "aria-label": label, title: STATUS_TITLE[status] } : { "aria-hidden": true };
+}
+function ActivityBelt({
+  status,
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      ...statusAttributes(status, label),
+      className: utils_cn.cn("session-belt", `session-${status}`, className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "session-belt-sway", children: PILLS.map((pill) => /* @__PURE__ */ jsxRuntime.jsx("i", {}, pill)) })
+    }
+  );
+}
+function ActivityWick({
+  status,
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      "data-live-session-indicator": status,
+      role: "status",
+      "aria-label": label ?? STATUS_TITLE[status],
+      title: STATUS_TITLE[status],
+      className: utils_cn.cn("session-wick", `session-${status}`, className)
+    }
+  );
+}
+
+exports.ActivityBelt = ActivityBelt;
+exports.ActivityWick = ActivityWick;
+//# sourceMappingURL=activity-D92LbV6O.cjs.map

package/dist/activity-D92LbV6O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-D92LbV6O.cjs","sources":["../src/ds/components/Activity/activity.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ActivityStatus = 'initializing' | 'working' | 'ready';\n\nimport './activity.css';\n\nconst PILLS = [0, 1, 2, 3, 4];\n\nconst STATUS_TITLE: Record<ActivityStatus, string> = {\n  initializing: 'Initializing',\n  working: 'Working',\n  ready: 'Waiting on you',\n};\n\nfunction statusAttributes(status: ActivityStatus, label: string | undefined) {\n  return label ? { role: 'status', 'aria-label': label, title: STATUS_TITLE[status] } : { 'aria-hidden': true };\n}\n\nexport function ActivityBelt({\n  status,\n  label,\n  className,\n  ...props\n}: ComponentProps<'span'> & {\n  status: ActivityStatus;\n  label?: string;\n}) {\n  return (\n    <span\n      {...props}\n      {...statusAttributes(status, label)}\n      className={cn('session-belt', `session-${status}`, className)}\n    >\n      <span className=\"session-belt-sway\">\n        {PILLS.map(pill => (\n          <i key={pill} />\n        ))}\n      </span>\n    </span>\n  );\n}\n\nexport function ActivityWick({\n  status,\n  label,\n  className,\n  ...props\n}: ComponentProps<'span'> & {\n  status: ActivityStatus;\n  label?: string;\n}) {\n  return (\n    <span\n      {...props}\n      data-live-session-indicator={status}\n      role=\"status\"\n      aria-label={label ?? STATUS_TITLE[status]}\n      title={STATUS_TITLE[status]}\n      className={cn('session-wick', `session-${status}`, className)}\n    />\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;AAOA,MAAM,QAAQ,CAAC,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC,CAAA;AAE5B,MAAM,YAAA,GAA+C;AAAA,EACnD,YAAA,EAAc,cAAA;AAAA,EACd,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,SAAS,gBAAA,CAAiB,QAAwB,KAAA,EAA2B;AAC3E,EAAA,OAAO,KAAA,GAAQ,EAAE,IAAA,EAAM,QAAA,EAAU,YAAA,EAAc,KAAA,EAAO,KAAA,EAAO,YAAA,CAAa,MAAM,CAAA,EAAE,GAAI,EAAE,eAAe,IAAA,EAAK;AAC9G;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,gBAAA,CAAiB,MAAA,EAAQ,KAAK,CAAA;AAAA,MAClC,WAAWC,WAAA,CAAG,cAAA,EAAgB,CAAA,QAAA,EAAW,MAAM,IAAI,SAAS,CAAA;AAAA,MAE5D,QAAA,kBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,qBACTA,cAAA,CAAC,GAAA,EAAA,EAAA,EAAO,IAAM,CACf,CAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,6BAAA,EAA6B,MAAA;AAAA,MAC7B,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,KAAA,IAAS,YAAA,CAAa,MAAM,CAAA;AAAA,MACxC,KAAA,EAAO,aAAa,MAAM,CAAA;AAAA,MAC1B,WAAWC,WAAA,CAAG,cAAA,EAAgB,CAAA,QAAA,EAAW,MAAM,IAAI,SAAS;AAAA;AAAA,GAC9D;AAEJ;;;;;"}

package/dist/activity-aBG-6aVw.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-coERSHz5.js';
+
+import './activity.css';const PILLS = [0, 1, 2, 3, 4];
+const STATUS_TITLE = {
+  initializing: "Initializing",
+  working: "Working",
+  ready: "Waiting on you"
+};
+function statusAttributes(status, label) {
+  return label ? { role: "status", "aria-label": label, title: STATUS_TITLE[status] } : { "aria-hidden": true };
+}
+function ActivityBelt({
+  status,
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      ...statusAttributes(status, label),
+      className: cn("session-belt", `session-${status}`, className),
+      children: /* @__PURE__ */ jsx("span", { className: "session-belt-sway", children: PILLS.map((pill) => /* @__PURE__ */ jsx("i", {}, pill)) })
+    }
+  );
+}
+function ActivityWick({
+  status,
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      "data-live-session-indicator": status,
+      role: "status",
+      "aria-label": label ?? STATUS_TITLE[status],
+      title: STATUS_TITLE[status],
+      className: cn("session-wick", `session-${status}`, className)
+    }
+  );
+}
+
+export { ActivityBelt as A, ActivityWick as a };
+//# sourceMappingURL=activity-aBG-6aVw.js.map

package/dist/activity-aBG-6aVw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-aBG-6aVw.js","sources":["../src/ds/components/Activity/activity.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ActivityStatus = 'initializing' | 'working' | 'ready';\n\nimport './activity.css';\n\nconst PILLS = [0, 1, 2, 3, 4];\n\nconst STATUS_TITLE: Record<ActivityStatus, string> = {\n  initializing: 'Initializing',\n  working: 'Working',\n  ready: 'Waiting on you',\n};\n\nfunction statusAttributes(status: ActivityStatus, label: string | undefined) {\n  return label ? { role: 'status', 'aria-label': label, title: STATUS_TITLE[status] } : { 'aria-hidden': true };\n}\n\nexport function ActivityBelt({\n  status,\n  label,\n  className,\n  ...props\n}: ComponentProps<'span'> & {\n  status: ActivityStatus;\n  label?: string;\n}) {\n  return (\n    <span\n      {...props}\n      {...statusAttributes(status, label)}\n      className={cn('session-belt', `session-${status}`, className)}\n    >\n      <span className=\"session-belt-sway\">\n        {PILLS.map(pill => (\n          <i key={pill} />\n        ))}\n      </span>\n    </span>\n  );\n}\n\nexport function ActivityWick({\n  status,\n  label,\n  className,\n  ...props\n}: ComponentProps<'span'> & {\n  status: ActivityStatus;\n  label?: string;\n}) {\n  return (\n    <span\n      {...props}\n      data-live-session-indicator={status}\n      role=\"status\"\n      aria-label={label ?? STATUS_TITLE[status]}\n      title={STATUS_TITLE[status]}\n      className={cn('session-wick', `session-${status}`, className)}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAOA,MAAM,QAAQ,CAAC,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC,CAAA;AAE5B,MAAM,YAAA,GAA+C;AAAA,EACnD,YAAA,EAAc,cAAA;AAAA,EACd,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,SAAS,gBAAA,CAAiB,QAAwB,KAAA,EAA2B;AAC3E,EAAA,OAAO,KAAA,GAAQ,EAAE,IAAA,EAAM,QAAA,EAAU,YAAA,EAAc,KAAA,EAAO,KAAA,EAAO,YAAA,CAAa,MAAM,CAAA,EAAE,GAAI,EAAE,eAAe,IAAA,EAAK;AAC9G;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,gBAAA,CAAiB,MAAA,EAAQ,KAAK,CAAA;AAAA,MAClC,WAAW,EAAA,CAAG,cAAA,EAAgB,CAAA,QAAA,EAAW,MAAM,IAAI,SAAS,CAAA;AAAA,MAE5D,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,qBACT,GAAA,CAAC,GAAA,EAAA,EAAA,EAAO,IAAM,CACf,CAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,6BAAA,EAA6B,MAAA;AAAA,MAC7B,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,KAAA,IAAS,YAAA,CAAa,MAAM,CAAA;AAAA,MACxC,KAAA,EAAO,aAAa,MAAM,CAAA;AAAA,MAC1B,WAAW,EAAA,CAAG,cAAA,EAAgB,CAAA,QAAA,EAAW,MAAM,IAAI,SAAS;AAAA;AAAA,GAC9D;AAEJ;;;;"}