@lv-x-software-house/x_view 1.2.6-dev.41 → 1.2.6-dev.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +58 -14
  2. package/dist/index.mjs +58 -14
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -8522,7 +8522,16 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8522
8522
  title: "Alterar Cor"
8523
8523
  },
8524
8524
  /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
8525
- ), isOpen && !disabled && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute top-full right-0 mt-1 z-[9999] p-2 bg-slate-950 rounded-lg border border-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.7)] w-[170px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-2 custom-react-colorful compact" }, /* @__PURE__ */ import_react13.default.createElement(import_react_colorful.HexColorPicker, { color, onChange })), /* @__PURE__ */ import_react13.default.createElement("div", { className: "h-px bg-white/5 my-2" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "grid grid-cols-5 gap-1.5" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ import_react13.default.createElement(
8525
+ ), isOpen && !disabled && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute top-full right-0 mt-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[210px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-3 custom-react-colorful compact" }, /* @__PURE__ */ import_react13.default.createElement(import_react_colorful.HexColorPicker, { color, onChange })), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-2 bg-slate-800/50 rounded-lg px-2.5 py-1.5 border border-white/5 focus-within:border-indigo-500/50 transition-all mb-3" }, /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiHash, { className: "text-slate-500", size: 14 }), /* @__PURE__ */ import_react13.default.createElement(
8526
+ "input",
8527
+ {
8528
+ type: "text",
8529
+ value: (color || "").replace("#", ""),
8530
+ onChange: handleInputChange,
8531
+ className: "w-full bg-transparent border-none focus:ring-0 text-xs text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
8532
+ maxLength: 6
8533
+ }
8534
+ )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ import_react13.default.createElement(
8526
8535
  "button",
8527
8536
  {
8528
8537
  key: preset,
@@ -8531,39 +8540,44 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8531
8540
  onChange(preset);
8532
8541
  setIsOpen(false);
8533
8542
  },
8534
- className: "w-full aspect-square rounded border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center",
8543
+ className: "w-full aspect-square rounded-md border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center relative overflow-hidden group/swatch",
8535
8544
  style: { backgroundColor: preset },
8536
8545
  title: preset
8537
8546
  },
