@reforma/site 0.0.0-stage → 0.0.2

package/dist/ambient.d.ts

@@ -0,0 +1,16 @@
+export {};
+declare global {
+    /**
+     * Branded prop types for the Reforma properties panel.
+     * Prefer these over bare `string` when the prop should open Color / Image / Link UI.
+     */
+    namespace Reforma {
+        /** CSS color string → Color control. */
+        type Color = string;
+        /** Image / media URL → Image control. */
+        type ImageUrl = string;
+        /** Page path or URL → Link control (pages picker). */
+        type Href = string;
+    }
+}
+//# sourceMappingURL=ambient.d.ts.map

package/dist/ambient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ambient.d.ts","sourceRoot":"","sources":["../src/ambient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC;AAEV,OAAO,CAAC,MAAM,CAAC;IACX;;;OAGG;IACH,UAAU,OAAO,CAAC;QACd,wCAAwC;QACxC,KAAK,KAAK,GAAG,MAAM,CAAC;QAEpB,yCAAyC;QACzC,KAAK,QAAQ,GAAG,MAAM,CAAC;QAEvB,sDAAsD;QACtD,KAAK,IAAI,GAAG,MAAM,CAAC;KACtB;CACJ"}

package/dist/ambient.js

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { projectMetadata, projectRobots } from './metadata.js';
+export { SiteRoot, useMode } from './root.js';
+export type { Appearance, ModeAppearances, ModeDocument, SystemModes } from './root.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { projectMetadata, projectRobots } from './metadata.js';
+export { SiteRoot, useMode } from './root.js';

package/dist/metadata.d.ts

@@ -0,0 +1,30 @@
+export declare function projectMetadata(fallback: {
+    title: string;
+    description: string;
+}): {
+    title: {
+        template: string;
+        default: string;
+    };
+    description: string;
+    icons: {
+        icon: string | {
+            url: string;
+            type: string;
+        };
+    };
+    robots: {
+        index: boolean;
+        follow: boolean;
+    };
+};
+export declare function projectRobots(): {
+    rules: {
+        userAgent: string;
+        disallow: string;
+    } | {
+        userAgent: string;
+        allow: string;
+    };
+};
+//# sourceMappingURL=metadata.d.ts.map

package/dist/metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../src/metadata.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,QAAQ,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE;;QAMpE,QAAQ;QACR,OAAO;;;;QAIP,IAAI;;;;;;;;;EAQf;AAED,wBAAgB,aAAa;IAIrB,KAAK;;;;;;;EAKZ"}

package/dist/metadata.js

@@ -0,0 +1,28 @@
+export function projectMetadata(fallback) {
+    const faviconUrl = process.env.REFORMA_FAVICON_URL || '/favicon.svg';
+    const indexingOn = process.env.REFORMA_INDEXING !== '0';
+    return {
+        title: {
+            template: '%s',
+            default: process.env.REFORMA_DEFAULT_TITLE || fallback.title,
+        },
+        description: process.env.REFORMA_DEFAULT_DESCRIPTION || fallback.description,
+        icons: {
+            icon: faviconUrl.endsWith('.svg')
+                ? { url: faviconUrl, type: 'image/svg+xml' }
+                : faviconUrl,
+        },
+        robots: indexingOn
+            ? { index: true, follow: true }
+            : { index: false, follow: false },
+    };
+}
+export function projectRobots() {
+    const blocked = process.env.REFORMA_INDEXING === '0';
+    return {
+        rules: {
+            userAgent: '*',
+            ...(blocked ? { disallow: '/' } : { allow: '/' }),
+        },
+    };
+}

package/dist/postcss.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Rewrite declaration `url()` values the Next bundler would fail to resolve.
+ * Empty values become an empty data url. A missing relative file becomes a
+ * site-root url when the CSS file path is known. Fragment, scheme, and
+ * site-root urls stay. Colocated files that exist stay so they still bundle.
+ */
+export declare function rewriteDeclarationUrls(value: any, options?: {}): string;
+declare function plugin(options?: {}): {
+    postcssPlugin: string;
+    OnceExit(root: any): void;
+};
+declare namespace plugin {
+    var postcss: boolean;
+}
+export default plugin;
+//# sourceMappingURL=postcss.d.ts.map

