@astronox/core 0.1.0 → 0.2.1

package/src/display/responsiveMedia.ts

@@ -0,0 +1,38 @@
+import type { DisplayMedia } from './contracts';
+
+export type MediaRendition = Pick<
+  DisplayMedia,
+  'contentBounds' | 'height' | 'src' | 'width'
+>;
+
+export type ResponsiveMediaInput = {
+  alt: string;
+  loading?: DisplayMedia['loading'];
+  renditions: readonly MediaRendition[];
+  sizes: string;
+};
+
+export function presentResponsiveMedia({
+  alt,
+  loading = 'lazy',
+  renditions,
+  sizes,
+}: ResponsiveMediaInput): DisplayMedia {
+  const sortedRenditions = renditions.toSorted(
+    (left, right) => left.width - right.width,
+  );
+  const smallest = sortedRenditions[0];
+  if (!smallest) throw new Error(`Missing media rendition: ${alt}`);
+
+  return {
+    ...smallest,
+    alt,
+    fit: 'contain',
+    loading,
+    sizes,
+    sources: sortedRenditions.map((rendition) => ({
+      src: rendition.src,
+      width: rendition.width,
+    })),
+  };
+}

package/src/i18n/LocalePreferenceBootstrap.astro

@@ -0,0 +1,40 @@
+---
+import type { LocaleDefinition } from './config';
+
+type Props = {
+  defaultLocale: string;
+  locales: readonly LocaleDefinition[];
+  storageKey: string;
+};
+
+const { defaultLocale, locales, storageKey } = Astro.props;
+const localeEntries = locales
+  .filter(({ id }) => id !== defaultLocale)
+  .map(({ id, urlCode }) => [id, urlCode]);
+---
+
+<script
+  is:inline
+  define:vars={{
+    localeEntries,
+    storageKey,
+  }}
+>
+  (() => {
+    if (window.location.pathname !== '/') return;
+
+    try {
+      const preferredLocale = localStorage.getItem(storageKey);
+      const preferredUrlCode = localeEntries.find(
+        ([locale]) => locale === preferredLocale,
+      )?.[1];
+      if (!preferredUrlCode) return;
+
+      window.location.replace(
+        `/${preferredUrlCode}${window.location.search}${window.location.hash}`,
+      );
+    } catch {
+      // The canonical default-locale page remains usable without storage.
+    }
+  })();
+</script>

package/src/i18n/catalog.ts

