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

package/dist/notification-activity-DTXzghFr.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Bell, ExternalLink } from 'lucide-react';
+import { g as ActivityItem } from './activity-maXCNWZp.js';
+import { m as messagePreviewShowsAll, a as messagePreview } from './message-preview-BnmthmiK.js';
+import { B as Badge } from './Badge-3-G2I_cx.js';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+
+const priorityBadgeVariants = {
+  urgent: "red",
+  high: "orange",
+  medium: "blue"
+};
+function NotificationActivity({
+  label,
+  message,
+  state = "notification",
+  icon,
+  priority,
+  status,
+  pending,
+  link,
+  defaultOpen
+}) {
+  const lineHoldsMessage = messagePreviewShowsAll(message);
+  const hasBadges = Boolean(priority || status || pending);
+  return /* @__PURE__ */ jsx(
+    ActivityItem,
+    {
+      label,
+      detail: messagePreview(message),
+      detailFont: "sans",
+      icon: icon ?? /* @__PURE__ */ jsx(Bell, { className: "text-warning-foreground", "aria-hidden": true }),
+      badges: hasBadges && /* @__PURE__ */ jsxs(Fragment, { children: [
+        priority && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: priorityBadgeVariants[priority], children: priority }),
+        status && /* @__PURE__ */ jsx(Badge, { size: "xs", children: status }),
+        pending && /* @__PURE__ */ jsxs(Badge, { size: "xs", children: [
+          pending,
+          " pending"
+        ] })
+      ] }),
+      defaultOpen,
+      "data-notification-state": state,
+      "aria-label": `Notification: ${label}`,
+      children: (!lineHoldsMessage || link) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        message && /* @__PURE__ */ jsx(Txt, { variant: "caption", className: "break-words whitespace-pre-wrap", children: message }),
+        link && /* @__PURE__ */ jsx(NotificationLink, { link, message })
+      ] })
+    }
+  );
+}
+function NotificationLink({
+  link,
+  message
+}) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: link.href,
+      target: "_blank",
+      rel: "noreferrer",
+      "aria-label": `${link.label}: ${messagePreview(message)}`,
+      className: "flex w-fit items-center gap-1 text-meta text-muted-foreground hover:text-foreground",
+      children: [
+        link.label,
+        /* @__PURE__ */ jsx(ExternalLink, { size: 12, "aria-hidden": true })
+      ]
+    }
+  );
+}
+
+export { NotificationActivity as N };
+//# sourceMappingURL=notification-activity-DTXzghFr.js.map

