@squaredr/fieldcraft-pro 1.3.0 → 1.4.0

package/dist/theme-editor/index.mjs

@@ -1,2 +1,2 @@
-export { PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner } from '../chunk-7LQW5QYT.mjs';
+export { PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner, ThemeEditorThemeProvider, draftingTealDarkPreset, draftingTealPreset, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from '../chunk-22T5PY6L.mjs';
 import '../chunk-VECQKSWS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squaredr/fieldcraft-pro",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Pro components for FieldCraft — visual drag-and-drop Form Builder, Response Viewer, and Theme Editor for React",
   "keywords": [
     "fieldcraft",
@@ -57,19 +57,21 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@monaco-editor/react": "^4.6.0",
+    "@xyflow/react": "^12.11.3",
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
-    "@squaredr/fieldcraft-core": "^1.4.0",
-    "@squaredr/fieldcraft-react": "^1.3.0",
+    "@squaredr/fieldcraft-core": "^1.5.0",
+    "@squaredr/fieldcraft-react": "^1.4.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@squaredr/fieldcraft-core": "^1.4.0",
-    "@squaredr/fieldcraft-react": "^1.3.0",
+    "@squaredr/fieldcraft-core": "^1.5.0",
+    "@squaredr/fieldcraft-react": "^1.4.0",
     "@tailwindcss/cli": "^4.3.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -94,7 +96,7 @@
     "url": "https://github.com/SquaredR98/fieldcraft-pro/issues"
   },
   "scripts": {
-    "build": "tsup && npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --minify",
+    "build": "tsup && npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --minify && node -e \"require('fs').copyFileSync('src/theme-editor/styles.css','theme-editor/styles.css')\"",
     "build:css": "npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --minify",
     "dev": "tsup && npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css && npx concurrently \"tsup --watch\" \"npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --watch\"",
     "test": "vitest run",

package/theme-editor/styles.css

@@ -1,33 +1,34 @@
 /* FieldCraft Pro Theme Editor
-   All colors use CSS custom properties with dark defaults.
-   Override on .fcte-root to match your app's theme:
-
-   .fcte-root {
-     --fcte-bg: #ffffff;
-     --fcte-surface: #f5f5f5;
-     --fcte-text: #1a1a1a;
-     --fcte-text-muted: #6b7280;
-     --fcte-border: #e0e0e0;
-     --fcte-input-bg: #f9fafb;
-     --fcte-accent: #2563eb;
-     --fcte-accent-text: #ffffff;
-   }
+   Chrome theming follows the FormBuilder pattern:
+   1. ThemeEditorThemeProvider wraps children in <div data-fcte-root="" style={cssVars}>
+   2. [data-fcte-root] defines fallback defaults (Drafting Teal light)
+   3. Provider inline styles override these when a theme prop is passed
+   4. All editor chrome references var(--fcte-*) — fully themeable
 */
 
-.fcte-root {
-  /* Configurable tokens — override these to theme the editor UI */
-  --fcte-bg: #0a0a0b;
-  --fcte-surface: #111113;
-  --fcte-surface-hover: #1c1c20;
-  --fcte-text: #e8e8ea;
-  --fcte-text-muted: #8a8a95;
-  --fcte-text-dim: #5a5a66;
-  --fcte-border: #1c1c20;
-  --fcte-border-strong: #26262c;
-  --fcte-input-bg: #17171a;
-  --fcte-accent: oklch(0.82 0.14 210);
-  --fcte-accent-text: #0a0a0b;
+/* ─── Provider root ─────────────────────────────────────────────── */
+.fcte-provider-root {
+  width: 100%;
+  height: 100%;
+}
 
+/* ─── Default theme variables — inherit from host app tokens ────── */
+[data-fcte-root] {
+  --fcte-bg: var(--bg, #F4F7F8);
+  --fcte-surface: var(--surface, #FFFFFF);
+  --fcte-surface-hover: var(--wash, #EDF3F2);
+  --fcte-text: var(--ink, #12222A);
+  --fcte-text-muted: var(--muted-text, #6A7B85);
+  --fcte-text-dim: var(--placeholder, #96A5AD);
+  --fcte-border: var(--rule, #DCE4E8);
+  --fcte-border-strong: var(--teal-border, #B9D1CF);
+  --fcte-input-bg: var(--surface2, #FAFCFC);
+  --fcte-accent: var(--teal, #1F6B6E);
+  --fcte-accent-text: var(--teal-on, #FFFFFF);
+}
+
+/* ─── Root element ──────────────────────────────────────────────── */
+.fcte-root {
   display: flex;
   flex-direction: column;
   font-family: system-ui, -apple-system, sans-serif;
@@ -37,7 +38,7 @@
   overflow: hidden;
 }
 
-/* Toolbar */
+/* ─── Toolbar ───────────────────────────────────────────────────── */
 .fcte-toolbar {
   display: flex;
   align-items: center;
@@ -69,7 +70,7 @@
 
 .fcte-toolbar__preset {
   padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: 0;
   border: 1px solid var(--fcte-border-strong);
   background: var(--fcte-input-bg);
   color: var(--fcte-text);
@@ -77,10 +78,10 @@
   cursor: pointer;
 }
 
-/* Buttons */
+/* ─── Buttons ───────────────────────────────────────────────────── */
 .fcte-btn {
   padding: 5px 12px;
-  border-radius: 4px;
+  border-radius: 0;
   border: none;
   font-size: 12px;
   font-weight: 500;
@@ -107,7 +108,12 @@
   background: var(--fcte-surface-hover);
 }
 
-/* Body split */
+.fcte-btn--sm {
+  padding: 3px 8px;
+  font-size: 11px;
+}
+
+/* ─── Body split ────────────────────────────────────────────────── */
 .fcte-body {
   display: flex;
   flex: 1;
@@ -115,7 +121,7 @@
   overflow: hidden;
 }
 
-/* Editor panel */
+/* ─── Editor panel ──────────────────────────────────────────────── */
 .fcte-editor {
   width: 320px;
   min-width: 280px;
@@ -125,37 +131,19 @@
   background: var(--fcte-surface);
 }
 
-/* Section tabs */
-.fcte-tabs {
-  display: flex;
+/* ─── Section selector dropdown ─────────────────────────────────── */
+.fcte-section-select {
+  padding: 8px 12px;
   border-bottom: 1px solid var(--fcte-border);
-  overflow-x: auto;
   flex-shrink: 0;
 }
 
-.fcte-tab {
-  padding: 8px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--fcte-text-muted);
-  border: none;
-  background: none;
-  cursor: pointer;
-  white-space: nowrap;
-  border-bottom: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.fcte-tab:hover {
-  color: var(--fcte-text);
-}
-
-.fcte-tab--active {
-  color: var(--fcte-text);
-  border-bottom-color: var(--fcte-accent);
+.fcte-section-select .fcte-field__select {
+  font-weight: 600;
+  font-size: 13px;
 }
 
-/* Fields area */
+/* ─── Fields area ───────────────────────────────────────────────── */
 .fcte-fields {
   flex: 1;
   overflow-y: auto;
@@ -165,7 +153,7 @@
   gap: 10px;
 }
 
-/* Individual field */
+/* ─── Individual field ──────────────────────────────────────────── */
 .fcte-field {
   display: flex;
   flex-direction: column;
@@ -190,7 +178,7 @@
   width: 28px;
   height: 28px;
   border: 1px solid var(--fcte-border-strong);
-  border-radius: 4px;
+  border-radius: 0;
   padding: 0;
   cursor: pointer;
   background: none;
@@ -203,14 +191,14 @@
 
 .fcte-field__swatch::-webkit-color-swatch {
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
 }
 
 .fcte-field__text,
 .fcte-field__select,
 .fcte-field__number {
   padding: 5px 8px;
-  border-radius: 4px;
+  border-radius: 0;
   border: 1px solid var(--fcte-border-strong);
   background: var(--fcte-input-bg);
   color: var(--fcte-text);
@@ -243,7 +231,7 @@
   color: var(--fcte-text-dim);
 }
 
-/* Preview panel */
+/* ─── Preview panel ─────────────────────────────────────────────── */
 .fcte-preview {
   flex: 1;
   overflow: auto;
@@ -254,3 +242,219 @@
   padding: 24px;
   min-height: 100%;
 }
+
+/* ─── Palette Generator ─────────────────────────────────────────── */
+.fcte-palette {
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+}
+
+.fcte-palette__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+}
+
+.fcte-palette__title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fcte-palette__body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fcte-palette__picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fcte-palette__label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fcte-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.fcte-palette__input-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fcte-palette__input-row .fcte-field__text {
+  width: 120px;
+}
+
+.fcte-palette__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.fcte-palette__swatch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  width: 56px;
+}
+
+.fcte-palette__swatch-color {
+  width: 40px;
+  height: 28px;
+  border-radius: 0;
+  border: 1px solid var(--fcte-border-strong);
+}
+
+.fcte-palette__swatch-label {
+  font-size: 10px;
+  color: var(--fcte-text-muted);
+  text-align: center;
+}
+
+.fcte-palette__swatch-hex {
+  font-size: 9px;
+  color: var(--fcte-text-dim);
+  font-family: monospace;
+}
+
+/* ─── Theme Comparison ──────────────────────────────────────────── */
+.fcte-compare {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fcte-compare__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  flex-shrink: 0;
+}
+
+.fcte-compare__title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fcte-compare__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fcte-compare__label {
+  font-size: 11px;
+  color: var(--fcte-text-muted);
+}
+
+.fcte-compare__diffs {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  flex-shrink: 0;
+}
+
+.fcte-compare__diff-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fcte-text-muted);
+  display: block;
+  margin-bottom: 6px;
+}
+
+.fcte-compare__diff-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.fcte-compare__diff-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 0;
+  background: var(--fcte-input-bg);
+  border: 1px solid var(--fcte-border);
+  font-size: 10px;
+}
+
+.fcte-compare__diff-label {
+  color: var(--fcte-text-muted);
+  font-size: 10px;
+}
+
+.fcte-compare__diff-swatches {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.fcte-compare__diff-swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 0;
+  border: 1px solid var(--fcte-border-strong);
+}
+
+.fcte-compare__diff-arrow {
+  font-size: 9px;
+  color: var(--fcte-text-dim);
+}
+
+.fcte-compare__diff-more {
+  font-size: 10px;
+  color: var(--fcte-text-dim);
+  align-self: center;
+}
+
+.fcte-compare__panels {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fcte-compare__panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.fcte-compare__panel + .fcte-compare__panel {
+  border-left: 1px solid var(--fcte-border);
+}
+
+.fcte-compare__panel-label {
+  padding: 6px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fcte-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  flex-shrink: 0;
+}
+
+.fcte-compare__panel-preview {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}