@@ -0,0 +1,203 @@
+export type MessageTree = {
+  readonly [key: string]: string | MessageTree;
+};
+
+export type MessageShape<T> = {
+  readonly [Key in keyof T]: T[Key] extends string
+    ? string
+    : T[Key] extends MessageTree
+      ? MessageShape<T[Key]>
+      : never;
+};
+
+export type VersionedMessageShape<
+  T extends { readonly schemaVersion: number },
+> = {
+  readonly schemaVersion: T['schemaVersion'];
+} & MessageShape<Omit<T, 'schemaVersion'>>;
+
+export function defineLocalizedCatalog<
+  const TLocale extends string,
+  const TFallbackLocale extends TLocale,
+  const TFallbackCatalog extends MessageTree,
+>({
+  catalogs,
+  fallbackLocale,
+  locales,
+}: {
+  catalogs: Readonly<Record<TLocale, unknown>> &
+    Readonly<Record<TFallbackLocale, TFallbackCatalog>>;
+  fallbackLocale: TFallbackLocale;
+  locales: readonly TLocale[];
+}): Readonly<Record<TLocale, MessageShape<TFallbackCatalog>>> {
+  const fallback = catalogs[fallbackLocale];
+
+  return Object.fromEntries(
+    locales.map((locale) => [
+      locale,
+      resolveLocalizedCatalog(fallback, catalogs[locale], locale),
+    ]),
+  ) as Readonly<Record<TLocale, MessageShape<TFallbackCatalog>>>;
+}
+
+export function resolveLocalizedCatalog<const TFallback extends MessageTree>(
+  fallback: TFallback,
+  translated: unknown,
+  locale: string,
+): MessageShape<TFallback> {
+  return resolveMessageNode(
+    fallback,
+    translated,
+    locale,
+    '',
+  ) as MessageShape<TFallback>;
+}
+
+export function resolveVersionedLocaleCatalog<
+  const TFallback extends { readonly schemaVersion: number },
+>(
+  fallback: TFallback,
+  translated: unknown,
+  locale: string,
+): VersionedMessageShape<TFallback> {
+  if (!isMessageRecord(translated)) {
+    throw new Error(`Invalid ${locale} locale catalog: expected object`);
+  }
+  if (translated.schemaVersion !== fallback.schemaVersion) {
+    throw new Error(
+      `Invalid ${locale} locale schema version: ` +
+        `expected ${fallback.schemaVersion}, received ${String(translated.schemaVersion)}`,
+    );
+  }
+
+  return {
+    schemaVersion: fallback.schemaVersion,
+    ...resolveLocalizedCatalog(
+      stripSchemaVersion(fallback) as MessageTree,
+      stripSchemaVersion(translated),
+      locale,
+    ),
+  } as VersionedMessageShape<TFallback>;
+}
+
+export function formatMessage(
+  template: string,
+  values: Readonly<Record<string, string | number>>,
+): string {
+  const rendered = template.replace(
+    /\{([a-zA-Z][a-zA-Z0-9]*)\}/g,
+    (_, key: string) => {
+      const value = values[key];
+      if (value === undefined) {
+        throw new Error(`Missing localized message value: ${key}`);
+      }
+      return String(value);
+    },
+  );
+
+  if (/\{[^{}]+\}/.test(rendered)) {
+    throw new Error(`Unresolved localized message: ${rendered}`);
+  }
+
+  return rendered;
+}
+
+function resolveMessageNode(
+  fallback: string | MessageTree,
+  translated: unknown,
+  locale: string,
+  path: string,
+): string | MessageTree {
+  if (typeof fallback === 'string') {
+    assertMessage(fallback, 'fallback', path);
+    if (translated === undefined) return fallback;
+    if (typeof translated !== 'string') {
+      throw new Error(
+        `Invalid ${locale} localized value at ${path}: expected string`,
+      );
+    }
+    assertMessage(translated, locale, path);
+    assertPlaceholders(fallback, translated, locale, path);
+    return translated;
+  }
+
+  if (translated !== undefined && !isMessageRecord(translated)) {
+    throw new Error(
+      `Invalid ${locale} localized value at ${path || '<root>'}: expected object`,
+    );
+  }
+
+  const translatedRecord = translated ?? {};
+  const extraKeys = Object.keys(translatedRecord).filter(
+    (key) => !(key in fallback),
+  );
+  if (extraKeys.length > 0) {
+    throw new Error(
+      `Invalid ${locale} localized keys at ${path || '<root>'}: ` +
+        `[${extraKeys.join(', ')}]`,
+    );
+  }
+
+  return Object.fromEntries(
+    Object.entries(fallback).map(([key, fallbackValue]) => {
+      const childPath = path ? `${path}.${key}` : key;
+      return [
+        key,
+        resolveMessageNode(
+          fallbackValue,
+          translatedRecord[key],
+          locale,
+          childPath,
+        ),
+      ];
+    }),
+  );
+}
+
+function isMessageRecord(value: unknown): value is Record<string, unknown> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.getPrototypeOf(value) === Object.prototype
+  );
+}
+
+function stripSchemaVersion(
+  value: Readonly<Record<string, unknown>>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(value).filter(([key]) => key !== 'schemaVersion'),
+  );
+}
+
+function assertMessage(value: string, locale: string, path: string): void {
+  if (value.trim().length === 0) {
+    throw new Error(`Empty ${locale} localized value at ${path}`);
+  }
+}
+
+function assertPlaceholders(
+  fallback: string,
+  translated: string,
+  locale: string,
+  path: string,
+): void {
+  const expected = getPlaceholders(fallback);
+  const actual = getPlaceholders(translated);
+  if (
+    expected.length !== actual.length ||
+    expected.some((placeholder, index) => placeholder !== actual[index])
+  ) {
+    throw new Error(
+      `Invalid ${locale} placeholders for ${path}: ` +
+        `expected [${expected.join(', ')}], received [${actual.join(', ')}]`,
+    );
+  }
+}
+
+function getPlaceholders(message: string): readonly string[] {
+  return [...message.matchAll(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g)]
+    .map((match) => match[1]!)
+    .toSorted();
+}

package/src/i18n/config.ts

