@olonjs/cli 3.0.148 → 3.0.150

package/assets/src_tenant_alpha.sh

@@ -1817,11 +1817,14 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/react": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@olonjs/core": "^1.1.15",
+    "@olonjs/core": "^1.1.17",
+    "@olonjs/react": "^0.1.0",
+    "@olonjs/studio": "^0.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",
     "motion": "^12.23.24",
+    "radix-ui": "^1.4.3",
     "react": "^19.0.0",
     "react-markdown": "^9.0.1",
     "react-dom": "^19.0.0",
@@ -2191,8 +2194,6 @@ async function readJsonFile(filePath) {
 }
 
 async function expandCollectionTarget(slug, pageFilePath) {
-  if (!/\[[^\]]+\]/.test(slug)) return [slug];
-
   let pageConfig;
   try {
     pageConfig = await readJsonFile(pageFilePath);
@@ -2206,7 +2207,14 @@ async function expandCollectionTarget(slug, pageFilePath) {
   }
 
   const token = `[${binding.paramKey}]`;
-  if (!slug.includes(token)) return [slug];
+  // Prefer authored route pattern (page.slug) when the file path is not parametric.
+  const authoredSlug =
+    typeof pageConfig.slug === 'string'
+      ? pageConfig.slug.replace(/\\/g, '/').replace(/^\/+|\/+$/g, '')
+      : '';
+  const routePattern =
+    authoredSlug.includes(token) ? authoredSlug : slug.includes(token) ? slug : '';
+  if (!routePattern) return [slug];
 
   const collectionPath = path.resolve(collectionsDir, binding.source, `${binding.source}.json`);
   let collection;
@@ -2218,7 +2226,9 @@ async function expandCollectionTarget(slug, pageFilePath) {
 
   if (!collection || typeof collection !== 'object' || Array.isArray(collection)) return [slug];
   const itemIds = Object.keys(collection).sort((a, b) => a.localeCompare(b));
-  return itemIds.length > 0 ? itemIds.map((itemId) => slug.replace(token, itemId)) : [slug];
+  return itemIds.length > 0
+    ? itemIds.map((itemId) => routePattern.replace(token, itemId))
+    : [slug];
 }
 
 async function listJsonFilesRecursive(dir) {
@@ -2942,10 +2952,9 @@ cat << 'END_OF_FILE_CONTENT' > "src/App.tsx"
  * Bootstrap, persistence, and engine wiring — logic lives in lib/hooks.
  */
 import { useEffect, useMemo } from 'react';
-import { JsonPagesEngine } from '@olonjs/core';
+import { JsonPagesEngine, OlonFormsContext } from '@olonjs/react';
 import type { JsonPagesConfig, ProjectState } from '@olonjs/core';
 import { withBasePath } from '@olonjs/core';
-import { OlonFormsContext } from '@olonjs/core';
 import { ComponentRegistry } from '@/lib/ComponentRegistry';
 import { CollectionRegistry } from '@/lib/CollectionRegistry';
 import { SECTION_SCHEMAS } from '@/lib/schemas';
@@ -2981,6 +2990,7 @@ import { useAssetsManifest } from '@/lib/useAssetsManifest';
 import { useCloudSave } from '@/lib/useCloudSave';
 import { useTenantBootstrap } from '@/lib/useTenantBootstrap';
 import { useAdminStudioContent } from '@/lib/cloud/useAdminStudioContent';
+import { hydrateLocalProjectState } from '@/lib/hydrateLocalProjectState';
 
 import tenantCss from './index.css?inline';
 
@@ -3047,7 +3057,10 @@ function App() {
     };
   }, [canPaintVisitor, bootstrap.enginePages, bootstrap.siteConfig]);
 
