@agent-native/core-corpus 0.216.0 → 0.217.0

package/corpus/templates/design/app/components/design/bridge/native-worker-scene-host.ts

@@ -30,6 +30,7 @@ import {
   createNativeSceneProvider,
   cloneNativeTextFlow,
   NativeSourceError,
+  NativeSourceCapabilityError,
   nativeTargetOverflowInsets,
   nativeTextFlowUsesDocumentFont,
   paintNativeTextFlow,
@@ -50,6 +51,12 @@ import {
 } from "./native-worker-protocol";
 import { NativeWorkerSourceSnapshot } from "./native-worker-source-snapshot";
 
+export class NativeWorkerSceneSourceError extends NativeSourceError {
+  constructor(readonly captureFailure: NativeSourceCapabilityError) {
+    super("worker-scene-source-unsupported", captureFailure.message);
+  }
+}
+
 export type NativeWorkerSceneEntry = {
   instance: EffectInstance;
   definition: EffectDefinition;
@@ -147,6 +154,7 @@ type Publication = {
   targetEpochs: Map<string, { source: number; authored: number }>;
   rootRecords: readonly NativeSourceRecord[];
   payloads: Map<string, { payload: string; definitionHash: string }>;
+  authoredPayloads: Map<string, { payload: string; definitionHash: string }>;
   clockIdentity?: { origin: number | null; sourcePlaying: boolean };
 };
 
@@ -216,13 +224,27 @@ export function nativeWorkerOutputSceneRecords(
   return nativeWorkerOutputRecords(records, sizes);
 }
 
+function nativeWorkerTargetDrawable(
+  rect: Pick<DOMRect, "x" | "y" | "width" | "height">,
+): boolean {
+  if (
+    ![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) ||
+    rect.width < 0 ||
+    rect.height < 0
+  )
+    throw new NativeSourceError(
+      "worker-target-geometry-invalid",
+      "A native effect target has unavailable or oversized geometry.",
+    );
+  return rect.width > 0 && rect.height > 0;
+}
+
 function nativeWorkerTargetGeometry(
-  target: HTMLElement | SVGSVGElement,
+  rect: DOMRect,
   pixelRatio: number,
   cssWidth: number,
   cssHeight: number,
 ): { width: number; height: number; rect: NativeWorkerEffectTarget["rect"] } {
-  const rect = target.getBoundingClientRect();
   const width = Math.max(1, Math.ceil(cssWidth * pixelRatio));
   const height = Math.max(1, Math.ceil(cssHeight * pixelRatio));
   if (
@@ -330,6 +352,8 @@ export class NativeWorkerSceneHost {
       compact: boolean;
     },
     private readonly getClockOrigin?: () => number,
+    private readonly hasPresentationToRetire?: () => boolean,
+    private readonly beforeCommit?: () => void,
   ) {
     const body = document.body;
     if (!body)
@@ -451,26 +475,36 @@ export class NativeWorkerSceneHost {
       this.targets.delete(id);
     }
     this.entries = [...entries];
-    for (const target of this.markedTargets) {
-      target.removeAttribute("data-an-native-fill-instance");
-      target.removeAttribute("data-an-native-layer-instance");
-    }
-    this.markedTargets.clear();
     for (const entry of entries) {
       const existing = this.targets.get(entry.instance.id);
       if (existing) existing.entry = entry;
       else this.targets.set(entry.instance.id, this.createTarget(entry));
     }
+    this.restoreEntryMarkersAndVisibility();
+    this.requestUpdate();
+  }
+
+  private restoreEntryMarkersAndVisibility(): void {
+    for (const target of this.markedTargets) {
+      target.removeAttribute("data-an-native-fill-instance");
+      target.removeAttribute("data-an-native-layer-instance");
+    }
+    this.markedTargets.clear();
     const topFill = new Map<Element, string>();
     const topLayer = new Map<Element, string>();
-    for (const entry of entries) {
+    for (const entry of this.entries) {
       if (entry.instance.placement === "fill")
         topFill.set(entry.target, entry.instance.id);
       if (entry.instance.placement === "layer")
         topLayer.set(entry.target, entry.instance.id);
     }
-    for (const entry of entries) {
-      const state = this.targets.get(entry.instance.id)!;
+    for (const entry of this.entries) {
+      const state = this.targets.get(entry.instance.id);
+      if (!state)
+        throw new NativeWorkerHostError(
+          "worker-instance-state-missing",
+          "A native worker instance is unavailable.",
+        );
       this.markedTargets.add(entry.target);
       if (topFill.get(entry.target) === entry.instance.id)
         entry.target.setAttribute(
@@ -490,7 +524,6 @@ export class NativeWorkerSceneHost {
           ? "visible"
           : "hidden";
     }
-    this.requestUpdate();
   }
 
   setEntriesAndWait(
@@ -671,11 +704,13 @@ export class NativeWorkerSceneHost {
       Math.abs(pixelRatio - committed.scene.pixelRatio) > 0.000001 ||
       (committed.scene.frameRateTarget ?? 60) !== cadence.frameRateTarget ||
       (committed.scene.compact ?? false) !== cadence.compact ||
-      this.entries.length !== committed.publication.payloads.size
+      this.entries.length !== committed.publication.authoredPayloads.size
     )
       return null;
     for (const entry of this.entries) {
-      const expected = committed.publication.payloads.get(entry.instance.id);
+      const expected = committed.publication.authoredPayloads.get(
+        entry.instance.id,
+      );
       const epoch = committed.publication.targetEpochs.get(entry.instance.id);
       const state = this.targets.get(entry.instance.id);
       const target = committed.scene.targets.find(
@@ -689,11 +724,15 @@ export class NativeWorkerSceneHost {
         !state ||
         state.entry.target !== entry.target ||
         state.provider.sourceEpoch?.() !== epoch.source ||
-        state.provider.authoredSourceEpoch?.() !== epoch.authored ||
-        !target
+        state.provider.authoredSourceEpoch?.() !== epoch.authored
       )
         return null;
       const rect = entry.target.getBoundingClientRect();
+      if (!nativeWorkerTargetDrawable(rect)) {
+        if (target) return null;
+        continue;
+      }
+      if (!target) return null;
       if (
         Math.abs(rect.x - target.rect.x) > 0.001 ||
         Math.abs(rect.y - target.rect.y) > 0.001 ||
@@ -811,12 +850,13 @@ export class NativeWorkerSceneHost {
   }
 
   private async updateLoop(): Promise<void> {
-    if (this.disposed || this.updating) return;
+    if (this.disposed || this.holdingLastFrame || this.updating) return;
     this.updating = true;
     try {
       while (
         this.dirty &&
         !this.disposed &&
+        !this.holdingLastFrame &&
         !this.capturingExport &&
         this.visible
       ) {
@@ -824,6 +864,7 @@ export class NativeWorkerSceneHost {
         try {
           await this.sendSnapshot();
         } catch (error) {
+          if (this.disposed || this.holdingLastFrame) return;
           this.assetRevisions.clear();
           this.onFailure(
             error instanceof Error ? error : new Error(String(error)),
@@ -933,7 +974,16 @@ export class NativeWorkerSceneHost {
       >();
       const extents = new Map<string, NativeEffectExtentPlan>();
       const previousByTarget = new Map<Element, string>();
-      for (const entry of this.entries) {
+      const targetRects = new Map<HTMLElement | SVGSVGElement, DOMRect>();
+      const drawableEntries = this.entries.filter((entry) => {
+        let rect = targetRects.get(entry.target);
+        if (!rect) {
+          rect = entry.target.getBoundingClientRect();
+          targetRects.set(entry.target, rect);
+        }
+        return nativeWorkerTargetDrawable(rect);
+      });
+      for (const entry of drawableEntries) {
         const state = this.targets.get(entry.instance.id);
         if (!state || state.entry.target !== entry.target)
           throw new NativeSourceError(
@@ -941,14 +991,14 @@ export class NativeWorkerSceneHost {
             "A native worker target changed during scene capture.",
           );
         const layout = this.layout(entry.target);
-        const visible = entry.target.getBoundingClientRect();
+        const visible = targetRects.get(entry.target)!;
         const displayScale = Math.max(
           visible.width / layout.width,
           visible.height / layout.height,
         );
         const targetPixelRatio = pixelRatio * displayScale;
         const geometry = nativeWorkerTargetGeometry(
-          entry.target,
+          visible,
           targetPixelRatio,
           layout.width,
           layout.height,
@@ -1212,13 +1262,13 @@ export class NativeWorkerSceneHost {
           ...(fillPhases ? { fillPhases } : {}),
         });
       }
-      for (const entry of this.entries) {
+      for (const entry of drawableEntries) {
         if (entry.instance.placement !== "backdrop") continue;
-        const owners = this.entries.filter(
+        const owners = drawableEntries.filter(
           (candidate, index) =>
             (candidate.instance.placement === "layer" ||
               (candidate.instance.placement === "fill" &&
-                this.entries.every(
+                drawableEntries.every(
                   (other, otherIndex) =>
                     otherIndex <= index ||
                     other.instance.placement !== "fill" ||
@@ -1337,10 +1387,17 @@ export class NativeWorkerSceneHost {
           records,
         );
       }
-      const rawRootRecords = await this.provider.readScene(
-        undefined,
-        "scene-presentation",
-      );
+      let rawRootRecords: NativeSourceRecord[];
+      try {
+        rawRootRecords = await this.provider.readScene(
+          undefined,
+          "scene-presentation",
+        );
+      } catch (error) {
+        if (!options && error instanceof NativeSourceCapabilityError)
+          throw new NativeWorkerSceneSourceError(error);
+        throw error;
+      }
       if (
         this.provider.needsContinuousFrames() ||
         (await this.provider.replaySafety(
@@ -1413,8 +1470,8 @@ export class NativeWorkerSceneHost {
         compact: cadence.compact,
         clock: this.snapshotClock(viewport, !!options, sourceClock),
         requiredAssets,
-        definitions: nativeWorkerDefinitions(this.entries),
-        instances: this.entries.map((entry) => entry.instance),
+        definitions: nativeWorkerDefinitions(drawableEntries),
+        instances: drawableEntries.map((entry) => entry.instance),
         targets: targetSnapshots,
         records,
         ...(selected ? { backdropRecords: normalizedRootRecords } : {}),
@@ -1459,6 +1516,15 @@ export class NativeWorkerSceneHost {
         ),
         rootRecords: rawRootRecords,
         payloads: new Map(
+          drawableEntries.map((entry) => [
+            entry.instance.id,
+            {
+              payload: JSON.stringify(entry.instance),
+              definitionHash: entry.definitionHash,
+            },
+          ]),
+        ),
+        authoredPayloads: new Map(
           this.entries.map((entry) => [
             entry.instance.id,
             {
@@ -1716,16 +1782,18 @@ export class NativeWorkerSceneHost {
       this.requestUpdate();
       return;
     }
-    const cameraOnly = this.canReuseCommittedPresentation(publication);
+    const replacedPresentation = this.hasPresentationToRetire?.() === true;
+    const cameraOnly =
+      !replacedPresentation && this.canReuseCommittedPresentation(publication);
+    const paintedChildren = new Set<Element>();
+    const authoredOpacities = new Map<Element, string>();
     if (!cameraOnly) {
       const body = document.body;
-      const paintedChildren = new Set<Element>();
       for (const record of publication.rootRecords) {
         const root = scenePaintRoot(record.node, body);
         if (root && root !== this.canvas && !root.matches(OMIT_SCENE_CHILD))
           paintedChildren.add(root);
       }
-      const authoredOpacities = new Map<Element, string>();
       for (const child of paintedChildren) {
         const opacity =
           child.getAttribute("data-an-native-authored-opacity") ??
@@ -1747,6 +1815,10 @@ export class NativeWorkerSceneHost {
         }
         authoredOpacities.set(child, opacity);
       }
+    }
+    this.beforeCommit?.();
+    if (replacedPresentation) this.restoreEntryMarkersAndVisibility();
+    if (!cameraOnly) {
       for (const old of this.suppressed) {
         if (paintedChildren.has(old)) continue;
         old.removeAttribute("data-an-native-scene-suppressed");
@@ -1807,7 +1879,7 @@ export class NativeWorkerSceneHost {
     });
     if (drainCamera) this.requestUpdate();
     for (const waiter of this.publicationWaiters) {
-      const expected = publication.payloads.get(waiter.instanceId);
+      const expected = publication.authoredPayloads.get(waiter.instanceId);
       const committedScene = this.committedSceneSnapshot;
       if (
         publication.generation < waiter.minimumGeneration ||
@@ -1835,6 +1907,7 @@ export class NativeWorkerSceneHost {
       committed.targetEpochs !== publication.targetEpochs ||
       committed.rootRecords !== publication.rootRecords ||
       committed.payloads !== publication.payloads ||
+      committed.authoredPayloads !== publication.authoredPayloads ||
       this.canvas.style.visibility !== "visible" ||
       !document.documentElement.hasAttribute("data-an-native-scene-managed")
     )
@@ -1981,25 +2054,32 @@ export class NativeWorkerSceneHost {
         scene.authoredEpoch === hiddenAuthoredEpoch &&
         this.provider.sourceEpoch?.() === scene.sourceEpoch &&
         this.provider.authoredSourceEpoch?.() === hiddenAuthoredEpoch &&
-        scene.instances.length === hiddenPayloads.length &&
-        scene.targets.length === hiddenPayloads.length &&
+        this.entries.length === hiddenPayloads.length &&
+        captured.publication.authoredPayloads.size === hiddenPayloads.length &&
         !hiddenPayloads.some((expected, index) => {
           const entry = this.entries[index];
-          const target = scene.targets[index];
-          const instance = scene.instances[index];
+          const target = scene.targets.find(
+            (item) => item.instanceId === expected.id,
+          );
+          const instance = scene.instances.find(
+            (item) => item.id === expected.id,
+          );
+          const payload = captured.publication.authoredPayloads.get(
+            expected.id,
+          );
           const provider = this.targets.get(expected.id)?.provider;
           const capturedEpoch = captured.publication.targetEpochs.get(
             expected.id,
           );
           return (
             !entry ||
-            !target ||
-            !instance ||
-            instance.id !== expected.id ||
-            target.instanceId !== expected.id ||
-            JSON.stringify(instance) !== expected.payload ||
+            !payload ||
+            payload.payload !== expected.payload ||
+            payload.definitionHash !== expected.definitionHash ||
+            !!target !== !!instance ||
+            (instance && JSON.stringify(instance) !== expected.payload) ||
             JSON.stringify(entry.instance) !== expected.payload ||
-            target.definitionHash !== expected.definitionHash ||
+            (target && target.definitionHash !== expected.definitionHash) ||
             entry.definitionHash !== expected.definitionHash ||
             !capturedEpoch ||
             provider?.sourceEpoch?.() !== capturedEpoch.source ||

package/corpus/templates/design/app/components/design/bridge/shader-runtime.bridge.ts

@@ -111,8 +111,12 @@
   const registry: Record<string, AnShaderDef> = {};
   const mounts: AnShaderMount[] = [];
   let rafId: number | null = null;
+  let lastFrameTs: number | null = null;
   let needsRender = false;
   let scanTimer: ReturnType<typeof setTimeout> | null = null;
+  // How large the editor shows this document, from its zoom. Outside the
+  // editor nothing sends one, so standalone pages keep full resolution.
+  let viewScale = 1;
 
   function nowMs(): number {
     return W.performance && W.performance.now
@@ -420,9 +424,13 @@
     const rect = el.getBoundingClientRect();
     const wCss = Math.max(1, Math.round(rect.width));
     const hCss = Math.max(1, Math.round(rect.height));
-    const dpr = Math.min(2, W.devicePixelRatio || 1);
-    const wPx = Math.max(1, Math.round(wCss * dpr));
-    const hPx = Math.max(1, Math.round(hCss * dpr));
+    // Zoomed out, render at the on-screen size, but never below one canvas
+    // pixel per CSS pixel: presets size grain and halftone dots in canvas
+    // pixels, so this keeps them no coarser than a standard display shows.
+    const deviceRatio = Math.min(2, W.devicePixelRatio || 1);
+    const ratio = Math.max(Math.min(1, deviceRatio), deviceRatio * viewScale);
+    const wPx = Math.max(1, Math.round(wCss * ratio));
+    const hPx = Math.max(1, Math.round(hCss * ratio));
     if (canvas.width !== wPx || canvas.height !== hPx) {
       canvas.width = wPx;
       canvas.height = hPx;
@@ -455,8 +463,18 @@
     gl.drawArrays(gl.TRIANGLES, 0, 3);
   }
 
-  function frame(): void {
+  function frame(ts?: number): void {
     rafId = null;
+    // On a board of several screens, Chromium can run each screen's
+    // animation-frame callbacks once per screen per display frame, all with
+    // the same timestamp. Draw on the first; the rest would repeat its pixels.
+    if (typeof ts === "number") {
+      if (ts === lastFrameTs) {
+        startLoop();
+        return;
+      }
+      lastFrameTs = ts;
+    }
     const t = (nowMs() - t0) / 1000;
     const animate = !reducedMotion && !document.hidden;
     for (let i = mounts.length - 1; i >= 0; i--) {
@@ -562,6 +580,25 @@
     if (!document.hidden) requestRender();
   });
 
+  // The editor posts its zoom to each screen. Zooming in keeps the
+  // document's own resolution; zoom steps round up to eighths so a pinch
+  // doesn't reallocate the canvases every frame.
+  W.addEventListener("message", function (event: MessageEvent) {
+    if (W.parent === W || event.source !== W.parent) return;
+    const data = event.data as {
+      type?: unknown;
+      scaleX?: unknown;
+      scaleY?: unknown;
+    } | null;
+    if (!data || data.type !== "set-editor-chrome-scale") return;
+    const scale = Math.max(Number(data.scaleX) || 0, Number(data.scaleY) || 0);
+    if (!(scale > 0)) return;
+    const next = Math.min(1, Math.ceil(scale * 8) / 8);
+    if (next === viewScale) return;
+    viewScale = next;
+    requestRender();
+  });
+
   try {
     new MutationObserver(function () {
       scheduleScan();

package/corpus/templates/design/app/components/design/design-canvas/text-content-change-result.ts

@@ -1,3 +1,9 @@
+import {
+  currentCanvasOutcomeDesignId,
+  recordCanvasOutcome,
+  runCanvasOperation,
+  type CanvasOperationHandle,
+} from "@/lib/canvas-outcome-tracking";
 import type { TextCommitStatus } from "@/pages/design-editor/command-types";
 
 export type QueuePendingTextHostCommit = (
@@ -156,16 +162,7 @@ export function consumePendingTextCreation(
   return true;
 }
 
-export function commitTextContentChange({
-  owner,
-  nodeId,
-  value,
-  isPendingTextCreation,
-  commit,
-  queueHostCommit,
-  cancelHostCommit,
-  requestSnapshot,
-}: {
+type CommitTextContentChangeArgs = {
   owner: string | null;
   nodeId: string | null;
   value: string;
@@ -174,15 +171,50 @@ export function commitTextContentChange({
   queueHostCommit: QueuePendingTextHostCommit;
   cancelHostCommit: CancelPendingTextHostCommit;
   requestSnapshot: () => void;
-}): "published" | "fallback-queued" {
+};
+
+export function commitTextContentChange(
+  args: CommitTextContentChangeArgs,
+): "published" | "fallback-queued" {
+  return runCanvasOperation("text_edit", (op) =>
+    commitTextContentChangeWithOutcome(op, args),
+  );
+}
+
+function commitTextContentChangeWithOutcome(
+  op: CanvasOperationHandle,
+  {
+    owner,
+    nodeId,
+    value,
+    isPendingTextCreation,
+    commit,
+    queueHostCommit,
+    cancelHostCommit,
+    requestSnapshot,
+  }: CommitTextContentChangeArgs,
+): "published" | "fallback-queued" {
   const canFallback = Boolean(
     isPendingTextCreation && owner && nodeId && value.length > 0,
   );
   const queueFallback = () => {
     if (!canFallback || !owner || !nodeId || value.length === 0) return false;
-    return queueHostCommit(owner, nodeId, value, (outcome) => {
+    // The retry can settle after the user opened another design.
+    const designId = currentCanvasOutcomeDesignId();
+    const queued = queueHostCommit(owner, nodeId, value, (outcome) => {
       if (outcome === "accepted") requestSnapshot();
+      recordCanvasOutcome(
+        "text_retry",
+        outcome === "accepted" ? "succeeded" : "failed",
+        outcome === "accepted" ? "none" : "not_written",
+        { designId },
+      );
     });
+    // A queued retry can be cancelled or replaced without settling, so the
+    // edit counts as deferred rather than waiting on a result that may never
+    // come. A retry that does settle counts on its own, as `text_retry`.
+    if (queued) op.defer("fallback_queued");
+    return queued;
   };
 
   let status: TextCommitStatus | void;
@@ -201,6 +233,8 @@ export function commitTextContentChange({
   // Any later direct result supersedes an older retry. A retry must never
   // overwrite text that a newer source edit already accepted.
   if (owner && nodeId) cancelHostCommit(owner, nodeId);
+  if (status === "accepted") op.succeed();
+  else if (status === "refused") op.fail("refused");
   requestSnapshot();
   return "published";
 }

package/corpus/templates/design/app/components/home/DesignHomeLibrary.tsx

@@ -2,6 +2,9 @@ import type { ReactNode } from "react";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
+const TAB_CLASS =
+  "h-auto px-0 py-0 text-lg leading-[27px] font-medium group-data-[variant=line]/tabs-list:h-auto group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:text-muted-foreground";
+
 export type DesignHomeLibraryTab = "templates" | "recent";
 
 interface DesignHomeLibraryProps {
@@ -29,7 +32,7 @@ export function DesignHomeLibrary({
 
   return (
     <section
-      className="agent-prompt-home-library"
+      className="agent-prompt-home-library mx-auto w-full max-w-[63rem]"
       aria-label={labels.templates}
     >
       <Tabs
@@ -42,19 +45,19 @@ export function DesignHomeLibrary({
         }}
       >
         <div className="flex flex-wrap items-center justify-between gap-3">
-          <TabsList variant="line">
-            <TabsTrigger value="recent" className="flex-none">
-              {labels.recent}
-            </TabsTrigger>
+          <TabsList variant="line" className="gap-2 border-b-0">
             <TabsTrigger
               value="templates"
-              className="flex-none"
+              className={TAB_CLASS}
               onClick={() => {
                 if (activeValue === "templates") onValueChange("templates");
               }}
             >
               {labels.templates}
             </TabsTrigger>
+            <TabsTrigger value="recent" className={TAB_CLASS}>
+              {labels.recent}
+            </TabsTrigger>
           </TabsList>
           {activeValue === "recent" ? (
             <div className="flex w-full min-w-0 flex-wrap items-center justify-end gap-2 sm:w-auto">
@@ -65,8 +68,12 @@ export function DesignHomeLibrary({
             browseAll
           )}
         </div>
-        <TabsContent value="templates">{templates}</TabsContent>
-        <TabsContent value="recent">{recent}</TabsContent>
+        <TabsContent value="templates" className="mt-4">
+          {templates}
+        </TabsContent>
+        <TabsContent value="recent" className="mt-4">
+          {recent}
+        </TabsContent>
       </Tabs>
     </section>
   );

package/corpus/templates/design/app/components/layout/GettingStarted.tsx

@@ -0,0 +1,50 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { GettingStartedCard } from "@agent-native/toolkit/app/onboarding";
+import { useMemo } from "react";
+import { Link } from "react-router";
+
+const GETTING_STARTED_STEP_KEYS = {
+  "create-design": "createDesign",
+  "add-brand": "addBrand",
+  "use-real-data": "useRealData",
+  "share-feedback": "shareFeedback",
+  "invite-teammate": "inviteTeammate",
+  "save-template": "saveTemplate",
+} as const;
+
+export function GettingStarted({ className }: { className?: string }) {
+  const t = useT();
+  const labels = useMemo(
+    () => ({
+      title: t("gettingStarted.title"),
+      progress: (completeCount: number, totalCount: number) =>
+        t("gettingStarted.progress", { completeCount, totalCount }),
+      collapse: t("gettingStarted.collapse"),
+      expand: t("gettingStarted.expand"),
+      completed: t("gettingStarted.completed"),
+      loadError: t("gettingStarted.loadError"),
+      retry: t("gettingStarted.retry"),
+    }),
+    [t],
+  );
+  const stepTitles = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(GETTING_STARTED_STEP_KEYS).map(([id, key]) => [
+          id,
+          t(`gettingStarted.steps.${key}`),
+        ]),
+      ),
+    [t],
+  );
+
+  return (
+    <GettingStartedCard
+      checklist="getting-started"
+      labels={labels}
+      stepTitles={stepTitles}
+      LinkComponent={Link}
+      className={className}
+    />
+  );
+}

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -14,6 +14,8 @@ import { IconComponents, IconHome, IconTemplate } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 
+import { GettingStarted } from "./GettingStarted";
+
 const COLLAPSE_KEY = "design.sidebar.collapsed";
 
 export function Sidebar() {
@@ -79,6 +81,7 @@ export function Sidebar() {
       items={items}
       footerContent={
         <>
+          {collapsed ? null : <GettingStarted className="mx-2 mb-2" />}
           <div className={collapsed ? "flex flex-col items-center" : undefined}>
             <BuilderCreditNotice compact showAtLimitOnly className="mb-2" />
           </div>