@teo-garcia/react-shared 1.2.0 → 1.2.1

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

@@ -1,30 +1,27 @@
 import { type ReactNode } from 'react';
 export interface DevPanelProps {
     /**
-     * Tailwind breakpoint map. Defaults to standard Tailwind v3/v4 breakpoints.
+     * Tailwind breakpoint map. Defaults to standard Tailwind v4 breakpoints.
      * Pass your own if you've customized the theme.
      */
     breakpoints?: Record<string, number>;
     /** Additional debug content rendered inside the panel. */
     children?: ReactNode;
-    /** Corner to anchor the panel to. Defaults to `'bottom-left'`. */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /**
      * Keyboard shortcut to toggle the panel.
      * Format: modifier keys joined by `+`, then the key. Defaults to `'shift+d'`.
-     * Examples: `'shift+d'`, `'ctrl+shift+d'`, `'alt+d'`.
      */
     shortcut?: string;
 }
 /**
- * Fixed overlay showing the current Tailwind breakpoint, viewport dimensions,
- * and color scheme. Dev-only — renders nothing in production.
+ * Fixed bottom-center overlay showing the current Tailwind breakpoint, viewport
+ * dimensions, and color scheme. Dev-only — renders nothing in production.
  *
- * Much better than raw px — shows the named breakpoint (`lg`) so you immediately
- * know which Tailwind classes are active, not just "1124px".
+ * Positioned at bottom-center to avoid clashing with Next.js (top-left) and
+ * TanStack devtools (bottom-right). Collapses to a compact pill on close.
  *
- * Pass children to add custom debug rows (route, user, feature flags, etc.).
- * Toggle visibility with the keyboard shortcut (default: Shift+D).
+ * Pass `children` to add custom debug rows (route, user ID, feature flags…).
+ * Toggle with the keyboard shortcut (default: Shift+D).
  */
 export declare function DevPanel(props: DevPanelProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=dev-panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dev-panel.d.ts","sourceRoot":"","sources":["../../../src/components/dev-panel/dev-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAA;AAwC/E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IACpE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA0LD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDAG5C"}
+{"version":3,"file":"dev-panel.d.ts","sourceRoot":"","sources":["../../../src/components/dev-panel/dev-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAA;AAiC/E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA8MD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDAG5C"}

package/dist/components/dev-panel/dev-panel.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 const DEFAULT_BREAKPOINTS = {
     sm: 640,
@@ -8,12 +8,6 @@ const DEFAULT_BREAKPOINTS = {
     xl: 1280,
     '2xl': 1536,
 };
-const POSITION_STYLES = {
-    'top-left': { top: '0.75rem', left: '0.75rem' },
-    'top-right': { top: '0.75rem', right: '0.75rem' },
-    'bottom-left': { bottom: '0.75rem', left: '0.75rem' },
-    'bottom-right': { bottom: '0.75rem', right: '0.75rem' },
-};
 function resolveBreakpoint(width, breakpoints) {
     const sorted = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
     for (const [name, min] of sorted) {
@@ -31,7 +25,31 @@ function matchShortcut(e, shortcut) {
         e.ctrlKey === parts.includes('ctrl') &&
         e.altKey === parts.includes('alt'));
 }
-function DevPanelInner({ breakpoints = DEFAULT_BREAKPOINTS, children, position = 'bottom-left', shortcut = 'shift+d', }) {
+const PILL_BASE = {
+    position: 'fixed',
+    bottom: '1rem',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 9999,
+    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Mono", monospace',
+    fontSize: '0.7rem',
+    lineHeight: 1,
+    background: 'rgba(9, 9, 11, 0.88)',
+    border: '1px solid rgba(255, 255, 255, 0.08)',
+    borderRadius: '9999px',
+    backdropFilter: 'blur(12px)',
+    WebkitBackdropFilter: 'blur(12px)',
+    boxShadow: '0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04)',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+};
+const DIVIDER = {
+    width: '1px',
+    height: '0.7rem',
+    background: 'rgba(255,255,255,0.1)',
+    flexShrink: 0,
+};
+function DevPanelInner({ breakpoints = DEFAULT_BREAKPOINTS, children, shortcut = 'shift+d', }) {
     const [open, setOpen] = useState(true);
     const [viewport, setViewport] = useState({ w: 0, h: 0 });
     const [dark, setDark] = useState(false);
@@ -43,7 +61,6 @@ function DevPanelInner({ breakpoints = DEFAULT_BREAKPOINTS, children, position =
         }
         update();
         window.addEventListener('resize', update);
-        // Watch for class changes on <html> (Tailwind dark mode toggle)
         const observer = new MutationObserver(update);
         observer.observe(document.documentElement, {
             attributes: true,
@@ -67,86 +84,55 @@ function DevPanelInner({ breakpoints = DEFAULT_BREAKPOINTS, children, position =
         ...Object.entries(breakpoints).sort(([, a], [, b]) => a - b),
     ];
     const current = resolveBreakpoint(viewport.w, breakpoints);
-    const base = {
-        position: 'fixed',
-        ...POSITION_STYLES[position],
-        zIndex: 9999,
-        fontFamily: 'ui-monospace, monospace',
-        fontSize: '0.72rem',
-        backdropFilter: 'blur(10px)',
-        WebkitBackdropFilter: 'blur(10px)',
-    };
     if (!open) {
-        return (_jsx("button", { onClick: () => setOpen(true), title: `Dev Panel (${shortcut})`, style: {
-                ...base,
-                background: 'rgba(15,15,15,0.88)',
-                color: '#06b6d4',
-                border: '1px solid rgba(255,255,255,0.08)',
-                borderRadius: '6px',
-                padding: '0.2rem 0.5rem',
+        return (_jsxs("button", { onClick: () => setOpen(true), title: `Dev Panel (${shortcut})`, style: {
+                ...PILL_BASE,
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.3rem',
+                padding: '0.35rem 0.6rem',
                 cursor: 'pointer',
-                lineHeight: 1.5,
-            }, children: current }));
+                color: 'rgba(255,255,255,0.45)',
+            }, children: [_jsx("span", { "aria-hidden": true, style: { color: '#38bdf8', fontSize: '0.45rem', lineHeight: 1 }, children: "\u25CF" }), _jsx("span", { style: {
+                        color: '#e2e8f0',
+                        fontWeight: 600,
+                        letterSpacing: '0.05em',
+                    }, children: current })] }));
     }
     return (_jsxs("div", { style: {
-            ...base,
-            background: 'rgba(12,12,12,0.93)',
-            color: '#cbd5e1',
-            border: '1px solid rgba(255,255,255,0.07)',
-            borderRadius: '10px',
-            padding: '0.6rem 0.75rem',
-            lineHeight: 1.7,
-            minWidth: '13rem',
-            boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
-            userSelect: 'none',
-        }, children: [_jsx("button", { onClick: () => setOpen(false), title: 'Close', style: {
-                    position: 'absolute',
-                    top: '0.3rem',
-                    right: '0.45rem',
+            ...PILL_BASE,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.55rem',
+            padding: '0.4rem 0.65rem 0.4rem 0.7rem',
+        }, children: [_jsx("span", { "aria-hidden": true, style: { color: '#38bdf8', fontSize: '0.45rem', lineHeight: 1 }, children: "\u25CF" }), _jsx("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.3rem' }, children: allBreakpoints.map(([name]) => (_jsx("span", { style: {
+                        color: name === current ? '#e2e8f0' : 'rgba(255,255,255,0.18)',
+                        fontWeight: name === current ? 600 : 400,
+                        fontSize: name === current ? '0.72rem' : '0.67rem',
+                        letterSpacing: name === current ? '0.05em' : '0.02em',
+                    }, children: name }, name))) }), _jsx("div", { style: DIVIDER }), _jsxs("span", { style: { color: 'rgba(255,255,255,0.3)', letterSpacing: '0.02em' }, children: [viewport.w, _jsx("span", { style: { color: 'rgba(255,255,255,0.12)', margin: '0 0.15rem' }, children: "\u00D7" }), viewport.h] }), _jsx("div", { style: DIVIDER }), _jsx("span", { title: dark ? 'dark mode' : 'light mode', style: { color: 'rgba(255,255,255,0.3)', fontSize: '0.65rem' }, children: dark ? '◑' : '◯' }), children && (_jsxs(_Fragment, { children: [_jsx("div", { style: DIVIDER }), _jsx("div", { style: {
+                            color: 'rgba(255,255,255,0.28)',
+                            fontSize: '0.68rem',
+                        }, children: children })] })), _jsx("div", { style: DIVIDER }), _jsxs("span", { style: { color: 'rgba(255,255,255,0.15)', fontSize: '0.65rem' }, children: [shortcut, " to toggle"] }), _jsx("button", { onClick: () => setOpen(false), title: 'Close', style: {
                     background: 'none',
                     border: 'none',
-                    color: '#475569',
+                    color: 'rgba(255,255,255,0.2)',
                     cursor: 'pointer',
-                    fontSize: '0.65rem',
+                    fontSize: '0.58rem',
                     lineHeight: 1,
-                    padding: 0,
-                }, children: "\u2715" }), _jsx("div", { style: {
-                    display: 'flex',
-                    gap: '0.4rem',
-                    alignItems: 'baseline',
-                    marginBottom: '0.1rem',
-                }, children: allBreakpoints.map(([name]) => (_jsx("span", { style: {
-                        color: name === current ? '#06b6d4' : '#334155',
-                        fontWeight: name === current ? 700 : 400,
-                        fontSize: name === current ? '0.78rem' : '0.68rem',
-                        letterSpacing: name === current ? '0.02em' : undefined,
-                    }, children: name }, name))) }), _jsxs("div", { style: {
-                    display: 'flex',
-                    gap: '0.75rem',
-                    color: '#475569',
-                    fontSize: '0.68rem',
-                }, children: [_jsxs("span", { children: [viewport.w, " \u00D7 ", viewport.h] }), _jsx("span", { children: dark ? '☾ dark' : '☀ light' })] }), children && (_jsx("div", { style: {
-                    marginTop: '0.4rem',
-                    paddingTop: '0.4rem',
-                    borderTop: '1px solid rgba(255,255,255,0.05)',
-                    color: '#64748b',
-                    fontSize: '0.68rem',
-                    lineHeight: 1.6,
-                }, children: children })), _jsxs("div", { style: {
-                    marginTop: '0.3rem',
-                    color: '#1e293b',
-                    fontSize: '0.6rem',
-                }, children: [shortcut, " to toggle"] })] }));
+                    padding: '0 0 0 0.1rem',
+                    marginLeft: '0.05rem',
+                }, children: "\u2715" })] }));
 }
 /**
- * Fixed overlay showing the current Tailwind breakpoint, viewport dimensions,
- * and color scheme. Dev-only — renders nothing in production.
+ * Fixed bottom-center overlay showing the current Tailwind breakpoint, viewport
+ * dimensions, and color scheme. Dev-only — renders nothing in production.
  *
- * Much better than raw px — shows the named breakpoint (`lg`) so you immediately
- * know which Tailwind classes are active, not just "1124px".
+ * Positioned at bottom-center to avoid clashing with Next.js (top-left) and
+ * TanStack devtools (bottom-right). Collapses to a compact pill on close.
  *
- * Pass children to add custom debug rows (route, user, feature flags, etc.).
- * Toggle visibility with the keyboard shortcut (default: Shift+D).
+ * Pass `children` to add custom debug rows (route, user ID, feature flags…).
+ * Toggle with the keyboard shortcut (default: Shift+D).
  */
 export function DevPanel(props) {
     if (process.env.NODE_ENV === 'production')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teo-garcia/react-shared",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Shared React hooks, utilities, and test helpers for the teo-garcia template portfolio",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,142 +8,177 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
+      "default": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./components": {
       "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js",
       "types": "./dist/components/index.d.ts"
     },
     "./components/error-boundary": {
       "import": "./dist/components/error-boundary/index.js",
+      "default": "./dist/components/error-boundary/index.js",
       "types": "./dist/components/error-boundary/index.d.ts"
     },
     "./components/focus-trap": {
       "import": "./dist/components/focus-trap/index.js",
+      "default": "./dist/components/focus-trap/index.js",
       "types": "./dist/components/focus-trap/index.d.ts"
     },
     "./components/portal": {
       "import": "./dist/components/portal/index.js",
+      "default": "./dist/components/portal/index.js",
       "types": "./dist/components/portal/index.d.ts"
     },
     "./components/skeleton": {
       "import": "./dist/components/skeleton/index.js",
+      "default": "./dist/components/skeleton/index.js",
       "types": "./dist/components/skeleton/index.d.ts"
     },
     "./components/visually-hidden": {
       "import": "./dist/components/visually-hidden/index.js",
+      "default": "./dist/components/visually-hidden/index.js",
       "types": "./dist/components/visually-hidden/index.d.ts"
     },
     "./components/aspect-ratio": {
       "import": "./dist/components/aspect-ratio/index.js",
+      "default": "./dist/components/aspect-ratio/index.js",
       "types": "./dist/components/aspect-ratio/index.d.ts"
     },
     "./components/debug-json": {
       "import": "./dist/components/debug-json/index.js",
+      "default": "./dist/components/debug-json/index.js",
       "types": "./dist/components/debug-json/index.d.ts"
     },
     "./components/dev-panel": {
       "import": "./dist/components/dev-panel/index.js",
+      "default": "./dist/components/dev-panel/index.js",
       "types": "./dist/components/dev-panel/index.d.ts"
     },
     "./components/separator": {
       "import": "./dist/components/separator/index.js",
+      "default": "./dist/components/separator/index.js",
       "types": "./dist/components/separator/index.d.ts"
     },
     "./components/skip-link": {
       "import": "./dist/components/skip-link/index.js",
+      "default": "./dist/components/skip-link/index.js",
       "types": "./dist/components/skip-link/index.d.ts"
     },
     "./hooks": {
       "import": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js",
       "types": "./dist/hooks/index.d.ts"
     },
     "./hooks/use-debounce": {
       "import": "./dist/hooks/use-debounce.js",
+      "default": "./dist/hooks/use-debounce.js",
       "types": "./dist/hooks/use-debounce.d.ts"
     },
     "./hooks/use-isomorphic-layout-effect": {
       "import": "./dist/hooks/use-isomorphic-layout-effect.js",
+      "default": "./dist/hooks/use-isomorphic-layout-effect.js",
       "types": "./dist/hooks/use-isomorphic-layout-effect.d.ts"
     },
     "./hooks/use-local-storage": {
       "import": "./dist/hooks/use-local-storage.js",
+      "default": "./dist/hooks/use-local-storage.js",
       "types": "./dist/hooks/use-local-storage.d.ts"
     },
     "./hooks/use-media-query": {
       "import": "./dist/hooks/use-media-query.js",
+      "default": "./dist/hooks/use-media-query.js",
       "types": "./dist/hooks/use-media-query.d.ts"
     },
     "./hooks/use-on-click-outside": {
       "import": "./dist/hooks/use-on-click-outside.js",
+      "default": "./dist/hooks/use-on-click-outside.js",
       "types": "./dist/hooks/use-on-click-outside.d.ts"
     },
     "./hooks/use-previous": {
       "import": "./dist/hooks/use-previous.js",
+      "default": "./dist/hooks/use-previous.js",
       "types": "./dist/hooks/use-previous.d.ts"
     },
     "./hooks/use-copy-to-clipboard": {
       "import": "./dist/hooks/use-copy-to-clipboard.js",
+      "default": "./dist/hooks/use-copy-to-clipboard.js",
       "types": "./dist/hooks/use-copy-to-clipboard.d.ts"
     },
     "./hooks/use-event-listener": {
       "import": "./dist/hooks/use-event-listener.js",
+      "default": "./dist/hooks/use-event-listener.js",
       "types": "./dist/hooks/use-event-listener.d.ts"
     },
     "./hooks/use-idle": {
       "import": "./dist/hooks/use-idle.js",
+      "default": "./dist/hooks/use-idle.js",
       "types": "./dist/hooks/use-idle.d.ts"
     },
     "./hooks/use-intersection-observer": {
       "import": "./dist/hooks/use-intersection-observer.js",
+      "default": "./dist/hooks/use-intersection-observer.js",
       "types": "./dist/hooks/use-intersection-observer.d.ts"
     },
     "./hooks/use-latest": {
       "import": "./dist/hooks/use-latest.js",
+      "default": "./dist/hooks/use-latest.js",
       "types": "./dist/hooks/use-latest.d.ts"
     },
     "./hooks/use-network-status": {
       "import": "./dist/hooks/use-network-status.js",
+      "default": "./dist/hooks/use-network-status.js",
       "types": "./dist/hooks/use-network-status.d.ts"
     },
     "./hooks/use-render-count": {
       "import": "./dist/hooks/use-render-count.js",
+      "default": "./dist/hooks/use-render-count.js",
       "types": "./dist/hooks/use-render-count.d.ts"
     },
     "./hooks/use-toggle": {
       "import": "./dist/hooks/use-toggle.js",
+      "default": "./dist/hooks/use-toggle.js",
       "types": "./dist/hooks/use-toggle.d.ts"
     },
     "./hooks/use-why-did-you-render": {
       "import": "./dist/hooks/use-why-did-you-render.js",
+      "default": "./dist/hooks/use-why-did-you-render.js",
       "types": "./dist/hooks/use-why-did-you-render.d.ts"
     },
     "./utils": {
       "import": "./dist/utils/index.js",
+      "default": "./dist/utils/index.js",
       "types": "./dist/utils/index.d.ts"
     },
     "./utils/cn": {
       "import": "./dist/utils/cn.js",
+      "default": "./dist/utils/cn.js",
       "types": "./dist/utils/cn.d.ts"
     },
     "./utils/format-date": {
       "import": "./dist/utils/format-date.js",
+      "default": "./dist/utils/format-date.js",
       "types": "./dist/utils/format-date.d.ts"
     },
     "./utils/format-number": {
       "import": "./dist/utils/format-number.js",
+      "default": "./dist/utils/format-number.js",
       "types": "./dist/utils/format-number.d.ts"
     },
     "./utils/truncate": {
       "import": "./dist/utils/truncate.js",
+      "default": "./dist/utils/truncate.js",
       "types": "./dist/utils/truncate.d.ts"
     },
     "./test-utils": {
       "import": "./dist/test-utils/index.js",
+      "default": "./dist/test-utils/index.js",
       "types": "./dist/test-utils/index.d.ts"
     },
     "./types": {
       "import": "./dist/types.js",
+      "default": "./dist/types.js",
       "types": "./dist/types.d.ts"
     }
   },