@nullix/zod-mongoose-studio 3.2.0 → 3.3.1

package/app/components/ZodMongooseStudio.vue

@@ -1,225 +1,243 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-// Use lodash/debounce or vueuse in a real app, but setTimeout works for now
-let debounceTimer: any;
+import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { useStudioRunner } from "../composables/useStudioRunner";
 
 const config = useRuntimeConfig();
-const isLocalMode = ref(config.public.isLocalMode);
-const isDocsMode = ref(config.public.isDocsMode);
+const root = ref<HTMLElement | null>(null);
+const mobileView = shallowRef<"schema" | "data" | "result" | "mongoose">(
+  "schema",
+);
+type Panel = "schema" | "data" | "result" | "mongoose";
+const expandedPanel = shallowRef<Panel | null>(null);
+let transitioning = false;
+const mobileViews = [
+  { key: "schema", label: "Schema" },
+  { key: "data", label: "Data" },
+  { key: "result", label: "Result" },
+  { key: "mongoose", label: "Mongoose" },
+] as const;
 
-const sourceCode = ref(`import { z } from 'zod/v4';
-import { extractMongooseDef, toMongooseSchema } from '@nullix/zod-mongoose';
+const {
+  sourceCode,
+  inputData,
+  schemaNames,
+  selectedSchema,
+  validation,
+  conversion,
+  isRunning,
+  isDirty,
+  hasRun,
+  error,
+  exampleError,
+  run,
+  selectSchema,
+} = useStudioRunner();
 
-const UserSchema = z.object({
-  name: z.string(),
-  age: z.number().optional()
-});
-
-// Export your schema so the Studio can transform it
-export default UserSchema;`);
-
-const outputDef = ref("// Definition output...");
-const outputSchema = ref("// Mongoose Schema output...");
-const outputTree = ref("// Mongoose Schema tree output...");
-const outputPaths = ref("// Mongoose Schema paths output...");
-const activeSchemaView = ref<"obj" | "tree" | "paths">("obj");
-const activeSchemaViewOutput = computed(() => {
-  switch (activeSchemaView.value) {
-    case "obj":
-      return outputSchema;
-    case "tree":
-      return outputTree;
-    case "paths":
-      return outputPaths;
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape" && expandedPanel.value) {
+    togglePanel(expandedPanel.value);
+    return;
   }
-});
-const isDefOpen = ref(true);
-const isSchemaOpen = ref(true);
-
-const isCompiling = ref(false);
+  if (!root.value?.contains(document.activeElement)) return;
+  if (
+    !(event.metaKey || event.ctrlKey) ||
+    event.altKey ||
+    event.shiftKey ||
+    event.repeat
+  )
+    return;
+  if (event.key.toLowerCase() !== "s" && event.key.toLowerCase() !== "r")
+    return;
+  event.preventDefault();
+  event.stopPropagation();
+  void run();
+}
 
-const handleCompile = async () => {
-  isCompiling.value = true;
-  try {
-    const response = await $fetch("/api/parse", {
-      method: "POST",
-      body: { sourceCode: sourceCode.value },
+function togglePanel(panel: Panel) {
+  if (transitioning) return;
+  const card = root.value?.querySelector<HTMLElement>(`.studio-${panel}`);
+  const change = () => {
+    expandedPanel.value = expandedPanel.value === panel ? null : panel;
+  };
+  if (card && "startViewTransition" in document) {
+    transitioning = true;
+    card.style.viewTransitionName = "studio-expanded-panel";
+    const transition = document.startViewTransition(() => {
+      change();
+      return nextTick();
     });
-    outputDef.value = `// Result of extractMongooseDef()\nconst definition = ${response.definition};`;
-    outputSchema.value = `// Result of toMongooseSchema().obj\nconst schemaObj = ${response.schemaObj};`;
-    outputTree.value = `// Result of toMongooseSchema().tree\nconst schemaTree = ${response.schemaTree};`;
-    outputPaths.value = `// Result of toMongooseSchema().paths\nconst schemaPaths = ${response.schemaPaths};`;
-  } catch (error: any) {
-    const errText = `// Error\n${error.data?.message || error.message}`;
-    outputDef.value = errText;
-    outputSchema.value = errText;
-    outputTree.value = errText;
-    outputPaths.value = errText;
-  } finally {
-    isCompiling.value = false;
-  }
-};
-
-// Auto-compile with a slight delay as they type
-watch(sourceCode, () => {
-  if (isDocsMode.value) return;
-  clearTimeout(debounceTimer);
-  debounceTimer = setTimeout(handleCompile, 600);
-});
-
-// Initial compile for Docs Mode
-if (isDocsMode.value) {
-  handleCompile();
+    void transition.finished.finally(() => {
+      card.style.viewTransitionName = "";
+      transitioning = false;
+    });
+  } else change();
 }
+
+onMounted(() => document.addEventListener("keydown", onKeydown, true));
+onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown, true));
 </script>
 
 <template>
   <div
-    class="flex flex-col bg-gray-50 dark:bg-gray-950 overflow-hidden relative"
-    :class="[
-      isDocsMode
-        ? 'h-[calc(100vh-var(--ui-header-height,64px))] sticky top-[var(--ui-header-height,64px)]'
-        : 'h-screen',
-    ]"
+    ref="root"
+    class="studio-shell"
+    :class="{
+      'studio-shell-docs': config.public.isDocsMode,
+      'is-focused': expandedPanel,
+    }"
   >
-    <header
-      class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 py-3 px-4 flex justify-between items-center shrink-0 z-20"
-    >
-      <div class="flex items-center gap-4">
-        <h1 class="text-xl font-bold text-primary">
-          @nullix/zod-mongoose Studio
-        </h1>
-        <UBadge v-if="isLocalMode" color="success" variant="soft"
-          >Local Mode</UBadge
-        >
-        <UBadge v-else color="info" variant="soft">Docs Mode</UBadge>
+    <header class="studio-header">
+      <div class="studio-brand">
+        <div>
+          <p class="studio-eyebrow">@nullix/zod-mongoose</p>
+          <h1>Studio</h1>
+        </div>
       </div>
-      <div class="flex items-center gap-2">
-        <UButton
-          v-if="isDocsMode"
-          icon="i-heroicons-play-solid"
-          color="primary"
-          :loading="isCompiling"
-          @click="handleCompile"
+      <div class="studio-header-actions">
+        <span class="studio-mode">{{
+          config.public.isDocsMode ? "Playground" : "Local mode"
+        }}</span>
+        <span class="studio-shortcut" aria-hidden="true"
+          >⌘ / Ctrl + S or R</span
         >
-          Run
-        </UButton>
-        <span v-else-if="isCompiling" class="text-sm text-gray-500"
-          >Transforming...</span
+        <button
+          type="button"
+          class="studio-run"
+          :disabled="isRunning || !config.public.isExecutionEnabled"
+          @click="run()"
         >
+          {{ isRunning ? "Running…" : "Run" }}
+        </button>
       </div>
     </header>
 
-    <UDashboardGroup
-      class="flex-1 min-h-0 !relative !inset-auto"
-      storage-key="studio-layout"
-    >
-      <!-- Left: Editor -->
-      <UDashboardPanel id="editor" collapsible resizable :min-size="20">
-        <div class="h-full relative bg-white dark:bg-gray-950">
-          <ClientOnly>
-            <StudioEditor v-model="sourceCode" />
-          </ClientOnly>
-        </div>
-      </UDashboardPanel>
+    <div class="studio-subbar">
+      <div class="studio-subbar-copy">
+        <span
+          class="studio-pulse"
+          :class="{ 'is-busy': isRunning, error: error }"
+        />
+        <span>{{
+          isRunning
+            ? "Working through your schema…"
+            : error
+              ? "Run failed"
+              : !hasRun
+                ? "Waiting for first run"
+                : isDirty
+                  ? "Changes ready to run"
+                  : "Schema and data in sync"
+        }}</span>
+      </div>
+      <label class="studio-schema-picker">
+        <span>ACTIVE SCHEMA</span>
+        <select
+          :value="selectedSchema"
+          :disabled="schemaNames.length < 2"
+          aria-label="Active schema"
+          @change="selectSchema(($event.target as HTMLSelectElement).value)"
+        >
+          <option v-if="!schemaNames.length" value="">
+            Run to find schemas
+          </option>
+          <option v-for="name in schemaNames" :key="name" :value="name">
+            {{ name }}
+          </option>
+        </select>
+      </label>
+    </div>
 
-      <!-- Right: Split Outputs -->
-      <UDashboardPanel
-        id="outputs"
-        resizable
-        :min-size="20"
-        class="flex flex-col h-full bg-gray-200 dark:bg-gray-800 overflow-hidden"
+    <nav class="studio-mobile-nav" aria-label="Studio sections">
+      <button
+        v-for="view in mobileViews"
+        :key="view.key"
+        type="button"
+        :class="{ 'is-active': mobileView === view.key }"
+        @click="mobileView = view.key"
       >
-        <!-- Top Right: Definition -->
-        <UCollapsible
-          v-model:open="isDefOpen"
-          :class="[isDefOpen ? 'flex-1' : 'flex-none']"
-          :ui="{ content: 'flex-1 flex flex-col min-h-0' }"
-          class="bg-white dark:bg-gray-950 flex flex-col min-h-0"
+        {{ view.label }}
+      </button>
+    </nav>
+
+    <div v-if="error" class="studio-error-banner" role="alert">
+      <strong>Run failed</strong><span>{{ error }}</span>
+    </div>
+    <div
+      v-if="exampleError"
+      class="studio-error-banner studio-example-banner"
+      role="status"
+    >
+      <strong>Example unavailable</strong><span>{{ exampleError }}</span>
+    </div>
+
+    <main class="studio-workspace">
+      <div class="studio-column studio-input-column">
+        <StudioSourcePanel
+          v-model="sourceCode"
+          :class="{
+            'is-mobile-active': mobileView === 'schema',
+            'is-expanded': expandedPanel === 'schema',
+          }"
+        >
+          <template #actions
+            ><StudioExpandButton
+              label="schema editor"
+              :expanded="expandedPanel === 'schema'"
+              @toggle="togglePanel('schema')"
+          /></template>
+        </StudioSourcePanel>
+        <StudioDataPanel
+          v-model="inputData"
+          :is-running="isRunning"
+          :can-run="config.public.isExecutionEnabled"
+          :class="{
+            'is-mobile-active': mobileView === 'data',
+            'is-expanded': expandedPanel === 'data',
+          }"
+          @load-example="run('example')"
         >
-          <template #default="{ open }">
-            <div
-              class="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-xs font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 z-10 flex justify-between items-center cursor-pointer select-none"
-            >
-              <span>extractMongooseDef()</span>
-              <UIcon
-                :name="
-                  open
-                    ? 'i-heroicons-chevron-down'
-                    : 'i-heroicons-chevron-right'
-                "
-              />
-            </div>
-          </template>
-          <template #content>
-            <div class="flex-1 relative">
-              <ClientOnly>
-                <StudioOutput :model-value="outputDef" />
-              </ClientOnly>
-            </div>
-          </template>
-        </UCollapsible>
+          <template #actions
+            ><StudioExpandButton
+              label="data editor"
+              :expanded="expandedPanel === 'data'"
+              @toggle="togglePanel('data')"
+          /></template>
+        </StudioDataPanel>
+      </div>
 
-        <!-- Bottom Right: Schema -->
-        <UCollapsible
-          v-model:open="isSchemaOpen"
-          :class="[isSchemaOpen ? 'flex-1' : 'flex-none']"
-          :ui="{ content: 'flex-1 flex flex-col min-h-0' }"
-          class="bg-white dark:bg-gray-950 flex flex-col min-h-0"
+      <div class="studio-column studio-output-column">
+        <StudioValidation
+          class="studio-result"
+          :class="{
+            'is-mobile-active': mobileView === 'result',
+            'is-expanded': expandedPanel === 'result',
+          }"
+          :result="validation"
+          :stale="isDirty"
         >
-          <template #default="{ open }">
-            <div
-              class="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-xs font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 z-10 flex justify-between items-center cursor-pointer select-none"
-            >
-              <div class="flex items-center gap-2">
-                <span>toMongooseSchema()</span>
-                <div class="flex gap-1" @click.stop>
-                  <UButton
-                    size="xs"
-                    variant="ghost"
-                    :color="activeSchemaView === 'obj' ? 'primary' : 'neutral'"
-                    @click="activeSchemaView = 'obj'"
-                  >
-                    .obj
-                  </UButton>
-                  <UButton
-                    size="xs"
-                    variant="ghost"
-                    :color="activeSchemaView === 'tree' ? 'primary' : 'neutral'"
-                    @click="activeSchemaView = 'tree'"
-                  >
-                    .tree
-                  </UButton>
-                  <UButton
-                    size="xs"
-                    variant="ghost"
-                    :color="
-                      activeSchemaView === 'paths' ? 'primary' : 'neutral'
-                    "
-                    @click="activeSchemaView = 'paths'"
-                  >
-                    .paths
-                  </UButton>
-                </div>
-              </div>
-              <UIcon
-                :name="
-                  open
-                    ? 'i-heroicons-chevron-down'
-                    : 'i-heroicons-chevron-right'
-                "
-              />
-            </div>
-          </template>
-          <template #content>
-            <div class="flex-1 relative">
-              <ClientOnly>
-                <StudioOutput :model-value="activeSchemaViewOutput.value" />
-              </ClientOnly>
-            </div>
-          </template>
-        </UCollapsible>
-      </UDashboardPanel>
-    </UDashboardGroup>
+          <template #actions
+            ><StudioExpandButton
+              label="validation result"
+              :expanded="expandedPanel === 'result'"
+              @toggle="togglePanel('result')"
+          /></template>
+        </StudioValidation>
+        <StudioConversion
+          class="studio-mongoose"
+          :class="{
+            'is-mobile-active': mobileView === 'mongoose',
+            'is-expanded': expandedPanel === 'mongoose',
+          }"
+          :result="conversion"
+        >
+          <template #actions
+            ><StudioExpandButton
+              label="Mongoose output"
+              :expanded="expandedPanel === 'mongoose'"
+              @toggle="togglePanel('mongoose')"
+          /></template>
+        </StudioConversion>
+      </div>
+    </main>
   </div>
 </template>

package/app/composables/useStudioRunner.ts

@@ -0,0 +1,142 @@
+import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+
+export type ValidationResult = {
+  status: "valid" | "invalid" | "json-error" | "parse-error" | "empty";
+  parsed?: string;
+  message?: string;
+  issues?: { path: string; message: string; code: string }[];
+};
+
+export type ConversionResult = {
+  definition?: string;
+  schemaObj?: string;
+  schemaTree?: string;
+  schemaPaths?: string;
+  error?: string;
+};
+
+type RunResponse = {
+  schemaNames: string[];
+  selectedSchema: string;
+  validation: ValidationResult;
+  conversion: ConversionResult;
+  example?: string;
+  exampleError?: string;
+};
+
+const STORAGE_KEY = "zod-mongoose-studio:v1";
+
+export function useStudioRunner() {
+  const config = useRuntimeConfig();
+  const sourceCode = shallowRef(`// z and every @nullix/zod-mongoose helper are ready to use.
+const UserSchema = z.object({
+  name: z.string().trim().min(2),
+  email: z.email(),
+  age: z.number().int().min(18).optional(),
+  role: z.enum(['reader', 'admin']).default('reader'),
+});
+
+const PostSchema = z.object({
+  title: z.string().min(1),
+  published: z.boolean().default(false),
+});`);
+  const inputData = shallowRef(`{
+  "name": "  Ada Lovelace  ",
+  "email": "ada@example.com",
+  "age": 28
+}`);
+  const schemaNames = shallowRef<string[]>([]);
+  const selectedSchema = shallowRef("");
+  const validation = shallowRef<ValidationResult>({ status: "empty", message: "Run the studio to see parsed data." });
+  const conversion = shallowRef<ConversionResult>({});
+  const isRunning = shallowRef(false);
+  const isDirty = shallowRef(false);
+  const hasRun = shallowRef(false);
+  const error = shallowRef("");
+  const exampleError = shallowRef("");
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let runId = 0;
+
+  async function run(action: "run" | "example" = "run") {
+    if (!config.public.isExecutionEnabled) return;
+    if (debounceTimer) clearTimeout(debounceTimer);
+    const currentRun = ++runId;
+    const submittedSource = sourceCode.value;
+    const submittedInput = inputData.value;
+    isRunning.value = true;
+    error.value = "";
+    exampleError.value = "";
+    try {
+      const response = await $fetch<RunResponse>(config.public.isDocsMode ? "/api/studio/run" : "/api/parse", {
+        method: "POST",
+        body: {
+          sourceCode: submittedSource,
+          inputData: submittedInput,
+          selectedSchema: selectedSchema.value || undefined,
+          action,
+        },
+      });
+      if (currentRun !== runId) return;
+      schemaNames.value = response.schemaNames;
+      hasRun.value = true;
+      selectedSchema.value = response.selectedSchema;
+      validation.value = response.validation;
+      conversion.value = response.conversion;
+      exampleError.value = response.exampleError || "";
+      if (response.example && sourceCode.value === submittedSource && inputData.value === submittedInput) inputData.value = response.example;
+      isDirty.value = sourceCode.value !== submittedSource || (inputData.value !== submittedInput && inputData.value !== response.example);
+    } catch (caught: any) {
+      if (currentRun !== runId) return;
+      error.value = caught.data?.message || caught.message || "The studio could not run this schema.";
+      validation.value = { status: "empty", message: "Run the studio to see parsed data." };
+      conversion.value = {};
+    } finally {
+      if (currentRun === runId) isRunning.value = false;
+    }
+  }
+
+  function selectSchema(name: string) {
+    selectedSchema.value = name;
+    isDirty.value = true;
+    if (config.public.isExecutionEnabled) void run();
+  }
+
+  function saveSession() {
+    if (!import.meta.client) return;
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
+        sourceCode: sourceCode.value,
+        inputData: inputData.value,
+        selectedSchema: selectedSchema.value,
+      }));
+    } catch { /* Storage can be unavailable or full; the editor remains usable. */ }
+  }
+
+  watch(sourceCode, () => {
+    isDirty.value = true;
+    if (!config.public.isDocsMode) {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => void run(), 650);
+    }
+  });
+  watch(inputData, () => { isDirty.value = true; }, { flush: "sync" });
+  watch([sourceCode, inputData, selectedSchema], saveSession, { flush: "sync" });
+
+  onMounted(() => {
+    try {
+      const saved = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "null");
+      if (saved && typeof saved === "object") {
+        if (typeof saved.sourceCode === "string" && saved.sourceCode.length <= 50_000) sourceCode.value = saved.sourceCode;
+        if (typeof saved.inputData === "string" && saved.inputData.length <= 100_000) inputData.value = saved.inputData;
+        if (typeof saved.selectedSchema === "string") selectedSchema.value = saved.selectedSchema;
+      }
+    } catch { /* Ignore invalid browser storage. */ }
+    if (config.public.isExecutionEnabled) void run();
+  });
+  onBeforeUnmount(() => { if (debounceTimer) clearTimeout(debounceTimer); });
+
+  return {
+    sourceCode, inputData, schemaNames, selectedSchema, validation, conversion,
+    isRunning, isDirty, hasRun, error, exampleError, run, selectSchema,
+  };
+}

package/app/pages/index.vue

@@ -1,3 +1,3 @@
 <template>
-  <ZodMongooseStudio />
+  <ZodMongooseStudio class="studio-standalone" />
 </template>

package/app/plugins/monaco.client.ts

@@ -1,5 +1,6 @@
 import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 
 export default defineNuxtPlugin(() => {
   // Tell Monaco how to load its Web Workers via Vite
@@ -8,6 +9,7 @@ export default defineNuxtPlugin(() => {
       if (label === "typescript" || label === "javascript") {
         return new tsWorker();
       }
+      if (label === "json") return new jsonWorker();
       return new editorWorker();
     },
   };

package/bin/index.mjs

@@ -34,8 +34,13 @@ async function startStudio() {
   const env = {
     ...process.env,
     PORT: port.toString(),
+    NITRO_HOST: "127.0.0.1",
+    HOST: "127.0.0.1",
     DOCS_MODE: "false", // CLI is NEVER docs mode
+    NUXT_PUBLIC_IS_DOCS_MODE: "false",
+    NUXT_PUBLIC_IS_EXECUTION_ENABLED: "true",
     LOCAL_MODE: enableFs ? "true" : "false", // Enable FS unless opted out
+    NUXT_PUBLIC_IS_LOCAL_MODE: enableFs ? "true" : "false",
     NODE_ENV: "production",
   };
 

package/nuxt.config.ts

@@ -3,13 +3,14 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      // By default, assume we are in a safe, sandboxed documentation environment.
-      // The CLI script will explicitly pass DOCS_MODE="false" to disable this.
-      isDocsMode: process.env.DOCS_MODE !== "false",
+      // Standalone Studio development uses the loopback-only local endpoint.
+      // Embedders must explicitly opt into docs mode.
+      isDocsMode: process.env.DOCS_MODE === "true",
 
       // By default, local file system access is OFF.
       // The CLI script will explicitly pass LOCAL_MODE="true" to enable it.
       isLocalMode: process.env.LOCAL_MODE === "true",
+      isExecutionEnabled: true,
     },
   },
   css: ["~/assets/css/main.css"],