@mastra/playground-ui 48.0.0 → 48.1.0-alpha.1

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 (133) hide show
  1. package/CHANGELOG.md +51 -0
  2. package/dist/Composer.css +2 -2
  3. package/dist/{code-C5KVVzOZ.js → code-Cj09LVys.js} +2 -2
  4. package/dist/{code-C5KVVzOZ.js.map → code-Cj09LVys.js.map} +1 -1
  5. package/dist/{code-B3WONxnA.cjs → code-FZwLnf_f.cjs} +2 -2
  6. package/dist/{code-B3WONxnA.cjs.map → code-FZwLnf_f.cjs.map} +1 -1
  7. package/dist/code-block-Dn0K3DkE.cjs +88 -0
  8. package/dist/code-block-Dn0K3DkE.cjs.map +1 -0
  9. package/dist/code-block-DqKXZajq.js +86 -0
  10. package/dist/code-block-DqKXZajq.js.map +1 -0
  11. package/dist/components/Code.cjs.js +1 -1
  12. package/dist/components/Code.es.js +1 -1
  13. package/dist/components/CodeBlock.cjs.js +3 -83
  14. package/dist/components/CodeBlock.cjs.js.map +1 -1
  15. package/dist/components/CodeBlock.es.js +1 -85
  16. package/dist/components/CodeBlock.es.js.map +1 -1
  17. package/dist/components/CodeEditor.cjs.js +2 -2
  18. package/dist/components/CodeEditor.es.js +2 -2
  19. package/dist/components/CopyButton.cjs.js +1 -1
  20. package/dist/components/CopyButton.es.js +1 -1
  21. package/dist/components/DataCodeSection.cjs.js +1 -1
  22. package/dist/components/DataCodeSection.es.js +1 -1
  23. package/dist/components/DataDetailsPanel.cjs.js +1 -1
  24. package/dist/components/DataDetailsPanel.es.js +1 -1
  25. package/dist/components/DataPanel.cjs.js +1 -1
  26. package/dist/components/DataPanel.es.js +1 -1
  27. package/dist/components/MarkdownRenderer.cjs.js +1 -1
  28. package/dist/components/MarkdownRenderer.es.js +1 -1
  29. package/dist/components/SideDialog.cjs.js +1 -1
  30. package/dist/components/SideDialog.es.js +1 -1
  31. package/dist/components/Truncate.cjs.js +1 -1
  32. package/dist/components/Truncate.es.js +1 -1
  33. package/dist/components/ai/plan.cjs.js +2 -2
  34. package/dist/components/ai/plan.cjs.js.map +1 -1
  35. package/dist/components/ai/plan.es.js +2 -2
  36. package/dist/components/ai/plan.es.js.map +1 -1
  37. package/dist/components/ai/task-list.cjs.js +44 -18
  38. package/dist/components/ai/task-list.cjs.js.map +1 -1
  39. package/dist/components/ai/task-list.es.js +47 -21
  40. package/dist/components/ai/task-list.es.js.map +1 -1
  41. package/dist/{copy-button-B1GWIQ-x.js → copy-button-BLGUkVE8.js} +4 -2
  42. package/dist/copy-button-BLGUkVE8.js.map +1 -0
  43. package/dist/{copy-button-DwZ3c7D4.cjs → copy-button-BfawWA4t.cjs} +4 -2
  44. package/dist/copy-button-BfawWA4t.cjs.map +1 -0
  45. package/dist/{data-code-section-PJM5l3aS.js → data-code-section-DHbytoQ2.js} +2 -2
  46. package/dist/{data-code-section-PJM5l3aS.js.map → data-code-section-DHbytoQ2.js.map} +1 -1
  47. package/dist/{data-code-section-BjmFgJpC.cjs → data-code-section-bqvIovEN.cjs} +2 -2
  48. package/dist/{data-code-section-BjmFgJpC.cjs.map → data-code-section-bqvIovEN.cjs.map} +1 -1
  49. package/dist/{data-panel-BQqPr6ew.js → data-panel-BX_78wCj.js} +2 -2
  50. package/dist/{data-panel-BQqPr6ew.js.map → data-panel-BX_78wCj.js.map} +1 -1
  51. package/dist/{data-panel-C85h9XvH.cjs → data-panel-DT6LgTVX.cjs} +2 -2
  52. package/dist/{data-panel-C85h9XvH.cjs.map → data-panel-DT6LgTVX.cjs.map} +1 -1
  53. package/dist/domains/logs/components/log-details-view.cjs.js +1 -1
  54. package/dist/domains/logs/components/log-details-view.es.js +1 -1
  55. package/dist/domains/traces/components/span-data-panel-view.cjs.js +1 -1
  56. package/dist/domains/traces/components/span-data-panel-view.es.js +1 -1
  57. package/dist/domains/traces/components/trace-data-panel-view.cjs.js +1 -1
  58. package/dist/domains/traces/components/trace-data-panel-view.es.js +1 -1
  59. package/dist/ee/signals/entity-learning-api.cjs.js +8 -2
  60. package/dist/ee/signals/entity-learning-api.cjs.js.map +1 -1
  61. package/dist/ee/signals/entity-learning-api.es.js +8 -3
  62. package/dist/ee/signals/entity-learning-api.es.js.map +1 -1
  63. package/dist/ee/signals/hooks/use-noise-examples.cjs.js +5 -3
  64. package/dist/ee/signals/hooks/use-noise-examples.cjs.js.map +1 -1
  65. package/dist/ee/signals/hooks/use-noise-examples.es.js +6 -4
  66. package/dist/ee/signals/hooks/use-noise-examples.es.js.map +1 -1
  67. package/dist/ee/signals/hooks/use-theme-examples.cjs.js +6 -3
  68. package/dist/ee/signals/hooks/use-theme-examples.cjs.js.map +1 -1
  69. package/dist/ee/signals/hooks/use-theme-examples.es.js +7 -4
  70. package/dist/ee/signals/hooks/use-theme-examples.es.js.map +1 -1
  71. package/dist/ee/signals/hooks/use-theme-paths.cjs.js +2 -2
  72. package/dist/ee/signals/hooks/use-theme-paths.cjs.js.map +1 -1
  73. package/dist/ee/signals/hooks/use-theme-paths.es.js +3 -3
  74. package/dist/ee/signals/hooks/use-theme-paths.es.js.map +1 -1
  75. package/dist/ee/signals/lifeline-row.cjs.js +1 -1
  76. package/dist/ee/signals/lifeline-row.cjs.js.map +1 -1
  77. package/dist/ee/signals/lifeline-row.es.js +1 -1
  78. package/dist/ee/signals/lifeline-row.es.js.map +1 -1
  79. package/dist/ee/signals/noise-detail-panel.cjs.js +18 -5
  80. package/dist/ee/signals/noise-detail-panel.cjs.js.map +1 -1
  81. package/dist/ee/signals/noise-detail-panel.es.js +18 -5
  82. package/dist/ee/signals/noise-detail-panel.es.js.map +1 -1
  83. package/dist/ee/signals/sankey-signals.cjs.js +50 -34
  84. package/dist/ee/signals/sankey-signals.cjs.js.map +1 -1
  85. package/dist/ee/signals/sankey-signals.es.js +52 -36
  86. package/dist/ee/signals/sankey-signals.es.js.map +1 -1
  87. package/dist/ee/signals/signal-delta-column.cjs.js +1 -1
  88. package/dist/ee/signals/signal-delta-column.cjs.js.map +1 -1
  89. package/dist/ee/signals/signal-delta-column.es.js +1 -1
  90. package/dist/ee/signals/signal-delta-column.es.js.map +1 -1
  91. package/dist/ee/signals/theme-detail-panel.cjs.js +11 -4
  92. package/dist/ee/signals/theme-detail-panel.cjs.js.map +1 -1
  93. package/dist/ee/signals/theme-detail-panel.es.js +11 -4
  94. package/dist/ee/signals/theme-detail-panel.es.js.map +1 -1
  95. package/dist/ee/signals/theme-drilldown-data.cjs.js +41 -13
  96. package/dist/ee/signals/theme-drilldown-data.cjs.js.map +1 -1
  97. package/dist/ee/signals/theme-drilldown-data.es.js +40 -14
  98. package/dist/ee/signals/theme-drilldown-data.es.js.map +1 -1
  99. package/dist/ee/signals/theme-filter-banner.cjs.js +53 -28
  100. package/dist/ee/signals/theme-filter-banner.cjs.js.map +1 -1
  101. package/dist/ee/signals/theme-filter-banner.es.js +53 -28
  102. package/dist/ee/signals/theme-filter-banner.es.js.map +1 -1
  103. package/dist/{highlight-C2uRVhiA.cjs → highlight-CEt2vhD8.cjs} +20 -3
  104. package/dist/highlight-CEt2vhD8.cjs.map +1 -0
  105. package/dist/{highlight-Dis62bkj.js → highlight-CSJjjoqh.js} +20 -3
  106. package/dist/highlight-CSJjjoqh.js.map +1 -0
  107. package/dist/markdown-renderer-D1vSFfp9.cjs +86 -0
  108. package/dist/markdown-renderer-D1vSFfp9.cjs.map +1 -0
  109. package/dist/markdown-renderer-DmYYQHxu.js +84 -0
  110. package/dist/markdown-renderer-DmYYQHxu.js.map +1 -0
  111. package/dist/markdown-renderer.css +182 -0
  112. package/dist/src/ds/components/CopyButton/copy-button.d.ts +2 -1
  113. package/dist/src/ds/components/MarkdownRenderer/markdown-renderer.d.ts +9 -5
  114. package/dist/src/ds/components/ai/task-list/task-list.d.ts +4 -2
  115. package/dist/src/ds/components/ai/task-list/task-list.stories.d.ts +2 -0
  116. package/dist/src/ee/signals/entity-learning-api.d.ts +4 -2
  117. package/dist/src/ee/signals/hooks/use-noise-examples.d.ts +2 -1
  118. package/dist/src/ee/signals/hooks/use-theme-examples.d.ts +2 -1
  119. package/dist/src/ee/signals/hooks/use-theme-paths.d.ts +1 -1
  120. package/dist/src/ee/signals/noise-detail-panel.d.ts +4 -1
  121. package/dist/src/ee/signals/theme-detail-panel.d.ts +5 -3
  122. package/dist/src/ee/signals/theme-drilldown-data.d.ts +17 -4
  123. package/dist/src/ee/signals/theme-filter-banner.d.ts +5 -3
  124. package/dist/style.css +5 -98
  125. package/package.json +7 -7
  126. package/dist/copy-button-B1GWIQ-x.js.map +0 -1
  127. package/dist/copy-button-DwZ3c7D4.cjs.map +0 -1
  128. package/dist/highlight-C2uRVhiA.cjs.map +0 -1
  129. package/dist/highlight-Dis62bkj.js.map +0 -1
  130. package/dist/markdown-renderer-DszxuuNM.js +0 -117
  131. package/dist/markdown-renderer-DszxuuNM.js.map +0 -1
  132. package/dist/markdown-renderer-g8xNLOc0.cjs +0 -119
  133. package/dist/markdown-renderer-g8xNLOc0.cjs.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,56 @@
