@adia-ai/web-components 0.0.10 → 0.0.12

package/components/field/field.test.js

@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './field.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('field-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders a <label> element carrying the `label` attr text', () => {
+    const f = mount('<field-ui label="Email"><input id="e" /></field-ui>');
+    const label = f.querySelector('label[data-field-label]');
+    expect(label).not.toBeNull();
+    // The label's first child is the text node; a hidden required-marker
+    // span is its last child (mounted but hidden). Inspecting textContent
+    // of the text node isolates the label copy from the marker.
+    expect(label.firstChild.nodeValue).toBe('Email');
+  });
+
+  it('auto-mints an id on the slotted control when missing and binds label[for]', () => {
+    const f = mount('<field-ui label="Email"><input /></field-ui>');
+    const input = f.querySelector('input');
+    const label = f.querySelector('label[data-field-label]');
+    expect(input.id).toMatch(/^field-ctl-/);
+    expect(label.getAttribute('for')).toBe(input.id);
+  });
+
+  it('respects an existing id on the slotted control', () => {
+    const f = mount('<field-ui label="Email"><input id="existing" /></field-ui>');
+    const input = f.querySelector('input');
+    const label = f.querySelector('label[data-field-label]');
+    expect(input.id).toBe('existing');
+    expect(label.getAttribute('for')).toBe('existing');
+  });
+
+  it('ignores [slot="trailing"] and [slot="action"] when picking the control', () => {
+    const f = mount(`
+      <field-ui label="Search">
+        <span slot="trailing">⌘K</span>
+        <input />
+        <button slot="action">x</button>
+      </field-ui>
+    `);
+    const input = f.querySelector('input');
+    const label = f.querySelector('label[data-field-label]');
+    expect(label.getAttribute('for')).toBe(input.id);
+  });
+
+  it('updates label text when the `label` attr changes', async () => {
+    const f = mount('<field-ui label="Email"><input /></field-ui>');
+    const label = f.querySelector('label[data-field-label]');
+    expect(label.firstChild.nodeValue).toBe('Email');
+    f.setAttribute('label', 'Username');
+    await tick();
+    expect(label.firstChild.nodeValue).toBe('Username');
+  });
+
+  it('rebinds label[for] when children change', async () => {
+    const f = mount('<field-ui label="X"><input id="first" /></field-ui>');
+    const label = f.querySelector('label[data-field-label]');
+    expect(label.getAttribute('for')).toBe('first');
+    // Replace the control.
+    f.querySelector('input').remove();
+    const next = document.createElement('input');
+    next.id = 'second';
+    f.appendChild(next);
+    // MutationObserver fires async on microtask.
+    await new Promise((r) => setTimeout(r, 10));
+    expect(label.getAttribute('for')).toBe('second');
+  });
+
+  it('reflects `inline` as a boolean attr (default false)', () => {
+    const f = mount('<field-ui label="X"><input /></field-ui>');
+    expect(f.hasAttribute('inline')).toBe(false);
+    f.inline = true;
+    expect(f.hasAttribute('inline')).toBe(true);
+    f.inline = false;
+    expect(f.hasAttribute('inline')).toBe(false);
+  });
+
+  it('renders without a label (label attr absent) — hides the <label> element', () => {
+    const f = mount('<field-ui><input /></field-ui>');
+    const label = f.querySelector('label[data-field-label]');
+    expect(label).not.toBeNull();
+    const input = f.querySelector('input');
+    expect(label.getAttribute('for')).toBe(input.id);
+  });
+
+  it('renders a hint element + wires aria-describedby when `hint` is set', async () => {
+    const f = mount('<field-ui label="E" hint="We keep it private"><input /></field-ui>');
+    await tick();
+    const hint = f.querySelector('[data-field-hint]');
+    const input = f.querySelector('input');
+    expect(hint?.textContent).toBe('We keep it private');
+    expect(hint?.hidden).toBe(false);
+    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
+  });
+
+  it('hides hint when `hint` is empty', async () => {
+    const f = mount('<field-ui label="E"><input /></field-ui>');
+    await tick();
+    const hint = f.querySelector('[data-field-hint]');
+    expect(hint?.hidden).toBe(true);
+    const input = f.querySelector('input');
+    expect(input.hasAttribute('aria-describedby')).toBe(false);
+  });
+
+  it('renders an error element + suppresses hint when both set', async () => {
+    const f = mount('<field-ui label="E" hint="hi" error="Required"><input /></field-ui>');
+    await tick();
+    const hint = f.querySelector('[data-field-hint]');
+    const err  = f.querySelector('[data-field-error]');
+    expect(err?.textContent).toBe('Required');
+    expect(err?.hidden).toBe(false);
+    expect(err?.getAttribute('role')).toBe('alert');
+    expect(hint?.hidden).toBe(true);  // error wins
+    const input = f.querySelector('input');
+    expect(input.getAttribute('aria-describedby')).toBe(err.id);
+  });
+
+  it('renders the `*` required marker on the label when `required` is set', async () => {
+    const f = mount('<field-ui label="Email" required><input /></field-ui>');
+    await tick();
+    const label = f.querySelector('label[data-field-label]');
+    const mark = label.querySelector('[data-field-required]');
+    expect(mark?.textContent).toBe('*');
+    expect(mark?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('updates hint/error text reactively when attrs change', async () => {
+    const f = mount('<field-ui label="E" hint="a"><input /></field-ui>');
+    await tick();
+    const hint = f.querySelector('[data-field-hint]');
+    expect(hint.textContent).toBe('a');
+    f.hint = 'b';
+    await tick();
+    expect(hint.textContent).toBe('b');
+  });
+});

package/components/field/field.yaml

@@ -0,0 +1,155 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaField
+tag: field-ui
+component: Field
+category: form
+version: 1
+description: >-
+  Labeled field wrapper. Composes a <label for="…"> with a form
+  control (input-ui, select-ui, textarea-ui, etc.) placed in the
+  default slot, plus optional [slot="trailing"] and [slot="action"]
+  regions. Auto-mints an id on the slotted control when missing so
+  clicking the label focuses the control — an accessibility upgrade
+  over setting label="…" on the control directly, which has no
+  [for] binding. Two layouts — stacked (default) and inline (the
+  `inline` mode attribute collapses everything to a single row).
+props:
+  label:
+    description: Label text rendered in the label row.
+    type: string
+    default: ""
+    reflect: true
+  hint:
+    description: >-
+      Help text rendered below the control in caption style. Wired
+      into the slotted control's aria-describedby so screen readers
+      announce it. Suppressed when `error` is set.
+    type: string
+    default: ""
+    reflect: true
+  error:
+    description: >-
+      Validation error message rendered below the control in danger
+      style. Takes precedence over `hint` in the same row, and
+      carries role="alert" so screen readers announce changes.
+    type: string
+    default: ""
+    reflect: true
+  required:
+    description: >-
+      Renders a "*" marker on the label. Does not itself enforce
+      validation — the slotted control's own `required` attr does
+      that; this is a visual signal only.
+    type: boolean
+    default: false
+    reflect: true
+  inline:
+    description: >-
+      Lay out label, trailing, control, and action on a single row
+      instead of the stacked default (mode attribute — changes grid
+      geometry, not tokens). Hint/error still render on their own
+      row below.
+    type: boolean
+    default: false
+    reflect: true
+slots:
+  default:
+    description: >-
+      The form control — input-ui, select-ui, textarea-ui,
+      check-ui, switch-ui, radio-ui, slider-ui, etc. Auto-id'd for
+      the label's [for] binding.
+  trailing:
+    description: >-
+      Secondary text or badge aligned with the label in the stacked
+      layout (right-aligned) or between label and control in the
+      inline layout.
+  action:
+    description: >-
+      Button adjacent to the control for inline actions (clear,
+      reset, help popover).
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --field-gap:
+    description: Gap between rows/cells of the field grid.
+  --field-label-color:
+    description: Label foreground color.
+  --field-label-size:
+    description: Label font size.
+  --field-label-weight:
+    description: Label font weight.
+  --field-required-color:
+    description: Color of the `*` required marker on the label.
+  --field-trailing-color:
+    description: Trailing text color.
+  --field-trailing-size:
+    description: Trailing text size.
+  --field-hint-color:
+    description: Hint text color.
+  --field-hint-size:
+    description: Hint text size.
+  --field-error-color:
+    description: Error text color (also drives the required-marker color).
+  --field-error-size:
+    description: Error text size.
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: stacked-email-field
+    description: >-
+      A simple stacked email field with a trailing "Required" hint
+      and a clear-button action adjacent to the input.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Field",
+          "label": "Email",
+          "children": ["email", "hint", "clear"]
+        },
+        { "id": "email", "component": "Input", "type": "email", "value": "you@example.com" },
+        { "id": "hint",  "component": "Text",  "slot": "trailing", "text": "Required" },
+        { "id": "clear", "component": "Button", "slot": "action", "icon": "x", "variant": "ghost" }
+      ]
+  - name: inline-search-field
+    description: >-
+      An inline search field — label beside the input, with a
+      trailing keyboard-shortcut hint.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Field",
+          "label": "Search",
+          "inline": true,
+          "children": ["q", "kbd"]
+        },
+        { "id": "q",   "component": "Input", "type": "search", "placeholder": "Type…" },
+        { "id": "kbd", "component": "Kbd",   "slot": "trailing", "text": "⌘K" }
+      ]
+keywords:
+  - field
+  - form
+  - label
+  - input
+  - wrapper
+synonyms:
+  form:
+    - field
+    - label
+    - input
+  label:
+    - field
+    - form
+related:
+  - input
+  - select
+  - textarea
+  - check
+  - radio
+  - switch
+  - slider

