@benev/web 0.1.0-2

package/LICENSE

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2026 Chase Moskal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+
+# @benev/web
+
+sdk toolkit for making an official benev website.
+
+1. **install npm package**
+    ```bash
+    npm i @benev/web
+    ```
+    - note that imports from `@benev/web` are browser-centric
+    - note that imports from `@benev/web/ssg` are node-safe
+1. **scute index.html.ts: install css from `ssg` entrypoint**
+    - import benev css
+        ```ts
+        import {benevCssText} from "@benev/web/ssg"
+        ```
+    - inject the css into your `<head>` (along with your own styles)
+      ```ts
+      html`
+        <style data-theme>
+          @layer benev, app;
+          @layer app {
+            :root {
+              color: #aaa;
+              background: #000;
+            }
+          }
+          ${html.raw(benevCssText)}
+          ${orb.inject("css/app.css")}
+        </style>
+      `
+      ```
+      - benev styles are on the `benev` layer
+      - the `app` layer is an example of your own app's styles
+1. **html: add `benev` html attribute wherever you want benev styles to apply**
+    ```html
+    <html benev>
+      ...
+    </html>
+    ```
+1. **typescript: install custom elements**
+    ```ts
+    import {dom} from "@e280/sly"
+    import {setupBenev} from "@benev/web"
+
+    const benev = await setupBenev()
+    dom.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()`
+    - header (standard header with `b` button that opens menu)
+        ```html
+        <benev-header>
+          <a href="https://benev.gg/">benev.gg</a>
+        </benev-header>
+        ```
+    - loader (loading screens)
+        ```html
+        <benev-loader>
+          hello world
+        </benev-loader>
+        ```
+        - you control it by creating a `new Loader(dom("benev-loader"))`
+

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@benev/web",
+	"version": "0.1.0-2",
+	"description": "✨ benev web sdk",
+	"license": "MIT",
+	"type": "module",
+	"main": "./x/index.js",
+	"exports": {
+		".": "./x/index.js",
+		"./ssg": "./x/index-ssg.js"
+	},
+	"files": [
+		"x",
+		"s"
+	],
+	"scripts": {
+		"build": "rm -rf x && mkdir x && tsc && scute -v",
+		"dev": "octo 'tsc -w' 'scute -vw' 'node --watch x/test.js' 'hottie x --port=8081'",
+		"test": "node x/test.js",
+		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
+	},
+	"allowScripts": {
+		"esbuild@0.28.1": true
+	},
+	"peerDependencies": {
+		"@e280/sly": "^0.4.4",
+		"@e280/strata": "^0.4.3",
+		"lit": "^3.3.2"
+	},
+	"dependencies": {
+		"@e280/stz": "^0.3.7"
+	},
+	"devDependencies": {
+		"@e280/hottie": "^0.1.2",
+		"@e280/octo": "^0.1.3",
+		"@e280/science": "^0.1.11",
+		"@e280/scute": "^0.5.0",
+		"typescript": "^7.0.2"
+	},
+	"author": "Chase Moskal <chasemoskal@gmail.com>",
+	"homepage": "https://github.com/benev-gg/web#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/benev-gg/web.git"
+	},
+	"bugs": {
+		"url": "https://github.com/benev-gg/web/issues"
+	}
+}

package/s/assets/b.png.ts

@@ -0,0 +1,3 @@
+
+export const bDataPng = `data:image/png;base64,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`
+

package/s/consts.ts

@@ -0,0 +1,5 @@
+
+export const consts = {
+	anim: 300,
+}
+

package/s/css/benev.csstext.ts

@@ -0,0 +1,41 @@
+
+import {templateString as css} from "@e280/stz"
+import varsCsstext from "./parts/vars.csstext.js"
+import coreCsstext from "./parts/core.csstext.js"
+import pageCsstext from "./parts/page.csstext.js"
+import commonCsstext from "./parts/common.csstext.js"
+
+export const benevCssText = css`
+
+@layer
+	benev.vars,
+	benev.core,
+	benev.common,
+	benev.page;
+
+@layer benev.vars {
+	[benev], :host {
+		${varsCsstext}
+	}
+}
+
+@layer benev.core {
+	[benev], :host {
+		${coreCsstext}
+	}
+}
+
+@layer benev.common {
+	[benev], :host {
+		${commonCsstext}
+	}
+}
+
+@layer benev.page {
+	[benev], :host {
+		${pageCsstext}
+	}
+}
+
+`
+

package/s/css/demo.css

@@ -0,0 +1,19 @@
+
+@layer demo {
+	benev-header {
+		z-index: 2;
+		position: absolute;
+		inset: 0 0 auto;
+	}
+
+	benev-loader {
+		position: absolute;
+		inset: 0;
+	}
+
+	main {
+		padding: var(--benev-pad);
+		padding-top: var(--benev-headroom);
+	}
+}
+

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

