@the-portland-company/shell 0.68.1 → 0.70.0

package/CHANGELOG.md

@@ -1,3 +1,59 @@
+## 0.70.0 — 2026-10-06
+
+The top bar and left rail match Specs/Left-Navigation and Reference/UI-Platform.
+
+### Changed
+
+- **No Build notes control.** The top bar has exactly the five UI-Platform elements: search, Dev notes, Credits, Notifications, Help. `<PolitogyAppFrame>` no longer passes `buildNotes`; `NavTopBar` renders Build notes only when a caller passes the prop. (#101)
+- **The top bar fits a 390px phone.** Search shrinks below `md` (fixed 320px from `md` up), the `/` hint hides below `md`, and the header gap narrows. (#104)
+- **No hamburger on phone.** The top bar draws no hamburger. Below `md` the collapsed rail's logo tile is the expand control ("Expand navigation"); the drawer's close button is "Collapse navigation". The drawer itself is unchanged (Left-Navigation §11.6). The expand choice is remembered per user (`politogy_rail` cookie on `.politogyvrm.com` plus localStorage, via `readRailPreference` / `writeRailPreference` in `nav-preference`) and read back on the next load below `md`; a nav-link click closes the overlay without changing it. New `NavSidebar` props `onOpen` and `onNavigate`. `NavTopBar` still renders a hamburger for direct callers that pass `onOpenNav`. (#106, #108, #110)
+- **Lucide icons.** `standardNavIcons` maps every slot to Lucide (`react-icons/lu`); the mode switcher uses contact-round, megaphone and file-signature. New slots: `layoutDashboard`, `usersRound`, `mousePointerClick`, `clipboardList`, `circleUser`, `crosshair`, `landmark`, `chartNoAxes`, `doorOpen`, `signpost`. (#105, #106)
+- **Nav trees follow Left-Navigation §9.** Relationship: Relationship (Dashboard, Contacts, Email broadcast, SMS/MMS blast) · Collect (Calls to action, Forms, Surveys) · Account. Polls and CTAs rows removed. Campaign: Race data (Battleground, District data) · Research (Polling) · GOTV (Field canvassing, Phone banking, A2P texting, Sign mapping) · Account. Dashboard, Voter Contact and Tribes rows removed; Battleground is the landing row. A section left empty by availability flags is dropped. The Petition tree is unchanged. (#106)
+
+### Fixed
+
+- react-router 6.30.6 clears the publish audit gate (#102); lockfile regenerated with npm 10 so CI `npm ci` succeeds (#103).
+
+## 0.69.0 — 2026-10-04
+
+The left rail collapses instead of hiding, `<main>` is fluid, and there is one page tab strip. Implements Specs/Left-Navigation §11.6 and §5, the Brand guidelines "Content width is fluid", "Content body padding", "Tabs are an underlined strip" and "Logo standard", and the two "Known shell defect" notes in Reference/UI-Platform (Brand v135).
+
+### Changed
+
+- **The rail is never hidden.** `hidden … lg:flex` is gone. At `md` and up the rail is the full 236px rail; below `md` it collapses to the 64px icon rail. Content is offset by the rail at every width (`pl-[64px] md:pl-[236px]`). The collapse is pure CSS (`max-md:` utilities on one DOM tree), so there is no hydration flash and no second copy of the nav.
+  - Collapsed: `assets.logoSquare` at the top; the org card shrinks to the org's Brand Kit icon mark (32px, on its white tile) inside the **same switcher trigger**, so the org switcher stays interactive; the mode buttons stack; eyebrows become 1px dividers (the first is screen-reader only); rows show icons with a tooltip naming the row; counts, legal links and build metadata are hidden; the footer shows the avatar only.
+  - The top-bar hamburger now shows below `md` (was below `lg`) and expands the icon rail to the full rail as a drawer, exactly as before.
+  - New optional `NavOrg.iconUrl` / `NavOrgOption.iconUrl` (the Brand Kit icon mark); falls back to `logoUrl` scaled to fit, then initials.
+- **The rail logo is read at runtime from the Brand.** `<PolitogyAppFrame>` reads `assets.logoHorizontal` (the all-white lockup) and `assets.logoSquare` from the live token sheet (`--asset-logo-horizontal` / `--asset-logo-square`, emitted by `/api/tokens?format=css`) via the new `useBrandAssets()`. It is 24px tall (`sidebar.brandLogoHeight`), sits directly on the rail with no plate, and is the same lockup in every Mode. While the sheet loads the logo's box is reserved and nothing is drawn — never a stand-in. The frame no longer points at app-relative files under `/brand/logos/` (the bundled `relationship-mode-logo.png` / `petition-mode-logo.svg`); apps can delete them. New `NavBrand.logoSquareSrc` and `NavBrand.logoPending`.
+- **`<main>` is fluid.** The centered `main > .mx-auto.max-w-7xl` wrapper is removed; page content is a direct child of `<main>`. The gutter is 24px, or 16px below `md`, horizontally and vertically, with no max-width. (The chrome-owned title line, when the registry draws one, shares the same horizontal gutter and stays 22px above the content.)
+- **`NavTabStrip` is THE page tab strip, and it is now the underlined text strip.** Text tabs (13px semibold, 12px vertical padding; `size="sm"` for 12px / 8px) with an optional mono `count` pill, on a 1px G3 rule (`--tab-border-color`), 24px apart (`--tab-gap`). The selected tab is Graphite with a 2px underline in the mode color — `modes.<mode>.primary`, read as `var(--mode-accent, var(--color-accent))` — never `modes.<mode>.accent`, which is white. Unselected tabs are G4 and turn Graphite on hover. The icon-only folder geometry is retired: `NavTab.icon` is now optional, deprecated and not rendered. The optional `children` panel renders on the page surface with no card chrome.
+- **Favicons: no bundled fallback.** `politogyAppIcons()` / `toMetadataIcons()` return whatever `GET /api/icons/<app>` resolved (which ends at Brand `assets.favicon`). When the API is unreachable or returns no browser-tab icon they now return **empty** icon arrays instead of a hardcoded copy of an old `assets.logoSquare` upload.
+
+### Added
+
+- **`<FormColumn>`** — the one constrained layout inside the fluid `<main>`: a single left-aligned column, `max-width: 960px`, for form and settings pages. No width prop, no gutter of its own, never centered. Exported from the main entry and from `./native` (the same component), so an app needs no Chakra / react-router peer to use it.
+- `useBrandAssets()`, `readBrandAsset()` and `parseCssUrl()` in `src/lib/brandAssets.ts` (internal to the frame).
+
+### Deprecated
+
+Each warns once in the dev console (`NODE_ENV !== 'production'`); none is removed in this release.
+
+- **`HeaderTabBar`** — use `NavTabStrip` from `./native`. Why `NavTabStrip` is the canonical one: it has no Chakra or react-router dependency, so every app can import it whatever its framework; it renders `href` tabs through the app's own link primitive, so sub-views are URL-addressable; and it already carries tablist / tab / disabled semantics. `HeaderTabBar` is icon-only by construction (its label is only a Chakra tooltip), filled rather than underlined, and state-only.
+- **`PageContainer`** — apps never emit their own page container, a second `<main>`, a max-width or an `mx-auto` wrapper. Render content directly inside the frame; use `<FormColumn>` for form and settings pages.
+- **`BreadcrumbBar`** — the breadcrumb trail is retired.
+- **`NavAppShellProps.contentWrapper`** — `'bare'` is still honored (so VRM core, which renders `NavAppShell` directly around pages that still carry `PageContainer`, does not get a nested `<main>`), and warns. `'padded'` is now the same as omitting it.
+- **`PolitogyCoreFrame.brandLogoSrc`** — ignored; the logo comes from the Brand. **`VRM_FALLBACK_ICON`** — unused; will be removed.
+
+### Removed
+
+- **The `contentWrapper` registry grant.** `PolitogyFrameGrant` is now `'breadcrumbs' | 'title'`, and Petitions' row grants exactly those two. `PolitogyFrameData.frame.contentWrapper` is still typed (so an app that passes it keeps compiling) but is ignored and warns in dev. **Petitions must drop its own `PageContainer` when it takes this version**, or its pages render a `<main>` inside the frame's `<main>` with a doubled gutter.
+
+### Not in this release
+
+- The dark theme that 0.68.0 re-added (a "Known shell defect" in Reference/UI-Platform) is untouched here; it is removed separately.
+- A user-controlled collapse/expand toggle at `md` and up (Left-Navigation §11.6, "the choice is remembered per user") is not built; this release covers the breakpoint behaviour.
+- `--sidebar-collapsed-width` is read with a `64px` fallback; the Brand sheet does not emit it yet.
+
 ## 0.68.1 — 2026-10-03
 
 ### Fixed

package/README.md

@@ -139,7 +139,10 @@ All `<ShellChrome>` props are optional — only supply what your app has. The ch
 | `<BrandLogo>` | `<img>` wrapper for the branded mode logo. |
 | `<BrandIcon name="...">` | Renders `/brand/icons/<name>.svg` from your `public/`. |
 | `<CommitCopyButton>` | Footer commit/version display with copy-to-clipboard. |
-| `<Card>`, `<PageContainer>`, `<PageHeader>`, `<BreadcrumbBar>`, `<HeaderTabBar>` | Page-level layout primitives. |
+| `<Card>`, `<PageHeader>` | Page-level layout primitives. |
+| `<FormColumn>` | The one constrained layout inside the frame's fluid `<main>`: a left-aligned column, `max-width: 960px`, for form and settings pages. Also exported from `./native`. |
+| `<NavTabStrip>` (from `./native`) | The canonical page tab strip: underlined text tabs with a 2px underline in the mode color. Render it in the page body, below the page header. |
+| `<PageContainer>`, `<BreadcrumbBar>`, `<HeaderTabBar>` | **Deprecated for apps** (each warns in dev). The frame owns a fluid `<main>` (24px gutter, 16px below `md`, no max-width); there are no breadcrumbs; the tab strip is `NavTabStrip`. |
 | `<GlobalUiIdProvider>` | Assigns stable UI IDs (for testing/analytics). |
 
 ### Hooks

package/dist/FormColumn-DsNP6NVG.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type FormColumnProps = {
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * The ONE constrained layout inside the frame's fluid `<main>` (Brand guideline
+ * "Content width is fluid"): a single left-aligned column, 960px max, for form
+ * and settings pages — single-record edit forms, Organization Settings tabs,
+ * My Profile, activation and setup flows. Data surfaces (tables, dashboards,
+ * maps) never use it; they take the full fluid width.
+ *
+ * It adds no gutter of its own — `<main>` already owns the 24px / 16px gutter —
+ * and it is never centered. There is no width prop on purpose: a per-page
+ * max-width is exactly what the guideline forbids.
+ */
+declare function FormColumn({ children, className }: FormColumnProps): react_jsx_runtime.JSX.Element;
+
+export { FormColumn as F };

package/dist/FormColumn-DsNP6NVG.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type FormColumnProps = {
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * The ONE constrained layout inside the frame's fluid `<main>` (Brand guideline
+ * "Content width is fluid"): a single left-aligned column, 960px max, for form
+ * and settings pages — single-record edit forms, Organization Settings tabs,
+ * My Profile, activation and setup flows. Data surfaces (tables, dashboards,
+ * maps) never use it; they take the full fluid width.
+ *
+ * It adds no gutter of its own — `<main>` already owns the 24px / 16px gutter —
+ * and it is never centered. There is no width prop on purpose: a per-page
+ * max-width is exactly what the guideline forbids.
+ */
+declare function FormColumn({ children, className }: FormColumnProps): react_jsx_runtime.JSX.Element;
+
+export { FormColumn as F };