eidotter 0.43.0 → 0.44.0

package/llms.txt

@@ -27,8 +27,8 @@ Apps default to the amber theme and offer the light theme via a consistent setti
 
 ## Upgrading
 - Every minor with breaking/visible changes ships a guide at `node_modules/eidotter/migrations/<version>.md` (index: `migrations/README.md`).
-- Read every guide between the installed and the target version, oldest first, and follow its checklist. Guides: `migrations/0.41.0.md`, `migrations/0.43.0.md`.
-- 0.x caret gotcha: `^0.40.x` never resolves to 0.41.0; bump the range explicitly, to `^0.43.0`.
+- Read every guide between the installed and the target version, oldest first, and follow its checklist. Guides: `migrations/0.41.0.md`, `migrations/0.43.0.md`, `migrations/0.44.0.md`.
+- 0.x caret gotcha: `^0.40.x` never resolves to 0.41.0; bump the range explicitly, to `^0.44.0`.
 
 ## Token Categories
 - `--color-semantic-*`: USE THESE for components (background, text, border, status)

package/migrations/0.43.0.md

@@ -31,7 +31,7 @@ Commit the lockfile.
 the `end` slot and the MENU trigger did not fit. Now the name moves onto a
 second line. The brand link shrinks before the `end` slot does; the end slot
 clips only once the brand reaches its floor (the icon plus about 8 tracked
-characters). Words break at spaces. Only a single word longer than the floor
+characters; from 0.44.0 the floor is the longest word, see 0.44.0.md). Words break at spaces. Only a single word longer than the floor
 breaks mid-word. The icon top-aligns beside a two-line name. A brand that fits
 on one line renders exactly as before.
 

package/migrations/0.44.0.md

@@ -0,0 +1,110 @@
+# Upgrading to eidotter 0.44.0
+
+From 0.43.x. Coming from older versions, read [0.41.0.md](./0.41.0.md) and
+[0.43.0.md](./0.43.0.md) first.
+
+0.44.0 fixes what the first 0.43 adoptions found. Four changes are visible
+without touching your code; one prop is new.
+
+## Who must act
+
+- Apps that mark AI-drafted content (`data-ai-block`, `data-provenance="ai-draft"`): check your headings (section 2).
+- Apps that render `PageShell`: give the page its own background and font if it relied on PageShell's (section 3).
+- Everyone else: bump and check the Header and the ⌘K palette at phone width.
+
+## 1. How to bump
+
+```bash
+npm install eidotter@^0.44.0
+npm ls eidotter   # 0.44.0 or later
+```
+
+Commit the lockfile.
+
+## 2. Visible: headings are never marked as AI-drafted
+
+**What changed.** `provenance.css` used to paint `h1` to `h6` with the
+magenta AI-draft gradient inside a `data-ai-block` wrapper, and on a heading
+that carried `data-provenance="ai-draft"` itself. Headings now keep their
+normal colour in both cases. Only prose (paragraphs, list items, quotes and
+their emphasis) shows the marker. A heading nested inside a marked container
+(a `<div data-provenance="ai-draft">`) gets a readable colour back: your own
+heading colour if you set one, otherwise the body text colour.
+
+**How to find it.** Open a page wrapped in `data-ai-block`. Page, section and
+card titles that were magenta are now in your heading colour.
+
+**What to do.** Nothing, unless your own CSS paints headings with the
+gradient. Search your styles for `data-ai-block` or `ai-draft` rules that
+target `h1`–`h6` and remove them.
+
+## 3. Visible: PageShell inherits the page
+
+**What changed.** `PageShell` no longer paints `background-primary` and no
+longer sets `font-family`, `font-size` or `line-height`. Your page's own
+background (a CRT tint, `RetroEffects`) and body font now show through. Its
+column no longer grows past the viewport when a child is wide (a Header with an
+`end` slot, a Footer), and with `contentId` the content gets `tabIndex={-1}`,
+so a skip link moves keyboard focus.
+
+**What to do.** If your page had no background or font of its own and relied
+on PageShell's, set them on `body` or put a class on the shell:
+
+```tsx
+<PageShell className="my-page" …>
+```
+
+```css
+.my-page {
+  background-color: var(--color-semantic-background-primary);
+  font-family: var(--typography-font-family-body), var(--typography-font-family-fallback);
+  line-height: 1.5;
+}
+```
+
+**How to verify.** At 320px and 390px, `document.documentElement.scrollWidth`
+equals the viewport width.
+
+## 4. Visible: a one-word Header brand never splits
+
+**What changed.** 0.43.0 floored the brand at about 8 tracked characters and
+broke a longer single word mid-word ("DMNC.TEC / H" at 320px). The floor is
+now the brand's longest word: words break only at spaces, and once the brand is
+at its floor the `end` slot clips instead. A single word wider than the whole
+row (about 11 tracked characters beside the lockup icon and MENU at 320px)
+overflows.
+
+**What to do.** Check the Header at 320px. If the `end` slot content is cut
+off, hide it below a width you choose or move it into the menu. If the brand
+word itself is too long, shorten `brandName` or use `brandCollapse="mark"`.
+
+## 5. Visible: CmdPalette
+
+- The search input is focused as the palette opens, in the same tap or
+  keypress, so phones raise the keyboard straight away.
+- The blinking `_` in the `JUMP TO` strip is gone (it looked like an input).
+  The `eidotter-cmdpal__blink` class no longer exists; delete any CSS that
+  targets it.
+
+## 6. New: LegalPage `embedded`
+
+```tsx
+<PageShell header={…} footer={…}>
+  <LegalPage embedded title="Impressum" date="Stand: Oktober 2026">
+    <ImpressumAddress />
+  </LegalPage>
+</PageShell>
+```
+
+`embedded` drops LegalPage's own 720px column, centring, padding, min-height,
+background and font, and start-aligns the hero without the rule under it, so
+the page shares your site's left edge. Without it, LegalPage renders as before.
+
+## Checklist
+
+- [ ] `npm install eidotter@^0.44.0`; `npm ls eidotter` shows 0.44.0 or later. Commit the lockfile.
+- [ ] Pages with `data-ai-block`: titles are in your heading colour; remove any own CSS that painted headings (section 2).
+- [ ] Pages on `PageShell`: background and font come from your page; no sideways scroll at 320/390 (section 3).
+- [ ] Header at 320px: brand on whole words, nothing important lost from the `end` slot (section 4).
+- [ ] Delete CSS targeting `eidotter-cmdpal__blink`, if any (section 5).
+- [ ] Optional: `LegalPage embedded` inside your page column (section 6).

