@almadar/ui 4.41.3 → 4.42.1

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(() => {
@@ -53068,25 +53073,25 @@ var AvlOrbitalsCosmicZoom = ({
53068
53073
  ),
53069
53074
  state.level === "application" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
53070
53075
  /* @__PURE__ */ jsxRuntime.jsx(
53071
- "div",
53076
+ Box,
53072
53077
  {
53073
53078
  ref: transformWrapperRef,
53079
+ position: "absolute",
53074
53080
  onPointerDown: handlePointerDown,
53075
53081
  onPointerMove: handlePointerMove,
53076
53082
  onPointerUp: handlePointerUp,
53077
53083
  onPointerCancel: handlePointerUp,
53078
53084
  style: {
53079
- position: "absolute",
53080
53085
  inset: 0,
53081
53086
  overflow: "hidden",
53082
53087
  cursor: dragStateRef.current ? "grabbing" : "grab",
53083
53088
  touchAction: "none"
53084
53089
  },
53085
53090
  children: /* @__PURE__ */ jsxRuntime.jsxs(
53086
- "div",
53091
+ Box,
53087
53092
  {
53093
+ position: "absolute",
53088
53094
  style: {
53089
- position: "absolute",
53090
53095
  inset: 0,
53091
53096
  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
53092
53097
  transformOrigin: "0 0"
@@ -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
+ Box,
53260
53265
  {
53261
- data: traitLevelData,
53262
- color,
53263
- onTransitionClick: (idx) => handleTransitionSelect(idx)
53266
+ ref: transformWrapperRef,
53267
+ position: "relative",
53268
+ onPointerDown: handlePointerDown,
53269
+ onPointerMove: handlePointerMove,
53270
+ onPointerUp: handlePointerUp,
53271
+ onPointerCancel: handlePointerUp,
53272
+ style: {
53273
+ width: "100%",
53274
+ height: "100%",
53275
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53276
+ overflow: "hidden"
53277
+ },
53278
+ children: /* @__PURE__ */ jsxRuntime.jsx(
53279
+ Box,
53280
+ {
53281
+ position: "absolute",
53282
+ style: {
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
+ Box,
53281
53314
  {
53282
- data: transitionLevelData,
53283
- color
53315
+ ref: transformWrapperRef,
53316
+ position: "relative",
53317
+ onPointerDown: handlePointerDown,
53318
+ onPointerMove: handlePointerMove,
53319
+ onPointerUp: handlePointerUp,
53320
+ onPointerCancel: handlePointerUp,
53321
+ style: {
53322
+ width: "100%",
53323
+ height: "100%",
53324
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53325
+ overflow: "hidden"
53326
+ },
53327
+ children: /* @__PURE__ */ jsxRuntime.jsx(
53328
+ Box,
53329
+ {
53330
+ position: "absolute",
53331
+ style: {
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(() => {
@@ -53022,25 +53027,25 @@ var AvlOrbitalsCosmicZoom = ({
53022
53027
  ),
53023
53028
  state.level === "application" && /* @__PURE__ */ jsxs(Fragment, { children: [
53024
53029
  /* @__PURE__ */ jsx(
53025
- "div",
53030
+ Box,
53026
53031
  {
53027
53032
  ref: transformWrapperRef,
53033
+ position: "absolute",
53028
53034
  onPointerDown: handlePointerDown,
53029
53035
  onPointerMove: handlePointerMove,
53030
53036
  onPointerUp: handlePointerUp,
53031
53037
  onPointerCancel: handlePointerUp,
53032
53038
  style: {
53033
- position: "absolute",
53034
53039
  inset: 0,
53035
53040
  overflow: "hidden",
53036
53041
  cursor: dragStateRef.current ? "grabbing" : "grab",
53037
53042
  touchAction: "none"
53038
53043
  },
53039
53044
  children: /* @__PURE__ */ jsxs(
53040
- "div",
53045
+ Box,
53041
53046
  {
53047
+ position: "absolute",
53042
53048
  style: {
53043
- position: "absolute",
53044
53049
  inset: 0,
53045
53050
  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
53046
53051
  transformOrigin: "0 0"
@@ -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
+ Box,
53214
53219
  {
53215
- data: traitLevelData,
53216
- color,
53217
- onTransitionClick: (idx) => handleTransitionSelect(idx)
53220
+ ref: transformWrapperRef,
53221
+ position: "relative",
53222
+ onPointerDown: handlePointerDown,
53223
+ onPointerMove: handlePointerMove,
53224
+ onPointerUp: handlePointerUp,
53225
+ onPointerCancel: handlePointerUp,
53226
+ style: {
53227
+ width: "100%",
53228
+ height: "100%",
53229
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53230
+ overflow: "hidden"
53231
+ },
53232
+ children: /* @__PURE__ */ jsx(
53233
+ Box,
53234
+ {
53235
+ position: "absolute",
53236
+ style: {
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
+ Box,
53235
53268
  {
53236
- data: transitionLevelData,
53237
- color
53269
+ ref: transformWrapperRef,
53270
+ position: "relative",
53271
+ onPointerDown: handlePointerDown,
53272
+ onPointerMove: handlePointerMove,
53273
+ onPointerUp: handlePointerUp,
53274
+ onPointerCancel: handlePointerUp,
53275
+ style: {
53276
+ width: "100%",
53277
+ height: "100%",
53278
+ cursor: dragStateRef.current ? "grabbing" : "grab",
53279
+ overflow: "hidden"
53280
+ },
53281
+ children: /* @__PURE__ */ jsx(
53282
+ Box,
53283
+ {
53284
+ position: "absolute",
53285
+ style: {
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.1",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [