Créer un template avec le SDK v0.1.3

# SDK 0.1.2 — générateur inclus :
npx @onirtech/create-onirtech-template aurora --stack react   # ou vue | vanilla

cd aurora
npm install
npm run dev      # développement local (hôte simulé)
npm test         # tests unitaires du template
npm run build    # React / Vue / TypeScript uniquement
npm run validate # manifeste + entrée + intégrité
npm run pack     # archive .onirtech-template

aurora/
├─ src/
│  ├─ index.js          entrée : enregistre le Custom Element
│  ├─ Aurora.jsx        votre interface (React)
│  ├─ styles.css        styles (inlinés dans le bundle)
│  └─ manifest.ts       manifeste typé (defineManifest)
├─ tests/
│  └─ aurora.test.js    tests unitaires du template
├─ vite.config.ts       build correct pour un template
├─ package.json
└─ onirtech.template.json   généré au build (React / Vue / TypeScript)

aurora/
├─ src/
│  ├─ index.js          entrée : defineTemplate(...)
│  ├─ ui.js             fonctions de rendu (h, param)
│  └─ styles.js         styles : export const CSS (chaîne, aucun build)
├─ tests/
│  └─ aurora.test.js
├─ onirtech.template.json   manifeste (JSON, pas de build)
└─ package.json

// src/manifest.ts
import { defineManifest } from "@onirtech/template-sdk";

export default defineManifest({
  id: "aurora",
  name: "Aurora",
  description: "Chat et formulaire clairs, orientés conversion.",
  version: "1.0.0",
  publisher: { id: "onirtech", name: "ONIRTECH", trustLevel: "official" },
  ui: {
    mode: "web-component",
    entry: "./dist/index.js",
    element: "onirtech-template-aurora",
    shadowDom: "open",
  },
  capabilities: ["messages", "theme"],
  params: [
    {
      key: "titre",
      label: "Titre",
      description: "Titre affiché en haut du chat",
      type: "string",
      default: "Discutons de votre projet",
      maxLength: 80,
    },
  ],
});

{
  "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",
    "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
    }
  ]
}

// src/Aurora.jsx
import { useState } from "react";
import { useTemplate } from "@onirtech/template-sdk/react";

export function Aurora() {
  const { phase, messages, params, actions } = useTemplate();
  const [draft, setDraft] = useState("");

  if (phase === "identity") {
    return (
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          actions.submitIdentity({
            nom: String(data.get("nom") ?? ""),
            email: String(data.get("email") ?? ""),
            consentement: data.get("consentement") === "on",
          });
        }}
      >
        <h2>{params.titre}</h2>
        <input name="nom" placeholder="Votre nom" aria-label="Nom" required />
        <input name="email" type="email" placeholder="vous@exemple.mg" aria-label="Email" required />
        <label>
          <input name="consentement" type="checkbox" /> J'accepte le traitement de mes données
        </label>
        <button type="submit">Démarrer la discussion</button>
      </form>
    );
  }

  return (
    <section>
      <h2>{params.titre}</h2>
      <ul>
        {messages.map((message) => (
          <li key={message.id} className={message.role}>{message.content}</li>
        ))}
      </ul>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          if (draft.trim() === "") return;
          actions.sendMessage(draft.trim());
          setDraft("");
        }}
      >
        <input
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
          placeholder="Votre message…"
          aria-label="Message"
        />
        <button type="submit">Envoyer</button>
      </form>
    </section>
  );
}

// src/index.js
import css from "./styles.css?inline";
import { defineReactTemplate } from "@onirtech/template-sdk/react";
import { Aurora } from "./Aurora";

defineReactTemplate("onirtech-template-aurora", Aurora, { css });

<!-- src/Aurora.vue -->
<script setup>
import { ref } from "vue";
import { useTemplate } from "@onirtech/template-sdk/vue";

const { phase, messages, params, actions } = useTemplate();
const draft = ref("");

function submitIdentity(event) {
  const data = new FormData(event.currentTarget);
  actions.submitIdentity({
    nom: String(data.get("nom") ?? ""),
    email: String(data.get("email") ?? ""),
    consentement: data.get("consentement") === "on",
  });
}

function sendMessage() {
  if (draft.value.trim() === "") return;
  actions.sendMessage(draft.value.trim());
  draft.value = "";
}
</script>

