@agent-native/core 0.47.1 → 0.48.2

package/dist/client/app-providers.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Shared provider shell for agent-native template roots.
+ *
+ * Composes the providers every template needs:
+ *   QueryClientProvider → ThemeProvider → TooltipProvider → Toaster
+ *
+ * Templates keep their own `createAgentNativeQueryClient(overrides)` call and
+ * pass the result in as `queryClient`. AppProviders never creates a client
+ * internally so each template can apply its own query defaults (e.g. calendar's
+ * `refetchOnWindowFocus: true`, mail's focus-refresh throttle).
+ *
+ * Public-path SSR pattern (calendar/clips/content):
+ *   Some templates have routes that must SSR real content for first-visit
+ *   signed-out users and crawlers, bypassing the `<ClientOnly>` gate.
+ *   Pass `isPublicPath` and `clientOnlyFallback` to activate this branch:
+ *
+ *     <AppProviders
+ *       queryClient={queryClient}
+ *       isPublicPath={isPublicBookingPath(location.pathname)}
+ *       clientOnlyFallback={<DefaultSpinner />}
+ *     >
+ *       ...
+ *     </AppProviders>
+ *
+ *   When `isPublicPath` is true the providers render without `<ClientOnly>`,
+ *   streaming real markup to the client. When false (the default) the standard
+ *   `<ClientOnly fallback={clientOnlyFallback}>` gate wraps everything.
+ *   When `clientOnlyFallback` is omitted, `<DefaultSpinner />` is used.
+ *
+ * Customisation props:
+ *   themeAttribute           — passed to next-themes ThemeProvider `attribute`.
+ *                              Defaults to "class". Use ["class", "data-theme"]
+ *                              when CSS variables are also keyed off a data-theme
+ *                              attribute (mail template).
+ *   tooltipDelayDuration     — passed to Radix TooltipProvider `delayDuration`
+ *                              (ms). Omit to use the Radix default (700 ms).
+ *   toaster                  — custom Toaster element rendered after children.
+ *                              Pass `null` to suppress the built-in Toaster when
+ *                              children already include a styled one.
+ *                              Defaults to `<Toaster richColors position="bottom-left" />`.
+ *   disableThemeTransitions  — passed to next-themes ThemeProvider
+ *                              `disableTransitionOnChange`. Defaults to `true`
+ *                              (suppresses CSS transitions during theme switches,
+ *                              which is the shadcn recommendation and avoids
+ *                              flash artefacts). Set to `false` when the template
+ *                              intentionally animates theme changes (e.g. content).
+ */
+import React from "react";
+import { type QueryClient } from "@tanstack/react-query";
+import { type Attribute } from "next-themes";
+export interface AppProvidersProps {
+    /** QueryClient instance — create with `createAgentNativeQueryClient()`. */
+    queryClient: QueryClient;
+    /**
+     * Default theme passed to next-themes `ThemeProvider`.
+     * Defaults to `"system"`.  Dark-first templates (videos, slides, macros,
+     * analytics) pass `"dark"`.
+     */
+    defaultTheme?: string;
+    /**
+     * Passed to next-themes ThemeProvider `attribute`.
+     * Defaults to "class". Pass ["class", "data-theme"] when your CSS variables
+     * are also keyed off a data-theme attribute (mail template).
+     */
+    themeAttribute?: Attribute | Attribute[];
+    /**
+     * Passed to Radix TooltipProvider `delayDuration` (ms).
+     * Omit to use the Radix default (700 ms).
+     */
+    tooltipDelayDuration?: number;
+    /**
+     * Custom Toaster element rendered after children inside TooltipProvider.
+     * Pass `null` to suppress the built-in Toaster when children already
+     * include a styled one.
+     * Defaults to `<Toaster richColors position="bottom-left" />`.
+     */
+    toaster?: React.ReactNode | null;
+    /**
+     * Passed to next-themes ThemeProvider `disableTransitionOnChange`.
+     * Defaults to `true` (suppresses CSS transitions on theme switch, per the
+     * shadcn recommendation). Set to `false` when the template intentionally
+     * animates theme changes (e.g. content's 3-way theme cycle).
+     */
+    disableThemeTransitions?: boolean;
+    /**
+     * When true the providers render without a `<ClientOnly>` gate so SSR
+     * streams real markup for public/unauthenticated paths.
+     * Defaults to false (authenticated app shell, ClientOnly-gated).
+     */
+    isPublicPath?: boolean;
+    /**
+     * Fallback rendered by `<ClientOnly>` while JS hydrates on private paths.
+     * Defaults to `<DefaultSpinner />`.
+     */
+    clientOnlyFallback?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function AppProviders({ queryClient, isPublicPath, clientOnlyFallback, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, children, }: AppProvidersProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app-providers.d.ts.map

package/dist/client/app-providers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-providers.d.ts","sourceRoot":"","sources":["../../src/client/app-providers.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAM5D,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,EAAE,WAAW,CAAC;IAEzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAEzC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAEjC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAsCD,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,YAAoB,EACpB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,OAAO,EACP,uBAAuB,EACvB,QAAQ,GACT,EAAE,iBAAiB,2CAgCnB"}

package/dist/client/app-providers.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "next-themes";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Toaster } from "sonner";
+import { ClientOnly } from "./ClientOnly.js";
+import { DefaultSpinner } from "./DefaultSpinner.js";
+const DEFAULT_TOASTER = _jsx(Toaster, { richColors: true, position: "bottom-left" });
+function ProvidersInner({ queryClient, defaultTheme = "system", themeAttribute = "class", tooltipDelayDuration, toaster = DEFAULT_TOASTER, disableThemeTransitions = true, children, }) {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: themeAttribute, defaultTheme: defaultTheme, enableSystem: true, disableTransitionOnChange: disableThemeTransitions, children: _jsxs(TooltipProvider, { delayDuration: tooltipDelayDuration, children: [children, toaster] }) }) }));
+}
+export function AppProviders({ queryClient, isPublicPath = false, clientOnlyFallback, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, children, }) {
+    const fallback = clientOnlyFallback ?? _jsx(DefaultSpinner, {});
+    if (isPublicPath) {
+        return (_jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, children: children }));
+    }
+    return (_jsx(ClientOnly, { fallback: fallback, children: _jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, children: children }) }));
+}
+//# sourceMappingURL=app-providers.js.map

