@webmcp-auto-ui/sdk 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/sdk",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Skills CRUD, HyperSkill format, Svelte 5 stores",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/hyperskill/format.ts

@@ -14,6 +14,7 @@ export interface HyperSkillMeta {
   mcpName?: string;
   llm?: string;
   tags?: string[];
+  theme?: Record<string, string>;
   hash?: string;
   previousHash?: string;
 }

package/src/skills/registry.ts

@@ -8,6 +8,10 @@ export interface SkillBlock {
   data: Record<string, unknown>;
 }
 
+export interface ThemeOverrides {
+  [key: string]: string;
+}
+
 export interface Skill {
   id: string;
   name: string;
@@ -16,6 +20,7 @@ export interface Skill {
   mcpName?: string;
   llm?: string;
   tags?: string[];
+  theme?: ThemeOverrides;
   blocks: SkillBlock[];
   createdAt: number;
   updatedAt: number;

package/src/stores/canvas.svelte.ts

@@ -6,10 +6,11 @@
 export type BlockType =
   | 'stat' | 'kv' | 'list' | 'chart' | 'alert' | 'code' | 'text' | 'actions' | 'tags'
   | 'stat-card' | 'data-table' | 'timeline' | 'profile' | 'trombinoscope' | 'json-viewer'
-  | 'hemicycle' | 'chart-rich' | 'cards' | 'grid-data' | 'sankey' | 'map' | 'log';
+  | 'hemicycle' | 'chart-rich' | 'cards' | 'grid-data' | 'sankey' | 'map' | 'log'
+  | 'gallery' | 'carousel' | 'd3';
 
 export type Mode = 'auto' | 'drag' | 'chat';
-export type LLMId = 'haiku' | 'sonnet' | 'gemma-e2b';
+export type LLMId = 'haiku' | 'sonnet' | 'gemma-e2b' | 'gemma-e4b';
 
 export interface Block {
   id: string;
@@ -41,7 +42,7 @@ function msgId() {
 function createCanvas() {
   // ── State ────────────────────────────────────────────────────────────────
   let blocks = $state<Block[]>([]);
-  let mode = $state<Mode>('auto');
+  let mode = $state<Mode>('drag');
   let llm = $state<LLMId>('haiku');
   let mcpUrl = $state('');
   let mcpConnected = $state(false);
@@ -134,13 +135,20 @@ function createCanvas() {
   function setMcpError(err: string) {
     mcpConnected = false;
     mcpConnecting = false;
-    statusText = `● erreur: ${err.slice(0, 40)}`;
+    statusText = `● erreur: ${err}`;
     statusColor = 'text-red-400';
   }
 
+  // ── Theme ────────────────────────────────────────────────────────────────
+  let themeOverrides = $state<Record<string, string>>({});
+
+  function setThemeOverrides(overrides: Record<string, string>) {
+    themeOverrides = overrides;
+  }
+
   // ── HyperSkill ───────────────────────────────────────────────────────────
   function buildSkillJSON() {
-    return {
+    const skill: Record<string, unknown> = {
       version: '1.0',
       name: 'skill-' + Date.now(),
       created: new Date().toISOString(),
@@ -148,22 +156,32 @@ function createCanvas() {
       llm,
       blocks: blocks.map((b) => ({ type: b.type, data: b.data })),
     };
+    if (Object.keys(themeOverrides).length > 0) skill.theme = themeOverrides;
+    return skill;
   }
 
   function buildHyperskillParam(): string {
     const json = JSON.stringify(buildSkillJSON());
-    return btoa(unescape(encodeURIComponent(json)));
+    // Use base64url encoding (URL-safe: no +, /, or = padding issues)
+    return btoa(unescape(encodeURIComponent(json)))
+      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
   }
 
   function loadFromParam(param: string): boolean {
     try {
-      const json = decodeURIComponent(escape(atob(param)));
+      // Normalize: base64url → base64 standard, and repair spaces→+ (URLSearchParams damage)
+      let b64 = param.replace(/ /g, '+').replace(/-/g, '+').replace(/_/g, '/');
+      while (b64.length % 4) b64 += '=';
+
+      const json = decodeURIComponent(escape(atob(b64)));
       const skill = JSON.parse(json) as {
         mcp?: string; llm?: LLMId;
+        theme?: Record<string, string>;
         blocks?: { type: BlockType; data: Record<string, unknown> }[];
       };
       if (skill.mcp) mcpUrl = skill.mcp;
       if (skill.llm) llm = skill.llm;
+      if (skill.theme) themeOverrides = skill.theme;
       if (skill.blocks) {
         blocks = skill.blocks.map((b) => ({ id: uuid(), type: b.type, data: b.data }));
       }
@@ -206,6 +224,10 @@ function createCanvas() {
     // MCP
     setMcpConnecting, setMcpConnected, setMcpError,
 
+    // Theme
+    get themeOverrides() { return themeOverrides; },
+    setThemeOverrides,
+
     // HyperSkill
     buildSkillJSON, buildHyperskillParam, loadFromParam,
   };