@timeax/service-builder 0.0.9 → 0.0.11

package/dist/index.js

@@ -4234,6 +4234,8 @@ import { LuTags as LuTags2 } from "react-icons/lu";
 import { MdOutlineRadioButtonChecked as MdOutlineRadioButtonChecked2 } from "react-icons/md";
 import { RxInput as RxInput2 } from "react-icons/rx";
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var ACTIVE_NODE_RING_CLASS = "ring-2 ring-sky-300 shadow-lg shadow-sky-300/20 dark:ring-sky-400";
+var HIGHLIGHT_NODE_OUTLINE_CLASS = "outline-2 outline-solid outline-amber-300 dark:outline-amber-200";
 function NodeShell({
   label,
   icon,
@@ -4264,7 +4266,7 @@ function NodeShell({
         isManualHighlighted ? "manual-highlighted" : "",
         focusDimLevel && focusDimLevel !== "none" ? `dim-${focusDimLevel}` : ""
       ].filter(Boolean).join(" "),
-      className: "group relative min-w-44 rounded-lg bg-white p-3 ring-1 ring-slate-200 shadow-[0_4px_12px_rgba(0,0,0,0.05)] transition-all duration-200 dark:bg-slate-900 dark:ring-slate-700 " + (selected ? "ring-2 ring-blue-500 shadow-lg shadow-blue-500/20 " : "hover:shadow-lg ") + (isActiveNode ? "ring-2 ring-blue-500 shadow-lg shadow-blue-500/25 " : "") + (isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 shadow-lg shadow-emerald-500/25 dark:bg-emerald-500/10 " : "") + (isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (isManualHighlighted ? "outline-2 outline-amber-400 outline-solid " : "") + (draggingService && canAssignService2 ? "border border-dashed border-emerald-400 " : "") + (!canAssignService2 && draggingService ? "opacity-70 " : "") + dimClass,
+      className: "group relative min-w-44 rounded-lg bg-white p-3 ring-1 ring-slate-200 shadow-[0_4px_12px_rgba(0,0,0,0.05)] transition-all duration-200 dark:bg-slate-900 dark:ring-slate-700 " + (selected ? `${ACTIVE_NODE_RING_CLASS} ` : "hover:shadow-lg ") + (isActiveNode ? `${ACTIVE_NODE_RING_CLASS} ` : "") + (isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 shadow-lg shadow-emerald-500/25 dark:bg-emerald-500/10 " : "") + (isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (isManualHighlighted ? `${HIGHLIGHT_NODE_OUTLINE_CLASS} ` : "") + (draggingService && canAssignService2 ? "border border-dashed border-emerald-400 " : "") + (!canAssignService2 && draggingService ? "opacity-70 " : "") + dimClass,
       onDragOver: (event) => {
         if (!canAcceptDropPayload?.(event.dataTransfer)) return;
         event.preventDefault();
@@ -4361,7 +4363,7 @@ function OptionNode(props) {
           props.data.isManualHighlighted ? "manual-highlighted" : "",
           props.data.focusDimLevel && props.data.focusDimLevel !== "none" ? `dim-${props.data.focusDimLevel}` : ""
         ].filter(Boolean).join(" "),
-        className: "relative rounded-full border px-4 py-1.5 text-sm bg-white text-slate-800 transition dark:bg-slate-900 dark:text-slate-200 " + (props.selected ? "border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-500/15 " : "border-slate-300 dark:border-slate-700 ") + (props.data.isActiveNode ? "ring-2 ring-blue-500 shadow-lg shadow-blue-500/25 " : "") + (props.data.isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 dark:bg-emerald-500/10 " : "") + (props.data.isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (props.data.isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (props.data.isManualHighlighted ? "outline-2 outline-solid outline-amber-400 " : "") + (props.data.focusDimLevel === "soft" ? "opacity-80 " : props.data.focusDimLevel === "medium" ? "opacity-[0.55] " : props.data.focusDimLevel === "strong" ? "opacity-35 " : ""),
+        className: "relative rounded-full border px-4 py-1.5 text-sm bg-white text-slate-800 transition dark:bg-slate-900 dark:text-slate-200 " + (props.selected ? "border-sky-300 bg-sky-50 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400 " : "border-slate-300 dark:border-slate-700 ") + (props.data.isActiveNode ? `${ACTIVE_NODE_RING_CLASS} ` : "") + (props.data.isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 dark:bg-emerald-500/10 " : "") + (props.data.isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (props.data.isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (props.data.isManualHighlighted ? `${HIGHLIGHT_NODE_OUTLINE_CLASS} ` : "") + (props.data.focusDimLevel === "soft" ? "opacity-80 " : props.data.focusDimLevel === "medium" ? "opacity-[0.55] " : props.data.focusDimLevel === "strong" ? "opacity-35 " : ""),
         onDragOver: (event) => {
           if (!props.data.canAcceptDropPayload?.(event.dataTransfer)) return;
           event.preventDefault();
@@ -4388,14 +4390,20 @@ function OptionNode(props) {
 function CommentNode(props) {
   const thread = props.data.thread;
   const main = thread?.messages?.find((message) => message.isMain) ?? thread?.messages?.[0];
-  return /* @__PURE__ */ jsxs11("div", { className: "h-48 w-64 rounded-lg border border-[#E0E0E0] bg-[#FEFBEA] shadow-md transition-all hover:shadow-lg dark:border-[#555] dark:bg-[#4a4a38]", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 border-b border-[#E0E0E0]/70 px-3 py-2 text-xs font-medium text-slate-600 dark:border-[#555] dark:text-slate-300", children: [
-      /* @__PURE__ */ jsx15(BsChatSquareQuote2, {}),
-      /* @__PURE__ */ jsx15("span", { children: main?.authorName ?? "Comment" })
-    ] }),
-    /* @__PURE__ */ jsx15("div", { className: "px-3 py-2 text-sm leading-5 text-slate-700 dark:text-slate-200", children: main?.body ?? "" }),
-    /* @__PURE__ */ jsx15("div", { className: "absolute bottom-2 right-2 text-[10px] uppercase tracking-[0.14em] text-slate-400", children: thread?.resolved ? "Resolved" : "Open" })
-  ] });
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "h-48 w-64 rounded-lg border border-[#E0E0E0] bg-[#FEFBEA] shadow-md transition-all hover:shadow-lg dark:border-[#555] dark:bg-[#4a4a38] " + (props.selected ? `${ACTIVE_NODE_RING_CLASS} ` : ""),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 border-b border-[#E0E0E0]/70 px-3 py-2 text-xs font-medium text-slate-600 dark:border-[#555] dark:text-slate-300", children: [
+          /* @__PURE__ */ jsx15(BsChatSquareQuote2, {}),
+          /* @__PURE__ */ jsx15("span", { children: main?.authorName ?? "Comment" })
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "px-3 py-2 text-sm leading-5 text-slate-700 dark:text-slate-200", children: main?.body ?? "" }),
+        /* @__PURE__ */ jsx15("div", { className: "absolute bottom-2 right-2 text-[10px] uppercase tracking-[0.14em] text-slate-400", children: thread?.resolved ? "Resolved" : "Open" })
+      ]
+    }
+  );
 }
 var nodeTypes = {
   tag: TagNode,
@@ -9182,6 +9190,68 @@ import { LuTags as LuTags3 } from "react-icons/lu";
 import { MdOutlineAdd } from "react-icons/md";
 import { RxInput as RxInput3 } from "react-icons/rx";
 import { VscNewFolder } from "react-icons/vsc";
+
+// src/panels/left/layers/reorder.ts
+function isOptionId(id) {
+  return id.startsWith("o:");
+}
+function parentPathKey(path) {
+  if (!path?.length) return "";
+  return path.map(String).join("/");
+}
+function canDropSameParentOnly(args) {
+  if (!args.from) return true;
+  return parentPathKey(args.from.parentPath) === parentPathKey(args.to.parentPath);
+}
+function canDropFieldsSameParentOnly(args) {
+  if (!canDropSameParentOnly(args)) return false;
+  if (!args.dragged) return true;
+  const draggedId = String(args.dragged.id);
+  const parentId = args.to.parent ? String(args.to.parent.id) : "";
+  if (isOptionId(draggedId)) {
+    return parentId.startsWith("f:");
+  }
+  return parentId === "";
+}
+function isReorderLike(detail) {
+  return detail.type === "move" || detail.type === "reorder";
+}
+function applyTagTreeReorder(detail, editor) {
+  if (!isReorderLike(detail)) return false;
+  detail.preventDefault();
+  editor.placeNode(String(detail.node.id), { index: detail.to.index });
+  return true;
+}
+function applyFieldTreeReorder(detail, args) {
+  if (!isReorderLike(detail)) return false;
+  detail.preventDefault();
+  const nodeId = String(detail.node.id);
+  if (isOptionId(nodeId)) {
+    args.editor.placeOption(nodeId, { index: detail.to.index });
+    return true;
+  }
+  const writeAndPlace = () => {
+    args.editor.patchProps?.((props) => {
+      const map = props.order_for_tags ??= {};
+      map[args.currentTagId] = [...args.contextFieldOrder];
+    });
+    args.editor.placeNode(nodeId, {
+      scopeTagId: args.currentTagId,
+      index: detail.to.index
+    });
+  };
+  if (typeof args.editor.transact === "function" && typeof args.editor.patchProps === "function") {
+    args.editor.transact("Reorder field in context", writeAndPlace);
+    return true;
+  }
+  args.editor.placeNode(nodeId, {
+    scopeTagId: args.currentTagId,
+    index: detail.to.index
+  });
+  return true;
+}
+
+// src/panels/left/layers/index.tsx
 import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function filterTree(nodes, query) {
   if (!query.trim()) return nodes;
@@ -9221,6 +9291,7 @@ var Layers = () => {
     canvas.api.addToSelection(ids);
   };
   const handleTagChange = (_next, detail) => {
+    if (applyTagTreeReorder(detail, canvas.api.editor)) return;
     detail.preventDefault?.();
     if (detail.type === "update") {
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
@@ -9232,6 +9303,13 @@ var Layers = () => {
     }
   };
   const handleFieldChange = (_next, detail) => {
+    if (applyFieldTreeReorder(detail, {
+      editor: canvas.api.editor,
+      currentTagId: canvas.api.selection.currentTag?.() ?? "t:root",
+      contextFieldOrder: canvas.layers.fields.map((node) => String(node.id)).filter((id) => !id.startsWith("o:"))
+    })) {
+      return;
+    }
     if (detail.type === "update") {
       detail.preventDefault();
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
@@ -9326,6 +9404,7 @@ var Layers = () => {
                 value: canvas.selectionInfo.tagIds,
                 rowClassName: "mb-1 rounded-xl border border-transparent px-1 hover:border-slate-200 hover:bg-slate-50 dark:hover:border-slate-800 dark:hover:bg-slate-900/70",
                 data: tags,
+                canDrop: canDropSameParentOnly,
                 activeClassName: (e) => e.node.id === canvas.activeId ? "border-blue-300! bg-blue-50/80 dark:border-blue-500/40! dark:bg-blue-500/10!" : "",
                 onChange: handleTagChange,
                 onContextMenu: (detail) => {
@@ -9446,6 +9525,7 @@ var Layers = () => {
             value: [...canvas.selectionInfo.fieldIds, ...canvas.selectionInfo.optionIds],
             rowClassName: "mb-1 rounded-xl border border-transparent px-1 hover:border-slate-200 hover:bg-slate-50 dark:hover:border-slate-800 dark:hover:bg-slate-900/70",
             data: fields,
+            canDrop: canDropFieldsSameParentOnly,
             onChange: handleFieldChange,
             onContextMenu: (detail) => {
               const nodeId = String(detail.node.id);
@@ -10096,7 +10176,7 @@ var Comments = () => {
                 branchId: ws.branches.currentId
               }).finally(() => setValue(""));
             },
-            className: "cursor-pointer rounded-xl bg-blue-600 px-3 py-2 text-white transition hover:bg-blue-700",
+            className: "cursor-pointer rounded-full bg-blue-600 px-2 py-2 text-white transition hover:bg-blue-700",
             disabled: !ws.boot.isReady,
             children: /* @__PURE__ */ jsx45(MdOutlineSend, {})
           }