@mastra/playground-ui 58.0.0 → 59.0.0-alpha.1

package/dist/components/MetricsCardGroup.es.js

@@ -9,21 +9,12 @@ const variantClasses = {
   // in light, where `background` and `card` sit only a step apart.
   inset: cn(raisedSurfaceStyle, "*:bg-background! *:shadow-rim!")
 };
-function MetricsCardGroup({
-  children,
-  variant = "default",
-  minItemWidth = "16rem",
-  className
-}) {
-  const style = {
-    "--metrics-card-group-basis": `min(100%, ${minItemWidth})`
-  };
+function MetricsCardGroup({ children, variant = "default", className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      style,
       className: cn(
-        "flex flex-wrap gap-1 rounded-xl p-1 *:min-w-0! *:flex-1 *:basis-(--metrics-card-group-basis)",
+        "grid grid-cols-1 gap-1 rounded-xl p-1 *:min-w-0! md:grid-cols-2 lg:flex lg:*:flex-1",
         variantClasses[variant],
         className
       ),

package/dist/components/MetricsCardGroup.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsCardGroup.es.js","sources":["../../src/ds/components/MetricsCardGroup/metrics-card-group.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { frameSurfaceStyle, raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardGroupVariant = 'default' | 'inset';\n\nexport type MetricsCardGroupProps = {\n  children: ReactNode;\n  /**\n   * `default` — raised cards sitting in a frame one step below them.\n   * `inset` — the DataList treatment: the group is the raised surface, and the\n   * cards are flat wells cut into it, so the frame reads as a thick border.\n   */\n  variant?: MetricsCardGroupVariant;\n  /**\n   * Base width each card grows from; a card wraps once the row can't fit it.\n   * Raise it for chart cards, which need more room than a KPI.\n   */\n  minItemWidth?: string;\n  className?: string;\n};\n\n/**\n * Like DataList, the inset group is the only element that defines a color: it\n * repaints its cards as wells, whatever card is dropped in. `!` is needed to beat\n * `Card`'s pinned `hover:`/`active:` fills.\n */\nconst variantClasses: Record<MetricsCardGroupVariant, string> = {\n  default: frameSurfaceStyle,\n  // Wells swap the card's elevation for a bare 1px `--surface-rim`: the same edge\n  // every raised surface draws, with no lift, so they stay crisp against the frame\n  // in light, where `background` and `card` sit only a step apart.\n  inset: cn(raisedSurfaceStyle, '*:bg-background! *:shadow-rim!'),\n};\n\n/**\n * A frame that holds a row of metrics cards (KPI, chart, …) as one unit.\n * Cards flex to fill each row and wrap responsively; the group owns their width,\n * so each card's own `min-w-*` is neutralised.\n */\nexport function MetricsCardGroup({\n  children,\n  variant = 'default',\n  minItemWidth = '16rem',\n  className,\n}: MetricsCardGroupProps) {\n  const style: CSSProperties & Record<'--metrics-card-group-basis', string> = {\n    '--metrics-card-group-basis': `min(100%, ${minItemWidth})`,\n  };\n\n  return (\n    <div\n      style={style}\n      // Cards grow from a shared basis and wrap, so a short last row stretches to\n      // fill instead of leaving empty columns.\n      // Outer radius = card radius (8px) + 4px inset so the corners stay concentric.\n      className={cn(\n        'flex flex-wrap gap-1 rounded-xl p-1 *:min-w-0! *:flex-1 *:basis-(--metrics-card-group-basis)',\n        variantClasses[variant],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AA2BA,MAAM,cAAA,GAA0D;AAAA,EAC9D,OAAA,EAAS,iBAAA;AAAA;AAAA;AAAA;AAAA,EAIT,KAAA,EAAO,EAAA,CAAG,kBAAA,EAAoB,gCAAgC;AAChE,CAAA;AAOO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,YAAA,GAAe,OAAA;AAAA,EACf;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,KAAA,GAAsE;AAAA,IAC1E,4BAAA,EAA8B,aAAa,YAAY,CAAA,CAAA;AAAA,GACzD;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MAIA,SAAA,EAAW,EAAA;AAAA,QACT,8FAAA;AAAA,QACA,eAAe,OAAO,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"MetricsCardGroup.es.js","sources":["../../src/ds/components/MetricsCardGroup/metrics-card-group.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { frameSurfaceStyle, raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardGroupVariant = 'default' | 'inset';\n\nexport type MetricsCardGroupProps = {\n  children: ReactNode;\n  /**\n   * `default` — raised cards sitting in a frame one step below them.\n   * `inset` — the DataList treatment: the group is the raised surface, and the\n   * cards are flat wells cut into it, so the frame reads as a thick border.\n   */\n  variant?: MetricsCardGroupVariant;\n  className?: string;\n};\n\n/**\n * Like DataList, the inset group is the only element that defines a color: it\n * repaints its cards as wells, whatever card is dropped in. `!` is needed to beat\n * `Card`'s pinned `hover:`/`active:` fills.\n */\nconst variantClasses: Record<MetricsCardGroupVariant, string> = {\n  default: frameSurfaceStyle,\n  // Wells swap the card's elevation for a bare 1px `--surface-rim`: the same edge\n  // every raised surface draws, with no lift, so they stay crisp against the frame\n  // in light, where `background` and `card` sit only a step apart.\n  inset: cn(raisedSurfaceStyle, '*:bg-background! *:shadow-rim!'),\n};\n\n/**\n * A frame that holds a row of metrics cards (KPI, chart, …) as one unit.\n * One column below `md`, two below `lg`, then every card on a single row with\n * equal widths. The group owns their width, so each card's own `min-w-*` is neutralised.\n */\nexport function MetricsCardGroup({ children, variant = 'default', className }: MetricsCardGroupProps) {\n  return (\n    <div\n      // Outer radius = card radius (8px) + 4px inset so the corners stay concentric.\n      className={cn(\n        'grid grid-cols-1 gap-1 rounded-xl p-1 *:min-w-0! md:grid-cols-2 lg:flex lg:*:flex-1',\n        variantClasses[variant],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAsBA,MAAM,cAAA,GAA0D;AAAA,EAC9D,OAAA,EAAS,iBAAA;AAAA;AAAA;AAAA;AAAA,EAIT,KAAA,EAAO,EAAA,CAAG,kBAAA,EAAoB,gCAAgC;AAChE,CAAA;AAOO,SAAS,iBAAiB,EAAE,QAAA,EAAU,OAAA,GAAU,SAAA,EAAW,WAAU,EAA0B;AACpG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,SAAA,EAAW,EAAA;AAAA,QACT,qFAAA;AAAA,QACA,eAAe,OAAO,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/MetricsKpiCard.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const metricsKpiCard = require('../metrics-kpi-card-Bhb4R4z0.cjs');
+const metricsKpiCard = require('../metrics-kpi-card-DoIeHfv6.cjs');
 
 
 

package/dist/components/MetricsKpiCard.es.js

@@ -1,2 +1,2 @@
-export { M as MetricsKpiCard } from '../metrics-kpi-card-BrnFhFQm.js';
+export { M as MetricsKpiCard } from '../metrics-kpi-card-BVCuXeDa.js';
 //# sourceMappingURL=MetricsKpiCard.es.js.map

package/dist/components/MetricsLineChart.cjs.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const metricsLineChart = require('../metrics-line-chart-0FR3SYSt.cjs');
+const metricsLineChart = require('../metrics-line-chart-BNNRRxM8.cjs');
 
 
 
 exports.MetricsLineChart = metricsLineChart.MetricsLineChart;
+exports.MetricsLineChartLegend = metricsLineChart.MetricsLineChartLegend;
 exports.MetricsLineChartTooltip = metricsLineChart.MetricsLineChartTooltip;
 //# sourceMappingURL=MetricsLineChart.cjs.js.map

package/dist/components/MetricsLineChart.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsLineChart.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"MetricsLineChart.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/MetricsLineChart.es.js

@@ -1,2 +1,2 @@
-export { M as MetricsLineChart, a as MetricsLineChartTooltip } from '../metrics-line-chart-knlgw8bV.js';
+export { M as MetricsLineChart, a as MetricsLineChartLegend, b as MetricsLineChartTooltip } from '../metrics-line-chart-CT_pqJtC.js';
 //# sourceMappingURL=MetricsLineChart.es.js.map

package/dist/components/PageHeader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../page-header-Dk3s3XtC.cjs');
+const pageHeader = require('../page-header-CqvBk1wE.cjs');
 
 
 

package/dist/components/PageHeader.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../page-header-CyXAezlZ.js';
+export { P as PageHeader } from '../page-header-BGyZw13s.js';
 //# sourceMappingURL=PageHeader.es.js.map

package/dist/components/PageLayout.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Header = require('../Header-CGjhJ0nQ.cjs');
+const Header = require('../Header-y51Sfo3G.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function PageLayout({

package/dist/components/PageLayout.es.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { H as Header } from '../Header-BVnFQlzE.js';
+import { H as Header } from '../Header-hTHhO02b.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 
 function PageLayout({

package/dist/components/PropertyFilter.cjs.js

@@ -7,7 +7,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const Button = require('../Button-BAMnPqos.cjs');
-const combobox = require('../combobox-BoSB-muq.cjs');
+const combobox = require('../combobox-B19HJqE-.cjs');
 const popover = require('../popover-lBqKiPtp.cjs');
 const primitives_fluidMenu = require('../primitives/fluid-menu.cjs.js');
 const primitives_menuItem = require('../primitives/menu-item.cjs.js');

package/dist/components/PropertyFilter.es.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, X, ListFilterPlus, ChevronRightIcon } from 'lucide-react';
 import { useMemo, useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import { B as Button } from '../Button-B8nF87ai.js';
-import { C as Combobox } from '../combobox-Cd0JPUQW.js';
+import { C as Combobox } from '../combobox-D_kmwSKS.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-Dg70UGyn.js';
 import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from '../primitives/fluid-menu.es.js';
 import { MENU_SIDE_OFFSET, menuItemTrailingIconClass, menuEmptyClass, menuItemClass } from '../primitives/menu-item.es.js';

package/dist/components/RelativeTimestamp.cjs.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Badge = require('../Badge-DFNxcz-r.cjs');
+const tooltip = require('../tooltip-FvWL16Xn.cjs');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+const utils_dateFormat = require('../utils/date-format.cjs.js');
+const utils_relativeTime = require('../utils/relative-time.cjs.js');
+
+const listeners = /* @__PURE__ */ new Set();
+let ticker;
+let now = Date.now();
+function subscribe(listener) {
+  listeners.add(listener);
+  if (!ticker) {
+    now = Date.now();
+    ticker = setInterval(() => {
+      now = Date.now();
+      listeners.forEach((notify) => notify());
+    }, 1e3);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      clearInterval(ticker);
+      ticker = void 0;
+    }
+  };
+}
+function useNow() {
+  const read = () => ticker ? now : Date.now();
+  return React.useSyncExternalStore(subscribe, read, read);
+}
+const SINCE_UNITS = [
+  ["day", 864e5],
+  ["hour", 36e5],
+  ["minute", 6e4],
+  ["second", 1e3]
+];
+function formatUnit(count, unit) {
+  return new Intl.NumberFormat(void 0, { style: "unit", unit, unitDisplay: "long" }).format(count);
+}
+function formatSince(date, at) {
+  const diff = at - date.getTime();
+  let rest = Math.abs(diff);
+  const parts = [];
+  for (const [unit, size] of SINCE_UNITS) {
+    const count = Math.floor(rest / size);
+    rest %= size;
+    if (parts.length > 0) {
+      if (count > 0) parts.push(formatUnit(count, unit));
+      break;
+    }
+    if (count > 0 || unit === "second") parts.push(formatUnit(count, unit));
+  }
+  const label = parts.join(" ");
+  return diff < 0 ? `${label} from now` : `${label} ago`;
+}
+function Relative({ date }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: utils_relativeTime.formatRelativeTime(date, { now: useNow() }) });
+}
+function Since({ date }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formatSince(date, useNow()) });
+}
+function zoneName(date, timeZone) {
+  return new Intl.DateTimeFormat(void 0, { timeZone, timeZoneName: "short" }).formatToParts(date).find((part) => part.type === "timeZoneName")?.value;
+}
+function zoneRow(date, timeZone) {
+  return {
+    zone: zoneName(date, timeZone) ?? "Local",
+    day: new Intl.DateTimeFormat(void 0, { timeZone, month: "short", day: "numeric", year: "numeric" }).format(date),
+    time: new Intl.DateTimeFormat(void 0, {
+      timeZone,
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit"
+    }).format(date)
+  };
+}
+function RelativeTimestamp({ value, className }) {
+  const date = utils_dateFormat.toDate(value);
+  if (!date) return null;
+  const local = zoneRow(date);
+  const rows = local.zone === "UTC" ? [local] : [local, zoneRow(date, "UTC")];
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      tooltip.TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsx(
+          "time",
+          {
+            dateTime: date.toISOString(),
+            tabIndex: 0,
+            className: utils_cn.cn("rounded-sm font-mono whitespace-nowrap tabular-nums", primitives_transitions.focusRing.visible, className)
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Relative, { date }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: utils_dateFormat.formatDate(date, "date-time-seconds") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Since, { date }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("table", { className: "mt-1.5 border-t border-border font-mono tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pt-1.5 pr-3", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", children: row.zone }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pt-1.5 pr-3", children: row.day }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pt-1.5 text-right", children: row.time })
+      ] }, row.zone)) }) })
+    ] })
+  ] });
+}
+
+exports.RelativeTimestamp = RelativeTimestamp;
+//# sourceMappingURL=RelativeTimestamp.cjs.js.map

