@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/primitives/chart-frame.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-frame.cjs.js","names":["CHART_LABEL_COLOR","pickTimeTicks","XAxis","ChartTimeTick","chartYTickCount","niceYTicks","YAxis"],"sources":["../../src/ds/primitives/chart-frame.tsx"],"sourcesContent":["import { XAxis, YAxis } from 'recharts';\nimport { chartYTickCount, niceYTicks, pickTimeTicks } from './chart-axes';\nimport type { ChartSize, ChartXLabels } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout';\nimport { ChartTimeTick } from './chart-time-tick';\nimport type { ChartTimeTickProps } from './chart-time-tick';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\n/** A chart's height: pixels, or `fill` to grow with its parent (a flex column, e.g. a card). */\nexport type ChartHeight = number | 'fill';\n\nexport const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\nexport const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };\n\n/** The x-axis of a time series: labels from `xKey`, placed on clock times from `timestampKey`. */\nexport function timeXAxis({\n  data,\n  xKey,\n  timestampKey,\n  xLabels,\n  plotWidth,\n}: {\n  data: Record<string, unknown>[];\n  xKey: string;\n  timestampKey: string;\n  xLabels: ChartXLabels;\n  plotWidth: number;\n}) {\n  const labels = data.map(row => String(row[xKey] ?? ''));\n  const timestamps = data.map(row => {\n    const t = row[timestampKey];\n    return typeof t === 'number' ? t : undefined;\n  });\n  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);\n  return (\n    <XAxis\n      dataKey={xKey}\n      height={X_AXIS_HEIGHT}\n      tick={(props: Omit<ChartTimeTickProps, 'picked' | 'count' | 'plotWidth'>) => (\n        <ChartTimeTick {...props} picked={picked} count={data.length} plotWidth={plotWidth} />\n      )}\n      tickLine={false}\n      axisLine={false}\n      tickMargin={6}\n      // Render every tick slot; ChartTimeTick decides which ones print a label.\n      interval={0}\n    />\n  );\n}\n\n/**\n * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the\n * labels line up with the card's content; this only sizes the plot for spacing the x labels.\n */\nexport const Y_AXIS_WIDTH = 44;\n\nexport function valueYAxis({\n  id = 0,\n  show,\n  size,\n  formatter,\n  domain,\n  max,\n  integer = false,\n  right = false,\n}: {\n  id?: string | number;\n  show: boolean;\n  size: ChartSize;\n  formatter: (value: number) => string;\n  /** Fixed range; Recharts spaces the ticks in it. */\n  domain?: [number, number];\n  /** Largest value plotted on this axis (a stack's total for stacked bars); the ticks round up from it. */\n  max?: number;\n  /** Whole-number data (counts): ticks on whole numbers. */\n  integer?: boolean;\n  right?: boolean;\n}) {\n  const tickCount = chartYTickCount(size.height);\n  // Recharts rounds its step up to fit the tick count, so a $4.40 peak got an $8 axis.\n  const ticks = domain || max === undefined ? undefined : niceYTicks(max, tickCount, integer);\n  // A fixed `domain` gets Recharts' own in-between ticks, which only it knows; it measures those.\n  const labels = ticks?.map(formatter);\n  return (\n    <YAxis\n      yAxisId={id}\n      hide={!show}\n      orientation={right ? 'right' : 'left'}\n      tick={CHART_TICK}\n      tickLine={false}\n      axisLine={false}\n      width={yAxisWidth(show, labels)}\n      tickMargin={4}\n      tickFormatter={formatter}\n      domain={ticks ? [0, ticks.at(-1) ?? 0] : domain}\n      ticks={ticks}\n      tickCount={tickCount}\n    />\n  );\n}\n\n/**\n * The y-axis width for its tick labels, from canvas text metrics. Recharts' `width=\"auto\"` reads\n * each label's box from the DOM on every redraw, which forces a page layout per chart. A hidden\n * axis takes no room; with no known labels, Recharts measures.\n */\nfunction yAxisWidth(show: boolean, labels: string[] | undefined) {\n  if (!show) return 0;\n  if (!labels) return 'auto';\n  const widest = Math.max(0, ...labels.map(textWidth));\n  // Plus the tick margin (4) and Recharts' default tick size (6), which it counts with hidden tick lines.\n  return Math.ceil(widest + 4 + 6);\n}\n\nlet measureContext: CanvasRenderingContext2D | undefined;\nlet measureContextTried = false;\n\nfunction textWidth(text: string) {\n  if (!measureContextTried) {\n    measureContextTried = true;\n    measureContext = createMeasureContext();\n  }\n  return measureContext ? measureContext.measureText(text).width : text.length * CHART_AXIS_FONT_SIZE * 0.6;\n}\n\nfunction createMeasureContext() {\n  if (typeof document === 'undefined') return undefined;\n  const context = document.createElement('canvas').getContext('2d') ?? undefined;\n  if (context) context.font = `${CHART_AXIS_FONT_SIZE}px ${getComputedStyle(document.body).fontFamily}`;\n  return context;\n}\n\n/** The largest number under `keys` in any row; with `stacked`, the largest row total. */\nexport function dataMax(data: Record<string, unknown>[], keys: string[], stacked = false) {\n  let max = 0;\n  for (const row of data) {\n    let total = 0;\n    for (const key of keys) {\n      const v = row[key];\n      if (typeof v !== 'number' || !Number.isFinite(v)) continue;\n      if (stacked) total += v;\n      else max = Math.max(max, v);\n    }\n    if (stacked) max = Math.max(max, total);\n  }\n  return max;\n}\n\n/** Whether every number under `keys` is whole (counts), so the axis keeps to whole ticks. */\nexport function isWholeData(data: Record<string, unknown>[], keys: string[]) {\n  return data.every(row =>\n    keys.every(key => {\n      const v = row[key];\n      return typeof v !== 'number' || Number.isInteger(v);\n    }),\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chart-frame.cjs.js","names":["CHART_LABEL_COLOR","pickTimeTicks","edgeDateLabels","XAxis","ChartTimeTick","chartYTickCount","niceYTicks","YAxis"],"sources":["../../src/ds/primitives/chart-frame.tsx"],"sourcesContent":["import { XAxis, YAxis } from 'recharts';\nimport { chartYTickCount, edgeDateLabels, niceYTicks, pickTimeTicks } from './chart-axes';\nimport type { ChartSize, ChartXLabels } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout';\nimport { ChartTimeTick } from './chart-time-tick';\nimport type { ChartTimeTickProps } from './chart-time-tick';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\n/** A chart's height: pixels, or `fill` to grow with its parent (a flex column, e.g. a card). */\nexport type ChartHeight = number | 'fill';\n\nexport const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\nexport const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };\n\n/** The x-axis of a time series: labels from `xKey`, placed on clock times from `timestampKey`. */\nexport function timeXAxis({\n  data,\n  xKey,\n  timestampKey,\n  xLabels,\n  plotWidth,\n}: {\n  data: Record<string, unknown>[];\n  xKey: string;\n  timestampKey: string;\n  xLabels: ChartXLabels;\n  plotWidth: number;\n}) {\n  const labels = data.map(row => String(row[xKey] ?? ''));\n  const timestamps = data.map(row => {\n    const t = row[timestampKey];\n    return typeof t === 'number' ? t : undefined;\n  });\n  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);\n  const edgeLabels = edgeDateLabels(timestamps, xLabels);\n  return (\n    <XAxis\n      dataKey={xKey}\n      height={X_AXIS_HEIGHT}\n      tick={(props: Omit<ChartTimeTickProps, 'picked' | 'labels' | 'count'>) => (\n        <ChartTimeTick {...props} picked={picked} labels={edgeLabels} count={data.length} />\n      )}\n      tickLine={false}\n      axisLine={false}\n      tickMargin={6}\n      // Render every tick slot; ChartTimeTick decides which ones print a label.\n      interval={0}\n    />\n  );\n}\n\n/**\n * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the\n * labels line up with the card's content; this only estimates the plot width for how many x\n * labels fit. The labels themselves pin to the plot's real edges (Recharts' axis width).\n */\nexport const Y_AXIS_WIDTH = 44;\n\nexport function valueYAxis({\n  id = 0,\n  show,\n  size,\n  formatter,\n  domain,\n  max,\n  integer = false,\n  right = false,\n}: {\n  id?: string | number;\n  show: boolean;\n  size: ChartSize;\n  formatter: (value: number) => string;\n  /** Fixed range; Recharts spaces the ticks in it. */\n  domain?: [number, number];\n  /** Largest value plotted on this axis (a stack's total for stacked bars); the ticks round up from it. */\n  max?: number;\n  /** Whole-number data (counts): ticks on whole numbers. */\n  integer?: boolean;\n  right?: boolean;\n}) {\n  const tickCount = chartYTickCount(size.height);\n  // Recharts rounds its step up to fit the tick count, so a $4.40 peak got an $8 axis.\n  const ticks = domain || max === undefined ? undefined : niceYTicks(max, tickCount, integer);\n  // A fixed `domain` gets Recharts' own in-between ticks, which only it knows; it measures those.\n  const labels = ticks?.map(formatter);\n  return (\n    <YAxis\n      yAxisId={id}\n      hide={!show}\n      orientation={right ? 'right' : 'left'}\n      tick={CHART_TICK}\n      tickLine={false}\n      axisLine={false}\n      width={yAxisWidth(show, labels)}\n      tickMargin={4}\n      tickFormatter={formatter}\n      domain={ticks ? [0, ticks.at(-1) ?? 0] : domain}\n      ticks={ticks}\n      tickCount={tickCount}\n    />\n  );\n}\n\n/**\n * The y-axis width for its tick labels, from canvas text metrics. Recharts' `width=\"auto\"` reads\n * each label's box from the DOM on every redraw, which forces a page layout per chart. A hidden\n * axis takes no room; with no known labels, Recharts measures.\n */\nfunction yAxisWidth(show: boolean, labels: string[] | undefined) {\n  if (!show) return 0;\n  if (!labels) return 'auto';\n  const widest = Math.max(0, ...labels.map(textWidth));\n  // Plus the tick margin (4) and Recharts' default tick size (6), which it counts with hidden tick lines.\n  return Math.ceil(widest + 4 + 6);\n}\n\nlet measureContext: CanvasRenderingContext2D | undefined;\nlet measureContextTried = false;\n\nfunction textWidth(text: string) {\n  if (!measureContextTried) {\n    measureContextTried = true;\n    measureContext = createMeasureContext();\n  }\n  return measureContext ? measureContext.measureText(text).width : text.length * CHART_AXIS_FONT_SIZE * 0.6;\n}\n\nfunction createMeasureContext() {\n  if (typeof document === 'undefined') return undefined;\n  const context = document.createElement('canvas').getContext('2d') ?? undefined;\n  if (context) context.font = `${CHART_AXIS_FONT_SIZE}px ${getComputedStyle(document.body).fontFamily}`;\n  return context;\n}\n\n/** The largest number under `keys` in any row; with `stacked`, the largest row total. */\nexport function dataMax(data: Record<string, unknown>[], keys: string[], stacked = false) {\n  let max = 0;\n  for (const row of data) {\n    let total = 0;\n    for (const key of keys) {\n      const v = row[key];\n      if (typeof v !== 'number' || !Number.isFinite(v)) continue;\n      if (stacked) total += v;\n      else max = Math.max(max, v);\n    }\n    if (stacked) max = Math.max(max, total);\n  }\n  return max;\n}\n\n/** Whether every number under `keys` is whole (counts), so the axis keeps to whole ticks. */\nexport function isWholeData(data: Record<string, unknown>[], keys: string[]) {\n  return data.every(row =>\n    keys.every(key => {\n      const v = row[key];\n      return typeof v !== 'number' || Number.isInteger(v);\n    }),\n  );\n}\n"],"mappings":"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"}

package/dist/primitives/chart-frame.es.js

@@ -1,6 +1,6 @@
 import { CHART_LABEL_COLOR } from "../tokens.es.js";
 import "./chart-layout.es.js";
-import { chartYTickCount, niceYTicks, pickTimeTicks } from "./chart-axes.es.js";
+import { chartYTickCount, edgeDateLabels, niceYTicks, pickTimeTicks } from "./chart-axes.es.js";
 import { ChartTimeTick } from "./chart-time-tick.es.js";
 import { jsx } from "react/jsx-runtime";
 import { XAxis, YAxis } from "recharts";
@@ -21,14 +21,15 @@ function timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }) {
 		return typeof t === "number" ? t : void 0;
 	});
 	const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);