package/dist/notification-activity-DTXzghFr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-activity-DTXzghFr.js","sources":["../src/ds/components/ai/activity/presets/notification-activity.tsx"],"sourcesContent":["import { Bell, ExternalLink } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { ActivityItem } from '../activity';\nimport { messagePreview, messagePreviewShowsAll } from './message-preview';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface NotificationActivityProps {\n  label: string;\n  message: string;\n  state?: string;\n  icon?: ReactNode;\n  priority?: string;\n  status?: string;\n  pending?: string;\n  link?: { href: string; label: string };\n  defaultOpen?: boolean;\n}\n\nconst priorityBadgeVariants: Partial<Record<string, BadgeVariant>> = {\n  urgent: 'red',\n  high: 'orange',\n  medium: 'blue',\n};\n\nexport function NotificationActivity({\n  label,\n  message,\n  state = 'notification',\n  icon,\n  priority,\n  status,\n  pending,\n  link,\n  defaultOpen,\n}: NotificationActivityProps) {\n  const lineHoldsMessage = messagePreviewShowsAll(message);\n  const hasBadges = Boolean(priority || status || pending);\n\n  return (\n    <ActivityItem\n      label={label}\n      detail={messagePreview(message)}\n      detailFont=\"sans\"\n      icon={icon ?? <Bell className=\"text-warning-foreground\" aria-hidden />}\n      badges={\n        hasBadges && (\n          <>\n            {priority && (\n              <Badge size=\"xs\" variant={priorityBadgeVariants[priority]}>\n                {priority}\n              </Badge>\n            )}\n            {status && <Badge size=\"xs\">{status}</Badge>}\n            {pending && <Badge size=\"xs\">{pending} pending</Badge>}\n          </>\n        )\n      }\n      defaultOpen={defaultOpen}\n      data-notification-state={state}\n      aria-label={`Notification: ${label}`}\n    >\n      {(!lineHoldsMessage || link) && (\n        <div className=\"flex flex-col gap-2\">\n          {message && (\n            <Txt variant=\"caption\" className=\"break-words whitespace-pre-wrap\">\n              {message}\n            </Txt>\n          )}\n          {link && <NotificationLink link={link} message={message} />}\n        </div>\n      )}\n    </ActivityItem>\n  );\n}\n\nfunction NotificationLink({\n  link,\n  message,\n}: {\n  link: NonNullable<NotificationActivityProps['link']>;\n  message: string;\n}) {\n  return (\n    <a\n      href={link.href}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      aria-label={`${link.label}: ${messagePreview(message)}`}\n      className=\"flex w-fit items-center gap-1 text-meta text-muted-foreground hover:text-foreground\"\n    >\n      {link.label}\n      <ExternalLink size={12} aria-hidden />\n    </a>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,qBAAA,GAA+D;AAAA,EACnE,MAAA,EAAQ,KAAA;AAAA,EACR,IAAA,EAAM,QAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAA;AAEO,SAAS,oBAAA,CAAqB;AAAA,EACnC,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,cAAA;AAAA,EACR,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAA8B;AAC5B,EAAA,MAAM,gBAAA,GAAmB,uBAAuB,OAAO,CAAA;AACvD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,QAAA,IAAY,MAAA,IAAU,OAAO,CAAA;AAEvD,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA,EAAQ,eAAe,OAAO,CAAA;AAAA,MAC9B,UAAA,EAAW,MAAA;AAAA,MACX,MAAM,IAAA,oBAAQ,GAAA,CAAC,QAAK,SAAA,EAAU,yBAAA,EAA0B,eAAW,IAAA,EAAC,CAAA;AAAA,MACpE,MAAA,EACE,6BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,oBACC,GAAA,CAAC,SAAM,IAAA,EAAK,IAAA,EAAK,SAAS,qBAAA,CAAsB,QAAQ,GACrD,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,QAED,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,MAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACnC,OAAA,oBAAW,IAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,UAAQ;AAAA,SAAA,EAAQ;AAAA,OAAA,EAChD,CAAA;AAAA,MAGJ,WAAA;AAAA,MACA,yBAAA,EAAyB,KAAA;AAAA,MACzB,YAAA,EAAY,iBAAiB,KAAK,CAAA,CAAA;AAAA,MAEhC,YAAC,gBAAA,IAAoB,IAAA,qBACrB,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EACZ,QAAA,EAAA;AAAA,QAAA,OAAA,wBACE,GAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,mCAC9B,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,QAED,IAAA,oBAAQ,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAY,OAAA,EAAkB;AAAA,OAAA,EAC3D;AAAA;AAAA,GAEJ;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,IAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,MAAA,EAAO,QAAA;AAAA,MACP,GAAA,EAAI,YAAA;AAAA,MACJ,cAAY,CAAA,EAAG,IAAA,CAAK,KAAK,CAAA,EAAA,EAAK,cAAA,CAAe,OAAO,CAAC,CAAA,CAAA;AAAA,MACrD,SAAA,EAAU,qFAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,KAAA;AAAA,wBACN,GAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAM,EAAA,EAAI,eAAW,IAAA,EAAC;AAAA;AAAA;AAAA,GACtC;AAEJ;;;;"}

package/dist/page-header-Bf0zLkyY.js

@@ -0,0 +1,153 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './cn-coERSHz5.js';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { Children, isValidElement } from 'react';
+
+import './page-header.css';function PageHeaderAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "page-header-action",
+      className: cn("ml-auto flex min-h-control-lg shrink-0 items-center self-start", className),
+      ...props
+    }
+  );
+}
+
+function PageHeaderDescription({ children, className, isLoading, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Txt,
+    {
+      variant: "caption",
+      tone: "muted",
+      "data-slot": "page-header-description",
+      className: cn(
+        "flex max-w-140 flex-wrap gap-x-4 gap-y-1",
+        isLoading && "w-160 max-w-4/5 animate-pulse rounded-md bg-muted",
+        className
+      ),
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : children
+    }
+  );
+}
+
+function PageHeaderEyebrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "page-header-eyebrow",
+      ...props,
+      className: cn(
+        "text-caption text-muted-foreground",
+        "flex min-w-0 items-center",
+        "*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground",
+        className
+      )
+    }
+  );
+}
+
+function PageHeaderIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "page-header-icon",
+      className: cn("flex min-h-control-lg items-center self-start text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+function PageHeaderMeta({ beside = false, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "page-header-meta",
+      "data-placement": beside ? "beside" : "below",
+      ...props,
+      className: cn(
+        "text-meta text-muted-foreground",
+        "flex min-w-0 flex-wrap items-center gap-2",
+        beside && "min-h-6 shrink-0",
+        className
+      )
+    }
+  );
+}
+
+function PageHeaderTitle({ children, className, isLoading, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Txt,
+    {
+      as: "h1",
+      variant: "heading",
+      tone: "ink",
+      "data-slot": "page-header-title",
+      className: cn(
+        "flex min-w-0 items-center gap-2",
+        isLoading && "w-60 max-w-1/2 animate-pulse rounded-md bg-fill",
+        className
+      ),
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : children
+    }
+  );
+}
+
+function isSlot(child, type) {
+  return isValidElement(child) && child.type === type;
+}
+function isBesideMeta(child) {
+  return isValidElement(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);
+}
+function groupSlots(items) {
+  const eyebrows = items.filter((child) => isSlot(child, PageHeaderEyebrow));
+  const icons = items.filter((child) => isSlot(child, PageHeaderIcon));
+  const headline = [...items.filter((child) => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];
+  const actions = items.filter((child) => isSlot(child, PageHeaderAction));
+  const placed = [...eyebrows, ...icons, ...headline, ...actions];
+  const below = items.filter((child) => !placed.includes(child));
+  return { eyebrows, icons, headline, below, actions };
+}
+function PageHeaderRoot({ children, className, spacing = "default", ...props }) {
+  const items = Children.toArray(children);
+  const { eyebrows, icons, headline, below, actions } = groupSlots(items);
+  const hasControls = icons.length > 0 || actions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "relative flex w-full flex-col",
+        !hasControls && "gap-1",
+        className,
+        spacing === "breathing" && "pt-10"
+      ),
+      "data-page-header-spacing": spacing === "breathing" ? spacing : void 0,
+      ...props,
+      children: [
+        eyebrows,
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
+          icons,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            headline.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-start gap-3", hasControls && "py-1"), children: headline }),
+            below
+          ] }),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+const PageHeader = Object.assign(PageHeaderRoot, {
+  Eyebrow: PageHeaderEyebrow,
+  Icon: PageHeaderIcon,
+  Title: PageHeaderTitle,
+  Meta: PageHeaderMeta,
+  Description: PageHeaderDescription,
+  Action: PageHeaderAction
+});
+
+export { PageHeader as P };
+//# sourceMappingURL=page-header-Bf0zLkyY.js.map

