@nadicodeai/design-system 12.1.115 → 12.1.117

package/DESIGN.md

@@ -613,10 +613,10 @@ Every chart and KPI card is a stock shadcn registry component owned by `@nadicod
 - The tooltip prints the exact figure in the surface's units; the axis prints a scale (`1.6B`, `800M`).
 - The value axis is always drawn, with five ticks on a 1, 2, 2.5, 5 or 10 step.
 - Bars are capped in width, the grid is dashed in both directions, and plot heights are fixed.
-- A multi-series chart has a legend below the plot, left-aligned and wrapping: a round dot and the entity name, in series order.
+- A multi-series chart has a legend below the plot, left-aligned and wrapping: a round dot and the entity name, in series order. A usage summary instead identifies its series through the adjacent ranking's identity labels and coloured share bars, without dots.
 - A signed comparison keeps a visible zero line so losses and gains share one baseline, and colours each bar by its consequence: `success` where the value is favourable, `destructive` where it is not.
 - A chart is a named section: its card title is the heading that names the plot.
-- Every chart card has one header and footer, the same on every page: `ChartCard`, whose usage page holds them. The period's choice sits on the page's title row where the page has one. A daily axis labels every second day from the first, fewer in a half-width card. A ranked list beside a chart is one line per entity (place, colour, name, share, figure), so it never stands taller than the chart; a category axis is as wide as its longest name up to 128 px, a longer name wrapping to a second line; a short window's activity calendar draws larger cells and shares its row with a sibling card, never a lone narrow card.
+- Every chart card has one header and footer: `ChartCard`, whose usage page holds them. A usage summary keeps its period and metric selectors beside its title; other period choices sit on the page's title row where the page has one. A daily axis labels every second day from the first, fewer in a half-width card. `ChartRanking` owns a usage summary's ranking and complete-list disclosure; other compact rankings remain one line per entity. A category axis is as wide as its longest name up to 128 px, a longer name wrapping to a second line; a short window's activity calendar draws larger cells and shares its row with a sibling card, never a lone narrow card.
 
 No pie, donut, radar or dual-axis chart, and no mark or logo inside a legend. The one ring is `Gauge`, a control for a single ratio out of 100 against a fixed maximum, not a chart.
 
@@ -629,7 +629,7 @@ The order is the colour-blind safety for marks drawn in slot order, as a stack,
 Rosso enters at slot 6 and verde at slot 8, so a surface whose map holds five entities or fewer never shows a red or a green that reads as error or success; past five, the legend's words carry the meaning and the hue only tells series apart.
 
 - **One series**: `{colors.chart-1}`, titled, with no legend.
-- **Two to ten**: the slots in order, with the legend below the plot.
+- **Two to ten**: the slots in order, identified by the legend or the usage summary's ranking.
 - **More than ten**: the eleventh entity and every later one fold into one neutral "Everything else" in `{colors.muted}`; the page lists its entities largest first, so the tail is the smallest.
 
 A hue follows its entity, never its rank or position: one assignment per surface, the same in a chart and its table, stable under filtering and sorting.
@@ -776,7 +776,7 @@ A product page is one of five page compositions, each answering one question fir
 | Composition | Owner | First answer | Structure |
 | --- | --- | --- | --- |
 | Overview | `OverviewPage` | What needs attention? | The period, the figures, the chart cards, then the exceptions that need a person. Never a stack of previews of every section. |
-| Collection | `CollectionPage` | Which record? | The title and the page's actions, the sibling collections as line tabs, one toolbar, then one line per record ("Tables and missing values"); one row is one hover and one open target. A collection whose reader must also see what waits on them across its records takes a `rail`. The Portal's Agents are its exception, a `DataTable` of entity rows, as Vercel's Deployments list. |
+| Collection | `CollectionPage` | Which record? | The title and the page's actions, the sibling collections as line tabs, one toolbar, then one line per record ("Tables and missing values"); one row is one hover and one open target. Actionable attention stands above the toolbar when present; business summaries belong to Dashboard and Analytics. A `rail` carries context intrinsic to the collection, such as the selected Library hub. The Portal's Agents are its exception, a `DataTable` of entity rows, as Vercel's Deployments list. |
 | Object | `ObjectPage` | What is this, what can I do? | The parent in the path and its sections in the sidebar, then the object card, then its sections, each a card only where it owns a decision. An Agent's first section, Profile, opens with her `AgentProfileCard`, the same in every product. |
 | Settings | `SettingsPage` | What can I change? | Section cards, each saving its own fields; the danger zone closes the page. |
 | Library | `LibraryShelf` for Agent templates; `CollectionPage` for Skills and Plugins | What reusable thing can I use? | Agent templates as Vercel's Templates gallery; Skills and Plugins as an entity collection, with staff's hub as its rail. |
@@ -914,7 +914,7 @@ Every example and consuming surface covers its reachable populated, empty, loadi
 | [Avatar](https://vercel.com/geist/avatar) | The `Avatar` family; a record's mark is `IdentityMark`, and an Agent is her `AgentOrb` |
 | [Badge](https://vercel.com/geist/badge) | `Badge`; `StatusBadge` for state, `Tag` for a categorical fact |
 | [Banner](https://vercel.com/geist/banner) | `NoticeBanner` |
-| [Book](https://vercel.com/geist/book) | `Card` / `PictureLabel` + `AspectRatio` and cover artwork; no book-frame export |
+| [Book](https://vercel.com/geist/book) | `Card` + `AspectRatio` and cover artwork; no book-frame export |
 | [Breadcrumbs](https://vercel.com/geist/breadcrumbs) | The `Breadcrumb` family |
 | [Browser](https://vercel.com/geist/browser) | `Card` + `AspectRatio` and decorative browser chrome; `DesktopShell` stays real product chrome |
 | [Button](https://vercel.com/geist/button) | `Button`, `ButtonLink` and `buttonVariants` |
@@ -1112,16 +1112,16 @@ One wait gets one indicator. A request waiting for a person is not a wait: queue
 
 ### Failure surfaces
 
-A page that cannot show what was asked for opens with a picture, the way a Portal email does: one whole cut-out in art direction's editorial register, centred above the words, whose idea says what happened. The picture carries its label (`LabelledPicture`). Below the label, on the same centre line, stand a mono eyebrow naming the situation, the page's one heading, one plain sentence, and the recovery action, which leads. The cut-out's transparent ground takes the page's own, so one file serves light and dark, and it stays whole at every width: it scales down with the column and is never cropped by the viewport. No orb turns on a failure page.
+A page that cannot show what was asked for opens with a picture, the way a Portal email does: one whole cut-out in art direction's editorial register, centred above the words, whose idea says what happened. Decorative artwork has no gallery caption, title, materials or year. Below the picture, on the same centre line, stand a mono eyebrow naming the situation, the page's one heading, one plain sentence, and the recovery action, which leads. The cut-out's transparent ground takes the page's own, so one file serves light and dark, and it stays whole at every width: it scales down with the column and is never cropped by the viewport. No orb turns on a failure page.
 
 A Portal email, whether the Portal or Knock sends it, follows the same order under its picture, in one structure: the picture, the eyebrow and a short heading keep the centre line; one sentence of consequence, a list between hairlines when the email is about several things (each a semibold heading over its one sentence), a table of its facts between hairlines when it has facts, one to-do sentence, the fallback link and the footer stand flush left; the button stays centred.
 
-The not-found page and the fault page are one composition, in that order: the picture with its label, the eyebrow, the title, one sentence, then the recovery first. Only a fault carries its code, and no orb turns on either. Two registers share it:
+The not-found page and the fault page are one composition, in that order: the picture, the eyebrow, the title, one sentence, then the recovery first. Only a fault carries its code, and no orb turns on either. Two registers share it:
 
-- **An absence** is an address or a record that is not there. Its picture and label are the joke of the missing address. Nothing went wrong, so nothing takes a feedback role, no glyph stands in for the failure and no code is printed.
-- **A fault** is a request the product stopped. Its picture and label are calm and never a joke about lost work. Below the actions stands the evidence: the diagnostic code, the word that names it and one line saying what to do with it. The error pair marks the eyebrow.
+- **An absence** is an address or a record that is not there. Its picture carries the joke of the missing address. Nothing went wrong, so nothing takes a feedback role, no glyph stands in for the failure and no code is printed.
+- **A fault** is a request the product stopped. Its picture is calm and never a joke about lost work. Below the actions stands the evidence: the diagnostic code, the word that names it and one line saying what to do with it. The error pair marks the eyebrow.
 
-An absence inside a product's own chrome, such as an address or a record the Portal cannot open, keeps its picture and label, centred in the content region with the chrome around it. A fault inside the chrome keeps the words alone. Identity hue reaches a product failure surface only through the picture. The words never apologize and never name the mechanism ("Product messages" in `product-design`). On the website a failure surface is an ordinary full-bleed section and takes a section ground like any other.
+An absence inside a product's own chrome, such as an address or a record the Portal cannot open, keeps its picture, centred in the content region with the chrome around it. A fault inside the chrome keeps the words alone. Identity hue reaches a product failure surface only through the picture. The words never apologize and never name the mechanism ("Product messages" in `product-design`). On the website a failure surface is an ordinary full-bleed section and takes a section ground like any other.
 
 ### Agent orbs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.115",
+  "version": "12.1.117",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -198,7 +198,7 @@
   "devDependencies": {
     "@google/design.md": "0.4.0",
     "@nadicodeai/eslint-plugin": "*",
-    "@playwright/test": "^1.64.0",
+    "@playwright/test": "^1.64.1",
     "@types/node": "^24",
     "ajv": "8.20.0",
     "ajv-formats": "3.0.1",
@@ -206,12 +206,13 @@
     "eslint": "^9.39.4",
     "lucide-static": "1.57.0",
     "parse5": "^8.0.1",
-    "postcss": "^8.5.29",
+    "postcss": "^8.5.30",
     "postcss-value-parser": "^4.2.0",
     "sharp": "^0.35.5",
-    "style-dictionary": "^5.6.0",
+    "style-dictionary": "^5.6.1",
     "tsx": "^4.23.15",
     "typescript": "^6",
+    "typescript-native": "npm:typescript@7.0.2",
     "vitest": "^5.0.0"
   }
 }