@torpor/ui 0.3.7 → 1.0.0

package/dist/icons/index.d.ts

@@ -177,6 +177,66 @@ declare function Check(
 
 
 
+type IconProps } from "./IconTypes";
+
+export default function ChevronDoubleLeft($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={["torp-icon", $props?.class]}
+		{$props?.style}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path fill="none" d="M90,10 L50,50 L90,90"></path>
+		<path fill="none" d="M50,10 L10,50 L50,90"></path>
+		</g>
+		</svg>
+	}
+}
+
+declare function ChevronDoubleLeft(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: IconProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+type IconProps } from "./IconTypes";
+
+export default function ChevronDoubleRight($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={["torp-icon", $props?.class]}
+		{$props?.style}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,10 L50,50 L10,90" fill="none" />
+		<path d="M50,10 L90,50 L50,90" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
+declare function ChevronDoubleRight(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: IconProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 type IconProps } from "./IconTypes";
 
 export default function ChevronDown($props: IconProps | undefined) {
@@ -410,4 +470,4 @@ declare function Plus(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bars, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cross, Loading, Minus, Plus };
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bars, Check, ChevronDoubleLeft, ChevronDoubleRight, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cross, Loading, Minus, Plus };

package/dist/icons/index.js

@@ -1,58 +1,17 @@
-// src/icons/ArrowDown.torp
-import ArrowDown_default from "./ArrowDown.torp";
-
-// src/icons/ArrowLeft.torp
-import ArrowLeft_default from "./ArrowLeft.torp";
-
-// src/icons/ArrowRight.torp
-import ArrowRight_default from "./ArrowRight.torp";
-
-// src/icons/ArrowUp.torp
-import ArrowUp_default from "./ArrowUp.torp";
-
-// src/icons/Bars.torp
-import Bars_default from "./Bars.torp";
-
-// src/icons/Check.torp
-import Check_default from "./Check.torp";
-
-// src/icons/ChevronDown.torp
-import ChevronDown_default from "./ChevronDown.torp";
-
-// src/icons/ChevronLeft.torp
-import ChevronLeft_default from "./ChevronLeft.torp";
-
-// src/icons/ChevronRight.torp
-import ChevronRight_default from "./ChevronRight.torp";
-
-// src/icons/ChevronUp.torp
-import ChevronUp_default from "./ChevronUp.torp";
-
-// src/icons/Cross.torp
-import Cross_default from "./Cross.torp";
-
-// src/icons/Loading.torp
-import Loading_default from "./Loading.torp";
-
-// src/icons/Minus.torp
-import Minus_default from "./Minus.torp";
-
-// src/icons/Plus.torp
-import Plus_default from "./Plus.torp";
-export {
-  ArrowDown_default as ArrowDown,
-  ArrowLeft_default as ArrowLeft,
-  ArrowRight_default as ArrowRight,
-  ArrowUp_default as ArrowUp,
-  Bars_default as Bars,
-  Check_default as Check,
-  ChevronDown_default as ChevronDown,
-  ChevronLeft_default as ChevronLeft,
-  ChevronRight_default as ChevronRight,
-  ChevronUp_default as ChevronUp,
-  Cross_default as Cross,
-  Loading_default as Loading,
-  Minus_default as Minus,
-  Plus_default as Plus
-};
-//# sourceMappingURL=index.js.map
+import ArrowDown from "./ArrowDown.torp";
+import ArrowLeft from "./ArrowLeft.torp";
+import ArrowRight from "./ArrowRight.torp";
+import ArrowUp from "./ArrowUp.torp";
+import Bars from "./Bars.torp";
+import Check from "./Check.torp";
+import ChevronDoubleLeft from "./ChevronDoubleLeft.torp";
+import ChevronDoubleRight from "./ChevronDoubleRight.torp";
+import ChevronDown from "./ChevronDown.torp";
+import ChevronLeft from "./ChevronLeft.torp";
+import ChevronRight from "./ChevronRight.torp";
+import ChevronUp from "./ChevronUp.torp";
+import Cross from "./Cross.torp";
+import Loading from "./Loading.torp";
+import Minus from "./Minus.torp";
+import Plus from "./Plus.torp";
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bars, Check, ChevronDoubleLeft, ChevronDoubleRight, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cross, Loading, Minus, Plus };

package/dist/loader-DEeG5vFY.js

