@sigx/lynx-zero 0.4.9 → 0.5.0

package/src/contract.ts

@@ -1,136 +1,136 @@
-/**
- * The shared design-system contract.
- *
- * `@sigx/lynx-zero` is the design-system-neutral foundation that DS packages
- * (`@sigx/lynx-daisyui`, `@sigx/lynx-heroui`, …) build on. This module is the
- * *vocabulary* they agree on — size scales, semantic colors, theme token
- * names, and common prop shapes — so that switching an app from one design
- * system to another is mostly an import swap, not a rewrite.
- *
- * Rules of the contract:
- *
- * - DS packages **extend** these types, they never redeclare them. A daisy
- *   button is `color: ColorVariant` plus daisy-specific extras; its size IS
- *   `SizeScale`. Drift fails `pnpm typecheck`.
- * - `variant` is intentionally NOT in the contract — fill style (outline,
- *   soft, bordered, flat, …) is design-system chrome and differs per DS.
- * - Theme CSS custom-property NAMES are part of the contract (see below);
- *   the *values* come from each DS's registered themes.
- *
- * ## Structural token-name contract
- *
- * Every DS theme resolves against the same custom-property names:
- *
- * - Colors:    `--color-<ColorToken>` (e.g. `--color-primary`, `--color-base-100`)
- * - Roundness: `--radius-selector` | `--radius-field` | `--radius-box`
- * - Sizing:    `--size-selector` | `--size-field`, `--size-xs` … `--size-lg`
- * - Text ramp: `--text-xs` … `--text-3xl` (app text, font-scaled)
- * - Controls:  `--font-xs` … `--font-lg` (control-internal labels, unscaled)
- * - Misc:      `--disabled-opacity`
- */
-import type { Define } from '@sigx/lynx';
-
-/** The shared component size scale. */
-export type SizeScale = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/**
- * Semantic color names — the shared `color` prop vocabulary. A DS maps each
- * onto its palette (HeroUI: `danger`→`error`, `default`→`neutral`, …).
- *
- * Single source of truth: the `ColorVariant` union, the `-content` / `-soft`
- * token derivations, and the runtime `COLOR_TOKENS` Set all derive from this
- * tuple.
- */
-export const COLOR_VARIANT_LIST = [
-  'primary', 'secondary', 'accent', 'neutral',
-  'info', 'success', 'warning', 'error',
-] as const;
-
-export type ColorVariant = typeof COLOR_VARIANT_LIST[number];
-
-/**
- * Tokens authored by every theme: each variant + its `-content` pairing,
- * plus the base surfaces.
- */
-export type CoreColorToken =
-  | ColorVariant
-  | `${ColorVariant}-content`
-  | 'base-100' | 'base-200' | 'base-300' | 'base-content';
-
-/**
- * Soft (tinted-surface) tokens — one per variant, emitted as
- * `--color-<variant>-soft`. Lynx CSS can't alpha-compose `var()` colors, so
- * these are *materialized in the palette*: computed at theme registration
- * (`Theme.softMix` of the variant color mixed into `base-100`) unless the
- * theme provides them explicitly. They are what soft/flat component fills
- * read (`btn-soft`, hero's `flat`).
- */
-export type SoftColorToken = `${ColorVariant}-soft`;
-
-/**
- * The full set of semantic color tokens every *registered* theme carries,
- * exposed as `--color-<token>` CSS custom properties. Authors write the core
- * tokens; the registry completes the soft ones.
- */
-export type ColorToken = CoreColorToken | SoftColorToken;
-
-const COLOR_TOKEN_LIST: readonly ColorToken[] = [
-  ...COLOR_VARIANT_LIST.flatMap((v): ColorToken[] => [v, `${v}-content`, `${v}-soft`]),
-  'base-100', 'base-200', 'base-300', 'base-content',
-];
-
-const COLOR_TOKENS: ReadonlySet<ColorToken> = new Set(COLOR_TOKEN_LIST);
-
-/**
- * Resolve a color value to a CSS color string.
- *
- * - Known semantic tokens (e.g. `'base-100'`) → `var(--color-base-100)`.
- * - Anything else (`'#ffaa00'`, `'rgb(…)'`, `'var(--my-custom)'`) passes
- *   through unchanged.
- */
-export function resolveColorToken(value: string): string {
-  return (COLOR_TOKENS as ReadonlySet<string>).has(value)
-    ? `var(--color-${value})`
-    : value;
-}
-
-/**
- * Accepts a semantic color token (autocompleted) OR any raw CSS color
- * string (`'#fff'`, `'rgb(…)'`, `'var(--foo)'`).
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/ban-types
-export type BackgroundValue = ColorToken | (string & {});
-
-// ---------------------------------------------------------------------------
-// Common prop fragments — DS component props intersect these instead of
-// redeclaring the conventions.
-// ---------------------------------------------------------------------------
-
-/** Arbitrary extra classes appended after the DS-computed ones. */
-export type WithClass = Define.Prop<'class', string, false>;
-
-/** Disabled: non-interactive + DS disabled styling. */
-export type WithDisabled = Define.Prop<'disabled', boolean, false>;
-
-/** Semantic color of the component (`primary`, `error`, …). */
-export type WithColor = Define.Prop<'color', ColorVariant, false>;
-
-/** Component size on the shared scale. */
-export type WithSize = Define.Prop<'size', SizeScale, false>;
-
-/** The shared press event — sigx convention is `onPress`, not `onTap`/`onClick`. */
-export type PressEvent = Define.Event<'press', void>;
-
-/**
- * Accessibility passthrough for interactive components — mirrors the
- * `accessibility-*` surface `@sigx/lynx-gestures`'s `Pressable` accepts on
- * its host view (the same node that owns the gesture handler, so
- * screen-reader activation works). DS components intersect this and forward
- * the props verbatim.
- */
-export type WithAccessibility =
-  & Define.Prop<'accessibility-element', boolean, false>
-  & Define.Prop<'accessibility-label', string, false>
-  & Define.Prop<'accessibility-role', string, false>
-  & Define.Prop<'accessibility-trait', string, false>
-  & Define.Prop<'accessibility-status', string, false>;
+/**
+ * The shared design-system contract.
+ *
+ * `@sigx/lynx-zero` is the design-system-neutral foundation that DS packages
+ * (`@sigx/lynx-daisyui`, `@sigx/lynx-heroui`, …) build on. This module is the
+ * *vocabulary* they agree on — size scales, semantic colors, theme token
+ * names, and common prop shapes — so that switching an app from one design
+ * system to another is mostly an import swap, not a rewrite.
+ *
+ * Rules of the contract:
+ *
+ * - DS packages **extend** these types, they never redeclare them. A daisy
+ *   button is `color: ColorVariant` plus daisy-specific extras; its size IS
+ *   `SizeScale`. Drift fails `pnpm typecheck`.
+ * - `variant` is intentionally NOT in the contract — fill style (outline,
+ *   soft, bordered, flat, …) is design-system chrome and differs per DS.
+ * - Theme CSS custom-property NAMES are part of the contract (see below);
+ *   the *values* come from each DS's registered themes.
+ *
+ * ## Structural token-name contract
+ *
+ * Every DS theme resolves against the same custom-property names:
+ *
+ * - Colors:    `--color-<ColorToken>` (e.g. `--color-primary`, `--color-base-100`)
+ * - Roundness: `--radius-selector` | `--radius-field` | `--radius-box`
+ * - Sizing:    `--size-selector` | `--size-field`, `--size-xs` … `--size-lg`
+ * - Text ramp: `--text-xs` … `--text-3xl` (app text, font-scaled)
+ * - Controls:  `--font-xs` … `--font-lg` (control-internal labels, unscaled)
+ * - Misc:      `--disabled-opacity`
+ */
+import type { Define } from '@sigx/lynx';
+
+/** The shared component size scale. */
+export type SizeScale = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Semantic color names — the shared `color` prop vocabulary. A DS maps each
+ * onto its palette (HeroUI: `danger`→`error`, `default`→`neutral`, …).
+ *
+ * Single source of truth: the `ColorVariant` union, the `-content` / `-soft`
+ * token derivations, and the runtime `COLOR_TOKENS` Set all derive from this
+ * tuple.
+ */
+export const COLOR_VARIANT_LIST = [
+  'primary', 'secondary', 'accent', 'neutral',
+  'info', 'success', 'warning', 'error',
+] as const;
+
+export type ColorVariant = typeof COLOR_VARIANT_LIST[number];
+
+/**
+ * Tokens authored by every theme: each variant + its `-content` pairing,
+ * plus the base surfaces.
+ */
+export type CoreColorToken =
+  | ColorVariant
+  | `${ColorVariant}-content`
+  | 'base-100' | 'base-200' | 'base-300' | 'base-content';
+
+/**
+ * Soft (tinted-surface) tokens — one per variant, emitted as
+ * `--color-<variant>-soft`. Lynx CSS can't alpha-compose `var()` colors, so
+ * these are *materialized in the palette*: computed at theme registration
+ * (`Theme.softMix` of the variant color mixed into `base-100`) unless the
+ * theme provides them explicitly. They are what soft/flat component fills
+ * read (`btn-soft`, hero's `flat`).
+ */
+export type SoftColorToken = `${ColorVariant}-soft`;
+
+/**
+ * The full set of semantic color tokens every *registered* theme carries,
+ * exposed as `--color-<token>` CSS custom properties. Authors write the core
+ * tokens; the registry completes the soft ones.
+ */
+export type ColorToken = CoreColorToken | SoftColorToken;
+
+const COLOR_TOKEN_LIST: readonly ColorToken[] = [
+  ...COLOR_VARIANT_LIST.flatMap((v): ColorToken[] => [v, `${v}-content`, `${v}-soft`]),
+  'base-100', 'base-200', 'base-300', 'base-content',
+];
+
+const COLOR_TOKENS: ReadonlySet<ColorToken> = new Set(COLOR_TOKEN_LIST);
+
+/**
+ * Resolve a color value to a CSS color string.
+ *
+ * - Known semantic tokens (e.g. `'base-100'`) → `var(--color-base-100)`.
+ * - Anything else (`'#ffaa00'`, `'rgb(…)'`, `'var(--my-custom)'`) passes
+ *   through unchanged.
+ */
+export function resolveColorToken(value: string): string {
+  return (COLOR_TOKENS as ReadonlySet<string>).has(value)
+    ? `var(--color-${value})`
+    : value;
+}
+
+/**
+ * Accepts a semantic color token (autocompleted) OR any raw CSS color
+ * string (`'#fff'`, `'rgb(…)'`, `'var(--foo)'`).
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/ban-types
+export type BackgroundValue = ColorToken | (string & {});
+
+// ---------------------------------------------------------------------------
+// Common prop fragments — DS component props intersect these instead of
+// redeclaring the conventions.
+// ---------------------------------------------------------------------------
+
+/** Arbitrary extra classes appended after the DS-computed ones. */
+export type WithClass = Define.Prop<'class', string, false>;
+
+/** Disabled: non-interactive + DS disabled styling. */
+export type WithDisabled = Define.Prop<'disabled', boolean, false>;
+
+/** Semantic color of the component (`primary`, `error`, …). */
+export type WithColor = Define.Prop<'color', ColorVariant, false>;
+
+/** Component size on the shared scale. */
+export type WithSize = Define.Prop<'size', SizeScale, false>;
+
+/** The shared press event — sigx convention is `onPress`, not `onTap`/`onClick`. */
+export type PressEvent = Define.Event<'press', void>;
+
+/**
+ * Accessibility passthrough for interactive components — mirrors the
+ * `accessibility-*` surface `@sigx/lynx-gestures`'s `Pressable` accepts on
+ * its host view (the same node that owns the gesture handler, so
+ * screen-reader activation works). DS components intersect this and forward
+ * the props verbatim.
+ */
+export type WithAccessibility =
+  & Define.Prop<'accessibility-element', boolean, false>
+  & Define.Prop<'accessibility-label', string, false>
+  & Define.Prop<'accessibility-role', string, false>
+  & Define.Prop<'accessibility-trait', string, false>
+  & Define.Prop<'accessibility-status', string, false>;