package/dist/page-header-Bf0zLkyY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-Bf0zLkyY.js","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-eyebrow.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('ml-auto flex min-h-control-lg shrink-0 items-center self-start', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"page-header-description\"\n      className={cn(\n        'flex max-w-140 flex-wrap gap-x-4 gap-y-1',\n        isLoading && 'w-160 max-w-4/5 animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderEyebrowProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {\n  return (\n    <div\n      data-slot=\"page-header-eyebrow\"\n      {...props}\n      className={cn(\n        'text-caption text-muted-foreground',\n        'flex min-w-0 items-center',\n        '*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn('flex min-h-control-lg items-center self-start text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      {...props}\n      className={cn(\n        'text-meta text-muted-foreground',\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside && 'min-h-6 shrink-0',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <Txt\n      as=\"h1\"\n      variant=\"heading\"\n      tone=\"ink\"\n      data-slot=\"page-header-title\"\n      className={cn(\n        'flex min-w-0 items-center gap-2',\n        isLoading && 'w-60 max-w-1/2 animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport type { PageHeaderMetaProps } from './page-header-meta';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderRootProps = ComponentPropsWithoutRef<'header'> & {\n  spacing?: 'default' | 'breathing';\n};\n\nfunction isSlot(child: ReactNode, type: ElementType) {\n  return isValidElement(child) && child.type === type;\n}\n\nfunction isBesideMeta(child: ReactNode) {\n  return isValidElement<PageHeaderMetaProps>(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);\n}\n\nfunction groupSlots(items: ReactNode[]) {\n  const eyebrows = items.filter(child => isSlot(child, PageHeaderEyebrow));\n  const icons = items.filter(child => isSlot(child, PageHeaderIcon));\n  const headline = [...items.filter(child => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];\n  // Actions sit outside the title column so their height never affects title/meta/description alignment.\n  const actions = items.filter(child => isSlot(child, PageHeaderAction));\n  const placed = [...eyebrows, ...icons, ...headline, ...actions];\n  const below = items.filter(child => !placed.includes(child));\n  return { eyebrows, icons, headline, below, actions };\n}\n\nexport function PageHeaderRoot({ children, className, spacing = 'default', ...props }: PageHeaderRootProps) {\n  const items = Children.toArray(children);\n  const { eyebrows, icons, headline, below, actions } = groupSlots(items);\n  const hasControls = icons.length > 0 || actions.length > 0;\n\n  return (\n    <header\n      className={cn(\n        'relative flex w-full flex-col',\n        !hasControls && 'gap-1',\n        className,\n        spacing === 'breathing' && 'pt-10',\n      )}\n      data-page-header-spacing={spacing === 'breathing' ? spacing : undefined}\n      {...props}\n    >\n      {eyebrows}\n      <div className=\"flex w-full items-start gap-3\">\n        {icons}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {headline.length > 0 && (\n            <div className={cn('flex min-w-0 items-start gap-3', hasControls && 'py-1')}>{headline}</div>\n          )}\n          {below}\n        </div>\n        {actions}\n      </div>\n    </header>\n  );\n}\n","import './page-header.css';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderEyebrowProps } from './page-header-eyebrow';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Eyebrow: PageHeaderEyebrow,\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":[],"mappings":"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"}

