@agent-native/core 0.177.0-nightly-20260906034133 → 0.177.0

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 9019
+- template files: 9023

package/corpus/templates/analytics/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable user-facing changes to Agent-Native Analytics are documented here. Open it any
 time from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-09-04
+
+### Improved
+
+- The agent now answers data questions with explicit confidence instead of a dead end, and uses existing dashboards first
+
+## 2026-09-03
+
+### Fixed
+
+- Analytics autosaves now skip unchanged edits, keeping history focused on real changes.
+- Saved Analytics panels recover when chart fields are nested in their config
+
 ## 2026-09-01
 
 ### Added

package/corpus/templates/calendar/CHANGELOG.md

@@ -3,10 +3,30 @@
 All notable user-facing changes to Agent-Native Calendar are documented here. Open it any
 time from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-09-05
+
+### Improved
+
+- Calendar booking pages show the docs hero wave background
+
+## 2026-09-04
+
+### Improved
+
+- Generated booking-link OG images now use the shared branded background.
+
+### Fixed
+
+- Calendar controls now add the right source, shared events use their calendar colors, and color changes appear immediately.
+- Calendar sidebar remains toggleable while agent chat is open.
+- Read-only calendar events keep their date and time controls disabled
+
 ## 2026-09-03
 
 ### Improved
 
+- Calendar makes all-day event creation discoverable from the visible all-day row
+- Shared Google calendars now appear automatically with instant visibility controls and local display colors.
 - Calendar now supports reliable batch event updates and booking cancellations.
 - The agent now asks for your approval before it deletes events in bulk, emails your guests about a cancellation or change, or moves an event to another calendar.
 

package/corpus/templates/clips/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable user-facing changes to Clips are documented here. Open it any time
 from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-09-04
+
+### Fixed
+
+- Clips desktop shows its real version again in About and Get Info, and nightly builds resume.
+- Meeting notes now stop within about 15 seconds of a Zoom, Teams, or Meet call ending, even while music or a video keeps playing afterward.
+
 ## 2026-09-01
 
 ### Improved

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

@@ -1090,7 +1090,7 @@ export const migrations = runMigrations(
       sql: `CREATE TABLE IF NOT EXISTS clips_backfill_leases (
         lease_key TEXT PRIMARY KEY,
         holder TEXT NOT NULL,
-        expires_at INTEGER NOT NULL
+        expires_at BIGINT NOT NULL
       )`,
     },
     {
@@ -1135,7 +1135,7 @@ export const migrations = runMigrations(
       sql: `CREATE TABLE IF NOT EXISTS clips_backfill_leases (
         lease_key TEXT PRIMARY KEY,
         holder TEXT NOT NULL,
-        expires_at INTEGER NOT NULL
+        expires_at BIGINT NOT NULL
       )`,
     },
     {
@@ -1210,6 +1210,14 @@ export const migrations = runMigrations(
       // pass a reason — absent stays distinguishable from every named cause.
       sql: `ALTER TABLE clips_meetings ADD COLUMN IF NOT EXISTS end_reason TEXT`,
     },
+    {
+      version: 70,
+      name: "clips-backfill-leases-expires-at-bigint",
+      sql: `
+        -- guard:allow-destructive-ddl — widen legacy int4 timestamp storage to preserve Date.now() values
+        ALTER TABLE clips_backfill_leases ALTER COLUMN expires_at TYPE BIGINT
+      `,
+    },
   ],
   { table: "clips_migrations" },
 );

package/corpus/templates/content/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable user-facing changes to Agent-Native Content are documented here. Open it any
 time from the command menu (Cmd+K → "What's new").
 
+## 2026-09-03
+
+### Fixed
+
+- Database records can be added even when older rows use legacy positions.
+
 ## 2026-08-28
 
 ### Fixed

package/corpus/templates/design/CHANGELOG.md

@@ -3,10 +3,26 @@
 All notable user-facing changes to Design are documented here. Open it any time
 from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-09-04
