likec4 1.17.0 → 1.18.0

package/{dist/__app__ → __app__}/react/likec4.tsx

@@ -6,12 +6,13 @@ import {
   type LikeC4ViewProps as BaseLikeC4ViewProps,
   ReactLikeC4 as GenericReactLikeC4,
   type ReactLikeC4Props as GenericReactLikeC4Props,
-  useColorScheme
+  useColorScheme,
+  ViewNotFound
 } from 'likec4/react'
 import { memo, type PropsWithChildren, useCallback, useState } from 'react'
 import { Icons } from 'virtual:likec4/icons'
 import type { DiagramView, LikeC4ElementKind, LikeC4Tag, LikeC4ViewId } from 'virtual:likec4/model'
-import { likec4model as likeC4Model, LikeC4Views, useLikeC4ModelAtom as useLikeC4Model } from 'virtual:likec4/model'
+import { likeC4Model, LikeC4Views, useLikeC4Model } from 'virtual:likec4/model'
 
 type IconRendererProps = {
   node: {
@@ -28,10 +29,10 @@ export function RenderIcon({ node }: IconRendererProps) {
 
 export { likeC4Model, LikeC4Views, useLikeC4Model }
 
-export const useLikeC4ViewModel = (viewId: LikeC4ViewId): LikeC4Model.Layouted.ViewModel =>
-  useLikeC4Model().view(viewId)
+export const useLikeC4ViewModel = (viewId: LikeC4ViewId): LikeC4Model.View => useLikeC4Model().view(viewId as any)
 
-export const useLikeC4View = (viewId: LikeC4ViewId): DiagramView => useLikeC4Model().view(viewId).view as any
+export const useLikeC4View = (viewId: LikeC4ViewId): DiagramView =>
+  useLikeC4Model().view(viewId as any).$view as DiagramView
 
 export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
 
@@ -43,24 +44,6 @@ export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId {
   )
 }
 
-const NotFound = ({ viewId }: { viewId: string }) => (
-  <div
-    style={{
-      margin: '1rem 0'
-    }}>
-    <div
-      style={{
-        margin: '0 auto',
-        display: 'inline-block',
-        padding: '2rem',
-        background: 'rgba(250,82,82,.15)',
-        color: '#ffa8a8'
-      }}>
-      View <code>{viewId}</code> not found
-    </div>
-  </div>
-)
-
 export function LikeC4ModelProvider({ children }: PropsWithChildren) {
   const likeC4Model = useLikeC4Model()
   return (
@@ -104,11 +87,11 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
   const colorScheme = useColorScheme(explicitColorScheme)
 
   if (!view) {
-    return <NotFound viewId={viewId} />
+    return <ViewNotFound viewId={viewId} />
   }
 
   if (browserViewId && !browserView) {
-    return <NotFound viewId={browserViewId} />
+    return <ViewNotFound viewId={browserViewId} />
   }
 
   if (interactive && enableFocusMode) {
@@ -169,7 +152,7 @@ export type ReactLikeC4Props =
 const ReactLikeC4Memo = /* @__PURE__ */ memo<ReactLikeC4Props>(function ReactLikeC4({ viewId, ...props }) {
   const view = LikeC4Views[viewId]
   if (!view) {
-    return <NotFound viewId={viewId} />
+    return <ViewNotFound viewId={viewId} />
   }
   return (
     <LikeC4ModelProvider>

package/{dist/__app__/src/chunks/-index-overview-DNT3FQkn.js → __app__/src/chunks/-index-overview-CBnvpD1d.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
-import { c as createReactComponent, I as IconFolderFilled, e, u as useUpdateEffect, i, n as nonexhaustive } from "./main-Beyl8kQ7.js";
-import { u as useRouter } from "./tanstack-router-DJI32bwX.js";
-import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-CLNXvKhh.js";
+import { c as createReactComponent, I as IconFolderFilled, n, u as useUpdateEffect, i, a as nonexhaustive } from "./main-ByUdz_Be.js";
+import { u as useRouter } from "./tanstack-router-BWjXKr0n.js";
+import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-DslTxitT.js";
 import { memo, useRef, useMemo } from "react";
-import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-CdYQpHSU.js";
+import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-oFa3ZrEq.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
@@ -46,7 +46,7 @@ const FolderNode = /* @__PURE__ */ memo(function({
   parentId,
   id
 }) {
-  const isTopLevel = e(parentId);
+  const isTopLevel = n(parentId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
     /* @__PURE__ */ jsx(
@@ -75,7 +75,7 @@ const FolderNode = /* @__PURE__ */ memo(function({
   parentId,
   id
 }) {
-  const isTopLevel = e(parentId);
+  const isTopLevel = n(parentId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
     /* @__PURE__ */ jsx(
@@ -142,7 +142,7 @@ const FolderNode = /* @__PURE__ */ memo(function({
   link: LinkEdge
 }, overviewGraphToXYFlowData = (graph) => ({
   nodes: graph.nodes.map(({ id, parentId, position, width, height, ...node }) => {
-    const parent = parentId ? graph.nodes.find((n) => n.id === parentId) : null, rect = {
+    const parent = parentId ? graph.nodes.find((n2) => n2.id === parentId) : null, rect = {
       ...position,
       width,
       height
@@ -214,9 +214,9 @@ function OverviewDiagrams({
   const router = useRouter(), xyflowRef = useRef(), { colorScheme } = useMantineColorScheme(), xyflowdata = useMemo(() => overviewGraphToXYFlowData(graph), [graph]), [nodes, setNodes, onNodesChange] = useNodesState(xyflowdata.nodes), [edges, setEdges, onEdgeChanges] = useEdgesState(xyflowdata.edges);
   useUpdateEffect(() => {
     setNodes(
-      (nodes2) => xyflowdata.nodes.map((n) => {
-        const current = nodes2.find((node) => node.id === n.id);
-        return current ? { ...i(current, ["selected", "hidden"]), ...n } : n;
+      (nodes2) => xyflowdata.nodes.map((n2) => {
+        const current = nodes2.find((node) => node.id === n2.id);
+        return current ? { ...i(current, ["selected", "hidden"]), ...n2 } : n2;
       })
     ), setEdges(xyflowdata.edges);
   }, [xyflowdata.nodes, xyflowdata.edges]);
@@ -276,7 +276,7 @@ function OverviewDiagrams({
       onInit: (instance) => xyflowRef.current = instance,
       onNodeClick: (event, node) => {
         if (node.type === "view") {
-          event.stopPropagation(), setNodes((nodes2) => nodes2.map(({ data, ...n }) => ({ ...n, data: { ...data, dimmed: n.id !== node.id } }))), xyflowRef.current?.fitView({
+          event.stopPropagation(), setNodes((nodes2) => nodes2.map(({ data, ...n2 }) => ({ ...n2, data: { ...data, dimmed: n2.id !== node.id } }))), xyflowRef.current?.fitView({
             maxZoom: 10,
             padding: 0,
             nodes: [node],
@@ -294,7 +294,7 @@ function OverviewDiagrams({
           }, 800);
           return;
         }
-        node.selected && (event.stopPropagation(), setNodes((nodes2) => nodes2.map((n) => n.id === node.id ? { ...n, selected: !1 } : n)));
+        node.selected && (event.stopPropagation(), setNodes((nodes2) => nodes2.map((n2) => n2.id === node.id ? { ...n2, selected: !1 } : n2)));
       },
       children: /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, size: 4, gap: 50 })
     }

package/{dist/__app__/src/chunks/likec4-CLNXvKhh.js → __app__/src/chunks/likec4-DslTxitT.js}

@@ -2486,19 +2486,15 @@ function nodeHasDimensions(node) {
   return (node.measured?.width ?? node.width ?? node.initialWidth) !== void 0 && (node.measured?.height ?? node.height ?? node.initialHeight) !== void 0;
 }
 function evaluateAbsolutePosition(position, dimensions = { width: 0, height: 0 }, parentId, nodeLookup, nodeOrigin) {
-  let nextParentId = parentId;
-  const positionAbsolute = { ...position };
-  for (; nextParentId; ) {
-    const parent = nodeLookup.get(nextParentId);
-    if (nextParentId = parent?.parentId, parent) {
-      const origin = parent.origin || nodeOrigin;
-      positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0], positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
-    }
+  const positionAbsolute = { ...position }, parent = nodeLookup.get(parentId);
+  if (parent) {
+    const origin = parent.origin || nodeOrigin;
+    positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0], positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
   }
   return positionAbsolute;
 }
-function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = !1, transform: transform2 }) {
-  const { x, y } = getEventPosition(event), pointerPos = pointToRendererPoint({ x, y }, transform2), { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
+function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = !1, transform: transform2, containerBounds }) {
+  const { x, y } = getEventPosition(event), pointerPos = pointToRendererPoint({ x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) }, transform2), { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
   return {
     xSnapped,
     ySnapped,
@@ -3120,7 +3116,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     function startDrag(event) {
       const { nodeLookup, multiSelectionActive, nodesDraggable, transform: transform2, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges } = getStoreItems();
       dragStarted = !0, (!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId && (nodeLookup.get(nodeId)?.selected || unselectNodesAndEdges()), isSelectable && selectNodesOnDrag && nodeId && onNodeMouseDown?.(nodeId);
-      const pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      const pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds });
       if (lastPos = pointerPos, dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId), dragItems.size > 0 && (onDragStart || onNodeDragStart || !nodeId && onSelectionDragStart)) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
@@ -3132,9 +3128,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     }
     const d3DragInstance = drag().clickDistance(nodeClickDistance).on("start", (event) => {
       const { domNode: domNode2, nodeDragThreshold, transform: transform2, snapGrid, snapToGrid } = getStoreItems();
-      abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), containerBounds = domNode2?.getBoundingClientRect() || null, mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+      containerBounds = domNode2?.getBoundingClientRect() || null, abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds }), mousePosition = getEventPosition(event.sourceEvent, containerBounds);
     }).on("drag", (event) => {
-      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds });
       if ((event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
       nodeId && !nodeLookup.has(nodeId)) && (abortDrag = !0), !abortDrag) {
         if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
@@ -3694,12 +3690,18 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
   function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize }) {
     let prevValues = { ...initPrevValues$1 }, startValues = { ...initStartValues };
     const controlDirection = getControlDirection(controlPosition);
-    let node, childNodes = [], parentNode, parentExtent, childExtent;
+    let node, containerBounds = null, childNodes = [], parentNode, parentExtent, childExtent;
     const dragHandler = drag().on("start", (event) => {
-      const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
+      const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
       if (node = nodeLookup.get(nodeId), !node)
         return;
-      const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      containerBounds = paneDomNode?.getBoundingClientRect() ?? null;
+      const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, {
+        transform: transform2,
+        snapGrid,
+        snapToGrid,
+        containerBounds
+      });
       prevValues = {
         width: node.measured.width ?? 0,
         height: node.measured.height ?? 0,
@@ -3725,7 +3727,12 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         }
       onResizeStart?.(event, { ...prevValues });
     }).on("drag", (event) => {
-      const { transform: transform2, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(), pointerPosition = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), childChanges = [];
+      const { transform: transform2, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(), pointerPosition = getPointerPosition(event.sourceEvent, {
+        transform: transform2,
+        snapGrid,
+        snapToGrid,
+        containerBounds
+      }), childChanges = [];
       if (!node)
         return;
       const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x !== prevX && isWidthChange, isYPosChange = y !== prevY && isHeightChange;
@@ -4006,7 +4013,12 @@ const defaultDoc = typeof document < "u" ? document : null;
 function useKeyPress(keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: !0 }) {
   const [keyPressed, setKeyPressed] = useState(!1), modifierPressed = useRef(!1), pressedKeys = useRef(/* @__PURE__ */ new Set([])), [keyCodes, keysToWatch] = useMemo(() => {
     if (keyCode !== null) {
-      const keys = (Array.isArray(keyCode) ? keyCode : [keyCode]).filter((kc) => typeof kc == "string").map((kc) => kc.split("+")), keysFlat = keys.reduce((res, item) => res.concat(...item), []);
+      const keys = (Array.isArray(keyCode) ? keyCode : [keyCode]).filter((kc) => typeof kc == "string").map((kc) => kc.replace("+", `
+`).replace(`
+
+`, `
++`).split(`
+`)), keysFlat = keys.reduce((res, item) => res.concat(...item), []);
       return [keys, keysFlat];
     }
     return [[], []];
@@ -4207,15 +4219,11 @@ function fixedForwardRef(render) {
 }
 const useIsomorphicLayoutEffect = typeof window < "u" ? useLayoutEffect : useEffect;
 function useQueue(runQueue) {
-  const [shouldFlush, setShouldFlush] = useState(!1), [queue] = useState(() => createQueue(() => setShouldFlush(!0)));
+  const [serial, setSerial] = useState(BigInt(0)), [queue] = useState(() => createQueue(() => setSerial((n2) => n2 + BigInt(1))));
   return useIsomorphicLayoutEffect(() => {
-    if (!shouldFlush) {
-      queue.reset();
-      return;
-    }
     const queueItems = queue.get();
-    queueItems.length && (runQueue(queueItems), queue.reset()), setShouldFlush(!1);
-  }, [shouldFlush]), queue;
+    queueItems.length && (runQueue(queueItems), queue.reset());
+  }, [serial]), queue;
 }
 function createQueue(cb) {
   let queue = [];
@@ -5935,13 +5943,14 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
         domNode: resizeControlRef.current,
         nodeId: id2,
         getStoreItems: () => {
-          const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin } = store.getState();
+          const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin, domNode } = store.getState();
           return {
             nodeLookup,
             transform: transform2,
             snapGrid,
             snapToGrid,
-            nodeOrigin
+            nodeOrigin,
+            paneDomNode: domNode
           };
         },
         onChange: (change, childChanges) => {
@@ -6078,23 +6087,23 @@ export {
   BackgroundVariant as c,
   useReactFlow as d,
   useStoreApi as e,
-  useStore as f,
+  useInternalNode as f,
   getDefaultExportFromCjs as g,
-  useNodesData as h,
+  useStore as h,
   index as i,
-  getNodeDimensions as j,
-  createWithEqualityFn as k,
-  applyNodeChanges as l,
-  applyEdgeChanges as m,
-  getViewportForBounds as n,
-  getBoundsOfRects as o,
-  boxToRect as p,
-  useStoreWithEqualityFn as q,
-  getBezierPath as r,
+  useNodesData as j,
+  getNodeDimensions as k,
+  createWithEqualityFn as l,
+  applyNodeChanges as m,
+  applyEdgeChanges as n,
+  getViewportForBounds as o,
+  getBoundsOfRects as p,
+  boxToRect as q,
+  useStoreWithEqualityFn as r,
   shallow$1 as s,
-  Panel as t,
+  getBezierPath as t,
   useNodesState as u,
-  useOnViewportChange as v,
+  Panel as v,
   withSelectorExports as w,
-  useInternalNode as x
+  useOnViewportChange as x
 };