@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/XYPadUI.tsx

@@ -0,0 +1,274 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fullscreen } from "lucide-react";
+import MenuIcon from "hkp-frontend/src/ui-components/MenuIcon";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import Button from "hkp-frontend/src/ui-components/Button";
+
+const THUMB_RADIUS = 18;
+const INITIAL_WIDTH = 320;
+const INITIAL_HEIGHT = 200;
+
+export default function XYPadUI(props: ServiceUIProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // Normalized thumb position [0, 1] — stored in a ref to avoid React re-renders on move.
+  const thumbRef = useRef({ x: 0.5, y: 0.5 });
+  const gridRef = useRef({ rows: 0, cols: 0 });
+  // Keep a stable ref to the current service so pointer event handlers never go stale.
+  const serviceRef = useRef(props.service);
+  serviceRef.current = props.service;
+
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [gridRows, setGridRows] = useState(0);
+  const [gridCols, setGridCols] = useState(0);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    const dpr = window.devicePixelRatio || 1;
+    const w = canvas.width / dpr;
+    const h = canvas.height / dpr;
+
+    ctx.clearRect(0, 0, w, h);
+
+    const tx = thumbRef.current.x * w;
+    const ty = thumbRef.current.y * h;
+
+    // Crosshairs from thumb to all four edges
+    ctx.save();
+    ctx.strokeStyle = "rgba(99, 102, 241, 0.18)";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(tx, 0);   ctx.lineTo(tx, ty - THUMB_RADIUS);
+    ctx.moveTo(tx, ty + THUMB_RADIUS); ctx.lineTo(tx, h);
+    ctx.moveTo(0, ty);   ctx.lineTo(tx - THUMB_RADIUS, ty);
+    ctx.moveTo(tx + THUMB_RADIUS, ty); ctx.lineTo(w, ty);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+
+    // Grid lines
+    const { rows, cols } = gridRef.current;
+    if (rows > 0 || cols > 0) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(150, 150, 160, 0.25)";
+      ctx.lineWidth = 0.5;
+      for (let i = 1; i < rows; i++) {
+        const ly = (i / rows) * h;
+        ctx.beginPath();
+        ctx.moveTo(0, ly);
+        ctx.lineTo(w, ly);
+        ctx.stroke();
+      }
+      for (let i = 1; i < cols; i++) {
+        const lx = (i / cols) * w;
+        ctx.beginPath();
+        ctx.moveTo(lx, 0);
+        ctx.lineTo(lx, h);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    // Thumb — drop shadow
+    ctx.save();
+    ctx.shadowColor = "rgba(99, 102, 241, 0.25)";
+    ctx.shadowBlur = 14;
+    ctx.shadowOffsetY = 3;
+    ctx.beginPath();
+    ctx.arc(tx, ty, THUMB_RADIUS, 0, Math.PI * 2);
+    // Radial gradient: bright highlight offset toward top-left
+    const grad = ctx.createRadialGradient(
+      tx - THUMB_RADIUS * 0.3, ty - THUMB_RADIUS * 0.3, THUMB_RADIUS * 0.1,
+      tx, ty, THUMB_RADIUS,
+    );
+    grad.addColorStop(0, "#ffffff");
+    grad.addColorStop(1, "#eeeef6");
+    ctx.fillStyle = grad;
+    ctx.fill();
+    ctx.restore();
+
+    // Thumb — border ring
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(tx, ty, THUMB_RADIUS, 0, Math.PI * 2);
+    ctx.strokeStyle = "rgba(99, 102, 241, 0.35)";
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.restore();
+
+    // Thumb — center dot
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(tx, ty, 3.5, 0, Math.PI * 2);
+    ctx.fillStyle = "rgba(79, 70, 229, 0.85)";
+    ctx.fill();
+    ctx.restore();
+  }, []);
+
+  // Sync canvas pixel buffer with its display size (handles retina and resize).
+  const syncSize = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.scale(dpr, dpr);
+    }
+    draw();
+  }, [draw]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+
+    const ro = new ResizeObserver(syncSize);
+    ro.observe(canvas);
+    syncSize();
+
+    const getPos = (e: PointerEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      return {
+        x: Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)),
+        y: Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height)),
+      };
+    };
+
+    const emit = (pos: { x: number; y: number }, eventType: string) => {
+      const { rows, cols } = gridRef.current;
+      const position: any = { x: pos.x, y: pos.y };
+      if (rows > 0) {
+        position.row = Math.floor(pos.y * rows);
+      }
+      if (cols > 0) {
+        position.column = Math.floor(pos.x * cols);
+      }
+      serviceRef.current.configure({ position, eventType });
+    };
+
+    const onPointerMove = (e: PointerEvent) => {
+      const pos = getPos(e);
+      thumbRef.current = pos;
+      draw();
+      emit(pos, "move");
+    };
+
+    const onPointerUp = (e: PointerEvent) => {
+      canvas.releasePointerCapture(e.pointerId);
+      canvas.removeEventListener("pointermove", onPointerMove);
+      canvas.removeEventListener("pointerup", onPointerUp);
+      emit(getPos(e), "stop");
+    };
+
+    const onPointerDown = (e: PointerEvent) => {
+      e.preventDefault();
+      canvas.setPointerCapture(e.pointerId);
+      canvas.addEventListener("pointermove", onPointerMove);
+      canvas.addEventListener("pointerup", onPointerUp);
+      const pos = getPos(e);
+      thumbRef.current = pos;
+      draw();
+      emit(pos, "start");
+    };
+
+    canvas.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      ro.disconnect();
+      canvas.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [draw, syncSize]);
+
+  // Sync grid ref and redraw when service notifies a grid change.
+  useEffect(() => {
+    gridRef.current = { rows: gridRows, cols: gridCols };
+    draw();
+  }, [gridRows, gridCols, draw]);
+
+  const onNotification = (notification: any) => {
+    if (notification?.gridRows !== undefined) {
+      setGridRows(notification.gridRows);
+    }
+    if (notification?.gridCols !== undefined) {
+      setGridCols(notification.gridCols);
+    }
+  };
+
+  const onInit = (state: any) => {
+    if (state?.gridRows !== undefined) {
+      setGridRows(state.gridRows);
+    }
+    if (state?.gridCols !== undefined) {
+      setGridCols(state.gridCols);
+    }
+  };
+
+  const customMenuEntries = [
+    {
+      name: "Fullscreen",
+      icon: <MenuIcon icon={Fullscreen} />,
+      disabled: isFullscreen,
+      onClick: () => setIsFullscreen(true),
+    },
+  ];
+
+  const canvasEl = (
+    <canvas
+      ref={canvasRef}
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "block",
+        touchAction: "none",
+        cursor: "crosshair",
+      }}
+    />
+  );
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      customMenuEntries={customMenuEntries}
+      initialSize={{ width: INITIAL_WIDTH, height: INITIAL_HEIGHT }}
+    >
+      {isFullscreen ? (
+        <div
+          style={{
+            position: "fixed",
+            inset: 0,
+            background: "white",
+            zIndex: 1000,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <Button
+            className="hkp-svc-btn absolute top-0 right-0 z-[1001]"
+            onClick={() => setIsFullscreen(false)}
+          >
+            ✕
+          </Button>
+          <div style={{ flex: 1 }}>{canvasEl}</div>
+        </div>
+      ) : (
+        canvasEl
+      )}
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/audio/audioHelper.ts

@@ -0,0 +1,36 @@
+import { toArrayBuffer } from "../helpers";
+
+export function toAudioBuffer(
+  blobOrFile: Blob | File,
+  audioCtx: AudioContext | null = null
+): Promise<AudioBuffer> {
+  return new Promise(async (resolve, reject) => {
+    if (!audioCtx) {
+      const AudioContextClass =
+        window.AudioContext || (window as any).webkitAudioContext;
+      audioCtx = new AudioContextClass();
+    }
+    const ab = await toArrayBuffer(blobOrFile);
+    (audioCtx as AudioContext).decodeAudioData(ab, resolve, reject);
+  });
+}
+
+export function decodeBuffer(
+  audioCtx: AudioContext,
+  data: ArrayBuffer
+): Promise<AudioBuffer> {
+  return new Promise((resolve, reject) => {
+    audioCtx.decodeAudioData(data, resolve, reject);
+  });
+}
+
+export function combineChannels(audioBuffer: AudioBuffer): Float32Array {
+  const left = audioBuffer.getChannelData(0);
+  const right = audioBuffer.getChannelData(1);
+  const len = left.length;
+  for (let i = 0; i < len; ++i) {
+    left[i] += right[i];
+    left[i] /= 2;
+  }
+  return left;
+}

package/bundle/hkp-frontend/src/runtime/browser/services/base/Batcher.ts

@@ -0,0 +1,76 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+
+const serviceId = "hookup.to/shared/batcher";
+const serviceName = "Batcher";
+
+function getTimestamp(): number {
+  return new Date().getTime();
+}
+
+class Batcher {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+
+  lastProcess: number | undefined;
+  batch: any[];
+  minDelayInMsec: number;
+  timer: ReturnType<typeof setTimeout> | undefined;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    _descriptor: ServiceClass,
+    id: string
+  ) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+
+    this.lastProcess = undefined;
+    this.batch = [];
+    this.minDelayInMsec = 1000;
+  }
+
+  configure(config: any): void {
+    const { minDelayInMsec } = config;
+    if (minDelayInMsec !== undefined) {
+      this.minDelayInMsec = minDelayInMsec;
+    }
+  }
+
+  process(params: any): null {
+    if (params) {
+      this.batch.push(params);
+    }
+    this.scheduleProcess();
+    return null; // stop the chain
+  }
+
+  scheduleProcess(): void {
+    if (this.timer) {
+      return; // timer already scheduled
+    }
+
+    let delay = this.minDelayInMsec;
+    if (this.lastProcess === undefined) {
+      delay = 0;
+    } else {
+      const diff = this.minDelayInMsec - (getTimestamp() - this.lastProcess);
+      delay = diff < 0 ? 0 : diff;
+    }
+
+    this.timer = setTimeout(this.sendBatch.bind(this), delay);
+  }
+
+  sendBatch(): void {
+    this.app.next(this, this.batch), (this.batch = []);
+    this.timer = undefined;
+  }
+}
+
+export default {
+  serviceName,
+  serviceId,
+  service: Batcher,
+};