package/dist/client/app-providers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-providers.js","sourceRoot":"","sources":["../../src/client/app-providers.tsx"],"names":[],"mappings":";AAiDA,OAAO,EAAE,mBAAmB,EAAoB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAkB,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA0DrD,MAAM,eAAe,GAAG,KAAC,OAAO,IAAC,UAAU,QAAC,QAAQ,EAAC,aAAa,GAAG,CAAC;AAEtE,SAAS,cAAc,CAAC,EACtB,WAAW,EACX,YAAY,GAAG,QAAQ,EACvB,cAAc,GAAG,OAAO,EACxB,oBAAoB,EACpB,OAAO,GAAG,eAAe,EACzB,uBAAuB,GAAG,IAAI,EAC9B,QAAQ,GAST;IACC,OAAO,CACL,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,aAAa,IACZ,SAAS,EAAE,cAAc,EACzB,YAAY,EAAE,YAAY,EAC1B,YAAY,QACZ,yBAAyB,EAAE,uBAAuB,YAElD,MAAC,eAAe,IAAC,aAAa,EAAE,oBAAoB,aACjD,QAAQ,EACR,OAAO,IACQ,GACJ,GACI,CACvB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC3B,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,OAAO,EACP,uBAAuB,EACvB,QAAQ,GACU;IAClB,MAAM,QAAQ,GAAG,kBAAkB,IAAI,KAAC,cAAc,KAAG,CAAC;IAE1D,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL,KAAC,cAAc,IACb,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE,OAAO,EAChB,uBAAuB,EAAE,uBAAuB,YAE/C,QAAQ,GACM,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,YAC5B,KAAC,cAAc,IACb,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE,OAAO,EAChB,uBAAuB,EAAE,uBAAuB,YAE/C,QAAQ,GACM,GACN,CACd,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Shared provider shell for agent-native template roots.\n *\n * Composes the providers every template needs:\n *   QueryClientProvider → ThemeProvider → TooltipProvider → Toaster\n *\n * Templates keep their own `createAgentNativeQueryClient(overrides)` call and\n * pass the result in as `queryClient`. AppProviders never creates a client\n * internally so each template can apply its own query defaults (e.g. calendar's\n * `refetchOnWindowFocus: true`, mail's focus-refresh throttle).\n *\n * Public-path SSR pattern (calendar/clips/content):\n *   Some templates have routes that must SSR real content for first-visit\n *   signed-out users and crawlers, bypassing the `<ClientOnly>` gate.\n *   Pass `isPublicPath` and `clientOnlyFallback` to activate this branch:\n *\n *     <AppProviders\n *       queryClient={queryClient}\n *       isPublicPath={isPublicBookingPath(location.pathname)}\n *       clientOnlyFallback={<DefaultSpinner />}\n *     >\n *       ...\n *     </AppProviders>\n *\n *   When `isPublicPath` is true the providers render without `<ClientOnly>`,\n *   streaming real markup to the client. When false (the default) the standard\n *   `<ClientOnly fallback={clientOnlyFallback}>` gate wraps everything.\n *   When `clientOnlyFallback` is omitted, `<DefaultSpinner />` is used.\n *\n * Customisation props:\n *   themeAttribute           — passed to next-themes ThemeProvider `attribute`.\n *                              Defaults to \"class\". Use [\"class\", \"data-theme\"]\n *                              when CSS variables are also keyed off a data-theme\n *                              attribute (mail template).\n *   tooltipDelayDuration     — passed to Radix TooltipProvider `delayDuration`\n *                              (ms). Omit to use the Radix default (700 ms).\n *   toaster                  — custom Toaster element rendered after children.\n *                              Pass `null` to suppress the built-in Toaster when\n *                              children already include a styled one.\n *                              Defaults to `<Toaster richColors position=\"bottom-left\" />`.\n *   disableThemeTransitions  — passed to next-themes ThemeProvider\n *                              `disableTransitionOnChange`. Defaults to `true`\n *                              (suppresses CSS transitions during theme switches,\n *                              which is the shadcn recommendation and avoids\n *                              flash artefacts). Set to `false` when the template\n *                              intentionally animates theme changes (e.g. content).\n */\n\nimport React from \"react\";\nimport { QueryClientProvider, type QueryClient } from \"@tanstack/react-query\";\nimport { ThemeProvider, type Attribute } from \"next-themes\";\nimport { TooltipProvider } from \"@radix-ui/react-tooltip\";\nimport { Toaster } from \"sonner\";\nimport { ClientOnly } from \"./ClientOnly.js\";\nimport { DefaultSpinner } from \"./DefaultSpinner.js\";\n\nexport interface AppProvidersProps {\n  /** QueryClient instance — create with `createAgentNativeQueryClient()`. */\n  queryClient: QueryClient;\n\n  /**\n   * Default theme passed to next-themes `ThemeProvider`.\n   * Defaults to `\"system\"`.  Dark-first templates (videos, slides, macros,\n   * analytics) pass `\"dark\"`.\n   */\n  defaultTheme?: string;\n\n  /**\n   * Passed to next-themes ThemeProvider `attribute`.\n   * Defaults to \"class\". Pass [\"class\", \"data-theme\"] when your CSS variables\n   * are also keyed off a data-theme attribute (mail template).\n   */\n  themeAttribute?: Attribute | Attribute[];\n\n  /**\n   * Passed to Radix TooltipProvider `delayDuration` (ms).\n   * Omit to use the Radix default (700 ms).\n   */\n  tooltipDelayDuration?: number;\n\n  /**\n   * Custom Toaster element rendered after children inside TooltipProvider.\n   * Pass `null` to suppress the built-in Toaster when children already\n   * include a styled one.\n   * Defaults to `<Toaster richColors position=\"bottom-left\" />`.\n   */\n  toaster?: React.ReactNode | null;\n\n  /**\n   * Passed to next-themes ThemeProvider `disableTransitionOnChange`.\n   * Defaults to `true` (suppresses CSS transitions on theme switch, per the\n   * shadcn recommendation). Set to `false` when the template intentionally\n   * animates theme changes (e.g. content's 3-way theme cycle).\n   */\n  disableThemeTransitions?: boolean;\n\n  /**\n   * When true the providers render without a `<ClientOnly>` gate so SSR\n   * streams real markup for public/unauthenticated paths.\n   * Defaults to false (authenticated app shell, ClientOnly-gated).\n   */\n  isPublicPath?: boolean;\n\n  /**\n   * Fallback rendered by `<ClientOnly>` while JS hydrates on private paths.\n   * Defaults to `<DefaultSpinner />`.\n   */\n  clientOnlyFallback?: React.ReactNode;\n\n  children: React.ReactNode;\n}\n\nconst DEFAULT_TOASTER = <Toaster richColors position=\"bottom-left\" />;\n\nfunction ProvidersInner({\n  queryClient,\n  defaultTheme = \"system\",\n  themeAttribute = \"class\",\n  tooltipDelayDuration,\n  toaster = DEFAULT_TOASTER,\n  disableThemeTransitions = true,\n  children,\n}: {\n  queryClient: QueryClient;\n  defaultTheme?: string;\n  themeAttribute?: Attribute | Attribute[];\n  tooltipDelayDuration?: number;\n  toaster?: React.ReactNode | null;\n  disableThemeTransitions?: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <ThemeProvider\n        attribute={themeAttribute}\n        defaultTheme={defaultTheme}\n        enableSystem\n        disableTransitionOnChange={disableThemeTransitions}\n      >\n        <TooltipProvider delayDuration={tooltipDelayDuration}>\n          {children}\n          {toaster}\n        </TooltipProvider>\n      </ThemeProvider>\n    </QueryClientProvider>\n  );\n}\n\nexport function AppProviders({\n  queryClient,\n  isPublicPath = false,\n  clientOnlyFallback,\n  defaultTheme,\n  themeAttribute,\n  tooltipDelayDuration,\n  toaster,\n  disableThemeTransitions,\n  children,\n}: AppProvidersProps) {\n  const fallback = clientOnlyFallback ?? <DefaultSpinner />;\n\n  if (isPublicPath) {\n    return (\n      <ProvidersInner\n        queryClient={queryClient}\n        defaultTheme={defaultTheme}\n        themeAttribute={themeAttribute}\n        tooltipDelayDuration={tooltipDelayDuration}\n        toaster={toaster}\n        disableThemeTransitions={disableThemeTransitions}\n      >\n        {children}\n      </ProvidersInner>\n    );\n  }\n\n  return (\n    <ClientOnly fallback={fallback}>\n      <ProvidersInner\n        queryClient={queryClient}\n        defaultTheme={defaultTheme}\n        themeAttribute={themeAttribute}\n        tooltipDelayDuration={tooltipDelayDuration}\n        toaster={toaster}\n        disableThemeTransitions={disableThemeTransitions}\n      >\n        {children}\n      </ProvidersInner>\n    </ClientOnly>\n  );\n}\n"]}

package/dist/client/assistant-ui-recovery.d.ts

@@ -24,7 +24,7 @@ export declare class AssistantUiStaleIndexErrorBoundary extends React.Component<
     componentDidCatch(error: unknown, info: React.ErrorInfo): void;
     componentDidUpdate(prevProps: AssistantUiStaleIndexErrorBoundaryProps, prevState: AssistantUiStaleIndexErrorBoundaryState): void;
     componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element | null;
 }
 export declare function AssistantMessageListErrorBoundary({ resetKey, children, }: {
     resetKey: string;

package/dist/client/auth-redirect-url.d.ts

@@ -1,2 +1,2 @@
-export declare function stripAuthRedirectParamFromUrl(win?: Window): void;
+export declare function stripAuthRedirectParamFromUrl(win?: Window | null): void;
 //# sourceMappingURL=auth-redirect-url.d.ts.map

package/dist/client/auth-redirect-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth-redirect-url.d.ts","sourceRoot":"","sources":["../../src/client/auth-redirect-url.ts"],"names":[],"mappings":"AAMA,wBAAgB,6BAA6B,CAAC,GAAG,SAAkB,GAAG,IAAI,CAgBzE"}
+{"version":3,"file":"auth-redirect-url.d.ts","sourceRoot":"","sources":["../../src/client/auth-redirect-url.ts"],"names":[],"mappings":"AAMA,wBAAgB,6BAA6B,CAAC,GAAG,gBAAkB,GAAG,IAAI,CAgBzE"}

package/dist/client/blocks/library/AnnotatedCodeBlock.d.ts

@@ -1,24 +1,5 @@
 import type { BlockEditProps, BlockReadProps } from "../types.js";
 import type { AnnotatedCodeData } from "./annotated-code.config.js";
-/**
- * "Explain this code" walkthrough block: a standard syntax-highlighted code
- * surface on the left with line-anchored annotation cards on the right (the
- * Stripe-docs / Sourcegraph layout). Each annotated line range gets a subtle
- * highlight band + an accent rail down the gutter; its card shows the `lines`
- * range, optional `label`, and the always-visible markdown `note` (via
- * `ctx.renderMarkdown`). Hovering a card highlights its lines and vice-versa.
- *
- * Syntax highlighting reuses the shared `highlightCode` lowlight helper (the same
- * colorful palette as the `code-tabs` block) per line, so it matches the app's
- * standard code styling and supports per-line bands without an async loader. The
- * surface uses the plan `--plan-code*`/`--plan-*` tokens and Tailwind `dark:`
- * pairs, so it reads correctly in BOTH light and dark mode. Code lines render as
- * `<span>`s (never one `<pre>` per line) so they don't pick up document
- * code/pre chrome. Lives in core so any app can register the dev-doc block.
- *
- * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace
- * code Textarea, filename/language Inputs, and add/remove-able annotation rows.
- */
 declare function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }: BlockReadProps<AnnotatedCodeData>): import("react/jsx-runtime").JSX.Element;
 declare function AnnotatedCodeEdit({ data, onChange, editable, }: BlockEditProps<AnnotatedCodeData>): import("react/jsx-runtime").JSX.Element;
 export { AnnotatedCodeRead, AnnotatedCodeEdit };

