@code0-tech/pictor 0.0.0-mvp.28 → 0.0.0-mvp.29

package/dist/components/d-flow-folder/DFlowFolder.js

@@ -1,158 +1,181 @@
-import { jsxs as g, Fragment as j, jsx as n } from "react/jsx-runtime";
-import { c as M } from "../../_virtual/compiler-runtime.js";
+import { jsxs as k, Fragment as R, jsx as c } from "react/jsx-runtime";
+import { c as T } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/d-flow-folder/DFlowFolder.style.css';/* empty css                       */
-import C from "react";
-import { useService as k, useStore as B } from "../../utils/contextStore.js";
-import { mergeCode0Props as N } from "../../utils/utils.js";
-import { IconFolderOpen as P, IconFolder as E, IconDots as G, IconChevronDown as V, IconChevronRight as q } from "@tabler/icons-react";
+import p from "react";
+import { useService as E, useStore as H } from "../../utils/contextStore.js";
+import { mergeCode0Props as j } from "../../utils/utils.js";
+import { IconFolderOpen as N, IconFolderFilled as G, IconDots as V, IconChevronDown as q, IconChevronRight as J, IconFile as K } from "@tabler/icons-react";
 import "../d-flow/DFlow.js";
-import { DFlowReactiveService as z } from "../d-flow/DFlow.service.js";
+import { DFlowReactiveService as A } from "../d-flow/DFlow.service.js";
 import "../d-flow-data-type/rules/DFlowDataTypeRegexRule.js";
 import "../d-flow-data-type/rules/DFlowDataTypeNumberRangeRule.js";
 import "../d-flow-data-type/rules/DFlowDataTypeItemOfCollectionRule.js";
 import "../d-flow-data-type/rules/DFlowDataTypeContainsTypeRule.js";
 import "../d-flow-data-type/rules/DFlowDataTypeContainsKeyRule.js";
 import "../d-flow-data-type/rules/DFlowDataTypeReturnTypeRule.js";
