@timeax/service-builder 0.0.7 → 0.0.8

package/dist/index.js

@@ -9041,6 +9041,10 @@ var Layers = () => {
       detail.preventDefault();
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
     }
+    if (detail.type === "insert" && detail.context.via == "ui.create") {
+      const parent = detail.to.parent.id;
+      canvas.api.editor.addOption(parent, { label: detail.node.title });
+    }
   };
   const tags = useMemo17(() => filterTree(canvas.layers.tags, tagSearch), [canvas.layers.tags, tagSearch]);
   const fields = useMemo17(() => filterTree(canvas.layers.fields, fieldSearch), [canvas.layers.fields, fieldSearch]);
@@ -16039,7 +16043,7 @@ var workspaceBackend = createMemoryWorkspaceBackend({
 });
 
 // src/index.tsx
-import { jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
 var inputRegistry = createInputRegistry();
 registerEntries(inputRegistry);
 function WorkspaceLayout({ onShare, onPlay, menu }) {
@@ -16076,8 +16080,86 @@ function WorkspaceLayout({ onShare, onPlay, menu }) {
     ) })
   ] }) }) }) });
 }
+var Styles = `
+/* line theming via CSS vars (can be overridden upstream) */
+:root {
+    --tree-line-color: #d1d5db; /* gray-300 */
+    --tree-line-width: 1px;
+    --tree-line-style: solid; /* solid | dashed | dotted */
+    --elbow-v-h: 100%
+}
+
+/* container for each row */
+.tree-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem; /* matches your gap-2 */
+    /*padding: 0.25rem 0.5rem; !* py-1 px-2 *!*/
+}
+
+/* left rail: N ancestor columns (width given inline) */
+.tree-rail {
+    display: flex;
+    position: relative;
+}
+
+/* a single ancestor column; width is set inline to \`indent\` */
+.tree-col {
+    position: relative;
+}
+
+/* draw vertical guideline IF data-show="1" */
+.tree-col[data-show="1"]::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* the elbow cell for the current node (one per row) */
+.tree-elbow {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* vertical segment (full for mid siblings, half for last) */
+.tree-elbow::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+    height: var(--elbow-v-h, 100%); /* "50%" for last sibling, else "100%" */
+    border-left: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* horizontal segment (elbow) from center to the content area */
+.tree-elbow::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%);
+    width: 50%;
+    border-top: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* apply to the element that receives selectedRowClassName / rowClassName */
+.tree-row-clip {
+    background-clip: content-box; /* don\u2019t paint under the left padding (indent) */
+}
+
+`;
 function ServiceBuilder({ backend, actor, onShare, onPlay, menu }) {
-  return /* @__PURE__ */ jsx78(InputsProvider, { initialRegistry: inputRegistry, children: /* @__PURE__ */ jsx78(Workspace, { backend, actor, children: () => /* @__PURE__ */ jsx78(WorkspaceLayout, { onShare, onPlay, menu }) }) });
+  return /* @__PURE__ */ jsxs57(Fragment17, { children: [
+    /* @__PURE__ */ jsx78("style", { children: Styles }),
+    /* @__PURE__ */ jsx78(InputsProvider, { initialRegistry: inputRegistry, children: /* @__PURE__ */ jsx78(Workspace, { backend, actor, children: () => /* @__PURE__ */ jsx78(WorkspaceLayout, { onShare, onPlay, menu }) }) })
+  ] });
 }
 function ServiceBuilderWorkspace({ onShare, onPlay, menu }) {
   return /* @__PURE__ */ jsx78(ServiceBuilder, { backend: workspaceBackend, actor: workspaceActor, onShare, onPlay, menu });