@bauer-group/accessibility-widget 1.0.3

package/src/types/locale.ts

@@ -0,0 +1,55 @@
+export const SUPPORTED_LOCALES = [
+  // Original set (≥ 8M speakers, EU focus)
+  'de',
+  'en',
+  'fr',
+  'es',
+  'it',
+  'pl',
+  'tr',
+  'ar',
+  // Added: all remaining languages with ≥ 8M speakers whose scripts render
+  // reliably with standard system fonts on current browsers.
+  'zh', // Mandarin Chinese (Simplified)
+  'hi', // Hindi
+  'pt', // Portuguese
+  'bn', // Bengali
+  'ru', // Russian
+  'ja', // Japanese
+  'ko', // Korean
+  'vi', // Vietnamese
+  'fa', // Persian / Farsi (RTL)
+  'ur', // Urdu (RTL)
+  'th', // Thai
+  'id', // Indonesian (covers Malay speakers via Bahasa)
+  'he', // Hebrew (RTL)
+  'nl', // Dutch
+  'sv', // Swedish
+  'cs', // Czech
+  'el', // Greek
+  'hu', // Hungarian
+  'ro', // Romanian
+  'uk', // Ukrainian
+] as const;
+
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+
+/**
+ * Right-to-left locales. Used by the panel renderer to set `dir="rtl"`.
+ * Keep in sync with the list of locales we ship translations for.
+ */
+export const RTL_LOCALES: readonly Locale[] = ['ar', 'fa', 'ur', 'he'];
+
+export function isRtl(locale: Locale): boolean {
+  return (RTL_LOCALES as readonly string[]).includes(locale);
+}
+
+export function isLocale(value: unknown): value is Locale {
+  return typeof value === 'string' && (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+export function normalizeLocale(input: string | undefined | null, fallback: Locale = 'de'): Locale {
+  if (!input) return fallback;
+  const prefix = input.toLowerCase().split(/[-_]/)[0];
+  return prefix && isLocale(prefix) ? prefix : fallback;
+}

package/src/types/widget.ts

@@ -0,0 +1,300 @@
+import type { Locale } from './locale.js';
+
+export const FEATURE_IDS = [
+  'fontSize',
+  'lineHeight',
+  'letterSpacing',
+  'contrast',
+  'grayscale',
+  'invertColors',
+  'dyslexiaFont',
+  'highlightLinks',
+  'pauseAnimations',
+  'bigCursor',
+  'focusOutline',
+  'readingMask',
+  'readingGuide',
+  'tts',
+  'structureNav',
+] as const;
+
+export type FeatureId = (typeof FEATURE_IDS)[number];
+
+export const CONTRAST_MODES = ['off', 'high', 'dark', 'invert'] as const;
+export type ContrastMode = (typeof CONTRAST_MODES)[number];
+
+export const PROFILE_IDS = [
+  'visionImpaired',
+  'motor',
+  'cognitive',
+  'seizureSafe',
+  'adhd',
+  'blind',
+] as const;
+export type ProfileId = (typeof PROFILE_IDS)[number];
+
+export const POSITIONS = ['bottom-right', 'bottom-left', 'top-right', 'top-left'] as const;
+export type Position = (typeof POSITIONS)[number];
+
+export interface WidgetState {
+  features: Record<FeatureId, boolean>;
+  fontSizeLevel: number;
+  lineHeightLevel: number;
+  letterSpacingLevel: number;
+  contrastMode: ContrastMode;
+  /** Enlarges panel controls & tap targets — independent from font-size feature. */
+  oversized?: boolean;
+  /**
+   * Custom FAB position set by user drag (only populated when `draggableFab`
+   * is enabled and the user actually moved the button). Coordinates are
+   * viewport-pixel distances from the **top-left** corner. When absent, the
+   * FAB uses the configured `position` + `offset` anchor.
+   */
+  fabPosition?: { x: number; y: number } | null;
+  /**
+   * User-chosen locale override. When set, wins over `config.locale`
+   * on the next panel open and gets applied on reload by the loader.
+   * Populated by the in-panel language dropdown and the public
+   * `setLocale()` runtime API.
+   */
+  locale?: string;
+}
+
+/**
+ * Host-supplied configuration for the widget loader.
+ *
+ * Set via `window.AccessibilityWidgetConfig = { … }` **before** the loader
+ * script executes. All fields are optional — the widget ships with sensible
+ * defaults. Invalid values are coerced to defaults; with `debug: true` they
+ * emit console warnings so mis-configurations are discoverable.
+ *
+ * @example Minimal override
+ * ```ts
+ * window.AccessibilityWidgetConfig = { locale: 'de', primaryColor: '#0058a3' };
+ * ```
+ *
+ * @example Enterprise deployment
+ * ```ts
+ * window.AccessibilityWidgetConfig = {
+ *   corePath: '/assets/accessibility-widget-core.min.js',
+ *   cssPath:  '/assets/accessibility-widget.min.css',
+ *   coreIntegrity: 'sha384-…',
+ *   cssIntegrity:  'sha384-…',
+ *   position: 'bottom-left',
+ *   offset: { x: 24, y: 96 },  // clear the chat widget
+ *   zIndex: 9999,
+ *   primaryColor: '#0058a3',
+ *   storageKey: 'mycorp-a11y',
+ *   statementUrl: '/accessibility-statement',
+ *   disabledFeatures: ['tts'],
+ *   initialFeatures: { focusOutline: true },
+ *   debug: false,
+ * };
+ * ```
+ */
+export interface WidgetConfig {
+  // ─── asset loading ────────────────────────────────────────────────
+  /** URL to the on-demand core bundle. Default: `/accessibility-widget/accessibility-widget-core.min.js`. */
+  corePath?: string;
+  /** URL to the widget stylesheet. Default: `/accessibility-widget/accessibility-widget.min.css`. */
+  cssPath?: string;
+  /** SRI hash for the core bundle (`sha384-…`). Matches the value printed in `dist/integrity.txt`. */
+  coreIntegrity?: string | null;
+  /** SRI hash for the stylesheet. Matches the value printed in `dist/integrity.txt`. */
+  cssIntegrity?: string | null;
+
+  // ─── localization ─────────────────────────────────────────────────
+  /**
+   * Widget locale. `'auto'` (default) picks from `document.documentElement.lang`
+   * or `navigator.language`, falling back to `de`. Set explicitly to override.
+   */
+  locale?: Locale | 'auto';
+
+  // ─── UI / branding ────────────────────────────────────────────────
+  /** FAB anchor corner. Default: `bottom-right`. */
+  position?: Position;
+  /**
+   * Pixel offset of the FAB from its anchor corner.
+   * Useful when other fixed elements (chat widgets, cookie banners) would collide.
+   * Default: `{ x: 20, y: 20 }`.
+   */
+  offset?: { x?: number; y?: number };
+  /**
+   * Override the FAB z-index. Default: `2147483646` (one below max int32).
+   * Lower values allow in-page dialogs to stack on top of the FAB.
+   */
+  zIndex?: number;
+  /** FAB background color. Default: `#0058a3` (BAUER GROUP blue). Must be a valid CSS color. */
+  primaryColor?: string;
+  /** Override the FAB `aria-label`. `null` → use the localized default for the active locale. */
+  buttonLabel?: string | null;
+
+  // ─── persistence ──────────────────────────────────────────────────
+  /**
+   * localStorage key for user preferences. Default: `accessibility-widget`.
+   * Change this to namespace the widget on multi-tenant platforms where
+   * different sub-brands need isolated preferences.
+   */
+  storageKey?: string;
+
+  // ─── initial experience ───────────────────────────────────────────
+  /**
+   * Features turned ON for a first-time visitor (no persisted state yet).
+   * Only applies once — once the user has modified anything in the panel,
+   * the persisted state wins.
+   *
+   * @example Public-sector site that wants a visible focus ring by default
+   * ```ts
+   * { initialFeatures: { focusOutline: true, highlightLinks: true } }
+   * ```
+   */
+  initialFeatures?: Partial<Record<FeatureId, boolean>>;
+
+  // ─── feature gating ───────────────────────────────────────────────
+  /**
+   * Features hidden from the panel UI. Useful when certain features don't
+   * make sense in context (e.g. `tts` on a site with no text content).
+   * Hidden features are neither toggle-able nor activated by profile presets.
+   */
+  disabledFeatures?: readonly FeatureId[];
+
+  // ─── legal / compliance ───────────────────────────────────────────
+  /**
+   * URL of the site's accessibility statement. When set, a link is rendered
+   * in the panel footer (label is localized — see `Translation.statementLink`).
+   * Recommended for BFSG § 14 / EN 301 549 § 12.1.1 compliance.
+   *
+   * Absolute URLs (`http://`, `https://`, protocol-relative `//…`) open in a
+   * new tab with `rel="noopener noreferrer"`; relative paths stay same-tab.
+   */
+  statementUrl?: string;
+
+  /**
+   * Optional free-form disclaimer text rendered in the panel footer above
+   * the "Powered by" line. No default — if you want the footer to carry
+   * guidance ("Feedback zur Barrierefreiheit bitte an die Hotline …"), set
+   * it per host. Kept as plain text, not HTML; line breaks render as
+   * whitespace.
+   *
+   * @example
+   * ```ts
+   * { disclaimer: 'Feedback an barrierefreiheit@example.com' }
+   * ```
+   */
+  disclaimer?: string;
+
+  /**
+   * Suppress the "Powered by BAUER GROUP Accessibility-Widget" footer line.
+   * Intended for white-label deployments — the default (`false`) shows a
+   * small localised attribution with a link back to the product page.
+   */
+  hidePoweredBy?: boolean;
+
+  // ─── behavior ─────────────────────────────────────────────────────
+  /**
+   * When true, end users can drag the FAB to a custom position (pointer or
+   * keyboard). The chosen position persists under `storageKey` as part of
+   * the widget state and is restored on the next visit. Default: `false`.
+   *
+   * Keyboard: focus the FAB, hold Shift + Arrow keys to move in 10 px steps.
+   */
+  draggableFab?: boolean;
+  /**
+   * Keyboard shortcut that opens the widget from anywhere on the page.
+   *
+   * - `string` — a combo like `'ctrl+alt+a'`, `'alt+shift+a'`, `'f2'`. Tokens
+   *   are case-insensitive and joined with `+`. Supported modifiers:
+   *   `alt`, `ctrl`, `shift`, `meta`. Exactly one non-modifier key is required.
+   * - `false` — disable the shortcut entirely. Useful when the default clashes
+   *   with a host's own A11y hotkey or a browser / extension binding.
+   *
+   * Invalid strings emit a `console.warn` when `debug: true` and the shortcut
+   * is disabled (no fallback to another combo — the host's choice is respected).
+   *
+   * Default: `'ctrl+alt+a'` — aligned with the prevailing convention among
+   * A11y widgets (Userway and others), rarely clashes with browser chrome.
+   *
+   * @example Function-key style
+   * ```ts
+   * { keyboardShortcut: 'f2' }
+   * ```
+   *
+   * @example Disable completely
+   * ```ts
+   * { keyboardShortcut: false }
+   * ```
+   */
+  keyboardShortcut?: string | false;
+  /** When true, features that add motion respect `prefers-reduced-motion`. Default: `true`. */
+  respectReducedMotion?: boolean;
+  /** When true, the FAB is hidden in print media (`@media print`). Default: `true`. */
+  hideOnPrint?: boolean;
+
+  // ─── debug ────────────────────────────────────────────────────────
+  /**
+   * When true, normally-silent failures (localStorage quota, malformed
+   * persisted state, failed core fetch) emit `console.warn`. Production
+   * bundles should keep this `false` (default) to avoid noise.
+   */
+  debug?: boolean;
+}
+
+export interface ProfilePreset {
+  features?: Partial<Record<FeatureId, boolean>>;
+  fontSizeLevel?: number;
+  lineHeightLevel?: number;
+  letterSpacingLevel?: number;
+  contrastMode?: ContrastMode;
+}
+
+export const DEFAULT_STATE: WidgetState = {
+  features: FEATURE_IDS.reduce(
+    (acc, id) => {
+      acc[id] = false;
+      return acc;
+    },
+    {} as Record<FeatureId, boolean>,
+  ),
+  fontSizeLevel: 1,
+  lineHeightLevel: 1.5,
+  letterSpacingLevel: 0,
+  contrastMode: 'off',
+  oversized: false,
+  fabPosition: null,
+};
+
+export const PROFILES: Record<ProfileId, ProfilePreset> = {
+  visionImpaired: {
+    features: {
+      fontSize: true,
+      contrast: true,
+      highlightLinks: true,
+      focusOutline: true,
+      bigCursor: true,
+    },
+    fontSizeLevel: 1.4,
+    contrastMode: 'high',
+  },
+  motor: {
+    features: { bigCursor: true, focusOutline: true, pauseAnimations: true },
+  },
+  cognitive: {
+    features: {
+      dyslexiaFont: true,
+      lineHeight: true,
+      letterSpacing: true,
+      readingGuide: true,
+    },
+    lineHeightLevel: 1.8,
+    letterSpacingLevel: 0.05,
+  },
+  seizureSafe: {
+    features: { pauseAnimations: true, grayscale: true },
+  },
+  adhd: {
+    features: { readingMask: true, pauseAnimations: true, focusOutline: true },
+  },
+  blind: {
+    features: { structureNav: true, highlightLinks: true, focusOutline: true },
+  },
+};

package/src/util/debug.ts

@@ -0,0 +1,12 @@
+/**
+ * Emits a console warning only when debug mode is enabled on
+ * `window.AccessibilityWidgetConfig.debug`. Silent by default so production
+ * bundles don't leak noise, but makes genuine failures discoverable when the
+ * developer opts in.
+ */
+export function warnIfDebug(message: string, error?: unknown): void {
+  if (typeof window === 'undefined') return;
+  if (!window.AccessibilityWidgetConfig?.debug) return;
+
+  console.warn(`[aw] ${message}`, error);
+}

package/src/util/dom.ts

@@ -0,0 +1,68 @@
+export type AttrMap = Record<string, string | number | boolean | null | undefined>;
+export type EventMap = Record<string, EventListener>;
+
+export interface MakeOptions {
+  class?: string;
+  text?: string;
+  attrs?: AttrMap;
+  on?: EventMap;
+  children?: (Node | null | undefined)[];
+}
+
+/**
+ * Type-safe DOM builder. Intentionally does NOT accept raw HTML strings —
+ * all content is set via textContent or pre-built child nodes. This keeps
+ * the widget XSS-safe even if a future config field leaks untrusted input.
+ */
+export function make<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  opts: MakeOptions = {},
+): HTMLElementTagNameMap[K] {
+  const el = document.createElement(tag);
+  if (opts.class) el.className = opts.class;
+  if (opts.text !== undefined) el.textContent = opts.text;
+  if (opts.attrs) {
+    for (const [k, v] of Object.entries(opts.attrs)) {
+      if (v === null || v === undefined || v === false) continue;
+      el.setAttribute(k, v === true ? '' : String(v));
+    }
+  }
+  if (opts.on) {
+    for (const [evt, handler] of Object.entries(opts.on)) {
+      el.addEventListener(evt, handler);
+    }
+  }
+  if (opts.children) {
+    for (const child of opts.children) {
+      if (child) el.appendChild(child);
+    }
+  }
+  return el;
+}
+
+export function toggleAttr(
+  el: Element,
+  name: string,
+  value: string | number | null | undefined | false,
+): void {
+  if (value === null || value === undefined || value === false || value === '') {
+    el.removeAttribute(name);
+  } else {
+    el.setAttribute(name, String(value));
+  }
+}
+
+export function prefersReducedMotion(): boolean {
+  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+export function onceIdle(cb: () => void, timeout = 2000): void {
+  const win = window as unknown as {
+    requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number;
+  };
+  if (typeof win.requestIdleCallback === 'function') {
+    win.requestIdleCallback(cb, { timeout });
+  } else {
+    setTimeout(cb, Math.min(timeout, 1000));
+  }
+}

package/src/util/events.ts

@@ -0,0 +1,54 @@
+import type { Locale, ProfileId, WidgetState } from '../types/index.js';
+
+/**
+ * Public event map. Events are dispatched as `CustomEvent` on `document`
+ * under the prefixed type name (`accessibility-widget:<name>`). Using
+ * the DOM event system keeps loader and core decoupled — neither needs
+ * to share a listener registry.
+ */
+export interface WidgetEventMap {
+  stateChange: { state: WidgetState };
+  open: { trigger?: HTMLElement | null };
+  close: Record<string, never>;
+  profileApplied: { profile: ProfileId; state: WidgetState };
+  localeChanged: { locale: Locale };
+  reset: Record<string, never>;
+}
+
+export type WidgetEventName = keyof WidgetEventMap;
+
+const PREFIX = 'accessibility-widget:';
+
+export function dispatchWidgetEvent<K extends WidgetEventName>(
+  name: K,
+  detail: WidgetEventMap[K],
+): void {
+  if (typeof document === 'undefined') return;
+  try {
+    document.dispatchEvent(new CustomEvent(PREFIX + name, { detail }));
+  } catch {
+    /* CustomEvent not supported on ancient browsers — widget drops this event */
+  }
+}
+
+/**
+ * Subscribe to a widget event. Returns an unsubscribe function.
+ *
+ * @example
+ * ```ts
+ * const off = onWidgetEvent('stateChange', (e) => analytics.track('a11y', e.state));
+ * // later
+ * off();
+ * ```
+ */
+export function onWidgetEvent<K extends WidgetEventName>(
+  name: K,
+  handler: (detail: WidgetEventMap[K]) => void,
+): () => void {
+  if (typeof document === 'undefined') return () => {};
+  const listener = (e: Event): void => {
+    handler((e as CustomEvent<WidgetEventMap[K]>).detail);
+  };
+  document.addEventListener(PREFIX + name, listener);
+  return () => document.removeEventListener(PREFIX + name, listener);
+}

package/src/util/feature-icons.ts

@@ -0,0 +1,163 @@
+/**
+ * Lucide-based pictograms for widget features and UI controls.
+ *
+ * All paths are taken from Lucide (https://lucide.dev, MIT license) and
+ * rendered via our programmatic buildIcon() — never innerHTML — so there is
+ * no XSS surface. Only the raw `d` data is shipped, no runtime dependency.
+ *
+ * Convention: every icon uses the shared 24x24 Lucide viewBox and
+ * `stroke: true`, which lets <svg> itself carry the stroke defaults
+ * (fill:none, stroke:currentColor, stroke-width:2, round caps) — path
+ * definitions therefore stay minimal and compress well under gzip.
+ *
+ * This module is imported ONLY from the panel (core bundle).
+ * The loader bundle never pulls it in, keeping the initial FAB payload tiny.
+ */
+import type { FeatureId } from '../types/index.js';
+import type { SvgIconOptions } from './svg.js';
+
+export const FEATURE_ICONS: Record<FeatureId, SvgIconOptions> = {
+  fontSize: {
+    stroke: true,
+    paths: [{ d: 'M4 7V4h16v3M9 20h6M12 4v16' }],
+  },
+  lineHeight: {
+    stroke: true,
+    paths: [{ d: 'M3 6h18M3 12h18M3 18h18' }],
+  },
+  letterSpacing: {
+    stroke: true,
+    paths: [{ d: 'M18 8l4 4-4 4M2 12h20M6 8l-4 4 4 4' }],
+  },
+  contrast: {
+    stroke: true,
+    paths: [
+      { d: 'M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z' },
+      { d: 'M12 2a10 10 0 0 1 0 20z', fill: 'currentColor' },
+    ],
+  },
+  grayscale: {
+    stroke: true,
+    paths: [
+      {
+        d: 'M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5-2 1.6-3 3.5-3 5.5a7 7 0 0 0 7 7z',
+      },
+    ],
+  },
+  invertColors: {
+    stroke: true,
+    paths: [{ d: 'M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z' }],
+  },
+  dyslexiaFont: {
+    stroke: true,
+    paths: [
+      { d: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z' },
+      { d: 'M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z' },
+    ],
+  },
+  highlightLinks: {
+    stroke: true,
+    paths: [
+      { d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' },
+      { d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' },
+    ],
+  },
+  pauseAnimations: {
+    stroke: true,
+    paths: [{ d: 'M6 4h4v16H6zM14 4h4v16h-4z' }],
+  },
+  bigCursor: {
+    stroke: true,
+    paths: [{ d: 'M4 4l7.07 17 2.51-7.39L21 11.07z' }],
+  },
+  focusOutline: {
+    stroke: true,
+    paths: [
+      { d: 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z' },
+      {
+        d: 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2',
+      },
+    ],
+  },
+  readingMask: {
+    stroke: true,
+    paths: [
+      {
+        d: 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10',
+      },
+    ],
+  },
+  readingGuide: {
+    stroke: true,
+    paths: [{ d: 'M21 12H3M6 8v8M18 8v8' }],
+  },
+  tts: {
+    stroke: true,
+    paths: [
+      {
+        d: 'M11 4.7a.7.7 0 0 0-1.2-.5L6.4 7.6A1.4 1.4 0 0 1 5.4 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.4a1.4 1.4 0 0 1 1 .4l3.4 3.4A.7.7 0 0 0 11 19.3z',
+      },
+      { d: 'M16 9a5 5 0 0 1 0 6' },
+      { d: 'M19.36 18.36a9 9 0 0 0 0-12.72' },
+    ],
+  },
+  structureNav: {
+    stroke: true,
+    paths: [{ d: 'M21 12h-8M21 6H8M21 18h-8M3 6v4c0 1.1.9 2 2 2h3M3 10v6c0 1.1.9 2 2 2h3' }],
+  },
+};
+
+/** Reset / undo (Lucide: rotate-ccw). */
+export const ICON_RESET: SvgIconOptions = {
+  stroke: true,
+  paths: [{ d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5' }],
+};
+
+/** Info / tooltip trigger (Lucide: info). */
+export const ICON_INFO: SvgIconOptions = {
+  stroke: true,
+  paths: [
+    { d: 'M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z' },
+    { d: 'M12 16v-4' },
+    { d: 'M12 8h.01' },
+  ],
+};
+
+/** Globe / language switcher (Lucide: globe). */
+export const ICON_GLOBE: SvgIconOptions = {
+  stroke: true,
+  paths: [
+    { d: 'M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z' },
+    { d: 'M12 2a14.5 14.5 0 0 0 0 20M12 2a14.5 14.5 0 0 1 0 20M2 12h20' },
+  ],
+};
+
+/** Oversized mode (Lucide: maximize-2). */
+export const ICON_MAXIMIZE: SvgIconOptions = {
+  stroke: true,
+  paths: [{ d: 'M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7' }],
+};
+
+/** Collapsible section chevron (Lucide: chevron-down). */
+export const ICON_CHEVRON: SvgIconOptions = {
+  stroke: true,
+  paths: [{ d: 'm6 9 6 6 6-6' }],
+};
+
+/** Drag handle (Lucide: grip-horizontal) — filled dots. */
+export const ICON_GRIP: SvgIconOptions = {
+  circles: [
+    { cx: 9, cy: 5, r: 1 },
+    { cx: 9, cy: 12, r: 1 },
+    { cx: 9, cy: 19, r: 1 },
+    { cx: 15, cy: 5, r: 1 },
+    { cx: 15, cy: 12, r: 1 },
+    { cx: 15, cy: 19, r: 1 },
+  ],
+};
+
+/** Active state check mark (Lucide: check). */
+export const ICON_CHECK: SvgIconOptions = {
+  stroke: true,
+  paths: [{ d: 'M20 6 9 17l-5-5' }],
+};

package/src/util/language-names.ts

@@ -0,0 +1,41 @@
+/**
+ * Native language labels for the runtime language switcher.
+ *
+ * Each entry is the language's endonym (its own native name), not a localized
+ * translation. Showing "Deutsch" to a Japanese reader is more useful than
+ * "German" — the user who needs German will recognise their own word for it.
+ *
+ * The autonym pattern also sidesteps N×N translation matrices.
+ */
+import type { Locale } from '../types/index.js';
+
+export const LANGUAGE_NAMES: Record<Locale, string> = {
+  de: 'Deutsch',
+  en: 'English',
+  fr: 'Français',
+  es: 'Español',
+  it: 'Italiano',
+  pl: 'Polski',
+  tr: 'Türkçe',
+  ar: 'العربية',
+  zh: '中文',
+  hi: 'हिन्दी',
+  pt: 'Português',
+  bn: 'বাংলা',
+  ru: 'Русский',
+  ja: '日本語',
+  ko: '한국어',
+  vi: 'Tiếng Việt',
+  fa: 'فارسی',
+  ur: 'اردو',
+  th: 'ไทย',
+  id: 'Bahasa Indonesia',
+  he: 'עברית',
+  nl: 'Nederlands',
+  sv: 'Svenska',
+  cs: 'Čeština',
+  el: 'Ελληνικά',
+  hu: 'Magyar',
+  ro: 'Română',
+  uk: 'Українська',
+};