@polishd/next 0.2.1-dev.1 → 0.2.1-dev.2

package/dist/dashboard/ui.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Polishd — the dashboard's shared visual vocabulary.
+ *
+ * Class strings and small icons used by more than one panel. They lived as
+ * copies in every file until the settings form moved into its own tab and the
+ * copies started to drift; one definition is what keeps the Analytics, Design
+ * and Settings tabs looking like the same product.
+ *
+ * No `"use client"` here on purpose — plain constants and stateless SVG work in
+ * either environment, and the server-rendered panels import them too.
+ */
+export const border = "border-[#2e2e2e]";
+export const card = `border ${border} rounded-lg bg-[#0a0a0a]`;
+export const divider = `border-t ${border}`;
+export const labelCls = "text-[11px] font-medium uppercase tracking-[0.08em] text-[#666]";
+export const inputCls = "w-full rounded-md border border-[#2e2e2e] bg-[#111] px-3 py-2 text-[13px] text-white placeholder:text-[#555] focus:border-[#555] focus:outline-none";
+export const primaryBtn = "rounded-md bg-white px-3 py-1.5 text-[12px] font-medium text-black transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40";
+export const ghostBtn = "rounded-md border border-[#2e2e2e] px-2.5 py-1.5 text-[12px] text-[#aaa] transition-colors hover:border-[#555] hover:text-white disabled:cursor-not-allowed disabled:opacity-40";
+export const iconBtn = "flex h-7 w-7 items-center justify-center rounded-md border border-[#2e2e2e] text-[#aaa] transition-colors hover:border-[#555] hover:text-white disabled:cursor-not-allowed disabled:opacity-40";
+/** "3m ago" — coarse on purpose; these timestamps are context, not data. */
+export function relTime(ms) {
+    const s = Math.max(0, Math.round((Date.now() - ms) / 1000));
+    if (s < 60)
+        return "just now";
+    const m = Math.round(s / 60);
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.round(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    return `${Math.round(h / 24)}d ago`;
+}
+// ── Icons (Feather, inlined) ─────────────────────────────────────────────────
+export function RefreshIcon({ spinning = false }) {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: spinning ? "animate-spin" : undefined, "aria-hidden": true, children: [_jsx("polyline", { points: "23 4 23 10 17 10" }), _jsx("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })] }));
+}
+export function GearIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })] }));
+}
+export function ChartIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }), _jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }), _jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })] }));
+}
+export function DropletIcon() {
+    return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" }) }));
+}
+/** The tab rail's in-flight marker: same 13px box as the icon it replaces. */
+export function SpinnerIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", className: "animate-spin", "aria-hidden": true, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", opacity: "0.25" }), _jsx("path", { d: "M21 12a9 9 0 0 0-9-9" })] }));
+}
+//# sourceMappingURL=ui.js.map

package/dist/dashboard/ui.js.map

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

package/dist/dashboard.css

@@ -117,6 +117,7 @@
     --radius-xl: .75rem;
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   }
@@ -233,6 +234,18 @@
     visibility: visible;
   }
 
+.polishd-root.polishd-root .sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
 .polishd-root.polishd-root .absolute {
     position: absolute;
   }
@@ -559,6 +572,10 @@
     height: calc(var(--spacing) * 5);
   }
 
+.polishd-root.polishd-root .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
 .polishd-root.polishd-root .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -567,10 +584,18 @@
     height: calc(var(--spacing) * 9);
   }
 
+.polishd-root.polishd-root .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
 .polishd-root.polishd-root .h-12 {
     height: calc(var(--spacing) * 12);
   }
 
+.polishd-root.polishd-root .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+
 .polishd-root.polishd-root .h-16 {
     height: calc(var(--spacing) * 16);
   }
@@ -587,6 +612,10 @@
     height: 15px;
   }
 
+.polishd-root.polishd-root .h-\[22px\] {
+    height: 22px;
+  }
+
 .polishd-root.polishd-root .h-\[58px\] {
     height: 58px;
   }
@@ -647,6 +676,10 @@
     width: calc(var(--spacing) * 7);
   }
 
+.polishd-root.polishd-root .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+
 .polishd-root.polishd-root .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -671,6 +704,14 @@
     width: calc(var(--spacing) * 28);
   }
 
+.polishd-root.polishd-root .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+.polishd-root.polishd-root .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
 .polishd-root.polishd-root .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -691,10 +732,18 @@
     width: 52px;
   }
 
+.polishd-root.polishd-root .w-\[68\%\] {
+    width: 68%;
+  }
+
 .polishd-root.polishd-root .w-\[74px\] {
     width: 74px;
   }
 
+.polishd-root.polishd-root .w-\[92\%\] {
+    width: 92%;
+  }
+
 .polishd-root.polishd-root .w-full {
     width: 100%;
   }
@@ -743,6 +792,10 @@
     max-width: 58ch;
   }
 
+.polishd-root.polishd-root .max-w-\[68ch\] {
+    max-width: 68ch;
+  }
+
 .polishd-root.polishd-root .max-w-\[320px\] {
     max-width: 320px;
   }
@@ -755,6 +808,10 @@
     max-width: calc(100vw - 2rem);
   }
 
+.polishd-root.polishd-root .max-w-full {
+    max-width: 100%;
+  }
+
 .polishd-root.polishd-root .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -852,6 +909,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+.polishd-root.polishd-root .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
 .polishd-root.polishd-root .animate-spin {
     animation: var(--animate-spin);
   }
@@ -1006,6 +1067,10 @@
     column-gap: calc(var(--spacing) * 4);
   }
 
+.polishd-root.polishd-root .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
+
 .polishd-root.polishd-root .gap-y-0\.5 {
     row-gap: calc(var(--spacing) * .5);
   }
@@ -1014,6 +1079,14 @@
     row-gap: var(--spacing);
   }
 
+.polishd-root.polishd-root .gap-y-4 {
+    row-gap: calc(var(--spacing) * 4);
+  }
+
+.polishd-root.polishd-root .self-center {
+    align-self: center;
+  }
+
 .polishd-root.polishd-root .self-start {
     align-self: flex-start;
   }
@@ -1380,6 +1453,16 @@
     }
   }
 
+.polishd-root.polishd-root .bg-red-950\/60 {
+    background-color: #46080999;
+  }
+
+@supports (color: color-mix(in lab, red, red)) {
+    .polishd-root.polishd-root .bg-red-950\/60 {
+      background-color: color-mix(in oklab, var(--color-red-950) 60%, transparent);
+    }
+  }
+
 .polishd-root.polishd-root .bg-white {
     background-color: var(--color-white);
   }
@@ -1452,6 +1535,10 @@
     padding-block: calc(var(--spacing) * 3);
   }
 
+.polishd-root.polishd-root .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
+
 .polishd-root.polishd-root .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -1460,6 +1547,10 @@
     padding-block: calc(var(--spacing) * 5);
   }
 
+.polishd-root.polishd-root .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
 .polishd-root.polishd-root .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -1484,6 +1575,10 @@
     padding-block: 13px;
   }
 
+.polishd-root.polishd-root .py-\[18px\] {
+    padding-block: 18px;
+  }
+
 .polishd-root.polishd-root .py-\[76px\] {
     padding-block: 76px;
   }
@@ -1757,6 +1852,11 @@
     line-height: 1.25;
   }
 
+.polishd-root.polishd-root .leading-\[1\.35\] {
+    --tw-leading: 1.35;
+    line-height: 1.35;
+  }
+
 .polishd-root.polishd-root .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2221,6 +2321,12 @@
     }
   }
 
+@media (min-width: 520px) {
+    .polishd-root.polishd-root .min-\[520px\]\:grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+
 @media (min-width: 560px) {
     .polishd-root.polishd-root .min-\[560px\]\:ml-auto {
       margin-left: auto;
@@ -2384,6 +2490,10 @@
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
 
+    .polishd-root.polishd-root .lg\:grid-cols-\[1\.25fr_1fr\] {
+      grid-template-columns: 1.25fr 1fr;
+    }
+
     .polishd-root.polishd-root .lg\:grid-cols-\[1fr_1\.35fr\] {
       grid-template-columns: 1fr 1.35fr;
     }
@@ -2758,3 +2868,9 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polishd/next",
-  "version": "0.2.1-dev.1",
+  "version": "0.2.1-dev.2",
   "description": "Drop-in product analytics for Next.js — capture real user behavioral signals (rage/dead clicks, scroll depth, errors, web vitals) and explore them on a built-in dashboard. What gets measured gets improved.",
   "type": "module",
   "license": "MIT",