@almadar/ui 5.13.3 → 5.14.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.
- package/dist/avl/index.cjs +57 -0
- package/dist/avl/index.js +57 -0
- package/dist/components/index.cjs +323 -14
- package/dist/components/index.js +323 -15
- package/dist/components/molecules/Coachmark.d.ts +47 -0
- package/dist/components/molecules/OnboardingSpotlight.d.ts +27 -0
- package/dist/components/molecules/avl/avl-story-schemas.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +2 -0
- package/dist/providers/index.cjs +57 -0
- package/dist/providers/index.js +57 -0
- package/dist/runtime/index.cjs +57 -0
- package/dist/runtime/index.js +57 -0
- package/package.json +2 -2
package/dist/avl/index.cjs
CHANGED
|
@@ -17578,6 +17578,8 @@ var init_CodeBlock = __esm({
|
|
|
17578
17578
|
collapsedRef.current = collapsed;
|
|
17579
17579
|
const foldStartMapRef = React98.useRef(foldStartMap);
|
|
17580
17580
|
foldStartMapRef.current = foldStartMap;
|
|
17581
|
+
const hiddenLinesRef = React98.useRef(hiddenLines);
|
|
17582
|
+
hiddenLinesRef.current = hiddenLines;
|
|
17581
17583
|
const toggleFold = React98.useCallback((lineNum) => {
|
|
17582
17584
|
setCollapsed((prev) => {
|
|
17583
17585
|
const next = new Set(prev);
|
|
@@ -17690,6 +17692,60 @@ var init_CodeBlock = __esm({
|
|
|
17690
17692
|
eventBus.emit("UI:COPY_CODE", { language, success: false });
|
|
17691
17693
|
}
|
|
17692
17694
|
};
|
|
17695
|
+
const handleSelectionCopy = React98.useCallback((e) => {
|
|
17696
|
+
if (hiddenLinesRef.current.size === 0) return;
|
|
17697
|
+
const sel = typeof window !== "undefined" ? window.getSelection() : null;
|
|
17698
|
+
if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
|
|
17699
|
+
const lineOf = (node) => {
|
|
17700
|
+
const start = node instanceof HTMLElement ? node : node?.parentElement ?? null;
|
|
17701
|
+
const lineEl = start?.closest("[data-line]");
|
|
17702
|
+
if (!lineEl) return null;
|
|
17703
|
+
const n = parseInt(lineEl.getAttribute("data-line") ?? "", 10);
|
|
17704
|
+
return Number.isNaN(n) ? null : n;
|
|
17705
|
+
};
|
|
17706
|
+
const range = sel.getRangeAt(0);
|
|
17707
|
+
let a = lineOf(range.startContainer);
|
|
17708
|
+
let b = lineOf(range.endContainer);
|
|
17709
|
+
if (a === null || b === null) {
|
|
17710
|
+
const container = codeRef.current;
|
|
17711
|
+
if (!container) return;
|
|
17712
|
+
let min = Infinity, max = -Infinity;
|
|
17713
|
+
container.querySelectorAll("[data-line]").forEach((el) => {
|
|
17714
|
+
if (!sel.containsNode(el, true)) return;
|
|
17715
|
+
const n = parseInt(el.getAttribute("data-line") ?? "", 10);
|
|
17716
|
+
if (!Number.isNaN(n)) {
|
|
17717
|
+
min = Math.min(min, n);
|
|
17718
|
+
max = Math.max(max, n);
|
|
17719
|
+
}
|
|
17720
|
+
});
|
|
17721
|
+
if (min === Infinity) return;
|
|
17722
|
+
a = a ?? min;
|
|
17723
|
+
b = b ?? max;
|
|
17724
|
+
}
|
|
17725
|
+
if (a > b) [a, b] = [b, a];
|
|
17726
|
+
let touchesFold = false;
|
|
17727
|
+
for (let i = a; i <= b; i++) {
|
|
17728
|
+
if (hiddenLinesRef.current.has(i) || foldStartMapRef.current.has(i) && collapsedRef.current.has(i)) {
|
|
17729
|
+
touchesFold = true;
|
|
17730
|
+
break;
|
|
17731
|
+
}
|
|
17732
|
+
}
|
|
17733
|
+
if (!touchesFold) return;
|
|
17734
|
+
let endLine = b;
|
|
17735
|
+
let changed = true;
|
|
17736
|
+
while (changed) {
|
|
17737
|
+
changed = false;
|
|
17738
|
+
foldStartMapRef.current.forEach((region, start) => {
|
|
17739
|
+
if (start >= a && start <= endLine && collapsedRef.current.has(start) && region.end > endLine) {
|
|
17740
|
+
endLine = region.end;
|
|
17741
|
+
changed = true;
|
|
17742
|
+
}
|
|
17743
|
+
});
|
|
17744
|
+
}
|
|
17745
|
+
const full = code.split("\n").slice(a, endLine + 1).join("\n");
|
|
17746
|
+
e.clipboardData.setData("text/plain", full);
|
|
17747
|
+
e.preventDefault();
|
|
17748
|
+
}, [code]);
|
|
17693
17749
|
const hasHeader = showLanguageBadge || showCopyButton;
|
|
17694
17750
|
return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: `relative group ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
17695
17751
|
hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -17840,6 +17896,7 @@ var init_CodeBlock = __esm({
|
|
|
17840
17896
|
"div",
|
|
17841
17897
|
{
|
|
17842
17898
|
ref: scrollRef,
|
|
17899
|
+
onCopy: handleSelectionCopy,
|
|
17843
17900
|
style: {
|
|
17844
17901
|
flex: 1,
|
|
17845
17902
|
minHeight: 0,
|
package/dist/avl/index.js
CHANGED
|
@@ -17529,6 +17529,8 @@ var init_CodeBlock = __esm({
|
|
|
17529
17529
|
collapsedRef.current = collapsed;
|
|
17530
17530
|
const foldStartMapRef = useRef(foldStartMap);
|
|
17531
17531
|
foldStartMapRef.current = foldStartMap;
|
|
17532
|
+
const hiddenLinesRef = useRef(hiddenLines);
|
|
17533
|
+
hiddenLinesRef.current = hiddenLines;
|
|
17532
17534
|
const toggleFold = useCallback((lineNum) => {
|
|
17533
17535
|
setCollapsed((prev) => {
|
|
17534
17536
|
const next = new Set(prev);
|
|
@@ -17641,6 +17643,60 @@ var init_CodeBlock = __esm({
|
|
|
17641
17643
|
eventBus.emit("UI:COPY_CODE", { language, success: false });
|
|
17642
17644
|
}
|
|
17643
17645
|
};
|
|
17646
|
+
const handleSelectionCopy = useCallback((e) => {
|
|
17647
|
+
if (hiddenLinesRef.current.size === 0) return;
|
|
17648
|
+
const sel = typeof window !== "undefined" ? window.getSelection() : null;
|
|
17649
|
+
if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
|
|
17650
|
+
const lineOf = (node) => {
|
|
17651
|
+
const start = node instanceof HTMLElement ? node : node?.parentElement ?? null;
|
|
17652
|
+
const lineEl = start?.closest("[data-line]");
|
|
17653
|
+
if (!lineEl) return null;
|
|
17654
|
+
const n = parseInt(lineEl.getAttribute("data-line") ?? "", 10);
|
|
17655
|
+
return Number.isNaN(n) ? null : n;
|
|
17656
|
+
};
|
|
17657
|
+
const range = sel.getRangeAt(0);
|
|
17658
|
+
let a = lineOf(range.startContainer);
|
|
17659
|
+
let b = lineOf(range.endContainer);
|
|
17660
|
+
if (a === null || b === null) {
|
|
17661
|
+
const container = codeRef.current;
|
|
17662
|
+
if (!container) return;
|
|
17663
|
+
let min = Infinity, max = -Infinity;
|
|
17664
|
+
container.querySelectorAll("[data-line]").forEach((el) => {
|
|
17665
|
+
if (!sel.containsNode(el, true)) return;
|
|
17666
|
+
const n = parseInt(el.getAttribute("data-line") ?? "", 10);
|
|
17667
|
+
if (!Number.isNaN(n)) {
|
|
17668
|
+
min = Math.min(min, n);
|
|
17669
|
+
max = Math.max(max, n);
|
|
17670
|
+
}
|
|
17671
|
+
});
|
|
17672
|
+
if (min === Infinity) return;
|
|
17673
|
+
a = a ?? min;
|
|
17674
|
+
b = b ?? max;
|
|
17675
|
+
}
|
|
17676
|
+
if (a > b) [a, b] = [b, a];
|
|
17677
|
+
let touchesFold = false;
|
|
17678
|
+
for (let i = a; i <= b; i++) {
|
|
17679
|
+
if (hiddenLinesRef.current.has(i) || foldStartMapRef.current.has(i) && collapsedRef.current.has(i)) {
|
|
17680
|
+
touchesFold = true;
|
|
17681
|
+
break;
|
|
17682
|
+
}
|
|
17683
|
+
}
|
|
17684
|
+
if (!touchesFold) return;
|
|
17685
|
+
let endLine = b;
|
|
17686
|
+
let changed = true;
|
|
17687
|
+
while (changed) {
|
|
17688
|
+
changed = false;
|
|
17689
|
+
foldStartMapRef.current.forEach((region, start) => {
|
|
17690
|
+
if (start >= a && start <= endLine && collapsedRef.current.has(start) && region.end > endLine) {
|
|
17691
|
+
endLine = region.end;
|
|
17692
|
+
changed = true;
|
|
17693
|
+
}
|
|
17694
|
+
});
|
|
17695
|
+
}
|
|
17696
|
+
const full = code.split("\n").slice(a, endLine + 1).join("\n");
|
|
17697
|
+
e.clipboardData.setData("text/plain", full);
|
|
17698
|
+
e.preventDefault();
|
|
17699
|
+
}, [code]);
|
|
17644
17700
|
const hasHeader = showLanguageBadge || showCopyButton;
|
|
17645
17701
|
return /* @__PURE__ */ jsxs(Box, { className: `relative group ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
17646
17702
|
hasHeader && /* @__PURE__ */ jsxs(
|
|
@@ -17791,6 +17847,7 @@ var init_CodeBlock = __esm({
|
|
|
17791
17847
|
"div",
|
|
17792
17848
|
{
|
|
17793
17849
|
ref: scrollRef,
|
|
17850
|
+
onCopy: handleSelectionCopy,
|
|
17794
17851
|
style: {
|
|
17795
17852
|
flex: 1,
|
|
17796
17853
|
minHeight: 0,
|
|
@@ -8679,13 +8679,13 @@ var init_MapView = __esm({
|
|
|
8679
8679
|
shadowSize: [41, 41]
|
|
8680
8680
|
});
|
|
8681
8681
|
L.Marker.prototype.options.icon = defaultIcon;
|
|
8682
|
-
const { useEffect:
|
|
8682
|
+
const { useEffect: useEffect73, useRef: useRef67, useCallback: useCallback129, useState: useState112 } = React80__namespace.default;
|
|
8683
8683
|
const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
|
|
8684
8684
|
const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
|
|
8685
8685
|
function MapUpdater({ centerLat, centerLng, zoom }) {
|
|
8686
8686
|
const map = useMap();
|
|
8687
|
-
const prevRef =
|
|
8688
|
-
|
|
8687
|
+
const prevRef = useRef67({ centerLat, centerLng, zoom });
|
|
8688
|
+
useEffect73(() => {
|
|
8689
8689
|
const prev = prevRef.current;
|
|
8690
8690
|
if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
|
|
8691
8691
|
map.setView([centerLat, centerLng], zoom);
|
|
@@ -8696,7 +8696,7 @@ var init_MapView = __esm({
|
|
|
8696
8696
|
}
|
|
8697
8697
|
function MapClickHandler({ onMapClick }) {
|
|
8698
8698
|
const map = useMap();
|
|
8699
|
-
|
|
8699
|
+
useEffect73(() => {
|
|
8700
8700
|
if (!onMapClick) return;
|
|
8701
8701
|
const handler = (e) => {
|
|
8702
8702
|
onMapClick(e.latlng.lat, e.latlng.lng);
|
|
@@ -8724,8 +8724,8 @@ var init_MapView = __esm({
|
|
|
8724
8724
|
showAttribution = true
|
|
8725
8725
|
}) {
|
|
8726
8726
|
const eventBus = useEventBus2();
|
|
8727
|
-
const [clickedPosition, setClickedPosition] =
|
|
8728
|
-
const handleMapClick =
|
|
8727
|
+
const [clickedPosition, setClickedPosition] = useState112(null);
|
|
8728
|
+
const handleMapClick = useCallback129((lat, lng) => {
|
|
8729
8729
|
if (showClickedPin) {
|
|
8730
8730
|
setClickedPosition({ lat, lng });
|
|
8731
8731
|
}
|
|
@@ -8734,7 +8734,7 @@ var init_MapView = __esm({
|
|
|
8734
8734
|
eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
|
|
8735
8735
|
}
|
|
8736
8736
|
}, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
|
|
8737
|
-
const handleMarkerClick =
|
|
8737
|
+
const handleMarkerClick = useCallback129((marker) => {
|
|
8738
8738
|
onMarkerClick?.(marker);
|
|
8739
8739
|
if (markerClickEvent) {
|
|
8740
8740
|
eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
|
|
@@ -12514,6 +12514,8 @@ var init_CodeBlock = __esm({
|
|
|
12514
12514
|
collapsedRef.current = collapsed;
|
|
12515
12515
|
const foldStartMapRef = React80.useRef(foldStartMap);
|
|
12516
12516
|
foldStartMapRef.current = foldStartMap;
|
|
12517
|
+
const hiddenLinesRef = React80.useRef(hiddenLines);
|
|
12518
|
+
hiddenLinesRef.current = hiddenLines;
|
|
12517
12519
|
const toggleFold = React80.useCallback((lineNum) => {
|
|
12518
12520
|
setCollapsed((prev) => {
|
|
12519
12521
|
const next = new Set(prev);
|
|
@@ -12626,6 +12628,60 @@ var init_CodeBlock = __esm({
|
|
|
12626
12628
|
eventBus.emit("UI:COPY_CODE", { language, success: false });
|
|
12627
12629
|
}
|
|
12628
12630
|
};
|
|
12631
|
+
const handleSelectionCopy = React80.useCallback((e) => {
|
|
12632
|
+
if (hiddenLinesRef.current.size === 0) return;
|
|
12633
|
+
const sel = typeof window !== "undefined" ? window.getSelection() : null;
|
|
12634
|
+
if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
|
|
12635
|
+
const lineOf = (node) => {
|
|
12636
|
+
const start = node instanceof HTMLElement ? node : node?.parentElement ?? null;
|
|
12637
|
+
const lineEl = start?.closest("[data-line]");
|
|
12638
|
+
if (!lineEl) return null;
|
|
12639
|
+
const n = parseInt(lineEl.getAttribute("data-line") ?? "", 10);
|
|
12640
|
+
return Number.isNaN(n) ? null : n;
|
|
12641
|
+
};
|
|
12642
|
+
const range = sel.getRangeAt(0);
|
|
12643
|
+
let a = lineOf(range.startContainer);
|
|
12644
|
+
let b = lineOf(range.endContainer);
|
|
12645
|
+
if (a === null || b === null) {
|
|
12646
|
+
const container = codeRef.current;
|
|
12647
|
+
if (!container) return;
|
|
12648
|
+
let min = Infinity, max = -Infinity;
|
|
12649
|
+
container.querySelectorAll("[data-line]").forEach((el) => {
|
|
12650
|
+
if (!sel.containsNode(el, true)) return;
|
|
12651
|
+
const n = parseInt(el.getAttribute("data-line") ?? "", 10);
|
|
12652
|
+
if (!Number.isNaN(n)) {
|
|
12653
|
+
min = Math.min(min, n);
|
|
12654
|
+
max = Math.max(max, n);
|
|
12655
|
+
}
|
|
12656
|
+
});
|
|
12657
|
+
if (min === Infinity) return;
|
|
12658
|
+
a = a ?? min;
|
|
12659
|
+
b = b ?? max;
|
|
12660
|
+
}
|
|
12661
|
+
if (a > b) [a, b] = [b, a];
|
|
12662
|
+
let touchesFold = false;
|
|
12663
|
+
for (let i = a; i <= b; i++) {
|
|
12664
|
+
if (hiddenLinesRef.current.has(i) || foldStartMapRef.current.has(i) && collapsedRef.current.has(i)) {
|
|
12665
|
+
touchesFold = true;
|
|
12666
|
+
break;
|
|
12667
|
+
}
|
|
12668
|
+
}
|
|
12669
|
+
if (!touchesFold) return;
|
|
12670
|
+
let endLine = b;
|
|
12671
|
+
let changed = true;
|
|
12672
|
+
while (changed) {
|
|
12673
|
+
changed = false;
|
|
12674
|
+
foldStartMapRef.current.forEach((region, start) => {
|
|
12675
|
+
if (start >= a && start <= endLine && collapsedRef.current.has(start) && region.end > endLine) {
|
|
12676
|
+
endLine = region.end;
|
|
12677
|
+
changed = true;
|
|
12678
|
+
}
|
|
12679
|
+
});
|
|
12680
|
+
}
|
|
12681
|
+
const full = code.split("\n").slice(a, endLine + 1).join("\n");
|
|
12682
|
+
e.clipboardData.setData("text/plain", full);
|
|
12683
|
+
e.preventDefault();
|
|
12684
|
+
}, [code]);
|
|
12629
12685
|
const hasHeader = showLanguageBadge || showCopyButton;
|
|
12630
12686
|
return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: `relative group ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
12631
12687
|
hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -12776,6 +12832,7 @@ var init_CodeBlock = __esm({
|
|
|
12776
12832
|
"div",
|
|
12777
12833
|
{
|
|
12778
12834
|
ref: scrollRef,
|
|
12835
|
+
onCopy: handleSelectionCopy,
|
|
12779
12836
|
style: {
|
|
12780
12837
|
flex: 1,
|
|
12781
12838
|
minHeight: 0,
|
|
@@ -23835,6 +23892,255 @@ var init_InputGroup = __esm({
|
|
|
23835
23892
|
exports.InputGroup.displayName = "InputGroup";
|
|
23836
23893
|
}
|
|
23837
23894
|
});
|
|
23895
|
+
function resolveAnchorRect(anchor) {
|
|
23896
|
+
if (typeof anchor === "string") {
|
|
23897
|
+
return document.querySelector(anchor)?.getBoundingClientRect() ?? null;
|
|
23898
|
+
}
|
|
23899
|
+
if (anchor instanceof DOMRect) return anchor;
|
|
23900
|
+
return anchor?.current?.getBoundingClientRect() ?? null;
|
|
23901
|
+
}
|
|
23902
|
+
function useAnchorRect(anchor, active) {
|
|
23903
|
+
const [rect, setRect] = React80.useState(null);
|
|
23904
|
+
const read = React80.useCallback(() => resolveAnchorRect(anchor), [anchor]);
|
|
23905
|
+
React80.useEffect(() => {
|
|
23906
|
+
if (!active || typeof document === "undefined") {
|
|
23907
|
+
setRect(null);
|
|
23908
|
+
return;
|
|
23909
|
+
}
|
|
23910
|
+
const update = () => setRect(read());
|
|
23911
|
+
update();
|
|
23912
|
+
window.addEventListener("scroll", update, true);
|
|
23913
|
+
window.addEventListener("resize", update);
|
|
23914
|
+
let raf = 0;
|
|
23915
|
+
let tries = 0;
|
|
23916
|
+
const poll = () => {
|
|
23917
|
+
const found = read();
|
|
23918
|
+
if (found) {
|
|
23919
|
+
setRect(found);
|
|
23920
|
+
} else if (tries++ < 40) {
|
|
23921
|
+
raf = requestAnimationFrame(poll);
|
|
23922
|
+
}
|
|
23923
|
+
};
|
|
23924
|
+
if (!read()) raf = requestAnimationFrame(poll);
|
|
23925
|
+
return () => {
|
|
23926
|
+
window.removeEventListener("scroll", update, true);
|
|
23927
|
+
window.removeEventListener("resize", update);
|
|
23928
|
+
if (raf) cancelAnimationFrame(raf);
|
|
23929
|
+
};
|
|
23930
|
+
}, [active, read]);
|
|
23931
|
+
return rect;
|
|
23932
|
+
}
|
|
23933
|
+
function placeCard(placement, rect, size) {
|
|
23934
|
+
const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
|
|
23935
|
+
const vh = typeof window !== "undefined" ? window.innerHeight : 768;
|
|
23936
|
+
let top = 0;
|
|
23937
|
+
let left = 0;
|
|
23938
|
+
switch (placement) {
|
|
23939
|
+
case "top":
|
|
23940
|
+
top = rect.top - size.h - GAP;
|
|
23941
|
+
left = rect.left + rect.width / 2 - size.w / 2;
|
|
23942
|
+
break;
|
|
23943
|
+
case "left":
|
|
23944
|
+
left = rect.left - size.w - GAP;
|
|
23945
|
+
top = rect.top + rect.height / 2 - size.h / 2;
|
|
23946
|
+
break;
|
|
23947
|
+
case "right":
|
|
23948
|
+
left = rect.right + GAP;
|
|
23949
|
+
top = rect.top + rect.height / 2 - size.h / 2;
|
|
23950
|
+
break;
|
|
23951
|
+
case "bottom":
|
|
23952
|
+
default:
|
|
23953
|
+
top = rect.bottom + GAP;
|
|
23954
|
+
left = rect.left + rect.width / 2 - size.w / 2;
|
|
23955
|
+
break;
|
|
23956
|
+
}
|
|
23957
|
+
left = Math.max(EDGE, Math.min(left, vw - size.w - EDGE));
|
|
23958
|
+
top = Math.max(EDGE, Math.min(top, vh - size.h - EDGE));
|
|
23959
|
+
return { top, left };
|
|
23960
|
+
}
|
|
23961
|
+
var GAP, EDGE; exports.Coachmark = void 0;
|
|
23962
|
+
var init_Coachmark = __esm({
|
|
23963
|
+
"components/molecules/Coachmark.tsx"() {
|
|
23964
|
+
"use client";
|
|
23965
|
+
init_Box();
|
|
23966
|
+
init_Typography();
|
|
23967
|
+
init_Button();
|
|
23968
|
+
init_Icon();
|
|
23969
|
+
init_cn();
|
|
23970
|
+
GAP = 10;
|
|
23971
|
+
EDGE = 8;
|
|
23972
|
+
exports.Coachmark = ({
|
|
23973
|
+
open,
|
|
23974
|
+
anchor,
|
|
23975
|
+
placement = "bottom",
|
|
23976
|
+
title,
|
|
23977
|
+
children,
|
|
23978
|
+
onDismiss,
|
|
23979
|
+
onPrimary,
|
|
23980
|
+
primaryLabel,
|
|
23981
|
+
onSecondary,
|
|
23982
|
+
secondaryLabel,
|
|
23983
|
+
showBeacon = false,
|
|
23984
|
+
fallbackCentered = false,
|
|
23985
|
+
className
|
|
23986
|
+
}) => {
|
|
23987
|
+
const cardRef = React80.useRef(null);
|
|
23988
|
+
const rect = useAnchorRect(anchor, open);
|
|
23989
|
+
const [pos, setPos] = React80.useState(null);
|
|
23990
|
+
const centered = open && !rect && fallbackCentered;
|
|
23991
|
+
React80.useLayoutEffect(() => {
|
|
23992
|
+
if (!open || !rect || !cardRef.current) {
|
|
23993
|
+
setPos(null);
|
|
23994
|
+
return;
|
|
23995
|
+
}
|
|
23996
|
+
const size = {
|
|
23997
|
+
w: cardRef.current.offsetWidth,
|
|
23998
|
+
h: cardRef.current.offsetHeight
|
|
23999
|
+
};
|
|
24000
|
+
setPos(placeCard(placement, rect, size));
|
|
24001
|
+
}, [open, rect, placement, children, title]);
|
|
24002
|
+
React80.useEffect(() => {
|
|
24003
|
+
if (!open) return;
|
|
24004
|
+
const onKey = (e) => {
|
|
24005
|
+
if (e.key === "Escape") onDismiss();
|
|
24006
|
+
};
|
|
24007
|
+
window.addEventListener("keydown", onKey);
|
|
24008
|
+
return () => window.removeEventListener("keydown", onKey);
|
|
24009
|
+
}, [open, onDismiss]);
|
|
24010
|
+
if (!open || typeof document === "undefined") return null;
|
|
24011
|
+
if (!rect && !centered) return null;
|
|
24012
|
+
const hasFooter = Boolean(onPrimary || onSecondary);
|
|
24013
|
+
const cardStyle = centered ? { top: "50%", left: "50%", transform: "translate(-50%, -50%)" } : pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 };
|
|
24014
|
+
const card = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
24015
|
+
exports.Box,
|
|
24016
|
+
{
|
|
24017
|
+
ref: cardRef,
|
|
24018
|
+
bg: "surface",
|
|
24019
|
+
border: true,
|
|
24020
|
+
rounded: "lg",
|
|
24021
|
+
shadow: "xl",
|
|
24022
|
+
padding: "md",
|
|
24023
|
+
role: "dialog",
|
|
24024
|
+
"aria-label": title,
|
|
24025
|
+
className: cn(
|
|
24026
|
+
"fixed z-50 max-w-xs w-72 transition-opacity duration-150",
|
|
24027
|
+
centered || pos ? "opacity-100" : "opacity-0",
|
|
24028
|
+
className
|
|
24029
|
+
),
|
|
24030
|
+
style: cardStyle,
|
|
24031
|
+
children: [
|
|
24032
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
24033
|
+
"button",
|
|
24034
|
+
{
|
|
24035
|
+
type: "button",
|
|
24036
|
+
"aria-label": "Dismiss",
|
|
24037
|
+
onClick: onDismiss,
|
|
24038
|
+
className: "absolute top-2 right-2 text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
|
|
24039
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "close", size: "xs" })
|
|
24040
|
+
}
|
|
24041
|
+
),
|
|
24042
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body1", weight: "semibold", className: "pr-6 mb-1", children: title }),
|
|
24043
|
+
/* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body2", color: "muted", as: "div", children }),
|
|
24044
|
+
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-end gap-2", children: [
|
|
24045
|
+
onSecondary && /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", onClick: onSecondary, children: secondaryLabel ?? "Skip" }),
|
|
24046
|
+
onPrimary && /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "primary", size: "sm", onClick: onPrimary, children: primaryLabel ?? "Got it" })
|
|
24047
|
+
] })
|
|
24048
|
+
]
|
|
24049
|
+
}
|
|
24050
|
+
);
|
|
24051
|
+
const beacon = showBeacon && rect ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
24052
|
+
"div",
|
|
24053
|
+
{
|
|
24054
|
+
className: "fixed z-50 pointer-events-none",
|
|
24055
|
+
style: {
|
|
24056
|
+
top: rect.top + rect.height / 2 - 6,
|
|
24057
|
+
left: rect.left + rect.width / 2 - 6
|
|
24058
|
+
},
|
|
24059
|
+
"aria-hidden": "true",
|
|
24060
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-3 w-3", children: [
|
|
24061
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" }),
|
|
24062
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex h-3 w-3 rounded-full bg-[var(--color-primary)]" })
|
|
24063
|
+
] })
|
|
24064
|
+
}
|
|
24065
|
+
) : null;
|
|
24066
|
+
return reactDom.createPortal(
|
|
24067
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
24068
|
+
beacon,
|
|
24069
|
+
card
|
|
24070
|
+
] }),
|
|
24071
|
+
document.body
|
|
24072
|
+
);
|
|
24073
|
+
};
|
|
24074
|
+
exports.Coachmark.displayName = "Coachmark";
|
|
24075
|
+
}
|
|
24076
|
+
});
|
|
24077
|
+
var DIM; exports.OnboardingSpotlight = void 0;
|
|
24078
|
+
var init_OnboardingSpotlight = __esm({
|
|
24079
|
+
"components/molecules/OnboardingSpotlight.tsx"() {
|
|
24080
|
+
"use client";
|
|
24081
|
+
init_Coachmark();
|
|
24082
|
+
init_cn();
|
|
24083
|
+
DIM = "fixed z-[45] bg-black/60";
|
|
24084
|
+
exports.OnboardingSpotlight = ({
|
|
24085
|
+
steps,
|
|
24086
|
+
stepIndex,
|
|
24087
|
+
onNext,
|
|
24088
|
+
onSkip,
|
|
24089
|
+
onFinish,
|
|
24090
|
+
cutoutPadding = 6
|
|
24091
|
+
}) => {
|
|
24092
|
+
const step = steps[stepIndex];
|
|
24093
|
+
const rect = useAnchorRect(step?.anchor ?? "", Boolean(step));
|
|
24094
|
+
if (!step || typeof document === "undefined") return null;
|
|
24095
|
+
const isLast = stepIndex >= steps.length - 1;
|
|
24096
|
+
const backdrop = rect ? (() => {
|
|
24097
|
+
const p2 = cutoutPadding;
|
|
24098
|
+
const top = Math.max(0, rect.top - p2);
|
|
24099
|
+
const left = Math.max(0, rect.left - p2);
|
|
24100
|
+
const right = rect.right + p2;
|
|
24101
|
+
const bottom = rect.bottom + p2;
|
|
24102
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
24103
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top: 0, left: 0, right: 0, height: top } }),
|
|
24104
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top: bottom, left: 0, right: 0, bottom: 0 } }),
|
|
24105
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top, left: 0, width: left, height: bottom - top } }),
|
|
24106
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top, left: right, right: 0, height: bottom - top } })
|
|
24107
|
+
] });
|
|
24108
|
+
})() : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DIM, "inset-0") });
|
|
24109
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
24110
|
+
reactDom.createPortal(backdrop, document.body),
|
|
24111
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
24112
|
+
exports.Coachmark,
|
|
24113
|
+
{
|
|
24114
|
+
open: true,
|
|
24115
|
+
anchor: step.anchor,
|
|
24116
|
+
placement: step.placement ?? "bottom",
|
|
24117
|
+
fallbackCentered: true,
|
|
24118
|
+
title: step.title,
|
|
24119
|
+
onDismiss: onSkip,
|
|
24120
|
+
onSecondary: onSkip,
|
|
24121
|
+
secondaryLabel: "Skip",
|
|
24122
|
+
onPrimary: isLast ? onFinish : onNext,
|
|
24123
|
+
primaryLabel: isLast ? "Done" : "Next",
|
|
24124
|
+
children: [
|
|
24125
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: step.body }),
|
|
24126
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-3 flex items-center gap-1.5", children: steps.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
24127
|
+
"span",
|
|
24128
|
+
{
|
|
24129
|
+
className: cn(
|
|
24130
|
+
"h-1.5 w-1.5 rounded-full",
|
|
24131
|
+
i === stepIndex ? "bg-[var(--color-primary)]" : "bg-[var(--color-border)]"
|
|
24132
|
+
)
|
|
24133
|
+
},
|
|
24134
|
+
i
|
|
24135
|
+
)) })
|
|
24136
|
+
]
|
|
24137
|
+
}
|
|
24138
|
+
)
|
|
24139
|
+
] });
|
|
24140
|
+
};
|
|
24141
|
+
exports.OnboardingSpotlight.displayName = "OnboardingSpotlight";
|
|
24142
|
+
}
|
|
24143
|
+
});
|
|
23838
24144
|
function gateEnabled(level, ns = NAMESPACE) {
|
|
23839
24145
|
return logger.isLogLevelEnabled(level, ns);
|
|
23840
24146
|
}
|
|
@@ -34195,7 +34501,7 @@ var init_AvlPage = __esm({
|
|
|
34195
34501
|
AvlPage.displayName = "AvlPage";
|
|
34196
34502
|
}
|
|
34197
34503
|
});
|
|
34198
|
-
var NODE_W, NODE_H,
|
|
34504
|
+
var NODE_W, NODE_H, GAP2, ARROW_W, MiniStateMachine;
|
|
34199
34505
|
var init_MiniStateMachine = __esm({
|
|
34200
34506
|
"components/molecules/avl/MiniStateMachine.tsx"() {
|
|
34201
34507
|
"use client";
|
|
@@ -34204,7 +34510,7 @@ var init_MiniStateMachine = __esm({
|
|
|
34204
34510
|
init_types();
|
|
34205
34511
|
NODE_W = 24;
|
|
34206
34512
|
NODE_H = 16;
|
|
34207
|
-
|
|
34513
|
+
GAP2 = 8;
|
|
34208
34514
|
ARROW_W = 16;
|
|
34209
34515
|
MiniStateMachine = ({ data, className }) => {
|
|
34210
34516
|
const states = data.states;
|
|
@@ -34221,12 +34527,12 @@ var init_MiniStateMachine = __esm({
|
|
|
34221
34527
|
for (const e of t.effects) effectTypes.add(e.type);
|
|
34222
34528
|
}
|
|
34223
34529
|
const effectList = Array.from(effectTypes).slice(0, 6);
|
|
34224
|
-
const totalW = states.length * NODE_W + (states.length - 1) * (
|
|
34530
|
+
const totalW = states.length * NODE_W + (states.length - 1) * (GAP2 + ARROW_W + GAP2);
|
|
34225
34531
|
const svgW = Math.max(totalW + 4, 60);
|
|
34226
34532
|
const svgH = NODE_H + (effectList.length > 0 ? 18 : 4);
|
|
34227
34533
|
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: svgW, height: svgH, viewBox: `0 0 ${svgW} ${svgH}`, className, children: [
|
|
34228
34534
|
states.map((s, i) => {
|
|
34229
|
-
const x = 2 + i * (NODE_W +
|
|
34535
|
+
const x = 2 + i * (NODE_W + GAP2 + ARROW_W + GAP2);
|
|
34230
34536
|
const tc = transitionCounts[s.name] ?? 0;
|
|
34231
34537
|
const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
|
|
34232
34538
|
return /* @__PURE__ */ jsxRuntime.jsxs(React80__namespace.default.Fragment, { children: [
|
|
@@ -34247,9 +34553,9 @@ var init_MiniStateMachine = __esm({
|
|
|
34247
34553
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
34248
34554
|
"line",
|
|
34249
34555
|
{
|
|
34250
|
-
x1: x + NODE_W +
|
|
34556
|
+
x1: x + NODE_W + GAP2,
|
|
34251
34557
|
y1: NODE_H / 2,
|
|
34252
|
-
x2: x + NODE_W +
|
|
34558
|
+
x2: x + NODE_W + GAP2 + ARROW_W - 3,
|
|
34253
34559
|
y2: NODE_H / 2,
|
|
34254
34560
|
stroke: "var(--color-muted-foreground)",
|
|
34255
34561
|
strokeWidth: 1,
|
|
@@ -34259,7 +34565,7 @@ var init_MiniStateMachine = __esm({
|
|
|
34259
34565
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
34260
34566
|
"polygon",
|
|
34261
34567
|
{
|
|
34262
|
-
points: `${x + NODE_W +
|
|
34568
|
+
points: `${x + NODE_W + GAP2 + ARROW_W - 3},${NODE_H / 2 - 2.5} ${x + NODE_W + GAP2 + ARROW_W},${NODE_H / 2} ${x + NODE_W + GAP2 + ARROW_W - 3},${NODE_H / 2 + 2.5}`,
|
|
34263
34569
|
fill: "var(--color-muted-foreground)",
|
|
34264
34570
|
opacity: 0.4
|
|
34265
34571
|
}
|
|
@@ -34406,6 +34712,8 @@ var init_molecules = __esm({
|
|
|
34406
34712
|
init_Modal();
|
|
34407
34713
|
init_Pagination();
|
|
34408
34714
|
init_Popover();
|
|
34715
|
+
init_Coachmark();
|
|
34716
|
+
init_OnboardingSpotlight();
|
|
34409
34717
|
init_RelationSelect();
|
|
34410
34718
|
init_SearchInput();
|
|
34411
34719
|
init_SidePanel();
|
|
@@ -50820,6 +51128,7 @@ exports.transitionAnimation = transitionAnimation;
|
|
|
50820
51128
|
exports.updateEntity = updateEntity;
|
|
50821
51129
|
exports.updateSingleton = updateSingleton;
|
|
50822
51130
|
exports.useAgentChat = useAgentChat;
|
|
51131
|
+
exports.useAnchorRect = useAnchorRect;
|
|
50823
51132
|
exports.useAuthContext = useAuthContext;
|
|
50824
51133
|
exports.useBattleState = useBattleState;
|
|
50825
51134
|
exports.useCamera = useCamera;
|