likec4 1.19.1 → 1.20.0

package/__app__/react/likec4.tsx

@@ -1,24 +1,21 @@
 import type { LikeC4Model } from '@likec4/core/model'
+import type { DiagramView, ViewId } from '@likec4/core/types'
 import {
-  type LikeC4ViewProps as BaseLikeC4ViewProps,
+  type LikeC4ViewProps,
   type ReactLikeC4Props as GenericReactLikeC4Props,
-  LikeC4Browser,
   LikeC4ModelProvider as GenericLikeC4ModelProvider,
-  LikeC4ViewEmbedded,
+  LikeC4View as GenericLikeC4View,
   ReactLikeC4 as GenericReactLikeC4,
-  useColorScheme,
-  ViewNotFound,
 } from 'likec4/react'
-import { type PropsWithChildren, memo, useCallback, useState } from 'react'
+import { type PropsWithChildren } from 'react'
 import { Icons } from 'virtual:likec4/icons'
-import type { DiagramView, LikeC4ElementKind, LikeC4Tag, LikeC4ViewId } from 'virtual:likec4/model'
 import { likeC4Model, LikeC4Views, useLikeC4Model } from 'virtual:likec4/model'
 
 type IconRendererProps = {
   node: {
     id: string
     title: string
-    icon?: string | undefined
+    icon?: string | null | undefined
   }
 }
 
@@ -27,19 +24,16 @@ export function RenderIcon({ node }: IconRendererProps) {
   return IconComponent ? <IconComponent /> : null
 }
 
-export { likeC4Model, LikeC4Views, useLikeC4Model }
+export { likeC4Model, useLikeC4Model }
 
