@almadar/ui 4.41.3 → 4.42.0

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.
@@ -46750,13 +46750,14 @@ var AvlSwimLane = ({
46750
46750
  /* @__PURE__ */ jsxRuntime.jsx(
46751
46751
  "text",
46752
46752
  {
46753
- x: rightX + 8,
46753
+ x: totalWidth - 18,
46754
46754
  y: ey + 4,
46755
46755
  fontSize: 11,
46756
46756
  fontWeight: 500,
46757
46757
  fill: color,
46758
46758
  opacity: 0.6,
46759
46759
  fontFamily: "inherit",
46760
+ textAnchor: "end",
46760
46761
  children: evt
46761
46762
  }
46762
46763
  ),
@@ -52941,6 +52942,10 @@ var AvlOrbitalsCosmicZoom = ({
52941
52942
  const [pan, setPan] = React119.useState({ x: 0, y: 0 });
52942
52943
  const dragStateRef = React119.useRef(null);
52943
52944
  const transformWrapperRef = React119.useRef(null);
52945
+ React119.useEffect(() => {
52946
+ setZoom(1);
52947
+ setPan({ x: 0, y: 0 });
52948
+ }, [state.level]);
52944
52949
  const clampZoom = React119.useCallback(
52945
52950
  (z) => Math.max(minZoom, Math.min(maxZoom, z)),
52946
52951
  [minZoom, maxZoom]
@@ -53000,7 +53005,7 @@ var AvlOrbitalsCosmicZoom = ({
53000
53005
  };
53001
53006
  wrapper.addEventListener("wheel", wheelListener, { passive: false });
53002
53007
  return () => wrapper.removeEventListener("wheel", wheelListener);
53003
- }, [clampZoom]);
53008
+ }, [clampZoom, state.level]);
53004
53009
  const zoomIn = React119.useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
53005
53010
  const zoomOut = React119.useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
53006
53011
  const resetZoom = React119.useCallback(() => {
@@ -53255,14 +53260,42 @@ var AvlOrbitalsCosmicZoom = ({
53255
53260
  paddingLeft: 24,
53256
53261
  paddingRight: 24
53257
53262
  },
53258
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
53259
- AvlTraitScene,
53263
+ children: /* @__PURE__ */ jsxRuntime.jsx(
53264
+ "div",
53260
53265
  {
53261
- data: traitLevelData,
53262
- color,
53263
- onTransitionClick: (idx) => handleTransitionSelect(idx)
53266
+ ref: transformWrapperRef,
53267
+ onPointerDown: handlePointerDown,
53268
+ onPointerMove: handlePointerMove,
53269
+ onPointerUp: handlePointerUp,
53270
+ onPointerCancel: handlePointerUp,
53271
+ style: {
53272
+ position: "relative",
53273
+ width: "100%",
53274
+ height: "100%",
53275
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53276
+ overflow: "hidden"
53277
+ },
53278
+ children: /* @__PURE__ */ jsxRuntime.jsx(
53279
+ "div",
53280
+ {
53281
+ style: {
53282
+ position: "absolute",
53283
+ inset: 0,
53284
+ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
53285
+ transformOrigin: "0 0"
53286
+ },
53287
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
53288
+ AvlTraitScene,
53289
+ {
53290
+ data: traitLevelData,
53291
+ color,
53292
+ onTransitionClick: (idx) => handleTransitionSelect(idx)
53293
+ }
53294
+ ) })
53295
+ }
53296
+ )
53264
53297
  }
53265
- ) })
53298
+ )
53266
53299
  }
53267
53300
  ),
53268
53301
  state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsxRuntime.jsx(
@@ -53276,13 +53309,60 @@ var AvlOrbitalsCosmicZoom = ({
53276
53309
  paddingLeft: 24,
53277
53310
  paddingRight: 24
53278
53311
  },
53279
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
53280
- AvlTransitionScene,
53312
+ children: /* @__PURE__ */ jsxRuntime.jsx(
53313
+ "div",
53281
53314
  {
53282
- data: transitionLevelData,
53283
- color
53315
+ ref: transformWrapperRef,
53316
+ onPointerDown: handlePointerDown,
53317
+ onPointerMove: handlePointerMove,
53318
+ onPointerUp: handlePointerUp,
53319
+ onPointerCancel: handlePointerUp,
53320
+ style: {
53321
+ position: "relative",
53322
+ width: "100%",
53323
+ height: "100%",
53324
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53325
+ overflow: "hidden"
53326
+ },
53327
+ children: /* @__PURE__ */ jsxRuntime.jsx(
53328
+ "div",
53329
+ {
53330
+ style: {
53331
+ position: "absolute",
53332
+ inset: 0,
53333
+ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
53334
+ transformOrigin: "0 0"
53335
+ },
53336
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
53337
+ AvlTransitionScene,
53338
+ {
53339
+ data: transitionLevelData,
53340
+ color
53341
+ }
53342
+ ) })
53343
+ }
53344
+ )
53284
53345
  }
53285
- ) })
53346
+ )
53347
+ }
53348
+ ),
53349
+ (state.level === "trait" || state.level === "transition") && /* @__PURE__ */ jsxRuntime.jsxs(
53350
+ Box,
53351
+ {
53352
+ position: "absolute",
53353
+ style: {
53354
+ top: 12,
53355
+ right: 12,
53356
+ display: "flex",
53357
+ flexDirection: "column",
53358
+ gap: 4,
53359
+ zIndex: 30
53360
+ },
53361
+ children: [
53362
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", size: "sm" }) }),
53363
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "minus", size: "sm" }) }),
53364
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "maximize", size: "sm" }) })
53365
+ ]
53286
53366
  }
