@e280/sly 0.0.0-3 → 0.0.0-5

package/x/demo/demo.css

@@ -5,6 +5,7 @@
 	:root {
 		--prime: #1eff00;
 		--accent: #387d42;
+		--pill: #12763959;
 		--bg: #0e2316;
 		--link: cyan;
 	}
@@ -51,15 +52,12 @@
 
 @layer page {
 	:root {
-		color-scheme: dark;
-
-		padding: 5vw 0.5em;
-		min-height: 100%;
-		scrollbar-gutter: stable;
-
 		font-size: 21px;
 		font-family: sans-serif;
 
+		color-scheme: dark;
+		scrollbar-gutter: stable;
+
 		color: color-mix(in lch, var(--prime), #fff8 50%);
 		background: radial-gradient(
 			circle,
@@ -69,6 +67,11 @@
 	}
 
 	body {
+		width: 100%;
+		max-width: 32em;
+		margin: auto;
+		padding: 1em;
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -88,6 +91,10 @@
 		font-size: 0.8em;
 	}
 
+	.demo {
+		width: 100%;
+	}
+
 	:not(:defined) {
 		display: none;
 	}

package/x/demo/views/counter.d.ts

@@ -0,0 +1 @@
+export declare const CounterView: import("../../index.js").View<[]>;

package/x/demo/views/counter.js

@@ -0,0 +1,34 @@
+import { css, html } from "lit";
+import { repeat } from "@e280/stz";
+import { view } from "../../features/views/view.js";
+import { cssReset } from "../../features/views/css-reset.js";
+export const CounterView = view(use => () => {
+    use.name("counter");
+    use.styles(cssReset, styles);
+    const start = use.once(() => Date.now());
+    const seconds = use.signal(0);
+    use.mount(() => repeat(async () => {
+        const since = Date.now() - start;
+        seconds(Math.floor(since / 1000));
+    }));
+    const count = use.signal(0);
+    const increment = () => count(count() + 1);
+    return html `
+		<div>
+			<span>${seconds()}</span>
+		</div>
+		<div>
+			<span>${count()}</span>
+			<button @click="${increment}">+</button>
+		</div>
+	`;
+});
+const styles = css `
+:host {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+}
+`;
+//# sourceMappingURL=counter.js.map

package/x/demo/views/counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../s/demo/views/counter.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAC,IAAI,EAAC,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IAC3C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;IACxC,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE7B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAA;QAChC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAA;IAClC,CAAC,CAAC,CAAC,CAAA;IAEH,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC3B,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAA;IAE1C,OAAO,IAAI,CAAA;;WAED,OAAO,EAAE;;;WAGT,KAAK,EAAE;qBACG,SAAS;;EAE5B,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}

package/x/demo/views/demo.d.ts

@@ -0,0 +1 @@
+export declare const DemoView: import("../../index.js").View<[]>;

package/x/demo/views/demo.js

@@ -0,0 +1,21 @@
+import { css, html } from "lit";
+import { CounterView } from "./counter.js";
+import { LoadersView } from "./loaders.js";
+import { view } from "../../features/views/view.js";
+import { cssReset } from "../../features/views/css-reset.js";
+export const DemoView = view(use => () => {
+    use.name("demo");
+    use.styles(cssReset, styles);
+    return html `
+		${CounterView()}
+		${LoadersView()}
+	`;
+});
+const styles = css `
+:host {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+}
+`;
+//# sourceMappingURL=demo.js.map

package/x/demo/views/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../s/demo/views/demo.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,IAAI,EAAC,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IACxC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,OAAO,IAAI,CAAA;IACR,WAAW,EAAE;IACb,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;CAMjB,CAAA"}

package/x/demo/views/loaders.d.ts

@@ -0,0 +1 @@
+export declare const LoadersView: import("../../index.js").View<[]>;

package/x/demo/views/loaders.js

@@ -0,0 +1,50 @@
+import { css, html } from "lit";
+import { Op } from "../../features/op/op.js";
+import { view } from "../../features/views/view.js";
+import { cssReset } from "../../features/views/css-reset.js";
+import { anims, makeLoader } from "../../features/op/loaders/make-loader.js";
+export const LoadersView = view(use => () => {
+    use.name("loaders");
+    use.styles(cssReset, styles);
+    const op = use.once(() => Op.loading());
+    const loaders = use.once(() => Object.entries(anims).map(([key, anim]) => ({
+        key,
+        loader: makeLoader(anim)
+    })));
+    return loaders.map(({ key, loader }) => html `
+		<div data-anim="${key}">
+			<span>${key}</span>
+			<span>${loader(op, () => null)}</span>
+		</div>
+	`);
+});
+const styles = css `
+:host {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+
+	gap: 0.2em;
+	padding: 1em;
+
+	width: 100%;
+}
+
+div {
+	font-family: monospace;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.4em;
+
+	padding: 0.2em 0.5em;
+	background: var(--pill);
+	border-radius: 0.5em;
+
+	span:nth-child(1) { font-size: 0.6em; }
+	span:nth-child(2) { font-size: 1.2em; }
+}
+`;
+//# sourceMappingURL=loaders.js.map

package/x/demo/views/loaders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loaders.js","sourceRoot":"","sources":["../../../s/demo/views/loaders.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,EAAE,EAAC,MAAM,yBAAyB,CAAA;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,0CAA0C,CAAA;AAE1E,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IAC3C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;IAEvC,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAC7B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QAC3C,GAAG;QACH,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;KACxB,CAAC,CAAC,CACH,CAAA;IAED,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA;oBACvB,GAAG;WACZ,GAAG;WACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC;;EAE/B,CAAC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BjB,CAAA"}

package/x/features/dom/dollar.d.ts

@@ -1,8 +1,9 @@
-export declare const $: typeof one;
-export type Queryable = HTMLElement | Document | ShadowRoot | Element;
-declare function one<E extends HTMLElement = HTMLElement>(selector: string, context?: Queryable): E;
-declare namespace one {
+import { Content } from "../views/types.js";
+export type Container = HTMLElement | ShadowRoot | DocumentFragment;
+export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment;
+export declare function $<E extends HTMLElement = HTMLElement>(selector: string, context?: Queryable): E;
+export declare namespace $ {
     var maybe: <E extends HTMLElement = HTMLElement>(selector: string, context?: Queryable) => E | null;
     var all: <E extends HTMLElement = HTMLElement>(selector: string, context?: Queryable) => E[];
+    var render: (container: Container, ...content: Content[]) => import("lit-html").RootPart;
 }
-export {};

package/x/features/dom/dollar.js

@@ -1,15 +1,16 @@
-export const $ = one;
-function all(selector, context = document) {
-    return Array.from(context.querySelectorAll(selector));
-}
-function one(selector, context = document) {
+import { render } from "lit";
+export function $(selector, context = document) {
     const e = context.querySelector(selector);
     if (!e)
         throw new Error(`$1 ${selector} not found`);
     return e;
 }
-one.maybe = (selector, context = document) => {
+function all(selector, context = document) {
+    return Array.from(context.querySelectorAll(selector));
+}
+$.maybe = (selector, context = document) => {
     return context.querySelector(selector);
 };
-one.all = all;
+$.all = all;
+$.render = (container, ...content) => render(content, container);
 //# sourceMappingURL=dollar.js.map

package/x/features/dom/dollar.js.map

@@ -1 +1 @@
-{"version":3,"file":"dollar.js","sourceRoot":"","sources":["../../../s/features/dom/dollar.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,CAAA;AAIpB,SAAS,GAAG,CAAsC,QAAgB,EAAE,UAAqB,QAAQ;IAChG,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAI,QAAQ,CAAC,CAAC,CAAA;AACzD,CAAC;AAED,SAAS,GAAG,CAAsC,QAAgB,EAAE,UAAqB,QAAQ;IAChG,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC5C,IAAI,CAAC,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,MAAM,QAAQ,YAAY,CAAC,CAAA;IACnD,OAAO,CAAC,CAAA;AACT,CAAC;AAED,GAAG,CAAC,KAAK,GAAG,CAAsC,QAAgB,EAAE,UAAqB,QAAQ,EAAE,EAAE;IACpG,OAAO,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;AAC1C,CAAC,CAAA;AAED,GAAG,CAAC,GAAG,GAAG,GAAG,CAAA"}
+{"version":3,"file":"dollar.js","sourceRoot":"","sources":["../../../s/features/dom/dollar.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,KAAK,CAAA;AAM1B,MAAM,UAAU,CAAC,CAAsC,QAAgB,EAAE,UAAqB,QAAQ;IACrG,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC5C,IAAI,CAAC,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,MAAM,QAAQ,YAAY,CAAC,CAAA;IACnD,OAAO,CAAC,CAAA;AACT,CAAC;AAED,SAAS,GAAG,CAAsC,QAAgB,EAAE,UAAqB,QAAQ;IAChG,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAI,QAAQ,CAAC,CAAC,CAAA;AACzD,CAAC;AAED,CAAC,CAAC,KAAK,GAAG,CAAsC,QAAgB,EAAE,UAAqB,QAAQ,EAAE,EAAE;IAClG,OAAO,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;AAC1C,CAAC,CAAA;AAED,CAAC,CAAC,GAAG,GAAG,GAAG,CAAA;AAEX,CAAC,CAAC,MAAM,GAAG,CAAC,SAAoB,EAAE,GAAG,OAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA"}

package/x/features/op/loaders/make-loader.d.ts

@@ -0,0 +1,5 @@
+import { Op } from "../op.js";
+import { Content } from "../../views/types.js";
+export * as anims from "./parts/anims.js";
+export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content;
+export declare function makeLoader(loading?: () => Content, error?: (error: any) => Content): Loader;

package/x/features/op/loaders/make-loader.js

@@ -0,0 +1,7 @@
+import { braille } from "./parts/anims.js";
+import { ErrorDisplay } from "./parts/error-display.js";
+export * as anims from "./parts/anims.js";
+export function makeLoader(loading = braille, error = (error) => ErrorDisplay(error)) {
+    return (op, ready) => op.select({ loading, ready, error });
+}
+//# sourceMappingURL=make-loader.js.map

package/x/features/op/loaders/make-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-loader.js","sourceRoot":"","sources":["../../../../s/features/op/loaders/make-loader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAC,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAA;AAErD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAA;AAIzC,MAAM,UAAU,UAAU,CACxB,UAAyB,OAAO,EAChC,QAAiC,CAAC,KAAU,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC;IAGrE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AACzD,CAAC"}

package/x/features/op/loaders/parts/anims.d.ts

@@ -0,0 +1,24 @@
+import { Content } from "../../../views/types.js";
+export declare const spinner: () => Content;
+export declare const braille: () => Content;
+export declare const arrow: () => Content;
+export declare const arrow2: () => Content;
+export declare const bar: () => Content;
+export declare const bar2: () => Content;
+export declare const bar3: () => Content;
+export declare const bar4: () => Content;
+export declare const pie: () => Content;
+export declare const cylon: () => Content;
+export declare const slider: () => Content;
+export declare const scrubber: () => Content;
+export declare const pulse: () => Content;
+export declare const bin: () => Content;
+export declare const binary: () => Content;
+export declare const binary2: () => Content;
+export declare const clock: () => Content;
+export declare const fistbump: () => Content;
+export declare const earth: () => Content;
+export declare const lock: () => Content;
+export declare const bright: () => Content;
+export declare const speaker: () => Content;
+export declare const moon: () => Content;

package/x/features/op/loaders/parts/anims.js

@@ -0,0 +1,251 @@
+import { makeAsciiAnim } from "./ascii-anim.js";
+const hz = 20;
+export const spinner = makeAsciiAnim(hz, [
+    "|",
+    "/",
+    "-",
+    "\\",
+]);
+export const braille = makeAsciiAnim(hz, [
+    "⠈",
+    "⠐",
+    "⠠",
+    "⢀",
+    "⡀",
+    "⠄",
+    "⠂",
+    "⠁",
+]);
+export const arrow = makeAsciiAnim(hz, [
+    "←",
+    "↖",
+    "↑",
+    "↗",
+    "→",
+    "↘",
+    "↓",
+    "↙",
+]);
+export const arrow2 = makeAsciiAnim(hz, [
+    "⬆️",
+    "↗️",
+    "➡️",
+    "↘️",
+    "⬇️",
+    "↙️",
+    "⬅️",
+    "↖️",
+]);
+export const bar = makeAsciiAnim(hz, [
+    "▰▱▱▱▱",
+    "▰▱▱▱▱",
+    "▱▰▱▱▱",
+    "▱▱▰▱▱",
+    "▱▱▱▰▱",
+    "▱▱▱▱▰",
+    "▱▱▱▱▰",
+    "▱▱▱▰▱",
+    "▱▱▰▱▱",
+    "▱▰▱▱▱",
+]);
+export const bar2 = makeAsciiAnim(hz, [
+    "▱▱▰▱▱",
+    "▱▱▱▰▱",
+    "▱▱▱▰▰",
+    "▱▱▱▰▰",
+    "▱▱▱▱▰",
+    "▱▱▱▱▰",
+    "▱▱▱▱▰",
+    "▱▱▱▰▰",
+    "▱▱▱▰▰",
+    "▱▱▱▰▱",
+    "▱▱▰▱▱",
+    "▱▰▱▱▱",
+    "▰▰▱▱▱",
+    "▰▰▱▱▱",
+    "▰▱▱▱▱",
+    "▰▱▱▱▱",
+    "▰▱▱▱▱",
+    "▰▰▱▱▱",
+    "▰▰▱▱▱",
+    "▱▰▱▱▱",
+]);
+export const bar3 = makeAsciiAnim(hz, [
+    "▰▱▱▱▱",
+    "▰▱▱▱▱",
+    "▰▰▱▱▱",
+    "▰▰▰▱▱",
+    "▱▰▰▰▱",
+    "▱▱▰▰▰",
+    "▱▱▱▰▰",
+    "▱▱▱▱▰",
+    "▱▱▱▱▰",
+    "▱▱▱▰▰",
+    "▱▱▰▰▰",
+    "▱▰▰▰▱",
+    "▰▰▰▱▱",
+    "▰▰▱▱▱",
+]);
+export const bar4 = makeAsciiAnim(hz, [
+    "▱▱▱▱▱",
+    "▰▱▱▱▱",
+    "▰▰▱▱▱",
+    "▰▰▰▱▱",
+    "▰▰▰▰▱",
+    "▰▰▰▰▰",
+    "▰▰▰▰▰",
+    "▱▰▰▰▰",
+    "▱▱▰▰▰",
+    "▱▱▱▰▰",
+    "▱▱▱▱▰",
+]);
+export const pie = makeAsciiAnim(hz, [
+    "◷",
+    "◶",
+    "◵",
+    "◴",
+]);
+export const cylon = makeAsciiAnim(hz, [
+    "=----",
+    "-=---",
+    "--=--",
+    "---=-",
+    "----=",
+    "----=",
+    "---=-",
+    "--=--",
+    "-=---",
+    "=----",
+]);
+export const slider = makeAsciiAnim(hz, [
+    "o----",
+    "-o---",
+    "--o--",
+    "---o-",
+    "----o",
+    "----o",
+    "---o-",
+    "--o--",
+    "-o---",
+    "o----",
+]);
+export const scrubber = makeAsciiAnim(hz, [
+    ":....",
+    ":....",
+    "::...",
+    ".::..",
+    "..::.",
+    "...::",
+    "....:",
+    "....:",
+    "...::",
+    "..::.",
+    ".::..",
+    "::...",
+]);
+export const pulse = makeAsciiAnim(hz, [
+    ".....",
+    ".....",
+    "..:..",
+    ".:::.",
+    ".:::.",
+    ":::::",
+    ":::::",
+    "::.::",
+    ":...:",
+]);
+export const bin = makeAsciiAnim(hz, [
+    "000",
+    "100",
+    "110",
+    "111",
+    "011",
+    "001",
+]);
+export const binary = makeAsciiAnim(hz, [
+    "11111",
+    "01111",
+    "00111",
+    "10011",
+    "11001",
+    "01100",
+    "00110",
+    "10011",
+    "11001",
+    "11100",
+    "11110",
+]);
+export const binary2 = makeAsciiAnim(hz, [
+    "11111",
+    "01111",
+    "10111",
+    "11011",
+    "11101",
+    "11110",
+    "11111",
+    "11110",
+    "11101",
+    "11011",
+    "10111",
+    "01111",
+]);
+export const clock = makeAsciiAnim(hz, [
+    "🕐",
+    "🕑",
+    "🕒",
+    "🕓",
+    "🕔",
+    "🕕",
+    "🕖",
+    "🕗",
+    "🕘",
+    "🕙",
+    "🕚",
+    "🕛",
+]);
+export const fistbump = makeAsciiAnim(hz, [
+    "🤜    🤛",
+    "🤜    🤛",
+    "🤜    🤛",
+    " 🤜  🤛 ",
+    "  🤜🤛  ",
+    "  🤜🤛  ",
+    " 🤜💥🤛 ",
+    "🤜 💥 🤛",
+    "🤜 ✨ 🤛",
+    "🤜 ✨ 🤛",
+]);
+export const earth = makeAsciiAnim(4, [
+    "🌎",
+    "🌏",
+    "🌍",
+]);
+export const lock = makeAsciiAnim(4, [
+    "🔓",
+    "🔒",
+]);
+export const bright = makeAsciiAnim(4, [
+    "🔅",
+    "🔆",
+]);
+export const speaker = makeAsciiAnim(4, [
+    "🔈",
+    "🔈",
+    "🔉",
+    "🔊",
+    "🔊",
+    "🔉",
+]);
+export const moon = makeAsciiAnim(10, [
+    "🌑",
+    "🌑",
+    "🌑",
+    "🌘",
+    "🌗",
+    "🌖",
+    "🌕",
+    "🌔",
+    "🌓",
+    "🌒",
+]);
+//# sourceMappingURL=anims.js.map

package/x/features/op/loaders/parts/anims.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anims.js","sourceRoot":"","sources":["../../../../../s/features/op/loaders/parts/anims.ts"],"names":[],"mappings":"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"}

package/x/features/op/loaders/parts/ascii-anim.d.ts

@@ -0,0 +1,6 @@
+import { Content } from "../../../views/types.js";
+export declare function makeAsciiAnim(hz: number, frames: string[]): () => Content;
+export declare const AsciiAnim: import("../../../views/types.js").View<[{
+    hz: number;
+    frames: string[];
+}]>;

package/x/features/op/loaders/parts/ascii-anim.js

@@ -0,0 +1,26 @@
+import { css } from "lit";
+import { nap, repeat } from "@e280/stz";
+import { view } from "../../../views/view.js";
+import { cssReset } from "../../../views/css-reset.js";
+export function makeAsciiAnim(hz, frames) {
+    return () => AsciiAnim({ hz, frames });
+}
+export const AsciiAnim = view(use => ({ hz, frames }) => {
+    use.name("loading");
+    use.styles(cssReset, style);
+    const frame = use.signal(0);
+    use.mount(() => repeat(async () => {
+        await nap(1000 / hz);
+        const next = frame() + 1;
+        frame(next >= frames.length ? 0 : next);
+    }));
+    return frames.at(frame());
+});
+const style = css `
+:host {
+	font-family: monospace;
+	white-space: pre;
+	user-select: none;
+}
+`;
+//# sourceMappingURL=ascii-anim.js.map

package/x/features/op/loaders/parts/ascii-anim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../../../s/features/op/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAErC,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAE3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAA;AAEpD,MAAM,UAAU,aAAa,CAAC,EAAU,EAAE,MAAgB;IACzD,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,EAAC,EAAE,EAAE,MAAM,EAAC,CAAC,CAAA;AACrC,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAC,EAAE,EAAE,MAAM,EAG/C,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAC3B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE3B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,KAAK,EAAE,GAAG,CAAC,CAAA;QACxB,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IACxC,CAAC,CAAC,CAAC,CAAA;IAEH,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAA;AAC1B,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMhB,CAAA"}

package/x/features/op/loaders/parts/error-display.d.ts

@@ -0,0 +1 @@
+export declare const ErrorDisplay: import("../../../views/types.js").View<[error: any]>;

package/x/features/{loady → op/loaders}/parts/error-display.js

@@ -1,14 +1,8 @@
 import { css, html } from "lit";
-import { view } from "../../views/view.js";
-import { cssReset } from "../../views/css-reset.js";
-const style = css `
-:host {
-	font-family: monospace;
-	color: red;
-}
-`;
+import { view } from "../../../views/view.js";
+import { cssReset } from "../../../views/css-reset.js";
 export const ErrorDisplay = view(use => (error) => {
-    use.name("loading");
+    use.name("error");
     use.styles(cssReset, style);
     if (typeof error === "string")
         return error;
@@ -17,4 +11,10 @@ export const ErrorDisplay = view(use => (error) => {
     else
         return `error`;
 });
+const style = css `
+:host {
+	font-family: monospace;
+	color: red;
+}
+`;
 //# sourceMappingURL=error-display.js.map

package/x/features/op/loaders/parts/error-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-display.js","sourceRoot":"","sources":["../../../../../s/features/op/loaders/parts/error-display.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAA;AAEpD,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,KAAU,EAAE,EAAE;IACtD,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACjB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAE3B,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC5B,OAAO,KAAK,CAAA;SAER,IAAI,KAAK,YAAY,KAAK;QAC9B,OAAO,IAAI,CAAA,WAAW,KAAK,CAAC,IAAI,oBAAoB,KAAK,CAAC,OAAO,SAAS,CAAA;;QAG1E,OAAO,OAAO,CAAA;AAChB,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;CAKhB,CAAA"}

package/x/features/op/op.d.ts

@@ -1,12 +1,15 @@
+import { Signal } from "@e280/strata/signals";
 import { Pod, PodSelect } from "./types.js";
 export declare class Op<V> {
     #private;
-    static loading(): Op<unknown>;
+    static loading<V>(): Op<V>;
     static ready<V>(value: V): Op<V>;
-    static error(error: any): Op<unknown>;
+    static error<V>(error: any): Op<V>;
     static promise<V>(promise: Promise<V>): Op<V>;
     static fn<V>(fn: () => Promise<V>): Op<V>;
-    readonly signal: import("@e280/strata/signals").Signal<Pod<V>>;
+    static all<V>(...ops: Op<V>[]): Op<V[]>;
+    readonly signal: Signal<Pod<V>>;
+    constructor(pod?: Pod<V>);
     get wait(): Promise<unknown>;
     setLoading(): Promise<void>;
     setReady(value: V): Promise<void>;
@@ -14,8 +17,14 @@ export declare class Op<V> {
     promise(promise: Promise<V>): Promise<V | undefined>;
     fn(fn: () => Promise<V>): Promise<V | undefined>;
     get pod(): Pod<V>;
+    set pod(p: Pod<V>);
     get status(): "loading" | "ready" | "error";
     get value(): V | undefined;
+    get error(): any;
+    get isLoading(): boolean;
+    get isReady(): boolean;
+    get isError(): boolean;
     require(): V;
     select<R>(select: PodSelect<V, R>): R;
+    morph<V2>(fn: (value: V) => V2): Op<V2>;
 }