@benev/web 0.1.4 → 0.2.0

package/README.md

@@ -40,23 +40,25 @@ sdk toolkit for making an official benev website.
     ```
 1. **typescript: install custom elements**
     ```ts
-    import {dom} from "@e280/sly"
+    import {register} from "@e280/sly"
     import {setupBenev} from "@benev/web"
 
     const benev = await setupBenev()
-    dom.register(benev.elements)
+    register(benev.elements)
     ```
     - menu (the benev overlay menu)
         ```html
         <benev-menu></benev-menu>
         ```
         - you can control the menu via `benev.shell`, eg, `benev.shell.toggle()`
+        - sly view also available as `BenevMenu`.
     - header (standard header with `b` button that opens menu)
         ```html
         <benev-header>
           <a href="https://benev.gg/">benev.gg</a>
         </benev-header>
         ```
+        - sly view also available as `BenevHeader`.
     - loader (loading screens)
         ```html
         <benev-loader>
@@ -64,4 +66,5 @@ sdk toolkit for making an official benev website.
         </benev-loader>
         ```
         - you control it by creating a `new Loader(dom("benev-loader"))`
+        - sly view also available as `BenevLoader`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@benev/web",
-	"version": "0.1.4",
+	"version": "0.2.0",
 	"description": "✨ benev web sdk",
 	"license": "MIT",
 	"type": "module",
@@ -23,15 +23,15 @@
 		"esbuild@0.28.2": true
 	},
 	"peerDependencies": {
-		"@e280/sly": "^0.4.8",
-		"@e280/strata": "^0.5.1",
+		"@e280/sly": "^0.4.14",
+		"@e280/strata": "^0.5.7",
 		"lit": "^3.3.3"
 	},
 	"dependencies": {
 		"@e280/authlocal": "^0.3.10",
-		"@e280/kv": "^0.2.5",
+		"@e280/kv": "^0.2.6",
 		"@e280/renraku": "0.6.0-12",
-		"@e280/stz": "^0.4.14"
+		"@e280/stz": "^0.4.16"
 	},
 	"devDependencies": {
 		"@e280/hottie": "^0.1.7",

package/s/css/parts/common.csstext.ts

@@ -24,7 +24,10 @@ button, [benev-button] {
 		opacity: 0.3;
 	}
 
-	&:not([disabled]) {
+	&:is(
+			:not([disabled], [benev-button~="naked"]),
+			[benev-button~="animated"]
+		) {
 		cursor: pointer;
 		transform: scale(100%);
 		transition: all var(--benev-anim) ease;
@@ -32,7 +35,7 @@ button, [benev-button] {
 		&:active { transform: scale(100%); filter: brightness(100%); }
 	}
 
-	&[benev-button="naked"] {
+	&[benev-button~="naked"] {
 		color: inherit;
 		background: transparent;
 		backdrop-filter: none;
@@ -45,7 +48,7 @@ button, [benev-button] {
 		text-transform: inherit;
 	}
 
-	&[benev-button="juicy"] {
+	&[benev-button~="juicy"] {
 		opacity: 1;
 		color: black;
 		border: var(--benev-thick) solid var(--benev-prime);

package/s/css/parts/vars.csstext.ts

@@ -17,6 +17,7 @@ export default css`
 --benev-link: aqua;
 --benev-b-size: 1.5em;
 --benev-code: #0f0;
+--benev-menu-height: 42em;
 
 --benev-angry: #f40;
 --benev-select-bg: #f60;
