@agent-native/core 0.132.1 → 0.133.0

package/corpus/templates/slides/actions/set-default-design-system.ts

@@ -1,24 +1,50 @@
 import { defineAction } from "@agent-native/core";
-import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
 import { assertAccess } from "@agent-native/core/sharing";
-import { and, eq } from "drizzle-orm";
+import { and, eq, isNull } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 
 export default defineAction({
   description:
-    "Set a design system as the default. Unsets any previously-default design system for this user.",
+    "Set or unset a design system as the default for the current user and organization.",
   schema: z.object({
     id: z.string().describe("Design system ID to set as default"),
+    isDefault: z
+      .boolean()
+      .optional()
+      .default(true)
+      .describe("Whether this design system should be the default"),
   }),
-  run: async ({ id }) => {
+  run: async ({ id, isDefault = true }) => {
     await assertAccess("design-system", id, "editor");
 
     const db = getDb();
     const now = new Date().toISOString();
 
     const userEmail = getRequestUserEmail();
+    if (!userEmail) throw new Error("no authenticated user");
+    const orgId = getRequestOrgId();
+
+    const [target] = await db
+      .select({
+        ownerEmail: schema.designSystems.ownerEmail,
+        orgId: schema.designSystems.orgId,
+      })
+      .from(schema.designSystems)
+      .where(eq(schema.designSystems.id, id))
+      .limit(1);
+
+    if (
+      target?.ownerEmail !== userEmail ||
+      (target.orgId ?? null) !== (orgId ?? null)
+    ) {
+      throw new Error("Only the owner can set a design system as default");
+    }
 
     // Use a transaction to atomically unset all defaults then set the new one.
     // Without a transaction, concurrent set-default requests can interleave and
@@ -26,25 +52,29 @@ export default defineAction({
     // Only unset/set design systems owned by this user — isDefault is a per-owner
     // flag and must not bleed across users when operating on shared resources.
     await db.transaction(async (tx) => {
-      await tx
-        .update(schema.designSystems)
-        .set({ isDefault: false, updatedAt: now })
-        .where(eq(schema.designSystems.ownerEmail, userEmail ?? ""));
+      const targetScope = orgId
+        ? and(
+            eq(schema.designSystems.ownerEmail, userEmail),
+            eq(schema.designSystems.orgId, orgId),
+          )
+        : and(
+            eq(schema.designSystems.ownerEmail, userEmail),
+            isNull(schema.designSystems.orgId),
+          );
+
+      if (isDefault) {
+        await tx
+          .update(schema.designSystems)
+          .set({ isDefault: false, updatedAt: now })
+          .where(targetScope);
+      }
 
-      // Only set isDefault on the target if the caller owns it; shared design
-      // systems should not have their global isDefault flag flipped by someone
-      // who merely has editor access — that would pollute other owners' defaults.
       await tx
         .update(schema.designSystems)
-        .set({ isDefault: true, updatedAt: now })
-        .where(
-          and(
-            eq(schema.designSystems.id, id),
-            eq(schema.designSystems.ownerEmail, userEmail ?? ""),
-          ),
-        );
+        .set({ isDefault, updatedAt: now })
+        .where(and(eq(schema.designSystems.id, id), targetScope));
     });
 
-    return { id, isDefault: true };
+    return { id, isDefault };
   },
 });

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

@@ -16,6 +16,7 @@ import { normalizeSlidePadding } from "../app/lib/normalize-slide-padding.js";
 import { getDb, schema } from "../server/db/index.js"; // ensure registerShareableResource runs
 import { notifyClients } from "../server/handlers/decks.js";
 import { createDeckVersionSnapshot } from "../server/lib/deck-versions.js";
+import { hashSlideContent } from "../shared/slide-fit.js";
 import { slideLabelFor, touchAgentSlidePresence } from "./_agent-presence.js";
 import {
   awaitLayoutFitCheck,
@@ -137,8 +138,6 @@ export default defineAction({
     if (!find && !fullContent) {
       throw new Error("Either --find or --fullContent is required");
     }
-    const fitSince = Date.now();
-
     await assertAccess("deck", deckId, "editor");
 
     // ─── Read-modify-write under the shared per-deck lock ───────────────────
@@ -344,6 +343,9 @@ export default defineAction({
     }
 
     const { applied } = rmw;
+    // Start the freshness window after the SQL write and before notifying the
+    // editor. This keeps a fast render from being rejected as stale.
+    const fitSince = Date.now();
 
     // Best-effort presence: light the agent up on this slide in open editors
     // and drop a lingering "AI edited" highlight. Never blocks or fails the
@@ -368,7 +370,12 @@ export default defineAction({
     // Wait briefly for the editor to re-render and measure. If the patched
     // slide still overflows, surface the new measurement so the agent can
     // tighten further. Timeout = no editor open / nothing to measure.
-    const fit = await awaitLayoutFitCheck(slideId, fitSince, 4000);
+    const fit = await awaitLayoutFitCheck(
+      slideId,
+      fitSince,
+      4000,
+      hashSlideContent(rmw.slide?.content ?? ""),
+    );
 
     const base = {
       ok: true,
@@ -390,7 +397,10 @@ export default defineAction({
         ...base,
         layoutOverflow: {
           verticalOverflow: fit.measurement.verticalOverflow,
+          horizontalOverflow: fit.measurement.horizontalOverflow ?? 0,
+          contentWidth: fit.measurement.contentWidth,
           contentHeight: fit.measurement.contentHeight,
+          viewportWidth: fit.measurement.viewportWidth,
           viewportHeight: fit.measurement.viewportHeight,
         },
         message: formatOverflowForTool(deckId, fit.measurement),

package/corpus/templates/slides/actions/view-screen.ts

@@ -8,6 +8,7 @@ import { and, desc, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { hashSlideContent, type DeckFitState } from "../shared/slide-fit.js";
 import { readAppStateForCurrentTab } from "./_tab-state.js";
 
 export default defineAction({
@@ -191,29 +192,42 @@ export default defineAction({
 
       // ─── Layout-fit measurement ──────────────────────────────────────────
       // The editor measures the rendered slide and reports vertical overflow
-      // here whenever the natural content height exceeds the canvas content
-      // area. If this block is present, the current slide's HTML is too tall
-      // and needs to be rewritten to fit the canvas.
+      // here whenever the natural content bounds exceed the canvas content
+      // area. If this block is present, the current slide's HTML needs to be
+      // rewritten to fit the canvas.
       const overflow = (await readAppStateForCurrentTab("slide-fit-check")) as {
         slideId?: string;
+        contentHash?: string;
         verticalOverflow?: number;
+        horizontalOverflow?: number;
         contentHeight?: number;
+        contentWidth?: number;
         viewportHeight?: number;
+        viewportWidth?: number;
       } | null;
+      const verticalOverflow = overflow?.verticalOverflow ?? 0;
+      const horizontalOverflow = overflow?.horizontalOverflow ?? 0;
       if (
         overflow &&
-        typeof overflow.verticalOverflow === "number" &&
-        overflow.verticalOverflow > 0 &&
+        typeof overflow.contentHash === "string" &&
+        currentSlide?.content &&
+        overflow.contentHash === hashSlideContent(currentSlide.content) &&
+        Number.isFinite(overflow.verticalOverflow) &&
+        (overflow.horizontalOverflow === undefined ||
+          Number.isFinite(overflow.horizontalOverflow)) &&
+        Number.isFinite(overflow.contentHeight) &&
+        Number.isFinite(overflow.viewportHeight) &&
+        (verticalOverflow > 0 || horizontalOverflow > 0) &&
         overflow.slideId === currentSlide?.id
       ) {
         lines.push(``);
-        lines.push(`### ⚠ Layout overflows the canvas vertically`);
+        lines.push(`### ⚠ Layout overflows the canvas`);
         lines.push(
-          `This slide's natural rendered height is ${overflow.contentHeight}px, ` +
-            `but the canvas content area is only ${overflow.viewportHeight}px tall ` +
-            `(overflow: ${overflow.verticalOverflow}px). The renderer no longer ` +
+          `This slide's natural rendered content is ${overflow.contentWidth ?? "unknown"}x${overflow.contentHeight}px, ` +
+            `but the canvas content area is ${overflow.viewportWidth ?? "unknown"}x${overflow.viewportHeight}px ` +
+            `(overflow: ${verticalOverflow}px vertical, ${horizontalOverflow}px horizontal). The renderer no longer ` +
             `auto-shrinks overflowing slides — you must rewrite the slide HTML so ` +
-            `the rendered height is at most ${overflow.viewportHeight}px. Options, ` +
+            `the rendered content fits the measured content area. Options, ` +
             `in order of preference: (1) tighten copy — shorter headings/bullets, ` +
             `drop low-value lines; (2) reduce vertical density — fewer stacked ` +
             `cards, smaller gaps, slightly smaller body font (not below 16px); ` +
@@ -224,6 +238,69 @@ export default defineAction({
         );
       }
 
+      const deckFit = (await readAppStateForCurrentTab(
+        "deck-fit-checks",
+      )) as DeckFitState | null;
+      if (
+        deckFit?.deckId === rows[0].id &&
+        deckFit.aspectRatio === (deck.aspectRatio ?? "16:9") &&
+        deckFit.slides
+      ) {
+        type DeckFitSummary =
+          | { kind: "unknown"; index: number }
+          | {
+              kind: "overflow";
+              index: number;
+              measurement: (typeof deckFit.slides)[string];
+            };
+        const measured: DeckFitSummary[] = slides.flatMap(
+          (slide, index): DeckFitSummary[] => {
+            const measurement = deckFit.slides[slide.id];
+            if (
+              !measurement ||
+              measurement.contentHash !==
+                hashSlideContent(slide.content ?? "") ||
+              !Number.isFinite(measurement.verticalOverflow) ||
+              !Number.isFinite(measurement.horizontalOverflow) ||
+              !Number.isFinite(measurement.contentHeight) ||
+              !Number.isFinite(measurement.contentWidth) ||
+              !Number.isFinite(measurement.viewportHeight) ||
+              !Number.isFinite(measurement.viewportWidth) ||
+              !Number.isFinite(measurement.measuredAt)
+            ) {
+              return [{ kind: "unknown" as const, index }];
+            }
+            return measurement.verticalOverflow > 0 ||
+              measurement.horizontalOverflow > 0
+              ? [{ kind: "overflow" as const, index, measurement }]
+              : [];
+          },
+        );
+        const unknown = measured.filter((item) => item.kind === "unknown");
+        const overflows = measured.filter((item) => item.kind === "overflow");
+        lines.push(``);
+        lines.push(`### Deck-wide layout fit`);
+        if (unknown.length > 0) {
+          lines.push(
+            `Measured ${slides.length - unknown.length} of ${slides.length} slides; ` +
+              `the remaining slides need a fresh browser measurement before claiming the deck fits.`,
+          );
+        } else if (overflows.length > 0) {
+          lines.push(
+            `Overflow detected on ${overflows.length} slide(s): ${overflows
+              .map((item) => {
+                if (item.kind !== "overflow") return "";
+                return `slide ${item.index + 1} (${item.measurement.verticalOverflow}px vertical, ${item.measurement.horizontalOverflow}px horizontal)`;
+              })
+              .join(", ")}.`,
+          );
+        } else {
+          lines.push(
+            `All ${slides.length} slides fit their measured content area.`,
+          );
+        }
+      }
+
       return lines.join("\n");
     }
 

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

@@ -129,6 +129,8 @@ const markdownComponents = {
 };
 
 const MIN_AUTOFIT_SCALE = 0.65;
+const VERTICAL_OVERFLOW_TOLERANCE_PX = 8;
+const HORIZONTAL_OVERFLOW_TOLERANCE_PX = 8;
 
 const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -142,6 +144,8 @@ export interface SlideFitTransform {
    * rewrite the slide HTML to fit, instead of being papered over with a uniform
    * shrink that leaves ugly right/bottom margins. */
   verticalOverflow: number;
+  /** Horizontal overflow in CSS px (0 if content fits). */
+  horizontalOverflow: number;
 }
 
 export function computeSlideFitTransform({
@@ -149,6 +153,7 @@ export function computeSlideFitTransform({
   contentHeight,
   viewportWidth,
   viewportHeight,
+  measuredHorizontalOverflow = 0,
   minX = 0,
   minY = 0,
   minScale = MIN_AUTOFIT_SCALE,
@@ -160,6 +165,7 @@ export function computeSlideFitTransform({
   minX?: number;
   minY?: number;
   minScale?: number;
+  measuredHorizontalOverflow?: number;
 }): SlideFitTransform {
   // Only scale for horizontal overflow. For vertical overflow we surface a
   // `verticalOverflow` measurement so the agent can rewrite the slide HTML —
@@ -167,13 +173,33 @@ export function computeSlideFitTransform({
   // unbalanced right/bottom margins (with origin top-left), which looks worse
   // than asking the LLM to redo the layout to fit the canvas properly.
   const safeContentWidth = Math.max(1, contentWidth);
-  const rawScale = Math.min(1, Math.max(1, viewportWidth) / safeContentWidth);
-  const scale = Math.max(minScale, rawScale);
-
-  const verticalOverflow = Math.max(
+  const rawHorizontalOverflow = Math.max(
+    measuredHorizontalOverflow,
+    contentWidth - viewportWidth,
     0,
-    Math.round(contentHeight - viewportHeight),
   );
+  // Do not visually zoom for the same small wrapper spill that the warning
+  // intentionally ignores. Positioned objects also report independently, so
+  // their overflow never becomes an accidental scale-to-fit transform.
+  const widthToFit =
+    rawHorizontalOverflow > HORIZONTAL_OVERFLOW_TOLERANCE_PX
+      ? safeContentWidth
+      : Math.max(1, viewportWidth);
+  const rawScale = Math.min(1, Math.max(1, viewportWidth) / widthToFit);
+  const scale = Math.max(minScale, rawScale);
+
+  const rawVerticalOverflow = Math.max(0, contentHeight - viewportHeight);
+  // Small differences are commonly caused by line-box rounding and layout
+  // wrappers. Do not turn that harmless spill into an agent repair request;
+  // significant overflow is still reported at its measured size.
+  const verticalOverflow =
+    rawVerticalOverflow > VERTICAL_OVERFLOW_TOLERANCE_PX
+      ? Math.round(rawVerticalOverflow)
+      : 0;
+  const horizontalOverflow =
+    rawHorizontalOverflow > HORIZONTAL_OVERFLOW_TOLERANCE_PX
+      ? Math.round(rawHorizontalOverflow)
+      : 0;
 
   return {
     scale,
@@ -181,6 +207,7 @@ export function computeSlideFitTransform({
     y: minY < 0 ? -minY * scale : 0,
     fitted: rawScale < 0.999,
     verticalOverflow,
+    horizontalOverflow,
   };
 }
 
@@ -220,6 +247,7 @@ function ensureRawHtmlFitLayers(root: HTMLElement): HTMLElement[] {
 function measureContentBounds(target: HTMLElement): {
   contentWidth: number;
   contentHeight: number;
+  horizontalOverflow: number;
   minX: number;
   minY: number;
 } {
@@ -244,18 +272,14 @@ function measureContentBounds(target: HTMLElement): {
     }
     return false;
   };
-  const hasFreeformContent = descendants.some(isFreeformElement);
-
   const targetRect = target.getBoundingClientRect();
   // `scrollWidth` / `clientWidth` return CSS pixels; `getBoundingClientRect`
   // returns layout pixels after every ancestor transform. In presentation
   // mode the outer canvas is scaled UP (--slide-scale > 1, e.g. 1.74), so
-  // child rects come back inflated relative to scrollWidth. Without
-  // normalization, `Math.max(scrollWidth, maxX - minX)` reads the inflated
-  // value as content overflow, computeSlideFitTransform clamps to
-  // MIN_AUTOFIT_SCALE (0.65), and every slide visibly shrinks. The editor
-  // didn't hit this because thumbnail mode scales DOWN, so scrollWidth
-  // always wins. Normalize child rects back to CSS-px space.
+  // child rects come back inflated relative to their CSS dimensions. Without
+  // normalization, the bounds read as content overflow, so every slide can
+  // visibly shrink in presentation mode. Normalize child rects back to
+  // CSS-px space.
   const cssWidth = target.clientWidth || target.scrollWidth || 0;
   const cssHeight = target.clientHeight || target.scrollHeight || 0;
   const invScaleX =
@@ -266,15 +290,18 @@ function measureContentBounds(target: HTMLElement): {
   let minX = 0;
   let minY = 0;
   // Absolutely positioned objects intentionally move independently of the
-  // flow layout. They still expand scrollWidth/scrollHeight, but fitting the
-  // entire layer around them creates a feedback loop where dragging one object
-  // scales and shifts every sibling. When a layer contains freeform content,
-  // derive overflow from normal-flow element bounds instead.
-  let maxX = hasFreeformContent ? target.clientWidth : target.scrollWidth;
-  let maxY = hasFreeformContent ? target.clientHeight : target.scrollHeight;
+  // flow layout. Include them in vertical diagnostics so text boxes cannot
+  // silently run off the canvas, but keep them out of the horizontal fit
+  // transform. Using scrollHeight as the baseline makes full-size wrappers
+  // look like overflowing content even when their visible children fit.
+  let flowMaxX = target.clientWidth;
+  let flowMaxY = target.clientHeight;
+  let contentMaxY = target.clientHeight;
+  let contentMinX = 0;
+  let contentMaxX = target.clientWidth;
+  let hasFlowContent = false;
 
   for (const el of descendants) {
-    if (isFreeformElement(el)) continue;
     const rect = el.getBoundingClientRect();
     if (rect.width === 0 && rect.height === 0) continue;
 
@@ -283,15 +310,39 @@ function measureContentBounds(target: HTMLElement): {
     const right = (rect.right - targetRect.left) * invScaleX;
     const bottom = (rect.bottom - targetRect.top) * invScaleY;
 
+    contentMinX = Math.min(contentMinX, left);
+    contentMaxX = Math.max(contentMaxX, right);
+
+    if (isFreeformElement(el)) {
+      contentMaxY = Math.max(contentMaxY, bottom);
+      continue;
+    }
+
+    hasFlowContent = true;
     minX = Math.min(minX, left);
     minY = Math.min(minY, top);
-    maxX = Math.max(maxX, right);
-    maxY = Math.max(maxY, bottom);
+    flowMaxX = Math.max(flowMaxX, right);
+    flowMaxY = Math.max(flowMaxY, bottom);
+    contentMaxY = Math.max(contentMaxY, bottom);
+  }
+
+  // Raw text can be a direct child with no measurable element descendant.
+  // Only use scroll dimensions in that case; using them alongside normal
+  // descendants would count full-size wrappers as content and recreate the
+  // false positive.
+  if (!hasFlowContent && descendants.length === 0) {
+    contentMaxY = Math.max(contentMaxY, target.scrollHeight);
+    contentMaxX = Math.max(contentMaxX, target.scrollWidth);
   }
 
   return {
-    contentWidth: Math.max(target.clientWidth, maxX - minX),
-    contentHeight: Math.max(target.clientHeight, maxY - minY),
+    contentWidth: Math.max(target.clientWidth, flowMaxX - minX),
+    contentHeight: Math.max(target.clientHeight, flowMaxY - minY, contentMaxY),
+    horizontalOverflow: Math.max(
+      0,
+      -contentMinX,
+      contentMaxX - target.clientWidth,
+    ),
     minX,
     minY,
   };
@@ -303,10 +354,16 @@ function measureContentBounds(target: HTMLElement): {
 export interface SlideOverflowInfo {
   /** Vertical overflow in CSS px at native resolution (0 = fits). */
   verticalOverflow: number;
+  /** Horizontal overflow in CSS px at native resolution (0 = fits). */
+  horizontalOverflow: number;
   /** Total natural content height in CSS px. */
   contentHeight: number;
+  /** Total natural content width in CSS px. */
+  contentWidth: number;
   /** Available canvas height inside the slide padding. */
   viewportHeight: number;
+  /** Available canvas width inside the slide padding. */
+  viewportWidth: number;
 }
 
 function useSlideAutofit(
@@ -347,6 +404,7 @@ function useSlideAutofit(
           : [root].filter((target) => target.scrollHeight > 0);
 
       let worstOverflow = 0;
+      let worstHorizontalOverflow = 0;
       let worstInfo: SlideOverflowInfo | null = null;
 
       for (const target of targets) {
@@ -365,6 +423,7 @@ function useSlideAutofit(
         const viewportHeight = target.clientHeight || canvasHeight;
         const transform = computeSlideFitTransform({
           ...bounds,
+          measuredHorizontalOverflow: bounds.horizontalOverflow,
           viewportWidth,
           viewportHeight,
         });
@@ -378,10 +437,22 @@ function useSlideAutofit(
 
         if (transform.verticalOverflow > worstOverflow) {
           worstOverflow = transform.verticalOverflow;
+        }
+        worstHorizontalOverflow = Math.max(
+          worstHorizontalOverflow,
+          transform.horizontalOverflow,
+        );
+        if (
+          transform.verticalOverflow > 0 ||
+          transform.horizontalOverflow > 0
+        ) {
           worstInfo = {
-            verticalOverflow: transform.verticalOverflow,
+            verticalOverflow: worstOverflow,
+            horizontalOverflow: worstHorizontalOverflow,
             contentHeight: Math.round(bounds.contentHeight),
+            contentWidth: Math.round(bounds.contentWidth),
             viewportHeight: Math.round(viewportHeight),
+            viewportWidth: Math.round(viewportWidth),
           };
         }
       }
@@ -398,8 +469,11 @@ function useSlideAutofit(
         overflowCallbackRef.current?.(
           worstInfo ?? {
             verticalOverflow: 0,
+            horizontalOverflow: 0,
             contentHeight: 0,
+            contentWidth: 0,
             viewportHeight: 0,
+            viewportWidth: 0,
           },
         );
         autofitSettledRef.current?.();
@@ -615,6 +689,58 @@ export function SlideInner({
       } as React.CSSProperties)
     : {};
 
+  const overflowByTargetRef = useRef(new Map<string, SlideOverflowInfo>());
+  const reportTargetOverflow = useCallback(
+    (targetKey: string, info: SlideOverflowInfo) => {
+      overflowByTargetRef.current.set(targetKey, info);
+      if (!onOverflowChange) return;
+      const measurements = [...overflowByTargetRef.current.values()];
+      onOverflowChange(
+        measurements.reduce(
+          (result, measurement) => ({
+            verticalOverflow: Math.max(
+              result.verticalOverflow,
+              measurement.verticalOverflow,
+            ),
+            horizontalOverflow: Math.max(
+              result.horizontalOverflow,
+              measurement.horizontalOverflow,
+            ),
+            contentHeight: Math.max(
+              result.contentHeight,
+              measurement.contentHeight,
+            ),
+            contentWidth: Math.max(
+              result.contentWidth,
+              measurement.contentWidth,
+            ),
+            viewportHeight: Math.max(
+              result.viewportHeight,
+              measurement.viewportHeight,
+            ),
+            viewportWidth: Math.max(
+              result.viewportWidth,
+              measurement.viewportWidth,
+            ),
+          }),
+          {
+            verticalOverflow: 0,
+            horizontalOverflow: 0,
+            contentHeight: 0,
+            contentWidth: 0,
+            viewportHeight: 0,
+            viewportWidth: 0,
+          },
+        ),
+      );
+    },
+    [onOverflowChange],
+  );
+
+  useEffect(() => {
+    overflowByTargetRef.current.clear();
+  }, [slide.id, slide.content, aspectRatio]);
+
   // If slide has excalidraw data, render it as a static SVG thumbnail
   if (
     slide.excalidrawData &&
@@ -668,7 +794,7 @@ export function SlideInner({
           canvasHeight={dims.height}
           fitKey={left}
           className="slide-content text-white/90"
-          onOverflowChange={onOverflowChange}
+          onOverflowChange={(info) => reportTargetOverflow("left", info)}
           onAutofitSettled={onAutofitSettled}
         >
           <ReactMarkdown
@@ -683,6 +809,7 @@ export function SlideInner({
           canvasHeight={dims.height}
           fitKey={right}
           className="slide-content text-white/90"
+          onOverflowChange={(info) => reportTargetOverflow("right", info)}
           onAutofitSettled={onAutofitSettled}
         >
           <ReactMarkdown
@@ -708,7 +835,7 @@ export function SlideInner({
           canvasHeight={dims.height}
           fitKey={content}
           className="h-full w-full"
-          onOverflowChange={onOverflowChange}
+          onOverflowChange={(info) => reportTargetOverflow("raw", info)}
           onAutofitSettled={onAutofitSettled}
         >
           <BlankSlideContent content={content} />
@@ -734,7 +861,7 @@ export function SlideInner({
         canvasHeight={dims.height}
         fitKey={content}
         className="slide-content text-white/90 w-full"
-        onOverflowChange={onOverflowChange}
+        onOverflowChange={(info) => reportTargetOverflow("markdown", info)}
         onAutofitSettled={onAutofitSettled}
       >
         <ReactMarkdown

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

@@ -31,6 +31,7 @@ interface DesignSystemCardProps {
   data: DesignSystemData;
   isDefault: boolean;
   visibility?: "private" | "org" | "public" | null;
+  accessRole?: "owner" | "admin" | "editor" | "viewer";
   canManage?: boolean;
   onClick: () => void;
   onSetDefault: () => void;
@@ -50,6 +51,7 @@ export function DesignSystemCard({
   data,
   isDefault,
   visibility,
+  accessRole,
   canManage,
   onClick,
   onSetDefault,
@@ -97,23 +99,25 @@ export function DesignSystemCard({
           className="absolute top-3 right-3 z-10 flex items-center gap-1.5"
           onClick={(e) => e.stopPropagation()}
         >
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onSetDefault}
-                className="h-9 w-9 inline-flex items-center justify-center rounded-md bg-background/80 backdrop-blur-sm border border-border/40 hover:bg-background cursor-pointer"
-              >
-                {isDefault ? (
-                  <IconStarFilled className="w-4 h-4 text-[#609FF8]" />
-                ) : (
-                  <IconStar className="w-4 h-4 text-muted-foreground group-hover:text-foreground/70" />
-                )}
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {isDefault ? "Default design system" : "Set as default"}
-            </TooltipContent>
-          </Tooltip>
+          {accessRole === "owner" && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onSetDefault}
+                  className="h-9 w-9 inline-flex items-center justify-center rounded-md bg-background/80 backdrop-blur-sm border border-border/40 hover:bg-background cursor-pointer"
+                >
+                  {isDefault ? (
+                    <IconStarFilled className="w-4 h-4 text-primary" />
+                  ) : (
+                    <IconStar className="w-4 h-4 text-muted-foreground group-hover:text-foreground/70" />
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {isDefault ? "Default design system" : "Set as default"}
+              </TooltipContent>
+            </Tooltip>
+          )}
           <ShareButton
             resourceType="design-system"
             resourceId={id}