+
+### Improved
+
+- The designs list now fills every row instead of leaving a single card stranded on the last one, and the card actions menu is readable in light mode.
+- The design system picker stays in the editor chat after a template fills the design, so later prompts can still target a specific system.
+
+### Fixed
+
+- Text drawn straight onto the canvas now takes a colour you can read against it, instead of always being white.
+- Design editor links now keep agent tools available.
+- Choosing "No design system" now clears the design's system instead of snapping back to your default.
+- Drawing the first shape on the board no longer flips the canvas to a different colour, and the Canvas swatch shows the colour it is painted with instead of "NONE".
+
 ## 2026-09-02
 
 ### Fixed
 
+- Fill and Stroke in the inspector now paint a pen path, line, polygon, or star itself rather than tinting its selection bounding box.
+- A closed pen path now takes the same fill and no stroke a drawn rectangle takes, instead of a black outline you had to hide.
 - Edit with AI now opens a focused editing prompt for selected elements in multi-screen view and reliably returns generated options without misclassifying an active request as superseded.
 - A greeting or question as the first message in a new design no longer ends with a false "couldn't confirm that a Design artifact was saved" reply.
 

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -263,6 +263,9 @@ interface EditPanelProps {
    */
   /** Design-level canvas background — the surround, not a screen's document. */
   canvasBackground?: string | null;
+  /** What the canvas is actually painted with when nothing is stored, so the
+   *  swatch reads as a colour rather than as an absent value. */
+  canvasBackgroundFallback?: string | null;
   onCanvasBackgroundChange?: (value: string, meta?: StyleChangeMeta) => void;
   onScreenGeometryChange?: (
     screenId: string,
@@ -1429,6 +1432,7 @@ function PageProperties({
   onStyleChange,
   onStylesChange,
   canvasBackground,
+  canvasBackgroundFallback,
   onCanvasBackgroundChange,
 }: {
   scope: "canvas" | "document";
@@ -1436,6 +1440,7 @@ function PageProperties({
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
   canvasBackground?: string | null;
+  canvasBackgroundFallback?: string | null;
   onCanvasBackgroundChange?: (value: string, meta?: StyleChangeMeta) => void;
 }) {
   const t = useT();
@@ -1462,7 +1467,7 @@ function PageProperties({
         <PanelSection title={t("editPanel.sections.canvas")}>
           <ColorInput
             label={t("editPanel.labels.background")}
-            value={canvasBackground ?? ""}
+            value={canvasBackground ?? canvasBackgroundFallback ?? ""}
             // meta carries phase: "preview" while dragging vs "commit" on
             // release. Dropping it persists every tick and the picker jumps.
             onChange={(value, meta) => onCanvasBackgroundChange(value, meta)}
@@ -1775,6 +1780,7 @@ export const EditPanel = memo(function EditPanel({
   selectedScreenLayoutGrid,
   onLayoutGridChange,
   canvasBackground,
+  canvasBackgroundFallback,
   onCanvasBackgroundChange,
   onScreenGeometryChange,
   pageStyles = {},
@@ -2356,6 +2362,7 @@ export const EditPanel = memo(function EditPanel({
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   canvasBackground={canvasBackground}
+                  canvasBackgroundFallback={canvasBackgroundFallback}
                   onCanvasBackgroundChange={onCanvasBackgroundChange}
                 />
               ) : null}

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -147,6 +147,10 @@ import { type ElementInfo, type PortableStyleSnapshot } from "./types";
  * resizable frame inside an infinite, pannable surface.
  */
 const SCREEN_WIDTH = OVERVIEW_FRAME_WIDTH;
+/** The board layers sit inside the canvas container, which redefines this var
+ *  when the design stores a colour — so reading it live is what keeps every
+ *  board layer the same colour as the canvas around it. */
+const CANVAS_BACKGROUND_VAR = "var(--design-editor-canvas-bg)";
 const SCREEN_HEIGHT = 640;
 const SCREEN_CARD_HEIGHT = SCREEN_HEIGHT + 26;
 const SCREEN_GAP = 56;
@@ -226,7 +230,6 @@ function hasScreenChildLayers(content: string): boolean {
 
 import {
   getBoardContentKey,
-  resolveBoardSurfaceBackground,
   getBoardContentLayerSignature,
   getBoardSurfaceContentBounds,
   getBoardSurfaceRenderContent,
@@ -685,19 +688,6 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       height: surfaceSize.height / scale,
     };
   }, [canvasZoom, pan.x, pan.y, surfaceSize.height, surfaceSize.width]);
-  // The board iframe cannot read the host's CSS vars. Prefer the live
-  // design canvas colour; the theme var is only the unset fallback.
-  const boardSurfaceBackground = useMemo(() => {
-    const themed =
-      typeof window === "undefined"
-        ? ""
-        : window
-            .getComputedStyle(document.documentElement)
-            .getPropertyValue("--design-editor-canvas-bg")
-            .trim();
-    return resolveBoardSurfaceBackground(canvasBackground, themed);
-  }, [canvasBackground, resolvedTheme]);
-
   const boardSurfaceRenderGeometry = useMemo(() => {
     if (!boardFrameGeometry) return undefined;
     const focusGeometry = boardSurfaceFocusPoint
@@ -746,16 +736,16 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       return null;
     }
     return getBoardSurfaceStaticPreviewContent({
+      darkScheme: resolvedTheme === "dark",
       html: boardSurfaceHtml,
       logicalGeometry: boardFrameGeometry,
       viewport: boardStaticPreviewViewport,
-      background: boardSurfaceBackground,
     });
   }, [
     boardSurfaceHtml,
     boardFrameGeometry,
     boardStaticPreviewViewport,
-    boardSurfaceBackground,
+    resolvedTheme,
   ]);
   const showBoardStaticPreview = Boolean(
     boardFrameGeometry &&
@@ -8547,7 +8537,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 pointerEvents: "none",
                 transform: `scale(${boardFrameGeometry.width / boardStaticPreviewViewport.width}, ${boardFrameGeometry.height / boardStaticPreviewViewport.height})`,
                 transformOrigin: "top left",
-                background: boardSurfaceBackground,
+                background: CANVAS_BACKGROUND_VAR,
               }}
             />
           </div>
@@ -8572,8 +8562,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             });
             const boardLayerSignature =
               getBoardContentLayerSignature(boardFileContent);
-            const boardRenderContent =
-              getBoardSurfaceRenderContent(boardFileContent);
+            const boardRenderContent = getBoardSurfaceRenderContent(
+              boardFileContent,
+              resolvedTheme === "dark",
+            );
             return (
               // Overflow-hidden wrapper so the board iframe never bleeds outside
               // its declared logical surface. z-index 0 keeps it below screen
@@ -8593,7 +8585,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   // board document. Inside the document it would be part of
                   // the srcdoc, so every colour-picker tick would rebuild the
                   // iframe; out here it is a CSS change and updates instantly.
-                  background: boardSurfaceBackground,
+                  background: CANVAS_BACKGROUND_VAR,
                 }}
               >
                 <DesignCanvas

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -9,19 +9,15 @@ export function hasBoardSurfaceContent(html: string | undefined) {
   return content.replace(/<!--[\s\S]*?-->/g, "").trim().length > 0;
 }
 
-const BOARD_SURFACE_RENDER_STYLE = `<style data-agent-native-board-surface-render>html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;position:relative;overflow:visible;}body>:not([data-agent-native-node-id]):not(style):not(script),body>[data-agent-native-node-id]:not([data-an-primitive]):not([data-agent-native-preserve-styles="true"]):has([data-agent-native-node-id]),body>[data-agent-native-node-id="body"],body>[data-agent-native-node-id="Body"],body>[data-agent-native-layer-name="body"],body>[data-agent-native-layer-name="Body"],body>[data-agent-native-layer-name="<body>"]{background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;}[data-agent-native-board-backdrop-candidate="true"]{display:none!important;pointer-events:none!important;}</style>`;
-// The comma syntax also works in the lightweight DOM used by canvas tests.
-export const BOARD_SURFACE_BACKGROUND = "hsl(0, 0%, 10%)";
-
-export function resolveBoardSurfaceBackground(
-  canvasBackground?: string | null,
-  themedFallback?: string | null,
-): string {
-  return (
-    canvasBackground?.trim() ||
-    themedFallback?.trim() ||
-    BOARD_SURFACE_BACKGROUND
-  );
+/**
+ * `color-scheme` is load-bearing, not cosmetic. Chrome paints an opaque base
+ * behind a frame whose scheme disagrees with its embedder, and that base sits
+ * between this transparent document and the canvas colour on the host layer —
+ * white in a dark editor. Matching the editor is what keeps the frame see-through.
+ */
+function boardSurfaceRenderStyle(darkScheme: boolean) {
+  const scheme = darkScheme ? "html{color-scheme:dark!important;}" : "";
+  return `<style data-agent-native-board-surface-render>${scheme}html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;position:relative;overflow:visible;}body>:not([data-agent-native-node-id]):not(style):not(script),body>[data-agent-native-node-id]:not([data-an-primitive]):not([data-agent-native-preserve-styles="true"]):has([data-agent-native-node-id]),body>[data-agent-native-node-id="body"],body>[data-agent-native-node-id="Body"],body>[data-agent-native-layer-name="body"],body>[data-agent-native-layer-name="Body"],body>[data-agent-native-layer-name="<body>"]{background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;}[data-agent-native-board-backdrop-candidate="true"]{display:none!important;pointer-events:none!important;}</style>`;
 }
 
 const BOARD_SURFACE_BACKDROP_MIN_EDGE_PX = 2400;
@@ -267,12 +263,19 @@ function getCurrentLayerParentNodeId(
   return "body";
 }
 
-export function getBoardSurfaceRenderContent(html: string) {
+export function getBoardSurfaceRenderContent(html: string, darkScheme = false) {
   if (!html) return html;
-  const renderHtml = markAccidentalBoardBackdropCandidates(html);
-  if (renderHtml.includes("data-agent-native-board-surface-render")) {
-    return renderHtml;
+  const markedHtml = markAccidentalBoardBackdropCandidates(html);
+  const BOARD_SURFACE_RENDER_STYLE = boardSurfaceRenderStyle(darkScheme);
+  if (markedHtml.includes(BOARD_SURFACE_RENDER_STYLE)) {
+    return markedHtml;
   }
+  // A block from the other scheme is stale, not already-rendered: leaving it
+  // would pin the frame to the theme it was first rendered under.
+  const renderHtml = markedHtml.replace(
+    /<style data-agent-native-board-surface-render>[\s\S]*?<\/style>/i, // i18n-ignore render-style matcher, not visible UI copy
+    "",
+  );
   if (/<\/head>/i.test(html)) {
     return renderHtml.replace(
       /<\/head>/i,
@@ -321,24 +324,22 @@ function stripExecutableStaticPreviewContent(html: string) {
  * logical board paintable without allocating or scrolling a 131k iframe.
  */
 export function getBoardSurfaceStaticPreviewContent(args: {
-  /** Themed canvas colour; falls back to the dark default when unresolved. */
-  background?: string;
+  darkScheme?: boolean;
   html: string;
   logicalGeometry: FrameGeometry;
   viewport: { width: number; height: number };
 }) {
   const renderHtml = stripExecutableStaticPreviewContent(
-    getBoardSurfaceRenderContent(args.html),
+    getBoardSurfaceRenderContent(args.html, args.darkScheme),
   );
   const width = Math.max(1, args.logicalGeometry.width);
   const height = Math.max(1, args.logicalGeometry.height);
   const viewportWidth = Math.max(1, args.viewport.width);
   const viewportHeight = Math.max(1, args.viewport.height);
-  const background = args.background?.trim() || BOARD_SURFACE_BACKGROUND;
   const scale = Math.min(viewportWidth / width, viewportHeight / height);
   const offsetX = -args.logicalGeometry.x;
   const offsetY = -args.logicalGeometry.y;
-  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:${background}!important;background-color:${background}!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
+  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
   if (/<\/head\s*>/i.test(renderHtml)) {
     return injectDocumentMarkup(renderHtml, style, { target: "head" });
   }

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -165,6 +165,7 @@ import {
   IconMessageCircle,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
+import { useTheme } from "next-themes";
 import {
   useState,
   useEffect,
@@ -5629,6 +5630,10 @@ function DesignEditor() {
   // layer (see beginRename in LayersPanel.tsx).
   const layersPanelRef = useRef<LayersPanelHandle | null>(null);
   const canvasContainerRef = useRef<HTMLDivElement>(null);
+  /** Read by primitive creation, which runs far above where the colour is
+   *  derived. */
+  const canvasBackgroundRef = useRef<string | null>(null);
+  const { resolvedTheme } = useTheme();
   const activeEditorDragRef = useRef(false);
 
   // Live handle to the active DesignCanvas preview iframe. DesignCanvas owns the
@@ -8080,6 +8085,7 @@ function DesignEditor() {
           activeFile,
           applyLocalContentUpdate,
           boardFileId,
+          canvasBackground: canvasBackgroundRef.current,
           canEditDesign,
           collabContentFileIdRef,
           collabContentRef,
@@ -15778,7 +15784,7 @@ function DesignEditor() {
       })),
     [firstRunTemplatesQuery.data?.templates],
   );
-  const firstRunDesignSystems = useMemo(
+  const designSystemOptions = useMemo(
     () => designSystemPickerOptions(designSystems),
     [designSystems],
   );
@@ -15790,6 +15796,10 @@ function DesignEditor() {
   // first screen row exists.
   const [chatMessageCount, setChatMessageCount] = useState(0);
   const showFirstRunStart = designIsEmpty && chatMessageCount === 0;
+  // The picked system is stored on the design and read by every later
+  // generation, so it outlives the starting-point row a template retires.
+  const showComposerDesignSystem =
+    designSystemsLoading || designSystemOptions.length > 0;
   const applyTemplate = useActionMutation("create-design-from-template");
   const handleFirstRunTemplate = useCallback(
     async (templateId: string) => {
@@ -15820,9 +15830,11 @@ function DesignEditor() {
       selectedPromptDesignSystemId,
     ],
   );
-  const handleFirstRunDesignSystem = useCallback(
+  const handleComposerDesignSystem = useCallback(
     (designSystemId: string | null) => {
-      setPromptDesignSystemId(designSystemId ?? undefined);
+      // null is the user picking "No design system"; only undefined means
+      // nothing has been chosen yet, which re-resolves the default.
+      setPromptDesignSystemId(designSystemId);
       persistPromptDesignSystem(designSystemId);
     },
     [persistPromptDesignSystem],
@@ -16334,6 +16346,29 @@ function DesignEditor() {
     string | null
   >(null);
   const canvasBackground = canvasBackgroundDraft ?? persistedCanvasBackground;
+  /** The inspector must show a colour, not "none", for a canvas the user has
+   *  not set — and the only honest source for that is what the container is
+   *  currently painted with, which follows the editor theme. */
+  const [themedCanvasBackground, setThemedCanvasBackground] = useState<
+    string | null
+  >(null);
+  canvasBackgroundRef.current = canvasBackground ?? themedCanvasBackground;
+  useEffect(() => {
+    if (canvasBackground) return;
+    // A throwaway element, not the raw token: the token is space-separated
+    // HSL, which the colour parser rejects. After a frame, because next-themes
+    // sets the `dark` class in an ancestor effect React runs after this one.
+    const frame = requestAnimationFrame(() => {
+      const probe = document.createElement("span");
+      probe.style.cssText =
+        "position:absolute;visibility:hidden;background-color:var(--design-editor-canvas-bg)";
+      document.body.append(probe);
+      const painted = window.getComputedStyle(probe).backgroundColor;
+      probe.remove();
+      setThemedCanvasBackground(painted || null);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [canvasBackground, resolvedTheme]);
   const handleCanvasBackgroundChange = useCallback(
     (value: string, meta?: { phase?: "preview" | "commit" }) => {
       if (!id || !canEditDesignRef.current) return;
@@ -19760,6 +19795,7 @@ function DesignEditor() {
     selectedScreenLayoutGrid,
     onLayoutGridChange: canEditDesign ? handleLayoutGridChange : undefined,
     canvasBackground,
+    canvasBackgroundFallback: themedCanvasBackground,
     onCanvasBackgroundChange: canEditDesign
       ? handleCanvasBackgroundChange
       : undefined,
@@ -20016,13 +20052,13 @@ function DesignEditor() {
                     }
                     composerSlot={
                       <>
-                        {showFirstRunStart ? (
+                        {showComposerDesignSystem ? (
                           <div data-design-system-picker className="px-3 pb-2">
                             <DesignSystemPickerControl
-                              designSystems={firstRunDesignSystems}
+                              designSystems={designSystemOptions}
                               loading={designSystemsLoading}
                               selectedId={selectedPromptDesignSystemId ?? null}
-                              onChange={handleFirstRunDesignSystem}
+                              onChange={handleComposerDesignSystem}
                             />
                           </div>
                         ) : null}
@@ -20523,6 +20559,7 @@ function DesignEditor() {
                     BreakpointDeviceControl — see rightSidebarActions. */}
                 <div
                   ref={canvasContainerRef}
+                  data-design-canvas-container
                   className="relative min-w-0 flex-1 overflow-hidden bg-[var(--design-editor-canvas-bg)]"
                   // Overrides the themed canvas colour rather than a background
                   // shorthand, so every descendant reading the var follows.

package/corpus/templates/design/app/pages/Index.tsx

@@ -112,7 +112,9 @@ interface DesignListResult {
   designs: Design[];
 }
 
-const DESIGN_PAGE_SIZE = 12;
+// The New Design card shares the grid, so a full page is pageSize + 1 tiles;
+// 12 is what divides evenly into every breakpoint's column count.
+const DESIGN_PAGE_SIZE = 11;
 
 export default function Index() {
   const t = useT();
@@ -1201,9 +1203,14 @@ export default function Index() {
                             aria-label={t("home.actionsForDesign", {
                               title: design.title,
                             })}
-                            className="h-7 w-7 bg-black/60 hover:bg-black/80 cursor-pointer"
+                            // A scrim over the user's thumbnail, which is
+                            // their content: a theme-following chip vanishes
+                            // on a thumbnail that happens to match it.
+                            // guard:allow-raw-color — scrim over user content
+                            className="h-7 w-7 bg-black/60 hover:bg-black/75 cursor-pointer"
                           >
-                            <IconDots className="w-3.5 h-3.5 text-foreground/70" />
+                            {/* guard:allow-raw-color — scrim over user content */}
+                            <IconDots className="w-3.5 h-3.5 text-white" />
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">

package/corpus/templates/design/app/pages/Templates.tsx

@@ -319,15 +319,6 @@ export default function Templates() {
         </div>
       ) : null}
       <main className="mx-auto w-full max-w-[1480px] px-4 py-6 sm:px-6 sm:py-10">
-        <div className="mb-8 max-w-2xl">
-          <h1 className="text-lg font-semibold text-foreground">
-            {t("templatesPage.title")}
-          </h1>
-          <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
-            {t("templatesPage.description")}
-          </p>
-        </div>
-
         {isLoading ? (
           <TemplateGridSkeleton />
         ) : isError ? (
@@ -339,7 +330,6 @@ export default function Templates() {
           <div className="flex flex-col gap-10">
             <TemplateSection
               title={t("templatesPage.yourTemplates")}
-              description={t("templatesPage.yourTemplatesDescription")}
               templates={userTemplates}
               linkedTemplateId={linkedTemplateId}
               empty={t("templatesPage.yourTemplatesEmpty")}
@@ -428,7 +418,6 @@ export default function Templates() {
 
 function TemplateSection({
   title,
-  description,
   templates,
   linkedTemplateId,
   empty,
@@ -436,7 +425,6 @@ function TemplateSection({
   onDelete,
 }: {
   title: string;
-  description?: string;
   templates: DesignTemplateSummary[];
   linkedTemplateId?: string | null;
   empty?: string;
@@ -446,12 +434,7 @@ function TemplateSection({
   if (templates.length === 0 && !empty) return null;
   return (
     <section>
-      <div className="mb-3">
-        <h2 className="text-sm font-semibold text-foreground">{title}</h2>
-        {description ? (
-          <p className="mt-1 text-xs text-muted-foreground">{description}</p>
-        ) : null}
-      </div>
+      <h2 className="mb-3 text-sm font-semibold text-foreground">{title}</h2>
       {templates.length === 0 ? (
         <div className="flex min-h-32 items-center justify-center rounded-xl border border-dashed bg-muted/20 px-6 text-center text-sm text-muted-foreground">
           {empty}

package/corpus/templates/design/app/pages/design-editor/canvas-primitive-insert.ts

@@ -15,6 +15,7 @@ import {
 import {
   BOARD_TEXT_AUTO_COLOR_MARKER,
   destinationBackgroundLightness,
+  resolveDestinationBackgroundLightnessOrNull,
 } from "./cross-screen-text-color";
 import { escapeHtmlAttributeValue, escapeHtmlText } from "./dom-utils";
 import { isStandaloneHttpUrl } from "./editor-state";
@@ -281,7 +282,13 @@ function deepestFrameContaining(
 export function appendCanvasPrimitiveToHtml(
   content: string,
   primitive: CanvasPrimitiveInsert,
-  options?: { preserveNegativePosition?: boolean; isBoardTarget?: boolean },
+  options?: {
+    preserveNegativePosition?: boolean;
+    isBoardTarget?: boolean;
+    /** The canvas colour behind the board. The board document is transparent
+     *  by design, so its surface can only be measured from the host. */
+    boardBackground?: string | null;
+  },
 ): string | null {
   if (typeof window === "undefined") return null;
   // A live/localhost screen stores its route URL here, not a document.
@@ -520,18 +527,25 @@ export function appendCanvasPrimitiveToHtml(
         element.style.alignItems = "flex-start";
       }
       // "currentColor" inherits the unstyled document's black body text, so
-      // it is invisible on any dark surface — the always-dark board, and
-      // equally a screen whose own background is dark. Light screens keep
-      // "currentColor" so text still inherits their theme.
-      // Measure the frame the text actually lands in: a dark frame on a light
-      // page would otherwise keep currentColor and render invisible.
-      // isBoardTarget only says which surface is behind the text, and the
-      // board is not always dark — a measured background always wins.
-      const measuredLightness = destinationBackgroundLightness(hostOrBody);
+      // it is invisible on any dark surface. The board renderer forces its own
+      // document transparent, so a colour on that body is never painted and
+      // measuring it would judge a surface nobody sees — a frame inside the
+      // board still can be. The canvas behind it arrives from the host.
+      const boardSurfaceIsLight =
+        options?.isBoardTarget === true
+          ? resolveDestinationBackgroundLightnessOrNull([
+              { color: options.boardBackground ?? null },
+            ])
+          : null;
+      const measuredIsLight =
+        options?.isBoardTarget === true && hostOrBody === doc.body
+          ? null
+          : destinationBackgroundLightness(hostOrBody);
+      const surfaceIsLight = measuredIsLight ?? boardSurfaceIsLight;
       const autoTextNeedsLightFill =
-        measuredLightness === null
+        surfaceIsLight === null
           ? options?.isBoardTarget === true
-          : !measuredLightness;
+          : !surfaceIsLight;
       const resolvedTextColor =
         primitive.fill ?? defaultCanvasTextColor(autoTextNeedsLightFill);
       element.style.color = resolvedTextColor;