@e280/sly 0.2.0-2 → 0.2.0-21

package/x/spa/router.js

@@ -0,0 +1,39 @@
+import { disposer } from "@e280/stz";
+import { loaders } from "../loaders/index.js";
+import { RouterCore } from "./plumbing/router-core.js";
+import { HashNormalizer, onHashChange } from "./plumbing/primitives.js";
+export class Router extends RouterCore {
+    loader;
+    notFound;
+    dispose = disposer();
+    #lastHash;
+    constructor(options) {
+        super(options.routes, options.location ?? new HashNormalizer(window.location));
+        const { auto = true } = options;
+        this.loader = options.loader ?? loaders.make();
+        this.notFound = options.notFound ?? (() => null);
+        this.#lastHash = this.hash;
+        if (auto) {
+            this.listen();
+            this.refresh();
+        }
+    }
+    render() {
+        const resolved = this.$resolved.get();
+        return resolved === null
+            ? this.notFound()
+            : this.loader(resolved.op, content => content);
+    }
+    listen() {
+        const dispose = onHashChange(() => {
+            const hash = this.hash;
+            const isChanged = hash !== this.#lastHash;
+            this.#lastHash = hash;
+            if (isChanged)
+                this.refresh();
+        });
+        this.dispose.schedule(dispose);
+        return dispose;
+    }
+}
+//# sourceMappingURL=router.js.map

package/x/spa/router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../../s/spa/router.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAA;AAEpD,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,0BAA0B,CAAA;AAErE,MAAM,OAAO,MAAyB,SAAQ,UAAa;IAC1D,MAAM,CAAQ;IACd,QAAQ,CAAe;IACd,OAAO,GAAG,QAAQ,EAAE,CAAA;IAC7B,SAAS,CAAQ;IAEjB,YAAY,OAAyB;QACpC,KAAK,CACJ,OAAO,CAAC,MAAM,EACd,OAAO,CAAC,QAAQ,IAAI,IAAI,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CACvD,CAAA;QACD,MAAM,EAAC,IAAI,GAAG,IAAI,EAAC,GAAG,OAAO,CAAA;QAC7B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,EAAE,CAAA;QAC9C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAA;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAA;QAC1B,IAAI,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,MAAM,EAAE,CAAA;YACb,IAAI,CAAC,OAAO,EAAE,CAAA;QACf,CAAC;IACF,CAAC;IAED,MAAM;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAA;QACrC,OAAO,QAAQ,KAAK,IAAI;YACvB,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAA;IAChD,CAAC;IAED,MAAM;QACL,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,EAAE;YACjC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YACtB,MAAM,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC,SAAS,CAAA;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,IAAI,SAAS;gBAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QAC9B,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC9B,OAAO,OAAO,CAAA;IACf,CAAC;CACD"}

package/x/spa/spa.test.d.ts

@@ -0,0 +1,15 @@
+import { Science } from "@e280/science";
+declare const _default: {
+    inits: {
+        "#/": Science.Test;
+        "#/hello/world": Science.Test;
+        "#/item/a123": Science.Test;
+        "#/item/a123/lol should miss": Science.Test;
+        "#/left/{mid}/right extraction": Science.Test;
+        "#/not-found-lol": Science.Test;
+    };
+    nav: {
+        "home to item and back": Science.Test;
+    };
+};
+export default _default;

package/x/spa/spa.test.js

