@invect/ui 0.0.1

package/src/components/ui/codemirror-nunjucks-editor.tsx

@@ -0,0 +1,451 @@
+import { useEffect, useRef } from 'react';
+import {
+  EditorView,
+  keymap,
+  highlightSpecialChars,
+  ViewPlugin,
+  ViewUpdate,
+  Decoration,
+  DecorationSet,
+  WidgetType,
+} from '@codemirror/view';
+import { EditorState, Extension, RangeSetBuilder, Prec } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { cn } from '../../lib/utils';
+import {
+  CODEMIRROR_IOSEVKA_FONT_STACK,
+  useCodeMirrorVscodePalette,
+  useCodeMirrorVscodeTheme,
+  type CodeMirrorVscodePalette,
+} from './codemirror-vscode-theme';
+
+interface CodeMirrorNunjucksEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  fillAvailableHeight?: boolean;
+}
+
+// Custom decoration for nunjucks expressions {{ ... }}
+const nunjucksBraceMark = Decoration.mark({
+  class: 'cm-nunjucks-brace',
+});
+
+const nunjucksVariableMark = Decoration.mark({
+  class: 'cm-nunjucks-variable',
+});
+
+const nunjucksFilterMark = Decoration.mark({
+  class: 'cm-nunjucks-filter',
+});
+
+// Parse and decorate nunjucks expressions
+function parseNunjucksDecorations(view: EditorView): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>();
+  const doc = view.state.doc.toString();
+
+  // Match {{ ... }} expressions
+  const expressionRegex = /\{\{(.*?)\}\}/g;
+  let match;
+
+  while ((match = expressionRegex.exec(doc)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+    const inner = match[1];
+    const innerStart = start + 2; // After {{
+
+    // Highlight opening braces
+    builder.add(start, start + 2, nunjucksBraceMark);
+
+    // Parse the inner content for variables, properties, and filters
+    // Simple parser for: variable.property.path | filter | filter2
+    let inVariable = true;
+    let wordStart = -1;
+
+    for (let i = 0; i < inner.length; i++) {
+      const char = inner[i];
+
+      if (char === ' ' || char === '\t' || char === '\n') {
+        if (wordStart >= 0) {
+          // End of a word
+          const wordEnd = i;
+          if (inVariable) {
+            builder.add(innerStart + wordStart, innerStart + wordEnd, nunjucksVariableMark);
+          } else {
+            builder.add(innerStart + wordStart, innerStart + wordEnd, nunjucksFilterMark);
+          }
+          wordStart = -1;
+        }
+        continue;
+      }
+
+      if (char === '|') {
+        // Filter separator
+        if (wordStart >= 0) {
+          const wordEnd = i;
+          if (inVariable) {
+            builder.add(innerStart + wordStart, innerStart + wordEnd, nunjucksVariableMark);
+          } else {
+            builder.add(innerStart + wordStart, innerStart + wordEnd, nunjucksFilterMark);
+          }
+          wordStart = -1;
+        }
+        inVariable = false;
+        continue;
+      }
+
+      if (char === '.') {
+        // Property separator within variable path
+        if (wordStart >= 0) {
+          builder.add(innerStart + wordStart, innerStart + i, nunjucksVariableMark);
+          wordStart = -1;
+        }
+        continue;
+      }
+
+      if (wordStart < 0 && /[a-zA-Z_]/.test(char)) {
+        wordStart = i;
+      }
+    }
+
+    // Handle last word
+    if (wordStart >= 0) {
+      if (inVariable) {
+        builder.add(innerStart + wordStart, innerStart + inner.length, nunjucksVariableMark);
+      } else {
+        builder.add(innerStart + wordStart, innerStart + inner.length, nunjucksFilterMark);
+      }
+    }
+
+    // Highlight closing braces
+    builder.add(end - 2, end, nunjucksBraceMark);
+  }
+
+  // Also highlight {% ... %} tags
+  const tagRegex = /\{%(.*?)%\}/g;
+  while ((match = tagRegex.exec(doc)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+    builder.add(start, start + 2, nunjucksBraceMark);
+    builder.add(end - 2, end, nunjucksBraceMark);
+  }
+
+  // Also highlight {# ... #} comments
+  const commentRegex = /\{#(.*?)#\}/g;
+  while ((match = commentRegex.exec(doc)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+    builder.add(start, start + 2, nunjucksBraceMark);
+    builder.add(end - 2, end, nunjucksBraceMark);
+  }
+
+  return builder.finish();
+}
+
+// Plugin to update decorations
+const nunjucksDecorationPlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = parseNunjucksDecorations(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = parseNunjucksDecorations(update.view);
+      }
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+
+// Theme extension for styling
+function createEditorTheme(palette: CodeMirrorVscodePalette) {
+  return EditorView.theme({
+    '&': {
+      fontSize: '12px',
+      fontFamily: CODEMIRROR_IOSEVKA_FONT_STACK,
+    },
+    '.cm-scroller, .cm-content, .cm-gutters, .cm-lineNumbers, .cm-tooltip': {
+      fontFamily: CODEMIRROR_IOSEVKA_FONT_STACK,
+    },
+    '.cm-content': {
+      padding: '8px',
+    },
+    '.cm-line': {
+      padding: '0',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-scroller': {
+      overflow: 'auto',
+    },
+    '.cm-tooltip': {
+      backgroundColor: palette.surface,
+      border: `1px solid ${palette.border}`,
+      color: palette.foreground,
+      boxShadow: `0 6px 18px color-mix(in srgb, ${palette.border} 35%, transparent)`,
+    },
+    '.cm-panels': {
+      backgroundColor: palette.surface,
+      color: palette.foreground,
+      borderColor: palette.border,
+    },
+    '.cm-panel button': {
+      backgroundColor: palette.surfaceAlt,
+      color: palette.foreground,
+      border: `1px solid ${palette.border}`,
+    },
+    '.cm-panel button:hover': {
+      backgroundColor: palette.surface,
+      borderColor: palette.accent,
+    },
+    '.cm-placeholder': {
+      color: palette.foregroundMuted,
+      fontStyle: 'italic',
+    },
+    '.cm-nunjucks-brace': {
+      color: palette.keyword,
+      fontWeight: '600',
+    },
+    '.cm-nunjucks-variable': {
+      color: palette.variable,
+    },
+    '.cm-nunjucks-filter': {
+      color: palette.operator,
+    },
+  });
+}
+
+// Single-line theme (no line wrapping for single-line mode)
+const singleLineTheme = EditorView.theme({
+  '&': {
+    minHeight: '2rem',
+  },
+  '.cm-content': {
+    whiteSpace: 'nowrap',
+    padding: '5px 8px',
+  },
+  '.cm-scroller': {
+    overflow: 'hidden',
+  },
+  '.cm-line': {
+    padding: '0',
+  },
+});
+
+// Placeholder widget
+class PlaceholderWidget extends WidgetType {
+  constructor(readonly text: string) {
+    super();
+  }
+
+  toDOM() {
+    const span = document.createElement('span');
+    span.className = 'cm-placeholder';
+    span.textContent = this.text;
+    span.style.pointerEvents = 'none';
+    return span;
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+// Placeholder plugin that shows placeholder when empty
+function placeholderPlugin(placeholder: string): Extension {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = this.getDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged) {
+          this.decorations = this.getDecorations(update.view);
+        }
+      }
+
+      getDecorations(view: EditorView): DecorationSet {
+        if (view.state.doc.length === 0) {
+          return Decoration.set([
+            Decoration.widget({
+              widget: new PlaceholderWidget(placeholder),
+              side: 1,
+            }).range(0),
+          ]);
+        }
+        return Decoration.none;
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}
+
+export function CodeMirrorNunjucksEditor({
+  value,
+  onChange,
+  readOnly = false,
+  className,
+  placeholder = '',
+  disabled = false,
+  multiline = false,
+  rows = 3,
+  fillAvailableHeight = false,
+}: CodeMirrorNunjucksEditorProps) {
+  const vscodePalette = useCodeMirrorVscodePalette();
+  const vscodeTheme = useCodeMirrorVscodeTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  const initialValueRef = useRef(value);
+
+  // Keep refs up to date
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // Update initial value ref for editor creation
+  useEffect(() => {
+    initialValueRef.current = value;
+  }, [value]);
+
+  // Create the editor
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const extensions: Extension[] = [
+      highlightSpecialChars(),
+      history(),
+      vscodeTheme,
+      createEditorTheme(vscodePalette),
+      EditorView.domEventHandlers({
+        keydown: (event) => {
+          event.stopPropagation();
+          return false;
+        },
+        keyup: (event) => {
+          event.stopPropagation();
+          return false;
+        },
+      }),
+      nunjucksDecorationPlugin,
+      keymap.of([...defaultKeymap, ...historyKeymap]),
+    ];
+
+    // Add placeholder
+    if (placeholder) {
+      extensions.push(placeholderPlugin(placeholder));
+    }
+
+    // Add multiline or single-line behavior
+    if (multiline) {
+      extensions.push(EditorView.lineWrapping);
+    } else {
+      extensions.push(singleLineTheme);
+      // Prevent Enter key from creating new lines in single-line mode
+      extensions.push(
+        Prec.highest(
+          keymap.of([
+            {
+              key: 'Enter',
+              run: () => true, // Prevent default (consume the event)
+            },
+          ]),
+        ),
+      );
+    }
+
+    if (readOnly || disabled) {
+      extensions.push(EditorState.readOnly.of(true));
+    } else {
+      // Add update listener for editable mode
+      extensions.push(
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && onChangeRef.current) {
+            let newValue = update.state.doc.toString();
+            // In single-line mode, remove any newlines
+            if (!multiline) {
+              newValue = newValue.replace(/\n/g, '');
+            }
+            onChangeRef.current(newValue);
+          }
+        }),
+      );
+    }
+
+    const state = EditorState.create({
+      doc: initialValueRef.current,
+      extensions,
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [readOnly, disabled, multiline, placeholder, vscodePalette, vscodeTheme]);
+
+  // Update content when value changes from outside
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+
+    const currentContent = view.state.doc.toString();
+    if (currentContent !== value) {
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: currentContent.length,
+          insert: value,
+        },
+      });
+    }
+  }, [value]);
+
+  // Calculate height based on rows
+  const maxHeight = multiline ? `${Math.max(rows * 2, 8)}em` : '2.25rem';
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'rounded-md border bg-background text-sm',
+        'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+        disabled && 'opacity-50 cursor-not-allowed',
+        '[&_.cm-editor]:min-h-full [&_.cm-scroller]:overflow-auto',
+        fillAvailableHeight && 'h-full min-h-0 [&_.cm-editor]:h-full [&_.cm-scroller]:h-full',
+        className,
+      )}
+      style={
+        fillAvailableHeight
+          ? { height: '100%', overflow: 'hidden' }
+          : { maxHeight, overflow: 'hidden' }
+      }
+    />
+  );
+}