@@ -0,0 +1,44 @@
+import { $async, $watch } from "@torpor/view";
+//#region src/utils/loader.ts
+/** Wraps a bare array in a LoadResult so consumers always get the same shape */
+function normalizeLoadResult(result) {
+	return Array.isArray(result) ? { items: result } : result;
+}
+/**
+* Shared loading state for components that read items from a network loader
+* (DataGrid, ComboBox auto-complete etc). Read the returned state's `items`
+* or `result` inside an `@await` boundary: while a fetch is pending the read
+* suspends, and when dependencies read inside `getRequest` change the fetch
+* re-runs.
+*
+* For lazy loading (fetch only once some condition is met), gate the whole
+* rendering of the region that reads this loader behind that condition
+* (`@if`), so the `@await` boundary -- and with it the first fetch --
+* comes into existence when the condition flips.
+*
+* ```
+* let $load = createItemLoader({
+* 	load: $props.load,
+* 	getRequest: () => ({ searchText: $state.searchText }),
+* });
+* @await { ...$load.items... } with { <span>Loading…</span> }
+* ```
+*/
+function createItemLoader(options) {
+	return $watch({
+		get result() {
+			return $async(() => {
+				const promise = Promise.resolve(options.load(options.getRequest())).then(normalizeLoadResult);
+				promise.then((r) => options.onload?.(r), () => {});
+				return promise;
+			});
+		},
+		get items() {
+			return this.result?.items ?? [];
+		}
+	});
+}
+//#endregion
+export { normalizeLoadResult as n, createItemLoader as t };
+
+//# sourceMappingURL=loader-DEeG5vFY.js.map

package/dist/loader-DEeG5vFY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-DEeG5vFY.js","names":[],"sources":["../src/utils/loader.ts"],"sourcesContent":["import { $async, $watch } from \"@torpor/view\";\n\n/**\n * Shared contract for loading data from the network, used by components that\n * can take either static data or a loader function (DataGrid now, ComboBox\n * auto-complete and others later).\n *\n * A loader receives a request object describing what to fetch -- paging,\n * search text and sorting are standard; components extend it with their own\n * fields -- plus an AbortSignal so stale requests can be cancelled.\n */\n\n/** The base shape of a load request. Components extend this with their own fields. */\nexport interface LoadRequest {\n\t/** 1-based page number to load */\n\tpage?: number;\n\t/** Number of items per page */\n\tpageSize?: number;\n\t/** Search or filter text entered by the user */\n\tsearchText?: string;\n\t/** The field to sort by */\n\tsortBy?: string;\n\t/** The direction to sort in */\n\tsortDirection?: \"asc\" | \"desc\";\n}\n\n/**\n * The result of a load: the items for the current request, and optionally\n * the total count (needed for paged components to show a pager).\n */\nexport interface LoadResult<T = any> {\n\titems: T[];\n\t/** The total number of items across all pages, if known */\n\ttotal?: number;\n}\n\n/**\n * Reads data for a request. May return a promise or a plain result, and may\n * return just an array of items when no total is available.\n */\nexport type Loader<T = any, TRequest extends LoadRequest = LoadRequest> = (\n\trequest: TRequest,\n\tsignal?: AbortSignal,\n) => Promise<LoadResult<T> | T[]> | LoadResult<T> | T[];\n\n/** Wraps a bare array in a LoadResult so consumers always get the same shape */\nexport function normalizeLoadResult<T>(result: LoadResult<T> | T[]): LoadResult<T> {\n\treturn Array.isArray(result) ? { items: result } : result;\n}\n\nexport interface ItemLoaderOptions<T = any, TRequest extends LoadRequest = LoadRequest> {\n\t/** The loader function to fetch items */\n\tload: Loader<T, TRequest>;\n\t/**\n\t * Builds the request for the current fetch. Called inside the async\n\t * getter, so reads of reactive state here re-fetch when they change.\n\t */\n\tgetRequest: () => TRequest;\n\t/** Called after each successful load with the normalized result */\n\tonload?: (result: LoadResult<T>) => void;\n}\n\n/** Reactive loading state returned by createItemLoader */\nexport interface ItemLoaderState<T = any> {\n\t/** The full result of the current load; suspends while a fetch is pending */\n\treadonly result: LoadResult<T> | undefined;\n\t/** The loaded items; suspends while a fetch is pending */\n\treadonly items: T[];\n}\n\n/**\n * Shared loading state for components that read items from a network loader\n * (DataGrid, ComboBox auto-complete etc). Read the returned state's `items`\n * or `result` inside an `@await` boundary: while a fetch is pending the read\n * suspends, and when dependencies read inside `getRequest` change the fetch\n * re-runs.\n *\n * For lazy loading (fetch only once some condition is met), gate the whole\n * rendering of the region that reads this loader behind that condition\n * (`@if`), so the `@await` boundary -- and with it the first fetch --\n * comes into existence when the condition flips.\n *\n * ```\n * let $load = createItemLoader({\n * \tload: $props.load,\n * \tgetRequest: () => ({ searchText: $state.searchText }),\n * });\n * @await { ...$load.items... } with { <span>Loading…</span> }\n * ```\n */\nexport function createItemLoader<T = any, TRequest extends LoadRequest = LoadRequest>(\n\toptions: ItemLoaderOptions<T, TRequest>,\n): ItemLoaderState<T> {\n\treturn $watch({\n\t\tget result(): LoadResult<T> | undefined {\n\t\t\treturn $async(() => {\n\t\t\t\tconst promise = Promise.resolve(options.load(options.getRequest())).then(\n\t\t\t\t\tnormalizeLoadResult,\n\t\t\t\t);\n\t\t\t\t// Report successful loads to the consumer; failures surface\n\t\t\t\t// through the component's error boundary, not this chain\n\t\t\t\tpromise.then(\n\t\t\t\t\t(r) => options.onload?.(r),\n\t\t\t\t\t() => {},\n\t\t\t\t);\n\t\t\t\treturn promise as Promise<LoadResult<T>>;\n\t\t\t});\n\t\t},\n\t\tget items(): T[] {\n\t\t\treturn this.result?.items ?? [];\n\t\t},\n\t});\n}\n"],"mappings":";;;AA8CA,SAAgB,oBAAuB,QAA4C;CAClF,OAAO,MAAM,QAAQ,MAAM,IAAI,EAAE,OAAO,OAAO,IAAI;AACpD;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,iBACf,SACqB;CACrB,OAAO,OAAO;EACb,IAAI,SAAoC;GACvC,OAAO,aAAa;IACnB,MAAM,UAAU,QAAQ,QAAQ,QAAQ,KAAK,QAAQ,WAAW,CAAC,CAAC,CAAC,CAAC,KACnE,mBACD;IAGA,QAAQ,MACN,MAAM,QAAQ,SAAS,CAAC,SACnB,CAAC,CACR;IACA,OAAO;GACR,CAAC;EACF;EACA,IAAI,QAAa;GAChB,OAAO,KAAK,QAAQ,SAAS,CAAC;EAC/B;CACD,CAAC;AACF"}

