@tollerud/ui 1.1.3 → 1.1.5

package/AGENTS.md

@@ -394,15 +394,52 @@ npx tsup                                   # verify the bundle builds
 Edit `package.json` version, then update these to match:
 - `COMPLETENESS_ROADMAP.md` — header line `### npm package (components/*.tsx) — vX.X.X`
 - `registry.json` — top-level `"version"` field
+- `ds/app.jsx` — sidebar brand line `user interface · vX.X.X`
 
 ### 4. Always update these files in the same commit
 
-- `CHANGELOG.md` — add an entry at the top following the existing style (date · version · summary + bullet points)
+- `CHANGELOG.md` — add an entry at the top following the **exact format rules below**
 - `COMPLETENESS_ROADMAP.md` — move completed items to the done list, strike through fixed quality items
 - `SKILL.md` — add new components to the catalog, update version notes
 - `AGENTS.md` (this file) — update the component import blocks if new exports were added
 
-### 5. Commit and push
+### 5. CHANGELOG.md format rules
+
+The docs site parses `CHANGELOG.md` at runtime. Wrong formatting causes entries to render as a wall of text or missing content. Follow these rules exactly:
+
+**Entry heading** — always `## version — YYYY-MM-DD — Title`:
+```
+## 1.2.0 — 2026-07-01 — Add DataGrid component
+```
+
+**Blank lines are mandatory** between every distinct block (paragraph, heading, list, code fence). The parser breaks sections at blank lines — without them everything merges into one paragraph.
+
+**Section headings inside an entry** — use `###` or a `**Bold line**` on its own line preceded by a blank line:
+```
+## 1.2.0 — 2026-07-01 — Add DataGrid component
+
+Short summary of what changed.
+
+### New components
+
+- `DataGrid` — sortable, filterable data grid with ...
+
+### Migration
+
+Nothing breaking. Drop-in replacement for `DataTable` where needed.
+```
+
+**Never do this** — bold inline mid-paragraph acting as a heading with no blank line before it:
+```
+## 1.2.0 — bad example
+Summary text. **New components** - DataGrid does X. **Migration** nothing breaking.
+```
+
+**Lists** — standard markdown `- item`. One blank line before the first item if preceded by a paragraph.
+
+**Code blocks** — standard triple-backtick fences. Always close the fence, always a blank line before and after.
+
+### 6. Commit and push
 
 ```bash
 git add <changed files>

package/SKILL.md

@@ -31,6 +31,8 @@ const config: Config = {
 export default config
 ```
 
+As of **v1.1.5**, Tailwind colors are exposed under `tollerud.*` only. Use utilities like `text-tollerud-yellow`, `bg-tollerud-surface-raised`, and `border-tollerud-border`; do not use `tia-*` utility names.
+
 Import base styles/tokens from `@tollerud/ui/globals.css` (or `@tollerud/ui/tokens.css`) in your root layout / `globals.css`, alongside Tailwind's own layers:
 ```css
 @import "tailwindcss/preflight";
@@ -46,7 +48,33 @@ Import base styles/tokens from `@tollerud/ui/globals.css` (or `@tollerud/ui/toke
 `@tollerud/ui` ships as a single bundled file marked `'use client'`. As of **v1.0.8**, importing anything from it — components, hooks, or plain helpers like `buttonVariants` and `cn` — works fine from a Server Component file; the import itself doesn't force your file to become a Client Component, since you're just pulling in already-client-bundled code or plain functions.
 - **If you're on `< 1.0.8`, upgrade first** — older versions crash on any import from a Server Component (the bundle wasn't marked `'use client'`, despite containing hook-based components).
 
