gazetta 0.0.7 → 0.1.0

package/dist/editor/mount.js

@@ -3,56 +3,711 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Form from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
 const roots = new WeakMap();
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
 const STYLES = `
-.gz-editor { font-family: system-ui, -apple-system, sans-serif; font-size: 0.875rem; }
+/* Theme — CSS variables set by the host (EditorPanel.vue) */
+/* Base */
+.gz-editor {
+  font-family: system-ui, -apple-system, sans-serif; font-size: 0.875rem;
+  color: var(--gz-text, #e0e0e0);
+  transition: color 0.2s, background-color 0.2s;
+}
+.gz-editor * { box-sizing: border-box; }
 .gz-editor .form-group { margin-bottom: 1rem; }
-.gz-editor label { display: block; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #a0a0a0; margin-bottom: 0.25rem; }
-.gz-editor .field-description { font-size: 0.75rem; color: #888; margin-bottom: 0.375rem; }
+.gz-editor label {
+  display: block; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--gz-text-label, #8888a0); margin-bottom: 0.375rem;
+}
+.gz-editor .field-description { font-size: 0.75rem; color: var(--gz-text-hint, #666680); margin-bottom: 0.375rem; line-height: 1.4; }
+
+/* Inputs */
 .gz-editor input[type="text"], .gz-editor input[type="number"], .gz-editor input[type="url"],
-.gz-editor input[type="email"], .gz-editor input[type="password"], .gz-editor input[type="color"],
+.gz-editor input[type="email"], .gz-editor input[type="password"],
 .gz-editor textarea, .gz-editor select {
-  width: 100%; padding: 0.5rem 0.625rem; font-size: 0.875rem; font-family: inherit;
-  background: #1e1e2e; color: #e0e0e0; border: 1px solid #3a3a4a; border-radius: 6px;
-  outline: none; transition: border-color 0.15s;
+  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit;
+  background: var(--gz-bg-input, #161622); color: var(--gz-text, #e0e0e0); border: 1px solid var(--gz-border, #2a2a3a); border-radius: 6px;
+  outline: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s, color 0.2s;
 }
 .gz-editor input:focus, .gz-editor textarea:focus, .gz-editor select:focus {
-  border-color: #667eea;
+  border-color: var(--gz-accent, #667eea); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gz-accent, #667eea) 15%, transparent);
+}
+.gz-editor textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
+.gz-editor select {
+  appearance: none; cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
 }
-.gz-editor textarea { min-height: 5rem; resize: vertical; }
+
+/* Hide rjsf chrome */
 .gz-editor .btn { display: none; }
-.gz-editor .error-detail, .gz-editor .text-danger { color: #f87171; font-size: 0.75rem; }
-.gz-editor .array-item { padding: 0.5rem; border: 1px solid #2a2a3a; border-radius: 6px; margin-bottom: 0.5rem; }
-.gz-editor .array-item-toolbox { display: flex; gap: 0.25rem; margin-top: 0.375rem; }
-.gz-editor .array-item-toolbox .btn { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; background: #2a2a3a; color: #ccc; border: none; border-radius: 4px; cursor: pointer; }
-.gz-editor .array-item-toolbox .btn:hover { background: #3a3a4a; }
-.gz-editor .markdown-widget textarea { min-height: 12rem; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem; line-height: 1.6; }
-.gz-editor .markdown-widget .markdown-hint { font-size: 0.6875rem; color: #52525b; margin-top: 0.25rem; }
+.gz-editor fieldset { border: none; padding: 0; margin: 0; }
+.gz-editor legend { display: none; }
+
+/* Errors */
+.gz-editor .error-detail, .gz-editor .text-danger { color: var(--gz-error, #f87171); font-size: 0.75rem; margin-top: 0.25rem; }
+.gz-editor .has-error input, .gz-editor .has-error textarea, .gz-editor .has-error select { border-color: color-mix(in srgb, var(--gz-error, #f87171) 50%, transparent); }
+
+/* Required marker */
+.gz-editor label .required { color: var(--gz-error, #f87171); margin-left: 0.125rem; }
+
+/* ---- Toggle ---- */
+.gz-editor .gz-toggle { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; user-select: none; padding: 0.25rem 0; }
+.gz-editor .gz-toggle-track {
+  position: relative; width: 36px; height: 20px; border-radius: 10px;
+  background: var(--gz-border, #2a2a3a); transition: background 0.2s; flex-shrink: 0;
+}
+.gz-editor .gz-toggle-track.on { background: var(--gz-accent, #667eea); }
+.gz-editor .gz-toggle-thumb {
+  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+  background: #fff; transition: transform 0.2s ease;
+}
+.gz-editor .gz-toggle-track.on .gz-toggle-thumb { transform: translateX(16px); }
+.gz-editor .gz-toggle-label { font-size: 0.8125rem; color: var(--gz-text-secondary, #ccc); font-weight: 400; text-transform: none; letter-spacing: 0; }
+
+/* ---- Color ---- */
+.gz-editor .gz-color-widget { display: flex; align-items: center; gap: 0.5rem; }
+.gz-editor .gz-color-widget input[type="color"] {
+  width: 36px; height: 36px; border: 1px solid var(--gz-border, #2a2a3a); border-radius: 6px;
+  padding: 2px; cursor: pointer; background: transparent;
+}
+.gz-editor .gz-color-widget input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
+.gz-editor .gz-color-widget input[type="color"]::-webkit-color-swatch { border-radius: 3px; border: none; }
+.gz-editor .gz-color-widget input[type="text"] { flex: 1; }
+
+/* ---- Tags ---- */
+.gz-editor .gz-tags {
+  display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.375rem 0.5rem;
+  background: var(--gz-bg-input, #161622); border: 1px solid var(--gz-border, #2a2a3a); border-radius: 6px;
+  min-height: 2.5rem; align-items: center; cursor: text; transition: border-color 0.15s, box-shadow 0.15s;
+}
+.gz-editor .gz-tags:focus-within { border-color: var(--gz-accent, #667eea); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gz-accent, #667eea) 15%, transparent); }
+.gz-editor .gz-tag {
+  display: inline-flex; align-items: center; gap: 0.25rem;
+  padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;
+  background: var(--gz-bg-chip, #252538); border: 1px solid var(--gz-border, #2a2a3a); border-radius: 4px;
+  font-size: 0.8125rem; color: var(--gz-text-secondary, #ccc); transition: background 0.1s;
+}
+.gz-editor .gz-tag:hover { background: var(--gz-bg-chip, #252538); filter: brightness(1.1); }
+.gz-editor .gz-tag-remove {
+  background: none; border: none; color: var(--gz-text-hint, #666); cursor: pointer; font-size: 1rem;
+  padding: 0; line-height: 1; display: flex; align-items: center;
+}
+.gz-editor .gz-tag-remove:hover { color: var(--gz-error, #f87171); }
+.gz-editor .gz-tags-input {
+  border: none !important; background: transparent !important; color: var(--gz-text, #e0e0e0); font-size: 0.8125rem;
+  outline: none !important; min-width: 80px; flex: 1; padding: 0.125rem 0;
+  box-shadow: none !important;
+}
+.gz-editor .gz-tags-empty { color: var(--gz-text-hint, #444); font-size: 0.75rem; padding: 0.25rem 0; }
+
+/* ---- Image ---- */
+.gz-editor .gz-image-preview {
+  margin-top: 0.5rem; border-radius: 6px; overflow: hidden;
+  background: var(--gz-bg-input, #161622); border: 1px dashed var(--gz-border, #2a2a3a); transition: border-color 0.15s;
+}
+.gz-editor .gz-image-preview.has-image { border-style: solid; }
+.gz-editor .gz-image-preview img { display: block; max-width: 100%; max-height: 200px; object-fit: contain; margin: 0 auto; }
+.gz-editor .gz-image-preview-empty {
+  padding: 2rem; text-align: center; color: var(--gz-text-hint, #444); font-size: 0.75rem;
+}
+
+/* ---- Slug ---- */
+.gz-editor .gz-slug-widget input {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem; letter-spacing: 0.02em;
+}
+.gz-editor .gz-slug-hint { font-size: 0.6875rem; color: var(--gz-text-hint, #444); margin-top: 0.25rem; }
+
+/* ---- Code ---- */
+.gz-editor .gz-code-widget textarea {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem;
+  line-height: 1.6; min-height: 10rem; tab-size: 2;
+}
+.gz-editor .gz-code-hint { font-size: 0.6875rem; color: var(--gz-text-hint, #444); margin-top: 0.25rem; }
+
+/* ---- JSON ---- */
+.gz-editor .gz-json-widget textarea {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem;
+  line-height: 1.6; min-height: 8rem; tab-size: 2;
+}
+.gz-editor .gz-json-error { font-size: 0.6875rem; color: var(--gz-error, #f87171); margin-top: 0.25rem; }
+.gz-editor .gz-json-valid { font-size: 0.6875rem; color: var(--gz-success, #4ade80); margin-top: 0.25rem; }
+
+/* ---- Markdown ---- */
+.gz-editor .gz-markdown textarea {
+  min-height: 12rem; font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.8125rem; line-height: 1.6;
+}
+.gz-editor .gz-markdown-hint { font-size: 0.6875rem; color: var(--gz-text-hint, #444); margin-top: 0.25rem; }
+
+/* ---- Rich text (Tiptap) ---- */
+.gz-editor .gz-richtext {
+  border: 1px solid var(--gz-border, #2a2a3a); border-radius: 6px; overflow: hidden;
+  background: var(--gz-bg-input, #161622); transition: border-color 0.15s, box-shadow 0.15s;
+}
+.gz-editor .gz-richtext:focus-within { border-color: var(--gz-accent, #667eea); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gz-accent, #667eea) 15%, transparent); }
+.gz-editor .gz-richtext-toolbar {
+  display: flex; flex-wrap: wrap; gap: 1px; padding: 0.25rem;
+  border-bottom: 1px solid var(--gz-border-subtle, #1e1e2e); background: var(--gz-bg-toolbar, #1a1a2a);
+}
+.gz-editor .gz-rt-btn {
+  background: none; border: 1px solid transparent; border-radius: 4px;
+  color: var(--gz-text-hint, #777); cursor: pointer; padding: 0.3125rem 0.5rem; font-size: 0.6875rem;
+  font-family: inherit; line-height: 1; font-weight: 600; transition: all 0.1s;
+  display: flex; align-items: center; justify-content: center; min-width: 28px;
+}
+.gz-editor .gz-rt-btn:hover { color: var(--gz-text-secondary, #ccc); background: var(--gz-bg-chip, #252538); }
+.gz-editor .gz-rt-btn.active { color: var(--gz-accent, #667eea); background: var(--gz-bg-chip, #252538); border-color: color-mix(in srgb, var(--gz-accent, #667eea) 20%, transparent); }
+.gz-editor .gz-rt-sep { width: 1px; background: var(--gz-bg-chip, #252538); margin: 0.125rem 0.25rem; align-self: stretch; }
+
+/* Tiptap content area */
+.gz-editor .gz-richtext .tiptap { outline: none; padding: 0.75rem; min-height: 10rem; color: var(--gz-text, #e0e0e0); font-size: 0.875rem; line-height: 1.7; }
+.gz-editor .gz-richtext .tiptap p { margin: 0.25rem 0; }
+.gz-editor .gz-richtext .tiptap h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.25rem; color: var(--gz-text, #e0e0e0); }
+.gz-editor .gz-richtext .tiptap h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; color: var(--gz-text, #e0e0e0); }
+.gz-editor .gz-richtext .tiptap ul, .gz-editor .gz-richtext .tiptap ol { padding-left: 1.25rem; margin: 0.25rem 0; }
+.gz-editor .gz-richtext .tiptap li { margin: 0.125rem 0; }
+.gz-editor .gz-richtext .tiptap blockquote {
+  border-left: 3px solid color-mix(in srgb, var(--gz-accent, #667eea) 25%, transparent); padding-left: 0.875rem; margin: 0.5rem 0;
+  color: var(--gz-text-secondary, #999); font-style: italic;
+}
+.gz-editor .gz-richtext .tiptap code {
+  background: var(--gz-bg-chip, #252538); padding: 0.125rem 0.375rem; border-radius: 3px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem;
+}
+.gz-editor .gz-richtext .tiptap pre {
+  background: var(--gz-bg-code, #12121e); padding: 0.875rem; border-radius: 6px; overflow-x: auto; margin: 0.5rem 0;
+}
+.gz-editor .gz-richtext .tiptap pre code { background: none; padding: 0; }
+.gz-editor .gz-richtext .tiptap a { color: var(--gz-accent, #667eea); text-decoration: underline; cursor: pointer; }
+.gz-editor .gz-richtext .tiptap hr { border: none; border-top: 1px solid var(--gz-border, #2a2a3a); margin: 1rem 0; }
+.gz-editor .gz-richtext .tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder); float: left; color: var(--gz-text-hint, #444); pointer-events: none; height: 0;
+}
+
+/* Bubble menu */
+.gz-editor .gz-bubble {
+  display: flex; gap: 1px; background: var(--gz-bg-toolbar, #1a1a2a); border: 1px solid var(--gz-border, #2a2a3a);
+  border-radius: 6px; padding: 0.1875rem; box-shadow: 0 4px 16px #0008;
+}
+.gz-editor .gz-bubble .gz-rt-btn { padding: 0.25rem 0.4375rem; font-size: 0.625rem; }
+
+/* ---- Array ---- */
+.gz-editor .gz-array { margin-bottom: 0.25rem; }
+.gz-editor .gz-array-header {
+  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding-bottom: 0.375rem;
+  border-bottom: 1px solid var(--gz-border-subtle, #1e1e2e);
+}
+.gz-editor .gz-array-title {
+  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--gz-text-label, #8888a0);
+}
+.gz-editor .gz-array-count {
+  font-size: 0.625rem; color: var(--gz-text-hint, #555); background: var(--gz-border-subtle, #1e1e2e);
+  padding: 0.0625rem 0.4375rem; border-radius: 8px; font-weight: 600;
+}
+.gz-editor .gz-array-add {
+  margin-left: auto; background: none; border: 1px solid color-mix(in srgb, var(--gz-accent, #667eea) 20%, transparent);
+  color: var(--gz-accent, #667eea); cursor: pointer; font-size: 0.6875rem; font-weight: 600;
+  padding: 0.25rem 0.625rem; border-radius: 4px; transition: all 0.15s;
+}
+.gz-editor .gz-array-add:hover { background: color-mix(in srgb, var(--gz-accent, #667eea) 8%, transparent); border-color: color-mix(in srgb, var(--gz-accent, #667eea) 30%, transparent); }
+.gz-editor .gz-array-items { display: flex; flex-direction: column; gap: 0.25rem; }
+
+/* Array items — collapsible */
+.gz-editor .gz-array-item {
+  background: var(--gz-bg-card, #1a1a28); border-radius: 6px; border: 1px solid var(--gz-border-subtle, #1e1e2e);
+  transition: border-color 0.15s;
+}
+.gz-editor .gz-array-item:hover { border-color: var(--gz-border, #2a2a3a); }
+.gz-editor .gz-array-item.dragging { opacity: 0.9; box-shadow: 0 4px 20px #0006; border-color: color-mix(in srgb, var(--gz-accent, #667eea) 25%, transparent); }
+.gz-editor .gz-array-item-header {
+  display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.625rem;
+  cursor: pointer; user-select: none; min-height: 36px;
+}
+.gz-editor .gz-array-item-handle {
+  color: var(--gz-text-hint, #444); font-size: 0.625rem; cursor: grab; flex-shrink: 0; padding: 0.25rem 0.125rem;
+  opacity: 0; transition: opacity 0.1s; display: flex; align-items: center; letter-spacing: 1px;
+}
+.gz-editor .gz-array-item:hover .gz-array-item-handle { opacity: 1; }
+.gz-editor .gz-array-item-handle:active { cursor: grabbing; color: var(--gz-accent, #667eea); }
+.gz-editor .gz-array-item-chevron {
+  color: var(--gz-text-hint, #444); font-size: 0.5rem; transition: transform 0.15s ease; flex-shrink: 0; width: 12px; text-align: center;
+}
+.gz-editor .gz-array-item-chevron.open { transform: rotate(90deg); }
+.gz-editor .gz-array-item-summary {
+  flex: 1; font-size: 0.8125rem; color: var(--gz-text-secondary, #999); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; min-width: 0;
+}
+.gz-editor .gz-array-item-summary.empty { color: var(--gz-text-hint, #444); font-style: italic; }
+.gz-editor .gz-array-item-idx {
+  font-size: 0.625rem; color: var(--gz-text-hint, #444); font-weight: 600; flex-shrink: 0;
+  min-width: 1rem; text-align: center;
+}
+.gz-editor .gz-array-item-actions { display: flex; gap: 1px; flex-shrink: 0; opacity: 0; transition: opacity 0.1s; }
+.gz-editor .gz-array-item:hover .gz-array-item-actions { opacity: 1; }
+.gz-editor .gz-array-item-body {
+  padding: 0 0.75rem 0.75rem; overflow: hidden;
+  transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
+}
+.gz-editor .gz-array-item-body.collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
+.gz-editor .gz-array-item-body.expanded { max-height: 2000px; opacity: 1; }
+.gz-editor .gz-array-item-body .form-group:last-child { margin-bottom: 0; }
+.gz-editor .gz-array-item-body fieldset > .form-group:last-child { margin-bottom: 0; }
+
+/* Icon buttons */
+.gz-editor .gz-btn-icon {
+  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
+  background: transparent; border: none; border-radius: 3px; color: var(--gz-text-hint, #555); cursor: pointer;
+  font-size: 0.6875rem; padding: 0; transition: all 0.1s;
+}
+.gz-editor .gz-btn-icon:hover { background: var(--gz-bg-chip, #252538); color: var(--gz-text-secondary, #ccc); }
+.gz-editor .gz-btn-icon:disabled { opacity: 0.25; cursor: default; }
+.gz-editor .gz-btn-icon:disabled:hover { background: transparent; color: var(--gz-text-hint, #555); }
+.gz-editor .gz-btn-icon.gz-btn-remove:hover { background: color-mix(in srgb, var(--gz-error, #f87171) 15%, transparent); color: var(--gz-error, #f87171); }
+
+/* Array empty state */
+.gz-editor .gz-array-empty {
+  padding: 1.5rem; text-align: center; border: 1px dashed var(--gz-border-subtle, #1e1e2e); border-radius: 6px;
+  color: var(--gz-text-hint, #444); font-size: 0.8125rem;
+}
+
+/* Nested objects in arrays */
+.gz-editor .gz-object-inline { }
+.gz-editor .gz-object-inline > .form-group { margin-bottom: 0.625rem; }
 `;
-/** Markdown widget — textarea with monospace font and hint */
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const LONG_TEXT_NAMES = new Set(['body', 'description', 'text', 'content', 'bio', 'summary', 'message', 'notes', 'output']);
+const URL_NAMES = new Set(['href', 'url', 'link', 'src']);
+const COLOR_NAMES = new Set(['background', 'color']);
+function buildUiSchema(jsonSchema) {
+    const ui = { 'ui:submitButtonOptions': { norender: true } };
+    const properties = jsonSchema.properties;
+    if (!properties)
+        return ui;
+    for (const [name, prop] of Object.entries(properties)) {
+        const format = prop.format;
+        const type = prop.type;
+        const customField = prop.field;
+        // Custom field — highest priority
+        if (customField) {
+            ui[name] = { 'ui:widget': `custom-field:${customField}` };
+            continue;
+        }
+        if (format === 'markdown' || format === 'richtext' || format === 'image' || format === 'link' || format === 'slug' || format === 'code' || format === 'json') {
+            ui[name] = { 'ui:widget': format };
+            continue;
+        }
+        if (format === 'color') {
+            ui[name] = { 'ui:widget': 'color' };
+            continue;
+        }
+        if (type === 'string' && !format) {
+            if (LONG_TEXT_NAMES.has(name)) {
+                ui[name] = { 'ui:widget': 'textarea', 'ui:options': { rows: 5 } };
+            }
+            else if (URL_NAMES.has(name)) {
+                ui[name] = { 'ui:options': { inputType: 'url' } };
+            }
+            else if (COLOR_NAMES.has(name)) {
+                ui[name] = { 'ui:widget': 'color' };
+            }
+        }
+        if (type === 'boolean') {
+            ui[name] = { 'ui:widget': 'toggle' };
+        }
+        if (type === 'array') {
+            const items = prop.items;
+            if (items?.type === 'string') {
+                ui[name] = { 'ui:widget': 'tags' };
+            }
+        }
+    }
+    return ui;
+}
+/** Extract a one-line summary from an array item's formData for the collapsed header */
+function summarizeItem(data) {
+    if (!data || typeof data !== 'object')
+        return String(data ?? '');
+    const obj = data;
+    // Try common field names that make good summaries
+    for (const key of ['title', 'name', 'label', 'heading', 'text', 'quote', 'command']) {
+        if (typeof obj[key] === 'string' && obj[key])
+            return obj[key];
+    }
+    // Fall back to first non-empty string value
+    for (const val of Object.values(obj)) {
+        if (typeof val === 'string' && val.trim())
+            return val.trim();
+    }
+    return '';
+}
+// ---------------------------------------------------------------------------
+// Widgets
+// ---------------------------------------------------------------------------
 function MarkdownWidget(props) {
-    return (_jsxs("div", { className: "markdown-widget", children: [_jsx("textarea", { value: props.value ?? '', onChange: (e) => props.onChange(e.target.value), placeholder: props.placeholder, rows: props.schema.rows ?? 12 }), _jsx("div", { className: "markdown-hint", children: "Markdown supported" })] }));
+    return (_jsxs("div", { className: "gz-markdown", children: [_jsx("textarea", { value: props.value ?? '', onChange: (e) => props.onChange(e.target.value), placeholder: "Write markdown here...", rows: 12 }), _jsx("div", { className: "gz-markdown-hint", children: "Markdown supported" })] }));
+}
+function ToggleWidget(props) {
+    const on = !!props.value;
+    return (_jsxs("div", { className: "gz-toggle", onClick: () => !props.disabled && !props.readonly && props.onChange(!on), role: "switch", "aria-checked": on, children: [_jsx("div", { className: `gz-toggle-track${on ? ' on' : ''}`, children: _jsx("div", { className: "gz-toggle-thumb" }) }), props.label && _jsx("span", { className: "gz-toggle-label", children: props.label })] }));
+}
+function ColorWidget(props) {
+    const val = props.value ?? '';
+    return (_jsxs("div", { className: "gz-color-widget", children: [_jsx("input", { type: "color", value: val || '#667eea', onChange: (e) => props.onChange(e.target.value) }), _jsx("input", { type: "text", value: val, onChange: (e) => props.onChange(e.target.value), placeholder: "#667eea" })] }));
 }
