@likec4/diagram 1.1.1 → 1.2.1

package/src/xyflow/XYFlowInner.tsx

@@ -0,0 +1,50 @@
+import { isDynamicView } from '@likec4/core'
+import { Controls } from '@xyflow/react'
+import type { PropsWithChildren } from 'react'
+import { isNonNull, isNonNullish, isNullish } from 'remeda'
+import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
+import { useDiagramState } from '../state/useDiagramStore'
+import { DynamicViewWalkthrough } from '../ui'
+import DiagramTitlePanel from '../ui/DiagramTitlePanel'
+import OptionsPanel from '../ui/OptionsPanel'
+import { XYFlowBackground } from './XYFlowBackground'
+
+type XYFlowInnerProps = PropsWithChildren<{
+  background: NonNullable<LikeC4DiagramProperties['background']>
+  controls: boolean
+  showDiagramTitle: boolean
+  enableDynamicViewWalkthrough: boolean
+}>
+
+export function XYFlowInner({
+  children,
+  background,
+  controls,
+  showDiagramTitle,
+  enableDynamicViewWalkthrough
+}: XYFlowInnerProps) {
+  const {
+    isDynamicView,
+    isDynamicViewActive,
+    readonly
+  } = useDiagramState(s => ({
+    isDynamicView: s.isDynamicView(),
+    readonly: s.readonly,
+    isDynamicViewActive: isNonNull(s.activeDynamicViewStep)
+  }))
+
+  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
+
+  const isDiagramTitleVisible = !isDynamicViewActive && showDiagramTitle === true
+
+  return (
+    <>
+      {isBgWithPattern && <XYFlowBackground background={background} />}
+      {controls && <Controls position={'bottom-right'} />}
+      {readonly === false && <OptionsPanel />}
+      {isDiagramTitleVisible && <DiagramTitlePanel />}
+      {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {children}
+    </>
+  )
+}

package/src/xyflow/diagram-to-xyflow.ts

@@ -1,13 +1,14 @@
 import {
   type DiagramNode,
   type DiagramView,
+  extractStep,
   type Fqn,
   invariant,
   type NonEmptyArray,
   nonNullable,
   type Point
 } from '@likec4/core'
-import { getBezierEdgeCenter } from '@xyflow/react'
+import { Bezier } from 'bezier-js'
 import { hasAtLeast } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
 
@@ -20,24 +21,16 @@ function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
 
   while (hasAtLeast(bezierPoints, 3)) {
     const [cp1, cp2, end, ...rest] = bezierPoints
-    const [centerX, centerY] = getBezierEdgeCenter({
-      sourceX: start[0],
-      sourceY: start[1],
-      targetX: end[0],
-      targetY: end[1],
-      sourceControlX: cp1[0],
-      sourceControlY: cp1[1],
-      targetControlX: cp2[0],
-      targetControlY: cp2[1]
+    const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1])
+    // const { x, y } = bezier.get(0.5)
+    const inflections = bezier.inflections()
+    if (inflections.length === 0) {
+      inflections.push(0.5)
+    }
+    inflections.forEach(t => {
+      const { x, y } = bezier.get(t)
+      handles.push([x, y])
     })
-    handles.push(
-      [centerX, centerY]
-    )
-    // if (rest.length === 0) {
-    //   handles.push(
-    //     end
-    //   )
-    // }
     bezierPoints = rest
     start = end
   }
@@ -50,12 +43,13 @@ function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
 const nodeZIndex = (node: DiagramNode) => node.level + 1
 
 export function diagramViewToXYFlowData(
-  view: Pick<DiagramView, 'nodes' | 'edges'>,
+  view: Pick<DiagramView, 'nodes' | 'edges' | '__'>,
   opts: {
     draggable: boolean
     selectable: boolean
   }
 ): XYFlowData {
+  const isDynamicView = view.__ === 'dynamic'
   const editor: XYFlowData = {
     nodes: [],
     edges: []
@@ -178,11 +172,12 @@ export function diagramViewToXYFlowData(
         controlPoints,
         headPoint: edge.headArrowPoint ?? null,
         tailPoint: edge.tailArrowPoint ?? null,
-        label: edge.labelBBox && edge.label
+        stepNum: isDynamicView ? extractStep(edge.id) : null,
+        label: !!edge.labelBBox
           ? {
             bbox: edge.labelBBox,
             // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
-            text: edge.label
+            text: edge.label ?? ''
           }
           : null
       },

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -8,14 +8,13 @@ import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, memo } from 'react'
-import { hasAtLeast } from 'remeda'
+import { first, hasAtLeast, last, zip } from 'remeda'
 import { useDiagramState } from '../../state'
 import { ZIndexes } from '../const'
 import { useXYStoreApi } from '../hooks'
 import { type XYFlowEdge } from '../types'
-import { toDomPrecision } from '../utils'
 import * as edgesCss from './edges.css'
-import { getEdgeParams } from './utils'
+import { getEdgeParams, getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
 
 // function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
@@ -63,9 +62,9 @@ function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   return path
 }
 
-// If points are within 2px, consider them the same
+// If points are within 3px, consider them the same
 const isSamePoint = (a: number, b: number) => {
-  return Math.abs(a - b) < 2.1
+  return Math.abs(a - b) < 3.1
 }
 
 const isSamePosition = (a: XYPosition, [bx, by]: Point) => {
@@ -81,10 +80,15 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   && isSamePoint(prev.sourceY, next.sourceY)
   && isSamePoint(prev.targetX, next.targetX)
   && isSamePoint(prev.targetY, next.targetY)
-  && eq(prev.data, next.data)
+  && eq(prev.data.stepNum, next.data.stepNum)
+  && eq(prev.data.edge, next.data.edge)
+  && zip(prev.data.controlPoints, next.data.controlPoints).every(([a, b]) =>
+    isSamePoint(a[0], b[0]) && isSamePoint(a[1], b[1])
+  )
 )
 
-const curve = d3line<Point>().curve(curveCatmullRomOpen.alpha(1))
+const curve = d3line<Point>()
+  .curve(curveCatmullRomOpen)
 
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
@@ -99,14 +103,20 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(nodeLookup.get(target)!, `target node ${target} not found`)
 
-  const isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
-    && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
+  const isModified = !isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
+    || !isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
 
   const { edge: diagramEdge, controlPoints } = data
+
   // const edgePath = bezierPath(edge.points)
 
   const color = diagramEdge.color ?? 'gray'
-  const isHovered = useDiagramState(s => s.hoveredEdgeId === id)
+  const isStepEdge = data.stepNum !== null
+  const { isActive, isHovered, isDimmed } = useDiagramState(s => ({
+    isActive: s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
+    isHovered: s.hoveredEdgeId === id,
+    isDimmed: s.dimmed.has(id)
+  }))
 
   const line = diagramEdge.line ?? 'dashed'
   const isDotted = line === 'dotted'
@@ -123,8 +133,14 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   let edgePath: string, labelX: number, labelY: number
 
-  if (isNotModified) {
+  if (!isModified) {
     edgePath = bezierPath(diagramEdge.points)
+    // if (diagramEdge.tailArrowPoint) {
+    //   edgePath = `M ${diagramEdge.tailArrowPoint[0]},${diagramEdge.tailArrowPoint[1]} L ${edgePath.substring(1)}`
+    // }
+    // if (diagramEdge.headArrowPoint) {
+    //   edgePath += ` L ${diagramEdge.headArrowPoint[0]},${diagramEdge.headArrowPoint[1]}`
+    // }
     labelX = data.label?.bbox.x ?? 0
     labelY = data.label?.bbox.y ?? 0
   } else {
@@ -147,28 +163,36 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
     edgePath = curve([
       [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
-      [sx, sy],
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
       ...controlPoints,
-      [tx, ty],
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
       [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
     ])!
   }
 
   return (
-    <g className={clsx(edgesCss.container)} data-likec4-color={color} data-edge-hovered={isHovered}>
-      <g className={clsx(edgesCss.fillStrokeCtx)}>
+    <g
+      className={clsx([
+        edgesCss.container,
+        isDimmed && edgesCss.dimmed
+      ])}
+      data-likec4-color={color}
+      data-edge-dir={diagramEdge.dir}
+      data-edge-active={isActive}
+      data-edge-hovered={isHovered}>
+      <g className={edgesCss.markerContext}>
         <defs>
           <marker
             id={`arrow-${id}`}
-            viewBox="0 0 10 8"
-            refX="0"
-            refY="4"
+            viewBox="0 0 16 10"
+            refX={isModified ? '12' : '10'}
+            refY="5"
             markerWidth="5"
-            markerHeight="5"
+            markerHeight="4"
             markerUnits="strokeWidth"
             preserveAspectRatio="xMaxYMid meet"
             orient="auto-start-reverse">
-            <path d="M 0 0 L 10 4 L 0 8 z" stroke="context-stroke" fill="context-stroke" />
+            <path d="M 0 0 L 16 5 L 0 10 z" stroke="context-stroke" fill="context-stroke" />
           </marker>
         </defs>
       </g>
@@ -179,37 +203,49 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
         markerStart={diagramEdge.tailArrow ? marker : undefined}
         markerEnd={diagramEdge.headArrow ? marker : undefined}
         style={style} />
-      {
-        /* controlPoints.map((p, i) => (
+      {isModified && controlPoints.map((p, i) => (
         <circle
           className={edgesCss.controlPoint}
           key={i}
           cx={p[0]}
           cy={p[1]}
-          r={5}
+          r={3}
         />
-      )) */
-      }
-      {data.label && (
+      ))}
+      {(data.label || isStepEdge) && (
         <EdgeLabelRenderer>
           <Box
-            className={clsx(edgesCss.container, edgesCss.edgeLabel)}
+            className={clsx([
+              edgesCss.container,
+              edgesCss.edgeLabel,
+              isDimmed && edgesCss.dimmed
+            ])}
             data-likec4-color={color}
             style={{
               ...assignInlineVars({
-                [edgesCss.varLabelX]: toDomPrecision(labelX) + 'px',
-                [edgesCss.varLabelY]: toDomPrecision(labelY) + 'px'
+                [edgesCss.varLabelX]: Math.floor(labelX) + 'px',
+                [edgesCss.varLabelY]: Math.floor(labelY) + 'px'
+              }),
+              ...(data.label && {
+                maxWidth: data.label.bbox.width + 12
               }),
-              maxWidth: data.label.bbox.width + 10,
               zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
             }}
             mod={{
-              'data-edge-hovered': isHovered
+              'data-edge-hovered': isHovered,
+              'data-edge-active': isActive
             }}
           >
-            <Box className={edgesCss.edgeLabelBody}>
-              {data.label.text}
-            </Box>
+            {isStepEdge && (
+              <Box className={edgesCss.stepEdgeNumber}>
+                {data.stepNum}
+              </Box>
+            )}
+            {data.label?.text && (
+              <Box className={edgesCss.edgeLabelText}>
+                {data.label.text}
+              </Box>
+            )}
             {
               /* <Popover
                 position="bottom"

package/src/xyflow/edges/edges.css.ts

@@ -1,5 +1,5 @@
 import { rem } from '@mantine/core'
-import { createVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from '../../theme.css'
 
 const mixColor = createVar('mix-color')
@@ -15,6 +15,13 @@ export const container = style({
   }
 })
 
+export const dimmed = style({})
+
+globalStyle(`svg:has(${dimmed})`, {
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
@@ -32,7 +39,7 @@ globalStyle(`:where(${isSelected}) ${container}`, {
   }
 })
 
-globalStyle(`${container}[data-edge-hovered='true']`, {
+globalStyle(`${container}:is([data-edge-hovered='true'],[data-edge-active='true'])`, {
   vars: {
     // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
@@ -54,39 +61,46 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
 globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
-globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
-  mixBlendMode: 'lighten'
-})
+// globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
+//   mixBlendMode: 'lighten'
+// })
 
 export const edgePathBg = style({
   strokeWidth: xyvars.edge.strokeWidth,
-  strokeOpacity: 0.05,
+  strokeOpacity: 0.08,
   // transition: 'stroke-width 175ms ease-in-out',
   // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
   transitionProperty: 'stroke-width, stroke-opacity',
   transitionDuration: '155ms',
   transitionTimingFunction: 'ease-out',
   selectors: {
-    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
       strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8px)`,
-      strokeOpacity: 0.11
+      strokeOpacity: 0.15
     }
   }
 })
 
-export const fillStrokeCtx = style({
+// To fix issue with marker not inheriting color from path - we need to create container
+export const markerContext = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke
+  stroke: xyvars.edge.stroke,
+  pointerEvents: 'none'
 })
 
 export const controlPoint = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke
-})
-
-globalStyle(`:where(${isSelected}) ${fillStrokeCtx}`, {
-  vars: {
-    [xyvars.edge.stroke]: xyvars.edge.strokeSelected
+  stroke: xyvars.edge.stroke,
+  fillOpacity: 0.75,
+  strokeWidth: 1,
+  cursor: 'grab',
+  pointerEvents: 'visible',
+  selectors: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
+      transition: 'all 150ms ease-out',
+      fillOpacity: 1,
+      strokeWidth: 3
+    }
   }
 })
 
@@ -107,13 +121,16 @@ export const cssEdgePath = style({
   selectors: {
     [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
-      animationDelay: '500ms',
+      animationDelay: '350ms',
       transition: 'all 130ms ease-out'
     },
-    [`:where(${isSelected}) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'all 130ms ease-out'
+    },
+    [`:where([data-edge-dir='back']) &`]: {
+      animationDirection: 'reverse'
     }
   }
 })
@@ -131,35 +148,52 @@ export const edgeLabel = style({
   pointerEvents: 'all',
   cursor: 'pointer',
   transformOrigin: '50% 50%',
-  textAlign: 'left',
   mixBlendMode: 'screen',
-  padding: '2px 6px 4px 6px',
-  width: 'max-content',
+  color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: '3px',
   transform: varTranslate,
-  backfaceVisibility: 'hidden',
   vars: {
-    // [varTranslate]: `translate(calc(${varLabelX} - 50%), calc(${varLabelY} - 50%))`,
-    [varTranslate]: `translate(${varLabelX}, ${varLabelY})`,
-    [varLabelX]: '50%',
-    [varLabelY]: '50%'
+    [varTranslate]: `translate(${fallbackVar(varLabelX, '50%')}, ${fallbackVar(varLabelY, '50%')})`
   },
   selectors: {
-    // [mantine.darkSelector]: {
-    //   mixBlendMode: 'luminosity'
-    // },
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-out',
       transform: `${varTranslate} scale(1.1)`
+    },
+    [`&:is(${dimmed})`]: {
+      transition: 'filter 800ms ease-out',
+      filter: vars.filterDimmed
     }
   }
 })
 
-export const edgeLabelBody = style({
-  // display: 'inline',
-  color: xyvars.edge.labelColor,
+export const stepEdgeNumber = style({
+  position: 'absolute',
+  top: -2,
+  left: -2,
+  fontWeight: 500,
+  fontSize: rem(16),
+  lineHeight: 0.9,
+  padding: '4px 6px',
+  borderRadius: 99999,
+  textAlign: 'center',
+  minWidth: 22,
+  backgroundColor: xyvars.edge.labelBgColor,
+  transition: 'all 120ms ease-out',
+  transform: 'translateX(-100%)',
+  fontVariantNumeric: 'tabular-nums',
+  selectors: {
+    ':where([data-edge-hovered="true"],[data-edge-active="true"]) &': {
+      fontWeight: 600,
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 5%)`
+    }
+  }
+})
+
+export const edgeLabelText = style({
+  padding: '2px 6px 4px 6px',
+  textAlign: 'left',
   fontSize: rem(12.5),
-  lineHeight: 1.12,
-  transition: 'color 120ms ease-out'
+  lineHeight: 1.2
 })

package/src/xyflow/edges/utils.ts

@@ -1,7 +1,38 @@
+import type { Point } from '@likec4/core'
 import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import type { InternalXYFlowNode } from '../types'
 
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+export function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, [x1, y1]: Point) {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight
+  } = getNodeDimensions(intersectionNode)
+
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute
+
+  const w = intersectionNodeWidth / 2
+  const h = intersectionNodeHeight / 2
+
+  const x2 = intersectionNodePosition.x + w
+  const y2 = intersectionNodePosition.y + h
+  // const x1 = targetPoint.x
+  // const y1 = targetPoint.y
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+  const xx3 = a * xx1
+  const yy3 = a * yy1
+  const x = w * (xx3 + yy3) + x2
+  const y = h * (-xx3 + yy3) + y2
+
+  return [x, y] as const
+}
+
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: InternalXYFlowNode): XYPosition {

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -11,6 +11,11 @@ export const container = style({
   margin: 0
 })
 
+export const dimmed = style({
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 export const varTransparency = createVar('transparency')
 
 const outlineColor = fallbackVar(
@@ -71,8 +76,7 @@ export const transparent = style({
       vars: {
         [bgTransparencyDelta]: '15%'
       }
-    },
-
+    }
   }
 })
 

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -37,15 +37,17 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   // const h = toDomPrecision(height ?? compound.height)
   const opacity = style.opacity ?? 100
 
-  const { isHovered, hasOnNavigateTo } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
+    isDimmed: s.dimmed.has(id),
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
+  // invert opacity to transparency
   const transparency = clamp(100 - opacity, {
     min: 0,
-    max: 98
+    max: 99
   })
 
   return (
@@ -53,7 +55,8 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
       className={clsx(
         css.container,
         'likec4-compound-node',
-        opacity < 100 && 'likec4-compound-transparent'
+        opacity < 100 && 'likec4-compound-transparent',
+        isDimmed && css.dimmed
       )}
       mod={{
         'compound-depth': depth,

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -68,7 +68,10 @@ export function ElementLink({
             <span>links</span>
           </UnstyledButton>
         </HoverCardTarget>
-        <HoverCardDropdown onClick={e => e.stopPropagation()} p={'xs'}>
+        <HoverCardDropdown
+          onPointerDownCapture={e => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
+          p={'xs'}>
           <Stack gap={'xs'}>
             {element.links.map((link) => (
               <Group key={link} wrap="nowrap" gap={'sm'}>
@@ -79,8 +82,15 @@ export function ElementLink({
                 </Box>
                 <CopyButton value={link}>
                   {({ copied, copy }) => (
-                    <Button size="compact-xs" fz={'12'} onClick={copy} color={copied ? 'teal' : 'gray'}>
-                      {copied ? 'Copied' : 'Copy'}
+                    <Button
+                      size="compact-xs"
+                      fz={'10'}
+                      variant="light"
+                      onClick={copy}
+                      color={copied
+                        ? 'teal'
+                        : 'gray'}>
+                      {copied ? 'copied' : 'copy'}
                     </Button>
                   )}
                 </CopyButton>