@mastra/playground-ui 53.0.0-alpha.9 → 53.0.0
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/dist/{code-DRGJVroV.js → code-D4Vw_fYq.js} +22 -16
- package/dist/code-D4Vw_fYq.js.map +1 -0
- package/dist/{code-BJMC6T9D.cjs → code-DhrdtZce.cjs} +22 -15
- package/dist/code-DhrdtZce.cjs.map +1 -0
- package/dist/{code-block-CBJhDEeB.js → code-block-DeksY23p.js} +2 -2
- package/dist/{code-block-CBJhDEeB.js.map → code-block-DeksY23p.js.map} +1 -1
- package/dist/{code-block-fmv8bHoT.cjs → code-block-DgHrBuR8.cjs} +2 -2
- package/dist/{code-block-fmv8bHoT.cjs.map → code-block-DgHrBuR8.cjs.map} +1 -1
- package/dist/{command-DWFd0d4c.js → command-Be-KrIAX.js} +2 -2
- package/dist/{command-DWFd0d4c.js.map → command-Be-KrIAX.js.map} +1 -1
- package/dist/{command-CUev1UxH.cjs → command-DsTBCmQq.cjs} +2 -2
- package/dist/{command-CUev1UxH.cjs.map → command-DsTBCmQq.cjs.map} +1 -1
- package/dist/components/ChatShell.cjs.js +20 -1
- package/dist/components/ChatShell.cjs.js.map +1 -1
- package/dist/components/ChatShell.es.js +20 -1
- package/dist/components/ChatShell.es.js.map +1 -1
- package/dist/components/Code.cjs.js +3 -1
- package/dist/components/Code.cjs.js.map +1 -1
- package/dist/components/Code.es.js +1 -1
- package/dist/components/CodeBlock.cjs.js +1 -1
- package/dist/components/CodeBlock.es.js +1 -1
- package/dist/components/CodeEditor.cjs.js +2 -1
- package/dist/components/CodeEditor.cjs.js.map +1 -1
- package/dist/components/CodeEditor.es.js +1 -1
- package/dist/components/Command.cjs.js +1 -1
- package/dist/components/Command.es.js +1 -1
- package/dist/components/CommandPalette.cjs.js +1 -1
- package/dist/components/CommandPalette.es.js +1 -1
- package/dist/components/DataCodeSection.cjs.js +1 -1
- package/dist/components/DataCodeSection.es.js +1 -1
- package/dist/components/DataPanel.cjs.js +1 -1
- package/dist/components/DataPanel.es.js +1 -1
- package/dist/components/Dialog.cjs.js +181 -2
- package/dist/components/Dialog.cjs.js.map +1 -1
- package/dist/components/Dialog.es.js +183 -1
- package/dist/components/Dialog.es.js.map +1 -1
- package/dist/components/HorizontalBars.cjs.js +1 -1
- package/dist/components/HorizontalBars.es.js +1 -1
- package/dist/components/IntegrationDialog.cjs.js +105 -0
- package/dist/components/IntegrationDialog.cjs.js.map +1 -0
- package/dist/components/IntegrationDialog.d.ts +2 -0
- package/dist/components/IntegrationDialog.es.js +101 -0
- package/dist/components/IntegrationDialog.es.js.map +1 -0
- package/dist/components/MarkdownRenderer.cjs.js +1 -1
- package/dist/components/MarkdownRenderer.es.js +1 -1
- package/dist/components/ThreadRail.cjs.js +19 -0
- package/dist/components/ThreadRail.cjs.js.map +1 -1
- package/dist/components/ThreadRail.es.js +19 -1
- package/dist/components/ThreadRail.es.js.map +1 -1
- package/dist/components/ai/plan.cjs.js +1 -1
- package/dist/components/ai/plan.es.js +1 -1
- package/dist/components/ai/tool-call.cjs.js +165 -0
- package/dist/components/ai/tool-call.cjs.js.map +1 -1
- package/dist/components/ai/tool-call.es.js +159 -3
- package/dist/components/ai/tool-call.es.js.map +1 -1
- package/dist/{data-code-section-D5I0m1cS.cjs → data-code-section-B_lg_J_0.cjs} +2 -2
- package/dist/{data-code-section-D5I0m1cS.cjs.map → data-code-section-B_lg_J_0.cjs.map} +1 -1
- package/dist/{data-code-section-d3NffL3V.js → data-code-section-Cm_W_XhO.js} +2 -2
- package/dist/{data-code-section-d3NffL3V.js.map → data-code-section-Cm_W_XhO.js.map} +1 -1
- package/dist/{data-panel-Bo2HCylZ.cjs → data-panel-Cv9j_IGQ.cjs} +2 -2
- package/dist/{data-panel-Bo2HCylZ.cjs.map → data-panel-Cv9j_IGQ.cjs.map} +1 -1
- package/dist/{data-panel-T3vp7wTD.js → data-panel-DXxeSnL1.js} +2 -2
- package/dist/{data-panel-T3vp7wTD.js.map → data-panel-DXxeSnL1.js.map} +1 -1
- package/dist/dialog-CZMPDVUj.js +259 -0
- package/dist/dialog-CZMPDVUj.js.map +1 -0
- package/dist/dialog-D-7Hkb3j.cjs +293 -0
- package/dist/dialog-D-7Hkb3j.cjs.map +1 -0
- package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js +1 -1
- package/dist/domains/metrics/components/token-usage-by-agent-card-view.es.js +1 -1
- package/dist/domains/metrics/components/traces-volume-card-view.cjs.js +1 -1
- package/dist/domains/metrics/components/traces-volume-card-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-columns-menu.cjs.js +1 -1
- package/dist/domains/traces/components/trace-columns-menu.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/domains/traces/hooks/use-branch.cjs.js +2 -6
- package/dist/domains/traces/hooks/use-branch.cjs.js.map +1 -1
- package/dist/domains/traces/hooks/use-branch.es.js +2 -6
- package/dist/domains/traces/hooks/use-branch.es.js.map +1 -1
- package/dist/domains/traces/hooks/use-download-trace-json.cjs.js +4 -1
- package/dist/domains/traces/hooks/use-download-trace-json.cjs.js.map +1 -1
- package/dist/domains/traces/hooks/use-download-trace-json.es.js +4 -1
- package/dist/domains/traces/hooks/use-download-trace-json.es.js.map +1 -1
- package/dist/domains/traces/hooks/use-trace-spans.cjs.js +10 -7
- package/dist/domains/traces/hooks/use-trace-spans.cjs.js.map +1 -1
- package/dist/domains/traces/hooks/use-trace-spans.es.js +10 -7
- package/dist/domains/traces/hooks/use-trace-spans.es.js.map +1 -1
- package/dist/ee/signals/settings/signal-definition-form-dialog.cjs.js +1 -1
- package/dist/ee/signals/settings/signal-definition-form-dialog.es.js +1 -1
- package/dist/{highlight-CSJjjoqh.js → highlight-BmpoELR4.js} +6 -2
- package/dist/{highlight-CSJjjoqh.js.map → highlight-BmpoELR4.js.map} +1 -1
- package/dist/{highlight-CEt2vhD8.cjs → highlight-DK1dn-Fh.cjs} +6 -1
- package/dist/{highlight-CEt2vhD8.cjs.map → highlight-DK1dn-Fh.cjs.map} +1 -1
- package/dist/{horizontal-bars-DZ5J4TKv.js → horizontal-bars-CyP-B-BX.js} +37 -4
- package/dist/horizontal-bars-CyP-B-BX.js.map +1 -0
- package/dist/{horizontal-bars-CE1O-Y6G.cjs → horizontal-bars-Dgq3PYsg.cjs} +37 -4
- package/dist/horizontal-bars-Dgq3PYsg.cjs.map +1 -0
- package/dist/{markdown-renderer-DiJBbnYG.js → markdown-renderer-CaFpZTFS.js} +2 -2
- package/dist/{markdown-renderer-DiJBbnYG.js.map → markdown-renderer-CaFpZTFS.js.map} +1 -1
- package/dist/{markdown-renderer-DGIzNAQY.cjs → markdown-renderer-GVtZLunG.cjs} +2 -2
- package/dist/{markdown-renderer-DGIzNAQY.cjs.map → markdown-renderer-GVtZLunG.cjs.map} +1 -1
- package/dist/src/domains/traces/hooks/use-trace-spans.d.ts +3 -1
- package/dist/src/ds/components/ChatShell/chat-shell.d.ts +19 -2
- package/dist/src/ds/components/ChatShell/index.d.ts +3 -2
- package/dist/src/ds/components/Code/index.d.ts +1 -0
- package/dist/src/ds/components/Code/use-highlight.d.ts +10 -0
- package/dist/src/ds/components/CodeEditor/highlight.d.ts +1 -0
- package/dist/src/ds/components/CodeEditor/index.d.ts +1 -1
- package/dist/src/ds/components/Dialog/dialog-action.d.ts +9 -0
- package/dist/src/ds/components/Dialog/dialog-context.d.ts +16 -0
- package/dist/src/ds/components/Dialog/dialog-new-variant.stories.d.ts +64 -0
- package/dist/src/ds/components/Dialog/dialog.d.ts +15 -6
- package/dist/src/ds/components/Dialog/index.d.ts +2 -0
- package/dist/src/ds/components/HorizontalBars/horizontal-bars.stories.d.ts +2 -0
- package/dist/src/ds/components/IntegrationDialog/__fixtures__/integrations-catalog.d.ts +2 -0
- package/dist/src/ds/components/IntegrationDialog/index.d.ts +2 -0
- package/dist/src/ds/components/IntegrationDialog/integration-dialog.d.ts +28 -0
- package/dist/src/ds/components/IntegrationDialog/integration-dialog.stories.d.ts +24 -0
- package/dist/src/ds/components/ThreadRail/index.d.ts +1 -0
- package/dist/src/ds/components/ThreadRail/turn-groups.d.ts +19 -0
- package/dist/src/ds/components/ai/tool-call/ansi.d.ts +2 -0
- package/dist/src/ds/components/ai/tool-call/group-consecutive.d.ts +17 -0
- package/dist/src/ds/components/ai/tool-call/index.d.ts +4 -0
- package/dist/src/ds/components/ai/tool-call/tool-call-edit.d.ts +4 -0
- package/dist/src/ds/components/ai/tool-call/tool-call-group.d.ts +14 -0
- package/dist/src/ds/components/ai/tool-call/tool-call.d.ts +4 -0
- package/dist/src/ds/components/ai/tool-call/tool-presentation.d.ts +10 -0
- package/dist/style.css +138 -0
- package/package.json +8 -8
- package/dist/code-BJMC6T9D.cjs.map +0 -1
- package/dist/code-DRGJVroV.js.map +0 -1
- package/dist/dialog-CESxLg8S.js +0 -76
- package/dist/dialog-CESxLg8S.js.map +0 -1
- package/dist/dialog-K0q0KOOW.cjs +0 -107
- package/dist/dialog-K0q0KOOW.cjs.map +0 -1
- package/dist/horizontal-bars-CE1O-Y6G.cjs.map +0 -1
- package/dist/horizontal-bars-DZ5J4TKv.js.map +0 -1
|
@@ -1,20 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
|
+
import { h as highlight } from './highlight-BmpoELR4.js';
|
|
4
5
|
|
|
5
|
-
function
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
return token.color ? { color: token.color } : void 0;
|
|
10
|
-
}
|
|
11
|
-
function usableHighlight(highlighted, code, lang) {
|
|
12
|
-
if (!highlighted || highlighted.lang !== lang) return null;
|
|
13
|
-
return code.startsWith(highlighted.code) ? highlighted : null;
|
|
14
|
-
}
|
|
15
|
-
const Code = React.memo(function Code2({ code, lang, ...props }) {
|
|
16
|
-
const [highlighted, setHighlighted] = React.useState(null);
|
|
17
|
-
React.useEffect(() => {
|
|
6
|
+
function useHighlight(code, lang) {
|
|
7
|
+
const [highlighted, setHighlighted] = useState(null);
|
|
8
|
+
useEffect(() => {
|
|
18
9
|
if (!lang) {
|
|
19
10
|
setHighlighted(null);
|
|
20
11
|
return;
|
|
@@ -28,6 +19,21 @@ const Code = React.memo(function Code2({ code, lang, ...props }) {
|
|
|
28
19
|
cancelled = true;
|
|
29
20
|
};
|
|
30
21
|
}, [code, lang]);
|
|
22
|
+
return highlighted;
|
|
23
|
+
}
|
|
24
|
+
function tokenStyle(token) {
|
|
25
|
+
if (token.htmlStyle && typeof token.htmlStyle === "object") {
|
|
26
|
+
return token.htmlStyle;
|
|
27
|
+
}
|
|
28
|
+
return token.color ? { color: token.color } : void 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function usableHighlight(highlighted, code, lang) {
|
|
32
|
+
if (!highlighted || highlighted.lang !== lang) return null;
|
|
33
|
+
return code.startsWith(highlighted.code) ? highlighted : null;
|
|
34
|
+
}
|
|
35
|
+
const Code = React.memo(function Code2({ code, lang, ...props }) {
|
|
36
|
+
const highlighted = useHighlight(code, lang);
|
|
31
37
|
const usable = usableHighlight(highlighted, code, lang);
|
|
32
38
|
if (!usable) {
|
|
33
39
|
return /* @__PURE__ */ jsx("pre", { ...props, children: code });
|
|
@@ -53,5 +59,5 @@ const Code = React.memo(function Code2({ code, lang, ...props }) {
|
|
|
53
59
|
] }) });
|
|
54
60
|
});
|
|
55
61
|
|
|
56
|
-
export { Code as C };
|
|
57
|
-
//# sourceMappingURL=code-
|
|
62
|
+
export { Code as C, tokenStyle as t, useHighlight as u };
|
|
63
|
+
//# sourceMappingURL=code-D4Vw_fYq.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-D4Vw_fYq.js","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n\n useEffect(() => {\n if (!lang) {\n setHighlighted(null);\n return;\n }\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n return highlighted;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\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 *\n * A streaming fence re-renders on every delta while highlighting stays a frame\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const highlighted = useHighlight(code, lang);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n return <pre {...props}>{code}</pre>;\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.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 !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["Code"],"mappings":"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"}
|
|
@@ -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-DK1dn-Fh.cjs');
|
|
6
6
|
|
|
7
7
|
function _interopNamespaceDefault(e) {
|
|
8
8
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
|
|
@@ -23,19 +23,9 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
|
|
24
24
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
25
|
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
return token.color ? { color: token.color } : void 0;
|
|
31
|
-
}
|
|
32
|
-
function usableHighlight(highlighted, code, lang) {
|
|
33
|
-
if (!highlighted || highlighted.lang !== lang) return null;
|
|
34
|
-
return code.startsWith(highlighted.code) ? highlighted : null;
|
|
35
|
-
}
|
|
36
|
-
const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
|
|
37
|
-
const [highlighted, setHighlighted] = React__namespace.useState(null);
|
|
38
|
-
React__namespace.useEffect(() => {
|
|
26
|
+
function useHighlight(code, lang) {
|
|
27
|
+
const [highlighted, setHighlighted] = React.useState(null);
|
|
28
|
+
React.useEffect(() => {
|
|
39
29
|
if (!lang) {
|
|
40
30
|
setHighlighted(null);
|
|
41
31
|
return;
|
|
@@ -49,6 +39,21 @@ const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
|
|
|
49
39
|
cancelled = true;
|
|
50
40
|
};
|
|
51
41
|
}, [code, lang]);
|
|
42
|
+
return highlighted;
|
|
43
|
+
}
|
|
44
|
+
function tokenStyle(token) {
|
|
45
|
+
if (token.htmlStyle && typeof token.htmlStyle === "object") {
|
|
46
|
+
return token.htmlStyle;
|
|
47
|
+
}
|
|
48
|
+
return token.color ? { color: token.color } : void 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function usableHighlight(highlighted, code, lang) {
|
|
52
|
+
if (!highlighted || highlighted.lang !== lang) return null;
|
|
53
|
+
return code.startsWith(highlighted.code) ? highlighted : null;
|
|
54
|
+
}
|
|
55
|
+
const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
|
|
56
|
+
const highlighted = useHighlight(code, lang);
|
|
52
57
|
const usable = usableHighlight(highlighted, code, lang);
|
|
53
58
|
if (!usable) {
|
|
54
59
|
return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children: code });
|
|
@@ -75,4 +80,6 @@ const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
|
|
|
75
80
|
});
|
|
76
81
|
|
|
77
82
|
exports.Code = Code;
|
|
78
|
-
|
|
83
|
+
exports.tokenStyle = tokenStyle;
|
|
84
|
+
exports.useHighlight = useHighlight;
|
|
85
|
+
//# sourceMappingURL=code-DhrdtZce.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-DhrdtZce.cjs","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n\n useEffect(() => {\n if (!lang) {\n setHighlighted(null);\n return;\n }\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n return highlighted;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\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 *\n * A streaming fence re-renders on every delta while highlighting stays a frame\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const highlighted = useHighlight(code, lang);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n return <pre {...props}>{code}</pre>;\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.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 !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["useState","useEffect","highlight","React","Code","jsx","jsxs"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { C as Code } from './code-
|
|
2
|
+
import { C as Code } from './code-D4Vw_fYq.js';
|
|
3
3
|
import { C as CopyButton } from './copy-button-BHmcGzIz.js';
|
|
4
4
|
import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-AvBDZffY.js';
|
|
5
5
|
import { a as Tabs, T as TabList } from './tabs-root-BnwVjJbD.js';
|
|
@@ -83,4 +83,4 @@ function CodeBlock({
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
export { CodeBlock as C };
|
|
86
|
-
//# sourceMappingURL=code-block-
|
|
86
|
+
//# sourceMappingURL=code-block-DeksY23p.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block-
|
|
1
|
+
{"version":3,"file":"code-block-DeksY23p.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 // A scrolling `pre` still reports its longest line as an intrinsic width, which\n // grows every ancestor; containment keeps the block inside the width it is given.\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]',\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":";;;;;;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,MAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAA,GAAa,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,KAAa,MAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,cAAc,QAAA,KAAa,QAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,UAAU,CAAC,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,SAAS,WAAA,EAAa,KAAA;AAE1C,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAGC,SAAA,EAAW,EAAA;AAAA,QACT,4HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,WAAA,oBACV,GAAA,CAAC,IAAA,EAAA,EAAK,UAAA,EAAY,WAAA,CAAY,OAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAAe,aAAA,KAAkB,MAAM;AAAA,QAAC,CAAA,CAAA,EAC/F,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACb,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,GAAA,qBACX,GAAA,CAAC,OAAoB,KAAA,EAAO,GAAA,CAAI,OAC7B,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADG,IAAI,KAEd,CACD,GACH,CAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gEAAgE,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACrG,CAAA,EACF,CAAA;AAAA,QAGD,SAAA,IAAa,OAAA,oBACZ,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAC1B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,iBAAc,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAC/B,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,4BACA,GAAA,CAAC,aAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,yBACX,GAAA,CAAC,UAAA,EAAA,EAA2B,KAAA,EAAO,GAAA,CAAI,OACpC,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADU,GAAA,CAAI,KAErB,CACD,CAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,UAAA,IAAc,QAAA,oBACd,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAW,SAAA,EAAU,oCAAA,EAAsC,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UACpE,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,cAAc,CAAC,QAAA,IAAY,2BAC3B,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAGjG,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACT,8CAAA;AAAA,gBACA,QAAA,KAAa,WAAW,gCAAA,GAAmC;AAAA;AAC7D;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,IAAA;AAAA,cACT,WAAA;AAAA,cACA,OAAA,EAAS,WAAA;AAAA,cACT,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAW,EAAA;AAAA,gBACT,kHAAA;AAAA,gBACA,WAAA,CAAY;AAAA;AACd;AAAA;AACF,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const code = require('./code-
|
|
4
|
+
const code = require('./code-DhrdtZce.cjs');
|
|
5
5
|
const copyButton = require('./copy-button-BtnbaMvl.cjs');
|
|
6
6
|
const select = require('./select-C_FsCxA5.cjs');
|
|
7
7
|
const tabsRoot = require('./tabs-root-BNcLC-s6.cjs');
|
|
@@ -85,4 +85,4 @@ function CodeBlock({
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
exports.CodeBlock = CodeBlock;
|
|
88
|
-
//# sourceMappingURL=code-block-
|
|
88
|
+
//# sourceMappingURL=code-block-DgHrBuR8.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block-
|
|
1
|
+
{"version":3,"file":"code-block-DgHrBuR8.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 // A scrolling `pre` still reports its longest line as an intrinsic width, which\n // grows every ancestor; containment keeps the block inside the width it is given.\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]',\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":";;;;;;;;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,QACxBA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,MAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAA,GAAa,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,KAAa,MAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,cAAc,QAAA,KAAa,QAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,UAAU,CAAC,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,SAAS,WAAA,EAAa,KAAA;AAE1C,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAGC,SAAA,EAAWC,WAAA;AAAA,QACT,4HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,WAAA,oBACVC,cAAA,CAACC,aAAA,EAAA,EAAK,UAAA,EAAY,WAAA,CAAY,OAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAAe,aAAA,KAAkB,MAAM;AAAA,QAAC,CAAA,CAAA,EAC/F,QAAA,kBAAAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACb,yCAACE,gBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,GAAA,qBACXF,cAAA,CAACG,eAAoB,KAAA,EAAO,GAAA,CAAI,OAC7B,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADG,IAAI,KAEd,CACD,GACH,CAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAWH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gEAAgE,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACrG,CAAA,EACF,CAAA;AAAA,QAGD,SAAA,IAAa,OAAA,oBACZF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAACM,aAAA,EAAA,EAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAC1B,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACK,wBAAc,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAC/B,QAAA,kBAAAL,cAAA,CAACM,sBAAY,CAAA,EACf,CAAA;AAAA,4BACAN,cAAA,CAACO,oBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,yBACXP,cAAA,CAACQ,iBAAA,EAAA,EAA2B,KAAA,EAAO,GAAA,CAAI,OACpC,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADU,GAAA,CAAI,KAErB,CACD,CAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAWR,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,UAAA,IAAc,QAAA,oBACdF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,YAAA,EAAA,EAAW,SAAA,EAAU,oCAAA,EAAsC,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UACpE,OAAA,oBAAWA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,cAAc,CAAC,QAAA,IAAY,2BAC3BA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAGjGF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA;AAAA,YAACS,SAAA;AAAA,YAAA;AAAA,oBACCZ,MAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAA,EAAWE,WAAA;AAAA,gBACT,8CAAA;AAAA,gBACA,QAAA,KAAa,WAAW,gCAAA,GAAmC;AAAA;AAC7D;AAAA,WACF;AAAA,0BACAC,cAAA;AAAA,YAACU,qBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAASb,MAAA;AAAA,cACT,WAAA;AAAA,cACA,OAAA,EAAS,WAAA;AAAA,cACT,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAWE,WAAA;AAAA,gBACT,kHAAA;AAAA,gBACAY,kCAAA,CAAY;AAAA;AACd;AAAA;AACF,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Command as Command$1 } from 'cmdk';
|
|
3
3
|
import { Search } from 'lucide-react';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import { D as Dialog,
|
|
5
|
+
import { D as Dialog, a as DialogContent, c as DialogTitle, d as DialogDescription } from './dialog-CZMPDVUj.js';
|
|
6
6
|
import { S as ScrollArea } from './scroll-area-BiHnOfzg.js';
|
|
7
7
|
import { transitions } from './primitives/transitions.es.js';
|
|
8
8
|
import { c as cn } from './cn-B4oPhFx9.js';
|
|
@@ -165,4 +165,4 @@ const CommandShortcut = ({ className, ...props }) => {
|
|
|
165
165
|
CommandShortcut.displayName = "CommandShortcut";
|
|
166
166
|
|
|
167
167
|
export { Command as C, CommandDialog as a, CommandEmpty as b, CommandGroup as c, CommandInput as d, CommandItem as e, CommandList as f, CommandSeparator as g, CommandShortcut as h };
|
|
168
|
-
//# sourceMappingURL=command-
|
|
168
|
+
//# sourceMappingURL=command-Be-KrIAX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-DWFd0d4c.js","sources":["../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn('flex size-full flex-col overflow-hidden rounded-xl bg-surface3 text-neutral4', className)}\n {...props}\n />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n children?: React.ReactNode;\n title?: string;\n description?: string;\n contentClassName?: string;\n commandClassName?: string;\n commandLabel?: string;\n showOverlay?: boolean;\n overlayClassName?: string;\n};\n\nconst CommandDialog = ({\n children,\n title = 'Command Palette',\n description = 'Search for commands and actions',\n contentClassName,\n commandClassName,\n commandLabel,\n showOverlay = false,\n overlayClassName,\n ...props\n}: CommandDialogProps) => {\n // Custom filter that preserves DOM order by returning 1 for all matches\n // This prevents cmdk from reordering items by match score\n const filter = React.useCallback((value: string, search: string) => {\n const normalizedValue = value.toLowerCase();\n const normalizedSearch = search.toLowerCase();\n const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n // All search terms must be found in the value\n const matches = searchTerms.every(term => normalizedValue.includes(term));\n return matches ? 1 : 0;\n }, []);\n\n // Stop propagation to prevent keyboard events from reaching\n // global document-level listeners (e.g., table keyboard nav)\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Escape') return;\n\n e.stopPropagation();\n }, []);\n\n return (\n <Dialog {...props}>\n <DialogContent\n showOverlay={showOverlay}\n overlayClassName={overlayClassName}\n className={cn('overflow-hidden p-0', contentClassName)}\n >\n <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n <Command\n label={commandLabel}\n loop\n filter={filter}\n onKeyDown={handleKeyDown}\n className={cn(\n '[&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-neutral3',\n '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n '**:[[cmdk-input]]:h-12',\n '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3',\n '[&_[cmdk-item]_svg]:size-5',\n commandClassName,\n )}\n >\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n rightSlot?: React.ReactNode;\n wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n <div\n data-slot=\"command-input-wrapper\"\n className={cn('flex items-center border-b border-border1 px-3', transitions.colors, wrapperClassName)}\n >\n <Search className={cn('mr-2 size-4 shrink-0 text-neutral3', transitions.colors)} />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6',\n 'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n className,\n )}\n {...props}\n />\n {rightSlot && (\n <div data-slot=\"command-input-right-slot\" className=\"text-neutral3 ml-2 flex shrink-0 items-center\">\n {rightSlot}\n </div>\n )}\n </div>\n ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n scrollArea?: boolean;\n scrollAreaClassName?: string;\n scrollAreaViewportClassName?: string;\n scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n (\n { className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props },\n ref,\n ) => {\n const list = (\n <CommandPrimitive.List\n ref={ref}\n className={cn(\n 'outline-none focus:outline-none focus-visible:outline-none',\n scrollArea ? 'overflow-visible' : 'max-h-dropdown-max-height overflow-x-hidden overflow-y-auto',\n className,\n )}\n {...props}\n />\n );\n\n if (!scrollArea) return list;\n\n return (\n <ScrollArea\n className={cn('min-h-0', scrollAreaClassName)}\n viewPortClassName={scrollAreaViewportClassName}\n mask={scrollAreaMask}\n >\n {list}\n </ScrollArea>\n );\n },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"text-ui-smd text-neutral3 py-6 text-center\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral4',\n '[&_[cmdk-group-heading]]:text-ui-xs [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-neutral3 **:[[cmdk-group-heading]]:uppercase',\n className,\n )}\n {...props}\n />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border1', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm text-neutral4 select-none',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n 'data-[selected=true]:bg-surface4 data-[selected=true]:text-neutral6',\n 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3 data-[selected=true]:[&_svg]:text-neutral6',\n className,\n )}\n {...props}\n />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return <span className={cn('ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandSeparator,\n CommandShortcut,\n};\n"],"names":["CommandPrimitive"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"command-Be-KrIAX.js","sources":["../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn('flex size-full flex-col overflow-hidden rounded-xl bg-surface3 text-neutral4', className)}\n {...props}\n />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n children?: React.ReactNode;\n title?: string;\n description?: string;\n contentClassName?: string;\n commandClassName?: string;\n commandLabel?: string;\n showOverlay?: boolean;\n overlayClassName?: string;\n};\n\nconst CommandDialog = ({\n children,\n title = 'Command Palette',\n description = 'Search for commands and actions',\n contentClassName,\n commandClassName,\n commandLabel,\n showOverlay = false,\n overlayClassName,\n ...props\n}: CommandDialogProps) => {\n // Custom filter that preserves DOM order by returning 1 for all matches\n // This prevents cmdk from reordering items by match score\n const filter = React.useCallback((value: string, search: string) => {\n const normalizedValue = value.toLowerCase();\n const normalizedSearch = search.toLowerCase();\n const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n // All search terms must be found in the value\n const matches = searchTerms.every(term => normalizedValue.includes(term));\n return matches ? 1 : 0;\n }, []);\n\n // Stop propagation to prevent keyboard events from reaching\n // global document-level listeners (e.g., table keyboard nav)\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Escape') return;\n\n e.stopPropagation();\n }, []);\n\n return (\n <Dialog {...props}>\n <DialogContent\n showOverlay={showOverlay}\n overlayClassName={overlayClassName}\n className={cn('overflow-hidden p-0', contentClassName)}\n >\n <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n <Command\n label={commandLabel}\n loop\n filter={filter}\n onKeyDown={handleKeyDown}\n className={cn(\n '[&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-neutral3',\n '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n '**:[[cmdk-input]]:h-12',\n '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3',\n '[&_[cmdk-item]_svg]:size-5',\n commandClassName,\n )}\n >\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n rightSlot?: React.ReactNode;\n wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n <div\n data-slot=\"command-input-wrapper\"\n className={cn('flex items-center border-b border-border1 px-3', transitions.colors, wrapperClassName)}\n >\n <Search className={cn('mr-2 size-4 shrink-0 text-neutral3', transitions.colors)} />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6',\n 'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n className,\n )}\n {...props}\n />\n {rightSlot && (\n <div data-slot=\"command-input-right-slot\" className=\"text-neutral3 ml-2 flex shrink-0 items-center\">\n {rightSlot}\n </div>\n )}\n </div>\n ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n scrollArea?: boolean;\n scrollAreaClassName?: string;\n scrollAreaViewportClassName?: string;\n scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n (\n { className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props },\n ref,\n ) => {\n const list = (\n <CommandPrimitive.List\n ref={ref}\n className={cn(\n 'outline-none focus:outline-none focus-visible:outline-none',\n scrollArea ? 'overflow-visible' : 'max-h-dropdown-max-height overflow-x-hidden overflow-y-auto',\n className,\n )}\n {...props}\n />\n );\n\n if (!scrollArea) return list;\n\n return (\n <ScrollArea\n className={cn('min-h-0', scrollAreaClassName)}\n viewPortClassName={scrollAreaViewportClassName}\n mask={scrollAreaMask}\n >\n {list}\n </ScrollArea>\n );\n },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"text-ui-smd text-neutral3 py-6 text-center\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral4',\n '[&_[cmdk-group-heading]]:text-ui-xs [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-neutral3 **:[[cmdk-group-heading]]:uppercase',\n className,\n )}\n {...props}\n />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border1', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm text-neutral4 select-none',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n 'data-[selected=true]:bg-surface4 data-[selected=true]:text-neutral6',\n 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3 data-[selected=true]:[&_svg]:text-neutral6',\n className,\n )}\n {...props}\n />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return <span className={cn('ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandSeparator,\n CommandShortcut,\n};\n"],"names":["CommandPrimitive"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ const jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
const cmdk = require('cmdk');
|
|
5
5
|
const lucideReact = require('lucide-react');
|
|
6
6
|
const React = require('react');
|
|
7
|
-
const dialog = require('./dialog-
|
|
7
|
+
const dialog = require('./dialog-D-7Hkb3j.cjs');
|
|
8
8
|
const scrollArea = require('./scroll-area-B1vdOFuC.cjs');
|
|
9
9
|
const primitives_transitions = require('./primitives/transitions.cjs.js');
|
|
10
10
|
const utils_cn = require('./cn-DCPcv4xv.cjs');
|
|
@@ -194,4 +194,4 @@ exports.CommandItem = CommandItem;
|
|
|
194
194
|
exports.CommandList = CommandList;
|
|
195
195
|
exports.CommandSeparator = CommandSeparator;
|
|
196
196
|
exports.CommandShortcut = CommandShortcut;
|
|
197
|
-
//# sourceMappingURL=command-
|
|
197
|
+
//# sourceMappingURL=command-DsTBCmQq.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-CUev1UxH.cjs","sources":["../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn('flex size-full flex-col overflow-hidden rounded-xl bg-surface3 text-neutral4', className)}\n {...props}\n />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n children?: React.ReactNode;\n title?: string;\n description?: string;\n contentClassName?: string;\n commandClassName?: string;\n commandLabel?: string;\n showOverlay?: boolean;\n overlayClassName?: string;\n};\n\nconst CommandDialog = ({\n children,\n title = 'Command Palette',\n description = 'Search for commands and actions',\n contentClassName,\n commandClassName,\n commandLabel,\n showOverlay = false,\n overlayClassName,\n ...props\n}: CommandDialogProps) => {\n // Custom filter that preserves DOM order by returning 1 for all matches\n // This prevents cmdk from reordering items by match score\n const filter = React.useCallback((value: string, search: string) => {\n const normalizedValue = value.toLowerCase();\n const normalizedSearch = search.toLowerCase();\n const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n // All search terms must be found in the value\n const matches = searchTerms.every(term => normalizedValue.includes(term));\n return matches ? 1 : 0;\n }, []);\n\n // Stop propagation to prevent keyboard events from reaching\n // global document-level listeners (e.g., table keyboard nav)\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Escape') return;\n\n e.stopPropagation();\n }, []);\n\n return (\n <Dialog {...props}>\n <DialogContent\n showOverlay={showOverlay}\n overlayClassName={overlayClassName}\n className={cn('overflow-hidden p-0', contentClassName)}\n >\n <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n <Command\n label={commandLabel}\n loop\n filter={filter}\n onKeyDown={handleKeyDown}\n className={cn(\n '[&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-neutral3',\n '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n '**:[[cmdk-input]]:h-12',\n '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3',\n '[&_[cmdk-item]_svg]:size-5',\n commandClassName,\n )}\n >\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n rightSlot?: React.ReactNode;\n wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n <div\n data-slot=\"command-input-wrapper\"\n className={cn('flex items-center border-b border-border1 px-3', transitions.colors, wrapperClassName)}\n >\n <Search className={cn('mr-2 size-4 shrink-0 text-neutral3', transitions.colors)} />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6',\n 'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n className,\n )}\n {...props}\n />\n {rightSlot && (\n <div data-slot=\"command-input-right-slot\" className=\"text-neutral3 ml-2 flex shrink-0 items-center\">\n {rightSlot}\n </div>\n )}\n </div>\n ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n scrollArea?: boolean;\n scrollAreaClassName?: string;\n scrollAreaViewportClassName?: string;\n scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n (\n { className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props },\n ref,\n ) => {\n const list = (\n <CommandPrimitive.List\n ref={ref}\n className={cn(\n 'outline-none focus:outline-none focus-visible:outline-none',\n scrollArea ? 'overflow-visible' : 'max-h-dropdown-max-height overflow-x-hidden overflow-y-auto',\n className,\n )}\n {...props}\n />\n );\n\n if (!scrollArea) return list;\n\n return (\n <ScrollArea\n className={cn('min-h-0', scrollAreaClassName)}\n viewPortClassName={scrollAreaViewportClassName}\n mask={scrollAreaMask}\n >\n {list}\n </ScrollArea>\n );\n },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"text-ui-smd text-neutral3 py-6 text-center\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral4',\n '[&_[cmdk-group-heading]]:text-ui-xs [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-neutral3 **:[[cmdk-group-heading]]:uppercase',\n className,\n )}\n {...props}\n />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border1', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm text-neutral4 select-none',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n 'data-[selected=true]:bg-surface4 data-[selected=true]:text-neutral6',\n 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3 data-[selected=true]:[&_svg]:text-neutral6',\n className,\n )}\n {...props}\n />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return <span className={cn('ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandSeparator,\n CommandShortcut,\n};\n"],"names":["React","jsx","CommandPrimitive","cn","Dialog","jsxs","DialogContent","DialogTitle","DialogDescription","transitions","Search","scrollArea","ScrollArea"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"command-DsTBCmQq.cjs","sources":["../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn('flex size-full flex-col overflow-hidden rounded-xl bg-surface3 text-neutral4', className)}\n {...props}\n />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n children?: React.ReactNode;\n title?: string;\n description?: string;\n contentClassName?: string;\n commandClassName?: string;\n commandLabel?: string;\n showOverlay?: boolean;\n overlayClassName?: string;\n};\n\nconst CommandDialog = ({\n children,\n title = 'Command Palette',\n description = 'Search for commands and actions',\n contentClassName,\n commandClassName,\n commandLabel,\n showOverlay = false,\n overlayClassName,\n ...props\n}: CommandDialogProps) => {\n // Custom filter that preserves DOM order by returning 1 for all matches\n // This prevents cmdk from reordering items by match score\n const filter = React.useCallback((value: string, search: string) => {\n const normalizedValue = value.toLowerCase();\n const normalizedSearch = search.toLowerCase();\n const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n // All search terms must be found in the value\n const matches = searchTerms.every(term => normalizedValue.includes(term));\n return matches ? 1 : 0;\n }, []);\n\n // Stop propagation to prevent keyboard events from reaching\n // global document-level listeners (e.g., table keyboard nav)\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Escape') return;\n\n e.stopPropagation();\n }, []);\n\n return (\n <Dialog {...props}>\n <DialogContent\n showOverlay={showOverlay}\n overlayClassName={overlayClassName}\n className={cn('overflow-hidden p-0', contentClassName)}\n >\n <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n <Command\n label={commandLabel}\n loop\n filter={filter}\n onKeyDown={handleKeyDown}\n className={cn(\n '[&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-neutral3',\n '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n '**:[[cmdk-input]]:h-12',\n '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3',\n '[&_[cmdk-item]_svg]:size-5',\n commandClassName,\n )}\n >\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n rightSlot?: React.ReactNode;\n wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n <div\n data-slot=\"command-input-wrapper\"\n className={cn('flex items-center border-b border-border1 px-3', transitions.colors, wrapperClassName)}\n >\n <Search className={cn('mr-2 size-4 shrink-0 text-neutral3', transitions.colors)} />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6',\n 'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n className,\n )}\n {...props}\n />\n {rightSlot && (\n <div data-slot=\"command-input-right-slot\" className=\"text-neutral3 ml-2 flex shrink-0 items-center\">\n {rightSlot}\n </div>\n )}\n </div>\n ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n scrollArea?: boolean;\n scrollAreaClassName?: string;\n scrollAreaViewportClassName?: string;\n scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n (\n { className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props },\n ref,\n ) => {\n const list = (\n <CommandPrimitive.List\n ref={ref}\n className={cn(\n 'outline-none focus:outline-none focus-visible:outline-none',\n scrollArea ? 'overflow-visible' : 'max-h-dropdown-max-height overflow-x-hidden overflow-y-auto',\n className,\n )}\n {...props}\n />\n );\n\n if (!scrollArea) return list;\n\n return (\n <ScrollArea\n className={cn('min-h-0', scrollAreaClassName)}\n viewPortClassName={scrollAreaViewportClassName}\n mask={scrollAreaMask}\n >\n {list}\n </ScrollArea>\n );\n },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"text-ui-smd text-neutral3 py-6 text-center\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral4',\n '[&_[cmdk-group-heading]]:text-ui-xs [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-neutral3 **:[[cmdk-group-heading]]:uppercase',\n className,\n )}\n {...props}\n />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border1', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm text-neutral4 select-none',\n 'outline-none focus:outline-none focus-visible:outline-none',\n transitions.colors,\n 'data-[selected=true]:bg-surface4 data-[selected=true]:text-neutral6',\n 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3 data-[selected=true]:[&_svg]:text-neutral6',\n className,\n )}\n {...props}\n />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return <span className={cn('ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandSeparator,\n CommandShortcut,\n};\n"],"names":["React","jsx","CommandPrimitive","cn","Dialog","jsxs","DialogContent","DialogTitle","DialogDescription","transitions","Search","scrollArea","ScrollArea"],"mappings":"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"}
|
|
@@ -37,7 +37,7 @@ function ChatShellViewport({ className, children, ...props }) {
|
|
|
37
37
|
className
|
|
38
38
|
),
|
|
39
39
|
...props,
|
|
40
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "chat-shell-track", className: "flex min-h-full min-w-0 flex-col", children })
|
|
40
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "chat-shell-track", className: "relative flex min-h-full min-w-0 flex-col", children })
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
43
|
}
|
|
@@ -54,6 +54,24 @@ function ChatShellColumn({ className, ...props }) {
|
|
|
54
54
|
}
|
|
55
55
|
);
|
|
56
56
|
}
|
|
57
|
+
function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
"data-slot": "chat-shell-turn",
|
|
62
|
+
"data-opens-turn": opensTurn ? "true" : void 0,
|
|
63
|
+
"data-holds-room": holdsRoom ? "true" : void 0,
|
|
64
|
+
className: utils_cn.cn(
|
|
65
|
+
"flex flex-col",
|
|
66
|
+
opensTurn && "min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none",
|
|
67
|
+
holdsRoom && "min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0",
|
|
68
|
+
holdsRoom && restored && "transition-none",
|
|
69
|
+
className
|
|
70
|
+
),
|
|
71
|
+
...props
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
57
75
|
function ChatShellDock({ className, ...props }) {
|
|
58
76
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
59
77
|
"div",
|
|
@@ -93,6 +111,7 @@ const ChatShell = Object.assign(ChatShellRoot, {
|
|
|
93
111
|
Dock: ChatShellDock,
|
|
94
112
|
ScrollButton: ChatShellScrollButton,
|
|
95
113
|
Stage: ChatShellStage,
|
|
114
|
+
Turn: ChatShellTurn,
|
|
96
115
|
Viewport: ChatShellViewport
|
|
97
116
|
});
|
|
98
117
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatShell.cjs.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n MessageScrollerButtonProps,\n MessageScrollerContentProps,\n MessageScrollerProviderProps,\n MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (page colour), `--chat-fade` (the band the veil ramps\n * in across, above the composer), `--chat-veil` (strongest it ever gets — the\n * transcript keeps showing through), `--chat-gutter` (room below the composer),\n * `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n return (\n <MessageScrollerProvider {...scroller}>\n <div\n data-slot=\"chat-shell\"\n className={cn(\n '@container relative isolate flex min-h-0 min-w-0 flex-col bg-(--chat-surface)',\n '[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n '[--chat-surface:var(--color-surface2)] [--chat-veil:70%]',\n className,\n )}\n {...props}\n />\n </MessageScrollerProvider>\n );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n return (\n <MessageScrollerViewport\n className={cn(\n 'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\n 'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n className,\n )}\n {...props}\n >\n {/* Sticky against the scroller itself is clamped to its box, not the\n scrolled height, and strands the dock mid-transcript. */}\n <div data-slot=\"chat-shell-track\" className=\"flex min-h-full min-w-0 flex-col\">\n {children}\n </div>\n </MessageScrollerViewport>\n );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-column\"\n className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-5', className)}\n {...props}\n />\n );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air and never\n * past `--chat-veil`, so the transcript dims as it slides under but stays\n * readable through the card's surroundings. The ramp runs three times the air, so\n * it tops out behind the card and its end never shows.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-dock\"\n className={cn(\n 'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n 'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n 'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_calc(var(--chat-fade)*3))]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n return (\n <div\n data-slot=\"chat-shell-scroll-button\"\n className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n >\n <ChatShellColumn className=\"flex-row justify-center\">\n <MessageScrollerButton\n className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n {...props}\n />\n </ChatShellColumn>\n </div>\n );\n}\n","import {\n ChatShellBar,\n ChatShellColumn,\n ChatShellContent,\n ChatShellDock,\n ChatShellRoot,\n ChatShellScrollButton,\n ChatShellStage,\n ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n Bar: ChatShellBar,\n Column: ChatShellColumn,\n Content: ChatShellContent,\n Dock: ChatShellDock,\n ScrollButton: ChatShellScrollButton,\n Stage: ChatShellStage,\n Viewport: ChatShellViewport,\n});\n"],"names":["jsx","MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChatShell.cjs.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n MessageScrollerButtonProps,\n MessageScrollerContentProps,\n MessageScrollerProviderProps,\n MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (page colour), `--chat-fade` (the band the veil ramps\n * in across, above the composer), `--chat-veil` (strongest it ever gets — the\n * transcript keeps showing through), `--chat-gutter` (room below the composer),\n * `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n return (\n <MessageScrollerProvider {...scroller}>\n <div\n data-slot=\"chat-shell\"\n className={cn(\n '@container relative isolate flex min-h-0 min-w-0 flex-col bg-(--chat-surface)',\n '[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n '[--chat-surface:var(--color-surface2)] [--chat-veil:70%]',\n className,\n )}\n {...props}\n />\n </MessageScrollerProvider>\n );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n return (\n <MessageScrollerViewport\n className={cn(\n 'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\n 'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n className,\n )}\n {...props}\n >\n {/* Sticky against the scroller itself is clamped to its box, not the\n scrolled height, and strands the dock mid-transcript. */}\n <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n {children}\n </div>\n </MessageScrollerViewport>\n );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-column\"\n className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-5', className)}\n {...props}\n />\n );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n opensTurn?: boolean;\n /** Holds the reply's share of the screen open under the live turn while the run answers. */\n holdsRoom?: boolean;\n /** Restored mid-run: the room is already due, so it opens with no transition. */\n restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n return (\n <div\n data-slot=\"chat-shell-turn\"\n data-opens-turn={opensTurn ? 'true' : undefined}\n data-holds-room={holdsRoom ? 'true' : undefined}\n className={cn(\n 'flex flex-col',\n opensTurn &&\n 'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n holdsRoom && restored && 'transition-none',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air and never\n * past `--chat-veil`, so the transcript dims as it slides under but stays\n * readable through the card's surroundings. The ramp runs three times the air, so\n * it tops out behind the card and its end never shows.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-dock\"\n className={cn(\n 'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n 'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n 'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_calc(var(--chat-fade)*3))]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n return (\n <div\n data-slot=\"chat-shell-scroll-button\"\n className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n >\n <ChatShellColumn className=\"flex-row justify-center\">\n <MessageScrollerButton\n className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n {...props}\n />\n </ChatShellColumn>\n </div>\n );\n}\n","import {\n ChatShellBar,\n ChatShellColumn,\n ChatShellContent,\n ChatShellDock,\n ChatShellRoot,\n ChatShellScrollButton,\n ChatShellStage,\n ChatShellTurn,\n ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n Bar: ChatShellBar,\n Column: ChatShellColumn,\n Content: ChatShellContent,\n Dock: ChatShellDock,\n ScrollButton: ChatShellScrollButton,\n Stage: ChatShellStage,\n Turn: ChatShellTurn,\n Viewport: ChatShellViewport,\n});\n"],"names":["jsx","MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"mappings":"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"}
|
|
@@ -33,7 +33,7 @@ function ChatShellViewport({ className, children, ...props }) {
|
|
|
33
33
|
className
|
|
34
34
|
),
|
|
35
35
|
...props,
|
|
36
|
-
children: /* @__PURE__ */ jsx("div", { "data-slot": "chat-shell-track", className: "flex min-h-full min-w-0 flex-col", children })
|
|
36
|
+
children: /* @__PURE__ */ jsx("div", { "data-slot": "chat-shell-track", className: "relative flex min-h-full min-w-0 flex-col", children })
|
|
37
37
|
}
|
|
38
38
|
);
|
|
39
39
|
}
|
|
@@ -50,6 +50,24 @@ function ChatShellColumn({ className, ...props }) {
|
|
|
50
50
|
}
|
|
51
51
|
);
|
|
52
52
|
}
|
|
53
|
+
function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
"div",
|
|
56
|
+
{
|
|
57
|
+
"data-slot": "chat-shell-turn",
|
|
58
|
+
"data-opens-turn": opensTurn ? "true" : void 0,
|
|
59
|
+
"data-holds-room": holdsRoom ? "true" : void 0,
|
|
60
|
+
className: cn(
|
|
61
|
+
"flex flex-col",
|
|
62
|
+
opensTurn && "min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none",
|
|
63
|
+
holdsRoom && "min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0",
|
|
64
|
+
holdsRoom && restored && "transition-none",
|
|
65
|
+
className
|
|
66
|
+
),
|
|
67
|
+
...props
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
53
71
|
function ChatShellDock({ className, ...props }) {
|
|
54
72
|
return /* @__PURE__ */ jsx(
|
|
55
73
|
"div",
|
|
@@ -89,6 +107,7 @@ const ChatShell = Object.assign(ChatShellRoot, {
|
|
|
89
107
|
Dock: ChatShellDock,
|
|
90
108
|
ScrollButton: ChatShellScrollButton,
|
|
91
109
|
Stage: ChatShellStage,
|
|
110
|
+
Turn: ChatShellTurn,
|
|
92
111
|
Viewport: ChatShellViewport
|
|
93
112
|
});
|
|
94
113
|
|