<template>
  <h2>{{ params.titre }}</h2>

  <form v-if="phase === 'identity'" @submit.prevent="submitIdentity">
    <input name="nom" placeholder="Votre nom" aria-label="Nom" required />
    <input name="email" type="email" placeholder="vous@exemple.mg" aria-label="Email" required />
    <label>
      <input name="consentement" type="checkbox" /> J'accepte le traitement de mes données
    </label>
    <button type="submit">Démarrer la discussion</button>
  </form>

  <section v-else>
    <ul>
      <li v-for="message in messages" :key="message.id" :class="message.role">
        {{ message.content }}
      </li>
    </ul>
    <form @submit.prevent="sendMessage">
      <input v-model="draft" placeholder="Votre message…" aria-label="Message" />
      <button type="submit">Envoyer</button>
    </form>
  </section>
</template>

// src/index.js
import css from "./styles.css?inline";
import { defineVueTemplate } from "@onirtech/template-sdk/vue";
import Aurora from "./Aurora.vue";

defineVueTemplate("onirtech-template-aurora", Aurora, { css });

// src/index.js — aucun build
import { defineTemplate, h, param, hasCapability } from "@onirtech/template-sdk";

function identity(ctx) {
  const nom = h("input", { name: "nom", placeholder: "Votre nom", "aria-label": "Nom" });
  const email = h("input", { name: "email", type: "email", placeholder: "vous@exemple.mg", "aria-label": "Email" });
  const consentement = h("input", { name: "consentement", type: "checkbox" });

  return h("form", {
    onsubmit: (event) => {
      event.preventDefault();
      ctx.actions.submitIdentity({
        nom: nom.value.trim(),
        email: email.value.trim(),
        consentement: consentement.checked,
      });
    },
  },
    h("h2", { text: param(ctx, "titre", "Discutons de votre projet") }),
    nom,
    email,
    h("label", {}, consentement, " J'accepte le traitement de mes données"),
    h("button", { type: "submit", text: "Démarrer la discussion" }),
  );
}

function chat(ctx) {
  const champ = h("input", { placeholder: "Votre message…", "aria-label": "Message" });
  const envoyer = () => {
    if (champ.value.trim() === "") return;
    ctx.actions.sendMessage(champ.value.trim());
    champ.value = "";
  };

  return h("section", {},
    h("h2", { text: param(ctx, "titre", "Discutons de votre projet") }),
    hasCapability(ctx, "media")
      ? h("p", { text: "Photos et liens disponibles" })
      : null,
    h("ul", {}, ...ctx.state.messages.map((message) =>
      h("li", { class: message.role, text: message.content }))),
    ctx.state.typing ? h("p", { text: "…" }) : null,
    h("div", {}, champ, h("button", { type: "button", text: "Envoyer", onclick: envoyer })),
  );
}

defineTemplate(
  "onirtech-template-aurora",
  (ctx) => (ctx.state.phase === "identity" ? identity(ctx) : chat(ctx)),
  { css: `
      :host { display: block; font-family: system-ui, sans-serif; }
      ul { list-style: none; padding: 0; }
      li.user { background: #e2e8f0; }
    ` },
);

// tests/aurora.test.js
import { expect, it } from "vitest";
import { createMockContext, mountTemplate } from "@onirtech/template-sdk/testing";
import "../src/index.js";

it("affiche le titre du paramètre", () => {
  const ctx = createMockContext({ params: { titre: "Album souvenirs" } });
  const { el } = mountTemplate("onirtech-template-aurora", ctx);

  expect(el.shadowRoot.textContent).toContain("Album souvenirs");
});

it("passe du formulaire au chat", () => {
  const ctx = createMockContext();
  const { el, update } = mountTemplate("onirtech-template-aurora", ctx);

  update(createMockContext({
    state: { phase: "chat", messages: [{ role: "assistant", content: "Bonjour" }] },
  }));

  expect(el.shadowRoot.textContent).toContain("Bonjour");
});

// vite.config.ts
import { defineTemplateConfig } from "@onirtech/template-sdk/vite";

export default defineTemplateConfig({
  entry: "src/index.ts",
  element: "onirtech-template-aurora",
  manifest: "src/manifest.ts",
});