-export function useLikeC4ViewModel(viewId: LikeC4ViewId): LikeC4Model.View {
+export function useLikeC4ViewModel(viewId: ViewId): LikeC4Model.View {
   return useLikeC4Model().view(viewId as any)
 }
 
-export function useLikeC4View(viewId: LikeC4ViewId): DiagramView {
+export function useLikeC4View(viewId: ViewId): DiagramView {
   return useLikeC4Model().view(viewId as any).$view as DiagramView
 }
-
-export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
-
-export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId {
+export function isLikeC4ViewId(value: unknown): value is ViewId {
   return (
     value != null
     && typeof value === 'string'
@@ -56,117 +50,25 @@ export function LikeC4ModelProvider({ children }: PropsWithChildren) {
   )
 }
 
-const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View({
-  viewId,
-  interactive = true,
-  colorScheme: explicitColorScheme,
-  injectFontCss = true,
-  background = 'transparent',
-  browserBackground = 'dots',
-  where,
-  showDiagramTitle = false,
-  showNavigationButtons = false,
-  showNotations = false,
-  enableFocusMode = false,
-  enableElementDetails = false,
-  enableRelationshipDetails = false,
-  enableRelationshipBrowser = enableRelationshipDetails,
-  browserClassName,
-  browserStyle,
-  mantineTheme,
-  styleNonce,
-  ...props
-}) {
-  const view = LikeC4Views[viewId]
-
-  const [browserViewId, onNavigateTo] = useState(null as LikeC4ViewId | null)
-
-  const browserView = browserViewId ? LikeC4Views[browserViewId] : null
-
-  const closeBrowser = useCallback(() => {
-    onNavigateTo(null)
-  }, [onNavigateTo])
-
-  const colorScheme = useColorScheme(explicitColorScheme)
-
-  if (!view) {
-    return <ViewNotFound viewId={viewId} />
-  }
-
-  if (browserViewId && !browserView) {
-    return <ViewNotFound viewId={browserViewId} />
-  }
-
-  if (interactive && enableFocusMode) {
-    console.warn('Focus mode is not supported in interactive mode')
-  }
-
+export function LikeC4View(props: LikeC4ViewProps<string, string, string>) {
   return (
     <LikeC4ModelProvider>
-      <LikeC4ViewEmbedded<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
-        view={view}
-        colorScheme={colorScheme}
-        injectFontCss={injectFontCss}
-        onNavigateTo={interactive ? onNavigateTo : undefined}
-        background={background}
+      <GenericLikeC4View
         renderIcon={RenderIcon}
-        showDiagramTitle={showDiagramTitle}
-        showNavigationButtons={showNavigationButtons}
-        showNotations={showNotations}
-        enableFocusMode={enableFocusMode}
-        enableElementDetails={enableElementDetails}
-        enableRelationshipBrowser={enableRelationshipBrowser}
-        enableRelationshipDetails={enableRelationshipDetails}
-        where={where}
-        mantineTheme={mantineTheme}
-        styleNonce={styleNonce}
-        {...props}
-      />
-      {browserView && (
-        <LikeC4Browser<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
-          view={browserView}
-          injectFontCss={false}
-          colorScheme={colorScheme}
-          onNavigateTo={onNavigateTo}
-          background={browserBackground}
-          onClose={closeBrowser}
-          renderIcon={RenderIcon}
-          where={where}
-          className={browserClassName}
-          style={browserStyle}
-          mantineTheme={mantineTheme}
-          styleNonce={styleNonce}
-          enableElementDetails
-          enableRelationshipBrowser
-          enableRelationshipDetails
-        />
-      )}
+        {...props} />
     </LikeC4ModelProvider>
   )
-})
-LikeC4ViewMemo.displayName = 'LikeC4ViewMemo'
+}
 
-export type ReactLikeC4Props =
-  & Omit<GenericReactLikeC4Props<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>, 'view' | 'renderIcon'>
-  & {
-    viewId: LikeC4ViewId
-  }
+type ReactLikeC4Props = Omit<GenericReactLikeC4Props<string, string, string>, 'renderIcon'>
 
-const ReactLikeC4Memo = /* @__PURE__ */ memo<ReactLikeC4Props>(function ReactLikeC4({ viewId, ...props }) {
-  const view = LikeC4Views[viewId]
-  if (!view) {
-    return <ViewNotFound viewId={viewId} />
-  }
+export function ReactLikeC4(props: ReactLikeC4Props) {
   return (
     <LikeC4ModelProvider>
       <GenericReactLikeC4
-        view={view}
         renderIcon={RenderIcon}
         {...props}
       />
     </LikeC4ModelProvider>
   )
-})
-ReactLikeC4Memo.displayName = 'ReactLikeC4Memo'
-
-export { LikeC4ViewMemo as LikeC4View, ReactLikeC4Memo as ReactLikeC4 }
+}

package/__app__/src/chunks/{-index-overview-C9eO_hFX.js → -index-overview-r2wnjkuP.js}

@@ -1,20 +1,21 @@
 import { jsx as t, jsxs as u, Fragment as z } from "react/jsx-runtime";
 import { useOverviewGraph as L } from "virtual:likec4/overview-graph";
-import { c as b, I as R, n as S, u as B, i as V, a as G } from "./main-DY2KbFcO.js";
-import { u as $ } from "./tanstack-router-BBWuTKWO.js";
-import { B as K, H as v, P as g, u as U, a as A, i as X, b as Y, c as q } from "./likec4-CusAw_j6.js";
-import { memo as k, useRef as J, useMemo as j } from "react";
-import { P as O, c as I, G as C, T as F, a as y, C as Q, b as W, d as ee, I as te, B as P, u as se } from "./mantine-B_6mKFFA.js";
+import { nonexhaustive as R } from "@likec4/core";
+import { u as V } from "./tanstack-router-B9I-d36d.js";
+import { B as G, H as v, P as g, u as $, a as K, i as U, b as A, c as X } from "./likec4-CK8zVxjc.js";
+import { memo as k, useRef as Y, useMemo as B } from "react";
+import { c as b, I as q, n as S, u as j, i as J } from "./main-DnSU4JID.js";
+import { P as O, c as I, G as C, T as F, a as y, C as Q, b as W, d as ee, I as te, B as P, u as se } from "./mantine-B9NZkjVg.js";
 import { usePreviewUrl as ae } from "virtual:likec4/previews";
 /**
- * @license @tabler/icons-react v3.17.0 - MIT
+ * @license @tabler/icons-react v3.29.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var oe = b("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
 /**
- * @license @tabler/icons-react v3.17.0 - MIT
+ * @license @tabler/icons-react v3.29.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -32,7 +33,7 @@ function de({
     return null;
   const a = ne(e.points);
   return /* @__PURE__ */ t(
-    K,
+    G,
     {
       id: r,
       path: a,
@@ -63,7 +64,7 @@ const fe = /* @__PURE__ */ k(function({
           e.dimmed && M
         ),
         children: /* @__PURE__ */ u(C, { gap: 8, children: [
-          /* @__PURE__ */ t(F, { size: 24, variant: "transparent", color: "dark.4", children: /* @__PURE__ */ t(R, { size: "100%" }) }),
+          /* @__PURE__ */ t(F, { size: 24, variant: "transparent", color: "dark.4", children: /* @__PURE__ */ t(q, { size: "100%" }) }),
           /* @__PURE__ */ t(y, { size: "lg", fw: 500, children: e.label })
         ] })
       }
@@ -190,7 +191,7 @@ const fe = /* @__PURE__ */ k(function({
           ...p
         };
       default:
-        G(l);
+        R(l);
     }
   }),
   edges: r.edges.map((e) => ({
@@ -211,17 +212,17 @@ function Ne({
   zoomable: s = !0,
   pannable: a = !0
 }) {
-  const o = $(), c = J(), { colorScheme: l } = se(), i = j(() => ye(r), [r]), [w, p, N] = U(i.nodes), [E, H, Z] = A(i.edges);
-  B(() => {
+  const o = V(), c = Y(void 0), { colorScheme: l } = se(), i = B(() => ye(r), [r]), [w, p, N] = $(i.nodes), [E, H, Z] = K(i.edges);
+  j(() => {
     p(
       (n) => i.nodes.map((d) => {
         const f = n.find((m) => m.id === d.id);
-        return f ? { ...V(f, ["selected", "hidden"]), ...d } : d;
+        return f ? { ...J(f, ["selected", "hidden"]), ...d } : d;
       })
     ), H(i.edges);
   }, [i.nodes, i.edges]);
   const x = w.find((n) => n.selected);
-  return B(() => {
+  return j(() => {
     const n = c.current;
     n && (x ? n.fitView({
       maxZoom: 1,
@@ -234,7 +235,7 @@ function Ne({
       duration: 800
     }));
   }, [x?.id ?? null]), /* @__PURE__ */ t(
-    X,
+    U,
     {
       colorMode: l === "auto" ? "system" : l,
       className: ie,
@@ -245,7 +246,7 @@ function Ne({
       edges: E,
       onEdgesChange: Z,
       fitView: !0,
-      fitViewOptions: j(() => ({
+      fitViewOptions: B(() => ({
         minZoom: 0.05,
         maxZoom: 1,
         padding: e,
@@ -296,14 +297,14 @@ function Ne({
         }
         d.selected && (n.stopPropagation(), p((f) => f.map((m) => m.id === d.id ? { ...m, selected: !1 } : m)));
       },
-      children: /* @__PURE__ */ t(Y, { variant: q.Dots, size: 4, gap: 50 })
+      children: /* @__PURE__ */ t(A, { variant: X.Dots, size: 4, gap: 50 })
     }
   );
 }
-function Be() {
+function je() {
   const r = L();
   return /* @__PURE__ */ t(P, { pos: "fixed", inset: 0, children: /* @__PURE__ */ t(Ne, { graph: r }) });
 }
 export {
-  Be as default
+  je as default
 };