@ultimat3/ui 20.1.6 → 20.2.1

package/src/index.ts

@@ -6,6 +6,12 @@
 // would be TS2307 there. The reference pulls the contract along with the entry.
 /// <reference path="./scss.d.ts" />
 
+// Bare, and above every re-export: `theme/ambient.ts` registers the server's `useUi()` reader at
+// import, and a bundler may drop a re-exported module whose binding nobody used. A browser build
+// resolves this specifier to `theme/ambient.browser.ts` through `package.json`'s `browser` field,
+// so an island never carries the i18n barrel for it (issue #490).
+import './theme/ambient';
+
 export type {
   FocusTrap,
   LiveRegionAttrs,
@@ -57,20 +63,35 @@ export {
 } from './components/async-branch';
 export type { BadgeProps } from './components/Badge';
 export { Badge } from './components/Badge';
+export type { BarChartProps } from './components/BarChart';
+export { BarChart } from './components/BarChart';
 export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb';
 export { Breadcrumb } from './components/Breadcrumb';
 export type { ButtonProps } from './components/Button';
 export { Button } from './components/Button';
+export type { BarRect, ChartPoint } from './components/bar-chart-view';
+export { BAR_CHART, barRects, GRID_STEPS, gridY, maxOf } from './components/bar-chart-view';
 export type { CardProps, Elevation } from './components/Card';
 export { Card } from './components/Card';
 export type { CheckboxProps } from './components/Checkbox';
 export { Checkbox } from './components/Checkbox';
 export type { ComboboxProps } from './components/Combobox';
 export { Combobox } from './components/Combobox';
+export type { CommandPaletteLabels, CommandPaletteProps } from './components/CommandPalette';
+export { CommandPalette } from './components/CommandPalette';
 export type { ContainerProps, ContainerSize } from './components/Container';
 export { Container } from './components/Container';
+export type { CopyButtonProps } from './components/CopyButton';
+export { COPIED_MS, CopyButton } from './components/CopyButton';
 export type { ComboboxOption } from './components/combobox-filter';
 export { COMBOBOX_LIMIT, filterOptions, normalizeQuery } from './components/combobox-filter';
+export type { CommandPaletteItem, PaletteKeyAction } from './components/command-palette-view';
+export {
+  filterItems,
+  keyAction,
+  settleActive,
+  stepActive,
+} from './components/command-palette-view';
 export type { Column, DataTableProps } from './components/DataTable';
 export { DataTable } from './components/DataTable';
 export type { DateTimeProps } from './components/DateTime';
@@ -137,6 +158,8 @@ export type { ImageBox, ImageLoadingHints, ImageVariant } from './components/ima
 export { boxFor, loadingHints, ratioFor, srcsetFor } from './components/image-source';
 export type { LoadMoreInput, LoadMoreState } from './components/infinite-scroll-view';
 export { loadMoreState } from './components/infinite-scroll-view';
+export type { KbdProps } from './components/Kbd';
+export { Kbd } from './components/Kbd';
 export type { LinkProps } from './components/Link';
 export { Link } from './components/Link';
 export type { LocaleSwitcherProps } from './components/LocaleSwitcher';
@@ -145,8 +168,11 @@ export type { LinkTarget } from './components/link-target';
 export { linkTarget } from './components/link-target';
 export type { MenuItem, MenuProps } from './components/Menu';
 export { Menu } from './components/Menu';
+export type { MeterProps } from './components/Meter';
+export { Meter } from './components/Meter';
 export type { MoneyProps } from './components/Money';
 export { Money } from './components/Money';
+export { meterShare, meterWidth } from './components/meter-view';
 export type { MoneyFormatter, MoneyInput, MoneyViewOptions } from './components/money-view';
 // --- formatting cores (pure, renderer-free) ----------------------------------
 export { moneyText, toMoney } from './components/money-view';
@@ -156,6 +182,10 @@ export type { PaginationProps } from './components/Pagination';
 export { Pagination } from './components/Pagination';
 export type { Placement, PopoverProps } from './components/Popover';
 export { Popover } from './components/Popover';
+export type { QrCodeProps } from './components/QrCode';
+export { QrCode } from './components/QrCode';
+export type { QrMatrix } from './components/qr-matrix';
+export { encodeQr } from './components/qr-matrix';
 export type { RadioOption, RadioProps } from './components/Radio';
 export { Radio } from './components/Radio';
 export type { RelativeTimeProps } from './components/RelativeTime';
@@ -168,14 +198,22 @@ export type { SelectOption, SelectProps } from './components/Select';
 export { Select } from './components/Select';
 export type { SkeletonProps } from './components/Skeleton';
 export { Skeleton } from './components/Skeleton';
+export type { SparklineProps } from './components/Sparkline';
+export { Sparkline } from './components/Sparkline';
 export type { SpinnerProps } from './components/Spinner';
 export { Spinner } from './components/Spinner';
 export type { StackProps } from './components/Stack';
 export { Stack } from './components/Stack';
+export type { StatTileProps } from './components/StatTile';
+export { StatTile } from './components/StatTile';
 export type { SwitchProps } from './components/Switch';
 export { Switch } from './components/Switch';
 export type { SortDirection, SortState } from './components/sort-state';
 export { ariaSortFor, nextSortState } from './components/sort-state';
+export type { SparkPoint } from './components/sparkline-view';
+export { SPARKLINE, sparklinePath, sparkPoints } from './components/sparkline-view';
+export type { StatDelta, StatTrend } from './components/stat-delta';
+export { DELTA_ARROW_PATH, deltaOf } from './components/stat-delta';
 export type { TableProps } from './components/Table';
 export { Table } from './components/Table';
 export type { TabItem, TabsProps } from './components/Tabs';
@@ -258,11 +296,11 @@ export {
   TAB_SELECTOR,
   tabStopIndex,
 } from './roving';
+export { ambientUiContext } from './theme/ambient';
 export type { Brand, BrandInput, FontSlot } from './theme/brand';
 export { brandStyleCspSource, brandStyleTag, defineTheme, FONT_SLOTS } from './theme/brand';
 export type { Direction, UiContextValue } from './theme/context';
 export {
-  ambientUiContext,
   defaultUiContext,
   fallbackTranslator,
   UI_DEFAULT_CURRENCY,

package/src/theme/ambient-slot.ts

@@ -0,0 +1,20 @@
+// The module-scope slot holding the reader `useUi()` falls back to when no Solid runtime is
+// registered — a server render. Its own module for the same reason `runtime-slot.ts` is: the
+// server's reader (`ambient.ts`) reaches `@ultimat3/i18n` and `@ultimat3/time`, and a slot that
+// sat beside it would put the framework catalog in every browser chunk that calls `useUi()`.
+// The slot itself imports nothing.
+
+import type { UiContextValue } from './context';
+
+export type AmbientUiReader = () => UiContextValue;
+
+let reader: AmbientUiReader | null = null;
+
+/** Called once, at import, by `ambient.ts`; a browser build never reaches that module. */
+export function setAmbientUiReader(next: AmbientUiReader): void {
+  reader = next;
+}
+
+export function registeredAmbientUiReader(): AmbientUiReader | null {
+  return reader;
+}

package/src/theme/ambient.browser.ts

@@ -0,0 +1,11 @@
+// What a browser bundler gets in place of `ambient.ts` — `package.json`'s `browser` field maps
+// one file to the other. A browser has no request context: `useUi()` in a DOM reads the Solid
+// context a `UiProvider` filled, and throws (`solid()`, X_UI_RUNTIME_MISSING) before it could ever
+// fall back to an ambient reader. So nothing is registered here, and the same export answers the
+// package defaults — which is exactly what the server's reader answers outside a request.
+
+import { defaultUiContext, type UiContextValue } from './context';
+
+export function ambientUiContext(): UiContextValue {
+  return defaultUiContext();
+}

package/src/theme/ambient.ts

@@ -0,0 +1,37 @@
+// The presentation context of a SERVER render, read from the request the framework already
+// resolved — and the one module of the theme directory that reaches `@ultimat3/i18n` and
+// `@ultimat3/time` for a value. `index.ts` imports it bare, so every server that imports the
+// barrel has the reader registered before the first `useUi()`; `package.json`'s `browser` field
+// maps this file to `ambient.browser.ts` for a browser bundler, which is what keeps the i18n
+// barrel — and the framework catalog it installs at import — out of an island chunk (issue #490).
+
+import { currentDirection, currentLocale, useI18n } from '@ultimat3/i18n';
+import { currentTimeZone } from '@ultimat3/time';
+import { setAmbientUiReader } from './ambient-slot';
+import { UI_DEFAULT_CURRENCY, type UiContextValue } from './context';
+
+/**
+ * `currentLocale()` and `currentTimeZone()` are the ambient answers `@ultimat3/i18n` and
+ * `@ultimat3/time` keep on the request context, and `useI18n()` is the translator built from the
+ * registered catalogs. No second ambient store, and no process-wide default — outside a request
+ * each of them returns its own configured fallback, which is where `defaultUiContext()`'s values
+ * come from in the first place.
+ *
+ * `theme` and `currency` have no ambient source and are not given one. The server cannot know the
+ * theme — `data-theme` is decided in the browser by the anti-flash script — and a default display
+ * currency is business convention: a `Money` carries its own, and an app that wants another for
+ * bare minor units wraps `<Money currency="EUR">` once (axiom 8).
+ */
+export function ambientUiContext(): UiContextValue {
+  return {
+    theme: 'light',
+    locale: currentLocale(),
+    timeZone: currentTimeZone(),
+    currency: UI_DEFAULT_CURRENCY,
+    dir: currentDirection(),
+    t: useI18n(),
+  };
+}
+
+// At module scope, and that is the point: registration an importer can forget is not registration.
+setAmbientUiReader(ambientUiContext);

package/src/theme/context.ts

@@ -1,19 +1,17 @@
 // The ambient presentation contract every component reads: theme, locale, tz, currency, direction,
 // translator. Formatting components take nothing from a process-wide default — it arrives from
 // `UiProvider` where a Solid runtime is registered, and from the request everywhere else.
+//
+// This module is what every component's `useUi()` retains, so it imports NO value from
+// `@ultimat3/i18n` or `@ultimat3/time`: the i18n barrel installs the framework catalog at import,
+// and the request readers live in `ambient.ts`, reached through `ambient-slot.ts` (issue #490).
 
-import type { Translator } from '@ultimat3/i18n';
-import {
-  createTranslator,
-  currentDirection,
-  currentLocale,
-  type Direction,
-  directionOf,
-  type Locale,
-  useI18n,
-} from '@ultimat3/i18n';
-import { currentTimeZone, type TimeZone } from '@ultimat3/time';
+import type { Direction } from '@ultimat3/core';
+import { directionOf } from '@ultimat3/core';
+import type { Locale, Translator } from '@ultimat3/i18n';
+import type { TimeZone } from '@ultimat3/time';
 import type { Theme } from '../tokens/tokens';
+import { registeredAmbientUiReader } from './ambient-slot';
 import { hasSolidRuntime } from './runtime-slot';
 import { type SolidContext, type SolidRuntime, solid } from './solid-adapter';
 
@@ -35,9 +33,23 @@ export const UI_DEFAULT_LOCALE: Locale = 'en';
 export const UI_DEFAULT_TIME_ZONE = 'UTC' as TimeZone;
 export const UI_DEFAULT_CURRENCY = 'USD';
 
-/** Loud-miss translator: a forgotten catalog key renders ⟦key⟧, never blank. */
+/**
+ * Loud-miss translator: a forgotten catalog key renders ⟦key⟧, never blank.
+ *
+ * Written here rather than as `createTranslator({}, locale)`, and behaviourally the same call: an
+ * empty catalog has no key, so every lookup is a miss, `has` is false, `raw` is undefined and
+ * `keys` is empty — `context.test.ts` holds each of those against `@ultimat3/i18n`'s own. What
+ * the spelling buys is that a browser chunk with a `UiProvider` in it no longer reaches the i18n
+ * barrel for a translator that cannot translate.
+ */
 export function fallbackTranslator(locale: Locale = UI_DEFAULT_LOCALE): Translator {
-  return createTranslator({}, locale);
+  const miss = (key: string): string => `⟦${key}⟧`;
+  return Object.assign(miss, {
+    has: (): boolean => false,
+    raw: (): string | undefined => undefined,
+    keys: (): string[] => [],
+    locale,
+  });
 }
 
 export function defaultUiContext(): UiContextValue {
@@ -51,30 +63,6 @@ export function defaultUiContext(): UiContextValue {
   };
 }
 
-/**
- * The presentation context of a server render, read from the request the framework already
- * resolved: `currentLocale()` and `currentTimeZone()` are the ambient answers `@ultimat3/i18n` and
- * `@ultimat3/time` keep on the request context, and `useI18n()` is the translator built from the
- * registered catalogs. No second ambient store, and no process-wide default — outside a request
- * each of them returns its own configured fallback, which is where `defaultUiContext()`'s values
- * come from in the first place.
- *
- * `theme` and `currency` have no ambient source and are not given one. The server cannot know the
- * theme — `data-theme` is decided in the browser by the anti-flash script — and a default display
- * currency is business convention: a `Money` carries its own, and an app that wants another for
- * bare minor units wraps `<Money currency="EUR">` once (axiom 8).
- */
-export function ambientUiContext(): UiContextValue {
-  return {
-    theme: 'light',
-    locale: currentLocale(),
-    timeZone: currentTimeZone(),
-    currency: UI_DEFAULT_CURRENCY,
-    dir: currentDirection(),
-    t: useI18n(),
-  };
-}
-
 let cached: {
   readonly runtime: SolidRuntime;
   readonly context: SolidContext<UiContextValue>;
@@ -99,8 +87,15 @@ export function uiContext(): SolidContext<UiContextValue> {
  * Solid context is provably empty — an inert tree is walked outside every owner, so `useContext`
  * returns the context's default value even with a real runtime registered — so reading the
  * request's own answers is strictly more true than reading a provider that provided nothing.
+ *
+ * Those answers come through the slot: `ambient.ts` registers `ambientUiContext` when the barrel
+ * is imported, and a browser build — where this branch is unreachable — never has it. The
+ * defaults are the fallback for a caller that reached this module without the barrel, which is
+ * what `ambientUiContext()` itself answers outside a request.
  */
 export function useUi(): UiContextValue {
   const runtime = solid();
-  return hasSolidRuntime() ? runtime.useContext(uiContext()) : ambientUiContext();
+  if (hasSolidRuntime()) return runtime.useContext(uiContext());
+  const ambient = registeredAmbientUiReader();
+  return ambient === null ? defaultUiContext() : ambient();
 }

package/src/theme/inline-script.ts

@@ -1,6 +1,11 @@
 // The blocking <head> snippet that kills the flash of wrong theme. Built from the
 // same constants as theme.ts so the two can never disagree. Server/build-only:
 // the hash is computed with Bun's hasher for the CSP header.
+//
+// DEPRECATED `As of 20.2.0`: the framework's boot inlines this script itself, from
+// `@ultimat3/render`'s `themeScript({ fallback })` with `theme.defaultMode` in `app.config.ts` as
+// the fallback, and admits it to the CSP — an app no longer writes either half. This module stays
+// exported for one major so an app that inlined it by hand keeps building; it is removed in 21.
 
 import { runtimeMissingError } from '../errors';
 import { THEME_ATTRIBUTE, THEME_MEDIA_QUERY, THEME_STORAGE_KEY } from './theme';

package/src/theme/provider.tsx

@@ -1,7 +1,10 @@
 // UiProvider — the single place an app injects presentation context. Reactive
-// access goes through the Solid adapter, so this file imports only solid types.
+// access goes through the Solid adapter, so this file imports only solid types — and only TYPES
+// from `@ultimat3/i18n`: `directionOf` is core's, because a value import of the i18n barrel is
+// the framework catalog in every island chunk with a provider (issue #490).
 
-import { directionOf, type Locale, type Translator } from '@ultimat3/i18n';
+import { directionOf } from '@ultimat3/core';
+import type { Locale, Translator } from '@ultimat3/i18n';
 import type { TimeZone } from '@ultimat3/time';
 import type { JSX } from 'solid-js';
 import { providerNeedsRuntimeError } from '../errors';

package/src/tokens/_mixins.scss

@@ -8,6 +8,8 @@
 @use 'colors';
 @use 'motion';
 @use 'radius';
+@use 'space';
+@use 'typography';
 
 /// Keyboard-only focus, drawn from the accent role so it themes automatically.
 @mixin focus-ring($role: 'accent', $width: 2px, $offset: 2px) {
@@ -191,6 +193,34 @@
   }
 }
 
+/// The mono family with tabular figures, for slugs, counts, timestamps, ids and URLs — data
+/// whose columns must not wobble as the value changes. Lifted from an app that had restated
+/// these two lines in six stylesheets before the catalog carried them.
+@mixin data-text {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/// The section-label voice: smallest text step, medium weight, wide tracking, uppercase. An
+/// eyebrow over a hero, a stat tile's label, a table's column head.
+@mixin label-caps {
+  font-size: typography.text('xs');
+  font-weight: typography.weight('medium');
+  letter-spacing: typography.tracking('wide');
+  text-transform: uppercase;
+}
+
+/// A dot grid faded toward the top-left, where the text sits, over the soft background — the
+/// "quietly technical" ground a hero or a dashboard main sits on. Two layers: the fade (so the
+/// dots never compete with the copy) and the grid itself, pitched on one spacing step. Every
+/// colour is a role, so it themes with the page.
+@mixin dot-grid($pitch: space.space(5), $alpha: 0.55) {
+  background:
+    radial-gradient(ellipse 70% 90% at 0% 0%, colors.role('bg') 35%, transparent 100%),
+    radial-gradient(colors.role('line', $alpha) 1px, transparent 1px) 0 0 / $pitch $pitch,
+    colors.role('bg-soft');
+}
+
 /// Inline run of items on one baseline — a toolbar, a header, an icon beside a label.
 @mixin row($gap: var(--space-3), $align: center, $justify: flex-start) {
   display: flex;

package/src/tokens/reset.scss

@@ -15,6 +15,13 @@
   padding: 0;
 }
 
+// The `*` above outranks the UA stylesheet's `dialog { margin: auto }`, which is the ONLY thing
+// that centres a modal `<dialog>` in its viewport — so every `Dialog` and every app dialog opened
+// pinned to the top-left corner until the app restated the margin itself. Restated once, here.
+dialog {
+  margin: auto;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;