package/dist/page-header-CLxPq7T5.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+require('./page-header.css');const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+const Txt = require('./Txt-DXjXpX9r.cjs');
+const React = require('react');
+
+function PageHeaderAction({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "page-header-action",
+      className: utils_cn.cn("ml-auto flex min-h-control-lg shrink-0 items-center self-start", className),
+      ...props
+    }
+  );
+}
+
+function PageHeaderDescription({ children, className, isLoading, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Txt.Txt,
+    {
+      variant: "caption",
+      tone: "muted",
+      "data-slot": "page-header-description",
+      className: utils_cn.cn(
+        "flex max-w-140 flex-wrap gap-x-4 gap-y-1",
+        isLoading && "w-160 max-w-4/5 animate-pulse rounded-md bg-muted",
+        className
+      ),
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : children
+    }
+  );
+}
+
+function PageHeaderEyebrow({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "page-header-eyebrow",
+      ...props,
+      className: utils_cn.cn(
+        "text-caption text-muted-foreground",
+        "flex min-w-0 items-center",
+        "*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground",
+        className
+      )
+    }
+  );
+}
+
+function PageHeaderIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "page-header-icon",
+      className: utils_cn.cn("flex min-h-control-lg items-center self-start text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+function PageHeaderMeta({ beside = false, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "page-header-meta",
+      "data-placement": beside ? "beside" : "below",
+      ...props,
+      className: utils_cn.cn(
+        "text-meta text-muted-foreground",
+        "flex min-w-0 flex-wrap items-center gap-2",
+        beside && "min-h-6 shrink-0",
+        className
+      )
+    }
+  );
+}
+
+function PageHeaderTitle({ children, className, isLoading, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Txt.Txt,
+    {
+      as: "h1",
+      variant: "heading",
+      tone: "ink",
+      "data-slot": "page-header-title",
+      className: utils_cn.cn(
+        "flex min-w-0 items-center gap-2",
+        isLoading && "w-60 max-w-1/2 animate-pulse rounded-md bg-fill",
+        className
+      ),
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : children
+    }
+  );
+}
+
+function isSlot(child, type) {
+  return React.isValidElement(child) && child.type === type;
+}
+function isBesideMeta(child) {
+  return React.isValidElement(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);
+}
+function groupSlots(items) {
+  const eyebrows = items.filter((child) => isSlot(child, PageHeaderEyebrow));
+  const icons = items.filter((child) => isSlot(child, PageHeaderIcon));
+  const headline = [...items.filter((child) => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];
+  const actions = items.filter((child) => isSlot(child, PageHeaderAction));
+  const placed = [...eyebrows, ...icons, ...headline, ...actions];
+  const below = items.filter((child) => !placed.includes(child));
+  return { eyebrows, icons, headline, below, actions };
+}
+function PageHeaderRoot({ children, className, spacing = "default", ...props }) {
+  const items = React.Children.toArray(children);
+  const { eyebrows, icons, headline, below, actions } = groupSlots(items);
+  const hasControls = icons.length > 0 || actions.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: utils_cn.cn(
+        "relative flex w-full flex-col",
+        !hasControls && "gap-1",
+        className,
+        spacing === "breathing" && "pt-10"
+      ),
+      "data-page-header-spacing": spacing === "breathing" ? spacing : void 0,
+      ...props,
+      children: [
+        eyebrows,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-3", children: [
+          icons,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            headline.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-w-0 items-start gap-3", hasControls && "py-1"), children: headline }),
+            below
+          ] }),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+const PageHeader = Object.assign(PageHeaderRoot, {
+  Eyebrow: PageHeaderEyebrow,
+  Icon: PageHeaderIcon,
+  Title: PageHeaderTitle,
+  Meta: PageHeaderMeta,
+  Description: PageHeaderDescription,
+  Action: PageHeaderAction
+});
+
+exports.PageHeader = PageHeader;
+//# sourceMappingURL=page-header-CLxPq7T5.cjs.map

