locusing 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yao Shen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,147 @@
+# Locusing
+
+A declarative graphics and animation library for mathematical visualization.
+
+Locusing combines the elegance of [Manim](https://www.manim.community/) with the interactivity of [Diagramatics](https://github.com/ray-x/diagramatics), bringing beautiful mathematical animations to the web.
+
+## Features
+
+- **Declarative API** - Immutable, composable diagram primitives
+- **Manim-style Animations** - 30+ built-in animations (Create, FadeIn, Transform, etc.)
+- **Interactive Controls** - Sliders, draggable points, and constraints
+- **Hand-drawn Style** - Rough.js integration for sketch-like graphics
+- **Mathematical Tools** - Vectors, matrices, Bezier curves, coordinate systems
+- **Geometry Constructions** - Compass-and-straightedge style constructions
+
+## Packages
+
+| Package | Description |
+|:--------|:------------|
+| `@wangyaoshen/core` | Core rendering engine with SVG and Rough.js support |
+| `@wangyaoshen/animate` | Manim-style animation system powered by GSAP |
+| `@wangyaoshen/math` | Mathematical utilities (vectors, matrices, curves) |
+| `@wangyaoshen/geometry` | Coordinate systems and geometric constructions |
+| `@wangyaoshen/interactive` | Interactive controls and constraints |
+
+## Quick Start
+
+```bash
+# Install packages
+pnpm add @wangyaoshen/core @wangyaoshen/animate @wangyaoshen/math
+```
+
+### Static Diagram
+
+```typescript
+import { square, circle, text, combine, renderToSVG } from '@wangyaoshen/core';
+
+// Create shapes
+const sq = square(100).fill('#EA580C');
+const label = text('Hello').translate(0, 80);
+
+// Combine and render
+const diagram = combine(sq, label);
+renderToSVG(diagram, document.getElementById('canvas'));
+```
+
+### Animated Scene
+
+```typescript
+import { Scene, Create, FadeOut, Wait } from '@wangyaoshen/animate';
+import { square, circle } from '@wangyaoshen/core';
+
+class MyScene extends Scene {
+  construct() {
+    const sq = square(100).fill('#EA580C');
+    const c = circle(50).fill('#58C4DD');
+
+    this.play(Create(sq));
+    this.play(Create(c, { delay: 0.5 }));
+    this.wait(1);
+    this.play(FadeOut(sq), FadeOut(c));
+  }
+}
+
+const scene = new MyScene(document.getElementById('canvas'));
+scene.render();
+```
+
+### Interactive Diagram
+
+```typescript
+import { Interactive } from '@wangyaoshen/interactive';
+import { circle } from '@wangyaoshen/core';
+
+const interactive = new Interactive(container);
+
+interactive.slider({
+  min: 10,
+  max: 100,
+  value: 50,
+  onChange: (radius) => {
+    const c = circle(radius).fill('#EA580C');
+    interactive.update(c);
+  }
+});
+```
+
+## Animation Library
+
+### Creation Animations
+- `Create` - Draw stroke animation
+- `Write` - Text writing effect
+- `GrowFromCenter` - Scale from center
+- `DrawBorderThenFill` - Draw border then fill
+
+### Fade Animations
+- `FadeIn` / `FadeOut`
+- `FadeInFrom` / `FadeOutTo`
+
+### Transform Animations
+- `Transform` - Morph between shapes
+- `ReplacementTransform` - Replace with transform
+- `Morphing` - SVG path morphing (requires GSAP MorphSVG)
+
+### Movement Animations
+- `Shift` - Relative movement
+- `MoveTo` - Absolute movement
+- `MoveAlongPath` - Follow a path
+- `Rotate` / `Scale`
+
+### Indication Animations
+- `Indicate` - Highlight effect
+- `Circumscribe` - Circle around
+- `Wiggle` - Shake effect
+- `Flash` - Flash effect
+
+### Composition
+- `Succession` - Play in sequence
+- `LaggedStart` - Staggered start times
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run playground
+pnpm dev
+
+# Build all packages
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+## Credits
+
+- [GSAP](https://gsap.com/) - Animation engine
+- [Rough.js](https://roughjs.com/) - Hand-drawn style graphics
+- [KaTeX](https://katex.org/) - LaTeX rendering (playground)
+- [Manim](https://www.manim.community/) - Animation API inspiration
+- [Diagramatics](https://github.com/ray-x/diagramatics) - Interactive diagram inspiration
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.

package/dist/chunk-2THKOSBL.mjs

@@ -0,0 +1,421 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/animate/animations/transform.ts
+import { gsap as gsap2 } from "gsap";
+
+// src/animate/timeline.ts
+import { gsap } from "gsap";
+var Timeline = class {
+  constructor(options = {}) {
+    this._status = "pending";
+    this.timeline = gsap.timeline({
+      paused: true,
+      onStart: () => {
+        var _a;
+        this._status = "running";
+        (_a = options.onStart) == null ? void 0 : _a.call(options);
+      },
+      onComplete: () => {
+        var _a;
+        this._status = "completed";
+        (_a = options.onComplete) == null ? void 0 : _a.call(options);
+      },
+      onUpdate: () => {
+        var _a;
+        (_a = options.onUpdate) == null ? void 0 : _a.call(options, this.progress);
+      }
+    });
+  }
+  /** 当前状态 */
+  get status() {
+    return this._status;
+  }
+  /** 当前进度 (0-1) */
+  get progress() {
+    return this.timeline.progress();
+  }
+  /** 总时长 */
+  get duration() {
+    return this.timeline.duration();
+  }
+  /** 当前时间 */
+  get time() {
+    return this.timeline.time();
+  }
+  /**
+   * 添加动画到时间线
+   */
+  add(target, vars, position) {
+    this.timeline.to(target, vars, position);
+    return this;
+  }
+  /**
+   * 添加回调函数
+   */
+  call(callback, position) {
+    this.timeline.call(callback, void 0, position);
+    return this;
+  }
+  /**
+   * 添加延迟
+   */
+  delay(seconds, position) {
+    this.timeline.to({}, { duration: seconds }, position);
+    return this;
+  }
+  /**
+   * 添加标签
+   */
+  label(name, position) {
+    this.timeline.addLabel(name, position);
+    return this;
+  }
+  /**
+   * 播放
+   */
+  play() {
+    this._status = "running";
+    this.timeline.play();
+    return this;
+  }
+  /**
+   * 暂停
+   */
+  pause() {
+    this._status = "paused";
+    this.timeline.pause();
+    return this;
+  }
+  /**
+   * 恢复
+   */
+  resume() {
+    this._status = "running";
+    this.timeline.resume();
+    return this;
+  }
+  /**
+   * 停止并重置
+   */
+  restart() {
+    this._status = "pending";
+    this.timeline.restart();
+    return this;
+  }
+  /**
+   * 跳转到指定时间
+   */
+  seek(time) {
+    this.timeline.seek(time);
+    return this;
+  }
+  /**
+   * 设置进度
+   */
+  setProgress(progress) {
+    this.timeline.progress(progress);
+    return this;
+  }
+  /**
+   * 设置速度
+   */
+  setSpeed(speed) {
+    this.timeline.timeScale(speed);
+    return this;
+  }
+  /**
+   * 反向播放
+   */
+  reverse() {
+    this.timeline.reverse();
+    return this;
+  }
+  /**
+   * 销毁
+   */
+  kill() {
+    this.timeline.kill();
+  }
+  /**
+   * 等待完成
+   */
+  async finished() {
+    return new Promise((resolve) => {
+      this.timeline.eventCallback("onComplete", resolve);
+    });
+  }
+};
+function createTimeline(options) {
+  return new Timeline(options);
+}
+var easingMap = {
+  linear: "none",
+  easeIn: "power2.in",
+  easeOut: "power2.out",
+  easeInOut: "power2.inOut",
+  easeInQuad: "power1.in",
+  easeOutQuad: "power1.out",
+  easeInOutQuad: "power1.inOut",
+  easeInCubic: "power2.in",
+  easeOutCubic: "power2.out",
+  easeInOutCubic: "power2.inOut",
+  easeInQuart: "power3.in",
+  easeOutQuart: "power3.out",
+  easeInOutQuart: "power3.inOut",
+  easeInQuint: "power4.in",
+  easeOutQuint: "power4.out",
+  easeInOutQuint: "power4.inOut",
+  easeInSine: "sine.in",
+  easeOutSine: "sine.out",
+  easeInOutSine: "sine.inOut",
+  easeInExpo: "expo.in",
+  easeOutExpo: "expo.out",
+  easeInOutExpo: "expo.inOut",
+  easeInCirc: "circ.in",
+  easeOutCirc: "circ.out",
+  easeInOutCirc: "circ.inOut",
+  easeInBack: "back.in",
+  easeOutBack: "back.out",
+  easeInOutBack: "back.inOut",
+  easeInElastic: "elastic.in",
+  easeOutElastic: "elastic.out",
+  easeInOutElastic: "elastic.inOut",
+  easeInBounce: "bounce.in",
+  easeOutBounce: "bounce.out",
+  easeInOutBounce: "bounce.inOut"
+};
+function getGSAPEasing(easing) {
+  return easingMap[easing] || easing;
+}
+
+// src/animate/animations/transform.ts
+function Transform(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      const translateX = targetBBox.x + targetBBox.width / 2 - (sourceBBox.x + sourceBBox.width / 2);
+      const translateY = targetBBox.y + targetBBox.height / 2 - (sourceBBox.y + sourceBBox.height / 2);
+      const originX = sourceBBox.x + sourceBBox.width / 2;
+      const originY = sourceBBox.y + sourceBBox.height / 2;
+      gsap2.set(sourceElement, {
+        transformOrigin: `${originX}px ${originY}px`
+      });
+      timeline.add(sourceElement, {
+        scaleX,
+        scaleY,
+        x: translateX,
+        y: translateY,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap2.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function ReplacementTransform(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0, replace = true } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0, visibility: "hidden" });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      timeline.add(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`,
+        scaleX,
+        scaleY,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          if (replace) {
+            sourceElement.remove();
+          }
+        }
+      }, startTime);
+      timeline.add(targetElement, {
+        visibility: "visible",
+        opacity: 1,
+        duration: duration * 0.5,
+        ease: "power2.out",
+        delay: delay + duration * 0.5
+      }, startTime);
+    }
+  };
+}
+function MoveToTarget(target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const targetState = target._targetState;
+      if (targetState) {
+        timeline.add(element, __spreadProps(__spreadValues({}, targetState), {
+          duration,
+          ease: getGSAPEasing(easing),
+          delay
+        }), startTime);
+      }
+    }
+  };
+}
+function Morphing(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      const sourcePath = sourceElement.querySelector("path") || sourceElement;
+      const targetPath = targetElement.querySelector("path") || targetElement;
+      gsap2.set(targetElement, { opacity: 0 });
+      if ((_a = gsap2.plugins) == null ? void 0 : _a.morphSVG) {
+        const targetD = targetPath.getAttribute("d");
+        if (targetD) {
+          timeline.add(sourcePath, {
+            morphSVG: targetD,
+            duration,
+            ease: getGSAPEasing(easing),
+            delay,
+            onComplete: () => {
+              sourceElement.remove();
+              gsap2.set(targetElement, { opacity: 1 });
+            }
+          }, startTime);
+        }
+      } else {
+        Transform(source, target, options).execute(scene, timeline, startTime);
+      }
+    }
+  };
+}
+function TransformMatchingShapes(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      const sourceChildren = Array.from(sourceElement.children);
+      const targetChildren = Array.from(targetElement.children);
+      gsap2.set(targetElement, { opacity: 0 });
+      const pairs = Math.min(sourceChildren.length, targetChildren.length);
+      for (let i = 0; i < pairs; i++) {
+        const sourceChild = sourceChildren[i];
+        const targetChild = targetChildren[i];
+        const sourceBBox = ((_a = sourceChild.getBBox) == null ? void 0 : _a.call(sourceChild)) || { x: 0, y: 0, width: 0, height: 0 };
+        const targetBBox = ((_b = targetChild.getBBox) == null ? void 0 : _b.call(targetChild)) || { x: 0, y: 0, width: 0, height: 0 };
+        const scaleX = targetBBox.width / (sourceBBox.width || 1);
+        const scaleY = targetBBox.height / (sourceBBox.height || 1);
+        const translateX = targetBBox.x - sourceBBox.x;
+        const translateY = targetBBox.y - sourceBBox.y;
+        timeline.add(sourceChild, {
+          scaleX,
+          scaleY,
+          x: translateX,
+          y: translateY,
+          duration,
+          ease: getGSAPEasing(easing),
+          delay
+        }, startTime);
+      }
+      for (let i = pairs; i < sourceChildren.length; i++) {
+        const child = sourceChildren[i];
+        if (child) {
+          timeline.add(child, {
+            opacity: 0,
+            duration: duration * 0.5,
+            ease: "power2.in"
+          }, startTime);
+        }
+      }
+      timeline.call(() => {
+        sourceElement.remove();
+        gsap2.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
+    }
+  };
+}
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  Timeline,
+  createTimeline,
+  easingMap,
+  getGSAPEasing,
+  Transform,
+  ReplacementTransform,
+  MoveToTarget,
+  Morphing,
+  TransformMatchingShapes
+};