-import "js-md5";
-import { ScrollArea as H, ScrollAreaViewport as J, ScrollAreaScrollbar as K, ScrollAreaThumb as L } from "../scroll-area/ScrollArea.js";
-import { Flex as $ } from "../flex/Flex.js";
-import { Text as R } from "../text/Text.js";
-import { Button as A } from "../button/Button.js";
-import { DFlowFolderContextMenu as T } from "./DFlowFolderContextMenu.js";
-const _e = (u) => {
+import { md5 as L } from "js-md5";
+import { ScrollArea as Q, ScrollAreaViewport as U, ScrollAreaScrollbar as W, ScrollAreaThumb as X } from "../scroll-area/ScrollArea.js";
+import { Flex as z } from "../flex/Flex.js";
+import { Text as P } from "../text/Text.js";
+import { Button as M } from "../button/Button.js";
+import { DFlowFolderContextMenu as B } from "./DFlowFolderContextMenu.js";
+const be = p.forwardRef((h, e) => {
   const {
-    activeFlowId: e
-  } = u, f = k(z), d = B(z), p = (l) => l.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean), h = C.useMemo(() => (f.values?.() ?? []).filter((o) => !!o?.name), [d]), m = C.useMemo(() => {
-    const l = h.find((o) => o.id === e);
-    return l?.name ? p(l.name) : [];
-  }, [h, e]), v = C.useMemo(() => {
+    activeFlowId: i,
+    namespaceId: _,
+    projectId: S
+  } = h, $ = E(A), u = H(A), v = (l) => l.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean), o = p.useMemo(() => ($.values?.({
+    namespaceId: _,
+    projectId: S
+  }) ?? []).filter((n) => !!n?.name), [u]), b = p.useMemo(() => {
+    const l = o.find((n) => n.id === i);
+    return l?.name ? v(l.name) : [];
+  }, [o, i]), D = p.useMemo(() => {
     const l = {
       name: "",
       path: "",
       children: {}
     };
-    for (const o of h) {
-      const s = p(o.name);
-      if (s.length === 0) continue;
+    for (const n of o) {
+      const w = v(n.name);
+      if (w.length === 0) continue;
       let r = l, t = "";
-      for (let i = 0; i < s.length; i++) {
-        const c = s[i];
-        t = t ? `${t}/${c}` : c, i === s.length - 1 ? r.children[c] ? r.children[c].flow = o : r.children[c] = {
-          name: c,
+      for (let O = 0; O < w.length; O++) {
+        const x = w[O];
+        t = t ? `${t}/${x}` : x, O === w.length - 1 ? r.children[x] ? r.children[x].flow = n : r.children[x] = {
+          name: x,
           path: t,
           children: {},
-          flow: o
-        } : (r.children[c] || (r.children[c] = {
-          name: c,
+          flow: n
+        } : (r.children[x] || (r.children[x] = {
+          name: x,
           path: t,
           children: {}
-        }), r = r.children[c]);
+        }), r = r.children[x]);
       }
     }
     return l;
-  }, [h]), a = C.useCallback((l) => l ? l.split("/").filter(Boolean).every((s, r) => m[r] === s) : !1, [m]), w = C.useCallback((l) => {
-    const o = Object.values(l), s = o.filter((t) => !t.flow), r = o.filter((t) => !!t.flow);
-    return s.sort((t, i) => t.name.localeCompare(i.name)), r.sort((t, i) => t.name.localeCompare(i.name)), /* @__PURE__ */ g(j, { children: [
-      s.map((t) => /* @__PURE__ */ n(Q, { name: t.name, flows: Object.values(t.children).map((i) => i.flow), defaultOpen: a(t.path), ...u, children: w(t.children) }, t.path)),
-      r.map((t) => /* @__PURE__ */ n(U, { name: t.name, path: t.path, flow: t.flow, active: t.flow.id === e, "data-flow-id": t.flow.id ?? void 0, ...u }, t.flow.id ?? t.path))
+  }, [o]), a = p.useCallback((l) => l ? l.split("/").filter(Boolean).every((w, r) => b[r] === w) : !1, [b]), [s, m] = p.useState("default"), [C, g] = p.useState(0), d = p.useCallback(() => {
+    m("allOpen"), g((l) => l + 1);
+  }, []), f = p.useCallback(() => {
+    m("allClosed"), g((l) => l + 1);
+  }, []), I = p.useCallback(() => {
+    m("activePath"), g((l) => l + 1);
+  }, []);
+  p.useImperativeHandle(e, () => ({
+    openAll: d,
+    closeAll: f,
+    openActivePath: I
+  }), [d, f, I]);
+  const y = p.useCallback((l) => s === "allOpen" ? !0 : s === "allClosed" ? !1 : a(l), [a, s]), F = p.useCallback((l) => {
+    const n = Object.values(l), w = n.filter((t) => !t.flow), r = n.filter((t) => !!t.flow);
+    return w.sort((t, O) => t.name.localeCompare(O.name)), r.sort((t, O) => t.name.localeCompare(O.name)), /* @__PURE__ */ k(R, { children: [
+      w.map((t) => /* @__PURE__ */ c(Y, { name: t.name, flows: Object.values(t.children).map((O) => O.flow), defaultOpen: y(t.path), ...h, children: F(t.children) }, `${t.path}-${C}`)),
+      r.map((t) => /* @__PURE__ */ c(Z, { name: t.name, path: t.path, flow: t.flow, active: t.flow.id === i, "data-flow-id": t.flow.id ?? void 0, ...h }, t.flow.id ?? t.path))
     ] });
-  }, [e, a]);
-  return /* @__PURE__ */ g(H, { h: "100%", children: [
-    /* @__PURE__ */ n(J, { children: /* @__PURE__ */ n("div", { className: "d-folder__root", children: w(v.children) }) }),
-    /* @__PURE__ */ n(K, { orientation: "vertical", children: /* @__PURE__ */ n(L, {}) })
+  }, [i, y, C]);
+  return /* @__PURE__ */ k(Q, { h: "100%", children: [
+    /* @__PURE__ */ c(U, { children: /* @__PURE__ */ c("div", { className: "d-folder__root", children: F(D.children) }) }),
+    /* @__PURE__ */ c(W, { orientation: "vertical", children: /* @__PURE__ */ c(X, {}) })
   ] });
-}, Q = (u) => {
-  const e = M.c(31), {
-    name: f,
-    flows: d,
-    defaultOpen: p,
-    children: h,
-    ...m
-  } = u, v = p === void 0 ? !1 : p, [a, w] = C.useState(v), l = T;
-  let o;
-  e[0] !== d || e[1] !== f ? (o = {
-    name: f,
-    flows: d,
-    type: "group"
-  }, e[0] = d, e[1] = f, e[2] = o) : o = e[2];
+}), Y = (h) => {
+  const e = T.c(31), {
+    name: i,
+    flows: _,
+    defaultOpen: S,
+    children: $,
+    ...u
+  } = h, v = S === void 0 ? !1 : S, [o, b] = p.useState(v), D = B;
+  let a;
+  e[0] !== _ || e[1] !== i ? (a = {
+    name: i,
+    flow: _,
+    type: "folder"
+  }, e[0] = _, e[1] = i, e[2] = a) : a = e[2];
   let s;
-  e[3] === Symbol.for("react.memo_cache_sentinel") ? (s = () => w(W), e[3] = s) : s = e[3];
-  const r = N("d-folder", m);
-  let t;
-  e[4] === Symbol.for("react.memo_cache_sentinel") ? (t = {
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (s = () => b(ee), e[3] = s) : s = e[3];
+  const m = j("d-folder", u);
+  let C;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (C = {
     gap: "0.35rem"
-  }, e[4] = t) : t = e[4];
-  let i;
-  e[5] !== a ? (i = /* @__PURE__ */ n("span", { className: "d-folder__icon", children: a ? /* @__PURE__ */ n(P, { size: 12 }) : /* @__PURE__ */ n(E, { size: 12 }) }), e[5] = a, e[6] = i) : i = e[6];
-  let c;
-  e[7] !== f ? (c = /* @__PURE__ */ n(R, { children: f }), e[7] = f, e[8] = c) : c = e[8];
-  let _;
-  e[9] !== i || e[10] !== c ? (_ = /* @__PURE__ */ g($, { align: "center", style: t, children: [
-    i,
-    c
-  ] }), e[9] = i, e[10] = c, e[11] = _) : _ = e[11];
-  let y;
-  e[12] === Symbol.for("react.memo_cache_sentinel") ? (y = {
+  }, e[4] = C) : C = e[4];
+  let g;
+  e[5] !== o ? (g = o ? /* @__PURE__ */ c(N, { size: 12 }) : /* @__PURE__ */ c(G, { size: 12 }), e[5] = o, e[6] = g) : g = e[6];
+  let d;
+  e[7] !== i ? (d = /* @__PURE__ */ c(P, { children: i }), e[7] = i, e[8] = d) : d = e[8];
+  let f;
+  e[9] !== g || e[10] !== d ? (f = /* @__PURE__ */ k(z, { align: "center", style: C, children: [
+    g,
+    d
+  ] }), e[9] = g, e[10] = d, e[11] = f) : f = e[11];
+  let I;
+  e[12] === Symbol.for("react.memo_cache_sentinel") ? (I = {
     gap: "0.35rem"
-  }, e[12] = y) : y = e[12];
-  let D;
-  e[13] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ n(A, { p: "0", variant: "none", children: /* @__PURE__ */ n(G, { size: 12 }) }), e[13] = D) : D = e[13];
-  let S;
-  e[14] !== a ? (S = /* @__PURE__ */ g($, { align: "center", style: y, children: [
-    D,
-    /* @__PURE__ */ n(A, { p: "0", variant: "none", children: a ? /* @__PURE__ */ n(V, { size: 12 }) : /* @__PURE__ */ n(q, { size: 12 }) })
-  ] }), e[14] = a, e[15] = S) : S = e[15];
+  }, e[12] = I) : I = e[12];
+  let y;
+  e[13] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ c(M, { p: "0", variant: "none", children: /* @__PURE__ */ c(V, { size: 12 }) }), e[13] = y) : y = e[13];
   let F;
-  e[16] !== S || e[17] !== s || e[18] !== r || e[19] !== _ ? (F = /* @__PURE__ */ g("div", { onClick: s, ...r, children: [
-    _,
-    S
-  ] }), e[16] = S, e[17] = s, e[18] = r, e[19] = _, e[20] = F) : F = e[20];
-  let b;
-  e[21] !== l || e[22] !== m || e[23] !== o || e[24] !== F ? (b = /* @__PURE__ */ n(l, { contextData: o, ...m, children: F }), e[21] = l, e[22] = m, e[23] = o, e[24] = F, e[25] = b) : b = e[25];
-  const I = a ? h : null;
-  let x;
-  e[26] !== I ? (x = /* @__PURE__ */ n("div", { className: "d-folder__content", children: I }), e[26] = I, e[27] = x) : x = e[27];
-  let O;
-  return e[28] !== b || e[29] !== x ? (O = /* @__PURE__ */ g(j, { children: [
-    b,
-    x
-  ] }), e[28] = b, e[29] = x, e[30] = O) : O = e[30], O;
-}, U = (u) => {
-  const e = M.c(23);
-  let f, d, p, h, m, v;
-  if (e[0] !== u) {
+  e[14] !== o ? (F = /* @__PURE__ */ k(z, { align: "center", style: I, children: [
+    y,
+    /* @__PURE__ */ c(M, { p: "0", variant: "none", children: o ? /* @__PURE__ */ c(q, { size: 12 }) : /* @__PURE__ */ c(J, { size: 12 }) })
+  ] }), e[14] = o, e[15] = F) : F = e[15];
+  let l;
+  e[16] !== F || e[17] !== s || e[18] !== m || e[19] !== f ? (l = /* @__PURE__ */ k("div", { onClick: s, ...m, children: [
+    f,
+    F
+  ] }), e[16] = F, e[17] = s, e[18] = m, e[19] = f, e[20] = l) : l = e[20];
+  let n;
+  e[21] !== D || e[22] !== u || e[23] !== a || e[24] !== l ? (n = /* @__PURE__ */ c(D, { contextData: a, ...u, children: l }), e[21] = D, e[22] = u, e[23] = a, e[24] = l, e[25] = n) : n = e[25];
+  const w = o ? $ : null;
+  let r;
+  e[26] !== w ? (r = /* @__PURE__ */ c("div", { className: "d-folder__content", children: w }), e[26] = w, e[27] = r) : r = e[27];
+  let t;
+  return e[28] !== n || e[29] !== r ? (t = /* @__PURE__ */ k(R, { children: [
+    n,
+    r
+  ] }), e[28] = n, e[29] = r, e[30] = t) : t = e[30], t;
+}, Z = (h) => {
+  const e = T.c(30);
+  let i, _, S, $, u, v, o, b;
+  if (e[0] !== h) {
     const {
-      name: s,
-      path: r,
-      flow: t,
-      icon: i,
-      active: c,
-      ..._
-    } = u;
-    p = s, d = i, f = T, e[7] !== t || e[8] !== r ? (m = {
-      name: r,
-      flow: t,
+      name: g,
+      path: d,
+      flow: f,
+      onSelect: I,
+      active: y,
+      ...F
+    } = h;
+    S = g;
+    const l = L(d + S), n = te;
+    _ = B, e[9] !== f || e[10] !== d ? (o = {
+      name: d,
+      flow: f,
       type: "item"
-    }, e[7] = t, e[8] = r, e[9] = m) : m = e[9], v = _, h = N(`d-folder__item ${c ? "d-folder__item--active" : ""}`, _), e[0] = u, e[1] = f, e[2] = d, e[3] = p, e[4] = h, e[5] = m, e[6] = v;
+    }, e[9] = f, e[10] = d, e[11] = o) : o = e[11], b = F, u = j(`d-folder__item ${y ? "d-folder__item--active" : ""}`, F), e[12] !== f || e[13] !== I ? (v = () => I?.(f), e[12] = f, e[13] = I, e[14] = v) : v = e[14], i = K, $ = n(l), e[0] = h, e[1] = i, e[2] = _, e[3] = S, e[4] = $, e[5] = u, e[6] = v, e[7] = o, e[8] = b;
   } else
-    f = e[1], d = e[2], p = e[3], h = e[4], m = e[5], v = e[6];
+    i = e[1], _ = e[2], S = e[3], $ = e[4], u = e[5], v = e[6], o = e[7], b = e[8];
+  const D = `hsl(${$}, 100%, 72%)`;
   let a;
-  e[10] !== d ? (a = d ? /* @__PURE__ */ n("span", { className: "d-folder__item-icon", children: d }) : null, e[10] = d, e[11] = a) : a = e[11];
-  let w;
-  e[12] !== p ? (w = /* @__PURE__ */ n(R, { children: p }), e[12] = p, e[13] = w) : w = e[13];
-  let l;
-  e[14] !== h || e[15] !== a || e[16] !== w ? (l = /* @__PURE__ */ g("div", { ...h, children: [
+  e[15] !== i || e[16] !== D ? (a = /* @__PURE__ */ c(i, { color: D, size: 12 }), e[15] = i, e[16] = D, e[17] = a) : a = e[17];
+  let s;
+  e[18] !== S ? (s = /* @__PURE__ */ c(P, { children: S }), e[18] = S, e[19] = s) : s = e[19];
+  let m;
+  e[20] !== u || e[21] !== v || e[22] !== a || e[23] !== s ? (m = /* @__PURE__ */ k("div", { ...u, onClick: v, children: [
     a,
-    w
-  ] }), e[14] = h, e[15] = a, e[16] = w, e[17] = l) : l = e[17];
-  let o;
-  return e[18] !== f || e[19] !== m || e[20] !== v || e[21] !== l ? (o = /* @__PURE__ */ n(f, { contextData: m, ...v, children: l }), e[18] = f, e[19] = m, e[20] = v, e[21] = l, e[22] = o) : o = e[22], o;
+    s
+  ] }), e[20] = u, e[21] = v, e[22] = a, e[23] = s, e[24] = m) : m = e[24];
+  let C;
+  return e[25] !== _ || e[26] !== o || e[27] !== b || e[28] !== m ? (C = /* @__PURE__ */ c(_, { contextData: o, ...b, children: m }), e[25] = _, e[26] = o, e[27] = b, e[28] = m, e[29] = C) : C = e[29], C;
 };
-function W(u) {
-  return !u;
+function ee(h) {
+  return !h;
+}
+function te(h) {
+  return parseInt(h.slice(0, 8), 16) % 360;
 }
 export {
-  _e as DFlowFolder,
-  Q as DFlowFolderGroup,
-  U as DFlowFolderItem
+  be as DFlowFolder,
+  Y as DFlowFolderGroup,
+  Z as DFlowFolderItem
 };

package/dist/components/d-flow-folder/DFlowFolderContextMenu.d.ts

@@ -3,8 +3,8 @@ import { default as React } from 'react';
 import { Flow } from '@code0-tech/sagittarius-graphql-types';
 export interface DFlowFolderContextMenuGroupData {
     name: string;
-    flows: Flow[];
-    type: "group";
+    flow: Flow[];
+    type: "folder";
 }
 export interface DFlowFolderContextMenuItemData {
     name: string;

package/dist/components/d-flow-folder/DFlowFolderContextMenu.js

@@ -1,69 +1,38 @@
-import { jsxs as n, Fragment as v, jsx as e } from "react/jsx-runtime";
-import r from "react";
-import { ContextMenu as F, ContextMenuTrigger as M, ContextMenuPortal as O, ContextMenuContent as R, ContextMenuSub as b, ContextMenuSubTrigger as T, ContextMenuSubContent as I, ContextMenuItem as i, ContextMenuSeparator as j } from "../context-menu/ContextMenu.js";
-import { Flex as u } from "../flex/Flex.js";
-import { Text as l } from "../text/Text.js";
-import { IconChevronRight as z, IconEdit as B, IconTrash as k } from "@tabler/icons-react";
-import { Dialog as A, DialogPortal as E, DialogContent as N, DialogClose as m } from "../dialog/Dialog.js";
-import { Badge as P } from "../badge/Badge.js";
-import { Button as s } from "../button/Button.js";
-import { useService as _, useStore as Y } from "../../utils/contextStore.js";
+import { jsx as e, Fragment as a, jsxs as n } from "react/jsx-runtime";
+import h from "react";
+import { ContextMenu as s, ContextMenuTrigger as x, ContextMenuPortal as C, ContextMenuContent as S, ContextMenuSub as f, ContextMenuSubTrigger as M, ContextMenuSubContent as g, ContextMenuItem as r, ContextMenuSeparator as p } from "../context-menu/ContextMenu.js";
+import { Flex as v } from "../flex/Flex.js";
+import { Text as i } from "../text/Text.js";
+import { IconChevronRight as w, IconEdit as D, IconTrash as F } from "@tabler/icons-react";
+import { useService as R, useStore as T } from "../../utils/contextStore.js";
 import "merge-props";
-import { DFlowTypeReactiveService as h } from "../d-flow-type/DFlowType.service.js";
-import { DFlowFolderRenameDialog as q } from "./DFlowFolderRenameDialog.js";
-import { DFlowFolderCreateDialog as G } from "./DFlowFolderCreateDialog.js";
-const ne = (t) => {
+import { DFlowTypeReactiveService as c } from "../d-flow-type/DFlowType.service.js";
+const k = (t) => {
   const {
-    children: f
-  } = t, D = _(h), g = Y(h), C = r.useMemo(() => D.values(), [g]), [x, a] = r.useState(!1), [p, c] = r.useState(!1), [w, d] = r.useState(!1), [y, S] = r.useState(null);
-  return /* @__PURE__ */ n(v, { children: [
-    /* @__PURE__ */ e(A, { open: x, onOpenChange: (o) => a(o), children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ n(N, { autoFocus: !0, showCloseButton: !0, title: t.contextData.type == "item" ? "Remove flow" : "Remove folder", children: [
-      /* @__PURE__ */ n(l, { size: "md", hierarchy: "secondary", children: [
-        t.contextData.type == "item" ? "Are you sure you want to remove flow" : "Are you sure you want to remove folder",
-        " ",
-        " ",
-        /* @__PURE__ */ e(P, { color: "info", children: /* @__PURE__ */ e(l, { size: "md", style: {
-          color: "inherit"
-        }, children: t.contextData.name }) }),
-        " ",
-        " ",
-        t.contextData.type == "group" ? ", all flows and sub-folders inside " : "",
-        "from the this project?"
+    children: l
+  } = t, d = R(c), m = T(c), u = h.useMemo(() => d.values(), [m]);
+  return /* @__PURE__ */ e(a, { children: /* @__PURE__ */ n(s, { children: [
+    /* @__PURE__ */ e(x, { asChild: !0, children: l }),
+    /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ n(f, { children: [
+      /* @__PURE__ */ e(M, { children: /* @__PURE__ */ n(v, { align: "center", justify: "space-between", w: "100%", children: [
+        /* @__PURE__ */ e(i, { children: "New flow" }),
+        /* @__PURE__ */ e(w, { size: 12 })
+      ] }) }),
+      /* @__PURE__ */ e(g, { children: u.map((o) => /* @__PURE__ */ e(r, { onSelect: () => {
+        t.onCreate?.(o.id);
+      }, children: o.names?.nodes[0]?.content ?? o.id }, o.id)) }),
+      /* @__PURE__ */ e(p, {}),
+      /* @__PURE__ */ n(r, { onSelect: () => t.onRename?.(t.contextData), children: [
+        /* @__PURE__ */ e(D, { size: 12, color: "purple" }),
+        /* @__PURE__ */ e(i, { children: "Rename" })
       ] }),
-      /* @__PURE__ */ n(u, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ e(m, { asChild: !0, children: /* @__PURE__ */ e(s, { color: "secondary", children: "No, go back!" }) }),
-        /* @__PURE__ */ e(m, { asChild: !0, children: /* @__PURE__ */ e(s, { color: "error", onClick: () => {
-          t.contextData.type === "item" ? t.onDelete?.(t.contextData.flow) : t.contextData.type === "group" && t.contextData.flows.forEach((o) => {
-            t.onDelete?.(o);
-          });
-        }, children: "Yes, remove!" }) })
+      /* @__PURE__ */ n(r, { onSelect: () => t.onDelete?.(t.contextData), children: [
+        /* @__PURE__ */ e(F, { size: 12, color: "red" }),
+        /* @__PURE__ */ e(i, { children: "Delete" })
       ] })
-    ] }) }) }),
-    /* @__PURE__ */ e(q, { onOpenChange: (o) => c(o), open: p, ...t }),
-    /* @__PURE__ */ e(G, { flowTypeId: y, onOpenChange: (o) => d(o), open: w, ...t }),
-    /* @__PURE__ */ n(F, { children: [
-      /* @__PURE__ */ e(M, { asChild: !0, children: f }),
-      /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(R, { children: /* @__PURE__ */ n(b, { children: [
-        /* @__PURE__ */ e(T, { children: /* @__PURE__ */ n(u, { align: "center", justify: "space-between", w: "100%", children: [
-          /* @__PURE__ */ e(l, { children: "New flow" }),
-          /* @__PURE__ */ e(z, { size: 12 })
-        ] }) }),
-        /* @__PURE__ */ e(I, { children: C.map((o) => /* @__PURE__ */ e(i, { onSelect: () => {
-          S(o.id), d(!0);
-        }, children: o.names?.nodes[0]?.content ?? o.id }, o.id)) }),
-        /* @__PURE__ */ e(j, {}),
-        /* @__PURE__ */ n(i, { onSelect: () => c(!0), children: [
-          /* @__PURE__ */ e(B, { size: 12, color: "purple" }),
-          /* @__PURE__ */ e(l, { children: "Rename" })
-        ] }),
-        /* @__PURE__ */ n(i, { onSelect: () => a(!0), children: [
-          /* @__PURE__ */ e(k, { size: 12, color: "red" }),
-          /* @__PURE__ */ e(l, { children: "Delete" })
-        ] })
-      ] }) }) })
-    ] })
-  ] });
+    ] }) }) })
+  ] }) });
 };
 export {
-  ne as DFlowFolderContextMenu
+  k as DFlowFolderContextMenu
 };

package/dist/components/d-flow-folder/DFlowFolderCreateDialog.d.ts

@@ -1,9 +1,9 @@
-import { DFlowFolderProps } from './DFlowFolder';
 import { default as React } from 'react';
 import { FlowType } from '@code0-tech/sagittarius-graphql-types';
-export interface DFlowFolderCreateDialogProps extends DFlowFolderProps {
+export interface DFlowFolderCreateDialogProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     flowTypeId: FlowType['id'];
+    onCreate?: (name: string, type: FlowType['id']) => void;
 }
 export declare const DFlowFolderCreateDialog: React.FC<DFlowFolderCreateDialogProps>;

package/dist/components/d-flow-folder/DFlowFolderDeleteDialog.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { DFlowFolderContextMenuGroupData, DFlowFolderContextMenuItemData } from './DFlowFolderContextMenu';
+import { Flow } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowFolderDeleteDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData;
+    onDelete?: (flow: Flow) => void;
+}
+export declare const DFlowFolderDeleteDialog: React.FC<DFlowFolderDeleteDialogProps>;

package/dist/components/d-flow-folder/DFlowFolderDeleteDialog.js

@@ -0,0 +1,55 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { c as b } from "../../_virtual/compiler-runtime.js";
+import { DialogClose as x, DialogPortal as v, DialogContent as j, Dialog as F } from "../dialog/Dialog.js";
+import { Text as g } from "../text/Text.js";
+import { Badge as R } from "../badge/Badge.js";
+import { Flex as S } from "../flex/Flex.js";
+import { Button as w } from "../button/Button.js";
+import B from "react";
+const Y = (t) => {
+  const e = b.c(18), {
+    open: _
+  } = t, [s, C] = B.useState(_);
+  let a;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (a = (u) => C(u), e[0] = a) : a = e[0];
+  const d = t.contextData.type == "item" ? "Remove flow" : "Remove folder", h = t.contextData.type == "item" ? "Are you sure you want to remove flow" : "Are you sure you want to remove folder";
+  let c;
+  e[1] === Symbol.for("react.memo_cache_sentinel") ? (c = {
+    color: "inherit"
+  }, e[1] = c) : c = e[1];
+  let l;
+  e[2] !== t.contextData.name ? (l = /* @__PURE__ */ o(R, { color: "info", children: /* @__PURE__ */ o(g, { size: "md", style: c, children: t.contextData.name }) }), e[2] = t.contextData.name, e[3] = l) : l = e[3];
+  const D = t.contextData.type == "folder" ? ", all flows and sub-folders inside " : "";
+  let n;
+  e[4] !== h || e[5] !== l || e[6] !== D ? (n = /* @__PURE__ */ y(g, { size: "md", hierarchy: "secondary", children: [
+    h,
+    " ",
+    " ",
+    l,
+    " ",
+    " ",
+    D,
+    "from the this project?"
+  ] }), e[4] = h, e[5] = l, e[6] = D, e[7] = n) : n = e[7];
+  let m;
+  e[8] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ o(x, { asChild: !0, children: /* @__PURE__ */ o(w, { color: "secondary", children: "No, go back!" }) }), e[8] = m) : m = e[8];
+  let i;
+  e[9] !== t ? (i = /* @__PURE__ */ y(S, { justify: "space-between", align: "center", children: [
+    m,
+    /* @__PURE__ */ o(x, { asChild: !0, children: /* @__PURE__ */ o(w, { color: "error", onClick: () => {
+      t.contextData.type === "item" ? t.onDelete?.(t.contextData.flow) : t.contextData.type === "folder" && t.contextData.flow.forEach((u) => {
+        t.onDelete?.(u);
+      });
+    }, children: "Yes, remove!" }) })
+  ] }), e[9] = t, e[10] = i) : i = e[10];
+  let r;
+  e[11] !== d || e[12] !== n || e[13] !== i ? (r = /* @__PURE__ */ o(v, { children: /* @__PURE__ */ y(j, { autoFocus: !0, showCloseButton: !0, title: d, children: [
+    n,
+    i
+  ] }) }), e[11] = d, e[12] = n, e[13] = i, e[14] = r) : r = e[14];
+  let f;
+  return e[15] !== s || e[16] !== r ? (f = /* @__PURE__ */ o(F, { open: s, onOpenChange: a, children: r }), e[15] = s, e[16] = r, e[17] = f) : f = e[17], f;
+};
+export {
+  Y as DFlowFolderDeleteDialog
+};

package/dist/components/d-flow-folder/DFlowFolderRenameDialog.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 import { DFlowFolderContextMenuGroupData, DFlowFolderContextMenuItemData } from './DFlowFolderContextMenu';
-import { DFlowFolderProps } from './DFlowFolder';
-export interface DFlowFolderRenameDialogProps extends DFlowFolderProps {
+import { Flow } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowFolderRenameDialogProps {
     contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    onRename?: (flow: Flow, newName: string) => void;
 }
 export declare const DFlowFolderRenameDialog: React.FC<DFlowFolderRenameDialogProps>;

package/dist/components/d-flow-folder/DFlowFolderRenameDialog.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
 import i from "react";
-import { Dialog as f, DialogPortal as D, DialogContent as g, DialogClose as l } from "../dialog/Dialog.js";
+import { Dialog as f, DialogPortal as D, DialogContent as g, DialogClose as m } from "../dialog/Dialog.js";
 import { DFlowFolderItemPathInput as x } from "./DFlowFolderItemPathInput.js";
 import { Flex as w } from "../flex/Flex.js";
-import { Button as c } from "../button/Button.js";
+import { Button as l } from "../button/Button.js";
 import "../../_virtual/compiler-runtime.js";
 import "@radix-ui/react-checkbox";
 import "merge-props";
@@ -22,31 +22,31 @@ import { useForm as C } from "../form/useForm.js";
 const G = (e) => {
   const {
     open: a
-  } = e, [u, r] = i.useState(a), h = i.useMemo(() => ({
+  } = e, [c, h] = i.useState(a), u = i.useMemo(() => ({
     path: e.contextData.name
   }), []);
   i.useEffect(() => {
-    r(a);
+    h(a);
   }, [a]);
-  const [s, p] = C({
-    initialValues: h,
+  const [s, d] = C({
+    initialValues: u,
     validate: {
       path: (o) => null
     },
     onSubmit: (o) => {
-      e.contextData.type === "item" ? e.onRename?.(e.contextData.flow, o.path) : e.contextData.type === "group" && e.contextData.flows.forEach((n) => {
-        const d = n.name?.replace(e.contextData.name, o.path) ?? n.name;
-        e.onRename?.(n, d);
+      e.contextData.type === "item" ? e.onRename?.(e.contextData.flow, o.path) : e.contextData.type === "folder" && e.contextData.flow.forEach((n) => {
+        const p = n.name?.replace(e.contextData.name, o.path) ?? n.name;
+        e.onRename?.(n, p);
       });
     }
   });
-  return /* @__PURE__ */ t(f, { open: u, onOpenChange: (o) => {
-    e.onOpenChange?.(o), r(o);
-  }, children: /* @__PURE__ */ t(D, { children: /* @__PURE__ */ m(g, { autoFocus: !0, showCloseButton: !0, title: e.contextData.type == "item" ? "Rename flow" : "Rename folder", children: [
+  return /* @__PURE__ */ t(f, { open: c, onOpenChange: (o) => {
+    e.onOpenChange?.(o);
+  }, children: /* @__PURE__ */ t(D, { children: /* @__PURE__ */ r(g, { autoFocus: !0, showCloseButton: !0, title: e.contextData.type == "item" ? "Rename flow" : "Rename folder", children: [
     /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(x, { description: "You can choose a new name here and only use alphanumeric names.", title: e.contextData.type == "item" ? "Name of the flow" : "Name of the folder", ...s.getInputProps("path") }) }),
-    /* @__PURE__ */ m(w, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ t(l, { asChild: !0, children: /* @__PURE__ */ t(c, { color: "secondary", children: "No, go back!" }) }),
-      /* @__PURE__ */ t(l, { asChild: !0, children: /* @__PURE__ */ t(c, { color: "success", onClick: p, children: "Yes, save!" }) })
+    /* @__PURE__ */ r(w, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ t(m, { asChild: !0, children: /* @__PURE__ */ t(l, { color: "secondary", children: "No, go back!" }) }),
+      /* @__PURE__ */ t(m, { asChild: !0, children: /* @__PURE__ */ t(l, { color: "success", onClick: d, children: "Yes, save!" }) })
     ] })
   ] }) }) });
 };

package/dist/components/d-flow-folder/index.d.ts

@@ -1 +1,4 @@
 export * from './DFlowFolder';
+export * from './DFlowFolderDeleteDialog';
+export * from './DFlowFolderCreateDialog';
+export * from './DFlowFolderRenameDialog';

package/dist/components/d-flow-folder/index.js

@@ -1,6 +1,12 @@
-import { DFlowFolder as r, DFlowFolderGroup as F, DFlowFolderItem as e } from "./DFlowFolder.js";
+import { DFlowFolder as l, DFlowFolderGroup as r, DFlowFolderItem as F } from "./DFlowFolder.js";
+import { DFlowFolderDeleteDialog as t } from "./DFlowFolderDeleteDialog.js";
+import { DFlowFolderCreateDialog as m } from "./DFlowFolderCreateDialog.js";
+import { DFlowFolderRenameDialog as a } from "./DFlowFolderRenameDialog.js";
 export {
-  r as DFlowFolder,
-  F as DFlowFolderGroup,
-  e as DFlowFolderItem
+  l as DFlowFolder,
+  m as DFlowFolderCreateDialog,
+  t as DFlowFolderDeleteDialog,
+  r as DFlowFolderGroup,
+  F as DFlowFolderItem,
+  a as DFlowFolderRenameDialog
 };

package/dist/components/d-flow-function/DFlowFunction.service.d.ts

@@ -1,6 +1,11 @@
 import { ReactiveArrayService } from '../../utils';
 import { FunctionDefinitionView } from './DFlowFunction.view';
-import { FunctionDefinition } from '@code0-tech/sagittarius-graphql-types';
-export declare abstract class DFlowFunctionReactiveService extends ReactiveArrayService<FunctionDefinitionView> {
-    getById(id: FunctionDefinition['id']): FunctionDefinitionView | undefined;
+import { FunctionDefinition, Namespace, NamespaceProject, Runtime } from '@code0-tech/sagittarius-graphql-types';
+export type DFlowFunctionDependencies = {
+    namespaceId: Namespace['id'];
+    projectId: NamespaceProject['id'];
+    runtimeId: Runtime['id'];
+};
+export declare abstract class DFlowFunctionReactiveService extends ReactiveArrayService<FunctionDefinitionView, DFlowFunctionDependencies> {
+    getById(id: FunctionDefinition['id'], dependencies?: DFlowFunctionDependencies): FunctionDefinitionView | undefined;
 }