@canmingir/link 1.2.44 → 1.2.49

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.44",
+  "version": "1.2.49",
   "type": "module",
+  "bin": {
+    "link-server": "./server/server.ts"
+  },
   "exports": {
     ".": "./index.js",
     "./layouts": "./src/layouts/index.js",

package/server/server.ts

@@ -0,0 +1,131 @@
+#!/usr/bin/env bun
+
+import path from "path";
+
+const CORS_HEADERS: Record<string, string> = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+  "Access-Control-Allow-Headers": "*",
+};
+
+const TIMEOUT_MS = 120_000;
+
+function parseArgs(): Record<string, string> {
+  const args = process.argv.slice(2);
+  const result: Record<string, string> = {};
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i].startsWith("--") && args[i + 1] && !args[i + 1].startsWith("--")) {
+      result[args[i].slice(2)] = args[i + 1];
+      i++;
+    }
+  }
+
+  return result;
+}
+
+async function getDefaultDashboardDist(): Promise<string> {
+  try {
+    const configPath = path.join(process.cwd(), "config.js");
+    const { default: config } = await import(configPath);
+    const base = (config.base as string)?.replace(/^\//, "") ?? "dashboard";
+    return `./${base}/dist`;
+  } catch {
+    return "./dashboard/dist";
+  }
+}
+
+async function proxyRequest(
+  req: Request,
+  targetUrl: string,
+): Promise<Response> {
+  const headers = new Headers(req.headers);
+  headers.delete("host");
+
+  const hasBody = req.method !== "GET" && req.method !== "HEAD";
+
+  const response = await fetch(targetUrl, {
+    method: req.method,
+    headers,
+    body: hasBody ? req.body : undefined,
+    signal: AbortSignal.timeout(TIMEOUT_MS),
+    // @ts-ignore — Bun requires this for streaming request bodies
+    duplex: "half",
+  });
+
+  const responseHeaders = new Headers(response.headers);
+  for (const [key, value] of Object.entries(CORS_HEADERS)) {
+    responseHeaders.set(key, value);
+  }
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: responseHeaders,
+  });
+}
+
+async function serveStatic(
+  pathname: string,
+  dashboardDist: string,
+): Promise<Response> {
+  const subPath = pathname.replace(/^\/dashboard\/?/, "") || "index.html";
+  const file = Bun.file(path.join(dashboardDist, subPath));
+
+  if (await file.exists()) {
+    return new Response(file);
+  }
+
+  return new Response(Bun.file(path.join(dashboardDist, "index.html")));
+}
+
+const parsed = parseArgs();
+
+const PORT = Number(parsed["port"] ?? 3000);
+const API_TARGET = parsed["api"] ?? "http://localhost:4000";
+const DASHBOARD_DIST = path.resolve(
+  parsed["dist-location"] ?? await getDefaultDashboardDist()
+);
+
+const server = Bun.serve({
+  port: PORT,
+
+  async fetch(req) {
+    const url = new URL(req.url);
+
+    if (req.method === "OPTIONS") {
+      return new Response(null, { status: 204, headers: CORS_HEADERS });
+    }
+
+    if (url.pathname === "/") {
+      return Response.redirect("/dashboard", 301);
+    }
+
+    try {
+      if (url.pathname.startsWith("/api")) {
+        const newPath = url.pathname.replace(/^\/api/, "") || "/";
+        console.info(
+          `[Proxy] ${req.method} ${url.pathname} → ${API_TARGET}${newPath}`,
+        );
+        return await proxyRequest(req, `${API_TARGET}${newPath}${url.search}`);
+      }
+
+      return await serveStatic(url.pathname, DASHBOARD_DIST);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error("[Proxy Error]", {
+        path: url.pathname,
+        method: req.method,
+        message,
+      });
+      return new Response(`Proxy Error: ${message}`, {
+        status: 500,
+        headers: CORS_HEADERS,
+      });
+    }
+  },
+});
+
+console.log(
+  `Server running on port ${server.port} [static: ${DASHBOARD_DIST}]`,
+);

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/config/schemas.js

@@ -65,13 +65,13 @@ export const MenuConfigSchema = Joi.object({
                     path: Joi.string().required(),
                     icon: Joi.string().required(),
                     external: Joi.boolean().optional().default(false),
-                  })
+                  }),
                 )
                 .optional(),
-            })
+            }),
           )
           .required(),
-      })
+      }),
     )
     .optional()
     .default([]),
@@ -81,7 +81,7 @@ export const MenuConfigSchema = Joi.object({
         title: Joi.string().required(),
         icon: Joi.string().required(),
         path: Joi.string().required(),
-      })
+      }),
     )
     .optional()
     .default([]),
@@ -90,11 +90,12 @@ export const MenuConfigSchema = Joi.object({
       Joi.object({
         label: Joi.string().required(),
         linkTo: Joi.string().required(),
-      })
+      }),
     )
     .optional()
     .default([]),
   actionButtons: Joi.array().items(Joi.any()).optional().default([]),
+  topBar: Joi.any().optional(),
   fullScreenLayout: Joi.string()
     .valid("left", "right")
     .optional()
@@ -139,7 +140,7 @@ export const TemplateConfigSchema = Joi.object({
         Joi.object({
           label: Joi.string().required(),
           panel: Joi.any().required(),
-        })
+        }),
       )
       .optional()
       .default([]),

package/src/layouts/DashboardLayout/header.jsx

@@ -2,6 +2,7 @@ import { HEADER, NAV } from "../config-layout";
 
 import AccountPopover from "../common/account-popover";
 import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Iconify from "../../components/Iconify";
 import Logo from "../../components/logo";
@@ -23,6 +24,7 @@ export default function Header({ onOpenNav }) {
   const settings = useSettingsContext();
 
   const projectBar = config().template?.projectBar;
+  const TopBar = config().menu?.topBar;
 
   const isNavHorizontal = settings.themeLayout === "horizontal";
 
@@ -44,15 +46,21 @@ export default function Header({ onOpenNav }) {
         </IconButton>
       )}
       {projectBar && <ProjectBar />}
+      {TopBar && (
+        <Box sx={{ flexGrow: 1, mx: 2 }}>
+          <TopBar />
+        </Box>
+      )}
 
       <Stack
         direction="row"
         spacing={{ xs: 0.5, sm: 1 }}
         sx={{
-          flexGrow: 1,
+          ...(!TopBar && { flexGrow: 1 }),
           alignItems: "center",
-          justifyContent: "flex-end"
-        }}>
+          justifyContent: "flex-end",
+        }}
+      >
         <NotificationsPopover />
 
         <SettingsButton />
