sibujs 1.0.0-beta.1

package/dist/chunk-5CRBB7XP.js

@@ -0,0 +1,358 @@
+import {
+  sbSignal
+} from "./chunk-GBEYQRO2.js";
+
+// src/core/ui/transition.ts
+function sbTransition(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 sbSpring(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/core/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/core/ui/TransitionGroup.ts
+function TransitionGroup(options) {
+  const [elements, setElements] = sbSignal([]);
+  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/core/ui/sbViewTransition.ts
+function sbViewTransition(callback) {
+  const [isTransitioning, setIsTransitioning] = sbSignal(false);
+  async function start() {
+    setIsTransitioning(true);
+    try {
+      if (typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function") {
+        const transition = document.startViewTransition(callback);
+        await transition.finished;
+      } else {
+        await callback();
+      }
+    } finally {
+      setIsTransitioning(false);
+    }
+  }
+  return { start, isTransitioning };
+}
+
+// src/core/ui/sbReducedMotion.ts
+function sbReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    const [reduced2] = sbSignal(false);
+    return { reduced: reduced2, dispose: () => {
+    } };
+  }
+  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const [reduced, setReduced] = sbSignal(mql.matches);
+  const handler = (event) => {
+    setReduced(event.matches);
+  };
+  mql.addEventListener("change", handler);
+  function dispose() {
+    mql.removeEventListener("change", handler);
+  }
+  return { reduced, dispose };
+}
+
+export {
+  sbTransition,
+  sbSpring,
+  fadeIn,
+  fadeOut,
+  slideIn,
+  slideOut,
+  scaleUp,
+  scaleDown,
+  bounceIn,
+  bounceOut,
+  flipIn,
+  shake,
+  pulse,
+  animate,
+  stagger,
+  sequence,
+  TransitionGroup,
+  sbViewTransition,
+  sbReducedMotion
+};

package/dist/chunk-5G67D3IZ.js

@@ -0,0 +1,168 @@
+// src/core/ssr.ts
+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) => renderToString(child)).join("");
+  }
+  if (element.nodeType === 3) {
+    return escapeHtml(element.textContent || "");
+  }
+  if (element.nodeType === 8) {
+    return `<!--${element.textContent || ""}-->`;
+  }
+  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)) {
+    html += renderToString(child);
+  }
+  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 = {}) {
+  const content = renderToString(component());
+  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)) {
+      yield* renderToStream(child);
+    }
+    return;
+  }
+  if (element.nodeType === 3) {
+    yield escapeHtml(element.textContent || "");
+    return;
+  }
+  if (element.nodeType === 8) {
+    yield `<!--${element.textContent || ""}-->`;
+    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)) {
+    yield* renderToStream(child);
+  }
+  yield `</${tag}>`;
+}
+async function collectStream(stream) {
+  let result = "";
+  for await (const chunk of stream) {
+    result += chunk;
+  }
+  return result;
+}
+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");
+}
+var SSR_DATA_ATTR = "__SIBU_SSR_DATA__";
+function serializeState(state) {
+  const json = JSON.stringify(state).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+  return `<script>window.${SSR_DATA_ATTR}=${json}</script>`;
+}
+function deserializeState() {
+  if (typeof window === "undefined") return void 0;
+  return window[SSR_DATA_ATTR];
+}
+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,
+  island,
+  hydrateIslands,
+  serializeState,
+  deserializeState
+};

package/dist/chunk-5NCPAWBE.js

@@ -0,0 +1,99 @@
+import {
+  track
+} from "./chunk-GBEYQRO2.js";
+
+// src/utils/sanitize.ts
+function sanitize(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeUrl(url) {
+  const trimmed = url.replace(/[\x00-\x20\x7f-\x9f]+/g, "").trim();
+  if (!trimmed) return "";
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("javascript:") || lower.startsWith("data:") || lower.startsWith("vbscript:") || lower.startsWith("blob:")) {
+    return "";
+  }
+  return trimmed;
+}
+var URL_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "cite", "poster", "background", "srcset"]);
+function isUrlAttribute(attr) {
+  return URL_ATTRIBUTES.has(attr);
+}
+function sanitizeAttribute(attr, value) {
+  if (isUrlAttribute(attr)) {
+    return sanitizeUrl(value);
+  }
+  return sanitize(value);
+}
+
+// src/reactivity/bindAttribute.ts
+function bindAttribute(el, attr, getter) {
+  function commit() {
+    let value;
+    try {
+      value = getter();
+    } catch {
+      return;
+    }
+    if (typeof value === "boolean") {
+      if (attr in el && (attr === "checked" || attr === "disabled" || attr === "selected")) {
+        el[attr] = value;
+      } else if (value) {
+        el.setAttribute(attr, "");
+      } else {
+        el.removeAttribute(attr);
+      }
+      return;
+    }
+    const str = sanitizeAttribute(attr, String(value));
+    if ((attr === "value" || attr === "checked") && attr in el) {
+      el[attr] = attr === "checked" ? Boolean(value) : str;
+    } else {
+      el.setAttribute(attr, str);
+    }
+  }
+  const teardown = track(commit);
+  return teardown;
+}
+function sbBindDynamic(el, nameGetter, valueGetter) {
+  let prevName = null;
+  function commit() {
+    let name;
+    try {
+      name = typeof nameGetter === "function" ? nameGetter() : nameGetter;
+    } catch {
+      return;
+    }
+    let value;
+    try {
+      value = typeof valueGetter === "function" ? valueGetter() : valueGetter;
+    } catch {
+      return;
+    }
+    if (name.toLowerCase().startsWith("on")) return;
+    if (prevName !== null && prevName !== name) {
+      el.removeAttribute(prevName);
+    }
+    const str = sanitizeAttribute(name, String(value));
+    if ((name === "value" || name === "checked") && name in el) {
+      el[name] = name === "checked" ? Boolean(value) : str;
+    } else {
+      el.setAttribute(name, str);
+    }
+    prevName = name;
+  }
+  const teardown = track(commit);
+  return () => {
+    teardown();
+    if (prevName !== null) {
+      el.removeAttribute(prevName);
+    }
+  };
+}
+
+export {
+  sanitizeUrl,
+  sanitizeAttribute,
+  bindAttribute,
+  sbBindDynamic
+};