@agent-native/core 0.145.8 → 0.146.0

package/corpus/templates/plan/.agents/skills/turn-into-app/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Turn visible project context, a proven thread, skill, or workflow into a
   runnable Agent-Native app with simple buttons, visible agent steps, preview,
   and deployment handoff. Use when a user invokes `/turn-into-app` or asks to
-  make a workflow into an app.
+  make a workflow into an app, including from Claude or ChatGPT on the web.
 user-invocable: true
 scope: both
 metadata:
@@ -13,9 +13,32 @@ metadata:
 
 # Turn Into App
 
+## Host execution boundary
+
+The build location depends on the host. Treat this as a hard routing rule:
+
+- In Claude Web, ChatGPT Web, or a Claude/ChatGPT Project on the web, you are
+  the source analyst and handoff orchestrator. You must not build the app in
+  the host sandbox. Do not run `npm`, `pnpm`, `npx`, `agent-native create`, or
+  `add-app`; do not edit files, create artifacts, or start a local dev server.
+  After writing the bounded source brief, call the connected Dispatch action
+  `start-workspace-app-creation`. Pass the brief and repeatable workflow in
+  `prompt`, plus the inferred `appId`, `description`, `template`, and selected
+  `resourceIds` when available. This is the Builder handoff.
+- Do not substitute the generic `create_workspace_app` MCP tool in an online
+  host. That tool is a local workspace scaffolder, not the Builder handoff.
+- If `start-workspace-app-creation` is not available or Dispatch is not
+  authenticated, stop with the connector setup needed. Do not fall back to a
+  local build or claim that the app exists.
+- In Claude Code, Codex Code, or another local code-agent runtime with a target
+  workspace, follow the local implementation steps below. The local agent may
+  scaffold, edit, run, and verify the app there.
+
 ## Default behavior
 
-This is an end-to-end build skill, not a request for an app proposal.
+For a local code-agent runtime this is an end-to-end build skill, not a request
+for an app proposal. For an online host, the end-to-end result is a verified
+Builder handoff and the resulting workspace app, not code written in the host.
 
 - With no argument, choose the source in this order: visible project context,
   then the current thread. A fresh Claude or ChatGPT Project is a valid source
@@ -47,9 +70,12 @@ private web access, invent an importer, add fake OAuth, or scrape a logged-in
 page. If the needed context is not visible, ask for an export, transcript, or
 attachment and treat that artifact as imported source material.
 
-Deliver a fresh app in a new directory, implement the repeatable workflow with
-buttons and agent handoffs, start its dev server, verify the main path, and
-continue through build/deployment handoff. Do not stop at a plan.
+For local code-agent runtimes, deliver a fresh app in a new directory,
+implement the repeatable workflow with buttons and agent handoffs, start its dev
+server, verify the main path, and continue through build/deployment handoff. Do
+not stop at a plan. For online hosts, call Dispatch first after the source brief,
+then report the returned Builder branch/path and verify the workspace app through
+Dispatch when it becomes available.
 
 ## Fresh project context mode
 
@@ -190,12 +216,12 @@ Do not use `create` for an existing workspace; it scaffolds a new standalone
 workspace rather than adding an app to the current one.
 
 When the source came from a fresh external Project and the target is a Builder
-workspace, prefer the available Dispatch MCP workspace handoff after writing
-the source brief. Call `start-workspace-app-creation` with a concise prompt,
-the inferred app id, and the brief's repeatable workflow. Pass selected
-workspace resource IDs when they are available, rather than pasting entire
-knowledge files. Continue from the returned workspace path or Builder handoff
-and report the actual verification result.
+workspace, the online host path is mandatory: after writing the source brief,
+call `start-workspace-app-creation` with a concise prompt, the inferred app id,
+and the brief's repeatable workflow. Pass selected workspace resource IDs when
+they are available, rather than pasting entire knowledge files. Continue from
+the returned workspace path or Builder branch handoff and report the actual
+verification result. Do not run the local scaffold commands in this host mode.
 
 Use a first-party template only when it materially fits the workflow. Keep the
 new app independent from the source thread's working tree unless the user

package/corpus/templates/plan/.agents/skills/turn-into-app/references/fresh-project.md

@@ -51,13 +51,24 @@ also place the skill instructions or this reference in the Project
 instructions/knowledge files. Then add and authenticate the Dispatch MCP
 connector from the packaged `adapters/chatgpt-mcp/connector.json`.
 
