npm - @walkeros/explorer - Versions diffs - 2.1.3 → 2.1.5 - Mend

@walkeros/explorer 2.1.3 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (873) hide show

package/README.md CHANGED Viewed

@@ -71,7 +71,8 @@ Interactive three-panel editor: input → config → output transformation.
 #### DestinationDemo
-Interactive destination testing with event processing and mapping. Automatically captures destination.push() calls and displays the output.
+Interactive destination testing with event processing and mapping. Automatically
+captures destination.push() calls and displays the output.
 **Simple Usage** (Recommended):
@@ -90,12 +91,14 @@ const destination = { ...destinationPlausible, examples };
   mapping={examples.mapping.purchase}
   settings={{ domain: 'elbwalker.com' }}
   generic={true}
-/>
+/>;
 ```
-The component auto-detects `destination.examples.env.push` and uses it to capture function calls.
+The component auto-detects `destination.examples.env.push` and uses it to
+capture function calls.
 **Props:**
 - `destination`: Destination instance with `examples.env.push` export
 - `event`: walkerOS event to process
 - `mapping`: Optional mapping rules (object or JSON string)
@@ -107,7 +110,9 @@ The component auto-detects `destination.examples.env.push` and uses it to captur
 #### DestinationInitDemo
-Interactive destination initialization testing. Automatically captures destination.init() calls and displays the output (script loading, configuration calls).
+Interactive destination initialization testing. Automatically captures
+destination.init() calls and displays the output (script loading, configuration
+calls).
 **Simple Usage** (Recommended):
@@ -128,18 +133,21 @@ const destination = { ...destinationGtag, examples };
       pageview: false,
     },
   }}
-/>
+/>;
 ```
-The component auto-detects `destination.examples.env.init` and uses it to capture function calls during initialization.
+The component auto-detects `destination.examples.env.init` and uses it to
+capture function calls during initialization.
 **Props:**
 - `destination`: Destination instance with `examples.env.init` export
 - `settings`: Destination-specific settings (object or JSON string)
 - `labelSettings`: Label for settings panel (default: 'Settings')
 - `labelOutput`: Label for output panel (default: 'Result')
 **Use Cases:**
 - Testing destination initialization (script loading, gtag config calls)
 - Documenting initialization behavior
 - Debugging destination setup
@@ -372,7 +380,9 @@ import '@walkeros/explorer/styles.css';
 ```html
 <!-- Theme switching -->
-<html data-theme="dark">...</html>
+<html data-theme="dark">
+  ...
+</html>
 ```
 ### Customization
@@ -386,6 +396,7 @@ import '@walkeros/explorer/styles.css';
 ```
 **See [STYLE.md](./STYLE.md) for:**
 - Complete Theme Variables Reference (all CSS variables)
 - Grid System (height modes, implementation)
 - Monaco Editor (theming, tokens, IntelliSense)
@@ -643,7 +654,8 @@ checklist.
 ## Monaco Editor Height Management
-The explorer uses Monaco Editor with a flexible, responsive height system that works across all contexts.
+The explorer uses Monaco Editor with a flexible, responsive height system that
+works across all contexts.
 ### Height Modes
@@ -666,6 +678,7 @@ CodeBox supports three height modes:
 ### Usage Examples
 **Grid Context - Equal Heights:**
 ```tsx
 // Don't use autoHeight - maintains equal row heights
 <Grid columns={3}>
@@ -676,6 +689,7 @@ CodeBox supports three height modes:
 ```
 **Standalone - Content-Based Height:**
 ```tsx
 // Use autoHeight to eliminate blank space
 <CodeBox
@@ -687,6 +701,7 @@ CodeBox supports three height modes:
 ```
 **Flex Context - Fill Parent:**
 ```tsx
 // Don't use autoHeight - fills available flex space
 <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
@@ -695,6 +710,7 @@ CodeBox supports three height modes:
 ```
 **Explicit Height Override:**
 ```tsx
 <CodeBox code={longCode} height="600px" />
 ```
@@ -702,6 +718,7 @@ CodeBox supports three height modes:
 ### How Auto-Height Works
 When `autoHeight` is enabled:
 1. Monaco Editor's `getContentHeight()` API measures actual content height
 2. Hook listens to `onDidContentSizeChange` events (debounced)
 3. Height calculated and bounded by min/max values
@@ -709,6 +726,7 @@ When `autoHeight` is enabled:
 5. Updates automatically on content changes, typing, or formatting
 **Technical Details:**
 - Uses `useMonacoHeight` hook with Monaco's official APIs
 - Avoids infinite loops by not calling `layout()` in content change handler
 - Includes overhead calculation for header/borders (45px)
@@ -716,25 +734,31 @@ When `autoHeight` is enabled:
 ### Key Files
-- `explorer/src/components/atoms/code.tsx` - Monaco wrapper with autoHeight integration
+- `explorer/src/components/atoms/code.tsx` - Monaco wrapper with autoHeight
+  integration
 - `explorer/src/hooks/useMonacoHeight.ts` - Content height calculation hook
-- `explorer/src/styles/components/atoms/_code.scss` - Flex-based Monaco container
-- `explorer/src/styles/components/organisms/_box.scss` - Context-specific height rules
+- `explorer/src/styles/components/atoms/_code.scss` - Flex-based Monaco
+  container
+- `explorer/src/styles/components/organisms/_box.scss` - Context-specific height
+  rules
 ### Troubleshooting
 **Monaco shows wrong height?**
 - Check parent context: Grid, Flex, or standalone?
 - Grid/Flex: Don't use autoHeight (use default height="100%")
 - Standalone: Add `autoHeight={{ min: 100, max: 600 }}`
 - Override with explicit `height` prop if needed
 **AutoHeight not working?**
 - Ensure Monaco has mounted (check browser console for errors)
 - Verify min/max boundaries aren't too restrictive
 - Check that content is actually rendering (empty code = min height)
 **Height grows infinitely?**
 - Should not happen with current implementation
 - Hook avoids calling `layout()` in content change handler
 - Report if you encounter this bug