@e280/sly 0.2.4 → 0.3.0-1

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

@@ -0,0 +1 @@
+export declare const CounterLight: import("../../view/types.js").View<[start: number]>;

package/x/demo/views/counter-light.js

@@ -0,0 +1,10 @@
+import { html } from "lit";
+import { light, useSignal } from "../../view/index.js";
+export const CounterLight = light((start) => {
+    const $count = useSignal(start);
+    const increment = () => $count.value++;
+    return html `
+		<button @click="${increment}">${$count()}</button>
+	`;
+});
+//# sourceMappingURL=counter-light.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-light.js","sourceRoot":"","sources":["../../../s/demo/views/counter-light.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAEpD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,KAAa,EAAE,EAAE;IACnD,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAEtC,OAAO,IAAI,CAAA;oBACQ,SAAS,KAAK,MAAM,EAAE;EACxC,CAAA;AACF,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1 @@
+export declare const CounterShadow: import("../../view/types.js").ShadowView<[start: number]>;

package/x/demo/views/counter-shadow.js

@@ -0,0 +1,12 @@
+import { css, html } from "lit";
+import { shadow, useName, useCss, useSignal } from "../../view/index.js";
+export const CounterShadow = shadow((start) => {
+    useName("counter-shadow");
+    useCss(css `:host{display:inline-block} button{color:cyan}`);
+    const $count = useSignal(start);
+    const increment = () => $count.value++;
+    return html `
+		<button @click="${increment}">${$count()}</button>
+	`;
+});
+//# sourceMappingURL=counter-shadow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-shadow.js","sourceRoot":"","sources":["../../../s/demo/views/counter-shadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAEtE,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,KAAa,EAAE,EAAE;IACrD,OAAO,CAAC,gBAAgB,CAAC,CAAA;IACzB,MAAM,CAAC,GAAG,CAAA,gDAAgD,CAAC,CAAA;IAE3D,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAEtC,OAAO,IAAI,CAAA;oBACQ,SAAS,KAAK,MAAM,EAAE;EACxC,CAAA;AACF,CAAC,CAAC,CAAA"}

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

@@ -1,4 +1 @@
-declare const DemoComponent_base: import("../../index.js").ComponentClass<typeof import("../../index.js").BaseElement, []>;
-export declare class DemoComponent extends DemoComponent_base {
-}
-export {};
+export declare const Demo: import("../../view/types.js").ShadowView<[]>;

package/x/demo/views/demo.js

@@ -1,26 +1,31 @@
 import { css, html } from "lit";
-import { view } from "../../view/view.js";
-import { CounterView } from "./counter.js";
 import { LoadersView } from "./loaders.js";
-import { cssReset } from "../../base/css-reset.js";
-export class DemoComponent extends (view.component(use => {
-    use.name("demo");
-    use.styles(cssReset, styles);
+import { CounterLight } from "./counter-light.js";
+import { CounterShadow } from "./counter-shadow.js";
+import { cssReset, shadow, useName, useStyles } from "../../view/index.js";
+export const Demo = shadow(() => {
+    useName("demo");
+    useStyles(cssReset, styles);
     return html `
-		${CounterView
-        .props(768, 3)
-        .children("view")
-        .render()}
+		<p>light ${CounterLight(123)}</p>
+
+		<p>
+			shadow ${CounterShadow.with({
+        props: [234],
+        attrs: { "data-lol": 555 },
+        children: html `<p>hello</p>`,
+    })}
+		</p>
+
 		${LoadersView()}
 	`;
-})) {
-}
+});
 const styles = css `
-:host {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1em;
-}
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1em;
+	}
 `;
 //# sourceMappingURL=demo.js.map

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