+For Claude Web, ChatGPT Web, and their web Projects, the host is an
+orchestrator, not the build environment. After forming the source brief, call
+the Dispatch `start-workspace-app-creation` action so Builder creates the app
+in the connected workspace. Do not use the host's code interpreter, shell,
+artifact editor, `create_workspace_app`, or local `pnpm`/`npm` commands. If the
+handoff action is unavailable, stop and ask the user to authenticate Dispatch;
+do not fall back to a local sandbox build. Claude Code and Codex Code are the
+local-agent exception and may follow the implementation steps in the main
+skill.
+
 In a new Project chat, say:
 
 ```text
 Turn this project into an app. Use the visible Project instructions,
 knowledge files, and any selected successful runs as the source. Create the
-app in the connected Agent-Native workspace, keep the source brief bounded,
-and report the real path and verification result.
+app in the connected Agent-Native workspace through Dispatch and Builder, keep
+the source brief bounded, and report the real Builder branch/path and
+verification result. Do not build it in this chat's sandbox.
 ```
 
 If the host does not show the Project instructions or files to the model, stop

package/corpus/templates/slides/.agents/skills/turn-into-app/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Turn visible project context, a proven thread, skill, or workflow into a
   runnable Agent-Native app with simple buttons, visible agent steps, preview,
   and deployment handoff. Use when a user invokes `/turn-into-app` or asks to
-  make a workflow into an app.
+  make a workflow into an app, including from Claude or ChatGPT on the web.
 user-invocable: true
 scope: both
 metadata:
@@ -13,9 +13,32 @@ metadata:
 
 # Turn Into App
 
+## Host execution boundary
+
+The build location depends on the host. Treat this as a hard routing rule:
+
+- In Claude Web, ChatGPT Web, or a Claude/ChatGPT Project on the web, you are
+  the source analyst and handoff orchestrator. You must not build the app in
+  the host sandbox. Do not run `npm`, `pnpm`, `npx`, `agent-native create`, or
+  `add-app`; do not edit files, create artifacts, or start a local dev server.
+  After writing the bounded source brief, call the connected Dispatch action
+  `start-workspace-app-creation`. Pass the brief and repeatable workflow in
+  `prompt`, plus the inferred `appId`, `description`, `template`, and selected
+  `resourceIds` when available. This is the Builder handoff.
+- Do not substitute the generic `create_workspace_app` MCP tool in an online
+  host. That tool is a local workspace scaffolder, not the Builder handoff.
+- If `start-workspace-app-creation` is not available or Dispatch is not
+  authenticated, stop with the connector setup needed. Do not fall back to a
+  local build or claim that the app exists.
+- In Claude Code, Codex Code, or another local code-agent runtime with a target
+  workspace, follow the local implementation steps below. The local agent may
+  scaffold, edit, run, and verify the app there.
+
 ## Default behavior
 
-This is an end-to-end build skill, not a request for an app proposal.
+For a local code-agent runtime this is an end-to-end build skill, not a request
+for an app proposal. For an online host, the end-to-end result is a verified
+Builder handoff and the resulting workspace app, not code written in the host.
 
 - With no argument, choose the source in this order: visible project context,
   then the current thread. A fresh Claude or ChatGPT Project is a valid source
@@ -47,9 +70,12 @@ private web access, invent an importer, add fake OAuth, or scrape a logged-in
 page. If the needed context is not visible, ask for an export, transcript, or
 attachment and treat that artifact as imported source material.
 
-Deliver a fresh app in a new directory, implement the repeatable workflow with
-buttons and agent handoffs, start its dev server, verify the main path, and
-continue through build/deployment handoff. Do not stop at a plan.
+For local code-agent runtimes, deliver a fresh app in a new directory,
+implement the repeatable workflow with buttons and agent handoffs, start its dev
+server, verify the main path, and continue through build/deployment handoff. Do
+not stop at a plan. For online hosts, call Dispatch first after the source brief,
+then report the returned Builder branch/path and verify the workspace app through
+Dispatch when it becomes available.
 
 ## Fresh project context mode
 
@@ -190,12 +216,12 @@ Do not use `create` for an existing workspace; it scaffolds a new standalone
 workspace rather than adding an app to the current one.
 
 When the source came from a fresh external Project and the target is a Builder