package/dist/motion/index.d.ts

@@ -1,19 +1,23 @@
-import { Animation } from '@torpor/view';
-
+import { Animation } from "@torpor/view";
+//#region src/motion/fade.d.ts
 declare function fade(_el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
-
+//#endregion
+//#region src/motion/grow.d.ts
 declare function grow(el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
-
+//#endregion
+//#region src/motion/measure.d.ts
 /**
  * Measures an element before it is added to the DOM
  * @param el The element to measure
  * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
  */
-declare function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number;
-
+declare function measure(el: HTMLElement, fn: (_el: HTMLElement) => number): number;
+//#endregion
+//#region src/motion/slide.d.ts
 interface Options extends KeyframeAnimationOptions {
-    side: "left" | "right" | "top" | "bottom";
+  side: "left" | "right" | "top" | "bottom";
 }
 declare function slide(el: HTMLElement, options?: Options): Animation;
-
+//#endregion
 export { fade, grow, measure, slide };
+//# sourceMappingURL=index.d.ts.map

package/dist/motion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/motion/fade.ts","../../src/motion/grow.ts","../../src/motion/measure.ts","../../src/motion/slide.ts"],"mappings":";;iBAEwB,KACvB,KAAK,aACL,mBAAmB,2BACjB;;;iBCFqB,KACvB,IAAI,aACJ,mBAAmB,2BACjB;;;;;;;;iBCDqB,QAAQ,IAAI,aAAa,KAAK,KAAK;;;UCFjD,gBAAgB;EACzB;;iBAGuB,MAAM,IAAI,aAAa,UAAU,UAAU"}

package/dist/motion/index.js

@@ -1,97 +1,81 @@
-// src/motion/fade.ts
+//#region src/motion/fade.ts
 function fade(_el, options) {
-  const keyframes = [
-    {
-      opacity: 0
-    },
-    {
-      opacity: 1
-    }
-  ];
-  return { keyframes, options };
+	return {
+		keyframes: [{ opacity: 0 }, { opacity: 1 }],
+		options
+	};
 }
-
-// src/motion/measure.ts
+//#endregion
+//#region src/motion/measure.ts
+/**
+* Measures an element before it is added to the DOM
+* @param el The element to measure
+* @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
+*/
 function measure(el, fn) {
-  let oldVisibility = el.style.visibility;
-  let oldPosition = el.style.position;
-  let oldParent = el.parentNode;
-  let oldBefore = el.nextSibling;
-  el.style.visibility = "hidden";
-  el.style.position = "absolute";
-  document.body.appendChild(el);
-  let result = fn(el);
-  el.parentNode.removeChild(el);
-  if (oldParent !== null) {
-    oldParent.insertBefore(el, oldBefore);
-    el.style.visibility = oldVisibility;
-    el.style.position = oldPosition;
-  }
-  return result;
+	let oldVisibility = el.style.visibility;
+	let oldPosition = el.style.position;
+	let oldParent = el.parentNode;
+	let oldBefore = el.nextSibling;
+	el.style.visibility = "hidden";
+	el.style.position = "absolute";
+	document.body.appendChild(el);
+	let result = fn(el);
+	el.parentNode.removeChild(el);
+	if (oldParent !== null) {
+		oldParent.insertBefore(el, oldBefore);
+		el.style.visibility = oldVisibility;
+		el.style.position = oldPosition;
+	}
+	return result;
 }
-
-// src/motion/grow.ts
+//#endregion
+//#region src/motion/grow.ts
 function grow(el, options) {
-  const height = measure(el, (el2) => el2.clientHeight);
-  const keyframes = [
-    {
-      height: "0px",
-      overflow: "hidden",
-      paddingTop: "0px",
-      paddingBottom: "0px",
-      marginTop: "0px",
-      marginBottom: "0px"
-    },
-    {
-      height: height + "px"
-    }
-  ];
-  return { keyframes, options };
+	return {
+		keyframes: [{
+			height: "0px",
+			overflow: "hidden",
+			paddingTop: "0px",
+			paddingBottom: "0px",
+			marginTop: "0px",
+			marginBottom: "0px"
+		}, { height: measure(el, (el) => el.clientHeight) + "px" }],
+		options
+	};
 }
-
-// src/motion/slide.ts
+//#endregion
+//#region src/motion/slide.ts
 function slide(el, options) {
-  let position = options?.side ?? "left";
-  switch (position) {
-    case "left": {
-      el.style.left = "0px";
-      const width = measure(el, (el2) => el2.offsetWidth);
-      const keyframes = [
-        { transform: `translateX(-${width}px)` },
-        { transform: "translateX(0px)" }
-      ];
-      return { keyframes, options };
-    }
-    case "top": {
-      el.style.top = "0px";
-      const height = measure(el, (el2) => el2.offsetHeight);
-      const keyframes = [
-        { transform: `translateY(-${height}px)` },
-        { transform: "translateY(0px)" }
-      ];
-      return { keyframes, options };
-    }
-    case "right": {
-      el.style.right = "0px";
-      const width = measure(el, (el2) => el2.offsetWidth);
-      const keyframes = [{ transform: `translateX(${width}px)` }, { transform: "translateX(0px)" }];
-      return { keyframes, options };
-    }
-    case "bottom": {
-      el.style.bottom = "0px";
-      const height = measure(el, (el2) => el2.offsetHeight);
-      const keyframes = [
-        { transform: `translateY(${height}px)` },
-        { transform: "translateY(0px)" }
-      ];
-      return { keyframes, options };
-    }
-  }
+	el.style.position = "fixed";
+	switch (options?.side ?? "left") {
+		case "left":
+			el.style.left = "0px";
+			return {
+				keyframes: [{ transform: `translateX(-${measure(el, (el) => el.offsetWidth)}px)` }, { transform: "translateX(0px)" }],
+				options
+			};
+		case "top":
+			el.style.top = "0px";
+			return {
+				keyframes: [{ transform: `translateY(-${measure(el, (el) => el.offsetHeight)}px)` }, { transform: "translateY(0px)" }],
+				options
+			};
+		case "right":
+			el.style.right = "0px";
+			return {
+				keyframes: [{ transform: `translateX(${measure(el, (el) => el.offsetWidth)}px)` }, { transform: "translateX(0px)" }],
+				options
+			};
+		case "bottom":
+			el.style.bottom = "0px";
+			return {
+				keyframes: [{ transform: `translateY(${measure(el, (el) => el.offsetHeight)}px)` }, { transform: "translateY(0px)" }],
+				options
+			};
+	}
 }
-export {
-  fade,
-  grow,
-  measure,
-  slide
-};
+//#endregion
+export { fade, grow, measure, slide };
+
 //# sourceMappingURL=index.js.map

package/dist/motion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/motion/fade.ts","../../src/motion/measure.ts","../../src/motion/grow.ts","../../src/motion/slide.ts"],"sourcesContent":["import { type Animation } from \"@torpor/view\";\n\nexport default function fade(\n\t_el: HTMLElement,\n\toptions?: number | KeyframeAnimationOptions,\n): Animation {\n\tconst keyframes = [\n\t\t{\n\t\t\topacity: 0,\n\t\t},\n\t\t{\n\t\t\topacity: 1,\n\t\t},\n\t];\n\treturn { keyframes, options };\n}\n","/**\n * Measures an element before it is added to the DOM\n * @param el The element to measure\n * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)\n */\nexport default function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number {\n\t// From https://stackoverflow.com/a/46707458\n\tlet oldVisibility = el.style.visibility;\n\tlet oldPosition = el.style.position;\n\n\tlet oldParent = el.parentNode;\n\tlet oldBefore = el.nextSibling;\n\n\tel.style.visibility = \"hidden\";\n\tel.style.position = \"absolute\";\n\n\tdocument.body.appendChild(el);\n\tlet result = fn(el);\n\tel.parentNode!.removeChild(el);\n\n\tif (oldParent !== null) {\n\t\toldParent.insertBefore(el, oldBefore);\n\t\tel.style.visibility = oldVisibility;\n\t\tel.style.position = oldPosition;\n\t}\n\n\treturn result;\n}\n","import { type Animation } from \"@torpor/view\";\nimport measure from \"./measure\";\n\nexport default function grow(\n\tel: HTMLElement,\n\toptions?: number | KeyframeAnimationOptions,\n): Animation {\n\tconst height = measure(el, (el) => el.clientHeight);\n\tconst keyframes = [\n\t\t{\n\t\t\theight: \"0px\",\n\t\t\toverflow: \"hidden\",\n\t\t\tpaddingTop: \"0px\",\n\t\t\tpaddingBottom: \"0px\",\n\t\t\tmarginTop: \"0px\",\n\t\t\tmarginBottom: \"0px\",\n\t\t},\n\t\t{\n\t\t\theight: height + \"px\",\n\t\t},\n\t];\n\treturn { keyframes, options };\n}\n","import { type Animation } from \"@torpor/view\";\nimport measure from \"./measure\";\n\ninterface Options extends KeyframeAnimationOptions {\n\tside: \"left\" | \"right\" | \"top\" | \"bottom\";\n}\n\nexport default function slide(el: HTMLElement, options?: Options): Animation {\n\tlet position = options?.side ?? \"left\";\n\tswitch (position) {\n\t\tcase \"left\": {\n\t\t\tel.style.left = \"0px\";\n\t\t\tconst width = measure(el, (el) => el.offsetWidth);\n\t\t\tconst keyframes = [\n\t\t\t\t{ transform: `translateX(-${width}px)` },\n\t\t\t\t{ transform: \"translateX(0px)\" },\n\t\t\t];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t\tcase \"top\": {\n\t\t\tel.style.top = \"0px\";\n\t\t\tconst height = measure(el, (el) => el.offsetHeight);\n\t\t\tconst keyframes = [\n\t\t\t\t{ transform: `translateY(-${height}px)` },\n\t\t\t\t{ transform: \"translateY(0px)\" },\n\t\t\t];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t\tcase \"right\": {\n\t\t\tel.style.right = \"0px\";\n\t\t\tconst width = measure(el, (el) => el.offsetWidth);\n\t\t\tconst keyframes = [{ transform: `translateX(${width}px)` }, { transform: \"translateX(0px)\" }];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t\tcase \"bottom\": {\n\t\t\tel.style.bottom = \"0px\";\n\t\t\tconst height = measure(el, (el) => el.offsetHeight);\n\t\t\tconst keyframes = [\n\t\t\t\t{ transform: `translateY(${height}px)` },\n\t\t\t\t{ transform: \"translateY(0px)\" },\n\t\t\t];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t}\n}\n"],"mappings":";AAEe,SAAR,KACN,KACA,SACY;AACZ,QAAM,YAAY;AAAA,IACjB;AAAA,MACC,SAAS;AAAA,IACV;AAAA,IACA;AAAA,MACC,SAAS;AAAA,IACV;AAAA,EACD;AACA,SAAO,EAAE,WAAW,QAAQ;AAC7B;;;ACVe,SAAR,QAAyB,IAAiB,IAAwC;AAExF,MAAI,gBAAgB,GAAG,MAAM;AAC7B,MAAI,cAAc,GAAG,MAAM;AAE3B,MAAI,YAAY,GAAG;AACnB,MAAI,YAAY,GAAG;AAEnB,KAAG,MAAM,aAAa;AACtB,KAAG,MAAM,WAAW;AAEpB,WAAS,KAAK,YAAY,EAAE;AAC5B,MAAI,SAAS,GAAG,EAAE;AAClB,KAAG,WAAY,YAAY,EAAE;AAE7B,MAAI,cAAc,MAAM;AACvB,cAAU,aAAa,IAAI,SAAS;AACpC,OAAG,MAAM,aAAa;AACtB,OAAG,MAAM,WAAW;AAAA,EACrB;AAEA,SAAO;AACR;;;ACxBe,SAAR,KACN,IACA,SACY;AACZ,QAAM,SAAS,QAAQ,IAAI,CAACA,QAAOA,IAAG,YAAY;AAClD,QAAM,YAAY;AAAA,IACjB;AAAA,MACC,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,WAAW;AAAA,MACX,cAAc;AAAA,IACf;AAAA,IACA;AAAA,MACC,QAAQ,SAAS;AAAA,IAClB;AAAA,EACD;AACA,SAAO,EAAE,WAAW,QAAQ;AAC7B;;;ACfe,SAAR,MAAuB,IAAiB,SAA8B;AAC5E,MAAI,WAAW,SAAS,QAAQ;AAChC,UAAQ,UAAU;AAAA,IACjB,KAAK,QAAQ;AACZ,SAAG,MAAM,OAAO;AAChB,YAAM,QAAQ,QAAQ,IAAI,CAACC,QAAOA,IAAG,WAAW;AAChD,YAAM,YAAY;AAAA,QACjB,EAAE,WAAW,eAAe,KAAK,MAAM;AAAA,QACvC,EAAE,WAAW,kBAAkB;AAAA,MAChC;AACA,aAAO,EAAE,WAAW,QAAQ;AAAA,IAC7B;AAAA,IACA,KAAK,OAAO;AACX,SAAG,MAAM,MAAM;AACf,YAAM,SAAS,QAAQ,IAAI,CAACA,QAAOA,IAAG,YAAY;AAClD,YAAM,YAAY;AAAA,QACjB,EAAE,WAAW,eAAe,MAAM,MAAM;AAAA,QACxC,EAAE,WAAW,kBAAkB;AAAA,MAChC;AACA,aAAO,EAAE,WAAW,QAAQ;AAAA,IAC7B;AAAA,IACA,KAAK,SAAS;AACb,SAAG,MAAM,QAAQ;AACjB,YAAM,QAAQ,QAAQ,IAAI,CAACA,QAAOA,IAAG,WAAW;AAChD,YAAM,YAAY,CAAC,EAAE,WAAW,cAAc,KAAK,MAAM,GAAG,EAAE,WAAW,kBAAkB,CAAC;AAC5F,aAAO,EAAE,WAAW,QAAQ;AAAA,IAC7B;AAAA,IACA,KAAK,UAAU;AACd,SAAG,MAAM,SAAS;AAClB,YAAM,SAAS,QAAQ,IAAI,CAACA,QAAOA,IAAG,YAAY;AAClD,YAAM,YAAY;AAAA,QACjB,EAAE,WAAW,cAAc,MAAM,MAAM;AAAA,QACvC,EAAE,WAAW,kBAAkB;AAAA,MAChC;AACA,aAAO,EAAE,WAAW,QAAQ;AAAA,IAC7B;AAAA,EACD;AACD;","names":["el","el"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/motion/fade.ts","../../src/motion/measure.ts","../../src/motion/grow.ts","../../src/motion/slide.ts"],"sourcesContent":["import { type Animation } from \"@torpor/view\";\n\nexport default function fade(\n\t_el: HTMLElement,\n\toptions?: number | KeyframeAnimationOptions,\n): Animation {\n\tconst keyframes = [\n\t\t{\n\t\t\topacity: 0,\n\t\t},\n\t\t{\n\t\t\topacity: 1,\n\t\t},\n\t];\n\treturn { keyframes, options };\n}\n","/**\n * Measures an element before it is added to the DOM\n * @param el The element to measure\n * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)\n */\nexport default function measure(el: HTMLElement, fn: (_el: HTMLElement) => number): number {\n\t// From https://stackoverflow.com/a/46707458\n\tlet oldVisibility = el.style.visibility;\n\tlet oldPosition = el.style.position;\n\n\tlet oldParent = el.parentNode;\n\tlet oldBefore = el.nextSibling;\n\n\tel.style.visibility = \"hidden\";\n\tel.style.position = \"absolute\";\n\n\tdocument.body.appendChild(el);\n\tlet result = fn(el);\n\tel.parentNode!.removeChild(el);\n\n\tif (oldParent !== null) {\n\t\toldParent.insertBefore(el, oldBefore);\n\t\tel.style.visibility = oldVisibility;\n\t\tel.style.position = oldPosition;\n\t}\n\n\treturn result;\n}\n","import { type Animation } from \"@torpor/view\";\nimport measure from \"./measure\";\n\nexport default function grow(\n\tel: HTMLElement,\n\toptions?: number | KeyframeAnimationOptions,\n): Animation {\n\tconst height = measure(el, (el) => el.clientHeight);\n\tconst keyframes = [\n\t\t{\n\t\t\theight: \"0px\",\n\t\t\toverflow: \"hidden\",\n\t\t\tpaddingTop: \"0px\",\n\t\t\tpaddingBottom: \"0px\",\n\t\t\tmarginTop: \"0px\",\n\t\t\tmarginBottom: \"0px\",\n\t\t},\n\t\t{\n\t\t\theight: height + \"px\",\n\t\t},\n\t];\n\treturn { keyframes, options };\n}\n","import { type Animation } from \"@torpor/view\";\nimport measure from \"./measure\";\n\ninterface Options extends KeyframeAnimationOptions {\n\tside: \"left\" | \"right\" | \"top\" | \"bottom\";\n}\n\nexport default function slide(el: HTMLElement, options?: Options): Animation {\n\tel.style.position = \"fixed\";\n\tswitch (options?.side ?? \"left\") {\n\t\tcase \"left\": {\n\t\t\tel.style.left = \"0px\";\n\t\t\tconst width = measure(el, (el) => el.offsetWidth);\n\t\t\tconst keyframes = [\n\t\t\t\t{ transform: `translateX(-${width}px)` },\n\t\t\t\t{ transform: \"translateX(0px)\" },\n\t\t\t];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t\tcase \"top\": {\n\t\t\tel.style.top = \"0px\";\n\t\t\tconst height = measure(el, (el) => el.offsetHeight);\n\t\t\tconst keyframes = [\n\t\t\t\t{ transform: `translateY(-${height}px)` },\n\t\t\t\t{ transform: \"translateY(0px)\" },\n\t\t\t];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t\tcase \"right\": {\n\t\t\tel.style.right = \"0px\";\n\t\t\tconst width = measure(el, (el) => el.offsetWidth);\n\t\t\tconst keyframes = [{ transform: `translateX(${width}px)` }, { transform: \"translateX(0px)\" }];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t\tcase \"bottom\": {\n\t\t\tel.style.bottom = \"0px\";\n\t\t\tconst height = measure(el, (el) => el.offsetHeight);\n\t\t\tconst keyframes = [\n\t\t\t\t{ transform: `translateY(${height}px)` },\n\t\t\t\t{ transform: \"translateY(0px)\" },\n\t\t\t];\n\t\t\treturn { keyframes, options };\n\t\t}\n\t}\n}\n"],"mappings":";AAEA,SAAwB,KACvB,KACA,SACY;CASZ,OAAO;EAAE,WAAA,CAPR,EACC,SAAS,EACV,GACA,EACC,SAAS,EACV,CAEgB;EAAG;CAAQ;AAC7B;;;;;;;;ACVA,SAAwB,QAAQ,IAAiB,IAA0C;CAE1F,IAAI,gBAAgB,GAAG,MAAM;CAC7B,IAAI,cAAc,GAAG,MAAM;CAE3B,IAAI,YAAY,GAAG;CACnB,IAAI,YAAY,GAAG;CAEnB,GAAG,MAAM,aAAa;CACtB,GAAG,MAAM,WAAW;CAEpB,SAAS,KAAK,YAAY,EAAE;CAC5B,IAAI,SAAS,GAAG,EAAE;CAClB,GAAG,WAAY,YAAY,EAAE;CAE7B,IAAI,cAAc,MAAM;EACvB,UAAU,aAAa,IAAI,SAAS;EACpC,GAAG,MAAM,aAAa;EACtB,GAAG,MAAM,WAAW;CACrB;CAEA,OAAO;AACR;;;ACxBA,SAAwB,KACvB,IACA,SACY;CAeZ,OAAO;EAAE,WAAA,CAZR;GACC,QAAQ;GACR,UAAU;GACV,YAAY;GACZ,eAAe;GACf,WAAW;GACX,cAAc;EACf,GACA,EACC,QAXa,QAAQ,KAAK,OAAO,GAAG,YAWvB,IAAI,KAClB,CAEgB;EAAG;CAAQ;AAC7B;;;ACfA,SAAwB,MAAM,IAAiB,SAA8B;CAC5E,GAAG,MAAM,WAAW;CACpB,QAAQ,SAAS,QAAQ,QAAzB;EACC,KAAK;GACJ,GAAG,MAAM,OAAO;GAMhB,OAAO;IAAE,WAAA,CAHR,EAAE,WAAW,eAFA,QAAQ,KAAK,OAAO,GAAG,WAEJ,EAAE,KAAK,GACvC,EAAE,WAAW,kBAAkB,CAEf;IAAG;GAAQ;EAE7B,KAAK;GACJ,GAAG,MAAM,MAAM;GAMf,OAAO;IAAE,WAAA,CAHR,EAAE,WAAW,eAFC,QAAQ,KAAK,OAAO,GAAG,YAEJ,EAAE,KAAK,GACxC,EAAE,WAAW,kBAAkB,CAEf;IAAG;GAAQ;EAE7B,KAAK;GACJ,GAAG,MAAM,QAAQ;GAGjB,OAAO;IAAE,WAAA,CADU,EAAE,WAAW,cADlB,QAAQ,KAAK,OAAO,GAAG,WACa,EAAE,KAAK,GAAG,EAAE,WAAW,kBAAkB,CAC1E;IAAG;GAAQ;EAE7B,KAAK;GACJ,GAAG,MAAM,SAAS;GAMlB,OAAO;IAAE,WAAA,CAHR,EAAE,WAAW,cAFC,QAAQ,KAAK,OAAO,GAAG,YAEL,EAAE,KAAK,GACvC,EAAE,WAAW,kBAAkB,CAEf;IAAG;GAAQ;CAE9B;AACD"}