@@ -0,0 +1,78 @@
+import { Science, test, expect } from "@e280/science";
+import { route } from "./plumbing/braces.js";
+import { RouterCore } from "./plumbing/router-core.js";
+async function setup(routes) {
+    const location = { hash: "" };
+    const router = new RouterCore(routes, location);
+    return { location, router };
+}
+export default Science.suite({
+    inits: Science.suite({
+        "#/": test(async () => {
+            const { location, router } = await setup({
+                home: route("#/", async () => "123"),
+            });
+            expect(router.content).is(null);
+            location.hash = "#/";
+            await router.refresh();
+            expect(router.content).is("123");
+        }),
+        "#/hello/world": test(async () => {
+            const { location, router } = await setup({
+                helloWorld: route("#/hello/world", async () => "123"),
+            });
+            expect(router.content).is(null);
+            location.hash = "#/hello/world";
+            await router.refresh();
+            expect(router.content).is("123");
+        }),
+        "#/item/a123": test(async () => {
+            const { location, router } = await setup({
+                item: route("#/item/{id}", async ({ id }) => `content ${id}`),
+            });
+            location.hash = "#/item/a123";
+            await router.refresh();
+            expect(router.content).is("content a123");
+        }),
+        "#/item/a123/lol should miss": test(async () => {
+            const { location, router } = await setup({
+                item: route("#/item/{id}", async ({ id }) => `content ${id}`),
+            });
+            location.hash = "#/item/a123/lol";
+            await router.refresh();
+            expect(router.content).is(null);
+        }),
+        "#/left/{mid}/right extraction": test(async () => {
+            const { location, router } = await setup({
+                item: route("#/left/{mid}/right", async ({ mid }) => `content ${mid}`),
+            });
+            location.hash = "#/left/middle/right";
+            await router.refresh();
+            expect(router.content).is("content middle");
+        }),
+        "#/not-found-lol": test(async () => {
+            const { location, router } = await setup({
+                helloWorld: route("#/hello/world", async () => "123"),
+            });
+            location.hash = "#/not-found-lol";
+            await router.refresh();
+            expect(router.content).is(null);
+        }),
+    }),
+    nav: Science.suite({
+        "home to item and back": test(async () => {
+            const { location, router } = await setup({
+                home: route("#/", async () => `home`),
+                item: route("#/item/{id}", async ({ id }) => `item ${id}`),
+            });
+            location.hash = "#/";
+            await router.refresh();
+            expect(router.content).is("home");
+            await router.nav.item.go({ id: "x234" });
+            expect(router.content).is("item x234");
+            await router.nav.home.go();
+            expect(router.content).is("home");
+        }),
+    }),
+});
+//# sourceMappingURL=spa.test.js.map

package/x/spa/spa.test.js.map

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

package/x/tests.test.js

@@ -1,3 +1,6 @@
 import { Science } from "@e280/science";
-await Science.run({});
+import spa from "./spa/spa.test.js";
+await Science.run({
+    spa,
+});
 //# 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;AAErC,MAAM,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA"}
+{"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"}

package/x/view/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./utils/parts/chain.js";
+export * from "./utils/parts/sly-view.js";
+export * from "./types.js";
+export * from "./view.js";

package/x/view/index.js

@@ -0,0 +1,5 @@
+export * from "./utils/parts/chain.js";
+export * from "./utils/parts/sly-view.js";
+export * from "./types.js";
+export * from "./view.js";
+//# sourceMappingURL=index.js.map

package/x/view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/view/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}

package/x/view/types.d.ts

@@ -0,0 +1,22 @@
+import { TemplateResult } from "lit";
+import { Constructor } from "@e280/stz";
+import { DirectiveResult } from "lit/directive.js";
+import { Use } from "../base/use.js";
+import { ViewChain } from "./utils/parts/chain.js";
+import { BaseElement } from "../base/element.js";
+export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[];
+export type AttrValue = string | boolean | number | undefined | null | void;
+export type ViewFn<Props extends any[]> = ((use: Use) => (...props: Props) => Content);
+export type View<Props extends any[]> = {
+    (...props: Props): DirectiveResult;
+    props: (...props: Props) => ViewChain<Props>;
+    transmute: <PropsB extends any[]>(convert: (...propsB: PropsB) => Props) => View<PropsB>;
+    component: <B extends Constructor<BaseElement>>(Base?: B) => {
+        props: (propFn: (component: InstanceType<B>) => Props) => (ComponentClass<B, Props>);
+    };
+};
+export type ViewProps<V extends View<any>> = (V extends View<infer Props> ? Props : never);
+export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
+    view: View<Props>;
+    new (): InstanceType<B>;
+} & B;

package/x/view/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/x/{views → view}/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../s/views/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../s/view/types.ts"],"names":[],"mappings":""}

package/x/view/utils/make-component.d.ts