-workspace, prefer the available Dispatch MCP workspace handoff after writing
-the source brief. Call `start-workspace-app-creation` with a concise prompt,
-the inferred app id, and the brief's repeatable workflow. Pass selected
-workspace resource IDs when they are available, rather than pasting entire
-knowledge files. Continue from the returned workspace path or Builder handoff
-and report the actual verification result.
+workspace, the online host path is mandatory: after writing the source brief,
+call `start-workspace-app-creation` with a concise prompt, the inferred app id,
+and the brief's repeatable workflow. Pass selected workspace resource IDs when
+they are available, rather than pasting entire knowledge files. Continue from
+the returned workspace path or Builder branch handoff and report the actual
+verification result. Do not run the local scaffold commands in this host mode.
 
 Use a first-party template only when it materially fits the workflow. Keep the
 new app independent from the source thread's working tree unless the user

package/corpus/templates/slides/.agents/skills/turn-into-app/references/fresh-project.md

@@ -51,13 +51,24 @@ also place the skill instructions or this reference in the Project
 instructions/knowledge files. Then add and authenticate the Dispatch MCP
 connector from the packaged `adapters/chatgpt-mcp/connector.json`.
 
+For Claude Web, ChatGPT Web, and their web Projects, the host is an
+orchestrator, not the build environment. After forming the source brief, call
+the Dispatch `start-workspace-app-creation` action so Builder creates the app
+in the connected workspace. Do not use the host's code interpreter, shell,
+artifact editor, `create_workspace_app`, or local `pnpm`/`npm` commands. If the
+handoff action is unavailable, stop and ask the user to authenticate Dispatch;
+do not fall back to a local sandbox build. Claude Code and Codex Code are the
+local-agent exception and may follow the implementation steps in the main
+skill.
+
 In a new Project chat, say:
 
 ```text
 Turn this project into an app. Use the visible Project instructions,
 knowledge files, and any selected successful runs as the source. Create the
-app in the connected Agent-Native workspace, keep the source brief bounded,
-and report the real path and verification result.
+app in the connected Agent-Native workspace through Dispatch and Builder, keep
+the source brief bounded, and report the real Builder branch/path and
+verification result. Do not build it in this chat's sandbox.
 ```
 
 If the host does not show the Project instructions or files to the model, stop

package/corpus/templates/slides/app/components/editor/EditorSidebar.tsx

