sibujs 1.0.0-beta.1

package/dist/motion.cjs

@@ -0,0 +1,604 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// motion.ts
+var motion_exports = {};
+__export(motion_exports, {
+  TransitionGroup: () => TransitionGroup,
+  animate: () => animate,
+  bounceIn: () => bounceIn,
+  bounceOut: () => bounceOut,
+  fadeIn: () => fadeIn,
+  fadeOut: () => fadeOut,
+  flipIn: () => flipIn,
+  pulse: () => pulse,
+  reducedMotion: () => reducedMotion,
+  scaleDown: () => scaleDown,
+  scaleUp: () => scaleUp,
+  sequence: () => sequence,
+  shake: () => shake,
+  slideIn: () => slideIn,
+  slideOut: () => slideOut,
+  spring: () => spring,
+  stagger: () => stagger,
+  transition: () => transition,
+  viewTransition: () => viewTransition
+});
+module.exports = __toCommonJS(motion_exports);
+
+// src/ui/transition.ts
+function transition(element, options = {}) {
+  const {
+    property = "all",
+    duration = 300,
+    easing = "ease",
+    delay = 0,
+    enterClass,
+    leaveClass,
+    activeClass,
+    onEnterDone,
+    onLeaveDone
+  } = options;
+  const transitionValue = `${property} ${duration}ms ${easing} ${delay}ms`;
+  function enter() {
+    return new Promise((resolve) => {
+      element.style.transition = transitionValue;
+      if (enterClass) element.classList.add(enterClass);
+      if (leaveClass) element.classList.remove(leaveClass);
+      void element.offsetHeight;
+      if (activeClass) element.classList.add(activeClass);
+      const done = () => {
+        if (enterClass) element.classList.remove(enterClass);
+        onEnterDone?.();
+        resolve();
+      };
+      if (duration > 0) {
+        setTimeout(done, duration + delay);
+      } else {
+        done();
+      }
+    });
+  }
+  function leave() {
+    return new Promise((resolve) => {
+      element.style.transition = transitionValue;
+      if (activeClass) element.classList.remove(activeClass);
+      if (leaveClass) element.classList.add(leaveClass);
+      if (enterClass) element.classList.remove(enterClass);
+      const done = () => {
+        if (leaveClass) element.classList.remove(leaveClass);
+        onLeaveDone?.();
+        resolve();
+      };
+      if (duration > 0) {
+        setTimeout(done, duration + delay);
+      } else {
+        done();
+      }
+    });
+  }
+  return { enter, leave };
+}
+function spring(element, keyframes, options = {}) {
+  const defaults = {
+    duration: 300,
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    fill: "forwards"
+  };
+  return new Promise((resolve) => {
+    const animation = element.animate(keyframes, { ...defaults, ...options });
+    animation.onfinish = () => resolve();
+    animation.oncancel = () => resolve();
+  });
+}
+
+// src/ui/animationPresets.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function createPreset(keyframes, defaults, overrides) {
+  const opts = {
+    ...defaults,
+    ...overrides,
+    fill: overrides?.fill ?? defaults.fill ?? "forwards"
+  };
+  if (prefersReducedMotion()) {
+    return {
+      keyframes: [keyframes[keyframes.length - 1]],
+      options: { ...opts, duration: 0, delay: 0 }
+    };
+  }
+  return { keyframes, options: opts };
+}
+function applyPreset(el, preset) {
+  return new Promise((resolve) => {
+    const anim = el.animate(preset.keyframes, preset.options);
+    anim.onfinish = () => resolve();
+    anim.oncancel = () => resolve();
+  });
+}
+function fadeIn(opts) {
+  return createPreset([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: "ease-out" }, opts);
+}
+function fadeOut(opts) {
+  return createPreset([{ opacity: 1 }, { opacity: 0 }], { duration: 300, easing: "ease-in" }, opts);
+}
+var slideOffsets = {
+  up: "translateY(20px)",
+  down: "translateY(-20px)",
+  left: "translateX(20px)",
+  right: "translateX(-20px)"
+};
+function slideIn(direction = "up", opts) {
+  return createPreset(
+    [
+      { transform: slideOffsets[direction], opacity: 0 },
+      { transform: "translate(0, 0)", opacity: 1 }
+    ],
+    { duration: 400, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
+    opts
+  );
+}
+function slideOut(direction = "down", opts) {
+  return createPreset(
+    [
+      { transform: "translate(0, 0)", opacity: 1 },
+      { transform: slideOffsets[direction], opacity: 0 }
+    ],
+    { duration: 300, easing: "cubic-bezier(0.4, 0, 1, 1)" },
+    opts
+  );
+}
+function scaleUp(opts) {
+  return createPreset(
+    [
+      { transform: "scale(0.85)", opacity: 0 },
+      { transform: "scale(1)", opacity: 1 }
+    ],
+    { duration: 350, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    opts
+  );
+}
+function scaleDown(opts) {
+  return createPreset(
+    [
+      { transform: "scale(1)", opacity: 1 },
+      { transform: "scale(0.85)", opacity: 0 }
+    ],
+    { duration: 250, easing: "ease-in" },
+    opts
+  );
+}
+function bounceIn(opts) {
+  return createPreset(
+    [
+      { transform: "scale(0.3)", opacity: 0 },
+      { transform: "scale(1.05)", opacity: 0.8, offset: 0.5 },
+      { transform: "scale(0.95)", opacity: 0.9, offset: 0.7 },
+      { transform: "scale(1)", opacity: 1 }
+    ],
+    { duration: 500, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    opts
+  );
+}
+function bounceOut(opts) {
+  return createPreset(
+    [
+      { transform: "scale(1)", opacity: 1 },
+      { transform: "scale(1.05)", opacity: 0.9, offset: 0.3 },
+      { transform: "scale(0.3)", opacity: 0 }
+    ],
+    { duration: 400, easing: "ease-in" },
+    opts
+  );
+}
+function flipIn(axis = "x", opts) {
+  const prop = axis === "x" ? "rotateX" : "rotateY";
+  return createPreset(
+    [
+      { transform: `perspective(400px) ${prop}(90deg)`, opacity: 0 },
+      { transform: `perspective(400px) ${prop}(-10deg)`, opacity: 1, offset: 0.6 },
+      { transform: `perspective(400px) ${prop}(0deg)`, opacity: 1 }
+    ],
+    { duration: 500, easing: "ease-out" },
+    opts
+  );
+}
+function shake(opts) {
+  return createPreset(
+    [
+      { transform: "translateX(0)" },
+      { transform: "translateX(-8px)", offset: 0.1 },
+      { transform: "translateX(8px)", offset: 0.2 },
+      { transform: "translateX(-6px)", offset: 0.3 },
+      { transform: "translateX(6px)", offset: 0.4 },
+      { transform: "translateX(-4px)", offset: 0.5 },
+      { transform: "translateX(4px)", offset: 0.6 },
+      { transform: "translateX(-2px)", offset: 0.7 },
+      { transform: "translateX(0)" }
+    ],
+    { duration: 500, easing: "ease-out", fill: "none" },
+    opts
+  );
+}
+function pulse(opts) {
+  return createPreset(
+    [{ transform: "scale(1)" }, { transform: "scale(1.08)", offset: 0.5 }, { transform: "scale(1)" }],
+    { duration: 400, easing: "ease-in-out", fill: "none" },
+    opts
+  );
+}
+function animate(el, preset) {
+  return applyPreset(el, preset);
+}
+function stagger(elements, preset, delayBetween = 50) {
+  const promises = elements.map(
+    (el, i) => applyPreset(el, {
+      keyframes: preset.keyframes,
+      options: {
+        ...preset.options,
+        delay: (preset.options.delay || 0) + i * delayBetween
+      }
+    })
+  );
+  return Promise.all(promises).then(() => {
+  });
+}
+async function sequence(steps) {
+  for (const step of steps) {
+    await applyPreset(step.el, step.preset);
+  }
+}
+
+// src/reactivity/track.ts
+var subscriberStack = [];
+var currentSubscriber = null;
+var signalSubscribers = /* @__PURE__ */ new WeakMap();
+var SUBS = "__s";
+var notifyDepth = 0;
+var pendingQueue = [];
+var pendingSet = /* @__PURE__ */ new Set();
+var suspendDepth = 0;
+var trackingSuspended = false;
+function suspendTracking() {
+  if (suspendDepth === 0) {
+    subscriberStack.push(null);
+    currentSubscriber = null;
+    trackingSuspended = true;
+  }
+  suspendDepth++;
+}
+function resumeTracking() {
+  suspendDepth--;
+  if (suspendDepth === 0) {
+    subscriberStack.pop();
+    currentSubscriber = subscriberStack[subscriberStack.length - 1] || null;
+    trackingSuspended = false;
+  }
+}
+function recordDependency(signal2) {
+  if (!currentSubscriber) return;
+  let deps = currentSubscriber._deps;
+  if (!deps) {
+    deps = /* @__PURE__ */ new Set();
+    currentSubscriber._deps = deps;
+  }
+  if (!deps.has(signal2)) {
+    deps.add(signal2);
+    let subs = signal2[SUBS];
+    if (!subs) {
+      subs = /* @__PURE__ */ new Set();
+      signalSubscribers.set(signal2, subs);
+      signal2[SUBS] = subs;
+    }
+    subs.add(currentSubscriber);
+    if (subs.size === 1) {
+      signal2.__f = currentSubscriber;
+    } else if (signal2.__f !== void 0) {
+      signal2.__f = void 0;
+    }
+  }
+}
+function propagateDirty(sub) {
+  sub();
+  let sig = sub._sig;
+  let suspended = false;
+  if (sig && sig._g) {
+    const sDeps = sub._deps;
+    if (sDeps && sDeps.size === 1) {
+      suspendTracking();
+      suspended = true;
+      const s = sig;
+      s._d = false;
+      s._v = s._g();
+    }
+  }
+  while (sig) {
+    const first = sig.__f;
+    if (first) {
+      if (first._c) {
+        const nSig = first._sig;
+        nSig._d = true;
+        if (suspended && nSig._g) {
+          const fDeps = first._deps;
+          if (fDeps && fDeps.size === 1) {
+            nSig._d = false;
+            nSig._v = nSig._g();
+          }
+        }
+        sig = nSig;
+        continue;
+      }
+      if (!pendingSet.has(first)) {
+        pendingSet.add(first);
+        pendingQueue.push(first);
+      }
+      break;
+    }
+    const subs = sig[SUBS];
+    if (!subs) break;
+    let nextSig;
+    for (const s of subs) {
+      if (s._c) {
+        s();
+        const nSig = s._sig;
+        if (nSig && !nextSig) {
+          nextSig = nSig;
+        } else if (nSig) {
+          propagateDirty(s);
+        }
+      } else if (!pendingSet.has(s)) {
+        pendingSet.add(s);
+        pendingQueue.push(s);
+      }
+    }
+    sig = nextSig;
+  }
+  if (suspended) resumeTracking();
+}
+function notifySubscribers(signal2) {
+  const first = signal2.__f;
+  if (first) {
+    if (notifyDepth > 0) {
+      if (first._c) {
+        propagateDirty(first);
+      } else if (!pendingSet.has(first)) {
+        pendingSet.add(first);
+        pendingQueue.push(first);
+      }
+      return;
+    }
+    notifyDepth++;
+    try {
+      if (first._c) {
+        propagateDirty(first);
+      } else {
+        first();
+      }
+      let i = 0;
+      while (i < pendingQueue.length) {
+        pendingQueue[i]();
+        i++;
+      }
+    } finally {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+      notifyDepth--;
+    }
+    return;
+  }
+  const subs = signal2[SUBS];
+  if (!subs || subs.size === 0) return;
+  if (notifyDepth > 0) {
+    for (const sub of subs) {
+      if (sub._c) {
+        propagateDirty(sub);
+      } else if (!pendingSet.has(sub)) {
+        pendingSet.add(sub);
+        pendingQueue.push(sub);
+      }
+    }
+    return;
+  }
+  notifyDepth++;
+  try {
+    let directCount = 0;
+    for (const sub of subs) {
+      pendingQueue[directCount++] = sub;
+    }
+    for (let i2 = 0; i2 < directCount; i2++) {
+      if (pendingQueue[i2]._c) {
+        propagateDirty(pendingQueue[i2]);
+      }
+    }
+    for (let i2 = 0; i2 < directCount; i2++) {
+      if (!pendingQueue[i2]._c) {
+        if (!pendingSet.has(pendingQueue[i2])) {
+          pendingQueue[i2]();
+        }
+      }
+    }
+    let i = directCount;
+    while (i < pendingQueue.length) {
+      pendingQueue[i]();
+      i++;
+    }
+  } finally {
+    pendingQueue.length = 0;
+    pendingSet.clear();
+    notifyDepth--;
+  }
+}
+
+// src/reactivity/batch.ts
+var batchDepth = 0;
+var pendingSignals = /* @__PURE__ */ new Set();
+function enqueueBatchedSignal(signal2) {
+  if (batchDepth === 0) return false;
+  pendingSignals.add(signal2);
+  return true;
+}
+
+// src/core/signals/signal.ts
+function signal(initial, options) {
+  const state = { value: initial };
+  const debugName = options?.name;
+  if (debugName) {
+    state.__name = debugName;
+  }
+  function get() {
+    recordDependency(state);
+    return state.value;
+  }
+  get.__signal = state;
+  if (debugName) get.__name = debugName;
+  function set(next) {
+    const newValue = typeof next === "function" ? next(state.value) : next;
+    if (Object.is(newValue, state.value)) return;
+    const oldValue = state.value;
+    state.value = newValue;
+    const hook2 = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (hook2) hook2.emit("signal:update", { signal: state, name: debugName, oldValue, newValue });
+    if (!enqueueBatchedSignal(state)) {
+      notifySubscribers(state);
+    }
+  }
+  const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
+  return [get, set];
+}
+
+// src/ui/TransitionGroup.ts
+function TransitionGroup(options) {
+  const [elements, setElements] = signal([]);
+  const positions = /* @__PURE__ */ new Map();
+  function add(el) {
+    setElements((prev) => [...prev, el]);
+    if (options.enter) {
+      options.enter(el);
+    }
+  }
+  async function remove(el) {
+    if (options.leave) {
+      await options.leave(el);
+    }
+    setElements((prev) => prev.filter((e) => e !== el));
+  }
+  function track(newElements) {
+    const oldPositions = /* @__PURE__ */ new Map();
+    for (const el of elements()) {
+      if (typeof el.getBoundingClientRect === "function") {
+        oldPositions.set(el, el.getBoundingClientRect());
+      }
+    }
+    const currentSet = new Set(elements());
+    for (const el of newElements) {
+      if (!currentSet.has(el)) {
+        if (options.enter) {
+          options.enter(el);
+        }
+      }
+    }
+    const newSet = new Set(newElements);
+    for (const el of elements()) {
+      if (!newSet.has(el)) {
+        if (options.leave) {
+          options.leave(el);
+        }
+      }
+    }
+    setElements(newElements);
+    if (options.move) {
+      for (const el of newElements) {
+        const oldRect = oldPositions.get(el);
+        if (oldRect && typeof el.getBoundingClientRect === "function") {
+          const newRect = el.getBoundingClientRect();
+          if (oldRect.left !== newRect.left || oldRect.top !== newRect.top) {
+            options.move(el);
+          }
+        }
+      }
+    }
+    positions.clear();
+    for (const el of newElements) {
+      if (typeof el.getBoundingClientRect === "function") {
+        positions.set(el, el.getBoundingClientRect());
+      }
+    }
+  }
+  return { add, remove, track };
+}
+
+// src/ui/viewTransition.ts
+function viewTransition(callback) {
+  const [isTransitioning, setIsTransitioning] = signal(false);
+  async function start() {
+    setIsTransitioning(true);
+    try {
+      if (typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function") {
+        const transition2 = document.startViewTransition(callback);
+        await transition2.finished;
+      } else {
+        await callback();
+      }
+    } finally {
+      setIsTransitioning(false);
+    }
+  }
+  return { start, isTransitioning };
+}
+
+// src/ui/reducedMotion.ts
+function reducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    const [reduced2] = signal(false);
+    return { reduced: reduced2, dispose: () => {
+    } };
+  }
+  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const [reduced, setReduced] = signal(mql.matches);
+  const handler = (event) => {
+    setReduced(event.matches);
+  };
+  mql.addEventListener("change", handler);
+  function dispose() {
+    mql.removeEventListener("change", handler);
+  }
+  return { reduced, dispose };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TransitionGroup,
+  animate,
+  bounceIn,
+  bounceOut,
+  fadeIn,
+  fadeOut,
+  flipIn,
+  pulse,
+  reducedMotion,
+  scaleDown,
+  scaleUp,
+  sequence,
+  shake,
+  slideIn,
+  slideOut,
+  spring,
+  stagger,
+  transition,
+  viewTransition
+});