@likec4/diagram 1.40.0 → 1.42.0

package/src/bundle/LikeC4View.tsx

@@ -1,194 +0,0 @@
-import type * as t from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { ActionIcon, Box } from '@mantine/core'
-import { shallowEqual, useCallbackRef } from '@mantine/hooks'
-import { IconX } from '@tabler/icons-react'
-import { memo, useState } from 'react'
-import { isBoolean } from 'remeda'
-import { FitViewPaddings } from '../base/const'
-import { FramerMotionConfig } from '../context/FramerMotionConfig'
-import { LikeC4Diagram } from '../LikeC4Diagram'
-import { useLikeC4Model } from '../likec4model/useLikeC4Model'
-import { Overlay } from '../overlays/overlay/Overlay'
-import type { LikeC4ViewProps } from './LikeC4View.props'
-import { ShadowRoot } from './ShadowRoot'
-import { cssInteractive, useColorScheme, useShadowRootStyle } from './styles.css'
-import { ErrorMessage, ViewNotFound } from './ViewNotFound'
-
-export function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({
-  viewId,
-  ...props
-}: LikeC4ViewProps<A>) {
-  const likec4model = useLikeC4Model()
-  const view = likec4model.findView(viewId)
-
-  if (!view) {
-    return <ViewNotFound viewId={viewId} />
-  }
-
-  if (!view.isDiagram()) {
-    return (
-      <ErrorMessage>
-        LikeC4 View "${viewId}" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
-      </ErrorMessage>
-    )
-  }
-
-  return <LikeC4ViewInner view={view.$view} {...props} />
-}
-
-type LikeC4ViewInnerProps<A extends t.aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
-  view: t.DiagramView<A>
-}
-const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
-  view,
-  className,
-  pannable = false,
-  zoomable = false,
-  keepAspectRatio = true,
-  colorScheme: explicitColorScheme,
-  injectFontCss = true,
-  controls = false,
-  background = 'transparent',
-  browser = true,
-  showDiagramTitle = false,
-  showNavigationButtons = false,
-  showNotations = false,
-  enableFocusMode = false,
-  enableDynamicViewWalkthrough = enableFocusMode,
-  enableElementDetails = false,
-  enableRelationshipBrowser = enableElementDetails,
-  enableRelationshipDetails = enableRelationshipBrowser,
-  reduceGraphics = 'auto',
-  mantineTheme,
-  styleNonce,
-  style,
-  reactFlowProps = {},
-  renderNodes,
-  ...props
-}) => {
-  const likec4model = useLikeC4Model()
-  const colorScheme = useColorScheme(explicitColorScheme)
-
-  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
-
-  const [browserViewId, onNavigateTo] = useState(null as t.aux.ViewId<t.aux.UnknownLayouted> | null)
-
-  const onNavigateToThisView = useCallbackRef(() => {
-    onNavigateTo(view.id)
-  })
-
-  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null
-
-  const notations = view.notation?.nodes ?? []
-  const hasNotations = notations.length > 0
-
-  let nonce
-  if (typeof styleNonce === 'string') {
-    nonce = styleNonce
-  } else if (typeof styleNonce === 'function') {
-    nonce = styleNonce()
-  }
-
-  const isBrowserEnabled = browser !== false
-
-  const browserProps = isBoolean(browser) ? {} : browser
-
-  return (
-    <>
-      <style
-        type="text/css"
-        nonce={nonce}
-        dangerouslySetInnerHTML={{
-          __html: cssstyle,
-        }} />
-      <ShadowRoot
-        {...shadowRootProps}
-        injectFontCss={injectFontCss}
-        theme={mantineTheme}
-        colorScheme={colorScheme}
-        styleNonce={styleNonce}
-        className={cx(
-          'likec4-view',
-          className,
-        )}
-        style={style}>
-        <FramerMotionConfig>
-          <LikeC4Diagram
-            view={view}
-            readonly
-            pannable={pannable}
-            zoomable={zoomable}
-            background={background}
-            fitView={true}
-            fitViewPadding={FitViewPaddings.default}
-            showDiagramTitle={showDiagramTitle}
-            showNotations={showNotations && hasNotations}
-            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
-            showNavigationButtons={showNavigationButtons}
-            experimentalEdgeEditing={false}
-            enableFocusMode={enableFocusMode}
-            enableRelationshipDetails={enableRelationshipDetails}
-            enableElementDetails={enableElementDetails}
-            enableRelationshipBrowser={enableRelationshipBrowser}
-            enableElementTags={false}
-            controls={controls}
-            nodesDraggable={false}
-            reduceGraphics={reduceGraphics}
-            className={cx(
-              'likec4-static-view',
-              isBrowserEnabled && cssInteractive,
-            )}
-            // We may have multiple embedded views on the same page
-            // so we don't want enable search and hotkeys
-            enableSearch={false}
-            {...isBrowserEnabled && {
-              onCanvasClick: onNavigateToThisView,
-              onNodeClick: onNavigateToThisView,
-            }}
-            reactFlowProps={reactFlowProps}
-            renderNodes={renderNodes}
-            {...props}
-          />
-          {browserView && (
-            <Overlay openDelay={0} onClose={() => onNavigateTo(null)}>
-              <LikeC4Diagram
-                view={browserView}
-                background="dots"
-                onNavigateTo={onNavigateTo}
-                enableDynamicViewWalkthrough
-                enableFocusMode
-                enableRelationshipBrowser
-                enableElementDetails
-                enableRelationshipDetails
-                enableSearch
-                enableElementTags
-                controls="next"
-                readonly
-                fitView
-                {...props}
-                fitViewPadding={FitViewPaddings.withControls}
-                {...browserProps}
-                showNotations={(browserProps.showNotations ?? true) &&
-                  (browserView.notation?.nodes.length ?? 0) > 0}
-                renderNodes={renderNodes}
-              />
-              <Box pos="absolute" top={'1rem'} right={'1rem'}>
-                <ActionIcon
-                  variant="default"
-                  color="gray"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onNavigateTo(null)
-                  }}>
-                  <IconX />
-                </ActionIcon>
-              </Box>
-            </Overlay>
-          )}
-        </FramerMotionConfig>
-      </ShadowRoot>
-    </>
-  )
-}, shallowEqual)
-LikeC4ViewInner.displayName = 'LikeC4ViewInner'

package/src/bundle/ReactLikeC4.tsx

@@ -1,127 +0,0 @@
-import type * as t from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { type CSSProperties } from 'react'
-import { isFunction, isString } from 'remeda'
-import { type LikeC4DiagramProps, LikeC4Diagram } from '../LikeC4Diagram'
-import { useLikeC4Model } from '../likec4model/useLikeC4Model'
-import { ShadowRoot } from './ShadowRoot'
-import { useColorScheme, useShadowRootStyle } from './styles.css'
-import { ErrorMessage, ViewNotFound } from './ViewNotFound'
-
-export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = Omit<LikeC4DiagramProps<A>, 'view'> & {
-  viewId: t.aux.ViewId<A>
-
-  /**
-   * Keep aspect ratio of the diagram
-   * Disable if you need to manage the viewport (use className)
-   *
-   * @default true
-   */
-  keepAspectRatio?: boolean | undefined
-
-  /**
-   * By default determined by the user's system preferences.
-   */
-  colorScheme?: 'light' | 'dark' | undefined
-
-  /**
-   * LikeC4 views are using 'IBM Plex Sans' font.
-   * By default, component injects the CSS to document head.
-   * Set to false if you want to handle the font yourself.
-   *
-   * @default true
-   */
-  injectFontCss?: boolean | undefined
-
-  style?: CSSProperties | undefined
-
-  mantineTheme?: any
-
-  /** Function to generate nonce attribute added to all generated `<style />` tags */
-  styleNonce?: string | (() => string) | undefined
-}
-
-export function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({
-  viewId,
-  ...props
-}: ReactLikeC4Props<A>) {
-  const likec4model = useLikeC4Model()
-  const view = likec4model.findView(viewId)
-
-  if (!view) {
-    return <ViewNotFound viewId={viewId} />
-  }
-
-  if (!view.isDiagram()) {
-    return (
-      <ErrorMessage>
-        LikeC4 View "${viewId}" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
-      </ErrorMessage>
-    )
-  }
-
-  return <ReactLikeC4Inner view={view.$view} {...props} />
-}
-
-type ReactLikeC4InnerProps<A extends t.aux.Any> = Omit<ReactLikeC4Props<A>, 'viewId'> & {
-  view: t.DiagramView<A>
-}
-function ReactLikeC4Inner<A extends t.aux.Any>({
-  className,
-  view,
-  colorScheme: explicitColorScheme,
-  injectFontCss = true,
-  keepAspectRatio = true,
-  showNotations = true,
-  onNavigateTo,
-  background = 'transparent',
-  style,
-  mantineTheme,
-  styleNonce,
-  ...props
-}: ReactLikeC4InnerProps<A>) {
-  const colorScheme = useColorScheme(explicitColorScheme)
-
-  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
-
-  const notations = view.notation?.nodes ?? []
-  const hasNotations = notations.length > 0
-
-  let nonce
-  if (isString(styleNonce)) {
-    nonce = styleNonce
-  } else if (isFunction(styleNonce)) {
-    nonce = styleNonce()
-  }
-
-  return (
-    <>
-      <style
-        type="text/css"
-        nonce={nonce}
-        dangerouslySetInnerHTML={{ __html: cssstyle }}
-      />
-      <ShadowRoot
-        {...shadowRootProps}
-        injectFontCss={injectFontCss}
-        theme={mantineTheme}
-        colorScheme={colorScheme}
-        styleNonce={styleNonce}
-        className={cx(
-          'likec4-view',
-          className,
-        )}
-        style={style}>
-        <LikeC4Diagram
-          view={view as any}
-          showNotations={showNotations && hasNotations}
-          onNavigateTo={onNavigateTo as any}
-          background={background}
-          enableElementTags={false}
-          {...props}
-        />
-      </ShadowRoot>
-    </>
-  )
-}
-ReactLikeC4.displayName = 'ReactLikeC4'

