@e280/shiny 0.1.0-1

package/LICENSE

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2025 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,10 @@
+
+<div align="center"><img alt="" width="256" src="./assets/favicon.png"/></div>
+
+# ✨ shiny
+> *web ui components*
+
+https://shiny.e280.org/
+
+<br/><br/>
+

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@e280/shiny",
+	"version": "0.1.0-1",
+	"description": "✨ web ui components",
+	"license": "MIT",
+	"type": "module",
+	"main": "./x/index.js",
+	"sideEffects": false,
+	"exports": {
+		".": "./x/index.js"
+	},
+	"files": [
+		"x",
+		"s"
+	],
+	"peerDependencies": {
+		"@e280/sly": "^0.2.0-21",
+		"lit": "^3.3.1"
+	},
+	"dependencies": {
+		"@e280/strata": "^0.2.0-14",
+		"@e280/stz": "^0.2.6"
+	},
+	"devDependencies": {
+		"@e280/science": "^0.1.2",
+		"@e280/scute": "^0.1.0",
+		"http-server": "^14.1.1",
+		"npm-run-all": "^4.1.5",
+		"typescript": "^5.9.2"
+	},
+	"scripts": {
+		"build": "run-s _clean _ln _tsc _scute",
+		"start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x'",
+		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
+		"test": "node x/tests.test.js",
+		"test-inspect": "node inspect x/tests.test.js",
+		"_clean": "rm -rf x && mkdir x",
+		"_tsc": "tsc",
+		"_scute": "scute -v",
+		"_ln": "run-s _ln:s _ln:assets",
+		"_ln:s": "ln -s \"$(realpath s)\" x/s",
+		"_ln:assets": "ln -s \"$(realpath assets)\" x/assets",
+		"_lnx:stz": "rm -rf node_modules/@e280/stz && ln -s \"$(realpath ../stz)\" node_modules/@e280/stz"
+	},
+	"author": "Chase Moskal <chasemoskal@gmail.com>",
+	"homepage": "https://github.com/e280/shiny#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/e280/shiny.git"
+	},
+	"bugs": {
+		"url": "https://github.com/e280/shiny/issues"
+	},
+	"keywords": [
+		"web ui",
+		"ui library",
+		"components",
+		"web components",
+		"lit",
+		"sly"
+	]
+}

package/s/demo/demo.bundle.ts

@@ -0,0 +1,42 @@
+
+import {css, html} from "lit"
+import {dom, view} from "@e280/sly"
+import {themes} from "../themes/index.js"
+import {themeViews} from "../ui/themers.js"
+import {Demonstration} from "./views/demonstration/view.js"
+
+const views = themeViews(themes.basic)
+
+dom.register({ShinyDemo: view.component(use => {
+	use.styles(css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			gap: 1em;
+		}
+
+		[view="shiny-copy"]::part(content) {
+			font-size: 4em;
+		}
+	`)
+
+	return [
+		Demonstration({
+			views,
+			name: "shiny-copy",
+			explain: html`
+				<p>button for click-to-copy text</p>
+			`,
+			exampleView: `
+				ShinyCopy("hello world")
+			`,
+			exampleComponent: `
+				<shiny-copy text="hello world"></shiny-copy>
+			`,
+			content: views.ShinyCopy("hello world"),
+		}),
+	]
+})})
+
+console.log("✨ shiny")
+

package/s/demo/demo.css

@@ -0,0 +1,120 @@
+
+@layer vars, core, page;
+
+@layer vars {
+	:root {
+		--bg: #333;
+		--color: #fff;
+		--prime: #d068ff;
+		--link: cyan;
+
+		--selection: white;
+		--selection-bg: #f70;
+	}
+}
+
+@layer core {
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+
+		scrollbar-width: thin;
+		scrollbar-color: #444 transparent;
+	}
+
+	:not(:defined) {
+		display: none;
+	}
+
+	::selection {
+		color: var(--selection);
+		background-color: var(--selection-bg);
+	}
+
+	::-webkit-scrollbar { width: 8px; }
+	::-webkit-scrollbar-track { background: transparent; }
+	::-webkit-scrollbar-thumb { background: #444; border-radius: 1em; }
+	::-webkit-scrollbar-thumb:hover { background: #666; }
+
+	a {
+		color: var(--link);
+		text-decoration: none;
+
+		&:visited {
+			color: color-mix(in srgb, purple, var(--link) 70%);
+		}
+
+		&:hover {
+			color: color-mix(in srgb, white, var(--link) 90%);
+			text-decoration: underline;
+		}
+
+		&:active {
+			color: color-mix(in srgb, white, var(--link) 50%);
+		}
+	}
+}
+
+@layer page {
+	:root {
+		height: 100%;
+		font-size: 16px;
+		font-family: sans-serif;
+
+		color-scheme: dark;
+		scrollbar-gutter: stable;
+
+		color: var(--color);
+		background: var(--bg);
+
+		--tint: #070429aa;
+		background:
+			linear-gradient(0deg, var(--tint), var(--tint)),
+			#141519 url("/assets/bg.webp") center 60% / cover no-repeat;
+
+		background-attachment: fixed, fixed;
+
+		text-shadow: 0.1em 0.1em 0.2em #0008;
+	}
+
+	body {
+		width: 100%;
+		min-height: 100%;
+		max-width: 60em;
+		margin: auto;
+		padding: 1em;
+		padding-bottom: 6em;
+
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
+	h1 {
+		font-size: 1.5em;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+
+		strong {
+			font-size: 1.5em;
+			color: var(--prime);
+		}
+
+		small {
+			opacity: 0.6;
+			font-size: 0.7em;
+			font-weight: normal;
+		}
+	}
+
+	body > section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 1em;
+	}
+}
+

package/s/demo/views/demonstration/style.css.ts

@@ -0,0 +1,108 @@
+
+import {css} from "lit"
+export default css`
+
+:host {
+	position: relative;
+
+	display: flex;
+	flex-wrap: wrap;
+
+	padding: 1em;
+	border-radius: 0.5em;
+	gap: 1em;
+
+	background: linear-gradient(to right top, #252dd985, #aa6affbd);
+	backdrop-filter: blur(0.5em);
+
+	box-shadow: 0 0 5em #5d1fadaa;
+	border-top: 2px solid #fff4;
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		inset: 0;
+		border-radius: 0.5em;
+		background: #0007;
+		width: calc(100% - 0.3em);
+		height: calc(100% - 0.3em);
+		margin: auto;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+.meta {
+	flex: 1 1 10em;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5em;
+
+	h2 {
+		color: var(--prime);
+	}
+
+	.codes {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2em;
+	}
+
+	.codeblock {
+		display: flex;
+		background: #0002;
+		border-radius: 0.3em;
+		border-bottom: 1px solid #fff2;
+		box-shadow: inset 0.2em 0.3em 2em #0004;
+
+		.zone {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+			padding: 0.5em;
+
+			h3 {
+				opacity: 0.4;
+				font-size: 0.7em;
+				font-weight: normal;
+				font-style: italic;
+			}
+
+			code {
+				display: block;
+				white-space: pre;
+				text-wrap: wrap;
+				tab-size: 2;
+
+				font-size: 0.8em;
+				font-family: monospace;
+				color: #8f8;
+			}
+		}
+
+		[view="shiny-copy"] {
+			flex: 0 0 0;
+			padding: 0.2em;
+		}
+	}
+}
+
+.content {
+	flex: 1 1 10rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	padding: 1rem;
+	border-radius: 0.5rem;
+	border: 1px dashed #fff4;
+}
+
+`
+

package/s/demo/views/demonstration/view.ts

@@ -0,0 +1,49 @@
+
+import {html} from "lit"
+import {Content, view} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {untab} from "../../../tools/untab.js"
+import {ShinyViews} from "../../../ui/themers.js"
+import {basic} from "../../../themes/basic.css.js"
+
+export const Demonstration = view(use => (options: {
+		name: string
+		explain: Content
+		views: ShinyViews
+		exampleView: string
+		exampleComponent: string
+		content: Content
+	}) => {
+
+	use.name(options.name)
+	use.styles(basic, styleCss)
+
+	function codeblock(heading: string, code: string) {
+		const cleanCode = untab(code).trim()
+		return html`
+			<div class=codeblock>
+				<div class=zone>
+					<h3>${heading}</h3>
+					<code>${cleanCode}</code>
+				</div>
+				${options.views.ShinyCopy(cleanCode)}
+			</div>
+		`
+	}
+
+	return html`
+		<div class=meta>
+			<h2>✨ ${options.name}</h2>
+			<div class=explain>${options.explain}</div>
+			<div class=codes>
+				${codeblock("sly view", options.exampleView)}
+				${codeblock("html web component", options.exampleComponent)}
+			</div>
+		</div>
+
+		<div class=content part=content>
+			${options.content}
+		</div>
+	`
+})
+

package/s/icons/tabler/ABOUT.md

@@ -0,0 +1,7 @@
+
+yo.
+
+we've modified these tabler icons to export them as lit svgs.
+
+we got 'em from here: https://github.com/tabler/tabler-icons
+

package/s/icons/tabler/LICENSE

@@ -0,0 +1,23 @@
+
+MIT License
+
+Copyright (c) 2020-2025 Paweł Kuna
+
+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/s/icons/tabler/clipboard-check-filled.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-clipboard-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17.997 4.17a3 3 0 0 1 2.003 2.83v12a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 2.003 -2.83a4 4 0 0 0 3.997 3.83h4a4 4 0 0 0 3.98 -3.597zm-3.704 7.123l-3.293 3.292l-1.293 -1.292a1 1 0 1 0 -1.414 1.414l2 2a1 1 0 0 0 1.414 0l4 -4a1 1 0 0 0 -1.414 -1.414m-.293 -9.293a2 2 0 1 1 0 4h-4a2 2 0 1 1 0 -4z" /></svg>`
+

package/s/icons/tabler/clipboard-x-filled.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-clipboard-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17.997 4.17a3 3 0 0 1 2.003 2.83v12a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 2.003 -2.83a4 4 0 0 0 3.997 3.83h4a4 4 0 0 0 3.98 -3.597zm-7.29 7.123a1 1 0 0 0 -1.414 0l-.083 .094a1 1 0 0 0 .083 1.32l1.292 1.293l-1.292 1.293a1 1 0 0 0 0 1.414l.094 .083a1 1 0 0 0 1.32 -.083l1.293 -1.293l1.293 1.293a1 1 0 0 0 1.414 0l.083 -.094a1 1 0 0 0 -.083 -1.32l-1.293 -1.293l1.293 -1.293a1 1 0 0 0 0 -1.414l-.094 -.083a1 1 0 0 0 -1.32 .083l-1.293 1.292zm3.293 -9.293a2 2 0 1 1 0 4h-4a2 2 0 1 1 0 -4z" /></svg>`
+

package/s/icons/tabler/clipboard.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>`
+

package/s/icons/tabler/copy.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-copy"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" /></svg>`
+

package/s/index.html.ts

@@ -0,0 +1,37 @@
+
+import {ssg, html} from "@e280/scute"
+
+const title = "shiny"
+const description = "✨ web ui components"
+const domain = "shiny.e280.org"
+const favicon = "/assets/favicon.png"
+
+export default ssg.page(import.meta.url, async orb => ({
+	title,
+	js: "demo/demo.bundle.min.js",
+	css: "demo/demo.css",
+	favicon,
+	dark: true,
+	socialCard: {
+		themeColor: "#d068ff",
+		title,
+		description,
+		siteName: "@e280/shiny",
+		image: "https://" + domain + favicon,
+	},
+
+	body: html`
+		<h1>
+			<strong>✨ @e280/shiny</strong>
+			<small>v${orb.packageVersion()}</small>
+		</h1>
+
+		<section>
+			<p>web ui components</p>
+			<p><a href="https://github.com/e280/shiny#readme">readme</a></p>
+		</section>
+
+		<shiny-demo></shiny-demo>
+	`,
+}))
+

package/s/index.ts

@@ -0,0 +1,7 @@
+
+export * from "./themes/index.js"
+export * from "./ui/example/component.js"
+export * from "./ui/copy/component.js"
+export * from "./ui/themers.js"
+export * from "./ui/components.js"
+

package/s/tests.test.ts

@@ -0,0 +1,5 @@
+
+import {Science} from "@e280/science"
+
+await Science.run({})
+

package/s/themes/basic.css.ts

@@ -0,0 +1,18 @@
+
+import {css} from "lit"
+import {cssReset} from "@e280/sly"
+export const basic = css`
+
+${cssReset}
+
+:host {
+	display: block;
+	--bg: var(--shiny-bg, #111);
+	--alpha: var(--shiny-alpha, #afa);
+	--good: var(--shiny-good, #0f4);
+	--bad: var(--shiny-bad, #f40);
+	--invalid: var(--shiny-invalid, #8888);
+}
+
+`
+

package/s/themes/index.barrel.ts

@@ -0,0 +1,3 @@
+
+export * from "./basic.css.js"
+

package/s/themes/index.ts

@@ -0,0 +1,3 @@
+
+export * as themes from "./index.barrel.js"
+

package/s/tools/untab.ts

@@ -0,0 +1,30 @@
+
+export function untab(code: string) {
+	const lines = code.split(/\r|\n/)
+	let baseTabLevel: number | undefined
+
+	for (const line of lines) {
+		const isOnlyWhitespace = /^\s+$/.test(line)
+		if (!isOnlyWhitespace) {
+			const tabMatch = line.match(/^(\t+).+/)
+			if (tabMatch) {
+				const tabCount = tabMatch[1].length
+				baseTabLevel = baseTabLevel === undefined
+					? tabCount
+					: tabCount < baseTabLevel
+						? tabCount
+						: baseTabLevel
+				if (baseTabLevel === 0)
+					break
+			}
+		}
+	}
+
+	const rebaseTabRegex = new RegExp(`^\\t{${baseTabLevel}}`)
+
+	return lines
+		.map(line => /^\s+$/.test(line) ? "" : line)
+		.map(line => line.replace(rebaseTabRegex, ""))
+		.join("\n")
+}
+

package/s/ui/components.ts

@@ -0,0 +1,9 @@
+
+import {ShinyCopy} from "./copy/component.js"
+import {ShinyExample} from "./example/component.js"
+
+export const components = {
+	ShinyCopy,
+	ShinyExample,
+}
+

package/s/ui/copy/component.ts

@@ -0,0 +1,66 @@
+
+import {debounce} from "@e280/stz"
+import {dom, view} from "@e280/sly"
+
+import {CSSResult, html} from "lit"
+import styleCss from "./style.css.js"
+import {ShinyElement} from "../framework.js"
+import clipboardSvg from "../../icons/tabler/clipboard.svg.js"
+import clipboardXFilledSvg from "../../icons/tabler/clipboard-x-filled.svg.js"
+import clipboardCheckFilledSvg from "../../icons/tabler/clipboard-check-filled.svg.js"
+
+export class ShinyCopy extends (
+	view(use => (theme: CSSResult, text: string | undefined, ms = 1000) => {
+		use.name("shiny-copy")
+		use.styles(theme, styleCss)
+
+		type Status = "neutral" | "good" | "bad" | "invalid"
+
+		const baseStatus = () => (
+			text === undefined
+				? "invalid"
+				: "neutral"
+		)
+
+		const $status = use.signal<Status>(baseStatus())
+		const statusReset = use.once(() => debounce(ms, () => $status.set(baseStatus())))
+		const statusFlash = use.once(() => async(status: Status) => {
+			await $status.set(status)
+			await statusReset()
+		})
+
+		async function click() {
+			if (text === undefined) return
+			try {
+				await navigator.clipboard.writeText(text)
+				await statusFlash("good")
+			}
+			catch (error) {
+				console.error(error)
+				await statusFlash("bad")
+			}
+		}
+
+		const icon = (() => {switch ($status.get()) {
+			case "neutral": return clipboardSvg
+			case "invalid": return clipboardSvg
+			case "good": return clipboardCheckFilledSvg
+			case "bad": return clipboardXFilledSvg
+			default: throw new Error(`invalid copy status`)
+		}})()
+
+		return html`
+			<button data-status="${$status.get()}" @click="${click}">
+				${icon}
+			</button>
+		`
+	})
+	.component(class extends ShinyElement {
+		attrs = dom.attrs(this).spec({
+			text: String,
+			ms: Number,
+		})
+	})
+	.props(el => [el.theme, el.attrs.text, el.attrs.ms])
+) {}
+