sibujs 1.0.0 → 1.0.2

package/dist/chunk-6HLLIF3K.js

@@ -0,0 +1,398 @@
+import {
+  signal
+} from "./chunk-YECR7UIA.js";
+
+// 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/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 };
+}
+
+// src/ui/springSignal.ts
+var prefersReducedMotion2 = () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function springSignal(initial, options) {
+  const stiffness = options?.stiffness ?? 0.15;
+  const damping = options?.damping ?? 0.8;
+  const precision = options?.precision ?? 0.01;
+  const [value, setValue] = signal(initial);
+  let current = initial;
+  let velocity = 0;
+  let target = initial;
+  let rafId = null;
+  function tick() {
+    const force = -stiffness * (current - target);
+    const dampingForce = -damping * velocity;
+    velocity += force + dampingForce;
+    current += velocity;
+    if (Math.abs(current - target) < precision && Math.abs(velocity) < precision) {
+      current = target;
+      velocity = 0;
+      rafId = null;
+      setValue(current);
+      return;
+    }
+    setValue(current);
+    rafId = requestAnimationFrame(tick);
+  }
+  function set(newTarget) {
+    target = newTarget;
+    if (prefersReducedMotion2()) {
+      current = newTarget;
+      velocity = 0;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      setValue(current);
+      return;
+    }
+    if (rafId === null) {
+      rafId = requestAnimationFrame(tick);
+    }
+  }
+  function dispose() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+  return [value, set, dispose];
+}
+
+export {
+  transition,
+  spring,
+  fadeIn,
+  fadeOut,
+  slideIn,
+  slideOut,
+  scaleUp,
+  scaleDown,
+  bounceIn,
+  bounceOut,
+  flipIn,
+  shake,
+  pulse,
+  animate,
+  stagger,
+  sequence,
+  TransitionGroup,
+  viewTransition,
+  reducedMotion,
+  springSignal
+};

package/dist/chunk-7TQKR4PP.js

@@ -0,0 +1,294 @@
+import {
+  isDev
+} from "./chunk-4MYMUBRS.js";
+
+// src/platform/ssr.ts
+var _isDev = isDev();
+function ssrErrorComment(err) {
+  if (_isDev) {
+    return `<!--SSR error: ${escapeHtml(err instanceof Error ? err.message : String(err))}-->`;
+  }
+  return "<!--SSR error-->";
+}
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function renderToString(element) {
+  if (element instanceof DocumentFragment) {
+    return Array.from(element.childNodes).map((child) => {
+      try {
+        return renderToString(child);
+      } catch (err) {
+        return ssrErrorComment(err);
+      }
+    }).join("");
+  }
+  if (element.nodeType === 3) {
+    return escapeHtml(element.textContent || "");
+  }
+  if (element.nodeType === 8) {
+    const content = (element.textContent || "").replace(/-->/g, "--&gt;");
+    return `<!--${content}-->`;
+  }
+  if (!(element instanceof HTMLElement)) {
+    return element.textContent || "";
+  }
+  const tag = element.tagName.toLowerCase();
+  let html = `<${tag}`;
+  for (const attr of Array.from(element.attributes)) {
+    html += ` ${attr.name}="${escapeAttr(attr.value)}"`;
+  }
+  if (element.dataset && !element.dataset.sibuHydrate) {
+    html += ` data-sibu-ssr="true"`;
+  }
+  if (VOID_ELEMENTS.has(tag)) {
+    return `${html} />`;
+  }
+  html += ">";
+  for (const child of Array.from(element.childNodes)) {
+    try {
+      html += renderToString(child);
+    } catch (err) {
+      html += ssrErrorComment(err);
+    }
+  }
+  html += `</${tag}>`;
+  return html;
+}
+function hydrate(component, container) {
+  const clientTree = component();
+  hydrateNode(container.firstElementChild, clientTree);
+  container.setAttribute("data-sibu-hydrated", "true");
+}
+function hydrateNode(serverNode, clientNode) {
+  if (!serverNode) return;
+  const serverChildren = Array.from(serverNode.children);
+  const clientChildren = Array.from(clientNode.children);
+  for (let i = 0; i < Math.min(serverChildren.length, clientChildren.length); i++) {
+    hydrateNode(serverChildren[i], clientChildren[i]);
+  }
+}
+function renderToDocument(component, options = {}) {
+  let content;
+  try {
+    content = renderToString(component());
+  } catch (err) {
+    content = ssrErrorComment(err);
+  }
+  const metaTags = (options.meta || []).map(
+    (attrs) => `<meta ${Object.entries(attrs).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ")} />`
+  ).join("\n    ");
+  const linkTags = (options.links || []).map(
+    (attrs) => `<link ${Object.entries(attrs).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ")} />`
+  ).join("\n    ");
+  const scriptTags = (options.scripts || []).map((src) => `<script src="${escapeAttr(src)}"></script>`).join("\n    ");
+  const bodyAttrs = options.bodyAttrs ? " " + Object.entries(options.bodyAttrs).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ") : "";
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    ${options.title ? `<title>${escapeHtml(options.title)}</title>` : ""}
+    ${metaTags}
+    ${linkTags}
+    ${options.headExtra || ""}
+  </head>
+  <body${bodyAttrs}>
+    <div id="app">${content}</div>
+    ${scriptTags}
+  </body>
+</html>`;
+}
+async function* renderToStream(element) {
+  if (element instanceof DocumentFragment) {
+    for (const child of Array.from(element.childNodes)) {
+      try {
+        yield* renderToStream(child);
+      } catch (err) {
+        yield ssrErrorComment(err);
+      }
+    }
+    return;
+  }
+  if (element.nodeType === 3) {
+    yield escapeHtml(element.textContent || "");
+    return;
+  }
+  if (element.nodeType === 8) {
+    const content = (element.textContent || "").replace(/-->/g, "--&gt;");
+    yield `<!--${content}-->`;
+    return;
+  }
+  if (!(element instanceof HTMLElement)) {
+    yield element.textContent || "";
+    return;
+  }
+  const tag = element.tagName.toLowerCase();
+  let openTag = `<${tag}`;
+  for (const attr of Array.from(element.attributes)) {
+    openTag += ` ${attr.name}="${escapeAttr(attr.value)}"`;
+  }
+  if (VOID_ELEMENTS.has(tag)) {
+    yield `${openTag} />`;
+    return;
+  }
+  yield `${openTag}>`;
+  for (const child of Array.from(element.childNodes)) {
+    try {
+      yield* renderToStream(child);
+    } catch (err) {
+      yield ssrErrorComment(err);
+    }
+  }
+  yield `</${tag}>`;
+}
+async function collectStream(stream) {
+  let result = "";
+  for await (const chunk of stream) {
+    result += chunk;
+  }
+  return result;
+}
+function renderToReadableStream(element) {
+  const generator = renderToStream(element);
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await generator.next();
+      if (done) {
+        controller.close();
+      } else {
+        controller.enqueue(value);
+      }
+    },
+    cancel() {
+      generator.return(void 0);
+    }
+  });
+}
+function island(id, component) {
+  const el = component();
+  el.setAttribute("data-sibu-island", id);
+  return el;
+}
+function hydrateIslands(container, islands) {
+  const markers = container.querySelectorAll("[data-sibu-island]");
+  for (const marker of Array.from(markers)) {
+    const id = marker.getAttribute("data-sibu-island") ?? "";
+    const factory = islands[id];
+    if (!factory) continue;
+    const clientTree = factory();
+    hydrateNode(marker, clientTree);
+    marker.setAttribute("data-sibu-hydrated", "true");
+  }
+  container.setAttribute("data-sibu-hydrated", "partial");
+}
+function hydrateProgressively(container, islands, options) {
+  const markers = container.querySelectorAll("[data-sibu-island]");
+  const cleanups = [];
+  for (const marker of Array.from(markers)) {
+    const id = marker.getAttribute("data-sibu-island") ?? "";
+    const factory = islands[id];
+    if (!factory) continue;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const clientTree = factory();
+            hydrateNode(marker, clientTree);
+            marker.setAttribute("data-sibu-hydrated", "true");
+            observer.disconnect();
+            break;
+          }
+        }
+      },
+      { rootMargin: "200px", ...options }
+    );
+    observer.observe(marker);
+    cleanups.push(() => observer.disconnect());
+  }
+  container.setAttribute("data-sibu-hydrated", "progressive");
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+var suspenseIdCounter = 0;
+function resetSSRState() {
+  suspenseIdCounter = 0;
+}
+function ssrSuspense(props) {
+  const id = `sibu-sus-${suspenseIdCounter++}`;
+  const fallbackEl = props.fallback();
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute("data-sibu-suspense-id", id);
+  wrapper.appendChild(fallbackEl);
+  const promise = props.content().then((resolvedEl) => ({
+    id,
+    html: renderToString(resolvedEl)
+  }));
+  return { element: wrapper, promise };
+}
+function suspenseSwapScript(id, nonce) {
+  const safeId = id.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+  const nonceAttr = nonce ? ` nonce="${escapeAttr(nonce)}"` : "";
+  return `<script${nonceAttr}>(function(){var t=document.getElementById("sibu-resolved-${safeId}");var f=document.querySelector('[data-sibu-suspense-id="${safeId}"]');if(t&&f){while(t.firstChild)f.appendChild(t.firstChild);t.remove();f.removeAttribute("data-sibu-suspense-id");}})()</script>`;
+}
+async function* renderToSuspenseStream(element, pendingBoundaries = []) {
+  yield* renderToStream(element);
+  if (pendingBoundaries.length > 0) {
+    const resolved = await Promise.all(pendingBoundaries);
+    for (const { id, html } of resolved) {
+      yield `<div hidden id="sibu-resolved-${escapeAttr(id)}">${html}</div>`;
+      yield suspenseSwapScript(id);
+    }
+  }
+}
+var SSR_DATA_ATTR = "__SIBU_SSR_DATA__";
+function serializeState(state, nonce) {
+  const json = JSON.stringify(state).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+  const nonceAttr = nonce ? ` nonce="${escapeAttr(nonce)}"` : "";
+  return `<script${nonceAttr}>window.${SSR_DATA_ATTR}=${json}</script>`;
+}
+function deserializeState(validate) {
+  if (typeof window === "undefined") return void 0;
+  const raw = window[SSR_DATA_ATTR];
+  if (raw === void 0) return void 0;
+  if (validate && !validate(raw)) return void 0;
+  return raw;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export {
+  renderToString,
+  hydrate,
+  renderToDocument,
+  renderToStream,
+  collectStream,
+  renderToReadableStream,
+  island,
+  hydrateIslands,
+  hydrateProgressively,
+  resetSSRState,
+  ssrSuspense,
+  suspenseSwapScript,
+  renderToSuspenseStream,
+  serializeState,
+  deserializeState
+};