@carlonicora/nextjs-jsonapi 1.97.2 → 1.99.0

package/dist/{chunk-XYGK26YG.mjs → chunk-CDNVUON3.mjs}

@@ -6454,8 +6454,73 @@ import * as d3 from "d3";
 import { Loader2 as Loader22 } from "lucide-react";
 import { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef8 } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
+
+// src/hooks/computeLayeredLayout.ts
+import * as dagre from "dagre";
+var DEFAULT_RANKDIR = "LR";
+var DEFAULT_NODESEP = 50;
+var DEFAULT_RANKSEP = 120;
+var TITLE_PX_PER_CHAR_16 = 8;
+var NAME_PX_PER_CHAR_12 = 6.5;
+var NAME_PX_PER_CHAR_16_BOLD = 8;
+var SUBTITLE_PX_PER_CHAR_11 = 6;
+var LABEL_PADDING_PX = 16;
+function estimateLabelWidth(node) {
+  if (node.subtitle) {
+    const titleWidth = (node.name?.length ?? 0) * TITLE_PX_PER_CHAR_16;
+    const subtitleWidth = node.subtitle.length * SUBTITLE_PX_PER_CHAR_11;
+    return Math.max(titleWidth, subtitleWidth) + LABEL_PADDING_PX;
+  }
+  const perChar = node.bold ? NAME_PX_PER_CHAR_16_BOLD : NAME_PX_PER_CHAR_12;
+  return (node.name?.length ?? 0) * perChar + LABEL_PADDING_PX;
+}
+__name(estimateLabelWidth, "estimateLabelWidth");
+function linkEndpointId(end) {
+  return typeof end === "string" ? end : end.id;
+}
+__name(linkEndpointId, "linkEndpointId");
+function computeLayeredLayout(nodes, links, opts) {
+  if (nodes.length === 0) return /* @__PURE__ */ new Map();
+  const rankdir = opts.rankdir ?? DEFAULT_RANKDIR;
+  const nodesep = opts.nodesep ?? DEFAULT_NODESEP;
+  const ranksep = opts.ranksep ?? DEFAULT_RANKSEP;
+  const g = new dagre.graphlib.Graph({ directed: true });
+  g.setGraph({ rankdir, nodesep, ranksep, marginx: 20, marginy: 20 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const node of nodes) {
+    const width = Math.max(opts.minNodeWidth, estimateLabelWidth(node));
+    const height = opts.minNodeHeight;
+    g.setNode(node.id, { width, height });
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const link of links) {
+    const sourceId = linkEndpointId(link.source);
+    const targetId = linkEndpointId(link.target);
+    if (!g.hasNode(sourceId) || !g.hasNode(targetId)) continue;
+    const key = `${sourceId}->${targetId}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    g.setEdge(sourceId, targetId);
+  }
+  try {
+    dagre.layout(g);
+  } catch {
+    return null;
+  }
+  const positions = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const laid = g.node(node.id);
+    if (laid && Number.isFinite(laid.x) && Number.isFinite(laid.y)) {
+      positions.set(node.id, { x: laid.x, y: laid.y });
+    }
+  }
+  return positions;
+}
+__name(computeLayeredLayout, "computeLayeredLayout");
+
+// src/hooks/useCustomD3Graph.tsx
 import { jsx as jsx49 } from "react/jsx-runtime";
-function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNodeIds, containerKey) {
+function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, options, loadingNodeIds, containerKey) {
   const svgRef = useRef8(null);
   const zoomRef = useRef8(null);
   const zoomBehaviorRef = useRef8(null);
@@ -6543,6 +6608,9 @@ function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNode
   }, []);
   const getNodeColor = useCallback9(
     (node) => {
+      if (node.color) {
+        return node.washedOut ? washOutColor(node.color) : node.color;
+      }
       const baseColor = colorScale.get(node.instanceType) || "gray";
       if (node.washedOut) {
         return washOutColor(baseColor);
@@ -6568,6 +6636,12 @@ function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNode
     const height = container.clientHeight;
     svg.attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`);
     const graphGroup = svg.append("g").attr("class", "graph-content");
+    const nodeRadius = 40;
+    const directed = options?.directed === true;
+    if (directed) {
+      const defs = svg.append("defs");
+      defs.append("marker").attr("id", "narr8-arrow").attr("viewBox", "-10 -10 20 20").attr("markerWidth", 14).attr("markerHeight", 14).attr("markerUnits", "userSpaceOnUse").attr("orient", "auto").attr("refX", 0).attr("refY", 0).append("path").attr("d", "M-10,-10 L0,0 L-10,10 z").attr("fill", "#999");
+    }
     const zoom2 = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
       const transform = event.transform;
       graphGroup.attr("transform", transform.toString());
@@ -6575,119 +6649,190 @@ function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNode
     });
     zoomBehaviorRef.current = zoom2;
     svg.call(zoom2).on("wheel.zoom", null).on("dblclick.zoom", null);