@@ -0,0 +1,112 @@
+export type TextDirection = 'ltr' | 'rtl';
+
+export type LocaleDefinition = {
+  id: string;
+  urlCode: string;
+  languageTag: string;
+  nativeLabel: string;
+  intlLocale: string;
+  openGraphLocale: string;
+  direction: TextDirection;
+};
+
+export type LocaleConfig<
+  TDefinition extends LocaleDefinition = LocaleDefinition,
+> = {
+  definitions: readonly TDefinition[];
+  locales: readonly TDefinition['id'][];
+  localizedLocales: readonly TDefinition['id'][];
+  defaultLocale: TDefinition['id'];
+  prefixDefaultLocale: boolean;
+  isLocale(value: string): value is TDefinition['id'];
+  getDefinition(locale: TDefinition['id']): TDefinition;
+  getLocaleFromUrlCode(value: string): TDefinition['id'] | undefined;
+  getLocaleFromLanguageTag(value: string): TDefinition['id'] | undefined;
+  requireLocalizedLocale(value: string): TDefinition['id'];
+};
+
+export function createLocaleConfig<
+  const TDefinitions extends readonly [
+    LocaleDefinition,
+    ...LocaleDefinition[],
+  ],
+  const TDefaultLocale extends TDefinitions[number]['id'],
+>({
+  defaultLocale,
+  locales,
+  prefixDefaultLocale = false,
+}: {
+  defaultLocale: TDefaultLocale;
+  locales: TDefinitions;
+  prefixDefaultLocale?: boolean;
+}): LocaleConfig<TDefinitions[number]> & {
+  defaultLocale: TDefaultLocale;
+} {
+  type Definition = TDefinitions[number];
+  type Locale = Definition['id'];
+
+  const localeById = new Map<Locale, Definition>();
+  const localeByUrlCode = new Map<string, Definition>();
+  const localeByLanguageTag = new Map<string, Definition>();
+
+  for (const locale of locales) {
+    if (localeById.has(locale.id)) {
+      throw new Error(`Duplicate locale: ${locale.id}`);
+    }
+
+    const normalizedUrlCode = locale.urlCode.toLowerCase();
+    if (localeByUrlCode.has(normalizedUrlCode)) {
+      throw new Error(`Duplicate locale URL code: ${locale.urlCode}`);
+    }
+
+    const normalizedLanguageTag = locale.languageTag.toLowerCase();
+    if (localeByLanguageTag.has(normalizedLanguageTag)) {
+      throw new Error(`Duplicate locale language tag: ${locale.languageTag}`);
+    }
+
+    localeById.set(locale.id, locale);
+    localeByUrlCode.set(normalizedUrlCode, locale);
+    localeByLanguageTag.set(normalizedLanguageTag, locale);
+  }
+
+  if (!localeById.has(defaultLocale)) {
+    throw new Error(`Unknown default locale: ${defaultLocale}`);
+  }
+
+  const localeIds = locales.map(({ id }) => id);
+  const localizedLocales = localeIds.filter(
+    (locale) => prefixDefaultLocale || locale !== defaultLocale,
+  );
+
+  return {
+    definitions: locales,
+    locales: localeIds,
+    localizedLocales,
+    defaultLocale,
+    prefixDefaultLocale,
+    isLocale(value: string): value is Locale {
+      return localeById.has(value as Locale);
+    },
+    getDefinition(locale: Locale): Definition {
+      const definition = localeById.get(locale);
+      if (!definition) throw new Error(`Unsupported locale: ${locale}`);
+      return definition;
+    },
+    getLocaleFromUrlCode(value: string): Locale | undefined {
+      return localeByUrlCode.get(value.toLowerCase())?.id;
+    },
+    getLocaleFromLanguageTag(value: string): Locale | undefined {
+      return localeByLanguageTag.get(value.toLowerCase())?.id;
+    },
+    requireLocalizedLocale(value: string): Locale {
+      const locale = localeByUrlCode.get(value.toLowerCase())?.id;
+      if (
+        !locale ||
+        (!prefixDefaultLocale && locale === defaultLocale)
+      ) {
+        throw new Error(`Unsupported localized route locale: ${value}`);
+      }
+      return locale;
+    },
+  };
+}

package/src/i18n/coreMessages.ts

@@ -0,0 +1,37 @@
+import {
+  resolveLocalizedCatalog,
+  type MessageShape,
+} from './catalog';
+
+export const defaultCoreMessages = {
+  actions: {
+    close: 'Close',
+    copy: 'Copy',
+    enterFullscreen: 'Enter full screen',
+    exitFullscreen: 'Exit full screen',
+    next: 'Next',
+    open: 'Open',
+    previous: 'Previous',
+    search: 'Search',
+  },
+  feedback: {
+    noResults: 'No results.',
+  },
+  navigation: {
+    breadcrumbs: 'Breadcrumbs',
+    section: 'Section navigation',
+  },
+} as const;
+
+export type CoreMessages = MessageShape<typeof defaultCoreMessages>;
+
+export function resolveCoreMessages(
+  translated: unknown = undefined,
+  locale = 'en',
+): CoreMessages {
+  return resolveLocalizedCatalog(
+    defaultCoreMessages,
+    translated,
+    locale,
+  );
+}

