@canmingir/link 1.2.16 → 1.2.18

package/package.json

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

package/src/layouts/common/account-popover.jsx

@@ -1,3 +1,5 @@
+import CustomPopover, { usePopover } from "../../components/custom-popover";
+
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
@@ -14,8 +16,6 @@ import { useRouter } from "../../routes/hooks";
 import { useUser } from "../../hooks/use-user";
 import { varHover } from "../../components/animate";
 
-import CustomPopover, { usePopover } from "../../components/custom-popover";
-
 // ----------------------------------------------------------------------
 
 export default function AccountPopover() {
@@ -29,6 +29,9 @@ export default function AccountPopover() {
     try {
       storage.remove("link", "accessToken");
       storage.remove("link", "refreshToken");
+      storage.remove("link", "identityProvider");
+      storage.remove("projectId");
+      storage.remove("landingLevel");
       popover.onClose();
       router.replace("/login");
     } catch (error) {

package/src/lib/Flow/connectors/DynamicConnector.jsx

@@ -18,6 +18,7 @@ const DynamicConnector = ({
   animationSpeed = 1,
   gradient = null,
   curvature = 0.5,
+  connectorType = "curved",
 }) => {
   const uniqueId = useId();
   const [dims, setDims] = useState(null);
@@ -91,6 +92,19 @@ const DynamicConnector = ({
   );
 
   const getPath = (from, to) => {
+    const isCornered =
+      connectorType === "cornered" || connectorType === "normal";
+
+    if (isCornered) {
+      if (isHorizontal) {
+        const midX = from.x + (to.x - from.x) / 2;
+        return `M ${from.x} ${from.y} L ${midX} ${from.y} L ${midX} ${to.y} L ${to.x} ${to.y}`;
+      }
+
+      const midY = from.y + (to.y - from.y) / 2;
+      return `M ${from.x} ${from.y} L ${from.x} ${midY} L ${to.x} ${midY} L ${to.x} ${to.y}`;
+    }
+
     const dx = Math.abs(to.x - from.x);
     const dy = Math.abs(to.y - from.y);
     const distance = Math.sqrt(dx * dx + dy * dy);

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

@@ -56,6 +56,7 @@ const FlowNodeView = ({
     animationSpeed = baseStyle.animationSpeed ?? 1,
     gradient = baseStyle.gradient ?? null,
     curvature = baseStyle.curvature ?? 0.5,
+    connectorType = baseStyle.connectorType ?? "curved",
     selectionColor = baseStyle.selectionColor ?? "#64748b",
   } = nodeStyle;
 
@@ -170,6 +171,7 @@ const FlowNodeView = ({
             animationSpeed={animationSpeed}
             gradient={gradient}
             curvature={curvature}
+            connectorType={connectorType}
           />
 
           <Box

package/src/lib/Flow/styles.js

@@ -25,6 +25,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
     case "pill":
       return {
@@ -44,6 +45,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.4,
+        connectorType: "curved",
       };
     case "n8n":
       return {
@@ -63,6 +65,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
     case "simple":
     default:
@@ -83,6 +86,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
   }
 };

package/src/widgets/SettingsDialog.jsx

@@ -1,10 +1,12 @@
 import {
   Avatar,
   Box,
+  Chip,
   FormControl,
   Grow,
   IconButton,
   InputLabel,
+  Link,
   List,
   ListItem,
   ListItemAvatar,
@@ -22,6 +24,7 @@ import React, { useEffect, useState } from "react";
 
 import Iconify from "../components/Iconify";
 import config from "../config/config";
+import pkg from "../../../../../../package.json";
 import { useEvent } from "@nucleoidai/react-event";
 import useSettings from "../hooks/useSettings";
 import { useUser } from "../hooks/use-user";
@@ -95,13 +98,18 @@ const SettingsDialogTabs = ({ tabs }) => {
             sx={{ "& label": { color: "custom.grey" } }}
             {...a11yProps(1)}
           />
+          <Tab
+            label={"About"}
+            sx={{ "& label": { color: "custom.grey" } }}
+            {...a11yProps(2)}
+          />
           {tabs?.map((tab, index) => (
             <Tab
               key={tab.label}
               iconPosition="start"
               label={tab.label}
               sx={{ "& label": { color: "custom.grey" } }}
-              {...a11yProps(index + 2)}
+              {...a11yProps(index + 3)}
             />
           ))}
         </Tabs>
@@ -112,8 +120,11 @@ const SettingsDialogTabs = ({ tabs }) => {
           <TabPanel value={value} index={1}>
             <Settings />
           </TabPanel>
+          <TabPanel value={value} index={2}>
+            <About />
+          </TabPanel>
           {tabs?.map((tab, index) => (
-            <TabPanel key={tab.label} value={value} index={index + 2}>
+            <TabPanel key={tab.label} value={value} index={index + 3}>
               <tab.panel />
             </TabPanel>
           ))}
@@ -305,4 +316,118 @@ const Settings = () => {
   );
 };
 
+const About = () => {
+  const iconSrc = config().template?.login?.icon || "";
+
+  const appName = pkg.name;
+  const version = pkg.version;
+  const description = pkg.description;
+
+  return (
+    <Stack direction="column" spacing={2} p={2}>
+      <Box
+        sx={{
+          p: 3,
+          borderRadius: 3,
+          border: "1px solid",
+          borderColor: "divider",
+          background:
+            "linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01))",
+        }}
+      >
+        <Stack direction="row" spacing={2.5} alignItems="center">
+          <Avatar
+            src={iconSrc}
+            variant="rounded"
+            sx={{
+              width: 56,
+              height: 56,
+              borderRadius: 2,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+            }}
+          >
+            <Iconify icon="solar:widget-bold-duotone" width={28} />
+          </Avatar>
+
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography variant="h5" fontWeight={600}>
+              {appName.toUpperCase()}
+            </Typography>
+
+            {description && (
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={{ mt: 0.5, maxWidth: 520 }}
+              >
+                {description}
+              </Typography>
+            )}
+
+            <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+              <Chip size="small" label={`v${version}`} />
+            </Stack>
+          </Box>
+        </Stack>
+
+        <Box
+          sx={{
+            my: 2,
+            borderBottom: "1px dashed",
+            borderColor: "divider",
+          }}
+        />
+
+        <Stack spacing={1.2}>
+          <InfoRow label="Version" value={version} />
+          <InfoRow label="Deployment" value="On-Premise" />
+          <InfoRow
+            label="Support"
+            value="support@greycollar.ai"
+            link="mailto:support@greycollar.ai"
+          />
+          <InfoRow
+            label="Documentation"
+            value="greycollar.ai/docs"
+            link="https://greycollar.ai/docs"
+          />
+        </Stack>
+
+        <Box
+          sx={{
+            mt: 3,
+            pt: 2,
+            borderTop: "1px dashed",
+            borderColor: "divider",
+            textAlign: "center",
+          }}
+        >
+          <Typography variant="caption" color="text.secondary">
+            © 2026 greycollar.ai. All rights reserved.
+          </Typography>
+        </Box>
+      </Box>
+    </Stack>
+  );
+};
+
+const InfoRow = ({ label, value, link }) => {
+  return (
+    <Stack direction="row" spacing={1.5} alignItems="center">
+      <Typography variant="body2" color="text.secondary" sx={{ minWidth: 110 }}>
+        {label}
+      </Typography>
+
+      {link ? (
+        <Link href={link} target="_blank" rel="noreferrer" underline="hover">
+          {value}
+        </Link>
+      ) : (
+        <Typography variant="body2">{value}</Typography>
+      )}
+    </Stack>
+  );
+};
+
 export default SettingsDialog;