Canopy 0.2.0

The Branches layer (organisms) is here. This release opens a new @rogueoak/canopy/branches subpath and ships its first three components — Dialog, TopNav, and SideNav — each composing existing Seeds and Twigs, themed entirely through the token layer (light/dark, no per-component theme code).

Lockstep release: @rogueoak/roots and @rogueoak/canopy both publish at 0.2.0.

✨ New: the Branches layer

• Dialog — a portalled, focus-trapping modal on @radix-ui/react-dialog (trigger / content with a built-in close / header / footer / title / description). Reuses the pre-provisioned color-overlay scrim and the raised-surface pattern; Esc / overlay / close-button dismiss; reduced-motion-safe.
• TopNav — a responsive top navigation bar (TopNav / Brand / Links / Link / Actions / MenuButton). Links collapse behind a ☰ disclosure below md with aria-expanded / aria-controls, Esc + outside-click dismiss, and focus-return. active links set aria-current="page" in lockstep with styling.
• SideNav — a collapsible side rail (SideNav / Header / Footer / Section / Item / Trigger / CollapseToggle + a useSideNavCollapsed() hook). Desktop collapses to an icon rail (labels move into Tooltips); below 768px it becomes an off-canvas drawer (built on the Radix dialog primitive — focus trap, scrim, slide-in motion, visible close button). Renders the nav landmark once.

🎨 Roots (@rogueoak/roots@0.2.0)

• The Tailwind preset now ships overlay/drawer motion utilities (animate-dialog-*, animate-drawer-*), composed from the existing --duration-* / --ease-* tokens — so animation travels with the preset every consumer already imports (no extra wiring). Adds no new design token.

📦 Install

npm i @rogueoak/canopy@0.2.0 @rogueoak/roots@0.2.0

import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@rogueoak/canopy/branches';
import { TopNav, TopNavBrand, TopNavLink } from '@rogueoak/canopy/branches';
import { SideNav, SideNavItem, SideNavSection } from '@rogueoak/canopy/branches';

No styling-seam change — the existing @source '@rogueoak/canopy' already covers the new files.

🧩 What's in this release

• Dialog + Branches layer infra (#29, spec 0024)
• TopNav (#30, spec 0025)
• SideNav (#31, spec 0026)

Full changelog: 0.1.2...0.2.0

Canopy 0.1.2

First fully-automated release of the Canopy design system. Both packages are published to npm under the @rogueoak scope via the new tag-driven pipeline.

📦 Packages

Package	Version	Install
@rogueoak/roots	0.1.2	pnpm add @rogueoak/roots
@rogueoak/canopy	0.1.2	pnpm add @rogueoak/canopy

@rogueoak/canopy depends on @rogueoak/roots@0.1.2. React 19 is a peer dependency.

🚀 What's new — tag-driven publishing (spec 0023)

Publishing is now on, and a git tag is the release:

• Push a strict bare-SemVer tag (X.Y.Z, no v prefix) → CI publishes both packages at that version, lockstep, in dependency order (roots → canopy).
• Authenticated with npm trusted publishing (OIDC) — no long-lived NPM_TOKEN.
• A pnpm test gate runs before publish; the build is always fresh (no stale dist); workspace:* is rewritten to the real version on publish.
• Changesets has been retired in favour of this flow.

See docs/specs/0023-npm-publishing.md.

🌳 What's inside

• Roots 🌱 — design tokens (colour, type, spacing, radii, elevation, motion) as CSS variables, a typed TS export, and a Tailwind v4 preset. Light/dark theming lives entirely in the token layer.
• Seeds (atoms) — Button, Input, Label, Badge, Checkbox, Switch, RadioGroup, Textarea, Select, Tooltip, Avatar, Separator, Spinner, Skeleton, Keyboard.
• Twigs (molecules) — FormField, SearchBar, Card.

Exposed via subpath exports: @rogueoak/canopy/seeds, @rogueoak/canopy/twigs, and @rogueoak/roots/tokens.css · @rogueoak/roots/tailwind-preset.css.

⚡ Quick start

```bash
pnpm add @rogueoak/canopy @rogueoak/roots react react-dom
```

```css
/* global stylesheet */
@import '@rogueoak/roots/tokens.css';
@import '@rogueoak/roots/tailwind-preset.css';
```

```tsx
import { Button } from '@rogueoak/canopy/seeds';

export const App = () => Plant a seed;
```

📖 Storybook · README

---

Note: @rogueoak/roots@0.1.1 exists as an interim artifact from bootstrapping the pipeline and is unused — start from 0.1.2, the first matched release of both packages.