package/dist/postcss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"postcss.d.ts","sourceRoot":"","sources":["../src/postcss.js"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,KAAA,EAAE,OAAO,KAAK,UAiDzD;AA0LD,iBAAS,MAAM,CAAC,OAAO,KAAK;;;EAoB3B;kBApBQ,MAAM;;;eAwBA,MAAM"}

package/dist/postcss.js

@@ -0,0 +1,206 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+const EMPTY_URL = 'url("data:,")';
+/**
+ * Rewrite declaration `url()` values the Next bundler would fail to resolve.
+ * Empty values become an empty data url. A missing relative file becomes a
+ * site-root url when the CSS file path is known. Fragment, scheme, and
+ * site-root urls stay. Colocated files that exist stay so they still bundle.
+ */
+export function rewriteDeclarationUrls(value, options = {}) {
+    const exists = options.exists ?? existsSync;
+    const from = knownCssPath(options.from);
+    let out = '';
+    let quote = '';
+    let i = 0;
+    while (i < value.length) {
+        const ch = value[i];
+        if (quote) {
+            out += ch;
+            if (ch === '\\' && i + 1 < value.length) {
+                out += value[i + 1];
+                i += 2;
+                continue;
+            }
+            if (ch === quote) {
+                quote = '';
+            }
+            i += 1;
+            continue;
+        }
+        if (ch === '"' || ch === '\'') {
+            quote = ch;
+            out += ch;
+            i += 1;
+            continue;
+        }
+        if (isUrlCall(value, i)) {
+            const parsed = readUrlCall(value, i);
+            if (parsed) {
+                out += rewriteUrl(parsed.inner, from, exists) ?? value.slice(i, parsed.end);
+                i = parsed.end;
+                continue;
+            }
+        }
+        out += ch;
+        i += 1;
+    }
+    return out;
+}
+function knownCssPath(from) {
+    if (typeof from !== 'string') {
+        return null;
+    }
+    const trimmed = from.trim();
+    if (!trimmed || trimmed.startsWith('<')) {
+        return null;
+    }
+    return trimmed;
+}
+function isUrlCall(value, index) {
+    if (value.slice(index, index + 4).toLowerCase() !== 'url(') {
+        return false;
+    }
+    return index === 0 || !/[a-z0-9_-]/i.test(value[index - 1]);
+}
+function readUrlCall(value, index) {
+    let cursor = index + 4;
+    while (cursor < value.length && /\s/.test(value[cursor])) {
+        cursor += 1;
+    }
+    if (cursor >= value.length) {
+        return null;
+    }
+    const quote = value[cursor];
+    let inner = '';
+    let end = cursor;
+    if (quote === '"' || quote === '\'') {
+        const string = readString(value, quote, cursor + 1);
+        if (!string) {
+            return null;
+        }
+        inner = string.value;
+        end = string.end;
+    }
+    else {
+        const close = value.indexOf(')', cursor);
+        if (close < 0) {
+            return null;
+        }
+        inner = value.slice(cursor, close).trim();
+        end = close;
+    }
+    while (end < value.length && /\s/.test(value[end])) {
+        end += 1;
+    }
+    if (value[end] !== ')') {
+        return null;
+    }
+    return { inner, end: end + 1 };
+}
+function readString(value, quote, start) {
+    let out = '';
+    for (let i = start; i < value.length; i += 1) {
+        const ch = value[i];
+        if (ch === '\\' && i + 1 < value.length) {
+            out += value[i + 1];
+            i += 1;
+            continue;
+        }
+        if (ch === quote) {
+            return { value: out, end: i + 1 };
+        }
+        out += ch;
+    }
+    return null;
+}
+function rewriteUrl(inner, from, exists) {
+    const trimmed = inner.trim();
+    if (!trimmed) {
+        return EMPTY_URL;
+    }
+    if (trimmed.startsWith('#')
+        || trimmed.startsWith('/')
+        || trimmed.startsWith('~')
+        || SCHEME.test(trimmed)) {
+        return null;
+    }
+    if (!from || exists(candidatePath(from, trimmed))) {
+        return null;
+    }
+    const rooted = toSiteRoot(trimmed);
+    if (!rooted) {
+        return null;
+    }
+    return formatCssUrl(rooted);
+}
+function candidatePath(from, raw) {
+    const query = raw.indexOf('?');
+    const hash = raw.indexOf('#');
+    let end = raw.length;
+    if (query >= 0) {
+        end = Math.min(end, query);
+    }
+    if (hash >= 0) {
+        end = Math.min(end, hash);
+    }
+    let pathname = raw.slice(0, end);
+    try {
+        pathname = decodeURIComponent(pathname);
+    }
+    catch {
+        // Keep the raw path when it is not valid encoding.
+    }
+    return path.resolve(path.dirname(from), pathname);
+}
+function toSiteRoot(raw) {
+    let url;
+    try {
+        url = new URL(raw, 'https://assets.invalid/');
+    }
+    catch {
+        return null;
+    }
+    if (url.origin !== 'https://assets.invalid') {
+        return null;
+    }
+    let pathname = url.pathname;
+    try {
+        pathname = decodeURIComponent(pathname);
+    }
+    catch {
+        // Keep the encoded pathname.
+    }
+    return `${pathname}${url.search}${url.hash}`;
+}
+function formatCssUrl(raw) {
+    if (/^[^\s"'()\\]+$/.test(raw)) {
+        return `url(${raw})`;
+    }
+    const escaped = raw
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\a ');
+    return `url("${escaped}")`;
+}
+function plugin(options = {}) {
+    const exists = options.exists ?? existsSync;
+    return {
+        postcssPlugin: 'reforma-asset-url',
+        OnceExit(root) {
+            root.walkDecls((decl) => {
+                if (!decl.value || !/url\(/i.test(decl.value)) {
+                    return;
+                }
+                const from = decl.source?.input?.file || decl.source?.input?.from;
+                const next = rewriteDeclarationUrls(decl.value, { from, exists });
+                if (next !== decl.value) {
+                    decl.value = next;
+                }
+            });
+        },
+    };
+}
+plugin.postcss = true;
+export default plugin;

package/dist/root.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+export type Appearance = 'light' | 'dark';
+export type ModeDocument = {
+    default?: string | null;
+    modifiers?: {
+        name: string;
+        contexts?: string[];
+    }[];
+};
+export type ModeAppearances = Record<string, Appearance>;
+export type SystemModes = {
+    light: string;
+    dark: string;
+} | null;
+type ModeState = {
+    mode: string;
+    siteMode: string;
+    preview: string | null;
+    preference: string | null;
+    appearance: Appearance;
+};
+type ModeContextValue = ModeState & {
+    setMode: (mode: string | null) => void;
+};
+/** Visitor mode. Without `SiteRoot`, returns the default light appearance. */
+export declare function useMode(): ModeContextValue;
+export declare function SiteRoot({ children, modes, appearances, systemModes, }: {
+    children: ReactNode;
+    modes: ModeDocument;
+    appearances?: ModeAppearances;
+    systemModes?: SystemModes;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=root.d.ts.map

package/dist/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../src/root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErG,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC;AAEjE,KAAK,SAAS,GAAG;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,UAAU,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAAE,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAAE,CAAC;AAe/E,8EAA8E;AAC9E,wBAAgB,OAAO,qBAEtB;AAMD,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,WAAgC,EAChC,WAAkB,GACrB,EAAE;IACC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;CAC7B,+BA6FA"}

package/dist/root.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
+const defaultAppearances = { light: 'light', dark: 'dark' };
+const detachedMode = {
+    mode: '',
+    siteMode: '',
+    preview: null,
+    preference: null,
+    appearance: 'light',
+    setMode: () => { },
+};
+const ModeContext = createContext(null);
+/** Visitor mode. Without `SiteRoot`, returns the default light appearance. */
+export function useMode() {
+    return useContext(ModeContext) ?? detachedMode;
+}
+function modeNames(modes) {
+    return modes.modifiers?.find(modifier => modifier.name === 'mode')?.contexts ?? [];
+}
+export function SiteRoot({ children, modes, appearances = defaultAppearances, systemModes = null, }) {
+    const defaultMode = modes.default ?? '';
+    const [modeState, setModeState] = useState({
+        mode: defaultMode,
+        siteMode: defaultMode,
+        preview: null,
+        preference: null,
+        appearance: appearances[defaultMode] ?? 'light',
+    });
+    const latestState = useRef(null);
+    const selectVisitorMode = useRef(null);
+    // Hydrate the server default first, then apply visitor preferences without masking mismatches.
+    useLayoutEffect(() => {
+        const storageKey = 'project-mode';
+        const names = modeNames(modes);
+        const defaultMode = modes.default ?? '';
+        const valid = (mode) => mode !== null && names.includes(mode) ? mode : null;
+        const media = systemModes ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+        let preference = latestState.current?.preference ?? null;
+        if (!latestState.current) {
+            try {
+                preference = localStorage.getItem(storageKey);
+            }
+            catch { /* Storage may be blocked; in-memory selection still works. */ }
+        }
+        preference = valid(preference);
+        let preview = process.env.NODE_ENV !== 'production' ? valid(latestState.current?.preview ?? null) : null;
+        const publishMode = () => {
+            const systemMode = systemModes && media
+                ? valid(systemModes[media.matches ? 'dark' : 'light'])
+                : null;
+            const siteMode = preference ?? systemMode ?? defaultMode;
+            const mode = preview ?? siteMode;
+            const appearance = appearances[mode] === 'dark' ? 'dark' : 'light';
+            const next = { mode, siteMode, preview, preference, appearance };
+            document.documentElement.setAttribute('data-theme', mode);
+            document.documentElement.setAttribute('data-appearance', appearance);
+            document.documentElement.style.colorScheme = appearance;
+            latestState.current = next;
+            setModeState(next);
+            window.dispatchEvent(new CustomEvent('project:mode-change', { detail: next }));
+        };
+        const onStorage = (event) => {
+            if (event.storageArea && event.storageArea !== window.localStorage)
+                return;
+            if (event.key !== storageKey && event.key !== null)
+                return;
+            preference = valid(event.newValue);
+            publishMode();
+        };
+        selectVisitorMode.current = mode => {
+            preference = valid(mode);
+            try {
+                if (preference === null)
+                    localStorage.removeItem(storageKey);
+                else
+                    localStorage.setItem(storageKey, preference);
+            }
+            catch { /* Keep selection usable when persistence is unavailable. */ }
+            publishMode();
+        };
+        const onPreview = (event) => {
+            const request = event.detail;
+            if (request.preview !== undefined) {
+                if (request.preview !== null && !names.includes(request.preview)) {
+                    request.error = 'This mode is no longer available. Reload the project variables.';
+                    return;
+                }
+                preview = request.preview;
+                publishMode();
+            }
+            if (latestState.current) {
+                request.state = latestState.current;
+            }
+        };
+        window.addEventListener('storage', onStorage);
+        media?.addEventListener('change', publishMode);
+        if (process.env.NODE_ENV !== 'production')
+            window.addEventListener('reforma:token-mode', onPreview);
+        publishMode();
+        return () => {
+            window.removeEventListener('storage', onStorage);
+            selectVisitorMode.current = null;
+            media?.removeEventListener('change', publishMode);
+            window.removeEventListener('reforma:token-mode', onPreview);
+        };
+    }, [appearances, modes, systemModes]);
+    return (_jsx(ModeContext, { value: { ...modeState, setMode: mode => selectVisitorMode.current?.(mode) }, children: children }));
+}

package/package.json

@@ -1,6 +1,60 @@
 {
-  "name": "@reforma/site",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@reforma/site",
+    "version": "0.0.2",
+    "description": "Visitor runtime for a Reforma site: mode, publish metadata, and the PostCSS url guard.",
+    "type": "module",
+    "license": "UNLICENSED",
+    "author": "Reforma, Inc. <dev@reforma.ai>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/reforma-ai/reforma",
+        "directory": "packages/site"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./postcss": {
+            "types": "./dist/postcss.d.ts",
+            "default": "./dist/postcss.js"
+        },
+        "./ambient": {
+            "types": "./dist/ambient.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "engines": {
+        "node": ">=24"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "dev:prepare": "bun run build",
+        "build:publish": "bun run build",
+        "test": "vitest run",
+        "typecheck": "tsc -p tsconfig.json --noEmit",
+        "lint": "eslint src",
+        "lint:fix": "eslint src --fix"
+    },
+    "peerDependencies": {
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8"
+    },
+    "devDependencies": {
+        "@reforma/config-typescript": "workspace:*",
+        "@reforma/eslint-config": "workspace:*",
+        "@types/node": "^24",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "happy-dom": "20.10.6",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "typescript": "^7",
+        "vitest": "^5.0.1"
+    }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.