8538
8547
  (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ import_react13.default.createElement(
8539
8548
  import_fi12.FiCheck,
8540
8549
  {
8541
- className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8542
- size: 10
8550
+ className: `drop-shadow-md z-10 ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8551
+ size: 12
8543
8552
  }
8544
- )
8553
+ ),
8554
+ /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 bg-white opacity-0 group-hover/swatch:opacity-10 transition-opacity" })
8545
8555
  )))), /* @__PURE__ */ import_react13.default.createElement("style", null, `
8546
8556
  .custom-react-colorful .react-colorful {
8547
8557
  width: 100%;
8548
8558
  height: 150px;
8549
8559
  }
8550
8560
  .custom-react-colorful.compact .react-colorful {
8551
- height: 100px;
8561
+ height: 120px;
8552
8562
  }
8553
8563
  .custom-react-colorful .react-colorful__saturation {
8554
- border-radius: 6px 6px 0 0;
8564
+ border-radius: 8px 8px 0 0;
8555
8565
  border-bottom: 1px solid rgba(255,255,255,0.1);
8556
8566
  }
8557
8567
  .custom-react-colorful .react-colorful__hue {
8558
- height: 12px;
8559
- border-radius: 0 0 6px 6px;
8568
+ height: 14px;
8569
+ border-radius: 0 0 8px 8px;
8560
8570
  margin-top: 2px;
8561
8571
  }
8562
8572
  .custom-react-colorful .react-colorful__pointer {
8563
- width: 14px;
8564
- height: 14px;
8573
+ width: 16px;
8574
+ height: 16px;
8565
8575
  border: 2px solid #fff;
8566
- box-shadow: 0 1px 4px rgba(0,0,0,0.5);
8576
+ box-shadow: 0 1px 5px rgba(0,0,0,0.5);
8577
+ }
8578
+ /* Ajuste para swatches n\xE3o ficarem espremidos em flex/grid */
8579
+ .aspect-square {
8580
+ aspect-ratio: 1 / 1;
8567
8581
  }
8568
8582
  `));
8569
8583
  }
@@ -18439,7 +18453,7 @@ function XViewScene({
18439
18453
  ]);
18440
18454
  (0, import_react31.useEffect)(() => {
18441
18455
  function handleKeyDown(event) {
18442
- var _a2, _b2, _c2;
18456
+ var _a2, _b2, _c2, _d2;
18443
18457
  const context = actionHandlerContext;
18444
18458
  if (event.key === "Escape") {
18445
18459
  if (stateRef.current.connection.isActive)
@@ -18477,7 +18491,7 @@ function XViewScene({
18477
18491
  setRelationshipMenu((prev) => ({ ...prev, visible: false }));
18478
18492
  }
18479
18493
  if (event.key.toLowerCase() === "q") {
18480
- const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_b2 = context.versionMode) == null ? void 0 : _b2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
18494
+ const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_b2 = context.versionMode) == null ? void 0 : _b2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !isMilestoneManagerOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
18481
18495
  if (isUiClear) {
18482
18496
  const isView = ((_c2 = viewParams == null ? void 0 : viewParams.type) == null ? void 0 : _c2.toLowerCase()) === "view";
18483
18497
  if (!isView) return;
@@ -18537,6 +18551,36 @@ function XViewScene({
18537
18551
  setQuestMode({ isActive: true });
18538
18552
  }
18539
18553
  }
18554
+ const isArrowKey = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key);
18555
+ if (isArrowKey) {
18556
+ const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_d2 = context.versionMode) == null ? void 0 : _d2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !isMilestoneManagerOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
18557
+ if (isUiClear) {
18558
+ const { controls } = stateRef.current;
18559
+ if (controls) {
18560
+ event.preventDefault();
18561
+ const rotateAngle = Math.PI / 36;
18562
+ const zoomScale = 1.1;
18563
+ if (event.key === "ArrowLeft") {
18564
+ controls.rotateLeft(rotateAngle);
18565
+ } else if (event.key === "ArrowRight") {
18566
+ controls.rotateLeft(-rotateAngle);
18567
+ } else if (event.key === "ArrowUp") {
18568
+ if (event.shiftKey) {
18569
+ controls.dollyIn(zoomScale);
18570
+ } else {
18571
+ controls.rotateUp(rotateAngle);
18572
+ }
18573
+ } else if (event.key === "ArrowDown") {
18574
+ if (event.shiftKey) {
18575
+ controls.dollyOut(zoomScale);
18576
+ } else {
18577
+ controls.rotateUp(-rotateAngle);
18578
+ }
18579
+ }
18580
+ controls.update();
18581
+ }
18582
+ }
18583
+ }
18540
18584
  }
18541
18585
  window.addEventListener("keydown", handleKeyDown);
18542
18586
  return () => window.removeEventListener("keydown", handleKeyDown);
package/dist/index.mjs CHANGED
@@ -8514,7 +8514,16 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8514
8514
  title: "Alterar Cor"
8515
8515
  },
8516
8516
  /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
8517
- ), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute top-full right-0 mt-1 z-[9999] p-2 bg-slate-950 rounded-lg border border-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.7)] w-[170px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-2 custom-react-colorful compact" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/5 my-2" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-1.5" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
8517
+ ), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute top-full right-0 mt-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[210px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-3 custom-react-colorful compact" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-2 bg-slate-800/50 rounded-lg px-2.5 py-1.5 border border-white/5 focus-within:border-indigo-500/50 transition-all mb-3" }, /* @__PURE__ */ React12.createElement(FiHash, { className: "text-slate-500", size: 14 }), /* @__PURE__ */ React12.createElement(
8518
+ "input",
8519
+ {
8520
+ type: "text",
8521
+ value: (color || "").replace("#", ""),
8522
+ onChange: handleInputChange,
8523
+ className: "w-full bg-transparent border-none focus:ring-0 text-xs text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
8524
+ maxLength: 6
8525
+ }
8526
+ )), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
8518
8527
  "button",
8519
8528
  {
8520
8529
  key: preset,
@@ -8523,39 +8532,44 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8523
8532
  onChange(preset);
8524
8533
  setIsOpen(false);
8525
8534
  },
8526
- className: "w-full aspect-square rounded border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center",
8535
+ className: "w-full aspect-square rounded-md border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center relative overflow-hidden group/swatch",
8527
8536
  style: { backgroundColor: preset },
8528
8537
  title: preset
8529
8538
  },
8530
8539
  (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ React12.createElement(
8531
8540
  FiCheck6,
8532
8541
  {
8533
- className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8534
- size: 10
8542
+ className: `drop-shadow-md z-10 ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8543
+ size: 12
8535
8544
  }
8536
- )
8545
+ ),
8546
+ /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 bg-white opacity-0 group-hover/swatch:opacity-10 transition-opacity" })
8537
8547
  )))), /* @__PURE__ */ React12.createElement("style", null, `
8538
8548
  .custom-react-colorful .react-colorful {
8539
8549
  width: 100%;
8540
8550
  height: 150px;
8541
8551
  }
8542
8552
  .custom-react-colorful.compact .react-colorful {
8543
- height: 100px;
8553
+ height: 120px;
8544
8554
  }
8545
8555
  .custom-react-colorful .react-colorful__saturation {
8546
- border-radius: 6px 6px 0 0;
8556
+ border-radius: 8px 8px 0 0;
8547
8557
  border-bottom: 1px solid rgba(255,255,255,0.1);
8548
8558
  }
8549
8559
  .custom-react-colorful .react-colorful__hue {
8550
- height: 12px;
8551
- border-radius: 0 0 6px 6px;
8560
+ height: 14px;
8561
+ border-radius: 0 0 8px 8px;
8552
8562
  margin-top: 2px;
8553
8563
  }
8554
8564
  .custom-react-colorful .react-colorful__pointer {
8555
- width: 14px;
8556
- height: 14px;
8565
+ width: 16px;
8566
+ height: 16px;
8557
8567
  border: 2px solid #fff;
8558
- box-shadow: 0 1px 4px rgba(0,0,0,0.5);
8568
+ box-shadow: 0 1px 5px rgba(0,0,0,0.5);
8569
+ }
8570
+ /* Ajuste para swatches n\xE3o ficarem espremidos em flex/grid */
8571
+ .aspect-square {
8572
+ aspect-ratio: 1 / 1;
8559
8573
  }
8560
8574
  `));
8561
8575
  }
@@ -18495,7 +18509,7 @@ function XViewScene({
18495
18509
  ]);
18496
18510
  useEffect24(() => {
18497
18511
  function handleKeyDown(event) {
18498
- var _a2, _b2, _c2;
18512
+ var _a2, _b2, _c2, _d2;
18499
18513
  const context = actionHandlerContext;
18500
18514
  if (event.key === "Escape") {
18501
18515
  if (stateRef.current.connection.isActive)
@@ -18533,7 +18547,7 @@ function XViewScene({
18533
18547
  setRelationshipMenu((prev) => ({ ...prev, visible: false }));
18534
18548
  }
18535
18549
  if (event.key.toLowerCase() === "q") {
18536
- const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_b2 = context.versionMode) == null ? void 0 : _b2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
18550
+ const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_b2 = context.versionMode) == null ? void 0 : _b2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !isMilestoneManagerOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
18537
18551
  if (isUiClear) {
18538
18552
  const isView = ((_c2 = viewParams == null ? void 0 : viewParams.type) == null ? void 0 : _c2.toLowerCase()) === "view";
18539
18553
  if (!isView) return;
@@ -18593,6 +18607,36 @@ function XViewScene({
18593
18607
  setQuestMode({ isActive: true });
18594
18608
  }
18595
18609
  }
18610
+ const isArrowKey = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key);
18611
+ if (isArrowKey) {
18612
+ const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_d2 = context.versionMode) == null ? void 0 : _d2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !isMilestoneManagerOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
18613
+ if (isUiClear) {
18614
+ const { controls } = stateRef.current;
18615
+ if (controls) {
18616
+ event.preventDefault();
18617
+ const rotateAngle = Math.PI / 36;
18618
+ const zoomScale = 1.1;
18619
+ if (event.key === "ArrowLeft") {
18620
+ controls.rotateLeft(rotateAngle);
18621
+ } else if (event.key === "ArrowRight") {
18622
+ controls.rotateLeft(-rotateAngle);
18623
+ } else if (event.key === "ArrowUp") {
18624
+ if (event.shiftKey) {
18625
+ controls.dollyIn(zoomScale);
18626
+ } else {
18627
+ controls.rotateUp(rotateAngle);
18628
+ }
18629
+ } else if (event.key === "ArrowDown") {
18630
+ if (event.shiftKey) {
18631
+ controls.dollyOut(zoomScale);
18632
+ } else {
18633
+ controls.rotateUp(-rotateAngle);
18634
+ }
18635
+ }
18636
+ controls.update();
18637
+ }
18638
+ }
18639
+ }
18596
18640
  }
18597
18641
  window.addEventListener("keydown", handleKeyDown);
18598
18642
  return () => window.removeEventListener("keydown", handleKeyDown);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lv-x-software-house/x_view",
3
- "version": "1.2.6-dev.41",
3
+ "version": "1.2.6-dev.43",
4
4
  "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
5
5
  "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
6
6
  "license": "UNLICENSED",