@mastra/playground-ui 68.0.0-alpha.1 → 68.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/dist/{DataCodeSection-CcPmJPTp.cjs → DataCodeSection-CFxXsQWH.cjs} +3 -3
  2. package/dist/DataCodeSection-CFxXsQWH.cjs.map +1 -0
  3. package/dist/{DataCodeSection-KJRyRD1Q.js → DataCodeSection-PY9XEg2C.js} +3 -3
  4. package/dist/DataCodeSection-PY9XEg2C.js.map +1 -0
  5. package/dist/{DataPanel-BwB1Oifd.cjs → DataPanel-Coc9h35I.cjs} +2 -2
  6. package/dist/{DataPanel-BwB1Oifd.cjs.map → DataPanel-Coc9h35I.cjs.map} +1 -1
  7. package/dist/{DataPanel-Bv4M17xO.js → DataPanel-IgB9D5PO.js} +2 -2
  8. package/dist/{DataPanel-Bv4M17xO.js.map → DataPanel-IgB9D5PO.js.map} +1 -1
  9. package/dist/{FilterBar-BO-vvvyq.js → FilterBar-BgW2dqRQ.js} +7 -7
  10. package/dist/FilterBar-BgW2dqRQ.js.map +1 -0
  11. package/dist/{FilterBar-Buw0tv51.cjs → FilterBar-CQl04O6t.cjs} +7 -7
  12. package/dist/FilterBar-CQl04O6t.cjs.map +1 -0
  13. package/dist/{MetricsTable-D-aZf3dk.cjs → MetricsTable-BSl81oNe.cjs} +44 -9
  14. package/dist/MetricsTable-BSl81oNe.cjs.map +1 -0
  15. package/dist/{MetricsTable-CRPeLHe1.js → MetricsTable-DID6LRoP.js} +44 -9
  16. package/dist/MetricsTable-DID6LRoP.js.map +1 -0
  17. package/dist/{ask-user-DdYz56qH.cjs → ask-user-C1p2PEYe.cjs} +2 -2
  18. package/dist/ask-user-C1p2PEYe.cjs.map +1 -0
  19. package/dist/{ask-user-B225wzWc.js → ask-user-DPznrqGO.js} +2 -2
  20. package/dist/ask-user-DPznrqGO.js.map +1 -0
  21. package/dist/chart-plot.css +5 -4
  22. package/dist/{combobox-CtCK0mNx.js → combobox-D21no8t5.js} +4 -4
  23. package/dist/{combobox-CtCK0mNx.js.map → combobox-D21no8t5.js.map} +1 -1
  24. package/dist/{combobox-CMx2ayFN.cjs → combobox-DIT_6xiG.cjs} +4 -4
  25. package/dist/combobox-DIT_6xiG.cjs.map +1 -0
  26. package/dist/{combobox-parts-ScKcYjMR.cjs → combobox-parts-C4phOq4t.cjs} +2 -2
  27. package/dist/combobox-parts-C4phOq4t.cjs.map +1 -0
  28. package/dist/{combobox-parts-C1CugUAU.js → combobox-parts-D90ir0Py.js} +3 -3
  29. package/dist/combobox-parts-D90ir0Py.js.map +1 -0
  30. package/dist/components/Combobox.cjs.js +2 -2
  31. package/dist/components/Combobox.es.js +2 -2
  32. package/dist/components/Command.cjs.js +1 -1
  33. package/dist/components/Command.cjs.js.map +1 -1
  34. package/dist/components/Command.es.js +1 -1
  35. package/dist/components/Command.es.js.map +1 -1
  36. package/dist/components/DataCodeSection.cjs.js +1 -1
  37. package/dist/components/DataCodeSection.es.js +1 -1
  38. package/dist/components/DataList.cjs.js +1 -1
  39. package/dist/components/DataList.es.js +1 -1
  40. package/dist/components/DataPanel.cjs.js +1 -1
  41. package/dist/components/DataPanel.es.js +1 -1
  42. package/dist/components/DateTimePicker.cjs.js +1 -1
  43. package/dist/components/DateTimePicker.cjs.js.map +1 -1
  44. package/dist/components/DateTimePicker.es.js +1 -1
  45. package/dist/components/DateTimePicker.es.js.map +1 -1
  46. package/dist/components/FilterBar.cjs.js +3 -3
  47. package/dist/components/FilterBar.es.js +3 -3
  48. package/dist/components/FormFieldBlocks.cjs.js +1 -1
  49. package/dist/components/FormFieldBlocks.cjs.js.map +1 -1
  50. package/dist/components/FormFieldBlocks.es.js +1 -1
  51. package/dist/components/FormFieldBlocks.es.js.map +1 -1
  52. package/dist/components/MetricsTable.cjs.js +1 -1
  53. package/dist/components/MetricsTable.es.js +1 -1
  54. package/dist/components/PropertyFilter.cjs.js +3 -3
  55. package/dist/components/PropertyFilter.cjs.js.map +1 -1
  56. package/dist/components/PropertyFilter.es.js +3 -3
  57. package/dist/components/PropertyFilter.es.js.map +1 -1
  58. package/dist/components/SavedViews.cjs.js +1 -1
  59. package/dist/components/SavedViews.es.js +1 -1
  60. package/dist/components/Sidebar.cjs.js +8 -8
  61. package/dist/components/Sidebar.cjs.js.map +1 -1
  62. package/dist/components/Sidebar.es.js +9 -9
  63. package/dist/components/Sidebar.es.js.map +1 -1
  64. package/dist/components/ai/ask-user.cjs.js +1 -1
  65. package/dist/components/ai/ask-user.es.js +1 -1
  66. package/dist/domains/chat/tools/badges/ask-user-badge.cjs.js +1 -1
  67. package/dist/domains/chat/tools/badges/ask-user-badge.es.js +1 -1
  68. package/dist/domains/dashboards/kinds/table/table-view.cjs.js +1 -1
  69. package/dist/domains/dashboards/kinds/table/table-view.es.js +1 -1
  70. package/dist/domains/dashboards/metrics-dashboard.cjs.js +1 -1
  71. package/dist/domains/dashboards/metrics-dashboard.cjs.js.map +1 -1
  72. package/dist/domains/dashboards/metrics-dashboard.es.js +1 -1
  73. package/dist/domains/dashboards/metrics-dashboard.es.js.map +1 -1
  74. package/dist/domains/datasets/components/save-as-dataset-item-dialog.cjs.js +1 -1
  75. package/dist/domains/datasets/components/save-as-dataset-item-dialog.es.js +1 -1
  76. package/dist/domains/logs/components/log-data-panel.cjs.js +1 -1
  77. package/dist/domains/logs/components/log-data-panel.es.js +1 -1
  78. package/dist/domains/logs/components/logs-saved-views.cjs.js +1 -1
  79. package/dist/domains/logs/components/logs-saved-views.es.js +1 -1
  80. package/dist/domains/logs/components/logs-toolbar.cjs.js +1 -1
  81. package/dist/domains/logs/components/logs-toolbar.es.js +1 -1
  82. package/dist/domains/metrics/components/breakdown/breakdown-table.cjs.js +2 -2
  83. package/dist/domains/metrics/components/breakdown/breakdown-table.cjs.js.map +1 -1
  84. package/dist/domains/metrics/components/breakdown/breakdown-table.es.js +2 -2
  85. package/dist/domains/metrics/components/breakdown/breakdown-table.es.js.map +1 -1
  86. package/dist/domains/metrics/components/metrics-time-range-chip.cjs.js +1 -1
  87. package/dist/domains/metrics/components/metrics-time-range-chip.es.js +1 -1
  88. package/dist/domains/observability/saved-views/observability-saved-views.cjs.js +1 -1
  89. package/dist/domains/observability/saved-views/observability-saved-views.es.js +1 -1
  90. package/dist/domains/observability/saved-views.cjs.js +1 -1
  91. package/dist/domains/observability/saved-views.es.js +1 -1
  92. package/dist/domains/observability.cjs.js +1 -1
  93. package/dist/domains/observability.es.js +1 -1
  94. package/dist/domains/scores/components/score-data-panel.cjs.js +1 -1
  95. package/dist/domains/scores/components/score-data-panel.es.js +1 -1
  96. package/dist/domains/scores/components/span-scoring.cjs.js +3 -3
  97. package/dist/domains/scores/components/span-scoring.cjs.js.map +1 -1
  98. package/dist/domains/scores/components/span-scoring.es.js +3 -3
  99. package/dist/domains/scores/components/span-scoring.es.js.map +1 -1
  100. package/dist/domains/skills/skill-simple-form.cjs.js +1 -1
  101. package/dist/domains/skills/skill-simple-form.cjs.js.map +1 -1
  102. package/dist/domains/skills/skill-simple-form.es.js +1 -1
  103. package/dist/domains/skills/skill-simple-form.es.js.map +1 -1
  104. package/dist/domains/spans/components/spans-explorer-body.cjs.js +1 -1
  105. package/dist/domains/spans/components/spans-explorer-body.es.js +1 -1
  106. package/dist/domains/spans/components/spans-filter-bar.cjs.js +3 -3
  107. package/dist/domains/spans/components/spans-filter-bar.cjs.js.map +1 -1
  108. package/dist/domains/spans/components/spans-filter-bar.es.js +3 -3
  109. package/dist/domains/spans/components/spans-filter-bar.es.js.map +1 -1
  110. package/dist/domains/spans/hooks/use-spans-filter-bar.cjs.js +1 -1
  111. package/dist/domains/spans/hooks/use-spans-filter-bar.es.js +1 -1
  112. package/dist/domains/threads/components/threads-explorer-body.cjs.js +1 -1
  113. package/dist/domains/threads/components/threads-explorer-body.es.js +1 -1
  114. package/dist/domains/threads/components/threads-filter-bar.cjs.js +3 -3
  115. package/dist/domains/threads/components/threads-filter-bar.cjs.js.map +1 -1
  116. package/dist/domains/threads/components/threads-filter-bar.es.js +3 -3
  117. package/dist/domains/threads/components/threads-filter-bar.es.js.map +1 -1
  118. package/dist/domains/threads/hooks/use-threads-filter-bar.cjs.js +1 -1
  119. package/dist/domains/threads/hooks/use-threads-filter-bar.es.js +1 -1
  120. package/dist/domains/traces/components/feedback-thread.cjs.js +1 -1
  121. package/dist/domains/traces/components/feedback-thread.cjs.js.map +1 -1
  122. package/dist/domains/traces/components/feedback-thread.es.js +1 -1
  123. package/dist/domains/traces/components/feedback-thread.es.js.map +1 -1
  124. package/dist/domains/traces/components/span-data-panel-view.cjs.js +1 -1
  125. package/dist/domains/traces/components/span-data-panel-view.es.js +1 -1
  126. package/dist/domains/traces/components/span-summary-description.cjs.js +1 -1
  127. package/dist/domains/traces/components/span-summary-description.es.js +1 -1
  128. package/dist/domains/traces/components/thread-trace/thread-trace-details.cjs.js +1 -1
  129. package/dist/domains/traces/components/thread-trace/thread-trace-details.es.js +1 -1
  130. package/dist/domains/traces/components/trace-columns-menu.cjs.js +3 -3
  131. package/dist/domains/traces/components/trace-columns-menu.cjs.js.map +1 -1
  132. package/dist/domains/traces/components/trace-columns-menu.es.js +3 -3
  133. package/dist/domains/traces/components/trace-columns-menu.es.js.map +1 -1
  134. package/dist/domains/traces/components/trace-data-panel-view.cjs.js +2 -2
  135. package/dist/domains/traces/components/trace-data-panel-view.cjs.js.map +1 -1
  136. package/dist/domains/traces/components/trace-data-panel-view.es.js +2 -2
  137. package/dist/domains/traces/components/trace-data-panel-view.es.js.map +1 -1
  138. package/dist/domains/traces/components/trace-id-button.cjs.js +1 -1
  139. package/dist/domains/traces/components/trace-id-button.es.js +1 -1
  140. package/dist/domains/traces/components/trace-summary-description.cjs.js +1 -1
  141. package/dist/domains/traces/components/trace-summary-description.es.js +1 -1
  142. package/dist/domains/traces/components/trace-thread-panel.cjs.js +1 -1
  143. package/dist/domains/traces/components/trace-thread-panel.es.js +1 -1
  144. package/dist/domains/traces/components/traces-explorer/traces-explorer-filter-bar.cjs.js +3 -3
  145. package/dist/domains/traces/components/traces-explorer/traces-explorer-filter-bar.cjs.js.map +1 -1
  146. package/dist/domains/traces/components/traces-explorer/traces-explorer-filter-bar.es.js +3 -3
  147. package/dist/domains/traces/components/traces-explorer/traces-explorer-filter-bar.es.js.map +1 -1
  148. package/dist/domains/traces/components/traces-explorer/traces-explorer-saved-views.cjs.js +1 -1
  149. package/dist/domains/traces/components/traces-explorer/traces-explorer-saved-views.es.js +1 -1
  150. package/dist/domains/traces/components/traces-explorer/use-traces-filter-bar.cjs.js +1 -1
  151. package/dist/domains/traces/components/traces-explorer/use-traces-filter-bar.es.js +1 -1
  152. package/dist/domains/workflows/components/workflow-combobox.cjs.js +2 -2
  153. package/dist/domains/workflows/components/workflow-combobox.cjs.js.map +1 -1
  154. package/dist/domains/workflows/components/workflow-combobox.es.js +2 -2
  155. package/dist/domains/workflows/components/workflow-combobox.es.js.map +1 -1
  156. package/dist/domains/workflows/workflow/input/workflow-processor-input.cjs.js +1 -1
  157. package/dist/domains/workflows/workflow/input/workflow-processor-input.cjs.js.map +1 -1
  158. package/dist/domains/workflows/workflow/input/workflow-processor-input.es.js +1 -1
  159. package/dist/domains/workflows/workflow/input/workflow-processor-input.es.js.map +1 -1
  160. package/dist/domains/workspace/components/workspace-add-skill-dialog.cjs.js +1 -1
  161. package/dist/domains/workspace/components/workspace-add-skill-dialog.cjs.js.map +1 -1
  162. package/dist/domains/workspace/components/workspace-add-skill-dialog.es.js +1 -1
  163. package/dist/domains/workspace/components/workspace-add-skill-dialog.es.js.map +1 -1
  164. package/dist/{filter-bar-chip-B4sV4gDm.js → filter-bar-chip-CABeKrtf.js} +4 -4
  165. package/dist/{filter-bar-chip-B4sV4gDm.js.map → filter-bar-chip-CABeKrtf.js.map} +1 -1
  166. package/dist/{filter-bar-chip-CIEsWcEw.cjs → filter-bar-chip-Cg-UbIwP.cjs} +4 -4
  167. package/dist/{filter-bar-chip-CIEsWcEw.cjs.map → filter-bar-chip-Cg-UbIwP.cjs.map} +1 -1
  168. package/dist/{filter-bar-time-range-DvuaFnkI.cjs → filter-bar-time-range-BA-pXMlo.cjs} +2 -2
  169. package/dist/{filter-bar-time-range-DvuaFnkI.cjs.map → filter-bar-time-range-BA-pXMlo.cjs.map} +1 -1
  170. package/dist/{filter-bar-time-range-CXQMBgpz.js → filter-bar-time-range-mg9JeYue.js} +2 -2
  171. package/dist/{filter-bar-time-range-CXQMBgpz.js.map → filter-bar-time-range-mg9JeYue.js.map} +1 -1
  172. package/dist/layout/tabbed-container.cjs.js +1 -1
  173. package/dist/layout/tabbed-container.es.js +1 -1
  174. package/dist/{observability-saved-views-BBam8Fr5.js → observability-saved-views-CjKTEp1V.js} +3 -3
  175. package/dist/observability-saved-views-CjKTEp1V.js.map +1 -0
  176. package/dist/{observability-saved-views-BAzxxoAr.cjs → observability-saved-views-Daizz4tU.cjs} +3 -3
  177. package/dist/observability-saved-views-Daizz4tU.cjs.map +1 -0
  178. package/dist/primitives/chart-plot.cjs.js +8 -6
  179. package/dist/primitives/chart-plot.cjs.js.map +1 -1
  180. package/dist/primitives/chart-plot.es.js +8 -6
  181. package/dist/primitives/chart-plot.es.js.map +1 -1
  182. package/dist/primitives/control-icon.cjs.js.map +1 -1
  183. package/dist/primitives/control-icon.es.js.map +1 -1
  184. package/dist/{property-filter-applied-p3dTTDdb.js → property-filter-applied--U5EZdaA.js} +2 -2
  185. package/dist/property-filter-applied--U5EZdaA.js.map +1 -0
  186. package/dist/{property-filter-applied-BCeRLcXb.cjs → property-filter-applied-BkkIObRq.cjs} +2 -2
  187. package/dist/property-filter-applied-BkkIObRq.cjs.map +1 -0
  188. package/dist/src/ds/components/MetricsTable/metrics-table-rows.d.ts +10 -3
  189. package/dist/src/ds/components/MetricsTable/metrics-table.d.ts +1 -1
  190. package/dist/style.css +14 -1
  191. package/dist/{tabbed-container-DQU7pVio.cjs → tabbed-container-B4lCBgRP.cjs} +2 -2
  192. package/dist/{tabbed-container-DQU7pVio.cjs.map → tabbed-container-B4lCBgRP.cjs.map} +1 -1
  193. package/dist/{tabbed-container-5j6dhoRX.js → tabbed-container-DI1GI1Qv.js} +2 -2
  194. package/dist/{tabbed-container-5j6dhoRX.js.map → tabbed-container-DI1GI1Qv.js.map} +1 -1
  195. package/oxlint/index.js +90 -0
  196. package/package.json +8 -8
  197. package/theme.css +4 -3
  198. package/dist/DataCodeSection-CcPmJPTp.cjs.map +0 -1
  199. package/dist/DataCodeSection-KJRyRD1Q.js.map +0 -1
  200. package/dist/FilterBar-BO-vvvyq.js.map +0 -1
  201. package/dist/FilterBar-Buw0tv51.cjs.map +0 -1
  202. package/dist/MetricsTable-CRPeLHe1.js.map +0 -1
  203. package/dist/MetricsTable-D-aZf3dk.cjs.map +0 -1
  204. package/dist/ask-user-B225wzWc.js.map +0 -1
  205. package/dist/ask-user-DdYz56qH.cjs.map +0 -1
  206. package/dist/combobox-CMx2ayFN.cjs.map +0 -1
  207. package/dist/combobox-parts-C1CugUAU.js.map +0 -1
  208. package/dist/combobox-parts-ScKcYjMR.cjs.map +0 -1
  209. package/dist/observability-saved-views-BAzxxoAr.cjs.map +0 -1
  210. package/dist/observability-saved-views-BBam8Fr5.js.map +0 -1
  211. package/dist/property-filter-applied-BCeRLcXb.cjs.map +0 -1
  212. package/dist/property-filter-applied-p3dTTDdb.js.map +0 -1
