@mastra/playground-ui 53.0.0-alpha.8 → 53.0.0

package/dist/{code-DRGJVroV.js → code-D4Vw_fYq.js}

@@ -1,20 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { h as highlight } from './highlight-CSJjjoqh.js';
+import { useState, useEffect } from 'react';
+import { h as highlight } from './highlight-BmpoELR4.js';
 
-function tokenStyle(token) {
-  if (token.htmlStyle && typeof token.htmlStyle === "object") {
-    return token.htmlStyle;
-  }
-  return token.color ? { color: token.color } : void 0;
-}
-function usableHighlight(highlighted, code, lang) {
-  if (!highlighted || highlighted.lang !== lang) return null;
-  return code.startsWith(highlighted.code) ? highlighted : null;
-}
-const Code = React.memo(function Code2({ code, lang, ...props }) {
-  const [highlighted, setHighlighted] = React.useState(null);
-  React.useEffect(() => {
+function useHighlight(code, lang) {
+  const [highlighted, setHighlighted] = useState(null);
+  useEffect(() => {
     if (!lang) {
       setHighlighted(null);
       return;
@@ -28,6 +19,21 @@ const Code = React.memo(function Code2({ code, lang, ...props }) {
       cancelled = true;
     };
   }, [code, lang]);
+  return highlighted;
+}
+function tokenStyle(token) {
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    return token.htmlStyle;
+  }
+  return token.color ? { color: token.color } : void 0;
+}
+
+function usableHighlight(highlighted, code, lang) {
+  if (!highlighted || highlighted.lang !== lang) return null;
+  return code.startsWith(highlighted.code) ? highlighted : null;
+}
+const Code = React.memo(function Code2({ code, lang, ...props }) {
+  const highlighted = useHighlight(code, lang);
   const usable = usableHighlight(highlighted, code, lang);
   if (!usable) {
     return /* @__PURE__ */ jsx("pre", { ...props, children: code });
@@ -53,5 +59,5 @@ const Code = React.memo(function Code2({ code, lang, ...props }) {
   ] }) });
 });
 
-export { Code as C };
-//# sourceMappingURL=code-DRGJVroV.js.map
+export { Code as C, tokenStyle as t, useHighlight as u };
+//# sourceMappingURL=code-D4Vw_fYq.js.map

package/dist/code-D4Vw_fYq.js.map

@@ -0,0 +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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"}

package/dist/{code-BJMC6T9D.cjs → code-DhrdtZce.cjs}

@@ -2,7 +2,7 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const highlight = require('./highlight-CEt2vhD8.cjs');
+const highlight = require('./highlight-DK1dn-Fh.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,19 +23,9 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-function tokenStyle(token) {
-  if (token.htmlStyle && typeof token.htmlStyle === "object") {
-    return token.htmlStyle;
-  }
-  return token.color ? { color: token.color } : void 0;
-}
-function usableHighlight(highlighted, code, lang) {
-  if (!highlighted || highlighted.lang !== lang) return null;
-  return code.startsWith(highlighted.code) ? highlighted : null;
-}
-const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
-  const [highlighted, setHighlighted] = React__namespace.useState(null);
-  React__namespace.useEffect(() => {
+function useHighlight(code, lang) {
+  const [highlighted, setHighlighted] = React.useState(null);
+  React.useEffect(() => {
     if (!lang) {
       setHighlighted(null);
       return;
@@ -49,6 +39,21 @@ const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
       cancelled = true;
     };
   }, [code, lang]);
+  return highlighted;
+}
+function tokenStyle(token) {
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    return token.htmlStyle;
+  }
+  return token.color ? { color: token.color } : void 0;
+}
+
+function usableHighlight(highlighted, code, lang) {
+  if (!highlighted || highlighted.lang !== lang) return null;
+  return code.startsWith(highlighted.code) ? highlighted : null;
+}
+const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
+  const highlighted = useHighlight(code, lang);
   const usable = usableHighlight(highlighted, code, lang);
   if (!usable) {
     return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children: code });
@@ -75,4 +80,6 @@ const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
 });
 
 exports.Code = Code;
-//# sourceMappingURL=code-BJMC6T9D.cjs.map
+exports.tokenStyle = tokenStyle;
+exports.useHighlight = useHighlight;
+//# sourceMappingURL=code-DhrdtZce.cjs.map

package/dist/code-DhrdtZce.cjs.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,SAAS,YAAA,CAAa,MAAc,IAAA,EAA8C;AACvF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAA6B,IAAI,CAAA;AAEvE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,cAAA,CAAe,IAAI,CAAA;AACnB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAKC,mBAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,aAAa,MAAA,EAAQ,MAAA,iBAAuB,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,CAAA;AAAA,IACzE,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AAAA,IAAC,CAAC,CAAA;AAEjB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,OAAO,WAAA;AACT;AAEO,SAAS,WAAW,KAAA,EAA+C;AACxE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;;ACjCA,SAAS,eAAA,CAAgB,WAAA,EAAiC,IAAA,EAAc,IAAA,EAAmC;AACzG,EAAA,IAAI,CAAC,WAAA,IAAe,WAAA,CAAY,IAAA,KAAS,MAAM,OAAO,IAAA;AACtD,EAAA,OAAO,IAAA,CAAK,UAAA,CAAW,WAAA,CAAY,IAAI,IAAI,WAAA,GAAc,IAAA;AAC3D;AAeO,MAAM,IAAA,GAAOC,gBAAA,CAAM,IAAA,CAAK,SAASC,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,WAAA,GAAc,YAAA,CAAa,IAAA,EAAM,IAAI,CAAA;AAE3C,EAAA,MAAM,MAAA,GAAS,eAAA,CAAgB,WAAA,EAAa,IAAA,EAAM,IAAI,CAAA;AACtD,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,KAAK,MAAM,CAAA;AAC1C,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,0CAAC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AACtC,MAAA,MAAM,UAAA,GAAa,UAAA;AACnB,MAAA,IAAI,WAAA,GAAc,UAAA;AAClB,MAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,QAAA,MAAM,GAAA,GAAM,WAAA;AACZ,QAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,QAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,MAEJ,CAAC,CAAA;AAED,MAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,MAAA,uBACEC,eAAA,CAACH,gBAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,QACjB,SAAA,KAAc,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,OAAA,EAAA,EAFxB,UAGrB,CAAA;AAAA,IAEJ,CAAC,CAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;;;"}

package/dist/{code-block-CBJhDEeB.js → code-block-DeksY23p.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { C as Code } from './code-DRGJVroV.js';
+import { C as Code } from './code-D4Vw_fYq.js';
 import { C as CopyButton } from './copy-button-BHmcGzIz.js';
 import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-AvBDZffY.js';
 import { a as Tabs, T as TabList } from './tabs-root-BnwVjJbD.js';
@@ -83,4 +83,4 @@ function CodeBlock({
 }
 
 export { CodeBlock as C };
-//# sourceMappingURL=code-block-CBJhDEeB.js.map
+//# sourceMappingURL=code-block-DeksY23p.js.map

package/dist/{code-block-CBJhDEeB.js.map → code-block-DeksY23p.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-block-CBJhDEeB.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":"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"}
+{"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":"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"}

package/dist/{code-block-fmv8bHoT.cjs → code-block-DgHrBuR8.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const code = require('./code-BJMC6T9D.cjs');
+const code = require('./code-DhrdtZce.cjs');
 const copyButton = require('./copy-button-BtnbaMvl.cjs');
 const select = require('./select-C_FsCxA5.cjs');
 const tabsRoot = require('./tabs-root-BNcLC-s6.cjs');
@@ -85,4 +85,4 @@ function CodeBlock({
 }
 
 exports.CodeBlock = CodeBlock;
-//# sourceMappingURL=code-block-fmv8bHoT.cjs.map
+//# sourceMappingURL=code-block-DgHrBuR8.cjs.map

package/dist/{code-block-fmv8bHoT.cjs.map → code-block-DgHrBuR8.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"code-block-fmv8bHoT.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":"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"}
+{"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;;;;"}

package/dist/{code-diff-C-EHXZyK.cjs → code-diff-CHZ3P1ky.cjs}

@@ -11,32 +11,43 @@ const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const React = require('react');
 const themeProvider = require('./theme-provider-aO5-jZVp.cjs');
 
+const removed = "var(--accent2)";
+const added = "var(--accent1)";
+const tint = (color, pct) => `color-mix(in oklch, ${color} ${pct}%, transparent)`;
 const diffOverrides = view.EditorView.theme({
-  "&.cm-editor .cm-changedLine": {
-    backgroundColor: "transparent",
-    backgroundImage: "none",
-    borderLeft: "none"
+  "&.cm-editor .cm-line": { lineHeight: "1.5" },
+  "&.cm-editor .cm-gutters": { border: "none", backgroundColor: "transparent" },
+  "&.cm-editor .cm-lineNumbers .cm-gutterElement": { color: "var(--neutral2)", minWidth: "2.5rem" },
+  "&.cm-editor .cm-changeGutter": { width: "3px", paddingLeft: "0" },
+  "&.cm-merge-a .cm-changedLine": {
+    backgroundColor: tint(removed, 14),
+    backgroundImage: "none"
   },
-  "&.cm-editor .cm-changedText": {
-    backgroundImage: "none",
-    backgroundColor: "#880000",
-    padding: "1px 5px",
-    display: "inline-block",
-    borderRadius: "4px"
+  "&.cm-merge-b .cm-changedLine": {
+    backgroundColor: tint(added, 14),
+    backgroundImage: "none"
   },
-  "&.cm-editor .cm-changedText, &.cm-editor .cm-changedText *": {
-    color: "white"
+  "&.cm-merge-a .cm-changedText": {
+    backgroundColor: tint(removed, 35),
+    backgroundImage: "none",
+    borderRadius: "2px"
   },
-  "&.cm-editor .cm-line": {
-    lineHeight: "1.5",
-    opacity: "0.5"
+  "&.cm-merge-b .cm-changedText": {
+    backgroundColor: tint(added, 35),
+    backgroundImage: "none",
+    borderRadius: "2px"
   },
-  "&.cm-editor .cm-line.cm-changedLine": {
-    opacity: "1"
+  "&.cm-merge-a .cm-changedLineGutter": { background: removed },
+  "&.cm-merge-b .cm-changedLineGutter": { background: added },
+  "&.cm-editor .cm-collapsedLines": {
+    backgroundColor: "var(--surface4)",
+    backgroundImage: "none",
+    color: "var(--neutral3)",
+    fontSize: "0.75rem",
+    padding: "4px 12px",
+    cursor: "pointer"
   },
-  "&.cm-editor .cm-gutters": {
-    display: "none"
-  }
+  "&.cm-editor .cm-collapsedLines:hover": { backgroundColor: "var(--surface5)" }
 });
 function buildDiffDarkTheme() {
   return codemirrorThemeDracula.draculaInit({
@@ -91,34 +102,31 @@ function buildDiffLightTheme() {
   ]);
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
+const collapseUnchanged = { margin: 3, minSize: 4 };
 function CodeDiff({ codeA, codeB }) {
   const containerRef = React.useRef(null);
-  const viewRef = React.useRef(null);
   const isDark = themeProvider.useTheme().resolvedTheme === "dark";
   const theme = React.useMemo(() => isDark ? buildDiffDarkTheme() : buildDiffLightTheme(), [isDark]);
   React.useEffect(() => {
-    if (!containerRef.current) return;
-    if (viewRef.current) {
-      viewRef.current.destroy();
-    }
-    const extensions = [langJson.json(), theme, diffOverrides, view.EditorView.lineWrapping, state.EditorState.readOnly.of(true)];
+    const parent = containerRef.current;
+    if (!parent) return;
+    const extensions = [
+      langJson.json(),
+      theme,
+      diffOverrides,
+      view.lineNumbers(),
+      view.EditorView.lineWrapping,
+      state.EditorState.readOnly.of(true)
+    ];
     const mergeView = new merge.MergeView({
-      parent: containerRef.current,
-      a: {
-        doc: codeA,
-        extensions
-      },
-      b: {
-        doc: codeB,
-        extensions
-      },
-      collapseUnchanged: { margin: 3, minSize: 4 }
+      parent,
+      a: { doc: codeA, extensions },
+      b: { doc: codeB, extensions },
+      gutter: true,
+      highlightChanges: true,
+      collapseUnchanged
     });
-    viewRef.current = mergeView;
-    return () => {
-      mergeView.destroy();
-      viewRef.current = null;
-    };
+    return () => mergeView.destroy();
   }, [codeA, codeB, theme]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1 bg-surface3 relative overflow-auto rounded-xl border dark:border-white/10 dark:bg-black/20", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-border1 absolute top-0 left-1/2 z-10 h-full w-px dark:bg-white/10" }),
@@ -126,11 +134,11 @@ function CodeDiff({ codeA, codeB }) {
       "div",
       {
         ref: containerRef,
-        className: "[&_.cm-editor]:bg-transparent [&_.cm-editor]:p-6 [&_.cm-gutters]:bg-transparent [&_.cm-mergeViewEditor]:flex-1"
+        className: "[&_.cm-editor]:bg-transparent [&_.cm-editor]:py-3 [&_.cm-gutters]:bg-transparent [&_.cm-mergeViewEditor]:flex-1"
       }
     )
   ] });
 }
 
 exports.CodeDiff = CodeDiff;
-//# sourceMappingURL=code-diff-C-EHXZyK.cjs.map
+//# sourceMappingURL=code-diff-CHZ3P1ky.cjs.map

package/dist/code-diff-CHZ3P1ky.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-diff-CHZ3P1ky.cjs","sources":["../src/ds/components/CodeDiff/code-diff.tsx"],"sourcesContent":["'use client';\n\nimport { json } from '@codemirror/lang-json';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { MergeView } from '@codemirror/merge';\nimport type { Extension } from '@codemirror/state';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView, lineNumbers } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useTheme } from '@/ds/components/ThemeProvider';\n\nconst removed = 'var(--accent2)';\nconst added = 'var(--accent1)';\nconst tint = (color: string, pct: number) => `color-mix(in oklch, ${color} ${pct}%, transparent)`;\n\n// GitHub-like split diff: red bands for removed lines (left), green bands for\n// added lines (right), with a stronger tint on the exact changed text.\nconst diffOverrides = EditorView.theme({\n  '&.cm-editor .cm-line': { lineHeight: '1.5' },\n  '&.cm-editor .cm-gutters': { border: 'none', backgroundColor: 'transparent' },\n  '&.cm-editor .cm-lineNumbers .cm-gutterElement': { color: 'var(--neutral2)', minWidth: '2.5rem' },\n  '&.cm-editor .cm-changeGutter': { width: '3px', paddingLeft: '0' },\n\n  '&.cm-merge-a .cm-changedLine': {\n    backgroundColor: tint(removed, 14),\n    backgroundImage: 'none',\n  },\n  '&.cm-merge-b .cm-changedLine': {\n    backgroundColor: tint(added, 14),\n    backgroundImage: 'none',\n  },\n  '&.cm-merge-a .cm-changedText': {\n    backgroundColor: tint(removed, 35),\n    backgroundImage: 'none',\n    borderRadius: '2px',\n  },\n  '&.cm-merge-b .cm-changedText': {\n    backgroundColor: tint(added, 35),\n    backgroundImage: 'none',\n    borderRadius: '2px',\n  },\n  '&.cm-merge-a .cm-changedLineGutter': { background: removed },\n  '&.cm-merge-b .cm-changedLineGutter': { background: added },\n\n  '&.cm-editor .cm-collapsedLines': {\n    backgroundColor: 'var(--surface4)',\n    backgroundImage: 'none',\n    color: 'var(--neutral3)',\n    fontSize: '0.75rem',\n    padding: '4px 12px',\n    cursor: 'pointer',\n  },\n  '&.cm-editor .cm-collapsedLines:hover': { backgroundColor: 'var(--surface5)' },\n});\n\nexport interface CodeDiffProps {\n  codeA: string;\n  codeB: string;\n}\n\nfunction buildDiffDarkTheme(): Extension {\n  return draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.8125rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: '#939393',\n      background: 'transparent',\n    },\n    styles: [{ tag: [t.className, t.propertyName] }],\n  });\n}\n\nfunction buildDiffLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.8125rem',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral2)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n    },\n  });\n\n  const highlightStyle = HighlightStyle.define([\n    { tag: [t.comment, t.bracket], color: 'var(--neutral2)' },\n    { tag: [t.string, t.meta, t.regexp], color: 'var(--accent1)' },\n    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--accent6)' },\n    { tag: [t.keyword, t.operator, t.tagName], color: 'var(--accent2)' },\n    { tag: [t.function(t.propertyName), t.propertyName], color: 'var(--accent5)' },\n    {\n      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],\n      color: 'var(--accent3)',\n    },\n    { tag: [t.variableName, t.number], color: 'var(--accent5)' },\n    { tag: [t.name, t.quote], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\nconst collapseUnchanged = { margin: 3, minSize: 4 };\n\nexport function CodeDiff({ codeA, codeB }: CodeDiffProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isDark = useTheme().resolvedTheme === 'dark';\n  const theme = useMemo(() => (isDark ? buildDiffDarkTheme() : buildDiffLightTheme()), [isDark]);\n\n  useEffect(() => {\n    const parent = containerRef.current;\n    if (!parent) return;\n\n    const extensions = [\n      json(),\n      theme,\n      diffOverrides,\n      lineNumbers(),\n      EditorView.lineWrapping,\n      EditorState.readOnly.of(true),\n    ];\n\n    const mergeView = new MergeView({\n      parent,\n      a: { doc: codeA, extensions },\n      b: { doc: codeB, extensions },\n      gutter: true,\n      highlightChanges: true,\n      collapseUnchanged,\n    });\n    return () => mergeView.destroy();\n  }, [codeA, codeB, theme]);\n\n  return (\n    <div className=\"border-border1 bg-surface3 relative overflow-auto rounded-xl border dark:border-white/10 dark:bg-black/20\">\n      <div className=\"bg-border1 absolute top-0 left-1/2 z-10 h-full w-px dark:bg-white/10\" />\n      <div\n        ref={containerRef}\n        className=\"[&_.cm-editor]:bg-transparent [&_.cm-editor]:py-3 [&_.cm-gutters]:bg-transparent [&_.cm-mergeViewEditor]:flex-1\"\n      />\n    </div>\n  );\n}\n"],"names":["EditorView","draculaInit","t","HighlightStyle","syntaxHighlighting","useRef","useTheme","useMemo","useEffect","json","lineNumbers","EditorState","MergeView","jsxs","jsx"],"mappings":"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"}

package/dist/{code-diff-BB4sqHpq.js → code-diff-CIRbnIfl.js}

@@ -3,38 +3,49 @@ import { json } from '@codemirror/lang-json';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { MergeView } from '@codemirror/merge';
 import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import { EditorView, lineNumbers } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import { useRef, useMemo, useEffect } from 'react';
 import { u as useTheme } from './theme-provider-C9ih9jSS.js';
 
+const removed = "var(--accent2)";
+const added = "var(--accent1)";
+const tint = (color, pct) => `color-mix(in oklch, ${color} ${pct}%, transparent)`;
 const diffOverrides = EditorView.theme({
-  "&.cm-editor .cm-changedLine": {
-    backgroundColor: "transparent",
-    backgroundImage: "none",
-    borderLeft: "none"
+  "&.cm-editor .cm-line": { lineHeight: "1.5" },
+  "&.cm-editor .cm-gutters": { border: "none", backgroundColor: "transparent" },
+  "&.cm-editor .cm-lineNumbers .cm-gutterElement": { color: "var(--neutral2)", minWidth: "2.5rem" },
+  "&.cm-editor .cm-changeGutter": { width: "3px", paddingLeft: "0" },
+  "&.cm-merge-a .cm-changedLine": {
+    backgroundColor: tint(removed, 14),
+    backgroundImage: "none"
   },
-  "&.cm-editor .cm-changedText": {
-    backgroundImage: "none",
-    backgroundColor: "#880000",
-    padding: "1px 5px",
-    display: "inline-block",
-    borderRadius: "4px"
+  "&.cm-merge-b .cm-changedLine": {
+    backgroundColor: tint(added, 14),
+    backgroundImage: "none"
   },
-  "&.cm-editor .cm-changedText, &.cm-editor .cm-changedText *": {
-    color: "white"
+  "&.cm-merge-a .cm-changedText": {
+    backgroundColor: tint(removed, 35),
+    backgroundImage: "none",
+    borderRadius: "2px"
   },
-  "&.cm-editor .cm-line": {
-    lineHeight: "1.5",
-    opacity: "0.5"
+  "&.cm-merge-b .cm-changedText": {
+    backgroundColor: tint(added, 35),
+    backgroundImage: "none",
+    borderRadius: "2px"
   },
-  "&.cm-editor .cm-line.cm-changedLine": {
-    opacity: "1"
+  "&.cm-merge-a .cm-changedLineGutter": { background: removed },
+  "&.cm-merge-b .cm-changedLineGutter": { background: added },
+  "&.cm-editor .cm-collapsedLines": {
+    backgroundColor: "var(--surface4)",
+    backgroundImage: "none",
+    color: "var(--neutral3)",
+    fontSize: "0.75rem",
+    padding: "4px 12px",
+    cursor: "pointer"
   },
-  "&.cm-editor .cm-gutters": {
-    display: "none"
-  }
+  "&.cm-editor .cm-collapsedLines:hover": { backgroundColor: "var(--surface5)" }
 });
 function buildDiffDarkTheme() {
   return draculaInit({
@@ -89,34 +100,31 @@ function buildDiffLightTheme() {
   ]);
   return [editorTheme, syntaxHighlighting(highlightStyle)];
 }
+const collapseUnchanged = { margin: 3, minSize: 4 };
 function CodeDiff({ codeA, codeB }) {
   const containerRef = useRef(null);
-  const viewRef = useRef(null);
   const isDark = useTheme().resolvedTheme === "dark";
   const theme = useMemo(() => isDark ? buildDiffDarkTheme() : buildDiffLightTheme(), [isDark]);
   useEffect(() => {
-    if (!containerRef.current) return;
-    if (viewRef.current) {
-      viewRef.current.destroy();
-    }
-    const extensions = [json(), theme, diffOverrides, EditorView.lineWrapping, EditorState.readOnly.of(true)];
+    const parent = containerRef.current;
+    if (!parent) return;
+    const extensions = [
+      json(),
+      theme,
+      diffOverrides,
+      lineNumbers(),
+      EditorView.lineWrapping,
+      EditorState.readOnly.of(true)
+    ];
     const mergeView = new MergeView({
-      parent: containerRef.current,
-      a: {
-        doc: codeA,
-        extensions
-      },
-      b: {
-        doc: codeB,
-        extensions
-      },
-      collapseUnchanged: { margin: 3, minSize: 4 }
+      parent,
+      a: { doc: codeA, extensions },
+      b: { doc: codeB, extensions },
+      gutter: true,
+      highlightChanges: true,
+      collapseUnchanged
     });
-    viewRef.current = mergeView;
-    return () => {
-      mergeView.destroy();
-      viewRef.current = null;
-    };
+    return () => mergeView.destroy();
   }, [codeA, codeB, theme]);
   return /* @__PURE__ */ jsxs("div", { className: "border-border1 bg-surface3 relative overflow-auto rounded-xl border dark:border-white/10 dark:bg-black/20", children: [
     /* @__PURE__ */ jsx("div", { className: "bg-border1 absolute top-0 left-1/2 z-10 h-full w-px dark:bg-white/10" }),
@@ -124,11 +132,11 @@ function CodeDiff({ codeA, codeB }) {
       "div",
       {
         ref: containerRef,
-        className: "[&_.cm-editor]:bg-transparent [&_.cm-editor]:p-6 [&_.cm-gutters]:bg-transparent [&_.cm-mergeViewEditor]:flex-1"
+        className: "[&_.cm-editor]:bg-transparent [&_.cm-editor]:py-3 [&_.cm-gutters]:bg-transparent [&_.cm-mergeViewEditor]:flex-1"
       }
     )
   ] });
 }
 
 export { CodeDiff as C };
-//# sourceMappingURL=code-diff-BB4sqHpq.js.map
+//# sourceMappingURL=code-diff-CIRbnIfl.js.map

package/dist/code-diff-CIRbnIfl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-diff-CIRbnIfl.js","sources":["../src/ds/components/CodeDiff/code-diff.tsx"],"sourcesContent":["'use client';\n\nimport { json } from '@codemirror/lang-json';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { MergeView } from '@codemirror/merge';\nimport type { Extension } from '@codemirror/state';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView, lineNumbers } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useTheme } from '@/ds/components/ThemeProvider';\n\nconst removed = 'var(--accent2)';\nconst added = 'var(--accent1)';\nconst tint = (color: string, pct: number) => `color-mix(in oklch, ${color} ${pct}%, transparent)`;\n\n// GitHub-like split diff: red bands for removed lines (left), green bands for\n// added lines (right), with a stronger tint on the exact changed text.\nconst diffOverrides = EditorView.theme({\n  '&.cm-editor .cm-line': { lineHeight: '1.5' },\n  '&.cm-editor .cm-gutters': { border: 'none', backgroundColor: 'transparent' },\n  '&.cm-editor .cm-lineNumbers .cm-gutterElement': { color: 'var(--neutral2)', minWidth: '2.5rem' },\n  '&.cm-editor .cm-changeGutter': { width: '3px', paddingLeft: '0' },\n\n  '&.cm-merge-a .cm-changedLine': {\n    backgroundColor: tint(removed, 14),\n    backgroundImage: 'none',\n  },\n  '&.cm-merge-b .cm-changedLine': {\n    backgroundColor: tint(added, 14),\n    backgroundImage: 'none',\n  },\n  '&.cm-merge-a .cm-changedText': {\n    backgroundColor: tint(removed, 35),\n    backgroundImage: 'none',\n    borderRadius: '2px',\n  },\n  '&.cm-merge-b .cm-changedText': {\n    backgroundColor: tint(added, 35),\n    backgroundImage: 'none',\n    borderRadius: '2px',\n  },\n  '&.cm-merge-a .cm-changedLineGutter': { background: removed },\n  '&.cm-merge-b .cm-changedLineGutter': { background: added },\n\n  '&.cm-editor .cm-collapsedLines': {\n    backgroundColor: 'var(--surface4)',\n    backgroundImage: 'none',\n    color: 'var(--neutral3)',\n    fontSize: '0.75rem',\n    padding: '4px 12px',\n    cursor: 'pointer',\n  },\n  '&.cm-editor .cm-collapsedLines:hover': { backgroundColor: 'var(--surface5)' },\n});\n\nexport interface CodeDiffProps {\n  codeA: string;\n  codeB: string;\n}\n\nfunction buildDiffDarkTheme(): Extension {\n  return draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.8125rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: '#939393',\n      background: 'transparent',\n    },\n    styles: [{ tag: [t.className, t.propertyName] }],\n  });\n}\n\nfunction buildDiffLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.8125rem',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral2)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n    },\n  });\n\n  const highlightStyle = HighlightStyle.define([\n    { tag: [t.comment, t.bracket], color: 'var(--neutral2)' },\n    { tag: [t.string, t.meta, t.regexp], color: 'var(--accent1)' },\n    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--accent6)' },\n    { tag: [t.keyword, t.operator, t.tagName], color: 'var(--accent2)' },\n    { tag: [t.function(t.propertyName), t.propertyName], color: 'var(--accent5)' },\n    {\n      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],\n      color: 'var(--accent3)',\n    },\n    { tag: [t.variableName, t.number], color: 'var(--accent5)' },\n    { tag: [t.name, t.quote], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\nconst collapseUnchanged = { margin: 3, minSize: 4 };\n\nexport function CodeDiff({ codeA, codeB }: CodeDiffProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isDark = useTheme().resolvedTheme === 'dark';\n  const theme = useMemo(() => (isDark ? buildDiffDarkTheme() : buildDiffLightTheme()), [isDark]);\n\n  useEffect(() => {\n    const parent = containerRef.current;\n    if (!parent) return;\n\n    const extensions = [\n      json(),\n      theme,\n      diffOverrides,\n      lineNumbers(),\n      EditorView.lineWrapping,\n      EditorState.readOnly.of(true),\n    ];\n\n    const mergeView = new MergeView({\n      parent,\n      a: { doc: codeA, extensions },\n      b: { doc: codeB, extensions },\n      gutter: true,\n      highlightChanges: true,\n      collapseUnchanged,\n    });\n    return () => mergeView.destroy();\n  }, [codeA, codeB, theme]);\n\n  return (\n    <div className=\"border-border1 bg-surface3 relative overflow-auto rounded-xl border dark:border-white/10 dark:bg-black/20\">\n      <div className=\"bg-border1 absolute top-0 left-1/2 z-10 h-full w-px dark:bg-white/10\" />\n      <div\n        ref={containerRef}\n        className=\"[&_.cm-editor]:bg-transparent [&_.cm-editor]:py-3 [&_.cm-gutters]:bg-transparent [&_.cm-mergeViewEditor]:flex-1\"\n      />\n    </div>\n  );\n}\n"],"names":["t"],"mappings":"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"}

package/dist/{combobox-BQrlN0eB.cjs → combobox-JNWmgC13.cjs}

@@ -155,7 +155,8 @@ function Combobox(props) {
     onOpenChange,
     container,
     error,
-    allowCustomValue = false
+    allowCustomValue = false,
+    onInputValueChange
   } = props;
   const multiple = isMultipleCombobox(props);
   const [inputValue, setInputValue] = React__namespace.useState("");
@@ -241,11 +242,15 @@ function Combobox(props) {
         items: displayedOptions,
         value: selectedOption,
         inputValue,
-        onInputValueChange: setInputValue,
+        onInputValueChange: (value) => {
+          setInputValue(value);
+          onInputValueChange?.(value);
+        },
         onValueChange: (item) => {
           if (item) {
             props.onValueChange?.(item.value);
             setInputValue("");
+            onInputValueChange?.("");
           }
         },
         disabled,
@@ -260,4 +265,4 @@ function Combobox(props) {
 
 exports.Combobox = Combobox;
 exports.comboboxStyles = comboboxStyles;
-//# sourceMappingURL=combobox-BQrlN0eB.cjs.map
+//# sourceMappingURL=combobox-JNWmgC13.cjs.map