package/dist/components/RelativeTimestamp.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTimestamp.cjs.js","sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { useSyncExternalStore } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n  value: DateInput;\n  className?: string;\n}\n\nconst listeners = new Set<() => void>();\nlet ticker: ReturnType<typeof setInterval> | undefined;\nlet now = Date.now();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  if (!ticker) {\n    now = Date.now();\n    ticker = setInterval(() => {\n      now = Date.now();\n      listeners.forEach(notify => notify());\n    }, 1000);\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0) {\n      clearInterval(ticker);\n      ticker = undefined;\n    }\n  };\n}\n\nfunction useNow() {\n  const read = () => (ticker ? now : Date.now());\n  return useSyncExternalStore(subscribe, read, read);\n}\n\nconst SINCE_UNITS = [\n  ['day', 86_400_000],\n  ['hour', 3_600_000],\n  ['minute', 60_000],\n  ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n  return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n  const diff = at - date.getTime();\n  let rest = Math.abs(diff);\n  const parts: string[] = [];\n  for (const [unit, size] of SINCE_UNITS) {\n    const count = Math.floor(rest / size);\n    rest %= size;\n    if (parts.length > 0) {\n      if (count > 0) parts.push(formatUnit(count, unit));\n      break;\n    }\n    if (count > 0 || unit === 'second') parts.push(formatUnit(count, unit));\n  }\n  const label = parts.join(' ');\n  return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n  return <>{formatRelativeTime(date, { now: useNow() })}</>;\n}\n\nfunction Since({ date }: { date: Date }) {\n  return <>{formatSince(date, useNow())}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n  return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n    .formatToParts(date)\n    .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n  return {\n    zone: zoneName(date, timeZone) ?? 'Local',\n    day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n    time: new Intl.DateTimeFormat(undefined, {\n      timeZone,\n      hour: 'numeric',\n      minute: '2-digit',\n      second: '2-digit',\n    }).format(date),\n  };\n}\n\nexport function RelativeTimestamp({ value, className }: RelativeTimestampProps) {\n  const date = toDate(value);\n  if (!date) return null;\n\n  const local = zoneRow(date);\n  const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <time\n            dateTime={date.toISOString()}\n            tabIndex={0}\n            className={cn('rounded-sm font-mono whitespace-nowrap tabular-nums', focusRing.visible, className)}\n          />\n        }\n      >\n        <span aria-hidden=\"true\">\n          <Relative date={date} />\n        </span>\n        <span className=\"sr-only\">{formatDate(date, 'date-time-seconds')}</span>\n      </TooltipTrigger>\n      <TooltipContent>\n        <span className=\"text-muted-foreground\">\n          <Since date={date} />\n        </span>\n        <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n          <tbody>\n            {rows.map(row => (\n              <tr key={row.zone}>\n                <td className=\"pt-1.5 pr-3\">\n                  <Badge size=\"xs\">{row.zone}</Badge>\n                </td>\n                <td className=\"pt-1.5 pr-3\">{row.day}</td>\n                <td className=\"pt-1.5 text-right\">{row.time}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["useSyncExternalStore","jsx","Fragment","toDate","Tooltip","jsxs","TooltipTrigger","cn","focusRing","formatDate","TooltipContent","Badge"],"mappings":"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"}

package/dist/components/RelativeTimestamp.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/RelativeTimestamp/index'
+export {}

package/dist/components/RelativeTimestamp.es.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useSyncExternalStore } from 'react';
+import { B as Badge } from '../Badge-Bzn8Z-_I.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-BrDiP0RI.js';
+import { focusRing } from '../primitives/transitions.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
+import { toDate, formatDate } from '../utils/date-format.es.js';
+import { formatRelativeTime } from '../utils/relative-time.es.js';
+
+const listeners = /* @__PURE__ */ new Set();
+let ticker;
+let now = Date.now();
+function subscribe(listener) {
+  listeners.add(listener);
+  if (!ticker) {
+    now = Date.now();
+    ticker = setInterval(() => {
+      now = Date.now();
+      listeners.forEach((notify) => notify());
+    }, 1e3);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      clearInterval(ticker);
+      ticker = void 0;
+    }
+  };
+}
+function useNow() {
+  const read = () => ticker ? now : Date.now();
+  return useSyncExternalStore(subscribe, read, read);
+}
+const SINCE_UNITS = [
+  ["day", 864e5],
+  ["hour", 36e5],
+  ["minute", 6e4],
+  ["second", 1e3]
+];
+function formatUnit(count, unit) {
+  return new Intl.NumberFormat(void 0, { style: "unit", unit, unitDisplay: "long" }).format(count);
+}
+function formatSince(date, at) {
+  const diff = at - date.getTime();
+  let rest = Math.abs(diff);
+  const parts = [];
+  for (const [unit, size] of SINCE_UNITS) {
+    const count = Math.floor(rest / size);
+    rest %= size;
+    if (parts.length > 0) {
+      if (count > 0) parts.push(formatUnit(count, unit));
+      break;
+    }
+    if (count > 0 || unit === "second") parts.push(formatUnit(count, unit));
+  }
+  const label = parts.join(" ");
+  return diff < 0 ? `${label} from now` : `${label} ago`;
+}
+function Relative({ date }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: formatRelativeTime(date, { now: useNow() }) });
+}
+function Since({ date }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: formatSince(date, useNow()) });
+}
+function zoneName(date, timeZone) {
+  return new Intl.DateTimeFormat(void 0, { timeZone, timeZoneName: "short" }).formatToParts(date).find((part) => part.type === "timeZoneName")?.value;
+}
+function zoneRow(date, timeZone) {
+  return {
+    zone: zoneName(date, timeZone) ?? "Local",
+    day: new Intl.DateTimeFormat(void 0, { timeZone, month: "short", day: "numeric", year: "numeric" }).format(date),
+    time: new Intl.DateTimeFormat(void 0, {
+      timeZone,
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit"
+    }).format(date)
+  };
+}
+function RelativeTimestamp({ value, className }) {
+  const date = toDate(value);
+  if (!date) return null;
+  const local = zoneRow(date);
+  const rows = local.zone === "UTC" ? [local] : [local, zoneRow(date, "UTC")];
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxs(
+      TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          "time",
+          {
+            dateTime: date.toISOString(),
+            tabIndex: 0,
+            className: cn("rounded-sm font-mono whitespace-nowrap tabular-nums", focusRing.visible, className)
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Relative, { date }) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: formatDate(date, "date-time-seconds") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(TooltipContent, { children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Since, { date }) }),
+      /* @__PURE__ */ jsx("table", { className: "mt-1.5 border-t border-border font-mono tabular-nums", children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: "pt-1.5 pr-3", children: /* @__PURE__ */ jsx(Badge, { size: "xs", children: row.zone }) }),
+        /* @__PURE__ */ jsx("td", { className: "pt-1.5 pr-3", children: row.day }),
+        /* @__PURE__ */ jsx("td", { className: "pt-1.5 text-right", children: row.time })
+      ] }, row.zone)) }) })
+    ] })
+  ] });
+}
+
+export { RelativeTimestamp };
+//# sourceMappingURL=RelativeTimestamp.es.js.map