@@ -118,7 +118,7 @@ function DataCodeSection({ codeStr = "", title, dialogTitle, icon, simplified =
118
118
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, {})
119
119
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_SearchInput.SearchInput, {
120
120
  label: "Search code",
121
- placeholder: "Search...",
121
+ placeholder: "Search",
122
122
  size: "sm",
123
123
  value: searchQuery,
124
124
  onValueChange: setSearchQuery,
@@ -177,7 +177,7 @@ function DataCodeSection({ codeStr = "", title, dialogTitle, icon, simplified =
177
177
  className: "flex shrink-0 items-center gap-2",
178
178
  children: [!expandedMultiline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_SearchInput.SearchInput, {
179
179
  label: "Search code",
180
- placeholder: "Search...",
180
+ placeholder: "Search",
181
181
  size: "sm",
182
182
  value: expandedSearchQuery,
183
183
  onValueChange: setExpandedSearchQuery
@@ -233,4 +233,4 @@ Object.defineProperty(exports, "DataCodeSection", {
233
233
  }
234
234
  });
235
235
 
236
- //# sourceMappingURL=DataCodeSection-CcPmJPTp.cjs.map
236
+ //# sourceMappingURL=DataCodeSection-CFxXsQWH.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataCodeSection-CFxXsQWH.cjs","names":["Text","Chunk","useRef","EditorView","useMemo","RangeSetBuilder","Decoration","CodeEditor","useState","cn","DataPanelSectionHeading","Button","SearchIcon","SearchInput","ButtonsGroup","CopyButton","AlignLeftIcon","AlignJustifyIcon","ExpandIcon","raisedSurfaceStyle","Dialog","DialogContent","DialogHeader","DialogTitle","_Fragment","DialogBody"],"sources":["../src/ds/components/DataCodeSection/data-code-section.tsx"],"sourcesContent":["import { Chunk } from '@codemirror/merge';\nimport { RangeSetBuilder, Text } from '@codemirror/state';\nimport { Decoration, EditorView } from '@codemirror/view';\nimport type { ReactCodeMirrorRef } from '@uiw/react-codemirror';\nimport { AlignJustifyIcon, AlignLeftIcon, ExpandIcon, SearchIcon } from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CodeEditor } from '@/ds/components/CodeEditor';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface DataCodeSectionDiff {\n /** The other document to compare against. */\n against: string;\n /** `a` = this document is the \"before\" (changes in red), `b` = \"after\" (changes in green). */\n side: 'a' | 'b';\n}\n\n/** Zero-based indexes of the lines of `doc` that differ from `diff.against`. */\nfunction changedLines(doc: string, { against, side }: DataCodeSectionDiff): Set<number> {\n const [a, b] = side === 'a' ? [doc, against] : [against, doc];\n const text = Text.of(doc.split('\\n'));\n const lines = new Set<number>();\n for (const chunk of Chunk.build(Text.of(a.split('\\n')), Text.of(b.split('\\n')))) {\n const from = side === 'a' ? chunk.fromA : chunk.fromB;\n const to = side === 'a' ? chunk.endA : chunk.endB;\n if (from >= to) continue;\n for (let pos = from; pos <= Math.min(to, text.length);) {\n const line = text.lineAt(pos);\n lines.add(line.number - 1);\n if (line.to >= to) break;\n pos = line.to + 1;\n }\n }\n return lines;\n}\n\nconst diffLineStyles = {\n removed: 'code-diff-removed bg-destructive-subtle',\n added: 'code-diff-added bg-success-subtle',\n};\nconst searchMatchStyle = 'code-search-match rounded-sm bg-badge-amber-strong';\n\ninterface CodeViewProps {\n code: string;\n changed?: Set<number>;\n diffSide?: DataCodeSectionDiff['side'];\n searchQuery: string;\n}\n\nfunction CodeView({ code, changed, diffSide, searchQuery }: CodeViewProps) {\n const ref = useRef<ReactCodeMirrorRef>(null);\n const query = searchQuery.toLowerCase();\n\n // Matches are scrolled to through CodeMirror: it only renders the visible lines, so an off-screen match has no DOM node yet.\n useEffect(() => {\n const view = ref.current?.view;\n if (!query || !view) return;\n const doc = view.state.doc;\n for (let n = 1; n <= doc.lines; n++) {\n const line = doc.line(n);\n if (line.text.toLowerCase().includes(query)) {\n view.dispatch({ effects: EditorView.scrollIntoView(line.from, { y: 'nearest' }) });\n return;\n }\n }\n }, [query]);\n\n const extensions = useMemo(\n () => [\n EditorView.decorations.compute(['doc'], state => {\n const builder = new RangeSetBuilder<Decoration>();\n for (let n = 1; n <= state.doc.lines; n++) {\n const line = state.doc.line(n);\n const classes: string[] = [];\n if (diffSide && changed?.has(n - 1)) classes.push(diffLineStyles[diffSide === 'a' ? 'removed' : 'added']);\n if (query && line.text.toLowerCase().includes(query)) classes.push(searchMatchStyle);\n if (classes.length) builder.add(line.from, line.from, Decoration.line({ class: classes.join(' ') }));\n }\n return builder.finish();\n }),\n ],\n [changed, diffSide, query],\n );\n\n return (\n <CodeEditor\n ref={ref}\n value={code}\n language=\"json\"\n editable={false}\n lineNumbers={false}\n showCopyButton={false}\n variant=\"embedded\"\n aria-label=\"JSON content\"\n extensions={extensions}\n />\n );\n}\n\nexport interface DataCodeSectionProps {\n title: React.ReactNode;\n dialogTitle?: React.ReactNode;\n icon?: React.ReactNode;\n codeStr?: string;\n simplified?: boolean;\n className?: string;\n /** Highlight lines that differ from another document. */\n diff?: DataCodeSectionDiff;\n /** Extra controls rendered in the header, before the built-in copy/expand buttons. */\n actions?: React.ReactNode;\n}\n\nexport function DataCodeSection({\n codeStr = '',\n title,\n dialogTitle,\n icon,\n simplified = false,\n className,\n diff,\n actions,\n}: DataCodeSectionProps) {\n const changed = useMemo(() => (diff ? changedLines(codeStr, diff) : undefined), [codeStr, diff]);\n const [showAsMultilineText, setShowAsMultilineText] = useState(false);\n const [searchMinimized, setSearchMinimized] = useState(true);\n const [searchQuery, setSearchQuery] = useState('');\n const [expandedOpen, setExpandedOpen] = useState(false);\n const [expandedSearchQuery, setExpandedSearchQuery] = useState('');\n const [expandedMultiline, setExpandedMultiline] = useState(false);\n\n const hasMultilineText = useMemo(() => {\n try {\n const parsed = JSON.parse(codeStr);\n return containsInnerNewline(parsed || '');\n } catch {\n return false;\n }\n }, [codeStr]);\n\n const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n const expandedFinalCodeStr = expandedMultiline ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n const usePlainTextView = simplified || showAsMultilineText;\n\n if (!codeStr || codeStr === 'null') return null;\n\n return (\n <div className={cn('flex flex-col gap-2', className)}>\n <div className=\"flex items-center justify-between\">\n <DataPanelSectionHeading icon={icon}>{title}</DataPanelSectionHeading>\n <div className=\"flex items-center gap-2\">\n {actions}\n {!usePlainTextView &&\n (searchMinimized ? (\n <Button\n size=\"icon-sm\"\n aria-label=\"Search code\"\n tooltip=\"Search code\"\n onClick={() => setSearchMinimized(false)}\n >\n <SearchIcon />\n </Button>\n ) : (\n <SearchInput\n label=\"Search code\"\n placeholder=\"Search\"\n size=\"sm\"\n value={searchQuery}\n onValueChange={setSearchQuery}\n onClose={() => setSearchMinimized(true)}\n autoFocus\n />\n ))}\n <ButtonsGroup size=\"sm\">\n <CopyButton content={codeStr || 'No content'} />\n {hasMultilineText && (\n <Button\n size=\"icon-md\"\n aria-label={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n tooltip={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n onClick={() => setShowAsMultilineText(v => !v)}\n >\n {showAsMultilineText ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n </Button>\n )}\n <Button size=\"icon-md\" aria-label=\"Expand\" tooltip=\"Expand\" onClick={() => setExpandedOpen(true)}>\n <ExpandIcon />\n </Button>\n </ButtonsGroup>\n </div>\n </div>\n\n <div\n className={cn(\n raisedSurfaceStyle,\n 'max-h-[30vh] overflow-hidden overflow-y-auto rounded-lg p-3 text-caption break-all text-muted-foreground',\n )}\n >\n {usePlainTextView ? (\n <div className=\"font-mono break-all text-muted-foreground\">\n <pre className=\"text-wrap\">{finalCodeStr}</pre>\n </div>\n ) : (\n <CodeView code={codeStr} changed={changed} diffSide={diff?.side} searchQuery={searchQuery} />\n )}\n </div>\n\n <Dialog open={expandedOpen} onOpenChange={setExpandedOpen}>\n <DialogContent size=\"full\">\n <DialogHeader>\n <div className=\"flex min-w-0 items-center justify-between gap-2\">\n <DialogTitle className=\"flex min-w-0 items-center gap-1.5 truncate [&>svg]:size-3.5\">\n {dialogTitle ?? (\n <>\n {icon}\n {title}\n </>\n )}\n </DialogTitle>\n <div className=\"flex shrink-0 items-center gap-2\">\n {!expandedMultiline && (\n <SearchInput\n label=\"Search code\"\n placeholder=\"Search\"\n size=\"sm\"\n value={expandedSearchQuery}\n onValueChange={setExpandedSearchQuery}\n />\n )}\n <ButtonsGroup size=\"sm\">\n <CopyButton content={codeStr || 'No content'} />\n {hasMultilineText && (\n <Button\n size=\"icon-md\"\n aria-label={expandedMultiline ? 'Show escaped newlines' : 'Show multiline text'}\n tooltip={expandedMultiline ? 'Show escaped newlines' : 'Show multiline text'}\n onClick={() => setExpandedMultiline(v => !v)}\n >\n {expandedMultiline ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n </Button>\n )}\n </ButtonsGroup>\n </div>\n </div>\n </DialogHeader>\n <DialogBody layout=\"fill\">\n <div className=\"min-h-0 flex-1 overflow-auto\">\n {expandedMultiline ? (\n <div className={cn(raisedSurfaceStyle, 'rounded-lg p-3 text-caption break-all text-muted-foreground')}>\n <div className=\"font-mono break-all text-muted-foreground\">\n <pre className=\"text-wrap\">{expandedFinalCodeStr}</pre>\n </div>\n </div>\n ) : (\n <CodeView code={codeStr} changed={changed} diffSide={diff?.side} searchQuery={expandedSearchQuery} />\n )}\n </div>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </div>\n );\n}\n\nfunction containsInnerNewline(obj: unknown): boolean {\n if (typeof obj === 'string') {\n const idx = obj.indexOf('\\n');\n return idx !== -1 && idx !== obj.length - 1;\n } else if (Array.isArray(obj)) {\n return obj.some(item => containsInnerNewline(item));\n } else if (obj && typeof obj === 'object') {\n return Object.values(obj).some(value => containsInnerNewline(value));\n }\n return false;\n}\n"],"mappings":"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"}
@@ -118,7 +118,7 @@ function DataCodeSection({ codeStr = "", title, dialogTitle, icon, simplified =
118
118
  children: /* @__PURE__ */ jsx(SearchIcon, {})
119
119
  }) : /* @__PURE__ */ jsx(SearchInput, {
120
120
  label: "Search code",
121
- placeholder: "Search...",
121
+ placeholder: "Search",
122
122
  size: "sm",
123
123
  value: searchQuery,
124
124
  onValueChange: setSearchQuery,
@@ -177,7 +177,7 @@ function DataCodeSection({ codeStr = "", title, dialogTitle, icon, simplified =
177
177
  className: "flex shrink-0 items-center gap-2",
178
178
  children: [!expandedMultiline && /* @__PURE__ */ jsx(SearchInput, {
179
179
  label: "Search code",
180
- placeholder: "Search...",
180
+ placeholder: "Search",
181
181
  size: "sm",
182
182
  value: expandedSearchQuery,
183
183
  onValueChange: setExpandedSearchQuery
@@ -228,4 +228,4 @@ function containsInnerNewline(obj) {
228
228
  }
229
229
  export { DataCodeSection as t };
230
230
 
231
- //# sourceMappingURL=DataCodeSection-KJRyRD1Q.js.map
231
+ //# sourceMappingURL=DataCodeSection-PY9XEg2C.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataCodeSection-PY9XEg2C.js","names":["Text","_Fragment"],"sources":["../src/ds/components/DataCodeSection/data-code-section.tsx"],"sourcesContent":["import { Chunk } from '@codemirror/merge';\nimport { RangeSetBuilder, Text } from '@codemirror/state';\nimport { Decoration, EditorView } from '@codemirror/view';\nimport type { ReactCodeMirrorRef } from '@uiw/react-codemirror';\nimport { AlignJustifyIcon, AlignLeftIcon, ExpandIcon, SearchIcon } from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CodeEditor } from '@/ds/components/CodeEditor';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface DataCodeSectionDiff {\n /** The other document to compare against. */\n against: string;\n /** `a` = this document is the \"before\" (changes in red), `b` = \"after\" (changes in green). */\n side: 'a' | 'b';\n}\n\n/** Zero-based indexes of the lines of `doc` that differ from `diff.against`. */\nfunction changedLines(doc: string, { against, side }: DataCodeSectionDiff): Set<number> {\n const [a, b] = side === 'a' ? [doc, against] : [against, doc];\n const text = Text.of(doc.split('\\n'));\n const lines = new Set<number>();\n for (const chunk of Chunk.build(Text.of(a.split('\\n')), Text.of(b.split('\\n')))) {\n const from = side === 'a' ? chunk.fromA : chunk.fromB;\n const to = side === 'a' ? chunk.endA : chunk.endB;\n if (from >= to) continue;\n for (let pos = from; pos <= Math.min(to, text.length);) {\n const line = text.lineAt(pos);\n lines.add(line.number - 1);\n if (line.to >= to) break;\n pos = line.to + 1;\n }\n }\n return lines;\n}\n\nconst diffLineStyles = {\n removed: 'code-diff-removed bg-destructive-subtle',\n added: 'code-diff-added bg-success-subtle',\n};\nconst searchMatchStyle = 'code-search-match rounded-sm bg-badge-amber-strong';\n\ninterface CodeViewProps {\n code: string;\n changed?: Set<number>;\n diffSide?: DataCodeSectionDiff['side'];\n searchQuery: string;\n}\n\nfunction CodeView({ code, changed, diffSide, searchQuery }: CodeViewProps) {\n const ref = useRef<ReactCodeMirrorRef>(null);\n const query = searchQuery.toLowerCase();\n\n // Matches are scrolled to through CodeMirror: it only renders the visible lines, so an off-screen match has no DOM node yet.\n useEffect(() => {\n const view = ref.current?.view;\n if (!query || !view) return;\n const doc = view.state.doc;\n for (let n = 1; n <= doc.lines; n++) {\n const line = doc.line(n);\n if (line.text.toLowerCase().includes(query)) {\n view.dispatch({ effects: EditorView.scrollIntoView(line.from, { y: 'nearest' }) });\n return;\n }\n }\n }, [query]);\n\n const extensions = useMemo(\n () => [\n EditorView.decorations.compute(['doc'], state => {\n const builder = new RangeSetBuilder<Decoration>();\n for (let n = 1; n <= state.doc.lines; n++) {\n const line = state.doc.line(n);\n const classes: string[] = [];\n if (diffSide && changed?.has(n - 1)) classes.push(diffLineStyles[diffSide === 'a' ? 'removed' : 'added']);\n if (query && line.text.toLowerCase().includes(query)) classes.push(searchMatchStyle);\n if (classes.length) builder.add(line.from, line.from, Decoration.line({ class: classes.join(' ') }));\n }\n return builder.finish();\n }),\n ],\n [changed, diffSide, query],\n );\n\n return (\n <CodeEditor\n ref={ref}\n value={code}\n language=\"json\"\n editable={false}\n lineNumbers={false}\n showCopyButton={false}\n variant=\"embedded\"\n aria-label=\"JSON content\"\n extensions={extensions}\n />\n );\n}\n\nexport interface DataCodeSectionProps {\n title: React.ReactNode;\n dialogTitle?: React.ReactNode;\n icon?: React.ReactNode;\n codeStr?: string;\n simplified?: boolean;\n className?: string;\n /** Highlight lines that differ from another document. */\n diff?: DataCodeSectionDiff;\n /** Extra controls rendered in the header, before the built-in copy/expand buttons. */\n actions?: React.ReactNode;\n}\n\nexport function DataCodeSection({\n codeStr = '',\n title,\n dialogTitle,\n icon,\n simplified = false,\n className,\n diff,\n actions,\n}: DataCodeSectionProps) {\n const changed = useMemo(() => (diff ? changedLines(codeStr, diff) : undefined), [codeStr, diff]);\n const [showAsMultilineText, setShowAsMultilineText] = useState(false);\n const [searchMinimized, setSearchMinimized] = useState(true);\n const [searchQuery, setSearchQuery] = useState('');\n const [expandedOpen, setExpandedOpen] = useState(false);\n const [expandedSearchQuery, setExpandedSearchQuery] = useState('');\n const [expandedMultiline, setExpandedMultiline] = useState(false);\n\n const hasMultilineText = useMemo(() => {\n try {\n const parsed = JSON.parse(codeStr);\n return containsInnerNewline(parsed || '');\n } catch {\n return false;\n }\n }, [codeStr]);\n\n const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n const expandedFinalCodeStr = expandedMultiline ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n const usePlainTextView = simplified || showAsMultilineText;\n\n if (!codeStr || codeStr === 'null') return null;\n\n return (\n <div className={cn('flex flex-col gap-2', className)}>\n <div className=\"flex items-center justify-between\">\n <DataPanelSectionHeading icon={icon}>{title}</DataPanelSectionHeading>\n <div className=\"flex items-center gap-2\">\n {actions}\n {!usePlainTextView &&\n (searchMinimized ? (\n <Button\n size=\"icon-sm\"\n aria-label=\"Search code\"\n tooltip=\"Search code\"\n onClick={() => setSearchMinimized(false)}\n >\n <SearchIcon />\n </Button>\n ) : (\n <SearchInput\n label=\"Search code\"\n placeholder=\"Search\"\n size=\"sm\"\n value={searchQuery}\n onValueChange={setSearchQuery}\n onClose={() => setSearchMinimized(true)}\n autoFocus\n />\n ))}\n <ButtonsGroup size=\"sm\">\n <CopyButton content={codeStr || 'No content'} />\n {hasMultilineText && (\n <Button\n size=\"icon-md\"\n aria-label={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n tooltip={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n onClick={() => setShowAsMultilineText(v => !v)}\n >\n {showAsMultilineText ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n </Button>\n )}\n <Button size=\"icon-md\" aria-label=\"Expand\" tooltip=\"Expand\" onClick={() => setExpandedOpen(true)}>\n <ExpandIcon />\n </Button>\n </ButtonsGroup>\n </div>\n </div>\n\n <div\n className={cn(\n raisedSurfaceStyle,\n 'max-h-[30vh] overflow-hidden overflow-y-auto rounded-lg p-3 text-caption break-all text-muted-foreground',\n )}\n >\n {usePlainTextView ? (\n <div className=\"font-mono break-all text-muted-foreground\">\n <pre className=\"text-wrap\">{finalCodeStr}</pre>\n </div>\n ) : (\n <CodeView code={codeStr} changed={changed} diffSide={diff?.side} searchQuery={searchQuery} />\n )}\n </div>\n\n <Dialog open={expandedOpen} onOpenChange={setExpandedOpen}>\n <DialogContent size=\"full\">\n <DialogHeader>\n <div className=\"flex min-w-0 items-center justify-between gap-2\">\n <DialogTitle className=\"flex min-w-0 items-center gap-1.5 truncate [&>svg]:size-3.5\">\n {dialogTitle ?? (\n <>\n {icon}\n {title}\n </>\n )}\n </DialogTitle>\n <div className=\"flex shrink-0 items-center gap-2\">\n {!expandedMultiline && (\n <SearchInput\n label=\"Search code\"\n placeholder=\"Search\"\n size=\"sm\"\n value={expandedSearchQuery}\n onValueChange={setExpandedSearchQuery}\n />\n )}\n <ButtonsGroup size=\"sm\">\n <CopyButton content={codeStr || 'No content'} />\n {hasMultilineText && (\n <Button\n size=\"icon-md\"\n aria-label={expandedMultiline ? 'Show escaped newlines' : 'Show multiline text'}\n tooltip={expandedMultiline ? 'Show escaped newlines' : 'Show multiline text'}\n onClick={() => setExpandedMultiline(v => !v)}\n >\n {expandedMultiline ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n </Button>\n )}\n </ButtonsGroup>\n </div>\n </div>\n </DialogHeader>\n <DialogBody layout=\"fill\">\n <div className=\"min-h-0 flex-1 overflow-auto\">\n {expandedMultiline ? (\n <div className={cn(raisedSurfaceStyle, 'rounded-lg p-3 text-caption break-all text-muted-foreground')}>\n <div className=\"font-mono break-all text-muted-foreground\">\n <pre className=\"text-wrap\">{expandedFinalCodeStr}</pre>\n </div>\n </div>\n ) : (\n <CodeView code={codeStr} changed={changed} diffSide={diff?.side} searchQuery={expandedSearchQuery} />\n )}\n </div>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </div>\n );\n}\n\nfunction containsInnerNewline(obj: unknown): boolean {\n if (typeof obj === 'string') {\n const idx = obj.indexOf('\\n');\n return idx !== -1 && idx !== obj.length - 1;\n } else if (Array.isArray(obj)) {\n return obj.some(item => containsInnerNewline(item));\n } else if (obj && typeof obj === 'object') {\n return Object.values(obj).some(value => containsInnerNewline(value));\n }\n return false;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,SAAS,aAAa,KAAa,EAAE,SAAS,QAA0C;CACtF,MAAM,CAAC,GAAG,KAAK,SAAS,MAAM,CAAC,KAAK,OAAO,IAAI,CAAC,SAAS,GAAG;CAC5D,MAAM,OAAOA,OAAK,GAAG,IAAI,MAAM,IAAI,CAAC;CACpC,MAAM,wBAAQ,IAAI,IAAY;CAC9B,KAAK,MAAM,SAAS,MAAM,MAAMA,OAAK,GAAG,EAAE,MAAM,IAAI,CAAC,GAAGA,OAAK,GAAG,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG;EAC/E,MAAM,OAAO,SAAS,MAAM,MAAM,QAAQ,MAAM;EAChD,MAAM,KAAK,SAAS,MAAM,MAAM,OAAO,MAAM;EAC7C,IAAI,QAAQ,IAAI;EAChB,KAAK,IAAI,MAAM,MAAM,OAAO,KAAK,IAAI,IAAI,KAAK,MAAM,IAAI;GACtD,MAAM,OAAO,KAAK,OAAO,GAAG;GAC5B,MAAM,IAAI,KAAK,SAAS,CAAC;GACzB,IAAI,KAAK,MAAM,IAAI;GACnB,MAAM,KAAK,KAAK;EAClB;CACF;CACA,OAAO;AACT;AAEA,IAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;AACT;AACA,IAAM,mBAAmB;AASzB,SAAS,SAAS,EAAE,MAAM,SAAS,UAAU,eAA8B;CACzE,MAAM,MAAM,OAA2B,IAAI;CAC3C,MAAM,QAAQ,YAAY,YAAY;CAGtC,gBAAgB;EACd,MAAM,OAAO,IAAI,SAAS;EAC1B,IAAI,CAAC,SAAS,CAAC,MAAM;EACrB,MAAM,MAAM,KAAK,MAAM;EACvB,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,OAAO,KAAK;GACnC,MAAM,OAAO,IAAI,KAAK,CAAC;GACvB,IAAI,KAAK,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,GAAG;IAC3C,KAAK,SAAS,EAAE,SAAS,WAAW,eAAe,KAAK,MAAM,EAAE,GAAG,UAAU,CAAC,EAAE,CAAC;IACjF;GACF;EACF;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,cACX,CACJ,WAAW,YAAY,QAAQ,CAAC,KAAK,IAAG,UAAS;EAC/C,MAAM,UAAU,IAAI,gBAA4B;EAChD,KAAK,IAAI,IAAI,GAAG,KAAK,MAAM,IAAI,OAAO,KAAK;GACzC,MAAM,OAAO,MAAM,IAAI,KAAK,CAAC;GAC7B,MAAM,UAAoB,CAAC;GAC3B,IAAI,YAAY,SAAS,IAAI,IAAI,CAAC,GAAG,QAAQ,KAAK,eAAe,aAAa,MAAM,YAAY,QAAQ;GACxG,IAAI,SAAS,KAAK,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,GAAG,QAAQ,KAAK,gBAAgB;GACnF,IAAI,QAAQ,QAAQ,QAAQ,IAAI,KAAK,MAAM,KAAK,MAAM,WAAW,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,EAAE,CAAC,CAAC;EACrG;EACA,OAAO,QAAQ,OAAO;CACxB,CAAC,CACH,GACA;EAAC;EAAS;EAAU;CAAK,CAC3B;CAEA,OACE,oBAAC,YAAD;EACO;EACL,OAAO;EACP,UAAS;EACT,UAAU;EACV,aAAa;EACb,gBAAgB;EAChB,SAAQ;EACR,cAAW;EACC;CACb,CAAA;AAEL;AAeA,SAAgB,gBAAgB,EAC9B,UAAU,IACV,OACA,aACA,MACA,aAAa,OACb,WACA,MACA,WACuB;CACvB,MAAM,UAAU,cAAe,OAAO,aAAa,SAAS,IAAI,IAAI,KAAA,GAAY,CAAC,SAAS,IAAI,CAAC;CAC/F,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,KAAK;CACpE,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,IAAI;CAC3D,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,EAAE;CACjE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAEhE,MAAM,mBAAmB,cAAc;EACrC,IAAI;GAEF,OAAO,qBADQ,KAAK,MAAM,OACE,KAAU,EAAE;EAC1C,QAAQ;GACN,OAAO;EACT;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,eAAe,sBAAsB,SAAS,QAAQ,QAAQ,IAAI,IAAI;CAC5E,MAAM,uBAAuB,oBAAoB,SAAS,QAAQ,QAAQ,IAAI,IAAI;CAClF,MAAM,mBAAmB,cAAc;CAEvC,IAAI,CAAC,WAAW,YAAY,QAAQ,OAAO;CAE3C,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,SAAS;EAAnD,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,yBAAD;KAA+B;KAAO,UAAA;IAA+B,CAAA,GACrE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACG;MACA,CAAC,qBACC,kBACC,oBAAC,QAAD;OACE,MAAK;OACL,cAAW;OACX,SAAQ;OACR,eAAe,mBAAmB,KAAK;OAEvC,UAAA,oBAAC,YAAD,CAAa,CAAA;MACP,CAAA,IAER,oBAAC,aAAD;OACE,OAAM;OACN,aAAY;OACZ,MAAK;OACL,OAAO;OACP,eAAe;OACf,eAAe,mBAAmB,IAAI;OACtC,WAAA;MACD,CAAA;MAEL,qBAAC,cAAD;OAAc,MAAK;OAAnB,UAAA;QACE,oBAAC,YAAD,EAAY,SAAS,WAAW,aAAe,CAAA;QAC9C,oBACC,oBAAC,QAAD;SACE,MAAK;SACL,cAAY,sBAAsB,0BAA0B;SAC5D,SAAS,sBAAsB,0BAA0B;SACzD,eAAe,wBAAuB,MAAK,CAAC,CAAC;SAE5C,UAAA,sBAAsB,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,kBAAD,CAAmB,CAAA;QACxD,CAAA;QAEV,oBAAC,QAAD;SAAQ,MAAK;SAAU,cAAW;SAAS,SAAQ;SAAS,eAAe,gBAAgB,IAAI;SAC7F,UAAA,oBAAC,YAAD,CAAa,CAAA;QACP,CAAA;OACI;;KACX;IACF,CAAA,CAAA;;GAEL,oBAAC,OAAD;IACE,WAAW,GACT,oBACA,0GACF;IAEC,UAAA,mBACC,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,OAAD;MAAK,WAAU;MAAa,UAAA;KAAkB,CAAA;IAC3C,CAAA,IAEL,oBAAC,UAAD;KAAU,MAAM;KAAkB;KAAS,UAAU,MAAM;KAAmB;IAAc,CAAA;GAE3F,CAAA;GAEL,oBAAC,QAAD;IAAQ,MAAM;IAAc,cAAc;IACxC,UAAA,qBAAC,eAAD;KAAe,MAAK;KAApB,UAAA,CACE,oBAAC,cAAD,EAAA,UACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,aAAD;OAAa,WAAU;OACpB,UAAA,eACC,qBAAAC,YAAA,EAAA,UAAA,CACG,MACA,KACD,EAAA,CAAA;MAEO,CAAA,GACb,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACG,CAAC,qBACA,oBAAC,aAAD;QACE,OAAM;QACN,aAAY;QACZ,MAAK;QACL,OAAO;QACP,eAAe;OAChB,CAAA,GAEH,qBAAC,cAAD;QAAc,MAAK;QAAnB,UAAA,CACE,oBAAC,YAAD,EAAY,SAAS,WAAW,aAAe,CAAA,GAC9C,oBACC,oBAAC,QAAD;SACE,MAAK;SACL,cAAY,oBAAoB,0BAA0B;SAC1D,SAAS,oBAAoB,0BAA0B;SACvD,eAAe,sBAAqB,MAAK,CAAC,CAAC;SAE1C,UAAA,oBAAoB,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,kBAAD,CAAmB,CAAA;QACtD,CAAA,CAEE;OACX,CAAA,CAAA;MACF,CAAA,CAAA;KACO,CAAA,EAAA,CAAA,GACd,oBAAC,YAAD;MAAY,QAAO;MACjB,UAAA,oBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,oBACC,oBAAC,OAAD;QAAK,WAAW,GAAG,oBAAoB,6DAA6D;QAClG,UAAA,oBAAC,OAAD;SAAK,WAAU;SACb,UAAA,oBAAC,OAAD;UAAK,WAAU;UAAa,UAAA;SAA0B,CAAA;QACnD,CAAA;OACF,CAAA,IAEL,oBAAC,UAAD;QAAU,MAAM;QAAkB;QAAS,UAAU,MAAM;QAAM,aAAa;OAAsB,CAAA;MAEnG,CAAA;KACK,CAAA,CACC;;GACT,CAAA;EACL;;AAET;AAEA,SAAS,qBAAqB,KAAuB;CACnD,IAAI,OAAO,QAAQ,UAAU;EAC3B,MAAM,MAAM,IAAI,QAAQ,IAAI;EAC5B,OAAO,QAAQ,MAAM,QAAQ,IAAI,SAAS;CAC5C,OAAO,IAAI,MAAM,QAAQ,GAAG,GAC1B,OAAO,IAAI,MAAK,SAAQ,qBAAqB,IAAI,CAAC;MAC7C,IAAI,OAAO,OAAO,QAAQ,UAC/B,OAAO,OAAO,OAAO,GAAG,CAAC,CAAC,MAAK,UAAS,qBAAqB,KAAK,CAAC;CAErE,OAAO;AACT"}
@@ -14,7 +14,7 @@ const require_hooks_use_copy_to_clipboard = require("./hooks/use-copy-to-clipboa
14
14
  require("./components/Drawer.cjs.js");
15
15
  const require_spinner = require("./spinner-C8ZxiA5C.cjs");
16
16
  const require_data_panel_section_heading = require("./data-panel-section-heading-d9UnruDt.cjs");
17
- const require_DataCodeSection = require("./DataCodeSection-CcPmJPTp.cjs");
17
+ const require_DataCodeSection = require("./DataCodeSection-CFxXsQWH.cjs");
18
18
  let react = require("react");
19
19
  react = require_rolldown_runtime.__toESM(react, 1);
20
20
  let react_jsx_runtime = require("react/jsx-runtime");
@@ -295,4 +295,4 @@ Object.defineProperty(exports, "DataPanel", {
295
295
  }
296
296
  });
297
297
 
298
- //# sourceMappingURL=DataPanel-BwB1Oifd.cjs.map
298
+ //# sourceMappingURL=DataPanel-Coc9h35I.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataPanel-BwB1Oifd.cjs","names":["Button","cn","XIcon","ArrowLeftIcon","createContext","useContext","cn","DrawerPrimitive","useCopyToClipboard","useState","Tooltip","TooltipTrigger","Button","truncateString","TooltipContent","cn","Children","Fragment","cn","controlSizeClasses","Spinner","cn","controlSizeClasses","controlStateColorTransition","quietTextHover","Icon","transitions","Tooltip","TooltipTrigger","TooltipContent","_Fragment","Button","ArrowUpIcon","ArrowDownIcon","Txt","React","cn","frameSurfaceStyle","DrawerPrimitive","PortalContainerProvider","frameFillStyle","DataCodeSection","DataPanelSectionHeading"],"sources":["../src/ds/components/DataPanel/data-panel-close-button.tsx","../src/ds/components/DataPanel/data-panel-context.tsx","../src/ds/components/DataPanel/data-panel-content.tsx","../src/ds/components/DataPanel/data-panel-copy-id.tsx","../src/ds/components/DataPanel/data-panel-header.tsx","../src/ds/components/DataPanel/data-panel-header-actions.tsx","../src/ds/components/DataPanel/data-panel-header-content.tsx","../src/ds/components/DataPanel/data-panel-heading.tsx","../src/ds/components/DataPanel/data-panel-loading-data.tsx","../src/ds/components/DataPanel/data-panel-metadata.tsx","../src/ds/components/DataPanel/data-panel-next-prev-nav.tsx","../src/ds/components/DataPanel/data-panel-no-data.tsx","../src/ds/components/DataPanel/data-panel-root.tsx","../src/ds/components/DataPanel/data-panel.tsx"],"sourcesContent":["import { ArrowLeftIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelCloseButtonProps {\n onClick: () => void;\n tooltip?: string;\n /** Accessible name; override it when the arrow leads somewhere other than \"closed\" (e.g. back to a parent view). */\n label?: string;\n /**\n * `arrow` (default) is the leading \"leave this panel\" control, rendered first in the header.\n * `x` dismisses a nested column in place and belongs in `HeaderActions`, on the right.\n */\n icon?: 'arrow' | 'x';\n className?: string;\n variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelCloseButton({\n onClick,\n tooltip = 'Close panel',\n label = 'Close panel',\n icon = 'arrow',\n className,\n variant = 'ghost',\n}: DataPanelCloseButtonProps) {\n return (\n <Button\n size=\"icon-sm\"\n variant={variant}\n onClick={onClick}\n aria-label={label}\n tooltip={tooltip}\n className={cn('shrink-0', className)}\n >\n {icon === 'x' ? <XIcon /> : <ArrowLeftIcon />}\n </Button>\n );\n}\n","import { createContext, useContext } from 'react';\n\nexport type DataPanelVariant = 'drawer' | 'inline';\n\n// Defaults to `drawer` so sub-components rendered outside a `DataPanel` keep their historical behavior.\nexport const DataPanelVariantContext = createContext<DataPanelVariant>('drawer');\n\nexport const useDataPanelVariant = () => useContext(DataPanelVariantContext);\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport type { ReactNode, Ref } from 'react';\n\nimport { useDataPanelVariant } from './data-panel-context';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelContentProps {\n children: ReactNode;\n ref?: Ref<HTMLDivElement>;\n /** Layout overrides (e.g. padding) for the scroll container. */\n className?: string;\n}\n\nconst CONTENT_CLASSES = 'min-h-0 flex-1 overflow-y-auto p-2';\n\n// In the drawer variant, `DrawerPrimitive.Content` marks the region as swipe-exempt\n// so scrolling or selecting text inside the panel body doesn't start a\n// swipe-to-dismiss. The inline variant has no drawer, so a plain div is enough.\nexport function DataPanelContent({ children, ref, className }: DataPanelContentProps) {\n const variant = useDataPanelVariant();\n\n if (variant === 'inline') {\n return (\n <div ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </div>\n );\n }\n\n return (\n <DrawerPrimitive.Content ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </DrawerPrimitive.Content>\n );\n}\n","import { useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport interface DataPanelCopyIdProps {\n id: string;\n /** Characters kept when the id is truncated. Defaults to 12. */\n maxLength?: number;\n /** Append `…` to a truncated id. Defaults to true. */\n ellipsis?: boolean;\n /** Leading icon (bare SVG) naming what the id identifies. */\n icon?: React.ReactNode;\n}\n\n/**\n * Truncated identifier rendered inline in a `DataPanel.Heading`; clicking copies the full value.\n */\nexport function DataPanelCopyId({ id, maxLength = 12, ellipsis = true, icon }: DataPanelCopyIdProps) {\n const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });\n const [open, setOpen] = useState(false);\n\n return (\n <Tooltip open={isCopied || open} onOpenChange={setOpen}>\n <TooltipTrigger\n render={\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" icon={icon} onClick={handleCopy}>\n {ellipsis ? truncateString(id, maxLength) : id.slice(0, maxLength)}\n </Button>\n }\n />\n <TooltipContent>{isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}</TooltipContent>\n </Tooltip>\n );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataPanelHeaderProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeader({ className, children }: DataPanelHeaderProps) {\n return (\n <div\n className={cn(\n // Same box as the app `Header`. Leading `CloseButton`, then the heading\n // (+ inline metadata via `HeaderContent`), then `HeaderActions` pushed to the right edge.\n // `flex-wrap` drops the actions onto a second row when the panel is too narrow for one.\n // `gap-0.5` is the slight gap between the close arrow and the heading.\n // `py-1` keeps 28px controls + border within the 40px min height, so the divider\n // lines up with an adjacent app `Header` instead of sitting 1px lower.\n 'flex min-h-header-default w-full flex-wrap items-center gap-0.5 px-2 py-1',\n // Bottom border only when something follows the header (i.e. the panel is expanded).\n // When the panel is collapsed and the header is the only child, the border auto-hides.\n // Same edge color as the app `Header` it docks beside.\n 'not-last:border-b not-last:border-surface-rim',\n className,\n )}\n >\n {children}\n </div>\n );\n}\n","export interface DataPanelHeaderActionsProps {\n children: React.ReactNode;\n}\n\n/**\n * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`\n * (these are `size=\"sm\"` controls, like the page header actions) and wraps when the panel is too narrow.\n */\nexport function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps) {\n return <div className=\"ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 self-center\">{children}</div>;\n}\n","import { Children, Fragment } from 'react';\n\nexport interface DataPanelHeaderContentProps {\n children: React.ReactNode;\n}\n\n/**\n * Left block of a `DataPanel.Header`: heading followed inline by optional blocks such as `Metadata`,\n * truncated when too long. A vertical separator is rendered between consecutive blocks.\n */\nexport function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps) {\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n {Children.toArray(children).map((child, index) => (\n <Fragment key={index}>\n {index > 0 && <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />}\n {child}\n </Fragment>\n ))}\n </div>\n );\n}\n","import { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelHeadingProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeading({ className, children }: DataPanelHeadingProps) {\n return (\n <h3\n className={cn(\n // Same recipe as a current `Crumb` in the page header, with tight horizontal spacing:\n // inline children like `TraceIdButton` carry their own padding, so `gap-1` + `px-1`\n // is enough to keep the title close to the leading close arrow and the inline metadata.\n // `shrink-0`: the heading keeps its text; the inline `Metadata` row is what gets clipped.\n 'inline-flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-full px-1',\n controlSizeClasses.sm,\n 'cursor-default text-foreground [&>b]:text-caption [&>b]:text-muted-foreground',\n className,\n )}\n >\n {children}\n </h3>\n );\n}\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataPanelLoadingDataProps {\n children?: ReactNode;\n}\n\nexport function DataPanelLoadingData({ children }: DataPanelLoadingDataProps) {\n return (\n <div className=\"flex min-h-32 items-center justify-center gap-2 px-3 py-4 text-caption text-placeholder\">\n <Spinner size=\"sm\" variant=\"pulse\" className=\"text-placeholder\" /> {children ?? 'Loading...'}\n </div>\n );\n}\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition, transitions } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelMetadataProps {\n children: React.ReactNode;\n}\n\n/** Row of `Meta` pills next to a `DataPanel.Heading`. Never wraps; overflowing pills are clipped. */\nexport function DataPanelMetadata({ children }: DataPanelMetadataProps) {\n return <ul className=\"flex min-w-0 flex-nowrap items-center gap-0.5 overflow-hidden\">{children}</ul>;\n}\n\nexport interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {\n /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */\n as?: React.ElementType;\n href?: string;\n to?: string;\n /** Prefix icon (bare SVG). */\n icon?: React.ReactNode;\n /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */\n tooltip?: React.ReactNode;\n children: React.ReactNode;\n 'data-testid'?: string;\n}\n\nexport function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps) {\n const Root = as ?? 'span';\n const isInteractive = Boolean(as || props.href || props.to || props.onClick);\n\n const hasTooltip = tooltip != null;\n const root = (\n <Root\n aria-label={!isInteractive && typeof tooltip === 'string' ? tooltip : undefined}\n tabIndex={!isInteractive && hasTooltip ? 0 : undefined}\n className={cn(\n // Same box as a `size=\"sm\"` ghost `Button` (e.g. `TraceIdButton`), so pills line up\n // with the heading and the trace ID on the same header row.\n 'inline-flex min-w-0 items-center gap-1.5 overflow-hidden rounded-full px-2',\n controlSizeClasses.sm,\n controlStateColorTransition,\n isInteractive\n ? cn(quietTextHover, 'cursor-pointer hover:bg-fill-subtle active:bg-fill')\n : cn('text-muted-foreground', hasTooltip && 'cursor-help'),\n className,\n )}\n {...props}\n >\n {icon && (\n <Icon size=\"xs\" className={cn('shrink-0 opacity-50 group-hover:opacity-100', transitions.opacity)}>\n {icon}\n </Icon>\n )}\n <span className=\"min-w-0 truncate\">{children}</span>\n </Root>\n );\n\n return (\n <li className=\"group flex h-control-sm min-w-0 shrink-0 items-center\">\n {!hasTooltip ? (\n root\n ) : (\n <Tooltip>\n <TooltipTrigger render={root} />\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n )}\n </li>\n );\n}\n","import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\n\nexport interface DataPanelNextPrevNavProps {\n onPrevious?: () => void;\n onNext?: () => void;\n previousLabel?: string;\n nextLabel?: string;\n variant?: ButtonProps['variant'];\n}\n\n/** Two independent previous/next buttons, laid out by the parent `HeaderActions` gap. */\nexport function DataPanelNextPrevNav({\n onPrevious,\n onNext,\n previousLabel = 'Go to previous',\n nextLabel = 'Go to next',\n variant = 'ghost',\n}: DataPanelNextPrevNavProps) {\n return (\n <>\n <Button size=\"icon-sm\" variant={variant} tooltip={previousLabel} onClick={onPrevious} disabled={!onPrevious}>\n <ArrowUpIcon />\n </Button>\n <Button size=\"icon-sm\" variant={variant} tooltip={nextLabel} onClick={onNext} disabled={!onNext}>\n <ArrowDownIcon />\n </Button>\n </>\n );\n}\n","import { Txt } from '@/ds/components/Txt';\nexport interface DataPanelNoDataProps {\n children?: React.ReactNode;\n}\n\nexport function DataPanelNoData({ children }: DataPanelNoDataProps) {\n return (\n <Txt variant=\"caption\" tone=\"faint\" className=\"px-3 py-4\">\n {children ?? 'No data found.'}\n </Txt>\n );\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport * as React from 'react';\n\nimport { DataPanelVariantContext } from './data-panel-context';\nimport { PortalContainerProvider } from '@/ds/primitives/portal-container';\nimport { frameFillStyle, frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// `drawer-popup` / `drawer-backdrop` carry the slide + fade transitions.\nimport '../Drawer/drawer.css';\n\ninterface DataPanelBaseProps {\n /** Accessible name (screen-reader only; the visible title comes from `DataPanel.Heading`). */\n title: string;\n /** Accessible description (screen-reader only). */\n description?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport interface DataPanelDrawerProps extends DataPanelBaseProps {\n /** `drawer` (default): a modal side drawer portaled to the right edge of the page. */\n variant?: 'drawer';\n /** Whether the drawer is shown. */\n open: boolean;\n /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */\n onClose?: () => void;\n /**\n * Elevation level when several sibling panels are open at once (not nested in\n * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is\n * narrower so the one beneath peeks out on the left. Siblings stack in mount\n * order: render the deeper panel after the shallower one.\n */\n depth?: 1 | 2 | 3;\n /**\n * Drawer width. `md` (default) is a narrow detail panel whose width shrinks\n * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the\n * trace panel); each `depth` level trims them by a small fixed amount so a\n * same-size parent still peeks out beneath. Changing `size` while open\n * animates the width.\n */\n size?: 'md' | 'half' | 'wide' | 'full';\n}\n\nexport interface DataPanelInlineProps extends DataPanelBaseProps {\n /**\n * `inline`: the panel card is rendered where it is mounted, in the normal\n * document flow (no portal, backdrop, focus trap or dismissal gestures).\n * Mount/unmount it to show/hide it. It fills its container's height, so give\n * the parent a bounded height for `DataPanel.Content` to scroll.\n */\n variant: 'inline';\n open?: never;\n onClose?: never;\n depth?: never;\n size?: never;\n}\n\nexport type DataPanelProps = DataPanelDrawerProps | DataPanelInlineProps;\n\n// The edge comes from the surface's `--surface-rim` inset (no CSS border), like `MainCard`.\n// `p-px` reserves that rim pixel so the header divider doesn't paint over it.\nconst CARD_CLASSES = 'flex max-h-full w-full flex-col overflow-hidden p-px';\n\nconst DEPTH_WIDTH = { 1: 'w-xl', 2: 'w-lg', 3: 'w-md' } as const;\nconst SIZE_WIDTH = { half: 'w-1/2', wide: 'w-4/5', full: 'w-full' } as const;\nconst SIZE_PERCENT = { half: '50%', wide: '80%', full: '100%' } as const;\n// Each extra depth level trims a stacked non-`md` panel so the parent peeks out beneath it.\nconst DEPTH_PEEK_REM = 1.5;\n\nexport function DataPanelRoot(props: DataPanelProps) {\n if (props.variant === 'inline') {\n return <DataPanelInline {...props} />;\n }\n return <DataPanelDrawer {...props} />;\n}\n\nfunction DataPanelInline({ title, description, children, className }: DataPanelInlineProps) {\n const descriptionId = React.useId();\n\n return (\n <DataPanelVariantContext.Provider value=\"inline\">\n <section\n data-slot=\"data-panel\"\n data-variant=\"inline\"\n aria-label={title}\n aria-describedby={description ? descriptionId : undefined}\n // Inline, the card docks beside the app frame, so it shares the frame's rounding.\n className={cn(CARD_CLASSES, frameSurfaceStyle, 'h-full min-h-0 rounded-studio-frame', className)}\n >\n {description && (\n <span id={descriptionId} className=\"sr-only\">\n {description}\n </span>\n )}\n {children}\n </section>\n </DataPanelVariantContext.Provider>\n );\n}\n\nfunction DataPanelDrawer({\n open,\n onClose,\n title,\n description,\n depth = 1,\n size = 'md',\n children,\n className,\n}: DataPanelDrawerProps) {\n // Swipe-exempt mount point for nested popups (Select, DropdownMenu, …) so they\n // stay inside Base UI's modal focus region and don't start a drawer swipe on\n // pointerdown. Same pattern as `SideDialogRoot`; see `portal-container.tsx`.\n const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);\n\n return (\n <DataPanelVariantContext.Provider value=\"drawer\">\n <DrawerPrimitive.Root\n open={open}\n onOpenChange={nextOpen => {\n if (!nextOpen) onClose?.();\n }}\n swipeDirection=\"right\"\n >\n <DrawerPrimitive.Portal>\n {/* Lighter than the shared `--scrim`: a side panel should keep the page beneath readable. */}\n <DrawerPrimitive.Backdrop className=\"drawer-backdrop fixed inset-0 z-50 bg-scrim/30\" />\n <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n <DrawerPrimitive.Popup\n data-slot=\"data-panel-popup\"\n data-depth={depth}\n data-size={size}\n className={cn(\n 'drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none',\n size === 'md' ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size],\n )}\n style={\n size !== 'md' && depth > 1\n ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` }\n : undefined\n }\n >\n {/* Not a heading: the visible `DataPanel.Heading` already is one; this only names the dialog. */}\n <DrawerPrimitive.Title render={<span />} className=\"sr-only\">\n {title}\n </DrawerPrimitive.Title>\n {description && (\n <DrawerPrimitive.Description className=\"sr-only\">{description}</DrawerPrimitive.Description>\n )}\n\n <DrawerPrimitive.Content render={<div ref={setPortalHost} className=\"absolute\" />} />\n\n <PortalContainerProvider container={portalHost}>\n {/* Whole card is swipe-exempt: pointerdown on tabs/buttons/text must not start a dismiss gesture. */}\n <DrawerPrimitive.Content\n render={<section />}\n className={cn(CARD_CLASSES, frameFillStyle, 'rounded-xl shadow-overlay', className)}\n >\n {children}\n </DrawerPrimitive.Content>\n </PortalContainerProvider>\n </DrawerPrimitive.Popup>\n </DrawerPrimitive.Viewport>\n </DrawerPrimitive.Portal>\n </DrawerPrimitive.Root>\n </DataPanelVariantContext.Provider>\n );\n}\n","import { DataPanelCloseButton } from './data-panel-close-button';\nimport { DataPanelContent } from './data-panel-content';\nimport { DataPanelCopyId } from './data-panel-copy-id';\nimport { DataPanelHeader } from './data-panel-header';\nimport { DataPanelHeaderActions } from './data-panel-header-actions';\nimport { DataPanelHeaderContent } from './data-panel-header-content';\nimport { DataPanelHeading } from './data-panel-heading';\nimport { DataPanelLoadingData } from './data-panel-loading-data';\nimport { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';\nimport { DataPanelNextPrevNav } from './data-panel-next-prev-nav';\nimport { DataPanelNoData } from './data-panel-no-data';\nimport { DataPanelRoot } from './data-panel-root';\nimport { DataPanelSectionHeading } from './data-panel-section-heading';\nimport { DataCodeSection } from '@/ds/components/DataCodeSection';\n\nexport const DataPanel = Object.assign(DataPanelRoot, {\n Header: DataPanelHeader,\n HeaderContent: DataPanelHeaderContent,\n HeaderActions: DataPanelHeaderActions,\n Heading: DataPanelHeading,\n Metadata: DataPanelMetadata,\n Meta: DataPanelMeta,\n CloseButton: DataPanelCloseButton,\n CopyId: DataPanelCopyId,\n NextPrevNav: DataPanelNextPrevNav,\n LoadingData: DataPanelLoadingData,\n NoData: DataPanelNoData,\n Content: DataPanelContent,\n CodeSection: DataCodeSection,\n SectionHeading: DataPanelSectionHeading,\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"DataPanel-Coc9h35I.cjs","names":["Button","cn","XIcon","ArrowLeftIcon","createContext","useContext","cn","DrawerPrimitive","useCopyToClipboard","useState","Tooltip","TooltipTrigger","Button","truncateString","TooltipContent","cn","Children","Fragment","cn","controlSizeClasses","Spinner","cn","controlSizeClasses","controlStateColorTransition","quietTextHover","Icon","transitions","Tooltip","TooltipTrigger","TooltipContent","_Fragment","Button","ArrowUpIcon","ArrowDownIcon","Txt","React","cn","frameSurfaceStyle","DrawerPrimitive","PortalContainerProvider","frameFillStyle","DataCodeSection","DataPanelSectionHeading"],"sources":["../src/ds/components/DataPanel/data-panel-close-button.tsx","../src/ds/components/DataPanel/data-panel-context.tsx","../src/ds/components/DataPanel/data-panel-content.tsx","../src/ds/components/DataPanel/data-panel-copy-id.tsx","../src/ds/components/DataPanel/data-panel-header.tsx","../src/ds/components/DataPanel/data-panel-header-actions.tsx","../src/ds/components/DataPanel/data-panel-header-content.tsx","../src/ds/components/DataPanel/data-panel-heading.tsx","../src/ds/components/DataPanel/data-panel-loading-data.tsx","../src/ds/components/DataPanel/data-panel-metadata.tsx","../src/ds/components/DataPanel/data-panel-next-prev-nav.tsx","../src/ds/components/DataPanel/data-panel-no-data.tsx","../src/ds/components/DataPanel/data-panel-root.tsx","../src/ds/components/DataPanel/data-panel.tsx"],"sourcesContent":["import { ArrowLeftIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelCloseButtonProps {\n onClick: () => void;\n tooltip?: string;\n /** Accessible name; override it when the arrow leads somewhere other than \"closed\" (e.g. back to a parent view). */\n label?: string;\n /**\n * `arrow` (default) is the leading \"leave this panel\" control, rendered first in the header.\n * `x` dismisses a nested column in place and belongs in `HeaderActions`, on the right.\n */\n icon?: 'arrow' | 'x';\n className?: string;\n variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelCloseButton({\n onClick,\n tooltip = 'Close panel',\n label = 'Close panel',\n icon = 'arrow',\n className,\n variant = 'ghost',\n}: DataPanelCloseButtonProps) {\n return (\n <Button\n size=\"icon-sm\"\n variant={variant}\n onClick={onClick}\n aria-label={label}\n tooltip={tooltip}\n className={cn('shrink-0', className)}\n >\n {icon === 'x' ? <XIcon /> : <ArrowLeftIcon />}\n </Button>\n );\n}\n","import { createContext, useContext } from 'react';\n\nexport type DataPanelVariant = 'drawer' | 'inline';\n\n// Defaults to `drawer` so sub-components rendered outside a `DataPanel` keep their historical behavior.\nexport const DataPanelVariantContext = createContext<DataPanelVariant>('drawer');\n\nexport const useDataPanelVariant = () => useContext(DataPanelVariantContext);\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport type { ReactNode, Ref } from 'react';\n\nimport { useDataPanelVariant } from './data-panel-context';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelContentProps {\n children: ReactNode;\n ref?: Ref<HTMLDivElement>;\n /** Layout overrides (e.g. padding) for the scroll container. */\n className?: string;\n}\n\nconst CONTENT_CLASSES = 'min-h-0 flex-1 overflow-y-auto p-2';\n\n// In the drawer variant, `DrawerPrimitive.Content` marks the region as swipe-exempt\n// so scrolling or selecting text inside the panel body doesn't start a\n// swipe-to-dismiss. The inline variant has no drawer, so a plain div is enough.\nexport function DataPanelContent({ children, ref, className }: DataPanelContentProps) {\n const variant = useDataPanelVariant();\n\n if (variant === 'inline') {\n return (\n <div ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </div>\n );\n }\n\n return (\n <DrawerPrimitive.Content ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </DrawerPrimitive.Content>\n );\n}\n","import { useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport interface DataPanelCopyIdProps {\n id: string;\n /** Characters kept when the id is truncated. Defaults to 12. */\n maxLength?: number;\n /** Append `…` to a truncated id. Defaults to true. */\n ellipsis?: boolean;\n /** Leading icon (bare SVG) naming what the id identifies. */\n icon?: React.ReactNode;\n}\n\n/**\n * Truncated identifier rendered inline in a `DataPanel.Heading`; clicking copies the full value.\n */\nexport function DataPanelCopyId({ id, maxLength = 12, ellipsis = true, icon }: DataPanelCopyIdProps) {\n const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });\n const [open, setOpen] = useState(false);\n\n return (\n <Tooltip open={isCopied || open} onOpenChange={setOpen}>\n <TooltipTrigger\n render={\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" icon={icon} onClick={handleCopy}>\n {ellipsis ? truncateString(id, maxLength) : id.slice(0, maxLength)}\n </Button>\n }\n />\n <TooltipContent>{isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}</TooltipContent>\n </Tooltip>\n );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataPanelHeaderProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeader({ className, children }: DataPanelHeaderProps) {\n return (\n <div\n className={cn(\n // Same box as the app `Header`. Leading `CloseButton`, then the heading\n // (+ inline metadata via `HeaderContent`), then `HeaderActions` pushed to the right edge.\n // `flex-wrap` drops the actions onto a second row when the panel is too narrow for one.\n // `gap-0.5` is the slight gap between the close arrow and the heading.\n // `py-1` keeps 28px controls + border within the 40px min height, so the divider\n // lines up with an adjacent app `Header` instead of sitting 1px lower.\n 'flex min-h-header-default w-full flex-wrap items-center gap-0.5 px-2 py-1',\n // Bottom border only when something follows the header (i.e. the panel is expanded).\n // When the panel is collapsed and the header is the only child, the border auto-hides.\n // Same edge color as the app `Header` it docks beside.\n 'not-last:border-b not-last:border-surface-rim',\n className,\n )}\n >\n {children}\n </div>\n );\n}\n","export interface DataPanelHeaderActionsProps {\n children: React.ReactNode;\n}\n\n/**\n * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`\n * (these are `size=\"sm\"` controls, like the page header actions) and wraps when the panel is too narrow.\n */\nexport function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps) {\n return <div className=\"ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 self-center\">{children}</div>;\n}\n","import { Children, Fragment } from 'react';\n\nexport interface DataPanelHeaderContentProps {\n children: React.ReactNode;\n}\n\n/**\n * Left block of a `DataPanel.Header`: heading followed inline by optional blocks such as `Metadata`,\n * truncated when too long. A vertical separator is rendered between consecutive blocks.\n */\nexport function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps) {\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n {Children.toArray(children).map((child, index) => (\n <Fragment key={index}>\n {index > 0 && <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />}\n {child}\n </Fragment>\n ))}\n </div>\n );\n}\n","import { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelHeadingProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeading({ className, children }: DataPanelHeadingProps) {\n return (\n <h3\n className={cn(\n // Same recipe as a current `Crumb` in the page header, with tight horizontal spacing:\n // inline children like `TraceIdButton` carry their own padding, so `gap-1` + `px-1`\n // is enough to keep the title close to the leading close arrow and the inline metadata.\n // `shrink-0`: the heading keeps its text; the inline `Metadata` row is what gets clipped.\n 'inline-flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-full px-1',\n controlSizeClasses.sm,\n 'cursor-default text-foreground [&>b]:text-caption [&>b]:text-muted-foreground',\n className,\n )}\n >\n {children}\n </h3>\n );\n}\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataPanelLoadingDataProps {\n children?: ReactNode;\n}\n\nexport function DataPanelLoadingData({ children }: DataPanelLoadingDataProps) {\n return (\n <div className=\"flex min-h-32 items-center justify-center gap-2 px-3 py-4 text-caption text-placeholder\">\n <Spinner size=\"sm\" variant=\"pulse\" className=\"text-placeholder\" /> {children ?? 'Loading...'}\n </div>\n );\n}\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition, transitions } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelMetadataProps {\n children: React.ReactNode;\n}\n\n/** Row of `Meta` pills next to a `DataPanel.Heading`. Never wraps; overflowing pills are clipped. */\nexport function DataPanelMetadata({ children }: DataPanelMetadataProps) {\n return <ul className=\"flex min-w-0 flex-nowrap items-center gap-0.5 overflow-hidden\">{children}</ul>;\n}\n\nexport interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {\n /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */\n as?: React.ElementType;\n href?: string;\n to?: string;\n /** Prefix icon (bare SVG). */\n icon?: React.ReactNode;\n /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */\n tooltip?: React.ReactNode;\n children: React.ReactNode;\n 'data-testid'?: string;\n}\n\nexport function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps) {\n const Root = as ?? 'span';\n const isInteractive = Boolean(as || props.href || props.to || props.onClick);\n\n const hasTooltip = tooltip != null;\n const root = (\n <Root\n aria-label={!isInteractive && typeof tooltip === 'string' ? tooltip : undefined}\n tabIndex={!isInteractive && hasTooltip ? 0 : undefined}\n className={cn(\n // Same box as a `size=\"sm\"` ghost `Button` (e.g. `TraceIdButton`), so pills line up\n // with the heading and the trace ID on the same header row.\n 'inline-flex min-w-0 items-center gap-1.5 overflow-hidden rounded-full px-2',\n controlSizeClasses.sm,\n controlStateColorTransition,\n isInteractive\n ? cn(quietTextHover, 'cursor-pointer hover:bg-fill-subtle active:bg-fill')\n : cn('text-muted-foreground', hasTooltip && 'cursor-help'),\n className,\n )}\n {...props}\n >\n {icon && (\n <Icon size=\"xs\" className={cn('shrink-0 opacity-50 group-hover:opacity-100', transitions.opacity)}>\n {icon}\n </Icon>\n )}\n <span className=\"min-w-0 truncate\">{children}</span>\n </Root>\n );\n\n return (\n <li className=\"group flex h-control-sm min-w-0 shrink-0 items-center\">\n {!hasTooltip ? (\n root\n ) : (\n <Tooltip>\n <TooltipTrigger render={root} />\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n )}\n </li>\n );\n}\n","import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\n\nexport interface DataPanelNextPrevNavProps {\n onPrevious?: () => void;\n onNext?: () => void;\n previousLabel?: string;\n nextLabel?: string;\n variant?: ButtonProps['variant'];\n}\n\n/** Two independent previous/next buttons, laid out by the parent `HeaderActions` gap. */\nexport function DataPanelNextPrevNav({\n onPrevious,\n onNext,\n previousLabel = 'Go to previous',\n nextLabel = 'Go to next',\n variant = 'ghost',\n}: DataPanelNextPrevNavProps) {\n return (\n <>\n <Button size=\"icon-sm\" variant={variant} tooltip={previousLabel} onClick={onPrevious} disabled={!onPrevious}>\n <ArrowUpIcon />\n </Button>\n <Button size=\"icon-sm\" variant={variant} tooltip={nextLabel} onClick={onNext} disabled={!onNext}>\n <ArrowDownIcon />\n </Button>\n </>\n );\n}\n","import { Txt } from '@/ds/components/Txt';\nexport interface DataPanelNoDataProps {\n children?: React.ReactNode;\n}\n\nexport function DataPanelNoData({ children }: DataPanelNoDataProps) {\n return (\n <Txt variant=\"caption\" tone=\"faint\" className=\"px-3 py-4\">\n {children ?? 'No data found.'}\n </Txt>\n );\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport * as React from 'react';\n\nimport { DataPanelVariantContext } from './data-panel-context';\nimport { PortalContainerProvider } from '@/ds/primitives/portal-container';\nimport { frameFillStyle, frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// `drawer-popup` / `drawer-backdrop` carry the slide + fade transitions.\nimport '../Drawer/drawer.css';\n\ninterface DataPanelBaseProps {\n /** Accessible name (screen-reader only; the visible title comes from `DataPanel.Heading`). */\n title: string;\n /** Accessible description (screen-reader only). */\n description?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport interface DataPanelDrawerProps extends DataPanelBaseProps {\n /** `drawer` (default): a modal side drawer portaled to the right edge of the page. */\n variant?: 'drawer';\n /** Whether the drawer is shown. */\n open: boolean;\n /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */\n onClose?: () => void;\n /**\n * Elevation level when several sibling panels are open at once (not nested in\n * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is\n * narrower so the one beneath peeks out on the left. Siblings stack in mount\n * order: render the deeper panel after the shallower one.\n */\n depth?: 1 | 2 | 3;\n /**\n * Drawer width. `md` (default) is a narrow detail panel whose width shrinks\n * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the\n * trace panel); each `depth` level trims them by a small fixed amount so a\n * same-size parent still peeks out beneath. Changing `size` while open\n * animates the width.\n */\n size?: 'md' | 'half' | 'wide' | 'full';\n}\n\nexport interface DataPanelInlineProps extends DataPanelBaseProps {\n /**\n * `inline`: the panel card is rendered where it is mounted, in the normal\n * document flow (no portal, backdrop, focus trap or dismissal gestures).\n * Mount/unmount it to show/hide it. It fills its container's height, so give\n * the parent a bounded height for `DataPanel.Content` to scroll.\n */\n variant: 'inline';\n open?: never;\n onClose?: never;\n depth?: never;\n size?: never;\n}\n\nexport type DataPanelProps = DataPanelDrawerProps | DataPanelInlineProps;\n\n// The edge comes from the surface's `--surface-rim` inset (no CSS border), like `MainCard`.\n// `p-px` reserves that rim pixel so the header divider doesn't paint over it.\nconst CARD_CLASSES = 'flex max-h-full w-full flex-col overflow-hidden p-px';\n\nconst DEPTH_WIDTH = { 1: 'w-xl', 2: 'w-lg', 3: 'w-md' } as const;\nconst SIZE_WIDTH = { half: 'w-1/2', wide: 'w-4/5', full: 'w-full' } as const;\nconst SIZE_PERCENT = { half: '50%', wide: '80%', full: '100%' } as const;\n// Each extra depth level trims a stacked non-`md` panel so the parent peeks out beneath it.\nconst DEPTH_PEEK_REM = 1.5;\n\nexport function DataPanelRoot(props: DataPanelProps) {\n if (props.variant === 'inline') {\n return <DataPanelInline {...props} />;\n }\n return <DataPanelDrawer {...props} />;\n}\n\nfunction DataPanelInline({ title, description, children, className }: DataPanelInlineProps) {\n const descriptionId = React.useId();\n\n return (\n <DataPanelVariantContext.Provider value=\"inline\">\n <section\n data-slot=\"data-panel\"\n data-variant=\"inline\"\n aria-label={title}\n aria-describedby={description ? descriptionId : undefined}\n // Inline, the card docks beside the app frame, so it shares the frame's rounding.\n className={cn(CARD_CLASSES, frameSurfaceStyle, 'h-full min-h-0 rounded-studio-frame', className)}\n >\n {description && (\n <span id={descriptionId} className=\"sr-only\">\n {description}\n </span>\n )}\n {children}\n </section>\n </DataPanelVariantContext.Provider>\n );\n}\n\nfunction DataPanelDrawer({\n open,\n onClose,\n title,\n description,\n depth = 1,\n size = 'md',\n children,\n className,\n}: DataPanelDrawerProps) {\n // Swipe-exempt mount point for nested popups (Select, DropdownMenu, …) so they\n // stay inside Base UI's modal focus region and don't start a drawer swipe on\n // pointerdown. Same pattern as `SideDialogRoot`; see `portal-container.tsx`.\n const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);\n\n return (\n <DataPanelVariantContext.Provider value=\"drawer\">\n <DrawerPrimitive.Root\n open={open}\n onOpenChange={nextOpen => {\n if (!nextOpen) onClose?.();\n }}\n swipeDirection=\"right\"\n >\n <DrawerPrimitive.Portal>\n {/* Lighter than the shared `--scrim`: a side panel should keep the page beneath readable. */}\n <DrawerPrimitive.Backdrop className=\"drawer-backdrop fixed inset-0 z-50 bg-scrim/30\" />\n <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n <DrawerPrimitive.Popup\n data-slot=\"data-panel-popup\"\n data-depth={depth}\n data-size={size}\n className={cn(\n 'drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none',\n size === 'md' ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size],\n )}\n style={\n size !== 'md' && depth > 1\n ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` }\n : undefined\n }\n >\n {/* Not a heading: the visible `DataPanel.Heading` already is one; this only names the dialog. */}\n <DrawerPrimitive.Title render={<span />} className=\"sr-only\">\n {title}\n </DrawerPrimitive.Title>\n {description && (\n <DrawerPrimitive.Description className=\"sr-only\">{description}</DrawerPrimitive.Description>\n )}\n\n <DrawerPrimitive.Content render={<div ref={setPortalHost} className=\"absolute\" />} />\n\n <PortalContainerProvider container={portalHost}>\n {/* Whole card is swipe-exempt: pointerdown on tabs/buttons/text must not start a dismiss gesture. */}\n <DrawerPrimitive.Content\n render={<section />}\n className={cn(CARD_CLASSES, frameFillStyle, 'rounded-xl shadow-overlay', className)}\n >\n {children}\n </DrawerPrimitive.Content>\n </PortalContainerProvider>\n </DrawerPrimitive.Popup>\n </DrawerPrimitive.Viewport>\n </DrawerPrimitive.Portal>\n </DrawerPrimitive.Root>\n </DataPanelVariantContext.Provider>\n );\n}\n","import { DataPanelCloseButton } from './data-panel-close-button';\nimport { DataPanelContent } from './data-panel-content';\nimport { DataPanelCopyId } from './data-panel-copy-id';\nimport { DataPanelHeader } from './data-panel-header';\nimport { DataPanelHeaderActions } from './data-panel-header-actions';\nimport { DataPanelHeaderContent } from './data-panel-header-content';\nimport { DataPanelHeading } from './data-panel-heading';\nimport { DataPanelLoadingData } from './data-panel-loading-data';\nimport { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';\nimport { DataPanelNextPrevNav } from './data-panel-next-prev-nav';\nimport { DataPanelNoData } from './data-panel-no-data';\nimport { DataPanelRoot } from './data-panel-root';\nimport { DataPanelSectionHeading } from './data-panel-section-heading';\nimport { DataCodeSection } from '@/ds/components/DataCodeSection';\n\nexport const DataPanel = Object.assign(DataPanelRoot, {\n Header: DataPanelHeader,\n HeaderContent: DataPanelHeaderContent,\n HeaderActions: DataPanelHeaderActions,\n Heading: DataPanelHeading,\n Metadata: DataPanelMetadata,\n Meta: DataPanelMeta,\n CloseButton: DataPanelCloseButton,\n CopyId: DataPanelCopyId,\n NextPrevNav: DataPanelNextPrevNav,\n LoadingData: DataPanelLoadingData,\n NoData: DataPanelNoData,\n Content: DataPanelContent,\n CodeSection: DataCodeSection,\n SectionHeading: DataPanelSectionHeading,\n});\n"],"mappings":"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"}
@@ -13,7 +13,7 @@ import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.es.js";
13
13
  import "./components/Drawer.es.js";
14
14
  import { t as Spinner } from "./spinner-CnLgLj9R.js";
15
15
  import { t as DataPanelSectionHeading } from "./data-panel-section-heading-X3tHNMV1.js";
16
- import { t as DataCodeSection } from "./DataCodeSection-KJRyRD1Q.js";
16
+ import { t as DataCodeSection } from "./DataCodeSection-PY9XEg2C.js";
17
17
  import * as React$1 from "react";
18
18
  import { Children, Fragment, createContext, useContext, useState } from "react";
19
19
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -289,4 +289,4 @@ var DataPanel = Object.assign(DataPanelRoot, {
289
289
  });
290
290
  export { DataPanel as t };
291
291
 
292
- //# sourceMappingURL=DataPanel-Bv4M17xO.js.map
292
+ //# sourceMappingURL=DataPanel-IgB9D5PO.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataPanel-Bv4M17xO.js","names":["DrawerPrimitive","_Fragment","React","DrawerPrimitive"],"sources":["../src/ds/components/DataPanel/data-panel-close-button.tsx","../src/ds/components/DataPanel/data-panel-context.tsx","../src/ds/components/DataPanel/data-panel-content.tsx","../src/ds/components/DataPanel/data-panel-copy-id.tsx","../src/ds/components/DataPanel/data-panel-header.tsx","../src/ds/components/DataPanel/data-panel-header-actions.tsx","../src/ds/components/DataPanel/data-panel-header-content.tsx","../src/ds/components/DataPanel/data-panel-heading.tsx","../src/ds/components/DataPanel/data-panel-loading-data.tsx","../src/ds/components/DataPanel/data-panel-metadata.tsx","../src/ds/components/DataPanel/data-panel-next-prev-nav.tsx","../src/ds/components/DataPanel/data-panel-no-data.tsx","../src/ds/components/DataPanel/data-panel-root.tsx","../src/ds/components/DataPanel/data-panel.tsx"],"sourcesContent":["import { ArrowLeftIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelCloseButtonProps {\n onClick: () => void;\n tooltip?: string;\n /** Accessible name; override it when the arrow leads somewhere other than \"closed\" (e.g. back to a parent view). */\n label?: string;\n /**\n * `arrow` (default) is the leading \"leave this panel\" control, rendered first in the header.\n * `x` dismisses a nested column in place and belongs in `HeaderActions`, on the right.\n */\n icon?: 'arrow' | 'x';\n className?: string;\n variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelCloseButton({\n onClick,\n tooltip = 'Close panel',\n label = 'Close panel',\n icon = 'arrow',\n className,\n variant = 'ghost',\n}: DataPanelCloseButtonProps) {\n return (\n <Button\n size=\"icon-sm\"\n variant={variant}\n onClick={onClick}\n aria-label={label}\n tooltip={tooltip}\n className={cn('shrink-0', className)}\n >\n {icon === 'x' ? <XIcon /> : <ArrowLeftIcon />}\n </Button>\n );\n}\n","import { createContext, useContext } from 'react';\n\nexport type DataPanelVariant = 'drawer' | 'inline';\n\n// Defaults to `drawer` so sub-components rendered outside a `DataPanel` keep their historical behavior.\nexport const DataPanelVariantContext = createContext<DataPanelVariant>('drawer');\n\nexport const useDataPanelVariant = () => useContext(DataPanelVariantContext);\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport type { ReactNode, Ref } from 'react';\n\nimport { useDataPanelVariant } from './data-panel-context';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelContentProps {\n children: ReactNode;\n ref?: Ref<HTMLDivElement>;\n /** Layout overrides (e.g. padding) for the scroll container. */\n className?: string;\n}\n\nconst CONTENT_CLASSES = 'min-h-0 flex-1 overflow-y-auto p-2';\n\n// In the drawer variant, `DrawerPrimitive.Content` marks the region as swipe-exempt\n// so scrolling or selecting text inside the panel body doesn't start a\n// swipe-to-dismiss. The inline variant has no drawer, so a plain div is enough.\nexport function DataPanelContent({ children, ref, className }: DataPanelContentProps) {\n const variant = useDataPanelVariant();\n\n if (variant === 'inline') {\n return (\n <div ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </div>\n );\n }\n\n return (\n <DrawerPrimitive.Content ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </DrawerPrimitive.Content>\n );\n}\n","import { useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport interface DataPanelCopyIdProps {\n id: string;\n /** Characters kept when the id is truncated. Defaults to 12. */\n maxLength?: number;\n /** Append `…` to a truncated id. Defaults to true. */\n ellipsis?: boolean;\n /** Leading icon (bare SVG) naming what the id identifies. */\n icon?: React.ReactNode;\n}\n\n/**\n * Truncated identifier rendered inline in a `DataPanel.Heading`; clicking copies the full value.\n */\nexport function DataPanelCopyId({ id, maxLength = 12, ellipsis = true, icon }: DataPanelCopyIdProps) {\n const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });\n const [open, setOpen] = useState(false);\n\n return (\n <Tooltip open={isCopied || open} onOpenChange={setOpen}>\n <TooltipTrigger\n render={\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" icon={icon} onClick={handleCopy}>\n {ellipsis ? truncateString(id, maxLength) : id.slice(0, maxLength)}\n </Button>\n }\n />\n <TooltipContent>{isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}</TooltipContent>\n </Tooltip>\n );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataPanelHeaderProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeader({ className, children }: DataPanelHeaderProps) {\n return (\n <div\n className={cn(\n // Same box as the app `Header`. Leading `CloseButton`, then the heading\n // (+ inline metadata via `HeaderContent`), then `HeaderActions` pushed to the right edge.\n // `flex-wrap` drops the actions onto a second row when the panel is too narrow for one.\n // `gap-0.5` is the slight gap between the close arrow and the heading.\n // `py-1` keeps 28px controls + border within the 40px min height, so the divider\n // lines up with an adjacent app `Header` instead of sitting 1px lower.\n 'flex min-h-header-default w-full flex-wrap items-center gap-0.5 px-2 py-1',\n // Bottom border only when something follows the header (i.e. the panel is expanded).\n // When the panel is collapsed and the header is the only child, the border auto-hides.\n // Same edge color as the app `Header` it docks beside.\n 'not-last:border-b not-last:border-surface-rim',\n className,\n )}\n >\n {children}\n </div>\n );\n}\n","export interface DataPanelHeaderActionsProps {\n children: React.ReactNode;\n}\n\n/**\n * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`\n * (these are `size=\"sm\"` controls, like the page header actions) and wraps when the panel is too narrow.\n */\nexport function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps) {\n return <div className=\"ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 self-center\">{children}</div>;\n}\n","import { Children, Fragment } from 'react';\n\nexport interface DataPanelHeaderContentProps {\n children: React.ReactNode;\n}\n\n/**\n * Left block of a `DataPanel.Header`: heading followed inline by optional blocks such as `Metadata`,\n * truncated when too long. A vertical separator is rendered between consecutive blocks.\n */\nexport function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps) {\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n {Children.toArray(children).map((child, index) => (\n <Fragment key={index}>\n {index > 0 && <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />}\n {child}\n </Fragment>\n ))}\n </div>\n );\n}\n","import { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelHeadingProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeading({ className, children }: DataPanelHeadingProps) {\n return (\n <h3\n className={cn(\n // Same recipe as a current `Crumb` in the page header, with tight horizontal spacing:\n // inline children like `TraceIdButton` carry their own padding, so `gap-1` + `px-1`\n // is enough to keep the title close to the leading close arrow and the inline metadata.\n // `shrink-0`: the heading keeps its text; the inline `Metadata` row is what gets clipped.\n 'inline-flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-full px-1',\n controlSizeClasses.sm,\n 'cursor-default text-foreground [&>b]:text-caption [&>b]:text-muted-foreground',\n className,\n )}\n >\n {children}\n </h3>\n );\n}\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataPanelLoadingDataProps {\n children?: ReactNode;\n}\n\nexport function DataPanelLoadingData({ children }: DataPanelLoadingDataProps) {\n return (\n <div className=\"flex min-h-32 items-center justify-center gap-2 px-3 py-4 text-caption text-placeholder\">\n <Spinner size=\"sm\" variant=\"pulse\" className=\"text-placeholder\" /> {children ?? 'Loading...'}\n </div>\n );\n}\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition, transitions } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelMetadataProps {\n children: React.ReactNode;\n}\n\n/** Row of `Meta` pills next to a `DataPanel.Heading`. Never wraps; overflowing pills are clipped. */\nexport function DataPanelMetadata({ children }: DataPanelMetadataProps) {\n return <ul className=\"flex min-w-0 flex-nowrap items-center gap-0.5 overflow-hidden\">{children}</ul>;\n}\n\nexport interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {\n /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */\n as?: React.ElementType;\n href?: string;\n to?: string;\n /** Prefix icon (bare SVG). */\n icon?: React.ReactNode;\n /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */\n tooltip?: React.ReactNode;\n children: React.ReactNode;\n 'data-testid'?: string;\n}\n\nexport function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps) {\n const Root = as ?? 'span';\n const isInteractive = Boolean(as || props.href || props.to || props.onClick);\n\n const hasTooltip = tooltip != null;\n const root = (\n <Root\n aria-label={!isInteractive && typeof tooltip === 'string' ? tooltip : undefined}\n tabIndex={!isInteractive && hasTooltip ? 0 : undefined}\n className={cn(\n // Same box as a `size=\"sm\"` ghost `Button` (e.g. `TraceIdButton`), so pills line up\n // with the heading and the trace ID on the same header row.\n 'inline-flex min-w-0 items-center gap-1.5 overflow-hidden rounded-full px-2',\n controlSizeClasses.sm,\n controlStateColorTransition,\n isInteractive\n ? cn(quietTextHover, 'cursor-pointer hover:bg-fill-subtle active:bg-fill')\n : cn('text-muted-foreground', hasTooltip && 'cursor-help'),\n className,\n )}\n {...props}\n >\n {icon && (\n <Icon size=\"xs\" className={cn('shrink-0 opacity-50 group-hover:opacity-100', transitions.opacity)}>\n {icon}\n </Icon>\n )}\n <span className=\"min-w-0 truncate\">{children}</span>\n </Root>\n );\n\n return (\n <li className=\"group flex h-control-sm min-w-0 shrink-0 items-center\">\n {!hasTooltip ? (\n root\n ) : (\n <Tooltip>\n <TooltipTrigger render={root} />\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n )}\n </li>\n );\n}\n","import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\n\nexport interface DataPanelNextPrevNavProps {\n onPrevious?: () => void;\n onNext?: () => void;\n previousLabel?: string;\n nextLabel?: string;\n variant?: ButtonProps['variant'];\n}\n\n/** Two independent previous/next buttons, laid out by the parent `HeaderActions` gap. */\nexport function DataPanelNextPrevNav({\n onPrevious,\n onNext,\n previousLabel = 'Go to previous',\n nextLabel = 'Go to next',\n variant = 'ghost',\n}: DataPanelNextPrevNavProps) {\n return (\n <>\n <Button size=\"icon-sm\" variant={variant} tooltip={previousLabel} onClick={onPrevious} disabled={!onPrevious}>\n <ArrowUpIcon />\n </Button>\n <Button size=\"icon-sm\" variant={variant} tooltip={nextLabel} onClick={onNext} disabled={!onNext}>\n <ArrowDownIcon />\n </Button>\n </>\n );\n}\n","import { Txt } from '@/ds/components/Txt';\nexport interface DataPanelNoDataProps {\n children?: React.ReactNode;\n}\n\nexport function DataPanelNoData({ children }: DataPanelNoDataProps) {\n return (\n <Txt variant=\"caption\" tone=\"faint\" className=\"px-3 py-4\">\n {children ?? 'No data found.'}\n </Txt>\n );\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport * as React from 'react';\n\nimport { DataPanelVariantContext } from './data-panel-context';\nimport { PortalContainerProvider } from '@/ds/primitives/portal-container';\nimport { frameFillStyle, frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// `drawer-popup` / `drawer-backdrop` carry the slide + fade transitions.\nimport '../Drawer/drawer.css';\n\ninterface DataPanelBaseProps {\n /** Accessible name (screen-reader only; the visible title comes from `DataPanel.Heading`). */\n title: string;\n /** Accessible description (screen-reader only). */\n description?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport interface DataPanelDrawerProps extends DataPanelBaseProps {\n /** `drawer` (default): a modal side drawer portaled to the right edge of the page. */\n variant?: 'drawer';\n /** Whether the drawer is shown. */\n open: boolean;\n /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */\n onClose?: () => void;\n /**\n * Elevation level when several sibling panels are open at once (not nested in\n * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is\n * narrower so the one beneath peeks out on the left. Siblings stack in mount\n * order: render the deeper panel after the shallower one.\n */\n depth?: 1 | 2 | 3;\n /**\n * Drawer width. `md` (default) is a narrow detail panel whose width shrinks\n * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the\n * trace panel); each `depth` level trims them by a small fixed amount so a\n * same-size parent still peeks out beneath. Changing `size` while open\n * animates the width.\n */\n size?: 'md' | 'half' | 'wide' | 'full';\n}\n\nexport interface DataPanelInlineProps extends DataPanelBaseProps {\n /**\n * `inline`: the panel card is rendered where it is mounted, in the normal\n * document flow (no portal, backdrop, focus trap or dismissal gestures).\n * Mount/unmount it to show/hide it. It fills its container's height, so give\n * the parent a bounded height for `DataPanel.Content` to scroll.\n */\n variant: 'inline';\n open?: never;\n onClose?: never;\n depth?: never;\n size?: never;\n}\n\nexport type DataPanelProps = DataPanelDrawerProps | DataPanelInlineProps;\n\n// The edge comes from the surface's `--surface-rim` inset (no CSS border), like `MainCard`.\n// `p-px` reserves that rim pixel so the header divider doesn't paint over it.\nconst CARD_CLASSES = 'flex max-h-full w-full flex-col overflow-hidden p-px';\n\nconst DEPTH_WIDTH = { 1: 'w-xl', 2: 'w-lg', 3: 'w-md' } as const;\nconst SIZE_WIDTH = { half: 'w-1/2', wide: 'w-4/5', full: 'w-full' } as const;\nconst SIZE_PERCENT = { half: '50%', wide: '80%', full: '100%' } as const;\n// Each extra depth level trims a stacked non-`md` panel so the parent peeks out beneath it.\nconst DEPTH_PEEK_REM = 1.5;\n\nexport function DataPanelRoot(props: DataPanelProps) {\n if (props.variant === 'inline') {\n return <DataPanelInline {...props} />;\n }\n return <DataPanelDrawer {...props} />;\n}\n\nfunction DataPanelInline({ title, description, children, className }: DataPanelInlineProps) {\n const descriptionId = React.useId();\n\n return (\n <DataPanelVariantContext.Provider value=\"inline\">\n <section\n data-slot=\"data-panel\"\n data-variant=\"inline\"\n aria-label={title}\n aria-describedby={description ? descriptionId : undefined}\n // Inline, the card docks beside the app frame, so it shares the frame's rounding.\n className={cn(CARD_CLASSES, frameSurfaceStyle, 'h-full min-h-0 rounded-studio-frame', className)}\n >\n {description && (\n <span id={descriptionId} className=\"sr-only\">\n {description}\n </span>\n )}\n {children}\n </section>\n </DataPanelVariantContext.Provider>\n );\n}\n\nfunction DataPanelDrawer({\n open,\n onClose,\n title,\n description,\n depth = 1,\n size = 'md',\n children,\n className,\n}: DataPanelDrawerProps) {\n // Swipe-exempt mount point for nested popups (Select, DropdownMenu, …) so they\n // stay inside Base UI's modal focus region and don't start a drawer swipe on\n // pointerdown. Same pattern as `SideDialogRoot`; see `portal-container.tsx`.\n const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);\n\n return (\n <DataPanelVariantContext.Provider value=\"drawer\">\n <DrawerPrimitive.Root\n open={open}\n onOpenChange={nextOpen => {\n if (!nextOpen) onClose?.();\n }}\n swipeDirection=\"right\"\n >\n <DrawerPrimitive.Portal>\n {/* Lighter than the shared `--scrim`: a side panel should keep the page beneath readable. */}\n <DrawerPrimitive.Backdrop className=\"drawer-backdrop fixed inset-0 z-50 bg-scrim/30\" />\n <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n <DrawerPrimitive.Popup\n data-slot=\"data-panel-popup\"\n data-depth={depth}\n data-size={size}\n className={cn(\n 'drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none',\n size === 'md' ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size],\n )}\n style={\n size !== 'md' && depth > 1\n ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` }\n : undefined\n }\n >\n {/* Not a heading: the visible `DataPanel.Heading` already is one; this only names the dialog. */}\n <DrawerPrimitive.Title render={<span />} className=\"sr-only\">\n {title}\n </DrawerPrimitive.Title>\n {description && (\n <DrawerPrimitive.Description className=\"sr-only\">{description}</DrawerPrimitive.Description>\n )}\n\n <DrawerPrimitive.Content render={<div ref={setPortalHost} className=\"absolute\" />} />\n\n <PortalContainerProvider container={portalHost}>\n {/* Whole card is swipe-exempt: pointerdown on tabs/buttons/text must not start a dismiss gesture. */}\n <DrawerPrimitive.Content\n render={<section />}\n className={cn(CARD_CLASSES, frameFillStyle, 'rounded-xl shadow-overlay', className)}\n >\n {children}\n </DrawerPrimitive.Content>\n </PortalContainerProvider>\n </DrawerPrimitive.Popup>\n </DrawerPrimitive.Viewport>\n </DrawerPrimitive.Portal>\n </DrawerPrimitive.Root>\n </DataPanelVariantContext.Provider>\n );\n}\n","import { DataPanelCloseButton } from './data-panel-close-button';\nimport { DataPanelContent } from './data-panel-content';\nimport { DataPanelCopyId } from './data-panel-copy-id';\nimport { DataPanelHeader } from './data-panel-header';\nimport { DataPanelHeaderActions } from './data-panel-header-actions';\nimport { DataPanelHeaderContent } from './data-panel-header-content';\nimport { DataPanelHeading } from './data-panel-heading';\nimport { DataPanelLoadingData } from './data-panel-loading-data';\nimport { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';\nimport { DataPanelNextPrevNav } from './data-panel-next-prev-nav';\nimport { DataPanelNoData } from './data-panel-no-data';\nimport { DataPanelRoot } from './data-panel-root';\nimport { DataPanelSectionHeading } from './data-panel-section-heading';\nimport { DataCodeSection } from '@/ds/components/DataCodeSection';\n\nexport const DataPanel = Object.assign(DataPanelRoot, {\n Header: DataPanelHeader,\n HeaderContent: DataPanelHeaderContent,\n HeaderActions: DataPanelHeaderActions,\n Heading: DataPanelHeading,\n Metadata: DataPanelMetadata,\n Meta: DataPanelMeta,\n CloseButton: DataPanelCloseButton,\n CopyId: DataPanelCopyId,\n NextPrevNav: DataPanelNextPrevNav,\n LoadingData: DataPanelLoadingData,\n NoData: DataPanelNoData,\n Content: DataPanelContent,\n CodeSection: DataCodeSection,\n SectionHeading: DataPanelSectionHeading,\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"DataPanel-IgB9D5PO.js","names":["DrawerPrimitive","_Fragment","React","DrawerPrimitive"],"sources":["../src/ds/components/DataPanel/data-panel-close-button.tsx","../src/ds/components/DataPanel/data-panel-context.tsx","../src/ds/components/DataPanel/data-panel-content.tsx","../src/ds/components/DataPanel/data-panel-copy-id.tsx","../src/ds/components/DataPanel/data-panel-header.tsx","../src/ds/components/DataPanel/data-panel-header-actions.tsx","../src/ds/components/DataPanel/data-panel-header-content.tsx","../src/ds/components/DataPanel/data-panel-heading.tsx","../src/ds/components/DataPanel/data-panel-loading-data.tsx","../src/ds/components/DataPanel/data-panel-metadata.tsx","../src/ds/components/DataPanel/data-panel-next-prev-nav.tsx","../src/ds/components/DataPanel/data-panel-no-data.tsx","../src/ds/components/DataPanel/data-panel-root.tsx","../src/ds/components/DataPanel/data-panel.tsx"],"sourcesContent":["import { ArrowLeftIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelCloseButtonProps {\n onClick: () => void;\n tooltip?: string;\n /** Accessible name; override it when the arrow leads somewhere other than \"closed\" (e.g. back to a parent view). */\n label?: string;\n /**\n * `arrow` (default) is the leading \"leave this panel\" control, rendered first in the header.\n * `x` dismisses a nested column in place and belongs in `HeaderActions`, on the right.\n */\n icon?: 'arrow' | 'x';\n className?: string;\n variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelCloseButton({\n onClick,\n tooltip = 'Close panel',\n label = 'Close panel',\n icon = 'arrow',\n className,\n variant = 'ghost',\n}: DataPanelCloseButtonProps) {\n return (\n <Button\n size=\"icon-sm\"\n variant={variant}\n onClick={onClick}\n aria-label={label}\n tooltip={tooltip}\n className={cn('shrink-0', className)}\n >\n {icon === 'x' ? <XIcon /> : <ArrowLeftIcon />}\n </Button>\n );\n}\n","import { createContext, useContext } from 'react';\n\nexport type DataPanelVariant = 'drawer' | 'inline';\n\n// Defaults to `drawer` so sub-components rendered outside a `DataPanel` keep their historical behavior.\nexport const DataPanelVariantContext = createContext<DataPanelVariant>('drawer');\n\nexport const useDataPanelVariant = () => useContext(DataPanelVariantContext);\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport type { ReactNode, Ref } from 'react';\n\nimport { useDataPanelVariant } from './data-panel-context';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelContentProps {\n children: ReactNode;\n ref?: Ref<HTMLDivElement>;\n /** Layout overrides (e.g. padding) for the scroll container. */\n className?: string;\n}\n\nconst CONTENT_CLASSES = 'min-h-0 flex-1 overflow-y-auto p-2';\n\n// In the drawer variant, `DrawerPrimitive.Content` marks the region as swipe-exempt\n// so scrolling or selecting text inside the panel body doesn't start a\n// swipe-to-dismiss. The inline variant has no drawer, so a plain div is enough.\nexport function DataPanelContent({ children, ref, className }: DataPanelContentProps) {\n const variant = useDataPanelVariant();\n\n if (variant === 'inline') {\n return (\n <div ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </div>\n );\n }\n\n return (\n <DrawerPrimitive.Content ref={ref} className={cn(CONTENT_CLASSES, className)}>\n {children}\n </DrawerPrimitive.Content>\n );\n}\n","import { useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport interface DataPanelCopyIdProps {\n id: string;\n /** Characters kept when the id is truncated. Defaults to 12. */\n maxLength?: number;\n /** Append `…` to a truncated id. Defaults to true. */\n ellipsis?: boolean;\n /** Leading icon (bare SVG) naming what the id identifies. */\n icon?: React.ReactNode;\n}\n\n/**\n * Truncated identifier rendered inline in a `DataPanel.Heading`; clicking copies the full value.\n */\nexport function DataPanelCopyId({ id, maxLength = 12, ellipsis = true, icon }: DataPanelCopyIdProps) {\n const { isCopied, handleCopy } = useCopyToClipboard({ text: id, showToast: false });\n const [open, setOpen] = useState(false);\n\n return (\n <Tooltip open={isCopied || open} onOpenChange={setOpen}>\n <TooltipTrigger\n render={\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" icon={icon} onClick={handleCopy}>\n {ellipsis ? truncateString(id, maxLength) : id.slice(0, maxLength)}\n </Button>\n }\n />\n <TooltipContent>{isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}</TooltipContent>\n </Tooltip>\n );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataPanelHeaderProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeader({ className, children }: DataPanelHeaderProps) {\n return (\n <div\n className={cn(\n // Same box as the app `Header`. Leading `CloseButton`, then the heading\n // (+ inline metadata via `HeaderContent`), then `HeaderActions` pushed to the right edge.\n // `flex-wrap` drops the actions onto a second row when the panel is too narrow for one.\n // `gap-0.5` is the slight gap between the close arrow and the heading.\n // `py-1` keeps 28px controls + border within the 40px min height, so the divider\n // lines up with an adjacent app `Header` instead of sitting 1px lower.\n 'flex min-h-header-default w-full flex-wrap items-center gap-0.5 px-2 py-1',\n // Bottom border only when something follows the header (i.e. the panel is expanded).\n // When the panel is collapsed and the header is the only child, the border auto-hides.\n // Same edge color as the app `Header` it docks beside.\n 'not-last:border-b not-last:border-surface-rim',\n className,\n )}\n >\n {children}\n </div>\n );\n}\n","export interface DataPanelHeaderActionsProps {\n children: React.ReactNode;\n}\n\n/**\n * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`\n * (these are `size=\"sm\"` controls, like the page header actions) and wraps when the panel is too narrow.\n */\nexport function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps) {\n return <div className=\"ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 self-center\">{children}</div>;\n}\n","import { Children, Fragment } from 'react';\n\nexport interface DataPanelHeaderContentProps {\n children: React.ReactNode;\n}\n\n/**\n * Left block of a `DataPanel.Header`: heading followed inline by optional blocks such as `Metadata`,\n * truncated when too long. A vertical separator is rendered between consecutive blocks.\n */\nexport function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps) {\n return (\n <div className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n {Children.toArray(children).map((child, index) => (\n <Fragment key={index}>\n {index > 0 && <div aria-hidden=\"true\" className=\"mx-1 h-4 w-px shrink-0 bg-border-strong\" />}\n {child}\n </Fragment>\n ))}\n </div>\n );\n}\n","import { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelHeadingProps {\n className?: string;\n children: React.ReactNode;\n}\n\nexport function DataPanelHeading({ className, children }: DataPanelHeadingProps) {\n return (\n <h3\n className={cn(\n // Same recipe as a current `Crumb` in the page header, with tight horizontal spacing:\n // inline children like `TraceIdButton` carry their own padding, so `gap-1` + `px-1`\n // is enough to keep the title close to the leading close arrow and the inline metadata.\n // `shrink-0`: the heading keeps its text; the inline `Metadata` row is what gets clipped.\n 'inline-flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-full px-1',\n controlSizeClasses.sm,\n 'cursor-default text-foreground [&>b]:text-caption [&>b]:text-muted-foreground',\n className,\n )}\n >\n {children}\n </h3>\n );\n}\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataPanelLoadingDataProps {\n children?: ReactNode;\n}\n\nexport function DataPanelLoadingData({ children }: DataPanelLoadingDataProps) {\n return (\n <div className=\"flex min-h-32 items-center justify-center gap-2 px-3 py-4 text-caption text-placeholder\">\n <Spinner size=\"sm\" variant=\"pulse\" className=\"text-placeholder\" /> {children ?? 'Loading...'}\n </div>\n );\n}\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlStateColorTransition, transitions } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelMetadataProps {\n children: React.ReactNode;\n}\n\n/** Row of `Meta` pills next to a `DataPanel.Heading`. Never wraps; overflowing pills are clipped. */\nexport function DataPanelMetadata({ children }: DataPanelMetadataProps) {\n return <ul className=\"flex min-w-0 flex-nowrap items-center gap-0.5 overflow-hidden\">{children}</ul>;\n}\n\nexport interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {\n /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */\n as?: React.ElementType;\n href?: string;\n to?: string;\n /** Prefix icon (bare SVG). */\n icon?: React.ReactNode;\n /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */\n tooltip?: React.ReactNode;\n children: React.ReactNode;\n 'data-testid'?: string;\n}\n\nexport function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps) {\n const Root = as ?? 'span';\n const isInteractive = Boolean(as || props.href || props.to || props.onClick);\n\n const hasTooltip = tooltip != null;\n const root = (\n <Root\n aria-label={!isInteractive && typeof tooltip === 'string' ? tooltip : undefined}\n tabIndex={!isInteractive && hasTooltip ? 0 : undefined}\n className={cn(\n // Same box as a `size=\"sm\"` ghost `Button` (e.g. `TraceIdButton`), so pills line up\n // with the heading and the trace ID on the same header row.\n 'inline-flex min-w-0 items-center gap-1.5 overflow-hidden rounded-full px-2',\n controlSizeClasses.sm,\n controlStateColorTransition,\n isInteractive\n ? cn(quietTextHover, 'cursor-pointer hover:bg-fill-subtle active:bg-fill')\n : cn('text-muted-foreground', hasTooltip && 'cursor-help'),\n className,\n )}\n {...props}\n >\n {icon && (\n <Icon size=\"xs\" className={cn('shrink-0 opacity-50 group-hover:opacity-100', transitions.opacity)}>\n {icon}\n </Icon>\n )}\n <span className=\"min-w-0 truncate\">{children}</span>\n </Root>\n );\n\n return (\n <li className=\"group flex h-control-sm min-w-0 shrink-0 items-center\">\n {!hasTooltip ? (\n root\n ) : (\n <Tooltip>\n <TooltipTrigger render={root} />\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n )}\n </li>\n );\n}\n","import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\n\nexport interface DataPanelNextPrevNavProps {\n onPrevious?: () => void;\n onNext?: () => void;\n previousLabel?: string;\n nextLabel?: string;\n variant?: ButtonProps['variant'];\n}\n\n/** Two independent previous/next buttons, laid out by the parent `HeaderActions` gap. */\nexport function DataPanelNextPrevNav({\n onPrevious,\n onNext,\n previousLabel = 'Go to previous',\n nextLabel = 'Go to next',\n variant = 'ghost',\n}: DataPanelNextPrevNavProps) {\n return (\n <>\n <Button size=\"icon-sm\" variant={variant} tooltip={previousLabel} onClick={onPrevious} disabled={!onPrevious}>\n <ArrowUpIcon />\n </Button>\n <Button size=\"icon-sm\" variant={variant} tooltip={nextLabel} onClick={onNext} disabled={!onNext}>\n <ArrowDownIcon />\n </Button>\n </>\n );\n}\n","import { Txt } from '@/ds/components/Txt';\nexport interface DataPanelNoDataProps {\n children?: React.ReactNode;\n}\n\nexport function DataPanelNoData({ children }: DataPanelNoDataProps) {\n return (\n <Txt variant=\"caption\" tone=\"faint\" className=\"px-3 py-4\">\n {children ?? 'No data found.'}\n </Txt>\n );\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport * as React from 'react';\n\nimport { DataPanelVariantContext } from './data-panel-context';\nimport { PortalContainerProvider } from '@/ds/primitives/portal-container';\nimport { frameFillStyle, frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// `drawer-popup` / `drawer-backdrop` carry the slide + fade transitions.\nimport '../Drawer/drawer.css';\n\ninterface DataPanelBaseProps {\n /** Accessible name (screen-reader only; the visible title comes from `DataPanel.Heading`). */\n title: string;\n /** Accessible description (screen-reader only). */\n description?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport interface DataPanelDrawerProps extends DataPanelBaseProps {\n /** `drawer` (default): a modal side drawer portaled to the right edge of the page. */\n variant?: 'drawer';\n /** Whether the drawer is shown. */\n open: boolean;\n /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */\n onClose?: () => void;\n /**\n * Elevation level when several sibling panels are open at once (not nested in\n * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is\n * narrower so the one beneath peeks out on the left. Siblings stack in mount\n * order: render the deeper panel after the shallower one.\n */\n depth?: 1 | 2 | 3;\n /**\n * Drawer width. `md` (default) is a narrow detail panel whose width shrinks\n * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the\n * trace panel); each `depth` level trims them by a small fixed amount so a\n * same-size parent still peeks out beneath. Changing `size` while open\n * animates the width.\n */\n size?: 'md' | 'half' | 'wide' | 'full';\n}\n\nexport interface DataPanelInlineProps extends DataPanelBaseProps {\n /**\n * `inline`: the panel card is rendered where it is mounted, in the normal\n * document flow (no portal, backdrop, focus trap or dismissal gestures).\n * Mount/unmount it to show/hide it. It fills its container's height, so give\n * the parent a bounded height for `DataPanel.Content` to scroll.\n */\n variant: 'inline';\n open?: never;\n onClose?: never;\n depth?: never;\n size?: never;\n}\n\nexport type DataPanelProps = DataPanelDrawerProps | DataPanelInlineProps;\n\n// The edge comes from the surface's `--surface-rim` inset (no CSS border), like `MainCard`.\n// `p-px` reserves that rim pixel so the header divider doesn't paint over it.\nconst CARD_CLASSES = 'flex max-h-full w-full flex-col overflow-hidden p-px';\n\nconst DEPTH_WIDTH = { 1: 'w-xl', 2: 'w-lg', 3: 'w-md' } as const;\nconst SIZE_WIDTH = { half: 'w-1/2', wide: 'w-4/5', full: 'w-full' } as const;\nconst SIZE_PERCENT = { half: '50%', wide: '80%', full: '100%' } as const;\n// Each extra depth level trims a stacked non-`md` panel so the parent peeks out beneath it.\nconst DEPTH_PEEK_REM = 1.5;\n\nexport function DataPanelRoot(props: DataPanelProps) {\n if (props.variant === 'inline') {\n return <DataPanelInline {...props} />;\n }\n return <DataPanelDrawer {...props} />;\n}\n\nfunction DataPanelInline({ title, description, children, className }: DataPanelInlineProps) {\n const descriptionId = React.useId();\n\n return (\n <DataPanelVariantContext.Provider value=\"inline\">\n <section\n data-slot=\"data-panel\"\n data-variant=\"inline\"\n aria-label={title}\n aria-describedby={description ? descriptionId : undefined}\n // Inline, the card docks beside the app frame, so it shares the frame's rounding.\n className={cn(CARD_CLASSES, frameSurfaceStyle, 'h-full min-h-0 rounded-studio-frame', className)}\n >\n {description && (\n <span id={descriptionId} className=\"sr-only\">\n {description}\n </span>\n )}\n {children}\n </section>\n </DataPanelVariantContext.Provider>\n );\n}\n\nfunction DataPanelDrawer({\n open,\n onClose,\n title,\n description,\n depth = 1,\n size = 'md',\n children,\n className,\n}: DataPanelDrawerProps) {\n // Swipe-exempt mount point for nested popups (Select, DropdownMenu, …) so they\n // stay inside Base UI's modal focus region and don't start a drawer swipe on\n // pointerdown. Same pattern as `SideDialogRoot`; see `portal-container.tsx`.\n const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);\n\n return (\n <DataPanelVariantContext.Provider value=\"drawer\">\n <DrawerPrimitive.Root\n open={open}\n onOpenChange={nextOpen => {\n if (!nextOpen) onClose?.();\n }}\n swipeDirection=\"right\"\n >\n <DrawerPrimitive.Portal>\n {/* Lighter than the shared `--scrim`: a side panel should keep the page beneath readable. */}\n <DrawerPrimitive.Backdrop className=\"drawer-backdrop fixed inset-0 z-50 bg-scrim/30\" />\n <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n <DrawerPrimitive.Popup\n data-slot=\"data-panel-popup\"\n data-depth={depth}\n data-size={size}\n className={cn(\n 'drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none',\n size === 'md' ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size],\n )}\n style={\n size !== 'md' && depth > 1\n ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` }\n : undefined\n }\n >\n {/* Not a heading: the visible `DataPanel.Heading` already is one; this only names the dialog. */}\n <DrawerPrimitive.Title render={<span />} className=\"sr-only\">\n {title}\n </DrawerPrimitive.Title>\n {description && (\n <DrawerPrimitive.Description className=\"sr-only\">{description}</DrawerPrimitive.Description>\n )}\n\n <DrawerPrimitive.Content render={<div ref={setPortalHost} className=\"absolute\" />} />\n\n <PortalContainerProvider container={portalHost}>\n {/* Whole card is swipe-exempt: pointerdown on tabs/buttons/text must not start a dismiss gesture. */}\n <DrawerPrimitive.Content\n render={<section />}\n className={cn(CARD_CLASSES, frameFillStyle, 'rounded-xl shadow-overlay', className)}\n >\n {children}\n </DrawerPrimitive.Content>\n </PortalContainerProvider>\n </DrawerPrimitive.Popup>\n </DrawerPrimitive.Viewport>\n </DrawerPrimitive.Portal>\n </DrawerPrimitive.Root>\n </DataPanelVariantContext.Provider>\n );\n}\n","import { DataPanelCloseButton } from './data-panel-close-button';\nimport { DataPanelContent } from './data-panel-content';\nimport { DataPanelCopyId } from './data-panel-copy-id';\nimport { DataPanelHeader } from './data-panel-header';\nimport { DataPanelHeaderActions } from './data-panel-header-actions';\nimport { DataPanelHeaderContent } from './data-panel-header-content';\nimport { DataPanelHeading } from './data-panel-heading';\nimport { DataPanelLoadingData } from './data-panel-loading-data';\nimport { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';\nimport { DataPanelNextPrevNav } from './data-panel-next-prev-nav';\nimport { DataPanelNoData } from './data-panel-no-data';\nimport { DataPanelRoot } from './data-panel-root';\nimport { DataPanelSectionHeading } from './data-panel-section-heading';\nimport { DataCodeSection } from '@/ds/components/DataCodeSection';\n\nexport const DataPanel = Object.assign(DataPanelRoot, {\n Header: DataPanelHeader,\n HeaderContent: DataPanelHeaderContent,\n HeaderActions: DataPanelHeaderActions,\n Heading: DataPanelHeading,\n Metadata: DataPanelMetadata,\n Meta: DataPanelMeta,\n CloseButton: DataPanelCloseButton,\n CopyId: DataPanelCopyId,\n NextPrevNav: DataPanelNextPrevNav,\n LoadingData: DataPanelLoadingData,\n NoData: DataPanelNoData,\n Content: DataPanelContent,\n CodeSection: DataCodeSection,\n SectionHeading: DataPanelSectionHeading,\n});\n"],"mappings":"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"}
@@ -8,12 +8,12 @@ import { t as Txt } from "./Txt-BM6TVV_c.js";
8
8
  import { passwordManagerOptOutProps } from "./primitives/password-manager-autofill.es.js";
9
9
  import { Kbd } from "./components/Kbd.es.js";
10
10
  import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "./popover-CzHvTPk2.js";
11
- import { C as comboboxTriggerClass, S as comboboxStyles } from "./combobox-parts-C1CugUAU.js";
11
+ import { C as comboboxTriggerClass, S as comboboxStyles } from "./combobox-parts-D90ir0Py.js";
12
12
  import { ComboboxPrimitive } from "./components/Combobox.es.js";
13
13
  import { n as parseFieldValue, t as isFilterBarGroup } from "./types-DiiL5mTO.js";
14
- import { _ as FILTER_BAR_SCOPE_ATTR, b as countLeaves, c as chipClass, d as removeSegmentClass, f as useValueStep, g as FilterBarOptionList, h as FilterBarOptionLabel, l as editableSegmentClass, m as matchesQueryFilter, o as FilterBarFieldLabel, s as alwaysHighlightProps, t as FilterBarChip, v as FilterBarProvider, x as findGroup, y as useFilterBarContext } from "./filter-bar-chip-B4sV4gDm.js";
14
+ import { _ as FILTER_BAR_SCOPE_ATTR, b as countLeaves, c as chipClass, d as removeSegmentClass, f as useValueStep, g as FilterBarOptionList, h as FilterBarOptionLabel, l as editableSegmentClass, m as matchesQueryFilter, o as FilterBarFieldLabel, s as alwaysHighlightProps, t as FilterBarChip, v as FilterBarProvider, x as findGroup, y as useFilterBarContext } from "./filter-bar-chip-CABeKrtf.js";
15
15
  import { useIsApplePlatform } from "./hooks/use-keyboard-shortcut-label.es.js";
16
- import { i as FilterBarTimeRange } from "./filter-bar-time-range-CXQMBgpz.js";
16
+ import { i as FilterBarTimeRange } from "./filter-bar-time-range-mg9JeYue.js";
17
17
  import { t as ClearFiltersButton } from "./clear-filters-button-CNrRuHOY.js";
18
18
  import { VisuallyHidden } from "./primitives/visually-hidden.es.js";
19
19
  import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -39,7 +39,7 @@ function FilterBarInput(props) {
39
39
  if (useFilterBarContext().inputTarget !== props.groupId) return null;
40
40
  return /* @__PURE__ */ jsx(FilterBarInputImpl, { ...props });
41
41
  }
42
- function FilterBarInputImpl({ placeholder = "Filter…", className, "aria-label": ariaLabel = "Add filter", groupId, onLeave }) {
42
+ function FilterBarInputImpl({ placeholder = "Filter", className, "aria-label": ariaLabel = "Add filter", groupId, onLeave }) {
43
43
  const ctx = useFilterBarContext();
44
44
  const container = usePortalContainer();
45
45
  const inputRef = useRef(null);
@@ -216,7 +216,7 @@ function FilterBarInputImpl({ placeholder = "Filter…", className, "aria-label"
216
216
  };
217
217
  const items = emptyForStepChange ? EMPTY_ITEMS : optionsForStep[step];
218
218
  const filterItem = useCallback((item, text, itemToString) => "search" in item && item.search === true || matchesQueryFilter(item, text, itemToString), []);
219
- const inputPlaceholder = step === "field" ? placeholder : step === "operator" ? "Operator…" : valueStep.hasSuggestions && valueStep.allowFreeText ? "Search or type a value…" : field?.type === "number" ? "Number…" : "Value…";
219
+ const inputPlaceholder = step === "field" ? placeholder : step === "operator" ? "Operator" : valueStep.hasSuggestions && valueStep.allowFreeText ? "Search or type a value" : field?.type === "number" ? "Number" : "Value";
220
220
  return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(ComboboxPrimitive.Root, {
221
221
  items,
222
222
  itemToStringLabel: getItemLabel,
@@ -457,7 +457,7 @@ function FilterBarGroupEditor({ group, depth, onRemove, removeLabel = "Remove gr
457
457
  }
458
458
  if (targeted) rows.push(/* @__PURE__ */ jsxs(Fragment, { children: [connector("input"), /* @__PURE__ */ jsx(FilterBarInput, {
459
459
  groupId: group.id,
460
- placeholder: "Add condition…",
460
+ placeholder: "Add condition",
461
461
  onLeave: () => {
462
462
  focusAddFilter.current = true;
463
463
  }
@@ -859,4 +859,4 @@ var DEFAULT_FILTER_OPERATORS = [
859
859
  ];
860
860
  export { FilterBarGroupEditor as a, FilterBarAdvancedChip as i, FilterBar as n, FilterBarLogicToggle as o, FilterBarChips as r, FilterBarInput as s, DEFAULT_FILTER_OPERATORS as t };
861
861
 
862
- //# sourceMappingURL=FilterBar-BO-vvvyq.js.map
862
+ //# sourceMappingURL=FilterBar-BgW2dqRQ.js.map