@refraction-ui/react 0.13.0 → 0.15.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.
- package/dist/index.cjs +4244 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +32 -0
- package/dist/index.d.ts +32 -0
- package/dist/index.js +4199 -3
- package/dist/index.js.map +1 -1
- package/dist/internal/audio-room/index.d.ts +91 -0
- package/dist/internal/browser-chrome-mock/index.d.ts +57 -0
- package/dist/internal/call-controls/index.d.ts +83 -0
- package/dist/internal/checklist/index.d.ts +84 -0
- package/dist/internal/editor-status-bar/index.d.ts +70 -0
- package/dist/internal/editor-tabs/index.d.ts +68 -0
- package/dist/internal/floating-reactions/index.d.ts +98 -0
- package/dist/internal/flow-editor/index.d.ts +91 -0
- package/dist/internal/graph-view/index.d.ts +107 -0
- package/dist/internal/infinite-canvas/index.d.ts +74 -0
- package/dist/internal/live-captions/index.d.ts +59 -0
- package/dist/internal/live-cursors/index.d.ts +65 -0
- package/dist/internal/live-transcript/index.d.ts +73 -0
- package/dist/internal/mastery-bar/index.d.ts +60 -0
- package/dist/internal/mini-map/index.d.ts +81 -0
- package/dist/internal/numbered-steps/index.d.ts +71 -0
- package/dist/internal/pre-call-lobby/index.d.ts +97 -0
- package/dist/internal/pricing-card/index.d.ts +61 -0
- package/dist/internal/radial-gauge/index.d.ts +120 -0
- package/dist/internal/rating-scale/index.d.ts +76 -0
- package/dist/internal/react-audience-feature-card/index.d.ts +22 -0
- package/dist/internal/react-audio-room/index.d.ts +39 -0
- package/dist/internal/react-brand-network-cell/index.d.ts +30 -0
- package/dist/internal/react-browser-chrome-mock/index.d.ts +21 -0
- package/dist/internal/react-call-controls/index.d.ts +44 -0
- package/dist/internal/react-checklist/index.d.ts +27 -0
- package/dist/internal/react-editor-status-bar/index.d.ts +43 -0
- package/dist/internal/react-editor-tabs/index.d.ts +25 -0
- package/dist/internal/react-floating-reactions/index.d.ts +65 -0
- package/dist/internal/react-flow-editor/index.d.ts +35 -0
- package/dist/internal/react-graph-view/index.d.ts +25 -0
- package/dist/internal/react-infinite-canvas/index.d.ts +40 -0
- package/dist/internal/react-live-captions/index.d.ts +29 -0
- package/dist/internal/react-live-cursors/index.d.ts +42 -0
- package/dist/internal/react-live-transcript/index.d.ts +22 -0
- package/dist/internal/react-marquee-strip/index.d.ts +33 -0
- package/dist/internal/react-mastery-bar/index.d.ts +26 -0
- package/dist/internal/react-mini-map/index.d.ts +35 -0
- package/dist/internal/react-numbered-steps/index.d.ts +24 -0
- package/dist/internal/react-pre-call-lobby/index.d.ts +47 -0
- package/dist/internal/react-pricing-card/index.d.ts +40 -0
- package/dist/internal/react-radial-gauge/index.d.ts +43 -0
- package/dist/internal/react-rating-scale/index.d.ts +38 -0
- package/dist/internal/react-section-head/index.d.ts +27 -0
- package/dist/internal/react-stat-grid/index.d.ts +29 -0
- package/dist/internal/react-sticky-note/index.d.ts +39 -0
- package/dist/internal/react-terminal/index.d.ts +39 -0
- package/dist/internal/react-test-results/index.d.ts +21 -0
- package/dist/internal/react-timeline/index.d.ts +35 -0
- package/dist/internal/react-video-grid/index.d.ts +33 -0
- package/dist/internal/react-video-tile/index.d.ts +41 -0
- package/dist/internal/react-wizard/index.d.ts +59 -0
- package/dist/internal/section-head/index.d.ts +36 -0
- package/dist/internal/stat-grid/index.d.ts +45 -0
- package/dist/internal/sticky-note/index.d.ts +49 -0
- package/dist/internal/terminal/index.d.ts +65 -0
- package/dist/internal/test-results/index.d.ts +97 -0
- package/dist/internal/timeline/index.d.ts +111 -0
- package/dist/internal/video-grid/index.d.ts +83 -0
- package/dist/internal/video-tile/index.d.ts +88 -0
- package/dist/internal/wizard/index.d.ts +148 -0
- package/package.json +33 -1
package/dist/index.cjs
CHANGED
|
@@ -30193,13 +30193,13 @@ function createAnimatedText(props) {
|
|
|
30193
30193
|
if (words.length === 0) return "";
|
|
30194
30194
|
return words[state.currentIndex];
|
|
30195
30195
|
}
|
|
30196
|
-
function
|
|
30196
|
+
function getNextIndex2() {
|
|
30197
30197
|
if (words.length === 0) return 0;
|
|
30198
30198
|
return (state.currentIndex + 1) % words.length;
|
|
30199
30199
|
}
|
|
30200
30200
|
return {
|
|
30201
30201
|
getCurrentWord,
|
|
30202
|
-
getNextIndex,
|
|
30202
|
+
getNextIndex: getNextIndex2,
|
|
30203
30203
|
state
|
|
30204
30204
|
};
|
|
30205
30205
|
}
|
|
@@ -43615,6 +43615,164 @@ function RadioItem({ value, children, disabled = false, className }) {
|
|
|
43615
43615
|
RadioGroup.displayName = "RadioGroup";
|
|
43616
43616
|
RadioItem.displayName = "RadioItem";
|
|
43617
43617
|
|
|
43618
|
+
// ../rating-scale/dist/index.js
|
|
43619
|
+
function createRatingScale(props = {}) {
|
|
43620
|
+
const { value, size = "md" } = props;
|
|
43621
|
+
const ariaProps = {
|
|
43622
|
+
role: "radiogroup"
|
|
43623
|
+
};
|
|
43624
|
+
const dataAttributes = {
|
|
43625
|
+
"data-size": size
|
|
43626
|
+
};
|
|
43627
|
+
if (value !== void 0) {
|
|
43628
|
+
dataAttributes["data-value"] = String(value);
|
|
43629
|
+
}
|
|
43630
|
+
return { ariaProps, dataAttributes };
|
|
43631
|
+
}
|
|
43632
|
+
function resolveRatingPoints(points, count = 5) {
|
|
43633
|
+
if (points && points.length > 0) return points;
|
|
43634
|
+
return Array.from({ length: Math.max(0, count) }, (_2, i2) => ({ value: i2 + 1 }));
|
|
43635
|
+
}
|
|
43636
|
+
function getNextRatingIndex(current, key, count) {
|
|
43637
|
+
if (count <= 0) return current;
|
|
43638
|
+
switch (key) {
|
|
43639
|
+
case "ArrowRight":
|
|
43640
|
+
case "ArrowUp":
|
|
43641
|
+
return Math.min(current + 1, count - 1);
|
|
43642
|
+
case "ArrowLeft":
|
|
43643
|
+
case "ArrowDown":
|
|
43644
|
+
return Math.max(current - 1, 0);
|
|
43645
|
+
case "Home":
|
|
43646
|
+
return 0;
|
|
43647
|
+
case "End":
|
|
43648
|
+
return count - 1;
|
|
43649
|
+
default:
|
|
43650
|
+
return current;
|
|
43651
|
+
}
|
|
43652
|
+
}
|
|
43653
|
+
var ratingScaleVariants = cva({
|
|
43654
|
+
base: "inline-flex items-center gap-3",
|
|
43655
|
+
variants: {
|
|
43656
|
+
size: {
|
|
43657
|
+
sm: "",
|
|
43658
|
+
md: ""
|
|
43659
|
+
}
|
|
43660
|
+
},
|
|
43661
|
+
defaultVariants: {
|
|
43662
|
+
size: "md"
|
|
43663
|
+
}
|
|
43664
|
+
});
|
|
43665
|
+
var ratingScaleTrackClass = "inline-flex items-center gap-1.5";
|
|
43666
|
+
var ratingScaleItemVariants = cva({
|
|
43667
|
+
base: [
|
|
43668
|
+
"inline-flex items-center justify-center rounded-md border font-medium tabular-nums",
|
|
43669
|
+
"transition-colors focus-visible:outline-none focus-visible:ring-2",
|
|
43670
|
+
"focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
43671
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
43672
|
+
].join(" "),
|
|
43673
|
+
variants: {
|
|
43674
|
+
size: {
|
|
43675
|
+
sm: "size-8 text-xs",
|
|
43676
|
+
md: "size-10 text-sm"
|
|
43677
|
+
},
|
|
43678
|
+
state: {
|
|
43679
|
+
checked: "border-primary bg-primary text-primary-foreground",
|
|
43680
|
+
unchecked: "border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground"
|
|
43681
|
+
}
|
|
43682
|
+
},
|
|
43683
|
+
defaultVariants: {
|
|
43684
|
+
size: "md",
|
|
43685
|
+
state: "unchecked"
|
|
43686
|
+
}
|
|
43687
|
+
});
|
|
43688
|
+
var ratingScaleLabelClass = "text-xs text-muted-foreground";
|
|
43689
|
+
var RatingScale = React11__namespace.forwardRef(
|
|
43690
|
+
({
|
|
43691
|
+
value: valueProp,
|
|
43692
|
+
defaultValue,
|
|
43693
|
+
onValueChange,
|
|
43694
|
+
count = 5,
|
|
43695
|
+
points,
|
|
43696
|
+
minLabel,
|
|
43697
|
+
maxLabel,
|
|
43698
|
+
size = "md",
|
|
43699
|
+
disabled = false,
|
|
43700
|
+
className,
|
|
43701
|
+
...props
|
|
43702
|
+
}, ref) => {
|
|
43703
|
+
const resolved = React11__namespace.useMemo(
|
|
43704
|
+
() => resolveRatingPoints(points, count),
|
|
43705
|
+
[points, count]
|
|
43706
|
+
);
|
|
43707
|
+
const isControlled = valueProp !== void 0;
|
|
43708
|
+
const [internal, setInternal] = React11__namespace.useState(
|
|
43709
|
+
defaultValue
|
|
43710
|
+
);
|
|
43711
|
+
const value = isControlled ? valueProp : internal;
|
|
43712
|
+
const btnRefs = React11__namespace.useRef([]);
|
|
43713
|
+
const select = React11__namespace.useCallback(
|
|
43714
|
+
(next) => {
|
|
43715
|
+
if (!isControlled) setInternal(next);
|
|
43716
|
+
onValueChange?.(next);
|
|
43717
|
+
},
|
|
43718
|
+
[isControlled, onValueChange]
|
|
43719
|
+
);
|
|
43720
|
+
const selectedIndex = resolved.findIndex((p2) => p2.value === value);
|
|
43721
|
+
const tabbableIndex = selectedIndex === -1 ? 0 : selectedIndex;
|
|
43722
|
+
const handleKeyDown = (event, index) => {
|
|
43723
|
+
const target = getNextRatingIndex(index, event.key, resolved.length);
|
|
43724
|
+
if (target !== index) {
|
|
43725
|
+
event.preventDefault();
|
|
43726
|
+
select(resolved[target].value);
|
|
43727
|
+
btnRefs.current[target]?.focus();
|
|
43728
|
+
}
|
|
43729
|
+
};
|
|
43730
|
+
const api = createRatingScale({ value, size });
|
|
43731
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
43732
|
+
"div",
|
|
43733
|
+
{
|
|
43734
|
+
ref,
|
|
43735
|
+
className: cn(ratingScaleVariants({ size }), className),
|
|
43736
|
+
"aria-disabled": disabled || void 0,
|
|
43737
|
+
...api.ariaProps,
|
|
43738
|
+
...api.dataAttributes,
|
|
43739
|
+
...props,
|
|
43740
|
+
children: [
|
|
43741
|
+
minLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ratingScaleLabelClass, children: minLabel }),
|
|
43742
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: ratingScaleTrackClass, children: resolved.map((point, index) => {
|
|
43743
|
+
const checked = point.value === value;
|
|
43744
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
43745
|
+
"button",
|
|
43746
|
+
{
|
|
43747
|
+
ref: (node) => {
|
|
43748
|
+
btnRefs.current[index] = node;
|
|
43749
|
+
},
|
|
43750
|
+
type: "button",
|
|
43751
|
+
role: "radio",
|
|
43752
|
+
"aria-checked": checked,
|
|
43753
|
+
"aria-label": point.label ?? String(point.value),
|
|
43754
|
+
tabIndex: index === tabbableIndex ? 0 : -1,
|
|
43755
|
+
disabled,
|
|
43756
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
43757
|
+
className: ratingScaleItemVariants({
|
|
43758
|
+
size,
|
|
43759
|
+
state: checked ? "checked" : "unchecked"
|
|
43760
|
+
}),
|
|
43761
|
+
onClick: () => select(point.value),
|
|
43762
|
+
onKeyDown: (e2) => handleKeyDown(e2, index),
|
|
43763
|
+
children: point.label ?? point.value
|
|
43764
|
+
},
|
|
43765
|
+
point.value
|
|
43766
|
+
);
|
|
43767
|
+
}) }),
|
|
43768
|
+
maxLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ratingScaleLabelClass, children: maxLabel })
|
|
43769
|
+
]
|
|
43770
|
+
}
|
|
43771
|
+
);
|
|
43772
|
+
}
|
|
43773
|
+
);
|
|
43774
|
+
RatingScale.displayName = "RatingScale";
|
|
43775
|
+
|
|
43618
43776
|
// ../reaction-bar/dist/index.js
|
|
43619
43777
|
function createReactionBar(props) {
|
|
43620
43778
|
const { reactions, onToggle, onAdd } = props;
|
|
@@ -47730,6 +47888,4044 @@ var EmptyState = React11__namespace.forwardRef(
|
|
|
47730
47888
|
EmptyState.displayName = "EmptyState";
|
|
47731
47889
|
var ConfirmationCard = React11__namespace.forwardRef(({ bordered = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { ref, bordered, ...props }));
|
|
47732
47890
|
ConfirmationCard.displayName = "ConfirmationCard";
|
|
47891
|
+
|
|
47892
|
+
// ../wizard/dist/index.js
|
|
47893
|
+
function getStepState(steps, currentIndex) {
|
|
47894
|
+
return steps.map((step, index) => {
|
|
47895
|
+
let status;
|
|
47896
|
+
if (index < currentIndex) {
|
|
47897
|
+
status = "complete";
|
|
47898
|
+
} else if (index === currentIndex) {
|
|
47899
|
+
status = "current";
|
|
47900
|
+
} else {
|
|
47901
|
+
status = "upcoming";
|
|
47902
|
+
}
|
|
47903
|
+
return { step, status, index };
|
|
47904
|
+
});
|
|
47905
|
+
}
|
|
47906
|
+
function getNextIndex(currentIndex, count) {
|
|
47907
|
+
if (count <= 0) return currentIndex;
|
|
47908
|
+
return Math.min(currentIndex + 1, count - 1);
|
|
47909
|
+
}
|
|
47910
|
+
function getPrevIndex(currentIndex) {
|
|
47911
|
+
return Math.max(currentIndex - 1, 0);
|
|
47912
|
+
}
|
|
47913
|
+
function canAdvance(currentIndex, count) {
|
|
47914
|
+
if (count <= 0) return false;
|
|
47915
|
+
return currentIndex < count - 1;
|
|
47916
|
+
}
|
|
47917
|
+
function createWizard(props = {}) {
|
|
47918
|
+
const { currentIndex = 0, count = 0, orientation = "vertical" } = props;
|
|
47919
|
+
const ariaProps = {
|
|
47920
|
+
role: "group"
|
|
47921
|
+
};
|
|
47922
|
+
const dataAttributes = {
|
|
47923
|
+
"data-step": String(currentIndex),
|
|
47924
|
+
"data-orientation": orientation
|
|
47925
|
+
};
|
|
47926
|
+
if (count > 0) {
|
|
47927
|
+
dataAttributes["data-count"] = String(count);
|
|
47928
|
+
}
|
|
47929
|
+
return { ariaProps, dataAttributes };
|
|
47930
|
+
}
|
|
47931
|
+
var wizardVariants = cva({
|
|
47932
|
+
base: "flex gap-8",
|
|
47933
|
+
variants: {
|
|
47934
|
+
orientation: {
|
|
47935
|
+
vertical: "flex-row",
|
|
47936
|
+
horizontal: "flex-col"
|
|
47937
|
+
}
|
|
47938
|
+
},
|
|
47939
|
+
defaultVariants: {
|
|
47940
|
+
orientation: "vertical"
|
|
47941
|
+
}
|
|
47942
|
+
});
|
|
47943
|
+
var wizardRailVariants = cva({
|
|
47944
|
+
base: "flex shrink-0",
|
|
47945
|
+
variants: {
|
|
47946
|
+
orientation: {
|
|
47947
|
+
vertical: "flex-col gap-0",
|
|
47948
|
+
horizontal: "flex-row items-center gap-0"
|
|
47949
|
+
}
|
|
47950
|
+
},
|
|
47951
|
+
defaultVariants: {
|
|
47952
|
+
orientation: "vertical"
|
|
47953
|
+
}
|
|
47954
|
+
});
|
|
47955
|
+
var wizardStepItemVariants = cva({
|
|
47956
|
+
base: "flex items-center gap-3 relative",
|
|
47957
|
+
variants: {
|
|
47958
|
+
orientation: {
|
|
47959
|
+
vertical: "flex-row",
|
|
47960
|
+
horizontal: "flex-col"
|
|
47961
|
+
},
|
|
47962
|
+
status: {
|
|
47963
|
+
complete: "",
|
|
47964
|
+
current: "",
|
|
47965
|
+
upcoming: ""
|
|
47966
|
+
}
|
|
47967
|
+
},
|
|
47968
|
+
defaultVariants: {
|
|
47969
|
+
orientation: "vertical",
|
|
47970
|
+
status: "upcoming"
|
|
47971
|
+
}
|
|
47972
|
+
});
|
|
47973
|
+
var wizardStepIndicatorVariants = cva({
|
|
47974
|
+
base: [
|
|
47975
|
+
"relative z-10 flex size-8 shrink-0 items-center justify-center",
|
|
47976
|
+
"rounded-full border-2 text-xs font-semibold transition-colors"
|
|
47977
|
+
].join(" "),
|
|
47978
|
+
variants: {
|
|
47979
|
+
status: {
|
|
47980
|
+
complete: "border-primary bg-primary text-primary-foreground",
|
|
47981
|
+
current: "border-primary bg-background text-primary",
|
|
47982
|
+
upcoming: "border-border bg-background text-muted-foreground"
|
|
47983
|
+
}
|
|
47984
|
+
},
|
|
47985
|
+
defaultVariants: {
|
|
47986
|
+
status: "upcoming"
|
|
47987
|
+
}
|
|
47988
|
+
});
|
|
47989
|
+
var wizardStepLabelVariants = cva({
|
|
47990
|
+
base: "text-sm font-medium transition-colors",
|
|
47991
|
+
variants: {
|
|
47992
|
+
status: {
|
|
47993
|
+
complete: "text-foreground",
|
|
47994
|
+
current: "text-foreground",
|
|
47995
|
+
upcoming: "text-muted-foreground"
|
|
47996
|
+
}
|
|
47997
|
+
},
|
|
47998
|
+
defaultVariants: {
|
|
47999
|
+
status: "upcoming"
|
|
48000
|
+
}
|
|
48001
|
+
});
|
|
48002
|
+
var wizardStepOptionalClass = "text-xs text-muted-foreground";
|
|
48003
|
+
var wizardConnectorVariants = cva({
|
|
48004
|
+
base: "shrink-0 transition-colors",
|
|
48005
|
+
variants: {
|
|
48006
|
+
orientation: {
|
|
48007
|
+
vertical: "mx-4 w-0.5 flex-1 min-h-[1.5rem]",
|
|
48008
|
+
horizontal: "my-4 h-0.5 flex-1 min-w-[1.5rem]"
|
|
48009
|
+
},
|
|
48010
|
+
complete: {
|
|
48011
|
+
true: "bg-primary",
|
|
48012
|
+
false: "bg-border"
|
|
48013
|
+
}
|
|
48014
|
+
},
|
|
48015
|
+
defaultVariants: {
|
|
48016
|
+
orientation: "vertical",
|
|
48017
|
+
complete: "false"
|
|
48018
|
+
}
|
|
48019
|
+
});
|
|
48020
|
+
var wizardContentClass = "flex min-w-0 flex-1 flex-col";
|
|
48021
|
+
var wizardFooterClass = "mt-6 flex items-center gap-3";
|
|
48022
|
+
var wizardPrimaryButtonVariants = cva({
|
|
48023
|
+
base: [
|
|
48024
|
+
"inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
|
|
48025
|
+
"bg-primary text-primary-foreground transition-colors",
|
|
48026
|
+
"hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2",
|
|
48027
|
+
"focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
48028
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
48029
|
+
].join(" ")
|
|
48030
|
+
});
|
|
48031
|
+
var wizardSecondaryButtonVariants = cva({
|
|
48032
|
+
base: [
|
|
48033
|
+
"inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
|
|
48034
|
+
"border border-input bg-background text-foreground transition-colors",
|
|
48035
|
+
"hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2",
|
|
48036
|
+
"focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
48037
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
48038
|
+
].join(" ")
|
|
48039
|
+
});
|
|
48040
|
+
var WizardContext = React11__namespace.createContext(null);
|
|
48041
|
+
function useWizardContext() {
|
|
48042
|
+
const ctx = React11__namespace.useContext(WizardContext);
|
|
48043
|
+
if (!ctx) throw new Error("useWizardContext must be used inside <Wizard>");
|
|
48044
|
+
return ctx;
|
|
48045
|
+
}
|
|
48046
|
+
var Wizard = React11__namespace.forwardRef(
|
|
48047
|
+
({
|
|
48048
|
+
steps,
|
|
48049
|
+
step: stepProp,
|
|
48050
|
+
defaultStep = 0,
|
|
48051
|
+
onStepChange,
|
|
48052
|
+
onComplete,
|
|
48053
|
+
orientation = "vertical",
|
|
48054
|
+
nextLabel = "Next",
|
|
48055
|
+
backLabel = "Back",
|
|
48056
|
+
completeLabel = "Complete",
|
|
48057
|
+
skipLabel = "Skip",
|
|
48058
|
+
children,
|
|
48059
|
+
className,
|
|
48060
|
+
...props
|
|
48061
|
+
}, ref) => {
|
|
48062
|
+
const isControlled = stepProp !== void 0;
|
|
48063
|
+
const [internal, setInternal] = React11__namespace.useState(defaultStep);
|
|
48064
|
+
const currentIndex = isControlled ? stepProp : internal;
|
|
48065
|
+
const advance = React11__namespace.useCallback(() => {
|
|
48066
|
+
if (!canAdvance(currentIndex, steps.length)) {
|
|
48067
|
+
onComplete?.();
|
|
48068
|
+
return;
|
|
48069
|
+
}
|
|
48070
|
+
const next = getNextIndex(currentIndex, steps.length);
|
|
48071
|
+
if (!isControlled) setInternal(next);
|
|
48072
|
+
onStepChange?.(next);
|
|
48073
|
+
}, [currentIndex, steps.length, isControlled, onStepChange, onComplete]);
|
|
48074
|
+
const back = React11__namespace.useCallback(() => {
|
|
48075
|
+
if (currentIndex === 0) return;
|
|
48076
|
+
const prev = getPrevIndex(currentIndex);
|
|
48077
|
+
if (!isControlled) setInternal(prev);
|
|
48078
|
+
onStepChange?.(prev);
|
|
48079
|
+
}, [currentIndex, isControlled, onStepChange]);
|
|
48080
|
+
const skip = React11__namespace.useCallback(() => {
|
|
48081
|
+
advance();
|
|
48082
|
+
}, [advance]);
|
|
48083
|
+
const stepStates = React11__namespace.useMemo(
|
|
48084
|
+
() => getStepState(steps, currentIndex),
|
|
48085
|
+
[steps, currentIndex]
|
|
48086
|
+
);
|
|
48087
|
+
const isLastStep = currentIndex === steps.length - 1;
|
|
48088
|
+
const currentStep = steps[currentIndex];
|
|
48089
|
+
const isOptional = currentStep?.optional ?? false;
|
|
48090
|
+
const api = createWizard({
|
|
48091
|
+
currentIndex,
|
|
48092
|
+
count: steps.length,
|
|
48093
|
+
orientation
|
|
48094
|
+
});
|
|
48095
|
+
return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.Provider, { value: { currentIndex, steps, orientation }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48096
|
+
"div",
|
|
48097
|
+
{
|
|
48098
|
+
ref,
|
|
48099
|
+
className: cn(wizardVariants({ orientation }), className),
|
|
48100
|
+
...api.ariaProps,
|
|
48101
|
+
...api.dataAttributes,
|
|
48102
|
+
...props,
|
|
48103
|
+
children: [
|
|
48104
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48105
|
+
"nav",
|
|
48106
|
+
{
|
|
48107
|
+
"aria-label": "Progress",
|
|
48108
|
+
className: wizardRailVariants({ orientation }),
|
|
48109
|
+
children: stepStates.map((state, i2) => {
|
|
48110
|
+
const isLast = i2 === stepStates.length - 1;
|
|
48111
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React11__namespace.Fragment, { children: [
|
|
48112
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
48113
|
+
"div",
|
|
48114
|
+
{
|
|
48115
|
+
className: wizardStepItemVariants({
|
|
48116
|
+
orientation,
|
|
48117
|
+
status: state.status
|
|
48118
|
+
}),
|
|
48119
|
+
children: [
|
|
48120
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48121
|
+
"span",
|
|
48122
|
+
{
|
|
48123
|
+
"aria-current": state.status === "current" ? "step" : void 0,
|
|
48124
|
+
className: wizardStepIndicatorVariants({ status: state.status }),
|
|
48125
|
+
children: state.status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, {}) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: state.index + 1 })
|
|
48126
|
+
}
|
|
48127
|
+
),
|
|
48128
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
48129
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48130
|
+
"span",
|
|
48131
|
+
{
|
|
48132
|
+
className: wizardStepLabelVariants({ status: state.status }),
|
|
48133
|
+
children: state.step.label
|
|
48134
|
+
}
|
|
48135
|
+
),
|
|
48136
|
+
state.step.optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: wizardStepOptionalClass, children: "(Optional)" })
|
|
48137
|
+
] })
|
|
48138
|
+
]
|
|
48139
|
+
}
|
|
48140
|
+
),
|
|
48141
|
+
!isLast && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48142
|
+
"div",
|
|
48143
|
+
{
|
|
48144
|
+
"aria-hidden": "true",
|
|
48145
|
+
className: wizardConnectorVariants({
|
|
48146
|
+
orientation,
|
|
48147
|
+
complete: state.status === "complete" ? "true" : "false"
|
|
48148
|
+
})
|
|
48149
|
+
}
|
|
48150
|
+
)
|
|
48151
|
+
] }, state.step.id);
|
|
48152
|
+
})
|
|
48153
|
+
}
|
|
48154
|
+
),
|
|
48155
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: wizardContentClass, children: [
|
|
48156
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: typeof children === "function" ? children(currentIndex) : children }),
|
|
48157
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: wizardFooterClass, children: [
|
|
48158
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48159
|
+
"button",
|
|
48160
|
+
{
|
|
48161
|
+
type: "button",
|
|
48162
|
+
disabled: currentIndex === 0,
|
|
48163
|
+
className: wizardSecondaryButtonVariants(),
|
|
48164
|
+
onClick: back,
|
|
48165
|
+
children: backLabel
|
|
48166
|
+
}
|
|
48167
|
+
),
|
|
48168
|
+
isOptional && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48169
|
+
"button",
|
|
48170
|
+
{
|
|
48171
|
+
type: "button",
|
|
48172
|
+
className: wizardSecondaryButtonVariants(),
|
|
48173
|
+
onClick: skip,
|
|
48174
|
+
children: skipLabel
|
|
48175
|
+
}
|
|
48176
|
+
),
|
|
48177
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48178
|
+
"button",
|
|
48179
|
+
{
|
|
48180
|
+
type: "button",
|
|
48181
|
+
className: wizardPrimaryButtonVariants(),
|
|
48182
|
+
onClick: advance,
|
|
48183
|
+
children: isLastStep ? completeLabel : nextLabel
|
|
48184
|
+
}
|
|
48185
|
+
)
|
|
48186
|
+
] })
|
|
48187
|
+
] })
|
|
48188
|
+
]
|
|
48189
|
+
}
|
|
48190
|
+
) });
|
|
48191
|
+
}
|
|
48192
|
+
);
|
|
48193
|
+
Wizard.displayName = "Wizard";
|
|
48194
|
+
function useWizard() {
|
|
48195
|
+
return useWizardContext();
|
|
48196
|
+
}
|
|
48197
|
+
function CheckIcon2() {
|
|
48198
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
48199
|
+
"svg",
|
|
48200
|
+
{
|
|
48201
|
+
"aria-hidden": "true",
|
|
48202
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
48203
|
+
viewBox: "0 0 24 24",
|
|
48204
|
+
fill: "none",
|
|
48205
|
+
stroke: "currentColor",
|
|
48206
|
+
strokeWidth: 2.5,
|
|
48207
|
+
strokeLinecap: "round",
|
|
48208
|
+
strokeLinejoin: "round",
|
|
48209
|
+
className: "size-4",
|
|
48210
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
|
|
48211
|
+
}
|
|
48212
|
+
);
|
|
48213
|
+
}
|
|
48214
|
+
|
|
48215
|
+
// ../radial-gauge/dist/index.js
|
|
48216
|
+
var GAUGE_SIZE_PX = {
|
|
48217
|
+
sm: 80,
|
|
48218
|
+
md: 120,
|
|
48219
|
+
lg: 160
|
|
48220
|
+
};
|
|
48221
|
+
function clampValue(value, min, max) {
|
|
48222
|
+
return Math.min(Math.max(value, min), max);
|
|
48223
|
+
}
|
|
48224
|
+
function valueToFraction(value, min, max) {
|
|
48225
|
+
if (max === min) return 0;
|
|
48226
|
+
return clampValue((value - min) / (max - min), 0, 1);
|
|
48227
|
+
}
|
|
48228
|
+
function gaugeStrokeDashoffset(fraction, circumference) {
|
|
48229
|
+
return circumference * (1 - fraction);
|
|
48230
|
+
}
|
|
48231
|
+
function resolveZoneTone(value, zones, _max) {
|
|
48232
|
+
if (!zones || zones.length === 0) return "default";
|
|
48233
|
+
const sorted = [...zones].sort((a2, b2) => a2.upTo - b2.upTo);
|
|
48234
|
+
for (const zone of sorted) {
|
|
48235
|
+
if (value <= zone.upTo) return zone.tone;
|
|
48236
|
+
}
|
|
48237
|
+
return sorted[sorted.length - 1].tone;
|
|
48238
|
+
}
|
|
48239
|
+
function createRadialGauge(props) {
|
|
48240
|
+
const { value, min = 0, max = 100, size = "md" } = props;
|
|
48241
|
+
const clamped = clampValue(value, min, max);
|
|
48242
|
+
const ariaProps = {
|
|
48243
|
+
role: "meter",
|
|
48244
|
+
"aria-valuenow": clamped,
|
|
48245
|
+
"aria-valuemin": min,
|
|
48246
|
+
"aria-valuemax": max
|
|
48247
|
+
};
|
|
48248
|
+
const dataAttributes = {
|
|
48249
|
+
"data-size": size,
|
|
48250
|
+
"data-value": String(clamped)
|
|
48251
|
+
};
|
|
48252
|
+
return { ariaProps, dataAttributes };
|
|
48253
|
+
}
|
|
48254
|
+
var radialGaugeRootVariants = cva({
|
|
48255
|
+
base: "inline-block shrink-0",
|
|
48256
|
+
variants: {
|
|
48257
|
+
size: {
|
|
48258
|
+
sm: "",
|
|
48259
|
+
md: "",
|
|
48260
|
+
lg: ""
|
|
48261
|
+
}
|
|
48262
|
+
},
|
|
48263
|
+
defaultVariants: {
|
|
48264
|
+
size: "md"
|
|
48265
|
+
}
|
|
48266
|
+
});
|
|
48267
|
+
var gaugeTrackClass = "fill-none stroke-muted-foreground/20";
|
|
48268
|
+
var gaugeArcClass = "fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out";
|
|
48269
|
+
var gaugeArcToneVariants = cva({
|
|
48270
|
+
base: "",
|
|
48271
|
+
variants: {
|
|
48272
|
+
tone: {
|
|
48273
|
+
default: "text-foreground",
|
|
48274
|
+
success: "text-emerald-500",
|
|
48275
|
+
warning: "text-amber-500",
|
|
48276
|
+
danger: "text-destructive"
|
|
48277
|
+
}
|
|
48278
|
+
},
|
|
48279
|
+
defaultVariants: {
|
|
48280
|
+
tone: "default"
|
|
48281
|
+
}
|
|
48282
|
+
});
|
|
48283
|
+
var gaugeLabelClass = "fill-foreground text-center font-semibold";
|
|
48284
|
+
var gaugeSublabelClass = "fill-muted-foreground";
|
|
48285
|
+
var GAUGE_LABEL_FONT_SIZE = {
|
|
48286
|
+
sm: 14,
|
|
48287
|
+
md: 20,
|
|
48288
|
+
lg: 26
|
|
48289
|
+
};
|
|
48290
|
+
var GAUGE_SUBLABEL_FONT_SIZE = {
|
|
48291
|
+
sm: 9,
|
|
48292
|
+
md: 11,
|
|
48293
|
+
lg: 13
|
|
48294
|
+
};
|
|
48295
|
+
var RadialGauge = React11__namespace.forwardRef(
|
|
48296
|
+
({
|
|
48297
|
+
value,
|
|
48298
|
+
min = 0,
|
|
48299
|
+
max = 100,
|
|
48300
|
+
size = "md",
|
|
48301
|
+
thickness = 8,
|
|
48302
|
+
label,
|
|
48303
|
+
sublabel,
|
|
48304
|
+
zones,
|
|
48305
|
+
showValue = true,
|
|
48306
|
+
className,
|
|
48307
|
+
...props
|
|
48308
|
+
}, ref) => {
|
|
48309
|
+
const diameter = GAUGE_SIZE_PX[size];
|
|
48310
|
+
const cx = diameter / 2;
|
|
48311
|
+
const cy = diameter / 2;
|
|
48312
|
+
const r2 = cx - thickness / 2;
|
|
48313
|
+
const clamped = clampValue(value, min, max);
|
|
48314
|
+
const fraction = valueToFraction(clamped, min, max);
|
|
48315
|
+
const circumference = 2 * Math.PI * r2;
|
|
48316
|
+
const dashoffset = gaugeStrokeDashoffset(fraction, circumference);
|
|
48317
|
+
const tone = zones && zones.length > 0 ? resolveZoneTone(clamped, zones) : "default";
|
|
48318
|
+
const api = createRadialGauge({ value, min, max, size });
|
|
48319
|
+
const centerLabel = label ?? (showValue ? String(clamped) : null);
|
|
48320
|
+
const labelFontSize = GAUGE_LABEL_FONT_SIZE[size];
|
|
48321
|
+
const sublabelFontSize = GAUGE_SUBLABEL_FONT_SIZE[size];
|
|
48322
|
+
const labelDy = sublabel ? -sublabelFontSize * 0.8 : 0;
|
|
48323
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48324
|
+
"svg",
|
|
48325
|
+
{
|
|
48326
|
+
ref,
|
|
48327
|
+
width: diameter,
|
|
48328
|
+
height: diameter,
|
|
48329
|
+
viewBox: `0 0 ${diameter} ${diameter}`,
|
|
48330
|
+
role: "meter",
|
|
48331
|
+
"aria-valuenow": Number(api.ariaProps["aria-valuenow"]),
|
|
48332
|
+
"aria-valuemin": Number(api.ariaProps["aria-valuemin"]),
|
|
48333
|
+
"aria-valuemax": Number(api.ariaProps["aria-valuemax"]),
|
|
48334
|
+
className: cn(radialGaugeRootVariants({ size }), className),
|
|
48335
|
+
...api.dataAttributes,
|
|
48336
|
+
...props,
|
|
48337
|
+
children: [
|
|
48338
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48339
|
+
"circle",
|
|
48340
|
+
{
|
|
48341
|
+
cx,
|
|
48342
|
+
cy,
|
|
48343
|
+
r: r2,
|
|
48344
|
+
strokeWidth: thickness,
|
|
48345
|
+
className: gaugeTrackClass
|
|
48346
|
+
}
|
|
48347
|
+
),
|
|
48348
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48349
|
+
"circle",
|
|
48350
|
+
{
|
|
48351
|
+
cx,
|
|
48352
|
+
cy,
|
|
48353
|
+
r: r2,
|
|
48354
|
+
strokeWidth: thickness,
|
|
48355
|
+
strokeDasharray: `${circumference} ${circumference}`,
|
|
48356
|
+
strokeDashoffset: dashoffset,
|
|
48357
|
+
strokeLinecap: "round",
|
|
48358
|
+
transform: `rotate(-90 ${cx} ${cy})`,
|
|
48359
|
+
className: cn(gaugeArcClass, gaugeArcToneVariants({ tone }))
|
|
48360
|
+
}
|
|
48361
|
+
),
|
|
48362
|
+
centerLabel != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48363
|
+
"text",
|
|
48364
|
+
{
|
|
48365
|
+
x: cx,
|
|
48366
|
+
y: cy,
|
|
48367
|
+
textAnchor: "middle",
|
|
48368
|
+
dominantBaseline: "central",
|
|
48369
|
+
fontSize: labelFontSize,
|
|
48370
|
+
dy: labelDy,
|
|
48371
|
+
className: gaugeLabelClass,
|
|
48372
|
+
children: centerLabel
|
|
48373
|
+
}
|
|
48374
|
+
),
|
|
48375
|
+
sublabel != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48376
|
+
"text",
|
|
48377
|
+
{
|
|
48378
|
+
x: cx,
|
|
48379
|
+
y: cy,
|
|
48380
|
+
textAnchor: "middle",
|
|
48381
|
+
dominantBaseline: "central",
|
|
48382
|
+
fontSize: sublabelFontSize,
|
|
48383
|
+
dy: labelDy + labelFontSize * 1.1,
|
|
48384
|
+
className: gaugeSublabelClass,
|
|
48385
|
+
children: sublabel
|
|
48386
|
+
}
|
|
48387
|
+
)
|
|
48388
|
+
]
|
|
48389
|
+
}
|
|
48390
|
+
);
|
|
48391
|
+
}
|
|
48392
|
+
);
|
|
48393
|
+
RadialGauge.displayName = "RadialGauge";
|
|
48394
|
+
|
|
48395
|
+
// ../timeline/dist/index.js
|
|
48396
|
+
function createTimeline(props = {}) {
|
|
48397
|
+
const { orientation = "vertical" } = props;
|
|
48398
|
+
const ariaProps = {
|
|
48399
|
+
role: "list"
|
|
48400
|
+
};
|
|
48401
|
+
const dataAttributes = {
|
|
48402
|
+
"data-orientation": orientation
|
|
48403
|
+
};
|
|
48404
|
+
return { ariaProps, dataAttributes };
|
|
48405
|
+
}
|
|
48406
|
+
function getTimelineItemAria() {
|
|
48407
|
+
return { role: "listitem" };
|
|
48408
|
+
}
|
|
48409
|
+
function resolveTimelineItems(items) {
|
|
48410
|
+
return items.map((item) => ({
|
|
48411
|
+
...item,
|
|
48412
|
+
status: item.status ?? "default",
|
|
48413
|
+
time: item.time ?? "",
|
|
48414
|
+
description: item.description ?? ""
|
|
48415
|
+
}));
|
|
48416
|
+
}
|
|
48417
|
+
var timelineVariants = cva({
|
|
48418
|
+
base: "relative",
|
|
48419
|
+
variants: {
|
|
48420
|
+
orientation: {
|
|
48421
|
+
vertical: "flex flex-col",
|
|
48422
|
+
horizontal: "flex flex-row items-start overflow-x-auto"
|
|
48423
|
+
}
|
|
48424
|
+
},
|
|
48425
|
+
defaultVariants: {
|
|
48426
|
+
orientation: "vertical"
|
|
48427
|
+
}
|
|
48428
|
+
});
|
|
48429
|
+
var timelineItemVariants = cva({
|
|
48430
|
+
base: "relative flex gap-4",
|
|
48431
|
+
variants: {
|
|
48432
|
+
orientation: {
|
|
48433
|
+
vertical: "flex-row pb-8 last:pb-0",
|
|
48434
|
+
horizontal: "flex-col items-center flex-1 px-2"
|
|
48435
|
+
}
|
|
48436
|
+
},
|
|
48437
|
+
defaultVariants: {
|
|
48438
|
+
orientation: "vertical"
|
|
48439
|
+
}
|
|
48440
|
+
});
|
|
48441
|
+
var timelineMarkerVariants = cva({
|
|
48442
|
+
base: [
|
|
48443
|
+
"relative z-10 flex shrink-0 items-center justify-center",
|
|
48444
|
+
"size-3 rounded-full border-2",
|
|
48445
|
+
"transition-colors"
|
|
48446
|
+
].join(" "),
|
|
48447
|
+
variants: {
|
|
48448
|
+
status: {
|
|
48449
|
+
done: "bg-primary border-primary",
|
|
48450
|
+
current: "bg-background border-primary ring-2 ring-primary ring-offset-2 ring-offset-background",
|
|
48451
|
+
upcoming: "bg-muted border-muted-foreground/30",
|
|
48452
|
+
default: "bg-background border-border"
|
|
48453
|
+
}
|
|
48454
|
+
},
|
|
48455
|
+
defaultVariants: {
|
|
48456
|
+
status: "default"
|
|
48457
|
+
}
|
|
48458
|
+
});
|
|
48459
|
+
var timelineConnectorVariants = cva({
|
|
48460
|
+
base: "absolute bg-border",
|
|
48461
|
+
variants: {
|
|
48462
|
+
orientation: {
|
|
48463
|
+
vertical: "left-[5px] top-3 w-0.5 h-full",
|
|
48464
|
+
horizontal: "top-[5px] left-1/2 w-full h-0.5"
|
|
48465
|
+
}
|
|
48466
|
+
},
|
|
48467
|
+
defaultVariants: {
|
|
48468
|
+
orientation: "vertical"
|
|
48469
|
+
}
|
|
48470
|
+
});
|
|
48471
|
+
var timelineGutterClass = "relative flex flex-col items-center";
|
|
48472
|
+
var timelineTimeClass = "text-xs text-muted-foreground tabular-nums";
|
|
48473
|
+
var timelineTitleClass = "text-sm font-medium text-foreground leading-snug";
|
|
48474
|
+
var timelineDescriptionClass = "mt-0.5 text-xs text-muted-foreground leading-relaxed";
|
|
48475
|
+
var timelineContentClass = "flex flex-col min-w-0";
|
|
48476
|
+
var TimelineItem = React11__namespace.forwardRef(
|
|
48477
|
+
({ item, orientation, isLast }, ref) => {
|
|
48478
|
+
const itemAria = getTimelineItemAria();
|
|
48479
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48480
|
+
"li",
|
|
48481
|
+
{
|
|
48482
|
+
ref,
|
|
48483
|
+
...itemAria,
|
|
48484
|
+
className: timelineItemVariants({ orientation }),
|
|
48485
|
+
"data-status": item.status,
|
|
48486
|
+
children: [
|
|
48487
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: timelineGutterClass, children: [
|
|
48488
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: timelineMarkerVariants({ status: item.status }) }),
|
|
48489
|
+
!isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: timelineConnectorVariants({ orientation }) })
|
|
48490
|
+
] }),
|
|
48491
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: timelineContentClass, children: [
|
|
48492
|
+
item.time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: timelineTimeClass, children: item.time }),
|
|
48493
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: timelineTitleClass, children: item.title }),
|
|
48494
|
+
item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: timelineDescriptionClass, children: item.description })
|
|
48495
|
+
] })
|
|
48496
|
+
]
|
|
48497
|
+
}
|
|
48498
|
+
);
|
|
48499
|
+
}
|
|
48500
|
+
);
|
|
48501
|
+
TimelineItem.displayName = "TimelineItem";
|
|
48502
|
+
var Timeline = React11__namespace.forwardRef(
|
|
48503
|
+
({ items, orientation = "vertical", renderItem, className, ...props }, ref) => {
|
|
48504
|
+
const resolved = React11__namespace.useMemo(() => resolveTimelineItems(items), [items]);
|
|
48505
|
+
const api = createTimeline({ orientation });
|
|
48506
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
48507
|
+
"ul",
|
|
48508
|
+
{
|
|
48509
|
+
ref,
|
|
48510
|
+
className: cn(timelineVariants({ orientation }), className),
|
|
48511
|
+
...api.ariaProps,
|
|
48512
|
+
...api.dataAttributes,
|
|
48513
|
+
...props,
|
|
48514
|
+
children: resolved.map((item, index) => {
|
|
48515
|
+
const isLast = index === resolved.length - 1;
|
|
48516
|
+
if (renderItem) {
|
|
48517
|
+
return /* @__PURE__ */ jsxRuntime.jsx(React11__namespace.Fragment, { children: renderItem(item, index, isLast) }, item.id);
|
|
48518
|
+
}
|
|
48519
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
48520
|
+
TimelineItem,
|
|
48521
|
+
{
|
|
48522
|
+
item,
|
|
48523
|
+
orientation,
|
|
48524
|
+
isLast
|
|
48525
|
+
},
|
|
48526
|
+
item.id
|
|
48527
|
+
);
|
|
48528
|
+
})
|
|
48529
|
+
}
|
|
48530
|
+
);
|
|
48531
|
+
}
|
|
48532
|
+
);
|
|
48533
|
+
Timeline.displayName = "Timeline";
|
|
48534
|
+
|
|
48535
|
+
// ../checklist/dist/index.js
|
|
48536
|
+
function createChecklist() {
|
|
48537
|
+
return {
|
|
48538
|
+
ariaProps: { role: "list" },
|
|
48539
|
+
dataAttributes: { "data-component": "checklist" }
|
|
48540
|
+
};
|
|
48541
|
+
}
|
|
48542
|
+
function checklistProgress(items) {
|
|
48543
|
+
const total = items.length;
|
|
48544
|
+
const completed = items.filter((item) => item.checked).length;
|
|
48545
|
+
const fraction = total === 0 ? 0 : completed / total;
|
|
48546
|
+
return { completed, total, fraction };
|
|
48547
|
+
}
|
|
48548
|
+
function toggleChecklistItem(items, id) {
|
|
48549
|
+
return items.map(
|
|
48550
|
+
(item) => item.id === id ? { ...item, checked: !item.checked } : item
|
|
48551
|
+
);
|
|
48552
|
+
}
|
|
48553
|
+
var checklistContainerClass = "flex flex-col gap-2";
|
|
48554
|
+
var checklistListClass = "flex flex-col gap-1";
|
|
48555
|
+
var checklistItemVariants = cva({
|
|
48556
|
+
base: [
|
|
48557
|
+
"flex items-start gap-3 rounded-md px-2 py-2 text-left",
|
|
48558
|
+
"transition-colors hover:bg-accent",
|
|
48559
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
48560
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
48561
|
+
].join(" "),
|
|
48562
|
+
variants: {
|
|
48563
|
+
checked: {
|
|
48564
|
+
true: "text-muted-foreground",
|
|
48565
|
+
false: "text-foreground"
|
|
48566
|
+
}
|
|
48567
|
+
},
|
|
48568
|
+
defaultVariants: {
|
|
48569
|
+
checked: "false"
|
|
48570
|
+
}
|
|
48571
|
+
});
|
|
48572
|
+
var checklistBoxVariants = cva({
|
|
48573
|
+
base: [
|
|
48574
|
+
"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded",
|
|
48575
|
+
"border transition-colors"
|
|
48576
|
+
].join(" "),
|
|
48577
|
+
variants: {
|
|
48578
|
+
checked: {
|
|
48579
|
+
true: "border-primary bg-primary text-primary-foreground",
|
|
48580
|
+
false: "border-input bg-background"
|
|
48581
|
+
}
|
|
48582
|
+
},
|
|
48583
|
+
defaultVariants: {
|
|
48584
|
+
checked: "false"
|
|
48585
|
+
}
|
|
48586
|
+
});
|
|
48587
|
+
var checklistLabelWrapClass = "flex flex-col gap-0.5 min-w-0";
|
|
48588
|
+
var checklistLabelVariants = cva({
|
|
48589
|
+
base: "text-sm font-medium leading-none transition-colors",
|
|
48590
|
+
variants: {
|
|
48591
|
+
checked: {
|
|
48592
|
+
true: "line-through text-muted-foreground",
|
|
48593
|
+
false: "text-foreground"
|
|
48594
|
+
}
|
|
48595
|
+
},
|
|
48596
|
+
defaultVariants: {
|
|
48597
|
+
checked: "false"
|
|
48598
|
+
}
|
|
48599
|
+
});
|
|
48600
|
+
var checklistDescriptionClass = "text-xs text-muted-foreground";
|
|
48601
|
+
var checklistProgressClass = "text-xs text-muted-foreground tabular-nums";
|
|
48602
|
+
var Checklist = React11__namespace.forwardRef(
|
|
48603
|
+
({
|
|
48604
|
+
items: itemsProp,
|
|
48605
|
+
defaultItems,
|
|
48606
|
+
onChange,
|
|
48607
|
+
onItemToggle,
|
|
48608
|
+
showProgress = false,
|
|
48609
|
+
className,
|
|
48610
|
+
...props
|
|
48611
|
+
}, ref) => {
|
|
48612
|
+
const isControlled = itemsProp !== void 0;
|
|
48613
|
+
const [internal, setInternal] = React11__namespace.useState(
|
|
48614
|
+
defaultItems ?? []
|
|
48615
|
+
);
|
|
48616
|
+
const items = isControlled ? itemsProp : internal;
|
|
48617
|
+
const handleToggle = React11__namespace.useCallback(
|
|
48618
|
+
(id) => {
|
|
48619
|
+
const next = toggleChecklistItem(items, id);
|
|
48620
|
+
if (!isControlled) setInternal(next);
|
|
48621
|
+
onChange?.(next);
|
|
48622
|
+
onItemToggle?.(id);
|
|
48623
|
+
},
|
|
48624
|
+
[items, isControlled, onChange, onItemToggle]
|
|
48625
|
+
);
|
|
48626
|
+
const { ariaProps, dataAttributes } = createChecklist();
|
|
48627
|
+
const progress = showProgress ? checklistProgress(items) : null;
|
|
48628
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48629
|
+
"div",
|
|
48630
|
+
{
|
|
48631
|
+
ref,
|
|
48632
|
+
className: cn(checklistContainerClass, className),
|
|
48633
|
+
...dataAttributes,
|
|
48634
|
+
...props,
|
|
48635
|
+
children: [
|
|
48636
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: checklistListClass, ...ariaProps, children: items.map((item) => {
|
|
48637
|
+
const checked = Boolean(item.checked);
|
|
48638
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48639
|
+
"button",
|
|
48640
|
+
{
|
|
48641
|
+
type: "button",
|
|
48642
|
+
role: "checkbox",
|
|
48643
|
+
"aria-checked": checked,
|
|
48644
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
48645
|
+
className: checklistItemVariants({ checked: checked ? "true" : "false" }),
|
|
48646
|
+
onClick: () => handleToggle(item.id),
|
|
48647
|
+
children: [
|
|
48648
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48649
|
+
"span",
|
|
48650
|
+
{
|
|
48651
|
+
"aria-hidden": "true",
|
|
48652
|
+
className: checklistBoxVariants({ checked: checked ? "true" : "false" }),
|
|
48653
|
+
children: checked && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48654
|
+
"svg",
|
|
48655
|
+
{
|
|
48656
|
+
viewBox: "0 0 12 12",
|
|
48657
|
+
fill: "none",
|
|
48658
|
+
className: "h-3 w-3",
|
|
48659
|
+
"aria-hidden": "true",
|
|
48660
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
48661
|
+
"path",
|
|
48662
|
+
{
|
|
48663
|
+
d: "M2 6l3 3 5-5",
|
|
48664
|
+
stroke: "currentColor",
|
|
48665
|
+
strokeWidth: "1.5",
|
|
48666
|
+
strokeLinecap: "round",
|
|
48667
|
+
strokeLinejoin: "round"
|
|
48668
|
+
}
|
|
48669
|
+
)
|
|
48670
|
+
}
|
|
48671
|
+
)
|
|
48672
|
+
}
|
|
48673
|
+
),
|
|
48674
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: checklistLabelWrapClass, children: [
|
|
48675
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: checklistLabelVariants({ checked: checked ? "true" : "false" }), children: item.label }),
|
|
48676
|
+
item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: checklistDescriptionClass, children: item.description })
|
|
48677
|
+
] })
|
|
48678
|
+
]
|
|
48679
|
+
}
|
|
48680
|
+
) }, item.id);
|
|
48681
|
+
}) }),
|
|
48682
|
+
progress !== null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: checklistProgressClass, children: `${progress.completed}/${progress.total} completed` })
|
|
48683
|
+
]
|
|
48684
|
+
}
|
|
48685
|
+
);
|
|
48686
|
+
}
|
|
48687
|
+
);
|
|
48688
|
+
Checklist.displayName = "Checklist";
|
|
48689
|
+
|
|
48690
|
+
// ../editor-tabs/dist/index.js
|
|
48691
|
+
function createEditorTabs(props = {}) {
|
|
48692
|
+
const { activeId } = props;
|
|
48693
|
+
const ariaProps = {
|
|
48694
|
+
role: "tablist"
|
|
48695
|
+
};
|
|
48696
|
+
const dataAttributes = {};
|
|
48697
|
+
if (activeId !== void 0) {
|
|
48698
|
+
dataAttributes["data-active-id"] = activeId;
|
|
48699
|
+
}
|
|
48700
|
+
return { ariaProps, dataAttributes };
|
|
48701
|
+
}
|
|
48702
|
+
function getNextTabIndex(currentIndex, key, count) {
|
|
48703
|
+
if (count <= 0) return currentIndex;
|
|
48704
|
+
switch (key) {
|
|
48705
|
+
case "ArrowRight":
|
|
48706
|
+
return (currentIndex + 1) % count;
|
|
48707
|
+
case "ArrowLeft":
|
|
48708
|
+
return (currentIndex - 1 + count) % count;
|
|
48709
|
+
case "Home":
|
|
48710
|
+
return 0;
|
|
48711
|
+
case "End":
|
|
48712
|
+
return count - 1;
|
|
48713
|
+
default:
|
|
48714
|
+
return currentIndex;
|
|
48715
|
+
}
|
|
48716
|
+
}
|
|
48717
|
+
var editorTabsVariants = cva({
|
|
48718
|
+
base: "inline-flex items-end gap-0 border-b border-border bg-muted/40 overflow-x-auto",
|
|
48719
|
+
variants: {},
|
|
48720
|
+
defaultVariants: {}
|
|
48721
|
+
});
|
|
48722
|
+
var editorTabVariants = cva({
|
|
48723
|
+
base: [
|
|
48724
|
+
"group inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium",
|
|
48725
|
+
"border-b-2 transition-colors select-none whitespace-nowrap",
|
|
48726
|
+
"focus-visible:outline-none focus-visible:ring-2",
|
|
48727
|
+
"focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
|
|
48728
|
+
].join(" "),
|
|
48729
|
+
variants: {
|
|
48730
|
+
state: {
|
|
48731
|
+
active: [
|
|
48732
|
+
"border-primary text-foreground bg-background",
|
|
48733
|
+
"border-t border-l border-r border-border border-b-background -mb-px"
|
|
48734
|
+
].join(" "),
|
|
48735
|
+
inactive: [
|
|
48736
|
+
"border-transparent text-muted-foreground",
|
|
48737
|
+
"hover:text-foreground hover:bg-background/60"
|
|
48738
|
+
].join(" ")
|
|
48739
|
+
}
|
|
48740
|
+
},
|
|
48741
|
+
defaultVariants: {
|
|
48742
|
+
state: "inactive"
|
|
48743
|
+
}
|
|
48744
|
+
});
|
|
48745
|
+
var editorTabDirtyDotClass = "size-1.5 rounded-full bg-amber-400 shrink-0";
|
|
48746
|
+
var editorTabCloseButtonClass = [
|
|
48747
|
+
"ml-1 inline-flex items-center justify-center rounded-sm size-4 shrink-0",
|
|
48748
|
+
"text-muted-foreground opacity-0 transition-opacity",
|
|
48749
|
+
"group-hover:opacity-100 focus-visible:opacity-100",
|
|
48750
|
+
"hover:bg-accent hover:text-foreground",
|
|
48751
|
+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
48752
|
+
].join(" ");
|
|
48753
|
+
var editorTabIconClass = "shrink-0 text-[0.85em] leading-none";
|
|
48754
|
+
var EditorTabs = React11__namespace.forwardRef(
|
|
48755
|
+
({ tabs, activeId, onSelect, onClose, className, ...props }, ref) => {
|
|
48756
|
+
const tabRefs = React11__namespace.useRef([]);
|
|
48757
|
+
const activeIndex = tabs.findIndex((t2) => t2.id === activeId);
|
|
48758
|
+
const tabbableIndex = activeIndex === -1 ? 0 : activeIndex;
|
|
48759
|
+
const handleKeyDown = (event, index) => {
|
|
48760
|
+
const next = getNextTabIndex(index, event.key, tabs.length);
|
|
48761
|
+
if (next !== index) {
|
|
48762
|
+
event.preventDefault();
|
|
48763
|
+
onSelect(tabs[next].id);
|
|
48764
|
+
tabRefs.current[next]?.focus();
|
|
48765
|
+
}
|
|
48766
|
+
};
|
|
48767
|
+
const api = createEditorTabs({ activeId });
|
|
48768
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
48769
|
+
"div",
|
|
48770
|
+
{
|
|
48771
|
+
ref,
|
|
48772
|
+
className: cn(editorTabsVariants(), className),
|
|
48773
|
+
...api.ariaProps,
|
|
48774
|
+
...api.dataAttributes,
|
|
48775
|
+
...props,
|
|
48776
|
+
children: tabs.map((tab, index) => {
|
|
48777
|
+
const isActive = tab.id === activeId;
|
|
48778
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48779
|
+
"button",
|
|
48780
|
+
{
|
|
48781
|
+
ref: (node) => {
|
|
48782
|
+
tabRefs.current[index] = node;
|
|
48783
|
+
},
|
|
48784
|
+
type: "button",
|
|
48785
|
+
role: "tab",
|
|
48786
|
+
"aria-selected": isActive,
|
|
48787
|
+
"aria-controls": `tabpanel-${tab.id}`,
|
|
48788
|
+
id: `tab-${tab.id}`,
|
|
48789
|
+
tabIndex: index === tabbableIndex ? 0 : -1,
|
|
48790
|
+
"data-state": isActive ? "active" : "inactive",
|
|
48791
|
+
className: editorTabVariants({ state: isActive ? "active" : "inactive" }),
|
|
48792
|
+
onClick: () => onSelect(tab.id),
|
|
48793
|
+
onKeyDown: (e2) => handleKeyDown(e2, index),
|
|
48794
|
+
children: [
|
|
48795
|
+
tab.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: editorTabIconClass, "aria-hidden": "true", children: tab.icon }),
|
|
48796
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: tab.label }),
|
|
48797
|
+
tab.dirty && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48798
|
+
"span",
|
|
48799
|
+
{
|
|
48800
|
+
className: editorTabDirtyDotClass,
|
|
48801
|
+
"aria-label": "unsaved changes",
|
|
48802
|
+
role: "status"
|
|
48803
|
+
}
|
|
48804
|
+
),
|
|
48805
|
+
tab.closable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
48806
|
+
"span",
|
|
48807
|
+
{
|
|
48808
|
+
role: "button",
|
|
48809
|
+
"aria-label": `Close ${tab.label}`,
|
|
48810
|
+
tabIndex: -1,
|
|
48811
|
+
className: editorTabCloseButtonClass,
|
|
48812
|
+
onClick: (e2) => {
|
|
48813
|
+
e2.stopPropagation();
|
|
48814
|
+
onClose?.(tab.id);
|
|
48815
|
+
},
|
|
48816
|
+
onKeyDown: (e2) => {
|
|
48817
|
+
if (e2.key === "Enter" || e2.key === " ") {
|
|
48818
|
+
e2.stopPropagation();
|
|
48819
|
+
onClose?.(tab.id);
|
|
48820
|
+
}
|
|
48821
|
+
},
|
|
48822
|
+
children: "\xD7"
|
|
48823
|
+
}
|
|
48824
|
+
)
|
|
48825
|
+
]
|
|
48826
|
+
},
|
|
48827
|
+
tab.id
|
|
48828
|
+
);
|
|
48829
|
+
})
|
|
48830
|
+
}
|
|
48831
|
+
);
|
|
48832
|
+
}
|
|
48833
|
+
);
|
|
48834
|
+
EditorTabs.displayName = "EditorTabs";
|
|
48835
|
+
|
|
48836
|
+
// ../terminal/dist/index.js
|
|
48837
|
+
function createTerminal(options = {}) {
|
|
48838
|
+
const ariaProps = {
|
|
48839
|
+
role: "log",
|
|
48840
|
+
"aria-live": "polite"
|
|
48841
|
+
};
|
|
48842
|
+
if (options.label) {
|
|
48843
|
+
ariaProps["aria-label"] = options.label;
|
|
48844
|
+
}
|
|
48845
|
+
const dataAttributes = {
|
|
48846
|
+
"data-component": "terminal"
|
|
48847
|
+
};
|
|
48848
|
+
return { ariaProps, dataAttributes };
|
|
48849
|
+
}
|
|
48850
|
+
var terminalVariants = cva({
|
|
48851
|
+
base: [
|
|
48852
|
+
"relative rounded-lg border border-border bg-card font-mono text-sm",
|
|
48853
|
+
"overflow-y-auto overflow-x-auto",
|
|
48854
|
+
"p-4 space-y-0.5"
|
|
48855
|
+
].join(" "),
|
|
48856
|
+
variants: {
|
|
48857
|
+
maxHeight: {
|
|
48858
|
+
sm: "max-h-48",
|
|
48859
|
+
md: "max-h-80",
|
|
48860
|
+
lg: "max-h-[32rem]",
|
|
48861
|
+
none: ""
|
|
48862
|
+
}
|
|
48863
|
+
},
|
|
48864
|
+
defaultVariants: {
|
|
48865
|
+
maxHeight: "md"
|
|
48866
|
+
}
|
|
48867
|
+
});
|
|
48868
|
+
var terminalLineVariants = cva({
|
|
48869
|
+
base: "block whitespace-pre-wrap break-all leading-relaxed",
|
|
48870
|
+
variants: {
|
|
48871
|
+
kind: {
|
|
48872
|
+
/** The user-typed command: full foreground, bold weight. */
|
|
48873
|
+
command: "text-foreground font-semibold",
|
|
48874
|
+
/** Normal program output. */
|
|
48875
|
+
stdout: "text-foreground",
|
|
48876
|
+
/** Error / stderr output — uses the destructive semantic token. */
|
|
48877
|
+
stderr: "text-destructive",
|
|
48878
|
+
/** Informational summary lines — muted, visually de-emphasised. */
|
|
48879
|
+
info: "text-muted-foreground",
|
|
48880
|
+
/**
|
|
48881
|
+
* Success / passing lines — green-family.
|
|
48882
|
+
* Maps to `text-emerald-500` via the Tailwind semantic alias used
|
|
48883
|
+
* across the design system; downstream themes can override this token.
|
|
48884
|
+
*/
|
|
48885
|
+
success: "text-emerald-500 dark:text-emerald-400"
|
|
48886
|
+
}
|
|
48887
|
+
},
|
|
48888
|
+
defaultVariants: {
|
|
48889
|
+
kind: "stdout"
|
|
48890
|
+
}
|
|
48891
|
+
});
|
|
48892
|
+
var terminalPromptClass = "select-none mr-2 text-muted-foreground";
|
|
48893
|
+
var Terminal = React11__namespace.forwardRef(
|
|
48894
|
+
({
|
|
48895
|
+
lines,
|
|
48896
|
+
promptSymbol = "$",
|
|
48897
|
+
maxHeight = "md",
|
|
48898
|
+
className,
|
|
48899
|
+
"aria-label": ariaLabel,
|
|
48900
|
+
...props
|
|
48901
|
+
}, ref) => {
|
|
48902
|
+
const api = createTerminal({ label: ariaLabel });
|
|
48903
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
48904
|
+
"div",
|
|
48905
|
+
{
|
|
48906
|
+
ref,
|
|
48907
|
+
className: cn(terminalVariants({ maxHeight }), className),
|
|
48908
|
+
...api.ariaProps,
|
|
48909
|
+
...api.dataAttributes,
|
|
48910
|
+
...props,
|
|
48911
|
+
children: lines.map((line, index) => {
|
|
48912
|
+
const key = line.id ?? index;
|
|
48913
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: terminalLineVariants({ kind: line.kind }), children: line.kind === "command" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
48914
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: terminalPromptClass, children: promptSymbol }),
|
|
48915
|
+
line.text
|
|
48916
|
+
] }) : line.text }, key);
|
|
48917
|
+
})
|
|
48918
|
+
}
|
|
48919
|
+
);
|
|
48920
|
+
}
|
|
48921
|
+
);
|
|
48922
|
+
Terminal.displayName = "Terminal";
|
|
48923
|
+
|
|
48924
|
+
// ../test-results/dist/index.js
|
|
48925
|
+
function summarizeTests(results) {
|
|
48926
|
+
let passed = 0;
|
|
48927
|
+
let failed = 0;
|
|
48928
|
+
let skipped = 0;
|
|
48929
|
+
for (const r2 of results) {
|
|
48930
|
+
if (r2.status === "pass") passed++;
|
|
48931
|
+
else if (r2.status === "fail") failed++;
|
|
48932
|
+
else skipped++;
|
|
48933
|
+
}
|
|
48934
|
+
return {
|
|
48935
|
+
total: results.length,
|
|
48936
|
+
passed,
|
|
48937
|
+
failed,
|
|
48938
|
+
skipped,
|
|
48939
|
+
allPassed: failed === 0 && skipped === 0 && results.length > 0
|
|
48940
|
+
};
|
|
48941
|
+
}
|
|
48942
|
+
function createTestResults() {
|
|
48943
|
+
const ariaProps = {
|
|
48944
|
+
role: "list"
|
|
48945
|
+
};
|
|
48946
|
+
const dataAttributes = {
|
|
48947
|
+
"data-component": "test-results"
|
|
48948
|
+
};
|
|
48949
|
+
return { ariaProps, dataAttributes };
|
|
48950
|
+
}
|
|
48951
|
+
var testResultsContainerVariants = cva({
|
|
48952
|
+
base: "flex flex-col gap-3 w-full",
|
|
48953
|
+
variants: {},
|
|
48954
|
+
defaultVariants: {}
|
|
48955
|
+
});
|
|
48956
|
+
var testResultsSummaryVariants = cva({
|
|
48957
|
+
base: [
|
|
48958
|
+
"flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium",
|
|
48959
|
+
"border"
|
|
48960
|
+
].join(" "),
|
|
48961
|
+
variants: {
|
|
48962
|
+
outcome: {
|
|
48963
|
+
pass: "border-success/30 bg-success/10 text-success",
|
|
48964
|
+
fail: "border-destructive/30 bg-destructive/10 text-destructive",
|
|
48965
|
+
skip: "border-muted/30 bg-muted/10 text-muted-foreground"
|
|
48966
|
+
}
|
|
48967
|
+
},
|
|
48968
|
+
defaultVariants: {
|
|
48969
|
+
outcome: "pass"
|
|
48970
|
+
}
|
|
48971
|
+
});
|
|
48972
|
+
var testRowVariants = cva({
|
|
48973
|
+
base: [
|
|
48974
|
+
"flex flex-col gap-1.5 rounded-md border px-3 py-2.5 text-sm"
|
|
48975
|
+
].join(" "),
|
|
48976
|
+
variants: {
|
|
48977
|
+
status: {
|
|
48978
|
+
pass: "border-success/20 bg-success/5",
|
|
48979
|
+
fail: "border-destructive/20 bg-destructive/5",
|
|
48980
|
+
skip: "border-muted/20 bg-muted/5"
|
|
48981
|
+
}
|
|
48982
|
+
},
|
|
48983
|
+
defaultVariants: {
|
|
48984
|
+
status: "pass"
|
|
48985
|
+
}
|
|
48986
|
+
});
|
|
48987
|
+
var testStatusBadgeVariants = cva({
|
|
48988
|
+
base: "inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold uppercase tracking-wide",
|
|
48989
|
+
variants: {
|
|
48990
|
+
status: {
|
|
48991
|
+
pass: "bg-success/20 text-success",
|
|
48992
|
+
fail: "bg-destructive/20 text-destructive",
|
|
48993
|
+
skip: "bg-muted text-muted-foreground"
|
|
48994
|
+
}
|
|
48995
|
+
},
|
|
48996
|
+
defaultVariants: {
|
|
48997
|
+
status: "pass"
|
|
48998
|
+
}
|
|
48999
|
+
});
|
|
49000
|
+
var testNameClass = "font-medium text-foreground";
|
|
49001
|
+
var testDurationClass = "text-xs text-muted-foreground";
|
|
49002
|
+
var testDiffBlockVariants = cva({
|
|
49003
|
+
base: [
|
|
49004
|
+
"rounded border-l-2 bg-muted/30 px-3 py-2 font-mono text-xs text-foreground"
|
|
49005
|
+
].join(" "),
|
|
49006
|
+
variants: {
|
|
49007
|
+
side: {
|
|
49008
|
+
expected: "border-l-success text-success",
|
|
49009
|
+
actual: "border-l-destructive text-destructive"
|
|
49010
|
+
}
|
|
49011
|
+
},
|
|
49012
|
+
defaultVariants: {
|
|
49013
|
+
side: "actual"
|
|
49014
|
+
}
|
|
49015
|
+
});
|
|
49016
|
+
var testMessageClass = "text-xs text-muted-foreground italic";
|
|
49017
|
+
var TestResults = React11__namespace.forwardRef(
|
|
49018
|
+
({ results, showSummary = true, className, ...props }, ref) => {
|
|
49019
|
+
const summary = React11__namespace.useMemo(() => summarizeTests(results), [results]);
|
|
49020
|
+
const { ariaProps, dataAttributes } = createTestResults();
|
|
49021
|
+
const summaryOutcome = summary.failed > 0 ? "fail" : summary.skipped > 0 ? "skip" : "pass";
|
|
49022
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49023
|
+
"div",
|
|
49024
|
+
{
|
|
49025
|
+
ref,
|
|
49026
|
+
className: cn(testResultsContainerVariants(), className),
|
|
49027
|
+
...dataAttributes,
|
|
49028
|
+
...props,
|
|
49029
|
+
children: [
|
|
49030
|
+
showSummary && results.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49031
|
+
"div",
|
|
49032
|
+
{
|
|
49033
|
+
className: testResultsSummaryVariants({ outcome: summaryOutcome }),
|
|
49034
|
+
"aria-live": "polite",
|
|
49035
|
+
children: [
|
|
49036
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: `${summary.passed}/${summary.total} passed` }),
|
|
49037
|
+
summary.failed > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `\xB7 ${summary.failed} failed` }),
|
|
49038
|
+
summary.skipped > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `\xB7 ${summary.skipped} skipped` })
|
|
49039
|
+
]
|
|
49040
|
+
}
|
|
49041
|
+
),
|
|
49042
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { ...ariaProps, className: "flex flex-col gap-2", children: results.map((result) => /* @__PURE__ */ jsxRuntime.jsxs("li", { role: "listitem", className: testRowVariants({ status: result.status }), children: [
|
|
49043
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
49044
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
|
|
49045
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: testStatusBadgeVariants({ status: result.status }), children: result.status }),
|
|
49046
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(testNameClass, "truncate"), children: result.name })
|
|
49047
|
+
] }),
|
|
49048
|
+
result.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: testDurationClass, children: `${result.durationMs} ms` })
|
|
49049
|
+
] }),
|
|
49050
|
+
result.status === "fail" && result.expected !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 mt-1", children: [
|
|
49051
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: testDiffBlockVariants({ side: "expected" }), children: [
|
|
49052
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60 mr-1 select-none", children: "expected" }),
|
|
49053
|
+
result.expected
|
|
49054
|
+
] }),
|
|
49055
|
+
result.actual !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: testDiffBlockVariants({ side: "actual" }), children: [
|
|
49056
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60 mr-1 select-none", children: "actual" }),
|
|
49057
|
+
result.actual
|
|
49058
|
+
] })
|
|
49059
|
+
] }),
|
|
49060
|
+
result.message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: testMessageClass, children: result.message })
|
|
49061
|
+
] }, result.id)) })
|
|
49062
|
+
]
|
|
49063
|
+
}
|
|
49064
|
+
);
|
|
49065
|
+
}
|
|
49066
|
+
);
|
|
49067
|
+
TestResults.displayName = "TestResults";
|
|
49068
|
+
|
|
49069
|
+
// ../editor-status-bar/dist/index.js
|
|
49070
|
+
function formatCursorPosition(line, col) {
|
|
49071
|
+
return `Ln ${line}, Col ${col}`;
|
|
49072
|
+
}
|
|
49073
|
+
function partitionSegments(segments) {
|
|
49074
|
+
const left = [];
|
|
49075
|
+
const right = [];
|
|
49076
|
+
for (const seg of segments) {
|
|
49077
|
+
if (seg.align === "right") {
|
|
49078
|
+
right.push(seg);
|
|
49079
|
+
} else {
|
|
49080
|
+
left.push(seg);
|
|
49081
|
+
}
|
|
49082
|
+
}
|
|
49083
|
+
return { left, right };
|
|
49084
|
+
}
|
|
49085
|
+
function createEditorStatusBar() {
|
|
49086
|
+
const ariaProps = {
|
|
49087
|
+
role: "status",
|
|
49088
|
+
"aria-live": "polite"
|
|
49089
|
+
};
|
|
49090
|
+
const dataAttributes = {
|
|
49091
|
+
"data-component": "editor-status-bar"
|
|
49092
|
+
};
|
|
49093
|
+
return { ariaProps, dataAttributes };
|
|
49094
|
+
}
|
|
49095
|
+
var editorStatusBarVariants = cva({
|
|
49096
|
+
base: [
|
|
49097
|
+
"flex items-center justify-between",
|
|
49098
|
+
"w-full h-6 px-2 gap-4",
|
|
49099
|
+
"text-xs font-mono",
|
|
49100
|
+
"bg-muted text-muted-foreground",
|
|
49101
|
+
"border-t border-border",
|
|
49102
|
+
"select-none"
|
|
49103
|
+
].join(" "),
|
|
49104
|
+
variants: {},
|
|
49105
|
+
defaultVariants: {}
|
|
49106
|
+
});
|
|
49107
|
+
var statusBarGroupClass = "flex items-center gap-3 overflow-hidden";
|
|
49108
|
+
var statusBarSegmentVariants = cva({
|
|
49109
|
+
base: "inline-flex items-center whitespace-nowrap truncate leading-none",
|
|
49110
|
+
variants: {
|
|
49111
|
+
tone: {
|
|
49112
|
+
default: "text-muted-foreground",
|
|
49113
|
+
muted: "text-muted-foreground/60",
|
|
49114
|
+
accent: "text-primary"
|
|
49115
|
+
}
|
|
49116
|
+
},
|
|
49117
|
+
defaultVariants: {
|
|
49118
|
+
tone: "default"
|
|
49119
|
+
}
|
|
49120
|
+
});
|
|
49121
|
+
function buildSegmentsFromConvenienceProps(props) {
|
|
49122
|
+
const segs = [];
|
|
49123
|
+
if (props.line !== void 0 && props.col !== void 0) {
|
|
49124
|
+
segs.push({
|
|
49125
|
+
id: "cursor",
|
|
49126
|
+
label: formatCursorPosition(props.line, props.col),
|
|
49127
|
+
align: "left",
|
|
49128
|
+
tone: "default"
|
|
49129
|
+
});
|
|
49130
|
+
}
|
|
49131
|
+
if (props.indentation) {
|
|
49132
|
+
segs.push({ id: "indentation", label: props.indentation, align: "left", tone: "muted" });
|
|
49133
|
+
}
|
|
49134
|
+
if (props.language) {
|
|
49135
|
+
segs.push({ id: "language", label: props.language, align: "right", tone: "accent" });
|
|
49136
|
+
}
|
|
49137
|
+
if (props.encoding) {
|
|
49138
|
+
segs.push({ id: "encoding", label: props.encoding, align: "right", tone: "muted" });
|
|
49139
|
+
}
|
|
49140
|
+
if (props.eol) {
|
|
49141
|
+
segs.push({ id: "eol", label: props.eol, align: "right", tone: "muted" });
|
|
49142
|
+
}
|
|
49143
|
+
if (props.status) {
|
|
49144
|
+
segs.push({ id: "status", label: props.status, align: "right", tone: "muted" });
|
|
49145
|
+
}
|
|
49146
|
+
return segs;
|
|
49147
|
+
}
|
|
49148
|
+
var EditorStatusBar = React11__namespace.forwardRef(
|
|
49149
|
+
({
|
|
49150
|
+
segments: segmentsProp,
|
|
49151
|
+
line,
|
|
49152
|
+
col,
|
|
49153
|
+
indentation,
|
|
49154
|
+
language,
|
|
49155
|
+
encoding,
|
|
49156
|
+
eol,
|
|
49157
|
+
status,
|
|
49158
|
+
className,
|
|
49159
|
+
...props
|
|
49160
|
+
}, ref) => {
|
|
49161
|
+
const segments = segmentsProp ?? buildSegmentsFromConvenienceProps({
|
|
49162
|
+
line,
|
|
49163
|
+
col,
|
|
49164
|
+
indentation,
|
|
49165
|
+
language,
|
|
49166
|
+
encoding,
|
|
49167
|
+
eol,
|
|
49168
|
+
status
|
|
49169
|
+
});
|
|
49170
|
+
const { left, right } = partitionSegments(segments);
|
|
49171
|
+
const api = createEditorStatusBar();
|
|
49172
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49173
|
+
"div",
|
|
49174
|
+
{
|
|
49175
|
+
ref,
|
|
49176
|
+
className: cn(editorStatusBarVariants(), className),
|
|
49177
|
+
...api.ariaProps,
|
|
49178
|
+
...api.dataAttributes,
|
|
49179
|
+
...props,
|
|
49180
|
+
children: [
|
|
49181
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: statusBarGroupClass, children: left.map((seg) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
49182
|
+
"span",
|
|
49183
|
+
{
|
|
49184
|
+
className: statusBarSegmentVariants({ tone: seg.tone ?? "default" }),
|
|
49185
|
+
children: seg.label
|
|
49186
|
+
},
|
|
49187
|
+
seg.id
|
|
49188
|
+
)) }),
|
|
49189
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: statusBarGroupClass, children: right.map((seg) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
49190
|
+
"span",
|
|
49191
|
+
{
|
|
49192
|
+
className: statusBarSegmentVariants({ tone: seg.tone ?? "default" }),
|
|
49193
|
+
children: seg.label
|
|
49194
|
+
},
|
|
49195
|
+
seg.id
|
|
49196
|
+
)) })
|
|
49197
|
+
]
|
|
49198
|
+
}
|
|
49199
|
+
);
|
|
49200
|
+
}
|
|
49201
|
+
);
|
|
49202
|
+
EditorStatusBar.displayName = "EditorStatusBar";
|
|
49203
|
+
|
|
49204
|
+
// ../video-tile/dist/index.js
|
|
49205
|
+
function createVideoTile(props = {}) {
|
|
49206
|
+
const { speaking = false, pinned = false } = props;
|
|
49207
|
+
return {
|
|
49208
|
+
dataAttributes: {
|
|
49209
|
+
"data-speaking": speaking ? "true" : "false",
|
|
49210
|
+
"data-pinned": pinned ? "true" : "false"
|
|
49211
|
+
},
|
|
49212
|
+
ariaProps: {
|
|
49213
|
+
role: "group"
|
|
49214
|
+
}
|
|
49215
|
+
};
|
|
49216
|
+
}
|
|
49217
|
+
function getInitials3(name) {
|
|
49218
|
+
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
49219
|
+
return words.slice(0, 2).map((w2) => w2[0].toUpperCase()).join("");
|
|
49220
|
+
}
|
|
49221
|
+
var videoTileVariants = cva({
|
|
49222
|
+
base: [
|
|
49223
|
+
"relative aspect-video overflow-hidden rounded-lg bg-muted",
|
|
49224
|
+
"transition-shadow duration-200"
|
|
49225
|
+
].join(" "),
|
|
49226
|
+
variants: {
|
|
49227
|
+
speaking: {
|
|
49228
|
+
"true": "ring-2 ring-emerald-500 dark:ring-emerald-400 ring-offset-2 ring-offset-background",
|
|
49229
|
+
"false": ""
|
|
49230
|
+
},
|
|
49231
|
+
pinned: {
|
|
49232
|
+
"true": "ring-2 ring-primary ring-offset-2 ring-offset-background",
|
|
49233
|
+
"false": ""
|
|
49234
|
+
}
|
|
49235
|
+
},
|
|
49236
|
+
defaultVariants: {
|
|
49237
|
+
speaking: "false",
|
|
49238
|
+
pinned: "false"
|
|
49239
|
+
}
|
|
49240
|
+
});
|
|
49241
|
+
var videoTileNameChipClass = "absolute bottom-2 left-2 flex items-center gap-1.5 rounded-md bg-background/70 px-2 py-0.5 text-xs font-medium text-foreground backdrop-blur-sm";
|
|
49242
|
+
var videoTileMicIconClass = "text-destructive";
|
|
49243
|
+
var videoTileAvatarFallbackClass = "absolute inset-0 flex items-center justify-center";
|
|
49244
|
+
var videoTileAvatarCircleClass = "flex size-16 items-center justify-center rounded-full bg-card text-foreground text-xl font-semibold select-none";
|
|
49245
|
+
var videoTileReactionBadgeClass = "absolute right-2 top-2 flex items-center justify-center rounded-full bg-background/70 px-1.5 py-0.5 text-sm backdrop-blur-sm";
|
|
49246
|
+
var VideoTile = React11__namespace.forwardRef(
|
|
49247
|
+
({
|
|
49248
|
+
name,
|
|
49249
|
+
micState = "on",
|
|
49250
|
+
speaking = false,
|
|
49251
|
+
pinned = false,
|
|
49252
|
+
avatarUrl,
|
|
49253
|
+
mediaSlot,
|
|
49254
|
+
reaction,
|
|
49255
|
+
className,
|
|
49256
|
+
...props
|
|
49257
|
+
}, ref) => {
|
|
49258
|
+
const api = createVideoTile({ speaking, pinned });
|
|
49259
|
+
const initials = getInitials3(name);
|
|
49260
|
+
const isMuted = micState === "muted";
|
|
49261
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49262
|
+
"div",
|
|
49263
|
+
{
|
|
49264
|
+
ref,
|
|
49265
|
+
className: cn(
|
|
49266
|
+
videoTileVariants({
|
|
49267
|
+
speaking: speaking ? "true" : "false",
|
|
49268
|
+
pinned: pinned ? "true" : "false"
|
|
49269
|
+
}),
|
|
49270
|
+
className
|
|
49271
|
+
),
|
|
49272
|
+
"aria-label": name,
|
|
49273
|
+
...api.ariaProps,
|
|
49274
|
+
...api.dataAttributes,
|
|
49275
|
+
...props,
|
|
49276
|
+
children: [
|
|
49277
|
+
mediaSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 h-full w-full object-cover", children: mediaSlot }) : (
|
|
49278
|
+
/* Avatar fallback */
|
|
49279
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: videoTileAvatarFallbackClass, children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
49280
|
+
"img",
|
|
49281
|
+
{
|
|
49282
|
+
src: avatarUrl,
|
|
49283
|
+
alt: name,
|
|
49284
|
+
className: videoTileAvatarCircleClass
|
|
49285
|
+
}
|
|
49286
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: videoTileAvatarCircleClass, "aria-hidden": "true", children: initials }) })
|
|
49287
|
+
),
|
|
49288
|
+
reaction != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: videoTileReactionBadgeClass, "aria-hidden": "true", children: reaction }),
|
|
49289
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: videoTileNameChipClass, children: [
|
|
49290
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: `${name}${isMuted ? "" : ""}` }),
|
|
49291
|
+
isMuted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: videoTileMicIconClass, "aria-label": "Microphone muted", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49292
|
+
"svg",
|
|
49293
|
+
{
|
|
49294
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
49295
|
+
width: "12",
|
|
49296
|
+
height: "12",
|
|
49297
|
+
viewBox: "0 0 24 24",
|
|
49298
|
+
fill: "none",
|
|
49299
|
+
stroke: "currentColor",
|
|
49300
|
+
strokeWidth: "2",
|
|
49301
|
+
strokeLinecap: "round",
|
|
49302
|
+
strokeLinejoin: "round",
|
|
49303
|
+
"aria-hidden": "true",
|
|
49304
|
+
children: [
|
|
49305
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
|
|
49306
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
|
|
49307
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
|
|
49308
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
|
|
49309
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
|
|
49310
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
|
|
49311
|
+
]
|
|
49312
|
+
}
|
|
49313
|
+
) })
|
|
49314
|
+
] })
|
|
49315
|
+
]
|
|
49316
|
+
}
|
|
49317
|
+
);
|
|
49318
|
+
}
|
|
49319
|
+
);
|
|
49320
|
+
VideoTile.displayName = "VideoTile";
|
|
49321
|
+
|
|
49322
|
+
// ../video-grid/dist/index.js
|
|
49323
|
+
function computeGridColumns(count) {
|
|
49324
|
+
if (count <= 1) return 1;
|
|
49325
|
+
if (count <= 4) return 2;
|
|
49326
|
+
if (count <= 9) return 3;
|
|
49327
|
+
if (count <= 16) return 4;
|
|
49328
|
+
if (count <= 25) return 5;
|
|
49329
|
+
return 6;
|
|
49330
|
+
}
|
|
49331
|
+
function createVideoGrid(props = {}) {
|
|
49332
|
+
const { layout = "auto" } = props;
|
|
49333
|
+
return {
|
|
49334
|
+
ariaProps: {
|
|
49335
|
+
role: "group"
|
|
49336
|
+
},
|
|
49337
|
+
dataAttributes: {
|
|
49338
|
+
"data-layout": layout
|
|
49339
|
+
}
|
|
49340
|
+
};
|
|
49341
|
+
}
|
|
49342
|
+
var videoGridVariants = cva({
|
|
49343
|
+
base: "w-full h-full gap-2",
|
|
49344
|
+
variants: {
|
|
49345
|
+
layout: {
|
|
49346
|
+
grid: "grid",
|
|
49347
|
+
speaker: "flex flex-col",
|
|
49348
|
+
auto: "grid"
|
|
49349
|
+
}
|
|
49350
|
+
},
|
|
49351
|
+
defaultVariants: {
|
|
49352
|
+
layout: "auto"
|
|
49353
|
+
}
|
|
49354
|
+
});
|
|
49355
|
+
var videoGridSpotlightClass = "relative flex-1 min-h-0 rounded-xl overflow-hidden bg-muted";
|
|
49356
|
+
var videoGridFilmstripClass = "flex flex-row gap-2 overflow-x-auto py-1 shrink-0";
|
|
49357
|
+
var videoGridFilmstripTileClass = "w-36 shrink-0";
|
|
49358
|
+
var VideoGrid = React11__namespace.forwardRef(
|
|
49359
|
+
({
|
|
49360
|
+
participants,
|
|
49361
|
+
layout = "auto",
|
|
49362
|
+
spotlightId,
|
|
49363
|
+
className,
|
|
49364
|
+
style,
|
|
49365
|
+
...props
|
|
49366
|
+
}, ref) => {
|
|
49367
|
+
const count = participants.length;
|
|
49368
|
+
const effectiveLayout = layout === "auto" ? count <= 1 ? "speaker" : "grid" : layout;
|
|
49369
|
+
const api = createVideoGrid({ layout: effectiveLayout });
|
|
49370
|
+
const columns = computeGridColumns(count);
|
|
49371
|
+
const gridStyle = effectiveLayout !== "speaker" ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : { ...style };
|
|
49372
|
+
if (effectiveLayout === "speaker") {
|
|
49373
|
+
const spotlightParticipant = participants.find((p2) => p2.id === spotlightId) ?? participants[0];
|
|
49374
|
+
const filmstrip = participants.filter(
|
|
49375
|
+
(p2) => p2.id !== spotlightParticipant?.id
|
|
49376
|
+
);
|
|
49377
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49378
|
+
"div",
|
|
49379
|
+
{
|
|
49380
|
+
ref,
|
|
49381
|
+
className: cn(videoGridVariants({ layout: "speaker" }), className),
|
|
49382
|
+
style,
|
|
49383
|
+
...api.ariaProps,
|
|
49384
|
+
...api.dataAttributes,
|
|
49385
|
+
...props,
|
|
49386
|
+
children: [
|
|
49387
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: videoGridSpotlightClass, children: spotlightParticipant && /* @__PURE__ */ jsxRuntime.jsx(
|
|
49388
|
+
VideoTile,
|
|
49389
|
+
{
|
|
49390
|
+
name: spotlightParticipant.name,
|
|
49391
|
+
micState: spotlightParticipant.micState ?? "on",
|
|
49392
|
+
speaking: spotlightParticipant.speaking,
|
|
49393
|
+
pinned: spotlightParticipant.pinned
|
|
49394
|
+
},
|
|
49395
|
+
spotlightParticipant.id
|
|
49396
|
+
) }),
|
|
49397
|
+
filmstrip.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: videoGridFilmstripClass, children: filmstrip.map((p2) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: videoGridFilmstripTileClass, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
49398
|
+
VideoTile,
|
|
49399
|
+
{
|
|
49400
|
+
name: p2.name,
|
|
49401
|
+
micState: p2.micState ?? "on",
|
|
49402
|
+
speaking: p2.speaking,
|
|
49403
|
+
pinned: p2.pinned
|
|
49404
|
+
}
|
|
49405
|
+
) }, p2.id)) })
|
|
49406
|
+
]
|
|
49407
|
+
}
|
|
49408
|
+
);
|
|
49409
|
+
}
|
|
49410
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49411
|
+
"div",
|
|
49412
|
+
{
|
|
49413
|
+
ref,
|
|
49414
|
+
className: cn(videoGridVariants({ layout: effectiveLayout }), className),
|
|
49415
|
+
style: gridStyle,
|
|
49416
|
+
...api.ariaProps,
|
|
49417
|
+
...api.dataAttributes,
|
|
49418
|
+
...props,
|
|
49419
|
+
children: participants.map((p2) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
49420
|
+
VideoTile,
|
|
49421
|
+
{
|
|
49422
|
+
name: p2.name,
|
|
49423
|
+
micState: p2.micState ?? "on",
|
|
49424
|
+
speaking: p2.speaking,
|
|
49425
|
+
pinned: p2.pinned
|
|
49426
|
+
},
|
|
49427
|
+
p2.id
|
|
49428
|
+
))
|
|
49429
|
+
}
|
|
49430
|
+
);
|
|
49431
|
+
}
|
|
49432
|
+
);
|
|
49433
|
+
VideoGrid.displayName = "VideoGrid";
|
|
49434
|
+
|
|
49435
|
+
// ../call-controls/dist/index.js
|
|
49436
|
+
function createCallControls(_props = {}) {
|
|
49437
|
+
const ariaProps = {
|
|
49438
|
+
role: "toolbar",
|
|
49439
|
+
"aria-label": "Call controls"
|
|
49440
|
+
};
|
|
49441
|
+
const dataAttributes = {
|
|
49442
|
+
"data-component": "call-controls"
|
|
49443
|
+
};
|
|
49444
|
+
return { ariaProps, dataAttributes };
|
|
49445
|
+
}
|
|
49446
|
+
var callControlsVariants = cva({
|
|
49447
|
+
base: [
|
|
49448
|
+
"inline-flex items-center justify-center gap-2",
|
|
49449
|
+
"rounded-xl bg-card px-4 py-3",
|
|
49450
|
+
"shadow-sm border border-border"
|
|
49451
|
+
].join(" "),
|
|
49452
|
+
variants: {
|
|
49453
|
+
size: {
|
|
49454
|
+
sm: "gap-1.5 px-3 py-2",
|
|
49455
|
+
md: "gap-2 px-4 py-3"
|
|
49456
|
+
}
|
|
49457
|
+
},
|
|
49458
|
+
defaultVariants: {
|
|
49459
|
+
size: "md"
|
|
49460
|
+
}
|
|
49461
|
+
});
|
|
49462
|
+
var callControlButtonVariants = cva({
|
|
49463
|
+
base: [
|
|
49464
|
+
"inline-flex flex-col items-center justify-center rounded-full",
|
|
49465
|
+
"font-medium transition-colors",
|
|
49466
|
+
"focus-visible:outline-none focus-visible:ring-2",
|
|
49467
|
+
"focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
49468
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
49469
|
+
"cursor-pointer"
|
|
49470
|
+
].join(" "),
|
|
49471
|
+
variants: {
|
|
49472
|
+
size: {
|
|
49473
|
+
sm: "size-9 text-xs",
|
|
49474
|
+
md: "size-11 text-xs"
|
|
49475
|
+
},
|
|
49476
|
+
tone: {
|
|
49477
|
+
default: "bg-muted text-foreground hover:bg-muted/80",
|
|
49478
|
+
active: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
49479
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
49480
|
+
}
|
|
49481
|
+
},
|
|
49482
|
+
defaultVariants: {
|
|
49483
|
+
size: "md",
|
|
49484
|
+
tone: "default"
|
|
49485
|
+
}
|
|
49486
|
+
});
|
|
49487
|
+
var callControlLabelClass = "sr-only text-[10px] leading-none mt-0.5";
|
|
49488
|
+
var CallControlButton = React11__namespace.forwardRef(
|
|
49489
|
+
({
|
|
49490
|
+
label,
|
|
49491
|
+
icon,
|
|
49492
|
+
tone = "default",
|
|
49493
|
+
pressed,
|
|
49494
|
+
size = "md",
|
|
49495
|
+
className,
|
|
49496
|
+
...props
|
|
49497
|
+
}, ref) => {
|
|
49498
|
+
const ariaPressedProps = pressed !== void 0 ? { "aria-pressed": pressed } : {};
|
|
49499
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49500
|
+
"button",
|
|
49501
|
+
{
|
|
49502
|
+
ref,
|
|
49503
|
+
type: "button",
|
|
49504
|
+
"aria-label": label,
|
|
49505
|
+
...ariaPressedProps,
|
|
49506
|
+
className: cn(callControlButtonVariants({ tone, size }), className),
|
|
49507
|
+
...props,
|
|
49508
|
+
children: [
|
|
49509
|
+
icon,
|
|
49510
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: callControlLabelClass, children: label })
|
|
49511
|
+
]
|
|
49512
|
+
}
|
|
49513
|
+
);
|
|
49514
|
+
}
|
|
49515
|
+
);
|
|
49516
|
+
CallControlButton.displayName = "CallControlButton";
|
|
49517
|
+
var CallControls = React11__namespace.forwardRef(
|
|
49518
|
+
({ size = "md", className, children, ...props }, ref) => {
|
|
49519
|
+
const api = createCallControls();
|
|
49520
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49521
|
+
"div",
|
|
49522
|
+
{
|
|
49523
|
+
ref,
|
|
49524
|
+
className: cn(callControlsVariants({ size }), className),
|
|
49525
|
+
...api.ariaProps,
|
|
49526
|
+
...api.dataAttributes,
|
|
49527
|
+
...props,
|
|
49528
|
+
children
|
|
49529
|
+
}
|
|
49530
|
+
);
|
|
49531
|
+
}
|
|
49532
|
+
);
|
|
49533
|
+
CallControls.displayName = "CallControls";
|
|
49534
|
+
|
|
49535
|
+
// ../live-captions/dist/index.js
|
|
49536
|
+
function visibleCues(cues, maxLines = 2) {
|
|
49537
|
+
if (maxLines <= 0) return [];
|
|
49538
|
+
return cues.slice(-maxLines);
|
|
49539
|
+
}
|
|
49540
|
+
function createLiveCaptions() {
|
|
49541
|
+
const ariaProps = {
|
|
49542
|
+
role: "log",
|
|
49543
|
+
"aria-live": "polite",
|
|
49544
|
+
"aria-atomic": false
|
|
49545
|
+
};
|
|
49546
|
+
const dataAttributes = {
|
|
49547
|
+
"data-component": "live-captions"
|
|
49548
|
+
};
|
|
49549
|
+
return { ariaProps, dataAttributes };
|
|
49550
|
+
}
|
|
49551
|
+
var liveCaptionsVariants = cva({
|
|
49552
|
+
base: [
|
|
49553
|
+
"relative mx-auto w-full max-w-2xl rounded-xl",
|
|
49554
|
+
"bg-card/80 backdrop-blur-sm",
|
|
49555
|
+
"px-4 py-3 space-y-1"
|
|
49556
|
+
].join(" "),
|
|
49557
|
+
variants: {
|
|
49558
|
+
/** Controls how the container is positioned in the layout. */
|
|
49559
|
+
position: {
|
|
49560
|
+
/** Sits in normal document flow (default). */
|
|
49561
|
+
static: "",
|
|
49562
|
+
/** Absolutely positioned — consumer places it with inset utilities. */
|
|
49563
|
+
absolute: "absolute"
|
|
49564
|
+
}
|
|
49565
|
+
},
|
|
49566
|
+
defaultVariants: {
|
|
49567
|
+
position: "static"
|
|
49568
|
+
}
|
|
49569
|
+
});
|
|
49570
|
+
var liveCaptionsCueVariants = cva({
|
|
49571
|
+
base: "text-sm leading-snug text-foreground",
|
|
49572
|
+
variants: {
|
|
49573
|
+
interim: {
|
|
49574
|
+
true: "opacity-60 italic",
|
|
49575
|
+
false: ""
|
|
49576
|
+
}
|
|
49577
|
+
},
|
|
49578
|
+
defaultVariants: {
|
|
49579
|
+
interim: "false"
|
|
49580
|
+
}
|
|
49581
|
+
});
|
|
49582
|
+
var liveCaptionsSpeakerClass = "font-medium text-muted-foreground";
|
|
49583
|
+
var LiveCaptions = React11__namespace.forwardRef(
|
|
49584
|
+
({ cues, maxLines = 2, position = "static", className, ...props }, ref) => {
|
|
49585
|
+
const { ariaProps, dataAttributes } = createLiveCaptions();
|
|
49586
|
+
const shown = visibleCues(cues, maxLines);
|
|
49587
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49588
|
+
"div",
|
|
49589
|
+
{
|
|
49590
|
+
ref,
|
|
49591
|
+
className: cn(liveCaptionsVariants({ position }), className),
|
|
49592
|
+
...ariaProps,
|
|
49593
|
+
...dataAttributes,
|
|
49594
|
+
...props,
|
|
49595
|
+
children: shown.map((cue) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
49596
|
+
"p",
|
|
49597
|
+
{
|
|
49598
|
+
className: liveCaptionsCueVariants({
|
|
49599
|
+
interim: cue.final === false ? "true" : "false"
|
|
49600
|
+
}),
|
|
49601
|
+
children: cue.speaker ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
49602
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: liveCaptionsSpeakerClass, children: cue.speaker }),
|
|
49603
|
+
`: ${cue.text}`
|
|
49604
|
+
] }) : cue.text
|
|
49605
|
+
},
|
|
49606
|
+
cue.id
|
|
49607
|
+
))
|
|
49608
|
+
}
|
|
49609
|
+
);
|
|
49610
|
+
}
|
|
49611
|
+
);
|
|
49612
|
+
LiveCaptions.displayName = "LiveCaptions";
|
|
49613
|
+
|
|
49614
|
+
// ../live-transcript/dist/index.js
|
|
49615
|
+
function groupConsecutiveBySpeaker(entries) {
|
|
49616
|
+
const blocks = [];
|
|
49617
|
+
for (const entry of entries) {
|
|
49618
|
+
const last = blocks[blocks.length - 1];
|
|
49619
|
+
if (last && last.speaker === entry.speaker) {
|
|
49620
|
+
last.texts.push(entry.text);
|
|
49621
|
+
} else {
|
|
49622
|
+
blocks.push({
|
|
49623
|
+
speaker: entry.speaker,
|
|
49624
|
+
timestamp: entry.timestamp,
|
|
49625
|
+
speakerColor: entry.speakerColor,
|
|
49626
|
+
texts: [entry.text]
|
|
49627
|
+
});
|
|
49628
|
+
}
|
|
49629
|
+
}
|
|
49630
|
+
return blocks;
|
|
49631
|
+
}
|
|
49632
|
+
function createLiveTranscript() {
|
|
49633
|
+
const ariaProps = {
|
|
49634
|
+
role: "log",
|
|
49635
|
+
"aria-live": "polite"
|
|
49636
|
+
};
|
|
49637
|
+
const dataAttributes = {
|
|
49638
|
+
"data-component": "live-transcript"
|
|
49639
|
+
};
|
|
49640
|
+
return { ariaProps, dataAttributes };
|
|
49641
|
+
}
|
|
49642
|
+
var liveTranscriptVariants = cva({
|
|
49643
|
+
base: "flex flex-col overflow-y-auto p-4 gap-4",
|
|
49644
|
+
variants: {
|
|
49645
|
+
compact: {
|
|
49646
|
+
true: "gap-2 p-3",
|
|
49647
|
+
false: ""
|
|
49648
|
+
}
|
|
49649
|
+
},
|
|
49650
|
+
defaultVariants: {
|
|
49651
|
+
compact: "false"
|
|
49652
|
+
}
|
|
49653
|
+
});
|
|
49654
|
+
var transcriptBlockVariants = cva({
|
|
49655
|
+
base: "flex flex-col gap-1",
|
|
49656
|
+
variants: {
|
|
49657
|
+
compact: {
|
|
49658
|
+
true: "gap-0.5",
|
|
49659
|
+
false: ""
|
|
49660
|
+
}
|
|
49661
|
+
},
|
|
49662
|
+
defaultVariants: {
|
|
49663
|
+
compact: "false"
|
|
49664
|
+
}
|
|
49665
|
+
});
|
|
49666
|
+
var transcriptSpeakerRowClass = "flex items-baseline gap-2";
|
|
49667
|
+
var transcriptSpeakerNameClass = "text-sm font-semibold text-foreground leading-snug";
|
|
49668
|
+
var transcriptTimestampClass = "text-xs text-muted-foreground tabular-nums";
|
|
49669
|
+
var transcriptTextLineClass = "text-sm text-foreground/80 leading-relaxed";
|
|
49670
|
+
var LiveTranscript = React11__namespace.forwardRef(({ entries, compact = false, className, ...props }, ref) => {
|
|
49671
|
+
const api = createLiveTranscript();
|
|
49672
|
+
const blocks = React11__namespace.useMemo(
|
|
49673
|
+
() => groupConsecutiveBySpeaker(entries),
|
|
49674
|
+
[entries]
|
|
49675
|
+
);
|
|
49676
|
+
const compactVariant = compact ? "true" : "false";
|
|
49677
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49678
|
+
"div",
|
|
49679
|
+
{
|
|
49680
|
+
ref,
|
|
49681
|
+
className: cn(liveTranscriptVariants({ compact: compactVariant }), className),
|
|
49682
|
+
...api.ariaProps,
|
|
49683
|
+
...api.dataAttributes,
|
|
49684
|
+
...props,
|
|
49685
|
+
children: blocks.map((block, blockIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49686
|
+
"div",
|
|
49687
|
+
{
|
|
49688
|
+
className: transcriptBlockVariants({ compact: compactVariant }),
|
|
49689
|
+
children: [
|
|
49690
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: transcriptSpeakerRowClass, children: [
|
|
49691
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
49692
|
+
"span",
|
|
49693
|
+
{
|
|
49694
|
+
className: transcriptSpeakerNameClass,
|
|
49695
|
+
style: block.speakerColor ? { color: block.speakerColor } : void 0,
|
|
49696
|
+
children: block.speaker
|
|
49697
|
+
}
|
|
49698
|
+
),
|
|
49699
|
+
block.timestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: transcriptTimestampClass, children: block.timestamp })
|
|
49700
|
+
] }),
|
|
49701
|
+
block.texts.map((text, textIndex) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
49702
|
+
"p",
|
|
49703
|
+
{
|
|
49704
|
+
className: transcriptTextLineClass,
|
|
49705
|
+
children: text
|
|
49706
|
+
},
|
|
49707
|
+
textIndex
|
|
49708
|
+
))
|
|
49709
|
+
]
|
|
49710
|
+
},
|
|
49711
|
+
`${block.speaker}-${blockIndex}`
|
|
49712
|
+
))
|
|
49713
|
+
}
|
|
49714
|
+
);
|
|
49715
|
+
});
|
|
49716
|
+
LiveTranscript.displayName = "LiveTranscript";
|
|
49717
|
+
|
|
49718
|
+
// ../audio-room/dist/index.js
|
|
49719
|
+
function getInitials4(name) {
|
|
49720
|
+
const words = name.trim().split(/\s+/).filter((w2) => /[A-Za-z]/.test(w2));
|
|
49721
|
+
if (words.length === 0) return "";
|
|
49722
|
+
if (words.length === 1) return words[0][0].toUpperCase();
|
|
49723
|
+
return (words[0][0] + words[words.length - 1][0]).toUpperCase();
|
|
49724
|
+
}
|
|
49725
|
+
function orbColumns(count) {
|
|
49726
|
+
if (count <= 1) return 1;
|
|
49727
|
+
if (count <= 4) return 2;
|
|
49728
|
+
if (count <= 9) return 3;
|
|
49729
|
+
return 4;
|
|
49730
|
+
}
|
|
49731
|
+
function createAudioRoom() {
|
|
49732
|
+
return {
|
|
49733
|
+
ariaProps: { role: "group" },
|
|
49734
|
+
dataAttributes: {
|
|
49735
|
+
"data-component": "audio-room"
|
|
49736
|
+
}
|
|
49737
|
+
};
|
|
49738
|
+
}
|
|
49739
|
+
var audioRoomVariants = cva({
|
|
49740
|
+
base: "grid place-items-center gap-6 p-6 w-full",
|
|
49741
|
+
variants: {},
|
|
49742
|
+
defaultVariants: {}
|
|
49743
|
+
});
|
|
49744
|
+
var audioRoomOrbCellVariants = cva({
|
|
49745
|
+
base: "flex flex-col items-center gap-2",
|
|
49746
|
+
variants: {},
|
|
49747
|
+
defaultVariants: {}
|
|
49748
|
+
});
|
|
49749
|
+
var speakingOrbVariants = cva({
|
|
49750
|
+
base: [
|
|
49751
|
+
"relative inline-flex items-center justify-center",
|
|
49752
|
+
"size-20 rounded-full",
|
|
49753
|
+
"bg-muted text-muted-foreground font-semibold text-xl select-none",
|
|
49754
|
+
"overflow-hidden",
|
|
49755
|
+
"transition-shadow duration-300"
|
|
49756
|
+
].join(" "),
|
|
49757
|
+
variants: {
|
|
49758
|
+
speaking: {
|
|
49759
|
+
true: [
|
|
49760
|
+
"ring-4 ring-primary ring-offset-2 ring-offset-background",
|
|
49761
|
+
"shadow-[0_0_0_4px_hsl(var(--primary)/0.25),0_0_16px_4px_hsl(var(--primary)/0.35)]"
|
|
49762
|
+
].join(" "),
|
|
49763
|
+
false: "ring-2 ring-border"
|
|
49764
|
+
},
|
|
49765
|
+
muted: {
|
|
49766
|
+
true: "opacity-60",
|
|
49767
|
+
false: ""
|
|
49768
|
+
}
|
|
49769
|
+
},
|
|
49770
|
+
defaultVariants: {
|
|
49771
|
+
speaking: "false",
|
|
49772
|
+
muted: "false"
|
|
49773
|
+
}
|
|
49774
|
+
});
|
|
49775
|
+
var audioRoomNameLabelClass = "text-sm font-medium text-foreground text-center max-w-[6rem] truncate";
|
|
49776
|
+
var audioRoomMutedBadgeClass = [
|
|
49777
|
+
"absolute bottom-0 right-0",
|
|
49778
|
+
"inline-flex items-center justify-center",
|
|
49779
|
+
"size-6 rounded-full",
|
|
49780
|
+
"bg-destructive text-destructive-foreground",
|
|
49781
|
+
"text-[10px] leading-none",
|
|
49782
|
+
"border-2 border-background",
|
|
49783
|
+
"translate-x-1 translate-y-1"
|
|
49784
|
+
].join(" ");
|
|
49785
|
+
var audioRoomHandBadgeClass = [
|
|
49786
|
+
"absolute top-0 right-0",
|
|
49787
|
+
"inline-flex items-center justify-center",
|
|
49788
|
+
"size-6 rounded-full",
|
|
49789
|
+
"bg-warning text-warning-foreground",
|
|
49790
|
+
"text-[12px] leading-none",
|
|
49791
|
+
"border-2 border-background",
|
|
49792
|
+
"translate-x-1 -translate-y-1"
|
|
49793
|
+
].join(" ");
|
|
49794
|
+
var SpeakingOrb = React11__namespace.forwardRef(
|
|
49795
|
+
({
|
|
49796
|
+
name,
|
|
49797
|
+
avatarUrl,
|
|
49798
|
+
speaking = false,
|
|
49799
|
+
muted = false,
|
|
49800
|
+
handRaised = false,
|
|
49801
|
+
className,
|
|
49802
|
+
...props
|
|
49803
|
+
}, ref) => {
|
|
49804
|
+
const initials = getInitials4(name);
|
|
49805
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49806
|
+
"div",
|
|
49807
|
+
{
|
|
49808
|
+
ref,
|
|
49809
|
+
role: "img",
|
|
49810
|
+
"aria-label": name,
|
|
49811
|
+
"data-speaking": speaking ? "true" : "false",
|
|
49812
|
+
"data-muted": muted ? "true" : "false",
|
|
49813
|
+
"data-hand-raised": handRaised ? "true" : "false",
|
|
49814
|
+
className: cn(
|
|
49815
|
+
speakingOrbVariants({
|
|
49816
|
+
speaking: speaking ? "true" : "false",
|
|
49817
|
+
muted: muted ? "true" : "false"
|
|
49818
|
+
}),
|
|
49819
|
+
className
|
|
49820
|
+
),
|
|
49821
|
+
...props,
|
|
49822
|
+
children: [
|
|
49823
|
+
avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
49824
|
+
"img",
|
|
49825
|
+
{
|
|
49826
|
+
src: avatarUrl,
|
|
49827
|
+
alt: name,
|
|
49828
|
+
className: "absolute inset-0 size-full object-cover"
|
|
49829
|
+
}
|
|
49830
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: initials }),
|
|
49831
|
+
muted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: audioRoomMutedBadgeClass, "aria-label": "Muted", children: "\u{1F507}" }),
|
|
49832
|
+
handRaised && /* @__PURE__ */ jsxRuntime.jsx("span", { className: audioRoomHandBadgeClass, "aria-label": "Hand raised", children: "\u270B" })
|
|
49833
|
+
]
|
|
49834
|
+
}
|
|
49835
|
+
);
|
|
49836
|
+
}
|
|
49837
|
+
);
|
|
49838
|
+
SpeakingOrb.displayName = "SpeakingOrb";
|
|
49839
|
+
var AudioRoom = React11__namespace.forwardRef(
|
|
49840
|
+
({ participants, className, ...props }, ref) => {
|
|
49841
|
+
const cols = orbColumns(participants.length);
|
|
49842
|
+
const { ariaProps, dataAttributes } = createAudioRoom();
|
|
49843
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49844
|
+
"div",
|
|
49845
|
+
{
|
|
49846
|
+
ref,
|
|
49847
|
+
className: cn(audioRoomVariants(), className),
|
|
49848
|
+
style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
|
|
49849
|
+
...ariaProps,
|
|
49850
|
+
...dataAttributes,
|
|
49851
|
+
...props,
|
|
49852
|
+
children: participants.map((participant) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: audioRoomOrbCellVariants(), children: [
|
|
49853
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
49854
|
+
SpeakingOrb,
|
|
49855
|
+
{
|
|
49856
|
+
name: participant.name,
|
|
49857
|
+
avatarUrl: participant.avatarUrl,
|
|
49858
|
+
speaking: participant.speaking,
|
|
49859
|
+
muted: participant.muted,
|
|
49860
|
+
handRaised: participant.handRaised
|
|
49861
|
+
}
|
|
49862
|
+
),
|
|
49863
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: audioRoomNameLabelClass, children: participant.name })
|
|
49864
|
+
] }, participant.id))
|
|
49865
|
+
}
|
|
49866
|
+
);
|
|
49867
|
+
}
|
|
49868
|
+
);
|
|
49869
|
+
AudioRoom.displayName = "AudioRoom";
|
|
49870
|
+
|
|
49871
|
+
// ../floating-reactions/dist/index.js
|
|
49872
|
+
var REACTION_LIFETIME_MS = 3e3;
|
|
49873
|
+
function laneOffsetPercent(lane = 0, lanes = 5) {
|
|
49874
|
+
if (lanes <= 0) return 50;
|
|
49875
|
+
const clamped = Math.max(0, Math.min(lane, lanes - 1));
|
|
49876
|
+
const step = 100 / lanes;
|
|
49877
|
+
return step * clamped + step / 2;
|
|
49878
|
+
}
|
|
49879
|
+
function createFloatingReactions() {
|
|
49880
|
+
const ariaProps = {
|
|
49881
|
+
role: "status",
|
|
49882
|
+
"aria-live": "polite",
|
|
49883
|
+
"aria-label": "Reactions"
|
|
49884
|
+
};
|
|
49885
|
+
const dataAttributes = {
|
|
49886
|
+
"data-component": "floating-reactions"
|
|
49887
|
+
};
|
|
49888
|
+
return { ariaProps, dataAttributes };
|
|
49889
|
+
}
|
|
49890
|
+
var floatingReactionsVariants = cva({
|
|
49891
|
+
base: "absolute inset-0 pointer-events-none overflow-hidden",
|
|
49892
|
+
variants: {
|
|
49893
|
+
/**
|
|
49894
|
+
* Whether the overlay is currently active (has reactions). The parent may
|
|
49895
|
+
* toggle visibility, but we keep the node mounted to preserve live-region
|
|
49896
|
+
* semantics.
|
|
49897
|
+
*/
|
|
49898
|
+
active: {
|
|
49899
|
+
true: "",
|
|
49900
|
+
false: ""
|
|
49901
|
+
}
|
|
49902
|
+
},
|
|
49903
|
+
defaultVariants: {
|
|
49904
|
+
active: "false"
|
|
49905
|
+
}
|
|
49906
|
+
});
|
|
49907
|
+
var floatingReactionItemClass = [
|
|
49908
|
+
"absolute bottom-4",
|
|
49909
|
+
"text-3xl leading-none select-none",
|
|
49910
|
+
"animate-[float-up_3s_ease-out_forwards]"
|
|
49911
|
+
].join(" ");
|
|
49912
|
+
var floatingReactionLabelClass = "sr-only";
|
|
49913
|
+
var FloatingReactions = React11__namespace.forwardRef(({ reactions, lanes = 5, className, ...props }, ref) => {
|
|
49914
|
+
const { ariaProps, dataAttributes } = createFloatingReactions();
|
|
49915
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49916
|
+
"div",
|
|
49917
|
+
{
|
|
49918
|
+
ref,
|
|
49919
|
+
className: cn(floatingReactionsVariants({ active: reactions.length > 0 ? "true" : "false" }), className),
|
|
49920
|
+
...ariaProps,
|
|
49921
|
+
...dataAttributes,
|
|
49922
|
+
...props,
|
|
49923
|
+
children: reactions.map((reaction) => {
|
|
49924
|
+
const left = laneOffsetPercent(reaction.lane ?? 0, lanes);
|
|
49925
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49926
|
+
"span",
|
|
49927
|
+
{
|
|
49928
|
+
className: floatingReactionItemClass,
|
|
49929
|
+
style: { left: `${left}%` },
|
|
49930
|
+
"aria-hidden": "true",
|
|
49931
|
+
children: [
|
|
49932
|
+
reaction.emoji,
|
|
49933
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: floatingReactionLabelClass, children: reaction.emoji })
|
|
49934
|
+
]
|
|
49935
|
+
},
|
|
49936
|
+
reaction.id
|
|
49937
|
+
);
|
|
49938
|
+
})
|
|
49939
|
+
}
|
|
49940
|
+
);
|
|
49941
|
+
});
|
|
49942
|
+
FloatingReactions.displayName = "FloatingReactions";
|
|
49943
|
+
function ReactionBurst({ emoji, lane = 0, lanes = 5 }) {
|
|
49944
|
+
const left = laneOffsetPercent(lane, lanes);
|
|
49945
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49946
|
+
"span",
|
|
49947
|
+
{
|
|
49948
|
+
className: floatingReactionItemClass,
|
|
49949
|
+
style: { left: `${left}%` },
|
|
49950
|
+
"aria-hidden": "true",
|
|
49951
|
+
children: [
|
|
49952
|
+
emoji,
|
|
49953
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: floatingReactionLabelClass, children: emoji })
|
|
49954
|
+
]
|
|
49955
|
+
}
|
|
49956
|
+
);
|
|
49957
|
+
}
|
|
49958
|
+
function useFloatingReactions() {
|
|
49959
|
+
const [reactions, setReactions] = React11__namespace.useState([]);
|
|
49960
|
+
const counter = React11__namespace.useRef(0);
|
|
49961
|
+
const emit2 = React11__namespace.useCallback(
|
|
49962
|
+
(emoji, options = {}) => {
|
|
49963
|
+
counter.current += 1;
|
|
49964
|
+
const id = options.id ?? `fr-${counter.current}`;
|
|
49965
|
+
const lane = options.lane;
|
|
49966
|
+
const reaction = { id, emoji, lane };
|
|
49967
|
+
setReactions((prev) => [...prev, reaction]);
|
|
49968
|
+
setTimeout(() => {
|
|
49969
|
+
setReactions((prev) => prev.filter((r2) => r2.id !== id));
|
|
49970
|
+
}, REACTION_LIFETIME_MS);
|
|
49971
|
+
},
|
|
49972
|
+
[]
|
|
49973
|
+
);
|
|
49974
|
+
const clear = React11__namespace.useCallback(() => {
|
|
49975
|
+
setReactions([]);
|
|
49976
|
+
}, []);
|
|
49977
|
+
return { reactions, emit: emit2, clear };
|
|
49978
|
+
}
|
|
49979
|
+
|
|
49980
|
+
// ../pre-call-lobby/dist/index.js
|
|
49981
|
+
function createPreCallLobby(props) {
|
|
49982
|
+
const { cameraOn, micOn } = props;
|
|
49983
|
+
return {
|
|
49984
|
+
ariaProps: {
|
|
49985
|
+
role: "group",
|
|
49986
|
+
"aria-label": "Device setup"
|
|
49987
|
+
},
|
|
49988
|
+
dataAttributes: {
|
|
49989
|
+
"data-camera": cameraOn ? "on" : "off",
|
|
49990
|
+
"data-mic": micOn ? "on" : "off"
|
|
49991
|
+
}
|
|
49992
|
+
};
|
|
49993
|
+
}
|
|
49994
|
+
function micLevelToBars(level, barCount) {
|
|
49995
|
+
if (barCount <= 0) return 0;
|
|
49996
|
+
const clamped = Math.min(1, Math.max(0, level));
|
|
49997
|
+
return Math.round(clamped * barCount);
|
|
49998
|
+
}
|
|
49999
|
+
var preCallLobbyVariants = cva({
|
|
50000
|
+
base: [
|
|
50001
|
+
"flex flex-col gap-6 rounded-2xl border border-border bg-card p-6 shadow-sm",
|
|
50002
|
+
"w-full max-w-lg mx-auto"
|
|
50003
|
+
].join(" "),
|
|
50004
|
+
variants: {},
|
|
50005
|
+
defaultVariants: {}
|
|
50006
|
+
});
|
|
50007
|
+
var preCallCameraVariants = cva({
|
|
50008
|
+
base: [
|
|
50009
|
+
"relative flex items-center justify-center overflow-hidden rounded-xl",
|
|
50010
|
+
"aspect-video w-full bg-muted"
|
|
50011
|
+
].join(" "),
|
|
50012
|
+
variants: {
|
|
50013
|
+
camera: {
|
|
50014
|
+
on: "",
|
|
50015
|
+
off: "bg-muted"
|
|
50016
|
+
}
|
|
50017
|
+
},
|
|
50018
|
+
defaultVariants: {
|
|
50019
|
+
camera: "on"
|
|
50020
|
+
}
|
|
50021
|
+
});
|
|
50022
|
+
var preCallCameraPlaceholderClass = [
|
|
50023
|
+
"flex flex-col items-center justify-center gap-2",
|
|
50024
|
+
"text-muted-foreground select-none"
|
|
50025
|
+
].join(" ");
|
|
50026
|
+
var preCallDeviceRowClass = "flex flex-col gap-1";
|
|
50027
|
+
var preCallDeviceLabelClass = "text-xs font-medium text-muted-foreground";
|
|
50028
|
+
var preCallDeviceSelectClass = [
|
|
50029
|
+
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1",
|
|
50030
|
+
"text-sm text-foreground shadow-sm",
|
|
50031
|
+
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
50032
|
+
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
50033
|
+
].join(" ");
|
|
50034
|
+
var preCallMicMeterClass = "flex items-end gap-0.5 h-5";
|
|
50035
|
+
var preCallMicBarVariants = cva({
|
|
50036
|
+
base: "w-1.5 rounded-sm transition-colors",
|
|
50037
|
+
variants: {
|
|
50038
|
+
lit: {
|
|
50039
|
+
true: "bg-primary",
|
|
50040
|
+
false: "bg-muted-foreground/30"
|
|
50041
|
+
}
|
|
50042
|
+
},
|
|
50043
|
+
defaultVariants: {
|
|
50044
|
+
lit: "false"
|
|
50045
|
+
}
|
|
50046
|
+
});
|
|
50047
|
+
var preCallControlsRowClass = "flex items-center gap-3";
|
|
50048
|
+
var preCallToggleVariants = cva({
|
|
50049
|
+
base: [
|
|
50050
|
+
"inline-flex items-center justify-center rounded-full p-2.5",
|
|
50051
|
+
"transition-colors focus-visible:outline-none focus-visible:ring-2",
|
|
50052
|
+
"focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
50053
|
+
].join(" "),
|
|
50054
|
+
variants: {
|
|
50055
|
+
active: {
|
|
50056
|
+
true: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
50057
|
+
false: "bg-destructive/10 text-destructive hover:bg-destructive/20"
|
|
50058
|
+
}
|
|
50059
|
+
},
|
|
50060
|
+
defaultVariants: {
|
|
50061
|
+
active: "false"
|
|
50062
|
+
}
|
|
50063
|
+
});
|
|
50064
|
+
var preCallJoinButtonClass = [
|
|
50065
|
+
"inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5",
|
|
50066
|
+
"bg-primary text-primary-foreground text-sm font-semibold",
|
|
50067
|
+
"shadow transition-colors hover:bg-primary/90",
|
|
50068
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
50069
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
50070
|
+
].join(" ");
|
|
50071
|
+
var MIC_BAR_COUNT = 8;
|
|
50072
|
+
var PreCallLobby = React11__namespace.forwardRef(
|
|
50073
|
+
({
|
|
50074
|
+
cameraOn,
|
|
50075
|
+
micOn,
|
|
50076
|
+
onToggleCamera,
|
|
50077
|
+
onToggleMic,
|
|
50078
|
+
micLevel = 0,
|
|
50079
|
+
cameras = [],
|
|
50080
|
+
microphones = [],
|
|
50081
|
+
speakers = [],
|
|
50082
|
+
selectedCamera,
|
|
50083
|
+
selectedMicrophone,
|
|
50084
|
+
selectedSpeaker,
|
|
50085
|
+
onDeviceChange,
|
|
50086
|
+
previewSlot,
|
|
50087
|
+
joinLabel = "Join",
|
|
50088
|
+
onJoin,
|
|
50089
|
+
className,
|
|
50090
|
+
...props
|
|
50091
|
+
}, ref) => {
|
|
50092
|
+
const api = createPreCallLobby({ cameraOn, micOn });
|
|
50093
|
+
const litBars = micLevelToBars(micLevel, MIC_BAR_COUNT);
|
|
50094
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
50095
|
+
"div",
|
|
50096
|
+
{
|
|
50097
|
+
ref,
|
|
50098
|
+
className: cn(preCallLobbyVariants(), className),
|
|
50099
|
+
...api.ariaProps,
|
|
50100
|
+
...api.dataAttributes,
|
|
50101
|
+
...props,
|
|
50102
|
+
children: [
|
|
50103
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: preCallCameraVariants({ camera: cameraOn ? "on" : "off" }), children: cameraOn && previewSlot ? previewSlot : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: preCallCameraPlaceholderClass, "data-testid": "camera-off-placeholder", children: [
|
|
50104
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
50105
|
+
"svg",
|
|
50106
|
+
{
|
|
50107
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
50108
|
+
width: "40",
|
|
50109
|
+
height: "40",
|
|
50110
|
+
viewBox: "0 0 24 24",
|
|
50111
|
+
fill: "none",
|
|
50112
|
+
stroke: "currentColor",
|
|
50113
|
+
strokeWidth: "1.5",
|
|
50114
|
+
strokeLinecap: "round",
|
|
50115
|
+
strokeLinejoin: "round",
|
|
50116
|
+
"aria-hidden": "true",
|
|
50117
|
+
children: [
|
|
50118
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
|
|
50119
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
|
|
50120
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" })
|
|
50121
|
+
]
|
|
50122
|
+
}
|
|
50123
|
+
),
|
|
50124
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "Camera is off" })
|
|
50125
|
+
] }) }),
|
|
50126
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
50127
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Mic" }),
|
|
50128
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: preCallMicMeterClass, "aria-label": `Mic level: ${litBars} of ${MIC_BAR_COUNT}`, children: Array.from({ length: MIC_BAR_COUNT }, (_2, i2) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
50129
|
+
"div",
|
|
50130
|
+
{
|
|
50131
|
+
"data-testid": `mic-bar-${i2}`,
|
|
50132
|
+
"data-lit": i2 < litBars ? "true" : "false",
|
|
50133
|
+
className: `${preCallMicBarVariants({ lit: i2 < litBars ? "true" : "false" })} ${/* Staggered heights for a visual meter effect */
|
|
50134
|
+
i2 < 2 ? "h-2" : i2 < 4 ? "h-3" : i2 < 6 ? "h-4" : "h-5"}`
|
|
50135
|
+
},
|
|
50136
|
+
i2
|
|
50137
|
+
)) })
|
|
50138
|
+
] }),
|
|
50139
|
+
cameras.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: preCallDeviceRowClass, children: [
|
|
50140
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "pcl-camera-select", className: preCallDeviceLabelClass, children: "Camera" }),
|
|
50141
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50142
|
+
"select",
|
|
50143
|
+
{
|
|
50144
|
+
id: "pcl-camera-select",
|
|
50145
|
+
className: preCallDeviceSelectClass,
|
|
50146
|
+
value: selectedCamera,
|
|
50147
|
+
onChange: (e2) => onDeviceChange?.("camera", e2.target.value),
|
|
50148
|
+
"data-testid": "camera-select",
|
|
50149
|
+
children: cameras.map((d2) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: d2.id, children: d2.label }, d2.id))
|
|
50150
|
+
}
|
|
50151
|
+
)
|
|
50152
|
+
] }),
|
|
50153
|
+
microphones.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: preCallDeviceRowClass, children: [
|
|
50154
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "pcl-mic-select", className: preCallDeviceLabelClass, children: "Microphone" }),
|
|
50155
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50156
|
+
"select",
|
|
50157
|
+
{
|
|
50158
|
+
id: "pcl-mic-select",
|
|
50159
|
+
className: preCallDeviceSelectClass,
|
|
50160
|
+
value: selectedMicrophone,
|
|
50161
|
+
onChange: (e2) => onDeviceChange?.("microphone", e2.target.value),
|
|
50162
|
+
"data-testid": "microphone-select",
|
|
50163
|
+
children: microphones.map((d2) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: d2.id, children: d2.label }, d2.id))
|
|
50164
|
+
}
|
|
50165
|
+
)
|
|
50166
|
+
] }),
|
|
50167
|
+
speakers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: preCallDeviceRowClass, children: [
|
|
50168
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "pcl-speaker-select", className: preCallDeviceLabelClass, children: "Speaker" }),
|
|
50169
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50170
|
+
"select",
|
|
50171
|
+
{
|
|
50172
|
+
id: "pcl-speaker-select",
|
|
50173
|
+
className: preCallDeviceSelectClass,
|
|
50174
|
+
value: selectedSpeaker,
|
|
50175
|
+
onChange: (e2) => onDeviceChange?.("speaker", e2.target.value),
|
|
50176
|
+
"data-testid": "speaker-select",
|
|
50177
|
+
children: speakers.map((d2) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: d2.id, children: d2.label }, d2.id))
|
|
50178
|
+
}
|
|
50179
|
+
)
|
|
50180
|
+
] }),
|
|
50181
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: preCallControlsRowClass, children: [
|
|
50182
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50183
|
+
"button",
|
|
50184
|
+
{
|
|
50185
|
+
type: "button",
|
|
50186
|
+
"aria-label": cameraOn ? "Turn camera off" : "Turn camera on",
|
|
50187
|
+
"aria-pressed": cameraOn,
|
|
50188
|
+
className: preCallToggleVariants({ active: cameraOn ? "true" : "false" }),
|
|
50189
|
+
onClick: onToggleCamera,
|
|
50190
|
+
"data-testid": "camera-toggle",
|
|
50191
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
50192
|
+
"svg",
|
|
50193
|
+
{
|
|
50194
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
50195
|
+
width: "18",
|
|
50196
|
+
height: "18",
|
|
50197
|
+
viewBox: "0 0 24 24",
|
|
50198
|
+
fill: "none",
|
|
50199
|
+
stroke: "currentColor",
|
|
50200
|
+
strokeWidth: "2",
|
|
50201
|
+
strokeLinecap: "round",
|
|
50202
|
+
strokeLinejoin: "round",
|
|
50203
|
+
"aria-hidden": "true",
|
|
50204
|
+
children: cameraOn ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
50205
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 7l-7 5 7 5V7z" }),
|
|
50206
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
|
|
50207
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
50208
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
|
|
50209
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.66 6H14a2 2 0 0 1 2 2v2.34l1 1L23 7v10" }),
|
|
50210
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2l10 10z" })
|
|
50211
|
+
] })
|
|
50212
|
+
}
|
|
50213
|
+
)
|
|
50214
|
+
}
|
|
50215
|
+
),
|
|
50216
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50217
|
+
"button",
|
|
50218
|
+
{
|
|
50219
|
+
type: "button",
|
|
50220
|
+
"aria-label": micOn ? "Mute microphone" : "Unmute microphone",
|
|
50221
|
+
"aria-pressed": micOn,
|
|
50222
|
+
className: preCallToggleVariants({ active: micOn ? "true" : "false" }),
|
|
50223
|
+
onClick: onToggleMic,
|
|
50224
|
+
"data-testid": "mic-toggle",
|
|
50225
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
50226
|
+
"svg",
|
|
50227
|
+
{
|
|
50228
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
50229
|
+
width: "18",
|
|
50230
|
+
height: "18",
|
|
50231
|
+
viewBox: "0 0 24 24",
|
|
50232
|
+
fill: "none",
|
|
50233
|
+
stroke: "currentColor",
|
|
50234
|
+
strokeWidth: "2",
|
|
50235
|
+
strokeLinecap: "round",
|
|
50236
|
+
strokeLinejoin: "round",
|
|
50237
|
+
"aria-hidden": "true",
|
|
50238
|
+
children: micOn ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
50239
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
|
|
50240
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
|
|
50241
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
|
|
50242
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
|
|
50243
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
50244
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
|
|
50245
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
|
|
50246
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
|
|
50247
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 9.34V4a3 3 0 0 0-5.68-1.33" }),
|
|
50248
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
|
|
50249
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
|
|
50250
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
|
|
50251
|
+
] })
|
|
50252
|
+
}
|
|
50253
|
+
)
|
|
50254
|
+
}
|
|
50255
|
+
)
|
|
50256
|
+
] }),
|
|
50257
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50258
|
+
"button",
|
|
50259
|
+
{
|
|
50260
|
+
type: "button",
|
|
50261
|
+
className: preCallJoinButtonClass,
|
|
50262
|
+
onClick: onJoin,
|
|
50263
|
+
"data-testid": "join-button",
|
|
50264
|
+
children: joinLabel
|
|
50265
|
+
}
|
|
50266
|
+
)
|
|
50267
|
+
]
|
|
50268
|
+
}
|
|
50269
|
+
);
|
|
50270
|
+
}
|
|
50271
|
+
);
|
|
50272
|
+
PreCallLobby.displayName = "PreCallLobby";
|
|
50273
|
+
|
|
50274
|
+
// ../infinite-canvas/dist/index.js
|
|
50275
|
+
function clampZoom(zoom, min = 0.25, max = 4) {
|
|
50276
|
+
return Math.min(Math.max(zoom, min), max);
|
|
50277
|
+
}
|
|
50278
|
+
function fitTransform(bounds, viewportW, viewportH, padding = 32) {
|
|
50279
|
+
const contentW = bounds.maxX - bounds.minX;
|
|
50280
|
+
const contentH = bounds.maxY - bounds.minY;
|
|
50281
|
+
if (contentW <= 0 || contentH <= 0 || viewportW <= 0 || viewportH <= 0) {
|
|
50282
|
+
return { zoom: 1, x: 0, y: 0 };
|
|
50283
|
+
}
|
|
50284
|
+
const availW = viewportW - padding * 2;
|
|
50285
|
+
const availH = viewportH - padding * 2;
|
|
50286
|
+
const rawZoom = Math.min(availW / contentW, availH / contentH);
|
|
50287
|
+
const zoom = clampZoom(rawZoom);
|
|
50288
|
+
const scaledW = contentW * zoom;
|
|
50289
|
+
const scaledH = contentH * zoom;
|
|
50290
|
+
const x2 = (viewportW - scaledW) / 2 - bounds.minX * zoom;
|
|
50291
|
+
const y2 = (viewportH - scaledH) / 2 - bounds.minY * zoom;
|
|
50292
|
+
return { zoom, x: x2, y: y2 };
|
|
50293
|
+
}
|
|
50294
|
+
function transformToCss(t2) {
|
|
50295
|
+
return `translate(${t2.x}px, ${t2.y}px) scale(${t2.zoom})`;
|
|
50296
|
+
}
|
|
50297
|
+
function createInfiniteCanvas(options = {}) {
|
|
50298
|
+
const { zoom = 1 } = options;
|
|
50299
|
+
return {
|
|
50300
|
+
ariaProps: {
|
|
50301
|
+
role: "group",
|
|
50302
|
+
"aria-label": "Canvas"
|
|
50303
|
+
},
|
|
50304
|
+
dataAttributes: {
|
|
50305
|
+
"data-zoom": zoom
|
|
50306
|
+
}
|
|
50307
|
+
};
|
|
50308
|
+
}
|
|
50309
|
+
var infiniteCanvasVariants = cva({
|
|
50310
|
+
base: "relative overflow-hidden bg-background",
|
|
50311
|
+
variants: {
|
|
50312
|
+
grid: {
|
|
50313
|
+
"true": [
|
|
50314
|
+
"bg-[radial-gradient(circle,hsl(var(--border))_1px,transparent_1px)]",
|
|
50315
|
+
"[background-size:24px_24px]"
|
|
50316
|
+
].join(" "),
|
|
50317
|
+
"false": ""
|
|
50318
|
+
}
|
|
50319
|
+
},
|
|
50320
|
+
defaultVariants: {
|
|
50321
|
+
grid: "false"
|
|
50322
|
+
}
|
|
50323
|
+
});
|
|
50324
|
+
var canvasContentClass = "absolute inset-0 origin-top-left will-change-transform";
|
|
50325
|
+
var canvasControlsClass = "absolute bottom-4 right-4 z-10 flex items-center gap-1";
|
|
50326
|
+
var canvasZoomButtonVariants = cva({
|
|
50327
|
+
base: [
|
|
50328
|
+
"inline-flex h-8 w-8 items-center justify-center rounded-md border border-border",
|
|
50329
|
+
"bg-card text-foreground text-sm font-medium",
|
|
50330
|
+
"hover:bg-muted transition-colors",
|
|
50331
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
50332
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
50333
|
+
].join(" "),
|
|
50334
|
+
variants: {},
|
|
50335
|
+
defaultVariants: {}
|
|
50336
|
+
});
|
|
50337
|
+
var InfiniteCanvas = React11__namespace.forwardRef(
|
|
50338
|
+
({
|
|
50339
|
+
zoom: zoomProp,
|
|
50340
|
+
x: xProp,
|
|
50341
|
+
y: yProp,
|
|
50342
|
+
pan = true,
|
|
50343
|
+
minZoom = 0.25,
|
|
50344
|
+
maxZoom = 4,
|
|
50345
|
+
showGrid = false,
|
|
50346
|
+
showControls = false,
|
|
50347
|
+
onTransformChange,
|
|
50348
|
+
contentBounds: contentBounds2,
|
|
50349
|
+
className,
|
|
50350
|
+
children,
|
|
50351
|
+
...props
|
|
50352
|
+
}, ref) => {
|
|
50353
|
+
const isControlled = zoomProp !== void 0 || xProp !== void 0 || yProp !== void 0;
|
|
50354
|
+
const [internal, setInternal] = React11__namespace.useState({
|
|
50355
|
+
zoom: 1,
|
|
50356
|
+
x: 0,
|
|
50357
|
+
y: 0
|
|
50358
|
+
});
|
|
50359
|
+
const transform = isControlled ? { zoom: zoomProp ?? 1, x: xProp ?? 0, y: yProp ?? 0 } : internal;
|
|
50360
|
+
const containerRef = React11__namespace.useRef(null);
|
|
50361
|
+
const dragging = React11__namespace.useRef(false);
|
|
50362
|
+
const dragStart = React11__namespace.useRef({ px: 0, py: 0, tx: 0, ty: 0 });
|
|
50363
|
+
const applyTransform = React11__namespace.useCallback(
|
|
50364
|
+
(next) => {
|
|
50365
|
+
if (!isControlled) setInternal(next);
|
|
50366
|
+
onTransformChange?.(next);
|
|
50367
|
+
},
|
|
50368
|
+
[isControlled, onTransformChange]
|
|
50369
|
+
);
|
|
50370
|
+
React11__namespace.useEffect(() => {
|
|
50371
|
+
const el = containerRef.current;
|
|
50372
|
+
if (!el) return;
|
|
50373
|
+
const onWheel = (e2) => {
|
|
50374
|
+
e2.preventDefault();
|
|
50375
|
+
setInternal((prev) => {
|
|
50376
|
+
const delta = -e2.deltaY * 1e-3;
|
|
50377
|
+
const next = {
|
|
50378
|
+
...prev,
|
|
50379
|
+
zoom: clampZoom(prev.zoom + prev.zoom * delta, minZoom, maxZoom)
|
|
50380
|
+
};
|
|
50381
|
+
onTransformChange?.(next);
|
|
50382
|
+
return next;
|
|
50383
|
+
});
|
|
50384
|
+
};
|
|
50385
|
+
el.addEventListener("wheel", onWheel, { passive: false });
|
|
50386
|
+
return () => el.removeEventListener("wheel", onWheel);
|
|
50387
|
+
}, [minZoom, maxZoom, onTransformChange]);
|
|
50388
|
+
React11__namespace.useEffect(() => {
|
|
50389
|
+
if (!pan || isControlled) return;
|
|
50390
|
+
const el = containerRef.current;
|
|
50391
|
+
if (!el) return;
|
|
50392
|
+
const onPointerDown = (e2) => {
|
|
50393
|
+
dragging.current = true;
|
|
50394
|
+
dragStart.current = {
|
|
50395
|
+
px: e2.clientX,
|
|
50396
|
+
py: e2.clientY,
|
|
50397
|
+
tx: internal.x,
|
|
50398
|
+
ty: internal.y
|
|
50399
|
+
};
|
|
50400
|
+
el.setPointerCapture(e2.pointerId);
|
|
50401
|
+
};
|
|
50402
|
+
const onPointerMove = (e2) => {
|
|
50403
|
+
if (!dragging.current) return;
|
|
50404
|
+
const dx = e2.clientX - dragStart.current.px;
|
|
50405
|
+
const dy = e2.clientY - dragStart.current.py;
|
|
50406
|
+
setInternal((prev) => {
|
|
50407
|
+
const next = {
|
|
50408
|
+
...prev,
|
|
50409
|
+
x: dragStart.current.tx + dx,
|
|
50410
|
+
y: dragStart.current.ty + dy
|
|
50411
|
+
};
|
|
50412
|
+
onTransformChange?.(next);
|
|
50413
|
+
return next;
|
|
50414
|
+
});
|
|
50415
|
+
};
|
|
50416
|
+
const onPointerUp = () => {
|
|
50417
|
+
dragging.current = false;
|
|
50418
|
+
};
|
|
50419
|
+
el.addEventListener("pointerdown", onPointerDown);
|
|
50420
|
+
el.addEventListener("pointermove", onPointerMove);
|
|
50421
|
+
el.addEventListener("pointerup", onPointerUp);
|
|
50422
|
+
el.addEventListener("pointercancel", onPointerUp);
|
|
50423
|
+
return () => {
|
|
50424
|
+
el.removeEventListener("pointerdown", onPointerDown);
|
|
50425
|
+
el.removeEventListener("pointermove", onPointerMove);
|
|
50426
|
+
el.removeEventListener("pointerup", onPointerUp);
|
|
50427
|
+
el.removeEventListener("pointercancel", onPointerUp);
|
|
50428
|
+
};
|
|
50429
|
+
}, [pan, isControlled, onTransformChange, internal.x, internal.y]);
|
|
50430
|
+
const handleZoomIn = () => {
|
|
50431
|
+
const next = { ...transform, zoom: clampZoom(transform.zoom * 1.25, minZoom, maxZoom) };
|
|
50432
|
+
applyTransform(next);
|
|
50433
|
+
};
|
|
50434
|
+
const handleZoomOut = () => {
|
|
50435
|
+
const next = { ...transform, zoom: clampZoom(transform.zoom / 1.25, minZoom, maxZoom) };
|
|
50436
|
+
applyTransform(next);
|
|
50437
|
+
};
|
|
50438
|
+
const handleFit = () => {
|
|
50439
|
+
const el = containerRef.current;
|
|
50440
|
+
if (!el) return;
|
|
50441
|
+
const { width, height } = el.getBoundingClientRect();
|
|
50442
|
+
const bounds = contentBounds2 ?? { minX: 0, minY: 0, maxX: width, maxY: height };
|
|
50443
|
+
applyTransform(fitTransform(bounds, width, height));
|
|
50444
|
+
};
|
|
50445
|
+
const api = createInfiniteCanvas({ zoom: transform.zoom });
|
|
50446
|
+
const setRefs = (node) => {
|
|
50447
|
+
containerRef.current = node;
|
|
50448
|
+
if (typeof ref === "function") ref(node);
|
|
50449
|
+
else if (ref) ref.current = node;
|
|
50450
|
+
};
|
|
50451
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
50452
|
+
"div",
|
|
50453
|
+
{
|
|
50454
|
+
ref: setRefs,
|
|
50455
|
+
className: cn(
|
|
50456
|
+
infiniteCanvasVariants({ grid: showGrid ? "true" : "false" }),
|
|
50457
|
+
className
|
|
50458
|
+
),
|
|
50459
|
+
...api.ariaProps,
|
|
50460
|
+
...api.dataAttributes,
|
|
50461
|
+
...props,
|
|
50462
|
+
children: [
|
|
50463
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50464
|
+
"div",
|
|
50465
|
+
{
|
|
50466
|
+
className: canvasContentClass,
|
|
50467
|
+
style: { transform: transformToCss(transform), transformOrigin: "0 0" },
|
|
50468
|
+
children
|
|
50469
|
+
}
|
|
50470
|
+
),
|
|
50471
|
+
showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: canvasControlsClass, "aria-label": "Zoom controls", children: [
|
|
50472
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50473
|
+
"button",
|
|
50474
|
+
{
|
|
50475
|
+
type: "button",
|
|
50476
|
+
className: canvasZoomButtonVariants(),
|
|
50477
|
+
"aria-label": "Zoom in",
|
|
50478
|
+
onClick: handleZoomIn,
|
|
50479
|
+
children: "+"
|
|
50480
|
+
}
|
|
50481
|
+
),
|
|
50482
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50483
|
+
"button",
|
|
50484
|
+
{
|
|
50485
|
+
type: "button",
|
|
50486
|
+
className: canvasZoomButtonVariants(),
|
|
50487
|
+
"aria-label": "Zoom out",
|
|
50488
|
+
onClick: handleZoomOut,
|
|
50489
|
+
children: "\u2212"
|
|
50490
|
+
}
|
|
50491
|
+
),
|
|
50492
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50493
|
+
"button",
|
|
50494
|
+
{
|
|
50495
|
+
type: "button",
|
|
50496
|
+
className: canvasZoomButtonVariants(),
|
|
50497
|
+
"aria-label": "Fit to content",
|
|
50498
|
+
onClick: handleFit,
|
|
50499
|
+
children: "\u229E"
|
|
50500
|
+
}
|
|
50501
|
+
)
|
|
50502
|
+
] })
|
|
50503
|
+
]
|
|
50504
|
+
}
|
|
50505
|
+
);
|
|
50506
|
+
}
|
|
50507
|
+
);
|
|
50508
|
+
InfiniteCanvas.displayName = "InfiniteCanvas";
|
|
50509
|
+
|
|
50510
|
+
// ../sticky-note/dist/index.js
|
|
50511
|
+
var STICKY_NOTE_COLORS = [
|
|
50512
|
+
"yellow",
|
|
50513
|
+
"pink",
|
|
50514
|
+
"blue",
|
|
50515
|
+
"green",
|
|
50516
|
+
"purple",
|
|
50517
|
+
"orange"
|
|
50518
|
+
];
|
|
50519
|
+
function nextStickyColor(color) {
|
|
50520
|
+
const index = STICKY_NOTE_COLORS.indexOf(color);
|
|
50521
|
+
const next = (index + 1) % STICKY_NOTE_COLORS.length;
|
|
50522
|
+
return STICKY_NOTE_COLORS[next];
|
|
50523
|
+
}
|
|
50524
|
+
function createStickyNote(options) {
|
|
50525
|
+
return {
|
|
50526
|
+
dataAttributes: { "data-color": options.color },
|
|
50527
|
+
ariaProps: { role: "group" }
|
|
50528
|
+
};
|
|
50529
|
+
}
|
|
50530
|
+
var stickyNoteVariants = cva({
|
|
50531
|
+
base: [
|
|
50532
|
+
"relative inline-flex flex-col gap-2 rounded-md p-4",
|
|
50533
|
+
"shadow-md",
|
|
50534
|
+
"min-w-[160px] min-h-[120px]"
|
|
50535
|
+
].join(" "),
|
|
50536
|
+
variants: {
|
|
50537
|
+
color: {
|
|
50538
|
+
yellow: "bg-yellow-100 text-yellow-900",
|
|
50539
|
+
pink: "bg-pink-100 text-pink-900",
|
|
50540
|
+
blue: "bg-blue-100 text-blue-900",
|
|
50541
|
+
green: "bg-green-100 text-green-900",
|
|
50542
|
+
purple: "bg-purple-100 text-purple-900",
|
|
50543
|
+
orange: "bg-orange-100 text-orange-900"
|
|
50544
|
+
}
|
|
50545
|
+
},
|
|
50546
|
+
defaultVariants: {
|
|
50547
|
+
color: "yellow"
|
|
50548
|
+
}
|
|
50549
|
+
});
|
|
50550
|
+
var stickyNoteTextClass = "flex-1 w-full resize-none bg-transparent text-sm leading-relaxed placeholder:opacity-60 outline-none";
|
|
50551
|
+
var stickyNoteAuthorClass = "mt-auto text-xs font-medium opacity-70 truncate";
|
|
50552
|
+
var StickyNote = React11__namespace.forwardRef(
|
|
50553
|
+
({
|
|
50554
|
+
color = "yellow",
|
|
50555
|
+
text,
|
|
50556
|
+
onTextChange,
|
|
50557
|
+
author,
|
|
50558
|
+
x: x2,
|
|
50559
|
+
y: y2,
|
|
50560
|
+
draggable = false,
|
|
50561
|
+
onMove,
|
|
50562
|
+
className,
|
|
50563
|
+
style,
|
|
50564
|
+
children,
|
|
50565
|
+
...props
|
|
50566
|
+
}, ref) => {
|
|
50567
|
+
const { ariaProps, dataAttributes } = createStickyNote({ color });
|
|
50568
|
+
const dragOrigin = React11__namespace.useRef(null);
|
|
50569
|
+
const positionStyle = x2 !== void 0 && y2 !== void 0 ? { position: "absolute", left: x2, top: y2 } : {};
|
|
50570
|
+
const handlePointerDown = React11__namespace.useCallback(
|
|
50571
|
+
(e2) => {
|
|
50572
|
+
if (!draggable || !onMove) return;
|
|
50573
|
+
if (e2.button !== 0) return;
|
|
50574
|
+
e2.currentTarget.setPointerCapture(e2.pointerId);
|
|
50575
|
+
dragOrigin.current = {
|
|
50576
|
+
pointerX: e2.clientX,
|
|
50577
|
+
pointerY: e2.clientY,
|
|
50578
|
+
noteX: x2 ?? 0,
|
|
50579
|
+
noteY: y2 ?? 0
|
|
50580
|
+
};
|
|
50581
|
+
},
|
|
50582
|
+
[draggable, onMove, x2, y2]
|
|
50583
|
+
);
|
|
50584
|
+
const handlePointerMove = React11__namespace.useCallback(
|
|
50585
|
+
(e2) => {
|
|
50586
|
+
if (!dragOrigin.current || !onMove) return;
|
|
50587
|
+
const dx = e2.clientX - dragOrigin.current.pointerX;
|
|
50588
|
+
const dy = e2.clientY - dragOrigin.current.pointerY;
|
|
50589
|
+
onMove({ x: dragOrigin.current.noteX + dx, y: dragOrigin.current.noteY + dy });
|
|
50590
|
+
},
|
|
50591
|
+
[onMove]
|
|
50592
|
+
);
|
|
50593
|
+
const handlePointerUp = React11__namespace.useCallback(() => {
|
|
50594
|
+
dragOrigin.current = null;
|
|
50595
|
+
}, []);
|
|
50596
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
50597
|
+
"div",
|
|
50598
|
+
{
|
|
50599
|
+
ref,
|
|
50600
|
+
className: cn(stickyNoteVariants({ color }), className),
|
|
50601
|
+
style: { ...positionStyle, ...style },
|
|
50602
|
+
...ariaProps,
|
|
50603
|
+
...dataAttributes,
|
|
50604
|
+
onPointerDown: draggable && onMove ? handlePointerDown : void 0,
|
|
50605
|
+
onPointerMove: draggable && onMove ? handlePointerMove : void 0,
|
|
50606
|
+
onPointerUp: draggable && onMove ? handlePointerUp : void 0,
|
|
50607
|
+
...props,
|
|
50608
|
+
children: [
|
|
50609
|
+
onTextChange != null ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
50610
|
+
"textarea",
|
|
50611
|
+
{
|
|
50612
|
+
className: stickyNoteTextClass,
|
|
50613
|
+
value: text ?? "",
|
|
50614
|
+
onChange: (e2) => onTextChange(e2.target.value),
|
|
50615
|
+
placeholder: "Type a note\u2026"
|
|
50616
|
+
}
|
|
50617
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${stickyNoteTextClass} whitespace-pre-wrap`, children: text ?? children }),
|
|
50618
|
+
author != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: stickyNoteAuthorClass, children: author })
|
|
50619
|
+
]
|
|
50620
|
+
}
|
|
50621
|
+
);
|
|
50622
|
+
}
|
|
50623
|
+
);
|
|
50624
|
+
StickyNote.displayName = "StickyNote";
|
|
50625
|
+
|
|
50626
|
+
// ../flow-editor/dist/index.js
|
|
50627
|
+
var DEFAULT_NODE_WIDTH = 160;
|
|
50628
|
+
var DEFAULT_NODE_HEIGHT = 48;
|
|
50629
|
+
function nodeById(nodes, id) {
|
|
50630
|
+
return nodes.find((n2) => n2.id === id);
|
|
50631
|
+
}
|
|
50632
|
+
function edgePath(source, target) {
|
|
50633
|
+
const sw = source.width ?? DEFAULT_NODE_WIDTH;
|
|
50634
|
+
const sh = source.height ?? DEFAULT_NODE_HEIGHT;
|
|
50635
|
+
const th = target.height ?? DEFAULT_NODE_HEIGHT;
|
|
50636
|
+
const x1 = source.x + sw;
|
|
50637
|
+
const y1 = source.y + sh / 2;
|
|
50638
|
+
const x2 = target.x;
|
|
50639
|
+
const y2 = target.y + th / 2;
|
|
50640
|
+
const dx = Math.abs(x2 - x1);
|
|
50641
|
+
const handleLen = Math.max(dx * 0.5, 40);
|
|
50642
|
+
const cx1 = x1 + handleLen;
|
|
50643
|
+
const cy1 = y1;
|
|
50644
|
+
const cx2 = x2 - handleLen;
|
|
50645
|
+
const cy2 = y2;
|
|
50646
|
+
return `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
|
|
50647
|
+
}
|
|
50648
|
+
function createFlowEditor() {
|
|
50649
|
+
return {
|
|
50650
|
+
ariaProps: {
|
|
50651
|
+
role: "group",
|
|
50652
|
+
"aria-label": "Flow editor"
|
|
50653
|
+
},
|
|
50654
|
+
dataAttributes: {
|
|
50655
|
+
"data-flow-editor": "true"
|
|
50656
|
+
}
|
|
50657
|
+
};
|
|
50658
|
+
}
|
|
50659
|
+
var flowEditorVariants = cva({
|
|
50660
|
+
base: "relative w-full overflow-hidden bg-background border border-border rounded-lg",
|
|
50661
|
+
variants: {
|
|
50662
|
+
size: {
|
|
50663
|
+
sm: "h-64",
|
|
50664
|
+
md: "h-96",
|
|
50665
|
+
lg: "h-[32rem]"
|
|
50666
|
+
}
|
|
50667
|
+
},
|
|
50668
|
+
defaultVariants: {
|
|
50669
|
+
size: "md"
|
|
50670
|
+
}
|
|
50671
|
+
});
|
|
50672
|
+
var flowNodeVariants = cva({
|
|
50673
|
+
base: [
|
|
50674
|
+
"absolute flex items-center justify-center rounded-md border",
|
|
50675
|
+
"bg-card border-border text-card-foreground text-sm font-medium",
|
|
50676
|
+
"cursor-pointer select-none transition-shadow",
|
|
50677
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
50678
|
+
].join(" "),
|
|
50679
|
+
variants: {
|
|
50680
|
+
selected: {
|
|
50681
|
+
true: "ring-2 ring-ring ring-primary shadow-md",
|
|
50682
|
+
false: "hover:border-primary/50 hover:shadow-sm"
|
|
50683
|
+
}
|
|
50684
|
+
},
|
|
50685
|
+
defaultVariants: {
|
|
50686
|
+
selected: "false"
|
|
50687
|
+
}
|
|
50688
|
+
});
|
|
50689
|
+
var flowNodeLabelClass = "px-3 py-2 truncate pointer-events-none";
|
|
50690
|
+
var flowEdgePathClass = "fill-none stroke-current stroke-2 transition-opacity";
|
|
50691
|
+
var flowEdgeLabelClass = "text-xs fill-muted-foreground select-none pointer-events-none";
|
|
50692
|
+
var FlowEditor = React11__namespace.forwardRef(
|
|
50693
|
+
({
|
|
50694
|
+
nodes,
|
|
50695
|
+
edges,
|
|
50696
|
+
onNodeClick,
|
|
50697
|
+
onNodeMove,
|
|
50698
|
+
renderNode,
|
|
50699
|
+
selectedId,
|
|
50700
|
+
showGrid = true,
|
|
50701
|
+
showControls = true,
|
|
50702
|
+
className,
|
|
50703
|
+
...props
|
|
50704
|
+
}, ref) => {
|
|
50705
|
+
const api = createFlowEditor();
|
|
50706
|
+
const dragRef = React11__namespace.useRef(null);
|
|
50707
|
+
const handlePointerDown = React11__namespace.useCallback(
|
|
50708
|
+
(event, node) => {
|
|
50709
|
+
if (!onNodeMove) return;
|
|
50710
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
50711
|
+
dragRef.current = {
|
|
50712
|
+
id: node.id,
|
|
50713
|
+
startPointerX: event.clientX,
|
|
50714
|
+
startPointerY: event.clientY,
|
|
50715
|
+
startNodeX: node.x,
|
|
50716
|
+
startNodeY: node.y
|
|
50717
|
+
};
|
|
50718
|
+
},
|
|
50719
|
+
[onNodeMove]
|
|
50720
|
+
);
|
|
50721
|
+
const handlePointerMove = React11__namespace.useCallback(
|
|
50722
|
+
(event) => {
|
|
50723
|
+
const drag = dragRef.current;
|
|
50724
|
+
if (!drag || !onNodeMove) return;
|
|
50725
|
+
const dx = event.clientX - drag.startPointerX;
|
|
50726
|
+
const dy = event.clientY - drag.startPointerY;
|
|
50727
|
+
onNodeMove(drag.id, drag.startNodeX + dx, drag.startNodeY + dy);
|
|
50728
|
+
},
|
|
50729
|
+
[onNodeMove]
|
|
50730
|
+
);
|
|
50731
|
+
const handlePointerUp = React11__namespace.useCallback(() => {
|
|
50732
|
+
dragRef.current = null;
|
|
50733
|
+
}, []);
|
|
50734
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
50735
|
+
"div",
|
|
50736
|
+
{
|
|
50737
|
+
ref,
|
|
50738
|
+
className: cn(flowEditorVariants(), className),
|
|
50739
|
+
...api.ariaProps,
|
|
50740
|
+
...api.dataAttributes,
|
|
50741
|
+
...props,
|
|
50742
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(InfiniteCanvas, { showGrid, showControls, children: [
|
|
50743
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50744
|
+
"svg",
|
|
50745
|
+
{
|
|
50746
|
+
className: "absolute inset-0 w-full h-full overflow-visible text-muted-foreground pointer-events-none",
|
|
50747
|
+
"aria-hidden": "true",
|
|
50748
|
+
children: edges.map((edge) => {
|
|
50749
|
+
const src = nodeById(nodes, edge.source);
|
|
50750
|
+
const tgt = nodeById(nodes, edge.target);
|
|
50751
|
+
if (!src || !tgt) return null;
|
|
50752
|
+
const d2 = edgePath(src, tgt);
|
|
50753
|
+
const midX = (src.x + (src.width ?? 160) + tgt.x) / 2;
|
|
50754
|
+
const midY = (src.y + (src.height ?? 48) / 2 + tgt.y + (tgt.height ?? 48) / 2) / 2;
|
|
50755
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
50756
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: d2, className: flowEdgePathClass }),
|
|
50757
|
+
edge.label != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
50758
|
+
"text",
|
|
50759
|
+
{
|
|
50760
|
+
x: midX,
|
|
50761
|
+
y: midY - 4,
|
|
50762
|
+
textAnchor: "middle",
|
|
50763
|
+
className: flowEdgeLabelClass,
|
|
50764
|
+
children: edge.label
|
|
50765
|
+
}
|
|
50766
|
+
)
|
|
50767
|
+
] }, edge.id);
|
|
50768
|
+
})
|
|
50769
|
+
}
|
|
50770
|
+
),
|
|
50771
|
+
nodes.map((node) => {
|
|
50772
|
+
const isSelected = node.selected || node.id === selectedId;
|
|
50773
|
+
const w2 = node.width ?? 160;
|
|
50774
|
+
const h5 = node.height ?? 48;
|
|
50775
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
50776
|
+
"div",
|
|
50777
|
+
{
|
|
50778
|
+
role: "button",
|
|
50779
|
+
tabIndex: 0,
|
|
50780
|
+
"aria-pressed": isSelected,
|
|
50781
|
+
"aria-label": node.label,
|
|
50782
|
+
className: flowNodeVariants({
|
|
50783
|
+
selected: isSelected ? "true" : "false"
|
|
50784
|
+
}),
|
|
50785
|
+
style: { left: node.x, top: node.y, width: w2, height: h5 },
|
|
50786
|
+
onClick: () => onNodeClick?.(node.id),
|
|
50787
|
+
onKeyDown: (e2) => {
|
|
50788
|
+
if (e2.key === "Enter" || e2.key === " ") {
|
|
50789
|
+
e2.preventDefault();
|
|
50790
|
+
onNodeClick?.(node.id);
|
|
50791
|
+
}
|
|
50792
|
+
},
|
|
50793
|
+
onPointerDown: (e2) => handlePointerDown(e2, node),
|
|
50794
|
+
onPointerMove: handlePointerMove,
|
|
50795
|
+
onPointerUp: handlePointerUp,
|
|
50796
|
+
children: renderNode ? renderNode(node) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: flowNodeLabelClass, children: node.label })
|
|
50797
|
+
},
|
|
50798
|
+
node.id
|
|
50799
|
+
);
|
|
50800
|
+
})
|
|
50801
|
+
] })
|
|
50802
|
+
}
|
|
50803
|
+
);
|
|
50804
|
+
}
|
|
50805
|
+
);
|
|
50806
|
+
FlowEditor.displayName = "FlowEditor";
|
|
50807
|
+
|
|
50808
|
+
// ../graph-view/dist/index.js
|
|
50809
|
+
function createGraphView() {
|
|
50810
|
+
return {
|
|
50811
|
+
ariaProps: {
|
|
50812
|
+
role: "group",
|
|
50813
|
+
"aria-label": "Knowledge graph"
|
|
50814
|
+
},
|
|
50815
|
+
dataAttributes: {}
|
|
50816
|
+
};
|
|
50817
|
+
}
|
|
50818
|
+
function nodeById2(nodes, id) {
|
|
50819
|
+
return nodes.find((n2) => n2.id === id);
|
|
50820
|
+
}
|
|
50821
|
+
function graphEdgePath(source, target) {
|
|
50822
|
+
const sx = source.x;
|
|
50823
|
+
const sy = source.y;
|
|
50824
|
+
const tx = target.x;
|
|
50825
|
+
const ty = target.y;
|
|
50826
|
+
const dy = Math.abs(ty - sy);
|
|
50827
|
+
const offset = Math.max(dy * 0.5, 40);
|
|
50828
|
+
return `M ${sx} ${sy} C ${sx} ${sy + offset}, ${tx} ${ty - offset}, ${tx} ${ty}`;
|
|
50829
|
+
}
|
|
50830
|
+
function summarizeStates(nodes) {
|
|
50831
|
+
const counts = {
|
|
50832
|
+
mastered: 0,
|
|
50833
|
+
"in-progress": 0,
|
|
50834
|
+
"not-started": 0,
|
|
50835
|
+
highlight: 0
|
|
50836
|
+
};
|
|
50837
|
+
for (const n2 of nodes) {
|
|
50838
|
+
const s2 = n2.state ?? "not-started";
|
|
50839
|
+
counts[s2] += 1;
|
|
50840
|
+
}
|
|
50841
|
+
return counts;
|
|
50842
|
+
}
|
|
50843
|
+
var graphViewVariants = cva({
|
|
50844
|
+
base: "relative w-full overflow-hidden rounded-lg border border-border bg-background",
|
|
50845
|
+
variants: {},
|
|
50846
|
+
defaultVariants: {}
|
|
50847
|
+
});
|
|
50848
|
+
var graphNodeVariants = cva({
|
|
50849
|
+
base: [
|
|
50850
|
+
"absolute inline-flex items-center justify-center rounded-md border px-2 py-1",
|
|
50851
|
+
"text-xs font-medium leading-none -translate-x-1/2 -translate-y-1/2",
|
|
50852
|
+
"transition-colors focus-visible:outline-none focus-visible:ring-2",
|
|
50853
|
+
"focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
50854
|
+
"cursor-default select-none"
|
|
50855
|
+
].join(" "),
|
|
50856
|
+
variants: {
|
|
50857
|
+
state: {
|
|
50858
|
+
mastered: "border-transparent bg-primary text-primary-foreground",
|
|
50859
|
+
"in-progress": "border-transparent bg-accent text-accent-foreground ring-2 ring-ring",
|
|
50860
|
+
"not-started": "border-transparent bg-muted text-muted-foreground",
|
|
50861
|
+
highlight: "border-primary bg-background text-foreground"
|
|
50862
|
+
},
|
|
50863
|
+
interactive: {
|
|
50864
|
+
true: "cursor-pointer hover:opacity-90",
|
|
50865
|
+
false: "cursor-default"
|
|
50866
|
+
}
|
|
50867
|
+
},
|
|
50868
|
+
defaultVariants: {
|
|
50869
|
+
state: "not-started",
|
|
50870
|
+
interactive: "false"
|
|
50871
|
+
}
|
|
50872
|
+
});
|
|
50873
|
+
var graphNodeLabelClass = "pointer-events-none whitespace-nowrap";
|
|
50874
|
+
var graphEdgeClass = "fill-none stroke-border stroke-[1.5] opacity-60";
|
|
50875
|
+
var graphLegendChipVariants = cva({
|
|
50876
|
+
base: "inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium",
|
|
50877
|
+
variants: {
|
|
50878
|
+
state: {
|
|
50879
|
+
mastered: "border-transparent bg-primary text-primary-foreground",
|
|
50880
|
+
"in-progress": "border-transparent bg-accent text-accent-foreground ring-1 ring-ring",
|
|
50881
|
+
"not-started": "border-transparent bg-muted text-muted-foreground",
|
|
50882
|
+
highlight: "border-primary bg-background text-foreground"
|
|
50883
|
+
}
|
|
50884
|
+
},
|
|
50885
|
+
defaultVariants: {
|
|
50886
|
+
state: "not-started"
|
|
50887
|
+
}
|
|
50888
|
+
});
|
|
50889
|
+
var STATE_LABELS = {
|
|
50890
|
+
mastered: "Mastered",
|
|
50891
|
+
"in-progress": "In Progress",
|
|
50892
|
+
"not-started": "Not Started",
|
|
50893
|
+
highlight: "Highlight"
|
|
50894
|
+
};
|
|
50895
|
+
var LEGEND_ORDER = ["mastered", "in-progress", "not-started", "highlight"];
|
|
50896
|
+
var GraphView = React11__namespace.forwardRef(
|
|
50897
|
+
({ nodes, edges, onNodeClick, showLegend = false, className, ...props }, ref) => {
|
|
50898
|
+
const api = createGraphView();
|
|
50899
|
+
const summary = React11__namespace.useMemo(() => summarizeStates(nodes), [nodes]);
|
|
50900
|
+
const nodeMap = React11__namespace.useMemo(() => {
|
|
50901
|
+
const m2 = /* @__PURE__ */ new Map();
|
|
50902
|
+
for (const n2 of nodes) m2.set(n2.id, n2);
|
|
50903
|
+
return m2;
|
|
50904
|
+
}, [nodes]);
|
|
50905
|
+
const padding = 80;
|
|
50906
|
+
const xs2 = nodes.map((n2) => n2.x);
|
|
50907
|
+
const ys2 = nodes.map((n2) => n2.y);
|
|
50908
|
+
const svgWidth = nodes.length === 0 ? 400 : Math.max(...xs2) + padding * 2;
|
|
50909
|
+
const svgHeight = nodes.length === 0 ? 300 : Math.max(...ys2) + padding * 2;
|
|
50910
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
50911
|
+
"div",
|
|
50912
|
+
{
|
|
50913
|
+
ref,
|
|
50914
|
+
className: cn(graphViewVariants(), className),
|
|
50915
|
+
...api.ariaProps,
|
|
50916
|
+
...api.dataAttributes,
|
|
50917
|
+
...props,
|
|
50918
|
+
children: [
|
|
50919
|
+
/* @__PURE__ */ jsxRuntime.jsxs(InfiniteCanvas, { showGrid: true, showControls: true, children: [
|
|
50920
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50921
|
+
"svg",
|
|
50922
|
+
{
|
|
50923
|
+
width: svgWidth,
|
|
50924
|
+
height: svgHeight,
|
|
50925
|
+
"aria-hidden": "true",
|
|
50926
|
+
style: { position: "absolute", top: 0, left: 0, pointerEvents: "none" },
|
|
50927
|
+
children: edges.map((edge) => {
|
|
50928
|
+
const source = nodeMap.get(edge.source) ?? nodeById2(nodes, edge.source);
|
|
50929
|
+
const target = nodeMap.get(edge.target) ?? nodeById2(nodes, edge.target);
|
|
50930
|
+
if (!source || !target) return null;
|
|
50931
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
50932
|
+
"path",
|
|
50933
|
+
{
|
|
50934
|
+
d: graphEdgePath(source, target),
|
|
50935
|
+
className: graphEdgeClass
|
|
50936
|
+
},
|
|
50937
|
+
edge.id
|
|
50938
|
+
);
|
|
50939
|
+
})
|
|
50940
|
+
}
|
|
50941
|
+
),
|
|
50942
|
+
nodes.map((node) => {
|
|
50943
|
+
const state = node.state ?? "not-started";
|
|
50944
|
+
const interactive = onNodeClick !== void 0;
|
|
50945
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
50946
|
+
"button",
|
|
50947
|
+
{
|
|
50948
|
+
type: "button",
|
|
50949
|
+
"aria-label": node.label,
|
|
50950
|
+
"data-state": state,
|
|
50951
|
+
className: cn(
|
|
50952
|
+
graphNodeVariants({ state, interactive: interactive ? "true" : "false" })
|
|
50953
|
+
),
|
|
50954
|
+
style: { left: node.x, top: node.y },
|
|
50955
|
+
onClick: onNodeClick ? () => onNodeClick(node) : void 0,
|
|
50956
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: graphNodeLabelClass, children: node.label })
|
|
50957
|
+
},
|
|
50958
|
+
node.id
|
|
50959
|
+
);
|
|
50960
|
+
})
|
|
50961
|
+
] }),
|
|
50962
|
+
showLegend && /* @__PURE__ */ jsxRuntime.jsx(
|
|
50963
|
+
"div",
|
|
50964
|
+
{
|
|
50965
|
+
role: "list",
|
|
50966
|
+
"aria-label": "Graph legend",
|
|
50967
|
+
className: "absolute bottom-3 left-3 flex flex-wrap gap-1.5",
|
|
50968
|
+
children: LEGEND_ORDER.filter((s2) => summary[s2] > 0).map((s2) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
50969
|
+
"span",
|
|
50970
|
+
{
|
|
50971
|
+
role: "listitem",
|
|
50972
|
+
className: graphLegendChipVariants({ state: s2 }),
|
|
50973
|
+
children: [
|
|
50974
|
+
STATE_LABELS[s2],
|
|
50975
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: summary[s2] })
|
|
50976
|
+
]
|
|
50977
|
+
},
|
|
50978
|
+
s2
|
|
50979
|
+
))
|
|
50980
|
+
}
|
|
50981
|
+
)
|
|
50982
|
+
]
|
|
50983
|
+
}
|
|
50984
|
+
);
|
|
50985
|
+
}
|
|
50986
|
+
);
|
|
50987
|
+
GraphView.displayName = "GraphView";
|
|
50988
|
+
|
|
50989
|
+
// ../live-cursors/dist/index.js
|
|
50990
|
+
var CURSOR_COLORS = [
|
|
50991
|
+
"#E94560",
|
|
50992
|
+
// red
|
|
50993
|
+
"#F57C00",
|
|
50994
|
+
// orange
|
|
50995
|
+
"#F9C840",
|
|
50996
|
+
// yellow
|
|
50997
|
+
"#4CAF50",
|
|
50998
|
+
// green
|
|
50999
|
+
"#00ACC1",
|
|
51000
|
+
// cyan
|
|
51001
|
+
"#5C6BC0",
|
|
51002
|
+
// indigo
|
|
51003
|
+
"#AB47BC",
|
|
51004
|
+
// purple
|
|
51005
|
+
"#EC407A"
|
|
51006
|
+
// pink
|
|
51007
|
+
];
|
|
51008
|
+
function assignCursorColor(id, index) {
|
|
51009
|
+
if (index !== void 0) {
|
|
51010
|
+
return CURSOR_COLORS[index % CURSOR_COLORS.length];
|
|
51011
|
+
}
|
|
51012
|
+
let hash = 5381;
|
|
51013
|
+
for (let i2 = 0; i2 < id.length; i2++) {
|
|
51014
|
+
hash = (hash << 5) + hash ^ id.charCodeAt(i2);
|
|
51015
|
+
hash = hash >>> 0;
|
|
51016
|
+
}
|
|
51017
|
+
return CURSOR_COLORS[hash % CURSOR_COLORS.length];
|
|
51018
|
+
}
|
|
51019
|
+
function createLiveCursors() {
|
|
51020
|
+
const ariaProps = {
|
|
51021
|
+
role: "group",
|
|
51022
|
+
"aria-label": "Collaborators",
|
|
51023
|
+
"aria-hidden": true
|
|
51024
|
+
};
|
|
51025
|
+
const dataAttributes = {
|
|
51026
|
+
"data-live-cursors": ""
|
|
51027
|
+
};
|
|
51028
|
+
return { ariaProps, dataAttributes };
|
|
51029
|
+
}
|
|
51030
|
+
var liveCursorsVariants = cva({
|
|
51031
|
+
base: "absolute inset-0 overflow-hidden pointer-events-none",
|
|
51032
|
+
variants: {
|
|
51033
|
+
/** Future variant hook — reserved for theming overrides. */
|
|
51034
|
+
hidden: {
|
|
51035
|
+
true: "invisible",
|
|
51036
|
+
false: ""
|
|
51037
|
+
}
|
|
51038
|
+
},
|
|
51039
|
+
defaultVariants: {
|
|
51040
|
+
hidden: "false"
|
|
51041
|
+
}
|
|
51042
|
+
});
|
|
51043
|
+
var cursorWrapperClass = "absolute flex flex-col items-start transition-[left,top] duration-100 ease-linear";
|
|
51044
|
+
var cursorArrowClass = "h-5 w-5 drop-shadow-sm";
|
|
51045
|
+
var cursorLabelClass = "mt-0.5 ml-2 rounded px-1.5 py-0.5 text-xs font-medium text-white shadow-sm whitespace-nowrap";
|
|
51046
|
+
var Cursor = React11__namespace.memo(function Cursor2({
|
|
51047
|
+
name,
|
|
51048
|
+
x: x2,
|
|
51049
|
+
y: y2,
|
|
51050
|
+
color
|
|
51051
|
+
}) {
|
|
51052
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51053
|
+
"div",
|
|
51054
|
+
{
|
|
51055
|
+
className: cursorWrapperClass,
|
|
51056
|
+
style: { left: `${x2}px`, top: `${y2}px` },
|
|
51057
|
+
"data-cursor-name": name,
|
|
51058
|
+
children: [
|
|
51059
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51060
|
+
"svg",
|
|
51061
|
+
{
|
|
51062
|
+
className: cursorArrowClass,
|
|
51063
|
+
viewBox: "0 0 20 20",
|
|
51064
|
+
fill: "none",
|
|
51065
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
51066
|
+
"aria-hidden": "true",
|
|
51067
|
+
style: { fill: color },
|
|
51068
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
51069
|
+
"path",
|
|
51070
|
+
{
|
|
51071
|
+
d: "M3 2L17 9.5L10.5 11.5L8 18L3 2Z",
|
|
51072
|
+
stroke: "white",
|
|
51073
|
+
strokeWidth: "1.5",
|
|
51074
|
+
strokeLinejoin: "round"
|
|
51075
|
+
}
|
|
51076
|
+
)
|
|
51077
|
+
}
|
|
51078
|
+
),
|
|
51079
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51080
|
+
"span",
|
|
51081
|
+
{
|
|
51082
|
+
className: cursorLabelClass,
|
|
51083
|
+
style: { backgroundColor: color },
|
|
51084
|
+
children: name
|
|
51085
|
+
}
|
|
51086
|
+
)
|
|
51087
|
+
]
|
|
51088
|
+
}
|
|
51089
|
+
);
|
|
51090
|
+
});
|
|
51091
|
+
var LiveCursors = React11__namespace.forwardRef(
|
|
51092
|
+
({ cursors, className, ...props }, ref) => {
|
|
51093
|
+
const api = createLiveCursors();
|
|
51094
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51095
|
+
"div",
|
|
51096
|
+
{
|
|
51097
|
+
ref,
|
|
51098
|
+
className: cn(liveCursorsVariants(), className),
|
|
51099
|
+
...api.ariaProps,
|
|
51100
|
+
...api.dataAttributes,
|
|
51101
|
+
...props,
|
|
51102
|
+
children: cursors.map((cursor, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
51103
|
+
Cursor,
|
|
51104
|
+
{
|
|
51105
|
+
name: cursor.name,
|
|
51106
|
+
x: cursor.x,
|
|
51107
|
+
y: cursor.y,
|
|
51108
|
+
color: cursor.color ?? assignCursorColor(cursor.id, index)
|
|
51109
|
+
},
|
|
51110
|
+
cursor.id
|
|
51111
|
+
))
|
|
51112
|
+
}
|
|
51113
|
+
);
|
|
51114
|
+
}
|
|
51115
|
+
);
|
|
51116
|
+
LiveCursors.displayName = "LiveCursors";
|
|
51117
|
+
|
|
51118
|
+
// ../mini-map/dist/index.js
|
|
51119
|
+
function contentBounds(items) {
|
|
51120
|
+
if (items.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
|
|
51121
|
+
let minX = Infinity;
|
|
51122
|
+
let minY = Infinity;
|
|
51123
|
+
let maxX = -Infinity;
|
|
51124
|
+
let maxY = -Infinity;
|
|
51125
|
+
for (const item of items) {
|
|
51126
|
+
const right = item.x + (item.width ?? 0);
|
|
51127
|
+
const bottom = item.y + (item.height ?? 0);
|
|
51128
|
+
if (item.x < minX) minX = item.x;
|
|
51129
|
+
if (item.y < minY) minY = item.y;
|
|
51130
|
+
if (right > maxX) maxX = right;
|
|
51131
|
+
if (bottom > maxY) maxY = bottom;
|
|
51132
|
+
}
|
|
51133
|
+
return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
|
|
51134
|
+
}
|
|
51135
|
+
function miniScale(contentRect, miniW, miniH, padding = 8) {
|
|
51136
|
+
const availW = miniW - padding * 2;
|
|
51137
|
+
const availH = miniH - padding * 2;
|
|
51138
|
+
if (availW <= 0 || availH <= 0) return 1;
|
|
51139
|
+
if (contentRect.width === 0 || contentRect.height === 0) return 1;
|
|
51140
|
+
return Math.min(availW / contentRect.width, availH / contentRect.height);
|
|
51141
|
+
}
|
|
51142
|
+
function worldToMini(point, contentRect, scale, padding = 8) {
|
|
51143
|
+
return {
|
|
51144
|
+
x: (point.x - contentRect.x) * scale + padding,
|
|
51145
|
+
y: (point.y - contentRect.y) * scale + padding
|
|
51146
|
+
};
|
|
51147
|
+
}
|
|
51148
|
+
function viewportRectInMini(viewport, contentRect, scale, padding = 8) {
|
|
51149
|
+
const { x: x2, y: y2 } = worldToMini(
|
|
51150
|
+
{ x: viewport.x, y: viewport.y },
|
|
51151
|
+
contentRect,
|
|
51152
|
+
scale,
|
|
51153
|
+
padding
|
|
51154
|
+
);
|
|
51155
|
+
return {
|
|
51156
|
+
x: x2,
|
|
51157
|
+
y: y2,
|
|
51158
|
+
width: viewport.width * scale,
|
|
51159
|
+
height: viewport.height * scale
|
|
51160
|
+
};
|
|
51161
|
+
}
|
|
51162
|
+
function createMiniMap() {
|
|
51163
|
+
return {
|
|
51164
|
+
ariaProps: { role: "img", "aria-label": "Minimap" },
|
|
51165
|
+
dataAttributes: { "data-component": "mini-map" }
|
|
51166
|
+
};
|
|
51167
|
+
}
|
|
51168
|
+
var miniMapVariants = cva({
|
|
51169
|
+
base: [
|
|
51170
|
+
"relative overflow-hidden rounded-md border border-border bg-card",
|
|
51171
|
+
"select-none"
|
|
51172
|
+
].join(" "),
|
|
51173
|
+
variants: {
|
|
51174
|
+
interactive: {
|
|
51175
|
+
true: "cursor-grab active:cursor-grabbing",
|
|
51176
|
+
false: ""
|
|
51177
|
+
}
|
|
51178
|
+
},
|
|
51179
|
+
defaultVariants: {
|
|
51180
|
+
interactive: "false"
|
|
51181
|
+
}
|
|
51182
|
+
});
|
|
51183
|
+
var miniMapDotClass = "absolute rounded-sm bg-muted";
|
|
51184
|
+
var miniMapViewportClass = "absolute rounded-sm border border-primary ring-1 ring-primary bg-primary/10";
|
|
51185
|
+
var MiniMap = React11__namespace.forwardRef(
|
|
51186
|
+
({
|
|
51187
|
+
items,
|
|
51188
|
+
viewport,
|
|
51189
|
+
width = 200,
|
|
51190
|
+
height = 140,
|
|
51191
|
+
padding = 8,
|
|
51192
|
+
onViewportChange,
|
|
51193
|
+
className,
|
|
51194
|
+
...props
|
|
51195
|
+
}, ref) => {
|
|
51196
|
+
const containerRef = React11__namespace.useRef(null);
|
|
51197
|
+
const isDragging = React11__namespace.useRef(false);
|
|
51198
|
+
const bounds = React11__namespace.useMemo(() => contentBounds(items), [items]);
|
|
51199
|
+
const scale = React11__namespace.useMemo(
|
|
51200
|
+
() => miniScale(bounds, width, height, padding),
|
|
51201
|
+
[bounds, width, height, padding]
|
|
51202
|
+
);
|
|
51203
|
+
const viewportRect = React11__namespace.useMemo(
|
|
51204
|
+
() => viewport != null ? viewportRectInMini(viewport, bounds, scale, padding) : null,
|
|
51205
|
+
[viewport, bounds, scale, padding]
|
|
51206
|
+
);
|
|
51207
|
+
const { ariaProps, dataAttributes } = createMiniMap();
|
|
51208
|
+
const miniToWorld = React11__namespace.useCallback(
|
|
51209
|
+
(miniX, miniY) => {
|
|
51210
|
+
return {
|
|
51211
|
+
x: (miniX - padding) / scale + bounds.x,
|
|
51212
|
+
y: (miniY - padding) / scale + bounds.y
|
|
51213
|
+
};
|
|
51214
|
+
},
|
|
51215
|
+
[scale, bounds, padding]
|
|
51216
|
+
);
|
|
51217
|
+
const handlePointerEvent = React11__namespace.useCallback(
|
|
51218
|
+
(e2) => {
|
|
51219
|
+
if (!onViewportChange) return;
|
|
51220
|
+
const el = containerRef.current;
|
|
51221
|
+
if (!el) return;
|
|
51222
|
+
const rect = el.getBoundingClientRect();
|
|
51223
|
+
const miniX = e2.clientX - rect.left;
|
|
51224
|
+
const miniY = e2.clientY - rect.top;
|
|
51225
|
+
onViewportChange(miniToWorld(miniX, miniY));
|
|
51226
|
+
},
|
|
51227
|
+
[onViewportChange, miniToWorld]
|
|
51228
|
+
);
|
|
51229
|
+
const handlePointerDown = React11__namespace.useCallback(
|
|
51230
|
+
(e2) => {
|
|
51231
|
+
if (!onViewportChange) return;
|
|
51232
|
+
isDragging.current = true;
|
|
51233
|
+
e2.currentTarget.setPointerCapture(e2.pointerId);
|
|
51234
|
+
handlePointerEvent(e2);
|
|
51235
|
+
},
|
|
51236
|
+
[onViewportChange, handlePointerEvent]
|
|
51237
|
+
);
|
|
51238
|
+
const handlePointerMove = React11__namespace.useCallback(
|
|
51239
|
+
(e2) => {
|
|
51240
|
+
if (!isDragging.current) return;
|
|
51241
|
+
handlePointerEvent(e2);
|
|
51242
|
+
},
|
|
51243
|
+
[handlePointerEvent]
|
|
51244
|
+
);
|
|
51245
|
+
const handlePointerUp = React11__namespace.useCallback(() => {
|
|
51246
|
+
isDragging.current = false;
|
|
51247
|
+
}, []);
|
|
51248
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51249
|
+
"div",
|
|
51250
|
+
{
|
|
51251
|
+
ref: (node) => {
|
|
51252
|
+
containerRef.current = node;
|
|
51253
|
+
if (typeof ref === "function") {
|
|
51254
|
+
ref(node);
|
|
51255
|
+
} else if (ref) {
|
|
51256
|
+
ref.current = node;
|
|
51257
|
+
}
|
|
51258
|
+
},
|
|
51259
|
+
className: cn(
|
|
51260
|
+
miniMapVariants({ interactive: onViewportChange ? "true" : "false" }),
|
|
51261
|
+
className
|
|
51262
|
+
),
|
|
51263
|
+
style: { width, height, position: "relative" },
|
|
51264
|
+
...ariaProps,
|
|
51265
|
+
...dataAttributes,
|
|
51266
|
+
onPointerDown: onViewportChange ? handlePointerDown : void 0,
|
|
51267
|
+
onPointerMove: onViewportChange ? handlePointerMove : void 0,
|
|
51268
|
+
onPointerUp: onViewportChange ? handlePointerUp : void 0,
|
|
51269
|
+
...props,
|
|
51270
|
+
children: [
|
|
51271
|
+
items.map((item) => {
|
|
51272
|
+
const pos = worldToMini(item, bounds, scale, padding);
|
|
51273
|
+
const w2 = (item.width ?? 8) * scale;
|
|
51274
|
+
const h5 = (item.height ?? 8) * scale;
|
|
51275
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51276
|
+
"span",
|
|
51277
|
+
{
|
|
51278
|
+
className: miniMapDotClass,
|
|
51279
|
+
style: {
|
|
51280
|
+
position: "absolute",
|
|
51281
|
+
left: `${pos.x}px`,
|
|
51282
|
+
top: `${pos.y}px`,
|
|
51283
|
+
width: `${Math.max(4, w2)}px`,
|
|
51284
|
+
height: `${Math.max(4, h5)}px`
|
|
51285
|
+
},
|
|
51286
|
+
"aria-hidden": "true"
|
|
51287
|
+
},
|
|
51288
|
+
item.id
|
|
51289
|
+
);
|
|
51290
|
+
}),
|
|
51291
|
+
viewportRect != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
51292
|
+
"span",
|
|
51293
|
+
{
|
|
51294
|
+
className: miniMapViewportClass,
|
|
51295
|
+
style: {
|
|
51296
|
+
position: "absolute",
|
|
51297
|
+
left: `${viewportRect.x}px`,
|
|
51298
|
+
top: `${viewportRect.y}px`,
|
|
51299
|
+
width: `${viewportRect.width}px`,
|
|
51300
|
+
height: `${viewportRect.height}px`
|
|
51301
|
+
},
|
|
51302
|
+
"aria-hidden": "true"
|
|
51303
|
+
}
|
|
51304
|
+
)
|
|
51305
|
+
]
|
|
51306
|
+
}
|
|
51307
|
+
);
|
|
51308
|
+
}
|
|
51309
|
+
);
|
|
51310
|
+
MiniMap.displayName = "MiniMap";
|
|
51311
|
+
|
|
51312
|
+
// ../section-head/dist/index.js
|
|
51313
|
+
function createSectionHead(props = {}) {
|
|
51314
|
+
const { align = "center" } = props;
|
|
51315
|
+
const dataAttributes = {
|
|
51316
|
+
"data-align": align
|
|
51317
|
+
};
|
|
51318
|
+
return { dataAttributes };
|
|
51319
|
+
}
|
|
51320
|
+
var sectionHeadVariants = cva({
|
|
51321
|
+
base: "flex flex-col",
|
|
51322
|
+
variants: {
|
|
51323
|
+
align: {
|
|
51324
|
+
center: "mx-auto text-center max-w-2xl",
|
|
51325
|
+
left: "text-left"
|
|
51326
|
+
}
|
|
51327
|
+
},
|
|
51328
|
+
defaultVariants: {
|
|
51329
|
+
align: "center"
|
|
51330
|
+
}
|
|
51331
|
+
});
|
|
51332
|
+
var sectionHeadKickerClass = "text-[11px] uppercase tracking-widest text-primary font-semibold";
|
|
51333
|
+
var sectionHeadTitleClass = "text-3xl sm:text-4xl font-bold tracking-tight text-foreground";
|
|
51334
|
+
var sectionHeadLedeClass = "mt-3 text-muted-foreground leading-relaxed";
|
|
51335
|
+
var SectionHead = React11__namespace.forwardRef(
|
|
51336
|
+
({
|
|
51337
|
+
kicker,
|
|
51338
|
+
title,
|
|
51339
|
+
lede,
|
|
51340
|
+
align = "center",
|
|
51341
|
+
as: Tag = "h2",
|
|
51342
|
+
className,
|
|
51343
|
+
...props
|
|
51344
|
+
}, ref) => {
|
|
51345
|
+
const { dataAttributes } = createSectionHead({ align });
|
|
51346
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51347
|
+
"div",
|
|
51348
|
+
{
|
|
51349
|
+
ref,
|
|
51350
|
+
className: cn(sectionHeadVariants({ align }), className),
|
|
51351
|
+
...dataAttributes,
|
|
51352
|
+
...props,
|
|
51353
|
+
children: [
|
|
51354
|
+
kicker != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: sectionHeadKickerClass, children: kicker }),
|
|
51355
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tag, { className: sectionHeadTitleClass, children: title }),
|
|
51356
|
+
lede != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: sectionHeadLedeClass, children: lede })
|
|
51357
|
+
]
|
|
51358
|
+
}
|
|
51359
|
+
);
|
|
51360
|
+
}
|
|
51361
|
+
);
|
|
51362
|
+
SectionHead.displayName = "SectionHead";
|
|
51363
|
+
|
|
51364
|
+
// ../stat-grid/dist/index.js
|
|
51365
|
+
function statColumns(count, max = 3) {
|
|
51366
|
+
if (count <= 0) return 1;
|
|
51367
|
+
if (count === 1) return 1;
|
|
51368
|
+
if (count === 2) return 2;
|
|
51369
|
+
return Math.min(count, max);
|
|
51370
|
+
}
|
|
51371
|
+
function createStatGrid() {
|
|
51372
|
+
return {
|
|
51373
|
+
ariaProps: { role: "list" },
|
|
51374
|
+
dataAttributes: {}
|
|
51375
|
+
};
|
|
51376
|
+
}
|
|
51377
|
+
var statGridVariants = cva({
|
|
51378
|
+
base: "grid gap-8",
|
|
51379
|
+
variants: {
|
|
51380
|
+
columns: {
|
|
51381
|
+
"1": "grid-cols-1",
|
|
51382
|
+
"2": "grid-cols-2",
|
|
51383
|
+
"3": "grid-cols-3"
|
|
51384
|
+
}
|
|
51385
|
+
},
|
|
51386
|
+
defaultVariants: {
|
|
51387
|
+
columns: "3"
|
|
51388
|
+
}
|
|
51389
|
+
});
|
|
51390
|
+
var statItemClass = "flex flex-col";
|
|
51391
|
+
var statValueClass = "text-xl sm:text-2xl font-bold text-primary";
|
|
51392
|
+
var statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
|
|
51393
|
+
var StatGrid = React11__namespace.forwardRef(
|
|
51394
|
+
({ items, columns, className, ...props }, ref) => {
|
|
51395
|
+
const cols = columns ?? statColumns(items.length);
|
|
51396
|
+
const { ariaProps, dataAttributes } = createStatGrid();
|
|
51397
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51398
|
+
"div",
|
|
51399
|
+
{
|
|
51400
|
+
ref,
|
|
51401
|
+
className: cn(
|
|
51402
|
+
statGridVariants({ columns: String(cols) }),
|
|
51403
|
+
className
|
|
51404
|
+
),
|
|
51405
|
+
style: { gridTemplateColumns: `repeat(${cols}, 1fr)` },
|
|
51406
|
+
...ariaProps,
|
|
51407
|
+
...dataAttributes,
|
|
51408
|
+
...props,
|
|
51409
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", className: statItemClass, children: [
|
|
51410
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: statValueClass, children: item.value }),
|
|
51411
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: statLabelClass, children: item.label })
|
|
51412
|
+
] }, index))
|
|
51413
|
+
}
|
|
51414
|
+
);
|
|
51415
|
+
}
|
|
51416
|
+
);
|
|
51417
|
+
StatGrid.displayName = "StatGrid";
|
|
51418
|
+
|
|
51419
|
+
// ../numbered-steps/dist/index.js
|
|
51420
|
+
function padOrdinal(n2) {
|
|
51421
|
+
return String(n2).padStart(2, "0");
|
|
51422
|
+
}
|
|
51423
|
+
function stepColumns(count) {
|
|
51424
|
+
return Math.min(5, Math.max(2, count));
|
|
51425
|
+
}
|
|
51426
|
+
function createNumberedSteps() {
|
|
51427
|
+
const ariaProps = { role: "list" };
|
|
51428
|
+
const dataAttributes = {
|
|
51429
|
+
"data-component": "numbered-steps"
|
|
51430
|
+
};
|
|
51431
|
+
return { ariaProps, dataAttributes };
|
|
51432
|
+
}
|
|
51433
|
+
var numberedStepsVariants = cva({
|
|
51434
|
+
base: "grid gap-6",
|
|
51435
|
+
variants: {
|
|
51436
|
+
columns: {
|
|
51437
|
+
"2": "grid-cols-2",
|
|
51438
|
+
"3": "grid-cols-3",
|
|
51439
|
+
"4": "grid-cols-4",
|
|
51440
|
+
"5": "grid-cols-5"
|
|
51441
|
+
}
|
|
51442
|
+
},
|
|
51443
|
+
defaultVariants: {
|
|
51444
|
+
columns: "3"
|
|
51445
|
+
}
|
|
51446
|
+
});
|
|
51447
|
+
var numberedStepsItemClass = "rounded-xl border border-border bg-card p-5";
|
|
51448
|
+
var numberedStepsOrdinalClass = "font-mono text-sm text-primary";
|
|
51449
|
+
var numberedStepsTitleClass = "mt-2 text-sm font-bold text-foreground";
|
|
51450
|
+
var numberedStepsBodyClass = "mt-1 text-xs text-muted-foreground leading-relaxed";
|
|
51451
|
+
var NumberedSteps = React11__namespace.forwardRef(({ items, columns, className, ...props }, ref) => {
|
|
51452
|
+
const cols = columns ?? stepColumns(items.length);
|
|
51453
|
+
const { ariaProps, dataAttributes } = createNumberedSteps();
|
|
51454
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51455
|
+
"div",
|
|
51456
|
+
{
|
|
51457
|
+
ref,
|
|
51458
|
+
className: cn(numberedStepsVariants(), className),
|
|
51459
|
+
style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
|
|
51460
|
+
...ariaProps,
|
|
51461
|
+
...dataAttributes,
|
|
51462
|
+
...props,
|
|
51463
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", className: numberedStepsItemClass, children: [
|
|
51464
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: numberedStepsOrdinalClass, children: padOrdinal(index + 1) }),
|
|
51465
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: numberedStepsTitleClass, children: item.title }),
|
|
51466
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: numberedStepsBodyClass, children: item.body })
|
|
51467
|
+
] }, index))
|
|
51468
|
+
}
|
|
51469
|
+
);
|
|
51470
|
+
});
|
|
51471
|
+
NumberedSteps.displayName = "NumberedSteps";
|
|
51472
|
+
|
|
51473
|
+
// ../pricing-card/dist/index.js
|
|
51474
|
+
function createPricingCard(options = {}) {
|
|
51475
|
+
const { featured = false } = options;
|
|
51476
|
+
const ariaProps = {
|
|
51477
|
+
role: "group"
|
|
51478
|
+
};
|
|
51479
|
+
const dataAttributes = {
|
|
51480
|
+
"data-featured": String(featured)
|
|
51481
|
+
};
|
|
51482
|
+
return { ariaProps, dataAttributes };
|
|
51483
|
+
}
|
|
51484
|
+
var pricingCardVariants = cva({
|
|
51485
|
+
base: [
|
|
51486
|
+
"relative flex flex-col rounded-2xl border border-border bg-card p-6",
|
|
51487
|
+
"transition-shadow"
|
|
51488
|
+
].join(" "),
|
|
51489
|
+
variants: {
|
|
51490
|
+
featured: {
|
|
51491
|
+
true: "ring-1 ring-primary",
|
|
51492
|
+
false: ""
|
|
51493
|
+
}
|
|
51494
|
+
},
|
|
51495
|
+
defaultVariants: {
|
|
51496
|
+
featured: "false"
|
|
51497
|
+
}
|
|
51498
|
+
});
|
|
51499
|
+
var pricingCardBadgeClass = "mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary";
|
|
51500
|
+
var pricingCardNameClass = "text-lg font-bold text-foreground";
|
|
51501
|
+
var pricingCardPriceClass = "text-3xl font-bold text-foreground";
|
|
51502
|
+
var pricingCardPeriodClass = "text-sm text-muted-foreground";
|
|
51503
|
+
var pricingCardDescriptionClass = "text-sm text-muted-foreground";
|
|
51504
|
+
var pricingCardFeatureListClass = "flex flex-col gap-2";
|
|
51505
|
+
var pricingCardFeatureRowClass = "flex items-start gap-2 text-sm text-foreground";
|
|
51506
|
+
var pricingCardFeatureTickClass = "mt-0.5 size-4 shrink-0 text-primary";
|
|
51507
|
+
var pricingCtaVariants = cva({
|
|
51508
|
+
base: [
|
|
51509
|
+
"mt-auto inline-flex w-full items-center justify-center rounded-lg px-4 py-2",
|
|
51510
|
+
"text-sm font-medium transition-colors",
|
|
51511
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
51512
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
51513
|
+
].join(" "),
|
|
51514
|
+
variants: {
|
|
51515
|
+
variant: {
|
|
51516
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
51517
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
|
|
51518
|
+
}
|
|
51519
|
+
},
|
|
51520
|
+
defaultVariants: {
|
|
51521
|
+
variant: "default"
|
|
51522
|
+
}
|
|
51523
|
+
});
|
|
51524
|
+
var PricingCard = React11__namespace.forwardRef(
|
|
51525
|
+
({
|
|
51526
|
+
badge,
|
|
51527
|
+
name,
|
|
51528
|
+
price,
|
|
51529
|
+
period,
|
|
51530
|
+
description,
|
|
51531
|
+
features,
|
|
51532
|
+
cta,
|
|
51533
|
+
ctaVariant = "default",
|
|
51534
|
+
ctaHref,
|
|
51535
|
+
onCtaClick,
|
|
51536
|
+
featured = false,
|
|
51537
|
+
className,
|
|
51538
|
+
...props
|
|
51539
|
+
}, ref) => {
|
|
51540
|
+
const { ariaProps, dataAttributes } = createPricingCard({ featured });
|
|
51541
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51542
|
+
"div",
|
|
51543
|
+
{
|
|
51544
|
+
ref,
|
|
51545
|
+
className: cn(pricingCardVariants({ featured: featured ? "true" : "false" }), className),
|
|
51546
|
+
...ariaProps,
|
|
51547
|
+
...dataAttributes,
|
|
51548
|
+
...props,
|
|
51549
|
+
children: [
|
|
51550
|
+
badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: pricingCardBadgeClass, children: badge }),
|
|
51551
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: pricingCardNameClass, children: name }),
|
|
51552
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-baseline gap-1", children: [
|
|
51553
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: pricingCardPriceClass, children: price }),
|
|
51554
|
+
period != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: pricingCardPeriodClass, children: period })
|
|
51555
|
+
] }),
|
|
51556
|
+
description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-2 ${pricingCardDescriptionClass}`, children: description }),
|
|
51557
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: `mt-6 ${pricingCardFeatureListClass}`, children: features.map((feature) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: pricingCardFeatureRowClass, children: [
|
|
51558
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51559
|
+
"svg",
|
|
51560
|
+
{
|
|
51561
|
+
className: pricingCardFeatureTickClass,
|
|
51562
|
+
viewBox: "0 0 16 16",
|
|
51563
|
+
fill: "none",
|
|
51564
|
+
"aria-hidden": "true",
|
|
51565
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
51566
|
+
"path",
|
|
51567
|
+
{
|
|
51568
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
51569
|
+
stroke: "currentColor",
|
|
51570
|
+
strokeWidth: "1.75",
|
|
51571
|
+
strokeLinecap: "round",
|
|
51572
|
+
strokeLinejoin: "round"
|
|
51573
|
+
}
|
|
51574
|
+
)
|
|
51575
|
+
}
|
|
51576
|
+
),
|
|
51577
|
+
feature
|
|
51578
|
+
] }, feature)) }),
|
|
51579
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: ctaHref != null ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
51580
|
+
"a",
|
|
51581
|
+
{
|
|
51582
|
+
href: ctaHref,
|
|
51583
|
+
className: pricingCtaVariants({ variant: ctaVariant }),
|
|
51584
|
+
children: cta
|
|
51585
|
+
}
|
|
51586
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
51587
|
+
"button",
|
|
51588
|
+
{
|
|
51589
|
+
type: "button",
|
|
51590
|
+
className: pricingCtaVariants({ variant: ctaVariant }),
|
|
51591
|
+
onClick: onCtaClick,
|
|
51592
|
+
children: cta
|
|
51593
|
+
}
|
|
51594
|
+
) })
|
|
51595
|
+
]
|
|
51596
|
+
}
|
|
51597
|
+
);
|
|
51598
|
+
}
|
|
51599
|
+
);
|
|
51600
|
+
PricingCard.displayName = "PricingCard";
|
|
51601
|
+
|
|
51602
|
+
// ../brand-network-cell/dist/index.js
|
|
51603
|
+
function createBrandNetworkCell(props = {}) {
|
|
51604
|
+
const { current = false } = props;
|
|
51605
|
+
const ariaProps = {
|
|
51606
|
+
role: "group"
|
|
51607
|
+
};
|
|
51608
|
+
const dataAttributes = {
|
|
51609
|
+
"data-current": String(current)
|
|
51610
|
+
};
|
|
51611
|
+
return { ariaProps, dataAttributes };
|
|
51612
|
+
}
|
|
51613
|
+
var brandNetworkCellVariants = cva({
|
|
51614
|
+
base: [
|
|
51615
|
+
"relative rounded-xl border border-border bg-card p-4",
|
|
51616
|
+
"flex flex-col gap-3 transition-shadow"
|
|
51617
|
+
].join(" "),
|
|
51618
|
+
variants: {
|
|
51619
|
+
current: {
|
|
51620
|
+
true: "ring-1 ring-primary",
|
|
51621
|
+
false: ""
|
|
51622
|
+
}
|
|
51623
|
+
},
|
|
51624
|
+
defaultVariants: {
|
|
51625
|
+
current: "false"
|
|
51626
|
+
}
|
|
51627
|
+
});
|
|
51628
|
+
var brandNetworkCellGlyphClass = "flex size-10 items-center justify-center rounded-lg text-sm font-bold";
|
|
51629
|
+
var brandNetworkCellDomainClass = "font-semibold text-foreground";
|
|
51630
|
+
var brandNetworkCellCurrentBadgeClass = "inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary";
|
|
51631
|
+
var brandNetworkCellBodyClass = "text-sm text-muted-foreground";
|
|
51632
|
+
var brandNetworkCellLinkClass = "text-sm text-primary";
|
|
51633
|
+
var BrandNetworkCell = React11__namespace.forwardRef(
|
|
51634
|
+
({
|
|
51635
|
+
glyph,
|
|
51636
|
+
glyphBg,
|
|
51637
|
+
glyphColor,
|
|
51638
|
+
domain,
|
|
51639
|
+
body,
|
|
51640
|
+
href,
|
|
51641
|
+
linkLabel,
|
|
51642
|
+
current = false,
|
|
51643
|
+
className,
|
|
51644
|
+
...props
|
|
51645
|
+
}, ref) => {
|
|
51646
|
+
const api = createBrandNetworkCell({ current });
|
|
51647
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51648
|
+
"div",
|
|
51649
|
+
{
|
|
51650
|
+
ref,
|
|
51651
|
+
className: cn(
|
|
51652
|
+
brandNetworkCellVariants({ current: current ? "true" : "false" }),
|
|
51653
|
+
className
|
|
51654
|
+
),
|
|
51655
|
+
...api.ariaProps,
|
|
51656
|
+
...api.dataAttributes,
|
|
51657
|
+
...props,
|
|
51658
|
+
children: [
|
|
51659
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51660
|
+
"div",
|
|
51661
|
+
{
|
|
51662
|
+
className: brandNetworkCellGlyphClass,
|
|
51663
|
+
style: { background: glyphBg, color: glyphColor },
|
|
51664
|
+
"aria-hidden": "true",
|
|
51665
|
+
children: glyph
|
|
51666
|
+
}
|
|
51667
|
+
),
|
|
51668
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
51669
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: brandNetworkCellDomainClass, children: domain }),
|
|
51670
|
+
current && /* @__PURE__ */ jsxRuntime.jsx("span", { className: brandNetworkCellCurrentBadgeClass, children: "You are here" })
|
|
51671
|
+
] }),
|
|
51672
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: brandNetworkCellBodyClass, children: body }),
|
|
51673
|
+
href != null && /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: brandNetworkCellLinkClass, children: linkLabel ?? "Visit \u2192" })
|
|
51674
|
+
]
|
|
51675
|
+
}
|
|
51676
|
+
);
|
|
51677
|
+
}
|
|
51678
|
+
);
|
|
51679
|
+
BrandNetworkCell.displayName = "BrandNetworkCell";
|
|
51680
|
+
|
|
51681
|
+
// ../marquee-strip/dist/index.js
|
|
51682
|
+
function createMarqueeStrip(props = {}) {
|
|
51683
|
+
const { scroll = false } = props;
|
|
51684
|
+
const ariaProps = {
|
|
51685
|
+
role: "group"
|
|
51686
|
+
};
|
|
51687
|
+
const dataAttributes = {
|
|
51688
|
+
"data-scroll": String(scroll)
|
|
51689
|
+
};
|
|
51690
|
+
return { ariaProps, dataAttributes };
|
|
51691
|
+
}
|
|
51692
|
+
var marqueeStripVariants = cva({
|
|
51693
|
+
base: "w-full bg-muted/30 border-y border-border py-3",
|
|
51694
|
+
variants: {
|
|
51695
|
+
scroll: {
|
|
51696
|
+
true: "",
|
|
51697
|
+
false: ""
|
|
51698
|
+
}
|
|
51699
|
+
},
|
|
51700
|
+
defaultVariants: {
|
|
51701
|
+
scroll: "false"
|
|
51702
|
+
}
|
|
51703
|
+
});
|
|
51704
|
+
var marqueeStripInnerClass = "flex flex-wrap items-center gap-3 px-4";
|
|
51705
|
+
var marqueeStripScrollOuterClass = "overflow-hidden px-4";
|
|
51706
|
+
var marqueeStripScrollTrackClass = "flex items-center gap-3 w-max animate-[marquee_30s_linear_infinite]";
|
|
51707
|
+
var marqueeStripLabelClass = "text-xs font-semibold uppercase tracking-widest text-muted-foreground shrink-0";
|
|
51708
|
+
var marqueeStripItemClass = "text-sm text-foreground";
|
|
51709
|
+
var MarqueeStrip = React11__namespace.forwardRef(
|
|
51710
|
+
({ label, items, scroll = false, className, ...props }, ref) => {
|
|
51711
|
+
const api = createMarqueeStrip({ scroll });
|
|
51712
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51713
|
+
"div",
|
|
51714
|
+
{
|
|
51715
|
+
ref,
|
|
51716
|
+
className: cn(marqueeStripVariants({ scroll: scroll ? "true" : "false" }), className),
|
|
51717
|
+
...api.ariaProps,
|
|
51718
|
+
...api.dataAttributes,
|
|
51719
|
+
...props,
|
|
51720
|
+
children: scroll ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: marqueeStripScrollOuterClass, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: marqueeStripScrollTrackClass, children: [...items, ...items].map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: marqueeStripItemClass, children: item }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: marqueeStripInnerClass, children: [
|
|
51721
|
+
label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: marqueeStripLabelClass, children: label }),
|
|
51722
|
+
items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: marqueeStripItemClass, children: item }, index))
|
|
51723
|
+
] })
|
|
51724
|
+
}
|
|
51725
|
+
);
|
|
51726
|
+
}
|
|
51727
|
+
);
|
|
51728
|
+
MarqueeStrip.displayName = "MarqueeStrip";
|
|
51729
|
+
|
|
51730
|
+
// ../browser-chrome-mock/dist/index.js
|
|
51731
|
+
function splitUrl(url) {
|
|
51732
|
+
const slashIndex = url.indexOf("/");
|
|
51733
|
+
if (slashIndex === -1) {
|
|
51734
|
+
return { domain: url, path: "" };
|
|
51735
|
+
}
|
|
51736
|
+
return {
|
|
51737
|
+
domain: url.slice(0, slashIndex),
|
|
51738
|
+
path: url.slice(slashIndex)
|
|
51739
|
+
};
|
|
51740
|
+
}
|
|
51741
|
+
function createBrowserChromeMock(props = {}) {
|
|
51742
|
+
const { status } = props;
|
|
51743
|
+
const ariaProps = {
|
|
51744
|
+
role: "group",
|
|
51745
|
+
"aria-label": "Browser preview"
|
|
51746
|
+
};
|
|
51747
|
+
const dataAttributes = {};
|
|
51748
|
+
if (status !== void 0) {
|
|
51749
|
+
dataAttributes["data-status"] = status;
|
|
51750
|
+
}
|
|
51751
|
+
return { ariaProps, dataAttributes };
|
|
51752
|
+
}
|
|
51753
|
+
var browserChromeMockVariants = cva({
|
|
51754
|
+
base: "rounded-xl border border-border overflow-hidden bg-card",
|
|
51755
|
+
variants: {},
|
|
51756
|
+
defaultVariants: {}
|
|
51757
|
+
});
|
|
51758
|
+
var chromeBarClass = "flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2";
|
|
51759
|
+
var trafficDotClass = "size-2.5 rounded-full border border-border";
|
|
51760
|
+
var urlBarClass = "flex-1 text-center font-mono text-[11px] text-muted-foreground";
|
|
51761
|
+
var urlDomainClass = "font-semibold text-foreground";
|
|
51762
|
+
var statusBadgeVariants = cva({
|
|
51763
|
+
base: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
|
|
51764
|
+
variants: {
|
|
51765
|
+
status: {
|
|
51766
|
+
live: "text-emerald-500 bg-emerald-500/10",
|
|
51767
|
+
rec: "text-destructive bg-destructive/10"
|
|
51768
|
+
}
|
|
51769
|
+
},
|
|
51770
|
+
defaultVariants: {
|
|
51771
|
+
status: "live"
|
|
51772
|
+
}
|
|
51773
|
+
});
|
|
51774
|
+
var contentAreaClass = "p-0";
|
|
51775
|
+
var TRAFFIC_DOTS = ["bg-red-400", "bg-yellow-400", "bg-green-400"];
|
|
51776
|
+
var BrowserChromeMock = React11__namespace.forwardRef(({ url, status, className, children, ...props }, ref) => {
|
|
51777
|
+
const { ariaProps, dataAttributes } = createBrowserChromeMock({ status });
|
|
51778
|
+
const { domain, path } = splitUrl(url);
|
|
51779
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51780
|
+
"div",
|
|
51781
|
+
{
|
|
51782
|
+
ref,
|
|
51783
|
+
className: cn(browserChromeMockVariants(), className),
|
|
51784
|
+
...ariaProps,
|
|
51785
|
+
...dataAttributes,
|
|
51786
|
+
...props,
|
|
51787
|
+
children: [
|
|
51788
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chromeBarClass, children: [
|
|
51789
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 shrink-0", children: TRAFFIC_DOTS.map((color) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(trafficDotClass, color) }, color)) }),
|
|
51790
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: urlBarClass, children: [
|
|
51791
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: urlDomainClass, children: domain }),
|
|
51792
|
+
path && /* @__PURE__ */ jsxRuntime.jsx("span", { children: path })
|
|
51793
|
+
] }),
|
|
51794
|
+
status && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: statusBadgeVariants({ status }), children: [
|
|
51795
|
+
status === "rec" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 rounded-full bg-destructive animate-pulse" }),
|
|
51796
|
+
status
|
|
51797
|
+
] })
|
|
51798
|
+
] }),
|
|
51799
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: contentAreaClass, children })
|
|
51800
|
+
]
|
|
51801
|
+
}
|
|
51802
|
+
);
|
|
51803
|
+
});
|
|
51804
|
+
BrowserChromeMock.displayName = "BrowserChromeMock";
|
|
51805
|
+
|
|
51806
|
+
// ../mastery-bar/dist/index.js
|
|
51807
|
+
function clampPercent(value) {
|
|
51808
|
+
if (Number.isNaN(value)) return 0;
|
|
51809
|
+
return Math.min(100, Math.max(0, value));
|
|
51810
|
+
}
|
|
51811
|
+
function createMasteryBar({ value }) {
|
|
51812
|
+
const clamped = clampPercent(value);
|
|
51813
|
+
const ariaProps = {
|
|
51814
|
+
role: "progressbar",
|
|
51815
|
+
"aria-valuenow": clamped,
|
|
51816
|
+
"aria-valuemin": 0,
|
|
51817
|
+
"aria-valuemax": 100
|
|
51818
|
+
};
|
|
51819
|
+
const dataAttributes = {
|
|
51820
|
+
"data-value": String(clamped)
|
|
51821
|
+
};
|
|
51822
|
+
return { ariaProps, dataAttributes };
|
|
51823
|
+
}
|
|
51824
|
+
var masteryBarVariants = cva({
|
|
51825
|
+
base: "w-full overflow-hidden rounded-full bg-muted",
|
|
51826
|
+
variants: {
|
|
51827
|
+
size: {
|
|
51828
|
+
sm: "h-1.5",
|
|
51829
|
+
md: "h-2",
|
|
51830
|
+
lg: "h-3"
|
|
51831
|
+
}
|
|
51832
|
+
},
|
|
51833
|
+
defaultVariants: {
|
|
51834
|
+
size: "md"
|
|
51835
|
+
}
|
|
51836
|
+
});
|
|
51837
|
+
var masteryBarFillVariants = cva({
|
|
51838
|
+
base: "h-full rounded-full bg-primary",
|
|
51839
|
+
variants: {
|
|
51840
|
+
muted: {
|
|
51841
|
+
true: "bg-primary/70",
|
|
51842
|
+
false: "bg-primary"
|
|
51843
|
+
}
|
|
51844
|
+
},
|
|
51845
|
+
defaultVariants: {
|
|
51846
|
+
muted: "false"
|
|
51847
|
+
}
|
|
51848
|
+
});
|
|
51849
|
+
var masteryBarLabelClass = "text-xs text-muted-foreground";
|
|
51850
|
+
var masteryBarLeadingLabelClass = "text-xs text-muted-foreground";
|
|
51851
|
+
var masteryBarHeaderClass = "flex justify-between items-baseline mb-1";
|
|
51852
|
+
var MasteryBar = React11__namespace.forwardRef(
|
|
51853
|
+
({
|
|
51854
|
+
value,
|
|
51855
|
+
label,
|
|
51856
|
+
leadingLabel,
|
|
51857
|
+
size = "md",
|
|
51858
|
+
muted = false,
|
|
51859
|
+
className,
|
|
51860
|
+
...props
|
|
51861
|
+
}, ref) => {
|
|
51862
|
+
const clamped = clampPercent(value);
|
|
51863
|
+
const { ariaProps, dataAttributes } = createMasteryBar({ value });
|
|
51864
|
+
const hasHeader = leadingLabel != null || label != null;
|
|
51865
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
|
|
51866
|
+
hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: masteryBarHeaderClass, children: [
|
|
51867
|
+
leadingLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: masteryBarLeadingLabelClass, children: leadingLabel }),
|
|
51868
|
+
label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: masteryBarLabelClass, children: label })
|
|
51869
|
+
] }),
|
|
51870
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51871
|
+
"div",
|
|
51872
|
+
{
|
|
51873
|
+
className: masteryBarVariants({ size }),
|
|
51874
|
+
...ariaProps,
|
|
51875
|
+
...dataAttributes,
|
|
51876
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
51877
|
+
"div",
|
|
51878
|
+
{
|
|
51879
|
+
className: masteryBarFillVariants({ muted: muted ? "true" : "false" }),
|
|
51880
|
+
style: { width: `${clamped}%` }
|
|
51881
|
+
}
|
|
51882
|
+
)
|
|
51883
|
+
}
|
|
51884
|
+
)
|
|
51885
|
+
] });
|
|
51886
|
+
}
|
|
51887
|
+
);
|
|
51888
|
+
MasteryBar.displayName = "MasteryBar";
|
|
51889
|
+
|
|
51890
|
+
// ../audience-feature-card/dist/index.js
|
|
51891
|
+
function createAudienceFeatureCard(_props = {}) {
|
|
51892
|
+
const ariaProps = {
|
|
51893
|
+
role: "group"
|
|
51894
|
+
};
|
|
51895
|
+
const dataAttributes = {
|
|
51896
|
+
"data-component": "audience-feature-card"
|
|
51897
|
+
};
|
|
51898
|
+
return { ariaProps, dataAttributes };
|
|
51899
|
+
}
|
|
51900
|
+
var audienceFeatureCardVariants = cva({
|
|
51901
|
+
base: "flex h-full flex-col rounded-xl border border-border bg-card p-5",
|
|
51902
|
+
variants: {},
|
|
51903
|
+
defaultVariants: {}
|
|
51904
|
+
});
|
|
51905
|
+
var audienceFeatureCardKickerClass = "text-[10px] uppercase tracking-widest text-primary font-semibold";
|
|
51906
|
+
var audienceFeatureCardTitleClass = "mt-2 text-lg font-bold text-foreground";
|
|
51907
|
+
var audienceFeatureCardBodyClass = "mt-1 text-sm text-muted-foreground leading-relaxed";
|
|
51908
|
+
var audienceFeatureCardFooterClass = "mt-auto pt-4 text-xs";
|
|
51909
|
+
var AudienceFeatureCard = React11__namespace.forwardRef(({ kicker, title, body, footer, className, ...props }, ref) => {
|
|
51910
|
+
const { ariaProps, dataAttributes } = createAudienceFeatureCard();
|
|
51911
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51912
|
+
"div",
|
|
51913
|
+
{
|
|
51914
|
+
ref,
|
|
51915
|
+
className: cn(audienceFeatureCardVariants(), className),
|
|
51916
|
+
...ariaProps,
|
|
51917
|
+
...dataAttributes,
|
|
51918
|
+
...props,
|
|
51919
|
+
children: [
|
|
51920
|
+
kicker != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: audienceFeatureCardKickerClass, children: kicker }),
|
|
51921
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: audienceFeatureCardTitleClass, children: title }),
|
|
51922
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: audienceFeatureCardBodyClass, children: body }),
|
|
51923
|
+
footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: audienceFeatureCardFooterClass, children: footer })
|
|
51924
|
+
]
|
|
51925
|
+
}
|
|
51926
|
+
);
|
|
51927
|
+
});
|
|
51928
|
+
AudienceFeatureCard.displayName = "AudienceFeatureCard";
|
|
47733
51929
|
/*! Bundled license information:
|
|
47734
51930
|
|
|
47735
51931
|
@nevware21/ts-utils/dist/es5/mod/ts-utils.js:
|
|
@@ -47752,6 +51948,8 @@ exports.AltHintState = AltHintState;
|
|
|
47752
51948
|
exports.AnalyticsProvider = AnalyticsProvider;
|
|
47753
51949
|
exports.AnimatedText = AnimatedText;
|
|
47754
51950
|
exports.AppShell = AppShell;
|
|
51951
|
+
exports.AudienceFeatureCard = AudienceFeatureCard;
|
|
51952
|
+
exports.AudioRoom = AudioRoom;
|
|
47755
51953
|
exports.AuthGuard = AuthGuard;
|
|
47756
51954
|
exports.AuthProvider = AuthProvider;
|
|
47757
51955
|
exports.Avatar = Avatar2;
|
|
@@ -47761,11 +51959,16 @@ exports.AvatarImage = AvatarImage;
|
|
|
47761
51959
|
exports.Badge = Badge;
|
|
47762
51960
|
exports.BadgeDisplay = BadgeDisplay;
|
|
47763
51961
|
exports.BottomNav = BottomNav;
|
|
51962
|
+
exports.BrandNetworkCell = BrandNetworkCell;
|
|
47764
51963
|
exports.Breadcrumbs = Breadcrumbs;
|
|
51964
|
+
exports.BrowserChromeMock = BrowserChromeMock;
|
|
47765
51965
|
exports.Button = Button;
|
|
47766
51966
|
exports.CATEGORY_LABELS = CATEGORY_LABELS;
|
|
51967
|
+
exports.CURSOR_COLORS = CURSOR_COLORS;
|
|
47767
51968
|
exports.Calendar = Calendar;
|
|
47768
51969
|
exports.CalendarHeader = CalendarHeader;
|
|
51970
|
+
exports.CallControlButton = CallControlButton;
|
|
51971
|
+
exports.CallControls = CallControls;
|
|
47769
51972
|
exports.Callout = Callout;
|
|
47770
51973
|
exports.CalloutContent = CalloutContent;
|
|
47771
51974
|
exports.CalloutDescription = CalloutDescription;
|
|
@@ -47784,6 +51987,7 @@ exports.CarouselItem = CarouselItem;
|
|
|
47784
51987
|
exports.CarouselTrigger = CarouselTrigger;
|
|
47785
51988
|
exports.Chat = Chat;
|
|
47786
51989
|
exports.Checkbox = Checkbox;
|
|
51990
|
+
exports.Checklist = Checklist;
|
|
47787
51991
|
exports.CodeBlock = CodeBlock;
|
|
47788
51992
|
exports.CodeBlockContent = CodeBlockContent;
|
|
47789
51993
|
exports.CodeBlockHeader = CodeBlockHeader;
|
|
@@ -47809,6 +52013,7 @@ exports.Composer = Composer;
|
|
|
47809
52013
|
exports.ConfirmationCard = ConfirmationCard;
|
|
47810
52014
|
exports.ContentProtection = ContentProtection;
|
|
47811
52015
|
exports.CookieConsent = CookieConsent;
|
|
52016
|
+
exports.Cursor = Cursor;
|
|
47812
52017
|
exports.DEFAULT_CATEGORIES = DEFAULT_CATEGORIES;
|
|
47813
52018
|
exports.DEFAULT_VOICE_PILL_POSITION = DEFAULT_VOICE_PILL_POSITION;
|
|
47814
52019
|
exports.DEFAULT_VOICE_PILL_SPEAKER = DEFAULT_VOICE_PILL_SPEAKER;
|
|
@@ -47837,14 +52042,20 @@ exports.DropdownMenuSeparator = DropdownMenuSeparator;
|
|
|
47837
52042
|
exports.DropdownMenuTrigger = DropdownMenuTrigger;
|
|
47838
52043
|
exports.EMOJI_CATEGORIES = EMOJI_CATEGORIES;
|
|
47839
52044
|
exports.EMOJI_DATA = EMOJI_DATA;
|
|
52045
|
+
exports.EditorStatusBar = EditorStatusBar;
|
|
52046
|
+
exports.EditorTabs = EditorTabs;
|
|
47840
52047
|
exports.EmojiPicker = EmojiPicker;
|
|
47841
52048
|
exports.EmptyState = EmptyState;
|
|
47842
52049
|
exports.FeedbackButton = FeedbackButton;
|
|
47843
52050
|
exports.FeedbackDialog = FeedbackDialog;
|
|
47844
52051
|
exports.FileTree = FileTree;
|
|
47845
52052
|
exports.FileUpload = FileUpload;
|
|
52053
|
+
exports.FloatingReactions = FloatingReactions;
|
|
52054
|
+
exports.FlowEditor = FlowEditor;
|
|
47846
52055
|
exports.Footer = Footer;
|
|
52056
|
+
exports.GraphView = GraphView;
|
|
47847
52057
|
exports.IconSystem = IconSystem;
|
|
52058
|
+
exports.InfiniteCanvas = InfiniteCanvas;
|
|
47848
52059
|
exports.InlineEditor = InlineEditor;
|
|
47849
52060
|
exports.Input = Input;
|
|
47850
52061
|
exports.InputGroup = InputGroup;
|
|
@@ -47855,12 +52066,19 @@ exports.InstallPrompt = InstallPrompt;
|
|
|
47855
52066
|
exports.KeyboardShortcut = KeyboardShortcut;
|
|
47856
52067
|
exports.LanguageSelector = LanguageSelector;
|
|
47857
52068
|
exports.LinkCard = LinkCard;
|
|
52069
|
+
exports.LiveCaptions = LiveCaptions;
|
|
52070
|
+
exports.LiveCursors = LiveCursors;
|
|
52071
|
+
exports.LiveTranscript = LiveTranscript;
|
|
47858
52072
|
exports.MarkdownRenderer = MarkdownRenderer;
|
|
52073
|
+
exports.MarqueeStrip = MarqueeStrip;
|
|
52074
|
+
exports.MasteryBar = MasteryBar;
|
|
52075
|
+
exports.MiniMap = MiniMap;
|
|
47859
52076
|
exports.MobileNav = MobileNav;
|
|
47860
52077
|
exports.MobileNavContent = MobileNavContent;
|
|
47861
52078
|
exports.MobileNavLink = MobileNavLink;
|
|
47862
52079
|
exports.MobileNavTrigger = MobileNavTrigger;
|
|
47863
52080
|
exports.Navbar = Navbar;
|
|
52081
|
+
exports.NumberedSteps = NumberedSteps;
|
|
47864
52082
|
exports.OtpInput = OtpInput;
|
|
47865
52083
|
exports.PRESENCE_STATUS_COLORS = STATUS_COLORS;
|
|
47866
52084
|
exports.PRESENCE_STATUS_LABELS = STATUS_LABELS;
|
|
@@ -47871,20 +52089,27 @@ exports.Popover = Popover;
|
|
|
47871
52089
|
exports.PopoverClose = PopoverClose;
|
|
47872
52090
|
exports.PopoverContent = PopoverContent;
|
|
47873
52091
|
exports.PopoverTrigger = PopoverTrigger;
|
|
52092
|
+
exports.PreCallLobby = PreCallLobby;
|
|
47874
52093
|
exports.PresenceIndicator = PresenceIndicator;
|
|
52094
|
+
exports.PricingCard = PricingCard;
|
|
47875
52095
|
exports.ProgressBar = ProgressBar;
|
|
52096
|
+
exports.RadialGauge = RadialGauge;
|
|
47876
52097
|
exports.RadioGroup = RadioGroup;
|
|
47877
52098
|
exports.RadioItem = RadioItem;
|
|
52099
|
+
exports.RatingScale = RatingScale;
|
|
47878
52100
|
exports.ReactionBar = ReactionBar;
|
|
52101
|
+
exports.ReactionBurst = ReactionBurst;
|
|
47879
52102
|
exports.ResizableDivider = ResizableDivider;
|
|
47880
52103
|
exports.ResizableLayout = ResizableLayout;
|
|
47881
52104
|
exports.ResizablePane = ResizablePane;
|
|
47882
52105
|
exports.SANE_DEFAULTS = SANE_DEFAULTS;
|
|
47883
52106
|
exports.STATUS_COLORS = STATUS_INDICATOR_COLORS;
|
|
47884
52107
|
exports.STATUS_LABELS = STATUS_INDICATOR_LABELS;
|
|
52108
|
+
exports.STICKY_NOTE_COLORS = STICKY_NOTE_COLORS;
|
|
47885
52109
|
exports.SearchBar = SearchBar;
|
|
47886
52110
|
exports.SearchResultItem = SearchResultItem;
|
|
47887
52111
|
exports.SearchResults = SearchResults;
|
|
52112
|
+
exports.SectionHead = SectionHead;
|
|
47888
52113
|
exports.SegmentedControl = SegmentedControl;
|
|
47889
52114
|
exports.SegmentedControlItem = SegmentedControlItem;
|
|
47890
52115
|
exports.Select = Select;
|
|
@@ -47913,6 +52138,8 @@ exports.SkipToContent = SkipToContent;
|
|
|
47913
52138
|
exports.SlideViewer = SlideViewer;
|
|
47914
52139
|
exports.SocialAuthButton = SocialAuthButton;
|
|
47915
52140
|
exports.SocialAuthRow = SocialAuthRow;
|
|
52141
|
+
exports.SpeakingOrb = SpeakingOrb;
|
|
52142
|
+
exports.StatGrid = StatGrid;
|
|
47916
52143
|
exports.StatsGrid = StatsGrid;
|
|
47917
52144
|
exports.StatusIndicator = StatusIndicator;
|
|
47918
52145
|
exports.Step = Step;
|
|
@@ -47921,6 +52148,7 @@ exports.StepDescription = StepDescription;
|
|
|
47921
52148
|
exports.StepIndicator = StepIndicator;
|
|
47922
52149
|
exports.StepTitle = StepTitle;
|
|
47923
52150
|
exports.Steps = Steps;
|
|
52151
|
+
exports.StickyNote = StickyNote;
|
|
47924
52152
|
exports.Switch = Switch;
|
|
47925
52153
|
exports.TableOfContents = TableOfContents;
|
|
47926
52154
|
exports.Tabs = Tabs;
|
|
@@ -47929,8 +52157,12 @@ exports.TabsList = TabsList;
|
|
|
47929
52157
|
exports.TabsTrigger = TabsTrigger;
|
|
47930
52158
|
exports.TelemetryErrorBoundary = TelemetryErrorBoundary;
|
|
47931
52159
|
exports.TelemetryProvider = TelemetryProvider;
|
|
52160
|
+
exports.Terminal = Terminal;
|
|
52161
|
+
exports.TestResults = TestResults;
|
|
47932
52162
|
exports.Textarea = Textarea;
|
|
47933
52163
|
exports.ThreadView = ThreadView;
|
|
52164
|
+
exports.Timeline = Timeline;
|
|
52165
|
+
exports.TimelineItem = TimelineItem;
|
|
47934
52166
|
exports.Toast = Toast;
|
|
47935
52167
|
exports.ToastProvider = ToastProvider;
|
|
47936
52168
|
exports.Toaster = Toaster;
|
|
@@ -47939,11 +52171,15 @@ exports.TooltipContent = TooltipContent;
|
|
|
47939
52171
|
exports.TooltipTrigger = TooltipTrigger;
|
|
47940
52172
|
exports.TypewriterText = TypewriterText;
|
|
47941
52173
|
exports.VersionSelector = VersionSelector;
|
|
52174
|
+
exports.VideoGrid = VideoGrid;
|
|
47942
52175
|
exports.VideoPlayer = VideoPlayer;
|
|
52176
|
+
exports.VideoTile = VideoTile;
|
|
47943
52177
|
exports.VoicePill = VoicePill;
|
|
47944
52178
|
exports.Waveform = Waveform;
|
|
52179
|
+
exports.Wizard = Wizard;
|
|
47945
52180
|
exports.altHintState = altHintState;
|
|
47946
52181
|
exports.animatedTextVariants = animatedTextVariants;
|
|
52182
|
+
exports.assignCursorColor = assignCursorColor;
|
|
47947
52183
|
exports.avatarFallbackVariants = avatarFallbackVariants;
|
|
47948
52184
|
exports.avatarImageVariants = avatarImageVariants;
|
|
47949
52185
|
exports.avatarTokens = avatarTokens;
|
|
@@ -48001,6 +52237,7 @@ exports.createIntensitySamples = createIntensitySamples;
|
|
|
48001
52237
|
exports.createPostHogClientSdkSink = createPostHogClientSdkSink;
|
|
48002
52238
|
exports.createPostHogHttpSink = createPostHogHttpSink;
|
|
48003
52239
|
exports.createPostHogSink = createPostHogSink;
|
|
52240
|
+
exports.createPreCallLobby = createPreCallLobby;
|
|
48004
52241
|
exports.createSegmentedControl = createSegmentedControl;
|
|
48005
52242
|
exports.createSilentSamples = createSilentSamples;
|
|
48006
52243
|
exports.createTelemetry = createTelemetry;
|
|
@@ -48053,6 +52290,7 @@ exports.latestBadgeVariants = latestBadgeVariants;
|
|
|
48053
52290
|
exports.markdownRendererTokens = markdownRendererTokens;
|
|
48054
52291
|
exports.menuContentVariants = menuContentVariants;
|
|
48055
52292
|
exports.menuItemVariants = menuItemVariants;
|
|
52293
|
+
exports.micLevelToBars = micLevelToBars;
|
|
48056
52294
|
exports.mobileNavContentVariants = mobileNavContentVariants;
|
|
48057
52295
|
exports.mobileNavLinkVariants = mobileNavLinkVariants;
|
|
48058
52296
|
exports.mobileNavTokens = mobileNavTokens;
|
|
@@ -48060,6 +52298,7 @@ exports.mobileNavTriggerVariants = mobileNavTriggerVariants;
|
|
|
48060
52298
|
exports.mobileNavVariants = mobileNavVariants;
|
|
48061
52299
|
exports.navLinkVariants = navLinkVariants;
|
|
48062
52300
|
exports.navbarVariants = navbarVariants;
|
|
52301
|
+
exports.nextStickyColor = nextStickyColor;
|
|
48063
52302
|
exports.normalizeBarCount = normalizeBarCount;
|
|
48064
52303
|
exports.normalizeIntensity = normalizeIntensity;
|
|
48065
52304
|
exports.normalizeSmoothing = normalizeSmoothing;
|
|
@@ -48122,6 +52361,7 @@ exports.slideViewerVariants = slideViewerVariants;
|
|
|
48122
52361
|
exports.smoothWaveformSamples = smoothWaveformSamples;
|
|
48123
52362
|
exports.startSessionReplay = startSessionReplay;
|
|
48124
52363
|
exports.statCardVariants = statCardVariants;
|
|
52364
|
+
exports.statColumns = statColumns;
|
|
48125
52365
|
exports.statsGridVariants = statsGridVariants;
|
|
48126
52366
|
exports.statusContainerStyles = statusContainerStyles;
|
|
48127
52367
|
exports.statusDotVariants = statusDotVariants;
|
|
@@ -48151,12 +52391,14 @@ exports.useAnalytics = useAnalytics;
|
|
|
48151
52391
|
exports.useAuth = useAuth;
|
|
48152
52392
|
exports.useConversation = useConversation;
|
|
48153
52393
|
exports.useCookieConsent = useCookieConsent;
|
|
52394
|
+
exports.useFloatingReactions = useFloatingReactions;
|
|
48154
52395
|
exports.useLogger = useLogger;
|
|
48155
52396
|
exports.useShortcut = useShortcut;
|
|
48156
52397
|
exports.useSpan = useSpan;
|
|
48157
52398
|
exports.useTelemetry = useTelemetry;
|
|
48158
52399
|
exports.useToast = useToast;
|
|
48159
52400
|
exports.useTrackEvent = useTrackEvent;
|
|
52401
|
+
exports.useWizard = useWizard;
|
|
48160
52402
|
exports.versionSelectorOptionVariants = versionSelectorOptionVariants;
|
|
48161
52403
|
exports.versionSelectorVariants = versionSelectorVariants;
|
|
48162
52404
|
exports.voicePillAvatarStyles = voicePillAvatarStyles;
|