fix(slides): propagate design system CSS vars to all preview surfaces#1145
fix(slides): propagate design system CSS vars to all preview surfaces#1145Abdul-M01 wants to merge 10 commits into
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
steve8708
left a comment
There was a problem hiding this comment.
great catch - thanks @Abdul-M01 !
theres some bot feedback here too - take a look and fix whatever you agree with, ignore anything you don't
also one CI check to fix too
|
@Abdul-M01 this PR is great - just one piece of feedback above to get it in |
Add design_system_id to deck_share_links so shared presentations render the deck's design system instead of always defaulting.
6e8c0de to
0568897
Compare
Visual recap — skippedThe visual recap job did not run for this pull request. This is informational only and does not block the PR. Recap skipped for |
…solveAccess gates resource-level access
|
we just merged a big localization PR that created some conflicts, if you can resolve @Abdul-M01 and check if any of the other automated feedback looks worth fixing would love to get this in |
Formatting-only cleanup on SlideRenderer.tsx, PresentationView.tsx, and slide.tsx to unblock CI fmt:check on PR BuilderIO#1145. No logic changes.
There was a problem hiding this comment.
Builder reviewed your changes and found 2 potential issues 🟡
Review Details
This incremental update fixes the two previously-blocking shared-link regressions by snapshotting the resolved design-system JSON into deck_share_links and teaching SharedPresentation to render from that snapshot instead of relying on anonymous get-design-system access. The broader propagation work still looks sound: SlideRenderer now provides token defaults, and the editor, presentation, share, slide-preview, sidebar, and browse-card surfaces all thread design-system data through consistently.
Risk assessment: standard. Although most changes are UI-facing, this PR also touches persistence and historical rendering paths, so regressions can affect shared/public presentations and saved version fidelity.
New findings from this pass:
- 🟡 MEDIUM Public
/p/:idpresentations still boot without design-system data because the SSR loader only serializesrow.data, so the newly tokenized shared presentation path falls back to the default theme there. - 🟡 MEDIUM Version previews/restores still depend on
version.data.designSystemId, but the newapply-design-systemO(1) path updates only the SQL column while snapshot creation copiessource.dataunchanged, so history can lose the applied theme.
Good patterns: share-link snapshots are self-contained again, and the renderer fallback to DEFAULT_DESIGN_SYSTEM is a solid safety net.
🧪 Browser testing: Will run after this review (PR touches UI code)
| const designSystem = useMemo(() => { | ||
| if (!deck?.designSystemSnapshot) return DEFAULT_DESIGN_SYSTEM; |
There was a problem hiding this comment.
🟡 Public /p/:id presentations still initialize without the design-system snapshot
This now renders from deck.designSystemSnapshot, but the /p/:id loader still builds initialDeck from row.data only. Public presentations never do the share-token refetch, so they stay on the default theme instead of the deck's design system.
Additional Info
Anchor: SharedPresentation.tsx [L:28-35]. Supporting evidence: app/routes/p.$id.tsx loader returns only {title, slides, aspectRatio} from row.data and omits row-level designSystemId/designSystemSnapshot.
|
|
||
| const versions = versionsQuery.data?.versions ?? []; | ||
| const selectedVersion = versionQuery.data; | ||
| const { designSystem: versionDesignSystem } = useDeckDesignSystem( |
There was a problem hiding this comment.
🟡 Version history still drops themes applied through the new O(1) path
selectedVersion.designSystemId only exists if the snapshot JSON captured it, but apply-design-system still updates only decks.designSystemId while version snapshots copy source.data unchanged. For retroactively themed decks, history previews and restores will still fall back to the default styling.
Additional Info
Anchor: HistoryPanel.tsx [L:89-91]. Supporting files: actions/apply-design-system.ts updates only schema.decks.designSystemId; server/lib/deck-versions.ts inserts source.data unchanged; get-deck-version/list-deck-versions read designSystemId from parsed version.data.
Summary
Applying a design system to an existing deck was O(n) in tool calls.
The agent had to read, rewrite, and update each slide individually. On
a modest deck this produced 25+ tool calls. This PR reduces retroactive application to O(1).
Problem
Skill templates contained hardcoded color and font values baked into
slide HTML.
SlideRendereralready injected CSS custom properties atrender time, but the hardcoded values bypassed the cascade, forcing
the agent to rewrite each slide's content when a design system was
applied or changed.
When a design system was applied retroactively to an existing deck,
sidebar thumbnails and browse-card previews continued to render with
default tokens —
designSystemwas never forwarded toEditorSidebaror
DeckCard.Solution
Replace all hardcoded values in skill templates with
var(--ds-*)references so new slides are token-aware from creation. Retroactive
application becomes a single call —
SlideRendererhandles the restvia CSS cascade.
Thread
designSystemthrough to all three render surfaces so themain editor, sidebar thumbnails, and browse cards stay consistent.
Fallback mirrors
useDeckDesignSystemDEFAULT_DESIGN_SYSTEMbehaviour at each call site.
Key Changes
create-deck/SKILL.md,slide-editing/SKILL.md— replace hardcodedhex/font values with
var(--ds-*)tokensdesign-systems/SKILL.md— add retroactive application guidanceSlideRenderer.tsx— add--ds-heading-weightand--ds-body-weightto CSS var injection block
EditorSidebar.tsx,DeckEditor.tsx— threaddesignSystempropthrough to
<SlideRenderer>Index.tsx,DeckCard.tsx— builddesignSystemByIdmap and threaddesignSystemthrough to<SlideRenderer>Known limitation
The current implementation stores share links as self-contained copies — duplicating title,
slides, and aspect ratio rather than referencing the live deck. This change follows that pattern
by persisting
design_system_idinto the share link at creation time rather than joining back todecksat read time. Schema changes were required becauseSharedPresentationloads entirelyfrom
deck_share_links, so without the column, there was no design system ID to pass intouseDeckDesignSystem.Share links created before this change have
design_system_id = NULLand continue to renderwith default branding — no regression. New shares of existing decks capture the current
designSystemIdat creation time. A backfill migration for already-published share links isscoped as a follow-up.