@likec4/diagram 1.41.0 → 1.42.0

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

@@ -3,10 +3,10 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

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

@@ -1,5 +1,2 @@
-import { NodeProps } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
-type EmptyNodeProps = NodeProps<Pick<RelationshipsBrowserTypes.EmptyNodeData, 'column'>>;
-export declare function EmptyNode({ data: { column, }, }: EmptyNodeProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function EmptyNode({ data: { column, }, }: RelationshipsBrowserTypes.NodeProps<'empty'>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,44 +1,3 @@
-import { FunctionComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
-import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
-export declare const RelationshipEdge: FunctionComponent<{
-    id: string;
-    selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
-    style?: CSSProperties;
-    animated?: boolean;
-    source: string;
-    target: string;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
-    sourcePosition: Position;
-    targetPosition: Position;
-    label?: ReactNode;
-    labelStyle?: CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    sourceHandleId?: string | null;
-    targetHandleId?: string | null;
-    markerStart?: string;
-    markerEnd?: string;
-    pathOptions?: any;
-    interactionWidth?: number;
-    data: import("../../../base").Base.EdgeData & {
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-        sourceFqn: Fqn;
-        targetFqn: Fqn;
-        relations: NonEmptyArray<RelationId>;
-        color: Color | undefined;
-        label: string | null;
-        navigateTo: ViewId | null;
-        line: RelationshipLineType;
-        existsInCurrentView: boolean;
-    };
-}>;
+import { RelationshipsBrowserTypes } from '../_types';
+import { FunctionComponent } from 'react';
+export declare const RelationshipEdge: FunctionComponent<RelationshipsBrowserTypes.EdgeProps>;

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

@@ -4,19 +4,18 @@ import { Tooltip } from '@mantine/core';
 import { getBezierPath } from '@xyflow/system';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser } from '../hooks.js';
-import { customEdge } from '../../../base/primitives/customEdge.js';
+import { memoEdge } from '../../../base-primitives/memoEdge.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
-import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
-import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
-import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
-import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
+import { EdgeLabel } from '../../../base-primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton.js';
+import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
+import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
+import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelContainer.js';
 
-const RelationshipEdge = customEdge((props) => {
+const RelationshipEdge = memoEdge((props) => {
   const browser = useRelationshipsBrowser();
   const { enableNavigateTo } = useEnabledFeatures();
   const {
-    id,
     data: {
       navigateTo,
       relations,

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

@@ -1,2 +1,3 @@
 export { RelationshipEdge } from './edgeTypes';
-export { CompoundNode, ElementNode, EmptyNode } from './nodeTypes';
+export { EmptyNode } from './EmptyNode';
+export { CompoundNode, ElementNode } from './nodeTypes';

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

@@ -1,16 +1,9 @@
-import { FC } from 'react';
-import { NodeProps } from '../../../base';
+import { BaseNodePropsWithData } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
-type NodeTypes = {
-    element: FC<NodeProps<RelationshipsBrowserTypes.ElementNodeData>>;
-    compound: FC<NodeProps<RelationshipsBrowserTypes.CompoundNodeData>>;
-    empty: FC<NodeProps<RelationshipsBrowserTypes.EmptyNodeData>>;
-};
-export declare const ElementNode: NodeTypes['element'];
-export declare const CompoundNode: NodeTypes['compound'];
-export declare const EmptyNode: NodeTypes['empty'];
-type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
+export declare function ElementNode(props: RelationshipsBrowserTypes.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundNode(props: RelationshipsBrowserTypes.NodeProps<'compound'>): import("react/jsx-runtime").JSX.Element;
+type ElementPortsProps = BaseNodePropsWithData<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'>>;
+type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
 export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,18 +1,16 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Handle } from '@xyflow/react';
-import { Position } from '@xyflow/system';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Handle, Position } from '@xyflow/react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActions } from './ElementActions.js';
-import { EmptyNode as EmptyNode$1 } from './EmptyNode.js';
-import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
-import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
-import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.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 { ElementTags } from '../../../base/primitives/element/ElementTags.js';
-import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
+import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
+import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
+import { CompoundDetailsButton } from '../../../base-primitives/compound/CompoundDetailsButton.js';
+import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
+import { ElementData } from '../../../base-primitives/element/ElementData.js';
+import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
+import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
 
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
@@ -27,18 +25,18 @@ const ElementDetailsButtonWithHandler = (props) => {
     }
   );
 };
-const ElementNode = (props) => {
+function ElementNode(props) {
   const { enableElementTags } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })
   ] }, props.id);
-};
-const CompoundNode = (props) => {
+}
+function CompoundNode(props) {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -54,10 +52,7 @@ const CompoundNode = (props) => {
     ),
     /* @__PURE__ */ jsx(CompoundPorts, { ...props })
   ] }, props.id);
-};
-const EmptyNode = (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(
@@ -117,4 +112,4 @@ const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   ))
 ] });
 
