@nil-/xit 0.2.3 → 0.2.5

package/assets/svelte/transition.js

@@ -0,0 +1,142 @@
+const M = (t) => t;
+function m(t) {
+  const e = t - 1;
+  return e * e * e + 1;
+}
+function C(t) {
+  return t < 0.5 ? 4 * t * t * t : 0.5 * Math.pow(2 * t - 2, 3) + 1;
+}
+function w(t) {
+  const e = typeof t == "string" && t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+  return e ? [parseFloat(e[1]), e[2] || "px"] : [
+    /** @type {number} */
+    t,
+    "px"
+  ];
+}
+function W(t, { delay: e = 0, duration: a = 400, easing: r = C, amount: p = 5, opacity: n = 0 } = {}) {
+  const c = getComputedStyle(t), s = +c.opacity, d = c.filter === "none" ? "" : c.filter, i = s * (1 - n), [o, y] = w(p);
+  return {
+    delay: e,
+    duration: a,
+    easing: r,
+    css: (f, u) => `opacity: ${s - i * u}; filter: ${d} blur(${u * o}${y});`
+  };
+}
+function q(t, { delay: e = 0, duration: a = 400, easing: r = M } = {}) {
+  const p = +getComputedStyle(t).opacity;
+  return {
+    delay: e,
+    duration: a,
+    easing: r,
+    css: (n) => `opacity: ${n * p}`
+  };
+}
+function B(t, { delay: e = 0, duration: a = 400, easing: r = m, x: p = 0, y: n = 0, opacity: c = 0 } = {}) {
+  const s = getComputedStyle(t), d = +s.opacity, i = s.transform === "none" ? "" : s.transform, o = d * (1 - c), [y, f] = w(p), [u, _] = w(n);
+  return {
+    delay: e,
+    duration: a,
+    easing: r,
+    css: ($, h) => `
+			transform: ${i} translate(${(1 - $) * y}${f}, ${(1 - $) * u}${_});
+			opacity: ${d - o * h}`
+  };
+}
+function L(t, { delay: e = 0, duration: a = 400, easing: r = m, axis: p = "y" } = {}) {
+  const n = getComputedStyle(t), c = +n.opacity, s = p === "y" ? "height" : "width", d = parseFloat(n[s]), i = p === "y" ? ["top", "bottom"] : ["left", "right"], o = i.map(
+    (l) => (
+      /** @type {'Left' | 'Right' | 'Top' | 'Bottom'} */
+      `${l[0].toUpperCase()}${l.slice(1)}`
+    )
+  ), y = parseFloat(n[`padding${o[0]}`]), f = parseFloat(n[`padding${o[1]}`]), u = parseFloat(n[`margin${o[0]}`]), _ = parseFloat(n[`margin${o[1]}`]), $ = parseFloat(
+    n[`border${o[0]}Width`]
+  ), h = parseFloat(
+    n[`border${o[1]}Width`]
+  );
+  return {
+    delay: e,
+    duration: a,
+    easing: r,
+    css: (l) => `overflow: hidden;opacity: ${Math.min(l * 20, 1) * c};${s}: ${l * d}px;padding-${i[0]}: ${l * y}px;padding-${i[1]}: ${l * f}px;margin-${i[0]}: ${l * u}px;margin-${i[1]}: ${l * _}px;border-${i[0]}-width: ${l * $}px;border-${i[1]}-width: ${l * h}px;min-${s}: 0`
+  };
+}
+function R(t, { delay: e = 0, duration: a = 400, easing: r = m, start: p = 0, opacity: n = 0 } = {}) {
+  const c = getComputedStyle(t), s = +c.opacity, d = c.transform === "none" ? "" : c.transform, i = 1 - p, o = s * (1 - n);
+  return {
+    delay: e,
+    duration: a,
+    easing: r,
+    css: (y, f) => `
+			transform: ${d} scale(${1 - i * f});
+			opacity: ${s - o * f}
+		`
+  };
+}
+function z(t, { delay: e = 0, speed: a, duration: r, easing: p = C } = {}) {
+  let n = t.getTotalLength();
+  const c = getComputedStyle(t);
+  return c.strokeLinecap !== "butt" && (n += parseInt(c.strokeWidth)), r === void 0 ? a === void 0 ? r = 800 : r = n / a : typeof r == "function" && (r = r(n)), {
+    delay: e,
+    duration: r,
+    easing: p,
+    css: (s, d) => `
+			stroke-dasharray: ${n};
+			stroke-dashoffset: ${d * n};
+		`
+  };
+}
+function v(t, e) {
+  for (const a in e) t[a] = e[a];
+  return (
+    /** @type {T & S} */
+    t
+  );
+}
+function I({ fallback: t, ...e }) {
+  const a = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+  function p(c, s, d) {
+    const {
+      delay: i = 0,
+      duration: o = (
+        /** @param {number} d */
+        (g) => Math.sqrt(g) * 30
+      ),
+      easing: y = m
+    } = v(v({}, e), d), f = c.getBoundingClientRect(), u = s.getBoundingClientRect(), _ = f.left - u.left, $ = f.top - u.top, h = f.width / u.width, l = f.height / u.height, k = Math.sqrt(_ * _ + $ * $), x = getComputedStyle(s), F = x.transform === "none" ? "" : x.transform, S = +x.opacity;
+    return {
+      delay: i,
+      duration: typeof o == "function" ? o(k) : o,
+      easing: y,
+      css: (g, b) => `
+			   opacity: ${g * S};
+			   transform-origin: top left;
+			   transform: ${F} translate(${b * _}px,${b * $}px) scale(${g + (1 - g) * h}, ${g + (1 - g) * l});
+		   `
+    };
+  }
+  function n(c, s, d) {
+    return (i, o) => (c.set(o.key, i), () => {
+      if (s.has(o.key)) {
+        const y = s.get(o.key);
+        return s.delete(o.key), p(
+          /** @type {Element} */
+          y,
+          i,
+          o
+        );
+      }
+      return c.delete(o.key), t && t(i, o, d);
+    });
+  }
+  return [n(r, a, !1), n(a, r, !0)];
+}
+export {
+  W as blur,
+  I as crossfade,
+  z as draw,
+  q as fade,
+  B as fly,
+  R as scale,
+  L as slide
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/xit",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "peerDependencies": {
     "svelte": "^5.7.1"
   },
@@ -11,9 +11,9 @@
       "types": "./index.d.ts",
       "default": "./index.js"
     },
-    "./test": {
-      "types": "./test.d.ts",
-      "default": "./test.js"
+    "./test/Frame.svelte": {
+      "types": "./test/Frame.svelte.d.ts",
+      "svelte": "./test/Frame.svelte"
     },
     "./components/layouts/Container.svelte": {
       "types": "./components/layouts/Container.svelte.d.ts",

package/test/Frame.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">import { xit } from "../index";
+import { get } from "svelte/store";
+let {
+  decoder,
+  selected = -1,
+  load
+} = $props();
+let { signals, values, frame, frame_ui } = xit();
+const frame_info = async (tag, decoder2) => {
+  const { values: values2, unsub } = await frame("frame_info", tag);
+  const load2 = async (key) => {
+    const v = values2.json(key, [], {
+      decode: decoder2,
+      encode: () => {
+        return new Uint8Array();
+      }
+    });
+    return Promise.all(
+      get(v).map((v2) => {
+        const [frame_id, mark, g] = v2.split(":");
+        if (g !== "V") {
+          return;
+        }
+        if (mark === "T") {
+          return frame_ui(frame_id, tag);
+        } else if (mark === "U") {
+          return frame_ui(frame_id);
+        }
+      }).filter((v2) => v2 != null)
+    );
+  };
+  const [inputs, outputs] = await Promise.all([load2("inputs"), load2("outputs")]);
+  unsub();
+  return { inputs, outputs };
+};
+const tags = values.json("tags", [], {
+  decode: decoder,
+  encode: () => new Uint8Array()
+});
+const finalize = signals.string("finalize");
+let a_inputs = $state(null);
+let a_outputs = $state(null);
+let title = $state("");
+const update = (v) => {
+  a_inputs = null;
+  a_outputs = null;
+  const t = $tags;
+  if (0 <= v && v < t.length) {
+    frame_info(t[v], decoder).then(({ inputs, outputs }) => {
+      a_inputs = inputs;
+      a_outputs = outputs;
+    });
+    title = t[selected];
+  } else {
+    title = "";
+  }
+};
+$effect(() => {
+  update(selected);
+});
+</script>
+
+<svelte:head>
+    <title>nil - xit {title}</title>
+</svelte:head>
+
+<svelte:window
+    onkeydown={(event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+            if (0 <= selected && selected < $tags.length) {
+                finalize($tags[selected]);
+                event.preventDefault();
+            }
+        }
+    }}
+/>
+
+{@render load($tags.sort(), { inputs: a_inputs, outputs: a_outputs })}

package/test/Frame.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { CoDec, Action } from "../index";
+type $$ComponentProps = {
+    decoder: CoDec<any>["decode"];
+    selected?: number;
+    load: Snippet<[
+        string[],
+        {
+            inputs: Action<HTMLElement>[] | null;
+            outputs: Action<HTMLElement>[] | null;
+        }
+    ]>;
+};
+declare const Frame: import("svelte").Component<$$ComponentProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/test.d.ts

@@ -1,8 +0,0 @@
-import type { CoDec } from "./index";
-export declare const xit_test: () => {
-    xit: import("./index").Context;
-    frame_info: (tag: string, decoder: CoDec<any>["decode"]) => Promise<{
-        inputs: import("./index").Action<HTMLElement>[];
-        outputs: import("./index").Action<HTMLElement>[];
-    }>;
-};

package/test.js

@@ -1,31 +0,0 @@
-import { xit } from "./index";
-import { get } from "svelte/store";
-export const xit_test = () => {
-    const x = xit();
-    return {
-        xit: x,
-        frame_info: async (tag, decoder) => {
-            const { values, unsub } = await x.frame("frame_info", tag);
-            const load = async (key) => {
-                const v = values.json(key, [], { decode: decoder, encode: () => { return new Uint8Array(); } });
-                return Promise.all(get(v)
-                    .map(v => {
-                    const [frame_id, mark, g] = v.split(":");
-                    if (g !== "V") {
-                        return;
-                    }
-                    if (mark === "T") {
-                        return x.frame_ui(frame_id, tag);
-                    }
-                    else if (mark === "U") {
-                        return x.frame_ui(frame_id);
-                    }
-                })
-                    .filter(v => v != null));
-            };
-            const [inputs, outputs] = await Promise.all([load("inputs"), load("outputs")]);
-            unsub();
-            return { inputs, outputs };
-        }
-    };
-};