-const customWidgets = {
+function TagsWidget(props) {
+    const tags = Array.isArray(props.value) ? props.value : [];
+    const [input, setInput] = React.useState('');
+    const inputRef = React.useRef(null);
+    const addTag = (tag) => {
+        const trimmed = tag.trim();
+        if (trimmed && !tags.includes(trimmed))
+            props.onChange([...tags, trimmed]);
+        setInput('');
+    };
+    const removeTag = (index) => props.onChange(tags.filter((_, i) => i !== index));
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            addTag(input);
+        }
+        else if (e.key === 'Backspace' && !input && tags.length > 0) {
+            removeTag(tags.length - 1);
+        }
+    };
+    return (_jsxs("div", { className: "gz-tags", onClick: () => inputRef.current?.focus(), children: [tags.map((tag, i) => (_jsxs("span", { className: "gz-tag", children: [tag, _jsx("button", { type: "button", className: "gz-tag-remove", onClick: (e) => { e.stopPropagation(); removeTag(i); }, "aria-label": `Remove ${tag}`, children: "\u00D7" })] }, `${tag}-${i}`))), _jsx("input", { ref: inputRef, className: "gz-tags-input", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, onBlur: () => { if (input)
+                    addTag(input); }, placeholder: tags.length === 0 ? 'Type and press Enter...' : '' })] }));
+}
+function ImageWidget(props) {
+    const url = props.value ?? '';
+    const [broken, setBroken] = React.useState(false);
+    React.useEffect(() => { setBroken(false); }, [url]);
+    return (_jsxs("div", { children: [_jsx("input", { type: "text", value: url, onChange: (e) => props.onChange(e.target.value), placeholder: "https://example.com/image.png" }), _jsx("div", { className: `gz-image-preview${url && !broken ? ' has-image' : ''}`, children: url && !broken
+                    ? _jsx("img", { src: url, alt: "Preview", onError: () => setBroken(true) })
+                    : _jsx("div", { className: "gz-image-preview-empty", children: url ? 'Image failed to load' : 'Paste an image URL above' }) })] }));
+}
+function LinkWidget(props) {
+    return _jsx("input", { type: "url", value: props.value ?? '', onChange: (e) => props.onChange(e.target.value), placeholder: "https://..." });
+}
+function SlugWidget(props) {
+    const toSlug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    return (_jsxs("div", { className: "gz-slug-widget", children: [_jsx("input", { type: "text", value: props.value ?? '', onChange: (e) => props.onChange(toSlug(e.target.value)), placeholder: "my-page-slug" }), _jsx("div", { className: "gz-slug-hint", children: "URL-safe identifier \u2014 lowercase, hyphens only" })] }));
+}
+function CodeWidget(props) {
+    const language = props.schema.language;
+    return (_jsxs("div", { className: "gz-code-widget", children: [_jsx("textarea", { value: props.value ?? '', onChange: (e) => props.onChange(e.target.value), placeholder: props.placeholder, rows: 15, spellCheck: false }), language && _jsx("div", { className: "gz-code-hint", children: language })] }));
+}
+function JsonWidget(props) {
+    const [error, setError] = React.useState(null);
+    const [text, setText] = React.useState(() => {
+        if (props.value == null)
+            return '';
+        if (typeof props.value === 'string')
+            return props.value;
+        return JSON.stringify(props.value, null, 2);
+    });
+    const handleBlur = () => {
+        if (!text.trim()) {
+            setError(null);
+            return;
+        }
+        try {
+            JSON.parse(text);
+            setError(null);
+        }
+        catch {
+            setError('Invalid JSON');
+        }
+    };
+    const handleChange = (value) => {
+        setText(value);
+        try {
+            const parsed = JSON.parse(value);
+            setError(null);
+            props.onChange(parsed);
+        }
+        catch {
+            // Don't set error while typing — only on blur
+        }
+    };
+    return (_jsxs("div", { className: "gz-json-widget", children: [_jsx("textarea", { value: text, onChange: (e) => handleChange(e.target.value), onBlur: handleBlur, placeholder: '{ "key": "value" }', rows: 10, spellCheck: false }), error && _jsx("div", { className: "gz-json-error", children: error })] }));
+}
+// ---------------------------------------------------------------------------
+// Rich Text Widget (Tiptap)
+// ---------------------------------------------------------------------------
+function RichTextWidget(props) {
+    const onChangeRef = React.useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                heading: { levels: [2, 3] },
+                codeBlock: { HTMLAttributes: { spellcheck: 'false' } },
+            }),
+            Link.configure({ openOnClick: false, HTMLAttributes: { rel: 'noopener noreferrer' } }),
+            Placeholder.configure({ placeholder: 'Start writing...' }),
+        ],
+        content: props.value || '',
+        onUpdate: ({ editor: e }) => onChangeRef.current(e.getHTML()),
+        immediatelyRender: true,
+    });
+    if (!editor)
+        return null;
+    const Btn = ({ active, onClick, children }) => (_jsx("button", { type: "button", className: `gz-rt-btn${active ? ' active' : ''}`, onMouseDown: (e) => { e.preventDefault(); onClick(); }, children: children }));
+    const addLink = () => {
+        const prev = editor.getAttributes('link').href;
+        const url = prompt('URL:', prev ?? 'https://');
+        if (url === null)
+            return;
+        if (url === '') {
+            editor.chain().focus().extendMarkRange('link').unsetLink().run();
+            return;
+        }
+        editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    };
+    return (_jsxs("div", { className: "gz-richtext", children: [_jsxs("div", { className: "gz-richtext-toolbar", children: [_jsx(Btn, { active: editor.isActive('bold'), onClick: () => editor.chain().focus().toggleBold().run(), children: "B" }), _jsx(Btn, { active: editor.isActive('italic'), onClick: () => editor.chain().focus().toggleItalic().run(), children: "I" }), _jsx(Btn, { active: editor.isActive('strike'), onClick: () => editor.chain().focus().toggleStrike().run(), children: "S" }), _jsx(Btn, { active: editor.isActive('code'), onClick: () => editor.chain().focus().toggleCode().run(), children: "</>" }), _jsx("div", { className: "gz-rt-sep" }), _jsx(Btn, { active: editor.isActive('heading', { level: 2 }), onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: "H2" }), _jsx(Btn, { active: editor.isActive('heading', { level: 3 }), onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: "H3" }), _jsx("div", { className: "gz-rt-sep" }), _jsx(Btn, { active: editor.isActive('bulletList'), onClick: () => editor.chain().focus().toggleBulletList().run(), children: "\u2022" }), _jsx(Btn, { active: editor.isActive('orderedList'), onClick: () => editor.chain().focus().toggleOrderedList().run(), children: "1." }), _jsx(Btn, { active: editor.isActive('blockquote'), onClick: () => editor.chain().focus().toggleBlockquote().run(), children: "\u201C" }), _jsx("div", { className: "gz-rt-sep" }), _jsx(Btn, { active: editor.isActive('link'), onClick: addLink, children: "Link" }), _jsx(Btn, { onClick: () => editor.chain().focus().setHorizontalRule().run(), children: "\u2014" }), _jsx(Btn, { active: editor.isActive('codeBlock'), onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: "Code" })] }), _jsx(BubbleMenu, { editor: editor, children: _jsxs("div", { className: "gz-bubble", children: [_jsx(Btn, { active: editor.isActive('bold'), onClick: () => editor.chain().focus().toggleBold().run(), children: "B" }), _jsx(Btn, { active: editor.isActive('italic'), onClick: () => editor.chain().focus().toggleItalic().run(), children: "I" }), _jsx(Btn, { active: editor.isActive('strike'), onClick: () => editor.chain().focus().toggleStrike().run(), children: "S" }), _jsx(Btn, { active: editor.isActive('code'), onClick: () => editor.chain().focus().toggleCode().run(), children: "</>" }), _jsx(Btn, { active: editor.isActive('link'), onClick: addLink, children: "Link" })] }) }), _jsx(EditorContent, { editor: editor })] }));
+}
+// ---------------------------------------------------------------------------
+// Custom Templates
+// ---------------------------------------------------------------------------
+function GzArrayFieldTemplate(props) {
+    const ctx = props.registry.formContext;
+    const fieldPath = props.fieldPathId?.$id ?? '';
+    const handleDragEnd = (result) => {
+        if (!result.destination || result.source.index === result.destination.index)
+            return;
+        ctx?.reorderArray(fieldPath, result.source.index, result.destination.index);
+    };
+    if (props.items.length === 0) {
+        return (_jsxs("div", { className: "gz-array", children: [_jsxs("div", { className: "gz-array-header", children: [props.title && _jsx("span", { className: "gz-array-title", children: props.title }), _jsx("span", { className: "gz-array-count", children: "0" })] }), _jsxs("div", { className: "gz-array-empty", children: ["No items yet", props.canAdd && (_jsx("div", { style: { marginTop: '0.5rem' }, children: _jsx("button", { type: "button", className: "gz-array-add", onClick: props.onAddClick, children: "+ Add first item" }) }))] })] }));
+    }
+    return (_jsxs("div", { className: "gz-array", children: [_jsxs("div", { className: "gz-array-header", children: [props.title && _jsx("span", { className: "gz-array-title", children: props.title }), _jsx("span", { className: "gz-array-count", children: props.items.length }), props.canAdd && _jsx("button", { type: "button", className: "gz-array-add", onClick: props.onAddClick, children: "+ Add" })] }), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: fieldPath || 'array', children: (provided) => (_jsxs("div", { className: "gz-array-items", ref: provided.innerRef, ...provided.droppableProps, children: [props.items, provided.placeholder] })) }) })] }));
+}
+function GzArrayFieldItemTemplate(props) {
+    const [open, setOpen] = React.useState(true);
+    const summary = summarizeItem(props.formData);
+    const draggableId = `${props.buttonsProps.fieldPathId?.$id ?? 'item'}-${props.index}`;
+    return (_jsx(Draggable, { draggableId: draggableId, index: props.index, children: (provided, snapshot) => (_jsxs("div", { className: `gz-array-item${snapshot.isDragging ? ' dragging' : ''}`, ref: provided.innerRef, ...provided.draggableProps, children: [_jsxs("div", { className: "gz-array-item-header", onClick: () => setOpen(!open), children: [_jsx("span", { className: "gz-array-item-handle", ...provided.dragHandleProps, onClick: (e) => e.stopPropagation(), children: "\u2801\u2801" }), _jsx("span", { className: `gz-array-item-chevron${open ? ' open' : ''}`, children: "\u25B6" }), _jsx("span", { className: "gz-array-item-idx", children: props.index + 1 }), !open && _jsx("span", { className: `gz-array-item-summary${summary ? '' : ' empty'}`, children: summary || 'Empty item' }), _jsx("div", { className: "gz-array-item-actions", onClick: (e) => e.stopPropagation(), children: _jsx(GzArrayFieldItemButtonsTemplate, { ...props.buttonsProps }) })] }), _jsx("div", { className: `gz-array-item-body ${open ? 'expanded' : 'collapsed'}`, children: props.children })] })) }));
+}
+function GzArrayFieldItemButtonsTemplate(props) {
+    return (_jsxs(_Fragment, { children: [props.hasMoveUp && _jsx("button", { type: "button", className: "gz-btn-icon", onClick: props.onMoveUpItem, title: "Move up", children: "\u2191" }), props.hasMoveDown && _jsx("button", { type: "button", className: "gz-btn-icon", onClick: props.onMoveDownItem, title: "Move down", children: "\u2193" }), props.hasRemove && _jsx("button", { type: "button", className: "gz-btn-icon gz-btn-remove", onClick: props.onRemoveItem, title: "Remove", children: "\u00D7" })] }));
+}
+function GzObjectFieldTemplate(props) {
+    const isRoot = props.fieldPathId?.$id === 'root';
+    if (isRoot)
+        return _jsx(_Fragment, { children: props.properties.map((p) => p.content) });
+    return _jsx("div", { className: "gz-object-inline", children: props.properties.map((p) => p.content) });
+}
+function GzAddButton(props) {
+    return _jsx("button", { type: "button", className: "gz-array-add", onClick: props.onClick, disabled: props.disabled, children: "+ Add" });
+}
+const fieldWidgetCache = new Map();
+/** Create an async widget that loads a FieldMount module and mounts it */
+function getCustomFieldWidget(fieldName) {
+    const cached = fieldWidgetCache.get(fieldName);
+    if (cached)
+        return cached;
+    const CustomFieldWidget = (props) => {
+        const containerRef = React.useRef(null);
+        const mountRef = React.useRef(null);
+        const mountedRef = React.useRef(false);
+        const [loading, setLoading] = React.useState(true);
+        const [error, setError] = React.useState(null);
+        const ctx = props.registry?.formContext;
+        // Load the field module once
+        React.useEffect(() => {
+            if (!ctx?.fieldsBaseUrl) {
+                setError('No fields base URL configured');
+                setLoading(false);
+                return;
+            }
+            const base = `${ctx.fieldsBaseUrl}/${fieldName}`;
+            (async () => {
+                // Try extensions in order: .tsx/.ts (dev), .js (production)
+                for (const ext of ['.tsx', '.ts', '.js']) {
+                    try {
+                        const mod = await import(/* @vite-ignore */ `${base}${ext}`);
+                        mountRef.current = (mod.default ?? mod);
+                        setLoading(false);
+                        return;
+                    }
+                    catch { /* try next */ }
+                }
+                setError(`Failed to load field "${fieldName}"`);
+                setLoading(false);
+            })();
+        }, [ctx?.fieldsBaseUrl]);
+        // Mount the FieldMount once loaded — unmount on cleanup
+        React.useEffect(() => {
+            if (loading || !containerRef.current || !mountRef.current)
+                return;
+            const el = containerRef.current;
+            const fm = mountRef.current;
+            fm.mount(el, {
+                value: props.value,
+                schema: props.schema,
+                theme: ctx?.theme ?? 'dark',
+                onChange: (v) => props.onChange(v),
+            });
+            mountedRef.current = true;
+            return () => { fm.unmount(el); mountedRef.current = false; };
+        }, [loading]);
+        // Update value without re-mounting — call mount again with new value
+        // FieldMount implementations should handle being called multiple times
+        React.useEffect(() => {
+            if (!mountedRef.current || !containerRef.current || !mountRef.current)
+                return;
+            mountRef.current.mount(containerRef.current, {
+                value: props.value,
+                schema: props.schema,
+                theme: ctx?.theme ?? 'dark',
+                onChange: (v) => props.onChange(v),
+            });
+        }, [props.value]);
+        if (loading)
+            return _jsxs("div", { style: { color: 'var(--gz-text-hint)', fontSize: '0.75rem', padding: '0.5rem 0' }, children: ["Loading ", fieldName, "..."] });
+        if (error)
+            return _jsx("div", { style: { color: 'var(--gz-error)', fontSize: '0.75rem' }, children: error });
+        return _jsx("div", { ref: containerRef });
+    };
+    fieldWidgetCache.set(fieldName, CustomFieldWidget);
+    return CustomFieldWidget;
+}
+// ---------------------------------------------------------------------------
+// Registries
+// ---------------------------------------------------------------------------
+const builtinWidgets = {
     markdown: MarkdownWidget,
+    toggle: ToggleWidget,
+    color: ColorWidget,
+    tags: TagsWidget,
+    richtext: RichTextWidget,
+    image: ImageWidget,
+    link: LinkWidget,
+    slug: SlugWidget,
+    code: CodeWidget,
+    json: JsonWidget,
+};
+/** Build widgets object including any custom field widgets referenced in the schema */
+function buildWidgets(jsonSchema) {
+    const widgets = { ...builtinWidgets };
+    const properties = jsonSchema.properties;
+    if (!properties)
+        return widgets;
+    for (const prop of Object.values(properties)) {
+        const fieldName = prop.field;
+        if (fieldName) {
+            widgets[`custom-field:${fieldName}`] = getCustomFieldWidget(fieldName);
+        }
+    }
+    return widgets;
+}
+const customTemplates = {
+    ArrayFieldTemplate: GzArrayFieldTemplate,
+    ArrayFieldItemTemplate: GzArrayFieldItemTemplate,
+    ArrayFieldItemButtonsTemplate: GzArrayFieldItemButtonsTemplate,
+    ObjectFieldTemplate: GzObjectFieldTemplate,
+    ButtonTemplates: { AddButton: GzAddButton },
 };
+/**
+ * The default @rjsf form editor as a React component.
+ * Custom editors can embed this: `<DefaultEditorForm schema={schema} content={content} onChange={onChange} />`
+ */
+export function DefaultEditorForm({ schema: jsonSchema, content, onChange, fieldsBaseUrl, theme }) {
+    const uiSchema = React.useMemo(() => buildUiSchema(jsonSchema), [jsonSchema]);
+    const widgets = React.useMemo(() => buildWidgets(jsonSchema), [jsonSchema]);
+    const [formData, setFormData] = React.useState(content);
+    const formDataRef = React.useRef(formData);
+    formDataRef.current = formData;
+    const undoStack = React.useRef([]);
+    const redoStack = React.useRef([]);
+    const isUndoRedo = React.useRef(false);
+    const pushHistory = (prev) => {
+        if (isUndoRedo.current)
+            return;
+        undoStack.current.push(prev);
+        if (undoStack.current.length > 50)
+            undoStack.current.shift();
+        redoStack.current = [];
+    };
+    const applyFormData = (data) => {
+        setFormData(data);
+        onChange(data);
+    };
+    const handleChange = (e) => {
+        pushHistory(formDataRef.current);
+        setFormData(e.formData);
+        onChange(e.formData);
+    };
+    React.useEffect(() => {
+        const handler = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    if (redoStack.current.length === 0)
+                        return;
+                    const next = redoStack.current.pop();
+                    undoStack.current.push(formDataRef.current);
+                    isUndoRedo.current = true;
+                    applyFormData(next);
+                    isUndoRedo.current = false;
+                }
+                else {
+                    if (undoStack.current.length === 0)
+                        return;
+                    const prev = undoStack.current.pop();
+                    redoStack.current.push(formDataRef.current);
+                    isUndoRedo.current = true;
+                    applyFormData(prev);
+                    isUndoRedo.current = false;
+                }
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, []);
+    const reorderArray = React.useCallback((fieldPath, fromIndex, toIndex) => {
+        setFormData((prev) => {
+            pushHistory(prev);
+            const parts = fieldPath.replace(/^root_/, '').split('_');
+            const key = parts[0];
+            const arr = prev[key];
+            if (!Array.isArray(arr))
+                return prev;
+            const next = [...arr];
+            const [moved] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, moved);
+            const updated = { ...prev, [key]: next };
+            onChange(updated);
+            return updated;
+        });
+    }, [onChange]);
+    const formContext = React.useMemo(() => ({ reorderArray, fieldsBaseUrl, theme }), [reorderArray, fieldsBaseUrl, theme]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: STYLES }), _jsx("div", { className: "gz-editor", children: _jsx(Form, { schema: jsonSchema, uiSchema: uiSchema, formData: formData, onChange: handleChange, validator: validator, widgets: widgets, templates: customTemplates, formContext: formContext, liveValidate: false, omitExtraData: true, noHtml5Validate: true }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Mount — wraps DefaultEditorForm for the mount/unmount lifecycle
+// ---------------------------------------------------------------------------
 export function createEditorMount(jsonSchema) {
     return {
-        mount(el, { content, onChange }) {
+        mount(el, { content, schema, theme, onChange, fieldsBaseUrl }) {
             const existing = roots.get(el);
             if (existing)
                 existing.unmount();
             const root = createRoot(el);
             roots.set(el, root);
-            function EditorForm() {
-                const [formData, setFormData] = React.useState(content);
-                const handleChange = (e) => {
-                    setFormData(e.formData);
-                    onChange(e.formData);
-                };
-                return (_jsxs(_Fragment, { children: [_jsx("style", { children: STYLES }), _jsx("div", { className: "gz-editor", children: _jsx(Form, { schema: jsonSchema, uiSchema: { 'ui:submitButtonOptions': { norender: true } }, formData: formData, onChange: handleChange, validator: validator, widgets: customWidgets, liveValidate: true, omitExtraData: true }) })] }));
-            }
-            root.render(_jsx(EditorForm, {}));
+            root.render(_jsx(DefaultEditorForm, { schema: schema ?? jsonSchema, content: content, theme: theme, fieldsBaseUrl: fieldsBaseUrl, onChange: onChange }));
         },
         unmount(el) {
             const root = roots.get(el);