wip fix

app/srv/ws/sync/actions.ts

@@ -125,7 +125,7 @@ export const SyncActions = {
             prop_name: string;
             value: Uint8Array;
           }
-    ) => ({}) as boolean | ParsedScope,
+    ) => ({}) as boolean | ParsedScope | string,
     parse: async (code: string | Record<string, string>) =>
       ({}) as Record<string, ReturnType<typeof parseJs>>,
   },

app/srv/ws/sync/actions/code_edit.ts

@@ -41,6 +41,7 @@ export const code_edit: SAction["code"]["edit"] = async function (
 
       if (mitem) {
         if (arg.type === "adv") {
+          try {
             const res = await transform(`render(${src})`, {
               jsx: "transform",
               format: "cjs",
@@ -76,6 +77,9 @@ export const code_edit: SAction["code"]["edit"] = async function (
                 }
               }
             });
+          } catch (e: any) {
+            return e.message.toString();
+          }
         } else {
           const mprop = mitem
             .get("component")
@@ -94,7 +98,9 @@ export const code_edit: SAction["code"]["edit"] = async function (
                 mprop.set("value", src);
                 mprop.set("valueBuilt", res.code.substring(6));
               });
-            } catch (e) {}
+            } catch (e: any) {
+              return e.message.toString();
+            }
           }
         }
       }
@@ -134,8 +140,8 @@ export const code_edit: SAction["code"]["edit"] = async function (
                   }
                 }
               });
-            } catch (e) {
+            } catch (e: any) {
-              g.log.error(e);
+              return e.message.toString();
             }
           }
         }

app/web/src/nova/ed/ed-base.tsx