package/src/index.ts

@@ -1,101 +1,101 @@
-// @sigx/lynx-zero — design-system-neutral UI foundation.
-//
-// Holds what every design-system package (@sigx/lynx-daisyui,
-// @sigx/lynx-heroui, …) shares: the props/token contract, the theme engine,
-// layout primitives, style utilities and press-feedback defaults
-// (see signalxjs/lynx#219).
-
-// The shared contract: scales, semantic colors, prop fragments,
-// token-name conventions.
-export type {
-  SizeScale,
-  ColorVariant,
-  ColorToken,
-  CoreColorToken,
-  SoftColorToken,
-  BackgroundValue,
-  WithClass,
-  WithDisabled,
-  WithColor,
-  WithSize,
-  WithAccessibility,
-  PressEvent,
-} from './contract.js';
-export { resolveColorToken, COLOR_VARIANT_LIST } from './contract.js';
-
-// Box-model style helpers.
-export type { SpacingValue, BoxProps } from './shared/styles.js';
-export { resolveSpacing, resolveBoxStyle } from './shared/styles.js';
-
-// Press-feedback defaults for interactive components.
-export { PRESSED_SCALE, PRESSED_OPACITY } from './shared/press.js';
-
-// Headless tabs selection — shared behavior behind every DS's Tabs/Tab.
-export { useTabsSelection, provideTabsSelection } from './shared/tabs-selection.js';
-export type { TabsSelection } from './shared/tabs-selection.js';
-
-// Theme engine — registry mechanism, provider, headless controller. Theme
-// *data* (palettes, generated first-paint CSS classes) lives in each
-// design-system package, which seeds the registry at module load.
-export {
-  ThemeProvider,
-  useTheme,
-  listThemes,
-  registerTheme,
-  extendTheme,
-  pickThemeFor,
-  pairOf,
-  variantOf,
-  colorsOf,
-  radiusOf,
-  sizesOf,
-} from './theme/ThemeProvider.js';
-export type {
-  ThemeName,
-  ThemeController,
-  ThemeProviderProps,
-  Theme,
-  ThemePalette,
-  ThemeRadius,
-  ThemeSizes,
-  ThemeVariant,
-} from './theme/ThemeProvider.js';
-// Palette completion (soft tints) + the JS-side color mixer behind it.
-export { completeTheme } from './theme/registry.js';
-export type { ThemeInput, ThemePaletteInput } from './theme/registry.js';
-export { mixColors } from './theme/color-mix.js';
-// Scoped palette → concrete values for native consumers that can't read
-// CSS custom properties (platform inputs, sigx-richtext, SVG fills).
-export { useThemeColors, toHexColor, withAlpha } from './theme/use-theme-colors.js';
-export type { ThemeColors } from './theme/use-theme-colors.js';
-// Headless theme handle: import and call from anywhere — stores, services,
-// effects, app-boot — with no `<ThemeProvider>` ancestor required.
-export { themeController } from './theme/theme-state.js';
-export { StatusBarSync } from './theme/StatusBarSync.js';
-export type { StatusBarSyncProps } from './theme/StatusBarSync.js';
-// Per-screen theming (`useScreenTheme`) is deliberately NOT re-exported here:
-// it statically imports the optional `@sigx/lynx-navigation` peer, and a
-// barrel re-export would force that resolution onto every consumer. Import it
-// from the subpath instead: `@sigx/lynx-zero/screen-theme`.
-
-// Layout primitives — design-system-neutral structure (flex containers,
-// spacing, scrolling); no design-system class names involved.
-export { Row } from './layout/Row.js';
-export type { RowProps } from './layout/Row.js';
-export { Col } from './layout/Col.js';
-export type { ColProps } from './layout/Col.js';
-export { Center } from './layout/Center.js';
-export type { CenterProps } from './layout/Center.js';
-export { Spacer } from './layout/Spacer.js';
-export type { SpacerProps } from './layout/Spacer.js';
-export { ScrollView } from './layout/ScrollView.js';
-export type { ScrollViewProps } from './layout/ScrollView.js';
-
-// Swiper page indicator — design-system-neutral (pure tokens + headless
-// gesture/motion hooks, no DS class names). Both design systems re-export it.
-export { SwiperIndicator } from './components/SwiperIndicator.js';
-export type {
-  SwiperIndicatorProps,
-  SwiperIndicatorVariant,
-  SwiperIndicatorSize,
-} from './components/SwiperIndicator.js';
+// @sigx/lynx-zero — design-system-neutral UI foundation.
+//
+// Holds what every design-system package (@sigx/lynx-daisyui,
+// @sigx/lynx-heroui, …) shares: the props/token contract, the theme engine,
+// layout primitives, style utilities and press-feedback defaults
+// (see signalxjs/lynx#219).
+
+// The shared contract: scales, semantic colors, prop fragments,
+// token-name conventions.
+export type {
+  SizeScale,
+  ColorVariant,
+  ColorToken,
+  CoreColorToken,
+  SoftColorToken,
+  BackgroundValue,
+  WithClass,
+  WithDisabled,
+  WithColor,
+  WithSize,
+  WithAccessibility,
+  PressEvent,
+} from './contract.js';
+export { resolveColorToken, COLOR_VARIANT_LIST } from './contract.js';
+
+// Box-model style helpers.
+export type { SpacingValue, BoxProps } from './shared/styles.js';
+export { resolveSpacing, resolveBoxStyle } from './shared/styles.js';
+
+// Press-feedback defaults for interactive components.
+export { PRESSED_SCALE, PRESSED_OPACITY } from './shared/press.js';
+
+// Headless tabs selection — shared behavior behind every DS's Tabs/Tab.
+export { useTabsSelection, provideTabsSelection } from './shared/tabs-selection.js';
+export type { TabsSelection } from './shared/tabs-selection.js';
+
+// Theme engine — registry mechanism, provider, headless controller. Theme
+// *data* (palettes, generated first-paint CSS classes) lives in each
+// design-system package, which seeds the registry at module load.
+export {
+  ThemeProvider,
+  useTheme,
+  listThemes,
+  registerTheme,
+  extendTheme,
+  pickThemeFor,
+  pairOf,
+  variantOf,
+  colorsOf,
+  radiusOf,
+  sizesOf,
+} from './theme/ThemeProvider.js';
+export type {
+  ThemeName,
+  ThemeController,
+  ThemeProviderProps,
+  Theme,
+  ThemePalette,
+  ThemeRadius,
+  ThemeSizes,
+  ThemeVariant,
+} from './theme/ThemeProvider.js';
+// Palette completion (soft tints) + the JS-side color mixer behind it.
+export { completeTheme } from './theme/registry.js';
+export type { ThemeInput, ThemePaletteInput } from './theme/registry.js';
+export { mixColors } from './theme/color-mix.js';
+// Scoped palette → concrete values for native consumers that can't read
+// CSS custom properties (platform inputs, sigx-richtext, SVG fills).
+export { useThemeColors, toHexColor, withAlpha } from './theme/use-theme-colors.js';
+export type { ThemeColors } from './theme/use-theme-colors.js';
+// Headless theme handle: import and call from anywhere — stores, services,
+// effects, app-boot — with no `<ThemeProvider>` ancestor required.
+export { themeController } from './theme/theme-state.js';
+export { StatusBarSync } from './theme/StatusBarSync.js';
+export type { StatusBarSyncProps } from './theme/StatusBarSync.js';
+// Per-screen theming (`useScreenTheme`) is deliberately NOT re-exported here:
+// it statically imports the optional `@sigx/lynx-navigation` peer, and a
+// barrel re-export would force that resolution onto every consumer. Import it
+// from the subpath instead: `@sigx/lynx-zero/screen-theme`.
+
+// Layout primitives — design-system-neutral structure (flex containers,
+// spacing, scrolling); no design-system class names involved.
+export { Row } from './layout/Row.js';
+export type { RowProps } from './layout/Row.js';
+export { Col } from './layout/Col.js';
+export type { ColProps } from './layout/Col.js';
+export { Center } from './layout/Center.js';
+export type { CenterProps } from './layout/Center.js';
+export { Spacer } from './layout/Spacer.js';
+export type { SpacerProps } from './layout/Spacer.js';
+export { ScrollView } from './layout/ScrollView.js';
+export type { ScrollViewProps } from './layout/ScrollView.js';
+
+// Swiper page indicator — design-system-neutral (pure tokens + headless
+// gesture/motion hooks, no DS class names). Both design systems re-export it.
+export { SwiperIndicator } from './components/SwiperIndicator.js';
+export type {
+  SwiperIndicatorProps,
+  SwiperIndicatorVariant,
+  SwiperIndicatorSize,
+} from './components/SwiperIndicator.js';