package/dist/client/blocks/library/AnnotatedCodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedCodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AAmBpC;;;;;;;;;;;;;;;;;;GAkBG;AAIH,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CA6MnC;AAOD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CAiJnC;AAED,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"AnnotatedCodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AA2IpC,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CA0PnC;AAOD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CAiJnC;AAED,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/client/blocks/library/AnnotatedCodeBlock.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { IconCode, IconPlus, IconTrash } from "@tabler/icons-react";
 import { cn } from "../../utils.js";
 import { highlightCode, inferLanguageFromFilename, normalizeCodeLanguage, } from "./code-highlight.js";
@@ -25,6 +25,75 @@ import { DevInput, DevLabel, DevTextarea } from "./dev-doc-ui.js";
  * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace
  * code Textarea, filename/language Inputs, and add/remove-able annotation rows.
  */
+/* ── Collapse helpers ──────────────────────────────────────────────────────── */
+/**
+ * Minimum total line count before collapse is considered. Short files render
+ * fully expanded regardless of annotation coverage.
+ */
+const COLLAPSE_MIN_TOTAL_LINES = 40;
+/**
+ * Number of unannotated lines in a run that triggers collapse. Runs at or
+ * below this threshold always stay expanded (no expander button).
+ */
+const COLLAPSE_THRESHOLD = 16;
+/**
+ * Context lines kept visible at each edge of a collapsed run (8 lines of
+ * breathing room so the collapsed region is clearly framed).
+ */
+const COLLAPSE_CONTEXT_EDGE = 8;
+/**
+ * Partition line numbers [1..lineCount] into visible and collapsed segments.
+ * Annotated lines (and COLLAPSE_CONTEXT_EDGE lines on either side of them) are
+ * always visible. Runs of unannotated lines longer than COLLAPSE_THRESHOLD are
+ * collapsed. The file header (first COLLAPSE_CONTEXT_EDGE lines) is always
+ * visible so context is preserved.
+ */
+function buildLineSegments(lineCount, lineMarkers) {
+    if (lineCount <= COLLAPSE_MIN_TOTAL_LINES) {
+        return [{ kind: "visible", startLine: 1, endLine: lineCount }];
+    }
+    // Build a boolean array: true if the line must stay visible.
+    const mustShow = new Array(lineCount + 1).fill(false);
+    // File header always visible.
+    for (let i = 1; i <= Math.min(COLLAPSE_CONTEXT_EDGE, lineCount); i += 1) {
+        mustShow[i] = true;
+    }
+    // Annotated lines and their context edges.
+    for (const lineNo of lineMarkers.keys()) {
+        for (let i = Math.max(1, lineNo - COLLAPSE_CONTEXT_EDGE); i <= Math.min(lineCount, lineNo + COLLAPSE_CONTEXT_EDGE); i += 1) {
+            mustShow[i] = true;
+        }
+    }
+    // Compute initial segments.
+    const raw = [];
+    let segStart = 1;
+    let visible = mustShow[1] ?? false;
+    for (let i = 2; i <= lineCount; i += 1) {
+        const nextVisible = mustShow[i] ?? false;
+        if (nextVisible !== visible) {
+            raw.push(visible
+                ? { kind: "visible", startLine: segStart, endLine: i - 1 }
+                : { kind: "collapsed", startLine: segStart, endLine: i - 1 });
+            segStart = i;
+            visible = nextVisible;
+        }
+    }
+    raw.push(visible
+        ? { kind: "visible", startLine: segStart, endLine: lineCount }
+        : { kind: "collapsed", startLine: segStart, endLine: lineCount });
+    // Don't collapse short hidden runs — expand them in-place.
+    return raw.map((seg) => {
+        if (seg.kind === "collapsed" &&
+            seg.endLine - seg.startLine + 1 <= COLLAPSE_THRESHOLD) {
+            return {
+                kind: "visible",
+                startLine: seg.startLine,
+                endLine: seg.endLine,
+            };
+        }
+        return seg;
+    });
+}
 /* ── Read ──────────────────────────────────────────────────────────────────── */
 function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }) {
     // On-hover popover (anchored to the right of the code) replaces the old
@@ -57,61 +126,78 @@ function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }) {
     const activeItem = useMemo(() => activeIndex == null
         ? null
         : (resolved.find((item) => item.index === activeIndex) ?? null), [activeIndex, resolved]);
-    const codeSurface = (_jsxs("div", { ref: codeRef, className: "overflow-hidden rounded-xl border border-plan-line bg-plan-code", children: [(hasFilename || showLangChip) && (_jsxs("div", { className: "flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2", children: [_jsx(IconCode, { className: "size-3.5 shrink-0 text-plan-muted" }), _jsx(CodeFilenameLabel, { filename: data.filename, className: "text-[13px] font-medium", directoryClassName: "text-plan-muted", basenameClassName: "text-plan-code-text" }), showLangChip && (_jsx("span", { className: "shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted", children: langChip }))] })), _jsx("div", { className: "overflow-x-auto py-1.5", "data-code-surface": true, children: _jsx("div", { className: "min-w-full font-mono [font-size:var(--plan-doc-code-size)] leading-[22px]", children: lines.map((_text, idx) => {
-                        const lineNo = idx + 1;
-                        const markers = lineMarkers.get(lineNo);
-                        const isAnnotated = !!markers?.length;
-                        const isActive = activeIndex != null &&
-                            !!markers?.some((m) => m.index === activeIndex);
-                        const buildAnchorForRow = (el) => {
-                            if (!markers)
-                                return null;
-                            const primaryMarker = markers[0];
-                            const anchorLine = primaryMarker.range?.start ?? lineNo;
-                            const anchorRow = lineRefs.current.get(anchorLine) ?? el;
-                            return anchorFromElements(codeRef.current, anchorRow);
-                        };
-                        return (_jsxs("div", { ref: (node) => setLineRef(lineNo, node), "data-code-line": lineNo, "data-annot-row": isAnnotated ? markers?.[0].index : undefined, 
-                            // tabIndex makes annotated rows keyboard-focusable so screen
-                            // readers and keyboard users can access notes without a mouse.
-                            tabIndex: isAnnotated ? 0 : undefined, role: isAnnotated ? "button" : undefined, "aria-expanded": isAnnotated ? isActive : undefined, "aria-label": isAnnotated ? `Line ${lineNo} annotation` : undefined, className: cn("flex w-full", isAnnotated && "cursor-pointer", isActive
-                                ? "bg-amber-400/20 dark:bg-amber-300/15"
-                                : isAnnotated
-                                    ? "bg-amber-400/[0.07] dark:bg-amber-300/[0.07]"
-                                    : null), onMouseEnter: isAnnotated && markers
-                                ? (event) => {
-                                    const anchor = buildAnchorForRow(event.currentTarget);
-                                    if (anchor)
-                                        hover.open(markers[0].index, anchor);
-                                }
-                                : undefined, onMouseLeave: isAnnotated ? () => hover.scheduleClose() : undefined, onClick: isAnnotated && markers
-                                ? (event) => {
-                                    const anchor = buildAnchorForRow(event.currentTarget);
-                                    if (anchor)
-                                        hover.open(markers[0].index, anchor);
-                                }
-                                : undefined, onKeyDown: isAnnotated && markers
-                                ? (event) => {
-                                    if (event.key !== "Enter" && event.key !== " ")
-                                        return;
-                                    event.preventDefault();
-                                    const anchor = buildAnchorForRow(event.currentTarget);
-                                    if (anchor)
-                                        hover.open(markers[0].index, anchor);
-                                }
-                                : undefined, onFocus: isAnnotated && markers
-                                ? (event) => {
-                                    const anchor = buildAnchorForRow(event.currentTarget);
-                                    if (anchor)
-                                        hover.open(markers[0].index, anchor);
-                                }
-                                : undefined, onBlur: isAnnotated ? () => hover.scheduleClose() : undefined, children: [_jsx("span", { "aria-hidden": true, className: cn("w-[3px] shrink-0 self-stretch", isAnnotated
-                                        ? isActive
-                                            ? "bg-amber-500 dark:bg-amber-400"
-                                            : "bg-amber-400/45 dark:bg-amber-300/35"
-                                        : null) }), _jsx("span", { className: "w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60", children: lineNo }), _jsx("span", { className: "flex-1 whitespace-pre pr-4 text-plan-code-text", children: highlightedLines[idx] })] }, lineNo));
+    // Line-collapse state: a set of collapsed segment start lines that have been
+    // expanded by the reader. Starts empty (all segments in their default state).
+    const [expandedCollapsed, setExpandedCollapsed] = useState(() => new Set());
+    const segments = useMemo(() => buildLineSegments(lineCount, lineMarkers), [lineCount, lineMarkers]);
+    const renderLine = (lineNo) => {
+        const markers = lineMarkers.get(lineNo);
+        const isAnnotated = !!markers?.length;
+        const isActive = activeIndex != null && !!markers?.some((m) => m.index === activeIndex);
+        const buildAnchorForRow = (el) => {
+            if (!markers)
+                return null;
+            const primaryMarker = markers[0];
+            const anchorLine = primaryMarker.range?.start ?? lineNo;
+            const anchorRow = lineRefs.current.get(anchorLine) ?? el;
+            return anchorFromElements(codeRef.current, anchorRow);
+        };
+        return (_jsxs("div", { ref: (node) => setLineRef(lineNo, node), "data-code-line": lineNo, "data-annot-row": isAnnotated ? markers?.[0].index : undefined, tabIndex: isAnnotated ? 0 : undefined, role: isAnnotated ? "button" : undefined, "aria-expanded": isAnnotated ? isActive : undefined, "aria-label": isAnnotated ? `Line ${lineNo} annotation` : undefined, className: cn("flex w-full", isAnnotated && "cursor-pointer", isActive
+                ? "bg-amber-400/20 dark:bg-amber-300/15"
+                : isAnnotated
+                    ? "bg-amber-400/[0.07] dark:bg-amber-300/[0.07]"
+                    : null), onMouseEnter: isAnnotated && markers
+                ? (event) => {
+                    const anchor = buildAnchorForRow(event.currentTarget);
+                    if (anchor)
+                        hover.open(markers[0].index, anchor);
+                }
+                : undefined, onMouseLeave: isAnnotated ? () => hover.scheduleClose() : undefined, onClick: isAnnotated && markers
+                ? (event) => {
+                    const anchor = buildAnchorForRow(event.currentTarget);
+                    if (anchor)
+                        hover.open(markers[0].index, anchor);
+                }
+                : undefined, onKeyDown: isAnnotated && markers
+                ? (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    event.preventDefault();
+                    const anchor = buildAnchorForRow(event.currentTarget);
+                    if (anchor)
+                        hover.open(markers[0].index, anchor);
+                }
+                : undefined, onFocus: isAnnotated && markers
+                ? (event) => {
+                    const anchor = buildAnchorForRow(event.currentTarget);
+                    if (anchor)
+                        hover.open(markers[0].index, anchor);
+                }
+                : undefined, onBlur: isAnnotated ? () => hover.scheduleClose() : undefined, children: [_jsx("span", { "aria-hidden": true, className: cn("w-[3px] shrink-0 self-stretch", isAnnotated
+                        ? isActive
+                            ? "bg-amber-500 dark:bg-amber-400"
+                            : "bg-amber-400/45 dark:bg-amber-300/35"
+                        : null) }), _jsx("span", { className: "w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60", children: lineNo }), _jsx("span", { className: "flex-1 whitespace-pre pr-4 text-plan-code-text", children: highlightedLines[lineNo - 1] })] }, lineNo));
+    };
+    const codeSurface = (_jsxs("div", { ref: codeRef, className: "overflow-hidden rounded-xl border border-plan-line bg-plan-code", children: [(hasFilename || showLangChip) && (_jsxs("div", { className: "flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2", children: [_jsx(IconCode, { className: "size-3.5 shrink-0 text-plan-muted" }), _jsx(CodeFilenameLabel, { filename: data.filename, className: "text-[13px] font-medium", directoryClassName: "text-plan-muted", basenameClassName: "text-plan-code-text" }), showLangChip && (_jsx("span", { className: "shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted", children: langChip }))] })), _jsx("div", { className: "overflow-x-auto py-1.5", "data-code-surface": true, children: _jsx("div", { className: "min-w-full font-mono [font-size:var(--plan-doc-code-size)] leading-[22px]", children: segments.map((seg) => {
+                        if (seg.kind === "visible") {
+                            const lineNos = Array.from({ length: seg.endLine - seg.startLine + 1 }, (_, i) => seg.startLine + i);
+                            return lineNos.map(renderLine);
+                        }
+                        // Collapsed segment — show an expander row.
+                        const isExpanded = expandedCollapsed.has(seg.startLine);
+                        const hiddenCount = seg.endLine - seg.startLine + 1;
+                        if (isExpanded) {
+                            const lineNos = Array.from({ length: hiddenCount }, (_, i) => seg.startLine + i);
+                            return lineNos.map(renderLine);
+                        }
+                        return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: () => setExpandedCollapsed((prev) => {
+                                const next = new Set(prev);
+                                next.add(seg.startLine);
+                                return next;
+                            }), className: "flex w-full cursor-pointer items-center gap-2 border-y border-plan-line/50 bg-plan-block/20 px-3 py-0.5 text-left hover:bg-plan-block/40", children: [_jsx("span", { "aria-hidden": true, className: "w-[3px] shrink-0 self-stretch" }), _jsx("span", { className: "w-8 shrink-0 select-none text-right text-[11px] tabular-nums text-plan-muted/40", children: "\u00B7\u00B7\u00B7" }), _jsxs("span", { className: "flex-1 text-[11px] text-plan-muted/70", children: [hiddenCount, " lines \u2014 click to expand"] })] }, `collapse-${seg.startLine}`));
                     }) }) })] }));
-    return (_jsxs("section", { className: "plan-block relative", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), codeSurface, hasAnnotations && _jsx(AnnotationHiddenStack, { items: resolved, ctx: ctx }), hasAnnotations && activeItem && hover.anchor && (_jsx(AnnotationHoverCard, { item: activeItem, anchor: hover.anchor, ctx: ctx, onMouseEnter: hover.cancelClose, onMouseLeave: hover.scheduleClose, onClose: hover.close })), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+    return (_jsxs("section", { className: "plan-block relative", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), codeSurface, hasAnnotations && _jsx(AnnotationHiddenStack, { items: resolved, ctx: ctx }), hasAnnotations && activeItem && hover.anchor && (_jsx(AnnotationHoverCard, { item: activeItem, anchor: hover.anchor, ctx: ctx, onMouseEnter: hover.cancelClose, onMouseLeave: hover.scheduleClose, onClose: hover.closeForScroll })), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
 }
 /* ── Edit (panel) ──────────────────────────────────────────────────────────── */
 const codeAreaClass = "min-h-[160px] font-mono [font-size:var(--plan-code-size)] leading-5";

package/dist/client/blocks/library/AnnotatedCodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedCodeBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { IconCode, IconPlus, IconTrash } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type {\n  AnnotatedCodeAnnotation,\n  AnnotatedCodeData,\n} from \"./annotated-code.config.js\";\nimport {\n  highlightCode,\n  inferLanguageFromFilename,\n  normalizeCodeLanguage,\n} from \"./code-highlight.js\";\nimport {\n  AnnotationHiddenStack,\n  AnnotationHoverCard,\n  anchorFromElements,\n  buildLineMarkerMap,\n  hasRailAnnotations,\n  resolveAnnotations,\n  useAnnotationHover,\n  type ResolvedAnnotation,\n} from \"./annotation-rail.js\";\nimport { CodeFilenameLabel } from \"./code-filename-label.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * \"Explain this code\" walkthrough block: a standard syntax-highlighted code\n * surface on the left with line-anchored annotation cards on the right (the\n * Stripe-docs / Sourcegraph layout). Each annotated line range gets a subtle\n * highlight band + an accent rail down the gutter; its card shows the `lines`\n * range, optional `label`, and the always-visible markdown `note` (via\n * `ctx.renderMarkdown`). Hovering a card highlights its lines and vice-versa.\n *\n * Syntax highlighting reuses the shared `highlightCode` lowlight helper (the same\n * colorful palette as the `code-tabs` block) per line, so it matches the app's\n * standard code styling and supports per-line bands without an async loader. The\n * surface uses the plan `--plan-code*`/`--plan-*` tokens and Tailwind `dark:`\n * pairs, so it reads correctly in BOTH light and dark mode. Code lines render as\n * `<span>`s (never one `<pre>` per line) so they don't pick up document\n * code/pre chrome. Lives in core so any app can register the dev-doc block.\n *\n * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace\n * code Textarea, filename/language Inputs, and add/remove-able annotation rows.\n */\n\n/* ── Read ──────────────────────────────────────────────────────────────────── */\n\nfunction AnnotatedCodeRead({\n  data,\n  blockId,\n  title,\n  summary,\n  ctx,\n}: BlockReadProps<AnnotatedCodeData>) {\n  // On-hover popover (anchored to the right of the code) replaces the old\n  // persistent rail: nothing is visible when idle. `codeRef` measures the code\n  // block's right edge; `hover` carries the active index + captured geometry.\n  const hover = useAnnotationHover();\n  const { activeIndex } = hover;\n  const codeRef = useRef<HTMLDivElement | null>(null);\n  const lineRefs = useRef(new Map<number, HTMLDivElement>());\n\n  const setLineRef = (lineNo: number, node: HTMLDivElement | null) => {\n    if (node) lineRefs.current.set(lineNo, node);\n    else lineRefs.current.delete(lineNo);\n  };\n\n  const lines = useMemo(\n    () => data.code.replace(/\\n$/, \"\").split(\"\\n\"),\n    [data.code],\n  );\n  const lineCount = lines.length;\n\n  const language = useMemo(\n    () =>\n      normalizeCodeLanguage(data.language) ??\n      inferLanguageFromFilename(data.filename),\n    [data.language, data.filename],\n  );\n\n  // Highlight each line once; empty lines keep their height with a NBSP.\n  const highlightedLines = useMemo(\n    () =>\n      lines.map((text) => (text.length ? highlightCode(text, language) : \" \")),\n    [lines, language],\n  );\n\n  const resolved = useMemo(\n    () => resolveAnnotations(data.annotations, () => lineCount),\n    [data.annotations, lineCount],\n  );\n\n  // line number (1-based) → resolved annotations covering it.\n  const lineMarkers = useMemo(() => buildLineMarkerMap(resolved), [resolved]);\n\n  const hasAnnotations = hasRailAnnotations(resolved);\n  const langChip = data.language?.trim();\n  const hasFilename = Boolean(data.filename?.trim());\n  const showLangChip = Boolean(langChip && !hasFilename);\n\n  // The resolved annotation whose card is currently shown on hover.\n  const activeItem =\n    useMemo<ResolvedAnnotation<AnnotatedCodeAnnotation> | null>(\n      () =>\n        activeIndex == null\n          ? null\n          : (resolved.find((item) => item.index === activeIndex) ?? null),\n      [activeIndex, resolved],\n    );\n\n  const codeSurface = (\n    <div\n      ref={codeRef}\n      className=\"overflow-hidden rounded-xl border border-plan-line bg-plan-code\"\n    >\n      {(hasFilename || showLangChip) && (\n        <div className=\"flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2\">\n          <IconCode className=\"size-3.5 shrink-0 text-plan-muted\" />\n          <CodeFilenameLabel\n            filename={data.filename}\n            className=\"text-[13px] font-medium\"\n            directoryClassName=\"text-plan-muted\"\n            basenameClassName=\"text-plan-code-text\"\n          />\n          {showLangChip && (\n            <span className=\"shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted\">\n              {langChip}\n            </span>\n          )}\n        </div>\n      )}\n      <div className=\"overflow-x-auto py-1.5\" data-code-surface>\n        <div className=\"min-w-full font-mono [font-size:var(--plan-doc-code-size)] leading-[22px]\">\n          {lines.map((_text, idx) => {\n            const lineNo = idx + 1;\n            const markers = lineMarkers.get(lineNo);\n            const isAnnotated = !!markers?.length;\n            const isActive =\n              activeIndex != null &&\n              !!markers?.some((m) => m.index === activeIndex);\n\n            const buildAnchorForRow = (el: HTMLElement) => {\n              if (!markers) return null;\n              const primaryMarker = markers[0];\n              const anchorLine = primaryMarker.range?.start ?? lineNo;\n              const anchorRow = lineRefs.current.get(anchorLine) ?? el;\n              return anchorFromElements(codeRef.current, anchorRow);\n            };\n\n            return (\n              <div\n                key={lineNo}\n                ref={(node) => setLineRef(lineNo, node)}\n                data-code-line={lineNo}\n                data-annot-row={isAnnotated ? markers?.[0].index : undefined}\n                // tabIndex makes annotated rows keyboard-focusable so screen\n                // readers and keyboard users can access notes without a mouse.\n                tabIndex={isAnnotated ? 0 : undefined}\n                role={isAnnotated ? \"button\" : undefined}\n                aria-expanded={isAnnotated ? isActive : undefined}\n                aria-label={\n                  isAnnotated ? `Line ${lineNo} annotation` : undefined\n                }\n                className={cn(\n                  \"flex w-full\",\n                  isAnnotated && \"cursor-pointer\",\n                  isActive\n                    ? \"bg-amber-400/20 dark:bg-amber-300/15\"\n                    : isAnnotated\n                      ? \"bg-amber-400/[0.07] dark:bg-amber-300/[0.07]\"\n                      : null,\n                )}\n                onMouseEnter={\n                  isAnnotated && markers\n                    ? (event) => {\n                        const anchor = buildAnchorForRow(event.currentTarget);\n                        if (anchor) hover.open(markers[0].index, anchor);\n                      }\n                    : undefined\n                }\n                onMouseLeave={\n                  isAnnotated ? () => hover.scheduleClose() : undefined\n                }\n                onClick={\n                  isAnnotated && markers\n                    ? (event) => {\n                        const anchor = buildAnchorForRow(event.currentTarget);\n                        if (anchor) hover.open(markers[0].index, anchor);\n                      }\n                    : undefined\n                }\n                onKeyDown={\n                  isAnnotated && markers\n                    ? (event) => {\n                        if (event.key !== \"Enter\" && event.key !== \" \") return;\n                        event.preventDefault();\n                        const anchor = buildAnchorForRow(event.currentTarget);\n                        if (anchor) hover.open(markers[0].index, anchor);\n                      }\n                    : undefined\n                }\n                onFocus={\n                  isAnnotated && markers\n                    ? (event) => {\n                        const anchor = buildAnchorForRow(event.currentTarget);\n                        if (anchor) hover.open(markers[0].index, anchor);\n                      }\n                    : undefined\n                }\n                onBlur={isAnnotated ? () => hover.scheduleClose() : undefined}\n              >\n                {/* Accent rail: amber on annotated lines, brighter when active. */}\n                <span\n                  aria-hidden\n                  className={cn(\n                    \"w-[3px] shrink-0 self-stretch\",\n                    isAnnotated\n                      ? isActive\n                        ? \"bg-amber-500 dark:bg-amber-400\"\n                        : \"bg-amber-400/45 dark:bg-amber-300/35\"\n                      : null,\n                  )}\n                />\n                <span className=\"w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60\">\n                  {lineNo}\n                </span>\n                <span className=\"flex-1 whitespace-pre pr-4 text-plan-code-text\">\n                  {highlightedLines[idx]}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <section className=\"plan-block relative\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      {/* The code keeps its full width — no persistent annotation column. Notes\n          live in a visually-hidden stack (a11y + tests) and surface ONE at a\n          time as an on-hover popover anchored to the right of the code. */}\n      {codeSurface}\n      {hasAnnotations && <AnnotationHiddenStack items={resolved} ctx={ctx} />}\n      {hasAnnotations && activeItem && hover.anchor && (\n        <AnnotationHoverCard\n          item={activeItem}\n          anchor={hover.anchor}\n          ctx={ctx}\n          onMouseEnter={hover.cancelClose}\n          onMouseLeave={hover.scheduleClose}\n          onClose={hover.close}\n        />\n      )}\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/* ── Edit (panel) ──────────────────────────────────────────────────────────── */\n\nconst codeAreaClass =\n  \"min-h-[160px] font-mono [font-size:var(--plan-code-size)] leading-5\";\n\nfunction AnnotatedCodeEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<AnnotatedCodeData>) {\n  const annotations = data.annotations ?? [];\n  const patch = (next: Partial<AnnotatedCodeData>) =>\n    onChange({ ...data, ...next });\n\n  const updateAnnotation = (\n    index: number,\n    next: Partial<AnnotatedCodeAnnotation>,\n  ) =>\n    patch({\n      annotations: annotations.map((annotation, i) =>\n        i === index ? { ...annotation, ...next } : annotation,\n      ),\n    });\n\n  const removeAnnotation = (index: number) =>\n    patch({ annotations: annotations.filter((_, i) => i !== index) });\n\n  const addAnnotation = () => {\n    if (annotations.length >= 80) return; // schema max\n    patch({\n      annotations: [...annotations, { lines: \"1\", label: \"\", note: \"\" }],\n    });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\" data-plan-interactive>\n      <div className=\"grid gap-3 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-filename\" className=\"text-xs\">\n            Filename\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-filename\"\n            value={data.filename ?? \"\"}\n            placeholder=\"src/server/auth.ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ filename: event.target.value || undefined })\n            }\n          />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-language\" className=\"text-xs\">\n            Language\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-language\"\n            value={data.language ?? \"\"}\n            placeholder=\"ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ language: event.target.value || undefined })\n            }\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        <DevLabel htmlFor=\"annotated-code-code\" className=\"text-xs\">\n          Code\n        </DevLabel>\n        <DevTextarea\n          id=\"annotated-code-code\"\n          spellCheck={false}\n          className={codeAreaClass}\n          value={data.code}\n          disabled={!editable}\n          onChange={(event) => patch({ code: event.target.value })}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel className=\"text-xs\">Annotations</DevLabel>\n          {editable && annotations.length < 80 && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={addAnnotation}\n              className=\"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-plan-muted transition-colors hover:bg-plan-block/60 hover:text-plan-text\"\n            >\n              <IconPlus className=\"size-3.5\" />\n              Add annotation\n            </button>\n          )}\n        </div>\n        {annotations.length === 0 && (\n          <p className=\"text-xs text-plan-muted\">\n            No annotations yet. Add one to anchor a note to a line range.\n          </p>\n        )}\n        {annotations.map((annotation, index) => (\n          <div\n            key={index}\n            className=\"flex flex-col gap-2 rounded-md border border-plan-line bg-plan-block/30 p-2\"\n          >\n            <div className=\"grid gap-2 sm:grid-cols-[120px_minmax(0,1fr)_auto]\">\n              <DevInput\n                aria-label={`Annotation ${index + 1} lines`}\n                value={annotation.lines}\n                placeholder=\"3-5\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, { lines: event.target.value })\n                }\n              />\n              <DevInput\n                aria-label={`Annotation ${index + 1} label`}\n                value={annotation.label ?? \"\"}\n                placeholder=\"Label (optional)\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, {\n                    label: event.target.value || undefined,\n                  })\n                }\n              />\n              {editable && (\n                <button\n                  type=\"button\"\n                  data-plan-interactive\n                  aria-label={`Remove annotation ${index + 1}`}\n                  onClick={() => removeAnnotation(index)}\n                  className=\"flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-plan-muted transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <IconTrash className=\"size-4\" />\n                </button>\n              )}\n            </div>\n            <DevTextarea\n              aria-label={`Annotation ${index + 1} note`}\n              className=\"min-h-[60px] text-sm\"\n              value={annotation.note}\n              placeholder=\"Explain what these lines do…\"\n              disabled={!editable}\n              onChange={(event) =>\n                updateAnnotation(index, { note: event.target.value })\n              }\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport { AnnotatedCodeRead, AnnotatedCodeEdit };\n"]}
+{"version":3,"file":"AnnotatedCodeBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport { IconCode, IconPlus, IconTrash } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type {\n  AnnotatedCodeAnnotation,\n  AnnotatedCodeData,\n} from \"./annotated-code.config.js\";\nimport {\n  highlightCode,\n  inferLanguageFromFilename,\n  normalizeCodeLanguage,\n} from \"./code-highlight.js\";\nimport {\n  AnnotationHiddenStack,\n  AnnotationHoverCard,\n  anchorFromElements,\n  buildLineMarkerMap,\n  hasRailAnnotations,\n  resolveAnnotations,\n  useAnnotationHover,\n  type ResolvedAnnotation,\n} from \"./annotation-rail.js\";\nimport { CodeFilenameLabel } from \"./code-filename-label.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * \"Explain this code\" walkthrough block: a standard syntax-highlighted code\n * surface on the left with line-anchored annotation cards on the right (the\n * Stripe-docs / Sourcegraph layout). Each annotated line range gets a subtle\n * highlight band + an accent rail down the gutter; its card shows the `lines`\n * range, optional `label`, and the always-visible markdown `note` (via\n * `ctx.renderMarkdown`). Hovering a card highlights its lines and vice-versa.\n *\n * Syntax highlighting reuses the shared `highlightCode` lowlight helper (the same\n * colorful palette as the `code-tabs` block) per line, so it matches the app's\n * standard code styling and supports per-line bands without an async loader. The\n * surface uses the plan `--plan-code*`/`--plan-*` tokens and Tailwind `dark:`\n * pairs, so it reads correctly in BOTH light and dark mode. Code lines render as\n * `<span>`s (never one `<pre>` per line) so they don't pick up document\n * code/pre chrome. Lives in core so any app can register the dev-doc block.\n *\n * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace\n * code Textarea, filename/language Inputs, and add/remove-able annotation rows.\n */\n\n/* ── Collapse helpers ──────────────────────────────────────────────────────── */\n\n/**\n * Minimum total line count before collapse is considered. Short files render\n * fully expanded regardless of annotation coverage.\n */\nconst COLLAPSE_MIN_TOTAL_LINES = 40;\n\n/**\n * Number of unannotated lines in a run that triggers collapse. Runs at or\n * below this threshold always stay expanded (no expander button).\n */\nconst COLLAPSE_THRESHOLD = 16;\n\n/**\n * Context lines kept visible at each edge of a collapsed run (8 lines of\n * breathing room so the collapsed region is clearly framed).\n */\nconst COLLAPSE_CONTEXT_EDGE = 8;\n\ntype CollapsedSegment = {\n  kind: \"collapsed\";\n  startLine: number;\n  endLine: number;\n};\ntype VisibleSegment = { kind: \"visible\"; startLine: number; endLine: number };\ntype LineSegment = VisibleSegment | CollapsedSegment;\n\n/**\n * Partition line numbers [1..lineCount] into visible and collapsed segments.\n * Annotated lines (and COLLAPSE_CONTEXT_EDGE lines on either side of them) are\n * always visible. Runs of unannotated lines longer than COLLAPSE_THRESHOLD are\n * collapsed. The file header (first COLLAPSE_CONTEXT_EDGE lines) is always\n * visible so context is preserved.\n */\nfunction buildLineSegments(\n  lineCount: number,\n  lineMarkers: Map<number, Array<{ index: number }>>,\n): LineSegment[] {\n  if (lineCount <= COLLAPSE_MIN_TOTAL_LINES) {\n    return [{ kind: \"visible\", startLine: 1, endLine: lineCount }];\n  }\n\n  // Build a boolean array: true if the line must stay visible.\n  const mustShow = new Array<boolean>(lineCount + 1).fill(false);\n  // File header always visible.\n  for (let i = 1; i <= Math.min(COLLAPSE_CONTEXT_EDGE, lineCount); i += 1) {\n    mustShow[i] = true;\n  }\n  // Annotated lines and their context edges.\n  for (const lineNo of lineMarkers.keys()) {\n    for (\n      let i = Math.max(1, lineNo - COLLAPSE_CONTEXT_EDGE);\n      i <= Math.min(lineCount, lineNo + COLLAPSE_CONTEXT_EDGE);\n      i += 1\n    ) {\n      mustShow[i] = true;\n    }\n  }\n\n  // Compute initial segments.\n  const raw: LineSegment[] = [];\n  let segStart = 1;\n  let visible = mustShow[1] ?? false;\n  for (let i = 2; i <= lineCount; i += 1) {\n    const nextVisible = mustShow[i] ?? false;\n    if (nextVisible !== visible) {\n      raw.push(\n        visible\n          ? { kind: \"visible\", startLine: segStart, endLine: i - 1 }\n          : { kind: \"collapsed\", startLine: segStart, endLine: i - 1 },\n      );\n      segStart = i;\n      visible = nextVisible;\n    }\n  }\n  raw.push(\n    visible\n      ? { kind: \"visible\", startLine: segStart, endLine: lineCount }\n      : { kind: \"collapsed\", startLine: segStart, endLine: lineCount },\n  );\n\n  // Don't collapse short hidden runs — expand them in-place.\n  return raw.map((seg) => {\n    if (\n      seg.kind === \"collapsed\" &&\n      seg.endLine - seg.startLine + 1 <= COLLAPSE_THRESHOLD\n    ) {\n      return {\n        kind: \"visible\",\n        startLine: seg.startLine,\n        endLine: seg.endLine,\n      };\n    }\n    return seg;\n  });\n}\n\n/* ── Read ──────────────────────────────────────────────────────────────────── */\n\nfunction AnnotatedCodeRead({\n  data,\n  blockId,\n  title,\n  summary,\n  ctx,\n}: BlockReadProps<AnnotatedCodeData>) {\n  // On-hover popover (anchored to the right of the code) replaces the old\n  // persistent rail: nothing is visible when idle. `codeRef` measures the code\n  // block's right edge; `hover` carries the active index + captured geometry.\n  const hover = useAnnotationHover();\n  const { activeIndex } = hover;\n  const codeRef = useRef<HTMLDivElement | null>(null);\n  const lineRefs = useRef(new Map<number, HTMLDivElement>());\n\n  const setLineRef = (lineNo: number, node: HTMLDivElement | null) => {\n    if (node) lineRefs.current.set(lineNo, node);\n    else lineRefs.current.delete(lineNo);\n  };\n\n  const lines = useMemo(\n    () => data.code.replace(/\\n$/, \"\").split(\"\\n\"),\n    [data.code],\n  );\n  const lineCount = lines.length;\n\n  const language = useMemo(\n    () =>\n      normalizeCodeLanguage(data.language) ??\n      inferLanguageFromFilename(data.filename),\n    [data.language, data.filename],\n  );\n\n  // Highlight each line once; empty lines keep their height with a NBSP.\n  const highlightedLines = useMemo(\n    () =>\n      lines.map((text) => (text.length ? highlightCode(text, language) : \" \")),\n    [lines, language],\n  );\n\n  const resolved = useMemo(\n    () => resolveAnnotations(data.annotations, () => lineCount),\n    [data.annotations, lineCount],\n  );\n\n  // line number (1-based) → resolved annotations covering it.\n  const lineMarkers = useMemo(() => buildLineMarkerMap(resolved), [resolved]);\n\n  const hasAnnotations = hasRailAnnotations(resolved);\n  const langChip = data.language?.trim();\n  const hasFilename = Boolean(data.filename?.trim());\n  const showLangChip = Boolean(langChip && !hasFilename);\n\n  // The resolved annotation whose card is currently shown on hover.\n  const activeItem =\n    useMemo<ResolvedAnnotation<AnnotatedCodeAnnotation> | null>(\n      () =>\n        activeIndex == null\n          ? null\n          : (resolved.find((item) => item.index === activeIndex) ?? null),\n      [activeIndex, resolved],\n    );\n\n  // Line-collapse state: a set of collapsed segment start lines that have been\n  // expanded by the reader. Starts empty (all segments in their default state).\n  const [expandedCollapsed, setExpandedCollapsed] = useState<Set<number>>(\n    () => new Set(),\n  );\n\n  const segments = useMemo(\n    () => buildLineSegments(lineCount, lineMarkers),\n    [lineCount, lineMarkers],\n  );\n\n  const renderLine = (lineNo: number) => {\n    const markers = lineMarkers.get(lineNo);\n    const isAnnotated = !!markers?.length;\n    const isActive =\n      activeIndex != null && !!markers?.some((m) => m.index === activeIndex);\n\n    const buildAnchorForRow = (el: HTMLElement) => {\n      if (!markers) return null;\n      const primaryMarker = markers[0];\n      const anchorLine = primaryMarker.range?.start ?? lineNo;\n      const anchorRow = lineRefs.current.get(anchorLine) ?? el;\n      return anchorFromElements(codeRef.current, anchorRow);\n    };\n\n    return (\n      <div\n        key={lineNo}\n        ref={(node) => setLineRef(lineNo, node)}\n        data-code-line={lineNo}\n        data-annot-row={isAnnotated ? markers?.[0].index : undefined}\n        tabIndex={isAnnotated ? 0 : undefined}\n        role={isAnnotated ? \"button\" : undefined}\n        aria-expanded={isAnnotated ? isActive : undefined}\n        aria-label={isAnnotated ? `Line ${lineNo} annotation` : undefined}\n        className={cn(\n          \"flex w-full\",\n          isAnnotated && \"cursor-pointer\",\n          isActive\n            ? \"bg-amber-400/20 dark:bg-amber-300/15\"\n            : isAnnotated\n              ? \"bg-amber-400/[0.07] dark:bg-amber-300/[0.07]\"\n              : null,\n        )}\n        onMouseEnter={\n          isAnnotated && markers\n            ? (event) => {\n                const anchor = buildAnchorForRow(event.currentTarget);\n                if (anchor) hover.open(markers[0].index, anchor);\n              }\n            : undefined\n        }\n        onMouseLeave={isAnnotated ? () => hover.scheduleClose() : undefined}\n        onClick={\n          isAnnotated && markers\n            ? (event) => {\n                const anchor = buildAnchorForRow(event.currentTarget);\n                if (anchor) hover.open(markers[0].index, anchor);\n              }\n            : undefined\n        }\n        onKeyDown={\n          isAnnotated && markers\n            ? (event) => {\n                if (event.key !== \"Enter\" && event.key !== \" \") return;\n                event.preventDefault();\n                const anchor = buildAnchorForRow(event.currentTarget);\n                if (anchor) hover.open(markers[0].index, anchor);\n              }\n            : undefined\n        }\n        onFocus={\n          isAnnotated && markers\n            ? (event) => {\n                const anchor = buildAnchorForRow(event.currentTarget);\n                if (anchor) hover.open(markers[0].index, anchor);\n              }\n            : undefined\n        }\n        onBlur={isAnnotated ? () => hover.scheduleClose() : undefined}\n      >\n        <span\n          aria-hidden\n          className={cn(\n            \"w-[3px] shrink-0 self-stretch\",\n            isAnnotated\n              ? isActive\n                ? \"bg-amber-500 dark:bg-amber-400\"\n                : \"bg-amber-400/45 dark:bg-amber-300/35\"\n              : null,\n          )}\n        />\n        <span className=\"w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60\">\n          {lineNo}\n        </span>\n        <span className=\"flex-1 whitespace-pre pr-4 text-plan-code-text\">\n          {highlightedLines[lineNo - 1]}\n        </span>\n      </div>\n    );\n  };\n\n  const codeSurface = (\n    <div\n      ref={codeRef}\n      className=\"overflow-hidden rounded-xl border border-plan-line bg-plan-code\"\n    >\n      {(hasFilename || showLangChip) && (\n        <div className=\"flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2\">\n          <IconCode className=\"size-3.5 shrink-0 text-plan-muted\" />\n          <CodeFilenameLabel\n            filename={data.filename}\n            className=\"text-[13px] font-medium\"\n            directoryClassName=\"text-plan-muted\"\n            basenameClassName=\"text-plan-code-text\"\n          />\n          {showLangChip && (\n            <span className=\"shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted\">\n              {langChip}\n            </span>\n          )}\n        </div>\n      )}\n      <div className=\"overflow-x-auto py-1.5\" data-code-surface>\n        <div className=\"min-w-full font-mono [font-size:var(--plan-doc-code-size)] leading-[22px]\">\n          {segments.map((seg) => {\n            if (seg.kind === \"visible\") {\n              const lineNos = Array.from(\n                { length: seg.endLine - seg.startLine + 1 },\n                (_, i) => seg.startLine + i,\n              );\n              return lineNos.map(renderLine);\n            }\n            // Collapsed segment — show an expander row.\n            const isExpanded = expandedCollapsed.has(seg.startLine);\n            const hiddenCount = seg.endLine - seg.startLine + 1;\n            if (isExpanded) {\n              const lineNos = Array.from(\n                { length: hiddenCount },\n                (_, i) => seg.startLine + i,\n              );\n              return lineNos.map(renderLine);\n            }\n            return (\n              <button\n                key={`collapse-${seg.startLine}`}\n                type=\"button\"\n                data-plan-interactive\n                onClick={() =>\n                  setExpandedCollapsed((prev) => {\n                    const next = new Set(prev);\n                    next.add(seg.startLine);\n                    return next;\n                  })\n                }\n                className=\"flex w-full cursor-pointer items-center gap-2 border-y border-plan-line/50 bg-plan-block/20 px-3 py-0.5 text-left hover:bg-plan-block/40\"\n              >\n                <span aria-hidden className=\"w-[3px] shrink-0 self-stretch\" />\n                <span className=\"w-8 shrink-0 select-none text-right text-[11px] tabular-nums text-plan-muted/40\">\n                  ···\n                </span>\n                <span className=\"flex-1 text-[11px] text-plan-muted/70\">\n                  {hiddenCount} lines — click to expand\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <section className=\"plan-block relative\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      {/* The code keeps its full width — no persistent annotation column. Notes\n          live in a visually-hidden stack (a11y + tests) and surface ONE at a\n          time as an on-hover popover anchored to the right of the code. */}\n      {codeSurface}\n      {hasAnnotations && <AnnotationHiddenStack items={resolved} ctx={ctx} />}\n      {hasAnnotations && activeItem && hover.anchor && (\n        <AnnotationHoverCard\n          item={activeItem}\n          anchor={hover.anchor}\n          ctx={ctx}\n          onMouseEnter={hover.cancelClose}\n          onMouseLeave={hover.scheduleClose}\n          onClose={hover.closeForScroll}\n        />\n      )}\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/* ── Edit (panel) ──────────────────────────────────────────────────────────── */\n\nconst codeAreaClass =\n  \"min-h-[160px] font-mono [font-size:var(--plan-code-size)] leading-5\";\n\nfunction AnnotatedCodeEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<AnnotatedCodeData>) {\n  const annotations = data.annotations ?? [];\n  const patch = (next: Partial<AnnotatedCodeData>) =>\n    onChange({ ...data, ...next });\n\n  const updateAnnotation = (\n    index: number,\n    next: Partial<AnnotatedCodeAnnotation>,\n  ) =>\n    patch({\n      annotations: annotations.map((annotation, i) =>\n        i === index ? { ...annotation, ...next } : annotation,\n      ),\n    });\n\n  const removeAnnotation = (index: number) =>\n    patch({ annotations: annotations.filter((_, i) => i !== index) });\n\n  const addAnnotation = () => {\n    if (annotations.length >= 80) return; // schema max\n    patch({\n      annotations: [...annotations, { lines: \"1\", label: \"\", note: \"\" }],\n    });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\" data-plan-interactive>\n      <div className=\"grid gap-3 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-filename\" className=\"text-xs\">\n            Filename\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-filename\"\n            value={data.filename ?? \"\"}\n            placeholder=\"src/server/auth.ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ filename: event.target.value || undefined })\n            }\n          />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-language\" className=\"text-xs\">\n            Language\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-language\"\n            value={data.language ?? \"\"}\n            placeholder=\"ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ language: event.target.value || undefined })\n            }\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        <DevLabel htmlFor=\"annotated-code-code\" className=\"text-xs\">\n          Code\n        </DevLabel>\n        <DevTextarea\n          id=\"annotated-code-code\"\n          spellCheck={false}\n          className={codeAreaClass}\n          value={data.code}\n          disabled={!editable}\n          onChange={(event) => patch({ code: event.target.value })}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel className=\"text-xs\">Annotations</DevLabel>\n          {editable && annotations.length < 80 && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={addAnnotation}\n              className=\"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-plan-muted transition-colors hover:bg-plan-block/60 hover:text-plan-text\"\n            >\n              <IconPlus className=\"size-3.5\" />\n              Add annotation\n            </button>\n          )}\n        </div>\n        {annotations.length === 0 && (\n          <p className=\"text-xs text-plan-muted\">\n            No annotations yet. Add one to anchor a note to a line range.\n          </p>\n        )}\n        {annotations.map((annotation, index) => (\n          <div\n            key={index}\n            className=\"flex flex-col gap-2 rounded-md border border-plan-line bg-plan-block/30 p-2\"\n          >\n            <div className=\"grid gap-2 sm:grid-cols-[120px_minmax(0,1fr)_auto]\">\n              <DevInput\n                aria-label={`Annotation ${index + 1} lines`}\n                value={annotation.lines}\n                placeholder=\"3-5\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, { lines: event.target.value })\n                }\n              />\n              <DevInput\n                aria-label={`Annotation ${index + 1} label`}\n                value={annotation.label ?? \"\"}\n                placeholder=\"Label (optional)\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, {\n                    label: event.target.value || undefined,\n                  })\n                }\n              />\n              {editable && (\n                <button\n                  type=\"button\"\n                  data-plan-interactive\n                  aria-label={`Remove annotation ${index + 1}`}\n                  onClick={() => removeAnnotation(index)}\n                  className=\"flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-plan-muted transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <IconTrash className=\"size-4\" />\n                </button>\n              )}\n            </div>\n            <DevTextarea\n              aria-label={`Annotation ${index + 1} note`}\n              className=\"min-h-[60px] text-sm\"\n              value={annotation.note}\n              placeholder=\"Explain what these lines do…\"\n              disabled={!editable}\n              onChange={(event) =>\n                updateAnnotation(index, { note: event.target.value })\n              }\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport { AnnotatedCodeRead, AnnotatedCodeEdit };\n"]}

package/dist/client/blocks/library/DiffBlock.js

@@ -619,7 +619,7 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
     const diffBox = (_jsxs("div", { ref: codeRef, className: "overflow-hidden rounded-md border border-border bg-background", children: [_jsxs("div", { className: "flex min-h-10 flex-wrap items-center gap-2 border-b border-border bg-muted/60 px-3 py-1.5", children: [_jsx(IconFileDiff, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1.5 font-mono", title: data.filename || undefined, children: [_jsx("span", { className: "min-w-0 max-w-[16rem] truncate text-[13px] font-semibold leading-5 text-foreground", children: fileParts.basename }), fileParts.directory && (_jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] leading-5 text-muted-foreground/70", children: fileParts.directory }))] }), _jsxs("span", { className: "ml-1 flex shrink-0 items-center gap-2 font-mono text-xs", children: [_jsxs("span", { className: "text-emerald-700 dark:text-emerald-300", children: ["+", added] }), _jsxs("span", { className: "text-destructive", children: ["\u2212", removed] })] }), canSplit && (_jsxs("div", { className: "pointer-events-none ml-auto flex shrink-0 items-center overflow-hidden rounded-md border border-border bg-background opacity-0 transition-opacity group-hover/diff-block:pointer-events-auto group-hover/diff-block:opacity-100 group-focus-within/diff-block:pointer-events-auto group-focus-within/diff-block:opacity-100", children: [_jsx(ModeButton, { active: mode === "unified", onClick: () => setMode("unified"), icon: _jsx(IconList, { className: "size-3.5" }), label: "Unified" }), _jsx(ModeButton, { active: mode === "split", onClick: () => setMode("split"), icon: _jsx(IconColumns, { className: "size-3.5" }), label: "Split" })] }))] }), unchanged ? (_jsx("div", { className: "px-4 py-6 text-center font-mono text-sm text-muted-foreground", children: "No changes" })) : effectiveMode === "split" ? (_jsx(SplitView, { rows: rows, language: language, rowLimit: rowLimit, markersForRow: markersForRow, activeIndex: activeIndex, onRowEnter: onRowEnter, onRowLeave: onRowLeave, onRowClick: onRowClick })) : (_jsx(UnifiedView, { rows: displayedRows, language: language, expanded: expanded, onToggleRun: toggleRun, markersForRow: markersForRow, anchoredRow: anchoredRow, activeIndex: activeIndex, onRowEnter: onRowEnter, onRowLeave: onRowLeave, onRowClick: onRowClick })), !unchanged && shouldLimitRows && (_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": showAllRows, onClick: () => setShowAllRows((current) => !current), className: "flex h-7 w-full items-center justify-center gap-1.5 border-t border-border bg-background px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3 shrink-0 transition-transform", showAllRows ? "-rotate-90" : "rotate-90") }), showAllRows
                         ? "Show fewer"
                         : `Show all ${totalVisibleLineCount} lines`] }))] }));
-    return (_jsxs("section", { ref: containerRef, className: "relative plan-block group/diff-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), summary && (_jsx("p", { className: "mb-3 text-sm leading-relaxed text-plan-muted", children: summary })), diffBox, hasAnnotations && (_jsx(AnnotationHiddenStack, { items: resolved, ctx: ctx, showMarker: true })), hasAnnotations && activeItem && hover.anchor && (_jsx(AnnotationHoverCard, { item: activeItem, anchor: hover.anchor, ctx: ctx, showMarker: true, onMouseEnter: hover.cancelClose, onMouseLeave: hover.scheduleClose, onClose: hover.close }))] }));
+    return (_jsxs("section", { ref: containerRef, className: "relative plan-block group/diff-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), summary && (_jsx("p", { className: "mb-3 text-sm leading-relaxed text-plan-muted", children: summary })), diffBox, hasAnnotations && (_jsx(AnnotationHiddenStack, { items: resolved, ctx: ctx, showMarker: true })), hasAnnotations && activeItem && hover.anchor && (_jsx(AnnotationHoverCard, { item: activeItem, anchor: hover.anchor, ctx: ctx, showMarker: true, onMouseEnter: hover.cancelClose, onMouseLeave: hover.scheduleClose, onClose: hover.closeForScroll }))] }));
 }
 function ModeButton({ active, onClick, icon, label, }) {
     return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, "aria-pressed": active, className: cn("flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-medium transition-colors", active