package/dist/mount/draggable.ts

@@ -0,0 +1,63 @@
+import { beginDrag, endDrag, writeDragType } from "../utils/dragState";
+
+interface DraggableOptions {
+	/** High-level kind for drop targets to filter on */
+	kind?: string;
+	/** Payload handed to the drop target that receives this drag */
+	data?: any;
+	/**
+	 * Called when a drag starts; returning false cancels the drag entirely
+	 * (useful for drags-in-progress controls, readonly flags etc)
+	 */
+	onstart?: (e: DragEvent) => boolean | void;
+	/** Called when the drag finishes, whether it was dropped or cancelled */
+	onend?: (e: DragEvent) => void;
+}
+
+/**
+ * Makes an element draggable via the native HTML5 drag & drop API.
+ *
+ * ```
+ * <li onmount={(el) => draggable(el, { kind: "list-item", data: item })}>
+ * ```
+ *
+ * Pairs with dropTarget, which receives `{ kind, data }` for accepted
+ * drops. The tracked drag is always cleaned up on dragend, so handlers
+ * don't leak between drags.
+ */
+export default function draggable(node: HTMLElement, options: DraggableOptions): () => void {
+	let started = false;
+
+	function handleStart(e: DragEvent) {
+		if (options.onstart?.(e) === false) {
+			e.preventDefault();
+			return;
+		}
+		const info = beginDrag(options.kind ?? "", options.data);
+		writeDragType(e, info.id);
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+		}
+		started = true;
+	}
+
+	function handleEnd(e: DragEvent) {
+		if (started) {
+			started = false;
+			endDrag();
+			options.onend?.(e);
+		}
+	}
+
+	node.addEventListener("dragstart", handleStart);
+	node.addEventListener("dragend", handleEnd);
+
+	return () => {
+		node.removeEventListener("dragstart", handleStart);
+		node.removeEventListener("dragend", handleEnd);
+		if (started) {
+			started = false;
+			endDrag();
+		}
+	};
+}

