@reforma/site 0.1.2 → 1.0.1

package/dist/analytics.d.ts

@@ -12,6 +12,7 @@ type TrackOptions = {
 /**
  * Start first-party pageview collection for a published Reforma site.
  * Reads the project site config. Only the first call installs history hooks.
+ * In the Reforma editor's canvas it reports the address to the editor and counts nothing.
  */
 export declare function initAnalytics(config: {
     analyticsEnabled: boolean;

package/dist/analytics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics.d.ts","sourceRoot":"","sources":["../src/analytics.ts"],"names":[],"mappings":"AAAA,KAAK,gBAAgB,GAAG;IACpB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,YAAY,GAAG;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AASF;;;GAGG;AACH,wBAAgB,aAAa,CACzB,MAAM,EAAE;IAAE,gBAAgB,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,EAC3F,OAAO,GAAE,gBAAqB,GAC/B,IAAI,CAqCN;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,IAAI,CA6DpE"}
+{"version":3,"file":"analytics.d.ts","sourceRoot":"","sources":["../src/analytics.ts"],"names":[],"mappings":"AAAA,KAAK,gBAAgB,GAAG;IACpB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,YAAY,GAAG;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAcF;;;;GAIG;AACH,wBAAgB,aAAa,CACzB,MAAM,EAAE;IAAE,gBAAgB,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,EAC3F,OAAO,GAAE,gBAAqB,GAC/B,IAAI,CAoDN;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,IAAI,CA6DpE"}

package/dist/analytics.js

@@ -1,3 +1,7 @@
+/** The Reforma editor names its canvas iframe this; the site checks it because it cannot see the parent's origin. */
+const EDITOR_FRAME_NAME = 'reforma-editor';
+/** What the editor listens for to follow the site's address. */
+const LOCATION_MESSAGE = 'reforma:location';
 let started = false;
 let enabled = false;
 let writeKey = '';
@@ -7,6 +11,7 @@ let unhook = null;
 /**
  * Start first-party pageview collection for a published Reforma site.
  * Reads the project site config. Only the first call installs history hooks.
+ * In the Reforma editor's canvas it reports the address to the editor and counts nothing.
  */
 export function initAnalytics(config, options = {}) {
     if (typeof window === 'undefined') {
@@ -22,6 +27,16 @@ export function initAnalytics(config, options = {}) {
         return;
     }
     started = true;
+    if (window.name === EDITOR_FRAME_NAME && window.parent !== window) {
+        enabled = false;
+        const report = () => {
+            // nosemgrep: javascript.browser.security.wildcard-postmessage-configuration.wildcard-postmessage-configuration -- only the page path, and the site cannot know the editor's origin
+            window.parent.postMessage({ type: LOCATION_MESSAGE, pathname: window.location.pathname }, '*');
+        };
+        report();
+        unhook = installHistoryHook(report);
+        return;
+    }
     enabled = config.analyticsEnabled;
     writeKey = config.analyticsWriteKey.trim();
     endpoint = config.analyticsEndpoint.trim();

package/dist/index.d.ts

@@ -1,7 +1,5 @@
 export { initAnalytics, track } from './analytics.js';
 export { ErrorState } from './error-state.js';
 export { projectMetadata, projectRobots } from './metadata.js';
-export { SiteRoot, useMode } from './root.js';
 export type { FixErrorDetail } from './error-state.js';
-export type { Appearance, ModeAppearances, ModeDocument, SystemModes } from './root.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,4 +1,3 @@
 export { initAnalytics, track } from './analytics.js';
 export { ErrorState } from './error-state.js';
 export { projectMetadata, projectRobots } from './metadata.js';
-export { SiteRoot, useMode } from './root.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@reforma/site",
-    "version": "0.1.2",
-    "description": "Visitor runtime for a Reforma site: mode, publish metadata, and the PostCSS url guard.",
+    "version": "1.0.1",
+    "description": "Visitor runtime for a Reforma site: publish metadata, analytics, and the PostCSS url guard.",
     "type": "module",
     "license": "UNLICENSED",
     "author": "Reforma, Inc. <dev@reforma.ai>",

package/dist/root.d.ts

@@ -1,34 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,109 +0,0 @@
-'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 }));
-}