-export { CompoundNode, CompoundPorts, ElementNode, ElementPorts, EmptyNode };
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

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

@@ -1,10 +1,10 @@
 import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
-import { RichText } from '@likec4/core/types';
+import { RichText, exact } from '@likec4/core/types';
 import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core/utils';
-import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, omit, find, only, unique, tap, reduce, sortBy } from 'remeda';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 
 const Sizes = {
   dagre: {
@@ -328,7 +328,6 @@ function layoutRelationshipsView(data, scope) {
         parent: null,
         x: position.x,
         y: position.y,
-        position: [position.x, position.y],
         title: "empty node",
         description: RichText.EMPTY,
         technology: null,
@@ -372,7 +371,6 @@ function layoutRelationshipsView(data, scope) {
       parent: parentId ?? null,
       x: position.x,
       y: position.y,
-      position: [position.x, position.y],
       title: element.title,
       description: element.summary,
       technology: element.technology,
@@ -390,10 +388,10 @@ function layoutRelationshipsView(data, scope) {
         width,
         height
       },
-      style: {
+      style: omit({
         ...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
         ...element.$element.style
-      },
+      }, ["color", "shape", "icon"]),
       navigateTo,
       ...children.length > 0 && { depth: nodeDepth(id) },
       children,
@@ -436,7 +434,7 @@ function layoutRelationshipsView(data, scope) {
       const label = onlyRelation?.title ?? "untitled";
       const isMultiple = relations.length > 1;
       const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : [])));
-      acc.push({
+      acc.push(exact({
         id: name,
         sourceFqn,
         source,
@@ -445,13 +443,16 @@ function layoutRelationshipsView(data, scope) {
         target,
         targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,
-        ...navigateTo && { navigateTo },
+        navigateTo,
+        color: onlyRelation?.color ?? "gray",
         existsInCurrentView: !scope || relations.every((r) => scope.includesRelation(r.id)),
         points: edge.points.map((p) => [p.x, p.y]),
-        line: onlyRelation?.$relationship.line ?? "dashed",
+        line: onlyRelation?.line ?? "dashed",
+        head: onlyRelation?.head,
+        tail: onlyRelation?.tail,
         relations: relations.map((r) => r.id),
         parent: null
-      });
+      }));
       return acc;
     }, [])
   };

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

@@ -1,10 +1,10 @@
 import { RelationshipsBrowserTypes } from './_types';
 import { LayoutRelationshipsViewResult } from './layout';
 export declare function viewToNodesEdge(view: Pick<LayoutRelationshipsViewResult, 'nodes' | 'edges'>): {
-    xynodes: RelationshipsBrowserTypes.Node[];
+    xynodes: RelationshipsBrowserTypes.AnyNode[];
     xyedges: RelationshipsBrowserTypes.Edge[];
 };
 export declare function useViewToNodesEdges({ edges, nodes }: LayoutRelationshipsViewResult): {
-    xynodes: RelationshipsBrowserTypes.Node[];
+    xynodes: RelationshipsBrowserTypes.AnyNode[];
     xyedges: RelationshipsBrowserTypes.Edge[];
 };

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

@@ -16,7 +16,6 @@ function viewToNodesEdge(view) {
     },
     []
   ));
-  const ns = "";
   const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   while (next = queue.dequeue()) {
@@ -28,14 +27,14 @@ function viewToNodesEdge(view) {
       }
     }
     const position = {
-      x: node.position[0],
-      y: node.position[1]
+      x: node.x,
+      y: node.y
     };
     if (parent) {
-      position.x -= parent.position[0];
-      position.y -= parent.position[1];
+      position.x -= parent.x;
+      position.y -= parent.y;
     }
