@lax-wp/design-system 0.8.3 → 0.8.5-beta.0

package/dist/types/index.d.ts

@@ -19,6 +19,21 @@ export interface CodeEditorToolbarContext {
     isEditMode: boolean;
     activeTab: 'JSON' | 'Grid';
 }
+/** Information about a folding range (code block) at the cursor position. */
+export interface CodeBlockInfo {
+    /** 1-based start line of the folding range */
+    startLine: number;
+    /** 1-based end line of the folding range */
+    endLine: number;
+    /** The raw text content of the block */
+    text: string;
+    /** The folding kind if available ('comment' | 'imports' | 'region' | undefined) */
+    kind?: string;
+    /** 1-based line where the cursor was when clicked */
+    cursorLine: number;
+    /** 1-based column where the cursor was when clicked */
+    cursorColumn: number;
+}
 export interface CodeEditorProps {
     value: string;
     onChange?: (value: string) => void;
@@ -38,6 +53,15 @@ export interface CodeEditorProps {
     className?: string;
     enableAutoFormatting?: boolean;
     renderToolbarActions?: (context: CodeEditorToolbarContext) => React.ReactNode;
+    /** Callback fired when the user clicks inside a code block (folding range). Receives the innermost block. */
+    onBlockClick?: (block: CodeBlockInfo) => void;
+    /**
+     * When set, the editor searches for this text, scrolls to the match,
+     * and highlights the enclosing code block (folding range / bracket pair).
+     * For JSON, passing `"customer"` navigates to the `"customer": { ... }` block.
+     * Change the value to trigger navigation; set to `undefined` to clear.
+     */
+    focusBlock?: string;
 }
 export interface ThemeContextType {
     theme: 'light' | 'dark';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.8.3",
+  "version": "0.8.5-beta.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -38,6 +38,11 @@
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/language": "^6.12.2",
+    "@uiw/react-codemirror": "^4.25.5",
     "array-move": "2.2.2",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",