@the-portland-company/shell 0.89.0 → 0.91.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## 0.91.0
+
+Reverts the 0.88.0 and 0.89.0 shared form set (Ben 2026-10-24: restore the look from before the 10-22/23 shell wave; keep the 0.90.0 PageHeader, which matches the Spec). No live app uses 0.88 or newer.
+
+- **Removed** `Button`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput`, `FormField` and their types, from the root and `/native`.
+- **Card** is back to its 0.87 form (plain padded box, `title` as an h3); the `--app-card-*` tokens are gone from chrome.css.
+- **Theme.** The native-field border rule applies to every text-like control again (no `data-shell-field` exemption).
+- **ESLint guard removed** (`@the-portland-company/shell/eslint`, its peer and dev dependency): its rules required the removed primitives.
+- **Kept:** the 0.90.0 PageHeader, the router-agnostic PageHeader / BreadcrumbBar split and their `/native` exports (with `Card`, `HeaderTabBar`), and the `shell-version-check` bin.
+
+## 0.90.0
+
+`PageHeader` matches the Spec (Reference/UI-Platform "Page header" and "Page header and width").
+
+- **Surface and color.** The filled `--app-tab-header-bg` bar, white title, `text-slate-100` and bottom border are gone: the header sits on the page background and the title is Graphite (`--color-text`, fallback `#2F3136`). The title is now an `h1`.
+- **Breadcrumbs.** The `breadcrumbs` prop is deprecated: accepted, renders nothing, `console.warn` once in dev.
+- **Eyebrow.** Reads the mode color through `--color-accent-fg`, which follows the Mode's stamped primary (`--mode-accent`, the same token the tab strip uses for `modes.<mode>.primary`) and is pinned AA-safe for Petition. Never the white `modes.<mode>.accent`.
+- **Spacing.** 22px above the header; 24px desktop gutter, 16px below `md`. `md:ml-60` sidebar offset unchanged.
+- **Width.** `maxW` is deprecated and ignored (warns once in dev); the header spans its container.
+- **Email guard.** A string `title` / `subtitle` containing an email address warns once in dev.
+- Unchanged: 30px bold title, 11px uppercase eyebrow, 15px G4 subtitle, actions right, tabBar beneath.
+- Tests: `__tests__/pageHeaderEyebrow.test.tsx`.
+
 ## 0.89.0
 
 Card follows the theme, and the form set gains Checkbox and FileInput. Follow-up to the 0.88.0 migrations.

package/README.md

@@ -139,7 +139,8 @@ 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>`, `<PageHeader>` | Page-level layout primitives. |
+| `<Card>` | Page-level layout primitive. |
+| `<PageHeader>` | The page header (Reference/UI-Platform → "Page header"): no filled surface, 22px below the top bar, 24px gutter (16px below `md`), spans its container. Eyebrow in the mode color, 30px bold Graphite `h1` title, 15px G4 subtitle, `actions` right, `tabBar` beneath. `breadcrumbs` and `maxW` are **deprecated** (accepted, ignored, warn once in dev); width comes from `FormColumn` (960px) or the fluid frame. Warns in dev if `title` / `subtitle` is a string holding an email address. |
 | `<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`. |
@@ -171,56 +172,13 @@ All `<ShellChrome>` props are optional — only supply what your app has. The ch
 
 ---
 
-## Form primitives
+## Page primitives on `native`
 
-Shared `Button`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput` and `Card`, styled from the shell's tokens (`--app-btn-*`, `--app-field-*`, `--color-*`). 5px radius, 12px horizontal padding.
+`PageHeader`, `Card`, `FormColumn`, and the deprecated `BreadcrumbBar` and `HeaderTabBar` are also exported from `@the-portland-company/shell/native`, which needs no Chakra or react-router peer.
 
