@nadicodeai/ui 12.1.146 → 12.1.147

package/AGENTS.md

@@ -45,7 +45,9 @@ and `lint` checks. A component change a person can see goes through
   an operating system, a messaging channel or a sign-in provider is its icon in
   Iconify's `logos` set (`platform-mark.tsx`).
 - **Charts** are stock shadcn registry items; the deliberate deviations are held
-  by `tests/guards/chart-kit.test.ts`. A chart the kit lacks is pulled from
+  by `tests/guards/chart-kit.test.ts`, and what only a browser lays out, such as
+  a category axis's labels, by the browser suite in `tests/visual/`, which
+  post-merge's `test (website, packages)` job runs. A chart the kit lacks is pulled from
   `https://ui.shadcn.com/r/styles/new-york-v4/<name>.json`.
 - **Releases.** No change names a version; the publish picks it after merge:
   `../../docs/agents/publish.md`.

package/dist/components/chart-bar-horizontal.d.ts

@@ -11,7 +11,7 @@ declare function signedAxis(data: readonly Record<string, number | string>[], va
  * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
  * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
  * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
- * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line where its row holds two lines and is cut with an ellipsis past what its lines hold, whole in the tooltip, so no label runs into its neighbour.
  */
 declare function ChartBarHorizontal({ title, period, controls, link, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter, axisFormatter, emptyState, size, className, }: Omit<ChartCardProps, "series" | "entityColorMap" | "otherLabel"> & {
     valueKey: string;

package/dist/components/chart-bar-horizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAoCjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAoCjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chart-bar-horizontal.js

@@ -1,7 +1,7 @@
 // Pulled from the shadcn registry item `chart-bar-horizontal`.
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, CartesianGrid, ReferenceLine, Text, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, ReferenceLine, Text, XAxis, YAxis, } from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
 import { niceAxisMax, niceAxisTicks, niceStep } from "./chart-axis.js";
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, defaultValueFormatter, } from "./chart-card.js";
@@ -9,18 +9,20 @@ const POSITIVE_KEY = "__positive";
 const NEGATIVE_KEY = "__negative";
 const POSITIVE_BAR_COLOR = "var(--success)";
 const NEGATIVE_BAR_COLOR = "var(--destructive)";
+const TWO_LINE_ROW_HEIGHT = 28;
 /**
  * Recharts keeps only SVG attributes from a `tick` object, so `maxLines` reaches
- * its `Text` only through a tick it renders: up to two lines, then an ellipsis.
+ * its `Text` only through a tick it renders.
  */
 function CategoryTick({ payload, ...props }) {
-    return (_jsx(Text, { ...props, maxLines: 2, children: payload.value }));
+    const rowHeight = Number(props.height) / props.visibleTicksCount;
+    return (_jsx(Text, { ...props, maxLines: rowHeight >= TWO_LINE_ROW_HEIGHT ? 2 : 1, children: payload.value }));
 }
-/** About one 12 px character, and the bounds that keep a name whole on two lines without starving the bars. */
+/** About one 12 px character, and the bounds that keep a long name readable without starving the bars. */
 const CATEGORY_CHAR_WIDTH = 6.6;
 const CATEGORY_AXIS_MIN = 64;
 const CATEGORY_AXIS_MAX = 128;
-/** The category axis as wide as its longest name up to the bound; a longer name wraps to a second line. */
+/** The category axis as wide as its longest name up to the bound; a longer name wraps or is cut, as `CategoryTick` decides. */
 function categoryAxisWidth(data, xKey) {
     const longest = data.reduce((most, datum) => Math.max(most, String(datum[xKey] ?? "").length), 0);
     return Math.min(CATEGORY_AXIS_MAX, Math.max(CATEGORY_AXIS_MIN, Math.ceil(longest * CATEGORY_CHAR_WIDTH) + 16));
@@ -62,7 +64,7 @@ function signedAxis(data, valueKey) {
  * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
  * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
  * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
- * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line where its row holds two lines and is cut with an ellipsis past what its lines hold, whole in the tooltip, so no label runs into its neighbour.
  */
 function ChartBarHorizontal({ title, period, controls, link, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
     const axis = signedAxis(data, valueKey);

package/dist/showcase/usage.generated.js

@@ -1574,7 +1574,7 @@ export const USAGE = [
         instead: "Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.",
         behaviour: "Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.",
         words: "The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.",
-        access: "Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.",
+        access: "Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line where its row holds two lines and is cut with an ellipsis past what its lines hold, whole in the tooltip, so no label runs into its neighbour.",
     },
     {
         name: "ChartBarMultiple",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.146",
+  "version": "12.1.147",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -74,6 +74,7 @@
     "check:static": "npm run check",
     "pretest": "npm run build",
     "test": "node ../../tools/workspace/heavy-slots.mjs --skip-if-filtered -- vitest run",
+    "test:visual": "node ../../tools/workspace/heavy-slots.mjs -- playwright test --config playwright.visual.config.ts",
     "check:export-targets": "node ../../tools/release/check-export-targets.mjs",
     "test:distribution": "node ../../tools/release/package-smoke-test.mjs"
   },
@@ -83,7 +84,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.146",
+    "@nadicodeai/design-system": "12.1.147",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",
@@ -118,7 +119,9 @@
     "@nadicodeai/eslint-config": "*",
     "@nadicodeai/eslint-plugin": "*",
     "@nadicodeai/oxlint-config": "*",
+    "@nadicodeai/static-design-server": "*",
     "@nadicodeai/test-support": "*",
+    "@playwright/test": "^1.64.1",
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@tailwindcss/postcss": "^4.3.3",