@code0-tech/pictor 0.0.0-mvp.2

package/dist/components/d-flow/suggestion/DFlowSuggestion.view.d.ts

@@ -0,0 +1,21 @@
+import { NodeParameterValue } from '@code0-tech/sagittarius-graphql-types';
+export declare enum DFlowSuggestionType {
+    REF_OBJECT = 0,
+    VALUE = 1,
+    FUNCTION = 2,
+    FUNCTION_COMBINATION = 3,
+    DATA_TYPE = 4
+}
+export declare class DFlowSuggestion {
+    private readonly _hash;
+    private readonly _path;
+    private readonly _value;
+    private readonly _type;
+    private readonly _displayText;
+    constructor(_hash: string, _path: number[], _value: NodeParameterValue, _type: DFlowSuggestionType, _displayText: string[]);
+    get displayText(): string[];
+    get hash(): string;
+    get path(): number[];
+    get value(): NodeParameterValue;
+    get type(): DFlowSuggestionType;
+}

package/dist/components/d-flow/suggestion/DFlowSuggestion.view.js

@@ -0,0 +1,25 @@
+var s = /* @__PURE__ */ ((t) => (t[t.REF_OBJECT = 0] = "REF_OBJECT", t[t.VALUE = 1] = "VALUE", t[t.FUNCTION = 2] = "FUNCTION", t[t.FUNCTION_COMBINATION = 3] = "FUNCTION_COMBINATION", t[t.DATA_TYPE = 4] = "DATA_TYPE", t))(s || {});
+class O {
+  constructor(h, r, _, a, N) {
+    this._hash = h, this._path = r, this._value = _, this._type = a, this._displayText = N;
+  }
+  get displayText() {
+    return this._displayText;
+  }
+  get hash() {
+    return this._hash;
+  }
+  get path() {
+    return this._path;
+  }
+  get value() {
+    return this._value;
+  }
+  get type() {
+    return this._type;
+  }
+}
+export {
+  O as DFlowSuggestion,
+  s as DFlowSuggestionType
+};

package/dist/components/d-flow/suggestion/DFlowSuggestionMenu.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { DFlowSuggestion } from './DFlowSuggestion.view';
+export interface DFlowSuggestionMenuProps {
+    triggerContent: React.ReactNode;
+    suggestions?: DFlowSuggestion[];
+    onSuggestionSelect?: (suggestion: DFlowSuggestion) => void;
+}
+export declare const DFlowSuggestionMenu: React.FC<DFlowSuggestionMenuProps>;

package/dist/components/d-flow/suggestion/DFlowSuggestionMenu.js