@@ -1 +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;AAE7B,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,MAAM,OAAO,aAAc,SAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;IACxD,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5B,OAAO,IAAI,CAAA;IACR,WAAW;SACX,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;SACb,QAAQ,CAAC,MAAM,CAAC;SAChB,MAAM,EAAE;IACR,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAC;CAAG;AAEN,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}
+{"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,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAExE,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,EAAE;IAC/B,OAAO,CAAC,MAAM,CAAC,CAAA;IACf,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE3B,OAAO,IAAI,CAAA;aACC,YAAY,CAAC,GAAG,CAAC;;;YAGlB,aAAa,CAAC,IAAI,CAAC;QAC3B,KAAK,EAAE,CAAC,GAAG,CAAC;QACZ,KAAK,EAAE,EAAC,UAAU,EAAE,GAAG,EAAC;QACxB,QAAQ,EAAE,IAAI,CAAA,cAAc;KAC5B,CAAC;;;IAGD,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}

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

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

package/x/demo/views/loaders.js

@@ -1,13 +1,13 @@
 import { css, html } from "lit";
 import { Op } from "../../ops/op.js";
-import { view } from "../../view/view.js";
+import { shadow } from "../../view/shadow.js";
 import { loaders } from "../../loaders/index.js";
-import { cssReset } from "../../base/css-reset.js";
-export const LoadersView = view(use => () => {
-    use.name("loaders");
-    use.styles(cssReset, styles);
-    const op = use.once(() => Op.loading());
-    const library = use.once(() => Object.entries(loaders.anims).map(([key, anim]) => ({
+import { cssReset, useName, useOnce, useStyles } from "../../view/index.js";
+export const LoadersView = shadow(() => {
+    useName("loaders");
+    useStyles(cssReset, styles);
+    const op = useOnce(() => Op.loading());
+    const library = useOnce(() => Object.entries(loaders.anims).map(([key, anim]) => ({
         key,
         loader: loaders.make(anim)
     })));

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

@@ -1 +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,iBAAiB,CAAA;AAClC,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,OAAO,EAAC,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,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,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QACnD,GAAG;QACH,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC1B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjB,CAAA"}
+{"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,iBAAiB,CAAA;AAClC,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAC,OAAO,EAAC,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAEzE,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,EAAE;IACtC,OAAO,CAAC,SAAS,CAAC,CAAA;IAClB,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE3B,MAAM,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;IAEtC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAC5B,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QACnD,GAAG;QACH,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC1B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjB,CAAA"}

package/x/index.d.ts

@@ -1,7 +1,5 @@
-export * from "./base/index.js";
 export * from "./dom/index.js";
 export * from "./loaders/index.js";
 export * from "./loot/index.js";
 export * from "./ops/index.js";
-export * from "./spa/index.js";
 export * from "./view/index.js";

package/x/index.html

@@ -1,141 +1,31 @@
 <!doctype html>
-			<html>
-				<head>
-					<meta charset="utf-8"/>
-					<meta name="viewport" content="width=device-width,initial-scale=1"/>
-					<meta name="darkreader-lock"/>
-					<title>sly</title>
-					<style>
-@layer vars, core, page;
-
-@layer vars {
-:root {
-	--prime: #1eff00;
-	--accent: #387d42;
-	--pill: #1276391a;
-	--bg: #0e2316;
-	--link: cyan;
-}
-}
-
-@layer core {
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-
-	scrollbar-width: thin;
-	scrollbar-color: #444 transparent;
-}
-
-::selection {
-	color: white;
-	background-color: #f70;
-}
-
-::-webkit-scrollbar { width: 8px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #444; border-radius: 1em; }
-::-webkit-scrollbar-thumb:hover { background: #666; }
-
-a {
-	color: var(--link);
-	text-decoration: none;
-
-	&:visited {
-		color: color-mix(in srgb, purple, var(--link) 70%);
-	}
-
-	&:hover {
-		color: color-mix(in srgb, white, var(--link) 90%);
-		text-decoration: underline;
-	}
-
-	&:active {
-		color: color-mix(in srgb, white, var(--link) 50%);
-	}
-}
-}
-
-@layer page {
-:root {
-	height: 100%;
-	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,
-		var(--bg),
-		color-mix(in lch, var(--bg), black 80%)
-	);
-}
-
-body {
-	width: 100%;
-	min-height: 100%;
-	max-width: 32em;
-	margin: auto;
-	padding: 1em;
-	padding-bottom: 6em;
-
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1em;
-}
-
-.icon {
-	display: block;
-	width: 100%;
-	max-width: 24em;
-	max-height: 30vh;
-	object-fit: contain;
-}
-
-.lil {
-	opacity: 0.6;
-	font-size: 0.8em;
-}
-
-.demo {
-	width: 100%;
-}
-
-:not(:defined) {
-	display: none;
-}
-}
-
-</style>
-					<script type=module src="demo/demo.bundle.min.js?v=1ed4863fcfb8"></script>
-					<link rel="icon" href="assets/favicon.png?v=4dc161ed79b3"/>
-
-		<meta name="theme-color" content="#95ff7b">
-		<meta property="og:type" content="website">
-		<meta property="og:site_name" content="@e280/sly">
-		<meta property="og:title" content="sly">
-		<meta property="og:description" content="mischievous shadow views">
-		<meta property="og:image" content="https://sly.e280.org/assets/favicon.png">
-
-
-
-	<meta name="example" value="whatever"/>
-
-				</head>
-				<body>
-
-	<img class=icon alt="" src="/assets/favicon.png"/>
-	<h1>sly testing page</h1>
-	<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
-	<p class=lil>v0.2.4</p>
-
-	<fastcount-element></fastcount-element>
-	<counter-component start=280 step=2>component</counter-component>
-	<demo-component></demo-component>
-
-				</body>
-			</html>
+<html>
+	<head>
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width,initial-scale=1"/>
+		<meta name="darkreader-lock"/>
+		<style>@layer base{html{background:#000}}</style>
+
+		<title>sly</title>
+		<link rel="icon" href="/assets/favicon.png"/>
+		<link rel="stylesheet" href="demo/demo.css?v=633361cda103"/>
+		<script type="module" src="demo/demo.bundle.min.js?v=9c2a5e03f3a3"></script>
+
+
+<meta name="theme-color" content="#95ff7b">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="@e280/sly">
+<meta property="og:title" content="sly">
+<meta property="og:description" content="mischievous shadow views">
+<meta property="og:image" content="https://sly.e280.org/assets/favicon.png">
+
+
+	</head>
+	<body>
+		<img class=icon alt="" src="/assets/favicon.png"/>
+		<h1>sly testing page</h1>
+		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
+		<p class=lil>v0.3.0-1</p>
+		<div class="demo"></div>
+	</body>
+</html>

package/x/index.html.js

@@ -1,33 +1,33 @@
-import { ssg, html } from "@e280/scute";
-const title = "sly";
-const description = "mischievous shadow views";
-const domain = "sly.e280.org";
-const favicon = "/assets/favicon.png";
-export default ssg.page(import.meta.url, async (orb) => ({
-    title,
-    js: "demo/demo.bundle.min.js",
-    css: "demo/demo.css",
-    favicon,
-    dark: true,
-    socialCard: {
-        themeColor: "#95ff7b",
-        title,
-        description,
-        siteName: "@e280/sly",
-        image: "https://" + domain + favicon,
-    },
-    head: html `
-		<meta name="example" value="whatever"/>
-	`,
-    body: html `
-		<img class=icon alt="" src="/assets/favicon.png"/>
-		<h1>sly testing page</h1>
-		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
-		<p class=lil>v${orb.packageVersion()}</p>
+import { template, html, socialCard } from "@e280/scute";
+export default template(import.meta.url, async (orb) => html `
+	<!doctype html>
+	<html>
+		<head>
+			<meta charset="utf-8"/>
+			<meta name="viewport" content="width=device-width,initial-scale=1"/>
+			<meta name="darkreader-lock"/>
+			<style>@layer base{html{background:#000}}</style>
 
-		<fastcount-element></fastcount-element>
-		<counter-component start=280 step=2>component</counter-component>
-		<demo-component></demo-component>
-	`,
-}));
+			<title>sly</title>
+			<link rel="icon" href="/assets/favicon.png"/>
+			<link rel="stylesheet" href="${orb.hashurl("demo/demo.css")}"/>
+			<script type="module" src="${orb.hashurl("demo/demo.bundle.min.js")}"></script>
+
+			${socialCard({
+    themeColor: "#95ff7b",
+    title: "sly",
+    description: "mischievous shadow views",
+    siteName: "@e280/sly",
+    image: "https://sly.e280.org/assets/favicon.png",
+})}
+		</head>
+		<body>
+			<img class=icon alt="" src="/assets/favicon.png"/>
+			<h1>sly testing page</h1>
+			<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
+			<p class=lil>v${orb.packageVersion()}</p>
+			<div class="demo"></div>
+		</body>
+	</html>
+`);
 //# sourceMappingURL=index.html.js.map

package/x/index.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,KAAK,CAAA;AACnB,MAAM,WAAW,GAAG,0BAA0B,CAAA;AAC9C,MAAM,MAAM,GAAG,cAAc,CAAA;AAC7B,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,WAAW;QACX,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;EAET;IAED,IAAI,EAAE,IAAI,CAAA;;;;kBAIO,GAAG,CAAC,cAAc,EAAE;;;;;EAKpC;CACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAC,MAAM,aAAa,CAAA;AAEtD,eAAe,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;kCAWxB,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC;gCAC9B,GAAG,CAAC,OAAO,CAAC,yBAAyB,CAAC;;KAEjE,UAAU,CAAC;IACZ,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,0BAA0B;IACvC,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,yCAAyC;CAChD,CAAC;;;;;;mBAMc,GAAG,CAAC,cAAc,EAAE;;;;CAItC,CAAC,CAAA"}

package/x/index.js

@@ -1,8 +1,6 @@
-export * from "./base/index.js";
 export * from "./dom/index.js";
 export * from "./loaders/index.js";
 export * from "./loot/index.js";
 export * from "./ops/index.js";
-export * from "./spa/index.js";
 export * from "./view/index.js";
 //# sourceMappingURL=index.js.map

package/x/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}

package/x/loaders/make.d.ts

@@ -1,3 +1,3 @@
 import { Loader } from "./types.js";
-import type { Content } from "../view/types.js";
+import { Content } from "../view/types.js";
 export declare function make(loading?: () => Content, error?: (error: any) => Content): Loader;

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

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

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

@@ -1,15 +1,14 @@
 import { css } from "lit";
 import { nap, cycle } from "@e280/stz";
-import { view } from "../../view/view.js";
-import { cssReset } from "../../base/css-reset.js";
+import { cssReset, shadow, useMount, useName, useSignal, useStyles } from "../../view/index.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(() => cycle(async () => {
+export const AsciiAnim = shadow(({ hz, frames }) => {
+    useName("loading");
+    useStyles(cssReset, style);
+    const frame = useSignal(0);
+    useMount(() => cycle(async () => {
         await nap(1000 / hz);
         const next = frame.get() + 1;
         frame.set(next >= frames.length ? 0 : next);

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

@@ -1 +1 @@
-{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../s/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,KAAK,EAAC,MAAM,WAAW,CAAA;AAEpC,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AAEvC,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,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;IAE3B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE3B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAG,EAAE;QAC/B,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QAC5B,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAC,CAAA;IAEH,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;AAC9B,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMhB,CAAA"}
+{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../s/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,KAAK,EAAC,MAAM,WAAW,CAAA;AAEpC,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAE7F,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,MAAM,CAAC,CAAC,EAAC,EAAE,EAAE,MAAM,EAG1C,EAAE,EAAE;IAEL,OAAO,CAAC,SAAS,CAAC,CAAA;IAClB,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAE1B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;IAE1B,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAG,EAAE;QAC9B,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QAC5B,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAC,CAAA;IAEH,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;AAC9B,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMhB,CAAA"}

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

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

package/x/loaders/parts/error-display.js

@@ -1,9 +1,9 @@
 import { css, html } from "lit";
-import { view } from "../../view/view.js";
-import { cssReset } from "../../base/css-reset.js";
-export const ErrorDisplay = view(use => (error) => {
-    use.name("error");
-    use.styles(cssReset, style);
+import { shadow } from "../../view/shadow.js";
+import { cssReset, useName, useStyles } from "../../view/index.js";
+export const ErrorDisplay = shadow((error) => {
+    useName("error");
+    useStyles(cssReset, style);
     if (typeof error === "string")
         return error;
     else if (error instanceof Error)
@@ -12,9 +12,9 @@ export const ErrorDisplay = view(use => (error) => {
         return `error`;
 });
 const style = css `
-:host {
-	font-family: monospace;
-	color: red;
-}
+	:host {
+		font-family: monospace;
+		color: red;
+	}
 `;
 //# sourceMappingURL=error-display.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"error-display.js","sourceRoot":"","sources":["../../../s/loaders/parts/error-display.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,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"}
+{"version":3,"file":"error-display.js","sourceRoot":"","sources":["../../../s/loaders/parts/error-display.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,KAAU,EAAE,EAAE;IACjD,OAAO,CAAC,OAAO,CAAC,CAAA;IAChB,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAE1B,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/tests.test.js

@@ -1,6 +1,3 @@
 import { Science } from "@e280/science";
-import spa from "./spa/spa.test.js";
-await Science.run({
-    spa,
-});
+await Science.run({});
 //# sourceMappingURL=tests.test.js.map

package/x/tests.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tests.test.js","sourceRoot":"","sources":["../s/tests.test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,GAAG,MAAM,mBAAmB,CAAA;AAEnC,MAAM,OAAO,CAAC,GAAG,CAAC;IACjB,GAAG;CACH,CAAC,CAAA"}
+{"version":3,"file":"tests.test.js","sourceRoot":"","sources":["../s/tests.test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,MAAM,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA"}

package/x/view/common/css-reset.js

@@ -0,0 +1,17 @@
+import { css } from "lit";
+export const cssReset = css `
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+
+		scrollbar-width: thin;
+		scrollbar-color: #888 transparent;
+	}
+
+	::-webkit-scrollbar { width: 8px; }
+	::-webkit-scrollbar-track { background: transparent; }
+	::-webkit-scrollbar-thumb { background: #888; border-radius: 1em; }
+	::-webkit-scrollbar-thumb:hover { background: #999; }
+`;
+//# sourceMappingURL=css-reset.js.map

package/x/view/common/css-reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-reset.js","sourceRoot":"","sources":["../../../s/view/common/css-reset.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAA;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAmB,GAAG,CAAA;;;;;;;;;;;;;;CAc1C,CAAA"}

package/x/view/hooks/plumbing/hooks.d.ts

@@ -0,0 +1,11 @@
+import { Hookscope } from "./hookscope.js";
+export declare class Hooks {
+    #private;
+    get scope(): Hookscope;
+    increment(): {
+        scope: Hookscope;
+        position: number;
+    };
+    wrap<Ret>(scope: Hookscope, fn: () => Ret): Ret;
+}
+export declare const hooks: Hooks;

package/x/view/hooks/plumbing/hooks.js

@@ -0,0 +1,26 @@
+export class Hooks {
+    #scopes = [];
+    get scope() {
+        const scope = this.#scopes.at(-1);
+        if (!scope)
+            throw new Error("hooks must be called within a render fn");
+        return scope;
+    }
+    increment() {
+        const scope = this.scope;
+        const position = scope.position++;
+        return { scope, position };
+    }
+    wrap(scope, fn) {
+        scope.position = 0;
+        this.#scopes.push(scope);
+        try {
+            return fn();
+        }
+        finally {
+            this.#scopes.pop();
+        }
+    }
+}
+export const hooks = globalThis[Symbol.for("e280.hooks")] ??= new Hooks();
+//# sourceMappingURL=hooks.js.map

package/x/view/hooks/plumbing/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../s/view/hooks/plumbing/hooks.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,KAAK;IACjB,OAAO,GAAgB,EAAE,CAAA;IAEzB,IAAI,KAAK;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,IAAI,CAAC,KAAK;YAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAA;QACtE,OAAO,KAAK,CAAA;IACb,CAAC;IAED,SAAS;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QACjC,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAA;IACzB,CAAC;IAED,IAAI,CAAM,KAAgB,EAAE,EAAa;QACxC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAA;QAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,IAAI,CAAC;YAAC,OAAO,EAAE,EAAE,CAAA;QAAC,CAAC;gBACX,CAAC;YAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,CAAA;QAAC,CAAC;IAC/B,CAAC;CACD;AAED,MAAM,CAAC,MAAM,KAAK,GAAW,UAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,CAAA"}

package/x/view/hooks/plumbing/hookscope.d.ts

@@ -0,0 +1,10 @@
+import { GMap } from "@e280/stz";
+import { Mounts } from "../use-mount.js";
+import { LightCx, ShadowCx } from "../../parts/cx.js";
+export declare class Hookscope {
+    cx: LightCx | ShadowCx;
+    position: number;
+    values: GMap<number, any>;
+    mounts: Mounts;
+    constructor(cx: LightCx | ShadowCx);
+}

package/x/view/hooks/plumbing/hookscope.js

@@ -0,0 +1,12 @@
+import { GMap } from "@e280/stz";
+import { Mounts } from "../use-mount.js";
+export class Hookscope {
+    cx;
+    position = 0;
+    values = new GMap();
+    mounts = new Mounts();
+    constructor(cx) {
+        this.cx = cx;
+    }
+}
+//# sourceMappingURL=hookscope.js.map

package/x/view/hooks/plumbing/hookscope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hookscope.js","sourceRoot":"","sources":["../../../../s/view/hooks/plumbing/hookscope.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAA;AAGtC,MAAM,OAAO,SAAS;IAIF;IAHnB,QAAQ,GAAG,CAAC,CAAA;IACZ,MAAM,GAAG,IAAI,IAAI,EAAe,CAAA;IAChC,MAAM,GAAG,IAAI,MAAM,EAAE,CAAA;IACrB,YAAmB,EAAsB;QAAtB,OAAE,GAAF,EAAE,CAAoB;IAAG,CAAC;CAC7C"}

package/x/view/hooks/use-css.d.ts

@@ -0,0 +1,4 @@
+import { CSSResultGroup } from "lit";
+/** attach stylesheets to the shadow root */
+export declare function useCss(...styles: CSSResultGroup[]): void;
+export declare const useStyles: typeof useCss;

package/x/view/hooks/use-css.js

@@ -0,0 +1,10 @@
+import { useShadow } from "./use-cx.js";
+import { useOnce } from "./use-once.js";
+import { applyStyles } from "../parts/apply-styles.js";
+/** attach stylesheets to the shadow root */
+export function useCss(...styles) {
+    const shadow = useShadow();
+    useOnce(() => applyStyles(shadow, styles));
+}
+export const useStyles = useCss;
+//# sourceMappingURL=use-css.js.map

package/x/view/hooks/use-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-css.js","sourceRoot":"","sources":["../../../s/view/hooks/use-css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,WAAW,EAAC,MAAM,0BAA0B,CAAA;AAEpD,4CAA4C;AAC5C,MAAM,UAAU,MAAM,CAAC,GAAG,MAAwB;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAC3C,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAA"}