@code0-tech/pictor 0.0.0-mvp.3 → 0.0.0-mvp.30

package/dist/components/d-flow-file/DFlowTabTrigger.js

@@ -0,0 +1,64 @@
+import { jsxs as T, jsx as c } from "react/jsx-runtime";
+import w from "react";
+import { useService as d } from "../../utils/contextStore.js";
+import "merge-props";
+import "../d-flow/DFlow.js";
+import { DFlowReactiveService as I } from "../d-flow/DFlow.service.js";
+import "js-md5";
+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 { Flex as V } from "../flex/Flex.js";
+import { DFlowTypeReactiveService as b } from "../d-flow-type/DFlowType.service.js";
+import { useValueSuggestions as D } from "../d-flow-suggestion/DFlowValueSuggestions.hook.js";
+import { useDataTypeSuggestions as F } from "../d-flow-suggestion/DFlowDataTypeSuggestions.hook.js";
+import { toInputSuggestions as h } from "../d-flow-suggestion/DFlowSuggestionMenu.util.js";
+import { DFlowInputDataType as x } from "../d-flow-input/DFlowInputDataType.js";
+import { DFlowInputDefault as j } from "../d-flow-input/DFlowInputDefault.js";
+const W = (s) => {
+  const {
+    instance: n
+  } = s, g = d(b), l = d(I), [, y] = w.useTransition(), o = g.getById(n.type?.id), m = {};
+  return o?.flowTypeSettings?.forEach((i) => {
+    const e = {
+      dataType: i.dataType
+    }, u = D(e), p = F(e);
+    m[i.identifier] = [...u, ...p].sort();
+  }), /* @__PURE__ */ T(V, { style: {
+    gap: ".7rem",
+    flexDirection: "column"
+  }, children: [
+    o?.inputType ? /* @__PURE__ */ c(x, { onDataTypeChange: (i) => {
+      n.inputType = i, l.update();
+    }, initialValue: n.inputType || o.inputType, blockingDataType: o.inputType }) : null,
+    o?.flowTypeSettings?.map((i) => {
+      const e = n.settings?.nodes?.find((t) => t?.flowSettingIdentifier == i.identifier), u = i.names[0]?.content ?? "", p = i?.descriptions[0]?.content ?? "", v = m[i.identifier];
+      if (!e) return null;
+      const S = (e.value?.__typename === "LiteralValue", typeof e?.value == "object" ? JSON.stringify(e?.value) : e?.value), r = (t) => {
+        y(async () => {
+          t?.__typename == "LiteralValue" ? await l.setSettingValue(s.instance.id, e.flowSettingIdentifier, t.value) : await l.setSettingValue(s.instance.id, e.flowSettingIdentifier, t);
+        });
+      }, f = (t) => {
+        try {
+          const a = JSON.parse(t.target.value);
+          if (a.__typename == "LiteralValue") {
+            r(a.value);
+            return;
+          }
+          r(a);
+        } catch {
+          r(t.target.value);
+        }
+      };
+      return /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(j, { flowId: void 0, nodeId: void 0, parameterId: void 0, title: u, description: p, clearable: !0, defaultValue: S, onBlur: f, onClear: f, onSuggestionSelect: (t) => {
+        r(t.value);
+      }, suggestions: h(v) }, JSON.stringify(e.value)) });
+    })
+  ] });
+};
+export {
+  W as DFlowTabTrigger
+};

package/dist/components/d-flow-file/DFlowTabs.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { Flow, Namespace, NamespaceProject } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowTabsProps {
+    flowId: Flow['id'];
+    namespaceId: Namespace['id'];
+    projectId: NamespaceProject['id'];
+}
+export declare const DFlowTabs: React.FC<DFlowTabsProps>;

package/dist/components/d-flow-file/DFlowTabs.js

@@ -0,0 +1,132 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useService as u, useStore as g } from "../../utils/contextStore.js";
+import l from "react";
+import "merge-props";
+import { FileTabsService as S } from "../file-tabs/FileTabs.service.js";
+import { FileTabs as U, FileTabsContent as G, FileTabsList as H, FileTabsTrigger as J } from "../file-tabs/FileTabs.js";
+import { Menu as x, MenuTrigger as w, MenuPortal as C, MenuContent as I, MenuLabel as m, MenuItem as c, MenuSeparator as v } from "../menu/Menu.js";
+import { Button as M } from "../button/Button.js";
+import { IconPlus as K, IconArrowUp as z, IconArrowDown as F, IconCornerDownLeft as L, IconDotsVertical as Q } from "@tabler/icons-react";
+import { DLayout as X } from "../d-layout/DLayout.js";
+import "../d-flow/DFlow.js";
+import { DFlowReactiveService as A } from "../d-flow/DFlow.service.js";
+import "js-md5";
+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 { DFlowTypeReactiveService as D } from "../d-flow-type/DFlowType.service.js";
+import { Card as B } from "../card/Card.js";
+import { Flex as n } from "../flex/Flex.js";
+import { Badge as a } from "../badge/Badge.js";
+import { Spacing as W } from "../spacing/Spacing.js";
+const Se = (k) => {
+  const {
+    flowId: R,
+    namespaceId: $,
+    projectId: j
+  } = k, t = u(S), o = g(S), q = u(A), N = g(A), O = u(D), P = g(D), h = l.useId(), b = l.useMemo(() => q.getById(R, {
+    namespaceId: $,
+    projectId: j
+  }), [N]), p = l.useMemo(() => O.getById(b?.type?.id), [P, b]), T = l.useMemo(() => o.find((r) => r.active)?.id ?? t.getActiveTab()?.id, [o, t]), d = l.useMemo(() => {
+    if (p?.id)
+      return o.find((r) => r.id === p.id);
+  }, [o, p]), y = l.useMemo(() => o.filter((r) => r.show), [o, d]), V = l.useMemo(() => o.filter((r) => !r.show && r.id !== d?.id), [o, d]);
+  return l.useEffect(() => {
+    setTimeout(() => {
+      const s = document.querySelector('[data-id="' + h + '"]').querySelector(".file-tabs__list-content"), f = s.querySelector('[data-value="' + t.getActiveTab()?.id + '"]');
+      if (s && f) {
+        const E = f.offsetLeft + f.offsetWidth / 2 - s.offsetWidth / 2;
+        s.scrollLeft = 0, s.scrollBy({
+          left: E,
+          behavior: "smooth"
+        });
+      }
+    }, 0);
+  }, [T, h]), /* @__PURE__ */ e(U, { "data-id": h, value: T, onValueChange: (r) => {
+    t.activateTab(r);
+  }, children: /* @__PURE__ */ e(X, { topContent: /* @__PURE__ */ e(H, { controls: /* @__PURE__ */ i(n, { children: [
+    /* @__PURE__ */ i(x, { children: [
+      /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(M, { variant: "none", paddingSize: "xxs", color: "primary", children: /* @__PURE__ */ e(K, { size: 12 }) }) }),
+      /* @__PURE__ */ e(C, { children: /* @__PURE__ */ i(I, { align: "start", sideOffset: 8, color: "secondary", children: [
+        /* @__PURE__ */ i(B, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
+          borderWidth: "2px"
+        }, children: [
+          /* @__PURE__ */ e(m, { children: "Starting Node" }),
+          d && /* @__PURE__ */ e(c, { onSelect: () => t.activateTab(d.id), children: d.children }),
+          /* @__PURE__ */ e(v, {}),
+          /* @__PURE__ */ e(m, { children: "Opened Nodes" }),
+          y.map((r) => /* @__PURE__ */ e(c, { onSelect: () => {
+            t.activateTab(r.id);
+          }, children: r.children }, `menu-${r.id}`)),
+          /* @__PURE__ */ e(v, {}),
+          /* @__PURE__ */ e(m, { children: "Available Node" }),
+          V.map((r) => /* @__PURE__ */ e(c, { onSelect: () => {
+            t.activateTab(r.id);
+          }, children: r.children }, `menu-${r.id}`))
+        ] }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i(n, { style: {
+          gap: ".35rem"
+        }, children: [
+          /* @__PURE__ */ i(n, { align: "center", style: {
+            gap: "0.35rem"
+          }, children: [
+            /* @__PURE__ */ i(n, { children: [
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(z, { size: 12 }) }),
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(F, { size: 12 }) })
+            ] }),
+            "move"
+          ] }),
+          /* @__PURE__ */ e(W, { spacing: "xxs" }),
+          /* @__PURE__ */ i(n, { align: "center", style: {
+            gap: ".35rem"
+          }, children: [
+            /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(L, { size: 12 }) }),
+            "select"
+          ] })
+        ] }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ i(x, { children: [
+      /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(M, { variant: "none", paddingSize: "xxs", color: "primary", children: /* @__PURE__ */ e(Q, { size: 12 }) }) }),
+      /* @__PURE__ */ e(C, { children: /* @__PURE__ */ i(I, { align: "end", sideOffset: 8, color: "secondary", children: [
+        /* @__PURE__ */ i(B, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
+          borderWidth: "2px"
+        }, children: [
+          /* @__PURE__ */ e(c, { onClick: () => t.clearAll(), children: "Close all tabs" }),
+          /* @__PURE__ */ e(c, { onClick: () => t.clearWithoutActive(), children: "Close other tabs" }),
+          /* @__PURE__ */ e(v, {}),
+          /* @__PURE__ */ e(c, { onClick: () => t.clearLeft(), children: "Close all tabs to left" }),
+          /* @__PURE__ */ e(c, { onClick: () => t.clearRight(), children: "Close all tabs to right" })
+        ] }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i(n, { style: {
+          gap: ".35rem"
+        }, children: [
+          /* @__PURE__ */ i(n, { align: "center", style: {
+            gap: "0.35rem"
+          }, children: [
+            /* @__PURE__ */ i(n, { children: [
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(z, { size: 12 }) }),
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(F, { size: 12 }) })
+            ] }),
+            "move"
+          ] }),
+          /* @__PURE__ */ e(W, { spacing: "xxs" }),
+          /* @__PURE__ */ i(n, { align: "center", style: {
+            gap: ".35rem"
+          }, children: [
+            /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(L, { size: 12 }) }),
+            "select"
+          ] })
+        ] }) })
+      ] }) })
+    ] })
+  ] }), children: y.map((r, s) => r.show && /* @__PURE__ */ e(J, { closable: r.closeable, value: r.id, onClose: () => {
+    t.removeTabById(r.id);
+  }, children: r.children }, `trigger-${r.id}`)) }), children: o.map((r) => /* @__PURE__ */ e(G, { value: r.id, children: r.content }, `content-${r.id}`)) }) });
+};
+export {
+  Se as DFlowTabs
+};

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