@@ -38,6 +38,8 @@ import type { Slide } from "@/context/DeckContext";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
+import type { DesignSystemData } from "../../../shared/api";
+
 interface EditorSidebarProps {
   slides: Slide[];
   activeSlideId: string;
@@ -53,6 +55,8 @@ interface EditorSidebarProps {
   recentEdits?: AttributedRecentEdit[];
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
+  /** Active deck design system used by slide content tokens. */
+  designSystem?: DesignSystemData;
   /** The next slide while the agent is preparing its HTML. */
   generatingSlide?: { index: number; content?: string | null };
   generatingSlideSelected?: boolean;
@@ -154,6 +158,7 @@ function SortableSlideThumb({
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
+  designSystem,
   onOverflowChange,
   readOnly = false,
 }: {
@@ -167,6 +172,7 @@ function SortableSlideThumb({
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
   aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
   onOverflowChange: (info: SlideOverflowInfo) => void;
 }) {
   const t = useT();
@@ -234,6 +240,7 @@ function SortableSlideThumb({
             <SlideRenderer
               slide={slide}
               aspectRatio={aspectRatio}
+              designSystem={designSystem}
               onOverflowChange={onOverflowChange}
             />
           </div>
@@ -290,12 +297,14 @@ function SortableSlideThumb({
 function GeneratingSlideSkeleton({
   index,
   aspectRatio,
+  designSystem,
   content,
   selected,
   onSelect,
 }: {
   index: number;
   aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
   content?: string | null;
   selected?: boolean;
   onSelect?: () => void;
@@ -319,6 +328,7 @@ function GeneratingSlideSkeleton({
           <GeneratingSlidePreview
             content={content}
             aspectRatio={aspectRatio}
+            designSystem={designSystem}
             thumbnail
           />
         </div>
@@ -338,6 +348,7 @@ export default function EditorSidebar({
   slidePresence,
   recentEdits,
   aspectRatio,
+  designSystem,
   generatingSlide,
   generatingSlideSelected = false,
   onSelectGeneratingSlide,
@@ -508,6 +519,7 @@ export default function EditorSidebar({
               registerButtonRef={registerSlideButton}
               presenceUsers={slidePresence?.get(slide.id) ?? []}
               aspectRatio={aspectRatio}
+              designSystem={designSystem}
               onOverflowChange={(info) =>
                 handleSlideOverflowChange(slide, info)
               }
@@ -518,6 +530,7 @@ export default function EditorSidebar({
           <GeneratingSlideSkeleton
             index={generatingSlide.index}
             aspectRatio={aspectRatio}
+            designSystem={designSystem}
             content={generatingSlide.content}
             selected={generatingSlideSelected}
             onSelect={onSelectGeneratingSlide}

package/corpus/templates/slides/app/components/editor/GeneratingSlidePreview.tsx

@@ -7,6 +7,8 @@ import type { Slide } from "@/context/DeckContext";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 import { cn } from "@/lib/utils";
 
+import type { DesignSystemData } from "../../../shared/api";
+
 function SlideLoadingArtwork() {
   return (
     <div className="absolute inset-0 flex flex-col justify-center gap-4 bg-muted/30 p-[14%]">
@@ -25,11 +27,13 @@ export default function GeneratingSlidePreview({
   aspectRatio,
   thumbnail = true,
   className,
+  designSystem,
 }: {
   content?: string | null;
   aspectRatio?: AspectRatio;
   thumbnail?: boolean;
   className?: string;
+  designSystem?: DesignSystemData;
 }) {
   const t = useT();
   const cssRatio = (aspectRatio ?? "16:9").replace(":", " / ");
@@ -55,6 +59,7 @@ export default function GeneratingSlidePreview({
           slide={previewSlide}
           aspectRatio={aspectRatio}
           thumbnail={thumbnail}
+          designSystem={designSystem}
           className="h-full w-full"
         />
       ) : (

package/corpus/templates/slides/app/components/presentation/PresentationView.tsx

@@ -22,6 +22,7 @@ import {
   resolveSlideAnimationElement,
 } from "@/lib/slide-animation-elements";
 
+import type { DesignSystemData } from "../../../shared/api";
 import { openPresentChannel, type PresentMessage } from "./present-channel";
 
 interface PresentationViewProps {
@@ -29,6 +30,7 @@ interface PresentationViewProps {
   deckId: string;
   startIndex?: number;
   aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
 }
 
 // ─── Element animation helpers ────────────────────────────────────────────────
@@ -182,6 +184,7 @@ export default function PresentationView({
   deckId,
   startIndex = 0,
   aspectRatio,
+  designSystem,
 }: PresentationViewProps) {
   const t = useT();
   const safeSlides = useMemo(
@@ -534,6 +537,7 @@ export default function PresentationView({
             slide={safeSlides[prevIndex]}
             thumbnail={false}
             aspectRatio={aspectRatio}
+            designSystem={designSystem}
           />
         </div>
       )}
@@ -548,6 +552,7 @@ export default function PresentationView({
           slide={displaySlide}
           thumbnail={false}
           aspectRatio={aspectRatio}
+          designSystem={designSystem}
         />
       </div>
 

package/corpus/templates/slides/app/components/presentation/PresenterView.tsx

@@ -6,6 +6,7 @@ import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { Slide } from "@/context/DeckContext";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
+import type { DesignSystemData } from "../../../shared/api";
 import { openPresentChannel, type PresentMessage } from "./present-channel";
 
 interface PresenterViewProps {
@@ -13,6 +14,7 @@ interface PresenterViewProps {
   deckId: string;
   startIndex?: number;
   aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
 }
 
 function formatElapsed(seconds: number) {
@@ -26,6 +28,7 @@ export default function PresenterView({
   deckId,
   startIndex = 0,
   aspectRatio,
+  designSystem,
 }: PresenterViewProps) {
   const t = useT();
   const [index, setIndex] = useState(startIndex);
@@ -136,6 +139,7 @@ export default function PresenterView({
                 slide={current}
                 thumbnail
                 aspectRatio={aspectRatio}
+                designSystem={designSystem}
               />
             )}
           </div>
@@ -149,6 +153,7 @@ export default function PresenterView({
                   slide={next}
                   thumbnail
                   aspectRatio={aspectRatio}
+                  designSystem={designSystem}
                 />
               </div>
             ) : (

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -1128,6 +1128,7 @@ export default function DeckEditor() {
                   slidePresence={slidePresence}
                   recentEdits={deckRecentEdits}
                   aspectRatio={deck.aspectRatio}
+                  designSystem={designSystem}
                   generatingSlide={
                     generatingSlideVisible
                       ? {
@@ -1166,6 +1167,7 @@ export default function DeckEditor() {
               <GeneratingSlidePreview
                 content={streamedGeneratingSlideContent}
                 aspectRatio={deck.aspectRatio}
+                designSystem={designSystem}
                 thumbnail={false}
               />
             </div>
@@ -1181,6 +1183,7 @@ export default function DeckEditor() {
                 <GeneratingSlidePreview
                   content={streamedGeneratingSlideContent}
                   aspectRatio={deck.aspectRatio}
+                  designSystem={designSystem}
                   thumbnail={false}
                 />
               </div>

package/corpus/templates/slides/app/pages/Presentation.tsx

@@ -7,6 +7,7 @@ import PresentationView from "@/components/presentation/PresentationView";
 import PresenterView from "@/components/presentation/PresenterView";
 import { useDecks } from "@/context/DeckContext";
 import type { Deck } from "@/context/DeckContext";
+import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 
 export default function Presentation() {
   const { id } = useParams<{ id: string }>();
@@ -25,6 +26,7 @@ export default function Presentation() {
   const [searchParams] = useSearchParams();
   const contextDeck = getDeck(id || "");
   const deck = contextDeck ?? fallbackDeck;
+  const { designSystem } = useDeckDesignSystem(deck?.designSystemId);
 
   useEffect(() => {
     if (!id || loading || contextDeck) {
@@ -104,6 +106,7 @@ export default function Presentation() {
       deckId={id}
       startIndex={startSlide}
       aspectRatio={deck.aspectRatio}
+      designSystem={designSystem}
     />
   );
 }

package/corpus/templates/slides/app/pages/SharedPresentation.tsx

@@ -7,6 +7,7 @@ import { useParams } from "react-router";
 
 import PresentationView from "@/components/presentation/PresentationView";
 import type { Slide } from "@/context/DeckContext";
+import { mergeDesignSystemData } from "@/hooks/use-deck-design-system";
 
 interface SharedPresentationProps {
   initialDeck?: SharedDeckResponse | null;
@@ -81,6 +82,9 @@ export default function SharedPresentation({
     ...s,
     layout: s.layout as Slide["layout"],
   }));
+  const designSystem = deck.designSystem
+    ? mergeDesignSystemData(deck.designSystem)
+    : undefined;
 
   // Use a fake deckId that routes "exit" back to the share page itself
   return (
@@ -88,6 +92,7 @@ export default function SharedPresentation({
       slides={slides}
       deckId={`__shared__/${token}`}
       aspectRatio={deck.aspectRatio}
+      designSystem={designSystem}
     />
   );
 }

package/corpus/templates/slides/app/routes/slide.tsx

@@ -10,6 +10,7 @@ import { useSearchParams } from "react-router";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { Slide } from "@/context/DeckContext";
+import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 import messages from "@/i18n/en-US";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
@@ -42,8 +43,10 @@ export default function SlideRoute() {
   const [aspectRatio, setAspectRatio] = useState<AspectRatio | undefined>(
     undefined,
   );
+  const [designSystemId, setDesignSystemId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const { designSystem } = useDeckDesignSystem(designSystemId);
 
   const slideNumber =
     slideNumberParam !== null ? parseInt(slideNumberParam, 10) : null;
@@ -75,11 +78,11 @@ export default function SlideRoute() {
       return;
     }
 
-    callAction<{ slides?: Slide[]; aspectRatio?: AspectRatio }>(
-      "get-deck",
-      { id: deckId },
-      { method: "GET" },
-    )
+    callAction<{
+      slides?: Slide[];
+      aspectRatio?: AspectRatio;
+      designSystemId?: string | null;
+    }>("get-deck", { id: deckId }, { method: "GET" })
       .then((deck) => {
         const slides: Slide[] = deck.slides ?? [];
         if (slides.length === 0) {
@@ -88,6 +91,7 @@ export default function SlideRoute() {
         const idx = Math.max(0, Math.min(slideIndex, slides.length - 1));
         setSlide(slides[idx]);
         setAspectRatio(deck.aspectRatio);
+        setDesignSystemId(deck.designSystemId ?? null);
         setLoading(false);
       })
       .catch((err: unknown) => {
@@ -123,6 +127,7 @@ export default function SlideRoute() {
         slide={slide}
         thumbnail={false}
         aspectRatio={aspectRatio}
+        designSystem={designSystem}
       />
 
       {inEmbed && (

package/corpus/templates/slides/changelog/2026-08-07-slide-previews-and-present-now-keep-deck-colors-consistent.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-07
+---
+
+Slide previews and Present now keep deck colors consistent

package/corpus/templates/slides/server/db/schema.ts

@@ -54,6 +54,7 @@ export const deckShareLinks = table("deck_share_links", {
   title: text("title").notNull(),
   slides: text("slides").notNull(), // JSON array of slide snapshots
   aspectRatio: text("aspect_ratio"),
+  designSystemData: text("design_system_data"), // Share-safe token snapshot
   createdAt: text("created_at").notNull().default(now()),
 });
 

package/corpus/templates/slides/server/handlers/share.ts

@@ -1,9 +1,14 @@
 import crypto from "crypto";
 
 import { readBody } from "@agent-native/core/server";
-import { assertAccess, ForbiddenError } from "@agent-native/core/sharing";
+import {
+  assertAccess,
+  ForbiddenError,
+  resolveAccess,
+} from "@agent-native/core/sharing";
 import { toSharedDeckSlide } from "@shared/api";
 import type {
+  DesignSystemData,
   ShareDeckRequest,
   ShareDeckResponse,
   SharedDeckResponse,
@@ -19,6 +24,12 @@ import {
 
 const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
 
+interface DeckShareResource {
+  title?: string | null;
+  data: string;
+  designSystemId?: string | null;
+}
+
 /**
  * POST /api/share
  * Persist a deck snapshot with a random token.
@@ -53,11 +64,13 @@ async function createShareLink(event: any, deckId: string) {
   const db = getDb();
   let storedDeck: any;
   let title = "Untitled";
+  let deckResource: DeckShareResource;
 
   try {
     const access = await assertAccess("deck", deckId, "admin");
-    title = access.resource.title ?? "Untitled";
-    storedDeck = JSON.parse(access.resource.data);
+    deckResource = access.resource as DeckShareResource;
+    title = deckResource.title ?? "Untitled";
+    storedDeck = JSON.parse(deckResource.data);
   } catch (err) {
     if (err instanceof ForbiddenError) {
       setResponseStatus(event, err.statusCode);
@@ -73,6 +86,29 @@ async function createShareLink(event: any, deckId: string) {
 
   const token = crypto.randomBytes(12).toString("base64url");
   const now = new Date().toISOString();
+  const designSystemId =
+    deckResource.designSystemId ?? storedDeck.designSystemId;
+  let designSystemData: string | null = null;
+
+  if (typeof designSystemId === "string" && designSystemId.trim()) {
+    const designSystemAccess = await resolveAccess(
+      "design-system",
+      designSystemId,
+    );
+    const rawData = designSystemAccess?.resource?.data;
+    if (typeof rawData === "string") {
+      try {
+        const parsed = JSON.parse(rawData);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          designSystemData = JSON.stringify(parsed as DesignSystemData);
+        }
+        // coercion-ok: malformed optional style data keeps a valid deck shareable.
+      } catch {
+        // A malformed style record should not make an otherwise valid deck
+        // impossible to share; the presentation will use its default tokens.
+      }
+    }
+  }
 
   const slides = storedDeck.slides.map((slide: unknown, index: number) =>
     toSharedDeckSlide(slide, index),
@@ -83,6 +119,7 @@ async function createShareLink(event: any, deckId: string) {
     title: title || storedDeck.title || "Untitled",
     slides: JSON.stringify(slides),
     aspectRatio: storedDeck.aspectRatio ?? null,
+    designSystemData,
     createdAt: now,
   });
 
@@ -136,5 +173,16 @@ export const getSharedDeck = defineEventHandler(async (event) => {
     slides: JSON.parse(shared.slides),
     aspectRatio: shared.aspectRatio as SharedDeckResponse["aspectRatio"],
   };
+  if (shared.designSystemData) {
+    try {
+      const parsed = JSON.parse(shared.designSystemData);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        response.designSystem = parsed as DesignSystemData;
+      }
+      // coercion-ok: malformed optional snapshots remain viewable with default tokens.
+    } catch {
+      // Keep legacy or malformed snapshots viewable with default tokens.
+    }
+  }
   return response;
 });

package/corpus/templates/slides/server/plugins/db.ts

@@ -230,6 +230,11 @@ const runSlidesMigrations = runMigrations(
   );
   CREATE INDEX IF NOT EXISTS uploaded_assets_owner_created_idx ON uploaded_assets (owner_email, created_at)`,
     },
+    {
+      version: 21,
+      name: "slides-share-design-system-snapshot",
+      sql: `ALTER TABLE deck_share_links ADD COLUMN IF NOT EXISTS design_system_data TEXT`,
+    },
   ],
   { table: "slides_migrations" },
 );