@ultimat3/ui 1.2.0 → 2.0.0

package/src/icons/glyphs/zodiac-scorpio.ts

@@ -0,0 +1,11 @@
+// The Lucide "zodiac-scorpio" glyph as data. GENERATED by src/icons/build-icons.ts — do not edit.
+// Icon artwork © Lucide contributors, ISC (see src/icons/LICENSE.lucide).
+
+import type { IconGlyph } from '../../components/icon-glyph';
+
+export const iconZodiacScorpio: IconGlyph = [
+  ['path', { d: 'M10 19V5.5a1 1 0 0 1 5 0V17a2 2 0 0 0 2 2h5l-3-3' }],
+  ['path', { d: 'm22 19-3 3' }],
+  ['path', { d: 'M5 19V5.5a1 1 0 0 1 5 0' }],
+  ['path', { d: 'M5 5.5A2.5 2.5 0 0 0 2.5 3' }],
+];

package/src/icons/glyphs/zodiac-taurus.ts

@@ -0,0 +1,9 @@
+// The Lucide "zodiac-taurus" glyph as data. GENERATED by src/icons/build-icons.ts — do not edit.
+// Icon artwork © Lucide contributors, ISC (see src/icons/LICENSE.lucide).
+
+import type { IconGlyph } from '../../components/icon-glyph';
+
+export const iconZodiacTaurus: IconGlyph = [
+  ['circle', { cx: '12', cy: '15', r: '6' }],
+  ['path', { d: 'M18 3A6 6 0 0 1 6 3' }],
+];

package/src/icons/glyphs/zodiac-virgo.ts

@@ -0,0 +1,11 @@
+// The Lucide "zodiac-virgo" glyph as data. GENERATED by src/icons/build-icons.ts — do not edit.
+// Icon artwork © Lucide contributors, ISC (see src/icons/LICENSE.lucide).
+
+import type { IconGlyph } from '../../components/icon-glyph';
+
+export const iconZodiacVirgo: IconGlyph = [
+  ['path', { d: 'M11 5.5a1 1 0 0 1 5 0V16a5 5 0 0 0 5 5' }],
+  ['path', { d: 'M16 11.5a1 1 0 0 1 5 0V16a5 5 0 0 1-5 5' }],
+  ['path', { d: 'M6 19V6a3 3 0 0 0-3-3h0' }],
+  ['path', { d: 'M6 5.5a1 1 0 0 1 5 0V19' }],
+];

package/src/icons/glyphs/zoom-in.ts

@@ -0,0 +1,11 @@
+// The Lucide "zoom-in" glyph as data. GENERATED by src/icons/build-icons.ts — do not edit.
+// Icon artwork © Lucide contributors, ISC (see src/icons/LICENSE.lucide).
+
+import type { IconGlyph } from '../../components/icon-glyph';
+
+export const iconZoomIn: IconGlyph = [
+  ['circle', { cx: '11', cy: '11', r: '8' }],
+  ['line', { x1: '21', x2: '16.65', y1: '21', y2: '16.65' }],
+  ['line', { x1: '11', x2: '11', y1: '8', y2: '14' }],
+  ['line', { x1: '8', x2: '14', y1: '11', y2: '11' }],
+];

package/src/icons/glyphs/zoom-out.ts

@@ -0,0 +1,10 @@
+// The Lucide "zoom-out" glyph as data. GENERATED by src/icons/build-icons.ts — do not edit.
+// Icon artwork © Lucide contributors, ISC (see src/icons/LICENSE.lucide).
+
+import type { IconGlyph } from '../../components/icon-glyph';
+
+export const iconZoomOut: IconGlyph = [
+  ['circle', { cx: '11', cy: '11', r: '8' }],
+  ['line', { x1: '21', x2: '16.65', y1: '21', y2: '16.65' }],
+  ['line', { x1: '8', x2: '14', y1: '11', y2: '11' }],
+];

package/src/index.ts

@@ -18,13 +18,17 @@ export {
   resetIdCounter,
   useId,
 } from './a11y';
-export type { AlertProps } from './components/Alert';
+export type { AccordionItem, AccordionProps } from './components/Accordion';
 // --- components --------------------------------------------------------------
+export { Accordion } from './components/Accordion';
+export type { AlertProps } from './components/Alert';
 export { Alert } from './components/Alert';
 export type { AppShellProps } from './components/AppShell';
 export { AppShell } from './components/AppShell';
 export type { AvatarProps } from './components/Avatar';
 export { Avatar, initialsOf } from './components/Avatar';
+export type { AccordionSection } from './components/accordion-view';
+export { accordionOpenIds } from './components/accordion-view';
 export type { ShellIds, ShellLandmark, ShellSlots } from './components/app-shell-view';
 export { shellIds, shellLandmarks } from './components/app-shell-view';
 export type { BadgeProps } from './components/Badge';
@@ -37,8 +41,12 @@ 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 { ContainerProps, ContainerSize } from './components/Container';
 export { Container } from './components/Container';
+export type { ComboboxOption } from './components/combobox-filter';
+export { COMBOBOX_LIMIT, filterOptions, normalizeQuery } from './components/combobox-filter';
 export type { Column, DataTableProps } from './components/DataTable';
 export { DataTable } from './components/DataTable';
 export type { DateTimeProps } from './components/DateTime';
@@ -49,6 +57,8 @@ export type { DividerProps } from './components/Divider';
 export { Divider } from './components/Divider';
 export type { DrawerProps, DrawerSide } from './components/Drawer';
 export { Drawer } from './components/Drawer';
+export type { DropzoneProps } from './components/Dropzone';
+export { Dropzone } from './components/Dropzone';
 export type {
   DateStyle,
   DateTimeFormatter,
@@ -63,24 +73,50 @@ export type { ErrorStateProps } from './components/ErrorState';
 export { ErrorState, errorParts } from './components/ErrorState';
 export type { FieldControl, FieldProps } from './components/Field';
 export { Field } from './components/Field';
+export type { FileInputProps } from './components/FileInput';
+export { FileInput } from './components/FileInput';
 export type { FormProps } from './components/Form';
 export { Form } from './components/Form';
+export type {
+  FileCandidate,
+  FileRejection,
+  FileRejectionReason,
+  FileSelection,
+  FileSelectionLimits,
+} from './components/file-input-view';
+export {
+  acceptMatches,
+  formatBytes,
+  progressPercent,
+  selectFiles,
+} from './components/file-input-view';
 export type { GridProps } from './components/Grid';
 export { Grid } from './components/Grid';
 export type { HeadingLevel, HeadingTag } from './components/heading-level';
 export { HEADING_LEVELS, headingTag, nextHeadingLevel } from './components/heading-level';
+export type { IconProps } from './components/Icon';
+// --- icons: the glyphs themselves are per-icon modules, `@ultimat3/ui/icons/<name>` ---------
+export { Icon } from './components/Icon';
 export type { IconButtonProps } from './components/IconButton';
 export { IconButton } from './components/IconButton';
 export type { ImageProps } from './components/Image';
 export { Image } from './components/Image';
+export type { InfiniteScrollProps } from './components/InfiniteScroll';
+export { InfiniteScroll } from './components/InfiniteScroll';
 export type { InputProps, InputType } from './components/Input';
 export { Input } from './components/Input';
+export type { IconElement, IconGlyph, IconTag } from './components/icon-glyph';
+export { ICON_TAGS, iconElements, isIconTag } from './components/icon-glyph';
 export type { ImageBox, ImageLoadingHints, ImageVariant } from './components/image-source';
 export { boxFor, loadingHints, srcsetFor } from './components/image-source';
+export type { LoadMoreInput, LoadMoreState } from './components/infinite-scroll-view';
+export { loadMoreState } from './components/infinite-scroll-view';
 export type { LinkProps } from './components/Link';
 export { Link } from './components/Link';
 export type { LocaleSwitcherProps } from './components/LocaleSwitcher';
 export { LocaleSwitcher, localeLabel } from './components/LocaleSwitcher';
+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 { MoneyProps } from './components/Money';
@@ -136,11 +172,15 @@ export { BUTTON_VARIANTS, SIZES, TONES } from './components/variants';
 export type { ClassValue } from './cx';
 // --- helpers -----------------------------------------------------------------
 export { cx } from './cx';
+export type { Debounced } from './debounce';
+export { DEBOUNCE_DEFAULT_MS, debounce } from './debounce';
 export type { UiErrorCode } from './errors';
 export {
   invalidBrandTokenError,
+  invalidGlyphError,
   invalidThemeError,
   invalidValueError,
+  providerNeedsRuntimeError,
   runtimeMissingError,
   UI_ERROR_CODES,
   UiError,
@@ -149,9 +189,10 @@ export {
 export type { UiKey } from './i18n-keys';
 export { UI_KEYS } from './i18n-keys';
 export type { Brand, BrandInput, FontSlot } from './theme/brand';
-export { brandStyleTag, defineTheme, FONT_SLOTS } 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,
@@ -160,6 +201,7 @@ export {
   uiContext,
   useUi,
 } from './theme/context';
+export { INERT_SOLID_RUNTIME } from './theme/inert-runtime';
 export {
   THEME_INLINE_SCRIPT,
   themeInlineScriptCspSource,

package/src/theme/brand.ts

@@ -3,7 +3,7 @@
 // level it emits. There is deliberately no SCSS `@use ... with ()` seam — two ways to change the
 // accent colour is the ambiguity axiom 1 exists to delete.
 
-import { invalidBrandTokenError, unknownTokenError } from '../errors';
+import { invalidBrandTokenError, runtimeMissingError, unknownTokenError } from '../errors';
 import { parseChannels } from '../tokens/contrast';
 import {
   COLOR_ROLES,
@@ -72,6 +72,21 @@ export function brandStyleTag(brand: Brand): string {
   return `<style>${brand.css}</style>`;
 }
 
+/**
+ * `'sha256-…'` for exactly what `brandStyleTag` puts between the tags — the one `style-src` source
+ * that admits it under the framework's locked CSP. Server/build-only, like the theme script's
+ * hash: `defineTheme` runs at the app's entry point, and the header is written there too.
+ */
+export function brandStyleCspSource(brand: Brand): string {
+  if (typeof Bun === 'undefined') {
+    throw runtimeMissingError(
+      'Bun.CryptoHasher to hash the brand stylesheet',
+      'call brandStyleCspSource() during build or SSR, never in browser code',
+    );
+  }
+  return `'sha256-${new Bun.CryptoHasher('sha256').update(brand.css).digest('base64')}'`;
+}
+
 function rule(selector: string, declarations: readonly string[]): string {
   return `${selector} {\n${declarations.map((line) => `  ${line}`).join('\n')}\n}`;
 }

package/src/theme/context.ts

@@ -1,12 +1,20 @@
-// The ambient presentation contract every component reads: theme, locale, tz,
-// currency, direction, translator. Formatting components take nothing from a
-// process-wide default — everything they need arrives here, via UiProvider.
+// 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.
 
 import type { Translator } from '@ultimat3/i18n';
-import { createTranslator, type Direction, directionOf, type Locale } from '@ultimat3/i18n';
-import type { TimeZone } from '@ultimat3/time';
+import {
+  createTranslator,
+  currentDirection,
+  currentLocale,
+  type Direction,
+  directionOf,
+  type Locale,
+  useI18n,
+} from '@ultimat3/i18n';
+import { currentTimeZone, type TimeZone } from '@ultimat3/time';
 import type { Theme } from '../tokens/tokens';
-import { type SolidContext, type SolidRuntime, solid } from './solid-adapter';
+import { hasSolidRuntime, type SolidContext, type SolidRuntime, solid } from './solid-adapter';
 
 export type { Direction };
 
@@ -42,6 +50,30 @@ 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>;
@@ -60,6 +92,14 @@ export function uiContext(): SolidContext<UiContextValue> {
   return cached.context;
 }
 
+/**
+ * `solid()` is the loudness gate as much as the runtime lookup: it throws when a DOM render lost
+ * its runtime, and returns the inert one when there is no DOM at all. On that second path the
+ * 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.
+ */
 export function useUi(): UiContextValue {
-  return solid().useContext(uiContext());
+  const runtime = solid();
+  return hasSolidRuntime() ? runtime.useContext(uiContext()) : ambientUiContext();
 }

package/src/theme/inert-runtime.ts

@@ -0,0 +1,48 @@
+// The runtime a server render gets: signals that hold, memos that recompute on read, effects and
+// cleanups that never run. It is what a static page IS — markup with no reactive graph behind it —
+// so nothing here is a stub waiting for a real implementation.
+
+import type { Accessor, Setter, SolidContext, SolidRuntime } from './solid-adapter';
+
+/**
+ * One frozen instance, never a factory. `uiContext()` caches its context keyed on runtime
+ * identity, so a fresh object per call would rebuild the context on every read and hand two
+ * consumers two contexts that are equal and not the same.
+ */
+export const INERT_SOLID_RUNTIME: SolidRuntime = Object.freeze({
+  createContext: <T>(defaultValue: T): SolidContext<T> => ({
+    id: Symbol('ultimate.ui.inert-context'),
+    defaultValue,
+    // Inert children pass straight through: the tree is already built by the time the renderer
+    // walks it, so a Provider has nothing to provide to. `useUi()` reads the request context
+    // instead — see `ambientUiContext()`.
+    Provider: (props) => props.children as never,
+  }),
+
+  // Every descendant is walked outside any owner, so the default value is the only value there
+  // has ever been on this path — with a real Solid runtime registered too, which is why
+  // `UiProvider` refuses the inert path rather than looking like it worked.
+  useContext: <T>(context: SolidContext<T>): T => context.defaultValue,
+
+  // A plain box. `createSignal` must still round-trip a write, because a component may set state
+  // during its own render (a derived default), and reading back the value it just wrote is not
+  // reactivity — it is assignment.
+  createSignal: <T>(value: T): [Accessor<T>, Setter<T>] => {
+    let current = value;
+    return [
+      () => current,
+      (next: T) => {
+        current = next;
+      },
+    ];
+  },
+
+  // No graph to memoize against: recomputing on read is correct and cheaper than tracking.
+  createMemo: <T>(fn: () => T) => fn,
+
+  // The one thing that MUST NOT run. Every effect in this package is DOM work — `showModal()`,
+  // `addEventListener`, `IntersectionObserver` — and the server has no DOM to do it to.
+  createEffect: () => {},
+
+  onCleanup: () => {},
+});

package/src/theme/provider.tsx

@@ -4,6 +4,7 @@
 import { directionOf, type Locale, type Translator } from '@ultimat3/i18n';
 import type { TimeZone } from '@ultimat3/time';
 import type { JSX } from 'solid-js';
+import { providerNeedsRuntimeError } from '../errors';
 import type { Theme } from '../tokens/tokens';
 import {
   fallbackTranslator,
@@ -13,7 +14,7 @@ import {
   type UiContextValue,
   uiContext,
 } from './context';
-import { solid } from './solid-adapter';
+import { hasSolidRuntime, solid } from './solid-adapter';
 
 export interface UiProviderProps {
   theme?: Theme | undefined;
@@ -27,8 +28,13 @@ export interface UiProviderProps {
 /**
  * Also reflects `lang` and `dir` onto <html>, so the document, native form
  * controls, and every logical property agree with the injected locale.
+ *
+ * Client-only, and loud about it: `solid()` hands a server render an inert runtime so every other
+ * component still renders, but a Provider is the one thing that inert runtime cannot honour. On
+ * the server the same values reach `useUi()` from the request context instead.
  */
 export function UiProvider(props: UiProviderProps): JSX.Element {
+  if (!hasSolidRuntime()) throw providerNeedsRuntimeError();
   const rt = solid();
   const value = rt.createMemo<UiContextValue>(() => {
     const locale = props.locale ?? UI_DEFAULT_LOCALE;

package/src/theme/solid-adapter.ts

@@ -1,9 +1,10 @@
 // Solid runtime adapter. @ultimat3/ui imports *types* from solid-js and nothing
 // else, so the package installs, typechecks, and tests with no reactive runtime
-// present. The app entry (or @ultimat3/render) registers the real one once.
+// present. The CLIENT entry registers the real one once; a server render gets the inert one.
 
 import type { JSX } from 'solid-js';
 import { runtimeMissingError } from '../errors';
+import { INERT_SOLID_RUNTIME } from './inert-runtime';
 
 export type Accessor<T> = () => T;
 export type Setter<T> = (next: T) => void;
@@ -40,12 +41,25 @@ export function clearSolidRuntime(): void {
   runtime = null;
 }
 
+/**
+ * A DOM is the whole of the question. With one, a component that reaches for a runtime nobody
+ * registered is a real bug — the theme toggle that does nothing — so it throws. Without one there
+ * is no reactivity to lose: the server calls each component once, through an inert JSX factory,
+ * and `INERT_SOLID_RUNTIME` is an honest account of that, not a degradation of a working path.
+ *
+ * The same probe `browserThemeEnv()` uses, for the same reason and with the same answer.
+ */
+function hasDom(): boolean {
+  return typeof document !== 'undefined' && typeof window !== 'undefined';
+}
+
 export function solid(): SolidRuntime {
-  if (runtime === null) {
+  if (runtime !== null) return runtime;
+  if (hasDom()) {
     throw runtimeMissingError(
       'a registered Solid runtime',
-      "add setSolidRuntime(await import('solid-js')) to the app entry before render",
+      "add setSolidRuntime(await import('solid-js')) to the CLIENT entry before render — a server render needs none",
     );
   }
-  return runtime;
+  return INERT_SOLID_RUNTIME;
 }