@@ -0,0 +1,67 @@
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { c as k } from "../../../compiler-runtime-BNHg76kC.js";
+import { MenuTrigger as B, MenuSeparator as b, MenuPortal as E, Menu as L } from "../../menu/Menu.js";
+import x from "react";
+import { DFlowSuggestionMenuFooter as O } from "./DFlowSuggestionMenuFooter.js";
+import { InputSuggestionMenuContentItems as P, InputSuggestionMenuContent as U } from "../../form/InputSuggestion.js";
+import { toInputSuggestions as $ } from "./DFlowSuggestionMenu.util.js";
+import { DFlowSuggestionMenuSearchBar as q } from "./DFlowSuggestionMenuSearchBar.js";
+import { useStoreApi as z } from "@xyflow/react";
+const Z = (F) => {
+  const e = k.c(25), {
+    suggestions: c,
+    triggerContent: h,
+    onSuggestionSelect: C
+  } = F;
+  let g;
+  e[0] !== c ? (g = c === void 0 ? [] : c, e[0] = c, e[1] = g) : g = e[1];
+  const m = g, M = C === void 0 ? G : C, D = z(), w = x.useRef(null), [y, T] = x.useState(m);
+  let s;
+  e[2] !== D ? (s = (t) => {
+    setTimeout(() => {
+      D.setState({
+        nodesDraggable: !t,
+        nodesConnectable: !t,
+        elementsSelectable: !t
+      });
+    }, 250);
+  }, e[2] = D, e[3] = s) : s = e[3];
+  let n;
+  e[4] !== h ? (n = /* @__PURE__ */ o(B, { asChild: !0, children: h }), e[4] = h, e[5] = n) : n = e[5];
+  let r;
+  e[6] !== m ? (r = /* @__PURE__ */ o(q, { onType: (t) => {
+    t.key === "ArrowDown" ? (t.preventDefault(), w.current?.focusFirstItem()) : t.key === "ArrowUp" && (t.preventDefault(), w.current?.focusLastItem());
+    const A = t.target.value;
+    return T(m.filter((R) => R.displayText.some((j) => j.includes(A)))), t.preventDefault(), !1;
+  } }), e[6] = m, e[7] = r) : r = e[7];
+  let a;
+  e[8] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ o(b, {}), e[8] = a) : a = e[8];
+  let i;
+  e[9] !== y ? (i = $(y), e[9] = y, e[10] = i) : i = e[10];
+  let l;
+  e[11] !== M ? (l = (t) => {
+    M(t.ref);
+  }, e[11] = M, e[12] = l) : l = e[12];
+  let u;
+  e[13] !== i || e[14] !== l ? (u = /* @__PURE__ */ o(P, { ref: w, suggestions: i, onSuggestionSelect: l }), e[13] = i, e[14] = l, e[15] = u) : u = e[15];
+  let p, S;
+  e[16] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ o(b, {}), S = /* @__PURE__ */ o(O, {}), e[16] = p, e[17] = S) : (p = e[16], S = e[17]);
+  let f;
+  e[18] !== r || e[19] !== u ? (f = /* @__PURE__ */ o(E, { children: /* @__PURE__ */ I(U, { children: [
+    r,
+    a,
+    u,
+    p,
+    S
+  ] }) }), e[18] = r, e[19] = u, e[20] = f) : f = e[20];
+  let d;
+  return e[21] !== f || e[22] !== s || e[23] !== n ? (d = /* @__PURE__ */ I(L, { onOpenChange: s, children: [
+    n,
+    f
+  ] }), e[21] = f, e[22] = s, e[23] = n, e[24] = d) : d = e[24], d;
+};
+function G() {
+}
+export {
+  Z as DFlowSuggestionMenu
+};

package/dist/components/d-flow/suggestion/DFlowSuggestionMenu.util.d.ts

@@ -0,0 +1,3 @@
+import { DFlowSuggestion } from './DFlowSuggestion.view';
+import { InputSuggestion } from '../../form/InputSuggestion';
+export declare const toInputSuggestions: (suggestions: DFlowSuggestion[]) => InputSuggestion[];

package/dist/components/d-flow/suggestion/DFlowSuggestionMenu.util.js