package/src/layout/Center.tsx

@@ -1,41 +1,41 @@
-import { component, type Define } from '@sigx/lynx';
-import type { BackgroundValue } from '../contract.js';
-import { resolveBoxStyle } from '../shared/styles.js';
-
-export type CenterProps =
-  & Define.Prop<'width', number | string, false>
-  & Define.Prop<'height', number | string, false>
-  & Define.Prop<'flex', number, false>
-  & Define.Prop<'background', BackgroundValue, false>
-  & Define.Prop<'borderRadius', number, false>
-  & Define.Prop<'class', string, false>
-  & Define.Slot<'default'>;
-
-export const Center = component<CenterProps>(({ props, slots }) => {
-  const getStyle = (): Record<string, string | number> => {
-    const style: Record<string, string | number> = {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    };
-
-    const box = resolveBoxStyle({
-      width: props.width,
-      height: props.height,
-      flex: props.flex,
-      background: props.background,
-      borderRadius: props.borderRadius,
-    });
-    for (const key in box) {
-      style[key] = box[key] as string | number;
-    }
-
-    return style;
-  };
-
-  return () => (
-    <view class={props.class} style={getStyle()}>
-      {slots.default?.()}
-    </view>
-  );
-});
+import { component, type Define } from '@sigx/lynx';
+import type { BackgroundValue } from '../contract.js';
+import { resolveBoxStyle } from '../shared/styles.js';
+
+export type CenterProps =
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'background', BackgroundValue, false>
+  & Define.Prop<'borderRadius', number, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const Center = component<CenterProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    };
+
+    const box = resolveBoxStyle({
+      width: props.width,
+      height: props.height,
+      flex: props.flex,
+      background: props.background,
+      borderRadius: props.borderRadius,
+    });
+    for (const key in box) {
+      style[key] = box[key] as string | number;
+    }
+
+    return style;
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()}>
+      {slots.default?.()}
+    </view>
+  );
+});