@code0-tech/pictor 0.0.0-mvp.44 → 0.0.0-mvp.46

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

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

package/dist/components/d-flow-input/DFlowInput.d.ts

@@ -0,0 +1,11 @@
+import { Flow, NodeFunction, NodeParameter } from '@code0-tech/sagittarius-graphql-types';
+import { default as React } from 'react';
+import { InputProps } from '../form';
+export interface DFlowInputProps extends Omit<InputProps<any | null>, "wrapperComponent" | "type"> {
+    flowId: Flow['id'];
+    nodeId: NodeFunction['id'];
+    parameterId: NodeParameter['id'];
+    clearable?: boolean;
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const DFlowInput: React.FC<DFlowInputProps>;

package/dist/components/d-flow-input/DFlowInput.js

@@ -0,0 +1,29 @@
+import { jsx as d } from "react/jsx-runtime";
+import e from "react";
+import { DFlowInputDefault as R } from "./DFlowInputDefault.js";
+import { useService as a, useStore as c } from "../../utils/contextStore.js";
+import "merge-props";
+import "js-md5";
+import "../d-flow/DFlow.js";
+import { DFlowReactiveService as u } from "../d-flow/DFlow.service.js";
+import { DFlowFunctionReactiveService as D } from "../d-flow-function/DFlowFunction.service.js";
+import { DFlowDataTypeReactiveService as l } from "../d-flow-data-type/DFlowDataType.service.js";
+import { DFlowInputObject as M } from "./DFlowInputObject.js";
+const Y = (v) => {
+  const {
+    flowId: t,
+    nodeId: o,
+    parameterId: i,
+    ...m
+  } = v, S = a(u), w = c(u), y = a(l), I = c(l), T = a(D), F = c(D), r = e.useMemo(() => S.getNodeById(t, o), [w, t, o]), p = e.useMemo(() => r?.parameters?.nodes?.find((n) => n?.id === i), [r, i]), s = e.useMemo(() => T.getById(r?.functionDefinition?.id), [F, r]), f = e.useMemo(() => s?.parameterDefinitions?.find((n) => n.id === p?.parameterDefinition?.id), [s, p]);
+  switch (e.useMemo(() => y.getDataType(f?.dataTypeIdentifier), [I, f])?.variant) {
+    case "ARRAY":
+    case "OBJECT":
+      return /* @__PURE__ */ d(M, { flowId: t, nodeId: o, parameterId: i, ...m });
+    default:
+      return /* @__PURE__ */ d(R, { flowId: t, nodeId: o, parameterId: i, ...m });
+  }
+};
+export {
+  Y as DFlowInput
+};

package/dist/components/d-flow-input/DFlowInputDefault.d.ts

@@ -1,10 +1,5 @@
 import { default as React } from 'react';
-import { TextInputProps } from '../form';
-import { Flow, NodeFunction, NodeParameter } from '@code0-tech/sagittarius-graphql-types';
-export interface DFlowInputDefaultProps extends TextInputProps {
-    flowId: Flow['id'];
-    nodeId: NodeFunction['id'];
-    parameterId: NodeParameter['id'];
-}
+import { DFlowInputProps } from './DFlowInput';
+export type DFlowInputDefaultProps = DFlowInputProps;
 export declare const splitTextAndObjects: (input: string) => (string | Record<string, any>)[];
 export declare const DFlowInputDefault: React.FC<DFlowInputDefaultProps>;

package/dist/components/d-flow-input/DFlowInputNodeBadge.js

@@ -1,13 +1,13 @@
 import { jsxs as B, jsx as i } from "react/jsx-runtime";
 import { Badge as T } from "../badge/Badge.js";
-import p from "react";
-import { IconBolt as N, IconNote as h } from "@tabler/icons-react";
-import { Text as x } from "../text/Text.js";
+import s from "react";
+import { IconBolt as h, IconNote as x } from "@tabler/icons-react";
+import { Text as D } from "../text/Text.js";
 import { useService as n, useStore as m } from "../../utils/contextStore.js";
 import "merge-props";
 import "js-md5";
 import { DFlowFunctionReactiveService as f } from "../d-flow-function/DFlowFunction.service.js";
-import { hashToColor as D } from "../d-flow/DFlow.util.js";
+import { hashToColor as N } from "../d-flow/DFlow.util.js";
 import "../d-flow/DFlow.js";
 import { DFlowReactiveService as d } from "../d-flow/DFlow.service.js";
 import "../d-flow-data-type/rules/DFlowDataTypeRegexRule.js";
@@ -25,21 +25,21 @@ const X = (a) => {
     flowId: c,
     definition: o,
     ...u
-  } = a, w = o || n(f), y = o || m(f), s = o || n(d), g = o || m(d), v = o || n(l), S = o || m(l), t = e.__typename === "NodeFunctionIdWrapper" && e.id === "gid://sagittarius/NodeFunction/-1", r = p.useMemo(() => {
+  } = a, w = o || n(f), y = o || m(f), p = o || n(d), v = o || m(d), S = o || n(l), g = o || m(l), t = e.__typename === "NodeFunctionIdWrapper" && !e.id, r = s.useMemo(() => {
     if (t && !o) {
-      const I = s.getById(c);
-      return v.getById(I?.type?.id);
+      const F = p.getById(c);
+      return S.getById(F?.type?.id);
     }
-    return e.__typename === "NodeFunction" || o ? e : s.getNodeById(c, e.id);
-  }, [g, S]), F = p.useMemo(() => o ? o.names?.[0]?.content : t && r instanceof R ? r.names?.[0]?.content : w.getById(r?.functionDefinition?.id)?.names?.[0]?.content, [y, r]);
+    return e.__typename === "NodeFunction" || o ? e : p.getNodeById(c, e.id);
+  }, [v, g]), I = s.useMemo(() => o ? o.names?.[0]?.content : t && r instanceof R ? r.names?.[0]?.content : w.getById(r?.functionDefinition?.id)?.names?.[0]?.content, [y, r]);
   return /* @__PURE__ */ B(T, { style: {
     verticalAlign: "middle",
     textWrap: "nowrap"
-  }, color: t ? "info" : D(e.id || ""), border: !0, ...u, children: [
-    t ? /* @__PURE__ */ i(N, { size: 12 }) : /* @__PURE__ */ i(h, { size: 12 }),
-    /* @__PURE__ */ i(x, { size: "sm", style: {
+  }, color: t ? "info" : N(e.id || ""), border: !0, ...u, children: [
+    t ? /* @__PURE__ */ i(h, { size: 12 }) : /* @__PURE__ */ i(x, { size: 12 }),
+    /* @__PURE__ */ i(D, { size: "sm", style: {
       color: "inherit"
-    }, children: String(F) })
+    }, children: String(I) })
   ] });
 };
 export {

package/dist/components/d-flow-input/DFlowInputObject.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { DFlowInputProps } from './DFlowInput';
+import { LiteralValue } from '@code0-tech/sagittarius-graphql-types';
+export interface EditableObjectEntry {
+    key: string;
+    value: LiteralValue | null;
+    path: string[];
+}
+export type DFlowInputObjectProps = DFlowInputProps;
+export declare const DFlowInputObject: React.FC<DFlowInputObjectProps>;

package/dist/components/d-flow-input/DFlowInputObject.js

@@ -0,0 +1,83 @@
+import { jsxs as m, Fragment as H, jsx as e } from "react/jsx-runtime";
+import o from "react";
+import { Card as h } from "../card/Card.js";
+import { Flex as F } from "../flex/Flex.js";
+import { Text as J } from "../text/Text.js";
+import { Button as f } from "../button/Button.js";
+import { IconAlignLeft as K, IconEdit as P, IconX as Q } from "@tabler/icons-react";
+import U from "./DFlowInputObjectEditDialog.js";
+import '../../assets/components/form/Input.style.css';import '../../assets/components/d-flow-input/DFlowInputDataType.style.css';/* empty css                              */
+import { ButtonGroup as Y } from "../button-group/ButtonGroup.js";
+import { DFlowInputObjectTree as Z } from "./DFlowInputObjectTree.js";
+import { useService as g, useStore as S } from "../../utils/contextStore.js";
+import "merge-props";
+import "js-md5";
+import "../d-flow/DFlow.js";
+import { DFlowReactiveService as w } from "../d-flow/DFlow.service.js";
+import { DFlowFunctionReactiveService as x } from "../d-flow-function/DFlowFunction.service.js";
+import { DFlowDataTypeReactiveService as C } from "../d-flow-data-type/DFlowDataType.service.js";
+import { DFlowSuggestionMenu as $ } from "../d-flow-suggestion/DFlowSuggestionMenu.js";
+import { useSuggestions as ee } from "../d-flow-suggestion/DFlowSuggestion.hook.js";
+import "../../_virtual/compiler-runtime.js";
+import "@radix-ui/react-checkbox";
+import { InputLabel as te } from "../form/InputLabel.js";
+import { InputDescription as oe } from "../form/InputDescription.js";
+import { InputMessage as ie } from "../form/InputMessage.js";
+/* 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 { DFlowInputNodeBadge as re } from "./DFlowInputNodeBadge.js";
+import { DFlowInputReferenceBadge as ne } from "./DFlowInputReferenceBadge.js";
+const Xe = (V) => {
+  const {
+    flowId: n,
+    nodeId: s,
+    parameterId: d,
+    title: b,
+    description: j,
+    formValidation: a,
+    onChange: _
+  } = V, E = g(w), M = S(w), y = g(C), v = S(C), T = g(x), z = S(x), l = o.useMemo(() => E.getNodeById(n, s), [M, n, s]), r = o.useMemo(() => l?.parameters?.nodes?.find((t) => t?.id === d), [l, d]), D = o.useMemo(() => T.getById(l?.functionDefinition?.id), [z, l]), c = o.useMemo(() => D?.parameterDefinitions?.find((t) => t.id === r?.parameterDefinition?.id), [D, r]), O = o.useMemo(() => !r?.value || r?.value?.__typename === "LiteralValue" && r.value.value == null ? y.getValueFromType(c?.dataTypeIdentifier) : r?.value, [r, c, v]), R = ee(n, s, d), [i, u] = o.useState(O), [I, p] = o.useState(!1), [k, B] = o.useState(null), [L, N] = o.useState({}), A = (t, X) => {
+    N((q) => ({
+      ...q,
+      [t.join(".")]: X
+    }));
+  }, G = (t) => {
+    B(t), p(!0);
+  }, W = o.useCallback(() => {
+    u(y.getValueFromType(c?.dataTypeIdentifier));
+  }, [r, c, v]);
+  return o.useEffect(() => {
+    a?.setValue(i), _?.();
+  }, [i]), /* @__PURE__ */ m(H, { children: [
+    i?.__typename === "LiteralValue" && /* @__PURE__ */ e(U, { open: I, entry: k, value: i, onOpenChange: (t) => p(t), onObjectChange: (t) => u(t ?? void 0) }, String(I)),
+    /* @__PURE__ */ e(te, { children: b }),
+    /* @__PURE__ */ e(oe, { children: j }),
+    /* @__PURE__ */ m(h, { color: "secondary", paddingSize: "xs", children: [
+      /* @__PURE__ */ m(F, { style: {
+        gap: ".7rem"
+      }, align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ e(F, { style: {
+          gap: ".35rem"
+        }, align: "center", children: /* @__PURE__ */ e(J, { children: "Object" }) }),
+        /* @__PURE__ */ m(Y, { color: "primary", children: [
+          /* @__PURE__ */ e($, { suggestions: R, onSuggestionSelect: (t) => u(t.value), triggerContent: /* @__PURE__ */ e(f, { paddingSize: "xxs", variant: "filled", color: "secondary", onClick: () => p(!0), children: /* @__PURE__ */ e(K, { size: 13 }) }) }),
+          /* @__PURE__ */ e(f, { paddingSize: "xxs", variant: "filled", color: "secondary", onClick: () => p(!0), children: /* @__PURE__ */ e(P, { size: 13 }) }),
+          /* @__PURE__ */ e(f, { paddingSize: "xxs", variant: "filled", color: "secondary", onClick: W, children: /* @__PURE__ */ e(Q, { size: 13 }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(h, { paddingSize: "xs", mt: 0.7, mb: -0.55, mx: -0.55, children: i?.__typename === "NodeFunction" || i?.__typename === "NodeFunctionIdWrapper" ? /* @__PURE__ */ e(re, { value: i, flowId: n }) : i?.__typename === "ReferenceValue" ? /* @__PURE__ */ e(ne, { value: i, flowId: n }) : /* @__PURE__ */ e(Z, { object: i, onEntryClick: G, collapsedState: L, setCollapsedState: A }) })
+    ] }),
+    !a?.valid && a?.notValidMessage && /* @__PURE__ */ e(ie, { children: a.notValidMessage })
+  ] });
+};
+export {
+  Xe as DFlowInputObject
+};

package/dist/components/d-flow-input/DFlowInputObjectEditDialog.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { LiteralValue } from '@code0-tech/sagittarius-graphql-types';
+export interface EditableObjectEntry {
+    key: string;
+    value: LiteralValue | null;
+    path: string[];
+}
+export interface DFlowInputObjectEditDialogProps {
+    open: boolean;
+    entry: EditableObjectEntry | null;
+    value: LiteralValue | null;
+    onOpenChange?: (open: boolean) => void;
+    onObjectChange?: (object: LiteralValue | null) => void;
+}
+declare const DFlowInputObjectEditDialog: React.FC<DFlowInputObjectEditDialogProps>;
+export default DFlowInputObjectEditDialog;

package/dist/components/d-flow-input/DFlowInputObjectEditDialog.js

@@ -0,0 +1,118 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import c from "react";
+import { Dialog as F, DialogPortal as I, DialogOverlay as G, DialogContent as H, DialogClose as L } from "../dialog/Dialog.js";
+import { DLayout as B } from "../d-layout/DLayout.js";
+import { Flex as N } from "../flex/Flex.js";
+import { Text as X } from "../text/Text.js";
+import { DResizablePanelGroup as q, DResizablePanel as v, DResizableHandle as J } from "../d-resizable/DResizable.js";
+import { ScrollArea as K, ScrollAreaViewport as M, ScrollAreaScrollbar as S, ScrollAreaThumb as C } from "../scroll-area/ScrollArea.js";
+import { Spacing as b } from "../spacing/Spacing.js";
+import { Button as Q } from "../button/Button.js";
+import { IconX as U } from "@tabler/icons-react";
+import { Editor as W } from "../editor/Editor.js";
+import { DFlowInputObjectTree as Y } from "./DFlowInputObjectTree.js";
+function O(r, i) {
+  if (!r || !Array.isArray(i) || i.length === 0) return r?.value;
+  let e = r.value;
+  for (const n of i)
+    if (e && typeof e == "object" && n in e)
+      e = e[n];
+    else
+      return;
+  return e;
+}
+function m(r, i, e) {
+  if (!r) return null;
+  if (i.length === 0) return {
+    ...r,
+    value: e
+  };
+  const [n, ...u] = i;
+  if (Array.isArray(r.value)) {
+    const l = Number(n), s = [...r.value];
+    return u.length > 0 && typeof s[l] == "object" && s[l] !== null ? s[l] = m({
+      ...r,
+      value: s[l]
+    }, u, e)?.value : s[l] = e, {
+      ...r,
+      value: s
+    };
+  } else if (typeof r.value == "object" && r.value !== null) {
+    const l = {
+      ...r.value
+    };
+    return u.length > 0 && typeof l[n] == "object" && l[n] !== null ? l[n] = m({
+      ...r,
+      value: l[n]
+    }, u, e)?.value : l[n] = e, {
+      ...r,
+      value: l
+    };
+  } else
+    return {
+      ...r,
+      value: e
+    };
+}
+const ue = (r) => {
+  const {
+    open: i,
+    entry: e,
+    value: n,
+    onObjectChange: u,
+    onOpenChange: l
+  } = r, [s, E] = c.useState(i), [w, A] = c.useState({}), [f, g] = c.useState(e?.path ?? []), [h, y] = c.useState(n), [x, k] = c.useState(O(n, e?.path ?? [])), d = c.useRef(null);
+  c.useEffect(() => {
+    k(O(h, f));
+  }, [f]), c.useEffect(() => {
+    g(e?.path ?? []), y(n);
+  }, [e]), c.useEffect(() => {
+    E(i);
+  }, [i]);
+  const D = (o, a) => {
+    A((j) => ({
+      ...j,
+      [o.join(".")]: a
+    }));
+  }, z = (o) => {
+    d.current && clearTimeout(d.current), d.current = setTimeout(() => {
+      g(o.path ?? []);
+    }, 200);
+  }, P = (o, a) => {
+    d.current && clearTimeout(d.current), D(o, !a);
+  }, R = (o) => {
+    const a = m(h, f, o);
+    y(a), u?.(a);
+  }, T = () => null, V = {};
+  return /* @__PURE__ */ t(F, { open: s, onOpenChange: (o) => l?.(o), children: /* @__PURE__ */ p(I, { children: [
+    /* @__PURE__ */ t(G, {}),
+    /* @__PURE__ */ t(H, { "aria-describedby": "DFlowInputObjectEditDialog", onPointerDownOutside: (o) => {
+      const a = o.target;
+      (a.closest("[data-slot=resizable-handle]") || a.closest("[data-slot=resizable-panel]")) && o.preventDefault();
+    }, w: "75%", h: "75%", style: {
+      padding: "2px"
+    }, children: /* @__PURE__ */ t(B, { layoutGap: 0, showLayoutSplitter: !1, topContent: /* @__PURE__ */ p(N, { style: {
+      gap: ".7rem"
+    }, p: 0.7, justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ t(X, { children: e?.key ?? "Edit Object" }),
+      /* @__PURE__ */ t(L, { asChild: !0, children: /* @__PURE__ */ t(Q, { variant: "filled", color: "tertiary", paddingSize: "xxs", children: /* @__PURE__ */ t(U, { size: 13 }) }) })
+    ] }), children: /* @__PURE__ */ p(q, { style: {
+      borderRadius: "1rem"
+    }, children: [
+      /* @__PURE__ */ t(v, { color: "primary", children: /* @__PURE__ */ p(K, { h: "100%", w: "100%", type: "scroll", children: [
+        /* @__PURE__ */ p(M, { px: 1, children: [
+          /* @__PURE__ */ t(b, { spacing: "md" }),
+          /* @__PURE__ */ t(Y, { object: h, onEntryClick: z, collapsedState: w, setCollapsedState: D, activePath: f, onDoubleClick: P }),
+          /* @__PURE__ */ t(b, { spacing: "md" })
+        ] }),
+        /* @__PURE__ */ t(S, { orientation: "vertical", children: /* @__PURE__ */ t(C, {}) }),
+        /* @__PURE__ */ t(S, { orientation: "horizontal", children: /* @__PURE__ */ t(C, {}) })
+      ] }) }),
+      /* @__PURE__ */ t(J, {}),
+      /* @__PURE__ */ t(v, { color: "primary", children: /* @__PURE__ */ t(W, { suggestions: T, tokenHighlights: V, language: "json", initialValue: x, onChange: R }) })
+    ] }) }) })
+  ] }) });
+};
+export {
+  ue as default
+};

package/dist/components/d-flow-input/DFlowInputObjectTree.d.ts

@@ -0,0 +1,16 @@
+import { EditableObjectEntry } from './DFlowInputObject';
+import { default as React } from 'react';
+import { LiteralValue } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowInputObjectTreeProps {
+    object: LiteralValue;
+    parentKey?: string;
+    isRoot?: boolean;
+    onEntryClick: (entry: EditableObjectEntry) => void;
+    collapsedState: Record<string, boolean>;
+    setCollapsedState: (path: string[], collapsed: boolean) => void;
+    path?: string[];
+    activePath?: string[] | null;
+    onDoubleClick?: (path: string[], isCollapsed: boolean) => void;
+    parentColor?: string;
+}
+export declare const DFlowInputObjectTree: React.FC<DFlowInputObjectTreeProps>;