@@ -0,0 +1,42 @@
+import { jsx as o, jsxs as T, Fragment as d } from "react/jsx-runtime";
+import { DFlowSuggestionType as e } from "./DFlowSuggestion.view.js";
+import { IconCircleDot as c, IconCirclesRelation as I, IconFileFunctionFilled as p } from "@tabler/icons-react";
+import { Text as N } from "../../text/Text.js";
+const O = (a) => {
+  const f = {
+    [e.VALUE]: "Values",
+    [e.REF_OBJECT]: "Variables",
+    [e.DATA_TYPE]: "Datatypes"
+  };
+  return a.map((i) => {
+    const m = {
+      [e.FUNCTION]: /* @__PURE__ */ o(p, { color: "#70ffb2", size: 16 }),
+      [e.FUNCTION_COMBINATION]: /* @__PURE__ */ o(p, { color: "#70ffb2", size: 16 }),
+      [e.REF_OBJECT]: /* @__PURE__ */ o(I, { color: "#FFBE0B", size: 16 }),
+      [e.VALUE]: /* @__PURE__ */ o(c, { color: "#D90429", size: 16 }),
+      [e.DATA_TYPE]: /* @__PURE__ */ o(c, { color: "#D90429", size: 16 })
+    }, F = /* @__PURE__ */ T(d, { children: [
+      m[i.type],
+      /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(N, { display: "flex", style: {
+        gap: ".5rem"
+      }, children: i.displayText.map((t, r) => /* @__PURE__ */ o("span", { children: t }, r)) }) })
+    ] });
+    let n = f[i.type];
+    if (i.type === e.FUNCTION || i.type === e.FUNCTION_COMBINATION) {
+      const t = i.value.__typename === "NodeFunction" ? i.value.functionDefinition?.runtimeFunctionDefinition?.identifier : void 0;
+      if (t) {
+        const [r, l] = t.split("::");
+        r && l && (n = `${r}::${l}`);
+      }
+    }
+    return {
+      children: F,
+      ref: i,
+      value: i.value,
+      groupLabel: n
+    };
+  });
+};
+export {
+  O as toInputSuggestions
+};

package/dist/components/d-flow/suggestion/DFlowSuggestionMenuFooter.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const DFlowSuggestionMenuFooter: React.FC;

package/dist/components/d-flow/suggestion/DFlowSuggestionMenuFooter.js

@@ -0,0 +1,69 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { c as y } from "../../../compiler-runtime-BNHg76kC.js";
+import { MenuLabel as p } from "../../menu/Menu.js";
+import { IconCornerDownLeft as d, IconBulb as g, IconFileFunctionFilled as _, IconArrowsShuffle as b, IconCirclesRelation as u, IconCircleDot as x } from "@tabler/icons-react";
+import { Text as f } from "../../text/Text.js";
+import { Flex as i } from "../../flex/Flex.js";
+import { TooltipTrigger as F, Tooltip as I, TooltipPortal as z, TooltipContent as S } from "../../tooltip/Tooltip.js";
+const O = () => {
+  const e = y.c(8);
+  let l;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (l = {
+    gap: ".35rem"
+  }, e[0] = l) : l = e[0];
+  let o;
+  e[1] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ t(i, { align: "center", style: l, children: [
+    "Press ",
+    /* @__PURE__ */ r(d, { size: 12 }),
+    " to insert"
+  ] }), e[1] = o) : o = e[1];
+  let c;
+  e[2] === Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ r(F, { asChild: !0, children: /* @__PURE__ */ r(g, { size: 12 }) }), e[2] = c) : c = e[2];
+  let n;
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (n = {
+    flexDirection: "column",
+    gap: ".35rem"
+  }, e[3] = n) : n = e[3];
+  let s;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ t(i, { align: "center", style: {
+    gap: ".35rem"
+  }, children: [
+    /* @__PURE__ */ r(_, { color: "#70ffb2", size: 16 }),
+    /* @__PURE__ */ r(f, { hierarchy: "tertiary", size: "xs", children: "FUNCTION" })
+  ] }), e[4] = s) : s = e[4];
+  let m;
+  e[5] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ t(i, { align: "center", style: {
+    gap: ".35rem"
+  }, children: [
+    /* @__PURE__ */ r(b, { color: "#29BF12", size: 16 }),
+    /* @__PURE__ */ r(f, { hierarchy: "tertiary", size: "xs", children: "FUNCTION COMBINATION" })
+  ] }), e[5] = m) : m = e[5];
+  let a;
+  e[6] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ t(i, { align: "center", style: {
+    gap: ".35rem"
+  }, children: [
+    /* @__PURE__ */ r(u, { color: "#FFBE0B", size: 16 }),
+    /* @__PURE__ */ r(f, { hierarchy: "tertiary", size: "xs", children: "VARIABLE" })
+  ] }), e[6] = a) : a = e[6];
+  let h;
+  return e[7] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ r(p, { children: /* @__PURE__ */ t(i, { w: "100%", justify: "space-between", children: [
+    o,
+    /* @__PURE__ */ r(i, { ml: 1, align: "center", justify: "center", children: /* @__PURE__ */ t(I, { children: [
+      c,
+      /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(S, { align: "center", side: "right", sideOffset: 8, children: /* @__PURE__ */ t(i, { pt: 0.35, pb: 0.35, style: n, children: [
+        s,
+        m,
+        a,
+        /* @__PURE__ */ t(i, { align: "center", style: {
+          gap: ".35rem"
+        }, children: [
+          /* @__PURE__ */ r(x, { color: "#D90429", size: 16 }),
+          /* @__PURE__ */ r(f, { hierarchy: "tertiary", size: "xs", children: "VALUE" })
+        ] })
+      ] }) }) })
+    ] }) })
+  ] }) }), e[7] = h) : h = e[7], h;
+};
+export {
+  O as DFlowSuggestionMenuFooter
+};