1
1
  # @mastra/playground-ui
2
2
 
3
+ ## 48.1.0-alpha.1
4
+
5
+ ### Minor Changes
6
+
7
+ - Added animated Sankey layout transitions for column changes. Pass a changing perspective key to opt in: ([#20768](https://github.com/mastra-ai/mastra/pull/20768))
8
+
9
+ ```tsx
10
+ <SankeyChart geometryTransitionKey={columns.map(column => column.id).join(':')} />
11
+ ```
12
+
13
+ - `CopyButton` takes a `showToast` option, so a button whose icon already flips to a checkmark on success can skip the toast on top of it. ([#21350](https://github.com/mastra-ai/mastra/pull/21350))
14
+
15
+ ```tsx
16
+ <CopyButton content={message} showToast={false} />
17
+ ```
18
+
19
+ ### Patch Changes
20
+
21
+ - Reworked the markdown renderer's typography. Headings, lists, blockquotes, tables and horizontal rules now follow one consistent rhythm, list markers and task-list checkboxes render as expected, and long tables scroll instead of stretching their container. ([#21355](https://github.com/mastra-ai/mastra/pull/21355))
22
+
23
+ Fenced code blocks now get syntax highlighting, a copy button and a frame of their own, and yaml, diff, css, html, xml and sql joined the highlighted languages, so fences in those languages are no longer plain text.
24
+
25
+ - Updated dependencies [[`aa3e7be`](https://github.com/mastra-ai/mastra/commit/aa3e7be30f8addb0278ea74429f4df054517a287), [`3cc1876`](https://github.com/mastra-ai/mastra/commit/3cc18767fb47ce9830ac4623a2304e2b09591605), [`3cc1876`](https://github.com/mastra-ai/mastra/commit/3cc18767fb47ce9830ac4623a2304e2b09591605), [`90822db`](https://github.com/mastra-ai/mastra/commit/90822dba08fb2169c518e4a6d7f127c098eb46b8), [`3700208`](https://github.com/mastra-ai/mastra/commit/37002080c7838267803a7e579a7d58b908d62f36), [`8b7131e`](https://github.com/mastra-ai/mastra/commit/8b7131eb0407f58f5205e68fb27b81f026488f28), [`79c4f82`](https://github.com/mastra-ai/mastra/commit/79c4f8295f568752eeadf8a9b50010a7d9ec06ae)]:
26
+ - @mastra/core@1.59.0-alpha.1
27
+ - @mastra/react@1.4.3-alpha.1
28
+ - @mastra/client-js@1.39.1-alpha.1
29
+ - @mastra/memory@1.26.2-alpha.0
30
+
31
+ ## 48.1.0-alpha.0
32
+
33
+ ### Minor Changes
34
+
35
+ - Made the task list collapsible and moved its scrolling to the design system scroll area. ([#21337](https://github.com/mastra-ai/mastra/pull/21337))
36
+
37
+ Clicking the task list header now collapses it. The collapsed row keeps the completion count and shows the task currently in progress — or the next pending one — with its status icon and color, so the panel can be minimized without losing track of where the agent is. Long lists scroll inside `ScrollArea` (overlay scrollbar, edge fades) instead of a raw `overflow-y` container.
38
+
39
+ Use `defaultOpen` to render it collapsed:
40
+
41
+ ```tsx
42
+ <TaskList tasks={tasks} defaultOpen={false} />
43
+ ```
44
+
45
+ ### Patch Changes
46
+
47
+ - Fixed the composer edge glow so it follows the cursor only when the cursor is actually there. Focusing the composer used to light the moving arc as well, which meant the coloured segment kept sliding around the border while you typed or moved the mouse anywhere on the page. Focus now just brightens the border, and the arc lights on hover. ([#21320](https://github.com/mastra-ai/mastra/pull/21320))
48
+
49
+ - Updated dependencies [[`088e41e`](https://github.com/mastra-ai/mastra/commit/088e41e434ed05f2c674b254f1034ec46a57a7be), [`b2f0013`](https://github.com/mastra-ai/mastra/commit/b2f0013375588d40c03c13e843b99c0ff8872ca5), [`3b541ae`](https://github.com/mastra-ai/mastra/commit/3b541ae5d410c52b80a7e381d84d021cddb9a449), [`ae79e34`](https://github.com/mastra-ai/mastra/commit/ae79e34c0bd8674fc24c7524217bfc4a051c6136), [`a6c4399`](https://github.com/mastra-ai/mastra/commit/a6c4399763590b3dae21a2c81826e89a3b1deee4)]:
50
+ - @mastra/core@1.59.0-alpha.0
51
+ - @mastra/client-js@1.39.1-alpha.0
52
+ - @mastra/react@1.4.3-alpha.0
53
+
3
54
  ## 48.0.0
4
55
 
5
56
  ### Minor Changes
package/dist/Composer.css CHANGED
@@ -47,8 +47,8 @@
47
47
  background-color: var(--border2);
48
48
  }
49
49
 
50
- .composer-ring:hover,
51
- .composer-ring:focus-within {
50
+ /* The arc tracks the cursor, so it lights on hover only — focus brightens the edge instead. */
51
+ .composer-ring:hover {
52
52
  --composer-ring-strength: 0.4;
53
53
  }
54
54
 
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
- import { h as highlight } from './highlight-Dis62bkj.js';
3
+ import { h as highlight } from './highlight-CSJjjoqh.js';
4
4
 
5
5
  function tokenStyle(token) {
6
6
  if (token.htmlStyle && typeof token.htmlStyle === "object") {
@@ -44,4 +44,4 @@ const Code = React.memo(function Code2({ code, lang, ...props }) {
44
44
  });
45
45
 
46
46
  export { Code as C };
47
- //# sourceMappingURL=code-C5KVVzOZ.js.map
47
+ //# sourceMappingURL=code-Cj09LVys.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"code-C5KVVzOZ.js","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [tokens, setTokens] = React.useState<ThemedToken[][] | null>(null);\n\n React.useEffect(() => {\n setTokens(null);\n if (!lang) return;\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(result => {\n if (!cancelled) setTokens(result);\n })\n .catch(() => {\n if (!cancelled) setTokens(null);\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n if (!tokens?.length) {\n return <pre {...props}>{code}</pre>;\n }\n\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n </code>\n </pre>\n );\n});\n"],"names":["Code"],"mappings":";;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AAUO,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,SAASA,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,KAAA,CAAM,SAAiC,IAAI,CAAA;AAEvE,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAK,SAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,MAAM,CAAA;AAAA,IAClC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,IAAI,CAAA;AAAA,IAChC,CAAC,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACnB,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,QAAA,kBAAA,GAAA,CAAC,UACE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AAC/B,IAAA,MAAM,UAAA,GAAa,UAAA;AACnB,IAAA,IAAI,WAAA,GAAc,UAAA;AAClB,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,MAAA,MAAM,GAAA,GAAM,WAAA;AACZ,MAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,MAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,IAEJ,CAAC,CAAA;AAED,IAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,IAAA,uBACE,IAAA,CAAC,KAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,MACjB,SAAA,KAAc,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFjB,UAGrB,CAAA;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"code-Cj09LVys.js","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [tokens, setTokens] = React.useState<ThemedToken[][] | null>(null);\n\n React.useEffect(() => {\n setTokens(null);\n if (!lang) return;\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(result => {\n if (!cancelled) setTokens(result);\n })\n .catch(() => {\n if (!cancelled) setTokens(null);\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n if (!tokens?.length) {\n return <pre {...props}>{code}</pre>;\n }\n\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n </code>\n </pre>\n );\n});\n"],"names":["Code"],"mappings":";;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AAUO,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,SAASA,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,KAAA,CAAM,SAAiC,IAAI,CAAA;AAEvE,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAK,SAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,MAAM,CAAA;AAAA,IAClC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,IAAI,CAAA;AAAA,IAChC,CAAC,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACnB,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,QAAA,kBAAA,GAAA,CAAC,UACE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AAC/B,IAAA,MAAM,UAAA,GAAa,UAAA;AACnB,IAAA,IAAI,WAAA,GAAc,UAAA;AAClB,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,MAAA,MAAM,GAAA,GAAM,WAAA;AACZ,MAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,MAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,IAEJ,CAAC,CAAA;AAED,IAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,IAAA,uBACE,IAAA,CAAC,KAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,MACjB,SAAA,KAAc,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFjB,UAGrB,CAAA;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -2,7 +2,7 @@
2
2
 
3
3
  const jsxRuntime = require('react/jsx-runtime');
4
4
  const React = require('react');
5
- const highlight = require('./highlight-C2uRVhiA.cjs');
5
+ const highlight = require('./highlight-CEt2vhD8.cjs');
6
6
 
7
7
  function _interopNamespaceDefault(e) {
8
8
  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -65,4 +65,4 @@ const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
65
65
  });
66
66
 
67
67
  exports.Code = Code;
68
- //# sourceMappingURL=code-B3WONxnA.cjs.map
68
+ //# sourceMappingURL=code-FZwLnf_f.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"code-B3WONxnA.cjs","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [tokens, setTokens] = React.useState<ThemedToken[][] | null>(null);\n\n React.useEffect(() => {\n setTokens(null);\n if (!lang) return;\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(result => {\n if (!cancelled) setTokens(result);\n })\n .catch(() => {\n if (!cancelled) setTokens(null);\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n if (!tokens?.length) {\n return <pre {...props}>{code}</pre>;\n }\n\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n </code>\n </pre>\n );\n});\n"],"names":["React","Code","highlight","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AAUO,MAAM,IAAA,GAAOA,gBAAA,CAAM,IAAA,CAAK,SAASC,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAID,gBAAA,CAAM,SAAiC,IAAI,CAAA;AAEvE,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAKE,mBAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,MAAM,CAAA;AAAA,IAClC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,IAAI,CAAA;AAAA,IAChC,CAAC,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACnB,IAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,QAAA,kBAAAA,cAAA,CAAC,UACE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AAC/B,IAAA,MAAM,UAAA,GAAa,UAAA;AACnB,IAAA,IAAI,WAAA,GAAc,UAAA;AAClB,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,MAAA,MAAM,GAAA,GAAM,WAAA;AACZ,MAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,MAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,IAEJ,CAAC,CAAA;AAED,IAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,IAAA,uBACEC,eAAA,CAACJ,gBAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,sBAAAG,cAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,MACjB,SAAA,KAAc,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFjB,UAGrB,CAAA;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"code-FZwLnf_f.cjs","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [tokens, setTokens] = React.useState<ThemedToken[][] | null>(null);\n\n React.useEffect(() => {\n setTokens(null);\n if (!lang) return;\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(result => {\n if (!cancelled) setTokens(result);\n })\n .catch(() => {\n if (!cancelled) setTokens(null);\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n if (!tokens?.length) {\n return <pre {...props}>{code}</pre>;\n }\n\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n </code>\n </pre>\n );\n});\n"],"names":["React","Code","highlight","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AAUO,MAAM,IAAA,GAAOA,gBAAA,CAAM,IAAA,CAAK,SAASC,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAID,gBAAA,CAAM,SAAiC,IAAI,CAAA;AAEvE,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAKE,mBAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,MAAM,CAAA;AAAA,IAClC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,IAAI,CAAA;AAAA,IAChC,CAAC,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACnB,IAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,QAAA,kBAAAA,cAAA,CAAC,UACE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AAC/B,IAAA,MAAM,UAAA,GAAa,UAAA;AACnB,IAAA,IAAI,WAAA,GAAc,UAAA;AAClB,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,MAAA,MAAM,GAAA,GAAM,WAAA;AACZ,MAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,MAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,IAEJ,CAAC,CAAA;AAED,IAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,IAAA,uBACEC,eAAA,CAACJ,gBAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,sBAAAG,cAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,MACjB,SAAA,KAAc,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFjB,UAGrB,CAAA;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,88 @@
1
+ 'use strict';
2
+
3
+ const jsxRuntime = require('react/jsx-runtime');
4
+ const code = require('./code-FZwLnf_f.cjs');
5
+ const copyButton = require('./copy-button-BfawWA4t.cjs');
6
+ const select = require('./select-OAXqZLkC.cjs');
7
+ const tabsRoot = require('./tabs-root-VtBc6K2q.cjs');
8
+ const tabsTab = require('./tabs-tab-Cq4YR31P.cjs');
9
+ const primitives_transitions = require('./primitives/transitions.cjs.js');
10
+ const utils_cn = require('./cn-vA5sWo9W.cjs');
11
+
12
+ function CodeBlock({
13
+ code: code$1,
14
+ options,
15
+ value,
16
+ onValueChange,
17
+ selector = "select",
18
+ fileName,
19
+ lang,
20
+ overflow = "wrap",
21
+ copyMessage,
22
+ copyTooltip,
23
+ actions,
24
+ className
25
+ }) {
26
+ const hasOptions = options && options.length > 0;
27
+ const useTabs = hasOptions && selector === "tabs";
28
+ const useSelect = hasOptions && selector === "select";
29
+ const firstOption = options?.[0];
30
+ const activeValue = value ?? firstOption?.value;
31
+ return /* @__PURE__ */ jsxRuntime.jsxs(
32
+ "figure",
33
+ {
34
+ className: utils_cn.cn(
35
+ "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2",
36
+ className
37
+ ),
38
+ children: [
39
+ useTabs && firstOption && /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
40
+ }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
41
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
42
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 flex shrink-0 items-center border-b pr-2 pl-3", children: actions })
43
+ ] }) }),
44
+ useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-2 py-1.5", children: [
45
+ /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: activeValue, onValueChange, children: [
46
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
47
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
48
+ ] }),
49
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
50
+ ] }),
51
+ !hasOptions && fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-4 py-2", children: [
52
+ /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "text-ui-sm text-neutral4 font-mono", children: fileName }),
53
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
54
+ ] }),
55
+ !hasOptions && !fileName && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border2/40 flex items-center justify-end border-b px-2 py-1.5", children: actions }),
56
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
57
+ /* @__PURE__ */ jsxRuntime.jsx(
58
+ code.Code,
59
+ {
60
+ code: code$1,
61
+ lang,
62
+ className: utils_cn.cn(
63
+ "px-4 py-3 font-mono text-ui-sm text-neutral5",
64
+ overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "break-all whitespace-pre-wrap"
65
+ )
66
+ }
67
+ ),
68
+ /* @__PURE__ */ jsxRuntime.jsx(
69
+ copyButton.CopyButton,
70
+ {
71
+ content: code$1,
72
+ copyMessage,
73
+ tooltip: copyTooltip,
74
+ size: "sm",
75
+ className: utils_cn.cn(
76
+ "absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0",
77
+ primitives_transitions.transitions.opacity
78
+ )
79
+ }
80
+ )
81
+ ] })
82
+ ]
83
+ }
84
+ );
85
+ }
86
+
87
+ exports.CodeBlock = CodeBlock;
88
+ //# sourceMappingURL=code-block-Dn0K3DkE.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"code-block-Dn0K3DkE.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n label: string;\n value: string;\n}\n\nexport interface CodeBlockProps {\n code: string;\n options?: CodeBlockOption[];\n value?: string;\n onValueChange?: (value: string) => void;\n selector?: CodeBlockSelector;\n fileName?: string;\n lang?: string;\n /** `wrap` (default) breaks long lines — best for commands and snippets.\n * `scroll` preserves columns behind a horizontal scroll — best for source code. */\n overflow?: CodeBlockOverflow;\n copyMessage?: string;\n copyTooltip?: string;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n options,\n value,\n onValueChange,\n selector = 'select',\n fileName,\n lang,\n overflow = 'wrap',\n copyMessage,\n copyTooltip,\n actions,\n className,\n}: CodeBlockProps) {\n const hasOptions = options && options.length > 0;\n const useTabs = hasOptions && selector === 'tabs';\n const useSelect = hasOptions && selector === 'select';\n const firstOption = options?.[0];\n const activeValue = value ?? firstOption?.value;\n\n return (\n <figure\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n className,\n )}\n >\n {useTabs && firstOption && (\n <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n <div className=\"flex items-stretch\">\n <div className=\"min-w-0 flex-1\">\n <TabList>\n {options.map(opt => (\n <Tab key={opt.value} value={opt.value}>\n {opt.label}\n </Tab>\n ))}\n </TabList>\n </div>\n {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n </div>\n </Tabs>\n )}\n\n {useSelect && options && (\n <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n <Select value={activeValue} onValueChange={onValueChange}>\n <SelectTrigger size=\"sm\" variant=\"ghost\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options.map(opt => (\n <SelectItem key={opt.value} value={opt.value}>\n {opt.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && fileName && (\n <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && !fileName && actions && (\n <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n )}\n\n <div className=\"relative\">\n <Code\n code={code}\n lang={lang}\n className={cn(\n 'px-4 py-3 font-mono text-ui-sm text-neutral5',\n overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n )}\n />\n <CopyButton\n content={code}\n copyMessage={copyMessage}\n tooltip={copyTooltip}\n size=\"sm\"\n className={cn(\n 'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n transitions.opacity,\n )}\n />\n </div>\n </figure>\n );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}
@@ -0,0 +1,86 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { C as Code } from './code-Cj09LVys.js';
3
+ import { C as CopyButton } from './copy-button-BLGUkVE8.js';
4
+ import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-B_E0ADD5.js';
5
+ import { a as Tabs, T as TabList } from './tabs-root-BBPou4QC.js';
6
+ import { T as Tab } from './tabs-tab-D5JTAehi.js';
7
+ import { transitions } from './primitives/transitions.es.js';
8
+ import { c as cn } from './cn-BakJzhuv.js';
9
+
10
+ function CodeBlock({
11
+ code,
12
+ options,
13
+ value,
14
+ onValueChange,
15
+ selector = "select",
16
+ fileName,
17
+ lang,
18
+ overflow = "wrap",
19
+ copyMessage,
20
+ copyTooltip,
21
+ actions,
22
+ className
23
+ }) {
24
+ const hasOptions = options && options.length > 0;
25
+ const useTabs = hasOptions && selector === "tabs";
26
+ const useSelect = hasOptions && selector === "select";
27
+ const firstOption = options?.[0];
28
+ const activeValue = value ?? firstOption?.value;
29
+ return /* @__PURE__ */ jsxs(
30
+ "figure",
31
+ {
32
+ className: cn(
33
+ "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2",
34
+ className
35
+ ),
36
+ children: [
37
+ useTabs && firstOption && /* @__PURE__ */ jsx(Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
38
+ }), children: /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
39
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TabList, { children: options.map((opt) => /* @__PURE__ */ jsx(Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
40
+ actions && /* @__PURE__ */ jsx("div", { className: "border-border1 flex shrink-0 items-center border-b pr-2 pl-3", children: actions })
41
+ ] }) }),
42
+ useSelect && options && /* @__PURE__ */ jsxs("div", { className: "border-border2/40 flex items-center border-b px-2 py-1.5", children: [
43
+ /* @__PURE__ */ jsxs(Select, { value: activeValue, onValueChange, children: [
44
+ /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
45
+ /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
46
+ ] }),
47
+ actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
48
+ ] }),
49
+ !hasOptions && fileName && /* @__PURE__ */ jsxs("div", { className: "border-border2/40 flex items-center border-b px-4 py-2", children: [
50
+ /* @__PURE__ */ jsx("figcaption", { className: "text-ui-sm text-neutral4 font-mono", children: fileName }),
51
+ actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
52
+ ] }),
53
+ !hasOptions && !fileName && actions && /* @__PURE__ */ jsx("div", { className: "border-border2/40 flex items-center justify-end border-b px-2 py-1.5", children: actions }),
54
+ /* @__PURE__ */ jsxs("div", { className: "relative", children: [
55
+ /* @__PURE__ */ jsx(
56
+ Code,
57
+ {
58
+ code,
59
+ lang,
60
+ className: cn(
61
+ "px-4 py-3 font-mono text-ui-sm text-neutral5",
62
+ overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "break-all whitespace-pre-wrap"
63
+ )
64
+ }
65
+ ),
66
+ /* @__PURE__ */ jsx(
67
+ CopyButton,
68
+ {
69
+ content: code,
70
+ copyMessage,
71
+ tooltip: copyTooltip,
72
+ size: "sm",
73
+ className: cn(
74
+ "absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0",
75
+ transitions.opacity
76
+ )
77
+ }
78
+ )
79
+ ] })
80
+ ]
81
+ }
82
+ );
83
+ }
84
+
85
+ export { CodeBlock as C };
86
+ //# sourceMappingURL=code-block-DqKXZajq.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"code-block-DqKXZajq.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n label: string;\n value: string;\n}\n\nexport interface CodeBlockProps {\n code: string;\n options?: CodeBlockOption[];\n value?: string;\n onValueChange?: (value: string) => void;\n selector?: CodeBlockSelector;\n fileName?: string;\n lang?: string;\n /** `wrap` (default) breaks long lines — best for commands and snippets.\n * `scroll` preserves columns behind a horizontal scroll — best for source code. */\n overflow?: CodeBlockOverflow;\n copyMessage?: string;\n copyTooltip?: string;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n options,\n value,\n onValueChange,\n selector = 'select',\n fileName,\n lang,\n overflow = 'wrap',\n copyMessage,\n copyTooltip,\n actions,\n className,\n}: CodeBlockProps) {\n const hasOptions = options && options.length > 0;\n const useTabs = hasOptions && selector === 'tabs';\n const useSelect = hasOptions && selector === 'select';\n const firstOption = options?.[0];\n const activeValue = value ?? firstOption?.value;\n\n return (\n <figure\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n className,\n )}\n >\n {useTabs && firstOption && (\n <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n <div className=\"flex items-stretch\">\n <div className=\"min-w-0 flex-1\">\n <TabList>\n {options.map(opt => (\n <Tab key={opt.value} value={opt.value}>\n {opt.label}\n </Tab>\n ))}\n </TabList>\n </div>\n {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n </div>\n </Tabs>\n )}\n\n {useSelect && options && (\n <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n <Select value={activeValue} onValueChange={onValueChange}>\n <SelectTrigger size=\"sm\" variant=\"ghost\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options.map(opt => (\n <SelectItem key={opt.value} value={opt.value}>\n {opt.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && fileName && (\n <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && !fileName && actions && (\n <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n )}\n\n <div className=\"relative\">\n <Code\n code={code}\n lang={lang}\n className={cn(\n 'px-4 py-3 font-mono text-ui-sm text-neutral5',\n overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n )}\n />\n <CopyButton\n content={code}\n copyMessage={copyMessage}\n tooltip={copyTooltip}\n size=\"sm\"\n className={cn(\n 'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n transitions.opacity,\n )}\n />\n </div>\n </figure>\n );\n}\n"],"names":[],"mappings":"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"}
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const code = require('../code-B3WONxnA.cjs');
5
+ const code = require('../code-FZwLnf_f.cjs');
6
6
 
