@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/CanvasUI/tests/canvasUtils.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+  toAbsolute,
+  applyTextTransform,
+  maxArrayElem,
+  minArrayElem,
+} from "../canvasUtils";
+
+describe("toAbsolute", () => {
+  it("converts a percentage string to an absolute value", () => {
+    expect(toAbsolute("50%", 200)).toBe(100);
+  });
+
+  it("handles 100% with upper 400", () => {
+    expect(toAbsolute("100%", 400)).toBe(400);
+  });
+
+  it("converts a numeric string to a number", () => {
+    expect(toAbsolute("150", 999)).toBe(150);
+  });
+
+  it("returns a plain number as-is", () => {
+    expect(toAbsolute(42, 999)).toBe(42);
+  });
+
+  it("returns 0 when value is undefined", () => {
+    expect(toAbsolute(undefined, 200)).toBe(0);
+  });
+
+  it("returns 0 when upper is 0 and value is a percentage", () => {
+    expect(toAbsolute("50%", 0)).toBe(0);
+  });
+});
+
+describe("applyTextTransform", () => {
+  it("lowercases input for 'lowercase' operation", () => {
+    expect(applyTextTransform("Hello World", "lowercase")).toBe("hello world");
+  });
+
+  it("uppercases input for 'uppercase' operation", () => {
+    expect(applyTextTransform("Hello World", "uppercase")).toBe("HELLO WORLD");
+  });
+
+  it("lowercases and joins with spaces for 'lowercase-spacing-1'", () => {
+    expect(applyTextTransform("AB", "lowercase-spacing-1")).toBe("a b");
+  });
+
+  it("uppercases and joins with spaces for 'uppercase-spacing-1'", () => {
+    expect(applyTextTransform("ab", "uppercase-spacing-1")).toBe("A B");
+  });
+
+  it("returns input unchanged for unknown operation and emits console.warn", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const result = applyTextTransform("Hello", "unknown-op");
+    expect(result).toBe("Hello");
+    expect(warnSpy).toHaveBeenCalledWith(
+      "Unknown transform operation: unknown-op",
+    );
+    warnSpy.mockRestore();
+  });
+});
+
+describe("maxArrayElem", () => {
+  it("returns the maximum element from a positive number array", () => {
+    expect(maxArrayElem([1, 5, 3])).toBe(5);
+  });
+
+  it("returns the maximum element from a negative number array", () => {
+    expect(maxArrayElem([-3, -1, -2])).toBe(-1);
+  });
+
+  it("returns the single element when array has one item", () => {
+    expect(maxArrayElem([42])).toBe(42);
+  });
+});
+
+describe("minArrayElem", () => {
+  it("returns the minimum element from a positive number array", () => {
+    expect(minArrayElem([1, 5, 3])).toBe(1);
+  });
+
+  it("returns the minimum element from a negative number array", () => {
+    expect(minArrayElem([-3, -1, -2])).toBe(-3);
+  });
+
+  it("returns the single element when array has one item", () => {
+    expect(minArrayElem([7])).toBe(7);
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/CanvasUI/tests/fullscreen.test.tsx

@@ -0,0 +1,26 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import CanvasUI from "../index";
+import { ServiceUIProps } from "../../../../../types";
+
+vi.mock("../../../../../ui-components/service/ServiceUI", () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+afterEach(cleanup);
+
+describe("Canvas fullscreen", () => {
+  it("renders outside a zoomed runtime", () => {
+    const service = { fullscreen: true } as ServiceUIProps["service"];
+    const { container } = render(
+      <div style={{ zoom: "50%" }}>
+        <CanvasUI service={service} />
+      </div>,
+    );
+
+    const canvas = document.body.querySelector("canvas")!;
+    expect(canvas.parentElement).toBe(document.body);
+    expect(container.contains(canvas)).toBe(false);
+  });
+});

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

@@ -0,0 +1,201 @@
+/**
+ * Service Documentation
+ * Service ID: hookup.to/service/changes
+ * Service Name: Changes
+ * Modes: emit change | rise | fall
+ * Key Config: value (expression over params; empty watches the whole input), emit
+ * IO: in=any -> out=the same input when the watched value changed, else null
+ */
+
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import ChangesUI from "./ChangesUI";
+import { EMIT_MODES, EmitMode } from "./changes-modes";
+import {
+  evalExpression,
+  Expression,
+  parseExpression,
+  SyntaxError,
+} from "./base/eval";
+
+const serviceId = "hookup.to/service/changes";
+const serviceName = "Changes";
+
+type State = {
+  /** An expression over `params`; empty watches the input itself. */
+  value: string;
+  emit: EmitMode;
+};
+
+/**
+ * Whether JSON has nothing to say about an object: one that is not plain data
+ * and has no fields of its own to write — a Blob, an ArrayBuffer, an ImageData.
+ * All of these serialise to `{}`, whatever they hold.
+ */
+function isOpaque(value: object): boolean {
+  if (Array.isArray(value) || ArrayBuffer.isView(value)) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  if (prototype === Object.prototype || prototype === null) {
+    return false;
+  }
+  return Object.keys(value).length === 0;
+}
+
+const opaqueIds = new WeakMap<object, number>();
+let nextOpaqueId = 0;
+
+/** Writes an opaque object as a token of its own, so it equals only itself. */
+function distinguishOpaque(_key: string, value: unknown): unknown {
+  if (typeof value !== "object" || !value || !isOpaque(value)) {
+    return value;
+  }
+  let id = opaqueIds.get(value);
+  if (id === undefined) {
+    id = nextOpaqueId++;
+    opaqueIds.set(value, id);
+  }
+  return `\u0000opaque:${id}`;
+}
+
+/**
+ * What an object says, as text the next value's is compared with — taken when
+ * the value arrives, so an object changed afterwards by whoever made it is
+ * still compared with what it said then. `undefined` for what has no such
+ * text: anything but an object, and an object that cannot be written.
+ */
+function fingerprint(value: unknown): string | undefined {
+  if (typeof value !== "object" || !value) {
+    return undefined;
+  }
+  try {
+    return JSON.stringify(value, distinguishOpaque);
+  } catch {
+    return undefined;
+  }
+}
+
+type Remembered = { value: unknown; print: string | undefined };
+
+/**
+ * Values compared by what they say, so an object rebuilt each time is not a
+ * change, and one reused with other content is. What cannot be read this way
+ * (see `isOpaque`) is compared by identity instead, on its own or inside
+ * another value: a new one is a change.
+ */
+function same(a: Remembered, b: Remembered): boolean {
+  if (a.print !== undefined || b.print !== undefined) {
+    return a.print === b.print;
+  }
+  return Object.is(a.value, b.value);
+}
+
+/**
+ * Lets an input through only when what it watches has changed since the last
+ * input — the step that turns a stream of reports ("a face is there", every
+ * frame) into events ("a face appeared").
+ *
+ * The remembered value is live state, like a Timer's `running`: it is not
+ * saved with the board, so a board opened again starts from nothing seen.
+ * Before the first input the remembered value is `undefined`, which is falsy:
+ * a first value that is truthy is a rise, and any first value is a change.
+ */
+class Changes extends ServiceBase<State> {
+  __remembered: unknown = undefined;
+  __rememberedPrint: string | undefined = undefined;
+  __seen = false;
+  __expression: Expression | SyntaxError | null = null;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    super(app, board, descriptor, id, { value: "", emit: "change" });
+  }
+
+  /** What the panel shows as remembered; `seen` false while nothing has arrived. */
+  get remembered(): { seen: boolean; value: unknown } {
+    return { seen: this.__seen, value: this.__remembered };
+  }
+
+  configure(config: Partial<State> & { reset?: boolean }) {
+    if (config.value !== undefined && config.value !== this.state.value) {
+      this.state.value = config.value;
+      this.__expression = config.value.trim() ? parseExpression(config.value) : null;
+      if (this.__expression === "syntax-error") {
+        this.pushErrorNotification(`Changes: cannot read "${config.value}"`);
+      }
+      // What was remembered was a value of the old expression.
+      this.forget();
+      this.app.notify(this, { value: config.value });
+    }
+    if (config.emit !== undefined && EMIT_MODES.includes(config.emit)) {
+      this.state.emit = config.emit;
+      this.app.notify(this, { emit: config.emit });
+    }
+    if (config.reset) {
+      this.forget();
+    }
+  }
+
+  private forget() {
+    this.__remembered = undefined;
+    this.__rememberedPrint = undefined;
+    this.__seen = false;
+    this.app.notify(this, { remembered: this.remembered });
+  }
+
+  async process(params: any): Promise<any> {
+    if (params === undefined) {
+      return null;
+    }
+    let current: unknown = params;
+    if (this.__expression === "syntax-error") {
+      return null;
+    }
+    if (this.__expression) {
+      try {
+        current = await evalExpression(this.__expression, { params }, this.app, this);
+      } catch (err: any) {
+        this.pushErrorNotification(`Changes: ${err?.message ?? err}`);
+        return null;
+      }
+    }
+
+    const previous = this.__remembered;
+    const print = fingerprint(current);
+    const changed =
+      !this.__seen ||
+      !same({ value: previous, print: this.__rememberedPrint }, { value: current, print });
+    this.__remembered = current;
+    this.__rememberedPrint = print;
+    this.__seen = true;
+    if (changed) {
+      this.app.notify(this, { remembered: this.remembered });
+    }
+
+    switch (this.state.emit) {
+      case "rise":
+        return !previous && !!current ? params : null;
+      case "fall":
+        return !!previous && !current ? params : null;
+      default:
+        return changed ? params : null;
+    }
+  }
+}
+
+export default {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new Changes(app, board, descriptor, id),
+  createUI: ChangesUI,
+};

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

@@ -0,0 +1,85 @@
+import { useState } from "react";
+
+import InputField from "hkp-frontend/src/components/shared/InputField";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import PillRadioGroup from "hkp-frontend/src/ui-components/PillRadioGroup";
+import GroupLabel from "hkp-frontend/src/ui-components/GroupLabel";
+import Button from "hkp-frontend/src/ui-components/Button";
+import { EMIT_LABELS, EmitMode } from "./changes-modes";
+
+type Remembered = { seen: boolean; value: unknown };
+
+function describe(remembered: Remembered): string {
+  if (!remembered.seen) {
+    return "nothing yet";
+  }
+  const { value } = remembered;
+  if (value === undefined) {
+    return "undefined";
+  }
+  try {
+    const text = JSON.stringify(value);
+    return text.length > 80 ? `${text.slice(0, 77)}…` : text;
+  } catch {
+    return String(value);
+  }
+}
+
+export default function ChangesUI(props: ServiceUIProps) {
+  const { service } = props;
+  const [value, setValue] = useState("");
+  const [emit, setEmit] = useState<EmitMode>("change");
+  // Live state, not configuration: read off the instance, then kept by notifications.
+  const [remembered, setRemembered] = useState<Remembered>(
+    () => (service as any).remembered ?? { seen: false, value: undefined },
+  );
+
+  const update = (state: any) => {
+    if (state.value !== undefined) {
+      setValue(state.value);
+    }
+    if (state.emit !== undefined) {
+      setEmit(state.emit);
+    }
+    if (state.remembered !== undefined) {
+      setRemembered(state.remembered);
+    }
+  };
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={update}
+      onNotification={update}
+      initialSize={{ width: 300, height: undefined }}
+    >
+      <div className="flex flex-col gap-2" style={{ textAlign: "left" }}>
+        <InputField
+          className="font-menu"
+          type="text"
+          label="Watch"
+          value={value}
+          onChange={(next) => service.configure({ value: next })}
+        />
+        <div className="text-xs opacity-60">
+          An expression over <code>params</code>; empty watches the whole input.
+        </div>
+        <PillRadioGroup
+          title="Let through when"
+          options={EMIT_LABELS}
+          value={emit}
+          onChange={(next) => service.configure({ emit: next })}
+        />
+        <GroupLabel>Remembered</GroupLabel>
+        <div className="font-menu text-sm break-all">{describe(remembered)}</div>
+        <Button
+          className="hkp-svc-btn w-full"
+          onClick={() => service.configure({ reset: true })}
+        >
+          Forget
+        </Button>
+      </div>
+    </ServiceUI>
+  );
+}

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

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { generateUUID } from "./helpers";
+
+const serviceId = "hookup.to/service/chunked-file-provider";
+const serviceName = "Chunked File Provider";
+
+const DEFAULT_CHUNK_SIZE = 3 * 1024 * 1024; // 3 MB — stays under typical 4 MB API gateway limits
+
+export type ChunkPayload = {
+  data: ArrayBuffer;
+  filename: string;
+  mimeType: string;
+  chunkIndex: number; // 0-based
+  totalChunks: number;
+  uploadId: string; // unique per file send — used by the server to reassemble
+};
+
+function ChunkedFileProviderUI(props: ServiceUIProps): JSX.Element {
+  const [file, setFile] = useState<File | undefined>(undefined);
+  const [progress, setProgress] = useState<string>("");
+
+  const onNotification = (params: any) => {
+    if (params?.progress !== undefined) {
+      setProgress(params.progress);
+    }
+  };
+
+  return (
+    <ServiceUI {...props} onNotification={onNotification}>
+      <div style={{ margin: 10 }}>
+        <div>
+          <input
+            type="file"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setFile(e.target?.files?.[0] || undefined)
+            }
+          />
+        </div>
+        {progress && (
+          <div style={{ marginTop: 6, fontSize: 12, color: "#666" }}>
+            {progress}
+          </div>
+        )}
+        <div>
+          <button
+            className="hkp-svc-btn"
+            onClick={() => file && (props.service as any).process({ file })}
+            disabled={!file}
+            style={{
+              width: "100%",
+              marginTop: 10,
+              padding: "10px 16px",
+              borderRadius: 8,
+              cursor: file ? "pointer" : "not-allowed",
+              background: file ? "#007aff" : "#ccc",
+              color: "white",
+              border: "none",
+              fontWeight: 600,
+            }}
+          >
+            Process
+          </button>
+        </div>
+      </div>
+    </ServiceUI>
+  );
+}
+
+function appendTimestamp(filename: string): string {
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const ts = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  const dot = filename.lastIndexOf(".");
+  return dot === -1
+    ? `${filename}_${ts}`
+    : `${filename.slice(0, dot)}_${ts}${filename.slice(dot)}`;
+}
+
+class ChunkedFileProvider {
+  uuid: string;
+  board: any;
+  app: any;
+  chunkSize: number;
+  running: boolean;
+
+  constructor(app: any, board: any, _descriptor: any, id: string) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+    this.chunkSize = DEFAULT_CHUNK_SIZE;
+    this.running = false;
+  }
+
+  configure(config: { chunkSize?: number }): void {
+    if (config.chunkSize !== undefined) {
+      this.chunkSize = config.chunkSize;
+    }
+  }
+
+  async process(params: { file?: File }): Promise<null> {
+    const { file } = params;
+
+    if (!file) {
+      console.error(
+        "ChunkedFileProvider: process called without a file",
+        params,
+      );
+      return null;
+    }
+
+    if (this.running) {
+      console.error("ChunkedFileProvider: another upload is in progress");
+      return null;
+    }
+
+    this.running = true;
+    const uploadId = generateUUID();
+    const totalChunks = Math.ceil(file.size / this.chunkSize);
+    const filename = appendTimestamp(file.name);
+
+    const readChunk = (offset: number): void => {
+      if (offset >= file.size) {
+        this.running = false;
+        this.app.notify(this, { progress: "" });
+        return;
+      }
+
+      const chunkIndex = offset / this.chunkSize;
+      this.app.notify(this, {
+        progress: `Chunk ${chunkIndex + 1} / ${totalChunks}`,
+      });
+
+      const blob = file.slice(
+        offset,
+        Math.min(offset + this.chunkSize, file.size),
+      );
+      const reader = new FileReader();
+
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        const data = e.target!.result as ArrayBuffer;
+        const payload: ChunkPayload = {
+          data,
+          filename,
+          mimeType: file.type || "application/octet-stream",
+          chunkIndex,
+          totalChunks,
+          uploadId,
+        };
+        // A chunk stream is a standing arrangement, not one answer to one
+        // call. Each chunk therefore begins a board-originated run.
+        this.app.next(this, payload);
+        readChunk(offset + this.chunkSize);
+      };
+
+      reader.onerror = () => {
+        console.error(
+          "ChunkedFileProvider: FileReader error at offset",
+          offset,
+        );
+        this.running = false;
+      };
+
+      reader.readAsArrayBuffer(blob);
+    };
+
+    readChunk(0);
+    // Return null so the pipeline loop stops here. Each chunk is forwarded
+    // to downstream services via app.next() inside the FileReader callbacks.
+    return null;
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (app: any, board: any, _descriptor: any, id: string) =>
+    new ChunkedFileProvider(app, board, _descriptor, id),
+  createUI: ChunkedFileProviderUI as any,
+};
+
+export default descriptor;