@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/code-editor-XAfFI9V8.js

@@ -0,0 +1,438 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsonLanguage } from '@codemirror/lang-json';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { LanguageDescription, LanguageSupport, StreamLanguage, HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { ViewPlugin, MatchDecorator, Decoration, EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { draculaInit } from '@uiw/codemirror-theme-dracula';
+import ReactCodeMirror from '@uiw/react-codemirror';
+import { forwardRef, useMemo } from 'react';
+import { autocompletion } from '@codemirror/autocomplete';
+import { C as CopyButton } from './copy-button-DDKn1NUS.js';
+import { u as useTheme } from './theme-provider-C9ih9jSS.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function legacy(parser) {
+  return new LanguageSupport(StreamLanguage.define(parser));
+}
+const codeLanguages = [
+  LanguageDescription.of({
+    name: "JavaScript",
+    alias: ["ecmascript", "js", "node"],
+    extensions: ["js", "mjs", "cjs"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript());
+    }
+  }),
+  LanguageDescription.of({
+    name: "JSON",
+    alias: ["json5"],
+    extensions: ["json", "map"],
+    load() {
+      return import('@codemirror/lang-json').then((m) => m.json());
+    }
+  }),
+  LanguageDescription.of({
+    name: "JSX",
+    extensions: ["jsx"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true }));
+    }
+  }),
+  LanguageDescription.of({
+    name: "Markdown",
+    extensions: ["md", "markdown", "mkd"],
+    load() {
+      return import('@codemirror/lang-markdown').then((m) => m.markdown());
+    }
+  }),
+  LanguageDescription.of({
+    name: "TSX",
+    extensions: ["tsx"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true, typescript: true }));
+    }
+  }),
+  LanguageDescription.of({
+    name: "TypeScript",
+    alias: ["ts"],
+    extensions: ["ts", "mts", "cts"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true }));
+    }
+  }),
+  LanguageDescription.of({
+    name: "Shell",
+    alias: ["bash", "sh", "zsh"],
+    extensions: ["sh", "ksh", "bash"],
+    filename: /^PKGBUILD$/,
+    load() {
+      return import('@codemirror/legacy-modes/mode/shell').then((m) => legacy(m.shell));
+    }
+  })
+];
+
+function flattenSchemaToVariables(schema, maxDepth = 5) {
+  if (!schema?.properties) {
+    return [];
+  }
+  const results = [];
+  function processProperty(property, path, depth) {
+    if (depth > maxDepth) {
+      return;
+    }
+    const type = Array.isArray(property.type) ? property.type.join(" | ") : property.type;
+    results.push({
+      path,
+      label: path,
+      description: property.description ?? property.title,
+      type
+    });
+    if (property.properties) {
+      for (const [key, nestedProperty] of Object.entries(property.properties)) {
+        processProperty(nestedProperty, `${path}.${key}`, depth + 1);
+      }
+    }
+    if (property.items?.properties) {
+      for (const [key, itemProperty] of Object.entries(property.items.properties)) {
+        processProperty(itemProperty, `${path}[].${key}`, depth + 1);
+      }
+    }
+  }
+  for (const [key, property] of Object.entries(schema.properties)) {
+    processProperty(property, key, 1);
+  }
+  return results;
+}
+
+function createVariableAutocomplete(schema) {
+  const variables = flattenSchemaToVariables(schema);
+  return autocompletion({
+    override: [createVariableCompletionSource(variables)],
+    defaultKeymap: true,
+    closeOnBlur: true,
+    icons: false
+  });
+}
+function createVariableCompletionSource(variables) {
+  return (context) => {
+    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);
+    const match = beforeCursor.match(/\{\{([a-zA-Z0-9_.\[\]]*)?$/);
+    if (!match) {
+      return null;
+    }
+    const prefix = match[1] ?? "";
+    const startPos = context.pos - prefix.length;
+    const filteredVariables = prefix ? variables.filter((v) => v.path.toLowerCase().startsWith(prefix.toLowerCase())) : variables;
+    if (filteredVariables.length === 0) {
+      return null;
+    }
+    const completions = filteredVariables.map((variable) => ({
+      label: variable.path,
+      displayLabel: variable.path,
+      detail: variable.type,
+      info: variable.description,
+      apply: (view, completion, from, to) => {
+        const afterCursor = view.state.sliceDoc(to, to + 2);
+        const hasClosingBraces = afterCursor === "}}";
+        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;
+        view.dispatch({
+          changes: { from, to, insert: insertText },
+          selection: { anchor: from + insertText.length }
+        });
+      }
+    }));
+    return {
+      from: startPos,
+      options: completions,
+      validFor: /^[a-zA-Z0-9_.\[\]]*$/
+    };
+  };
+}
+
+const VARIABLE_PATTERN = /\{\{([a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\}\}/g;
+const variableDecoration = Decoration.mark({
+  class: "cm-variable-highlight"
+});
+const variableMatcher = new MatchDecorator({
+  regexp: VARIABLE_PATTERN,
+  decoration: () => variableDecoration
+});
+const variableHighlightPlugin = ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = variableMatcher.createDeco(view);
+    }
+    update(update) {
+      this.decorations = variableMatcher.updateDeco(update, this.decorations);
+    }
+  },
+  {
+    decorations: (v) => v.decorations
+  }
+);
+const variableHighlight = variableHighlightPlugin;
+
+function buildDarkTheme() {
+  const baseTheme = draculaInit({
+    settings: {
+      fontFamily: "var(--font-mono)",
+      fontSize: "0.8rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "var(--neutral2)",
+      background: "transparent",
+      foreground: "var(--neutral6)",
+      caret: "var(--neutral6)"
+    },
+    styles: [
+      { tag: [tags.className, tags.propertyName], color: "var(--neutral6)" },
+      { tag: tags.heading, color: "var(--accent3)", fontWeight: "bold" },
+      {
+        tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
+        color: "var(--accent3)",
+        fontWeight: "bold"
+      },
+      { tag: tags.emphasis, fontStyle: "italic", color: "var(--neutral6)" },
+      { tag: tags.strong, fontWeight: "bold", color: "var(--neutral6)" },
+      { tag: tags.link, color: "var(--accent3)", textDecoration: "underline" },
+      { tag: tags.url, color: "var(--accent3)" },
+      { tag: tags.monospace, color: "var(--neutral6)" },
+      { tag: tags.strikethrough, textDecoration: "line-through" },
+      { tag: tags.quote, fontStyle: "italic", color: "var(--neutral2)" }
+    ]
+  });
+  const customLineNumberTheme = EditorView.theme({
+    ".cm-editor": {
+      backgroundColor: "transparent"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+      color: "var(--neutral2)"
+    },
+    ".cm-activeLineGutter": {
+      color: "var(--neutral3)"
+    },
+    ".cm-cursor": {
+      borderLeftColor: "var(--neutral6)"
+    },
+    ".cm-selectionBackground, .cm-content ::selection": {
+      backgroundColor: "color-mix(in srgb, var(--accent3) 22%, transparent)"
+    },
+    ".cm-tooltip-autocomplete": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      borderRadius: "6px",
+      boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)"
+    },
+    ".cm-tooltip-autocomplete > ul": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-completionLabel": {
+      color: "var(--neutral6)"
+    },
+    ".cm-completionDetail": {
+      color: "var(--neutral3)",
+      fontSize: "0.7rem",
+      marginLeft: "auto",
+      paddingLeft: "12px"
+    },
+    ".cm-completionInfo": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      color: "var(--neutral3)",
+      padding: "8px 12px"
+    },
+    ".cm-completionIcon": {
+      display: "none"
+    },
+    "ul.cm-completionList li[aria-selected]": {
+      backgroundColor: "var(--surface4)",
+      color: "var(--neutral6)"
+    },
+    ".cm-line .cm-variable-highlight": {
+      color: "var(--accent6) !important",
+      fontWeight: "500"
+    }
+  });
+  return [baseTheme, customLineNumberTheme];
+}
+function buildLightTheme() {
+  const editorTheme = EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.8rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+      color: "var(--neutral2)"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent",
+      color: "var(--neutral3)"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--neutral6)"
+    },
+    "&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": {
+      background: "color-mix(in srgb, var(--accent3) 22%, transparent) !important"
+    },
+    ".cm-tooltip-autocomplete": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      borderRadius: "6px",
+      boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)"
+    },
+    ".cm-tooltip-autocomplete > ul": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-completionLabel": {
+      color: "var(--neutral6)"
+    },
+    ".cm-completionDetail": {
+      color: "var(--neutral3)",
+      fontSize: "0.7rem",
+      marginLeft: "auto",
+      paddingLeft: "12px"
+    },
+    ".cm-completionInfo": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      color: "var(--neutral3)",
+      padding: "8px 12px"
+    },
+    ".cm-completionIcon": {
+      display: "none"
+    },
+    "ul.cm-completionList li[aria-selected]": {
+      backgroundColor: "var(--surface4)",
+      color: "var(--neutral6)"
+    },
+    ".cm-line .cm-variable-highlight": {
+      color: "var(--accent6) !important",
+      fontWeight: "500"
+    }
+  });
+  const highlightStyle = HighlightStyle.define([
+    { tag: [tags.comment, tags.bracket], color: "var(--neutral2)" },
+    { tag: [tags.string, tags.meta, tags.regexp], color: "var(--accent1)" },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "var(--accent6)" },
+    { tag: [tags.keyword, tags.operator, tags.tagName], color: "var(--accent2)" },
+    { tag: [tags.function(tags.propertyName), tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [tags.variableName, tags.number], color: "var(--accent5)" },
+    { tag: [tags.name, tags.quote], color: "var(--accent1)" },
+    { tag: tags.heading, color: "var(--accent3)", fontWeight: "bold" },
+    {
+      tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
+      color: "var(--accent3)",
+      fontWeight: "bold"
+    },
+    { tag: [tags.emphasis], fontStyle: "italic", color: "var(--neutral6)" },
+    { tag: [tags.strong], fontWeight: "bold", color: "var(--neutral6)" },
+    { tag: tags.link, color: "var(--accent3)", textDecoration: "underline" },
+    { tag: tags.url, color: "var(--accent3)" },
+    { tag: tags.monospace, color: "var(--neutral6)" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: [tags.deleted], color: "var(--accent2)" },
+    { tag: tags.invalid, color: "var(--error)" },
+    { tag: [tags.standard(tags.tagName)], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, syntaxHighlighting(highlightStyle)];
+}
+const useCodemirrorTheme = () => {
+  const isDark = useTheme().resolvedTheme === "dark";
+  return useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+};
+const CodeEditor = forwardRef(
+  ({
+    data,
+    value,
+    onChange,
+    showCopyButton = true,
+    className,
+    language = "json",
+    highlightVariables = false,
+    placeholder,
+    schema,
+    autoFocus,
+    lineNumbers = true,
+    editable,
+    ...props
+  }, ref) => {
+    const theme = useCodemirrorTheme();
+    const formattedCode = data ? JSON.stringify(data, null, 2) : value ?? "";
+    const extensions = useMemo(() => {
+      const exts = [];
+      if (language === "json") {
+        exts.push(jsonLanguage);
+      } else if (language === "markdown") {
+        exts.push(markdown({ base: markdownLanguage, codeLanguages }));
+        exts.push(EditorView.lineWrapping);
+      }
+      if (highlightVariables && language === "markdown") {
+        exts.push(variableHighlight);
+      }
+      if (schema && language === "markdown") {
+        exts.push(createVariableAutocomplete(schema));
+      }
+      if (editable === false) {
+        exts.push(EditorState.readOnly.of(true));
+      }
+      return exts;
+    }, [language, highlightVariables, schema, editable]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("rounded-md bg-surface3 p-1 font-mono relative border border-border1 overflow-hidden", className),
+        ...props,
+        children: [
+          showCopyButton && /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
+          /* @__PURE__ */ jsx(
+            ReactCodeMirror,
+            {
+              ref,
+              value: formattedCode,
+              theme,
+              extensions,
+              onChange,
+              editable,
+              "aria-label": "Code editor",
+              placeholder,
+              height: "100%",
+              style: { height: "100%" },
+              autoFocus,
+              basicSetup: { lineNumbers }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { CodeEditor as C, VARIABLE_PATTERN as V, createVariableAutocomplete as a, codeLanguages as c, flattenSchemaToVariables as f, useCodemirrorTheme as u, variableHighlight as v };
+//# sourceMappingURL=code-editor-XAfFI9V8.js.map

package/dist/code-editor-XAfFI9V8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-XAfFI9V8.js","sources":["../src/ds/components/CodeEditor/code-languages.ts","../src/ds/components/CodeEditor/schema-to-variables.ts","../src/ds/components/CodeEditor/variable-autocomplete-extension.ts","../src/ds/components/CodeEditor/variable-highlight-extension.ts","../src/ds/components/CodeEditor/code-editor.tsx"],"sourcesContent":["import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';\n\nfunction legacy(parser: Parameters<typeof StreamLanguage.define>[0]) {\n  return new LanguageSupport(StreamLanguage.define(parser));\n}\n\n/**\n * A minimal subset of CodeMirror language descriptions used for fenced code\n * blocks inside markdown. Mirrors the relevant entries from\n * `@codemirror/language-data` but only the languages we actually support, so\n * bundlers don't have to emit a chunk for every known language.\n */\nexport const codeLanguages = [\n  LanguageDescription.of({\n    name: 'JavaScript',\n    alias: ['ecmascript', 'js', 'node'],\n    extensions: ['js', 'mjs', 'cjs'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'JSON',\n    alias: ['json5'],\n    extensions: ['json', 'map'],\n    load() {\n      return import('@codemirror/lang-json').then(m => m.json());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'JSX',\n    extensions: ['jsx'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'Markdown',\n    extensions: ['md', 'markdown', 'mkd'],\n    load() {\n      return import('@codemirror/lang-markdown').then(m => m.markdown());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'TSX',\n    extensions: ['tsx'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true, typescript: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'TypeScript',\n    alias: ['ts'],\n    extensions: ['ts', 'mts', 'cts'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ typescript: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'Shell',\n    alias: ['bash', 'sh', 'zsh'],\n    extensions: ['sh', 'ksh', 'bash'],\n    filename: /^PKGBUILD$/,\n    load() {\n      return import('@codemirror/legacy-modes/mode/shell').then(m => legacy(m.shell));\n    },\n  }),\n];\n","import type { JsonSchema, JsonSchemaProperty } from '@/lib/json-schema';\n\n/**\n * Represents a variable completion option derived from a schema\n */\nexport interface VariableCompletion {\n  /** The dot-notation path (e.g., \"user.name\") */\n  path: string;\n  /** Display label for the autocomplete */\n  label: string;\n  /** Description from the schema, if available */\n  description?: string;\n  /** The type of the property */\n  type?: string;\n}\n\n/**\n * Flattens a JSON Schema into a list of variable completions for autocomplete.\n * Recursively extracts property paths using dot-notation.\n *\n * @param schema - The JSON Schema to flatten\n * @param maxDepth - Maximum recursion depth (default: 5)\n * @returns Array of variable completions\n *\n * @example\n * ```ts\n * const schema = {\n *   type: 'object',\n *   properties: {\n *     user: {\n *       type: 'object',\n *       properties: {\n *         name: { type: 'string' },\n *         email: { type: 'string' }\n *       }\n *     }\n *   }\n * };\n *\n * flattenSchemaToVariables(schema);\n * // Returns:\n * // [\n * //   { path: 'user', label: 'user', type: 'object' },\n * //   { path: 'user.name', label: 'user.name', type: 'string' },\n * //   { path: 'user.email', label: 'user.email', type: 'string' }\n * // ]\n * ```\n */\nexport function flattenSchemaToVariables(schema: JsonSchema | undefined, maxDepth = 5): VariableCompletion[] {\n  if (!schema?.properties) {\n    return [];\n  }\n\n  const results: VariableCompletion[] = [];\n\n  function processProperty(property: JsonSchemaProperty, path: string, depth: number): void {\n    if (depth > maxDepth) {\n      return;\n    }\n\n    const type = Array.isArray(property.type) ? property.type.join(' | ') : property.type;\n\n    results.push({\n      path,\n      label: path,\n      description: property.description ?? property.title,\n      type,\n    });\n\n    // Recurse into nested object properties\n    if (property.properties) {\n      for (const [key, nestedProperty] of Object.entries(property.properties)) {\n        processProperty(nestedProperty, `${path}.${key}`, depth + 1);\n      }\n    }\n\n    // Handle array items if they have properties (array of objects)\n    if (property.items?.properties) {\n      // Add a placeholder for array item access (e.g., items[0].name)\n      for (const [key, itemProperty] of Object.entries(property.items.properties)) {\n        processProperty(itemProperty, `${path}[].${key}`, depth + 1);\n      }\n    }\n  }\n\n  for (const [key, property] of Object.entries(schema.properties)) {\n    processProperty(property, key, 1);\n  }\n\n  return results;\n}\n","import { autocompletion } from '@codemirror/autocomplete';\nimport type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';\nimport type { Extension } from '@codemirror/state';\nimport { flattenSchemaToVariables } from './schema-to-variables';\nimport type { VariableCompletion } from './schema-to-variables';\nimport type { JsonSchema } from '@/lib/json-schema';\n\n/**\n * Creates a CodeMirror autocomplete extension for {{variable}} placeholders.\n * Triggers when the user types `{{` and shows suggestions derived from the schema.\n *\n * @param schema - JSON Schema to derive variable suggestions from\n * @returns CodeMirror Extension that provides variable autocomplete\n *\n * @example\n * ```tsx\n * const schema = {\n *   type: 'object',\n *   properties: {\n *     user: { type: 'object', properties: { name: { type: 'string' } } }\n *   }\n * };\n *\n * <CodeMirror extensions={[createVariableAutocomplete(schema)]} />\n * // Typing \"{{\" will show: user, user.name\n * ```\n */\nexport function createVariableAutocomplete(schema: JsonSchema | undefined): Extension {\n  const variables = flattenSchemaToVariables(schema);\n\n  return autocompletion({\n    override: [createVariableCompletionSource(variables)],\n    defaultKeymap: true,\n    closeOnBlur: true,\n    icons: false,\n  });\n}\n\n/**\n * Creates a completion source function for CodeMirror's autocompletion.\n */\nfunction createVariableCompletionSource(\n  variables: VariableCompletion[],\n): (context: CompletionContext) => CompletionResult | null {\n  return (context: CompletionContext): CompletionResult | null => {\n    // Look for {{ pattern before cursor\n    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);\n    const match = beforeCursor.match(/\\{\\{([a-zA-Z0-9_.\\[\\]]*)?$/);\n\n    if (!match) {\n      return null;\n    }\n\n    // The text after {{ that we're matching against\n    const prefix = match[1] ?? '';\n    const startPos = context.pos - prefix.length;\n\n    // Filter variables based on what the user has typed\n    const filteredVariables = prefix\n      ? variables.filter(v => v.path.toLowerCase().startsWith(prefix.toLowerCase()))\n      : variables;\n\n    if (filteredVariables.length === 0) {\n      return null;\n    }\n\n    const completions: Completion[] = filteredVariables.map(variable => ({\n      label: variable.path,\n      displayLabel: variable.path,\n      detail: variable.type,\n      info: variable.description,\n      apply: (view, completion, from, to) => {\n        // Check if }} already follows the cursor\n        const afterCursor = view.state.sliceDoc(to, to + 2);\n        const hasClosingBraces = afterCursor === '}}';\n\n        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;\n\n        view.dispatch({\n          changes: { from, to, insert: insertText },\n          selection: { anchor: from + insertText.length },\n        });\n      },\n    }));\n\n    return {\n      from: startPos,\n      options: completions,\n      validFor: /^[a-zA-Z0-9_.\\[\\]]*$/,\n    };\n  };\n}\n","import type { DecorationSet, EditorView, ViewUpdate } from '@codemirror/view';\nimport { Decoration, MatchDecorator, ViewPlugin } from '@codemirror/view';\n\n/**\n * Regex pattern to match variable placeholders like {{variableName}} or {{user.name}}\n * Matches: {{ followed by a valid identifier path (with optional dot notation), then }}\n */\nexport const VARIABLE_PATTERN = /\\{\\{([a-zA-Z_][a-zA-Z0-9_]*(?:\\.[a-zA-Z_][a-zA-Z0-9_]*)*)\\}\\}/g;\n\nconst variableDecoration = Decoration.mark({\n  class: 'cm-variable-highlight',\n});\n\nconst variableMatcher = new MatchDecorator({\n  regexp: VARIABLE_PATTERN,\n  decoration: () => variableDecoration,\n});\n\nconst variableHighlightPlugin = ViewPlugin.fromClass(\n  class {\n    decorations: DecorationSet;\n\n    constructor(view: EditorView) {\n      this.decorations = variableMatcher.createDeco(view);\n    }\n\n    update(update: ViewUpdate) {\n      this.decorations = variableMatcher.updateDeco(update, this.decorations);\n    }\n  },\n  {\n    decorations: v => v.decorations,\n  },\n);\n\n/**\n * CodeMirror extension that highlights {{variableName}} patterns\n * with orange color and semibold weight\n */\nexport const variableHighlight = variableHighlightPlugin;\n","import { jsonLanguage } from '@codemirror/lang-json';\nimport { markdown, markdownLanguage } from '@codemirror/lang-markdown';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { EditorState } from '@codemirror/state';\nimport type { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport CodeMirror from '@uiw/react-codemirror';\nimport type { ReactCodeMirrorRef } from '@uiw/react-codemirror';\nimport { forwardRef, useMemo } from 'react';\nimport type { HTMLAttributes } from 'react';\nimport { codeLanguages } from './code-languages';\nimport { createVariableAutocomplete } from './variable-autocomplete-extension';\nimport { variableHighlight } from './variable-highlight-extension';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { useTheme } from '@/ds/components/ThemeProvider';\nimport type { JsonSchema } from '@/lib/json-schema';\nimport { cn } from '@/lib/utils';\n\nexport type CodeEditorLanguage = 'json' | 'markdown';\n\n/** Original dark theme — draculaInit + custom overrides. Unchanged from before light mode work. */\nfunction buildDarkTheme(): Extension {\n  const baseTheme = draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.8rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: 'var(--neutral2)',\n      background: 'transparent',\n      foreground: 'var(--neutral6)',\n      caret: 'var(--neutral6)',\n    },\n    styles: [\n      { tag: [t.className, t.propertyName], color: 'var(--neutral6)' },\n      { tag: t.heading, color: 'var(--accent3)', fontWeight: 'bold' },\n      {\n        tag: [t.heading1, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6],\n        color: 'var(--accent3)',\n        fontWeight: 'bold',\n      },\n      { tag: t.emphasis, fontStyle: 'italic', color: 'var(--neutral6)' },\n      { tag: t.strong, fontWeight: 'bold', color: 'var(--neutral6)' },\n      { tag: t.link, color: 'var(--accent3)', textDecoration: 'underline' },\n      { tag: t.url, color: 'var(--accent3)' },\n      { tag: t.monospace, color: 'var(--neutral6)' },\n      { tag: t.strikethrough, textDecoration: 'line-through' },\n      { tag: t.quote, fontStyle: 'italic', color: 'var(--neutral2)' },\n    ],\n  });\n\n  const customLineNumberTheme = EditorView.theme({\n    '.cm-editor': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n      caretColor: 'var(--neutral6)',\n    },\n    '.cm-lineNumbers .cm-gutterElement': {\n      color: 'var(--neutral2)',\n    },\n    '.cm-activeLineGutter': {\n      color: 'var(--neutral3)',\n    },\n    '.cm-cursor': {\n      borderLeftColor: 'var(--neutral6)',\n    },\n    '.cm-selectionBackground, .cm-content ::selection': {\n      backgroundColor: 'color-mix(in srgb, var(--accent3) 22%, transparent)',\n    },\n    '.cm-tooltip-autocomplete': {\n      backgroundColor: 'var(--surface2)',\n      border: '1px solid var(--border1)',\n      borderRadius: '6px',\n      boxShadow: '0 8px 16px rgba(0, 0, 0, 0.2)',\n    },\n    '.cm-tooltip-autocomplete > ul': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-completionLabel': {\n      color: 'var(--neutral6)',\n    },\n    '.cm-completionDetail': {\n      color: 'var(--neutral3)',\n      fontSize: '0.7rem',\n      marginLeft: 'auto',\n      paddingLeft: '12px',\n    },\n    '.cm-completionInfo': {\n      backgroundColor: 'var(--surface2)',\n      border: '1px solid var(--border1)',\n      color: 'var(--neutral3)',\n      padding: '8px 12px',\n    },\n    '.cm-completionIcon': {\n      display: 'none',\n    },\n    'ul.cm-completionList li[aria-selected]': {\n      backgroundColor: 'var(--surface4)',\n      color: 'var(--neutral6)',\n    },\n    '.cm-line .cm-variable-highlight': {\n      color: 'var(--accent6) !important',\n      fontWeight: '500',\n    },\n  });\n\n  return [baseTheme, customLineNumberTheme];\n}\n\nfunction buildLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.8rem',\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      caretColor: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-lineNumbers .cm-gutterElement': {\n      color: 'var(--neutral2)',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral3)',\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: 'var(--neutral6)',\n    },\n    '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':\n      {\n        background: 'color-mix(in srgb, var(--accent3) 22%, transparent) !important',\n      },\n    '.cm-tooltip-autocomplete': {\n      backgroundColor: 'var(--surface2)',\n      border: '1px solid var(--border1)',\n      borderRadius: '6px',\n      boxShadow: '0 8px 16px rgba(0, 0, 0, 0.2)',\n    },\n    '.cm-tooltip-autocomplete > ul': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-completionLabel': {\n      color: 'var(--neutral6)',\n    },\n    '.cm-completionDetail': {\n      color: 'var(--neutral3)',\n      fontSize: '0.7rem',\n      marginLeft: 'auto',\n      paddingLeft: '12px',\n    },\n    '.cm-completionInfo': {\n      backgroundColor: 'var(--surface2)',\n      border: '1px solid var(--border1)',\n      color: 'var(--neutral3)',\n      padding: '8px 12px',\n    },\n    '.cm-completionIcon': {\n      display: 'none',\n    },\n    'ul.cm-completionList li[aria-selected]': {\n      backgroundColor: 'var(--surface4)',\n      color: 'var(--neutral6)',\n    },\n    '.cm-line .cm-variable-highlight': {\n      color: 'var(--accent6) !important',\n      fontWeight: '500',\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    { tag: t.heading, color: 'var(--accent3)', fontWeight: 'bold' },\n    {\n      tag: [t.heading1, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6],\n      color: 'var(--accent3)',\n      fontWeight: 'bold',\n    },\n    { tag: [t.emphasis], fontStyle: 'italic', color: 'var(--neutral6)' },\n    { tag: [t.strong], fontWeight: 'bold', color: 'var(--neutral6)' },\n    { tag: t.link, color: 'var(--accent3)', textDecoration: 'underline' },\n    { tag: t.url, color: 'var(--accent3)' },\n    { tag: t.monospace, color: 'var(--neutral6)' },\n    { tag: t.strikethrough, textDecoration: 'line-through' },\n    { tag: [t.deleted], color: 'var(--accent2)' },\n    { tag: t.invalid, color: 'var(--error)' },\n    { tag: [t.standard(t.tagName)], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\n// eslint-disable-next-line react-refresh/only-export-components -- shared hook intentionally co-located with the editor it themes\nexport const useCodemirrorTheme = (): Extension => {\n  const isDark = useTheme().resolvedTheme === 'dark';\n  return useMemo(() => (isDark ? buildDarkTheme() : buildLightTheme()), [isDark]);\n};\n\nexport type CodeEditorProps = {\n  data?: Record<string, unknown> | Array<Record<string, unknown>>;\n  value?: string;\n  onChange?: (value: string) => void;\n  showCopyButton?: boolean;\n  className?: string;\n  highlightVariables?: boolean;\n  language?: CodeEditorLanguage;\n  placeholder?: string;\n  /** JSON Schema to enable variable autocomplete for {{variable}} placeholders (markdown only) */\n  schema?: JsonSchema;\n  autoFocus?: boolean;\n  /** Show line numbers in the gutter (default: true) */\n  lineNumbers?: boolean;\n  /** When false, makes the editor read-only */\n  editable?: boolean;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(\n  (\n    {\n      data,\n      value,\n      onChange,\n      showCopyButton = true,\n      className,\n      language = 'json',\n      highlightVariables = false,\n      placeholder,\n      schema,\n      autoFocus,\n      lineNumbers = true,\n      editable,\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useCodemirrorTheme();\n    const formattedCode = data ? JSON.stringify(data, null, 2) : (value ?? '');\n\n    const extensions = useMemo(() => {\n      const exts: Extension[] = [];\n\n      if (language === 'json') {\n        exts.push(jsonLanguage);\n      } else if (language === 'markdown') {\n        exts.push(markdown({ base: markdownLanguage, codeLanguages }));\n        exts.push(EditorView.lineWrapping);\n      }\n\n      if (highlightVariables && language === 'markdown') {\n        exts.push(variableHighlight);\n      }\n\n      if (schema && language === 'markdown') {\n        exts.push(createVariableAutocomplete(schema));\n      }\n\n      if (editable === false) {\n        exts.push(EditorState.readOnly.of(true));\n      }\n\n      return exts;\n    }, [language, highlightVariables, schema, editable]);\n\n    return (\n      <div\n        className={cn('rounded-md bg-surface3 p-1 font-mono relative border border-border1 overflow-hidden', className)}\n        {...props}\n      >\n        {showCopyButton && <CopyButton content={formattedCode} className=\"absolute top-2 right-2 z-20\" />}\n        <CodeMirror\n          ref={ref}\n          value={formattedCode}\n          theme={theme}\n          extensions={extensions}\n          onChange={onChange}\n          editable={editable}\n          aria-label=\"Code editor\"\n          placeholder={placeholder}\n          height=\"100%\"\n          style={{ height: '100%' }}\n          autoFocus={autoFocus}\n          basicSetup={{ lineNumbers }}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["t","CodeMirror"],"mappings":"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"}

package/dist/collapsible-CDSgJ39O.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const collapsible = require('@base-ui/react/collapsible');
+const React = require('react');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const Collapsible = collapsible.Collapsible.Root;
+const CollapsibleTrigger = React.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      collapsible.Collapsible.Trigger,
+      {
+        ref,
+        "data-slot": "collapsible-trigger",
+        className: utils.cn(
+          "-outline-offset-2",
+          transitions.transitions.colors,
+          transitions.focusRing.visible,
+          "hover:text-neutral5",
+          "[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
+          "[&[data-panel-open]>svg]:rotate-90",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: asChild ? void 0 : children
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const CollapsibleContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.
+    // Padding/margin/borders must live on an inner wrapper — if applied to the panel
+    // itself they keep it from collapsing to 0, which makes the animation jump.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      collapsible.Collapsible.Panel,
+      {
+        ref,
+        "data-slot": "collapsible-content",
+        className: utils.cn(
+          "overflow-hidden",
+          "h-[var(--collapsible-panel-height)] transition-[height] duration-normal ease-out-custom",
+          "data-[starting-style]:h-0 data-[ending-style]:h-0"
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children })
+      }
+    )
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+//# sourceMappingURL=collapsible-CDSgJ39O.cjs.map

package/dist/collapsible-CDSgJ39O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-CDSgJ39O.cjs","sources":["../src/ds/components/Collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\nimport { transitions, focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\ntype CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n  asChild?: boolean;\n};\n\nconst CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, asChild, children, ...props }, ref) => {\n    const renderProps = asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {};\n\n    return (\n      <CollapsiblePrimitive.Trigger\n        ref={ref}\n        data-slot=\"collapsible-trigger\"\n        className={cn(\n          '-outline-offset-2',\n          transitions.colors,\n          focusRing.visible,\n          'hover:text-neutral5',\n          '[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom',\n          '[&[data-panel-open]>svg]:rotate-90',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  },\n);\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\ntype CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, 'className'> & {\n  className?: string;\n};\n\nconst CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(\n  ({ className, children, ...props }, ref) => (\n    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.\n    // Padding/margin/borders must live on an inner wrapper — if applied to the panel\n    // itself they keep it from collapsing to 0, which makes the animation jump.\n    <CollapsiblePrimitive.Panel\n      ref={ref}\n      data-slot=\"collapsible-content\"\n      className={cn(\n        'overflow-hidden',\n        'h-[var(--collapsible-panel-height)] transition-[height] duration-normal ease-out-custom',\n        'data-[starting-style]:h-0 data-[ending-style]:h-0',\n      )}\n      {...props}\n    >\n      <div className={className}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  ),\n);\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["CollapsiblePrimitive","jsx","cn","transitions","focusRing"],"mappings":";;;;;;;;AAKA,MAAM,cAAcA,uBAAA,CAAqB;AAOzC,MAAM,qBAAqB,KAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AACnD,IAAA,MAAM,WAAA,GAAc,OAAA,IAAW,KAAA,CAAM,cAAA,CAAe,QAAQ,IAAI,EAAE,MAAA,EAAQ,QAAA,EAA+B,GAAI,EAAC;AAE9G,IAAA,uBACEC,cAAA;AAAA,MAACD,uBAAA,CAAqB,OAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,SAAA,EAAWE,QAAA;AAAA,UACT,mBAAA;AAAA,UACAC,uBAAA,CAAY,MAAA;AAAA,UACZC,qBAAA,CAAU,OAAA;AAAA,UACV,qBAAA;AAAA,UACA,8EAAA;AAAA,UACA,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,WAAA;AAAA,QACH,GAAG,KAAA;AAAA,QAEH,oBAAU,MAAA,GAAY;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;AAMjC,MAAM,qBAAqB,KAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAG,GAAA;AAAA;AAAA;AAAA;AAAA,oBAIlCH,cAAA;AAAA,MAACD,uBAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,SAAA,EAAWE,QAAA;AAAA,UACT,iBAAA;AAAA,UACA,yFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAuB,QAAA,EAAS;AAAA;AAAA;AACvC;AAEJ;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;;;"}

package/dist/collapsible-PODbdTuV.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
+import React__default from 'react';
+import { f as focusRing, t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const Collapsible = Collapsible$1.Root;
+const CollapsibleTrigger = React__default.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__default.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsx(
+      Collapsible$1.Trigger,
+      {
+        ref,
+        "data-slot": "collapsible-trigger",
+        className: cn(
+          "-outline-offset-2",
+          transitions.colors,
+          focusRing.visible,
+          "hover:text-neutral5",
+          "[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
+          "[&[data-panel-open]>svg]:rotate-90",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: asChild ? void 0 : children
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const CollapsibleContent = React__default.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.
+    // Padding/margin/borders must live on an inner wrapper — if applied to the panel
+    // itself they keep it from collapsing to 0, which makes the animation jump.
+    /* @__PURE__ */ jsx(
+      Collapsible$1.Panel,
+      {
+        ref,
+        "data-slot": "collapsible-content",
+        className: cn(
+          "overflow-hidden",
+          "h-[var(--collapsible-panel-height)] transition-[height] duration-normal ease-out-custom",
+          "data-[starting-style]:h-0 data-[ending-style]:h-0"
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className, children })
+      }
+    )
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+export { Collapsible as C, CollapsibleContent as a, CollapsibleTrigger as b };
+//# sourceMappingURL=collapsible-PODbdTuV.js.map

package/dist/collapsible-PODbdTuV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-PODbdTuV.js","sources":["../src/ds/components/Collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\nimport { transitions, focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\ntype CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n  asChild?: boolean;\n};\n\nconst CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, asChild, children, ...props }, ref) => {\n    const renderProps = asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {};\n\n    return (\n      <CollapsiblePrimitive.Trigger\n        ref={ref}\n        data-slot=\"collapsible-trigger\"\n        className={cn(\n          '-outline-offset-2',\n          transitions.colors,\n          focusRing.visible,\n          'hover:text-neutral5',\n          '[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom',\n          '[&[data-panel-open]>svg]:rotate-90',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  },\n);\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\ntype CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, 'className'> & {\n  className?: string;\n};\n\nconst CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(\n  ({ className, children, ...props }, ref) => (\n    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.\n    // Padding/margin/borders must live on an inner wrapper — if applied to the panel\n    // itself they keep it from collapsing to 0, which makes the animation jump.\n    <CollapsiblePrimitive.Panel\n      ref={ref}\n      data-slot=\"collapsible-content\"\n      className={cn(\n        'overflow-hidden',\n        'h-[var(--collapsible-panel-height)] transition-[height] duration-normal ease-out-custom',\n        'data-[starting-style]:h-0 data-[ending-style]:h-0',\n      )}\n      {...props}\n    >\n      <div className={className}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  ),\n);\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["CollapsiblePrimitive","React"],"mappings":";;;;;;AAKA,MAAM,cAAcA,aAAA,CAAqB;AAOzC,MAAM,qBAAqBC,cAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AACnD,IAAA,MAAM,WAAA,GAAc,OAAA,IAAWA,cAAA,CAAM,cAAA,CAAe,QAAQ,IAAI,EAAE,MAAA,EAAQ,QAAA,EAA+B,GAAI,EAAC;AAE9G,IAAA,uBACE,GAAA;AAAA,MAACD,aAAA,CAAqB,OAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,mBAAA;AAAA,UACA,WAAA,CAAY,MAAA;AAAA,UACZ,SAAA,CAAU,OAAA;AAAA,UACV,qBAAA;AAAA,UACA,8EAAA;AAAA,UACA,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,WAAA;AAAA,QACH,GAAG,KAAA;AAAA,QAEH,oBAAU,MAAA,GAAY;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;AAMjC,MAAM,qBAAqBC,cAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAG,GAAA;AAAA;AAAA;AAAA;AAAA,oBAIlC,GAAA;AAAA,MAACD,aAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,iBAAA;AAAA,UACA,yFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAuB,QAAA,EAAS;AAAA;AAAA;AACvC;AAEJ;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;"}