@@ -0,0 +1,5 @@
+import { Constructor } from "@e280/stz";
+import { BaseElement } from "../../base/element.js";
+import { ComponentClass, ViewFn } from "../types.js";
+/** make a component from a BaseElement and a view. */
+export declare function makeComponent<B extends Constructor<BaseElement>, Props extends any[]>(settings: ShadowRootInit, Base: B, propFn: (component: InstanceType<B>) => Props, viewFn: ViewFn<Props>): ComponentClass<B, Props>;

package/x/view/utils/make-component.js

@@ -0,0 +1,17 @@
+import { makeView } from "./make-view.js";
+import { Reactor } from "../../base/utils/reactor.js";
+/** make a component from a BaseElement and a view. */
+export function makeComponent(settings, Base, propFn, viewFn) {
+    return class Component extends Base {
+        static view = makeView(viewFn, settings);
+        #reactor = new Reactor();
+        createShadow() {
+            return this.attachShadow(settings);
+        }
+        render(use) {
+            // reactor is tracking the propFn
+            return viewFn(use)(...this.#reactor.effect(() => propFn(this), () => this.update()));
+        }
+    };
+}
+//# sourceMappingURL=make-component.js.map

package/x/view/utils/make-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-component.js","sourceRoot":"","sources":["../../../s/view/utils/make-component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AAGnD,sDAAsD;AACtD,MAAM,UAAU,aAAa,CAC3B,QAAwB,EACxB,IAAO,EACP,MAA6C,EAC7C,MAAqB;IAGtB,OAAO,MAAM,SAAU,SAAQ,IAAI;QAClC,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QACxC,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;QAExB,YAAY;YACX,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;QACnC,CAAC;QAED,MAAM,CAAC,GAAQ;YACd,iCAAiC;YACjC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACzC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAW,CAAC,EACzB,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CACnB,CAAC,CAAA;QACH,CAAC;KACkC,CAAA;AACrC,CAAC"}

package/x/view/utils/make-view.d.ts

@@ -0,0 +1,2 @@
+import { View, ViewFn } from "../types.js";
+export declare function makeView<Props extends any[]>(viewFn: ViewFn<Props>, settings: ShadowRootInit): View<Props>;

package/x/view/utils/make-view.js

@@ -0,0 +1,24 @@
+import { ViewChain } from "./parts/chain.js";
+import { BaseElement } from "../../base/element.js";
+import { ViewContext } from "./parts/context.js";
+import { makeComponent } from "./make-component.js";
+import { makeViewDirective } from "./parts/directive.js";
+export function makeView(viewFn, settings) {
+    const renderDirective = makeViewDirective(viewFn, settings);
+    function v(...props) {
+        return renderDirective(new ViewContext(props));
+    }
+    v.props = (...props) => new ViewChain(new ViewContext(props), renderDirective);
+    v.transmute = (convert) => {
+        const viewFnB = use => {
+            const viewFnA2 = viewFn(use);
+            return (...propsB) => viewFnA2(...convert(...propsB));
+        };
+        return makeView(viewFnB, settings);
+    };
+    v.component = (Base = BaseElement) => ({
+        props: (propFn) => (makeComponent(settings, Base, propFn, viewFn))
+    });
+    return v;
+}
+//# sourceMappingURL=make-view.js.map

package/x/view/utils/make-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-view.js","sourceRoot":"","sources":["../../../s/view/utils/make-view.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAA;AAEtD,MAAM,UAAU,QAAQ,CACtB,MAAqB,EACrB,QAAwB;IAGzB,MAAM,eAAe,GAAG,iBAAiB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAE3D,SAAS,CAAC,CAAC,GAAG,KAAY;QACzB,OAAO,eAAe,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,KAAY,EAAE,EAAE,CAAC,IAAI,SAAS,CAC3C,IAAI,WAAW,CAAC,KAAK,CAAC,EACtB,eAAe,CACf,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAuB,OAAqC,EAAE,EAAE;QAC7E,MAAM,OAAO,GAAmB,GAAG,CAAC,EAAE;YACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;YAC5B,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,CAAA;QACtD,CAAC,CAAA;QACD,OAAO,QAAQ,CAAS,OAAO,EAAE,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAqC,OAAU,WAAkB,EAAE,EAAE,CAAC,CAAC;QACpF,KAAK,EAAE,CAAC,MAA6C,EAAE,EAAE,CAAC,CACzD,aAAa,CACZ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,CACN,CACD;KACD,CAAC,CAAA;IAEF,OAAO,CAAC,CAAA;AACT,CAAC"}

package/x/view/utils/parts/capsule.d.ts

@@ -0,0 +1,13 @@
+import { ViewFn } from "../../types.js";
+import { SlyView } from "./sly-view.js";
+import { ViewContext } from "./context.js";
+/** controls the rendering of view context into an element. */
+export declare class ViewCapsule<Props extends any[]> {
+    #private;
+    private viewFn;
+    private settings;
+    constructor(viewFn: ViewFn<Props>, settings: ShadowRootInit);
+    update(context: ViewContext<Props>): SlyView;
+    disconnected(): void;
+    reconnected(): void;
+}

package/x/view/utils/parts/capsule.js

@@ -0,0 +1,49 @@
+import { debounce } from "@e280/stz";
+import { SlyView } from "./sly-view.js";
+import { dom } from "../../../dom/dom.js";
+import { setAttrs } from "./set-attrs.js";
+import { Reactor } from "../../../base/utils/reactor.js";
+import { AttrWatcher } from "../../../base/utils/attr-watcher.js";
+import { _disconnect, _reconnect, _wrap, Use } from "../../../base/use.js";
+/** controls the rendering of view context into an element. */
+export class ViewCapsule {
+    viewFn;
+    settings;
+    #element = SlyView.make();
+    #reactor = new Reactor();
+    #use;
+    #shadow;
+    #context;
+    #attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced());
+    constructor(viewFn, settings) {
+        this.viewFn = viewFn;
+        this.settings = settings;
+        this.#shadow = this.#element.attachShadow(this.settings);
+        this.#use = new Use(this.#element, this.#shadow, this.#renderNow, this.#renderDebounced);
+    }
+    update(context) {
+        this.#context = context;
+        this.#renderNow();
+        return this.#element;
+    }
+    #renderNow = () => {
+        this.#use[_wrap](() => {
+            const content = this.#reactor.effect(() => this.viewFn(this.#use)(...this.#context.props), () => this.#renderDebounced());
+            setAttrs(this.#element, [...this.#context.attrs]);
+            dom.render(this.#shadow, content);
+            dom.render(this.#element, this.#context.children);
+            this.#attrWatcher.start();
+        });
+    };
+    #renderDebounced = debounce(0, this.#renderNow);
+    disconnected() {
+        this.#use[_disconnect]();
+        this.#reactor.clear();
+        this.#attrWatcher.stop();
+    }
+    reconnected() {
+        this.#use[_reconnect]();
+        this.#attrWatcher.start();
+    }
+}
+//# sourceMappingURL=capsule.js.map

package/x/view/utils/parts/capsule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"capsule.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/capsule.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAElC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AACvC,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAA;AAC/D,OAAO,EAAC,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,MAAM,sBAAsB,CAAA;AAExE,8DAA8D;AAC9D,MAAM,OAAO,WAAW;IAUb;IACA;IAVV,QAAQ,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;IACzB,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;IAExB,IAAI,CAAK;IACT,OAAO,CAAY;IACnB,QAAQ,CAAqB;IAC7B,YAAY,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;IAE5E,YACU,MAAqB,EACrB,QAAwB;QADxB,WAAM,GAAN,MAAM,CAAe;QACrB,aAAQ,GAAR,QAAQ,CAAgB;QAEjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACxD,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAClB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,gBAAgB,CACrB,CAAA;IACF,CAAC;IAED,MAAM,CAAC,OAA2B;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACrB,CAAC;IAED,UAAU,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACnC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAC7B,CAAA;YACD,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;YACjD,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACjC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;YACjD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QAC1B,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;IAED,gBAAgB,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IAE/C,YAAY;QACX,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;QACvB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC;CACD"}

