@agent-native/core 0.149.2 → 0.149.4

package/corpus/templates/slides/AGENTS.md

@@ -4,11 +4,18 @@ Slides is an agent-native deck editor. The agent creates, edits, imports,
 exports, styles, shares, and navigates decks through actions and shared SQL
 state.
 
-Detailed deck, slide-editing, image, design-system, and export workflows live in
-`.agents/skills/`.
+## Skills
+
+Read the relevant skill before deeper work:
 
-Before building common workspace or agent UI, read `agent-native-toolkit` and
-`customizing-agent-native` for the public kit and configure/eject seams.
+- `create-deck` for new decks, reference decks, workspace defaults, outlines.
+- `slide-editing` for targeted slide changes; covers fit, density, and overflow.
+- `deck-management` for organization, sharing, import/export, and metadata.
+- `slide-images` and `image-generation-via-a2a` for image work.
+- `design-systems` for per-source design-system actions.
+- `creative-context` for cross-app source reuse, pinned packs, provenance, and
+  context opt-out.
+- `analytics-data-for-decks` for delegated data requests.
 
 ## Core Rules
 
@@ -17,9 +24,8 @@ Before building common workspace or agent UI, read `agent-native-toolkit` and
 - Never hardcode secrets or private/customer data; use vault/OAuth/runtime
   configuration and fake placeholders in examples.
 - Use actions for deck lifecycle, slide edits, imports, exports, images, design
-  systems, and sharing. Do not write deck/slide rows directly.
-- In dev, call actions with `pnpm action <name>`; in production, use native
-  tools. Read the action schema if a parameter is unclear.
+  systems, and sharing. Do not write deck/slide rows directly. Read the action
+  schema if a parameter is unclear.
 - Use `view-screen` before editing when the active deck, selected slide, or
   current layout is unclear.
 - Preserve deck structure and visual consistency. Prefer focused slide edits over
@@ -34,7 +40,6 @@ Before building common workspace or agent UI, read `agent-native-toolkit` and
 - Preserve freeform objects and their `data-slide-object-id` values. They are
   absolutely positioned `.fmd-slide` children; keep generated flex/grid in
   normal flow and mint ids only for duplicates. Use styled HTML, not inline SVG.
-- Read `slide-editing` before creating slides; it covers fit, density, and overflow.
 - Follow linked design-system tokens; read `design-systems` for per-source actions.
 - Import/export actions are shortcuts, not capability limits. For exact Google
   Drive API needs, use `provider-api-catalog`, `provider-api-docs`, and
@@ -53,15 +58,15 @@ Before building common workspace or agent UI, read `agent-native-toolkit` and
   default. Let that specialist use its own instructions, skills, sources, and
   tools. Direct action invocation is only for an exact bounded read with a
   fully known schema; never use it as a workaround for slow or failed A2A.
-- For data requests, read `.agents/skills/analytics-data-for-decks/SKILL.md` and
-  delegate via Analytics over A2A; do not write SQL or call providers directly.
+- For data requests, read `analytics-data-for-decks` and delegate via Analytics
+  over A2A; do not write SQL or call providers directly.
 - When the user names no reference deck or design system, call
   `get-workspace-defaults` first so a bare "make a deck about X" is still on
   brand.
-- Before generation, follow `.agents/skills/creative-context/SKILL.md`: explicit
-  request/current deck, then pinned/current pack, then narrow library search.
-  Respect `contextMode: "off"`. Submit governed context through the Context tab
-  or `manage-context-membership`; reuse only its opaque clone reference.
+- Before generation, follow `creative-context`: explicit request/current deck,
+  then pinned/current pack, then narrow library search. Respect
+  `contextMode: "off"`. Submit governed context through the Context tab or
+  `manage-context-membership`; reuse only its opaque clone reference.
 
 ## Persistence Model
 
@@ -91,15 +96,7 @@ Deck data lives in SQL and all writes go through server-side actions. Read
   PPTX and have the user import it into Google Slides. Creating a native Google
   Slides file directly requires a separate Google Slides API batchUpdate path.
 
-## Skills
-
-Read the relevant skill before deeper work:
+## Source Changes
 