53287
53367
  )
53288
53368
  ]
package/dist/avl/index.js CHANGED
@@ -46704,13 +46704,14 @@ var AvlSwimLane = ({
46704
46704
  /* @__PURE__ */ jsx(
46705
46705
  "text",
46706
46706
  {
46707
- x: rightX + 8,
46707
+ x: totalWidth - 18,
46708
46708
  y: ey + 4,
46709
46709
  fontSize: 11,
46710
46710
  fontWeight: 500,
46711
46711
  fill: color,
46712
46712
  opacity: 0.6,
46713
46713
  fontFamily: "inherit",
46714
+ textAnchor: "end",
46714
46715
  children: evt
46715
46716
  }
46716
46717
  ),
@@ -52895,6 +52896,10 @@ var AvlOrbitalsCosmicZoom = ({
52895
52896
  const [pan, setPan] = useState({ x: 0, y: 0 });
52896
52897
  const dragStateRef = useRef(null);
52897
52898
  const transformWrapperRef = useRef(null);
52899
+ useEffect(() => {
52900
+ setZoom(1);
52901
+ setPan({ x: 0, y: 0 });
52902
+ }, [state.level]);
52898
52903
  const clampZoom = useCallback(
52899
52904
  (z) => Math.max(minZoom, Math.min(maxZoom, z)),
52900
52905
  [minZoom, maxZoom]
@@ -52954,7 +52959,7 @@ var AvlOrbitalsCosmicZoom = ({
52954
52959
  };
52955
52960
  wrapper.addEventListener("wheel", wheelListener, { passive: false });
52956
52961
  return () => wrapper.removeEventListener("wheel", wheelListener);
52957
- }, [clampZoom]);
52962
+ }, [clampZoom, state.level]);
52958
52963
  const zoomIn = useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
52959
52964
  const zoomOut = useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
52960
52965
  const resetZoom = useCallback(() => {
@@ -53209,14 +53214,42 @@ var AvlOrbitalsCosmicZoom = ({
53209
53214
  paddingLeft: 24,
53210
53215
  paddingRight: 24
53211
53216
  },
53212
- children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
53213
- AvlTraitScene,
53217
+ children: /* @__PURE__ */ jsx(
53218
+ "div",
53214
53219
  {
53215
- data: traitLevelData,
53216
- color,
53217
- onTransitionClick: (idx) => handleTransitionSelect(idx)
53220
+ ref: transformWrapperRef,
53221
+ onPointerDown: handlePointerDown,
53222
+ onPointerMove: handlePointerMove,
53223
+ onPointerUp: handlePointerUp,
53224
+ onPointerCancel: handlePointerUp,
53225
+ style: {
53226
+ position: "relative",
53227
+ width: "100%",
53228
+ height: "100%",
53229
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53230
+ overflow: "hidden"
53231
+ },
53232
+ children: /* @__PURE__ */ jsx(
53233
+ "div",
53234
+ {
53235
+ style: {
53236
+ position: "absolute",
53237
+ inset: 0,
53238
+ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
53239
+ transformOrigin: "0 0"
53240
+ },
53241
+ children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
53242
+ AvlTraitScene,
53243
+ {
53244
+ data: traitLevelData,
53245
+ color,
53246
+ onTransitionClick: (idx) => handleTransitionSelect(idx)
53247
+ }
53248
+ ) })
53249
+ }
53250
+ )
53218
53251
  }
53219
- ) })
53252
+ )
53220
53253
  }
53221
53254
  ),
53222
53255
  state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsx(
@@ -53230,13 +53263,60 @@ var AvlOrbitalsCosmicZoom = ({
53230
53263
  paddingLeft: 24,
53231
53264
  paddingRight: 24
53232
53265
  },
53233
- children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
53234
- AvlTransitionScene,
53266
+ children: /* @__PURE__ */ jsx(
53267
+ "div",
53235
53268
  {
53236
- data: transitionLevelData,
53237
- color
53269
+ ref: transformWrapperRef,
53270
+ onPointerDown: handlePointerDown,
53271
+ onPointerMove: handlePointerMove,
53272
+ onPointerUp: handlePointerUp,
53273
+ onPointerCancel: handlePointerUp,
53274
+ style: {
53275
+ position: "relative",
53276
+ width: "100%",
53277
+ height: "100%",
53278
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53279
+ overflow: "hidden"
53280
+ },
53281
+ children: /* @__PURE__ */ jsx(
53282
+ "div",
53283
+ {
53284
+ style: {
53285
+ position: "absolute",
53286
+ inset: 0,
53287
+ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
53288
+ transformOrigin: "0 0"
53289
+ },
53290
+ children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
53291
+ AvlTransitionScene,
53292
+ {
53293
+ data: transitionLevelData,
53294
+ color
53295
+ }
53296
+ ) })
53297
+ }
53298
+ )
53238
53299
  }
53239
- ) })
53300
+ )
53301
+ }
53302
+ ),
53303
+ (state.level === "trait" || state.level === "transition") && /* @__PURE__ */ jsxs(
53304
+ Box,
53305
+ {
53306
+ position: "absolute",
53307
+ style: {
53308
+ top: 12,
53309
+ right: 12,
53310
+ display: "flex",
53311
+ flexDirection: "column",
53312
+ gap: 4,
53313
+ zIndex: 30
53314
+ },
53315
+ children: [
53316
+ /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" }) }),
53317
+ /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: "sm" }) }),
53318
+ /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: "sm" }) })
53319
+ ]
53240
53320
  }
53241
53321
  )
53242
53322
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "4.41.3",
3
+ "version": "4.42.0",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [