@m4trix/core 0.5.0

package/dist/ui/index.js

@@ -0,0 +1,314 @@
+import { css, LitElement, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { createTimeline } from 'animejs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var AiCursorComponentStyle = css`
+  :host {
+    --ai-local-cursor-size: var(--sk-ai-cursor-size, 1rem);
+    --ai-local-cursor-label-padding: var(
+      --sk-ai-cursor-label-padding,
+      0.25rem 0.25rem
+    );
+    --ai-local-cursor-border-radius: var(--sk-ai-cursor-border-radius, 0.25rem);
+    --ai-local-label-offset: var(--sk-ai-cursor-label-offset, 1rem);
+
+    --ai-local-label-font-size: var(--sk-ai-cursor-label-font-size, 12px);
+    --ai-local-label-font-weight: var(--sk-ai-cursor-label-font-weight, bold);
+    --ai-local-label-color: var(--sk-ai-cursor-label-color, white);
+    --ai-local-label-background-color: var(
+      --sk-ai-cursor-label-background-color,
+      black
+    );
+    --ai-local-label-border-color: var(
+      --sk-ai-cursor-label-border-color,
+      white
+    );
+    --ai-local-label-border-width: var(
+      --sk-ai-cursor-label-border-width,
+      0.1rem
+    );
+
+    color: black;
+    stroke: white;
+    position: absolute;
+    /* Insetting in the parent element (body) */
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+    width: var(--ai-local-cursor-size);
+    height: var(--ai-local-cursor-size);
+  }
+
+  #cursor-graphic-parent {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #label-text {
+    position: absolute;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    padding: var(--ai-local-cursor-label-padding);
+    border-radius: var(--ai-local-cursor-border-radius);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    width: fit-content;
+    min-width: fit-content;
+    top: var(--ai-local-label-offset);
+    left: var(--ai-local-label-offset);
+
+    border: var(--ai-local-label-border-width) solid
+      var(--ai-local-label-border-color);
+    background-color: var(--ai-local-label-background-color);
+    color: var(--ai-local-label-color);
+    font-size: var(--ai-local-label-font-size);
+    font-weight: var(--ai-local-label-font-weight);
+  }
+`;
+
+// src/ui/ai-cursor/rendering/AiCursorComponent.ts
+var AiCursorComponent = class extends LitElement {
+  constructor() {
+    super();
+    this.eventHooks = {
+      defineSetPosition: () => {
+      },
+      defineAddPositionToQueue: () => {
+      },
+      definePlayQueue: () => {
+      },
+      defineSetShowCursor: () => {
+      }
+    };
+    this.isShowingCursor = true;
+    this.labelText = "AI Cursor";
+    this.cursorPosition = [0, 0];
+    this._cursorRef = createRef();
+    this._labelRef = createRef();
+  }
+  updated(_changedProperties) {
+    if (_changedProperties.has("_cursorRef")) {
+      if (this._cursorRef.value) {
+        this.hookUpCallbacks();
+      } else {
+        this._timeline?.pause();
+        this._timeline?.refresh();
+      }
+    }
+    super.updated(_changedProperties);
+  }
+  render() {
+    const cursorSvg = html`
+      <svg
+        width=${24}
+        height=${24}
+        viewBox="0 0 100 100"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_3576_285)">
+          <path
+            class="cursor-path"
+            d="M2.14849 7.04749C1.35153 4.07321 4.07319 1.35155 7.04747 2.14851L77.3148 20.9766C80.2891 21.7735 81.2853 25.4914 79.108 27.6687L27.6687 79.108C25.4914 81.2853 21.7735 80.2891 20.9766 77.3149L2.14849 7.04749Z"
+            fill="currentColor"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3576_285">
+            <rect width="100" height="100" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    `;
+    return html`
+      <span
+        id="cursor-graphic-parent"
+        ${ref(this._cursorRef)}
+        ?hidden=${!this.isShowingCursor}
+      >
+        ${cursorSvg}
+        <span
+          ${ref(this._labelRef)}
+          id="label-text"
+          ?hidden=${!this.isShowingCursor}
+          >${this.labelText}</span
+        >
+      </span>
+    `;
+  }
+  // private methods
+  /**
+   * The primary way to control the cursor is using an external API.
+   * This interface exposes controlling methods. The Lit Component itself is
+   * intended to be a controlled component.
+   */
+  hookUpCallbacks() {
+    const animationTarget = this._cursorRef.value;
+    if (!animationTarget) {
+      return;
+    }
+    this._timeline = createTimeline({ defaults: { duration: 750 } });
+    if (!this._timeline) {
+      return;
+    }
+    this.eventHooks.defineSetPosition((position) => {
+      this._timeline?.add(animationTarget, {
+        translateX: position[0],
+        translateY: position[1],
+        duration: 1
+      });
+      this._timeline?.play();
+    });
+    this.eventHooks.defineAddPositionToQueue((position) => {
+      this._timeline?.add(animationTarget, {
+        translateX: position[0],
+        translateY: position[1],
+        duration: 1e3
+      });
+    });
+    this.eventHooks.defineSetShowCursor((show) => {
+      this.isShowingCursor = show;
+    });
+    this.eventHooks.definePlayQueue(() => {
+      this._timeline?.play();
+    });
+  }
+  // Getters
+  get cursorRef() {
+    return this._cursorRef.value;
+  }
+  get labelRef() {
+    return this._labelRef.value;
+  }
+};
+// Define scoped styles right with your component, in plain CSS
+AiCursorComponent.styles = AiCursorComponentStyle;
+__decorateClass([
+  property({
+    type: Object
+  })
+], AiCursorComponent.prototype, "eventHooks", 2);
+__decorateClass([
+  property({ type: Boolean })
+], AiCursorComponent.prototype, "isShowingCursor", 2);
+__decorateClass([
+  property({ type: String })
+], AiCursorComponent.prototype, "labelText", 2);
+__decorateClass([
+  property({ type: Array })
+], AiCursorComponent.prototype, "cursorPosition", 2);
+__decorateClass([
+  state()
+], AiCursorComponent.prototype, "_cursorRef", 2);
+__decorateClass([
+  state()
+], AiCursorComponent.prototype, "_labelRef", 2);
+AiCursorComponent = __decorateClass([
+  customElement("ai-cursor")
+], AiCursorComponent);
+
+// src/ui/ai-cursor/rendering/index.ts
+var mountAiCursor = (aiCursorProps) => {
+  const root = document.body;
+  const cursor = document.createElement("ai-cursor");
+  cursor.eventHooks = aiCursorProps.eventHooks;
+  root.appendChild(cursor);
+};
+
+// src/ui/ai-cursor/AiCursor.ts
+var AiCursor = class _AiCursor {
+  constructor() {
+  }
+  // Static constructors
+  static spawn() {
+    const newCursor = new _AiCursor();
+    newCursor.mount();
+    return newCursor;
+  }
+  jumpTo(target) {
+    const position = targetToPosition(target);
+    if (position) {
+      this.setPosition?.(position);
+    }
+  }
+  moveTo(target) {
+    const position = targetToPosition(target);
+    if (position) {
+      this.addPositionToQueue?.(position);
+      this.playQueue?.();
+    }
+  }
+  scheduleMoves(targets) {
+    targets.forEach((target) => {
+      const position = targetToPosition(target);
+      if (position) {
+        this.addPositionToQueue?.(position);
+      }
+    });
+    this.playQueue?.();
+  }
+  show() {
+    this.setShowCursor?.(true);
+  }
+  hide() {
+    this.setShowCursor?.(false);
+  }
+  mount() {
+    mountAiCursor({
+      eventHooks: {
+        defineSetPosition: (callback) => {
+          this.setPosition = callback;
+        },
+        defineAddPositionToQueue: (callback) => {
+          this.addPositionToQueue = callback;
+        },
+        definePlayQueue: (callback) => {
+          this.playQueue = callback;
+        },
+        defineSetShowCursor: (callback) => {
+          this.setShowCursor = callback;
+        }
+      }
+    });
+  }
+};
+function calculateClickPositionFromElement(element) {
+  const rect = element.getBoundingClientRect();
+  return [rect.left + rect.width / 2, rect.top + rect.height / 2];
+}
+function targetToPosition(target) {
+  if (Array.isArray(target) && target.length === 2 && typeof target[0] === "number" && typeof target[1] === "number") {
+    return target;
+  } else if (target instanceof HTMLElement) {
+    return calculateClickPositionFromElement(target);
+  } else if (typeof target === "string") {
+    const element = document.querySelector(target);
+    if (element) {
+      return calculateClickPositionFromElement(element);
+    }
+  }
+  return void 0;
+}
+
+export { AiCursor };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/ai-cursor/rendering/AiCursorComponent.ts","../../src/ui/ai-cursor/rendering/AiCursorComponent.style.ts","../../src/ui/ai-cursor/rendering/index.ts","../../src/ui/ai-cursor/AiCursor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, TemplateResult, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { createTimeline, Timeline } from 'animejs';\nimport { AiCursorComponentStyle } from './AiCursorComponent.style';\n\nexport type Props = {\n  /**\n   * The event hooks are functions that let you connect the inner logic of the solid js component and the AiCursor Class that acts\n   * as an API.\n   */\n  eventHooks: {\n    defineSetPosition: (fn: (position: [number, number]) => void) => void;\n    defineAddPositionToQueue: (\n      fn: (position: [number, number]) => void\n    ) => void;\n    definePlayQueue: (fn: () => void) => void;\n    defineSetShowCursor: (fn: (show: boolean) => void) => void;\n  };\n};\n\n@customElement('ai-cursor')\nexport class AiCursorComponent extends LitElement {\n  @property({\n    type: Object,\n  })\n  eventHooks: Props['eventHooks'] = {\n    defineSetPosition: () => {},\n    defineAddPositionToQueue: () => {},\n    definePlayQueue: () => {},\n    defineSetShowCursor: () => {},\n  };\n\n  @property({ type: Boolean })\n  isShowingCursor = true;\n  @property({ type: String })\n  labelText = 'AI Cursor';\n\n  @property({ type: Array })\n  cursorPosition: [number, number] = [0, 0];\n\n  private _timeline: Timeline | undefined;\n\n  @state()\n  private _cursorRef = createRef<HTMLSpanElement>();\n  @state()\n  private _labelRef = createRef<HTMLSpanElement>();\n\n  constructor() {\n    super();\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('_cursorRef')) {\n      if (this._cursorRef.value) {\n        this.hookUpCallbacks();\n      } else {\n        this._timeline?.pause();\n        this._timeline?.refresh();\n      }\n    }\n    super.updated(_changedProperties);\n  }\n\n  // Define scoped styles right with your component, in plain CSS\n  static styles = AiCursorComponentStyle;\n\n  render(): TemplateResult {\n    const cursorSvg = html`\n      <svg\n        width=${24}\n        height=${24}\n        viewBox=\"0 0 100 100\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g clip-path=\"url(#clip0_3576_285)\">\n          <path\n            class=\"cursor-path\"\n            d=\"M2.14849 7.04749C1.35153 4.07321 4.07319 1.35155 7.04747 2.14851L77.3148 20.9766C80.2891 21.7735 81.2853 25.4914 79.108 27.6687L27.6687 79.108C25.4914 81.2853 21.7735 80.2891 20.9766 77.3149L2.14849 7.04749Z\"\n            fill=\"currentColor\"\n          />\n        </g>\n        <defs>\n          <clipPath id=\"clip0_3576_285\">\n            <rect width=\"100\" height=\"100\" fill=\"white\" />\n          </clipPath>\n        </defs>\n      </svg>\n    `;\n\n    return html`\n      <span\n        id=\"cursor-graphic-parent\"\n        ${ref(this._cursorRef)}\n        ?hidden=${!this.isShowingCursor}\n      >\n        ${cursorSvg}\n        <span\n          ${ref(this._labelRef)}\n          id=\"label-text\"\n          ?hidden=${!this.isShowingCursor}\n          >${this.labelText}</span\n        >\n      </span>\n    `;\n  }\n\n  // private methods\n\n  /**\n   * The primary way to control the cursor is using an external API.\n   * This interface exposes controlling methods. The Lit Component itself is\n   * intended to be a controlled component.\n   */\n  private hookUpCallbacks(): void {\n    const animationTarget = this._cursorRef.value;\n\n    if (!animationTarget) {\n      return;\n    }\n\n    this._timeline = createTimeline({ defaults: { duration: 750 } });\n\n    if (!this._timeline) {\n      return;\n    }\n\n    this.eventHooks.defineSetPosition((position) => {\n      this._timeline?.add(animationTarget, {\n        translateX: position[0],\n        translateY: position[1],\n        duration: 1,\n      });\n      this._timeline?.play();\n    });\n\n    this.eventHooks.defineAddPositionToQueue((position) => {\n      this._timeline?.add(animationTarget, {\n        translateX: position[0],\n        translateY: position[1],\n        duration: 1000,\n      });\n    });\n\n    this.eventHooks.defineSetShowCursor((show) => {\n      this.isShowingCursor = show;\n    });\n\n    this.eventHooks.definePlayQueue(() => {\n      this._timeline?.play();\n    });\n  }\n\n  // Getters\n  get cursorRef(): HTMLSpanElement | undefined {\n    return this._cursorRef.value;\n  }\n\n  get labelRef(): HTMLSpanElement | undefined {\n    return this._labelRef.value;\n  }\n}\n","import { css } from 'lit';\n\nexport const AiCursorComponentStyle = css`\n  :host {\n    --ai-local-cursor-size: var(--sk-ai-cursor-size, 1rem);\n    --ai-local-cursor-label-padding: var(\n      --sk-ai-cursor-label-padding,\n      0.25rem 0.25rem\n    );\n    --ai-local-cursor-border-radius: var(--sk-ai-cursor-border-radius, 0.25rem);\n    --ai-local-label-offset: var(--sk-ai-cursor-label-offset, 1rem);\n\n    --ai-local-label-font-size: var(--sk-ai-cursor-label-font-size, 12px);\n    --ai-local-label-font-weight: var(--sk-ai-cursor-label-font-weight, bold);\n    --ai-local-label-color: var(--sk-ai-cursor-label-color, white);\n    --ai-local-label-background-color: var(\n      --sk-ai-cursor-label-background-color,\n      black\n    );\n    --ai-local-label-border-color: var(\n      --sk-ai-cursor-label-border-color,\n      white\n    );\n    --ai-local-label-border-width: var(\n      --sk-ai-cursor-label-border-width,\n      0.1rem\n    );\n\n    color: black;\n    stroke: white;\n    position: absolute;\n    /* Insetting in the parent element (body) */\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    pointer-events: none;\n    width: var(--ai-local-cursor-size);\n    height: var(--ai-local-cursor-size);\n  }\n\n  #cursor-graphic-parent {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  #label-text {\n    position: absolute;\n    color: white;\n    font-size: 12px;\n    font-weight: bold;\n    padding: var(--ai-local-cursor-label-padding);\n    border-radius: var(--ai-local-cursor-border-radius);\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    width: fit-content;\n    min-width: fit-content;\n    top: var(--ai-local-label-offset);\n    left: var(--ai-local-label-offset);\n\n    border: var(--ai-local-label-border-width) solid\n      var(--ai-local-label-border-color);\n    background-color: var(--ai-local-label-background-color);\n    color: var(--ai-local-label-color);\n    font-size: var(--ai-local-label-font-size);\n    font-weight: var(--ai-local-label-font-weight);\n  }\n`;\n","import './AiCursorComponent';\nimport { AiCursorComponent, Props as AiCursorProps } from './AiCursorComponent';\n/**\n * The AI Cursor is a Lit Element.\n * Why Lit.dev?\n * Lit.dev is a tiny on memory and bundle size. It is quite fast in rendering.\n * And since UI elements in this library shall be isolated and scoped components,\n * Lit.dev is a good fit.\n * It follows reactivity principles with very fine granularity,\n *\n * Also Solid.js (which was the first version of that - prooved to be annoying because of jsx compiler extras).\n *\n * A downside of Lit.dev is that it is not a very common library. Further, it is close to the DOM using native DOM APIs.\n * Causing it to be a bit different than libs like react using virtual DOM.\n * For other contributors I would recommend reading the /life-cycle section of the docs.\n *\n * Author: @Pascal-Lohscheidt\n */\nexport const mountAiCursor = (aiCursorProps: AiCursorProps): void => {\n  const root = document.body;\n  const cursor = document.createElement('ai-cursor') as AiCursorComponent;\n  cursor.eventHooks = aiCursorProps.eventHooks;\n\n  root.appendChild(cursor);\n};\n","import { mountAiCursor } from './rendering';\nimport { Props as AiCursorProps } from './rendering/AiCursorComponent';\n\ntype Selector = string;\ntype CursorTarget = HTMLElement | Selector | [number, number];\n\n/**\n * The AiCursor is a class that is used to create a cursor element and acts an interface to control the cursor.\n * It is used to move the cursor to a target, show or hide the cursor, and to schedule moves.\n *\n * @example\n * ```ts\n * const cursor = AiCursor.spawn();\n * cursor.moveTo('#target-element');\n * ```\n *\n * @author @Pascal-Lohscheidt\n */\nexport class AiCursor {\n  private setPosition?: (position: [number, number]) => void;\n  private addPositionToQueue?: (position: [number, number]) => void;\n  private playQueue?: () => void;\n  private setShowCursor?: (show: boolean) => void;\n\n  constructor() {}\n\n  // Static constructors\n  static spawn(): AiCursor {\n    const newCursor = new AiCursor();\n    newCursor.mount();\n    return newCursor;\n  }\n\n  jumpTo(target: CursorTarget): void {\n    const position = targetToPosition(target);\n    if (position) {\n      this.setPosition?.(position);\n    }\n  }\n\n  moveTo(target: CursorTarget): void {\n    const position = targetToPosition(target);\n    if (position) {\n      this.addPositionToQueue?.(position);\n      this.playQueue?.();\n    }\n  }\n\n  scheduleMoves(targets: CursorTarget[]): void {\n    targets.forEach((target) => {\n      const position = targetToPosition(target);\n      if (position) {\n        this.addPositionToQueue?.(position);\n      }\n    });\n    this.playQueue?.();\n  }\n\n  show(): void {\n    this.setShowCursor?.(true);\n  }\n\n  hide(): void {\n    this.setShowCursor?.(false);\n  }\n\n  private mount(): void {\n    mountAiCursor({\n      eventHooks: {\n        defineSetPosition: (callback): void => {\n          this.setPosition = callback;\n        },\n        defineAddPositionToQueue: (callback): void => {\n          this.addPositionToQueue = callback;\n        },\n        definePlayQueue: (callback): void => {\n          this.playQueue = callback;\n        },\n        defineSetShowCursor: (callback): void => {\n          this.setShowCursor = callback;\n        },\n      },\n    } satisfies AiCursorProps);\n  }\n}\n\nfunction calculateClickPositionFromElement(element: Element): [number, number] {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction targetToPosition(target: CursorTarget): [number, number] | undefined {\n  if (\n    Array.isArray(target) &&\n    target.length === 2 &&\n    typeof target[0] === 'number' &&\n    typeof target[1] === 'number'\n  ) {\n    return target;\n  } else if (target instanceof HTMLElement) {\n    return calculateClickPositionFromElement(target);\n  } else if (typeof target === 'string') {\n    const element = document.querySelector(target);\n    if (element) {\n      return calculateClickPositionFromElement(element);\n    }\n  }\n  return undefined;\n}\n"]}

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@m4trix/core",
+  "version": "0.5.0",
+  "description": "A powerful TypeScript library for building AI-driven web applications",
+  "main": "./dist/index/index.cjs",
+  "module": "./dist/index/index.js",
+  "types": "./dist/index/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index/index.d.ts",
+      "import": "./dist/index/index.js",
+      "require": "./dist/index/index.cjs",
+      "default": "./dist/index/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "default": "./dist/react/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js",
+      "require": "./dist/ui/index.cjs",
+      "default": "./dist/ui/index.js"
+    },
+    "./stream": {
+      "types": "./dist/stream/index.d.ts",
+      "import": "./dist/stream/index.js",
+      "require": "./dist/stream/index.cjs",
+      "default": "./dist/stream/index.js"
+    },
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.js",
+      "require": "./dist/api/index.cjs",
+      "default": "./dist/api/index.js"
+    },
+    "./helper": {
+      "types": "./dist/helper/index.d.ts",
+      "import": "./dist/helper/index.js",
+      "require": "./dist/helper/index.cjs",
+      "default": "./dist/helper/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "prepare": "pnpm run build",
+    "publish-package": "npm publish --no-git-checks"
+  },
+  "keywords": [
+    "ai",
+    "web",
+    "typescript",
+    "visualization"
+  ],
+  "author": "Pascal Lohscheidt",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitest/coverage-v8": "^1.0.0",
+    "eslint": "^8.0.0",
+    "prettier": "^3.0.0",
+    "tsup": "^7.0.0",
+    "tsup-preset-solid": "^2.2.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
+    "@langchain/community": "^0.3.47",
+    "@langchain/core": "^0.3.61",
+    "@langchain/langgraph": "^0.3.6",
+    "@langchain/langgraph-sdk": "^0.0.84",
+    "@langchain/openai": "^0.5.16",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "ai": "^5.0.28",
+    "animejs": "^4.0.1",
+    "effect": "^3.16.10",
+    "lit": "^3.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2",
+    "solid-js": "^1.9.5"
+  },
+  "peerDependencies": {
+    "@floating-ui/dom": ">=1.6.13",
+    "@langchain/community": ">=0.3.0",
+    "@langchain/core": ">=0.3.0",
+    "@langchain/langgraph": ">=0.3.0",
+    "@langchain/langgraph-sdk": ">=0.3.0",
+    "@langchain/openai": ">=0.3.0",
+    "animejs": ">=4.0.1",
+    "effect": ">=3.0.0",
+    "lit": ">=3.3.0",
+    "react": ">=16.8.0 <21.0.0",
+    "react-dom": ">=16.8.0 <21.0.0",
+    "solid-js": ">=1.9.5"
+  },
+  "browser": {},
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pascal-Lohscheidt/build-ai.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Pascal-Lohscheidt/build-ai/issues"
+  },
+  "homepage": "https://github.com/Pascal-Lohscheidt/build-ai#readme"
+}