package/src/i18n/formatters.ts

@@ -0,0 +1,34 @@
+export type LocaleFormatters = ReturnType<typeof createLocaleFormatters>;
+
+export function createLocaleFormatters(intlLocale: string) {
+  return {
+    locale: intlLocale,
+    collator: new Intl.Collator(intlLocale, { sensitivity: 'base' }),
+    integer: new Intl.NumberFormat(intlLocale, {
+      maximumFractionDigits: 0,
+    }),
+    decimal: new Intl.NumberFormat(intlLocale, {
+      maximumFractionDigits: 2,
+    }),
+    fixedDecimal: new Intl.NumberFormat(intlLocale, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }),
+    dateLong: new Intl.DateTimeFormat(intlLocale, {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      timeZone: 'UTC',
+    }),
+    dateTimeLong: new Intl.DateTimeFormat(intlLocale, {
+      dateStyle: 'long',
+      timeStyle: 'short',
+      timeZone: 'UTC',
+    }),
+    list: new Intl.ListFormat(intlLocale, {
+      style: 'long',
+      type: 'conjunction',
+    }),
+    plural: new Intl.PluralRules(intlLocale),
+  } as const;
+}

package/src/i18n/index.ts

@@ -0,0 +1,6 @@
+export { default as LocalePreferenceBootstrap } from './LocalePreferenceBootstrap.astro';
+export * from './catalog';
+export * from './config';
+export * from './coreMessages';
+export * from './formatters';
+export * from './preference';

package/src/i18n/preference.ts

@@ -0,0 +1,58 @@
+export type LocalePreferenceControllerOptions<TLocale extends string> = {
+  storageKey: string;
+  resolveLocale(languageTag: string): TLocale | undefined;
+  resolvePath(pathname: string, locale: TLocale): string;
+  initializedAttribute?: string;
+};
+
+export function createLocalePreferenceController<TLocale extends string>({
+  initializedAttribute = 'data-language-preference-initialized',
+  resolveLocale,
+  resolvePath,
+  storageKey,
+}: LocalePreferenceControllerOptions<TLocale>) {
+  return function initLocalePreference(
+    root: Document = document,
+  ): () => void {
+    const element = root.documentElement;
+    if (element.hasAttribute(initializedAttribute)) return () => undefined;
+    element.setAttribute(initializedAttribute, '');
+
+    const handleClick = (event: MouseEvent): void => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const link = target.closest<HTMLAnchorElement>('a[hreflang]');
+      const languageTag = link?.getAttribute('hreflang');
+      const locale = languageTag
+        ? resolveLocale(languageTag)
+        : undefined;
+      if (!locale) return;
+
+      event.preventDefault();
+      try {
+        localStorage.setItem(storageKey, locale);
+      } catch {
+        // Navigation remains available when storage is unavailable.
+      }
+
+      const destination = new URL(
+        resolvePath(window.location.pathname, locale),
+        window.location.origin,
+      );
+      destination.search = window.location.search;
+      destination.hash = window.location.hash;
+
+      if (destination.href !== window.location.href) {
+        window.location.assign(destination);
+      }
+    };
+
+    root.addEventListener('click', handleClick);
+
+    return () => {
+      root.removeEventListener('click', handleClick);
+      element.removeAttribute(initializedAttribute);
+    };
+  };
+}

package/src/index.ts

@@ -2,5 +2,7 @@ export * from './client/index';
 export * from './config/index';
 export * from './data/index';
 export * from './display/index';
+export * from './i18n/index';
+export * from './routing/index';
 export * from './seo/index';
 export * from './theme/index';

package/src/patterns/Combobox/comboboxController.ts

@@ -12,6 +12,11 @@ type SetComboboxValueOptions = {
   emit?: boolean;
 };
 
