@-reddacted-/react-ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,3 +1,18 @@
-export { default as Modal, openModal, closeModal } from "./Modal";
-export { default as ColorPicker } from "./ColorPicker";
-export { default as ConfirmDeleteButton } from "./ConfirmDeleteButton";
+export { default as Modal, openModal, closeModal } from "./components/Modal";
+export { default as ColorPicker } from "./components/ColorPicker";
+export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton";
+export { ColorField } from "./components/ColorField";
+export { Button } from "./components/Button";
+export { NavBar } from "./components/NavBar";
+export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus";
+export { ThemeProvider, useTheme } from "./theme/ThemeProvider";
+export { ThemeSelect } from "./theme/ThemeSelect";
+export { defaultPalette, themeVariableGroups, themeVariableKeys } from "./theme/palette";
+export { createLocalThemeStore, createHttpThemeStore } from "./theme/store";
+export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard";
+export { PopupProvider } from "./popup/PopupProvider";
+export { PopupHost } from "./popup/PopupHost";
+export { createInterceptedFetch } from "./popup/fetchInterceptor";
+export { createErrorRules, defaultMessages, } from "./popup/errorRules";
+export { fetchJson } from "./net/fetchJson";
+export { useDocumentTitle } from "./net/useDocumentTitle";

package/dist/net/fetchJson.d.ts

@@ -0,0 +1,2 @@
+export declare function fetchJson<T>(url: string, signal?: AbortSignal): Promise<T | null>;
+//# sourceMappingURL=fetchJson.d.ts.map

package/dist/net/fetchJson.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchJson.d.ts","sourceRoot":"","sources":["../../src/net/fetchJson.ts"],"names":[],"mappings":"AAEA,wBAAsB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAOvF"}

package/dist/net/fetchJson.js

@@ -0,0 +1,11 @@
+// Reads a JSON response. A non-2xx status throws so the caller can tell a failure
+// apart from "no content yet": an empty body yields null.
+export async function fetchJson(url, signal) {
+    const res = await fetch(url, { signal });
+    if (!res.ok)
+        throw new Error(`${url} -> ${res.status}`);
+    const body = await res.text();
+    if (body.trim() === "")
+        return null;
+    return JSON.parse(body);
+}

package/dist/net/useDocumentTitle.d.ts

@@ -0,0 +1,2 @@
+export declare function useDocumentTitle(title: string | undefined, siteName: string, fallback?: string): void;
+//# sourceMappingURL=useDocumentTitle.d.ts.map

package/dist/net/useDocumentTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentTitle.d.ts","sourceRoot":"","sources":["../../src/net/useDocumentTitle.ts"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,QAI9F"}

package/dist/net/useDocumentTitle.js

@@ -0,0 +1,8 @@
+import { useEffect } from "react";
+// Without this every page shares the title of index.html in the tab, the history
+// and the search results.
+export function useDocumentTitle(title, siteName, fallback) {
+    useEffect(() => {
+        document.title = title ? `${title} — ${siteName}` : (fallback ?? siteName);
+    }, [title, siteName, fallback]);
+}

package/dist/popup/PopupHost.d.ts

@@ -0,0 +1,8 @@
+type PopupHostProps = {
+    messages: string[];
+    onDismiss: () => void;
+    closeLabel?: string;
+};
+export declare function PopupHost({ messages, onDismiss, closeLabel }: PopupHostProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=PopupHost.d.ts.map

package/dist/popup/PopupHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupHost.d.ts","sourceRoot":"","sources":["../../src/popup/PopupHost.tsx"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAoB,EAAE,EAAE,cAAc,sCAiBtF"}

