@agent-native/core 0.79.26 → 0.80.0

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

@@ -27,25 +27,25 @@
 }
 
 :root {
-  --background: 40 23% 97%;
-  --foreground: 30 5% 10%;
-  --card: 40 23% 99%;
-  --card-foreground: 30 5% 10%;
-  --popover: 40 23% 99%;
-  --popover-foreground: 30 5% 10%;
-  --primary: 30 5% 13%;
+  --background: 0 0% 100%;
+  --foreground: 220 10% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 10% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 10% 10%;
+  --primary: 220 10% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 45 14% 94%;
-  --secondary-foreground: 30 5% 13%;
-  --muted: 45 14% 94%;
-  --muted-foreground: 30 6% 43%;
-  --accent: 45 14% 94%;
-  --accent-foreground: 30 5% 13%;
+  --secondary: 220 10% 95%;
+  --secondary-foreground: 220 10% 15%;
+  --muted: 220 10% 95%;
+  --muted-foreground: 220 5% 45%;
+  --accent: 220 10% 95%;
+  --accent-foreground: 220 10% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 36 10% 86%;
-  --input: 36 10% 86%;
-  --ring: 218 85% 57%;
+  --border: 220 10% 90%;
+  --input: 220 10% 90%;
+  --ring: 220 10% 40%;
   --radius: 0.5rem;
   /* Callout tone accents — info/decision/risk/warning/success. */
   --plan-tone-info: 218 85% 57%;
@@ -53,14 +53,14 @@
   --plan-tone-risk: 0 84% 60%;
   --plan-tone-warning: 25 95% 48%;
   --plan-tone-success: 142 71% 38%;
-  --sidebar-background: 42 18% 96%;
-  --sidebar-foreground: 30 6% 43%;
-  --sidebar-primary: 30 5% 13%;
+  --sidebar-background: 220 10% 97%;
+  --sidebar-foreground: 220 5% 45%;
+  --sidebar-primary: 220 10% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 45 14% 93%;
-  --sidebar-accent-foreground: 30 5% 13%;
-  --sidebar-border: 36 10% 86%;
-  --sidebar-ring: 218 85% 57%;
+  --sidebar-accent: 220 10% 95%;
+  --sidebar-accent-foreground: 220 10% 15%;
+  --sidebar-border: 220 10% 90%;
+  --sidebar-ring: 220 10% 40%;
   /* ── Plan document font sizes — edit here to resize globally ──────────────
      --plan-code-size  : general monospace code surfaces and editors
      --plan-doc-code-size: dense read-only code surfaces such as diffs,
@@ -72,25 +72,25 @@
 }
 
 .dark {
-  --background: 30 4% 11%;
-  --foreground: 40 9% 95%;
-  --card: 30 5% 13%;
-  --card-foreground: 40 9% 95%;
-  --popover: 30 5% 13%;
-  --popover-foreground: 40 9% 95%;
-  --primary: 40 9% 92%;
-  --primary-foreground: 30 4% 11%;
-  --secondary: 36 5% 16%;
-  --secondary-foreground: 40 9% 95%;
-  --muted: 36 5% 16%;
-  --muted-foreground: 38 7% 63%;
-  --accent: 36 5% 17%;
-  --accent-foreground: 40 9% 95%;
+  --background: 220 6% 6%;
+  --foreground: 0 0% 90%;
+  --card: 220 5% 6%;
+  --card-foreground: 0 0% 90%;
+  --popover: 220 5% 6%;
+  --popover-foreground: 0 0% 90%;
+  --primary: 0 0% 75%;
+  --primary-foreground: 220 6% 6%;
+  --secondary: 220 4% 12%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 220 4% 10%;
+  --muted-foreground: 220 4% 60%;
+  --accent: 220 4% 13%;
+  --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 35 5% 21%;
-  --input: 35 5% 21%;
-  --ring: 218 85% 67%;
+  --border: 220 4% 14%;
+  --input: 220 4% 14%;
+  --ring: 0 0% 60%;
   --radius: 0.5rem;
   /* Callout tone accents — brighter so they read on the dark surface. */
   --plan-tone-info: 218 85% 67%;
@@ -98,14 +98,14 @@
   --plan-tone-risk: 0 84% 67%;
   --plan-tone-warning: 28 96% 60%;
   --plan-tone-success: 142 60% 52%;
-  --sidebar-background: 30 5% 10%;
-  --sidebar-foreground: 38 7% 63%;
-  --sidebar-primary: 40 9% 92%;
-  --sidebar-primary-foreground: 30 4% 11%;
-  --sidebar-accent: 36 5% 16%;
-  --sidebar-accent-foreground: 40 9% 95%;
-  --sidebar-border: 35 5% 18%;
-  --sidebar-ring: 218 85% 67%;
+  --sidebar-background: 220 6% 4%;
+  --sidebar-foreground: 220 4% 60%;
+  --sidebar-primary: 0 0% 75%;
+  --sidebar-primary-foreground: 220 6% 6%;
+  --sidebar-accent: 220 4% 10%;
+  --sidebar-accent-foreground: 0 0% 90%;
+  --sidebar-border: 220 4% 10%;
+  --sidebar-ring: 0 0% 60%;
 }
 
 @layer base {
@@ -129,37 +129,20 @@
 
 @layer utilities {
   .plan-content-surface {
-    --plan-document: hsl(42 18% 97%);
+    --plan-document: hsl(var(--background));
     --plan-canvas: color-mix(in srgb, var(--plan-document) 96%, black);
-    --plan-block: hsl(42 16% 94%);
-    --plan-chrome: hsl(42 15% 96% / 0.92);
-    --plan-line: hsl(36 9% 82%);
-    --plan-grid-line: hsl(36 9% 70% / 0.08);
-    --plan-text: hsl(30 5% 11%);
-    --plan-muted: hsl(30 5% 45%);
-    --plan-wireframe: hsl(42 16% 98%);
-    --plan-sketch-line: hsl(28 4% 20%);
-    --plan-muted-line: hsl(36 6% 78%);
-    --plan-placeholder-line: hsl(36 5% 72% / 0.72);
-    --plan-code: hsl(40 12% 96%);
-    --plan-code-text: hsl(28 5% 14%);
-  }
-
-  .dark .plan-content-surface {
-    --plan-document: hsl(32 3% 13%);
-    --plan-canvas: color-mix(in srgb, var(--plan-document) 80%, black);
-    --plan-block: hsl(32 3% 15.5%);
-    --plan-chrome: hsl(32 3% 15.5% / 0.92);
-    --plan-line: hsl(34 4% 24%);
-    --plan-grid-line: hsl(34 4% 36% / 0.08);
-    --plan-text: hsl(40 8% 94%);
-    --plan-muted: hsl(36 5% 65%);
-    --plan-wireframe: hsl(34 3% 13.4%);
-    --plan-sketch-line: hsl(38 5% 84%);
-    --plan-muted-line: hsl(36 4% 44%);
-    --plan-placeholder-line: hsl(36 4% 54% / 0.62);
-    --plan-code: hsl(32 4% 9.8%);
-    --plan-code-text: hsl(40 9% 92%);
+    --plan-block: hsl(var(--secondary));
+    --plan-chrome: hsl(var(--background) / 0.92);
+    --plan-line: hsl(var(--border));
+    --plan-grid-line: hsl(var(--foreground) / 0.08);
+    --plan-text: hsl(var(--foreground));
+    --plan-muted: hsl(var(--muted-foreground));
+    --plan-wireframe: hsl(var(--card));
+    --plan-sketch-line: hsl(var(--foreground) / 0.86);
+    --plan-muted-line: hsl(var(--border));
+    --plan-placeholder-line: hsl(var(--muted-foreground) / 0.42);
+    --plan-code: hsl(var(--muted));
+    --plan-code-text: hsl(var(--foreground));
   }
 
   .plan-content-surface[data-recap-screenshot-theme="light"] {
@@ -255,9 +238,8 @@
   touch-action: none;
 }
 
-/* Infinite low-contrast grid. The live grid is rendered inside the transformed
- * canvas world so Chrome can composite grid + artboards together while panning. */
 .plan-canvas-viewport {
+  background-color: var(--plan-canvas);
   isolation: isolate;
 }
 
@@ -266,7 +248,11 @@
   background-image:
     linear-gradient(var(--plan-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--plan-grid-line) 1px, transparent 1px);
-  backface-visibility: hidden;
+}
+
+.plan-canvas-world {
+  isolation: isolate;
+  transform-style: flat;
 }
 
 /* Fixed-size static artboard frame. No border / shadow / box around the

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -5116,6 +5116,8 @@ export function PlansPage({ localPlanSlug }: { localPlanSlug?: string } = {}) {
       sendToAgentChat({
         type: "content",
         submit: true,
+        chatTarget: "local",
+        openSidebar: true,
         context,
         images: capture.images,
         message: buildApplyFeedbackMessage(openCommentCount),
@@ -5125,6 +5127,12 @@ export function PlansPage({ localPlanSlug }: { localPlanSlug?: string } = {}) {
           ? t("plansPage.reader.sentCommentsWithScreenshots")
           : t("plansPage.reader.sentComments"),
       );
+    } catch (error) {
+      console.error(
+        "[PlansPage] Failed to send plan feedback to inline agent:",
+        error,
+      );
+      toast.error(t("plansPage.comments.sendFailed"));
     } finally {
       setSendingFeedback(false);
     }

package/corpus/templates/plan/app/root.tsx

@@ -12,7 +12,12 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { configureTracking } from "@agent-native/core/client";
-import { IconSun, IconMoon } from "@tabler/icons-react";
+import {
+  IconMoon,
+  IconScribble,
+  IconShape2,
+  IconSun,
+} from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { useCallback, useState } from "react";
@@ -27,6 +32,10 @@ import {
 import type { LinksFunction } from "react-router";
 
 import { Layout as AppLayout } from "@/components/layout/Layout";
+import {
+  toggleWireframeStyle,
+  useWireframeStyle,
+} from "@/components/plan/wireframe/use-wireframe-style";
 import { Toaster } from "@/components/ui/sonner";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { APP_TITLE } from "@/lib/app-config";
@@ -132,6 +141,7 @@ function AppContent() {
   const navigate = useNavigate();
   const { resolvedTheme, setTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
+  const wireframeStyle = useWireframeStyle();
   const t = useT();
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   const go = useCallback(
@@ -169,6 +179,26 @@ function AppContent() {
             {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
             {t("root.toggleTheme")}
           </CommandMenu.Item>
+          <CommandMenu.Item
+            onSelect={() => toggleWireframeStyle()}
+            keywords={[
+              "wireframe",
+              "wireframes",
+              "sketchy",
+              "sketch",
+              "clean",
+              "style",
+            ]}
+          >
+            {wireframeStyle === "sketchy" ? (
+              <IconShape2 size={16} />
+            ) : (
+              <IconScribble size={16} />
+            )}
+            {wireframeStyle === "sketchy"
+              ? t("plansPage.reader.cleanWireframes")
+              : t("plansPage.reader.sketchyWireframes")}
+          </CommandMenu.Item>
         </CommandMenu.Group>
       </CommandMenu>
       <AppLayout>

package/corpus/templates/plan/changelog/2026-06-28-left-sidebar-collapse-motion-and-footer-chrome-are-quieter.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Left sidebar collapse motion and footer controls now feel smoother and use less divider chrome.

package/corpus/templates/plan/changelog/2026-06-28-plan-canvases-stay-stable-while-panning-and-zooming-in-chrom.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Plan canvases stay stable while panning and zooming in Chrome.

package/corpus/templates/plan/changelog/2026-06-28-plan-wireframes-avoid-overlapping-sketch-lines-in-dense-mockups.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Plan wireframes keep dense mockups readable by avoiding overlapping sketch outlines around broad panels.

package/corpus/templates/plan/changelog/2026-06-28-plan-wireframes-ignore-host-color-utility-classes-so-canvas-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Plan wireframes ignore host color utility classes so canvas mockups stay readable in dark mode.

package/corpus/templates/plan/changelog/2026-06-28-plans-use-the-shared-neutral-light-and-dark-theme.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Plans now use the shared neutral light and dark theme instead of a warm-tinted palette.

package/corpus/templates/plan/changelog/2026-06-28-sending-open-feedback-from-a-plan-now-opens-the-inline-plan-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Sending open feedback from a plan now opens the inline Plan agent reliably.

package/corpus/templates/plan/changelog/2026-06-28-wireframe-style-can-now-be-switched-between-sketchy-and-clean.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Wireframe style can now be switched between sketchy and clean from Cmd+K.

package/corpus/templates/plan/server/plan-content.ts

@@ -632,6 +632,62 @@ export function sanitizeStoredPlanHtml(value: string): string {
     .replace(/\bdata\s*:\s*text\/html/gi, "");
 }
 
+const TAILWIND_THEME_COLORS =
+  /^(?:bg|text|border|ring|outline|divide|placeholder|from|via|to|accent|caret|decoration|fill|stroke)-(?:inherit|current|transparent|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(?:-\d{2,3})?(?:\/[\d.]+)?$/;
+const TAILWIND_ARBITRARY_THEME_COLOR =
+  /^(?:bg|text|border|ring|outline|divide|placeholder|from|via|to|accent|caret|decoration|fill|stroke)-\[/;
+const TAILWIND_SHADOW = /^shadow(?:$|-)/;
+
+function baseClassName(className: string): string {
+  let bracketDepth = 0;
+  let lastVariantSeparator = -1;
+  for (let index = 0; index < className.length; index += 1) {
+    const char = className[index];
+    if (char === "[") bracketDepth += 1;
+    if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    if (char === ":" && bracketDepth === 0) lastVariantSeparator = index;
+  }
+  return className.slice(lastVariantSeparator + 1);
+}
+
+function isWireframeThemeClass(className: string): boolean {
+  const base = baseClassName(className);
+  return (
+    TAILWIND_THEME_COLORS.test(base) ||
+    TAILWIND_ARBITRARY_THEME_COLOR.test(base) ||
+    TAILWIND_SHADOW.test(base)
+  );
+}
+
+function stripWireframeThemeClasses(value: string): string {
+  return value
+    .split(/\s+/)
+    .filter(Boolean)
+    .filter((className) => !isWireframeThemeClass(className))
+    .join(" ");
+}
+
+function sanitizeWireframeHtmlClasses(value: string): string {
+  return value.replace(
+    /\sclass\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi,
+    (_match, doubleQuoted, singleQuoted, bare) => {
+      const next = stripWireframeThemeClasses(
+        doubleQuoted ?? singleQuoted ?? bare ?? "",
+      );
+      return next ? ` class="${next}"` : "";
+    },
+  );
+}
+
+function sanitizeStoredWireframeHtml(
+  value: string,
+  renderMode?: PlanWireframeBlock["data"]["renderMode"],
+): string {
+  const sanitized = sanitizeCustomHtml(value);
+  if (renderMode === "design") return sanitized;
+  return sanitizeWireframeHtmlClasses(sanitized);
+}
+
 function sanitizeBlock(block: PlanBlock): PlanBlock {
   if (block.type === "wireframe") {
     return {
@@ -641,7 +697,10 @@ function sanitizeBlock(block: PlanBlock): PlanBlock {
         html:
           block.data.html === undefined
             ? undefined
-            : sanitizeCustomHtml(block.data.html),
+            : sanitizeStoredWireframeHtml(
+                block.data.html,
+                block.data.renderMode,
+              ),
         css:
           block.data.css === undefined
             ? undefined
@@ -717,7 +776,7 @@ function sanitizePrototype(prototype: PlanPrototype | undefined) {
     ...prototype,
     screens: prototype.screens.map((screen) => ({
       ...screen,
-      html: sanitizeCustomHtml(screen.html),
+      html: sanitizeStoredWireframeHtml(screen.html, screen.renderMode),
       css:
         screen.css === undefined ? undefined : sanitizeCustomHtml(screen.css),
     })),
@@ -733,7 +792,7 @@ function sanitizeWireframeData(
     html:
       wireframe.html === undefined
         ? undefined
-        : sanitizeCustomHtml(wireframe.html),
+        : sanitizeStoredWireframeHtml(wireframe.html, wireframe.renderMode),
     css:
       wireframe.css === undefined
         ? undefined

package/corpus/templates/plan/server/plan-mdx.ts

@@ -85,6 +85,12 @@ type EstreeNode = {
   kind?: string;
   property?: EstreeNode;
   object?: EstreeNode;
+  quasis?: Array<{
+    type?: string;
+    value?: { cooked?: string | null; raw?: string };
+    range?: unknown;
+  }>;
+  expressions?: EstreeNode[];
   sourceType?: string;
   comments?: unknown[];
   loc?: unknown;
@@ -370,14 +376,41 @@ function mdxProcessor() {
 }
 
 async function formatMdx(source: string): Promise<string> {
+  const protectedSource = protectRawPayloadCodeFences(source.trim() + "\n");
   try {
     const prettier = await import("prettier");
-    return await prettier.format(source.trim() + "\n", { parser: "mdx" });
+    return restoreRawPayloadCodeFences(
+      await prettier.format(protectedSource.source, { parser: "mdx" }),
+      protectedSource.fences,
+    );
   } catch {
     return source.trim() + "\n";
   }
 }
 
+const RAW_PAYLOAD_CODE_FENCE_RE = /^(`{3,})(html|css)([^\n]*)\n[\s\S]*?^\1$/gm;
+
+function protectRawPayloadCodeFences(source: string): {
+  source: string;
+  fences: string[];
+} {
+  const fences: string[] = [];
+  return {
+    source: source.replace(RAW_PAYLOAD_CODE_FENCE_RE, (fence) => {
+      const index = fences.push(fence) - 1;
+      return `{/* __PLAN_MDX_RAW_FENCE_${index}__ */}`;
+    }),
+    fences,
+  };
+}
+
+function restoreRawPayloadCodeFences(source: string, fences: string[]) {
+  return source.replace(
+    /\{\/\*\s*__PLAN_MDX_RAW_FENCE_(\d+)__\s*\*\/\}/g,
+    (_marker, rawIndex: string) => fences[Number(rawIndex)] ?? "",
+  );
+}
+
 // `prop`, `escapeAttr`, `jsonExpression`, and the attribute reader
 // (`attributeValue` + its estree literal walker) now live in
 // `@agent-native/core/blocks` and are imported above. They are the MDX
@@ -975,7 +1008,149 @@ function serializeArtboard(frame: PlanArtboard, indent = ""): string {
 }
 
 function parseMdx(source: string): MdxNode {
-  return mdxProcessor().parse(source) as unknown as MdxNode;
+  const tree = mdxProcessor().parse(source) as unknown as MdxNode;
+  restoreStaticTemplateLiteralAttributes(tree, source);
+  return tree;
+}
+
+function restoreStaticTemplateLiteralAttributes(tree: MdxNode, source: string) {
+  const walk = (node: MdxNode | undefined) => {
+    if (!node) return;
+    for (const attr of node.attributes ?? []) {
+      restoreStaticTemplateLiteralAttribute(attr, source);
+    }
+    for (const child of node.children ?? []) walk(child);
+  };
+  walk(tree);
+}
+
+function restoreStaticTemplateLiteralAttribute(
+  attr: MdxAttribute,
+  source: string,
+) {
+  if (attr.type !== "mdxJsxAttribute") return;
+  if (!attr.value || typeof attr.value !== "object") return;
+  const expression = staticTemplateLiteralExpression(attr.value);
+  if (!expression) return;
+  const range = expression.range;
+  if (
+    !Array.isArray(range) ||
+    range.length !== 2 ||
+    typeof range[0] !== "number" ||
+    typeof range[1] !== "number"
+  ) {
+    return;
+  }
+  const rawTemplate = source.slice(range[0], range[1]);
+  if (!rawTemplate.startsWith("`") || !rawTemplate.endsWith("`")) return;
+
+  const restored = decodeTemplateLiteralRaw(rawTemplate.slice(1, -1));
+  const quasi = expression.quasis?.[0];
+  if (quasi?.value) {
+    quasi.value.cooked = restored;
+    quasi.value.raw = rawTemplate.slice(1, -1);
+  }
+  attr.value.value = rawTemplate;
+}
+
+function staticTemplateLiteralExpression(
+  expression: MdxExpression,
+): EstreeNode | undefined {
+  const estree = (expression.data as { estree?: EstreeNode } | undefined)
+    ?.estree;
+  const statement = estree?.body?.[0];
+  const node = statement?.expression;
+  if (!node || node.type !== "TemplateLiteral") return undefined;
+  if ((node.expressions?.length ?? 0) > 0) return undefined;
+  if ((node.quasis?.length ?? 0) !== 1) return undefined;
+  return node;
+}
+
+function decodeTemplateLiteralRaw(raw: string): string {
+  let out = "";
+  for (let index = 0; index < raw.length; index += 1) {
+    const char = raw[index];
+    if (char !== "\\") {
+      out += char;
+      continue;
+    }
+
+    const next = raw[index + 1];
+    if (next === undefined) {
+      out += "\\";
+      continue;
+    }
+    if (next === "\r" && raw[index + 2] === "\n") {
+      index += 2;
+      continue;
+    }
+    if (next === "\n" || next === "\r") {
+      index += 1;
+      continue;
+    }
+
+    switch (next) {
+      case "b":
+        out += "\b";
+        index += 1;
+        continue;
+      case "f":
+        out += "\f";
+        index += 1;
+        continue;
+      case "n":
+        out += "\n";
+        index += 1;
+        continue;
+      case "r":
+        out += "\r";
+        index += 1;
+        continue;
+      case "t":
+        out += "\t";
+        index += 1;
+        continue;
+      case "v":
+        out += "\v";
+        index += 1;
+        continue;
+      case "0":
+        out += "\0";
+        index += 1;
+        continue;
+      case "x": {
+        const hex = raw.slice(index + 2, index + 4);
+        if (/^[0-9a-fA-F]{2}$/.test(hex)) {
+          out += String.fromCharCode(Number.parseInt(hex, 16));
+          index += 3;
+          continue;
+        }
+        break;
+      }
+      case "u": {
+        if (raw[index + 2] === "{") {
+          const close = raw.indexOf("}", index + 3);
+          const hex = close >= 0 ? raw.slice(index + 3, close) : "";
+          if (/^[0-9a-fA-F]+$/.test(hex)) {
+            out += String.fromCodePoint(Number.parseInt(hex, 16));
+            index = close;
+            continue;
+          }
+        }
+        const hex = raw.slice(index + 2, index + 6);
+        if (/^[0-9a-fA-F]{4}$/.test(hex)) {
+          out += String.fromCharCode(Number.parseInt(hex, 16));
+          index += 5;
+          continue;
+        }
+        break;
+      }
+    }
+
+    out += next;
+    index += 1;
+  }
+  return out;
 }
 
 function stringifyMdx(tree: MdxNode): string {

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

@@ -50,7 +50,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
 
   if (collapsed) {
     return (
-      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground">
+      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground transition-[width] duration-200 ease-out">
         {onToggleCollapsed && (
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
@@ -97,7 +97,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
   }
 
   return (
-    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground">
+    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
       <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
         <div className="flex items-center gap-2">
           <img
@@ -156,15 +156,15 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
         </nav>
 
         <div className="mt-auto shrink-0">
-          <div className="border-t border-border px-2 py-1">
+          <div className="px-2 py-1">
             <ExtensionsSidebarSection />
           </div>
 
-          <div className="border-t border-border px-3 py-2">
+          <div className="px-3 py-2">
             <OrgSwitcher />
           </div>
 
-          <div className="border-t border-border px-3 py-2">
+          <div className="px-3 py-2">
             <DevDatabaseLink />
             <FeedbackButton />
           </div>