package/dist/components/RelativeTimestamp.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTimestamp.es.js","sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { useSyncExternalStore } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n  value: DateInput;\n  className?: string;\n}\n\nconst listeners = new Set<() => void>();\nlet ticker: ReturnType<typeof setInterval> | undefined;\nlet now = Date.now();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  if (!ticker) {\n    now = Date.now();\n    ticker = setInterval(() => {\n      now = Date.now();\n      listeners.forEach(notify => notify());\n    }, 1000);\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0) {\n      clearInterval(ticker);\n      ticker = undefined;\n    }\n  };\n}\n\nfunction useNow() {\n  const read = () => (ticker ? now : Date.now());\n  return useSyncExternalStore(subscribe, read, read);\n}\n\nconst SINCE_UNITS = [\n  ['day', 86_400_000],\n  ['hour', 3_600_000],\n  ['minute', 60_000],\n  ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n  return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n  const diff = at - date.getTime();\n  let rest = Math.abs(diff);\n  const parts: string[] = [];\n  for (const [unit, size] of SINCE_UNITS) {\n    const count = Math.floor(rest / size);\n    rest %= size;\n    if (parts.length > 0) {\n      if (count > 0) parts.push(formatUnit(count, unit));\n      break;\n    }\n    if (count > 0 || unit === 'second') parts.push(formatUnit(count, unit));\n  }\n  const label = parts.join(' ');\n  return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n  return <>{formatRelativeTime(date, { now: useNow() })}</>;\n}\n\nfunction Since({ date }: { date: Date }) {\n  return <>{formatSince(date, useNow())}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n  return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n    .formatToParts(date)\n    .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n  return {\n    zone: zoneName(date, timeZone) ?? 'Local',\n    day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n    time: new Intl.DateTimeFormat(undefined, {\n      timeZone,\n      hour: 'numeric',\n      minute: '2-digit',\n      second: '2-digit',\n    }).format(date),\n  };\n}\n\nexport function RelativeTimestamp({ value, className }: RelativeTimestampProps) {\n  const date = toDate(value);\n  if (!date) return null;\n\n  const local = zoneRow(date);\n  const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <time\n            dateTime={date.toISOString()}\n            tabIndex={0}\n            className={cn('rounded-sm font-mono whitespace-nowrap tabular-nums', focusRing.visible, className)}\n          />\n        }\n      >\n        <span aria-hidden=\"true\">\n          <Relative date={date} />\n        </span>\n        <span className=\"sr-only\">{formatDate(date, 'date-time-seconds')}</span>\n      </TooltipTrigger>\n      <TooltipContent>\n        <span className=\"text-muted-foreground\">\n          <Since date={date} />\n        </span>\n        <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n          <tbody>\n            {rows.map(row => (\n              <tr key={row.zone}>\n                <td className=\"pt-1.5 pr-3\">\n                  <Badge size=\"xs\">{row.zone}</Badge>\n                </td>\n                <td className=\"pt-1.5 pr-3\">{row.day}</td>\n                <td className=\"pt-1.5 text-right\">{row.time}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Section.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const section = require('../section-CTihfzmc.cjs');
+const section = require('../section-p9vCSmPq.cjs');
 
 
 