package/dist/popup/PopupHost.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PopupHost({ messages, onDismiss, closeLabel = "Close" }) {
+    if (messages.length === 0)
+        return null;
+    return (_jsxs("div", { role: "alert", "aria-live": "assertive", style: hostStyle, children: [_jsx("div", { style: bodyStyle, children: messages.map(message => (_jsx("p", { style: messageStyle, children: message }, message))) }), _jsx("button", { type: "button", "aria-label": closeLabel, onClick: onDismiss, style: closeStyle, children: "\u00D7" })] }));
+}
+const hostStyle = {
+    position: "fixed",
+    top: "1rem",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 2000,
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "0.75rem",
+    maxWidth: "min(32rem, calc(100vw - 2rem))",
+    padding: "0.75rem 0.75rem 0.75rem 1rem",
+    borderRadius: "8px",
+    border: "1px solid var(--color-danger)",
+    backgroundColor: "var(--color-danger-soft)",
+    boxShadow: "0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent)",
+};
+const bodyStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+};
+const messageStyle = {
+    margin: 0,
+    fontSize: "0.875rem",
+    lineHeight: 1.4,
+    color: "var(--color-text)",
+};
+const closeStyle = {
+    flexShrink: 0,
+    padding: 0,
+    width: "1.5rem",
+    height: "1.5rem",
+    lineHeight: 1,
+    fontSize: "1.125rem",
+    cursor: "pointer",
+    border: "none",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: "var(--color-danger)",
+};

package/dist/popup/PopupProvider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { ErrorRulesOptions } from "./errorRules";
+type PopupProviderProps = ErrorRulesOptions & {
+    children: ReactNode;
+    closeLabel?: string;
+};
+export declare function PopupProvider({ children, closeLabel, ...ruleOptions }: PopupProviderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PopupProvider.d.ts.map

package/dist/popup/PopupProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupProvider.d.ts","sourceRoot":"","sources":["../../src/popup/PopupProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,cAAc,CAAA;AAMjE,KAAK,kBAAkB,GAAG,iBAAiB,GAAG;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,EAAE,kBAAkB,+BAkCzF"}

package/dist/popup/PopupProvider.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createErrorRules } from "./errorRules";
+import { createInterceptedFetch } from "./fetchInterceptor";
+import { PopupHost } from "./PopupHost";
+export function PopupProvider({ children, closeLabel, ...ruleOptions }) {
+    const [messages, setMessages] = useState([]);
+    // Les options arrivent en littéraux : les garder dans un ref évite de réinstaller
+    // l'interception à chaque rendu du parent.
+    const rulesRef = useRef(null);
+    if (rulesRef.current === null)
+        rulesRef.current = createErrorRules(ruleOptions);
+    useEffect(() => {
+        const original = window.fetch;
+        if (original.__popupIntercepted)
+            return;
+        const intercepted = createInterceptedFetch(original, {
+            onRequestStart: () => setMessages(current => (current.length === 0 ? current : [])),
+            onError: message => setMessages(current => (current.includes(message) ? current : [...current, message])),
+        }, rulesRef.current);
+        intercepted.__popupIntercepted = true;
+        window.fetch = intercepted;
+        return () => {
+            window.fetch = original;
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [children, _jsx(PopupHost, { messages: messages, onDismiss: () => setMessages([]), closeLabel: closeLabel })] }));
+}

package/dist/popup/errorRules.d.ts

@@ -0,0 +1,23 @@
+export type PopupMessages = {
+    networkFailure: string;
+    forbidden: string;
+    notFound: string;
+    serverError: string;
+    requestFailed: (status: number) => string;
+};
+export declare const defaultMessages: PopupMessages;
+export type ErrorRulesOptions = {
+    /** Statuses that never raise a popup. Form input errors by default. */
+    ignoredStatuses?: number[];
+    /** Paths whose 401 is a session probe, not a failure the user should see. */
+    authProbePaths?: string[];
+    messages?: Partial<PopupMessages>;
+};
+export type ErrorRules = {
+    networkFailureMessage: string;
+    shouldReportResponse: (res: Response) => boolean;
+    shouldReportFailure: (cause: unknown) => boolean;
+    describeResponse: (res: Response) => Promise<string>;
+};
+export declare function createErrorRules(options?: ErrorRulesOptions): ErrorRules;
+//# sourceMappingURL=errorRules.d.ts.map

package/dist/popup/errorRules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorRules.d.ts","sourceRoot":"","sources":["../../src/popup/errorRules.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,aAM7B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,oBAAoB,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,OAAO,CAAA;IAChD,mBAAmB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAA;IAChD,gBAAgB,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;CACrD,CAAA;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAkC5E"}

package/dist/popup/errorRules.js

@@ -0,0 +1,59 @@
+export const defaultMessages = {
+    networkFailure: "The server is unreachable.",
+    forbidden: "You are not allowed to do this.",
+    notFound: "The requested resource was not found.",
+    serverError: "The server ran into an error.",
+    requestFailed: status => `The request failed (${status}).`,
+};
+export function createErrorRules(options = {}) {
+    const ignoredStatuses = options.ignoredStatuses ?? [400, 422];
+    const authProbePaths = options.authProbePaths ?? ["/auth/me"];
+    const messages = { ...defaultMessages, ...options.messages };
+    const isAuthProbe = (url) => {
+        const matches = (path) => {
+            try {
+                return new URL(url).pathname.endsWith(path);
+            }
+            catch {
+                return url.includes(path);
+            }
+        };
+        return authProbePaths.some(matches);
+    };
+    return {
+        networkFailureMessage: messages.networkFailure,
+        shouldReportResponse(res) {
+            if (res.ok)
+                return false;
+            if (ignoredStatuses.includes(res.status))
+                return false;
+            if (res.status === 401 && isAuthProbe(res.url))
+                return false;
+            return true;
+        },
+        shouldReportFailure(cause) {
+            return !(cause instanceof Error && cause.name === "AbortError");
+        },
+        async describeResponse(res) {
+            return (await readBodyMessage(res)) ?? genericMessage(res.status, messages);
+        },
+    };
+}
+async function readBodyMessage(res) {
+    try {
+        const body = (await res.clone().json());
+        return typeof body.message === "string" && body.message.trim() !== "" ? body.message.trim() : null;
+    }
+    catch {
+        return null;
+    }
+}
+function genericMessage(status, messages) {
+    if (status === 401 || status === 403)
+        return messages.forbidden;
+    if (status === 404)
+        return messages.notFound;
+    if (status >= 500)
+        return messages.serverError;
+    return messages.requestFailed(status);
+}

package/dist/popup/fetchInterceptor.d.ts

@@ -0,0 +1,7 @@
+import type { ErrorRules } from "./errorRules";
+export type InterceptorHandlers = {
+    onRequestStart: () => void;
+    onError: (message: string) => void;
+};
+export declare function createInterceptedFetch(original: typeof fetch, handlers: InterceptorHandlers, rules: ErrorRules): typeof fetch;
+//# sourceMappingURL=fetchInterceptor.d.ts.map

package/dist/popup/fetchInterceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchInterceptor.d.ts","sourceRoot":"","sources":["../../src/popup/fetchInterceptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,OAAO,KAAK,EACtB,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,UAAU,GAChB,OAAO,KAAK,CAYd"}

package/dist/popup/fetchInterceptor.js