package/src/bundle/ShadowRoot.tsx

@@ -1,54 +0,0 @@
-import { type MantineThemeOverride, MantineProvider } from '@mantine/core'
-import { type HTMLAttributes, useCallback, useRef } from 'react'
-import root from 'react-shadow'
-import { isDefined } from 'remeda'
-import { DefaultTheme, useBundledStyleSheet } from './styles.css'
-
-const Root = root['div']!
-
-type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
-  injectFontCss?: boolean | undefined
-  styleNonce?: string | (() => string) | undefined
-  mode?: 'open' | 'closed'
-  delegatesFocus?: boolean
-  colorScheme?: 'light' | 'dark' | undefined
-  theme?: MantineThemeOverride | undefined
-}
-
-export function ShadowRoot({
-  children,
-  theme = DefaultTheme,
-  injectFontCss = true,
-  styleNonce,
-  colorScheme,
-  ...props
-}: ShadowRootProps) {
-  const rootRef = useRef<HTMLDivElement>(null)
-  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce)
-  const getRootElement = useCallback(() => rootRef.current ?? undefined, [rootRef])
-
-  let getStyleNonce
-  if (isDefined(styleNonce)) {
-    getStyleNonce = typeof styleNonce === 'function' ? styleNonce : () => styleNonce
-  }
-
-  return (
-    <Root ssr={false} styleSheets={styleSheets} {...props}>
-      <div
-        ref={rootRef}
-        {...(colorScheme && { 'data-mantine-color-scheme': colorScheme })}
-        className={'likec4-shadow-root'}
-      >
-        <MantineProvider
-          {...(colorScheme && { forceColorScheme: colorScheme })}
-          defaultColorScheme={'auto'}
-          getRootElement={getRootElement}
-          {...getStyleNonce && { getStyleNonce }}
-          cssVariablesSelector={'.likec4-shadow-root'}
-          theme={theme}>
-          {children}
-        </MantineProvider>
-      </div>
-    </Root>
-  )
-}

package/src/bundle/ViewNotFound.tsx

