aimeat 1.40.1 → 2.1.0

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

@@ -0,0 +1,225 @@
+/**
+ * aimeat-flow — configuration-first flow / mindmap / process editor for AIMEAT apps.
+ *
+ * The app talks ONLY to AIMEAT.flow — the rendering engine underneath (currently the
+ * vendored Drawflow, /lib/drawflow@0.min.js) is an internal detail and may be swapped
+ * without breaking apps. Presets give a working editor from one call; graphs save/load
+ * as flow:* memory records via AIMEAT.data.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="/lib/drawflow@0.min.css">
+ *   <script src="/lib/drawflow@0.min.js"></script>
+ *   <script src="/v1/cortex/aimeat-flow/libs/aimeat-flow.js"></script>
+ *   <script>
+ *     var flow = AIMEAT.flow.create('#editor', { preset: 'process' });
+ *     flow.addNode({ label: 'Order received', x: 80, y: 120 });
+ *     await flow.save('flow:orders');       // -> AIMEAT.data (visibility private by default)
+ *     await flow.load('flow:orders');
+ *   </script>
+ */
+(function (global) {
+  'use strict';
+
+  var AIMEAT = global.AIMEAT = global.AIMEAT || {};
+
+  /** Theme CSS — engine-agnostic class names (af-*) + Drawflow overrides, follows the
+   *  AIMEAT light/dark CSS variables an app defines (--card/--text/--border/--accent). */
+  var THEME_CSS = [
+    '.aimeat-flow-host { position: relative; width: 100%; height: 100%; min-height: 320px; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; background: var(--bg, #fafaf8); }',
+    // The engine mount must fill the host — without an explicit size the container is
+    // 0-high and pointer events never reach the nodes (found in browser verification).
+    '.aimeat-flow-host > .parent-drawflow { width: 100%; height: 100%; min-height: inherit; }',
+    '.aimeat-flow-host .drawflow { width: 100%; height: 100%; }',
+    '.aimeat-flow-host .drawflow .drawflow-node { background: var(--card, #fff); color: var(--text, #1a1a2e); border: 1.5px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 14px; min-width: 120px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }',
+    '.aimeat-flow-host .drawflow .drawflow-node.selected { border-color: var(--accent, #e8564a); }',
+    '.aimeat-flow-host .drawflow .connection .main-path { stroke: var(--accent, #e8564a); stroke-width: 2.5px; }',
+    '.aimeat-flow-host .drawflow .drawflow-node .input, .aimeat-flow-host .drawflow .drawflow-node .output { background: var(--card, #fff); border: 2px solid var(--accent, #e8564a); height: 12px; width: 12px; }',
+    '.aimeat-flow-host .af-label { font: 600 14px/1.3 system-ui, sans-serif; text-align: center; pointer-events: none; }',
+    '.aimeat-flow-host.af-mindmap .drawflow .drawflow-node { border-radius: 999px; padding: 8px 18px; }',
+    '.aimeat-flow-toolbar { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 4px; }',
+    '.aimeat-flow-toolbar button { border: 1px solid var(--border, #e5e7eb); background: var(--card, #fff); color: var(--text, #1a1a2e); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1; }',
+    '.aimeat-flow-toolbar button:hover { border-color: var(--accent, #e8564a); }',
+  ].join('\n');
+
+  var themeInjected = false;
+  function injectTheme() {
+    if (themeInjected) return;
+    var style = document.createElement('style');
+    style.setAttribute('data-aimeat-flow', '1');
+    style.textContent = THEME_CSS;
+    document.head.appendChild(style);
+    themeInjected = true;
+  }
+
+  /** Preset defaults: how many connection points a new node gets, host styling class. */
+  var PRESETS = {
+    process: { inputs: 1, outputs: 1, hostClass: '' },
+    mindmap: { inputs: 1, outputs: 0, hostClass: 'af-mindmap' },
+    orgchart: { inputs: 1, outputs: 0, hostClass: '' },
+  };
+
+  function resolveEl(elOrSelector) {
+    if (typeof elOrSelector === 'string') return document.querySelector(elOrSelector);
+    return elOrSelector;
+  }
+
+  function esc(text) {
+    var d = document.createElement('div');
+    d.textContent = String(text == null ? '' : text);
+    return d.innerHTML;
+  }
+
+  /**
+   * Create a flow editor.
+   * @param {Element|string} elOrSelector host element (or selector). Sized by the app.
+   * @param {Object} [opts]
+   * @param {string} [opts.preset='process'] 'process' | 'mindmap' | 'orgchart'
+   * @param {Object} [opts.data] a previously exported graph to load
+   * @param {Function} [opts.onChange] called (debounced) after any node/connection change
+   * @param {boolean} [opts.toolbar=true] show the zoom/fit mini toolbar
+   */
+  function create(elOrSelector, opts) {
+    if (typeof global.Drawflow !== 'function') {
+      throw new Error('aimeat-flow: the engine is not loaded — include /lib/drawflow@0.min.js (and its CSS) BEFORE this lib.');
+    }
+    opts = opts || {};
+    var host = resolveEl(elOrSelector);
+    if (!host) throw new Error('aimeat-flow: host element not found');
+    injectTheme();
+
+    var preset = PRESETS[opts.preset || 'process'] || PRESETS.process;
+    host.classList.add('aimeat-flow-host');
+    if (preset.hostClass) host.classList.add(preset.hostClass);
+
+    var mount = document.createElement('div');
+    host.appendChild(mount);
+    var editor = new global.Drawflow(mount);
+    editor.reroute = true;
+    editor.start();
+
+    // Change notification — one debounced callback for every mutating engine event.
+    var changeCb = opts.onChange || null;
+    var changeTimer = null;
+    function emitChange() {
+      if (!changeCb) return;
+      clearTimeout(changeTimer);
+      changeTimer = setTimeout(function () { changeCb(api.export()); }, 150);
+    }
+    ['nodeCreated', 'nodeRemoved', 'nodeMoved', 'connectionCreated', 'connectionRemoved', 'nodeDataChanged']
+      .forEach(function (ev) { editor.on(ev, emitChange); });
+
+    // Double-click renames a node (label lives in node data + the .af-label div).
+    mount.addEventListener('dblclick', function (e) {
+      var nodeEl = e.target.closest('.drawflow-node');
+      if (!nodeEl) return;
+      var id = nodeEl.id.replace('node-', '');
+      var node = editor.getNodeFromId(id);
+      var next = global.prompt('Label:', (node.data && node.data.label) || '');
+      if (next == null) return;
+      editor.updateNodeDataFromId(id, Object.assign({}, node.data, { label: next }));
+      var labelEl = nodeEl.querySelector('.af-label');
+      if (labelEl) labelEl.textContent = next;
+      emitChange();
+    });
+
+    // Mini toolbar: zoom in / out / reset.
+    if (opts.toolbar !== false) {
+      var bar = document.createElement('div');
+      bar.className = 'aimeat-flow-toolbar';
+      [['+', function () { editor.zoom_in(); }], ['−', function () { editor.zoom_out(); }], ['⤢', function () { editor.zoom_reset(); }]]
+        .forEach(function (b) {
+          var btn = document.createElement('button');
+          btn.type = 'button'; btn.textContent = b[0]; btn.onclick = b[1];
+          bar.appendChild(btn);
+        });
+      host.appendChild(bar);
+    }
+
+    var api = {
+      /** The raw engine instance — INTERNAL; do not build app features on it. */
+      engine: editor,
+
+      /** Add a node. Returns the node id. */
+      addNode: function (node) {
+        node = node || {};
+        var label = node.label || 'Node';
+        var inputs = node.inputs != null ? node.inputs : preset.inputs;
+        var outputs = node.outputs != null ? node.outputs : preset.outputs;
+        var html = '<div class="af-label">' + esc(label) + '</div>';
+        return editor.addNode(
+          node.type || 'af-node', inputs, outputs,
+          node.x != null ? node.x : 60, node.y != null ? node.y : 60,
+          'af-node', Object.assign({ label: label }, node.data || {}), html, false
+        );
+      },
+
+      /** Connect two nodes (first output → first input by default). */
+      connect: function (fromId, toId, output, input) {
+        editor.addConnection(fromId, toId, output || 'output_1', input || 'input_1');
+      },
+
+      /** Mindmap helper: add a child bubble near its parent and connect them. */
+      addChild: function (parentId, label) {
+        var parent = editor.getNodeFromId(parentId);
+        var count = Object.keys(editor.drawflow.drawflow.Home.data).length;
+        var id = api.addNode({
+          label: label, inputs: 1, outputs: 1,
+          x: (parent.pos_x || 60) + 220,
+          y: (parent.pos_y || 60) + ((count % 5) - 2) * 90,
+        });
+        // Parents need an output to connect from; preset mindmap roots are created with outputs
+        // via addNode({outputs:1}) — the connect below no-ops harmlessly if the port is missing.
+        try { api.connect(parentId, id); } catch (_e) { /* parent without output port */ }
+        return id;
+      },
+
+      /** Export the graph (engine-agnostic envelope: { format, graph }). */
+      export: function () {
+        return { format: 'drawflow@0', graph: editor.export() };
+      },
+
+      /** Import a graph previously produced by export() (raw engine exports also accepted). */
+      import: function (data) {
+        if (!data) return;
+        var graph = data.graph || data;
+        editor.import(graph);
+        emitChange();
+      },
+
+      /** Remove every node/connection. */
+      clear: function () { editor.clearModuleSelected(); emitChange(); },
+
+      /** Save to AIMEAT memory (flow:* keys; requires aimeat-auth + aimeat-data + login). */
+      save: function (key, saveOpts) {
+        if (!AIMEAT.data || !AIMEAT.data.set) return Promise.reject(new Error('aimeat-flow: load aimeat-data.js (and sign in) to save flows'));
+        return AIMEAT.data.set(key, api.export(), Object.assign({ visibility: 'private', tags: ['flow'] }, saveOpts || {}));
+      },
+
+      /** Load from AIMEAT memory and render. Resolves the loaded envelope (or null). */
+      load: function (key) {
+        if (!AIMEAT.data || !AIMEAT.data.get) return Promise.reject(new Error('aimeat-flow: load aimeat-data.js (and sign in) to load flows'));
+        return AIMEAT.data.get(key).then(function (value) {
+          if (value) api.import(value);
+          return value || null;
+        });
+      },
+
+      /** Destroy the editor and detach from the host. */
+      destroy: function () {
+        clearTimeout(changeTimer);
+        try { editor.clear(); } catch (_e) { /* already gone */ }
+        host.innerHTML = '';
+        host.classList.remove('aimeat-flow-host', 'af-mindmap');
+      },
+    };
+
+    if (opts.data) api.import(opts.data);
+    return api;
+  }
+
+  AIMEAT.flow = {
+    create: create,
+    PRESETS: Object.keys(PRESETS),
+  };
+
+})(typeof window !== 'undefined' ? window : this);

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

