@nadicodeai/ui 0.10.1 → 0.11.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/AGENTS.md +23 -135
- package/README.md +39 -110
- package/dist/components/action-band.d.ts +5 -3
- package/dist/components/action-band.d.ts.map +1 -1
- package/dist/components/action-band.js +35 -21
- package/dist/components/agent-chat.d.ts.map +1 -1
- package/dist/components/agent-chat.js +1 -1
- package/dist/components/agent-composer.d.ts.map +1 -1
- package/dist/components/agent-composer.js +1 -1
- package/dist/components/ai-elements/code-block.d.ts.map +1 -1
- package/dist/components/ai-elements/code-block.js +9 -23
- package/dist/components/ai-elements/commit.d.ts.map +1 -1
- package/dist/components/ai-elements/commit.js +9 -23
- package/dist/components/ai-elements/environment-variables.d.ts.map +1 -1
- package/dist/components/ai-elements/environment-variables.js +4 -29
- package/dist/components/ai-elements/snippet.d.ts.map +1 -1
- package/dist/components/ai-elements/snippet.js +9 -23
- package/dist/components/ai-elements/stack-trace.d.ts.map +1 -1
- package/dist/components/ai-elements/stack-trace.js +8 -21
- package/dist/components/ai-elements/terminal.d.ts.map +1 -1
- package/dist/components/ai-elements/terminal.js +16 -29
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +3 -2
- package/dist/components/artifact-panel.d.ts.map +1 -1
- package/dist/components/artifact-panel.js +5 -5
- package/dist/components/badge.js +1 -1
- package/dist/components/bento.d.ts +14 -3
- package/dist/components/bento.d.ts.map +1 -1
- package/dist/components/bento.js +26 -5
- package/dist/components/brand.d.ts.map +1 -1
- package/dist/components/brand.js +29 -3
- package/dist/components/button.js +1 -1
- package/dist/components/chart-time-series.d.ts.map +1 -1
- package/dist/components/chart-time-series.js +2 -2
- package/dist/components/chart.js +1 -1
- package/dist/components/contact.d.ts +22 -10
- package/dist/components/contact.d.ts.map +1 -1
- package/dist/components/contact.js +34 -12
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +3 -2
- package/dist/components/diff-count.js +1 -1
- package/dist/components/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu.js +2 -1
- package/dist/components/faq-item.js +2 -2
- package/dist/components/faq.d.ts +4 -1
- package/dist/components/faq.d.ts.map +1 -1
- package/dist/components/faq.js +5 -2
- package/dist/components/feature-grid.d.ts +23 -0
- package/dist/components/feature-grid.d.ts.map +1 -0
- package/dist/components/feature-grid.js +33 -0
- package/dist/components/feature-rows.d.ts +23 -0
- package/dist/components/feature-rows.d.ts.map +1 -0
- package/dist/components/feature-rows.js +27 -0
- package/dist/components/footer.d.ts +18 -12
- package/dist/components/footer.d.ts.map +1 -1
- package/dist/components/footer.js +32 -20
- package/dist/components/hero.d.ts +28 -0
- package/dist/components/hero.d.ts.map +1 -0
- package/dist/components/hero.js +45 -0
- package/dist/components/input-otp.js +1 -1
- package/dist/components/integration-flow.d.ts +36 -0
- package/dist/components/integration-flow.d.ts.map +1 -0
- package/dist/components/integration-flow.js +36 -0
- package/dist/components/live-demo.d.ts +31 -0
- package/dist/components/live-demo.d.ts.map +1 -0
- package/dist/components/live-demo.js +30 -0
- package/dist/components/logo-band.d.ts +12 -2
- package/dist/components/logo-band.d.ts.map +1 -1
- package/dist/components/logo-band.js +16 -1
- package/dist/components/logo-tile.d.ts.map +1 -1
- package/dist/components/logo-tile.js +5 -2
- package/dist/components/nav-bar.d.ts +14 -8
- package/dist/components/nav-bar.d.ts.map +1 -1
- package/dist/components/nav-bar.js +19 -13
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +2 -1
- package/dist/components/pricing-card.d.ts +10 -15
- package/dist/components/pricing-card.d.ts.map +1 -1
- package/dist/components/pricing-card.js +18 -29
- package/dist/components/pricing.d.ts +11 -14
- package/dist/components/pricing.d.ts.map +1 -1
- package/dist/components/pricing.js +5 -15
- package/dist/components/quote-card.d.ts +10 -2
- package/dist/components/quote-card.d.ts.map +1 -1
- package/dist/components/quote-card.js +15 -3
- package/dist/components/security-grid.d.ts +25 -0
- package/dist/components/security-grid.d.ts.map +1 -0
- package/dist/components/security-grid.js +31 -0
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +2 -1
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +3 -2
- package/dist/components/sidebar.js +1 -1
- package/dist/components/stat-block.d.ts +9 -5
- package/dist/components/stat-block.d.ts.map +1 -1
- package/dist/components/stat-block.js +12 -6
- package/dist/components/statement.d.ts +32 -0
- package/dist/components/statement.d.ts.map +1 -0
- package/dist/components/statement.js +40 -0
- package/dist/components/stats-band.d.ts +6 -2
- package/dist/components/stats-band.d.ts.map +1 -1
- package/dist/components/stats-band.js +10 -3
- package/dist/components/status-dot.js +4 -4
- package/dist/components/steps.d.ts +34 -0
- package/dist/components/steps.d.ts.map +1 -0
- package/dist/components/steps.js +40 -0
- package/dist/components/team-grid.d.ts +27 -0
- package/dist/components/team-grid.d.ts.map +1 -0
- package/dist/components/team-grid.js +30 -0
- package/dist/components/testimonials.d.ts +39 -12
- package/dist/components/testimonials.d.ts.map +1 -1
- package/dist/components/testimonials.js +46 -13
- package/dist/components/texture-strip.d.ts +22 -0
- package/dist/components/texture-strip.d.ts.map +1 -0
- package/dist/components/texture-strip.js +29 -0
- package/dist/components/toggle.js +1 -1
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +2 -1
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -0
- package/dist/lib/message-scroller-primitive/geometry.d.ts +1 -5
- package/dist/lib/message-scroller-primitive/geometry.d.ts.map +1 -1
- package/dist/lib/message-scroller-primitive/geometry.js +1 -1
- package/dist/lib/message-scroller-primitive/stores.d.ts +2 -3
- package/dist/lib/message-scroller-primitive/stores.d.ts.map +1 -1
- package/dist/lib/message-scroller-primitive/stores.js +1 -1
- package/dist/lib/message-scroller-primitive/types.d.ts +1 -2
- package/dist/lib/message-scroller-primitive/types.d.ts.map +1 -1
- package/dist/lib/message-scroller-primitive/types.js +1 -1
- package/dist/lib/motion.d.ts +12 -0
- package/dist/lib/motion.d.ts.map +1 -0
- package/dist/lib/motion.js +11 -0
- package/dist/lib/use-copy-to-clipboard.d.ts +11 -0
- package/dist/lib/use-copy-to-clipboard.d.ts.map +1 -0
- package/dist/lib/use-copy-to-clipboard.js +27 -0
- package/dist/styles/globals.css +175 -300
- package/docs/agent-work-surfaces.md +6 -5
- package/docs/agents/nadicodeai-ui.md +42 -273
- package/docs/consuming-cross-repo.md +26 -33
- package/docs/contract.md +43 -0
- package/docs/migration/nadia-consumer-readiness.md +5 -10
- package/docs/terminal-tui-semantics.md +142 -181
- package/llms.txt +49 -84
- package/package.json +2 -3
- package/skills/nadicodeai-ui/SKILL.md +6 -30
|
@@ -4,8 +4,9 @@ import { Avatar, AvatarFallback } from "../avatar.js";
|
|
|
4
4
|
import { Button } from "../button.js";
|
|
5
5
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible.js";
|
|
6
6
|
import { cn } from "../../lib/utils.js";
|
|
7
|
+
import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard.js";
|
|
7
8
|
import { CheckIcon, CopyIcon, FileIcon, GitCommitIcon, MinusIcon, PlusIcon } from "lucide-react";
|
|
8
|
-
import { useCallback, useEffect,
|
|
9
|
+
import { useCallback, useEffect, useState } from "react";
|
|
9
10
|
export const Commit = ({ className, children, ...props }) => (_jsx(Collapsible, { className: cn("rounded-lg border bg-background", className), ...props, children: children }));
|
|
10
11
|
export const CommitHeader = ({ className, children, ...props }) => (_jsx(CollapsibleTrigger, { nativeButton: false, render: _jsx("div", { className: cn("group flex cursor-pointer items-center justify-between gap-4 p-3 text-left transition-colors hover:opacity-80", className), children: children }), ...props }));
|
|
11
12
|
export const CommitHash = ({ className, children, ...props }) => (_jsxs("span", { className: cn("font-mono text-xs", className), ...props, children: [_jsx(GitCommitIcon, { className: "mr-1 inline-block size-3" }), children] }));
|
|
@@ -38,28 +39,13 @@ export const CommitActions = ({ className, children, ...props }) => (
|
|
|
38
39
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- The group only intercepts bubbled events from its interactive child controls so the parent commit is not activated.
|
|
39
40
|
_jsx("div", { className: cn("flex items-center gap-1", className), onClick: handleActionsClick, onKeyDown: handleActionsKeyDown, role: "group", ...props, children: children }));
|
|
40
41
|
export const CommitCopyButton = ({ hash, onCopy, onError, timeout = 2000, children, className, ...props }) => {
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
try {
|
|
49
|
-
if (!isCopied) {
|
|
50
|
-
await navigator.clipboard.writeText(hash);
|
|
51
|
-
setIsCopied(true);
|
|
52
|
-
onCopy?.();
|
|
53
|
-
timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
catch (error) {
|
|
57
|
-
onError?.(error);
|
|
58
|
-
}
|
|
59
|
-
}, [hash, onCopy, onError, timeout, isCopied]);
|
|
60
|
-
useEffect(() => () => {
|
|
61
|
-
window.clearTimeout(timeoutRef.current);
|
|
62
|
-
}, []);
|
|
42
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({
|
|
43
|
+
text: hash,
|
|
44
|
+
onCopy,
|
|
45
|
+
onError,
|
|
46
|
+
timeout,
|
|
47
|
+
skipWhileCopied: true,
|
|
48
|
+
});
|
|
63
49
|
const Icon = isCopied ? CheckIcon : CopyIcon;
|
|
64
50
|
return (_jsx(Button, { className: cn("size-7 shrink-0", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 14 }) }));
|
|
65
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"environment-variables.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/environment-variables.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"environment-variables.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/environment-variables.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAiB5D,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,4GAOlC,yBAAyB,gCAqB3B,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE7E,eAAO,MAAM,0BAA0B,GAAI,mCAIxC,+BAA+B,gCAIjC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEhF,eAAO,MAAM,yBAAyB,GAAI,mCAIvC,8BAA8B,gCAIhC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAE5E,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,gCAgBjC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE9E,eAAO,MAAM,2BAA2B,GAAI,mCAIzC,gCAAgC,gCAIlC,CAAC;AAYF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3E,eAAO,MAAM,wBAAwB,GAAI,mCAItC,6BAA6B,gCAI/B,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE3E,eAAO,MAAM,uBAAuB,GAAI,mCAIrC,4BAA4B,gCAQ9B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE5E,eAAO,MAAM,wBAAwB,GAAI,mCAItC,6BAA6B,gCAkB/B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,gDAMjC,wBAAwB,gCAoB1B,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC/E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,yEAQ3C,kCAAkC,gCAmBpC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,2BAA2B,GAAI,mCAIzC,gCAAgC,gCAIlC,CAAC"}
|
|
@@ -4,8 +4,9 @@ import { Badge } from "../badge.js";
|
|
|
4
4
|
import { Button } from "../button.js";
|
|
5
5
|
import { Switch } from "../switch.js";
|
|
6
6
|
import { cn } from "../../lib/utils.js";
|
|
7
|
+
import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard.js";
|
|
7
8
|
import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
|
|
8
|
-
import { createContext, useCallback, useContext,
|
|
9
|
+
import { createContext, useCallback, useContext, useMemo, useState } from "react";
|
|
9
10
|
// Default noop for context default value
|
|
10
11
|
// oxlint-disable-next-line eslint(no-empty-function)
|
|
11
12
|
const noop = () => { };
|
|
@@ -50,35 +51,9 @@ export const EnvironmentVariable = ({ name, value, className, children, ...props
|
|
|
50
51
|
return (_jsx(EnvironmentVariableContext.Provider, { value: envVarContextValue, children: _jsx("div", { className: cn("flex items-center justify-between gap-4 px-4 py-3", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(EnvironmentVariableName, {}) }), _jsx(EnvironmentVariableValue, {})] })) }) }));
|
|
51
52
|
};
|
|
52
53
|
export const EnvironmentVariableCopyButton = ({ onCopy, onError, timeout = 2000, copyFormat = "value", children, className, ...props }) => {
|
|
53
|
-
const [isCopied, setIsCopied] = useState(false);
|
|
54
|
-
const timeoutRef = useRef(0);
|
|
55
54
|
const { name, value } = useContext(EnvironmentVariableContext);
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
export: () => `export ${name}="${value}"`,
|
|
59
|
-
name: () => name,
|
|
60
|
-
value: () => value,
|
|
61
|
-
};
|
|
62
|
-
return formatMap[copyFormat]();
|
|
63
|
-
}, [name, value, copyFormat]);
|
|
64
|
-
const copyToClipboard = useCallback(async () => {
|
|
65
|
-
if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
|
|
66
|
-
onError?.(new Error("Clipboard API not available"));
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
try {
|
|
70
|
-
await navigator.clipboard.writeText(getTextToCopy());
|
|
71
|
-
setIsCopied(true);
|
|
72
|
-
onCopy?.();
|
|
73
|
-
timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
|
|
74
|
-
}
|
|
75
|
-
catch (error) {
|
|
76
|
-
onError?.(error);
|
|
77
|
-
}
|
|
78
|
-
}, [getTextToCopy, onCopy, onError, timeout]);
|
|
79
|
-
useEffect(() => () => {
|
|
80
|
-
window.clearTimeout(timeoutRef.current);
|
|
81
|
-
}, []);
|
|
55
|
+
const text = copyFormat === "export" ? `export ${name}="${value}"` : copyFormat === "name" ? name : value;
|
|
56
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({ text, onCopy, onError, timeout });
|
|
82
57
|
const Icon = isCopied ? CheckIcon : CopyIcon;
|
|
83
58
|
return (_jsx(Button, { className: cn("size-6 shrink-0", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 12 }) }));
|
|
84
59
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/snippet.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/snippet.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,0BAA0B,CAAC;AAIlC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW5C,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,yCAAyC,YAAY,gCAU5E,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAEvE,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAAmC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,GAAI,yBAAyB,gBAAgB,gCAEpE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAEnG,eAAO,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,gCAWtE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAC7E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,6DAO/B,sBAAsB,gCAwBxB,CAAC"}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from "../input-group.js";
|
|
4
4
|
import { cn } from "../../lib/utils.js";
|
|
5
|
+
import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard.js";
|
|
5
6
|
import { CheckIcon, CopyIcon } from "lucide-react";
|
|
6
|
-
import { createContext,
|
|
7
|
+
import { createContext, useContext, useMemo } from "react";
|
|
7
8
|
const SnippetContext = createContext({
|
|
8
9
|
code: "",
|
|
9
10
|
});
|
|
@@ -18,29 +19,14 @@ export const SnippetInput = ({ className, ...props }) => {
|
|
|
18
19
|
return (_jsx(InputGroupInput, { className: cn("text-foreground", className), readOnly: true, value: code, ...props }));
|
|
19
20
|
};
|
|
20
21
|
export const SnippetCopyButton = ({ onCopy, onError, timeout = 2000, children, className, ...props }) => {
|
|
21
|
-
const [isCopied, setIsCopied] = useState(false);
|
|
22
|
-
const timeoutRef = useRef(0);
|
|
23
22
|
const { code } = useContext(SnippetContext);
|
|
24
|
-
const copyToClipboard =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
await navigator.clipboard.writeText(code);
|
|
32
|
-
setIsCopied(true);
|
|
33
|
-
onCopy?.();
|
|
34
|
-
timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
catch (error) {
|
|
38
|
-
onError?.(error);
|
|
39
|
-
}
|
|
40
|
-
}, [code, onCopy, onError, timeout, isCopied]);
|
|
41
|
-
useEffect(() => () => {
|
|
42
|
-
window.clearTimeout(timeoutRef.current);
|
|
43
|
-
}, []);
|
|
23
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({
|
|
24
|
+
text: code,
|
|
25
|
+
onCopy,
|
|
26
|
+
onError,
|
|
27
|
+
timeout,
|
|
28
|
+
skipWhileCopied: true,
|
|
29
|
+
});
|
|
44
30
|
const Icon = isCopied ? CheckIcon : CopyIcon;
|
|
45
31
|
return (_jsx(InputGroupButton, { "aria-label": "Copy", className: className, onClick: copyToClipboard, size: "icon-sm", title: "Copy", ...props, children: children ?? _jsx(Icon, { className: "size-3.5", size: 14 }) }));
|
|
46
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack-trace.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/stack-trace.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAe,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"stack-trace.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/stack-trace.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAe,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI/F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAmI5C,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9E,CAAC;AAEF,eAAO,MAAM,UAAU,mIAUlB,eAAe,iCAkCnB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE9E,eAAO,MAAM,gBAAgB,0EAA4C,qBAAqB,iCAqB5F,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEzD,eAAO,MAAM,eAAe,0EAA4C,oBAAoB,iCAK1F,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAE9D,eAAO,MAAM,mBAAmB,0EACM,wBAAwB,iCAS7D,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAEjE,eAAO,MAAM,sBAAsB,0EACG,2BAA2B,iCAShE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAS3D,eAAO,MAAM,iBAAiB,0EACQ,sBAAsB,iCAY3D,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACtE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oGAQ5B,yBAAyB,iCAuB7B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,eAAO,MAAM,sBAAsB,gEACP,2BAA2B,iCActD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qFACyB,sBAAsB,iCAmB5E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAqCF,eAAO,MAAM,gBAAgB,oFAC0B,qBAAqB,iCAyC3E,CAAC"}
|
|
@@ -4,8 +4,9 @@ import { useControllableState } from "../../hooks/use-controllable-state.js";
|
|
|
4
4
|
import { Button } from "../button.js";
|
|
5
5
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible.js";
|
|
6
6
|
import { cn } from "../../lib/utils.js";
|
|
7
|
+
import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard.js";
|
|
7
8
|
import { AlertTriangleIcon, CheckIcon, ChevronDownIcon, CopyIcon } from "lucide-react";
|
|
8
|
-
import { createContext, memo, useCallback, useContext,
|
|
9
|
+
import { createContext, memo, useCallback, useContext, useMemo } from "react";
|
|
9
10
|
// Regex patterns for parsing stack traces
|
|
10
11
|
const STACK_FRAME_WITH_PARENS_REGEX = /^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/;
|
|
11
12
|
const STACK_FRAME_WITHOUT_FN_REGEX = /^at\s+(.+):(\d+):(\d+)$/;
|
|
@@ -134,27 +135,13 @@ export const StackTraceActions = memo(({ className, children, ...props }) => (
|
|
|
134
135
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- The group only intercepts bubbled events from its interactive child controls so the parent stack frame is not activated.
|
|
135
136
|
_jsx("div", { className: cn("flex shrink-0 items-center gap-1", className), onClick: handleActionsClick, onKeyDown: handleActionsKeyDown, role: "group", ...props, children: children })));
|
|
136
137
|
export const StackTraceCopyButton = memo(({ onCopy, onError, timeout = 2000, className, children, ...props }) => {
|
|
137
|
-
const [isCopied, setIsCopied] = useState(false);
|
|
138
|
-
const timeoutRef = useRef(0);
|
|
139
138
|
const { raw } = useStackTrace();
|
|
140
|
-
const copyToClipboard =
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
await navigator.clipboard.writeText(raw);
|
|
147
|
-
setIsCopied(true);
|
|
148
|
-
onCopy?.();
|
|
149
|
-
timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
|
|
150
|
-
}
|
|
151
|
-
catch (error) {
|
|
152
|
-
onError?.(error);
|
|
153
|
-
}
|
|
154
|
-
}, [raw, onCopy, onError, timeout]);
|
|
155
|
-
useEffect(() => () => {
|
|
156
|
-
window.clearTimeout(timeoutRef.current);
|
|
157
|
-
}, []);
|
|
139
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({
|
|
140
|
+
text: raw,
|
|
141
|
+
onCopy,
|
|
142
|
+
onError,
|
|
143
|
+
timeout,
|
|
144
|
+
});
|
|
158
145
|
const Icon = isCopied ? CheckIcon : CopyIcon;
|
|
159
146
|
return (_jsx(Button, { className: cn("size-7", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 14 }) }));
|
|
160
147
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"terminal.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/terminal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"terminal.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/terminal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAgB5D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,cAAc,GAAI,mCAAmC,mBAAmB,gCAUpF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,mCAAmC,kBAAkB,gCAQlF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,cAAc,GAAI,mCAAmC,mBAAmB,uCAepF,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,GAAI,mCAAmC,oBAAoB,gCAItF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,6DAOhC,uBAAuB,gCAyBzB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAErE,eAAO,MAAM,mBAAmB,GAAI,mCAIjC,wBAAwB,uCAqB1B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,GAAI,mCAAmC,oBAAoB,gCA0BtF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,6EAQtB,aAAa,gCAkCf,CAAC"}
|
|
@@ -2,55 +2,42 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Button } from "../button.js";
|
|
4
4
|
import { cn } from "../../lib/utils.js";
|
|
5
|
+
import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard.js";
|
|
5
6
|
import Ansi from "ansi-to-react";
|
|
6
7
|
import { CheckIcon, CopyIcon, TerminalIcon, Trash2Icon } from "lucide-react";
|
|
7
|
-
import { createContext,
|
|
8
|
+
import { createContext, useContext, useEffect, useMemo, useRef } from "react";
|
|
8
9
|
const TerminalContext = createContext({
|
|
9
10
|
autoScroll: true,
|
|
10
11
|
isStreaming: false,
|
|
11
12
|
output: "",
|
|
12
13
|
});
|
|
13
|
-
export const TerminalHeader = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center justify-between border-
|
|
14
|
-
export const TerminalTitle = ({ className, children, ...props }) => (_jsxs("div", { className: cn("flex items-center gap-2 text-sm text-
|
|
14
|
+
export const TerminalHeader = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center justify-between border-[var(--nc-dark-line)] border-b px-4 py-2", className), ...props, children: children }));
|
|
15
|
+
export const TerminalTitle = ({ className, children, ...props }) => (_jsxs("div", { className: cn("flex items-center gap-2 text-sm text-[var(--nc-dark-muted)]", className), ...props, children: [_jsx(TerminalIcon, { className: "size-4" }), children ?? "Terminal"] }));
|
|
15
16
|
export const TerminalStatus = ({ className, children, ...props }) => {
|
|
16
17
|
const { isStreaming } = useContext(TerminalContext);
|
|
17
|
-
if (!isStreaming) {
|
|
18
|
+
if (!isStreaming && children == null) {
|
|
18
19
|
return null;
|
|
19
20
|
}
|
|
20
|
-
return (_jsx("div", { className: cn("flex items-center gap-2 text-xs text-
|
|
21
|
+
return (_jsx("div", { className: cn("flex items-center gap-2 text-xs text-[var(--nc-dark-muted)]", className), ...props, children: children }));
|
|
21
22
|
};
|
|
22
23
|
export const TerminalActions = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1", className), ...props, children: children }));
|
|
23
24
|
export const TerminalCopyButton = ({ onCopy, onError, timeout = 2000, children, className, ...props }) => {
|
|
24
|
-
const [isCopied, setIsCopied] = useState(false);
|
|
25
|
-
const timeoutRef = useRef(0);
|
|
26
25
|
const { output } = useContext(TerminalContext);
|
|
27
|
-
const copyToClipboard =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
await navigator.clipboard.writeText(output);
|
|
34
|
-
setIsCopied(true);
|
|
35
|
-
onCopy?.();
|
|
36
|
-
timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
|
|
37
|
-
}
|
|
38
|
-
catch (error) {
|
|
39
|
-
onError?.(error);
|
|
40
|
-
}
|
|
41
|
-
}, [output, onCopy, onError, timeout]);
|
|
42
|
-
useEffect(() => () => {
|
|
43
|
-
window.clearTimeout(timeoutRef.current);
|
|
44
|
-
}, []);
|
|
26
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({
|
|
27
|
+
text: output,
|
|
28
|
+
onCopy,
|
|
29
|
+
onError,
|
|
30
|
+
timeout,
|
|
31
|
+
});
|
|
45
32
|
const Icon = isCopied ? CheckIcon : CopyIcon;
|
|
46
|
-
return (_jsx(Button, { className: cn("size-7 shrink-0 text-
|
|
33
|
+
return (_jsx(Button, { className: cn("size-7 shrink-0 text-[var(--nc-dark-muted)] hover:bg-[var(--nc-dark-canvas-soft-2)] hover:text-[var(--nc-dark-ink)]", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 14 }) }));
|
|
47
34
|
};
|
|
48
35
|
export const TerminalClearButton = ({ children, className, ...props }) => {
|
|
49
36
|
const { onClear } = useContext(TerminalContext);
|
|
50
37
|
if (!onClear) {
|
|
51
38
|
return null;
|
|
52
39
|
}
|
|
53
|
-
return (_jsx(Button, { className: cn("size-7 shrink-0 text-
|
|
40
|
+
return (_jsx(Button, { className: cn("size-7 shrink-0 text-[var(--nc-dark-muted)] hover:bg-[var(--nc-dark-canvas-soft-2)] hover:text-[var(--nc-dark-ink)]", className), onClick: onClear, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Trash2Icon, { size: 14 }) }));
|
|
54
41
|
};
|
|
55
42
|
export const TerminalContent = ({ className, children, ...props }) => {
|
|
56
43
|
const { output, isStreaming, autoScroll } = useContext(TerminalContext);
|
|
@@ -60,9 +47,9 @@ export const TerminalContent = ({ className, children, ...props }) => {
|
|
|
60
47
|
containerRef.current.scrollTop = containerRef.current.scrollHeight;
|
|
61
48
|
}
|
|
62
49
|
}, [output, autoScroll]);
|
|
63
|
-
return (_jsx("div", { className: cn("max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed", className), ref: containerRef, ...props, children: children ?? (_jsxs("pre", { className: "whitespace-pre-wrap break-words", children: [_jsx(Ansi, { children: output }), isStreaming && (_jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse bg-
|
|
50
|
+
return (_jsx("div", { className: cn("max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed", className), ref: containerRef, ...props, children: children ?? (_jsxs("pre", { className: "whitespace-pre-wrap break-words", children: [_jsx(Ansi, { useClasses: true, children: output }), isStreaming && (_jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse bg-[var(--nc-dark-cyan)]" }))] })) }));
|
|
64
51
|
};
|
|
65
52
|
export const Terminal = ({ output, isStreaming = false, autoScroll = true, onClear, className, children, ...props }) => {
|
|
66
53
|
const contextValue = useMemo(() => ({ autoScroll, isStreaming, onClear, output }), [autoScroll, isStreaming, onClear, output]);
|
|
67
|
-
return (_jsx(TerminalContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("flex flex-col overflow-hidden rounded-lg border bg-
|
|
54
|
+
return (_jsx(TerminalContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "terminal", className: cn("flex flex-col overflow-hidden rounded-lg border border-[var(--nc-dark-line)] bg-[var(--nc-dark-canvas-soft)] text-[var(--nc-dark-ink)] selection:bg-[var(--nc-dark-cyan)] selection:text-[var(--nc-dark-canvas)]", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs(TerminalHeader, { children: [_jsx(TerminalTitle, {}), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TerminalStatus, {}), _jsxs(TerminalActions, { children: [_jsx(TerminalCopyButton, {}), onClear && _jsx(TerminalClearButton, {})] })] })] }), _jsx(TerminalContent, {})] })) }) }));
|
|
68
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAIlF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,qBAEjE;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,qBAE3E;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,qBAEzE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,QAAQ,CAAC,KAAK,qBAQvF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GAAG;IACpC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,qBAgBA;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW9E;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,qBAWzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,qBAW/D;AAID,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,qBAS9D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,qBAS9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
+
import { modalOverlayMotion, overlayBackdropMotion } from "../lib/motion.js";
|
|
5
6
|
import { Button } from "./button.js";
|
|
6
7
|
function AlertDialog({ ...props }) {
|
|
7
8
|
return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
|
|
@@ -13,10 +14,10 @@ function AlertDialogPortal({ ...props }) {
|
|
|
13
14
|
return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
|
|
14
15
|
}
|
|
15
16
|
function AlertDialogOverlay({ className, ...props }) {
|
|
16
|
-
return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim
|
|
17
|
+
return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
|
|
17
18
|
}
|
|
18
19
|
function AlertDialogContent({ className, size = "default", ...props }) {
|
|
19
|
-
return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-2xl border border-border bg-popover p-nadicode-lg text-popover-foreground shadow-dialog
|
|
20
|
+
return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-2xl border border-border bg-popover p-nadicode-lg text-popover-foreground shadow-dialog outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
|
|
20
21
|
}
|
|
21
22
|
function AlertDialogHeader({ className, ...props }) {
|
|
22
23
|
return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"artifact-panel.d.ts","sourceRoot":"","sources":["../../src/components/artifact-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"artifact-panel.d.ts","sourceRoot":"","sources":["../../src/components/artifact-panel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { CodeBlock } from "./ai-elements/code-block.js";
|
|
4
4
|
import { StackTrace, StackTraceContent, StackTraceError, StackTraceErrorMessage, StackTraceErrorType, StackTraceExpandButton, StackTraceFrames, StackTraceHeader, } from "./ai-elements/stack-trace.js";
|
|
5
|
-
import { Terminal, TerminalActions, TerminalContent, TerminalHeader, TerminalTitle, } from "./ai-elements/terminal.js";
|
|
5
|
+
import { Terminal, TerminalActions, TerminalContent, TerminalHeader, TerminalStatus, TerminalTitle, } from "./ai-elements/terminal.js";
|
|
6
6
|
import { Test, TestResults, TestResultsContent, TestResultsDuration, TestResultsHeader, TestResultsProgress, TestResultsSummary, TestSuite, TestSuiteContent, TestSuiteName, TestSuiteStats, } from "./ai-elements/test-results.js";
|
|
7
7
|
import { WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, } from "./ai-elements/web-preview.js";
|
|
8
8
|
import { Badge } from "./badge.js";
|
|
@@ -103,20 +103,20 @@ function TerminalPanel({ transcript, status, renderLimits, className, ...props }
|
|
|
103
103
|
transcript.status ??
|
|
104
104
|
(transcript.redaction ? "redacted" : transcript.isStreaming ? "running" : "idle");
|
|
105
105
|
const isRunning = terminalStatus === "running";
|
|
106
|
-
return (_jsxs("div", { "data-slot": "terminal-panel", className: cn("grid gap-2", className), ...props, children: [output.omitted > 0 && (_jsxs(OverflowSummary, { children: [output.omitted, " earlier terminal characters not shown."] })), _jsxs(Terminal, { output: output.value, isStreaming: isRunning,
|
|
106
|
+
return (_jsxs("div", { "data-slot": "terminal-panel", className: cn("grid gap-2", className), ...props, children: [output.omitted > 0 && (_jsxs(OverflowSummary, { children: [output.omitted, " earlier terminal characters not shown."] })), _jsxs(Terminal, { output: output.value, isStreaming: isRunning, children: [_jsxs(TerminalHeader, { children: [_jsx(TerminalTitle, { children: transcript.title ?? "Terminal" }), _jsx(TerminalActions, { children: _jsx(TerminalStatus, { "data-slot": "terminal-panel-status", "data-terminal-status": terminalStatus, children: artifactStatusLabels[terminalStatus] }) })] }), _jsx(TerminalContent, {})] })] }));
|
|
107
107
|
}
|
|
108
108
|
function PreviewPane({ preview, className, ...props }) {
|
|
109
109
|
return (_jsxs("div", { "data-slot": "preview-pane", className: cn("min-h-64", className), ...props, children: [_jsxs(WebPreview, { defaultUrl: preview.url ?? "", className: "min-h-64", children: [_jsx(WebPreviewNavigation, { children: _jsx(WebPreviewUrl, { "aria-label": preview.title ?? "Preview URL", readOnly: true, value: preview.url ?? "" }) }), _jsx(WebPreviewBody, {}), preview.loadingLabel && _jsx("span", { className: "sr-only", children: preview.loadingLabel })] }), preview.description && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: preview.description }))] }));
|
|
110
110
|
}
|
|
111
111
|
function getDiffLineClass(kind) {
|
|
112
112
|
if (kind === "added") {
|
|
113
|
-
return "bg-[var(--nc-
|
|
113
|
+
return "bg-[var(--nc-link-bg-soft)]";
|
|
114
114
|
}
|
|
115
115
|
if (kind === "removed") {
|
|
116
|
-
return "bg-[var(--nc-
|
|
116
|
+
return "bg-[var(--nc-error-soft)]";
|
|
117
117
|
}
|
|
118
118
|
if (kind === "hunk") {
|
|
119
|
-
return "bg-
|
|
119
|
+
return "bg-accent text-muted-foreground";
|
|
120
120
|
}
|
|
121
121
|
return "bg-background";
|
|
122
122
|
}
|
package/dist/components/badge.js
CHANGED
|
@@ -2,7 +2,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
2
2
|
import { useRender } from "@base-ui/react/use-render";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-
|
|
5
|
+
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none focus-visible:border-ring focus-visible:ring-focus focus-visible:ring-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-focus aria-invalid:ring-destructive [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "bg-primary text-primary-foreground [a]:hover:bg-primary-hover",
|
|
@@ -5,24 +5,35 @@ import * as React from "react";
|
|
|
5
5
|
* This is the reusable shadcn-style source component for bento sections. The
|
|
6
6
|
* grid owns seams once (`gap-px bg-border`, via `SeamGrid` with no `surface`);
|
|
7
7
|
* cells are borderless fills. Pages choose content and spans, not border math.
|
|
8
|
+
*
|
|
9
|
+
* `tone="night"` renders the always-dark V5 bento: rather than a `dark:` utility
|
|
10
|
+
* (forbidden) it sets the `dark` ancestor class on the grid root, so the seam
|
|
11
|
+
* (`bg-border`), the `bg-card` cell fills, and the `BentoIndex`/`BentoTitle`/
|
|
12
|
+
* `BentoBody` roles all resolve to their dark values. Only standard shadcn role
|
|
13
|
+
* utilities are composed. Token-only.
|
|
8
14
|
*/
|
|
9
15
|
declare const spanClasses: Record<number, string>;
|
|
10
16
|
declare const columnClasses: Record<number, string>;
|
|
11
|
-
declare function Bento({ className, height, columns, ...props }: React.ComponentProps<"div"> & {
|
|
17
|
+
declare function Bento({ className, height, columns, tone, ...props }: React.ComponentProps<"div"> & {
|
|
12
18
|
height?: "auto" | "primary" | "secondary";
|
|
13
19
|
columns?: keyof typeof columnClasses;
|
|
20
|
+
tone?: "canvas" | "night";
|
|
14
21
|
}): React.JSX.Element;
|
|
15
|
-
declare function BentoItem({ className, span, surface, flush, stretch, ...props }: React.ComponentProps<"div"> & {
|
|
22
|
+
declare function BentoItem({ className, span, surface, flush, stretch, hover, ...props }: React.ComponentProps<"div"> & {
|
|
16
23
|
span?: keyof typeof spanClasses;
|
|
17
24
|
surface?: "card" | "soft" | "transparent";
|
|
18
25
|
flush?: boolean;
|
|
19
26
|
stretch?: boolean;
|
|
27
|
+
hover?: boolean;
|
|
20
28
|
}): React.JSX.Element;
|
|
29
|
+
declare function BentoIndex({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
30
|
+
declare function BentoTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
|
|
31
|
+
declare function BentoBody({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
21
32
|
declare function BentoCopy({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
22
33
|
declare function BentoMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
23
34
|
declare function BentoDemo({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
24
35
|
declare function BentoDivider({ label, className, ...props }: React.ComponentProps<"div"> & {
|
|
25
36
|
label?: string;
|
|
26
37
|
}): React.JSX.Element;
|
|
27
|
-
export { Bento, BentoItem, BentoCopy, BentoMedia, BentoDemo, BentoDivider };
|
|
38
|
+
export { Bento, BentoItem, BentoIndex, BentoTitle, BentoBody, BentoCopy, BentoMedia, BentoDemo, BentoDivider, };
|
|
28
39
|
//# sourceMappingURL=bento.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bento.d.ts","sourceRoot":"","sources":["../../src/components/bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B
|
|
1
|
+
{"version":3,"file":"bento.d.ts","sourceRoot":"","sources":["../../src/components/bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;GAYG;AAEH,QAAA,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAavC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKzC,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,MAAe,EACf,OAAY,EACZ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B,qBAkBA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,IAAI,EACJ,OAAgB,EAChB,KAAa,EACb,OAAe,EACf,KAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,qBAoBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQtE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAItE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQtE;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,qBAUlD;AAED,OAAO,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,YAAY,GACb,CAAC"}
|
package/dist/components/bento.js
CHANGED
|
@@ -7,6 +7,12 @@ import { SeamGrid } from "./seam-grid.js";
|
|
|
7
7
|
* This is the reusable shadcn-style source component for bento sections. The
|
|
8
8
|
* grid owns seams once (`gap-px bg-border`, via `SeamGrid` with no `surface`);
|
|
9
9
|
* cells are borderless fills. Pages choose content and spans, not border math.
|
|
10
|
+
*
|
|
11
|
+
* `tone="night"` renders the always-dark V5 bento: rather than a `dark:` utility
|
|
12
|
+
* (forbidden) it sets the `dark` ancestor class on the grid root, so the seam
|
|
13
|
+
* (`bg-border`), the `bg-card` cell fills, and the `BentoIndex`/`BentoTitle`/
|
|
14
|
+
* `BentoBody` roles all resolve to their dark values. Only standard shadcn role
|
|
15
|
+
* utilities are composed. Token-only.
|
|
10
16
|
*/
|
|
11
17
|
const spanClasses = {
|
|
12
18
|
1: "lg:col-span-1",
|
|
@@ -28,11 +34,26 @@ const columnClasses = {
|
|
|
28
34
|
4: "grid-cols-1 md:grid-cols-4",
|
|
29
35
|
12: "grid-cols-1 lg:grid-cols-12",
|
|
30
36
|
};
|
|
31
|
-
function Bento({ className, height = "auto", columns = 12, ...props }) {
|
|
32
|
-
return (_jsx(SeamGrid, { "data-slot": "bento", "data-height": height,
|
|
37
|
+
function Bento({ className, height = "auto", columns = 12, tone = "canvas", ...props }) {
|
|
38
|
+
return (_jsx(SeamGrid, { "data-slot": "bento", "data-height": height, "data-tone": tone, className: cn("items-stretch",
|
|
39
|
+
// always-dark V5 bento: flip roles via the ancestor class, not `dark:`.
|
|
40
|
+
tone === "night" && "dark", columnClasses[columns], height === "primary" && "lg:h-[var(--nc-h-bento-primary)]", height === "secondary" && "lg:h-[var(--nc-h-bento-secondary)]", className), ...props }));
|
|
41
|
+
}
|
|
42
|
+
function BentoItem({ className, span, surface = "card", flush = false, stretch = false, hover = false, ...props }) {
|
|
43
|
+
return (_jsx("div", { "data-slot": "bento-item", "data-surface": surface, className: cn("nc-panel-cell relative min-w-0 overflow-hidden", span ? spanClasses[span] : null, surface === "card" && "bg-card",
|
|
44
|
+
// `muted` (== canvas-soft) flips with any `.dark` ancestor.
|
|
45
|
+
surface === "soft" && "bg-muted",
|
|
46
|
+
// V5 hover surface shift: card fill lifts toward the muted role.
|
|
47
|
+
hover && "transition-colors hover:bg-muted", flush && "!p-0", stretch && "items-stretch ![align-content:stretch] ![grid-template-rows:minmax(0,1fr)]", className), ...props }));
|
|
48
|
+
}
|
|
49
|
+
function BentoIndex({ className, ...props }) {
|
|
50
|
+
return (_jsx("span", { "data-slot": "bento-index", className: cn("nc-type-caption-mono text-primary", className), ...props }));
|
|
51
|
+
}
|
|
52
|
+
function BentoTitle({ className, ...props }) {
|
|
53
|
+
return (_jsx("h3", { "data-slot": "bento-title", className: cn("nc-type-body-md-strong text-foreground", className), ...props }));
|
|
33
54
|
}
|
|
34
|
-
function
|
|
35
|
-
return (_jsx("
|
|
55
|
+
function BentoBody({ className, ...props }) {
|
|
56
|
+
return (_jsx("p", { "data-slot": "bento-body", className: cn("nc-type-body-sm text-muted-foreground", className), ...props }));
|
|
36
57
|
}
|
|
37
58
|
function BentoCopy({ className, ...props }) {
|
|
38
59
|
return (_jsx("div", { "data-slot": "bento-copy", className: cn("relative z-10 grid gap-4", className), ...props }));
|
|
@@ -46,4 +67,4 @@ function BentoDemo({ className, ...props }) {
|
|
|
46
67
|
function BentoDivider({ label, className, ...props }) {
|
|
47
68
|
return (_jsx("div", { "data-slot": "bento-divider", className: cn("grid bg-card", className), ...props, children: _jsx("div", { className: "nc-dotted-field grid min-h-[calc(var(--nc-h-bento-strip)*2)] place-items-center bg-card", children: label ? (_jsx("span", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: label })) : null }) }));
|
|
48
69
|
}
|
|
49
|
-
export { Bento, BentoItem, BentoCopy, BentoMedia, BentoDemo, BentoDivider };
|
|
70
|
+
export { Bento, BentoItem, BentoIndex, BentoTitle, BentoBody, BentoCopy, BentoMedia, BentoDemo, BentoDivider, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/components/brand.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/components/brand.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,cAAc,GAAG,IAAI,CACxB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CACnD,GAAG;IACF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;CACpD,CAAC;AA6BF,iBAAS,SAAS,CAAC,EACjB,GAAkB,EAClB,SAAS,EACT,KAAU,EACV,MAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBAyBhB;AAED,iBAAS,aAAa,CAAC,EACrB,GAAkB,EAClB,SAAS,EACT,KAAU,EACV,MAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBAoBhB;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/components/brand.js
CHANGED
|
@@ -1,14 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { logoMarkGeometry, logoWordmarkGeometry, resolveLogoGeometry, } from "@nadicodeai/design-system/assets/logo-geometry";
|
|
4
|
+
import * as React from "react";
|
|
2
5
|
import { cn } from "../lib/utils.js";
|
|
3
6
|
function accessibilityProps(alt) {
|
|
4
7
|
return alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true };
|
|
5
8
|
}
|
|
9
|
+
const reactSvgAttributeNames = {
|
|
10
|
+
"clip-path": "clipPath",
|
|
11
|
+
"stroke-width": "strokeWidth",
|
|
12
|
+
};
|
|
13
|
+
function renderGeometryNodes(nodes) {
|
|
14
|
+
return nodes.map((node, index) => {
|
|
15
|
+
const attributes = Object.fromEntries(Object.entries(node.attributes).map(([name, value]) => [
|
|
16
|
+
reactSvgAttributeNames[name] ?? name,
|
|
17
|
+
value,
|
|
18
|
+
]));
|
|
19
|
+
return React.createElement(node.element, { ...attributes, key: `${node.element}-${index}` }, node.children ? renderGeometryNodes(node.children) : undefined);
|
|
20
|
+
});
|
|
21
|
+
}
|
|
6
22
|
function BrandMark({ alt = "NadicodeAI", className, width = 32, height = 32, decoding, ...props }) {
|
|
7
23
|
void decoding;
|
|
8
|
-
|
|
24
|
+
// The canonical geometry contains a named clip reference. Scope it per
|
|
25
|
+
// instance so nav + footer marks never emit duplicate DOM ids; useId is SSR-safe.
|
|
26
|
+
const idPrefix = `mklip-${React.useId().replace(/[^a-zA-Z0-9]/g, "")}-`;
|
|
27
|
+
const geometry = resolveLogoGeometry(logoMarkGeometry, {
|
|
28
|
+
idPrefix,
|
|
29
|
+
paints: { ink: "currentColor", primary: "var(--primary)" },
|
|
30
|
+
});
|
|
31
|
+
return (_jsx("svg", { "data-slot": "brand-mark", xmlns: "http://www.w3.org/2000/svg", viewBox: geometry.viewBox, width: width, height: height, className: cn("block size-6", className), ...accessibilityProps(alt), ...props, children: renderGeometryNodes(geometry.nodes) }));
|
|
9
32
|
}
|
|
10
33
|
function BrandWordmark({ alt = "NadicodeAI", className, width = 96, height = 30, decoding, ...props }) {
|
|
11
34
|
void decoding;
|
|
12
|
-
|
|
35
|
+
const geometry = resolveLogoGeometry(logoWordmarkGeometry, {
|
|
36
|
+
paints: { ink: "currentColor", primary: "var(--primary)" },
|
|
37
|
+
});
|
|
38
|
+
return (_jsx("svg", { "data-slot": "brand-wordmark", xmlns: "http://www.w3.org/2000/svg", viewBox: geometry.viewBox, width: width, height: height, className: cn("block h-6 w-auto", className), ...accessibilityProps(alt), ...props, children: renderGeometryNodes(geometry.nodes) }));
|
|
13
39
|
}
|
|
14
40
|
export { BrandMark, BrandWordmark };
|