feat(studio+render): wire theme picker → saved_shared_colors → FlexStory render

Closes the theme→render gap: the studio theme picker now actually drives a
FlexStory render's colours. GetFlexStoryProps reads saved_shared_colors by
element_key (accentColor/secondaryColor/backgroundColor/textColor), but the studio
only wrote the theme into scene_data — so the picker never reached the MP4.

- studio-svc: UpdateSharedColorsAsync upserts saved_shared_colors by (project,
  element_key) + PATCH /v1/saved-projects/{id}/shared-colors endpoint +
  UpdateColorsRequest/UpdateColorItem. Mirrors UpdateSceneContentsAsync. (dotnet
  build: 0 errors.)
- gateway already wildcard-routes /v1/saved-projects/*path → studio-svc (no change).
- Next: /api/projects/[id]/colors route → gateway; project-api patchProjectColors
  + themeColorsFromSceneData (maps scene_data sceneAccentColor… → the colorSchema
  keys); performSave best-effort pushes the 4 colours alongside contents.

Chain: theme picker → store → scene_data → performSave → patchProjectColors →
gateway → studio-svc upsert → saved_shared_colors → GetFlexStoryProps → render.
Verified: Next build + dotnet build both clean; theme presets render cohesively
across all 6 (incl. dark Midnight). End-to-end studio→render needs the live stack.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-23 17:04:47 +03:30
parent c1747167f3
commit c0d04fa855
6 changed files with 143 additions and 0 deletions
+8
View File
@@ -12,8 +12,10 @@ import {
contentValuesFromSceneData,
fetchProject,
isProjectNotFoundError,
patchProjectColors,
patchProjectContents,
patchProjectSceneData,
themeColorsFromSceneData,
} from "@/lib/project-api";
import { isDevProjectId } from "@/lib/project-ids";
import {
@@ -159,6 +161,12 @@ export function useStudioProjectPersistence(
projectId,
contentValuesFromSceneData(scene_data)
).catch(() => {});
// Persist the theme colours to saved_shared_colors so the FlexStory render
// reads the theme picker (best-effort).
void patchProjectColors(
projectId,
themeColorsFromSceneData(scene_data)
).catch(() => {});
setUsingLocalStorage(false);
markSaved(payloadJson, false);
} catch (error) {