package/x/view/utils/parts/chain.d.ts

@@ -0,0 +1,11 @@
+import { DirectiveResult } from "lit/async-directive.js";
+import { ViewContext } from "./context.js";
+import { AttrValue, Content } from "../../types.js";
+/** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
+export declare class ViewChain<Props extends any[]> {
+    #private;
+    constructor(context: ViewContext<Props>, renderDirective: (context: ViewContext<Props>) => DirectiveResult);
+    attr(key: string, value: AttrValue): this;
+    children(...contents: Content[]): this;
+    render(): DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+}

package/x/view/utils/parts/chain.js

@@ -0,0 +1,21 @@
+/** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
+export class ViewChain {
+    #render;
+    #context;
+    constructor(context, renderDirective) {
+        this.#context = context;
+        this.#render = renderDirective;
+    }
+    attr(key, value) {
+        this.#context.attrs.set(key, value);
+        return this;
+    }
+    children(...contents) {
+        this.#context.children.push(...contents);
+        return this;
+    }
+    render() {
+        return this.#render(this.#context);
+    }
+}
+//# sourceMappingURL=chain.js.map

package/x/view/utils/parts/chain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chain.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/chain.ts"],"names":[],"mappings":"AAKA,+HAA+H;AAC/H,MAAM,OAAO,SAAS;IACrB,OAAO,CAAkD;IACzD,QAAQ,CAAoB;IAE5B,YACE,OAA2B,EAC3B,eAAiE;QAElE,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,OAAO,GAAG,eAAe,CAAA;IAC/B,CAAC;IAED,IAAI,CAAC,GAAW,EAAE,KAAgB;QACjC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACnC,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,QAAQ,CAAC,GAAG,QAAmB;QAC9B,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAA;QACxC,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACnC,CAAC;CACD"}

package/x/view/utils/parts/context.d.ts

@@ -0,0 +1,8 @@
+import { AttrValue, Content } from "../../types.js";
+/** the information we need to render a view. */
+export declare class ViewContext<Props extends any[]> {
+    props: Props;
+    attrs: Map<string, AttrValue>;
+    children: Content[];
+    constructor(props: Props);
+}