@@ -27,6 +28,7 @@ export default css`
 --benev-thick: 3px;
 --benev-border: var(--benev-thin) solid color-mix(in oklch, transparent, var(--benev-line) 50%);
 
+--benev-nib: 0.2em;
 --benev-pad: 0.5em;
 --benev-space: 1em;
 --benev-anim: ${bconfig.anim}ms;

package/s/dom/duplexes/account/view.ts

@@ -0,0 +1,18 @@
+
+import {html} from "lit"
+import {Widget} from "@e280/authlocal"
+import {shadowDuplex, useCss} from "@e280/sly"
+
+import {Account} from "./account.js"
+import styleCss from "./style.css.js"
+import {themeCss} from "../../../css/theme.css.js"
+
+export const [BenevAccount, makeBenevAccountElement] = shadowDuplex((account: Account) => {
+	useCss(themeCss, styleCss)
+
+	return Widget.with({
+		props: [account.auth],
+		children: html`sign in`,
+	})
+})
+

package/s/dom/duplexes/footer/view.ts

@@ -0,0 +1,13 @@
+
+import {html} from "lit"
+import {shadowDuplex, useCss, useName} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import {themeCss} from "../../../css/theme.css.js"
+
+export const [BenevFooter, makeBenevFooterElement] = shadowDuplex(() => {
+	useName("benev-footer")
+	useCss(themeCss, styleCss)
+	return html`<slot></slot>`
+})
+

package/s/dom/duplexes/header/view.ts

@@ -0,0 +1,25 @@
+
+import {html} from "lit"
+import {shadowDuplex, useCss, useName} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import {Shell} from "../../../vitals/shell.js"
+import {bDataPng} from "../../../assets/b.png.js"
+import {themeCss} from "../../../css/theme.css.js"
+
+export const [BenevHeader, makeBenevHeaderElement] = shadowDuplex((shell: Shell) => {
+	useName("benev-header")
+	useCss(themeCss, styleCss)
+
+	const click = () => shell.toggle()
+
+	return html`
+		<nav part=nav ?data-opened=${shell.open} ?data-closed=${!shell.open}>
+			<button benev-button="naked animated" title="b menu" @click=${click}>
+				<img part=img src="${bDataPng}" alt=""/>
+			</button>
+			<slot></slot>
+		</nav>
+	`
+})
+

package/s/dom/{loader → duplexes/loader}/loader.ts

@@ -2,7 +2,7 @@
 import {html} from "lit"
 import {Content, dom} from "@e280/sly"
 import {errorString, nap} from "@e280/stz"
-import {bconfig} from "../../bconfig.js"
+import {bconfig} from "../../../bconfig.js"
 
 export class Loader {
 	original

package/s/dom/{loader → duplexes/loader}/view.ts

@@ -1,12 +1,13 @@
 
 import {html} from "lit"
-import {shadowElement, useCss} from "@e280/sly"
+import {shadowDuplex, useCss, useName} from "@e280/sly"
 
 import styleCss from "./style.css.js"
-import {themeCss} from "../../css/theme.css.js"
-import {bDataPng} from "../../assets/b.png.js"
+import {themeCss} from "../../../css/theme.css.js"
+import {bDataPng} from "../../../assets/b.png.js"
 
-export const BenevLoader = shadowElement(() => {
+export const [BenevLoader, makeBenevLoaderElement] = shadowDuplex(() => {
+	useName("benev-loader")
 	useCss(themeCss, styleCss)
 
 	return html`

package/s/dom/{menu → duplexes/menu}/style.css.ts

