keyframes 0.1.0__py3-none-any.whl

keyframes/static/components/keyframes-slider.js

@@ -0,0 +1,255 @@
+import { SwComponent } from "../runtime/component.js";
+
+const PRINT = new URLSearchParams(location.search).has("print");
+const PLAY_ICON = `<svg viewBox="0 0 24 24"><path d="M7 4.5v15l13-7.5z"/></svg>`;
+const PAUSE_ICON = `<svg viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>`;
+
+const style = document.createElement("style");
+style.textContent = `
+keyframes-slider {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  font: 400 var(--keyframes-slider-size, 28px)/1.2 var(--font-sans);
+  color: var(--ink, var(--fg));
+  user-select: none;
+}
+keyframes-slider .keyframes-slider-label { flex: none; font-weight: 500; white-space: nowrap; }
+keyframes-slider .keyframes-slider-value {
+  flex: none;
+  min-width: 4ch;
+  text-align: right;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  white-space: nowrap;
+}
+keyframes-slider input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 1.4em;
+  margin: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+}
+keyframes-slider input:focus { outline: none; }
+keyframes-slider input::-webkit-slider-runnable-track {
+  height: 0.28em;
+  border-radius: 1em;
+  background: linear-gradient(to right, var(--accent) var(--keyframes-slider-fill, 0%), var(--border) 0);
+}
+keyframes-slider input::-moz-range-track { height: 0.28em; border-radius: 1em; background: var(--border); }
+keyframes-slider input::-moz-range-progress { height: 0.28em; border-radius: 1em; background: var(--accent); }
+keyframes-slider input::-webkit-slider-thumb {
+  appearance: none;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.36em;
+  border: 0.14em solid var(--bg, #fff);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: var(--accent);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
+}
+keyframes-slider input::-moz-range-thumb {
+  width: 1em;
+  height: 1em;
+  border: 0.14em solid var(--bg, #fff);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: var(--accent);
+}
+keyframes-slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--accent) 35%, transparent); }
+keyframes-slider .keyframes-slider-play {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 1.6em;
+  height: 1.6em;
+  padding: 0;
+  font: inherit;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+}
+keyframes-slider .keyframes-slider-play svg { width: 0.75em; height: 0.75em; fill: currentColor; }
+`;
+document.head.append(style);
+
+const isTarget = (el) => el.localName.startsWith("keyframes-") && el.localName !== "keyframes-slider" && "setParam" in el;
+
+function decimals(step) {
+  const fraction = String(step).split(".")[1] ?? "";
+  return Math.min(fraction.length, 3);
+}
+
+class SwSlider extends SwComponent {
+  #target = null;
+  #input = null;
+  #output = null;
+  #button = null;
+  #time = 0;
+  #playing = false;
+  #live = false;
+  #scrubbing = false;
+  #raf = 0;
+  #last = 0;
+
+  get timeline() {
+    return this.hasAttribute("timeline");
+  }
+
+  get value() {
+    return this.timeline ? this.#time : this.#input?.valueAsNumber;
+  }
+
+  async prepare() {
+    const target = this.#findTarget();
+    if (!target) throw this.#fail(`no component for="${this.getAttribute("for")}" on this slide`);
+    if (this.timeline && typeof target.seek !== "function") throw this.#fail(`<${target.localName}> has no timeline`);
+    if (!this.timeline && !this.getAttribute("param")) throw this.#fail("needs a param attribute (or timeline)");
+    this.#target = target;
+    this.#build();
+    this.#playing = this.timeline && !this.hasAttribute("paused") && !PRINT;
+    const initial = this.getAttribute(PRINT && this.hasAttribute("snapshot") ? "snapshot" : "value");
+    this.#set(Number(initial ?? (this.timeline ? 0 : NaN)));
+  }
+
+  play() {
+    this.#live = true;
+    if (this.#target) this.#apply();
+    this.#sync();
+  }
+
+  pause() {
+    this.#live = false;
+    this.#sync();
+  }
+
+  step(n) {
+    const values = this.getAttribute("steps")?.split(",").map(Number);
+    if (values?.length && this.#input) this.#set(values[Math.min(n, values.length - 1)]);
+  }
+
+  #fail(message) {
+    const error = new Error(message);
+    this.showError(error);
+    return error;
+  }
+
+  #findTarget() {
+    const id = this.getAttribute("for") ?? "";
+    const el = (this.slide ?? document).querySelector(`[data-block="${CSS.escape(id)}"], #${CSS.escape(id)}`);
+    if (!el) return null;
+    return isTarget(el) ? el : [...el.querySelectorAll("*")].find(isTarget) ?? null;
+  }
+
+  #build() {
+    const timeline = this.timeline;
+    const input = document.createElement("input");
+    input.type = "range";
+    input.min = timeline ? 0 : this.getAttribute("min") ?? 0;
+    input.max = timeline ? this.getAttribute("duration") ?? 10 : this.getAttribute("max") ?? 1;
+    input.step = this.getAttribute("step") ?? (input.max - input.min) / (timeline ? 1000 : 100);
+    input.setAttribute("aria-label", this.getAttribute("label") ?? (timeline ? "Time" : this.getAttribute("param")));
+    input.addEventListener("input", () => this.#set(input.valueAsNumber));
+    input.addEventListener("pointerdown", () => (this.#scrubbing = true));
+    input.addEventListener("change", () => (this.#scrubbing = false));
+    this.addEventListener("keydown", (e) => this.#onKey(e));
+    this.#input = input;
+    this.#output = document.createElement("output");
+    this.#output.className = "keyframes-slider-value";
+    this.replaceChildren(...[this.#playButton(), this.#label(), input, this.#output].filter(Boolean));
+  }
+
+  #playButton() {
+    if (!this.timeline) return null;
+    this.#button = document.createElement("button");
+    this.#button.className = "keyframes-slider-play";
+    this.#button.addEventListener("click", () => this.#toggle());
+    return this.#button;
+  }
+
+  #label() {
+    const text = this.getAttribute("label");
+    if (!text) return null;
+    const label = document.createElement("span");
+    label.className = "keyframes-slider-label";
+    label.textContent = text;
+    return label;
+  }
+
+  #onKey(e) {
+    if (e.key === "Escape") document.activeElement?.blur();
+    else if (e.key === " " && this.timeline && e.target === this.#input) {
+      e.preventDefault();
+      this.#toggle();
+    }
+  }
+
+  #set(value) {
+    if (Number.isFinite(value)) this.#input.value = value;
+    this.#time = this.#input.valueAsNumber;
+    this.#apply();
+  }
+
+  #apply() {
+    const value = this.value;
+    const { min, max } = this.#input;
+    const digits = this.timeline ? 1 : decimals(this.#input.step);
+    const unit = this.getAttribute("unit") ?? (this.timeline ? " s" : "");
+    this.#output.textContent = `${value.toFixed(digits)}${unit}`;
+    this.#input.style.setProperty("--keyframes-slider-fill", `${(100 * (value - min)) / (max - min)}%`);
+    if (this.timeline) this.#target.seek(value);
+    else this.#target.setParam(this.getAttribute("param"), value);
+  }
+
+  #toggle() {
+    if (!this.#playing && this.#time >= Number(this.#input.max)) this.#set(0);
+    this.#playing = !this.#playing;
+    this.#sync();
+  }
+
+  #sync() {
+    if (this.#button) this.#button.innerHTML = this.#playing ? PAUSE_ICON : PLAY_ICON;
+    this.#button?.setAttribute("aria-label", this.#playing ? "Pause" : "Play");
+    const run = this.#live && this.#playing;
+    if (run && !this.#raf) {
+      this.#last = performance.now();
+      this.#raf = requestAnimationFrame(this.#tick);
+    } else if (!run && this.#raf) {
+      cancelAnimationFrame(this.#raf);
+      this.#raf = 0;
+    }
+  }
+
+  #tick = (now) => {
+    this.#raf = requestAnimationFrame(this.#tick);
+    const dt = Math.min((now - this.#last) / 1000, 0.1);
+    this.#last = now;
+    if (!this.#scrubbing) this.#advance(dt);
+  };
+
+  #advance(dt) {
+    const duration = Number(this.#input.max);
+    let t = this.#time + dt;
+    if (t >= duration && this.hasAttribute("loop")) t -= duration;
+    else if (t >= duration) {
+      t = duration;
+      this.#playing = false;
+      this.#sync();
+    }
+    this.#input.value = t;
+    this.#time = t;
+    this.#apply();
+  }
+}
+
+customElements.define("keyframes-slider", SwSlider);

keyframes/static/components/keyframes-three.js

@@ -0,0 +1,224 @@
+import { SwComponent, onResize } from "../runtime/component.js";
+
+const MAX_PIXEL_RATIO = 3;
+const SNAPSHOT_TIME = 2;
+
+const style = document.createElement("style");
+style.textContent = `
+keyframes-three { display: block; position: relative; width: 100%; height: 100%; }
+keyframes-three > canvas, keyframes-three > img { display: block; width: 100%; height: 100%; }
+`;
+document.head.append(style);
+
+function parseVector(value, fallback) {
+  const parts = (value || "").split(",").map(Number);
+  return parts.length === 3 && parts.every(Number.isFinite) ? parts : fallback;
+}
+
+function disposeScene(scene) {
+  scene.traverse((obj) => {
+    obj.geometry?.dispose();
+    for (const material of [obj.material].flat().filter(Boolean)) {
+      for (const value of Object.values(material)) value?.isTexture && value.dispose();
+      material.dispose();
+    }
+  });
+  for (const texture of [scene.background, scene.environment]) texture?.isTexture && texture.dispose();
+}
+
+class SwThree extends SwComponent {
+  #three = null;
+  #hooks = null;
+  #cleanup = null;
+  #unsubscribe = [];
+  #raf = 0;
+  #last = 0;
+  #time = 0;
+  #driven = false;
+  #step = 0;
+
+  async init() {
+    const THREE = await import("three");
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(Number(this.getAttribute("fov")) || 45, 1, 0.01, 1000);
+    const target = new THREE.Vector3(...parseVector(this.getAttribute("target"), [0, 0, 0]));
+    camera.position.set(...parseVector(this.getAttribute("camera"), [4, 3, 6]));
+    camera.lookAt(target);
+    this.#applyBackground(THREE, renderer, scene);
+    this.replaceChildren(renderer.domElement);
+    this.#three = { THREE, renderer, scene, camera, controls: null };
+    this.#hooks = { frame: [], step: [], resize: [], param: [] };
+
+    try {
+      this.#three.controls = await this.#createControls(camera, renderer.domElement, target);
+      this.#watchSize();
+      const module = await import(this.#moduleUrl());
+      const cleanup = await module.default(this.#context());
+      this.#cleanup = typeof cleanup === "function" ? cleanup : null;
+      this.#emit("resize", this.clientWidth, this.clientHeight);
+      this.#emit("step", this.#step);
+      for (const [name, value] of Object.entries(this.params)) this.#emitParam(name, value);
+      this.#render();
+    } catch (e) {
+      this.destroy();
+      throw e;
+    }
+  }
+
+  play() {
+    if (this.#raf) return;
+    this.#last = performance.now();
+    const loop = (now) => {
+      this.#raf = requestAnimationFrame(loop);
+      this.#tick(Math.min((now - this.#last) / 1000, 0.1));
+      this.#last = now;
+      this.#render();
+    };
+    this.#raf = requestAnimationFrame(loop);
+  }
+
+  pause() {
+    cancelAnimationFrame(this.#raf);
+    this.#raf = 0;
+  }
+
+  step(n) {
+    this.#step = n;
+    if (!this.#hooks) return;
+    this.#emit("step", n);
+    if (!this.#raf) this.#render();
+  }
+
+  paramChanged(name, value) {
+    if (!this.#hooks) return;
+    this.#emitParam(name, value);
+    if (!this.#raf) this.#render();
+  }
+
+  seek(t) {
+    this.#driven = true;
+    this.#time = t;
+  }
+
+  async snapshot() {
+    if (!this.#three) return;
+    this.pause();
+    this.#settle();
+    this.#render();
+    const img = new Image();
+    img.src = this.#three.renderer.domElement.toDataURL("image/png");
+    await img.decode();
+    this.replaceChildren(img);
+  }
+
+  destroy() {
+    this.pause();
+    for (const off of this.#unsubscribe.splice(0)) off();
+    const three = this.#three;
+    const cleanup = this.#cleanup;
+    this.#three = this.#hooks = this.#cleanup = null;
+    this.#time = 0;
+    if (!three) return;
+    try {
+      cleanup?.();
+    } finally {
+      three.controls?.dispose();
+      disposeScene(three.scene);
+      three.renderer.dispose();
+      three.renderer.forceContextLoss();
+      this.replaceChildren();
+    }
+  }
+
+  #moduleUrl() {
+    const url = new URL(this.resolveUrl(this.getAttribute("src")));
+    url.searchParams.set("v", Date.now());
+    return url.href;
+  }
+
+  #applyBackground(THREE, renderer, scene) {
+    const background = this.getAttribute("background") || "transparent";
+    if (background === "transparent") renderer.setClearColor(0x000000, 0);
+    else scene.background = new THREE.Color(background);
+  }
+
+  async #createControls(camera, canvas, target) {
+    if ((this.getAttribute("controls") || "orbit") !== "orbit") return null;
+    const { OrbitControls } = await import("three/addons/controls/OrbitControls.js");
+    const controls = new OrbitControls(camera, canvas);
+    controls.target.copy(target);
+    controls.enableDamping = true;
+    controls.update();
+    return controls;
+  }
+
+  #watchSize() {
+    const resize = (w, h) => {
+      if (!this.#three || !w || !h) return;
+      const { renderer, camera } = this.#three;
+      renderer.setPixelRatio(Math.min(this.pixelRatio, MAX_PIXEL_RATIO));
+      renderer.setSize(w, h, false);
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      this.#emit("resize", w, h);
+      if (!this.#raf) this.#render();
+    };
+    const onScale = () => resize(this.clientWidth, this.clientHeight);
+    window.keyframes?.addEventListener("scale", onScale);
+    this.#unsubscribe.push(
+      onResize(this, resize),
+      () => window.keyframes?.removeEventListener("scale", onScale),
+    );
+    onScale();
+  }
+
+  #context() {
+    const { THREE, scene, camera, renderer, controls } = this.#three;
+    const hooks = this.#hooks;
+    return {
+      THREE,
+      scene,
+      camera,
+      renderer,
+      controls,
+      container: this,
+      onFrame: (cb) => hooks.frame.push(cb),
+      onStep: (cb) => hooks.step.push(cb),
+      onResize: (cb) => hooks.resize.push(cb),
+      params: this.params,
+      onParam: (name, cb) => hooks.param.push([name, cb]),
+      addons: (path) => import(`three/addons/${path}`),
+    };
+  }
+
+  #tick(dt) {
+    if (!this.#driven) this.#time += dt;
+    this.#emit("frame", this.#time, dt);
+  }
+
+  #settle() {
+    if (!this.#driven) {
+      while (this.#time < SNAPSHOT_TIME) this.#tick(1 / 60);
+      return;
+    }
+    for (let i = 0; i < SNAPSHOT_TIME * 60; i++) this.#tick(1 / 60);
+  }
+
+  #emitParam(name, value) {
+    for (const [key, cb] of this.#hooks.param) if (key === name) cb(value);
+  }
+
+  #emit(name, ...args) {
+    for (const cb of this.#hooks?.[name] ?? []) cb(...args);
+  }
+
+  #render() {
+    if (!this.#three) return;
+    const { renderer, scene, camera, controls } = this.#three;
+    controls?.update();
+    renderer.render(scene, camera);
+  }
+}
+
+customElements.define("keyframes-three", SwThree);

keyframes/static/editor/editor.css

@@ -0,0 +1,228 @@
+.keyframes-editing .keyframes-slide.is-current [data-block] {
+  cursor: move;
+  outline: 1px dashed rgba(47, 111, 237, 0.35);
+  outline-offset: -1px;
+}
+
+.keyframes-editing .keyframes-slide.is-current [data-block]:hover {
+  outline: 1px solid rgba(47, 111, 237, 0.8);
+}
+
+.keyframes-editing [data-block]:not(.keyframes-ed-live) * {
+  pointer-events: none !important;
+}
+
+.keyframes-editing .keyframes-ed-live {
+  outline: 2px solid #f2994a !important;
+  cursor: auto !important;
+}
+
+.keyframes-editing .keyframes-step-hidden {
+  opacity: 0.3 !important;
+  visibility: visible;
+}
+
+.keyframes-ed-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 100000;
+  pointer-events: none;
+}
+
+.keyframes-ed-box {
+  position: absolute;
+  outline: 2px solid #2f6fed;
+  outline-offset: 0;
+}
+
+.keyframes-ed-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  background: #fff;
+  border: 2px solid #2f6fed;
+  border-radius: 3px;
+  box-sizing: border-box;
+  pointer-events: auto;
+  scale: calc(1 / var(--keyframes-scale, 1));
+}
+
+.keyframes-ed-nw { left: 0; top: 0; cursor: nwse-resize; }
+.keyframes-ed-n { left: 50%; top: 0; cursor: ns-resize; }
+.keyframes-ed-ne { left: 100%; top: 0; cursor: nesw-resize; }
+.keyframes-ed-e { left: 100%; top: 50%; cursor: ew-resize; }
+.keyframes-ed-se { left: 100%; top: 100%; cursor: nwse-resize; }
+.keyframes-ed-s { left: 50%; top: 100%; cursor: ns-resize; }
+.keyframes-ed-sw { left: 0; top: 100%; cursor: nesw-resize; }
+.keyframes-ed-w { left: 0; top: 50%; cursor: ew-resize; }
+
+.keyframes-ed-guide {
+  position: absolute;
+  background: #ff3d81;
+}
+
+.keyframes-ed-vguide {
+  top: 0;
+  bottom: 0;
+  width: calc(1px / var(--keyframes-scale, 1));
+}
+
+.keyframes-ed-hguide {
+  left: 0;
+  right: 0;
+  height: calc(1px / var(--keyframes-scale, 1));
+}
+
+.keyframes-ed-marquee {
+  display: none;
+  position: absolute;
+  background: rgba(47, 111, 237, 0.08);
+  border: 1px solid rgba(47, 111, 237, 0.6);
+}
+
+.keyframes-ed-label {
+  display: none;
+  position: fixed;
+  z-index: 100001;
+  padding: 2px 6px;
+  background: #2f6fed;
+  border-radius: 4px;
+  pointer-events: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.keyframes-ed-toolbar,
+.keyframes-ed-help,
+.keyframes-ed-toast,
+.keyframes-ed-label {
+  font: 13px/1.3 system-ui, -apple-system, sans-serif;
+  color: #e9ecf2;
+}
+
+.keyframes-ed-toolbar {
+  position: fixed;
+  top: 10px;
+  left: calc((100vw - var(--keyframes-panel-space, 0px)) / 2);
+  translate: -50% 0;
+  z-index: 100001;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  background: rgba(24, 26, 32, 0.92);
+  border-radius: 10px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  white-space: nowrap;
+}
+
+.keyframes-ed-toolbar[hidden],
+.keyframes-ed-help[hidden] {
+  display: none;
+}
+
+.keyframes-ed-badge {
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  color: #fff;
+  background: #2f6fed;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.keyframes-ed-slide {
+  color: #9aa3b2;
+}
+
+.keyframes-ed-block {
+  font-family: ui-monospace, Menlo, monospace;
+  min-width: 80px;
+}
+
+.keyframes-ed-toolbar label {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  color: #9aa3b2;
+}
+
+.keyframes-ed-toolbar input {
+  width: 52px;
+  padding: 3px 4px;
+  color: inherit;
+  background: #2a2d36;
+  border: 1px solid #3a3e4a;
+  border-radius: 5px;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+}
+
+.keyframes-ed-toolbar input:disabled {
+  opacity: 0.4;
+}
+
+.keyframes-ed-toolbar button {
+  min-width: 26px;
+  padding: 3px 7px;
+  color: inherit;
+  background: #2a2d36;
+  border: 1px solid #3a3e4a;
+  border-radius: 5px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.keyframes-ed-toolbar button:hover {
+  background: #3a3e4a;
+}
+
+.keyframes-ed-status {
+  color: #7fd19b;
+  min-width: 70px;
+}
+
+.keyframes-ed-status.keyframes-ed-error {
+  color: #ff7a7a;
+}
+
+.keyframes-ed-help {
+  position: fixed;
+  top: 56px;
+  left: calc((100vw - var(--keyframes-panel-space, 0px)) / 2);
+  translate: -50% 0;
+  z-index: 100001;
+  padding: 14px 18px;
+  background: rgba(24, 26, 32, 0.95);
+  border-radius: 10px;
+}
+
+.keyframes-ed-help td {
+  padding: 3px 10px 3px 0;
+}
+
+.keyframes-ed-help td:first-child,
+.keyframes-ed-help kbd {
+  font-family: ui-monospace, Menlo, monospace;
+  color: #fff;
+}
+
+.keyframes-ed-toast {
+  position: fixed;
+  bottom: 20px;
+  left: calc((100vw - var(--keyframes-panel-space, 0px)) / 2);
+  translate: -50% 20px;
+  z-index: 100001;
+  padding: 8px 14px;
+  background: rgba(24, 26, 32, 0.92);
+  border-radius: 8px;
+  opacity: 0;
+  transition: opacity 0.2s, translate 0.2s;
+  pointer-events: none;
+}
+
+.keyframes-ed-toast.keyframes-ed-show {
+  opacity: 1;
+  translate: -50% 0;
+}