package/dist/components/d-flow/suggestion/DFlowSuggestionMenuSearchBar.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Code0Component } from '../../../utils/types';
+export interface DFlowSuggestionMenuSearchBarProps extends Code0Component<HTMLDivElement> {
+    onType: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare const DFlowSuggestionMenuSearchBar: React.FC<DFlowSuggestionMenuSearchBarProps>;

package/dist/components/d-flow/suggestion/DFlowSuggestionMenuSearchBar.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as m } from "../../../compiler-runtime-BNHg76kC.js";
+import { DFlowSuggestionSearchInput as i } from "./DFlowSuggestionSearchInput.js";
+import { IconSearch as s } from "@tabler/icons-react";
+const p = (c) => {
+  const e = m.c(6);
+  let o;
+  e[0] !== c ? (o = (a) => c.onType(a), e[0] = c, e[1] = o) : o = e[1];
+  let t;
+  e[2] === Symbol.for("react.memo_cache_sentinel") ? (t = {
+    background: "none",
+    boxShadow: "none"
+  }, e[2] = t) : t = e[2];
+  let r;
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ n(s, { size: 12 }), e[3] = r) : r = e[3];
+  let l;
+  return e[4] !== o ? (l = /* @__PURE__ */ n(i, { placeholder: "Search...", onKeyUp: o, clearable: !0, style: t, autoFocus: !0, left: r }), e[4] = o, e[5] = l) : l = e[5], l;
+};
+export {
+  p as DFlowSuggestionMenuSearchBar
+};

package/dist/components/d-flow/suggestion/DFlowSuggestionSearchInput.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from '../../form/Input';
+import { default as React } from 'react';
+interface DFlowSuggestionSearchInputProps extends Omit<InputProps<string | null>, "wrapperComponent" | "type"> {
+    clearable?: boolean;
+}
+export declare const DFlowSuggestionSearchInput: React.ForwardRefExoticComponent<DFlowSuggestionSearchInputProps>;
+export {};

package/dist/components/d-flow/suggestion/DFlowSuggestionSearchInput.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Input as l, setElementKey as p } from "../../form/Input.js";
+import r from "react";
+import { Button as m } from "../../button/Button.js";
+import { IconX as u } from "@tabler/icons-react";
+import '../../../assets/DFlowSuggestionSearchInput.css';const x = r.forwardRef((n, t) => {
+  t = t || r.useRef(null);
+  const {
+    clearable: i = !1,
+    right: s,
+    ...a
+  } = n, c = () => {
+    t.current && p(t.current, "value", "", "change");
+  }, o = [s];
+  return i && o.push(/* @__PURE__ */ e(m, { variant: "none", onClick: c, children: /* @__PURE__ */ e(u, { size: 13 }) })), /* @__PURE__ */ e(l, { wrapperComponent: {
+    className: "d-flow-suggestion-search-input"
+  }, right: o, type: "text", ref: t, ...a });
+});
+export {
+  x as DFlowSuggestionSearchInput
+};

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

