Restore catalog navigation and use compact-only sizing

[BunsDev]

Summary

• Restore the complete grouped component sidebar, original sidebar/content widths, and right context rail.
• Keep navigation aligned with search, direct links, page scrolling, and mobile selection without remounting previews; remove invalid fragments when filtering hides their targets.
• Use compact sizing exclusively in Library and Lab; remove density controls, labels, and obsolete preferences.

Validation

• 18 targeted navigation, source, and Lab tests passed locally.
• Full repository CI (pnpm check) passed on the final head: https://github.com/OpenCoven/ui/actions/runs/34462792389
• Linux browser review passed with 25 scenarios and nine mobile cases: https://github.com/OpenCoven/ui/actions/runs/34462792437
• Automated review observations are addressed in 7391d51; regressions cover invalid fragments and preview-owned state survival.
• The primary opencoven-ui Vercel deployment is Ready.

Existing deployment issue

The separate Vercel ui project retains the pre-existing No Output Directory named "dist" found failure documented in #7, after running the library build. No deployment settings or branch protections were changed.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
opencoven-ui	Ready	Preview	Sep 10, 2026 9:50am UTC
ui	Error		Sep 10, 2026 9:50am UTC

[Copilot]

🔵 Needs a closer look

Resolve the stale-hash behavior and strengthen the remount-survival test.

Pull request overview

Restores grouped catalog navigation and responsive layout while standardizing Library and Lab on compact sizing.

Changes:

• Restores sidebar, context rail, mobile picker, and hash navigation.
• Removes density controls and persisted density preferences.
• Expands navigation, contract, visual, mobile, and documentation coverage.

File summaries

File	Reviewed changes	Findings
scripts/visual-review.mjs	Layout and navigation validation	—
scripts/verify-contracts.mjs	Catalog and sizing contract updates	—
scripts/mobile-quality-review.mjs	Mobile navigation and sizing checks	—
README.md	Catalog layout and sizing documentation	—
packages/ui/tests/catalog-navigation.test.tsx	Catalog navigation coverage	Moderate (1 vote): does not verify preview state survives remounting.
apps/specimens/src/specimens.css	Shell, rail, picker, and responsive styles	—
apps/specimens/src/specimens-fixes.css	Responsive safeguard updates	—
apps/specimens/src/lab.css	Removes density-control styling	—
apps/specimens/src/app.tsx	Catalog navigation, hash handling, and compact sizing	Moderate (1 vote): stale hashes can desynchronize the URL, selection, and visible component after filtering.
apps/specimens/index.html	Sets compact initial density	—

Review details

Suppressed comments (2)

apps/specimens/src/app.tsx:500

• When search removes the component named by the current hash, this handler falls back to library-overview but leaves the stale fragment in the URL. Clearing the search then recreates that target without scrolling to it, and the next onScroll can overwrite activeId, so the URL, selected sidebar entry, and visible component diverge. Clear/replace an invalid hash when filtering removes its target, or explicitly restore and scroll to it when the target reappears.

    const onHashChange = () => {
      const id = window.location.hash.slice(1);
      setActiveId(
        document
          .getElementById(id)

packages/ui/tests/catalog-navigation.test.tsx:148

• This test does not actually verify the “without remounting previews” behavior it names: ModeSwitch is controlled by useSpecimens, so its aria-pressed value can remain true even if the preview subtree remounts. Seed state owned by a preview (for example the Composer draft or an open source tab), navigate via the picker/hash, and assert that state survives.

  it("navigates from the mobile picker and follows hash history without remounting previews", async () => {
    const { container } = render(<App />);
    const mode = within(
      container.querySelector("#mode-switch")! as HTMLElement,
    );
    fireEvent.click(mode.getByRole("button", { name: "chat" }));
    fireEvent.change(
      screen.getByRole("combobox", { name: "Jump to component" }),
      {
        target: { value: "send-control" },
      },
    );
    expect(window.location.hash).toBe("#send-control");
    const navigation = screen.getByRole("navigation", {
      name: "Component navigation",
    });
    await waitFor(() =>
      expect(
        within(navigation).getByRole("link", { name: "Send control" }),
      ).toHaveAttribute("aria-current", "location"),
    );
    act(() => {
      window.history.replaceState(null, "", "#mode-switch");
      window.dispatchEvent(new HashChangeEvent("hashchange"));
    });
    expect(
      screen.getByRole("combobox", { name: "Jump to component" }),
    ).toHaveValue("mode-switch");
    expect(mode.getByRole("button", { name: "chat" })).toHaveAttribute(
      "aria-pressed",
      "true",
    );

• Files reviewed: 10/10 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[BunsDev]

Addressed both review observations in 7391d51:

• Reproduced the stale fragment after filtering, then cleared invalid fragments with history.replaceState while preserving the query string and history state. Added unit and browser coverage.
• Strengthened navigation coverage with state owned inside the Composer preview: its draft, open Source tab, and mounted elements survive picker/hash navigation.

All 18 targeted tests pass; fresh CI and browser checks are running.