aimeat 1.2.0

package/dist/public/cortex-bundled/aimeat-canvas.yaml

@@ -0,0 +1,241 @@
+apiVersion: cortex.aimeat.org/v1
+kind: Extension
+metadata:
+  name: aimeat-canvas
+  namespace: aimeat
+  description: "A full-featured drawing canvas for your apps. Draw with pen, shapes, and text. Auto-saves to AIMEAT storage. Touch, mouse, and mobile support with undo/redo and PNG/SVG export."
+  author: AIMEAT
+  tags: [drawing, canvas, art, ui]
+  labels:
+    domain: creative
+
+spec:
+  version: "1.0.0"
+  license: MIT
+  components:
+    - type: schema
+      name: drawing-data
+      key_pattern: "drawing:*"
+      apply_to: prefix
+      schema:
+        type: object
+        required: [strokes, canvasSize]
+        properties:
+          strokes:
+            type: array
+            items:
+              type: object
+              required: [tool, color, lineWidth, points]
+              properties:
+                tool:
+                  type: string
+                  enum: [pen, line, rect, circle, eraser, text]
+                color:
+                  type: string
+                lineWidth:
+                  type: number
+                  minimum: 1
+                  maximum: 20
+                opacity:
+                  type: number
+                  minimum: 0
+                  maximum: 1
+                points:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      x:
+                        type: number
+                      y:
+                        type: number
+                text:
+                  type: string
+                  maxLength: 500
+                fontSize:
+                  type: number
+                  minimum: 8
+                  maximum: 200
+          canvasSize:
+            type: object
+            required: [width, height]
+            properties:
+              width:
+                type: number
+                minimum: 1
+              height:
+                type: number
+                minimum: 1
+          backgroundColor:
+            type: string
+          metadata:
+            type: object
+            properties:
+              createdAt:
+                type: string
+                format: date-time
+              updatedAt:
+                type: string
+                format: date-time
+
+    - type: prompt
+      name: canvas-assistant
+      content: |
+        You are a drawing canvas assistant for an AIMEAT app. The user's node is at {{node_url}}.
+
+        You help users create apps with interactive drawing canvases. The aimeat-canvas extension
+        is installed and provides a pure Canvas API drawing library with zero external dependencies.
+
+        IMPORTANT: When creating apps that use the drawing canvas, include the script tag:
+          <script src="{{node_url}}/v1/cortex/aimeat-canvas/libs/aimeat-canvas.js"></script>
+
+        Available API:
+
+        AIMEAT.canvas.DrawingCanvas({elementId, storageKey, nodeUrl, token?, options?})
+          - Creates a full drawing canvas with toolbar inside the target element
+          - elementId: string — DOM element id to render into
+          - storageKey: string — AIMEAT memory key for auto-save (e.g. 'drawing:my-sketch')
+          - nodeUrl: string — AIMEAT node URL (e.g. 'http://localhost:40050')
+          - token: string — optional auth token for private data
+          - options: object — optional configuration overrides
+
+        Options object:
+          - width: number — canvas width in pixels (default: 800)
+          - height: number — canvas height in pixels (default: 600)
+          - tools: string[] — enabled tools (default: ['pen','line','rect','circle','eraser','text'])
+          - backgroundColor: string — canvas background color (default: '#ffffff')
+          - autoSave: boolean — enable auto-save to storage (default: true)
+          - autoSaveDelay: number — debounce delay in ms (default: 2000)
+
+        Returns a controller object:
+          - canvas: HTMLCanvasElement — the underlying canvas element
+          - export(format): triggers download; format is 'png' or 'svg'
+          - clear(): clears all strokes and the canvas
+          - undo(): undoes the last stroke (also Ctrl+Z)
+          - redo(): redoes the last undone stroke (also Ctrl+Y)
+          - setTool(name): switches active tool ('pen','line','rect','circle','eraser','text')
+          - setColor(hex): sets the drawing color (e.g. '#6366f1')
+          - setLineWidth(px): sets the line width in pixels (1-20)
+          - loadFromStorage(): returns Promise — loads drawing from AIMEAT memory
+          - saveToStorage(): returns Promise — saves drawing to AIMEAT memory
+
+        Available tools:
+          - pen: freehand drawing
+          - line: straight line (click start, drag to end)
+          - rect: rectangle (click corner, drag to opposite corner)
+          - circle: ellipse (click center, drag to set radius)
+          - eraser: erases strokes (draws with background color)
+          - text: click to place text (opens prompt for input)
+
+        Drawing data stored in AIMEAT memory uses the schema key pattern "drawing:*".
+        Example keys: "drawing:my-sketch", "drawing:welcome", "drawing:diagram-v2"
+
+        The drawing data structure is:
+        {
+          strokes: [
+            { tool: "pen", color: "#000000", lineWidth: 2, opacity: 1, points: [{x:10,y:20}, ...] },
+            { tool: "rect", color: "#6366f1", lineWidth: 2, opacity: 1, points: [{x:50,y:50}, {x:200,y:150}] },
+            { tool: "text", color: "#000000", lineWidth: 1, opacity: 1, points: [{x:100,y:100}], text: "Hello", fontSize: 16 }
+          ],
+          canvasSize: { width: 800, height: 600 },
+          backgroundColor: "#ffffff",
+          metadata: { createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z" }
+        }
+
+        Color palette (AIMEAT theme):
+        #000000, #ffffff, #6366f1, #8b5cf6, #ef4444, #f59e0b, #10b981, #3b82f6, #ec4899, #64748b
+
+        Example usage:
+        ```html
+        <!DOCTYPE html>
+        <html>
+        <head><title>My Drawing App</title></head>
+        <body>
+          <div id="canvas-area"></div>
+          <script src="{{node_url}}/v1/cortex/aimeat-canvas/libs/aimeat-canvas.js"></script>
+          <script>
+            var dc = AIMEAT.canvas.DrawingCanvas({
+              elementId: 'canvas-area',
+              storageKey: 'drawing:my-sketch',
+              nodeUrl: '{{node_url}}',
+              options: { width: 800, height: 600 }
+            });
+            // dc.setTool('rect');
+            // dc.setColor('#6366f1');
+            // dc.export('png');
+          </script>
+        </body>
+        </html>
+        ```
+
+        When the user asks for a drawing canvas:
+        1. Ask what they want to draw or what the canvas is for
+        2. Suggest appropriate options (size, tools, background)
+        3. Generate the app HTML with the script tag and DrawingCanvas call
+        4. Explain the keyboard shortcuts (Ctrl+Z undo, Ctrl+Y redo)
+      variables:
+        - "{{node_url}}"
+
+    - type: seed-data
+      entries:
+        - key: "drawing:welcome"
+          value:
+            strokes:
+              - tool: rect
+                color: "#6366f1"
+                lineWidth: 3
+                opacity: 1
+                points: [{x: 100, y: 80}, {x: 700, y: 520}]
+              - tool: pen
+                color: "#8b5cf6"
+                lineWidth: 2
+                opacity: 1
+                points: [{x: 150, y: 200}, {x: 170, y: 180}, {x: 200, y: 160}, {x: 240, y: 155}, {x: 280, y: 160}, {x: 310, y: 180}, {x: 330, y: 200}]
+              - tool: pen
+                color: "#ef4444"
+                lineWidth: 2
+                opacity: 1
+                points: [{x: 450, y: 200}, {x: 470, y: 180}, {x: 500, y: 160}, {x: 540, y: 155}, {x: 580, y: 160}, {x: 610, y: 180}, {x: 630, y: 200}]
+              - tool: text
+                color: "#000000"
+                lineWidth: 1
+                opacity: 1
+                points: [{x: 300, y: 400}]
+                text: "Welcome to AIMEAT Canvas!"
+                fontSize: 24
+            canvasSize:
+              width: 800
+              height: 600
+            backgroundColor: "#ffffff"
+            metadata:
+              createdAt: "2026-01-01T00:00:00Z"
+              updatedAt: "2026-01-01T00:00:00Z"
+
+    - type: lib
+      name: aimeat-canvas
+      filename: aimeat-canvas.js
+      exports:
+        - DrawingCanvas
+      api_surface: |
+        AIMEAT.canvas.DrawingCanvas({elementId, storageKey, nodeUrl, token?, options?})
+          Creates a full-featured drawing canvas with toolbar, tools, and auto-save.
+          elementId: string — DOM element id to render into
+          storageKey: string — AIMEAT memory key (e.g. 'drawing:my-sketch')
+          nodeUrl: string — AIMEAT node URL
+          token?: string — optional auth token
+          options?: {
+            width: number (default 800),
+            height: number (default 600),
+            tools: string[] (default ['pen','line','rect','circle','eraser','text']),
+            backgroundColor: string (default '#ffffff'),
+            autoSave: boolean (default true),
+            autoSaveDelay: number (default 2000)
+          }
+
+          Returns: {
+            canvas, export(format), clear(), undo(), redo(),
+            setTool(name), setColor(hex), setLineWidth(px),
+            loadFromStorage(), saveToStorage()
+          }
+
+        No external dependencies — pure Canvas API.

package/dist/public/cortex-bundled/aimeat-charts.js

@@ -0,0 +1,455 @@
+/**
+ * aimeat-charts — Chart.js wrapper for the AIMEAT Cortex extension system.
+ *
+ * Provides ChartPanel (fetch-from-storage) and ChartBuilder (inline data)
+ * components that render responsive, themed Chart.js charts.
+ *
+ * Requires Chart.js to be loaded first:
+ *   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ *   <script src="/v1/cortex/aimeat-charts/libs/aimeat-charts.js"></script>
+ *
+ * Usage:
+ *   AIMEAT.charts.ChartBuilder({ elementId: 'my-chart', type: 'bar', data: {...} })
+ *   AIMEAT.charts.ChartPanel({ elementId: 'my-chart', chartKey: 'chart:sales-2024', nodeUrl: '...' })
+ */
+(function (AIMEAT) {
+  'use strict';
+
+  // ---------------------------------------------------------------------------
+  // Constants
+  // ---------------------------------------------------------------------------
+
+  /** Supported Chart.js chart types. */
+  var TYPES = ['bar', 'line', 'pie', 'doughnut', 'radar', 'scatter', 'bubble'];
+
+  /** AIMEAT brand palette — used as default colours when datasets omit backgroundColor. */
+  var PALETTE = [
+    '#6366f1', '#8b5cf6', '#a78bfa', '#c4b5fd',
+    '#f59e0b', '#10b981', '#ef4444', '#3b82f6',
+    '#ec4899', '#14b8a6'
+  ];
+
+  /** Chart types where each data-point gets its own colour slice. */
+  var SLICE_TYPES = ['pie', 'doughnut'];
+
+  // ---------------------------------------------------------------------------
+  // CSS injection (once)
+  // ---------------------------------------------------------------------------
+
+  var stylesInjected = false;
+
+  /**
+   * Inject the baseline CSS rules needed for chart containers.
+   * Called lazily on first ChartPanel / ChartBuilder invocation.
+   */
+  function injectStyles() {
+    if (stylesInjected) return;
+    stylesInjected = true;
+
+    var css =
+      '.aimeat-chart-container {' +
+      '  position: relative;' +
+      '  width: 100%;' +
+      '  max-width: 100%;' +
+      '  box-sizing: border-box;' +
+      '}' +
+      '.aimeat-chart-container canvas {' +
+      '  display: block;' +
+      '  width: 100% !important;' +
+      '  height: auto !important;' +
+      '}' +
+      '.aimeat-chart-error {' +
+      '  padding: 20px;' +
+      '  color: #ef4444;' +
+      '  text-align: center;' +
+      '  font-family: system-ui, -apple-system, sans-serif;' +
+      '  font-size: 14px;' +
+      '  border: 1px dashed #ef4444;' +
+      '  border-radius: 8px;' +
+      '  background: rgba(239, 68, 68, 0.05);' +
+      '}' +
+      '.aimeat-chart-loading {' +
+      '  padding: 20px;' +
+      '  color: #6366f1;' +
+      '  text-align: center;' +
+      '  font-family: system-ui, -apple-system, sans-serif;' +
+      '  font-size: 14px;' +
+      '}';
+
+    var style = document.createElement('style');
+    style.setAttribute('data-aimeat', 'charts');
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Render an error message inside the target element.
+   * @param {HTMLElement} el  Target container.
+   * @param {string}      msg Human-readable error text.
+   */
+  function showError(el, msg) {
+    el.innerHTML = '<div class="aimeat-chart-error">' + escapeHtml(msg) + '</div>';
+  }
+
+  /**
+   * Render a loading indicator inside the target element.
+   * @param {HTMLElement} el Target container.
+   */
+  function showLoading(el) {
+    el.innerHTML = '<div class="aimeat-chart-loading">Loading chart&hellip;</div>';
+  }
+
+  /**
+   * Minimal HTML-entity escaping for safe text insertion.
+   * @param {string} str Raw string.
+   * @returns {string} Escaped string safe for innerHTML.
+   */
+  function escapeHtml(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+  /**
+   * Validate that Chart.js is available on the page.
+   * @returns {boolean} true if window.Chart exists.
+   */
+  function hasChartJs() {
+    return typeof window.Chart === 'function' || typeof window.Chart === 'object';
+  }
+
+  /**
+   * Deep-clone chart data and apply the AIMEAT palette to any dataset that is
+   * missing an explicit backgroundColor.
+   *
+   * For "slice" chart types (pie, doughnut, polarArea) each data-point receives
+   * its own colour from the palette.  For all other types each dataset receives
+   * a single colour.
+   *
+   * @param {object} data  Chart.js data object ({ labels, datasets }).
+   * @param {string} type  Chart type string (e.g. 'bar', 'pie').
+   * @returns {object} Cloned data with palette applied.
+   */
+  function applyPalette(data, type) {
+    var d = JSON.parse(JSON.stringify(data));
+    var isSlice = SLICE_TYPES.indexOf(type) !== -1;
+
+    d.datasets.forEach(function (ds, i) {
+      if (!ds.backgroundColor) {
+        if (isSlice) {
+          // One colour per data-point, cycling through the palette.
+          ds.backgroundColor = ds.data.map(function (_val, j) {
+            return PALETTE[j % PALETTE.length];
+          });
+        } else {
+          // Single colour per dataset.
+          ds.backgroundColor = PALETTE[i % PALETTE.length];
+        }
+      }
+
+      // Default borderColor to match backgroundColor when not explicitly set.
+      if (!ds.borderColor && ds.backgroundColor) {
+        ds.borderColor = ds.backgroundColor;
+      }
+    });
+
+    return d;
+  }
+
+  /**
+   * Create a <canvas> inside the given container, wrapped in the standard
+   * .aimeat-chart-container div.
+   *
+   * @param {HTMLElement} el Parent element (its contents will be replaced).
+   * @returns {HTMLCanvasElement} The newly created canvas.
+   */
+  function createCanvas(el) {
+    el.innerHTML = '';
+    var wrapper = document.createElement('div');
+    wrapper.className = 'aimeat-chart-container';
+    var canvas = document.createElement('canvas');
+    wrapper.appendChild(canvas);
+    el.appendChild(wrapper);
+    return canvas;
+  }
+
+  /**
+   * Attach a ResizeObserver to the chart's parent so Chart.js can re-draw when
+   * the container size changes (e.g. responsive layout, collapsible panels).
+   *
+   * @param {object}      chart Chart.js instance.
+   * @param {HTMLElement}  el    The outer container element.
+   */
+  function observeResize(chart, el) {
+    if (typeof ResizeObserver === 'undefined') return;
+
+    var observer = new ResizeObserver(function () {
+      try {
+        chart.resize();
+      } catch (_e) {
+        // Chart may have been destroyed — silently ignore.
+      }
+    });
+
+    observer.observe(el);
+
+    // Store the observer reference so callers could disconnect later if needed.
+    chart._aimeatResizeObserver = observer;
+  }
+
+  /**
+   * Build default Chart.js options, merged with any caller-supplied overrides.
+   *
+   * @param {string}  title   Optional chart title string.
+   * @param {object=} extras  Caller-supplied Chart.js options to merge in.
+   * @returns {object} Merged options object.
+   */
+  function buildOptions(title, extras) {
+    var base = {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: { display: true, position: 'top' },
+        tooltip: { enabled: true }
+      }
+    };
+
+    // Add title plugin when a title string is provided.
+    if (title) {
+      base.plugins.title = {
+        display: true,
+        text: title,
+        font: { size: 16, weight: 'bold' },
+        padding: { bottom: 12 }
+      };
+    }
+
+    // Merge caller overrides (shallow one-level merge for plugins).
+    if (extras) {
+      var merged = Object.assign({}, base, extras);
+      if (extras.plugins) {
+        merged.plugins = Object.assign({}, base.plugins, extras.plugins);
+      }
+      return merged;
+    }
+
+    return base;
+  }
+
+  // ---------------------------------------------------------------------------
+  // ChartBuilder — render a chart from inline data
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Render a Chart.js chart from inline data.
+   *
+   * @param {object}  opts
+   * @param {string}  opts.elementId  DOM id of the target container element.
+   * @param {object}  opts.data       Chart.js data ({ labels, datasets }).
+   * @param {string}  opts.type       Chart type (bar, line, pie, ...).
+   * @param {string=} opts.title      Optional chart title.
+   * @param {object=} opts.options    Optional Chart.js options overrides.
+   * @returns {Chart|null} The Chart.js instance, or null on error.
+   */
+  function ChartBuilder(opts) {
+    injectStyles();
+
+    // --- Validate inputs ---------------------------------------------------
+
+    if (!opts || !opts.elementId) {
+      console.error('[aimeat-charts] ChartBuilder: elementId is required.');
+      return null;
+    }
+
+    var el = document.getElementById(opts.elementId);
+    if (!el) {
+      console.error('[aimeat-charts] ChartBuilder: element not found: #' + opts.elementId);
+      return null;
+    }
+
+    if (!hasChartJs()) {
+      showError(el,
+        'Chart.js is not loaded. Add this before aimeat-charts.js:\n' +
+        '<script src="https://cdn.jsdelivr.net/npm/chart.js"><\/script>'
+      );
+      return null;
+    }
+
+    if (!opts.type || TYPES.indexOf(opts.type) === -1) {
+      showError(el, 'Invalid chart type: "' + (opts.type || '') + '". Supported: ' + TYPES.join(', '));
+      return null;
+    }
+
+    if (!opts.data || !opts.data.datasets || !opts.data.datasets.length) {
+      showError(el, 'Chart data with at least one dataset is required.');
+      return null;
+    }
+
+    // --- Build chart -------------------------------------------------------
+
+    try {
+      var canvas = createCanvas(el);
+      var chartData = applyPalette(opts.data, opts.type);
+      var chartOptions = buildOptions(opts.title, opts.options);
+
+      var chart = new window.Chart(canvas, {
+        type: opts.type,
+        data: chartData,
+        options: chartOptions
+      });
+
+      observeResize(chart, el);
+      return chart;
+    } catch (err) {
+      showError(el, 'Failed to render chart: ' + (err.message || String(err)));
+      console.error('[aimeat-charts] ChartBuilder error:', err);
+      return null;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // ChartPanel — fetch chart data from AIMEAT storage, then render
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Fetch a chart definition from AIMEAT memory and render it.
+   *
+   * The memory value is expected to follow the chart-data schema defined in the
+   * aimeat-charts extension manifest:
+   *   { type, title?, data: { labels, datasets }, options? }
+   *
+   * @param {object}  opts
+   * @param {string}  opts.elementId  DOM id of the target container element.
+   * @param {string}  opts.chartKey   AIMEAT memory key (e.g. "chart:sales-2024").
+   * @param {string}  opts.nodeUrl    AIMEAT node base URL (no trailing slash).
+   * @param {string=} opts.token      Optional bearer token for authenticated requests.
+   * @returns {Promise<Chart|null>} Resolves to the Chart.js instance or null.
+   */
+  function ChartPanel(opts) {
+    injectStyles();
+
+    // --- Validate inputs ---------------------------------------------------
+
+    if (!opts || !opts.elementId) {
+      console.error('[aimeat-charts] ChartPanel: elementId is required.');
+      return Promise.resolve(null);
+    }
+
+    var el = document.getElementById(opts.elementId);
+    if (!el) {
+      console.error('[aimeat-charts] ChartPanel: element not found: #' + opts.elementId);
+      return Promise.resolve(null);
+    }
+
+    if (!hasChartJs()) {
+      showError(el,
+        'Chart.js is not loaded. Add this before aimeat-charts.js:\n' +
+        '<script src="https://cdn.jsdelivr.net/npm/chart.js"><\/script>'
+      );
+      return Promise.resolve(null);
+    }
+
+    if (!opts.chartKey) {
+      showError(el, 'chartKey is required (e.g. "chart:sales-2024").');
+      return Promise.resolve(null);
+    }
+
+    if (!opts.nodeUrl) {
+      showError(el, 'nodeUrl is required (e.g. "http://localhost:40050").');
+      return Promise.resolve(null);
+    }
+
+    // --- Fetch and render --------------------------------------------------
+
+    showLoading(el);
+
+    var url = opts.nodeUrl.replace(/\/+$/, '') +
+              '/v1/memory/' +
+              encodeURIComponent(opts.chartKey);
+
+    var headers = { 'Accept': 'application/json' };
+    if (opts.token) {
+      headers['Authorization'] = 'Bearer ' + opts.token;
+    }
+
+    return fetch(url, { headers: headers })
+      .then(function (res) {
+        if (!res.ok) {
+          throw new Error('HTTP ' + res.status + ' — could not load chart key "' + opts.chartKey + '"');
+        }
+        return res.json();
+      })
+      .then(function (response) {
+        // The AIMEAT response envelope: { status, node_id, data: { key, value, ... }, hints }
+        var chartDef = response && response.data && response.data.value;
+
+        if (!chartDef) {
+          throw new Error('No chart data found at key "' + opts.chartKey + '"');
+        }
+
+        if (!chartDef.type || TYPES.indexOf(chartDef.type) === -1) {
+          throw new Error(
+            'Invalid chart type "' + (chartDef.type || '') +
+            '" in stored data. Supported: ' + TYPES.join(', ')
+          );
+        }
+
+        if (!chartDef.data || !chartDef.data.datasets || !chartDef.data.datasets.length) {
+          throw new Error('Stored chart data is missing datasets.');
+        }
+
+        // Render using ChartBuilder logic (inline).
+        var canvas = createCanvas(el);
+        var chartData = applyPalette(chartDef.data, chartDef.type);
+        var chartOptions = buildOptions(
+          chartDef.title,
+          chartDef.options || opts.options
+        );
+
+        var chart = new window.Chart(canvas, {
+          type: chartDef.type,
+          data: chartData,
+          options: chartOptions
+        });
+
+        observeResize(chart, el);
+        return chart;
+      })
+      .catch(function (err) {
+        showError(el, 'Chart load failed: ' + (err.message || String(err)));
+        console.error('[aimeat-charts] ChartPanel error:', err);
+        return null;
+      });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Register with the AIMEAT extension system
+  // ---------------------------------------------------------------------------
+
+  // Ensure the global register helper exists (defensive — the Cortex loader
+  // normally provides it, but extensions should be loadable standalone too).
+  if (typeof AIMEAT.register !== 'function') {
+    AIMEAT.register = function (name, exports) {
+      AIMEAT[name] = exports;
+    };
+  }
+
+  var exports = {
+    ChartPanel: ChartPanel,
+    ChartBuilder: ChartBuilder,
+    TYPES: TYPES
+  };
+
+  AIMEAT.register('aimeat-charts', exports);
+
+  // Also expose under the short alias "charts" for convenience:
+  // AIMEAT.charts.ChartBuilder(...)
+  if (!AIMEAT.charts) {
+    AIMEAT.charts = exports;
+  }
+
+})(window.AIMEAT || (window.AIMEAT = {}));