@agent-native/core-corpus 0.201.0-nightly-20261005153421 → 0.201.0

package/corpus/templates/design/.agents/skills/storing-data/SKILL.md

@@ -75,10 +75,11 @@ state their PostgreSQL types directly.
 
 Member offboarding and email changes refuse to run while any column named
 `email`, `*_email`, `*scope_id`, `created_by`, `updated_by`, `invited_by`,
-`owner`, `principal_id`, `session_id`, or `user_id` has no policy. `owner_email`
-and `createSharesTable()` tables are handled for you. Declare every other one,
-including columns that are not member identities, from the app's database
-plugin graph (Clips does it in `server/db/index.ts`):
+`owner`, `principal_id`, `session_id`, or `user_id` has no policy.
+`createSharesTable()` tables are handled for you, and undeclared `owner_email`
+columns transfer to the successor, which is right only for owned content.
+Declare every other one, including columns that are not member identities, from
+the app's database plugin graph (Clips does it in `server/db/index.ts`):
 
 ```ts
 import { registerIdentityColumns } from "@agent-native/core/org";
@@ -88,13 +89,17 @@ registerIdentityColumns([
   { table: "space_members", column: "email", emailChange: "rekey", offboard: "delete", orgScope: { column: "space_id", references: { table: "spaces", column: "id", orgColumn: "org_id" } }, reason: "Space membership grants access." },
   // Someone else's address: never rewritten.
   { table: "meeting_participants", column: "email", emailChange: "retain", offboard: "retain", reason: "Attendee address from the calendar provider." },
+  // A credential in an owner_email table: never handed to the successor.
+  { table: "api_keys", column: "owner_email", emailChange: "rekey", offboard: "revoke", reason: "Bearer keys act as their owner." },
 ]);
 ```
 
-Choose `delete` for grants, credentials, and pending tokens; `retain` for
+Choose `delete` for grants, credentials, and pending tokens, or `revoke` (sets
+`revoked_at`) when a reader treats a missing row as "not revoked"; `retain` for
 attribution, history, and third-party addresses; `transfer` only for owned
-data. A table without `org_id` needs `orgScope` or an organization-scoped
-removal leaves its rows alone.
+data. Declare `owner_email` tables that hold credentials or grants, or
+offboarding hands them to the successor. A table without `org_id` needs
+`orgScope` or an organization-scoped removal leaves its rows alone.
 
 | Template     | Tables                                        |
 | ------------ | --------------------------------------------- |

package/corpus/templates/design/CHANGELOG.md

@@ -3,17 +3,58 @@
 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-10-05
+
+### Fixed
+
+- The Recent tab shows loading placeholders until your designs are ready.
+
+## 2026-10-03
+
+### Fixed
+
+- Alt-drag can increase an oversized corner radius even when CSS did not normalize the radius map.
+- Corner-radius handles resize oversized radii without jumping
+- Cross-screen drops skip flex targets whose axis or item placement cannot be modeled.
+- Layers dropped into visible canvas space beyond a Screen now stay on the board.
+- Reopening a Visual Edit connection keeps screens in its saved project
+- Visible Screen overflow no longer routes drops to the canvas
+
 ## 2026-10-02
 
+### Improved
+
+- Builder.io setup now routes account activation through the one-click flow.
+
 ### Fixed
 
+- Cross-screen auto-layout drops avoid guessing when direction comes from stylesheet rules
+- Cross-Screen grid drops preserve the selected cell and the layer's track span
+- Design drops now keep the chosen grid cell and follow reverse flex order when falling back to a fitting container
+- Editing a design source file now refreshes collaborators with that design open.
+- Grid drops avoid cells occupied by generated content
+- Grid drops avoid mis-targeting cells in scrolled grids
+- Layers that exceed a frame's width or height now fall back to the nearest container that fits
+- Oversized drops target the nearest container that can fit the dragged layer.
+- Oversized layers can now drop into a fitting ancestor when a nested frame is too small
+- Reverse auto-layout drops keep their visual and layer order aligned.
+- Drag-and-drop placement follows item size, spacing, and visible order in reversed layouts.
 - Cross-screen drag targets no longer jump when an earlier screen sends a late move.
 - Cross-screen drags continue when focus moves between screens
 
 ## 2026-10-01
 