@@ -0,0 +1,2 @@
+export * from './DFlowSuggestion.service';
+export * from './DFlowSuggestion.view';

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

@@ -0,0 +1,7 @@
+import { DFlowReactiveSuggestionService as g } from "./DFlowSuggestion.service.js";
+import { DFlowSuggestion as i, DFlowSuggestionType as r } from "./DFlowSuggestion.view.js";
+export {
+  g as DFlowReactiveSuggestionService,
+  i as DFlowSuggestion,
+  r as DFlowSuggestionType
+};

package/dist/components/d-flow/tab/DFlowTabDefault.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { NodeFunctionView } from '../DFlow.view';
+import { Scalars } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowTabDefaultProps {
+    functionInstance: NodeFunctionView;
+    flowId: Scalars["FlowID"]["output"];
+    depthLevel?: number;
+    scopeLevel?: number[];
+    nodeLevel?: number;
+}
+export declare const DFlowTabDefault: React.FC<DFlowTabDefaultProps>;

package/dist/components/d-flow/tab/DFlowTabDefault.js

@@ -0,0 +1,97 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import m from "react";
+import { NodeFunctionView as w } from "../DFlow.view.js";
+import { TextInput as R } from "../../form/TextInput.js";
+import { Flex as b } from "../../flex/Flex.js";
+import { useService as p } from "../../../utils/contextStore.js";
+import { DFlowFunctionReactiveService as L } from "../function/DFlowFunction.service.js";
+import { useSuggestions as j } from "../suggestion/DFlowSuggestion.hook.js";
+import { DFlowSuggestionMenuFooter as x } from "../suggestion/DFlowSuggestionMenuFooter.js";
+import { toInputSuggestions as B } from "../suggestion/DFlowSuggestionMenu.util.js";
+import { DFlowReactiveService as T } from "../DFlow.service.js";
+import { Badge as g } from "../../badge/Badge.js";
+const Q = (v) => {
+  const {
+    functionInstance: s,
+    flowId: y,
+    depthLevel: S,
+    scopeLevel: V,
+    nodeLevel: N
+  } = v, a = p(L), D = p(T), u = a.getById(s.functionDefinition?.id), c = m.useMemo(() => {
+    const e = {};
+    return u?.parameterDefinitions?.forEach((o) => {
+      e[o.id] = o;
+    }), e;
+  }, [u?.parameterDefinitions]), l = m.useMemo(() => [...s.parameters || []].sort((e, o) => e.id.localeCompare(o.id)), [s.parameters]), f = {};
+  return l.forEach((e) => {
+    const o = c[e.id];
+    f[e.id] = j(o?.dataTypeIdentifier, [], y, S, V, N);
+  }), /* @__PURE__ */ r(b, { style: {
+    gap: ".7rem",
+    flexDirection: "column"
+  }, children: l.map((e) => {
+    const o = (t) => {
+      e.value = t, D.update();
+    }, d = (t) => {
+      try {
+        const n = JSON.parse(t.target.value);
+        if (!n.__typename) {
+          o(n ? {
+            __typename: "LiteralValue",
+            value: n
+          } : void 0);
+          return;
+        }
+        o(n.__typename === "LiteralValue" ? n.value ? n : void 0 : n);
+      } catch {
+        o(t.target.value == "" || !t.target.value ? void 0 : {
+          __typename: "LiteralValue",
+          value: t.target.value
+        });
+      }
+    }, i = c[e.id], O = f[e.id], h = i?.names ? i?.names?.nodes[0]?.content : i?.id, F = i?.descriptions ? i?.descriptions?.nodes[0]?.content : JSON.stringify(i?.dataTypeIdentifier), J = e.value instanceof w ? JSON.stringify({
+      ...e.value.json(),
+      __typename: "NodeFunction"
+    }) : e.value?.__typename === "ReferenceValue" ? JSON.stringify(e.value) : e.value?.__typename === "LiteralValue" ? typeof e.value?.value == "object" ? JSON.stringify(e.value?.value) : e.value.value : "";
+    return /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(R, { title: h, description: F, clearable: !0, transformValue: (t) => {
+      try {
+        if (!t) return t;
+        if (JSON.parse(t).__typename === "NodeFunction") {
+          const n = a.getById(JSON.parse(t).functionDefinition?.id);
+          return /* @__PURE__ */ r(g, { color: "info", children: n?.names?.nodes[0]?.content });
+        }
+        if (JSON.parse(t).__typename === "ReferenceValue") {
+          const n = JSON.parse(t);
+          return /* @__PURE__ */ I(g, { color: "warning", children: [
+            n.depth,
+            "-",
+            n.scope,
+            "-",
+            n.node,
+            "-",
+            JSON.stringify(n.dataTypeIdentifier)
+          ] });
+        }
+      } catch {
+      }
+      return t;
+    }, disableOnValue: (t) => {
+      if (!t) return !1;
+      try {
+        return t.__typename === "NodeFunction" || t.__typename === "ReferenceValue";
+      } catch {
+      }
+      return !1;
+    }, defaultValue: J, onSuggestionSelect: (t) => {
+      o(t.value);
+    }, formValidation: {
+      setValue: () => {
+      },
+      valid: e.validationResults.length <= 0,
+      notValidMessage: e.validationResults.map((t) => t.message.nodes[0]?.content).join(", ")
+    }, onBlur: d, onClear: d, suggestionsFooter: /* @__PURE__ */ r(x, {}), suggestions: B(O) }, JSON.stringify(e.value)) });
+  }) });
+};
+export {
+  Q as DFlowTabDefault
+};

