@ankorar/nodex 0.0.1

package/src/components/mindMap/SaveStatusIndicator.tsx

@@ -0,0 +1,61 @@
+import { CheckCircle2, CircleAlert, LoaderCircle } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export type MindMapSaveStatus = "saved" | "unsaved" | "saving";
+
+interface SaveStatusIndicatorProps {
+  status: MindMapSaveStatus;
+  className?: string;
+  labels?: Partial<Record<MindMapSaveStatus, string>>;
+}
+
+const defaultLabels: Record<MindMapSaveStatus, string> = {
+  saved: "Salvo",
+  unsaved: "Não salvo",
+  saving: "Salvando...",
+};
+
+export function SaveStatusIndicator({
+  status,
+  className,
+  labels,
+}: SaveStatusIndicatorProps) {
+  const mergedLabels = {
+    ...defaultLabels,
+    ...labels,
+  };
+
+  if (status === "saving") {
+    return (
+      <span
+        aria-label={mergedLabels.saving}
+        title={mergedLabels.saving}
+        className={cn("inline-flex items-center justify-center", className)}
+      >
+        <LoaderCircle className="size-4 animate-spin text-sky-600" />
+      </span>
+    );
+  }
+
+  if (status === "unsaved") {
+    return (
+      <span
+        aria-label={mergedLabels.unsaved}
+        title={mergedLabels.unsaved}
+        className={cn("inline-flex items-center justify-center", className)}
+      >
+        <CircleAlert className="size-4 text-amber-600" />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      aria-label={mergedLabels.saved}
+      title={mergedLabels.saved}
+      className={cn("inline-flex items-center justify-center", className)}
+    >
+      <CheckCircle2 className="size-4 text-emerald-600" />
+    </span>
+  );
+}

package/src/components/mindMap/Segments.tsx

@@ -0,0 +1,270 @@
+import { useMemo } from "react";
+import type { MindMapNode } from "../../state/mindMap";
+import { cn } from "../../lib/utils";
+
+interface SegmentsProps {
+  nodes: MindMapNode[];
+  className?: string;
+}
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+export type SegmentLine = {
+  key: string;
+  start: Point;
+  end: Point;
+  controlStart: Point;
+  controlEnd: Point;
+  color: string;
+};
+
+const TOGGLE_EDGE_OUTSIDE_OFFSET = 6;
+
+export function getNodeWrapper(node: MindMapNode) {
+  const wrapperPadding = node.style.wrapperPadding;
+
+  return {
+    left: node.pos.x,
+    top: node.pos.y,
+    width: node.style.w + wrapperPadding * 2,
+    height: node.style.h + wrapperPadding * 2,
+  };
+}
+
+function getNodeCenter(node: MindMapNode): Point {
+  const wrapper = getNodeWrapper(node);
+
+  return {
+    x: wrapper.left + wrapper.width / 2,
+    y: wrapper.top + wrapper.height / 2,
+  };
+}
+
+function getNodeAnchor(node: MindMapNode, side: "left" | "right"): Point {
+  const wrapper = getNodeWrapper(node);
+
+  return {
+    x: side === "right" ? wrapper.left + wrapper.width : wrapper.left,
+    y: wrapper.top + wrapper.height / 2,
+  };
+}
+
+function findCentralNode(nodes: MindMapNode[]): MindMapNode | null {
+  let centralNode: MindMapNode | null = null;
+
+  const walk = (node: MindMapNode) => {
+    if (centralNode) {
+      return;
+    }
+
+    if (node.type === "central") {
+      centralNode = node;
+      return;
+    }
+
+    for (const child of node.childrens) {
+      walk(child);
+    }
+  };
+
+  for (const node of nodes) {
+    walk(node);
+  }
+
+  return centralNode;
+}
+
+function getBranchSide(
+  node: MindMapNode,
+  centralCenterX: number | null,
+): "left" | "right" | null {
+  if (centralCenterX === null || node.type === "central") {
+    return null;
+  }
+
+  return getNodeCenter(node).x < centralCenterX ? "left" : "right";
+}
+
+function getOutputAnchor(node: MindMapNode, side: "left" | "right"): Point {
+  if (node.type === "central") {
+    return {
+      x:
+        node.pos.x +
+        node.style.wrapperPadding +
+        (side === "right" ? node.style.w : 0),
+      y: node.pos.y + node.style.wrapperPadding + node.style.h / 2,
+    };
+  }
+
+  const wrapper = getNodeWrapper(node);
+  const hasChildren = node.childrens.length > 0;
+
+  if (!hasChildren) {
+    return getNodeAnchor(node, side);
+  }
+
+  return {
+    x:
+      side === "right"
+        ? wrapper.left + wrapper.width + TOGGLE_EDGE_OUTSIDE_OFFSET
+        : wrapper.left - TOGGLE_EDGE_OUTSIDE_OFFSET,
+    y: wrapper.top + wrapper.height / 2,
+  };
+}
+
+function getInputAnchor(node: MindMapNode, side: "left" | "right"): Point {
+  if (node.type === "central") {
+    return {
+      x:
+        node.pos.x +
+        node.style.wrapperPadding +
+        (side === "right" ? 0 : node.style.w),
+      y: node.pos.y + node.style.wrapperPadding + node.style.h / 2,
+    };
+  }
+
+  const wrapper = getNodeWrapper(node);
+
+  return {
+    x: side === "right" ? wrapper.left + 1 : wrapper.left + wrapper.width - 1,
+    y: wrapper.top + wrapper.height / 2 + 0.5,
+  };
+}
+
+function buildSegmentLine(
+  fromNode: MindMapNode,
+  toNode: MindMapNode,
+  centralCenterX: number | null,
+): SegmentLine | null {
+  const fromCenter = getNodeCenter(fromNode);
+  const toCenter = getNodeCenter(toNode);
+  const branchSide =
+    getBranchSide(toNode, centralCenterX) ??
+    (toCenter.x >= fromCenter.x ? "right" : "left");
+  const oppositeSide = branchSide === "right" ? "left" : "right";
+
+  const start = getOutputAnchor(fromNode, branchSide);
+  const end = getInputAnchor(toNode, branchSide);
+
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const length = Math.hypot(dx, dy);
+
+  if (length === 0) {
+    return null;
+  }
+
+  const horizontalDistance = Math.abs(dx);
+  const verticalDistance = Math.abs(dy);
+  const direction = dx >= 0 ? 1 : -1;
+  const baseHandle = Math.min(120, Math.max(32, horizontalDistance * 0.45));
+  const verticalAdjustment = Math.min(28, verticalDistance * 0.2);
+  const handleSize = baseHandle + verticalAdjustment;
+
+  const controlStart = {
+    x: start.x + direction * handleSize,
+    y: start.y,
+  };
+  const controlEnd = {
+    x: end.x + (oppositeSide === "right" ? handleSize : -handleSize),
+    y: end.y,
+  };
+
+  return {
+    key: `${fromNode.id}-${toNode.id}`,
+    start,
+    end,
+    controlStart,
+    controlEnd,
+    color: toNode.style.color ?? fromNode.style.color ?? "#94a3b8",
+  };
+}
+
+function collectVisibleEdges(
+  parent: MindMapNode,
+  edges: Array<{ from: MindMapNode; to: MindMapNode }>,
+) {
+  if (!parent.isVisible) {
+    return;
+  }
+
+  for (const child of parent.childrens) {
+    if (!child.isVisible) {
+      continue;
+    }
+
+    edges.push({ from: parent, to: child });
+    collectVisibleEdges(child, edges);
+  }
+}
+
+export function getSegmentLines(nodes: MindMapNode[]): SegmentLine[] {
+  const edges: Array<{ from: MindMapNode; to: MindMapNode }> = [];
+  const centralNode = findCentralNode(nodes);
+  const centralCenterX = centralNode ? getNodeCenter(centralNode).x : null;
+
+  for (const node of nodes) {
+    collectVisibleEdges(node, edges);
+  }
+
+  return edges
+    .map(({ from, to }) => buildSegmentLine(from, to, centralCenterX))
+    .filter((segment): segment is SegmentLine => Boolean(segment));
+}
+
+export function getNodesBounds(nodes: MindMapNode[]): {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+} | null {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let hasVisible = false;
+
+  const walk = (node: MindMapNode) => {
+    if (!node.isVisible) return;
+    hasVisible = true;
+    const w = getNodeWrapper(node);
+    minX = Math.min(minX, w.left);
+    minY = Math.min(minY, w.top);
+    maxX = Math.max(maxX, w.left + w.width);
+    maxY = Math.max(maxY, w.top + w.height);
+    node.childrens.forEach(walk);
+  };
+  nodes.forEach(walk);
+
+  if (!hasVisible) return null;
+  return { minX, minY, maxX, maxY };
+}
+
+export function Segments({ nodes, className }: SegmentsProps) {
+  const segmentLines = useMemo(() => getSegmentLines(nodes), [nodes]);
+
+  return (
+    <svg
+      className={cn(
+        "absolute left-0 top-0 h-full w-full pointer-events-none overflow-visible",
+        className,
+      )}
+      aria-hidden="true"
+      style={{ overflow: "visible" }}
+    >
+      {segmentLines.map((segment) => (
+        <path
+          key={segment.key}
+          d={`M ${segment.start.x} ${segment.start.y} C ${segment.controlStart.x} ${segment.controlStart.y}, ${segment.controlEnd.x} ${segment.controlEnd.y}, ${segment.end.x} ${segment.end.y}`}
+          fill="none"
+          stroke={segment.color}
+          strokeWidth="6"
+          strokeLinecap="round"
+        />
+      ))}
+    </svg>
+  );
+}

package/src/components/mindMap/ZenCard.tsx

@@ -0,0 +1,41 @@
+import type { CSSProperties } from "react";
+import { useMindMapState } from "../../state/mindMap";
+import { useShallow } from "zustand/react/shallow";
+import { cn } from "../../lib/utils";
+
+export interface ZenCardProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Class for the subtitle line (e.g. "Alt+Z to exit") */
+  subtitleClassName?: string;
+}
+
+export function ZenCard({
+  className,
+  style,
+  subtitleClassName,
+}: ZenCardProps = {}) {
+  const { zenMode } = useMindMapState(
+    useShallow((state) => ({ zenMode: state.zenMode })),
+  );
+  return (
+    <div
+      data-zen={zenMode}
+      className={cn(
+        "pointer-events-none absolute bottom-4 right-4 rounded-md border border-slate-200 bg-white/40 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-500 shadow-sm backdrop-blur transition-all duration-200 data-[zen=true]:opacity-100 data-[zen=true]:translate-y-0 opacity-0 translate-y-2",
+        className,
+      )}
+      style={style}
+    >
+      <div>Zen mode</div>
+      <div
+        className={cn(
+          "text-[9px] font-medium normal-case tracking-normal text-slate-400",
+          subtitleClassName,
+        )}
+      >
+        Alt+Z to exit
+      </div>
+    </div>
+  );
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }