@refraction-ui/react 0.12.3 → 0.14.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 +4285 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +4238 -11
- package/dist/index.js.map +1 -1
- package/dist/internal/audio-room/index.d.ts +91 -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/empty-state/index.d.cts +39 -0
- package/dist/internal/empty-state/index.d.ts +39 -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/input/index.d.cts +19 -1
- package/dist/internal/input/index.d.ts +19 -1
- 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/mini-map/index.d.ts +81 -0
- package/dist/internal/pre-call-lobby/index.d.ts +97 -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-audio-room/index.d.ts +39 -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-empty-state/index.d.cts +36 -0
- package/dist/internal/react-empty-state/index.d.ts +36 -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-input/index.d.cts +16 -0
- package/dist/internal/react-input/index.d.ts +16 -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-mini-map/index.d.ts +35 -0
- package/dist/internal/react-password-input/index.d.cts +26 -0
- package/dist/internal/react-password-input/index.d.ts +26 -0
- package/dist/internal/react-pre-call-lobby/index.d.ts +47 -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-segmented-control/index.d.cts +38 -0
- package/dist/internal/react-segmented-control/index.d.ts +38 -0
- package/dist/internal/react-separator/index.d.cts +29 -0
- package/dist/internal/react-separator/index.d.ts +29 -0
- package/dist/internal/react-social-auth-button/index.d.cts +31 -0
- package/dist/internal/react-social-auth-button/index.d.ts +31 -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/segmented-control/index.d.cts +56 -0
- package/dist/internal/segmented-control/index.d.ts +56 -0
- package/dist/internal/separator/index.d.cts +55 -0
- package/dist/internal/separator/index.d.ts +55 -0
- package/dist/internal/social-auth-button/index.d.cts +47 -0
- package/dist/internal/social-auth-button/index.d.ts +47 -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 +48 -20
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
|
}
|
|
@@ -36105,19 +36105,33 @@ function InlineEditor({
|
|
|
36105
36105
|
InlineEditor.displayName = "InlineEditor";
|
|
36106
36106
|
|
|
36107
36107
|
// ../input/dist/index.js
|
|
36108
|
+
function resolveAriaInvalid(ariaInvalid, validationState) {
|
|
36109
|
+
if (ariaInvalid !== void 0) {
|
|
36110
|
+
return ariaInvalid;
|
|
36111
|
+
}
|
|
36112
|
+
if (validationState === "invalid") {
|
|
36113
|
+
return true;
|
|
36114
|
+
}
|
|
36115
|
+
if (validationState === "valid") {
|
|
36116
|
+
return false;
|
|
36117
|
+
}
|
|
36118
|
+
return void 0;
|
|
36119
|
+
}
|
|
36108
36120
|
function createInput(props = {}) {
|
|
36109
36121
|
const {
|
|
36110
36122
|
disabled = false,
|
|
36111
36123
|
readOnly = false,
|
|
36112
36124
|
required = false,
|
|
36113
|
-
"aria-invalid": ariaInvalid
|
|
36125
|
+
"aria-invalid": ariaInvalid,
|
|
36126
|
+
validationState
|
|
36114
36127
|
} = props;
|
|
36128
|
+
const resolvedInvalid = resolveAriaInvalid(ariaInvalid, validationState);
|
|
36115
36129
|
const ariaProps = {};
|
|
36116
36130
|
if (disabled) {
|
|
36117
36131
|
ariaProps["aria-disabled"] = true;
|
|
36118
36132
|
}
|
|
36119
|
-
if (
|
|
36120
|
-
ariaProps["aria-invalid"] =
|
|
36133
|
+
if (resolvedInvalid !== void 0) {
|
|
36134
|
+
ariaProps["aria-invalid"] = resolvedInvalid;
|
|
36121
36135
|
}
|
|
36122
36136
|
if (required) {
|
|
36123
36137
|
ariaProps["aria-required"] = true;
|
|
@@ -36129,7 +36143,7 @@ function createInput(props = {}) {
|
|
|
36129
36143
|
if (readOnly) {
|
|
36130
36144
|
dataAttributes["data-readonly"] = "";
|
|
36131
36145
|
}
|
|
36132
|
-
if (
|
|
36146
|
+
if (resolvedInvalid === true) {
|
|
36133
36147
|
dataAttributes["data-invalid"] = "";
|
|
36134
36148
|
}
|
|
36135
36149
|
return {
|
|
@@ -36144,22 +36158,58 @@ var inputVariants = cva({
|
|
|
36144
36158
|
sm: "h-8 text-xs",
|
|
36145
36159
|
default: "h-9",
|
|
36146
36160
|
lg: "h-10 text-base"
|
|
36161
|
+
},
|
|
36162
|
+
validationState: {
|
|
36163
|
+
valid: "border-green-500 focus-visible:ring-green-500",
|
|
36164
|
+
invalid: "border-destructive focus-visible:ring-destructive"
|
|
36147
36165
|
}
|
|
36148
36166
|
},
|
|
36149
36167
|
defaultVariants: {
|
|
36150
36168
|
size: "default"
|
|
36151
36169
|
}
|
|
36152
36170
|
});
|
|
36171
|
+
var CheckIcon = /* @__PURE__ */ jsxRuntime.jsx(
|
|
36172
|
+
"svg",
|
|
36173
|
+
{
|
|
36174
|
+
"aria-hidden": "true",
|
|
36175
|
+
viewBox: "0 0 24 24",
|
|
36176
|
+
fill: "none",
|
|
36177
|
+
stroke: "currentColor",
|
|
36178
|
+
strokeWidth: "2",
|
|
36179
|
+
strokeLinecap: "round",
|
|
36180
|
+
strokeLinejoin: "round",
|
|
36181
|
+
className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-green-500",
|
|
36182
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
|
|
36183
|
+
}
|
|
36184
|
+
);
|
|
36153
36185
|
var Input = React11__namespace.forwardRef(
|
|
36154
|
-
({
|
|
36186
|
+
({
|
|
36187
|
+
type = "text",
|
|
36188
|
+
size,
|
|
36189
|
+
className,
|
|
36190
|
+
disabled,
|
|
36191
|
+
readOnly,
|
|
36192
|
+
required,
|
|
36193
|
+
validationState,
|
|
36194
|
+
leadingIcon,
|
|
36195
|
+
"aria-invalid": ariaInvalid,
|
|
36196
|
+
...props
|
|
36197
|
+
}, ref) => {
|
|
36155
36198
|
const api = createInput({
|
|
36156
36199
|
disabled,
|
|
36157
36200
|
readOnly,
|
|
36158
36201
|
required,
|
|
36159
|
-
"aria-invalid": ariaInvalid ===
|
|
36202
|
+
"aria-invalid": ariaInvalid === void 0 ? void 0 : ariaInvalid === true || ariaInvalid === "true",
|
|
36203
|
+
validationState
|
|
36160
36204
|
});
|
|
36161
|
-
const
|
|
36162
|
-
|
|
36205
|
+
const hasWrapper = leadingIcon != null || validationState != null;
|
|
36206
|
+
const classes = cn(
|
|
36207
|
+
inputVariants({ size, validationState }),
|
|
36208
|
+
leadingIcon != null && "pl-9",
|
|
36209
|
+
validationState === "valid" && "pr-9",
|
|
36210
|
+
className
|
|
36211
|
+
);
|
|
36212
|
+
const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
|
|
36163
36213
|
"input",
|
|
36164
36214
|
{
|
|
36165
36215
|
ref,
|
|
@@ -36173,6 +36223,21 @@ var Input = React11__namespace.forwardRef(
|
|
|
36173
36223
|
...props
|
|
36174
36224
|
}
|
|
36175
36225
|
);
|
|
36226
|
+
if (!hasWrapper) {
|
|
36227
|
+
return inputEl;
|
|
36228
|
+
}
|
|
36229
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
36230
|
+
leadingIcon != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
36231
|
+
"span",
|
|
36232
|
+
{
|
|
36233
|
+
"aria-hidden": "true",
|
|
36234
|
+
className: "pointer-events-none absolute left-3 top-1/2 flex size-4 -translate-y-1/2 items-center justify-center text-muted-foreground",
|
|
36235
|
+
children: leadingIcon
|
|
36236
|
+
}
|
|
36237
|
+
),
|
|
36238
|
+
inputEl,
|
|
36239
|
+
validationState === "valid" && CheckIcon
|
|
36240
|
+
] });
|
|
36176
36241
|
}
|
|
36177
36242
|
);
|
|
36178
36243
|
Input.displayName = "Input";
|
|
@@ -43550,6 +43615,164 @@ function RadioItem({ value, children, disabled = false, className }) {
|
|
|
43550
43615
|
RadioGroup.displayName = "RadioGroup";
|
|
43551
43616
|
RadioItem.displayName = "RadioItem";
|
|
43552
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
|
+
|
|
43553
43776
|
// ../reaction-bar/dist/index.js
|
|
43554
43777
|
function createReactionBar(props) {
|
|
43555
43778
|
const { reactions, onToggle, onAdd } = props;
|
|
@@ -47081,6 +47304,4010 @@ function useTrackEvent(options) {
|
|
|
47081
47304
|
[analytics]
|
|
47082
47305
|
);
|
|
47083
47306
|
}
|
|
47307
|
+
|
|
47308
|
+
// ../segmented-control/dist/index.js
|
|
47309
|
+
function createSegmentedControl(props = {}) {
|
|
47310
|
+
const { value, size = "md" } = props;
|
|
47311
|
+
const ariaProps = {
|
|
47312
|
+
role: "radiogroup"
|
|
47313
|
+
};
|
|
47314
|
+
const dataAttributes = {
|
|
47315
|
+
"data-size": size
|
|
47316
|
+
};
|
|
47317
|
+
if (value !== void 0) {
|
|
47318
|
+
dataAttributes["data-value"] = value;
|
|
47319
|
+
}
|
|
47320
|
+
return { ariaProps, dataAttributes };
|
|
47321
|
+
}
|
|
47322
|
+
function getNextSegmentIndex(current, key, count) {
|
|
47323
|
+
if (count <= 0) return current;
|
|
47324
|
+
switch (key) {
|
|
47325
|
+
case "ArrowRight":
|
|
47326
|
+
case "ArrowDown":
|
|
47327
|
+
return (current + 1) % count;
|
|
47328
|
+
case "ArrowLeft":
|
|
47329
|
+
case "ArrowUp":
|
|
47330
|
+
return (current - 1 + count) % count;
|
|
47331
|
+
case "Home":
|
|
47332
|
+
return 0;
|
|
47333
|
+
case "End":
|
|
47334
|
+
return count - 1;
|
|
47335
|
+
default:
|
|
47336
|
+
return current;
|
|
47337
|
+
}
|
|
47338
|
+
}
|
|
47339
|
+
var segmentedControlVariants = cva({
|
|
47340
|
+
base: "inline-flex items-center gap-1 rounded-lg bg-muted p-1",
|
|
47341
|
+
variants: {
|
|
47342
|
+
size: {
|
|
47343
|
+
sm: "",
|
|
47344
|
+
md: ""
|
|
47345
|
+
}
|
|
47346
|
+
},
|
|
47347
|
+
defaultVariants: {
|
|
47348
|
+
size: "md"
|
|
47349
|
+
}
|
|
47350
|
+
});
|
|
47351
|
+
var segmentedControlItemVariants = cva({
|
|
47352
|
+
base: [
|
|
47353
|
+
"inline-flex items-center justify-center gap-1.5 rounded-md font-medium",
|
|
47354
|
+
"whitespace-nowrap transition-colors",
|
|
47355
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
47356
|
+
"focus-visible:ring-offset-2 focus-visible:ring-offset-muted"
|
|
47357
|
+
].join(" "),
|
|
47358
|
+
variants: {
|
|
47359
|
+
size: {
|
|
47360
|
+
sm: "px-2.5 py-1 text-xs",
|
|
47361
|
+
md: "px-3 py-1.5 text-sm"
|
|
47362
|
+
},
|
|
47363
|
+
state: {
|
|
47364
|
+
checked: "bg-background text-foreground shadow-sm",
|
|
47365
|
+
unchecked: "text-muted-foreground hover:text-foreground"
|
|
47366
|
+
}
|
|
47367
|
+
},
|
|
47368
|
+
defaultVariants: {
|
|
47369
|
+
size: "md",
|
|
47370
|
+
state: "unchecked"
|
|
47371
|
+
}
|
|
47372
|
+
});
|
|
47373
|
+
var SegmentedControlContext = React11__namespace.createContext(null);
|
|
47374
|
+
function useSegmentedControlContext(component) {
|
|
47375
|
+
const ctx = React11__namespace.useContext(SegmentedControlContext);
|
|
47376
|
+
if (!ctx) {
|
|
47377
|
+
throw new Error(`<${component}> must be used within <SegmentedControl>`);
|
|
47378
|
+
}
|
|
47379
|
+
return ctx;
|
|
47380
|
+
}
|
|
47381
|
+
var SegmentedControl = React11__namespace.forwardRef(
|
|
47382
|
+
({
|
|
47383
|
+
value: valueProp,
|
|
47384
|
+
defaultValue,
|
|
47385
|
+
onValueChange,
|
|
47386
|
+
size = "md",
|
|
47387
|
+
className,
|
|
47388
|
+
children,
|
|
47389
|
+
...props
|
|
47390
|
+
}, ref) => {
|
|
47391
|
+
const isControlled = valueProp !== void 0;
|
|
47392
|
+
const [internalValue, setInternalValue] = React11__namespace.useState(defaultValue);
|
|
47393
|
+
const value = isControlled ? valueProp : internalValue;
|
|
47394
|
+
const itemsRef = React11__namespace.useRef([]);
|
|
47395
|
+
const select = React11__namespace.useCallback(
|
|
47396
|
+
(next) => {
|
|
47397
|
+
if (!isControlled) setInternalValue(next);
|
|
47398
|
+
onValueChange?.(next);
|
|
47399
|
+
},
|
|
47400
|
+
[isControlled, onValueChange]
|
|
47401
|
+
);
|
|
47402
|
+
const register = React11__namespace.useCallback((itemValue, focus) => {
|
|
47403
|
+
const entry = { value: itemValue, focus };
|
|
47404
|
+
itemsRef.current.push(entry);
|
|
47405
|
+
return () => {
|
|
47406
|
+
itemsRef.current = itemsRef.current.filter((e2) => e2 !== entry);
|
|
47407
|
+
};
|
|
47408
|
+
}, []);
|
|
47409
|
+
const move = React11__namespace.useCallback(
|
|
47410
|
+
(from, key) => {
|
|
47411
|
+
const items = itemsRef.current;
|
|
47412
|
+
const currentIndex = items.findIndex((e2) => e2.value === from);
|
|
47413
|
+
if (currentIndex === -1) return;
|
|
47414
|
+
const targetIndex = getNextSegmentIndex(currentIndex, key, items.length);
|
|
47415
|
+
if (targetIndex === currentIndex) return;
|
|
47416
|
+
const target = items[targetIndex];
|
|
47417
|
+
select(target.value);
|
|
47418
|
+
target.focus();
|
|
47419
|
+
},
|
|
47420
|
+
[select]
|
|
47421
|
+
);
|
|
47422
|
+
const ctx = React11__namespace.useMemo(
|
|
47423
|
+
() => ({ value, size, select, register, move }),
|
|
47424
|
+
[value, size, select, register, move]
|
|
47425
|
+
);
|
|
47426
|
+
const api = createSegmentedControl({ value, size });
|
|
47427
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47428
|
+
"div",
|
|
47429
|
+
{
|
|
47430
|
+
ref,
|
|
47431
|
+
className: cn(segmentedControlVariants({ size }), className),
|
|
47432
|
+
...api.ariaProps,
|
|
47433
|
+
...api.dataAttributes,
|
|
47434
|
+
...props,
|
|
47435
|
+
children
|
|
47436
|
+
}
|
|
47437
|
+
) });
|
|
47438
|
+
}
|
|
47439
|
+
);
|
|
47440
|
+
SegmentedControl.displayName = "SegmentedControl";
|
|
47441
|
+
var SegmentedControlItem = React11__namespace.forwardRef(({ value, className, children, onKeyDown, onClick, ...props }, ref) => {
|
|
47442
|
+
const ctx = useSegmentedControlContext("SegmentedControlItem");
|
|
47443
|
+
const selected = ctx.value === value;
|
|
47444
|
+
const internalRef = React11__namespace.useRef(null);
|
|
47445
|
+
const mergedRef = React11__namespace.useCallback(
|
|
47446
|
+
(node) => {
|
|
47447
|
+
internalRef.current = node;
|
|
47448
|
+
if (typeof ref === "function") ref(node);
|
|
47449
|
+
else if (ref) ref.current = node;
|
|
47450
|
+
},
|
|
47451
|
+
[ref]
|
|
47452
|
+
);
|
|
47453
|
+
React11__namespace.useEffect(() => {
|
|
47454
|
+
return ctx.register(value, () => internalRef.current?.focus());
|
|
47455
|
+
}, [ctx, value]);
|
|
47456
|
+
const handleKeyDown = (event) => {
|
|
47457
|
+
onKeyDown?.(event);
|
|
47458
|
+
if (event.defaultPrevented) return;
|
|
47459
|
+
switch (event.key) {
|
|
47460
|
+
case "ArrowRight":
|
|
47461
|
+
case "ArrowDown":
|
|
47462
|
+
case "ArrowLeft":
|
|
47463
|
+
case "ArrowUp":
|
|
47464
|
+
case "Home":
|
|
47465
|
+
case "End":
|
|
47466
|
+
event.preventDefault();
|
|
47467
|
+
ctx.move(value, event.key);
|
|
47468
|
+
break;
|
|
47469
|
+
case " ":
|
|
47470
|
+
case "Enter":
|
|
47471
|
+
event.preventDefault();
|
|
47472
|
+
ctx.select(value);
|
|
47473
|
+
break;
|
|
47474
|
+
}
|
|
47475
|
+
};
|
|
47476
|
+
const handleClick = (event) => {
|
|
47477
|
+
onClick?.(event);
|
|
47478
|
+
if (event.defaultPrevented) return;
|
|
47479
|
+
ctx.select(value);
|
|
47480
|
+
};
|
|
47481
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47482
|
+
"button",
|
|
47483
|
+
{
|
|
47484
|
+
ref: mergedRef,
|
|
47485
|
+
type: "button",
|
|
47486
|
+
role: "radio",
|
|
47487
|
+
"aria-checked": selected,
|
|
47488
|
+
tabIndex: selected ? 0 : -1,
|
|
47489
|
+
"data-state": selected ? "checked" : "unchecked",
|
|
47490
|
+
className: cn(
|
|
47491
|
+
segmentedControlItemVariants({
|
|
47492
|
+
size: ctx.size,
|
|
47493
|
+
state: selected ? "checked" : "unchecked"
|
|
47494
|
+
}),
|
|
47495
|
+
className
|
|
47496
|
+
),
|
|
47497
|
+
onKeyDown: handleKeyDown,
|
|
47498
|
+
onClick: handleClick,
|
|
47499
|
+
...props,
|
|
47500
|
+
children
|
|
47501
|
+
}
|
|
47502
|
+
);
|
|
47503
|
+
});
|
|
47504
|
+
SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
47505
|
+
|
|
47506
|
+
// ../password-input/dist/index.js
|
|
47507
|
+
var DEFAULT_REVEAL_LABEL = "Show password";
|
|
47508
|
+
var DEFAULT_HIDE_LABEL = "Hide password";
|
|
47509
|
+
function createPasswordInput(props = {}) {
|
|
47510
|
+
const {
|
|
47511
|
+
revealed = false,
|
|
47512
|
+
revealLabel = DEFAULT_REVEAL_LABEL,
|
|
47513
|
+
hideLabel = DEFAULT_HIDE_LABEL
|
|
47514
|
+
} = props;
|
|
47515
|
+
return {
|
|
47516
|
+
inputType: revealed ? "text" : "password",
|
|
47517
|
+
toggleLabel: revealed ? hideLabel : revealLabel,
|
|
47518
|
+
togglePressed: revealed
|
|
47519
|
+
};
|
|
47520
|
+
}
|
|
47521
|
+
var passwordToggleVariants = cva({
|
|
47522
|
+
base: "absolute right-2 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
47523
|
+
});
|
|
47524
|
+
var EyeIcon = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
47525
|
+
"svg",
|
|
47526
|
+
{
|
|
47527
|
+
"aria-hidden": "true",
|
|
47528
|
+
viewBox: "0 0 24 24",
|
|
47529
|
+
fill: "none",
|
|
47530
|
+
stroke: "currentColor",
|
|
47531
|
+
strokeWidth: "2",
|
|
47532
|
+
strokeLinecap: "round",
|
|
47533
|
+
strokeLinejoin: "round",
|
|
47534
|
+
className: "size-4",
|
|
47535
|
+
children: [
|
|
47536
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
|
|
47537
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
|
|
47538
|
+
]
|
|
47539
|
+
}
|
|
47540
|
+
);
|
|
47541
|
+
var EyeOffIcon = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
47542
|
+
"svg",
|
|
47543
|
+
{
|
|
47544
|
+
"aria-hidden": "true",
|
|
47545
|
+
viewBox: "0 0 24 24",
|
|
47546
|
+
fill: "none",
|
|
47547
|
+
stroke: "currentColor",
|
|
47548
|
+
strokeWidth: "2",
|
|
47549
|
+
strokeLinecap: "round",
|
|
47550
|
+
strokeLinejoin: "round",
|
|
47551
|
+
className: "size-4",
|
|
47552
|
+
children: [
|
|
47553
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
|
|
47554
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
|
|
47555
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
|
|
47556
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
|
|
47557
|
+
]
|
|
47558
|
+
}
|
|
47559
|
+
);
|
|
47560
|
+
var PasswordInput = React11__namespace.forwardRef(
|
|
47561
|
+
({ revealLabel = "Show password", hideLabel = "Hide password", className, ...props }, ref) => {
|
|
47562
|
+
const [revealed, setRevealed] = React11__namespace.useState(false);
|
|
47563
|
+
const { inputType, toggleLabel, togglePressed } = createPasswordInput({
|
|
47564
|
+
revealed,
|
|
47565
|
+
revealLabel,
|
|
47566
|
+
hideLabel
|
|
47567
|
+
});
|
|
47568
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
47569
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47570
|
+
Input,
|
|
47571
|
+
{
|
|
47572
|
+
ref,
|
|
47573
|
+
type: inputType,
|
|
47574
|
+
className: cn("pr-10", className),
|
|
47575
|
+
...props
|
|
47576
|
+
}
|
|
47577
|
+
),
|
|
47578
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47579
|
+
"button",
|
|
47580
|
+
{
|
|
47581
|
+
type: "button",
|
|
47582
|
+
"aria-label": toggleLabel,
|
|
47583
|
+
"aria-pressed": togglePressed,
|
|
47584
|
+
onClick: () => setRevealed((v2) => !v2),
|
|
47585
|
+
className: passwordToggleVariants(),
|
|
47586
|
+
children: revealed ? EyeOffIcon : EyeIcon
|
|
47587
|
+
}
|
|
47588
|
+
)
|
|
47589
|
+
] });
|
|
47590
|
+
}
|
|
47591
|
+
);
|
|
47592
|
+
PasswordInput.displayName = "PasswordInput";
|
|
47593
|
+
|
|
47594
|
+
// ../social-auth-button/dist/index.js
|
|
47595
|
+
var PROVIDER_LABELS = {
|
|
47596
|
+
google: "Continue with Google",
|
|
47597
|
+
github: "Continue with GitHub",
|
|
47598
|
+
microsoft: "Continue with Microsoft",
|
|
47599
|
+
apple: "Continue with Apple"
|
|
47600
|
+
};
|
|
47601
|
+
var PROVIDER_MONO = {
|
|
47602
|
+
google: false,
|
|
47603
|
+
github: true,
|
|
47604
|
+
microsoft: false,
|
|
47605
|
+
apple: true
|
|
47606
|
+
};
|
|
47607
|
+
function createSocialAuthButton(props) {
|
|
47608
|
+
const { provider } = props;
|
|
47609
|
+
return {
|
|
47610
|
+
dataAttributes: { "data-provider": provider },
|
|
47611
|
+
label: PROVIDER_LABELS[provider],
|
|
47612
|
+
mono: PROVIDER_MONO[provider]
|
|
47613
|
+
};
|
|
47614
|
+
}
|
|
47615
|
+
var socialAuthButtonVariants = cva({
|
|
47616
|
+
base: "relative"
|
|
47617
|
+
});
|
|
47618
|
+
var socialAuthRowVariants = cva({
|
|
47619
|
+
base: "grid grid-cols-1 sm:grid-cols-2 gap-3"
|
|
47620
|
+
});
|
|
47621
|
+
var lastUsedBadgeVariants = cva({
|
|
47622
|
+
base: "absolute -top-2 -right-2 rounded-full bg-primary text-primary-foreground text-[10px] px-1.5"
|
|
47623
|
+
});
|
|
47624
|
+
var baseProps = {
|
|
47625
|
+
width: 18,
|
|
47626
|
+
height: 18,
|
|
47627
|
+
viewBox: "0 0 24 24",
|
|
47628
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
47629
|
+
"aria-hidden": true
|
|
47630
|
+
};
|
|
47631
|
+
function GoogleIcon({ mono, ...props }) {
|
|
47632
|
+
if (mono) {
|
|
47633
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47634
|
+
"path",
|
|
47635
|
+
{
|
|
47636
|
+
fill: "currentColor",
|
|
47637
|
+
d: "M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 1 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z"
|
|
47638
|
+
}
|
|
47639
|
+
) });
|
|
47640
|
+
}
|
|
47641
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps, ...props, children: [
|
|
47642
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47643
|
+
"path",
|
|
47644
|
+
{
|
|
47645
|
+
fill: "#4285F4",
|
|
47646
|
+
d: "M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 0 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z"
|
|
47647
|
+
}
|
|
47648
|
+
),
|
|
47649
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47650
|
+
"path",
|
|
47651
|
+
{
|
|
47652
|
+
fill: "#34A853",
|
|
47653
|
+
d: "M3.88 7.55l2.41 1.77C6.93 7.76 8.32 6.74 10 6.4l-.34-2.85C7.06 4.02 4.93 5.5 3.88 7.55Z",
|
|
47654
|
+
opacity: 0
|
|
47655
|
+
}
|
|
47656
|
+
),
|
|
47657
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47658
|
+
"path",
|
|
47659
|
+
{
|
|
47660
|
+
fill: "#FBBC05",
|
|
47661
|
+
d: "M12 21.2c2.43 0 4.46-.8 5.95-2.18l-2.74-2.13c-.74.5-1.74.86-3.21.86-2.66 0-4.92-1.79-5.73-4.2l-2.84 2.18A9.2 9.2 0 0 0 12 21.2Z",
|
|
47662
|
+
opacity: 0
|
|
47663
|
+
}
|
|
47664
|
+
)
|
|
47665
|
+
] });
|
|
47666
|
+
}
|
|
47667
|
+
function GitHubIcon({ mono: _mono, ...props }) {
|
|
47668
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47669
|
+
"path",
|
|
47670
|
+
{
|
|
47671
|
+
fill: "currentColor",
|
|
47672
|
+
d: "M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.46-1.11-1.46-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"
|
|
47673
|
+
}
|
|
47674
|
+
) });
|
|
47675
|
+
}
|
|
47676
|
+
function MicrosoftIcon({ mono, ...props }) {
|
|
47677
|
+
if (mono) {
|
|
47678
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps, ...props, children: [
|
|
47679
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M3 3h8v8H3z" }),
|
|
47680
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M13 3h8v8h-8z", opacity: 0.7 }),
|
|
47681
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M3 13h8v8H3z", opacity: 0.7 }),
|
|
47682
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M13 13h8v8h-8z", opacity: 0.4 })
|
|
47683
|
+
] });
|
|
47684
|
+
}
|
|
47685
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps, ...props, children: [
|
|
47686
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#F25022", d: "M3 3h8v8H3z" }),
|
|
47687
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#7FBA00", d: "M13 3h8v8h-8z" }),
|
|
47688
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#00A4EF", d: "M3 13h8v8H3z" }),
|
|
47689
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FFB900", d: "M13 13h8v8h-8z" })
|
|
47690
|
+
] });
|
|
47691
|
+
}
|
|
47692
|
+
function AppleIcon({ mono: _mono, ...props }) {
|
|
47693
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47694
|
+
"path",
|
|
47695
|
+
{
|
|
47696
|
+
fill: "currentColor",
|
|
47697
|
+
d: "M16.37 12.78c-.03-2.62 2.14-3.88 2.24-3.94-1.22-1.79-3.12-2.03-3.79-2.06-1.61-.16-3.15.95-3.97.95-.82 0-2.08-.93-3.42-.9-1.76.03-3.39 1.02-4.29 2.6-1.83 3.18-.47 7.88 1.31 10.46.87 1.26 1.91 2.67 3.27 2.62 1.31-.05 1.81-.85 3.4-.85 1.58 0 2.03.85 3.42.82 1.41-.02 2.31-1.28 3.17-2.55.99-1.46 1.4-2.88 1.42-2.95-.03-.01-2.73-1.05-2.76-4.15M13.9 5.1c.72-.88 1.21-2.09 1.08-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.24 2.01-1.09 3.19 1.16.09 2.34-.59 3.05-1.45"
|
|
47698
|
+
}
|
|
47699
|
+
) });
|
|
47700
|
+
}
|
|
47701
|
+
var PROVIDER_ICONS = {
|
|
47702
|
+
google: GoogleIcon,
|
|
47703
|
+
github: GitHubIcon,
|
|
47704
|
+
microsoft: MicrosoftIcon,
|
|
47705
|
+
apple: AppleIcon
|
|
47706
|
+
};
|
|
47707
|
+
var SocialAuthButton = React11__namespace.forwardRef(({ provider, lastUsed, loading, disabled, className, ...props }, ref) => {
|
|
47708
|
+
const { label, mono, dataAttributes } = createSocialAuthButton({ provider });
|
|
47709
|
+
const Icon = PROVIDER_ICONS[provider];
|
|
47710
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: socialAuthButtonVariants(), children: [
|
|
47711
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
47712
|
+
Button,
|
|
47713
|
+
{
|
|
47714
|
+
ref,
|
|
47715
|
+
variant: "outline",
|
|
47716
|
+
loading,
|
|
47717
|
+
disabled,
|
|
47718
|
+
className: cn("w-full justify-center gap-2", className),
|
|
47719
|
+
...dataAttributes,
|
|
47720
|
+
...props,
|
|
47721
|
+
children: [
|
|
47722
|
+
!loading && /* @__PURE__ */ jsxRuntime.jsx(Icon, { mono, className: "shrink-0" }),
|
|
47723
|
+
label
|
|
47724
|
+
]
|
|
47725
|
+
}
|
|
47726
|
+
),
|
|
47727
|
+
lastUsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: lastUsedBadgeVariants(), children: "Last used" })
|
|
47728
|
+
] });
|
|
47729
|
+
});
|
|
47730
|
+
SocialAuthButton.displayName = "SocialAuthButton";
|
|
47731
|
+
var SocialAuthRow = React11__namespace.forwardRef(
|
|
47732
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
47733
|
+
"div",
|
|
47734
|
+
{
|
|
47735
|
+
ref,
|
|
47736
|
+
className: cn(socialAuthRowVariants(), className),
|
|
47737
|
+
...props,
|
|
47738
|
+
children
|
|
47739
|
+
}
|
|
47740
|
+
)
|
|
47741
|
+
);
|
|
47742
|
+
SocialAuthRow.displayName = "SocialAuthRow";
|
|
47743
|
+
|
|
47744
|
+
// ../separator/dist/index.js
|
|
47745
|
+
function createSeparator(props = {}) {
|
|
47746
|
+
const { orientation = "horizontal", decorative = true } = props;
|
|
47747
|
+
const ariaProps = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation };
|
|
47748
|
+
const dataAttributes = {
|
|
47749
|
+
"data-orientation": orientation
|
|
47750
|
+
};
|
|
47751
|
+
return {
|
|
47752
|
+
ariaProps,
|
|
47753
|
+
dataAttributes
|
|
47754
|
+
};
|
|
47755
|
+
}
|
|
47756
|
+
var separatorVariants = cva({
|
|
47757
|
+
base: "",
|
|
47758
|
+
variants: {
|
|
47759
|
+
orientation: {
|
|
47760
|
+
horizontal: "h-px w-full bg-border",
|
|
47761
|
+
vertical: "w-px h-full bg-border"
|
|
47762
|
+
},
|
|
47763
|
+
labeled: {
|
|
47764
|
+
true: "flex items-center",
|
|
47765
|
+
false: ""
|
|
47766
|
+
}
|
|
47767
|
+
},
|
|
47768
|
+
defaultVariants: {
|
|
47769
|
+
orientation: "horizontal",
|
|
47770
|
+
labeled: "false"
|
|
47771
|
+
}
|
|
47772
|
+
});
|
|
47773
|
+
var separatorLineClass = "h-px flex-1 bg-border";
|
|
47774
|
+
var separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
|
|
47775
|
+
var Separator = React11__namespace.forwardRef(
|
|
47776
|
+
({
|
|
47777
|
+
orientation = "horizontal",
|
|
47778
|
+
label,
|
|
47779
|
+
decorative = true,
|
|
47780
|
+
className,
|
|
47781
|
+
...props
|
|
47782
|
+
}, ref) => {
|
|
47783
|
+
if (orientation === "horizontal" && label != null) {
|
|
47784
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
47785
|
+
"div",
|
|
47786
|
+
{
|
|
47787
|
+
ref,
|
|
47788
|
+
role: "none",
|
|
47789
|
+
className: cn(separatorVariants({ labeled: "true" }), className),
|
|
47790
|
+
...props,
|
|
47791
|
+
children: [
|
|
47792
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLineClass }),
|
|
47793
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLabelClass, children: label }),
|
|
47794
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLineClass })
|
|
47795
|
+
]
|
|
47796
|
+
}
|
|
47797
|
+
);
|
|
47798
|
+
}
|
|
47799
|
+
const { ariaProps, dataAttributes } = createSeparator({
|
|
47800
|
+
orientation,
|
|
47801
|
+
decorative
|
|
47802
|
+
});
|
|
47803
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47804
|
+
"div",
|
|
47805
|
+
{
|
|
47806
|
+
ref,
|
|
47807
|
+
className: cn(separatorVariants({ orientation }), className),
|
|
47808
|
+
...ariaProps,
|
|
47809
|
+
...dataAttributes,
|
|
47810
|
+
...props
|
|
47811
|
+
}
|
|
47812
|
+
);
|
|
47813
|
+
}
|
|
47814
|
+
);
|
|
47815
|
+
Separator.displayName = "Separator";
|
|
47816
|
+
|
|
47817
|
+
// ../empty-state/dist/index.js
|
|
47818
|
+
function createEmptyState(options = {}) {
|
|
47819
|
+
const { tone = "neutral" } = options;
|
|
47820
|
+
const dataAttributes = {
|
|
47821
|
+
"data-tone": tone
|
|
47822
|
+
};
|
|
47823
|
+
return {
|
|
47824
|
+
dataAttributes
|
|
47825
|
+
};
|
|
47826
|
+
}
|
|
47827
|
+
var emptyStateVariants = cva({
|
|
47828
|
+
base: "flex flex-col items-center text-center gap-3 p-8",
|
|
47829
|
+
variants: {
|
|
47830
|
+
bordered: {
|
|
47831
|
+
true: "rounded-xl border border-border bg-card",
|
|
47832
|
+
false: ""
|
|
47833
|
+
}
|
|
47834
|
+
},
|
|
47835
|
+
defaultVariants: {
|
|
47836
|
+
bordered: "false"
|
|
47837
|
+
}
|
|
47838
|
+
});
|
|
47839
|
+
var emptyStateIconChipVariants = cva({
|
|
47840
|
+
base: "flex size-12 items-center justify-center rounded-full",
|
|
47841
|
+
variants: {
|
|
47842
|
+
tone: {
|
|
47843
|
+
neutral: "bg-muted text-muted-foreground",
|
|
47844
|
+
success: "bg-green-500/10 text-green-600",
|
|
47845
|
+
warning: "bg-yellow-500/10 text-yellow-600",
|
|
47846
|
+
danger: "bg-destructive/10 text-destructive"
|
|
47847
|
+
}
|
|
47848
|
+
},
|
|
47849
|
+
defaultVariants: {
|
|
47850
|
+
tone: "neutral"
|
|
47851
|
+
}
|
|
47852
|
+
});
|
|
47853
|
+
var emptyStateTitleClass = "text-lg font-semibold text-foreground";
|
|
47854
|
+
var emptyStateDescriptionClass = "text-sm text-muted-foreground";
|
|
47855
|
+
var emptyStateActionsClass = "flex items-center justify-center gap-2";
|
|
47856
|
+
var EmptyState = React11__namespace.forwardRef(
|
|
47857
|
+
({
|
|
47858
|
+
icon,
|
|
47859
|
+
tone = "neutral",
|
|
47860
|
+
title,
|
|
47861
|
+
description,
|
|
47862
|
+
actions,
|
|
47863
|
+
bordered = false,
|
|
47864
|
+
className,
|
|
47865
|
+
...props
|
|
47866
|
+
}, ref) => {
|
|
47867
|
+
const api = createEmptyState({ tone });
|
|
47868
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
47869
|
+
"div",
|
|
47870
|
+
{
|
|
47871
|
+
ref,
|
|
47872
|
+
className: cn(
|
|
47873
|
+
emptyStateVariants({ bordered: bordered ? "true" : "false" }),
|
|
47874
|
+
className
|
|
47875
|
+
),
|
|
47876
|
+
...api.dataAttributes,
|
|
47877
|
+
...props,
|
|
47878
|
+
children: [
|
|
47879
|
+
icon != null && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: emptyStateIconChipVariants({ tone }), children: icon }),
|
|
47880
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: emptyStateTitleClass, children: title }),
|
|
47881
|
+
description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: emptyStateDescriptionClass, children: description }),
|
|
47882
|
+
actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyStateActionsClass, children: actions })
|
|
47883
|
+
]
|
|
47884
|
+
}
|
|
47885
|
+
);
|
|
47886
|
+
}
|
|
47887
|
+
);
|
|
47888
|
+
EmptyState.displayName = "EmptyState";
|
|
47889
|
+
var ConfirmationCard = React11__namespace.forwardRef(({ bordered = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { ref, bordered, ...props }));
|
|
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";
|
|
47084
51311
|
/*! Bundled license information:
|
|
47085
51312
|
|
|
47086
51313
|
@nevware21/ts-utils/dist/es5/mod/ts-utils.js:
|
|
@@ -47103,6 +51330,7 @@ exports.AltHintState = AltHintState;
|
|
|
47103
51330
|
exports.AnalyticsProvider = AnalyticsProvider;
|
|
47104
51331
|
exports.AnimatedText = AnimatedText;
|
|
47105
51332
|
exports.AppShell = AppShell;
|
|
51333
|
+
exports.AudioRoom = AudioRoom;
|
|
47106
51334
|
exports.AuthGuard = AuthGuard;
|
|
47107
51335
|
exports.AuthProvider = AuthProvider;
|
|
47108
51336
|
exports.Avatar = Avatar2;
|
|
@@ -47115,8 +51343,11 @@ exports.BottomNav = BottomNav;
|
|
|
47115
51343
|
exports.Breadcrumbs = Breadcrumbs;
|
|
47116
51344
|
exports.Button = Button;
|
|
47117
51345
|
exports.CATEGORY_LABELS = CATEGORY_LABELS;
|
|
51346
|
+
exports.CURSOR_COLORS = CURSOR_COLORS;
|
|
47118
51347
|
exports.Calendar = Calendar;
|
|
47119
51348
|
exports.CalendarHeader = CalendarHeader;
|
|
51349
|
+
exports.CallControlButton = CallControlButton;
|
|
51350
|
+
exports.CallControls = CallControls;
|
|
47120
51351
|
exports.Callout = Callout;
|
|
47121
51352
|
exports.CalloutContent = CalloutContent;
|
|
47122
51353
|
exports.CalloutDescription = CalloutDescription;
|
|
@@ -47135,6 +51366,7 @@ exports.CarouselItem = CarouselItem;
|
|
|
47135
51366
|
exports.CarouselTrigger = CarouselTrigger;
|
|
47136
51367
|
exports.Chat = Chat;
|
|
47137
51368
|
exports.Checkbox = Checkbox;
|
|
51369
|
+
exports.Checklist = Checklist;
|
|
47138
51370
|
exports.CodeBlock = CodeBlock;
|
|
47139
51371
|
exports.CodeBlockContent = CodeBlockContent;
|
|
47140
51372
|
exports.CodeBlockHeader = CodeBlockHeader;
|
|
@@ -47157,8 +51389,10 @@ exports.CommandItem = CommandItem;
|
|
|
47157
51389
|
exports.CommandList = CommandList;
|
|
47158
51390
|
exports.CommandSeparator = CommandSeparator;
|
|
47159
51391
|
exports.Composer = Composer;
|
|
51392
|
+
exports.ConfirmationCard = ConfirmationCard;
|
|
47160
51393
|
exports.ContentProtection = ContentProtection;
|
|
47161
51394
|
exports.CookieConsent = CookieConsent;
|
|
51395
|
+
exports.Cursor = Cursor;
|
|
47162
51396
|
exports.DEFAULT_CATEGORIES = DEFAULT_CATEGORIES;
|
|
47163
51397
|
exports.DEFAULT_VOICE_PILL_POSITION = DEFAULT_VOICE_PILL_POSITION;
|
|
47164
51398
|
exports.DEFAULT_VOICE_PILL_SPEAKER = DEFAULT_VOICE_PILL_SPEAKER;
|
|
@@ -47187,13 +51421,20 @@ exports.DropdownMenuSeparator = DropdownMenuSeparator;
|
|
|
47187
51421
|
exports.DropdownMenuTrigger = DropdownMenuTrigger;
|
|
47188
51422
|
exports.EMOJI_CATEGORIES = EMOJI_CATEGORIES;
|
|
47189
51423
|
exports.EMOJI_DATA = EMOJI_DATA;
|
|
51424
|
+
exports.EditorStatusBar = EditorStatusBar;
|
|
51425
|
+
exports.EditorTabs = EditorTabs;
|
|
47190
51426
|
exports.EmojiPicker = EmojiPicker;
|
|
51427
|
+
exports.EmptyState = EmptyState;
|
|
47191
51428
|
exports.FeedbackButton = FeedbackButton;
|
|
47192
51429
|
exports.FeedbackDialog = FeedbackDialog;
|
|
47193
51430
|
exports.FileTree = FileTree;
|
|
47194
51431
|
exports.FileUpload = FileUpload;
|
|
51432
|
+
exports.FloatingReactions = FloatingReactions;
|
|
51433
|
+
exports.FlowEditor = FlowEditor;
|
|
47195
51434
|
exports.Footer = Footer;
|
|
51435
|
+
exports.GraphView = GraphView;
|
|
47196
51436
|
exports.IconSystem = IconSystem;
|
|
51437
|
+
exports.InfiniteCanvas = InfiniteCanvas;
|
|
47197
51438
|
exports.InlineEditor = InlineEditor;
|
|
47198
51439
|
exports.Input = Input;
|
|
47199
51440
|
exports.InputGroup = InputGroup;
|
|
@@ -47204,7 +51445,11 @@ exports.InstallPrompt = InstallPrompt;
|
|
|
47204
51445
|
exports.KeyboardShortcut = KeyboardShortcut;
|
|
47205
51446
|
exports.LanguageSelector = LanguageSelector;
|
|
47206
51447
|
exports.LinkCard = LinkCard;
|
|
51448
|
+
exports.LiveCaptions = LiveCaptions;
|
|
51449
|
+
exports.LiveCursors = LiveCursors;
|
|
51450
|
+
exports.LiveTranscript = LiveTranscript;
|
|
47207
51451
|
exports.MarkdownRenderer = MarkdownRenderer;
|
|
51452
|
+
exports.MiniMap = MiniMap;
|
|
47208
51453
|
exports.MobileNav = MobileNav;
|
|
47209
51454
|
exports.MobileNavContent = MobileNavContent;
|
|
47210
51455
|
exports.MobileNavLink = MobileNavLink;
|
|
@@ -47214,29 +51459,38 @@ exports.OtpInput = OtpInput;
|
|
|
47214
51459
|
exports.PRESENCE_STATUS_COLORS = STATUS_COLORS;
|
|
47215
51460
|
exports.PRESENCE_STATUS_LABELS = STATUS_LABELS;
|
|
47216
51461
|
exports.Pagination = Pagination;
|
|
51462
|
+
exports.PasswordInput = PasswordInput;
|
|
47217
51463
|
exports.Payment = Payment;
|
|
47218
51464
|
exports.Popover = Popover;
|
|
47219
51465
|
exports.PopoverClose = PopoverClose;
|
|
47220
51466
|
exports.PopoverContent = PopoverContent;
|
|
47221
51467
|
exports.PopoverTrigger = PopoverTrigger;
|
|
51468
|
+
exports.PreCallLobby = PreCallLobby;
|
|
47222
51469
|
exports.PresenceIndicator = PresenceIndicator;
|
|
47223
51470
|
exports.ProgressBar = ProgressBar;
|
|
51471
|
+
exports.RadialGauge = RadialGauge;
|
|
47224
51472
|
exports.RadioGroup = RadioGroup;
|
|
47225
51473
|
exports.RadioItem = RadioItem;
|
|
51474
|
+
exports.RatingScale = RatingScale;
|
|
47226
51475
|
exports.ReactionBar = ReactionBar;
|
|
51476
|
+
exports.ReactionBurst = ReactionBurst;
|
|
47227
51477
|
exports.ResizableDivider = ResizableDivider;
|
|
47228
51478
|
exports.ResizableLayout = ResizableLayout;
|
|
47229
51479
|
exports.ResizablePane = ResizablePane;
|
|
47230
51480
|
exports.SANE_DEFAULTS = SANE_DEFAULTS;
|
|
47231
51481
|
exports.STATUS_COLORS = STATUS_INDICATOR_COLORS;
|
|
47232
51482
|
exports.STATUS_LABELS = STATUS_INDICATOR_LABELS;
|
|
51483
|
+
exports.STICKY_NOTE_COLORS = STICKY_NOTE_COLORS;
|
|
47233
51484
|
exports.SearchBar = SearchBar;
|
|
47234
51485
|
exports.SearchResultItem = SearchResultItem;
|
|
47235
51486
|
exports.SearchResults = SearchResults;
|
|
51487
|
+
exports.SegmentedControl = SegmentedControl;
|
|
51488
|
+
exports.SegmentedControlItem = SegmentedControlItem;
|
|
47236
51489
|
exports.Select = Select;
|
|
47237
51490
|
exports.SelectContent = SelectContent;
|
|
47238
51491
|
exports.SelectItem = SelectItem;
|
|
47239
51492
|
exports.SelectTrigger = SelectTrigger;
|
|
51493
|
+
exports.Separator = Separator;
|
|
47240
51494
|
exports.Sheet = Sheet;
|
|
47241
51495
|
exports.SheetClose = SheetClose;
|
|
47242
51496
|
exports.SheetContent = SheetContent;
|
|
@@ -47256,6 +51510,9 @@ exports.Skeleton = Skeleton;
|
|
|
47256
51510
|
exports.SkeletonText = SkeletonText;
|
|
47257
51511
|
exports.SkipToContent = SkipToContent;
|
|
47258
51512
|
exports.SlideViewer = SlideViewer;
|
|
51513
|
+
exports.SocialAuthButton = SocialAuthButton;
|
|
51514
|
+
exports.SocialAuthRow = SocialAuthRow;
|
|
51515
|
+
exports.SpeakingOrb = SpeakingOrb;
|
|
47259
51516
|
exports.StatsGrid = StatsGrid;
|
|
47260
51517
|
exports.StatusIndicator = StatusIndicator;
|
|
47261
51518
|
exports.Step = Step;
|
|
@@ -47264,6 +51521,7 @@ exports.StepDescription = StepDescription;
|
|
|
47264
51521
|
exports.StepIndicator = StepIndicator;
|
|
47265
51522
|
exports.StepTitle = StepTitle;
|
|
47266
51523
|
exports.Steps = Steps;
|
|
51524
|
+
exports.StickyNote = StickyNote;
|
|
47267
51525
|
exports.Switch = Switch;
|
|
47268
51526
|
exports.TableOfContents = TableOfContents;
|
|
47269
51527
|
exports.Tabs = Tabs;
|
|
@@ -47272,8 +51530,12 @@ exports.TabsList = TabsList;
|
|
|
47272
51530
|
exports.TabsTrigger = TabsTrigger;
|
|
47273
51531
|
exports.TelemetryErrorBoundary = TelemetryErrorBoundary;
|
|
47274
51532
|
exports.TelemetryProvider = TelemetryProvider;
|
|
51533
|
+
exports.Terminal = Terminal;
|
|
51534
|
+
exports.TestResults = TestResults;
|
|
47275
51535
|
exports.Textarea = Textarea;
|
|
47276
51536
|
exports.ThreadView = ThreadView;
|
|
51537
|
+
exports.Timeline = Timeline;
|
|
51538
|
+
exports.TimelineItem = TimelineItem;
|
|
47277
51539
|
exports.Toast = Toast;
|
|
47278
51540
|
exports.ToastProvider = ToastProvider;
|
|
47279
51541
|
exports.Toaster = Toaster;
|
|
@@ -47282,11 +51544,15 @@ exports.TooltipContent = TooltipContent;
|
|
|
47282
51544
|
exports.TooltipTrigger = TooltipTrigger;
|
|
47283
51545
|
exports.TypewriterText = TypewriterText;
|
|
47284
51546
|
exports.VersionSelector = VersionSelector;
|
|
51547
|
+
exports.VideoGrid = VideoGrid;
|
|
47285
51548
|
exports.VideoPlayer = VideoPlayer;
|
|
51549
|
+
exports.VideoTile = VideoTile;
|
|
47286
51550
|
exports.VoicePill = VoicePill;
|
|
47287
51551
|
exports.Waveform = Waveform;
|
|
51552
|
+
exports.Wizard = Wizard;
|
|
47288
51553
|
exports.altHintState = altHintState;
|
|
47289
51554
|
exports.animatedTextVariants = animatedTextVariants;
|
|
51555
|
+
exports.assignCursorColor = assignCursorColor;
|
|
47290
51556
|
exports.avatarFallbackVariants = avatarFallbackVariants;
|
|
47291
51557
|
exports.avatarImageVariants = avatarImageVariants;
|
|
47292
51558
|
exports.avatarTokens = avatarTokens;
|
|
@@ -47344,6 +51610,8 @@ exports.createIntensitySamples = createIntensitySamples;
|
|
|
47344
51610
|
exports.createPostHogClientSdkSink = createPostHogClientSdkSink;
|
|
47345
51611
|
exports.createPostHogHttpSink = createPostHogHttpSink;
|
|
47346
51612
|
exports.createPostHogSink = createPostHogSink;
|
|
51613
|
+
exports.createPreCallLobby = createPreCallLobby;
|
|
51614
|
+
exports.createSegmentedControl = createSegmentedControl;
|
|
47347
51615
|
exports.createSilentSamples = createSilentSamples;
|
|
47348
51616
|
exports.createTelemetry = createTelemetry;
|
|
47349
51617
|
exports.createVoicePill = createVoicePill;
|
|
@@ -47369,6 +51637,7 @@ exports.formatTimestamp = formatTimestamp;
|
|
|
47369
51637
|
exports.getAssignableRoles = getAssignableRoles;
|
|
47370
51638
|
exports.getDefaultPortal = getDefaultPortal;
|
|
47371
51639
|
exports.getInitials = getInitials;
|
|
51640
|
+
exports.getNextSegmentIndex = getNextSegmentIndex;
|
|
47372
51641
|
exports.getReplyCount = getReplyCount;
|
|
47373
51642
|
exports.getVoicePillAriaLabel = getVoicePillAriaLabel;
|
|
47374
51643
|
exports.getVoicePillInitials = getVoicePillInitials;
|
|
@@ -47394,6 +51663,7 @@ exports.latestBadgeVariants = latestBadgeVariants;
|
|
|
47394
51663
|
exports.markdownRendererTokens = markdownRendererTokens;
|
|
47395
51664
|
exports.menuContentVariants = menuContentVariants;
|
|
47396
51665
|
exports.menuItemVariants = menuItemVariants;
|
|
51666
|
+
exports.micLevelToBars = micLevelToBars;
|
|
47397
51667
|
exports.mobileNavContentVariants = mobileNavContentVariants;
|
|
47398
51668
|
exports.mobileNavLinkVariants = mobileNavLinkVariants;
|
|
47399
51669
|
exports.mobileNavTokens = mobileNavTokens;
|
|
@@ -47401,6 +51671,7 @@ exports.mobileNavTriggerVariants = mobileNavTriggerVariants;
|
|
|
47401
51671
|
exports.mobileNavVariants = mobileNavVariants;
|
|
47402
51672
|
exports.navLinkVariants = navLinkVariants;
|
|
47403
51673
|
exports.navbarVariants = navbarVariants;
|
|
51674
|
+
exports.nextStickyColor = nextStickyColor;
|
|
47404
51675
|
exports.normalizeBarCount = normalizeBarCount;
|
|
47405
51676
|
exports.normalizeIntensity = normalizeIntensity;
|
|
47406
51677
|
exports.normalizeSmoothing = normalizeSmoothing;
|
|
@@ -47436,6 +51707,8 @@ exports.rowVariants = rowVariants;
|
|
|
47436
51707
|
exports.scaleWaveformSamples = scaleWaveformSamples;
|
|
47437
51708
|
exports.searchBarVariants = searchBarVariants;
|
|
47438
51709
|
exports.searchResultVariants = searchResultVariants;
|
|
51710
|
+
exports.segmentedControlItemVariants = segmentedControlItemVariants;
|
|
51711
|
+
exports.segmentedControlVariants = segmentedControlVariants;
|
|
47439
51712
|
exports.selectContentVariants = selectContentVariants;
|
|
47440
51713
|
exports.selectItemVariants = selectItemVariants;
|
|
47441
51714
|
exports.selectMainTimeline = selectMainTimeline;
|
|
@@ -47490,12 +51763,14 @@ exports.useAnalytics = useAnalytics;
|
|
|
47490
51763
|
exports.useAuth = useAuth;
|
|
47491
51764
|
exports.useConversation = useConversation;
|
|
47492
51765
|
exports.useCookieConsent = useCookieConsent;
|
|
51766
|
+
exports.useFloatingReactions = useFloatingReactions;
|
|
47493
51767
|
exports.useLogger = useLogger;
|
|
47494
51768
|
exports.useShortcut = useShortcut;
|
|
47495
51769
|
exports.useSpan = useSpan;
|
|
47496
51770
|
exports.useTelemetry = useTelemetry;
|
|
47497
51771
|
exports.useToast = useToast;
|
|
47498
51772
|
exports.useTrackEvent = useTrackEvent;
|
|
51773
|
+
exports.useWizard = useWizard;
|
|
47499
51774
|
exports.versionSelectorOptionVariants = versionSelectorOptionVariants;
|
|
47500
51775
|
exports.versionSelectorVariants = versionSelectorVariants;
|
|
47501
51776
|
exports.voicePillAvatarStyles = voicePillAvatarStyles;
|