@vendure-io/ui 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/molecules/date-time-picker.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { Button } from '@vendure-io/ui/components/atoms/button';
+import { Calendar } from '@vendure-io/ui/components/atoms/calendar';
+import { Input } from '@vendure-io/ui/components/atoms/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@vendure-io/ui/components/atoms/popover';
+import { useFormatSettings } from '@vendure-io/ui/components/molecules/format-provider';
+import { formatDateLabel, parseInstant } from '@vendure-io/ui/lib/date-value';
+import { cn } from '@vendure-io/ui/lib/utils';
+import { CalendarClockIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+
+type CalendarProps = Omit<
+  React.ComponentProps<typeof Calendar>,
+  'mode' | 'selected' | 'onSelect' | 'defaultMonth'
+>;
+
+interface DateTimePickerProps
+  extends Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> {
+  /** ISO 8601 instant. Calendar and time controls edit it in the user's local zone. */
+  value?: string;
+  onValueChange?: (value: string | undefined) => void;
+  placeholder?: React.ReactNode;
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  name?: string;
+  id?: string;
+  calendarProps?: CalendarProps;
+}
+
+function DateTimePicker({
+  value,
+  onValueChange,
+  placeholder = 'Pick a date and time',
+  clearable = true,
+  disabled,
+  invalid,
+  name,
+  id,
+  calendarProps,
+  className,
+  ...props
+}: DateTimePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const { locale } = useFormatSettings();
+  const selected = parseInstant(value);
+  const timeValue = selected
+    ? `${String(selected.getHours()).padStart(2, '0')}:${String(selected.getMinutes()).padStart(2, '0')}`
+    : '';
+
+  function commitDate(date: Date | undefined) {
+    if (!date) return;
+    const next = new Date(date);
+    next.setHours(selected?.getHours() ?? 0, selected?.getMinutes() ?? 0, 0, 0);
+    onValueChange?.(next.toISOString());
+    setOpen(false);
+  }
+
+  function commitTime(time: string) {
+    if (!time) return;
+    const [hoursText, minutesText] = time.split(':');
+    const hours = Number(hoursText);
+    const minutes = Number(minutesText);
+    if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return;
+    const next = selected ? new Date(selected) : new Date();
+    next.setHours(hours, minutes, 0, 0);
+    onValueChange?.(next.toISOString());
+  }
+
+  return (
+    <div
+      data-slot="date-time-picker"
+      className={cn('flex min-w-0 items-center gap-2', className)}
+      {...props}
+    >
+      {name ? <input type="hidden" name={name} value={value ?? ''} /> : null}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              id={id}
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              aria-invalid={invalid || undefined}
+              className="min-w-0 flex-1 justify-start font-normal"
+            />
+          }
+        >
+          <CalendarClockIcon />
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected ? formatDateLabel(selected, locale) : placeholder}
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            {...calendarProps}
+            mode="single"
+            selected={selected}
+            defaultMonth={selected}
+            onSelect={commitDate}
+          />
+        </PopoverContent>
+      </Popover>
+      <Input
+        type="time"
+        aria-label="Time"
+        aria-invalid={invalid || undefined}
+        value={timeValue}
+        disabled={disabled || !selected}
+        className="w-28"
+        onChange={(event) => commitTime(event.currentTarget.value)}
+      />
+      {clearable && selected ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          disabled={disabled}
+          aria-label="Clear date and time"
+          onClick={() => onValueChange?.(undefined)}
+        >
+          <XIcon />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+export { DateTimePicker, type DateTimePickerProps };

package/src/components/molecules/file-dropzone.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { Button } from '@vendure-io/ui/components/atoms/button';
+import { cn } from '@vendure-io/ui/lib/utils';
+import { FileIcon, UploadCloudIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+
+type FileValidationResult = string | readonly string[] | null | undefined;
+type FileValidator = (file: File) => FileValidationResult | Promise<FileValidationResult>;
+
+interface FileRejection {
+  file: File;
+  messages: string[];
+}
+
+interface FileDropzoneProps extends Omit<React.ComponentProps<'div'>, 'onChange'> {
+  value?: readonly File[];
+  onValueChange?: (files: File[]) => void;
+  onRejected?: (rejections: FileRejection[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSize?: number;
+  validateFile?: FileValidator;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  id?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  emptyLabel?: React.ReactNode;
+  dragLabel?: React.ReactNode;
+  renderFile?: (file: File, remove: () => void) => React.ReactNode;
+}
+
+function fileMatchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept?.trim()) return true;
+  const fileName = file.name.toLowerCase();
+  const mime = file.type.toLowerCase();
+  return accept.split(',').some((rawRule) => {
+    const rule = rawRule.trim().toLowerCase();
+    if (!rule) return false;
+    if (rule.startsWith('.')) return fileName.endsWith(rule);
+    if (rule.endsWith('/*')) return mime.startsWith(rule.slice(0, -1));
+    return mime === rule;
+  });
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+}
+
+function normalizeValidationResult(result: FileValidationResult): string[] {
+  if (!result) return [];
+  return typeof result === 'string' ? [result] : [...result];
+}
+
+/**
+ * Controlled, transport-agnostic file input. It owns accessible picking,
+ * drag-and-drop, limits, validation, errors, and removal; consumers own upload
+ * persistence and can replace the selected-file rendering with `renderFile`.
+ */
+function FileDropzone({
+  value = [],
+  onValueChange,
+  onRejected,
+  accept,
+  multiple = false,
+  maxFiles = multiple ? Number.POSITIVE_INFINITY : 1,
+  maxSize,
+  validateFile,
+  disabled,
+  required,
+  name,
+  id: providedId,
+  label = 'Upload files',
+  description,
+  emptyLabel = 'Drag and drop files here, or choose files',
+  dragLabel = 'Drop files to add them',
+  renderFile,
+  className,
+  ...props
+}: FileDropzoneProps) {
+  const generatedId = React.useId();
+  const id = providedId ?? generatedId;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const [dragging, setDragging] = React.useState(false);
+  const [validating, setValidating] = React.useState(false);
+  const [rejections, setRejections] = React.useState<FileRejection[]>([]);
+  const dragDepth = React.useRef(0);
+
+  async function addFiles(incoming: readonly File[]) {
+    if (disabled || incoming.length === 0) return;
+    setValidating(true);
+    const accepted: File[] = [];
+    const rejected: FileRejection[] = [];
+    const remaining = Math.max(0, maxFiles - (multiple ? value.length : 0));
+
+    for (const file of incoming.slice(0, remaining)) {
+      const messages: string[] = [];
+      if (!fileMatchesAccept(file, accept)) messages.push('This file type is not accepted.');
+      if (maxSize !== undefined && file.size > maxSize) {
+        messages.push(`File size must be ${formatFileSize(maxSize)} or smaller.`);
+      }
+      if (validateFile) {
+        try {
+          messages.push(...normalizeValidationResult(await validateFile(file)));
+        } catch {
+          messages.push('This file could not be validated.');
+        }
+      }
+      if (messages.length > 0) rejected.push({ file, messages });
+      else accepted.push(file);
+    }
+
+    if (incoming.length > remaining) {
+      for (const file of incoming.slice(remaining)) {
+        rejected.push({ file, messages: [`You can select up to ${maxFiles} files.`] });
+      }
+    }
+
+    setRejections(rejected);
+    setValidating(false);
+    if (rejected.length > 0) onRejected?.(rejected);
+    if (accepted.length > 0) {
+      onValueChange?.(multiple ? [...value, ...accepted] : accepted.slice(0, 1));
+    }
+  }
+
+  function removeFile(index: number) {
+    onValueChange?.(value.filter((_, fileIndex) => fileIndex !== index));
+    setRejections([]);
+  }
+
+  return (
+    <div data-slot="file-dropzone" className={cn('flex flex-col gap-3', className)} {...props}>
+      <div>
+        <label htmlFor={id} className="text-sm font-medium">
+          {label}
+          {required ? <span className="text-destructive"> *</span> : null}
+        </label>
+        {description ? (
+          <p id={descriptionId} className="text-muted-foreground mt-1 text-sm">
+            {description}
+          </p>
+        ) : null}
+      </div>
+
+      <input
+        id={id}
+        name={name}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        required={required && value.length === 0}
+        disabled={disabled || validating}
+        aria-describedby={
+          cn(description && descriptionId, rejections.length > 0 && errorId) || undefined
+        }
+        className="peer sr-only"
+        onChange={(event) => {
+          const files = Array.from(event.currentTarget.files ?? []);
+          event.currentTarget.value = '';
+          void addFiles(files);
+        }}
+      />
+
+      <label
+        htmlFor={id}
+        data-slot="file-dropzone-target"
+        data-dragging={dragging || undefined}
+        data-disabled={disabled || validating || undefined}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          if (disabled) return;
+          dragDepth.current += 1;
+          setDragging(true);
+        }}
+        onDragOver={(event) => {
+          event.preventDefault();
+          if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+        }}
+        onDragLeave={(event) => {
+          event.preventDefault();
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setDragging(false);
+        }}
+        onDrop={(event) => {
+          event.preventDefault();
+          dragDepth.current = 0;
+          setDragging(false);
+          void addFiles(Array.from(event.dataTransfer.files));
+        }}
+        className={cn(
+          'border-border text-muted-foreground hover:border-foreground/40 flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-[border-color,background-color,color] duration-(--transition-duration-fast) ease-(--ease-out)',
+          'peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-ring/50',
+          'data-dragging:border-foreground data-dragging:bg-accent data-dragging:text-accent-foreground',
+          'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        )}
+      >
+        <UploadCloudIcon className="size-7" />
+        <span className="text-foreground text-sm font-medium">
+          {validating ? 'Checking files…' : dragging ? dragLabel : emptyLabel}
+        </span>
+        {accept ? <span className="text-xs">Accepted: {accept}</span> : null}
+      </label>
+
+      {value.length > 0 ? (
+        <ul data-slot="file-dropzone-files" className="flex flex-col gap-2">
+          {value.map((file, index) => (
+            <li key={`${file.name}-${file.size}-${file.lastModified}`}>
+              {renderFile ? (
+                renderFile(file, () => removeFile(index))
+              ) : (
+                <div className="bg-muted/60 flex min-w-0 items-center gap-3 rounded-lg border px-3 py-2">
+                  <FileIcon className="text-muted-foreground size-4 shrink-0" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{file.name}</p>
+                    <p className="text-muted-foreground text-xs">{formatFileSize(file.size)}</p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-xs"
+                    disabled={disabled}
+                    aria-label={`Remove ${file.name}`}
+                    onClick={() => removeFile(index)}
+                  >
+                    <XIcon />
+                  </Button>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {rejections.length > 0 ? (
+        <div id={errorId} role="alert" className="text-destructive text-sm">
+          {rejections.map(({ file, messages }) => (
+            <p key={`${file.name}-${file.size}`}>
+              <span className="font-medium">{file.name}:</span> {messages.join(' ')}
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export {
+  FileDropzone,
+  fileMatchesAccept,
+  formatFileSize,
+  type FileDropzoneProps,
+  type FileRejection,
+  type FileValidator,
+};

package/src/components/molecules/id-chip.tsx

@@ -40,7 +40,7 @@ interface IdChipProps {
   /** Render the copy affordance. @default true */
   copyable?: boolean;
   className?: string;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
 }
 

package/src/components/molecules/skip-link.tsx

@@ -0,0 +1,36 @@
+import { cn } from '@vendure-io/ui/lib/utils';
+import type * as React from 'react';
+
+interface SkipLinkProps extends React.ComponentProps<'a'> {
+  /** The main-content element to focus. Include the leading `#`. */
+  href?: `#${string}`;
+}
+
+/**
+ * Keyboard-only escape hatch for repeated application chrome. Place it as the
+ * first focusable element in the document and point it at `AppShellMain` (whose
+ * default id is `main-content`). Native anchor behavior keeps this server-safe
+ * and works before React hydrates.
+ */
+function SkipLink({
+  className,
+  href = '#main-content',
+  children = 'Skip to main content',
+  ...props
+}: SkipLinkProps) {
+  return (
+    <a
+      data-slot="skip-link"
+      href={href}
+      className={cn(
+        'bg-primary text-primary-foreground fixed top-3 left-3 z-[100] -translate-y-20 rounded-md px-3 py-2 text-sm font-medium opacity-0 outline-none transition-[transform,opacity] duration-(--transition-duration-fast) ease-(--ease-out) focus-visible:translate-y-0 focus-visible:opacity-100 focus-visible:ring-3 focus-visible:ring-ring/50 motion-reduce:transition-none',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+export { SkipLink, type SkipLinkProps };

package/src/components/molecules/state-views/loading-state.tsx

@@ -24,13 +24,16 @@ export interface LoadingStateProps
   rows?: number;
   /** Classes applied to each skeleton row (e.g. `h-10` for tighter lists). */
   rowClassName?: string;
-  /** Visible label. An sr-only "Loading…" is always rendered for assistive tech. */
+  /** Visible label. An sr-only `srLabel` is always rendered for assistive tech. */
   label?: React.ReactNode;
+  /** Sr-only label announced to assistive tech. Override for host i18n. @default "Loading…" */
+  srLabel?: string;
 }
 
 /**
  * Placeholder shell for in-flight list/detail queries. Renders as an
- * `aria-live` `<output>` with an always-present sr-only "Loading…" label.
+ * `aria-live` `<output>` with an always-present sr-only `srLabel` (defaults to
+ * "Loading…", overridable for host i18n).
  * `skeleton` (default) draws N shimmer rows; `spinner` centers the `Spinner`
  * atom for compact or unknown-height regions.
  */
@@ -39,6 +42,7 @@ function LoadingState({
   rows = 5,
   rowClassName,
   label,
+  srLabel = 'Loading…',
   className,
   ...props
 }: LoadingStateProps) {
@@ -49,7 +53,7 @@ function LoadingState({
       className={cn(loadingStateVariants({ variant }), className)}
       {...props}
     >
-      <span className="sr-only">Loading…</span>
+      <span className="sr-only">{srLabel}</span>
       {variant === 'spinner' ? (
         <>
           {/* aria-hidden overrides the atom's role="status": the <output> is

package/src/lib/date-value.ts

@@ -0,0 +1,48 @@
+const CALENDAR_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+/** Parse `YYYY-MM-DD` into a local calendar date without a UTC shift. */
+function parseCalendarDate(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+  const match = CALENDAR_DATE_PATTERN.exec(value);
+  if (!match) return undefined;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return undefined;
+  }
+  return date;
+}
+
+/** Serialize a local calendar date as `YYYY-MM-DD`. */
+function formatCalendarDate(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function parseInstant(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+function formatDateLabel(date: Date, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(date);
+}
+
+function formatDateRangeLabel(from: Date, to: Date | undefined, locale?: string): string {
+  if (!to || from.getTime() === to.getTime()) return formatDateLabel(from, locale);
+  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'medium' });
+  return formatter.formatRange(from, to);
+}
+
+export {
+  formatCalendarDate,
+  formatDateLabel,
+  formatDateRangeLabel,
+  parseCalendarDate,
+  parseInstant,
+};

package/src/lib/highlight.ts

@@ -0,0 +1,141 @@
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+} from '@shikijs/transformers';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+
+/**
+ * The design system's Shiki setup: a lazy shared highlighter with the DS themes
+ * (github-light / github-dark-default), a fixed grammar set, and the `[!code ...]`
+ * notation transformers. Exported so consumers rendering highlighted HTML outside
+ * of `CodeBlock` (e.g. custom docs pipelines) reuse the exact same setup instead
+ * of duplicating it — and get the lazy per-language chunks instead of the full
+ * Shiki bundle.
+ */
+
+const languageLoaders = {
+  bash: () => import('@shikijs/langs/bash').then((module) => module.default),
+  css: () => import('@shikijs/langs/css').then((module) => module.default),
+  dotenv: () => import('@shikijs/langs/dotenv').then((module) => module.default),
+  graphql: () => import('@shikijs/langs/graphql').then((module) => module.default),
+  html: () => import('@shikijs/langs/html').then((module) => module.default),
+  ini: () => import('@shikijs/langs/ini').then((module) => module.default),
+  javascript: () => import('@shikijs/langs/javascript').then((module) => module.default),
+  json: () => import('@shikijs/langs/json').then((module) => module.default),
+  jsonc: () => import('@shikijs/langs/jsonc').then((module) => module.default),
+  jsx: () => import('@shikijs/langs/jsx').then((module) => module.default),
+  markdown: () => import('@shikijs/langs/markdown').then((module) => module.default),
+  mdx: () => import('@shikijs/langs/mdx').then((module) => module.default),
+  python: () => import('@shikijs/langs/python').then((module) => module.default),
+  shellscript: () => import('@shikijs/langs/shellscript').then((module) => module.default),
+  sql: () => import('@shikijs/langs/sql').then((module) => module.default),
+  tsx: () => import('@shikijs/langs/tsx').then((module) => module.default),
+  typescript: () => import('@shikijs/langs/typescript').then((module) => module.default),
+  yaml: () => import('@shikijs/langs/yaml').then((module) => module.default),
+} as const;
+
+type SupportedLanguage = keyof typeof languageLoaders;
+
+const themeLoaders = [
+  () => import('@shikijs/themes/github-light').then((module) => module.default),
+  () => import('@shikijs/themes/github-dark-default').then((module) => module.default),
+] as const;
+
+let highlighterPromise: ReturnType<typeof createHighlighterCore> | null = null;
+
+function getHighlighter(): ReturnType<typeof createHighlighterCore> {
+  highlighterPromise ??= Promise.all([
+    Promise.all(themeLoaders.map((loadTheme) => loadTheme())),
+    Promise.all(Object.values(languageLoaders).map((loadLanguage) => loadLanguage())),
+  ]).then(([themes, languages]) =>
+    createHighlighterCore({
+      themes,
+      langs: languages.flat(),
+      engine: createJavaScriptRegexEngine(),
+    }),
+  );
+
+  return highlighterPromise;
+}
+
+const highlightedCodeCache = new Map<string, Promise<string>>();
+
+/**
+ * Highlight code using Shiki with all transformers.
+ * Uses Shiki's native notation for highlighting:
+ * - // [!code highlight] - highlight a line (use language-appropriate comment)
+ * - // [!code ++] / // [!code --] - diff highlighting
+ * - // [!code focus] - focus mode (blur other lines)
+ * - // [!code word:myVar] - highlight specific word
+ * - // [!code error] / // [!code warning] - error levels
+ */
+async function highlightCode(code: string, language: SupportedLanguage): Promise<string> {
+  const cacheKey = `${language}:${code}`;
+  const cached = highlightedCodeCache.get(cacheKey);
+  if (cached) return cached;
+
+  const highlighted = getHighlighter().then((highlighter) =>
+    highlighter.codeToHtml(code, {
+      lang: language,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark-default',
+      },
+      transformers: [
+        transformerNotationDiff({ matchAlgorithm: 'v3' }),
+        transformerNotationHighlight({ matchAlgorithm: 'v3' }),
+        transformerNotationWordHighlight({ matchAlgorithm: 'v3' }),
+        transformerNotationFocus({ matchAlgorithm: 'v3' }),
+        transformerNotationErrorLevel({ matchAlgorithm: 'v3' }),
+      ],
+    }),
+  );
+  highlightedCodeCache.set(cacheKey, highlighted);
+  return highlighted;
+}
+
+/**
+ * Language aliases that map to Shiki's bundled language names
+ */
+const LANGUAGE_ALIASES: Record<string, SupportedLanguage> = {
+  env: 'dotenv',
+  js: 'javascript',
+  ts: 'typescript',
+  sh: 'bash',
+  shell: 'bash',
+  yml: 'yaml',
+  py: 'python',
+  md: 'markdown',
+  plaintext: 'ini',
+  text: 'ini',
+  chroma: 'ini',
+};
+
+/**
+ * Normalize language identifier for Shiki/BundledLanguage.
+ * Falls back to 'ini' for unsupported languages (minimal highlighting).
+ */
+function normalizeLanguage(lang?: string): SupportedLanguage {
+  const normalized = lang?.toLowerCase() || 'ini';
+
+  // Check for aliases first
+  const alias = LANGUAGE_ALIASES[normalized];
+  if (alias) {
+    return alias;
+  }
+
+  // Check if the language is one of the explicitly bundled grammars.
+  if (normalized in languageLoaders) {
+    return normalized as SupportedLanguage;
+  }
+
+  // Fallback to 'ini' for unsupported languages (has minimal highlighting)
+  return 'ini';
+}
+
+export { getHighlighter, highlightCode, normalizeLanguage };
+export type { SupportedLanguage };