@@ -27,13 +27,17 @@ dialog > section:focus {
 }
 
 dialog > section {
-	--theight: min(20em, calc(100dvh - var(--benev-headroom)));
+	overflow: clip;
+
 	width: 100%;
-	height: var(--theight);
+	height: min(
+		var(--benev-menu-height),
+		calc(100dvh - var(--benev-headroom))
+	);
 
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
+	justify-content: start;
 	align-items: center;
 
 	background: linear-gradient(

package/s/dom/{menu → duplexes/menu}/utils/on-keypress.ts

@@ -4,14 +4,18 @@ import {ev} from "@e280/stz"
 export function onKeypress(keys: string[], fn: () => void) {
 	return () => ev(window, {
 		keydown: (event: KeyboardEvent) => {
-			const target = event.target as HTMLElement
-			const typing = (
-				target instanceof HTMLInputElement ||
-				target instanceof HTMLTextAreaElement ||
-				target.isContentEditable
+			const typing = event.composedPath().some(node =>
+				node instanceof HTMLElement && (
+					node instanceof HTMLInputElement ||
+					node instanceof HTMLTextAreaElement ||
+					node instanceof HTMLSelectElement ||
+					node.isContentEditable
+				)
 			)
+
 			if (typing)
 				return
+
 			if (keys.includes(event.code)) {
 				event.preventDefault()
 				fn()

package/s/dom/{menu → duplexes/menu}/view.ts

@@ -1,15 +1,16 @@
 
 import {html} from "lit"
-import {dom, shadowElement, useCss, useMount} from "@e280/sly"
+import {dom, shadowDuplex, useCss, useMount, useName} from "@e280/sly"
 import styleCss from "./style.css.js"
-import {Shell} from "../../vitals/shell.js"
-import {HeaderView} from "../header/view.js"
-import {themeCss} from "../../css/theme.css.js"
+import {Shell} from "../../../vitals/shell.js"
+import {BenevHeader} from "../header/view.js"
+import {themeCss} from "../../../css/theme.css.js"
 import {onKeypress} from "./utils/on-keypress.js"
 import {clickBackdrop} from "./utils/click-backdrop.js"
 import {useAfterFirstRender} from "./utils/use-after-first-render.js"
 
-export const makeBenevMenu = (shell: Shell) => shadowElement(() => {
+export const [BenevMenu, makeBenevMenuElement] = shadowDuplex((shell: Shell) => {
+	useName("benev-menu")
 	useCss(themeCss, styleCss)
 	useAfterFirstRender(shadow => shell.attach(dom("dialog", shadow)))
 	useMount(onKeypress(["KeyB", "Escape"], () => shell.toggle()))
@@ -25,7 +26,7 @@ export const makeBenevMenu = (shell: Shell) => shadowElement(() => {
 					: null}
 			</section>
 
-			${HeaderView(shell)}
+			${BenevHeader(shell)}
 		</dialog>
 	`
 })

package/s/dom/views/dashboard/style.css.ts

@@ -0,0 +1,49 @@
+
+import {css} from "lit"
+export default css`@layer benev.view {
+
+:host {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+}
+
+:host > header {
+	display: flex;
+
+	> nav {
+		user-select: none;
+		flex: 1 1 auto;
+		display: flex;
+		border-bottom: var(--benev-border);
+		overflow-x: auto;
+
+		button {
+			cursor: pointer;
+			padding: var(--benev-nib) var(--benev-space);
+			border-bottom: var(--benev-thick) solid transparent;
+
+			&:is(:hover, :focus-visible) {
+				background: color-mix(in oklch, transparent, var(--benev-prime) 10%);
+			}
+
+			&[data-active] {
+				color: var(--benev-prime);
+				background: color-mix(in oklch, transparent, var(--benev-prime) 20%);
+				border-bottom-color: var(--benev-prime);
+				text-shadow: 0 0 0.5em var(--benev-prime);
+			}
+		}
+	}
+}
+
+:host > section {
+	flex: 1 1 auto;
+	overflow: auto;
+	scrollbar-gutter: stable;
+}
+
+}`
+

package/s/dom/views/dashboard/view.ts

@@ -0,0 +1,55 @@
+
+import {html} from "lit"
+import {got} from "@e280/stz"
+import {Content, shadowView, useCss, useName, useSignal} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {themeCss} from "../../../css/theme.css.js"
+import {Account} from "../../duplexes/account/account.js"
+import {BenevAccount} from "../../duplexes/account/view.js"
+
+export type Dashpanels = Record<string, {
+	label: () => Content
+	render: () => Content
+}>
+
+export const BenevDashboard = shadowView(({account, panels}: {
+		account: Account
+		panels: Dashpanels
+	}) => {
+
+	useName("benev-dashboard")
+	useCss(themeCss, styleCss)
+
+	const $activeKey = useSignal<keyof typeof panels>(got(Object.keys(panels).at(0)))
+
+	const activeKey = Object.hasOwn(panels, $activeKey())
+		? $activeKey()
+		: got(Object.keys(panels).at(0))
+
+	const activePanel = panels[activeKey]
+
+	return html`
+		<header part=header>
+			<nav part=nav role=tablist>
+				${Object.entries(panels).map(([key, panel]) => html`
+					<button
+						part=button
+						role=tab
+						benev-button=naked
+						?data-active="${key === activeKey}"
+						aria-selected="${key === activeKey}"
+						@click="${() => $activeKey(key)}">
+							${panel.label()}
+					</button>
+				`)}
+			</nav>
+
+			${BenevAccount(account)}
+		</header>
+
+		<section part=panel class=panel role=tabpanel>
+			${activePanel?.render()}
+		</section>
+	`
+})
+

package/s/index.html.ts

@@ -28,9 +28,7 @@ export default template(import.meta.url, async orb => html`
 			})}
 		</head>
 		<body>
-			<benev-menu>
-				<benev-account></benev-account>
-			</benev-menu>
+			<benev-menu></benev-menu>
 
 			<benev-header>
 				${benevNav("games")}

package/s/index.ts

@@ -5,10 +5,15 @@ export * from "./vitals/setup.js"
 export * from "./css/benev.csstext.js"
 export * from "./css/theme.css.js"
 
-export * from "./dom/header/view.js"
-export * from "./dom/loader/view.js"
-export * from "./dom/loader/loader.js"
-export * from "./dom/menu/view.js"
+export * from "./dom/duplexes/account/account.js"
+export * from "./dom/duplexes/account/view.js"
+export * from "./dom/duplexes/footer/view.js"
+export * from "./dom/duplexes/header/view.js"
+export * from "./dom/duplexes/loader/view.js"
+export * from "./dom/duplexes/loader/loader.js"
+export * from "./dom/duplexes/menu/view.js"
+
+export * from "./dom/views/dashboard/view.js"
 
 export * from "./bconfig.js"
 export * from "./types.js"

package/s/main.bundle.ts

@@ -1,12 +1,16 @@
 
 import {html} from "lit"
-import {dom} from "@e280/sly"
 import {nap} from "@e280/stz"
+import {dom, register, renderIn} from "@e280/sly"
+
 import {setupBenev} from "./vitals/setup.js"
-import {Loader} from "./dom/loader/loader.js"
+import {Loader} from "./dom/duplexes/loader/loader.js"
+import {BenevDashboard} from "./dom/views/dashboard/view.js"
+
+const benev = await setupBenev()
+register(benev.elements)
 
-const {elements} = await setupBenev()
-dom.register(elements)
+// benev.shell.onAttach.next().then(() => benev.shell.toggle(true))
 
 const loader = new Loader(dom("benev-loader"))
 
@@ -17,3 +21,21 @@ dom(".testloader").onclick = async() => {
 	)
 }
 
+renderIn(dom("benev-menu"), BenevDashboard({
+	account: benev.account,
+	panels: {
+		alpha: {
+			label: () => "alpha",
+			render: () => html`
+				<p style="padding: 1em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante orci, sagittis et nisi vel, rhoncus ultricies neque. Maecenas quis magna condimentum, molestie nulla vel, malesuada ante. Donec dui tortor, porta id sollicitudin vitae, sollicitudin non purus. Quisque dignissim purus eget odio placerat lacinia. Vivamus feugiat metus et est venenatis, at ornare magna bibendum. Curabitur elementum pretium magna, non venenatis ligula pharetra sed. Morbi ante lacus, rhoncus sit amet justo sed, facilisis blandit dolor. In sed arcu nec ligula condimentum porttitor eu eleifend risus. Mauris pharetra elit nec felis venenatis aliquet. Nullam vitae efficitur tortor. Curabitur euismod urna sodales, blandit eros vel, cursus urna. Vivamus lacus diam, imperdiet mollis placerat vitae, volutpat in nibh.</p>
+			`,
+		},
+		bravo: {
+			label: () => "bravo",
+			render: () => html`
+				<p style="padding: 1em;">Nulla at augue dignissim, fermentum leo eu, varius tortor. Suspendisse ullamcorper, orci ornare dictum tincidunt, dui velit tincidunt lectus, quis malesuada ante nunc sed metus. Integer accumsan auctor commodo. Maecenas suscipit pharetra felis, at rutrum dolor pretium non. Curabitur nisl felis, euismod eget porttitor dapibus, accumsan eu neque. Quisque convallis mi quis ex dignissim porttitor. Quisque interdum odio tellus, sed sagittis massa commodo at. Donec eget orci finibus mauris dapibus fermentum eget eget diam. Quisque eget tristique justo. Proin vitae dapibus nunc. Maecenas at augue diam. Duis ut aliquet tellus, id aliquet risus. Suspendisse condimentum, mi vel efficitur consequat, erat nisi elementum massa, id hendrerit arcu est quis eros. Nullam non eros magna. Aenean at suscipit sem.</p>
+			`,
+		},
+	},
+}))
+

package/s/vitals/setup.ts

@@ -1,29 +1,29 @@
 
-import {Auth, makeAuthWidget} from "@e280/authlocal"
+import {Auth} from "@e280/authlocal"
 import {Shell} from "./shell.js"
-import {Account} from "../dom/account/account.js"
-import {BenevLoader} from "../dom/loader/view.js"
-import {makeBenevMenu} from "../dom/menu/view.js"
-import {makeBenevFooter} from "../dom/footer/view.js"
-import {makeBenevHeader} from "../dom/header/view.js"
-import {makeBenevAccount} from "../dom/account/view.js"
+import {Account} from "../dom/duplexes/account/account.js"
+import {makeBenevMenuElement} from "../dom/duplexes/menu/view.js"
+import {makeBenevLoaderElement} from "../dom/duplexes/loader/view.js"
+import {makeBenevFooterElement} from "../dom/duplexes/footer/view.js"
+import {makeBenevHeaderElement} from "../dom/duplexes/header/view.js"
+import {makeBenevAccountElement} from "../dom/duplexes/account/view.js"
+
+export type Benev = Awaited<ReturnType<typeof setupBenev>>
 
 export async function setupBenev() {
 	const shell = new Shell()
-	const auth = new Auth()
-	const account = new Account(auth)
+	const account = new Account(new Auth())
 
 	const elements = {
-		BenevLoader,
-		BenevFooter: makeBenevFooter(),
-		BenevMenu: makeBenevMenu(shell),
-		BenevHeader: makeBenevHeader(shell),
-		BenevAccount: makeBenevAccount(account),
-		BenevAuth: makeAuthWidget(account.auth),
+		BenevLoader: makeBenevLoaderElement(),
+		BenevFooter: makeBenevFooterElement(),
+		BenevMenu: makeBenevMenuElement(shell),
+		BenevHeader: makeBenevHeaderElement(shell),
+		BenevAccount: makeBenevAccountElement(account),
 	}
 
-	await auth.remember()
+	await account.auth.remember()
 
-	return {account, shell, elements}
+	return {shell, account, elements}
 }
 

package/s/vitals/shell.ts

@@ -1,9 +1,10 @@
 
-import {got, nap} from "@e280/stz"
+import {got, nap, subby} from "@e280/stz"
 import {tracker} from "@e280/strata"
 import {bconfig} from "../bconfig.js"
 
 export class Shell {
+	onAttach = subby()
 	#dialog?: HTMLDialogElement
 	#closeToken = 0
 
@@ -24,6 +25,7 @@ export class Shell {
 			event.preventDefault()
 			this.toggle(false)
 		}
+		this.onAttach.publish()
 	}
 
 	toggle = (please = !this.open) => {

package/x/css/parts/common.csstext.js

@@ -23,7 +23,10 @@ button, [benev-button] {
 		opacity: 0.3;
 	}
 
-	&:not([disabled]) {
+	&:is(
+			:not([disabled], [benev-button~="naked"]),
+			[benev-button~="animated"]
+		) {
 		cursor: pointer;
 		transform: scale(100%);
 		transition: all var(--benev-anim) ease;
@@ -31,7 +34,7 @@ button, [benev-button] {
 		&:active { transform: scale(100%); filter: brightness(100%); }
 	}
 
-	&[benev-button="naked"] {
+	&[benev-button~="naked"] {
 		color: inherit;
 		background: transparent;
 		backdrop-filter: none;
@@ -44,7 +47,7 @@ button, [benev-button] {
 		text-transform: inherit;
 	}
 
-	&[benev-button="juicy"] {
+	&[benev-button~="juicy"] {
 		opacity: 1;
 		color: black;
 		border: var(--benev-thick) solid var(--benev-prime);

package/x/css/parts/common.csstext.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.csstext.js","sourceRoot":"","sources":["../../../s/css/parts/common.csstext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NjB,CAAA"}
+{"version":3,"file":"common.csstext.js","sourceRoot":"","sources":["../../../s/css/parts/common.csstext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NjB,CAAA"}

package/x/css/parts/vars.csstext.js

@@ -16,6 +16,7 @@ export default css `
 --benev-link: aqua;
 --benev-b-size: 1.5em;
 --benev-code: #0f0;
+--benev-menu-height: 42em;
 
 --benev-angry: #f40;
 --benev-select-bg: #f60;
@@ -26,6 +27,7 @@ export default css `
 --benev-thick: 3px;
 --benev-border: var(--benev-thin) solid color-mix(in oklch, transparent, var(--benev-line) 50%);
 
+--benev-nib: 0.2em;
 --benev-pad: 0.5em;
 --benev-space: 1em;
 --benev-anim: ${bconfig.anim}ms;

package/x/css/parts/vars.csstext.js.map

@@ -1 +1 @@
-{"version":3,"file":"vars.csstext.js","sourceRoot":"","sources":["../../../s/css/parts/vars.csstext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,OAAO,EAAC,OAAO,EAAC,MAAM,kBAAkB,CAAA;AACxC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4BF,OAAO,CAAC,IAAI;;;;;;;;CAQ3B,CAAA"}
+{"version":3,"file":"vars.csstext.js","sourceRoot":"","sources":["../../../s/css/parts/vars.csstext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,OAAO,EAAC,OAAO,EAAC,MAAM,kBAAkB,CAAA;AACxC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA8BF,OAAO,CAAC,IAAI;;;;;;;;CAQ3B,CAAA"}

package/x/dom/duplexes/account/account.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/account/account.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,OAAO;IACA,IAAI;IAAvB,YAAmB,IAAU;oBAAV,IAAI;IAAS,CAAC;CACjC"}

package/x/dom/duplexes/account/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/account/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;EAEhB,CAAA"}

package/x/dom/duplexes/account/view.d.ts

@@ -0,0 +1,2 @@
+import { Account } from "./account.js";
+export declare const BenevAccount: import("@e280/sly").ShadowView<[account: Account]>, makeBenevAccountElement: (account: Account) => new () => HTMLElement;

package/x/dom/duplexes/account/view.js

@@ -0,0 +1,13 @@
+import { html } from "lit";
+import { Widget } from "@e280/authlocal";
+import { shadowDuplex, useCss } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { themeCss } from "../../../css/theme.css.js";
+export const [BenevAccount, makeBenevAccountElement] = shadowDuplex((account) => {
+    useCss(themeCss, styleCss);
+    return Widget.with({
+        props: [account.auth],
+        children: html `sign in`,
+    });
+});
+//# sourceMappingURL=view.js.map

package/x/dom/duplexes/account/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/account/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAA;AACtC,OAAO,EAAC,YAAY,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAG9C,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,uBAAuB,CAAC,GAAG,YAAY,CAAC,CAAC,OAAgB,EAAE,EAAE;IACxF,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,OAAO,MAAM,CAAC,IAAI,CAAC;QAClB,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAA,SAAS;KACvB,CAAC,CAAA;AACH,CAAC,CAAC,CAAA"}

package/x/dom/duplexes/footer/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/footer/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;EAEhB,CAAA"}

package/x/dom/duplexes/footer/view.d.ts

@@ -0,0 +1 @@
+export declare const BenevFooter: import("@e280/sly").ShadowView<[]>, makeBenevFooterElement: () => new () => HTMLElement;

package/x/dom/duplexes/footer/view.js

@@ -0,0 +1,10 @@
+import { html } from "lit";
+import { shadowDuplex, useCss, useName } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { themeCss } from "../../../css/theme.css.js";
+export const [BenevFooter, makeBenevFooterElement] = shadowDuplex(() => {
+    useName("benev-footer");
+    useCss(themeCss, styleCss);
+    return html `<slot></slot>`;
+});
+//# sourceMappingURL=view.js.map

package/x/dom/duplexes/footer/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/footer/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,YAAY,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEvD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,sBAAsB,CAAC,GAAG,YAAY,CAAC,GAAG,EAAE;IACtE,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1B,OAAO,IAAI,CAAA,eAAe,CAAA;AAC3B,CAAC,CAAC,CAAA"}

package/x/dom/duplexes/header/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/header/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoChB,CAAA"}

package/x/dom/duplexes/header/view.d.ts

@@ -0,0 +1,2 @@
+import { Shell } from "../../../vitals/shell.js";
+export declare const BenevHeader: import("@e280/sly").ShadowView<[shell: Shell]>, makeBenevHeaderElement: (shell: Shell) => new () => HTMLElement;