@likec4/diagram 1.26.2 → 1.27.0

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -2,43 +2,43 @@ import { NodeProps } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
 import { NamedExoticComponent } from 'react';
 import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
-export declare const nodeTypes: {
-    element: NamedExoticComponent<NodeProps<{
-        style: ElementStyle;
-        title: string;
-        description: string | null;
-        width: number;
-        height: number;
-        technology: string | null;
-        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-        color: Color;
-        navigateTo: ViewId<string> | null | undefined;
-        column: RelationshipsBrowserTypes.Column;
-        fqn: Fqn;
-        icon: string | null;
-        ports: RelationshipsBrowserTypes.Ports;
-        hovered?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    }>>;
-    compound: NamedExoticComponent<NodeProps<{
-        style: ElementStyle;
-        title: string;
-        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-        color: Color;
-        column: RelationshipsBrowserTypes.Column;
-        fqn: Fqn;
-        depth: number;
-        icon: IconUrl;
-        ports: RelationshipsBrowserTypes.Ports;
-        hovered?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    }>>;
-    empty: NamedExoticComponent<NodeProps<{
-        column: RelationshipsBrowserTypes.Column;
-        hovered?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    }>>;
-};
+export declare const ElementNode: NamedExoticComponent<NodeProps<{
+    width: number;
+    height: number;
+    style: ElementStyle;
+    title: string;
+    technology: string | null;
+    description: string | null;
+    color: Color;
+    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+    navigateTo: ViewId<string> | null | undefined;
+    column: RelationshipsBrowserTypes.Column;
+    fqn: Fqn;
+    icon: string | null;
+    ports: RelationshipsBrowserTypes.Ports;
+    existsInCurrentView: boolean;
+    hovered?: boolean;
+    dimmed?: import("../../../base").Base.Dimmed;
+}>>;
+export declare const CompoundNode: NamedExoticComponent<NodeProps<{
+    style: ElementStyle;
+    title: string;
+    color: Color;
+    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+    column: RelationshipsBrowserTypes.Column;
+    fqn: Fqn;
+    depth: number;
+    icon: IconUrl;
+    ports: RelationshipsBrowserTypes.Ports;
+    existsInCurrentView: boolean;
+    hovered?: boolean;
+    dimmed?: import("../../../base").Base.Dimmed;
+}>>;
+export declare const EmptyNode: NamedExoticComponent<NodeProps<{
+    column: RelationshipsBrowserTypes.Column;
+    hovered?: boolean;
+    dimmed?: import("../../../base").Base.Dimmed;
+}>>;
 type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
 export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
 type CompoundPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -1,17 +1,18 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Handle } from "@xyflow/react";
-import { Position } from "@xyflow/system";
-import { m } from "framer-motion";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { ElementActions } from "./ElementActions.js";
-import { EmptyNode } from "./EmptyNode.js";
-import { customNode } from "../../../base/primitives/customNode.js";
-import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
-import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
-import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
-import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
-import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Handle } from '@xyflow/react';
+import { Position } from '@xyflow/system';
+import { m } from 'framer-motion';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { ElementActions } from './ElementActions.js';
+import { EmptyNode as EmptyNode$1 } from './EmptyNode.js';
+import { customNode } from '../../../base/primitives/customNode.js';
+import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
+import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
+import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
+import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
+
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(
@@ -25,27 +26,25 @@ const ElementDetailsButtonWithHandler = (props) => {
     }
   );
 };
