@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/gadgets/clock/SgClock.js

@@ -1,20 +1,53 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useSgTime } from "./SgTimeProvider";
+import { useSgTimeContext } from "./SgTimeProvider";
 import { useSgClockThemeResolver } from "./themes/provider";
 import { ThemeLayer, resolveTheme } from "./themes/renderTheme";
 import { useDarkFlag } from "./themes/useDarkFlag";
 import { getTheme } from "./themes/registry";
+import { SgFlipDigit } from "../../digits/flip-digit";
+import { SgRoller3DDigit } from "../../digits/roller3d-digit";
+import { SgFadeDigit } from "../../digits/fade-digit";
+import { SgMatrixDigit } from "../../digits/matrix-digit";
+import { SgNeonDigit } from "../../digits/neon-digit";
+import { SgDiscardDigit } from "../../digits/discard-digit";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-function useSecondTick() {
+function useSecondTick(enabled = true) {
     const [, setTick] = React.useState(0);
     React.useEffect(() => {
+        if (!enabled)
+            return;
         const id = window.setInterval(() => setTick((v) => v + 1), 1000);
         return () => window.clearInterval(id);
+    }, [enabled]);
+}
+function parseInitialServerMs(initialServerTime) {
+    if (!initialServerTime)
+        return Date.now();
+    const parsed = Date.parse(initialServerTime);
+    return Number.isFinite(parsed) ? parsed : Date.now();
+}
+function useClockNowMs(initialServerTime) {
+    const ctx = useSgTimeContext();
+    const [seedMs] = React.useState(() => parseInitialServerMs(initialServerTime));
+    const perfStartMsRef = React.useRef(0);
+    const [hydrated, setHydrated] = React.useState(false);
+    React.useEffect(() => {
+        perfStartMsRef.current = performance.now();
+        setHydrated(true);
     }, []);
+    const nowMs = React.useCallback(() => {
+        if (ctx)
+            return ctx.nowMs();
+        if (!hydrated)
+            return seedMs;
+        const delta = performance.now() - perfStartMsRef.current;
+        return seedMs + delta;
+    }, [ctx, hydrated, seedMs]);
+    return { nowMs, hasProvider: Boolean(ctx), providerTick: ctx?.tick ?? 0 };
 }
 function getHmsForTimezone(date, locale, timeZone) {
     const parts = new Intl.DateTimeFormat(locale, {
@@ -49,12 +82,6 @@ function digitalSizeToNumber(size) {
         return 28;
     return 16;
 }
-function getPrevNext(value, min, max) {
-    const range = max - min + 1;
-    const prev = ((value - 1 - min + range) % range) + min;
-    const next = ((value + 1 - min) % range) + min;
-    return { prev, next };
-}
 function buildRange(min, max) {
     const out = [];
     for (let i = min; i <= max; i += 1)
@@ -169,35 +196,10 @@ function renderSegmentText(text, sizePx) {
     });
     return { width, height, nodes };
 }
-function wrapRange(value, start, end) {
-    const size = end - start + 1;
-    const v = ((value - start) % size + size) % size;
-    return start + v;
-}
-function getTimeValue(date, locale, timeZone, mode, smooth) {
-    const { h, m, s } = getHmsForTimezone(date, locale, timeZone);
-    const ms = date.getMilliseconds();
-    if (mode === "hours") {
-        if (!smooth)
-            return { base: h, frac: 0 };
-        const value = h + m / 60 + s / 3600;
-        return { base: Math.floor(value), frac: value - Math.floor(value) };
-    }
-    if (mode === "minutes") {
-        if (!smooth)
-            return { base: m, frac: 0 };
-        const value = m + s / 60;
-        return { base: Math.floor(value), frac: value - Math.floor(value) };
-    }
-    if (!smooth)
-        return { base: s, frac: 0 };
-    const value = s + ms / 1000;
-    return { base: Math.floor(value), frac: value - Math.floor(value) };
-}
-function AnalogClock({ size = 280, timezone, locale = "pt-BR", showSeconds = true, secondHandMode = "step", themeId = "classic", theme, className, centerOverlay }) {
-    const { tick, nowMs } = useSgTime();
-    void tick;
-    useSecondTick();
+function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR", showSeconds = true, secondHandMode = "step", themeId = "classic", theme, className, centerOverlay }) {
+    const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
+    void providerTick;
+    useSecondTick(!hasProvider);
     const resolver = useSgClockThemeResolver();
     const dark = useDarkFlag();
     const date = new Date(nowMs());
@@ -211,76 +213,10 @@ function AnalogClock({ size = 280, timezone, locale = "pt-BR", showSeconds = tru
         (resolver ? resolveTheme(resolver, themeId, "classic") : getTheme(themeId) ?? getTheme("classic"));
     return (_jsx("div", { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: "block", "aria-label": "Analog clock", children: [_jsx("g", { id: "theme", children: themeObj ? _jsx(ThemeLayer, { theme: themeObj, args: { size, dark } }) : null }), _jsxs("g", { id: "hands", children: [_jsx("g", { transform: `rotate(${hourDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "28", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "2.6", strokeLinecap: "round" }) }), _jsx("g", { transform: `rotate(${minDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "18", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "1.7", strokeLinecap: "round" }) }), showSeconds && (_jsx("g", { transform: `rotate(${secDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "54", x2: "50", y2: "14", className: "stroke-rose-500", strokeWidth: "0.9", strokeLinecap: "round" }) }))] }), _jsx("circle", { cx: "50", cy: "50", r: "2.2", className: "fill-neutral-800 dark:fill-neutral-200" }), showSeconds ? _jsx("circle", { cx: "50", cy: "50", r: "1.1", className: "fill-rose-500" }) : null, centerOverlay ? (_jsx("foreignObject", { x: "35", y: "35", width: "30", height: "30", children: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: centerOverlay }) })) : null] }) }));
 }
-function FlipDigitCard({ ch, w, h, digitFont }) {
-    const prevRef = React.useRef(ch);
-    const [prev, setPrev] = React.useState(ch);
-    const [flip, setFlip] = React.useState(false);
-    const [animKey, setAnimKey] = React.useState(0);
-    React.useEffect(() => {
-        if (ch === prevRef.current)
-            return;
-        setPrev(prevRef.current);
-        setFlip(false);
-        const raf = window.requestAnimationFrame(() => {
-            setAnimKey((v) => v + 1);
-            setFlip(true);
-        });
-        const id = window.setTimeout(() => {
-            setFlip(false);
-            prevRef.current = ch;
-        }, 1200);
-        return () => {
-            window.cancelAnimationFrame(raf);
-            window.clearTimeout(id);
-        };
-    }, [ch]);
-    const panel = "relative overflow-hidden rounded-lg bg-neutral-900 text-white shadow-[0_10px_24px_rgba(0,0,0,0.4)]";
-    const seam = "absolute left-0 right-0 top-1/2 z-10 h-[3px] bg-gradient-to-b from-black/70 to-transparent shadow-[0_3px_8px_rgba(0,0,0,0.7),0_-2px_6px_rgba(255,255,255,0.25)]";
-    const half = "absolute left-0 w-full overflow-hidden";
-    const glossTop = "before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/10 before:to-transparent before:content-['']";
-    const glossBottom = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/30 after:to-transparent after:content-['']";
-    return (_jsxs("div", { className: cn(panel, glossTop, glossBottom), style: { width: w, height: h, transformStyle: "preserve-3d", perspective: "1000px" }, children: [_jsx("div", { className: seam }), _jsx("div", { className: cn(half, "top-0"), style: { height: h / 2 }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
-                        fontSize: digitFont,
-                        lineHeight: 1,
-                        width: "100%",
-                        height: h,
-                        top: 0,
-                        left: 0
-                    }, children: flip ? prev : ch }) }), _jsx("div", { className: cn(half, "bottom-0"), style: { height: h / 2 }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
-                        fontSize: digitFont,
-                        lineHeight: 1,
-                        width: "100%",
-                        height: h,
-                        top: `-${h / 2}px`,
-                        left: 0
-                    }, children: ch }) }), flip ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-0 top-0 z-20 w-full overflow-hidden rounded-t-lg", style: { height: h / 2 }, children: _jsx("div", { className: "flip-top", style: {
-                                transformOrigin: "center bottom",
-                                height: "100%",
-                                width: "100%"
-                            }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
-                                    fontSize: digitFont,
-                                    lineHeight: 1,
-                                    width: "100%",
-                                    height: h,
-                                    top: 0,
-                                    left: 0
-                                }, children: prev }) }, `top-${animKey}`) }), _jsx("div", { className: "absolute bottom-0 left-0 z-20 w-full overflow-hidden rounded-b-lg", style: { height: h / 2 }, children: _jsx("div", { className: "flip-bottom", style: {
-                                transformOrigin: "center top",
-                                height: "100%",
-                                width: "100%"
-                            }, children: _jsx("div", { className: "absolute flex items-center justify-center font-bold font-mono", style: {
-                                    fontSize: digitFont,
-                                    lineHeight: 1,
-                                    width: "100%",
-                                    height: h,
-                                    top: `-${h / 2}px`,
-                                    left: 0
-                                }, children: ch }) }, `bottom-${animKey}`) })] })) : null] }));
-}
-function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className }) {
-    const { tick, nowMs } = useSgTime();
-    void tick;
-    useSecondTick();
+function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className }) {
+    const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
+    void providerTick;
+    useSecondTick(!hasProvider);
     const d = new Date(nowMs());
     const parts = new Intl.DateTimeFormat(locale, {
         timeZone: timezone,
@@ -302,6 +238,7 @@ function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds
     const classSize = sizeToClass(size);
     const fontSize = typeof size === "number" ? { fontSize: `${size}px`, lineHeight: 1 } : undefined;
     const sizePx = digitalSizeToNumber(size);
+    const withPeriod = format === "12h" && dayPeriod ? `${text} ${dayPeriod.toUpperCase()}` : text;
     if (digitalStyle === "flip") {
         const hNum = Number.parseInt(hour, 10) || 0;
         const mNum = Number.parseInt(minute, 10) || 0;
@@ -310,55 +247,17 @@ function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds
         const hh = String(safeHour).padStart(2, "0");
         const mm = String(mNum).padStart(2, "0");
         const ss = String(sNum).padStart(2, "0");
-        const w = Math.round(sizePx * 1.62);
-        const h = Math.round(sizePx * 2.35);
+        // fontSize drives all sizing in SgFlipDigit/@pqina/flip
         const digitFont = Math.round(sizePx * 1.4);
-        const panel = "relative overflow-hidden rounded-lg bg-neutral-900 text-white shadow-[0_10px_24px_rgba(0,0,0,0.4)]";
-        const glossTop = "before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/10 before:to-transparent before:content-['']";
-        const glossBottom = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/30 after:to-transparent after:content-['']";
-        const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center", style: { height: h }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-white/80" }), _jsx("div", { className: "mt-2 h-2 w-2 rounded-full bg-white/80" })] }));
-        const PeriodCell = ({ value }) => (_jsx("div", { className: cn(panel, glossTop, glossBottom, "flex items-center justify-center"), style: { width: Math.round(w * 1.35), height: h }, children: _jsx("span", { className: "font-semibold text-white/90", style: { fontSize: Math.round(sizePx * 1.05), lineHeight: 1 }, children: value }) }));
-        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-label": "Digital clock", children: [_jsx("style", { children: `
-          .flip-top {
-            background: #1a1a1a;
-            border-radius: 8px 8px 0 0;
-            animation: sgFlipTop 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
-            backface-visibility: hidden;
-            transform-style: preserve-3d;
-            will-change: transform;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
-          }
-          .flip-bottom {
-            background: #1a1a1a;
-            border-radius: 0 0 8px 8px;
-            animation: sgFlipBottom 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
-            animation-delay: 0.6s;
-            backface-visibility: hidden;
-            transform-style: preserve-3d;
-            will-change: transform;
-            box-shadow: 0 -2px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2);
-          }
-          @keyframes sgFlipTop {
-            0% {
-              transform: rotateX(0deg);
-              z-index: 30;
-            }
-            100% {
-              transform: rotateX(-180deg);
-              z-index: 5;
-            }
-          }
-          @keyframes sgFlipBottom {
-            0% {
-              transform: rotateX(180deg);
-              z-index: 5;
-            }
-            100% {
-              transform: rotateX(0deg);
-              z-index: 30;
-            }
-          }
-        ` }), _jsx(FlipDigitCard, { ch: hh.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: hh.charAt(1), w: w, h: h, digitFont: digitFont }), _jsx(Colon, {}), _jsx(FlipDigitCard, { ch: mm.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: mm.charAt(1), w: w, h: h, digitFont: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(FlipDigitCard, { ch: ss.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: ss.charAt(1), w: w, h: h, digitFont: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
+        // Approx card height: fontSize * line-height(1.4) from the library CSS
+        const cardH = Math.round(digitFont * 1.4);
+        const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2", style: { height: cardH }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-[#edebeb]/80" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-[#edebeb]/80" })] }));
+        const PeriodCell = ({ value }) => (_jsx("div", { className: "flex items-center justify-center rounded bg-[#333232]", style: {
+                height: cardH,
+                padding: `0 ${Math.round(sizePx * 0.4)}px`,
+                boxShadow: "0 .125em .3125em rgba(0,0,0,.25)",
+            }, children: _jsx("span", { style: { fontSize: Math.round(sizePx * 0.9), color: "#edebeb", fontWeight: 700, lineHeight: 1 }, children: value }) }));
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-label": "Digital clock", children: [_jsx(SgFlipDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFlipDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFlipDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
     }
     if (digitalStyle === "roller3d") {
         const hNum = Number.parseInt(hour, 10) || 0;
@@ -367,29 +266,61 @@ function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds
         const hourMax = format === "12h" ? 12 : 23;
         const hourMin = format === "12h" ? 1 : 0;
         const safeHour = format === "12h" ? (hNum === 0 ? 12 : hNum) : hNum;
-        const hours = buildRange(hourMin, hourMax);
-        const minutes = buildRange(0, 59);
-        const seconds = buildRange(0, 59);
-        const periodList = ["AM", "PM"];
-        const w = Math.round(sizePx * 2.8);
-        const h = Math.round(sizePx * 3.6);
-        const itemH = Math.round(sizePx * 1.6);
-        const glow = "shadow-[inset_0_0_28px_rgba(0,0,0,0.08),0_8px_28px_rgba(0,0,0,0.12)]";
-        const face = "relative overflow-hidden rounded-2xl bg-white text-neutral-900 ring-1 ring-black/5";
-        const topShade = "before:absolute before:inset-0 before:bg-gradient-to-b before:from-black/6 before:to-transparent before:content-['']";
-        const bottomShade = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/12 after:to-transparent after:content-['']";
-        const divider = "absolute left-0 right-0 top-1/2 h-px bg-red-500/70";
-        const mask = "[mask-image:linear-gradient(to_bottom,transparent,black_22%,black_78%,transparent)]";
-        const renderRoll = (list, value, pad = 2) => {
-            const idx = typeof value === "string" ? list.indexOf(value) : list.indexOf(value);
-            const translateY = -idx * itemH + h / 2 - itemH / 2;
-            return (_jsxs("div", { className: cn("relative", glow, face, topShade, bottomShade), style: { width: w, height: h }, children: [_jsx("div", { className: divider }), _jsx("div", { className: cn("absolute left-0 top-0 w-full transition-transform duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]", mask), style: { transform: `translateY(${translateY}px)` }, children: list.map((v, i) => (_jsx("div", { className: "flex h-[var(--sg-roll-h)] items-center justify-center font-medium tabular-nums text-neutral-400", style: {
-                                height: itemH,
-                                fontSize: Math.round(sizePx * 1.35),
-                                color: i === idx ? "rgb(30 30 34)" : "rgb(163 163 170)"
-                            }, children: typeof v === "number" ? String(v).padStart(pad, "0") : v }, `${v}-${i}`))) })] }));
+        const hourItems = buildRange(hourMin, hourMax).map((n) => String(n).padStart(2, "0"));
+        const minuteItems = buildRange(0, 59).map((n) => String(n).padStart(2, "0"));
+        const secondItems = buildRange(0, 59).map((n) => String(n).padStart(2, "0"));
+        const periodItems = ["AM", "PM"];
+        const digitFont = Math.round(sizePx * 1.35);
+        const hh = String(safeHour).padStart(2, "0");
+        const mm = String(mNum).padStart(2, "0");
+        const ss = String(sNum).padStart(2, "0");
+        return (_jsxs("div", { className: cn("flex items-center gap-4", className), style: fontSize, "aria-label": "Digital clock", children: [_jsx(SgRoller3DDigit, { value: hh, items: hourItems, fontSize: digitFont }), _jsx(SgRoller3DDigit, { value: mm, items: minuteItems, fontSize: digitFont }), showSeconds ? _jsx(SgRoller3DDigit, { value: ss, items: secondItems, fontSize: digitFont }) : null, format === "12h" && dayPeriod ? (_jsx(SgRoller3DDigit, { value: dayPeriod.toUpperCase(), items: periodItems, fontSize: digitFont })) : null] }));
+    }
+    if (digitalStyle === "fade") {
+        const hNum = Number.parseInt(hour, 10) || 0;
+        const mNum = Number.parseInt(minute, 10) || 0;
+        const sNum = Number.parseInt(second || "0", 10) || 0;
+        const safeHour = format === "12h" ? (hNum === 0 ? 12 : hNum) : hNum;
+        const hh = String(safeHour).padStart(2, "0");
+        const mm = String(mNum).padStart(2, "0");
+        const ss = String(sNum).padStart(2, "0");
+        const digitFont = Math.round(sizePx * 1.35);
+        const cardH = Math.round(digitFont * 1.4);
+        const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2", style: { height: cardH }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-neutral-500/70" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-neutral-500/70" })] }));
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-label": "Digital clock", children: [_jsx(SgFadeDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFadeDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFadeDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFadeDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? (_jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: dayPeriod.toUpperCase() })) : null] }));
+    }
+    if (digitalStyle === "discard") {
+        const hNum = Number.parseInt(hour, 10) || 0;
+        const mNum = Number.parseInt(minute, 10) || 0;
+        const sNum = Number.parseInt(second || "0", 10) || 0;
+        const safeHour = format === "12h" ? (hNum === 0 ? 12 : hNum) : hNum;
+        const hh = String(safeHour).padStart(2, "0");
+        const mm = String(mNum).padStart(2, "0");
+        const ss = String(sNum).padStart(2, "0");
+        const digitFont = typeof size === "number"
+            ? Math.max(36, Math.round(sizePx * 2.2))
+            : size === "sm"
+                ? 38
+                : size === "lg"
+                    ? 56
+                    : 44;
+        const pagesForDigit = (digit) => {
+            const n = Number.parseInt(digit, 10);
+            if (!Number.isFinite(n))
+                return 1;
+            return Math.max(1, Math.min(30, n));
         };
-        return (_jsxs("div", { className: cn("flex items-center gap-4", className), style: fontSize, "aria-label": "Digital clock", children: [renderRoll(hours, safeHour), renderRoll(minutes, mNum), showSeconds ? renderRoll(seconds, sNum) : null, format === "12h" && dayPeriod ? renderRoll(periodList, dayPeriod.toUpperCase(), 0) : null] }));
+        const Colon = () => (_jsx(SgDiscardDigit, { value: ":", fontSize: Math.max(26, Math.round(digitFont * 0.72)), totalNumberPages: 1, transitionMs: 560, animateOnChange: false }));
+        const PeriodCell = ({ value }) => (_jsx(SgDiscardDigit, { value: value, fontSize: Math.max(20, Math.round(digitFont * 0.52)), totalNumberPages: 1, transitionMs: 560, animateOnChange: false }));
+        return (_jsxs("div", { className: cn("flex items-end gap-2", className), "aria-label": "Digital clock", children: [_jsx(SgDiscardDigit, { value: hh.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(hh.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: hh.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(hh.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(Colon, {}), _jsx(SgDiscardDigit, { value: mm.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(mm.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: mm.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(mm.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgDiscardDigit, { value: ss.charAt(0), fontSize: digitFont, totalNumberPages: pagesForDigit(ss.charAt(0)), transitionMs: 560, changeAnimationMode: "incoming" }), _jsx(SgDiscardDigit, { value: ss.charAt(1), fontSize: digitFont, totalNumberPages: pagesForDigit(ss.charAt(1)), transitionMs: 560, changeAnimationMode: "incoming" })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
+    }
+    if (digitalStyle === "matrix") {
+        const dotSize = Math.max(3, Math.round(sizePx * 0.32));
+        return (_jsx("div", { className: cn("flex items-center", className), "aria-label": "Digital clock", children: _jsx(SgMatrixDigit, { value: withPeriod, dotSize: dotSize, gap: Math.max(1, Math.round(dotSize * 0.35)), charGap: Math.max(3, Math.round(dotSize * 0.9)), padding: Math.max(6, Math.round(dotSize * 1.3)), rounded: Math.max(8, Math.round(dotSize * 1.1)) }) }));
+    }
+    if (digitalStyle === "neon") {
+        const neonFont = Math.max(18, Math.round(sizePx * 1.35));
+        return (_jsx("div", { className: cn("flex items-center", className), "aria-label": "Digital clock", children: _jsx(SgNeonDigit, { value: withPeriod, fontSize: neonFont, padding: Math.max(8, Math.round(sizePx * 0.6)), rounded: Math.max(10, Math.round(sizePx * 0.45)) }) }));
     }
     if (digitalStyle === "segment") {
         const seg = renderSegmentText(text, sizePx);
@@ -398,10 +329,10 @@ function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds
     return (_jsxs("div", { className: cn("font-mono tabular-nums", classSize, className), style: fontSize, children: [text, format === "12h" && dayPeriod ? (_jsx("span", { className: "ml-2 align-top text-xs font-semibold text-muted-foreground", children: dayPeriod })) : null] }));
 }
 export function SgClock(props) {
-    const { variant = "digital", size = "md", timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", themeId = "classic", theme, className, centerOverlay } = props;
+    const { variant = "digital", size = "md", initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, digitalStyle = "default", secondHandMode = "step", themeId = "classic", theme, className, centerOverlay } = props;
     if (variant === "analog") {
         const analogSize = typeof size === "number" ? size : size === "sm" ? 140 : size === "lg" ? 320 : 240;
-        return (_jsx(AnalogClock, { size: analogSize, themeId: themeId, theme: theme, timezone: timezone, locale: locale, showSeconds: showSeconds, secondHandMode: secondHandMode, className: className, centerOverlay: centerOverlay }));
+        return (_jsx(AnalogClock, { size: analogSize, initialServerTime: initialServerTime, themeId: themeId, theme: theme, timezone: timezone, locale: locale, showSeconds: showSeconds, secondHandMode: secondHandMode, className: className, centerOverlay: centerOverlay }));
     }
-    return (_jsx(DigitalClock, { timezone: timezone, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className }));
+    return (_jsx(DigitalClock, { timezone: timezone, initialServerTime: initialServerTime, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className }));
 }

package/dist/gadgets/clock/SgTimeProvider.d.ts

@@ -5,6 +5,7 @@ export type SgTimeContextValue = {
     tick: number;
     nowMs: () => number;
 };
+export declare function useSgTimeContext(): SgTimeContextValue | null;
 export declare function useSgTime(): SgTimeContextValue;
 export declare function SgTimeProvider({ initialServerTime, children }: {
     initialServerTime: string;

package/dist/gadgets/clock/SgTimeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgTimeProvider.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgTimeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,MAAM,CAAC;CACrB,CAAC;AAIF,wBAAgB,SAAS,uBAIxB;AAED,wBAAgB,cAAc,CAAC,EAC7B,iBAAiB,EACjB,QAAQ,EACT,EAAE;IACD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAyCA"}
+{"version":3,"file":"SgTimeProvider.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgTimeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,MAAM,CAAC;CACrB,CAAC;AAIF,wBAAgB,gBAAgB,8BAE/B;AAED,wBAAgB,SAAS,uBAYxB;AAED,wBAAgB,cAAc,CAAC,EAC7B,iBAAiB,EACjB,QAAQ,EACT,EAAE;IACD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAyCA"}

package/dist/gadgets/clock/SgTimeProvider.js

@@ -2,11 +2,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 const SgTimeContext = React.createContext(null);
+export function useSgTimeContext() {
+    return React.useContext(SgTimeContext);
+}
 export function useSgTime() {
-    const ctx = React.useContext(SgTimeContext);
-    if (!ctx)
-        throw new Error("useSgTime must be used within <SgTimeProvider />");
-    return ctx;
+    const ctx = useSgTimeContext();
+    const localFallback = React.useMemo(() => ({
+        serverStartMs: Date.now(),
+        perfStartMs: 0,
+        tick: 0,
+        nowMs: () => Date.now()
+    }), []);
+    return ctx ?? localFallback;
 }
 export function SgTimeProvider({ initialServerTime, children }) {
     const serverStartMsRef = React.useRef(Date.parse(initialServerTime));

package/dist/gadgets/gauge/SgLinearGauge.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+export type SgLinearGaugeRange = {
+    start: number;
+    end: number;
+    color?: string;
+    thickness?: number;
+    opacity?: number;
+    label?: React.ReactNode;
+};
+export type SgLinearGaugePointerShape = "triangle" | "inverted-triangle" | "circle" | "diamond" | "rect";
+export type SgLinearGaugePointer = {
+    id?: string;
+    value: number;
+    color?: string;
+    size?: number;
+    shape?: SgLinearGaugePointerShape;
+    draggable?: boolean;
+    onValueChange?: (value: number) => void;
+    label?: React.ReactNode;
+};
+export type SgLinearGaugeProps = {
+    min?: number;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    pointers?: SgLinearGaugePointer[];
+    onPointerValueChange?: (pointerId: string, value: number, pointer: SgLinearGaugePointer) => void;
+    ranges?: SgLinearGaugeRange[];
+    orientation?: "horizontal" | "vertical";
+    isAxisInversed?: boolean;
+    showPrimaryPointer?: boolean;
+    primaryPointerShape?: SgLinearGaugePointerShape;
+    primaryPointerColor?: string;
+    primaryPointerSize?: number;
+    primaryPointerDraggable?: boolean;
+    barPointer?: boolean;
+    barColor?: string;
+    barThickness?: number;
+    showTicks?: boolean;
+    showLabels?: boolean;
+    majorTickCount?: number;
+    minorTicksPerInterval?: number;
+    labelFormatter?: (value: number) => React.ReactNode;
+    axisColor?: string;
+    axisThickness?: number;
+    width?: number;
+    height?: number;
+    animate?: boolean;
+    animationDuration?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    ariaLabel?: string;
+};
+export declare function SgLinearGauge(props: Readonly<SgLinearGaugeProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgLinearGauge {
+    var displayName: string;
+}
+//# sourceMappingURL=SgLinearGauge.d.ts.map

package/dist/gadgets/gauge/SgLinearGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgLinearGauge.d.ts","sourceRoot":"","sources":["../../../src/gadgets/gauge/SgLinearGauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,UAAU,GACV,mBAAmB,GACnB,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEjG,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAEpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAogBhE;yBApgBe,aAAa"}