package/components/index.js

@@ -43,6 +43,7 @@ export { AdiaAlert } from './alert/alert.js';
 export { AdiaKbd } from './kbd/kbd.js';
 export { AdiaTag } from './tag/tag.js';
 export { AdiaCol }   from './col/col.js';
+export { AdiaField } from './field/field.js';
 export { AdiaRow }   from './row/row.js';
 export { AdiaGrid }  from './grid/grid.js';
 export { AdiaStack } from './stack/stack.js';

package/components/input/input.css

@@ -5,7 +5,8 @@
     --input-fg:              var(--a-ui-text);
     --input-border:          var(--a-ui-border);
     --input-border-hover:    var(--a-ui-border-hover);
-    --input-border-focus:    var(--a-ui-border-active);
+    --input-focus-ring:      var(--a-focus-ring);
+    --input-focus-ring-invalid: var(--a-focus-ring-invalid);
     --input-radius:          var(--a-radius);
     --input-height:          var(--a-size);
     --input-px:              var(--a-ui-px);
@@ -79,9 +80,16 @@
     color: var(--input-affix-fg-hover);
   }
   :scope:not([disabled]):focus-within [slot="field"] {
-    border-color: var(--input-border-focus);
+    /* Canonical ring — consumes the L3 --input-focus-ring token
+       which aliases --a-focus-ring. Border stays stable; the ring
+       is the focus affordance (WCAG 2.2 SC 2.4.11/2.4.13). */
+    box-shadow: var(--input-focus-ring);
     color: var(--input-fg-focus);
   }
