@ultimat3/ui 16.0.0 → 18.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "16.0.0",
+  "version": "18.0.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,7 @@
     "LICENSE"
   ],
   "engines": {
-    "bun": ">=1.3.0"
+    "bun": ">=1.4.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
@@ -44,10 +44,10 @@
     "icons": "bun run src/icons/build-icons.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "16.0.0",
-    "@ultimat3/i18n": "16.0.0",
-    "@ultimat3/money": "16.0.0",
-    "@ultimat3/time": "16.0.0"
+    "@ultimat3/core": "18.0.0",
+    "@ultimat3/i18n": "18.0.0",
+    "@ultimat3/money": "18.0.0",
+    "@ultimat3/time": "18.0.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/components/DataTable.tsx

@@ -2,6 +2,7 @@
 // real list always has (loading, error, empty, data). The error state renders an
 // UltimateError with the same code/cause/fix strings the terminal prints.
 
+import { finiteCount } from '@ultimat3/core';
 import type { JSX } from 'solid-js';
 import { ariaBool } from '../a11y';
 import { cx } from '../cx';
@@ -61,7 +62,13 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
 
   const body = (): JSX.Element => {
     if (props.loading === true) {
-      return Array.from({ length: props.skeletonRows ?? 5 }, () => (
+      // `Array.from({ length: NaN })` is `[]`, so a busy tbody with no placeholders in it is the
+      // collapsed layout this state exists to prevent, reported as healthy; `Infinity` asks for
+      // 2^53 - 1 elements and dies with a bare, uncoded `RangeError` out of a render. `??` reaches
+      // neither, because `NaN` is not nullish. 0 stays legal: a loading table with no placeholders
+      // is a choice, and it is a visible one.
+      const placeholders = finiteCount('DataTable', 'skeletonRows', props.skeletonRows ?? 5, 0);
+      return Array.from({ length: placeholders }, () => (
         <tr>
           {props.columns.map(() => (
             <td>

package/src/components/Skeleton.tsx

@@ -1,6 +1,7 @@
 // Loading placeholder. Sized by the caller so the real content lands in the same
 // box — a skeleton that changes size on load is just a slower layout shift.
 
+import { finiteCount } from '@ultimat3/core';
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import styles from './Skeleton.module.scss';
@@ -16,6 +17,12 @@ export interface SkeletonProps {
 }
 
 export function Skeleton(props: SkeletonProps): JSX.Element {
+  // `Math.max` IS NOT A VALIDATOR — it propagates `NaN`, so `Math.max(1, NaN)` is `NaN` and
+  // `Array.from({ length: NaN })` is `[]`: the placeholder that holds the box while content loads
+  // rendered nothing at all, which is the layout shift it exists to prevent. The clamp stays, and
+  // it is the screened value it clamps — `lines: 0` still means one line, exactly as before.
+  const lines = (): number => Math.max(1, finiteCount('Skeleton', 'lines', props.lines ?? 1, 0));
+
   const one = (index: number): JSX.Element => (
     <span
       class={cx(styles['skeleton'], styles[`shape-${props.shape ?? 'text'}`])}
@@ -28,7 +35,7 @@ export function Skeleton(props: SkeletonProps): JSX.Element {
 
   return (
     <span aria-hidden="true" class={cx(styles['group'], props.class)}>
-      {Array.from({ length: Math.max(1, props.lines ?? 1) }, (_unused, index) => one(index))}
+      {Array.from({ length: lines() }, (_unused, index) => one(index))}
     </span>
   );
 }

package/src/components/combobox-filter.ts

@@ -2,6 +2,8 @@
 // every debounced keystroke, so a no-JS form round-trip and a live filter narrow the list the
 // same way — two matchers would eventually disagree, and the user would see the list flicker.
 
+import { finiteCount } from '@ultimat3/core';
+
 export interface ComboboxOption {
   /** The text the field takes when the suggestion is picked — and what the form submits. */
   value: string;
@@ -36,8 +38,14 @@ export function filterOptions(
   query = '',
   limit: number = COMBOBOX_LIMIT,
 ): readonly ComboboxOption[] {
+  // A BARE PARAMETER DEFAULT, which `??` never guards and `scripts/finite-bounds.ts` cannot see:
+  // `slice(0, NaN)` is `[]`, so every suggestion vanishes and `<Combobox>` renders "no results" for
+  // a list that matched. `Infinity` is the mirror — every option rendered, out of the function
+  // whose own doc says long lists are a scroll, not an answer. 0 stays legal: it renders nothing,
+  // on purpose and visibly.
+  const cap = finiteCount('filterOptions', 'limit', limit, 0);
   const needle = normalizeQuery(query);
-  if (needle === '') return options.slice(0, limit);
+  if (needle === '') return options.slice(0, cap);
 
   const prefix: ComboboxOption[] = [];
   const contains: ComboboxOption[] = [];
@@ -46,5 +54,5 @@ export function filterOptions(
     if (text.startsWith(needle)) prefix.push(option);
     else if (text.includes(needle)) contains.push(option);
   }
-  return [...prefix, ...contains].slice(0, limit);
+  return [...prefix, ...contains].slice(0, cap);
 }