@solidxai/core-ui 0.1.12-beta.0 → 0.1.12-beta.1

package/dist/components/common/SolidLoadingState.module.css

@@ -0,0 +1,56 @@
+.solidLoadingState {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem;
+  background:
+    radial-gradient(circle at top, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 38%),
+    var(--background);
+}
+
+.card {
+  width: min(100%, 28rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.875rem;
+  text-align: center;
+  padding: 2rem 1.5rem;
+  border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
+  border-radius: 1rem;
+  background: color-mix(in srgb, var(--card) 94%, white 6%);
+  box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.35);
+}
+
+.spinner {
+  color: var(--primary-color);
+}
+
+.title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--foreground);
+}
+
+.description {
+  margin: 0;
+  max-width: 24rem;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--muted-foreground);
+}
+
+@media (max-width: 640px) {
+  .solidLoadingState {
+    padding: 1.25rem;
+  }
+
+  .card {
+    padding: 1.5rem 1.25rem;
+    border-radius: 0.875rem;
+  }
+}

package/dist/components/common/SolidLoadingState.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { SolidSpinner } from "../shad-cn-ui";
+import styles from "./SolidLoadingState.module.css";
+
+type SolidLoadingStateProps = {
+  title?: string;
+  description?: string;
+  spinnerLabel?: string;
+  children?: ReactNode;
+};
+
+export function SolidLoadingState({
+  title = "Loading",
+  description = "Please wait while we prepare things for you.",
+  spinnerLabel,
+  children,
+}: SolidLoadingStateProps) {
+  return (
+    <section className={styles.solidLoadingState} aria-busy="true" aria-live="polite">
+      <div className={styles.card}>
+        <SolidSpinner size={28} className={styles.spinner} label={spinnerLabel} />
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.description}>{description}</p>
+        {children}
+      </div>
+    </section>
+  );
+}

package/dist/components/core/json/SolidJsonEditor.css

