@nil-/xit 0.1.27 → 0.1.29

package/assets/svelte/store.js

@@ -1,78 +1,75 @@
-import { s as q, n as b, u as x, a as z, r as j, e as A, b as h, c as O, g as B, t as C, d as E } from "./index.js";
+import { n as l, u as h, s as z, r as j, a as A, e as m, g as O, b as S, t as B, c as C, d as E } from "./index.js";
 import "./internal/client.js";
-function M(e) {
-  q(e, e.v + 1);
-}
-function m(e, t, n) {
+function v(e, r, t) {
   if (e == null)
-    return t(void 0), n && n(void 0), b;
-  const r = x(
+    return r(void 0), t && t(void 0), l;
+  const n = h(
     () => e.subscribe(
-      t,
+      r,
       // @ts-expect-error
-      n
+      t
     )
   );
-  return r.unsubscribe ? () => r.unsubscribe() : r;
+  return n.unsubscribe ? () => n.unsubscribe() : n;
 }
-const l = [];
-function v(e, t) {
+const a = [];
+function w(e, r) {
   return {
-    subscribe: g(e, t).subscribe
+    subscribe: g(e, r).subscribe
   };
 }
-function g(e, t = b) {
-  let n = null;
-  const r = /* @__PURE__ */ new Set();
-  function u(i) {
-    if (z(e, i) && (e = i, n)) {
-      const f = !l.length;
-      for (const s of r)
-        s[1](), l.push(s, e);
+function g(e, r = l) {
+  let t = null;
+  const n = /* @__PURE__ */ new Set();
+  function s(i) {
+    if (z(e, i) && (e = i, t)) {
+      const f = !a.length;
+      for (const u of n)
+        u[1](), a.push(u, e);
       if (f) {
-        for (let s = 0; s < l.length; s += 2)
-          l[s][0](l[s + 1]);
-        l.length = 0;
+        for (let u = 0; u < a.length; u += 2)
+          a[u][0](a[u + 1]);
+        a.length = 0;
       }
     }
   }
-  function o(i) {
-    u(i(
+  function c(i) {
+    s(i(
       /** @type {T} */
       e
     ));
   }
-  function c(i, f = b) {
-    const s = [i, f];
-    return r.add(s), r.size === 1 && (n = t(u, o) || b), i(
+  function o(i, f = l) {
+    const u = [i, f];
+    return n.add(u), n.size === 1 && (t = r(s, c) || l), i(
       /** @type {T} */
       e
     ), () => {
-      r.delete(s), r.size === 0 && n && (n(), n = null);
+      n.delete(u), n.size === 0 && t && (t(), t = null);
     };
   }
-  return { set: u, update: o, subscribe: c };
+  return { set: s, update: c, subscribe: o };
 }
-function P(e, t, n) {
-  const r = !Array.isArray(e), u = r ? [e] : e;
-  if (!u.every(Boolean))
+function M(e, r, t) {
+  const n = !Array.isArray(e), s = n ? [e] : e;
+  if (!s.every(Boolean))
     throw new Error("derived() expects stores as input, got a falsy value");
-  const o = t.length < 2;
-  return v(n, (c, i) => {
+  const c = r.length < 2;
+  return w(t, (o, i) => {
     let f = !1;
-    const s = [];
-    let d = 0, p = b;
+    const u = [];
+    let d = 0, p = l;
     const y = () => {
       if (d)
         return;
       p();
-      const a = t(r ? s[0] : s, c, i);
-      o ? c(a) : p = typeof a == "function" ? a : b;
-    }, S = u.map(
-      (a, _) => m(
-        a,
-        (k) => {
-          s[_] = k, d &= ~(1 << _), f && y();
+      const b = r(n ? u[0] : u, o, i);
+      c ? o(b) : p = typeof b == "function" ? b : l;
+    }, q = s.map(
+      (b, _) => v(
+        b,
+        (x) => {
+          u[_] = x, d &= ~(1 << _), f && y();
         },
         () => {
           d |= 1 << _;
@@ -80,83 +77,92 @@ function P(e, t, n) {
       )
     );
     return f = !0, y(), function() {
-      j(S), p(), f = !1;
+      j(q), p(), f = !1;
     };
   });
 }
-function T(e) {
+function P(e) {
   return {
     // @ts-expect-error TODO i suspect the bind is unnecessary
     subscribe: e.subscribe.bind(e)
   };
 }
-function w(e) {
-  let t;
-  return m(e, (n) => t = n)(), t;
+function k(e) {
+  let r;
+  return v(e, (t) => r = t)(), r;
+}
+function T(e) {
+  A(e, e.v + 1);
+}
+function $(e) {
+  let r = 0, t = C(0), n;
+  return () => {
+    m() && (O(t), S(() => (r === 0 && (n = h(() => e(() => T(t)))), r += 1, () => {
+      B().then(() => {
+        r -= 1, r === 0 && (n == null || n(), n = void 0);
+      });
+    })));
+  };
 }
-function $(e, t) {
-  let n = e();
-  const r = g(n, (u) => {
-    let o = n !== e();
-    const c = A(() => {
-      h(() => {
+function D(e, r) {
+  let t = e();
+  const n = g(t, (s) => {
+    let c = t !== e();
+    const o = E(() => {
+      S(() => {
         const i = e();
-        o && u(i);
+        c && s(i);
       });
     });
-    return o = !0, c;
+    return c = !0, o;
   });
-  return t ? {
-    set: t,
-    update: (u) => t(u(e())),
-    subscribe: r.subscribe
+  return r ? {
+    set: r,
+    update: (s) => r(s(e())),
+    subscribe: n.subscribe
   } : {
-    subscribe: r.subscribe
+    subscribe: n.subscribe
   };
 }
-function D(e) {
-  let t, n = E(0), r = 0, u = b;
-  function o() {
-    return O() ? (B(n), h(() => {
-      if (r === 0) {
-        let c = !1;
-        u = e.subscribe((i) => {
-          t = i, c && M(n);
-        }), c = !0;
-      }
-      return r += 1, () => {
-        C().then(() => {
-          r -= 1, r === 0 && u();
-        });
-      };
-    }), t) : w(e);
+function F(e) {
+  let r;
+  const t = $((s) => {
+    let c = !1;
+    const o = e.subscribe((i) => {
+      r = i, c && s();
+    });
+    return c = !0, o;
+  });
+  function n() {
+    return m() ? (t(), r) : k(e);
   }
   return "set" in e ? {
     get current() {
-      return o();
+      return n();
     },
-    set current(c) {
-      e.set(c);
+    set current(s) {
+      e.set(s);
     }
   } : {
     get current() {
-      return o();
+      return n();
     }
   };
 }
-const H = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const I = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  derived: P,
-  fromStore: D,
-  get: w,
-  readable: v,
-  readonly: T,
-  toStore: $,
+  derived: M,
+  fromStore: F,
+  get: k,
+  readable: w,
+  readonly: P,
+  toStore: D,
   writable: g
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  w as g,
-  H as i,
-  m as s,
+  $ as c,
+  k as g,
+  I as i,
+  v as s,
   g as w
 };

package/components/layouts/Container.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">let { children } = $props();
+</script>
+
+{#if children}
+    <div class="container">
+        <div>
+            {@render children()}
+        </div>
+    </div>
+{/if}
+
+
+<style>
+    .container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    .container > div {
+        inset: 0;
+        position: absolute;
+    }
+</style>

package/components/layouts/Container.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/components/layouts/Scrollable.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">let { children } = $props();
+</script>
+
+<div>
+    {@render children()}
+</div>
+
+<style>
+    div {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
+    }
+
+    div::-webkit-scrollbar {
+        display: none;
+    }
+</style>

package/components/layouts/Scrollable.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Scrollable: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Scrollable = ReturnType<typeof Scrollable>;
+export default Scrollable;

package/components/layouts/Split.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">import Container from "./Container.svelte";
+import DividerOverlay from "../utilities/DividerOverlay.svelte";
+import {} from "svelte";
+import { create } from "../utilities/draggable.js";
+let {
+  min = 2,
+  side_a,
+  side_b,
+  divider,
+  offset = $bindable(0),
+  vertical = false,
+  alt = false
+} = $props();
+let active = $state(false);
+let width = $state(offset + min + 1);
+let height = $state(offset + min + 1);
+let max = $derived((vertical ? width : height) - min - 1);
+const clamped = $derived(Math.max(Math.min(offset, max), min));
+let last = null;
+const draggable = create({
+  reset: () => $state.snapshot(clamped),
+  move: (value) => {
+    offset = value;
+  },
+  move_start: () => {
+    active = true;
+  },
+  move_end: () => {
+    active = false;
+  },
+  dbltap: () => {
+    if (offset > min) {
+      last = offset;
+      offset = min;
+    } else if (last != null) {
+      offset = last;
+      last = null;
+    }
+  },
+  tap: () => {
+    if (offset > min) {
+      last = offset;
+    }
+  }
+});
+</script>
+
+<div
+    class="split"
+    class:vertical
+    class:alt
+    class:active
+    class:at_limit={clamped < min || clamped > max}
+    style:--nil-xit-split-value={`${clamped}px`}
+    bind:clientWidth={width}
+    bind:clientHeight={height}
+>
+    <Container>{@render side_a()}</Container>
+    <div
+        class="splitter"
+        use:draggable={{ reversed: alt, vertical }}
+    >
+        {#if divider != null}
+            {@render divider({active, alt, vertical})}
+        {:else}
+            <DividerOverlay {alt} {vertical} {active}></DividerOverlay>
+        {/if}
+    </div>
+    <Container>{@render side_b()}</Container>
+</div>
+
+<style>
+    .split {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        transition: 350ms;
+        grid-template-columns: none;
+        grid-template-rows: auto 1px var(--nil-xit-split-value);
+    }
+
+    .split.active {
+        transition: 50ms;
+    }
+
+    .split.at_limit {
+        transition: none;
+    }
+
+    .split.vertical {
+        grid-template-columns: auto 1px var(--nil-xit-split-value);
+        grid-template-rows: none
+    }
+
+    .split.alt {
+        grid-template-columns: none;
+        grid-template-rows: var(--nil-xit-split-value) 1px auto;
+    }
+    
+    .split.vertical.alt {
+        grid-template-columns: var(--nil-xit-split-value) 1px auto;
+        grid-template-rows: none
+    }
+
+    .splitter {
+        touch-action: none;
+        z-index: 1;
+        cursor: ns-resize;
+    }
+
+    .vertical > .splitter {
+        cursor: ew-resize;
+    }
+</style>

package/components/layouts/Split.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type Snippet } from "svelte";
+type Props = {
+    min?: number;
+    side_a: Snippet;
+    side_b: Snippet;
+    divider?: Snippet<[
+        {
+            active: boolean;
+            alt: boolean;
+            vertical: boolean;
+        }
+    ]>;
+    offset?: number;
+    vertical?: boolean;
+    alt?: boolean;
+};
+declare const Split: import("svelte").Component<Props, {}, "offset">;
+type Split = ReturnType<typeof Split>;
+export default Split;

package/components/utilities/DividerOverlay.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">let { vertical, alt, active } = $props();
+const title = $derived(`Collapse ${vertical ? alt ? "left" : "right" : alt ? "top" : "bottom"}`);
+</script>
+
+<div
+    class="parent"
+    class:primary={!alt}
+    class:secondary={alt}
+    class:active
+    class:vertical
+    class:horizontal={!vertical}>
+    <div {title}></div>
+</div>
+
+<style>
+    .parent {
+        user-select: none;
+        width: 100%;
+        height: 100%;
+        transform: translateY(-1px);
+        
+        transition:
+            border-color 350ms,
+            background-color 350ms;
+        background-color: hsl(0, 2%, 40%);
+    }
+
+    .parent.vertical {
+        transform: translateX(-1px);
+    }
+
+    .parent > div {
+        touch-action: none;
+        cursor: ns-resize;
+        width: 100%;
+        height: calc(100% + 20px);
+        transform: translateY(-10px);
+    }
+
+    .parent.vertical > div {
+        cursor: ew-resize;
+        height: 100%;
+        width: calc(100% + 20px);
+        transform: translateX(-10px);
+    }
+
+    /* borders */
+
+    .parent.horizontal {
+        border-bottom: hsl(0, 2%, 40%) solid 1px;
+        border-top: hsl(0, 2%, 40%) solid 1px;
+    }
+
+    .parent.vertical {
+        border-left: hsl(0, 2%, 40%) solid 1px;
+        border-right: hsl(0, 2%, 40%) solid 1px;
+    }
+
+    .parent.primary.horizontal:hover,
+    .parent.primary.horizontal.active {
+        border-bottom: hsl(0, 0%, 100%) solid 1px;
+    }
+
+    .parent.secondary.horizontal:hover,
+    .parent.secondary.horizontal.active {
+        border-top: hsl(0, 0%, 100%) solid 1px;
+    }
+
+    .parent.primary.vertical:hover,
+    .parent.primary.vertical.active {
+        border-right: hsl(0, 0%, 100%) solid 1px;
+    }
+
+    .parent.secondary.vertical:hover,
+    .parent.secondary.vertical.active {
+        border-left: hsl(0, 0%, 100%) solid 1px;
+    }
+</style>

package/components/utilities/DividerOverlay.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    vertical: boolean;
+    alt: boolean;
+    active: boolean;
+};
+declare const DividerOverlay: import("svelte").Component<Props, {}, "">;
+type DividerOverlay = ReturnType<typeof DividerOverlay>;
+export default DividerOverlay;

package/components/utilities/draggable.d.ts

@@ -0,0 +1,17 @@
+type Parameter = {
+    vertical: boolean;
+    reversed: boolean;
+};
+type Options = {
+    reset?: () => number;
+    move?: (value: number) => void;
+    move_start?: () => void;
+    move_end?: () => void;
+    dbltap?: () => void;
+    tap?: () => void;
+};
+export declare const create: ({ move, move_start, move_end, reset, dbltap, tap }: Options) => (div: HTMLElement, param: Parameter) => {
+    update: (new_params: Parameter) => Parameter;
+    destroy: () => void;
+};
+export {};

package/components/utilities/draggable.js

@@ -0,0 +1,67 @@
+export const create = ({ move, move_start, move_end, reset, dbltap, tap }) => {
+    return (div, param) => {
+        let tm = new Date().getTime();
+        let position = reset?.() ?? 0;
+        let refPage = 0;
+        let engaged = false;
+        let moving = false;
+        const is_double_tap = () => {
+            const tm2 = new Date().getTime();
+            const diff = tm2 - tm;
+            tm = tm2;
+            return diff < 200;
+        };
+        const pointer_move = (e) => {
+            if (!engaged) {
+                return;
+            }
+            if (!moving) {
+                moving = true;
+                move_start?.();
+            }
+            const page = param.vertical ? e.pageX : e.pageY;
+            const delta = (page - refPage) * (param.reversed ? 1 : -1);
+            position = position + delta;
+            refPage = page;
+            move?.(position);
+        };
+        const disengage = () => {
+            if (!engaged) {
+                return;
+            }
+            if (moving) {
+                moving = false;
+                move_end?.();
+            }
+            engaged = false;
+        };
+        const engage = (e) => {
+            if (engaged) {
+                return;
+            }
+            engaged = true;
+            if (is_double_tap()) {
+                dbltap?.();
+                disengage();
+            }
+            else {
+                position = reset?.() ?? 0;
+                refPage = param.vertical ? e.pageX : e.pageY;
+                tap?.();
+            }
+        };
+        div.addEventListener("pointerdown", engage);
+        window.addEventListener("pointerup", disengage);
+        window.addEventListener("pointercancel", disengage);
+        window.addEventListener("pointermove", pointer_move);
+        return {
+            update: (new_params) => param = new_params,
+            destroy: () => {
+                div.removeEventListener("pointerdown", engage);
+                window.removeEventListener("pointerup", disengage);
+                window.removeEventListener("pointercancel", disengage);
+                window.removeEventListener("pointermove", pointer_move);
+            }
+        };
+    };
+};

package/index.d.ts

@@ -44,7 +44,7 @@ export type Context = {
     tag: string | null;
 };
 export declare const json_string: {
-    encode: (o: any) => Uint8Array;
-    decode: (o: Uint8Array) => any;
+    encode: (o: any) => Uint8Array<ArrayBufferLike>;
+    decode: (o: Uint8Array<ArrayBufferLike>) => any;
 };
 export declare const xit: () => Context;

package/package.json

@@ -1,12 +1,35 @@
 {
   "name": "@nil-/xit",
-  "version": "0.1.27",
+  "version": "0.1.29",
+  "peerDependencies": {
+    "svelte": "^5.7.1"
+  },
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "types": "./index.d.ts",
       "default": "./index.js"
+    },
+    "./components/layouts/Container.svelte": {
+      "types": "./components/layouts/Container.svelte.d.ts",
+      "svelte": "./components/layouts/Container.svelte"
+    },
+    "./components/layouts/Scrollable.svelte": {
+      "types": "./components/layouts/Scrollable.svelte.d.ts",
+      "svelte": "./components/layouts/Scrollable.svelte"
+    },
+    "./components/layouts/Split.svelte": {
+      "types": "./components/layouts/Split.svelte.d.ts",
+      "svelte": "./components/layouts/Split.svelte"
+    },
+    "./components/utilities/DividerOverlay.svelte": {
+      "types": "./components/utilities/DividerOverlay.svelte.d.ts",
+      "svelte": "./components/utilities/DividerOverlay.svelte"
+    },
+    "./components/utilities/draggable.js": {
+      "types": "./components/utilities/draggable.d.ts",
+      "default": "./components/utilities/draggable.js"
     }
   }
 }