package/dist/components/d-flow/tab/DFlowTabTrigger.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { FlowView } from '../DFlow.view';
+export interface DFlowTabTriggerProps {
+    instance: FlowView;
+}
+export declare const DFlowTabTrigger: React.FC<DFlowTabTriggerProps>;

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

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

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const DFlowTabs: () => React.JSX.Element;

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

@@ -0,0 +1,105 @@
+import { jsx as l, jsxs as S, Fragment as z } from "react/jsx-runtime";
+import { c as B } from "../../../compiler-runtime-BNHg76kC.js";
+import { useService as E, useStore as O } from "../../../utils/contextStore.js";
+import { FileTabsService as x } from "../../file-tabs/FileTabs.service.js";
+import { FileTabsContent as V, FileTabsTrigger as P, FileTabsList as G, FileTabs as H } from "../../file-tabs/FileTabs.js";
+import $ from "react";
+import { MenuTrigger as q, MenuItem as y, Menu as A, MenuPortal as D, MenuContent as W, MenuSeparator as J } from "../../menu/Menu.js";
+import { Button as j } from "../../button/Button.js";
+import { IconChevronDown as K, IconDotsVertical as N } from "@tabler/icons-react";
+const ne = () => {
+  const e = B.c(53), t = E(x), r = O(x), n = $.useId();
+  let F;
+  e[0] !== t || e[1] !== r ? (F = r.find(Q)?.id ?? t.getActiveTab()?.id, e[0] = t, e[1] = r, e[2] = F) : F = e[2];
+  const s = F;
+  let M;
+  e[3] !== t || e[4] !== n ? (M = () => {
+    setTimeout(() => {
+      const i = document.querySelector('[data-id="' + n + '"]').querySelector(".file-tabs__list-content"), T = i.querySelector('[data-value="' + t.getActiveTab()?.id + '"]');
+      if (i && T) {
+        const w = T.offsetLeft + T.offsetWidth / 2 - i.offsetWidth / 2;
+        i.scrollLeft = 0, i.scrollBy({
+          left: w,
+          behavior: "smooth"
+        });
+      }
+    }, 0);
+  }, e[3] = t, e[4] = n, e[5] = M) : M = e[5];
+  let k;
+  e[6] !== s || e[7] !== n ? (k = [s, n], e[6] = s, e[7] = n, e[8] = k) : k = e[8], $.useEffect(M, k);
+  let c;
+  e[9] !== t ? (c = (o) => {
+    t.activateTab(o);
+  }, e[9] = t, e[10] = c) : c = e[10];
+  let I;
+  e[11] === Symbol.for("react.memo_cache_sentinel") ? (I = /* @__PURE__ */ l(q, { asChild: !0, children: /* @__PURE__ */ l(j, { variant: "none", color: "primary", style: {
+    aspectRatio: "1/1"
+  }, children: /* @__PURE__ */ l(K, { size: 12 }) }) }), e[11] = I) : I = e[11];
+  let a;
+  if (e[12] !== t || e[13] !== r) {
+    let o;
+    e[15] !== t ? (o = (i) => /* @__PURE__ */ l(y, { onClick: () => {
+      t.activateTab(i.id);
+    }, children: i.children }, `menu-${i.id}`), e[15] = t, e[16] = o) : o = e[16], a = r.map(o), e[12] = t, e[13] = r, e[14] = a;
+  } else
+    a = e[14];
+  let f;
+  e[17] !== a ? (f = /* @__PURE__ */ S(A, { children: [
+    I,
+    /* @__PURE__ */ l(D, { children: /* @__PURE__ */ l(W, { align: "end", sideOffset: 8, children: a }) })
+  ] }), e[17] = a, e[18] = f) : f = e[18];
+  let L;
+  e[19] === Symbol.for("react.memo_cache_sentinel") ? (L = /* @__PURE__ */ l(q, { asChild: !0, children: /* @__PURE__ */ l(j, { variant: "none", color: "primary", style: {
+    aspectRatio: "1/1"
+  }, children: /* @__PURE__ */ l(N, { size: 12 }) }) }), e[19] = L) : L = e[19];
+  let d;
+  e[20] !== t ? (d = /* @__PURE__ */ l(y, { onClick: () => t.clear(), children: "Close all tabs" }), e[20] = t, e[21] = d) : d = e[21];
+  let m;
+  e[22] !== t ? (m = /* @__PURE__ */ l(y, { onClick: () => t.clearWithoutActive(), children: "Close other tabs" }), e[22] = t, e[23] = m) : m = e[23];
+  let R;
+  e[24] === Symbol.for("react.memo_cache_sentinel") ? (R = /* @__PURE__ */ l(J, {}), e[24] = R) : R = e[24];
+  let h;
+  e[25] !== t ? (h = /* @__PURE__ */ l(y, { onClick: () => t.clearLeft(), children: "Close all tabs to left" }), e[25] = t, e[26] = h) : h = e[26];
+  let u;
+  e[27] !== t ? (u = /* @__PURE__ */ l(y, { onClick: () => t.clearRight(), children: "Close all tabs to right" }), e[27] = t, e[28] = u) : u = e[28];
+  let p;
+  e[29] !== h || e[30] !== u || e[31] !== d || e[32] !== m ? (p = /* @__PURE__ */ S(A, { children: [
+    L,
+    /* @__PURE__ */ l(D, { children: /* @__PURE__ */ S(W, { align: "end", sideOffset: 8, children: [
+      d,
+      m,
+      R,
+      h,
+      u
+    ] }) })
+  ] }), e[29] = h, e[30] = u, e[31] = d, e[32] = m, e[33] = p) : p = e[33];
+  let b;
+  e[34] !== p || e[35] !== f ? (b = /* @__PURE__ */ S(z, { children: [
+    f,
+    p
+  ] }), e[34] = p, e[35] = f, e[36] = b) : b = e[36];
+  let v;
+  if (e[37] !== t || e[38] !== r) {
+    let o;
+    e[40] !== t ? (o = (i, T) => /* @__PURE__ */ l(P, { closable: i.closeable, value: i.id, onClose: () => t.delete(T), children: i.children }, `trigger-${i.id}`), e[40] = t, e[41] = o) : o = e[41], v = r.map(o), e[37] = t, e[38] = r, e[39] = v;
+  } else
+    v = e[39];
+  let g;
+  e[42] !== b || e[43] !== v ? (g = /* @__PURE__ */ l(G, { controls: b, children: v }), e[42] = b, e[43] = v, e[44] = g) : g = e[44];
+  let C;
+  e[45] !== r ? (C = r.map(U), e[45] = r, e[46] = C) : C = e[46];
+  let _;
+  return e[47] !== s || e[48] !== n || e[49] !== g || e[50] !== C || e[51] !== c ? (_ = /* @__PURE__ */ S(H, { "data-id": n, value: s, onValueChange: c, children: [
+    g,
+    C
+  ] }), e[47] = s, e[48] = n, e[49] = g, e[50] = C, e[51] = c, e[52] = _) : _ = e[52], _;
+};
+function Q(e) {
+  return e.active;
+}
+function U(e) {
+  return /* @__PURE__ */ l(V, { value: e.id, children: e.content }, `content-${e.id}`);
+}
+export {
+  ne as DFlowTabs
+};

