@vestig/next 0.5.0 → 0.8.0

package/dist/dev/log-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-entry.d.ts","sourceRoot":"","sources":["../../src/dev/log-entry.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAqB1C,UAAU,aAAa;IACtB,GAAG,EAAE,WAAW,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,qDAsNnB,CAAA"}

package/dist/dev/log-entry.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+/**
+ * Level colors
+ */
+const LEVEL_COLORS = {
+    trace: { bg: '#f3f4f6', text: '#6b7280', border: '#d1d5db' },
+    debug: { bg: '#dbeafe', text: '#1e40af', border: '#93c5fd' },
+    info: { bg: '#dcfce7', text: '#166534', border: '#86efac' },
+    warn: { bg: '#fef3c7', text: '#92400e', border: '#fcd34d' },
+    error: { bg: '#fee2e2', text: '#991b1b', border: '#fca5a5' },
+};
+/**
+ * Source badge colors
+ */
+const SOURCE_COLORS = {
+    client: { bg: '#e0e7ff', text: '#4338ca' },
+    server: { bg: '#fae8ff', text: '#a21caf' },
+};
+/**
+ * Single log entry component
+ */
+export const LogEntry = memo(function LogEntry({ log, isExpanded, onToggleExpand }) {
+    const [localExpanded, setLocalExpanded] = useState(false);
+    const expanded = isExpanded ?? localExpanded;
+    const toggleExpand = onToggleExpand ?? (() => setLocalExpanded((e) => !e));
+    const levelColors = LEVEL_COLORS[log.level] ?? {
+        bg: '#dcfce7',
+        text: '#166534',
+        border: '#86efac',
+    };
+    const sourceColors = SOURCE_COLORS[log.source] ?? { bg: '#e0e7ff', text: '#4338ca' };
+    const hasDetails = Boolean(log.metadata || log.context || log.error);
+    const timestamp = new Date(log.timestamp);
+    const timeStr = timestamp.toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        fractionalSecondDigits: 3,
+    });
+    const containerStyle = {
+        padding: '8px 12px',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+        fontSize: '12px',
+        lineHeight: '1.5',
+        cursor: hasDetails ? 'pointer' : 'default',
+        backgroundColor: expanded ? 'rgba(0, 0, 0, 0.02)' : 'transparent',
+        transition: 'background-color 0.15s ease',
+    };
+    const headerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        flexWrap: 'nowrap',
+    };
+    const timestampStyle = {
+        color: '#9ca3af',
+        fontSize: '11px',
+        flexShrink: 0,
+    };
+    const levelBadgeStyle = {
+        padding: '1px 6px',
+        borderRadius: '4px',
+        fontSize: '10px',
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        backgroundColor: levelColors.bg,
+        color: levelColors.text,
+        border: `1px solid ${levelColors.border}`,
+        flexShrink: 0,
+    };
+    const sourceBadgeStyle = {
+        padding: '1px 6px',
+        borderRadius: '4px',
+        fontSize: '10px',
+        fontWeight: 500,
+        backgroundColor: sourceColors.bg,
+        color: sourceColors.text,
+        flexShrink: 0,
+    };
+    const namespaceStyle = {
+        color: '#6366f1',
+        fontSize: '11px',
+        flexShrink: 0,
+    };
+    const messageStyle = {
+        color: '#1f2937',
+        flex: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: expanded ? 'normal' : 'nowrap',
+        wordBreak: 'break-word',
+    };
+    const expandIconStyle = {
+        color: '#9ca3af',
+        marginLeft: 'auto',
+        flexShrink: 0,
+        transition: 'transform 0.15s ease',
+        transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+    };
+    const detailsStyle = {
+        marginTop: '8px',
+        padding: '8px',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+        borderRadius: '4px',
+        fontSize: '11px',
+    };
+    const detailSectionStyle = {
+        marginBottom: '8px',
+    };
+    const detailLabelStyle = {
+        color: '#6b7280',
+        fontWeight: 600,
+        marginBottom: '4px',
+        textTransform: 'uppercase',
+        fontSize: '10px',
+        letterSpacing: '0.05em',
+    };
+    const detailContentStyle = {
+        padding: '4px 8px',
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        borderRadius: '2px',
+        overflow: 'auto',
+        maxHeight: '200px',
+    };
+    const preStyle = {
+        margin: 0,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        fontSize: '11px',
+        color: '#374151',
+    };
+    const errorStackStyle = {
+        ...preStyle,
+        color: '#dc2626',
+        backgroundColor: 'rgba(220, 38, 38, 0.05)',
+        padding: '8px',
+        borderRadius: '4px',
+    };
+    return (_jsxs("div", { style: containerStyle, onClick: hasDetails ? toggleExpand : undefined, role: hasDetails ? 'button' : undefined, tabIndex: hasDetails ? 0 : undefined, onKeyDown: hasDetails
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleExpand();
+                }
+            }
+            : undefined, children: [_jsxs("div", { style: headerStyle, children: [_jsx("span", { style: timestampStyle, children: timeStr }), _jsx("span", { style: levelBadgeStyle, children: log.level }), _jsx("span", { style: sourceBadgeStyle, children: log.source }), log.namespace && _jsxs("span", { style: namespaceStyle, children: ["[", log.namespace, "]"] }), _jsx("span", { style: messageStyle, children: log.message }), hasDetails && (_jsx("span", { style: expandIconStyle, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("path", { d: "M6 8L2 4h8L6 8z" }) }) }))] }), expanded && hasDetails && (_jsxs("div", { style: detailsStyle, children: [log.error && (_jsxs("div", { style: detailSectionStyle, children: [_jsx("div", { style: detailLabelStyle, children: "Error" }), _jsxs("div", { style: detailContentStyle, children: [_jsxs("div", { style: { color: '#dc2626', fontWeight: 600, marginBottom: '4px' }, children: [log.error.name, ": ", log.error.message] }), log.error.stack && _jsx("pre", { style: errorStackStyle, children: log.error.stack })] })] })), log.metadata && Object.keys(log.metadata).length > 0 && (_jsxs("div", { style: detailSectionStyle, children: [_jsx("div", { style: detailLabelStyle, children: "Metadata" }), _jsx("div", { style: detailContentStyle, children: _jsx("pre", { style: preStyle, children: JSON.stringify(log.metadata, null, 2) }) })] })), log.context && Object.keys(log.context).length > 0 && (_jsxs("div", { style: detailSectionStyle, children: [_jsx("div", { style: detailLabelStyle, children: "Context" }), _jsx("div", { style: detailContentStyle, children: _jsx("pre", { style: preStyle, children: JSON.stringify(log.context, null, 2) }) })] })), log.duration !== undefined && (_jsxs("div", { style: detailSectionStyle, children: [_jsx("div", { style: detailLabelStyle, children: "Duration" }), _jsx("div", { style: detailContentStyle, children: _jsxs("span", { style: { color: '#059669', fontWeight: 500 }, children: [log.duration.toFixed(2), "ms"] }) })] }))] }))] }));
+});
+//# sourceMappingURL=log-entry.js.map

