diff --git a/comps/filter/gen/gen-filter.ts b/comps/filter/gen/gen-filter.ts
index 3d69b0e..8624514 100755
--- a/comps/filter/gen/gen-filter.ts
+++ b/comps/filter/gen/gen-filter.ts
@@ -1,411 +1,435 @@
-export const generateFilter = (data: any, item: PrasiItem, commit: boolean) => {
-  console.log("log", { data, item, commit });
-};
+import { createId } from "@paralleldrive/cuid2";
+import { generateForm } from "lib/exports";
+import { createItem } from "lib/gen/utils";
 
-const frameFilter = { 
-  dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
-  name: "Wrapped",
-  type: "item",
-  childs: [
-    {
-      bg: { pos: "center", size: "cover", color: "" },
-      dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
-      name: "Wrapped",
-      type: "item",
-      childs: [
-        {
-          id: "r9u5j1gxxbuv73x8magw7smp",
-          adv: {
-            js: '<ScrollArea className={cx(props.className, "")} orientation={orientation}>{child}</ScrollArea>',
-            css: "",
-            jsBuilt:
-              'const _jsxFileName = "[item: scroll-area - ehqmu8gsesbvqyxmiw8l580t]";render (React.createElement(ScrollArea, { className: cx(props.className, ""), orientation: orientation, __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}, child))',
-          },
-          dim: { h: "full", w: "full" },
-          name: "scroll-area",
-          type: "item",
-          childs: [
-            {
-              name: "jsx:child",
-              id: "c7nakvqt2ih6zbbrnq59omup",
-            },
-          ],
-          script: {
-            props: {
-              orientation: { value: '"vertical"', valueBuilt: '"vertical"' },
-            },
-          },
-          component: {
-            id: "bb74d83b-5fd5-45a5-902d-f2f2ec8a48a7",
-            props: {
-              child: {
-                idx: 1,
-                meta: { type: "content-element" },
-                name: "new_prop_1",
-                type: "string",
-                value: '"hello"',
-                content: {
-                  bg: { pos: "center", size: "cover", color: "" },
-                  id: "vpvydv6rjhrtw6j9xkgl2t8f",
-                  adv: { js: "", css: "", jsBuilt: "render ()" },
-                  dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
-                  name: "child",
-                  type: "item",
-                  childs: [
-                    {
-                      bg: { pos: "center", size: "cover", color: "" },
-                      id: "j1jtff4t8hvk4c2zn2spseww",
-                      adv: {
-                        js: '<div {...props} className={cx(props.className, "")} id="cek">\n  {children}\n</div>',
-                        jsBuilt:
-                          'const _jsxFileName = "[item: absolute - bs6mzs6otarkqrqciv6hd0to]";render (React.createElement(\'div\', { ...props, className: cx(props.className, ""), id: "cek", __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}\n  , children\n))',
-                      },
-                      dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
-                      name: "absolute",
-                      type: "item",
-                      childs: [
-                        {
-                          id: "tlfpdpv1g6y7f7klumtbecet",
-                          dim: {
-                            h: "fit",
-                            w: "full",
-                            hUnit: "px",
-                            wUnit: "px",
-                          },
-                          name: "container",
-                          type: "item",
-                          childs: [
-                            {
-                              id: "epmv1gh58uso1iyi747oqlpf",
-                              adv: {
-                                js: '<div {...props} className={cx(props.className, "form-fields")}>\n  {children}\n</div>',
-                                jsBuilt:
-                                  'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "form-fields") }, children));\n',
-                              },
-                              dim: {
-                                h: "full",
-                                w: "full",
-                                hUnit: "px",
-                                wUnit: "px",
-                              },
-                              name: "fields-filter",
-                              type: "item",
-                              childs: [],
-                              layout: {
-                                dir: "row",
-                                gap: 0,
-                                wrap: "flex-wrap",
-                                align: "top-left",
-                              },
-                              script: {},
-                            },
-                          ],
-                          hidden: false,
-                        },
-                      ],
-                      hidden: false,
-                      script: {},
-                      padding: { b: 0, l: 0, r: 5, t: 0 },
-                    },
-                  ],
-                  script: {},
-                },
-                valueBuilt: '"hello"',
-                jsxCalledBy: [
-                  "yych4cm4do7t4jt0d42dasrk",
-                  "ehqmu8gsesbvqyxmiw8l580t",
-                ],
-              },
-              orientation: {
-                idx: 1,
-                meta: {
-                  type: "option",
-                  options: '["horizontal", "vertical"]',
-                  optionsBuilt: '["horizontal", "vertical"]',
-                },
-                name: "new_prop_1",
-                type: "string",
-                value: '"vertical"',
-                valueBuilt: '"vertical"',
-              },
-            },
-            ref_ids: {},
-            useStyle: true,
-          },
-          hidden: false,
-        },
-      ],
-      hidden: false,
+export const generateFilter = async (data: any, item: PrasiItem, commit: boolean) => {
+  console.log("log", { data, item, commit });
+  
+  const props: Record<string, PropVal> = {
+    gen__table: {
+      mode: "string",
+      value: eval(data.gen__table.value)
+      ,
     },
-    {
-      id: "s9kb580m1bjmpe4xj9dtkgnz",
-      dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
-      name: "Wrapped",
-      type: "item",
-      childs: [
-        {
-          id: "hf0pxf4slu2xqhcuoropnkc6",
-          dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
-          name: "Reset",
-          type: "item",
-          childs: [
-            {
-              id: "jvnbd14f1sgcnmdhy4dcfuo4",
-              adv: {
-                js: '<Button\n  {...props}\n  onClick={(e) => {\n    if (!isEditor) on_click(e);\n  }}\n  variant={variant !== "primary" ? variant : undefined}\n  size={size !== "default" ? size : undefined}\n>\n  {label}\n</Button>',
-                css: "& {\n  display: flex;\n\n  &:hover {\n    cursor: pointer;\n\n\n\n\n\n    // &.mobile {}\n    // &.desktop {}\n    // &:hover {}\n  }\n}",
-                jsBuilt:
-                  'render(/* @__PURE__ */ React.createElement(\n  Button,\n  {\n    ...props,\n    onClick: (e) => {\n      if (!isEditor)\n        on_click(e);\n    },\n    variant: variant !== "primary" ? variant : void 0,\n    size: size !== "default" ? size : void 0\n  },\n  label\n));\n',
-              },
-              dim: { h: "full", w: "full" },
-              name: "button",
-              type: "item",
-              childs: [
-                {
-                  name: "jsx: label",
-                  id: "k59ppuxhzf4tnkb4b4enyxxe",
-                },
-              ],
-              mobile: { linktag: {} },
-              script: {
-                props: {
-                  size: { value: ' "default";\n', valueBuilt: ' "default";\n' },
-                  variant: { value: '"ghost"', valueBuilt: '"ghost"' },
-                  on_click: {
-                    value:
-                      'async (e) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
-                    valueBuilt:
-                      'async (e) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
-                  },
-                },
-              },
-              component: {
-                id: "a15d152d-0118-408f-89f1-f6b2dfbd2e05",
-                props: {
-                  size: {
-                    idx: 5,
-                    meta: {
-                      type: "option",
-                      options:
-                        '["default", "xs", "sm", "lg", "icon", "nosize"]',
-                      optionsBuilt:
-                        ' ["default", "xs", "sm", "lg", "icon", "nosize"];\n',
-                    },
-                    name: "prop_5",
-                    type: "string",
-                    value: '"default"',
-                    valueBuilt: ' "default";\n',
-                  },
-                  label: {
-                    idx: 1,
-                    meta: { type: "content-element" },
-                    name: "prop_1",
-                    type: "string",
-                    value: '"hello"',
-                    content: {
-                      id: "bb91ryll6mtk827zpibo6k65",
-                      adv: {
-                        js: '<div {...props} className={cx(props.className, "")}>\n  {children}\n</div>',
-                        css: "",
-                        jsBuilt:
-                          'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children));\n',
-                      },
-                      dim: { h: "full", w: "full" },
-                      name: "label",
-                      type: "item",
-                      childs: [
-                        {
-                          id: "zhmnkaup9uxpou42lyn4splr",
-                          adv: {
-                            js: '<div {...props} className={cx(props.className, "")}>\n  Reset\n</div>',
-                            css: "",
-                            jsBuilt:
-                              'const _jsxFileName = "[item: new_text - feo7cgson0fo2zjjujwqkr8l]";render (React.createElement(\'div\', { ...props, className: cx(props.className, ""), __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}, "Reset"\n\n))',
-                          },
-                          dim: { h: "full", w: "full" },
-                          html: "submit",
-                          name: "new_text",
-                          text: "",
-                          type: "text",
-                          layout: { dir: "col", gap: 0, align: "center" },
-                          script: {},
-                        },
-                      ],
-                      script: {},
-                    },
-                    valueBuilt: '"hello"',
-                    jsxCalledBy: [
-                      "frq12uxc65i9zn8myzan4huk",
-                      "q278u9p4cejubvfwqc72ey73",
-                    ],
-                  },
-                  variant: {
-                    idx: 3,
-                    meta: {
-                      type: "option",
-                      options:
-                        '["primary", "secondary", "outline", "ghost", "link", "destructive","no-style"]',
-                      option_mode: "button",
-                      optionsBuilt:
-                        ' ["primary", "secondary", "outline", "ghost", "link", "destructive", "no-style"];\n',
-                    },
-                    name: "prop_3",
-                    type: "string",
-                    value: '"ghost"',
-                    valueBuilt: '"ghost"',
-                  },
-                  on_click: {
-                    idx: 1,
-                    meta: { type: "text" },
-                    name: "prop_1",
-                    type: "string",
-                    value:
-                      'async (e: React.MouseEvent<HTMLDivElement>) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
-                    valueBuilt:
-                      'async (e) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
-                  },
-                },
-              },
-              originalId: "q278u9p4cejubvfwqc72ey73",
-            },
-          ],
-          padding: { b: 10, l: 10, r: 0, t: 10 },
-        },
-        {
-          id: "zidglf2tal6pgxe6c1ey7i5x",
-          dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
-          name: "Apply",
-          type: "item",
-          childs: [
-            {
-              id: "hjaeik76bqh3ufszscmzw0bm",
-              adv: {
-                js: '<Button\n  {...props}\n  onClick={(e) => {\n    if (!isEditor) on_click(e);\n  }}\n  variant={variant !== "primary" ? variant : undefined}\n  size={size !== "default" ? size : undefined}\n>\n  {label}\n</Button>',
-                css: "& {\n  display: flex;\n\n  &:hover {\n    cursor: pointer;\n\n\n\n\n\n    // &.mobile {}\n    // &.desktop {}\n    // &:hover {}\n  }\n}",
-                jsBuilt:
-                  'render(/* @__PURE__ */ React.createElement(\n  Button,\n  {\n    ...props,\n    onClick: (e) => {\n      if (!isEditor)\n        on_click(e);\n    },\n    variant: variant !== "primary" ? variant : void 0,\n    size: size !== "default" ? size : void 0\n  },\n  label\n));\n',
-              },
-              dim: { h: "full", w: "full" },
-              name: "button",
-              type: "item",
-              childs: [
-                {
-                  name: "jsx: label",
-                  id: "w8i2j4uq3a186ozueanxisx9",
-                  originalId: "hglwmigw09h2b8a9vlz2cme5",
-                },
-              ],
-              mobile: { linktag: {} },
-              script: {
-                props: {
-                  size: { value: ' "default";\n', valueBuilt: ' "default";\n' },
-                  variant: {
-                    value: ' "primary";\n',
-                    valueBuilt: ' "primary";\n',
-                  },
-                  on_click: {
-                    value:
-                      'async (e) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
-                    valueBuilt:
-                      'async (e) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
-                  },
-                },
-              },
-              component: {
-                id: "a15d152d-0118-408f-89f1-f6b2dfbd2e05",
-                props: {
-                  size: {
-                    idx: 5,
-                    meta: {
-                      type: "option",
-                      options:
-                        '["default", "xs", "sm", "lg", "icon", "nosize"]',
-                      optionsBuilt:
-                        ' ["default", "xs", "sm", "lg", "icon", "nosize"];\n',
-                    },
-                    name: "prop_5",
-                    type: "string",
-                    value: '"default"',
-                    valueBuilt: ' "default";\n',
-                  },
-                  label: {
-                    idx: 1,
-                    meta: { type: "content-element" },
-                    name: "prop_1",
-                    type: "string",
-                    value: '"hello"',
-                    content: {
-                      id: "dlq5kemqyq8d0os6uu34l4wd",
-                      adv: {
-                        js: '<div {...props} className={cx(props.className, "")}>\n  {children}\n</div>',
-                        css: "",
-                        jsBuilt:
-                          'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children));\n',
-                      },
-                      dim: { h: "full", w: "full" },
-                      name: "label",
-                      type: "item",
-                      childs: [
-                        {
-                          id: "nbho83c6uggcc4mxjn0e2tr9",
-                          adv: {
-                            js: '<div {...props} className={cx(props.className, "")}>\n  Apply\n</div>',
-                            css: "",
-                            jsBuilt:
-                              'const _jsxFileName = "[item: new_text - to0gkiai6fbns9utxj6re1pw]";render (React.createElement(\'div\', { ...props, className: cx(props.className, ""), __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}, "Apply"\n\n))',
-                          },
-                          dim: { h: "full", w: "full" },
-                          html: "submit",
-                          name: "new_text",
-                          text: "",
-                          type: "text",
-                          layout: { dir: "col", gap: 0, align: "center" },
-                          script: {},
-                        },
-                      ],
-                      script: {},
-                    },
-                    valueBuilt: '"hello"',
-                    jsxCalledBy: [
-                      "frq12uxc65i9zn8myzan4huk",
-                      "q278u9p4cejubvfwqc72ey73",
-                    ],
-                  },
-                  variant: {
-                    idx: 3,
-                    meta: {
-                      type: "option",
-                      options:
-                        '["primary", "secondary", "outline", "ghost", "link", "destructive","no-style"]',
-                      option_mode: "button",
-                      optionsBuilt:
-                        ' ["primary", "secondary", "outline", "ghost", "link", "destructive", "no-style"];\n',
-                    },
-                    name: "prop_3",
-                    type: "string",
-                    value: '"primary"',
-                    valueBuilt: ' "primary";\n',
-                  },
-                  on_click: {
-                    idx: 1,
-                    meta: { type: "text" },
-                    name: "prop_1",
-                    type: "string",
-                    value:
-                      'async (e: React.MouseEvent<HTMLDivElement>) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
-                    valueBuilt:
-                      'async (e) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
-                  },
-                },
-              },
-              originalId: "q278u9p4cejubvfwqc72ey73",
-            },
-          ],
-          padding: { b: 10, l: 10, r: 0, t: 10 },
-        },
-      ],
-      layout: { dir: "row", gap: 0, wrap: "flex-nowrap", align: "top-left" },
-      padding: { b: 0, l: 5, r: 5, t: 0 },
+    name: {
+      mode: "string",
+      value: eval(data.gen__table.value),
     },
-  ],
+    gen__fields: {
+      mode: "raw",
+      value: data.gen__fields.value,
+    },
+    deps: {
+      mode: "raw",
+      value: `({ md: typeof md !== "undefined" ? md : undefined })`,
+    },
+    on_load: {
+      mode: "string",
+      value: "",
+    },
+    on_submit: {
+      mode: "string",
+      value: "",
+    },
+    body: {
+      mode: "jsx",
+      value: createItem({
+        name: "item",
+        childs: [],
+      }),
+    },
+  };
+  const new_item: any = {
+    type: "item",
+    name: "item",
+    component: {
+      id: "c4e65c26-4f36-48aa-a5b3-0771feac082e",
+      props,
+    },
+  };
+  await generateForm(async (props: any) => {}, props, new_item, false, true);
+  const fields = new_item?.component?.props?.body?.value?.childs?.[0]?.childs || [];
+  console.log(fields)
+  const fieldsFilter = createFilter(fields)
+  await item.edit.setChilds([fieldsFilter])
+  await item.edit.commit();
+  // console.log({fields})
 };
+const createFilter:any = (fields: any) => {
+  const result = { 
+    dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
+    name: "Wrapped",
+    type: "item",
+    childs: [
+      {
+        bg: { pos: "center", size: "cover", color: "" },
+        dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
+        name: "Wrapped",
+        type: "item",
+        childs: [
+          {
+            id:createId(),
+            adv: {
+              js: '<ScrollArea className={cx(props.className, "")} orientation={orientation}>{child}</ScrollArea>',
+              css: "",
+              jsBuilt:
+                'const _jsxFileName = "[item: scroll-area - ehqmu8gsesbvqyxmiw8l580t]";render (React.createElement(ScrollArea, { className: cx(props.className, ""), orientation: orientation, __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}, child))',
+            },
+            dim: { h: "full", w: "full" },
+            name: "scroll-area",
+            type: "item",
+            script: {
+              props: {
+                orientation: { value: '"vertical"', valueBuilt: '"vertical"' },
+              },
+            },
+            component: {
+              id: "bb74d83b-5fd5-45a5-902d-f2f2ec8a48a7",
+              props: {
+                child: {
+                  idx: 1,
+                  meta: { type: "content-element" },
+                  name: "new_prop_1",
+                  type: "string",
+                  value: '"hello"',
+                  content: {
+                    bg: { pos: "center", size: "cover", color: "" },
+                    id: "vpvydv6rjhrtw6j9xkgl2t8f",
+                    adv: { js: "", css: "", jsBuilt: "render ()" },
+                    dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
+                    name: "child",
+                    type: "item",
+                    childs: [
+                      {
+                        bg: { pos: "center", size: "cover", color: "" },
+                        id:createId(),
+                        adv: {
+                          js: '<div {...props} className={cx(props.className, "")} id="cek">\n  {children}\n</div>',
+                          jsBuilt:
+                            'const _jsxFileName = "[item: absolute - bs6mzs6otarkqrqciv6hd0to]";render (React.createElement(\'div\', { ...props, className: cx(props.className, ""), id: "cek", __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}\n  , children\n))',
+                        },
+                        dim: { h: "full", w: "full", hUnit: "px", wUnit: "px" },
+                        name: "absolute",
+                        type: "item",
+                        childs: [
+                          {
+                            id:createId(),
+                            dim: {
+                              h: "fit",
+                              w: "full",
+                              hUnit: "px",
+                              wUnit: "px",
+                            },
+                            name: "container",
+                            type: "item",
+                            childs: [
+                              {
+                                id:createId(),
+                                adv: {
+                                  js: '<div {...props} className={cx(props.className, "form-fields")}>\n  {children}\n</div>',
+                                  jsBuilt:
+                                    'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "form-fields") }, children));\n',
+                                },
+                                dim: {
+                                  h: "full",
+                                  w: "full",
+                                  hUnit: "px",
+                                  wUnit: "px",
+                                },
+                                name: "fields-filter",
+                                type: "item",
+                                childs: fields,
+                                layout: {
+                                  dir: "row",
+                                  gap: 0,
+                                  wrap: "flex-wrap",
+                                  align: "top-left",
+                                },
+                                script: {},
+                              },
+                            ],
+                            hidden: false,
+                          },
+                        ],
+                        hidden: false,
+                        script: {},
+                        padding: { b: 0, l: 0, r: 5, t: 0 },
+                      },
+                    ],
+                    script: {},
+                  },
+                  valueBuilt: '"hello"',
+                },
+                orientation: {
+                  idx: 1,
+                  meta: {
+                    type: "option",
+                    options: '["horizontal", "vertical"]',
+                    optionsBuilt: '["horizontal", "vertical"]',
+                  },
+                  name: "new_prop_1",
+                  type: "string",
+                  value: '"vertical"',
+                  valueBuilt: '"vertical"',
+                },
+              },
+              ref_ids: {},
+              useStyle: true,
+            },
+            hidden: false,
+          },
+        ],
+        hidden: false,
+      },
+      {
+        id:createId(),
+        dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
+        name: "Wrapped",
+        type: "item",
+        childs: [
+          {
+            id:createId(),
+            dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
+            name: "Reset",
+            type: "item",
+            childs: [
+              {
+                id:createId(),
+                adv: {
+                  js: '<Button\n  {...props}\n  onClick={(e) => {\n    if (!isEditor) on_click(e);\n  }}\n  variant={variant !== "primary" ? variant : undefined}\n  size={size !== "default" ? size : undefined}\n>\n  {label}\n</Button>',
+                  css: "& {\n  display: flex;\n\n  &:hover {\n    cursor: pointer;\n\n\n\n\n\n    // &.mobile {}\n    // &.desktop {}\n    // &:hover {}\n  }\n}",
+                  jsBuilt:
+                    'render(/* @__PURE__ */ React.createElement(\n  Button,\n  {\n    ...props,\n    onClick: (e) => {\n      if (!isEditor)\n        on_click(e);\n    },\n    variant: variant !== "primary" ? variant : void 0,\n    size: size !== "default" ? size : void 0\n  },\n  label\n));\n',
+                },
+                dim: { h: "full", w: "full" },
+                name: "button",
+                type: "item",
+                mobile: { linktag: {} },
+                script: {
+                  props: {
+                    size: { value: ' "default";\n', valueBuilt: ' "default";\n' },
+                    variant: { value: '"ghost"', valueBuilt: '"ghost"' },
+                    on_click: {
+                      value:
+                        'async (e) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
+                      valueBuilt:
+                        'async (e) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
+                    },
+                  },
+                },
+                component: {
+                  id: "a15d152d-0118-408f-89f1-f6b2dfbd2e05",
+                  props: {
+                    size: {
+                      idx: 5,
+                      meta: {
+                        type: "option",
+                        options:
+                          '["default", "xs", "sm", "lg", "icon", "nosize"]',
+                        optionsBuilt:
+                          ' ["default", "xs", "sm", "lg", "icon", "nosize"];\n',
+                      },
+                      name: "prop_5",
+                      type: "string",
+                      value: '"default"',
+                      valueBuilt: ' "default";\n',
+                    },
+                    label: {
+                      idx: 1,
+                      meta: { type: "content-element" },
+                      name: "prop_1",
+                      type: "string",
+                      value: '"hello"',
+                      content: {
+                        id:createId(),
+                        adv: {
+                          js: '<div {...props} className={cx(props.className, "")}>\n  {children}\n</div>',
+                          css: "",
+                          jsBuilt:
+                            'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children));\n',
+                        },
+                        dim: { h: "full", w: "full" },
+                        name: "label",
+                        type: "item",
+                        childs: [
+                          {
+                            id:createId(),
+                            adv: {
+                              js: '<div {...props} className={cx(props.className, "")}>\n  Reset\n</div>',
+                              css: "",
+                              jsBuilt:
+                                'const _jsxFileName = "[item: new_text - feo7cgson0fo2zjjujwqkr8l]";render (React.createElement(\'div\', { ...props, className: cx(props.className, ""), __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}, "Reset"\n\n))',
+                            },
+                            dim: { h: "full", w: "full" },
+                            html: "submit",
+                            name: "new_text",
+                            text: "",
+                            type: "text",
+                            layout: { dir: "col", gap: 0, align: "center" },
+                            script: {},
+                          },
+                        ],
+                        script: {},
+                      },
+                      valueBuilt: '"hello"',
+                    },
+                    variant: {
+                      idx: 3,
+                      meta: {
+                        type: "option",
+                        options:
+                          '["primary", "secondary", "outline", "ghost", "link", "destructive","no-style"]',
+                        option_mode: "button",
+                        optionsBuilt:
+                          ' ["primary", "secondary", "outline", "ghost", "link", "destructive", "no-style"];\n',
+                      },
+                      name: "prop_3",
+                      type: "string",
+                      value: '"ghost"',
+                      valueBuilt: '"ghost"',
+                    },
+                    on_click: {
+                      idx: 1,
+                      meta: { type: "text" },
+                      name: "prop_1",
+                      type: "string",
+                      value:
+                        'async (e: React.MouseEvent<HTMLDivElement>) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
+                      valueBuilt:
+                        'async (e) => {\r\n  fm.data = {};\r\n  filter.data = {};\r\n  filter.render();\r\n  fm.render();\r\n  await fm.submit();\r\n  sheet.close();\r\n  // const res = getFilter("root");\r\n  // res.list.reload();\r\n}',
+                    },
+                  },
+                },
+              },
+            ],
+            padding: { b: 10, l: 10, r: 0, t: 10 },
+          },
+          {
+            id:createId(),
+            dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
+            name: "Apply",
+            type: "item",
+            childs: [
+              {
+                id:createId(),
+                adv: {
+                  js: '<Button\n  {...props}\n  onClick={(e) => {\n    if (!isEditor) on_click(e);\n  }}\n  variant={variant !== "primary" ? variant : undefined}\n  size={size !== "default" ? size : undefined}\n>\n  {label}\n</Button>',
+                  css: "& {\n  display: flex;\n\n  &:hover {\n    cursor: pointer;\n\n\n\n\n\n    // &.mobile {}\n    // &.desktop {}\n    // &:hover {}\n  }\n}",
+                  jsBuilt:
+                    'render(/* @__PURE__ */ React.createElement(\n  Button,\n  {\n    ...props,\n    onClick: (e) => {\n      if (!isEditor)\n        on_click(e);\n    },\n    variant: variant !== "primary" ? variant : void 0,\n    size: size !== "default" ? size : void 0\n  },\n  label\n));\n',
+                },
+                dim: { h: "full", w: "full" },
+                name: "button",
+                type: "item",
+                mobile: { linktag: {} },
+                script: {
+                  props: {
+                    size: { value: ' "default";\n', valueBuilt: ' "default";\n' },
+                    variant: {
+                      value: ' "primary";\n',
+                      valueBuilt: ' "primary";\n',
+                    },
+                    on_click: {
+                      value:
+                        'async (e) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
+                      valueBuilt:
+                        'async (e) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
+                    },
+                  },
+                },
+                component: {
+                  id: "a15d152d-0118-408f-89f1-f6b2dfbd2e05",
+                  props: {
+                    size: {
+                      idx: 5,
+                      meta: {
+                        type: "option",
+                        options:
+                          '["default", "xs", "sm", "lg", "icon", "nosize"]',
+                        optionsBuilt:
+                          ' ["default", "xs", "sm", "lg", "icon", "nosize"];\n',
+                      },
+                      name: "prop_5",
+                      type: "string",
+                      value: '"default"',
+                      valueBuilt: ' "default";\n',
+                    },
+                    label: {
+                      idx: 1,
+                      meta: { type: "content-element" },
+                      name: "prop_1",
+                      type: "string",
+                      value: '"hello"',
+                      content: {
+                        id:createId(),
+                        adv: {
+                          js: '<div {...props} className={cx(props.className, "")}>\n  {children}\n</div>',
+                          css: "",
+                          jsBuilt:
+                            'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children));\n',
+                        },
+                        dim: { h: "full", w: "full" },
+                        name: "label",
+                        type: "item",
+                        childs: [
+                          {
+                            id:createId(),
+                            adv: {
+                              js: '<div {...props} className={cx(props.className, "")}>\n  Apply\n</div>',
+                              css: "",
+                              jsBuilt:
+                                'const _jsxFileName = "[item: new_text - to0gkiai6fbns9utxj6re1pw]";render (React.createElement(\'div\', { ...props, className: cx(props.className, ""), __self: this, __source: {fileName: _jsxFileName, lineNumber: 1}}, "Apply"\n\n))',
+                            },
+                            dim: { h: "full", w: "full" },
+                            html: "submit",
+                            name: "new_text",
+                            text: "",
+                            type: "text",
+                            layout: { dir: "col", gap: 0, align: "center" },
+                            script: {},
+                          },
+                        ],
+                        script: {},
+                      },
+                      valueBuilt: '"hello"',
+                    },
+                    variant: {
+                      idx: 3,
+                      meta: {
+                        type: "option",
+                        options:
+                          '["primary", "secondary", "outline", "ghost", "link", "destructive","no-style"]',
+                        option_mode: "button",
+                        optionsBuilt:
+                          ' ["primary", "secondary", "outline", "ghost", "link", "destructive", "no-style"];\n',
+                      },
+                      name: "prop_3",
+                      type: "string",
+                      value: '"primary"',
+                      valueBuilt: ' "primary";\n',
+                    },
+                    on_click: {
+                      idx: 1,
+                      meta: { type: "text" },
+                      name: "prop_1",
+                      type: "string",
+                      value:
+                        'async (e: React.MouseEvent<HTMLDivElement>) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
+                      valueBuilt:
+                        'async (e) => {\r\n  await fm.submit();\r\n  const res = getFilter("root");\r\n  res.list.reload();\r\n  sheet.close();\r\n}',
+                    },
+                  },
+                },
+              },
+            ],
+            padding: { b: 10, l: 10, r: 0, t: 10 },
+          },
+        ],
+        layout: { dir: "row", gap: 0, wrap: "flex-nowrap", align: "top-left" },
+        padding: { b: 0, l: 5, r: 5, t: 0 },
+      },
+    ],
+  };
+  return result
+}
+
diff --git a/comps/form/gen/gen-form.ts b/comps/form/gen/gen-form.ts
index 6d2428e..75afc57 100755
--- a/comps/form/gen/gen-form.ts
+++ b/comps/form/gen/gen-form.ts
@@ -121,9 +121,6 @@ export const generateForm = async (
         align: "top-left",
       },
     };
-    // const existing_childs = (
-    //   (item.component?.props.body as any)?.content as IItem
-    // )?.childs;
 
     let new_body = createItem({
       name: "item",
@@ -153,73 +150,6 @@ export const generateForm = async (
         submit,
       ].filter((e) => e),
     });
-
-    // if (Array.isArray(existing_childs) && existing_childs.length > 0) {
-    //   walkGenForm(new_body, existing_childs as any);
-    // }
-
-    // const prop_item = propFromItem(item);
-    // const current_body = prop_item?.body?.value as IItem;
-
-    // if (current_body) {
-    //   const mapping = mapCompItemTree(new_body, {
-    //     shouldAdd({ item }) {
-    //       if (item.component?.props?.sub_type?.value === "table-edit")
-    //         return "add-skip-children";
-
-    //       return "add";
-    //     },
-    //   });
-
-    //   reduceItemMapping(current_body, mapping, (old_item, new_item) => {
-    //     const pold = propFromItem(old_item);
-    //     const pnew = propFromItem(new_item);
-
-    //     let result = old_item;
-    //     if (
-    //       result.component &&
-    //       result.component?.id === "32550d01-42a3-4b15-a04a-2c2d5c3c8e67"
-    //     ) {
-    //       if (pold.type.value !== pnew.type.value) {
-    //         result = new_item;
-    //       } else if (pold.sub_type.value !== pnew.sub_type.value) {
-    //         result = new_item;
-    //       }
-
-    //       copyProps(old_item, new_item, [
-    //         "placeholder",
-    //         "label",
-    //         "link__url",
-    //         "ext__width",
-    //         "opt__load_trigger",
-    //         "ext__on_change",
-    //         "ext__description",
-    //         "ext__show_label",
-    //         "ext__disabled",
-    //         "ext__prefix",
-    //         "ext__suffix",
-    //       ]);
-    //     }
-
-    //     return result;
-    //   });
-
-    //   if (
-    //     mapping["32550d01-42a3-4b15-a04a-2c2d5c3c8e67"] &&
-    //     Object.keys(mapping["32550d01-42a3-4b15-a04a-2c2d5c3c8e67"]).length > 0
-    //   ) {
-    //     for (const val of Object.values(
-    //       mapping["32550d01-42a3-4b15-a04a-2c2d5c3c8e67"]
-    //     )) {
-    //       current_body.childs?.[0]?.childs.push(val);
-    //     }
-    //   }
-
-    //   if (current_body?.childs?.length > 0) {
-    //     new_body = current_body;
-    //   }
-    // }
-
     if (commit) {
       Object.keys(result).map((e) => {
         item.edit.setProp(e, result[e]);
diff --git a/comps/md/MasterDetail.tsx b/comps/md/MasterDetail.tsx
index 4b86c10..1592972 100755
--- a/comps/md/MasterDetail.tsx
+++ b/comps/md/MasterDetail.tsx
@@ -128,7 +128,7 @@ export const MasterDetail: FC<MDProps> = (arg) => {
       md.header.render();
     }, [title]);
   }
-  // return <>MD</>
+
   return (
     <div
       className={cx(
diff --git a/comps/md/utils/md-hash.ts b/comps/md/utils/md-hash.ts
index e5dc1d0..b2f0919 100755
--- a/comps/md/utils/md-hash.ts
+++ b/comps/md/utils/md-hash.ts
@@ -1,6 +1,6 @@
-import { BreadItem } from "lib/comps/custom/Breadcrumb";
 import { fetchLinkParams, parseLink } from "lib/utils/fetch-link-params";
 import { MDLocal } from "./typings";
+import { BreadItem } from "lib/comps/custom/Breadcrumb";
 
 export const masterDetailParseHash = (md: MDLocal) => {
   let raw_hash = decodeURIComponent(location.hash);
@@ -8,7 +8,6 @@ export const masterDetailParseHash = (md: MDLocal) => {
   md.params.hash = {};
   md.params.tabs = {};
 
-  let has_detail = false;
   for (const h of raw_hash.split("#")) {
     if (h) {
       if (h.includes("=")) {
@@ -16,9 +15,6 @@ export const masterDetailParseHash = (md: MDLocal) => {
         if (tab_name && tab_val) {
           md.params.hash[tab_name] = tab_val;
         }
-        if (tab_name === md.name) {
-          has_detail = true;
-        }
       } else if (h.includes("~")) {
         const [tab_name, tab_val] = h.split("~");
         if (tab_name && tab_val) {
@@ -28,10 +24,6 @@ export const masterDetailParseHash = (md: MDLocal) => {
     }
   }
 
-  if (!has_detail) {
-    md.selected = null;
-  }
-
   md.params.links = md.params.links.filter((e) => e);
 
   const parsed_link = parseLink();
@@ -77,15 +69,9 @@ export const masterDetailApplyParams = (md: MDLocal) => {
     delete md.params.hash[md.name];
   }
 
-  let has_detail = false;
   for (const [k, v] of Object.entries(md.params.hash)) {
-    if (k === md.name) {
-      has_detail = true;
-    }
-
     hash += `#${k}=${v}`;
   }
-
   for (const [k, v] of Object.entries(md.params.tabs)) {
     hash += `#${k}~${v}`;
   }
@@ -93,20 +79,15 @@ export const masterDetailApplyParams = (md: MDLocal) => {
   if (!isEditor) {
     location.hash = hash;
   }
-
-  if (!isEditor) {
-    if (md.props.tab_mode === "v-tab" || md.props.tab_mode === "h-tab") {
-      try {
-        if (
-          row &&
-          md?.childs?.form?.fm &&
-          md?.childs?.form?.fm?.status === "ready" &&
-          md.selected?.id
-        ) {
+  if(!isEditor){
+    if(md.props.tab_mode === "v-tab" || md.props.tab_mode === "h-tab"){
+      try{
+        if(row && md?.childs?.form?.fm && md?.childs?.form?.fm?.status === "ready" && md.selected?.id){
           md.childs.form.fm.reload();
-          // console.log("MASUK???")
         }
-      } catch (ex) {}
+      }catch(ex){
+
+      }
     }
   }
 };