@benev/slate - npm Package Compare versions

Comparing version 0.0.0-dev.5 to 0.0.0-dev.6

package.json

 {
 	"name": "@benev/slate",
-	"version": "0.0.0-dev.5",
+	"version": "0.0.0-dev.6",
 	"description": "frontend web stuff",
@@ -22,7 +22,7 @@ "license": "MIT",
 	"peerDependencies": {
-		"lit": "^2.8.0"
+		"lit": "^3.0.0"
 	},
 	"devDependencies": {
 		"@benev/turtle": "^0.5.0",
-		"@rollup/plugin-node-resolve": "^15.2.2",
+		"@rollup/plugin-node-resolve": "^15.2.3",
 		"chokidar": "^3.5.3",
@@ -35,3 +35,3 @@ "chokidar-cli": "^3.0.0",
 		"npm-run-all": "^4.1.5",
-		"rollup": "^4.0.0",
+		"rollup": "^4.1.1",
 		"terser": "^5.21.0",
@@ -38,0 +38,0 @@ "typescript": "^5.2.2"

readme.md

@@ -11,153 +11,520 @@
 - frontend ui framework
-- lit compatible, uses lit-html for templating
-- `GoldElement` is a replacement for LitElement
-- `SilverElement` is just like GoldElement but for the light dom
-- `ShaleView` is a sophisticated view class
-- `Flat` is a state management system
-- `Pipe` is cool syntax for.. piping
-- `Op` is a system for showing loading spinners
-- `prepare_frontend` connects your components and views with app-level context and state management
+- built on [lit](https://lit.dev/)
+- views and web components
+- hooks syntax
+- state management
 
 <br/>
 
-## 👷 recommended setup
+## 👷 quick start
 
-1. install slate (and lit) into your project
+1. install slate
     ```sh
-    npm i @benev/slate lit
+    npm i @benev/slate
     ```
-1. establish a "context" for your app
+1. prepare your app's frontend and context
     ```ts
-    import {css} from "lit"
-    import {BaseContext} from "@benev/slate"
+    import {prepare_frontend, Context} from "@benev/slate"
 
-    export class Context implements BaseContext {
+    export const {carbon, oxygen, obsidian, quartz} = (
+      prepare_frontend(new class extends Context {
+        theme = css`
+          * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+          }
+        `
+      })
+    )
+    ```
+1. import html and css template functions
+    ```ts
+    import {html, css} from "@benev/slate"
+    ```
 
-      // state management system
-      flat = new Flat()
+<br/>
 
-      // applied to components and views
-      theme = css`
-        * {
-          margin: 0;
-          padding: 0;
-          box-sizing: border-box;
-        }
+## ⚙️ components
+
+### define your components
+
+this is how you create web components that are custom html elements.
+
+they can be used in plain html `<my-oxygen></my-oxygen>`.
+
+1. **oxygen** — light-dom element
+    ```ts
+    export const MyOxygen = oxygen(use => {
+      const count = use.signal(0)
+      const increment = () => count.value++
+
+      return html`
+        <span>${count}</span>
+        <button @click=${increment}>increment</button>
       `
-    }
+    })
     ```
-1. prepare your frontend
+1. **carbon** — shadow-dom element
     ```ts
-    export const {component, components, view, views} = prepare_frontend<Context>()
+    const styles = css`span {color: yellow}`
+
+    export const MyCarbon = carbon({styles}, use => {
+      const count = use.signal(0)
+      const increment = () => count.value++
+
+      return html`
+        <span>${count}</span>
+        <button @click=${increment}>increment</button>
+      `
+    })
     ```
-1. register all your components to the dom
+
+### register and use your components
+
+1. register your components to the dom
     ```ts
-    import {register_to_dom} from `@benev/slate`
+    import {register_to_dom} from "@benev/slate"
 
-    const context = new Context()
-
-    register_to_dom(components(context, {
-      MyElement,
-      AnotherElement,
-      WhateverElement,
-    }))
+    register_to_dom({
+      MyOxygen,
+      MyCarbon,
+    })
     ```
+    - the component names are automatically converted from `CamelCase` to `kebab-case`
+1. use your components in any html on the page
+    ```html
+    <section>
+      <my-oxygen></my-oxygen>
+      <my-carbon></my-carbon>
+    </section>
+    ```
 
 <br/>
 
-## 🥇 GoldElement
+## 🖼️ views
 
-```ts
-import {html, css} from "lit"
-import {GoldElement} from "@benev/slate"
+### define your views
 
-export const MyElement = component(context => class extends GoldElement {
-  static styles = css``
+views are like components, but they are not custom html elements.
 
-  #state = context.flat.state({
-    count: 0,
-  })
+what's great about them, is that they are javascript functions which are imported and injected into the html templates for other views or components -- and as javascript functions, your IDE can rename them across the codebase, and find-all-references, and you get full typescript typings for their props (whereas html-based web components do not afford you the same luxuries).
 
-  // component auto rerenders on state changes
-  #increment = () => {
-    this.#state.count++
-  }
+views accept js parameters called `props`.
 
-  // access to attributes, rerenders on changes
-  #attrs = Attributes.setup(this as GoldElement, {
-    "example-string": String,
-    "example-number": Number,
-    "example-boolean": Boolean,
-  })
+1. **quartz** — light-dom view
+    ```ts
+    export const MyQuartz = quartz(use => (start: number) => {
+      const count = use.signal(start)
+      const increment = () => count.value++
 
-  // declare which views this component uses
-  #views = views(context, {
-    MyView,
-  })
+      return html`
+        <span>${count}</span>
+        <button @click=${increment}>increment</button>
+      `
+    })
+    ```
+1. **obsidian** — shadow-dom view
+    ```ts
+    const styles = css`span {color: yellow}`
 
-  render() {
-    return html`
-      <p>count: ${this.#state.count}</p>
-      <button @click=${this.#increment}>increment</button>
-      ${this.#views.MyView({props: [this.#state.count]})}
+    export const MyObsidian = obsidian({styles}, use => (start: number) => {
+      const count = use.signal(start)
+      const increment = () => count.value++
+
+      return html`
+        <span>${count}</span>
+        <button @click=${increment}>increment</button>
+      `
+    })
+    ```
+    - `auto_exportparts` is enabled by default:
+      - auto exportparts is an awesome feature that makes it bearable to use the shadow dom extensively.
+      - if auto_exportparts is enabled, and you provide the view a `part` attribute, then it will automatically re-export all internal parts, using the part as a prefix
+      - thus, parts can bubble up, each shadow boundary adds a new hyphenated prefix, so you can do css like `::part(search-input-icon)`
+
+### using your views
+
+1. inject your quartz views into any html template like this
+    ```ts
+    html`
+      <aside>
+        ${MyQuartz(123)}
+      </aside>
     `
-  }
-})
-```
+    ```
+    - quartz views are beautifully simple
+    - without any shadow-dom, they have no stylesheet, and without a wrapping element, they have no attributes
+1. inject your obsidian views like this
+    ```ts
+    html`
+      <aside>
+        ${MyObsidian([123])}
+      </aside>
+    `
+    ```
+    - your obsidian views need their props wrapped in an array
+1. obsidian views will accept a settings object
+    ```ts
+    html`
+      <aside>
+        ${MyObsidian([123], {
+          auto_exportparts: true,
+          attrs: {
+            part: "cool",
+            "data-whatever": true,
+          },
+          content: html`
+            <p>slotted content</p>
+          `,
+        })}
+      </aside>
+    `
+    ```
+    - obsidian views are wrapped in a `<obsidian-view>` component
+    - this is where the shadow root is attached
+    - in the settings object, you can pass attributes, slotted content, etc
+    - this is why obsidian views are more complex than their simpler counterparts, quartz views
 
 <br/>
 
-## 🥈 SilverElement
+## 🪝 `use` hooks
 
-- it's just like `GoldElement`, except it's light dom (no shadow dom), and thus it cannot have its own stylesheet (relies on styling from above).
+### universal hooks for all views and components
 
+- **use.state**  
+    works like react useState hook
+    ```ts
+    const [count, setCount] = use.state(0)
+    const increment = () => setCount(count + 1)
+    ```
+- **use.signal**  
+    create a reactive container for a value *(inspired by [preact signals](https://preactjs.com/blog/introducing-signals/))*
+    ```ts
+    const count = use.signal(0)
+    const increment = () => count.value++
+    ```
+    you can directly inject the whole signal into html
+    ```ts
+    html`<span>${count}</span>`
+    ```
+- **use.op**  
+    create an OpSignal in a loading/error/ready state, and it can hold a result value
+    ```ts
+    const count = use.op()
+    count.run(async() => fetchCount("/count"))
+    ```
+- **use.flatstate**  
+    create a reactive object *(inspired by [mobx](https://mobx.js.org/) and [snapstate](https://github.com/chase-moskal/snapstate))*
+    ```ts
+    const state = use.flatstate({count: 0})
+    const increment = () => state.count++
+    ```
+- **use.setup**  
+    perform setup/cleanup on dom connected/disconnected
+    ```ts
+    use.setup(() => {
+      const interval = setInterval(increment, 1000)
+      return () => clearInterval(interval)
+    })
+    ```
+- **use.prepare**  
+    initialize a value once
+    ```ts
+    const random_number = use.prepare(() => Math.random())
+    ```
+- **use.context**  
+    access to your app's context, for whatever reason
+    ```ts
+    await use.context.flat.wait
+    ```
+    by default, context has `theme`, `signals`, and `flat`, but you specify your own context in `prepare_frontend`, so you can put any app-level state in there that you might want
+
+### special `use` access
+
+- **use.element** ~ *carbon, oxygen, obsidian*  
+    access the underlying html element
+    ```ts
+    use.element.querySelector("p")
+    ```
+- **use.shadow** ~ *carbon, obsidian*  
+    access to the shadow root
+    ```ts
+    use.shadow.querySelector("slot")
+    ```
+- **use.attrs** ~ *carbon, oxygen*  
+    declare accessors for html attributes
+    ```ts
+    const attrs = use.attrs({
+      start: Number,
+      label: String,
+      ["data-active"]: Boolean,
+    })
+    ```
+    set them like normal js properties
+    ```ts
+    attrs.start = 123
+    attrs.label = "hello"
+    attrs["data-active"] = true
+    ```
+    get them like normal js properties
+    ```ts
+    console.log(attrs.start) // 123
+    console.log(attrs.label) // "hello"
+    console.log(attrs["data-active"]) // true
+    ```
+    components rerender when any attributes change from outside
+
 <br/>
 
-## 🗿 ShaleView
+## 🔮 advanced stuff
 
-```ts
-export const MyView = view(context => class extends ShaleView {
-  static name = "my-view"
-  static styles = css``
+### gold and silver elements
 
-  #state = context.flat.state({
-    count: 0,
-  })
+- non-hooks class-based LitElement-alternative components
+- `GoldElement` is a shadow-dom component base class
+- `SilverElement` is a light-dom component base class
+- these are used as primitives underlying carbon/oxygen components
+- they do not have context, theme, or any state management reactivity applied
+  - you can apply those with the mixins found by importing `mixins`
+  - you can use `Attributes.base(this as BaseElement, {label: String})` to create attribute accessors
 
-  #increment = () => {
-    this.#state.count++
-  }
+### `prepare_frontend` vs `deferred_frontend`
 
-  #attrs = Attributes.setup(this as ShaleView, {
-    "example-string": String,
-  })
+- `prepare_frontend` "bakes" your app context into the component and view functions at import-time, "before" your components and views are defined. this makes your developer experience simple and pleasant.
+- however, if you want to make the theme css customizable (maybe you're authoring a library), or if you need to accept the context object *later* for some reason, this can create a bit of an awkward chicken-vs-egg timing situation.
+- `deferred_frontend` is an alternative designed to solve this problem by deferring the passing of context to each individual component and view.
+- deferred makes your experience more cumbersome, because you have to pass the context into every view before you can use them. deferred_frontend gives you a `provide` function which makes it easy to pass context to a group of views for that purpose.
 
-  #views = views(context, {
-    SomeOtherView,
-  })
+<br/>
+<br/>
 
-  render(x: number) {
-    return html`<p>${x}</p>`
-  }
-})
-```
-- views are very similar to components
-  - you can use all the same `#state`, `#attrs`, `#views` patterns as your components
-- views even have their own shadow dom
-  - but they are not custom elements
-  - they don't need to be registered to the dom
-- they do this cool thing called `auto_exportparts`
-  - it automatically exports shadow parts across many shadow layers
-  - it's on by default
-  - you just give the view a `part`, and it will use that part as the prefix to any sub-parts
-  - so each view auto exports any child parts
-  - so when you have a hierarchy of views, parts get exported all the way up to the top, and prefixed too, so you don't have name collisions
+# 🛠️ standalone utilities
 
 <br/>
 
-### more utilities with new docs coming soon
+## 🛎️ signals
 
-- 🥞 Flatstate [docs](https://github.com/benevolent-games/frog#-flatstate)
-- 🪈 Pipe [docs](https://github.com/benevolent-games/frog#-pipe)
-- 💫 Op [docs](https://github.com/benevolent-games/frog#-op)
+no docs for this yet
 
+<br/>
+
+## 🥞 flatstate
+
+flatstate help you create state objects and react when properties change.
+
+flatstate is inspired by mobx and snapstate, but designed to be super simple: flatstate only works on *flat* state objects, only the direct properties of state objects are tracked for reactivity.
+
+### flatstate basics
+
+- create a flatstate tracking context
+  ```ts
+  import {Flat} from "@benev/slate"
+
+  const flat = new Flat()
+    // what happens in this flat, stays in this flat.
+    // you probably only want one for your whole app.
+  ```
+- make a flat state object
+  ```ts
+  const state = flat.state({count: 0})
+  ```
+- setup a reaction
+  ```ts
+  flat.reaction(() => console.log(state.count))
+    //> 0
+
+  state.count++
+    //> 1
+  ```
+  - flatstate records which state properties your reaction reads
+  - flatstate calls your reaction whenever those specific properties change
+  - your reaction can listen to more than one state object
+
+### flatstate details
+
+- reactions are debounced -- so you may have to wait to see state changes
+  ```ts
+  const flat = new Flat()
+  const state = flat.state({amount: 100})
+
+  state.amount = 101
+  console.log(state.amount) //> 100 (old value)
+
+  await flat.wait
+  console.log(state.amount) //> 101 (now it's ready)
+  ```
+- you can stop a reaction
+  ```ts
+  const stop = flat.reaction(() => console.log(state.count))
+
+  stop() // end this particular reaction
+  ```
+- clear all reactions on a flatstate instance
+  ```ts
+  // clear all reactions on this flat instance
+  flat.clear()
+  ```
+
+### flatstate reactions
+
+- so first, there's a simple one-function reaction:
+  ```ts
+  flat.reaction(() => console.log(state.count))
+  ```
+  - flatstate immediately runs the function, and records which properties it reads
+  - then, anytime one of those properties changes, it runs your function again
+- you can also do a two-function reaction:
+  ```ts
+  flat.reaction(
+    () => ({count: state.count}),
+    ({count}) => console.log(count),
+  )
+  ```
+  - now there's a separation between your "collector" and your "responder"
+  - the collector "passes" relevant data to the responder function
+  - flatstate calls the responder whenever that data changes
+- there's also this helper called "collectivize" if you prefer this syntax:
+  ```ts
+  const c = Flat.collectivize(state)
+
+  flat.reaction(
+    c(({count}) => ({count})),
+    ({count}) => console.log(count)
+  )
+  ```
+- there's also something called "deepReaction"
+  ```ts
+  flat.deepReaction(() => console.log(state.count))
+  ```
+  - it's the same as "reaction", but it has "discovery" enabled
+  - discovery means the collector is checked again for every responder call
+  - it's less efficient, but allows you to respond to deeply nested recursive structures
+- there's also `.auto` and `.manual` reactions
+  - these allow you to set options like `discovery` and `debounce` (you can turn off the debouncer)
+  - but that's bigbrain stuff that you'll have to read the sourcecode about
+
+### flatstate advanced
+
+- multiple flatstate instances are totally isolated from each other
+  ```ts
+  const flat1 = new Flat()
+  const flat2 = new Flat()
+  ```
+- create readonly access to a state object
+  ```ts
+  const state = flat.state({count: 0})
+  const rstate = Flat.readonly(state)
+
+  state.count = 1
+  await flat.wait
+  console.log(rstate.count) //> 1
+
+  rstate.count = 2 // !! ReadonlyError !!
+  ```
+  - btw, you can use readonly on anything, not just flatstate
+
+### flatstate integration with frontend elements
+
+- let your components rerender on flat state changes
+  ```ts
+  import {apply} from "@benev/slate"
+
+  const MyElement2 = mixin.flat(flat)(MyElement)
+    // can also be a class decorator
+
+  const elements2 = apply.flat(flat)(elements)
+  ```
+  - this works on any BaseElement, which includes LitElement, GoldElement, SilverElement, carbon, and oxygen
+
+<br/>
+<br/>
+
+## 🪈 pipe
+
+- pipe data through a series of functions
+- maybe you've done silly nesting like this:
+  ```ts
+  // bad
+  register_to_dom(
+    apply.signals(signals)(
+      apply.flat(flat)(
+        apply.css(theme)(
+          requirement.provide(context)(elements)
+        )
+      )
+    )
+  )
+  ```
+- now you can do this instead:
+  ```ts
+  import {Pipe} from "@benev/slate"
+
+  // good
+  Pipe.with(elements)
+    .to(requirement.provide(context))
+    .to(apply.css(theme))
+    .to(apply.flat(flat))
+    .to(apply.signals(signals))
+    .to(register_to_dom)
+  ```
+
+<br/>
+<br/>
+
+## 💫 op
+
+utility for ui loading/error/ready states.
+
+useful for implementing async operations that involve loading indicators.
+
+- create some ops
+  ```ts
+  import {Op} from "@benev/slate"
+
+  Op.loading()
+    //= {mode: "loading"}
+
+  Op.error("a fail occurred")
+    //= {mode: "error", reason: "a fail occurred"}
+
+  Op.ready(123)
+    //= {mode: "ready", payload: 123}
+  ```
+- you can run an async operation and keep things synchronized
+  ```ts
+  let my_op = Op.loading()
+
+  await Op.run(op => my_op = op, async() => {
+    await nap(1000)
+    return 123
+  })
+  ```
+- you can create op signals that have op functionality built in
+  ```ts
+  const count = use.op()
+
+  count.run(async() => {
+    await sleep(1000)
+    return 123
+  })
+  ```
+- functions to interrogate an op
+  ```ts
+    //        type for op in any mode
+    //                 v
+  function example(op: Op.Any<number>) {
+
+    // branching based on the op's mode
+    Op.select(op, {
+      loading: () => console.log("op is loading"),
+      error: reason => console.log("op is error", reason),
+      ready: payload => console.log("op is ready", payload)
+    })
+
+    const payload = Op.payload(op)
+      // if the mode=ready, return the payload
+      // otherwise, return undefined
+  }
+  ```
+

s/base/addons/attributes.ts

 
 import {BaseElement} from "../element.js"
-import {ShaleView} from "../../view/shale.js"
 
@@ -29,3 +28,3 @@ export namespace Attributes {
 
-	type SoftenSpec<A extends Spec> = {
+	export type SoftenSpec<A extends Spec> = {
 		[P in keyof A]: SoftenValue<A[P]>
@@ -99,14 +98,3 @@ }
 	}
-
-	export function view<A extends Spec>(view: ShaleView, spec: A) {
-		on_change(view.element, () => view.requestUpdate())
-		return proxy(view.element, spec)
-	}
-
-	export function setup<A extends Spec>(target: ShaleView | BaseElement, spec: A) {
-		return (target instanceof ShaleView)
-			? view(target, spec)
-			: base(target, spec)
-	}
 }
 

s/base/helpers/apply.ts

@@ -8,6 +8,7 @@
 import {BaseElementClasses} from "../element.js"
+import {SignalTower} from "../../signals/tower.js"
 
 export namespace apply {
 
-	export const theme = (
+	export const css = (
 		(theme: CSSResultGroup) => (
@@ -27,3 +28,11 @@ <E extends BaseElementClasses>(elements: E) => (
 	)
+
+	export const signals = (
+		(tower: SignalTower) => (
+			<E extends BaseElementClasses>(elements: E) => (
+				ob.map(elements, (Element: any) => mixin.signals(tower)(Element))
+			)
+		)
+	)
 }
 

s/base/helpers/mixin.ts

@@ -6,2 +6,3 @@
 import {BaseElementClass} from "../element.js"
+import {SignalTower} from "../../signals/tower.js"
 
@@ -21,2 +22,28 @@ export namespace mixin {
 
+	export function signals(group: SignalTower) {
+		return function<C extends BaseElementClass>(Base: C): C {
+			return class extends Base {
+				#untracks: (() => void)[] = []
+
+				connectedCallback() {
+					super.connectedCallback()
+
+					this.#untracks.push(group.track(
+						() => this.render(),
+						() => this.requestUpdate(),
+					))
+				}
+
+				disconnectedCallback() {
+					super.disconnectedCallback()
+
+					for (const untrack of this.#untracks)
+						untrack()
+
+					this.#untracks = []
+				}
+			}
+		}
+	}
+
 	/*
@@ -23,0 +50,0 @@

s/index.ts

@@ -16,4 +16,15 @@
 
-export * from "./prepare/frontend.js"
+export * from "./shiny/carbon.js"
+export * from "./shiny/context.js"
+export * from "./shiny/frontend.js"
+export * from "./shiny/html.js"
+export * from "./shiny/obsidian.js"
+export * from "./shiny/oxygen.js"
+export * from "./shiny/quartz.js"
 
+export * from "./signals/parts/circular_error.js"
+export * from "./signals/parts/listener.js"
+export * from "./signals/signal.js"
+export * from "./signals/tower.js"
+
 export * from "./tools/clone/clone.js"
@@ -31,5 +42,1 @@ export * from "./tools/debounce/debounce.js"
 
-export * from "./view/shale.js"
-export * from "./view/clay.js"
-export * from "./view/parts/types.js"
-

s/main.ts

 
-console.log("slate")
+import {SlateGold} from "./demo/elements/slate-gold.js"
+import {SlateSilver} from "./demo/elements/slate-silver.js"
+import {SlateCarbon} from "./demo/elements/slate-carbon.js"
+import {SlateOxygen} from "./demo/elements/slate-oxygen.js"
 
+import {register_to_dom} from "./base/helpers/register_to_dom.js"
+
+register_to_dom({
+	SlateCarbon,
+	SlateGold,
+	SlateOxygen,
+	SlateSilver,
+})
+

s/op/op.ts

@@ -13,5 +13,5 @@
 
-	export const loading = (): Loading => ({mode: "loading"})
-	export const error = (reason: string): Error => ({mode: "error", reason})
-	export const ready = <X>(payload: X): Ready<X> => ({mode: "ready", payload})
+	export const loading = <X>(): For<X> => ({mode: "loading"})
+	export const error = <X>(reason: string): For<X> => ({mode: "error", reason})
+	export const ready = <X>(payload: X): For<X> => ({mode: "ready", payload})
 
@@ -30,3 +30,3 @@ export const is = Object.freeze({
 
-	type Choices<X, R> = {
+	export type Choices<X, R> = {
 		loading: () => R
@@ -55,7 +55,11 @@ error: (reason: string) => R
 
-	export async function run<X>(set_op: Setter<X>, fun: () => Promise<X>) {
+	export async function run<X>(
+			set_op: Setter<X>,
+			operation: () => Promise<X>,
+		) {
+
 		set_op(loading())
 
 		try {
-			const payload = await fun()
+			const payload = await operation()
 			set_op(ready(payload))
@@ -62,0 +66,0 @@ return payload as X

x/base/addons/attributes.d.ts

 import { BaseElement } from "../element.js";
-import { ShaleView } from "../../view/shale.js";
 export declare namespace Attributes {
@@ -9,3 +8,3 @@ type HardValue = (typeof String | typeof Number | typeof Boolean);
     };
-    type SoftenSpec<A extends Spec> = {
+    export type SoftenSpec<A extends Spec> = {
         [P in keyof A]: SoftenValue<A[P]>;
@@ -16,5 +15,3 @@ };
     export function base<A extends Spec>(element: BaseElement, spec: A): SoftenSpec<A>;
-    export function view<A extends Spec>(view: ShaleView, spec: A): SoftenSpec<A>;
-    export function setup<A extends Spec>(target: ShaleView | BaseElement, spec: A): SoftenSpec<A>;
     export {};
 }

x/base/addons/attributes.js

@@ -1,2 +0,1 @@
-import { ShaleView } from "../../view/shale.js";
 export var Attributes;
@@ -55,14 +54,3 @@ (function (Attributes) {
     Attributes.base = base;
-    function view(view, spec) {
-        on_change(view.element, () => view.requestUpdate());
-        return Attributes.proxy(view.element, spec);
-    }
-    Attributes.view = view;
-    function setup(target, spec) {
-        return (target instanceof ShaleView)
-            ? view(target, spec)
-            : base(target, spec);
-    }
-    Attributes.setup = setup;
 })(Attributes || (Attributes = {}));
 //# sourceMappingURL=attributes.js.map

x/base/helpers/apply.d.ts

 import { CSSResultGroup } from "lit";
 import { Flat } from "../../flatstate/flat.js";
 import { BaseElementClasses } from "../element.js";
+import { SignalTower } from "../../signals/tower.js";
 export declare namespace apply {
-    const theme: (theme: CSSResultGroup) => <E extends BaseElementClasses>(elements: E) => { [P in keyof E]: E[keyof E]; };
+    const css: (theme: CSSResultGroup) => <E extends BaseElementClasses>(elements: E) => { [P in keyof E]: E[keyof E]; };
     const flat: (flat: Flat) => <E extends BaseElementClasses>(elements: E) => { [P in keyof E]: any; };
+    const signals: (tower: SignalTower) => <E extends BaseElementClasses>(elements: E) => { [P in keyof E]: any; };
 }

x/base/helpers/apply.js

@@ -5,5 +5,6 @@ import { mixin } from "./mixin.js";
 (function (apply) {
-    apply.theme = ((theme) => ((elements) => (ob.map(elements, Element => mixin.css(theme)(Element)))));
+    apply.css = ((theme) => ((elements) => (ob.map(elements, Element => mixin.css(theme)(Element)))));
     apply.flat = ((flat) => ((elements) => (ob.map(elements, (Element) => mixin.flat(flat)(Element)))));
+    apply.signals = ((tower) => ((elements) => (ob.map(elements, (Element) => mixin.signals(tower)(Element)))));
 })(apply || (apply = {}));
 //# sourceMappingURL=apply.js.map

x/base/helpers/mixin.d.ts

 import { CSSResultGroup } from "lit";
 import { Flat } from "../../flatstate/flat.js";
 import { BaseElementClass } from "../element.js";
+import { SignalTower } from "../../signals/tower.js";
 export declare namespace mixin {
     function css(...newStyles: (undefined | CSSResultGroup)[]): <C extends BaseElementClass>(Base: C) => C;
+    function signals(group: SignalTower): <C extends BaseElementClass>(Base: C) => C;
     function flat(flat: Flat): <C extends BaseElementClass>(Base: C) => C;
 }

x/base/helpers/mixin.js

@@ -11,2 +11,20 @@ export var mixin;
     mixin.css = css;
+    function signals(group) {
+        return function (Base) {
+            return class extends Base {
+                #untracks = [];
+                connectedCallback() {
+                    super.connectedCallback();
+                    this.#untracks.push(group.track(() => this.render(), () => this.requestUpdate()));
+                }
+                disconnectedCallback() {
+                    super.disconnectedCallback();
+                    for (const untrack of this.#untracks)
+                        untrack();
+                    this.#untracks = [];
+                }
+            };
+        };
+    }
+    mixin.signals = signals;
     /*
@@ -13,0 +31,0 @@

x/element/part/metallic.d.ts

 declare const MetallicElement_base: {
     new (...args: any[]): {
         [x: string]: any;
-        "__#7@#setups": Set<() => () => void>;
-        "__#7@#setdowns": Set<() => void>;
+        "__#15@#setups": Set<() => () => void>;
+        "__#15@#setdowns": Set<() => void>;
         register_setup(setup: () => () => void): void;
@@ -7,0 +7,0 @@ setup(): () => void;

x/element/part/mixin_setups.d.ts

@@ -5,4 +5,4 @@ import { Constructor } from "../../tools/constructor.js";
         [x: string]: any;
-        "__#7@#setups": Set<() => () => void>;
-        "__#7@#setdowns": Set<() => void>;
+        "__#15@#setups": Set<() => () => void>;
+        "__#15@#setdowns": Set<() => void>;
         register_setup(setup: () => () => void): void;
@@ -9,0 +9,0 @@ setup(): () => void;

x/index.d.ts

@@ -11,3 +11,13 @@ export * from "./base/addons/attributes.js";
 export * from "./op/prep_render_op.js";
-export * from "./prepare/frontend.js";
+export * from "./shiny/carbon.js";
+export * from "./shiny/context.js";
+export * from "./shiny/frontend.js";
+export * from "./shiny/html.js";
+export * from "./shiny/obsidian.js";
+export * from "./shiny/oxygen.js";
+export * from "./shiny/quartz.js";
+export * from "./signals/parts/circular_error.js";
+export * from "./signals/parts/listener.js";
+export * from "./signals/signal.js";
+export * from "./signals/tower.js";
 export * from "./tools/clone/clone.js";
@@ -24,4 +34,1 @@ export * from "./tools/debounce/debounce.js";
 export * from "./tools/requirement.js";
-export * from "./view/shale.js";
-export * from "./view/clay.js";
-export * from "./view/parts/types.js";

x/index.js

@@ -11,3 +11,13 @@ export * from "./base/addons/attributes.js";
 export * from "./op/prep_render_op.js";
-export * from "./prepare/frontend.js";
+export * from "./shiny/carbon.js";
+export * from "./shiny/context.js";
+export * from "./shiny/frontend.js";
+export * from "./shiny/html.js";
+export * from "./shiny/obsidian.js";
+export * from "./shiny/oxygen.js";
+export * from "./shiny/quartz.js";
+export * from "./signals/parts/circular_error.js";
+export * from "./signals/parts/listener.js";
+export * from "./signals/signal.js";
+export * from "./signals/tower.js";
 export * from "./tools/clone/clone.js";
@@ -24,5 +34,2 @@ export * from "./tools/debounce/debounce.js";
 export * from "./tools/requirement.js";
-export * from "./view/shale.js";
-export * from "./view/clay.js";
-export * from "./view/parts/types.js";
 //# sourceMappingURL=index.js.map

x/main.bundle.js

@@ -7,2 +7,1264 @@
 	}
-console.log("slate");
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=globalThis,e$3=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$3=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$4=t=>new n$3("string"==typeof t?t:t+"",void 0,s$3),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$3)},S$1=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$3=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:r$3,getOwnPropertyNames:h$2,getOwnPropertySymbols:o$2,getPrototypeOf:n$2}=Object,a$1=globalThis,c$2=a$1.trustedTypes,l$1=c$2?c$2.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$3=(t,s)=>!i$2(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$3};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$2(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$3(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$2(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$3(s));}else void 0!==s&&i.push(c$3(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$Eg=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EO(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i,e=!1,r){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$3)(e?r:this[t],s))return;this.C(t,s,i);}!1===this.isUpdatePending&&(this._$Eg=this._$EP());}C(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$EP(){this.isUpdatePending=!0;try{await this._$Eg;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.C(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$ET();}catch(s){throw t=!1,this._$ET(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$ET(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Eg}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EO(t,this[t]))),this._$ET();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$1.reactiveElementVersions??=[]).push("2.0.0");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=globalThis,i$1=t$1.trustedTypes,s$2=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$1="$lit$",h$1=`lit$${(Math.random()+"").slice(9)}$`,o$1="?"+h$1,n$1=`<${o$1}>`,r$2=document,l=()=>r$2.createComment(""),c$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),w=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),A=new WeakMap,E=r$2.createTreeWalker(r$2,129);function C(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const P=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f$2:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$1+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [C(t,l+(t[s]||"<?>")+(2===i?"</svg>":"")),o]};class V{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=P(t,s);if(this.el=V.createElement(f,n),E.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=E.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$1)){const i=v[a++],s=r.getAttribute(t).split(h$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?k:"?"===e[1]?H:"@"===e[1]?I:R}),r.removeAttribute(t);}else t.startsWith(h$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$1),s=t.length-1;if(s>0){r.textContent=i$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),E.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1,t+1));)d.push({type:7,index:c}),t+=h$1.length-1;}c++;}}static createElement(t,i){const s=r$2.createElement("template");return s.innerHTML=t,s}}function N(t,i,s=t,e){if(i===w)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$1(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=N(t,h._$AS(t,i.values),h,e)),i}class S{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$2).importNode(i,!0);E.currentNode=e;let h=E.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new M(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new L(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=E.nextNode(),o++);}return E.currentNode=r$2,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class M{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=N(this,t,i),c$1(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==w&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):u(t)?this.T(t):this._(t);}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t));}_(t){this._$AH!==T&&c$1(this._$AH)?this._$AA.nextSibling.data=t:this.$(r$2.createTextNode(t)),this._$AH=t;}g(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=V.createElement(C(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new S(e,this),s=t.u(this.options);t.p(i),this.$(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new V(t)),i}T(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new M(this.k(l()),this.k(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=T;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=N(this,t,i,0),o=!c$1(t)||t!==this._$AH&&t!==w,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=N(this,e[s+n],i,n),r===w&&(r=this._$AH[n]),o||=!c$1(r)||r!==this._$AH[n],r===T?t=T:t!==T&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class k extends R{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===T?void 0:t;}}class H extends R{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==T);}}class I extends R{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=N(this,t,i,0)??T)===w)return;const s=this._$AH,e=t===T&&s!==T||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==T&&(s===T||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){N(this,t);}}const Z=t$1.litHtmlPolyfillSupport;Z?.(V,M),(t$1.litHtmlVersions??=[]).push("3.0.0");const j=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new M(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let s$1 = class s extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=j(i,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return w}};s$1._$litElement$=!0,s$1[("finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s$1});const r$1=globalThis.litElementPolyfillSupport;r$1?.({LitElement:s$1});(globalThis.litElementVersions??=[]).push("4.0.0");
+
+function debounce(delay, action) {
+    let latestArgs;
+    let timeout;
+    let waitingQueue = [];
+    function reset() {
+        latestArgs = [];
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = undefined;
+        waitingQueue = [];
+    }
+    reset();
+    return ((...args) => {
+        latestArgs = args;
+        if (timeout)
+            clearTimeout(timeout);
+        const promise = new Promise((resolve, reject) => {
+            waitingQueue.push({ resolve, reject });
+        });
+        timeout = setTimeout(() => {
+            Promise.resolve()
+                .then(() => action(...latestArgs))
+                .then(r => {
+                for (const { resolve } of waitingQueue)
+                    resolve(r);
+                reset();
+            })
+                .catch(err => {
+                for (const { reject } of waitingQueue)
+                    reject(err);
+                reset();
+            });
+        }, delay);
+        return promise;
+    });
+}
+
+class SignalCircularError extends Error {
+    name = this.constructor.name;
+}
+
+class Signal {
+    #value;
+    #lock = false;
+    #wait;
+    #listeners = new Set();
+    accessed = false;
+    constructor(v) {
+        this.#value = v;
+        this.#wait = Promise.resolve(v);
+    }
+    subscribe(listener) {
+        this.#listeners.add(listener);
+        return () => void this.#listeners.delete(listener);
+    }
+    clear() {
+        return this.#listeners.clear();
+    }
+    #invoke_listeners = debounce(0, () => {
+        const value = this.#value;
+        this.#lock = true;
+        for (const listener of this.#listeners)
+            listener(value);
+        this.#lock = false;
+        return value;
+    });
+    async publish() {
+        this.#wait = this.#invoke_listeners();
+        await this.#wait;
+    }
+    get wait() {
+        return this.#wait;
+    }
+    get value() {
+        this.accessed = true;
+        return this.#value;
+    }
+    set value(s) {
+        if (this.#lock)
+            throw new SignalCircularError("you can't set a cue in a cue's subscription listener (infinite loop forbidden)");
+        this.#value = s;
+        this.publish();
+    }
+}
+
+const html = (strings, ...values) => (x(strings, ...values.map(value => ((value instanceof Signal)
+    ? value.value
+    : value))));
+
+class Locker {
+    #locked = false;
+    lock(fun) {
+        this.#locked = true;
+        fun();
+        this.#locked = false;
+    }
+    get locked() {
+        return this.#locked;
+    }
+}
+
+const make_map = () => new Map();
+const make_set = () => new Set();
+
+function maptool(map) {
+    return new MapTool(map);
+}
+class MapTool {
+    map;
+    constructor(map) {
+        this.map = map;
+    }
+    grab(key, make) {
+        const { map } = this;
+        if (map.has(key))
+            return map.get(key);
+        else {
+            const value = make();
+            map.set(key, value);
+            return value;
+        }
+    }
+}
+
+class Tracker {
+    #tracking = new WeakMap();
+    grab_keymap(state) {
+        const keymap = maptool(this.#tracking).grab(state, make_map);
+        return {
+            keymap,
+            grab_symbolmap(key) {
+                return maptool(keymap).grab(key, make_map);
+            },
+        };
+    }
+    clear() {
+        this.#tracking = new WeakMap();
+    }
+}
+
+class Stopper {
+    #map = new Map;
+    stop(symbol) {
+        const stop = this.#map.get(symbol);
+        if (stop) {
+            this.#map.delete(symbol);
+            stop();
+        }
+    }
+    add(symbol, fun) {
+        this.#map.set(symbol, fun);
+    }
+}
+
+class Recorder {
+    #recording;
+    record(fun) {
+        this.#recording = make_map();
+        fun();
+        const recording = this.#recording;
+        this.#recording = undefined;
+        return recording;
+    }
+    entries() {
+        return this.#recording
+            ? [...this.#recording.entries()]
+            : [];
+    }
+    record_that_key_was_accessed(state, key) {
+        if (this.#recording) {
+            const keyset = maptool(this.#recording).grab(state, make_set);
+            keyset.add(key);
+        }
+    }
+}
+
+class FlatstateError extends Error {
+    name = this.constructor.name;
+}
+class CircularFlatstateError extends FlatstateError {
+    constructor(key) {
+        super(`forbidden circularity, rejected assignment to "${key}"`);
+    }
+}
+class ReadonlyError extends FlatstateError {
+    constructor(key) {
+        super(`forbidden assignment to readonly property "${key}"`);
+    }
+}
+
+function readonly(s) {
+    return new Proxy(s, {
+        get(target, key) {
+            return target[key];
+        },
+        set(_, key) {
+            throw new ReadonlyError(key);
+        },
+    });
+}
+
+class Scheduler {
+    #queue = new Map();
+    #wait = Promise.resolve();
+    #actuate = debounce(0, () => {
+        const functions = [...this.#queue.values()];
+        this.#queue.clear();
+        for (const fun of functions)
+            fun();
+    });
+    get wait() {
+        return this.#wait;
+    }
+    add(symbol, fun) {
+        this.#queue.set(symbol, fun);
+        this.#wait = this.#actuate();
+    }
+}
+
+function collectivize(state) {
+    return function (collector) {
+        return () => {
+            const s = typeof state === "function"
+                ? state()
+                : state;
+            return collector(s);
+        };
+    };
+}
+
+function save_reaction(symbol, recording, tracker, reaction) {
+    const stoppers = [];
+    for (const [state, keyset] of recording) {
+        const { grab_symbolmap } = tracker.grab_keymap(state);
+        for (const key of keyset) {
+            const symbolmap = grab_symbolmap(key);
+            symbolmap.set(symbol, reaction);
+            stoppers.push(() => symbolmap.delete(symbol));
+        }
+    }
+    return () => stoppers.forEach(stop => stop());
+}
+
+function proxy_handlers(tracker, recorder, locker, stopper, scheduler) {
+    function respond_and_run_discovery([symbol, reaction]) {
+        locker.lock(reaction.responder);
+        if (reaction.discover) {
+            stopper.stop(symbol);
+            const recorded = recorder.record(() => locker.lock(reaction.collector));
+            stopper.add(symbol, save_reaction(symbol, recorded, tracker, reaction));
+        }
+    }
+    return {
+        get: (state, key) => {
+            recorder.record_that_key_was_accessed(state, key);
+            return state[key];
+        },
+        set: (state, key, value) => {
+            if (locker.locked)
+                throw new CircularFlatstateError(key);
+            state[key] = value;
+            const reactions = [...tracker.grab_keymap(state).grab_symbolmap(key)];
+            for (const entry of reactions) {
+                const [symbol, reaction] = entry;
+                if (reaction.debounce)
+                    scheduler.add(symbol, () => respond_and_run_discovery(entry));
+                else
+                    respond_and_run_discovery(entry);
+            }
+            return true;
+        },
+    };
+}
+
+class Flat {
+    static readonly = readonly;
+    static collectivize = collectivize;
+    #tracker = new Tracker();
+    #recorder = new Recorder();
+    #locker = new Locker();
+    #stopper = new Stopper();
+    #scheduler = new Scheduler();
+    #proxy_handlers = proxy_handlers(this.#tracker, this.#recorder, this.#locker, this.#stopper, this.#scheduler);
+    get wait() {
+        return this.#scheduler.wait;
+    }
+    state(state) {
+        return new Proxy(state, this.#proxy_handlers);
+    }
+    manual(reaction) {
+        const symbol = Symbol();
+        const recorded = this.#recorder.record(() => this.#locker.lock(reaction.collector));
+        this.#stopper.add(symbol, save_reaction(symbol, recorded, this.#tracker, reaction));
+        return () => this.#stopper.stop(symbol);
+    }
+    auto({ debounce, discover, collector, responder }) {
+        return this.manual({
+            debounce,
+            discover,
+            collector,
+            responder: responder
+                ? () => responder(collector())
+                : collector,
+        });
+    }
+    reaction(collector, responder) {
+        return this.auto({
+            debounce: true,
+            discover: false,
+            collector,
+            responder,
+        });
+    }
+    deepReaction(collector, responder) {
+        return this.auto({
+            debounce: true,
+            discover: true,
+            collector,
+            responder,
+        });
+    }
+    clear() {
+        this.#tracker.clear();
+    }
+}
+
+var ob;
+(function (ob) {
+    ob.map = (o, transform) => (Object.fromEntries(Object.entries(o)
+        .map(([key, value]) => [key, transform(value, key)])));
+    ob.filter = (o, judge) => Object.fromEntries(Object.entries(o)
+        .filter(([key, value]) => judge(value, key)));
+    (function (pipe) {
+        pipe.map = (transform) => ((o) => ob.map(o, transform));
+        pipe.filter = (transform) => ((o) => ob.filter(o, transform));
+    })(ob.pipe || (ob.pipe = {}));
+})(ob || (ob = {}));
+
+const JsError = Error;
+var Op;
+(function (Op) {
+    Op.loading = () => ({ mode: "loading" });
+    Op.error = (reason) => ({ mode: "error", reason });
+    Op.ready = (payload) => ({ mode: "ready", payload });
+    Op.is = Object.freeze({
+        loading: (op) => op.mode === "loading",
+        error: (op) => op.mode === "error",
+        ready: (op) => op.mode === "ready",
+    });
+    function payload(op) {
+        return (op.mode === "ready")
+            ? op.payload
+            : undefined;
+    }
+    Op.payload = payload;
+    function select(op, choices) {
+        switch (op.mode) {
+            case "loading":
+                return choices.loading();
+            case "error":
+                return choices.error(op.reason);
+            case "ready":
+                return choices.ready(op.payload);
+            default:
+                console.error("op", op);
+                throw new JsError("invalid op mode");
+        }
+    }
+    Op.select = select;
+    async function run(set_op, operation) {
+        set_op(Op.loading());
+        try {
+            const payload = await operation();
+            set_op(Op.ready(payload));
+            return payload;
+        }
+        catch (err) {
+            const reason = (err instanceof JsError)
+                ? err.message
+                : (typeof err === "string")
+                    ? err
+                    : "error";
+            set_op(Op.error(reason));
+        }
+    }
+    Op.run = run;
+    function morph(op, transmute) {
+        return select(op, {
+            loading: () => Op.loading(),
+            error: reason => Op.error(reason),
+            ready: a => Op.ready(transmute(a)),
+        });
+    }
+    Op.morph = morph;
+})(Op || (Op = {}));
+
+class OpSignal extends Signal {
+    constructor() {
+        super(Op.loading());
+    }
+    async run(operation) {
+        return Op.run(op => this.value = op, operation);
+    }
+    get payload() {
+        return Op.payload(this.value);
+    }
+    is = {
+        loading: () => Op.is.loading(this.value),
+        error: () => Op.is.error(this.value),
+        ready: () => Op.is.ready(this.value),
+    };
+    select(choices) {
+        return Op.select(this.value, choices);
+    }
+}
+
+class SignalTower {
+    // TODO wrap all signals in WeakRef, to promote garbage collection?
+    #signals = new Set();
+    signal(value) {
+        const signal = new Signal(value);
+        this.#signals.add(signal);
+        return signal;
+    }
+    computed(fun) {
+        const signal = this.signal(fun());
+        this.track(fun, () => signal.value = fun());
+        return signal;
+    }
+    op() {
+        const signal = new OpSignal();
+        this.#signals.add(signal);
+        return signal;
+    }
+    many(states) {
+        return (ob.map(states, state => this.signal(state)));
+    }
+    track(reader, actor) {
+        const actuate = debounce(0, actor);
+        const accessed = [];
+        for (const signal of this.#signals)
+            signal.accessed = false;
+        reader();
+        for (const signal of this.#signals)
+            if (signal.accessed)
+                accessed.push(signal);
+        const unsubscribe_functions = accessed
+            .map(signal => signal.subscribe(() => actuate()));
+        return () => unsubscribe_functions
+            .forEach(unsub => unsub());
+    }
+}
+
+class Context {
+    theme = i$3 ``;
+    flat = new Flat();
+    tower = new SignalTower();
+}
+
+class Pipe {
+    static with(input) {
+        return new this(input);
+    }
+    #input;
+    constructor(input) {
+        this.#input = input;
+    }
+    to(fun) {
+        return new Pipe(fun(this.#input));
+    }
+    done() {
+        return this.#input;
+    }
+}
+
+class Use {
+    static wrap(use, fun) {
+        return ((...args) => {
+            use.#counter.value = 0;
+            return fun(...args);
+        });
+    }
+    static disconnect(use) {
+        for (const down of use.#setdowns)
+            down();
+        use.#setdowns.clear();
+    }
+    static reconnect(use) {
+        for (const up of use.#setups.values())
+            use.#setdowns.add(up());
+    }
+    #context;
+    #rerender;
+    #counter = { value: 0 };
+    #setups = new Map();
+    #setdowns = new Set();
+    #states = new Map();
+    #preparations = new Map();
+    #flatstates = new Map();
+    #signals = new Map();
+    constructor(rerender, context) {
+        this.#rerender = rerender;
+        this.#context = context;
+    }
+    get context() {
+        return this.#context;
+    }
+    rerender() {
+        this.#rerender();
+    }
+    setup(up) {
+        const count = this.#counter.value;
+        if (!this.#setups.has(count)) {
+            this.#setups.set(count, up);
+            this.#setdowns.add(up());
+        }
+    }
+    prepare(prep) {
+        const count = this.#counter.value++;
+        return maptool(this.#preparations).grab(count, prep);
+    }
+    state(init) {
+        const count = this.#counter.value++;
+        const value = maptool(this.#states).grab(count, () => ((typeof init === "function")
+            ? init()
+            : init));
+        const setter = (v) => {
+            this.#states.set(count, v);
+            this.#rerender();
+        };
+        const getter = () => this.#states.get(count);
+        return [value, setter, getter];
+    }
+    flatstate(init) {
+        const count = this.#counter.value++;
+        return maptool(this.#flatstates).grab(count, () => (this.#context.flat.state((typeof init === "function")
+            ? init()
+            : init)));
+    }
+    signal(init) {
+        const count = this.#counter.value++;
+        return maptool(this.#signals).grab(count, () => (this.#context.tower.signal((typeof init === "function")
+            ? init()
+            : init)));
+    }
+    op() {
+        const count = this.#counter.value++;
+        return maptool(this.#signals).grab(count, () => this.#context.tower.op());
+    }
+}
+
+class UseShadow extends Use {
+    #element;
+    get element() { return this.#element; }
+    #shadow;
+    get shadow() { return this.#shadow; }
+    constructor(element, shadow, rerender, context) {
+        super(rerender, context);
+        this.#element = element;
+        this.#shadow = shadow;
+    }
+}
+
+var Attributes;
+(function (Attributes) {
+    Attributes.proxy = (element, spec) => new Proxy(spec, {
+        get: (_target, name) => {
+            const type = spec[name];
+            const raw = element.getAttribute(name);
+            switch (type) {
+                case String:
+                    return raw ?? undefined;
+                case Number:
+                    return raw !== null
+                        ? Number(raw)
+                        : undefined;
+                case Boolean:
+                    return raw !== null;
+                default:
+                    throw new Error(`invalid attribute type for "${name}"`);
+            }
+        },
+        set: (_target, name, value) => {
+            const type = spec[name];
+            switch (type) {
+                case String: {
+                    element.setAttribute(name, value);
+                    return true;
+                }
+                case Number: {
+                    element.setAttribute(name, value.toString());
+                    return true;
+                }
+                case Boolean: {
+                    if (value)
+                        element.setAttribute(name, "");
+                    else
+                        element.removeAttribute(name);
+                    return true;
+                }
+                default:
+                    throw new Error(`invalid attribute type for "${name}"`);
+            }
+        },
+    });
+    function on_change(element, handle_change) {
+        const observer = new MutationObserver(handle_change);
+        observer.observe(element, { attributes: true });
+        return () => observer.disconnect();
+    }
+    Attributes.on_change = on_change;
+    function base(element, spec) {
+        on_change(element, () => element.requestUpdate());
+        return Attributes.proxy(element, spec);
+    }
+    Attributes.base = base;
+})(Attributes || (Attributes = {}));
+
+function setup_use_attrs(element) {
+    let attrs;
+    return function (spec) {
+        if (!attrs)
+            attrs = Attributes.base(element, spec);
+        return attrs;
+    };
+}
+
+class UseGold extends UseShadow {
+    attrs;
+    constructor(element, shadow, rerender, context) {
+        super(element, shadow, rerender, context);
+        this.attrs = setup_use_attrs(element);
+    }
+}
+
+function mixinSetups(Base) {
+    return class extends Base {
+        #setups = new Set()
+            .add(() => this.setup());
+        #setdowns = new Set();
+        register_setup(setup) {
+            this.#setups.add(setup);
+        }
+        setup() {
+            return () => { };
+        }
+        connectedCallback() {
+            for (const setup of this.#setups)
+                this.#setdowns.add(setup());
+        }
+        disconnectedCallback() {
+            for (const setdown of this.#setdowns)
+                setdown();
+            this.#setdowns.clear();
+        }
+    };
+}
+
+class MetallicElement extends mixinSetups(HTMLElement) {
+}
+
+function explode_promise() {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve, reject };
+}
+
+function finalize_styles(styles) {
+    const elementStyles = [];
+    if (Array.isArray(styles)) {
+        const set = new Set(styles.flat(Infinity).reverse());
+        for (const s of set)
+            elementStyles.unshift(c$3(s));
+    }
+    else if (styles !== undefined)
+        elementStyles.push(c$3(styles));
+    return elementStyles;
+}
+
+function apply_styles_to_shadow(shadow, styles) {
+    S$1(shadow, finalize_styles(styles));
+}
+
+class GoldElement extends MetallicElement {
+    static styles;
+    #root;
+    #init = explode_promise();
+    #wait = this.#init.promise;
+    init() { }
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+        const C = this.constructor;
+        apply_styles_to_shadow(this.#root, C.styles);
+        this.init();
+    }
+    get root() {
+        return this.#root;
+    }
+    get updateComplete() {
+        return this.#wait.then(() => true);
+    }
+    #render_debounced = debounce(0, () => {
+        const root = this.#root;
+        const template = this.render();
+        if (template)
+            j(template, root, { host: this });
+    });
+    async requestUpdate() {
+        const promise = this.#render_debounced();
+        if (this.#init) {
+            promise.then(this.#init.resolve);
+            this.#init = undefined;
+        }
+        this.#wait = promise;
+        return promise;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.requestUpdate();
+    }
+}
+
+function setup_reactivity(context, render, rerender) {
+    let stop_cues = undefined;
+    let stop_flat = undefined;
+    function render_and_track_cues(...props) {
+        if (stop_cues)
+            stop_cues();
+        let result = undefined;
+        stop_cues = context.tower.track(() => { result = render(...props); }, rerender);
+        return result;
+    }
+    function render_and_track_flatstate(...props) {
+        if (stop_flat)
+            stop_flat();
+        let result = undefined;
+        stop_flat = context.flat.manual({
+            debounce: true,
+            discover: false,
+            collector: () => { result = render_and_track_cues(...props); },
+            responder: rerender,
+        });
+        return result;
+    }
+    return render_and_track_flatstate;
+}
+
+const prepare_carbon = ((context) => (settings, renderer) => (class extends GoldElement {
+    static name = settings.name;
+    static styles = [
+        context.theme,
+        settings.styles ?? i$3 ``,
+    ];
+    #use = new UseGold(this, this.root, () => void this.requestUpdate(), context);
+    #rend = Use.wrap(this.#use, () => renderer(this.#use));
+    #render_with_reactivity = setup_reactivity(context, this.#rend, () => void this.requestUpdate());
+    render() {
+        return this.#render_with_reactivity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        Use.reconnect(this.#use);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Use.disconnect(this.#use);
+    }
+}));
+
+class UseSilver extends Use {
+    #element;
+    get element() { return this.#element; }
+    attrs;
+    constructor(element, rerender, context) {
+        super(rerender, context);
+        this.#element = element;
+        this.attrs = setup_use_attrs(element);
+    }
+}
+
+class SilverElement extends MetallicElement {
+    #init = explode_promise();
+    #wait = this.#init.promise;
+    init() { }
+    constructor() {
+        super();
+        this.init();
+    }
+    get updateComplete() {
+        return this.#wait.then(() => true);
+    }
+    #render_debounced = debounce(0, () => {
+        const template = this.render();
+        j(template, this, { host: this });
+    });
+    async requestUpdate() {
+        const promise = this.#render_debounced();
+        if (this.#init) {
+            promise.then(this.#init.resolve);
+            this.#init = undefined;
+        }
+        this.#wait = promise;
+        return promise;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.requestUpdate();
+    }
+}
+
+const prepare_oxygen = ((context) => (renderer) => (class extends SilverElement {
+    #use = new UseSilver(this, () => void this.requestUpdate(), context);
+    #rend = Use.wrap(this.#use, () => renderer(this.#use));
+    #render_with_reactivity = setup_reactivity(context, this.#rend, () => void this.requestUpdate());
+    render() {
+        return this.#render_with_reactivity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        Use.reconnect(this.#use);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Use.disconnect(this.#use);
+    }
+}));
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const f$1=o=>void 0===o.strings;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const s=(i,t)=>{const e=i._$AN;if(void 0===e)return !1;for(const i of e)i._$AO?.(t,!1),s(i,t);return !0},o=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===e?.size)},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c(t);}};function h(i){void 0!==this._$AN?(o(this),this._$AM=i,r(this)):this._$AM=i;}function n(i,t=!1,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],!1),o(r[i]);else null!=r&&(s(r,!1),o(r));else s(this,i);}const c=i=>{i.type==t.CHILD&&(i._$AP??=n,i._$AQ??=h);};class f extends i{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=!0){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s(this,i),o(this));}setValue(t){if(f$1(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
+
+const prepare_quartz = ((context) => (renderer) => e(class extends f {
+    #props;
+    #rerender = debounce(0, () => {
+        if (this.#props)
+            this.setValue(this.render(...this.#props));
+    });
+    #use = new Use(this.#rerender, context);
+    #rend = Use.wrap(this.#use, renderer(this.#use));
+    #render_with_reactivity = setup_reactivity(context, this.#rend, this.#rerender);
+    render(...props) {
+        this.#props = props;
+        return this.#render_with_reactivity(...props);
+    }
+    reconnected() {
+        Use.reconnect(this.#use);
+    }
+    disconnected() {
+        Use.disconnect(this.#use);
+    }
+}));
+
+var mixin;
+(function (mixin) {
+    function css(...newStyles) {
+        return function (Base) {
+            return class extends Base {
+                static styles = combineStyles(Base.styles, newStyles);
+            };
+        };
+    }
+    mixin.css = css;
+    function signals(group) {
+        return function (Base) {
+            return class extends Base {
+                #untracks = [];
+                connectedCallback() {
+                    super.connectedCallback();
+                    this.#untracks.push(group.track(() => this.render(), () => this.requestUpdate()));
+                }
+                disconnectedCallback() {
+                    super.disconnectedCallback();
+                    for (const untrack of this.#untracks)
+                        untrack();
+                    this.#untracks = [];
+                }
+            };
+        };
+    }
+    mixin.signals = signals;
+    /*
+
+    this flatstate mixin uses a bizarre strategy for optimizaton purposes.
+
+    + on every render, we stop/reassign a new manual reaction.
+    + discover is false, because we essentially emulate it
+        by assigning a new reaction every render,
+        using the current render as a new collector.
+    + debounce is false, because lit's requestUpdate does that.
+
+    */
+    function flat(flat) {
+        return function (Base) {
+            return class extends Base {
+                #stop = undefined;
+                render() {
+                    if (this.#stop)
+                        this.#stop();
+                    let result = undefined;
+                    this.#stop = flat.manual({
+                        debounce: false,
+                        discover: false,
+                        collector: () => {
+                            result = super.render();
+                        },
+                        responder: () => {
+                            this.requestUpdate();
+                        },
+                    });
+                    return result;
+                }
+                disconnectedCallback() {
+                    super.disconnectedCallback();
+                    if (this.#stop)
+                        this.#stop();
+                    this.#stop = undefined;
+                }
+            };
+        };
+    }
+    mixin.flat = flat;
+})(mixin || (mixin = {}));
+function arrayize(item) {
+    return [item].flat().filter(i => !!i);
+}
+const notUndefined = (x) => x !== undefined;
+function combineStyles(parentStyles, newStyles) {
+    const styles = [
+        ...(arrayize(parentStyles) ?? []),
+        ...arrayize(newStyles),
+    ];
+    return styles
+        .flat()
+        .filter(notUndefined);
+}
+
+/**
+ * Convert a camel-case name into a dashed name
+ * - for example
+ *       dashify("BigManStyle")
+ *        // "big-man-style"
+ */
+function dashify(camel) {
+    return camel.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
+}
+
+const register_to_dom = (elements) => {
+    for (const [name, Element] of Object.entries(elements))
+        customElements.define(dashify(name), Element);
+};
+
+class ObsidianView extends HTMLElement {
+    static tag = "obsidian-view";
+}
+register_to_dom({ ObsidianView });
+
+function parse_prefixes(...partstrings) {
+    const prefixes = new Set();
+    const parts = partstrings
+        .map(part => part ?? "")
+        .flatMap(parse_part);
+    for (const part of parts)
+        prefixes.add(part);
+    return prefixes;
+}
+function query_attributes(container, attributes) {
+    return Object.fromEntries(Object.entries(attributes).map(([key, attr]) => [
+        key,
+        Array.from(container.querySelectorAll(`[${attr}]`))
+            .map(e => e.getAttribute(attr)),
+    ]));
+}
+function parse_part(attr) {
+    return attr
+        .split(/\s+/)
+        .map(s => s.trim())
+        .filter(s => !!s);
+}
+function parse_exportparts(attr) {
+    return attr
+        .split(",")
+        .map(s => s.trim())
+        .filter(s => !!s)
+        .map(s => s.includes(":")
+        ? s.split(":").map(s => s.trim())[1]
+        : s);
+}
+function stitch_exportparts_together(parts, gparts) {
+    return ((prefix) => [...parts].flatMap(part => [
+        `${part}:${prefix}-${part}`,
+        ...(gparts.has(part) ? [part] : []),
+    ]));
+}
+
+function auto_exportparts(container, root) {
+    const prefixes = parse_prefixes(container.getAttribute("part"));
+    const gprefixes = parse_prefixes(container.getAttribute("data-gpart"));
+    const attrs = query_attributes(root, {
+        part: "part",
+        gpart: "data-gpart",
+        exportparts: "exportparts",
+        gexportparts: "gexportparts",
+    });
+    const parts = new Set([
+        ...attrs.part.flatMap(parse_part),
+        ...attrs.exportparts.flatMap(parse_exportparts),
+    ]);
+    const gparts = new Set([
+        ...attrs.gpart.flatMap(parse_part),
+        ...attrs.gexportparts.flatMap(parse_part),
+    ]);
+    if (parts.size)
+        container.setAttribute("exportparts", [...prefixes]
+            .flatMap(stitch_exportparts_together(parts, gparts))
+            .join(", "));
+    if (gparts.size || container.hasAttribute("data-gpart"))
+        container.setAttribute("gexportparts", [
+            ...gparts,
+            ...[...gprefixes]
+                .flatMap(prefix => [...parts].map(part => `${prefix}-${part}`)),
+        ].join(" "));
+}
+
+function make_view_root(name, css) {
+    const container = document.createElement(ObsidianView.tag);
+    container.setAttribute("view", name);
+    const shadow = container.attachShadow({ mode: "open" });
+    apply_styles_to_shadow(shadow, css);
+    let auto_exportparts_is_enabled = false;
+    return {
+        container,
+        shadow,
+        set auto_exportparts(enabled) {
+            auto_exportparts_is_enabled = enabled;
+        },
+        render_into_shadow(content) {
+            j(content, shadow);
+            if (auto_exportparts_is_enabled)
+                auto_exportparts(container, shadow);
+            return container;
+        },
+    };
+}
+
+function apply_attributes(elements, attributes) {
+    for (const [key, value] of Object.entries(attributes)) {
+        if (typeof value === "string")
+            elements.setAttribute(key, value);
+        else if (typeof value === "number")
+            elements.setAttribute(key, value.toString());
+        else if (typeof value === "boolean") {
+            if (value === true)
+                elements.setAttribute(key, "");
+            else
+                elements.removeAttribute(key);
+        }
+        else if (typeof value === "undefined")
+            elements.removeAttribute(key);
+        else
+            console.warn(`invalid attribute type ${key} is ${typeof value}`);
+    }
+}
+
+function apply_details(element, freshMeta = {}, oldMeta = {}) {
+    const { content, attrs: fresh = {} } = freshMeta;
+    const { attrs: old = {} } = oldMeta;
+    function actuate(freshvalue, oldvalue, name, value) {
+        if (freshvalue !== oldvalue) {
+            if (freshvalue === undefined)
+                element.removeAttribute(name);
+            else
+                element.setAttribute(name, value());
+        }
+    }
+    if (fresh)
+        apply_attributes(element, fresh);
+    actuate(fresh.class, old?.class, "class", () => fresh.class);
+    actuate(fresh.part, old?.part, "part", () => fresh.part);
+    actuate(fresh.gpart, old?.gpart, "data-gpart", () => fresh.gpart);
+    if (content)
+        j(content, element, { host: element });
+}
+
+const obsidian_custom_lit_directive = ((c) => ((props, meta = {}) => ({
+    ['_$litDirective$']: c,
+    values: [{ meta, props }],
+})));
+
+const prepare_obsidian = ((context) => (settings = {}, renderer) => (obsidian_custom_lit_directive(class extends f {
+    #input;
+    #root = make_view_root(settings.name ?? "", [context.theme, settings.styles ?? i$3 ``]);
+    #rerender = debounce(0, () => {
+        if (this.#input)
+            this.setValue(this.#root.render_into_shadow(this.render(this.#input)));
+    });
+    #use = new UseShadow(this.#root.container, this.#root.shadow, this.#rerender, context);
+    #rend = Use.wrap(this.#use, renderer(this.#use));
+    #render_with_reactivity = setup_reactivity(context, this.#rend, this.#rerender);
+    update(_, props) {
+        return this.#root.render_into_shadow(this.render(...props));
+    }
+    render(input) {
+        apply_details(this.#root.container, input.meta, this.#input?.meta);
+        this.#input = input;
+        this.#root.auto_exportparts = (input.meta.auto_exportparts ?? settings.auto_exportparts ?? true);
+        return this.#render_with_reactivity(...input.props);
+    }
+    reconnected() {
+        Use.reconnect(this.#use);
+    }
+    disconnected() {
+        Use.disconnect(this.#use);
+    }
+})));
+
+const prepare_frontend = (context) => ({
+    oxygen: prepare_oxygen(context),
+    carbon: prepare_carbon(context),
+    quartz: prepare_quartz(context),
+    obsidian: prepare_obsidian(context),
+    component: (prep) => (Pipe.with(prep(context))
+        .to(mixin.css(context.theme))
+        .to(mixin.flat(context.flat))
+        .to(mixin.signals(context.tower))
+        .done()),
+});
+
+class DemoContext extends Context {
+    theme = i$3 `
+		button {
+			padding: 0.5em;
+			font-style: italic;
+		}
+	`;
+}
+const { oxygen, carbon, quartz, obsidian, component, } = prepare_frontend(new DemoContext);
+
+const SlateGold = component(context => class extends GoldElement {
+    #state = context.flat.state({
+        count: 0,
+    });
+    render() {
+        return x `
+			<span>${this.#state.count}</span>
+			<button @click=${() => this.#state.count++}>gold</button>
+		`;
+    }
+});
+
+const QuartzTripler = quartz(use => (start) => {
+    // react hooks state
+    const [alpha, setAlpha] = use.state(start);
+    const increaseAlpha = () => setAlpha(alpha * 3);
+    // flatstate
+    const bravo = use.flatstate({ count: start });
+    const increaseBravo = () => bravo.count *= 3;
+    // preact signals
+    const charlie = use.signal(start);
+    const increaseCharlie = () => charlie.value *= 3;
+    return html `
+		<span>${alpha}</span>
+		<button @click=${increaseAlpha}>quartz-a</button>
+
+		<span>${bravo.count}</span>
+		<button @click=${increaseBravo}>quartz-b</button>
+
+		<span>${charlie}</span>
+		<button @click=${increaseCharlie}>quartz-c</button>
+	`;
+});
+
+const name = "quadrupler";
+const styles$1 = i$3 `span { color: yellow }`;
+const ObsidianQuadrupler = obsidian({ name, styles: styles$1 }, use => (start) => {
+    const count = use.signal(start);
+    const increase = () => count.value *= 4;
+    return html `
+		<span>${count}</span>
+		<button @click=${increase}>obsidian</button>
+	`;
+});
+
+const SlateSilver = component(_context => class extends SilverElement {
+    render() {
+        return x `
+			${QuartzTripler(1)}
+			${ObsidianQuadrupler([33])}
+		`;
+    }
+});
+
+const random = () => Math.ceil(Math.random() * 1000);
+const styles = i$3 `button { color: green }`;
+const SlateCarbon = carbon({ styles }, use => {
+    const x = use.signal(random);
+    const randomize = () => x.value = random();
+    return html `
+		<span>${x}</span>
+		<button @click=${randomize}>carbon</button>
+	`;
+});
+
+const SlateOxygen = oxygen(use => {
+    const count = use.signal(256);
+    const decrease = () => count.value -= 8;
+    return html `
+		<span>${count}</span>
+		<button @click=${decrease}>oxygen</button>
+	`;
+});
+
+register_to_dom({
+    SlateCarbon,
+    SlateGold,
+    SlateOxygen,
+    SlateSilver,
+});

x/main.bundle.min.js

@@ -1,1 +0,30 @@
-Array.prototype.at=function(t){return t>=0?this[t]:this[this.length+t]},console.log("slate");
+Array.prototype.at=function(t){return t>=0?this[t]:this[this.length+t]};const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),r=new WeakMap;let n=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=r.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&r.set(s,t))}return t}toString(){return this.cssText}};const i=(t,...e)=>{const r=1===t.length?t[0]:e.reduce(((e,s,r)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[r+1]),t[0]);return new n(r,t,s)},o=(s,r)=>{if(e)s.adoptedStyleSheets=r.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of r){const r=document.createElement("style"),n=t.litNonce;void 0!==n&&r.setAttribute("nonce",n),r.textContent=e.cssText,s.appendChild(r)}},a=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new n("string"==typeof t?t:t+"",void 0,s))(e)})(t):t,{is:c,defineProperty:h,getOwnPropertyDescriptor:l,getOwnPropertyNames:u,getOwnPropertySymbols:d,getPrototypeOf:p}=Object,f=globalThis,$=f.trustedTypes,_=$?$.emptyScript:"",g=f.reactiveElementPolyfillSupport,m=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?_:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},b=(t,e)=>!c(t,e),v={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:b};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;class A extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=v){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),r=this.getPropertyDescriptor(t,s,e);void 0!==r&&h(this.prototype,t,r)}}static getPropertyDescriptor(t,e,s){const{get:r,set:n}=l(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get(){return r?.call(this)},set(e){const i=r?.call(this);n.call(this,e),this.requestUpdate(t,i,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??v}static _$Ei(){if(this.hasOwnProperty(m("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(m("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m("properties"))){const t=this.properties,e=[...u(t),...d(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const s=this._$Eu(t,e);void 0!==s&&this._$Eh.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$Eg=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return o(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EO(t,e){const s=this.constructor.elementProperties.get(t),r=this.constructor._$Eu(t,s);if(void 0!==r&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:y).toAttribute(e,s.type);this._$Em=t,null==n?this.removeAttribute(r):this.setAttribute(r,n),this._$Em=null}}_$AK(t,e){const s=this.constructor,r=s._$Eh.get(t);if(void 0!==r&&this._$Em!==r){const t=s.getPropertyOptions(r),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:y;this._$Em=r,this[r]=n.fromAttribute(e,t.type),this._$Em=null}}requestUpdate(t,e,s,r=!1,n){if(void 0!==t){if(s??=this.constructor.getPropertyOptions(t),!(s.hasChanged??b)(r?n:this[t],e))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$Eg=this._$EP())}C(t,e,s){this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$EP(){this.isUpdatePending=!0;try{await this._$Eg}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t)!0!==s.wrapped||this._$AL.has(e)||void 0===this[e]||this.C(e,this[e],s)}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$ET()}catch(e){throw t=!1,this._$ET(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Eg}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EO(t,this[t]))),this._$ET()}updated(t){}firstUpdated(t){}}A.elementStyles=[],A.shadowRootOptions={mode:"open"},A[m("elementProperties")]=new Map,A[m("finalized")]=new Map,g?.({ReactiveElement:A}),(f.reactiveElementVersions??=[]).push("2.0.0");const w=globalThis,S=w.trustedTypes,E=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,x="$lit$",k=`lit$${(Math.random()+"").slice(9)}$`,C="?"+k,M=`<${C}>`,P=document,U=()=>P.createComment(""),T=t=>null===t||"object"!=typeof t&&"function"!=typeof t,N=Array.isArray,O="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,j=/>/g,z=RegExp(`>|${O}(?:([^\\s"'>=/]+)(${O}*=${O}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),q=/'/g,L=/"/g,D=/^(?:script|style|textarea|title)$/i,B=(t=>(e,...s)=>({_$litType$:t,strings:e,values:s}))(1),I=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),W=new WeakMap,Z=P.createTreeWalker(P,129);function J(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(e):e}const K=(t,e)=>{const s=t.length-1,r=[];let n,i=2===e?"<svg>":"",o=H;for(let e=0;e<s;e++){const s=t[e];let a,c,h=-1,l=0;for(;l<s.length&&(o.lastIndex=l,c=o.exec(s),null!==c);)l=o.lastIndex,o===H?"!--"===c[1]?o=R:void 0!==c[1]?o=j:void 0!==c[2]?(D.test(c[2])&&(n=RegExp("</"+c[2],"g")),o=z):void 0!==c[3]&&(o=z):o===z?">"===c[0]?(o=n??H,h=-1):void 0===c[1]?h=-2:(h=o.lastIndex-c[2].length,a=c[1],o=void 0===c[3]?z:'"'===c[3]?L:q):o===L||o===q?o=z:o===R||o===j?o=H:(o=z,n=void 0);const u=o===z&&t[e+1].startsWith("/>")?" ":"";i+=o===H?s+M:h>=0?(r.push(a),s.slice(0,h)+x+s.slice(h)+k+u):s+k+(-2===h?e:u)}return[J(t,i+(t[s]||"<?>")+(2===e?"</svg>":"")),r]};class G{constructor({strings:t,_$litType$:e},s){let r;this.parts=[];let n=0,i=0;const o=t.length-1,a=this.parts,[c,h]=K(t,e);if(this.el=G.createElement(c,s),Z.currentNode=this.el.content,2===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(r=Z.nextNode())&&a.length<o;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(x)){const e=h[i++],s=r.getAttribute(t).split(k),o=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:o[2],strings:s,ctor:"."===o[1]?tt:"?"===o[1]?et:"@"===o[1]?st:Y}),r.removeAttribute(t)}else t.startsWith(k)&&(a.push({type:6,index:n}),r.removeAttribute(t));if(D.test(r.tagName)){const t=r.textContent.split(k),e=t.length-1;if(e>0){r.textContent=S?S.emptyScript:"";for(let s=0;s<e;s++)r.append(t[s],U()),Z.nextNode(),a.push({type:2,index:++n});r.append(t[e],U())}}}else if(8===r.nodeType)if(r.data===C)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=r.data.indexOf(k,t+1));)a.push({type:7,index:n}),t+=k.length-1}n++}}static createElement(t,e){const s=P.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,r){if(e===I)return e;let n=void 0!==r?s._$Co?.[r]:s._$Cl;const i=T(e)?void 0:e._$litDirective$;return n?.constructor!==i&&(n?._$AO?.(!1),void 0===i?n=void 0:(n=new i(t),n._$AT(t,s,r)),void 0!==r?(s._$Co??=[])[r]=n:s._$Cl=n),void 0!==n&&(e=Q(t,n._$AS(t,e.values),n,r)),e}class F{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,r=(t?.creationScope??P).importNode(e,!0);Z.currentNode=r;let n=Z.nextNode(),i=0,o=0,a=s[0];for(;void 0!==a;){if(i===a.index){let e;2===a.type?e=new X(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new rt(n,this,t)),this._$AV.push(e),a=s[++o]}i!==a?.index&&(n=Z.nextNode(),i++)}return Z.currentNode=P,r}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class X{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,r){this.type=2,this._$AH=V,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),T(t)?t===V||null==t||""===t?(this._$AH!==V&&this._$AR(),this._$AH=V):t!==this._$AH&&t!==I&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>N(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==V&&T(this._$AH)?this._$AA.nextSibling.data=t:this.$(P.createTextNode(t)),this._$AH=t}g(t){const{values:e,_$litType$:s}=t,r="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=G.createElement(J(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===r)this._$AH.p(e);else{const t=new F(r,this),s=t.u(this.options);t.p(e),this.$(s),this._$AH=t}}_$AC(t){let e=W.get(t.strings);return void 0===e&&W.set(t.strings,e=new G(t)),e}T(t){N(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,r=0;for(const n of t)r===e.length?e.push(s=new X(this.k(U()),this.k(U()),this,this.options)):s=e[r],s._$AI(n),r++;r<e.length&&(this._$AR(s&&s._$AB.nextSibling,r),e.length=r)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class Y{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,r,n){this.type=1,this._$AH=V,this._$AN=void 0,this.element=t,this.name=e,this._$AM=r,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=V}_$AI(t,e=this,s,r){const n=this.strings;let i=!1;if(void 0===n)t=Q(this,t,e,0),i=!T(t)||t!==this._$AH&&t!==I,i&&(this._$AH=t);else{const r=t;let o,a;for(t=n[0],o=0;o<n.length-1;o++)a=Q(this,r[s+o],e,o),a===I&&(a=this._$AH[o]),i||=!T(a)||a!==this._$AH[o],a===V?t=V:t!==V&&(t+=(a??"")+n[o+1]),this._$AH[o]=a}i&&!r&&this.j(t)}j(t){t===V?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class tt extends Y{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===V?void 0:t}}class et extends Y{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==V)}}class st extends Y{constructor(t,e,s,r,n){super(t,e,s,r,n),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??V)===I)return;const s=this._$AH,r=t===V&&s!==V||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==V&&(s===V||r);r&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt=w.litHtmlPolyfillSupport;nt?.(G,X),(w.litHtmlVersions??=[]).push("3.0.0");const it=(t,e,s)=>{const r=s?.renderBefore??e;let n=r._$litPart$;if(void 0===n){const t=s?.renderBefore??null;r._$litPart$=n=new X(e.insertBefore(U(),t),t,void 0,s??{})}return n._$AI(t),n};let ot=class extends A{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=it(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return I}};ot._$litElement$=!0,ot.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:ot});const at=globalThis.litElementPolyfillSupport;function ct(t,e){let s,r,n=[];function i(){s=[],r&&clearTimeout(r),r=void 0,n=[]}return i(),(...o)=>{s=o,r&&clearTimeout(r);const a=new Promise(((t,e)=>{n.push({resolve:t,reject:e})}));return r=setTimeout((()=>{Promise.resolve().then((()=>e(...s))).then((t=>{for(const{resolve:e}of n)e(t);i()})).catch((t=>{for(const{reject:e}of n)e(t);i()}))}),t),a}}at?.({LitElement:ot}),(globalThis.litElementVersions??=[]).push("4.0.0");class ht extends Error{name=this.constructor.name}class lt{#t;#e=!1;#s;#r=new Set;accessed=!1;constructor(t){this.#t=t,this.#s=Promise.resolve(t)}subscribe(t){return this.#r.add(t),()=>{this.#r.delete(t)}}clear(){return this.#r.clear()}#n=ct(0,(()=>{const t=this.#t;this.#e=!0;for(const e of this.#r)e(t);return this.#e=!1,t}));async publish(){this.#s=this.#n(),await this.#s}get wait(){return this.#s}get value(){return this.accessed=!0,this.#t}set value(t){if(this.#e)throw new ht("you can't set a cue in a cue's subscription listener (infinite loop forbidden)");this.#t=t,this.publish()}}const ut=(t,...e)=>B(t,...e.map((t=>t instanceof lt?t.value:t)));class dt{#i=!1;lock(t){this.#i=!0,t(),this.#i=!1}get locked(){return this.#i}}const pt=()=>new Map,ft=()=>new Set;function $t(t){return new _t(t)}class _t{map;constructor(t){this.map=t}grab(t,e){const{map:s}=this;if(s.has(t))return s.get(t);{const r=e();return s.set(t,r),r}}}class gt{#o=new WeakMap;grab_keymap(t){const e=$t(this.#o).grab(t,pt);return{keymap:e,grab_symbolmap:t=>$t(e).grab(t,pt)}}clear(){this.#o=new WeakMap}}class mt{#a=new Map;stop(t){const e=this.#a.get(t);e&&(this.#a.delete(t),e())}add(t,e){this.#a.set(t,e)}}class yt{#c;record(t){this.#c=pt(),t();const e=this.#c;return this.#c=void 0,e}entries(){return this.#c?[...this.#c.entries()]:[]}record_that_key_was_accessed(t,e){if(this.#c){$t(this.#c).grab(t,ft).add(e)}}}class bt extends Error{name=this.constructor.name}class vt extends bt{constructor(t){super(`forbidden circularity, rejected assignment to "${t}"`)}}class At extends bt{constructor(t){super(`forbidden assignment to readonly property "${t}"`)}}function wt(t){return new Proxy(t,{get:(t,e)=>t[e],set(t,e){throw new At(e)}})}class St{#h=new Map;#s=Promise.resolve();#l=ct(0,(()=>{const t=[...this.#h.values()];this.#h.clear();for(const e of t)e()}));get wait(){return this.#s}add(t,e){this.#h.set(t,e),this.#s=this.#l()}}function Et(t){return function(e){return()=>{const s="function"==typeof t?t():t;return e(s)}}}function xt(t,e,s,r){const n=[];for(const[i,o]of e){const{grab_symbolmap:e}=s.grab_keymap(i);for(const s of o){const i=e(s);i.set(t,r),n.push((()=>i.delete(t)))}}return()=>n.forEach((t=>t()))}class kt{static readonly=wt;static collectivize=Et;#u=new gt;#d=new yt;#p=new dt;#f=new mt;#$=new St;#_=function(t,e,s,r,n){function i([n,i]){if(s.lock(i.responder),i.discover){r.stop(n);const o=e.record((()=>s.lock(i.collector)));r.add(n,xt(n,o,t,i))}}return{get:(t,s)=>(e.record_that_key_was_accessed(t,s),t[s]),set:(e,r,o)=>{if(s.locked)throw new vt(r);e[r]=o;const a=[...t.grab_keymap(e).grab_symbolmap(r)];for(const t of a){const[e,s]=t;s.debounce?n.add(e,(()=>i(t))):i(t)}return!0}}}(this.#u,this.#d,this.#p,this.#f,this.#$);get wait(){return this.#$.wait}state(t){return new Proxy(t,this.#_)}manual(t){const e=Symbol(),s=this.#d.record((()=>this.#p.lock(t.collector)));return this.#f.add(e,xt(e,s,this.#u,t)),()=>this.#f.stop(e)}auto({debounce:t,discover:e,collector:s,responder:r}){return this.manual({debounce:t,discover:e,collector:s,responder:r?()=>r(s()):s})}reaction(t,e){return this.auto({debounce:!0,discover:!1,collector:t,responder:e})}deepReaction(t,e){return this.auto({debounce:!0,discover:!0,collector:t,responder:e})}clear(){this.#u.clear()}}var Ct;!function(t){var e;t.map=(t,e)=>Object.fromEntries(Object.entries(t).map((([t,s])=>[t,e(s,t)]))),t.filter=(t,e)=>Object.fromEntries(Object.entries(t).filter((([t,s])=>e(s,t)))),(e=t.pipe||(t.pipe={})).map=e=>s=>t.map(s,e),e.filter=e=>s=>t.filter(s,e)}(Ct||(Ct={}));const Mt=Error;var Pt,Ut;!function(t){function e(t,e){switch(t.mode){case"loading":return e.loading();case"error":return e.error(t.reason);case"ready":return e.ready(t.payload);default:throw console.error("op",t),new Mt("invalid op mode")}}t.loading=()=>({mode:"loading"}),t.error=t=>({mode:"error",reason:t}),t.ready=t=>({mode:"ready",payload:t}),t.is=Object.freeze({loading:t=>"loading"===t.mode,error:t=>"error"===t.mode,ready:t=>"ready"===t.mode}),t.payload=function(t){return"ready"===t.mode?t.payload:void 0},t.select=e,t.run=async function(e,s){e(t.loading());try{const r=await s();return e(t.ready(r)),r}catch(s){const r=s instanceof Mt?s.message:"string"==typeof s?s:"error";e(t.error(r))}},t.morph=function(s,r){return e(s,{loading:()=>t.loading(),error:e=>t.error(e),ready:e=>t.ready(r(e))})}}(Pt||(Pt={}));class Tt extends lt{constructor(){super(Pt.loading())}async run(t){return Pt.run((t=>this.value=t),t)}get payload(){return Pt.payload(this.value)}is={loading:()=>Pt.is.loading(this.value),error:()=>Pt.is.error(this.value),ready:()=>Pt.is.ready(this.value)};select(t){return Pt.select(this.value,t)}}class Nt{#g=new Set;signal(t){const e=new lt(t);return this.#g.add(e),e}computed(t){const e=this.signal(t());return this.track(t,(()=>e.value=t())),e}op(){const t=new Tt;return this.#g.add(t),t}many(t){return Ct.map(t,(t=>this.signal(t)))}track(t,e){const s=ct(0,e),r=[];for(const t of this.#g)t.accessed=!1;t();for(const t of this.#g)t.accessed&&r.push(t);const n=r.map((t=>t.subscribe((()=>s()))));return()=>n.forEach((t=>t()))}}class Ot{theme=i``;flat=new kt;tower=new Nt}class Ht{static with(t){return new this(t)}#m;constructor(t){this.#m=t}to(t){return new Ht(t(this.#m))}done(){return this.#m}}class Rt{static wrap(t,e){return(...s)=>(t.#y.value=0,e(...s))}static disconnect(t){for(const e of t.#b)e();t.#b.clear()}static reconnect(t){for(const e of t.#v.values())t.#b.add(e())}#A;#w;#y={value:0};#v=new Map;#b=new Set;#S=new Map;#E=new Map;#x=new Map;#g=new Map;constructor(t,e){this.#w=t,this.#A=e}get context(){return this.#A}rerender(){this.#w()}setup(t){const e=this.#y.value;this.#v.has(e)||(this.#v.set(e,t),this.#b.add(t()))}prepare(t){const e=this.#y.value++;return $t(this.#E).grab(e,t)}state(t){const e=this.#y.value++;return[$t(this.#S).grab(e,(()=>"function"==typeof t?t():t)),t=>{this.#S.set(e,t),this.#w()},()=>this.#S.get(e)]}flatstate(t){const e=this.#y.value++;return $t(this.#x).grab(e,(()=>this.#A.flat.state("function"==typeof t?t():t)))}signal(t){const e=this.#y.value++;return $t(this.#g).grab(e,(()=>this.#A.tower.signal("function"==typeof t?t():t)))}op(){const t=this.#y.value++;return $t(this.#g).grab(t,(()=>this.#A.tower.op()))}}class jt extends Rt{#k;get element(){return this.#k}#C;get shadow(){return this.#C}constructor(t,e,s,r){super(s,r),this.#k=t,this.#C=e}}function zt(t){let e;return function(s){return e||(e=Ut.base(t,s)),e}}!function(t){function e(t,e){const s=new MutationObserver(e);return s.observe(t,{attributes:!0}),()=>s.disconnect()}t.proxy=(t,e)=>new Proxy(e,{get:(s,r)=>{const n=e[r],i=t.getAttribute(r);switch(n){case String:return i??void 0;case Number:return null!==i?Number(i):void 0;case Boolean:return null!==i;default:throw new Error(`invalid attribute type for "${r}"`)}},set:(s,r,n)=>{switch(e[r]){case String:return t.setAttribute(r,n),!0;case Number:return t.setAttribute(r,n.toString()),!0;case Boolean:return n?t.setAttribute(r,""):t.removeAttribute(r),!0;default:throw new Error(`invalid attribute type for "${r}"`)}}}),t.on_change=e,t.base=function(s,r){return e(s,(()=>s.requestUpdate())),t.proxy(s,r)}}(Ut||(Ut={}));class qt extends jt{attrs;constructor(t,e,s,r){super(t,e,s,r),this.attrs=zt(t)}}class Lt extends(function(t){return class extends t{#v=(new Set).add((()=>this.setup()));#b=new Set;register_setup(t){this.#v.add(t)}setup(){return()=>{}}connectedCallback(){for(const t of this.#v)this.#b.add(t())}disconnectedCallback(){for(const t of this.#b)t();this.#b.clear()}}}(HTMLElement)){}function Dt(){let t,e;return{promise:new Promise(((s,r)=>{t=s,e=r})),resolve:t,reject:e}}function Bt(t,e){o(t,function(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}(e))}class It extends Lt{static styles;#M;#P=Dt();#s=this.#P.promise;init(){}constructor(){super(),this.#M=this.attachShadow({mode:"open"});const t=this.constructor;Bt(this.#M,t.styles),this.init()}get root(){return this.#M}get updateComplete(){return this.#s.then((()=>!0))}#U=ct(0,(()=>{const t=this.#M,e=this.render();e&&it(e,t,{host:this})}));async requestUpdate(){const t=this.#U();return this.#P&&(t.then(this.#P.resolve),this.#P=void 0),this.#s=t,t}connectedCallback(){super.connectedCallback(),this.requestUpdate()}}function Vt(t,e,s){let r,n;return function(...i){let o;return n&&n(),n=t.flat.manual({debounce:!0,discover:!1,collector:()=>{o=function(...n){let i;return r&&r(),r=t.tower.track((()=>{i=e(...n)}),s),i}(...i)},responder:s}),o}}const Wt=t=>(e,s)=>class extends It{static name=e.name;static styles=[t.theme,e.styles??i``];#T=new qt(this,this.root,(()=>{this.requestUpdate()}),t);#N=Rt.wrap(this.#T,(()=>s(this.#T)));#O=Vt(t,this.#N,(()=>{this.requestUpdate()}));render(){return this.#O()}connectedCallback(){super.connectedCallback(),Rt.reconnect(this.#T)}disconnectedCallback(){super.disconnectedCallback(),Rt.disconnect(this.#T)}};class Zt extends Rt{#k;get element(){return this.#k}attrs;constructor(t,e,s){super(e,s),this.#k=t,this.attrs=zt(t)}}class Jt extends Lt{#P=Dt();#s=this.#P.promise;init(){}constructor(){super(),this.init()}get updateComplete(){return this.#s.then((()=>!0))}#U=ct(0,(()=>{const t=this.render();it(t,this,{host:this})}));async requestUpdate(){const t=this.#U();return this.#P&&(t.then(this.#P.resolve),this.#P=void 0),this.#s=t,t}connectedCallback(){super.connectedCallback(),this.requestUpdate()}}const Kt=t=>e=>class extends Jt{#T=new Zt(this,(()=>{this.requestUpdate()}),t);#N=Rt.wrap(this.#T,(()=>e(this.#T)));#O=Vt(t,this.#N,(()=>{this.requestUpdate()}));render(){return this.#O()}connectedCallback(){super.connectedCallback(),Rt.reconnect(this.#T)}disconnectedCallback(){super.disconnectedCallback(),Rt.disconnect(this.#T)}},Gt=2;class Qt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}const Ft=(t,e)=>{const s=t._$AN;if(void 0===s)return!1;for(const t of s)t._$AO?.(e,!1),Ft(t,e);return!0},Xt=t=>{let e,s;do{if(void 0===(e=t._$AM))break;s=e._$AN,s.delete(t),t=e}while(0===s?.size)},Yt=t=>{for(let e;e=t._$AM;t=e){let s=e._$AN;if(void 0===s)e._$AN=s=new Set;else if(s.has(t))break;s.add(t),se(e)}};function te(t){void 0!==this._$AN?(Xt(this),this._$AM=t,Yt(this)):this._$AM=t}function ee(t,e=!1,s=0){const r=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(e)if(Array.isArray(r))for(let t=s;t<r.length;t++)Ft(r[t],!1),Xt(r[t]);else null!=r&&(Ft(r,!1),Xt(r));else Ft(this,t)}const se=t=>{t.type==Gt&&(t._$AP??=ee,t._$AQ??=te)};class re extends Qt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,s){super._$AT(t,e,s),Yt(this),this.isConnected=t._$AU}_$AO(t,e=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),e&&(Ft(this,t),Xt(this))}setValue(t){if((t=>void 0===t.strings)(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}const ne=t=>e=>(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends re{#H;#w=ct(0,(()=>{this.#H&&this.setValue(this.render(...this.#H))}));#T=new Rt(this.#w,t);#N=Rt.wrap(this.#T,e(this.#T));#O=Vt(t,this.#N,this.#w);render(...t){return this.#H=t,this.#O(...t)}reconnected(){Rt.reconnect(this.#T)}disconnected(){Rt.disconnect(this.#T)}});var ie;function oe(t){return[t].flat().filter((t=>!!t))}!function(t){t.css=function(...t){return function(e){return class extends e{static styles=function(t,e){const s=[...oe(t)??[],...oe(e)];return s.flat().filter(ae)}(e.styles,t)}}},t.signals=function(t){return function(e){return class extends e{#R=[];connectedCallback(){super.connectedCallback(),this.#R.push(t.track((()=>this.render()),(()=>this.requestUpdate())))}disconnectedCallback(){super.disconnectedCallback();for(const t of this.#R)t();this.#R=[]}}}},t.flat=function(t){return function(e){return class extends e{#j=void 0;render(){let e;return this.#j&&this.#j(),this.#j=t.manual({debounce:!1,discover:!1,collector:()=>{e=super.render()},responder:()=>{this.requestUpdate()}}),e}disconnectedCallback(){super.disconnectedCallback(),this.#j&&this.#j(),this.#j=void 0}}}}}(ie||(ie={}));const ae=t=>void 0!==t;const ce=t=>{for(const[e,s]of Object.entries(t))customElements.define(e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase(),s)};class he extends HTMLElement{static tag="obsidian-view"}function le(...t){const e=new Set,s=t.map((t=>t??"")).flatMap(ue);for(const t of s)e.add(t);return e}function ue(t){return t.split(/\s+/).map((t=>t.trim())).filter((t=>!!t))}function de(t){return t.split(",").map((t=>t.trim())).filter((t=>!!t)).map((t=>t.includes(":")?t.split(":").map((t=>t.trim()))[1]:t))}function pe(t,e){const s=le(t.getAttribute("part")),r=le(t.getAttribute("data-gpart")),n=function(t,e){return Object.fromEntries(Object.entries(e).map((([e,s])=>[e,Array.from(t.querySelectorAll(`[${s}]`)).map((t=>t.getAttribute(s)))])))}(e,{part:"part",gpart:"data-gpart",exportparts:"exportparts",gexportparts:"gexportparts"}),i=new Set([...n.part.flatMap(ue),...n.exportparts.flatMap(de)]),o=new Set([...n.gpart.flatMap(ue),...n.gexportparts.flatMap(ue)]);i.size&&t.setAttribute("exportparts",[...s].flatMap(function(t,e){return s=>[...t].flatMap((t=>[`${t}:${s}-${t}`,...e.has(t)?[t]:[]]))}(i,o)).join(", ")),(o.size||t.hasAttribute("data-gpart"))&&t.setAttribute("gexportparts",[...o,...[...r].flatMap((t=>[...i].map((e=>`${t}-${e}`))))].join(" "))}function fe(t,e={},s={}){const{content:r,attrs:n={}}=e,{attrs:i={}}=s;function o(e,s,r,n){e!==s&&(void 0===e?t.removeAttribute(r):t.setAttribute(r,n()))}n&&function(t,e){for(const[s,r]of Object.entries(e))"string"==typeof r?t.setAttribute(s,r):"number"==typeof r?t.setAttribute(s,r.toString()):"boolean"==typeof r?!0===r?t.setAttribute(s,""):t.removeAttribute(s):void 0===r?t.removeAttribute(s):console.warn(`invalid attribute type ${s} is ${typeof r}`)}(t,n),o(n.class,i?.class,"class",(()=>n.class)),o(n.part,i?.part,"part",(()=>n.part)),o(n.gpart,i?.gpart,"data-gpart",(()=>n.gpart)),r&&it(r,t,{host:t})}ce({ObsidianView:he});const $e=t=>(e={},s)=>(t=>(e,s={})=>({_$litDirective$:t,values:[{meta:s,props:e}]}))(class extends re{#m;#M=function(t,e){const s=document.createElement(he.tag);s.setAttribute("view",t);const r=s.attachShadow({mode:"open"});Bt(r,e);let n=!1;return{container:s,shadow:r,set auto_exportparts(t){n=t},render_into_shadow:t=>(it(t,r),n&&pe(s,r),s)}}(e.name??"",[t.theme,e.styles??i``]);#w=ct(0,(()=>{this.#m&&this.setValue(this.#M.render_into_shadow(this.render(this.#m)))}));#T=new jt(this.#M.container,this.#M.shadow,this.#w,t);#N=Rt.wrap(this.#T,s(this.#T));#O=Vt(t,this.#N,this.#w);update(t,e){return this.#M.render_into_shadow(this.render(...e))}render(t){return fe(this.#M.container,t.meta,this.#m?.meta),this.#m=t,this.#M.auto_exportparts=t.meta.auto_exportparts??e.auto_exportparts??!0,this.#O(...t.props)}reconnected(){Rt.reconnect(this.#T)}disconnected(){Rt.disconnect(this.#T)}});const{oxygen:_e,carbon:ge,quartz:me,obsidian:ye,component:be}=(ve=new class extends Ot{theme=i`
+		button {
+			padding: 0.5em;
+			font-style: italic;
+		}
+	`},{oxygen:Kt(ve),carbon:Wt(ve),quartz:ne(ve),obsidian:$e(ve),component:t=>Ht.with(t(ve)).to(ie.css(ve.theme)).to(ie.flat(ve.flat)).to(ie.signals(ve.tower)).done()});var ve;const Ae=be((t=>class extends It{#z=t.flat.state({count:0});render(){return B`
+			<span>${this.#z.count}</span>
+			<button @click=${()=>this.#z.count++}>gold</button>
+		`}})),we=me((t=>e=>{const[s,r]=t.state(e),n=t.flatstate({count:e}),i=t.signal(e);return ut`
+		<span>${s}</span>
+		<button @click=${()=>r(3*s)}>quartz-a</button>
+
+		<span>${n.count}</span>
+		<button @click=${()=>n.count*=3}>quartz-b</button>
+
+		<span>${i}</span>
+		<button @click=${()=>i.value*=3}>quartz-c</button>
+	`})),Se=ye({name:"quadrupler",styles:i`span { color: yellow }`},(t=>e=>{const s=t.signal(e);return ut`
+		<span>${s}</span>
+		<button @click=${()=>s.value*=4}>obsidian</button>
+	`})),Ee=be((t=>class extends Jt{render(){return B`
+			${we(1)}
+			${Se([33])}
+		`}})),xe=()=>Math.ceil(1e3*Math.random()),ke=ge({styles:i`button { color: green }`},(t=>{const e=t.signal(xe);return ut`
+		<span>${e}</span>
+		<button @click=${()=>e.value=xe()}>carbon</button>
+	`}));ce({SlateCarbon:ke,SlateGold:Ae,SlateOxygen:_e((t=>{const e=t.signal(256);return ut`
+		<span>${e}</span>
+		<button @click=${()=>e.value-=8}>oxygen</button>
+	`})),SlateSilver:Ee});

x/main.js

@@ -1,3 +0,12 @@
-"use strict";
-console.log("slate");
+import { SlateGold } from "./demo/elements/slate-gold.js";
+import { SlateSilver } from "./demo/elements/slate-silver.js";
+import { SlateCarbon } from "./demo/elements/slate-carbon.js";
+import { SlateOxygen } from "./demo/elements/slate-oxygen.js";
+import { register_to_dom } from "./base/helpers/register_to_dom.js";
+register_to_dom({
+    SlateCarbon,
+    SlateGold,
+    SlateOxygen,
+    SlateSilver,
+});
 //# sourceMappingURL=main.js.map

x/op/op.d.ts

 export declare namespace Op {
-    export type Mode = "loading" | "error" | "ready";
-    export type Loading = {
+    type Mode = "loading" | "error" | "ready";
+    type Loading = {
         mode: "loading";
     };
-    export type Error = {
+    type Error = {
         mode: "error";
         reason: string;
     };
-    export type Ready<X> = {
+    type Ready<X> = {
         mode: "ready";
         payload: X;
     };
-    export type For<X> = Loading | Error | Ready<X>;
-    export type Setter<X> = (op: For<X>) => void;
-    export const loading: () => Loading;
-    export const error: (reason: string) => Error;
-    export const ready: <X>(payload: X) => Ready<X>;
-    export const is: Readonly<{
+    type For<X> = Loading | Error | Ready<X>;
+    type Setter<X> = (op: For<X>) => void;
+    const loading: <X>() => For<X>;
+    const error: <X>(reason: string) => For<X>;
+    const ready: <X>(payload: X) => For<X>;
+    const is: Readonly<{
         loading: (op: For<any>) => boolean;
@@ -24,3 +24,3 @@ error: (op: For<any>) => boolean;
     }>;
-    export function payload<X>(op: For<X>): X | undefined;
+    function payload<X>(op: For<X>): X | undefined;
     type Choices<X, R> = {
@@ -31,6 +31,5 @@ loading: () => R;
     };
-    export function select<X, R>(op: For<X>, choices: Choices<X, R>): R;
-    export function run<X>(set_op: Setter<X>, fun: () => Promise<X>): Promise<X | undefined>;
-    export function morph<A, B>(op: For<A>, transmute: (a: A) => B): For<B>;
-    export {};
+    function select<X, R>(op: For<X>, choices: Choices<X, R>): R;
+    function run<X>(set_op: Setter<X>, operation: () => Promise<X>): Promise<X | undefined>;
+    function morph<A, B>(op: For<A>, transmute: (a: A) => B): For<B>;
 }

x/op/op.js

@@ -32,6 +32,6 @@ const JsError = Error;
     Op.select = select;
-    async function run(set_op, fun) {
+    async function run(set_op, operation) {
         set_op(Op.loading());
         try {
-            const payload = await fun();
+            const payload = await operation();
             set_op(Op.ready(payload));
@@ -38,0 +38,0 @@ return payload;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

665559

increased by187.55%

Number of package files

322

increased by32.51%

Lines of code

10800

increased by132.86%

Number of lines in readme file

530

increased by225.15%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes