@zeyos/zx 4.3.0 → 4.4.0

package/src/components/card-view/record-card.js

@@ -7,6 +7,15 @@ import { readViewField, renderViewField } from '../view/record-view.js';
 /** @typedef {Record<string, any>} ViewRecord */
 /** @typedef {import('../view/record-view.js').ViewField} ViewField */
 /** @typedef {string|((record:ViewRecord,index:number)=>unknown)|null} RecordCardValueSource */
+/** @typedef {'eyebrow-start'|'eyebrow-end'|'title-prefix'} RecordCardFieldSlot */
+
+/**
+ * @typedef {Object} RecordCardFieldGroups
+ * @property {ViewField[]} eyebrowStart Fields shown at the logical start of the eyebrow row.
+ * @property {ViewField[]} eyebrowEnd Fields shown at the logical end of the eyebrow row.
+ * @property {ViewField[]} titlePrefix Fields shown immediately before, but outside, the heading.
+ * @property {ViewField[]} metadata Remaining labelled metadata fields.
+ */
 
 /**
  * @typedef {Object} RecordCardPreviewDescriptor
@@ -53,6 +62,7 @@ import { readViewField, renderViewField } from '../view/record-view.js';
  * @property {RecordCardLink|((record:ViewRecord,index:number)=>RecordCardLink)} [link]
  * @property {RecordCardAction[]|((record:ViewRecord,index:number)=>RecordCardAction[])} [actions=[]]
  * @property {false|'single'|'multi'} [selectable=false] Selection presentation.
+ * @property {'checkbox'|'card'} [selectionTrigger='checkbox'] Selection affordance for owning views.
  * @property {boolean} [selected=false] Current selection state.
  * @property {'outlined'|'raised'|'filled'} [variant='outlined'] Surface treatment.
  * @property {1|2|3|4|5|6} [headingLevel=3] Card title heading level.
@@ -73,11 +83,13 @@ import { readViewField, renderViewField } from '../view/record-view.js';
  * becomes text, URLs are normalized before reaching native attributes, and actions expose stable
  * data attributes for a component-owned delegated listener.
  *
- * The returned `<li>` belongs in a semantic `<ul>`/`<ol>`. When selectable it carries
- * `aria-selected`; multi-selection adds a native checkbox. It deliberately retains list-item
- * semantics rather than becoming an ARIA option because cards may contain native links and
- * buttons, which the listbox pattern does not permit inside an option. Preview images are paired
- * with a stable fallback. The owning component listens for image `error` and marks the fallback.
+ * The returned `<li>` belongs in a semantic `<ul>`/`<ol>`. When selectable its global
+ * `aria-description` announces selection without applying the unsupported `aria-selected` state
+ * to a listitem; multi-selection adds a native checkbox unless the owner opts into card-surface
+ * selection. It deliberately remains a listitem
+ * rather than becoming an ARIA option because cards may contain native links and buttons, which
+ * the listbox pattern does not permit inside an option. Preview images are paired with a stable
+ * fallback. The owning component listens for image `error` and marks the fallback.
  *
  * @param {ViewRecord} record Record to render.
  * @param {number} index Current display index.
@@ -112,7 +124,14 @@ export function createRecordCard(record, index, options = {}) {
     class: 'zx-record-card__heading',
     id: headingId
   }, headingContent);
-  const selection = selectable === 'multi' ? h('label', {
+  const fieldGroups = partitionRecordCardFields(visibleFields, titleSource, subtitleSource);
+  const eyebrow = createEyebrow(record, index, fieldGroups.eyebrowStart, fieldGroups.eyebrowEnd);
+  const titlePrefix = createFieldList(record, index, fieldGroups.titlePrefix,
+    'zx-record-card__title-prefix', 'title-prefix');
+  const titleRow = titlePrefix
+    ? h('div', { class: 'zx-record-card__title-row' }, titlePrefix, heading)
+    : heading;
+  const selection = selectable === 'multi' && options.selectionTrigger !== 'card' ? h('label', {
     class: 'zx-record-card__selection'
   }, h('input', {
     type: 'checkbox',
@@ -127,25 +146,57 @@ export function createRecordCard(record, index, options = {}) {
     ariaLabel: `Actions for ${textAlternative(title) || 'record'}`
   }, controls, actionNodes) : null;
   const header = h('header', { class: 'zx-record-card__header' }, selection,
-    h('div', { class: 'zx-record-card__titles' }, heading,
+    h('div', { class: 'zx-record-card__titles' }, titleRow,
       isEmptyContent(subtitle) ? null : h('p', { class: 'zx-record-card__subtitle' }, contentNode(subtitle))),
     actionArea);
-  const metadata = createMetadata(record, index, visibleFields, titleSource, subtitleSource);
-  const body = h('div', { class: 'zx-record-card__body' }, header, metadata);
+  const metadata = createFieldList(record, index, fieldGroups.metadata, 'zx-record-card__metadata');
+  const body = h('div', { class: 'zx-record-card__body' }, eyebrow, header, metadata);
   const card = /** @type {HTMLLIElement} */ (h('li', {
     class: 'zx-record-card',
     tabindex: 0,
-    ariaSelected: selectable ? String(selected) : undefined,
+    ariaDescription: selectable ? selected ? 'Selected' : 'Not selected' : undefined,
     ariaLabelledby: headingId,
+    ariaKeyshortcuts: selectable && options.selectionTrigger === 'card' ? 'Space Enter' : undefined,
     dataset: {
       recordIndex: String(index),
       variant: normalizeVariant(options.variant),
-      selected: String(selected)
+      selected: String(selected),
+      selectionTrigger: selectable && options.selectionTrigger === 'card' ? 'card' : 'checkbox'
     }
   }, preview ? createPreview(preview) : null, body));
   return card;
 }
 
