@adia-ai/web-components 0.0.1

package/core/form.js

@@ -0,0 +1,217 @@
+/**
+ * AdiaFormElement — Form-participating base class.
+ *
+ * Extends AdiaElement with ElementInternals form participation,
+ * constraint validation (required, pattern, minlength, maxlength),
+ * and auto-validation UX (submit, blur, input re-validation).
+ *
+ * Usage:
+ *   import { AdiaFormElement } from './form.js';
+ *
+ *   class MyField extends AdiaFormElement {
+ *     static properties = {
+ *       ...AdiaFormElement.properties,
+ *       placeholder: { type: String, default: '', reflect: true },
+ *     };
+ *   }
+ *
+ * Auto-validation lifecycle:
+ *   - On form submit: browser fires `invalid` → auto-sets `error` attr
+ *   - On input (if currently invalid): re-validates to clear as soon as valid
+ *   - On blur (if dirty): validates
+ *   - On form reset: clears all validation state
+ *
+ * Custom error messages via data attributes:
+ *   data-msg-required="Please enter your name"
+ *   data-msg-pattern="Invalid format"
+ *   data-msg-minlength="Too short"
+ *   data-msg-maxlength="Too long"
+ *
+ * Manual control:
+ *   el.validate()          → returns boolean, surfaces error
+ *   el.setInvalid('msg')   → custom error
+ *   el.setValid()          → clear error
+ *   el.syncValue(val)      → update form value + run constraints
+ */
+
+import { AdiaElement } from './element.js';
+
+export class AdiaFormElement extends AdiaElement {
+  static formAssociated = true;
+
+  static get properties() {
+    return {
+      name:      { type: String,  default: '', reflect: true },
+      value:     { type: String,  default: '', reflect: true },
+      disabled:  { type: Boolean, default: false, reflect: true },
+      required:  { type: Boolean, default: false, reflect: true },
+      readonly:  { type: Boolean, default: false, reflect: true },
+      error:     { type: String,  default: '', reflect: true },
+      hint:      { type: String,  default: '', reflect: true },
+      pattern:   { type: String,  default: '', reflect: true },
+      minlength: { type: Number,  default: null, reflect: true },
+      maxlength: { type: Number,  default: null, reflect: true },
+    };
+  }
+
+  #dirty = false;
+
+  // ── ElementInternals accessors ──
+
+  get form() { return this.internals.form; }
+  get labels() { return this.internals.labels; }
+  get validity() { return this.internals.validity; }
+  get validationMessage() { return this.internals.validationMessage; }
+  get willValidate() { return this.internals.willValidate; }
+
+  checkValidity() { return this.internals.checkValidity(); }
+  reportValidity() { return this.internals.reportValidity(); }
+
+  // ── Value sync ──
+
+  /** Update the form value and run constraint validation. */
+  syncValue(val) {
+    val = val ?? this.value ?? '';
+    this.internals.setFormValue(val);
+    this.#runConstraints(val);
+  }
+
+  // ── Manual validation control ──
+
+  /** Clear all validation errors. */
+  setValid() {
+    this.internals.setValidity({});
+    this.removeAttribute('aria-invalid');
+    if (this.error) this.error = '';
+  }
+
+  /** Set a custom validation error. */
+  setInvalid(message, anchor) {
+    this.internals.setValidity({ customError: true }, message || 'Invalid', anchor || this);
+    this.setAttribute('aria-invalid', 'true');
+    this.error = message || 'Invalid';
+  }
+
+  /** Run validation and surface errors. Returns boolean. */
+  validate() {
+    const valid = this.#runConstraints(this.value ?? '');
+    if (!valid) {
+      this.setAttribute('aria-invalid', 'true');
+      this.error = this.validationMessage;
+    } else {
+      this.removeAttribute('aria-invalid');
+      if (this.error) this.error = '';
+    }
+    return valid;
+  }
+
+  // ── Constraint engine ──
+
+  #runConstraints(val) {
+    val = val ?? this.value ?? '';
+    const str = String(val);
+
+    if (this.required && !str.trim()) {
+      this.internals.setValidity(
+        { valueMissing: true },
+        this.getAttribute('data-msg-required') || 'This field is required.',
+        this,
+      );
+      return false;
+    }
+
+    if (this.pattern && str) {
+      try {
+        if (!new RegExp(`^(?:${this.pattern})$`).test(str)) {
+          this.internals.setValidity(
+            { patternMismatch: true },
+            this.getAttribute('data-msg-pattern') || 'Please match the requested format.',
+            this,
+          );
+          return false;
+        }
+      } catch {}
+    }
+
+    if (this.minlength != null && this.minlength > 0 && str.length > 0 && str.length < this.minlength) {
+      this.internals.setValidity(
+        { tooShort: true },
+        this.getAttribute('data-msg-minlength') || `Please use at least ${this.minlength} characters.`,
+        this,
+      );
+      return false;
+    }
+
+    if (this.maxlength != null && this.maxlength > 0 && str.length > this.maxlength) {
+      this.internals.setValidity(
+        { tooLong: true },
+        this.getAttribute('data-msg-maxlength') || `Please use no more than ${this.maxlength} characters.`,
+        this,
+      );
+      return false;
+    }
+
+    this.internals.setValidity({});
+    return true;
+  }
+
+  // ── Auto-validation listeners ──
+
+  #onInvalid = (e) => {
+    e.preventDefault();
+    this.setAttribute('aria-invalid', 'true');
+    this.error = this.validationMessage;
+  };
+
+  #onInput = () => {
+    this.#dirty = true;
+    if (this.error) this.validate();
+  };
+
+  #onBlur = () => {
+    if (this.#dirty) this.validate();
+  };
+
+  connected() {
+    super.connected();
+    this.syncValue();
+    this.addEventListener('invalid', this.#onInvalid);
+    this.addEventListener('input', this.#onInput);
+    this.addEventListener('blur', this.#onBlur, true);
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('invalid', this.#onInvalid);
+    this.removeEventListener('input', this.#onInput);
+    this.removeEventListener('blur', this.#onBlur, true);
+  }
+
+  // ── Form lifecycle callbacks ──
+
+  formResetCallback() {
+    this.#dirty = false;
+    this.setValid();
+    this.onFormReset();
+  }
+
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+    this.onFormDisabled(disabled);
+  }
+
+  formAssociatedCallback(form) {
+    this.onFormAssociated(form);
+  }
+
+  formStateRestoreCallback(state, reason) {
+    this.onFormStateRestore(state, reason);
+  }
+
+  // ── Override points ──
+
+  onFormReset() {}
+  onFormDisabled(_disabled) {}
+  onFormAssociated(_form) {}
+  onFormStateRestore(_state, _reason) {}
+}

package/core/icons.js

@@ -0,0 +1,180 @@
+/**
+ * Icon Registry — loads SVGs from @phosphor-icons/core.
+ * All icons are loaded on-demand; each weight variant is cached separately.
+ *
+ * Usage:
+ *   <icon-ui name="paper-plane-right"></icon-ui>
+ *   <icon-ui name="star" weight="fill"></icon-ui>
+ *   <icon-ui name="heart" weight="bold"></icon-ui>
+ */
+
+export const ICON_WEIGHTS = ['regular', 'thin', 'light', 'bold', 'fill', 'duotone'];
+const DEFAULT_WEIGHT = 'regular';
+
+/** Composite cache key so `star@regular` and `star@fill` can coexist. */
+const cacheKey = (name, weight) => `${weight}:${name}`;
+
+const registry = new Map();
+const pending = new Set();
+
+/** Register a single icon. */
+export function registerIcon(name, svg, weight = DEFAULT_WEIGHT) {
+  registry.set(cacheKey(name, weight), svg);
+}
+
+/** Register multiple icons at a given weight. */
+export function registerIcons(icons, weight = DEFAULT_WEIGHT) {
+  for (const [name, svg] of Object.entries(icons)) {
+    registry.set(cacheKey(name, weight), svg);
+  }
+}
+
+/** Get icon SVG by name + weight. Triggers async load if not cached. */
+export function getIcon(name, weight = DEFAULT_WEIGHT) {
+  if (!name) return '';
+  const key = cacheKey(name, weight);
+  if (registry.has(key)) return registry.get(key);
+
+  loadIcon(name, weight);
+  return '';
+}
+
+/** Check if an icon is registered (sync). */
+export function hasIcon(name, weight = DEFAULT_WEIGHT) {
+  return registry.has(cacheKey(name, weight));
+}
+
+/** Get all registered icon keys. */
+export function listIcons() {
+  return [...registry.keys()];
+}
+
+// ── Async loader ──
+
+// Vite resolves each glob at build time into a map of path → module.
+// One glob per weight so the bundler can tree-shake what isn't referenced.
+const weightModules = {
+  regular: import.meta.glob('/node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
+  thin:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
+  light:   import.meta.glob('/node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
+  bold:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
+  fill:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
+  duotone: import.meta.glob('/node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
+};
+
+/**
+ * Phosphor filename convention: `star.svg` for regular, `star-fill.svg` for
+ * fill, `star-bold.svg` for bold, etc. (each non-regular weight suffixes the
+ * weight to the filename).
+ */
+function filenameFor(name, weight) {
+  if (weight === 'regular') return `${name}.svg`;
+  return `${name}-${weight}.svg`;
+}
+
+function resolveLoader(name, weight = DEFAULT_WEIGHT) {
+  const modules = weightModules[weight];
+  if (!modules) return null;
+  const key = `/node_modules/@phosphor-icons/core/assets/${weight}/${filenameFor(name, weight)}`;
+  if (modules[key]) return modules[key];
+
+  // Back-compat: allow the caller to put the -fill suffix directly in the
+  // name (e.g. `name="circle-fill"`) without specifying weight.
+  if (weight === DEFAULT_WEIGHT && name.endsWith('-fill')) {
+    const fillKey = `/node_modules/@phosphor-icons/core/assets/fill/${name}.svg`;
+    if (weightModules.fill[fillKey]) return weightModules.fill[fillKey];
+  }
+  return null;
+}
+
+/**
+ * Sync check: is `name` a loadable icon at the given weight? True if the
+ * asset exists in the build-time glob OR has an alias that does. Does NOT
+ * trigger loading. Used by components that accept either an icon name or a
+ * text label (e.g. input-ui's prefix/suffix) to disambiguate.
+ */
+export function isIconName(name, weight = DEFAULT_WEIGHT) {
+  if (!name || typeof name !== 'string') return false;
+  if (resolveLoader(name, weight)) return true;
+  const alias = ICON_ALIASES[name];
+  if (alias && resolveLoader(alias, weight)) return true;
+  return false;
+}
+
+// Common aliases — brand names without -logo suffix
+const ICON_ALIASES = {
+  // Brand logos (LLMs often omit -logo suffix)
+  'google': 'google-logo', 'github': 'github-logo', 'microsoft': 'windows-logo',
+  'apple': 'apple-logo', 'twitter': 'twitter-logo', 'facebook': 'facebook-logo',
+  'discord': 'discord-logo', 'slack': 'slack-logo', 'linkedin': 'linkedin-logo',
+  'youtube': 'youtube-logo', 'instagram': 'instagram-logo', 'figma': 'figma-logo',
+  'dribbble': 'dribbble-logo', 'stripe': 'stripe-logo', 'paypal': 'paypal-logo',
+  // Common LLM-generated names that don't match Phosphor
+  'alert-circle': 'warning-circle', 'alert': 'warning', 'error': 'x-circle',
+  'success': 'check-circle', 'close': 'x', 'delete': 'trash',
+  'edit': 'pencil-simple', 'save': 'floppy-disk', 'search': 'magnifying-glass',
+  'settings': 'gear', 'home': 'house', 'mail': 'envelope', 'email': 'envelope',
+  'phone': 'phone', 'location': 'map-pin', 'calendar': 'calendar-blank',
+  'time': 'clock', 'user': 'user', 'users': 'users-three',
+  'menu': 'list', 'more': 'dots-three', 'dots-vertical': 'dots-three-vertical', 'filter': 'funnel',
+  'sort': 'sort-ascending', 'refresh': 'arrow-clockwise', 'download': 'download-simple',
+  'upload': 'upload-simple', 'share': 'share-network', 'copy': 'copy-simple',
+  'link': 'link-simple', 'external-link': 'arrow-square-out',
+  'chevron-down': 'caret-down', 'chevron-up': 'caret-up',
+  'chevron-left': 'caret-left', 'chevron-right': 'caret-right',
+  'arrow-left': 'arrow-left', 'arrow-right': 'arrow-right',
+  'plus': 'plus', 'minus': 'minus',
+  'send': 'paper-plane-right', 'submit': 'paper-plane-right',
+  'attachment': 'paperclip', 'attach': 'paperclip',
+  'expand': 'arrows-out', 'collapse': 'arrows-in',
+  'fullscreen': 'arrows-out', 'exit-fullscreen': 'arrows-in',
+  'notification': 'bell', 'notifications': 'bell',
+  'bookmark': 'bookmark-simple', 'favorite': 'heart', 'like': 'heart',
+  'comment': 'chat-circle', 'chat': 'chat-circle',
+  'image': 'image', 'photo': 'image', 'picture': 'image',
+  'video': 'video-camera', 'camera': 'camera',
+  'file': 'file', 'document': 'file-text', 'folder': 'folder',
+  'lock': 'lock-simple', 'unlock': 'lock-simple-open',
+  'eye-off': 'eye-slash', 'hide': 'eye-slash', 'show': 'eye',
+  'logout': 'sign-out', 'login': 'sign-in',
+  // Shape primitives — useful as visual markers (legend dots, status pips,
+  // bullet substitutes). Default to filled variants since unfilled circles
+  // tend to read as outlined buttons rather than markers.
+  'dot': 'circle-fill', 'circle': 'circle-fill', 'marker': 'circle-fill',
+};
+
+async function loadIcon(name, weight = DEFAULT_WEIGHT) {
+  const key = cacheKey(name, weight);
+  if (pending.has(key)) return;
+  pending.add(key);
+
+  try {
+    let loader = resolveLoader(name, weight);
+
+    // Try alias if direct name not found
+    if (!loader && ICON_ALIASES[name]) {
+      loader = resolveLoader(ICON_ALIASES[name], weight);
+    }
+
+    if (!loader) {
+      pending.delete(key);
+      return;
+    }
+
+    const svg = await loader();
+    registry.set(key, svg);
+
+    // Re-render any icon-ui elements showing this name+weight. Regular has
+    // no explicit weight attr, so match both forms.
+    const selector = weight === DEFAULT_WEIGHT
+      ? `icon-ui[name="${name}"]:not([weight]), icon-ui[name="${name}"][weight="regular"]`
+      : `icon-ui[name="${name}"][weight="${weight}"]`;
+    for (const el of document.querySelectorAll(selector)) {
+      el.innerHTML = svg;
+    }
+  } catch {
+    // Icon not found — stays blank
+  } finally {
+    pending.delete(key);
+  }
+}

package/core/markdown.js

@@ -0,0 +1,95 @@
+/**
+ * Minimal markdown → HTML for LLM output.
+ * Handles: code blocks, inline code, bold, italic, links, lists, headings, paragraphs.
+ * No dependencies. ~80 lines.
+ *
+ * Usage:
+ *   import { renderMarkdown } from '@core/markdown.js';
+ *   element.innerHTML = renderMarkdown(text);
+ */
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
+const esc = (s) => s.replace(/[&<>"]/g, (c) => ESC[c]);
+
+export function renderMarkdown(src) {
+  const lines = src.split('\n');
+  const out = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block
+    const fence = line.match(/^```(\w*)/);
+    if (fence) {
+      const lang = fence[1];
+      const code = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        code.push(esc(lines[i]));
+        i++;
+      }
+      i++; // skip closing ```
+      out.push(`<pre><code${lang ? ` data-lang="${lang}"` : ''}>${code.join('\n')}</code></pre>`);
+      continue;
+    }
+
+    // Empty line
+    if (!line.trim()) { i++; continue; }
+
+    // Heading
+    const h = line.match(/^(#{1,6})\s+(.+)/);
+    if (h) {
+      const level = h[1].length;
+      out.push(`<h${level}>${inline(h[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    // Unordered list
+    if (/^[-*]\s/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^[-*]\s/.test(lines[i])) {
+        items.push(`<li>${inline(lines[i].replace(/^[-*]\s/, ''))}</li>`);
+        i++;
+      }
+      out.push(`<ul>${items.join('')}</ul>`);
+      continue;
+    }
+
+    // Ordered list
+    if (/^\d+\.\s/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
+        items.push(`<li>${inline(lines[i].replace(/^\d+\.\s/, ''))}</li>`);
+        i++;
+      }
+      out.push(`<ol>${items.join('')}</ol>`);
+      continue;
+    }
+
+    // Paragraph (collect consecutive non-empty, non-special lines)
+    const para = [];
+    while (i < lines.length && lines[i].trim() && !/^```|^#{1,6}\s|^[-*]\s|^\d+\.\s/.test(lines[i])) {
+      para.push(lines[i]);
+      i++;
+    }
+    out.push(`<p>${inline(para.join(' '))}</p>`);
+  }
+
+  return out.join('\n');
+}
+
+function inline(text) {
+  return esc(text)
+    // Bold **text** or __text__
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    // Italic *text* or _text_
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    // Inline code `code`
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    // Links [text](url)
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+}

package/core/polyfills.js

@@ -0,0 +1,23 @@
+/**
+ * AdiaUI Polyfills — conditional loading for missing platform features.
+ * Import BEFORE component registration.
+ *
+ * Currently polyfills:
+ *   - Popover API (Firefox < 125)
+ *   - CSS Anchor Positioning (only Chrome 125+ native)
+ *
+ * Both are loaded conditionally — browsers with native support skip the download.
+ * Packages are optional — if not installed, the import silently fails.
+ */
+
+if (typeof window !== 'undefined') {
+  // Popover API
+  if (!('popover' in HTMLElement.prototype)) {
+    import('@oddbird/popover-polyfill').catch(() => {});
+  }
+
+  // CSS Anchor Positioning
+  if (!CSS?.supports?.('anchor-name: --x')) {
+    import('@oddbird/css-anchor-positioning').catch(() => {});
+  }
+}