@@ -0,0 +1 @@
+export * from './DFlowTabs';

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

@@ -0,0 +1,4 @@
+import { DFlowTabs as a } from "./DFlowTabs.js";
+export {
+  a as DFlowTabs
+};

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { Code0Component } from '../../utils';
+import { Flow, FlowType, Namespace, NamespaceProject, Scalars } from '@code0-tech/sagittarius-graphql-types';
+import { DFlowFolderContextMenuGroupData, DFlowFolderContextMenuItemData } from './DFlowFolderContextMenu';
+export interface DFlowFolderProps {
+    activeFlowId: Scalars["FlowID"]["output"];
+    namespaceId: Namespace['id'];
+    projectId: NamespaceProject['id'];
+    onRename?: (contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData) => void;
+    onDelete?: (contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData) => void;
+    onCreate?: (type: FlowType['id']) => void;
+    onSelect?: (flow: Flow) => void;
+}
+export type DFlowFolderHandle = {
+    openAll: () => void;
+    closeAll: () => void;
+    openActivePath: () => void;
+};
+export interface DFlowFolderGroupProps extends DFlowFolderProps, Omit<Code0Component<HTMLDivElement>, "onSelect"> {
+    name: string;
+    children: React.ReactElement<DFlowFolderItemProps> | React.ReactElement<DFlowFolderItemProps>[] | React.ReactElement<DFlowFolderGroupProps> | React.ReactElement<DFlowFolderGroupProps>[];
+    defaultOpen?: boolean;
+    flows: Flow[];
+}
+export interface DFlowFolderItemProps extends DFlowFolderProps, Omit<Code0Component<HTMLDivElement>, "onSelect"> {
+    name: string;
+    path: string;
+    active?: boolean;
+    flow: Flow;
+}
+export declare const DFlowFolder: React.ForwardRefExoticComponent<DFlowFolderProps & React.RefAttributes<DFlowFolderHandle>>;
+export declare const DFlowFolderGroup: React.FC<DFlowFolderGroupProps>;
+export declare const DFlowFolderItem: React.FC<DFlowFolderItemProps>;

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

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

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

@@ -0,0 +1,18 @@
+import { DFlowFolderProps } from './DFlowFolder';
+import { default as React } from 'react';
+import { Flow } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowFolderContextMenuGroupData {
+    name: string;
+    flow: Flow[];
+    type: "folder";
+}
+export interface DFlowFolderContextMenuItemData {
+    name: string;
+    flow: Flow;
+    type: "item";
+}
+export interface DFlowFolderContextMenuProps extends DFlowFolderProps {
+    children: React.ReactNode;
+    contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData;
+}
+export declare const DFlowFolderContextMenu: React.FC<DFlowFolderContextMenuProps>;

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