-| Export | Props |
-|---|---|
-| `<Button>` | `variant`: `primary` (default) \| `secondary` \| `ghost` \| `danger`; `size`: `md` (44px, default) \| `sm` (36px); `loading` (spinner, `aria-busy`, blocks clicks); `disabled`; `href` or `as` for a link-button (e.g. `as={Link} to="/x"`); `type` defaults to `button`; forwards its ref. |
-| `<Input>` | All native input props plus `label`, `helperText`, `error`, `invalid`, `wrapperClassName`. 44px tall. Forwards its ref to the `<input>`. |
-| `<Select>` | Same as `Input`, with `<option>` children. 44px tall. Forwards its ref to the `<select>`. |
-| `<Textarea>` | Same as `Input`, 88px minimum height. Forwards its ref to the `<textarea>`. |
-| `<Checkbox>` | All native checkbox props plus `label`, `description`, `indeterminate`, `invalid`, `wrapperClassName`. The whole row is a 44px touch target; accent fill; `data-shell-field`. Forwards its ref to the `<input>`. |
-| `<FileInput>` | The `type="file"` control: `label`, `helperText`, `error`, `invalid`, `accept`, `multiple`, `wrapperClassName`. 44px tall. Forwards its ref. `Input` does not accept `type="file"` or `"checkbox"`. |
-| `<Card>` | `title`, `subtitle`, `aside`, `actions`, `footer`, `bodyClassName`, `padding` (`none \| sm \| md \| lg`, default `md`), `minH`, plus any div props. Plain `<Card title>` is a padded box with an h3; any of `subtitle`, `aside`, `actions`, `footer`, `bodyClassName` gives a bordered header / body / footer. |
-
-**Card and dark mode.** Card and Checkbox read `--app-card-bg`, `--app-card-border`, `--app-card-fg` and `--app-card-fg-muted` from `chrome.css`: light on `:root`, dark under `.dark`. Do not paint a card white in app CSS; override these tokens if an app needs a different surface.
-
-An `error` message marks the control invalid (`aria-invalid`, red border) and replaces the helper text; the label, helper and error are wired with `htmlFor` and `aria-describedby`.
-
-These primitives (and `Card`, `PageHeader`, `FormColumn`) are also exported from `@the-portland-company/shell/native`, which needs no Chakra or react-router peer. Apps without those peers should import from `native`.
-
-**Rule:** apps must use these instead of a local `Button`, `Input`, `Select` or `Textarea`. Do not hand-roll form controls or button styles in an app; if a control needs a new variant or state, add it here so every app gets it.
-
-## Enforcement
-
-Spec: Components — shared primitives are mandatory. Apps must not hand-roll Button/Card/Input/Select/Textarea, and must not fall behind the shell version. Both are checked mechanically.
-
-Adopt in three lines:
-
-```js
-// eslint.config.js (ESLint 9+ flat config)
-import shell from '@the-portland-company/shell/eslint'
-export default [...shell.configs.recommended /* , your other configs */]
-```
-
-```json
-// package.json
-{ "scripts": { "lint": "eslint . && shell-version-check" } }
-```
-
-Run `shell-version-check` in CI too (it is a package `bin`, so `npx shell-version-check` works after install).
-
-| Rule (`politogy-shell/…`) | Fails on |
-|---|---|
-| `no-local-primitives` | Declaring or exporting a local `Button`, `Card`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput`, `PageHeader` or `FormColumn` (re-exports from the shell are fine). |
-| `no-raw-control-styling` | JSX `<button>`, `<input>`, `<select>`, `<textarea>` with `className` or `style`. Allowed in a file that imports the shell primitive of the same kind (wrapping). `<input type="checkbox">` needs `Checkbox` and `<input type="file">` needs `FileInput`; importing `Input` does not excuse them. |
-| `no-global-control-classes` | `className` strings matching `\b(btn\|input)(-[a-z]+)?\b`, including inside `clsx(...)`, ternaries and template literals. |
-
-Escape hatch: put `// shell-primitive-exempt: <reason>` on the line above (or the same line as) the offending code. A reason is required. Prefer adding the missing variant to the shell instead.
+## shell-version-check
 
-`shell-version-check` exits 1 when the app's declared shell range cannot install the latest published version (`npm view`, 10s timeout; exit 2 if that lookup fails). `--offline` compares against the installed shell version instead; `--cwd=<dir>` checks another package. The shell package itself does not enable these rules.
+`shell-version-check` (a package `bin`, so `npx shell-version-check` works after install) exits 1 when the app's declared shell range cannot install the latest published version (`npm view`, 10s timeout; exit 2 if that lookup fails). `--offline` compares against the installed shell version instead; `--cwd=<dir>` checks another package.
 
 ## CSS imports