@jasonbelmonti/signal-ui 0.2.0 → 0.3.0

package/README.md

@@ -11,6 +11,10 @@ bun run typecheck
 bun run build
 ```
 
+Pushes to `main` also publish the static Storybook to GitHub Pages via
+`.github/workflows/storybook-pages.yml`, so the theme can be shared without a local build.
+The default URL for this repository is `https://jasonbelmonti.github.io/signal-ui/`.
+
 `bun run build` emits the consumable package contract in `dist/`:
 
 - `dist/index.js`

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export { AntdThemeProvider, installStaticAntdTheme } from "./providers/AntdThemeProvider.js";
+export { AntdThemeProvider, installStaticAntdTheme, type AntdThemeProviderProps, type InstallStaticAntdThemeOptions, } from "./providers/AntdThemeProvider.js";
 export { HashCube } from "./components/HashCube.js";
 export { GraphCanvas } from "./components/GraphCanvas.js";
 export type { GraphCanvasProps, GraphCanvasReactFlowProps } from "./components/GraphCanvas.js";
@@ -25,4 +25,5 @@ export { SignalWireframe } from "./components/SignalWireframe.js";
 export type { PixelCubePathProps, PixelCubePathTone, } from "./components/PixelCubePath.js";
 export type { PixelCubeLoaderGridSize, PixelCubeLoaderProps, PixelCubeLoaderTone, } from "./components/PixelCubeLoader.js";
 export type { SignalWireframeProps, SignalWireframeTone, } from "./components/SignalWireframe.js";
-export { signalFontStacks, signalPalette, signalTheme } from "./theme/signalTheme.js";
+export { createSignalTheme, createSignalThemeCssVariables, resolveSignalPalette, signalFontStacks, signalPalette, signalTheme, } from "./theme/signalTheme.js";
+export type { HexColor, SignalPalette, SignalThemeColorPreferences, SignalThemePreferences, } from "./theme/signalTheme.js";

package/dist/src/index.js

@@ -1,4 +1,4 @@
-export { AntdThemeProvider, installStaticAntdTheme } from "./providers/AntdThemeProvider.js";
+export { AntdThemeProvider, installStaticAntdTheme, } from "./providers/AntdThemeProvider.js";
 export { HashCube } from "./components/HashCube.js";
 export { GraphCanvas } from "./components/GraphCanvas.js";
 export { MarkdownTheme } from "./components/MarkdownTheme.js";
@@ -12,4 +12,4 @@ export { SignalStatusTag } from "./components/SignalStatusTag.js";
 export { PixelCubePath } from "./components/PixelCubePath.js";
 export { PixelCubeLoader } from "./components/PixelCubeLoader.js";
 export { SignalWireframe } from "./components/SignalWireframe.js";
-export { signalFontStacks, signalPalette, signalTheme } from "./theme/signalTheme.js";
+export { createSignalTheme, createSignalThemeCssVariables, resolveSignalPalette, signalFontStacks, signalPalette, signalTheme, } from "./theme/signalTheme.js";

package/dist/src/providers/AntdThemeProvider.d.ts

@@ -1,3 +1,10 @@
+import type { ThemeConfig } from "antd";
 import type { PropsWithChildren } from "react";
