@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/Dot-CG395pS6.mjs

@@ -0,0 +1,104 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, motion } from "motion/react";
+
+import React, { useMemo } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
+
+const DEFAULT_VARIANTS = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+}, DEFAULT_TRANSITION = {
+    type: "tween",
+    ease: [ .36, 0, .64, 1 ],
+    duration: .25
+}, Dot = React.memo(rawProps => {
+    const props = resolveColorProps(rawProps), reduceMotion = usePrefersReducedMotion(), themeMotion = useTheme().current.motion, {size: size = 8, offSet: offSet = 2, topOffset: topOffset = offSet, rightOffset: rightOffset = offSet, border: border = 3, position: position = "corner", color: color, transition: transition, motionValues: motionValues, show: show = !1, state: state} = props, divAttributes = __rest(props, [ "size", "offSet", "topOffset", "rightOffset", "border", "position", "color", "transition", "motionValues", "show", "state" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", variants = useMemo(() => motionValues ? Object.assign(Object.assign({}, DEFAULT_VARIANTS), motionValues) : DEFAULT_VARIANTS, [ motionValues ]), trans = useMemo(() => {
+        var _a;
+        const curve = null === (_a = themeMotion["motion-water"].match(/cubic-bezier\(([^)]+)\)/)) || void 0 === _a ? void 0 : _a[1].split(",").map(Number), durationText = themeMotion["motion-water-duration"], duration = Number.parseFloat(durationText) / (durationText.endsWith("ms") ? 1e3 : 1);
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_TRANSITION), 4 === (null == curve ? void 0 : curve.length) && curve.every(Number.isFinite) ? {
+            ease: curve
+        } : {}), Number.isFinite(duration) && duration >= 0 ? {
+            duration: duration
+        } : {}), transition);
+    }, [ themeMotion, transition ]), bgColor = useMemo(() => {
+        if (color) return color;
+        if (state) switch (state) {
+          case "red":
+            return "var(--feedback-warning)";
+
+          case "yellow":
+            return "var(--feedback-attention)";
+
+          case "green":
+            return "var(--feedback-positive)";
+
+          case "blue":
+            return "var(--core-gp-logo-primary)";
+
+          case "grey":
+            return "var(--core-text-secondary)";
+        }
+        return "var(--core-gp-logo-primary)";
+    }, [ state, color ]), cssVars = useMemo(() => ({
+        "--dot-size": `${size}px`,
+        "--dot-display": "inline" === position ? "inline-flex" : "flex",
+        "--dot-position": "inline" === position ? "relative" : "absolute",
+        "--dot-top": "inline" === position ? "unset" : -topOffset + "px",
+        "--dot-right": "inline" === position ? "unset" : -rightOffset + "px",
+        "--dot-vertical-align": "inline" === position ? "middle" : "unset",
+        "--dot-border": `${border}px solid`,
+        "--dot-border-color": "var(--core-surface-primary)",
+        "--dot-bg": `${bgColor}`
+    }), [ size, position, topOffset, rightOffset, border, bgColor ]);
+    return reduceMotion ? show ? jsx("div", Object.assign({
+        id: divId,
+        className: `${css_dot}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": "Blue dot indicating active or new"
+    }, rest, {
+        children: jsx("div", {
+            className: "dot"
+        })
+    })) : null : jsx(AnimatePresence, {
+        initial: !1,
+        children: show && jsx(motion.div, Object.assign({
+            id: divId,
+            className: `${css_dot}${divClass}`,
+            style: Object.assign(Object.assign({}, divStyle), cssVars),
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            transition: trans,
+            variants: variants,
+            role: "status",
+            "aria-live": "polite",
+            "aria-label": "Blue dot indicating active or new"
+        }, rest, {
+            children: jsx("div", {
+                className: "dot"
+            })
+        }))
+    });
+});
+
+export { Dot as D };

package/dist/esm/chunks/DrggablePanel-0Ef6TYrd.mjs

@@ -0,0 +1,270 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useRef, useId, useState, useLayoutEffect, useEffect, useCallback, useMemo } from "react";
+
+import "../theme/colors.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { useObserveResize } from "../hooks/useObserveResize.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__C7P44", css_content = "DraggablePanel-module_content__SBL0T flexBox-module_columnStart__C7P44", css_handle = "DraggablePanel-module_handle__LPZw8", css_rail = "DraggablePanel-module_rail__P-7yb", css_highlight = "DraggablePanel-module_highlight__5d-cs";
+
+const defaults_initial = 250, defaults_min = 250, defaults_max = 500;
+
+function resolve(value, containerWidth, fallback) {
+    return !Number.isFinite(value) || value < 0 ? fallback : value <= 1 ? void 0 === containerWidth ? 0 : containerWidth * value : Math.max(50, value);
+}
+
+/** Relative widths wait for a real container measurement; fixed widths are SSR-safe. */ const defaultConstraints = {
+    initial: 250,
+    min: 250,
+    max: 500
+}, DraggablePanel = React.memo(function(rawProps) {
+    var _a, _b, _c;
+    const props = resolveColorProps(rawProps), {children: children, sizeConstraints: sizeConstraints = defaultConstraints, isClosed: isClosed = !0, resizeHandle: resizeHandle, resizeHandleLabel: resizeHandleLabel = "Resize panel", borderRight: borderRight = "1px solid var(--core-outline-secondary)", borderLeft: borderLeft = "1px solid var(--core-outline-secondary)", backgroundColor: backgroundColor = "transparent", drags: drags = "right", isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !1, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle = {
+        height: 24,
+        width: 9
+    }, transitionDurationOnInit: transitionDurationOnInit, containerRef: containerRef, onResize: onResize, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, onContextMenu: onContextMenu, id: id, className: className, style: style} = props, attributes = __rest(props, [ "children", "sizeConstraints", "isClosed", "resizeHandle", "resizeHandleLabel", "borderRight", "borderLeft", "backgroundColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "transitionDurationOnInit", "containerRef", "onResize", "onResizeStart", "onResizeEnd", "onContextMenu", "id", "className", "style" ]), div = useRef(null), handle = useRef(null), generatedId = useId(), panelId = null != id ? id : generatedId, containerSize = useObserveResize(containerRef), [windowWidth, setWindowWidth] = useState(), containerWidth = containerRef ? containerSize.width || void 0 : windowWidth, {initial: initial, min: min, max: max} = function(values, containerWidth) {
+        const min = resolve(values.min, containerWidth, defaults_min), max = Math.max(min, resolve(values.max, containerWidth, defaults_max));
+        return {
+            initial: Math.min(max, Math.max(min, resolve(values.initial, containerWidth, defaults_initial))),
+            min: min,
+            max: max
+        };
+    }(sizeConstraints, containerWidth), [lastWidth, setLastWidth] = useState(), [dragWidth, setDragWidth] = useState(), [highlight, setHighlight] = useState(!1), timer = useRef(void 0), gesture = useRef(void 0), latest = useRef({
+        onResize: onResize,
+        onResizeStart: onResizeStart,
+        onResizeEnd: onResizeEnd,
+        min: min,
+        max: max
+    });
+    useLayoutEffect(() => {
+        latest.current = {
+            onResize: onResize,
+            onResizeStart: onResizeStart,
+            onResizeEnd: onResizeEnd,
+            min: min,
+            max: max
+        };
+    });
+    const reducedMotion = usePrefersReducedMotion(), width = Math.min(max, Math.max(min, null !== (_a = null != dragWidth ? dragWidth : lastWidth) && void 0 !== _a ? _a : initial)), unresolvedInitial = void 0 === lastWidth && void 0 === containerWidth && sizeConstraints.initial >= 0 && sizeConstraints.initial <= 1, closed = isClosed || Boolean(drags) && (width <= 1 || unresolvedInitial), [settled, setSettled] = useState(!1);
+    useEffect(() => {
+        void 0 !== containerWidth && setSettled(!0);
+    }, [ containerWidth ]), useEffect(() => {
+        var _a;
+        if (containerRef) return;
+        const view = null === (_a = div.current) || void 0 === _a ? void 0 : _a.ownerDocument.defaultView;
+        if (!view) return;
+        const update = () => setWindowWidth(view.innerWidth);
+        return update(), view.addEventListener("resize", update), () => view.removeEventListener("resize", update);
+    }, [ containerRef ]);
+    const clearHighlightTimer = useCallback(() => {
+        void 0 !== timer.current && clearTimeout(timer.current), timer.current = void 0;
+    }, []), hideHighlight = () => {
+        clearHighlightTimer(), gesture.current || setHighlight(!1);
+    }, info = (nextWidth, height, deltaWidth = 0) => ({
+        div: div,
+        divWidth: nextWidth,
+        divHeight: height,
+        deltaWidth: deltaWidth
+    }), finish = useCallback(notify => {
+        var _a, _b, _c, _d, _e, _f;
+        const active = gesture.current;
+        if (!active) return;
+        if (gesture.current = void 0, active.release(), !notify) return void clearHighlightTimer();
+        const finalWidth = Math.min(latest.current.max, Math.max(latest.current.min, active.width));
+        setLastWidth(finalWidth), setDragWidth(void 0), clearHighlightTimer(), setHighlight(!1);
+        const update = {
+            div: div,
+            divWidth: finalWidth,
+            divHeight: null !== (_b = null === (_a = div.current) || void 0 === _a ? void 0 : _a.offsetHeight) && void 0 !== _b ? _b : active.height,
+            deltaWidth: 0
+        };
+        null === (_d = (_c = latest.current).onResize) || void 0 === _d || _d.call(_c, update), 
+        null === (_f = (_e = latest.current).onResizeEnd) || void 0 === _f || _f.call(_e, update);
+    }, [ clearHighlightTimer ]);
+    useLayoutEffect(() => {
+        gesture.current && finish(!0);
+    }, [ isClosed, drags, min, max, finish ]), useEffect(() => () => {
+        finish(!1), clearHighlightTimer();
+    }, [ finish, clearHighlightTimer ]);
+    const railWidth = isTouchDevice ? 44 : null !== (_b = null == resizeHandle ? void 0 : resizeHandle.width) && void 0 !== _b ? _b : 10, offset = isTouchDevice ? -22 : -railWidth / 2, variables = {
+        "--panel-bg": null != backgroundColor ? backgroundColor : "transparent"
+    };
+    return jsxs("div", Object.assign({}, attributes, {
+        id: panelId,
+        ref: div,
+        className: `${css_panel}${className ? ` ${className}` : ""}`,
+        onContextMenu: event => {
+            null == onContextMenu || onContextMenu(event), disableOnContext && event.preventDefault();
+        },
+        style: Object.assign(Object.assign(Object.assign({}, style), variables), {
+            overflow: "visible",
+            flexShrink: 0,
+            width: isClosed ? 0 : drags ? unresolvedInitial ? "0px" : width : "100%",
+            height: "100%",
+            maxWidth: drags ? max : "unset",
+            transition: (() => {
+                if (void 0 !== dragWidth || reducedMotion) return "none";
+                if (!settled && void 0 !== transitionDurationOnInit) {
+                    return `width ${"number" == typeof transitionDurationOnInit ? `${Math.max(0, transitionDurationOnInit)}ms` : transitionDurationOnInit} var(--motion-water)`;
+                }
+                return "width var(--motion-water-duration) var(--motion-water)";
+            })(),
+            borderRight: closed || "right" !== drags ? "none" : null != borderRight ? borderRight : void 0,
+            borderLeft: closed || "left" !== drags ? "none" : null != borderLeft ? borderLeft : void 0
+        }),
+        children: [ jsx("div", {
+            className: css_content,
+            inert: closed || void 0,
+            "aria-hidden": closed || void 0,
+            children: children
+        }), jsxs("div", {
+            ref: handle,
+            className: css_rail,
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": resizeHandleLabel.trim() || "Resize panel",
+            "aria-controls": panelId,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": width,
+            "aria-valuetext": `${Math.round(width)} pixels`,
+            tabIndex: closed || !drags ? -1 : 0,
+            onKeyDown: event => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                if (event.currentTarget.removeAttribute("data-pointer-focus"), !drags || closed || gesture.current || event.altKey || event.ctrlKey || event.metaKey) return;
+                const current = width;
+                let next;
+                if ("Home" === event.key) next = min; else if ("End" === event.key) next = max; else {
+                    if ("ArrowLeft" !== event.key && "ArrowRight" !== event.key) return;
+                    next = current + ("ArrowRight" === event.key ? 1 : -1) * (event.shiftKey ? 50 : 10) * ("right" === drags ? 1 : -1);
+                }
+                if (event.preventDefault(), next = Math.min(max, Math.max(min, next)), next === current) return;
+                const height = null !== (_b = null === (_a = div.current) || void 0 === _a ? void 0 : _a.offsetHeight) && void 0 !== _b ? _b : 0;
+                null === (_d = (_c = latest.current).onResize) || void 0 === _d || _d.call(_c, info(current, height)), 
+                null === (_f = (_e = latest.current).onResizeStart) || void 0 === _f || _f.call(_e, info(current, height)), 
+                setLastWidth(next), null === (_h = (_g = latest.current).onResize) || void 0 === _h || _h.call(_g, info(next, height, (next - current) * ("right" === drags ? 1 : -1))), 
+                null === (_k = (_j = latest.current).onResize) || void 0 === _k || _k.call(_j, info(next, height)), 
+                null === (_m = (_l = latest.current).onResizeEnd) || void 0 === _m || _m.call(_l, info(next, height));
+            },
+            onPointerDown: event => {
+                var _a, _b, _c, _d;
+                if (closed || !drags || 0 !== event.button || !event.isPrimary || gesture.current) return;
+                event.preventDefault();
+                const panel = div.current, rail = event.currentTarget, document = rail.ownerDocument, view = document.defaultView;
+                if (!panel || !view) return;
+                rail.setAttribute("data-pointer-focus", ""), rail.focus({
+                    preventScroll: !0
+                }), clearHighlightTimer();
+                const root = document.documentElement, previous = {
+                    userSelect: root.style.userSelect,
+                    webkitUserSelect: root.style.webkitUserSelect
+                }, startWidth = panel.offsetWidth, active = {
+                    pointerId: event.pointerId,
+                    startX: event.clientX,
+                    startWidth: startWidth,
+                    width: startWidth,
+                    height: panel.offsetHeight,
+                    release: () => {}
+                };
+                gesture.current = active;
+                const move = next => {
+                    var _a, _b;
+                    if (next.pointerId !== active.pointerId) return;
+                    next.preventDefault();
+                    const delta = next.clientX - active.startX, nextWidth = active.startWidth + ("right" === drags ? delta : -delta);
+                    nextWidth < min || nextWidth > max || (active.width = nextWidth, panel.style.width = `${nextWidth}px`, 
+                    rail.setAttribute("aria-valuenow", String(nextWidth)), rail.setAttribute("aria-valuetext", `${Math.round(nextWidth)} pixels`), 
+                    null === (_b = (_a = latest.current).onResize) || void 0 === _b || _b.call(_a, info(nextWidth, active.height, delta)));
+                }, end = next => {
+                    next.pointerId === active.pointerId && finish(!0);
+                }, cancel = () => finish(!0), handleEscape = next => {
+                    "Escape" === next.key && finish(!0);
+                };
+                active.release = () => {
+                    document.removeEventListener("pointermove", move), document.removeEventListener("pointerup", end), 
+                    document.removeEventListener("pointercancel", end), rail.removeEventListener("lostpointercapture", cancel), 
+                    view.removeEventListener("blur", cancel), view.removeEventListener("keydown", handleEscape), 
+                    rail.hasPointerCapture(active.pointerId) && rail.releasePointerCapture(active.pointerId), 
+                    root.style.userSelect = previous.userSelect, root.style.webkitUserSelect = previous.webkitUserSelect;
+                }, document.addEventListener("pointermove", move, {
+                    passive: !1
+                }), document.addEventListener("pointerup", end), document.addEventListener("pointercancel", end), 
+                rail.addEventListener("lostpointercapture", cancel), view.addEventListener("blur", cancel), 
+                view.addEventListener("keydown", handleEscape), root.style.userSelect = "none", 
+                root.style.webkitUserSelect = "none";
+                try {
+                    rail.setPointerCapture(active.pointerId);
+                } catch (_e) {}
+                setDragWidth(startWidth), setHighlight(!0);
+                const update = info(startWidth, active.height);
+                null === (_b = (_a = latest.current).onResize) || void 0 === _b || _b.call(_a, update), 
+                null === (_d = (_c = latest.current).onResizeStart) || void 0 === _d || _d.call(_c, update);
+            },
+            onPointerEnter: () => {
+                clearHighlightTimer(), timer.current = setTimeout(() => setHighlight(!0), isTouchDevice ? 0 : 350);
+            },
+            onPointerLeave: hideHighlight,
+            onFocus: () => {
+                clearHighlightTimer(), setHighlight(!0);
+            },
+            onBlur: event => {
+                event.currentTarget.removeAttribute("data-pointer-focus"), hideHighlight();
+            },
+            onPointerCancel: () => finish(!0),
+            style: {
+                display: closed || !drags ? "none" : "flex",
+                width: railWidth,
+                backgroundColor: null !== (_c = null == resizeHandle ? void 0 : resizeHandle.color) && void 0 !== _c ? _c : "transparent",
+                right: "right" === drags ? offset : void 0,
+                left: "left" === drags ? offset : void 0
+            },
+            children: [ dragHandle && !closed && jsx(DragHandle, Object.assign({}, dragHandleStyle)), jsx("span", {
+                className: css_highlight,
+                "data-active": highlight || void 0
+            }) ]
+        }) ]
+    }));
+}), DragHandle = React.memo(rawProps => {
+    const props = resolveColorProps(rawProps), {width: width = 6, height: height = 6, radius: radius = corners["corner-round"], stroke: stroke = 1, color: color = "var(--core-surface-primary-tint)", strokeColor: strokeColor = "var(--core-outline-secondary)"} = props, cssVars = useMemo(() => ({
+        "--drag-handle-width": `${width}px`,
+        "--drag-handle-height": `${height}px`,
+        "--drag-handle-radius": setStyle(radius),
+        "--drag-handle-border": `${stroke}px`,
+        "--drag-handle-border-color": `${strokeColor}`,
+        "--drag-handle-bg": `${color}`
+    }), [ width, height, radius, stroke, color, strokeColor ]);
+    return jsx("div", {
+        className: css_handle,
+        style: cssVars
+    });
+});
+
+export { DraggablePanel as D };