package/dist/page-header-CLxPq7T5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-CLxPq7T5.cjs","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-eyebrow.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('ml-auto flex min-h-control-lg shrink-0 items-center self-start', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"page-header-description\"\n      className={cn(\n        'flex max-w-140 flex-wrap gap-x-4 gap-y-1',\n        isLoading && 'w-160 max-w-4/5 animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderEyebrowProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {\n  return (\n    <div\n      data-slot=\"page-header-eyebrow\"\n      {...props}\n      className={cn(\n        'text-caption text-muted-foreground',\n        'flex min-w-0 items-center',\n        '*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn('flex min-h-control-lg items-center self-start text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      {...props}\n      className={cn(\n        'text-meta text-muted-foreground',\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside && 'min-h-6 shrink-0',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <Txt\n      as=\"h1\"\n      variant=\"heading\"\n      tone=\"ink\"\n      data-slot=\"page-header-title\"\n      className={cn(\n        'flex min-w-0 items-center gap-2',\n        isLoading && 'w-60 max-w-1/2 animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport type { PageHeaderMetaProps } from './page-header-meta';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderRootProps = ComponentPropsWithoutRef<'header'> & {\n  spacing?: 'default' | 'breathing';\n};\n\nfunction isSlot(child: ReactNode, type: ElementType) {\n  return isValidElement(child) && child.type === type;\n}\n\nfunction isBesideMeta(child: ReactNode) {\n  return isValidElement<PageHeaderMetaProps>(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);\n}\n\nfunction groupSlots(items: ReactNode[]) {\n  const eyebrows = items.filter(child => isSlot(child, PageHeaderEyebrow));\n  const icons = items.filter(child => isSlot(child, PageHeaderIcon));\n  const headline = [...items.filter(child => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];\n  // Actions sit outside the title column so their height never affects title/meta/description alignment.\n  const actions = items.filter(child => isSlot(child, PageHeaderAction));\n  const placed = [...eyebrows, ...icons, ...headline, ...actions];\n  const below = items.filter(child => !placed.includes(child));\n  return { eyebrows, icons, headline, below, actions };\n}\n\nexport function PageHeaderRoot({ children, className, spacing = 'default', ...props }: PageHeaderRootProps) {\n  const items = Children.toArray(children);\n  const { eyebrows, icons, headline, below, actions } = groupSlots(items);\n  const hasControls = icons.length > 0 || actions.length > 0;\n\n  return (\n    <header\n      className={cn(\n        'relative flex w-full flex-col',\n        !hasControls && 'gap-1',\n        className,\n        spacing === 'breathing' && 'pt-10',\n      )}\n      data-page-header-spacing={spacing === 'breathing' ? spacing : undefined}\n      {...props}\n    >\n      {eyebrows}\n      <div className=\"flex w-full items-start gap-3\">\n        {icons}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {headline.length > 0 && (\n            <div className={cn('flex min-w-0 items-start gap-3', hasControls && 'py-1')}>{headline}</div>\n          )}\n          {below}\n        </div>\n        {actions}\n      </div>\n    </header>\n  );\n}\n","import './page-header.css';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderEyebrowProps } from './page-header-eyebrow';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Eyebrow: PageHeaderEyebrow,\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":["jsx","cn","Txt","Fragment","isValidElement","Children","jsxs"],"mappings":"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"}