-### 2. `<Button>` only renders a native `<button>` — use `asChild` for links (≥ 1.0.7)
+### 2. Tailwind v4 — Alert tone colors missing (`@source` path issue)
+
+`Alert` uses raw Tailwind color classes (`bg-red-500/5`, `border-red-500/30`, `text-red-400`, etc.) for its `error`, `info`, and `success` tones. In Tailwind v4, if your `@source` path doesn't correctly resolve to `node_modules/@tollerud/ui/dist`, these classes are never scanned and the colors silently don't apply.
+
+**Fix (≥ 1.1.4):** `globals.css` now ships these classes in `@layer utilities` so they're always present regardless of your `@source` config. Just make sure you're importing `globals.css`:
+
+```css
+@import "@tollerud/ui/globals.css";
+```
+
+If you're on `< 1.1.4`, add this to your own CSS as a workaround:
+
+```css
+@layer utilities {
+  .bg-red-500\/5   { background-color: rgb(239 68 68 / 0.05); }
+  .bg-blue-500\/5  { background-color: rgb(59 130 246 / 0.05); }
+  .bg-green-500\/5 { background-color: rgb(34 197 94 / 0.05); }
+  .border-red-500\/30   { border-color: rgb(239 68 68 / 0.3); }
+  .border-blue-500\/30  { border-color: rgb(59 130 246 / 0.3); }
+  .border-green-500\/30 { border-color: rgb(34 197 94 / 0.3); }
+  .text-red-400   { color: rgb(248 113 113); }
+  .text-blue-400  { color: rgb(96 165 250); }
+  .text-green-400 { color: rgb(74 222 128); }
+}
+```
+
+### 3. `<Button>` only renders a native `<button>` — use `asChild` for links (≥ 1.0.7)
 `Button` extends `ButtonHTMLAttributes<HTMLButtonElement>` and has no `href`. **Never nest `<a>` inside `<button>` or vice versa** — it's invalid HTML and breaks accessibility. Two ways to style a `<Link>`/`<a>` like a Button:
 
 ```tsx
@@ -71,7 +99,7 @@ import Link from 'next/link'
 
 For a real `<button>` (form submit, logout, toggle, dialog/menu trigger), just use `<Button>` directly — no `asChild` needed.
 
-### 3. `cn` is exported — use it, don't reimplement
+### 4. `cn` is exported — use it, don't reimplement
 `@tollerud/ui` exports `cn` (clsx + tailwind-merge). Use it for conditional/merged class names instead of template strings or writing your own helper.
 
 ---
@@ -450,3 +478,33 @@ Shadow scale: `--shadow-sm` `--shadow-md` `--shadow-lg` `--shadow-xl` `--shadow-
 - **19 new components (`Divider`, `Pill`, `Avatar`/`AvatarGroup`, `Breadcrumb`, `Pagination`, `Segmented`, `Stepper`, `Panel`, `Meter`, `FormRow`, `Accordion`, `Slider`, `PasswordInput`, `Combobox`, `DatePicker`, `FileUpload`, `TagInput`, `PricingCard`) require `>= 1.0.9`**
 - **`Combobox` + `DatePicker` close on window resize (≥ 1.1.0)** — earlier versions left the popover open and misaligned after viewport changes
 - Always pin to the latest patch and check `CHANGELOG.md` in the design-system repo for breaking changes (e.g. the 1.0.5 yellow token rename: `tollerud-yellow-bright` → `tollerud-yellow`, old `tollerud-yellow` `#E8D500` → `tollerud-yellow-warm`)
+
+---
+
+## CHANGELOG.md format rules
+
+The docs site at `design.tollerud.dev` parses `CHANGELOG.md` at runtime. Wrong formatting causes entries to render as a wall of text. Follow these rules whenever you write a changelog entry:
+
+**Entry heading:** `## version — YYYY-MM-DD — Title`
+```
+## 1.2.0 — 2026-07-01 — Add DataGrid component
+```
+
+**Blank lines are required** between every distinct block. The parser splits sections at blank lines — missing blank lines cause everything to merge into one paragraph.
+
+**Section headings inside an entry:** `###` heading or a `**Bold line**` on its own line, preceded by a blank line:
+```
+## 1.2.0 — 2026-07-01 — Add DataGrid component
+
+Short summary.
+
+### New components
+
+- `DataGrid` — sortable, filterable grid ...
+
+### Migration
+
+Nothing breaking.
+```
+
+**Never** write bold inline mid-paragraph as a heading substitute with no blank line before it — it will merge with surrounding text into one unreadable block.

package/globals.css

@@ -918,3 +918,31 @@
     padding-right: 1.5rem;
   }
 }