+	const edgeLabels = edgeDateLabels(timestamps, xLabels);
 	return /* @__PURE__ */ jsx(XAxis, {
 		dataKey: xKey,
 		height: 22,
 		tick: (props) => /* @__PURE__ */ jsx(ChartTimeTick, {
 			...props,
 			picked,
-			count: data.length,
-			plotWidth
+			labels: edgeLabels,
+			count: data.length
 		}),
 		tickLine: false,
 		axisLine: false,
@@ -38,7 +39,8 @@ function timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }) {
 }
 /**
 * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the
-* labels line up with the card's content; this only sizes the plot for spacing the x labels.
+* labels line up with the card's content; this only estimates the plot width for how many x
+* labels fit. The labels themselves pin to the plot's real edges (Recharts' axis width).
 */
 var Y_AXIS_WIDTH = 44;
 function valueYAxis({ id = 0, show, size, formatter, domain, max, integer = false, right = false }) {

package/dist/primitives/chart-frame.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-frame.es.js","names":[],"sources":["../../src/ds/primitives/chart-frame.tsx"],"sourcesContent":["import { XAxis, YAxis } from 'recharts';\nimport { chartYTickCount, niceYTicks, pickTimeTicks } from './chart-axes';\nimport type { ChartSize, ChartXLabels } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout';\nimport { ChartTimeTick } from './chart-time-tick';\nimport type { ChartTimeTickProps } from './chart-time-tick';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\n/** A chart's height: pixels, or `fill` to grow with its parent (a flex column, e.g. a card). */\nexport type ChartHeight = number | 'fill';\n\nexport const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\nexport const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };\n\n/** The x-axis of a time series: labels from `xKey`, placed on clock times from `timestampKey`. */\nexport function timeXAxis({\n  data,\n  xKey,\n  timestampKey,\n  xLabels,\n  plotWidth,\n}: {\n  data: Record<string, unknown>[];\n  xKey: string;\n  timestampKey: string;\n  xLabels: ChartXLabels;\n  plotWidth: number;\n}) {\n  const labels = data.map(row => String(row[xKey] ?? ''));\n  const timestamps = data.map(row => {\n    const t = row[timestampKey];\n    return typeof t === 'number' ? t : undefined;\n  });\n  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);\n  return (\n    <XAxis\n      dataKey={xKey}\n      height={X_AXIS_HEIGHT}\n      tick={(props: Omit<ChartTimeTickProps, 'picked' | 'count' | 'plotWidth'>) => (\n        <ChartTimeTick {...props} picked={picked} count={data.length} plotWidth={plotWidth} />\n      )}\n      tickLine={false}\n      axisLine={false}\n      tickMargin={6}\n      // Render every tick slot; ChartTimeTick decides which ones print a label.\n      interval={0}\n    />\n  );\n}\n\n/**\n * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the\n * labels line up with the card's content; this only sizes the plot for spacing the x labels.\n */\nexport const Y_AXIS_WIDTH = 44;\n\nexport function valueYAxis({\n  id = 0,\n  show,\n  size,\n  formatter,\n  domain,\n  max,\n  integer = false,\n  right = false,\n}: {\n  id?: string | number;\n  show: boolean;\n  size: ChartSize;\n  formatter: (value: number) => string;\n  /** Fixed range; Recharts spaces the ticks in it. */\n  domain?: [number, number];\n  /** Largest value plotted on this axis (a stack's total for stacked bars); the ticks round up from it. */\n  max?: number;\n  /** Whole-number data (counts): ticks on whole numbers. */\n  integer?: boolean;\n  right?: boolean;\n}) {\n  const tickCount = chartYTickCount(size.height);\n  // Recharts rounds its step up to fit the tick count, so a $4.40 peak got an $8 axis.\n  const ticks = domain || max === undefined ? undefined : niceYTicks(max, tickCount, integer);\n  // A fixed `domain` gets Recharts' own in-between ticks, which only it knows; it measures those.\n  const labels = ticks?.map(formatter);\n  return (\n    <YAxis\n      yAxisId={id}\n      hide={!show}\n      orientation={right ? 'right' : 'left'}\n      tick={CHART_TICK}\n      tickLine={false}\n      axisLine={false}\n      width={yAxisWidth(show, labels)}\n      tickMargin={4}\n      tickFormatter={formatter}\n      domain={ticks ? [0, ticks.at(-1) ?? 0] : domain}\n      ticks={ticks}\n      tickCount={tickCount}\n    />\n  );\n}\n\n/**\n * The y-axis width for its tick labels, from canvas text metrics. Recharts' `width=\"auto\"` reads\n * each label's box from the DOM on every redraw, which forces a page layout per chart. A hidden\n * axis takes no room; with no known labels, Recharts measures.\n */\nfunction yAxisWidth(show: boolean, labels: string[] | undefined) {\n  if (!show) return 0;\n  if (!labels) return 'auto';\n  const widest = Math.max(0, ...labels.map(textWidth));\n  // Plus the tick margin (4) and Recharts' default tick size (6), which it counts with hidden tick lines.\n  return Math.ceil(widest + 4 + 6);\n}\n\nlet measureContext: CanvasRenderingContext2D | undefined;\nlet measureContextTried = false;\n\nfunction textWidth(text: string) {\n  if (!measureContextTried) {\n    measureContextTried = true;\n    measureContext = createMeasureContext();\n  }\n  return measureContext ? measureContext.measureText(text).width : text.length * CHART_AXIS_FONT_SIZE * 0.6;\n}\n\nfunction createMeasureContext() {\n  if (typeof document === 'undefined') return undefined;\n  const context = document.createElement('canvas').getContext('2d') ?? undefined;\n  if (context) context.font = `${CHART_AXIS_FONT_SIZE}px ${getComputedStyle(document.body).fontFamily}`;\n  return context;\n}\n\n/** The largest number under `keys` in any row; with `stacked`, the largest row total. */\nexport function dataMax(data: Record<string, unknown>[], keys: string[], stacked = false) {\n  let max = 0;\n  for (const row of data) {\n    let total = 0;\n    for (const key of keys) {\n      const v = row[key];\n      if (typeof v !== 'number' || !Number.isFinite(v)) continue;\n      if (stacked) total += v;\n      else max = Math.max(max, v);\n    }\n    if (stacked) max = Math.max(max, total);\n  }\n  return max;\n}\n\n/** Whether every number under `keys` is whole (counts), so the axis keeps to whole ticks. */\nexport function isWholeData(data: Record<string, unknown>[], keys: string[]) {\n  return data.every(row =>\n    keys.every(key => {\n      const v = row[key];\n      return typeof v !== 'number' || Number.isInteger(v);\n    }),\n  );\n}\n"],"mappings":";;;;;;;AAWA,IAAa,gBAAgB,IAAI,KAAK,aAAa,MAAM;CAAE,UAAU;CAAW,uBAAuB;AAAE,CAAC;AAE1G,IAAa,aAAa;CAAE,UAAA;CAAgC,MAAM;AAAkB;;AAGpF,SAAgB,UAAU,EACxB,MACA,MACA,cACA,SACA,aAOC;CACD,MAAM,SAAS,KAAK,KAAI,QAAO,OAAO,IAAI,SAAS,EAAE,CAAC;CACtD,MAAM,aAAa,KAAK,KAAI,QAAO;EACjC,MAAM,IAAI,IAAI;EACd,OAAO,OAAO,MAAM,WAAW,IAAI,KAAA;CACrC,CAAC;CACD,MAAM,SAAS,cAAc,YAAY,QAAQ,WAAW,OAAO;CACnE,OACE,oBAAC,OAAD;EACE,SAAS;EACT,QAAA;EACA,OAAO,UACL,oBAAC,eAAD;GAAe,GAAI;GAAe;GAAQ,OAAO,KAAK;GAAmB;EAAY,CAAA;EAEvF,UAAU;EACV,UAAU;EACV,YAAY;EAEZ,UAAU;CACX,CAAA;AAEL;;;;;AAMA,IAAa,eAAe;AAE5B,SAAgB,WAAW,EACzB,KAAK,GACL,MACA,MACA,WACA,QACA,KACA,UAAU,OACV,QAAQ,SAaP;CACD,MAAM,YAAY,gBAAgB,KAAK,MAAM;CAE7C,MAAM,QAAQ,UAAU,QAAQ,KAAA,IAAY,KAAA,IAAY,WAAW,KAAK,WAAW,OAAO;CAE1F,MAAM,SAAS,OAAO,IAAI,SAAS;CACnC,OACE,oBAAC,OAAD;EACE,SAAS;EACT,MAAM,CAAC;EACP,aAAa,QAAQ,UAAU;EAC/B,MAAM;EACN,UAAU;EACV,UAAU;EACV,OAAO,WAAW,MAAM,MAAM;EAC9B,YAAY;EACZ,eAAe;EACf,QAAQ,QAAQ,CAAC,GAAG,MAAM,GAAG,EAAE,KAAK,CAAC,IAAI;EAClC;EACI;CACZ,CAAA;AAEL;;;;;;AAOA,SAAS,WAAW,MAAe,QAA8B;CAC/D,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,SAAS,KAAK,IAAI,GAAG,GAAG,OAAO,IAAI,SAAS,CAAC;CAEnD,OAAO,KAAK,KAAK,SAAS,IAAI,CAAC;AACjC;AAEA,IAAI;AACJ,IAAI,sBAAsB;AAE1B,SAAS,UAAU,MAAc;CAC/B,IAAI,CAAC,qBAAqB;EACxB,sBAAsB;EACtB,iBAAiB,qBAAqB;CACxC;CACA,OAAO,iBAAiB,eAAe,YAAY,IAAI,CAAC,CAAC,QAAQ,KAAK,SAAA,KAAgC;AACxG;AAEA,SAAS,uBAAuB;CAC9B,IAAI,OAAO,aAAa,aAAa,OAAO,KAAA;CAC5C,MAAM,UAAU,SAAS,cAAc,QAAQ,CAAC,CAAC,WAAW,IAAI,KAAK,KAAA;CACrE,IAAI,SAAS,QAAQ,OAAO,QAA6B,iBAAiB,SAAS,IAAI,CAAC,CAAC;CACzF,OAAO;AACT;;AAGA,SAAgB,QAAQ,MAAiC,MAAgB,UAAU,OAAO;CACxF,IAAI,MAAM;CACV,KAAK,MAAM,OAAO,MAAM;EACtB,IAAI,QAAQ;EACZ,KAAK,MAAM,OAAO,MAAM;GACtB,MAAM,IAAI,IAAI;GACd,IAAI,OAAO,MAAM,YAAY,CAAC,OAAO,SAAS,CAAC,GAAG;GAClD,IAAI,SAAS,SAAS;QACjB,MAAM,KAAK,IAAI,KAAK,CAAC;EAC5B;EACA,IAAI,SAAS,MAAM,KAAK,IAAI,KAAK,KAAK;CACxC;CACA,OAAO;AACT;;AAGA,SAAgB,YAAY,MAAiC,MAAgB;CAC3E,OAAO,KAAK,OAAM,QAChB,KAAK,OAAM,QAAO;EAChB,MAAM,IAAI,IAAI;EACd,OAAO,OAAO,MAAM,YAAY,OAAO,UAAU,CAAC;CACpD,CAAC,CACH;AACF"}
+{"version":3,"file":"chart-frame.es.js","names":[],"sources":["../../src/ds/primitives/chart-frame.tsx"],"sourcesContent":["import { XAxis, YAxis } from 'recharts';\nimport { chartYTickCount, edgeDateLabels, niceYTicks, pickTimeTicks } from './chart-axes';\nimport type { ChartSize, ChartXLabels } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout';\nimport { ChartTimeTick } from './chart-time-tick';\nimport type { ChartTimeTickProps } from './chart-time-tick';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\n/** A chart's height: pixels, or `fill` to grow with its parent (a flex column, e.g. a card). */\nexport type ChartHeight = number | 'fill';\n\nexport const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\nexport const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };\n\n/** The x-axis of a time series: labels from `xKey`, placed on clock times from `timestampKey`. */\nexport function timeXAxis({\n  data,\n  xKey,\n  timestampKey,\n  xLabels,\n  plotWidth,\n}: {\n  data: Record<string, unknown>[];\n  xKey: string;\n  timestampKey: string;\n  xLabels: ChartXLabels;\n  plotWidth: number;\n}) {\n  const labels = data.map(row => String(row[xKey] ?? ''));\n  const timestamps = data.map(row => {\n    const t = row[timestampKey];\n    return typeof t === 'number' ? t : undefined;\n  });\n  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);\n  const edgeLabels = edgeDateLabels(timestamps, xLabels);\n  return (\n    <XAxis\n      dataKey={xKey}\n      height={X_AXIS_HEIGHT}\n      tick={(props: Omit<ChartTimeTickProps, 'picked' | 'labels' | 'count'>) => (\n        <ChartTimeTick {...props} picked={picked} labels={edgeLabels} count={data.length} />\n      )}\n      tickLine={false}\n      axisLine={false}\n      tickMargin={6}\n      // Render every tick slot; ChartTimeTick decides which ones print a label.\n      interval={0}\n    />\n  );\n}\n\n/**\n * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the\n * labels line up with the card's content; this only estimates the plot width for how many x\n * labels fit. The labels themselves pin to the plot's real edges (Recharts' axis width).\n */\nexport const Y_AXIS_WIDTH = 44;\n\nexport function valueYAxis({\n  id = 0,\n  show,\n  size,\n  formatter,\n  domain,\n  max,\n  integer = false,\n  right = false,\n}: {\n  id?: string | number;\n  show: boolean;\n  size: ChartSize;\n  formatter: (value: number) => string;\n  /** Fixed range; Recharts spaces the ticks in it. */\n  domain?: [number, number];\n  /** Largest value plotted on this axis (a stack's total for stacked bars); the ticks round up from it. */\n  max?: number;\n  /** Whole-number data (counts): ticks on whole numbers. */\n  integer?: boolean;\n  right?: boolean;\n}) {\n  const tickCount = chartYTickCount(size.height);\n  // Recharts rounds its step up to fit the tick count, so a $4.40 peak got an $8 axis.\n  const ticks = domain || max === undefined ? undefined : niceYTicks(max, tickCount, integer);\n  // A fixed `domain` gets Recharts' own in-between ticks, which only it knows; it measures those.\n  const labels = ticks?.map(formatter);\n  return (\n    <YAxis\n      yAxisId={id}\n      hide={!show}\n      orientation={right ? 'right' : 'left'}\n      tick={CHART_TICK}\n      tickLine={false}\n      axisLine={false}\n      width={yAxisWidth(show, labels)}\n      tickMargin={4}\n      tickFormatter={formatter}\n      domain={ticks ? [0, ticks.at(-1) ?? 0] : domain}\n      ticks={ticks}\n      tickCount={tickCount}\n    />\n  );\n}\n\n/**\n * The y-axis width for its tick labels, from canvas text metrics. Recharts' `width=\"auto\"` reads\n * each label's box from the DOM on every redraw, which forces a page layout per chart. A hidden\n * axis takes no room; with no known labels, Recharts measures.\n */\nfunction yAxisWidth(show: boolean, labels: string[] | undefined) {\n  if (!show) return 0;\n  if (!labels) return 'auto';\n  const widest = Math.max(0, ...labels.map(textWidth));\n  // Plus the tick margin (4) and Recharts' default tick size (6), which it counts with hidden tick lines.\n  return Math.ceil(widest + 4 + 6);\n}\n\nlet measureContext: CanvasRenderingContext2D | undefined;\nlet measureContextTried = false;\n\nfunction textWidth(text: string) {\n  if (!measureContextTried) {\n    measureContextTried = true;\n    measureContext = createMeasureContext();\n  }\n  return measureContext ? measureContext.measureText(text).width : text.length * CHART_AXIS_FONT_SIZE * 0.6;\n}\n\nfunction createMeasureContext() {\n  if (typeof document === 'undefined') return undefined;\n  const context = document.createElement('canvas').getContext('2d') ?? undefined;\n  if (context) context.font = `${CHART_AXIS_FONT_SIZE}px ${getComputedStyle(document.body).fontFamily}`;\n  return context;\n}\n\n/** The largest number under `keys` in any row; with `stacked`, the largest row total. */\nexport function dataMax(data: Record<string, unknown>[], keys: string[], stacked = false) {\n  let max = 0;\n  for (const row of data) {\n    let total = 0;\n    for (const key of keys) {\n      const v = row[key];\n      if (typeof v !== 'number' || !Number.isFinite(v)) continue;\n      if (stacked) total += v;\n      else max = Math.max(max, v);\n    }\n    if (stacked) max = Math.max(max, total);\n  }\n  return max;\n}\n\n/** Whether every number under `keys` is whole (counts), so the axis keeps to whole ticks. */\nexport function isWholeData(data: Record<string, unknown>[], keys: string[]) {\n  return data.every(row =>\n    keys.every(key => {\n      const v = row[key];\n      return typeof v !== 'number' || Number.isInteger(v);\n    }),\n  );\n}\n"],"mappings":"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"}

package/dist/primitives/chart-time-tick.cjs.js

@@ -5,21 +5,25 @@ const require_primitives_chart_axes = require("./chart-axes.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/primitives/chart-time-tick.tsx
 /**
-* An x label on picked buckets only, centred on its bucket and nudged inward only as far as it
-* takes to stay inside the plot, so the chart needs no side margin.
+* An x label on picked buckets only, centred on its bucket and pinned inside the plot at its
+* edges, so the chart needs no side margin.
 */
-function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }) {
-	if (!payload || !plotWidth || !picked.has(payload.index)) return null;
-	const text = String(payload.value);
-	const half = payload.offset ?? 0;
-	const left = half > 0 ? x - half * (2 * payload.index + 1) : x - payload.index * plotWidth / Math.max(count - 1, 1);
-	const w = require_primitives_chart_axes.labelWidth(text) / 2;
-	const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);
+function ChartTimeTick({ x = 0, y = 0, width, payload, picked, labels, count }) {
+	if (!payload || !width || !picked.has(payload.index)) return null;
+	const text = labels?.get(payload.index) ?? String(payload.value);
+	const placed = require_primitives_chart_axes.placeTimeTick({
+		x,
+		index: payload.index,
+		offset: payload.offset,
+		count,
+		plotWidth: width,
+		textWidth: require_primitives_chart_axes.labelWidth(text)
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
-		x: tx,
+		x: placed.x,
 		y,
 		dy: "0.71em",
-		textAnchor: "middle",
+		textAnchor: placed.anchor,
 		fontSize: 11,
 		fill: require_tokens.CHART_LABEL_COLOR,
 		children: text

package/dist/primitives/chart-time-tick.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-time-tick.cjs.js","names":["labelWidth","CHART_LABEL_COLOR"],"sources":["../../src/ds/primitives/chart-time-tick.tsx"],"sourcesContent":["import { labelWidth } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE } from './chart-layout';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\nexport type ChartTimeTickProps = {\n  x?: number;\n  y?: number;\n  index?: number;\n  payload?: { value: string; index: number; offset?: number };\n  /** Buckets that print a label (from `pickTimeTicks`). */\n  picked: Set<number>;\n  count: number;\n  plotWidth: number;\n};\n\n/**\n * An x label on picked buckets only, centred on its bucket and nudged inward only as far as it\n * takes to stay inside the plot, so the chart needs no side margin.\n */\nexport function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }: ChartTimeTickProps) {\n  if (!payload || !plotWidth || !picked.has(payload.index)) return null;\n  const text = String(payload.value);\n  const half = payload.offset ?? 0;\n  // Bars sit in bands (label at the band's centre); lines sit on points (first at the edge).\n  const left = half > 0 ? x - half * (2 * payload.index + 1) : x - (payload.index * plotWidth) / Math.max(count - 1, 1);\n  const w = labelWidth(text) / 2;\n  const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);\n  return (\n    <text x={tx} y={y} dy=\"0.71em\" textAnchor=\"middle\" fontSize={CHART_AXIS_FONT_SIZE} fill={CHART_LABEL_COLOR}>\n      {text}\n    </text>\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,QAAQ,OAAO,aAAiC;CACrG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,KAAK,GAAG,OAAO;CACjE,MAAM,OAAO,OAAO,QAAQ,KAAK;CACjC,MAAM,OAAO,QAAQ,UAAU;CAE/B,MAAM,OAAO,OAAO,IAAI,IAAI,QAAQ,IAAI,QAAQ,QAAQ,KAAK,IAAK,QAAQ,QAAQ,YAAa,KAAK,IAAI,QAAQ,GAAG,CAAC;CACpH,MAAM,IAAIA,8BAAAA,WAAW,IAAI,IAAI;CAC7B,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,OAAO,YAAY,CAAC;CAC/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,GAAG;EAAO;EAAG,IAAG;EAAS,YAAW;EAAS,UAAA;EAAgC,MAAMC,eAAAA;EACtF,UAAA;CACG,CAAA;AAEV"}
+{"version":3,"file":"chart-time-tick.cjs.js","names":["placeTimeTick","labelWidth","CHART_LABEL_COLOR"],"sources":["../../src/ds/primitives/chart-time-tick.tsx"],"sourcesContent":["import { labelWidth, placeTimeTick } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE } from './chart-layout';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\nexport type ChartTimeTickProps = {\n  x?: number;\n  y?: number;\n  /** The axis' drawn width, which Recharts passes to every tick: the plot's real width. */\n  width?: number;\n  index?: number;\n  payload?: { value: string; index: number; offset?: number };\n  /** Buckets that print a label (from `pickTimeTicks`). */\n  picked: Set<number>;\n  /** Labels that replace the bucket's own text, by index (e.g. date-only ends). */\n  labels?: Map<number, string>;\n  count: number;\n};\n\n/**\n * An x label on picked buckets only, centred on its bucket and pinned inside the plot at its\n * edges, so the chart needs no side margin.\n */\nexport function ChartTimeTick({ x = 0, y = 0, width, payload, picked, labels, count }: ChartTimeTickProps) {\n  if (!payload || !width || !picked.has(payload.index)) return null;\n  const text = labels?.get(payload.index) ?? String(payload.value);\n  const placed = placeTimeTick({\n    x,\n    index: payload.index,\n    offset: payload.offset,\n    count,\n    plotWidth: width,\n    textWidth: labelWidth(text),\n  });\n  return (\n    <text\n      x={placed.x}\n      y={y}\n      dy=\"0.71em\"\n      textAnchor={placed.anchor}\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={CHART_LABEL_COLOR}\n    >\n      {text}\n    </text>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,cAAc,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,SAAS,QAAQ,QAAQ,SAA6B;CACzG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,IAAI,QAAQ,KAAK,GAAG,OAAO;CAC7D,MAAM,OAAO,QAAQ,IAAI,QAAQ,KAAK,KAAK,OAAO,QAAQ,KAAK;CAC/D,MAAM,SAASA,8BAAAA,cAAc;EAC3B;EACA,OAAO,QAAQ;EACf,QAAQ,QAAQ;EAChB;EACA,WAAW;EACX,WAAWC,8BAAAA,WAAW,IAAI;CAC5B,CAAC;CACD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAG,OAAO;EACP;EACH,IAAG;EACH,YAAY,OAAO;EACnB,UAAA;EACA,MAAMC,eAAAA;EAEL,UAAA;CACG,CAAA;AAEV"}

package/dist/primitives/chart-time-tick.es.js

@@ -1,24 +1,28 @@
 import { CHART_LABEL_COLOR } from "../tokens.es.js";
 import "./chart-layout.es.js";
-import { labelWidth } from "./chart-axes.es.js";
+import { labelWidth, placeTimeTick } from "./chart-axes.es.js";
 import { jsx } from "react/jsx-runtime";
 // src/ds/primitives/chart-time-tick.tsx
 /**
-* An x label on picked buckets only, centred on its bucket and nudged inward only as far as it
-* takes to stay inside the plot, so the chart needs no side margin.
+* An x label on picked buckets only, centred on its bucket and pinned inside the plot at its
+* edges, so the chart needs no side margin.
 */
-function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }) {
-	if (!payload || !plotWidth || !picked.has(payload.index)) return null;
-	const text = String(payload.value);
-	const half = payload.offset ?? 0;
-	const left = half > 0 ? x - half * (2 * payload.index + 1) : x - payload.index * plotWidth / Math.max(count - 1, 1);
-	const w = labelWidth(text) / 2;
-	const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);
+function ChartTimeTick({ x = 0, y = 0, width, payload, picked, labels, count }) {
+	if (!payload || !width || !picked.has(payload.index)) return null;
+	const text = labels?.get(payload.index) ?? String(payload.value);
+	const placed = placeTimeTick({
+		x,
+		index: payload.index,
+		offset: payload.offset,
+		count,
+		plotWidth: width,
+		textWidth: labelWidth(text)
+	});
 	return /* @__PURE__ */ jsx("text", {
-		x: tx,
+		x: placed.x,
 		y,
 		dy: "0.71em",
-		textAnchor: "middle",
+		textAnchor: placed.anchor,
 		fontSize: 11,
 		fill: CHART_LABEL_COLOR,
 		children: text

package/dist/primitives/chart-time-tick.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-time-tick.es.js","names":[],"sources":["../../src/ds/primitives/chart-time-tick.tsx"],"sourcesContent":["import { labelWidth } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE } from './chart-layout';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\nexport type ChartTimeTickProps = {\n  x?: number;\n  y?: number;\n  index?: number;\n  payload?: { value: string; index: number; offset?: number };\n  /** Buckets that print a label (from `pickTimeTicks`). */\n  picked: Set<number>;\n  count: number;\n  plotWidth: number;\n};\n\n/**\n * An x label on picked buckets only, centred on its bucket and nudged inward only as far as it\n * takes to stay inside the plot, so the chart needs no side margin.\n */\nexport function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }: ChartTimeTickProps) {\n  if (!payload || !plotWidth || !picked.has(payload.index)) return null;\n  const text = String(payload.value);\n  const half = payload.offset ?? 0;\n  // Bars sit in bands (label at the band's centre); lines sit on points (first at the edge).\n  const left = half > 0 ? x - half * (2 * payload.index + 1) : x - (payload.index * plotWidth) / Math.max(count - 1, 1);\n  const w = labelWidth(text) / 2;\n  const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);\n  return (\n    <text x={tx} y={y} dy=\"0.71em\" textAnchor=\"middle\" fontSize={CHART_AXIS_FONT_SIZE} fill={CHART_LABEL_COLOR}>\n      {text}\n    </text>\n  );\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,QAAQ,OAAO,aAAiC;CACrG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,KAAK,GAAG,OAAO;CACjE,MAAM,OAAO,OAAO,QAAQ,KAAK;CACjC,MAAM,OAAO,QAAQ,UAAU;CAE/B,MAAM,OAAO,OAAO,IAAI,IAAI,QAAQ,IAAI,QAAQ,QAAQ,KAAK,IAAK,QAAQ,QAAQ,YAAa,KAAK,IAAI,QAAQ,GAAG,CAAC;CACpH,MAAM,IAAI,WAAW,IAAI,IAAI;CAC7B,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,OAAO,YAAY,CAAC;CAC/D,OACE,oBAAC,QAAD;EAAM,GAAG;EAAO;EAAG,IAAG;EAAS,YAAW;EAAS,UAAA;EAAgC,MAAM;EACtF,UAAA;CACG,CAAA;AAEV"}
+{"version":3,"file":"chart-time-tick.es.js","names":[],"sources":["../../src/ds/primitives/chart-time-tick.tsx"],"sourcesContent":["import { labelWidth, placeTimeTick } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE } from './chart-layout';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\nexport type ChartTimeTickProps = {\n  x?: number;\n  y?: number;\n  /** The axis' drawn width, which Recharts passes to every tick: the plot's real width. */\n  width?: number;\n  index?: number;\n  payload?: { value: string; index: number; offset?: number };\n  /** Buckets that print a label (from `pickTimeTicks`). */\n  picked: Set<number>;\n  /** Labels that replace the bucket's own text, by index (e.g. date-only ends). */\n  labels?: Map<number, string>;\n  count: number;\n};\n\n/**\n * An x label on picked buckets only, centred on its bucket and pinned inside the plot at its\n * edges, so the chart needs no side margin.\n */\nexport function ChartTimeTick({ x = 0, y = 0, width, payload, picked, labels, count }: ChartTimeTickProps) {\n  if (!payload || !width || !picked.has(payload.index)) return null;\n  const text = labels?.get(payload.index) ?? String(payload.value);\n  const placed = placeTimeTick({\n    x,\n    index: payload.index,\n    offset: payload.offset,\n    count,\n    plotWidth: width,\n    textWidth: labelWidth(text),\n  });\n  return (\n    <text\n      x={placed.x}\n      y={y}\n      dy=\"0.71em\"\n      textAnchor={placed.anchor}\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={CHART_LABEL_COLOR}\n    >\n      {text}\n    </text>\n  );\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,cAAc,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,SAAS,QAAQ,QAAQ,SAA6B;CACzG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,IAAI,QAAQ,KAAK,GAAG,OAAO;CAC7D,MAAM,OAAO,QAAQ,IAAI,QAAQ,KAAK,KAAK,OAAO,QAAQ,KAAK;CAC/D,MAAM,SAAS,cAAc;EAC3B;EACA,OAAO,QAAQ;EACf,QAAQ,QAAQ;EAChB;EACA,WAAW;EACX,WAAW,WAAW,IAAI;CAC5B,CAAC;CACD,OACE,oBAAC,QAAD;EACE,GAAG,OAAO;EACP;EACH,IAAG;EACH,YAAY,OAAO;EACnB,UAAA;EACA,MAAM;EAEL,UAAA;CACG,CAAA;AAEV"}

package/dist/saved-view-schema-DRJYELfK.cjs

@@ -0,0 +1,71 @@
+let zod_v4 = require("zod/v4");
+var SAVED_VIEWS_STORAGE_VERSION = 1;
+var filterBarScalarSchema = zod_v4.z.union([
+	zod_v4.z.string(),
+	zod_v4.z.number(),
+	zod_v4.z.boolean()
+]);
+var savedViewFilterSchema = zod_v4.z.object({
+	id: zod_v4.z.string().min(1),
+	fieldId: zod_v4.z.string().min(1),
+	operatorId: zod_v4.z.string().min(1),
+	value: zod_v4.z.union([filterBarScalarSchema, zod_v4.z.array(filterBarScalarSchema)])
+});
+var savedViewNameSchema = zod_v4.z.string().trim().min(1).max(80);
+var storedSavedViewSchema = zod_v4.z.object({
+	id: zod_v4.z.string().min(1),
+	name: savedViewNameSchema,
+	filters: zod_v4.z.array(savedViewFilterSchema),
+	settings: zod_v4.z.unknown()
+});
+var savedViewsDocumentSchema = zod_v4.z.object({
+	version: zod_v4.z.literal(SAVED_VIEWS_STORAGE_VERSION),
+	views: zod_v4.z.array(zod_v4.z.unknown())
+});
+function parseSavedViews(raw, settingsSchema) {
+	if (!raw) return [];
+	let json;
+	try {
+		json = JSON.parse(raw);
+	} catch {
+		return [];
+	}
+	const document = savedViewsDocumentSchema.safeParse(json);
+	if (!document.success) return [];
+	return document.data.views.flatMap((candidate) => {
+		const view = storedSavedViewSchema.safeParse(candidate);
+		if (!view.success) return [];
+		const settings = settingsSchema.safeParse(view.data.settings);
+		if (!settings.success) return [];
+		return [{
+			...view.data,
+			settings: settings.data
+		}];
+	});
+}
+function serializeSavedViews(views) {
+	return JSON.stringify({
+		version: SAVED_VIEWS_STORAGE_VERSION,
+		views
+	});
+}
+Object.defineProperty(exports, "parseSavedViews", {
+	enumerable: true,
+	get: function() {
+		return parseSavedViews;
+	}
+});
+Object.defineProperty(exports, "savedViewNameSchema", {
+	enumerable: true,
+	get: function() {
+		return savedViewNameSchema;
+	}
+});
+Object.defineProperty(exports, "serializeSavedViews", {
+	enumerable: true,
+	get: function() {
+		return serializeSavedViews;
+	}
+});
+
+//# sourceMappingURL=saved-view-schema-DRJYELfK.cjs.map

package/dist/saved-view-schema-DRJYELfK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saved-view-schema-DRJYELfK.cjs","names":["z"],"sources":["../src/ds/components/SavedViews/saved-view-schema.ts"],"sourcesContent":["import { z } from 'zod/v4';\nimport type { FilterBarItem } from '@/ds/components/FilterBar/types';\n\nexport const MAX_SAVED_VIEW_NAME_CHARS = 80;\n\nconst SAVED_VIEWS_STORAGE_VERSION = 1;\n\nconst filterBarScalarSchema = z.union([z.string(), z.number(), z.boolean()]);\n\nconst savedViewFilterSchema = z.object({\n  id: z.string().min(1),\n  fieldId: z.string().min(1),\n  operatorId: z.string().min(1),\n  value: z.union([filterBarScalarSchema, z.array(filterBarScalarSchema)]),\n}) satisfies z.ZodType<FilterBarItem>;\n\nexport const savedViewNameSchema = z.string().trim().min(1).max(MAX_SAVED_VIEW_NAME_CHARS);\n\nconst storedSavedViewSchema = z.object({\n  id: z.string().min(1),\n  name: savedViewNameSchema,\n  filters: z.array(savedViewFilterSchema),\n  settings: z.unknown(),\n});\n\n// Views stay `unknown` so one malformed view is dropped on its own, not the whole list.\nconst savedViewsDocumentSchema = z.object({\n  version: z.literal(SAVED_VIEWS_STORAGE_VERSION),\n  views: z.array(z.unknown()),\n});\n\n// Only `safeParse` is used, so the consumer's Zod version never has to match this package's.\nexport type SavedViewSettingsSchema<TSettings> = {\n  safeParse: (value: unknown) => { success: true; data: TSettings } | { success: false };\n};\n\nexport type SavedView<TSettings> = {\n  id: string;\n  name: string;\n  filters: FilterBarItem[];\n  settings: TSettings;\n};\n\nexport function parseSavedViews<TSettings>(\n  raw: string | null,\n  settingsSchema: SavedViewSettingsSchema<TSettings>,\n): SavedView<TSettings>[] {\n  if (!raw) return [];\n  let json: unknown;\n  try {\n    json = JSON.parse(raw);\n  } catch {\n    return [];\n  }\n  const document = savedViewsDocumentSchema.safeParse(json);\n  if (!document.success) return [];\n  return document.data.views.flatMap(candidate => {\n    const view = storedSavedViewSchema.safeParse(candidate);\n    if (!view.success) return [];\n    const settings = settingsSchema.safeParse(view.data.settings);\n    if (!settings.success) return [];\n    return [{ ...view.data, settings: settings.data }];\n  });\n}\n\nexport function serializeSavedViews<TSettings>(views: readonly SavedView<TSettings>[]): string {\n  return JSON.stringify({ version: SAVED_VIEWS_STORAGE_VERSION, views });\n}\n"],"mappings":";AAKA,IAAM,8BAA8B;AAEpC,IAAM,wBAAwBA,OAAAA,EAAE,MAAM;CAACA,OAAAA,EAAE,OAAO;CAAGA,OAAAA,EAAE,OAAO;CAAGA,OAAAA,EAAE,QAAQ;AAAC,CAAC;AAE3E,IAAM,wBAAwBA,OAAAA,EAAE,OAAO;CACrC,IAAIA,OAAAA,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CACpB,SAASA,OAAAA,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CACzB,YAAYA,OAAAA,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CAC5B,OAAOA,OAAAA,EAAE,MAAM,CAAC,uBAAuBA,OAAAA,EAAE,MAAM,qBAAqB,CAAC,CAAC;AACxE,CAAC;AAED,IAAa,sBAAsBA,OAAAA,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAA,EAA6B;AAEzF,IAAM,wBAAwBA,OAAAA,EAAE,OAAO;CACrC,IAAIA,OAAAA,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CACpB,MAAM;CACN,SAASA,OAAAA,EAAE,MAAM,qBAAqB;CACtC,UAAUA,OAAAA,EAAE,QAAQ;AACtB,CAAC;AAGD,IAAM,2BAA2BA,OAAAA,EAAE,OAAO;CACxC,SAASA,OAAAA,EAAE,QAAQ,2BAA2B;CAC9C,OAAOA,OAAAA,EAAE,MAAMA,OAAAA,EAAE,QAAQ,CAAC;AAC5B,CAAC;AAcD,SAAgB,gBACd,KACA,gBACwB;CACxB,IAAI,CAAC,KAAK,OAAO,CAAC;CAClB,IAAI;CACJ,IAAI;EACF,OAAO,KAAK,MAAM,GAAG;CACvB,QAAQ;EACN,OAAO,CAAC;CACV;CACA,MAAM,WAAW,yBAAyB,UAAU,IAAI;CACxD,IAAI,CAAC,SAAS,SAAS,OAAO,CAAC;CAC/B,OAAO,SAAS,KAAK,MAAM,SAAQ,cAAa;EAC9C,MAAM,OAAO,sBAAsB,UAAU,SAAS;EACtD,IAAI,CAAC,KAAK,SAAS,OAAO,CAAC;EAC3B,MAAM,WAAW,eAAe,UAAU,KAAK,KAAK,QAAQ;EAC5D,IAAI,CAAC,SAAS,SAAS,OAAO,CAAC;EAC/B,OAAO,CAAC;GAAE,GAAG,KAAK;GAAM,UAAU,SAAS;EAAK,CAAC;CACnD,CAAC;AACH;AAEA,SAAgB,oBAA+B,OAAgD;CAC7F,OAAO,KAAK,UAAU;EAAE,SAAS;EAA6B;CAAM,CAAC;AACvE"}

package/dist/saved-view-schema-eJXlRRel.js

@@ -0,0 +1,54 @@
+import { z } from "zod/v4";
+var SAVED_VIEWS_STORAGE_VERSION = 1;
+var filterBarScalarSchema = z.union([
+	z.string(),
+	z.number(),
+	z.boolean()
+]);
+var savedViewFilterSchema = z.object({
+	id: z.string().min(1),
+	fieldId: z.string().min(1),
+	operatorId: z.string().min(1),
+	value: z.union([filterBarScalarSchema, z.array(filterBarScalarSchema)])
+});
+var savedViewNameSchema = z.string().trim().min(1).max(80);
+var storedSavedViewSchema = z.object({
+	id: z.string().min(1),
+	name: savedViewNameSchema,
+	filters: z.array(savedViewFilterSchema),
+	settings: z.unknown()
+});
+var savedViewsDocumentSchema = z.object({
+	version: z.literal(SAVED_VIEWS_STORAGE_VERSION),
+	views: z.array(z.unknown())
+});
+function parseSavedViews(raw, settingsSchema) {
+	if (!raw) return [];
+	let json;
+	try {
+		json = JSON.parse(raw);
+	} catch {
+		return [];
+	}
+	const document = savedViewsDocumentSchema.safeParse(json);
+	if (!document.success) return [];
+	return document.data.views.flatMap((candidate) => {
+		const view = storedSavedViewSchema.safeParse(candidate);
+		if (!view.success) return [];
+		const settings = settingsSchema.safeParse(view.data.settings);
+		if (!settings.success) return [];
+		return [{
+			...view.data,
+			settings: settings.data
+		}];
+	});
+}
+function serializeSavedViews(views) {
+	return JSON.stringify({
+		version: SAVED_VIEWS_STORAGE_VERSION,
+		views
+	});
+}
+export { savedViewNameSchema as n, serializeSavedViews as r, parseSavedViews as t };
+
+//# sourceMappingURL=saved-view-schema-eJXlRRel.js.map

package/dist/saved-view-schema-eJXlRRel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saved-view-schema-eJXlRRel.js","names":[],"sources":["../src/ds/components/SavedViews/saved-view-schema.ts"],"sourcesContent":["import { z } from 'zod/v4';\nimport type { FilterBarItem } from '@/ds/components/FilterBar/types';\n\nexport const MAX_SAVED_VIEW_NAME_CHARS = 80;\n\nconst SAVED_VIEWS_STORAGE_VERSION = 1;\n\nconst filterBarScalarSchema = z.union([z.string(), z.number(), z.boolean()]);\n\nconst savedViewFilterSchema = z.object({\n  id: z.string().min(1),\n  fieldId: z.string().min(1),\n  operatorId: z.string().min(1),\n  value: z.union([filterBarScalarSchema, z.array(filterBarScalarSchema)]),\n}) satisfies z.ZodType<FilterBarItem>;\n\nexport const savedViewNameSchema = z.string().trim().min(1).max(MAX_SAVED_VIEW_NAME_CHARS);\n\nconst storedSavedViewSchema = z.object({\n  id: z.string().min(1),\n  name: savedViewNameSchema,\n  filters: z.array(savedViewFilterSchema),\n  settings: z.unknown(),\n});\n\n// Views stay `unknown` so one malformed view is dropped on its own, not the whole list.\nconst savedViewsDocumentSchema = z.object({\n  version: z.literal(SAVED_VIEWS_STORAGE_VERSION),\n  views: z.array(z.unknown()),\n});\n\n// Only `safeParse` is used, so the consumer's Zod version never has to match this package's.\nexport type SavedViewSettingsSchema<TSettings> = {\n  safeParse: (value: unknown) => { success: true; data: TSettings } | { success: false };\n};\n\nexport type SavedView<TSettings> = {\n  id: string;\n  name: string;\n  filters: FilterBarItem[];\n  settings: TSettings;\n};\n\nexport function parseSavedViews<TSettings>(\n  raw: string | null,\n  settingsSchema: SavedViewSettingsSchema<TSettings>,\n): SavedView<TSettings>[] {\n  if (!raw) return [];\n  let json: unknown;\n  try {\n    json = JSON.parse(raw);\n  } catch {\n    return [];\n  }\n  const document = savedViewsDocumentSchema.safeParse(json);\n  if (!document.success) return [];\n  return document.data.views.flatMap(candidate => {\n    const view = storedSavedViewSchema.safeParse(candidate);\n    if (!view.success) return [];\n    const settings = settingsSchema.safeParse(view.data.settings);\n    if (!settings.success) return [];\n    return [{ ...view.data, settings: settings.data }];\n  });\n}\n\nexport function serializeSavedViews<TSettings>(views: readonly SavedView<TSettings>[]): string {\n  return JSON.stringify({ version: SAVED_VIEWS_STORAGE_VERSION, views });\n}\n"],"mappings":";AAKA,IAAM,8BAA8B;AAEpC,IAAM,wBAAwB,EAAE,MAAM;CAAC,EAAE,OAAO;CAAG,EAAE,OAAO;CAAG,EAAE,QAAQ;AAAC,CAAC;AAE3E,IAAM,wBAAwB,EAAE,OAAO;CACrC,IAAI,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CACpB,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CACzB,YAAY,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CAC5B,OAAO,EAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,qBAAqB,CAAC,CAAC;AACxE,CAAC;AAED,IAAa,sBAAsB,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAA,EAA6B;AAEzF,IAAM,wBAAwB,EAAE,OAAO;CACrC,IAAI,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;CACpB,MAAM;CACN,SAAS,EAAE,MAAM,qBAAqB;CACtC,UAAU,EAAE,QAAQ;AACtB,CAAC;AAGD,IAAM,2BAA2B,EAAE,OAAO;CACxC,SAAS,EAAE,QAAQ,2BAA2B;CAC9C,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC5B,CAAC;AAcD,SAAgB,gBACd,KACA,gBACwB;CACxB,IAAI,CAAC,KAAK,OAAO,CAAC;CAClB,IAAI;CACJ,IAAI;EACF,OAAO,KAAK,MAAM,GAAG;CACvB,QAAQ;EACN,OAAO,CAAC;CACV;CACA,MAAM,WAAW,yBAAyB,UAAU,IAAI;CACxD,IAAI,CAAC,SAAS,SAAS,OAAO,CAAC;CAC/B,OAAO,SAAS,KAAK,MAAM,SAAQ,cAAa;EAC9C,MAAM,OAAO,sBAAsB,UAAU,SAAS;EACtD,IAAI,CAAC,KAAK,SAAS,OAAO,CAAC;EAC3B,MAAM,WAAW,eAAe,UAAU,KAAK,KAAK,QAAQ;EAC5D,IAAI,CAAC,SAAS,SAAS,OAAO,CAAC;EAC/B,OAAO,CAAC;GAAE,GAAG,KAAK;GAAM,UAAU,SAAS;EAAK,CAAC;CACnD,CAAC;AACH;AAEA,SAAgB,oBAA+B,OAAgD;CAC7F,OAAO,KAAK,UAAU;EAAE,SAAS;EAA6B;CAAM,CAAC;AACvE"}

package/dist/{span-payload-primitives-D3OO0u6u.cjs → span-payload-primitives-B10Xxmx7.cjs}

@@ -3,11 +3,11 @@ const require_utils = require("./utils-uDc1ofX1.cjs");
 require("./primitives/raised-surface.cjs.js");
 const require_scroll_area = require("./scroll-area-BP4gPZ4G.cjs");
 const require_Txt = require("./Txt-BnoSqxKE.cjs");
-const require_tool_presentation = require("./tool-presentation-D2uUj1AB.cjs");
+const require_tool_presentation = require("./tool-presentation-BLErsb7c.cjs");
+const require_activity = require("./activity-DAK8tj7r.cjs");
 const require_components_Collapsible = require("./components/Collapsible.cjs.js");
 const require_components_DisclosureChevron = require("./components/DisclosureChevron.cjs.js");
-const require_activity = require("./activity-QyLJcBKc.cjs");
-const require_MarkdownRenderer = require("./MarkdownRenderer-BgqKfmRm.cjs");
+const require_MarkdownRenderer = require("./MarkdownRenderer-CS6u5drO.cjs");
 const require_domains_chat_components_badge_wrapper = require("./domains/chat/components/badge-wrapper.cjs.js");
 const require_DataKeysAndValues = require("./DataKeysAndValues-DsH6AbAo.cjs");
 const require_domains_traces_components_span_payload_span_payload_registry = require("./domains/traces/components/span-payload/span-payload-registry.cjs.js");
@@ -214,4 +214,4 @@ Object.defineProperty(exports, "SpanToolNameValue", {
 	}
 });
 
-//# sourceMappingURL=span-payload-primitives-D3OO0u6u.cjs.map
+//# sourceMappingURL=span-payload-primitives-B10Xxmx7.cjs.map

package/dist/{span-payload-primitives-D3OO0u6u.cjs.map → span-payload-primitives-B10Xxmx7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"span-payload-primitives-D3OO0u6u.cjs","names":["useLinkComponent","getDelegatedToolHref","DataKeysAndValues","SpanPayloadJson","presentTool","getDelegatedTool","BadgeWrapper","ActivityHeadline","Txt","MarkdownRenderer","Collapsible","CollapsibleTrigger","DisclosureChevron","CollapsibleContent","ScrollArea","cn"],"sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField } from './span-payload-primitives';\nimport { getDelegatedTool, getDelegatedToolHref } from './span-payload-registry';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ActivityHeadline } from '@/ds/components/ai/activity';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { useLinkComponent } from '@/lib/framework';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** A tool name in a key/value list, linked to its page when the tool is a workflow or sub-agent. */\nexport function SpanToolNameValue({ toolName }: { toolName: string }) {\n  const { Link, paths } = useLinkComponent();\n  const href = getDelegatedToolHref(paths, toolName);\n  if (!href) return <DataKeysAndValues.Value>{toolName}</DataKeysAndValues.Value>;\n  return (\n    <DataKeysAndValues.ValueLink href={href} as={Link}>\n      {toolName}\n    </DataKeysAndValues.ValueLink>\n  );\n}\n\nexport function SpanPayloadTool({ value }: { value: unknown }) {\n  const { Link, paths } = useLinkComponent();\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  const { icon: ToolIcon, label, detail, description } = presentTool(call.toolName, input);\n  const delegated = getDelegatedTool(call.toolName);\n  // The header toggles the body, so the workflow or agent link sits in the body rather than in it.\n  const delegatedHref = getDelegatedToolHref(paths, call.toolName);\n  const hasBody = Boolean(delegatedHref) || input !== undefined || output !== undefined || errorText !== undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={\n          <ActivityHeadline icon={<ToolIcon aria-hidden />} label={label} detail={detail} description={description} />\n        }\n      >\n        {hasBody && (\n          <div className=\"flex flex-col gap-3\">\n            {delegated && delegatedHref && (\n              <DataKeysAndValues>\n                <DataKeysAndValues.Key>{delegated.kind === 'workflow' ? 'Workflow' : 'Agent'}</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueLink href={delegatedHref} as={Link}>\n                  {delegated.key}\n                </DataKeysAndValues.ValueLink>\n              </DataKeysAndValues>\n            )}\n            {input !== undefined && (\n              <SpanPayloadField label=\"Arguments\">\n                <SpanPayloadJson value={input} />\n              </SpanPayloadField>\n            )}\n            {output !== undefined && (\n              <SpanPayloadField label=\"Result\">\n                <SpanPayloadJson value={output} />\n              </SpanPayloadField>\n            )}\n            {errorText !== undefined && (\n              <SpanPayloadField label=\"Error\">\n                <SpanPayloadJson value={errorText} />\n              </SpanPayloadField>\n            )}\n          </div>\n        )}\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"block uppercase\">\n      {children}\n    </Txt>\n  );\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta text-placeholder uppercase\">\n        <DisclosureChevron direction=\"right\" className=\"size-3\" />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport interface SpanPayloadListItem {\n  key: string;\n  /** The item name, a link when it has a page to open. */\n  name: ReactNode;\n  description?: string;\n}\n\n/**\n * A scrollable list of named items with an optional description (tools, skills…). The scrollbar\n * stays visible while the list overflows, so readers can tell there are more items below.\n * `card` frames it on its own surface, for a list that stands alone in a section.\n */\nexport function SpanPayloadList({ items, slot, card }: { items: SpanPayloadListItem[]; slot: string; card?: boolean }) {\n  return (\n    <ScrollArea\n      maxHeight=\"12rem\"\n      alwaysShowScrollbar\n      className={cn(card && cn(raisedSurfaceStyle, 'rounded-lg [--scroll-area-scrollbar-inset:0.5rem]'))}\n    >\n      <ul data-slot={slot} className={cn('flex flex-col gap-2', card ? 'p-3 pr-4' : 'pr-3')}>\n        {items.map(item => (\n          <li key={item.key} className=\"flex min-w-0 flex-col\">\n            {item.name}\n            {item.description && (\n              // Payload content reads in ink like the messages around it; grey is kept for the labels.\n              <Txt as=\"span\" variant=\"body-sm\" className=\"line-clamp-2\" title={item.description}>\n                {item.description}\n              </Txt>\n            )}\n          </li>\n        ))}\n      </ul>\n    </ScrollArea>\n  );\n}\n\n/** A list item name rendered as plain text. */\nexport function SpanPayloadListName({ children }: { children: string }) {\n  return (\n    <Txt as=\"span\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n      {children}\n    </Txt>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"span-payload-primitives-B10Xxmx7.cjs","names":["useLinkComponent","getDelegatedToolHref","DataKeysAndValues","SpanPayloadJson","presentTool","getDelegatedTool","BadgeWrapper","ActivityHeadline","Txt","MarkdownRenderer","Collapsible","CollapsibleTrigger","DisclosureChevron","CollapsibleContent","ScrollArea","cn"],"sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField } from './span-payload-primitives';\nimport { getDelegatedTool, getDelegatedToolHref } from './span-payload-registry';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ActivityHeadline } from '@/ds/components/ai/activity';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { useLinkComponent } from '@/lib/framework';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** A tool name in a key/value list, linked to its page when the tool is a workflow or sub-agent. */\nexport function SpanToolNameValue({ toolName }: { toolName: string }) {\n  const { Link, paths } = useLinkComponent();\n  const href = getDelegatedToolHref(paths, toolName);\n  if (!href) return <DataKeysAndValues.Value>{toolName}</DataKeysAndValues.Value>;\n  return (\n    <DataKeysAndValues.ValueLink href={href} as={Link}>\n      {toolName}\n    </DataKeysAndValues.ValueLink>\n  );\n}\n\nexport function SpanPayloadTool({ value }: { value: unknown }) {\n  const { Link, paths } = useLinkComponent();\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  const { icon: ToolIcon, label, detail, description } = presentTool(call.toolName, input);\n  const delegated = getDelegatedTool(call.toolName);\n  // The header toggles the body, so the workflow or agent link sits in the body rather than in it.\n  const delegatedHref = getDelegatedToolHref(paths, call.toolName);\n  const hasBody = Boolean(delegatedHref) || input !== undefined || output !== undefined || errorText !== undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={\n          <ActivityHeadline icon={<ToolIcon aria-hidden />} label={label} detail={detail} description={description} />\n        }\n      >\n        {hasBody && (\n          <div className=\"flex flex-col gap-3\">\n            {delegated && delegatedHref && (\n              <DataKeysAndValues>\n                <DataKeysAndValues.Key>{delegated.kind === 'workflow' ? 'Workflow' : 'Agent'}</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueLink href={delegatedHref} as={Link}>\n                  {delegated.key}\n                </DataKeysAndValues.ValueLink>\n              </DataKeysAndValues>\n            )}\n            {input !== undefined && (\n              <SpanPayloadField label=\"Arguments\">\n                <SpanPayloadJson value={input} />\n              </SpanPayloadField>\n            )}\n            {output !== undefined && (\n              <SpanPayloadField label=\"Result\">\n                <SpanPayloadJson value={output} />\n              </SpanPayloadField>\n            )}\n            {errorText !== undefined && (\n              <SpanPayloadField label=\"Error\">\n                <SpanPayloadJson value={errorText} />\n              </SpanPayloadField>\n            )}\n          </div>\n        )}\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"block uppercase\">\n      {children}\n    </Txt>\n  );\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta text-placeholder uppercase\">\n        <DisclosureChevron direction=\"right\" className=\"size-3\" />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport interface SpanPayloadListItem {\n  key: string;\n  /** The item name, a link when it has a page to open. */\n  name: ReactNode;\n  description?: string;\n}\n\n/**\n * A scrollable list of named items with an optional description (tools, skills…). The scrollbar\n * stays visible while the list overflows, so readers can tell there are more items below.\n * `card` frames it on its own surface, for a list that stands alone in a section.\n */\nexport function SpanPayloadList({ items, slot, card }: { items: SpanPayloadListItem[]; slot: string; card?: boolean }) {\n  return (\n    <ScrollArea\n      maxHeight=\"12rem\"\n      alwaysShowScrollbar\n      className={cn(card && cn(raisedSurfaceStyle, 'rounded-lg [--scroll-area-scrollbar-inset:0.5rem]'))}\n    >\n      <ul data-slot={slot} className={cn('flex flex-col gap-2', card ? 'p-3 pr-4' : 'pr-3')}>\n        {items.map(item => (\n          <li key={item.key} className=\"flex min-w-0 flex-col\">\n            {item.name}\n            {item.description && (\n              // Payload content reads in ink like the messages around it; grey is kept for the labels.\n              <Txt as=\"span\" variant=\"body-sm\" className=\"line-clamp-2\" title={item.description}>\n                {item.description}\n              </Txt>\n            )}\n          </li>\n        ))}\n      </ul>\n    </ScrollArea>\n  );\n}\n\n/** A list item name rendered as plain text. */\nexport function SpanPayloadListName({ children }: { children: string }) {\n  return (\n    <Txt as=\"span\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n      {children}\n    </Txt>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AASA,IAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;;AAGrE,SAAgB,kBAAkB,EAAE,YAAkC;CACpE,MAAM,EAAE,MAAM,UAAUA,sBAAAA,iBAAiB;CACzC,MAAM,OAAOC,qEAAAA,qBAAqB,OAAO,QAAQ;CACjD,IAAI,CAAC,MAAM,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,kBAAkB,OAAnB,EAAA,UAA0B,SAAkC,CAAA;CAC9E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,WAAnB;EAAmC;EAAM,IAAI;EAC1C,UAAA;CAC0B,CAAA;AAEjC;AAEA,SAAgB,gBAAgB,EAAE,SAA6B;CAC7D,MAAM,EAAE,MAAM,UAAUF,sBAAAA,iBAAiB;CACzC,IAAI,CAAC,SAAS,KAAK,GAAG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACG,iEAAAA,iBAAD,EAAwB,MAAQ,CAAA;CAC7D,MAAM,OAAO,MAAM,SAAS,oBAAoB,MAAM,iBAAiB;CACvE,IAAI,CAAC,SAAS,IAAI,KAAK,OAAO,KAAK,aAAa,YAAY,CAAC,KAAK,UAChE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,iEAAAA,iBAAD,EAAwB,MAAQ,CAAA;CAEzC,MAAM,QAAQ,UAAU,OAAO,KAAK,OAAO,KAAK;CAChD,MAAM,SAAS,YAAY,OAAO,KAAK,SAAS,KAAK;CACrD,MAAM,QAAQ,KAAK,YAAY,QAAQ,KAAK,UAAU;CACtD,MAAM,YAAY,OAAO,KAAK,cAAc,WAAW,KAAK,YAAY,KAAA;CACxE,MAAM,EAAE,MAAM,UAAU,OAAO,QAAQ,gBAAgBC,0BAAAA,YAAY,KAAK,UAAU,KAAK;CACvF,MAAM,YAAYC,qEAAAA,iBAAiB,KAAK,QAAQ;CAEhD,MAAM,gBAAgBJ,qEAAAA,qBAAqB,OAAO,KAAK,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAoB,WAAU;EAC3C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACK,8CAAAA,cAAD;GACE,QAAQ,QAAQ,UAAU;GAC1B,QACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,kBAAD;IAAkB,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAU,eAAA,KAAa,CAAA;IAAU;IAAe;IAAqB;GAAc,CAAA;GAG5G,WATS,QAAQ,aAAa,KAAK,UAAU,KAAA,KAAa,WAAW,KAAA,KAAa,cAAc,KAAA,MAU/F,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,aAAa,iBACZ,iBAAA,GAAA,kBAAA,KAAA,CAACL,0BAAAA,mBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,KAAnB,EAAA,UAAwB,UAAU,SAAS,aAAa,aAAa,QAA+B,CAAA,GACpG,iBAAA,GAAA,kBAAA,IAAA,CAACA,0BAAAA,kBAAkB,WAAnB;MAA6B,MAAM;MAAe,IAAI;MACnD,UAAA,UAAU;KACgB,CAAA,CACZ,EAAA,CAAA;KAEpB,UAAU,KAAA,KACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;MAAkB,OAAM;MACtB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iEAAAA,iBAAD,EAAiB,OAAO,MAAQ,CAAA;KAChB,CAAA;KAEnB,WAAW,KAAA,KACV,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;MAAkB,OAAM;MACtB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,iEAAAA,iBAAD,EAAiB,OAAO,OAAS,CAAA;KACjB,CAAA;KAEnB,cAAc,KAAA,KACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;MAAkB,OAAM;MACtB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,iEAAAA,iBAAD,EAAiB,OAAO,UAAY,CAAA;KACpB,CAAA;IAEjB;;EAEK,CAAA;CACX,CAAA;AAET;;;ACnEA,SAAgB,iBAAiB,EAAE,YAAqC;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACK,YAAAA,KAAD;EAAK,IAAG;EAAO,SAAQ;EAAO,MAAK;EAAQ,WAAU;EAClD;CACE,CAAA;AAET;AAEA,SAAgB,iBAAiB,EAAE,OAAO,YAAuD;CAC/F,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,aAAU;EAAqB,WAAU;EAA9C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD,EAAA,UAAmB,MAAwB,CAAA,GAC1C,QACE;;AAET;AAEA,SAAgB,oBAAoB,EAAE,YAAkC;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,EAAmB,SAA2B,CAAA;CAC3C,CAAA;AAET;;AAGA,SAAgB,uBAAuB,EACrC,OACA,UACA,cAAc,SAKb;CACD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,+BAAAA,aAAD;EAA0B;EAA1B,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,+BAAAA,oBAAD;GAAoB,WAAU;GAA9B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qCAAAA,mBAAD;IAAmB,WAAU;IAAQ,WAAU;GAAU,CAAA,GACxD,KACiB;EACpB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,oBAAD;GAAoB,WAAU;GAAU;EAA6B,CAAA,CAC1D;;AAEjB;;;;;;AAcA,SAAgB,gBAAgB,EAAE,OAAO,MAAM,QAAwE;CACrH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;EACE,WAAU;EACV,qBAAA;EACA,WAAWC,cAAAA,GAAG,QAAQA,cAAAA,GAAAA,6KAAuB,mDAAmD,CAAC;EAEjG,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,aAAW;GAAM,WAAWA,cAAAA,GAAG,uBAAuB,OAAO,aAAa,MAAM;GACjF,UAAA,MAAM,KAAI,SACT,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IAAmB,WAAU;IAA7B,UAAA,CACG,KAAK,MACL,KAAK,eAEJ,iBAAA,GAAA,kBAAA,IAAA,CAACP,YAAAA,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAU,WAAU;KAAe,OAAO,KAAK;KACnE,UAAA,KAAK;IACH,CAAA,CAEL;GARK,GAAA,KAAK,GAQV,CACL;EACC,CAAA;CACM,CAAA;AAEhB;;AAGA,SAAgB,oBAAoB,EAAE,YAAkC;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;EAAK,IAAG;EAAO,SAAQ;EAAQ,MAAK;EAAM,WAAU;EACjD;CACE,CAAA;AAET;;AAGA,SAAgB,qBAAqB,EAAE,aAAuC;CAC5E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,aAAU;EAA0B,WAAU;EAC/C,UAAA,UAAU,KAAK,MAAM,UACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD,EAAiB,OAAO,KAAO,CAAA,EAC7B,GAFK,KAEL,CACL;CACC,CAAA;AAER"}

package/dist/{span-payload-primitives-DTV7eUY-.js → span-payload-primitives-Dyhbqaa7.js}

@@ -3,11 +3,11 @@ import { t as cn } from "./utils-DQx8TpNT.js";
 import "./primitives/raised-surface.es.js";
 import { t as ScrollArea } from "./scroll-area-C226l0v0.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
-import { r as presentTool } from "./tool-presentation-DKfIKLQy.js";
+import { r as presentTool } from "./tool-presentation-BSZYIWx2.js";
+import { f as ActivityHeadline } from "./activity-CM34JyW-.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/Collapsible.es.js";
 import { DisclosureChevron } from "./components/DisclosureChevron.es.js";
-import { f as ActivityHeadline } from "./activity-ihrl0JtH.js";
-import { t as MarkdownRenderer } from "./MarkdownRenderer-DKCDXaLy.js";
+import { t as MarkdownRenderer } from "./MarkdownRenderer-DME2xKTk.js";
 import { BadgeWrapper } from "./domains/chat/components/badge-wrapper.es.js";
 import { t as DataKeysAndValues } from "./DataKeysAndValues-PwOmGxyp.js";
 import { getDelegatedTool, getDelegatedToolHref } from "./domains/traces/components/span-payload/span-payload-registry.es.js";
@@ -161,4 +161,4 @@ function SpanPayloadToolCalls({ toolCalls }) {
 }
 export { SpanPayloadListName as a, SpanPayloadTool as c, SpanPayloadList as i, SpanToolNameValue as l, SpanPayloadField as n, SpanPayloadMarkdown as o, SpanPayloadLabel as r, SpanPayloadToolCalls as s, SpanPayloadCollapsible as t };
 
-//# sourceMappingURL=span-payload-primitives-DTV7eUY-.js.map
+//# sourceMappingURL=span-payload-primitives-Dyhbqaa7.js.map

package/dist/{span-payload-primitives-DTV7eUY-.js.map → span-payload-primitives-Dyhbqaa7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"span-payload-primitives-DTV7eUY-.js","names":[],"sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField } from './span-payload-primitives';\nimport { getDelegatedTool, getDelegatedToolHref } from './span-payload-registry';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ActivityHeadline } from '@/ds/components/ai/activity';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { useLinkComponent } from '@/lib/framework';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** A tool name in a key/value list, linked to its page when the tool is a workflow or sub-agent. */\nexport function SpanToolNameValue({ toolName }: { toolName: string }) {\n  const { Link, paths } = useLinkComponent();\n  const href = getDelegatedToolHref(paths, toolName);\n  if (!href) return <DataKeysAndValues.Value>{toolName}</DataKeysAndValues.Value>;\n  return (\n    <DataKeysAndValues.ValueLink href={href} as={Link}>\n      {toolName}\n    </DataKeysAndValues.ValueLink>\n  );\n}\n\nexport function SpanPayloadTool({ value }: { value: unknown }) {\n  const { Link, paths } = useLinkComponent();\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  const { icon: ToolIcon, label, detail, description } = presentTool(call.toolName, input);\n  const delegated = getDelegatedTool(call.toolName);\n  // The header toggles the body, so the workflow or agent link sits in the body rather than in it.\n  const delegatedHref = getDelegatedToolHref(paths, call.toolName);\n  const hasBody = Boolean(delegatedHref) || input !== undefined || output !== undefined || errorText !== undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={\n          <ActivityHeadline icon={<ToolIcon aria-hidden />} label={label} detail={detail} description={description} />\n        }\n      >\n        {hasBody && (\n          <div className=\"flex flex-col gap-3\">\n            {delegated && delegatedHref && (\n              <DataKeysAndValues>\n                <DataKeysAndValues.Key>{delegated.kind === 'workflow' ? 'Workflow' : 'Agent'}</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueLink href={delegatedHref} as={Link}>\n                  {delegated.key}\n                </DataKeysAndValues.ValueLink>\n              </DataKeysAndValues>\n            )}\n            {input !== undefined && (\n              <SpanPayloadField label=\"Arguments\">\n                <SpanPayloadJson value={input} />\n              </SpanPayloadField>\n            )}\n            {output !== undefined && (\n              <SpanPayloadField label=\"Result\">\n                <SpanPayloadJson value={output} />\n              </SpanPayloadField>\n            )}\n            {errorText !== undefined && (\n              <SpanPayloadField label=\"Error\">\n                <SpanPayloadJson value={errorText} />\n              </SpanPayloadField>\n            )}\n          </div>\n        )}\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"block uppercase\">\n      {children}\n    </Txt>\n  );\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta text-placeholder uppercase\">\n        <DisclosureChevron direction=\"right\" className=\"size-3\" />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport interface SpanPayloadListItem {\n  key: string;\n  /** The item name, a link when it has a page to open. */\n  name: ReactNode;\n  description?: string;\n}\n\n/**\n * A scrollable list of named items with an optional description (tools, skills…). The scrollbar\n * stays visible while the list overflows, so readers can tell there are more items below.\n * `card` frames it on its own surface, for a list that stands alone in a section.\n */\nexport function SpanPayloadList({ items, slot, card }: { items: SpanPayloadListItem[]; slot: string; card?: boolean }) {\n  return (\n    <ScrollArea\n      maxHeight=\"12rem\"\n      alwaysShowScrollbar\n      className={cn(card && cn(raisedSurfaceStyle, 'rounded-lg [--scroll-area-scrollbar-inset:0.5rem]'))}\n    >\n      <ul data-slot={slot} className={cn('flex flex-col gap-2', card ? 'p-3 pr-4' : 'pr-3')}>\n        {items.map(item => (\n          <li key={item.key} className=\"flex min-w-0 flex-col\">\n            {item.name}\n            {item.description && (\n              // Payload content reads in ink like the messages around it; grey is kept for the labels.\n              <Txt as=\"span\" variant=\"body-sm\" className=\"line-clamp-2\" title={item.description}>\n                {item.description}\n              </Txt>\n            )}\n          </li>\n        ))}\n      </ul>\n    </ScrollArea>\n  );\n}\n\n/** A list item name rendered as plain text. */\nexport function SpanPayloadListName({ children }: { children: string }) {\n  return (\n    <Txt as=\"span\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n      {children}\n    </Txt>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"span-payload-primitives-Dyhbqaa7.js","names":[],"sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField } from './span-payload-primitives';\nimport { getDelegatedTool, getDelegatedToolHref } from './span-payload-registry';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ActivityHeadline } from '@/ds/components/ai/activity';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { useLinkComponent } from '@/lib/framework';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** A tool name in a key/value list, linked to its page when the tool is a workflow or sub-agent. */\nexport function SpanToolNameValue({ toolName }: { toolName: string }) {\n  const { Link, paths } = useLinkComponent();\n  const href = getDelegatedToolHref(paths, toolName);\n  if (!href) return <DataKeysAndValues.Value>{toolName}</DataKeysAndValues.Value>;\n  return (\n    <DataKeysAndValues.ValueLink href={href} as={Link}>\n      {toolName}\n    </DataKeysAndValues.ValueLink>\n  );\n}\n\nexport function SpanPayloadTool({ value }: { value: unknown }) {\n  const { Link, paths } = useLinkComponent();\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  const { icon: ToolIcon, label, detail, description } = presentTool(call.toolName, input);\n  const delegated = getDelegatedTool(call.toolName);\n  // The header toggles the body, so the workflow or agent link sits in the body rather than in it.\n  const delegatedHref = getDelegatedToolHref(paths, call.toolName);\n  const hasBody = Boolean(delegatedHref) || input !== undefined || output !== undefined || errorText !== undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={\n          <ActivityHeadline icon={<ToolIcon aria-hidden />} label={label} detail={detail} description={description} />\n        }\n      >\n        {hasBody && (\n          <div className=\"flex flex-col gap-3\">\n            {delegated && delegatedHref && (\n              <DataKeysAndValues>\n                <DataKeysAndValues.Key>{delegated.kind === 'workflow' ? 'Workflow' : 'Agent'}</DataKeysAndValues.Key>\n                <DataKeysAndValues.ValueLink href={delegatedHref} as={Link}>\n                  {delegated.key}\n                </DataKeysAndValues.ValueLink>\n              </DataKeysAndValues>\n            )}\n            {input !== undefined && (\n              <SpanPayloadField label=\"Arguments\">\n                <SpanPayloadJson value={input} />\n              </SpanPayloadField>\n            )}\n            {output !== undefined && (\n              <SpanPayloadField label=\"Result\">\n                <SpanPayloadJson value={output} />\n              </SpanPayloadField>\n            )}\n            {errorText !== undefined && (\n              <SpanPayloadField label=\"Error\">\n                <SpanPayloadJson value={errorText} />\n              </SpanPayloadField>\n            )}\n          </div>\n        )}\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"block uppercase\">\n      {children}\n    </Txt>\n  );\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta text-placeholder uppercase\">\n        <DisclosureChevron direction=\"right\" className=\"size-3\" />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport interface SpanPayloadListItem {\n  key: string;\n  /** The item name, a link when it has a page to open. */\n  name: ReactNode;\n  description?: string;\n}\n\n/**\n * A scrollable list of named items with an optional description (tools, skills…). The scrollbar\n * stays visible while the list overflows, so readers can tell there are more items below.\n * `card` frames it on its own surface, for a list that stands alone in a section.\n */\nexport function SpanPayloadList({ items, slot, card }: { items: SpanPayloadListItem[]; slot: string; card?: boolean }) {\n  return (\n    <ScrollArea\n      maxHeight=\"12rem\"\n      alwaysShowScrollbar\n      className={cn(card && cn(raisedSurfaceStyle, 'rounded-lg [--scroll-area-scrollbar-inset:0.5rem]'))}\n    >\n      <ul data-slot={slot} className={cn('flex flex-col gap-2', card ? 'p-3 pr-4' : 'pr-3')}>\n        {items.map(item => (\n          <li key={item.key} className=\"flex min-w-0 flex-col\">\n            {item.name}\n            {item.description && (\n              // Payload content reads in ink like the messages around it; grey is kept for the labels.\n              <Txt as=\"span\" variant=\"body-sm\" className=\"line-clamp-2\" title={item.description}>\n                {item.description}\n              </Txt>\n            )}\n          </li>\n        ))}\n      </ul>\n    </ScrollArea>\n  );\n}\n\n/** A list item name rendered as plain text. */\nexport function SpanPayloadListName({ children }: { children: string }) {\n  return (\n    <Txt as=\"span\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n      {children}\n    </Txt>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AASA,IAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;;AAGrE,SAAgB,kBAAkB,EAAE,YAAkC;CACpE,MAAM,EAAE,MAAM,UAAU,iBAAiB;CACzC,MAAM,OAAO,qBAAqB,OAAO,QAAQ;CACjD,IAAI,CAAC,MAAM,OAAO,oBAAC,kBAAkB,OAAnB,EAAA,UAA0B,SAAkC,CAAA;CAC9E,OACE,oBAAC,kBAAkB,WAAnB;EAAmC;EAAM,IAAI;EAC1C,UAAA;CAC0B,CAAA;AAEjC;AAEA,SAAgB,gBAAgB,EAAE,SAA6B;CAC7D,MAAM,EAAE,MAAM,UAAU,iBAAiB;CACzC,IAAI,CAAC,SAAS,KAAK,GAAG,OAAO,oBAAC,iBAAD,EAAwB,MAAQ,CAAA;CAC7D,MAAM,OAAO,MAAM,SAAS,oBAAoB,MAAM,iBAAiB;CACvE,IAAI,CAAC,SAAS,IAAI,KAAK,OAAO,KAAK,aAAa,YAAY,CAAC,KAAK,UAChE,OAAO,oBAAC,iBAAD,EAAwB,MAAQ,CAAA;CAEzC,MAAM,QAAQ,UAAU,OAAO,KAAK,OAAO,KAAK;CAChD,MAAM,SAAS,YAAY,OAAO,KAAK,SAAS,KAAK;CACrD,MAAM,QAAQ,KAAK,YAAY,QAAQ,KAAK,UAAU;CACtD,MAAM,YAAY,OAAO,KAAK,cAAc,WAAW,KAAK,YAAY,KAAA;CACxE,MAAM,EAAE,MAAM,UAAU,OAAO,QAAQ,gBAAgB,YAAY,KAAK,UAAU,KAAK;CACvF,MAAM,YAAY,iBAAiB,KAAK,QAAQ;CAEhD,MAAM,gBAAgB,qBAAqB,OAAO,KAAK,QAAQ;CAE/D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAoB,WAAU;EAC3C,UAAA,oBAAC,cAAD;GACE,QAAQ,QAAQ,UAAU;GAC1B,QACE,oBAAC,kBAAD;IAAkB,MAAM,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA;IAAU;IAAe;IAAqB;GAAc,CAAA;GAG5G,WATS,QAAQ,aAAa,KAAK,UAAU,KAAA,KAAa,WAAW,KAAA,KAAa,cAAc,KAAA,MAU/F,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,aAAa,iBACZ,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,kBAAkB,KAAnB,EAAA,UAAwB,UAAU,SAAS,aAAa,aAAa,QAA+B,CAAA,GACpG,oBAAC,kBAAkB,WAAnB;MAA6B,MAAM;MAAe,IAAI;MACnD,UAAA,UAAU;KACgB,CAAA,CACZ,EAAA,CAAA;KAEpB,UAAU,KAAA,KACT,oBAAC,kBAAD;MAAkB,OAAM;MACtB,UAAA,oBAAC,iBAAD,EAAiB,OAAO,MAAQ,CAAA;KAChB,CAAA;KAEnB,WAAW,KAAA,KACV,oBAAC,kBAAD;MAAkB,OAAM;MACtB,UAAA,oBAAC,iBAAD,EAAiB,OAAO,OAAS,CAAA;KACjB,CAAA;KAEnB,cAAc,KAAA,KACb,oBAAC,kBAAD;MAAkB,OAAM;MACtB,UAAA,oBAAC,iBAAD,EAAiB,OAAO,UAAY,CAAA;KACpB,CAAA;IAEjB;;EAEK,CAAA;CACX,CAAA;AAET;;;ACnEA,SAAgB,iBAAiB,EAAE,YAAqC;CACtE,OACE,oBAAC,KAAD;EAAK,IAAG;EAAO,SAAQ;EAAO,MAAK;EAAQ,WAAU;EAClD;CACE,CAAA;AAET;AAEA,SAAgB,iBAAiB,EAAE,OAAO,YAAuD;CAC/F,OACE,qBAAC,OAAD;EAAK,aAAU;EAAqB,WAAU;EAA9C,UAAA,CACE,oBAAC,kBAAD,EAAA,UAAmB,MAAwB,CAAA,GAC1C,QACE;;AAET;AAEA,SAAgB,oBAAoB,EAAE,YAAkC;CACtE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;CAC3C,CAAA;AAET;;AAGA,SAAgB,uBAAuB,EACrC,OACA,UACA,cAAc,SAKb;CACD,OACE,qBAAC,aAAD;EAA0B;EAA1B,UAAA,CACE,qBAAC,oBAAD;GAAoB,WAAU;GAA9B,UAAA,CACE,oBAAC,mBAAD;IAAmB,WAAU;IAAQ,WAAU;GAAU,CAAA,GACxD,KACiB;EACpB,CAAA,GAAA,oBAAC,oBAAD;GAAoB,WAAU;GAAU;EAA6B,CAAA,CAC1D;;AAEjB;;;;;;AAcA,SAAgB,gBAAgB,EAAE,OAAO,MAAM,QAAwE;CACrH,OACE,oBAAC,YAAD;EACE,WAAU;EACV,qBAAA;EACA,WAAW,GAAG,QAAQ,GAAA,6KAAuB,mDAAmD,CAAC;EAEjG,UAAA,oBAAC,MAAD;GAAI,aAAW;GAAM,WAAW,GAAG,uBAAuB,OAAO,aAAa,MAAM;GACjF,UAAA,MAAM,KAAI,SACT,qBAAC,MAAD;IAAmB,WAAU;IAA7B,UAAA,CACG,KAAK,MACL,KAAK,eAEJ,oBAAC,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAU,WAAU;KAAe,OAAO,KAAK;KACnE,UAAA,KAAK;IACH,CAAA,CAEL;GARK,GAAA,KAAK,GAQV,CACL;EACC,CAAA;CACM,CAAA;AAEhB;;AAGA,SAAgB,oBAAoB,EAAE,YAAkC;CACtE,OACE,oBAAC,KAAD;EAAK,IAAG;EAAO,SAAQ;EAAQ,MAAK;EAAM,WAAU;EACjD;CACE,CAAA;AAET;;AAGA,SAAgB,qBAAqB,EAAE,aAAuC;CAC5E,OACE,oBAAC,MAAD;EAAI,aAAU;EAA0B,WAAU;EAC/C,UAAA,UAAU,KAAK,MAAM,UACpB,oBAAC,MAAD,EAAA,UACE,oBAAC,iBAAD,EAAiB,OAAO,KAAO,CAAA,EAC7B,GAFK,KAEL,CACL;CACC,CAAA;AAER"}

package/dist/src/domains/chat/activity/activity-stretch-line.d.ts

@@ -1,10 +1,12 @@
-import type { ActivityMember } from './model/activity-members';
+import type { ActivityCallState, ActivityMember } from './model/activity-members';
 export interface ActivityStretchLineProps {
     members: readonly ActivityMember[];
     /** Still being written: reads what it is doing now, and its list follows the latest call. */
     live: boolean;
     /** From the first member to whatever ended the stretch. */
     elapsedMs?: number;
+    /** The calls as they stand now, when a reveal still holds `members` back: the line reads and wears these. */
+    current?: readonly ActivityCallState[];
 }
 /** One collapsed line for a stretch of tool work and thinking, opening onto what it did. */
-export declare function ActivityStretchLine({ members, live, elapsedMs }: ActivityStretchLineProps): import("react").JSX.Element | null;
+export declare function ActivityStretchLine({ members, live, elapsedMs, current }: ActivityStretchLineProps): import("react").JSX.Element | null;

package/dist/src/domains/chat/activity/components/activity-fold.d.ts

@@ -1,16 +1,17 @@
 import type { ReactNode } from 'react';
-import type { ActivityCall } from '../model/activity-members';
+import type { ActivityCallState } from '../model/activity-members';
 export interface ActivityFoldProps {
-    calls: readonly ActivityCall[];
+    calls: readonly ActivityCallState[];
+    indicator?: boolean;
     live: boolean;
     elapsedMs?: number;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     foldable: boolean;
-    /** Reads at answer size, ruled off from what it folds. */
+    /** Reads at answer size. */
     prominent?: boolean;
     slot?: string;
     children: ReactNode;
 }
 /** A line that says what its calls are doing, or did, and folds what it summarises. */
-export declare function ActivityFold({ calls, live, elapsedMs, open, onOpenChange, foldable, prominent, slot, children, }: ActivityFoldProps): import("react").JSX.Element;
+export declare function ActivityFold({ calls, indicator, live, elapsedMs, open, onOpenChange, foldable, prominent, slot, children, }: ActivityFoldProps): import("react").JSX.Element;

package/dist/src/domains/chat/activity/components/use-fading-edge.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject } from 'react';
+/**
+ * Words wider than their line fade out at its edge instead of ending in an ellipsis. The fade is never wider than
+ * what it hides, so a line growing into its full width loses the fade as its last word comes into view.
+ */
+export declare function useFadingEdge(line: RefObject<HTMLElement | null>, words: string): void;

package/dist/src/domains/chat/activity/components/use-rolling-words.d.ts

@@ -0,0 +1,7 @@
+import type { RefObject } from 'react';
+/**
+ * What a line says, moved like a thought changing: new words rise into place while the old ones rise and blur
+ * away, and the box glides to the new width. Only a line the reader `watched` being written moves: it writes its
+ * first words in from the left, and rolls each time `words`, the key of what is said, changes.
+ */
+export declare function useRollingWords(box: RefObject<HTMLElement | null>, said: RefObject<HTMLElement | null>, words: string, watched: boolean): void;