Créer un template visuel

# 1. créer un template à partir de la référence
node bin/create-onirtech-template.mjs mon-template
cd mon-template

# 2. développer en local (hôte simulé, données MOCK, hors-ligne)
node ../harness/host.mjs --dir .        # → http://localhost:4500

# 3. valider le manifeste, l'entrée et l'intégrité SRI
node ../bin/onirtech-template.mjs validate .

# 4. empaqueter
node ../bin/onirtech-template.mjs pack .
# → release/mon-template-1.0.0.onirtech-template

{
  "schemaVersion": 1,
  "kind": "template",
  "id": "aurora",
  "name": "Aurora",
  "description": "Chat et formulaire clairs, orientés conversion.",
  "version": "1.0.0",
  "publisher": { "id": "onirtech", "name": "ONIRTECH", "trustLevel": "official" },
  "compatibility": { "hostProtocol": "onirtech.template-host.v1" },
  "ui": {
    "mode": "web-component",
    "entry": "./index.js",
    "element": "onirtech-template-aurora",
    "integrity": "sha256-…",
    "shadowDom": "open"
  },
  "capabilities": ["messages", "theme"],
  "network": [],
  "params": [
    {
      "key": "titre",
      "label": "Titre",
      "description": "Titre affiché en haut du chat",
      "type": "string",
      "default": "Discutons de votre projet",
      "maxLength": 80
    },
    {
      "key": "couleur",
      "label": "Couleur principale",
      "description": "Couleur des titres et des boutons",
      "type": "color",
      "default": "#023777"
    }
  ]
}

type ContexteTemplate = {
  host: { protocol: "onirtech.template-host.v1"; version: 1 };
  link: { type: "standard" | "specifique"; label: string; userStateEnabled: boolean };
  locale: string;
  brand: { name: string; logoUrl: string | null };
  theme: Readonly<Record<string, string>>;
  params: Readonly<Record<string, string | number | boolean>>;
  capabilities: readonly string[];
  consent: { texte: string; lien: string } | null;
  state: {
    phase: "identity" | "chat";
    status: "en_cours" | "finalisee";
    messages: { id: string; role: "user" | "assistant"; content: string;
                medias: { type: "photo" | "lien"; libelle: string; url: string }[];
                at: string; userState?: { label: string; confidence: number };
                knowledge?: { ref: string; titre: string }[] }[];
    typing: boolean;
  };
  resources: {
    media: { photos: { id: string; libelle: string; url: string }[];
             liens: { id: string; libelle: string; url: string }[] };
    modelForm: { name: string; label: string; type: string; required: boolean;
                 options?: string[] }[] | null;
  };
};

set onirtechContext(ctx) { this.#ctx = ctx; this.#render(); }

// Déclaration (manifeste)
"params": [
  { "key": "titre_de_livre", "label": "Titre du livre",
    "description": "Titre affiché sur la couverture de l'album",
    "type": "string", "default": "album", "maxLength": 60 }
]

// Lecture (template) — le défaut du manifeste sert de repli
const titre = ctx.params?.titre_de_livre ?? "album";

{
  "schemaVersion": 1,
  "kind": "template",
  "id": "aurora",
  "name": "Aurora",
  "description": "Exemple complet : formulaire puis chat, deux paramètres.",
  "version": "1.0.0",
  "publisher": { "id": "onirtech", "name": "ONIRTECH", "trustLevel": "official" },
  "compatibility": { "hostProtocol": "onirtech.template-host.v1" },
  "ui": {
    "mode": "web-component",
    "entry": "./index.js",
    "element": "onirtech-template-aurora",
    "integrity": "sha256-…",
    "shadowDom": "open"
  },
  "capabilities": ["messages", "theme"],
  "network": [],
  "params": [
    { "key": "titre", "label": "Titre", "description": "Titre du chat",
      "type": "string", "default": "Discutons de votre projet", "maxLength": 80 },
    { "key": "couleur", "label": "Couleur principale", "description": "Titres et boutons",
      "type": "color", "default": "#023777" }
  ]
}

const ELEMENT = "onirtech-template-aurora";

function h(tag, props = {}, ...children) {
  const node = document.createElement(tag);
  for (const [key, value] of Object.entries(props)) {
    if (key === "text") node.textContent = value;
    else if (key.startsWith("on")) node.addEventListener(key.slice(2).toLowerCase(), value);
    else if (value !== null && value !== undefined) node.setAttribute(key, String(value));
  }
  for (const child of children.flat()) {
    if (child === null || child === undefined || child === false) continue;
    node.append(child instanceof Node ? child : document.createTextNode(String(child)));
  }
  return node;
}

class Aurora extends HTMLElement {
  #root = this.attachShadow({ mode: "open" });
  #ctx = null;

  set onirtechContext(ctx) { this.#ctx = ctx; this.#render(); }
  get onirtechContext() { return this.#ctx; }
  connectedCallback() { this.#render(); }

  #render() {
    const ctx = this.#ctx;
    if (!ctx) return;
    const titre = ctx.params?.titre ?? "Discutons de votre projet";
    const couleur = ctx.params?.couleur ?? "#023777";
    this.#root.replaceChildren(
      this.#style(couleur),
      h("h2", { text: titre }),
      ctx.state.phase === "identity" ? this.#identite(ctx) : this.#chat(ctx),
    );
  }

  #style(couleur) {
    const style = document.createElement("style");
    style.textContent = `
      :host { display:block; font-family:system-ui,sans-serif; color:#0b2247; }
      .wrap { max-width:32rem; margin:0 auto; padding:1.25rem; }
      form, .composer { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
      input { flex:1 1 12rem; padding:.6rem .7rem; border:1px solid #cfd4de;
              border-radius:.5rem; font:inherit; }
      button { background:${couleur}; color:#fff; border:0; border-radius:.5rem;
               padding:.6rem 1rem; font:inherit; cursor:pointer; }
      ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
      li { background:#f1f5f9; border-radius:.5rem; padding:.55rem .75rem; }
      li.user { background:#e2e8f0; }
    `;
    return style;
  }

  #identite(ctx) {
    const nom = h("input", { type: "text", placeholder: "Votre nom", "aria-label": "Nom" });
    const email = h("input", { type: "email", placeholder: "vous@exemple.mg", "aria-label": "Email" });
    const consentement = h("input", { type: "checkbox" });
    const form = h("form", {
      onsubmit: (event) => {
        event.preventDefault();
        if (nom.value.trim() === "" || email.value.trim() === "") return;
        ctx.actions.submitIdentity({
          nom: nom.value.trim(),
          email: email.value.trim(),
          consentement: consentement.checked,
        });
      },
    },
      nom,
      email,
      ctx.consent
        ? h("label", { class: "consent" }, consentement, " ", ctx.consent.texte)
        : null,
      h("button", { type: "submit", text: "Démarrer la discussion" }),
    );
    return h("section", { class: "wrap" }, form);
  }

  #chat(ctx) {
    const liste = h("ul", {},
      ...ctx.state.messages.map((message) =>
        h("li", { class: message.role }, message.content)));
    const champ = h("input", { type: "text", placeholder: "Votre message…", "aria-label": "Message" });
    const envoyer = () => {
      if (champ.value.trim() === "") return;
      ctx.actions.sendMessage(champ.value.trim());
      champ.value = "";
    };
    return h("section", { class: "wrap" },
      liste,
      ctx.state.typing ? h("p", { text: "…" }) : null,
      h("div", { class: "composer" },
        champ,
        h("button", { type: "button", text: "Envoyer", onclick: envoyer })),
    );
  }
}

if (!customElements.get(ELEMENT)) customElements.define(ELEMENT, Aurora);