@ultimat3/ui 19.1.2 → 19.2.0

package/README.md

@@ -186,7 +186,7 @@ to render on the server.**
 | | Server render | Client render |
 |---|---|---|
 | The renderer | `@ultimat3/render`'s inert JSX factory — a component is a plain function, called once | Solid, with a reactive graph |
-| The runtime | `INERT_SOLID_RUNTIME`, handed out automatically: signals hold, memos recompute on read, effects never run | the real one, registered once: `setSolidRuntime(solidRuntime)`, from `import * as solidRuntime from 'solid-js'` |
+| The runtime | `INERT_SOLID_RUNTIME`, handed out automatically: signals hold, memos recompute on read, effects never run | the real one, registered once: `setSolidRuntime({ createContext, useContext, createSignal, createMemo, createEffect, onCleanup })`, six named imports from `'solid-js'` — never `import * as`, which keeps every export of solid-js in the chunk (14.8 kB minified, measured) |
 | Where `useUi()` reads | the request — `currentLocale()`, `currentTimeZone()`, `useI18n()` | `<UiProvider>`, through Solid's context |
 | `<UiProvider>` | **throws** `X_UI_RUNTIME_MISSING` | the one injection point |
 
@@ -224,7 +224,14 @@ import '../../shared/global'; // `shared/global.scss` is the app's one `@use '@u
 import { createTranslator } from '@ultimat3/i18n';
 import { setSolidRuntime, UiProvider } from '@ultimat3/ui';
 import type { JSX } from 'solid-js';
-import * as solidRuntime from 'solid-js';
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js';
 import { render } from 'solid-js/web';
 
 interface Props {
@@ -240,7 +247,10 @@ interface Props {
 export function mount(el: HTMLElement, props: Props): void {
   // NOT `await import('solid-js')`: the chunk already carries Solid statically, so the await buys
   // no bytes and makes `mount` async — and the hydration runtime calls it synchronously.
-  setSolidRuntime(solidRuntime);
+  // NOT `import * as solidRuntime` either: a namespace handed to a function cannot be shaken, and
+  // it costs 14.8 kB of solid-js per island chunk that nothing calls. The six picks are the whole
+  // contract.
+  setSolidRuntime({ createContext, useContext, createSignal, createMemo, createEffect, onCleanup });
   el.textContent = ''; // Solid's `render` APPENDS; the server's shell would stay above this one.
   render(
     () => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "19.1.2",
+  "version": "19.2.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "license": "MIT",
   "type": "module",
@@ -44,10 +44,10 @@
     "icons": "bun run src/icons/build-icons.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "19.1.2",
-    "@ultimat3/i18n": "19.1.2",
-    "@ultimat3/money": "19.1.2",
-    "@ultimat3/time": "19.1.2"
+    "@ultimat3/core": "19.2.0",
+    "@ultimat3/i18n": "19.2.0",
+    "@ultimat3/money": "19.2.0",
+    "@ultimat3/time": "19.2.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/a11y.ts

@@ -197,6 +197,25 @@ export function createRovingTabindex(
 
 export type Politeness = 'polite' | 'assertive';
 
+/**
+ * One region per politeness level — this plus `-polite` / `-assertive` is the id — and this on its
+ * own is the CLASS both of them wear, because they are hidden identically.
+ *
+ * A class, and not the `region.style.cssText` this wrote until 19.1.3: a style a script applies at
+ * runtime is not among the inline `<style>` bodies the framework's own CSP hashed at render time
+ * (`packages/cli/src/style-csp.ts`, sent by `dev-roles.ts`), so a clean browser logged `Applying
+ * inline style violates the following Content Security Policy directive 'style-src'` on every page
+ * load — and an app that promotes that report-only policy to enforcing would have the declaration
+ * dropped and the announcement painted on screen as visible page content. The rules live in
+ * `tokens/reset.scss`, through the same `visually-hidden` mixin every other off-screen label in
+ * this package uses.
+ *
+ * That the app loads this package's global stylesheet is not a new assumption — every rule this
+ * package emits reads a custom property from it, and `x verify` refuses a document defining none
+ * (`X_STYLES_GLOBAL_MISSING`). Being ANNOUNCED does not depend on it either way: `aria-live` is
+ * read off the accessibility tree, so a region with no stylesheet is still read out, and only the
+ * hiding is lost.
+ */
 const LIVE_REGION_ID = 'ultimate-live-region';
 
 /**
@@ -211,11 +230,10 @@ export function announce(message: string, politeness: Politeness = 'polite'): vo
   if (region === null) {
     region = document.createElement('div');
     region.id = id;
+    region.className = LIVE_REGION_ID;
     region.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
     region.setAttribute('aria-live', politeness);
     region.setAttribute('aria-atomic', 'true');
-    region.style.cssText =
-      'position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)';
     document.body.appendChild(region);
   }
   region.textContent = '';

package/src/components/Divider.module.scss

@@ -23,7 +23,7 @@
   color: t.role('fg-muted');
   font-size: t.text(xs);
   text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: t.tracking(wide);
 
   &::before,
   &::after {

package/src/errors.ts

@@ -107,7 +107,7 @@ export function providerNeedsRuntimeError(): UiError {
     code: UI_ERROR_CODES.runtimeMissing,
     cause:
       '<UiProvider> was rendered with no Solid runtime registered, so its locale, time zone, currency and translator would reach no component',
-    fix: "in an island, paste `import * as solidRuntime from 'solid-js';` at the top of the *.island.tsx and `setSolidRuntime(solidRuntime);` as the first line of its mount(), above the render() that builds <UiProvider>; on the server, delete <UiProvider> — useUi() already reads the request locale and time zone",
+    fix: "in an island, paste `import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from 'solid-js';` at the top of the *.island.tsx and `setSolidRuntime({ createContext, useContext, createSignal, createMemo, createEffect, onCleanup });` as the first line of its mount(), above the render() that builds <UiProvider> — six named imports, never `import * as`, which keeps all of solid-js in the chunk; on the server, delete <UiProvider> — useUi() already reads the request locale and time zone",
   });
 }
 

package/src/theme/runtime-slot.ts

@@ -10,7 +10,12 @@ import type { SolidRuntime } from './solid-adapter';
 
 let runtime: SolidRuntime | null = null;
 
-/** Register once, in the app entry, before the first render. */
+/**
+ * Register once, in the app entry, before the first render. Hand it the six named imports —
+ * `{ createContext, useContext, createSignal, createMemo, createEffect, onCleanup }` — and not
+ * `import * as solidRuntime`: the namespace registers too, and costs 14.8 kB of unshaken solid-js
+ * per island chunk (`solid-adapter.ts` has the measurement).
+ */
 export function setSolidRuntime(next: SolidRuntime): void {
   runtime = next;
 }

package/src/theme/solid-adapter.ts

@@ -29,7 +29,15 @@ export interface SolidContext<T> {
   readonly Provider: (props: { value: T; children: JSX.Element }) => JSX.Element;
 }
 
-/** The exact slice of solid-js the design system touches. */
+/**
+ * The exact slice of solid-js the design system touches — six functions, and the registration is
+ * meant to be handed exactly those six as NAMED imports: `setSolidRuntime({ createContext,
+ * useContext, createSignal, createMemo, createEffect, onCleanup })`. A `typeof import('solid-js')`
+ * namespace still satisfies this shape and still registers, but a namespace object passed to a
+ * function is one the bundler cannot shake — every export of solid-js stays in the chunk. Measured
+ * with the island bundler's own settings (minified, production, no splitting): the namespace form
+ * is 28,556 B against 13,708 B for the six picks, 14.8 kB per island that nothing ever calls.
+ */
 export interface SolidRuntime {
   createContext<T>(defaultValue: T): SolidContext<T>;
   useContext<T>(context: SolidContext<T>): T;
@@ -64,7 +72,7 @@ export function solid(): SolidRuntime {
       // ONE literal, never a concatenation: `fix-scan.ts` reads a single literal in this position
       // and counts anything else `unreadable`, so a fix split across `+` is a fix the gate stops
       // checking.
-      "paste `import * as solidRuntime from 'solid-js';` at the top of your *.island.tsx and `setSolidRuntime(solidRuntime);` as the first line of its mount(), above render() — a server render needs none",
+      "paste `import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from 'solid-js';` at the top of your *.island.tsx and `setSolidRuntime({ createContext, useContext, createSignal, createMemo, createEffect, onCleanup });` as the first line of its mount(), above render() — six named imports, never `import * as`, which keeps all of solid-js in the chunk; a server render needs none",
     );
   }
   return INERT_SOLID_RUNTIME;

package/src/tokens/_typography.scss

@@ -81,3 +81,7 @@ $letter-spacing: (
 @function leading($name) {
   @return var(--leading-#{$name});
 }
+
+@function tracking($name) {
+  @return var(--tracking-#{$name});
+}

package/src/tokens/reset.scss

@@ -1,5 +1,6 @@
 // Modern reset. Assumes `theme.scss` has already run — every value here is a
-// token, so the reset itself flips with the theme.
+// token, so the reset itself flips with the theme. Plus the one GLOBAL class the package owns:
+// the element wearing it is created by `announce()` at runtime, so no component module can hold it.
 
 @use 'index' as t;
 
@@ -41,7 +42,7 @@ h6 {
   color: t.role('fg-strong');
   font-weight: t.weight(semibold);
   line-height: t.leading(tight);
-  letter-spacing: var(--tracking-tight);
+  letter-spacing: t.tracking(tight);
   text-wrap: balance;
 }
 
@@ -134,6 +135,15 @@ html:has(dialog:modal) {
   overflow: hidden;
 }
 
+// The live region `announce()` (`../a11y.ts`) appends to <body>, hidden from here rather than
+// through `element.style`: a style a script applies at runtime is not among the inline styles the
+// CSP the framework itself sends has hashed, so it logged a `style-src` violation on every page
+// load and would lose its styling outright under an enforcing policy — putting a screen-reader
+// message on screen. Off-screen, never `display: none`, which would stop it being announced at all.
+.ultimate-live-region {
+  @include t.visually-hidden;
+}
+
 // Global motion guard. Placed last so it wins over every component rule.
 @media (prefers-reduced-motion: reduce) {
   html {