@code0-tech/pictor 0.0.0-mvp.25 → 0.0.0-mvp.27

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

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

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

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

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

@@ -0,0 +1,128 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useService as u, useStore as g } from "../../utils/contextStore.js";
+import n from "react";
+import "merge-props";
+import { FileTabsService as S } from "../file-tabs/FileTabs.service.js";
+import { FileTabs as V, FileTabsContent as E, FileTabsList as G, FileTabsTrigger as U } from "../file-tabs/FileTabs.js";
+import { Menu as x, MenuTrigger as w, MenuPortal as C, MenuContent as M, MenuLabel as m, MenuItem as c, MenuSeparator as v } from "../menu/Menu.js";
+import { Button as z } from "../button/Button.js";
+import { IconPlus as H, IconArrowUp as I, IconArrowDown as F, IconCornerDownLeft as L, IconDotsVertical as J } from "@tabler/icons-react";
+import { DLayout as K } from "../d-layout/DLayout.js";
+import { ButtonGroup as Q } from "../button-group/ButtonGroup.js";
+import "../d-flow/DFlow.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 { DFlowTypeReactiveService as B } from "../d-flow-type/DFlowType.service.js";
+import { Card as D } from "../card/Card.js";
+import { Flex as l } 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
+  } = k, t = u(S), o = g(S), $ = u(A), q = g(A), N = u(B), O = g(B), h = n.useId(), b = n.useMemo(() => $.getById(R), [q]), p = n.useMemo(() => N.getById(b?.type?.id), [O, b]), T = n.useMemo(() => o.find((r) => r.active)?.id ?? t.getActiveTab()?.id, [o, t]), d = n.useMemo(() => {
+    if (p?.id)
+      return o.find((r) => r.id === p.id);
+  }, [o, p]), y = n.useMemo(() => o.filter((r) => r.show), [o, d]), j = n.useMemo(() => o.filter((r) => !r.show && r.id !== d?.id), [o, d]);
+  return n.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 P = f.offsetLeft + f.offsetWidth / 2 - s.offsetWidth / 2;
+        s.scrollLeft = 0, s.scrollBy({
+          left: P,
+          behavior: "smooth"
+        });
+      }
+    }, 0);
+  }, [T, h]), /* @__PURE__ */ e(V, { "data-id": h, value: T, onValueChange: (r) => {
+    t.activateTab(r), t.update();
+  }, children: /* @__PURE__ */ e(K, { topContent: /* @__PURE__ */ e(G, { controls: /* @__PURE__ */ i(Q, { children: [
+    /* @__PURE__ */ i(x, { children: [
+      /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(z, { variant: "none", paddingSize: "xxs", color: "primary", children: /* @__PURE__ */ e(H, { size: 12 }) }) }),
+      /* @__PURE__ */ e(C, { children: /* @__PURE__ */ i(M, { align: "start", sideOffset: 8, color: "secondary", children: [
+        /* @__PURE__ */ i(D, { 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" }),
+          j.map((r) => /* @__PURE__ */ e(c, { onSelect: () => {
+            t.activateTab(r.id);
+          }, children: r.children }, `menu-${r.id}`))
+        ] }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i(l, { style: {
+          gap: ".35rem"
+        }, children: [
+          /* @__PURE__ */ i(l, { align: "center", style: {
+            gap: "0.35rem"
+          }, children: [
+            /* @__PURE__ */ i(l, { children: [
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(I, { size: 12 }) }),
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(F, { size: 12 }) })
+            ] }),
+            "move"
+          ] }),
+          /* @__PURE__ */ e(W, { spacing: "xxs" }),
+          /* @__PURE__ */ i(l, { 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(z, { variant: "none", paddingSize: "xxs", color: "primary", children: /* @__PURE__ */ e(J, { size: 12 }) }) }),
+      /* @__PURE__ */ e(C, { children: /* @__PURE__ */ i(M, { align: "end", sideOffset: 8, color: "secondary", children: [
+        /* @__PURE__ */ i(D, { 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(l, { style: {
+          gap: ".35rem"
+        }, children: [
+          /* @__PURE__ */ i(l, { align: "center", style: {
+            gap: "0.35rem"
+          }, children: [
+            /* @__PURE__ */ i(l, { children: [
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(I, { size: 12 }) }),
+              /* @__PURE__ */ e(a, { border: !0, children: /* @__PURE__ */ e(F, { size: 12 }) })
+            ] }),
+            "move"
+          ] }),
+          /* @__PURE__ */ e(W, { spacing: "xxs" }),
+          /* @__PURE__ */ i(l, { 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(U, { closable: r.closeable, value: r.id, onClose: () => {
+    t.removeTabById(r.id);
+  }, children: r.children }, `trigger-${r.id}`)) }), children: o.map((r) => /* @__PURE__ */ e(E, { 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 → d-flow-folder}/DFlowFolder.d.ts

@@ -1,18 +1,24 @@
 import { default as React } from 'react';
-import { Code0Component } from '../../../utils/types';
-import { Scalars } from '@code0-tech/sagittarius-graphql-types';
+import { Code0Component } from '../../utils';
+import { Flow, FlowType, Scalars } from '@code0-tech/sagittarius-graphql-types';
 export interface DFlowFolderProps {
-    flowId: Scalars["FlowID"]["output"];
+    activeFlowId: Scalars["FlowID"]["output"];
+    onRename?: (flow: Flow, newName: string) => void;
+    onDelete?: (flow: Flow) => void;
+    onCreate?: (name: string, type: FlowType['id']) => void;
 }
-export interface DFlowFolderGroupProps extends Omit<Code0Component<HTMLDivElement>, "controls"> {
+export interface DFlowFolderGroupProps extends DFlowFolderProps, Omit<Code0Component<HTMLDivElement>, "controls"> {
     name: string;
     children: React.ReactElement<DFlowFolderItemProps> | React.ReactElement<DFlowFolderItemProps>[] | React.ReactElement<DFlowFolderGroupProps> | React.ReactElement<DFlowFolderGroupProps>[];
     defaultOpen?: boolean;
+    flows: Flow[];
 }
-export interface DFlowFolderItemProps extends Code0Component<HTMLDivElement> {
+export interface DFlowFolderItemProps extends DFlowFolderProps, Code0Component<HTMLDivElement> {
     name: string;
+    path: string;
     icon?: React.ReactNode;
     active?: boolean;
+    flow: Flow;
 }
 export declare const DFlowFolder: React.FC<DFlowFolderProps>;
 export declare const DFlowFolderGroup: React.FC<DFlowFolderGroupProps>;

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

@@ -0,0 +1,158 @@
+import { jsxs as g, Fragment as j, jsx as n } from "react/jsx-runtime";
+import { c as M } 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 "../d-flow/DFlow.js";
+import { DFlowReactiveService as z } 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) => {
+  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(() => {
+    const l = {
+      name: "",
+      path: "",
+      children: {}
+    };
+    for (const o of h) {
+      const s = p(o.name);
+      if (s.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,
+          path: t,
+          children: {},
+          flow: o
+        } : (r.children[c] || (r.children[c] = {
+          name: c,
+          path: t,
+          children: {}
+        }), r = r.children[c]);
+      }
+    }
+    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))
+    ] });
+  }, [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, {}) })
+  ] });
+}, 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];
+  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 = {
+    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 = {
+    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];
+  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) {
+    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,
+      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;
+  } else
+    f = e[1], d = e[2], p = e[3], h = e[4], m = e[5], v = e[6];
+  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: [
+    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;
+};
+function W(u) {
+  return !u;
+}
+export {
+  _e as DFlowFolder,
+  Q as DFlowFolderGroup,
+  U 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;
+    flows: Flow[];
+    type: "group";
+}
+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,69 @@
+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 "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) => {
+  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?"
+      ] }),
+      /* @__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__ */ 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
+};

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

@@ -0,0 +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 {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    flowTypeId: FlowType['id'];
+}
+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/DFlowFolderItemPathInput.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextInputProps } from '../form';
+export interface DFlowFolderItemPathInputProps extends TextInputProps {
+}
+export declare const DFlowFolderItemPathInput: React.FC<DFlowFolderItemPathInputProps>;

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

@@ -0,0 +1,49 @@
+import { jsx as p } from "react/jsx-runtime";
+import { c as l } from "../../_virtual/compiler-runtime.js";
+import "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 { TextInput as c } from "../form/TextInput.js";
+import { Badge as h } from "../badge/Badge.js";
+const R = (e) => {
+  const r = l.c(4);
+  let t;
+  r[0] !== e ? ({
+    ...t
+  } = e, r[0] = e, r[1] = t) : t = r[1];
+  const o = a;
+  let n;
+  return r[2] !== t ? (n = /* @__PURE__ */ p(c, { transformSyntax: o, ...t }), r[2] = t, r[3] = n) : n = r[3], n;
+};
+function f(e) {
+  const r = [];
+  let t = "";
+  return e.split("").forEach((o) => o === "/" ? (t && r.push(t), t = "", r.push("/")) : (t = t + o, t)), t && r.push(t), r;
+}
+function a(e, r) {
+  const o = f(e ?? "");
+  let n = 0;
+  return o.map((m, i) => {
+    const s = {
+      type: o.length - 1 !== i ? "block" : "text",
+      start: n,
+      end: n + m.length,
+      visualLength: o.length - 1 !== i ? 1 : m.length,
+      content: o.length - 1 !== i ? /* @__PURE__ */ p(h, { color: m == "/" ? "warning" : "info", children: m }) : m
+    };
+    return n = n + m.length, [s];
+  }).flat();
+}
+export {
+  R as DFlowFolderItemPathInput
+};

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { DFlowFolderContextMenuGroupData, DFlowFolderContextMenuItemData } from './DFlowFolderContextMenu';
+import { DFlowFolderProps } from './DFlowFolder';
+export interface DFlowFolderRenameDialogProps extends DFlowFolderProps {
+    contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const DFlowFolderRenameDialog: React.FC<DFlowFolderRenameDialogProps>;