likec4 1.9.0 → 1.10.1

package/dist/__app__/react/likec4.tsx

@@ -1,5 +1,11 @@
-import type { LikeC4ViewBaseProps } from 'likec4/react'
-import { LikeC4Browser, LikeC4ViewElement, useColorScheme } from 'likec4/react'
+import {
+  LikeC4Browser,
+  LikeC4ViewEmbedded,
+  type LikeC4ViewProps as BaseLikeC4ViewProps,
+  ReactLikeC4 as GenericReactLikeC4,
+  type ReactLikeC4Props as GenericReactLikeC4Props,
+  useColorScheme
+} from 'likec4/react'
 import { memo, useCallback, useState } from 'react'
 import { Icons } from 'virtual:likec4/icons'
 import {
@@ -18,16 +24,34 @@ type IconRendererProps = {
   }
 }
 
-const RenderIcon = ({ node }: IconRendererProps) => {
+function RenderIcon({ node }: IconRendererProps) {
   const IconComponent = Icons[node.icon ?? '']
   return IconComponent ? <IconComponent /> : null
 }
 
-export { isLikeC4ViewId, LikeC4Views }
+export { isLikeC4ViewId, LikeC4Views, RenderIcon }
+
+export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
 
-export type LikeC4ViewProps = LikeC4ViewBaseProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
+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 const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4ViewComponent({
+const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View({
   viewId,
   interactive = true,
   colorScheme: explicitColorScheme,
@@ -40,6 +64,9 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
   showNavigationButtons = false,
   showNotations = false,
   enableFocusMode = false,
+  browserClassName,
+  browserStyle,
+  mantineTheme,
   ...props
 }) {
   const view = LikeC4Views[viewId]
@@ -52,23 +79,23 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
     onNavigateTo(null)
   }, [onNavigateTo])
 
+  const colorScheme = useColorScheme(explicitColorScheme)
+
   if (!view) {
-    throw new Error(`View with id ${viewId} not found`)
+    return <NotFound viewId={viewId} />
   }
 
   if (browserViewId && !browserView) {
-    throw new Error(`View with id ${browserViewId} not found`)
+    return <NotFound viewId={browserViewId} />
   }
 
   if (interactive && enableFocusMode) {
     console.warn('Focus mode is not supported in interactive mode')
   }
 
-  const colorScheme = useColorScheme(explicitColorScheme)
-
   return (
     <>
-      <LikeC4ViewElement<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
+      <LikeC4ViewEmbedded<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
         view={view}
         colorScheme={colorScheme}
         injectFontCss={injectFontCss}
@@ -81,6 +108,7 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
         showNotations={showNotations}
         enableFocusMode={enableFocusMode}
         where={where}
+        mantineTheme={mantineTheme}
         {...props}
       />
       {browserView && (
@@ -93,9 +121,33 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
           onClose={closeBrowser}
           renderIcon={RenderIcon}
           where={where}
+          className={browserClassName}
+          style={browserStyle}
+          mantineTheme={mantineTheme}
         />
       )}
     </>
   )
 })
-LikeC4View.displayName = 'LikeC4View'
+LikeC4ViewMemo.displayName = 'LikeC4ViewMemo'
+export { LikeC4ViewMemo as LikeC4View }
+
+export type ReactLikeC4Props =
+  & Omit<GenericReactLikeC4Props<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>, 'view' | 'renderIcon'>
+  & {
+    viewId: LikeC4ViewId
+  }
+
+export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props) {
+  const view = LikeC4Views[viewId]
+  if (!view) {
+    return <NotFound viewId={viewId} />
+  }
+  return (
+    <GenericReactLikeC4
+      view={view}
+      renderIcon={RenderIcon}
+      {...props}
+    />
+  )
+}

package/dist/__app__/src/chunks/{-index-overview-BAmvrzHU.js → -index-overview-CR08x_EG.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
-import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-BZtdykGF.js";
-import { u as useRouter } from "./tanstack-router-Bc_WYOzY.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-BqIZe8Y0.js";
+import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-D12NE066.js";
+import { u as useRouter } from "./tanstack-router-DKnF_3kP.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-BFZn233G.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-Bhi3pgTf.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-BnwtT_Nz.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
 function a(...n) {
   return u(c, n);
@@ -15,14 +15,14 @@ function c(n, r) {
   return o;
 }
 /**
- * @license @tabler/icons-react v3.14.0 - MIT
+ * @license @tabler/icons-react v3.16.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLoader = createReactComponent("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.14.0 - MIT
+ * @license @tabler/icons-react v3.16.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.