@benev/web 0.1.3 → 0.2.0

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;

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

@@ -0,0 +1,19 @@
+import { html } from "lit";
+import { shadowDuplex, useCss, useName } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { bDataPng } from "../../../assets/b.png.js";
+import { themeCss } from "../../../css/theme.css.js";
+export const [BenevHeader, makeBenevHeaderElement] = shadowDuplex((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>
+	`;
+});
+//# sourceMappingURL=view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/header/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;AAErC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,sBAAsB,CAAC,GAAG,YAAY,CAAC,CAAC,KAAY,EAAE,EAAE;IAClF,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;IAElC,OAAO,IAAI,CAAA;+BACmB,KAAK,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI;iEACJ,KAAK;yBAC7C,QAAQ;;;;EAI/B,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/{loader → duplexes/loader}/loader.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { dom } from "@e280/sly";
 import { errorString, nap } from "@e280/stz";
-import { bconfig } from "../../bconfig.js";
+import { bconfig } from "../../../bconfig.js";
 export class Loader {
     element;
     anim;

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { html } from "lit";
+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";
+export const [BenevLoader, makeBenevLoaderElement] = shadowDuplex(() => {
+    useName("benev-loader");
+    useCss(themeCss, styleCss);
+    return html `
+		<slot></slot>
+
+		<div class=veil>
+			<div class=scalar>
+				<img class=logo src="${bDataPng}" alt="" draggable="false"/>
+				<slot name=loading></slot>
+			</div>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/loader/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;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,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;IAE1B,OAAO,IAAI,CAAA;;;;;2BAKe,QAAQ;;;;EAIjC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/{menu → duplexes/menu}/style.css.js

@@ -26,13 +26,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/x/dom/duplexes/menu/style.css.js.map

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

package/x/dom/duplexes/menu/utils/click-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-backdrop.js","sourceRoot":"","sources":["../../../../../s/dom/duplexes/menu/utils/click-backdrop.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,aAAa,CAAC,EAA0B;IACvD,OAAO,CAAC,KAAY,EAAE,EAAE;QACvB,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa;YACvC,EAAE,CAAC,KAAK,CAAC,CAAA;IACX,CAAC,CAAA;AACF,CAAC"}

package/x/dom/{menu → duplexes/menu}/utils/on-keypress.js

@@ -2,10 +2,10 @@ import { ev } from "@e280/stz";
 export function onKeypress(keys, fn) {
     return () => ev(window, {
         keydown: (event) => {
-            const target = event.target;
-            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)) {

package/x/dom/duplexes/menu/utils/on-keypress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-keypress.js","sourceRoot":"","sources":["../../../../../s/dom/duplexes/menu/utils/on-keypress.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAC,MAAM,WAAW,CAAA;AAE5B,MAAM,UAAU,UAAU,CAAC,IAAc,EAAE,EAAc;IACxD,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE;QACvB,OAAO,EAAE,CAAC,KAAoB,EAAE,EAAE;YACjC,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC/C,IAAI,YAAY,WAAW,IAAI,CAC9B,IAAI,YAAY,gBAAgB;gBAChC,IAAI,YAAY,mBAAmB;gBACnC,IAAI,YAAY,iBAAiB;gBACjC,IAAI,CAAC,iBAAiB,CACtB,CACD,CAAA;YAED,IAAI,MAAM;gBACT,OAAM;YAEP,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,EAAE,EAAE,CAAA;YACL,CAAC;QACF,CAAC;KACD,CAAC,CAAA;AACH,CAAC"}

package/x/dom/duplexes/menu/utils/use-after-first-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-after-first-render.js","sourceRoot":"","sources":["../../../../../s/dom/duplexes/menu/utils/use-after-first-render.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEzD,MAAM,UAAU,mBAAmB,CAAC,EAAgC;IACnE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAC/C,CAAC"}

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

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

package/x/dom/{menu → duplexes/menu}/view.js

@@ -1,12 +1,13 @@
 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 { HeaderView } from "../header/view.js";
-import { themeCss } from "../../css/theme.css.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) => shadowElement(() => {
+export const [BenevMenu, makeBenevMenuElement] = shadowDuplex((shell) => {
+    useName("benev-menu");
     useCss(themeCss, styleCss);
     useAfterFirstRender(shadow => shell.attach(dom("dialog", shadow)));
     useMount(onKeypress(["KeyB", "Escape"], () => shell.toggle()));
@@ -20,7 +21,7 @@ export const makeBenevMenu = (shell) => shadowElement(() => {
         : null}
 			</section>
 
-			${HeaderView(shell)}
+			${BenevHeader(shell)}
 		</dialog>
 	`;
 });

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/dom/duplexes/menu/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AACtE,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAErC,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAA;AAErE,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,oBAAoB,CAAC,GAAG,YAAY,CAAC,CAAC,KAAY,EAAE,EAAE;IAC9E,OAAO,CAAC,YAAY,CAAC,CAAA;IACrB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1B,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;IAClE,QAAQ,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE9D,MAAM,KAAK,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;IACtD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA,eAAe,CAAA;IAEnD,OAAO,IAAI,CAAA;mBACO,KAAK;;MAElB,KAAK,CAAC,MAAM,EAAE,IAAI;QACnB,CAAC,CAAC,iBAAiB,EAAE;QACrB,CAAC,CAAC,IAAI;;;KAGN,WAAW,CAAC,KAAK,CAAC;;EAErB,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/views/dashboard/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/x/dom/views/dashboard/style.css.js

@@ -0,0 +1,48 @@
+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;
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

package/x/dom/views/dashboard/style.css.js.map

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

package/x/dom/views/dashboard/view.d.ts

@@ -0,0 +1,10 @@
+import { Content } from "@e280/sly";
+import { Account } from "../../duplexes/account/account.js";
+export type Dashpanels = Record<string, {
+    label: () => Content;
+    render: () => Content;
+}>;
+export declare const BenevDashboard: import("@e280/sly").ShadowView<[{
+    account: Account;
+    panels: Dashpanels;
+}]>;

package/x/dom/views/dashboard/view.js

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { got } from "@e280/stz";
+import { shadowView, useCss, useName, useSignal } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { themeCss } from "../../../css/theme.css.js";
+import { BenevAccount } from "../../duplexes/account/view.js";
+export const BenevDashboard = shadowView(({ account, panels }) => {
+    useName("benev-dashboard");
+    useCss(themeCss, styleCss);
+    const $activeKey = useSignal(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>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/dom/views/dashboard/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/dom/views/dashboard/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAU,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AACzE,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAA;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAA;AAO3D,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,EAAC,OAAO,EAAE,MAAM,EAGxD,EAAE,EAAE;IAEL,OAAO,CAAC,iBAAiB,CAAC,CAAA;IAC1B,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,UAAU,GAAG,SAAS,CAAsB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAEjF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC;QACpD,CAAC,CAAC,UAAU,EAAE;QACd,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAEjC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;IAErC,OAAO,IAAI,CAAA;;;MAGN,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;sBAKjC,GAAG,KAAK,SAAS;uBAChB,GAAG,KAAK,SAAS;gBACxB,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC;SAC5B,KAAK,CAAC,KAAK,EAAE;;KAEjB,CAAC;;;KAGD,YAAY,CAAC,OAAO,CAAC;;;;KAIrB,WAAW,EAAE,MAAM,EAAE;;EAExB,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/index.d.ts

@@ -2,9 +2,13 @@ export * from "./vitals/shell.js";
 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/x/index.html

@@ -7,7 +7,7 @@
 
 		<title>@benev/web</title>
 		<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>😇</text></svg>"/>
-		<script type="module" src="main.bundle.min.js?v=dc6b33ccc1d7"></script>
+		<script type="module" src="main.bundle.min.js?v=e1e2538a2afc"></script>
 		<style>
 			@layer benev, demo;
 
@@ -36,6 +36,7 @@ benev.page;
 --benev-link: aqua;
 --benev-b-size: 1.5em;
 --benev-code: #0f0;
+--benev-menu-height: 42em;
 
 --benev-angry: #f40;
 --benev-select-bg: #f60;
@@ -46,6 +47,7 @@ benev.page;
 --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: 300ms;
@@ -144,7 +146,10 @@ border-radius: var(--benev-round);
 	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;
@@ -152,7 +157,7 @@ border-radius: var(--benev-round);
 	&:active { transform: scale(100%); filter: brightness(100%); }
 }
 
-&[benev-button="naked"] {
+&[benev-button~="naked"] {
 	color: inherit;
 	background: transparent;
 	backdrop-filter: none;
@@ -165,7 +170,7 @@ border-radius: var(--benev-round);
 	text-transform: inherit;
 }
 
-&[benev-button="juicy"] {
+&[benev-button~="juicy"] {
 	opacity: 1;
 	color: black;
 	border: var(--benev-thick) solid var(--benev-prime);
@@ -402,9 +407,7 @@ main {
 
 	</head>
 	<body>
-		<benev-menu>
-			<benev-account></benev-account>
-		</benev-menu>
+		<benev-menu></benev-menu>
 
 		<benev-header>
 

package/x/index.html.js

@@ -26,9 +26,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/x/index.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,aAAa,CAAA;AACpE,OAAO,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAA;AAEnD,eAAe,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,IAAI,CAAA;;;;;;;;;4BAS9B,YAAY,CAAC,IAAI,CAAC;gCACd,GAAG,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;MAG3D,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC;MACtB,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC;;;KAG3B,UAAU,CAAC;IACZ,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,sBAAsB;CACnC,CAAC;;;;;;;;MAQC,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;CAWtB,CAAC,CAAA"}
+{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,aAAa,CAAA;AACpE,OAAO,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAA;AAEnD,eAAe,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,IAAI,CAAA;;;;;;;;;4BAS9B,YAAY,CAAC,IAAI,CAAC;gCACd,GAAG,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;MAG3D,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC;MACtB,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC;;;KAG3B,UAAU,CAAC;IACZ,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,sBAAsB;CACnC,CAAC;;;;;;MAMC,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;CAWtB,CAAC,CAAA"}

package/x/index.js

@@ -2,10 +2,14 @@ export * from "./vitals/shell.js";
 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";
 //# sourceMappingURL=index.js.map

package/x/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,cAAc,mCAAmC,CAAA;AACjD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAE3C,cAAc,+BAA+B,CAAA;AAE7C,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA"}

package/x/main.bundle.js

@@ -1,12 +1,31 @@
 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";
-const { elements } = await setupBenev();
-dom.register(elements);
+import { Loader } from "./dom/duplexes/loader/loader.js";
+import { BenevDashboard } from "./dom/views/dashboard/view.js";
+const benev = await setupBenev();
+register(benev.elements);
+// benev.shell.onAttach.next().then(() => benev.shell.toggle(true))
 const loader = new Loader(dom("benev-loader"));
 dom(".testloader").onclick = async () => {
     await loader.load(() => "loading...", async () => nap(1000).then(() => html `<main benev-slice>new content</main>`));
 };
+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>
+			`,
+        },
+    },
+}));
 //# sourceMappingURL=main.bundle.js.map

package/x/main.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../s/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAA;AAE7C,MAAM,EAAC,QAAQ,EAAC,GAAG,MAAM,UAAU,EAAE,CAAA;AACrC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAEtB,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAA;AAE9C,GAAG,CAAC,aAAa,CAAC,CAAC,OAAO,GAAG,KAAK,IAAG,EAAE;IACtC,MAAM,MAAM,CAAC,IAAI,CAChB,GAAG,EAAE,CAAC,YAAY,EAClB,KAAK,IAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,sCAAsC,CAAC,CAC3E,CAAA;AACF,CAAC,CAAA"}
+{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../s/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAA;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAA;AAE5D,MAAM,KAAK,GAAG,MAAM,UAAU,EAAE,CAAA;AAChC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;AAExB,mEAAmE;AAEnE,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAA;AAE9C,GAAG,CAAC,aAAa,CAAC,CAAC,OAAO,GAAG,KAAK,IAAG,EAAE;IACtC,MAAM,MAAM,CAAC,IAAI,CAChB,GAAG,EAAE,CAAC,YAAY,EAClB,KAAK,IAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,sCAAsC,CAAC,CAC3E,CAAA;AACF,CAAC,CAAA;AAED,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC;IAC1C,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,MAAM,EAAE;QACP,KAAK,EAAE;YACN,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO;YACpB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;IAEjB;SACD;QACD,KAAK,EAAE;YACN,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO;YACpB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;IAEjB;SACD;KACD;CACD,CAAC,CAAC,CAAA"}