package/dist/dev/log-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-entry.js","sourceRoot":"","sources":["../../src/dev/log-entry.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAsB,MAAM,OAAO,CAAA;AAG1D;;GAEG;AACH,MAAM,YAAY,GAAiE;IAClF,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC5D,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC3D,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC3D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;CAC5D,CAAA;AAED;;GAEG;AACH,MAAM,aAAa,GAAiD;IACnE,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC1C,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;CAC1C,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,QAAQ,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,cAAc,EAAiB;IAChG,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,QAAQ,GAAG,UAAU,IAAI,aAAa,CAAA;IAC5C,MAAM,YAAY,GAAG,cAAc,IAAI,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE1E,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI;QAC9C,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KACjB,CAAA;IACD,MAAM,YAAY,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAA;IAEpF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,KAAK,CAAC,CAAA;IACpE,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACzC,MAAM,OAAO,GAAG,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACrD,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,sBAAsB,EAAE,CAAC;KACzB,CAAC,CAAA;IAEF,MAAM,cAAc,GAAkB;QACrC,OAAO,EAAE,UAAU;QACnB,YAAY,EAAE,+BAA+B;QAC7C,UAAU,EAAE,kEAAkE;QAC9E,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,KAAK;QACjB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC1C,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,aAAa;QACjE,UAAU,EAAE,6BAA6B;KACzC,CAAA;IAED,MAAM,WAAW,GAAkB;QAClC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAA;IAED,MAAM,cAAc,GAAkB;QACrC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC;KACb,CAAA;IAED,MAAM,eAAe,GAAkB;QACtC,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,WAAW;QAC1B,eAAe,EAAE,WAAW,CAAC,EAAE;QAC/B,KAAK,EAAE,WAAW,CAAC,IAAI;QACvB,MAAM,EAAE,aAAa,WAAW,CAAC,MAAM,EAAE;QACzC,UAAU,EAAE,CAAC;KACb,CAAA;IAED,MAAM,gBAAgB,GAAkB;QACvC,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,eAAe,EAAE,YAAY,CAAC,EAAE;QAChC,KAAK,EAAE,YAAY,CAAC,IAAI;QACxB,UAAU,EAAE,CAAC;KACb,CAAA;IAED,MAAM,cAAc,GAAkB;QACrC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC;KACb,CAAA;IAED,MAAM,YAAY,GAAkB;QACnC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;QAC1C,SAAS,EAAE,YAAY;KACvB,CAAA;IAED,MAAM,eAAe,GAAkB;QACtC,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,sBAAsB;QAClC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;KACvD,CAAA;IAED,MAAM,YAAY,GAAkB;QACnC,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,KAAK;QACd,eAAe,EAAE,qBAAqB;QACtC,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;KAChB,CAAA;IAED,MAAM,kBAAkB,GAAkB;QACzC,YAAY,EAAE,KAAK;KACnB,CAAA;IAED,MAAM,gBAAgB,GAAkB;QACvC,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,GAAG;QACf,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,MAAM;QAChB,aAAa,EAAE,QAAQ;KACvB,CAAA;IAED,MAAM,kBAAkB,GAAkB;QACzC,OAAO,EAAE,SAAS;QAClB,eAAe,EAAE,0BAA0B;QAC3C,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,OAAO;KAClB,CAAA;IAED,MAAM,QAAQ,GAAkB;QAC/B,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,SAAS;KAChB,CAAA;IAED,MAAM,eAAe,GAAkB;QACtC,GAAG,QAAQ;QACX,KAAK,EAAE,SAAS;QAChB,eAAe,EAAE,yBAAyB;QAC1C,OAAO,EAAE,KAAK;QACd,YAAY,EAAE,KAAK;KACnB,CAAA;IAED,OAAO,CACN,eACC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpC,SAAS,EACR,UAAU;YACT,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACN,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACxC,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,EAAE,CAAA;gBACf,CAAC;YACF,CAAC;YACF,CAAC,CAAC,SAAS,aAGb,eAAK,KAAK,EAAE,WAAW,aACtB,eAAM,KAAK,EAAE,cAAc,YAAG,OAAO,GAAQ,EAC7C,eAAM,KAAK,EAAE,eAAe,YAAG,GAAG,CAAC,KAAK,GAAQ,EAChD,eAAM,KAAK,EAAE,gBAAgB,YAAG,GAAG,CAAC,MAAM,GAAQ,EACjD,GAAG,CAAC,SAAS,IAAI,gBAAM,KAAK,EAAE,cAAc,kBAAI,GAAG,CAAC,SAAS,SAAS,EACvE,eAAM,KAAK,EAAE,YAAY,YAAG,GAAG,CAAC,OAAO,GAAQ,EAC9C,UAAU,IAAI,CACd,eAAM,KAAK,EAAE,eAAe,YAC3B,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,YAClE,eAAM,CAAC,EAAC,iBAAiB,GAAG,GACvB,GACA,CACP,IACI,EAEL,QAAQ,IAAI,UAAU,IAAI,CAC1B,eAAK,KAAK,EAAE,YAAY,aACtB,GAAG,CAAC,KAAK,IAAI,CACb,eAAK,KAAK,EAAE,kBAAkB,aAC7B,cAAK,KAAK,EAAE,gBAAgB,sBAAa,EACzC,eAAK,KAAK,EAAE,kBAAkB,aAC7B,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,aACpE,GAAG,CAAC,KAAK,CAAC,IAAI,QAAI,GAAG,CAAC,KAAK,CAAC,OAAO,IAC/B,EACL,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,cAAK,KAAK,EAAE,eAAe,YAAG,GAAG,CAAC,KAAK,CAAC,KAAK,GAAO,IACnE,IACD,CACN,EAEA,GAAG,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACxD,eAAK,KAAK,EAAE,kBAAkB,aAC7B,cAAK,KAAK,EAAE,gBAAgB,yBAAgB,EAC5C,cAAK,KAAK,EAAE,kBAAkB,YAC7B,cAAK,KAAK,EAAE,QAAQ,YAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,GAC9D,IACD,CACN,EAEA,GAAG,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACtD,eAAK,KAAK,EAAE,kBAAkB,aAC7B,cAAK,KAAK,EAAE,gBAAgB,wBAAe,EAC3C,cAAK,KAAK,EAAE,kBAAkB,YAC7B,cAAK,KAAK,EAAE,QAAQ,YAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,GAC7D,IACD,CACN,EAEA,GAAG,CAAC,QAAQ,KAAK,SAAS,IAAI,CAC9B,eAAK,KAAK,EAAE,kBAAkB,aAC7B,cAAK,KAAK,EAAE,gBAAgB,yBAAgB,EAC5C,cAAK,KAAK,EAAE,kBAAkB,YAC7B,gBAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,aAChD,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,UAClB,GACF,IACD,CACN,IACI,CACN,IACI,CACN,CAAA;AACF,CAAC,CAAC,CAAA"}

package/dist/dev/log-viewer.d.ts

@@ -0,0 +1,11 @@
+import type { DevLogEntry } from './store';
+interface LogViewerProps {
+    logs: DevLogEntry[];
+    autoScroll?: boolean;
+}
+/**
+ * Log viewer component with auto-scroll
+ */
+export declare const LogViewer: import("react").NamedExoticComponent<LogViewerProps>;
+export {};
+//# sourceMappingURL=log-viewer.d.ts.map

package/dist/dev/log-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-viewer.d.ts","sourceRoot":"","sources":["../../src/dev/log-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,UAAU,cAAc;IACvB,IAAI,EAAE,WAAW,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sDA6DpB,CAAA"}

package/dist/dev/log-viewer.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { LogEntry } from './log-entry';
+/**
+ * Log viewer component with auto-scroll
+ */
+export const LogViewer = memo(function LogViewer({ logs, autoScroll = true }) {
+    const containerRef = useRef(null);
+    const isAtBottomRef = useRef(true);
+    // Track if user is at bottom
+    const handleScroll = () => {
+        if (!containerRef.current)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+        // Consider "at bottom" if within 50px
+        isAtBottomRef.current = scrollHeight - scrollTop - clientHeight < 50;
+    };
+    // Auto-scroll when new logs arrive
+    useEffect(() => {
+        if (!autoScroll || !isAtBottomRef.current || !containerRef.current)
+            return;
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }, [logs.length, autoScroll]);
+    const containerStyle = {
+        flex: 1,
+        overflow: 'auto',
+        backgroundColor: 'white',
+    };
+    const emptyStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        color: '#9ca3af',
+        fontSize: '14px',
+        gap: '8px',
+    };
+    const emptyIconStyle = {
+        fontSize: '32px',
+        opacity: 0.5,
+    };
+    if (logs.length === 0) {
+        return (_jsx("div", { style: containerStyle, children: _jsxs("div", { style: emptyStyle, children: [_jsx("span", { style: emptyIconStyle, children: "\uD83D\uDCCB" }), _jsx("span", { children: "No logs yet" }), _jsx("span", { style: { fontSize: '12px', opacity: 0.7 }, children: "Logs will appear here in real-time" })] }) }));
+    }
+    return (_jsx("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: logs.map((log) => (_jsx(LogEntry, { log: log }, log.id))) }));
+});
+//# sourceMappingURL=log-viewer.js.map

package/dist/dev/log-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-viewer.js","sourceRoot":"","sources":["../../src/dev/log-viewer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAsB,MAAM,OAAO,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAOtC;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,SAAS,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAkB;IAC3F,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAElC,6BAA6B;IAC7B,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAM;QAEjC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,CAAA;QACtE,sCAAsC;QACtC,aAAa,CAAC,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAA;IACrE,CAAC,CAAA;IAED,mCAAmC;IACnC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAM;QAE1E,YAAY,CAAC,OAAO,CAAC,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAA;IACnE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAE7B,MAAM,cAAc,GAAkB;QACrC,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,MAAM;QAChB,eAAe,EAAE,OAAO;KACxB,CAAA;IAED,MAAM,UAAU,GAAkB;QACjC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,KAAK;KACV,CAAA;IAED,MAAM,cAAc,GAAkB;QACrC,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,GAAG;KACZ,CAAA;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,CACN,cAAK,KAAK,EAAE,cAAc,YACzB,eAAK,KAAK,EAAE,UAAU,aACrB,eAAM,KAAK,EAAE,cAAc,6BAAW,EACtC,yCAAwB,EACxB,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,mDAA2C,IACrF,GACD,CACN,CAAA;IACF,CAAC;IAED,OAAO,CACN,cAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,YACnE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClB,KAAC,QAAQ,IAAc,GAAG,EAAE,GAAG,IAAhB,GAAG,CAAC,EAAE,CAAc,CACnC,CAAC,GACG,CACN,CAAA;AACF,CAAC,CAAC,CAAA"}

package/dist/dev/metrics-card.d.ts

@@ -0,0 +1,18 @@
+import type { MetricEntry, MetricRating, WebVitalName } from '../metrics/types';
+interface MetricsCardProps {
+    name: WebVitalName;
+    latest?: MetricEntry;
+    /** If provided, shows summary stats */
+    summary?: {
+        count: number;
+        avg: number;
+        p75: number;
+        rating: MetricRating;
+    };
+}
+/**
+ * Card component for displaying a single Web Vital metric
+ */
+export declare const MetricsCard: import("react").NamedExoticComponent<MetricsCardProps>;
+export {};
+//# sourceMappingURL=metrics-card.d.ts.map

package/dist/dev/metrics-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-card.d.ts","sourceRoot":"","sources":["../../src/dev/metrics-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAQ/E,UAAU,gBAAgB;IACzB,IAAI,EAAE,YAAY,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,EAAE,MAAM,CAAA;QACX,GAAG,EAAE,MAAM,CAAA;QACX,MAAM,EAAE,YAAY,CAAA;KACpB,CAAA;CACD;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,wDAkGtB,CAAA"}

package/dist/dev/metrics-card.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { RATING_COLORS, formatMetricValue, getMetricDescription, THRESHOLDS, } from '../metrics/thresholds';
+/**
+ * Card component for displaying a single Web Vital metric
+ */
+export const MetricsCard = memo(function MetricsCard({ name, latest, summary }) {
+    const rating = latest?.rating ?? summary?.rating ?? 'needs-improvement';
+    const colors = RATING_COLORS[rating];
+    const threshold = THRESHOLDS[name];
+    const value = latest?.value ?? summary?.avg ?? 0;
+    const cardStyle = {
+        backgroundColor: colors.bg,
+        border: `1px solid ${colors.border}`,
+        borderRadius: '8px',
+        padding: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+    };
+    const headerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    };
+    const nameStyle = {
+        fontSize: '12px',
+        fontWeight: 600,
+        color: colors.text,
+    };
+    const ratingBadgeStyle = {
+        fontSize: '9px',
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        backgroundColor: colors.text,
+        color: colors.bg,
+    };
+    const valueStyle = {
+        fontSize: '24px',
+        fontWeight: 700,
+        color: colors.text,
+        letterSpacing: '-0.5px',
+    };
+    const descriptionStyle = {
+        fontSize: '10px',
+        color: colors.text,
+        opacity: 0.7,
+    };
+    const thresholdStyle = {
+        fontSize: '10px',
+        color: colors.text,
+        opacity: 0.6,
+        marginTop: '4px',
+        display: 'flex',
+        gap: '8px',
+    };
+    const statsStyle = {
+        display: 'flex',
+        gap: '12px',
+        marginTop: '4px',
+        fontSize: '10px',
+        color: colors.text,
+        opacity: 0.8,
+    };
+    const formatThreshold = (val) => {
+        if (threshold.unit === 'score')
+            return val.toString();
+        return val >= 1000 ? `${(val / 1000).toFixed(1)}s` : `${val}ms`;
+    };
+    return (_jsxs("div", { style: cardStyle, children: [_jsxs("div", { style: headerStyle, children: [_jsx("span", { style: nameStyle, children: name }), _jsx("span", { style: ratingBadgeStyle, children: rating.replace('-', ' ') })] }), _jsx("div", { style: valueStyle, children: formatMetricValue(name, value) }), _jsx("div", { style: descriptionStyle, children: getMetricDescription(name) }), summary && summary.count > 1 && (_jsxs("div", { style: statsStyle, children: [_jsxs("span", { children: ["Samples: ", summary.count] }), _jsxs("span", { children: ["P75: ", formatMetricValue(name, summary.p75)] })] })), _jsxs("div", { style: thresholdStyle, children: [_jsxs("span", { children: ["Good: <", formatThreshold(threshold.good)] }), _jsxs("span", { children: ["Poor: >", formatThreshold(threshold.poor)] })] })] }));
+});
+//# sourceMappingURL=metrics-card.js.map