@@ -28,7 +28,7 @@ export const EdBase = () => {
 
   edRoute(p);
 
-  if (p.status === "post-init") {
+  if (p.status === "load-site") {
     return <Loading note={`page-${p.status}`} />;
   }
   if (p.status === "site-not-found" || p.status === "page-not-found") {
@@ -47,7 +47,12 @@ export const EdBase = () => {
         <EdPane type="left" min_size={200} />
         <div className="flex flex-1 flex-col items-stretch">
           <EdMid />
-          <div className="flex flex-1 items-stretch">
+          <div
+            className={cx(
+              "flex flex-1 items-stretch",
+              p.mode === "mobile" ? mobileCSS : "bg-white"
+            )}
+          >
             <EdMain />
             <EdPane type="right" min_size={240} />
             <EdRight />
@@ -138,3 +143,18 @@ const style = css`
     }
   }
 `;
+
+export const mobileCSS = css`
+  background-color: white;
+  background-image: linear-gradient(45deg, #fafafa 25%, transparent 25%),
+    linear-gradient(-45deg, #fafafa 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #fafafa 75%),
+    linear-gradient(-45deg, transparent 75%, #fafafa 75%);
+
+  background-size: 20px 20px;
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0px;
+`;

app/web/src/nova/ed/ed-right.tsx

@@ -19,7 +19,7 @@ export const EdRight = () => {
         css`
           width: ${p.ui.layout.right}px;
         `,
-        "border-l flex flex-col"
+        "border-l flex flex-col bg-white"
       )}
     >
       {!meta ? (

app/web/src/nova/ed/logic/ed-global.ts

@@ -132,7 +132,7 @@ export const EDGlobal = {
   clients: {} as Record<string, { id: string; username: string }>,
   status: "init" as
     | "init"
-    | "post-init"
+    | "load-site"
     | "reload"
     | "site-not-found"
     | "page-not-found"
@@ -228,6 +228,8 @@ export const EDGlobal = {
         prop_kind: "" as PropFieldKind,
         prop_name: "",
         on_close: () => {},
+        typings: { status: "ok" as "ok" | "loading" | "error", err_msg: "" },
+        wb_render: () => {},
       },
       site: null as null | ((site_id: string) => void | Promise<void>),
       site_form: null as null | {

app/web/src/nova/ed/logic/ed-route.ts

@@ -8,7 +8,7 @@ import { treeRebuild } from "./tree/build";
 export const edRoute = async (p: PG) => {
   if (p.status === "ready" || p.status === "init") {
     if (!p.site.domain && !p.site.name) {
-      p.status = "post-init";
+      p.status = "load-site";
       const site = await p.sync.site.load(p.site.id);
       if (!site) {
         p.status = "site-not-found";

app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx

@@ -7,11 +7,9 @@ export const ResponsiveToggle = () => {
   const c = useGlobal(EDGlobal, "EDITOR");
   const mode = c.mode;
   const activeModeClassName = "border-b-2 border-blue-500";
-  return (
+
-    <ToolbarBox
+  const box = {
-      className="flex"
+    mobile: {
-      items={[
-        {
       onClick() {
         c.mode = "mobile";
         w.isMobile = true;
@@ -37,7 +35,7 @@ export const ResponsiveToggle = () => {
         </svg>
       ),
     },
-        {
+    desktop: {
       onClick() {
         c.mode = "desktop";
         w.isMobile = false;
@@ -63,7 +61,16 @@ export const ResponsiveToggle = () => {
         </svg>
       ),
     },
-      ]}
+  };
-    />
+  const items: any[] = [];
-  );
+  if (c.site.responsive === "mobile-only") {
+    items.push(box.mobile);
+  } else if (c.site.responsive === "desktop-only") {
+    items.push(box.desktop);
+  } else {
+    items.push(box.mobile);
+    items.push(box.desktop);
+  }
+
+  return <ToolbarBox className="flex" items={items} />;
 };

app/web/src/nova/ed/panel/main/main-per-item.tsx

@@ -75,6 +75,9 @@ export const mainPerItemVisit = (
         }
       }
     };
+    if (parts.props.className && !parts.props.className.includes("el-active")) {
+      parts.props.className += " el-active";
+    }
 
     prop.onInput = (e) => {
       e.stopPropagation();
@@ -160,10 +163,6 @@ export const mainPerItemVisit = (
   };
 };
 
-function getCaret(el: any) {
-  return getSelectionOffset(el);
-}
-
 function setCaret(el: any, offset: any) {
   setSelectionOffset(el, offset[0], offset[1]);
 }

app/web/src/nova/ed/panel/main/main.tsx

@@ -60,9 +60,7 @@ export const EdMain = () => {
     <div
       className={cx(
         "flex flex-1 relative overflow-auto",
-        css`
+        p.mode === "mobile" ? "flex-col items-center" : ""
-          contain: content;
-        `
       )}
       ref={(el) => {
         if (el) {
@@ -75,23 +73,39 @@ export const EdMain = () => {
         }
       }}
     >
-      {meta && <div className={mainStyle(p, meta, local)}>{local.cache}</div>}
+      <div className={mainStyle(p, meta)}>{local.cache}</div>
     </div>
   );
 };
 
-const mainStyle = (
+const mainStyle = (p: PG, meta?: IMeta) => {
-  p: PG,
-  meta: IMeta,
-  local: { width: number; height: number }
-) => {
   let is_active = meta ? isMetaActive(p, meta) : false;
 
   const scale = parseInt(p.ui.zoom.replace("%", "")) / 100;
+
+  let width = `${(1 / scale) * 100}%`;
+  if (p.mode === "mobile") {
+    width = `${(1 / scale) * 375}px`;
+  }
+
   return cx(
-    "absolute inset-0 flex",
+    "absolute flex",
     css`
-      width: ${(1 / scale) * 100}%;
+      contain: content;
+    `,
+    p.mode === "mobile"
+      ? css`
+          border-left: 1px solid #ccc;
+          border-right: 1px solid #ccc;
+          background: white;
+          top: 0px;
+          overflow-x: hidden;
+          overflow-y: auto;
+          bottom: 0px;
+        `
+      : "inset-0",
+    css`
+      width: ${width};
       transform: scale(${scale});
       transform-origin: 0% 0% 0px;
     `,

app/web/src/nova/ed/panel/popup/script/monaco.tsx

@@ -288,6 +288,8 @@ export const EdScriptMonaco: FC<{}> = () => {
       }
       onChange={(value) => {
         const stype = p.ui.popup.script.type;
+        p.ui.popup.script.typings.status = "loading";
+        p.ui.popup.script.wb_render();
         if ((value || "").includes(IMPORT_SEPARATOR)) {
           const valparts = (value || "").split(IMPORT_SEPARATOR + "\n");
           if (valparts.length === 2) local.value = valparts[1];
@@ -318,6 +320,8 @@ export const EdScriptMonaco: FC<{}> = () => {
               arg.page_id = p.page.cur.id;
             }
             let scope: boolean | ParsedScope = false;
+            p.ui.popup.script.typings.status = "ok";
+            p.ui.popup.script.typings.err_msg = "";
             if (stype === "prop-master") {
               p.sync.code.edit({
                 type: "prop-master",
@@ -327,7 +331,7 @@ export const EdScriptMonaco: FC<{}> = () => {
                 ...arg,
               });
             } else if (stype === "prop-instance") {
-              scope = await p.sync.code.edit({
+              const code_result = await p.sync.code.edit({
                 type: "prop-instance",
                 mode: mode,
                 prop_name: p.ui.popup.script.prop_name,
@@ -335,18 +339,32 @@ export const EdScriptMonaco: FC<{}> = () => {
                 value: compress(encode.encode(value || "")),
                 ...arg,
               });
+              if (typeof code_result === "string") {
+                p.ui.popup.script.typings.status = "error";
+                p.ui.popup.script.typings.err_msg = code_result;
+              } else if (typeof code_result === "object") {
+                scope = code_result;
+              }
             } else {
-              scope = await p.sync.code.edit({
+              const code_result = await p.sync.code.edit({
                 type: "adv",
                 mode: mode,
                 item_id: active.item_id,
                 value: compress(encode.encode(value || "")),
                 ...arg,
               });
+
+              if (typeof code_result === "string") {
+                p.ui.popup.script.typings.status = "error";
+                p.ui.popup.script.typings.err_msg = code_result;
+              } else if (typeof code_result === "object") {
+                scope = code_result;
+              }
             }
             if (typeof scope === "object") {
               meta.item.script = scope;
             }
+            p.ui.popup.script.wb_render();
           }
         };
         p.ui.popup.script.on_close = () => {

app/web/src/nova/ed/panel/popup/script/workbench.tsx

@@ -5,10 +5,12 @@ import { EdScriptMonaco } from "./monaco";
 import { EdScriptSnippet } from "./snippet";
 import { useEffect } from "react";
 import { Loading } from "../../../../../utils/ui/loading";
+import { Tooltip } from "../../../../../utils/ui/tooltip";
 
 export const EdScriptWorkbench = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({ active_id: "" });
+  p.ui.popup.script.wb_render = local.render;
 
   useEffect(() => {
     if (!local.active_id) {
@@ -27,10 +29,19 @@ export const EdScriptWorkbench = () => {
     canBack: active.script_nav.list.length > 0,
   };
 
+  const is_error =
+    p.ui.popup.script.typings.status === "error" &&
+    p.ui.popup.script.mode === "js";
   return (
     <div className="flex flex-1 items-stretch">
       <div className="flex flex-1 flex-col ">
-        <div className="flex border-b items-stretch">
+        <div
+          className={cx(
+            "flex border-b items-stretch justify-between",
+            is_error && "bg-red-100"
+          )}
+        >
+          <div className={cx("flex items-stretch")}>
             <div className="border-r px-2 flex items-center">
               <div
                 className={cx(
@@ -84,7 +95,9 @@ export const EdScriptWorkbench = () => {
               </div>
             </div>
             {p.ui.popup.script.type === "prop-master" && <CompTitleMaster />}
-          {p.ui.popup.script.type === "prop-instance" && <CompTitleInstance />}
+            {p.ui.popup.script.type === "prop-instance" && (
+              <CompTitleInstance />
+            )}
             {p.ui.popup.script.type === "item" && (
               <>
                 <div className="flex p-2 space-x-1">
@@ -124,6 +137,36 @@ export const EdScriptWorkbench = () => {
               </>
             )}
           </div>
+          <div className="flex items-center text-xs pr-2">
+            {p.ui.popup.script.mode === "js" && (
+              <div>
+                {
+                  (
+                    {
+                      ok: <div className="text-green-700">Typings: OK</div>,
+                      loading: <div className="text-slate-500">Loading ⌛</div>,
+                      error: (
+                        <Tooltip
+                          content={
+                            <div className="font-mono whitespace-pre-wrap text-[11px]">
+                              {p.ui.popup.script.typings.err_msg}
+                            </div>
+                          }
+                          delay={0}
+                        >
+                          <div className="text-red-700 border-red-700 border bg-white bg-opacity-80 p-1">
+                            ⚠️ Typings: ERROR
+                          </div>
+                        </Tooltip>
+                      ),
+                    } as any
+                  )[p.ui.popup.script.typings.status]
+                }
+              </div>
+            )}
+          </div>
+        </div>
+
         <div className="relative flex flex-1">
           {local.active_id === active.item_id ? (
             <EdScriptMonaco />

app/web/src/nova/ed/panel/tree/node/item/action/del.tsx

@@ -9,11 +9,15 @@ export const edActionDelete = async (p: PG, item: IContent) => {
   if (meta) {
     const mitem = meta.mitem;
     if (mitem) {
+      mitem.doc?.transact(() => {
         mitem.parent.forEach((e, k) => {
           if (e == mitem) {
             deleteByParent(p, mitem, k);
           }
         });
+      });
+      await treeRebuild(p);
+      p.render();
     }
   }
 };
@@ -23,17 +27,19 @@ export const edActionDeleteById = async (p: PG, id: string) => {
   if (meta) {
     const mitem = meta.mitem;
     if (mitem) {
+      mitem.doc?.transact(() => {
         mitem.parent.forEach((e, k) => {
           if (e == mitem) {
             deleteByParent(p, mitem, k);
           }
         });
+      });
+      await treeRebuild(p);
+      p.render();
     }
   }
 };
 
 const deleteByParent = (p: PG, mitem: MItem, index: number) => {
-  const mchild = mitem.parent.get(index);
   mitem.parent.delete(index);
-  treeRebuild(p);
 };

app/web/src/nova/ed/panel/tree/node/render.tsx

@@ -122,12 +122,14 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
         active.item_id = item.id;
         p.ui.tree.search = "";
         p.render();
+
         if ((item as IContent).type === "text") {
           setTimeout(() => {
             if (document.activeElement?.tagName === "INPUT") {
               return;
             }
             const el_active = document.querySelector(".el-active") as any;
+
             if (el_active) {
               setEndOfContenteditable(el_active);
             }