@carmaclouds/core 2.3.1

package/src/render/h.ts

@@ -0,0 +1,74 @@
+/**
+ * Tiny DOM builder - the rebuild's render primitive. Replaces innerHTML template
+ * strings with safe DOM construction: text and attribute values go through
+ * textContent / setAttribute, so interpolated character data (now arbitrary,
+ * user-named attributes from any system) can never be parsed as HTML.
+ *
+ *   h('div', { class: 'box', onClick: () => roll() },
+ *     h('span', { class: 'label', text: name }),  // text -> textContent (safe)
+ *     score)                                       // primitives -> text node
+ */
+
+export type HChild = Node | string | number | null | undefined | boolean | HChild[];
+
+export interface HProps {
+  /** textContent - use for any dynamic / character data. */
+  text?: string | number;
+  /** className. */
+  class?: string;
+  /** Inline style as a string (cssText) or a property map. */
+  style?: string | Partial<Record<string, string>>;
+  /** data-* attributes. */
+  dataset?: Record<string, string>;
+  /** onClick / onInput / onChange / ... -> addEventListener. */
+  [key: string]: unknown;
+}
+
+function append(el: Node, child: HChild): void {
+  if (child == null || child === false || child === true) return;
+  if (Array.isArray(child)) {
+    for (const c of child) append(el, c);
+  } else if (child instanceof Node) {
+    el.appendChild(child);
+  } else {
+    el.appendChild(document.createTextNode(String(child)));
+  }
+}
+
+export function h(tag: string, props?: HProps | null, ...children: HChild[]): HTMLElement {
+  const el = document.createElement(tag);
+
+  if (props) {
+    for (const [key, value] of Object.entries(props)) {
+      if (value == null || value === false) continue;
+
+      if (key === 'text') {
+        el.textContent = String(value);
+      } else if (key === 'class') {
+        el.className = value as string;
+      } else if (key === 'style') {
+        if (typeof value === 'string') el.style.cssText = value;
+        else Object.assign(el.style, value);
+      } else if (key === 'dataset') {
+        Object.assign(el.dataset, value as Record<string, string>);
+      } else if (
+        key.length > 2 && key[0] === 'o' && key[1] === 'n' &&
+        key[2] === key[2].toUpperCase() && typeof value === 'function'
+      ) {
+        el.addEventListener(key.slice(2).toLowerCase(), value as EventListener);
+      } else {
+        el.setAttribute(key, String(value));
+      }
+    }
+  }
+
+  append(el, children);
+  return el;
+}
+
+/** Replace all children of `el` with the given nodes/values. */
+export function setChildren(el: Element, ...children: HChild[]): Element {
+  el.replaceChildren();
+  append(el, children);
+  return el;
+}

package/src/render/index.ts

@@ -0,0 +1,10 @@
+/**
+ * System-agnostic render layer for the rebuild. DOM construction only (no
+ * innerHTML); adapters mount the returned elements. See REBUILD.md.
+ */
+export { h, setChildren } from './h';
+export type { HChild, HProps } from './h';
+export { renderCharacterSheet } from './character';
+export type { RenderOpts } from './character';
+export { fetchCharacterIR, mountCharacterIR, mountIRToggle } from './mount';
+export type { IRTarget } from './mount';

package/src/render/mount.ts

@@ -0,0 +1,94 @@
+/**
+ * Fetch a character's IR from clouds_character_ir and render it into a container.
+ * Shared by every adapter surface (Owlbear popover, RollCloud popup-sheet, ...)
+ * so each one is a couple of lines and the fetch/render/empty-state logic lives
+ * in one place.
+ */
+import type { IRCharacter } from '../ir/types';
+import { renderCharacterSheet, type RenderOpts } from './character';
+import { h } from './h';
+
+export interface IRTarget {
+  url: string;
+  anonKey: string;
+}
+
+/** GET the stored IR for a character, or null if there isn't one yet. */
+export async function fetchCharacterIR(
+  charId: string,
+  target: IRTarget,
+): Promise<IRCharacter | null> {
+  const res = await fetch(
+    `${target.url}/rest/v1/clouds_character_ir?dicecloud_character_id=eq.${encodeURIComponent(charId)}&select=ir`,
+    { headers: { apikey: target.anonKey, Authorization: `Bearer ${target.anonKey}` } },
+  );
+  if (!res.ok) return null;
+  const rows = await res.json().catch(() => []);
+  return rows?.[0]?.ir ?? null;
+}
+
+/**
+ * Fetch + render into `container`. Returns the IR (or null). On no-IR / error it
+ * renders a small message rather than throwing, so callers can fire-and-forget.
+ */
+export async function mountCharacterIR(
+  container: Element,
+  charId: string,
+  target: IRTarget,
+  opts: RenderOpts = {},
+): Promise<IRCharacter | null> {
+  try {
+    const ir = await fetchCharacterIR(charId, target);
+    if (!ir) {
+      container.replaceChildren(h('div', {
+        class: 'cc-empty', style: 'padding: 10px; font-size: 12px; opacity: 0.7;',
+        text: 'No IR stored yet - re-sync this character from DiceCloud.',
+      }));
+      return null;
+    }
+    container.replaceChildren(renderCharacterSheet(ir, opts));
+    return ir;
+  } catch (e) {
+    container.replaceChildren(h('div', {
+      class: 'cc-empty', style: 'padding: 10px; font-size: 12px; opacity: 0.7;',
+      text: 'Failed to load IR view.',
+    }));
+    return null;
+  }
+}
+
+/**
+ * Append a "⚗️ IR view (beta)" toggle + collapsible panel to `host`. The IR is
+ * lazily fetched and rendered the first time the panel opens, using `getCharId()`
+ * (read live, so it picks up whichever character is currently active).
+ *
+ * This is the whole per-adapter integration: one call.
+ */
+export function mountIRToggle(
+  host: Element,
+  getCharId: () => string | null | undefined,
+  target: IRTarget,
+  opts: RenderOpts = {},
+  label = '⚗️ IR view (beta)',
+): { panel: HTMLElement; reload: () => void } {
+  const btn = h('button', { class: 'cc-ir-toggle', text: label });
+  const panel = h('div', { class: 'cc-ir-panel', style: 'display:none; margin-top:8px;' });
+  let loaded = false;
+
+  btn.addEventListener('click', async () => {
+    const open = panel.style.display === 'none';
+    panel.style.display = open ? 'block' : 'none';
+    if (open && !loaded) {
+      const id = getCharId();
+      if (!id) {
+        panel.replaceChildren(h('div', { class: 'cc-empty', text: 'No character loaded yet.' }));
+        return;
+      }
+      loaded = true;
+      await mountCharacterIR(panel, id, target, opts);
+    }
+  });
+
+  host.append(btn, panel);
+  return { panel, reload: () => { loaded = false; } };
+}