@@ -0,0 +1,45 @@
+import { jsx as e, Fragment as a, jsxs as n } from "react/jsx-runtime";
+import h from "react";
+import { ContextMenu as x, ContextMenuTrigger as s, ContextMenuPortal as C, ContextMenuContent as p, ContextMenuSub as S, ContextMenuSubTrigger as f, ContextMenuSubContent as M, ContextMenuItem as r, ContextMenuSeparator as g } 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 c } from "../d-flow-type/DFlowType.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";
+const K = (t) => {
+  const {
+    children: l
+  } = t, m = R(c), d = T(c), u = h.useMemo(() => m.values(), [d]);
+  return /* @__PURE__ */ e(a, { children: /* @__PURE__ */ n(x, { children: [
+    /* @__PURE__ */ e(s, { asChild: !0, children: l }),
+    /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ n(S, { children: [
+      /* @__PURE__ */ e(f, { 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(M, { children: u.map((o) => /* @__PURE__ */ e(r, { onSelect: () => {
+        t.onCreate?.(o.id);
+      }, children: o.names[0]?.content ?? o.id }, o.id)) }),
+      /* @__PURE__ */ e(g, {}),
+      /* @__PURE__ */ n(r, { onSelect: () => t.onRename?.(t.contextData), children: [
+        /* @__PURE__ */ e(D, { size: 12, color: "purple" }),
+        /* @__PURE__ */ e(i, { children: "Rename" })
+      ] }),
+      /* @__PURE__ */ n(r, { onSelect: () => t.onDelete?.(t.contextData), children: [
+        /* @__PURE__ */ e(F, { size: 12, color: "red" }),
+        /* @__PURE__ */ e(i, { children: "Delete" })
+      ] })
+    ] }) }) })
+  ] }) });
+};
+export {
+  K as DFlowFolderContextMenu
+};

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { FlowType } from '@code0-tech/sagittarius-graphql-types';
+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/DFlowFolderCreateDialog.js

@@ -0,0 +1,76 @@
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { c as O } from "../../_virtual/compiler-runtime.js";
+import y from "react";
+import "@radix-ui/react-checkbox";
+import "merge-props";
+import "@tabler/icons-react";
+import '../../assets/components/form/Input.style.css';/* empty css                       */
+import "../form/EmailInput.js";
+import "../form/Input.js";
+import "../form/InputSuggestion.js";
+import "../form/NumberInput.js";
+import "../form/PasswordInput.js";
+import "@radix-ui/react-one-time-password-field";
+import "@radix-ui/react-radio-group";
+import "../form/SwitchInput.js";
+import "../form/TextInput.js";
+import { useForm as S } from "../form/useForm.js";
+import { DialogClose as I, DialogPortal as j, DialogContent as v, Dialog as N } from "../dialog/Dialog.js";
+import { Flex as P } from "../flex/Flex.js";
+import { Button as F } from "../button/Button.js";
+import { DFlowFolderItemPathInput as k } from "./DFlowFolderItemPathInput.js";
+const te = (t) => {
+  const e = O.c(23), {
+    open: m
+  } = t, [g, b] = y.useState(m);
+  let c;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (c = {
+    name: ""
+  }, e[0] = c) : c = e[0];
+  const x = c;
+  let s, f;
+  e[1] !== m ? (s = () => {
+    b(m);
+  }, f = [m], e[1] = m, e[2] = s, e[3] = f) : (s = e[2], f = e[3]), y.useEffect(s, f);
+  let u;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (u = {
+    name: B
+  }, e[4] = u) : u = e[4];
+  let p;
+  e[5] !== t ? (p = {
+    initialValues: x,
+    validate: u,
+    onSubmit: (_) => {
+      t.onCreate?.(_.name, t.flowTypeId), t.onOpenChange?.(!1);
+    }
+  }, e[5] = t, e[6] = p) : p = e[6];
+  const [C, D] = S(p);
+  let i;
+  e[7] !== t ? (i = (_) => {
+    t.onOpenChange?.(_);
+  }, e[7] = t, e[8] = i) : i = e[8];
+  let l;
+  e[9] !== C ? (l = C.getInputProps("name"), e[9] = C, e[10] = l) : l = e[10];
+  let n;
+  e[11] !== l ? (n = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(k, { description: "You can choose a name here and only use alphanumeric names.", title: "Name of the flow", ...l }) }), e[11] = l, e[12] = n) : n = e[12];
+  let h;
+  e[13] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ o(I, { asChild: !0, children: /* @__PURE__ */ o(F, { color: "secondary", children: "No, go back!" }) }), e[13] = h) : h = e[13];
+  let r;
+  e[14] !== D ? (r = /* @__PURE__ */ w(P, { justify: "space-between", align: "center", children: [
+    h,
+    /* @__PURE__ */ o(F, { color: "success", onClick: D, children: "Yes, create!" })
+  ] }), e[14] = D, e[15] = r) : r = e[15];
+  let a;
+  e[16] !== n || e[17] !== r ? (a = /* @__PURE__ */ o(j, { children: /* @__PURE__ */ w(v, { autoFocus: !0, showCloseButton: !0, title: "Create new flow", children: [
+    n,
+    r
+  ] }) }), e[16] = n, e[17] = r, e[18] = a) : a = e[18];
+  let d;
+  return e[19] !== g || e[20] !== a || e[21] !== i ? (d = /* @__PURE__ */ o(N, { open: g, onOpenChange: i, children: a }), e[19] = g, e[20] = a, e[21] = i, e[22] = d) : d = e[22], d;
+};
+function B(t) {
+  return t ? null : "Name is required";
+}
+export {
+  te as DFlowFolderCreateDialog
+};

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>;