-- `create-deck` for new decks, reference decks, workspace defaults, outlines.
-- `slide-editing` for targeted slide changes.
-- `deck-management` for organization, sharing, import/export, and metadata.
-- `slide-images` and `image-generation-via-a2a` for image work.
-- `design-systems`, `frontend-design`, `shadcn-ui`, and `actions` as needed.
-- `creative-context` for cross-app source reuse, pinned packs, provenance, and
-  context opt-out.
-- `analytics-data-for-decks` for delegated data.
+Before building common workspace or agent UI, read `agent-native-toolkit`; read
+`customizing-agent-native` before adapting shared UI.

package/corpus/templates/slides/actions/get-deck-reference-context.ts

@@ -89,7 +89,7 @@ export function buildReferenceDeckContext({
 
   lines.push(
     "",
-    `These are samples, not the full deck. Call \`get-deck --id ${id}\` if you need to see how this deck handles a case the patterns above do not cover.`,
+    `These are samples, not the full deck. Call \`get-deck --id ${id} --compact false\` only if you need full slide HTML for a case the patterns above do not cover.`,
   );
 
   return truncate(lines.join("\n"), MAX_CONTEXT_CHARS);
@@ -99,7 +99,7 @@ export default defineAction({
   description:
     "Get an existing deck's visual language as a reusable pattern library so a new deck can be written in the same style. " +
     "Returns one worked HTML example per layout as `agentContext`, deliberately without the deck's slide order — the new deck's structure comes from its own content. " +
-    "Use `get-deck` when you need a specific slide's full content instead.",
+    "Use `get-deck` with compact=false when you need full slide content instead.",
   schema: z.object({
     id: z.string().describe("Deck ID to use as the reference"),
   }),

package/corpus/templates/slides/actions/get-deck.ts

@@ -4,6 +4,7 @@ import { getRequestUserEmail } from "@agent-native/core/server/request-context";
 import { resolveAccess } from "@agent-native/core/sharing";
 import { z } from "zod";
 
+import { summarizeSlideAnimationTargets } from "../server/lib/validate-slide-animations.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
 function stripHtml(html: string): string {
@@ -16,8 +17,9 @@ function stripHtml(html: string): string {
     .trim();
 }
 
-function compactAnimationSummary(value: unknown) {
+function compactAnimationSummary(value: unknown, content: string) {
   if (!Array.isArray(value)) return null;
+  const targetSummaries = summarizeSlideAnimationTargets(content, value);
   return {
     count: value.length,
     steps: value.map((entry, index) => {
@@ -25,6 +27,7 @@ function compactAnimationSummary(value: unknown) {
         return { order: index + 1, valid: false };
       }
       const animation = entry as Record<string, unknown>;
+      const targetSummary = targetSummaries[index];
       return {
         order: index + 1,
         id: typeof animation.id === "string" ? animation.id : null,
@@ -36,6 +39,12 @@ function compactAnimationSummary(value: unknown) {
           ? animation.elementPath
           : null,
         type: typeof animation.type === "string" ? animation.type : null,
+        targetPreview: targetSummary?.targetPreview ?? null,
+        resolvedPath: targetSummary?.resolvedPath ?? null,
+        targetValid: targetSummary?.targetValid ?? false,
+        targetIssue: targetSummary
+          ? targetSummary.targetIssue
+          : "target-not-found",
       };
     }),
   };
@@ -51,14 +60,22 @@ function deckDeepLink(deckId: string): string {
 
 export default defineAction({
   description:
-    "Get a specific deck with all slides. Returns full deck JSON including slide content. User-visible slide numbers are 1-based and match the UI: slide 1 is the first slide. Use slideId for edits. After a mutation or for a large deck when only IDs, count, previews, and animation targets are needed, pass compact=true to avoid retransmitting all slide HTML.",
+    "Get a specific deck. Pass slideId to return only that slide; targeted agent reads include full HTML by default. In-app agent calls without slideId return compact slide metadata by default; set compact=false when full deck HTML is needed. Frontend and CLI reads remain full unless compact=true. User-visible slide numbers are 1-based and match the UI: slide 1 is the first slide. Use slideId for edits.",
   timeoutMs: 60_000,
   schema: z.object({
     id: z.string().optional().describe("Deck ID (required)"),
+    slideId: z
+      .string()
+      .optional()
+      .describe(
+        "Optional stable slide ID. When set, return only that slide for a targeted read.",
+      ),
     compact: z
       .enum(["true", "false"])
       .optional()
-      .describe("Set to 'true' for compact output (slide summaries only)"),
+      .describe(
+        "Set to 'true' for compact slide summaries, or 'false' for full slide HTML. In-app agent calls without slideId default to compact output.",
+      ),
   }),
   http: { method: "GET" },
   mcpApp: {
@@ -71,7 +88,7 @@ export default defineAction({
       height: 680,
     }),
   },
-  run: async (args) => {
+  run: async (args, ctx) => {
     if (!args.id) {
       throw new Error("--id is required.");
     }
@@ -87,8 +104,31 @@ export default defineAction({
     const data = JSON.parse(row.data);
     const slides = data?.slides || [];
     const ownerEmail = getRequestUserEmail();
+    const selectedSlideIndex =
+      args.slideId === undefined
+        ? -1
+        : slides.findIndex((slide: any) => slide?.id === args.slideId);
+
+    if (args.slideId !== undefined && selectedSlideIndex < 0) {
+      throw Object.assign(new Error(`Slide not found: ${args.slideId}`), {
+        statusCode: 404,
+      });
+    }
 
-    if (args.compact === "true") {
+    const selectedSlide =
+      selectedSlideIndex >= 0 ? slides[selectedSlideIndex] : null;
+    const slideEntries: Array<{ slide: any; index: number }> =
+      selectedSlideIndex >= 0
+        ? [{ slide: selectedSlide, index: selectedSlideIndex }]
+        : slides.map((slide: any, index: number) => ({ slide, index }));
+
+    const compact =
+      args.compact === "true" ||
+      (args.compact === undefined &&
+        ctx?.caller === "tool" &&
+        selectedSlideIndex < 0);
+
+    if (compact) {
       return {
         id: row.id,
         title: row.title || data?.title,
@@ -110,20 +150,27 @@ export default defineAction({
         slideNumbering:
           'User-visible slide numbers are 1-based and match the UI. "Slide 1" means slideNumber 1 / zeroBasedIndex 0. Use slideId for edits.',
         deepLink: deckDeepLink(row.id),
-        slides: slides.map((s: any, i: number) => ({
+        ...(selectedSlide ? { selectedSlideId: selectedSlide.id } : {}),
+        slides: slideEntries.map(({ slide: s, index: i }) => ({
           slideNumber: i + 1,
           zeroBasedIndex: i,
           id: s.id,
           layout: s.layout ?? null,
           transition: s.transition ?? null,
-          animations: compactAnimationSummary(s.animations),
+          animations: compactAnimationSummary(
+            s.animations,
+            typeof s.content === "string" ? s.content : "",
+          ),
           textPreview: stripHtml(s.content || "").slice(0, 120),
         })),
       };
     }
 
+    const deckMetadata = { ...data };
+    delete deckMetadata.slides;
+
     return {
-      ...data,
+      ...deckMetadata,
       id: row.id,
       title: row.title || data?.title,
       visibility: row.visibility,
@@ -136,7 +183,8 @@ export default defineAction({
         typeof data.createdAt === "string" ? data.createdAt : row.createdAt,
       updatedAt: row.updatedAt,
       deepLink: deckDeepLink(row.id),
-      slides: slides.map((s: any, i: number) => ({
+      ...(selectedSlide ? { selectedSlideId: selectedSlide.id } : {}),
+      slides: slideEntries.map(({ slide: s, index: i }) => ({
         ...s,
         slideNumber: i + 1,
         zeroBasedIndex: i,

package/corpus/templates/slides/actions/import-file.ts

@@ -28,6 +28,7 @@ import {
   DEFAULT_ASPECT_RATIO,
   type AspectRatio,
 } from "../shared/aspect-ratios.js";
+import { isOpaqueDeckTitle } from "../shared/deck-title.js";
 import { readUserUploadedFile } from "./_uploaded-files.js";
 import { withDeckLock } from "./patch-deck.js";
 
@@ -586,7 +587,7 @@ async function buildPptxSlide(
 
 function titleFromPath(filePath: string): string {
   const base = path.basename(filePath, path.extname(filePath)).trim();
-  return base || "Imported File";
+  return base && !isOpaqueDeckTitle(base) ? base : "Imported File";
 }
 
 function normalizePdfPages(result: unknown): { num: number; text: string }[] {

package/corpus/templates/slides/actions/patch-deck.ts

@@ -31,6 +31,7 @@ import {
   sourceImportForDeck,
   type SourceImportMetadata,
 } from "../server/lib/source-import.js";
+import { assertSlideAnimationsResolve } from "../server/lib/validate-slide-animations.js";
 import { ASPECT_RATIO_VALUES } from "../shared/aspect-ratios.js";
 import {
   assertHumanReadableDeckTitle,
@@ -84,11 +85,13 @@ const SlideAnimationSchema = z.object({
     .min(1)
     .optional()
     .describe(
-      "Preferred 0-based child-index path from the outer .fmd-slide wrapper. Re-read final HTML after content edits.",
+      "Preferred 0-based child-index path from the outer .fmd-slide wrapper. Required for agent-created or content-revised animations; re-read final HTML after content edits.",
     ),
   type: z
     .enum(["appear", "fade", "slide-up", "zoom"])
-    .describe("Animation used when this step is revealed"),
+    .describe(
+      "Animation used when this step is revealed. Supported semantics: appear (immediate reveal), fade (opacity), slide-up (subtle upward motion), zoom (subtle scale). Do not invent other types.",
+    ),
 });
 
 const SlideFieldsSchema = z.object({
@@ -431,6 +434,43 @@ export function applyOperation(deck: any, op: Operation): void {
   }
 }
 
+/**
+ * Content and animation metadata are one contract. Validate only slides whose
+ * content or animation list changed so unrelated note/title writes do not
+ * resurrect old metadata failures, while any edit that can stale a path is
+ * rejected before persistence.
+ */
+export function assertPatchedSlideAnimationsResolve(
+  deck: any,
+  operations: readonly Operation[],
+  options?: { requireElementPaths?: boolean },
+): void {
+  const slideIdsToValidate = new Set(
+    operations.flatMap((operation) =>
+      operation.op === "patch-slide" &&
+      (operation.fields.content !== undefined ||
+        operation.fields.animations !== undefined)
+        ? [operation.slideId]
+        : [],
+    ),
+  );
+  if (slideIdsToValidate.size === 0) return;
+
+  const slides: any[] = Array.isArray(deck.slides) ? deck.slides : [];
+  for (const slideId of slideIdsToValidate) {
+    const slide = slides.find((candidate) => candidate?.id === slideId);
+    if (!slide || !Array.isArray(slide.animations) || !slide.animations.length)
+      continue;
+
+    assertSlideAnimationsResolve({
+      slideId,
+      content: typeof slide.content === "string" ? slide.content : "",
+      animations: slide.animations,
+      requireElementPaths: options?.requireElementPaths,
+    });
+  }
+}
+
 /**
  * Resolve the last operation in a sequence. For example, when typing a new name
  * this will be the latest name of the deck in a sequence of keystrokes.
@@ -580,6 +620,9 @@ export default defineAction({
       for (const op of operations) {
         applyOperation(deck, op);
       }
+      assertPatchedSlideAnimationsResolve(deck, operations, {
+        requireElementPaths: isAgentCaller,
+      });
 
       const now = new Date().toISOString();
       deck.updatedAt = now;

package/corpus/templates/slides/actions/update-slide.ts

@@ -364,7 +364,7 @@ export default defineAction({
     if (rmw.notFound) {
       return {
         ok: false,
-        message: `Text not found in slide: "${find!.slice(0, 60)}". Use get-deck to see current slide content.`,
+        message: `Text not found in slide: "${find!.slice(0, 60)}". Use get-deck with compact=false to see the current slide HTML.`,
       };
     }
 

package/corpus/templates/slides/app/components/comments/SlideCommentsPanel.tsx

@@ -458,9 +458,9 @@ export function SlideCommentsPanel({
   const showInput = pendingComment || addingComment;
 
   return (
-    <div className="flex h-full w-[17rem] flex-shrink-0 flex-col border-l border-border bg-background">
+    <div className="flex h-full w-[17rem] flex-shrink-0 flex-col bg-[var(--slides-editor-surface)]">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border flex-shrink-0">
+      <div className="flex flex-shrink-0 items-center justify-between px-4 py-3">
         <span className="text-[13px] font-medium text-foreground/80">
           {t("comments.title")}
         </span>

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -7,7 +7,6 @@ import {
   IconTrash,
   IconCopy,
   IconPencil,
-  IconPalette,
   IconPlus,
   IconStar,
   IconStarFilled,
@@ -33,7 +32,6 @@ interface DeckCardProps {
   onRename: (id: string, newTitle: string) => void;
   onDuplicate: (id: string) => void;
   onToggleStar: (id: string, starred: boolean) => void;
-  designSystemTitle?: string | null;
   isWorkspaceDefault?: boolean;
   canSetWorkspaceDefault?: boolean;
   onSetWorkspaceDefault?: (id: string, isDefault: boolean) => void;
@@ -45,7 +43,6 @@ export default function DeckCard({
   onRename,
   onDuplicate,
   onToggleStar,
-  designSystemTitle,
   isWorkspaceDefault = false,
   canSetWorkspaceDefault = false,
   onSetWorkspaceDefault,
@@ -101,7 +98,7 @@ export default function DeckCard({
     <div className="group relative">
       <Link
         to={`/deck/${deck.id}`}
-        className="block rounded-xl border border-border bg-card hover:border-border transition-all duration-200 overflow-hidden hover:shadow-lg hover:shadow-[#609FF8]/5"
+        className="block overflow-hidden rounded-xl border border-transparent bg-card transition-[background-color,border-color] duration-200 hover:border-border hover:bg-accent/30"
         onClick={(e) => {
           if (isRenaming) e.preventDefault();
         }}
@@ -144,25 +141,6 @@ export default function DeckCard({
             )}
             <VisibilityBadge visibility={deck.visibility} />
           </div>
-          <div className="mt-1 flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
-            <span className="shrink-0 whitespace-nowrap">
-              {deck.slides.length} slide{deck.slides.length !== 1 ? "s" : ""}
-            </span>
-            {isWorkspaceDefault && (
-              <span className="inline-flex shrink-0 items-center gap-1 rounded border border-[#609FF8]/40 px-1.5 py-0.5 text-[10px] text-[#609FF8]">
-                <IconBuildingCommunity className="h-3 w-3 shrink-0" />
-                {t("home.workspaceDefaultBadge")}
-              </span>
-            )}
-            {deck.designSystemId && (
-              <span className="inline-flex min-w-0 max-w-full items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground/80">
-                <IconPalette className="h-3 w-3 shrink-0 text-[#609FF8]" />
-                <span className="max-w-28 truncate">
-                  {designSystemTitle || "Design system"}
-                </span>
-              </span>
-            )}
-          </div>
         </div>
       </Link>
 

package/corpus/templates/slides/app/components/design-system/DesignSystemCard.tsx

@@ -3,8 +3,8 @@ import { ShareButton } from "@agent-native/core/client/sharing";
 import { VisibilityBadge } from "@agent-native/toolkit/sharing";
 import {
   IconBuildingCommunity,
+  IconComponents,
   IconDots,
-  IconPalette,
   IconStar,
   IconStarFilled,
   IconTrash,
@@ -190,7 +190,7 @@ export function DesignSystemCard({
       {/* Info area */}
       <div className="p-4 space-y-1.5">
         <div className="flex items-center gap-2 min-w-0">
-          <IconPalette className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+          <IconComponents className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
           <h3
             className="font-medium text-sm text-foreground truncate"
             title={title}

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -8,7 +8,7 @@ import { openAgentSidebar } from "@agent-native/core/client/navigation";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import {
   IconWorld,
-  IconPalette,
+  IconComponents,
   IconLoader2,
   IconBrandGithub,
   IconBrandFigma,
@@ -721,7 +721,7 @@ export function DesignSystemSetup({
                   </div>
 
                   <SourceAccordionRow
-                    icon={IconPalette}
+                    icon={IconComponents}
                     title={t("designSystemSetup.otherSources")}
                     description={t("designSystemSetup.otherSourcesDescription")}
                     expanded={sourcePanel === "other"}
@@ -741,7 +741,7 @@ export function DesignSystemSetup({
                       <div className="divide-y divide-border">
                         <SourceAccordionRow
                           className="rounded-none border-0"
-                          icon={IconPalette}
+                          icon={IconComponents}
                           title={t("designSystemSetup.companyBrand")}
                           description={t(
                             "designSystemSetup.companyBrandPlaceholder",
@@ -771,7 +771,7 @@ export function DesignSystemSetup({
                         {existingSystems.length > 0 && (
                           <SourceAccordionRow
                             className="rounded-none border-0"
-                            icon={IconPalette}
+                            icon={IconComponents}
                             title={t("designSystemSetup.forkExisting")}
                             description={t(
                               "designSystemSetup.customInstructionsDescription",
@@ -1064,7 +1064,7 @@ export function DesignSystemSetup({
                               }`}
                             >
                               <div className="flex items-center gap-2">
-                                <IconPalette className="w-3.5 h-3.5 text-muted-foreground" />
+                                <IconComponents className="w-3.5 h-3.5 text-muted-foreground" />
                                 <span className="text-sm text-foreground/80 truncate">
                                   {ds.title}
                                 </span>
@@ -1276,7 +1276,7 @@ function BuilderSourceStatus({ builder }: { builder: BuilderSourceDetails }) {
         ? IconBrandGithub
         : sourceKind === "code"
           ? IconFolder
-          : IconPalette;
+          : IconComponents;
   const sourceTitle =
     sourceKind === "figma"
       ? t("designSystemSetup.sourceFigma")

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

@@ -244,9 +244,9 @@ export function AnimationsPanel({
   );
 
   return (
-    <div className="w-60 flex flex-col h-full border-l border-border bg-background">
+    <div className="flex h-full w-60 flex-col bg-[var(--slides-editor-surface)]">
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2.5 border-b border-border">
+      <div className="flex items-center justify-between px-3 py-2.5">
         <span className="text-xs font-medium text-foreground/90">
           {t("animations.title")}
         </span>
@@ -303,7 +303,7 @@ export function AnimationsPanel({
 
         {/* Available elements to add */}
         {availableElements.length > 0 && (
-          <div className="border-t border-border px-2 py-2">
+          <div className="px-2 py-2">
             <div className="flex items-center justify-between mb-1.5 px-1">
               <span className="text-[9px] font-medium text-muted-foreground/70 uppercase tracking-wider">
                 {t("animations.elements")}

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

@@ -3,12 +3,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 export function DeckEditorSkeleton({ label }: { label: string }) {
   return (
     <div
-      className="flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background"
+      className="deck-editor-shell flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-background"
       role="status"
       aria-label={label}
       data-testid="deck-editor-loading"
     >
-      <div className="flex h-11 shrink-0 items-center gap-3 border-b border-border px-3">
+      <div className="flex h-11 shrink-0 items-center gap-3 px-3">
         <Skeleton className="size-8 rounded-md" />
         <Skeleton className="h-5 w-36" />
         <div className="ml-auto flex items-center gap-2">
@@ -18,7 +18,7 @@ export function DeckEditorSkeleton({ label }: { label: string }) {
         </div>
       </div>
       <div className="flex min-h-0 flex-1">
-        <div className="hidden w-56 shrink-0 flex-col gap-4 border-r border-border p-4 sm:w-64 md:flex">
+        <div className="hidden w-56 shrink-0 flex-col gap-4 p-4 sm:w-64 md:flex">
           {[0, 1, 2].map((index) => (
             <div key={index} className="flex gap-3">
               <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
@@ -26,7 +26,7 @@ export function DeckEditorSkeleton({ label }: { label: string }) {
             </div>
           ))}
         </div>
-        <div className="flex min-w-0 flex-1 items-center justify-center bg-muted/20 p-6">
+        <div className="flex min-w-0 flex-1 items-center justify-center bg-[var(--slides-editor-surface)] p-6">
           <Skeleton className="aspect-video w-full max-w-4xl rounded-md shadow-sm" />
         </div>
       </div>

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

@@ -445,7 +445,7 @@ export default function EditorSidebar({
   }, [slides, activeSlideId, onSelectSlide]);
 
   return (
-    <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col border-r border-border/70 bg-background/95 sm:w-52">
+    <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col bg-background sm:w-52">
       <div
         ref={thumbScrollRef}
         className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2"