-export declare function AntdThemeProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-export declare function installStaticAntdTheme(): void;
+import { type SignalThemePreferences } from "../theme/signalTheme.js";
+export type AntdThemeProviderProps = PropsWithChildren<{
+    theme?: ThemeConfig;
+    themePreferences?: SignalThemePreferences;
+}>;
+export declare function AntdThemeProvider({ children, theme, themePreferences, }: AntdThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export type InstallStaticAntdThemeOptions = Pick<AntdThemeProviderProps, "theme" | "themePreferences">;
+export declare function installStaticAntdTheme(options?: InstallStaticAntdThemeOptions): void;

package/dist/src/providers/AntdThemeProvider.js

@@ -1,11 +1,101 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { App, ConfigProvider } from "antd";
-import { signalTheme } from "../theme/signalTheme.js";
-export function AntdThemeProvider({ children }) {
-    return (_jsx(ConfigProvider, { theme: signalTheme, children: _jsx(App, { children: children }) }));
+import { useInsertionEffect } from "react";
+import { useRef } from "react";
+import { mergeThemeConfig } from "../theme/mergeThemeConfig.js";
+import { createSignalTheme, createSignalThemeCssVariables, signalTheme, } from "../theme/signalTheme.js";
+// Portals read vars from documentElement, so keep the newest themed provider authoritative
+// and restore the previous layer when a nested/themed preview unmounts.
+const activeDocumentThemeEntries = [];
+const documentThemeBaseline = new Map();
+function resolveAntdTheme(theme, themePreferences) {
+    const baseTheme = themePreferences ? createSignalTheme(themePreferences) : signalTheme;
+    return theme ? mergeThemeConfig(baseTheme, theme) : baseTheme;
 }
-export function installStaticAntdTheme() {
+function syncDocumentThemeVariables() {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const rootStyle = document.documentElement.style;
+    const activeVariables = activeDocumentThemeEntries.at(-1)?.variables;
+    const variableNames = new Set(documentThemeBaseline.keys());
+    for (const entry of activeDocumentThemeEntries) {
+        for (const name of Object.keys(entry.variables)) {
+            variableNames.add(name);
+        }
+    }
+    for (const name of variableNames) {
+        const value = activeVariables?.[name];
+        if (value !== undefined) {
+            rootStyle.setProperty(name, String(value));
+            continue;
+        }
+        const baselineValue = documentThemeBaseline.get(name);
+        if (baselineValue) {
+            rootStyle.setProperty(name, baselineValue);
+        }
+        else {
+            rootStyle.removeProperty(name);
+        }
+    }
+    if (!activeVariables) {
+        documentThemeBaseline.clear();
+    }
+}
+function upsertDocumentThemeVariables(id, variables) {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const rootStyle = document.documentElement.style;
+    for (const name of Object.keys(variables)) {
+        if (!documentThemeBaseline.has(name)) {
+            documentThemeBaseline.set(name, rootStyle.getPropertyValue(name));
+        }
+    }
+    const existingEntryIndex = activeDocumentThemeEntries.findIndex((entry) => entry.id === id);
+    if (existingEntryIndex === -1) {
+        activeDocumentThemeEntries.push({ id, variables });
+    }
+    else {
+        activeDocumentThemeEntries[existingEntryIndex] = { id, variables };
+    }
+    syncDocumentThemeVariables();
+}
+function removeDocumentThemeVariables(id) {
+    const existingEntryIndex = activeDocumentThemeEntries.findIndex((entry) => entry.id === id);
+    if (existingEntryIndex === -1) {
+        return;
+    }
+    activeDocumentThemeEntries.splice(existingEntryIndex, 1);
+    syncDocumentThemeVariables();
+}
+function useDocumentThemeVariables(themePreferences, themeConfig) {
+    const themeEntryIdRef = useRef(null);
+    if (!themeEntryIdRef.current) {
+        themeEntryIdRef.current = Symbol("signal-theme-vars");
+    }
+    useInsertionEffect(() => {
+        if ((!themePreferences && !themeConfig) || typeof document === "undefined") {
+            return;
+        }
+        const themeVariables = createSignalThemeCssVariables(themePreferences, themeConfig);
+        const themeEntryId = themeEntryIdRef.current;
+        if (!themeEntryId) {
+            return;
+        }
+        upsertDocumentThemeVariables(themeEntryId, themeVariables);
+        return () => {
+            removeDocumentThemeVariables(themeEntryId);
+        };
+    }, [themeConfig, themePreferences]);
+}
+export function AntdThemeProvider({ children, theme, themePreferences, }) {
+    const resolvedTheme = resolveAntdTheme(theme, themePreferences);
+    useDocumentThemeVariables(themePreferences, theme ? resolvedTheme : undefined);
+    return (_jsx(ConfigProvider, { theme: resolvedTheme, children: _jsx(App, { children: children }) }));
+}
+export function installStaticAntdTheme(options = {}) {
     ConfigProvider.config({
-        holderRender: (children) => _jsx(AntdThemeProvider, { children: children }),
+        holderRender: (children) => _jsx(AntdThemeProvider, { ...options, children: children }),
     });
 }

package/dist/src/theme/colorUtils.d.ts

@@ -0,0 +1,11 @@
+export type HexColor = `#${string}`;
+export declare function isHexColor(color: string | undefined): color is HexColor;
+export declare function normalizeHexColor(color: string | undefined): HexColor | null;
+export declare function resolveHexColor(color: string | undefined, fallback: HexColor): HexColor;
+export declare function normalizeColor(color: string | undefined): HexColor | null;
+export declare function normalizeCssColor(color: string | undefined): string | null;
+export declare function mixHexColors(color: string, mixWith: string, mixAmount: number): string;
+export declare function darkenHexColor(color: string, amount: number): string;
+export declare function lightenHexColor(color: string, amount: number): string;
+export declare function withAlpha(color: string, alpha: number): string;
+export declare function toRgbTriplet(color: string): string | null;

package/dist/src/theme/colorUtils.js

@@ -0,0 +1,334 @@
+let colorResolutionElement = null;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function expandHexColor(hex) {
+    if (!/^[0-9a-fA-F]+$/.test(hex)) {
+        return null;
+    }
+    if (hex.length === 3 || hex.length === 4) {
+        return hex
+            .split("")
+            .map((segment) => `${segment}${segment}`)
+            .join("");
+    }
+    if (hex.length === 6 || hex.length === 8) {
+        return hex;
+    }
+    return null;
+}
+export function isHexColor(color) {
+    if (!color) {
+        return false;
+    }
+    const normalized = color.trim();
+    return /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(normalized);
+}
+export function normalizeHexColor(color) {
+    if (!isHexColor(color)) {
+        return null;
+    }
+    const parsed = parseHexColor(color);
+    return parsed ? formatHexColor(parsed) : null;
+}
+export function resolveHexColor(color, fallback) {
+    return normalizeHexColor(color) ?? fallback;
+}
+function parseRgbChannel(channel) {
+    const normalized = channel.trim().replace(/%$/, "");
+    const value = Number.parseFloat(normalized);
+    if (!Number.isFinite(value)) {
+        return null;
+    }
+    return channel.trim().endsWith("%") ? (value / 100) * 255 : value;
+}
+function parseHue(hue) {
+    const normalized = hue.trim().toLowerCase();
+    const value = Number.parseFloat(normalized);
+    if (!Number.isFinite(value)) {
+        return null;
+    }
+    if (normalized.endsWith("turn")) {
+        return value * 360;
+    }
+    if (normalized.endsWith("rad")) {
+        return (value * 180) / Math.PI;
+    }
+    return value;
+}
+function parsePercentChannel(channel) {
+    const normalized = channel.trim();
+    if (!normalized.endsWith("%")) {
+        return null;
+    }
+    const value = Number.parseFloat(normalized.slice(0, -1));
+    if (!Number.isFinite(value)) {
+        return null;
+    }
+    return clamp(value, 0, 100) / 100;
+}
+function parseAlphaChannel(channel) {
+    const normalized = channel.trim();
+    if (!normalized) {
+        return null;
+    }
+    if (normalized.endsWith("%")) {
+        const value = Number.parseFloat(normalized.slice(0, -1));
+        if (!Number.isFinite(value)) {
+            return null;
+        }
+        return clamp(value, 0, 100) / 100;
+    }
+    const value = Number.parseFloat(normalized);
+    if (!Number.isFinite(value)) {
+        return null;
+    }
+    return clamp(value, 0, 1);
+}
+function parseFunctionalColorArguments(color) {
+    const match = color.trim().match(/^[a-z]+\((.*)\)$/i);
+    const contents = match?.[1];
+    if (!contents) {
+        return null;
+    }
+    return contents
+        .trim()
+        .replace(/\s*\/\s*[^, ]+\s*$/, "")
+        .replace(/,/g, " ")
+        .split(/\s+/)
+        .filter(Boolean);
+}
+function parseFunctionalColorChannels(color) {
+    const match = color.trim().match(/^[a-z]+\((.*)\)$/i);
+    const contents = match?.[1]?.trim();
+    if (!contents) {
+        return null;
+    }
+    let channelContents = contents;
+    let alphaChannel;
+    let alphaProvided = false;
+    if (channelContents.includes("/")) {
+        const [channels, alpha] = channelContents.split("/", 2);
+        channelContents = channels?.trim() ?? "";
+        alphaChannel = alpha?.trim();
+        alphaProvided = true;
+    }
+    const channels = channelContents.replace(/,/g, " ").split(/\s+/).filter(Boolean);
+    if (!alphaChannel && channels.length === 4) {
+        alphaChannel = channels.pop();
+        alphaProvided = true;
+    }
+    const alpha = alphaChannel ? parseAlphaChannel(alphaChannel) : null;
+    if (alphaProvided && alpha === null) {
+        return null;
+    }
+    return {
+        alpha,
+        channels,
+    };
+}
+function parseRgbColor(color) {
+    const match = color.trim().match(/^rgba?\(/i);
+    if (!match) {
+        return null;
+    }
+    const parsedChannels = parseFunctionalColorChannels(color);
+    const channels = parsedChannels?.channels;
+    if (!channels || channels.length < 3) {
+        return null;
+    }
+    const [redChannel, greenChannel, blueChannel] = channels;
+    if (!redChannel || !greenChannel || !blueChannel) {
+        return null;
+    }
+    const red = parseRgbChannel(redChannel);
+    const green = parseRgbChannel(greenChannel);
+    const blue = parseRgbChannel(blueChannel);
+    if (red === null || green === null || blue === null) {
+        return null;
+    }
+    if (parsedChannels?.alpha === undefined) {
+        return null;
+    }
+    return { red, green, blue, alpha: parsedChannels.alpha };
+}
+function hslToRgb(hue, saturation, lightness) {
+    const normalizedHue = ((hue % 360) + 360) % 360;
+    const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+    const segment = normalizedHue / 60;
+    const second = chroma * (1 - Math.abs((segment % 2) - 1));
+    const matchLightness = lightness - chroma / 2;
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (segment >= 0 && segment < 1) {
+        red = chroma;
+        green = second;
+    }
+    else if (segment < 2) {
+        red = second;
+        green = chroma;
+    }
+    else if (segment < 3) {
+        green = chroma;
+        blue = second;
+    }
+    else if (segment < 4) {
+        green = second;
+        blue = chroma;
+    }
+    else if (segment < 5) {
+        red = second;
+        blue = chroma;
+    }
+    else {
+        red = chroma;
+        blue = second;
+    }
+    return {
+        red: (red + matchLightness) * 255,
+        green: (green + matchLightness) * 255,
+        blue: (blue + matchLightness) * 255,
+    };
+}
+function parseHslColor(color) {
+    const match = color.trim().match(/^hsla?\(/i);
+    if (!match) {
+        return null;
+    }
+    const parsedChannels = parseFunctionalColorChannels(color);
+    const channels = parsedChannels?.channels;
+    if (!channels || channels.length < 3) {
+        return null;
+    }
+    const [hueChannel, saturationChannel, lightnessChannel] = channels;
+    if (!hueChannel || !saturationChannel || !lightnessChannel) {
+        return null;
+    }
+    const hue = parseHue(hueChannel);
+    const saturation = parsePercentChannel(saturationChannel);
+    const lightness = parsePercentChannel(lightnessChannel);
+    if (hue === null || saturation === null || lightness === null) {
+        return null;
+    }
+    if (parsedChannels?.alpha === undefined) {
+        return null;
+    }
+    return { ...hslToRgb(hue, saturation, lightness), alpha: parsedChannels.alpha };
+}
+function parseHexColor(color) {
+    const normalized = color.trim().replace(/^#/, "");
+    const hex = expandHexColor(normalized);
+    if (!hex) {
+        return null;
+    }
+    const red = Number.parseInt(hex.slice(0, 2), 16);
+    const green = Number.parseInt(hex.slice(2, 4), 16);
+    const blue = Number.parseInt(hex.slice(4, 6), 16);
+    return { red, green, blue };
+}
+function parseHexColorWithAlpha(color) {
+    const normalized = color.trim().replace(/^#/, "");
+    const hex = expandHexColor(normalized);
+    const rgb = parseHexColor(color);
+    if (!hex || !rgb) {
+        return null;
+    }
+    if (normalized.length === 4 || normalized.length === 8) {
+        const alphaHex = hex.slice(6, 8);
+        const alpha = Number.parseInt(alphaHex, 16) / 255;
+        return { ...rgb, alpha };
+    }
+    return { ...rgb, alpha: null };
+}
+function parseCssColor(color) {
+    return parseHexColorWithAlpha(color) ?? parseRgbColor(color) ?? parseHslColor(color) ?? parseBrowserColor(color);
+}
+function getColorResolutionElement() {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    if (!colorResolutionElement) {
+        colorResolutionElement = document.createElement("div");
+        colorResolutionElement.setAttribute("aria-hidden", "true");
+        colorResolutionElement.style.display = "none";
+        document.documentElement.append(colorResolutionElement);
+    }
+    else if (!colorResolutionElement.isConnected) {
+        document.documentElement.append(colorResolutionElement);
+    }
+    return colorResolutionElement;
+}
+function parseBrowserColor(color) {
+    const resolutionElement = getColorResolutionElement();
+    if (!resolutionElement) {
+        return null;
+    }
+    resolutionElement.style.color = "";
+    resolutionElement.style.color = color;
+    if (!resolutionElement.style.color) {
+        return null;
+    }
+    return parseRgbColor(getComputedStyle(resolutionElement).color);
+}
+function formatHexColor({ red, green, blue }) {
+    return `#${[red, green, blue]
+        .map((channel) => clamp(Math.round(channel), 0, 255).toString(16).padStart(2, "0"))
+        .join("")}`;
+}
+function formatCssColor({ red, green, blue, alpha }) {
+    if (alpha === null || alpha >= 1) {
+        return formatHexColor({ red, green, blue });
+    }
+    return `rgba(${clamp(Math.round(red), 0, 255)}, ${clamp(Math.round(green), 0, 255)}, ${clamp(Math.round(blue), 0, 255)}, ${alpha})`;
+}
+export function normalizeColor(color) {
+    if (!color) {
+        return null;
+    }
+    const parsed = parseCssColor(color);
+    if (!parsed || (parsed.alpha !== null && parsed.alpha < 1)) {
+        return null;
+    }
+    return formatHexColor(parsed);
+}
+export function normalizeCssColor(color) {
+    if (!color) {
+        return null;
+    }
+    const parsed = parseCssColor(color);
+    return parsed ? formatCssColor(parsed) : null;
+}
+export function mixHexColors(color, mixWith, mixAmount) {
+    const source = parseHexColor(color);
+    const target = parseHexColor(mixWith);
+    if (!source || !target) {
+        return color;
+    }
+    const weight = clamp(mixAmount, 0, 1);
+    return formatHexColor({
+        red: source.red + (target.red - source.red) * weight,
+        green: source.green + (target.green - source.green) * weight,
+        blue: source.blue + (target.blue - source.blue) * weight,
+    });
+}
+export function darkenHexColor(color, amount) {
+    return mixHexColors(color, "#000000", amount);
+}
+export function lightenHexColor(color, amount) {
+    return mixHexColors(color, "#ffffff", amount);
+}
+export function withAlpha(color, alpha) {
+    const parsed = parseCssColor(color);
+    if (!parsed) {
+        return color;
+    }
+    return `rgba(${parsed.red}, ${parsed.green}, ${parsed.blue}, ${clamp(alpha, 0, 1)})`;
+}
+export function toRgbTriplet(color) {
+    const parsed = parseCssColor(color);
+    if (!parsed) {
+        return null;
+    }
+    return `${parsed.red} ${parsed.green} ${parsed.blue}`;
+}

package/dist/src/theme/createSignalTheme.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeConfig } from "antd";
+import type { CSSProperties } from "react";
+import type { SignalPalette as ResolvedSignalPalette } from "./signalPalette.js";
+import type { SignalThemePreferences } from "./signalThemePreferences.js";
+export declare function resolveSignalPalette(preferences?: SignalThemePreferences): ResolvedSignalPalette;
+export type SignalThemeStyleVariables = CSSProperties & Record<`--signal-ui-${string}`, string | number>;
+export declare function createSignalThemeCssVariables(preferences?: SignalThemePreferences, themeConfig?: ThemeConfig): SignalThemeStyleVariables;
+export declare function createSignalTheme(preferences?: SignalThemePreferences): ThemeConfig;