@@ -0,0 +1,101 @@
+apiVersion: cortex.aimeat.org/v1
+kind: Extension
+metadata:
+  name: aimeat-flow
+  namespace: aimeat
+  description: "Editable flow, process and mindmap diagrams for your apps. Configuration-first: one create() call gives a drag-and-drop node editor with presets, zoom, rename-on-dblclick, and save/load to AIMEAT memory. The rendering engine is internal — apps only ever talk to AIMEAT.flow."
+  author: AIMEAT
+  tags: [flow, diagram, mindmap, process, editor, ui]
+  labels:
+    domain: diagrams
+
+spec:
+  version: "1.0.1"
+  license: MIT
+  components:
+    - type: schema
+      name: flow-data
+      key_pattern: "flow:*"
+      apply_to: prefix
+      schema:
+        type: object
+        required: [format, graph]
+        properties:
+          format:
+            type: string
+            description: "Engine format tag written by AIMEAT.flow.export() (e.g. drawflow@0). Lets a future engine swap migrate old graphs."
+          graph:
+            type: object
+            description: "The engine's exported graph."
+
+    - type: prompt
+      name: flow-assistant
+      content: |
+        You are a flow-editor assistant for an AIMEAT app. The user's node is at {{node_url}}.
+
+        The aimeat-flow extension provides editable flow / process / mindmap diagrams.
+        Apps talk ONLY to AIMEAT.flow — never to the underlying engine directly.
+
+        IMPORTANT: when creating apps that use flows, include ALL THREE tags in order:
+        1. <link rel="stylesheet" href="{{node_url}}/lib/drawflow@0.min.css">
+        2. <script src="{{node_url}}/lib/drawflow@0.min.js"></script>
+        3. <script src="{{node_url}}/v1/cortex/aimeat-flow/libs/aimeat-flow.js"></script>
+
+        API:
+
+        AIMEAT.flow.create(elOrSelector, { preset?, data?, onChange?, toolbar? }) -> flow
+          - preset: 'process' (default; nodes get 1 input + 1 output) | 'mindmap' | 'orgchart'
+          - onChange(envelope) fires debounced after any node/connection change
+          - the host element must have a size (e.g. style="height:420px")
+
+        flow.addNode({ label, x, y, inputs?, outputs?, data? }) -> nodeId
+        flow.connect(fromId, toId)                 // first output -> first input
+        flow.addChild(parentId, label) -> nodeId   // mindmap helper: place near parent + connect
+        flow.export() -> { format, graph }         // engine-agnostic envelope
+        flow.import(envelope)
+        flow.save('flow:my-graph')                 // AIMEAT.data, visibility private, tag 'flow'
+        flow.load('flow:my-graph')                 // requires aimeat-auth + aimeat-data + login
+        flow.clear(); flow.destroy()
+
+        Users drag nodes, draw connections between ports, and DOUBLE-CLICK a node to rename it.
+        Save flows under flow:* keys (schema-locked): "flow:order-process", "flow:ideas-map".
+
+        Rendering STATIC diagrams from text (no editing)? Use the mermaid pack instead.
+        For live co-editing by several users, broadcast export() envelopes over the realtime
+        pack (AimeatRealtime) and import() on receive — last-writer-wins; true CRDT merge is
+        not provided yet.
+
+        When the user asks for a flow app:
+        1. Ask what the nodes represent and whether they want process (left-to-right) or mindmap.
+        2. Create the editor with the matching preset and seed example nodes with addNode/connect.
+        3. Wire Save/Load buttons to flow.save/flow.load with a stable flow:* key.
+        4. Persist on onChange only if the user asked for autosave; otherwise keep an explicit button.
+      variables:
+        - "{{node_url}}"
+
+    - type: seed-data
+      entries:
+        - key: "flow:example-process"
+          value:
+            format: "drawflow@0"
+            graph:
+              drawflow:
+                Home:
+                  data: {}
+
+    - type: lib
+      name: aimeat-flow
+      filename: aimeat-flow.js
+      exports:
+        - create
+        - PRESETS
+      api_surface: |
+        AIMEAT.flow.create(elOrSelector, { preset?: 'process'|'mindmap'|'orgchart', data?, onChange?, toolbar? })
+          -> { addNode({label,x,y,inputs?,outputs?,data?}), connect(from,to), addChild(parent,label),
+               export(), import(envelope), save(key), load(key), clear(), destroy() }
+
+        Graphs save as flow:* memory records: { format: 'drawflow@0', graph: {...} }.
+
+        Requires (in order, BEFORE this lib):
+          <link rel="stylesheet" href="/lib/drawflow@0.min.css">
+          <script src="/lib/drawflow@0.min.js"></script>

