@squaredr/fieldcraft-pro 0.0.0

package/dist/theme-editor-styles.css

@@ -0,0 +1,256 @@
+/* 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;
+   }
+*/
+
+.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;
+
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  color: var(--fcte-text);
+  background: var(--fcte-bg);
+  overflow: hidden;
+}
+
+/* Toolbar */
+.fcte-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.fcte-toolbar__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.fcte-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fcte-toolbar__title {
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.fcte-toolbar__preset {
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--fcte-border-strong);
+  background: var(--fcte-input-bg);
+  color: var(--fcte-text);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* Buttons */
+.fcte-btn {
+  padding: 5px 12px;
+  border-radius: 4px;
+  border: none;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.fcte-btn--primary {
+  background: var(--fcte-accent);
+  color: var(--fcte-accent-text);
+}
+
+.fcte-btn--primary:hover {
+  opacity: 0.9;
+}
+
+.fcte-btn--secondary {
+  background: var(--fcte-input-bg);
+  color: var(--fcte-text);
+  border: 1px solid var(--fcte-border-strong);
+}
+
+.fcte-btn--secondary:hover {
+  background: var(--fcte-surface-hover);
+}
+
+/* Body split */
+.fcte-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Editor panel */
+.fcte-editor {
+  width: 320px;
+  min-width: 280px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--fcte-border);
+  background: var(--fcte-surface);
+}
+
+/* Section tabs */
+.fcte-tabs {
+  display: flex;
+  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);
+}
+
+/* Fields area */
+.fcte-fields {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Individual field */
+.fcte-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fcte-field__label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fcte-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.fcte-field__color-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fcte-field__swatch {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--fcte-border-strong);
+  border-radius: 4px;
+  padding: 0;
+  cursor: pointer;
+  background: none;
+  flex-shrink: 0;
+}
+
+.fcte-field__swatch::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.fcte-field__swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.fcte-field__text,
+.fcte-field__select,
+.fcte-field__number {
+  padding: 5px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--fcte-border-strong);
+  background: var(--fcte-input-bg);
+  color: var(--fcte-text);
+  font-size: 12px;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.fcte-field__text:focus,
+.fcte-field__select:focus,
+.fcte-field__number:focus {
+  outline: none;
+  border-color: var(--fcte-accent);
+}
+
+.fcte-field__number-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fcte-field__number-row .fcte-field__number {
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.fcte-field__suffix {
+  font-size: 11px;
+  color: var(--fcte-text-dim);
+}
+
+/* Preview panel */
+.fcte-preview {
+  flex: 1;
+  overflow: auto;
+  background: var(--fcte-bg);
+}
+
+.fcte-preview__inner {
+  padding: 24px;
+  min-height: 100%;
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@squaredr/fieldcraft-pro",
+  "version": "0.0.0",
+  "description": "Pro components for FieldCraft — Form Builder, Response Viewer, Theme Editor",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./form-builder": {
+      "types": "./dist/form-builder/index.d.ts",
+      "import": "./dist/form-builder/index.mjs",
+      "require": "./dist/form-builder/index.js"
+    },
+    "./response-viewer": {
+      "types": "./dist/response-viewer/index.d.ts",
+      "import": "./dist/response-viewer/index.mjs",
+      "require": "./dist/response-viewer/index.js"
+    },
+    "./theme-editor": {
+      "types": "./dist/theme-editor/index.d.ts",
+      "import": "./dist/theme-editor/index.mjs",
+      "require": "./dist/theme-editor/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme-editor/styles.css": "./dist/theme-editor-styles.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["./dist/styles.css", "./dist/theme-editor-styles.css", "*.css"],
+  "scripts": {
+    "build": "tsup && npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --minify && cp src/theme-editor/styles.css dist/theme-editor-styles.css",
+    "build:css": "npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --minify && cp src/theme-editor/styles.css dist/theme-editor-styles.css",
+    "dev": "npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css && npx concurrently \"npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --watch\" \"tsup --watch\"",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@squaredr/fieldcraft-pro-license": "workspace:*",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "@squaredr/fieldcraft-core": "^1.2.0",
+    "@squaredr/fieldcraft-react": "^1.2.1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@squaredr/fieldcraft-core": "^1.2.0",
+    "@squaredr/fieldcraft-pro-tsconfig": "workspace:*",
+    "@squaredr/fieldcraft-react": "^1.2.1",
+    "@tailwindcss/cli": "^4.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.3.0",
+    "tsup": "^8.0",
+    "typescript": "^5.5",
+    "vitest": "^2.0"
+  },
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "author": "SquaredR",
+  "homepage": "https://squaredr.tech/products/fieldcraft/admin-pro"
+}