-    const nodeRadius = 40;
-    const childDistanceFromRoot = Math.min(width, height) * 0.4;
-    const grandchildDistanceFromChild = nodeRadius * 10;
-    const centralNodeId = nodes[0].id;
-    const nodeHierarchy = /* @__PURE__ */ new Map();
-    nodeHierarchy.set(centralNodeId, {
-      depth: 0,
-      parent: null,
-      children: []
-    });
-    visibleLinks.forEach((link2) => {
-      const sourceId = typeof link2.source === "string" ? link2.source : link2.source.id;
-      const targetId = typeof link2.target === "string" ? link2.target : link2.target.id;
-      if (sourceId === centralNodeId) {
-        nodeHierarchy.set(targetId, { depth: 1, parent: centralNodeId, children: [] });
-        const rootNode = nodeHierarchy.get(centralNodeId);
-        if (rootNode) {
-          rootNode.children.push(targetId);
-        }
-      }
-    });
-    visibleLinks.forEach((link2) => {
-      const sourceId = typeof link2.source === "string" ? link2.source : link2.source.id;
-      const targetId = typeof link2.target === "string" ? link2.target : link2.target.id;
-      const sourceNode = nodeHierarchy.get(sourceId);
-      if (sourceNode && sourceNode.depth === 1 && !nodeHierarchy.has(targetId)) {
-        nodeHierarchy.set(targetId, { depth: 2, parent: sourceId, children: [] });
-        sourceNode.children.push(targetId);
-      }
-    });
-    const rootChildren = nodeHierarchy.get(centralNodeId)?.children || [];
-    const childAngleStep = 2 * Math.PI / Math.max(rootChildren.length, 1);
-    rootChildren.forEach((childId, index) => {
-      const childNode = nodeHierarchy.get(childId);
-      if (childNode) {
-        const angle = index * childAngleStep;
-        childNode.angle = angle;
-        childNode.x = width / 2 + childDistanceFromRoot * Math.cos(angle);
-        childNode.y = height / 2 + childDistanceFromRoot * Math.sin(angle);
+    const layoutMode = options?.layout ?? "radial";
+    let layeredPositionsApplied = false;
+    if (layoutMode === "layered") {
+      const layeredOpts = options?.layered ?? {};
+      const positions = computeLayeredLayout(visibleNodes, visibleLinks, {
+        rankdir: layeredOpts.rankdir ?? "LR",
+        nodesep: layeredOpts.nodesep,
+        ranksep: layeredOpts.ranksep,
+        minNodeWidth: nodeRadius * 2,
+        minNodeHeight: nodeRadius * 2
+      });
+      if (positions) {
+        visibleNodes.forEach((node2) => {
+          const saved = nodePositionsRef.current.get(node2.id);
+          if (saved) {
+            node2.fx = saved.x;
+            node2.fy = saved.y;
+            node2.x = saved.x;
+            node2.y = saved.y;
+            return;
+          }
+          const pos = positions.get(node2.id);
+          if (pos) {
+            node2.fx = pos.x;
+            node2.fy = pos.y;
+            node2.x = pos.x;
+            node2.y = pos.y;
+            nodePositionsRef.current.set(node2.id, { x: pos.x, y: pos.y });
+          }
+        });
+        const nodeById = /* @__PURE__ */ new Map();
+        visibleNodes.forEach((n) => nodeById.set(n.id, n));
+        visibleLinks.forEach((link2) => {
+          if (typeof link2.source === "string") {
+            const src = nodeById.get(link2.source);
+            if (src) link2.source = src;
+          }
+          if (typeof link2.target === "string") {
+            const tgt = nodeById.get(link2.target);
+            if (tgt) link2.target = tgt;
+          }
+        });
+        layeredPositionsApplied = true;
+      } else {
+        console.warn("[useCustomD3Graph] Layered layout failed; falling back to radial.");
       }
-    });
-    for (const [_nodeId, node2] of nodeHierarchy.entries()) {
-      if (node2.depth === 1 && node2.angle !== void 0 && node2.x !== void 0 && node2.y !== void 0) {
-        const childAngle = node2.angle;
-        const childX = node2.x;
-        const childY = node2.y;
-        const grandchildren = node2.children;
-        if (grandchildren.length === 0) continue;
-        const dirX = childX - width / 2;
-        const dirY = childY - height / 2;
-        const dirLength = Math.sqrt(dirX * dirX + dirY * dirY);
-        const normDirX = dirX / dirLength;
-        const normDirY = dirY / dirLength;
-        if (grandchildren.length === 1) {
-          const grandchildId = grandchildren[0];
-          const grandchildNode = nodeHierarchy.get(grandchildId);
-          if (grandchildNode) {
-            grandchildNode.x = childX + normDirX * grandchildDistanceFromChild;
-            grandchildNode.y = childY + normDirY * grandchildDistanceFromChild;
-            grandchildNode.angle = childAngle;
+    }
+    let simulation = null;
+    if (!layeredPositionsApplied) {
+      const childDistanceFromRoot = Math.min(width, height) * 0.4;
+      const grandchildDistanceFromChild = nodeRadius * 10;
+      const centralNodeId = nodes[0].id;
+      const nodeHierarchy = /* @__PURE__ */ new Map();
+      nodeHierarchy.set(centralNodeId, {
+        depth: 0,
+        parent: null,
+        children: []
+      });
+      visibleLinks.forEach((link2) => {
+        const sourceId = typeof link2.source === "string" ? link2.source : link2.source.id;
+        const targetId = typeof link2.target === "string" ? link2.target : link2.target.id;
+        if (sourceId === centralNodeId) {
+          nodeHierarchy.set(targetId, { depth: 1, parent: centralNodeId, children: [] });
+          const rootNode = nodeHierarchy.get(centralNodeId);
+          if (rootNode) {
+            rootNode.children.push(targetId);
           }
-        } else {
-          const numChildren = grandchildren.length;
-          const minArc = Math.PI / 3;
-          const maxArc = Math.PI;
-          const arcProgress = Math.min(1, (numChildren - 2) / 5);
-          const arcSpan = minArc + arcProgress * (maxArc - minArc);
-          const startAngle = childAngle - arcSpan / 2;
-          grandchildren.forEach((grandchildId, index) => {
+        }
+      });
+      visibleLinks.forEach((link2) => {
+        const sourceId = typeof link2.source === "string" ? link2.source : link2.source.id;
+        const targetId = typeof link2.target === "string" ? link2.target : link2.target.id;
+        const sourceNode = nodeHierarchy.get(sourceId);
+        if (sourceNode && sourceNode.depth === 1 && !nodeHierarchy.has(targetId)) {
+          nodeHierarchy.set(targetId, { depth: 2, parent: sourceId, children: [] });
+          sourceNode.children.push(targetId);
+        }
+      });
+      const rootChildren = nodeHierarchy.get(centralNodeId)?.children || [];
+      const childAngleStep = 2 * Math.PI / Math.max(rootChildren.length, 1);
+      rootChildren.forEach((childId, index) => {
+        const childNode = nodeHierarchy.get(childId);
+        if (childNode) {
+          const angle = index * childAngleStep;
+          childNode.angle = angle;
+          childNode.x = width / 2 + childDistanceFromRoot * Math.cos(angle);
+          childNode.y = height / 2 + childDistanceFromRoot * Math.sin(angle);
+        }
+      });
+      for (const [_nodeId, node2] of nodeHierarchy.entries()) {
+        if (node2.depth === 1 && node2.angle !== void 0 && node2.x !== void 0 && node2.y !== void 0) {
+          const childAngle = node2.angle;
+          const childX = node2.x;
+          const childY = node2.y;
+          const grandchildren = node2.children;
+          if (grandchildren.length === 0) continue;
+          const dirX = childX - width / 2;
+          const dirY = childY - height / 2;
+          const dirLength = Math.sqrt(dirX * dirX + dirY * dirY);
+          const normDirX = dirX / dirLength;
+          const normDirY = dirY / dirLength;
+          if (grandchildren.length === 1) {
+            const grandchildId = grandchildren[0];
             const grandchildNode = nodeHierarchy.get(grandchildId);
-            if (!grandchildNode) return;
-            const angleOffset = numChildren > 1 ? index / (numChildren - 1) * arcSpan : 0;
-            const angle = startAngle + angleOffset;
-            grandchildNode.x = childX + grandchildDistanceFromChild * Math.cos(angle);
-            grandchildNode.y = childY + grandchildDistanceFromChild * Math.sin(angle);
-            grandchildNode.angle = angle;
-          });
+            if (grandchildNode) {
+              grandchildNode.x = childX + normDirX * grandchildDistanceFromChild;
+              grandchildNode.y = childY + normDirY * grandchildDistanceFromChild;
+              grandchildNode.angle = childAngle;
+            }
+          } else {
+            const numChildren = grandchildren.length;
+            const minArc = Math.PI / 3;
+            const maxArc = Math.PI;
+            const arcProgress = Math.min(1, (numChildren - 2) / 5);
+            const arcSpan = minArc + arcProgress * (maxArc - minArc);
+            const startAngle = childAngle - arcSpan / 2;
+            grandchildren.forEach((grandchildId, index) => {
+              const grandchildNode = nodeHierarchy.get(grandchildId);
+              if (!grandchildNode) return;
+              const angleOffset = numChildren > 1 ? index / (numChildren - 1) * arcSpan : 0;
+              const angle = startAngle + angleOffset;
+              grandchildNode.x = childX + grandchildDistanceFromChild * Math.cos(angle);
+              grandchildNode.y = childY + grandchildDistanceFromChild * Math.sin(angle);
+              grandchildNode.angle = angle;
+            });
+          }
         }
       }
-    }
-    visibleNodes.forEach((node2) => {
-      const savedPosition = nodePositionsRef.current.get(node2.id);
-      if (savedPosition) {
-        node2.fx = savedPosition.x;
-        node2.fy = savedPosition.y;
-      } else {
-        const hierarchyNode = nodeHierarchy.get(node2.id);
-        if (hierarchyNode && hierarchyNode.x !== void 0 && hierarchyNode.y !== void 0) {
-          node2.fx = hierarchyNode.x;
-          node2.fy = hierarchyNode.y;
-          nodePositionsRef.current.set(node2.id, { x: hierarchyNode.x, y: hierarchyNode.y });
-        } else if (node2.id === centralNodeId) {
-          node2.fx = width / 2;
-          node2.fy = height / 2;
-          nodePositionsRef.current.set(node2.id, { x: width / 2, y: height / 2 });
+      visibleNodes.forEach((node2) => {
+        const savedPosition = nodePositionsRef.current.get(node2.id);
+        if (savedPosition) {
+          node2.fx = savedPosition.x;
+          node2.fy = savedPosition.y;
+        } else {
+          const hierarchyNode = nodeHierarchy.get(node2.id);
+          if (hierarchyNode && hierarchyNode.x !== void 0 && hierarchyNode.y !== void 0) {
+            node2.fx = hierarchyNode.x;
+            node2.fy = hierarchyNode.y;
+            nodePositionsRef.current.set(node2.id, { x: hierarchyNode.x, y: hierarchyNode.y });
+          } else if (node2.id === centralNodeId) {
+            node2.fx = width / 2;
+            node2.fy = height / 2;
+            nodePositionsRef.current.set(node2.id, { x: width / 2, y: height / 2 });
+          }
         }
+      });
+      simulation = d3.forceSimulation(visibleNodes).force(
+        "link",
+        d3.forceLink(visibleLinks).id((d) => d.id).distance(nodeRadius * 3).strength(0.1)
+      ).force("charge", d3.forceManyBody().strength(-500).distanceMax(300)).force("collision", d3.forceCollide().radius(nodeRadius * 1.2)).force("center", d3.forceCenter(width / 2, height / 2).strength(0.1));
+      simulation.stop();
+      for (let i = 0; i < 100; i++) {
+        simulation.tick();
       }
-    });
-    const simulation = d3.forceSimulation(visibleNodes).force(
-      "link",
-      d3.forceLink(visibleLinks).id((d) => d.id).distance(nodeRadius * 3).strength(0.1)
-    ).force("charge", d3.forceManyBody().strength(-500).distanceMax(300)).force("collision", d3.forceCollide().radius(nodeRadius * 1.2)).force("center", d3.forceCenter(width / 2, height / 2).strength(0.1));
-    simulation.stop();
-    for (let i = 0; i < 100; i++) {
-      simulation.tick();
-    }
-    visibleNodes.forEach((node2) => {
-      if (node2.fx === void 0) {
-        node2.fx = node2.x;
-        node2.fy = node2.y;
-      }
-    });
-    const link = graphGroup.append("g").attr("stroke", "#999").attr("stroke-opacity", 0.6).selectAll("line").data(visibleLinks).join("line").attr("x1", (d) => d.source.x || 0).attr("y1", (d) => d.source.y || 0).attr("x2", (d) => d.target.x || 0).attr("y2", (d) => d.target.y || 0).attr("stroke-width", 1.5);
+      visibleNodes.forEach((node2) => {
+        if (node2.fx === void 0) {
+          node2.fx = node2.x;
+          node2.fy = node2.y;
+        }
+      });
+    }
+    const linkX2 = /* @__PURE__ */ __name((sx, sy, tx, ty) => {
+      if (!directed) return tx;
+      const dx = tx - sx;
+      const dy = ty - sy;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      return tx - dx / dist * nodeRadius;
+    }, "linkX2");
+    const linkY2 = /* @__PURE__ */ __name((sx, sy, tx, ty) => {
+      if (!directed) return ty;
+      const dx = tx - sx;
+      const dy = ty - sy;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      return ty - dy / dist * nodeRadius;
+    }, "linkY2");
+    const link = graphGroup.append("g").attr("stroke", "#999").attr("stroke-opacity", 0.6).selectAll("line").data(visibleLinks).join("line").attr("x1", (d) => d.source.x || 0).attr("y1", (d) => d.source.y || 0).attr("x2", (d) => {
+      const s = d.source;
+      const t = d.target;
+      return linkX2(s.x || 0, s.y || 0, t.x || 0, t.y || 0);
+    }).attr("y2", (d) => {
+      const s = d.source;
+      const t = d.target;
+      return linkY2(s.x || 0, s.y || 0, t.x || 0, t.y || 0);
+    }).attr("stroke-width", 1.5).attr("marker-end", directed ? "url(#narr8-arrow)" : null);
     const node = graphGroup.append("g").selectAll("g").data(visibleNodes).join("g").attr("class", "node-group").attr("data-id", (d) => d.id).attr("cursor", "pointer").attr("transform", (d) => `translate(${d.x || 0}, ${d.y || 0})`).call(
       d3.drag().subject(function(d) {
         return d;
@@ -6707,11 +6852,21 @@ function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNode
           const source = l.source;
           return source.fy || source.y || 0;
         }).attr("x2", (l) => {
+          const source = l.source;
           const target = l.target;
-          return target.fx || target.x || 0;
+          const sx = source.fx || source.x || 0;
+          const sy = source.fy || source.y || 0;
+          const tx = target.fx || target.x || 0;
+          const ty = target.fy || target.y || 0;
+          return linkX2(sx, sy, tx, ty);
         }).attr("y2", (l) => {
+          const source = l.source;
           const target = l.target;
-          return target.fy || target.y || 0;
+          const sx = source.fx || source.x || 0;
+          const sy = source.fy || source.y || 0;
+          const tx = target.fx || target.x || 0;
+          const ty = target.fy || target.y || 0;
+          return linkY2(sx, sy, tx, ty);
         });
       }).on("end", function(event, d) {
         d.fx = event.x;
@@ -6732,7 +6887,7 @@ function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNode
       if (d.instanceType === "root") return;
       const currentNode = d3.select(this);
       currentNode.select("circle").transition().duration(250).ease(d3.easeExpOut).attr("r", nodeRadius).attr("filter", null);
-      const normalOffset = nodeRadius + 5;
+      const normalOffset = nodeRadius + 5 + (d.subtitle ? 16 : 0);
       currentNode.select("text").transition().duration(250).ease(d3.easeExpOut).attr("dy", -normalOffset).attr("transform", `translate(0, ${-normalOffset}) scale(1) translate(0, ${normalOffset})`);
     });
     node.append("circle").attr("r", nodeRadius).attr("fill", (d) => getNodeColor(d)).attr("stroke", "#fff").attr("stroke-width", 1.5).on("click", (event, d) => {
@@ -6784,14 +6939,33 @@ function useCustomD3Graph(nodes, links, onNodeClick, visibleNodeIds, loadingNode
         words.forEach((word, index) => {
           textElement.append("tspan").attr("x", 0).attr("dy", index === 0 ? `${startY}em` : `${lineHeight}em`).text(word);
         });
+      } else if (d.subtitle) {
+        const titleSize = 16;
+        const subtitleSize = 11;
+        const lineGap = titleSize;
+        textElement.attr("dy", -nodeRadius - 5 - lineGap).attr("fill", "currentColor");
+        textElement.append("tspan").attr("x", 0).attr("font-size", titleSize).attr("font-weight", 700).text(d.name);
+        textElement.append("tspan").attr("x", 0).attr("dy", lineGap).attr("font-size", subtitleSize).attr("fill-opacity", 0.7).text(d.subtitle);
       } else {
         textElement.attr("dy", -nodeRadius - 5).attr("fill", "currentColor").attr("font-size", d.bold ? 16 : 12).attr("font-weight", d.bold ? 700 : null).text(d.name);
       }
     });
     return () => {
-      simulation.stop();
+      simulation?.stop();
     };
-  }, [nodes, links, colorScale, visibleNodeIds, loadingNodeIds, onNodeClick]);
+  }, [
+    nodes,
+    links,
+    colorScale,
+    visibleNodeIds,
+    options?.directed,
+    options?.layout,
+    options?.layered?.rankdir,
+    options?.layered?.nodesep,
+    options?.layered?.ranksep,
+    loadingNodeIds,
+    onNodeClick
+  ]);
   const zoomIn = useCallback9(() => {
     if (!svgRef.current || !zoomBehaviorRef.current) return;
     const svg = d3.select(svgRef.current);
@@ -9226,7 +9400,7 @@ import { useRef as useRef15 } from "react";
 import dynamic from "next/dynamic";
 import React14 from "react";
 import { jsx as jsx73 } from "react/jsx-runtime";
-var BlockNoteEditor = dynamic(() => import("./BlockNoteEditor-LRJUTHTW.mjs"), {
+var BlockNoteEditor = dynamic(() => import("./BlockNoteEditor-IBV3KBQM.mjs"), {
   ssr: false
 });
 var BlockNoteEditorContainer = React14.memo(/* @__PURE__ */ __name(function EditorContainer(props) {
@@ -9325,14 +9499,17 @@ function FormDate({
   name,
   minDate,
   onChange,
-  isRequired = false
+  isRequired = false,
+  defaultMonth,
+  allowEmpty
 }) {
+  const t = useI18nTranslations();
   const locale = useI18nLocale();
   const dateFnsLocale = useI18nDateFnsLocale();
   const [open, setOpen] = useState21(false);
   const [displayMonth, setDisplayMonth] = useState21(() => {
     const currentValue = form.getValues(id);
-    return currentValue || /* @__PURE__ */ new Date();
+    return currentValue || defaultMonth || /* @__PURE__ */ new Date();
   });
   const dateFormatter = useMemo12(
     () => new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }),
@@ -9395,7 +9572,7 @@ function FormDate({
       ),
       /* @__PURE__ */ jsxs44(InputGroupAddon, { align: "inline-end", children: [
         /* @__PURE__ */ jsx75(PopoverTrigger, { render: /* @__PURE__ */ jsx75("div", {}), nativeButton: false, children: /* @__PURE__ */ jsx75(InputGroupButton, { variant: "ghost", size: "icon-xs", children: /* @__PURE__ */ jsx75(CalendarIcon3, { className: "h-4 w-4 opacity-50" }) }) }),
-        field.value && /* @__PURE__ */ jsx75(
+        field.value && allowEmpty !== false && /* @__PURE__ */ jsx75(
           InputGroupButton,
           {
             variant: "ghost",
@@ -9410,25 +9587,43 @@ function FormDate({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx75(PopoverContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsx75(
-      Calendar,
-      {
-        mode: "single",
-        captionLayout: "dropdown",
-        selected: field.value,
-        onSelect: (e) => {
-          handleCalendarSelect(e, field);
-          setOpen(false);
-        },
-        disabled: (date) => minDate && date < minDate ? true : false,
-        locale: dateFnsLocale,
-        weekStartsOn: 1,
-        month: displayMonth,
-        onMonthChange: setDisplayMonth,
-        startMonth: new Date(1900, 0),
-        endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11)
-      }
-    ) })
+    /* @__PURE__ */ jsxs44(PopoverContent, { className: "w-auto p-0", align: "end", children: [
+      /* @__PURE__ */ jsx75(
+        Calendar,
+        {
+          mode: "single",
+          captionLayout: "dropdown",
+          selected: field.value,
+          onSelect: (e) => {
+            handleCalendarSelect(e, field);
+            setOpen(false);
+          },
+          disabled: (date) => minDate && date < minDate ? true : false,
+          locale: dateFnsLocale,
+          weekStartsOn: 1,
+          month: displayMonth,
+          onMonthChange: setDisplayMonth,
+          startMonth: new Date(1900, 0),
+          endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11)
+        }
+      ),
+      allowEmpty !== false && /* @__PURE__ */ jsx75("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx75(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full",
+          disabled: !field.value,
+          onClick: () => {
+            field.onChange(void 0);
+            setInputValue("");
+            if (onChange) onChange(void 0);
+            setOpen(false);
+          },
+          children: t(`ui.buttons.clear`)
+        }
+      ) })
+    ] })
   ] }) }) });
 }
 __name(FormDate, "FormDate");
@@ -9443,12 +9638,17 @@ function FormDateTime({
   name,
   minDate,
   onChange,
-  allowEmpty
+  allowEmpty,
+  defaultMonth
 }) {
   const [open, setOpen] = useState22(false);
   const t = useI18nTranslations();
   const locale = useI18nLocale();
   const dateFnsLocale = useI18nDateFnsLocale();
+  const [displayMonth, setDisplayMonth] = useState22(() => {
+    const currentValue = form.getValues(id);
+    return currentValue || defaultMonth || /* @__PURE__ */ new Date();
+  });
   const dateTimeFormatter = useMemo13(
     () => new Intl.DateTimeFormat(locale, {
       year: "numeric",
@@ -9525,7 +9725,10 @@ function FormDateTime({
         Calendar,
         {
           mode: "single",
+          captionLayout: "dropdown",
           selected: field.value,
+          month: displayMonth,
+          onMonthChange: setDisplayMonth,
           onSelect: (date) => {
             if (date) {
               const newDate = new Date(date);
@@ -9536,13 +9739,17 @@ function FormDateTime({
                 newDate.setHours(selectedHours, selectedMinutes);
               }
               form.setValue(id, newDate);
+              setDisplayMonth(newDate);
               if (onChange) onChange(newDate);
               setSelectedHours(newDate.getHours());
               setSelectedMinutes(roundToNearestFiveMinutes(newDate.getMinutes()));
             }
           },
           disabled: (date) => minDate && date < minDate ? true : false,
-          locale: dateFnsLocale
+          locale: dateFnsLocale,
+          weekStartsOn: 1,
+          startMonth: new Date(1900, 0),
+          endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11)
         }
       ),
       /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-end justify-center space-x-4", children: [
@@ -9591,16 +9798,34 @@ function FormDateTime({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx76(
-        Button,
-        {
-          className: "mt-2",
-          onClick: () => {
-            setOpen(false);
-          },
-          children: t(`ui.buttons.select_date`)
-        }
-      )
+      /* @__PURE__ */ jsxs45("div", { className: "mt-2 flex flex-row gap-x-2", children: [
+        allowEmpty !== false && /* @__PURE__ */ jsx76(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            className: "flex-1",
+            disabled: !field.value,
+            onClick: () => {
+              if (onChange) onChange(void 0);
+              form.setValue(id, "");
+              setOpen(false);
+            },
+            children: t(`ui.buttons.clear`)
+          }
+        ),
+        /* @__PURE__ */ jsx76(
+          Button,
+          {
+            type: "button",
+            className: "flex-1",
+            onClick: () => {
+              setOpen(false);
+            },
+            children: t(`ui.buttons.select_date`)
+          }
+        )
+      ] })
     ] }) })
   ] }) }) }) });
 }
@@ -21589,6 +21814,7 @@ export {
   useDebounce2 as useDebounce,
   registerTableGenerator,
   useTableGenerator,
+  computeLayeredLayout,
   useCustomD3Graph,
   SocketContext,
   SocketProvider,
@@ -22088,4 +22314,4 @@ export {
   useOAuthClients,
   useOAuthClient
 };
-//# sourceMappingURL=chunk-XYGK26YG.mjs.map
+//# sourceMappingURL=chunk-CDNVUON3.mjs.map