package/x/view/utils/parts/context.js

@@ -0,0 +1,10 @@
+/** the information we need to render a view. */
+export class ViewContext {
+    props;
+    attrs = new Map();
+    children = [];
+    constructor(props) {
+        this.props = props;
+    }
+}
+//# sourceMappingURL=context.js.map

package/x/view/utils/parts/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/context.ts"],"names":[],"mappings":"AAGA,gDAAgD;AAChD,MAAM,OAAO,WAAW;IAGJ;IAFnB,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAA;IACpC,QAAQ,GAAc,EAAE,CAAA;IACxB,YAAmB,KAAY;QAAZ,UAAK,GAAL,KAAK,CAAO;IAAG,CAAC;CACnC"}

package/x/view/utils/parts/directive.d.ts

@@ -0,0 +1,5 @@
+import { DirectiveResult } from "lit/async-directive.js";
+import { ViewFn } from "../../types.js";
+import { ViewContext } from "./context.js";
+/** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
+export declare function makeViewDirective<Props extends any[]>(viewFn: ViewFn<Props>, settings: ShadowRootInit): (context: ViewContext<Props>) => DirectiveResult;

package/x/view/utils/parts/directive.js

@@ -0,0 +1,18 @@
+import { AsyncDirective, directive } from "lit/async-directive.js";
+import { ViewCapsule } from "./capsule.js";
+/** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
+export function makeViewDirective(viewFn, settings) {
+    return directive(class ViewDirective extends AsyncDirective {
+        #capsule = new ViewCapsule(viewFn, settings);
+        render(context) {
+            return this.#capsule.update(context);
+        }
+        disconnected() {
+            this.#capsule.disconnected();
+        }
+        reconnected() {
+            this.#capsule.reconnected();
+        }
+    });
+}
+//# sourceMappingURL=directive.js.map

package/x/view/utils/parts/directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directive.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/directive.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAA;AAEjF,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AAGxC,+GAA+G;AAC/G,MAAM,UAAU,iBAAiB,CAC/B,MAAqB,EACrB,QAAwB;IAGzB,OAAO,SAAS,CAAC,MAAM,aAAc,SAAQ,cAAc;QAC1D,QAAQ,GAAG,IAAI,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAE5C,MAAM,CAAC,OAA2B;YACjC,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACrC,CAAC;QAED,YAAY;YACX,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAA;QAC7B,CAAC;QAED,WAAW;YACV,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAA;QAC5B,CAAC;KACD,CAAqD,CAAA;AACvD,CAAC"}

package/x/view/utils/parts/set-attrs.d.ts

@@ -0,0 +1,3 @@
+import { AttrValue } from "../../types.js";
+export declare function setAttr(element: HTMLElement, key: string, value: AttrValue): void;
+export declare function setAttrs(element: HTMLElement, attrs: [key: string, value: AttrValue][]): void;

package/x/view/utils/parts/set-attrs.js

@@ -0,0 +1,21 @@
+export function setAttr(element, key, value) {
+    if (value === undefined || value === null)
+        element.removeAttribute(key);
+    else if (typeof value === "string")
+        element.setAttribute(key, value);
+    else if (typeof value === "number")
+        element.setAttribute(key, value.toString());
+    else if (typeof value === "boolean") {
+        if (value === true)
+            element.setAttribute(key, "");
+        else
+            element.removeAttribute(key);
+    }
+    else
+        console.warn(`invalid attribute "${key}" type is "${typeof value}"`);
+}
+export function setAttrs(element, attrs) {
+    for (const [key, value] of attrs)
+        setAttr(element, key, value);
+}
+//# sourceMappingURL=set-attrs.js.map

package/x/view/utils/parts/set-attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-attrs.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/set-attrs.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,OAAO,CAAC,OAAoB,EAAE,GAAW,EAAE,KAAgB;IAC1E,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QACxC,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;SAExB,IAAI,OAAO,KAAK,KAAK,QAAQ;QACjC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;SAE5B,IAAI,OAAO,KAAK,KAAK,QAAQ;QACjC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;SAEvC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QACrC,IAAI,KAAK,KAAK,IAAI;YACjB,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;;YAE7B,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;IAC9B,CAAC;;QAGA,OAAO,CAAC,IAAI,CAAC,sBAAsB,GAAG,cAAc,OAAO,KAAK,GAAG,CAAC,CAAA;AACtE,CAAC;AAED,MAAM,UAAU,QAAQ,CACtB,OAAoB,EACpB,KAAwC;IAGzC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,KAAK;QAC/B,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC"}

package/x/view/utils/parts/sly-view.d.ts

@@ -0,0 +1,5 @@
+/** <sly-view> element that views are rendered into. */
+export declare class SlyView extends HTMLElement {
+    #private;
+    static make(): SlyView;
+}

package/x/view/utils/parts/sly-view.js

@@ -0,0 +1,13 @@
+import { dom } from "../../../dom/dom.js";
+/** <sly-view> element that views are rendered into. */
+export class SlyView extends HTMLElement {
+    static #registered = false;
+    static make() {
+        if (!this.#registered) {
+            dom.register({ SlyView }, { soft: true, upgrade: true });
+            this.#registered = true;
+        }
+        return document.createElement("sly-view");
+    }
+}
+//# sourceMappingURL=sly-view.js.map

package/x/view/utils/parts/sly-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sly-view.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/sly-view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,uDAAuD;AACvD,MAAM,OAAO,OAAQ,SAAQ,WAAW;IACvC,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;IAC1B,MAAM,CAAC,IAAI;QACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,GAAG,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAA;YACpD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QACxB,CAAC;QACD,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;IACrD,CAAC"}

package/x/view/view.d.ts

@@ -0,0 +1,11 @@
+import { Content, ViewFn } from "./types.js";
+import { BaseElement } from "../base/element.js";
+import { Use } from "../base/use.js";
+export declare function view<Props extends any[]>(fn: ViewFn<Props>): import("./types.js").View<Props>;
+export declare namespace view {
+    var settings: (settings: ShadowRootInit) => {
+        render: <Props extends any[]>(fn: ViewFn<Props>) => import("./types.js").View<Props>;
+    };
+    var render: typeof view;
+    var component: (fn: (use: Use) => Content) => import("./types.js").ComponentClass<typeof BaseElement, []>;
+}

