@agent-native/core 0.153.10 → 0.154.0

package/corpus/templates/design/app/pages/design-editor/generation-prompt-directives.ts

@@ -121,10 +121,12 @@ export async function loadDesignSystemGenerationContext(
 export function designIntakeQuestionDirectives(
   designId: string,
   designSystemId?: string | null,
+  referenceImageCount = 0,
 ): string[] {
   return [
     `This is a new UI-started design for design id "${designId}". The design shell already exists - DO NOT call create-design.`,
     ...designSystemGenerationDirectives(designSystemId),
+    ...referenceImageDirectives(referenceImageCount),
     "First, call `show-design-questions` with 4-6 tailored questions and then stop. Do NOT call generate-design or present-design-variants until the user submits or skips the questions.",
     "Make the questions feel like Claude Design intake: form factor, aesthetic direction, important features/content, special interactions/polish, and whether to explore variations. Omit or rephrase anything the user's prompt already answered.",
     "Use concise option chips with `allowOther: true`; include a practical `Decide for me` option where useful. Use `multiSelect: true` for feature/interactions questions.",
@@ -159,13 +161,33 @@ export function designVariantGenerationDirectives(
   ];
 }
 
+/**
+ * An attached UI screenshot is the specification. Reproducing it is the whole
+ * job, so these directives ship in the same prompt as the image — the skill
+ * body is not in the system prompt and loses every conflict against directives
+ * that are.
+ */
+export function referenceImageDirectives(
+  referenceImageCount: number,
+): string[] {
+  if (referenceImageCount < 1) return [];
+  return [
+    `The user attached ${referenceImageCount} reference image(s) to this message. Treat any image showing a UI as a layout specification to reproduce, not as loose inspiration.`,
+    "Match its regions and their positions, navigation pattern, information hierarchy, density, component grammar (tabs vs pills, cards vs rows, sidebar vs topbar), and approximate proportions. Briefly name what you see before building so a misread can be corrected early.",
+    "Do NOT substitute your own composition, palette, or font for something the image or the linked design system already specifies — including choices a generic quality heuristic would discourage. Deviate only where the image is genuinely unreadable, and say so when you do.",
+    "Do NOT call `show-design-questions` or `present-design-variants` about anything the image already answers; the direction is chosen. Generate the one design it specifies.",
+  ];
+}
+
 export function designGenerationDirectives(
   designId: string,
   designSystemId?: string | null,
+  referenceImageCount = 0,
 ): string[] {
   return [
     `Use the \`generate-design --designId="${designId}"\` action with exactly one complete, renderable \`index.html\` file first. The design already exists - DO NOT call create-design.`,
     ...designSystemGenerationDirectives(designSystemId),
+    ...referenceImageDirectives(referenceImageCount),
     'If the user asked to explore variations, call `present-design-variants` with 2-5 concise directions. Prefer label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens. Wait for their chat pick, delete each unchosen variant screen at most once, call `get-design-snapshot` exactly once with `fileId` for the kept screen, then call `edit-design` exactly once on that same `fileId` in a bounded pass. Use `mode: "replace-file"` when expanding the representative placeholder into a complete but compact product UI in the chosen direction. Prioritize the primary workflow and render secondary details as visible controls, states, or affordances if the feature list is too large for one reliable edit. Do not repeat delete/snapshot cycles. Do not call `generate-design` after a variant pick. Stop after the first successful `edit-design` save. Otherwise generate one polished first direction.',
     'Responsive behavior is mandatory for every web design: use a mobile-first layout, include a viewport meta tag, stack or collapse desktop columns at narrow widths, and never rely on a fixed-width desktop shell. Default to a desktop primary artboard. For a Desktop or Both/responsive intake answer, pass `primaryViewport: "desktop"` and `canvasFrames` with width 1440 and height 1024; pass `primaryViewport: "mobile"` only when the user explicitly chooses a mobile-primary artboard.',
     "Keep the first pass bounded enough to finish quickly: one self-contained Alpine.js + Tailwind CDN HTML document, polished but concise. Add 3-6 tweaks only when they naturally fit the design.",

package/corpus/templates/design/changelog/2026-08-13-a-screen-that-would-render-behind-an-invisible-alpine-overla.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-13
+---
+
+A screen whose Alpine overlay would cover it on load — `x-cloak` without its hiding rule, or a broken Alpine script URL — is now caught when it is saved instead of shipping as a blank or covered design.

package/corpus/templates/design/changelog/2026-08-13-attach-a-ui-screenshot-and-the-design-is-reproduced-not-rein.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-13
+---
+
+Attach a UI screenshot and the design is reproduced from it instead of being reinterpreted as three alternative directions.

package/corpus/templates/design/changelog/2026-08-13-linking-a-design-system-means-you-never-get-generic-directio.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-13
+---
+
+Linking a design system means you never get generic direction cards: exploring variants without real HTML is now refused for that design rather than rendering placeholder screens that ignore your tokens.

package/corpus/templates/design/changelog/2026-08-13-the-design-audit-now-reports-when-a-screen-ignores-its-linke.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-13
+---
+
+The design audit now reports when a screen uses none of its linked design system's fonts, colors, or token names.

package/corpus/templates/design/changelog/2026-08-13-the-design-system-preview-now-shows-how-many-named-tokens-we.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-13
+---
+
+The design system preview now shows how many named tokens were captured, so a large imported system no longer looks like a handful of colors.

package/corpus/templates/design/changelog/2026-08-13-your-design-system-prompt-and-reference-screenshots-now-reac.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-13
+---
+
+Your design system, original prompt, and reference screenshots now reach the turn that actually generates the design, instead of being spent on the questions step.

package/corpus/templates/design/server/lib/builder-design-system-proxy.ts

@@ -2,6 +2,8 @@ import {
   createBuilderDesignSystemProxyFields,
   localBuilderDesignSystemId,
   type BuilderDesignSystemIndexResult,
+  type BuilderDesignSystemGitHubSource,
+  type BuilderDesignSystemSourceKind,
 } from "@agent-native/core/server";
 import { and, eq, isNull } from "drizzle-orm";
 import { nanoid } from "nanoid";
@@ -14,12 +16,18 @@ export async function upsertBuilderProxyDesignSystem({
   orgId,
   projectName,
   description,
+  sourceKind,
+  githubSources,
+  localDesignSystemId: requestedLocalDesignSystemId,
 }: {
   result: BuilderDesignSystemIndexResult;
   ownerEmail: string;
   orgId?: string | null;
   projectName?: string;
   description?: string;
+  sourceKind?: BuilderDesignSystemSourceKind;
+  githubSources?: BuilderDesignSystemGitHubSource[];
+  localDesignSystemId?: string;
 }) {
   const db = getDb();
   const now = new Date().toISOString();
@@ -31,6 +39,9 @@ export async function upsertBuilderProxyDesignSystem({
     projectName,
     description,
     surface: "design",
+    sourceKind,
+    githubSources,
+    syncedAt: githubSources?.length ? now : undefined,
   });
   const [existing] = await db
     .select({
@@ -39,7 +50,12 @@ export async function upsertBuilderProxyDesignSystem({
       orgId: schema.designSystems.orgId,
     })
     .from(schema.designSystems)
-    .where(eq(schema.designSystems.id, baseLocalDesignSystemId))
+    .where(
+      eq(
+        schema.designSystems.id,
+        requestedLocalDesignSystemId ?? baseLocalDesignSystemId,
+      ),
+    )
     .limit(1);
   const existingBelongsToScope =
     existing?.ownerEmail === ownerEmail &&
@@ -47,7 +63,7 @@ export async function upsertBuilderProxyDesignSystem({
   const localDesignSystemId =
     existing && !existingBelongsToScope
       ? `${baseLocalDesignSystemId}-${nanoid(8)}`
-      : baseLocalDesignSystemId;
+      : (requestedLocalDesignSystemId ?? baseLocalDesignSystemId);
   if (existingBelongsToScope) {
     await db
       .update(schema.designSystems)

package/corpus/templates/design/shared/design-review.ts

@@ -24,6 +24,7 @@ export const A11Y_FINDING_CATEGORIES = [
   "reduced-motion",
   "role",
   "token-drift",
+  "design-system-drift",
   "other",
 ] as const;
 

package/corpus/templates/design/shared/html-integrity.ts

@@ -32,6 +32,8 @@ export type DesignHtmlIntegrityIssue =
   | "close-tag-orphaned"
   | "content-truncated"
   | "runtime-missing"
+  | "runtime-alpine-missing"
+  | "runtime-cloak-missing"
   | "url-backed-screen-replaced";
 
 /**
@@ -86,6 +88,10 @@ const DOCUMENT_SHAPE_MESSAGES: Partial<
     "an editor-managed <style>/<script> block appears more than once; there must be exactly one of each",
   "url-backed-screen-replaced":
     "this screen's content is its live route URL, and the write would replace it with document markup — that permanently unbinds the screen from the running app. Edit the app's own source instead",
+  "runtime-cloak-missing":
+    "this document uses x-cloak without the CSS rule that keeps Alpine-controlled content hidden before Alpine starts",
+  "runtime-alpine-missing":
+    "this document uses x-cloak but does not load Alpine.js, so the hidden state can never be removed",
 };
 
 export function describeDesignHtmlIntegrityIssue(
@@ -141,6 +147,19 @@ export function describeDesignHtmlIntegrityIssue(
         `<script src="…@tailwindcss/browser@4"> or a <style type="text/tailwindcss">). ` +
         `Utility classes will not apply and the design renders unstyled.`
       );
+    case "runtime-alpine-missing":
+      return (
+        `the document uses x-cloak on <${detail.tag ?? "element"}> at ${at}, ` +
+        `but no script source contains Alpine.js. The element will remain ` +
+        `hidden forever; load Alpine.js before relying on x-cloak.`
+      );
+    case "runtime-cloak-missing":
+      return (
+        `the document uses x-cloak on <${detail.tag ?? "element"}> at ${at}, ` +
+        `but no style block defines [x-cloak] { display: none !important; }. ` +
+        `Alpine-controlled overlays can flash or cover the entire screen before ` +
+        `Alpine starts. Add that exact hiding rule to the document.`
+      );
     default:
       return `the document structure is invalid (${detail.issue}) at ${at}.`;
   }
@@ -1077,6 +1096,85 @@ function collectManagedMarkerIssue(
   return null;
 }
 
+/**
+ * The selector may sit anywhere in a comma-separated list, and any of the three
+ * hidings below is a correct pre-Alpine hide. Matching only
+ * `[x-cloak] { display: none }` rejects documents that render perfectly.
+ */
+const X_CLOAK_RULE =
+  /\[x-cloak\][^{}]*\{[^}]*(?:display\s*:\s*none|visibility\s*:\s*hidden|@apply[^;}]*\bhidden\b)/i;
+const ALPINE_RUNTIME = /\balpinejs\b/i;
+const INLINE_PRE_HIDE = /(?:display\s*:\s*none|visibility\s*:\s*hidden)/i;
+
+/**
+ * `x-cloak` is an Alpine convention, not a runtime feature: it only works
+ * when the authored document also supplies the CSS rule that hides the node
+ * before Alpine initializes. A missing rule is especially dangerous for
+ * fixed overlays, which can make a correct screen look completely replaced.
+ */
+function collectInteractiveRuntimeIssues(
+  parsed: ParsedDocument,
+  locate: Locator,
+): DesignHtmlIntegrityIssueDetail[] {
+  const cloaked = parsed.elements.find((element) =>
+    element.attrs.some(
+      (attribute) => attribute.name.toLowerCase() === "x-cloak",
+    ),
+  );
+  if (!cloaked) return [];
+
+  const hasAlpineRuntime = parsed.elements.some(
+    (element) =>
+      element.tagName === "script" &&
+      ALPINE_RUNTIME.test(attributeOf(element, "src") ?? ""),
+  );
+
+  // A linked stylesheet is content this parser cannot read, so its rules are
+  // unknown — not missing. Reporting "no rule defined" here would be the
+  // coercion this whole module exists to prevent.
+  const hasUnreadableStylesheet = parsed.elements.some(
+    (element) =>
+      element.tagName === "link" &&
+      /\bstylesheet\b/i.test(attributeOf(element, "rel") ?? "") &&
+      (attributeOf(element, "href") ?? "").trim().length > 0,
+  );
+
+  const hasCloakRule =
+    hasUnreadableStylesheet ||
+    INLINE_PRE_HIDE.test(attributeOf(cloaked, "style") ?? "") ||
+    parsed.elements.some((element) => {
+      if (element.tagName !== "style") return false;
+      const css = childrenOf(element)
+        .filter((node) => node.nodeName === "#text")
+        .map((node) => (node as DefaultTreeAdapterTypes.TextNode).value)
+        .join("\n");
+      return X_CLOAK_RULE.test(css);
+    });
+
+  const attribute = cloaked.attrs.find(
+    (entry) => entry.name.toLowerCase() === "x-cloak",
+  );
+  const offset =
+    locationOf(cloaked)?.attrs?.[attribute?.name ?? ""]?.startOffset ??
+    locationOf(cloaked)?.startOffset ??
+    0;
+  const detail = {
+    line: locate(offset).line,
+    column: locate(offset).column,
+    excerpt: locate(offset).excerpt,
+    tag: cloaked.tagName,
+    attribute: "x-cloak",
+  };
+  return [
+    ...(hasAlpineRuntime
+      ? []
+      : [{ issue: "runtime-alpine-missing" as const, ...detail }]),
+    ...(hasCloakRule
+      ? []
+      : [{ issue: "runtime-cloak-missing" as const, ...detail }]),
+  ];
+}
+
 /**
  * Reported, never enforced: legitimate fragments and token-only screens carry no
  * runtime of their own, so blocking here would reject valid work.
@@ -1142,10 +1240,45 @@ export function inspectDesignHtmlDocumentIntegrity(
   const marker = collectManagedMarkerIssue(parsed);
   if (marker) return { valid: false, issue: marker };
 
+  const interactiveRuntime = collectInteractiveRuntimeIssues(parsed, locate);
+  if (interactiveRuntime.length > 0) {
+    return {
+      valid: false,
+      issue: interactiveRuntime[0]!.issue,
+      detail: interactiveRuntime,
+    };
+  }
+
   const advisory = collectAdvisoryIssues(parsed, locate);
   return advisory.length > 0 ? { valid: true, advisory } : { valid: true };
 }
 
+const RUNTIME_ISSUES: ReadonlySet<DesignHtmlIntegrityIssue> = new Set([
+  "runtime-alpine-missing",
+  "runtime-cloak-missing",
+]);
+
+/**
+ * The runtime issues are the one class an edit may carry forward. A screen
+ * saved before these checks existed still renders, and the person dragging on
+ * the canvas did not author its markup and cannot add a CSS rule — refusing
+ * their unrelated edit strands the screen. Block what the edit introduces;
+ * the create path still refuses to author the defect in the first place.
+ */
+function introducedRuntimeIssues(
+  next: DesignHtmlIntegrityIssueDetail[],
+  previousContent: string,
+): DesignHtmlIntegrityIssueDetail[] {
+  if (next.length === 0 || !previousContent.trim()) return next;
+  const inherited = new Set(
+    collectInteractiveRuntimeIssues(
+      parseDocument(previousContent),
+      createLocator(previousContent),
+    ).map((entry) => entry.issue),
+  );
+  return next.filter((entry) => !inherited.has(entry.issue));
+}
+
 /**
  * Fail closed only for document edits. Standalone Alpine fragments remain
  * supported. Existing malformed documents can still be repaired: a candidate
@@ -1186,6 +1319,19 @@ export function assertDesignHtmlEditIntegrity(args: {
         detail: structural,
       });
     }
+    const interactiveRuntime = introducedRuntimeIssues(
+      collectInteractiveRuntimeIssues(
+        parseDocument(args.nextContent),
+        createLocator(args.nextContent),
+      ),
+      args.previousContent,
+    );
+    if (interactiveRuntime.length > 0) {
+      throw new DesignHtmlIntegrityError(interactiveRuntime[0]!.issue, {
+        filename: args.filename,
+        detail: interactiveRuntime,
+      });
+    }
     return;
   }
   if (previousIsDocument && !nextIsDocument) {
@@ -1195,6 +1341,17 @@ export function assertDesignHtmlEditIntegrity(args: {
   }
   const result = inspectDesignHtmlDocumentIntegrity(args.nextContent);
   if (!result.valid) {
+    if (result.issue && RUNTIME_ISSUES.has(result.issue)) {
+      const introduced = introducedRuntimeIssues(
+        result.detail ?? [],
+        args.previousContent,
+      );
+      if (introduced.length === 0) return;
+      throw new DesignHtmlIntegrityError(introduced[0]!.issue, {
+        filename: args.filename,
+        detail: introduced,
+      });
+    }
     throw new DesignHtmlIntegrityError(result.issue ?? "document-root", {
       filename: args.filename,
       detail: result.detail,
@@ -1227,6 +1384,20 @@ export function assertDesignHtmlWellFormed(args: {
       detail: structural,
     });
   }
+  // Fragments are checked too, unlike the document-shape rules above: a screen
+  // is rendered as its own `srcdoc`, so nothing injects Alpine or a `[x-cloak]`
+  // rule around it. A sketch that omits them is broken exactly as a full
+  // document would be.
+  const interactiveRuntime = collectInteractiveRuntimeIssues(
+    parseDocument(args.content),
+    createLocator(args.content),
+  );
+  if (interactiveRuntime.length > 0) {
+    throw new DesignHtmlIntegrityError(interactiveRuntime[0]!.issue, {
+      filename: args.filename,
+      detail: interactiveRuntime,
+    });
+  }
 }
 
 export function assertDesignHtmlCreateIntegrity(args: {

package/corpus/templates/mail/app/lib/utils.ts

@@ -194,5 +194,5 @@ export function formatShortcut(key: string): string {
       if (lower === "space") return "Space";
       return token.length === 1 ? token.toUpperCase() : token;
     })
-    .join("+");
+    .join(" ");
 }

package/corpus/templates/slides/.agents/skills/design-systems/SKILL.md

@@ -72,12 +72,16 @@ Builder indexing flow.
 
 ### Source: connected code, GitHub, or `design.md`
 
-For any other reusable source — connected code, a GitHub repo, local
-code/design files, or an optional `design.md` — use Builder-backed DSI
-indexing through `index-design-system-with-builder`. Pass readable `design.md`
-content as `designMd`, and use the returned local design system id in the rest
-of the Slides flow. Call `get-design-system` before generation so Builder docs
-and tokens are hydrated when available.
+For any other reusable source - connected code, a GitHub repo, local
+code/design files, or an optional `design.md` - use Builder-backed DSI
+indexing through `index-design-system-with-builder`. Pass GitHub sources as one
+`githubSources` array; each source may pin a branch/tag/commit and include
+repository-relative files or folders. Pass readable `design.md` content as
+`designMd`, and use the returned local design system id in the rest of the
+Slides flow. Call `get-design-system` before generation so Builder docs and
+tokens are hydrated when available. For a saved GitHub-backed system, call
+`sync-design-system-with-builder --id <localDesignSystemId>` to replay its
+persisted source scope after upstream changes.
 
 Never create a duplicate local design system from raw Figma or code sources.
 Builder owns the indexed brand kit; a second local copy drifts from it and

package/corpus/templates/slides/actions/index-design-system-with-builder.ts

@@ -32,6 +32,30 @@ const codeFileSchema = z.object({
     ),
 });
 
+const githubSourceSchema = z.object({
+  repoUrl: z.string().trim().min(1).describe("GitHub repository URL"),
+  ref: z
+    .string()
+    .trim()
+    .min(1)
+    .optional()
+    .describe("Optional branch, tag, or commit"),
+  include: z
+    .array(z.string().trim().min(1))
+    .optional()
+    .describe("Optional repository-relative files or folders to include"),
+  exclude: z
+    .array(z.string().trim().min(1))
+    .optional()
+    .describe("Optional repository-relative files or folders to exclude"),
+  instructions: z
+    .string()
+    .trim()
+    .min(1)
+    .optional()
+    .describe("Optional indexing guidance for this repository"),
+});
+
 export default defineAction({
   description:
     "Start Builder DSI design-system indexing from connected code, a GitHub repository, code/design files, and optional design.md guidance. " +
@@ -49,7 +73,15 @@ export default defineAction({
     githubRepoUrl: z
       .string()
       .optional()
-      .describe("GitHub repository URL to index with Builder"),
+      .describe("Legacy single GitHub repository URL to index with Builder"),
+    githubSources: z
+      .array(githubSourceSchema)
+      .min(1)
+      .max(20)
+      .optional()
+      .describe(
+        "GitHub repositories to index in one design system. Each source may specify a branch/tag/commit and repository-relative files or folders.",
+      ),
     connectedProjectId: z
       .string()
       .optional()
@@ -69,6 +101,7 @@ export default defineAction({
     projectName,
     description,
     githubRepoUrl,
+    githubSources,
     connectedProjectId,
     codeFiles,
     designMd,
@@ -81,6 +114,7 @@ export default defineAction({
       projectName,
       description,
       githubRepoUrl,
+      githubRepos: githubSources,
       connectedProjectId,
       files,
     });
@@ -93,10 +127,13 @@ export default defineAction({
       orgId: getRequestOrgId(),
       projectName,
       description,
+      githubSources:
+        githubSources ?? (githubRepoUrl ? [{ repoUrl: githubRepoUrl }] : []),
       sourceKind:
-        githubRepoUrl && (codeFiles?.length || designMd)
+        (githubSources?.length || githubRepoUrl) &&
+        (codeFiles?.length || designMd)
           ? "mixed"
-          : githubRepoUrl
+          : githubSources?.length || githubRepoUrl
             ? "github"
             : codeFiles?.length || designMd
               ? "code"
@@ -107,6 +144,7 @@ export default defineAction({
       ...result,
       ...proxy,
       uploadedFileCount: files.length,
+      githubSourceCount: githubSources?.length ?? (githubRepoUrl ? 1 : 0),
     };
   },
 });

package/corpus/templates/slides/actions/sync-design-system-with-builder.ts

@@ -0,0 +1,64 @@
+import { defineAction } from "@agent-native/core";
+import {
+  parseBuilderDesignSystemProxyReference,
+  startBuilderDesignSystemIndex,
+} from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess, resolveAccess } from "@agent-native/core/sharing";
+import { z } from "zod";
+
+import "../server/db/index.js";
+import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
+
+export default defineAction({
+  description:
+    "Re-index a Builder-backed GitHub design system using its persisted repository, ref, and file/folder scope. Requires editor access.",
+  schema: z.object({
+    id: z.string().min(1).describe("Local design system id"),
+  }),
+  run: async ({ id }) => {
+    await assertAccess("design-system", id, "editor");
+    const access = await resolveAccess("design-system", id);
+    if (!access) throw new Error("Design system not found");
+
+    const reference = parseBuilderDesignSystemProxyReference(
+      access.resource.data,
+    );
+    if (!reference?.githubSources?.length) {
+      throw new Error(
+        "This design system has no persisted GitHub source scope to sync.",
+      );
+    }
+    if (reference.sourceKind === "mixed") {
+      throw new Error(
+        "This design system combines GitHub with non-replayable sources. Re-import all sources before syncing it.",
+      );
+    }
+
+    const result = await startBuilderDesignSystemIndex({
+      projectName: access.resource.title,
+      description: access.resource.description ?? undefined,
+      githubRepos: reference.githubSources,
+    });
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+
+    const proxy = await upsertBuilderProxyDesignSystem({
+      result,
+      ownerEmail: access.resource.ownerEmail,
+      orgId: access.resource.orgId,
+      projectName: access.resource.title,
+      description: access.resource.description ?? undefined,
+      sourceKind: reference.sourceKind,
+      githubSources: reference.githubSources,
+      localDesignSystemId: id,
+    });
+
+    return {
+      ...result,
+      ...proxy,
+      synced: true,
+      githubSourceCount: reference.githubSources.length,
+    };
+  },
+});

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

@@ -189,7 +189,7 @@ export default function DeckCard({
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
-            className="w-40"
+            className="w-56"
             onCloseAutoFocus={(e) => {
               if (pendingRenameRef.current) {
                 e.preventDefault();