7
7
 
8
8
 
@@ -1,2 +1,2 @@
1
- export { C as Code } from '../code-C5KVVzOZ.js';
1
+ export { C as Code } from '../code-Cj09LVys.js';
2
2
  //# sourceMappingURL=Code.es.js.map
@@ -2,89 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const jsxRuntime = require('react/jsx-runtime');
6
- const code = require('../code-B3WONxnA.cjs');
7
- const copyButton = require('../copy-button-DwZ3c7D4.cjs');
8
- const select = require('../select-OAXqZLkC.cjs');
9
- const tabsRoot = require('../tabs-root-VtBc6K2q.cjs');
10
- const tabsTab = require('../tabs-tab-Cq4YR31P.cjs');
11
- const primitives_transitions = require('../primitives/transitions.cjs.js');
12
- const utils_cn = require('../cn-vA5sWo9W.cjs');
5
+ const codeBlock = require('../code-block-Dn0K3DkE.cjs');
13
6
 
14
- function CodeBlock({
15
- code: code$1,
16
- options,
17
- value,
18
- onValueChange,
19
- selector = "select",
20
- fileName,
21
- lang,
22
- overflow = "wrap",
23
- copyMessage,
24
- copyTooltip,
25
- actions,
26
- className
27
- }) {
28
- const hasOptions = options && options.length > 0;
29
- const useTabs = hasOptions && selector === "tabs";
30
- const useSelect = hasOptions && selector === "select";
31
- const firstOption = options?.[0];
32
- const activeValue = value ?? firstOption?.value;
33
- return /* @__PURE__ */ jsxRuntime.jsxs(
34
- "figure",
35
- {
36
- className: utils_cn.cn(
37
- "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2",
38
- className
39
- ),
40
- children: [
41
- useTabs && firstOption && /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
42
- }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
43
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
44
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 flex shrink-0 items-center border-b pr-2 pl-3", children: actions })
45
- ] }) }),
46
- useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-2 py-1.5", children: [
47
- /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: activeValue, onValueChange, children: [
48
- /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
49
- /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
50
- ] }),
51
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
52
- ] }),
53
- !hasOptions && fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-4 py-2", children: [
54
- /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "text-ui-sm text-neutral4 font-mono", children: fileName }),
55
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
56
- ] }),
57
- !hasOptions && !fileName && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border2/40 flex items-center justify-end border-b px-2 py-1.5", children: actions }),
58
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
59
- /* @__PURE__ */ jsxRuntime.jsx(
60
- code.Code,
61
- {
62
- code: code$1,
63
- lang,
64
- className: utils_cn.cn(
65
- "px-4 py-3 font-mono text-ui-sm text-neutral5",
66
- overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "break-all whitespace-pre-wrap"
67
- )
68
- }
69
- ),
70
- /* @__PURE__ */ jsxRuntime.jsx(
71
- copyButton.CopyButton,
72
- {
73
- content: code$1,
74
- copyMessage,
75
- tooltip: copyTooltip,
76
- size: "sm",
77
- className: utils_cn.cn(
78
- "absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0",
79
- primitives_transitions.transitions.opacity
80
- )
81
- }
82
- )
83
- ] })
84
- ]
85
- }
86
- );
87
- }
88
7
 