package/migrations/README.md

@@ -35,6 +35,7 @@ The folder ships in the npm package:
 node_modules/eidotter/migrations/README.md
 node_modules/eidotter/migrations/0.41.0.md
 node_modules/eidotter/migrations/0.43.0.md
+node_modules/eidotter/migrations/0.44.0.md
 ```
 
 It is also exported, so tooling can resolve a guide by path:
@@ -46,3 +47,4 @@ It is also exported, so tooling can resolve a guide by path:
 |---|---|
 | [0.41.0](./0.41.0.md) | 16px floor, CSS reset and unused utilities no longer leak, `text-secondary` meaning change, Header lockup default, overlays on `DosDialog` (removed classes), focus rings; adopt `IconButton`, `DosDialog`, `DosWindow`, the favicon export and the `amber-paper` theme |
 | [0.43.0](./0.43.0.md) | `Header` brand wraps instead of ellipsizing; adopt `PageShell`/`PageSection`, `Bench` and the opt-in `Header` `layout`/`rule`/`contained`/`brandCollapse` props |
+| [0.44.0](./0.44.0.md) | Headings never AI-marked; `PageShell` inherits background and font; one-word Header brand never splits; `CmdPalette` cursor removed; adopt `LegalPage` `embedded` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -146,8 +146,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@figma/plugin-typings": "^1.107.0-beta.2",
-    "@figma/rest-api-spec": "^0.41.0",
+    "@figma/plugin-typings": "^1.142.0",
+    "@figma/rest-api-spec": "^0.45.0",
     "@storybook/addon-a11y": "^10.2.7",
     "@storybook/addon-designs": "^12.0.0",
     "@storybook/addon-docs": "^10.2.7",
@@ -155,42 +155,42 @@
     "@storybook/react": "^10.2.7",
     "@storybook/react-vite": "^10.2.7",
     "@storybook/test-runner": "^0.26.0",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.1",
     "@types/glob": "^8.1.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^26.0.1",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
     "axe-playwright": "^2.2.2",
-    "chromatic": "^18.13.0",
+    "chromatic": "^18.13.2",
     "cross-env": "^10.1.0",
     "dotenv": "^17.3.1",
-    "eslint": "^10.0.3",
+    "eslint": "^10.13.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "figma-js": "^1.16.1-0",
     "gh-pages": "^6.3.0",
     "glob": "^13.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.0.2",
+    "jest": "~30.4.2",
+    "jest-environment-jsdom": "~30.4.1",
     "leva": "^0.10.1",
     "postcss": "^8.5.8",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.2.7",
-    "style-dictionary": "^5.1.1",
-    "tailwindcss": "^4.3.0",
+    "style-dictionary": "5.5.2",
+    "tailwindcss": "^4.3.3",
     "tailwindcss-react-aria-components": "^2.0.1",
-    "ts-jest": "^29.4.0",
+    "ts-jest": "^29.4.15",
     "ts-morph": "^28.0.0",
     "ts-node": "^10.9.2",
-    "tsx": "^4.23.1",
+    "tsx": "^4.23.15",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.72.0",
     "vite": "^8.0.10"
   },
   "dependencies": {