+  :scope[aria-invalid="true"]:not([disabled]):focus-within [slot="field"],
+  :scope[error]:not([disabled]):focus-within [slot="field"] {
+    box-shadow: var(--input-focus-ring-invalid);
+  }
   :scope:not([disabled]):focus-within [slot="label"] {
     color: var(--input-label-fg-focus);
   }
@@ -154,7 +162,6 @@
     --input-bg: transparent;
     --input-border: transparent;
     --input-border-hover: transparent;
-    --input-border-focus: transparent;
   }
   :scope[variant="ghost"]:hover {
     --input-bg: var(--a-bg-muted);

package/components/range/range.css

@@ -11,7 +11,9 @@
     --range-fill-label-fg:   var(--a-ui-text-subtle);
     --range-border:          var(--a-ui-border);
     --range-border-hover:    var(--a-ui-border-hover);
-    --range-border-focus:    var(--a-ui-border-active);
+    --range-border-dragging: var(--a-ui-border-active);
+    --range-focus-ring:      var(--a-focus-ring);
+    --range-focus-ring-invalid: var(--a-focus-ring-invalid);
     --range-radius:          var(--a-radius);
     --range-height:          var(--a-size);
     --range-px:              var(--a-ui-px);
@@ -64,7 +66,12 @@
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="field"] {
-    border-color: var(--range-border-focus);
+    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
+    box-shadow: var(--range-focus-ring);
+  }
+  :scope[aria-invalid="true"]:focus-visible [slot="field"],
+  :scope[error]:focus-visible [slot="field"] {
+    box-shadow: var(--range-focus-ring-invalid);
   }
 
   /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */
@@ -127,7 +134,7 @@
 
   /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
   :scope[data-dragging] [slot="field"] {
-    border-color: var(--range-border-focus);
+    border-color: var(--range-border-dragging);
   }
   :scope[data-dragging] [data-layer="fill"] {
     background: var(--range-fill-bg-active);

package/components/select/select.css

@@ -18,7 +18,8 @@
     --select-bg-hover:          var(--a-ui-bg-hover);
     --select-border:            var(--a-ui-border);
     --select-border-hover:      var(--a-ui-border-hover);
-    --select-border-focus:      var(--a-ui-border-active);
+    --select-focus-ring:        var(--a-focus-ring);
+    --select-focus-ring-invalid: var(--a-focus-ring-invalid);
     --select-label-fg:          var(--a-ui-text-muted);
     --select-placeholder-fg:    var(--a-ui-text-placeholder);
     --select-caret-fg:          var(--a-ui-text-muted);
@@ -97,9 +98,14 @@
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
-    border-color: var(--select-border-focus);
+    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
+    box-shadow: var(--select-focus-ring);
     color: var(--select-fg);
   }
+  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
+  :scope[error]:focus-visible [slot="trigger"] {
+    box-shadow: var(--select-focus-ring-invalid);
+  }
   :scope:focus-visible::before {
     color: var(--select-fg-subtle);
   }
@@ -156,7 +162,6 @@
     --select-bg: transparent;
     --select-border: transparent;
     --select-border-hover: transparent;
-    --select-border-focus: transparent;
   }
   :scope[variant="ghost"] [slot="trigger"]:hover {
     background: var(--select-ghost-bg-hover);

package/components/textarea/textarea.css

@@ -5,7 +5,8 @@
     --textarea-fg:              var(--a-ui-text);
     --textarea-border:          var(--a-ui-border);
     --textarea-border-hover:    var(--a-ui-border-hover);
-    --textarea-border-focus:    var(--a-ui-border-active);
+    --textarea-focus-ring:      var(--a-focus-ring);
+    --textarea-focus-ring-invalid: var(--a-focus-ring-invalid);
     --textarea-radius:          var(--a-radius);
     --textarea-min-height:      calc(var(--a-size) * 2);
     --textarea-px:              var(--a-ui-px);
@@ -69,9 +70,18 @@
     color: var(--textarea-fg-hover);
   }
   :scope:not([disabled]) [slot="text"]:focus {
-    border-color: var(--textarea-border-focus);
+    /* Canonical ring via L3 token (see semantics.css FOCUS block).
+       `:focus` (not :focus-visible) is deliberate — the caret lives
+       in the contenteditable [slot="text"] span; :focus-visible on
+       the host wouldn't match the actual input surface. */
+    outline: none;
+    box-shadow: var(--textarea-focus-ring);
     color: var(--textarea-fg-hover);
   }
