@e280/quay 0.0.0-2 → 0.0.0-20

package/s/dom/components/dropzone/style.css.ts

@@ -1,5 +1,5 @@
 
-import {css} from "@benev/slate"
+import {css} from "lit"
 export default css`
 
 .dropzone {
@@ -9,16 +9,16 @@ export default css`
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	border: 2px dashed var(--sl-color-neutral-300);
-	border-radius: 6px;
-	transition: background 0.2s;
+	border: var(--border-width) dashed var(--border-muted);
+	border-radius: var(--radius);
+	transition: background var(--transition), border-color var(--transition), color var(--transition);
 }
 
 .dz-input {
 	width: 100%;
 	height: 100%;
-	z-index: 999;
-	font-size: 14px;
+	z-index: var(--z-overlay);
+	font-size: var(--font-size-sm);
 	cursor: pointer;
 	opacity: 0;
 
@@ -28,15 +28,15 @@ export default css`
 }
 
 .dropzone:hover {
-	background: var(--sl-color-gray-50);
+	background: var(--surface-hover);
 }
 
 .dropzone[data-hovering] {
-	background: var(--sl-color-gray-50);
-	border-color: var(--sl-color-primary-500);
+	background: var(--surface-hover);
+	border-color: var(--primary);
 
 	& .dz-info {
-		color: var(--sl-color-primary-300);
+		color: var(--primary-soft);
 	}
 }
 
@@ -46,9 +46,8 @@ export default css`
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: 0.5em;
-	color: var(--sl-color-neutral-700);
+	gap: var(--space-sm);
+	color: var(--text-muted);
 }
 
 `
-

package/s/dom/components/filter/component.ts

@@ -1,26 +1,30 @@
-import {html, shadowComponent, css} from "@benev/slate"
+
+import {html, css} from "lit"
+import {shadowElement, useHost, useStyles} from "@e280/sly"
+
 import themeCss from "../../theme.css.js"
 import {findLocalGroup} from "../../utils/find-local-group.js"
 import type SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js"
 
-export const QuayFilter = shadowComponent(use => {
-	const group = findLocalGroup(use.element)
+export const QuayFilter = shadowElement(() => {
+	const host = useHost()
+	const group = findLocalGroup(host)
 
-	use.styles(themeCss, css`
+	useStyles(themeCss, css`
 		sl-menu {
-			margin-top: 0.3em;
+			margin-top: var(--space-xs);
 
 			.item {
 				display: flex;
 				align-items: center;
-				gap: 0.5em;
+				gap: var(--space-sm);
 			}
 		}
 	`)
 
 	const onSelectFilter = (e: CustomEvent<{item: SlMenuItem}>) => {
 		const value = e.detail.item.value
-		group.selectedFilter.value = value
+		group.selectedFilter(value)
 	}
 
 	return html`
@@ -33,7 +37,7 @@ export const QuayFilter = shadowComponent(use => {
 				${[...group.config.filters?.keys()].map(filter => html`
 					<sl-menu-item value=${filter}>
 						<div class=item>
-							<sl-icon name="check" slot="prefix" style="visibility: ${filter === group.selectedFilter.value ? 'visible' : 'hidden'}"></sl-icon>
+							<sl-icon name="check" slot="prefix" style="visibility: ${filter === group.selectedFilter() ? 'visible' : 'hidden'}"></sl-icon>
 							<span>${filter}</span>
 						</div>
 					</sl-menu-item>
