@likec4/diagram 1.41.0 → 1.42.1

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -1,175 +0,0 @@
-import { cx as clsx } from '@likec4/styles/css'
-import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine/core'
-import { useLocalStorage } from '@mantine/hooks'
-import { IconMenu } from '@tabler/icons-react'
-import { AnimatePresence, m } from 'motion/react'
-import { MarkdownBlock } from '../../../base/primitives'
-import { Link } from '../../../components/Link'
-import { useDiagramContext } from '../../../hooks/useDiagram'
-import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel'
-import type { DiagramContext } from '../../../state/types'
-import * as styles from './DiagramTitlePanel.css'
-
-function selector(context: DiagramContext) {
-  return {
-    // id: context.view.id,
-    // title: context.view.title ?? 'untitled',
-    // description: RichText.from(context.view.description),
-    // links: context.view.links,
-    isNotActiveWalkthrough: context.activeWalkthrough === null,
-  }
-}
-
-export function DiagramTitlePanel() {
-  const view = useOptionalCurrentViewModel()
-  const { isNotActiveWalkthrough } = useDiagramContext(selector)
-  const [isCollapsed, setCollapsed] = useLocalStorage({
-    key: 'diagram-title-webview-collapsed',
-    defaultValue: false,
-  })
-  const title = view?.title ?? 'untitled'
-  const toggle = () => setCollapsed(v => !v)
-
-  return (
-    <AnimatePresence mode="wait">
-      {
-        /* <ViewportPortal>
-        <div className={css.inlineTitle} style={{ transform: `translate(0px,${height}px)` }}>
-          <m.div
-            key={id}
-            animate={{ opacity: 0.7, scale: .92 }}
-            whileHover={{ opacity: 1, scale: 1 }}
-            style={{
-              transformOrigin: 'left bottom'
-            }}
-          >
-            <Title order={1}>{title}</Title>
-          </m.div>
-        </div>
-      </ViewportPortal> */
-      }
-      {view && isNotActiveWalkthrough && (
-        <m.div
-          initial={{ opacity: 0.05, scale: 0.7 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{
-            opacity: 0.05,
-            scale: 0.6,
-          }}
-          className={clsx('react-flow__panel', 'left', 'bottom')}
-          style={{
-            transformOrigin: 'left center',
-          }}
-        >
-          <Card
-            className={styles.card}
-            withBorder={!isCollapsed}
-            p={isCollapsed ? 'sm' : 'md'}
-            onDoubleClick={e => e.stopPropagation()}>
-            {isCollapsed && (
-              <CardSection>
-                <Button
-                  fullWidth
-                  justify="stretch"
-                  size="md"
-                  radius={'0'}
-                  variant={'subtle'}
-                  color="gray"
-                  onClick={toggle}
-                  fw={500}
-                  fz={'sm'}
-                  tabIndex={-1}
-                >
-                  {title}
-                </Button>
-              </CardSection>
-            )}
-            {!isCollapsed && (
-              <>
-                <CardSection mb={'xs'}>
-                  <Button
-                    fullWidth
-                    size="xs"
-                    h={'sm'}
-                    py={2}
-                    radius={'0'}
-                    variant={'subtle'}
-                    color="gray"
-                    onClick={toggle}
-                    tabIndex={-1}
-                  >
-                    <IconMenu size={11} opacity={0.7} />
-                  </Button>
-                </CardSection>
-
-                <Group justify="stretch" wrap="nowrap" mb={'sm'}>
-                  <Text
-                    component={'div'}
-                    flex={'1'}
-                    size={'md'}
-                    fw={500}
-                    lh={1.1}
-                    className={styles.title}
-                  >
-                    {title}
-                  </Text>
-                  <Text
-                    hidden={isCollapsed}
-                    component={'div'}
-                    flex={'0 0 auto'}
-                    inline
-                    size="xs"
-                    fz={9}
-                    fw={500}
-                    c={'dimmed'}
-                    style={{
-                      userSelect: 'all',
-                    }}>
-                    <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                    {view.id}
-                  </Text>
-                </Group>
-                {view.description.nonEmpty && (
-                  <Spoiler
-                    maxHeight={60}
-                    showLabel={
-                      <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
-                        show more
-                      </Button>
-                    }
-                    hideLabel={
-                      <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
-                        hide
-                      </Button>
-                    }>
-                    <MarkdownBlock
-                      className={styles.description}
-                      textScale={0.9}
-                      value={view.description} />
-                  </Spoiler>
-                )}
-                {view.description.isEmpty && (
-                  <Text
-                    component={'div'}
-                    size="xs"
-                    c={'dimmed'}>
-                    no description
-                  </Text>
-                )}
-                {view.links.length > 0 && (
-                  <Stack
-                    mt={'xs'}
-                    gap={4}
-                    justify="stretch"
-                    align="stretch">
-                    {view.links.map((link) => <Link value={link} key={link.url} />)}
-                  </Stack>
-                )}
-              </>
-            )}
-          </Card>
-        </m.div>
-      )}
-    </AnimatePresence>
-  )
-}

package/src/likec4diagram/ui/diagram-title/Link.tsx

@@ -1,40 +0,0 @@
-import type { Link } from '@likec4/core'
-import { Anchor, Box, Button, CopyButton, Group } from '@mantine/core'
-
-export function Link({ link }: { link: Link }) {
-  return (
-    <>
-      <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
-        <Box flex={'1'} style={{ overflow: 'hidden' }}>
-          <Anchor
-            href={link.url}
-            target="_blank"
-            fz="xs"
-            truncate="end"
-            display={'inline-block'}
-            w={'100%'}
-            onClick={(e) => e.stopPropagation()}>
-            {link.title || link.url}
-          </Anchor>
-        </Box>
-        <CopyButton value={link.url}>
-          {({ copied, copy }) => (
-            <Button
-              size="compact-xs"
-              fz={'10'}
-              variant="light"
-              onClick={(e) => {
-                e.stopPropagation()
-                copy()
-              }}
-              color={copied
-                ? 'teal'
-                : 'gray'}>
-              {copied ? 'copied' : 'copy'}
-            </Button>
-          )}
-        </CopyButton>
-      </Group>
-    </>
-  )
-}

package/src/likec4diagram/ui/index.ts

@@ -1,4 +0,0 @@
-export { Controls } from './controls/Controls'
-export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel'
-export { NotationPanel } from './notation/NotationPanel'
-export { DynamicViewWalkthrough } from './walkthrough/DynamicViewWalkthrough'

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -1,99 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const container = css({
-  bottom: '0',
-  right: '0',
-  padding: '2',
-  margin: '0',
-})
-
-export const icon = css({
-  ['--ai-radius']: '0px',
-  _noReduceGraphics: {
-    ['--ai-radius']: '{radii.md}',
-  },
-})
-
-export const card = css({
-  cursor: 'default',
-  userSelect: 'none',
-  minWidth: 200,
-  maxWidth: 'calc(100vw - 20px)',
-  backgroundColor: `mantine.colors.body/80`,
-  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  sm: {
-    minWidth: 300,
-    maxWidth: `65vw`,
-  },
-  md: {
-    maxWidth: `40vw`,
-  },
-  _dark: {
-    backgroundColor: `mantine.colors.dark[6]/80`,
-  },
-})
-
-export const tabPanel = css({
-  padding: 'xxs',
-})
-
-// export const description = css({
-//   whiteSpaceCollapse: 'preserve-breaks',
-//   color: mantine.colors.gray[7],
-//   selectors: {
-//     [`${whereDark} &`]: {
-//       color: mantine.colors.gray[5]
-//     }
-//   }
-// })
-
-export const elementNotation = css({
-  backgroundColor: 'transparent',
-  transition: 'all 100ms ease-in',
-  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  // vars: {
-  //   // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
-  // },
-  _hover: {
-    transition: 'all 120ms ease-out',
-    // backgroundColor:
-    backgroundColor: `mantine.colors.primary[2]/50`,
-  },
-  _dark: {
-    _hover: {
-      backgroundColor: `mantine.colors.dark[3]/40`,
-    },
-  },
-})
-
-export const shapeSvg = css({
-  fill: 'var(--likec4-palette-fill)',
-  stroke: 'var(--likec4-palette-stroke)',
-  strokeWidth: 1,
-  overflow: 'visible',
-  width: '100%',
-  height: 'auto',
-  filter: `
-    drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
-    drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
-  `,
-})
-
-export const shapeBadge = css({
-  fontWeight: 500,
-  letterSpacing: '0.2px',
-  paddingTop: '0',
-  paddingBottom: '0',
-  textTransform: 'lowercase',
-  transition: 'all 150ms ease-in-out',
-  cursor: 'pointer',
-  ['--badge-radius']: '2px',
-  ['--badge-fz']: '9.5px',
-  ['--badge-padding-x']: '3px',
-  ['--badge-height']: '13.5px',
-  ['--badge-lh']: '1',
-  ['--badge-bg']: 'var(--likec4-palette-fill)',
-  ['--badge-color']: 'var(--likec4-palette-hiContrast)',
-})

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,252 +0,0 @@
-import { type ComputedNode, type NodeNotation as ElementNotationData } from '@likec4/core'
-import { cx, cx as clsx } from '@likec4/styles/css'
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Card,
-  Group,
-  Paper,
-  ScrollAreaAutosize,
-  Stack,
-  Tabs,
-  TabsList,
-  TabsPanel,
-  TabsTab,
-  Text,
-  ThemeIcon,
-  Tooltip,
-} from '@mantine/core'
-import { useLocalStorage } from '@mantine/hooks'
-import { IconAlertTriangle, IconArrowDownRight, IconHelpCircle } from '@tabler/icons-react'
-import { AnimatePresence, m } from 'motion/react'
-import { memo, useState } from 'react'
-import { ceil, isNonNullish } from 'remeda'
-import { ElementShape } from '../../../base/primitives'
-import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import { useXYStore } from '../../../hooks/useXYFlow'
-import type { DiagramContext } from '../../../state/types'
-import * as styles from './NotationPanel.css'
-
-type NodeKind = ComputedNode['kind']
-
-const ElementNotation = ({ value }: { value: ElementNotationData }) => {
-  const {
-    title,
-    color = 'primary',
-    shape = 'rectangle',
-  } = value
-  const [onlyKind, setOnlyKind] = useState<NodeKind | null>(null)
-  const diagram = useDiagram()
-  const w = 300
-  const h = 200
-  return (
-    <Card
-      shadow="none"
-      px={'xs'}
-      py={'sm'}
-      className={cx(
-        styles.elementNotation,
-      )}
-      data-likec4-color={color}
-      onMouseEnter={() => {
-        setOnlyKind(null)
-        diagram.highlightNotation(value)
-      }}
-      onMouseLeave={() => {
-        setOnlyKind(null)
-        diagram.unhighlightNotation()
-      }}
-    >
-      <Group
-        gap={'sm'}
-        align="stretch"
-        wrap="nowrap"
-      >
-        <Box
-          flex={'0 0 70px'}
-          style={{
-            position: 'relative',
-            width: 70,
-            height: ceil(70 * (h / w), 0),
-          }}>
-          <ElementShape
-            data={{
-              shape,
-              width: w,
-              height: h,
-            }}
-          />
-        </Box>
-        <Stack gap={4} flex={1}>
-          <Group gap={4} flex={'0 0 auto'}>
-            {value.kinds.map((kind) => (
-              <Badge
-                key={kind}
-                className={cx(
-                  styles.shapeBadge,
-                )}
-                onMouseEnter={() => {
-                  setOnlyKind(kind)
-                  diagram.highlightNotation(value, kind)
-                }}
-                onMouseLeave={() => {
-                  setOnlyKind(null)
-                  diagram.highlightNotation(value)
-                }}
-                opacity={isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1}
-              >
-                {kind}
-              </Badge>
-            ))}
-          </Group>
-          <Text
-            component="div"
-            fz={'sm'}
-            fw={500}
-            lh="1.25"
-            style={{
-              textWrap: 'pretty',
-            }}>
-            {title}
-          </Text>
-        </Stack>
-      </Group>
-    </Card>
-  )
-}
-
-const selector = (s: DiagramContext) => ({
-  id: s.view.id,
-  notations: s.view.notation?.nodes ?? [],
-  isVisible: true,
-  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
-})
-
-export const NotationPanel = memo(() => {
-  const height = useXYStore(s => s.height)
-  const {
-    id,
-    notations,
-    isVisible,
-  } = useDiagramContext(selector)
-  const [isCollapsed, setCollapsed] = useLocalStorage({
-    key: 'notation-webview-collapsed',
-    defaultValue: true,
-  })
-  const hasNotations = notations.length > 0
-  const portalProps = useMantinePortalProps()
-
-  return (
-    <AnimatePresence>
-      {!hasNotations && isVisible && (
-        <m.div
-          key={'empty'}
-          initial={{ opacity: 0.75, translateX: '50%' }}
-          animate={{ opacity: 1, translateX: 0 }}
-          exit={{
-            translateX: '100%',
-            opacity: 0.6,
-          }}
-          className={clsx('react-flow__panel', styles.container)}>
-          <Tooltip label="View has no notations" color="orange" {...portalProps}>
-            <ThemeIcon
-              size={'lg'}
-              variant="light"
-              color="orange"
-              radius={'md'}
-            >
-              <IconAlertTriangle />
-            </ThemeIcon>
-          </Tooltip>
-        </m.div>
-      )}
-      {hasNotations && isVisible && isCollapsed && (
-        <m.div
-          key={'collapsed'}
-          initial={{ opacity: 0.75, translateX: '50%' }}
-          animate={{ opacity: 1, translateX: 0 }}
-          exit={{
-            translateX: '100%',
-            opacity: 0.6,
-          }}
-          className={clsx('react-flow__panel', styles.container)}
-        >
-          <Tooltip label="Show notation" color="dark" fz={'xs'} {...portalProps}>
-            <ActionIcon
-              size={'lg'}
-              variant="default"
-              color="gray"
-              className={styles.icon}
-              onClick={() => setCollapsed(false)}
-            >
-              <IconHelpCircle stroke={1.5} />
-            </ActionIcon>
-          </Tooltip>
-        </m.div>
-      )}
-
-      {hasNotations && isVisible && !isCollapsed && (
-        <m.div
-          key={id}
-          initial={{
-            opacity: 0.75,
-            // translateX: '50%',
-            scale: 0.2,
-          }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{
-            opacity: 0,
-            scale: 0.25,
-          }}
-          className={clsx('react-flow__panel', styles.container)}
-          style={{
-            transformOrigin: 'bottom right',
-          }}
-        >
-          <Paper
-            radius="sm"
-            withBorder
-            shadow="lg"
-            className={styles.card}>
-            {/* <Text fz={'sm'} fw={500} c={'dimmed'} ml={'md'}>diagram notation</Text> */}
-            <Tabs defaultValue="first" radius={'xs'}>
-              <TabsList>
-                <ActionIcon
-                  size={'md'}
-                  variant="subtle"
-                  color="gray"
-                  ml={2}
-                  style={{
-                    alignSelf: 'center',
-                  }}
-                  onClick={() => setCollapsed(true)}
-                >
-                  <IconArrowDownRight stroke={2} />
-                </ActionIcon>
-                <TabsTab value="first" fz={'xs'}>Elements</TabsTab>
-                <TabsTab value="second" fz={'xs'} disabled>
-                  Relationships
-                </TabsTab>
-              </TabsList>
-
-              <TabsPanel value="first" className={styles.tabPanel} hidden={isCollapsed}>
-                <ScrollAreaAutosize
-                  viewportProps={{
-                    style: {
-                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`,
-                    },
-                  }}>
-                  <Stack gap={0}>
-                    {notations.map((n, i) => <ElementNotation key={i} value={n} />)}
-                  </Stack>
-                </ScrollAreaAutosize>
-              </TabsPanel>
-            </Tabs>
-          </Paper>
-        </m.div>
-      )}
-    </AnimatePresence>
-  )
-})

package/src/likec4diagram/ui/notation/index.ts

@@ -1 +0,0 @@
-export { NotationPanel as default } from './NotationPanel'

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.ts

@@ -1,70 +0,0 @@
-import { css } from '@likec4/styles/css'
-import type { SystemStyleObject } from '@likec4/styles/types'
-
-export const container = css({
-  position: 'absolute',
-  bottom: 'xxs',
-  left: '[50%]',
-  transform: 'translateX(-50%)',
-  padding: '[0px]',
-  margin: '[0px]',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '[0.4rem]',
-  alignItems: 'center',
-  md: {
-    gap: '[0.6rem]',
-  },
-})
-
-const tablerIcons = {
-  '& .tabler-icon': {
-    width: '0.85em',
-    height: '0.85em',
-  },
-} satisfies SystemStyleObject
-
-export const buttons = css({
-  backdropFilter: 'blur(8px)',
-  transition: 'all 175ms ease-in',
-  _hover: {
-    transitionTimingFunction: 'out',
-    transform: 'scale(1.1)',
-  },
-  _active: {
-    transitionDuration: '100ms',
-    transform: 'scale(0.98) translateY(3px)',
-  },
-  ...tablerIcons,
-})
-
-export const btn = css({
-  transition: 'all 175ms ease-in',
-  background: 'mantine.colors.primary.filled/65',
-  _hover: {
-    background: 'mantine.colors.primary.filledHover/65',
-  },
-  _light: {
-    background: 'mantine.colors.primary.filled/85',
-    _hover: {
-      background: 'mantine.colors.primary.filledHover/85',
-    },
-  },
-  ...tablerIcons,
-})
-
-export const parallelStateFrame = css({
-  position: 'absolute',
-  margin: '0',
-  padding: '0',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  border: `2px solid`,
-  borderColor: 'mantine.colors.orange[6]',
-  pointerEvents: 'none',
-  md: {
-    borderWidth: 4,
-  },
-})