@seedgrid/fe-components 0.2.4

package/dist/gadgets/clock/themes/builtins.js

@@ -0,0 +1,241 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function round(n) {
+    return Math.round(n * 1000) / 1000;
+}
+function polar(r, a) {
+    return { x: round(50 + r * Math.sin(a)), y: round(50 - r * Math.cos(a)) };
+}
+const SEGMENTS = {
+    "0": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 0, y: 1, w: 1, h: 4 }
+    ],
+    "1": [
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "2": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "3": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "4": [
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "5": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "6": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "7": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "8": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 }
+    ],
+    "9": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 }
+    ]
+};
+function renderSevenSegDigit(digit, x, y, scale) {
+    const segs = SEGMENTS[digit] ?? [];
+    return segs.map((s, idx) => (_jsx("rect", { x: round(x + s.x * scale), y: round(y + s.y * scale), width: round(s.w * scale), height: round(s.h * scale), className: "fill-neutral-700 dark:fill-neutral-300", rx: round(0.3 * scale) }, `${digit}-${idx}`)));
+}
+function renderSevenSegNumber(num, cx, cy, scale) {
+    const digits = String(num).split("");
+    const w = 6 * scale;
+    const gap = 1.2 * scale;
+    const total = digits.length * w + (digits.length - 1) * gap;
+    const startX = cx - total / 2;
+    const startY = cy - (10 * scale) / 2;
+    return digits.map((d, i) => (_jsx("g", { children: renderSevenSegDigit(d, startX + i * (w + gap), startY, scale) }, `${num}-${i}`)));
+}
+const ThemeClassic = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-neutral-100 dark:fill-neutral-900" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-300 dark:stroke-neutral-700" }), Array.from({ length: 60 }).map((_, i) => {
+            const major = i % 5 === 0;
+            const len = major ? 4 : 2;
+            const r1 = 46;
+            const r2 = r1 - len;
+            const a = (i * Math.PI) / 30;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: major ? "stroke-neutral-400 stroke-[0.9]" : "stroke-neutral-400 stroke-[0.6]", strokeLinecap: "round" }, i));
+        }), Array.from({ length: 12 }).map((_, idx) => {
+            const n = idx + 1;
+            const a = (n * Math.PI) / 6;
+            const r = 34;
+            const p = polar(r, a);
+            return (_jsx("text", { x: p.x, y: round(p.y + 3), textAnchor: "middle", className: "fill-neutral-800 text-[6px] font-semibold dark:fill-neutral-200", children: n }, n));
+        })] }));
+const ThemeMinimal = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-white dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-200 dark:stroke-neutral-800" }), Array.from({ length: 12 }).map((_, i) => {
+            const a = (i * Math.PI) / 6;
+            const r1 = 46;
+            const r2 = 42;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: "stroke-neutral-400 dark:stroke-neutral-600 stroke-[1.1]", strokeLinecap: "round" }, i));
+        })] }));
+const ThemeDark = () => (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("radialGradient", { id: "sgClockDarkGrad", cx: "50%", cy: "45%", r: "60%", children: [_jsx("stop", { offset: "0%", stopColor: "rgb(30 41 59)" }), _jsx("stop", { offset: "100%", stopColor: "rgb(2 6 23)" })] }) }), _jsx("circle", { cx: "50", cy: "50", r: "48", fill: "url(#sgClockDarkGrad)" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-700" }), Array.from({ length: 60 }).map((_, i) => {
+            const major = i % 5 === 0;
+            const len = major ? 4 : 2;
+            const r1 = 46;
+            const r2 = r1 - len;
+            const a = (i * Math.PI) / 30;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: major ? "stroke-neutral-400 stroke-[0.9]" : "stroke-neutral-600 stroke-[0.6]", strokeLinecap: "round" }, i));
+        }), Array.from({ length: 12 }).map((_, idx) => {
+            const n = idx + 1;
+            const a = (n * Math.PI) / 6;
+            const r = 34;
+            const p = polar(r, a);
+            return (_jsx("text", { x: p.x, y: round(p.y + 3), textAnchor: "middle", className: "fill-neutral-200 text-[6px] font-medium", children: n }, n));
+        })] }));
+const ThemeSeedGrid = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-white dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-200 dark:stroke-neutral-800" }), Array.from({ length: 6 }).map((_, i) => {
+            const p = 22 + i * 6;
+            return (_jsxs(React.Fragment, { children: [_jsx("line", { x1: p, y1: 18, x2: p, y2: 82, className: "stroke-neutral-100 dark:stroke-neutral-900 stroke-[0.7]" }), _jsx("line", { x1: 18, y1: p, x2: 82, y2: p, className: "stroke-neutral-100 dark:stroke-neutral-900 stroke-[0.7]" })] }, i));
+        }), Array.from({ length: 12 }).map((_, i) => {
+            const a = (i * Math.PI) / 6;
+            const r1 = 46;
+            const r2 = 40;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: "stroke-neutral-400 dark:stroke-neutral-600 stroke-[1.2]", strokeLinecap: "round" }, i));
+        }), _jsx("text", { x: "50", y: "56", textAnchor: "middle", className: "fill-neutral-200 text-[10px] font-semibold dark:fill-neutral-800", children: "SG" })] }));
+const ThemeMusic = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-neutral-50 dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-200 dark:stroke-neutral-800" }), Array.from({ length: 5 }).map((_, i) => {
+            const y = 38 + i * 4;
+            return (_jsx("line", { x1: 20, y1: y, x2: 80, y2: y, className: "stroke-neutral-200 dark:stroke-neutral-800 stroke-[0.8]" }, i));
+        }), _jsxs("g", { className: "fill-neutral-300 dark:fill-neutral-800", children: [_jsx("circle", { cx: "32", cy: "44", r: "2.2" }), _jsx("rect", { x: "33.7", y: "32", width: "1", height: "12", rx: "0.5" }), _jsx("circle", { cx: "68", cy: "52", r: "2.2" }), _jsx("rect", { x: "69.7", y: "40", width: "1", height: "12", rx: "0.5" })] }), Array.from({ length: 12 }).map((_, i) => {
+            const a = (i * Math.PI) / 6;
+            const r1 = 46;
+            const r2 = 42;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: "stroke-neutral-400 dark:stroke-neutral-600 stroke-[1.1]", strokeLinecap: "round" }, i));
+        })] }));
+const ThemeMusicNotes = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-white dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-300 dark:stroke-neutral-700" }), Array.from({ length: 12 }).map((_, i) => {
+            const a = (i * Math.PI) / 6;
+            const r1 = 46;
+            const r2 = 40;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: "stroke-neutral-400 dark:stroke-neutral-600 stroke-[1.1]", strokeLinecap: "round" }, i));
+        }), Array.from({ length: 12 }).map((_, i) => {
+            const a = (i * Math.PI) / 6;
+            const r = 36;
+            const p = polar(r, a);
+            const up = i % 2 === 0;
+            return (_jsxs("g", { transform: `translate(${round(p.x - 2.5)} ${round(p.y - 2.5)})`, children: [_jsx("ellipse", { cx: "2.5", cy: "3.2", rx: "2.2", ry: "1.6", className: "fill-neutral-800 dark:fill-neutral-200" }), _jsx("rect", { x: up ? 4.3 : 0.6, y: -6, width: "0.8", height: "7", className: "fill-neutral-800 dark:fill-neutral-200" })] }, i));
+        }), _jsx("text", { x: "50", y: "68", textAnchor: "middle", className: "fill-neutral-300 text-[7px] font-semibold tracking-[2px] dark:fill-neutral-700", children: "MUSICA" })] }));
+const ThemeMusicStaff = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-white dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-300 dark:stroke-neutral-700" }), _jsx("circle", { cx: "50", cy: "50", r: "38", className: "fill-none stroke-neutral-300 dark:stroke-neutral-700 stroke-[0.8]" }), _jsx("circle", { cx: "50", cy: "50", r: "42", className: "fill-none stroke-neutral-300 dark:stroke-neutral-700 stroke-[0.8]" }), Array.from({ length: 5 }).map((_, i) => {
+            const y = 30 + i * 4;
+            return (_jsx("line", { x1: 18, y1: y, x2: 82, y2: y, className: "stroke-neutral-300 dark:stroke-neutral-700 stroke-[0.8]" }, i));
+        }), _jsxs("g", { className: "fill-neutral-700 dark:fill-neutral-300", children: [_jsx("circle", { cx: "30", cy: "38", r: "1.8" }), _jsx("rect", { x: "31.5", y: "28", width: "0.8", height: "10", rx: "0.4" }), _jsx("circle", { cx: "66", cy: "46", r: "1.8" }), _jsx("rect", { x: "67.5", y: "36", width: "0.8", height: "10", rx: "0.4" }), _jsx("path", { d: "M55 34c2-2 4-2 6 0", className: "stroke-neutral-700 dark:stroke-neutral-300", strokeWidth: "0.8", fill: "none" })] }), Array.from({ length: 60 }).map((_, i) => {
+            if (i % 5 !== 0)
+                return null;
+            const a = (i * Math.PI) / 30;
+            const r1 = 46;
+            const r2 = 42;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: "stroke-neutral-400 dark:stroke-neutral-600 stroke-[1]", strokeLinecap: "round" }, i));
+        })] }));
+const ThemeRomanClassic = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-[#f2e9dc] dark:fill-neutral-900" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-600/60 dark:stroke-neutral-600" }), _jsx("circle", { cx: "50", cy: "50", r: "36", className: "fill-none stroke-neutral-500/40 dark:stroke-neutral-700" }), Array.from({ length: 60 }).map((_, i) => {
+            const major = i % 5 === 0;
+            const len = major ? 4 : 2;
+            const r1 = 46;
+            const r2 = r1 - len;
+            const a = (i * Math.PI) / 30;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: major ? "stroke-neutral-700 stroke-[1]" : "stroke-neutral-600/70 stroke-[0.6]", strokeLinecap: "round" }, i));
+        }), ["XII", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI"].map((n, idx) => {
+            const a = ((idx + 1) * Math.PI) / 6;
+            const r = 32;
+            const p = polar(r, a);
+            return (_jsx("text", { x: p.x, y: round(p.y + 3), textAnchor: "middle", className: "fill-neutral-800 text-[7px] font-semibold dark:fill-neutral-200", children: n }, n));
+        })] }));
+const ThemeRomanOrnate = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-white dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-700 dark:stroke-neutral-600" }), _jsx("circle", { cx: "50", cy: "50", r: "44", className: "fill-none stroke-neutral-700/60 dark:stroke-neutral-700" }), Array.from({ length: 48 }).map((_, i) => {
+            const a = (i * Math.PI) / 24;
+            const r = 46.5;
+            const p = polar(r, a);
+            return _jsx("circle", { cx: p.x, cy: p.y, r: "0.6", className: "fill-neutral-700/70 dark:fill-neutral-600" }, i);
+        }), ["XII", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI"].map((n, idx) => {
+            const a = ((idx + 1) * Math.PI) / 6;
+            const r = 32;
+            const p = polar(r, a);
+            return (_jsx("text", { x: p.x, y: round(p.y + 3), textAnchor: "middle", className: "fill-neutral-800 text-[7px] font-semibold dark:fill-neutral-200", children: n }, n));
+        }), Array.from({ length: 12 }).map((_, i) => {
+            const a = (i * Math.PI) / 6;
+            const r = 40;
+            const p = polar(r, a);
+            return (_jsx("rect", { x: round(p.x - 1), y: round(p.y - 1), width: "2", height: "2", className: "fill-neutral-700 dark:fill-neutral-500" }, i));
+        })] }));
+const ThemeSegment = () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "50", cy: "50", r: "48", className: "fill-white dark:fill-neutral-950" }), _jsx("circle", { cx: "50", cy: "50", r: "47", className: "fill-none stroke-neutral-300 dark:stroke-neutral-700" }), Array.from({ length: 60 }).map((_, i) => {
+            const major = i % 5 === 0;
+            const len = major ? 4 : 2;
+            const r1 = 46;
+            const r2 = r1 - len;
+            const a = (i * Math.PI) / 30;
+            const p1 = polar(r1, a);
+            const p2 = polar(r2, a);
+            return (_jsx("line", { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, className: major ? "stroke-neutral-400 stroke-[0.9]" : "stroke-neutral-400/60 stroke-[0.6]", strokeLinecap: "round" }, i));
+        }), Array.from({ length: 12 }).map((_, idx) => {
+            const n = idx + 1;
+            const a = (n * Math.PI) / 6;
+            const r = 32;
+            const p = polar(r, a);
+            return _jsx("g", { children: renderSevenSegNumber(n, p.x, p.y, 0.7) }, n);
+        })] }));
+export const sgClockThemesBuiltIn = [
+    { id: "classic", label: "Classic", render: () => _jsx(ThemeClassic, {}), order: 1 },
+    { id: "minimal", label: "Minimal", render: () => _jsx(ThemeMinimal, {}), order: 2 },
+    { id: "dark", label: "Dark", render: () => _jsx(ThemeDark, {}), order: 3 },
+    { id: "seedgrid", label: "SeedGrid", render: () => _jsx(ThemeSeedGrid, {}), order: 4 },
+    { id: "music", label: "Music", render: () => _jsx(ThemeMusic, {}), order: 5 },
+    { id: "music-notes", label: "Music Notes", render: () => _jsx(ThemeMusicNotes, {}), order: 6 },
+    { id: "music-staff", label: "Music Staff", render: () => _jsx(ThemeMusicStaff, {}), order: 8 },
+    { id: "roman-classic", label: "Roman Classic", render: () => _jsx(ThemeRomanClassic, {}), order: 9 },
+    { id: "roman-ornate", label: "Roman Ornate", render: () => _jsx(ThemeRomanOrnate, {}), order: 10 },
+    { id: "segment", label: "Segment", render: () => _jsx(ThemeSegment, {}), order: 11 }
+];

package/dist/gadgets/clock/themes/index.d.ts

@@ -0,0 +1,9 @@
+export { registerTheme, registerThemes, getTheme, hasTheme, listThemes, unregisterTheme, clearThemes } from "./registry";
+export { createThemeResolver, SgClockThemeProvider, useSgClockThemeResolver } from "./provider";
+export { ThemeLayer, resolveTheme } from "./renderTheme";
+export { useDarkFlag } from "./useDarkFlag";
+export { SgClockThemePicker } from "./SgClockThemePicker";
+export { SgClockThemePreview } from "./SgClockThemePreview";
+export { sgClockThemesBuiltIn } from "./builtins";
+export type { SgClockTheme, SgClockThemeRenderArgs, SgClockThemeResolveMode, SgClockThemeResolver } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/gadgets/clock/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,YAAY,EACV,YAAY,EACZ,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,SAAS,CAAC"}

package/dist/gadgets/clock/themes/index.js

@@ -0,0 +1,7 @@
+export { registerTheme, registerThemes, getTheme, hasTheme, listThemes, unregisterTheme, clearThemes } from "./registry";
+export { createThemeResolver, SgClockThemeProvider, useSgClockThemeResolver } from "./provider";
+export { ThemeLayer, resolveTheme } from "./renderTheme";
+export { useDarkFlag } from "./useDarkFlag";
+export { SgClockThemePicker } from "./SgClockThemePicker";
+export { SgClockThemePreview } from "./SgClockThemePreview";
+export { sgClockThemesBuiltIn } from "./builtins";