package/x/view/view.js

@@ -0,0 +1,15 @@
+import { makeView } from "./utils/make-view.js";
+import { BaseElement } from "../base/element.js";
+export function view(fn) {
+    return makeView(fn, { mode: "open" });
+}
+view.settings = (settings) => ({
+    render: (fn) => {
+        return makeView(fn, settings);
+    }
+});
+view.render = view;
+view.component = (fn) => (view(use => () => fn(use))
+    .component(BaseElement)
+    .props(() => []));
+//# sourceMappingURL=view.js.map

package/x/view/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../s/view/view.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAG9C,MAAM,UAAU,IAAI,CAAsB,EAAiB;IAC1D,OAAO,QAAQ,CAAC,EAAE,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAA;AACpC,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAwB,EAAE,EAAE,CAAC,CAAC;IAC9C,MAAM,EAAE,CAAsB,EAAiB,EAAE,EAAE;QAClD,OAAO,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;IAC9B,CAAC;CACD,CAAC,CAAA;AAEF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;AAElB,IAAI,CAAC,SAAS,GAAG,CAAC,EAAyB,EAAE,EAAE,CAAC,CAC/C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACxB,SAAS,CAAC,WAAW,CAAC;KACtB,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CACjB,CAAA"}

package/s/loot/drag-drop.ts

@@ -1,76 +0,0 @@
-
-import {signal} from "@e280/strata"
-import {dragIsOutsideCurrentTarget} from "./helpers.js"
-
-/** system for dragging-and-dropping things around on a webpage */
-export class DragDrop<Grabbed, Hovering> {
-	#$grabbed = signal<Grabbed | undefined>(undefined)
-	#$hovering = signal<Hovering | undefined>(undefined)
-
-	constructor(private params: {
-
-		/** accept a dropped item that was declared within this system */
-		acceptDrop: (event: DragEvent, grabbed: Grabbed, hovering: Hovering) => void
-
-		/** accept undeclared drops from outside this system */
-		fromOutside?: {
-			predicate: (event: DragEvent, hovering: Hovering) => boolean
-			acceptDrop: (event: DragEvent, hovering: Hovering) => void
-		}
-	}) {}
-
-	/** make event listeners to attach to your dragzone(s) */
-	readonly dragzone = {
-		draggable: () => "true",
-
-		dragstart: (grabbed: Grabbed) => (_: DragEvent) => {
-			this.#$grabbed.value = grabbed
-		},
-
-		dragend: () => (_: DragEvent) => {
-			this.#$grabbed.value = undefined
-			this.#$hovering.value = undefined
-		},
-	}
-
-	/** make event listeners to attach to your dropzones(s) */
-	readonly dropzone = {
-		dragenter: () => (_: DragEvent) => {},
-
-		dragleave: () => (event: DragEvent) => {
-			if (dragIsOutsideCurrentTarget(event))
-				this.#$hovering.value = undefined
-		},
-
-		dragover: (hovering: Hovering) => (event: DragEvent) => {
-			event.preventDefault()
-			const {fromOutside} = this.params
-
-			if (this.#$grabbed() || (fromOutside && fromOutside.predicate(event, hovering)))
-				this.#$hovering.value = hovering
-		},
-
-		drop: (hovering: Hovering) => (event: DragEvent) => {
-			event.preventDefault()
-			const {acceptDrop, fromOutside} = this.params
-
-			const grabbed = this.#$grabbed()
-			this.#$grabbed.value = undefined
-			this.#$hovering.value = undefined
-
-			if (grabbed)
-				acceptDrop(event, grabbed, hovering)
-			else if (fromOutside && fromOutside.predicate(event, hovering))
-				fromOutside.acceptDrop(event, hovering)
-		},
-	}
-
-	get grabbed() {
-		return this.#$grabbed()
-	}
-
-	get hovering() {
-		return this.#$hovering()
-	}
-}
-

package/s/ops/loaders/make-loader.ts

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