package/dist/components/d-flow/type/DFlowType.service.d.ts

@@ -0,0 +1,6 @@
+import { ReactiveArrayService } from '../../../utils/reactiveArrayService';
+import { FlowTypeView } from './DFlowType.view';
+import { FlowType } from '@code0-tech/sagittarius-graphql-types';
+export declare abstract class DFlowTypeReactiveService extends ReactiveArrayService<FlowTypeView> {
+    getById(id: FlowType['id']): FlowTypeView | undefined;
+}

package/dist/components/d-flow/type/DFlowType.service.js

@@ -0,0 +1,9 @@
+import { ReactiveArrayService as i } from "../../../utils/reactiveArrayService.js";
+class c extends i {
+  getById(e) {
+    return this.values().find((r) => r.id === e);
+  }
+}
+export {
+  c as DFlowTypeReactiveService
+};

package/dist/components/d-flow/type/DFlowType.view.d.ts

@@ -0,0 +1,35 @@
+import { DataType, FlowType, FlowTypeSetting, Maybe, Scalars, TranslationConnection } from '@code0-tech/sagittarius-graphql-types';
+export declare class FlowTypeView {
+    /** Time when this FlowType was created */
+    private readonly _createdAt?;
+    /** Descriptions of the flow type */
+    private readonly _descriptions?;
+    /** Editable status of the flow type */
+    private readonly _editable?;
+    /** Flow type settings of the flow type */
+    private readonly _flowTypeSettings?;
+    /** Global ID of this FlowType */
+    private readonly _id?;
+    /** Identifier of the flow type */
+    private readonly _identifier?;
+    /** Input type of the flow type */
+    private readonly _inputType?;
+    /** Names of the flow type */
+    private readonly _names?;
+    /** Return type of the flow type */
+    private readonly _returnType?;
+    /** Time when this FlowType was last updated */
+    private readonly _updatedAt?;
+    constructor(flowType: FlowType);
+    get createdAt(): Maybe<Scalars["Time"]["output"]> | undefined;
+    get descriptions(): Maybe<TranslationConnection> | undefined;
+    get editable(): Maybe<Scalars["Boolean"]["output"]> | undefined;
+    get flowTypeSettings(): Maybe<Array<FlowTypeSetting>> | undefined;
+    get id(): Maybe<Scalars["TypesFlowTypeID"]["output"]> | undefined;
+    get identifier(): Maybe<Scalars["String"]["output"]> | undefined;
+    get inputType(): Maybe<DataType> | undefined;
+    get names(): Maybe<TranslationConnection> | undefined;
+    get returnType(): Maybe<DataType> | undefined;
+    get updatedAt(): Maybe<Scalars["Time"]["output"]> | undefined;
+    json(): FlowType;
+}