package/dist/page-header.css

@@ -1,6 +1,13 @@
 @layer properties, theme, base, components, utilities;
 
 @layer components {
+  [data-page-header-spacing='breathing'] > [data-slot='page-header-eyebrow'] {
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    height: calc(var(--spacing) * 10);
+  }
+
   [data-slot='page-header-title'] > svg {
     width: var(--spacing-icon-lg);
     height: var(--spacing-icon-lg);

package/dist/plan-CneICd0O.cjs

@@ -0,0 +1,162 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Badge = require('./Badge-BF6FbLH_.cjs');
+const Button = require('./Button-BTuu6_hv.cjs');
+const collapsibleBox = require('./collapsible-box-BiKTbrqx.cjs');
+const useCollapsibleBox = require('./use-collapsible-box-BI80L4h_.cjs');
+const markdownRenderer = require('./markdown-renderer-C9pb3n-P.cjs');
+const Txt = require('./Txt-DXjXpX9r.cjs');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const hooks_useCopyToClipboard = require('./hooks/use-copy-to-clipboard.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+const PlanContext = React.createContext(null);
+const usePlanContext = () => {
+  const context = React.useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan compound components must be rendered inside <Plan>.");
+  }
+  return context;
+};
+function Plan({ children, collapsedHeight = useCollapsibleBox.DEFAULT_COLLAPSED_HEIGHT, className, ...props }) {
+  const contextValue = useCollapsibleBox.useCollapsibleBox({ collapsedHeight });
+  return /* @__PURE__ */ jsxRuntime.jsx(PlanContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "plan", className: utils_cn.cn("w-full overflow-hidden rounded-xl bg-card", className), ...props, children }) });
+}
+function PlanHeader({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "plan-header",
+      className: utils_cn.cn("flex min-h-10 items-center justify-between gap-3 px-4 pt-3", className),
+      ...props,
+      children
+    }
+  );
+}
+function PlanLabel({ children = "Plan", className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "plan-label", className: utils_cn.cn("flex min-w-0 items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", className: "text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardList, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children })
+  ] });
+}
+function PlanHeaderActions({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "plan-header-actions", className: utils_cn.cn("flex shrink-0 items-center gap-1", className), ...props, children });
+}
+function PlanStatus({ children, variant = "neutral", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { ...props, variant, size: "xs", indicator: "dot", children });
+}
+function PlanCopyButton({ content, ...props }) {
+  const { isCopied, handleCopy } = hooks_useCopyToClipboard.useCopyToClipboard({
+    text: content,
+    copiedDuration: 1500,
+    showToast: false
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      ...props,
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      tooltip: "Copy plan",
+      "aria-label": "Copy plan",
+      onClick: handleCopy,
+      children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+    }
+  );
+}
+function PlanBody({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "plan-body", className: utils_cn.cn("px-5 pt-4 pb-5", className), ...props, children });
+}
+function PlanIntro({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "plan-intro", className: utils_cn.cn("mb-5 space-y-1", className), ...props, children });
+}
+function PlanTitle({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { ...props, as: "h3", variant: "heading", tone: "ink", className, children });
+}
+const getFileName = (path) => {
+  const segments = path.split(/[\\/]/).filter(Boolean);
+  return segments[segments.length - 1] ?? path;
+};
+function PlanPath({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Txt.Txt,
+    {
+      ...props,
+      as: "p",
+      variant: "meta",
+      tone: "muted",
+      font: "mono",
+      title: children,
+      className: utils_cn.cn("max-w-full truncate overflow-hidden", className),
+      children: getFileName(children)
+    }
+  );
+}
+function PlanMain({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "plan-main", className: utils_cn.cn("relative", className), ...props, children });
+}
+function PlanContent({ children, ...props }) {
+  const state = usePlanContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(collapsibleBox.CollapsibleBox, { "data-slot": "plan-content", state, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[&_code]:bg-muted [&_h1]:text-title [&_h2]:text-heading [&_h3]:text-subheading [&_p]:text-body", children: /* @__PURE__ */ jsxRuntime.jsx(markdownRenderer.MarkdownRenderer, { className: "text-foreground", children }) }) });
+}
+function PlanFile({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "plan-file", className, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "meta", tone: "muted", className: "mb-2", children: "Plan file" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "ink", font: "mono", className: "break-all", children })
+  ] });
+}
+function PlanControls({ children, className, ...props }) {
+  const hasActions = Boolean(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "plan-controls",
+      className: utils_cn.cn("relative z-10 mt-4 flex justify-center empty:hidden", className),
+      ...props,
+      children: hasActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full max-w-sm grid-cols-[1fr_auto_1fr] items-center gap-2 px-10", children }) : /* @__PURE__ */ jsxRuntime.jsx(PlanExpandButton, {})
+    }
+  );
+}
+function PlanActionGroup({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "plan-action-group", className: utils_cn.cn("flex justify-start gap-2 empty:hidden", className), ...props, children });
+}
+function PlanExpandButton({ className, variant = "default", ...props }) {
+  const { isExpanded, isClipped, toggleExpanded } = usePlanContext();
+  if (!isClipped && !isExpanded) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      ...props,
+      className: utils_cn.cn("shrink-0 whitespace-nowrap", className),
+      type: "button",
+      variant,
+      size: "sm",
+      "aria-label": isExpanded ? "Collapse plan" : "Expand plan",
+      onClick: toggleExpanded,
+      icon: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, {}),
+      children: isExpanded ? "Collapse plan" : "Expand plan"
+    }
+  );
+}
+
+exports.Plan = Plan;
+exports.PlanActionGroup = PlanActionGroup;
+exports.PlanBody = PlanBody;
+exports.PlanContent = PlanContent;
+exports.PlanControls = PlanControls;
+exports.PlanCopyButton = PlanCopyButton;
+exports.PlanExpandButton = PlanExpandButton;
+exports.PlanFile = PlanFile;
+exports.PlanHeader = PlanHeader;
+exports.PlanHeaderActions = PlanHeaderActions;
+exports.PlanIntro = PlanIntro;
+exports.PlanLabel = PlanLabel;
+exports.PlanMain = PlanMain;
+exports.PlanPath = PlanPath;
+exports.PlanStatus = PlanStatus;
+exports.PlanTitle = PlanTitle;
+//# sourceMappingURL=plan-CneICd0O.cjs.map