+export type ComboboxNumberBounds = {
+  min: number;
+  max: number;
+};
+
 type NumberBounds = {
   min: number;
   max: number;
@@ -93,6 +98,17 @@ function normalizeNumber(value: number, bounds: NumberBounds): number {
   return Math.min(bounds.max, Math.max(bounds.min, stepped));
 }
 
+function syncNumberOptionBounds(
+  root: HTMLElement,
+  bounds: NumberBounds,
+): void {
+  for (const option of getOptions(root)) {
+    const value = Number(option.dataset.comboboxOption);
+    option.hidden =
+      !Number.isFinite(value) || value < bounds.min || value > bounds.max;
+  }
+}
+
 export function setComboboxValues(
   root: HTMLElement,
   requestedValues: readonly string[],
@@ -186,6 +202,43 @@ export function setComboboxNumberValue(
   }
 }
 
+export function setComboboxNumberBounds(
+  root: HTMLElement,
+  { min, max }: ComboboxNumberBounds,
+): void {
+  if (root.dataset.comboboxMode !== 'number') return;
+
+  const currentBounds = getNumberBounds(root);
+  const optionValues = getOptions(root)
+    .map((option) => Number(option.dataset.comboboxOption))
+    .filter(Number.isFinite);
+  const renderedValues = new Set(optionValues);
+  if (
+    !currentBounds ||
+    !Number.isInteger(min) ||
+    !Number.isInteger(max) ||
+    min > max ||
+    !renderedValues.has(min) ||
+    !renderedValues.has(max)
+  ) {
+    throw new RangeError(
+      'Combobox number bounds must be ordered rendered values aligned to the configured step',
+    );
+  }
+
+  root.dataset.comboboxNumberMin = String(min);
+  root.dataset.comboboxNumberMax = String(max);
+  const bounds = getNumberBounds(root);
+  const input = root.querySelector<HTMLInputElement>(
+    '[data-combobox-number-input]',
+  );
+  if (!bounds || !input) return;
+
+  syncNumberOptionBounds(root, bounds);
+  setComboboxNumberValue(root, Number(input.value));
+  root.dispatchEvent(new Event('combobox:number-bounds-change'));
+}
+
 export function initCombobox(root: HTMLElement): () => void {
   if (root.getAttribute(initializedAttribute) === 'true') return noop;
 
@@ -343,6 +396,12 @@ export function initCombobox(root: HTMLElement): () => void {
       : null;
 
   const resetFilter = (): void => {
+    if (mode === 'number') {
+      const bounds = getNumberBounds(root);
+      if (bounds) syncNumberOptionBounds(root, bounds);
+      return;
+    }
+
     if (search) search.value = '';
     for (const option of getOptions(root)) option.hidden = false;
     if (empty) empty.hidden = getOptions(root).length > 0;
@@ -736,6 +795,11 @@ export function initCombobox(root: HTMLElement): () => void {
     close();
   };
 
+  const handleNumberBoundsChange = (): void => {
+    setActiveOption(null);
+    schedulePanelPosition();
+  };
+
   if (mode === 'options' && trigger && search) {
     control.addEventListener('click', handleOptionsControlClick);
     trigger.addEventListener('click', handleOptionsTriggerClick);
@@ -759,6 +823,10 @@ export function initCombobox(root: HTMLElement): () => void {
   }
   optionsRoot.addEventListener('click', handleOptionClick);
   root.addEventListener('combobox:clear', handleClear);
+  root.addEventListener(
+    'combobox:number-bounds-change',
+    handleNumberBoundsChange,
+  );
 
   return () => {
     close();
@@ -778,6 +846,10 @@ export function initCombobox(root: HTMLElement): () => void {
     }
     optionsRoot.removeEventListener('click', handleOptionClick);
     root.removeEventListener('combobox:clear', handleClear);
+    root.removeEventListener(
+      'combobox:number-bounds-change',
+      handleNumberBoundsChange,
+    );
     panel.style.removeProperty('--combobox-panel-inline-start');
     panel.style.removeProperty('--combobox-panel-block-start');
     panel.style.removeProperty('--combobox-panel-inline-size');

package/src/patterns/Table/Table.css

@@ -17,7 +17,8 @@
   min-inline-size: 0;
 }
 
-.table[data-table-column-density='compact'] {
+.table[data-table-column-density='compact'],
+.table[data-table-layout='index'] {
   --table-cell-padding-inline: var(--nox-space-1);
   --table-edge-padding-inline: var(--nox-space-3);
   --table-header-letter-spacing: 0;

package/src/patterns/Table/TableBody.astro

@@ -102,12 +102,14 @@ const stateMessage =
           </tr>
         ) : (
           rows.map((row) => {
-            const rowHref = row.href;
+            const rowHref = row.disabled ? undefined : row.href;
 
             return (
               <tr
                 class="table-body__row"
                 hidden={row.hidden}
+                aria-disabled={row.disabled ? 'true' : undefined}
+                data-disabled={row.disabled ? 'true' : undefined}
                 data-table-row
                 data-table-row-key={row.key}
                 data-table-row-href={rowHref}

package/src/patterns/Table/TableBody.css

@@ -166,6 +166,12 @@
   cursor: pointer;
 }
 
+.table-body__row[data-disabled='true'] {
+  opacity: 0.4;
+  filter: grayscale(0.65);
+  cursor: not-allowed;
+}
+
 .table-body__row[data-table-row-href]:focus-within {
   --table-primary-link-color: var(--nox-link-hover);
 }