package/src/components/ui/codemirror-vscode-theme.ts

@@ -0,0 +1,243 @@
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { useOptionalTheme } from '../../contexts/ThemeProvider';
+
+export const CODEMIRROR_IOSEVKA_FONT_STACK =
+  '"Iosevka", var(--font-mono, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace)';
+
+export interface CodeMirrorVscodePalette {
+  keyword: string;
+  operator: string;
+  variable: string;
+  string: string;
+  function: string;
+  comment: string;
+  error: string;
+  surface: string;
+  surfaceAlt: string;
+  border: string;
+  foreground: string;
+  foregroundMuted: string;
+  foregroundInverse: string;
+  accent: string;
+  accentHover: string;
+  selection: string;
+}
+
+// ─── Dark Modern ────────────────────────────────────────────────────────────
+
+const darkModernEditorTheme = EditorView.theme(
+  {
+    '&': {
+      color: '#cccccc',
+      backgroundColor: '#1f1f1f',
+      fontSize: '13px',
+      fontFamily: CODEMIRROR_IOSEVKA_FONT_STACK,
+    },
+    '.cm-content': { caretColor: '#aeafad', lineHeight: '1.5' },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: '#aeafad', borderLeftWidth: '2px' },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: '#264f78',
+    },
+    '.cm-panels': { backgroundColor: '#252526', color: '#cccccc' },
+    '.cm-panels.cm-panels-top': { borderBottom: '1px solid #3c3c3c' },
+    '.cm-panels.cm-panels-bottom': { borderTop: '1px solid #3c3c3c' },
+    '.cm-searchMatch': { backgroundColor: '#72a1ff59', outline: '1px solid #457dff' },
+    '.cm-searchMatch.cm-searchMatch-selected': { backgroundColor: '#6199ff2f' },
+    '.cm-activeLine': { backgroundColor: '#ffffff08' },
+    '.cm-selectionMatch': { backgroundColor: '#72a1ff59' },
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: '#ffffff15',
+      outline: '1px solid #569cd690',
+    },
+    '.cm-gutters': {
+      backgroundColor: '#1e1e1e',
+      color: '#858585',
+      border: 'none',
+      borderRight: '1px solid #3c3c3c',
+    },
+    '.cm-activeLineGutter': { color: '#c6c6c6', backgroundColor: '#282828' },
+    '.cm-foldPlaceholder': { backgroundColor: 'transparent', border: 'none', color: '#858585' },
+    '.cm-tooltip': {
+      border: '1px solid #454545',
+      backgroundColor: '#252526',
+      boxShadow: '0 2px 6px rgba(0,0,0,0.4)',
+      borderRadius: '4px',
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': { backgroundColor: '#04395e', color: '#cccccc' },
+    },
+    '.cm-completionIcon': { color: '#569cd6' },
+  },
+  { dark: true },
+);
+
+const darkModernHighlight = syntaxHighlighting(
+  HighlightStyle.define([
+    { tag: [t.keyword, t.moduleKeyword], color: '#569cd6' },
+    { tag: [t.controlKeyword, t.operatorKeyword], color: '#c586c0' },
+    { tag: t.operator, color: '#d4d4d4' },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#dcdcaa' },
+    { tag: [t.typeName, t.className, t.namespace], color: '#4ec9b0' },
+    { tag: [t.propertyName, t.definition(t.propertyName)], color: '#9cdcfe' },
+    { tag: [t.variableName, t.name], color: '#9cdcfe' },
+    { tag: t.definition(t.variableName), color: '#9cdcfe' },
+    { tag: [t.string, t.special(t.string)], color: '#ce9178' },
+    { tag: t.number, color: '#b5cea8' },
+    { tag: [t.bool, t.null], color: '#569cd6' },
+    {
+      tag: [t.comment, t.lineComment, t.blockComment, t.docComment],
+      color: '#6a9955',
+      fontStyle: 'italic',
+    },
+    { tag: t.tagName, color: '#569cd6' },
+    { tag: t.attributeName, color: '#9cdcfe' },
+    { tag: t.attributeValue, color: '#ce9178' },
+    { tag: [t.regexp, t.escape], color: '#d16969' },
+    { tag: t.meta, color: '#569cd6' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.link, color: '#6a9955', textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#569cd6' },
+    { tag: t.invalid, color: '#f44747', textDecoration: 'underline' },
+  ]),
+);
+
+export const vsCodeDarkModern: Extension = [darkModernEditorTheme, darkModernHighlight];
+
+// ─── Light Modern ───────────────────────────────────────────────────────────
+
+const lightModernEditorTheme = EditorView.theme(
+  {
+    '&': {
+      color: '#3b3b3b',
+      backgroundColor: '#ffffff',
+      fontSize: '13px',
+      fontFamily: CODEMIRROR_IOSEVKA_FONT_STACK,
+    },
+    '.cm-content': { caretColor: '#3b3b3b', lineHeight: '1.5' },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: '#3b3b3b', borderLeftWidth: '2px' },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: '#add6ff',
+    },
+    '.cm-panels': { backgroundColor: '#f3f3f3', color: '#3b3b3b' },
+    '.cm-panels.cm-panels-top': { borderBottom: '1px solid #e5e5e5' },
+    '.cm-panels.cm-panels-bottom': { borderTop: '1px solid #e5e5e5' },
+    '.cm-searchMatch': { backgroundColor: '#f7c94399', outline: '1px solid #f7c943' },
+    '.cm-searchMatch.cm-searchMatch-selected': { backgroundColor: '#f7c94366' },
+    '.cm-activeLine': { backgroundColor: '#f8f8f8' },
+    '.cm-selectionMatch': { backgroundColor: '#a8ac94a0' },
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: '#0064ff20',
+      outline: '1px solid #0064ff50',
+    },
+    '.cm-gutters': {
+      backgroundColor: '#f8f8f8',
+      color: '#6e7681',
+      border: 'none',
+      borderRight: '1px solid #e5e5e5',
+    },
+    '.cm-activeLineGutter': { color: '#3b3b3b', backgroundColor: '#f0f0f0' },
+    '.cm-foldPlaceholder': { backgroundColor: 'transparent', border: 'none', color: '#6e7681' },
+    '.cm-tooltip': {
+      border: '1px solid #c8c8c8',
+      backgroundColor: '#f3f3f3',
+      boxShadow: '0 2px 6px rgba(0,0,0,0.12)',
+      borderRadius: '4px',
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': { backgroundColor: '#d6ebff', color: '#3b3b3b' },
+    },
+    '.cm-completionIcon': { color: '#0064ff' },
+  },
+  { dark: false },
+);
+
+const lightModernHighlight = syntaxHighlighting(
+  HighlightStyle.define([
+    { tag: [t.keyword, t.moduleKeyword], color: '#0000ff' },
+    { tag: [t.controlKeyword, t.operatorKeyword], color: '#af00db' },
+    { tag: t.operator, color: '#3b3b3b' },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#795e26' },
+    { tag: [t.typeName, t.className, t.namespace], color: '#267f99' },
+    { tag: [t.propertyName, t.definition(t.propertyName)], color: '#0451a5' },
+    { tag: [t.variableName, t.name], color: '#001080' },
+    { tag: t.definition(t.variableName), color: '#001080' },
+    { tag: [t.string, t.special(t.string)], color: '#a31515' },
+    { tag: t.number, color: '#098658' },
+    { tag: [t.bool, t.null], color: '#0000ff' },
+    {
+      tag: [t.comment, t.lineComment, t.blockComment, t.docComment],
+      color: '#008000',
+      fontStyle: 'italic',
+    },
+    { tag: t.tagName, color: '#800000' },
+    { tag: t.attributeName, color: '#e50000' },
+    { tag: t.attributeValue, color: '#a31515' },
+    { tag: [t.regexp, t.escape], color: '#811f3f' },
+    { tag: t.meta, color: '#0000ff' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.link, color: '#008000', textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#0000ff' },
+    { tag: t.invalid, color: '#cd3131', textDecoration: 'underline' },
+  ]),
+);
+
+export const vsCodeLightModern: Extension = [lightModernEditorTheme, lightModernHighlight];
+
+// ─── Palettes (used by other components for matching UI colors) ──────────────
+
+const vscodeDarkPalette: CodeMirrorVscodePalette = {
+  keyword: '#569cd6',
+  operator: '#c586c0',
+  variable: '#9cdcfe',
+  string: '#ce9178',
+  function: '#dcdcaa',
+  comment: '#6a9955',
+  error: '#f44747',
+  surface: '#252526',
+  surfaceAlt: '#1f1f1f',
+  border: '#3c3c3c',
+  foreground: '#cccccc',
+  foregroundMuted: '#858585',
+  foregroundInverse: '#ffffff',
+  accent: '#3794ff',
+  accentHover: '#4daafc',
+  selection: '#264f78',
+};
+
+const vscodeLightPalette: CodeMirrorVscodePalette = {
+  keyword: '#0000ff',
+  operator: '#af00db',
+  variable: '#001080',
+  string: '#a31515',
+  function: '#795e26',
+  comment: '#008000',
+  error: '#cd3131',
+  surface: '#f8f8f8',
+  surfaceAlt: '#ffffff',
+  border: '#e5e5e5',
+  foreground: '#3b3b3b',
+  foregroundMuted: '#6e7681',
+  foregroundInverse: '#ffffff',
+  accent: '#0064ff',
+  accentHover: '#0050cc',
+  selection: '#add6ff',
+};
+
+export function useCodeMirrorVscodeTheme(): Extension {
+  const themeContext = useOptionalTheme();
+
+  return themeContext?.resolvedTheme === 'dark' ? vsCodeDarkModern : vsCodeLightModern;
+}
+
+export function useCodeMirrorVscodePalette(): CodeMirrorVscodePalette {
+  const themeContext = useOptionalTheme();
+
+  return themeContext?.resolvedTheme === 'dark' ? vscodeDarkPalette : vscodeLightPalette;
+}

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };