@nullix/zod-mongoose-studio 3.3.0 → 3.3.1

package/app/assets/css/studio.css

@@ -0,0 +1,131 @@
+.studio-shell {
+  --studio-bg: #f5f7f9;
+  --studio-surface: #fff;
+  --studio-border: #dce3ea;
+  --studio-text: #172b3d;
+  --studio-muted: #627588;
+  --studio-accent: #2e608a;
+  display: flex;
+  flex-direction: column;
+  height: var(--studio-height, 100dvh);
+  min-height: 540px;
+  overflow: hidden;
+  color: var(--studio-text);
+  background: var(--studio-bg);
+  font-family: 'Public Sans', system-ui, sans-serif;
+  font-size: 13px;
+}
+.studio-shell-docs { height: var(--studio-height, calc(100dvh - var(--ui-header-height, 64px))); }
+.studio-shell-docs.studio-standalone { height: var(--studio-height, 100dvh); }
+.studio-header, .studio-subbar, .studio-card-head { display: flex; align-items: center; justify-content: space-between; }
+.studio-header { gap: 20px; min-height: 68px; padding: 12px 22px; border-bottom: 1px solid var(--studio-border); background: var(--studio-surface); }
+.studio-brand h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
+.studio-eyebrow { margin: 0 0 3px; color: var(--studio-muted); font-size: 11px; font-weight: 600; line-height: 1.3; }
+.studio-header-actions, .studio-subbar-copy, .studio-schema-picker, .studio-card-heading { display: flex; align-items: center; gap: 12px; }
+.studio-mode { color: var(--studio-muted); font-size: 12px; white-space: nowrap; }
+.studio-shortcut { color: #8795a2; font-size: 11px; white-space: nowrap; }
+.studio-run { min-height: 36px; padding: 0 17px; border: 1px solid #2e608a; border-radius: 6px; color: #fff; background: #2e608a; font: 600 12px 'Public Sans', system-ui, sans-serif; cursor: pointer; }
+.studio-run:hover:not(:disabled) { background: #264e70; }
+.studio-run:disabled, .studio-example-button:disabled { opacity: .55; cursor: wait; }
+.studio-run:focus-visible, .studio-example-button:focus-visible, .studio-tabs button:focus-visible, .studio-mobile-nav button:focus-visible, .studio-schema-picker select:focus-visible { outline: 2px solid #2e608a; outline-offset: 2px; }
+.studio-subbar { gap: 16px; min-height: 46px; padding: 7px 22px; border-bottom: 1px solid var(--studio-border); background: #fff; }
+.studio-subbar-copy { gap: 8px; color: var(--studio-muted); font-size: 11px; }
+.studio-pulse { width: 7px; height: 7px; border-radius: 50%; background: #48a178; }
+.studio-pulse.is-busy { background: #d3913f; }
+.studio-pulse.error { background: #a33737; }
+.studio-schema-picker span { color: var(--studio-muted); font-size: 11px; }
+.studio-schema-picker select { min-width: 165px; max-width: 260px; padding: 6px 28px 6px 9px; border: 1px solid var(--studio-border); border-radius: 5px; background: #fff; color: var(--studio-text); font: 12px 'Public Sans', system-ui, sans-serif; cursor: pointer; }
+.studio-schema-picker select:disabled { color: var(--studio-muted); cursor: default; }
+.studio-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-height: 0; flex: 1; padding: 8px; }
+.studio-column { display: grid; min-width: 0; min-height: 0; gap: 8px; }
+.studio-input-column { grid-template-rows: minmax(0, 1.18fr) minmax(0, .82fr); }
+.studio-output-column { grid-template-rows: minmax(0, .82fr) minmax(0, 1.18fr); }
+.studio-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--studio-border); border-radius: 6px; background: var(--studio-surface); }
+.studio-card-head { gap: 12px; min-height: 59px; padding: 10px 14px; border-bottom: 1px solid var(--studio-border); }
+.studio-card-heading { min-width: 0; }
+.studio-card h2 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
+.studio-editor-surface, .studio-conversion-output { position: relative; min-height: 0; flex: 1; background: #1e1e1e; }
+.studio-card-foot { min-height: 33px; padding: 8px 14px; border-top: 1px solid var(--studio-border); color: var(--studio-muted); font-size: 11px; line-height: 1.4; }
+.studio-card-foot code { color: #264e70; font-family: ui-monospace, monospace; }
+.studio-example-button { padding: 6px 10px; border: 1px solid var(--studio-border); border-radius: 5px; color: var(--studio-accent); background: #fff; font: 600 11px 'Public Sans', system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
+.studio-example-button:hover:not(:disabled) { background: #f2f7fa; }
+.studio-status { padding: 4px 8px; border-radius: 4px; color: var(--studio-muted); background: #edf1f5; font-size: 11px; font-weight: 600; }
+.studio-status-valid { color: #237351; background: #e5f5ec; }
+.studio-status-invalid { color: #a33737; background: #fceaea; }
+.studio-status-stale { color: #906221; background: #fff4dc; }
+.studio-validation-body { min-height: 0; flex: 1; overflow: auto; padding: 16px; }
+.studio-result-intro { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 13px; }
+.studio-result-intro strong { display: block; margin: 1px 0 3px; font-size: 12px; }
+.studio-result-intro p { margin: 0; color: var(--studio-muted); font-size: 11px; line-height: 1.5; }
+.studio-result-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 4px; color: var(--studio-accent); background: #e2ecf4; font: 700 11px ui-monospace, monospace; }
+.studio-result-icon-valid { color: #237351; background: #e5f5ec; }
+.studio-result-icon-invalid { color: #a33737; background: #fceaea; }
+.studio-parsed { margin: 0; padding: 13px; overflow: auto; border: 1px solid var(--studio-border); border-radius: 5px; color: var(--studio-text); background: #f8fafc; font: 12px/1.65 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+.studio-issues { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.studio-issues li { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid #f1cdcd; border-radius: 5px; background: #fff7f7; color: #8c3333; font-size: 11px; line-height: 1.5; }
+.studio-issues code { min-width: 82px; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
+.studio-tabs { display: flex; gap: 3px; padding: 6px 9px; border-bottom: 1px solid var(--studio-border); background: #fff; }
+.studio-tabs button { padding: 6px 10px; border: 0; border-radius: 4px; color: var(--studio-muted); background: transparent; font: 600 11px 'Public Sans', system-ui, sans-serif; cursor: pointer; }
+.studio-tabs button:hover { color: var(--studio-accent); }
+.studio-tabs button.is-active { color: var(--studio-accent); background: #e2ecf4; }
+.studio-error-banner { display: flex; gap: 12px; align-items: flex-start; padding: 9px 22px; border-bottom: 1px solid #f1cdcd; color: #8c3333; background: #fff1f1; font-size: 11px; }
+.studio-error-banner strong { white-space: nowrap; }
+.studio-error-banner span { min-width: 0; overflow-wrap: anywhere; }
+.studio-example-banner { border-color: #ead6ad; color: #805a20; background: #fff8e8; }
+.studio-mobile-nav { display: none; }
+@media (max-width: 900px) {
+  .studio-header { min-height: 60px; padding: 11px 15px; }
+  .studio-subbar { padding-inline: 15px; }
+  .studio-workspace { display: block; padding: 7px; }
+  .studio-column { display: contents; }
+  .studio-card { display: none; height: 100%; }
+  .studio-card.is-mobile-active { display: flex; }
+  .studio-mobile-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px 7px; border-bottom: 1px solid var(--studio-border); background: #fff; }
+  .studio-mobile-nav button { min-height: 34px; border: 0; border-radius: 4px; color: var(--studio-muted); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
+  .studio-mobile-nav button.is-active { color: var(--studio-accent); background: #e2ecf4; }
+}
+@media (max-width: 560px) {
+  .studio-header { gap: 8px; }
+  .studio-brand h1 { font-size: 17px; }
+  .studio-mode, .studio-shortcut, .studio-schema-picker span { display: none; }
+  .studio-run { padding-inline: 12px; }
+  .studio-schema-picker select { min-width: 120px; max-width: 150px; }
+  .studio-card-head { padding-inline: 11px; }
+}
+.dark .studio-shell {
+  --studio-bg: #0f1722;
+  --studio-surface: #172231;
+  --studio-border: #334255;
+  --studio-text: #e9eef5;
+  --studio-muted: #a5b2c1;
+  --studio-accent: #8cbce5;
+}
+.dark .studio-subbar, .dark .studio-tabs, .dark .studio-mobile-nav { background: var(--studio-surface); }
+.dark .studio-schema-picker select, .dark .studio-example-button { color: var(--studio-text); background: #202e40; border-color: var(--studio-border); }
+.dark .studio-example-button:hover:not(:disabled) { background: #2b3b50; }
+.dark .studio-run { color: #fff; background: #2e608a; }
+.dark .studio-card-foot code { color: #a5d3fa; }
+.dark .studio-status { color: #b5c4d2; background: #2b3b4b; }
+.dark .studio-status-valid { color: #a6e9c3; background: #214637; }
+.dark .studio-status-invalid { color: #f5b7b7; background: #4c3034; }
+.dark .studio-status-stale { color: #f0d194; background: #4a3e29; }
+.dark .studio-result-icon, .dark .studio-tabs button.is-active, .dark .studio-mobile-nav button.is-active { color: #a5d3fa; background: #25435e; }
+.dark .studio-result-icon-valid { color: #a6e9c3; background: #214637; }
+.dark .studio-result-icon-invalid { color: #f5b7b7; background: #4c3034; }
+.dark .studio-parsed { color: var(--studio-text); background: #101b29; border-color: var(--studio-border); }
+.dark .studio-issues li, .dark .studio-error-banner { color: #f5b7b7; background: #392a30; border-color: #75434b; }
+.dark .studio-example-banner { color: #f0d194; background: #403624; border-color: #76613b; }
+.dark .studio-editor-surface, .dark .studio-conversion-output { background: #1e1e1e; }
+.studio-editor-surface, .studio-conversion-output { background: #fff; }
+.studio-editor-fallback { display: block; width: 100%; height: 100%; box-sizing: border-box; resize: none; border: 0; outline: none; padding: 16px; color: var(--studio-text); background: var(--studio-surface); font: 13px/1.75 ui-monospace, monospace; }
+.studio-shell { position: relative; }
+.studio-card-actions { display: flex; align-items: center; gap: 8px; }
+.studio-expand-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--studio-border); border-radius: 5px; color: var(--studio-muted); background: var(--studio-surface); cursor: pointer; }
+.studio-expand-button:hover { color: var(--studio-accent); border-color: var(--studio-accent); }
+.studio-expand-button:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
+.studio-shell.is-focused .studio-card:not(.is-expanded) { visibility: hidden; }
+.studio-card.is-expanded { display: flex; position: absolute; inset: 8px; z-index: 30; height: auto; box-shadow: 0 12px 40px #0002; }
+::view-transition-old(studio-expanded-panel), ::view-transition-new(studio-expanded-panel) { animation-duration: .28s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(studio-expanded-panel), ::view-transition-new(studio-expanded-panel) { animation-duration: .01ms; }
+}

package/app/components/StudioConversion.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import type { ConversionResult } from "../composables/useStudioRunner";
+
+const props = defineProps<{ result: ConversionResult }>();
+const active = shallowRef<"definition" | "obj" | "tree" | "paths">("definition");
+const views = [
+  { key: "definition", label: "Definition" },
+  { key: "obj", label: ".obj" },
+  { key: "tree", label: ".tree" },
+  { key: "paths", label: ".paths" },
+] as const;
+const output = computed(() => {
+  if (props.result.error) return `// Conversion error\n${props.result.error}`;
+  switch (active.value) {
+    case "definition": return props.result.definition || "// Run a schema to see its Mongoose definition.";
+    case "obj": return props.result.schemaObj || "// No schema object yet.";
+    case "tree": return props.result.schemaTree || "// No schema tree yet.";
+    case "paths": return props.result.schemaPaths || "// No schema paths yet.";
+  }
+});
+</script>
+
+<template>
+  <section class="studio-card studio-conversion" aria-labelledby="conversion-title">
+    <div class="studio-card-head">
+      <div class="studio-card-heading">
+        <div><p class="studio-eyebrow">Mongoose</p><h2 id="conversion-title">Schema output</h2></div>
+      </div>
+      <slot name="actions" />
+    </div>
+    <div class="studio-tabs" role="tablist" aria-label="Mongoose output view">
+      <button v-for="view in views" :key="view.key" type="button" role="tab"
+        :aria-selected="active === view.key" :class="{ 'is-active': active === view.key }"
+        @click="active = view.key">{{ view.label }}</button>
+    </div>
+    <div class="studio-conversion-output" role="tabpanel">
+      <ClientOnly><StudioOutput :model-value="output" /></ClientOnly>
+    </div>
+  </section>
+</template>

package/app/components/StudioDataPanel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ isRunning: boolean; canRun: boolean }>();
+const emit = defineEmits<{ loadExample: [] }>();
+const input = defineModel<string>({ required: true });
+</script>
+
+<template>
+  <section class="studio-card studio-data" aria-labelledby="data-title">
+    <div class="studio-card-head">
+      <div class="studio-card-heading">
+        <div><p class="studio-eyebrow">JSON</p><h2 id="data-title">Input data</h2></div>
+      </div>
+      <div class="studio-card-actions">
+        <button type="button" class="studio-example-button" :disabled="isRunning || !canRun" @click="emit('loadExample')">Load example</button>
+        <slot name="actions" />
+      </div>
+    </div>
+    <div class="studio-editor-surface"><ClientOnly><StudioEditor v-model="input" language="json" label="JSON data editor" /></ClientOnly></div>
+    <div class="studio-card-foot">Enter a JSON value, then run to see what Zod returns.</div>
+  </section>
+</template>

package/app/components/StudioEditor.vue

@@ -1,114 +1,90 @@
 <script setup lang="ts">
-import { ref, shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
-
-const props = defineProps<{ modelValue: string }>();
-const emit = defineEmits(["update:modelValue"]);
-
-const editorContainer = ref<HTMLElement | null>(null);
-// shallowRef is REQUIRED for Monaco instances in Vue 3!
-const editorInstance = shallowRef<any>(null);
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+
+const model = defineModel<string>({ required: true });
+const props = withDefaults(defineProps<{
+  language?: "typescript" | "json";
+  label?: string;
+}>(), { language: "typescript", label: "Code editor" });
+
+const container = ref<HTMLElement | null>(null);
+const editor = shallowRef<import("monaco-editor").editor.IStandaloneCodeEditor | null>(null);
+const editorUnavailable = shallowRef(false);
+const colorMode = useColorMode();
+let typeLibrariesLoaded: Promise<void> | undefined;
+
+const helperNames = [
+  "bufferMongooseGetter", "callHookSync", "extractMongooseDef", "genTimestampsSchema",
+  "getFrontendMode", "getMongoose", "getMongooseMeta", "hooks", "mongooseRegistry",
+  "objectStrictness", "populateZodSchema", "setFrontendMode", "setMongoose",
+  "toMongooseSchema", "toStrictModel", "unwrapZodSchema", "withMongoose",
+  "zBuffer", "zObjectId", "zPoint", "zPolygon", "zRef",
+];
 
 onMounted(async () => {
-  if (!editorContainer.value) return;
-
-  // Dynamically import monaco
-  const monaco = await import("monaco-editor");
-
-  monaco.typescript.typescriptDefaults.setCompilerOptions({
-    target: monaco.typescript.ScriptTarget.ESNext,
-    allowNonTsExtensions: true,
-    moduleResolution: monaco.typescript.ModuleResolutionKind.NodeJs,
-    module: monaco.typescript.ModuleKind.ESNext, // Allow ES6 exports
-    noEmit: true,
-  });
-
-  // 1. Zod v4 shim (so imports don't error in the editor)
-  monaco.typescript.typescriptDefaults.addExtraLib(
-    `
-    declare module 'zod/v4' {
-      export const z: any;
-      export type ZodTypeAny = any;
-      export type ZodObject<T> = any;
-      export type ZodString = any;
-      export type ZodNumber = any;
-    }
-  `,
-    "file:///node_modules/@types/zod-v4/index.d.ts",
-  );
-
-  monaco.typescript.typescriptDefaults.addExtraLib(
-    `
-    declare module '@nullix/zod-mongoose' {
-      import { z } from 'zod/v4';
-      import mongoose, { SchemaOptions } from 'mongoose';
-      import * as hookable from 'hookable';
-
-      interface MongooseMeta extends Record<string, any> {
-          explicitId?: boolean;
-      }
-      declare const mongooseRegistry: z.core.$ZodRegistry<MongooseMeta, z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
-      declare function withMongoose<T extends z.ZodTypeAny>(schema: T, meta: MongooseMeta): T;
-
-      type ToMongooseType<T extends z.ZodTypeAny> = any; // Simplified for Monaco perf
-
-      export declare function extractMongooseDef<T extends z.ZodTypeAny>(schema: T, visited?: Map<z.ZodTypeAny, any>, isField?: boolean): ToMongooseType<T> & Record<string, any>;
-
-      interface ToMongooseSchemaOptions extends SchemaOptions {
-          plugins?: Array<(schema: mongoose.Schema, options?: any) => void>;
-      }
-
-      export declare function toMongooseSchema<T extends z.ZodTypeAny>(schema: T, options?: ToMongooseSchemaOptions): mongoose.Schema<z.infer<T>>;
-
-      export declare const zObjectId: (options?: MongooseMeta) => any;
-      export declare const zBuffer: (options?: MongooseMeta) => any;
-      export declare const zRef: <T extends z.ZodTypeAny>(ref: string, schema: T, options?: MongooseMeta) => any;
-      export declare const genTimestampsSchema: <CrAt = "createdAt", UpAt = "updatedAt">(createdAtField?: any, updatedAtField?: any) => any;
-
-      export type PopulatedSchema<T, K extends keyof T> = any;
-      export declare const bufferMongooseGetter: (value: unknown) => any;
-      export declare const getMongoose: () => any;
-      export declare const setFrontendMode: (enabled: boolean) => void;
-      export declare const getFrontendMode: () => boolean;
-
-      export type MongooseZodHooks = any;
-      export declare const hooks: any;
-      export declare function callHookSync<Name extends keyof MongooseZodHooks>(name: Name, ...args: Parameters<MongooseZodHooks[Name]>): void;
+  if (!container.value) return;
+  try {
+    const monaco = await import("monaco-editor");
+    if (!container.value) return;
+    if (props.language === "typescript") {
+      const tsMonaco: any = await import("monaco-editor/esm/vs/language/typescript/monaco.contribution.js");
+      tsMonaco.typescriptDefaults.setCompilerOptions({
+        target: tsMonaco.ScriptTarget.ESNext,
+        allowNonTsExtensions: true,
+        moduleResolution: tsMonaco.ModuleResolutionKind.NodeJs,
+        module: tsMonaco.ModuleKind.ESNext,
+        noEmit: true,
+      });
+      typeLibrariesLoaded ||= $fetch<Record<string, string>>("/api/editor-types").then((files) => {
+        for (const [path, content] of Object.entries(files)) tsMonaco.typescriptDefaults.addExtraLib(content, path);
+      }).catch(() => {
+        // Types improve completion, but a missing endpoint must not hide the editor.
+      });
+      await typeLibrariesLoaded;
+      tsMonaco.typescriptDefaults.addExtraLib(`
+        declare const z: typeof import("zod/v4").z;
+        declare const mongoose: any;
+        ${helperNames.map((name) => `declare const ${name}: any;`).join("\n")}
+        declare module '@nullix/zod-mongoose' {
+          ${helperNames.map((name) => `export const ${name}: any;`).join("\n")}
+        }
+      `, "file:///node_modules/@types/studio/globals.d.ts");
     }
-  `,
-    "file:///node_modules/@nullix/zod-mongoose/index.d.ts",
-  );
-
-  editorInstance.value = monaco.editor.create(editorContainer.value, {
-    value: props.modelValue,
-    language: "typescript",
-    theme: "vs-dark",
-    minimap: { enabled: false },
-    automaticLayout: true,
-    fontSize: 14,
-    padding: { top: 16 },
-  });
 
-  editorInstance.value.onDidChangeModelContent(() => {
-    emit("update:modelValue", editorInstance.value?.getValue() || "");
-  });
+    editor.value = monaco.editor.create(container.value, {
+      value: model.value,
+      language: props.language,
+      theme: colorMode.value === "dark" ? "vs-dark" : "vs",
+      minimap: { enabled: false },
+      automaticLayout: true,
+      fontSize: 13,
+      fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', monospace",
+      lineHeight: 23,
+      padding: { top: 16, bottom: 16 },
+      scrollBeyondLastLine: false,
+      roundedSelection: false,
+      wordWrap: "on",
+      renderLineHighlight: "line",
+      scrollbar: { verticalScrollbarSize: 7, horizontalScrollbarSize: 7 },
+      ariaLabel: props.label,
+    });
+    editor.value.onDidChangeModelContent(() => { model.value = editor.value?.getValue() || ""; });
+  } catch {
+    editorUnavailable.value = true;
+  }
 });
 
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (editorInstance.value && editorInstance.value.getValue() !== newValue) {
-      editorInstance.value.setValue(newValue);
-    }
-  },
-);
-
-onBeforeUnmount(() => {
-  if (editorInstance.value) {
-    editorInstance.value.dispose();
-  }
+watch(model, (value) => {
+  if (editor.value && editor.value.getValue() !== value) editor.value.setValue(value);
 });
+watch(() => colorMode.value, (mode) => {
+  editor.value?.updateOptions({ theme: mode === "dark" ? "vs-dark" : "vs" });
+});
+
+onBeforeUnmount(() => { editor.value?.dispose(); });
 </script>
 
 <template>
-  <div ref="editorContainer" class="w-full h-full" />
+  <textarea v-if="editorUnavailable" v-model="model" class="studio-editor-fallback" :aria-label="label" spellcheck="false" />
+  <div v-else ref="container" class="studio-monaco h-full w-full" />
 </template>

package/app/components/StudioExpandButton.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ expanded: boolean; label: string }>();
+const emit = defineEmits<{ toggle: [] }>();
+</script>
+
+<template>
+  <button type="button" class="studio-expand-button" :aria-label="expanded ? `Restore ${label}` : `Expand ${label}`" :title="expanded ? 'Restore panel' : 'Expand panel'" @click="emit('toggle')">
+    <svg v-if="expanded" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M7 2v5H2m16 6h-5v5M2 7l5-5m6 16 5-5" /></svg>
+    <svg v-else viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M2 7V2h5m6 16h5v-5M2 2l5 5m6 6 5 5" /></svg>
+  </button>
+</template>

package/app/components/StudioOutput.vue

@@ -4,6 +4,7 @@ import { ref, shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
 const props = defineProps<{ modelValue: string }>();
 const outputContainer = ref<HTMLElement | null>(null);
 const editorInstance = shallowRef<any>(null);
+const colorMode = useColorMode();
 
 onMounted(async () => {
   if (!outputContainer.value) return;
@@ -13,12 +14,14 @@ onMounted(async () => {
   editorInstance.value = monaco.editor.create(outputContainer.value, {
     value: props.modelValue,
     language: "typescript",
-    theme: "vs-dark",
+    theme: colorMode.value === "dark" ? "vs-dark" : "vs",
     minimap: { enabled: false },
     automaticLayout: true,
     readOnly: true,
     fontSize: 14,
     padding: { top: 16 },
+    scrollBeyondLastLine: false,
+    wordWrap: "on",
   });
 });
 
@@ -36,6 +39,9 @@ onBeforeUnmount(() => {
     editorInstance.value.dispose();
   }
 });
+watch(() => colorMode.value, (mode) => {
+  editorInstance.value?.updateOptions({ theme: mode === "dark" ? "vs-dark" : "vs" });
+});
 </script>
 
 <template>

package/app/components/StudioSourcePanel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const source = defineModel<string>({ required: true });
+</script>
+
+<template>
+  <section class="studio-card studio-schema" aria-labelledby="schema-title">
+    <div class="studio-card-head">
+      <div class="studio-card-heading">
+        <div><p class="studio-eyebrow">TypeScript</p><h2 id="schema-title">Schema</h2></div>
+      </div>
+      <slot name="actions" />
+    </div>
+    <div class="studio-editor-surface"><ClientOnly><StudioEditor v-model="source" label="Zod schema TypeScript editor" /></ClientOnly></div>
+    <div class="studio-card-foot">Use <code>z</code> and zod-mongoose helpers directly. You can define multiple schemas.</div>
+  </section>
+</template>

package/app/components/StudioValidation.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { ValidationResult } from "../composables/useStudioRunner";
+
+defineProps<{ result: ValidationResult; stale: boolean }>();
+</script>
+
+<template>
+  <section class="studio-card studio-validation" aria-labelledby="validation-title">
+    <div class="studio-card-head">
+      <div class="studio-card-heading">
+        <div>
+          <p class="studio-eyebrow">Zod</p>
+          <h2 id="validation-title">Validation</h2>
+        </div>
+      </div>
+      <div class="studio-card-actions">
+        <span v-if="stale" class="studio-status studio-status-stale">Edited</span>
+        <span v-else-if="result.status === 'valid'" class="studio-status studio-status-valid">Valid</span>
+        <span v-else-if="result.status === 'invalid' || result.status === 'json-error' || result.status === 'parse-error'" class="studio-status studio-status-invalid">Invalid</span>
+        <span v-else class="studio-status">Ready</span>
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div class="studio-validation-body">
+      <div v-if="result.status === 'valid'" class="studio-result-intro">
+        <span class="studio-result-icon studio-result-icon-valid">✓</span>
+        <div><strong>Parsed successfully</strong><p>Defaults, transforms and stripped fields appear below.</p></div>
+      </div>
+      <div v-else-if="result.status === 'invalid'" class="studio-result-intro">
+        <span class="studio-result-icon studio-result-icon-invalid">!</span>
+        <div><strong>{{ result.issues?.length }} validation issue{{ result.issues?.length === 1 ? '' : 's' }}</strong><p>Update the JSON input and run again.</p></div>
+      </div>
+      <div v-else class="studio-result-intro">
+        <span class="studio-result-icon">{ }</span>
+        <div><strong>{{ result.status === 'json-error' ? 'JSON could not be read' : result.status === 'parse-error' ? 'Validation could not run' : 'Ready to validate' }}</strong><p>{{ result.message }}</p></div>
+      </div>
+
+      <pre v-if="result.status === 'valid'" class="studio-parsed" aria-label="Parsed data">{{ result.parsed }}</pre>
+      <ul v-else-if="result.status === 'invalid'" class="studio-issues">
+        <li v-for="(issue, index) in result.issues" :key="`${issue.path}-${index}`">
+          <code>{{ issue.path }}</code><span>{{ issue.message }}</span>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>