89
- exports.CodeBlock = CodeBlock;
8
+
9
+ exports.CodeBlock = codeBlock.CodeBlock;
90
10
  //# sourceMappingURL=CodeBlock.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.cjs.js","sources":["../../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n label: string;\n value: string;\n}\n\nexport interface CodeBlockProps {\n code: string;\n options?: CodeBlockOption[];\n value?: string;\n onValueChange?: (value: string) => void;\n selector?: CodeBlockSelector;\n fileName?: string;\n lang?: string;\n /** `wrap` (default) breaks long lines — best for commands and snippets.\n * `scroll` preserves columns behind a horizontal scroll — best for source code. */\n overflow?: CodeBlockOverflow;\n copyMessage?: string;\n copyTooltip?: string;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n options,\n value,\n onValueChange,\n selector = 'select',\n fileName,\n lang,\n overflow = 'wrap',\n copyMessage,\n copyTooltip,\n actions,\n className,\n}: CodeBlockProps) {\n const hasOptions = options && options.length > 0;\n const useTabs = hasOptions && selector === 'tabs';\n const useSelect = hasOptions && selector === 'select';\n const firstOption = options?.[0];\n const activeValue = value ?? firstOption?.value;\n\n return (\n <figure\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n className,\n )}\n >\n {useTabs && firstOption && (\n <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n <div className=\"flex items-stretch\">\n <div className=\"min-w-0 flex-1\">\n <TabList>\n {options.map(opt => (\n <Tab key={opt.value} value={opt.value}>\n {opt.label}\n </Tab>\n ))}\n </TabList>\n </div>\n {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n </div>\n </Tabs>\n )}\n\n {useSelect && options && (\n <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n <Select value={activeValue} onValueChange={onValueChange}>\n <SelectTrigger size=\"sm\" variant=\"ghost\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options.map(opt => (\n <SelectItem key={opt.value} value={opt.value}>\n {opt.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && fileName && (\n <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && !fileName && actions && (\n <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n )}\n\n <div className=\"relative\">\n <Code\n code={code}\n lang={lang}\n className={cn(\n 'px-4 py-3 font-mono text-ui-sm text-neutral5',\n overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n )}\n />\n <CopyButton\n content={code}\n copyMessage={copyMessage}\n tooltip={copyTooltip}\n size=\"sm\"\n className={cn(\n 'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n transitions.opacity,\n )}\n />\n </div>\n </figure>\n );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}
1
+ {"version":3,"file":"CodeBlock.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,86 +1,2 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { C as Code } from '../code-C5KVVzOZ.js';
3
- import { C as CopyButton } from '../copy-button-B1GWIQ-x.js';
4
- import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select-B_E0ADD5.js';
5
- import { a as Tabs, T as TabList } from '../tabs-root-BBPou4QC.js';
6
- import { T as Tab } from '../tabs-tab-D5JTAehi.js';
7
- import { transitions } from '../primitives/transitions.es.js';
8
- import { c as cn } from '../cn-BakJzhuv.js';
9
-
10
- function CodeBlock({
11
- code,
12
- options,
13
- value,
14
- onValueChange,
15
- selector = "select",
16
- fileName,
17
- lang,
18
- overflow = "wrap",
19
- copyMessage,
20
- copyTooltip,
21
- actions,
22
- className
23
- }) {
24
- const hasOptions = options && options.length > 0;
25
- const useTabs = hasOptions && selector === "tabs";
26
- const useSelect = hasOptions && selector === "select";
27
- const firstOption = options?.[0];
28
- const activeValue = value ?? firstOption?.value;
29
- return /* @__PURE__ */ jsxs(
30
- "figure",
31
- {
32
- className: cn(
33
- "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2",
34
- className
35
- ),
36
- children: [
37
- useTabs && firstOption && /* @__PURE__ */ jsx(Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
38
- }), children: /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
39
- /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TabList, { children: options.map((opt) => /* @__PURE__ */ jsx(Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
40
- actions && /* @__PURE__ */ jsx("div", { className: "border-border1 flex shrink-0 items-center border-b pr-2 pl-3", children: actions })
41
- ] }) }),
42
- useSelect && options && /* @__PURE__ */ jsxs("div", { className: "border-border2/40 flex items-center border-b px-2 py-1.5", children: [
43
- /* @__PURE__ */ jsxs(Select, { value: activeValue, onValueChange, children: [
44
- /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
45
- /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
46
- ] }),
47
- actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
48
- ] }),
49
- !hasOptions && fileName && /* @__PURE__ */ jsxs("div", { className: "border-border2/40 flex items-center border-b px-4 py-2", children: [
50
- /* @__PURE__ */ jsx("figcaption", { className: "text-ui-sm text-neutral4 font-mono", children: fileName }),
51
- actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
52
- ] }),
53
- !hasOptions && !fileName && actions && /* @__PURE__ */ jsx("div", { className: "border-border2/40 flex items-center justify-end border-b px-2 py-1.5", children: actions }),
54
- /* @__PURE__ */ jsxs("div", { className: "relative", children: [
55
- /* @__PURE__ */ jsx(
56
- Code,
57
- {
58
- code,
59
- lang,
60
- className: cn(
61
- "px-4 py-3 font-mono text-ui-sm text-neutral5",
62
- overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "break-all whitespace-pre-wrap"
63
- )
64
- }
65
- ),
66
- /* @__PURE__ */ jsx(
67
- CopyButton,
68
- {
69
- content: code,
70
- copyMessage,
71
- tooltip: copyTooltip,
72
- size: "sm",
73
- className: cn(
74
- "absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0",
75
- transitions.opacity
76
- )
77
- }
78
- )
79
- ] })
80
- ]
81
- }
82
- );
83
- }
84
-
85
- export { CodeBlock };
1
+ export { C as CodeBlock } from '../code-block-DqKXZajq.js';
86
2
  //# sourceMappingURL=CodeBlock.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.es.js","sources":["../../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n label: string;\n value: string;\n}\n\nexport interface CodeBlockProps {\n code: string;\n options?: CodeBlockOption[];\n value?: string;\n onValueChange?: (value: string) => void;\n selector?: CodeBlockSelector;\n fileName?: string;\n lang?: string;\n /** `wrap` (default) breaks long lines — best for commands and snippets.\n * `scroll` preserves columns behind a horizontal scroll — best for source code. */\n overflow?: CodeBlockOverflow;\n copyMessage?: string;\n copyTooltip?: string;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n options,\n value,\n onValueChange,\n selector = 'select',\n fileName,\n lang,\n overflow = 'wrap',\n copyMessage,\n copyTooltip,\n actions,\n className,\n}: CodeBlockProps) {\n const hasOptions = options && options.length > 0;\n const useTabs = hasOptions && selector === 'tabs';\n const useSelect = hasOptions && selector === 'select';\n const firstOption = options?.[0];\n const activeValue = value ?? firstOption?.value;\n\n return (\n <figure\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n className,\n )}\n >\n {useTabs && firstOption && (\n <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n <div className=\"flex items-stretch\">\n <div className=\"min-w-0 flex-1\">\n <TabList>\n {options.map(opt => (\n <Tab key={opt.value} value={opt.value}>\n {opt.label}\n </Tab>\n ))}\n </TabList>\n </div>\n {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n </div>\n </Tabs>\n )}\n\n {useSelect && options && (\n <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n <Select value={activeValue} onValueChange={onValueChange}>\n <SelectTrigger size=\"sm\" variant=\"ghost\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options.map(opt => (\n <SelectItem key={opt.value} value={opt.value}>\n {opt.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && fileName && (\n <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && !fileName && actions && (\n <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n )}\n\n <div className=\"relative\">\n <Code\n code={code}\n lang={lang}\n className={cn(\n 'px-4 py-3 font-mono text-ui-sm text-neutral5',\n overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n )}\n />\n <CopyButton\n content={code}\n copyMessage={copyMessage}\n tooltip={copyTooltip}\n size=\"sm\"\n className={cn(\n 'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n transitions.opacity,\n )}\n />\n </div>\n </figure>\n );\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CodeBlock.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -14,10 +14,10 @@ const ReactCodeMirror = require('@uiw/react-codemirror');
14
14
  const index = require('../index-C-Lt4Bx_.cjs');
15
15
  const React = require('react');
16
16
  const autocomplete = require('@codemirror/autocomplete');
17
- const copyButton = require('../copy-button-DwZ3c7D4.cjs');
17
+ const copyButton = require('../copy-button-BfawWA4t.cjs');
18
18
  const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
19
19
  const utils_cn = require('../cn-vA5sWo9W.cjs');
20
- const highlight = require('../highlight-C2uRVhiA.cjs');
20
+ const highlight = require('../highlight-CEt2vhD8.cjs');
21
21
 
22
22
  function legacy(parser) {
23
23
  return new language.LanguageSupport(language.StreamLanguage.define(parser));