@burdenoff/microfe-bigconsole 2026.924.1 → 2026.924.3

package/dist/bigconsole/components/preview/AiPreviewPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build, with the real content inline.\n *\n * Opens by itself the moment a prompt starts. A step rail (driven by the agent's\n * own narration) shows DataSink → Dashboard → Parser → Widget filling in, and\n * the four tabs show the ACTUAL content of each entity as it lands — the data\n * sink's rows, the live dashboard, the parser's transformed output, the rendered\n * widget charts — not a list of links. Each tab has an \"Open\" button that jumps\n * to the real page.\n *\n * The content renderers need Apollo + the BigConsole providers, which is why\n * this full panel lives inside BigConsoleRoot; the store-only app-shell mini\n * panel (AiPreviewMiniPanel) keeps the lighter link view for other pages.\n *\n * ★★★ THE SHELL, RAIL AND TABS ARE fe-libs' NOW (`AssistantEntityPreview`).\n * What stays here is what is actually BigConsole's: which entities exist, how to\n * render each one, and where the panel sits relative to the assistant sidebar.\n * The shared surface brought three things this file could not have on its own:\n *\n *  - a viewer's tab choice is HONOURED. The local `useEffect` re-selected a tab\n *    on every store tick, so clicking one held for about 1.5 seconds before the\n *    next progress update took it back — you could not read a tab while the\n *    build continued.\n *  - the rail can show a FAILED step instead of drawing a failure as \"not\n *    started\" (the store still cannot produce one — see `assistantRunStore` —\n *    but the surface no longer loses it if it ever does).\n *  - keyboard navigation across the tabs, which the Radix tablist here never\n *    had overflow handling for below ~430px.\n */\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport {\n  AssistantEntityPreview,\n  type AssistantPreviewStep,\n  type AssistantPreviewTab,\n} from '@burdenoff/fe-libs/shared/assistant';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { Section } from '../common';\nimport { DOCK_CLEARANCE, PreviewMeta, STEP_LABEL, formatAgo, previewLabels } from './previewShared';\nimport { DashboardContent, DataSinkContent, ParserContent, WidgetsContent } from './AiPreviewContent';\n\n/**\n * The scroll box each tab's content sits in.\n *\n * ★★ The cap is NOT cosmetic and does not belong in fe-libs: the shared surface\n * is laid out by whatever contains it, and this panel is injected ABOVE a\n * routed page — so without a cap a long data-sink preview pushes the whole page\n * down. `min(440px, 60vh)` is the original value; the hard 440px alone ate most\n * of the fold on a short laptop screen.\n */\nfunction TabBody({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"min-w-0 overflow-y-auto p-3\" style={{ maxHeight: 'min(440px, 60vh)' }}>\n      {children}\n    </div>\n  );\n}\n\n/** Jump-to-the-real-page button, shared by all four tabs. */\nfunction OpenEntityButton({ onOpen }: { onOpen: () => void }) {\n  const { t } = useI18n();\n  return (\n    <Button size=\"sm\" variant=\"outline\" onClick={onOpen} data-testid=\"ai-preview-open-entity\">\n      {t('bigconsole.widget.aiPreview.open', 'Open')}\n      <ArrowUpRight className=\"ml-1 size-3.5\" />\n    </Button>\n  );\n}\n\nexport function AiPreviewPanel() {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n\n  const isRunning = useAssistantRunStore((state) => state.isRunning);\n  const previewOpen = useAssistantRunStore((state) => state.previewOpen);\n  const hasRun = useAssistantRunStore((state) => state.hasRun);\n  const steps = useAssistantRunStore((state) => state.steps);\n  const entityIds = useAssistantRunStore((state) => state.entityIds);\n  const caption = useAssistantRunStore((state) => state.caption);\n  const error = useAssistantRunStore((state) => state.error);\n  const updatedAt = useAssistantRunStore((state) => state.updatedAt);\n  const openPreview = useAssistantRunStore((state) => state.openPreview);\n  const closePreview = useAssistantRunStore((state) => state.closePreview);\n  const setRichMounted = useAssistantRunStore((state) => state.setRichMounted);\n\n  useEffect(() => {\n    setRichMounted(true);\n    return () => {\n      setRichMounted(false);\n    };\n  }, [setRichMounted]);\n\n  /**\n   * ★★★ WHAT COUNTS AS A \"RUN\" HERE, for the purpose of releasing a pinned tab.\n   *\n   * The store has no run id and deliberately never resets — a new prompt\n   * CONTINUES the same build, preserving every step and entity id already made\n   * (`assistantRunStore.startRun`). So the key is minted here, on the rising\n   * edge of `isRunning`: each new turn is a new run, which releases a tab the\n   * viewer pinned during the previous one. That is the right side to err on —\n   * asking for something new and being shown the old tab is worse than losing a\n   * pin you made a turn ago.\n   */\n  const [runKey, setRunKey] = useState(0);\n  const wasRunningRef = useRef(false);\n  useEffect(() => {\n    if (isRunning && !wasRunningRef.current) setRunKey((n) => n + 1);\n    wasRunningRef.current = isRunning;\n  }, [isRunning]);\n\n  if (!hasRun) return null;\n\n  if (!previewOpen) {\n    return (\n      <div\n        className=\"flex flex-wrap items-center justify-end gap-control-gap px-4 pt-3 md:px-6\"\n        style={{ marginRight: DOCK_CLEARANCE }}\n      >\n        {/* The lone button gave no clue what it belonged to. */}\n        <span className=\"text-xs text-text-muted\">\n          {isRunning\n            ? t('bigconsole.widget.aiPreview.buildRunning', 'AI build running')\n            : t('bigconsole.widget.aiPreview.buildFinished', 'AI build finished')}\n        </span>\n        <Button size=\"sm\" variant=\"outline\" onClick={openPreview} data-testid=\"ai-preview-open\">\n          <Sparkles className=\"mr-1.5 size-4\" />\n          {t('bigconsole.widget.aiPreview.previewButton', 'Preview')}\n          {isRunning ? <Loader2 className=\"ml-1.5 size-3.5 animate-spin\" /> : null}\n        </Button>\n      </div>\n    );\n  }\n\n  const dashboardId = entityIds.dashboard;\n\n  const railSteps: AssistantPreviewStep[] = PREVIEW_STEPS.map((key) => ({\n    id: key,\n    label: t(STEP_LABEL[key].key, STEP_LABEL[key].fallback),\n    status: steps[key],\n  }));\n\n  const tabs: AssistantPreviewTab[] = [\n    {\n      id: 'datasink',\n      label: t('bigconsole.widget.aiPreview.tab.dataSink', 'Data Sink'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.dataSinkRows', 'Data sink rows')}\n            description={t(\n              'bigconsole.widget.aiPreview.dataSinkRowsHint',\n              'The rows the assistant just landed, straight from the sink.'\n            )}\n            actions={\n              entityIds.datasink ? (\n                <OpenEntityButton onOpen={() => navigate(`/datasinks/${entityIds.datasink}`)} />\n              ) : undefined\n            }\n          >\n            <DataSinkContent id={entityIds.datasink} live={isRunning} />\n          </Section>\n        </TabBody>\n      ),\n    },\n    {\n      id: 'dashboard',\n      label: t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard')}\n            description={t(\n              'bigconsole.widget.aiPreview.dashboardHint',\n              'The live board, rendered exactly as the real page renders it.'\n            )}\n            actions={\n              dashboardId ? <OpenEntityButton onOpen={() => navigate(`/dashboards/${dashboardId}`)} /> : undefined\n            }\n          >\n            <DashboardContent dashboardId={dashboardId} />\n          </Section>\n        </TabBody>\n      ),\n    },\n    {\n      id: 'parser',\n      label: t('bigconsole.widget.aiPreview.tab.parser', 'Parser'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.parserOutput', 'Parser output')}\n            description={t(\n              'bigconsole.widget.aiPreview.parserOutputHint',\n              \"The rows after the parser's transform, so you can check the shape.\"\n            )}\n            actions={\n              entityIds.parser ? (\n                <OpenEntityButton onOpen={() => navigate(`/parsers/${entityIds.parser}`)} />\n              ) : undefined\n            }\n          >\n            <ParserContent parserId={entityIds.parser} live={isRunning} />\n          </Section>\n        </TabBody>\n      ),\n    },\n    {\n      id: 'widget',\n      label: t('bigconsole.widget.aiPreview.tab.widget', 'Widget'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.widgets', 'Widgets')}\n            description={t(\n              'bigconsole.widget.aiPreview.widgetsHint',\n              'Every widget on the new dashboard, rendered live.'\n            )}\n            actions={\n              dashboardId ? <OpenEntityButton onOpen={() => navigate(`/dashboards/${dashboardId}`)} /> : undefined\n            }\n          >\n            <WidgetsContent dashboardId={dashboardId} live={isRunning} />\n          </Section>\n        </TabBody>\n      ),\n    },\n  ];\n\n  return (\n    // ★ The wrapper owns POSITIONING only — clearance for the assistant dock,\n    // page gutters, and the testid BigConsole already had. Everything visual\n    // belongs to the shared surface.\n    //\n    // ★★ PADDING, not margin: `mx-4 md:mx-6` is the page gutter and it is\n    // RESPONSIVE. See DOCK_CLEARANCE's docblock.\n    <div data-testid=\"ai-preview-panel\" style={{ paddingRight: DOCK_CLEARANCE }} className=\"mx-4 mt-3 min-w-0 md:mx-6\">\n      {/* ★★ The panel's own heading, restored. The shared surface renders its\n          title as a styled <span> inside a <section aria-label>, which labels\n          the region but leaves NO heading — while it still renders an <h3> for\n          the step rail. main had <h2>AI Preview</h2> above that <h3>, so the\n          migration both removed the panel from screen-reader heading navigation\n          and orphaned the h3 under whatever <h2> the page beneath happens to\n          end with. Visually hidden because the surface already shows the title;\n          this only restores the structure. */}\n      <h2 className=\"sr-only\">{t('bigconsole.widget.aiPreview.title', 'AI Preview')}</h2>\n      <AssistantEntityPreview\n        title={t('bigconsole.widget.aiPreview.title', 'AI Preview')}\n        runKey={String(runKey)}\n        steps={railSteps}\n        tabs={tabs}\n        // ★ Explicit, though it is the default: this panel's own rule was\n        // \"show the LATEST thing that actually landed — so the moment the data\n        // sink is created you see its rows, not an empty 'waiting for the\n        // dashboard' tab\". Stating it keeps that reasoning attached to the\n        // consumer that discovered it, not only to the library that adopted it.\n        follow=\"produced\"\n        // ★★ TWO branches, not three, and deliberately so: the shared surface\n        // renders `{error ? '' : caption}` — it BLANKS the caption whenever\n        // `error` is set, so a failure branch here would compute a string that\n        // is then discarded. The failure is named in `meta` instead, which\n        // `PreviewHeader` renders without consulting `error`.\n        caption={\n          isRunning\n            ? caption || t('bigconsole.widget.aiPreview.working', 'Working…')\n            : t('bigconsole.widget.aiPreview.done', 'Done')\n        }\n        error={error}\n        meta={\n          <PreviewMeta\n            state={isRunning ? 'running' : error ? 'stopped' : 'idle'}\n            stateLabel={\n              isRunning\n                ? t('bigconsole.widget.aiPreview.live', 'Live')\n                : error\n                  ? t('bigconsole.widget.aiPreview.stopped', 'Stopped')\n                  : null\n            }\n            updatedLabel={t('bigconsole.widget.aiPreview.updated', 'updated')}\n            updatedAt={updatedAt}\n            ago={(seconds) => formatAgo(seconds, t)}\n          />\n        }\n        headerActions={\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            onClick={closePreview}\n            aria-label={t('bigconsole.widget.aiPreview.closeAriaLabel', 'Close preview')}\n            data-testid=\"ai-preview-close\"\n          >\n            <X className=\"size-4\" />\n          </Button>\n        }\n        labels={previewLabels(t)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build, with the real content inline.\n *\n * Opens by itself the moment a prompt starts. A step rail (driven by the agent's\n * own narration) shows DataSink → Dashboard → Parser → Widget filling in, and\n * the four tabs show the ACTUAL content of each entity as it lands — the data\n * sink's rows, the live dashboard, the parser's transformed output, the rendered\n * widget charts — not a list of links. Each tab has an \"Open\" button that jumps\n * to the real page.\n *\n * The content renderers need Apollo + the BigConsole providers, which is why\n * this full panel lives inside BigConsoleRoot; the store-only app-shell mini\n * panel (AiPreviewMiniPanel) keeps the lighter link view for other pages.\n *\n * ★★★ THE SHELL, RAIL AND TABS ARE fe-libs' NOW (`AssistantEntityPreview`).\n * What stays here is what is actually BigConsole's: which entities exist, how to\n * render each one, and where the panel sits relative to the assistant sidebar.\n * The shared surface brought three things this file could not have on its own:\n *\n *  - a viewer's tab choice is HONOURED. The local `useEffect` re-selected a tab\n *    on every store tick, so clicking one held for about 1.5 seconds before the\n *    next progress update took it back — you could not read a tab while the\n *    build continued.\n *  - the rail can show a FAILED step instead of drawing a failure as \"not\n *    started\" (the store still cannot produce one — see `assistantRunStore` —\n *    but the surface no longer loses it if it ever does).\n *  - keyboard navigation across the tabs, which the Radix tablist here never\n *    had overflow handling for below ~430px.\n */\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport {\n  AssistantEntityPreview,\n  type AssistantPreviewStep,\n  type AssistantPreviewTab,\n} from '@burdenoff/fe-libs/shared/assistant';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useAssistantPanelShowsPreview } from '../../assistant/useAssistantPanelShowsPreview';\nimport { ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { Section } from '../common';\nimport { DOCK_CLEARANCE, PreviewMeta, STEP_LABEL, formatAgo, previewLabels } from './previewShared';\nimport { DashboardContent, DataSinkContent, ParserContent, WidgetsContent } from './AiPreviewContent';\n\n/**\n * The scroll box each tab's content sits in.\n *\n * ★★ The cap is NOT cosmetic and does not belong in fe-libs: the shared surface\n * is laid out by whatever contains it, and this panel is injected ABOVE a\n * routed page — so without a cap a long data-sink preview pushes the whole page\n * down. `min(440px, 60vh)` is the original value; the hard 440px alone ate most\n * of the fold on a short laptop screen.\n */\nfunction TabBody({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"min-w-0 overflow-y-auto p-3\" style={{ maxHeight: 'min(440px, 60vh)' }}>\n      {children}\n    </div>\n  );\n}\n\n/** Jump-to-the-real-page button, shared by all four tabs. */\nfunction OpenEntityButton({ onOpen }: { onOpen: () => void }) {\n  const { t } = useI18n();\n  return (\n    <Button size=\"sm\" variant=\"outline\" onClick={onOpen} data-testid=\"ai-preview-open-entity\">\n      {t('bigconsole.widget.aiPreview.open', 'Open')}\n      <ArrowUpRight className=\"ml-1 size-3.5\" />\n    </Button>\n  );\n}\n\nexport function AiPreviewPanel() {\n  const { t } = useI18n();\n  // ★★★ ONE SURFACE PER RUN. fe-libs renders this same controller inside its own\n  // in-chat overlay; without this the page surface stayed up beside it and one\n  // run was drawn twice, side by side (measured in prod, BOFF-7799).\n  const panelShowsPreview = useAssistantPanelShowsPreview();\n  const navigate = useBigConsoleNavigate();\n\n  const isRunning = useAssistantRunStore((state) => state.isRunning);\n  const previewOpen = useAssistantRunStore((state) => state.previewOpen);\n  const hasRun = useAssistantRunStore((state) => state.hasRun);\n  const steps = useAssistantRunStore((state) => state.steps);\n  const entityIds = useAssistantRunStore((state) => state.entityIds);\n  const caption = useAssistantRunStore((state) => state.caption);\n  const error = useAssistantRunStore((state) => state.error);\n  const updatedAt = useAssistantRunStore((state) => state.updatedAt);\n  const openPreview = useAssistantRunStore((state) => state.openPreview);\n  const closePreview = useAssistantRunStore((state) => state.closePreview);\n  const setRichMounted = useAssistantRunStore((state) => state.setRichMounted);\n\n  useEffect(() => {\n    setRichMounted(true);\n    return () => {\n      setRichMounted(false);\n    };\n  }, [setRichMounted]);\n\n  /**\n   * ★★★ WHAT COUNTS AS A \"RUN\" HERE, for the purpose of releasing a pinned tab.\n   *\n   * The store has no run id and deliberately never resets — a new prompt\n   * CONTINUES the same build, preserving every step and entity id already made\n   * (`assistantRunStore.startRun`). So the key is minted here, on the rising\n   * edge of `isRunning`: each new turn is a new run, which releases a tab the\n   * viewer pinned during the previous one. That is the right side to err on —\n   * asking for something new and being shown the old tab is worse than losing a\n   * pin you made a turn ago.\n   */\n  const [runKey, setRunKey] = useState(0);\n  const wasRunningRef = useRef(false);\n  useEffect(() => {\n    if (isRunning && !wasRunningRef.current) setRunKey((n) => n + 1);\n    wasRunningRef.current = isRunning;\n  }, [isRunning]);\n\n  if (!hasRun) return null;\n  // The shared panel's overlay is already showing this run — stand down rather\n  // than draw it a second time beside itself.\n  if (panelShowsPreview) return null;\n\n  if (!previewOpen) {\n    return (\n      <div\n        className=\"flex flex-wrap items-center justify-end gap-control-gap px-4 pt-3 md:px-6\"\n        style={{ marginRight: DOCK_CLEARANCE }}\n      >\n        {/* The lone button gave no clue what it belonged to. */}\n        <span className=\"text-xs text-text-muted\">\n          {isRunning\n            ? t('bigconsole.widget.aiPreview.buildRunning', 'AI build running')\n            : t('bigconsole.widget.aiPreview.buildFinished', 'AI build finished')}\n        </span>\n        <Button size=\"sm\" variant=\"outline\" onClick={openPreview} data-testid=\"ai-preview-open\">\n          <Sparkles className=\"mr-1.5 size-4\" />\n          {t('bigconsole.widget.aiPreview.previewButton', 'Preview')}\n          {isRunning ? <Loader2 className=\"ml-1.5 size-3.5 animate-spin\" /> : null}\n        </Button>\n      </div>\n    );\n  }\n\n  const dashboardId = entityIds.dashboard;\n\n  const railSteps: AssistantPreviewStep[] = PREVIEW_STEPS.map((key) => ({\n    id: key,\n    label: t(STEP_LABEL[key].key, STEP_LABEL[key].fallback),\n    status: steps[key],\n  }));\n\n  const tabs: AssistantPreviewTab[] = [\n    {\n      id: 'datasink',\n      label: t('bigconsole.widget.aiPreview.tab.dataSink', 'Data Sink'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.dataSinkRows', 'Data sink rows')}\n            description={t(\n              'bigconsole.widget.aiPreview.dataSinkRowsHint',\n              'The rows the assistant just landed, straight from the sink.'\n            )}\n            actions={\n              entityIds.datasink ? (\n                <OpenEntityButton onOpen={() => navigate(`/datasinks/${entityIds.datasink}`)} />\n              ) : undefined\n            }\n          >\n            <DataSinkContent id={entityIds.datasink} live={isRunning} />\n          </Section>\n        </TabBody>\n      ),\n    },\n    {\n      id: 'dashboard',\n      label: t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard')}\n            description={t(\n              'bigconsole.widget.aiPreview.dashboardHint',\n              'The live board, rendered exactly as the real page renders it.'\n            )}\n            actions={\n              dashboardId ? <OpenEntityButton onOpen={() => navigate(`/dashboards/${dashboardId}`)} /> : undefined\n            }\n          >\n            <DashboardContent dashboardId={dashboardId} />\n          </Section>\n        </TabBody>\n      ),\n    },\n    {\n      id: 'parser',\n      label: t('bigconsole.widget.aiPreview.tab.parser', 'Parser'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.parserOutput', 'Parser output')}\n            description={t(\n              'bigconsole.widget.aiPreview.parserOutputHint',\n              \"The rows after the parser's transform, so you can check the shape.\"\n            )}\n            actions={\n              entityIds.parser ? (\n                <OpenEntityButton onOpen={() => navigate(`/parsers/${entityIds.parser}`)} />\n              ) : undefined\n            }\n          >\n            <ParserContent parserId={entityIds.parser} live={isRunning} />\n          </Section>\n        </TabBody>\n      ),\n    },\n    {\n      id: 'widget',\n      label: t('bigconsole.widget.aiPreview.tab.widget', 'Widget'),\n      render: () => (\n        <TabBody>\n          <Section\n            emphasis=\"standard\"\n            padding=\"compact\"\n            headingLevel={3}\n            title={t('bigconsole.widget.aiPreview.widgets', 'Widgets')}\n            description={t(\n              'bigconsole.widget.aiPreview.widgetsHint',\n              'Every widget on the new dashboard, rendered live.'\n            )}\n            actions={\n              dashboardId ? <OpenEntityButton onOpen={() => navigate(`/dashboards/${dashboardId}`)} /> : undefined\n            }\n          >\n            <WidgetsContent dashboardId={dashboardId} live={isRunning} />\n          </Section>\n        </TabBody>\n      ),\n    },\n  ];\n\n  return (\n    // ★ The wrapper owns POSITIONING only — clearance for the assistant dock,\n    // page gutters, and the testid BigConsole already had. Everything visual\n    // belongs to the shared surface.\n    //\n    // ★★ PADDING, not margin: `mx-4 md:mx-6` is the page gutter and it is\n    // RESPONSIVE. See DOCK_CLEARANCE's docblock.\n    <div data-testid=\"ai-preview-panel\" style={{ paddingRight: DOCK_CLEARANCE }} className=\"mx-4 mt-3 min-w-0 md:mx-6\">\n      {/* ★★ The panel's own heading, restored. The shared surface renders its\n          title as a styled <span> inside a <section aria-label>, which labels\n          the region but leaves NO heading — while it still renders an <h3> for\n          the step rail. main had <h2>AI Preview</h2> above that <h3>, so the\n          migration both removed the panel from screen-reader heading navigation\n          and orphaned the h3 under whatever <h2> the page beneath happens to\n          end with. Visually hidden because the surface already shows the title;\n          this only restores the structure. */}\n      <h2 className=\"sr-only\">{t('bigconsole.widget.aiPreview.title', 'AI Preview')}</h2>\n      <AssistantEntityPreview\n        title={t('bigconsole.widget.aiPreview.title', 'AI Preview')}\n        runKey={String(runKey)}\n        steps={railSteps}\n        tabs={tabs}\n        // ★ Explicit, though it is the default: this panel's own rule was\n        // \"show the LATEST thing that actually landed — so the moment the data\n        // sink is created you see its rows, not an empty 'waiting for the\n        // dashboard' tab\". Stating it keeps that reasoning attached to the\n        // consumer that discovered it, not only to the library that adopted it.\n        follow=\"produced\"\n        // ★★ TWO branches, not three, and deliberately so: the shared surface\n        // renders `{error ? '' : caption}` — it BLANKS the caption whenever\n        // `error` is set, so a failure branch here would compute a string that\n        // is then discarded. The failure is named in `meta` instead, which\n        // `PreviewHeader` renders without consulting `error`.\n        caption={\n          isRunning\n            ? caption || t('bigconsole.widget.aiPreview.working', 'Working…')\n            : t('bigconsole.widget.aiPreview.done', 'Done')\n        }\n        error={error}\n        meta={\n          <PreviewMeta\n            state={isRunning ? 'running' : error ? 'stopped' : 'idle'}\n            stateLabel={\n              isRunning\n                ? t('bigconsole.widget.aiPreview.live', 'Live')\n                : error\n                  ? t('bigconsole.widget.aiPreview.stopped', 'Stopped')\n                  : null\n            }\n            updatedLabel={t('bigconsole.widget.aiPreview.updated', 'updated')}\n            updatedAt={updatedAt}\n            ago={(seconds) => formatAgo(seconds, t)}\n          />\n        }\n        headerActions={\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            onClick={closePreview}\n            aria-label={t('bigconsole.widget.aiPreview.closeAriaLabel', 'Close preview')}\n            data-testid=\"ai-preview-close\"\n          >\n            <X className=\"size-4\" />\n          </Button>\n        }\n        labels={previewLabels(t)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/ActionConfigDialog.js

@@ -4,9 +4,9 @@ import { BIGCONSOLE_PERMISSIONS as t } from "../../../constants/permissions.js";
 import { memo as n, useCallback as r, useEffect as ee, useMemo as i, useRef as te, useState as a } from "react";
 import { PermissionButton as ne } from "@burdenoff/fe-libs/shared/components";
 import { ChevronDown as re, ChevronRight as ie, Pencil as ae, Plus as oe, Zap as se } from "lucide-react";
-import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as le, Checkbox as o, Dialog as ue, DialogContent as de, DialogDescription as fe, DialogFooter as pe, DialogHeader as me, DialogTitle as he, Input as s, Select as c, SelectContent as l, SelectItem as u, SelectTrigger as d, SelectValue as f, Spinner as ge, Textarea as _e } from "@burdenoff/fe-libs/ui";
+import { Button as ce, Checkbox as o, Dialog as le, DialogContent as ue, DialogDescription as de, DialogFooter as fe, DialogHeader as pe, DialogTitle as me, Input as s, Select as c, SelectContent as l, SelectItem as u, SelectTrigger as d, SelectValue as f, Spinner as he, Textarea as ge } from "@burdenoff/fe-libs/ui";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useI18n as _e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
 var ve = [
 	"POST",
@@ -78,7 +78,7 @@ var g = {
 	boxShadow: "var(--shadow-elevation-3)",
 	borderRadius: "var(--radius-button)"
 }, y = n(function({ isOpen: n, action: y, initialWebhook: b, isLoading: x = !1, saveError: Se, onClose: Ce, onSave: we }) {
-	let { t: S } = ce(), C = !!y, Te = te(null), w = te(!1), [T, E] = a(""), [D, O] = a(""), [k, A] = a(!1), [j, M] = a("PRIMARY"), [N, Ee] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [W, De] = a(!1), [G, K] = a(!1), [q, J] = a(() => S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), [Oe, Y] = a(() => S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), [ke, X] = a(() => S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), [Ae, Z] = a(() => S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")), [Q, $] = a(null), je = i(() => [{
+	let { t: S } = _e(), C = !!y, Te = te(null), w = te(!1), [T, E] = a(""), [D, O] = a(""), [k, A] = a(!1), [j, M] = a("PRIMARY"), [N, Ee] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [W, De] = a(!1), [G, K] = a(!1), [q, J] = a(() => S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), [Oe, Y] = a(() => S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), [ke, X] = a(() => S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), [Ae, Z] = a(() => S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")), [Q, $] = a(null), je = i(() => [{
 		value: "WEBHOOK",
 		label: S("bigconsole.widget.actions.outcome.webhook.label", "Call a webhook / my API"),
 		hint: S("bigconsole.widget.actions.outcome.webhook.hint", "Sends an HTTP request to the URL below every time the button is clicked.")
@@ -210,16 +210,16 @@ var g = {
 		we,
 		S
 	]), Ie = (e) => Me.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Le = je.find((e) => e.value === P);
-	return /* @__PURE__ */ p(ue, {
+	return /* @__PURE__ */ p(le, {
 		open: n,
 		onOpenChange: (e) => !e && !x && Ce(),
-		children: /* @__PURE__ */ m(de, {
+		children: /* @__PURE__ */ m(ue, {
 			style: {
 				width: "min(500px, calc(100vw - 2rem))",
 				maxWidth: "calc(100vw - 2rem)",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ p(me, {
+			children: [/* @__PURE__ */ p(pe, {
 				style: { padding: "var(--space-cardPadding) var(--space-cardPadding) 0" },
 				children: /* @__PURE__ */ m("div", {
 					style: {
@@ -245,7 +245,7 @@ var g = {
 							width: "var(--size-icon-lg)",
 							color: "var(--color-action-primary-text)"
 						} })
-					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(he, {
+					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(me, {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-bold)",
@@ -253,7 +253,7 @@ var g = {
 							margin: 0
 						},
 						children: C ? S("bigconsole.widget.actions.header.editTitle", "Edit Button") : S("bigconsole.widget.actions.header.addTitle", "Add Button")
-					}), /* @__PURE__ */ p(fe, {
+					}), /* @__PURE__ */ p(de, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
@@ -588,7 +588,7 @@ var g = {
 											marginBottom: "var(--space-controlGap)"
 										},
 										children: S("bigconsole.widget.actions.confirm.messageLabel", "Message")
-									}), /* @__PURE__ */ p(_e, {
+									}), /* @__PURE__ */ p(ge, {
 										value: Oe,
 										onChange: (e) => Y(e.target.value),
 										rows: 2,
@@ -765,7 +765,7 @@ var g = {
 							})]
 						})
 					]
-				}), /* @__PURE__ */ m(pe, {
+				}), /* @__PURE__ */ m(fe, {
 					style: {
 						padding: "var(--space-formGap) var(--space-pagePadding)",
 						borderTop: "1px solid var(--color-border-subtle)",
@@ -774,7 +774,7 @@ var g = {
 						justifyContent: "flex-end",
 						gap: "var(--space-controlGap)"
 					},
-					children: [/* @__PURE__ */ p(le, {
+					children: [/* @__PURE__ */ p(ce, {
 						type: "button",
 						variant: "outline",
 						onClick: Ce,
@@ -784,7 +784,7 @@ var g = {
 					}), /* @__PURE__ */ p(ne, {
 						permission: C ? t.WIDGET_ACTION_UPDATE : t.WIDGET_ACTION_CREATE,
 						deniedBehavior: "disable",
-						children: /* @__PURE__ */ p(le, {
+						children: /* @__PURE__ */ p(ce, {
 							type: "submit",
 							disabled: x || !T.trim(),
 							style: {
@@ -797,7 +797,7 @@ var g = {
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
-								children: [/* @__PURE__ */ p(ge, { style: {
+								children: [/* @__PURE__ */ p(he, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} }), S("bigconsole.widget.actions.footer.saving", "Saving...")]

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js

@@ -1,12 +1,12 @@
-import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
-import { Section as t } from "../common/Section.js";
+import { ListDashboardsDocument as e } from "../../../generated/wspace-operations.js";
+import { SECTION_FOCUS_RING as t } from "../common/sectionStyles.js";
+import { Section as n } from "../common/Section.js";
 import "../common/index.js";
-import { ListDashboardsDocument as n } from "../../../generated/wspace-operations.js";
 import "../../hooks/useDrilldown.js";
 import { memo as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
 import { useApolloClient as c } from "@apollo/client/react";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/components/widgets/DrilldownConfigPanel.tsx
 var p = "min-h-control-md rounded-input border border-[var(--color-border-subtle)] bg-bg-surface py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface", m = `${p} w-full px-3`, h = "bg-action-primary-bg border-action-primary-bg", g = "bg-bg-sunken border-[var(--color-border-strong)]", _ = "bg-bg-surface shadow-[var(--shadow-elevation-1)]";
 function v(e, t = "") {
@@ -20,7 +20,7 @@ function v(e, t = "") {
 	return n;
 }
 var y = r(function({ widget: r, onChange: y, widgetData: b }) {
-	let { t: x } = l(), S = c(), [C, w] = s(r.drilldown?.enabled ?? !1), [T, E] = s(r.drilldown?.targetDashboardId ?? ""), [D, O] = s(r.drilldown?.navigationMode ?? "MODAL"), [k, A] = s(r.drilldown?.passGlobalFilters ?? !0), [j, M] = s(r.drilldown?.maxDepth ?? 3), [N, P] = s(r.drilldown?.openIn ?? "same"), [F, I] = s(() => {
+	let { t: x } = f(), S = c(), [C, w] = s(r.drilldown?.enabled ?? !1), [T, E] = s(r.drilldown?.targetDashboardId ?? ""), [D, O] = s(r.drilldown?.navigationMode ?? "MODAL"), [k, A] = s(r.drilldown?.passGlobalFilters ?? !0), [j, M] = s(r.drilldown?.maxDepth ?? 3), [N, P] = s(r.drilldown?.openIn ?? "same"), [F, I] = s(() => {
 		let e = r.drilldown?.parameterMapping;
 		return e ? Object.entries(e).map(([e, t]) => ({
 			key: e,
@@ -73,11 +73,11 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 		N,
 		W
 	]), a(() => {
-		async function e() {
+		async function t() {
 			B(!0);
 			try {
 				R(((await S.query({
-					query: n,
+					query: e,
 					variables: { first: 100 },
 					fetchPolicy: "cache-first"
 				})).data?.listDashboards?.edges || []).map((e) => {
@@ -91,7 +91,7 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 				B(!1);
 			}
 		}
-		e();
+		t();
 	}, [S]);
 	let G = i(() => {
 		I((e) => [...e, {
@@ -106,51 +106,51 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 			[t]: n
 		} : r));
 	}, []);
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ d("div", {
 		className: "min-w-0 space-y-form-gap",
 		children: [
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-3",
-				children: [/* @__PURE__ */ d("label", {
+				children: [/* @__PURE__ */ u("label", {
 					htmlFor: "drilldown-enable",
 					className: "text-sm font-medium text-text-primary",
 					children: x("bigconsole.widget.drilldown.enableLabel", "Enable Drilldown")
-				}), /* @__PURE__ */ d("button", {
+				}), /* @__PURE__ */ u("button", {
 					id: "drilldown-enable",
 					type: "button",
 					role: "switch",
 					"aria-checked": C,
 					onClick: () => w(!C),
-					className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors ${e} ${C ? h : g}`,
-					children: /* @__PURE__ */ d("span", { className: `inline-block h-4 w-4 transform rounded-full motion-safe:transition-transform ${_} ${C ? "translate-x-6" : "translate-x-1"}` })
+					className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors ${t} ${C ? h : g}`,
+					children: /* @__PURE__ */ u("span", { className: `inline-block h-4 w-4 transform rounded-full motion-safe:transition-transform ${_} ${C ? "translate-x-6" : "translate-x-1"}` })
 				})]
 			}),
-			C && /* @__PURE__ */ f(u, { children: [
-				/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+			C && /* @__PURE__ */ d(l, { children: [
+				/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
 					htmlFor: "drilldown-target",
 					className: "mb-1 block text-sm font-medium text-text-primary",
 					children: x("bigconsole.widget.drilldown.targetDashboardLabel", "Target Dashboard")
-				}), /* @__PURE__ */ f("select", {
+				}), /* @__PURE__ */ d("select", {
 					id: "drilldown-target",
 					value: T,
 					onChange: (e) => E(e.target.value),
 					disabled: z,
 					className: m,
-					children: [/* @__PURE__ */ d("option", {
+					children: [/* @__PURE__ */ u("option", {
 						value: "",
 						children: x("bigconsole.widget.drilldown.selectDashboard", "Select a dashboard...")
-					}), L.filter((e) => e.id !== r.dashboardId).map((e) => /* @__PURE__ */ d("option", {
+					}), L.filter((e) => e.id !== r.dashboardId).map((e) => /* @__PURE__ */ u("option", {
 						value: e.id,
 						children: e.name
 					}, e.id))]
 				})] }),
-				/* @__PURE__ */ f("div", { children: [
-					/* @__PURE__ */ d("p", {
+				/* @__PURE__ */ d("div", { children: [
+					/* @__PURE__ */ u("p", {
 						className: "mb-1 text-sm font-medium text-text-primary",
 						id: "drilldown-nav-mode-label",
 						children: x("bigconsole.widget.drilldown.navigationModeLabel", "Navigation Mode")
 					}),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ u("div", {
 						className: "flex flex-wrap gap-2",
 						role: "group",
 						"aria-labelledby": "drilldown-nav-mode-label",
@@ -158,7 +158,7 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 							"MODAL",
 							"NEW_TAB",
 							"SAME_WINDOW"
-						].map((e) => /* @__PURE__ */ f("button", {
+						].map((e) => /* @__PURE__ */ d("button", {
 							type: "button",
 							"aria-pressed": D === e,
 							onClick: () => O(e),
@@ -170,7 +170,7 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 							]
 						}, e))
 					}),
-					/* @__PURE__ */ f("p", {
+					/* @__PURE__ */ d("p", {
 						className: "mt-1 text-xs text-text-muted",
 						children: [
 							D === "MODAL" && x("bigconsole.widget.drilldown.modeHelp.modal", "Opens target dashboard in a modal overlay"),
@@ -179,27 +179,27 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 						]
 					})
 				] }),
-				/* @__PURE__ */ f("div", { children: [
-					/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ d("div", { children: [
+					/* @__PURE__ */ d("div", {
 						className: "mb-2 flex flex-wrap items-center justify-between gap-2",
-						children: [/* @__PURE__ */ d("p", {
+						children: [/* @__PURE__ */ u("p", {
 							className: "text-sm font-medium text-text-primary",
 							children: x("bigconsole.widget.drilldown.parameterMappingsLabel", "Parameter Mappings")
-						}), /* @__PURE__ */ d("button", {
+						}), /* @__PURE__ */ u("button", {
 							type: "button",
 							onClick: G,
 							className: "rounded-button px-1 text-xs text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 							children: x("bigconsole.widget.drilldown.addParameter", "+ Add Parameter")
 						})]
 					}),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ u("div", {
 						className: "space-y-2",
-						children: F.map((e, t) => /* @__PURE__ */ d("div", {
+						children: F.map((e, t) => /* @__PURE__ */ u("div", {
 							className: "relative",
-							children: /* @__PURE__ */ f("div", {
+							children: /* @__PURE__ */ d("div", {
 								className: "flex min-w-0 flex-wrap items-center gap-2",
 								children: [
-									/* @__PURE__ */ d("input", {
+									/* @__PURE__ */ u("input", {
 										type: "text",
 										value: e.key,
 										onChange: (e) => q(t, "key", e.target.value),
@@ -207,14 +207,14 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 										"aria-label": `Parameter ${t + 1} name`,
 										className: `${m} min-w-[7rem] flex-1`
 									}),
-									/* @__PURE__ */ d("span", {
+									/* @__PURE__ */ u("span", {
 										"aria-hidden": "true",
 										className: "text-text-muted",
 										children: "="
 									}),
-									/* @__PURE__ */ f("div", {
+									/* @__PURE__ */ d("div", {
 										className: "relative min-w-[7rem] flex-1",
-										children: [/* @__PURE__ */ d("input", {
+										children: [/* @__PURE__ */ u("input", {
 											type: "text",
 											value: e.value,
 											onChange: (e) => q(t, "value", e.target.value),
@@ -223,9 +223,9 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 											placeholder: x("bigconsole.widget.drilldown.parameterValuePlaceholder", "{{row.field}} or static"),
 											"aria-label": `Parameter ${t + 1} value`,
 											className: m
-										}), V === t && U.length > 0 && /* @__PURE__ */ d("div", {
+										}), V === t && U.length > 0 && /* @__PURE__ */ u("div", {
 											className: "absolute left-0 right-0 top-full z-10 mt-1 max-h-40 overflow-y-auto rounded-input border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-2)]",
-											children: U.slice(0, 10).map((e) => /* @__PURE__ */ d("button", {
+											children: U.slice(0, 10).map((e) => /* @__PURE__ */ u("button", {
 												type: "button",
 												onClick: () => {
 													q(t, "value", e), H(null);
@@ -235,17 +235,17 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 											}, e))
 										})]
 									}),
-									F.length > 1 && /* @__PURE__ */ d("button", {
+									F.length > 1 && /* @__PURE__ */ u("button", {
 										type: "button",
 										onClick: () => K(t),
 										"aria-label": `Remove parameter ${t + 1}`,
 										className: "rounded-button p-1 text-text-muted hover:text-[var(--color-status-error-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
-										children: /* @__PURE__ */ d("svg", {
+										children: /* @__PURE__ */ u("svg", {
 											className: "h-icon-sm w-icon-sm",
 											fill: "none",
 											stroke: "currentColor",
 											viewBox: "0 0 24 24",
-											children: /* @__PURE__ */ d("path", {
+											children: /* @__PURE__ */ u("path", {
 												strokeLinecap: "round",
 												strokeLinejoin: "round",
 												strokeWidth: 2,
@@ -257,84 +257,84 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 							})
 						}, t))
 					}),
-					/* @__PURE__ */ f("p", {
+					/* @__PURE__ */ d("p", {
 						className: "mt-2 text-xs text-text-muted",
 						children: [
 							x("bigconsole.widget.drilldown.paramHelp.usePrefix", "Use"),
 							" ",
-							/* @__PURE__ */ d("code", {
+							/* @__PURE__ */ u("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.field}}"
 							}),
 							" ",
 							x("bigconsole.widget.drilldown.paramHelp.useSuffix", "for dynamic values or enter static text."),
-							/* @__PURE__ */ d("br", {}),
+							/* @__PURE__ */ u("br", {}),
 							x("bigconsole.widget.drilldown.paramHelp.examples", "Examples:"),
 							" ",
-							/* @__PURE__ */ d("code", {
+							/* @__PURE__ */ u("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.category}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ d("code", {
+							/* @__PURE__ */ u("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{item.id}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ d("code", {
+							/* @__PURE__ */ u("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{globals.vars.dateFrom}}"
 							})
 						]
 					})
 				] }),
-				/* @__PURE__ */ d(t, {
+				/* @__PURE__ */ u(n, {
 					emphasis: "muted",
 					padding: "compact",
 					headingLevel: 4,
 					title: x("bigconsole.widget.drilldown.advancedOptions", "Advanced Options"),
 					description: "Rarely changed. Defaults suit most drilldowns.",
 					"data-testid": "drilldown-advanced",
-					children: /* @__PURE__ */ f("div", {
+					children: /* @__PURE__ */ d("div", {
 						className: "flex flex-col gap-2",
 						children: [
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ d("div", {
 								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
-								children: [/* @__PURE__ */ f("div", {
+								children: [/* @__PURE__ */ d("div", {
 									className: "min-w-0",
-									children: [/* @__PURE__ */ d("label", {
+									children: [/* @__PURE__ */ u("label", {
 										htmlFor: "drilldown-pass-filters",
 										className: "text-sm text-text-primary",
 										children: x("bigconsole.widget.drilldown.passGlobalFiltersLabel", "Pass Global Filters")
-									}), /* @__PURE__ */ d("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "text-xs text-text-muted",
 										children: x("bigconsole.widget.drilldown.passGlobalFiltersHelp", "Include current dashboard filters in drilldown")
 									})]
-								}), /* @__PURE__ */ d("button", {
+								}), /* @__PURE__ */ u("button", {
 									id: "drilldown-pass-filters",
 									type: "button",
 									role: "switch",
 									"aria-checked": k,
 									onClick: () => A(!k),
 									className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${k ? h : g}`,
-									children: /* @__PURE__ */ d("span", { className: `inline-block h-3 w-3 transform rounded-full motion-safe:transition-transform ${_} ${k ? "translate-x-5" : "translate-x-1"}` })
+									children: /* @__PURE__ */ u("span", { className: `inline-block h-3 w-3 transform rounded-full motion-safe:transition-transform ${_} ${k ? "translate-x-5" : "translate-x-1"}` })
 								})]
 							}),
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ d("div", {
 								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
-								children: [/* @__PURE__ */ f("div", {
+								children: [/* @__PURE__ */ d("div", {
 									className: "min-w-0",
-									children: [/* @__PURE__ */ d("label", {
+									children: [/* @__PURE__ */ u("label", {
 										htmlFor: "drilldown-max-depth",
 										className: "text-sm text-text-primary",
 										children: x("bigconsole.widget.drilldown.maxDepthLabel", "Max Drilldown Depth")
-									}), /* @__PURE__ */ d("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "text-xs text-text-muted",
 										children: x("bigconsole.widget.drilldown.maxDepthHelp", "Limit nested drilldown levels")
 									})]
-								}), /* @__PURE__ */ d("select", {
+								}), /* @__PURE__ */ u("select", {
 									id: "drilldown-max-depth",
 									value: j,
 									onChange: (e) => M(Number(e.target.value)),
@@ -345,35 +345,35 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 										3,
 										4,
 										5
-									].map((e) => /* @__PURE__ */ d("option", {
+									].map((e) => /* @__PURE__ */ u("option", {
 										value: e,
 										children: e
 									}, e))
 								})]
 							}),
-							D === "SAME_WINDOW" && /* @__PURE__ */ f("div", {
+							D === "SAME_WINDOW" && /* @__PURE__ */ d("div", {
 								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
-								children: [/* @__PURE__ */ f("div", {
+								children: [/* @__PURE__ */ d("div", {
 									className: "min-w-0",
-									children: [/* @__PURE__ */ d("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-sm text-text-primary",
 										id: "drilldown-open-in-label",
 										children: x("bigconsole.widget.drilldown.openInLabel", "Open In")
-									}), /* @__PURE__ */ d("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "text-xs text-text-muted",
 										children: x("bigconsole.widget.drilldown.openInHelp", "Tab behavior for navigation")
 									})]
-								}), /* @__PURE__ */ f("div", {
+								}), /* @__PURE__ */ d("div", {
 									className: "flex shrink-0 flex-wrap gap-1",
 									role: "group",
 									"aria-labelledby": "drilldown-open-in-label",
-									children: [/* @__PURE__ */ d("button", {
+									children: [/* @__PURE__ */ u("button", {
 										type: "button",
 										"aria-pressed": N === "same",
 										onClick: () => P("same"),
 										className: `min-h-control-md rounded-button px-2 text-xs font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${N === "same" ? "bg-action-primary-bg text-action-primary-text" : "border border-[var(--color-border-subtle)] bg-bg-surface text-text-secondary hover:text-text-primary"}`,
 										children: x("bigconsole.widget.drilldown.openIn.sameTab", "Same Tab")
-									}), /* @__PURE__ */ d("button", {
+									}), /* @__PURE__ */ u("button", {
 										type: "button",
 										"aria-pressed": N === "new",
 										onClick: () => P("new"),
@@ -386,13 +386,13 @@ var y = r(function({ widget: r, onChange: y, widgetData: b }) {
 					})
 				})
 			] }),
-			!C && r.drilldown?.id && /* @__PURE__ */ d(t, {
+			!C && r.drilldown?.id && /* @__PURE__ */ u(n, {
 				tone: "warning",
 				padding: "compact",
 				headingLevel: 4,
 				title: "Drilldown will be removed",
 				"data-testid": "drilldown-removal-notice",
-				children: /* @__PURE__ */ d("p", {
+				children: /* @__PURE__ */ u("p", {
 					className: "text-xs text-text-secondary",
 					children: x("bigconsole.widget.drilldown.removalWarning", "Drilldown will be removed when you save changes.")
 				})