@@ -1,25 +0,0 @@
-import type { PropsWithChildren } from 'react'
-
-export const ErrorMessage = ({ children }: PropsWithChildren) => (
-  <div
-    style={{
-      margin: '[1rem 0]',
-    }}>
-    <div
-      style={{
-        margin: '0 auto',
-        display: 'inline-block',
-        padding: '2rem',
-        background: 'rgba(250,82,82,.15)',
-        color: '#ffa8a8',
-      }}>
-      {children}
-    </div>
-  </div>
-)
-
-export const ViewNotFound = ({ viewId }: { viewId: string }) => (
-  <ErrorMessage>
-    View <code>{viewId}</code> not found
-  </ErrorMessage>
-)

package/src/bundle/custom.ts

@@ -1 +0,0 @@
-export * from '../custom'

package/src/bundle/index.ts

@@ -1,27 +0,0 @@
-export type {
-  ChangeEvent,
-  CustomNodes,
-  DiagramNodeWithNavigate,
-  ElementIconRenderer,
-  LikeC4ColorScheme,
-  LikeC4DiagramEventHandlers,
-  OnCanvasClick,
-  OnChange,
-  OnEdgeClick,
-  OnNavigateTo,
-  OnNodeClick,
-  OpenSourceParams,
-  PaddingUnit,
-  PaddingWithUnit,
-  WhereOperator,
-} from '../LikeC4Diagram.props'
-export { LikeC4View } from './LikeC4View'
-export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props'
-export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4'
-
-export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps } from '../LikeC4ProjectsProvider'
-export { LikeC4ModelProvider, type LikeC4ModelProviderProps } from './LikeC4ModelProvider'
-
-export { ViewNotFound } from './ViewNotFound'
-
-export * from '../custom/hooks'

package/src/bundle/react-dom-server-mock.ts

@@ -1,3 +0,0 @@
-export const renderToString = (_view: any) => {
-  throw new Error('LikeC4View is not available SSR')
-}

package/src/bundle/styles.css.ts

@@ -1,172 +0,0 @@
-import type { DiagramView } from '@likec4/core'
-import { css } from '@likec4/styles/css'
-import { type MantineThemeOverride, createTheme, Portal } from '@mantine/core'
-import {
-  useColorScheme as usePreferredColorScheme,
-  useDebouncedCallback,
-  useMutationObserver,
-} from '@mantine/hooks'
-import { useIsomorphicLayoutEffect } from '@react-hookz/web'
-import { useState } from 'react'
-import { first, isFunction, isString } from 'remeda'
-import { useId } from '../hooks/useId'
-import fontsCss from '../styles-font.css?inline'
-import inlinedStyles from '../styles.css?inline'
-
-export const DefaultTheme = createTheme({
-  autoContrast: true,
-  primaryColor: 'indigo',
-  cursorType: 'pointer',
-  defaultRadius: 'sm',
-  fontFamily: 'var(--likec4-app-font, var(--likec4-app-font-default))',
-  headings: {
-    fontWeight: '500',
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: '600',
-      },
-      h2: {
-        fontWeight: '500',
-        // fontSize: '1.85rem',
-      },
-    },
-  },
-  components: {
-    Portal: Portal.extend({
-      defaultProps: {
-        reuseTargetNode: true,
-      },
-    }),
-  },
-}) as MantineThemeOverride
-
-export const cssInteractive = css({
-  cursor: 'pointer',
-  ['--mantine-cursor-pointer']: 'pointer',
-  '& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)': {
-    cursor: 'pointer',
-  },
-})
-
-export function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined) {
-  const [styleSheets, setStyleSheets] = useState([] as CSSStyleSheet[])
-
-  useIsomorphicLayoutEffect(() => {
-    if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
-      const style = document.createElement('style')
-      style.setAttribute('type', 'text/css')
-      style.setAttribute('data-likec4-font', '')
-      if (isString(styleNonce)) {
-        style.setAttribute('nonce', styleNonce)
-      }
-      if (isFunction(styleNonce)) {
-        style.setAttribute('nonce', styleNonce())
-      }
-      style.appendChild(document.createTextNode(fontsCss))
-      document.head.appendChild(style)
-    }
-  }, [injectFontCss])
-
-  useIsomorphicLayoutEffect(() => {
-    const css = new CSSStyleSheet()
-    css.replaceSync(
-      inlinedStyles
-        .replaceAll(':where(:root,:host)', `.likec4-shadow-root`)
-        .replaceAll(':root', `.likec4-shadow-root`)
-        .replaceAll('body {', `.likec4-shadow-root{`)
-        .replaceAll('body{', `.likec4-shadow-root{`),
-    )
-    setStyleSheets([css])
-    return () => {
-      css.replaceSync('')
-    }
-  }, [inlinedStyles])
-
-  return styleSheets
-}
-
-const getComputedColorScheme = (): ColorScheme | null => {
-  try {
-    const htmlScheme = window.getComputedStyle(document.documentElement).colorScheme ?? ''
-    const colorScheme = first(htmlScheme.split(' '))
-    if (colorScheme === 'light' || colorScheme === 'dark') {
-      return colorScheme
-    }
-  } catch (_e) {
-    // noop
-  }
-  return null
-}
-
-export type ColorScheme = 'light' | 'dark'
-export function useColorScheme(explicit?: ColorScheme): ColorScheme {
-  const preferred = usePreferredColorScheme()
-  const [computed, setComputed] = useState(getComputedColorScheme)
-  useMutationObserver(
-    useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
-    {
-      attributes: true,
-      childList: false,
-      subtree: false,
-    },
-    () => document.documentElement,
-  )
-
-  return explicit ?? computed ?? preferred
-}
-
-export function useShadowRootStyle(
-  keepAspectRatio: boolean,
-  view: DiagramView,
-): [{ 'data-likec4-instance': string }, style: string] {
-  const id = useId()
-
-  if (keepAspectRatio === false) {
-    return [
-      { 'data-likec4-instance': id },
-      `
-:where([data-likec4-instance="${id}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  min-width: 80px;
-  min-height: 80px;
-}
-  `.trim(),
-    ]
-  }
-
-  const isLandscape = view.bounds.width > view.bounds.height
-
-  return [
-    { 'data-likec4-instance': id },
-    `
-:where([data-likec4-instance="${id}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  overflow: hidden;
-  aspect-ratio: ${Math.ceil(view.bounds.width)} / ${Math.ceil(view.bounds.height)};
-  ${
-      isLandscape ? '' : `
-  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(view.bounds.width)}px));
-  margin-left: auto;
-  margin-right: auto;`
-    }
-  width: ${isLandscape ? '100%' : 'auto'};
-  height: ${isLandscape ? 'auto' : '100%'};
-  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
-  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(view.bounds.height)}px));
-}
-`.trim(),
-  ]
-}

