@lv-x-software-house/x_view 1.3.5 → 1.3.7

package/dist/index.js

@@ -836,6 +836,55 @@ var removeLinkFromScene = (state, linkObject) => {
     else linkObject.material.dispose();
   }
 };
+var removeAllTimelineElements = (state) => {
+  if (!state) return;
+  const { timelineIntervalsGroup, nodeObjects } = state;
+  if (timelineIntervalsGroup) {
+    while (timelineIntervalsGroup.children.length > 0) {
+      const obj = timelineIntervalsGroup.children[0];
+      timelineIntervalsGroup.remove(obj);
+      if (obj.traverse) {
+        obj.traverse((child) => {
+          if (child.geometry) child.geometry.dispose();
+          if (child.material) {
+            if (child.material.map) child.material.map.dispose();
+            child.material.dispose();
+          }
+        });
+      } else {
+        if (obj.geometry) obj.geometry.dispose();
+        if (obj.material) {
+          if (obj.material.map) obj.material.map.dispose();
+          obj.material.dispose();
+        }
+      }
+    }
+  }
+  if (nodeObjects) {
+    Object.values(nodeObjects).forEach((mesh) => {
+      var _a, _b, _c, _d;
+      if (!mesh) return;
+      const oldTimelineLabel = mesh.getObjectByName("timelineLabel");
+      if (oldTimelineLabel) {
+        mesh.remove(oldTimelineLabel);
+        if ((_a = oldTimelineLabel.material) == null ? void 0 : _a.map) {
+          oldTimelineLabel.material.map.dispose();
+        }
+        (_b = oldTimelineLabel.material) == null ? void 0 : _b.dispose();
+      }
+      const oldQuestDateLabel = mesh.getObjectByName("questDateLabel");
+      if (oldQuestDateLabel) {
+        mesh.remove(oldQuestDateLabel);
+        if ((_c = oldQuestDateLabel.material) == null ? void 0 : _c.map) {
+          oldQuestDateLabel.material.map.dispose();
+        }
+        (_d = oldQuestDateLabel.material) == null ? void 0 : _d.dispose();
+      }
+      delete mesh.userData.timelineIntervalBar;
+      delete mesh.userData.timelineEndLabel;
+    });
+  }
+};
 var removeNodeFromScene = (state, nodeId) => {
   const {
     graphGroup,
@@ -864,8 +913,15 @@ var removeNodeFromScene = (state, nodeId) => {
     const { timelineIntervalBar, timelineEndLabel } = nodeToRemove.userData;
     if (timelineIntervalBar) {
       timelineIntervalsGroup.remove(timelineIntervalBar);
-      if (timelineIntervalBar.geometry) timelineIntervalBar.geometry.dispose();
-      if (timelineIntervalBar.material) timelineIntervalBar.material.dispose();
+      if (timelineIntervalBar.traverse) {
+        timelineIntervalBar.traverse((child) => {
+          if (child.geometry) child.geometry.dispose();
+          if (child.material) child.material.dispose();
+        });
+      } else {
+        if (timelineIntervalBar.geometry) timelineIntervalBar.geometry.dispose();
+        if (timelineIntervalBar.material) timelineIntervalBar.material.dispose();
+      }
     }
     if (timelineEndLabel) {
       timelineIntervalsGroup.remove(timelineEndLabel);
@@ -2177,6 +2233,7 @@ var userActionHandlers = {
     if (!nodeData || !sceneDataRef.current) return;
     const nodeIdToDismiss = nodeData.id;
     const strNodeId = String(nodeIdToDismiss);
+    removeAllTimelineElements(stateRef.current);
     const { ancestryGroup, ancestryLinks } = stateRef.current;
     if (ancestryGroup && ancestryLinks) {
       const remainingAncestryLinks = [];
@@ -2208,6 +2265,7 @@ var userActionHandlers = {
       (id) => id !== strNodeIdToKeep
     );
     if (nodeIdsToDismiss.length === 0) return;
+    removeAllTimelineElements(stateRef.current);
     const { ancestryGroup, ancestryLinks } = stateRef.current;
     if (ancestryGroup && ancestryLinks) {
       ancestryLinks.forEach((link) => {
@@ -2230,6 +2288,7 @@ var userActionHandlers = {
     setters.setMultiContextMenu({ visible: false });
     if (!nodeIds || nodeIds.size === 0 || !sceneDataRef.current) return;
     const strNodeIds = Array.from(nodeIds).map(String);
+    removeAllTimelineElements(stateRef.current);
     const { ancestryGroup, ancestryLinks } = stateRef.current;
     if (ancestryGroup && ancestryLinks) {
       const remainingAncestryLinks = [];
@@ -2269,6 +2328,7 @@ var userActionHandlers = {
       stateRef.current.selectedNodes.clear();
       return;
     }
+    removeAllTimelineElements(stateRef.current);
     const { ancestryGroup, ancestryLinks } = stateRef.current;
     if (ancestryGroup && ancestryLinks) {
       const remainingAncestryLinks = [];
@@ -4749,6 +4809,11 @@ function calculateNextRecurrenceDate(config) {
     confirmed: true
   };
 }
+var createSafeDate = (year, month = 0, day = 1) => {
+  const d = /* @__PURE__ */ new Date();
+  d.setFullYear(year, month, day);
+  return d;
+};
 var parseDate = (str) => {
   if (!str) return null;
   const parts = str.split("/");
@@ -4757,7 +4822,7 @@ var parseDate = (str) => {
     const month = parseInt(parts[1], 10) - 1;
     const year = parseInt(parts[2], 10);
     if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
-      return new Date(year, month, day);
+      return createSafeDate(year, month, day);
     }
   }
   return null;
@@ -4812,7 +4877,7 @@ var parseDateProp = (dateProp) => {
   } else if (dateProp.year) {
     const y = parseInt(dateProp.year, 10);
     if (!isNaN(y)) {
-      const d = new Date(y, 0, 1);
+      const d = createSafeDate(y, 0, 1);
       info = {
         startDate: d,
         endDate: d,
@@ -4825,8 +4890,8 @@ var parseDateProp = (dateProp) => {
     const sY = parseInt(dateProp.date_interval.start, 10);
     const eY = parseInt(dateProp.date_interval.end, 10) || sY;
     if (!isNaN(sY)) {
-      const sd = new Date(sY, 0, 1);
-      const ed = new Date(eY, 11, 31);
+      const sd = createSafeDate(sY, 0, 1);
+      const ed = createSafeDate(eY, 11, 31);
       info = {
         startDate: sd,
         endDate: ed,
@@ -6713,7 +6778,9 @@ function CustomPropertyDisplay({
     if (!file || targetIndex === null || !onUploadFile) return;
     const MAX_SIZE = 10 * 1024 * 1024;
     if (file.size > MAX_SIZE) {
-      alert("O arquivo \xE9 muito grande. O limite m\xE1ximo de tamanho permitido \xE9 de 10MB.");
+      alert(
+        "Upload de imagens acima de 10MB n\xE3o est\xE1 dispon\xEDvel neste momento. Recomendamos armazen\xE1-la em um servi\xE7o de personal cloud storage e guardar apenas o link no x.plore."
+      );
       return;
     }
     try {
@@ -6807,7 +6874,9 @@ function CustomPropertyDisplay({
   const baseInput = "w-full bg-slate-800/70 p-2 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-400/60 transition-all duration-150";
   const renderEditView = () => {
     var _a;
-    const isKeyFixed = ["links", "images", "date", "documents"].includes(tempProp.type);
+    const isKeyFixed = ["links", "images", "date", "documents"].includes(
+      tempProp.type
+    );
     const availableOptions = [
       { value: "links", label: "Links", unique: true },
       { value: "images", label: "Images", unique: true },
@@ -6816,7 +6885,9 @@ function CustomPropertyDisplay({
       { value: "text", label: "Texto", unique: false },
       { value: "number", label: "N\xFAmero", unique: false },
       { value: "list", label: "Lista", unique: false }
-    ].filter((opt) => !opt.unique || !unavailableTypes.includes(opt.value) || tempProp.type === opt.value);
+    ].filter(
+      (opt) => !opt.unique || !unavailableTypes.includes(opt.value) || tempProp.type === opt.value
+    );
     const currentTypeLabel = ((_a = availableOptions.find((o) => o.value === tempProp.type)) == null ? void 0 : _a.label) || tempProp.type;
     return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full space-y-2" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react4.default.createElement(
       "input",
@@ -6836,7 +6907,12 @@ function CustomPropertyDisplay({
         className: "w-full flex items-center justify-between gap-2 bg-slate-800/70 p-2 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-1 focus:ring-indigo-400/60 hover:bg-slate-700/70 transition-colors"
       },
       /* @__PURE__ */ import_react4.default.createElement("span", { className: "truncate" }, currentTypeLabel),
-      /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiChevronDown, { className: `text-slate-400 transition-transform ${isTypeDropdownOpen ? "rotate-180" : ""}` })
+      /* @__PURE__ */ import_react4.default.createElement(
+        import_fi3.FiChevronDown,
+        {
+          className: `text-slate-400 transition-transform ${isTypeDropdownOpen ? "rotate-180" : ""}`
+        }
+      )
     ), isTypeDropdownOpen && /* @__PURE__ */ import_react4.default.createElement("ul", { className: "absolute right-0 top-full mt-1 z-50 w-32 bg-slate-800 border border-white/10 rounded-lg shadow-xl overflow-y-auto max-h-48 custom-scrollbar py-1" }, availableOptions.map((opt) => /* @__PURE__ */ import_react4.default.createElement("li", { key: opt.value }, /* @__PURE__ */ import_react4.default.createElement(
       "button",
       {
@@ -6849,7 +6925,16 @@ function CustomPropertyDisplay({
       var _a2, _b, _c, _d, _e;
       switch (tempProp.type) {
         case "number":
-          return /* @__PURE__ */ import_react4.default.createElement("input", { type: "number", placeholder: "Valor num\xE9rico", value: tempProp.value, onChange: (e) => handlePropChange("value", e.target.value), className: baseInput });
+          return /* @__PURE__ */ import_react4.default.createElement(
+            "input",
+            {
+              type: "number",
+              placeholder: "Valor num\xE9rico",
+              value: tempProp.value,
+              onChange: (e) => handlePropChange("value", e.target.value),
+              className: baseInput
+            }
+          );
         case "date": {
           const dateType = ((_a2 = tempProp.value) == null ? void 0 : _a2.type) || "Data";
           const noSpinnerClass = "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
@@ -6866,15 +6951,20 @@ function CustomPropertyDisplay({
             handlePropChange("value", newValue);
           };
           const handleDateValueChange = (dateField, dateValue) => {
-            handlePropChange("value", { ...tempProp.value, [dateField]: dateValue });
+            handlePropChange("value", {
+              ...tempProp.value,
+              [dateField]: dateValue
+            });
           };
           const handleFullDateChange = (e) => {
             const rawValue = e.target.value;
             const digits = rawValue.replace(/\D/g, "");
             const len = digits.length;
             let formattedValue = digits;
-            if (len > 2 && len <= 4) formattedValue = `${digits.slice(0, 2)}/${digits.slice(2)}`;
-            else if (len > 4) formattedValue = `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+            if (len > 2 && len <= 4)
+              formattedValue = `${digits.slice(0, 2)}/${digits.slice(2)}`;
+            else if (len > 4)
+              formattedValue = `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
             handleDateValueChange("value", formattedValue);
           };
           return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-2 p-2 bg-slate-900/60 rounded-lg border border-white/10" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center justify-center gap-1 rounded-lg bg-slate-800/50 p-1" }, ["Data", "Ano", "Date Interval"].map((t) => /* @__PURE__ */ import_react4.default.createElement(
@@ -6886,7 +6976,17 @@ function CustomPropertyDisplay({
               className: `flex-1 text-xs px-2 py-1.5 rounded-md transition-colors ${dateType === t ? "bg-indigo-600 text-white font-semibold shadow" : "hover:bg-slate-700/50"}`
             },
             t === "Date Interval" ? "Intervalo" : t
-          ))), dateType === "Data" && /* @__PURE__ */ import_react4.default.createElement("input", { type: "text", placeholder: "DD/MM/AAAA", value: ((_b = tempProp.value) == null ? void 0 : _b.value) || "", onChange: handleFullDateChange, maxLength: "10", className: baseInput }), dateType === "Ano" && /* @__PURE__ */ import_react4.default.createElement(
+          ))), dateType === "Data" && /* @__PURE__ */ import_react4.default.createElement(
+            "input",
+            {
+              type: "text",
+              placeholder: "DD/MM/AAAA",
+              value: ((_b = tempProp.value) == null ? void 0 : _b.value) || "",
+              onChange: handleFullDateChange,
+              maxLength: "10",
+              className: baseInput
+            }
+          ), dateType === "Ano" && /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "number",
@@ -6934,7 +7034,11 @@ function CustomPropertyDisplay({
               type: "text",
               placeholder: tempProp.type === "images" || tempProp.type === "documents" ? "ID" : "Nome",
               value: item.name,
-              onChange: (e) => handleListItemChange(itemIndex, "name", e.target.value),
+              onChange: (e) => handleListItemChange(
+                itemIndex,
+                "name",
+                e.target.value
+              ),
               className: "min-w-0 flex-1 bg-slate-800/70 p-2 text-xs rounded-md border border-white/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-400/60"
             }
           ), /* @__PURE__ */ import_react4.default.createElement(
@@ -6943,7 +7047,11 @@ function CustomPropertyDisplay({
               type: "text",
               placeholder: tempProp.type === "images" ? "URL da Imagem" : tempProp.type === "documents" ? "URL do Documento" : "Valor",
               value: item.value,
-              onChange: (e) => handleListItemChange(itemIndex, "value", e.target.value),
+              onChange: (e) => handleListItemChange(
+                itemIndex,
+                "value",
+                e.target.value
+              ),
               className: "min-w-0 flex-1 bg-slate-800/70 p-2 text-xs rounded-md border border-white/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-400/60"
             }
           ), (tempProp.type === "images" || tempProp.type === "documents") && /* @__PURE__ */ import_react4.default.createElement(
@@ -6956,11 +7064,53 @@ function CustomPropertyDisplay({
               title: "Upload de Arquivo"
             },
             uploadingItemIndex === itemIndex ? /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiLoader, { className: "animate-spin" }) : /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiUpload, { size: 12 })
-          ), /* @__PURE__ */ import_react4.default.createElement("button", { type: "button", onClick: () => handleRemoveListItem(itemIndex), className: "flex-shrink-0 w-7 h-7 grid place-items-center bg-red-600/60 hover:bg-red-600 rounded-full text-xs font-bold transition-colors", "aria-label": "Remover item" }, "\xD7"))), /* @__PURE__ */ import_react4.default.createElement("button", { type: "button", onClick: () => handleAddListItem(), className: "mt-1 w-full px-2 py-1.5 bg-slate-700/70 hover:bg-slate-600 rounded-md transition-colors text-xs" }, "Adicionar Item"));
+          ), /* @__PURE__ */ import_react4.default.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRemoveListItem(itemIndex),
+              className: "flex-shrink-0 w-7 h-7 grid place-items-center bg-red-600/60 hover:bg-red-600 rounded-full text-xs font-bold transition-colors",
+              "aria-label": "Remover item"
+            },
+            "\xD7"
+          ))), /* @__PURE__ */ import_react4.default.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleAddListItem(),
+              className: "mt-1 w-full px-2 py-1.5 bg-slate-700/70 hover:bg-slate-600 rounded-md transition-colors text-xs"
+            },
+            "Adicionar Item"
+          ));
         default:
-          return /* @__PURE__ */ import_react4.default.createElement("input", { type: "text", placeholder: "Valor", value: tempProp.value, onChange: (e) => handlePropChange("value", e.target.value), className: baseInput });
+          return /* @__PURE__ */ import_react4.default.createElement(
+            "input",
+            {
+              type: "text",
+              placeholder: "Valor",
+              value: tempProp.value,
+              onChange: (e) => handlePropChange("value", e.target.value),
+              className: baseInput
+            }
+          );
       }
-    })()), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-end items-center gap-2 pt-1" }, /* @__PURE__ */ import_react4.default.createElement("button", { onClick: handleCancel, type: "button", className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiX, { className: "text-red-400" })), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: handleSave, type: "button", className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiCheck, { className: "text-green-400" }))));
+    })()), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-end items-center gap-2 pt-1" }, /* @__PURE__ */ import_react4.default.createElement(
+      "button",
+      {
+        onClick: handleCancel,
+        type: "button",
+        className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiX, { className: "text-red-400" })
+    ), /* @__PURE__ */ import_react4.default.createElement(
+      "button",
+      {
+        onClick: handleSave,
+        type: "button",
+        className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiCheck, { className: "text-green-400" })
+    )));
   };
   const renderDisplayView = () => /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full space-y-2 text-sm" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ import_react4.default.createElement("p", { className: "font-semibold text-slate-200" }, prop.key), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs capitalize bg-slate-700/50 px-2 py-0.5 rounded text-slate-400" }, prop.type)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-slate-300 pl-1" }, (() => {
     switch (prop.type) {
@@ -6988,7 +7138,10 @@ function CustomPropertyDisplay({
                 if (isTextureMode) {
                   onSelectTexture(item.value);
                 } else {
-                  onOpenImageViewer == null ? void 0 : onOpenImageViewer(prop.value.map((img) => ({ ...img })), index);
+                  onOpenImageViewer == null ? void 0 : onOpenImageViewer(
+                    prop.value.map((img) => ({ ...img })),
+                    index
+                  );
                 }
               },
               className: `w-16 h-16 rounded-md bg-cover bg-center bg-slate-700 outline-none transition-all shadow-md ${isSelected ? "ring-4 ring-green-500 scale-105 z-10" : isTextureMode ? "hover:ring-4 hover:ring-indigo-400/50 cursor-pointer" : "hover:ring-2 hover:ring-indigo-400 cursor-zoom-in"}`,
@@ -6998,7 +7151,17 @@ function CustomPropertyDisplay({
           ), isSelected && /* @__PURE__ */ import_react4.default.createElement("div", { className: "absolute -top-2 -right-2 bg-green-500 text-white rounded-full p-0.5 shadow-sm" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiCheck, { size: 12 })));
         }));
       case "links":
-        return /* @__PURE__ */ import_react4.default.createElement("ul", { className: "space-y-1.5 max-h-40 overflow-y-auto custom-scrollbar" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ import_react4.default.createElement("li", { key: item.id }, /* @__PURE__ */ import_react4.default.createElement("a", { href: item.value, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 hover:underline transition-colors" }, item.name, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiExternalLink, { className: "opacity-60", size: 12 })))));
+        return /* @__PURE__ */ import_react4.default.createElement("ul", { className: "space-y-1.5 max-h-40 overflow-y-auto custom-scrollbar" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ import_react4.default.createElement("li", { key: item.id }, /* @__PURE__ */ import_react4.default.createElement(
+          "a",
+          {
+            href: item.value,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 hover:underline transition-colors"
+          },
+          item.name,
+          /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiExternalLink, { className: "opacity-60", size: 12 })
+        ))));
       case "documents":
         return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-2 mt-1" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ import_react4.default.createElement(
           "a",
@@ -7026,7 +7189,30 @@ function CustomPropertyDisplay({
       onMouseLeave: () => setIsHovered(false)
     },
     isEditing ? renderEditView() : renderDisplayView(),
-    !isEditing && !readOnly && /* @__PURE__ */ import_react4.default.createElement("div", { className: `absolute top-2 right-2 flex items-center gap-1 transition-opacity ${isHovered ? "opacity-100" : "opacity-0"}` }, /* @__PURE__ */ import_react4.default.createElement("button", { onClick: () => setIsEditing(true), className: "w-7 h-7 grid place-items-center rounded-lg bg-slate-700/80 hover:bg-slate-600/80 text-slate-200 transition-colors", title: "Editar" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiEdit3, { size: 14 })), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: onRemove, className: "w-7 h-7 grid place-items-center rounded-lg bg-red-700/80 hover:bg-red-600/80 text-slate-200 transition-colors", title: "Remover" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiTrash2, { size: 14 })))
+    !isEditing && !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        className: `absolute top-2 right-2 flex items-center gap-1 transition-opacity ${isHovered ? "opacity-100" : "opacity-0"}`
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          onClick: () => setIsEditing(true),
+          className: "w-7 h-7 grid place-items-center rounded-lg bg-slate-700/80 hover:bg-slate-600/80 text-slate-200 transition-colors",
+          title: "Editar"
+        },
+        /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiEdit3, { size: 14 })
+      ),
+      /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          onClick: onRemove,
+          className: "w-7 h-7 grid place-items-center rounded-lg bg-red-700/80 hover:bg-red-600/80 text-slate-200 transition-colors",
+          title: "Remover"
+        },
+        /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiTrash2, { size: 14 })
+      )
+    )
   );
 }
 
