@walkeros/explorer 0.3.0 → 0.3.1

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   loadPackageTypes,
   loadTypeLibraryFromURL,
   registerWalkerOSTypes
-} from "./chunk-P5UDSGZL.mjs";
+} from "./chunk-BEAIHYJ5.mjs";
 
 // src/components/demos/MappingDemo.tsx
 import { useState as useState5, useCallback as useCallback4, useEffect as useEffect4 } from "react";
@@ -202,8 +202,9 @@ var palenightTheme = {
     // Transparent
     "editorLineNumber.foreground": "#676E95",
     "editorLineNumber.activeForeground": "#c084fc",
-    // Editor Cursor & Selection - transparent for read-only snippets
-    "editorCursor.foreground": "#00000000",
+    // Editor Cursor & Selection
+    "editorCursor.foreground": "#c084fc",
+    // Purple cursor for dark theme
     "editor.selectionBackground": "#00000000",
     "editor.inactiveSelectionBackground": "#00000000",
     "editor.selectionHighlightBackground": "#00000000",
@@ -404,8 +405,9 @@ var lighthouseTheme = {
     // Transparent
     "editorLineNumber.foreground": "#1B1F2380",
     "editorLineNumber.activeForeground": "#6F42C1",
-    // Editor Cursor & Selection - transparent for read-only snippets
-    "editorCursor.foreground": "#00000000",
+    // Editor Cursor & Selection
+    "editorCursor.foreground": "#6F42C1",
+    // Purple cursor for light theme
     "editor.selectionBackground": "#00000000",
     "editor.inactiveSelectionBackground": "#00000000",
     "editor.selectionHighlightBackground": "#00000000",
@@ -548,6 +550,130 @@ function registerDataElbStyles() {
   document.head.appendChild(style);
 }
 
+// src/utils/monaco-formatters.ts
+import * as prettier from "prettier/standalone";
+import prettierBabel from "prettier/plugins/babel";
+import prettierEstree from "prettier/plugins/estree";
+import prettierTypescript from "prettier/plugins/typescript";
+import prettierHtml from "prettier/plugins/html";
+function registerFormatters(monacoInstance) {
+  monacoInstance.languages.registerDocumentFormattingEditProvider(
+    "javascript",
+    {
+      async provideDocumentFormattingEdits(model, options) {
+        try {
+          const text = model.getValue();
+          const formatted = await prettier.format(text, {
+            parser: "babel",
+            plugins: [prettierBabel, prettierEstree],
+            tabWidth: options.tabSize,
+            useTabs: !options.insertSpaces,
+            semi: true,
+            singleQuote: true,
+            trailingComma: "all"
+          });
+          return [
+            {
+              range: model.getFullModelRange(),
+              text: formatted
+            }
+          ];
+        } catch (error) {
+          return [];
+        }
+      }
+    }
+  );
+  monacoInstance.languages.registerDocumentFormattingEditProvider(
+    "typescript",
+    {
+      async provideDocumentFormattingEdits(model, options) {
+        try {
+          const text = model.getValue();
+          const formatted = await prettier.format(text, {
+            parser: "typescript",
+            plugins: [prettierTypescript, prettierEstree],
+            tabWidth: options.tabSize,
+            useTabs: !options.insertSpaces,
+            semi: true,
+            singleQuote: true,
+            trailingComma: "all"
+          });
+          return [
+            {
+              range: model.getFullModelRange(),
+              text: formatted
+            }
+          ];
+        } catch (error) {
+          return [];
+        }
+      }
+    }
+  );
+  monacoInstance.languages.registerDocumentFormattingEditProvider("json", {
+    async provideDocumentFormattingEdits(model, options) {
+      try {
+        const text = model.getValue();
+        const parsed = JSON.parse(text);
+        const formatted = JSON.stringify(parsed, null, options.tabSize);
+        return [
+          {
+            range: model.getFullModelRange(),
+            text: formatted
+          }
+        ];
+      } catch (error) {
+        return [];
+      }
+    }
+  });
+  monacoInstance.languages.registerDocumentFormattingEditProvider("html", {
+    async provideDocumentFormattingEdits(model, options) {
+      try {
+        const text = model.getValue();
+        const formatted = await prettier.format(text, {
+          parser: "html",
+          plugins: [prettierHtml],
+          tabWidth: options.tabSize,
+          useTabs: !options.insertSpaces,
+          htmlWhitespaceSensitivity: "css"
+        });
+        return [
+          {
+            range: model.getFullModelRange(),
+            text: formatted
+          }
+        ];
+      } catch (error) {
+        return [];
+      }
+    }
+  });
+  monacoInstance.languages.registerDocumentFormattingEditProvider("css", {
+    async provideDocumentFormattingEdits(model, options) {
+      try {
+        const text = model.getValue();
+        const formatted = await prettier.format(text, {
+          parser: "css",
+          plugins: [prettierHtml],
+          // CSS parser is in html plugin
+          tabWidth: options.tabSize,
+          useTabs: !options.insertSpaces
+        });
+        return [
+          {
+            range: model.getFullModelRange(),
+            text: formatted
+          }
+        ];
+      } catch (error) {
+        return [];
+      }
+    }
+  });
+}
+
 // src/hooks/useMonacoHeight.ts
 import { useState, useRef, useCallback } from "react";
 function useMonacoHeight({
@@ -738,9 +864,10 @@ function Code({
       return;
     }
     registerAllThemes(monaco);
+    registerFormatters(monaco);
     if (packages && packages.length > 0) {
       registerWalkerOSTypes(monaco);
-      const { loadPackageTypes: loadPackageTypes2 } = await import("./monaco-types-T3WXA7KH.mjs");
+      const { loadPackageTypes: loadPackageTypes2 } = await import("./monaco-types-GBPMPIMU.mjs");
       for (const pkg of packages) {
         if (pkg !== "@walkeros/core") {
           await loadPackageTypes2(monaco, { package: pkg }).catch((err) => {
@@ -823,7 +950,26 @@ function Code({
           vertical: "auto",
           horizontal: "auto",
           alwaysConsumeMouseWheel: false
-        }
+        },
+        // Cursor and selection behavior
+        cursorBlinking: "blink",
+        // Make cursor blink visibly
+        cursorStyle: "line",
+        // Use line cursor (most visible)
+        cursorWidth: 2,
+        // Make cursor 2px wide for better visibility
+        cursorSmoothCaretAnimation: "off",
+        // Disable smooth cursor animation
+        selectionHighlight: false,
+        // Disable auto-highlighting of selected text occurrences
+        occurrencesHighlight: "off",
+        // Disable highlighting matching words
+        selectOnLineNumbers: false,
+        // Don't select line when clicking line numbers
+        wordBasedSuggestions: "off",
+        // Reduce auto-completion interference
+        quickSuggestions: false
+        // Disable quick suggestions popup
       }
     }
   ) });
@@ -2163,10 +2309,14 @@ function PromotionPlayground({
   const [capturedEvent, setCapturedEvent] = useState12(
     null
   );
+  const [eventInput, setEventInput] = useState12(
+    "// Click elements in the preview to see events"
+  );
   const handleEvent = useCallback9((event) => {
     setCapturedEvent(event);
+    setEventInput(JSON.stringify(event, null, 2));
   }, []);
-  const eventDisplay = capturedEvent ? JSON.stringify(capturedEvent, null, 2) : "// Click elements in the preview to see events";
+  const eventDisplay = eventInput;
   return /* @__PURE__ */ jsxs9(Grid, { columns: 5, rowHeight: 600, children: [
     /* @__PURE__ */ jsx16(
       BrowserBox,
@@ -2198,7 +2348,7 @@ function PromotionPlayground({
       {
         label: labelEvents,
         code: eventDisplay,
-        disabled: true,
+        onChange: setEventInput,
         language: "json",
         wordWrap: true
       }
@@ -2216,7 +2366,7 @@ function PromotionPlayground({
     /* @__PURE__ */ jsx16(
       CollectorBox,
       {
-        event: capturedEvent ? JSON.stringify(capturedEvent) : "{}",
+        event: eventInput,
         mapping: mappingInput,
         destination,
         label: labelResult,
@@ -10238,22 +10388,96 @@ function ConfigEditor(props) {
   return /* @__PURE__ */ jsx87(ConfigEditorBox, { ...props });
 }
 
+// src/components/molecules/code-snippet.tsx
+import { useState as useState36, useEffect as useEffect24 } from "react";
+
+// src/utils/format-code.ts
+import * as prettier2 from "prettier/standalone";
+import prettierBabel2 from "prettier/plugins/babel";
+import prettierEstree2 from "prettier/plugins/estree";
+import prettierTypescript2 from "prettier/plugins/typescript";
+import prettierHtml2 from "prettier/plugins/html";
+async function formatCode(code, language) {
+  try {
+    let formatted;
+    switch (language) {
+      case "javascript":
+      case "js":
+        formatted = await prettier2.format(code, {
+          parser: "babel",
+          plugins: [prettierBabel2, prettierEstree2],
+          semi: true,
+          singleQuote: true,
+          trailingComma: "all"
+        });
+        break;
+      case "typescript":
+      case "ts":
+      case "tsx":
+        formatted = await prettier2.format(code, {
+          parser: "typescript",
+          plugins: [prettierTypescript2, prettierEstree2],
+          semi: true,
+          singleQuote: true,
+          trailingComma: "all"
+        });
+        break;
+      case "json":
+        const parsed = JSON.parse(code);
+        formatted = JSON.stringify(parsed, null, 2);
+        break;
+      case "html":
+        formatted = await prettier2.format(code, {
+          parser: "html",
+          plugins: [prettierHtml2],
+          htmlWhitespaceSensitivity: "css"
+        });
+        break;
+      case "css":
+      case "scss":
+        formatted = await prettier2.format(code, {
+          parser: "css",
+          plugins: [prettierHtml2]
+        });
+        break;
+      default:
+        return code;
+    }
+    return formatted.trim();
+  } catch (error) {
+    return code;
+  }
+}
+
 // src/components/molecules/code-snippet.tsx
 import { jsx as jsx88 } from "react/jsx-runtime";
 function CodeSnippet(props) {
   const {
+    code,
+    language = "javascript",
     className,
     disabled = true,
     showCopy = true,
     autoHeight = { min: 20, max: 600 },
     fontSize = 15,
+    format: format3 = true,
     ...rest
   } = props;
   const snippetClassName = `elb-code-snippet ${className || ""}`.trim();
+  const [formattedCode, setFormattedCode] = useState36(code);
+  useEffect24(() => {
+    if (format3) {
+      formatCode(code, language).then(setFormattedCode);
+    } else {
+      setFormattedCode(code);
+    }
+  }, [code, language, format3]);
   return /* @__PURE__ */ jsx88(
     CodeBox,
     {
       ...rest,
+      code: formattedCode,
+      language,
       className: snippetClassName,
       showHeader: false,
       disabled,
@@ -10265,7 +10489,7 @@ function CodeSnippet(props) {
 }
 
 // src/components/molecules/property-table.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 import { jsx as jsx89, jsxs as jsxs66 } from "react/jsx-runtime";
 function schemaToProperties(schema) {
   const properties = [];
@@ -10377,10 +10601,10 @@ function PropertyModal({ property, isOpen, onClose }) {
   ] }) });
 }
 function PropertyTable({ schema, className }) {
-  const [selectedProperty, setSelectedProperty] = useState36(
+  const [selectedProperty, setSelectedProperty] = useState37(
     null
   );
-  const [isModalOpen, setIsModalOpen] = useState36(false);
+  const [isModalOpen, setIsModalOpen] = useState37(false);
   const properties = schemaToProperties(schema);
   const hasRequiredProperties = properties.some(
     (property) => property.required
@@ -10572,7 +10796,7 @@ function PanelHints({
   ] });
 }
 
-// node_modules/@mdx-js/react/lib/index.js
+// ../node_modules/@mdx-js/react/lib/index.js
 import React23 from "react";
 var emptyComponents = {};
 var MDXContext = React23.createContext(emptyComponents);
@@ -10662,7 +10886,7 @@ var MDXProvider2 = ({ children }) => {
   return /* @__PURE__ */ jsx93(MDXProvider, { components, children });
 };
 
-// node_modules/clsx/dist/clsx.mjs
+// ../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -10677,7 +10901,7 @@ function clsx() {
   return n;
 }
 
-// node_modules/tailwind-merge/dist/bundle-mjs.mjs
+// ../node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
 var createClassGroupUtils = (config) => {
   const classMap = createClassMap(config);