package/bundle/hkp-frontend/src/runtime/browser/services/base/Buffer.ts

@@ -0,0 +1,142 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import { needsUpdate } from "hkp-frontend/src/ui-components/service/ServiceUI";
+
+/**
+ * Service Documentation
+ * Service ID: hookup.to/service/buffer
+ * Service Name: Buffer
+ * Modes: capacity flush | interval flush | accumulatedOutput
+ * Key Config: capacity, interval, accumulatedOutput, action=clear
+ * Input: any
+ * Output: buffered array slice/full buffer/null depending on configuration and timing
+ * Arrays: concatenates input arrays into internal buffer
+ * Binary: can carry binary payloads as opaque values
+ * MixedData: not native in browser runtime
+ */
+
+const serviceId = "hookup.to/service/buffer";
+const serviceName = "Buffer";
+
+class Buffer {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+  buffer: Array<any>;
+  capacity: number;
+  interval: number;
+  accumulatedOutput: boolean;
+
+  _timer: NodeJS.Timeout | undefined;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    _descriptor: ServiceClass,
+    id: string,
+  ) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+
+    this.buffer = [];
+    this.capacity = 100;
+    this.interval = -1;
+    this.accumulatedOutput = false;
+  }
+
+  destroy = () => {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = undefined;
+    }
+  };
+
+  configure(config: any) {
+    const { capacity, action, command, interval, accumulatedOutput } = config;
+
+    if (capacity !== undefined) {
+      this.capacity = capacity;
+      this.app.notify(this, { capacity });
+    }
+
+    if (action === "clear") {
+      this.buffer = [];
+      this.app.notify(this, { buffer: this.buffer });
+    }
+
+    if (command !== undefined) {
+      if (command.action === "inject") {
+        this.app.next(this, command.params);
+      }
+    }
+
+    if (needsUpdate(interval, this.interval)) {
+      this.interval = interval;
+      this.app.notify(this, { interval });
+      this.scheduleNextTimer();
+    }
+
+    if (needsUpdate(accumulatedOutput, this.accumulatedOutput)) {
+      this.accumulatedOutput = accumulatedOutput;
+      this.app.notify(this, { accumulatedOutput });
+    }
+  }
+
+  clearTimer = () => {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = undefined;
+    }
+  };
+
+  scheduleNextTimer = () => {
+    this.clearTimer();
+    if (this.interval > 0) {
+      this._timer = setTimeout(this.onTimeout, this.interval * 1000); // interval is in sec -> convert to msec
+    }
+  };
+
+  onTimeout = () => {
+    this._timer = undefined; // reset this callback
+    if (this.buffer.length > 0) {
+      this.app.next(this, this.buffer);
+      this.buffer = [];
+    }
+    this.scheduleNextTimer();
+  };
+
+  reduceBuffer = () => {
+    const agg = this.buffer.slice(0, this.capacity);
+    this.buffer = this.buffer.slice(this.capacity);
+    return agg;
+  };
+
+  process(params: any) {
+    if (this.capacity === 0 && this.interval <= 0) {
+      console.warn("Buffer misconfigured, stop propagation");
+      return null;
+    }
+
+    this.buffer = this.buffer.concat(params);
+    if (this.buffer.length > this.capacity && this.capacity > 0) {
+      const processedSlice = this.reduceBuffer();
+      this.app.notify(this, { buffer: this.buffer });
+      this.scheduleNextTimer(); // cancel and reschedule if needed
+      return processedSlice;
+    }
+
+    this.app.notify(this, { buffer: this.buffer });
+    if (this.accumulatedOutput) {
+      return this.buffer;
+    }
+
+    return null;
+  }
+}
+
+export default {
+  serviceName,
+  serviceId,
+  service: Buffer,
+  Buffer,
+};