@@ -67,7 +75,7 @@ export default function Header({ onOpenNav }) {
       data-cy="dashboard-layout-header"
       sx={{
         height: HEADER.H_MOBILE,
-        zIndex: 0,
+        zIndex: theme.zIndex.appBar,
         ...bgBlur({
           color: theme.palette.background.default,
         }),

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/index.js

@@ -55,3 +55,4 @@ export {
   GlassCardContent,
   GlassCardActions,
 } from "./GlassCard/GlassCard";
+export { default as DevTool } from "./DevTool";

package/src/widgets/Login/CognitoLogin.jsx

@@ -1,9 +1,3 @@
-import config from "../../config/config";
-import { publish } from "@nucleoidai/react-event";
-import { storage } from "@nucleoidjs/webstorage";
-import { useNavigate } from "react-router-dom";
-import { useState } from "react";
-
 import {
   Box,
   Button,
@@ -20,9 +14,22 @@ import {
   Visibility,
   VisibilityOff,
 } from "@mui/icons-material";
-import { confirmSignup, getTokens, login, signup } from "./amplifyAuth";
+import {
+  confirmForgotPassword,
+  confirmSignup,
+  forgotPassword,
+  getTokens,
+  login,
+  signup,
+} from "./amplifyAuth";
 import { inputSx, primaryButtonSx } from "./styles";
 
+import config from "../../config/config";
+import { publish } from "@nucleoidai/react-event";
+import { storage } from "@nucleoidjs/webstorage";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+
 export default function CognitoLogin() {
   const [mode, setMode] = useState("login");
 
@@ -96,6 +103,42 @@ export default function CognitoLogin() {
     }
   };
 
+  const handleForgotPassword = async () => {
+    try {
+      await forgotPassword(email);
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: "Reset code sent! Check your email.",
+        severity: "success",
+      });
+      setMode("resetPassword");
+    } catch (e) {
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: e.message || "Failed to send reset code",
+        severity: "error",
+      });
+    }
+  };
+
+  const handleResetPassword = async () => {
+    try {
+      await confirmForgotPassword(email, code, password);
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: "Password reset successful! You can now sign in.",
+        severity: "success",
+      });
+      setMode("login");
+    } catch (e) {
+      publish("GLOBAL_MESSAGE_POSTED", {
+        status: true,
+        message: e.message || "Password reset failed",
+        severity: "error",
+      });
+    }
+  };
+
   const handleConfirm = async () => {
     try {
       await confirmSignup(email, code);
@@ -124,6 +167,14 @@ export default function CognitoLogin() {
       heading: "Verify your email",
       sub: "Enter the confirmation code sent to your inbox.",
     },
+    forgotPassword: {
+      heading: "Reset password",
+      sub: "Enter your email to receive a reset code.",
+    },
+    resetPassword: {
+      heading: "Set new password",
+      sub: "Enter the code from your email and your new password.",
+    },
   };
 
   const passwordAdornment = (
@@ -155,7 +206,7 @@ export default function CognitoLogin() {
             color: "primary.main",
           }}
         >
-          {mode === "confirm" ? (
+          {mode === "confirm" || mode === "resetPassword" ? (
             <MarkEmailReadOutlined sx={{ fontSize: 22 }} />
           ) : (
             <LockOutlined sx={{ fontSize: 22 }} />
@@ -181,11 +232,11 @@ export default function CognitoLogin() {
           slotProps={{ input: { disableUnderline: true } }}
         />
 
-        {mode !== "confirm" && (
+        {mode !== "confirm" && mode !== "forgotPassword" && (
           <TextField
             variant="filled"
             type={showPassword ? "text" : "password"}
-            label="Password"
+            label={mode === "resetPassword" ? "New Password" : "Password"}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             fullWidth
@@ -230,7 +281,7 @@ export default function CognitoLogin() {
           />
         )}
 
-        {mode === "confirm" && (
+        {(mode === "confirm" || mode === "resetPassword") && (
           <TextField
             variant="filled"
             label="Confirmation Code"
@@ -254,6 +305,17 @@ export default function CognitoLogin() {
           >
             Sign in &rarr;
           </Button>
+          <Button
+            onClick={() => setMode("forgotPassword")}
+            fullWidth
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
+          >
+            Forgot password?
+          </Button>
           <Button
             onClick={() => setMode("signup")}
             fullWidth
@@ -304,6 +366,56 @@ export default function CognitoLogin() {
           Verify &rarr;
         </Button>
       )}
+      {mode === "forgotPassword" && (
+        <Stack spacing={1.5}>
+          <Button
+            variant="contained"
+            onClick={handleForgotPassword}
+            size="large"
+            fullWidth
+            disableElevation
+            sx={primaryButtonSx}
+          >
+            Send reset code &rarr;
+          </Button>
+          <Button
+            onClick={() => setMode("login")}
+            fullWidth
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
+          >
+            &larr; Back to sign in
+          </Button>
+        </Stack>
+      )}
+      {mode === "resetPassword" && (
+        <Stack spacing={1.5}>
+          <Button
+            variant="contained"
+            onClick={handleResetPassword}
+            size="large"
+            fullWidth
+            disableElevation
+            sx={primaryButtonSx}
+          >
+            Reset password &rarr;
+          </Button>
+          <Button
+            onClick={() => setMode("login")}
+            fullWidth
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
+          >
+            &larr; Back to sign in
+          </Button>
+        </Stack>
+      )}
     </Stack>
   );
 }

package/src/widgets/Login/amplifyAuth.js

@@ -1,6 +1,8 @@
 import {
+  confirmResetPassword,
   confirmSignUp,
   fetchAuthSession,
+  resetPassword,
   signIn,
   signOut,
   signUp,
@@ -29,6 +31,18 @@ export async function confirmSignup(email, code) {
   });
 }
 
+export async function forgotPassword(email) {
+  return resetPassword({ username: email });
+}
+
+export async function confirmForgotPassword(email, code, newPassword) {
+  return confirmResetPassword({
+    username: email,
+    confirmationCode: code,
+    newPassword,
+  });
+}
+
 export async function logout() {
   await signOut();
 }

package/vite/vite.js

@@ -15,6 +15,7 @@ if (error) {
 
 async function vite() {
   const base = value.base;
+  const api = value.api;
 
   return {
     plugins: [
@@ -31,6 +32,17 @@ async function vite() {
         },
       }),
     ],
+    server: {
+      port: 3000,
+      proxy: {
+        "/api": {
+          target: api?.split("/api")?.[0],
+          rewrite: (path) => path.replace(/^\/api/, ""),
+          changeOrigin: true,
+          timeout: 120_000,
+        },
+      },
+    },
     base,
     optimizeDeps: {
       esbuildOptions: {
@@ -55,7 +67,7 @@ async function vite() {
           find: /^src(.+)/,
           replacement: path.join(
             process.cwd(),
-            "/node_modules/@nucleoidai/platform/minimal/src/$1"
+            "/node_modules/@nucleoidai/platform/minimal/src/$1",
           ),
         },
       ],