@efolusi/meridian 1.5.1 → 1.5.2

package/ai/Player.js

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { injectEfCss } from "../forms/Button.js";
+import { injectEfCss, cssPct } from "../forms/Button.js";
 import { Icon } from "../icons/Icon.js";
 const CSS = `
 .ef-player{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-sans)}
@@ -155,7 +155,7 @@ export const Player = /*#__PURE__*/React.forwardRef(function Player({
     key: i,
     className: `ef-player__bar${!dur && playing ? ' ef-player__bar--loading' : (i + 0.5) / bars.length <= ratio ? ' ef-player__bar--played' : ''}`,
     style: {
-      height: Math.max(8, p * 100) + '%',
+      height: cssPct(Math.max(8, p * 100)),
       animationDelay: !dur ? i * 30 + 'ms' : undefined
     }
   }))), /*#__PURE__*/React.createElement("div", {

package/ai/UsageMeter.js

@@ -1,7 +1,7 @@
 'use client';
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { injectEfCss } from "../forms/Button.js";
+import { injectEfCss, cssPct } from "../forms/Button.js";
 const CSS = `
 .ef-usage{display:flex;flex-direction:column;gap:7px}
 .ef-usage__row{display:flex;align-items:baseline;gap:8px}
@@ -71,7 +71,7 @@ export function UsageMeter({
   }, /*#__PURE__*/React.createElement("span", {
     className: "ef-usage__fill",
     style: {
-      width: Math.min(100, (animated ? shownRatio : ratio) * 100) + '%',
+      width: cssPct(Math.min(100, (animated ? shownRatio : ratio) * 100)),
       display: 'block'
     }
   })), hint || cost ? /*#__PURE__*/React.createElement("div", {

package/data/BarChart.js

@@ -1,7 +1,7 @@
 'use client';
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { injectEfCss } from "../forms/Button.js";
+import { injectEfCss, cssPct } from "../forms/Button.js";
 const CSS = `
 .ef-bars{display:flex;align-items:flex-end;gap:3px;width:100%}
 .ef-bars__bar{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:var(--sand-200);transition:background var(--dur-fast) var(--ease-out)}
@@ -34,7 +34,7 @@ export function BarChart({
     key: i,
     className: `ef-bars__bar${i >= vals.length - highlightLast ? ' ef-bars__bar--hi' : ''}`,
     style: {
-      height: Math.max(2, v / max * 100) + '%'
+      height: cssPct(Math.max(2, v / max * 100))
     },
     title: (data[i] && data[i].label ? data[i].label + ' · ' : '') + (formatValue ? formatValue(v) : v.toLocaleString())
   }))), labels && labels.length ? /*#__PURE__*/React.createElement("div", {

package/data/LineChart.js

@@ -1,7 +1,7 @@
 'use client';
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { injectEfCss } from "../forms/Button.js";
+import { injectEfCss, cssPct } from "../forms/Button.js";
 const CSS = `
 .ef-linechart{position:relative}
 .ef-linechart__tip{position:absolute;transform:translate(-50%,-130%);background:var(--surface-inverse);color:var(--text-inverse);font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5}
@@ -79,8 +79,8 @@ export function LineChart({
   })), hov != null && /*#__PURE__*/React.createElement("div", {
     className: "ef-linechart__tip",
     style: {
-      left: x(hov) / W * 100 + '%',
-      top: y(data[hov].value) / H * 100 + '%'
+      left: cssPct(x(hov) / W * 100),
+      top: cssPct(y(data[hov].value) / H * 100)
     }
   }, data[hov].label, data[hov].label ? ' · ' : '', format ? format(data[hov].value) : data[hov].value.toLocaleString()));
 }

package/display/Resizable.js

@@ -1,7 +1,7 @@
 'use client';
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { injectEfCss } from "../forms/Button.js";
+import { injectEfCss, cssPct } from "../forms/Button.js";
 const CSS = `
 .ef-resizable{display:flex;width:100%;height:100%;min-height:0;min-width:0}
 .ef-resizable--vertical{flex-direction:column}
@@ -70,7 +70,7 @@ export function Resizable({
   }), /*#__PURE__*/React.createElement("div", {
     className: "ef-resizable__pane",
     style: {
-      flexBasis: ratio * 100 + '%',
+      flexBasis: cssPct(ratio * 100),
       flexGrow: 0,
       flexShrink: 0
     }

package/forms/Button.js

@@ -31,6 +31,27 @@ export function injectEfCss(id, text) {
   s.textContent = text;
   document.head.appendChild(s);
 }
+/**
+ * Format a number as a CSS percentage that survives server rendering.
+ *
+ * A bare `value + '%'` writes every digit JavaScript has: `1/3 * 100` becomes
+ * `33.33333333333333%`. Browsers keep roughly six significant figures when they
+ * parse an inline style, so the DOM reads back `33.3333%`, and React's
+ * hydration check compares its own 16-digit string against the browser's
+ * truncated one and reports a mismatch on every affected element. The bars in
+ * Player, the fill in UsageMeter and the columns in BarChart all hit this.
+ *
+ * Rounding to three decimals stays well inside what the parser preserves and is
+ * far below one pixel at any realistic size. Number-to-string drops trailing
+ * zeros on its own, which matters: `33.300%` would be normalised to `33.3%` and
+ * reintroduce the very mismatch this avoids.
+ *
+ * Lowercase, so it stays an internal helper rather than part of the public
+ * namespace.
+ */
+export function cssPct(value) {
+  return Math.round(value * 1000) / 1000 + '%';
+}
 /**
  * Point several refs at one node.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efolusi/meridian",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A general-purpose open-source design system by Efolusi: accessible React components, design tokens, blocks and example apps.",
   "license": "MIT",
   "homepage": "https://meridian.efolusi.com",