@@ -0,0 +1,195 @@
+.solid-json-editor-host {
+  min-height: 30rem;
+  flex: 1 1 auto;
+}
+
+.solid-json-editor-host.sdix-json-editor {
+  min-height: 0;
+  height: 100%;
+}
+
+.solid-json-editor .jsoneditor {
+  border: none;
+}
+
+.solid-json-editor.sdix-json-editor .jsoneditor,
+.solid-json-editor.sdix-json-editor div.jsoneditor-outer,
+.solid-json-editor.sdix-json-editor .ace-jsoneditor {
+  height: 100% !important;
+}
+
+.solid-json-editor .jsoneditor-menu {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--primary-color, #4f46e5) 88%, #1f2937 12%),
+      color-mix(in srgb, var(--primary-color, #4f46e5) 76%, #111827 24%)
+    );
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+}
+
+.solid-json-editor .jsoneditor-menu > button,
+.solid-json-editor .jsoneditor-menu > .jsoneditor-modes > button,
+.solid-json-editor .jsoneditor-menu a {
+  color: rgba(255, 255, 255, 0.95);
+  opacity: 0.95;
+}
+
+.solid-json-editor .jsoneditor-menu > button:hover,
+.solid-json-editor .jsoneditor-menu > .jsoneditor-modes > button:hover {
+  background-color: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.24);
+}
+
+.solid-json-editor .jsoneditor-menu > button:focus,
+.solid-json-editor .jsoneditor-menu > button:active,
+.solid-json-editor .jsoneditor-menu > .jsoneditor-modes > button:focus,
+.solid-json-editor .jsoneditor-menu > .jsoneditor-modes > button:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.solid-json-editor .jsoneditor-menu > button:disabled,
+.solid-json-editor .jsoneditor-menu > .jsoneditor-modes > button:disabled {
+  opacity: 0.6;
+}
+
+.solid-json-editor .ace_tooltip {
+  max-width: 13rem;
+  width: max-content;
+  min-width: 0;
+  padding: 0.35rem 0.55rem;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  background: color-mix(in srgb, var(--surface-card, #ffffff) 96%, #111827 4%);
+  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
+  color: var(--foreground);
+  font-size: 0.76rem;
+  line-height: 1.35;
+  white-space: normal;
+  overflow: hidden;
+}
+
+.solid-json-editor .ace_tooltip.ace_dark {
+  background: color-mix(in srgb, #111827 92%, var(--primary-color, #4f46e5) 8%);
+  border-color: color-mix(in srgb, var(--primary-color, #4f46e5) 26%, transparent);
+  color: #f8fafc;
+}
+
+.solid-json-editor .jsoneditor-navigation-bar {
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu {
+  width: 15rem;
+  background: var(--surface-card, #ffffff);
+  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border-radius: 0.9rem;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
+  padding: 0.35rem;
+  overflow: hidden;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu button {
+  width: 100%;
+  min-height: 2rem;
+  color: var(--foreground);
+  border-radius: 0.65rem;
+  font-family: inherit;
+  font-size: 0.86rem;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default {
+  width: calc(100% - 2rem);
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
+  width: 2rem;
+  height: 2rem;
+  border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu button:hover,
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu button:focus {
+  color: var(--foreground);
+  background: color-mix(in srgb, var(--primary-color, #4f46e5) 10%, #ffffff 90%);
+  outline: none;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover,
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus {
+  color: #ffffff;
+  background: color-mix(in srgb, var(--primary-color, #4f46e5) 82%, #1f2937 18%);
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu li ul {
+  left: 0;
+  margin-top: 0.2rem;
+  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+  border-radius: 0.75rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
+  background: color-mix(in srgb, var(--surface-ground, #f8fafc) 94%, #ffffff 6%);
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-menu li ul li button {
+  padding-left: 1.8rem;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-text {
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-separator {
+  border-top-color: color-mix(in srgb, var(--border) 72%, transparent);
+  margin-top: 0.35rem;
+  padding-top: 0.35rem;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-text,
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin {
+  color: inherit;
+}
+
+.solid-json-editor .jsoneditor-contextmenu .jsoneditor-expand {
+  opacity: 0.8;
+}
+
+.solid-json-editor div.jsoneditor-tree,
+.solid-json-editor textarea.jsoneditor-text,
+.solid-json-editor .ace-jsoneditor {
+  min-height: 28rem;
+}
+
+.solid-json-editor textarea.jsoneditor-text,
+.solid-json-editor .ace-jsoneditor,
+.solid-json-editor .ace-jsoneditor .ace_text-layer,
+.solid-json-editor .ace-jsoneditor .ace_line {
+  font-size: 12px;
+}
+
+.solid-json-editor textarea.jsoneditor-text,
+.solid-json-editor .ace-jsoneditor,
+.solid-json-editor .ace-jsoneditor .ace_gutter,
+.solid-json-editor .ace-jsoneditor .ace_scroller,
+.solid-json-editor .ace-jsoneditor .ace_content,
+.solid-json-editor .ace-jsoneditor .ace_text-layer,
+.solid-json-editor .ace-jsoneditor .ace_line,
+.solid-json-editor .ace-jsoneditor .ace_gutter-layer {
+  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+  font-size: 12px !important;
+  line-height: 1.5 !important;
+}
+
+.solid-json-editor .ace-jsoneditor .ace_line,
+.solid-json-editor .ace-jsoneditor .ace_gutter-cell {
+  line-height: 1.5 !important;
+}
+
+.solid-json-editor .ace-jsoneditor .ace_cursor {
+  border-left-width: 1px !important;
+}
+
+.solid-json-editor.is-readonly .ace-jsoneditor .ace_cursor {
+  opacity: 0.45;
+}

package/dist/components/core/json/SolidJsonEditor.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import "jsoneditor/dist/jsoneditor.css";
+import "./SolidJsonEditor.css";
+export type SolidJsonEditorHandle = {
+    format: () => void;
+    getText: () => string;
+};
+type SolidJsonEditorProps = {
+    value: any;
+    resetToken: string;
+    readOnly?: boolean;
+    className?: string;
+    onValueChange?: (value: any) => void;
+    onTextChange?: (text: string) => void;
+    onErrorChange?: (message: string | null) => void;
+};
+export declare const SolidJsonEditor: import("react").ForwardRefExoticComponent<SolidJsonEditorProps & import("react").RefAttributes<SolidJsonEditorHandle>>;
+export {};
+//# sourceMappingURL=SolidJsonEditor.d.ts.map

package/dist/components/core/json/SolidJsonEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidJsonEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/core/json/SolidJsonEditor.tsx"],"names":[],"mappings":";AACA,OAAO,gCAAgC,CAAC;AACxC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,eAAe,wHAkI1B,CAAC"}

package/dist/components/core/json/SolidJsonEditor.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import "jsoneditor/dist/jsoneditor.css";
+import "./SolidJsonEditor.css";
+export var SolidJsonEditor = forwardRef(function SolidJsonEditor(_a, ref) {
+    var value = _a.value, resetToken = _a.resetToken, _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c, onValueChange = _a.onValueChange, onTextChange = _a.onTextChange, onErrorChange = _a.onErrorChange;
+    var containerRef = useRef(null);
+    var editorRef = useRef(null);
+    var latestValueRef = useRef(value);
+    useEffect(function () {
+        latestValueRef.current = value;
+    }, [value]);
+    var emitState = function () {
+        var _a, _b, _c, _d;
+        var editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        try {
+            var nextValue = editor.get();
+            var nextText = (_b = (_a = editor.getText) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : JSON.stringify(nextValue, null, 2);
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(nextText);
+            onErrorChange === null || onErrorChange === void 0 ? void 0 : onErrorChange(null);
+        }
+        catch (error) {
+            var rawText = (_d = (_c = editor.getText) === null || _c === void 0 ? void 0 : _c.call(editor)) !== null && _d !== void 0 ? _d : "";
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(rawText);
+            onErrorChange === null || onErrorChange === void 0 ? void 0 : onErrorChange((error === null || error === void 0 ? void 0 : error.message) ? String(error.message) : "The JSON is currently invalid.");
+        }
+    };
+    useImperativeHandle(ref, function () { return ({
+        format: function () {
+            var _a, _b;
+            try {
+                (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+            catch (_error) {
+                // jsoneditor already surfaces parse states through onErrorChange.
+            }
+            emitState();
+        },
+        getText: function () {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getText) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : "";
+        },
+    }); }, []);
+    useEffect(function () {
+        if (!containerRef.current || editorRef.current) {
+            return;
+        }
+        var destroyed = false;
+        void import("jsoneditor").then(function (jsonEditorModule) {
+            var _a, _b, _c;
+            if (destroyed || !containerRef.current || editorRef.current) {
+                return;
+            }
+            var JSONEditor = (_a = jsonEditorModule === null || jsonEditorModule === void 0 ? void 0 : jsonEditorModule.default) !== null && _a !== void 0 ? _a : jsonEditorModule;
+            editorRef.current = new JSONEditor(containerRef.current, {
+                mode: "code",
+                modes: ["code"],
+                mainMenuBar: true,
+                navigationBar: true,
+                statusBar: true,
+                search: true,
+                enableSort: false,
+                enableTransform: false,
+                onChange: function () { return emitState(); },
+            });
+            try {
+                editorRef.current.set(latestValueRef.current);
+            }
+            catch (_error) {
+                // Ignore seed failures and let jsoneditor surface them through its own state.
+            }
+            emitState();
+            if ((_c = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.aceEditor) === null || _c === void 0 ? void 0 : _c.setReadOnly) {
+                editorRef.current.aceEditor.setReadOnly(readOnly);
+            }
+        });
+        return function () {
+            var _a, _b;
+            destroyed = true;
+            (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            editorRef.current = null;
+        };
+    }, []);
+    useEffect(function () {
+        if (!editorRef.current) {
+            return;
+        }
+        try {
+            editorRef.current.set(latestValueRef.current);
+        }
+        catch (_error) {
+            // Ignore reset parse failures and surface them via emitState instead.
+        }
+        emitState();
+    }, [resetToken]);
+    useEffect(function () {
+        var _a, _b;
+        if (!((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.aceEditor) === null || _b === void 0 ? void 0 : _b.setReadOnly)) {
+            return;
+        }
+        editorRef.current.aceEditor.setReadOnly(readOnly);
+    }, [readOnly]);
+    return (_jsx("div", { ref: containerRef, className: "solid-json-editor-host solid-json-editor ".concat(readOnly ? "is-readonly" : "", " ").concat(className).trim() }));
+});
+//# sourceMappingURL=SolidJsonEditor.js.map

package/dist/components/core/json/SolidJsonEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidJsonEditor.js","sourceRoot":"","sources":["../../../../src/components/core/json/SolidJsonEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport \"jsoneditor/dist/jsoneditor.css\";\nimport \"./SolidJsonEditor.css\";\n\nexport type SolidJsonEditorHandle = {\n  format: () => void;\n  getText: () => string;\n};\n\ntype SolidJsonEditorProps = {\n  value: any;\n  resetToken: string;\n  readOnly?: boolean;\n  className?: string;\n  onValueChange?: (value: any) => void;\n  onTextChange?: (text: string) => void;\n  onErrorChange?: (message: string | null) => void;\n};\n\nexport const SolidJsonEditor = forwardRef<SolidJsonEditorHandle, SolidJsonEditorProps>(function SolidJsonEditor(\n  {\n    value,\n    resetToken,\n    readOnly = false,\n    className = \"\",\n    onValueChange,\n    onTextChange,\n    onErrorChange,\n  },\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<any>(null);\n  const latestValueRef = useRef<any>(value);\n\n  useEffect(() => {\n    latestValueRef.current = value;\n  }, [value]);\n\n  const emitState = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      return;\n    }\n\n    try {\n      const nextValue = editor.get();\n      const nextText = editor.getText?.() ?? JSON.stringify(nextValue, null, 2);\n      onValueChange?.(nextValue);\n      onTextChange?.(nextText);\n      onErrorChange?.(null);\n    } catch (error: any) {\n      const rawText = editor.getText?.() ?? \"\";\n      onTextChange?.(rawText);\n      onErrorChange?.(\n        error?.message ? String(error.message) : \"The JSON is currently invalid.\",\n      );\n    }\n  };\n\n  useImperativeHandle(ref, () => ({\n    format() {\n      try {\n        editorRef.current?.format?.();\n      } catch (_error) {\n        // jsoneditor already surfaces parse states through onErrorChange.\n      }\n\n      emitState();\n    },\n    getText() {\n      return editorRef.current?.getText?.() ?? \"\";\n    },\n  }), []);\n\n  useEffect(() => {\n    if (!containerRef.current || editorRef.current) {\n      return;\n    }\n\n    let destroyed = false;\n\n    void import(\"jsoneditor\").then((jsonEditorModule: any) => {\n      if (destroyed || !containerRef.current || editorRef.current) {\n        return;\n      }\n\n      const JSONEditor = jsonEditorModule?.default ?? jsonEditorModule;\n      editorRef.current = new JSONEditor(containerRef.current, {\n        mode: \"code\",\n        modes: [\"code\"],\n        mainMenuBar: true,\n        navigationBar: true,\n        statusBar: true,\n        search: true,\n        enableSort: false,\n        enableTransform: false,\n        onChange: () => emitState(),\n      });\n\n      try {\n        editorRef.current.set(latestValueRef.current);\n      } catch (_error) {\n        // Ignore seed failures and let jsoneditor surface them through its own state.\n      }\n\n      emitState();\n\n      if (editorRef.current?.aceEditor?.setReadOnly) {\n        editorRef.current.aceEditor.setReadOnly(readOnly);\n      }\n    });\n\n    return () => {\n      destroyed = true;\n      editorRef.current?.destroy?.();\n      editorRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!editorRef.current) {\n      return;\n    }\n\n    try {\n      editorRef.current.set(latestValueRef.current);\n    } catch (_error) {\n      // Ignore reset parse failures and surface them via emitState instead.\n    }\n\n    emitState();\n  }, [resetToken]);\n\n  useEffect(() => {\n    if (!editorRef.current?.aceEditor?.setReadOnly) {\n      return;\n    }\n\n    editorRef.current.aceEditor.setReadOnly(readOnly);\n  }, [readOnly]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={`solid-json-editor-host solid-json-editor ${readOnly ? \"is-readonly\" : \"\"} ${className}`.trim()}\n    />\n  );\n});\n"]}

package/dist/components/core/json/SolidJsonEditor.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import "jsoneditor/dist/jsoneditor.css";
+import "./SolidJsonEditor.css";
+
+export type SolidJsonEditorHandle = {
+  format: () => void;
+  getText: () => string;
+};
+
+type SolidJsonEditorProps = {
+  value: any;
+  resetToken: string;
+  readOnly?: boolean;
+  className?: string;
+  onValueChange?: (value: any) => void;
+  onTextChange?: (text: string) => void;
+  onErrorChange?: (message: string | null) => void;
+};
+
+export const SolidJsonEditor = forwardRef<SolidJsonEditorHandle, SolidJsonEditorProps>(function SolidJsonEditor(
+  {
+    value,
+    resetToken,
+    readOnly = false,
+    className = "",
+    onValueChange,
+    onTextChange,
+    onErrorChange,
+  },
+  ref,
+) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<any>(null);
+  const latestValueRef = useRef<any>(value);
+
+  useEffect(() => {
+    latestValueRef.current = value;
+  }, [value]);
+
+  const emitState = () => {
+    const editor = editorRef.current;
+
+    if (!editor) {
+      return;
+    }
+
+    try {
+      const nextValue = editor.get();
+      const nextText = editor.getText?.() ?? JSON.stringify(nextValue, null, 2);
+      onValueChange?.(nextValue);
+      onTextChange?.(nextText);
+      onErrorChange?.(null);
+    } catch (error: any) {
+      const rawText = editor.getText?.() ?? "";
+      onTextChange?.(rawText);
+      onErrorChange?.(
+        error?.message ? String(error.message) : "The JSON is currently invalid.",
+      );
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    format() {
+      try {
+        editorRef.current?.format?.();
+      } catch (_error) {
+        // jsoneditor already surfaces parse states through onErrorChange.
+      }
+
+      emitState();
+    },
+    getText() {
+      return editorRef.current?.getText?.() ?? "";
+    },
+  }), []);
+
+  useEffect(() => {
+    if (!containerRef.current || editorRef.current) {
+      return;
+    }
+
+    let destroyed = false;
+
+    void import("jsoneditor").then((jsonEditorModule: any) => {
+      if (destroyed || !containerRef.current || editorRef.current) {
+        return;
+      }
+
+      const JSONEditor = jsonEditorModule?.default ?? jsonEditorModule;
+      editorRef.current = new JSONEditor(containerRef.current, {
+        mode: "code",
+        modes: ["code"],
+        mainMenuBar: true,
+        navigationBar: true,
+        statusBar: true,
+        search: true,
+        enableSort: false,
+        enableTransform: false,
+        onChange: () => emitState(),
+      });
+
+      try {
+        editorRef.current.set(latestValueRef.current);
+      } catch (_error) {
+        // Ignore seed failures and let jsoneditor surface them through its own state.
+      }
+
+      emitState();
+
+      if (editorRef.current?.aceEditor?.setReadOnly) {
+        editorRef.current.aceEditor.setReadOnly(readOnly);
+      }
+    });
+
+    return () => {
+      destroyed = true;
+      editorRef.current?.destroy?.();
+      editorRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!editorRef.current) {
+      return;
+    }
+
+    try {
+      editorRef.current.set(latestValueRef.current);
+    } catch (_error) {
+      // Ignore reset parse failures and surface them via emitState instead.
+    }
+
+    emitState();
+  }, [resetToken]);
+
+  useEffect(() => {
+    if (!editorRef.current?.aceEditor?.setReadOnly) {
+      return;
+    }
+
+    editorRef.current.aceEditor.setReadOnly(readOnly);
+  }, [readOnly]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`solid-json-editor-host solid-json-editor ${readOnly ? "is-readonly" : ""} ${className}`.trim()}
+    />
+  );
+});

package/dist/components/core/module/CreateModule.css

@@ -1,7 +1,13 @@
 .solid-module-form-workspace {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0;
+}
+
+.solid-module-workspace-header {
+  padding: 0.55rem 0.9rem 0.2rem;
+  background: transparent;
+  border-bottom: none;
 }
 
 .solid-module-form-workspace .solid-module-form-tabs {
@@ -12,10 +18,16 @@
 
 .solid-module-form-workspace .solid-module-form-tablist {
   width: 100% !important;
-  padding: 0 0.25rem;
+  padding: 0 0.35rem;
   border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
 }
 
+.solid-module-form-tab-extra {
+  display: inline-flex;
+  align-items: center;
+  padding-right: 0.35rem;
+}
+
 .solid-module-form-workspace .solid-module-form-tabpanel {
   padding-top: 0.65rem;
 }
@@ -31,6 +43,14 @@
   padding: 0.9rem 0.95rem 0.8rem;
 }
 
+.solid-module-workspace-header .solid-form-toolbar-left {
+  min-height: 0;
+}
+
+.solid-module-workspace-header .solid-form-toolbar-actions {
+  flex: 0 0 auto;
+}
+
 .solid-module-general-info-content.is-tabbed {
   padding: 0 0.9rem 1rem;
 }
@@ -42,3 +62,51 @@
   gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
+
+.solid-module-upload-card {
+  margin: 1rem 0 0;
+  padding: 0.9rem 1rem;
+  border-color: color-mix(in srgb, var(--border, #d6dae5) 90%, transparent);
+  background: color-mix(in srgb, var(--card, #ffffff) 94%, var(--background, #f8fafc) 6%);
+}
+
+.solid-module-upload-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.8rem;
+}
+
+.solid-module-upload-copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.solid-module-upload-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.solid-module-upload-name {
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.solid-module-upload-remove {
+  flex: 0 0 auto;
+  margin-top: 0.1rem;
+}
+
+.solid-module-upload-status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+  color: color-mix(in srgb, var(--foreground, #111827) 78%, var(--muted-foreground, #6b7280));
+  font-size: 0.875rem;
+  line-height: 1.4;
+}

package/dist/components/core/module/CreateModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateModule.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/CreateModule.tsx"],"names":[],"mappings":"AA+BA,OAAO,oBAAoB,CAAC;AAK5B,QAAA,MAAM,YAAY,qBAAsB,GAAG,4CAogB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CreateModule.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/CreateModule.tsx"],"names":[],"mappings":"AA+BA,OAAO,oBAAoB,CAAC;AAK5B,QAAA,MAAM,YAAY,qBAAsB,GAAG,4CAghB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}