@walkeros/explorer 2.0.1 → 2.1.0

package/STYLE.md

@@ -2,7 +2,9 @@
 
 Complete guide to styling, theming, and customization in walkerOS Explorer.
 
-**Quick Links:** [Quick Start](#quick-start) · [Theme Variables](#theme-variables) · [Grid System](#grid-system) · [Monaco Editor](#monaco-editor) · [SCSS Architecture](#scss-architecture)
+**Quick Links:** [Quick Start](#quick-start) ·
+[Theme Variables](#theme-variables) · [Grid System](#grid-system) ·
+[Monaco Editor](#monaco-editor) · [SCSS Architecture](#scss-architecture)
 
 ---
 
@@ -25,6 +27,7 @@ Explorer supports two built-in themes via the `data-theme` attribute:
 ```
 
 Theme detection priority:
+
 1. Closest ancestor `data-theme` attribute
 2. Document root `data-theme` attribute
 3. System preference via `prefers-color-scheme`
@@ -34,7 +37,7 @@ Theme detection priority:
 Override CSS variables in your stylesheet:
 
 ```css
-[data-theme="dark"] {
+[data-theme='dark'] {
   --color-primary: #your-brand-color;
   --bg-box: #your-background;
   --text-primary: #your-text-color;
@@ -55,132 +58,132 @@ import '@walkeros/explorer/styles.css';
 
 #### Text Colors
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--color-text` | `#000` | `#e0e0e0` | Primary text |
-| `--color-text-label` | `#424242` | `#cccccc` | Labels, headers |
-| `--color-text-button` | `#616161` | `#cccccc` | Button text (inactive) |
-| `--color-text-button-hover` | `#424242` | `#ffffff` | Button text on hover |
+| Variable                     | Light     | Dark      | Usage                   |
+| ---------------------------- | --------- | --------- | ----------------------- |
+| `--color-text`               | `#000`    | `#e0e0e0` | Primary text            |
+| `--color-text-label`         | `#424242` | `#cccccc` | Labels, headers         |
+| `--color-text-button`        | `#616161` | `#cccccc` | Button text (inactive)  |
+| `--color-text-button-hover`  | `#424242` | `#ffffff` | Button text on hover    |
 | `--color-text-button-active` | `#1f2937` | `#ffffff` | Button text when active |
-| `--color-text-muted` | `#666` | `#999` | Secondary/muted text |
-| `--color-text-toggle` | `#666` | `#999` | Toggle/switch labels |
-| `--color-text-input` | `#000` | `#e0e0e0` | Input field text |
-| `--color-text-placeholder` | `#9ca3af` | `#666` | Input placeholder text |
+| `--color-text-muted`         | `#666`    | `#999`    | Secondary/muted text    |
+| `--color-text-toggle`        | `#666`    | `#999`    | Toggle/switch labels    |
+| `--color-text-input`         | `#000`    | `#e0e0e0` | Input field text        |
+| `--color-text-placeholder`   | `#9ca3af` | `#666`    | Input placeholder text  |
 
 #### Background Colors
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--bg-box` | `#ffffff` | `#1e1e1e` | Main container background |
-| `--bg-header` | `#f5f5f5` | `#252526` | Header background |
-| `--bg-footer` | `#f5f5f5` | `#252526` | Footer background |
-| `--bg-button-hover` | `#e8e8e8` | `#2a2d2e` | Button background on hover |
-| `--bg-button-active` | `#ffffff` | `#1e1e1e` | Button background when active |
-| `--bg-button-group` | `#f3f4f6` | `#2a2d2e` | Button group container |
-| `--bg-input` | `#ffffff` | `#252526` | Input field background |
-| `--bg-input-hover` | `#f9f9f9` | `#2a2d2e` | Input field on hover |
-| `--bg-code-inline` | `#f9f9f9` | `rgba(255,255,255,0.05)` | Inline code background |
-| `--bg-dropdown` | `#ffffff` | `#252526` | Dropdown menu background |
-| `--bg-dropdown-option-hover` | `#f0f0f0` | `#2a2d2e` | Dropdown option on hover |
-| `--bg-dropdown-option-highlighted` | `#e3f2fd` | `#1e3a5f` | Highlighted dropdown option |
+| Variable                           | Light     | Dark                     | Usage                         |
+| ---------------------------------- | --------- | ------------------------ | ----------------------------- |
+| `--bg-box`                         | `#ffffff` | `#1e1e1e`                | Main container background     |
+| `--bg-header`                      | `#f5f5f5` | `#252526`                | Header background             |
+| `--bg-footer`                      | `#f5f5f5` | `#252526`                | Footer background             |
+| `--bg-button-hover`                | `#e8e8e8` | `#2a2d2e`                | Button background on hover    |
+| `--bg-button-active`               | `#ffffff` | `#1e1e1e`                | Button background when active |
+| `--bg-button-group`                | `#f3f4f6` | `#2a2d2e`                | Button group container        |
+| `--bg-input`                       | `#ffffff` | `#252526`                | Input field background        |
+| `--bg-input-hover`                 | `#f9f9f9` | `#2a2d2e`                | Input field on hover          |
+| `--bg-code-inline`                 | `#f9f9f9` | `rgba(255,255,255,0.05)` | Inline code background        |
+| `--bg-dropdown`                    | `#ffffff` | `#252526`                | Dropdown menu background      |
+| `--bg-dropdown-option-hover`       | `#f0f0f0` | `#2a2d2e`                | Dropdown option on hover      |
+| `--bg-dropdown-option-highlighted` | `#e3f2fd` | `#1e3a5f`                | Highlighted dropdown option   |
 
 #### Border Colors
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--border-box` | `#e0e0e0` | `#3c3c3c` | Main container border |
-| `--border-header` | `#e0e0e0` | `#3c3c3c` | Header border |
-| `--border-footer` | `#e0e0e0` | `#3c3c3c` | Footer border |
-| `--border-button-group` | `#d1d5db` | `#3c3c3c` | Button group borders |
-| `--border-input` | `#d1d5db` | `#3c3c3c` | Input field border |
-| `--border-input-focus` | `#3b82f6` | `#4a90e2` | Input border when focused |
+| Variable                | Light     | Dark      | Usage                     |
+| ----------------------- | --------- | --------- | ------------------------- |
+| `--border-box`          | `#e0e0e0` | `#3c3c3c` | Main container border     |
+| `--border-header`       | `#e0e0e0` | `#3c3c3c` | Header border             |
+| `--border-footer`       | `#e0e0e0` | `#3c3c3c` | Footer border             |
+| `--border-button-group` | `#d1d5db` | `#3c3c3c` | Button group borders      |
+| `--border-input`        | `#d1d5db` | `#3c3c3c` | Input field border        |
+| `--border-input-focus`  | `#3b82f6` | `#4a90e2` | Input border when focused |
 
 #### Button Colors
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--color-button-primary` | `#3b82f6` | `#4a90e2` | Primary button background |
-| `--color-button-primary-hover` | `#2563eb` | `#357abd` | Primary button on hover |
-| `--color-button-primary-text` | `#ffffff` | `#ffffff` | Primary button text |
-| `--color-button-danger` | `#ef4444` | `#ef4444` | Danger button background |
-| `--color-button-danger-hover` | `#dc2626` | `#dc2626` | Danger button on hover |
-| `--color-button-danger-text` | `#ffffff` | `#ffffff` | Danger button text |
+| Variable                       | Light     | Dark      | Usage                     |
+| ------------------------------ | --------- | --------- | ------------------------- |
+| `--color-button-primary`       | `#3b82f6` | `#4a90e2` | Primary button background |
+| `--color-button-primary-hover` | `#2563eb` | `#357abd` | Primary button on hover   |
+| `--color-button-primary-text`  | `#ffffff` | `#ffffff` | Primary button text       |
+| `--color-button-danger`        | `#ef4444` | `#ef4444` | Danger button background  |
+| `--color-button-danger-hover`  | `#dc2626` | `#dc2626` | Danger button on hover    |
+| `--color-button-danger-text`   | `#ffffff` | `#ffffff` | Danger button text        |
 
 #### Status Colors
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--color-status-enabled` | `#22c55e` | `#22c55e` | Enabled/success state |
-| `--color-status-disabled` | `#9ca3af` | `#9ca3af` | Disabled state |
-| `--color-status-warning` | `#f59e0b` | `#f59e0b` | Warning state |
+| Variable                  | Light     | Dark      | Usage                 |
+| ------------------------- | --------- | --------- | --------------------- |
+| `--color-status-enabled`  | `#22c55e` | `#22c55e` | Enabled/success state |
+| `--color-status-disabled` | `#9ca3af` | `#9ca3af` | Disabled state        |
+| `--color-status-warning`  | `#f59e0b` | `#f59e0b` | Warning state         |
 
 #### Highlight Colors
 
 Used for code highlighting and data attribute visualization.
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--color-highlight-primary` | `#01b5e2` | `#01b5e2` | Primary highlight color |
-| `--highlight-globals` | `#4fc3f7cc` | `#4fc3f7cc` | Global properties highlight |
-| `--highlight-context` | `#ffbd44cc` | `#ffbd44cc` | Context properties highlight |
-| `--highlight-entity` | `#00ca4ecc` | `#00ca4ecc` | Entity name highlight |
-| `--highlight-property` | `#ff605ccc` | `#ff605ccc` | Property name highlight |
-| `--highlight-action` | `#9900ffcc` | `#9900ffcc` | Action name highlight |
-| `--highlight-background` | `#1f2937` | `#1f2937` | Highlight tooltip background |
-| `--highlight-text` | `#9ca3af` | `#9ca3af` | Highlight tooltip text |
-| `--highlight-hover` | `rgba(255,255,255,0.05)` | `rgba(255,255,255,0.05)` | Highlight hover effect |
-| `--highlight-separator` | `rgba(255,255,255,0.05)` | `rgba(255,255,255,0.05)` | Separator in highlights |
+| Variable                    | Light                    | Dark                     | Usage                        |
+| --------------------------- | ------------------------ | ------------------------ | ---------------------------- |
+| `--color-highlight-primary` | `#01b5e2`                | `#01b5e2`                | Primary highlight color      |
+| `--highlight-globals`       | `#4fc3f7cc`              | `#4fc3f7cc`              | Global properties highlight  |
+| `--highlight-context`       | `#ffbd44cc`              | `#ffbd44cc`              | Context properties highlight |
+| `--highlight-entity`        | `#00ca4ecc`              | `#00ca4ecc`              | Entity name highlight        |
+| `--highlight-property`      | `#ff605ccc`              | `#ff605ccc`              | Property name highlight      |
+| `--highlight-action`        | `#9900ffcc`              | `#9900ffcc`              | Action name highlight        |
+| `--highlight-background`    | `#1f2937`                | `#1f2937`                | Highlight tooltip background |
+| `--highlight-text`          | `#9ca3af`                | `#9ca3af`                | Highlight tooltip text       |
+| `--highlight-hover`         | `rgba(255,255,255,0.05)` | `rgba(255,255,255,0.05)` | Highlight hover effect       |
+| `--highlight-separator`     | `rgba(255,255,255,0.05)` | `rgba(255,255,255,0.05)` | Separator in highlights      |
 
 #### Typography
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--font-family-base` | `system-ui, -apple-system, ...` | Same | Base font family |
-| `--font-mono` | `'SF Mono', 'Monaco', ...` | Same | Monospace font for code |
-| `--font-size-base` | `14px` | Same | Base font size |
-| `--font-size-label` | `13px` | Same | Label font size |
-| `--font-size-toggle` | `12px` | Same | Toggle/switch font size |
-| `--font-size-highlight-button` | `0.75rem` | Same | Highlight button font size |
-| `--line-height-base` | `1.5` | Same | Base line height |
-| `--font-weight-normal` | `400` | Same | Normal font weight |
-| `--font-weight-semibold` | `600` | Same | Semibold font weight |
+| Variable                       | Light                           | Dark | Usage                      |
+| ------------------------------ | ------------------------------- | ---- | -------------------------- |
+| `--font-family-base`           | `system-ui, -apple-system, ...` | Same | Base font family           |
+| `--font-mono`                  | `'SF Mono', 'Monaco', ...`      | Same | Monospace font for code    |
+| `--font-size-base`             | `14px`                          | Same | Base font size             |
+| `--font-size-label`            | `13px`                          | Same | Label font size            |
+| `--font-size-toggle`           | `12px`                          | Same | Toggle/switch font size    |
+| `--font-size-highlight-button` | `0.75rem`                       | Same | Highlight button font size |
+| `--line-height-base`           | `1.5`                           | Same | Base line height           |
+| `--font-weight-normal`         | `400`                           | Same | Normal font weight         |
+| `--font-weight-semibold`       | `600`                           | Same | Semibold font weight       |
 
 #### Spacing & Layout
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--spacing-header` | `6px 10px` | Same | Header padding |
-| `--spacing-footer` | `6px 10px` | Same | Footer padding |
-| `--spacing-button` | `4px 8px` | Same | Button padding |
-| `--spacing-button-group` | `1px` | Same | Gap between button group items |
-| `--spacing-grid-gap` | `12px` | Same | Grid gap spacing |
-| `--grid-min-box-width` | `350px` | Same | Minimum box width in grid |
-| `--grid-row-min-height` | `250px` | Same | Minimum grid row height |
-| `--grid-row-max-height` | `450px` | Same | Maximum grid row height |
-| `--grid-box-max-height-mobile` | `500px` | Same | Max box height on mobile |
+| Variable                       | Light      | Dark | Usage                          |
+| ------------------------------ | ---------- | ---- | ------------------------------ |
+| `--spacing-header`             | `6px 10px` | Same | Header padding                 |
+| `--spacing-footer`             | `6px 10px` | Same | Footer padding                 |
+| `--spacing-button`             | `4px 8px`  | Same | Button padding                 |
+| `--spacing-button-group`       | `1px`      | Same | Gap between button group items |
+| `--spacing-grid-gap`           | `12px`     | Same | Grid gap spacing               |
+| `--grid-min-box-width`         | `350px`    | Same | Minimum box width in grid      |
+| `--grid-row-min-height`        | `250px`    | Same | Minimum grid row height        |
+| `--grid-row-max-height`        | `450px`    | Same | Maximum grid row height        |
+| `--grid-box-max-height-mobile` | `500px`    | Same | Max box height on mobile       |
 
 #### Border Radius
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--radius-box` | `4px` | Same | Main container border radius |
-| `--radius-button` | `3px` | Same | Button border radius |
-| `--radius-button-group` | `4px` | Same | Button group border radius |
+| Variable                    | Light | Dark | Usage                          |
+| --------------------------- | ----- | ---- | ------------------------------ |
+| `--radius-box`              | `4px` | Same | Main container border radius   |
+| `--radius-button`           | `3px` | Same | Button border radius           |
+| `--radius-button-group`     | `4px` | Same | Button group border radius     |
 | `--radius-highlight-button` | `6px` | Same | Highlight button border radius |
 
 #### Shadows
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
+| Variable                 | Light                       | Dark                        | Usage                |
+| ------------------------ | --------------------------- | --------------------------- | -------------------- |
 | `--shadow-button-active` | `0 1px 2px rgba(0,0,0,0.1)` | `0 1px 2px rgba(0,0,0,0.3)` | Active button shadow |
-| `--shadow-dropdown` | `0 4px 6px rgba(0,0,0,0.1)` | `0 4px 6px rgba(0,0,0,0.5)` | Dropdown shadow |
+| `--shadow-dropdown`      | `0 4px 6px rgba(0,0,0,0.1)` | `0 4px 6px rgba(0,0,0,0.5)` | Dropdown shadow      |
 
 #### Monaco Editor
 
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--monaco-font-size` | `13px` | Same | Monaco editor font size |
-| `--monaco-line-height` | `1.5` | Same | Monaco editor line height |
+| Variable               | Light  | Dark | Usage                     |
+| ---------------------- | ------ | ---- | ------------------------- |
+| `--monaco-font-size`   | `13px` | Same | Monaco editor font size   |
+| `--monaco-line-height` | `1.5`  | Same | Monaco editor line height |
 
 ### Customization Examples
 
@@ -227,11 +230,13 @@ Used for code highlighting and data attribute visualization.
 
 ## Grid System
 
-Explorer uses a sophisticated Grid component with three height modes for responsive layouts.
+Explorer uses a sophisticated Grid component with three height modes for
+responsive layouts.
 
 ### Height Modes
 
 **1. Equal Heights** - All boxes in same row share the tallest content height
+
 ```tsx
 <Grid columns={3} heightMode="equal">
   <CodeBox code={event} />
@@ -241,6 +246,7 @@ Explorer uses a sophisticated Grid component with three height modes for respons
 ```
 
 **2. Auto Heights** - Each box sized independently to content
+
 ```tsx
 <Grid columns={3} heightMode="auto">
   <CodeBox code={shortEvent} />
@@ -249,7 +255,9 @@ Explorer uses a sophisticated Grid component with three height modes for respons
 </Grid>
 ```
 
-**3. Synced Heights** - Boxes in same row share height, different rows can differ
+**3. Synced Heights** - Boxes in same row share height, different rows can
+differ
+
 ```tsx
 <Grid columns={3} heightMode="synced">
   <CodeBox code={event} />
@@ -266,21 +274,27 @@ Explorer uses a sophisticated Grid component with three height modes for respons
 
 The Grid height synchronization required sophisticated coordination because:
 
-1. **Monaco reports content-only height** - Excludes header (40px) and border (2px)
-2. **Box needs total height** - Must add header + border for consistent row sizing
+1. **Monaco reports content-only height** - Excludes header (40px) and border
+   (2px)
+2. **Box needs total height** - Must add header + border for consistent row
+   sizing
 3. **Height changes cascade** - Content → Monaco → Box → Grid → Row
 4. **Race conditions during mount** - Components mount asynchronously
 5. **Automatic layout detection** - Must detect container resize events
 
 **Key Files:**
-- [useMonacoHeight.ts](./src/hooks/useMonacoHeight.ts) - Monaco content measurement
-- [GridHeightContext.tsx](./src/contexts/GridHeightContext.tsx) - Cross-component coordination
+
+- [useMonacoHeight.ts](./src/hooks/useMonacoHeight.ts) - Monaco content
+  measurement
+- [GridHeightContext.tsx](./src/contexts/GridHeightContext.tsx) -
+  Cross-component coordination
 - [box.tsx](./src/components/molecules/box.tsx) - Total height calculation
 - [grid.tsx](./src/components/organisms/grid.tsx) - Row height orchestration
 
 **Common Pitfalls:**
 
-1. **Forgetting Box overhead** - Always add header (40px) + border (2px) to Monaco height
+1. **Forgetting Box overhead** - Always add header (40px) + border (2px) to
+   Monaco height
 2. **Not handling async layout** - Monaco's layout() is async, use callbacks
 3. **ResizeObserver loops** - Debounce layout calls with requestAnimationFrame
 4. **Theme-specific heights** - Test both light and dark themes for consistency
@@ -325,7 +339,8 @@ const rowHeight = Math.max(...boxHeightsInRow); // Use tallest box
 
 ### Theme Integration
 
-Explorer includes two Monaco themes that automatically sync with `data-theme` attribute:
+Explorer includes two Monaco themes that automatically sync with `data-theme`
+attribute:
 
 - **`elbTheme-dark`** - Dark theme based on Prism Palenight
 - **`elbTheme-light`** - Light theme based on GitHub syntax highlighting
@@ -336,8 +351,10 @@ Explorer includes two Monaco themes that automatically sync with `data-theme` at
 // Theme detection in code.tsx
 const checkTheme = () => {
   const dataTheme = getDataTheme();
-  const isDark = dataTheme === 'dark' ||
-    (dataTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  const isDark =
+    dataTheme === 'dark' ||
+    (dataTheme === null &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
   const newTheme = isDark ? 'elbTheme-dark' : 'elbTheme-light';
   setMonacoTheme(newTheme);
 };
@@ -347,24 +364,25 @@ const checkTheme = () => {
 
 Current color scheme matches Prism Palenight:
 
-| Token Type | Color | Usage |
-|------------|-------|-------|
-| Comments | `#697098` | Gray, italic |
-| Strings | `#c3e88d` | Green |
-| Numbers | `#f78c6c` | Orange |
-| Functions | `#82aaff` | Blue |
-| Delimiters | `#c792ea` | Purple (braces, brackets) |
-| Operators | `#89ddff` | Cyan |
-| Keywords | `#c084fc` | Bright purple, italic |
-| Types/Classes | `#ffcb6b` | Yellow/gold |
-| Variables | `#bfc7d5` | Light gray |
-| Booleans | `#ff5874` | Red |
-| Tags (HTML) | `#bfc7d5` | Light gray |
-| Attributes (HTML) | `#bfc7d5` | Light gray |
+| Token Type        | Color     | Usage                     |
+| ----------------- | --------- | ------------------------- |
+| Comments          | `#697098` | Gray, italic              |
+| Strings           | `#c3e88d` | Green                     |
+| Numbers           | `#f78c6c` | Orange                    |
+| Functions         | `#82aaff` | Blue                      |
+| Delimiters        | `#c792ea` | Purple (braces, brackets) |
+| Operators         | `#89ddff` | Cyan                      |
+| Keywords          | `#c084fc` | Bright purple, italic     |
+| Types/Classes     | `#ffcb6b` | Yellow/gold               |
+| Variables         | `#bfc7d5` | Light gray                |
+| Booleans          | `#ff5874` | Red                       |
+| Tags (HTML)       | `#bfc7d5` | Light gray                |
+| Attributes (HTML) | `#bfc7d5` | Light gray                |
 
 ### Language-Specific Token Rules
 
-**Critical**: Monaco uses specific token names per language. Always add language-specific rules for proper highlighting:
+**Critical**: Monaco uses specific token names per language. Always add
+language-specific rules for proper highlighting:
 
 ```typescript
 // Generic rule (may not work)
@@ -382,29 +400,30 @@ Current color scheme matches Prism Palenight:
 
 ```typescript
 // HTML
-'entity.name.tag.html'           // <div>
-'attribute.name.html'            // class=""
-'attribute.value.html'           // ="value"
-'delimiter.html'                 // < > / =
-'comment.html'                   // <!-- -->
+'entity.name.tag.html'; // <div>
+'attribute.name.html'; // class=""
+'attribute.value.html'; // ="value"
+'delimiter.html'; // < > / =
+'comment.html'; // <!-- -->
 
 // JSON
-'string.key.json'                // "key":
-'string.value.json'              // : "value"
-'support.type.property-name.json' // Object keys
+'string.key.json'; // "key":
+'string.value.json'; // : "value"
+'support.type.property-name.json'; // Object keys
 
 // JavaScript/TypeScript
-'variable.parameter.ts'          // Function parameters
-'support.type.primitive.ts'      // string, number, etc.
-'entity.name.type.ts'            // Type names
-'keyword.operator.type.ts'       // : => |
+'variable.parameter.ts'; // Function parameters
+'support.type.primitive.ts'; // string, number, etc.
+'entity.name.type.ts'; // Type names
+'keyword.operator.type.ts'; // : => |
 ```
 
 ### Local Loading (Not CDN)
 
 **Problem:** Monaco's default behavior loads from CDN, causing CORS issues.
 
-**Solution:** Static synchronous imports in [code.tsx](./src/components/atoms/code.tsx):
+**Solution:** Static synchronous imports in
+[code.tsx](./src/components/atoms/code.tsx):
 
 ```typescript
 // Static imports for Monaco and workers
@@ -428,6 +447,7 @@ if (typeof window !== 'undefined') {
 ```
 
 **Why It Works:**
+
 - Static imports execute synchronously at module load time
 - `loader.config()` runs BEFORE any `<Editor>` component mounts
 - No network requests to CDN
@@ -502,6 +522,7 @@ Scopes:
 **Step 3: Verify in Browser DevTools**
 
 Inspect rendered Monaco token span:
+
 ```html
 <span class="mtk5">const</span>
 ```
@@ -510,7 +531,8 @@ Check computed styles for `.mtk5` - should have your foreground color.
 
 ### TypeScript IntelliSense
 
-Monaco Editor provides IntelliSense for walkerOS packages through a virtual file system.
+Monaco Editor provides IntelliSense for walkerOS packages through a virtual file
+system.
 
 **How It Works:**
 
@@ -524,6 +546,7 @@ User types code → Monaco TypeScript Service → Virtual File System
 ```
 
 **Bundled Types** (included at build time):
+
 - `@walkeros/core`
 - `@walkeros/collector`
 - `@walkeros/web-source-browser`
@@ -531,6 +554,7 @@ User types code → Monaco TypeScript Service → Virtual File System
 **Setup** (automatic):
 
 The [monaco-types.ts](./src/utils/monaco-types.ts) utility:
+
 1. Registers walkerOS type definitions with Monaco
 2. Creates virtual files in Monaco's file system
 3. Provides autocomplete and type checking
@@ -547,6 +571,63 @@ const handleBeforeMount = (monaco: typeof import('monaco-editor')) => {
 };
 ```
 
+### JSON IntelliSense
+
+CodeBox supports JSON Schema-driven IntelliSense via the `jsonSchema` prop. When
+provided, the editor offers autocomplete, validation, and hover documentation
+for JSON content.
+
+**How It Works:**
+
+```
+jsonSchema prop → Schema Registry → Monaco JSON Language Service
+                                         ↓
+                     Autocomplete, validation squiggles, hover docs
+```
+
+The [monaco-json-schema.ts](./src/utils/monaco-json-schema.ts) registry manages
+schemas globally. Each Code instance with a `jsonSchema` prop gets a unique
+model URI (`path`), and the registry calls `setDiagnosticsOptions` with all
+active schemas whenever one is added or removed.
+
+**Usage:**
+
+```tsx
+// Static schema (e.g., Flow.Setup)
+import { setupV2JsonSchema } from '@walkeros/core/dev';
+
+<CodeBox
+  code={flowJson}
+  onChange={setFlowJson}
+  language="json"
+  showFormat
+  jsonSchema={setupV2JsonSchema as Record<string, unknown>}
+/>;
+```
+
+**What the prop enables:**
+
+- `quickSuggestions` — auto-popup on typing (normally disabled)
+- `renderValidationDecorations` — red squiggles for schema violations
+- `hover` — tooltip descriptions from schema `description` fields
+- Unique model `path` — auto-generated to isolate schema per editor instance
+
+**Advanced: Direct Registry Access:**
+
+```typescript
+import {
+  registerJsonSchema,
+  unregisterJsonSchema,
+  generateModelPath,
+} from '@walkeros/explorer';
+
+// For dynamic schemas (e.g., package-specific settings fetched from CDN)
+const path = generateModelPath();
+registerJsonSchema(path, fetchedSchema);
+// ... later
+unregisterJsonSchema(path);
+```
+
 ---
 
 ## SCSS Architecture
@@ -590,7 +671,8 @@ src/styles/
 2. Use `--font-family-mono` (correct: `--font-mono`)
 3. Hardcode colors, spacing, or font sizes
 4. Use inline `style` attributes
-5. Skip wrapper pattern for widgets: `elb-rjsf-widget` → `elb-{name}-widget-wrapper`
+5. Skip wrapper pattern for widgets: `elb-rjsf-widget` →
+   `elb-{name}-widget-wrapper`
 
 ### Example Component SCSS
 
@@ -672,21 +754,26 @@ Don't add CSS variables for:
 ### Color Selection Guidelines
 
 **Primary Colors:**
+
 - Use for interactive elements (buttons, links, focus states)
 - Should have 4.5:1 contrast ratio with background
 - Provide variants (hover, active, disabled)
 
 **Text Colors:**
+
 - Primary text: 7:1 contrast minimum
 - Secondary text: 4.5:1 contrast minimum
-- Always test with [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- Always test with
+  [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
 
 **Syntax Highlighting:**
+
 - Follow established palette (Prism Palenight for dark, GitHub for light)
 - Ensure readability (4.5:1 minimum for code)
 - Use semantic colors (green for strings, red for errors)
 
 **Accessibility:**
+
 - All interactive elements: 3:1 contrast with background minimum
 - Focus indicators: 3:1 contrast with adjacent colors
 - Test with multiple color vision deficiencies
@@ -766,14 +853,14 @@ export function YourComponent({
 
 ```css
 /* custom-theme.css */
-[data-theme="dark"] {
+[data-theme='dark'] {
   --color-button-primary: #your-brand-color;
   --bg-app: #your-dark-bg;
   --bg-box: #your-dark-box-bg;
   --color-text: #your-dark-text;
 }
 
-[data-theme="light"] {
+[data-theme='light'] {
   --color-button-primary: #your-brand-color;
   --bg-app: #your-light-bg;
   --bg-box: #your-light-box-bg;
@@ -806,6 +893,7 @@ import './custom-theme.css'; // Overrides Explorer defaults
 **Cause:** Monaco theme not registered before Editor mounts
 
 **Solution:** Ensure `handleBeforeMount` registers themes:
+
 ```typescript
 const handleBeforeMount = (monaco: typeof import('monaco-editor')) => {
   registerAllThemes(monaco);
@@ -820,6 +908,7 @@ const handleBeforeMount = (monaco: typeof import('monaco-editor')) => {
 **Cause:** Missing language-specific token rules
 
 **Solution:** Add language variant rules:
+
 ```typescript
 { token: 'string', foreground: 'c3e88d' },        // Generic
 { token: 'string.html', foreground: 'c3e88d' },   // HTML-specific
@@ -833,6 +922,7 @@ const handleBeforeMount = (monaco: typeof import('monaco-editor')) => {
 **Cause:** `loader.config()` called after Editor mounts
 
 **Solution:** Use static imports at module level:
+
 ```typescript
 // Top of file - runs synchronously
 import * as monaco from 'monaco-editor';
@@ -848,6 +938,7 @@ if (typeof window !== 'undefined') {
 **Cause:** Monaco's `automaticLayout: true` missed resize event
 
 **Solution:** Add ResizeObserver to force layout:
+
 ```typescript
 const resizeObserver = new ResizeObserver(() => {
   requestAnimationFrame(() => editor.layout());
@@ -864,6 +955,7 @@ resizeObserver.observe(container);
 **Cause:** Box height calculation missing header/border
 
 **Solution:** Verify Box adds header (40px) + border (2px):
+
 ```typescript
 const boxHeight = monacoHeight + 40 + 2;
 ```
@@ -875,6 +967,7 @@ const boxHeight = monacoHeight + 40 + 2;
 **Cause:** Flex container constraints not set
 
 **Solution:** Apply flex constraints to Grid:
+
 ```scss
 .elb-grid {
   display: flex;
@@ -896,6 +989,7 @@ const boxHeight = monacoHeight + 40 + 2;
 **Cause:** Race condition between Monaco layout and Grid calculation
 
 **Solution:** Use `requestAnimationFrame` to batch updates:
+
 ```typescript
 requestAnimationFrame(() => {
   editor.layout();
@@ -912,6 +1006,7 @@ requestAnimationFrame(() => {
 **Cause:** Monaco theme name doesn't match data-theme value
 
 **Solution:** Map data-theme to Monaco theme name:
+
 ```typescript
 const themeName = dataTheme === 'dark' ? 'elbTheme-dark' : 'elbTheme-light';
 setMonacoTheme(themeName);
@@ -924,6 +1019,7 @@ setMonacoTheme(themeName);
 **Cause:** Components caching old CSS variable values
 
 **Solution:** CSS variables update immediately - check for hard-coded colors:
+
 ```scss
 // Wrong
 .component {
@@ -943,16 +1039,19 @@ setMonacoTheme(themeName);
 ### November 2025
 
 **HTML Token Standardization**
+
 - Changed HTML tag colors from red (#ff5572) to light gray (#bfc7d5)
 - Changed HTML attribute colors from green (#c3e88d) to light gray (#bfc7d5)
 - Kept attribute string values green for consistency
 - Added comprehensive HTML-specific token rules
 
 **Debug Logging Cleanup**
+
 - Removed all console.log statements from production code
 - Cleaned up code.tsx, monaco-setup.ts, theme files
 
 **Documentation Consolidation**
+
 - Created unified STYLE.md as single source of truth
 - Archived historical docs (STYLE.md, THEME.md, etc.)
 - Eliminated ~30% duplicate content
@@ -960,16 +1059,19 @@ setMonacoTheme(themeName);
 ### October 2025
 
 **Monaco Theme Rename**
+
 - Renamed `palenight` theme to `elbTheme-dark`
 - Renamed `lighthouse` theme to `elbTheme-light`
 - Updated all references
 
 **Local Monaco Loading**
+
 - Migrated from CDN to local npm package loading
 - Added static imports for Monaco and language workers
 - Configured MonacoEnvironment for Vite workers
 
 **Language-Specific Token Rules**
+
 - Added HTML-specific tokens
 - Added JSON-specific tokens
 - Added JavaScript/TypeScript-specific tokens
@@ -978,11 +1080,13 @@ setMonacoTheme(themeName);
 ### September 2025
 
 **Website Color Alignment**
+
 - Aligned Explorer colors with walkerOS website
 - Updated Prism Palenight colors for dark theme
 - Updated GitHub colors for light theme
 
 **Contrast Improvements**
+
 - Fixed low-contrast text issues (7:1 for primary text)
 - Fixed button contrast issues (4.5:1 minimum)
 - Fixed border contrast issues (3:1 minimum)