+  :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
+  :scope[error]:not([disabled]) [slot="text"]:focus {
+    box-shadow: var(--textarea-focus-ring-invalid);
+  }
   :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
   :scope:not([disabled]):focus-within [slot="label"] {
     color: var(--textarea-label-fg-focus);

package/components/upload/upload.css

@@ -18,6 +18,8 @@
     --upload-bg-disabled:      var(--a-ui-bg-disabled);
     --upload-fg-disabled:      var(--a-ui-text-disabled);
     --upload-border-disabled:  var(--a-ui-border-disabled);
+    --upload-focus-ring:       var(--a-focus-ring);
+    --upload-focus-ring-invalid: var(--a-focus-ring-invalid);
 
     /* ── Spacing ── */
     --upload-dropzone-pad:     var(--a-space-6);
@@ -69,8 +71,9 @@
     color: var(--upload-fg-hover);
   }
   [data-dropzone]:focus-visible {
-    outline: 2px solid var(--upload-border-hover);
-    outline-offset: 2px;
+    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
+    outline: none;
+    box-shadow: var(--upload-focus-ring);
   }
   [data-dropzone][data-dragover] {
     border-color: var(--upload-border-dragover);

package/core/_cm-core.js

@@ -0,0 +1,38 @@
+/**
+ * CodeMirror 6 core re-exports.
+ *
+ * Thin shim so the rest of the AdiaUI codebase imports CM symbols from
+ * `@core/_cm-core.js` and the production build can split them into a
+ * single minified chunk (see scripts/build-site.mjs:bundleCodeEditor).
+ */
+
+export {
+  EditorState,
+  EditorSelection,
+  Compartment,
+  StateEffect,
+} from '@codemirror/state';
+
+export {
+  EditorView,
+  lineNumbers,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  placeholder,
+  drawSelection,
+  keymap,
+} from '@codemirror/view';
+
+export {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from '@codemirror/commands';
+
+export {
+  HighlightStyle,
+  syntaxHighlighting,
+  LanguageSupport,
+  defaultHighlightStyle,
+} from '@codemirror/language';

package/core/_cm-theme.js

@@ -0,0 +1,58 @@
+/**
+ * AdiaUI base theme + highlight style for CodeMirror 6.
+ *
+ * The base theme is deliberately near-empty — it only sets the handful
+ * of structural rules that MUST live inside `EditorView.theme()`. All
+ * colors, spacing, font size, radius, and token-span styling live in
+ * `components/code/code.css` inside `@scope (code-ui)` and consume
+ * AdiaUI semantic tokens.
+ *
+ * CodeMirror injects its CSS-in-JS stylesheets at module load; AdiaUI's
+ * authored stylesheet loads after that, so `@scope (code-ui) .cm-*`
+ * overrides win on natural specificity — no `!important` needed.
+ *
+ * The highlight style uses `class:` rather than `color:` so CodeMirror
+ * emits `<span class="tok-keyword">` instead of inline styles — exactly
+ * what our CSS needs. See spec SPEC-CODE-EDITOR-001 §6.3 for the full
+ * Lezer tag → class → token mapping.
+ */
+
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+export const adiaBaseTheme = EditorView.theme({
+  '&': {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    color: 'inherit',
+    backgroundColor: 'transparent',
+  },
+  '.cm-content': {
+    padding: '0',
+    caretColor: 'inherit',
+  },
+  '.cm-focused': {
+    outline: 'none',
+  },
+});
+
+export const adiaHighlightStyle = HighlightStyle.define([
+  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment],                   class: 'tok-comment' },
+  { tag: [t.keyword, t.controlKeyword, t.modifier, t.operatorKeyword],               class: 'tok-keyword' },
+  { tag: [t.string, t.character, t.regexp, t.escape, t.special(t.string)],           class: 'tok-string' },
+  { tag: [t.number, t.integer, t.float],                                             class: 'tok-number' },
+  { tag: [t.bool, t.null, t.atom],                                                   class: 'tok-boolean' },
+  { tag: [t.operator, t.logicOperator, t.arithmeticOperator, t.compareOperator,
+          t.updateOperator, t.definitionOperator],                                   class: 'tok-operator' },
+  { tag: [t.punctuation, t.bracket, t.paren, t.brace, t.squareBracket,
+          t.angleBracket, t.separator],                                              class: 'tok-punctuation' },
+  { tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName],     class: 'tok-function' },
+  { tag: [t.variableName, t.local(t.variableName), t.self],                          class: 'tok-variable' },
+  { tag: [t.typeName, t.className, t.namespace],                                     class: 'tok-type' },
+  { tag: [t.propertyName, t.labelName, t.definition(t.variableName)],                class: 'tok-property' },
+  { tag: [t.tagName, t.heading, t.contentSeparator],                                 class: 'tok-tag' },
+  { tag: [t.attributeName, t.attributeValue],                                        class: 'tok-attribute' },
+  { tag: [t.url, t.link],                                                            class: 'tok-url' },
+  { tag: [t.invalid, t.deleted],                                                     class: 'tok-invalid' },
+]);

