@meissa_a/meissa 0.1.0

package/dist/apps.js

@@ -0,0 +1,645 @@
+// src/apps/postmessage.ts
+var MESSAGE_TYPES = {
+  ACTION: "meissa:action",
+  NAVIGATE: "meissa:navigate",
+  READY: "meissa:ready",
+  RESIZE: "meissa:resize",
+  DATA: "meissa:data",
+  PATCH: "meissa:patch",
+  UPDATE: "meissa:update",
+  ACTION_RESPONSE: "meissa:action-response"
+};
+function getPostMessageHandlerCode() {
+  return `
+    // PostMessage protocol handler
+    window.addEventListener('message', (event) => {
+      const msg = event.data;
+      if (!msg || !msg.type) return;
+
+      switch (msg.type) {
+        case '${MESSAGE_TYPES.DATA}':
+          data = msg.data || {};
+          render();
+          break;
+        case '${MESSAGE_TYPES.PATCH}':
+          applyPatches(data, msg.patches || []);
+          render();
+          break;
+        case '${MESSAGE_TYPES.UPDATE}':
+          data = msg.data || {};
+          render();
+          break;
+        case '${MESSAGE_TYPES.ACTION_RESPONSE}':
+          // Action responses can be handled by the app if needed
+          if (window.__meissaActionCallbacks) {
+            const cb = window.__meissaActionCallbacks.shift();
+            if (cb) cb(msg.result);
+          }
+          break;
+      }
+    });
+
+    // Signal ready to host
+    window.parent.postMessage({ type: '${MESSAGE_TYPES.READY}' }, '*');
+
+    // Notify host of content height changes
+    let lastHeight = 0;
+    const resizeObserver = new ResizeObserver(() => {
+      const height = document.documentElement.scrollHeight;
+      if (height !== lastHeight) {
+        lastHeight = height;
+        window.parent.postMessage({ type: '${MESSAGE_TYPES.RESIZE}', height }, '*');
+      }
+    });
+    resizeObserver.observe(document.body);
+
+    // Action handler — sends action to parent
+    function handleAction(action, args) {
+      window.parent.postMessage({
+        type: '${MESSAGE_TYPES.ACTION}',
+        action: action,
+        args: args || {}
+      }, '*');
+    }
+
+    // Navigate handler — sends navigate to parent
+    function handleNavigate(uri) {
+      window.parent.postMessage({
+        type: '${MESSAGE_TYPES.NAVIGATE}',
+        uri: uri
+      }, '*');
+    }
+  `;
+}
+
+// src/apps/template.ts
+var DEFAULT_THEME = {
+  bg: "#ffffff",
+  fg: "#1a1a2e",
+  primary: "#6366f1",
+  secondary: "#8b5cf6",
+  muted: "#6b7280",
+  border: "#e5e7eb",
+  error: "#ef4444",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  radius: "0.5rem",
+  font: "system-ui, -apple-system, sans-serif"
+};
+function generateThemeCSS(theme = {}) {
+  const merged = { ...DEFAULT_THEME, ...theme };
+  return `
+    :root {
+      --meissa-bg: ${merged.bg};
+      --meissa-fg: ${merged.fg};
+      --meissa-primary: ${merged.primary};
+      --meissa-secondary: ${merged.secondary};
+      --meissa-muted: ${merged.muted};
+      --meissa-border: ${merged.border};
+      --meissa-error: ${merged.error};
+      --meissa-success: ${merged.success};
+      --meissa-warning: ${merged.warning};
+      --meissa-radius: ${merged.radius};
+      --meissa-font: ${merged.font};
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--meissa-font);
+      background: var(--meissa-bg);
+      color: var(--meissa-fg);
+      line-height: 1.6;
+      padding: 1rem;
+    }
+    .meissa-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem 1rem;
+      border-radius: var(--meissa-radius);
+      border: 1px solid var(--meissa-border);
+      background: var(--meissa-primary);
+      color: #fff;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: opacity 0.15s;
+    }
+    .meissa-btn:hover { opacity: 0.85; }
+    .meissa-btn-secondary {
+      background: transparent;
+      color: var(--meissa-primary);
+      border-color: var(--meissa-primary);
+    }
+    .meissa-card {
+      border: 1px solid var(--meissa-border);
+      border-radius: var(--meissa-radius);
+      padding: 1rem;
+      margin-bottom: 0.75rem;
+    }
+    .meissa-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+    }
+    .meissa-table th,
+    .meissa-table td {
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--meissa-border);
+      text-align: left;
+    }
+    .meissa-table th {
+      font-weight: 600;
+      color: var(--meissa-muted);
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .meissa-input {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--meissa-border);
+      border-radius: var(--meissa-radius);
+      font-size: 0.875rem;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .meissa-input:focus {
+      border-color: var(--meissa-primary);
+    }
+    .meissa-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.125rem 0.5rem;
+      border-radius: 9999px;
+      font-size: 0.75rem;
+      font-weight: 500;
+      background: var(--meissa-primary);
+      color: #fff;
+    }
+    .meissa-divider {
+      border: none;
+      border-top: 1px solid var(--meissa-border);
+      margin: 1rem 0;
+    }
+    .meissa-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 120px;
+      border: 2px dashed var(--meissa-border);
+      border-radius: var(--meissa-radius);
+      color: var(--meissa-muted);
+      font-size: 0.875rem;
+    }
+  `;
+}
+function getInlineRendererCode() {
+  return `
+    // Minimal Meissa DOM renderer
+    const root = document.getElementById('meissa-root');
+
+    function resolveBinding(text, ctx) {
+      if (typeof text !== 'string') return text;
+      return text.replace(/\\{\\{\\s*([^}]+)\\s*\\}\\}/g, (_, path) => {
+        const keys = path.trim().split('.');
+        let val = ctx;
+        for (const k of keys) {
+          if (val == null) return '';
+          val = val[k];
+        }
+        return val != null ? String(val) : '';
+      });
+    }
+
+    function resolveValue(val, ctx) {
+      if (typeof val === 'string') return resolveBinding(val, ctx);
+      return val;
+    }
+
+    function createElement(tag, attrs, ...children) {
+      const el = document.createElement(tag);
+      if (attrs) {
+        for (const [key, value] of Object.entries(attrs)) {
+          if (key === 'className') el.className = value;
+          else if (key === 'style' && typeof value === 'object') {
+            Object.assign(el.style, value);
+          } else if (key.startsWith('on') && typeof value === 'function') {
+            el.addEventListener(key.slice(2).toLowerCase(), value);
+          } else {
+            el.setAttribute(key, value);
+          }
+        }
+      }
+      for (const child of children) {
+        if (child == null) continue;
+        if (typeof child === 'string' || typeof child === 'number') {
+          el.appendChild(document.createTextNode(String(child)));
+        } else if (child instanceof Node) {
+          el.appendChild(child);
+        }
+      }
+      return el;
+    }
+
+    function renderElement(item, ctx) {
+      if (!Array.isArray(item) || item.length === 0) return null;
+
+      const [type, ...args] = item;
+      const props = (args.length > 0 && typeof args[0] === 'object' && !Array.isArray(args[0]))
+        ? args[0]
+        : null;
+      const children = props
+        ? args.slice(1)
+        : args;
+
+      switch (type) {
+        case 'heading':
+        case 'h1': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          const level = props?.level || (type === 'h1' ? 1 : 2);
+          const tag = 'h' + Math.min(Math.max(level, 1), 6);
+          return createElement(tag, {
+            className: 'font-bold mb-3 ' + (level <= 1 ? 'text-2xl' : level === 2 ? 'text-xl' : 'text-lg')
+          }, text);
+        }
+
+        case 'text':
+        case 'p': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          return createElement('p', { className: 'mb-2' }, text);
+        }
+
+        case 'span': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          return createElement('span', null, text);
+        }
+
+        case 'bold':
+        case 'strong': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          return createElement('strong', null, text);
+        }
+
+        case 'italic':
+        case 'em': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          return createElement('em', null, text);
+        }
+
+        case 'code': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          return createElement('code', {
+            className: 'px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono'
+          }, text);
+        }
+
+        case 'pre': {
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : '';
+          const pre = createElement('pre', {
+            className: 'p-3 bg-gray-100 rounded overflow-x-auto text-sm font-mono mb-3'
+          });
+          pre.appendChild(createElement('code', null, text));
+          return pre;
+        }
+
+        case 'link':
+        case 'a': {
+          const href = props?.href || (typeof args[1] === 'string' ? args[1] : '#');
+          const text = typeof args[0] === 'string' ? resolveValue(args[0], ctx) : props?.label || 'Link';
+          const el = createElement('a', {
+            className: 'text-indigo-600 underline hover:text-indigo-800',
+            href: resolveValue(href, ctx),
+          }, resolveValue(text, ctx));
+          if (props?.navigate) {
+            el.addEventListener('click', (e) => {
+              e.preventDefault();
+              handleNavigate(props.navigate);
+            });
+          }
+          return el;
+        }
+
+        case 'btn':
+        case 'button': {
+          const label = props?.label || (typeof args[0] === 'string' ? args[0] : 'Button');
+          const action = props?.action || '';
+          const actionArgs = props?.args || {};
+          const variant = props?.variant || 'primary';
+          const cls = variant === 'secondary' ? 'meissa-btn meissa-btn-secondary' : 'meissa-btn';
+          const el = createElement('button', { className: cls }, resolveValue(label, ctx));
+          el.addEventListener('click', () => {
+            handleAction(action, actionArgs);
+          });
+          return el;
+        }
+
+        case 'input': {
+          const placeholder = props?.placeholder || '';
+          const name = props?.name || '';
+          const inputType = props?.inputType || 'text';
+          return createElement('input', {
+            className: 'meissa-input',
+            type: inputType,
+            name: name,
+            placeholder: resolveValue(placeholder, ctx),
+          });
+        }
+
+        case 'img':
+        case 'image': {
+          const src = props?.src || (typeof args[0] === 'string' ? args[0] : '');
+          const alt = props?.alt || '';
+          return createElement('img', {
+            src: resolveValue(src, ctx),
+            alt: resolveValue(alt, ctx),
+            className: 'max-w-full rounded',
+          });
+        }
+
+        case 'badge': {
+          const text = props?.label || (typeof args[0] === 'string' ? args[0] : '');
+          const color = props?.color;
+          const style = color ? { background: color } : {};
+          return createElement('span', { className: 'meissa-badge', style }, resolveValue(text, ctx));
+        }
+
+        case 'divider':
+        case 'hr': {
+          return createElement('hr', { className: 'meissa-divider' });
+        }
+
+        case 'spacer': {
+          const size = props?.size || '1rem';
+          return createElement('div', { style: { height: size } });
+        }
+
+        case 'row': {
+          const gap = props?.gap || '0.75rem';
+          const align = props?.align || 'center';
+          const justify = props?.justify || 'flex-start';
+          const container = createElement('div', {
+            style: { display: 'flex', flexDirection: 'row', gap, alignItems: align, justifyContent: justify, flexWrap: 'wrap' }
+          });
+          const childItems = Array.isArray(args[0]) && Array.isArray(args[0][0]) ? args[0] : children.filter(Array.isArray);
+          for (const child of childItems) {
+            const childEl = renderElement(child, ctx);
+            if (childEl) container.appendChild(childEl);
+          }
+          return container;
+        }
+
+        case 'col':
+        case 'column': {
+          const gap = props?.gap || '0.75rem';
+          const container = createElement('div', {
+            style: { display: 'flex', flexDirection: 'column', gap }
+          });
+          const childItems = Array.isArray(args[0]) && Array.isArray(args[0][0]) ? args[0] : children.filter(Array.isArray);
+          for (const child of childItems) {
+            const childEl = renderElement(child, ctx);
+            if (childEl) container.appendChild(childEl);
+          }
+          return container;
+        }
+
+        case 'grid': {
+          const cols = props?.cols || 2;
+          const gap = props?.gap || '0.75rem';
+          const container = createElement('div', {
+            style: { display: 'grid', gridTemplateColumns: 'repeat(' + cols + ', 1fr)', gap }
+          });
+          const childItems = Array.isArray(args[0]) && Array.isArray(args[0][0]) ? args[0] : children.filter(Array.isArray);
+          for (const child of childItems) {
+            const childEl = renderElement(child, ctx);
+            if (childEl) container.appendChild(childEl);
+          }
+          return container;
+        }
+
+        case 'card': {
+          const title = props?.title;
+          const container = createElement('div', { className: 'meissa-card' });
+          if (title) {
+            container.appendChild(createElement('h3', {
+              className: 'font-semibold mb-2'
+            }, resolveValue(title, ctx)));
+          }
+          const childItems = Array.isArray(args[0]) && Array.isArray(args[0][0]) ? args[0] : children.filter(Array.isArray);
+          for (const child of childItems) {
+            const childEl = renderElement(child, ctx);
+            if (childEl) container.appendChild(childEl);
+          }
+          return container;
+        }
+
+        case 'table': {
+          const columns = props?.columns || [];
+          const rows = props?.rows || props?.data || [];
+          const dataKey = props?.dataKey;
+          const resolvedRows = dataKey ? getNestedValue(ctx, dataKey) || [] : rows;
+
+          const table = createElement('table', { className: 'meissa-table mb-3' });
+
+          // Header
+          if (columns.length > 0) {
+            const thead = createElement('thead');
+            const headerRow = createElement('tr');
+            for (const col of columns) {
+              const label = typeof col === 'string' ? col : col.label || col.key || '';
+              headerRow.appendChild(createElement('th', null, resolveValue(label, ctx)));
+            }
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+          }
+
+          // Body
+          const tbody = createElement('tbody');
+          const dataRows = Array.isArray(resolvedRows) ? resolvedRows : [];
+          for (const row of dataRows) {
+            const tr = createElement('tr');
+            if (columns.length > 0) {
+              for (const col of columns) {
+                const key = typeof col === 'string' ? col : col.key || '';
+                const cellVal = row[key] != null ? String(row[key]) : '';
+                tr.appendChild(createElement('td', null, cellVal));
+              }
+            } else if (Array.isArray(row)) {
+              for (const cell of row) {
+                tr.appendChild(createElement('td', null, cell != null ? String(cell) : ''));
+              }
+            }
+            tbody.appendChild(tr);
+          }
+          table.appendChild(tbody);
+          return table;
+        }
+
+        case 'list': {
+          const items = props?.items || [];
+          const ordered = props?.ordered || false;
+          const dataKey = props?.dataKey;
+          const resolvedItems = dataKey ? getNestedValue(ctx, dataKey) || [] : items;
+          const tag = ordered ? 'ol' : 'ul';
+          const list = createElement(tag, {
+            className: 'list-disc list-inside mb-3 space-y-1'
+          });
+          for (const item of resolvedItems) {
+            const text = typeof item === 'string' ? resolveValue(item, ctx) : String(item);
+            list.appendChild(createElement('li', null, text));
+          }
+          return list;
+        }
+
+        case 'chart':
+        case 'graph': {
+          const chartType = props?.type || 'chart';
+          return createElement('div', { className: 'meissa-placeholder' },
+            '[' + chartType + ' chart placeholder — requires full renderer]'
+          );
+        }
+
+        case 'progress': {
+          const value = props?.value || 0;
+          const max = props?.max || 100;
+          const pct = Math.min(100, Math.max(0, (value / max) * 100));
+          const outer = createElement('div', {
+            className: 'w-full bg-gray-200 rounded-full h-2.5 mb-3'
+          });
+          outer.appendChild(createElement('div', {
+            style: { width: pct + '%', height: '100%', borderRadius: '9999px', background: 'var(--meissa-primary)' }
+          }));
+          return outer;
+        }
+
+        case 'fragment':
+        case 'group': {
+          const frag = document.createDocumentFragment();
+          const childItems = Array.isArray(args[0]) && Array.isArray(args[0][0]) ? args[0] : children.filter(Array.isArray);
+          for (const child of childItems) {
+            const childEl = renderElement(child, ctx);
+            if (childEl) frag.appendChild(childEl);
+          }
+          return frag;
+        }
+
+        default: {
+          // Unknown component — render as a div with type as class
+          const container = createElement('div', {
+            className: 'mb-2',
+            'data-meissa-type': type
+          });
+          if (typeof args[0] === 'string') {
+            container.textContent = resolveValue(args[0], ctx);
+          }
+          const childItems = children.filter(Array.isArray);
+          for (const child of childItems) {
+            const childEl = renderElement(child, ctx);
+            if (childEl) container.appendChild(childEl);
+          }
+          return container;
+        }
+      }
+    }
+
+    function getNestedValue(obj, path) {
+      if (!path) return obj;
+      const keys = path.split('.');
+      let val = obj;
+      for (const k of keys) {
+        if (val == null) return undefined;
+        val = val[k];
+      }
+      return val;
+    }
+
+    function applyPatches(obj, patches) {
+      for (const patch of patches) {
+        const pathParts = patch.path.split('/').filter(Boolean);
+        if (pathParts.length === 0) continue;
+
+        const parent = pathParts.slice(0, -1).reduce((acc, key) => {
+          if (acc == null) return undefined;
+          return acc[key];
+        }, obj);
+
+        const lastKey = pathParts[pathParts.length - 1];
+        if (parent == null) continue;
+
+        switch (patch.op) {
+          case 'add':
+          case 'replace':
+            parent[lastKey] = patch.value;
+            break;
+          case 'remove':
+            if (Array.isArray(parent)) {
+              parent.splice(Number(lastKey), 1);
+            } else {
+              delete parent[lastKey];
+            }
+            break;
+        }
+      }
+    }
+
+    function render() {
+      root.innerHTML = '';
+      for (const item of schema) {
+        const el = renderElement(item, data);
+        if (el) root.appendChild(el);
+      }
+    }
+
+    // Initial render
+    render();
+  `;
+}
+function generateHtml(schema, options = {}) {
+  const { title = "Meissa App", theme } = options;
+  const themeCSS = generateThemeCSS(theme);
+  const postMessageHandler = getPostMessageHandlerCode();
+  const inlineRenderer = getInlineRendererCode();
+  const schemaJson = JSON.stringify(schema);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline' https://cdn.tailwindcss.com; script-src 'unsafe-inline'; img-src https:">
+  <title>${escapeHtml(title)}</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>${themeCSS}</style>
+</head>
+<body>
+  <div id="meissa-root"></div>
+  <script type="module">
+    const schema = ${schemaJson};
+    let data = {};
+    window.__meissaActionCallbacks = [];
+
+    ${postMessageHandler}
+    ${inlineRenderer}
+  </script>
+</body>
+</html>`;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+// src/apps/app-generator.ts
+function createMeissaApp(schema, options) {
+  const html = generateHtml(schema, {
+    title: options?.title,
+    theme: options?.theme,
+    width: options?.width,
+    height: options?.height
+  });
+  return {
+    content: html,
+    mimeType: "text/html"
+  };
+}
+export {
+  createMeissaApp,
+  MESSAGE_TYPES
+};

package/dist/client/component.d.ts

@@ -0,0 +1,17 @@
+import type { MeissaContentProps, PatchOperation } from "./types";
+/**
+ * MeissaContent — Declarative React component for rendering Meissa UI.
+ *
+ * Wraps `<MeissaRenderer>` from @meissa_a/meissa/renderer and adds:
+ * 1. Patch state management (holds current data, applies patches)
+ * 2. Action forwarding (translates renderer action callbacks to async MCP tools/call format)
+ */
+export declare function MeissaContent({ schema, data: externalData, theme, onAction, onNavigate, className, }: MeissaContentProps): import("react").JSX.Element;
+/**
+ * Expose applyPatch via ref for imperative access from parent components.
+ * Use `MeissaContentWithRef` with a ref to call `ref.current.applyPatch(patches)`.
+ */
+export type MeissaContentHandle = {
+    applyPatch: (patches: PatchOperation[]) => void;
+};
+export declare const MeissaContentWithRef: import("react").ForwardRefExoticComponent<MeissaContentProps & import("react").RefAttributes<MeissaContentHandle>>;

package/dist/client/content.d.ts

@@ -0,0 +1,12 @@
+import type { McpContentBlock, HandleContentResult } from "./types";
+/**
+ * Identifies the content type from MCP content blocks and returns
+ * the appropriate render instruction.
+ *
+ * Scans through an array of content blocks looking for Meissa-specific types.
+ * Falls back to plain text if no Meissa content is found.
+ *
+ * @param contentBlocks - Array of MCP content block objects
+ * @returns A discriminated union describing how to handle the content
+ */
+export declare function handleMcpContent(contentBlocks: McpContentBlock[]): HandleContentResult;

package/dist/client/index.d.ts

@@ -0,0 +1,7 @@
+export { MeissaClientRenderer } from "./renderer";
+export { MeissaContent, MeissaContentWithRef } from "./component";
+export type { MeissaContentHandle } from "./component";
+export { applyPatches } from "./patch";
+export { handleMcpContent } from "./content";
+export type { PatchOp, PatchOperation, MeissaContentBlock, MeissaPatchBlock, TextContentBlock, McpContentBlock, HandleContentResult, MeissaClientRendererOptions, MeissaContentProps, } from "./types";
+export type { MeissaInput, MeissaTheme, MeissaDocument, MeissaNode, ActionHandler, NavigateHandler, } from "../renderer";

package/dist/client/patch.d.ts

@@ -0,0 +1,6 @@
+import type { PatchOperation } from "./types";
+/**
+ * Apply an array of JSON Patch (RFC 6902) operations to a data object.
+ * Returns a new object (deep cloned before mutation) with all patches applied.
+ */
+export declare function applyPatches<T = Record<string, unknown>>(data: T, patches: PatchOperation[]): T;