@carmaclouds/core 2.3.1

package/src/modules/warlock-invocations.js

@@ -0,0 +1,219 @@
+/**
+ * Warlock Invocations Module
+ *
+ * Handles detection and application of Warlock invocations that modify spells and abilities.
+ * Provides a centralized system for checking active invocations and applying their effects.
+ *
+ * Loaded as a plain script (no ES6 modules) to export to globalThis.
+ *
+ * Functions exported to globalThis:
+ * - getActiveInvocations(characterData)
+ * - applyInvocationToSpell(spell, invocations, characterData)
+ * - applyInvocationToDamage(spellName, damageFormula, invocations, characterData)
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Warlock invocations that modify spell behavior
+   * Each entry defines the invocation name pattern and the effect it has
+   */
+  const INVOCATION_DEFINITIONS = {
+    // Agonizing Blast: Add CHA modifier to Eldritch Blast damage
+    AGONIZING_BLAST: {
+      namePattern: /agonizing blast/i,
+      affectsSpells: ['eldritch blast'],
+      modifyDamage: (damage, characterData) => {
+        const charismaMod = characterData.abilityMods?.charismaMod || 0;
+        if (charismaMod === 0) return damage;
+
+        const modifier = charismaMod >= 0 ? `+${charismaMod}` : `${charismaMod}`;
+        return `${damage}${modifier}`;
+      },
+      description: 'Adds Charisma modifier to each Eldritch Blast beam'
+    },
+
+    // Repelling Blast: Push creatures 10 feet with Eldritch Blast
+    REPELLING_BLAST: {
+      namePattern: /repelling blast/i,
+      affectsSpells: ['eldritch blast'],
+      modifyDescription: (description) => {
+        return description + '\n\n**Repelling Blast:** On a hit, push the target up to 10 feet away from you in a straight line.';
+      },
+      description: 'Push Eldritch Blast targets 10 feet away'
+    },
+
+    // Grasp of Hadar: Pull creatures 10 feet with Eldritch Blast
+    GRASP_OF_HADAR: {
+      namePattern: /grasp of hadar/i,
+      affectsSpells: ['eldritch blast'],
+      modifyDescription: (description) => {
+        return description + '\n\n**Grasp of Hadar:** Once per turn when you hit with Eldritch Blast, pull the target up to 10 feet closer to you in a straight line.';
+      },
+      description: 'Pull Eldritch Blast target 10 feet closer (once per turn)'
+    },
+
+    // Lance of Lethargy: Reduce speed with Eldritch Blast
+    LANCE_OF_LETHARGY: {
+      namePattern: /lance of lethargy/i,
+      affectsSpells: ['eldritch blast'],
+      modifyDescription: (description) => {
+        return description + '\n\n**Lance of Lethargy:** Once per turn when you hit with Eldritch Blast, reduce the target\'s speed by 10 feet until the end of your next turn.';
+      },
+      description: 'Reduce Eldritch Blast target speed by 10 feet (once per turn)'
+    },
+
+    // Eldritch Spear: Increase Eldritch Blast range to 300 feet
+    ELDRITCH_SPEAR: {
+      namePattern: /eldritch spear/i,
+      affectsSpells: ['eldritch blast'],
+      modifyRange: () => '300 feet',
+      description: 'Increases Eldritch Blast range to 300 feet'
+    }
+  };
+
+  /**
+   * Get all active invocations for a character
+   * @param {Object} characterData - The character data object
+   * @returns {Array} Array of active invocation objects with their definitions
+   */
+  function getActiveInvocations(characterData) {
+    if (!characterData || !characterData.features) {
+      return [];
+    }
+
+    const activeInvocations = [];
+
+    // Search through character features for invocations
+    characterData.features.forEach(feature => {
+      if (!feature.name) return;
+
+      // Check if this feature matches any known invocation
+      for (const [key, invocation] of Object.entries(INVOCATION_DEFINITIONS)) {
+        if (invocation.namePattern.test(feature.name)) {
+          activeInvocations.push({
+            name: feature.name,
+            key: key,
+            definition: invocation
+          });
+          debug.log(`🔮 Detected warlock invocation: ${feature.name}`);
+        }
+      }
+    });
+
+    return activeInvocations;
+  }
+
+  /**
+   * Check if a specific invocation is active
+   * @param {String} invocationKey - The invocation key (e.g., 'AGONIZING_BLAST')
+   * @param {Array} activeInvocations - Array of active invocations from getActiveInvocations()
+   * @returns {Boolean} True if the invocation is active
+   */
+  function hasInvocation(invocationKey, activeInvocations) {
+    return activeInvocations.some(inv => inv.key === invocationKey);
+  }
+
+  /**
+   * Apply invocation modifications to a spell
+   * This modifies spell properties based on active invocations
+   * @param {Object} spell - The spell object to modify
+   * @param {Array} invocations - Array of active invocations
+   * @param {Object} characterData - The character data object
+   * @returns {Object} Modified spell object (creates a shallow copy)
+   */
+  function applyInvocationToSpell(spell, invocations, characterData) {
+    if (!spell || !invocations || invocations.length === 0) {
+      return spell;
+    }
+
+    const spellNameLower = (spell.name || '').toLowerCase();
+    let modifiedSpell = { ...spell };
+    let hasModifications = false;
+
+    // Check each active invocation
+    invocations.forEach(invocation => {
+      const def = invocation.definition;
+
+      // Check if this invocation affects this spell
+      if (!def.affectsSpells || !def.affectsSpells.some(s => spellNameLower.includes(s))) {
+        return;
+      }
+
+      // Apply description modifications
+      if (def.modifyDescription && modifiedSpell.description) {
+        modifiedSpell.description = def.modifyDescription(modifiedSpell.description);
+        hasModifications = true;
+        debug.log(`🔮 Applied ${invocation.name} description to ${spell.name}`);
+      }
+
+      // Apply range modifications
+      if (def.modifyRange) {
+        modifiedSpell.range = def.modifyRange();
+        hasModifications = true;
+        debug.log(`🔮 Applied ${invocation.name} range to ${spell.name}`);
+      }
+    });
+
+    return hasModifications ? modifiedSpell : spell;
+  }
+
+  /**
+   * Apply invocation modifications to a damage formula
+   * This is specifically for damage rolls that need modification
+   * @param {String} spellName - Name of the spell being cast
+   * @param {String} damageFormula - The base damage formula
+   * @param {Array} invocations - Array of active invocations
+   * @param {Object} characterData - The character data object
+   * @returns {Object} { formula: modified formula, display: display formula }
+   */
+  function applyInvocationToDamage(spellName, damageFormula, invocations, characterData) {
+    if (!damageFormula || !invocations || invocations.length === 0) {
+      return { formula: damageFormula, display: damageFormula };
+    }
+
+    const spellNameLower = (spellName || '').toLowerCase();
+    let modifiedFormula = damageFormula;
+    let modifiedDisplay = damageFormula;
+    let hasModifications = false;
+
+    // Check each active invocation
+    invocations.forEach(invocation => {
+      const def = invocation.definition;
+
+      // Check if this invocation affects this spell
+      if (!def.affectsSpells || !def.affectsSpells.some(s => spellNameLower.includes(s))) {
+        return;
+      }
+
+      // Apply damage modifications
+      if (def.modifyDamage) {
+        const modified = def.modifyDamage(modifiedFormula, characterData);
+        if (modified !== modifiedFormula) {
+          modifiedFormula = modified;
+          modifiedDisplay = modified;
+          hasModifications = true;
+          debug.log(`🔮 Applied ${invocation.name} damage to ${spellName}: ${damageFormula} → ${modified}`);
+        }
+      }
+    });
+
+    return {
+      formula: modifiedFormula,
+      display: modifiedDisplay,
+      modified: hasModifications
+    };
+  }
+
+  // ===== EXPORTS =====
+
+  // Export functions to globalThis
+  globalThis.getActiveInvocations = getActiveInvocations;
+  globalThis.hasInvocation = hasInvocation;
+  globalThis.applyInvocationToSpell = applyInvocationToSpell;
+  globalThis.applyInvocationToDamage = applyInvocationToDamage;
+
+  debug.log('✅ Warlock Invocations module loaded');
+
+})();

package/src/modules/window-management.js

@@ -0,0 +1,211 @@
+/**
+ * Window Management Module
+ *
+ * Handles popup window features:
+ * - Window size persistence (save/restore dimensions)
+ * - Status bar integration (toggle and data sync)
+ * - Window state management
+ *
+ * This module manages the popup window's appearance and communication
+ * with the Roll20 status bar overlay system.
+ *
+ * Loaded as a plain script (no ES6 modules) to export to globalThis.
+ *
+ * Functions exported to globalThis:
+ * - saveWindowSize()
+ * - loadWindowSize()
+ * - initWindowSizeTracking()
+ * - initStatusBarButton()
+ * - sendStatusUpdate(targetWindow)
+ *
+ * State exported to globalThis:
+ * - statusBarWindow (via getter/setter)
+ */
+
+(function() {
+  'use strict';
+
+  // ===== WINDOW SIZE PERSISTENCE =====
+
+  /**
+   * Save current window dimensions to storage
+   */
+  function saveWindowSize() {
+    // Check if browserAPI is available
+    if (typeof browserAPI === 'undefined' || !browserAPI) {
+      debug.log('⚠️ browserAPI not available, skipping window size save');
+      return;
+    }
+
+    const width = window.outerWidth;
+    const height = window.outerHeight;
+
+    browserAPI.storage.local.set({
+      popupWindowSize: { width, height }
+    });
+
+    debug.log(`💾 Saved window size: ${width}x${height}`);
+  }
+
+  /**
+   * Load and apply saved window dimensions
+   */
+  async function loadWindowSize() {
+    // Check if browserAPI is available
+    if (typeof browserAPI === 'undefined' || !browserAPI) {
+      debug.log('⚠️ browserAPI not available, skipping window size restore');
+      return;
+    }
+
+    try {
+      const result = await browserAPI.storage.local.get(['popupWindowSize']);
+      if (result.popupWindowSize) {
+        const { width, height } = result.popupWindowSize;
+        window.resizeTo(width, height);
+        debug.log(`📐 Restored window size: ${width}x${height}`);
+      }
+    } catch (error) {
+      debug.warn('⚠️ Could not restore window size:', error);
+    }
+  }
+
+  /**
+   * Initialize window size tracking
+   * Loads saved size on startup and tracks changes
+   */
+  function initWindowSizeTracking() {
+    // Load saved size on startup
+    loadWindowSize();
+
+    // Save size when window is resized
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        saveWindowSize();
+      }, 500); // Debounce to avoid excessive saves
+    });
+
+    debug.log('📐 Window size tracking initialized');
+  }
+
+  // ===== STATUS BAR INTEGRATION =====
+
+  // Reference to status bar window (if using window-based status bar)
+  let statusBarWindow = null;
+
+  /**
+   * Initialize status bar button
+   * Sets up click handler to toggle Roll20 GM panel overlay (status bar)
+   */
+  function initStatusBarButton() {
+    const statusBarBtn = document.getElementById('status-bar-btn');
+    if (statusBarBtn) {
+      statusBarBtn.addEventListener('click', async () => {
+        // Send message to Roll20 tabs to toggle the status bar overlay
+        try {
+          const tabs = await browserAPI.tabs.query({ url: '*://app.roll20.net/*' });
+
+          if (tabs.length === 0) {
+            showNotification('⚠️ No Roll20 tabs found. Open Roll20 to use the status bar.', 'warning');
+            return;
+          }
+
+          // Send toggle message to all Roll20 tabs
+          for (const tab of tabs) {
+            try {
+              await browserAPI.tabs.sendMessage(tab.id, {
+                action: 'toggleStatusBar',
+                enabled: undefined  // Toggle current state
+              });
+
+              showNotification('📊 Status bar toggled', 'success');
+              debug.log('📊 Status bar overlay toggled');
+            } catch (error) {
+              debug.warn('⚠️ Could not toggle status bar on tab:', error.message);
+            }
+          }
+        } catch (error) {
+          debug.error('❌ Failed to toggle status bar:', error);
+          showNotification('❌ Failed to toggle status bar', 'error');
+        }
+      });
+      debug.log('✅ Status bar button initialized');
+    }
+  }
+
+  /**
+   * Send status update to status bar window
+   * @param {Window} targetWindow - Optional target window (defaults to statusBarWindow)
+   */
+  function sendStatusUpdate(targetWindow = null) {
+    // Use provided target window or the stored statusBarWindow
+    const target = targetWindow || statusBarWindow;
+
+    if (!target || target.closed) {
+      debug.log('📊 No valid status bar window to send to');
+      return;
+    }
+
+    if (!characterData) {
+      debug.log('📊 No character data available to send');
+      return;
+    }
+
+    const statusData = {
+      action: 'updateStatusData',
+      data: {
+        name: characterData.name || characterData.character_name,
+        hitPoints: characterData.hitPoints || characterData.hit_points,
+        temporaryHP: characterData.temporaryHP || 0,
+        concentrating: !!concentratingSpell,
+        concentrationSpell: concentratingSpell || '',
+        activeBuffs: activeBuffs || [],
+        activeDebuffs: activeConditions || [],
+        spellSlots: characterData.spellSlots || {}
+      }
+    };
+
+    target.postMessage(statusData, '*');
+    debug.log('📊 Sent status update to status bar', statusData.data);
+  }
+
+  // ===== EXPORTS =====
+
+  // Export statusBarWindow state variable
+  Object.defineProperty(globalThis, 'statusBarWindow', {
+    get: () => statusBarWindow,
+    set: (value) => { statusBarWindow = value; },
+    configurable: true
+  });
+
+  // Export functions to globalThis
+  globalThis.saveWindowSize = saveWindowSize;
+  globalThis.loadWindowSize = loadWindowSize;
+  globalThis.initWindowSizeTracking = initWindowSizeTracking;
+  globalThis.initStatusBarButton = initStatusBarButton;
+  globalThis.sendStatusUpdate = sendStatusUpdate;
+
+  debug.log('✅ Window Management module loaded');
+
+  // ===== AUTO-INITIALIZATION =====
+
+  // Initialize window size tracking when module loads
+  // Check if we're in the main popup window context
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    // Initialize immediately if DOM is ready, otherwise wait
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        initWindowSizeTracking();
+      });
+    } else {
+      // DOM already ready, but use pendingOperations if available
+      if (typeof pendingOperations !== 'undefined' && !domReady) {
+        pendingOperations.push(initWindowSizeTracking);
+      } else {
+        initWindowSizeTracking();
+      }
+    }
+  }
+
+})();

package/src/render/character.ts

@@ -0,0 +1,234 @@
+/**
+ * System-agnostic character renderer. Builds a sheet DOM from an IRCharacter
+ * using the `h()` builder (never innerHTML). Adapters mount the returned element
+ * and supply roll/use callbacks.
+ *
+ * D&D characters get the familiar ability grid (derived view); every character -
+ * D&D or not - also gets generic Resources / Attributes / Actions sections, which
+ * is where custom stats and charge-with-reset abilities finally show up.
+ */
+import type { IRAction, IRAttribute, IRCharacter } from '../ir/types';
+import { deriveDnd, DND_ABILITIES } from '../ir/views/dnd5e';
+import { h } from './h';
+
+export interface RenderOpts {
+  /** Called when a rollable element (ability/save/skill) is clicked. */
+  onRoll?: (label: string, modifier: number) => void;
+  /** Called when an action/spell "use" is clicked. */
+  onUse?: (action: IRAction) => void;
+}
+
+const RESET_LABEL: Record<string, string> = { shortRest: 'SR', longRest: 'LR' };
+const signed = (n: number) => `${n >= 0 ? '+' : ''}${n}`;
+
+function sectionHeader(title: string): HTMLElement {
+  return h('div', { class: 'section-header', text: title });
+}
+
+/** Small badge showing a reset period (SR / LR / raw). */
+function resetBadge(reset: string | null | undefined): HTMLElement | null {
+  if (!reset) return null;
+  return h('span', { class: 'cc-reset-badge', text: RESET_LABEL[reset] ?? reset });
+}
+
+/** current / max pill, e.g. "2 / 2". */
+function poolPill(current: number, max: number): HTMLElement {
+  return h('span', { class: 'cc-pool' },
+    h('span', { class: 'cc-pool-current', text: String(current) }),
+    ' / ',
+    h('span', { class: 'cc-pool-max', text: String(max) }));
+}
+
+/** Top combat-stats strip (HP / AC / Speed / Init / Prof) - whichever exist. */
+function combatStats(ir: IRCharacter): HTMLElement | null {
+  const { byVar } = ir;
+  // DiceCloud sheets name these variably; try common aliases.
+  const pick = (...names: string[]) => names.map((n) => byVar[n]).find(Boolean);
+  const items: [string, string][] = [];
+
+  const hp = pick('hitPoints', 'hp');
+  if (hp) items.push(['HP', `${hp.total - hp.damage}/${hp.total}`]);
+  const ac = pick('armorClass', 'armor', 'ac');
+  if (ac && ac.value) items.push(['AC', String(ac.value)]);
+  const speed = pick('speed', 'walkingSpeed');
+  if (speed && speed.value) items.push(['Speed', String(speed.value)]);
+  const init = pick('initiative', 'initiativeBonus', 'initiativeMod');
+  if (init) items.push(['Init', signed(init.value)]);
+  const prof = pick('proficiencyBonus', 'proficiency');
+  if (prof && prof.value) items.push(['Prof', signed(prof.value)]);
+
+  if (items.length === 0) return null;
+  return h('div', { class: 'cc-combat' },
+    ...items.map(([label, val]) =>
+      h('div', { class: 'cc-stat' },
+        h('div', { class: 'cc-stat-label', text: label }),
+        h('div', { class: 'cc-stat-value', text: val }))));
+}
+
+/** Trained skills (skillType 'skill'), clickable to roll. */
+function skillsSection(ir: IRCharacter, opts: RenderOpts): HTMLElement | null {
+  const skills = ir.skills.filter((s) => s.skillType === 'skill' && s.active && s.variableName);
+  if (skills.length === 0) return null;
+
+  const list = h('div', { class: 'cc-skill-list' });
+  for (const s of skills) {
+    list.appendChild(
+      h('div', {
+          class: 'cc-skill' + (s.proficiency > 0 ? ' cc-proficient' : ''),
+          title: `Roll ${s.name}`,
+          onClick: () => opts.onRoll?.(s.name, s.value),
+        },
+        h('span', { class: 'cc-skill-name', text: s.name }),
+        h('span', { class: 'cc-skill-bonus', text: signed(s.value) })),
+    );
+  }
+  return h('div', {}, sectionHeader('Skills'), list);
+}
+
+/** D&D ability grid (only when the derived view has abilities). */
+function abilityGrid(ir: IRCharacter, opts: RenderOpts): HTMLElement | null {
+  const dnd = deriveDnd(ir);
+  if (Object.keys(dnd.abilities).length === 0) return null;
+
+  const grid = h('div', { class: 'ability-grid' });
+  for (const ab of DND_ABILITIES) {
+    const a = dnd.abilities[ab];
+    if (!a) continue;
+    const label = ab.slice(0, 3).toUpperCase();
+    const save = dnd.saves[ab];
+
+    const rollCell = (kind: string, value: number) =>
+      h('div', {
+          class: 'cc-ability-roll',
+          title: `Roll ${label} ${kind === 'CHK' ? 'check' : 'save'}`,
+          onClick: () => opts.onRoll?.(`${label} ${kind === 'CHK' ? 'check' : 'save'}`, value),
+        },
+        h('div', { class: 'cc-roll-label', text: kind }),
+        h('div', { class: 'cc-roll-val', text: signed(value) }));
+
+    grid.appendChild(
+      h('div', { class: 'ability-box' },
+        h('div', { class: 'ability-name', text: label }),
+        h('div', { class: 'ability-score', text: String(a.score) }),
+        h('div', { class: 'cc-ability-rolls' },
+          rollCell('CHK', a.modifier),
+          save !== undefined ? rollCell('SAV', save) : null)),
+    );
+  }
+  return h('div', {}, sectionHeader('Abilities'), grid);
+}
+
+/** Resources: anything with a max + (usually) a reset - charges, slots, hit dice. */
+function resourcesSection(ir: IRCharacter): HTMLElement | null {
+  const isResourceLike = (a: IRAttribute) =>
+    (a.type === 'resource' || a.type === 'spellSlot' || a.type === 'hitDice') && a.total > 0;
+  const resources = ir.attributes.filter(isResourceLike);
+  if (resources.length === 0) return null;
+
+  const list = h('div', { class: 'cc-resource-list' });
+  for (const r of resources) {
+    const current = r.total - r.damage;
+    const sizeNote = r.hitDiceSize ? ` ${r.hitDiceSize}` : '';
+    list.appendChild(
+      h('div', { class: 'cc-resource' + (r.active ? '' : ' cc-inactive') },
+        h('span', { class: 'cc-resource-name', text: r.name + sizeNote }),
+        poolPill(current, r.total),
+        resetBadge(r.reset)),
+    );
+  }
+  return h('div', {}, sectionHeader('Resources'), list);
+}
+
+/**
+ * Generic attributes: custom stats with no D&D analog (sanity, glory, ...). We
+ * skip the ones already shown elsewhere (abilities, resources, HP, modifiers).
+ */
+function attributesSection(ir: IRCharacter): HTMLElement | null {
+  // Hide structural types (shown elsewhere) and 'utility' (internal computed
+  // values like Class DC / proficiency ranks). What's left is deliberate custom
+  // stats - sanity, glory, corruption, etc.
+  const hidden = new Set([
+    'ability', 'modifier', 'healthBar', 'resource', 'spellSlot', 'hitDice', 'utility',
+  ]);
+  // Also drop zero-valued entries - on sparse sheets these are unset internals
+  // (Speed 0, Size 0, Level 0) rather than meaningful custom stats.
+  const custom = ir.attributes.filter((a) => !hidden.has(a.type) && a.variableName && a.value !== 0);
+  if (custom.length === 0) return null;
+
+  const list = h('div', { class: 'cc-attr-list' });
+  for (const a of custom) {
+    list.appendChild(
+      h('div', { class: 'cc-attr' + (a.active ? '' : ' cc-inactive') },
+        h('span', { class: 'cc-attr-name', text: a.name }),
+        h('span', { class: 'cc-attr-value', text: String(a.value) })),
+    );
+  }
+  return h('div', {}, sectionHeader('Attributes'), list);
+}
+
+/** Actions & spells, showing real uses (current/max + reset). */
+function actionsSection(ir: IRCharacter, opts: RenderOpts): HTMLElement | null {
+  if (ir.actions.length === 0) return null;
+
+  const list = h('div', { class: 'cc-action-list' });
+  for (const action of ir.actions) {
+    const meta: HTMLElement[] = [];
+    if (action.kind === 'spell' && action.spell) {
+      meta.push(h('span', { class: 'cc-action-tag', text: `L${action.spell.level}` }));
+    }
+    if (action.attack) {
+      meta.push(h('span', { class: 'cc-action-attack', title: 'Attack bonus', text: signed(action.attack.bonus) }));
+    }
+    for (const d of action.damage) {
+      meta.push(h('span', { class: 'cc-action-damage', text: d.type ? `${d.formula} ${d.type}` : d.formula }));
+    }
+    const usesEl = action.uses
+      ? h('span', { class: 'cc-action-uses' }, poolPill(action.uses.current, action.uses.max), resetBadge(action.uses.reset))
+      : null;
+
+    list.appendChild(
+      h('div', {
+          class: `cc-action cc-action-${action.kind}` + (action.active ? '' : ' cc-inactive'),
+          onClick: opts.onUse ? () => opts.onUse!(action) : undefined,
+        },
+        h('span', { class: 'cc-action-name', text: action.name }),
+        ...meta,
+        usesEl),
+    );
+  }
+  return h('div', {}, sectionHeader('Actions & Spells'), list);
+}
+
+/** Inventory list with quantity + equipped marker. */
+function inventorySection(ir: IRCharacter): HTMLElement | null {
+  if (ir.inventory.length === 0) return null;
+  const list = h('div', { class: 'cc-item-list' });
+  for (const item of ir.inventory) {
+    list.appendChild(
+      h('div', { class: 'cc-item' + (item.equipped ? ' cc-equipped' : '') },
+        item.equipped ? h('span', { class: 'cc-equipped-dot', title: 'Equipped' }) : null,
+        h('span', { class: 'cc-item-name', text: item.name }),
+        item.quantity !== 1 ? h('span', { class: 'cc-item-qty', text: `x${item.quantity}` }) : null),
+    );
+  }
+  return h('div', {}, sectionHeader('Inventory'), list);
+}
+
+/** Build the full character sheet element from an IR. */
+export function renderCharacterSheet(ir: IRCharacter, opts: RenderOpts = {}): HTMLElement {
+  const header = h('div', { class: 'cc-header' },
+    ir.portrait ? h('img', { class: 'cc-portrait', src: ir.portrait, alt: ir.name }) : null,
+    h('div', { class: 'cc-title' },
+      h('div', { class: 'cc-name', text: ir.name || 'Unnamed' }),
+      h('span', { class: 'cc-system', text: ir.systemHint })));
+
+  return h('div', { class: 'cc-sheet', dataset: { system: ir.systemHint } },
+    header,
+    combatStats(ir),
+    abilityGrid(ir, opts),
+    skillsSection(ir, opts),
+    resourcesSection(ir),
+    actionsSection(ir, opts),
+    attributesSection(ir),
+    inventorySection(ir));
+}