nshki · Oct 30, 2026 · Oct 29, 2026 · Oct 30, 2026 · Oct 30, 2026 · Oct 30, 2026
@@ -16,7 +16,7 @@ it("resolves the marketplace's relative source to the shipped plugin", async ()
   )
   const manifest = JSON.parse(await readFile(new URL(`${plugin.source}/plugin.json`, root)))
   assert.equal(manifest.name, plugin.name)
-  assert.equal(manifest.version, "1.5.3")
+  assert.equal(manifest.version, "1.5.4")
   const skill = await readFile(
     new URL(`${plugin.source}/skills/replica-publish-prototype/SKILL.md`, root),
     "utf8",

@@ -2,7 +2,7 @@
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "replica-prototype",
   "description": "Wrap a running prototype with Replica publish controls and repository status.",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "author": {
     "name": "GitHub"
   },

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { lazy, Suspense, useCallback, useLayoutEffect, useRef, useState } from "react"
 
 import { AppDialogs } from "@features/prototype-canvas-dialogs"

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"
-import { describe, expect, it, vi } from "vitest"
+import { beforeAll, describe, expect, it, vi } from "vitest"
 import { z } from "zod"
 
 import { octocatRootComment } from "@/storybook/fixtures/review/comments"
@@ -13,6 +13,11 @@ import { importedPrototype, publicationHub } from "@utils/resolve-prototype-publ
 import { App } from ".."
 import { sharingFixture } from "./sharing-fixture"
 
+// Keep cold loading of the real lazy feature outside the interaction test budget.
+beforeAll(async () => {
+  await import("@features/prototype-canvas-improvement-notes")
+})
+
 function reviewFixture() {
   const { fetch } = sharingFixture(undefined, {
     ...publicationHub,

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react"
 import { describe, expect, it, vi } from "vitest"
 
 import { BuildStateLabel } from "."
-vi.mock("@primer/react-brand", () => ({
+vi.mock("@primer/react-brand/esm", () => ({
   Label: ({ children, color }: { children: string; color: string }) => (
     <span data-color={color}>{children}</span>
   ),

@@ -1,4 +1,4 @@
-import { Label } from "@primer/react-brand"
+import { Label } from "@primer/react-brand/esm"
 
 import type { BuildStateLabelProps } from "./types"
 

@@ -1,5 +1,5 @@
 import { XIcon } from "@primer/octicons-react"
-import { Heading } from "@primer/react-brand"
+import { Heading } from "@primer/react-brand/esm"
 import { useEffect, useId, useRef } from "react"
 import type { KeyboardEvent } from "react"
 

@@ -1,5 +1,5 @@
 import { CopyIcon } from "@primer/octicons-react"
-import { Button, InlineLink, Text } from "@primer/react-brand"
+import { Button, InlineLink, Text } from "@primer/react-brand/esm"
 import { useState } from "react"
 import type { MouseEvent } from "react"
 

@@ -1,5 +1,5 @@
 import { CopyIcon } from "@primer/octicons-react"
-import { TextInput } from "@primer/react-brand"
+import { TextInput } from "@primer/react-brand/esm"
 import { useState } from "react"
 
 import { HubIconButton } from "@components/hub-icon-button"

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from "react"
 
-import { Timeline } from "@primer/react-brand"
+import { Timeline } from "@primer/react-brand/esm"
 
 export type HubActivityTimelineItem = {
   id: string

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, ReactNode } from "react"
 
 import { AlertIcon, CheckCircleIcon, InfoIcon, StopIcon, XIcon } from "@primer/octicons-react"
-import { Text } from "@primer/react-brand"
+import { Text } from "@primer/react-brand/esm"
 
 import { HubIconButton } from "../hub-icon-button"
 

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { Button } from "@primer/react-brand"
+import { Button } from "@primer/react-brand/esm"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { HubAlert } from "."

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from "react"
 
-import { Heading, Text } from "@primer/react-brand"
+import { Heading, Text } from "@primer/react-brand/esm"
 
 import "./styles.css"
 

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { Button } from "@primer/react-brand"
+import { Button } from "@primer/react-brand/esm"
 import type { CSSProperties } from "react"
 
 import { HubCounter } from "."

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from "react"
 
-import { Button, Heading, Text } from "@primer/react-brand"
+import { Button, Heading, Text } from "@primer/react-brand/esm"
 
 import "./styles.css"
 

@@ -1,7 +1,7 @@
 import { useId } from "react"
 import type { ComponentPropsWithRef, ElementType } from "react"
 
-import { Button, Tooltip } from "@primer/react-brand"
+import { Button, Tooltip } from "@primer/react-brand/esm"
 
 import { HubSpinner } from "../hub-spinner"
 import { HubVisuallyHidden } from "../hub-visually-hidden"

@@ -1,6 +1,6 @@
 import { useId } from "react"
 
-import { Radio } from "@primer/react-brand"
+import { Radio } from "@primer/react-brand/esm"
 
 import { HubVisuallyHidden } from "../hub-visually-hidden"
 

@@ -1,5 +1,5 @@
 import { XIcon } from "@primer/octicons-react"
-import { Heading } from "@primer/react-brand"
+import { Heading } from "@primer/react-brand/esm"
 
 import { HubIconButton } from "../hub-icon-button"
 import type { HubSidebarProps } from "./types"

@@ -1,4 +1,4 @@
-import { Button } from "@primer/react-brand"
+import { Button } from "@primer/react-brand/esm"
 import { useState, type ComponentProps } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 

@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes } from "react"
 
-import { Checkbox } from "@primer/react-brand"
+import { Checkbox } from "@primer/react-brand/esm"
 
 import "./styles.css"
 

@@ -1,4 +1,4 @@
-import { Avatar } from "@primer/react-brand"
+import { Avatar } from "@primer/react-brand/esm"
 
 import "./styles.css"
 

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { fireEvent, render, screen } from "@testing-library/react"
 import { expect, it, vi } from "vitest"
 

@@ -1,5 +1,5 @@
 import { SyncIcon } from "@primer/octicons-react"
-import { Button, InlineLink } from "@primer/react-brand"
+import { Button, InlineLink } from "@primer/react-brand/esm"
 
 import { HubAlert } from "@components/hub-alert"
 

@@ -1,11 +1,9 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
-import { afterEach, expect, it, vi } from "vitest"
+import { expect, it, vi } from "vitest"
 
 import { BrowserBar } from "."
 import browserStyles from "./styles.css?inline"
 
-afterEach(() => vi.unstubAllGlobals())
-
 const address = "http://localhost:5173/#/cli/cli/tree/main"
 
 function renderBar(onNavigate = vi.fn(), appearance: "light" | "dark" = "light") {
@@ -26,33 +24,19 @@ function renderBar(onNavigate = vi.fn(), appearance: "light" | "dark" = "light")
   return onNavigate
 }
 
-it.each(["light", "dark"] as const)(
-  "uses the system's %s fallback independently of the selected prototype appearance",
-  (mode) => {
-    vi.stubGlobal(
-      "matchMedia",
-      vi.fn((query: string) => ({
-        matches: query === "(prefers-color-scheme: dark)" && mode === "dark",
-        media: query,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-      })),
-    )
-    renderBar(vi.fn(), mode === "light" ? "dark" : "light")
-    const theme = screen
-      .getByRole("navigation", { name: "Prototype navigation" })
-      .closest("[data-color-mode]")
-    expect(theme).toHaveAttribute("data-color-mode", mode)
-    expect(browserStyles).toContain(
-      "--hub-canvas-default: var(--background-color-default, var(--brand-color-canvas-default));",
-    )
-    expect(browserStyles).toContain(
-      "--hub-fg-default: var(--text-color-default, var(--brand-color-text-default));",
-    )
-    expect(browserStyles).toContain('html[data-color-mode="dark"] .canvas-browser-bar')
-    expect(browserStyles).toContain('body[data-color-mode="light"] .canvas-browser-bar')
-  },
-)
+it("keeps native controls on the system theme independently of the prototype appearance", () => {
+  render(<style>{browserStyles}</style>)
+  renderBar(vi.fn(), "dark")
+  const theme = screen
+    .getByRole("navigation", { name: "Prototype navigation" })
+    .closest("[data-color-mode]")
+  expect(theme).toHaveAttribute("data-color-mode", "auto")
+  expect(theme).toHaveStyle("color-scheme: light dark")
+  expect(screen.getByRole("button", { name: "Dark appearance" })).toHaveAttribute(
+    "aria-pressed",
+    "true",
+  )
+})
 
 it("keeps navigation on the prototype origin and reports invalid addresses", () => {
   const navigate = renderBar()

@@ -7,7 +7,7 @@ import {
   SyncIcon,
 } from "@primer/octicons-react"
 import { useState, type Ref, type SubmitEvent } from "react"
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 
 import { copy } from "@utils/prototype-canvas/en"
 

@@ -1,5 +1,5 @@
 .canvas-browser-theme {
-  color-scheme: light;
+  color-scheme: light dark;
 }
 
 .canvas-browser-theme[data-color-mode="dark"] {

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { createRef, useState } from "react"
 import { beforeAll, describe, expect, it, vi } from "vitest"
 

@@ -1,5 +1,5 @@
 import { CheckIcon, CopyIcon, GitBranchIcon } from "@primer/octicons-react"
-import { Button } from "@primer/react-brand"
+import { Button } from "@primer/react-brand/esm"
 import { useState, type RefObject } from "react"
 
 import { CanvasDialog } from "../prototype-canvas-dialog"

@@ -1,5 +1,5 @@
 import { XIcon } from "@primer/octicons-react"
-import { Heading } from "@primer/react-brand"
+import { Heading } from "@primer/react-brand/esm"
 import {
   useCallback,
   useContext,

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { createRef } from "react"
 import { describe, expect, it, vi } from "vitest"
 

@@ -7,7 +7,7 @@ import {
   SyncIcon,
   UploadIcon,
 } from "@primer/octicons-react"
-import { ActionMenu, Button, Tooltip } from "@primer/react-brand"
+import { ActionMenu, Button, Tooltip } from "@primer/react-brand/esm"
 import type { ComponentProps, Ref, RefObject } from "react"
 
 import { ControlsToggle } from "../prototype-controls-toggle"

@@ -1,5 +1,5 @@
 import { ArrowUpRightIcon, GitBranchIcon } from "@primer/octicons-react"
-import { Label } from "@primer/react-brand"
+import { Label } from "@primer/react-brand/esm"
 
 import { BuildStateLabel } from "@components/build-state-label"
 import { HubUserAvatar } from "@components/hub-user-avatar"

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { fireEvent, render, screen } from "@testing-library/react"
 import { beforeAll, describe, expect, it, vi } from "vitest"
 import { CommentingRecovery } from "."

@@ -1,4 +1,4 @@
-import { Button } from "@primer/react-brand"
+import { Button } from "@primer/react-brand/esm"
 import { useId } from "react"
 
 import { CanvasDialog } from "../prototype-canvas-dialog"

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { Button } from "@primer/react-brand"
+import { Button } from "@primer/react-brand/esm"
 import { useState, type ComponentProps } from "react"
 import { CommentingRecovery } from "."
 

@@ -6,7 +6,7 @@ import {
   RadioGroup,
   Select,
   Text,
-} from "@primer/react-brand"
+} from "@primer/react-brand/esm"
 
 import { HubVisuallyHidden } from "@components/hub-visually-hidden"
 

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, it } from "vitest"
 

@@ -1,4 +1,4 @@
-import { FormControl, Textarea, TextInput } from "@primer/react-brand"
+import { FormControl, Textarea, TextInput } from "@primer/react-brand/esm"
 import { useState, type ChangeEvent, type CSSProperties } from "react"
 
 import { valueIssue, type Control } from "@utils/prototype-controls/controls.mjs"

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { fireEvent, render, screen, within } from "@testing-library/react"
 import { describe, expect, it } from "vitest"
 

@@ -1,5 +1,5 @@
 import { ChevronDownIcon, ChevronRightIcon } from "@primer/octicons-react"
-import { Button, Text } from "@primer/react-brand"
+import { Button, Text } from "@primer/react-brand/esm"
 import { Fragment, useId, useLayoutEffect, useRef, useState, type MouseEvent } from "react"
 
 import type { Control } from "@utils/prototype-controls/controls.mjs"

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"
 import { afterEach, describe, expect, it, vi } from "vitest"
 

@@ -1,4 +1,4 @@
-import { Button, Heading, Text } from "@primer/react-brand"
+import { Button, Heading, Text } from "@primer/react-brand/esm"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { useEffect, useState, useSyncExternalStore } from "react"
 

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { fireEvent, render, screen, waitFor, within } from "@testing-library/react"
 import { beforeAll, describe, expect, it } from "vitest"
 

@@ -1,4 +1,4 @@
-import { Button, Heading, Text } from "@primer/react-brand"
+import { Button, Heading, Text } from "@primer/react-brand/esm"
 import { useEffect, useState, useSyncExternalStore } from "react"
 
 import { createControls } from "@utils/prototype-controls/controls.mjs"

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@primer/react-brand"
+import { ThemeProvider } from "@primer/react-brand/esm"
 import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"
 import { useState } from "react"
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest"