@tenphi/cookbook 0.21.4 → 0.22.1

package/docs/configuration.md

@@ -211,14 +211,16 @@ sidebar:
   label: Quick start
   order: 1
   group: Guides
+  badge: NEW
 ```
 
 `template: splash` uses a wider layout without sidebars by default. Set
 `tableOfContents` in that page's frontmatter to show its contents list.
 
 Set `sidebar: false` to omit a page from generated sidebars. `label`, `order`,
-and `group` affect both the default sidebar and autogenerated navigation
-directories. Relative hero images are validated, content-hashed, and copied
+`group`, and `badge` affect both the default sidebar and autogenerated navigation
+directories. A badge is plain text and also appears when a navigation item links
+to the page, unless that item overrides it. Relative hero images are validated, content-hashed, and copied
 with the page's other local assets. Unrecognized frontmatter is preserved as graph entry `metadata`, outside the
 renderer frontmatter. Use `content.frontmatter: "reject"` to reject unrelated
 fields. Other supported fields include `aliases`, `template`, `hero`, `editUrl`,
@@ -361,6 +363,13 @@ also appears in the manual list or autogenerated directory. It remains in
 previous/next page navigation. A group with no remaining children becomes a
 regular page link.
 
+Every navigation object, including manual and autogenerated groups, accepts a
+plain-text `badge`, such as `{ label: "Offline support", link: "/offline-support",
+badge: "NEW" }`. Links inherit `sidebar.badge` from their page's frontmatter;
+an explicit `badge` overrides it, and `badge: ""` hides it. Badges use brand-derived
+accent colors and support partial customization through `theme.styles.Sidebar.Badge`.
+See [Sidebar badges](./site-navigation.md#sidebar-badges) for examples.
+
 Top-level sections stay flat; their linked headings navigate to their pages.
 For nested groups, clicking an unselected header or its chevron selects the parent
 page and opens its children, keeping them open if already expanded. Clicking the
@@ -660,7 +669,8 @@ translations: {
 },
 ```
 
-`navigation.<configured label>` translates named tabs and navigation groups.
+`navigation.<configured label>` translates named tabs, navigation groups, and
+explicitly configured sidebar badges.
 Automatically generated links use the title from the translated page.
 The supported keys below keep independent overrides, including similar labels:
 `auto` controls contrast, while `themeSelect.auto` controls color scheme;

package/docs/site-navigation.md

@@ -56,6 +56,52 @@ follows a link. Keyboard focus stays in the drawer while it is open and returns
 to the menu control when it closes. Content and links remain readable if client
 JavaScript is unavailable.
 
+## Sidebar badges
+
+Add a short `badge` beside a navigation link or group label:
+
+```ts
+navigation: [
+  {
+    label: "Guides",
+    items: [
+      "/authentication",
+      { label: "Offline support", link: "/offline-support", badge: "NEW" },
+      "/deploying",
+    ],
+  },
+];
+```
+
+To keep the badge with its page, set it in frontmatter instead:
+
+```yaml
+sidebar:
+  badge: NEW
+```
+
+Default and autogenerated sidebars, route strings, and linked navigation groups
+inherit the page's badge. An explicit navigation `badge` overrides frontmatter;
+use `badge: ""` to hide an inherited badge. Badges are plain text, including
+characters such as `<`, and do not change pagination labels.
+
+Badges use the brand-derived `accentText` and `accentSurfaceSubtle` palette roles
+in every color scheme and contrast mode. Customize their appearance with a
+partial [component style override](./component-styles.md):
+
+```ts
+theme: {
+  styles: {
+    Sidebar: {
+      Badge: { radius: "0.5rem" },
+    },
+  },
+}
+```
+
+Translate explicitly configured badges with keys such as `"navigation.NEW"` in
+`translations`. Frontmatter badges come from each locale's page.
+
 ## Contents, languages, and versions
 
 Desktop articles show an on-page table of contents. Enable an optional compact

package/docs/theme-and-components.md

@@ -278,7 +278,9 @@ theme: {
 ```
 
 `layout-width` caps and centers the complete documentation shell, while
-`content-width` limits the reading column inside it. `radius` is the control
+`content-width` limits the reading column inside it. The column stays centered
+as the viewport narrows: horizontal padding shrinks to 1.5rem before the column
+itself shrinks. Mobile layouts use 1rem padding. `radius` is the control
 and navigation radius; `card-radius` is the larger surface radius. Keeping
 those roles separate makes a sharp control theme or a soft card theme possible
 without one-off component overrides.

package/docs/upstream/glaze/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/tenphi/glaze/v2.0.0/assets/glaze.svg" width="128" height="128" alt="Glaze logo">
+  <img src="https://raw.githubusercontent.com/tenphi/glaze/v2.0.1/assets/glaze.svg" width="128" height="128" alt="Glaze logo">
 </p>
 
 <h1 align="center">Glaze</h1>
@@ -149,7 +149,7 @@ In Glaze, a **scheme variant** is one of `light`, `dark`, `lightContrast`, or
 * Keep the [API reference](docs/api.md) nearby for every method and option.
 * Read [OKHST in Glaze](docs/okhst.md) for the product-level color model, or
   the [full OKHST specification](https://github.com/tenphi/okhst) for its math.
-* [`AGENTS.md`](https://github.com/tenphi/glaze/blob/v2.0.0/AGENTS.md) — source-tree orientation for contributors.
+* [`AGENTS.md`](https://github.com/tenphi/glaze/blob/v2.0.1/AGENTS.md) — source-tree orientation for contributors.
 
 ## License
 

package/docs/upstream/manifest.json

@@ -1,18 +1,18 @@
 [
   {
     "name": "@tenphi/tasty",
-    "version": "3.9.6",
+    "version": "3.9.9",
     "license": "MIT",
     "repository": "https://github.com/tenphi/tasty",
-    "ref": "v3.9.6",
+    "ref": "v3.9.9",
     "directory": "upstream/tasty"
   },
   {
     "name": "@tenphi/glaze",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "license": "MIT",
     "repository": "https://github.com/tenphi/glaze",
-    "ref": "v2.0.0",
+    "ref": "v2.0.1",
     "directory": "upstream/glaze"
   }
 ]

package/docs/upstream/tasty/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.9.6/assets/tasty.svg" width="128" height="128" alt="Tasty logo" />
+  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.9.9/assets/tasty.svg" width="128" height="128" alt="Tasty logo" />
 </p>
 
 <h1 align="center">Tasty</h1>
@@ -615,7 +615,7 @@ const tokens = theme.tasty(); // Ready-to-use Tasty tokens
 Syntax highlighting for Tasty styles in TypeScript, TSX, JavaScript, and JSX. Highlights color tokens, custom units, state keys, presets, and style properties inside `tasty()`, `tastyStatic()`, and related APIs.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.9.6/assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example" />
+  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.9.9/assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example" />
 </p>
 
 ## Built with Tasty

package/docs/upstream/tasty/docs/ai-agents.md

@@ -220,6 +220,8 @@ styles: { Title: { preset: 'h3' }, Icon: { $: '>@:last-child', color: '#accent'
 | `@function`      | `{ '$$name': { args, returns?, result, '$local'? } }`                                                       |
 | `recipe`         | a **string** of configured recipe names: `'card elevated'`, `'reset input / autofill'`, `'none / disabled'` |
 
+`recipe` resolves on the component root and independently in each sub-element's styles: `styles: { Panel: { recipe: 'card elevated' } }` is supported. Configured recipe definitions must be flat and cannot contain their own `recipe` key; references inside recipe values are not recursively expanded. Compose names where the recipe is applied, not inside `configure({ recipes })`. See [Recipes](dsl.md#recipes).
+
 At-rule keys match the real CSS at-rule names, so they are kebab-case, not camelCase. Inside `@function`, the callable is `$$name` but its parameters and local variables are `$name`:
 
 ```jsx

package/docs/upstream/tasty/docs/configuration.md

@@ -549,7 +549,23 @@ configure({
 });
 ```
 
-Recipe values are flat tasty styles (no sub-element keys). They may contain base styles, tokens, local states, `@keyframes`, and `@property`. Recipes cannot reference other recipes.
+Recipe values are flat tasty styles (no sub-element keys). They may contain base styles, tokens, local states, `@keyframes`, and `@property`.
+
+**Recipes cannot reference other recipes.** A `recipe` key inside a configured recipe's value is not recursively resolved:
+
+```jsx
+// Unsupported: applying 'elevatedCard' does not expand 'card elevated'.
+configure({
+  recipes: {
+    elevatedCard: {
+      recipe: 'card elevated',
+      padding: '6x',
+    },
+  },
+});
+```
+
+Instead, compose the names where you apply the styles: `styles: { recipe: 'card elevated', padding: '6x' }`. Recipe references are resolved on the component root and independently inside each sub-element's styles (for example, `styles: { Panel: { recipe: 'card elevated' } }`). This sub-element support does not allow one recipe definition to inherit another. Tasty warns in development when a recipe definition contains a `recipe` key.
 
 For how to apply, compose, and override recipes in components, see [Recipes](dsl.md#recipes) in the Style DSL reference.
 

package/docs/upstream/tasty/docs/dsl.md

@@ -343,6 +343,26 @@ const ElevatedCard = tasty({
 });
 ```
 
+**Where recipes resolve:**
+
+The `recipe` property is resolved on the component root and independently inside each sub-element's styles:
+
+```jsx
+const CardWithPanel = tasty({
+  styles: {
+    recipe: 'card',
+    Panel: {
+      recipe: 'card elevated',
+      padding: '2x', // Overrides the panel's base recipe padding
+    },
+  },
+});
+```
+
+At each level, base recipes are collected in name order (later recipes replace earlier values for the same property), then local styles are merged, then post recipes are merged. The merges with local styles and post recipes follow the [state-map extension and replacement rules](#extending-vs-replacing-state-maps).
+
+Recipe definitions themselves cannot contain a `recipe` reference to another recipe: there is no recursive expansion or recipe inheritance. Compose names in the root or sub-element `recipe` property instead. See [Configuration — Recipes](configuration.md#recipes) for an unsupported nesting example.
+
 **Post-merge recipes (`/` separator):**
 
 Recipes listed after `/` are applied _after_ component styles using `mergeStyles`:

package/docs/upstream/tasty/docs/pipeline.md

@@ -2,7 +2,7 @@
 
 This document describes the style rendering pipeline that transforms style objects into CSS rules. The pipeline ensures that each style value is applied to exactly one condition through exclusive condition building, boolean simplification, and intelligent CSS generation.
 
-**Implementation:** [`src/pipeline/`](https://github.com/tenphi/tasty/blob/v3.9.6/src/pipeline) — TypeScript file names below are relative to that directory.
+**Implementation:** [`src/pipeline/`](https://github.com/tenphi/tasty/blob/v3.9.9/src/pipeline) — TypeScript file names below are relative to that directory.
 
 ## Overview
 

package/docs/upstream/tasty/docs/react-api.md

@@ -70,6 +70,8 @@ const Span = tasty({
 
 The wrapped component only needs to forward `className` (and ideally `style`/`ref`). Tasty-specific props (`qa`, `qaVal`, `mods`, `tokens`, `styleProps`, `modProps`, `tokenProps`) are consumed by Tasty and never leak to the DOM.
 
+Props forwarded to the `as` component keep their declared types and requiredness. For example, a component with `position: 'top-right' | 'bottom-left'` accepts those values through `tasty({ as: Component })`; CSS positioning can still be set through `styles.position`. A prop explicitly listed in `styleProps` is consumed as a style value instead. The always-available base style props below are also consumed by Tasty, so keep component-specific prop names separate from those reserved names.
+
 ---
 
 ## Style Props

package/docs/upstream/tasty/docs/runtime-benchmarks.md

@@ -80,9 +80,9 @@ cold cases. These benchmarks do not include React, DOM work, stylesheet
 injection, style resolution, layout, or paint.
 
 The benchmark sources are colocated with the code they exercise:
-[`pipeline.bench.ts`](https://github.com/tenphi/tasty/blob/v3.9.6/src/pipeline/pipeline.bench.ts),
-[`parseStateKey.bench.ts`](https://github.com/tenphi/tasty/blob/v3.9.6/src/pipeline/parseStateKey.bench.ts), and the
-parser benchmark files under [`src/parser`](https://github.com/tenphi/tasty/blob/v3.9.6/src/parser).
+[`pipeline.bench.ts`](https://github.com/tenphi/tasty/blob/v3.9.9/src/pipeline/pipeline.bench.ts),
+[`parseStateKey.bench.ts`](https://github.com/tenphi/tasty/blob/v3.9.9/src/pipeline/parseStateKey.bench.ts), and the
+parser benchmark files under [`src/parser`](https://github.com/tenphi/tasty/blob/v3.9.9/src/parser).
 
 ## Empty Wrapper Overhead
 
@@ -91,7 +91,7 @@ Skipping the style pipeline does not make a `tasty()` component free. Even
 tracks another fiber, and Tasty still processes and forwards the element's
 props.
 
-[`tasty-overhead.bench.tsx`](https://github.com/tenphi/tasty/blob/v3.9.6/src/tasty-overhead.bench.tsx) compares 10,000
+[`tasty-overhead.bench.tsx`](https://github.com/tenphi/tasty/blob/v3.9.9/src/tasty-overhead.bench.tsx) compares 10,000
 raw `<div className>` siblings with 10,000 instances of one module-scoped
 `tasty({})` component. Both receive the same props, and the benchmark fails if
 they do not produce equivalent DOM.
@@ -125,7 +125,7 @@ snapshot experiment with controlled garbage collection.
 
 ## Cold Generation and Injection
 
-[`tasty-injection.bench.ts`](https://github.com/tenphi/tasty/blob/v3.9.6/src/tasty-injection.bench.ts) measures the extra
+[`tasty-injection.bench.ts`](https://github.com/tenphi/tasty/blob/v3.9.9/src/tasty-injection.bench.ts) measures the extra
 work when Tasty must generate and inject CSS that an otherwise equivalent page
 already has. It does not compare different stylesheet insertion techniques.
 
@@ -201,7 +201,7 @@ and dialogs open. Both paths go through the state-map and ref-counting
 machinery rather than the parser, so a regression in them is invisible to every
 other benchmark here.
 
-[`tasty-interaction.bench.tsx`](https://github.com/tenphi/tasty/blob/v3.9.6/src/tasty-interaction.bench.tsx) pairs each
+[`tasty-interaction.bench.tsx`](https://github.com/tenphi/tasty/blob/v3.9.9/src/tasty-interaction.bench.tsx) pairs each
 case with a raw-DOM equivalent driven by a hand-written stylesheet that
 produces the same computed color and background in both states. The benchmark
 fails if either arm resolves to anything else, so an arm that quietly rendered
@@ -255,7 +255,7 @@ reopening a menu re-pays the React wrapper, not the style pipeline.
 ## Page-Load Cold Start
 
 Every benchmark above deliberately excludes the network, module compilation and
-the first render. [`scripts/cold-start`](https://github.com/tenphi/tasty/blob/v3.9.6/scripts/cold-start) measures exactly
+the first render. [`scripts/cold-start`](https://github.com/tenphi/tasty/blob/v3.9.9/scripts/cold-start) measures exactly
 those: what a visitor waits for between requesting a page and seeing styled
 content, in a real Chromium under CDP network and CPU throttling.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/cookbook",
-  "version": "0.21.4",
+  "version": "0.22.1",
   "description": "Repository-native static documentation for Astro",
   "type": "module",
   "keywords": [
@@ -68,8 +68,8 @@
   "author": "Andrey Yamanov",
   "license": "MIT",
   "dependencies": {
-    "@tenphi/docs": "0.21.4",
-    "@tenphi/renderer": "0.21.4"
+    "@tenphi/docs": "0.22.1",
+    "@tenphi/renderer": "0.22.1"
   },
   "peerDependencies": {
     "astro": "^7.3.2"