aimeat 3.0.0 → 3.1.0

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

@@ -0,0 +1,149 @@
+apiVersion: cortex.aimeat.org/v1
+kind: Extension
+metadata:
+  name: aimeat-input
+  namespace: aimeat
+  description: "Touch and pointer input as one implementation: tap, double-tap, long-press, swipe, drag, a virtual thumbstick, and a keyboard equivalent for each so the same code answers a finger, a mouse and a keyboard. Derives touch-action from the handlers you register, so a horizontal swipe leaves vertical scrolling alive. Zero dependencies, structural CSS only, composes with aimeat-viewport rather than competing with it."
+  author: AIMEAT
+  tags: [input, touch, gesture, tap, swipe, mobile, pointer, accessibility, ui]
+  labels:
+    domain: ui
+
+spec:
+  version: "1.0.0"
+  license: MIT
+  components:
+    - type: prompt
+      name: input-assistant
+      content: |
+        You are an input assistant for an AIMEAT app. The user's node is at {{node_url}}.
+
+        aimeat-input is GESTURES ON AN ELEMENT. Reach for it when a control has to answer a finger
+        as well as a mouse: a card that opens on tap, a row that archives on swipe, a canvas that
+        drags, a game that needs a thumbstick. For a movable surface with its own camera (pan, zoom,
+        pinch over arbitrary content) use aimeat-viewport, which owns that and is designed to
+        compose with this pack through claimFor(). For a graph, a diagram or freehand drawing use
+        aimeat-dag, aimeat-flow or aimeat-canvas, each of which already handles its own pointers.
+
+        Include ONE tag:
+        <script src="{{node_url}}/v1/cortex/aimeat-input/libs/aimeat-input.js"></script>
+
+        START HERE, because it decides most cases correctly on its own:
+
+        AIMEAT.input.tappable(elOrSelector, onActivate, { size?, role?, label?, haptic? })
+
+        Use it for every button, card, tile, chip and list row. It listens for `click`, not for
+        touchstart, and that is deliberate: the browser already turns a tap into a correct click,
+        routes Enter and Space to it, and announces it to a screen reader. What it does not do is
+        remove the 300ms tap delay or the grey iOS flash, so tappable() adds `touch-action:
+        manipulation`, enforces the 44px minimum target through --ai-touch, and gives a plain
+        element the role, tabindex and key handling a real button already has.
+
+        Hand-rolling `addEventListener('touchstart', …)` produces three bugs at once: the handler
+        fires twice (touch then the synthetic click), it triggers while the user is scrolling past,
+        and the control becomes unreachable by keyboard. Reach for tappable() instead.
+
+        WHEN A CLICK IS NOT ENOUGH — a canvas, a map, a row that both taps and swipes:
+
+        const g = AIMEAT.input.on(elOrSelector, {
+          tap(ev, info) {}, doubleTap(ev, info) {}, longPress(ev, info) {},
+          swipe(dir, info) {},                       // 'left' | 'right' | 'up' | 'down'
+          dragStart(ev, info) {}, dragMove(ev, info) {}, dragEnd(ev, info) {},
+        }, {
+          axis: 'x' | 'y' | 'both',                  // default 'both'
+          keyboard: true, slop: 10, longPressMs: 500, doubleTapMs: 300,
+          swipeMinPx: 40, swipeMaxMs: 600, touchAction: 'pan-y', haptic: 'light',
+        })
+        g.update(newHandlers) · g.destroy()
+
+        `info` carries { dx, dy, duration, velocity, pointerType, source }, and `source` is
+        'pointer', 'keyboard' or 'contextmenu' so a handler can tell a flick from an arrow key.
+
+        DECLARE `axis` ON ANYTHING THAT ALSO SCROLLS. The pack sets touch-action from the handlers
+        you registered: swipe with axis 'x' becomes `pan-y`, so the user can still scroll the list
+        vertically while swiping a row sideways. Leaving axis at 'both' takes the element out of
+        scrolling entirely, which is right for a canvas and wrong for a list. This one line is the
+        difference between a swipeable list and a list nobody can scroll.
+
+        EVERY GESTURE HAS A DESKTOP PATH, on by default: arrow keys fire `swipe`, Enter and Space
+        fire `tap`, a right click fires `longPress`. An element that reports taps is given
+        tabindex="0" when it has none, so it can be reached at all. Keep this on unless the app
+        provides its own keyboard route to the same action.
+
+        THE DOUBLE-FIRE IS ALREADY HANDLED: once a gesture consumes an interaction, the synthetic
+        click that follows a tap is swallowed for 400ms, so a handler runs once.
+
+        A GAME PAD, for a game that needs continuous direction:
+
+        const stick = AIMEAT.input.pad(hostElOrSelector, {
+          mode: 'stick' | 'dpad', floating: true, deadZone: 0.12, keyboard: true,
+          onChange({ x, y, angle, distance, active, source }) {},
+        })
+        stick.value()   // read this from the game loop; WASD and the arrows drive the same vector
+
+        The host needs a SIZE. The pad renders two unpainted elements (.ai-pad-base, .ai-pad-stick)
+        and positions them; how they LOOK is the app's own CSS, the same way a skin for aimeat-game
+        is written through --ag-* variables alone. Geometry comes from --ai-pad-size and
+        --ai-pad-stick.
+
+        WITH aimeat-viewport, when the app has both a camera and draggable children:
+          onClaimPointer: (ev) => {
+            const card = ev.target.closest('[data-card]');
+            return card ? AIMEAT.input.claimFor({ onMove: (dx, dy) => nudge(card, dx, dy) }) : null;
+          }
+        The viewport keeps pan, zoom and pinch; this pack says what a gesture on a child means.
+
+        ALSO: AIMEAT.input.haptic('light'|'medium'|'heavy'|'success'|'warning') buzzes where the
+        device allows it and is silent everywhere else, so it is safe to call unconditionally — make
+        it a reinforcement of feedback that is already on screen, never the only feedback.
+        AIMEAT.input.isCoarse() and .hasHover() report the device, and they are for CHOOSING a
+        layout. Both inputs stay supported whatever they return: a laptop with a touchscreen answers
+        true to both.
+      variables:
+        - "{{node_url}}"
+
+    - type: lib
+      name: aimeat-input
+      filename: aimeat-input.js
+      exports:
+        - on
+        - tappable
+        - haptic
+        - pad
+        - claimFor
+        - isCoarse
+        - hasHover
+        - injectCss
+      api_surface: |
+        AIMEAT.input.tappable(elOrSelector, onActivate, { size?, role?, label?, haptic? })
+          -> { destroy() }
+          The default choice for buttons, cards, tiles and rows. Built on `click`, so a tap, a
+          mouse and Enter/Space all arrive the same way and a screen reader announces the control.
+          Adds touch-action: manipulation (no 300ms delay), removes the iOS grey flash, enforces the
+          44px minimum target via --ai-touch, and gives a non-native element role + tabindex.
+
+        AIMEAT.input.on(elOrSelector, { tap, doubleTap, longPress, swipe, dragStart, dragMove,
+          dragEnd }, { axis?, keyboard?, slop?, longPressMs?, doubleTapMs?, swipeMinPx?,
+          swipeMaxMs?, touchAction?, haptic? })
+          -> { el, update(handlers), destroy() }
+          Pointer Events only, one gesture per element, a second finger never corrupts one in
+          flight, and pointercancel ends a drag cleanly. touch-action is derived from the handlers
+          registered: drag -> none, swipe axis 'x' -> pan-y, axis 'y' -> pan-x, tap only ->
+          manipulation. Handlers receive info { dx, dy, duration, velocity, pointerType, source }.
+
+        AIMEAT.input.pad(hostElOrSelector, { mode?, floating?, deadZone?, keyboard?, onChange? })
+          -> { host, value(), destroy() }
+          Virtual thumbstick or 8-way dpad, with WASD and the arrow keys driving the same normalized
+          vector on a desktop. Renders unpainted geometry only; the app skins it.
+
+        AIMEAT.input.claimFor({ onMove, onEnd }) -> a drag handle for aimeat-viewport's
+          onClaimPointer delegate, so the camera and the gestures never fight for one pointer.
+
+        AIMEAT.input.haptic(kind) -> boolean · isCoarse() · hasHover() · injectCss()
+
+        Keyboard equivalence is ON by default: arrows fire swipe, Enter/Space fire tap, a right
+        click fires longPress. The synthetic click following a consumed gesture is suppressed for
+        400ms, so a handler runs once.
+
+        Zero dependencies. Structural CSS only (touch-action, target size, pad geometry) — the app
+        owns every colour, radius and shadow. Idempotent namespace guard.

