likec4 0.44.2 → 0.46.0

package/dist/@likec4/diagrams/diagram/shapes/Cylinder.js

@@ -3,6 +3,7 @@ import { useSpring } from "@react-spring/konva";
 import { AnimatedEllipse, AnimatedPath } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeIcon } from "./NodeIcon.js";
 function cylinderSVGPath(diameter, height, tilt = 0.0825) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
@@ -51,6 +52,7 @@ export function CylinderShape({ node, theme, springs, isHovered }) {
         fill: springs.stroke
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, offsetY: -ry * (node.icon ? 1.5 : 0.5), theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, offsetY: -4 - ry * (node.icon ? 1 : 0), theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, paddingY: ry + 4, offsetY: -ry - 8 })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/Edge.js

@@ -16,15 +16,15 @@ function EdgeArrow({
   return /* @__PURE__ */ jsx(
     AnimatedLine,
     {
-      opacity: springs.opacity,
       points: points.flat(),
       closed: true,
       fill: isOutline ? void 0 : springs.lineColor,
       stroke: springs.lineColor,
-      strokeWidth: 1.6,
-      hitStrokeWidth: 5,
+      strokeWidth: 1,
       lineCap: "round",
       lineJoin: "miter",
+      perfectDrawEnabled: false,
+      listening: false,
       globalCompositeOperation
     }
   );
@@ -35,14 +35,14 @@ function EdgeLabelBg({
   isHovered,
   springs
 }) {
-  const padding = 4;
+  const padding = 2;
   const props = useSpring({
     to: {
       x: labelBBox.x - padding,
       y: labelBBox.y - padding,
       width: labelBBox.width + padding * 2,
       height: labelBBox.height + padding * 2,
-      opacity: isHovered ? 0.25 : 0.1
+      opacity: isHovered ? 0.5 : 0.12
     },
     immediate: !animate
   });
@@ -50,6 +50,7 @@ function EdgeLabelBg({
     AnimatedRect,
     {
       ...props,
+      perfectDrawEnabled: false,
       fill: springs.labelBgColor,
       cornerRadius: 2,
       globalCompositeOperation: "darken",
@@ -57,7 +58,7 @@ function EdgeLabelBg({
     }
   );
 }
-export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
+export function Edge({ animate = true, edge, theme, isHovered, springs }) {
   const {
     points,
     head,
@@ -82,7 +83,6 @@ export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
     /* @__PURE__ */ jsx(
       AnimatedLine,
       {
-        opacity: springs.opacity,
         bezier: true,
         dashEnabled: isDashed,
         dashOffset: 1,
@@ -93,6 +93,7 @@ export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
         hitStrokeWidth: 20,
         lineCap: "round",
         lineJoin: "round",
+        perfectDrawEnabled: false,
         globalCompositeOperation
       }
     ),
@@ -129,14 +130,13 @@ export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
       AnimatedText,
       {
         x: label.pt[0],
-        y: label.pt[1],
-        offsetY: label.fontSize / 2,
-        opacity: springs.opacity,
+        y: label.pt[1] - label.fontSize,
         fill: springs.labelColor,
         fontFamily: theme.font,
         fontSize: label.fontSize,
         fontStyle: label.fontStyle ?? "normal",
         text: label.text,
+        perfectDrawEnabled: false,
         listening: false,
         globalCompositeOperation,
         shadowEnabled: springs.opacity.to((o) => o > 0.5),

package/dist/@likec4/diagrams/diagram/shapes/Mobile.js

@@ -1,9 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect, Circle } from "../../konva.js";
+import { AnimatedCircle, AnimatedRect } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeIcon } from "./NodeIcon.js";
 export function MobileShape({ node, theme, springs, isHovered }) {
   const colors = theme.elements[node.color];
+  const maxWidth = node.size.width - 40 - 30;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       AnimatedRect,
@@ -12,10 +14,21 @@ export function MobileShape({ node, theme, springs, isHovered }) {
         cornerRadius: 6,
         width: springs.width,
         height: springs.height,
-        fill: springs.stroke
+        fill: springs.stroke,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 16,
+        y: node.size.height / 2,
+        radius: 10,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
-    /* @__PURE__ */ jsx(Circle, { x: 16, y: node.size.height / 2, radius: 10, fill: colors.fill, listening: false }),
     /* @__PURE__ */ jsx(
       AnimatedRect,
       {
@@ -25,9 +38,11 @@ export function MobileShape({ node, theme, springs, isHovered }) {
         width: springs.width.to((w) => w - 43),
         height: springs.height.to((h) => h - 24),
         fill: springs.fill,
+        perfectDrawEnabled: false,
         listening: false
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetX: -6 })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetX: -10, maxWidth }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, offsetX: -10, maxWidth })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/NodeIcon.js

@@ -1,23 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import useImageLoader from "../../hooks/useImageLoader.js";
 import { Image } from "../../konva.js";
-export function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }) {
+function IconImage({
+  icon,
+  centerX,
+  centerY,
+  maxWidth,
+  maxHeight,
+  offsetX = 0,
+  offsetY = 0
+}) {
   const [image] = useImageLoader(icon);
   if (!image) {
     return null;
   }
-  const padding = 16;
-  const maxIconWidth = Math.round(maxWidth - padding * 2);
-  const maxIconHeight = Math.round(maxHeight - padding * 2);
-  const scale = Math.min(maxIconWidth / image.width, maxIconHeight / image.height, 1);
-  const iconWidth = Math.floor(image.width * scale);
-  const iconHeight = Math.floor(image.height * scale);
+  const scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight);
+  const iconWidth = Math.floor(image.naturalWidth * scale);
+  const iconHeight = Math.floor(image.naturalHeight * scale);
   return /* @__PURE__ */ jsx(
     Image,
     {
       image,
-      x: padding + (maxIconWidth - iconWidth) / 2,
-      y: padding + (maxIconHeight - iconHeight) / 2,
+      x: centerX - iconWidth / 2,
+      y: centerY - iconHeight / 2,
       offsetX,
       offsetY,
       width: iconWidth,
@@ -27,3 +32,36 @@ export function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }
     }
   );
 }
+export function NodeIcon({
+  node,
+  maxWidth,
+  paddingX = 24,
+  paddingY = 24,
+  offsetX = 0,
+  offsetY = 0
+}) {
+  if (!node.icon) {
+    return null;
+  }
+  const firstLabel = node.labels[0];
+  if (!firstLabel) {
+    return null;
+  }
+  const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25);
+  const maxIconHeight = Math.round(firstLabelY - paddingY - 8);
+  const maxIconWidth = maxWidth ?? node.size.width - paddingX * 2;
+  const centerY = paddingY + Math.floor(maxIconHeight / 2);
+  const centerX = Math.floor(node.size.width / 2);
+  return /* @__PURE__ */ jsx(
+    IconImage,
+    {
+      icon: node.icon,
+      centerX,
+      centerY,
+      maxWidth: maxIconWidth,
+      maxHeight: maxIconHeight,
+      offsetX,
+      offsetY
+    }
+  );
+}

package/dist/@likec4/diagrams/diagram/shapes/NodeLabel.js

@@ -1,59 +1,36 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "../../konva.js";
-import { NodeIcon } from "./NodeIcon.js";
-export function NodeLabels({
-  node: { icon, labels, size, color },
-  theme,
-  offsetX = 0,
-  offsetY = 0,
-  maxWidth
-}) {
+import { jsx } from "react/jsx-runtime";
+import { Group, Text } from "../../konva.js";
+export function NodeLabels({ node, theme, offsetX = 0, offsetY = 0, maxWidth }) {
+  const { labels, size, color } = node;
   const colors = theme.elements[color];
-  const width = maxWidth ?? size.width;
-  const firstLabel = labels[0];
-  const titleFontSize = firstLabel?.fontSize ?? 12;
-  let nodeIcon;
-  if (icon) {
-    const maxHeight = firstLabel ? Math.floor(firstLabel.pt[1] - firstLabel.fontSize / 2) : size.height;
-    nodeIcon = /* @__PURE__ */ jsx(
-      NodeIcon,
+  const width = maxWidth ?? size.width - 40;
+  const titleFontSize = labels[0]?.fontSize ?? 18;
+  const x = Math.ceil((size.width - width) / 2);
+  return /* @__PURE__ */ jsx(Group, { x, y: 3, offsetX, offsetY, children: labels.map((label, i) => {
+    const isTitle = label.fontSize === titleFontSize;
+    let color2 = colors.hiContrast;
+    if (!isTitle) {
+      color2 = colors.loContrast;
+    }
+    return /* @__PURE__ */ jsx(
+      Text,
       {
-        icon,
-        maxWidth: width,
-        maxHeight,
-        offsetX,
-        offsetY
-      }
+        text: label.text,
+        x: 0,
+        y: label.pt[1] - label.fontSize,
+        width,
+        fill: color2,
+        fontFamily: theme.font,
+        fontSize: label.fontSize,
+        fontStyle: label.fontStyle ?? "normal",
+        align: "center",
+        wrap: "none",
+        strokeEnablaed: false,
+        perfectDrawEnabled: false,
+        listening: false
+      },
+      label.text + i
     );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    nodeIcon,
-    labels.map((label, i) => {
-      let color2 = colors.hiContrast;
-      if (label.fontSize !== titleFontSize) {
-        color2 = colors.loContrast;
-      }
-      return /* @__PURE__ */ jsx(
-        Text,
-        {
-          x: 8,
-          width: width - 16,
-          y: label.pt[1],
-          offsetY: offsetY + label.fontSize / 2,
-          offsetX,
-          fill: color2,
-          fontFamily: theme.font,
-          fontSize: label.fontSize,
-          fontStyle: label.fontStyle ?? "normal",
-          align: "center",
-          text: label.text,
-          strokeEnabled: false,
-          perfectDrawEnabled: false,
-          listening: false
-        },
-        label.text + i
-      );
-    })
-  ] });
+  }) });
 }
 NodeLabels.displayName = "NodeLabels";

package/dist/@likec4/diagrams/diagram/shapes/Person.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useShadowSprings } from "../springs.js";
 import { AnimatedPath, AnimatedRect } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