@@ -19355,7 +19541,62 @@ var TIMELINE_LAYER_SPACING_Y = 25;
 var TIMELINE_NODE_SPACING_X = 20;
 var TIMELINE_INTERVAL_BAR_RADIUS = 0.2;
 var TIMELINE_INTERVAL_BAR_OPACITY = 0.85;
-var TIMELINE_GOLD_COLOR = 16766720;
+var TIMELINE_BLUE_COLOR = 30719;
+var TIMELINE_BRACKET_WIDTH = 4;
+var createTimelineIntervalBracket = () => {
+  const group = new THREE3.Group();
+  group.name = "timelineIntervalBracket";
+  const barMaterial = new THREE3.MeshStandardMaterial({
+    color: TIMELINE_BLUE_COLOR,
+    emissive: 17578,
+    emissiveIntensity: 0.5,
+    transparent: true,
+    opacity: TIMELINE_INTERVAL_BAR_OPACITY,
+    roughness: 0.3,
+    metalness: 0.8
+  });
+  const geoHorizontal = new THREE3.CylinderGeometry(
+    TIMELINE_INTERVAL_BAR_RADIUS,
+    TIMELINE_INTERVAL_BAR_RADIUS,
+    1,
+    16
+  );
+  const geoVertical = new THREE3.CylinderGeometry(
+    TIMELINE_INTERVAL_BAR_RADIUS,
+    TIMELINE_INTERVAL_BAR_RADIUS,
+    1,
+    16
+  );
+  const bottomArm = new THREE3.Mesh(geoHorizontal, barMaterial);
+  bottomArm.rotation.z = Math.PI / 2;
+  const verticalStem = new THREE3.Mesh(geoVertical, barMaterial);
+  const topArm = new THREE3.Mesh(geoHorizontal.clone(), barMaterial);
+  topArm.rotation.z = Math.PI / 2;
+  group.add(bottomArm);
+  group.add(verticalStem);
+  group.add(topArm);
+  group.userData.bottomArm = bottomArm;
+  group.userData.verticalStem = verticalStem;
+  group.userData.topArm = topArm;
+  return group;
+};
+var updateTimelineIntervalBracket = (group, startPos, endPos) => {
+  if (!group || !group.userData.bottomArm) return;
+  const { bottomArm, verticalStem, topArm } = group.userData;
+  const w = TIMELINE_BRACKET_WIDTH;
+  const z = -0.5;
+  const p1 = new THREE3.Vector3(startPos.x, startPos.y, z);
+  const p2 = new THREE3.Vector3(startPos.x - w, startPos.y, z);
+  const p3 = new THREE3.Vector3(endPos.x - w, endPos.y, z);
+  const p4 = new THREE3.Vector3(endPos.x, endPos.y, z);
+  bottomArm.scale.y = w;
+  bottomArm.position.set((p1.x + p2.x) / 2, p1.y, z);
+  const verticalLen = Math.abs(p3.y - p2.y);
+  verticalStem.scale.y = Math.max(verticalLen, 1e-3);
+  verticalStem.position.set(p2.x, (p2.y + p3.y) / 2, z);
+  topArm.scale.y = w;
+  topArm.position.set((p3.x + p4.x) / 2, p3.y, z);
+};
 var QUEST_LENS_COLUMN_SPACING = 80;
 var QUEST_LENS_ROW_SPACING = 40;
 var getAllNodeIdsFromTree = (treeNode) => {
@@ -20044,7 +20285,9 @@ function XViewScene({
         const month = parseInt(parts[1], 10) - 1;
         const year = parseInt(parts[2], 10);
         if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
-          return new Date(year, month, day);
+          const d = /* @__PURE__ */ new Date();
+          d.setFullYear(year, month, day);
+          return d;
         }
       }
       return null;
@@ -20101,10 +20344,12 @@ function XViewScene({
     });
     const timelineWidth = (columns.length > 0 ? columns.length - 1 : 0) * TIMELINE_NODE_SPACING_X;
     const offsetX = -timelineWidth / 2;
+    const allFinalPoints = [];
     timelineNodes.forEach((node) => {
       const { mesh, type, startDate, endDate, label, columnIndex, isUndated } = node;
       const x = columnIndex * TIMELINE_NODE_SPACING_X + offsetX;
       const y = isUndated ? 0 : timeToYMap.get(startDate.getTime());
+      allFinalPoints.push(new THREE3.Vector3(x, y, 0));
       const timelineTween = new import_tween2.Tween(mesh.position).to({ x, y, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
       tweenGroup.add(timelineTween);
       timelineTween.start();
@@ -20117,25 +20362,16 @@ function XViewScene({
         if (type === "interval") {
           const endY = timeToYMap.get(endDate.getTime());
           if (endY > y) {
-            const barGeometry = new THREE3.CylinderGeometry(
-              TIMELINE_INTERVAL_BAR_RADIUS,
-              TIMELINE_INTERVAL_BAR_RADIUS,
-              1,
-              16
-            );
-            const barMaterial = new THREE3.MeshStandardMaterial({
-              color: TIMELINE_GOLD_COLOR,
-              emissive: 12092939,
-              emissiveIntensity: 0.4,
-              transparent: true,
-              opacity: TIMELINE_INTERVAL_BAR_OPACITY,
-              roughness: 0.3,
-              metalness: 0.8
-            });
-            const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
+            allFinalPoints.push(new THREE3.Vector3(x, endY, 0));
+            const intervalBar = createTimelineIntervalBracket();
             intervalBar.userData.associatedNodeId = mesh.userData.id;
             const endPosition = new THREE3.Vector3(x, endY, -0.5);
             intervalBar.userData.endPosition = endPosition;
+            updateTimelineIntervalBracket(
+              intervalBar,
+              new THREE3.Vector3(x, y, 0),
+              endPosition
+            );
             timelineIntervalsGroup.add(intervalBar);
             const endLabelText = endDate.getFullYear().toString();
             const endLabel = createTextSprite(endLabelText, 48);
@@ -20148,7 +20384,21 @@ function XViewScene({
         }
       }
     });
-  }, []);
+    if (allFinalPoints.length > 0) {
+      const boundingBox = new THREE3.Box3().setFromPoints(allFinalPoints);
+      const center = new THREE3.Vector3();
+      boundingBox.getCenter(center);
+      const size = new THREE3.Vector3();
+      boundingBox.getSize(size);
+      const spread = Math.max(size.x, size.y, size.z, 1);
+      const desiredDistance = Math.max(
+        x_view_config.CAMERA_ZOOM_DISTANCE,
+        spread * 0.75
+      );
+      const zoomFactor = x_view_config.CAMERA_ZOOM_DISTANCE / desiredDistance;
+      tweenToTarget(center, zoomFactor);
+    }
+  }, [tweenToTarget]);
   const handleVersionTimeline = (0, import_react37.useCallback)(
     (sourceMesh, versionMeshes) => {
       const { tweenGroup, timelineIntervalsGroup } = stateRef.current;
@@ -20184,7 +20434,9 @@ function XViewScene({
           const month = parseInt(parts[1], 10) - 1;
           const year = parseInt(parts[2], 10);
           if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
-            return new Date(year, month, day);
+            const d = /* @__PURE__ */ new Date();
+            d.setFullYear(year, month, day);
+            return d;
           }
         }
         return null;
@@ -20255,22 +20507,7 @@ function XViewScene({
         if (type === "interval") {
           const relativeEndY = timeToYMap.get(endDate.getTime()) - timeToYMap.get(startDate.getTime());
           if (relativeEndY > 0) {
-            const barGeometry = new THREE3.CylinderGeometry(
-              TIMELINE_INTERVAL_BAR_RADIUS,
-              TIMELINE_INTERVAL_BAR_RADIUS,
-              1,
-              16
-            );
-            const barMaterial = new THREE3.MeshStandardMaterial({
-              color: TIMELINE_GOLD_COLOR,
-              emissive: 12092939,
-              emissiveIntensity: 0.4,
-              transparent: true,
-              opacity: TIMELINE_INTERVAL_BAR_OPACITY,
-              roughness: 0.3,
-              metalness: 0.8
-            });
-            const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
+            const intervalBar = createTimelineIntervalBracket();
             intervalBar.userData.associatedNodeId = mesh.userData.id;
             const endPosition = new THREE3.Vector3(
               baseX,
@@ -20278,6 +20515,11 @@ function XViewScene({
               -0.5
             );
             intervalBar.userData.endPosition = endPosition;
+            updateTimelineIntervalBracket(
+              intervalBar,
+              new THREE3.Vector3(x, y, 0),
+              endPosition
+            );
             timelineIntervalsGroup.add(intervalBar);
             const endLabelText = endDate.getFullYear().toString();
             const endLabel = createTextSprite(endLabelText, 48);
@@ -20773,25 +21015,15 @@ function XViewScene({
             const endY = timeToYMap.get(timeInfo.endDate.getTime());
             if (Math.abs(endY - targetY) > 0.1) {
               const barHeight = Math.abs(endY - targetY);
-              const barGeometry = new THREE3.CylinderGeometry(
-                TIMELINE_INTERVAL_BAR_RADIUS,
-                TIMELINE_INTERVAL_BAR_RADIUS,
-                1,
-                16
-              );
-              const barMaterial = new THREE3.MeshStandardMaterial({
-                color: TIMELINE_GOLD_COLOR,
-                emissive: 12092939,
-                emissiveIntensity: 0.4,
-                transparent: true,
-                opacity: TIMELINE_INTERVAL_BAR_OPACITY,
-                roughness: 0.3,
-                metalness: 0.8
-              });
-              const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
+              const intervalBar = createTimelineIntervalBracket();
               intervalBar.userData.associatedNodeId = mesh.userData.id;
-              intervalBar.position.set(finalX, (targetY + endY) / 2, -0.5);
-              intervalBar.scale.y = barHeight;
+              const endPosition = new THREE3.Vector3(finalX, endY, -0.5);
+              intervalBar.userData.endPosition = endPosition;
+              updateTimelineIntervalBracket(
+                intervalBar,
+                new THREE3.Vector3(finalX, targetY, 0),
+                endPosition
+              );
               graphGroup.add(intervalBar);
               mesh.userData.timelineIntervalBar = intervalBar;
               const endLabel = createTextSprite(
@@ -21560,23 +21792,12 @@ function XViewScene({
         }
       });
       (_a2 = stateRef.current.timelineIntervalsGroup) == null ? void 0 : _a2.children.forEach((obj) => {
-        if (obj.isMesh && obj.userData.associatedNodeId && obj.userData.endPosition) {
+        if (obj.userData.associatedNodeId && obj.userData.endPosition) {
           const bar = obj;
           const node = stateRef.current.nodeObjects[String(bar.userData.associatedNodeId)];
           const endPos = bar.userData.endPosition;
           if (node) {
-            const startPos = node.position;
-            const distance = startPos.distanceTo(endPos);
-            bar.scale.y = distance;
-            const midpoint = new THREE3.Vector3().lerpVectors(
-              startPos,
-              endPos,
-              0.5
-            );
-            bar.position.copy(midpoint);
-            const direction = new THREE3.Vector3().subVectors(endPos, startPos).normalize();
-            const upVector = new THREE3.Vector3(0, 1, 0);
-            bar.quaternion.setFromUnitVectors(upVector, direction);
+            updateTimelineIntervalBracket(bar, node.position, endPos);
           }
         }
       });
@@ -24558,8 +24779,9 @@ function XViewScene({
   )) == null ? void 0 : _b.parentFileId : null;
   const detailsNodeDatasetInfo = detailsNode ? stateRef.current.nodeIdToParentFileMap.get(String(detailsNode.id)) : null;
   (0, import_react37.useEffect)(() => {
-    if (isInitialized && focusNodeId && !hasFocusedInitial) {
-      const nodeObjects = stateRef.current.nodeObjects || {};
+    if (!isInitialized || hasFocusedInitial) return;
+    const nodeObjects = stateRef.current.nodeObjects || {};
+    if (focusNodeId) {
       const targetMesh = nodeObjects[String(focusNodeId)];
       if (targetMesh) {
         setTimeout(() => {
@@ -24572,11 +24794,34 @@ function XViewScene({
           "O link aponta para um item que n\xE3o foi encontrado ou foi exclu\xEDdo."
         );
       }
+    } else if (!focusAncestryId) {
+      const meshes = Object.values(nodeObjects);
+      if (meshes.length > 0) {
+        setTimeout(() => {
+          const nodePositions = meshes.map((mesh) => mesh.position.clone());
+          const boundingBox = new THREE3.Box3().setFromPoints(nodePositions);
+          const center = new THREE3.Vector3();
+          boundingBox.getCenter(center);
+          const size = new THREE3.Vector3();
+          boundingBox.getSize(size);
+          const maxDim = Math.max(size.x, size.y, size.z);
+          const desiredDistance = Math.max(
+            x_view_config.CAMERA_ZOOM_DISTANCE,
+            maxDim * 1.8
+          );
+          const zoomFactor = x_view_config.CAMERA_ZOOM_DISTANCE / desiredDistance;
+          tweenToTarget(center, zoomFactor);
+          setHasFocusedInitial(true);
+        }, 300);
+      } else {
+        setHasFocusedInitial(true);
+      }
     }
   }, [
     isInitialized,
     sceneVersion,
     focusNodeId,
+    focusAncestryId,
     hasFocusedInitial,
     tweenToTarget
   ]);