package/dist/mount/dropTarget.ts

@@ -0,0 +1,108 @@
+import { type DragInfo, resolveDrag } from "../utils/dragState";
+
+interface DropTargetOptions {
+	/** Filters incoming drags; only accepted kinds receive over/drop calls */
+	accepts?: (info: DragInfo) => boolean;
+	/** The cursor effect shown while hovering (default "move") */
+	effect?: "move" | "copy" | "link";
+	/** Called continuously while an accepted drag hovers the target */
+	onover?: (info: DragInfo, e: DragEvent) => void;
+	/** Called once when hovering starts */
+	onenter?: (info: DragInfo, e: DragEvent) => void;
+	/** Called once when hovering ends */
+	onleave?: () => void;
+	/** Called when an accepted drag is dropped; returning false rejects it */
+	ondrop?: (info: DragInfo, e: DragEvent) => boolean | void;
+	/** Class applied while an accepted drag hovers the target */
+	dragClass?: string;
+}
+
+/**
+ * Turns an element into a drop target for native HTML5 drags.
+ *
+ * ```
+ * <div
+ * 	class="panel"
+ * 	onmount={(el) =>
+ * 		dropTarget(el, {
+ * 			accepts: (info) => info.kind === "list-item",
+ * 			dragClass: "dropping",
+ * 			ondrop: (info) => addItem(info.data),
+ * 		})
+ * 	}
+ * />
+ * ```
+ *
+ * Handles the tedious parts of the platform API -- preventing the browser's
+ * default navigation, resolving the tracked drag, effect negotiation --
+ * so components only express what they accept and what happens on drop.
+ */
+export default function dropTarget(node: HTMLElement, options: DropTargetOptions): () => void {
+	let hoverClassApplied = false;
+
+	function accepts(info: DragInfo | undefined): info is DragInfo {
+		return !!info && (!options.accepts || options.accepts(info));
+	}
+
+	function applyHover() {
+		if (!hoverClassApplied && options.dragClass) {
+			hoverClassApplied = true;
+			node.classList.add(options.dragClass);
+		}
+	}
+
+	function removeHover() {
+		if (hoverClassApplied) {
+			hoverClassApplied = false;
+			node.classList.remove(options.dragClass!);
+		}
+	}
+
+	function handleOver(e: DragEvent) {
+		const info = resolveDrag(e);
+		if (!accepts(info)) return;
+
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = options.effect ?? "move";
+		}
+		applyHover();
+		options.onover?.(info!, e);
+	}
+
+	function handleEnter(e: DragEvent) {
+		const info = resolveDrag(e);
+		if (!accepts(info)) return;
+		applyHover();
+		options.onenter?.(info!, e);
+	}
+
+	function handleLeave(e: DragEvent) {
+		const related = e.relatedTarget as Node | null;
+		if (related && node.contains(related)) return;
+		removeHover();
+		options.onleave?.();
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		removeHover();
+
+		const info = resolveDrag(e);
+		if (!accepts(info)) return;
+		options.ondrop?.(info!, e);
+	}
+
+	node.addEventListener("dragover", handleOver);
+	node.addEventListener("dragenter", handleEnter);
+	node.addEventListener("dragleave", handleLeave);
+	node.addEventListener("drop", handleDrop);
+
+	return () => {
+		removeHover();
+		node.removeEventListener("dragover", handleOver);
+		node.removeEventListener("dragenter", handleEnter);
+		node.removeEventListener("dragleave", handleLeave);
+		node.removeEventListener("drop", handleDrop);
+	};
+}

package/dist/mount/hoverTrigger.ts

@@ -10,7 +10,7 @@ export default function hoverTrigger(node: HTMLElement, options: HoverTriggerOpt
 	const hoverDelay = options.hoverDelay || 1000;
 	const touchDelay = options.touchDelay || 1000;
 
-	let interval: NodeJS.Timeout | undefined;
+	let interval: ReturnType<typeof setTimeout> | undefined;
 
 	// Add click event handlers to the node
 	node.addEventListener("mouseenter", handleMouseEnter);

package/dist/utils/$handle.ts

@@ -0,0 +1,23 @@
+import { $run } from "@torpor/view";
+
+/**
+ * Runs a function once on subscription and re-runs it whenever any reactive
+ * state it read changes. The callback receives a `first` flag that is `true`
+ * on the initial run and `false` on every subsequent (change-driven) run, so
+ * callers can distinguish setup from "react to a change" without maintaining
+ * their own `firstChange` flag.
+ *
+ * This is a small helper over `$run` kept in @torpor/ui for its components;
+ * library authors can copy it if they need the same pattern.
+ *
+ * @param fn The function to run, receiving a `first` flag. May return a
+ *   cleanup function.
+ */
+export default function $handle(fn: (first: boolean) => void | (() => void)): void {
+	let firstRun = true;
+	$run(() => {
+		const first = firstRun;
+		firstRun = false;
+		return fn(first);
+	});
+}