+/**
+ * Partitions ordered visible fields into the shared record-card slots. A recognized
+ * `field.view.card.slot` moves the field to that semantic region; absent or unknown values remain
+ * ordinary metadata. Title and subtitle fields retain the existing no-duplication rule.
+ *
+ * The input array and descriptors are never mutated. Each field appears in at most one result
+ * array, and the order within every result follows the supplied visible-field order.
+ *
+ * @param {ViewField[]} fields Ordered visible fields.
+ * @param {RecordCardValueSource} [titleSource=null] Active title field or resolver.
+ * @param {RecordCardValueSource} [subtitleSource=null] Active subtitle field or resolver.
+ * @returns {RecordCardFieldGroups} Partitioned fields.
+ */
+export function partitionRecordCardFields(fields, titleSource = null, subtitleSource = null) {
+  /** @type {RecordCardFieldGroups} */
+  const groups = { eyebrowStart: [], eyebrowEnd: [], titlePrefix: [], metadata: [] };
+  const titleId = typeof titleSource === 'string' ? titleSource : null;
+  const subtitleId = typeof subtitleSource === 'string' ? subtitleSource : null;
+
+  for (const field of Array.isArray(fields) ? fields : []) {
+    if (!field.duplicate && (field.id === titleId || field.id === subtitleId)) continue;
+    const slot = resolveRecordCardFieldSlot(field);
+    if (slot === 'eyebrow-start') groups.eyebrowStart.push(field);
+    else if (slot === 'eyebrow-end') groups.eyebrowEnd.push(field);
+    else if (slot === 'title-prefix') groups.titlePrefix.push(field);
+    else groups.metadata.push(field);
+  }
+  return groups;
+}
+
 /**
  * Resolves a preview without touching the DOM. Unsafe, malformed, and non-image URL schemes are
  * rejected into the same descriptor shape so callers can still render the stable fallback.
@@ -245,26 +296,52 @@ function createPreview(preview) {
   }, fallback, image);
 }
 
+/**
+ * @param {ViewRecord} record
+ * @param {number} index
+ * @param {ViewField[]} eyebrowStart
+ * @param {ViewField[]} eyebrowEnd
+ * @returns {HTMLElement|null}
+ */
+function createEyebrow(record, index, eyebrowStart, eyebrowEnd) {
+  const start = createFieldList(record, index, eyebrowStart,
+    'zx-record-card__eyebrow-group', 'eyebrow-start');
+  const end = createFieldList(record, index, eyebrowEnd,
+    'zx-record-card__eyebrow-group', 'eyebrow-end');
+  return start || end ? h('div', { class: 'zx-record-card__eyebrow' }, start, end) : null;
+}
+
 /**
  * @param {ViewRecord} record
  * @param {number} index
  * @param {ViewField[]} fields
- * @param {RecordCardValueSource} titleSource
- * @param {RecordCardValueSource} subtitleSource
+ * @param {string} className
+ * @param {RecordCardFieldSlot|null} [slot=null]
  * @returns {HTMLElement|null}
  */
-function createMetadata(record, index, fields, titleSource, subtitleSource) {
-  const titleId = typeof titleSource === 'string' ? titleSource : null;
-  const subtitleId = typeof subtitleSource === 'string' ? subtitleSource : null;
-  const visible = fields.filter((field) => field.duplicate || field.id !== titleId && field.id !== subtitleId);
-  if (visible.length === 0) return null;
-  return h('dl', { class: 'zx-record-card__metadata' }, visible.map((field) => h('div', {
+function createFieldList(record, index, fields, className, slot = null) {
+  if (fields.length === 0) return null;
+  return h('dl', {
+    class: className,
+    dataset: slot ? { cardSlot: slot } : undefined
+  }, fields.map((field) => h('div', {
     class: 'zx-record-card__field',
-    dataset: { fieldId: field.id }
+    dataset: { fieldId: field.id, ...(slot ? { cardSlot: slot } : {}) }
   }, h('dt', { class: 'zx-record-card__label' }, field.label),
   h('dd', { class: 'zx-record-card__value' }, contentNode(renderViewField(field, record, index))))));
 }
 
+/** @param {ViewField} field @returns {RecordCardFieldSlot|null} */
+function resolveRecordCardFieldSlot(field) {
+  const view = field?.view;
+  if (!view || typeof view !== 'object' || Array.isArray(view)) return null;
+  const card = view.card;
+  if (!card || typeof card !== 'object' || Array.isArray(card)) return null;
+  const slot = /** @type {{slot?:unknown}} */ (card).slot;
+  return slot === 'eyebrow-start' || slot === 'eyebrow-end' || slot === 'title-prefix'
+    ? slot : null;
+}
+
 /** @param {RecordCardAction} action @returns {HTMLElement} */
 function createAction(action) {
   const label = String(action.label ?? '');
@@ -356,7 +433,7 @@ function safePreviewUrl(value) {
   try {
     const base = globalThis.location?.href ?? 'https://zx.invalid/';
     const protocol = new URL(href, base).protocol.toLowerCase();
-    return ['http:', 'https:', 'blob:', 'file:'].includes(protocol) ? href : null;
+    return ['http:', 'https:', 'blob:'].includes(protocol) ? href : null;
   } catch {
     return null;
   }

package/src/components/code-editor/code-editor.css

@@ -0,0 +1,67 @@
+.zx-code-editor {
+  overflow: hidden;
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-control);
+}
+
+.zx-code-editor:focus-within {
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-code-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zx-space-3);
+  min-block-size: var(--zx-control-height);
+  padding-inline: var(--zx-space-3);
+  border-block-end: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-subtle);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-code-editor__language {
+  overflow: hidden;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  text-wrap: nowrap;
+}
+
+.zx-code-editor__position {
+  font-variant-numeric: tabular-nums;
+  text-wrap: nowrap;
+}
+
+.zx-code-editor__input {
+  display: block;
+  inline-size: 100%;
+  min-block-size: calc(var(--zx-control-height) * 4);
+  resize: vertical;
+  padding: var(--zx-space-3);
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--zx-color-text);
+  font-family: var(--zx-font-mono);
+  font-size: var(--zx-text-sm);
+  line-height: 1.55;
+  tab-size: 2;
+}
+
+.zx-code-editor__input:focus-visible {
+  box-shadow: none;
+}
+
+.zx-code-editor[data-readonly="true"] {
+  background: var(--zx-color-bg-subtle);
+}
+
+.zx-code-editor[data-disabled="true"] {
+  opacity: 0.6;
+}

package/src/components/code-editor/code-editor.js

@@ -0,0 +1,288 @@
+import { Component } from '../../core/component.js';
+import { h } from '../../core/dom.js';
+
+/**
+ * @typedef {Object} CodeEditorOptions
+ * @property {unknown} [value=''] Initial text.
+ * @property {string} [name=''] Form field name.
+ * @property {string} [language='text'] Language identifier shown to the user and exposed as data.
+ * @property {string} [label='Code editor'] Accessible editor label.
+ * @property {string} [placeholder=''] Placeholder text.
+ * @property {number} [rows=12] Visible textarea rows.
+ * @property {string} [indent='\t'] Text inserted by Tab and removed by Shift+Tab.
+ * @property {'off'|'soft'|'hard'} [wrap='off'] Textarea wrapping behavior.
+ * @property {boolean} [spellcheck=false] Whether browser spellcheck is enabled.
+ * @property {boolean} [readOnly=false] Whether content can be selected but not changed.
+ * @property {boolean} [disabled=false] Whether the editor is disabled.
+ * @property {boolean} [status=true] Whether the line/column status is visible.
+ * @property {(event: CustomEvent<{value:string}>) => void} [oninput] Input listener.
+ * @property {(event: CustomEvent<{value:string}>) => void} [onchange] Change listener.
+ */
+
+/**
+ * Dependency-free source editor for structured text, Markdown, JSON and code. It deliberately uses
+ * a native textarea: values remain text-safe, browser undo and IME behavior stay intact, and Tab /
+ * Shift+Tab provide predictable indentation without a third-party editor runtime.
+ * @fires CodeEditor#input
+ * @fires CodeEditor#change
+ * @extends {Component<CodeEditorOptions>}
+ */
+export class CodeEditor extends Component {
+  static cssName = 'code-editor';
+
+  /** @type {CodeEditorOptions} */
+  static defaults = {
+    value: '',
+    name: '',
+    language: 'text',
+    label: 'Code editor',
+    placeholder: '',
+    rows: 12,
+    indent: '\t',
+    wrap: 'off',
+    spellcheck: false,
+    readOnly: false,
+    disabled: false,
+    status: true
+  };
+
+  /** @returns {HTMLElement} */
+  render() {
+    this._createdRoot = this.el === null;
+    const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
+    this.el = root;
+    this._initialChildren = this._createdRoot ? [] : [...root.childNodes];
+    this._initialAttributes = new Map(['data-language', 'data-readonly', 'data-disabled']
+      .map((name) => [name, root.getAttribute(name)]));
+    this._language = normalizeLanguage(this.options.language);
+    this._languageLabel = h('span', { class: 'zx-code-editor__language' }, this._language);
+    this._position = h('span', {
+      class: 'zx-code-editor__position',
+      role: 'status',
+      ariaLive: 'polite'
+    });
+    this._header = h('div', { class: 'zx-code-editor__header' }, this._languageLabel,
+      this.options.status ? this._position : null);
+    this._input = /** @type {HTMLTextAreaElement} */ (h('textarea', {
+      class: 'zx-code-editor__input',
+      name: this.options.name ? String(this.options.name) : undefined,
+      ariaLabel: String(this.options.label ?? 'Code editor'),
+      placeholder: String(this.options.placeholder ?? ''),
+      rows: normalizeRows(this.options.rows),
+      wrap: normalizeWrap(this.options.wrap),
+      spellcheck: Boolean(this.options.spellcheck),
+      readOnly: Boolean(this.options.readOnly),
+      disabled: Boolean(this.options.disabled),
+      autocomplete: 'off',
+      autocapitalize: 'off'
+    }));
+    this._input.value = String(this.options.value ?? '');
+    root.dataset.language = this._language;
+    root.dataset.readonly = String(Boolean(this.options.readOnly));
+    root.dataset.disabled = String(Boolean(this.options.disabled));
+    root.replaceChildren(this._header, this._input);
+
+    this.listen(this._input, 'keydown', (event) => this._handleKeydown(event));
+    this.listen(this._input, 'input', () => {
+      this._updatePosition();
+      this.emit('input', { value: this.getValue() });
+    });
+    this.listen(this._input, 'change', () => this.emit('change', { value: this.getValue() }));
+    for (const type of ['click', 'keyup', 'select', 'focus']) {
+      this.listen(this._input, type, () => this._updatePosition());
+    }
+    this._updatePosition();
+    return root;
+  }
+
+  /** @returns {string} */
+  getValue() { return this._input.value; }
+
+  /**
+   * Replaces the editor text.
+   * @param {unknown} value New value.
+   * @param {{silent?:boolean}} [options={}] Suppress the `change` event.
+   * @returns {this}
+   */
+  setValue(value, { silent = false } = {}) {
+    const next = String(value ?? '');
+    if (this._input.value === next) return this;
+    this._input.value = next;
+    this._updatePosition();
+    if (!silent) this.emit('change', { value: next });
+    return this;
+  }
+
+  /** @param {unknown} language New language identifier. @returns {this} */
+  setLanguage(language) {
+    this._language = normalizeLanguage(language);
+    this.el.dataset.language = this._language;
+    this._languageLabel.textContent = this._language;
+    return this;
+  }
+
+  /** @returns {this} */
+  focus() { this._input.focus(); return this; }
+
+  /** @returns {this} */
+  enable() { this._input.disabled = false; this.el.dataset.disabled = 'false'; return this; }
+
+  /** @returns {this} */
+  disable() { this._input.disabled = true; this.el.dataset.disabled = 'true'; return this; }
+
+  /** @param {boolean} value Read-only state. @returns {this} */
+  setReadOnly(value) {
+    this._input.readOnly = Boolean(value);
+    this.el.dataset.readonly = String(Boolean(value));
+    return this;
+  }
+
+  /** @param {KeyboardEvent} event @returns {void} */
+  _handleKeydown(event) {
+    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey ||
+        this._input.readOnly || this._input.disabled) return;
+    const indent = String(this.options.indent ?? '\t');
+    if (!indent) return;
+    event.preventDefault();
+    const result = indentSelection(
+      this._input.value,
+      this._input.selectionStart ?? 0,
+      this._input.selectionEnd ?? 0,
+      indent,
+      event.shiftKey
+    );
+    if (result.value === this._input.value) return;
+    this._input.value = result.value;
+    this._input.setSelectionRange(result.start, result.end);
+    this._updatePosition();
+    this.emit('input', { value: this.getValue() });
+  }
+
+  /** @returns {void} */
+  _updatePosition() {
+    if (!this.options.status) return;
+    const position = editorPosition(this._input.value, this._input.selectionStart ?? 0,
+      this._input.selectionEnd ?? 0);
+    this._position.textContent = position.lines > 1
+      ? `Ln ${position.line}, Col ${position.column} · ${position.lines} lines selected`
+      : `Ln ${position.line}, Col ${position.column}`;
+  }
+
+  /** @returns {void} */
+  destroy() {
+    if (!this._createdRoot) {
+      this.el.replaceChildren(...this._initialChildren);
+      for (const [name, value] of this._initialAttributes) {
+        if (value === null) this.el.removeAttribute(name);
+        else this.el.setAttribute(name, value);
+      }
+    }
+    super.destroy();
+  }
+}
+
+/**
+ * Applies Tab or Shift+Tab to a textarea selection.
+ * @param {string} value Complete source value.
+ * @param {number} start Selection start.
+ * @param {number} end Selection end.
+ * @param {string} indent Indentation text.
+ * @param {boolean} outdent Whether to remove indentation.
+ * @returns {{value:string,start:number,end:number}}
+ */
+export function indentSelection(value, start, end, indent = '\t', outdent = false) {
+  const source = String(value ?? '');
+  const unit = String(indent ?? '');
+  const from = clampIndex(start, source.length);
+  const to = clampIndex(end, source.length);
+  if (!unit) return { value: source, start: from, end: to };
+
+  if (from === to && !outdent) {
+    return {
+      value: source.slice(0, from) + unit + source.slice(to),
+      start: from + unit.length,
+      end: from + unit.length
+    };
+  }
+
+  const lineStart = source.lastIndexOf('\n', Math.max(0, from - 1)) + 1;
+  let lineEnd = source.indexOf('\n', to);
+  if (lineEnd < 0) lineEnd = source.length;
+  const block = source.slice(lineStart, lineEnd);
+  const lines = block.split('\n');
+  let removedFirst = 0;
+  let delta = 0;
+  const transformed = lines.map((line, index) => {
+    if (!outdent) {
+      delta += unit.length;
+      return unit + line;
+    }
+    const removed = removableIndent(line, unit);
+    if (index === 0) removedFirst = removed;
+    delta -= removed;
+    return line.slice(removed);
+  }).join('\n');
+  const nextStart = outdent
+    ? Math.max(lineStart, from - Math.min(removedFirst, from - lineStart))
+    : from + unit.length;
+  return {
+    value: source.slice(0, lineStart) + transformed + source.slice(lineEnd),
+    start: nextStart,
+    end: Math.max(nextStart, to + delta)
+  };
+}
+
+/** @param {string} value @param {number} start @param {number} end @returns {{line:number,column:number,lines:number}} */
+export function editorPosition(value, start, end = start) {
+  const source = String(value ?? '');
+  const from = clampIndex(start, source.length);
+  const to = clampIndex(end, source.length);
+  const before = source.slice(0, from);
+  return {
+    line: before.split('\n').length,
+    column: from - before.lastIndexOf('\n'),
+    lines: source.slice(from, to).split('\n').length
+  };
+}
+
+/** @param {string} line @param {string} indent @returns {number} */
+function removableIndent(line, indent) {
+  if (line.startsWith(indent)) return indent.length;
+  if (indent === '\t') return line.startsWith('\t') ? 1 : Math.min(/^ +/.exec(line)?.[0].length ?? 0, 2);
+  return Math.min(/^\s+/.exec(line)?.[0].length ?? 0, indent.length);
+}
+
+/** @param {unknown} value @returns {string} */
+function normalizeLanguage(value) {
+  const language = String(value ?? 'text').trim().toLowerCase();
+  return /^[a-z0-9][a-z0-9+_.-]*$/.test(language) ? language : 'text';
+}
+
+/** @param {unknown} value @returns {number} */
+function normalizeRows(value) {
+  const rows = Number(value);
+  return Number.isFinite(rows) ? Math.max(2, Math.min(100, Math.round(rows))) : 12;
+}
+
+/** @param {unknown} value @returns {'off'|'soft'|'hard'} */
+function normalizeWrap(value) {
+  return ['off', 'soft', 'hard'].includes(String(value)) ? /** @type {'off'|'soft'|'hard'} */ (value) : 'off';
+}
+
+/** @param {unknown} value @param {number} length @returns {number} */
+function clampIndex(value, length) {
+  const number = Number(value);
+  return Math.max(0, Math.min(length, Number.isFinite(number) ? Math.round(number) : 0));
+}
+
+/**
+ * Code editor input event.
+ * @event CodeEditor#input
+ * @type {CustomEvent<{value:string}>}
+ */
+
+/**
+ * Code editor committed change event.
+ * @event CodeEditor#change
+ * @type {CustomEvent<{value:string}>}
+ */

package/src/components/code-editor/field-adapter.js

@@ -0,0 +1,34 @@
+import { CodeEditor } from './code-editor.js';
+import { Field } from '../field/field.js';
+
+/**
+ * Registers the CodeEditor-backed `code` field type.
+ * @returns {void}
+ */
+export function registerCodeEditorFieldAdapter() {
+  Field.register('code', (field, options) => {
+    const editor = field.own(new CodeEditor(null, {
+      label: options.label ? String(options.label) : 'Code editor',
+      placeholder: options.placeholder,
+      readOnly: Boolean(options.props?.readOnly),
+      disabled: Boolean(options.disabled),
+      ...(options.props ?? {}),
+      value: options.value
+    }));
+    let setting = false;
+    editor.on('input', (event) => {
+      if (!setting) field.emit('change', { value: event.detail.value });
+    });
+    return {
+      el: editor.el,
+      get: () => editor.getValue(),
+      set: (value) => {
+        setting = true;
+        try { editor.setValue(value, { silent: true }); }
+        finally { setting = false; }
+      },
+      focus: () => editor.focus(),
+      setDisabled: (value) => (value ? editor.disable() : editor.enable())
+    };
+  });
+}

package/src/components/context-menu/context-menu.css

@@ -16,15 +16,19 @@
 }
 
 .zx-context-menu__item {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: transparent;
+  border: 1px solid transparent;
   background: transparent;
   padding-inline: var(--zx-control-pad-x);
+  color: inherit;
+  font: inherit;
   text-align: start;
+  text-decoration: none;
 }
 
 .zx-context-menu__item:hover,
@@ -42,11 +46,84 @@
   opacity: 0.65;
 }
 
-.zx-context-menu__icon {
+.zx-context-menu__leading,
+.zx-context-menu__meta {
   display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   flex: none;
 }
 
+.zx-context-menu__meta {
+  justify-content: flex-end;
+}
+
+.zx-context-menu__leading {
+  justify-content: center;
+  inline-size: var(--zx-space-4);
+}
+
+.zx-context-menu__body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+}
+
+.zx-context-menu__label,
+.zx-context-menu__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-context-menu__description,
+.zx-context-menu__shortcut,
+.zx-context-menu__adornment {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-context-menu__badge {
+  min-inline-size: var(--zx-space-4);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: center;
+}
+
+.zx-context-menu__shortcut {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-family: var(--zx-font-mono);
+}
+
+.zx-context-menu__check {
+  inline-size: var(--zx-space-3);
+  block-size: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-sm);
+}
+
+.zx-context-menu__check[data-check-kind="radio"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-context-menu__item[aria-checked="true"] .zx-context-menu__check {
+  border-color: var(--zx-color-accent);
+  background: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
+}
+
+.zx-context-menu__heading {
+  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+}
+
 .zx-context-menu__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);