package/dist/public/css/views/agents-detail.css

@@ -4,6 +4,8 @@
  *   Uses agd- prefix to avoid collisions with other profile styles.
  *   All colors use CSS variables from theme.css.
  * @version-history
+ *   v1.21.0 -- 2026-08-13 -- The card-footer host link truncates instead of wrapping: a hostname is
+ *     one unbreakable token, and wrapping it took the footer row from 31px to 54px at 390px.
  *   v1.20.0 -- 2026-07-17 -- Generalize the card scheme: .pf-agd-card (standalone or
  *     grid child) + .pf-agd-card-grid/--full replace the integration-only
  *     .pf-agd-prod-grid; quality section titles drop the stacked-layout margin-top.
@@ -3187,6 +3189,15 @@
   display: flex;
   gap: 0.5rem;
 }
+/* The link through to the agent's host carries a hostname, which can be long and is one
+   unbreakable token. Left to wrap it doubled the footer row on a phone (31px → 54px measured at
+   390px), so it stays on one line and truncates; the full address is in the title. */
+.pf .pf-agd-card-actions a {
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 /* ── Input wrapper for autocomplete ── */
 .pf .pf-agd-input-wrap {

package/dist/public/js/utils.js

@@ -8,12 +8,14 @@ import { swallowed } from '/js/swallowed.js';
  * @structure
  *   - escHtml/escAttr/decodeEntities: XSS-safe escaping + reversal of double-escaped names
  *   - timeAgo/formatBytes: human-readable time and size formatting
- *   - detectLocale/persistLocale: en/fi preference via URL → localStorage → cookie → navigator
+ *   - LOCALES/detectLocale/persistLocale: language preference via URL → localStorage → cookie → navigator
  *   - sanitizeHtml: strip to a safe tag/attribute whitelist
  *   - copyToClipboard/generateStars/handleImgError: clipboard, background stars, image error placeholder
  *
  * @version-history
  *   v1.0.0 — 2026-07-13 — Header added; file pre-dates header standard
+ *   v1.1.0 — 2026-08-12 — Spanish added. detectLocale reads the LOCALES list instead of naming two
+ *     languages in four places.
  */
 
 /** Micros per whole currency unit — money amounts are 6-decimal micro-units (matches USDC/x402). */
@@ -107,24 +109,27 @@ export async function copyToClipboard(text) {
   }
 }
 
+/** The languages this node ships UI text in. Mirrors LOCALES in src/i18n.ts. */
+export const LOCALES = ['en', 'fi', 'es'];
+
 /** Detect user's preferred locale from URL → localStorage → cookie → navigator. */
 export function detectLocale() {
   // 1. URL parameter
   const params = new URLSearchParams(window.location.search);
   const langParam = params.get('lang');
-  if (langParam === 'en' || langParam === 'fi') return langParam;
+  if (LOCALES.includes(langParam)) return langParam;
 
   // 2. localStorage
   const stored = localStorage.getItem('aimeat-lang');
-  if (stored === 'en' || stored === 'fi') return stored;
+  if (LOCALES.includes(stored)) return stored;
 
   // 3. Cookie
-  const match = document.cookie.match(/(?:^|;\s*)aimeat-lang=(en|fi)(?:;|$)/);
-  if (match) return match[1];
+  const match = document.cookie.match(/(?:^|;\s*)aimeat-lang=([a-z]{2})(?:;|$)/);
+  if (match && LOCALES.includes(match[1])) return match[1];
 
-  // 4. Browser language
+  // 4. Browser language. 'es-CO' and 'es-419' both answer 'es'.
   const nav = (navigator.language || '').split('-')[0].toLowerCase();
-  if (nav === 'fi') return 'fi';
+  if (LOCALES.includes(nav)) return nav;
 
   return 'en';
 }

package/dist/public/spa.html

@@ -352,6 +352,7 @@
     import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
     import htm from 'htm';
     import { loadTranslations, t, getLocale, switchLocale, onLocaleChange } from '/js/i18n.js';
+    import { LOCALES } from '/js/utils.js';
     import { initThemeSystem } from '/js/theme.js';
     import { siteLink } from '/js/site.js';
     import { NotificationBell, openNotificationLink } from '/components/NotificationBell.js';
@@ -818,8 +819,10 @@
                 `}
               `}
               <div class="topnav-center">
-                <button class="lang-btn ${locale === 'en' ? 'active' : ''}" onClick=${() => handleLangSwitch('en')}>EN</button>
-                <button class="lang-btn ${locale === 'fi' ? 'active' : ''}" onClick=${() => handleLangSwitch('fi')}>FI</button>
+                ${LOCALES.map((l) => html`
+                  <button class="lang-btn ${locale === l ? 'active' : ''}"
+                    onClick=${() => handleLangSwitch(l)}>${l.toUpperCase()}</button>
+                `)}
               </div>
             </div>
             ${session && html`<${OpenItemsButton} t=${t} onNavigate=${(p) => navigate(p)} />`}