package/src/components/ErrorFallback.tsx

@@ -1,45 +0,0 @@
-import { Box } from '@likec4/styles/jsx'
-import { Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
-import { IconX } from '@tabler/icons-react'
-import {
-  type ErrorBoundaryProps,
-  type FallbackProps,
-  ErrorBoundary as ErrorBoundaryComponent,
-} from 'react-error-boundary'
-
-export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
-  const errorString = error instanceof Error ? error.message : 'Unknown error'
-  return (
-    <Box pos={'fixed'} top={'0'} left={'0'} w={'100%'} p={'0'} style={{ zIndex: 1000 }}>
-      <Notification
-        icon={<IconX style={{ width: 16, height: 16 }} />}
-        styles={{
-          icon: {
-            alignSelf: 'flex-start',
-          },
-        }}
-        color={'red'}
-        title={'Oops, something went wrong'}
-        p={'xl'}
-        withCloseButton={false}>
-        <ScrollAreaAutosize maw={'100%'} mah={400}>
-          <Code block>{errorString}</Code>
-        </ScrollAreaAutosize>
-        <Group gap={'xs'} mt="xl">
-          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
-        </Group>
-      </Notification>
-    </Box>
-  )
-}
-
-export function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>) {
-  return (
-    <ErrorBoundaryComponent
-      FallbackComponent={ErrorFallback}
-      onError={(err, info) => {
-        console.error(err, info)
-      }}
-      {...props} />
-  )
-}

package/src/components/GithubIcon.tsx

@@ -1,16 +0,0 @@
-import type { SVGProps } from 'react'
-import { forwardRef } from 'react'
-
-export const GithubIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
-  <svg
-    height="24"
-    width="24"
-    fill="currentColor"
-    {...props}
-    viewBox="0 0 24 24"
-    ref={ref}
-  >
-    <path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z">
-    </path>
-  </svg>
-))