@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/domains/dashboards/components/widget-controls.cjs.js

@@ -1,8 +1,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_dashboards_lib_definition = require("../lib/definition.cjs.js");
 const require_domains_metrics_components_card_action_buttons = require("../../metrics/components/card-action-buttons.cjs.js");
+const require_domains_dashboards_lib_definition = require("../lib/definition.cjs.js");
+const require_Button = require("../../../Button-BfICfyxD.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 // src/domains/dashboards/components/widget-controls.tsx
+/** Pins or unpins the widget; it shows the host's state, not the click. */
+function PinAction({ isPinned, onPin, name }) {
+	const label = `${isPinned ? "Unpin" : "Pin"} ${name}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: label,
+		"aria-label": label,
+		onClick: () => onPin(!isPinned),
+		children: isPinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PinOffIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PinIcon, {})
+	});
+}
 /** The view's action button, named for the page it opens (Logs names errors only when the target keeps to them). */
 function DrilldownAction({ widget, view, onDrilldown }) {
 	const { action } = require_domains_dashboards_lib_definition.viewDrilldown(widget, view);
@@ -17,5 +31,6 @@ function DrilldownAction({ widget, view, onDrilldown }) {
 	}
 }
 exports.DrilldownAction = DrilldownAction;
+exports.PinAction = PinAction;
 
 //# sourceMappingURL=widget-controls.cjs.js.map

package/dist/domains/dashboards/components/widget-controls.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-controls.cjs.js","names":["viewDrilldown","targetScope","OpenInTracesButton","OpenInSpansButton","OpenInThreadsButton","OpenErrorsInLogsButton","OpenInLogsButton"],"sources":["../../../../src/domains/dashboards/components/widget-controls.tsx"],"sourcesContent":["import type { DashboardWidget, DashboardWidgetView } from '@mastra/client-js';\nimport {\n  OpenErrorsInLogsButton,\n  OpenInLogsButton,\n  OpenInSpansButton,\n  OpenInThreadsButton,\n  OpenInTracesButton,\n} from '../../metrics/components/card-action-buttons';\nimport { viewDrilldown, targetScope } from '../lib/definition';\nimport type { OnDashboardDrilldown } from '../lib/definition';\n\n/** The view's action button, named for the page it opens (Logs names errors only when the target keeps to them). */\nexport function DrilldownAction({\n  widget,\n  view,\n  onDrilldown,\n}: {\n  widget: DashboardWidget;\n  view: DashboardWidgetView;\n  onDrilldown: OnDashboardDrilldown | undefined;\n}) {\n  const { action } = viewDrilldown(widget, view);\n  if (!onDrilldown || !action) return null;\n  const scope = targetScope(action);\n  const open = () => onDrilldown(action.page, scope);\n  switch (action.page) {\n    case 'traces':\n      return <OpenInTracesButton onClick={open} />;\n    case 'spans':\n      return <OpenInSpansButton onClick={open} />;\n    case 'threads':\n      return <OpenInThreadsButton onClick={open} />;\n    case 'logs':\n      return scope.status === 'error' ? <OpenErrorsInLogsButton onClick={open} /> : <OpenInLogsButton onClick={open} />;\n  }\n}\n"],"mappings":";;;;;;AAYA,SAAgB,gBAAgB,EAC9B,QACA,MACA,eAKC;CACD,MAAM,EAAE,WAAWA,0CAAAA,cAAc,QAAQ,IAAI;CAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,OAAO;CACpC,MAAM,QAAQC,0CAAAA,YAAY,MAAM;CAChC,MAAM,aAAa,YAAY,OAAO,MAAM,KAAK;CACjD,QAAQ,OAAO,MAAf;EACE,KAAK,UACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD,EAAoB,SAAS,KAAO,CAAA;EAC7C,KAAK,SACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,mBAAD,EAAmB,SAAS,KAAO,CAAA;EAC5C,KAAK,WACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,qBAAD,EAAqB,SAAS,KAAO,CAAA;EAC9C,KAAK,QACH,OAAO,MAAM,WAAW,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,wBAAD,EAAwB,SAAS,KAAO,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,kBAAD,EAAkB,SAAS,KAAO,CAAA;CACpH;AACF"}
+{"version":3,"file":"widget-controls.cjs.js","names":["Button","PinOffIcon","PinIcon","viewDrilldown","targetScope","OpenInTracesButton","OpenInSpansButton","OpenInThreadsButton","OpenErrorsInLogsButton","OpenInLogsButton"],"sources":["../../../../src/domains/dashboards/components/widget-controls.tsx"],"sourcesContent":["import type { DashboardWidget, DashboardWidgetView } from '@mastra/client-js';\nimport { PinIcon, PinOffIcon } from 'lucide-react';\nimport {\n  OpenErrorsInLogsButton,\n  OpenInLogsButton,\n  OpenInSpansButton,\n  OpenInThreadsButton,\n  OpenInTracesButton,\n} from '../../metrics/components/card-action-buttons';\nimport { viewDrilldown, targetScope } from '../lib/definition';\nimport type { OnDashboardDrilldown } from '../lib/definition';\nimport type { WidgetPin } from '../widget-kind';\nimport { Button } from '@/ds/components/Button';\n\n/** Pins or unpins the widget; it shows the host's state, not the click. */\nexport function PinAction({ isPinned, onPin, name }: WidgetPin) {\n  const label = `${isPinned ? 'Unpin' : 'Pin'} ${name}`;\n  return (\n    <Button variant=\"ghost\" size=\"icon-sm\" tooltip={label} aria-label={label} onClick={() => onPin(!isPinned)}>\n      {isPinned ? <PinOffIcon /> : <PinIcon />}\n    </Button>\n  );\n}\n\n/** The view's action button, named for the page it opens (Logs names errors only when the target keeps to them). */\nexport function DrilldownAction({\n  widget,\n  view,\n  onDrilldown,\n}: {\n  widget: DashboardWidget;\n  view: DashboardWidgetView;\n  onDrilldown: OnDashboardDrilldown | undefined;\n}) {\n  const { action } = viewDrilldown(widget, view);\n  if (!onDrilldown || !action) return null;\n  const scope = targetScope(action);\n  const open = () => onDrilldown(action.page, scope);\n  switch (action.page) {\n    case 'traces':\n      return <OpenInTracesButton onClick={open} />;\n    case 'spans':\n      return <OpenInSpansButton onClick={open} />;\n    case 'threads':\n      return <OpenInThreadsButton onClick={open} />;\n    case 'logs':\n      return scope.status === 'error' ? <OpenErrorsInLogsButton onClick={open} /> : <OpenInLogsButton onClick={open} />;\n  }\n}\n"],"mappings":";;;;;;;;AAeA,SAAgB,UAAU,EAAE,UAAU,OAAO,QAAmB;CAC9D,MAAM,QAAQ,GAAG,WAAW,UAAU,MAAM,GAAG;CAC/C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,QAAD;EAAQ,SAAQ;EAAQ,MAAK;EAAU,SAAS;EAAO,cAAY;EAAO,eAAe,MAAM,CAAC,QAAQ;EACrG,UAAA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,YAAD,CAAa,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,SAAD,CAAU,CAAA;CACjC,CAAA;AAEZ;;AAGA,SAAgB,gBAAgB,EAC9B,QACA,MACA,eAKC;CACD,MAAM,EAAE,WAAWC,0CAAAA,cAAc,QAAQ,IAAI;CAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,OAAO;CACpC,MAAM,QAAQC,0CAAAA,YAAY,MAAM;CAChC,MAAM,aAAa,YAAY,OAAO,MAAM,KAAK;CACjD,QAAQ,OAAO,MAAf;EACE,KAAK,UACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD,EAAoB,SAAS,KAAO,CAAA;EAC7C,KAAK,SACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,mBAAD,EAAmB,SAAS,KAAO,CAAA;EAC5C,KAAK,WACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,qBAAD,EAAqB,SAAS,KAAO,CAAA;EAC9C,KAAK,QACH,OAAO,MAAM,WAAW,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,wBAAD,EAAwB,SAAS,KAAO,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,kBAAD,EAAkB,SAAS,KAAO,CAAA;CACpH;AACF"}

package/dist/domains/dashboards/components/widget-controls.es.js

@@ -1,7 +1,21 @@
-import { targetScope, viewDrilldown } from "../lib/definition.es.js";
 import { OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton } from "../../metrics/components/card-action-buttons.es.js";
+import { targetScope, viewDrilldown } from "../lib/definition.es.js";
+import { t as Button } from "../../../Button-Bi7aXd_G.js";
 import { jsx } from "react/jsx-runtime";
+import { PinIcon, PinOffIcon } from "lucide-react";
 // src/domains/dashboards/components/widget-controls.tsx
+/** Pins or unpins the widget; it shows the host's state, not the click. */
+function PinAction({ isPinned, onPin, name }) {
+	const label = `${isPinned ? "Unpin" : "Pin"} ${name}`;
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: label,
+		"aria-label": label,
+		onClick: () => onPin(!isPinned),
+		children: isPinned ? /* @__PURE__ */ jsx(PinOffIcon, {}) : /* @__PURE__ */ jsx(PinIcon, {})
+	});
+}
 /** The view's action button, named for the page it opens (Logs names errors only when the target keeps to them). */
 function DrilldownAction({ widget, view, onDrilldown }) {
 	const { action } = viewDrilldown(widget, view);
@@ -15,6 +29,6 @@ function DrilldownAction({ widget, view, onDrilldown }) {
 		case "logs": return scope.status === "error" ? /* @__PURE__ */ jsx(OpenErrorsInLogsButton, { onClick: open }) : /* @__PURE__ */ jsx(OpenInLogsButton, { onClick: open });
 	}
 }
-export { DrilldownAction };
+export { DrilldownAction, PinAction };
 
 //# sourceMappingURL=widget-controls.es.js.map

package/dist/domains/dashboards/components/widget-controls.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-controls.es.js","names":[],"sources":["../../../../src/domains/dashboards/components/widget-controls.tsx"],"sourcesContent":["import type { DashboardWidget, DashboardWidgetView } from '@mastra/client-js';\nimport {\n  OpenErrorsInLogsButton,\n  OpenInLogsButton,\n  OpenInSpansButton,\n  OpenInThreadsButton,\n  OpenInTracesButton,\n} from '../../metrics/components/card-action-buttons';\nimport { viewDrilldown, targetScope } from '../lib/definition';\nimport type { OnDashboardDrilldown } from '../lib/definition';\n\n/** The view's action button, named for the page it opens (Logs names errors only when the target keeps to them). */\nexport function DrilldownAction({\n  widget,\n  view,\n  onDrilldown,\n}: {\n  widget: DashboardWidget;\n  view: DashboardWidgetView;\n  onDrilldown: OnDashboardDrilldown | undefined;\n}) {\n  const { action } = viewDrilldown(widget, view);\n  if (!onDrilldown || !action) return null;\n  const scope = targetScope(action);\n  const open = () => onDrilldown(action.page, scope);\n  switch (action.page) {\n    case 'traces':\n      return <OpenInTracesButton onClick={open} />;\n    case 'spans':\n      return <OpenInSpansButton onClick={open} />;\n    case 'threads':\n      return <OpenInThreadsButton onClick={open} />;\n    case 'logs':\n      return scope.status === 'error' ? <OpenErrorsInLogsButton onClick={open} /> : <OpenInLogsButton onClick={open} />;\n  }\n}\n"],"mappings":";;;;;AAYA,SAAgB,gBAAgB,EAC9B,QACA,MACA,eAKC;CACD,MAAM,EAAE,WAAW,cAAc,QAAQ,IAAI;CAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,OAAO;CACpC,MAAM,QAAQ,YAAY,MAAM;CAChC,MAAM,aAAa,YAAY,OAAO,MAAM,KAAK;CACjD,QAAQ,OAAO,MAAf;EACE,KAAK,UACH,OAAO,oBAAC,oBAAD,EAAoB,SAAS,KAAO,CAAA;EAC7C,KAAK,SACH,OAAO,oBAAC,mBAAD,EAAmB,SAAS,KAAO,CAAA;EAC5C,KAAK,WACH,OAAO,oBAAC,qBAAD,EAAqB,SAAS,KAAO,CAAA;EAC9C,KAAK,QACH,OAAO,MAAM,WAAW,UAAU,oBAAC,wBAAD,EAAwB,SAAS,KAAO,CAAA,IAAI,oBAAC,kBAAD,EAAkB,SAAS,KAAO,CAAA;CACpH;AACF"}
+{"version":3,"file":"widget-controls.es.js","names":[],"sources":["../../../../src/domains/dashboards/components/widget-controls.tsx"],"sourcesContent":["import type { DashboardWidget, DashboardWidgetView } from '@mastra/client-js';\nimport { PinIcon, PinOffIcon } from 'lucide-react';\nimport {\n  OpenErrorsInLogsButton,\n  OpenInLogsButton,\n  OpenInSpansButton,\n  OpenInThreadsButton,\n  OpenInTracesButton,\n} from '../../metrics/components/card-action-buttons';\nimport { viewDrilldown, targetScope } from '../lib/definition';\nimport type { OnDashboardDrilldown } from '../lib/definition';\nimport type { WidgetPin } from '../widget-kind';\nimport { Button } from '@/ds/components/Button';\n\n/** Pins or unpins the widget; it shows the host's state, not the click. */\nexport function PinAction({ isPinned, onPin, name }: WidgetPin) {\n  const label = `${isPinned ? 'Unpin' : 'Pin'} ${name}`;\n  return (\n    <Button variant=\"ghost\" size=\"icon-sm\" tooltip={label} aria-label={label} onClick={() => onPin(!isPinned)}>\n      {isPinned ? <PinOffIcon /> : <PinIcon />}\n    </Button>\n  );\n}\n\n/** The view's action button, named for the page it opens (Logs names errors only when the target keeps to them). */\nexport function DrilldownAction({\n  widget,\n  view,\n  onDrilldown,\n}: {\n  widget: DashboardWidget;\n  view: DashboardWidgetView;\n  onDrilldown: OnDashboardDrilldown | undefined;\n}) {\n  const { action } = viewDrilldown(widget, view);\n  if (!onDrilldown || !action) return null;\n  const scope = targetScope(action);\n  const open = () => onDrilldown(action.page, scope);\n  switch (action.page) {\n    case 'traces':\n      return <OpenInTracesButton onClick={open} />;\n    case 'spans':\n      return <OpenInSpansButton onClick={open} />;\n    case 'threads':\n      return <OpenInThreadsButton onClick={open} />;\n    case 'logs':\n      return scope.status === 'error' ? <OpenErrorsInLogsButton onClick={open} /> : <OpenInLogsButton onClick={open} />;\n  }\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,UAAU,EAAE,UAAU,OAAO,QAAmB;CAC9D,MAAM,QAAQ,GAAG,WAAW,UAAU,MAAM,GAAG;CAC/C,OACE,oBAAC,QAAD;EAAQ,SAAQ;EAAQ,MAAK;EAAU,SAAS;EAAO,cAAY;EAAO,eAAe,MAAM,CAAC,QAAQ;EACrG,UAAA,WAAW,oBAAC,YAAD,CAAa,CAAA,IAAI,oBAAC,SAAD,CAAU,CAAA;CACjC,CAAA;AAEZ;;AAGA,SAAgB,gBAAgB,EAC9B,QACA,MACA,eAKC;CACD,MAAM,EAAE,WAAW,cAAc,QAAQ,IAAI;CAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,OAAO;CACpC,MAAM,QAAQ,YAAY,MAAM;CAChC,MAAM,aAAa,YAAY,OAAO,MAAM,KAAK;CACjD,QAAQ,OAAO,MAAf;EACE,KAAK,UACH,OAAO,oBAAC,oBAAD,EAAoB,SAAS,KAAO,CAAA;EAC7C,KAAK,SACH,OAAO,oBAAC,mBAAD,EAAmB,SAAS,KAAO,CAAA;EAC5C,KAAK,WACH,OAAO,oBAAC,qBAAD,EAAqB,SAAS,KAAO,CAAA;EAC9C,KAAK,QACH,OAAO,MAAM,WAAW,UAAU,oBAAC,wBAAD,EAAwB,SAAS,KAAO,CAAA,IAAI,oBAAC,kBAAD,EAAkB,SAAS,KAAO,CAAA;CACpH;AACF"}

package/dist/domains/dashboards/components/widget-error.cjs.js

@@ -1,12 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsCard = require("../../../MetricsCard-BEwiS7Pe.cjs");
 const require_domains_metrics_components_chart_card = require("../../metrics/components/chart-card.cjs.js");
+const require_domains_dashboards_lib_pin_actions = require("../lib/pin-actions.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-DojbLiEx.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/dashboards/components/widget-error.tsx
-/** A widget that can't render: its own card, so the rest of the dashboard still does. */
-function WidgetError({ widget, message }) {
+/** A widget that can't render: its own card, so the rest of the dashboard still does, and it can still be moved. */
+function WidgetError({ widget, message, dragHandle, pin }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		title: widget.title ?? widget.id,
+		dragHandle,
+		...require_domains_dashboards_lib_pin_actions.pinActions(pin),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Error, {
 			message,
 			className: "h-full"

package/dist/domains/dashboards/components/widget-error.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-error.cjs.js","names":["ChartCard","MetricsCard"],"sources":["../../../../src/domains/dashboards/components/widget-error.tsx"],"sourcesContent":["import type { DashboardWidget } from '@mastra/client-js';\nimport { ChartCard } from '../../metrics/components/chart-card';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\n/** A widget that can't render: its own card, so the rest of the dashboard still does. */\nexport function WidgetError({ widget, message }: { widget: Pick<DashboardWidget, 'id' | 'title'>; message: string }) {\n  return (\n    <ChartCard title={widget.title ?? widget.id}>\n      <MetricsCard.Error message={message} className=\"h-full\" />\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,YAAY,EAAE,QAAQ,WAA+E;CACnH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,8CAAAA,WAAD;EAAW,OAAO,OAAO,SAAS,OAAO;EACvC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,OAAb;GAA4B;GAAS,WAAU;EAAU,CAAA;CAChD,CAAA;AAEf"}
+{"version":3,"file":"widget-error.cjs.js","names":["ChartCard","pinActions","MetricsCard"],"sources":["../../../../src/domains/dashboards/components/widget-error.tsx"],"sourcesContent":["import type { DashboardWidget } from '@mastra/client-js';\nimport { ChartCard } from '../../metrics/components/chart-card';\nimport { pinActions } from '../lib/pin-actions';\nimport type { WidgetPin } from '../widget-kind';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardDragHandleProps } from '@/ds/components/MetricsCard';\n\n/** A widget that can't render: its own card, so the rest of the dashboard still does, and it can still be moved. */\nexport function WidgetError({\n  widget,\n  message,\n  dragHandle,\n  pin,\n}: {\n  widget: Pick<DashboardWidget, 'id' | 'title'>;\n  message: string;\n  dragHandle?: MetricsCardDragHandleProps;\n  /** So a widget that broke after it was pinned can still be unpinned. */\n  pin?: WidgetPin;\n}) {\n  return (\n    <ChartCard title={widget.title ?? widget.id} dragHandle={dragHandle} {...pinActions(pin)}>\n      <MetricsCard.Error message={message} className=\"h-full\" />\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,YAAY,EAC1B,QACA,SACA,YACA,OAOC;CACD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,8CAAAA,WAAD;EAAW,OAAO,OAAO,SAAS,OAAO;EAAgB;EAAY,GAAIC,2CAAAA,WAAW,GAAG;EACrF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,OAAb;GAA4B;GAAS,WAAU;EAAU,CAAA;CAChD,CAAA;AAEf"}

package/dist/domains/dashboards/components/widget-error.es.js

@@ -1,11 +1,14 @@
-import { t as MetricsCard } from "../../../MetricsCard-ua6C6b8a.js";
 import { ChartCard } from "../../metrics/components/chart-card.es.js";
+import { pinActions } from "../lib/pin-actions.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-kAqSCPPe.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/dashboards/components/widget-error.tsx
-/** A widget that can't render: its own card, so the rest of the dashboard still does. */
-function WidgetError({ widget, message }) {
+/** A widget that can't render: its own card, so the rest of the dashboard still does, and it can still be moved. */
+function WidgetError({ widget, message, dragHandle, pin }) {
 	return /* @__PURE__ */ jsx(ChartCard, {
 		title: widget.title ?? widget.id,
+		dragHandle,
+		...pinActions(pin),
 		children: /* @__PURE__ */ jsx(MetricsCard.Error, {
 			message,
 			className: "h-full"

package/dist/domains/dashboards/components/widget-error.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-error.es.js","names":[],"sources":["../../../../src/domains/dashboards/components/widget-error.tsx"],"sourcesContent":["import type { DashboardWidget } from '@mastra/client-js';\nimport { ChartCard } from '../../metrics/components/chart-card';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\n/** A widget that can't render: its own card, so the rest of the dashboard still does. */\nexport function WidgetError({ widget, message }: { widget: Pick<DashboardWidget, 'id' | 'title'>; message: string }) {\n  return (\n    <ChartCard title={widget.title ?? widget.id}>\n      <MetricsCard.Error message={message} className=\"h-full\" />\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,YAAY,EAAE,QAAQ,WAA+E;CACnH,OACE,oBAAC,WAAD;EAAW,OAAO,OAAO,SAAS,OAAO;EACvC,UAAA,oBAAC,YAAY,OAAb;GAA4B;GAAS,WAAU;EAAU,CAAA;CAChD,CAAA;AAEf"}
+{"version":3,"file":"widget-error.es.js","names":[],"sources":["../../../../src/domains/dashboards/components/widget-error.tsx"],"sourcesContent":["import type { DashboardWidget } from '@mastra/client-js';\nimport { ChartCard } from '../../metrics/components/chart-card';\nimport { pinActions } from '../lib/pin-actions';\nimport type { WidgetPin } from '../widget-kind';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardDragHandleProps } from '@/ds/components/MetricsCard';\n\n/** A widget that can't render: its own card, so the rest of the dashboard still does, and it can still be moved. */\nexport function WidgetError({\n  widget,\n  message,\n  dragHandle,\n  pin,\n}: {\n  widget: Pick<DashboardWidget, 'id' | 'title'>;\n  message: string;\n  dragHandle?: MetricsCardDragHandleProps;\n  /** So a widget that broke after it was pinned can still be unpinned. */\n  pin?: WidgetPin;\n}) {\n  return (\n    <ChartCard title={widget.title ?? widget.id} dragHandle={dragHandle} {...pinActions(pin)}>\n      <MetricsCard.Error message={message} className=\"h-full\" />\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;AAQA,SAAgB,YAAY,EAC1B,QACA,SACA,YACA,OAOC;CACD,OACE,oBAAC,WAAD;EAAW,OAAO,OAAO,SAAS,OAAO;EAAgB;EAAY,GAAI,WAAW,GAAG;EACrF,UAAA,oBAAC,YAAY,OAAb;GAA4B;GAAS,WAAU;EAAU,CAAA;CAChD,CAAA;AAEf"}

package/dist/domains/dashboards/kinds/kpis/kpis-widget.cjs.js

@@ -1,13 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_hooks_use_metrics = require("../../../metrics/hooks/use-metrics.cjs.js");
 const require_domains_metrics_components_kpi_card = require("../../../metrics/components/kpi-card.cjs.js");
+const require_domains_metrics_hooks_use_metrics = require("../../../metrics/hooks/use-metrics.cjs.js");
 const require_domains_metrics_lib_chart_format = require("../../../metrics/lib/chart-format.cjs.js");
-const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
 const require_domains_dashboards_components_view_gate = require("../../components/view-gate.cjs.js");
+const require_domains_dashboards_components_widget_controls = require("../../components/widget-controls.cjs.js");
 const require_domains_dashboards_hooks_use_dashboard_requests = require("../../hooks/use-dashboard-requests.cjs.js");
 const require_domains_dashboards_lib_answers = require("../../lib/answers.cjs.js");
+const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
 const require_domains_dashboards_lib_values = require("../../lib/values.cjs.js");
 const require_domains_dashboards_kinds_kpis_options = require("./options.cjs.js");
+const require_MetricsCard = require("../../../../MetricsCard-DojbLiEx.cjs");
 const require_MetricsCardGroup = require("../../../../MetricsCardGroup-DYSet-qU.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -23,9 +25,9 @@ var FORMAT = {
 	usd: require_domains_metrics_lib_chart_format.formatUsd
 };
 var change = (pct) => pct !== void 0 && Number.isFinite(pct) ? pct : void 0;
-function KpisWidget({ views }) {
+function KpisWidget({ views, dragHandle, pin }) {
 	const [view] = views;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_components_view_gate.ViewGate, {
+	const gate = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_components_view_gate.ViewGate, {
 		queries: view.queries,
 		pending: () => null,
 		children: (page) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KpisView, {
@@ -33,6 +35,18 @@ function KpisWidget({ views }) {
 			page
 		})
 	});
+	if (!dragHandle && !pin) return gate;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			dragHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.DragHandle, { ...dragHandle }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-0 flex-1",
+				children: gate
+			}),
+			pin && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_components_widget_controls.PinAction, { ...pin })
+		]
+	});
 }
 function KpisView({ view, page }) {
 	const { comparisonLabel } = require_domains_metrics_hooks_use_metrics.useMetrics();

package/dist/domains/dashboards/kinds/kpis/kpis-widget.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpis-widget.cjs.js","names":["BotIcon","CoinsIcon","HashIcon","MessagesSquareIcon","formatCount","formatUsd","ViewGate","useMetrics","useDashboardRequests","buildRequest","answersById","valueOf","MetricsCardGroup","exprRefs","kpiFigures","KpiCard"],"sources":["../../../../../src/domains/dashboards/kinds/kpis/kpis-widget.tsx"],"sourcesContent":["import { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';\nimport { KpiCard } from '../../../metrics/components/kpi-card';\nimport { useMetrics } from '../../../metrics/hooks/use-metrics';\nimport { formatCount, formatUsd } from '../../../metrics/lib/chart-format';\nimport { ViewGate } from '../../components/view-gate';\nimport type { DashboardQueryResult } from '../../hooks/use-dashboard-requests';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { valueOf } from '../../lib/answers';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { answersById, exprRefs } from '../../lib/values';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport { kpiFigures } from './options';\nimport type { KpisOptions } from './options';\nimport { MetricsCardGroup } from '@/ds/components/MetricsCardGroup';\n\nconst ICONS = { bot: BotIcon, coins: CoinsIcon, hash: HashIcon, threads: MessagesSquareIcon } as const;\n\nconst FORMAT = { count: formatCount, usd: formatUsd };\nconst change = (pct: number | undefined) => (pct !== undefined && Number.isFinite(pct) ? pct : undefined);\n\nexport function KpisWidget({ views }: WidgetKindProps<KpisOptions>) {\n  const [view] = views;\n  return (\n    <ViewGate queries={view.queries} pending={() => null}>\n      {page => <KpisView view={view} page={page} />}\n    </ViewGate>\n  );\n}\n\nfunction KpisView({ view, page }: { view: ResolvedView<KpisOptions>; page: DashboardPageContext }) {\n  const { comparisonLabel } = useMetrics();\n  const results = useDashboardRequests(view.queries.map(q => buildRequest(q, page, {})));\n  const byId = answersById(view.queries, results);\n  const answers = new Map([...byId].map(([id, r]) => [id, valueOf(r?.data)]));\n  return (\n    <MetricsCardGroup>\n      {view.options.items.map((item, i) => {\n        const used = [...new Set(exprRefs(item.value).map(r => r.query))]\n          .map(id => byId.get(id))\n          .filter((r): r is DashboardQueryResult => r !== undefined);\n        const figures = kpiFigures(item.value, answers);\n        const format = FORMAT[item.format];\n        return (\n          <KpiCard\n            key={i}\n            label={item.label}\n            icon={ICONS[item.icon]}\n            value={figures.value === undefined ? '—' : format(figures.value)}\n            change={change(figures.change)}\n            lowerIsBetter={item.lowerIsBetter}\n            detail={item.detail}\n            previous={figures.previous === undefined ? undefined : format(figures.previous)}\n            comparison={comparisonLabel}\n            isLoading={used.some(r => r.isLoading)}\n            isUpdating={used.some(r => r.isRefetching)}\n            isError={used.some(r => r.isError)}\n          />\n        );\n      })}\n    </MetricsCardGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,QAAQ;CAAE,KAAKA,aAAAA;CAAS,OAAOC,aAAAA;CAAW,MAAMC,aAAAA;CAAU,SAASC,aAAAA;AAAmB;AAE5F,IAAM,SAAS;CAAE,OAAOC,yCAAAA;CAAa,KAAKC,yCAAAA;AAAU;AACpD,IAAM,UAAU,QAA6B,QAAQ,KAAA,KAAa,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;AAE/F,SAAgB,WAAW,EAAE,SAAuC;CAClE,MAAM,CAAC,QAAQ;CACf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gDAAAA,UAAD;EAAU,SAAS,KAAK;EAAS,eAAe;EAC7C,WAAA,SAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAgB;GAAY;EAAO,CAAA;CACpC,CAAA;AAEd;AAEA,SAAS,SAAS,EAAE,MAAM,QAAyE;CACjG,MAAM,EAAE,oBAAoBC,0CAAAA,WAAW;CACvC,MAAM,UAAUC,wDAAAA,qBAAqB,KAAK,QAAQ,KAAI,MAAKC,wCAAAA,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;CACrF,MAAM,OAAOC,sCAAAA,YAAY,KAAK,SAAS,OAAO;CAC9C,MAAM,UAAU,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAIC,uCAAAA,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;CAC1E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,EAAA,UACG,KAAK,QAAQ,MAAM,KAAK,MAAM,MAAM;EACnC,MAAM,OAAO,CAAC,GAAG,IAAI,IAAIC,sCAAAA,SAAS,KAAK,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAC9D,KAAI,OAAM,KAAK,IAAI,EAAE,CAAC,CAAC,CACvB,QAAQ,MAAiC,MAAM,KAAA,CAAS;EAC3D,MAAM,UAAUC,8CAAAA,WAAW,KAAK,OAAO,OAAO;EAC9C,MAAM,SAAS,OAAO,KAAK;EAC3B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,4CAAAA,SAAD;GAEE,OAAO,KAAK;GACZ,MAAM,MAAM,KAAK;GACjB,OAAO,QAAQ,UAAU,KAAA,IAAY,MAAM,OAAO,QAAQ,KAAK;GAC/D,QAAQ,OAAO,QAAQ,MAAM;GAC7B,eAAe,KAAK;GACpB,QAAQ,KAAK;GACb,UAAU,QAAQ,aAAa,KAAA,IAAY,KAAA,IAAY,OAAO,QAAQ,QAAQ;GAC9E,YAAY;GACZ,WAAW,KAAK,MAAK,MAAK,EAAE,SAAS;GACrC,YAAY,KAAK,MAAK,MAAK,EAAE,YAAY;GACzC,SAAS,KAAK,MAAK,MAAK,EAAE,OAAO;EAClC,GAZM,CAYN;CAEL,CAAC,EACe,CAAA;AAEtB"}
+{"version":3,"file":"kpis-widget.cjs.js","names":["BotIcon","CoinsIcon","HashIcon","MessagesSquareIcon","formatCount","formatUsd","ViewGate","MetricsCard","PinAction","useMetrics","useDashboardRequests","buildRequest","answersById","valueOf","MetricsCardGroup","exprRefs","kpiFigures","KpiCard"],"sources":["../../../../../src/domains/dashboards/kinds/kpis/kpis-widget.tsx"],"sourcesContent":["import { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';\nimport { KpiCard } from '../../../metrics/components/kpi-card';\nimport { useMetrics } from '../../../metrics/hooks/use-metrics';\nimport { formatCount, formatUsd } from '../../../metrics/lib/chart-format';\nimport { ViewGate } from '../../components/view-gate';\nimport { PinAction } from '../../components/widget-controls';\nimport type { DashboardQueryResult } from '../../hooks/use-dashboard-requests';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { valueOf } from '../../lib/answers';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { answersById, exprRefs } from '../../lib/values';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport { kpiFigures } from './options';\nimport type { KpisOptions } from './options';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsCardGroup } from '@/ds/components/MetricsCardGroup';\n\nconst ICONS = { bot: BotIcon, coins: CoinsIcon, hash: HashIcon, threads: MessagesSquareIcon } as const;\n\nconst FORMAT = { count: formatCount, usd: formatUsd };\nconst change = (pct: number | undefined) => (pct !== undefined && Number.isFinite(pct) ? pct : undefined);\n\nexport function KpisWidget({ views, dragHandle, pin }: WidgetKindProps<KpisOptions>) {\n  const [view] = views;\n  const gate = (\n    <ViewGate queries={view.queries} pending={() => null}>\n      {page => <KpisView view={view} page={page} />}\n    </ViewGate>\n  );\n  if (!dragHandle && !pin) return gate;\n  // The group has no title of its own, so the grip and the pin sit beside it, there even before the figures load.\n  return (\n    <div className=\"flex items-center gap-1.5\">\n      {dragHandle && <MetricsCard.DragHandle {...dragHandle} />}\n      <div className=\"min-w-0 flex-1\">{gate}</div>\n      {pin && <PinAction {...pin} />}\n    </div>\n  );\n}\n\nfunction KpisView({ view, page }: { view: ResolvedView<KpisOptions>; page: DashboardPageContext }) {\n  const { comparisonLabel } = useMetrics();\n  const results = useDashboardRequests(view.queries.map(q => buildRequest(q, page, {})));\n  const byId = answersById(view.queries, results);\n  const answers = new Map([...byId].map(([id, r]) => [id, valueOf(r?.data)]));\n  return (\n    <MetricsCardGroup>\n      {view.options.items.map((item, i) => {\n        const used = [...new Set(exprRefs(item.value).map(r => r.query))]\n          .map(id => byId.get(id))\n          .filter((r): r is DashboardQueryResult => r !== undefined);\n        const figures = kpiFigures(item.value, answers);\n        const format = FORMAT[item.format];\n        return (\n          <KpiCard\n            key={i}\n            label={item.label}\n            icon={ICONS[item.icon]}\n            value={figures.value === undefined ? '—' : format(figures.value)}\n            change={change(figures.change)}\n            lowerIsBetter={item.lowerIsBetter}\n            detail={item.detail}\n            previous={figures.previous === undefined ? undefined : format(figures.previous)}\n            comparison={comparisonLabel}\n            isLoading={used.some(r => r.isLoading)}\n            isUpdating={used.some(r => r.isRefetching)}\n            isError={used.some(r => r.isError)}\n          />\n        );\n      })}\n    </MetricsCardGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,IAAM,QAAQ;CAAE,KAAKA,aAAAA;CAAS,OAAOC,aAAAA;CAAW,MAAMC,aAAAA;CAAU,SAASC,aAAAA;AAAmB;AAE5F,IAAM,SAAS;CAAE,OAAOC,yCAAAA;CAAa,KAAKC,yCAAAA;AAAU;AACpD,IAAM,UAAU,QAA6B,QAAQ,KAAA,KAAa,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;AAE/F,SAAgB,WAAW,EAAE,OAAO,YAAY,OAAqC;CACnF,MAAM,CAAC,QAAQ;CACf,MAAM,OACJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,gDAAAA,UAAD;EAAU,SAAS,KAAK;EAAS,eAAe;EAC7C,WAAA,SAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAgB;GAAY;EAAO,CAAA;CACpC,CAAA;CAEZ,IAAI,CAAC,cAAc,CAAC,KAAK,OAAO;CAEhC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,YAAb,EAAwB,GAAI,WAAa,CAAA;GACxD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAAkB,UAAA;GAAU,CAAA;GAC1C,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,sDAAAA,WAAD,EAAW,GAAI,IAAM,CAAA;EAC1B;;AAET;AAEA,SAAS,SAAS,EAAE,MAAM,QAAyE;CACjG,MAAM,EAAE,oBAAoBC,0CAAAA,WAAW;CACvC,MAAM,UAAUC,wDAAAA,qBAAqB,KAAK,QAAQ,KAAI,MAAKC,wCAAAA,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;CACrF,MAAM,OAAOC,sCAAAA,YAAY,KAAK,SAAS,OAAO;CAC9C,MAAM,UAAU,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAIC,uCAAAA,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;CAC1E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,EAAA,UACG,KAAK,QAAQ,MAAM,KAAK,MAAM,MAAM;EACnC,MAAM,OAAO,CAAC,GAAG,IAAI,IAAIC,sCAAAA,SAAS,KAAK,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAC9D,KAAI,OAAM,KAAK,IAAI,EAAE,CAAC,CAAC,CACvB,QAAQ,MAAiC,MAAM,KAAA,CAAS;EAC3D,MAAM,UAAUC,8CAAAA,WAAW,KAAK,OAAO,OAAO;EAC9C,MAAM,SAAS,OAAO,KAAK;EAC3B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,4CAAAA,SAAD;GAEE,OAAO,KAAK;GACZ,MAAM,MAAM,KAAK;GACjB,OAAO,QAAQ,UAAU,KAAA,IAAY,MAAM,OAAO,QAAQ,KAAK;GAC/D,QAAQ,OAAO,QAAQ,MAAM;GAC7B,eAAe,KAAK;GACpB,QAAQ,KAAK;GACb,UAAU,QAAQ,aAAa,KAAA,IAAY,KAAA,IAAY,OAAO,QAAQ,QAAQ;GAC9E,YAAY;GACZ,WAAW,KAAK,MAAK,MAAK,EAAE,SAAS;GACrC,YAAY,KAAK,MAAK,MAAK,EAAE,YAAY;GACzC,SAAS,KAAK,MAAK,MAAK,EAAE,OAAO;EAClC,GAZM,CAYN;CAEL,CAAC,EACe,CAAA;AAEtB"}

package/dist/domains/dashboards/kinds/kpis/kpis-widget.es.js

@@ -1,14 +1,16 @@
-import { useMetrics } from "../../../metrics/hooks/use-metrics.es.js";
 import { KpiCard } from "../../../metrics/components/kpi-card.es.js";
+import { useMetrics } from "../../../metrics/hooks/use-metrics.es.js";
 import { formatCount, formatUsd } from "../../../metrics/lib/chart-format.es.js";
-import { buildRequest } from "../../lib/requests.es.js";
 import { ViewGate } from "../../components/view-gate.es.js";
+import { PinAction } from "../../components/widget-controls.es.js";
 import { useDashboardRequests } from "../../hooks/use-dashboard-requests.es.js";
 import { valueOf } from "../../lib/answers.es.js";
+import { buildRequest } from "../../lib/requests.es.js";
 import { answersById, exprRefs } from "../../lib/values.es.js";
 import { kpiFigures } from "./options.es.js";
+import { t as MetricsCard } from "../../../../MetricsCard-kAqSCPPe.js";
 import { t as MetricsCardGroup } from "../../../../MetricsCardGroup-Dsu80WDM.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from "lucide-react";
 // src/domains/dashboards/kinds/kpis/kpis-widget.tsx
 var ICONS = {
@@ -22,9 +24,9 @@ var FORMAT = {
 	usd: formatUsd
 };
 var change = (pct) => pct !== void 0 && Number.isFinite(pct) ? pct : void 0;
-function KpisWidget({ views }) {
+function KpisWidget({ views, dragHandle, pin }) {
 	const [view] = views;
-	return /* @__PURE__ */ jsx(ViewGate, {
+	const gate = /* @__PURE__ */ jsx(ViewGate, {
 		queries: view.queries,
 		pending: () => null,
 		children: (page) => /* @__PURE__ */ jsx(KpisView, {
@@ -32,6 +34,18 @@ function KpisWidget({ views }) {
 			page
 		})
 	});
+	if (!dragHandle && !pin) return gate;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			dragHandle && /* @__PURE__ */ jsx(MetricsCard.DragHandle, { ...dragHandle }),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: gate
+			}),
+			pin && /* @__PURE__ */ jsx(PinAction, { ...pin })
+		]
+	});
 }
 function KpisView({ view, page }) {
 	const { comparisonLabel } = useMetrics();

package/dist/domains/dashboards/kinds/kpis/kpis-widget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpis-widget.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/kpis/kpis-widget.tsx"],"sourcesContent":["import { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';\nimport { KpiCard } from '../../../metrics/components/kpi-card';\nimport { useMetrics } from '../../../metrics/hooks/use-metrics';\nimport { formatCount, formatUsd } from '../../../metrics/lib/chart-format';\nimport { ViewGate } from '../../components/view-gate';\nimport type { DashboardQueryResult } from '../../hooks/use-dashboard-requests';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { valueOf } from '../../lib/answers';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { answersById, exprRefs } from '../../lib/values';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport { kpiFigures } from './options';\nimport type { KpisOptions } from './options';\nimport { MetricsCardGroup } from '@/ds/components/MetricsCardGroup';\n\nconst ICONS = { bot: BotIcon, coins: CoinsIcon, hash: HashIcon, threads: MessagesSquareIcon } as const;\n\nconst FORMAT = { count: formatCount, usd: formatUsd };\nconst change = (pct: number | undefined) => (pct !== undefined && Number.isFinite(pct) ? pct : undefined);\n\nexport function KpisWidget({ views }: WidgetKindProps<KpisOptions>) {\n  const [view] = views;\n  return (\n    <ViewGate queries={view.queries} pending={() => null}>\n      {page => <KpisView view={view} page={page} />}\n    </ViewGate>\n  );\n}\n\nfunction KpisView({ view, page }: { view: ResolvedView<KpisOptions>; page: DashboardPageContext }) {\n  const { comparisonLabel } = useMetrics();\n  const results = useDashboardRequests(view.queries.map(q => buildRequest(q, page, {})));\n  const byId = answersById(view.queries, results);\n  const answers = new Map([...byId].map(([id, r]) => [id, valueOf(r?.data)]));\n  return (\n    <MetricsCardGroup>\n      {view.options.items.map((item, i) => {\n        const used = [...new Set(exprRefs(item.value).map(r => r.query))]\n          .map(id => byId.get(id))\n          .filter((r): r is DashboardQueryResult => r !== undefined);\n        const figures = kpiFigures(item.value, answers);\n        const format = FORMAT[item.format];\n        return (\n          <KpiCard\n            key={i}\n            label={item.label}\n            icon={ICONS[item.icon]}\n            value={figures.value === undefined ? '—' : format(figures.value)}\n            change={change(figures.change)}\n            lowerIsBetter={item.lowerIsBetter}\n            detail={item.detail}\n            previous={figures.previous === undefined ? undefined : format(figures.previous)}\n            comparison={comparisonLabel}\n            isLoading={used.some(r => r.isLoading)}\n            isUpdating={used.some(r => r.isRefetching)}\n            isError={used.some(r => r.isError)}\n          />\n        );\n      })}\n    </MetricsCardGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,QAAQ;CAAE,KAAK;CAAS,OAAO;CAAW,MAAM;CAAU,SAAS;AAAmB;AAE5F,IAAM,SAAS;CAAE,OAAO;CAAa,KAAK;AAAU;AACpD,IAAM,UAAU,QAA6B,QAAQ,KAAA,KAAa,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;AAE/F,SAAgB,WAAW,EAAE,SAAuC;CAClE,MAAM,CAAC,QAAQ;CACf,OACE,oBAAC,UAAD;EAAU,SAAS,KAAK;EAAS,eAAe;EAC7C,WAAA,SAAQ,oBAAC,UAAD;GAAgB;GAAY;EAAO,CAAA;CACpC,CAAA;AAEd;AAEA,SAAS,SAAS,EAAE,MAAM,QAAyE;CACjG,MAAM,EAAE,oBAAoB,WAAW;CACvC,MAAM,UAAU,qBAAqB,KAAK,QAAQ,KAAI,MAAK,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;CACrF,MAAM,OAAO,YAAY,KAAK,SAAS,OAAO;CAC9C,MAAM,UAAU,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;CAC1E,OACE,oBAAC,kBAAD,EAAA,UACG,KAAK,QAAQ,MAAM,KAAK,MAAM,MAAM;EACnC,MAAM,OAAO,CAAC,GAAG,IAAI,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAC9D,KAAI,OAAM,KAAK,IAAI,EAAE,CAAC,CAAC,CACvB,QAAQ,MAAiC,MAAM,KAAA,CAAS;EAC3D,MAAM,UAAU,WAAW,KAAK,OAAO,OAAO;EAC9C,MAAM,SAAS,OAAO,KAAK;EAC3B,OACE,oBAAC,SAAD;GAEE,OAAO,KAAK;GACZ,MAAM,MAAM,KAAK;GACjB,OAAO,QAAQ,UAAU,KAAA,IAAY,MAAM,OAAO,QAAQ,KAAK;GAC/D,QAAQ,OAAO,QAAQ,MAAM;GAC7B,eAAe,KAAK;GACpB,QAAQ,KAAK;GACb,UAAU,QAAQ,aAAa,KAAA,IAAY,KAAA,IAAY,OAAO,QAAQ,QAAQ;GAC9E,YAAY;GACZ,WAAW,KAAK,MAAK,MAAK,EAAE,SAAS;GACrC,YAAY,KAAK,MAAK,MAAK,EAAE,YAAY;GACzC,SAAS,KAAK,MAAK,MAAK,EAAE,OAAO;EAClC,GAZM,CAYN;CAEL,CAAC,EACe,CAAA;AAEtB"}
+{"version":3,"file":"kpis-widget.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/kpis/kpis-widget.tsx"],"sourcesContent":["import { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';\nimport { KpiCard } from '../../../metrics/components/kpi-card';\nimport { useMetrics } from '../../../metrics/hooks/use-metrics';\nimport { formatCount, formatUsd } from '../../../metrics/lib/chart-format';\nimport { ViewGate } from '../../components/view-gate';\nimport { PinAction } from '../../components/widget-controls';\nimport type { DashboardQueryResult } from '../../hooks/use-dashboard-requests';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { valueOf } from '../../lib/answers';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { answersById, exprRefs } from '../../lib/values';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport { kpiFigures } from './options';\nimport type { KpisOptions } from './options';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsCardGroup } from '@/ds/components/MetricsCardGroup';\n\nconst ICONS = { bot: BotIcon, coins: CoinsIcon, hash: HashIcon, threads: MessagesSquareIcon } as const;\n\nconst FORMAT = { count: formatCount, usd: formatUsd };\nconst change = (pct: number | undefined) => (pct !== undefined && Number.isFinite(pct) ? pct : undefined);\n\nexport function KpisWidget({ views, dragHandle, pin }: WidgetKindProps<KpisOptions>) {\n  const [view] = views;\n  const gate = (\n    <ViewGate queries={view.queries} pending={() => null}>\n      {page => <KpisView view={view} page={page} />}\n    </ViewGate>\n  );\n  if (!dragHandle && !pin) return gate;\n  // The group has no title of its own, so the grip and the pin sit beside it, there even before the figures load.\n  return (\n    <div className=\"flex items-center gap-1.5\">\n      {dragHandle && <MetricsCard.DragHandle {...dragHandle} />}\n      <div className=\"min-w-0 flex-1\">{gate}</div>\n      {pin && <PinAction {...pin} />}\n    </div>\n  );\n}\n\nfunction KpisView({ view, page }: { view: ResolvedView<KpisOptions>; page: DashboardPageContext }) {\n  const { comparisonLabel } = useMetrics();\n  const results = useDashboardRequests(view.queries.map(q => buildRequest(q, page, {})));\n  const byId = answersById(view.queries, results);\n  const answers = new Map([...byId].map(([id, r]) => [id, valueOf(r?.data)]));\n  return (\n    <MetricsCardGroup>\n      {view.options.items.map((item, i) => {\n        const used = [...new Set(exprRefs(item.value).map(r => r.query))]\n          .map(id => byId.get(id))\n          .filter((r): r is DashboardQueryResult => r !== undefined);\n        const figures = kpiFigures(item.value, answers);\n        const format = FORMAT[item.format];\n        return (\n          <KpiCard\n            key={i}\n            label={item.label}\n            icon={ICONS[item.icon]}\n            value={figures.value === undefined ? '—' : format(figures.value)}\n            change={change(figures.change)}\n            lowerIsBetter={item.lowerIsBetter}\n            detail={item.detail}\n            previous={figures.previous === undefined ? undefined : format(figures.previous)}\n            comparison={comparisonLabel}\n            isLoading={used.some(r => r.isLoading)}\n            isUpdating={used.some(r => r.isRefetching)}\n            isError={used.some(r => r.isError)}\n          />\n        );\n      })}\n    </MetricsCardGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,QAAQ;CAAE,KAAK;CAAS,OAAO;CAAW,MAAM;CAAU,SAAS;AAAmB;AAE5F,IAAM,SAAS;CAAE,OAAO;CAAa,KAAK;AAAU;AACpD,IAAM,UAAU,QAA6B,QAAQ,KAAA,KAAa,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;AAE/F,SAAgB,WAAW,EAAE,OAAO,YAAY,OAAqC;CACnF,MAAM,CAAC,QAAQ;CACf,MAAM,OACJ,oBAAC,UAAD;EAAU,SAAS,KAAK;EAAS,eAAe;EAC7C,WAAA,SAAQ,oBAAC,UAAD;GAAgB;GAAY;EAAO,CAAA;CACpC,CAAA;CAEZ,IAAI,CAAC,cAAc,CAAC,KAAK,OAAO;CAEhC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,cAAc,oBAAC,YAAY,YAAb,EAAwB,GAAI,WAAa,CAAA;GACxD,oBAAC,OAAD;IAAK,WAAU;IAAkB,UAAA;GAAU,CAAA;GAC1C,OAAO,oBAAC,WAAD,EAAW,GAAI,IAAM,CAAA;EAC1B;;AAET;AAEA,SAAS,SAAS,EAAE,MAAM,QAAyE;CACjG,MAAM,EAAE,oBAAoB,WAAW;CACvC,MAAM,UAAU,qBAAqB,KAAK,QAAQ,KAAI,MAAK,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;CACrF,MAAM,OAAO,YAAY,KAAK,SAAS,OAAO;CAC9C,MAAM,UAAU,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;CAC1E,OACE,oBAAC,kBAAD,EAAA,UACG,KAAK,QAAQ,MAAM,KAAK,MAAM,MAAM;EACnC,MAAM,OAAO,CAAC,GAAG,IAAI,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAC9D,KAAI,OAAM,KAAK,IAAI,EAAE,CAAC,CAAC,CACvB,QAAQ,MAAiC,MAAM,KAAA,CAAS;EAC3D,MAAM,UAAU,WAAW,KAAK,OAAO,OAAO;EAC9C,MAAM,SAAS,OAAO,KAAK;EAC3B,OACE,oBAAC,SAAD;GAEE,OAAO,KAAK;GACZ,MAAM,MAAM,KAAK;GACjB,OAAO,QAAQ,UAAU,KAAA,IAAY,MAAM,OAAO,QAAQ,KAAK;GAC/D,QAAQ,OAAO,QAAQ,MAAM;GAC7B,eAAe,KAAK;GACpB,QAAQ,KAAK;GACb,UAAU,QAAQ,aAAa,KAAA,IAAY,KAAA,IAAY,OAAO,QAAQ,QAAQ;GAC9E,YAAY;GACZ,WAAW,KAAK,MAAK,MAAK,EAAE,SAAS;GACrC,YAAY,KAAK,MAAK,MAAK,EAAE,YAAY;GACzC,SAAS,KAAK,MAAK,MAAK,EAAE,OAAO;EAClC,GAZM,CAYN;CAEL,CAAC,EACe,CAAA;AAEtB"}

package/dist/domains/dashboards/kinds/kpis.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_dashboards_widget_kind = require("../widget-kind.cjs.js");
-const require_domains_dashboards_kinds_kpis_options = require("./kpis/options.cjs.js");
 const require_domains_dashboards_kinds_kpis_kpis_widget = require("./kpis/kpis-widget.cjs.js");
+const require_domains_dashboards_kinds_kpis_options = require("./kpis/options.cjs.js");
 // src/domains/dashboards/kinds/kpis/index.ts
 /** A row of headline numbers, each against the previous window. */
 var kpisKind = require_domains_dashboards_widget_kind.defineWidgetKind({

package/dist/domains/dashboards/kinds/kpis.es.js

@@ -1,6 +1,6 @@
 import { defineWidgetKind } from "../widget-kind.es.js";
-import { kpiFigures, kpisIssues, kpisOptionsSchema } from "./kpis/options.es.js";
 import { KpisWidget } from "./kpis/kpis-widget.es.js";
+import { kpiFigures, kpisIssues, kpisOptionsSchema } from "./kpis/options.es.js";
 // src/domains/dashboards/kinds/kpis/index.ts
 /** A row of headline numbers, each against the previous window. */
 var kpisKind = defineWidgetKind({

package/dist/domains/dashboards/kinds/scores/scores-widget.cjs.js

@@ -1,18 +1,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../../../metrics/lib/metrics-buckets.cjs.js");
-const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
-const require_domains_dashboards_components_view_gate = require("../../components/view-gate.cjs.js");
-const require_domains_dashboards_hooks_use_dashboard_requests = require("../../hooks/use-dashboard-requests.cjs.js");
 const require_domains_metrics_components_chart_area = require("../../../metrics/components/chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("../../../metrics/components/chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("../../../metrics/components/chart-card-error.cjs.js");
 const require_domains_metrics_lib_chart_axis = require("../../../metrics/lib/chart-axis.cjs.js");
 const require_domains_metrics_lib_chart_colors = require("../../../metrics/lib/chart-colors.cjs.js");
-const require_domains_dashboards_lib_scores = require("../../lib/scores.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../../../metrics/lib/metrics-buckets.cjs.js");
+const require_domains_dashboards_components_view_gate = require("../../components/view-gate.cjs.js");
+const require_domains_dashboards_components_widget_chrome = require("../../components/widget-chrome.cjs.js");
+const require_domains_dashboards_hooks_use_dashboard_requests = require("../../hooks/use-dashboard-requests.cjs.js");
 const require_domains_dashboards_hooks_use_scorers = require("../../hooks/use-scorers.cjs.js");
 const require_domains_dashboards_lib_chrome = require("../../lib/chrome.cjs.js");
 const require_domains_dashboards_lib_format = require("../../lib/format.cjs.js");
-const require_MetricsLineChart = require("../../../../MetricsLineChart-tZxsauau.cjs");
+const require_domains_dashboards_lib_pin_actions = require("../../lib/pin-actions.cjs.js");
+const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
+const require_domains_dashboards_lib_scores = require("../../lib/scores.cjs.js");
+const require_MetricsLineChart = require("../../../../MetricsLineChart-BnY9JKzc.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/dashboards/kinds/scores/scores-widget.tsx
 /** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */
@@ -23,12 +25,19 @@ var SCORER_COLORS = [
 	require_domains_metrics_lib_chart_colors.CHART_COLORS.teal,
 	require_domains_metrics_lib_chart_colors.CHART_COLORS.indigo
 ];
-function ScoresWidget({ widget, views, expand }) {
+function ScoresWidget({ widget, views, expand, dragHandle, pin }) {
 	const [view] = views;
-	const heading = require_domains_dashboards_lib_chrome.viewTitle(widget, [view], 0, () => {}, expand);
+	const heading = {
+		...require_domains_dashboards_lib_chrome.viewTitle(widget, [view], 0, () => {}, expand),
+		dragHandle,
+		...require_domains_dashboards_lib_pin_actions.pinActions(pin)
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_components_view_gate.ViewGate, {
 		queries: view.queries,
-		pending: () => null,
+		pending: (gate) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_components_widget_chrome.PendingChartCard, {
+			gate,
+			heading
+		}),
 		children: (page) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScoresView, {
 			heading,
 			view,

package/dist/domains/dashboards/kinds/scores/scores-widget.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scores-widget.cjs.js","names":["CHART_COLORS","viewTitle","ViewGate","bucketPlan","intervalHours","useScorers","withScorer","buildRequest","useDashboardRequests","ChartCard","ChartCardError","shapeScores","ChartArea","MetricsLineChart","FORMATTERS","BUCKET_AXIS"],"sources":["../../../../../src/domains/dashboards/kinds/scores/scores-widget.tsx"],"sourcesContent":["import type { DashboardQuery } from '@mastra/client-js';\nimport { ChartArea } from '../../../metrics/components/chart-area';\nimport { ChartCard } from '../../../metrics/components/chart-card';\nimport { ChartCardError } from '../../../metrics/components/chart-card-error';\nimport { BUCKET_AXIS } from '../../../metrics/lib/chart-axis';\nimport { CHART_COLORS } from '../../../metrics/lib/chart-colors';\nimport { bucketPlan, intervalHours } from '../../../metrics/lib/metrics-buckets';\nimport { ViewGate } from '../../components/view-gate';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useScorers } from '../../hooks/use-scorers';\nimport { viewTitle } from '../../lib/chrome';\nimport type { ViewHeading } from '../../lib/chrome';\nimport { FORMATTERS } from '../../lib/format';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { shapeScores, withScorer } from '../../lib/scores';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport type { ScoresOptions } from './options';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nexport function ScoresWidget({ widget, views, expand }: WidgetKindProps<ScoresOptions>) {\n  const [view] = views;\n  // Scores show their first view only, so the title is plain or, with somewhere to expand to, a link.\n  const heading = viewTitle(widget, [view], 0, () => {}, expand);\n  return (\n    <ViewGate queries={view.queries} pending={() => null}>\n      {page => <ScoresView heading={heading} view={view} page={page} />}\n    </ViewGate>\n  );\n}\n\nfunction ScoresView({\n  heading,\n  view,\n  page,\n}: {\n  heading: ViewHeading;\n  view: ResolvedView<ScoresOptions>;\n  page: DashboardPageContext;\n}) {\n  const { options } = view;\n  const { interval } = bucketPlan(page.window.start, page.window.end);\n  const stepHours = intervalHours(interval);\n  const { recent, scorers } = useScorers(view.queries, page);\n  const averageQuery = view.queries.find(q => q.id === options.average);\n  const seriesQuery = view.queries.find(q => q.id === options.series);\n  const send = (query: DashboardQuery | undefined, scorerId: string, bucket?: typeof interval) => {\n    const own = withScorer(query, scorerId);\n    return own && buildRequest(own, page, { interval: bucket });\n  };\n  // One answer per scorer in each list, in `scorers`' order.\n  const means = useDashboardRequests(scorers.map(({ scorerId }) => send(averageQuery, scorerId)));\n  const points = useDashboardRequests(scorers.map(({ scorerId }) => send(seriesQuery, scorerId, interval)));\n\n  const all = [recent, ...means, ...points].filter(r => r !== undefined);\n  const failed = all.filter(r => r.isError);\n  if (failed.length > 0) {\n    return (\n      <ChartCard {...heading}>\n        <ChartCardError error={failed[0]?.error} onRetry={() => failed.forEach(r => void r.refetch())} />\n      </ChartCard>\n    );\n  }\n\n  const isLoading = all.some(r => r.isLoading);\n  const { buckets, lines } = shapeScores(\n    isLoading ? [] : scorers,\n    means.map(r => r?.data),\n    points.map(r => r?.data),\n    page.window,\n    stepHours,\n  );\n  const series: MetricsLineChartSeries[] = lines.map(({ scorerId, name }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n  }));\n\n  return (\n    <ChartCard {...heading} isUpdating={all.some(r => r.isRefetching)}>\n      <ChartArea isEmpty={!isLoading && lines.length === 0} emptyMessage={options.emptyMessage}>\n        <MetricsLineChart\n          lineStyle=\"thin\"\n          data={isLoading ? [] : buckets}\n          series={series}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={FORMATTERS.score.value}\n          axisFormatter={FORMATTERS.score.axis}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"scores-widget.cjs.js","names":["CHART_COLORS","viewTitle","pinActions","ViewGate","PendingChartCard","bucketPlan","intervalHours","useScorers","withScorer","buildRequest","useDashboardRequests","ChartCard","ChartCardError","shapeScores","ChartArea","MetricsLineChart","FORMATTERS","BUCKET_AXIS"],"sources":["../../../../../src/domains/dashboards/kinds/scores/scores-widget.tsx"],"sourcesContent":["import type { DashboardQuery } from '@mastra/client-js';\nimport { ChartArea } from '../../../metrics/components/chart-area';\nimport { ChartCard } from '../../../metrics/components/chart-card';\nimport { ChartCardError } from '../../../metrics/components/chart-card-error';\nimport { BUCKET_AXIS } from '../../../metrics/lib/chart-axis';\nimport { CHART_COLORS } from '../../../metrics/lib/chart-colors';\nimport { bucketPlan, intervalHours } from '../../../metrics/lib/metrics-buckets';\nimport { ViewGate } from '../../components/view-gate';\nimport { PendingChartCard } from '../../components/widget-chrome';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useScorers } from '../../hooks/use-scorers';\nimport { viewTitle } from '../../lib/chrome';\nimport type { ViewHeading } from '../../lib/chrome';\nimport { FORMATTERS } from '../../lib/format';\nimport { pinActions } from '../../lib/pin-actions';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { shapeScores, withScorer } from '../../lib/scores';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport type { ScoresOptions } from './options';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nexport function ScoresWidget({ widget, views, expand, dragHandle, pin }: WidgetKindProps<ScoresOptions>) {\n  const [view] = views;\n  // Scores show their first view only, so the title is plain or, with somewhere to expand to, a link.\n  const heading = {\n    ...viewTitle(widget, [view], 0, () => {}, expand),\n    dragHandle,\n    ...pinActions(pin),\n  };\n  return (\n    // The card, and its pin, stay while the view waits, so a pinned widget can still be unpinned.\n    <ViewGate queries={view.queries} pending={gate => <PendingChartCard gate={gate} heading={heading} />}>\n      {page => <ScoresView heading={heading} view={view} page={page} />}\n    </ViewGate>\n  );\n}\n\nfunction ScoresView({\n  heading,\n  view,\n  page,\n}: {\n  heading: ViewHeading;\n  view: ResolvedView<ScoresOptions>;\n  page: DashboardPageContext;\n}) {\n  const { options } = view;\n  const { interval } = bucketPlan(page.window.start, page.window.end);\n  const stepHours = intervalHours(interval);\n  const { recent, scorers } = useScorers(view.queries, page);\n  const averageQuery = view.queries.find(q => q.id === options.average);\n  const seriesQuery = view.queries.find(q => q.id === options.series);\n  const send = (query: DashboardQuery | undefined, scorerId: string, bucket?: typeof interval) => {\n    const own = withScorer(query, scorerId);\n    return own && buildRequest(own, page, { interval: bucket });\n  };\n  // One answer per scorer in each list, in `scorers`' order.\n  const means = useDashboardRequests(scorers.map(({ scorerId }) => send(averageQuery, scorerId)));\n  const points = useDashboardRequests(scorers.map(({ scorerId }) => send(seriesQuery, scorerId, interval)));\n\n  const all = [recent, ...means, ...points].filter(r => r !== undefined);\n  const failed = all.filter(r => r.isError);\n  if (failed.length > 0) {\n    return (\n      <ChartCard {...heading}>\n        <ChartCardError error={failed[0]?.error} onRetry={() => failed.forEach(r => void r.refetch())} />\n      </ChartCard>\n    );\n  }\n\n  const isLoading = all.some(r => r.isLoading);\n  const { buckets, lines } = shapeScores(\n    isLoading ? [] : scorers,\n    means.map(r => r?.data),\n    points.map(r => r?.data),\n    page.window,\n    stepHours,\n  );\n  const series: MetricsLineChartSeries[] = lines.map(({ scorerId, name }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n  }));\n\n  return (\n    <ChartCard {...heading} isUpdating={all.some(r => r.isRefetching)}>\n      <ChartArea isEmpty={!isLoading && lines.length === 0} emptyMessage={options.emptyMessage}>\n        <MetricsLineChart\n          lineStyle=\"thin\"\n          data={isLoading ? [] : buckets}\n          series={series}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={FORMATTERS.score.value}\n          axisFormatter={FORMATTERS.score.axis}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/dashboards/kinds/scores/scores-widget.es.js

@@ -1,17 +1,19 @@
-import { bucketPlan, intervalHours } from "../../../metrics/lib/metrics-buckets.es.js";
-import { buildRequest } from "../../lib/requests.es.js";
-import { ViewGate } from "../../components/view-gate.es.js";
-import { useDashboardRequests } from "../../hooks/use-dashboard-requests.es.js";
 import { ChartArea } from "../../../metrics/components/chart-area.es.js";
 import { ChartCard } from "../../../metrics/components/chart-card.es.js";
 import { ChartCardError } from "../../../metrics/components/chart-card-error.es.js";
 import { BUCKET_AXIS } from "../../../metrics/lib/chart-axis.es.js";
 import { CHART_COLORS } from "../../../metrics/lib/chart-colors.es.js";
-import { shapeScores, withScorer } from "../../lib/scores.es.js";
+import { bucketPlan, intervalHours } from "../../../metrics/lib/metrics-buckets.es.js";
+import { ViewGate } from "../../components/view-gate.es.js";
+import { PendingChartCard } from "../../components/widget-chrome.es.js";
+import { useDashboardRequests } from "../../hooks/use-dashboard-requests.es.js";
 import { useScorers } from "../../hooks/use-scorers.es.js";
 import { viewTitle } from "../../lib/chrome.es.js";
 import { FORMATTERS } from "../../lib/format.es.js";
-import { t as MetricsLineChart } from "../../../../MetricsLineChart-4SwxBbQx.js";
+import { pinActions } from "../../lib/pin-actions.es.js";
+import { buildRequest } from "../../lib/requests.es.js";
+import { shapeScores, withScorer } from "../../lib/scores.es.js";
+import { t as MetricsLineChart } from "../../../../MetricsLineChart-4w5lpH63.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/dashboards/kinds/scores/scores-widget.tsx
 /** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */
@@ -22,12 +24,19 @@ var SCORER_COLORS = [
 	CHART_COLORS.teal,
 	CHART_COLORS.indigo
 ];
-function ScoresWidget({ widget, views, expand }) {
+function ScoresWidget({ widget, views, expand, dragHandle, pin }) {
 	const [view] = views;
-	const heading = viewTitle(widget, [view], 0, () => {}, expand);
+	const heading = {
+		...viewTitle(widget, [view], 0, () => {}, expand),
+		dragHandle,
+		...pinActions(pin)
+	};
 	return /* @__PURE__ */ jsx(ViewGate, {
 		queries: view.queries,
-		pending: () => null,
+		pending: (gate) => /* @__PURE__ */ jsx(PendingChartCard, {
+			gate,
+			heading
+		}),
 		children: (page) => /* @__PURE__ */ jsx(ScoresView, {
 			heading,
 			view,

package/dist/domains/dashboards/kinds/scores/scores-widget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"scores-widget.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/scores/scores-widget.tsx"],"sourcesContent":["import type { DashboardQuery } from '@mastra/client-js';\nimport { ChartArea } from '../../../metrics/components/chart-area';\nimport { ChartCard } from '../../../metrics/components/chart-card';\nimport { ChartCardError } from '../../../metrics/components/chart-card-error';\nimport { BUCKET_AXIS } from '../../../metrics/lib/chart-axis';\nimport { CHART_COLORS } from '../../../metrics/lib/chart-colors';\nimport { bucketPlan, intervalHours } from '../../../metrics/lib/metrics-buckets';\nimport { ViewGate } from '../../components/view-gate';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useScorers } from '../../hooks/use-scorers';\nimport { viewTitle } from '../../lib/chrome';\nimport type { ViewHeading } from '../../lib/chrome';\nimport { FORMATTERS } from '../../lib/format';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { shapeScores, withScorer } from '../../lib/scores';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport type { ScoresOptions } from './options';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nexport function ScoresWidget({ widget, views, expand }: WidgetKindProps<ScoresOptions>) {\n  const [view] = views;\n  // Scores show their first view only, so the title is plain or, with somewhere to expand to, a link.\n  const heading = viewTitle(widget, [view], 0, () => {}, expand);\n  return (\n    <ViewGate queries={view.queries} pending={() => null}>\n      {page => <ScoresView heading={heading} view={view} page={page} />}\n    </ViewGate>\n  );\n}\n\nfunction ScoresView({\n  heading,\n  view,\n  page,\n}: {\n  heading: ViewHeading;\n  view: ResolvedView<ScoresOptions>;\n  page: DashboardPageContext;\n}) {\n  const { options } = view;\n  const { interval } = bucketPlan(page.window.start, page.window.end);\n  const stepHours = intervalHours(interval);\n  const { recent, scorers } = useScorers(view.queries, page);\n  const averageQuery = view.queries.find(q => q.id === options.average);\n  const seriesQuery = view.queries.find(q => q.id === options.series);\n  const send = (query: DashboardQuery | undefined, scorerId: string, bucket?: typeof interval) => {\n    const own = withScorer(query, scorerId);\n    return own && buildRequest(own, page, { interval: bucket });\n  };\n  // One answer per scorer in each list, in `scorers`' order.\n  const means = useDashboardRequests(scorers.map(({ scorerId }) => send(averageQuery, scorerId)));\n  const points = useDashboardRequests(scorers.map(({ scorerId }) => send(seriesQuery, scorerId, interval)));\n\n  const all = [recent, ...means, ...points].filter(r => r !== undefined);\n  const failed = all.filter(r => r.isError);\n  if (failed.length > 0) {\n    return (\n      <ChartCard {...heading}>\n        <ChartCardError error={failed[0]?.error} onRetry={() => failed.forEach(r => void r.refetch())} />\n      </ChartCard>\n    );\n  }\n\n  const isLoading = all.some(r => r.isLoading);\n  const { buckets, lines } = shapeScores(\n    isLoading ? [] : scorers,\n    means.map(r => r?.data),\n    points.map(r => r?.data),\n    page.window,\n    stepHours,\n  );\n  const series: MetricsLineChartSeries[] = lines.map(({ scorerId, name }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n  }));\n\n  return (\n    <ChartCard {...heading} isUpdating={all.some(r => r.isRefetching)}>\n      <ChartArea isEmpty={!isLoading && lines.length === 0} emptyMessage={options.emptyMessage}>\n        <MetricsLineChart\n          lineStyle=\"thin\"\n          data={isLoading ? [] : buckets}\n          series={series}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={FORMATTERS.score.value}\n          axisFormatter={FORMATTERS.score.axis}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAM,gBAAgB;CACpB,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;AACf;AAEA,SAAgB,aAAa,EAAE,QAAQ,OAAO,UAA0C;CACtF,MAAM,CAAC,QAAQ;CAEf,MAAM,UAAU,UAAU,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM;CAC7D,OACE,oBAAC,UAAD;EAAU,SAAS,KAAK;EAAS,eAAe;EAC7C,WAAA,SAAQ,oBAAC,YAAD;GAAqB;GAAe;GAAY;EAAO,CAAA;CACxD,CAAA;AAEd;AAEA,SAAS,WAAW,EAClB,SACA,MACA,QAKC;CACD,MAAM,EAAE,YAAY;CACpB,MAAM,EAAE,aAAa,WAAW,KAAK,OAAO,OAAO,KAAK,OAAO,GAAG;CAClE,MAAM,YAAY,cAAc,QAAQ;CACxC,MAAM,EAAE,QAAQ,YAAY,WAAW,KAAK,SAAS,IAAI;CACzD,MAAM,eAAe,KAAK,QAAQ,MAAK,MAAK,EAAE,OAAO,QAAQ,OAAO;CACpE,MAAM,cAAc,KAAK,QAAQ,MAAK,MAAK,EAAE,OAAO,QAAQ,MAAM;CAClE,MAAM,QAAQ,OAAmC,UAAkB,WAA6B;EAC9F,MAAM,MAAM,WAAW,OAAO,QAAQ;EACtC,OAAO,OAAO,aAAa,KAAK,MAAM,EAAE,UAAU,OAAO,CAAC;CAC5D;CAEA,MAAM,QAAQ,qBAAqB,QAAQ,KAAK,EAAE,eAAe,KAAK,cAAc,QAAQ,CAAC,CAAC;CAC9F,MAAM,SAAS,qBAAqB,QAAQ,KAAK,EAAE,eAAe,KAAK,aAAa,UAAU,QAAQ,CAAC,CAAC;CAExG,MAAM,MAAM;EAAC;EAAQ,GAAG;EAAO,GAAG;CAAM,CAAC,CAAC,QAAO,MAAK,MAAM,KAAA,CAAS;CACrE,MAAM,SAAS,IAAI,QAAO,MAAK,EAAE,OAAO;CACxC,IAAI,OAAO,SAAS,GAClB,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD;GAAgB,OAAO,OAAO,EAAE,EAAE;GAAO,eAAe,OAAO,SAAQ,MAAK,KAAK,EAAE,QAAQ,CAAC;EAAI,CAAA;CACvF,CAAA;CAIf,MAAM,YAAY,IAAI,MAAK,MAAK,EAAE,SAAS;CAC3C,MAAM,EAAE,SAAS,UAAU,YACzB,YAAY,CAAC,IAAI,SACjB,MAAM,KAAI,MAAK,GAAG,IAAI,GACtB,OAAO,KAAI,MAAK,GAAG,IAAI,GACvB,KAAK,QACL,SACF;CACA,MAAM,SAAmC,MAAM,KAAK,EAAE,UAAU,QAAQ,OAAO;EAC7E,SAAS;EACT,OAAO;EACP,OAAO,cAAc,IAAI,cAAc,WAAW,aAAa;CACjE,EAAE;CAEF,OACE,oBAAC,WAAD;EAAW,GAAI;EAAS,YAAY,IAAI,MAAK,MAAK,EAAE,YAAY;EAC9D,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,MAAM,WAAW;GAAG,cAAc,QAAQ;GAC1E,UAAA,oBAAC,kBAAD;IACE,WAAU;IACV,MAAM,YAAY,CAAC,IAAI;IACf;IACR,QAAO;IACP,SAAS,CAAC,GAAG,CAAC;IACd,gBAAgB,WAAW,MAAM;IACjC,eAAe,WAAW,MAAM;IACrB;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"scores-widget.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/scores/scores-widget.tsx"],"sourcesContent":["import type { DashboardQuery } from '@mastra/client-js';\nimport { ChartArea } from '../../../metrics/components/chart-area';\nimport { ChartCard } from '../../../metrics/components/chart-card';\nimport { ChartCardError } from '../../../metrics/components/chart-card-error';\nimport { BUCKET_AXIS } from '../../../metrics/lib/chart-axis';\nimport { CHART_COLORS } from '../../../metrics/lib/chart-colors';\nimport { bucketPlan, intervalHours } from '../../../metrics/lib/metrics-buckets';\nimport { ViewGate } from '../../components/view-gate';\nimport { PendingChartCard } from '../../components/widget-chrome';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useScorers } from '../../hooks/use-scorers';\nimport { viewTitle } from '../../lib/chrome';\nimport type { ViewHeading } from '../../lib/chrome';\nimport { FORMATTERS } from '../../lib/format';\nimport { pinActions } from '../../lib/pin-actions';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { shapeScores, withScorer } from '../../lib/scores';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\nimport type { ScoresOptions } from './options';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nexport function ScoresWidget({ widget, views, expand, dragHandle, pin }: WidgetKindProps<ScoresOptions>) {\n  const [view] = views;\n  // Scores show their first view only, so the title is plain or, with somewhere to expand to, a link.\n  const heading = {\n    ...viewTitle(widget, [view], 0, () => {}, expand),\n    dragHandle,\n    ...pinActions(pin),\n  };\n  return (\n    // The card, and its pin, stay while the view waits, so a pinned widget can still be unpinned.\n    <ViewGate queries={view.queries} pending={gate => <PendingChartCard gate={gate} heading={heading} />}>\n      {page => <ScoresView heading={heading} view={view} page={page} />}\n    </ViewGate>\n  );\n}\n\nfunction ScoresView({\n  heading,\n  view,\n  page,\n}: {\n  heading: ViewHeading;\n  view: ResolvedView<ScoresOptions>;\n  page: DashboardPageContext;\n}) {\n  const { options } = view;\n  const { interval } = bucketPlan(page.window.start, page.window.end);\n  const stepHours = intervalHours(interval);\n  const { recent, scorers } = useScorers(view.queries, page);\n  const averageQuery = view.queries.find(q => q.id === options.average);\n  const seriesQuery = view.queries.find(q => q.id === options.series);\n  const send = (query: DashboardQuery | undefined, scorerId: string, bucket?: typeof interval) => {\n    const own = withScorer(query, scorerId);\n    return own && buildRequest(own, page, { interval: bucket });\n  };\n  // One answer per scorer in each list, in `scorers`' order.\n  const means = useDashboardRequests(scorers.map(({ scorerId }) => send(averageQuery, scorerId)));\n  const points = useDashboardRequests(scorers.map(({ scorerId }) => send(seriesQuery, scorerId, interval)));\n\n  const all = [recent, ...means, ...points].filter(r => r !== undefined);\n  const failed = all.filter(r => r.isError);\n  if (failed.length > 0) {\n    return (\n      <ChartCard {...heading}>\n        <ChartCardError error={failed[0]?.error} onRetry={() => failed.forEach(r => void r.refetch())} />\n      </ChartCard>\n    );\n  }\n\n  const isLoading = all.some(r => r.isLoading);\n  const { buckets, lines } = shapeScores(\n    isLoading ? [] : scorers,\n    means.map(r => r?.data),\n    points.map(r => r?.data),\n    page.window,\n    stepHours,\n  );\n  const series: MetricsLineChartSeries[] = lines.map(({ scorerId, name }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n  }));\n\n  return (\n    <ChartCard {...heading} isUpdating={all.some(r => r.isRefetching)}>\n      <ChartArea isEmpty={!isLoading && lines.length === 0} emptyMessage={options.emptyMessage}>\n        <MetricsLineChart\n          lineStyle=\"thin\"\n          data={isLoading ? [] : buckets}\n          series={series}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={FORMATTERS.score.value}\n          axisFormatter={FORMATTERS.score.axis}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAM,gBAAgB;CACpB,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;AACf;AAEA,SAAgB,aAAa,EAAE,QAAQ,OAAO,QAAQ,YAAY,OAAuC;CACvG,MAAM,CAAC,QAAQ;CAEf,MAAM,UAAU;EACd,GAAG,UAAU,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM;EAChD;EACA,GAAG,WAAW,GAAG;CACnB;CACA,OAEE,oBAAC,UAAD;EAAU,SAAS,KAAK;EAAS,UAAS,SAAQ,oBAAC,kBAAD;GAAwB;GAAe;EAAU,CAAA;EAChG,WAAA,SAAQ,oBAAC,YAAD;GAAqB;GAAe;GAAY;EAAO,CAAA;CACxD,CAAA;AAEd;AAEA,SAAS,WAAW,EAClB,SACA,MACA,QAKC;CACD,MAAM,EAAE,YAAY;CACpB,MAAM,EAAE,aAAa,WAAW,KAAK,OAAO,OAAO,KAAK,OAAO,GAAG;CAClE,MAAM,YAAY,cAAc,QAAQ;CACxC,MAAM,EAAE,QAAQ,YAAY,WAAW,KAAK,SAAS,IAAI;CACzD,MAAM,eAAe,KAAK,QAAQ,MAAK,MAAK,EAAE,OAAO,QAAQ,OAAO;CACpE,MAAM,cAAc,KAAK,QAAQ,MAAK,MAAK,EAAE,OAAO,QAAQ,MAAM;CAClE,MAAM,QAAQ,OAAmC,UAAkB,WAA6B;EAC9F,MAAM,MAAM,WAAW,OAAO,QAAQ;EACtC,OAAO,OAAO,aAAa,KAAK,MAAM,EAAE,UAAU,OAAO,CAAC;CAC5D;CAEA,MAAM,QAAQ,qBAAqB,QAAQ,KAAK,EAAE,eAAe,KAAK,cAAc,QAAQ,CAAC,CAAC;CAC9F,MAAM,SAAS,qBAAqB,QAAQ,KAAK,EAAE,eAAe,KAAK,aAAa,UAAU,QAAQ,CAAC,CAAC;CAExG,MAAM,MAAM;EAAC;EAAQ,GAAG;EAAO,GAAG;CAAM,CAAC,CAAC,QAAO,MAAK,MAAM,KAAA,CAAS;CACrE,MAAM,SAAS,IAAI,QAAO,MAAK,EAAE,OAAO;CACxC,IAAI,OAAO,SAAS,GAClB,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD;GAAgB,OAAO,OAAO,EAAE,EAAE;GAAO,eAAe,OAAO,SAAQ,MAAK,KAAK,EAAE,QAAQ,CAAC;EAAI,CAAA;CACvF,CAAA;CAIf,MAAM,YAAY,IAAI,MAAK,MAAK,EAAE,SAAS;CAC3C,MAAM,EAAE,SAAS,UAAU,YACzB,YAAY,CAAC,IAAI,SACjB,MAAM,KAAI,MAAK,GAAG,IAAI,GACtB,OAAO,KAAI,MAAK,GAAG,IAAI,GACvB,KAAK,QACL,SACF;CACA,MAAM,SAAmC,MAAM,KAAK,EAAE,UAAU,QAAQ,OAAO;EAC7E,SAAS;EACT,OAAO;EACP,OAAO,cAAc,IAAI,cAAc,WAAW,aAAa;CACjE,EAAE;CAEF,OACE,oBAAC,WAAD;EAAW,GAAI;EAAS,YAAY,IAAI,MAAK,MAAK,EAAE,YAAY;EAC9D,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,MAAM,WAAW;GAAG,cAAc,QAAQ;GAC1E,UAAA,oBAAC,kBAAD;IACE,WAAU;IACV,MAAM,YAAY,CAAC,IAAI;IACf;IACR,QAAO;IACP,SAAS,CAAC,GAAG,CAAC;IACd,gBAAgB,WAAW,MAAM;IACjC,eAAe,WAAW,MAAM;IACrB;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/dashboards/kinds/table/table-cells.cjs.js

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_dashboards_lib_table = require("../../lib/table.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_figure = require("../../../metrics/components/breakdown/breakdown-figure.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_name = require("../../../metrics/components/breakdown/breakdown-name.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_not_priced = require("../../../metrics/components/breakdown/breakdown-not-priced.cjs.js");
@@ -7,6 +6,7 @@ const require_domains_metrics_components_breakdown_breakdown_row_mark = require(
 const require_domains_metrics_components_breakdown_breakdown_text = require("../../../metrics/components/breakdown/breakdown-text.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_trend_text = require("../../../metrics/components/breakdown/breakdown-trend-text.cjs.js");
 const require_domains_metrics_hooks_use_metrics_scope = require("../../../metrics/hooks/use-metrics-scope.cjs.js");
+const require_domains_dashboards_lib_table = require("../../lib/table.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/dashboards/kinds/table/table-cells.tsx
 function RowMark({ mark, row }) {

package/dist/domains/dashboards/kinds/table/table-cells.es.js

@@ -1,4 +1,3 @@
-import { changeTrend, formatChange, formatValue } from "../../lib/table.es.js";
 import { BreakdownFigure } from "../../../metrics/components/breakdown/breakdown-figure.es.js";
 import { BreakdownName } from "../../../metrics/components/breakdown/breakdown-name.es.js";
 import { BreakdownNotPriced } from "../../../metrics/components/breakdown/breakdown-not-priced.es.js";
@@ -6,6 +5,7 @@ import { BreakdownEntityMark, BreakdownModelMark } from "../../../metrics/compon
 import { BreakdownText } from "../../../metrics/components/breakdown/breakdown-text.es.js";
 import { BreakdownTrendText } from "../../../metrics/components/breakdown/breakdown-trend-text.es.js";
 import { useMetricsScope } from "../../../metrics/hooks/use-metrics-scope.es.js";
+import { changeTrend, formatChange, formatValue } from "../../lib/table.es.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/dashboards/kinds/table/table-cells.tsx
 function RowMark({ mark, row }) {

package/dist/domains/dashboards/kinds/table/table-tabs.cjs.js

@@ -1,13 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
 const require_domains_dashboards_hooks_use_dashboard_requests = require("../../hooks/use-dashboard-requests.cjs.js");
-const require_domains_dashboards_lib_values = require("../../lib/values.cjs.js");
-const require_MetricsCard = require("../../../../MetricsCard-BEwiS7Pe.cjs");
+const require_domains_dashboards_hooks_use_widget_views = require("../../hooks/use-widget-views.cjs.js");
 const require_domains_dashboards_lib_chrome = require("../../lib/chrome.cjs.js");
+const require_domains_dashboards_lib_pin_actions = require("../../lib/pin-actions.cjs.js");
+const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
 const require_domains_dashboards_lib_table = require("../../lib/table.cjs.js");
-const require_domains_dashboards_hooks_use_widget_views = require("../../hooks/use-widget-views.cjs.js");
+const require_domains_dashboards_lib_values = require("../../lib/values.cjs.js");
 const require_domains_dashboards_kinds_table_table_frame = require("./table-frame.cjs.js");
 const require_domains_dashboards_kinds_table_table_view = require("./table-view.cjs.js");
+const require_MetricsCard = require("../../../../MetricsCard-DojbLiEx.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/dashboards/kinds/table/table-tabs.tsx
 /** Filters an aggregate can't apply, named as the filter bar names them. */
@@ -37,7 +38,13 @@ function TableTabs({ page, blocked, ...props }) {
 	const opener = openerSource(props.views, blocked);
 	const openerResults = require_domains_dashboards_hooks_use_dashboard_requests.useDashboardRequests(opener?.queries.map((q) => require_domains_dashboards_lib_requests.buildRequest(q, page, {})) ?? []);
 	const rows = opener ? require_domains_dashboards_lib_table.countRows(opener.view.options, opener.column, opener.queries, openerResults.map((r) => r?.data)) : "uncountable";
-	const { view, index, heading } = require_domains_dashboards_hooks_use_widget_views.useViewMenu(props.widget, props.views, require_domains_dashboards_lib_table.openingView(props.views, rows));
+	const menu = require_domains_dashboards_hooks_use_widget_views.useViewMenu(props.widget, props.views, require_domains_dashboards_lib_table.openingView(props.views, rows));
+	const { view, index } = menu;
+	const heading = {
+		...menu.heading,
+		dragHandle: props.dragHandle,
+		...require_domains_dashboards_lib_pin_actions.pinActions(props.pin)
+	};
 	const unsupported = blocked(view.queries);
 	if (unsupported) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_frame.TableFrame, {
 		heading,