@@ -0,0 +1,16 @@
+export function createInterceptedFetch(original, handlers, rules) {
+    return async (input, init) => {
+        handlers.onRequestStart();
+        try {
+            const res = await original(input, init);
+            if (rules.shouldReportResponse(res))
+                handlers.onError(await rules.describeResponse(res));
+            return res;
+        }
+        catch (cause) {
+            if (rules.shouldReportFailure(cause))
+                handlers.onError(rules.networkFailureMessage);
+            throw cause;
+        }
+    };
+}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { ThemeStore } from "./store";
+import type { ThemeColors, ThemeDefinition } from "./types";
+type ThemeContextValue = {
+    themes: ThemeDefinition[];
+    defaultId: string | null;
+    currentId: string | null;
+    currentColors: ThemeColors;
+    selectTheme: (id: string) => void;
+    basePalette: ThemeColors;
+    store: ThemeStore;
+    reload: () => Promise<void>;
+};
+type ThemeProviderProps = {
+    children: ReactNode;
+    apiUrl?: string;
+    store?: ThemeStore;
+    basePalette?: ThemeColors;
+    selectionKey?: string;
+};
+export declare function ThemeProvider({ children, apiUrl, store, basePalette, selectionKey, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI3D,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,aAAa,EAAE,WAAW,CAAA;IAC1B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,WAAW,CAAA;IACxB,KAAK,EAAE,UAAU,CAAA;IACjB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5B,CAAA;AAID,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAOD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAA4B,EAC5B,YAA4B,GAC7B,EAAE,kBAAkB,+BA6DpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { defaultPalette } from "./palette";
+import { createHttpThemeStore, createLocalThemeStore } from "./store";
+const SELECTION_KEY = "theme-id";
+const ThemeContext = createContext(null);
+function readSelection(key) {
+    if (typeof localStorage === "undefined")
+        return null;
+    return localStorage.getItem(key);
+}
+export function ThemeProvider({ children, apiUrl, store, basePalette = defaultPalette, selectionKey = SELECTION_KEY, }) {
+    const resolvedStore = useMemo(() => store ?? (apiUrl ? createHttpThemeStore(apiUrl) : createLocalThemeStore()), [store, apiUrl]);
+    const [themes, setThemes] = useState([]);
+    const [defaultId, setDefaultId] = useState(null);
+    const [selectedId, setSelectedId] = useState(() => readSelection(selectionKey));
+    const reload = useCallback(async () => {
+        const catalog = await resolvedStore.loadVisible();
+        setThemes(catalog.themes);
+        setDefaultId(catalog.defaultId);
+    }, [resolvedStore]);
+    useEffect(() => {
+        void reload();
+    }, [reload]);
+    // Un thème devenu invisible ou supprimé ne doit pas laisser le visiteur sur une palette
+    // qui n'existe plus : on retombe sur le défaut.
+    const currentId = useMemo(() => {
+        if (selectedId && themes.some(theme => theme.id === selectedId))
+            return selectedId;
+        return defaultId;
+    }, [selectedId, themes, defaultId]);
+    const currentColors = useMemo(() => {
+        const current = themes.find(theme => theme.id === currentId);
+        return { ...basePalette, ...(current?.colors ?? {}) };
+    }, [themes, currentId, basePalette]);
+    useEffect(() => {
+        for (const [key, value] of Object.entries(currentColors)) {
+            document.documentElement.style.setProperty(key, value);
+        }
+    }, [currentColors]);
+    const selectTheme = useCallback((id) => {
+        setSelectedId(id);
+        if (typeof localStorage !== "undefined")
+            localStorage.setItem(selectionKey, id);
+    }, [selectionKey]);
+    const value = useMemo(() => ({
+        themes,
+        defaultId,
+        currentId,
+        currentColors,
+        selectTheme,
+        basePalette,
+        store: resolvedStore,
+        reload,
+    }), [themes, defaultId, currentId, currentColors, selectTheme, basePalette, resolvedStore, reload]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx)
+        throw new Error("useTheme must be used within ThemeProvider");
+    return ctx;
+}

package/dist/theme/ThemeSelect.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+type ThemeSelectProps = {
+    ariaLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function ThemeSelect({ ariaLabel, className, style }: ThemeSelectProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ThemeSelect.d.ts.map

package/dist/theme/ThemeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSelect.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,sCAoBtF"}

package/dist/theme/ThemeSelect.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "./ThemeProvider";
+export function ThemeSelect({ ariaLabel = "Theme", className, style }) {
+    const { themes, currentId, selectTheme } = useTheme();
+    if (themes.length < 2)
+        return null;
+    return (_jsx("select", { "aria-label": ariaLabel, className: className, value: currentId ?? "", onChange: event => selectTheme(event.target.value), style: { ...selectStyle, ...style }, children: themes.map(theme => (_jsx("option", { value: theme.id, children: theme.name }, theme.id))) }));
+}
+const selectStyle = {
+    padding: "0.3rem 0.5rem",
+    borderRadius: "6px",
+    border: "1px solid var(--color-border)",
+    backgroundColor: "var(--color-bg)",
+    color: "var(--color-text)",
+    fontSize: "0.8125rem",
+    cursor: "pointer",
+};

package/dist/theme/clipboard.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeColors } from "./types";
+export declare function serializeColors(colors: ThemeColors): string;
+export declare function parseColors(text: string): ThemeColors;
+export declare function isHexColor(value: string): boolean;
+export declare function randomHex(): string;
+//# sourceMappingURL=clipboard.d.ts.map

package/dist/theme/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/theme/clipboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAK3D;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAOrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,SAAS,IAAI,MAAM,CAOlC"}

package/dist/theme/clipboard.js

@@ -0,0 +1,26 @@
+import { themeVariableKeys } from "./palette";
+const HEX = /^#[0-9a-fA-F]{6}$/;
+export function serializeColors(colors) {
+    const lines = themeVariableKeys
+        .filter(key => colors[key])
+        .map(key => `  ${key}: ${colors[key]};`);
+    return `:root {\n${lines.join("\n")}\n}`;
+}
+export function parseColors(text) {
+    const parsed = {};
+    for (const key of themeVariableKeys) {
+        const match = new RegExp(`${key}\s*:\s*(#[0-9a-fA-F]{6})`).exec(text);
+        if (match)
+            parsed[key] = match[1];
+    }
+    return parsed;
+}
+export function isHexColor(value) {
+    return HEX.test(value);
+}
+export function randomHex() {
+    return ("#" +
+        Math.floor(Math.random() * 0xffffff)
+            .toString(16)
+            .padStart(6, "0"));
+}

package/dist/theme/palette.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeColors } from "./types";
+export declare const defaultPalette: ThemeColors;
+export type ThemeVariableGroup = {
+    label: string;
+    variables: Array<{
+        key: string;
+        label: string;
+    }>;
+};
+export declare const themeVariableGroups: ThemeVariableGroup[];
+export declare const themeVariableKeys: string[];
+//# sourceMappingURL=palette.d.ts.map

package/dist/theme/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,cAAc,EAAE,WAsB5B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,kBAAkB,EA+CnD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,EAErC,CAAA"}

package/dist/theme/palette.js

@@ -0,0 +1,72 @@
+export const defaultPalette = {
+    "--color-bg": "#ffffff",
+    "--color-surface": "#f8fafc",
+    "--color-text": "#1a1a1a",
+    "--color-text-muted": "#64748b",
+    "--color-primary": "#6366f1",
+    "--color-primary-hover": "#4f46e5",
+    "--color-on-primary": "#ffffff",
+    "--color-primary-soft": "#e0e7ff",
+    "--color-border": "#e2e8f0",
+    "--color-danger": "#dc2626",
+    "--color-danger-soft": "#fee2e2",
+    "--color-mindmap-red": "#dc2626",
+    "--color-mindmap-red-soft": "#fee2e2",
+    "--color-mindmap-orange": "#ea580c",
+    "--color-mindmap-orange-soft": "#ffedd5",
+    "--color-mindmap-green": "#16a34a",
+    "--color-mindmap-green-soft": "#dcfce7",
+    "--color-mindmap-blue": "#2563eb",
+    "--color-mindmap-blue-soft": "#dbeafe",
+    "--color-mindmap-purple": "#9333ea",
+    "--color-mindmap-purple-soft": "#f3e8ff",
+};
+export const themeVariableGroups = [
+    {
+        label: "Surfaces",
+        variables: [
+            { key: "--color-bg", label: "Background" },
+            { key: "--color-surface", label: "Surface" },
+            { key: "--color-border", label: "Border" },
+        ],
+    },
+    {
+        label: "Text",
+        variables: [
+            { key: "--color-text", label: "Text" },
+            { key: "--color-text-muted", label: "Muted text" },
+        ],
+    },
+    {
+        label: "Primary",
+        variables: [
+            { key: "--color-primary", label: "Primary" },
+            { key: "--color-primary-hover", label: "Primary (hover)" },
+            { key: "--color-on-primary", label: "On primary" },
+            { key: "--color-primary-soft", label: "Primary (soft)" },
+        ],
+    },
+    {
+        label: "Danger",
+        variables: [
+            { key: "--color-danger", label: "Danger" },
+            { key: "--color-danger-soft", label: "Danger (soft)" },
+        ],
+    },
+    {
+        label: "Mindmap",
+        variables: [
+            { key: "--color-mindmap-red", label: "Red" },
+            { key: "--color-mindmap-red-soft", label: "Red (soft)" },
+            { key: "--color-mindmap-orange", label: "Orange" },
+            { key: "--color-mindmap-orange-soft", label: "Orange (soft)" },
+            { key: "--color-mindmap-green", label: "Green" },
+            { key: "--color-mindmap-green-soft", label: "Green (soft)" },
+            { key: "--color-mindmap-blue", label: "Blue" },
+            { key: "--color-mindmap-blue-soft", label: "Blue (soft)" },
+            { key: "--color-mindmap-purple", label: "Purple" },
+            { key: "--color-mindmap-purple-soft", label: "Purple (soft)" },
+        ],
+    },
+];
+export const themeVariableKeys = themeVariableGroups.flatMap(group => group.variables.map(variable => variable.key));

package/dist/theme/store.d.ts

@@ -0,0 +1,11 @@
+import type { ThemeCatalog, ThemeDefinition, ThemeDraft } from "./types";
+export type ThemeStore = {
+    loadVisible(): Promise<ThemeCatalog>;
+    loadAll(): Promise<ThemeCatalog>;
+    create(draft: ThemeDraft): Promise<ThemeDefinition>;
+    update(id: string, draft: ThemeDraft): Promise<void>;
+    setDefault(id: string): Promise<void>;
+};
+export declare function createLocalThemeStore(storageKey?: string): ThemeStore;
+export declare function createHttpThemeStore(apiUrl: string): ThemeStore;
+//# sourceMappingURL=store.d.ts.map

package/dist/theme/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/theme/store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAExE,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,CAAA;IAChC,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,eAAe,CAAC,CAAA;IACnD,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACpD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACtC,CAAA;AAYD,wBAAgB,qBAAqB,CAAC,UAAU,GAAE,MAAoB,GAAG,UAAU,CA8ClF;AAmBD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAiB/D"}

package/dist/theme/store.js

@@ -0,0 +1,92 @@
+const CATALOG_KEY = "theme-catalog";
+function emptyCatalog() {
+    return { themes: [], defaultId: null };
+}
+function newId() {
+    return Math.random().toString(36).slice(2, 10);
+}
+export function createLocalThemeStore(storageKey = CATALOG_KEY) {
+    const read = () => {
+        if (typeof localStorage === "undefined")
+            return emptyCatalog();
+        try {
+            const raw = localStorage.getItem(storageKey);
+            return raw ? JSON.parse(raw) : emptyCatalog();
+        }
+        catch {
+            return emptyCatalog();
+        }
+    };
+    const write = (catalog) => {
+        if (typeof localStorage === "undefined")
+            return;
+        localStorage.setItem(storageKey, JSON.stringify(catalog));
+    };
+    return {
+        async loadVisible() {
+            const catalog = read();
+            return { themes: catalog.themes.filter(theme => theme.visible), defaultId: catalog.defaultId };
+        },
+        async loadAll() {
+            return read();
+        },
+        async create(draft) {
+            const catalog = read();
+            const theme = { id: newId(), ...draft };
+            catalog.themes.push(theme);
+            if (!catalog.defaultId)
+                catalog.defaultId = theme.id;
+            write(catalog);
+            return theme;
+        },
+        async update(id, draft) {
+            const catalog = read();
+            const index = catalog.themes.findIndex(theme => theme.id === id);
+            if (index === -1)
+                return;
+            catalog.themes[index] = { id, ...draft };
+            write(catalog);
+        },
+        async setDefault(id) {
+            const catalog = read();
+            if (!catalog.themes.some(theme => theme.id === id))
+                return;
+            catalog.defaultId = id;
+            write(catalog);
+        },
+    };
+}
+async function readJson(url, init) {
+    const res = await fetch(url, { credentials: "include", ...init });
+    if (!res.ok)
+        throw new Error(`${url} -> ${res.status}`);
+    return (await res.json());
+}
+async function send(url, method, body) {
+    const res = await fetch(url, {
+        method,
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+    });
+    if (!res.ok)
+        throw new Error(`${url} -> ${res.status}`);
+    return res;
+}
+export function createHttpThemeStore(apiUrl) {
+    const base = apiUrl.replace(/\/+$/, "");
+    return {
+        loadVisible: () => readJson(`${base}/themes`),
+        loadAll: () => readJson(`${base}/themes/all`),
+        async create(draft) {
+            const res = await send(`${base}/themes`, "POST", draft);
+            return (await res.json());
+        },
+        async update(id, draft) {
+            await send(`${base}/themes/${encodeURIComponent(id)}`, "PUT", draft);
+        },
+        async setDefault(id) {
+            await send(`${base}/themes/default`, "PUT", { id });
+        },
+    };
+}