@universe-platform/ui 0.1.0-beta.54 → 0.1.0-beta.55

package/dist/index.js

@@ -15465,28 +15465,187 @@ function WhatsAppComponent(props) {
 var import_react28 = require("react");
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-function FormBlock({ settings: schema, executeAction, componentId, className = "", onSuccess }) {
+
+// src/components/FormBlock/StyledFormBlock.tsx
+var import_react29 = require("react");
+var import_lucide_react19 = require("lucide-react");
+
+// src/components/FormBlock/formDesign.ts
+var FORM_PRESETS = {
+  classic: {
+    label: "\u05E7\u05DC\u05D0\u05E1\u05D9",
+    description: "\u05DB\u05E8\u05D8\u05D9\u05E1 \u05DC\u05D1\u05DF, \u05E9\u05D3\u05D4 \u05D1\u05DB\u05DC \u05E9\u05D5\u05E8\u05D4",
+    radius: 12,
+    padding: 24,
+    gap: 16,
+    labelSize: 14,
+    titleSize: 20,
+    border: "1px solid #e2e8f0",
+    shadow: "0 1px 2px rgba(0,0,0,0.05)",
+    headerBand: false,
+    inputStyle: "box",
+    defaultColumns: 1,
+    defaultBackground: "#ffffff",
+    defaultText: "#1e293b",
+    invertText: false
+  },
+  compact: {
+    label: "\u05E7\u05D5\u05DE\u05E4\u05E7\u05D8\u05D9",
+    description: "\u05E9\u05E0\u05D9 \u05E9\u05D3\u05D5\u05EA \u05D1\u05E9\u05D5\u05E8\u05D4, \u05E8\u05D9\u05D5\u05D5\u05D7 \u05E7\u05D8\u05DF - \u05D8\u05D5\u05E4\u05E1 \u05E7\u05E6\u05E8 \u05D9\u05D5\u05EA\u05E8",
+    radius: 10,
+    padding: 16,
+    gap: 10,
+    labelSize: 12,
+    titleSize: 18,
+    border: "1px solid #e2e8f0",
+    shadow: "0 1px 2px rgba(0,0,0,0.05)",
+    headerBand: false,
+    inputStyle: "box",
+    defaultColumns: 2,
+    defaultBackground: "#ffffff",
+    defaultText: "#1e293b",
+    invertText: false
+  },
+  card: {
+    label: "\u05DB\u05E8\u05D8\u05D9\u05E1",
+    description: "\u05E4\u05D9\u05E0\u05D5\u05EA \u05E2\u05D2\u05D5\u05DC\u05D5\u05EA, \u05E6\u05DC, \u05DB\u05D5\u05EA\u05E8\u05EA \u05E2\u05DC \u05E4\u05E1 \u05E6\u05D1\u05E2\u05D5\u05E0\u05D9",
+    radius: 20,
+    padding: 28,
+    gap: 18,
+    labelSize: 14,
+    titleSize: 22,
+    border: "none",
+    shadow: "0 20px 40px -12px rgba(15,23,42,0.18)",
+    headerBand: true,
+    inputStyle: "box",
+    defaultColumns: 2,
+    defaultBackground: "#ffffff",
+    defaultText: "#1e293b",
+    invertText: false
+  },
+  minimal: {
+    label: "\u05DE\u05D9\u05E0\u05D9\u05DE\u05DC\u05D9\u05E1\u05D8\u05D9",
+    description: "\u05D1\u05DC\u05D9 \u05DE\u05E1\u05D2\u05E8\u05EA, \u05E7\u05D5 \u05EA\u05D7\u05EA\u05D5\u05DF \u05DC\u05E9\u05D3\u05D5\u05EA",
+    radius: 0,
+    padding: 0,
+    gap: 20,
+    labelSize: 13,
+    titleSize: 22,
+    border: "none",
+    shadow: "none",
+    headerBand: false,
+    inputStyle: "underline",
+    defaultColumns: 1,
+    defaultBackground: "transparent",
+    defaultText: "#1e293b",
+    invertText: false
+  },
+  bold: {
+    label: "\u05D1\u05D5\u05DC\u05D8",
+    description: "\u05E8\u05E7\u05E2 \u05D1\u05E6\u05D1\u05E2 \u05D4\u05DE\u05D5\u05EA\u05D2 \u05D5\u05D8\u05E7\u05E1\u05D8 \u05DC\u05D1\u05DF",
+    radius: 16,
+    padding: 28,
+    gap: 16,
+    labelSize: 14,
+    titleSize: 22,
+    border: "none",
+    shadow: "0 10px 30px -10px rgba(0,0,0,0.3)",
+    headerBand: false,
+    inputStyle: "box",
+    defaultColumns: 1,
+    defaultBackground: "",
+    defaultText: "#ffffff",
+    invertText: true
+  }
+};
+var DEFAULT_PRIMARY = "#00b7a2";
+var ALWAYS_FULL_TYPES = /* @__PURE__ */ new Set(["GOOGLE_DRIVE_FILE", "SUB_TABLE", "SUBTABLE", "LINK"]);
+function isFormPresetId(v) {
+  return typeof v === "string" && v in FORM_PRESETS;
+}
+function resolveFormDesign(design) {
+  var _a, _b;
+  const presetId = isFormPresetId(design == null ? void 0 : design.preset) ? design.preset : "classic";
+  const tokens = FORM_PRESETS[presetId];
+  const primary = (design == null ? void 0 : design.primaryColor) || DEFAULT_PRIMARY;
+  const background = (design == null ? void 0 : design.backgroundColor) || (tokens.invertText ? primary : tokens.defaultBackground);
+  const text2 = (design == null ? void 0 : design.textColor) || tokens.defaultText;
+  return {
+    tokens,
+    presetId,
+    primary,
+    background,
+    text: text2,
+    buttonText: ((_a = design == null ? void 0 : design.buttonText) == null ? void 0 : _a.trim()) || "\u05E9\u05DC\u05D9\u05D7\u05D4",
+    buttonAlign: (design == null ? void 0 : design.buttonAlign) || (presetId === "compact" ? "full" : "end"),
+    subtitle: ((_b = design == null ? void 0 : design.subtitle) == null ? void 0 : _b.trim()) || "",
+    columns: (design == null ? void 0 : design.columns) || tokens.defaultColumns
+  };
+}
+function resolveFieldWidth(colName, colType, design, columnsDefault) {
+  var _a, _b;
+  const manual = (_b = (_a = design == null ? void 0 : design.fields) == null ? void 0 : _a[colName]) == null ? void 0 : _b.width;
+  if (manual) return manual;
+  if ((colType || "").toUpperCase() === "BOOLEAN") return "third";
+  if (ALWAYS_FULL_TYPES.has((colType || "").toUpperCase())) return "full";
+  return columnsDefault === 3 ? "third" : columnsDefault === 2 ? "half" : "full";
+}
+var WIDTH_TO_SPAN = { full: 6, half: 3, third: 2, sixth: 1 };
+function resolveFieldSpan(colName, colType, design, columnsDefault) {
+  var _a, _b;
+  const manual = (_b = (_a = design == null ? void 0 : design.fields) == null ? void 0 : _a[colName]) == null ? void 0 : _b.span;
+  if (manual && manual >= 1 && manual <= 6) return manual;
+  return WIDTH_TO_SPAN[resolveFieldWidth(colName, colType, design, columnsDefault)];
+}
+function applyFieldOrder(cols, design) {
+  const order = design == null ? void 0 : design.fieldOrder;
+  if (!order || order.length === 0) return cols;
+  const idx = (n) => {
+    const i = order.indexOf(n);
+    return i === -1 ? Number.MAX_SAFE_INTEGER : i;
+  };
+  return cols.map((c, i) => ({ c, i })).sort((a, b) => idx(a.c.name) - idx(b.c.name) || a.i - b.i).map((x) => x.c);
+}
+
+// src/components/FormBlock/StyledFormBlock.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var SYSTEM_FIELDS = ["_id", "id", "createdAt", "updatedAt", "orgId", "tableId"];
+function StyledFormBlock({
+  settings: schema,
+  executeAction,
+  componentId,
+  className = "",
+  onSuccess,
+  previewMode = false,
+  onReorder,
+  onFieldResize
+}) {
   const { showError, addToast } = useToast();
-  const [formData, setFormData] = (0, import_react28.useState)({});
-  const [isSubmitting, setIsSubmitting] = (0, import_react28.useState)(false);
-  const [isSubmitted, setIsSubmitted] = (0, import_react28.useState)(false);
-  const [columns, setColumns] = (0, import_react28.useState)((schema == null ? void 0 : schema.columns) || []);
-  const [isLoadingSchema, setIsLoadingSchema] = (0, import_react28.useState)(false);
+  const uid = "fdz" + (0, import_react29.useId)().replace(/[^a-zA-Z0-9]/g, "");
+  const design = schema == null ? void 0 : schema.design;
+  const d = resolveFormDesign(design);
+  const t = d.tokens;
+  const [formData, setFormData] = (0, import_react29.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react29.useState)(false);
+  const [isSubmitted, setIsSubmitted] = (0, import_react29.useState)(false);
+  const [columns, setColumns] = (0, import_react29.useState)((schema == null ? void 0 : schema.columns) || []);
+  const [isLoadingSchema, setIsLoadingSchema] = (0, import_react29.useState)(false);
+  const [dragName, setDragName] = (0, import_react29.useState)(null);
+  const [drop, setDrop] = (0, import_react29.useState)(null);
+  const [resizing, setResizing] = (0, import_react29.useState)(null);
+  const resizeRef = (0, import_react29.useRef)(null);
+  const gridRef = (0, import_react29.useRef)(null);
   const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     let isMounted = true;
-    if ((!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0) && targetTableId && executeAction) {
+    if ((!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0) && targetTableId && executeAction && !previewMode) {
       setIsLoadingSchema(true);
       executeAction("FETCH_TABLE_DATA", { tableId: targetTableId, limit: 1 }).then((res) => {
         var _a;
         if (!isMounted) return;
         const fetchedCols = ((_a = res == null ? void 0 : res.schema) == null ? void 0 : _a.columns) || (res == null ? void 0 : res.columns);
-        if (fetchedCols && Array.isArray(fetchedCols)) {
-          setColumns(fetchedCols);
-        }
-      }).catch((err) => {
-        console.error("[FormBlock] Failed to fetch table schema:", err);
-      }).finally(() => {
+        if (fetchedCols && Array.isArray(fetchedCols)) setColumns(fetchedCols);
+      }).catch((err) => console.error("[StyledFormBlock] Failed to fetch table schema:", err)).finally(() => {
         if (isMounted) setIsLoadingSchema(false);
       });
     } else if (schema == null ? void 0 : schema.columns) {
@@ -15496,18 +15655,151 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
       isMounted = false;
     };
   }, [schema == null ? void 0 : schema.columns, targetTableId]);
-  const systemFields = ["_id", "id", "createdAt", "updatedAt", "orgId", "tableId"];
-  const formColumns = (columns || []).filter(
-    (col) => !systemFields.includes(col.name) && !col.isHidden
-  ).sort((a, b) => {
+  const baseColumns = (columns || []).filter((col) => !SYSTEM_FIELDS.includes(col.name) && !col.isHidden).sort((a, b) => {
     var _a, _b;
     return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
   });
+  const isDesignHidden = (col) => {
+    var _a, _b;
+    return !col.isRequired && !!((_b = (_a = design == null ? void 0 : design.fields) == null ? void 0 : _a[col.name]) == null ? void 0 : _b.hidden);
+  };
+  const orderedColumns = applyFieldOrder(baseColumns, design);
+  const formColumns = orderedColumns.filter((c) => !isDesignHidden(c));
+  const hiddenColumns = orderedColumns.filter((c) => isDesignHidden(c));
   const handleFieldChange = (colName, value) => {
     setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: value }));
   };
+  const canReorder = !!onReorder;
+  const reorderFields = (fromName, toName, side) => {
+    if (!onReorder || fromName === toName) return;
+    const original = orderedColumns.map((c) => c.name);
+    const names = [...original];
+    const from = names.indexOf(fromName);
+    if (from === -1 || !names.includes(toName)) return;
+    names.splice(from, 1);
+    const to = names.indexOf(toName);
+    names.splice(side === "before" ? to : to + 1, 0, fromName);
+    if (names.every((n, i) => n === original[i])) return;
+    onReorder(names);
+  };
+  const findDropTarget = (x, y, dragged) => {
+    const grid = gridRef.current;
+    if (!grid) return null;
+    const rtl = getComputedStyle(grid).direction === "rtl";
+    let best = null;
+    const nodes = Array.from(grid.querySelectorAll("[data-fdz-field]"));
+    for (const node of nodes) {
+      const name = node.getAttribute("data-fdz-field");
+      if (!name) continue;
+      const r = node.getBoundingClientRect();
+      if (name === dragged) {
+        if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return null;
+        continue;
+      }
+      const dx = x < r.left ? r.left - x : x > r.right ? x - r.right : 0;
+      const dy = y < r.top ? r.top - y : y > r.bottom ? y - r.bottom : 0;
+      const dist = Math.hypot(dx, dy);
+      if (!best || dist < best.dist) {
+        const cx = r.left + r.width / 2;
+        const before = rtl ? x >= cx : x < cx;
+        best = { name, side: before ? "before" : "after", dist };
+      }
+    }
+    return best ? { name: best.name, side: best.side } : null;
+  };
+  const startDrag = (e, colName) => {
+    if (!onReorder || e.pointerType === "mouse" && e.button !== 0) return;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let started = false;
+    let current = null;
+    const prevUserSelect = document.body.style.userSelect;
+    const prevCursor = document.body.style.cursor;
+    const onMove = (ev) => {
+      if (!started) {
+        if (Math.hypot(ev.clientX - startX, ev.clientY - startY) < 5) return;
+        started = true;
+        document.body.style.userSelect = "none";
+        document.body.style.cursor = "grabbing";
+        setDragName(colName);
+      }
+      const next = findDropTarget(ev.clientX, ev.clientY, colName);
+      if ((next == null ? void 0 : next.name) !== (current == null ? void 0 : current.name) || (next == null ? void 0 : next.side) !== (current == null ? void 0 : current.side)) {
+        current = next;
+        setDrop(next);
+      }
+    };
+    const finish = (commit) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+      document.body.style.userSelect = prevUserSelect;
+      document.body.style.cursor = prevCursor;
+      if (started && commit && current) reorderFields(colName, current.name, current.side);
+      setDragName(null);
+      setDrop(null);
+    };
+    const onUp = () => finish(true);
+    const onCancel = () => {
+      if (started) console.warn('[StyledFormBlock] \u05D4\u05D2\u05E8\u05D9\u05E8\u05D4 \u05D1\u05D5\u05D8\u05DC\u05D4 \u05E2"\u05D9 \u05D4\u05D3\u05E4\u05D3\u05E4\u05DF/\u05E8\u05DB\u05D9\u05D1 \u05D0\u05D1 (pointercancel)');
+      finish(false);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+  };
+  const startResize = (e, colName, startSpan) => {
+    var _a, _b, _c, _d;
+    if (!onFieldResize) return;
+    const grid = gridRef.current;
+    const item = e.currentTarget.closest("[data-fdz-field]");
+    if (!grid || !item) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const box = item.querySelector("[data-fdz-box]");
+    const colW = (grid.clientWidth - t.gap * 5) / 6;
+    const rtl = grid.closest('[dir="rtl"]') !== null || getComputedStyle(grid).direction === "rtl";
+    const state = {
+      name: colName,
+      startX: e.clientX,
+      startY: e.clientY,
+      startSpan,
+      step: colW + t.gap,
+      rtl,
+      startHeight: box ? box.offsetHeight : 40,
+      hadHeight: !!((_b = (_a = design == null ? void 0 : design.fields) == null ? void 0 : _a[colName]) == null ? void 0 : _b.height),
+      span: startSpan,
+      height: (_d = (_c = design == null ? void 0 : design.fields) == null ? void 0 : _c[colName]) == null ? void 0 : _d.height
+    };
+    resizeRef.current = state;
+    setResizing({ name: colName, span: state.span, height: state.height });
+    const onMove = (ev) => {
+      const dxRaw = ev.clientX - state.startX;
+      const dx = state.rtl ? -dxRaw : dxRaw;
+      const span = Math.max(1, Math.min(6, Math.round(state.startSpan + dx / state.step)));
+      const dy = ev.clientY - state.startY;
+      const height = Math.abs(dy) < 8 && !state.hadHeight ? void 0 : Math.max(40, Math.round(state.startHeight + dy));
+      if (span !== state.span || height !== state.height) {
+        state.span = span;
+        state.height = height;
+        setResizing({ name: state.name, span, height });
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+      resizeRef.current = null;
+      onFieldResize(state.name, { span: state.span, height: state.height });
+      setResizing(null);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
+    if (previewMode) return;
     if (!executeAction) {
       showError("\u05E8\u05DB\u05D9\u05D1 \u05D4\u05EA\u05E7\u05E9\u05D5\u05E8\u05EA \u05DC\u05D0 \u05D0\u05D5\u05EA\u05D7\u05DC", "\u05E9\u05D2\u05D9\u05D0\u05EA \u05DE\u05E2\u05E8\u05DB\u05EA");
       return;
@@ -15525,108 +15817,294 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
     }
     setIsSubmitting(true);
     try {
-      const formattedPayload = {};
+      const payload = {};
       formColumns.forEach((col) => {
         var _a;
         let val = formData[col.name];
         if (val !== void 0 && val !== null) {
-          if (((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "NUMBER") {
-            val = val === "" ? 0 : Number(val);
-          }
-          formattedPayload[col.name] = val;
+          if (((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "NUMBER") val = val === "" ? 0 : Number(val);
+          payload[col.name] = val;
         } else if (col.defaultValue !== void 0) {
-          formattedPayload[col.name] = col.defaultValue;
+          payload[col.name] = col.defaultValue;
         }
       });
+      hiddenColumns.forEach((col) => {
+        if (col.defaultValue !== void 0) payload[col.name] = col.defaultValue;
+      });
       await executeAction("CREATE_RECORD", {
         tableId: targetTableId,
         tableMetaId: targetTableId,
-        records: [formattedPayload]
+        records: [payload]
       });
       addToast({ message: "\u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD \u05E0\u05E9\u05DE\u05E8\u05D5 \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4", type: "success" });
       setFormData({});
       setIsSubmitted(true);
       if (onSuccess) onSuccess();
     } catch (err) {
-      console.error("[FormBlock] Submit error:", err);
+      console.error("[StyledFormBlock] Submit error:", err);
       showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E9\u05DE\u05D9\u05E8\u05EA \u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD");
     } finally {
       setIsSubmitting(false);
     }
   };
+  const muted = t.invertText ? "rgba(255,255,255,0.85)" : "#64748b";
+  const cardStyle = {
+    background: d.background,
+    color: d.text,
+    borderRadius: t.radius,
+    border: t.border,
+    boxShadow: t.shadow,
+    padding: t.headerBand ? 0 : t.padding,
+    overflow: t.headerBand ? "hidden" : void 0
+  };
+  const inputBoxStyle = t.inputStyle === "underline" ? { borderBottom: "1px solid #cbd5e1", borderRadius: 0, background: "transparent", minHeight: 40, position: "relative" } : {
+    border: "1px solid #e2e8f0",
+    borderRadius: Math.min(t.radius, 10) || 6,
+    background: "#ffffff",
+    color: "#0f172a",
+    minHeight: 40,
+    position: "relative"
+  };
+  const booleanBoxStyle = __spreadProps(__spreadValues({}, inputBoxStyle), {
+    minHeight: 0,
+    width: "fit-content",
+    alignSelf: "flex-start"
+  });
+  const css = `
+.${uid}{container-type:inline-size}
+.${uid} .fdz-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:${t.gap}px}
+.${uid} .fdz-f{--n:6;flex:0 0 auto;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;gap:6px;width:calc((100% - ${t.gap * 5}px) / 6 * var(--n) + ${t.gap}px * (var(--n) - 1) - 0.5px)}
+.${uid} .fdz-s1{--n:2}
+.${uid} .fdz-b{width:fit-content;max-width:140px;margin-inline-end:-${Math.max(0, t.gap - 8)}px}
+@container (min-width:480px){
+  .${uid} .fdz-f{--n:var(--span)}
+}
+`;
   if (isLoadingSchema) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "p-8 flex items-center justify-center gap-2 text-slate-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react18.Loader2, { className: "w-5 h-5 animate-spin text-brand" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm", children: "\u05D8\u05D5\u05E2\u05DF \u05E9\u05D3\u05D5\u05EA \u05D8\u05D5\u05E4\u05E1..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "p-8 flex items-center justify-center gap-2 text-slate-500", dir: "rtl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react19.Loader2, { className: "w-5 h-5 animate-spin", style: { color: d.primary } }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm", children: "\u05D8\u05D5\u05E2\u05DF \u05E9\u05D3\u05D5\u05EA \u05D8\u05D5\u05E4\u05E1..." })
     ] });
   }
   if (!formColumns || formColumns.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-4 text-center text-slate-500", children: "\u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8\u05D5 \u05E9\u05D3\u05D5\u05EA \u05DC\u05D8\u05D5\u05E4\u05E1 \u05D6\u05D4." });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "p-4 text-center text-slate-500", children: "\u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8\u05D5 \u05E9\u05D3\u05D5\u05EA \u05DC\u05D8\u05D5\u05E4\u05E1 \u05D6\u05D4." });
   }
+  const headerBlock = (schema == null ? void 0 : schema.title) || d.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      style: t.headerBand ? { background: d.primary, color: "#ffffff", padding: `${t.padding * 0.8}px ${t.padding}px` } : { marginBottom: t.gap + 4 },
+      children: [
+        (schema == null ? void 0 : schema.title) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { style: { fontSize: t.titleSize, fontWeight: 800, margin: 0 }, children: schema.title }),
+        d.subtitle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { style: { fontSize: 14, margin: "6px 0 0", color: t.headerBand ? "rgba(255,255,255,0.9)" : muted }, children: d.subtitle })
+      ]
+    }
+  ) : null;
   if (isSubmitted) {
     const customMessage = (schema == null ? void 0 : schema.successMessage) || "\u05EA\u05D5\u05D3\u05D4 \u05E8\u05D1\u05D4! \u05D4\u05E4\u05E8\u05D8\u05D9\u05DD \u05D4\u05EA\u05E7\u05D1\u05DC\u05D5 \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4.";
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { id: componentId, className: `bg-white p-8 rounded-xl shadow-xs border border-slate-200 text-center dir-rtl ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-16 h-16 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 animate-in zoom-in duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react18.CheckCircle2, { className: "w-8 h-8" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-2xl font-bold text-slate-800 mb-2", children: "\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E0\u05E9\u05DC\u05D7\u05D4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-slate-600 text-base max-w-md mx-auto whitespace-pre-wrap", children: customMessage }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { id: componentId, dir: "rtl", className, style: __spreadProps(__spreadValues({}, cardStyle), { padding: t.padding || 24, textAlign: "center" }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "div",
+        {
+          style: {
+            width: 64,
+            height: 64,
+            borderRadius: "50%",
+            margin: "0 auto 16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: t.invertText ? "rgba(255,255,255,0.2)" : "#ecfdf5",
+            color: t.invertText ? "#ffffff" : "#059669"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react19.CheckCircle2, { className: "w-8 h-8" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { style: { fontSize: 24, fontWeight: 800, margin: "0 0 8px" }, children: "\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E0\u05E9\u05DC\u05D7\u05D4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { style: { fontSize: 16, color: muted, maxWidth: 420, margin: "0 auto", whiteSpace: "pre-wrap" }, children: customMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           type: "button",
           onClick: () => setIsSubmitted(false),
-          className: "mt-6 px-4 py-2 text-xs font-semibold text-brand hover:underline cursor-pointer",
+          style: { marginTop: 24, fontSize: 12, fontWeight: 600, color: t.invertText ? "#ffffff" : d.primary, background: "none", border: "none", cursor: "pointer", textDecoration: "underline" },
           children: "\u05E9\u05DC\u05D9\u05D7\u05EA \u05DE\u05E2\u05E0\u05D4 \u05E0\u05D5\u05E1\u05E3"
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { id: componentId, className: `bg-white p-6 rounded-xl shadow-xs border border-slate-200 dir-rtl ${className}`, children: [
-    (schema == null ? void 0 : schema.title) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-xl font-bold text-slate-800 mb-6", children: schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-      formColumns.map((col) => {
-        var _a, _b;
-        const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
-        const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "text-sm font-semibold text-slate-700", children: [
-            col.name,
-            " ",
-            col.isRequired && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-rose-500", children: "*" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border border-slate-200 rounded-lg min-h-[40px] relative", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            InputComponent,
+  const justify = d.buttonAlign === "center" ? "center" : d.buttonAlign === "end" ? "flex-end" : d.buttonAlign === "full" ? "stretch" : "flex-start";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { id: componentId, dir: "rtl", className: `${uid} ${className}`, style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("style", { children: css }),
+    headerBlock,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: t.headerBand ? { padding: t.padding } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fdz-grid", ref: gridRef, children: (() => {
+        const spanOf = (col) => {
+          var _a;
+          if (resizing && resizing.name === col.name) return resizing.span;
+          const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+          return resolveFieldSpan(col.name, colType, design, d.columns);
+        };
+        const renderField = (col) => {
+          var _a, _b, _c, _d, _e;
+          const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+          const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+          const span = spanOf(col);
+          const isBoolean = colType === "BOOLEAN";
+          const fieldHeight = resizing && resizing.name === col.name ? resizing.height : (_c = (_b = design == null ? void 0 : design.fields) == null ? void 0 : _b[col.name]) == null ? void 0 : _c.height;
+          const useTextarea = !!fieldHeight && fieldHeight > 56 && InputComponent === FORM_INPUTS.DEFAULT;
+          const boxStyle = __spreadValues(__spreadValues(__spreadValues({}, isBoolean ? booleanBoxStyle : inputBoxStyle), fieldHeight && !isBoolean ? __spreadValues({ minHeight: fieldHeight }, useTextarea ? { height: fieldHeight } : {}) : {}), canReorder ? { pointerEvents: "none" } : {});
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "div",
             {
-              column: col,
-              rowId: "new_form_record",
-              value: (_b = formData[col.name]) != null ? _b : "",
-              onChange: (val) => handleFieldChange(col.name, val),
-              context: {
-                executeAction,
-                tableId: targetTableId
-              }
-            }
-          ) })
-        ] }, col.name);
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "pt-4 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-        "button",
+              "data-fdz-field": col.name,
+              className: `fdz-f fdz-s${span}${isBoolean ? " fdz-b" : ""}`,
+              draggable: false,
+              onDragStart: canReorder ? (e) => e.preventDefault() : void 0,
+              onMouseDown: canReorder ? (e) => e.stopPropagation() : void 0,
+              onTouchStart: canReorder ? (e) => e.stopPropagation() : void 0,
+              onPointerDown: canReorder ? (e) => {
+                e.stopPropagation();
+                startDrag(e, col.name);
+              } : void 0,
+              style: __spreadValues({ "--span": span }, canReorder ? {
+                position: "relative",
+                cursor: "grab",
+                touchAction: "none",
+                userSelect: "none",
+                opacity: dragName === col.name ? 0.4 : 1,
+                outline: resizing && resizing.name === col.name ? `2px solid ${t.invertText ? "#ffffff" : d.primary}` : void 0,
+                outlineOffset: 4,
+                borderRadius: 6
+              } : {}),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { style: { fontSize: t.labelSize, fontWeight: 600, color: d.text }, children: [
+                  col.name,
+                  " ",
+                  col.isRequired && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { color: t.invertText ? "#fecdd3" : "#f43f5e" }, children: "*" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "data-fdz-box": true, style: boxStyle, children: useTextarea ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  "textarea",
+                  {
+                    value: (_d = formData[col.name]) != null ? _d : "",
+                    onChange: (e) => handleFieldChange(col.name, e.target.value),
+                    readOnly: previewMode,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      minHeight: fieldHeight - 2,
+                      padding: "8px 12px",
+                      border: "none",
+                      outline: "none",
+                      background: "transparent",
+                      resize: "none",
+                      font: "inherit",
+                      color: "inherit",
+                      boxSizing: "border-box"
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  InputComponent,
+                  {
+                    column: col,
+                    rowId: "new_form_record",
+                    value: (_e = formData[col.name]) != null ? _e : "",
+                    onChange: (val) => handleFieldChange(col.name, val),
+                    readOnly: previewMode,
+                    context: { executeAction: previewMode ? void 0 : executeAction, tableId: targetTableId }
+                  }
+                ) }),
+                canReorder && dragName && drop && drop.name === col.name && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  "div",
+                  {
+                    style: __spreadValues({
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      width: 4,
+                      borderRadius: 2,
+                      background: t.invertText ? "#ffffff" : d.primary,
+                      pointerEvents: "none",
+                      zIndex: 3
+                    }, drop.side === "before" ? { insetInlineStart: -(t.gap / 2) - 2 } : { insetInlineEnd: -(t.gap / 2) - 2 })
+                  }
+                ),
+                onFieldResize && !isBoolean && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  "div",
+                  {
+                    onMouseDown: (e) => e.stopPropagation(),
+                    onTouchStart: (e) => e.stopPropagation(),
+                    onPointerDown: (e) => startResize(e, col.name, span),
+                    onDoubleClick: () => onFieldResize(col.name, { reset: true }),
+                    title: "\u05D2\u05E8\u05D5\u05E8 \u05DC\u05E9\u05D9\u05E0\u05D5\u05D9 \u05D2\u05D5\u05D3\u05DC (\u05DC\u05D7\u05D9\u05E6\u05D4 \u05DB\u05E4\u05D5\u05DC\u05D4 \u05DC\u05D0\u05D9\u05E4\u05D5\u05E1)",
+                    style: {
+                      position: "absolute",
+                      left: -6,
+                      bottom: -6,
+                      width: 14,
+                      height: 14,
+                      borderRadius: 4,
+                      background: "#ffffff",
+                      border: `2px solid ${d.primary}`,
+                      cursor: "nesw-resize",
+                      touchAction: "none",
+                      zIndex: 2
+                    }
+                  }
+                )
+              ]
+            },
+            col.name
+          );
+        };
+        return formColumns.map((col) => renderField(col));
+      })() }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "div",
         {
-          type: "submit",
-          disabled: isSubmitting,
-          className: "flex items-center gap-2 px-6 py.2.5 bg-brand hover:bg-brand-hover text-white font-bold rounded-lg shadow-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-          children: [
-            isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react18.Loader2, { className: "w-4 h-4 animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: isSubmitting ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DC\u05D9\u05D7\u05D4" })
-          ]
+          style: {
+            marginTop: t.gap + 8,
+            paddingTop: t.inputStyle === "underline" || t.invertText ? 0 : t.gap,
+            borderTop: t.inputStyle === "underline" || t.invertText ? "none" : "1px solid rgba(148,163,184,0.25)",
+            display: "flex",
+            justifyContent: justify
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "button",
+            {
+              type: "submit",
+              disabled: isSubmitting || previewMode,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 8,
+                padding: "10px 28px",
+                width: d.buttonAlign === "full" ? "100%" : void 0,
+                background: t.invertText ? "#ffffff" : d.primary,
+                color: t.invertText ? d.primary : "#ffffff",
+                fontWeight: 700,
+                fontSize: 15,
+                border: "none",
+                borderRadius: Math.min(t.radius, 10) || 6,
+                boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
+                cursor: isSubmitting || previewMode ? "default" : "pointer",
+                opacity: isSubmitting ? 0.5 : 1
+              },
+              children: [
+                isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react19.Loader2, { className: "w-4 h-4 animate-spin" }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: isSubmitting ? "\u05E9\u05D5\u05DE\u05E8..." : d.buttonText })
+              ]
+            }
+          )
         }
-      ) })
-    ] })
+      )
+    ] }) })
   ] });
 }
 
 // src/themes/ThemeScope.tsx
-var React22 = __toESM(require("react"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var React23 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var UNIVERSE_THEME_IDS = ["classic", "clean", "ocean", "warm"];
 function resolveUniverseTheme(value) {
   return typeof value === "string" && UNIVERSE_THEME_IDS.includes(value) ? value : "classic";
@@ -15636,7 +16114,7 @@ function withThemeScope(Component) {
     var _a, _b, _c;
     const p = props;
     const theme = resolveUniverseTheme((_c = (_a = p.settings) == null ? void 0 : _a.theme) != null ? _c : (_b = p.config) == null ? void 0 : _b.theme);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "data-theme": theme, style: { display: "contents" }, children: React22.createElement(Component, props) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "data-theme": theme, style: { display: "contents" }, children: React23.createElement(Component, props) });
   }
   ThemeScoped.displayName = `ThemeScoped(${Component.displayName || Component.name || "Component"})`;
   return ThemeScoped;
@@ -15646,7 +16124,7 @@ function withThemeScope(Component) {
 var UNIVERSE_COMPONENTS = {
   TABLE: withThemeScope(TableBlock),
   WHATSAPP: withThemeScope(WhatsAppComponent),
-  FORM: withThemeScope(FormBlock),
+  FORM: withThemeScope(StyledFormBlock),
   PLACEMENT: withThemeScope(PlacementBlock)
 };
 // Annotate the CommonJS export names for ESM import in node: