@universe-platform/ui 0.1.0-beta.24 → 0.1.0-beta.25

package/dist/globals.css

@@ -120,6 +120,10 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -443,6 +447,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mt-auto {
     margin-top: auto;
   }
@@ -473,6 +480,12 @@
   .mb-3\.5 {
     margin-bottom: calc(var(--spacing) * 3.5);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
@@ -554,6 +567,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
   .h-44 {
     height: calc(var(--spacing) * 44);
   }
@@ -596,6 +612,9 @@
   .min-h-\[32px\] {
     min-height: 32px;
   }
+  .min-h-\[40px\] {
+    min-height: 40px;
+  }
   .min-h-\[48px\] {
     min-height: 48px;
   }
@@ -1459,6 +1478,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .p-10 {
     padding: calc(var(--spacing) * 10);
   }
@@ -1534,6 +1556,9 @@
   .pt-2\.5 {
     padding-top: calc(var(--spacing) * 2.5);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pr-0\.5 {
     padding-right: calc(var(--spacing) * 0.5);
   }
@@ -1609,6 +1634,10 @@
   .font-sans {
     font-family: var(--font-sans);
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1617,6 +1646,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));

package/dist/index.d.mts

@@ -666,6 +666,15 @@ interface SettingsAndActionsBlockProps {
 }
 declare function SettingsAndActionsBlock({ isScanningPhoneColumns, targetPhoneOptions, phoneColumnId, setPhoneColumnId, selectedPhoneOption, autoSelectCount, setAutoSelectCount, subtableFilterColumn, setSubtableFilterColumn, subtableFilterValue, setSubtableFilterValue, subtableSendLimit, setSubtableSendLimit, subtableFilterableColumns, selectedSubtableFilterCol, getRelationOptionsForCol, relationOptions, enablePostSendAction, setEnablePostSendAction, postSendActionColumn, setPostSendActionColumn, postSendActionValue, setPostSendActionValue, setPostSendActionTargetType, postSendActionTargetOptions, selectedPostSendOption, isTestDisabled, testButtonTitle, setIsTestPromptOpen, isSendDisabled, sendButtonTitle, handleSendMessages, selectedRowIdsCount, finalRecipientCount, validMainRowsCount, isSendingBroadcast, broadcastProgress, broadcastSummary, clearBroadcastSummary, }: SettingsAndActionsBlockProps): react_jsx_runtime.JSX.Element;
 
+interface FormBlockProps {
+    settings: any;
+    executeAction?: (actionType: string, payload: Record<string, any>) => Promise<any>;
+    componentId?: string;
+    className?: string;
+    onSuccess?: () => void;
+}
+declare function FormBlock({ settings: schema, executeAction, componentId, className, onSuccess }: FormBlockProps): react_jsx_runtime.JSX.Element;
+
 /**
  * UNIVERSE_COMPONENTS
  * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE", "WHATSAPP")
@@ -674,6 +683,7 @@ declare function SettingsAndActionsBlock({ isScanningPhoneColumns, targetPhoneOp
 declare const UNIVERSE_COMPONENTS: {
     readonly TABLE: typeof TableBlock;
     readonly WHATSAPP: typeof WhatsAppComponent;
+    readonly FORM: typeof FormBlock;
 };
 type ComponentRegistry = typeof UNIVERSE_COMPONENTS;
 type UniverseComponentType = keyof ComponentRegistry;

package/dist/index.d.ts

@@ -666,6 +666,15 @@ interface SettingsAndActionsBlockProps {
 }
 declare function SettingsAndActionsBlock({ isScanningPhoneColumns, targetPhoneOptions, phoneColumnId, setPhoneColumnId, selectedPhoneOption, autoSelectCount, setAutoSelectCount, subtableFilterColumn, setSubtableFilterColumn, subtableFilterValue, setSubtableFilterValue, subtableSendLimit, setSubtableSendLimit, subtableFilterableColumns, selectedSubtableFilterCol, getRelationOptionsForCol, relationOptions, enablePostSendAction, setEnablePostSendAction, postSendActionColumn, setPostSendActionColumn, postSendActionValue, setPostSendActionValue, setPostSendActionTargetType, postSendActionTargetOptions, selectedPostSendOption, isTestDisabled, testButtonTitle, setIsTestPromptOpen, isSendDisabled, sendButtonTitle, handleSendMessages, selectedRowIdsCount, finalRecipientCount, validMainRowsCount, isSendingBroadcast, broadcastProgress, broadcastSummary, clearBroadcastSummary, }: SettingsAndActionsBlockProps): react_jsx_runtime.JSX.Element;
 
+interface FormBlockProps {
+    settings: any;
+    executeAction?: (actionType: string, payload: Record<string, any>) => Promise<any>;
+    componentId?: string;
+    className?: string;
+    onSuccess?: () => void;
+}
+declare function FormBlock({ settings: schema, executeAction, componentId, className, onSuccess }: FormBlockProps): react_jsx_runtime.JSX.Element;
+
 /**
  * UNIVERSE_COMPONENTS
  * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE", "WHATSAPP")
@@ -674,6 +683,7 @@ declare function SettingsAndActionsBlock({ isScanningPhoneColumns, targetPhoneOp
 declare const UNIVERSE_COMPONENTS: {
     readonly TABLE: typeof TableBlock;
     readonly WHATSAPP: typeof WhatsAppComponent;
+    readonly FORM: typeof FormBlock;
 };
 type ComponentRegistry = typeof UNIVERSE_COMPONENTS;
 type UniverseComponentType = keyof ComponentRegistry;

package/dist/index.js

@@ -13043,10 +13043,174 @@ function WhatsAppComponent(props) {
   );
 }
 
+// src/components/FormBlock/FormBlock.tsx
+var import_react19 = require("react");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function FormBlock({ settings: schema, executeAction, componentId, className = "", onSuccess }) {
+  const { showError, addToast } = useToast();
+  const [formData, setFormData] = (0, import_react19.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react19.useState)(false);
+  const [isSubmitted, setIsSubmitted] = (0, import_react19.useState)(false);
+  const [columns, setColumns] = (0, import_react19.useState)((schema == null ? void 0 : schema.columns) || []);
+  const [isLoadingSchema, setIsLoadingSchema] = (0, import_react19.useState)(false);
+  const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+  (0, import_react19.useEffect)(() => {
+    let isMounted = true;
+    if ((!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0) && targetTableId && executeAction) {
+      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 (isMounted) setIsLoadingSchema(false);
+      });
+    } else if (schema == null ? void 0 : schema.columns) {
+      setColumns(schema.columns);
+    }
+    return () => {
+      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) => {
+    var _a, _b;
+    return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+  });
+  const handleFieldChange = (colName, value) => {
+    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: value }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    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;
+    }
+    if (!targetTableId) {
+      showError("\u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05E9\u05DE\u05D5\u05E8: \u05DE\u05D6\u05D4\u05D4 \u05D4\u05D8\u05D1\u05DC\u05D4 \u05D7\u05E1\u05E8", "\u05E9\u05D2\u05D9\u05D0\u05EA \u05E9\u05DE\u05D9\u05E8\u05D4");
+      return;
+    }
+    const missingFields = formColumns.filter(
+      (col) => col.isRequired && (formData[col.name] === void 0 || formData[col.name] === null || formData[col.name] === "")
+    );
+    if (missingFields.length > 0) {
+      showError(`\u05D9\u05E9 \u05DC\u05DE\u05DC\u05D0 \u05D0\u05EA \u05D4\u05E9\u05D3\u05D5\u05EA \u05D4\u05D1\u05D0\u05D9\u05DD: ${missingFields.map((c) => c.name).join(", ")}`, "\u05E9\u05D2\u05D9\u05D0\u05EA \u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const formattedPayload = {};
+      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;
+        } else if (col.defaultValue !== void 0) {
+          formattedPayload[col.name] = col.defaultValue;
+        }
+      });
+      await executeAction("CREATE_RECORD", {
+        tableId: targetTableId,
+        tableMetaId: targetTableId,
+        records: [formattedPayload]
+      });
+      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);
+      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);
+    }
+  };
+  if (isLoadingSchema) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-8 flex items-center justify-center gap-2 text-slate-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react15.Loader2, { className: "w-5 h-5 animate-spin text-brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.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." });
+  }
+  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_runtime19.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_runtime19.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_runtime19.jsx)(import_lucide_react15.CheckCircle2, { className: "w-8 h-8" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)("p", { className: "text-slate-600 text-base max-w-md mx-auto whitespace-pre-wrap", children: customMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsSubmitted(false),
+          className: "mt-6 px-4 py-2 text-xs font-semibold text-brand hover:underline cursor-pointer",
+          children: "\u05E9\u05DC\u05D9\u05D7\u05EA \u05DE\u05E2\u05E0\u05D4 \u05E0\u05D5\u05E1\u05E3"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)("h2", { className: "text-xl font-bold text-slate-800 mb-6", children: schema.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "text-sm font-semibold text-slate-700", children: [
+            col.name,
+            " ",
+            col.isRequired && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "border border-slate-200 rounded-lg min-h-[40px] relative", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            InputComponent,
+            {
+              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_runtime19.jsx)("div", { className: "pt-4 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "button",
+        {
+          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_runtime19.jsx)(import_lucide_react15.Loader2, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: isSubmitting ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DC\u05D9\u05D7\u05D4" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
 // src/registry.ts
 var UNIVERSE_COMPONENTS = {
   TABLE: TableBlock,
-  WHATSAPP: WhatsAppComponent
+  WHATSAPP: WhatsAppComponent,
+  FORM: FormBlock
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -12991,10 +12991,174 @@ function WhatsAppComponent(props) {
   );
 }
 
+// src/components/FormBlock/FormBlock.tsx
+import { useState as useState16, useEffect as useEffect14 } from "react";
+import { Loader2 as Loader28, CheckCircle2 as CheckCircle25 } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function FormBlock({ settings: schema, executeAction, componentId, className = "", onSuccess }) {
+  const { showError, addToast } = useToast();
+  const [formData, setFormData] = useState16({});
+  const [isSubmitting, setIsSubmitting] = useState16(false);
+  const [isSubmitted, setIsSubmitted] = useState16(false);
+  const [columns, setColumns] = useState16((schema == null ? void 0 : schema.columns) || []);
+  const [isLoadingSchema, setIsLoadingSchema] = useState16(false);
+  const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+  useEffect14(() => {
+    let isMounted = true;
+    if ((!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0) && targetTableId && executeAction) {
+      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 (isMounted) setIsLoadingSchema(false);
+      });
+    } else if (schema == null ? void 0 : schema.columns) {
+      setColumns(schema.columns);
+    }
+    return () => {
+      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) => {
+    var _a, _b;
+    return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+  });
+  const handleFieldChange = (colName, value) => {
+    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: value }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    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;
+    }
+    if (!targetTableId) {
+      showError("\u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05E9\u05DE\u05D5\u05E8: \u05DE\u05D6\u05D4\u05D4 \u05D4\u05D8\u05D1\u05DC\u05D4 \u05D7\u05E1\u05E8", "\u05E9\u05D2\u05D9\u05D0\u05EA \u05E9\u05DE\u05D9\u05E8\u05D4");
+      return;
+    }
+    const missingFields = formColumns.filter(
+      (col) => col.isRequired && (formData[col.name] === void 0 || formData[col.name] === null || formData[col.name] === "")
+    );
+    if (missingFields.length > 0) {
+      showError(`\u05D9\u05E9 \u05DC\u05DE\u05DC\u05D0 \u05D0\u05EA \u05D4\u05E9\u05D3\u05D5\u05EA \u05D4\u05D1\u05D0\u05D9\u05DD: ${missingFields.map((c) => c.name).join(", ")}`, "\u05E9\u05D2\u05D9\u05D0\u05EA \u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const formattedPayload = {};
+      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;
+        } else if (col.defaultValue !== void 0) {
+          formattedPayload[col.name] = col.defaultValue;
+        }
+      });
+      await executeAction("CREATE_RECORD", {
+        tableId: targetTableId,
+        tableMetaId: targetTableId,
+        records: [formattedPayload]
+      });
+      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);
+      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);
+    }
+  };
+  if (isLoadingSchema) {
+    return /* @__PURE__ */ jsxs18("div", { className: "p-8 flex items-center justify-center gap-2 text-slate-500", children: [
+      /* @__PURE__ */ jsx19(Loader28, { className: "w-5 h-5 animate-spin text-brand" }),
+      /* @__PURE__ */ jsx19("span", { className: "text-sm", children: "\u05D8\u05D5\u05E2\u05DF \u05E9\u05D3\u05D5\u05EA \u05D8\u05D5\u05E4\u05E1..." })
+    ] });
+  }
+  if (!formColumns || formColumns.length === 0) {
+    return /* @__PURE__ */ jsx19("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." });
+  }
+  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__ */ jsxs18("div", { id: componentId, className: `bg-white p-8 rounded-xl shadow-xs border border-slate-200 text-center dir-rtl ${className}`, children: [
+      /* @__PURE__ */ jsx19("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__ */ jsx19(CheckCircle25, { className: "w-8 h-8" }) }),
+      /* @__PURE__ */ jsx19("h3", { className: "text-2xl font-bold text-slate-800 mb-2", children: "\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E0\u05E9\u05DC\u05D7\u05D4" }),
+      /* @__PURE__ */ jsx19("p", { className: "text-slate-600 text-base max-w-md mx-auto whitespace-pre-wrap", children: customMessage }),
+      /* @__PURE__ */ jsx19(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsSubmitted(false),
+          className: "mt-6 px-4 py-2 text-xs font-semibold text-brand hover:underline cursor-pointer",
+          children: "\u05E9\u05DC\u05D9\u05D7\u05EA \u05DE\u05E2\u05E0\u05D4 \u05E0\u05D5\u05E1\u05E3"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs18("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__ */ jsx19("h2", { className: "text-xl font-bold text-slate-800 mb-6", children: schema.title }),
+    /* @__PURE__ */ jsxs18("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__ */ jsxs18("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs18("label", { className: "text-sm font-semibold text-slate-700", children: [
+            col.name,
+            " ",
+            col.isRequired && /* @__PURE__ */ jsx19("span", { className: "text-rose-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx19("div", { className: "border border-slate-200 rounded-lg min-h-[40px] relative", children: /* @__PURE__ */ jsx19(
+            InputComponent,
+            {
+              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__ */ jsx19("div", { className: "pt-4 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ jsxs18(
+        "button",
+        {
+          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__ */ jsx19(Loader28, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsx19("span", { children: isSubmitting ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DC\u05D9\u05D7\u05D4" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
 // src/registry.ts
 var UNIVERSE_COMPONENTS = {
   TABLE: TableBlock,
-  WHATSAPP: WhatsAppComponent
+  WHATSAPP: WhatsAppComponent,
+  FORM: FormBlock
 };
 export {
   COLUMN_CAPABILITIES,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@universe-platform/ui",
-    "version": "0.1.0-beta.24",
+    "version": "0.1.0-beta.25",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",
     "types": "./dist/index.d.ts",