package/dist/gadgets/clock/themes/provider.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SgClockTheme, SgClockThemeResolveMode, SgClockThemeResolver } from "./types";
+type SgClockThemeProviderValue = {
+    mode?: SgClockThemeResolveMode;
+    fallbackThemeId?: string;
+    themes?: SgClockTheme[];
+};
+export declare function useSgClockThemeResolver(): SgClockThemeResolver | null;
+export declare function createThemeResolver(params?: {
+    mode?: SgClockThemeResolveMode;
+    fallbackThemeId?: string;
+    localThemes?: SgClockTheme[];
+}): SgClockThemeResolver;
+export declare function SgClockThemeProvider({ value, children }: {
+    value?: SgClockThemeProviderValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/gadgets/clock/themes/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAG3F,KAAK,yBAAyB,GAAG;IAC/B,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;CACzB,CAAC;AAIF,wBAAgB,uBAAuB,gCAEtC;AAED,wBAAgB,mBAAmB,CAAC,MAAM,CAAC,EAAE;IAC3C,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;CAC9B,GAAG,oBAAoB,CAkCvB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACT,EAAE;IACD,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAUA"}

package/dist/gadgets/clock/themes/provider.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { getTheme, listThemes as listGlobalThemes } from "./registry";
+const SgClockThemeContext = React.createContext(null);
+export function useSgClockThemeResolver() {
+    return React.useContext(SgClockThemeContext);
+}
+export function createThemeResolver(params) {
+    const mode = params?.mode ?? "fallback";
+    const fallbackThemeId = params?.fallbackThemeId ?? "classic";
+    const localMap = new Map();
+    (params?.localThemes ?? []).forEach((t) => localMap.set(t.id, t));
+    const resolveStrict = (id) => localMap.get(id) ?? getTheme(id);
+    return {
+        resolve(id) {
+            const found = resolveStrict(id);
+            if (found)
+                return found;
+            if (mode === "strict")
+                return null;
+            if (id !== fallbackThemeId)
+                return resolveStrict(fallbackThemeId);
+            return null;
+        },
+        list() {
+            const merged = new Map();
+            for (const g of listGlobalThemes())
+                merged.set(g.id, g);
+            for (const [k, v] of localMap.entries())
+                merged.set(k, v);
+            return Array.from(merged.values()).sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+        },
+        registerLocal(theme) {
+            if (!theme?.id)
+                throw new Error("registerLocal: theme.id is required");
+            localMap.set(theme.id, theme);
+        },
+        registerManyLocal(themes) {
+            for (const t of themes)
+                this.registerLocal(t);
+        }
+    };
+}
+export function SgClockThemeProvider({ value, children }) {
+    const resolver = React.useMemo(() => {
+        return createThemeResolver({
+            mode: value?.mode ?? "fallback",
+            fallbackThemeId: value?.fallbackThemeId ?? "classic",
+            localThemes: value?.themes ?? []
+        });
+    }, [value?.mode, value?.fallbackThemeId, value?.themes]);
+    return _jsx(SgClockThemeContext.Provider, { value: resolver, children: children });
+}

package/dist/gadgets/clock/themes/registry.d.ts

@@ -0,0 +1,9 @@
+import type { SgClockTheme } from "./types";
+export declare function registerTheme(theme: SgClockTheme): void;
+export declare function registerThemes(themes: SgClockTheme[]): void;
+export declare function getTheme(id: string): SgClockTheme | null;
+export declare function hasTheme(id: string): boolean;
+export declare function listThemes(): SgClockTheme[];
+export declare function unregisterTheme(id: string): void;
+export declare function clearThemes(): void;
+//# sourceMappingURL=registry.d.ts.map

package/dist/gadgets/clock/themes/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,QAGhD;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE,QAEpD;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAExD;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAE5C;AAED,wBAAgB,UAAU,IAAI,YAAY,EAAE,CAE3C;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,QAEzC;AAED,wBAAgB,WAAW,SAE1B"}

package/dist/gadgets/clock/themes/registry.js

@@ -0,0 +1,25 @@
+const globalMap = new Map();
+export function registerTheme(theme) {
+    if (!theme?.id)
+        throw new Error("registerTheme: theme.id is required");
+    globalMap.set(theme.id, theme);
+}
+export function registerThemes(themes) {
+    for (const theme of themes)
+        registerTheme(theme);
+}
+export function getTheme(id) {
+    return globalMap.get(id) ?? null;
+}
+export function hasTheme(id) {
+    return globalMap.has(id);
+}
+export function listThemes() {
+    return Array.from(globalMap.values()).sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+}
+export function unregisterTheme(id) {
+    globalMap.delete(id);
+}
+export function clearThemes() {
+    globalMap.clear();
+}

package/dist/gadgets/clock/themes/renderTheme.d.ts

@@ -0,0 +1,7 @@
+import type { SgClockTheme, SgClockThemeRenderArgs, SgClockThemeResolver } from "./types";
+export declare function ThemeLayer({ theme, args }: {
+    theme: SgClockTheme;
+    args: SgClockThemeRenderArgs;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function resolveTheme(resolver: SgClockThemeResolver | null, themeId: string, fallbackThemeId: string): SgClockTheme | null;
+//# sourceMappingURL=renderTheme.d.ts.map

package/dist/gadgets/clock/themes/renderTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTheme.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/renderTheme.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAQ1F,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACL,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,sBAAsB,CAAC;CAC9B,2CA+BA;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EACrC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,MAAM,GACtB,YAAY,GAAG,IAAI,CAKrB"}

package/dist/gadgets/clock/themes/renderTheme.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { loadSvgText } from "./urlThemeCache";
+function extractInnerSvg(svgText) {
+    const match = svgText.match(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/i);
+    return match?.[1] ?? svgText;
+}
+export function ThemeLayer({ theme, args }) {
+    const [inner, setInner] = React.useState(null);
+    const url = theme.url;
+    React.useEffect(() => {
+        let alive = true;
+        setInner(null);
+        if (!url)
+            return;
+        loadSvgText(url)
+            .then((txt) => {
+            if (!alive)
+                return;
+            setInner(extractInnerSvg(txt));
+        })
+            .catch(() => {
+            if (!alive)
+                return;
+            setInner(null);
+        });
+        return () => {
+            alive = false;
+        };
+    }, [url]);
+    return (_jsxs(_Fragment, { children: [theme.render?.(args), url && inner && _jsx("g", { dangerouslySetInnerHTML: { __html: inner } })] }));
+}
+export function resolveTheme(resolver, themeId, fallbackThemeId) {
+    const t = resolver?.resolve(themeId) ?? null;
+    if (t)
+        return t;
+    if (themeId !== fallbackThemeId)
+        return resolver?.resolve(fallbackThemeId) ?? null;
+    return null;
+}

package/dist/gadgets/clock/themes/types.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+export type SgClockThemeRenderArgs = {
+    size: number;
+    dark: boolean;
+};
+export type SgClockTheme = {
+    id: string;
+    label?: string;
+    tags?: string[];
+    render?: (args: SgClockThemeRenderArgs) => React.ReactNode;
+    url?: string;
+    order?: number;
+};
+export type SgClockThemeResolveMode = "strict" | "fallback";
+export type SgClockThemeResolver = {
+    resolve: (id: string) => SgClockTheme | null;
+    list: () => SgClockTheme[];
+    registerLocal: (theme: SgClockTheme) => void;
+    registerManyLocal: (themes: SgClockTheme[]) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/gadgets/clock/themes/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,iBAAiB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACrD,CAAC"}

package/dist/gadgets/clock/themes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/gadgets/clock/themes/urlThemeCache.d.ts

@@ -0,0 +1,2 @@
+export declare function loadSvgText(url: string): Promise<string>;
+//# sourceMappingURL=urlThemeCache.d.ts.map

package/dist/gadgets/clock/themes/urlThemeCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlThemeCache.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/urlThemeCache.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAWxD"}

package/dist/gadgets/clock/themes/urlThemeCache.js

@@ -0,0 +1,11 @@
+const svgTextCache = new Map();
+export function loadSvgText(url) {
+    if (!svgTextCache.has(url)) {
+        svgTextCache.set(url, fetch(url, { method: "GET", cache: "force-cache" }).then((res) => {
+            if (!res.ok)
+                throw new Error(`Failed to load svg: ${url} (${res.status})`);
+            return res.text();
+        }));
+    }
+    return svgTextCache.get(url);
+}

package/dist/gadgets/clock/themes/useDarkFlag.d.ts

@@ -0,0 +1,2 @@
+export declare function useDarkFlag(): boolean;
+//# sourceMappingURL=useDarkFlag.d.ts.map

package/dist/gadgets/clock/themes/useDarkFlag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDarkFlag.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/useDarkFlag.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAgB1B"}

package/dist/gadgets/clock/themes/useDarkFlag.js

@@ -0,0 +1,14 @@
+"use client";
+import * as React from "react";
+export function useDarkFlag() {
+    const [dark, setDark] = React.useState(false);
+    React.useEffect(() => {
+        const root = document.documentElement;
+        const compute = () => setDark(root.classList.contains("dark"));
+        compute();
+        const obs = new MutationObserver(() => compute());
+        obs.observe(root, { attributes: true, attributeFilter: ["class"] });
+        return () => obs.disconnect();
+    }, []);
+    return dark;
+}

package/dist/gadgets/flip-digit/SgFlipDigit.d.ts

@@ -0,0 +1,23 @@
+export type SgFlipDigitProps = {
+    /** The character to display (single char) */
+    value: string;
+    /** Width in pixels */
+    width?: number;
+    /** Height in pixels */
+    height?: number;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * SgFlipDigit - Animated flip card for single character display
+ *
+ * @example
+ * ```tsx
+ * const [digit, setDigit] = useState("0");
+ * <SgFlipDigit value={digit} />
+ * ```
+ */
+export declare function SgFlipDigit({ value, width, height, fontSize, className }: SgFlipDigitProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgFlipDigit.d.ts.map

package/dist/gadgets/flip-digit/SgFlipDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgFlipDigit.d.ts","sourceRoot":"","sources":["../../../src/gadgets/flip-digit/SgFlipDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAU,EACV,MAAY,EACZ,QAAa,EACb,SAAS,EACV,EAAE,gBAAgB,2CA8KlB"}