@mastra/playground-ui 53.0.0-alpha.7 → 53.0.0-alpha.9

package/dist/Comment.css

@@ -0,0 +1,37 @@
+/* A comment lands rising from the composer instead of fading in place, on the
+ * same two clocks as the chat composer: the ink settles early while the travel
+ * keeps a decelerating tail.
+ *
+ * `backwards`, not `both`: a settled transform would leave the row a containing
+ * block for the actions it hangs over its own top edge. */
+.mastra-comment-arriving {
+  animation:
+    mastra-comment-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards,
+    mastra-comment-fade 200ms linear backwards;
+}
+
+@keyframes mastra-comment-rise {
+  from {
+    transform: translateY(0.75rem);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mastra-comment-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mastra-comment-arriving {
+    animation: none;
+  }
+}

package/dist/arrival-DRX5Mxhd.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useWatched = require('./use-watched-BixmYWp0.cjs');
+const utils_cn = require('./cn-DCPcv4xv.cjs');
+
+function ArrivalScope({ children }) {
+  const settled = React.useRef(false);
+  React.useEffect(() => {
+    settled.current = true;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(useWatched.SettledContext, { value: settled, children });
+}
+function Arriving({ children, className }) {
+  const arriving = useWatched.useArriving();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(arriving, className), children: /* @__PURE__ */ jsxRuntime.jsx(ArrivalScope, { children }) });
+}
+
+exports.ArrivalScope = ArrivalScope;
+exports.Arriving = Arriving;
+//# sourceMappingURL=arrival-DRX5Mxhd.cjs.map

package/dist/arrival-DRX5Mxhd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrival-DRX5Mxhd.cjs","sources":["../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsx","SettledContext","useArriving","cn"],"mappings":";;;;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAS,EAA4B;AAClE,EAAA,MAAM,OAAA,GAAUA,aAAO,KAAK,CAAA;AAC5B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBAAOC,cAAA,CAACC,yBAAA,EAAA,EAAe,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AACnD;AAGO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,MAAM,WAAWC,sBAAA,EAAY;AAE7B,EAAA,uBACEF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,WAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACpC,QAAA,kBAAAH,cAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAS,CAAA,EAC1B,CAAA;AAEJ;;;;;"}

package/dist/arrival-Dp1nnVVK.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { S as SettledContext, u as useArriving } from './use-watched-CG9KoWl3.js';
+import { c as cn } from './cn-B4oPhFx9.js';
+
+function ArrivalScope({ children }) {
+  const settled = useRef(false);
+  useEffect(() => {
+    settled.current = true;
+  }, []);
+  return /* @__PURE__ */ jsx(SettledContext, { value: settled, children });
+}
+function Arriving({ children, className }) {
+  const arriving = useArriving();
+  return /* @__PURE__ */ jsx("div", { className: cn(arriving, className), children: /* @__PURE__ */ jsx(ArrivalScope, { children }) });
+}
+
+export { ArrivalScope as A, Arriving as a };
+//# sourceMappingURL=arrival-Dp1nnVVK.js.map

package/dist/arrival-Dp1nnVVK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrival-Dp1nnVVK.js","sources":["../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAS,EAA4B;AAClE,EAAA,MAAM,OAAA,GAAU,OAAO,KAAK,CAAA;AAC5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBAAO,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AACnD;AAGO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAS,CAAA,EAC1B,CAAA;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

package/dist/combobox-JNWmgC13.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-JNWmgC13.cjs","sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/combobox.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { buttonVariants } from '../Button/Button';\nimport type { TextButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the same button looks as everywhere,\n * mirroring `SelectTrigger`: `default` (the Button's filled default surface —\n * the default here too), `outline` (bordered, transparent) and `ghost`\n * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  error,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: TextButtonSize;\n  error?: boolean;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`).\n    'w-full min-w-32 justify-between',\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-neutral3',\n    error && 'border-error hover:border-error focus-visible:border-error',\n    className,\n  );\n}\n\nexport const comboboxItemClass = cva(\n  cn(\n    'relative flex cursor-pointer items-center rounded-md select-none',\n    'min-h-8 py-1.5',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n  {\n    variants: {\n      multiple: {\n        false: 'gap-2 pr-2 pl-2.5',\n        true: 'gap-2 pr-2 pl-2.5',\n      },\n    },\n    defaultVariants: {\n      multiple: false,\n    },\n  },\n);\n\nexport const comboboxStyles = {\n  /** Root wrapper */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 opacity-60',\n\n  /** Placeholder text color */\n  placeholder: 'text-neutral3',\n\n  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */\n  popup: cn(\n    'w-max max-w-(--available-width) min-w-(--anchor-width) rounded-xl border border-border1 bg-surface3 text-neutral4',\n    'shadow-dialog',\n    'origin-(--transform-origin)',\n    'transition-[transform,scale,opacity] duration-150 ease-out',\n    'data-starting-style:scale-95 data-starting-style:opacity-0',\n    'data-ending-style:scale-95 data-ending-style:opacity-0',\n  ),\n\n  /** Positioner */\n  positioner: 'z-50 pointer-events-auto',\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: cn('flex items-center border-b border-border1 px-2.5 py-1.5', transitions.colors),\n\n  /** Search icon */\n  searchIcon: cn('mr-2 size-3.5 shrink-0 text-neutral3', transitions.colors),\n\n  /** Search input */\n  searchInput: cn(\n    'flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6',\n    'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n  ),\n\n  /** Empty state */\n  empty: 'not-empty:block hidden py-4 text-center text-ui-smd text-neutral3',\n\n  /** Options list */\n  list: 'max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1',\n\n  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */\n  item: comboboxItemClass({ multiple: false }),\n\n  /** Multi-select item — same item rhythm with a right-aligned selected check. */\n  itemMulti: comboboxItemClass({ multiple: true }),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */\n  checkContainer: 'flex h-4 w-4 shrink-0 items-center justify-center text-neutral6',\n\n  /** Check icon (single select) */\n  checkIcon: 'h-3.5 w-3.5',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-ui-sm text-neutral3 truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** Error message */\n  error: 'text-ui-sm text-accent2',\n} as const;\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxVariant } from './combobox-styles';\n\nexport type ComboboxOption = {\n  label: string;\n  value: string;\n  description?: string;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n};\n\ntype ComboboxSharedProps = {\n  options: ComboboxOption[];\n  placeholder?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  size?: TextButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n  allowCustomValue?: boolean;\n  /** Called with the search input text as it changes (and with `''` after a single-mode selection resets it). */\n  onInputValueChange?: (value: string) => void;\n};\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n};\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n  multiple: true;\n  value?: readonly string[];\n  onValueChange?: (value: string[]) => void;\n};\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nconst EMPTY_VALUES: string[] = [];\nconst EMPTY_OPTIONS: ComboboxOption[] = [];\n\nfunction isMultipleCombobox(props: ComboboxProps): props is ComboboxMultipleProps {\n  return props.multiple === true;\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className={comboboxStyles.optionText}>\n      <span className={comboboxStyles.optionLabel}>{option.label}</span>\n      {option.description && <span className={comboboxStyles.optionDescription}>{option.description}</span>}\n    </span>\n  );\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    placeholder = isMultipleCombobox(props) ? 'Select options...' : 'Select option...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No option found.',\n    className,\n    disabled = false,\n    variant = 'default',\n    size = 'md',\n    open,\n    onOpenChange,\n    container,\n    error,\n    allowCustomValue = false,\n    onInputValueChange,\n  } = props;\n  const multiple = isMultipleCombobox(props);\n  const [inputValue, setInputValue] = React.useState('');\n  const customValue = inputValue.trim();\n  const customOption =\n    !multiple && allowCustomValue && customValue && !options.some(option => option.value === customValue)\n      ? { label: `Use “${customValue}”`, value: customValue }\n      : undefined;\n  const displayedOptions = customOption ? [customOption, ...options] : options;\n  const selectedValues = multiple ? (props.value ?? EMPTY_VALUES) : EMPTY_VALUES;\n  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);\n  const selectedOption = multiple ? null : (options.find(option => option.value === props.value) ?? null);\n  const selectedOptions = multiple ? options.filter(option => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n  // Default to the nearest SideDialog/Drawer popup so the list stays\n  // interactive inside a modal drawer; an explicit `container` still wins.\n  const resolvedContainer = usePortalContainer(container);\n\n  const comboboxContent = (\n    <>\n      <BaseCombobox.Trigger className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}>\n        {multiple ? (\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n        ) : (\n          // Keep truncation off the outer wrapper so start adornments are not clipped.\n          <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {selectedOption?.start}\n            <span className=\"truncate\">\n              <BaseCombobox.Value placeholder={placeholder} />\n            </span>\n          </span>\n        )}\n        {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n            escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={comboboxStyles.chevron} />\n        </span>\n      </BaseCombobox.Trigger>\n\n      <BaseCombobox.Portal container={resolvedContainer}>\n        <BaseCombobox.Positioner\n          align=\"start\"\n          sideOffset={4}\n          positionMethod={FLOATING_POSITION_METHOD}\n          className={comboboxStyles.positioner}\n        >\n          <BaseCombobox.Popup className={comboboxStyles.popup}>\n            <div className={comboboxStyles.searchContainer}>\n              <Search className={comboboxStyles.searchIcon} />\n              <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n            </div>\n            <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n            <BaseCombobox.List className={comboboxStyles.list}>\n              {(option: ComboboxOption) => {\n                const isSelected = selectedValueSet.has(option.value);\n\n                return (\n                  <BaseCombobox.Item key={option.value} value={option} className={comboboxItemClass({ multiple })}>\n                    {multiple ? (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            {isSelected ? <Check className={comboboxStyles.checkIcon} /> : null}\n                          </span>\n                        </span>\n                      </>\n                    ) : (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            <BaseCombobox.ItemIndicator>\n                              <Check className={comboboxStyles.checkIcon} />\n                            </BaseCombobox.ItemIndicator>\n                          </span>\n                        </span>\n                      </>\n                    )}\n                  </BaseCombobox.Item>\n                );\n              }}\n            </BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </>\n  );\n\n  if (multiple) {\n    return (\n      <div className={comboboxStyles.root}>\n        <BaseCombobox.Root\n          multiple\n          autoHighlight\n          items={displayedOptions}\n          value={selectedOptions}\n          onValueChange={items => props.onValueChange?.((items ?? []).map(item => item.value))}\n          disabled={disabled}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          {comboboxContent}\n        </BaseCombobox.Root>\n        {error && <span className={comboboxStyles.error}>{error}</span>}\n      </div>\n    );\n  }\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        autoHighlight\n        items={displayedOptions}\n        value={selectedOption}\n        inputValue={inputValue}\n        onInputValueChange={value => {\n          setInputValue(value);\n          onInputValueChange?.(value);\n        }}\n        onValueChange={item => {\n          if (item) {\n            props.onValueChange?.(item.value);\n            setInputValue('');\n            onInputValueChange?.('');\n          }\n        }}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        {comboboxContent}\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["cn","buttonVariants","controlTriggerOpenState","cva","transitions","jsxs","jsx","React","usePortalContainer","Fragment","BaseCombobox","ChevronsUpDown","FLOATING_POSITION_METHOD","Search","Check"],"mappings":"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"}

package/dist/{combobox-DeeAlYti.js → combobox-nxjXzRWu.js}

@@ -134,7 +134,8 @@ function Combobox(props) {
     onOpenChange,
     container,
     error,
-    allowCustomValue = false
+    allowCustomValue = false,
+    onInputValueChange
   } = props;
   const multiple = isMultipleCombobox(props);
   const [inputValue, setInputValue] = React.useState("");
@@ -220,11 +221,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,
@@ -238,4 +243,4 @@ function Combobox(props) {
 }
 
 export { Combobox as C, comboboxStyles as c };
-//# sourceMappingURL=combobox-DeeAlYti.js.map
+//# sourceMappingURL=combobox-nxjXzRWu.js.map

package/dist/combobox-nxjXzRWu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-nxjXzRWu.js","sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/combobox.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { buttonVariants } from '../Button/Button';\nimport type { TextButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the same button looks as everywhere,\n * mirroring `SelectTrigger`: `default` (the Button's filled default surface —\n * the default here too), `outline` (bordered, transparent) and `ghost`\n * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  error,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: TextButtonSize;\n  error?: boolean;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`).\n    'w-full min-w-32 justify-between',\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-neutral3',\n    error && 'border-error hover:border-error focus-visible:border-error',\n    className,\n  );\n}\n\nexport const comboboxItemClass = cva(\n  cn(\n    'relative flex cursor-pointer items-center rounded-md select-none',\n    'min-h-8 py-1.5',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n  {\n    variants: {\n      multiple: {\n        false: 'gap-2 pr-2 pl-2.5',\n        true: 'gap-2 pr-2 pl-2.5',\n      },\n    },\n    defaultVariants: {\n      multiple: false,\n    },\n  },\n);\n\nexport const comboboxStyles = {\n  /** Root wrapper */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 opacity-60',\n\n  /** Placeholder text color */\n  placeholder: 'text-neutral3',\n\n  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */\n  popup: cn(\n    'w-max max-w-(--available-width) min-w-(--anchor-width) rounded-xl border border-border1 bg-surface3 text-neutral4',\n    'shadow-dialog',\n    'origin-(--transform-origin)',\n    'transition-[transform,scale,opacity] duration-150 ease-out',\n    'data-starting-style:scale-95 data-starting-style:opacity-0',\n    'data-ending-style:scale-95 data-ending-style:opacity-0',\n  ),\n\n  /** Positioner */\n  positioner: 'z-50 pointer-events-auto',\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: cn('flex items-center border-b border-border1 px-2.5 py-1.5', transitions.colors),\n\n  /** Search icon */\n  searchIcon: cn('mr-2 size-3.5 shrink-0 text-neutral3', transitions.colors),\n\n  /** Search input */\n  searchInput: cn(\n    'flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6',\n    'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n  ),\n\n  /** Empty state */\n  empty: 'not-empty:block hidden py-4 text-center text-ui-smd text-neutral3',\n\n  /** Options list */\n  list: 'max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1',\n\n  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */\n  item: comboboxItemClass({ multiple: false }),\n\n  /** Multi-select item — same item rhythm with a right-aligned selected check. */\n  itemMulti: comboboxItemClass({ multiple: true }),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */\n  checkContainer: 'flex h-4 w-4 shrink-0 items-center justify-center text-neutral6',\n\n  /** Check icon (single select) */\n  checkIcon: 'h-3.5 w-3.5',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-ui-sm text-neutral3 truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** Error message */\n  error: 'text-ui-sm text-accent2',\n} as const;\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxVariant } from './combobox-styles';\n\nexport type ComboboxOption = {\n  label: string;\n  value: string;\n  description?: string;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n};\n\ntype ComboboxSharedProps = {\n  options: ComboboxOption[];\n  placeholder?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  size?: TextButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n  allowCustomValue?: boolean;\n  /** Called with the search input text as it changes (and with `''` after a single-mode selection resets it). */\n  onInputValueChange?: (value: string) => void;\n};\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n};\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n  multiple: true;\n  value?: readonly string[];\n  onValueChange?: (value: string[]) => void;\n};\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nconst EMPTY_VALUES: string[] = [];\nconst EMPTY_OPTIONS: ComboboxOption[] = [];\n\nfunction isMultipleCombobox(props: ComboboxProps): props is ComboboxMultipleProps {\n  return props.multiple === true;\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className={comboboxStyles.optionText}>\n      <span className={comboboxStyles.optionLabel}>{option.label}</span>\n      {option.description && <span className={comboboxStyles.optionDescription}>{option.description}</span>}\n    </span>\n  );\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    placeholder = isMultipleCombobox(props) ? 'Select options...' : 'Select option...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No option found.',\n    className,\n    disabled = false,\n    variant = 'default',\n    size = 'md',\n    open,\n    onOpenChange,\n    container,\n    error,\n    allowCustomValue = false,\n    onInputValueChange,\n  } = props;\n  const multiple = isMultipleCombobox(props);\n  const [inputValue, setInputValue] = React.useState('');\n  const customValue = inputValue.trim();\n  const customOption =\n    !multiple && allowCustomValue && customValue && !options.some(option => option.value === customValue)\n      ? { label: `Use “${customValue}”`, value: customValue }\n      : undefined;\n  const displayedOptions = customOption ? [customOption, ...options] : options;\n  const selectedValues = multiple ? (props.value ?? EMPTY_VALUES) : EMPTY_VALUES;\n  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);\n  const selectedOption = multiple ? null : (options.find(option => option.value === props.value) ?? null);\n  const selectedOptions = multiple ? options.filter(option => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n  // Default to the nearest SideDialog/Drawer popup so the list stays\n  // interactive inside a modal drawer; an explicit `container` still wins.\n  const resolvedContainer = usePortalContainer(container);\n\n  const comboboxContent = (\n    <>\n      <BaseCombobox.Trigger className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}>\n        {multiple ? (\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n        ) : (\n          // Keep truncation off the outer wrapper so start adornments are not clipped.\n          <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {selectedOption?.start}\n            <span className=\"truncate\">\n              <BaseCombobox.Value placeholder={placeholder} />\n            </span>\n          </span>\n        )}\n        {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n            escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={comboboxStyles.chevron} />\n        </span>\n      </BaseCombobox.Trigger>\n\n      <BaseCombobox.Portal container={resolvedContainer}>\n        <BaseCombobox.Positioner\n          align=\"start\"\n          sideOffset={4}\n          positionMethod={FLOATING_POSITION_METHOD}\n          className={comboboxStyles.positioner}\n        >\n          <BaseCombobox.Popup className={comboboxStyles.popup}>\n            <div className={comboboxStyles.searchContainer}>\n              <Search className={comboboxStyles.searchIcon} />\n              <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n            </div>\n            <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n            <BaseCombobox.List className={comboboxStyles.list}>\n              {(option: ComboboxOption) => {\n                const isSelected = selectedValueSet.has(option.value);\n\n                return (\n                  <BaseCombobox.Item key={option.value} value={option} className={comboboxItemClass({ multiple })}>\n                    {multiple ? (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            {isSelected ? <Check className={comboboxStyles.checkIcon} /> : null}\n                          </span>\n                        </span>\n                      </>\n                    ) : (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            <BaseCombobox.ItemIndicator>\n                              <Check className={comboboxStyles.checkIcon} />\n                            </BaseCombobox.ItemIndicator>\n                          </span>\n                        </span>\n                      </>\n                    )}\n                  </BaseCombobox.Item>\n                );\n              }}\n            </BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </>\n  );\n\n  if (multiple) {\n    return (\n      <div className={comboboxStyles.root}>\n        <BaseCombobox.Root\n          multiple\n          autoHighlight\n          items={displayedOptions}\n          value={selectedOptions}\n          onValueChange={items => props.onValueChange?.((items ?? []).map(item => item.value))}\n          disabled={disabled}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          {comboboxContent}\n        </BaseCombobox.Root>\n        {error && <span className={comboboxStyles.error}>{error}</span>}\n      </div>\n    );\n  }\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        autoHighlight\n        items={displayedOptions}\n        value={selectedOption}\n        inputValue={inputValue}\n        onInputValueChange={value => {\n          setInputValue(value);\n          onInputValueChange?.(value);\n        }}\n        onValueChange={item => {\n          if (item) {\n            props.onValueChange?.(item.value);\n            setInputValue('');\n            onInputValueChange?.('');\n          }\n        }}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        {comboboxContent}\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["BaseCombobox"],"mappings":"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"}

package/dist/components/Arrival.cjs.js

@@ -2,25 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
+const arrival = require('../arrival-DRX5Mxhd.cjs');
 const useWatched = require('../use-watched-BixmYWp0.cjs');
-const utils_cn = require('../cn-DCPcv4xv.cjs');
 
-function ArrivalScope({ children }) {
-  const settled = React.useRef(false);
-  React.useEffect(() => {
-    settled.current = true;
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(useWatched.SettledContext, { value: settled, children });
-}
-function Arriving({ children, className }) {
-  const arriving = useWatched.useArriving();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(arriving, className), children: /* @__PURE__ */ jsxRuntime.jsx(ArrivalScope, { children }) });
-}
 
+
+exports.ArrivalScope = arrival.ArrivalScope;
+exports.Arriving = arrival.Arriving;
 exports.useArriving = useWatched.useArriving;
 exports.useWatched = useWatched.useWatched;
-exports.ArrivalScope = ArrivalScope;
-exports.Arriving = Arriving;
 //# sourceMappingURL=Arrival.cjs.js.map