package/dist/dev/metrics-card.js.map

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

package/dist/dev/metrics-histogram.d.ts

@@ -0,0 +1,12 @@
+import type { HistogramBucket, WebVitalName } from '../metrics/types';
+interface MetricsHistogramProps {
+    name: WebVitalName;
+    buckets: HistogramBucket[];
+    height?: number;
+}
+/**
+ * Histogram visualization for metric distribution
+ */
+export declare const MetricsHistogram: import("react").NamedExoticComponent<MetricsHistogramProps>;
+export {};
+//# sourceMappingURL=metrics-histogram.d.ts.map

package/dist/dev/metrics-histogram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-histogram.d.ts","sourceRoot":"","sources":["../../src/dev/metrics-histogram.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGrE,UAAU,qBAAqB;IAC9B,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,6DA4F3B,CAAA"}

package/dist/dev/metrics-histogram.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { THRESHOLDS, RATING_COLORS } from '../metrics/thresholds';
+/**
+ * Histogram visualization for metric distribution
+ */
+export const MetricsHistogram = memo(function MetricsHistogram({ name, buckets, height = 80, }) {
+    if (buckets.length === 0) {
+        return (_jsx("div", { style: { padding: '20px', textAlign: 'center', color: '#9ca3af', fontSize: '12px' }, children: "No data available" }));
+    }
+    const threshold = THRESHOLDS[name];
+    const maxPercentage = Math.max(...buckets.map((b) => b.percentage), 1);
+    const containerStyle = {
+        padding: '12px',
+    };
+    const titleStyle = {
+        fontSize: '11px',
+        fontWeight: 600,
+        color: '#374151',
+        marginBottom: '8px',
+    };
+    const chartStyle = {
+        display: 'flex',
+        alignItems: 'flex-end',
+        gap: '2px',
+        height: `${height}px`,
+    };
+    const getBarColor = (min) => {
+        if (min < threshold.good)
+            return RATING_COLORS.good.bg;
+        if (min < threshold.poor)
+            return RATING_COLORS['needs-improvement'].bg;
+        return RATING_COLORS.poor.bg;
+    };
+    const getBarBorder = (min) => {
+        if (min < threshold.good)
+            return RATING_COLORS.good.border;
+        if (min < threshold.poor)
+            return RATING_COLORS['needs-improvement'].border;
+        return RATING_COLORS.poor.border;
+    };
+    const labelStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: '9px',
+        color: '#9ca3af',
+        marginTop: '4px',
+    };
+    const formatValue = (val) => {
+        if (threshold.unit === 'score')
+            return val.toFixed(2);
+        return val >= 1000 ? `${(val / 1000).toFixed(1)}s` : `${Math.round(val)}ms`;
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: titleStyle, children: [name, " Distribution"] }), _jsx("div", { style: chartStyle, children: buckets.map((bucket, i) => {
+                    const barHeight = (bucket.percentage / maxPercentage) * height;
+                    const barStyle = {
+                        flex: 1,
+                        height: `${barHeight}px`,
+                        minHeight: bucket.count > 0 ? '4px' : '1px',
+                        backgroundColor: getBarColor(bucket.min),
+                        border: `1px solid ${getBarBorder(bucket.min)}`,
+                        borderRadius: '2px 2px 0 0',
+                        transition: 'height 0.2s ease',
+                    };
+                    return (_jsx("div", { style: barStyle, title: `${formatValue(bucket.min)} - ${formatValue(bucket.max)}: ${bucket.count} (${bucket.percentage.toFixed(1)}%)` }, i));
+                }) }), _jsxs("div", { style: labelStyle, children: [_jsx("span", { children: formatValue(buckets[0]?.min ?? 0) }), _jsx("span", { children: formatValue(buckets[buckets.length - 1]?.max ?? 0) })] })] }));
+});
+//# sourceMappingURL=metrics-histogram.js.map