+
+/* ═══════════════════════════════════════════════
+   Tailwind v4 safelist — Alert tone classes
+   ═══════════════════════════════════════════════
+   These classes are used dynamically in Alert.tsx and would be missed
+   by @source scanning a pre-compiled dist file. Declaring them here
+   ensures Tailwind always generates them regardless of @source config.
+   ═══════════════════════════════════════════════ */
+
+/*
+@source inline("
+  bg-red-500/5 border-red-500/30 text-red-400
+  bg-blue-500/5 border-blue-500/30 text-blue-400
+  bg-green-500/5 border-green-500/30 text-green-400
+");
+*/
+
+@layer utilities {
+  .bg-red-500\/5   { background-color: rgb(239 68 68 / 0.05); }
+  .bg-blue-500\/5  { background-color: rgb(59 130 246 / 0.05); }
+  .bg-green-500\/5 { background-color: rgb(34 197 94 / 0.05); }
+  .border-red-500\/30   { border-color: rgb(239 68 68 / 0.3); }
+  .border-blue-500\/30  { border-color: rgb(59 130 246 / 0.3); }
+  .border-green-500\/30 { border-color: rgb(34 197 94 / 0.3); }
+  .text-red-400   { color: rgb(248 113 113); }
+  .text-blue-400  { color: rgb(96 165 250); }
+  .text-green-400 { color: rgb(74 222 128); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollerud/ui",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Tollerud User Interface — dark, monochrome + yellow accent. Noir aesthetic meets modern utility.",
   "private": false,
   "type": "module",
@@ -98,7 +98,6 @@
     "dark-theme",
     "monochrome",
     "noir",
-    "tia",
     "ui"
   ],
   "publishConfig": {

package/tollerud-preset.js

@@ -13,56 +13,61 @@
  * Or merge manually into an existing config.
  */
 
+const tollerudColors = {
+  // Brand
+  yellow:        '#FFFF00',
+  'yellow-warm': '#E8D500',
+  acid:          '#FFFF00',
+  accent:        '#FFFF00',
+  'yellow-dim':  '#B8A800',
+  amber:         '#FFB800',
+  'amber-glow':  '#FF8C00',
+
+  // Noir scale
+  black:         '#0A0A0A',
+  'noir-black':  '#0A0A0A',
+  'noir-950':    '#0A0A0A',
+  'noir-900':    '#121212',
+  'noir-850':    '#161616',
+  'noir-800':    '#1A1A1A',
+  'noir-700':    '#252525',
+  'noir-600':    '#333333',
+  'noir-500':    '#4A4A4A',
+  'noir-400':    '#666666',
+  'noir-300':    '#888888',
+  'noir-200':    '#AAAAAA',
+  'noir-100':    '#CCCCCC',
+  'noir-50':     '#E5E5E5',
+  'noir-white':  '#F5F5F5',
+  white:         '#F5F5F5',
+
+  // Surfaces
+  surface:       '#0A0A0A',
+  'surface-raised': '#121212',
+  'surface-overlay': '#1A1A1A',
+  'surface-hover':   '#252525',
+
+  // Text
+  foreground:       '#F5F5F5',
+  'text-primary':   '#F5F5F5',
+  'text-secondary': '#AAAAAA',
+  'text-muted':     '#666666',
+  'text-inverse':   '#0A0A0A',
+
+  // Borders
+  border:        '#333333',
+  'border-subtle': '#252525',
+  'border-accent': '#FFFF00',
+
+  // States
+  success:       '#22C55E',
+  warning:       '#E8D500',
+  error:         '#EF4444',
+  info:          '#3B82F6',
+}
+
 const palette = {
-  tia: {
-    // Brand
-    yellow:        '#FFFF00',
-    'yellow-warm': '#E8D500',
-    acid:          '#FFFF00',
-    'yellow-dim':  '#B8A800',
-    amber:         '#FFB800',
-    'amber-glow':  '#FF8C00',
-
-    // Noir scale
-    'noir-black':  '#0A0A0A',
-    'noir-900':    '#121212',
-    'noir-800':    '#1A1A1A',
-    'noir-700':    '#252525',
-    'noir-600':    '#333333',
-    'noir-500':    '#4A4A4A',
-    'noir-400':    '#666666',
-    'noir-300':    '#888888',
-    'noir-200':    '#AAAAAA',
-    'noir-100':    '#CCCCCC',
-    'noir-50':     '#E5E5E5',
-    'noir-white':  '#F5F5F5',
-
-    // Surfaces
-    surface:       '#0A0A0A',
-    'surface-raised': '#121212',
-    'surface-overlay': '#1A1A1A',
-    'surface-hover':   '#252525',
-
-    // Text
-    'text-primary':   '#F5F5F5',
-    'text-secondary': '#AAAAAA',
-    'text-muted':     '#666666',
-    'text-inverse':   '#0A0A0A',
-
-    // Borders
-    border:        '#333333',
-    'border-subtle': '#252525',
-    'border-accent': '#FFFF00',
-
-    // States
-    success:       '#22C55E',
-    warning:       '#E8D500',
-    error:         '#EF4444',
-    info:          '#3B82F6',
-
-    // Shadows
-    glow:          '0 0 15px rgba(255,255,0,0.3), 0 0 30px rgba(255,255,0,0.1)',
-  },
+  tollerud: tollerudColors,
 }
 
 /** @type {import('tailwindcss').Config} */
@@ -118,7 +123,7 @@ module.exports = {
       // ─── Shadows ───
       boxShadow: {
         'tollerud-sm':  '0 1px 2px 0 rgba(0,0,0,0.4)',
-        'tia':     '0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.3)',
+        'tollerud':     '0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.3)',
         'tollerud-md':  '0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3)',
         'tollerud-lg':  '0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3)',
         'tollerud-glow':'0 0 15px rgba(255,255,0,0.3), 0 0 30px rgba(255,255,0,0.1)',