@@ -0,0 +1,173 @@
+
+import {templateString as css} from "@e280/stz"
+export default css`
+
+button, [benev-button] {
+	font: inherit;
+	text-decoration: none;
+
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: wrap;
+	padding: var(--benev-pad) var(--benev-space);
+
+	font-weight: bold;
+	text-transform: uppercase;
+	color: var(--benev-prime);
+	background: oklch(from var(--benev-bg) l c h / 50%);
+	backdrop-filter: var(--benev-blur);
+	box-shadow: var(--benev-box-shadow);
+	border: var(--benev-thick) solid currentColor;
+	border-radius: var(--benev-round);
+
+	&[disabled] {
+		opacity: 0.3;
+	}
+
+	&:not([disabled]) {
+		cursor: pointer;
+		transform: scale(100%);
+		transition: all var(--benev-anim) ease;
+		&:hover, &:focus-visible { transform: scale(105%); filter: brightness(120%); }
+		&:active { transform: scale(100%); filter: brightness(100%); }
+	}
+
+	&[benev-button="naked"] {
+		color: inherit;
+		background: transparent;
+		backdrop-filter: none;
+		box-shadow: none;
+		padding: 0;
+		border-radius: 0;
+		border: none;
+		text-transform: unset;
+		font-weight: inherit;
+		text-transform: inherit;
+	}
+
+	&[benev-button="juicy"] {
+		opacity: 1;
+		color: black;
+		border: var(--benev-thick) solid var(--benev-prime);
+		background: linear-gradient(
+			to bottom,
+			oklch(from var(--benev-prime) calc(l * 1.5) c h),
+			oklch(from var(--benev-prime) l calc(c * 1.5) h)
+		);
+		&:is(:hover, :focus-visible) {
+			box-shadow: 0 0 2em color-mix(in oklch, transparent, var(--benev-prime));
+		}
+	}
+}
+
+[benev-slice] {
+	width: 100%;
+	max-width: var(--benev-site-width);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+benev-menu:not(:defined) {
+	display: none;
+}
+
+benev-header {
+	display: flex;
+	justify-content: end;
+	align-items: center;
+	width: 100%;
+	max-width: var(--benev-site-width);
+	margin: 0 auto;
+
+	&:not(:defined) {
+		padding: var(--benev-pad);
+		gap: var(--benev-space);
+
+		&::before {
+			content: "";
+			display: inline-block;
+			margin-right: auto;
+			width: var(--benev-b-size);
+			height: var(--benev-b-size);
+		}
+	}
+}
+
+[benev-prose] {
+	display: flex;
+	flex-direction: column;
+	gap: var(--benev-pad);
+
+	h1 {
+		font-size: 2.5em;
+		color: var(--benev-intense);
+		a { color: inherit; }
+	}
+
+	h2 {
+		font-size: 1.5em;
+		color: var(--benev-prime);
+	}
+
+	h3, h4, h5, h6 {
+		color: var(--benev-prime);
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		margin-top: var(--benev-space);
+	}
+
+	p {
+		max-width: var(--benev-copy-width);
+	}
+
+	p:has(> img) {
+		max-width: 100%;
+	}
+
+	ul, ol {
+		padding-left: 1.5em;
+	}
+
+	img {
+		max-width: 100%;
+		background: #0004;
+		border-radius: var(--benev-round);
+		box-shadow: var(--benev-box-shadow);
+	}
+
+	blockquote {
+		color: oklch(from currentColor l 0 h / 50%);
+		padding-left: var(--benev-pad);
+		margin-left: var(--benev-pad);
+		font-style: italic;
+		border-left: var(--benev-thick) solid currentColor;
+	}
+
+	hr {
+		border: none;
+		display: block;
+		height: var(--benev-thick);
+		background: oklch(from var(--benev-text) l c h / 25%);
+		margin: var(--benev-space) 0;
+	}
+
+	code {
+		font-size: 0.8em;
+
+		display: block;
+		width: 100%;
+		overflow: auto;
+
+		padding: var(--benev-space);
+		color: var(--benev-code);
+		background: var(--benev-backdrop);
+		border-radius: var(--benev-round);
+		border: var(--benev-border);
+		border-color: oklch(from var(--benev-code) l c h / 33%);
+		box-shadow: var(--benev-box-shadow);
+	}
+}
+
+`
+

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

@@ -0,0 +1,56 @@
+
+import {templateString as css} from "@e280/stz"
+export default css`
+
+&, *, ::before, ::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	scrollbar-width: thin;
+}
+
+:focus-visible {
+	outline: var(--benev-focus);
+	outline-offset: 0.2em;
+}
+
+::selection {
+	color: var(--benev-select-color);
+	background: var(--benev-select-bg);
+}
+
+a {
+	color: var(--benev-link);
+	text-decoration: none;
+
+	&:visited {
+		color: var(--benev-link);
+	}
+
+	&:hover, &:focus-visible {
+		color: color-mix(in srgb, var(--benev-link), white 15%);
+		text-decoration: underline;
+	}
+
+	&:active {
+		color: color-mix(in srgb, var(--benev-link), white 50%);
+	}
+
+	&[benev-cardlink] {
+		color: inherit;
+
+		&:hover, &:focus-visible {
+			color: inherit;
+			text-decoration: none;
+			filter: brightness(105%);
+		}
+
+		&:active {
+			color: inherit;
+			filter: brightness(95%);
+		}
+	}
+}
+
+`
+

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