+### Improved
+
+- Collaborators on the same screen now appear in the avatar bar in overview.
+- The Design home opens on Recent when designs are available, hides the empty Recent tab, and distinguishes designs you own from those shared with you.
+
 ### Fixed
 
+- Edits from collaborators now show up in an open design without a refresh, including frame moves and added or deleted screens.
+- PNG and PDF exports now preserve fonts, images, effects, and page framing in imported screens.
+- Two people editing different parts of the same screen no longer lose edits, and one person's undo no longer reverts the other's changes.
+- Viewers on a shared design now see an editor's changes within a few seconds instead of minutes.
 - A prompt you send before connecting AI is sent automatically once you connect.
 - Cross-Screen drags now apply modifier keys reliably when the source screen loses focus.
 - Cross-screen drops now respect modifier keys at release.

package/corpus/templates/design/README.md

@@ -4,7 +4,7 @@ An agent-native HTML prototyping studio — describe a screen and get a working
 Alpine/Tailwind prototype you can refine, tweak, and export. An open-source,
 self-hostable alternative to v0 and Lovable-style prototyping tools.
 
-**Live app: [design.agent-native.com](https://design.agent-native.com)**
+**Live app: [design.agent-native.com](https://design.agent-native.com?utm_source=github&utm_medium=referral&utm_content=design-readme)**
 
 Instead of a layered drawing canvas, the agent generates complete self-contained
 HTML prototypes, renders them in an iframe, and lets you refine the result with
@@ -31,4 +31,4 @@ pnpm install
 pnpm dev
 ```
 
-Full docs: [agent-native.com/docs/template-design](https://agent-native.com/docs/template-design).
+Full docs: [agent-native.com/docs/template-design](https://agent-native.com/docs/template-design?utm_source=github&utm_medium=referral&utm_content=design-readme).

package/corpus/templates/design/actions/list-designs.ts

@@ -45,9 +45,11 @@ export default defineAction({
         "Set to true only for a lightweight UI picker; it returns the first bounded picker page and hasMore when more exist.",
       ),
     createdBy: z
-      .enum(["all", "me"])
+      .enum(["all", "me", "not-me"])
       .optional()
-      .describe("Set to 'me' to list only designs created by the current user"),
+      .describe(
+        "Set to 'me' or 'not-me' to filter by whether the current user owns each design",
+      ),
     search: z
       .string()
       .trim()
@@ -82,7 +84,10 @@ export default defineAction({
       ? DESIGN_LIST_MAX_PAGE_SIZE
       : (args.pageSize ?? DESIGN_LIST_DEFAULT_PAGE_SIZE);
     const ownerEmail = getRequestUserEmail()?.trim().toLowerCase() || null;
-    if (args.createdBy === "me" && !ownerEmail) {
+    if (
+      (args.createdBy === "me" || args.createdBy === "not-me") &&
+      !ownerEmail
+    ) {
       return {
         count: 0,
         totalCount: 0,
@@ -100,7 +105,9 @@ export default defineAction({
       accessFilter(schema.designs, schema.designShares),
       args.createdBy === "me"
         ? sql`lower(trim(${schema.designs.ownerEmail})) = ${ownerEmail}`
-        : undefined,
+        : args.createdBy === "not-me"
+          ? sql`lower(trim(${schema.designs.ownerEmail})) <> ${ownerEmail}`
+          : undefined,
       search
         ? sql`lower(${schema.designs.title}) LIKE ${`%${escapeLike(search)}%`} ESCAPE '\\'`
         : undefined,

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

@@ -379,6 +379,8 @@ import {
 } from "./multi-screen/coordinate-transforms";
 import {
   captureCrossScreenSourceHtmlSnapshot,
+  getBoardDropRoute,
+  getCrossScreenSourceGeometry,
   getCrossScreenDropGuideForHitTest,
   getCrossScreenDropGuideStyle,
   getCrossScreenGhostStyle,
@@ -2771,6 +2773,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         timeoutMs?: number;
         previewGeneration?: number;
         previewRequestSeq?: number;
+        sourceScreenId?: string;
         sourceElementSize?: { width: number; height: number };
         sourceGridSpan?: { columns: number; rows: number };
         modifiers?: {
@@ -2786,7 +2789,23 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       );
       const targetIsBoard = candidate.id === boardFileId;
       if (!targetScreen && !targetIsBoard) return Promise.resolve({});
-      if (targetIsBoard && !boardSurfaceRenderGeometry) {
+      if (
+        targetIsBoard &&
+        getBoardDropRoute({
+          point: boardPoint,
+          viewportGeometry: boardViewportGeometry,
+          renderGeometry: boardSurfaceRenderGeometry,
+          sourceScreenGeometry:
+            options.sourceScreenId && options.sourceScreenId !== boardFileId
+              ? getCrossScreenSourceGeometry({
+                  renderedGeometry:
+                    renderedFrameGeometryRef.current[options.sourceScreenId],
+                  persistedGeometry:
+                    frameGeometryRef.current[options.sourceScreenId],
+                })
+              : undefined,
+        }) !== "board-hit-test"
+      ) {
         return Promise.resolve({});
       }
       const targetIframe = targetIsBoard
@@ -2967,6 +2986,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         preview: true,
         previewGeneration,
         previewRequestSeq: requestSeq,
+        sourceScreenId: crossScreenDragMsgRef.current?.sourceScreenId,
         sourceElementSize: crossScreenDragMsgRef.current?.sourceElementSize,
         sourceGridSpan: crossScreenDragMsgRef.current?.sourceGridSpan,
         modifiers: crossScreenDragMsgRef.current?.modifiers,
@@ -3155,6 +3175,26 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       const target = getFrameEntryAtPoint(boardPoint, {
         excludeId: sourceScreenId,
       });
+      const boardDropRoute =
+        (sourceScreenId !== boardFileId ||
+          crossScreenDragMsgRef.current?.duplicate === true) &&
+        boardFileId &&
+        boardFrameGeometry
+          ? getBoardDropRoute({
+              point: boardPoint,
+              viewportGeometry: boardViewportGeometry,
+              renderGeometry: boardSurfaceRenderGeometry,
+              sourceScreenGeometry:
+                sourceScreenId === boardFileId
+                  ? undefined
+                  : getCrossScreenSourceGeometry({
+                      renderedGeometry:
+                        renderedFrameGeometryRef.current[sourceScreenId],
+                      persistedGeometry:
+                        frameGeometryRef.current[sourceScreenId],
+                    }),
+            })
+          : null;
       traceOnce(
         crossScreenResolveTraceRef,
         "drop",
@@ -3190,8 +3230,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           crossScreenDragMsgRef.current?.duplicate === true) &&
         boardFileId &&
         boardFrameGeometry &&
-        boardSurfaceRenderGeometry &&
-        geometryContainsPoint(boardSurfaceRenderGeometry, boardPoint)
+        boardDropRoute
       ) {
         const nextTarget = { id: boardFileId, geometry: boardFrameGeometry };
         if (crossScreenTargetRef.current?.id !== boardFileId) {
@@ -3314,42 +3353,59 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         clearCurrentDrop();
         return;
       }
-      const sourceFrameGeometry = frameGeometryRef.current?.[sourceScreenId];
-      const boardSurfaceHit =
-        !!boardFileId &&
+      const sourceFrameGeometry = getCrossScreenSourceGeometry({
+        renderedGeometry: renderedFrameGeometryRef.current[sourceScreenId],
+        persistedGeometry: frameGeometryRef.current[sourceScreenId],
+      });
+      const boardDropRoute =
+        boardFileId &&
         (sourceScreenId !== boardFileId || payload.duplicate) &&
-        !!boardFrameGeometry &&
-        !!boardSurfaceRenderGeometry &&
-        geometryContainsPoint(boardSurfaceRenderGeometry, lastBoardPoint);
+        boardFrameGeometry
+          ? getBoardDropRoute({
+              point: lastBoardPoint,
+              viewportGeometry: boardViewportGeometry,
+              renderGeometry: boardSurfaceRenderGeometry,
+              sourceScreenGeometry:
+                sourceScreenId === boardFileId
+                  ? undefined
+                  : getCrossScreenSourceGeometry({
+                      renderedGeometry:
+                        renderedFrameGeometryRef.current[sourceScreenId],
+                      persistedGeometry:
+                        frameGeometryRef.current[sourceScreenId],
+                    }),
+            })
+          : null;
+      const boardCanvasHit = boardDropRoute !== null;
       const sameBoardDuplicateHit =
-        sourceScreenId === boardFileId && payload.duplicate && boardSurfaceHit;
+        sourceScreenId === boardFileId && payload.duplicate && boardCanvasHit;
+      const resolvedCandidate =
+        candidate?.id === boardFileId && !boardCanvasHit ? null : candidate;
       const droppedInsideSourceScreen =
-        !candidate &&
+        !resolvedCandidate &&
         !sameBoardDuplicateHit &&
         !!sourceFrameGeometry &&
-        lastBoardPoint.x >= sourceFrameGeometry.x &&
-        lastBoardPoint.x <= sourceFrameGeometry.x + sourceFrameGeometry.width &&
-        lastBoardPoint.y >= sourceFrameGeometry.y &&
-        lastBoardPoint.y <= sourceFrameGeometry.y + sourceFrameGeometry.height;
-      if (droppedInsideSourceScreen) {
-        cancelPendingSourceDelete();
-        finishCommittedDrop();
-        clearCurrentDrop();
-        return;
-      }
+        geometryContainsPoint(sourceFrameGeometry, lastBoardPoint);
       trace("drop", "finalize", {
-        candidate: candidate?.id ?? null,
+        candidate: resolvedCandidate?.id ?? null,
         sourceScreen: sourceScreenId,
+        boardDropRoute,
         droppedInsideSourceScreen,
         outcome: droppedInsideSourceScreen
           ? "discarded — pointer never left the source screen"
-          : candidate
+          : resolvedCandidate
             ? "moving into candidate"
             : "no candidate — refused unless over the board surface",
       });
+      if (droppedInsideSourceScreen) {
+        cancelPendingSourceDelete();
+        finishCommittedDrop();
+        clearCurrentDrop();
+        return;
+      }
       const targetCandidate =
-        candidate ??
-        (boardSurfaceHit && boardFileId && boardFrameGeometry
+        resolvedCandidate ??
+        (boardCanvasHit && boardFileId && boardFrameGeometry
           ? { id: boardFileId, geometry: boardFrameGeometry }
           : null);
       if (!targetCandidate) {
@@ -3377,6 +3433,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       if (targetCandidate.id === boardFileId) {
         void runHitTest(targetCandidate, lastBoardPoint, {
           timeoutMs: HIT_TEST_COMMIT_TIMEOUT_MS,
+          sourceScreenId,
           sourceElementSize: payload.sourceElementSize,
           sourceGridSpan: payload.sourceGridSpan,
           modifiers: payload.modifiers,
@@ -3403,8 +3460,33 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             const hasAnchor = Boolean(
               anchorNodeId || pendingNodeId || anchorSelector,
             );
+            const targetLocalPoint = boardSurfaceRenderGeometry
+              ? boardPointToBoardSurfaceLocalPoint(
+                  lastBoardPoint,
+                  boardSurfaceRenderGeometry,
+                )
+              : lastBoardPoint;
+            const targetOutsideBoardRenderGeometry =
+              boardSurfaceRenderGeometry !== undefined &&
+              !geometryContainsPoint(
+                boardSurfaceRenderGeometry,
+                lastBoardPoint,
+              );
             const transactionBeforeDrop =
               runtimeStructurePendingTransactionRef?.current ?? null;
+            trace("drop", "board-commit-point", {
+              targetCanvasPoint: lastBoardPoint,
+              targetLocalPoint,
+              targetOutsideBoardRenderGeometry,
+              boardSurfaceRenderOrigin: boardSurfaceRenderGeometry
+                ? {
+                    x: boardSurfaceRenderGeometry.x,
+                    y: boardSurfaceRenderGeometry.y,
+                  }
+                : null,
+              sourcePointerOffset: payload.sourcePointerOffset ?? null,
+              hasAnchor,
+            });
             onCrossScreenElementDropRef.current?.({
               sourceSelector: payload.selector,
               sourceNodeId: payload.sourceId,
@@ -3421,13 +3503,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               targetGridPlacement: gridPlacement,
               targetAnchorRect: anchorRect,
               targetCanvasPoint: lastBoardPoint,
-              targetLocalPoint:
-                hasAnchor && boardSurfaceRenderGeometry
-                  ? boardPointToBoardSurfaceLocalPoint(
-                      lastBoardPoint,
-                      boardSurfaceRenderGeometry,
-                    )
-                  : lastBoardPoint,
+              targetLocalPoint,
+              targetOutsideBoardRenderGeometry,
               sourcePointerOffset: payload.sourcePointerOffset,
               sourceComputedSize: payload.sourceComputedSize,
               sourceHtmlSnapshot: payload.sourceHtmlSnapshot,
@@ -4362,6 +4439,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     activeId,
     boardFileId,
     boardFrameGeometry,
+    boardViewportGeometry,
     boardSurfaceRenderGeometry,
     finishBoardCrossScreenDrop,
     getFrameEntryAtPoint,

package/corpus/templates/design/app/components/design/multi-screen/cross-screen-drop.ts

@@ -2,6 +2,7 @@ import type { CSSProperties } from "react";
 
 import type { PortableStyleSnapshot } from "../types";
 import { screenLocalRectToBoardGeometry } from "./coordinate-transforms";
+import { geometryContainsPoint } from "./frame-geometry";
 import { SURFACE_PADDING } from "./overview-layout";
 import type {
   CrossScreenDropAxis,
@@ -14,6 +15,33 @@ import type {
   Point,
 } from "./types";
 
+export function getCrossScreenSourceGeometry(args: {
+  renderedGeometry?: FrameGeometry;
+  persistedGeometry?: FrameGeometry;
+}): FrameGeometry | undefined {
+  return args.renderedGeometry ?? args.persistedGeometry;
+}
+
+export function getBoardDropRoute(args: {
+  point: Point;
+  viewportGeometry?: FrameGeometry;
+  renderGeometry?: FrameGeometry;
+  sourceScreenGeometry?: FrameGeometry;
+}): "board-hit-test" | "board-root" | null {
+  const { point, viewportGeometry, renderGeometry, sourceScreenGeometry } =
+    args;
+  if (
+    !viewportGeometry ||
+    !geometryContainsPoint(viewportGeometry, point) ||
+    (sourceScreenGeometry && geometryContainsPoint(sourceScreenGeometry, point))
+  ) {
+    return null;
+  }
+  return renderGeometry && geometryContainsPoint(renderGeometry, point)
+    ? "board-hit-test"
+    : "board-root";
+}
+
 export function isPointerInsideSourceIframe(args: {
   iframeX: number;
   iframeY: number;

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -345,6 +345,7 @@ export interface MultiScreenCanvasProps {
     targetAnchorRect?: CrossScreenHitTestAnchorRect;
     targetCanvasPoint?: Point;
     targetLocalPoint?: Point;
+    targetOutsideBoardRenderGeometry?: boolean;
     sourcePointerOffset?: Point;
     sourceComputedSize?: { width?: number; height?: number };
     sourceHtmlSnapshot?: string;

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

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export type DesignHomeLibraryTab = "templates" | "recent";
+
+interface DesignHomeLibraryProps {
+  value: DesignHomeLibraryTab;
+  onValueChange: (value: DesignHomeLibraryTab) => void;
+  labels: { templates: string; recent: string };
+  browseAll?: ReactNode;
+  search?: ReactNode;
+  recentActions?: ReactNode;
+  templates: ReactNode;
+  recent?: ReactNode;
+  recentVisible: boolean;
+}
+
+export function DesignHomeLibrary({
+  value,
+  onValueChange,
+  labels,
+  browseAll,
+  search,
+  recentActions,
+  templates,
+  recent,
+  recentVisible,
+}: DesignHomeLibraryProps) {
+  const activeValue = recentVisible ? value : "templates";
+
+  return (
+    <section
+      className="agent-prompt-home-library"
+      aria-label={labels.templates}
+    >
+      <Tabs
+        className="agent-prompt-home-tabs"
+        value={activeValue}
+        onValueChange={(nextValue) => {
+          if (nextValue === "templates" || nextValue === "recent") {
+            onValueChange(nextValue);
+          }
+        }}
+      >
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <TabsList variant="line">
+            {recentVisible ? (
+              <TabsTrigger value="recent" className="flex-none">
+                {labels.recent}
+              </TabsTrigger>
+            ) : null}
+            <TabsTrigger
+              value="templates"
+              className="flex-none"
+              onClick={() => {
+                if (activeValue === "templates") onValueChange("templates");
+              }}
+            >
+              {labels.templates}
+            </TabsTrigger>
+          </TabsList>
+          {activeValue === "recent" ? (
+            <div className="flex w-full min-w-0 flex-wrap items-center justify-end gap-2 sm:w-auto">
+              {search}
+              {recentActions}
+            </div>
+          ) : (
+            browseAll
+          )}
+        </div>
+        <TabsContent value="templates">{templates}</TabsContent>
+        {recentVisible ? (
+          <TabsContent value="recent">{recent}</TabsContent>
+        ) : null}
+      </Tabs>
+    </section>
+  );
+}

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

@@ -94,7 +94,7 @@ export function Header({ onOpenNavigation }: { onOpenNavigation: () => void }) {
   );
 
   return (
-    <div className={cn(isHome ? "design-home-toolbar shrink-0" : "contents")}>
+    <div className={cn(isHome ? "shrink-0" : "contents")}>
       <header
         className={cn(
           "shrink-0 items-center gap-3 bg-background px-4 lg:px-6",
@@ -116,9 +116,7 @@ export function Header({ onOpenNavigation }: { onOpenNavigation: () => void }) {
           ) : null}
           {title ?? <ResolvedTitle />}
         </div>
-        {isHome ? (
-          <div className="design-home-header-search w-full">{actions}</div>
-        ) : null}
+        {isHome && actions ? <div className="shrink-0">{actions}</div> : null}
         <div className="flex items-center justify-end gap-2 shrink-0">
           {isHome ? <HomeImportButton /> : null}
           {!isHome && actions}

package/corpus/templates/design/app/components/ui/tabs.tsx

@@ -1 +1,59 @@
-export * from "@agent-native/toolkit/ui/tabs";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: "default" | "line";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    data-variant={variant}
+    className={cn(
+      variant === "line"
+        ? "group/tabs-list inline-flex w-fit items-center justify-start gap-1 border-b border-border bg-transparent p-0 text-muted-foreground"
+        : "inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "group-data-[variant=line]/tabs-list:relative group-data-[variant=line]/tabs-list:h-9 group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:font-medium group-data-[variant=line]/tabs-list:text-muted-foreground group-data-[variant=line]/tabs-list:data-[state=active]:border-foreground group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/corpus/templates/design/app/global.css

@@ -5,10 +5,6 @@
 
 @source "./**/*.{ts,tsx}";
 
-.design-home-toolbar {
-  container: design-home-toolbar / inline-size;
-}
-
 .design-template-preview-frame {
   width: var(--design-template-width);
   height: var(--design-template-height);
@@ -43,26 +39,11 @@
 }
 
 .design-home-header {
-  display: grid;
+  display: flex;
   height: 3.5rem;
-  grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr) minmax(0, 1fr);
-  grid-template-rows: 3.5rem;
-  column-gap: 0.75rem;
   border-bottom: 0;
 }
 
-.design-home-header-search {
-  grid-column: 2;
-  grid-row: 1;
-  display: flex;
-  width: 100%;
-  min-width: 150px;
-  max-width: 30rem;
-  align-items: center;
-  align-self: center;
-  justify-self: center;
-}
-
 .design-home-header h1 {
   font-size: 1rem;
   line-height: 1.25rem;
@@ -74,20 +55,6 @@
   }
 }
 
-@container design-home-toolbar (max-width: 26rem) {
-  .design-home-header {
-    height: 7rem;
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-rows: 3.5rem 3.5rem;
-  }
-
-  .design-home-header-search {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    justify-self: center;
-  }
-}
-
 .design-home-prompt-composer-area.agent-composer-area--hero {
   padding: 0;
 }

package/corpus/templates/design/app/i18n/en-US.ts

@@ -1751,6 +1751,9 @@ export default {
     allAuthors: "All authors",
     me: "Me",
     designFilter: "Design filter",
+    ownedByAnyone: "Owned by anyone",
+    ownedByMe: "Owned by me",
+    sharedWithMe: "Shared with me",
     mine: "Mine",
     all: "All",
     showMineDesigns: "Show my designs",
@@ -1784,6 +1787,7 @@ export default {
     pickStartingPoint: "Pick a starting point or write your own prompt.",
     searchNoResultsTitle: "No designs match your search",
     searchNoResultsDescription: "Try a different search.",
+    noDesignsMatchFilter: "No designs match the current filter.",
     starterSaas: "SaaS landing page",
     starterDashboard: "Dashboard",
     starterPricing: "Pricing page",