@sanmid/flux 0.1.3 → 0.1.5
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/README.md +1 -1
- package/dist/index.js +164 -43
- package/dist/index.js.map +1 -1
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ npm install @sanmid/flux -D
|
|
|
14
14
|
|
|
15
15
|
Or: `pnpm add -D @sanmid/flux` · `yarn add -D @sanmid/flux`
|
|
16
16
|
|
|
17
|
-
Icons, `clsx`, `tailwind-merge
|
|
17
|
+
Icons, `clsx`, and `tailwind-merge` are **dependencies of Flux** — you do not install them separately. You only need **`react` and `react-dom` (18+)** in your app (Flux lists them as peer dependencies so one React instance is shared with your UI).
|
|
18
18
|
|
|
19
19
|
---
|
|
20
20
|
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
|
|
2
1
|
import { createContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, useContext } from 'react';
|
|
3
2
|
import { flushSync, createPortal } from 'react-dom';
|
|
4
|
-
import { jsx,
|
|
3
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
5
4
|
import { X, CornerUpLeft, Check, Copy, AlignHorizontalJustifyStart, AlignHorizontalJustifyCenter, AlignHorizontalJustifyEnd, AlignVerticalJustifyStart, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, Rows3, SquareSquare, AlignVerticalSpaceAround, AlignHorizontalSpaceAround, ArrowUpDown, ArrowLeftRight, AlignLeft, AlignCenter, AlignRight, ArrowUpToLine, FoldVertical, ArrowDownToLine, SunDim, Minus, Plus, Eye, Ruler, SquareDashed, ChevronDown, Link2, Square, MoveDown, MoveRight } from 'lucide-react';
|
|
6
5
|
import { clsx } from 'clsx';
|
|
7
6
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -149,10 +148,23 @@ function BoxModelOverlay({ enabled, target }) {
|
|
|
149
148
|
/* @__PURE__ */ jsx("div", { ref: contentRef, className: band, "aria-hidden": true })
|
|
150
149
|
] });
|
|
151
150
|
}
|
|
151
|
+
function usePrefersReducedMotion() {
|
|
152
|
+
const [reduced, setReduced] = useState(false);
|
|
153
|
+
useEffect(() => {
|
|
154
|
+
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
155
|
+
const sync = () => setReduced(mq.matches);
|
|
156
|
+
sync();
|
|
157
|
+
mq.addEventListener("change", sync);
|
|
158
|
+
return () => mq.removeEventListener("change", sync);
|
|
159
|
+
}, []);
|
|
160
|
+
return reduced;
|
|
161
|
+
}
|
|
152
162
|
var MONO = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace";
|
|
153
163
|
var PROMPT_MS = 22;
|
|
154
164
|
var LINE_GAP_MS = 300;
|
|
155
165
|
var AFTER_LAST_MS = 450;
|
|
166
|
+
var EASE_OUT = "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
167
|
+
var DIALOG_EASE = "cubic-bezier(0.34, 1.3, 0.64, 1)";
|
|
156
168
|
function TrafficLightsSvg() {
|
|
157
169
|
return /* @__PURE__ */ jsxs("svg", { width: "52", height: "12", viewBox: "0 0 52 12", "aria-hidden": true, className: "shrink-0", children: [
|
|
158
170
|
/* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: "#FF5F57" }),
|
|
@@ -293,11 +305,12 @@ function TerminalTyping({
|
|
|
293
305
|
}
|
|
294
306
|
);
|
|
295
307
|
}
|
|
296
|
-
var EASE_OUT = [0.4, 0, 0.2, 1];
|
|
297
308
|
var DISMISS_AFTER_TYPING_MS = 5200;
|
|
298
309
|
function CopySuccessOverlay({ open, onClose }) {
|
|
299
|
-
const reduceMotion =
|
|
310
|
+
const reduceMotion = usePrefersReducedMotion();
|
|
300
311
|
const [typingComplete, setTypingComplete] = useState(false);
|
|
312
|
+
const [mounted, setMounted] = useState(false);
|
|
313
|
+
const [animIn, setAnimIn] = useState(false);
|
|
301
314
|
const handleTypingComplete = useCallback(() => setTypingComplete(true), []);
|
|
302
315
|
useEffect(() => {
|
|
303
316
|
if (!open) {
|
|
@@ -320,36 +333,57 @@ function CopySuccessOverlay({ open, onClose }) {
|
|
|
320
333
|
const t = window.setTimeout(onClose, DISMISS_AFTER_TYPING_MS);
|
|
321
334
|
return () => window.clearTimeout(t);
|
|
322
335
|
}, [open, typingComplete, onClose]);
|
|
336
|
+
useLayoutEffect(() => {
|
|
337
|
+
if (open) setMounted(true);
|
|
338
|
+
}, [open]);
|
|
339
|
+
useEffect(() => {
|
|
340
|
+
if (!open) {
|
|
341
|
+
setAnimIn(false);
|
|
342
|
+
return;
|
|
343
|
+
}
|
|
344
|
+
setAnimIn(false);
|
|
345
|
+
const id = requestAnimationFrame(() => {
|
|
346
|
+
requestAnimationFrame(() => setAnimIn(true));
|
|
347
|
+
});
|
|
348
|
+
return () => cancelAnimationFrame(id);
|
|
349
|
+
}, [open]);
|
|
350
|
+
const onBackdropTransitionEnd = useCallback((e) => {
|
|
351
|
+
if (e.target !== e.currentTarget) return;
|
|
352
|
+
if (e.propertyName !== "opacity") return;
|
|
353
|
+
if (!open) setMounted(false);
|
|
354
|
+
}, [open]);
|
|
323
355
|
if (typeof document === "undefined") return null;
|
|
324
356
|
const running = open && !typingComplete && !reduceMotion;
|
|
357
|
+
const backdropStyle = {
|
|
358
|
+
opacity: animIn ? 1 : 0,
|
|
359
|
+
transition: reduceMotion ? "none" : `opacity 220ms ${EASE_OUT}`
|
|
360
|
+
};
|
|
361
|
+
const dialogStyle = reduceMotion ? {
|
|
362
|
+
opacity: animIn ? 1 : 0,
|
|
363
|
+
transition: `opacity 180ms ${EASE_OUT}`
|
|
364
|
+
} : {
|
|
365
|
+
opacity: animIn ? 1 : 0,
|
|
366
|
+
transform: animIn ? "scale(1) translateY(0)" : "scale(0.94) translateY(14px)",
|
|
367
|
+
transition: `opacity 240ms ${EASE_OUT}, transform 450ms ${DIALOG_EASE}`
|
|
368
|
+
};
|
|
325
369
|
return createPortal(
|
|
326
|
-
/* @__PURE__ */ jsx(
|
|
327
|
-
|
|
370
|
+
/* @__PURE__ */ jsx(Fragment, { children: mounted && /* @__PURE__ */ jsx(
|
|
371
|
+
"div",
|
|
328
372
|
{
|
|
329
373
|
className: "fixed inset-0 z-[10020] flex items-center justify-center bg-black/50 p-4 backdrop-blur-[3px]",
|
|
330
|
-
style: { fontFamily: MONO },
|
|
331
|
-
initial: { opacity: 0 },
|
|
332
|
-
animate: { opacity: 1 },
|
|
333
|
-
exit: { opacity: 0 },
|
|
334
|
-
transition: { duration: 0.22, ease: EASE_OUT },
|
|
374
|
+
style: { ...backdropStyle, fontFamily: MONO },
|
|
335
375
|
onClick: onClose,
|
|
376
|
+
onTransitionEnd: onBackdropTransitionEnd,
|
|
336
377
|
role: "presentation",
|
|
337
378
|
children: /* @__PURE__ */ jsxs(
|
|
338
|
-
|
|
379
|
+
"div",
|
|
339
380
|
{
|
|
340
381
|
role: "dialog",
|
|
341
382
|
"aria-modal": "true",
|
|
342
383
|
"aria-labelledby": "flux-copy-success-title",
|
|
343
384
|
className: "max-h-[min(90vh,640px)] w-full max-w-[520px] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-[0_24px_80px_rgba(0,0,0,0.2)]",
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
animate: reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 },
|
|
347
|
-
exit: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.97, y: 8 },
|
|
348
|
-
transition: reduceMotion ? { duration: 0.18, ease: EASE_OUT } : {
|
|
349
|
-
opacity: { duration: 0.24, ease: EASE_OUT },
|
|
350
|
-
scale: { type: "spring", stiffness: 420, damping: 32, mass: 0.85 },
|
|
351
|
-
y: { type: "spring", stiffness: 420, damping: 34, mass: 0.85 }
|
|
352
|
-
},
|
|
385
|
+
style: dialogStyle,
|
|
386
|
+
onClick: (ev) => ev.stopPropagation(),
|
|
353
387
|
children: [
|
|
354
388
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-zinc-200/90 bg-zinc-50/90 px-3 py-2", children: [
|
|
355
389
|
/* @__PURE__ */ jsx(TrafficLightsSvg, {}),
|
|
@@ -374,8 +408,7 @@ function CopySuccessOverlay({ open, onClose }) {
|
|
|
374
408
|
]
|
|
375
409
|
}
|
|
376
410
|
)
|
|
377
|
-
}
|
|
378
|
-
"flux-copy-success-overlay"
|
|
411
|
+
}
|
|
379
412
|
) }),
|
|
380
413
|
document.body
|
|
381
414
|
);
|
|
@@ -6200,7 +6233,7 @@ function installFluxFloatingMenuStyles() {
|
|
|
6200
6233
|
}
|
|
6201
6234
|
|
|
6202
6235
|
// src/editor-styles.ts
|
|
6203
|
-
var editorStyles = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-right-0{right:0}.-right-1{right:-.25rem}.-top-0{top:0}.-top-1{top:-.25rem}.bottom-2{bottom:.5rem}.left-0{left:0}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-8{right:2rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-\\[10003\\]{z-index:10003}.z-\\[10020\\]{z-index:10020}.z-\\[1\\]{z-index:1}.z-\\[9997\\]{z-index:9997}.z-\\[9998\\]{z-index:9998}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.-mt-px{margin-top:-1px}.mb-2{margin-bottom:.5rem}.ml-px{margin-left:1px}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.inline-grid{display:inline-grid}.hidden{display:none}.size-10{width:2.5rem;height:2.5rem}.size-11{width:2.75rem;height:2.75rem}.size-3{width:.75rem;height:.75rem}.size-3\\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-9{width:2.25rem;height:2.25rem}.size-\\[14px\\]{width:14px;height:14px}.size-\\[5px\\]{width:5px;height:5px}.h-3{height:.75rem}.h-4{height:1rem}.h-9{height:2.25rem}.h-full{height:100%}.max-h-48{max-height:12rem}.max-h-\\[min\\(90vh\\2c 640px\\)\\]{max-height:min(90vh,640px)}.min-h-0{min-height:0}.w-0{width:0}.w-0\\.5{width:.125rem}.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-\\[4\\.5rem\\]{width:4.5rem}.w-\\[5\\.5rem\\]{width:5.5rem}.w-\\[52px\\]{width:52px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\\[2rem\\]{min-width:2rem}.min-w-full{min-width:100%}.max-w-\\[520px\\]{max-width:520px}.max-w-\\[5rem\\]{max-width:5rem}.max-w-\\[min\\(18rem\\2c calc\\(100vw-20px\\)\\)\\]{max-width:min(18rem,calc(100vw - 20px))}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-y-1{--tw-translate-y:-0.25rem}.-translate-y-1,.scale-\\[0\\.92\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\\[0\\.92\\]{--tw-scale-x:0.92;--tw-scale-y:0.92}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-col-resize{cursor:col-resize}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-\\[13px\\]{gap:13px}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-small{border-radius:8px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-\\[\\#202020\\]{--tw-border-opacity:1;border-color:rgb(32 32 32/var(--tw-border-opacity,1))}.border-\\[\\#444\\]{--tw-border-opacity:1;border-color:rgb(68 68 68/var(--tw-border-opacity,1))}.border-\\[\\#555\\]{--tw-border-opacity:1;border-color:rgb(85 85 85/var(--tw-border-opacity,1))}.border-amber-800{--tw-border-opacity:1;border-color:rgb(146 64 14/var(--tw-border-opacity,1))}.border-amber-800\\/35{border-color:rgba(146,64,14,.35)}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-200\\/90{border-color:hsla(240,6%,90%,.9)}.bg-\\[\\#202020\\]{--tw-bg-opacity:1;background-color:rgb(32 32 32/var(--tw-bg-opacity,1))}.bg-\\[\\#2a2a2a\\]{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.bg-\\[\\#333333\\]{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-\\[\\#555\\]{--tw-bg-opacity:1;background-color:rgb(85 85 85/var(--tw-bg-opacity,1))}.bg-\\[\\#F3F3F3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/50{background-color:rgba(0,0,0,.5)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-50\\/90{background-color:hsla(0,0%,98%,.9)}.\\!fill-none{fill:none!important}.p-0{padding:0}.p-0\\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\\.5{padding:.375rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-0\\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-0{padding-left:0}.pl-0\\.5{padding-left:.125rem}.pr-0{padding-right:0}.pr-10{padding-right:2.5rem}.pr-11{padding-right:2.75rem}.pr-6{padding-right:1.5rem}.pr-7{padding-right:1.75rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-\\[\\'Inter\\'\\2c system-ui\\2c sans-serif\\]{font-family:Inter,system-ui,sans-serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[15px\\]{font-size:15px}.text-\\[7px\\]{font-size:7px}.text-base{font-size:1rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\\[14px\\]{line-height:14px}.leading-\\[15\\.6px\\]{line-height:15.6px}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.text-\\[\\#202020\\]{--tw-text-opacity:1;color:rgb(32 32 32/var(--tw-text-opacity,1))}.text-\\[\\#333333\\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-\\[\\#71717a\\]{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-\\[\\#7C7C7C\\]{--tw-text-opacity:1;color:rgb(124 124 124/var(--tw-text-opacity,1))}.text-\\[\\#93c47d\\]{--tw-text-opacity:1;color:rgb(147 196 125/var(--tw-text-opacity,1))}.text-\\[\\#D9D9D9\\]{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.text-\\[\\#b45309\\]{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-\\[\\#c2410c\\]{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-\\[\\#d9d9d9\\]{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_24px_80px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_24px_80px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\]{--tw-shadow:0 24px 80px rgba(0,0,0,.2);--tw-shadow-colored:0 24px 80px var(--tw-shadow-color)}.shadow-\\[0_2px_8px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\2c 0_4px_16px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.1\\)\\]{--tw-shadow:0 2px 8px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.1);--tw-shadow-colored:0 2px 8px var(--tw-shadow-color),0 4px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.\\!outline{outline-style:solid!important}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-\\[3px\\]{--tw-backdrop-blur:blur(3px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\\[color\\2c background-color\\2c transform\\]{transition-property:color,background-color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-opacity{transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[font-synthesis\\:none\\]{font-synthesis:none}*,:after,:before{box-sizing:border-box;margin:0}button,input,select,textarea{font:inherit;color:inherit;background:transparent;border:none;padding:0;margin:0;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}select{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.hover\\:bg-\\[\\#2a2a2a\\]:hover{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.hover\\:bg-\\[\\#333333\\]:hover{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.hover\\:text-\\[\\#D9D9D9\\]:hover{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[\\#D9D9D9\\]\\/40:focus-visible{outline-color:hsla(0,0%,85%,.4)}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\\:opacity-100{opacity:1}.group:hover .group-hover\\:opacity-100{opacity:1}@media (min-width:640px){.sm\\:max-w-\\[200px\\]{max-width:200px}.sm\\:flex-row{flex-direction:row}.sm\\:items-start{align-items:flex-start}.sm\\:justify-between{justify-content:space-between}.sm\\:gap-6{gap:1.5rem}.sm\\:px-4{padding-left:1rem;padding-right:1rem}.sm\\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\\:pt-4{padding-top:1rem}}.\\[\\&\\:\\:-webkit-details-marker\\]\\:hidden::-webkit-details-marker{display:none}.\\[\\&_svg\\]\\:-mt-px svg{margin-top:-1px}.\\[\\&_svg\\]\\:\\!fill-none svg{fill:none!important}";
|
|
6236
|
+
var editorStyles = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-right-0{right:0}.-right-1{right:-.25rem}.-top-0{top:0}.-top-1{top:-.25rem}.bottom-2{bottom:.5rem}.left-0{left:0}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-8{right:2rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-\\[10003\\]{z-index:10003}.z-\\[10020\\]{z-index:10020}.z-\\[1\\]{z-index:1}.z-\\[9997\\]{z-index:9997}.z-\\[9998\\]{z-index:9998}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.-mt-px{margin-top:-1px}.mb-2{margin-bottom:.5rem}.ml-px{margin-left:1px}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.inline-grid{display:inline-grid}.hidden{display:none}.size-10{width:2.5rem;height:2.5rem}.size-11{width:2.75rem;height:2.75rem}.size-3{width:.75rem;height:.75rem}.size-3\\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-9{width:2.25rem;height:2.25rem}.size-\\[14px\\]{width:14px;height:14px}.size-\\[5px\\]{width:5px;height:5px}.h-3{height:.75rem}.h-4{height:1rem}.h-9{height:2.25rem}.h-full{height:100%}.max-h-48{max-height:12rem}.max-h-\\[min\\(90vh\\2c 640px\\)\\]{max-height:min(90vh,640px)}.min-h-0{min-height:0}.w-0{width:0}.w-0\\.5{width:.125rem}.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-\\[4\\.5rem\\]{width:4.5rem}.w-\\[5\\.5rem\\]{width:5.5rem}.w-\\[52px\\]{width:52px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\\[2rem\\]{min-width:2rem}.min-w-full{min-width:100%}.max-w-\\[520px\\]{max-width:520px}.max-w-\\[5rem\\]{max-width:5rem}.max-w-\\[min\\(18rem\\2c calc\\(100vw-20px\\)\\)\\]{max-width:min(18rem,calc(100vw - 20px))}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-y-1{--tw-translate-y:-0.25rem}.-translate-y-1,.scale-\\[0\\.92\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\\[0\\.92\\]{--tw-scale-x:0.92;--tw-scale-y:0.92}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-col-resize{cursor:col-resize}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-\\[13px\\]{gap:13px}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-small{border-radius:8px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-\\[\\#202020\\]{--tw-border-opacity:1;border-color:rgb(32 32 32/var(--tw-border-opacity,1))}.border-\\[\\#444\\]{--tw-border-opacity:1;border-color:rgb(68 68 68/var(--tw-border-opacity,1))}.border-\\[\\#555\\]{--tw-border-opacity:1;border-color:rgb(85 85 85/var(--tw-border-opacity,1))}.border-amber-800{--tw-border-opacity:1;border-color:rgb(146 64 14/var(--tw-border-opacity,1))}.border-amber-800\\/35{border-color:rgba(146,64,14,.35)}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-200\\/90{border-color:hsla(240,6%,90%,.9)}.bg-\\[\\#202020\\]{--tw-bg-opacity:1;background-color:rgb(32 32 32/var(--tw-bg-opacity,1))}.bg-\\[\\#2a2a2a\\]{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.bg-\\[\\#333333\\]{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-\\[\\#555\\]{--tw-bg-opacity:1;background-color:rgb(85 85 85/var(--tw-bg-opacity,1))}.bg-\\[\\#F3F3F3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/50{background-color:rgba(0,0,0,.5)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-50\\/90{background-color:hsla(0,0%,98%,.9)}.\\!fill-none{fill:none!important}.p-0{padding:0}.p-0\\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\\.5{padding:.375rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-0\\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-0{padding-left:0}.pl-0\\.5{padding-left:.125rem}.pr-0{padding-right:0}.pr-10{padding-right:2.5rem}.pr-11{padding-right:2.75rem}.pr-6{padding-right:1.5rem}.pr-7{padding-right:1.75rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-\\[\\'Inter\\'\\2c system-ui\\2c sans-serif\\]{font-family:Inter,system-ui,sans-serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[15px\\]{font-size:15px}.text-\\[7px\\]{font-size:7px}.text-base{font-size:1rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\\[14px\\]{line-height:14px}.leading-\\[15\\.6px\\]{line-height:15.6px}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.text-\\[\\#202020\\]{--tw-text-opacity:1;color:rgb(32 32 32/var(--tw-text-opacity,1))}.text-\\[\\#333333\\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-\\[\\#71717a\\]{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-\\[\\#7C7C7C\\]{--tw-text-opacity:1;color:rgb(124 124 124/var(--tw-text-opacity,1))}.text-\\[\\#93c47d\\]{--tw-text-opacity:1;color:rgb(147 196 125/var(--tw-text-opacity,1))}.text-\\[\\#D9D9D9\\]{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.text-\\[\\#b45309\\]{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-\\[\\#c2410c\\]{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-\\[\\#d9d9d9\\]{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_24px_80px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_24px_80px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\]{--tw-shadow:0 24px 80px rgba(0,0,0,.2);--tw-shadow-colored:0 24px 80px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.\\!outline{outline-style:solid!important}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-\\[3px\\]{--tw-backdrop-blur:blur(3px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\\[transform\\]{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-opacity{transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[font-synthesis\\:none\\]{font-synthesis:none}*,:after,:before{box-sizing:border-box;margin:0}button,input,select,textarea{font:inherit;color:inherit;background:transparent;border:none;padding:0;margin:0;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}select{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.hover\\:bg-\\[\\#2a2a2a\\]:hover{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.hover\\:bg-\\[\\#333333\\]:hover{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.hover\\:text-\\[\\#D9D9D9\\]:hover{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[\\#D9D9D9\\]\\/40:focus-visible{outline-color:hsla(0,0%,85%,.4)}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\\:opacity-100{opacity:1}.group:hover .group-hover\\:opacity-100{opacity:1}@media (min-width:640px){.sm\\:max-w-\\[200px\\]{max-width:200px}.sm\\:flex-row{flex-direction:row}.sm\\:items-start{align-items:flex-start}.sm\\:justify-between{justify-content:space-between}.sm\\:gap-6{gap:1.5rem}.sm\\:px-4{padding-left:1rem;padding-right:1rem}.sm\\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\\:pt-4{padding-top:1rem}}.\\[\\&\\:\\:-webkit-details-marker\\]\\:hidden::-webkit-details-marker{display:none}.\\[\\&_svg\\]\\:-mt-px svg{margin-top:-1px}.\\[\\&_svg\\]\\:\\!fill-none svg{fill:none!important}";
|
|
6204
6237
|
|
|
6205
6238
|
// src/shadow-mount.ts
|
|
6206
6239
|
function mountShadowPanel() {
|
|
@@ -7459,6 +7492,7 @@ function DesignEditorImpl({
|
|
|
7459
7492
|
blockPageInteractions
|
|
7460
7493
|
}) {
|
|
7461
7494
|
const [enabled, setEnabled] = useState(false);
|
|
7495
|
+
const [isExiting, setIsExiting] = useState(false);
|
|
7462
7496
|
const [width, setWidth] = useState(DEFAULT_WIDTH);
|
|
7463
7497
|
const [layoutW, setLayoutW] = useState(0);
|
|
7464
7498
|
const resizeRef = useRef(null);
|
|
@@ -7484,6 +7518,23 @@ function DesignEditorImpl({
|
|
|
7484
7518
|
setMenuPortalTarget(null);
|
|
7485
7519
|
};
|
|
7486
7520
|
}, []);
|
|
7521
|
+
useEffect(() => {
|
|
7522
|
+
const id = "flux-floating-toggle-host-styles";
|
|
7523
|
+
if (document.getElementById(id)) return;
|
|
7524
|
+
const el = document.createElement("style");
|
|
7525
|
+
el.id = id;
|
|
7526
|
+
el.textContent = `
|
|
7527
|
+
button[data-flux-floating-toggle] {
|
|
7528
|
+
background-color: #202020 !important;
|
|
7529
|
+
color: #d9d9d9 !important;
|
|
7530
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1) !important;
|
|
7531
|
+
}
|
|
7532
|
+
button[data-flux-floating-toggle]:hover {
|
|
7533
|
+
background-color: #2a2a2a !important;
|
|
7534
|
+
}
|
|
7535
|
+
`;
|
|
7536
|
+
document.head.appendChild(el);
|
|
7537
|
+
}, []);
|
|
7487
7538
|
useLayoutEffect(() => {
|
|
7488
7539
|
const sync = () => setLayoutW(layoutViewportWidth());
|
|
7489
7540
|
sync();
|
|
@@ -7555,6 +7606,9 @@ function DesignEditorImpl({
|
|
|
7555
7606
|
flushSync(() => {
|
|
7556
7607
|
setExitClipVp(getEditorToggleViewportCenter());
|
|
7557
7608
|
});
|
|
7609
|
+
flushSync(() => {
|
|
7610
|
+
setIsExiting(true);
|
|
7611
|
+
});
|
|
7558
7612
|
flushSync(() => {
|
|
7559
7613
|
setEnabled(false);
|
|
7560
7614
|
});
|
|
@@ -7678,7 +7732,11 @@ function DesignEditorImpl({
|
|
|
7678
7732
|
}
|
|
7679
7733
|
return copyCombinedPromptToClipboard(items, structuralReorders);
|
|
7680
7734
|
}, [getCopyBatchItems, structuralReorders]);
|
|
7681
|
-
const reduceMotion =
|
|
7735
|
+
const reduceMotion = usePrefersReducedMotion();
|
|
7736
|
+
const panelRef = useRef(null);
|
|
7737
|
+
const panelVisible = enabled || isExiting;
|
|
7738
|
+
const irisOpenDoneRef = useRef(false);
|
|
7739
|
+
const exitAnimStartedRef = useRef(false);
|
|
7682
7740
|
const themeRevealDuration = useMemo(() => readThemeTransitionDurationSeconds(), []);
|
|
7683
7741
|
const effectiveWidth = useMemo(() => {
|
|
7684
7742
|
const lw = layoutW > 0 ? layoutW : layoutViewportWidth();
|
|
@@ -7689,10 +7747,80 @@ function DesignEditorImpl({
|
|
|
7689
7747
|
const openO = viewportToPanelClipOrigin(openClipVpRef.current.x, openClipVpRef.current.y, effectiveWidth);
|
|
7690
7748
|
const exitVpForClip = exitClipVp ?? defaultExitViewport();
|
|
7691
7749
|
const closeO = viewportToPanelClipOrigin(exitVpForClip.x, exitVpForClip.y, effectiveWidth);
|
|
7692
|
-
const
|
|
7693
|
-
const
|
|
7694
|
-
|
|
7750
|
+
const easeReveal = `cubic-bezier(${THEME_REVEAL_EASE.join(",")})`;
|
|
7751
|
+
const easeExit = `cubic-bezier(${IRIS_EXIT_EASE.join(",")})`;
|
|
7752
|
+
useEffect(() => {
|
|
7753
|
+
if (!enabled) irisOpenDoneRef.current = false;
|
|
7754
|
+
}, [enabled]);
|
|
7755
|
+
useEffect(() => {
|
|
7756
|
+
if (!isExiting) exitAnimStartedRef.current = false;
|
|
7757
|
+
}, [isExiting]);
|
|
7758
|
+
useLayoutEffect(() => {
|
|
7759
|
+
if (!panelVisible || !enabled || isExiting) return;
|
|
7760
|
+
if (irisOpenDoneRef.current) return;
|
|
7761
|
+
const el = panelRef.current;
|
|
7762
|
+
if (!el) return;
|
|
7763
|
+
irisOpenDoneRef.current = true;
|
|
7764
|
+
if (reduceMotion) {
|
|
7765
|
+
el.style.transition = "";
|
|
7766
|
+
el.style.clipPath = "none";
|
|
7767
|
+
return;
|
|
7768
|
+
}
|
|
7769
|
+
el.style.transition = "none";
|
|
7770
|
+
el.style.clipPath = `circle(0px at ${openO.ox}px ${openO.oy}px)`;
|
|
7771
|
+
const id = requestAnimationFrame(() => {
|
|
7772
|
+
requestAnimationFrame(() => {
|
|
7773
|
+
el.style.transition = `clip-path ${themeRevealDuration}s ${easeReveal}`;
|
|
7774
|
+
el.style.clipPath = `circle(150vmax at ${openO.ox}px ${openO.oy}px)`;
|
|
7775
|
+
});
|
|
7776
|
+
});
|
|
7777
|
+
return () => cancelAnimationFrame(id);
|
|
7778
|
+
}, [
|
|
7779
|
+
panelVisible,
|
|
7780
|
+
enabled,
|
|
7781
|
+
isExiting,
|
|
7782
|
+
reduceMotion,
|
|
7783
|
+
themeRevealDuration,
|
|
7784
|
+
easeReveal,
|
|
7785
|
+
openO.ox,
|
|
7786
|
+
openO.oy
|
|
7787
|
+
]);
|
|
7788
|
+
useLayoutEffect(() => {
|
|
7789
|
+
if (!isExiting || enabled) return;
|
|
7790
|
+
if (exitAnimStartedRef.current) return;
|
|
7791
|
+
const el = panelRef.current;
|
|
7792
|
+
if (!el) return;
|
|
7793
|
+
exitAnimStartedRef.current = true;
|
|
7794
|
+
if (reduceMotion) {
|
|
7795
|
+
el.style.transition = "";
|
|
7796
|
+
el.style.clipPath = `circle(0px at ${closeO.ox}px ${closeO.oy}px)`;
|
|
7797
|
+
queueMicrotask(() => {
|
|
7798
|
+
setIsExiting(false);
|
|
7799
|
+
setExitClipVp(null);
|
|
7800
|
+
});
|
|
7801
|
+
return;
|
|
7802
|
+
}
|
|
7803
|
+
el.style.transition = "none";
|
|
7804
|
+
el.style.clipPath = `circle(150vmax at ${openO.ox}px ${openO.oy}px)`;
|
|
7805
|
+
void el.offsetHeight;
|
|
7806
|
+
el.style.transition = `clip-path ${themeRevealDuration}s ${easeExit}`;
|
|
7807
|
+
el.style.clipPath = `circle(0px at ${closeO.ox}px ${closeO.oy}px)`;
|
|
7808
|
+
}, [isExiting, enabled, reduceMotion, themeRevealDuration, easeExit, openO.ox, openO.oy, closeO.ox, closeO.oy]);
|
|
7809
|
+
const onPanelTransitionEnd = useCallback(
|
|
7810
|
+
(e) => {
|
|
7811
|
+
if (e.propertyName !== "clip-path") return;
|
|
7812
|
+
if (!isExiting || enabled || reduceMotion) return;
|
|
7813
|
+
setIsExiting(false);
|
|
7814
|
+
setExitClipVp(null);
|
|
7815
|
+
},
|
|
7816
|
+
[isExiting, enabled, reduceMotion]
|
|
7817
|
+
);
|
|
7818
|
+
const panelContent = /* @__PURE__ */ jsx(Fragment, { children: panelVisible && /* @__PURE__ */ jsxs(
|
|
7819
|
+
"div",
|
|
7695
7820
|
{
|
|
7821
|
+
ref: panelRef,
|
|
7822
|
+
"data-flux-ui": true,
|
|
7823
|
+
onTransitionEnd: onPanelTransitionEnd,
|
|
7696
7824
|
style: {
|
|
7697
7825
|
position: "fixed",
|
|
7698
7826
|
top: 8,
|
|
@@ -7709,18 +7837,8 @@ function DesignEditorImpl({
|
|
|
7709
7837
|
color: "#D9D9D9",
|
|
7710
7838
|
colorScheme: "dark",
|
|
7711
7839
|
WebkitFontSmoothing: "antialiased",
|
|
7712
|
-
pointerEvents: "auto"
|
|
7713
|
-
|
|
7714
|
-
initial: reduceMotion === true ? { clipPath: "none" } : { clipPath: `circle(0px at ${openO.ox}px ${openO.oy}px)` },
|
|
7715
|
-
animate: reduceMotion === true ? { clipPath: "none" } : { clipPath: `circle(150vmax at ${irisAt.ox}px ${irisAt.oy}px)` },
|
|
7716
|
-
exit: reduceMotion === true ? { clipPath: "none", transition: { duration: 0 } } : {
|
|
7717
|
-
clipPath: `circle(0px at ${closeO.ox}px ${closeO.oy}px)`,
|
|
7718
|
-
transition: {
|
|
7719
|
-
clipPath: { duration: themeRevealDuration, ease: IRIS_EXIT_EASE }
|
|
7720
|
-
}
|
|
7721
|
-
},
|
|
7722
|
-
transition: reduceMotion === true ? { duration: 0 } : {
|
|
7723
|
-
clipPath: { duration: themeRevealDuration, ease: THEME_REVEAL_EASE }
|
|
7840
|
+
pointerEvents: "auto",
|
|
7841
|
+
willChange: reduceMotion ? void 0 : "clip-path"
|
|
7724
7842
|
},
|
|
7725
7843
|
children: [
|
|
7726
7844
|
/* @__PURE__ */ jsx(
|
|
@@ -7747,6 +7865,9 @@ function DesignEditorImpl({
|
|
|
7747
7865
|
flushSync(() => {
|
|
7748
7866
|
setExitClipVp(getEditorToggleViewportCenter());
|
|
7749
7867
|
});
|
|
7868
|
+
flushSync(() => {
|
|
7869
|
+
setIsExiting(true);
|
|
7870
|
+
});
|
|
7750
7871
|
flushSync(() => {
|
|
7751
7872
|
setEnabled(false);
|
|
7752
7873
|
});
|
|
@@ -7777,8 +7898,7 @@ function DesignEditorImpl({
|
|
|
7777
7898
|
selectedElement ? getElementPath(selectedElement) : "none"
|
|
7778
7899
|
) })
|
|
7779
7900
|
]
|
|
7780
|
-
}
|
|
7781
|
-
"flux-panel"
|
|
7901
|
+
}
|
|
7782
7902
|
) });
|
|
7783
7903
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7784
7904
|
!enabled && /* @__PURE__ */ jsx(
|
|
@@ -7787,6 +7907,7 @@ function DesignEditorImpl({
|
|
|
7787
7907
|
ref: editorToggleRef,
|
|
7788
7908
|
type: "button",
|
|
7789
7909
|
"data-flux-ui": true,
|
|
7910
|
+
"data-flux-floating-toggle": true,
|
|
7790
7911
|
onPointerDown: (e) => {
|
|
7791
7912
|
if (e.button !== 0) return;
|
|
7792
7913
|
e.preventDefault();
|
|
@@ -7798,7 +7919,7 @@ function DesignEditorImpl({
|
|
|
7798
7919
|
openFromToggle(e.currentTarget);
|
|
7799
7920
|
}
|
|
7800
7921
|
},
|
|
7801
|
-
className: "fixed bottom-2 right-2 z-[9998] flex size-11 shrink-0 items-center justify-center rounded-full border-0
|
|
7922
|
+
className: "fixed bottom-2 right-2 z-[9998] flex size-11 shrink-0 items-center justify-center rounded-full border-0 p-0 transition-[transform] active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#D9D9D9]/40 [&_svg]:-mt-px [&_svg]:!fill-none",
|
|
7802
7923
|
"aria-label": "Open design editor \u2014 \u2318. or Ctrl+.",
|
|
7803
7924
|
title: "Open design editor (\u2318. \xB7 Ctrl+.)",
|
|
7804
7925
|
children: /* @__PURE__ */ jsx(DesignEditorToggleIcon, { size: 20, className: "shrink-0" })
|