-    const id = ns + node.id;
+    const id = node.id;
     const base = {
       id,
       draggable: false,
@@ -50,7 +49,7 @@ function viewToNodesEdge(view) {
       initialWidth: node.width,
       initialHeight: node.height,
       ...parent && {
-        parentId: ns + parent.id
+        parentId: parent.id
       }
     };
     const fqn = node.modelRef ?? null;
@@ -74,6 +73,7 @@ function viewToNodesEdge(view) {
             ...base,
             type: "compound",
             data: {
+              id,
               column: node.column,
               title: node.title,
               color: node.color,
@@ -97,6 +97,7 @@ function viewToNodesEdge(view) {
             ...base,
             type: "element",
             data: {
+              id,
               column: node.column,
               fqn,
               title: node.title,
@@ -121,7 +122,7 @@ function viewToNodesEdge(view) {
   for (const edge of view.edges) {
     const source = edge.source;
     const target = edge.target;
-    const id = ns + edge.id;
+    const id = edge.id;
     if (!hasAtLeast(edge.points, 2)) {
       console.error("edge should have at least 2 points", edge);
       continue;
@@ -133,8 +134,8 @@ function viewToNodesEdge(view) {
     xyedges.push({
       id,
       type: "relationship",
-      source: ns + source,
-      target: ns + target,
+      source,
+      target,
       sourceHandle: edge.sourceHandle,
       targetHandle: edge.targetHandle,
       // selectable: selectable,

package/dist/search/components/ElementsColumn.js

@@ -8,14 +8,14 @@ import { memo, useMemo, useEffect } from 'react';
 import { isEmpty, pipe, reduce, only, first } from 'remeda';
 import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
-import { sortByLabel } from '../../likec4model/useLikeC4ElementsTree.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { sortByLabel } from '../../hooks/useLikeC4ElementsTree.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
 import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {
@@ -34,7 +34,8 @@ const ElementsColumn = memo(() => {
         if (search.startsWith("#")) {
           return element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
         }
-        return (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search);
+        const value = element.title + " " + element.id + " " + element.summary.text;
+        return value.toLocaleLowerCase().includes(search);
       });
     }
     const byid = {};

package/dist/search/components/PickView.js

@@ -2,11 +2,11 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
 import { useWindowEvent } from '@mantine/hooks';
 import * as m from 'motion/react-m';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();

package/dist/search/components/SearchByTags.js

@@ -3,11 +3,11 @@ import { css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
 import { Button } from '@mantine/core';
 import { useRef } from 'react';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
-import { ElementTag } from '../../base/primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import { ElementTag } from '../../base-primitives/element/ElementTags.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -3,11 +3,11 @@ import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem
 import { useFocusWithin, useWindowEvent, useMergedRef } from '@mantine/hooks';
 import { memo, useRef } from 'react';
 import { keys } from 'remeda';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.js

@@ -7,13 +7,13 @@ import { memo, useRef } from 'react';
 import { first } from 'remeda';
 import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
@@ -28,7 +28,7 @@ const ViewsColumn = memo(() => {
         if (search.startsWith("#")) {
           return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
         }
-        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search);
+        return `${view.id} ${view.title} ${view.description.text}`.toLocaleLowerCase().includes(search);
       });
     }
   }

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"description" | "title" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"description" | "title" | "icon" | "root" | "descriptionColor">>;

package/dist/{bundle → shadowroot}/ShadowRoot.d.ts

@@ -6,7 +6,11 @@ type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
     mode?: 'open' | 'closed';
     delegatesFocus?: boolean;
     colorScheme?: 'light' | 'dark' | undefined;
+    keepAspectRatio?: false | undefined | {
+        width: number;
+        height: number;
+    };
     theme?: MantineThemeOverride | undefined;
 };
-export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shadowroot/ShadowRoot.js

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { MantineProvider } from '@mantine/core';
+import { useRef, useCallback } from 'react';
+import root from 'react-shadow';
+import { isDefined } from 'remeda';
+import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+import { useId } from '../hooks/useId.js';
+import { useColorScheme, useShadowRootStyle, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
+
+const Root = root["div"];
+function ShadowRoot({
+  children,
+  theme = DefaultTheme,
+  injectFontCss = true,
+  styleNonce,
+  colorScheme: explicitColorScheme,
+  keepAspectRatio = false,
+  ...props
+}) {
+  const colorScheme = useColorScheme(explicitColorScheme);
+  const id = useId();
+  const cssstyle = useShadowRootStyle(id, keepAspectRatio);
+  const rootRef = useRef(null);
+  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
+  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
+  let getStyleNonce;
+  let nonce;
+  if (isDefined(styleNonce)) {
+    if (typeof styleNonce === "string") {
+      nonce = styleNonce;
+      getStyleNonce = () => styleNonce;
+    } else if (typeof styleNonce === "function") {
+      nonce = styleNonce();
+      getStyleNonce = styleNonce;
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        type: "text/css",
+        nonce,
+        dangerouslySetInnerHTML: { __html: cssstyle }
+      }
+    ),
+    /* @__PURE__ */ jsx(Root, { ssr: false, ...props, styleSheets, "data-likec4-instance": id, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rootRef,
+        "data-mantine-color-scheme": colorScheme,
+        className: "likec4-shadow-root",
+        children: /* @__PURE__ */ jsx(
+          MantineProvider,
+          {
+            ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
+            defaultColorScheme: colorScheme,
+            getRootElement,
+            ...getStyleNonce && { getStyleNonce },
+            cssVariablesSelector: ".likec4-shadow-root",
+            theme,
+            children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+export { ShadowRoot };

package/dist/{bundle → shadowroot}/styles.css.d.ts

@@ -1,10 +1,10 @@
-import { DiagramView } from '@likec4/core';
 import { MantineThemeOverride } from '@mantine/core';
 export declare const DefaultTheme: MantineThemeOverride;
 export declare const cssInteractive: string;
 export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
-export declare function useShadowRootStyle(keepAspectRatio: boolean, view: DiagramView): [{
-    'data-likec4-instance': string;
-}, style: string];
+export declare function useShadowRootStyle(instanceId: string, keepAspectRatio?: false | {
+    width: number;
+    height: number;
+}): string;