@@ -42,3 +46,4 @@ export const QuayFilter = shadowComponent(use => {
 			</sl-dropdown>
 		</div>`
 })
+

package/s/dom/components/outliner/component.ts

@@ -1,16 +1,19 @@
 
-import {html, shadowComponent} from "@benev/slate"
+import {html} from "lit"
+import {shadowElement, useHost, useStyles} from "@e280/sly"
+
 import themeCss from "../../theme.css.js"
 import {Tree} from "../../views/tree/component.js"
 import {findLocalGroup} from "../../utils/find-local-group.js"
 
-export const QuayOutliner = shadowComponent(use => {
-	use.styles(themeCss)
-	const group = findLocalGroup(use.element)
+export const QuayOutliner = shadowElement(() => {
+	useStyles(themeCss)
+	const host = useHost()
+	const group = findLocalGroup(host)
 
 	return html`
 		<div class="panel">
-			${Tree([group])}
+			${Tree(group)}
 		</div>`
 })
 

package/s/dom/components/searchbar/component.ts

@@ -1,18 +1,25 @@
 
-import {html, shadowComponent, css} from '@benev/slate'
+import {html, css} from "lit"
+import {shadowElement, useHost, useStyles} from "@e280/sly"
+
 import themeCss from '../../theme.css.js'
 
 import {findLocalGroup} from '../../utils/find-local-group.js'
 
 const styleCss = css`
+	sl-input::part(base) {
+		border-radius: var(--radius);
+	}
+
 	sl-input::part(prefix) {
-		padding-left: 0.5em;
+		padding-left: var(--space-sm);
 	}
 `
 
-export const QuaySearchbar = shadowComponent(use => {
-	use.styles(themeCss, styleCss)
-	const group = findLocalGroup(use.element)
+export const QuaySearchbar = shadowElement(() => {
+	useStyles(themeCss, styleCss)
+	const host = useHost()
+	const group = findLocalGroup(host)
 
 	return html`
 		<sl-input
@@ -20,10 +27,9 @@ export const QuaySearchbar = shadowComponent(use => {
 			pill
 			placeholder='Search'
 			clearable
-			@sl-input=${(e: CustomEvent) => group.searchText.value = (e.target as HTMLInputElement).value}
+			@sl-input=${(e: CustomEvent) => group.searchText((e.target as HTMLInputElement).value)}
 		>
 			<sl-icon name='search' slot='prefix'></sl-icon>
 		</sl-input>
 	`
 })
-

package/s/dom/components/sort/component.ts

@@ -1,30 +1,34 @@
-import {html, shadowComponent, css} from "@benev/slate"
+
+import {html, css} from "lit"
+import {shadowElement, useHost, useStyles} from "@e280/sly"
+
 import themeCss from "../../theme.css.js"
 import {findLocalGroup} from "../../utils/find-local-group.js"
 import type SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js"
 
-export const QuaySort = shadowComponent(use => {
-	const group = findLocalGroup(use.element)
+export const QuaySort = shadowElement(() => {
+	const host = useHost()
+	const group = findLocalGroup(host)
 
-	use.styles(themeCss, css`
+	useStyles(themeCss, css`
 		sl-button sl-icon {
-			font-size: 14px;
+			font-size: var(--font-size-sm);
 		}
 
 		sl-menu {
-			margin-top: 0.3em;
+			margin-top: var(--space-xs);
 
 			.item {
 				display: flex;
 				align-items: center;
-				gap: 0.5em;
+				gap: var(--space-sm);
 			}
 		}
 	`)
 
 	const onSelectSort = (e: CustomEvent<{item: SlMenuItem}>) => {
 		const value = e.detail.item.value
-		group.selectedSort.value = value
+		group.selectedSort(value)
 	}
 
 	return html`
@@ -37,7 +41,7 @@ export const QuaySort = shadowComponent(use => {
 				${[...group.config.sorts?.keys()].map(sort => html`
 					<sl-menu-item value=${sort}>
 						<div class=item>
-							<sl-icon name="check" slot="prefix" style="visibility: ${sort === group.selectedSort.value ? 'visible' : 'hidden'}"></sl-icon>
+							<sl-icon name="check" slot="prefix" style="visibility: ${sort === group.selectedSort() ? 'visible' : 'hidden'}"></sl-icon>
 							<span>${sort}</span>
 						</div>
 					</sl-menu-item>

package/s/dom/theme.css.ts

@@ -1,11 +1,75 @@
-import {css} from "@benev/slate"
+
+import {css} from "lit"
 export default css`@layer theme, view; @layer theme {
 
+:host {
+	--surface: var(--quay-surface, #0f0f11);
+	--surface-active: var(--quay-surface-hover, var(--sl-color-neutral-0, #fff));
+	--surface-hover: var(--quay-surface-hover, var(--sl-color-gray-50, #f8f9fa));
+	--surface-selected: var(--quay-surface-selected, rgb(0 0 0 / 40%));
+	--border: var(--quay-border, #0d0d0e);
+	--border-muted: var(--quay-border, var(--sl-color-neutral-300, #d0d0d0));
+	--border-width: 1px;
+	--text: var(--quay-text, var(--sl-color-neutral-800, #333));
+	--text-muted: var(--quay-muted, var(--sl-color-neutral-700, #555));
+	--text-subtle: var(--quay-muted, var(--sl-color-neutral-500, #777));
+	--icon: var(--quay-muted, var(--sl-color-neutral-300, #d0d0d0));
+	--primary: var(--quay-accent, var(--sl-color-primary-500, #0ea5e9));
+	--primary-soft: color-mix(in srgb, var(--primary), white 65%);
+	--radius: var(--quay-radius, var(--sl-border-radius-medium, 6px));
+	--radius-small: var(--sl-border-radius-small, var(--radius));
+	--space-xs: var(--sl-spacing-2x-small, 0.3em);
+	--space-sm: var(--sl-spacing-x-small, 0.5rem);
+	--space-md: var(--sl-spacing-medium, 1rem);
+	--font-size-xs: var(--sl-font-size-x-small, 0.75rem);
+	--font-size-sm: var(--sl-font-size-small, 0.85rem);
+	--control-height: 30px;
+	--control-width: 40px;
+	--icon-size: 2rem;
+	--z-overlay: 999;
+	--transition: 0.2s ease;
+}
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
 
-}`
+sl-button::part(base) {
+	border-color: var(--border);
+	color: var(--text-muted);
+}
+
+sl-button:hover::part(base),
+sl-button:focus-within::part(base),
+sl-button:active::part(base) {
+	background: var(--surface-hover);
+	border-color: var(--border);
+	color: var(--text);
+}
+
+sl-menu-item::part(base) {
+	color: var(--text-muted);
+}
+
+sl-menu-item:hover::part(base),
+sl-menu-item:focus-visible::part(base) {
+	background: var(--surface-hover);
+	color: var(--text);
+}
+
+sl-input::part(base) {
+	border-color: var(--border);
+	color: var(--text);
+}
+
+sl-input:hover::part(base),
+sl-input:focus-within::part(base) {
+	background: var(--surface);
+	border-color: var(--border);
+	box-shadow: 0 0 0 1px var(--surface-hover);
+	color: var(--text);
+}
 
+}`

package/s/dom/views/tree/component.ts

@@ -1,5 +1,6 @@
 
-import {html, shadowView, TemplateResult} from "@benev/slate"
+import {html, TemplateResult} from "lit"
+import {shadow, useMount, useRender, useStyles} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import themeCss from "../../theme.css.js"
@@ -7,14 +8,15 @@ import themeCss from "../../theme.css.js"
 import {Group} from "../../../logic/group.js"
 import {CodexItem} from "../../../logic/aspects/codex/parts/codex-item.js"
 
-export const Tree = shadowView(use => (group: Group) => {
-	use.styles(themeCss, styleCss)
+export const Tree = shadow((group: Group) => {
+	useStyles(themeCss, styleCss)
+	const render = useRender()
 
 	const {config} = group
 	const {dropzone, trail, config: {root}} = group
 
-	use.mount(() => {
-		const dispose = group.on.upload.sub(() => use.rerender())
+	useMount(() => {
+		const dispose = group.on.upload.sub(() => render())
 		return () => dispose()
 	})
 
@@ -38,7 +40,7 @@ export const Tree = shadowView(use => (group: Group) => {
 		${config.renderLabel(item)}
 	`
 
-	const render = (item: CodexItem): TemplateResult => {
+	const renderTree = (item: CodexItem): TemplateResult => {
 		return html`
 			<sl-tree-item
 				draggable="true"
@@ -51,14 +53,14 @@ export const Tree = shadowView(use => (group: Group) => {
 				${item.kind === "folder"
 					? renderFolderItem(item)
 					: renderItem(item)}
-				${group.sort(item.children).map((item) => group.matches(item) ? render(item) : null)}
+				${group.sort(item.children).map((item) => group.matches(item) ? renderTree(item) : null)}
 			</sl-tree-item>
 		`
 	}
 
 	return html`
 		<sl-tree selection=leaf>
-			${render(root)}
+			${renderTree(root)}
 		</sl-tree>`
 })
 

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

@@ -1,5 +1,5 @@
 
-import {css} from "@benev/slate"
+import {css} from "lit"
 export default css`
 
 sl-tree-item::part(expand-button) {
@@ -7,12 +7,12 @@ sl-tree-item::part(expand-button) {
 }
 
 sl-tree-item::part(base) {
-	min-height: 30px;
+	min-height: var(--control-height);
 	justify-content: center;
 }
 
 sl-icon:is(.item) {
-	padding: 0.5em;
+	padding: var(--space-sm);
 }
 
 sl-tree-item:not([data-type=folder])::part(expand-button) {
@@ -35,11 +35,11 @@ sl-tree-item:not([data-type=folder])::part(expand-button) {
 }
 
 sl-tree-item {
-	min-height: 30px;
-	transition: background 0.2s ease, border-radius 0.2s ease;
+	min-height: var(--control-height);
+	transition: background var(--transition), border-radius var(--transition);
 
 	::part(label) {
-		gap: 0.5em;
+		gap: var(--space-sm);
 	}
 
 	.folder {
@@ -49,15 +49,15 @@ sl-tree-item {
 	}
 
 	::part(item--selected) {
-		background: rgba(0, 0, 0, 0.4);
-		min-height: 30px;
+		background: var(--surface-selected);
+		min-height: var(--control-height);
 	}
 
 }
 
 sl-tree-item[data-hover] {
-	border-radius: 5px;
-	background: rgba(0, 0, 0, 0.4);
+	border-radius: var(--radius-small);
+	background: var(--surface-selected);
 }
 
 `

package/s/genius/parts/hy-tree.ts

@@ -1,5 +1,6 @@
 
-import {Kv, collect} from "@e280/kv"
+import {collect} from "@e280/stz"
+import {Kv} from "@e280/kv"
 
 export type HyId = string
 export type HyItem = {parent: HyId | null, children: HyId[]}
@@ -27,7 +28,7 @@ export class HyTree {
 	}
 
 	async gets(...ids: HyId[]): Promise<(HyItem | undefined)[]> {
-		const records = await this.records.gets(...ids)
+		const records = await this.records.getMany(ids)
 		return records.map(r => {
 			if (!r) return undefined
 			const [parent, children] = r
@@ -36,13 +37,13 @@ export class HyTree {
 	}
 
 	async require(id: HyId): Promise<HyItem> {
-		const record = await this.records.require(id)
+		const record = await this.records.need(id)
 		const [parent, children] = record
 		return {parent, children}
 	}
 
 	async requires(...ids: HyId[]): Promise<HyItem[]> {
-		const records = await this.records.requires(...ids)
+		const records = await this.records.needMany(ids)
 		return records.map(([parent, children]) => ({parent, children}))
 	}
 
@@ -73,10 +74,10 @@ export class HyTree {
 		}
 
 		// save all new children
-		await this.records.sets(...newcomers)
-
-		// save updated parent item
-		await this.records.set(parent, [parentItem.parent, [...siblings]])
+		await this.records.commit([
+			...newcomers.map(([id, record]) => this.records.op.set(id, record)),
+			this.records.op.set(parent, [parentItem.parent, [...siblings]]),
+		])
 	}
 
 	/** detach this id from its parent in the hierarchy */
@@ -102,7 +103,7 @@ export class HyTree {
 		await this.detach(id)
 		const tree = await collect(this.crawl(id))
 		const ids = tree.map(({id}) => id)
-		await this.records.del(...ids)
+		await this.records.commit(ids.map(id => this.records.op.delete(id)))
 	}
 
 	/** delete absolutely everything */

package/s/index.html.ts

@@ -1,89 +1,84 @@
-import "@benev/slate/x/node.js"
-import {template, html, easypage, headScripts, git_commit_hash, read_file, renderSocialCard, read_json} from "@benev/turtle"
+import {darkreaderDisable, favicon, html, socialCard, template, utf8, viewport} from "@e280/scute"
 
 const domain = "quay.e280.org"
-const favicon = "/assets/favicon.png"
+const faviconUrl = "/assets/favicon.png"
 
-export default template(async basic => {
-	const path = basic.path(import.meta.url)
-	const hash = await git_commit_hash()
-	const version = (await read_json("package.json")).version as string
+export default template(import.meta.url, async orb => {
+	const version = await orb.packageVersion()
 
-	return easypage({
-		path,
-		dark: true,
-		title: "Quay",
-		css: "demo/main.css",
-		head: html`
-			<link rel="icon" href="${favicon}"/>
-			<meta data-commit-hash="${hash}"/>
+	return html`
+		<!doctype html>
+		<html>
+			<head>
+				${utf8()}
+				${viewport()}
+				${darkreaderDisable()}
+				<title>Quay</title>
+				${favicon(faviconUrl)}
 
-			${renderSocialCard({
-				themeColor: "#eb6f1d",
-				siteName: domain,
-				title: "Quay — File-browser UI Framework",
-				description: "Customizable outliner web ui toolkit for nested things",
-				image: `https://${domain}${favicon}`,
-				url: `https://${domain}/`,
-			})}
+				${socialCard({
+					themeColor: "#eb6f1d",
+					siteName: domain,
+					title: "Quay - File-browser UI Framework",
+					description: "Customizable outliner web ui toolkit for nested things",
+					image: `https://${domain}${faviconUrl}`,
+					url: `https://${domain}/`,
+				})}
 
-			${headScripts({
-				devModulePath: await path.version.root("demo/main.bundle.js"),
-				prodModulePath: await path.version.root("demo/main.bundle.min.js"),
-				importmapContent: await read_file("x/importmap.json"),
-			})}
+				<link rel="stylesheet" href="${orb.hashurl("demo/main.css")}"/>
+				<script type="module" src="${orb.hashurl("demo/main.bundle.min.js")}"></script>
 
-			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/dark.css" />
-			<!-- loading every sholeace component for now (should be cherry picked instead) --!>
-			<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace.js" ></script>
-		`,
-		body: html`
-			<header class=title>
-				<img alt="" src="/assets/favicon.png"/>
-				<div>
-					<h1>Quay</h1>
-					<span class=version>v${version}</span>
-				</div>
-			</header>
+				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/dark.css"/>
+				<!-- loading every shoelace component for now (should be cherry picked instead) -->
+				<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace.js"></script>
+			</head>
+			<body>
+				<header class=title>
+					<img alt="" src="/assets/favicon.png"/>
+					<div>
+						<h1>Quay</h1>
+						<span class=version>v${version}</span>
+					</div>
+				</header>
 
-			<div class=components>
+				<div class=components>
+					<div class="component dropzone">
+						<h4>quay-dropzone</h4>
+						<quay-dropzone></quay-dropzone>
+					</div>
 
-				<div class="component dropzone">
-					<h4>quay-dropzone</h2>
-					<quay-dropzone></quay-dropzone>
-				</div>
+					<div class="component outliner">
+						<h4>quay-outliner</h4>
+						<quay-outliner></quay-outliner>
+					</div>
 
-				<div class="component outliner">
-					<h4>quay-outliner</h2>
-					<quay-outliner></quay-outliner>
-				</div>
-
-				<div class="component searchbar">
-					<h4>quay-searchbar</h2>
-					<quay-searchbar></quay-searchbar>
-				</div>
+					<div class="component searchbar">
+						<h4>quay-searchbar</h4>
+						<quay-searchbar></quay-searchbar>
+					</div>
 
-				<div class="component breadcrumb">
-					<h4>quay-breadcrumb</h2>
-					<quay-breadcrumb></quay-breadcrumb>
-				</div>
+					<div class="component breadcrumb">
+						<h4>quay-breadcrumb</h4>
+						<quay-breadcrumb></quay-breadcrumb>
+					</div>
 
-				<div class="component filter">
-					<h4>quay-filter</h2>
-					<quay-filter></quay-filter>
-				</div>
+					<div class="component filter">
+						<h4>quay-filter</h4>
+						<quay-filter></quay-filter>
+					</div>
 
-				<div class="component sort">
-					<h4>quay-sort</h2>
-					<quay-sort></quay-sort>
-				</div>
+					<div class="component sort">
+						<h4>quay-sort</h4>
+						<quay-sort></quay-sort>
+					</div>
 
-				<div class="component browser">
-					<h4>quay-browser</h2>
-					<quay-browser></quay-browser>
+					<div class="component browser">
+						<h4>quay-browser</h4>
+						<quay-browser></quay-browser>
+					</div>
 				</div>
-
-			</div>
-		`,
-	})
+			</body>
+		</html>
+	`
 })
+

package/s/index.ts

@@ -1,9 +1,14 @@
 
-export {register, css} from "@benev/slate"
+export {css} from "lit"
+export {dom} from "@e280/sly"
 
 export * from "./cellar/index.js"
 
 export * from "./dom/components.js"
+export {brain} from "./dom/context.js"
+export * from "./logic/presets/media/schema.js"
+export * from "./logic/presets/media/group.js"
+export * from "./logic/presets/media/library.js"
 import {Permissions} from "./logic/permissions.js"
 
 const Quay = {

package/s/logic/aspects/codex/codex.ts

@@ -29,18 +29,18 @@ export class Codex<Sc extends Schema> {
 		this.clade.setSpecimen(id, kind, specimen)
 		const item = new CodexItem(this, id)
 		this.#items.set(id, item)
-		return item.signal.value
+		return item.signal()
 	}
 
 	/** add an item to the hierachy as a root root */
 	root<I extends CodexItem<Sc>>(item: I) {
 		this.hierarchy.establishRoot(item.id)
-		return item.signal.value
+		return item.signal()
 	}
 
 	/** get an item by its id */
 	require(id: Id): CodexItem<Sc> {
-		return this.#items.require(id).signal.value
+		return this.#items.require(id).signal()
 	}
 }