@adia-ai/a2ui-compose 0.0.1

package/transpiler/transpiler-maps.js

@@ -0,0 +1,277 @@
+/**
+ * Transpiler Maps — Static tag mapping tables and attribute extractors
+ * for the HTML → A2UI transpiler.
+ *
+ * Three mapping layers:
+ *   1. Reverse A2UI registry (tag → type, for *-n elements)
+ *   2. HTML tag map (native HTML → A2UI type)
+ *   3. Input type / ARIA role sub-maps
+ */
+
+import { registry } from '@adia-ai/a2ui-utils';
+
+// ── Alias types to skip in reverse registry (prefer primary type) ────────
+
+const ALIAS_TYPES = new Set([
+  'Select', 'LoadingIndicator', 'ErrorContainer', 'Keyboard',
+  'DatePicker', 'CommandPalette', 'Segmented', 'OTP', 'SideNav', 'IconSource',
+]);
+
+// ── Reverse Registry: tag → primary A2UI type ────────────────────────────
+
+/** @type {Map<string, string>} */
+export const reverseRegistry = new Map();
+
+for (const [type, tag] of registry) {
+  if (ALIAS_TYPES.has(type)) continue;
+  // First-write wins — skip if tag already mapped (avoids alias overwrite)
+  if (!reverseRegistry.has(tag)) {
+    reverseRegistry.set(tag, type);
+  }
+}
+
+// ── HTML Tag → A2UI Type ─────────────────────────────────────────────────
+
+/** @type {Record<string, { type: string, props?: Record<string, unknown> }>} */
+export const HTML_TAG_MAP = {
+  h1:         { type: 'Text', props: { variant: 'h1' } },
+  h2:         { type: 'Text', props: { variant: 'h2' } },
+  h3:         { type: 'Text', props: { variant: 'h3' } },
+  h4:         { type: 'Text', props: { variant: 'h4' } },
+  h5:         { type: 'Text', props: { variant: 'h5' } },
+  h6:         { type: 'Text', props: { variant: 'h6' } },
+  p:          { type: 'Text', props: { variant: 'body' } },
+  small:      { type: 'Text', props: { variant: 'caption' } },
+  strong:     { type: 'Text', props: { variant: 'body' } },
+  em:         { type: 'Text', props: { variant: 'body' } },
+  blockquote: { type: 'Text', props: { variant: 'body' } },
+  code:       { type: 'Code' },
+  pre:        { type: 'Code' },
+  kbd:        { type: 'Kbd' },
+  button:     { type: 'Button' },
+  select:     { type: 'ChoicePicker' },
+  textarea:   { type: 'TextArea' },
+  form:       { type: 'FormContainer' },
+  img:        { type: 'Image' },
+  video:      { type: 'Embed' },
+  iframe:     { type: 'Embed' },
+  audio:      { type: 'Embed' },
+  table:      { type: 'Table' },
+  ul:         { type: 'List' },
+  ol:         { type: 'List' },
+  li:         { type: 'Text', props: { variant: 'body' } },
+  nav:        { type: 'Nav' },
+  aside:      { type: 'Sidebar' },
+  main:       { type: 'Column' },
+  article:    { type: 'Card' },
+  details:    { type: 'Accordion' },
+  summary:    { type: 'Text', props: { variant: 'h5' } },
+  dialog:     { type: 'Modal' },
+  hr:         { type: 'Divider' },
+  a:          { type: 'Button', props: { variant: 'ghost' } },
+  header:     { type: 'Header' },
+  footer:     { type: 'Footer' },
+  section:    { type: 'Section' },
+  label:      { type: 'Text', props: { variant: 'body' } },
+  span:       { type: 'Text', props: { variant: 'body' } },
+};
+
+// ── Input Type Sub-Map ───────────────────────────────────────────────────
+
+/** @type {Record<string, { type: string, props?: Record<string, unknown> }>} */
+export const INPUT_TYPE_MAP = {
+  text:              { type: 'TextField' },
+  email:             { type: 'TextField', props: { type: 'email' } },
+  password:          { type: 'TextField', props: { type: 'password' } },
+  number:            { type: 'TextField', props: { type: 'number' } },
+  tel:               { type: 'TextField', props: { type: 'tel' } },
+  url:               { type: 'TextField', props: { type: 'url' } },
+  search:            { type: 'Search' },
+  checkbox:          { type: 'CheckBox' },
+  radio:             { type: 'Radio' },
+  range:             { type: 'Slider' },
+  date:              { type: 'DateTimeInput' },
+  time:              { type: 'DateTimeInput' },
+  'datetime-local':  { type: 'DateTimeInput' },
+  file:              { type: 'Upload' },
+  color:             { type: 'ColorPicker' },
+  submit:            { type: 'Button', props: { variant: 'primary', type: 'submit' } },
+  reset:             { type: 'Button', props: { variant: 'outline', type: 'reset' } },
+};
+
+// ── ARIA Role Map ────────────────────────────────────────────────────────
+
+/** @type {Record<string, string>} */
+export const ARIA_ROLE_MAP = {
+  tablist:       'Tabs',
+  tab:           'Tab',
+  tabpanel:      'Panel',
+  alert:         'Alert',
+  alertdialog:   'Dialog',
+  dialog:        'Modal',
+  navigation:    'Nav',
+  progressbar:   'Progress',
+  slider:        'Slider',
+  switch:        'Toggle',
+  menu:          'Menu',
+  menubar:       'Menu',
+  toolbar:       'Toolbar',
+  tooltip:       'Tooltip',
+  search:        'Search',
+  banner:        'Header',
+  contentinfo:   'Footer',
+  complementary: 'Sidebar',
+};
+
+// ── Skip Tags ────────────────────────────────────────────────────────────
+
+export const SKIP_TAGS = new Set([
+  'script', 'style', 'link', 'meta', 'head', 'br', 'wbr',
+  'noscript', 'template', 'slot', 'svg', 'path', 'circle',
+  'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'use',
+]);
+
+// ── Attribute Extractors ─────────────────────────────────────────────────
+
+/**
+ * Extract A2UI props from an HTML element based on the resolved A2UI type.
+ *
+ * @param {object} el — DOM element or MinimalElement
+ * @param {string} a2uiType — Resolved A2UI type name
+ * @returns {Record<string, unknown>}
+ */
+export function extractProps(el, a2uiType) {
+  const props = {};
+  const attr = (name) => el.getAttribute?.(name) ?? el.attributes?.get?.(name) ?? null;
+
+  // ── Text content (for leaf elements) ──
+  if (['Text', 'Kbd', 'Code'].includes(a2uiType)) {
+    const text = (el.textContent || '').trim().replace(/\s+/g, ' ');
+    if (text) props.textContent = text;
+  }
+
+  // ── Button ──
+  if (a2uiType === 'Button') {
+    const text = (el.textContent || '').trim().replace(/\s+/g, ' ');
+    if (text) props.text = text;
+    const type = attr('type');
+    if (type && type !== 'button') props.type = type;
+    if (attr('disabled') !== null) props.disabled = true;
+    // Variant inference from class
+    const cls = attr('class') || '';
+    if (cls.includes('primary')) props.variant = 'primary';
+    else if (cls.includes('danger')) props.variant = 'danger';
+    else if (cls.includes('ghost')) props.variant = 'ghost';
+    else if (cls.includes('outline')) props.variant = 'outline';
+    // Link href
+    if (el.tagName?.toLowerCase() === 'a') {
+      const href = attr('href');
+      if (href) props.href = href;
+    }
+  }
+
+  // ── TextField / Input ──
+  if (['TextField', 'Search'].includes(a2uiType)) {
+    for (const name of ['placeholder', 'name', 'value', 'pattern', 'min', 'max', 'minlength', 'maxlength', 'autocomplete']) {
+      const v = attr(name);
+      if (v !== null && v !== '') props[name] = v;
+    }
+    if (attr('required') !== null) props.required = true;
+    if (attr('disabled') !== null) props.disabled = true;
+    if (attr('readonly') !== null) props.readonly = true;
+    const type = attr('type');
+    if (type && type !== 'text') props.type = type;
+  }
+
+  // ── CheckBox / Toggle / Radio ──
+  if (['CheckBox', 'Toggle', 'Radio'].includes(a2uiType)) {
+    const name = attr('name');
+    if (name) props.name = name;
+    const value = attr('value');
+    if (value) props.value = value;
+    if (attr('checked') !== null) props.checked = true;
+    if (attr('disabled') !== null) props.disabled = true;
+    if (attr('required') !== null) props.required = true;
+  }
+
+  // ── Slider ──
+  if (a2uiType === 'Slider') {
+    for (const name of ['min', 'max', 'value', 'step', 'name']) {
+      const v = attr(name);
+      if (v !== null && v !== '') props[name] = name === 'step' ? v : Number(v) || v;
+    }
+    if (attr('disabled') !== null) props.disabled = true;
+  }
+
+  // ── Image ──
+  if (a2uiType === 'Image') {
+    const src = attr('src');
+    if (src) props.src = src;
+    const alt = attr('alt');
+    if (alt) props.alt = alt;
+  }
+
+  // ── TextArea ──
+  if (a2uiType === 'TextArea') {
+    for (const name of ['placeholder', 'name', 'rows', 'cols', 'minlength', 'maxlength']) {
+      const v = attr(name);
+      if (v !== null && v !== '') props[name] = v;
+    }
+    if (attr('required') !== null) props.required = true;
+    if (attr('disabled') !== null) props.disabled = true;
+    const text = (el.textContent || '').trim();
+    if (text) props.value = text;
+  }
+
+  // ── Embed ──
+  if (a2uiType === 'Embed') {
+    const src = attr('src');
+    if (src) props.src = src;
+  }
+
+  // ── Layout (Column, Row, Grid) ──
+  if (['Column', 'Row', 'Grid', 'List'].includes(a2uiType)) {
+    const gap = attr('gap');
+    if (gap) props.gap = gap;
+  }
+
+  // ── Label extraction from adjacent <label> or aria-label ──
+  if (['TextField', 'CheckBox', 'Toggle', 'Radio', 'Slider', 'Search', 'TextArea', 'ChoicePicker', 'DateTimeInput'].includes(a2uiType)) {
+    const ariaLabel = attr('aria-label');
+    if (ariaLabel) props.label = ariaLabel;
+  }
+
+  // ── Data attributes pass-through ──
+  if (el.attributes) {
+    const attrs = el.attributes instanceof Map ? el.attributes : el.attributes;
+    if (typeof attrs[Symbol.iterator] === 'function') {
+      for (const a of attrs) {
+        const name = a.name || a[0];
+        const value = a.value || a[1];
+        if (name?.startsWith('data-') && name !== 'data-a2ui-id') {
+          props[name] = value;
+        }
+      }
+    }
+  }
+
+  return props;
+}
+
+// ── Gap Inference ────────────────────────────────────────────────────────
+
+/**
+ * Map a pixel gap value to a token size.
+ * @param {string} gapValue — CSS gap value (e.g., "8px", "1rem")
+ * @returns {string} — "xs" | "sm" | "md" | "lg" | "xl"
+ */
+export function inferGap(gapValue) {
+  if (!gapValue) return 'md';
+  const px = parseFloat(gapValue);
+  if (isNaN(px)) return 'md';
+  if (px <= 4) return 'xs';
+  if (px <= 8) return 'sm';
+  if (px <= 16) return 'md';
+  if (px <= 24) return 'lg';
+  return 'xl';
+}