+import { NodeIcon } from "./NodeIcon.js";
 const PersonIcon = {
   width: 115,
   height: 120,
@@ -37,6 +38,7 @@ export function PersonShape({ node, theme, springs, isHovered }) {
         listening: false
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/Queue.js

@@ -3,6 +3,7 @@ import { useShadowSprings } from "../springs.js";
 import { AnimatedEllipse, AnimatedPath } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useSpring } from "@react-spring/konva";
+import { NodeIcon } from "./NodeIcon.js";
 function queueSVGPath(width, height, tilt = 0.2) {
   const diameter = height;
   const radius = Math.round(diameter / 2);
@@ -52,6 +53,7 @@ export function QueueShape({ node, theme, springs, isHovered }) {
         fill: springs.stroke
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, maxWidth: width - rx * 2, theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, maxWidth: width - 2 * rx - 10, offsetX: rx, theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, maxWidth: width - 2 * rx - 10, offsetX: rx })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/Rectangle.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatedRect } from "../../konva.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeIcon } from "./NodeIcon.js";
 import { NodeLabels } from "./NodeLabel.js";
 export function RectangleShape({ node, theme, springs, isHovered }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -15,6 +16,7 @@ export function RectangleShape({ node, theme, springs, isHovered }) {
         fill: springs.fill
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/index.js

@@ -4,4 +4,4 @@ export { CylinderShape } from "./Cylinder.js";
 export { MobileShape } from "./Mobile.js";
 export { QueueShape } from "./Queue.js";
 export { PersonShape } from "./Person.js";
-export { EdgeShape } from "./Edge.js";
+export { Edge } from "./Edge.js";

package/dist/@likec4/diagrams/diagram/shapes/utils.js

@@ -7,6 +7,6 @@ export function mousePointer(e) {
 export function mouseDefault(e) {
   const container = e.target.getStage()?.container();
   if (container) {
-    container.style.cursor = "auto";
+    container.style.cursor = "";
   }
 }

package/dist/@likec4/diagrams/diagram/state/atoms.js

@@ -93,3 +93,9 @@ export const hoveredEdgeAtom = atom(
   }
 );
 export const hoveredEdgeIdAtom = selectAtom(hoveredEdgeAtom, (edge) => edge?.id ?? null);
+export const resetHoveredStatesAtom = atom(void 0, (get, set) => {
+  clearTimeout(get(nodeTimeoutAtom));
+  clearTimeout(get(edgeTimeoutAtom));
+  set(currentHoveredNodeAtom, null);
+  set(currentHoveredEdgeAtom, null);
+});

package/dist/@likec4/diagrams/diagram/state/hooks.js

@@ -1,5 +1,11 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { hoveredEdgeAtom, hoveredEdgeIdAtom, hoveredNodeAtom, hoveredNodeIdAtom } from "./atoms.js";
+import {
+  hoveredEdgeAtom,
+  hoveredEdgeIdAtom,
+  hoveredNodeAtom,
+  hoveredNodeIdAtom,
+  resetHoveredStatesAtom
+} from "./atoms.js";
 export function useHoveredNode() {
   return useAtom(hoveredNodeAtom);
 }
@@ -18,3 +24,6 @@ export function useHoveredEdgeId() {
 export function useSetHoveredEdge() {
   return useSetAtom(hoveredEdgeAtom);
 }
+export function useResetHoveredStates() {
+  return useSetAtom(resetHoveredStatesAtom);
+}

package/dist/@likec4/diagrams/hooks/useDiagramApi.js

@@ -1,27 +1,24 @@
-import { useRef, useMemo } from "react";
 import { nonNullable } from "@likec4/core";
+import { useRef, useState } from "react";
 export function useDiagramApi() {
   const ref = useRef(null);
-  return useMemo(
-    () => [
-      ref,
-      {
-        get stage() {
-          return nonNullable(ref.current, "not mounted, use ref").stage;
-        },
-        get diagramView() {
-          return nonNullable(ref.current, "not mounted, use ref").diagramView;
-        },
-        get container() {
-          return nonNullable(ref.current, "not mounted, use ref").container;
-        },
-        resetStageZoom: (_immediate) => {
-          nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
-        },
-        centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
-        centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
-      }
-    ],
-    [ref]
+  const [api] = useState(
+    () => ({
+      get stage() {
+        return ref.current?.stage ?? null;
+      },
+      get diagramView() {
+        return nonNullable(ref.current, "not mounted, use ref").diagramView;
+      },
+      get container() {
+        return ref.current?.container ?? null;
+      },
+      resetStageZoom: (_immediate) => {
+        nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
+      },
+      centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
+      centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
+    })
   );
+  return [ref, api];
 }

package/dist/@likec4/diagrams/hooks/useImageLoader.js

@@ -8,10 +8,14 @@ export default function useImageLoader(url, crossOrigin, referrerpolicy) {
   const statusRef = useRef(imageRef.current ? "loaded" : "loading");
   const [_, setStateToken] = useState(0);
   const urlRef = useRef(url);
-  if (!url || urlRef.current !== url) {
+  const crossOriginRef = useRef(crossOrigin);
+  const referrerPolicyRef = useRef(referrerpolicy);
+  if (!url || urlRef.current !== url || crossOriginRef.current !== crossOrigin || referrerPolicyRef.current !== referrerpolicy) {
     statusRef.current = "loading";
     imageRef.current = void 0;
     urlRef.current = url;
+    crossOriginRef.current = crossOrigin;
+    referrerPolicyRef.current = referrerpolicy;
   }
   useLayoutEffect(() => {
     if (!url) {
@@ -28,6 +32,8 @@ export default function useImageLoader(url, crossOrigin, referrerpolicy) {
       return;
     }
     const img = document.createElement("img");
+    img.style.width = "100%";
+    img.style.height = "auto";
     function onload() {
       if (!isMounted())
         return;

package/dist/__app__/index.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" type="text/css" href="/likec4.css" />
 </head>
 <body>
-  <div id="like4-root" class="w-screen h-screen m-0 p-0"></div>
+  <div id="like4-root"></div>
   <script type="module" src="/src/main"></script>
 </body>
 </html>

package/dist/__app__/likec4.css

@@ -8,11 +8,34 @@
   --font-weight-bold: 600;
 }
 
+*,
+:before,
+:after {
+  box-sizing: border-box;
+  outline: none;
+  border-width: 0;
+  border-style: solid;
+  border-color: transparent;
+}
+
 html, body {
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#like4-root {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
 }
 
 .transparent-bg {
   --color-page-background: transparent !important;
+
+  body {
+    background-color: transparent !important;
+  }
 }

package/dist/__app__/src/App.jsx

@@ -1,15 +1,37 @@
 import { Provider } from 'jotai';
 import { Fragment } from 'react';
 import { Sidebar } from './components';
-import { ExportPage, IndexPage, ViewPage } from './pages';
+import { ExportPage, IndexPage, EmbedPage, ViewPage } from './pages';
 import { useRoute } from './router';
 import { Theme } from '@radix-ui/themes';
+import { nonexhaustive } from '@likec4/core';
+import { isNil } from 'remeda';
 const Routes = () => {
     const r = useRoute();
-    return (<Theme hasBackground={r.route !== 'export'} accentColor='indigo' radius='small' appearance={r.params?.theme}>
-      {r.route === 'index' && <IndexPage key='index'/>}
-      {r.route === 'view' && <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI}/>}
-      {r.route === 'export' && (<ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding}/>)}
+    const theme = r.params?.theme;
+    let page = null;
+    switch (r.route) {
+        case 'view': {
+            page = <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI}/>;
+            break;
+        }
+        case 'export': {
+            page = <ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding}/>;
+            break;
+        }
+        case 'embed': {
+            page = (<EmbedPage key='embed' viewId={r.params.viewId} padding={r.params.padding} transparentBg={isNil(r.params.theme)}/>);
+            break;
+        }
+        case 'index': {
+            page = <IndexPage key='index'/>;
+            break;
+        }
+        default:
+            nonexhaustive(r);
+    }
+    return (<Theme hasBackground={!!theme} accentColor='indigo' radius='small' appearance={theme}>
+      {page}
       {r.showUI && (<Fragment key='ui'>
           <Sidebar />
         </Fragment>)}

package/dist/__app__/src/components/DiagramNotFound.jsx

@@ -1,7 +1,7 @@
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Box, Button, Card, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
+import { Box, Button, Card, Code, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
 import { $pages } from '../router';
-export const DiagramNotFound = () => {
+export const DiagramNotFound = ({ viewId }) => {
     return (<Flex position='fixed' inset='0' align='center' justify='center'>
       <Card color='red' size='3'>
         <Flex gap='4' direction='row' align='start'>
@@ -14,9 +14,15 @@ export const DiagramNotFound = () => {
             <Heading trim='both' color='amber' size='4'>
               Diagram not found
             </Heading>
-            <Text as='div'>The diagram you are looking for does not exist.</Text>
+            <Text as='div'>
+              The diagram{' '}
+              <Code color='amber' variant='soft'>
+                {viewId}
+              </Code>{' '}
+              does not exist
+            </Text>
             <Box pt='2'>
-              <Button variant='soft' color='amber' onClick={() => $pages.index.open()}>
+              <Button variant='soft' color='amber' className='cursor-pointer' onClick={() => $pages.index.open()}>
                 Go to overview
               </Button>
             </Box>

package/dist/__app__/src/components/sidebar/Sidebar.jsx

@@ -2,7 +2,7 @@ import { Box, Button, Flex, IconButton, ScrollArea, Separator } from '@radix-ui/
 import { useClickOutside, useToggle } from '@react-hookz/web/esm';
 import { HamburgerMenuIcon, ArrowLeftIcon } from '@radix-ui/react-icons';
 import { useRef } from 'react';
-import { cn } from '~/utils';
+import { cn } from '../../utils';
 import { DiagramsTree } from './DiagramsTree';
 import styles from './styles.module.css';
 import { $pages } from '../../router';

package/dist/__app__/src/components/view-page/DisplayModeSelector.jsx

@@ -25,7 +25,7 @@ export const DisplayModeSelector = () => {
     };
     return (<Flex display={{
             initial: 'none',
-            md: 'flex'
+            sm: 'flex'
         }} gap='3' align='center'>
       <Button variant={current === first ? 'solid' : 'ghost'} size='1' onClick={changeMode(first)}>
         {Mode[first]}