@likec4/diagram 1.32.0 → 1.32.2

package/README.md

@@ -16,6 +16,7 @@ See:
 
 Contents:
 
+- [Model Provider](#model-provider)
 - [Bundled Version](#bundled-version)
   - [LikeC4View](#likec4view)
   - [ReactLikeC4](#reactlikec4)
@@ -27,6 +28,13 @@ Contents:
   - [Node renderer](#custom-node-renderer)
   - [Styles](#custom-styles)
 
+## Model Provider
+
+Diagram requires instance of `LikeC4Model.Layouted` to render.\
+You need to prepare it and wrap your diagram with`LikeC4ModelProvider` component.
+
+See [📖 Documentation](https://likec4.dev/tooling/react/#likec4modelprovider) for examples.
+
 ## Bundled version
 
 The easiest way to use this package is the bundled version.\
@@ -35,12 +43,11 @@ Diagram renders inside shadow DOM and has its own styles.
 ### LikeC4View
 
 ```tsx
-import { LikeC4Model } from '@likec4/core/model'
 import { LikeC4ModelProvider, LikeC4View } from '@likec4/diagram/bundle'
-
-// instance of LikeC4Model
-// See https://likec4.dev/tooling/model-api/
-const likec4model = LikeC4Model.fromDump()
+/**
+ * See https://likec4.dev/tooling/react/#likec4modelprovider
+ */
+import { likec4model } from './likec4-model.ts'
 
 function App() {
   return (

package/bundle/{chunk-BvTQaUYl.js → chunk-DlHyKoeo.js}

@@ -15484,7 +15484,7 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
   }, [delay, maxWait, ...deps]);
 }
 const noop$1 = () => {
-}, isBrowser = typeof globalThis < "u" && typeof navigator < "u" && typeof document < "u", isStrictEqual = (previous, next) => previous === next, basicDepsComparator = (d1, d2) => {
+}, isBrowser = typeof globalThis < "u" && typeof navigator < "u" && typeof document < "u", basicDepsComparator = (d1, d2) => {
   if (d1 === d2)
     return !0;
   if (d1.length !== d2.length)
@@ -16183,11 +16183,19 @@ const LikeC4ModelContext = createContext(null);
 function useLikeC4Model(type) {
   const model = useContext(LikeC4ModelContext);
   if (!model)
-    throw new Error("No LikeC4Model found in context");
+    throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
   if (t$3(type) && model.stage !== type)
     throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
   return model;
 }
+function useLikeC4ViewModel(viewId) {
+  const view = useLikeC4Model("layouted").findView(viewId);
+  if (!view)
+    return null;
+  if (!view.isDiagram())
+    throw new Error(`View "${viewId}" is not layouted`);
+  return view;
+}
 function useLikeC4Specification() {
   return useLikeC4Model().$data.specification;
 }
@@ -21452,7 +21460,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   openDelay = 130,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = useState(openDelay === 0), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
+  const [opened, setOpened] = useState(openDelay === 0), focusTrapRef = useFocusTrap(opened), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   const close = useDebouncedCallback(
     () => {
@@ -21474,8 +21482,17 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   return backdrop?.opacity !== void 0 && (targetBackdropOpacity = `${backdrop.opacity * 100}%`), /* @__PURE__ */ jsx(
     m.dialog,
     {
-      ref: useMergedRef(dialogRef, ref),
-      className: cx(ReactRemoveScroll.classNames.fullWidth, classes2?.dialog, className, styles.dialog),
+      ref: useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref
+      ),
+      className: cx(
+        classes2?.dialog,
+        className,
+        styles.dialog,
+        fullscreen && ReactRemoveScroll.classNames.fullWidth
+      ),
       layout: !0,
       style: {
         // @ts-ignore
@@ -21531,7 +21548,17 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
         e2.stopPropagation(), close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(ReactRemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsx("div", { className: cx(classes2?.body, styles.body, "overlay-body"), children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) }) })
+      children: /* @__PURE__ */ jsx(ReactRemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            classes2?.body,
+            styles.body,
+            "overlay-body"
+          ),
+          children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 })
+        }
+      ) })
     }
   );
 });
@@ -21566,7 +21593,7 @@ export {
   findElementAncestor as Z,
   useClickOutside as _,
   useMediaQuery as a,
-  t$1 as a$,
+  BackgroundVariant as a$,
   C as a0,
   s as a1,
   u$2 as a2,
@@ -21594,16 +21621,16 @@ export {
   isSVGComponent as aO,
   useDebouncedCallback as aP,
   isBrowser as aQ,
-  isStrictEqual as aR,
-  useUpdateEffect$1 as aS,
-  getPatternStyles as aT,
-  patternFns as aU,
-  splitProps as aV,
-  styled as aW,
-  css as aX,
-  useLikeC4Specification as aY,
-  useUpdateEffect as aZ,
-  n as a_,
+  getPatternStyles as aR,
+  patternFns as aS,
+  splitProps as aT,
+  styled as aU,
+  css as aV,
+  useLikeC4Specification as aW,
+  useUpdateEffect as aX,
+  n as aY,
+  t$1 as aZ,
+  Background as a_,
   LazyContext as aa,
   loadExternalIsValidProp as ab,
   resolveVariantFromProps as ac,
@@ -21631,202 +21658,201 @@ export {
   degrees$1 as ay,
   vw as az,
   useMantineTheme as b,
-  IconCheck as b$,
-  Background as b0,
-  BackgroundVariant as b1,
-  useIsZoomTooSmall as b2,
-  useXYStoreApi as b3,
-  index as b4,
-  stopPropagation as b5,
-  cx as b6,
-  useStore$1 as b7,
-  XSTATE_STOP as b8,
-  cloneMachineSnapshot as b9,
-  STATE_DELIMITER as bA,
-  mapValues as bB,
-  toArray as bC,
-  formatTransitions as bD,
-  toTransitionConfigArray as bE,
-  formatTransition as bF,
-  getCandidates as bG,
-  NULL_EVENT as bH,
-  createInvokeId as bI,
-  getDelayedTransitions as bJ,
-  formatInitialTransition as bK,
-  deepEqual as bL,
-  ActionIcon as bM,
-  IconZoomScan as bN,
-  sva as bO,
-  Box as bP,
-  n$1 as bQ,
-  EdgeLabelRenderer as bR,
-  e as bS,
-  useDiagramContext as bT,
-  useDiagram as bU,
-  useMantinePortalProps as bV,
-  PopoverTarget as bW,
-  PopoverDropdown as bX,
-  Stack as bY,
-  Group as bZ,
-  Button as b_,
-  evaluateGuard as ba,
-  createErrorActorEvent as bb,
-  XSTATE_ERROR as bc,
-  ProcessingStatus as bd,
-  resolveReferencedActor as be,
-  createActor as bf,
-  cancel as bg,
-  raise as bh,
-  spawnChild as bi,
-  stopChild as bj,
-  resolveStateValue as bk,
-  getAllStateNodes as bl,
-  getStateNodes as bm,
-  createMachineSnapshot as bn,
-  isInFinalState as bo,
-  macrostep as bp,
-  transitionNode as bq,
-  resolveActionsAndContext as br,
-  createInitEvent as bs,
-  microstep as bt,
-  getInitialStateNodes as bu,
-  toStatePath as bv,
-  isStateId as bw,
-  getStateNodeByPath as bx,
-  getPersistedSnapshot as by,
-  $$ACTOR_TYPE as bz,
+  useLikeC4Model as b$,
+  useIsZoomTooSmall as b0,
+  useXYStoreApi as b1,
+  index as b2,
+  stopPropagation as b3,
+  cx as b4,
+  useStore$1 as b5,
+  XSTATE_STOP as b6,
+  cloneMachineSnapshot as b7,
+  evaluateGuard as b8,
+  createErrorActorEvent as b9,
+  toArray as bA,
+  formatTransitions as bB,
+  toTransitionConfigArray as bC,
+  formatTransition as bD,
+  getCandidates as bE,
+  NULL_EVENT as bF,
+  createInvokeId as bG,
+  getDelayedTransitions as bH,
+  formatInitialTransition as bI,
+  deepEqual as bJ,
+  ActionIcon as bK,
+  IconZoomScan as bL,
+  sva as bM,
+  Box as bN,
+  n$1 as bO,
+  EdgeLabelRenderer as bP,
+  e as bQ,
+  useDiagramContext as bR,
+  useDiagram as bS,
+  useMantinePortalProps as bT,
+  PopoverTarget as bU,
+  PopoverDropdown as bV,
+  Stack as bW,
+  Group as bX,
+  Button as bY,
+  IconCheck as bZ,
+  cva as b_,
+  XSTATE_ERROR as ba,
+  ProcessingStatus as bb,
+  resolveReferencedActor as bc,
+  createActor as bd,
+  cancel as be,
+  raise as bf,
+  spawnChild as bg,
+  stopChild as bh,
+  resolveStateValue as bi,
+  getAllStateNodes as bj,
+  getStateNodes as bk,
+  createMachineSnapshot as bl,
+  isInFinalState as bm,
+  macrostep as bn,
+  transitionNode as bo,
+  resolveActionsAndContext as bp,
+  createInitEvent as bq,
+  microstep as br,
+  getInitialStateNodes as bs,
+  toStatePath as bt,
+  isStateId as bu,
+  getStateNodeByPath as bv,
+  getPersistedSnapshot as bw,
+  $$ACTOR_TYPE as bx,
+  STATE_DELIMITER as by,
+  mapValues as bz,
   useMantineStyleNonce as c,
-  DiagramFeatures as c$,
-  cva as c0,
-  useLikeC4Model as c1,
-  findDiagramNode as c2,
-  findDiagramEdge as c3,
-  Menu as c4,
-  MenuTarget as c5,
-  MenuDropdown as c6,
-  MenuLabel as c7,
-  MenuDivider as c8,
-  MenuItem as c9,
-  customNode as cA,
-  CompoundNodeContainer as cB,
-  CompoundTitle as cC,
-  ElementNodeContainer as cD,
-  ElementShape as cE,
-  ElementTitle as cF,
-  ElementTags as cG,
-  ElementDetailsButton as cH,
-  Handle as cI,
-  Position as cJ,
-  getDefaultExportFromCjs as cK,
-  l$1 as cL,
-  IconSelector as cM,
-  SegmentedControl as cN,
-  ReactFlowProvider as cO,
-  useStoreApi as cP,
-  useReactFlow as cQ,
-  Panel as cR,
-  m as cS,
-  u as cT,
-  useSyncedRef as cU,
-  IconRenderer as cV,
-  useTimeoutEffect as cW,
-  ReactRemoveScroll as cX,
-  Flex as cY,
-  ElementTag as cZ,
-  ActionIconGroup as c_,
-  useEnabledFeatures as ca,
-  useDiagramEventHandlers as cb,
-  TooltipGroup as cc,
-  Space as cd,
-  Tooltip$1 as ce,
-  IfEnabled as cf,
-  IconFileSymlink as cg,
-  getNodeDimensions as ch,
-  useIsPanning as ci,
-  useXYFlow as cj,
-  useDiagramActorSnapshot as ck,
-  useXYInternalNode as cl,
-  isSamePoint as cm,
-  bezierControlPoints as cn,
-  bezierPath as co,
-  ViewGroupNode as cp,
-  CompoundDeploymentNode as cq,
-  CompoundElementNode as cr,
-  DeploymentNode as cs,
-  ElementNode as ct,
-  shallowEqual as cu,
-  useSelector as cv,
-  getBezierPath as cw,
-  useCurrentViewId as cx,
-  ElementActionButtons as cy,
-  IconTransform as cz,
+  useXYStore as c$,
+  findDiagramNode as c0,
+  findDiagramEdge as c1,
+  Menu as c2,
+  MenuTarget as c3,
+  MenuDropdown as c4,
+  MenuLabel as c5,
+  MenuDivider as c6,
+  MenuItem as c7,
+  useEnabledFeatures as c8,
+  useDiagramEventHandlers as c9,
+  CompoundTitle as cA,
+  ElementNodeContainer as cB,
+  ElementShape as cC,
+  ElementTitle as cD,
+  ElementTags as cE,
+  ElementDetailsButton as cF,
+  Handle as cG,
+  Position as cH,
+  getDefaultExportFromCjs as cI,
+  l$1 as cJ,
+  IconSelector as cK,
+  SegmentedControl as cL,
+  ReactFlowProvider as cM,
+  useStoreApi as cN,
+  useReactFlow as cO,
+  Panel as cP,
+  m as cQ,
+  u as cR,
+  useSyncedRef as cS,
+  IconRenderer as cT,
+  useTimeoutEffect as cU,
+  ReactRemoveScroll as cV,
+  Flex as cW,
+  ElementTag as cX,
+  ActionIconGroup as cY,
+  DiagramFeatures as cZ,
+  Divider as c_,
+  TooltipGroup as ca,
+  Space as cb,
+  Tooltip$1 as cc,
+  IfEnabled as cd,
+  IconFileSymlink as ce,
+  getNodeDimensions as cf,
+  useIsPanning as cg,
+  useXYFlow as ch,
+  useDiagramActorSnapshot as ci,
+  useXYInternalNode as cj,
+  isSamePoint as ck,
+  bezierControlPoints as cl,
+  bezierPath as cm,
+  ViewGroupNode as cn,
+  CompoundDeploymentNode as co,
+  CompoundElementNode as cp,
+  DeploymentNode as cq,
+  ElementNode as cr,
+  shallowEqual as cs,
+  useSelector as ct,
+  getBezierPath as cu,
+  useCurrentViewId as cv,
+  ElementActionButtons as cw,
+  IconTransform as cx,
+  customNode as cy,
+  CompoundNodeContainer as cz,
   alpha$1 as d,
-  Toolbar as d$,
-  Divider as d0,
-  useXYStore as d1,
-  useReducedMotionConfig as d2,
-  Overlay as d3,
-  VisuallyHidden as d4,
-  MotionDiv as d5,
-  IconOrShapeRenderer as d6,
-  MotionButton as d7,
-  FocusTrap as d8,
-  HStack as d9,
-  or as dA,
-  nodeToRect as dB,
-  useDiagramEventHandlersRef as dC,
-  useActorRef as dD,
-  DiagramActorContextProvider as dE,
-  IconRendererProvider as dF,
-  DiagramEventHandlers as dG,
-  ReduceGraphicsContext as dH,
-  RootContainer as dI,
-  useMutationObserver as dJ,
-  t$2 as dK,
-  Portal as dL,
-  shallowEqual$1 as dM,
-  LikeC4ModelContext as dN,
-  useSetState as dO,
-  CompoundActionButton as dP,
-  CompoundDetailsButton as dQ,
-  DefaultHandles as dR,
-  CompoundActions as dS,
-  CompoundDeploymentToolbar as dT,
-  CompoundDetailsButtonWithHandler as dU,
-  CompoundElementToolbar as dV,
-  DeploymentElementActions as dW,
-  DeploymentElementToolbar as dX,
-  ElementActions as dY,
-  ElementDetailsButtonWithHandler as dZ,
-  ElementToolbar as d_,
-  t$4 as da,
-  isMacOs as db,
-  FloatingIndicator as dc,
-  clampUseMovePosition as dd,
-  useMove as de,
-  HoverCard as df,
-  HoverCardTarget as dg,
-  HoverCardDropdown as dh,
-  useDiagramSyncLayoutState as di,
-  ButtonGroup as dj,
-  useIsReducedGraphics as dk,
-  usePanningAtom as dl,
-  useTimeout as dm,
-  useCustomCompareMemo as dn,
-  applyEdgeChanges as dp,
-  applyNodeChanges as dq,
-  getViewportForBounds as dr,
-  typedSystem as ds,
-  centerXYInternalNode as dt,
-  t$3 as du,
-  getBoundsOfRects as dv,
-  boxToRect as dw,
-  and as dx,
-  AllDisabled as dy,
-  focusedBounds as dz,
+  IfNotEnabled as d$,
+  useReducedMotionConfig as d0,
+  Overlay as d1,
+  t$2 as d2,
+  VisuallyHidden as d3,
+  MotionDiv as d4,
+  IconOrShapeRenderer as d5,
+  MotionButton as d6,
+  FocusTrap as d7,
+  HStack as d8,
+  t$4 as d9,
+  nodeToRect as dA,
+  useDiagramEventHandlersRef as dB,
+  useActorRef as dC,
+  DiagramActorContextProvider as dD,
+  IconRendererProvider as dE,
+  DiagramEventHandlers as dF,
+  ReduceGraphicsContext as dG,
+  RootContainer as dH,
+  useMutationObserver as dI,
+  Portal as dJ,
+  shallowEqual$1 as dK,
+  LikeC4ModelContext as dL,
+  useLikeC4ViewModel as dM,
+  useSetState as dN,
+  CompoundActionButton as dO,
+  CompoundDetailsButton as dP,
+  DefaultHandles as dQ,
+  CompoundActions as dR,
+  CompoundDeploymentToolbar as dS,
+  CompoundDetailsButtonWithHandler as dT,
+  CompoundElementToolbar as dU,
+  DeploymentElementActions as dV,
+  DeploymentElementToolbar as dW,
+  ElementActions as dX,
+  ElementDetailsButtonWithHandler as dY,
+  ElementToolbar as dZ,
+  Toolbar as d_,
+  isMacOs as da,
+  FloatingIndicator as db,
+  clampUseMovePosition as dc,
+  useMove as dd,
+  HoverCard as de,
+  HoverCardTarget as df,
+  HoverCardDropdown as dg,
+  useDiagramSyncLayoutState as dh,
+  ButtonGroup as di,
+  useIsReducedGraphics as dj,
+  usePanningAtom as dk,
+  useTimeout as dl,
+  useCustomCompareMemo as dm,
+  applyEdgeChanges as dn,
+  applyNodeChanges as dp,
+  getViewportForBounds as dq,
+  typedSystem as dr,
+  centerXYInternalNode as ds,
+  t$3 as dt,
+  getBoundsOfRects as du,
+  boxToRect as dv,
+  and as dw,
+  AllDisabled as dx,
+  focusedBounds as dy,
+  or as dz,
   em as e,
-  IfNotEnabled as e0,
-  IfNotReadOnly as e1,
+  IfNotReadOnly as e0,
   getPrimaryContrastColor as f,
   getPrimaryShade as g,
   deepMerge as h,

package/bundle/custom.js

@@ -1,5 +1,5 @@
-import { cA as customNode, c1 as useLikeC4Model } from "./chunk-BvTQaUYl.js";
-import { dP, dS, cq, dT, dQ, dU, cr, dV, cB, cC, dR, dW, dX, cs, cy, dY, cH, dZ, ct, cD, cE, cZ, cG, cF, d_, d6, cV, dF, cf, e0, e1, d3, d$, cp, cx, bU, bT, cb, ca, aY, bV, dO, aZ, cj, cl, d1, b3 } from "./chunk-BvTQaUYl.js";
+import { cy as customNode, b$ as useLikeC4Model } from "./chunk-DlHyKoeo.js";
+import { dO, dR, co, dS, dP, dT, cp, dU, cz, cA, dQ, dV, dW, cq, cw, dX, cF, dY, cr, cB, cC, cX, cE, cD, dZ, d5, cT, dE, cd, d$, e0, d1, d_, cn, cv, bS, bR, c9, c8, aW, dM, bT, dN, aX, ch, cj, c$, b1 } from "./chunk-DlHyKoeo.js";
 import { jsx } from "react/jsx-runtime";
 function customDiagramNode(Node) {
   return customNode((props) => {
@@ -9,57 +9,58 @@ function customDiagramNode(Node) {
 }
 const elementNode = customDiagramNode, deploymentNode = customDiagramNode, compoundElementNode = customDiagramNode, compoundDeploymentNode = customDiagramNode, viewGroupNode = customDiagramNode;
 export {
-  dP as CompoundActionButton,
-  dS as CompoundActions,
-  cq as CompoundDeploymentNode,
-  dT as CompoundDeploymentToolbar,
-  dQ as CompoundDetailsButton,
-  dU as CompoundDetailsButtonWithHandler,
-  cr as CompoundElementNode,
-  dV as CompoundElementToolbar,
-  cB as CompoundNodeContainer,
-  cC as CompoundTitle,
-  dR as DefaultHandles,
-  dW as DeploymentElementActions,
-  dX as DeploymentElementToolbar,
-  cs as DeploymentNode,
-  cy as ElementActionButtons,
-  dY as ElementActions,
-  cH as ElementDetailsButton,
-  dZ as ElementDetailsButtonWithHandler,
-  ct as ElementNode,
-  cD as ElementNodeContainer,
-  cE as ElementShape,
-  cZ as ElementTag,
-  cG as ElementTags,
-  cF as ElementTitle,
-  d_ as ElementToolbar,
-  d6 as IconOrShapeRenderer,
-  cV as IconRenderer,
-  dF as IconRendererProvider,
-  cf as IfEnabled,
-  e0 as IfNotEnabled,
-  e1 as IfNotReadOnly,
-  d3 as Overlay,
-  d$ as Toolbar,
-  cp as ViewGroupNode,
+  dO as CompoundActionButton,
+  dR as CompoundActions,
+  co as CompoundDeploymentNode,
+  dS as CompoundDeploymentToolbar,
+  dP as CompoundDetailsButton,
+  dT as CompoundDetailsButtonWithHandler,
+  cp as CompoundElementNode,
+  dU as CompoundElementToolbar,
+  cz as CompoundNodeContainer,
+  cA as CompoundTitle,
+  dQ as DefaultHandles,
+  dV as DeploymentElementActions,
+  dW as DeploymentElementToolbar,
+  cq as DeploymentNode,
+  cw as ElementActionButtons,
+  dX as ElementActions,
+  cF as ElementDetailsButton,
+  dY as ElementDetailsButtonWithHandler,
+  cr as ElementNode,
+  cB as ElementNodeContainer,
+  cC as ElementShape,
+  cX as ElementTag,
+  cE as ElementTags,
+  cD as ElementTitle,
+  dZ as ElementToolbar,
+  d5 as IconOrShapeRenderer,
+  cT as IconRenderer,
+  dE as IconRendererProvider,
+  cd as IfEnabled,
+  d$ as IfNotEnabled,
+  e0 as IfNotReadOnly,
+  d1 as Overlay,
+  d_ as Toolbar,
+  cn as ViewGroupNode,
   compoundDeploymentNode,
   compoundElementNode,
   deploymentNode,
   elementNode,
-  cx as useCurrentViewId,
-  bU as useDiagram,
-  bT as useDiagramContext,
-  cb as useDiagramEventHandlers,
-  ca as useEnabledFeatures,
+  cv as useCurrentViewId,
+  bS as useDiagram,
+  bR as useDiagramContext,
+  c9 as useDiagramEventHandlers,
+  c8 as useEnabledFeatures,
   useLikeC4Model,
-  aY as useLikeC4Specification,
-  bV as useMantinePortalProps,
-  dO as useSetState,
-  aZ as useUpdateEffect,
-  cj as useXYFlow,
-  cl as useXYInternalNode,
-  d1 as useXYStore,
-  b3 as useXYStoreApi,
+  aW as useLikeC4Specification,
+  dM as useLikeC4ViewModel,
+  bT as useMantinePortalProps,
+  dN as useSetState,
+  aX as useUpdateEffect,
+  ch as useXYFlow,
+  cj as useXYInternalNode,
+  c$ as useXYStore,
+  b1 as useXYStoreApi,
   viewGroupNode
 };