@tenphi/cookbook 0.21.2 → 0.22.0

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
@@ -441,8 +450,8 @@ theme: {
 ```
 
 The default brand is `okhsl(266 68% 48%)`, a blue with 68% saturation.
-Controls use an `8px` radius and cards use `16px`. Onest is the default body
-and heading family; JetBrains Mono is used for code. `theme.fonts` loads Google
+Controls use an `8px` radius and cards use `16px`. Onest Variable is the default body
+and heading family; JetBrains Mono Variable is used for code. `theme.fonts` loads Google
 families by name or local files from `public/`. See
 [Fonts and typography](./fonts-and-typography.md) for both flows.
 
@@ -660,12 +669,34 @@ 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.
-Cookbook message keys are `appearance`, `colorScheme`, `contrast`,
-`normalContrast`, `highContrast`, `auto`, `closeNavigation`, `primary`, `sections`,
-`chooseSection`, `headerLinks`, `more`, `closeMore`, `moreLinks`, `versions`,
-`documentationVersion`, `documentationVersions`, `version`, `home`,
-`generatedWith`, `viewSource`, `copyCode`, `codeCopied`, `codeCopyError`,
-`copyHeading`, `linkCopied`, `linkCopyError`, `notFound`, `notFoundDescription`,
-and `fallback`. Preserve `{heading}` in the `copyHeading` message.
+The supported keys below keep independent overrides, including similar labels:
+`auto` controls contrast, while `themeSelect.auto` controls color scheme;
+`search.label` labels the search control, while `pagefind.search` supplies the
+search input prompt. No migration or key renaming is needed.
+
+| Keys                                                                                                                | Controls or feedback                                                            |
+| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `copyPage`, `viewMarkdown`, `pageCopied`, `pageCopyError`                                                           | Page Markdown actions and copy status.                                          |
+| `draftTitle`, `draftNotice`                                                                                         | Draft-page notice.                                                              |
+| `searchError`                                                                                                       | Search loading failure.                                                         |
+| `appearance`, `colorScheme`, `contrast`, `normalContrast`, `highContrast`, `auto`                                   | Appearance and contrast controls.                                               |
+| `closeNavigation`, `primary`, `sections`, `chooseSection`                                                           | Primary and mobile navigation.                                                  |
+| `headerLinks`, `more`, `closeMore`, `moreLinks`                                                                     | Header links and overflow menu.                                                 |
+| `versions`, `documentationVersion`, `documentationVersions`, `version`                                              | Version selection and package labels.                                           |
+| `home`, `generatedWith`, `viewSource`                                                                               | Home, footer credit and preview source.                                         |
+| `copyCode`, `codeCopied`, `codeCopyError`                                                                           | Code copy action and status.                                                    |
+| `copyHeading`, `linkCopied`, `linkCopyError`                                                                        | Heading link action and status. Preserve `{heading}` in `copyHeading`.          |
+| `notFound`, `notFoundDescription`, `fallback`                                                                       | Missing-page and language fallback messages.                                    |
+| `sidebarNav.accessibleLabel`, `menuButton.accessibleLabel`                                                          | Sidebar navigation and menu accessible names.                                   |
+| `tableOfContents.onThisPage`, `languageSelect.accessibleLabel`                                                      | Contents heading and language selector.                                         |
+| `themeSelect.light`, `themeSelect.dark`, `themeSelect.auto`                                                         | Color-scheme options.                                                           |
+| `search.label`, `search.ctrlKey`, `search.cancelLabel`, `search.devWarning`                                         | Search control, shortcut, close action and development notice.                  |
+| `page.nextLink`, `page.previousLink`, `page.editLink`, `page.lastUpdated`, `page.skipToContent`                     | Pagination, edit/update labels and skip link.                                   |
+| `pagefind.search`, `pagefind.clear_search`, `pagefind.zero_results`, `pagefind.many_results`, `pagefind.one_result` | Search input, clearing and result counts. Preserve `[COUNT]` in count messages. |
+
+Custom component message keys are also preserved. Missing custom keys passed to
+`Astro.locals.t(key)` return the key itself. Changing an override does not alter
+other message keys, even when their default text is the same.

package/docs/fonts-and-typography.md

@@ -10,8 +10,14 @@ named presets to the rendered site.
 
 The base [typography presets](./upstream/tasty/docs/styles.md#preset) are
 `body`, `heading`, `h1` through `h6`, `navigation`, `small`, and `code`. Onest
-is self-hosted and used for body and heading text by default; JetBrains Mono is
-self-hosted for code.
+Variable is self-hosted and used for body and heading text by default, with a
+continuous weight range from `100` to `900`. This supports intermediate preset
+weights such as `450` for navigation and `610` for headings. JetBrains Mono
+Variable is self-hosted for code with weights from `100` to `800`.
+
+Both default fonts bundle their Latin subset and require no Google Fonts
+requests at build time or in the browser. For other character sets, configure
+`theme.fonts` with a Google family or local files as described below.
 
 Specialized roles preserve the component sizes while sharing their base typography:
 

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/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.2",
+  "version": "0.22.0",
   "description": "Repository-native static documentation for Astro",
   "type": "module",
   "keywords": [
@@ -68,8 +68,8 @@
   "author": "Andrey Yamanov",
   "license": "MIT",
   "dependencies": {
-    "@tenphi/docs": "0.21.2",
-    "@tenphi/renderer": "0.21.2"
+    "@tenphi/docs": "0.22.0",
+    "@tenphi/renderer": "0.22.0"
   },
   "peerDependencies": {
     "astro": "^7.3.2"