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

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

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

package/dist/components/d-flow-folder/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,50 @@
+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",
+      value: m,
+      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,10 @@
+import { default as React } from 'react';
+import { DFlowFolderContextMenuGroupData, DFlowFolderContextMenuItemData } from './DFlowFolderContextMenu';
+import { Flow } from '@code0-tech/sagittarius-graphql-types';
+export interface DFlowFolderRenameDialogProps {
+    contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onRename?: (flow: Flow, newName: string) => void;
+}
+export declare const DFlowFolderRenameDialog: React.FC<DFlowFolderRenameDialogProps>;

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

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

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

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

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

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

package/dist/components/{d-flow/function → d-flow-function}/DFlowFunction.input.hook.d.ts

@@ -1,4 +1,4 @@
 import { FunctionDefinitionView } from './DFlowFunction.view';
-import { DFlowDataTypeReactiveService } from '../data-type/DFlowDataType.service';
+import { DFlowDataTypeReactiveService } from '../d-flow-data-type';
 import { DataTypeIdentifier, NodeParameterValue } from '@code0-tech/sagittarius-graphql-types';
 export declare const useInputType: (type: DataTypeIdentifier, func: FunctionDefinitionView, values: NodeParameterValue[], dataTypeService: DFlowDataTypeReactiveService) => DataTypeIdentifier | null;

package/dist/components/d-flow-function/DFlowFunction.input.hook.js

@@ -0,0 +1,8 @@
+import { resolveGenericKeys as o, replaceGenericKeysInType as s } from "../../utils/generics.js";
+const y = (e, r, n, p) => {
+  const c = o(r, n, p);
+  return s(e, c);
+};
+export {
+  y as useInputType
+};

package/dist/components/{d-flow/function → d-flow-function}/DFlowFunction.return.hook.d.ts

@@ -1,4 +1,4 @@
 import { FunctionDefinitionView } from './DFlowFunction.view';
-import { DFlowDataTypeReactiveService } from '../data-type/DFlowDataType.service';
+import { DFlowDataTypeReactiveService } from '../d-flow-data-type';
 import { DataTypeIdentifier, NodeParameterValue } from '@code0-tech/sagittarius-graphql-types';
-export declare const useReturnType: (func: FunctionDefinitionView, values: NodeParameterValue[], dataTypeService?: DFlowDataTypeReactiveService) => DataTypeIdentifier | null;
+export declare const useReturnType: (func: FunctionDefinitionView, values: NodeParameterValue[], dataTypeService: DFlowDataTypeReactiveService) => DataTypeIdentifier | null;

package/dist/components/d-flow-function/DFlowFunction.return.hook.js

@@ -0,0 +1,9 @@
+import { resolveGenericKeys as t, replaceGenericKeysInType as y } from "../../utils/generics.js";
+const s = (e, r, n) => {
+  if (!e?.returnType) return null;
+  const p = t(e, r, n);
+  return y(e.returnType, p);
+};
+export {
+  s as useReturnType
+};

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

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

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

@@ -0,0 +1,12 @@
+import "../../utils/contextStore.js";
+import "react";
+import { ReactiveArrayService as t } from "../../utils/reactiveArrayService.js";
+import "merge-props";
+class p extends t {
+  getById(e, i) {
+    return this.values(i).find((r) => r.id === e);
+  }
+}
+export {
+  p as DFlowFunctionReactiveService
+};

package/dist/components/{d-flow/function → d-flow-function}/DFlowFunction.view.d.ts

@@ -1,17 +1,25 @@
-import { DataTypeIdentifier, FunctionDefinition, Maybe, ParameterDefinition, RuntimeFunctionDefinition, Scalars, TranslationConnection } from '@code0-tech/sagittarius-graphql-types';
+import { DataTypeIdentifier, DataTypeIdentifierConnection, FunctionDefinition, Maybe, ParameterDefinition, RuntimeFunctionDefinition, Scalars, Translation } from '@code0-tech/sagittarius-graphql-types';
 export declare class FunctionDefinitionView {
+    /** Name of the function */
+    private readonly _aliases?;
     /** Time when this FunctionDefinition was created */
     private readonly _createdAt?;
+    /** All data type identifiers used within this Node Function */
+    private readonly _dataTypeIdentifiers?;
     /** Deprecation message of the function */
     private readonly _deprecationMessages?;
     /** Description of the function */
     private readonly _descriptions?;
+    /** Display message of the function */
+    private readonly _displayMessages?;
     /** Documentation of the function */
     private readonly _documentations?;
     /** Generic keys of the function */
     private readonly _genericKeys?;
     /** Global ID of this FunctionDefinition */
     private readonly _id?;
+    /** Identifier of the function */
+    private readonly _identifier?;
     /** Name of the function */
     private readonly _names?;
     /** Parameters of the function */
@@ -25,13 +33,17 @@ export declare class FunctionDefinitionView {
     /** Time when this FunctionDefinition was last updated */
     private readonly _updatedAt?;
     constructor(object: FunctionDefinition);
+    get aliases(): Maybe<Array<Translation>> | undefined;
     get createdAt(): Maybe<Scalars["Time"]["output"]> | undefined;
-    get deprecationMessages(): Maybe<TranslationConnection> | undefined;
-    get descriptions(): Maybe<TranslationConnection> | undefined;
-    get documentations(): Maybe<TranslationConnection> | undefined;
+    get dataTypeIdentifiers(): Maybe<DataTypeIdentifierConnection> | undefined;
+    get deprecationMessages(): Maybe<Array<Translation>> | undefined;
+    get descriptions(): Maybe<Array<Translation>> | undefined;
+    get displayMessages(): Maybe<Array<Translation>> | undefined;
+    get documentations(): Maybe<Array<Translation>> | undefined;
     get genericKeys(): Maybe<Array<Scalars["String"]["output"]>> | undefined;
     get id(): Maybe<Scalars["FunctionDefinitionID"]["output"]> | undefined;
-    get names(): Maybe<TranslationConnection> | undefined;
+    get identifier(): Maybe<Scalars["String"]["output"]> | undefined;
+    get names(): Maybe<Array<Translation>> | undefined;
     get parameterDefinitions(): Maybe<ParameterDefinitionView[]> | undefined;
     get returnType(): Maybe<DataTypeIdentifier> | undefined;
     get runtimeFunctionDefinition(): Maybe<RuntimeFunctionDefinition> | undefined;
@@ -50,17 +62,20 @@ export declare class ParameterDefinitionView {
     private readonly _documentations?;
     /** Global ID of this ParameterDefinition */
     private readonly _id?;
+    /** Identifier of the parameter */
+    private readonly _identifier?;
     /** Name of the parameter */
     private readonly _names?;
     /** Time when this ParameterDefinition was last updated */
     private readonly _updatedAt?;
-    constructor(object: ParameterDefinition);
+    constructor(object: ParameterDefinition, dataTypeIdentifiers: DataTypeIdentifier[]);
     get createdAt(): Maybe<Scalars["Time"]["output"]> | undefined;
     get dataTypeIdentifier(): Maybe<DataTypeIdentifier> | undefined;
-    get descriptions(): Maybe<TranslationConnection> | undefined;
-    get documentations(): Maybe<TranslationConnection> | undefined;
+    get descriptions(): Maybe<Array<Translation>> | undefined;
+    get documentations(): Maybe<Array<Translation>> | undefined;
     get id(): Maybe<Scalars["ParameterDefinitionID"]["output"]> | undefined;
-    get names(): Maybe<TranslationConnection> | undefined;
+    get identifier(): Maybe<Scalars["String"]["output"]> | undefined;
+    get names(): Maybe<Array<Translation>> | undefined;
     get updatedAt(): Maybe<Scalars["Time"]["output"]> | undefined;
     json(): ParameterDefinition;
 }

package/dist/components/d-flow-function/DFlowFunction.view.js

@@ -0,0 +1,139 @@
+import { resolveDataTypeIdentifiers as d, attachDataTypeIdentifiers as n } from "../d-flow/DFlow.util.js";
+function t(e, i, s) {
+  return (i = a(i)) in e ? Object.defineProperty(e, i, { value: s, enumerable: !0, configurable: !0, writable: !0 }) : e[i] = s, e;
+}
+function a(e) {
+  var i = o(e, "string");
+  return typeof i == "symbol" ? i : i + "";
+}
+function o(e, i) {
+  if (typeof e != "object" || !e) return e;
+  var s = e[Symbol.toPrimitive];
+  if (s !== void 0) {
+    var r = s.call(e, i);
+    if (typeof r != "object") return r;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (i === "string" ? String : Number)(e);
+}
+class u {
+  constructor(i) {
+    t(this, "_aliases", void 0), t(this, "_createdAt", void 0), t(this, "_dataTypeIdentifiers", void 0), t(this, "_deprecationMessages", void 0), t(this, "_descriptions", void 0), t(this, "_displayMessages", void 0), t(this, "_documentations", void 0), t(this, "_genericKeys", void 0), t(this, "_id", void 0), t(this, "_identifier", void 0), t(this, "_names", void 0), t(this, "_parameterDefinitions", void 0), t(this, "_returnType", void 0), t(this, "_runtimeFunctionDefinition", void 0), t(this, "_throwsError", void 0), t(this, "_updatedAt", void 0);
+    const s = d(i.dataTypeIdentifiers?.nodes ?? []);
+    this._aliases = i.aliases, this._createdAt = i.createdAt, this._dataTypeIdentifiers = i.dataTypeIdentifiers, this._deprecationMessages = i.deprecationMessages, this._descriptions = i.descriptions, this._displayMessages = i.displayMessages, this._documentations = i.documentations, this._genericKeys = i.genericKeys, this._id = i.id, this._identifier = i.identifier, this._names = i.names, this._parameterDefinitions = i.parameterDefinitions?.nodes?.map((r) => new h(r, s)) ?? void 0, this._returnType = n(s, i.returnType), this._runtimeFunctionDefinition = i.runtimeFunctionDefinition, this._throwsError = i.throwsError, this._updatedAt = i.updatedAt;
+  }
+  get aliases() {
+    return this._aliases;
+  }
+  get createdAt() {
+    return this._createdAt;
+  }
+  get dataTypeIdentifiers() {
+    return this._dataTypeIdentifiers;
+  }
+  get deprecationMessages() {
+    return this._deprecationMessages;
+  }
+  get descriptions() {
+    return this._descriptions;
+  }
+  get displayMessages() {
+    return this._displayMessages;
+  }
+  get documentations() {
+    return this._documentations;
+  }
+  get genericKeys() {
+    return this._genericKeys;
+  }
+  get id() {
+    return this._id;
+  }
+  get identifier() {
+    return this._identifier;
+  }
+  get names() {
+    return this._names;
+  }
+  get parameterDefinitions() {
+    return this._parameterDefinitions;
+  }
+  get returnType() {
+    return this._returnType;
+  }
+  get runtimeFunctionDefinition() {
+    return this._runtimeFunctionDefinition;
+  }
+  get throwsError() {
+    return this._throwsError;
+  }
+  get updatedAt() {
+    return this._updatedAt;
+  }
+  json() {
+    return {
+      aliases: this._aliases,
+      createdAt: this._createdAt,
+      deprecationMessages: this._deprecationMessages,
+      displayMessages: this._displayMessages,
+      descriptions: this._descriptions,
+      documentations: this._documentations,
+      genericKeys: this._genericKeys,
+      id: this._id,
+      identifier: this._identifier,
+      names: this._names,
+      parameterDefinitions: this._parameterDefinitions ? {
+        nodes: this._parameterDefinitions.map((i) => i.json())
+      } : void 0,
+      returnType: this._returnType,
+      runtimeFunctionDefinition: this._runtimeFunctionDefinition,
+      throwsError: this._throwsError,
+      updatedAt: this._updatedAt,
+      dataTypeIdentifiers: this._dataTypeIdentifiers
+    };
+  }
+}
+class h {
+  constructor(i, s) {
+    t(this, "_createdAt", void 0), t(this, "_dataTypeIdentifier", void 0), t(this, "_descriptions", void 0), t(this, "_documentations", void 0), t(this, "_id", void 0), t(this, "_identifier", void 0), t(this, "_names", void 0), t(this, "_updatedAt", void 0), this._createdAt = i.createdAt, this._dataTypeIdentifier = n(s, i.dataTypeIdentifier), this._descriptions = i.descriptions, this._documentations = i.documentations, this._id = i.id, this._identifier = i.identifier, this._names = i.names, this._updatedAt = i.updatedAt;
+  }
+  get createdAt() {
+    return this._createdAt;
+  }
+  get dataTypeIdentifier() {
+    return this._dataTypeIdentifier;
+  }
+  get descriptions() {
+    return this._descriptions;
+  }
+  get documentations() {
+    return this._documentations;
+  }
+  get id() {
+    return this._id;
+  }
+  get identifier() {
+    return this._identifier;
+  }
+  get names() {
+    return this._names;
+  }
+  get updatedAt() {
+    return this._updatedAt;
+  }
+  json() {
+    return {
+      createdAt: this._createdAt,
+      dataTypeIdentifier: this._dataTypeIdentifier,
+      descriptions: this._descriptions,
+      documentations: this._documentations,
+      id: this._id,
+      names: this._names,
+      updatedAt: this._updatedAt
+    };
+  }
+}
+export {
+  u as FunctionDefinitionView,
+  h as ParameterDefinitionView
+};

package/dist/components/{d-flow/function → d-flow-function}/DFlowFunctionDefaultCard.d.ts

@@ -1,12 +1,12 @@
-import { Code0Component } from '../../../utils/types';
+import { Code0Component } from '../../utils';
 import { Node, NodeProps } from '@xyflow/react';
-import { NodeFunctionView } from '../DFlow.view';
 import { default as React } from 'react';
-import { Scalars } from '@code0-tech/sagittarius-graphql-types';
+import { NodeFunction, Scalars } from '@code0-tech/sagittarius-graphql-types';
 export interface DFlowFunctionDefaultCardDataProps extends Omit<Code0Component<HTMLDivElement>, "scope"> {
-    instance: NodeFunctionView;
+    nodeId: NodeFunction['id'];
     flowId: Scalars["FlowID"]["output"];
     isParameter: boolean;
+    linkingId?: string;
     depth: number;
     scope: number[];
     index: number;

package/dist/components/d-flow-function/DFlowFunctionDefaultCard.js

@@ -0,0 +1,117 @@
+import { jsxs as m, jsx as t, Fragment as E } from "react/jsx-runtime";
+import { useService as v, useStore as w } from "../../utils/contextStore.js";
+import { underlineBySeverity as H } from "../../utils/inspection.js";
+import c, { memo as X } from "react";
+import "merge-props";
+import { useStore as h, useReactFlow as Y, Handle as g, Position as f } from "@xyflow/react";
+import { Card as q } from "../card/Card.js";
+import '../../assets/components/d-flow-function/DFlowFunctionDefaultCard.style.css';/* empty css                                    */
+import { Flex as G } from "../flex/Flex.js";
+import { IconNote as F } from "@tabler/icons-react";
+import { Text as y } from "../text/Text.js";
+import { DFlowFunctionReactiveService as D } from "./DFlowFunction.service.js";
+import { useNodeValidation as J } from "../d-flow-validation/DNodeValidation.hook.js";
+import "../d-flow/DFlow.js";
+import { DFlowReactiveService as T } from "../d-flow/DFlow.service.js";
+import { hashToColor as B } 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 { FileTabsService as N } from "../file-tabs/FileTabs.service.js";
+import { DFlowTabDefault as K } from "../d-flow-file/DFlowTabDefault.js";
+import { Badge as O } from "../badge/Badge.js";
+import { DFlowInputLiteralBadge as Q } from "../d-flow-input/DFlowInputLiteralBadge.js";
+import { DFlowInputReferenceBadge as U } from "../d-flow-input/DFlowInputReferenceBadge.js";
+import { DFlowInputNodeBadge as Z } from "../d-flow-input/DFlowInputNodeBadge.js";
+const Be = X((d) => {
+  const {
+    data: e,
+    id: p,
+    width: C = 0,
+    height: M = 0
+  } = d, R = h((o) => o.width), z = h((o) => o.height), P = Y(), u = v(N), I = w(N), V = v(T), b = w(T), k = v(D), S = w(D), r = c.useMemo(() => V.getNodeById(e.flowId, e.nodeId), [b, e]), l = c.useMemo(() => r ? k.getById(r.functionDefinition?.id) : void 0, [S, e, r]), $ = J(e.nodeId, e.flowId), x = c.useMemo(() => I.find((o) => o.active)?.id, [I, u]), A = h((o) => {
+    const i = o.nodes.filter((n) => n.parentId === d.parentId);
+    let a;
+    return i.forEach((n) => {
+      const s = n.data?.index ?? 1 / 0, _ = a?.data?.index ?? 1 / 0;
+      (!a || s < _) && (a = n);
+    }), a;
+  }), L = (o) => o.split(/(\$\{[^}]+\})/).filter(Boolean).flatMap((i) => i.startsWith("${") ? [i.slice(2, -1)] : i.split(/(\s*,\s*)/).filter(Boolean).flatMap((a) => a.trim() === "," ? [","] : a.trim() ? [a.trim()] : [])), W = c.useMemo(() => L(l?.displayMessages[0]?.content ?? "").map((o) => {
+    const i = r?.parameters?.nodes?.find((s) => l?.parameterDefinitions?.find((j) => j.id == s?.id)?.identifier == o), a = $?.filter((s) => s.parameterId === i?.id), n = a?.length ? H[a[0].type] : {};
+    if (i) {
+      switch (i?.value?.__typename) {
+        case "LiteralValue":
+          return /* @__PURE__ */ t("div", { style: {
+            ...n,
+            display: "inline-block"
+          }, children: /* @__PURE__ */ t(Q, { value: i.value }) });
+        case "ReferenceValue":
+          return /* @__PURE__ */ t("div", { style: {
+            ...n,
+            display: "inline-block"
+          }, children: /* @__PURE__ */ t(U, { flowId: d.data.flowId, value: i.value }) });
+        case "NodeFunctionIdWrapper":
+          return /* @__PURE__ */ m("div", { style: {
+            ...n,
+            display: "inline-block"
+          }, children: [
+            /* @__PURE__ */ t(Z, { value: i.value, flowId: d.data.flowId }),
+            /* @__PURE__ */ t(g, { type: "target", position: f.Right, id: `param-${i?.id}`, isConnectable: !1, className: "d-flow-viewport-default-card__handle d-flow-viewport-default-card__handle--target" }, i?.id)
+          ] });
+      }
+      return /* @__PURE__ */ t(O, { style: {
+        verticalAlign: "middle"
+      }, border: !0, children: /* @__PURE__ */ t(y, { size: "sm", children: o }) });
+    }
+    return " " + String(o) + " ";
+  }), [b, S, e, l]);
+  return c.useEffect(() => {
+    r?.id && u.registerTab({
+      id: r.id,
+      active: !1,
+      closeable: !0,
+      children: /* @__PURE__ */ m(E, { children: [
+        /* @__PURE__ */ t(F, { color: B(e.nodeId), size: 12 }),
+        /* @__PURE__ */ t(y, { size: "sm", children: l?.names[0]?.content })
+      ] }),
+      content: /* @__PURE__ */ t(K, { flowId: d.data.flowId, node: r })
+    });
+  }, [r?.id, l, e]), /* @__PURE__ */ m(q, { "data-flow-refernce": p, paddingSize: "xs", py: e.isParameter ? "0.35" : void 0, outline: A.id === p, borderColor: x == r?.id ? "info" : void 0, className: x == r?.id ? "d-flow-viewport-default-card--active" : void 0, color: "primary", onClick: () => {
+    P.setViewport({
+      x: R / 2 + d.positionAbsoluteX * -1 - C / 2,
+      y: z / 2 + d.positionAbsoluteY * -1 - M / 2,
+      zoom: 1
+    }, {
+      duration: 250
+    }), u.activateTab(r?.id);
+  }, style: {
+    position: "relative"
+  }, children: [
+    /* @__PURE__ */ t(g, { isConnectable: !1, draggable: !1, type: "target", className: "d-flow-viewport-default-card__handle d-flow-viewport-default-card__handle--target", style: {
+      ...e.isParameter ? {
+        right: "2px"
+      } : {
+        top: "2px"
+      }
+    }, position: e.isParameter ? f.Right : f.Top }),
+    /* @__PURE__ */ t(g, { isConnectable: !1, type: "source", style: {
+      ...e.isParameter ? {
+        left: "2px"
+      } : {
+        bottom: "2px"
+      }
+    }, className: "d-flow-viewport-default-card__handle d-flow-viewport-default-card__handle--source", position: e.isParameter ? f.Left : f.Bottom }),
+    /* @__PURE__ */ m(G, { align: "center", style: {
+      gap: "0.7rem"
+    }, children: [
+      /* @__PURE__ */ t(F, { color: B(e.nodeId), size: 16 }),
+      /* @__PURE__ */ t(y, { size: "md", children: W })
+    ] })
+  ] }, p);
+});
+export {
+  Be as DFlowFunctionDefaultCard
+};

package/dist/components/d-flow-function/DFlowFunctionGroupCard.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Node, NodeProps } from '@xyflow/react';
+import { Code0Component } from '../../utils';
+export interface DFlowFunctionGroupCardDataProps extends Omit<Code0Component<HTMLDivElement>, "scope"> {
+    isParameter: boolean;
+    linkingId: string;
+    flowId: string;
+    depth: number;
+    scope: number[];
+    color?: string;
+}
+export type DFlowFunctionGroupCardProps = NodeProps<Node<DFlowFunctionGroupCardDataProps>>;
+export declare const DFlowFunctionGroupCard: React.FC<DFlowFunctionGroupCardProps>;