package/dist/dev/metrics-histogram.js.map

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

package/dist/dev/metrics-panel.d.ts

@@ -0,0 +1,10 @@
+interface MetricsPanelProps {
+    /** Enable Web Vitals collection when panel is open */
+    captureWebVitals?: boolean;
+}
+/**
+ * Panel for displaying Core Web Vitals and Route Metrics
+ */
+export declare const MetricsPanel: import("react").NamedExoticComponent<MetricsPanelProps>;
+export {};
+//# sourceMappingURL=metrics-panel.d.ts.map

package/dist/dev/metrics-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-panel.d.ts","sourceRoot":"","sources":["../../src/dev/metrics-panel.tsx"],"names":[],"mappings":"AAUA,UAAU,iBAAiB;IAC1B,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,yDAkJvB,CAAA"}

package/dist/dev/metrics-panel.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useWebVitalsData, useWebVitalsSummary } from '../metrics/hooks/use-web-vitals';
+import { useRouteMetricsData } from '../metrics/hooks/use-route-metrics';
+import { metricsStore } from '../metrics/store';
+import { MetricsCard } from './metrics-card';
+import { MetricsHistogram } from './metrics-histogram';
+/**
+ * Panel for displaying Core Web Vitals and Route Metrics
+ */
+export const MetricsPanel = memo(function MetricsPanel({ captureWebVitals = true, }) {
+    const vitals = useWebVitalsData();
+    const summaries = useWebVitalsSummary();
+    const routeMetrics = useRouteMetricsData();
+    const [selectedVital, setSelectedVital] = useState(null);
+    const containerStyle = {
+        flex: 1,
+        overflow: 'auto',
+        padding: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+    };
+    const sectionTitleStyle = {
+        fontSize: '11px',
+        fontWeight: 600,
+        color: '#6b7280',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        marginBottom: '8px',
+    };
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
+        gap: '8px',
+    };
+    const emptyStyle = {
+        textAlign: 'center',
+        padding: '40px 20px',
+        color: '#9ca3af',
+        fontSize: '12px',
+    };
+    const routeListStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+    };
+    const routeItemStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '8px 10px',
+        backgroundColor: '#f9fafb',
+        borderRadius: '6px',
+        fontSize: '11px',
+    };
+    const routePathStyle = {
+        color: '#374151',
+        fontFamily: 'ui-monospace, SFMono-Regular, monospace',
+    };
+    const routeValueStyle = {
+        color: '#6b7280',
+    };
+    const histogramWrapperStyle = {
+        backgroundColor: '#f9fafb',
+        borderRadius: '8px',
+        marginTop: '8px',
+    };
+    const vitalNames = ['LCP', 'CLS', 'INP', 'TTFB', 'FCP'];
+    const hasVitals = Object.keys(vitals).length > 0;
+    const hasRouteMetrics = routeMetrics.length > 0;
+    if (!hasVitals && !hasRouteMetrics) {
+        return (_jsx("div", { style: containerStyle, children: _jsxs("div", { style: emptyStyle, children: [_jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\uD83D\uDCCA" }), _jsx("div", { style: { fontWeight: 500, marginBottom: '4px' }, children: "No metrics yet" }), _jsxs("div", { style: { opacity: 0.7 }, children: ["Metrics will appear as you navigate the app.", _jsx("br", {}), "Add ", _jsx("code", { children: "<VestigMetrics />" }), " to capture Web Vitals."] })] }) }));
+    }
+    return (_jsxs("div", { style: containerStyle, children: [hasVitals && (_jsxs("div", { children: [_jsx("div", { style: sectionTitleStyle, children: "Core Web Vitals" }), _jsx("div", { style: gridStyle, children: vitalNames.map((name) => {
+                            const latest = vitals[name];
+                            const summary = summaries[name];
+                            if (!latest && !summary)
+                                return null;
+                            return (_jsx("div", { onClick: () => setSelectedVital(selectedVital === name ? null : name), style: { cursor: 'pointer' }, children: _jsx(MetricsCard, { name: name, latest: latest, summary: summary }) }, name));
+                        }) }), selectedVital && (_jsx("div", { style: histogramWrapperStyle, children: _jsx(MetricsHistogram, { name: selectedVital, buckets: metricsStore.getHistogram(selectedVital) }) }))] })), hasRouteMetrics && (_jsxs("div", { children: [_jsx("div", { style: sectionTitleStyle, children: "Route Metrics" }), _jsx("div", { style: routeListStyle, children: routeMetrics.slice(-10).map((metric) => (_jsxs("div", { style: routeItemStyle, children: [_jsx("span", { style: routePathStyle, children: metric.metadata.pathname ?? '/' }), _jsxs("span", { style: routeValueStyle, children: [metric.name === 'hydration' && '🌊 ', metric.name === 'navigation' && '🧭 ', metric.value.toFixed(1), "ms"] })] }, metric.id))) })] }))] }));
+});
+//# sourceMappingURL=metrics-panel.js.map

package/dist/dev/metrics-panel.js.map

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

package/dist/dev/overlay.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Props for VestigDevOverlay
+ */
+export interface VestigDevOverlayProps {
+    /**
+     * Position of the overlay button
+     * @default 'bottom-right'
+     */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * SSE endpoint for server logs
+     * @default '/api/vestig/logs'
+     */
+    endpoint?: string;
+    /**
+     * Keyboard shortcut key (used with Cmd/Ctrl)
+     * @default 'l'
+     */
+    toggleKey?: string;
+    /**
+     * Initial panel size
+     * @default { width: 500, height: 400 }
+     */
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Whether to start with the panel open
+     * @default false
+     */
+    defaultOpen?: boolean;
+}
+/**
+ * Development overlay for real-time log viewing
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { VestigDevOverlay } from '@vestig/next/dev'
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         {children}
+ *         {process.env.NODE_ENV === 'development' && <VestigDevOverlay />}
+ *       </body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ */
+export declare function VestigDevOverlay({ position, endpoint, toggleKey, defaultSize, defaultOpen, }: VestigDevOverlayProps): import("react").ReactPortal | null;
+//# sourceMappingURL=overlay.d.ts.map

package/dist/dev/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/dev/overlay.tsx"],"names":[],"mappings":"AAgBA;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAA;IAEpE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAE/C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,QAAyB,EACzB,QAA6B,EAC7B,SAAe,EACf,WAAyC,EACzC,WAAmB,GACnB,EAAE,qBAAqB,sCA6SvB"}