-const nodeTypes = {
-  element: customNode((props) => {
-    return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
-      /* @__PURE__ */ jsx(ElementShape, { ...props }),
-      /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
-      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-      /* @__PURE__ */ jsx(ElementActions, { ...props }),
-      /* @__PURE__ */ jsx(ElementPorts, { ...props })
-    ] }, props.id);
-  }),
-  compound: customNode((props) => {
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
-      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-      /* @__PURE__ */ jsx(CompoundPorts, { ...props })
-    ] }, props.id);
-  }),
-  empty: customNode((props) => {
-    return /* @__PURE__ */ jsx(EmptyNode, { ...props });
-  })
-};
+const ElementNode = customNode((props) => {
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    /* @__PURE__ */ jsx(ElementActions, { ...props }),
+    /* @__PURE__ */ jsx(ElementPorts, { ...props })
+  ] }, props.id);
+});
+const CompoundNode = customNode((props) => {
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { layoutId: props.id, nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(CompoundPorts, { ...props })
+  ] }, props.id);
+});
+const EmptyNode = customNode((props) => {
+  return /* @__PURE__ */ jsx(EmptyNode$1, { ...props });
+});
 const ElementPorts = ({ data: { ports, height: h } }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ports.in.map((id, i) => /* @__PURE__ */ jsx(
@@ -104,8 +103,5 @@ const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     id
   ))
 ] });
-export {
-  CompoundPorts,
-  ElementPorts,
-  nodeTypes
-};
+
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts, EmptyNode };

package/dist/overlays/relationships-browser/custom/styles.css.js

@@ -1,5 +1,14 @@
-/* empty css                          */
-var emptyNode = "_4fi0ne0";
-export {
-  emptyNode
-};
+import { css } from '@likec4/styles/css';
+
+const emptyNode = css({
+  width: "100%",
+  height: "100%",
+  border: `3px dashed`,
+  borderColor: `mantine.colors.defaultBorder`,
+  borderRadius: "md",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+});
+
+export { emptyNode };

package/dist/overlays/relationships-browser/hooks.d.ts

@@ -1,17 +1,22 @@
-import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
-import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, Input, XYStoreApi, Events } from './actor';
+import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
+import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrowserActorRef | null>;
 export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
 export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
 export declare function useRelationshipsBrowser(): {
     actor: RelationshipsBrowserActorRef;
-    getState: () => Readonly< Input & {
+    readonly rootElementId: string;
+    getState: () => Readonly<{
+        subject: Fqn;
+        viewId: ViewId | null;
+        scope: "global" | "view";
         closeable: boolean;
-        enableNavigationMenu: boolean;
+        enableSelectSubject: boolean;
+        enableChangeScope: boolean;
         xyflow: ( GeneralHelpers<import("./_types").RelationshipsBrowserTypes.Node, {
             id: string;
             source: string;
@@ -38,13 +43,14 @@ export declare function useRelationshipsBrowser(): {
             className?: string;
             reconnectable?: boolean | HandleType;
             focusable?: boolean;
-            type: "relationships";
+            type: "relationship";
             data: {
                 relations: NonEmptyArray<RelationId>;
                 color: Color | undefined;
                 label: string | null;
                 navigateTo: ViewId | null;
                 line: RelationshipLineType;
+                existsInCurrentView: boolean;
                 hovered?: boolean;
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
@@ -59,6 +65,8 @@ export declare function useRelationshipsBrowser(): {
         xyedges: import("./_types").RelationshipsBrowserTypes.Edge[];
     }>;
     send: (event: Events) => void;
+    updateView: (layouted: LayoutRelationshipsViewResult) => void;
+    changeScope: (scope: "global" | "view") => void;
     navigateTo: (subject: Fqn, fromNode?: string) => void;
     fitDiagram: () => void;
     close: () => void;

package/dist/overlays/relationships-browser/hooks.js

@@ -1,8 +1,9 @@
-import { nonNullable } from "@likec4/core";
-import { useCallbackRef } from "@mantine/hooks";
-import { useSelector } from "@xstate/react";
-import { shallowEqual } from "fast-equals";
-import { createContext, useTransition, useMemo, useContext } from "react";
+import { nonNullable } from '@likec4/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { createContext, useTransition, useMemo, useContext } from 'react';
+
 const RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
   return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
@@ -16,8 +17,23 @@ function useRelationshipsBrowser() {
   const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
+    get rootElementId() {
+      return `relationships-browser-${actor.sessionId}`;
+    },
     getState: () => actor.getSnapshot().context,
     send: actor.send,
+    updateView: (layouted) => {
+      actor.send({
+        type: "update.view",
+        layouted
+      });
+    },
+    changeScope: (scope) => {
+      actor.send({
+        type: "change.scope",
+        scope
+      });
+    },
     navigateTo: (subject, fromNode) => {
       startTransition(() => {
         actor.send({
@@ -28,23 +44,16 @@ function useRelationshipsBrowser() {
       });
     },
     fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram" });
-      });
+      actor.send({ type: "fitDiagram" });
     },
     close: () => {
-      var _a;
       if (actor._parent) {
-        (_a = actor._parent) == null ? void 0 : _a.send({ type: "close", actorId: actor.id });
+        actor._parent?.send({ type: "close", actorId: actor.id });
       } else {
         actor.send({ type: "close" });
       }
     }
   }), [actor]);
 }
-export {
-  RelationshipsBrowserActorContext,
-  useRelationshipsBrowser,
-  useRelationshipsBrowserActor,
-  useRelationshipsBrowserState
-};
+
+export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserActor, useRelationshipsBrowserState };

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -1,8 +1,9 @@
-import { Queue, ElementKind, nonNullable, DiagramNode, invariant } from "@likec4/core";
-import "@react-hookz/web";
-import { hasAtLeast } from "remeda";
-import { ZIndexes } from "../../base/const.js";
-import { LayoutRelationshipsViewResult } from "./-useRelationshipsView.js";
+import { Queue, ElementKind, nonNullable, DiagramNode, invariant } from '@likec4/core';
+import '@react-hookz/web';
+import { hasAtLeast } from 'remeda';
+import { ZIndexes } from '../../base/const.js';
+import { LayoutRelationshipsViewResult } from './-useRelationshipsView.js';
+
 function viewToNodesEdge(view) {
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
@@ -82,6 +83,7 @@ function viewToNodesEdge(view) {
               depth: node.depth ?? 0,
               icon: node.icon ?? "none",
               ports: node.ports,
+              existsInCurrentView: node.existsInCurrentView,
               fqn,
               ...navigateTo
             }
@@ -108,6 +110,7 @@ function viewToNodesEdge(view) {
               icon: node.icon ?? "none",
               ports: node.ports,
               style: node.style,
+              existsInCurrentView: node.existsInCurrentView,
               ...navigateTo
             }
           }
@@ -129,7 +132,7 @@ function viewToNodesEdge(view) {
     }
     xyedges.push({
       id,
-      type: "relationships",
+      type: "relationship",
       source: ns + source,
       target: ns + target,
       sourceHandle: edge.sourceHandle,
@@ -143,15 +146,8 @@ function viewToNodesEdge(view) {
         color: edge.color ?? "gray",
         label: edge.label,
         navigateTo: edge.navigateTo ?? null,
-        // technology: edge.technology,
-        // navigateTo: edge.navigateTo,
-        // labelBBox: edge.labelBBox ?? null,
-        // points: edge.points,
-        // color: edge.color ?? 'gray',
-        line: edge.line ?? "dashed"
-        // dir: edge.dir ?? 'forward',
-        // head: edge.head ?? 'normal',
-        // tail: edge.tail ?? 'none',
+        line: edge.line ?? "dashed",
+        existsInCurrentView: edge.existsInCurrentView
       },
       interactionWidth: 20
     });
@@ -161,6 +157,5 @@ function viewToNodesEdge(view) {
     xyedges
   };
 }
-export {
-  viewToNodesEdge
-};
+
+export { viewToNodesEdge };

package/dist/packages/core/src/compute-view/relationships-view/compute.js

@@ -0,0 +1,123 @@
+import { pipe } from 'remeda';
+import { invariant } from '../../errors/index.js';
+import { sortParentsFirst, isDescendantOf } from '../../utils/fqn.js';
+import { treeFromElements } from './utils.js';
+import { toSet, toArray } from '../../utils/iterable/to.js';
+import { ifilter } from '../../utils/iterable/filter.js';
+import { imap } from '../../utils/iterable/map.js';
+
+const finalize = (elements, explicits) => {
+  if (elements.size > 2 && explicits.size !== elements.size) {
+    return new Set(sortParentsFirst([
+      ...treeFromElements(elements).flatten(),
+      ...explicits
+    ]));
+  }
+  if (elements.size > 1) {
+    return new Set(sortParentsFirst([...elements]));
+  }
+  return elements;
+};
+function computeRelationships(subject, others, relationships) {
+  const isOther = (e) => others.has(e);
+  let subjects = /* @__PURE__ */ new Set([subject]);
+  const explicits = {
+    incomers: /* @__PURE__ */ new Set(),
+    subjects: /* @__PURE__ */ new Set([subject]),
+    outgoers: /* @__PURE__ */ new Set()
+  };
+  let incomers = new Set(relationships.incoming.flatMap((r) => {
+    explicits.subjects.add(r.target);
+    explicits.incomers.add(r.source);
+    subjects.add(r.target);
+    if (r.target !== subject) {
+      let target = r.target.parent;
+      while (target && target !== subject) {
+        subjects.add(target);
+        target = target.parent;
+      }
+    }
+    let source = r.source;
+    const incomerBranch = [];
+    while (true) {
+      incomerBranch.push(source);
+      if (isOther(source) || !source.parent) {
+        break;
+      }
+      source = source.parent;
+    }
+    return incomerBranch;
+  }));
+  let outgoers = new Set(relationships.outgoing.flatMap((r) => {
+    explicits.subjects.add(r.source);
+    explicits.outgoers.add(r.target);
+    subjects.add(r.source);
+    if (r.source !== subject) {
+      let source = r.source.parent;
+      while (source && source !== subject) {
+        subjects.add(source);
+        source = source.parent;
+      }
+    }
+    let target = r.target;
+    const outgoerBranch = [];
+    while (true) {
+      outgoerBranch.push(target);
+      if (isOther(target) || !target.parent) {
+        break;
+      }
+      target = target.parent;
+    }
+    return outgoerBranch;
+  }));
+  return {
+    incomers: finalize(incomers, explicits.incomers),
+    incoming: new Set(relationships.incoming),
+    subjects: finalize(subjects, explicits.subjects),
+    outgoing: new Set(relationships.outgoing),
+    outgoers: finalize(outgoers, explicits.outgoers)
+  };
+}
+function computeRelationshipsView(subjectId, likec4model, scopeViewId, scope = "global") {
+  const view = scopeViewId ? likec4model.findView(scopeViewId) : null;
+  if (scope === "view") {
+    invariant(
+      view,
+      'Scope view id is required when scope is "view"'
+    );
+    return computeScopedRelationshipsView(subjectId, view, likec4model);
+  }
+  const subject = likec4model.element(subjectId);
+  const subjectSiblings = toSet(subject.ascendingSiblings());
+  return computeRelationships(
+    subject,
+    subjectSiblings,
+    {
+      incoming: [...subject.incoming()],
+      outgoing: [...subject.outgoing()]
+    }
+  );
+}
+function computeScopedRelationshipsView(subjectId, view, likec4model) {
+  const subject = likec4model.element(subjectId);
+  let relationships = {
+    incoming: toArray(ifilter(subject.incoming(), (r) => view.includesRelation(r.id))),
+    outgoing: toArray(ifilter(subject.outgoing(), (r) => view.includesRelation(r.id)))
+  };
+  const isDescendant = isDescendantOf(subject);
+  const others = /* @__PURE__ */ new Set([
+    ...subject.ascendingSiblings(),
+    ...pipe(
+      view.elements(),
+      imap((e) => e.element),
+      ifilter((e) => e !== subject && isDescendant(e))
+    )
+  ]);
+  return computeRelationships(
+    subject,
+    others,
+    relationships
+  );
+}
+
+export { computeRelationshipsView };

package/dist/packages/core/src/compute-view/relationships-view/utils.js

@@ -0,0 +1,68 @@
+import { nonNullable } from '../../errors/index.js';
+import { sortParentsFirst, isDescendantOf, isAncestor } from '../../utils/fqn.js';
+import DefaultMap from '../../../../../_virtual/default-map.js';
+
+function treeFromElements(elements) {
+  const sorted = sortParentsFirst([...elements]);
+  const root = new Set(sorted);
+  const map = new Map(sorted.map((e) => [e._literalId, e]));
+  const parents = new DefaultMap(() => null);
+  const children = sorted.reduce((acc, parent, index, all) => {
+    acc.set(
+      parent,
+      all.slice(index + 1).filter(isDescendantOf(parent)).map((e) => {
+        root.delete(e);
+        return e;
+      }).reduce((acc2, el) => {
+        if (!acc2.some(isAncestor(el))) {
+          acc2.push(el);
+          parents.set(el, parent);
+        }
+        return acc2;
+      }, [])
+    );
+    return acc;
+  }, new DefaultMap(() => []));
+  return {
+    sorted,
+    byId: (id) => nonNullable(map.get(id), `Element not found by id: ${id}`),
+    root,
+    parent: (el) => parents.get(el),
+    children: (el) => children.get(el),
+    /**
+     * Flattens the tree structure by removing redundant hierarchy levels.
+     * @example
+     *   A
+     *   └── B
+     *       ├── C
+     *       │   └── D
+     *       │       └── E
+     *       └── F
+     *           └── G
+     * becomes
+     *   A
+     *   ├── C
+     *   │   └── E
+     *   └── F
+     *       └── G
+     */
+    flatten: () => {
+      return /* @__PURE__ */ new Set([
+        ...root,
+        ...sorted.reduce((acc, el) => {
+          const _children = children.get(el);
+          if (_children.length === 0) {
+            acc.push(el);
+            return acc;
+          }
+          if (_children.length > 1) {
+            acc.push(..._children);
+          }
+          return acc;
+        }, [])
+      ]);
+    }
+  };
+}
+
+export { treeFromElements };

package/dist/packages/core/src/errors/index.js

@@ -0,0 +1,15 @@
+function nonNullable(value, message) {
+  if (typeof value === "undefined" || value == null) {
+    const msg = typeof message === "function" ? message() : message;
+    throw new Error(msg ?? `Expected defined value, but received ${value}`);
+  }
+  return value;
+}
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  throw new Error(message ?? "Invariant failed");
+}
+
+export { invariant, nonNullable };

package/dist/packages/core/src/utils/fqn.js

@@ -0,0 +1,43 @@
+import { isString } from './guards.js';
+
+const asString = (e) => isString(e) ? e : e.id;
+function isAncestor(arg1, arg2) {
+  const arg1Id = asString(arg1);
+  if (arg2) {
+    const arg2Id = asString(arg2);
+    return arg2Id.startsWith(arg1Id + ".");
+  }
+  return (ancestor) => {
+    const ancestorId = asString(ancestor);
+    return arg1Id.startsWith(ancestorId + ".");
+  };
+}
+function isDescendantOf(descedant, ancestor) {
+  {
+    return (d) => isAncestor(descedant, d);
+  }
+}
+function findTopAncestor(items, item) {
+  let parent = item;
+  for (const e of items) {
+    if (isAncestor(e, parent)) {
+      parent = e;
+    }
+  }
+  return parent !== item ? parent : null;
+}
+function sortParentsFirst(array) {
+  const result = [];
+  const items = [...array];
+  let item;
+  while (item = items.shift()) {
+    let parent;
+    while (parent = findTopAncestor(items, item)) {
+      result.push(items.splice(items.indexOf(parent), 1)[0]);
+    }
+    result.push(item);
+  }
+  return result;
+}
+
+export { isAncestor, isDescendantOf, sortParentsFirst };

package/dist/packages/core/src/utils/guards.js

@@ -0,0 +1,7 @@
+export { hasAtLeast } from 'remeda';
+
+function isString(value) {
+  return value != null && typeof value === "string";
+}
+
+export { isString };

package/dist/packages/core/src/utils/iterable/filter.js

@@ -0,0 +1,21 @@
+import { isFunction } from 'remeda';
+import { invariant } from '../../errors/index.js';
+
+function ifilter(arg1, arg2) {
+  const pred = arg2 ?? arg1;
+  invariant(isFunction(pred));
+  function* _filter(iter) {
+    for (const value of iter) {
+      if (pred(value)) {
+        yield value;
+      }
+    }
+    return;
+  }
+  if (!arg2) {
+    return _filter;
+  }
+  return _filter(arg1);
+}
+
+export { ifilter };