@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.
- package/CHANGELOG.md +51 -0
- package/dist/Composer.css +2 -2
- package/dist/{code-C5KVVzOZ.js → code-Cj09LVys.js} +2 -2
- package/dist/{code-C5KVVzOZ.js.map → code-Cj09LVys.js.map} +1 -1
- package/dist/{code-B3WONxnA.cjs → code-FZwLnf_f.cjs} +2 -2
- package/dist/{code-B3WONxnA.cjs.map → code-FZwLnf_f.cjs.map} +1 -1
- package/dist/code-block-Dn0K3DkE.cjs +88 -0
- package/dist/code-block-Dn0K3DkE.cjs.map +1 -0
- package/dist/code-block-DqKXZajq.js +86 -0
- package/dist/code-block-DqKXZajq.js.map +1 -0
- package/dist/components/Code.cjs.js +1 -1
- package/dist/components/Code.es.js +1 -1
- package/dist/components/CodeBlock.cjs.js +3 -83
- package/dist/components/CodeBlock.cjs.js.map +1 -1
- package/dist/components/CodeBlock.es.js +1 -85
- package/dist/components/CodeBlock.es.js.map +1 -1
- package/dist/components/CodeEditor.cjs.js +2 -2
- package/dist/components/CodeEditor.es.js +2 -2
- package/dist/components/CopyButton.cjs.js +1 -1
- package/dist/components/CopyButton.es.js +1 -1
- package/dist/components/DataCodeSection.cjs.js +1 -1
- package/dist/components/DataCodeSection.es.js +1 -1
- package/dist/components/DataDetailsPanel.cjs.js +1 -1
- package/dist/components/DataDetailsPanel.es.js +1 -1
- package/dist/components/DataPanel.cjs.js +1 -1
- package/dist/components/DataPanel.es.js +1 -1
- package/dist/components/MarkdownRenderer.cjs.js +1 -1
- package/dist/components/MarkdownRenderer.es.js +1 -1
- package/dist/components/SideDialog.cjs.js +1 -1
- package/dist/components/SideDialog.es.js +1 -1
- package/dist/components/Truncate.cjs.js +1 -1
- package/dist/components/Truncate.es.js +1 -1
- package/dist/components/ai/plan.cjs.js +2 -2
- package/dist/components/ai/plan.cjs.js.map +1 -1
- package/dist/components/ai/plan.es.js +2 -2
- package/dist/components/ai/plan.es.js.map +1 -1
- package/dist/components/ai/task-list.cjs.js +44 -18
- package/dist/components/ai/task-list.cjs.js.map +1 -1
- package/dist/components/ai/task-list.es.js +47 -21
- package/dist/components/ai/task-list.es.js.map +1 -1
- package/dist/{copy-button-B1GWIQ-x.js → copy-button-BLGUkVE8.js} +4 -2
- package/dist/copy-button-BLGUkVE8.js.map +1 -0
- package/dist/{copy-button-DwZ3c7D4.cjs → copy-button-BfawWA4t.cjs} +4 -2
- package/dist/copy-button-BfawWA4t.cjs.map +1 -0
- package/dist/{data-code-section-PJM5l3aS.js → data-code-section-DHbytoQ2.js} +2 -2
- package/dist/{data-code-section-PJM5l3aS.js.map → data-code-section-DHbytoQ2.js.map} +1 -1
- package/dist/{data-code-section-BjmFgJpC.cjs → data-code-section-bqvIovEN.cjs} +2 -2
- package/dist/{data-code-section-BjmFgJpC.cjs.map → data-code-section-bqvIovEN.cjs.map} +1 -1
- package/dist/{data-panel-BQqPr6ew.js → data-panel-BX_78wCj.js} +2 -2
- package/dist/{data-panel-BQqPr6ew.js.map → data-panel-BX_78wCj.js.map} +1 -1
- package/dist/{data-panel-C85h9XvH.cjs → data-panel-DT6LgTVX.cjs} +2 -2
- package/dist/{data-panel-C85h9XvH.cjs.map → data-panel-DT6LgTVX.cjs.map} +1 -1
- package/dist/domains/logs/components/log-details-view.cjs.js +1 -1
- package/dist/domains/logs/components/log-details-view.es.js +1 -1
- package/dist/domains/traces/components/span-data-panel-view.cjs.js +1 -1
- package/dist/domains/traces/components/span-data-panel-view.es.js +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.cjs.js +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.es.js +1 -1
- package/dist/ee/signals/entity-learning-api.cjs.js +8 -2
- package/dist/ee/signals/entity-learning-api.cjs.js.map +1 -1
- package/dist/ee/signals/entity-learning-api.es.js +8 -3
- package/dist/ee/signals/entity-learning-api.es.js.map +1 -1
- package/dist/ee/signals/hooks/use-noise-examples.cjs.js +5 -3
- package/dist/ee/signals/hooks/use-noise-examples.cjs.js.map +1 -1
- package/dist/ee/signals/hooks/use-noise-examples.es.js +6 -4
- package/dist/ee/signals/hooks/use-noise-examples.es.js.map +1 -1
- package/dist/ee/signals/hooks/use-theme-examples.cjs.js +6 -3
- package/dist/ee/signals/hooks/use-theme-examples.cjs.js.map +1 -1
- package/dist/ee/signals/hooks/use-theme-examples.es.js +7 -4
- package/dist/ee/signals/hooks/use-theme-examples.es.js.map +1 -1
- package/dist/ee/signals/hooks/use-theme-paths.cjs.js +2 -2
- package/dist/ee/signals/hooks/use-theme-paths.cjs.js.map +1 -1
- package/dist/ee/signals/hooks/use-theme-paths.es.js +3 -3
- package/dist/ee/signals/hooks/use-theme-paths.es.js.map +1 -1
- package/dist/ee/signals/lifeline-row.cjs.js +1 -1
- package/dist/ee/signals/lifeline-row.cjs.js.map +1 -1
- package/dist/ee/signals/lifeline-row.es.js +1 -1
- package/dist/ee/signals/lifeline-row.es.js.map +1 -1
- package/dist/ee/signals/noise-detail-panel.cjs.js +18 -5
- package/dist/ee/signals/noise-detail-panel.cjs.js.map +1 -1
- package/dist/ee/signals/noise-detail-panel.es.js +18 -5
- package/dist/ee/signals/noise-detail-panel.es.js.map +1 -1
- package/dist/ee/signals/sankey-signals.cjs.js +50 -34
- package/dist/ee/signals/sankey-signals.cjs.js.map +1 -1
- package/dist/ee/signals/sankey-signals.es.js +52 -36
- package/dist/ee/signals/sankey-signals.es.js.map +1 -1
- package/dist/ee/signals/signal-delta-column.cjs.js +1 -1
- package/dist/ee/signals/signal-delta-column.cjs.js.map +1 -1
- package/dist/ee/signals/signal-delta-column.es.js +1 -1
- package/dist/ee/signals/signal-delta-column.es.js.map +1 -1
- package/dist/ee/signals/theme-detail-panel.cjs.js +11 -4
- package/dist/ee/signals/theme-detail-panel.cjs.js.map +1 -1
- package/dist/ee/signals/theme-detail-panel.es.js +11 -4
- package/dist/ee/signals/theme-detail-panel.es.js.map +1 -1
- package/dist/ee/signals/theme-drilldown-data.cjs.js +41 -13
- package/dist/ee/signals/theme-drilldown-data.cjs.js.map +1 -1
- package/dist/ee/signals/theme-drilldown-data.es.js +40 -14
- package/dist/ee/signals/theme-drilldown-data.es.js.map +1 -1
- package/dist/ee/signals/theme-filter-banner.cjs.js +53 -28
- package/dist/ee/signals/theme-filter-banner.cjs.js.map +1 -1
- package/dist/ee/signals/theme-filter-banner.es.js +53 -28
- package/dist/ee/signals/theme-filter-banner.es.js.map +1 -1
- package/dist/{highlight-C2uRVhiA.cjs → highlight-CEt2vhD8.cjs} +20 -3
- package/dist/highlight-CEt2vhD8.cjs.map +1 -0
- package/dist/{highlight-Dis62bkj.js → highlight-CSJjjoqh.js} +20 -3
- package/dist/highlight-CSJjjoqh.js.map +1 -0
- package/dist/markdown-renderer-D1vSFfp9.cjs +86 -0
- package/dist/markdown-renderer-D1vSFfp9.cjs.map +1 -0
- package/dist/markdown-renderer-DmYYQHxu.js +84 -0
- package/dist/markdown-renderer-DmYYQHxu.js.map +1 -0
- package/dist/markdown-renderer.css +182 -0
- package/dist/src/ds/components/CopyButton/copy-button.d.ts +2 -1
- package/dist/src/ds/components/MarkdownRenderer/markdown-renderer.d.ts +9 -5
- package/dist/src/ds/components/ai/task-list/task-list.d.ts +4 -2
- package/dist/src/ds/components/ai/task-list/task-list.stories.d.ts +2 -0
- package/dist/src/ee/signals/entity-learning-api.d.ts +4 -2
- package/dist/src/ee/signals/hooks/use-noise-examples.d.ts +2 -1
- package/dist/src/ee/signals/hooks/use-theme-examples.d.ts +2 -1
- package/dist/src/ee/signals/hooks/use-theme-paths.d.ts +1 -1
- package/dist/src/ee/signals/noise-detail-panel.d.ts +4 -1
- package/dist/src/ee/signals/theme-detail-panel.d.ts +5 -3
- package/dist/src/ee/signals/theme-drilldown-data.d.ts +17 -4
- package/dist/src/ee/signals/theme-filter-banner.d.ts +5 -3
- package/dist/style.css +5 -98
- package/package.json +7 -7
- package/dist/copy-button-B1GWIQ-x.js.map +0 -1
- package/dist/copy-button-DwZ3c7D4.cjs.map +0 -1
- package/dist/highlight-C2uRVhiA.cjs.map +0 -1
- package/dist/highlight-Dis62bkj.js.map +0 -1
- package/dist/markdown-renderer-DszxuuNM.js +0 -117
- package/dist/markdown-renderer-DszxuuNM.js.map +0 -1
- package/dist/markdown-renderer-g8xNLOc0.cjs +0 -119
- 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
|
-
.
|
|
51
|
-
.composer-ring:
|
|
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-
|
|
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-
|
|
47
|
+
//# sourceMappingURL=code-Cj09LVys.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-
|
|
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-
|
|
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-
|
|
68
|
+
//# sourceMappingURL=code-FZwLnf_f.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-
|
|
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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as Code } from '../code-
|
|
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
|
|
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
|
-
|
|
8
|
+
|
|
9
|
+
exports.CodeBlock = codeBlock.CodeBlock;
|
|
90
10
|
//# sourceMappingURL=CodeBlock.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.cjs.js","sources":[
|
|
1
|
+
{"version":3,"file":"CodeBlock.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1,86 +1,2 @@
|
|
|
1
|
-
|
|
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":[
|
|
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-
|
|
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-
|
|
20
|
+
const highlight = require('../highlight-CEt2vhD8.cjs');
|
|
21
21
|
|
|
22
22
|
function legacy(parser) {
|
|
23
23
|
return new language.LanguageSupport(language.StreamLanguage.define(parser));
|