package/core/_lang-css.js

@@ -0,0 +1,2 @@
+import { css } from '@codemirror/lang-css';
+export const extension = css();

package/core/_lang-html.js

@@ -0,0 +1,2 @@
+import { html } from '@codemirror/lang-html';
+export const extension = html();

package/core/_lang-javascript.js

@@ -0,0 +1,2 @@
+import { javascript } from '@codemirror/lang-javascript';
+export const extension = javascript({ jsx: false, typescript: false });

package/core/_lang-json.js

@@ -0,0 +1,2 @@
+import { json } from '@codemirror/lang-json';
+export const extension = json();

package/core/_lang-markdown.js

@@ -0,0 +1,2 @@
+import { markdown } from '@codemirror/lang-markdown';
+export const extension = markdown();

package/core/_lang-yaml.js

@@ -0,0 +1,2 @@
+import { yaml } from '@codemirror/lang-yaml';
+export const extension = yaml();

package/core/code-editor-bundle.js

@@ -0,0 +1,63 @@
+/**
+ * code-editor-bundle — the single entry point `<code-ui>` imports when
+ * it needs CodeMirror 6. Re-exports core runtime + AdiaUI theme, and
+ * exposes a lazy-load map of language packs (one dynamic import per
+ * language, split into its own chunk by esbuild in production).
+ *
+ * Vite dev: imports resolve against node_modules naturally.
+ * Production: scripts/build-site.mjs runs esbuild with
+ * splitting: true, producing `code-editor-core.js` + one
+ * `code-editor-lang-<lang>.js` per language.
+ *
+ * Spec: docs/specs/code-editor.md §4 (architecture), §7 (bundling).
+ */
+
+export {
+  EditorState,
+  EditorSelection,
+  Compartment,
+  StateEffect,
+  EditorView,
+  lineNumbers,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  placeholder,
+  drawSelection,
+  keymap,
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+  HighlightStyle,
+  syntaxHighlighting,
+  LanguageSupport,
+  defaultHighlightStyle,
+} from './_cm-core.js';
+
+export { adiaBaseTheme, adiaHighlightStyle } from './_cm-theme.js';
+
+/** Dynamic-import map — one lazy-loaded chunk per supported language. */
+export const languages = {
+  json:       () => import('./_lang-json.js'),
+  html:       () => import('./_lang-html.js'),
+  javascript: () => import('./_lang-javascript.js'),
+  css:        () => import('./_lang-css.js'),
+  markdown:   () => import('./_lang-markdown.js'),
+  yaml:       () => import('./_lang-yaml.js'),
+};
+
+/** 10-second timeout for any single dynamic import. Matches spec §7.4. */
+export const LOAD_TIMEOUT_MS = 10_000;
+
+/**
+ * Wrap a dynamic-import promise with a timeout. Rejects on timeout;
+ * propagates the original error on fetch failure.
+ */
+export function importWithTimeout(loader, label) {
+  return Promise.race([
+    loader(),
+    new Promise((_, reject) =>
+      setTimeout(() => reject(new Error(`code-editor: ${label} load timed out after ${LOAD_TIMEOUT_MS}ms`)), LOAD_TIMEOUT_MS),
+    ),
+  ]);
+}