@@ -0,0 +1,24 @@
+
+import {templateString as css} from "@e280/stz"
+export default css`
+
+color-scheme: dark;
+
+&:is(html) {
+	font-family: sans-serif;
+	font-size: var(--benev-font-size);
+
+	scrollbar-gutter: stable;
+	scrollbar-width: thin;
+
+	color: var(--benev-text);
+	background: var(--benev-bg);
+	text-shadow: var(--benev-text-shadow);
+}
+
+body {
+	min-height: 100dvh;
+}
+
+`
+

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

@@ -0,0 +1,40 @@
+
+import {templateString as css} from "@e280/stz"
+import {consts} from "../../consts.js"
+export default css`
+
+--benev-font-size: 18px;
+--benev-site-width: 62em;
+--benev-copy-width: 70ch;
+--benev-headroom: 2.5em;
+
+--benev-bg: #111;
+--benev-prime: #ebb935;
+--benev-tray: #453e2ca8;
+--benev-text: color-mix(in oklch, var(--benev-prime), #fffc 90%);
+--benev-intense: white;
+--benev-focus: 2px solid cyan;
+--benev-link: aqua;
+--benev-b-size: 1.5em;
+--benev-code: #0f0;
+
+--benev-select-bg: #f60;
+--benev-select-color: #ff8;
+
+--benev-line: #ebb93588;
+--benev-thin: 1px;
+--benev-thick: 3px;
+--benev-border: var(--benev-thin) solid color-mix(in oklch, transparent, var(--benev-line) 50%);
+
+--benev-pad: 0.5em;
+--benev-space: 1em;
+--benev-anim: ${consts.anim}ms;
+--benev-round: 0.5em;
+--benev-blur: blur(1em);
+--benev-backdrop: #0008;
+
+--benev-box-shadow: 0 0.5em 2em #0008;
+--benev-text-shadow: 0.04em 0.08em 0.1em #0008;
+
+`
+

package/s/css/theme.css.ts

@@ -0,0 +1,9 @@
+
+import {benevCssText} from "./benev.csstext.js"
+
+export const themeCss = [benevCssText].map(text => {
+	const sheet = new CSSStyleSheet()
+	sheet.replaceSync(text)
+	return sheet
+})
+

package/s/dom/header/style.css.ts

@@ -0,0 +1,40 @@
+
+import {css} from "lit"
+export default css`@layer benev.view {
+
+:host {
+	width: 100%;
+	pointer-events: none;
+}
+
+nav > *, ::slotted(*) {
+	pointer-events: all;
+}
+
+nav {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: end;
+	align-items: center;
+	gap: var(--benev-space);
+	padding: var(--benev-pad);
+}
+
+button {
+	display: block;
+	margin-right: auto;
+
+	img {
+		display: block;
+		width: var(--benev-b-size);
+		height: var(--benev-b-size);
+	}
+}
+
+slot {
+	display: contents;
+}
+
+}`
+

package/s/dom/header/view.ts

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

package/s/dom/loader/loader.ts

@@ -0,0 +1,70 @@
+
+import {nap} from "@e280/stz"
+import {Content, dom} from "@e280/sly"
+import {consts} from "../../consts.js"
+
+export class Loader {
+	original
+
+	#loading
+	#content
+	#operation = 0
+
+	constructor(
+			public element: HTMLElement,
+			public anim = consts.anim,
+		) {
+
+		this.original = document.createElement("template")
+		this.original.innerHTML = element.innerHTML
+
+		this.#loading = document.createElement("div")
+		this.#loading.style.display = "contents"
+		this.#loading.slot = "loading"
+
+		this.#content = document.createElement("div")
+		this.#content.style.display = "contents"
+		dom.render(this.#content, Array.from(element.childNodes))
+
+		this.element.replaceChildren()
+		this.element.append(
+			this.#loading,
+			this.#content,
+		)
+	}
+
+	async load(
+			getLoading: () => Content,
+			getContent: () => Promise<Content>,
+		) {
+
+		this.#operation += 1
+		const operation = this.#operation
+		const isLatest = () => (this.#operation === operation)
+		this.element.inert = true
+		this.element.toggleAttribute("loading", true)
+		dom.render(this.#loading, getLoading())
+
+		try {
+			const [content] = await Promise.all([
+				getContent(),
+				nap(this.anim * 2),
+			])
+
+			if (isLatest()) {
+				this.element.toggleAttribute("loading", false)
+				this.element.inert = false
+				dom.render(this.#content, content)
+				await nap(this.anim)
+			}
+		}
+		finally {
+			if (isLatest()) {
+				this.element.toggleAttribute("loading", false)
+				this.element.inert = false
+				dom.render(this.#loading, null)
+			}
+		}
+	}
+}
+