@canmingir/link 1.2.43 → 1.2.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.43",
+  "version": "1.2.48",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/components/logo/logo.jsx

@@ -1,18 +1,18 @@
+import React, { useEffect, useRef, useState } from "react";
+
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { RouterLink } from "../../routes/components";
 import config from "../../config/config";
 
-import React, { useEffect, useRef, useState } from "react";
-
 const resolvedDimensions = {};
 
 const Logo = ({ disabledLink = false, sx, maxSize = 65, isLogin = false }) => {
   const { icon } = config().template.login;
-  const key = `${icon}`;
+  const key = `${icon}_${maxSize}_${isLogin}`;
 
   const [dimensions, setDimensions] = useState(
-    resolvedDimensions[key] || { width: maxSize, height: maxSize }
+    resolvedDimensions[key] || { width: maxSize, height: maxSize },
   );
 
   useEffect(() => {

package/src/lib/DevTool/DevTool.jsx

@@ -0,0 +1,117 @@
+import { Box, Divider } from "@mui/material";
+
+import React from "react";
+
+const DevTool = ({
+  width = 62,
+  height = "auto",
+  top = "50%",
+  open = true,
+  content,
+  header,
+  footer,
+  sx,
+}) => {
+  if (!open) return null;
+
+  return (
+    <Box
+      component="aside"
+      sx={{
+        position: "fixed",
+        top,
+        right: 0,
+        transform: "translateY(-50%)",
+        width,
+        height,
+        bgcolor: (theme) =>
+          theme.palette.mode === "dark"
+            ? "background.paper"
+            : "rgba(255, 255, 255, 0.85)",
+        backdropFilter: "blur(16px) saturate(180%)",
+        WebkitBackdropFilter: "blur(16px) saturate(180%)",
+        border: (theme) =>
+          `1px solid ${
+            theme.palette.mode === "dark"
+              ? "rgba(255,255,255,0.07)"
+              : "rgba(0,0,0,0.07)"
+          }`,
+        borderRadius: "4px",
+        boxShadow: (theme) =>
+          theme.palette.mode === "dark"
+            ? "0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)"
+            : "0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04)",
+        zIndex: (theme) => theme.zIndex.modal + 3,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        py: 1.5,
+        overflowY: "hidden",
+        overflowX: "hidden",
+        "&::-webkit-scrollbar": { display: "none" },
+        scrollbarWidth: "none",
+        ...(sx || {}),
+      }}
+    >
+      {header && (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            flexShrink: 0,
+          }}
+        >
+          {header}
+        </Box>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          overflowY: "auto",
+          overflowX: "hidden",
+          "&::-webkit-scrollbar": { display: "none" },
+          scrollbarWidth: "none",
+        }}
+      >
+        {content}
+      </Box>
+
+      {footer && (
+        <>
+          <Divider
+            flexItem
+            sx={{
+              borderColor: (theme) =>
+                theme.palette.mode === "dark"
+                  ? "rgba(255,255,255,0.07)"
+                  : "rgba(0,0,0,0.07)",
+              width: "100%",
+              flexShrink: 0,
+            }}
+          />
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              flexShrink: 0,
+              pt: 0.5,
+            }}
+          >
+            {footer}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default DevTool;

package/src/lib/DevTool/index.js

@@ -0,0 +1 @@
+export { default } from "./DevTool";

package/src/lib/Flow/nodes/DraggableNode.jsx

@@ -8,7 +8,7 @@ const DraggableNode = ({
   registerRef,
   onDrag,
   nodeId,
-  selectionColor = "#64748b",
+  selectionColor = "#373739",
   initialPosition,
   onConnect,
 }) => {
@@ -164,20 +164,55 @@ const DraggableNode = ({
         transform: `translate(${offset.x}px, ${offset.y}px)`,
         cursor: "grab",
         "&:active": { cursor: "grabbing" },
-        ...(selected && {
-          "&::after": {
-            content: '""',
-            position: "absolute",
-            inset: -6,
-            border: `2px solid ${selectionColor}`,
-            borderRadius: "12px",
-            pointerEvents: "none",
-            boxShadow: `0 0 8px ${selectionColor}66`,
-          },
-        }),
       }}
     >
       {children}
+      {selected &&
+        selectedIds.size > 1 &&
+        [
+          {
+            top: -10,
+            left: -6,
+            borderTop: 2,
+            borderLeft: 2,
+            color: selectionColor,
+          },
+          {
+            top: -8,
+            right: -12,
+            borderTop: 2,
+            borderRight: 2,
+            color: selectionColor,
+          },
+          {
+            bottom: -14,
+            left: -6,
+            borderBottom: 2,
+            borderLeft: 2,
+            color: selectionColor,
+          },
+          {
+            bottom: -16,
+            right: -12,
+            borderBottom: 2,
+            borderRight: 2,
+            color: selectionColor,
+          },
+        ].map((pos, i) => (
+          <Box
+            key={i}
+            sx={{
+              position: "absolute",
+              width: 10,
+              height: 10,
+              borderStyle: "solid",
+              borderColor: selectionColor,
+              borderWidth: 0,
+              pointerEvents: "none",
+              ...pos,
+            }}
+          />
+        ))}
     </Box>
   );
 };

package/src/lib/Flow/selection/SelectionOverlay.jsx

@@ -1,6 +1,49 @@
 import { Box } from "@mui/material";
 import { hexToRgba } from "../utils/flowUtils";
 
+const HANDLE_SIZE = 10;
+const HANDLE_THICKNESS = 2;
+
+const cornerStyles = (placement) => {
+  const base = {
+    position: "absolute",
+    width: HANDLE_SIZE,
+    height: HANDLE_SIZE,
+    borderColor: "inherit",
+    borderStyle: "solid",
+    borderWidth: 0,
+  };
+
+  const map = {
+    topLeft: {
+      top: 0,
+      left: 0,
+      borderTopWidth: HANDLE_THICKNESS,
+      borderLeftWidth: HANDLE_THICKNESS,
+    },
+    topRight: {
+      top: 0,
+      right: 0,
+      borderTopWidth: HANDLE_THICKNESS,
+      borderRightWidth: HANDLE_THICKNESS,
+    },
+    bottomLeft: {
+      bottom: 0,
+      left: 0,
+      borderBottomWidth: HANDLE_THICKNESS,
+      borderLeftWidth: HANDLE_THICKNESS,
+    },
+    bottomRight: {
+      bottom: 0,
+      right: 0,
+      borderBottomWidth: HANDLE_THICKNESS,
+      borderRightWidth: HANDLE_THICKNESS,
+    },
+  };
+
+  return { ...base, ...map[placement] };
+};
+
 const SelectionOverlay = ({ box, selectionColor = "#64748b" }) => {
   if (!box) return null;
 
@@ -18,13 +61,17 @@ const SelectionOverlay = ({ box, selectionColor = "#64748b" }) => {
         top,
         width,
         height,
-        border: `2px solid ${selectionColor}`,
-        backgroundColor: hexToRgba(selectionColor, 0.1),
+        backgroundColor: hexToRgba(selectionColor, 0.08),
         pointerEvents: "none",
         zIndex: 9999,
         borderRadius: "4px",
+        color: selectionColor,
       }}
-    />
+    >
+      {["topLeft", "topRight", "bottomLeft", "bottomRight"].map((placement) => (
+        <Box key={placement} sx={cornerStyles(placement)} />
+      ))}
+    </Box>
   );
 };
 

package/src/lib/GlassCard/GlassCard.jsx

@@ -1,24 +1,20 @@
-import { Box, Card, Divider, Typography } from "@mui/material";
-import { alpha, useTheme } from "@mui/material/styles";
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Divider,
+} from "@mui/material";
 
 import React from "react";
+import { useTheme } from "@mui/material/styles";
 
-const GlassCard = ({
-  width = "100%",
-  height = "85vh",
-  header,
-  content,
-  actions,
-  contentSx = {},
-}) => {
+const GlassCard = ({ children, sx = {}, ...props }) => {
   const theme = useTheme();
 
   return (
     <Card
       sx={{
-        width: width || "100%",
-        height: height || "85vh",
-        flexShrink: 0,
         display: "flex",
         flexDirection: "column",
         background: `linear-gradient(135deg, ${theme.palette.primary.main}08 0%, ${theme.palette.secondary.main}05 100%)`,
@@ -26,70 +22,63 @@ const GlassCard = ({
         border: `1px solid ${theme.palette.divider}`,
         borderRadius: 2,
         overflow: "hidden",
+        ...sx,
       }}
+      {...props}
     >
-      {header && (
-        <>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              px: 2,
-              py: 1.5,
-              minHeight: 52,
-              flexShrink: 0,
-            }}
-          >
-            <Box sx={{ minWidth: 0, flex: 1 }}>
-              <Typography
-                variant="subtitle2"
-                noWrap
-                sx={{
-                  fontWeight: 600,
-                  color: "text.primary",
-                  lineHeight: 1.3,
-                }}
-              >
-                {header.title}
-              </Typography>
-              {header.subtitle && (
-                <Typography
-                  variant="caption"
-                  noWrap
-                  sx={{
-                    color: "text.secondary",
-                    lineHeight: 1.3,
-                    display: "block",
-                  }}
-                >
-                  {header.subtitle}
-                </Typography>
-              )}
-            </Box>
-            {actions && <Box sx={{ ml: 1, flexShrink: 0 }}>{actions}</Box>}
-          </Box>
-          <Divider />
-        </>
-      )}
-
-      <Box
-        sx={{
-          flex: 1,
-          overflow: "auto",
-          position: "relative",
-          ...contentSx,
-        }}
-      >
-        {!header && actions && (
-          <Box sx={{ position: "absolute", top: 8, right: 8, zIndex: 1 }}>
-            {actions}
-          </Box>
-        )}
-        {content}
-      </Box>
+      {children}
     </Card>
   );
 };
 
+const GlassCardHeader = ({ divider = true, sx = {}, ...props }) => (
+  <>
+    <CardHeader
+      sx={{
+        px: 1.5,
+        py: 0.75,
+        "& .MuiCardHeader-title": {
+          fontSize: "0.8125rem",
+          fontWeight: 600,
+          lineHeight: 1.3,
+        },
+        "& .MuiCardHeader-subheader": {
+          fontSize: "0.75rem",
+          lineHeight: 1.3,
+        },
+        ...sx,
+      }}
+      {...props}
+    />
+    {divider && <Divider />}
+  </>
+);
+
+const GlassCardContent = ({ sx = {}, ...props }) => (
+  <CardContent
+    sx={{
+      flex: 1,
+      overflow: "auto",
+      position: "relative",
+      p: 0,
+      "&:last-child": { pb: 0 },
+      ...sx,
+    }}
+    {...props}
+  />
+);
+
+const GlassCardActions = ({ sx = {}, ...props }) => (
+  <CardActions
+    sx={{
+      px: 1.5,
+      py: 0.75,
+      flexShrink: 0,
+      ...sx,
+    }}
+    {...props}
+  />
+);
+
+export { GlassCardHeader, GlassCardContent, GlassCardActions };
 export default GlassCard;

package/src/lib/GlassCard/index.js

@@ -1 +1 @@
-export { default } from "./GlassCard";
+export { default, GlassCardHeader, GlassCardContent, GlassCardActions } from "./GlassCard";

package/src/lib/index.js

@@ -49,4 +49,10 @@ export { default as Schema } from "./Schema";
 export { default as SchemaEditor } from "./SchemaEditor";
 export { default as ToggleableMenu } from "./ToggleableMenu";
 export { default as APIBody } from "./NewApiBody/NewAPIBody";
-export { default as GlassCard } from "./GlassCard/GlassCard";
+export {
+  default as GlassCard,
+  GlassCardHeader,
+  GlassCardContent,
+  GlassCardActions,
+} from "./GlassCard/GlassCard";
+export { default as DevTool } from "./DevTool";