-  const engineCollections = bootstrap.isHotSaveMode ? bootstrap.collections : fileCollections;
+  const engineCollections =
+    bootstrap.isHotSaveMode || Object.keys(bootstrap.collections).length > 0
+      ? bootstrap.collections
+      : fileCollections;
   const engineRefDocuments = useMemo(
     () => ({
       'menu.json': bootstrap.menuConfig,
@@ -3085,6 +3098,15 @@ function App() {
         });
         const body = (await res.json().catch(() => ({}))) as { error?: string };
         if (!res.ok) throw new Error(body.error ?? `Save to file failed: ${res.status}`);
+        hydrateLocalProjectState({
+          state,
+          slug,
+          setPages: bootstrap.setPages,
+          setSiteConfig: bootstrap.setSiteConfig,
+          setMenuConfig: bootstrap.setMenuConfig,
+          setThemeConfig: bootstrap.setThemeConfig,
+          setCollections: bootstrap.setCollections,
+        });
       },
       async hotSave(state: ProjectState, slug: string): Promise<void> {
         if (!bootstrap.isCloudMode || !CLOUD_API_URL || !CLOUD_API_KEY) {
@@ -4064,7 +4086,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/form-demo/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/form-demo/View.tsx"
 import { Icon } from '@/lib/IconResolver';
-import { useFormState } from '@olonjs/core';
+import { useFormState } from '@olonjs/react';
 import type { FormDemoData } from './types';
 
 type FormDemoViewProps = {
@@ -5609,7 +5631,8 @@ import {
   Code2, Quote, SquareCode,
   Link2, Unlink2, ImagePlus, Eraser,
 } from 'lucide-react';
-import { STUDIO_EVENTS, useConfig, useStudio } from '@olonjs/core';
+import { STUDIO_EVENTS } from '@olonjs/core';
+import { useConfig, useStudio } from '@olonjs/react';
 import type { TiptapData, TiptapSettings } from './types';
 
 // ── UI primitives ─────────────────────────────────────────────────
@@ -8569,7 +8592,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/collections/libri/libri.json"
     "id": "1984",
     "title": "1984",
     "author": {
-      "$ref": "../autori/autori.json#/alessandro-baricco"
+      "$ref": "../autori/autori.json#/george-orwell"
     },
     "year": 1949,
     "genre": "Distopia",
@@ -9673,14 +9696,8 @@ echo "Creating src/entry-ssg.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/entry-ssg.tsx"
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom/server';
-import {
-  ConfigProvider,
-  PageRenderer,
-  StudioProvider,
-  contract,
-  resolvePageMatchFromRegistry,
-  resolveRuntimeConfig,
-} from '@olonjs/core';
+import { ConfigProvider, PageRenderer, StudioProvider } from '@olonjs/react';
+import { contract, resolvePageMatchFromRegistry, resolveRuntimeConfig } from '@olonjs/core';
 import type { JsonPagesConfig, PageConfig, SiteConfig, ThemeConfig } from '@/types';
 import { ThemeProvider } from '@/components/ThemeProvider';
 import { ComponentRegistry } from '@/lib/ComponentRegistry';
@@ -11432,7 +11449,6 @@ export function coerceSiteConfig(value: unknown): SiteConfig | null {
   }
   if (!isObjectRecord(input)) return null;
   if (!isObjectRecord(input.identity)) return null;
-  if (!Array.isArray(input.pages)) return null;
 
   return input as unknown as SiteConfig;
 }
@@ -11699,7 +11715,6 @@ export function getHydratedData(
 }
 
 END_OF_FILE_CONTENT
-mkdir -p "src/lib/editorial"
 echo "Creating src/lib/getFileCollections.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/getFileCollections.ts"
 import type { JsonPagesConfig } from '@/types';
@@ -11790,6 +11805,47 @@ export function getFilePages(): Record<string, PageConfig> {
   return record;
 }
 
+END_OF_FILE_CONTENT
+echo "Creating src/lib/hydrateLocalProjectState.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/lib/hydrateLocalProjectState.ts"
+import type { JsonPagesConfig, ProjectState } from '@olonjs/core';
+import type { MenuConfig, PageConfig, SiteConfig, ThemeConfig } from '@/types';
+
+type HydrateLocalProjectStateArgs = {
+  state: ProjectState;
+  slug: string;
+  setPages: (updater: (prev: Record<string, PageConfig>) => Record<string, PageConfig>) => void;
+  setSiteConfig: (site: SiteConfig) => void;
+  setMenuConfig: (menu: MenuConfig) => void;
+  setThemeConfig: (theme: ThemeConfig) => void;
+  setCollections: (collections: NonNullable<JsonPagesConfig['collections']>) => void;
+};
+
+/**
+ * Write-through hydrate after local `/api/save-to-file`.
+ * Pushes only the slices present in the saved ProjectState into bootstrap state —
+ * no disk re-read, no full remount. Brand-agnostic.
+ */
+export function hydrateLocalProjectState({
+  state,
+  slug,
+  setPages,
+  setSiteConfig,
+  setMenuConfig,
+  setThemeConfig,
+  setCollections,
+}: HydrateLocalProjectStateArgs): void {
+  if (state.menu != null) setMenuConfig(state.menu);
+  if (state.site != null) setSiteConfig(state.site);
+  if (state.theme != null) setThemeConfig(state.theme);
+  if (state.page != null) {
+    setPages((prev) => ({ ...prev, [slug]: state.page }));
+  }
+  if (state.collections != null) {
+    setCollections(state.collections as NonNullable<JsonPagesConfig['collections']>);
+  }
+}
+
 END_OF_FILE_CONTENT
 echo "Creating src/lib/schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/schemas.ts"
@@ -12862,10 +12918,18 @@ export function buildThemeFontVarsCss(input: unknown): string {
   const tokens = isObjectRecord(input.tokens) ? input.tokens : null;
   const typography = tokens && isObjectRecord(tokens.typography) ? tokens.typography : null;
   const fontFamily = typography && isObjectRecord(typography.fontFamily) ? typography.fontFamily : null;
-  const primary = typeof fontFamily?.primary === 'string' ? fontFamily.primary : "'Instrument Sans', system-ui, sans-serif";
-  const serif = typeof fontFamily?.serif === 'string' ? fontFamily.serif : "'Instrument Serif', Georgia, serif";
+  const primary =
+    typeof fontFamily?.primary === 'string'
+      ? fontFamily.primary
+      : "'Instrument Sans', system-ui, sans-serif";
+  const display =
+    typeof fontFamily?.display === 'string'
+      ? fontFamily.display
+      : typeof fontFamily?.serif === 'string'
+        ? fontFamily.serif
+        : "'Instrument Serif', Georgia, serif";
   const mono = typeof fontFamily?.mono === 'string' ? fontFamily.mono : "'JetBrains Mono', monospace";
-  return `:root{--theme-font-primary:${primary};--theme-font-serif:${serif};--theme-font-mono:${mono};}`;
+  return `:root{--theme-font-primary:${primary};--theme-font-display:${display};--theme-font-mono:${mono};}`;
 }
 
 const REMOTE_CSS_LINK_ATTR = 'data-jp-tenant-remote-css';
@@ -12878,8 +12942,9 @@ function isRemoteStylesheetHref(value: string): boolean {
 export function extractLeadingRemoteCssImports(cssText: string): { hrefs: string[]; rest: string } {
   const hrefs = new Set<string>();
   const leadingTriviaPattern = /^(?:\s+|\/\*[\s\S]*?\*\/)*/;
+  // Vite/Tailwind may emit `@import url("...")` or compacted `@import"https://..."`.
   const importPattern =
-    /^@import\s+url\(\s*(?:'([^']+)'|"([^"]+)"|([^'")\s][^)]*))\s*\)\s*([^;]*);/i;
+    /^@import(?:\s*url\(\s*(?:'([^']+)'|"([^"]+)"|([^'")\s][^)]*))\s*\)|\s*(['"])([^'"]+)\4)\s*([^;]*);/i;
   let rest = cssText;
 
   for (;;) {
@@ -12891,8 +12956,8 @@ export function extractLeadingRemoteCssImports(cssText: string): { hrefs: string
     const match = rest.match(importPattern);
     if (!match) break;
 
-    const href = (match[1] ?? match[2] ?? match[3] ?? '').trim();
-    const trailingDirectives = (match[4] ?? '').trim();
+    const href = (match[1] ?? match[2] ?? match[3] ?? match[5] ?? '').trim();
+    const trailingDirectives = (match[6] ?? '').trim();
 
     if (!isRemoteStylesheetHref(href) || trailingDirectives.length > 0) {
       break;
@@ -13094,7 +13159,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/lib/useCloudSave.ts"
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { DeployPhase, ProjectState, StepId } from '@olonjs/core';
 import { DEPLOY_STEPS, startCloudSaveStream } from '@olonjs/core';
-import { CLOUD_API_KEY, CLOUD_API_URL } from '@/lib/tenantEnv';
+import { APP_BASE_PATH, CLOUD_API_KEY, CLOUD_API_URL } from '@/lib/tenantEnv';
 
 interface CloudSaveUiState {
   isOpen: boolean;
@@ -13120,6 +13185,100 @@ function stepProgress(doneSteps: StepId[]): number {
   return Math.round((doneSteps.length / DEPLOY_STEPS.length) * 100);
 }
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function cloneJson<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+function normalizePathSegments(value: string): string {
+  return value
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+    .join('/');
+}
+
+function resolveAdminContentSlug(): string | null {
+  if (typeof window === 'undefined') return null;
+
+  const normalizedBase = APP_BASE_PATH.replace(/\/+$/, '');
+  let path = window.location.pathname;
+  if (normalizedBase && normalizedBase !== '/' && path.startsWith(normalizedBase)) {
+    path = path.slice(normalizedBase.length) || '/';
+  }
+
+  const slug = normalizePathSegments(path.replace(/^\/admin\/?/, ''));
+  return slug || null;
+}
+
+function resolveTemplateParamValue(templateSlug: string, concreteSlug: string, paramKey: string): string | null {
+  const templateSegments = normalizePathSegments(templateSlug).split('/').filter(Boolean);
+  const concreteSegments = normalizePathSegments(concreteSlug).split('/').filter(Boolean);
+  if (templateSegments.length !== concreteSegments.length) return null;
+
+  for (let index = 0; index < templateSegments.length; index += 1) {
+    const templateSegment = templateSegments[index];
+    const concreteSegment = concreteSegments[index];
+    const paramMatch = templateSegment.match(/^\[([A-Za-z0-9_-]+)\]$/);
+    if (paramMatch?.[1] === paramKey) return concreteSegment;
+    if (!paramMatch && templateSegment !== concreteSegment) return null;
+  }
+
+  return null;
+}
+
+function hasCollectionCurrentRef(value: unknown): boolean {
+  if (Array.isArray(value)) return value.some(hasCollectionCurrentRef);
+  if (!isRecord(value)) return false;
+  if (value.$ref === 'collection:current') return true;
+  return Object.values(value).some(hasCollectionCurrentRef);
+}
+
+function replaceCollectionCurrentRefs(value: unknown, currentItem: unknown): unknown {
+  if (Array.isArray(value)) return value.map((item) => replaceCollectionCurrentRefs(item, currentItem));
+  if (!isRecord(value)) return value;
+  if (value.$ref === 'collection:current') return cloneJson(currentItem);
+  return Object.fromEntries(
+    Object.entries(value).map(([key, entryValue]) => [key, replaceCollectionCurrentRefs(entryValue, currentItem)]),
+  );
+}
+
+function buildSaveStreamPagePayload(state: ProjectState, fallbackSlug: string): { slug: string; page: ProjectState['page'] } {
+  const page = state.page;
+  const collection = page.collection;
+  if (!collection || !hasCollectionCurrentRef(page)) {
+    return { slug: fallbackSlug, page };
+  }
+
+  const concreteSlug = resolveAdminContentSlug();
+  if (!concreteSlug) {
+    throw new Error('Cannot resolve concrete admin route for collection page save.');
+  }
+
+  const paramValue = resolveTemplateParamValue(page.slug, concreteSlug, collection.paramKey);
+  if (!paramValue) {
+    throw new Error(`Cannot resolve collection param "${collection.paramKey}" from route "${concreteSlug}".`);
+  }
+
+  const collectionDocument = state.collections?.[collection.source];
+  const currentItem = isRecord(collectionDocument) ? collectionDocument[paramValue] : undefined;
+  if (!currentItem) {
+    throw new Error(`Cannot resolve collection item "${collection.source}/${paramValue}" for save.`);
+  }
+
+  const resolvedPage = replaceCollectionCurrentRefs(page, currentItem) as ProjectState['page'];
+  return {
+    slug: concreteSlug,
+    page: {
+      ...resolvedPage,
+      slug: concreteSlug,
+    },
+  };
+}
+
 export function useCloudSave() {
   const [cloudSaveUi, setCloudSaveUi] = useState<CloudSaveUiState>(getInitialCloudSaveUiState);
   const activeCloudSaveController = useRef<AbortController | null>(null);
@@ -13153,12 +13312,18 @@ export function useCloudSave() {
       });
 
       try {
+        const savePage = buildSaveStreamPagePayload(payload.state, payload.slug);
         await startCloudSaveStream({
           apiBaseUrl: CLOUD_API_URL,
           apiKey: CLOUD_API_KEY,
-          path: `src/data/pages/${payload.slug}.json`,
-          content: payload.state.page,
-          message: `Content update for ${payload.slug} via Visual Editor`,
+          path: `src/data/pages/${savePage.slug}.json`,
+          content: savePage.page,
+          additionalFiles: [
+            { path: 'src/data/config/site.json', content: payload.state.site },
+            { path: 'src/data/config/menu.json', content: payload.state.menu },
+          ],
+          changedScopes: ['page', 'site', 'menu'],
+          message: `Content update for ${savePage.slug} via Visual Editor`,
           signal: controller.signal,
           onStep: (event) => {
             setCloudSaveUi((prev) => {
@@ -13322,7 +13487,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/lib/useOlonForms.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/useOlonForms.ts"
 import { useCallback, useEffect, useState } from 'react';
-import type { FormState } from '@olonjs/core';
+import type { FormState } from '@olonjs/react';
 
 const API_BASE =
   (import.meta.env.VITE_OLONJS_CLOUD_URL as string | undefined) ??
@@ -13598,7 +13763,7 @@ export function useTenantBootstrap({
 
   const [menuConfig, setMenuConfig] = useState<MenuConfig>(menuConfigSeed);
 
-  const [themeConfig] = useState<ThemeConfig>(themeConfigSeed);
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>(themeConfigSeed);
 
   const [collections, setCollections] = useState<NonNullable<JsonPagesConfig['collections']>>(EMPTY_COLLECTIONS);
 
@@ -14114,6 +14279,10 @@ export function useTenantBootstrap({
 
     setSiteConfig,
 
+    setMenuConfig,
+
+    setThemeConfig,
+
     setCollections,
 
     cloudApiCandidates,

package/assets/templates/alpha/src_tenant.sh

@@ -1817,11 +1817,14 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/react": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@olonjs/core": "^1.1.15",
+    "@olonjs/core": "^1.1.17",
+    "@olonjs/react": "^0.1.0",
+    "@olonjs/studio": "^0.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",
     "motion": "^12.23.24",
+    "radix-ui": "^1.4.3",
     "react": "^19.0.0",
     "react-markdown": "^9.0.1",
     "react-dom": "^19.0.0",
@@ -2191,8 +2194,6 @@ async function readJsonFile(filePath) {
 }
 
 async function expandCollectionTarget(slug, pageFilePath) {
-  if (!/\[[^\]]+\]/.test(slug)) return [slug];
-
   let pageConfig;
   try {
     pageConfig = await readJsonFile(pageFilePath);
@@ -2206,7 +2207,14 @@ async function expandCollectionTarget(slug, pageFilePath) {
   }
 
   const token = `[${binding.paramKey}]`;
-  if (!slug.includes(token)) return [slug];
+  // Prefer authored route pattern (page.slug) when the file path is not parametric.
+  const authoredSlug =
+    typeof pageConfig.slug === 'string'
+      ? pageConfig.slug.replace(/\\/g, '/').replace(/^\/+|\/+$/g, '')
+      : '';
+  const routePattern =
+    authoredSlug.includes(token) ? authoredSlug : slug.includes(token) ? slug : '';
+  if (!routePattern) return [slug];
 
   const collectionPath = path.resolve(collectionsDir, binding.source, `${binding.source}.json`);
   let collection;
@@ -2218,7 +2226,9 @@ async function expandCollectionTarget(slug, pageFilePath) {
 
   if (!collection || typeof collection !== 'object' || Array.isArray(collection)) return [slug];
   const itemIds = Object.keys(collection).sort((a, b) => a.localeCompare(b));
-  return itemIds.length > 0 ? itemIds.map((itemId) => slug.replace(token, itemId)) : [slug];
+  return itemIds.length > 0
+    ? itemIds.map((itemId) => routePattern.replace(token, itemId))
+    : [slug];
 }
 
 async function listJsonFilesRecursive(dir) {
@@ -2942,10 +2952,9 @@ cat << 'END_OF_FILE_CONTENT' > "src/App.tsx"
  * Bootstrap, persistence, and engine wiring — logic lives in lib/hooks.
  */
 import { useEffect, useMemo } from 'react';
-import { JsonPagesEngine } from '@olonjs/core';
+import { JsonPagesEngine, OlonFormsContext } from '@olonjs/react';
 import type { JsonPagesConfig, ProjectState } from '@olonjs/core';
 import { withBasePath } from '@olonjs/core';
-import { OlonFormsContext } from '@olonjs/core';
 import { ComponentRegistry } from '@/lib/ComponentRegistry';
 import { CollectionRegistry } from '@/lib/CollectionRegistry';
 import { SECTION_SCHEMAS } from '@/lib/schemas';
@@ -2981,6 +2990,7 @@ import { useAssetsManifest } from '@/lib/useAssetsManifest';
 import { useCloudSave } from '@/lib/useCloudSave';
 import { useTenantBootstrap } from '@/lib/useTenantBootstrap';
 import { useAdminStudioContent } from '@/lib/cloud/useAdminStudioContent';
+import { hydrateLocalProjectState } from '@/lib/hydrateLocalProjectState';
 
 import tenantCss from './index.css?inline';
 
@@ -3047,7 +3057,10 @@ function App() {
     };
   }, [canPaintVisitor, bootstrap.enginePages, bootstrap.siteConfig]);
 
-  const engineCollections = bootstrap.isHotSaveMode ? bootstrap.collections : fileCollections;
+  const engineCollections =
+    bootstrap.isHotSaveMode || Object.keys(bootstrap.collections).length > 0
+      ? bootstrap.collections
+      : fileCollections;
   const engineRefDocuments = useMemo(
     () => ({
       'menu.json': bootstrap.menuConfig,
@@ -3085,6 +3098,15 @@ function App() {
         });
         const body = (await res.json().catch(() => ({}))) as { error?: string };
         if (!res.ok) throw new Error(body.error ?? `Save to file failed: ${res.status}`);
+        hydrateLocalProjectState({
+          state,
+          slug,
+          setPages: bootstrap.setPages,
+          setSiteConfig: bootstrap.setSiteConfig,
+          setMenuConfig: bootstrap.setMenuConfig,
+          setThemeConfig: bootstrap.setThemeConfig,
+          setCollections: bootstrap.setCollections,
+        });
       },
       async hotSave(state: ProjectState, slug: string): Promise<void> {
         if (!bootstrap.isCloudMode || !CLOUD_API_URL || !CLOUD_API_KEY) {
@@ -4064,7 +4086,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/form-demo/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/form-demo/View.tsx"
 import { Icon } from '@/lib/IconResolver';
-import { useFormState } from '@olonjs/core';
+import { useFormState } from '@olonjs/react';
 import type { FormDemoData } from './types';
 
 type FormDemoViewProps = {
@@ -5609,7 +5631,8 @@ import {
   Code2, Quote, SquareCode,
   Link2, Unlink2, ImagePlus, Eraser,
 } from 'lucide-react';
-import { STUDIO_EVENTS, useConfig, useStudio } from '@olonjs/core';
+import { STUDIO_EVENTS } from '@olonjs/core';
+import { useConfig, useStudio } from '@olonjs/react';
 import type { TiptapData, TiptapSettings } from './types';
 
 // ── UI primitives ─────────────────────────────────────────────────
@@ -8569,7 +8592,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/collections/libri/libri.json"
     "id": "1984",
     "title": "1984",
     "author": {
-      "$ref": "../autori/autori.json#/alessandro-baricco"
+      "$ref": "../autori/autori.json#/george-orwell"
     },
     "year": 1949,
     "genre": "Distopia",
@@ -9673,14 +9696,8 @@ echo "Creating src/entry-ssg.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/entry-ssg.tsx"
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom/server';
-import {
-  ConfigProvider,
-  PageRenderer,
-  StudioProvider,
-  contract,
-  resolvePageMatchFromRegistry,
-  resolveRuntimeConfig,
-} from '@olonjs/core';
+import { ConfigProvider, PageRenderer, StudioProvider } from '@olonjs/react';
+import { contract, resolvePageMatchFromRegistry, resolveRuntimeConfig } from '@olonjs/core';
 import type { JsonPagesConfig, PageConfig, SiteConfig, ThemeConfig } from '@/types';
 import { ThemeProvider } from '@/components/ThemeProvider';
 import { ComponentRegistry } from '@/lib/ComponentRegistry';
@@ -11432,7 +11449,6 @@ export function coerceSiteConfig(value: unknown): SiteConfig | null {
   }
   if (!isObjectRecord(input)) return null;
   if (!isObjectRecord(input.identity)) return null;
-  if (!Array.isArray(input.pages)) return null;
 
   return input as unknown as SiteConfig;
 }
@@ -11699,7 +11715,6 @@ export function getHydratedData(
 }
 
 END_OF_FILE_CONTENT
-mkdir -p "src/lib/editorial"
 echo "Creating src/lib/getFileCollections.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/getFileCollections.ts"
 import type { JsonPagesConfig } from '@/types';
@@ -11790,6 +11805,47 @@ export function getFilePages(): Record<string, PageConfig> {
   return record;
 }
 
+END_OF_FILE_CONTENT
+echo "Creating src/lib/hydrateLocalProjectState.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/lib/hydrateLocalProjectState.ts"
+import type { JsonPagesConfig, ProjectState } from '@olonjs/core';
+import type { MenuConfig, PageConfig, SiteConfig, ThemeConfig } from '@/types';
+
+type HydrateLocalProjectStateArgs = {
+  state: ProjectState;
+  slug: string;
+  setPages: (updater: (prev: Record<string, PageConfig>) => Record<string, PageConfig>) => void;
+  setSiteConfig: (site: SiteConfig) => void;
+  setMenuConfig: (menu: MenuConfig) => void;
+  setThemeConfig: (theme: ThemeConfig) => void;
+  setCollections: (collections: NonNullable<JsonPagesConfig['collections']>) => void;
+};
+
+/**
+ * Write-through hydrate after local `/api/save-to-file`.
+ * Pushes only the slices present in the saved ProjectState into bootstrap state —
+ * no disk re-read, no full remount. Brand-agnostic.
+ */
+export function hydrateLocalProjectState({
+  state,
+  slug,
+  setPages,
+  setSiteConfig,
+  setMenuConfig,
+  setThemeConfig,
+  setCollections,
+}: HydrateLocalProjectStateArgs): void {
+  if (state.menu != null) setMenuConfig(state.menu);
+  if (state.site != null) setSiteConfig(state.site);
+  if (state.theme != null) setThemeConfig(state.theme);
+  if (state.page != null) {
+    setPages((prev) => ({ ...prev, [slug]: state.page }));
+  }
+  if (state.collections != null) {
+    setCollections(state.collections as NonNullable<JsonPagesConfig['collections']>);
+  }
+}
+
 END_OF_FILE_CONTENT
 echo "Creating src/lib/schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/schemas.ts"
@@ -12862,10 +12918,18 @@ export function buildThemeFontVarsCss(input: unknown): string {
   const tokens = isObjectRecord(input.tokens) ? input.tokens : null;
   const typography = tokens && isObjectRecord(tokens.typography) ? tokens.typography : null;
   const fontFamily = typography && isObjectRecord(typography.fontFamily) ? typography.fontFamily : null;
-  const primary = typeof fontFamily?.primary === 'string' ? fontFamily.primary : "'Instrument Sans', system-ui, sans-serif";
-  const serif = typeof fontFamily?.serif === 'string' ? fontFamily.serif : "'Instrument Serif', Georgia, serif";
+  const primary =
+    typeof fontFamily?.primary === 'string'
+      ? fontFamily.primary
+      : "'Instrument Sans', system-ui, sans-serif";
+  const display =
+    typeof fontFamily?.display === 'string'
+      ? fontFamily.display
+      : typeof fontFamily?.serif === 'string'
+        ? fontFamily.serif
+        : "'Instrument Serif', Georgia, serif";
   const mono = typeof fontFamily?.mono === 'string' ? fontFamily.mono : "'JetBrains Mono', monospace";
-  return `:root{--theme-font-primary:${primary};--theme-font-serif:${serif};--theme-font-mono:${mono};}`;
+  return `:root{--theme-font-primary:${primary};--theme-font-display:${display};--theme-font-mono:${mono};}`;
 }
 
 const REMOTE_CSS_LINK_ATTR = 'data-jp-tenant-remote-css';
@@ -12878,8 +12942,9 @@ function isRemoteStylesheetHref(value: string): boolean {
 export function extractLeadingRemoteCssImports(cssText: string): { hrefs: string[]; rest: string } {
   const hrefs = new Set<string>();
   const leadingTriviaPattern = /^(?:\s+|\/\*[\s\S]*?\*\/)*/;
+  // Vite/Tailwind may emit `@import url("...")` or compacted `@import"https://..."`.
   const importPattern =
-    /^@import\s+url\(\s*(?:'([^']+)'|"([^"]+)"|([^'")\s][^)]*))\s*\)\s*([^;]*);/i;
+    /^@import(?:\s*url\(\s*(?:'([^']+)'|"([^"]+)"|([^'")\s][^)]*))\s*\)|\s*(['"])([^'"]+)\4)\s*([^;]*);/i;
   let rest = cssText;
 
   for (;;) {
@@ -12891,8 +12956,8 @@ export function extractLeadingRemoteCssImports(cssText: string): { hrefs: string
     const match = rest.match(importPattern);
     if (!match) break;
 
-    const href = (match[1] ?? match[2] ?? match[3] ?? '').trim();
-    const trailingDirectives = (match[4] ?? '').trim();
+    const href = (match[1] ?? match[2] ?? match[3] ?? match[5] ?? '').trim();
+    const trailingDirectives = (match[6] ?? '').trim();
 
     if (!isRemoteStylesheetHref(href) || trailingDirectives.length > 0) {
       break;
@@ -13094,7 +13159,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/lib/useCloudSave.ts"
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { DeployPhase, ProjectState, StepId } from '@olonjs/core';
 import { DEPLOY_STEPS, startCloudSaveStream } from '@olonjs/core';
-import { CLOUD_API_KEY, CLOUD_API_URL } from '@/lib/tenantEnv';
+import { APP_BASE_PATH, CLOUD_API_KEY, CLOUD_API_URL } from '@/lib/tenantEnv';
 
 interface CloudSaveUiState {
   isOpen: boolean;
@@ -13120,6 +13185,100 @@ function stepProgress(doneSteps: StepId[]): number {
   return Math.round((doneSteps.length / DEPLOY_STEPS.length) * 100);
 }
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function cloneJson<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+function normalizePathSegments(value: string): string {
+  return value
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+    .join('/');
+}
+
+function resolveAdminContentSlug(): string | null {
+  if (typeof window === 'undefined') return null;
+
+  const normalizedBase = APP_BASE_PATH.replace(/\/+$/, '');
+  let path = window.location.pathname;
+  if (normalizedBase && normalizedBase !== '/' && path.startsWith(normalizedBase)) {
+    path = path.slice(normalizedBase.length) || '/';
+  }
+
+  const slug = normalizePathSegments(path.replace(/^\/admin\/?/, ''));
+  return slug || null;
+}
+
+function resolveTemplateParamValue(templateSlug: string, concreteSlug: string, paramKey: string): string | null {
+  const templateSegments = normalizePathSegments(templateSlug).split('/').filter(Boolean);
+  const concreteSegments = normalizePathSegments(concreteSlug).split('/').filter(Boolean);
+  if (templateSegments.length !== concreteSegments.length) return null;
+
+  for (let index = 0; index < templateSegments.length; index += 1) {
+    const templateSegment = templateSegments[index];
+    const concreteSegment = concreteSegments[index];
+    const paramMatch = templateSegment.match(/^\[([A-Za-z0-9_-]+)\]$/);
+    if (paramMatch?.[1] === paramKey) return concreteSegment;
+    if (!paramMatch && templateSegment !== concreteSegment) return null;
+  }
+
+  return null;
+}
+
+function hasCollectionCurrentRef(value: unknown): boolean {
+  if (Array.isArray(value)) return value.some(hasCollectionCurrentRef);
+  if (!isRecord(value)) return false;
+  if (value.$ref === 'collection:current') return true;
+  return Object.values(value).some(hasCollectionCurrentRef);
+}
+
+function replaceCollectionCurrentRefs(value: unknown, currentItem: unknown): unknown {
+  if (Array.isArray(value)) return value.map((item) => replaceCollectionCurrentRefs(item, currentItem));
+  if (!isRecord(value)) return value;
+  if (value.$ref === 'collection:current') return cloneJson(currentItem);
+  return Object.fromEntries(
+    Object.entries(value).map(([key, entryValue]) => [key, replaceCollectionCurrentRefs(entryValue, currentItem)]),
+  );
+}
+
+function buildSaveStreamPagePayload(state: ProjectState, fallbackSlug: string): { slug: string; page: ProjectState['page'] } {
+  const page = state.page;
+  const collection = page.collection;
+  if (!collection || !hasCollectionCurrentRef(page)) {
+    return { slug: fallbackSlug, page };
+  }
+
+  const concreteSlug = resolveAdminContentSlug();
+  if (!concreteSlug) {
+    throw new Error('Cannot resolve concrete admin route for collection page save.');
+  }
+
+  const paramValue = resolveTemplateParamValue(page.slug, concreteSlug, collection.paramKey);
+  if (!paramValue) {
+    throw new Error(`Cannot resolve collection param "${collection.paramKey}" from route "${concreteSlug}".`);
+  }
+
+  const collectionDocument = state.collections?.[collection.source];
+  const currentItem = isRecord(collectionDocument) ? collectionDocument[paramValue] : undefined;
+  if (!currentItem) {
+    throw new Error(`Cannot resolve collection item "${collection.source}/${paramValue}" for save.`);
+  }
+
+  const resolvedPage = replaceCollectionCurrentRefs(page, currentItem) as ProjectState['page'];
+  return {
+    slug: concreteSlug,
+    page: {
+      ...resolvedPage,
+      slug: concreteSlug,
+    },
+  };
+}
+
 export function useCloudSave() {
   const [cloudSaveUi, setCloudSaveUi] = useState<CloudSaveUiState>(getInitialCloudSaveUiState);
   const activeCloudSaveController = useRef<AbortController | null>(null);
@@ -13153,12 +13312,18 @@ export function useCloudSave() {
       });
 
       try {
+        const savePage = buildSaveStreamPagePayload(payload.state, payload.slug);
         await startCloudSaveStream({
           apiBaseUrl: CLOUD_API_URL,
           apiKey: CLOUD_API_KEY,
-          path: `src/data/pages/${payload.slug}.json`,
-          content: payload.state.page,
-          message: `Content update for ${payload.slug} via Visual Editor`,
+          path: `src/data/pages/${savePage.slug}.json`,
+          content: savePage.page,
+          additionalFiles: [
+            { path: 'src/data/config/site.json', content: payload.state.site },
+            { path: 'src/data/config/menu.json', content: payload.state.menu },
+          ],
+          changedScopes: ['page', 'site', 'menu'],
+          message: `Content update for ${savePage.slug} via Visual Editor`,
           signal: controller.signal,
           onStep: (event) => {
             setCloudSaveUi((prev) => {
@@ -13322,7 +13487,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/lib/useOlonForms.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/useOlonForms.ts"
 import { useCallback, useEffect, useState } from 'react';
-import type { FormState } from '@olonjs/core';
+import type { FormState } from '@olonjs/react';
 
 const API_BASE =
   (import.meta.env.VITE_OLONJS_CLOUD_URL as string | undefined) ??
@@ -13598,7 +13763,7 @@ export function useTenantBootstrap({
 
   const [menuConfig, setMenuConfig] = useState<MenuConfig>(menuConfigSeed);
 
-  const [themeConfig] = useState<ThemeConfig>(themeConfigSeed);
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>(themeConfigSeed);
 
   const [collections, setCollections] = useState<NonNullable<JsonPagesConfig['collections']>>(EMPTY_COLLECTIONS);
 
@@ -14114,6 +14279,10 @@ export function useTenantBootstrap({
 
     setSiteConfig,
 
+    setMenuConfig,
+
+    setThemeConfig,
+
     setCollections,
 
     cloudApiCandidates,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@olonjs/cli",
-    "version": "3.0.148",
+    "version": "3.0.150",
     "description": "The Sovereign CLI Engine for OlonJS.",
     "type": "module",
     "bin": {