@fivepixels-js/react 0.2.8 → 0.2.9

package/dist/components/overlay/DevicePreviewQrCard.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { buildQrSvgPath, encodeQrModules } from "../../utils/qr/encodeQrSvg.js";
+import { resolveDevicePreviewQrUrl } from "../../utils/qr/devicePreviewShareUrl.js";
+const MANUAL_URL_STORAGE_KEY = "fivepixels:device-preview-qr-manual-url";
+function readStoredManualUrl() {
+    if (typeof window === "undefined") {
+        return "";
+    }
+    try {
+        return window.sessionStorage.getItem(MANUAL_URL_STORAGE_KEY) ?? "";
+    }
+    catch {
+        return "";
+    }
+}
+function persistManualUrl(value) {
+    if (typeof window === "undefined") {
+        return;
+    }
+    try {
+        if (value.trim()) {
+            window.sessionStorage.setItem(MANUAL_URL_STORAGE_KEY, value);
+        }
+        else {
+            window.sessionStorage.removeItem(MANUAL_URL_STORAGE_KEY);
+        }
+    }
+    catch {
+        // ignore quota / private mode
+    }
+}
+export function DevicePreviewQrCard({ left, 
+// top,
+maxWidth, title, hintLocalhost, urlInputLabel, urlInputPlaceholder, urlInputAriaLabel, invalidUrlMessage, emptyUrlMessage, copyLabel, copiedLabel, copyAriaLabel, qrAriaLabel, }) {
+    const pageHref = typeof window !== "undefined" ? window.location.href : "";
+    const [manualUrl, setManualUrl] = useState(readStoredManualUrl);
+    const [copied, setCopied] = useState(false);
+    const resolved = useMemo(() => resolveDevicePreviewQrUrl({
+        pageHref,
+        manualUrl,
+    }), [pageHref, manualUrl]);
+    useEffect(() => {
+        if (resolved.needsManualUrl) {
+            persistManualUrl(manualUrl);
+        }
+    }, [manualUrl, resolved.needsManualUrl]);
+    const qr = useMemo(() => {
+        if (!resolved.url) {
+            return null;
+        }
+        try {
+            const encoded = encodeQrModules(resolved.url);
+            const { path, dimension } = buildQrSvgPath(encoded);
+            return { path, dimension, url: resolved.url };
+        }
+        catch {
+            return null;
+        }
+    }, [resolved.url]);
+    const statusMessage = (() => {
+        if (!resolved.needsManualUrl) {
+            return null;
+        }
+        if (!manualUrl.trim()) {
+            return emptyUrlMessage;
+        }
+        if (!resolved.url || !qr) {
+            return invalidUrlMessage;
+        }
+        return null;
+    })();
+    const handleCopy = async () => {
+        if (!resolved.url) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(resolved.url);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    const width = Math.max(168, Math.min(220, maxWidth));
+    return (_jsxs("div", { "data-fivepixels-interactive": "", className: "pointer-events-auto fixed z-[1000001] top-[50%] flex flex-col gap-[4px]", style: {
+            left,
+            width,
+            maxWidth: Math.max(0, maxWidth),
+            transform: "translateY(-50%)",
+        }, role: "region", "aria-label": title, children: [_jsx("div", { className: "text-[14px] font-semibold tracking-[0.01em] text-[var(--adaptive-black900)] whitespace-break-spaces leading-[1.5]", children: title }), _jsx("div", { className: "overflow-hidden rounded-[16px] bg-white border border-[var(--adaptive-border-subtle)]", children: qr ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${qr.dimension} ${qr.dimension}`, className: "block aspect-square w-full", role: "img", "aria-label": qrAriaLabel, children: [_jsx("rect", { width: qr.dimension, height: qr.dimension, fill: "#ffffff" }), _jsx("path", { d: qr.path, fill: "#0f172a" })] })) : (_jsx("div", { className: "flex aspect-square w-full items-center justify-center border border-dashed border-[rgba(148,163,184,0.55)] bg-[rgba(248,250,252,0.92)] px-[10px] text-center text-[10px] font-medium leading-snug text-slate-500", "aria-hidden": true, children: "QR" })) }), resolved.needsManualUrl ? (_jsxs("div", { className: "flex flex-col gap-[4px]", children: [_jsx("label", { className: "flex flex-col gap-[3px]", children: _jsx("input", { type: "url", value: manualUrl, onChange: (event) => setManualUrl(event.target.value), placeholder: urlInputPlaceholder, "aria-label": urlInputAriaLabel, className: "h-[30px] w-full rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] text-[11px] text-[var(--adaptive-black900)] outline-none placeholder:text-[var(--adaptive-black500)] focus:border-[var(--adaptive-blue500)]" }) }), statusMessage ? _jsx("p", { className: "text-[9px] leading-snug text-[var(--adaptive-red500)]", children: statusMessage }) : null] })) : null, resolved.url ? (_jsx("div", { className: "flex flex-col gap-[6px]", children: _jsx("button", { type: "button", onClick: () => void handleCopy(), "aria-label": copyAriaLabel, className: "h-[28px] rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] text-[10px] font-semibold text-[var(--adaptive-black900)] hover:bg-[var(--adaptive-black100)]", children: copied ? copiedLabel : copyLabel }) })) : null, _jsx("p", { className: "text-[12px] text-[var(--adaptive-black500)] leading-[1.5] whitespace-break-spaces", children: hintLocalhost })] }));
+}
+//# sourceMappingURL=DevicePreviewQrCard.js.map

package/dist/components/overlay/DevicePreviewQrCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevicePreviewQrCard.js","sourceRoot":"","sources":["../../../src/components/overlay/DevicePreviewQrCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/DeviceStatusBar.d.ts

@@ -0,0 +1,13 @@
+import { type DevicePreviewPreset } from "../../constants/devicePreview.js";
+type StatusBarAppearance = "light" | "dark";
+type DeviceStatusBarProps = {
+    preset: DevicePreviewPreset;
+    width: number;
+    scale?: number;
+    appearance?: StatusBarAppearance;
+    showCutout?: boolean;
+};
+export declare function getDeviceStatusBarHeight(preset: DevicePreviewPreset, screenWidth: number, scale?: number): number;
+export declare function DeviceStatusBar({ preset, width, scale, appearance, showCutout, }: DeviceStatusBarProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=DeviceStatusBar.d.ts.map

package/dist/components/overlay/DeviceStatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceStatusBar.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/DeviceStatusBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAIH,KAAK,mBAAmB,EAE3B,MAAM,8BAA8B,CAAC;AAEtC,KAAK,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5C,KAAK,oBAAoB,GAAG;IACxB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA2iBF,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,SAAI,UAEnG;AAED,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,KAAS,EACT,UAAoB,EACpB,UAAiB,GACpB,EAAE,oBAAoB,sCAmCtB"}

package/dist/components/overlay/DeviceStatusBar.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEVICE_CHROME_COLOR, getDeviceSafeAreaTop, scaleStatusBarMetrics, } from "../../constants/devicePreview.js";
+const IOS_TIME = "9:41";
+const ANDROID_TIME = "9:41";
+const BATTERY_PERCENT = 80;
+function themeColors(appearance) {
+    switch (appearance) {
+        case "dark":
+            return { foreground: "#ffffff" };
+        case "light":
+        default:
+            return { foreground: "#000000" };
+    }
+}
+function CellularIcon({ color, height }) {
+    const barW = Math.max(2.2, height * 0.22);
+    const gap = Math.max(1.4, height * 0.12);
+    const ratios = [0.28, 0.48, 0.7, 1];
+    const w = barW * 4 + gap * 3;
+    return (_jsx("svg", { width: w, height: height, viewBox: `0 0 ${w} ${height}`, style: { overflow: "visible", display: "block" }, "aria-hidden": true, children: ratios.map((ratio, index) => {
+            const h = height * ratio;
+            return (_jsx("rect", { x: index * (barW + gap), y: height - h, width: barW, height: h, rx: barW / 2, fill: color }, index));
+        }) }));
+}
+function WifiIcon({ color, size }) {
+    const h = size * 0.78;
+    return (_jsxs("svg", { width: size, height: h, viewBox: "-1.2 -1.2 18.4 14", style: { overflow: "visible", display: "block" }, "aria-hidden": true, children: [_jsx("circle", { cx: "8", cy: "10.35", r: "1.25", fill: color }), _jsx("path", { d: "M5.1 7.35c1.6-1.55 4.2-1.55 5.8 0", fill: "none", stroke: color, strokeWidth: "1.7", strokeLinecap: "round" }), _jsx("path", { d: "M2.75 4.95c2.9-2.85 7.6-2.85 10.5 0", fill: "none", stroke: color, strokeWidth: "1.7", strokeLinecap: "round" }), _jsx("path", { d: "M0.7 2.55c4-3.8 10.6-3.8 14.6 0", fill: "none", stroke: color, strokeWidth: "1.7", strokeLinecap: "round" })] }));
+}
+function BatteryIcon({ color, width, height }) {
+    const stroke = 1.5;
+    const tipW = 2.2;
+    const tipGap = 1.1;
+    const bodyW = width - tipW - tipGap;
+    const ox = stroke / 2 + 0.25;
+    const oy = stroke / 2 + 0.25;
+    const ow = bodyW - ox * 2;
+    const oh = height - oy * 2;
+    const fillInset = Math.max(ox + 1.1, height * 0.22);
+    return (_jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, style: { overflow: "visible", display: "block" }, "aria-hidden": true, children: [_jsx("rect", { x: ox, y: oy, width: ow, height: oh, rx: oh * 0.28, fill: "none", stroke: color, strokeWidth: stroke, opacity: "0.4" }), _jsx("rect", { x: fillInset, y: fillInset, width: bodyW - fillInset * 2, height: height - fillInset * 2, rx: (height - fillInset * 2) * 0.2, fill: color }), _jsx("rect", { x: bodyW + tipGap * 0.15, y: height * 0.3, width: tipW, height: height * 0.4, rx: tipW / 2, fill: color, opacity: "0.4" })] }));
+}
+function BatteryWithPercent({ color, width, height }) {
+    const stroke = 1.5;
+    const tipW = 2.4;
+    const tipGap = 1.1;
+    const bodyW = width - tipW - tipGap;
+    const ox = stroke / 2 + 0.35;
+    const oy = stroke / 2 + 0.35;
+    const ow = bodyW - ox * 2;
+    const oh = height - oy * 2;
+    const fillInset = ox + 1.15;
+    const fillW = Math.max(2, (bodyW - fillInset * 2) * (BATTERY_PERCENT / 100));
+    const fontSize = Math.max(9, height * 0.62);
+    return (_jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, style: { overflow: "visible", display: "block" }, "aria-hidden": true, children: [_jsx("rect", { x: ox, y: oy, width: ow, height: oh, rx: oh * 0.3, fill: "none", stroke: color, strokeWidth: stroke, opacity: "0.4" }), _jsx("rect", { x: fillInset, y: fillInset, width: fillW, height: height - fillInset * 2, rx: (height - fillInset * 2) * 0.22, fill: "#34C759" }), _jsx("text", { x: bodyW / 2, y: height / 2 + 0.35, textAnchor: "middle", dominantBaseline: "middle", fill: "#ffffff", fontSize: fontSize, fontWeight: "700", fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif', children: BATTERY_PERCENT }), _jsx("rect", { x: bodyW + tipGap * 0.15, y: height * 0.3, width: tipW, height: height * 0.4, rx: tipW / 2, fill: color, opacity: "0.4" })] }));
+}
+function TrailingIcons({ color, cellularH, wifiSize, batteryW, batteryH, gap, withPercent, }) {
+    return (_jsxs("div", { className: "flex items-center", style: { gap, color, overflow: "visible", lineHeight: 0 }, children: [_jsx(CellularIcon, { color: color, height: cellularH }), _jsx(WifiIcon, { color: color, size: wifiSize }), withPercent ? (_jsx(BatteryWithPercent, { color: color, width: batteryW, height: batteryH })) : (_jsx(BatteryIcon, { color: color, width: batteryW, height: batteryH }))] }));
+}
+function TimeLabel({ color, fontSize, children }) {
+    return (_jsx("span", { style: {
+            color,
+            WebkitTextFillColor: color,
+            fontSize,
+            fontVariantNumeric: "tabular-nums",
+            lineHeight: 1,
+        }, children: children }));
+}
+function CutoutVisual({ cutout }) {
+    switch (cutout.kind) {
+        case "notch":
+            return (_jsx("div", { className: "relative shrink-0", style: {
+                    width: cutout.width,
+                    height: cutout.height,
+                    background: DEVICE_CHROME_COLOR,
+                    borderBottomLeftRadius: cutout.height * 0.45,
+                    borderBottomRightRadius: cutout.height * 0.45,
+                }, children: _jsx("div", { className: "absolute left-1/2 top-[42%] -translate-x-1/2 -translate-y-1/2 rounded-full", style: {
+                        width: 6.4,
+                        height: 6.4,
+                        background: DEVICE_CHROME_COLOR,
+                    } }) }));
+        case "island":
+            return (_jsx("div", { className: "relative shrink-0", style: {
+                    width: cutout.width,
+                    height: cutout.height,
+                    borderRadius: 999,
+                    background: DEVICE_CHROME_COLOR,
+                }, children: _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 rounded-full", style: {
+                        right: 12,
+                        width: 8,
+                        height: 8,
+                        background: DEVICE_CHROME_COLOR,
+                    } }) }));
+        case "punch":
+            return (_jsx("div", { className: "relative shrink-0 rounded-full", style: {
+                    width: cutout.radius * 2,
+                    height: cutout.radius * 2,
+                    background: DEVICE_CHROME_COLOR,
+                }, children: _jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", style: {
+                        width: cutout.radius * 0.7,
+                        height: cutout.radius * 0.7,
+                        background: DEVICE_CHROME_COLOR,
+                    } }) }));
+        case "none":
+        default:
+            return null;
+    }
+}
+function CenterColumn({ cutout }) {
+    if (cutout.kind === "none") {
+        return (_jsx("div", { className: "flex h-full shrink-0 items-center justify-center", style: { width: cutout.width } }));
+    }
+    return (_jsx("div", { className: "flex h-full shrink-0 items-center justify-center", style: { width: cutout.width }, "data-fivepixels-device-cutout": cutout.kind, children: _jsx(CutoutVisual, { cutout: cutout }) }));
+}
+function StatusThreeColumn({ color, fontFamily, fontSize, fontWeight, padLeft, padRight, cutout, left, right, center, }) {
+    return (_jsxs("div", { className: "flex h-full w-full items-center", style: {
+            color,
+            WebkitTextFillColor: color,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            letterSpacing: "-0.02em",
+        }, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center justify-center", style: { paddingLeft: padLeft || undefined, overflow: "visible" }, children: left }), center ?? _jsx(CenterColumn, { cutout: cutout }), _jsx("div", { className: "flex min-w-0 flex-1 items-center justify-center", style: { paddingRight: padRight || undefined, overflow: "visible" }, children: right })] }));
+}
+function renderClassic(color, metrics) {
+    const iosFont = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif';
+    return (_jsx(StatusThreeColumn, { color: color, fontFamily: iosFont, fontSize: metrics.timeSize, fontWeight: 600, padLeft: metrics.padLeft, padRight: metrics.padRight, cutout: metrics.cutout, left: _jsxs("div", { className: "flex items-center", style: { gap: 4 }, children: [_jsx(TimeLabel, { color: color, fontSize: metrics.timeSize, children: "SKT" }), _jsx(CellularIcon, { color: color, height: metrics.cellularH })] }), center: _jsx("div", { className: "flex shrink-0 items-center justify-center", children: _jsx(TimeLabel, { color: color, fontSize: metrics.timeSize, children: IOS_TIME }) }), right: _jsx(TrailingIcons, { color: color, cellularH: metrics.cellularH, wifiSize: metrics.wifi, batteryW: metrics.batteryW, batteryH: metrics.batteryH, gap: metrics.iconGap, withPercent: metrics.batteryPercent }) }));
+}
+function renderFaceId(color, metrics) {
+    const iosFont = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif';
+    return (_jsx(StatusThreeColumn, { color: color, fontFamily: iosFont, fontSize: metrics.timeSize, fontWeight: 600, padLeft: metrics.padLeft, padRight: metrics.padRight, cutout: metrics.cutout, left: _jsx(TimeLabel, { color: color, fontSize: metrics.timeSize, children: IOS_TIME }), right: _jsx(TrailingIcons, { color: color, cellularH: metrics.cellularH, wifiSize: metrics.wifi, batteryW: metrics.batteryW, batteryH: metrics.batteryH, gap: metrics.iconGap, withPercent: metrics.batteryPercent }) }));
+}
+function renderAndroid(color, metrics) {
+    const androidFont = 'Roboto, "Noto Sans", system-ui, sans-serif';
+    return (_jsx(StatusThreeColumn, { color: color, fontFamily: androidFont, fontSize: metrics.timeSize, fontWeight: 500, padLeft: metrics.padLeft, padRight: metrics.padRight, cutout: metrics.cutout, left: _jsx(TimeLabel, { color: color, fontSize: metrics.timeSize, children: ANDROID_TIME }), right: _jsx(TrailingIcons, { color: color, cellularH: metrics.cellularH, wifiSize: metrics.wifi, batteryW: metrics.batteryW, batteryH: metrics.batteryH, gap: metrics.iconGap, withPercent: metrics.batteryPercent }) }));
+}
+function renderTablet(color, metrics) {
+    const iosFont = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif';
+    return (_jsx(StatusThreeColumn, { color: color, fontFamily: iosFont, fontSize: metrics.timeSize, fontWeight: 600, padLeft: metrics.padLeft, padRight: metrics.padRight, cutout: metrics.cutout, left: _jsx(TimeLabel, { color: color, fontSize: metrics.timeSize, children: IOS_TIME }), right: _jsx(TrailingIcons, { color: color, cellularH: metrics.cellularH, wifiSize: metrics.wifi, batteryW: metrics.batteryW, batteryH: metrics.batteryH, gap: metrics.iconGap, withPercent: metrics.batteryPercent }) }));
+}
+export function getDeviceStatusBarHeight(preset, screenWidth, scale = 1) {
+    return Math.max(0, Math.round(getDeviceSafeAreaTop(preset, screenWidth) * scale));
+}
+export function DeviceStatusBar({ preset, width, scale = 1, appearance = "light", showCutout = true, }) {
+    const metrics = scaleStatusBarMetrics(preset, width);
+    const height = Math.max(0, Math.round(metrics.safeAreaTop * scale));
+    const { foreground } = themeColors(appearance);
+    const cutout = showCutout ? metrics.cutout : { kind: "none", width: metrics.cutout.width, height: 0, top: 0 };
+    let content = null;
+    switch (metrics.layout) {
+        case "classic":
+            content = renderClassic(foreground, { ...metrics, cutout });
+            break;
+        case "faceId":
+            content = renderFaceId(foreground, { ...metrics, cutout });
+            break;
+        case "android":
+            content = renderAndroid(foreground, { ...metrics, cutout });
+            break;
+        case "tablet":
+            content = renderTablet(foreground, { ...metrics, cutout });
+            break;
+        case "none":
+        default:
+            return null;
+    }
+    return (_jsx("div", { className: "pointer-events-none absolute left-0 right-0 top-0 overflow-hidden bg-[var(--adaptive-neutralTintOpacity700)] backdrop-blur-[10px]", style: { height, color: foreground, WebkitTextFillColor: foreground }, "data-fivepixels-device-status-bar": metrics.layout, "aria-hidden": true, children: content }));
+}
+//# sourceMappingURL=DeviceStatusBar.js.map

package/dist/components/overlay/DeviceStatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceStatusBar.js","sourceRoot":"","sources":["../../../src/components/overlay/DeviceStatusBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/FloatingPinRail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPinRail.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/FloatingPinRail.tsx"],"names":[],"mappings":"AAiLA,wBAAgB,eAAe,uCAuK9B"}
+{"version":3,"file":"FloatingPinRail.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/FloatingPinRail.tsx"],"names":[],"mappings":"AA+KA,wBAAgB,eAAe,uCA0L9B"}

package/dist/components/overlay/FloatingPinRail.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { CloseIcon, ChevronDownIcon } from "../../components/icons/Icons.js";
+import { FloatingWindow } from "../../components/ui/FloatingWindow.js";
+import { PIN_RAIL_EXPANDED_WIDTH } from "../../constants/overlayChrome.js";
 import { MOTION } from "../../constants/motionClasses.js";
 import { useReportData, useReportPreferences, useReportSession } from "../../providers/reportContext.js";
 import { formatFeedbackCaseId } from "../../utils/feedback/feedbackCaseId.js";
@@ -22,20 +24,33 @@ function PinRailCard({ item, index, onOpen, onRemove }) {
         window.setTimeout(() => setPulsing(false), 180);
         onOpen(item);
     };
-    return (_jsxs("div", { className: `${MOTION.pinCardEnter} group relative flex border-b border-[var(--adaptive-border-subtle)] last:border-b-0 bg-[var(--adaptive-tintOpacity50)] ${pulsing ? MOTION.pinCardPulse : ""}`, style: { animationDelay: `${index * 35}ms` }, children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: handleOpen, "aria-label": messages.pins.openPinAriaLabel, className: "flex min-w-0 flex-1 text-left hover:bg-[var(--adaptive-black300)]", children: [_jsx("span", { className: "flex min-w-[72px] shrink-0 items-center justify-center border-r border-r-[var(--adaptive-border-subtle)] px-[8px] py-[8px] text-[12px] font-semibold text-[var(--adaptive-black900)]", children: item.fcNumber ? formatFeedbackCaseId(item.fcNumber) : "#FC-—" }), _jsx("span", { className: "min-w-0 flex-1 truncate px-[12px] py-[8px] pr-[28px] text-[11px] leading-[1.35] text-[var(--adaptive-black500)]", children: item.summary })] }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => onRemove(item.reportId), "aria-label": messages.pins.removePinAriaLabel, className: "absolute right-[6px] top-1/2 z-[1] flex h-[20px] w-[20px] -translate-y-1/2 items-center justify-center rounded-[4px] text-[var(--adaptive-black400)] opacity-0 transition-opacity hover:bg-[var(--adaptive-tintOpacity200)] hover:text-[var(--adaptive-black900)] group-hover:opacity-100", children: _jsx(CloseIcon, { className: "h-[12px] w-[12px]" }) })] }));
+    return (_jsxs("div", { className: `${MOTION.pinCardEnter} group relative flex overflow-hidden rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] ${pulsing ? MOTION.pinCardPulse : ""}`, style: { animationDelay: `${index * 35}ms` }, children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: handleOpen, "aria-label": messages.pins.openPinAriaLabel, className: "flex min-w-0 flex-1 text-left transition-colors hover:bg-[var(--adaptive-black100)]", children: [_jsx("span", { className: "flex min-w-[72px] shrink-0 items-center justify-center border-r border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black100)] px-[8px] py-[8px] text-[12px] font-semibold text-[var(--adaptive-black900)]", children: item.fcNumber ? formatFeedbackCaseId(item.fcNumber) : "#FC-—" }), _jsx("span", { className: "min-w-0 flex-1 truncate px-[12px] py-[8px] pr-[28px] text-[11px] leading-[1.35] text-[var(--adaptive-black500)]", children: item.summary })] }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => onRemove(item.reportId), "aria-label": messages.pins.removePinAriaLabel, className: "absolute right-[6px] top-1/2 z-[1] flex h-[20px] w-[20px] -translate-y-1/2 items-center justify-center rounded-[4px] text-[var(--adaptive-black400)] opacity-0 transition-opacity hover:bg-[var(--adaptive-tintOpacity200)] hover:text-[var(--adaptive-black900)] group-hover:opacity-100", children: _jsx(CloseIcon, { className: "h-[12px] w-[12px]" }) })] }));
 }
-function PinnedRouteAccordion({ group, collapsed, isFirst, onToggle, onOpen, onRemove, }) {
+function PinnedRouteAccordion({ group, collapsed, onToggle, onOpen, onRemove, }) {
     const { messages } = useReportPreferences();
     const expanded = !collapsed;
-    return (_jsxs("section", { className: "overflow-hidden", children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: onToggle, "aria-expanded": expanded, "aria-label": messages.pins.routeToggleAriaLabel(group.pathname), className: `sticky top-0 z-10 flex w-full items-center justify-between gap-[8px] bg-[var(--adaptive-black300)] p-[4px_12px] text-left ${isFirst ? "border-b border-b-[var(--adaptive-border-subtle)]" : "border-y border-y-[var(--adaptive-border-subtle)]"}`, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-[7px]", children: [_jsx(CircularProgress, { progress: group.progress, size: 22 }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate text-[11px] font-semibold text-[var(--adaptive-black900)]", children: group.pathname }), _jsx("span", { className: "block text-[10px] tabular-nums text-[var(--adaptive-black500)]", children: messages.pins.completedCasesLabel(group.progress.resolved, group.progress.total) })] })] }), _jsx(ChevronDownIcon, { className: `h-[13px] w-[13px] shrink-0 text-[var(--adaptive-black500)] transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] ${expanded ? "rotate-180" : ""}` })] }), _jsx("div", { className: MOTION.pinRailBody, "data-expanded": expanded ? "true" : "false", children: _jsx("div", { className: MOTION.pinRailBodyInner, children: _jsx("div", { className: "flex flex-col", children: group.items.map((item, index) => (_jsx(PinRailCard, { item: item, index: index, onOpen: onOpen, onRemove: onRemove }, item.reportId))) }) }) })] }));
+    return (_jsxs("section", { className: "flex flex-col gap-[6px]", children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: onToggle, "aria-expanded": expanded, "aria-label": messages.pins.routeToggleAriaLabel(group.pathname), className: "flex w-full items-center justify-between gap-[8px] rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black100)] px-[10px] py-[8px] text-left transition-colors hover:bg-[var(--adaptive-black200)]", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-[7px]", children: [_jsx(CircularProgress, { progress: group.progress, size: 22 }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate text-[11px] font-semibold text-[var(--adaptive-black900)]", children: group.pathname }), _jsx("span", { className: "block text-[10px] tabular-nums text-[var(--adaptive-black500)]", children: messages.pins.completedCasesLabel(group.progress.resolved, group.progress.total) })] })] }), _jsx(ChevronDownIcon, { className: `h-[13px] w-[13px] shrink-0 text-[var(--adaptive-black500)] transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] ${expanded ? "rotate-180" : ""}` })] }), _jsx("div", { className: MOTION.pinRailBody, "data-expanded": expanded ? "true" : "false", children: _jsx("div", { className: MOTION.pinRailBodyInner, children: _jsx("div", { className: "flex flex-col gap-[6px]", children: group.items.map((item, index) => (_jsx(PinRailCard, { item: item, index: index, onOpen: onOpen, onRemove: onRemove }, item.reportId))) }) }) })] }));
 }
 export function FloatingPinRail() {
-    const { messages, pinnedFeedbackItems, pinRailCollapsed, setPinRailCollapsed, unpinFeedback, syncPinnedFeedbackReports } = useReportPreferences();
+    const { messages, pinnedFeedbackItems, pinRailCollapsed, pinRailPlacement, setPinRailCollapsed, setPinRailPlacement, unpinFeedback, syncPinnedFeedbackReports, isMobileViewport, } = useReportPreferences();
     const { openPinnedFeedback } = useReportSession();
     const { reports, allPageReports } = useReportData();
     const [entered, setEntered] = useState(false);
     const [collapsedRoutes, setCollapsedRoutes] = useState(() => new Set());
     const hasPins = pinnedFeedbackItems.length > 0;
+    const [mode, setMode] = useState(() => (pinRailCollapsed ? "minimized" : "normal"));
+    useEffect(() => {
+        setMode((current) => {
+            if (pinRailCollapsed) {
+                return "minimized";
+            }
+            return current === "minimized" ? "normal" : current;
+        });
+    }, [pinRailCollapsed]);
+    const handleModeChange = useCallback((next) => {
+        setMode(next);
+        setPinRailCollapsed(next === "minimized");
+    }, [setPinRailCollapsed]);
     const enrichedItems = useMemo(() => {
         const reportById = new Map([...allPageReports, ...reports].map((report) => [report.id, report]));
         return [...pinnedFeedbackItems].reverse().map((item) => {
@@ -83,30 +98,35 @@ export function FloatingPinRail() {
         const frame = window.requestAnimationFrame(() => setEntered(true));
         return () => window.cancelAnimationFrame(frame);
     }, [hasPins]);
-    if (!hasPins) {
-        return null;
-    }
-    const expanded = !pinRailCollapsed;
     const handleOpen = (item) => {
         void openPinnedFeedback(item.reportId, {
             caseId: item.caseId,
             pathname: item.pathname,
         });
     };
-    if (!expanded) {
-        return (_jsx("div", { className: `pointer-events-auto fixed right-[16px] top-[20%] z-[1000002] ${entered ? MOTION.pinRailEnter : ""}`, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => setPinRailCollapsed(false), "aria-expanded": false, "aria-label": messages.pins.railExpandAriaLabel, className: "flex h-[52px] w-[52px] items-center justify-center rounded-full border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-neutralTintOpacity900)] shadow-[0_0_120px_0_var(--adaptive-black500)] backdrop-blur-[10px] transition-transform duration-200 ease-[cubic-bezier(0.34,1.28,0.64,1)] hover:scale-[1.04]", children: _jsx(CircularProgress, { progress: overallProgress, size: 44, showPercentLabel: true }) }) }));
+    const handlePositionChange = useCallback((next) => {
+        setPinRailPlacement(next);
+    }, [setPinRailPlacement]);
+    if (!hasPins || isMobileViewport) {
+        return null;
     }
-    return (_jsx("div", { className: `pointer-events-auto fixed right-[16px] top-[20%] z-[1000002] flex w-[280px] flex-col backdrop-blur-[10px] rounded-[16px] bg-[var(--adaptive-neutralTintOpacity900)] border border-[var(--adaptive-border-subtle)] shadow-[0_0_120px_0_var(--adaptive-black500)] ${entered ? MOTION.pinRailEnter : ""}`, children: _jsxs("div", { className: `${MOTION.pinRailShell} overflow-hidden`, "data-expanded": "true", children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => setPinRailCollapsed(true), "aria-expanded": true, "aria-label": messages.pins.railCollapseAriaLabel, className: "flex w-full items-center justify-between gap-[8px] border-b border-b-[var(--adaptive-border-subtle)] px-[12px] py-[8px] text-left", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-[7px]", children: [_jsx("span", { className: "truncate text-[12px] font-bold text-[var(--adaptive-black900)]", children: messages.pins.railTitle }), _jsx("span", { className: "rounded-[4px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black100)] px-[5px] py-[1px] text-[10px] font-semibold tabular-nums text-[var(--adaptive-black600)]", children: messages.pins.railCountLabel(pinnedFeedbackItems.length) }), _jsx(CircularProgress, { progress: overallProgress, size: 20, showPercentLabel: true })] }), _jsx(ChevronDownIcon, { className: "h-[14px] w-[14px] shrink-0 rotate-180 text-[var(--adaptive-black500)] transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]" })] }), _jsx("div", { className: MOTION.pinRailBody, "data-expanded": "true", children: _jsx("div", { className: MOTION.pinRailBodyInner, children: _jsx("div", { className: "max-h-[min(60vh,520px)] overflow-y-auto", children: routeGroups.map((group, index) => (_jsx(PinnedRouteAccordion, { group: group, isFirst: index === 0, collapsed: collapsedRoutes.has(group.pathname), onToggle: () => {
-                                    setCollapsedRoutes((current) => {
-                                        const next = new Set(current);
-                                        if (next.has(group.pathname)) {
-                                            next.delete(group.pathname);
-                                        }
-                                        else {
-                                            next.add(group.pathname);
-                                        }
-                                        return next;
-                                    });
-                                }, onOpen: handleOpen, onRemove: unpinFeedback }, group.pathname))) }) }) })] }) }));
+    return (_jsx(FloatingWindow, { dataChrome: "pin", className: entered ? MOTION.pinRailEnter : "", width: PIN_RAIL_EXPANDED_WIDTH, minWidth: 240, minHeight: 160, position: pinRailPlacement, onPositionChange: handlePositionChange, mode: mode, onModeChange: handleModeChange, resizable: true, resizeAriaLabel: messages.marker.resizeAriaLabel, contentClassName: "px-[12px] pb-[12px]", ariaLabel: messages.pins.railTitle, controls: {
+            onClose: () => handleModeChange("minimized"),
+            closeAriaLabel: messages.pins.railCollapseAriaLabel,
+            minimizeAriaLabel: messages.pins.railCollapseAriaLabel,
+            maximizeAriaLabel: messages.marker.windowMaximizeAriaLabel,
+            restoreAriaLabel: messages.marker.windowRestoreAriaLabel,
+        }, title: _jsxs("span", { className: "truncate text-[12px] font-bold text-[var(--adaptive-black900)]", children: [messages.pins.railTitle, " ", messages.pins.railCountLabel(pinnedFeedbackItems.length), " (", overallProgress.percentage, "%)"] }), headerRight: _jsxs("span", { className: "flex items-center gap-[6px]", children: [_jsx(CircularProgress, { progress: overallProgress, size: 18, showPercentLabel: true }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onPointerDown: (event) => event.stopPropagation(), onClick: () => handleModeChange(mode === "minimized" ? "normal" : "minimized"), "aria-expanded": mode !== "minimized", "aria-label": mode === "minimized" ? messages.pins.railExpandAriaLabel : messages.pins.railCollapseAriaLabel, title: messages.pins.repositionTitle, className: "flex h-[22px] w-[22px] items-center justify-center rounded-[6px] text-[var(--adaptive-black500)] transition-colors hover:bg-[var(--adaptive-tintOpacity200)] hover:text-[var(--adaptive-black900)]", children: _jsx(ChevronDownIcon, { className: `h-[14px] w-[14px] transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] ${mode === "minimized" ? "" : "rotate-180"}` }) })] }), children: _jsx("div", { className: `flex flex-col gap-[10px] ${mode === "maximized" ? "h-full overflow-y-auto" : "max-h-[min(60vh,520px)] overflow-y-auto"}`, children: routeGroups.map((group) => (_jsx(PinnedRouteAccordion, { group: group, collapsed: collapsedRoutes.has(group.pathname), onToggle: () => {
+                    setCollapsedRoutes((current) => {
+                        const next = new Set(current);
+                        if (next.has(group.pathname)) {
+                            next.delete(group.pathname);
+                        }
+                        else {
+                            next.add(group.pathname);
+                        }
+                        return next;
+                    });
+                }, onOpen: handleOpen, onRemove: unpinFeedback }, group.pathname))) }) }));
 }
 //# sourceMappingURL=FloatingPinRail.js.map

package/dist/components/overlay/FloatingPinRail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPinRail.js","sourceRoot":"","sources":["../../../src/components/overlay/FloatingPinRail.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FloatingPinRail.js","sourceRoot":"","sources":["../../../src/components/overlay/FloatingPinRail.tsx"],"names":[],"mappings":"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"}

package/dist/components/panel/ReportControlPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/ReportControlPanel.tsx"],"names":[],"mappings":"AAgFA,wBAAgB,kBAAkB,gCAyfjC"}
+{"version":3,"file":"ReportControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/ReportControlPanel.tsx"],"names":[],"mappings":"AA0FA,wBAAgB,kBAAkB,gCAugBjC"}

package/dist/components/panel/ReportControlPanel.js

@@ -4,7 +4,7 @@ import { panelAnchorSide, placementToCollapsedPanelStyle, usePanelDock } from ".
 import { usePanelResize, panelSizeToStyle } from "../../hooks/usePanelResize.js";
 import { usePanelFeedbackTransfer } from "../../hooks/usePanelFeedbackTransfer.js";
 import { useReport } from "../../providers/reportContext.js";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, EyeOpenIcon, LogoIcon, SelectIcon, SettingsIcon } from "../../components/icons/Icons.js";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DevicePreviewIcon, EyeOpenIcon, LogoIcon, SelectIcon, SettingsIcon, } from "../../components/icons/Icons.js";
 import { IconTooltipButton } from "../../components/ui/IconTooltipButton.js";
 import { HoverTooltip } from "../../components/ui/HoverTooltip.js";
 import { PanelDockGuides } from "./PanelDockGuides.js";
@@ -34,6 +34,7 @@ import { PanelProjectFooter } from "./PanelProjectFooter.js";
 import { createPersonalKeyBackupFilename, downloadPersonalKeyBackup } from "../../utils/feedback/feedbackDataTransfer.js";
 import { getPanelTabDefinition } from "../../constants/panelTabRegistry.js";
 import { MOTION, PANEL_TAB_FADE_MS, panelCollapseInClass } from "../../constants/motionClasses.js";
+import { PANEL_LAYER_Z_INDEX } from "../../utils/overlay/floatingWindowStack.js";
 function PanelCollapseTab({ collapsed, anchorSide, onClick, messages }) {
     const hideIcon = anchorSide === "right" ? _jsx(ChevronRightIcon, { className: "h-4 w-4" }) : _jsx(ChevronLeftIcon, { className: "h-4 w-4" });
     const expandIcon = anchorSide === "right" ? _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) : _jsx(ChevronRightIcon, { className: "h-4 w-4" });
@@ -47,7 +48,7 @@ function PanelTabButton({ label, active, onClick }) {
     return (_jsxs("button", { type: "button", onClick: onClick, className: `flex flex-1 items-center justify-center gap-[6px] px-[10px] py-[4px] hover:bg-[var(--adaptive-black200)] ${active ? "bg-[var(--adaptive-black50)]" : ""}`, children: [_jsx("p", { className: `${active ? "text-[var(--adaptive-black900)]" : "text-[var(--adaptive-black500)]"} font-[500] text-[14px]`, children: label }), _jsx(ChevronDownIcon, { className: `h-4 w-4 shrink-0 transition-transform ${active ? "rotate-180" : ""}` })] }));
 }
 export function ReportControlPanel() {
-    const { mode, roleStatItems, errorMessage, environment, projectId, appVersion, activeReplyReportId, showFeedbackList, visiblePanelTabs, isMobileViewport, panelTab, panelAppearance, setPanelAppearance, tooltipAppearance, setTooltipAppearance, questionThreadDisplay, setQuestionThreadDisplay, canTransferFeedback, personalKey, publicKey, panelView, messages, toggleReportMode, toggleIssueMode, openPanelTab, setErrorMessage, refetch, panelCollapsed, setPanelCollapsed, } = useReport();
+    const { mode, roleStatItems, errorMessage, environment, projectId, appVersion, activeReplyReportId, showFeedbackList, visiblePanelTabs, isMobileViewport, panelTab, panelAppearance, setPanelAppearance, tooltipAppearance, setTooltipAppearance, questionThreadDisplay, setQuestionThreadDisplay, canTransferFeedback, personalKey, publicKey, panelView, messages, toggleReportMode, toggleIssueMode, openPanelTab, setErrorMessage, refetch, panelCollapsed, setPanelCollapsed, devicePreviewUiOpen, setDevicePreviewUiOpen, } = useReport();
     const [personalKeyStep, setPersonalKeyStep] = useState("none");
     const [personalKeyNotice, setPersonalKeyNotice] = useState("");
     const isRecording = mode === "report";
@@ -165,13 +166,13 @@ export function ReportControlPanel() {
     const resolvedSizeStyle = panelExpanded ? panelSizeToStyle(panelSize, applyFixedHeight || isGateView) : undefined;
     const panelSideControls = panelExpanded ? (_jsx("div", { className: "flex shrink-0 flex-col items-center border-l border-l-[var(--adaptive-border-subtle)] h-full", children: _jsx(PanelCollapseTab, { collapsed: panelCollapsed, anchorSide: anchorSide, onClick: handleTogglePanelCollapsed, messages: messages }) })) : null;
     const gateBody = panelView === "onboarding" ? _jsx(PanelOnboarding, {}) : panelView === "setup-complete" || panelView === "key-issue" ? _jsx(PanelKeyGate, { mode: panelView }) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(PanelDockGuides, { visible: isDragging, activeCorner: activeCorner }), isResizing ? (_jsx(CornerResizeGhost, { ghostRef: ghostRef, zIndexClassName: "z-[1000001]" })) : null, _jsxs("div", { ref: panelRef, onDragEnter: isGateView ? undefined : handleDragEnter, onDragLeave: isGateView ? undefined : handleDragLeave, onDragOver: isGateView ? undefined : handleDragOver, onDrop: isGateView ? undefined : handleDrop, className: `pointer-events-auto z-[1000000] border border-[var(--adaptive-border-subtle)] flex ${MOTION.panelEnter} ${MOTION.panelDock} ${isDragging ? MOTION.panelDockDragging : ""} ${isRecording
-                    ? "min-h-[40px] bg-[var(--adaptive-neutralTintOpacity900)] backdrop-blur-[10px] rounded-[16px] shadow-[0_0_120px_0_var(--adaptive-black500)]"
+    return (_jsxs(_Fragment, { children: [_jsx(PanelDockGuides, { visible: isDragging, activeCorner: activeCorner }), isResizing ? (_jsx(CornerResizeGhost, { ghostRef: ghostRef, zIndexClassName: "z-[1001001]" })) : null, _jsxs("div", { ref: panelRef, "data-fp-chrome": "panel", "data-collapsed": panelCollapsed && !isRecording ? "true" : "false", "data-dragging": isDragging ? "true" : "false", "data-anchor-side": anchorSide, onDragEnter: isGateView ? undefined : handleDragEnter, onDragLeave: isGateView ? undefined : handleDragLeave, onDragOver: isGateView ? undefined : handleDragOver, onDrop: isGateView ? undefined : handleDrop, className: `pointer-events-auto border border-[var(--adaptive-border-subtle)] flex ${MOTION.panelEnter} ${MOTION.panelDock} ${isDragging ? MOTION.panelDockDragging : ""} ${isRecording
+                    ? "min-h-[40px] bg-[var(--adaptive-neutralTintOpacity900)] backdrop-blur-[10px] rounded-[16px] shadow-[var(--adaptive-popup-shadow)]"
                     : panelCollapsed
                         ? ""
-                        : "relative bg-[var(--adaptive-neutralTintOpacity900)] backdrop-blur-[10px] rounded-[16px] shadow-[0_0_120px_0_var(--adaptive-black500)]"}`, style: { ...resolvedPanelStyle, ...resolvedSizeStyle }, children: [panelExpanded ? (_jsx(CornerResizeHandle, { corner: resizeCorner, ariaLabel: messages.panel.resizeAriaLabel, inactive: isDragging, onPointerDown: handleResizePointerDown })) : null, _jsxs("div", { className: `${shellMotionClass} ${panelCollapsed && !isRecording ? "flex shrink-0" : `flex w-full min-w-0 flex-col ${applyFixedHeight || isGateView ? "h-full min-h-0" : ""}`}`.trim(), children: [panelCollapsed && !isRecording ? null : _jsx(PanelStatusBannerStack, {}), isRecording ? (_jsxs("section", { className: "flex items-center justify-between gap-[16px] px-[12px] py-[8px]", children: [_jsx("section", { className: "flex items-center gap-[4px] justify-start shrink-0", children: _jsx(LogoIcon, { className: "w-[94px]" }) }), _jsx("button", { type: "button", onClick: toggleReportMode, className: "flex items-center shrink-0 bg-[#F6572E] p-[4px_8px] rounded-[6px]", children: _jsx("p", { className: "text-[14px] font-bold text-[var(--adaptive-black50)]", children: messages.panel.stopFeedback }) })] })) : panelCollapsed ? (_jsx(PanelCollapseTab, { collapsed: panelCollapsed, anchorSide: anchorSide, onClick: handleTogglePanelCollapsed, messages: messages })) : isGateView ? (_jsxs("section", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsxs("section", { className: "flex shrink-0", children: [anchorSide === "left" ? panelSideControls : null, _jsx("div", { className: "flex flex-1 flex-col", children: _jsx("section", { className: "flex items-center justify-between gap-[8px] cursor-move border-b border-b-[var(--adaptive-border-subtle)] p-[4px_12px]", onPointerDown: handleDragHandlePointerDown, children: _jsx(LogoIcon, { className: "w-[94px] shrink-0" }) }) }), anchorSide === "right" ? panelSideControls : null] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: gateBody })] })) : (_jsx(_Fragment, { children: _jsxs("section", { className: `relative flex min-w-0 flex-col ${applyFixedHeight ? "h-full min-h-0 flex-1" : "shrink-0"}`, children: [isDragOver ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-[30] flex items-center justify-center rounded-[12px] bg-[#dbeafe]/90 px-[16px] text-center backdrop-blur-[2px]", children: _jsx("p", { className: "text-[14px] font-bold text-[var(--adaptive-blue500)]", children: messages.panel.importDragOverlay }) })) : null, _jsxs("section", { className: "flex shrink-0", children: [anchorSide === "left" ? panelSideControls : null, _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("section", { 
+                        : "relative bg-[var(--adaptive-neutralTintOpacity900)] backdrop-blur-[10px] rounded-[16px] shadow-[var(--adaptive-popup-shadow)]"}`, style: { ...resolvedPanelStyle, ...resolvedSizeStyle, zIndex: PANEL_LAYER_Z_INDEX }, children: [panelExpanded ? (_jsx(CornerResizeHandle, { corner: resizeCorner, ariaLabel: messages.panel.resizeAriaLabel, inactive: isDragging, onPointerDown: handleResizePointerDown })) : null, _jsxs("div", { className: `${shellMotionClass} ${panelCollapsed && !isRecording ? "flex shrink-0" : `flex w-full min-w-0 flex-col ${applyFixedHeight || isGateView ? "h-full min-h-0" : ""}`}`.trim(), children: [panelCollapsed && !isRecording ? null : _jsx(PanelStatusBannerStack, {}), isRecording ? (_jsxs("section", { className: "flex items-center justify-between gap-[16px] px-[12px] py-[8px]", children: [_jsx("section", { className: "flex items-center gap-[4px] justify-start shrink-0", children: _jsx(LogoIcon, { className: "w-[94px]" }) }), _jsx("button", { type: "button", onClick: toggleReportMode, className: "flex items-center shrink-0 bg-[#F6572E] p-[4px_8px] rounded-[6px]", children: _jsx("p", { className: "text-[14px] font-bold text-[var(--adaptive-black50)]", children: messages.panel.stopFeedback }) })] })) : panelCollapsed ? (_jsx(PanelCollapseTab, { collapsed: panelCollapsed, anchorSide: anchorSide, onClick: handleTogglePanelCollapsed, messages: messages })) : isGateView ? (_jsxs("section", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsxs("section", { className: "flex shrink-0", children: [anchorSide === "left" ? panelSideControls : null, _jsx("div", { className: "flex flex-1 flex-col", children: _jsx("section", { className: "flex items-center justify-between gap-[8px] cursor-move border-b border-b-[var(--adaptive-border-subtle)] p-[4px_12px]", onPointerDown: handleDragHandlePointerDown, children: _jsx(LogoIcon, { className: "w-[94px] shrink-0" }) }) }), anchorSide === "right" ? panelSideControls : null] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: gateBody })] })) : (_jsx(_Fragment, { children: _jsxs("section", { className: `relative flex min-w-0 flex-col ${applyFixedHeight ? "h-full min-h-0 flex-1" : "shrink-0"}`, children: [isDragOver ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-[30] flex items-center justify-center rounded-[12px] bg-[#dbeafe]/90 px-[16px] text-center backdrop-blur-[2px]", children: _jsx("p", { className: "text-[14px] font-bold text-[var(--adaptive-blue500)]", children: messages.panel.importDragOverlay }) })) : null, _jsxs("section", { className: "flex shrink-0", children: [anchorSide === "left" ? panelSideControls : null, _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("section", { 
                                                             // className="flex items-center justify-between gap-[8px] cursor-move border-b border-b-[var(--adaptive-border-subtle)] p-[4px_12px]"
-                                                            className: "flex items-center justify-between gap-[8px] cursor-move border-b border-b-[var(--adaptive-border-subtle)]", onPointerDown: handleDragHandlePointerDown, children: [_jsx("section", { className: "flex min-w-0 items-center gap-[4px] py-[4px] pl-[12px]", children: _jsx(LogoIcon, { className: "w-[94px] shrink-0" }) }), _jsxs("section", { className: "flex shrink-0 items-center h-full", children: [_jsx(PanelPresentationSwitch, {}), _jsx(IconTooltipButton, { label: messages.panel.viewFeedbacks, active: isIssueMode, onClick: toggleIssueMode, children: _jsx(EyeOpenIcon, { className: "h-[16px] w-[16px]" }) }), _jsx(PanelAutoRefreshControl, {}), _jsx(IconTooltipButton, { label: messages.panel.tabSettings, active: panelTab === "settings" || panelTab === "command", onClick: () => handlePanelTabClick("settings"), children: _jsx(SettingsIcon, { className: "h-[16px] w-[16px]" }) })] })] }), _jsxs("section", { className: "flex items-center h-full", children: [_jsx("button", { type: "button", onClick: toggleReportMode, className: "flex flex-col shrink-0 justify-center items-center gap-[4px] p-[0_16px] border-r border-r-[var(--adaptive-border-subtle)] h-full hover:bg-[#f6572d]", children: _jsx(SelectIcon, { className: "w-[24px]" }) }), _jsxs("section", { className: "flex flex-col min-w-0 flex-1 px-[16px] py-[8px] gap-[4px]", "aria-label": messages.panel.repositionAriaLabel, title: messages.panel.repositionTitle, style: isDragging ? { opacity: 0.8 } : undefined, children: [_jsx("p", { className: "text-[12px] text-[var(--adaptive-black500)] font-bold", children: "\uB0B4 \uBAA8\uB4E0 \uD65C\uB3D9" }), _jsx("section", { className: "flex", children: roleStatItems.map((item) => item.kind === "cta" ? (_jsx("p", { className: "flex-1 self-center text-[12px] font-medium text-[var(--adaptive-black600)]", children: item.display }, item.key)) : (_jsxs("section", { className: "flex items-start gap-[4px] flex-1", children: [_jsx("p", { className: "text-[14px] text-[var(--adaptive-black500)]", children: item.label }), _jsxs("p", { className: "text-[14px] font-semibold text-[var(--adaptive-black900)]", children: [item.display, "\uAC1C"] })] }, item.key))) })] })] })] }), anchorSide === "right" ? panelSideControls : null] }), _jsx("section", { className: "flex shrink-0 items-stretch border-t border-[var(--adaptive-border-subtle)]", children: _jsx("div", { className: "flex min-w-0 flex-1 overflow-hidden border-b border-b-[var(--adaptive-border-subtle)]", children: visiblePanelTabs.map((tabId, index) => (_jsxs("div", { className: "contents", children: [index > 0 ? _jsx("div", { className: "h-full w-[1px] bg-[var(--adaptive-border-subtle)]" }) : null, _jsx(PanelTabButton, { label: messages.panel[getPanelTabDefinition(tabId).labelKey], active: panelTab === tabId, onClick: () => handlePanelTabClick(tabId) })] }, tabId))) }) }), errorMessage && importStep === "none" && commandStep === "none" && !activeReplyReportId ? (_jsx("p", { className: `px-[8px] text-[12px] text-rose-700 ${MOTION.noticeIn}`, children: errorMessage })) : null, personalKeyNotice ? _jsx("p", { className: `px-[8px] py-[4px] text-[12px] text-[var(--adaptive-green500)] ${MOTION.noticeIn}`, children: personalKeyNotice }) : null, personalKeyStep !== "none" ? (_jsx(ReportPersonalKeyDialog, { mode: personalKeyStep, onCancel: () => setPersonalKeyStep("none"), onComplete: (message) => {
+                                                            className: "flex items-center justify-between gap-[8px] cursor-move border-b border-b-[var(--adaptive-border-subtle)]", onPointerDown: handleDragHandlePointerDown, children: [_jsx("section", { className: "flex min-w-0 items-center gap-[4px] py-[4px] pl-[12px]", children: _jsx(LogoIcon, { className: "w-[94px] shrink-0" }) }), _jsxs("section", { className: "flex shrink-0 items-center h-full", children: [_jsx(PanelPresentationSwitch, {}), _jsx(IconTooltipButton, { label: messages.panel.viewFeedbacks, active: isIssueMode, onClick: toggleIssueMode, children: _jsx(EyeOpenIcon, { className: "h-[16px] w-[16px]" }) }), _jsx(IconTooltipButton, { label: messages.panel.devicePreview, active: devicePreviewUiOpen, onClick: () => setDevicePreviewUiOpen(!devicePreviewUiOpen), children: _jsx(DevicePreviewIcon, { className: "h-[16px] w-[16px]" }) }), _jsx(PanelAutoRefreshControl, {}), _jsx(IconTooltipButton, { label: messages.panel.tabSettings, active: panelTab === "settings" || panelTab === "command", onClick: () => handlePanelTabClick("settings"), children: _jsx(SettingsIcon, { className: "h-[16px] w-[16px]" }) })] })] }), _jsxs("section", { className: "flex items-center h-full", children: [_jsx("button", { type: "button", onClick: toggleReportMode, className: "flex flex-col shrink-0 justify-center items-center gap-[4px] p-[0_16px] border-r border-r-[var(--adaptive-border-subtle)] h-full hover:bg-[#f6572d]", children: _jsx(SelectIcon, { className: "w-[24px]" }) }), _jsxs("section", { className: "flex flex-col min-w-0 flex-1 px-[16px] py-[8px] gap-[4px]", "aria-label": messages.panel.repositionAriaLabel, title: messages.panel.repositionTitle, style: isDragging ? { opacity: 0.8 } : undefined, children: [_jsx("p", { className: "text-[12px] text-[var(--adaptive-black500)] font-bold", children: "\uB0B4 \uBAA8\uB4E0 \uD65C\uB3D9" }), _jsx("section", { className: "flex", children: roleStatItems.map((item) => item.kind === "cta" ? (_jsx("p", { className: "flex-1 self-center text-[12px] font-medium text-[var(--adaptive-black600)]", children: item.display }, item.key)) : (_jsxs("section", { className: "flex items-start gap-[4px] flex-1", children: [_jsx("p", { className: "text-[14px] text-[var(--adaptive-black500)]", children: item.label }), _jsxs("p", { className: "text-[14px] font-semibold text-[var(--adaptive-black900)]", children: [item.display, "\uAC1C"] })] }, item.key))) })] })] })] }), anchorSide === "right" ? panelSideControls : null] }), _jsx("section", { className: "flex shrink-0 items-stretch border-t border-[var(--adaptive-border-subtle)]", children: _jsx("div", { className: "flex min-w-0 flex-1 overflow-hidden border-b border-b-[var(--adaptive-border-subtle)]", children: visiblePanelTabs.map((tabId, index) => (_jsxs("div", { className: "contents", children: [index > 0 ? _jsx("div", { className: "h-full w-[1px] bg-[var(--adaptive-border-subtle)]" }) : null, _jsx(PanelTabButton, { label: messages.panel[getPanelTabDefinition(tabId).labelKey], active: panelTab === tabId, onClick: () => handlePanelTabClick(tabId) })] }, tabId))) }) }), errorMessage && importStep === "none" && commandStep === "none" && !activeReplyReportId ? (_jsx("p", { className: `px-[8px] text-[12px] text-rose-700 ${MOTION.noticeIn}`, children: errorMessage })) : null, personalKeyNotice ? _jsx("p", { className: `px-[8px] py-[4px] text-[12px] text-[var(--adaptive-green500)] ${MOTION.noticeIn}`, children: personalKeyNotice }) : null, personalKeyStep !== "none" ? (_jsx(ReportPersonalKeyDialog, { mode: personalKeyStep, onCancel: () => setPersonalKeyStep("none"), onComplete: (message) => {
                                                 setPersonalKeyNotice(message);
                                                 setPersonalKeyStep("none");
                                             } })) : null, personalKeyStep === "none" && importStep === "project-mismatch" && pendingImport ? (_jsx(ReportImportProjectMismatchDialog, { currentProject: transferScope, importedProject: pendingImport.project, exportedAt: pendingImport.exportedAt, onProceed: handleProceedImportAfterMismatch, onCancel: handleCancelImport })) : null, personalKeyStep === "none" && importStep === "confirm" && pendingImport ? (_jsx(ReportImportConfirmDialog, { onApply: handleApplyImport, onCancel: handleCancelImport, onBackupAndApply: handleBackupAndApplyImport })) : null, tabShellMounted ? (_jsx("div", { className: `${MOTION.panelTabShell} ${applyFixedHeight ? "min-h-0 flex-1" : ""}`, "data-open": tabShellOpen ? "true" : "false", children: _jsx("div", { className: MOTION.panelTabShellInner, children: _jsxs("div", { className: applyFixedHeight ? "flex min-h-0 flex-1 flex-col overflow-hidden" : "flex flex-col", children: [renderedTab === "overview" && commandStep === "none" ? _jsx(ReportOverview, {}) : null, renderedTab === "route-details" && commandStep === "none" ? _jsx(ReportRouteDetails, {}) : null, renderedTab === "feedback-list" && showFeedbackList && commandStep === "none" ? _jsx(ReportFeedbackList, {}) : null, renderedTab === "diagnostics" && commandStep === "none" ? _jsx(ReportAuthDiagnostics, {}) : null, renderedTab === "my-tasks" && commandStep === "none" ? _jsx(ReportMyTasksPanel, {}) : null, renderedTab === "page-brief" && commandStep === "none" ? _jsx(ReportPageBriefPanel, {}) : null, renderedTab === "needs-attention" && commandStep === "none" ? _jsx(ReportNeedsAttentionPanel, {}) : null, renderedTab === "project-health" && commandStep === "none" ? _jsx(ReportProjectHealthPanel, {}) : null, renderedTab === "today-digest" && commandStep === "none" ? _jsx(ReportTodayDigestPanel, {}) : null, renderedTab === "settings" && commandStep === "none" ? (_jsx(PanelSettings, { transferDisabled: !canTransferFeedback, panelAppearance: panelAppearance, onPanelAppearanceChange: setPanelAppearance, tooltipAppearance: tooltipAppearance, onTooltipAppearanceChange: setTooltipAppearance, questionThreadDisplay: questionThreadDisplay, onQuestionThreadDisplayChange: setQuestionThreadDisplay, onExport: handleExport, onImport: handleImportFromMenu, onCommand: handleOpenCommand, hasPersonalKey: Boolean(personalKey), onKeyCopy: () => void handleKeyCopy(), onPublicKeyCopy: () => void handlePublicKeyCopy(), onKeyInsert: () => {