package/bundle/hkp-frontend/src/runtime/browser/services/base/Filter.ts

@@ -0,0 +1,125 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import {
+  parseExpression,
+  evalExpression,
+  Expression,
+  SyntaxError,
+} from "./eval";
+
+/**
+ * Service Documentation
+ * Service ID: hookup.to/service/filter
+ * Service Name: Filter
+ * Modes: aggregator and | or
+ * Key Config: conditions, aggregator
+ * Input: object | array
+ * Output: input when predicate passes, null when filtered out
+ * Arrays: filters entries and returns filtered array (or null if empty)
+ * Binary: not intended
+ * MixedData: not native in browser runtime
+ */
+
+const serviceId = "hookup.to/service/filter";
+const serviceName = "Filter";
+
+/** Filter accepts one condition or a list on input, but stores one shape. */
+export function normalizeFilterConditions(value: unknown): string[] {
+  if (typeof value === "string") return [value];
+  if (Array.isArray(value))
+    return value.filter((condition): condition is string =>
+      typeof condition === "string",
+    );
+  return [];
+}
+
+class Filter {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+
+  aggregator: string;
+  _parsedConditions: Array<Expression | SyntaxError>;
+  conditions: string[];
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    _descriptor: ServiceClass,
+    id: string,
+  ) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+
+    this.aggregator = "and";
+    this._parsedConditions = [];
+    this.conditions = [];
+  }
+
+  parseConditions(conditions: unknown): string[] {
+    const arr = normalizeFilterConditions(conditions);
+    this._parsedConditions = arr.map((cond) => parseExpression(cond));
+    return arr;
+  }
+
+  configure(config: any): void {
+    const { conditions, aggregator } = config;
+
+    if (conditions !== undefined) {
+      const arr = this.parseConditions(conditions);
+      this.conditions = arr;
+      this.app.notify(this, { conditions: arr });
+    }
+
+    if (aggregator !== undefined) {
+      this.aggregator = aggregator;
+      this.app.notify(this, { aggregator });
+    }
+  }
+
+  async process(params: any): Promise<any> {
+    const predicate = async (x: any): Promise<any> => {
+      // no conditions defined - gate everything
+      if (this._parsedConditions.length === 0 || !x) {
+        return false;
+      }
+
+      const results = await Promise.all(
+        this._parsedConditions.map(async (pc) =>
+          evalExpression(pc, { params: x }, this.app, this),
+        ),
+      );
+
+      // if only one condition, return its result directly
+      if (this._parsedConditions.length === 1) {
+        return results[0];
+      }
+
+      // otherwise aggregate results from multiple conditions
+      switch (this.aggregator) {
+        case "and":
+          return results.some((r) => !r);
+        case "or":
+          return results.some((r) => !!r);
+        default:
+          console.log(`Unknown filter aggregator: ${this.aggregator}`);
+          return false;
+      }
+    };
+
+    if (Array.isArray(params)) {
+      const results = await Promise.all(params.map(predicate));
+      const filtered = params.filter((_r, idx) => !!results[idx]);
+      return filtered.length === 0 ? null : filtered;
+    }
+
+    return (await predicate(params)) ? params : null;
+  }
+}
+
+export default {
+  serviceName,
+  serviceId,
+  service: Filter,
+  Filter,
+};