package/dist/public/cortex-bundled/aimeat-ui-motion.js

@@ -0,0 +1,323 @@
+/**
+ * aimeat-ui-motion — UX polish primitives for AIMEAT apps.
+ *
+ * The motion language every dashboard app re-implements, packaged once: animated count-up
+ * numbers, KPI stat-tile rows with sparklines, skeleton shimmer loaders, staggered list
+ * entrances, view transitions, and tasteful micro-bling (pulse / glow / confetti tick /
+ * row highlight). Every animation is transform/opacity only (compositor-friendly, 60fps),
+ * theme-aware via the app's CSS variables, and honors prefers-reduced-motion globally
+ * (final states render instantly, no motion).
+ *
+ * Usage:
+ *   <script src="/v1/cortex/aimeat-ui-motion/libs/aimeat-ui-motion.js"></script>
+ *   <script>
+ *     var M = AIMEAT.ui.motion;
+ *     M.statTiles('#tiles', [{ label: 'Active missions', value: 18, spark: [3,5,4,8,9] }]);
+ *     M.skeleton('#table', { lines: 5 });                 // while loading…
+ *     M.unskeleton('#table', renderedHtml); M.staggerIn('#table');
+ *     await M.viewTransition('#view', function () { renderNextView(); });
+ *   </script>
+ */
+(function (global) {
+  'use strict';
+
+  var AIMEAT = global.AIMEAT = global.AIMEAT || {};
+  AIMEAT.ui = AIMEAT.ui || {};
+
+  function reduced() {
+    try { return global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+    catch (e) { return false; }
+  }
+
+  var CSS = [
+    // skeleton shimmer
+    '.aum-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }',
+    '.aum-skel-row { display: flex; gap: 10px; align-items: center; }',
+    '.aum-skel-bar, .aum-skel-avatar { background: var(--bg-dim, rgba(127,127,127,.14)); border-radius: 8px; position: relative; overflow: hidden; }',
+    '.aum-skel-avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }',
+    '.aum-skel-bar { height: 14px; flex: 1; }',
+    '.aum-skel-bar::after, .aum-skel-avatar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: aum-shimmer 1.4s infinite; }',
+    '@keyframes aum-shimmer { to { transform: translateX(100%); } }',
+    // stagger entrance
+    '.aum-stagger-item { opacity: 0; transform: translateY(8px); animation: aum-enter 380ms cubic-bezier(.22,1,.36,1) forwards; }',
+    '@keyframes aum-enter { to { opacity: 1; transform: none; } }',
+    // view transition fallback
+    '.aum-view-leave { animation: aum-leave 140ms ease forwards; }',
+    '.aum-view-enter { animation: aum-enter-view 220ms cubic-bezier(.22,1,.36,1); }',
+    '@keyframes aum-leave { to { opacity: 0; transform: translateY(-6px); } }',
+    '@keyframes aum-enter-view { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }',
+    // stat tiles
+    '.aum-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }',
+    '.aum-tile { background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 14px 16px; min-width: 0; }',
+    '.aum-tile-top { display: flex; align-items: center; gap: 8px; }',
+    '.aum-tile-icon { font-size: 18px; line-height: 1; }',
+    '.aum-tile-label { font: 500 11px/1.3 system-ui, sans-serif; opacity: .65; text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }',
+    '.aum-tile-value { font: 700 26px/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--text, inherit); }',
+    '.aum-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-height: 22px; }',
+    '.aum-trend { font: 600 11px/1 system-ui, sans-serif; padding: 3px 8px; border-radius: 999px; }',
+    '.aum-trend-up { background: rgba(34,197,94,.15); color: #16a34a; }',
+    '.aum-trend-down { background: rgba(239,68,68,.15); color: #dc2626; }',
+    '.aum-trend-flat { background: var(--bg-dim, rgba(127,127,127,.12)); opacity: .8; }',
+    '.aum-spark { flex: 1; max-width: 90px; height: 22px; }',
+    '.aum-spark path { fill: none; stroke: var(--accent, #e8564a); stroke-width: 1.6; }',
+    '.aum-spark .aum-spark-fill { fill: var(--accent, #e8564a); opacity: .12; stroke: none; }',
+    // micro-bling
+    '.aum-pulse { animation: aum-pulse 1.4s ease-in-out infinite; }',
+    '@keyframes aum-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }',
+    '.aum-highlight { animation: aum-highlight 900ms ease; }',
+    '@keyframes aum-highlight { 0% { background-color: color-mix(in srgb, var(--accent, #e8564a) 20%, transparent); } 100% { background-color: transparent; } }',
+    '.aum-confetti-bit { position: absolute; width: 6px; height: 6px; border-radius: 2px; pointer-events: none; animation: aum-confetti 700ms cubic-bezier(.22,1,.36,1) forwards; }',
+    '@keyframes aum-confetti { to { transform: translate(var(--aum-dx), var(--aum-dy)) rotate(var(--aum-rot)); opacity: 0; } }',
+    '@media (prefers-reduced-motion: reduce) {',
+    '  .aum-skel-bar::after, .aum-skel-avatar::after { animation: none; }',
+    '  .aum-stagger-item { animation: none; opacity: 1; transform: none; }',
+    '  .aum-view-leave, .aum-view-enter { animation: none; }',
+    '  .aum-pulse, .aum-highlight { animation: none; }',
+    '}',
+  ].join('\n');
+
+  var injected = false;
+  function injectCss() {
+    if (injected) return;
+    var s = document.createElement('style');
+    s.setAttribute('data-aimeat-ui-motion', '1');
+    s.textContent = CSS;
+    document.head.appendChild(s);
+    injected = true;
+  }
+
+  function resolveEl(x) { return typeof x === 'string' ? document.querySelector(x) : x; }
+
+  function esc(text) {
+    var d = document.createElement('div');
+    d.textContent = String(text == null ? '' : text);
+    return d.innerHTML;
+  }
+
+  var defaultFormat = function (v, decimals) {
+    try { return Number(v).toLocaleString(undefined, { maximumFractionDigits: decimals != null ? decimals : (Math.abs(v) < 10 && v % 1 !== 0 ? 1 : 0) }); }
+    catch (e) { return String(v); }
+  };
+
+  /**
+   * Animate a number rolling up (or down) to `value` inside el.
+   * opts: { duration=800, format?(v)→string, decimals?, from? }
+   */
+  function countUp(el, value, opts) {
+    el = resolveEl(el);
+    if (!el) return;
+    opts = opts || {};
+    var fmt = opts.format || function (v) { return defaultFormat(v, opts.decimals); };
+    var target = Number(value) || 0;
+    if (reduced()) { el.textContent = fmt(target); return; }
+    var from = opts.from != null ? Number(opts.from) : (parseFloat(String(el.textContent).replace(/[^\d.-]/g, '')) || 0);
+    var dur = opts.duration != null ? opts.duration : 800;
+    var t0 = null;
+    function frame(t) {
+      if (t0 == null) t0 = t;
+      var p = Math.min(1, (t - t0) / dur);
+      var eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
+      el.textContent = fmt(from + (target - from) * eased);
+      if (p < 1) requestAnimationFrame(frame);
+      else el.textContent = fmt(target);
+    }
+    requestAnimationFrame(frame);
+  }
+
+  function sparkSvg(values) {
+    if (!values || values.length < 2) return '';
+    var w = 90; var h = 22; var pad = 2;
+    var min = Math.min.apply(null, values); var max = Math.max.apply(null, values);
+    var span = max - min || 1;
+    var pts = values.map(function (v, i) {
+      return [pad + (w - pad * 2) * (i / (values.length - 1)), h - pad - (h - pad * 2) * ((v - min) / span)];
+    });
+    var line = pts.map(function (p, i) { return (i ? 'L' : 'M') + p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
+    var fill = line + ' L' + pts[pts.length - 1][0].toFixed(1) + ',' + (h - pad) + ' L' + pts[0][0].toFixed(1) + ',' + (h - pad) + ' Z';
+    return '<svg class="aum-spark" viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" aria-hidden="true">'
+      + '<path class="aum-spark-fill" d="' + fill + '"></path><path d="' + line + '"></path></svg>';
+  }
+
+  /**
+   * Render a responsive KPI stat-tile row. Values count up on mount and on update.
+   * tiles: [{ label, value, icon?, trend?: {value, dir:'up'|'down'|'flat'}, spark?: number[],
+   *           format?(v)→string, decimals? }]
+   * Returns { update(tiles), destroy() }.
+   */
+  function statTiles(el, tiles) {
+    el = resolveEl(el);
+    if (!el) throw new Error('aimeat-ui-motion: statTiles host not found');
+    injectCss();
+    el.classList.add('aum-tiles');
+
+    function render(list) {
+      el.innerHTML = list.map(function (t, i) {
+        var trend = t.trend
+          ? '<span class="aum-trend aum-trend-' + esc(t.trend.dir || 'flat') + '">'
+            + (t.trend.dir === 'up' ? '▲ ' : t.trend.dir === 'down' ? '▼ ' : '') + esc(t.trend.value) + '</span>'
+          : '';
+        return '<div class="aum-tile">'
+          + '<div class="aum-tile-top">' + (t.icon ? '<span class="aum-tile-icon">' + esc(t.icon) + '</span>' : '')
+          + '<span class="aum-tile-label">' + esc(t.label) + '</span></div>'
+          + '<div class="aum-tile-value" data-aum-tile="' + i + '">0</div>'
+          + '<div class="aum-tile-foot">' + trend + (t.spark ? sparkSvg(t.spark) : '') + '</div>'
+          + '</div>';
+      }).join('');
+      list.forEach(function (t, i) {
+        var v = el.querySelector('[data-aum-tile="' + i + '"]');
+        if (v) countUp(v, t.value, { format: t.format, decimals: t.decimals });
+      });
+    }
+
+    render(tiles || []);
+    return {
+      update: render,
+      destroy: function () { el.innerHTML = ''; el.classList.remove('aum-tiles'); },
+    };
+  }
+
+  /**
+   * Replace el's content with a shimmer skeleton while data loads.
+   * opts: { lines=3, avatar=false, height? } — height sets a fixed skeleton-bar height in px.
+   */
+  function skeleton(el, opts) {
+    el = resolveEl(el);
+    if (!el) return;
+    injectCss();
+    opts = opts || {};
+    var lines = opts.lines != null ? opts.lines : 3;
+    var rows = [];
+    for (var i = 0; i < lines; i++) {
+      var widths = [96, 78, 88, 64, 92];
+      var bar = '<div class="aum-skel-bar" style="width:' + widths[i % widths.length] + '%'
+        + (opts.height ? ';height:' + opts.height + 'px' : '') + '"></div>';
+      rows.push('<div class="aum-skel-row">' + (opts.avatar ? '<div class="aum-skel-avatar"></div>' : '') + bar + '</div>');
+    }
+    el.setAttribute('data-aum-skeleton', '1');
+    el.innerHTML = '<div class="aum-skeleton" aria-hidden="true">' + rows.join('') + '</div>';
+  }
+
+  /** Swap a skeleton for real content (html string optional — pass nothing if you render after). */
+  function unskeleton(el, html) {
+    el = resolveEl(el);
+    if (!el) return;
+    el.removeAttribute('data-aum-skeleton');
+    if (html != null) el.innerHTML = html;
+    else if (el.querySelector('.aum-skeleton')) el.innerHTML = '';
+  }
+
+  /**
+   * Staggered entrance for a list's children after render.
+   * opts: { selector? (default: direct children), delay=35 (ms between items), max=14 }
+   */
+  function staggerIn(listEl, opts) {
+    listEl = resolveEl(listEl);
+    if (!listEl || reduced()) return;
+    injectCss();
+    opts = opts || {};
+    var items = opts.selector ? listEl.querySelectorAll(opts.selector) : listEl.children;
+    var delay = opts.delay != null ? opts.delay : 35;
+    var max = opts.max != null ? opts.max : 14;
+    for (var i = 0; i < items.length; i++) {
+      var el = items[i];
+      el.classList.remove('aum-stagger-item');
+      if (i < max) {
+        el.style.animationDelay = (i * delay) + 'ms';
+        el.classList.add('aum-stagger-item');
+      }
+    }
+  }
+
+  /**
+   * Animate a view swap: leave-fade the container, run renderFn (may be async), enter-slide the
+   * new content. Uses the native View Transitions API when available; CSS fallback otherwise.
+   * Returns a promise resolving when the new view is in.
+   */
+  function viewTransition(container, renderFn) {
+    container = resolveEl(container);
+    injectCss();
+    if (!container) return Promise.resolve(renderFn());
+    if (reduced()) return Promise.resolve(renderFn());
+    if (document.startViewTransition) {
+      return document.startViewTransition(function () { return renderFn(); }).finished.catch(function () { /* interrupted is fine */ });
+    }
+    return new Promise(function (res) {
+      container.classList.add('aum-view-leave');
+      setTimeout(function () {
+        container.classList.remove('aum-view-leave');
+        Promise.resolve(renderFn()).then(function () {
+          container.classList.add('aum-view-enter');
+          setTimeout(function () { container.classList.remove('aum-view-enter'); res(); }, 240);
+        });
+      }, 130);
+    });
+  }
+
+  /** Gentle looping attention pulse (returns stop()). Use for "needs you" affordances. */
+  function pulse(el) {
+    el = resolveEl(el);
+    if (!el) return function () {};
+    injectCss();
+    el.classList.add('aum-pulse');
+    return function () { el.classList.remove('aum-pulse'); };
+  }
+
+  /** One-off glow ring around an element (box-shadow fade; returns nothing). */
+  function glow(el, color) {
+    el = resolveEl(el);
+    if (!el || reduced()) return;
+    var c = color || 'var(--accent, #e8564a)';
+    var prev = el.style.boxShadow;
+    el.style.transition = 'box-shadow 700ms ease';
+    el.style.boxShadow = '0 0 0 4px color-mix(in srgb, ' + c + ' 40%, transparent)';
+    setTimeout(function () { el.style.boxShadow = prev || ''; }, 720);
+  }
+
+  /** Brief background flash on an SSE-updated row — beats a full-table repaint. */
+  function highlightRow(el) {
+    el = resolveEl(el);
+    if (!el) return;
+    injectCss();
+    el.classList.remove('aum-highlight');
+    void el.offsetWidth;
+    el.classList.add('aum-highlight');
+  }
+
+  /** Small, tasteful success confetti burst anchored to an element. One per user action. */
+  function confettiTick(el) {
+    el = resolveEl(el);
+    if (!el || reduced()) return;
+    injectCss();
+    var r = el.getBoundingClientRect();
+    var colors = ['#22c55e', '#f59e0b', '#3b82f6', '#ec4899', '#a78bfa'];
+    var host = document.createElement('div');
+    host.style.cssText = 'position:fixed;left:' + (r.left + r.width / 2) + 'px;top:' + (r.top + r.height / 2) + 'px;width:0;height:0;z-index:99999;pointer-events:none';
+    for (var i = 0; i < 12; i++) {
+      var bit = document.createElement('div');
+      bit.className = 'aum-confetti-bit';
+      var ang = (Math.PI * 2 * i) / 12 + (i % 3) * 0.2;
+      var d = 26 + (i % 4) * 9;
+      bit.style.background = colors[i % colors.length];
+      bit.style.setProperty('--aum-dx', (Math.cos(ang) * d).toFixed(0) + 'px');
+      bit.style.setProperty('--aum-dy', (Math.sin(ang) * d - 8).toFixed(0) + 'px');
+      bit.style.setProperty('--aum-rot', ((i % 2 ? 1 : -1) * (90 + i * 20)) + 'deg');
+      host.appendChild(bit);
+    }
+    document.body.appendChild(host);
+    setTimeout(function () { host.remove(); }, 750);
+  }
+
+  AIMEAT.ui.motion = {
+    countUp: countUp,
+    statTiles: statTiles,
+    skeleton: skeleton,
+    unskeleton: unskeleton,
+    staggerIn: staggerIn,
+    viewTransition: viewTransition,
+    pulse: pulse,
+    glow: glow,
+    highlightRow: highlightRow,
+    confettiTick: confettiTick,
+  };
+
+})(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this);