package/dist/components/Section.es.js

@@ -1,2 +1,2 @@
-export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-B9OLuEq3.js';
+export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-Bi0g7cn6.js';
 //# sourceMappingURL=Section.es.js.map

package/dist/components/SettingsRow.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const settingsRow = require('../settings-row-BoAuUUuH.cjs');
+const settingsRow = require('../settings-row-Cr8gaO5a.cjs');
 
 function SettingsRow({ variant, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(settingsRow.SettingsRowLayout, { ...props, layout: variant === "factory" ? "factory" : "standalone" });

package/dist/components/SettingsRow.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { S as SettingsRowLayout } from '../settings-row-B2IekRyH.js';
+import { S as SettingsRowLayout } from '../settings-row-Cr9DsBSX.js';
 
 function SettingsRow({ variant, ...props }) {
   return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: variant === "factory" ? "factory" : "standalone" });

package/dist/components/SideDialog.cjs.js

@@ -14,7 +14,7 @@ const React = require('react');
 const Button = require('../Button-BAMnPqos.cjs');
 const buttonsGroup = require('../buttons-group-CoZP3lJt.cjs');
 const copyButton = require('../copy-button-D2MTGxq_.cjs');
-const section = require('../section-CTihfzmc.cjs');
+const section = require('../section-p9vCSmPq.cjs');
 const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
 const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
 const drawer = require('../drawer-DpldATv1.cjs');

package/dist/components/SideDialog.es.js

@@ -11,7 +11,7 @@ import { useState, useMemo } from 'react';
 import { B as Button } from '../Button-B8nF87ai.js';
 import { B as ButtonsGroup } from '../buttons-group-DsZgrZBZ.js';
 import { C as CopyButton } from '../copy-button-DcZ1mdw4.js';
-import { S as Section } from '../section-B9OLuEq3.js';
+import { S as Section } from '../section-Bi0g7cn6.js';
 import { u as useTheme } from '../theme-provider-CQKmlkHX.js';
 import { raisedSurfaceStyle } from '../primitives/raised-surface.es.js';
 import { j as DrawerInteractive, D as Drawer, l as DrawerPortal, a as DrawerBackdrop, q as DrawerViewport, k as DrawerPopup, o as DrawerTitle, e as DrawerDescription, c as DrawerClose } from '../drawer-DZnqDb9H.js';

package/dist/components/StatusIndicators.cjs.js

@@ -4,41 +4,47 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
-const Txt = require('../Txt-B4-2nLaI.cjs');
 const React = require('react');
 const popover = require('../popover-lBqKiPtp.cjs');
 const tooltip = require('../tooltip-FvWL16Xn.cjs');
 
+const deployStates = {
+  ready: { label: "Ready", tone: "success" },
+  building: { label: "Building", tone: "progress" },
+  idle: { label: "Idle", tone: "neutral", glyph: "ring" },
+  queued: { label: "Queued", tone: "neutral", glyph: "ring" },
+  stopped: { label: "Stopped", tone: "neutral" },
+  error: { label: "Error", tone: "error" }
+};
 const TONE_FILL = {
   success: "bg-notice-success",
   progress: "bg-notice-warning",
   error: "bg-notice-destructive",
-  idle: "bg-notice-info",
   neutral: "bg-muted-foreground"
 };
-const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
-const GLYPH_CLASS = {
-  circle: "rounded-full",
-  square: "rounded-xs",
-  dashed: "border-muted-foreground rounded-full border border-dashed bg-transparent"
+const TONE_RING = {
+  success: "border-notice-success",
+  progress: "border-notice-warning",
+  error: "border-notice-destructive",
+  neutral: "border-muted-foreground"
 };
+const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
 function statusToneFill(tone) {
   return TONE_FILL[tone];
 }
-function statusDotClass({ tone, glyph = "circle" }, className) {
+function statusDotClass({ tone, glyph = "filled" }, className) {
   return utils_cn.cn(
-    "inline-block size-2 shrink-0",
-    TONE_FILL[tone],
+    "inline-block size-2 shrink-0 rounded-full",
+    glyph === "ring" ? utils_cn.cn("border bg-transparent", TONE_RING[tone]) : TONE_FILL[tone],
     tone === "progress" && PROGRESS_DECORATION,
-    GLYPH_CLASS[glyph],
     className
   );
 }
 
-function Status({ presentation, children, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_cn.cn("inline-flex items-center gap-2 text-foreground", className), ...props, children: [
+function Status({ presentation, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_cn.cn("inline-flex items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusDotClass(presentation), "aria-hidden": true }),
-    children ?? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", children: presentation.label })
+    presentation.label
   ] });
 }
 
@@ -139,6 +145,7 @@ function StatusDot({
 
 exports.Status = Status;
 exports.StatusDot = StatusDot;
+exports.deployStates = deployStates;
 exports.statusDotClass = statusDotClass;
 exports.statusToneFill = statusToneFill;
 //# sourceMappingURL=StatusIndicators.cjs.js.map

package/dist/components/StatusIndicators.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicators.cjs.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'idle' | 'neutral';\nexport type StatusDotGlyph = 'circle' | 'square' | 'dashed';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  idle: 'bg-notice-info',\n  neutral: 'bg-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nconst GLYPH_CLASS: Record<StatusDotGlyph, string> = {\n  circle: 'rounded-full',\n  square: 'rounded-xs',\n  dashed: 'border-muted-foreground rounded-full border border-dashed bg-transparent',\n};\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'circle' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0',\n    TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    GLYPH_CLASS[glyph],\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n  children?: ReactNode;\n};\n\nexport function Status({ presentation, children, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2 text-foreground', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {children ?? (\n        <Txt as=\"span\" variant=\"meta\">\n          {presentation.label}\n        </Txt>\n      )}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["cn","jsxs","jsx","Txt","useState","useRef","useEffect","Popover","PopoverTrigger","PopoverContent","presented","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"StatusIndicators.cjs.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-notice-success',\n  progress: 'border-notice-warning',\n  error: 'border-notice-destructive',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["cn","jsxs","jsx","useState","useRef","useEffect","Popover","PopoverTrigger","PopoverContent","presented","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}