@e280/quay 0.0.0-2 → 0.0.0-9

package/README.md

@@ -115,3 +115,31 @@ new Quay.Brain({
 
 In this way, you can setup sophisticated rules about what actions are permitted, and under whatever changing circumstances.
 
+<br/>
+
+## MediaStore
+
+`MediaStore` is a small persistent media-bin preset.
+
+```ts
+import {MediaStore, brain, register, components} from "@e280/quay"
+
+const media = await MediaStore.open("my-project")
+brain.setGroup("media", media)
+
+register(components)
+```
+
+```html
+<div group="media">
+  <quay-dropzone></quay-dropzone>
+  <quay-browser></quay-browser>
+</div>
+```
+
+The scope passed to `open()` separates media libraries.
+
+```ts
+const projectA = await MediaStore.open("project-a")
+const projectB = await MediaStore.open("project-b")
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/quay",
-	"version": "0.0.0-2",
+	"version": "0.0.0-9",
 	"description": "File-browser and outliner UI for the web",
 	"author": "Przemysław Gałęzki",
 	"license": "MIT",
@@ -11,28 +11,31 @@
 		"s"
 	],
 	"dependencies": {
-		"@benev/slate": "^0.3.5",
 		"@e280/kv": "^0.0.0-7",
-		"@e280/stz": "^0.0.0-22"
+		"@e280/scute": "^0.4.0-next.4",
+		"@e280/sly": "^0.4.0-next.5",
+		"@e280/strata": "^0.4.0-next.8",
+		"@e280/stz": "^0.0.0-22",
+		"lit": "^3.3.1"
 	},
 	"devDependencies": {
-		"@benev/turtle": "^0.6.13",
+		"@e280/hottie": "^0.1.1",
 		"@e280/science": "^0.0.5",
 		"@shoelace-style/shoelace": "^2.20.1",
-		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^5.8.3"
 	},
 	"scripts": {
 		"build": "rm -rf x && mkdir x && run-s _code _ssg _ln",
-		"start": "run-p _http _turtlewatch",
+		"start": "run-p _http _tscwatch _scutewatch",
 		"test": "node x/tests.test.js",
 		"test-watch": "node --watch x/tests.test.js",
 		"test-inspect": "node inspect x/tests.test.js",
-		"_code": "turtle build --out=x",
-		"_ssg": "turtle ssg --in=s,x --out=x",
-		"_http": "http-server x",
-		"_turtlewatch": "turtle watch --in=s,x --out=x -v",
+		"_code": "tsc",
+		"_ssg": "scute --in=s,x --out=x",
+		"_http": "hottie x",
+		"_tscwatch": "tsc -w",
+		"_scutewatch": "scute --in=s,x --out=x -vw",
 		"_ln": "run-s _ln:s _ln:assets",
 		"_ln:s": "ln -s \"$(realpath s)\" x/s",
 		"_ln:assets": "ln -s \"$(realpath assets)\" x/assets",

package/s/demo/main.bundle.ts

@@ -1,5 +1,5 @@
 
-import {register} from "@benev/slate"
+import {dom} from "@e280/sly"
 import {brain} from "../dom/context.js"
 import {MediaGroup} from "../logic/presets/media/group.js"
 import {MediaFormat} from "../logic/presets/media/schema.js"
@@ -35,5 +35,4 @@ group.on.upload.sub(({files, target}) => {
 })
 
 setShoelaceDarkTheme()
-register(components)
-
+dom.register(components)

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

@@ -1,22 +1,23 @@
 
-import {html, shadowComponent} from "@benev/slate"
+import {html} from "lit"
+import {shadowElement, useHost, useStyles} from "@e280/sly"
 
 import themeCss from "../../theme.css.js"
 
 import {findLocalGroup} from "../../utils/find-local-group.js"
 import {CodexItem} from "../../../logic/aspects/codex/parts/codex-item.js"
 
-export const QuayBreadcrumb = shadowComponent(use => {
-	use.css(themeCss)
+export const QuayBreadcrumb = shadowElement(() => {
+	useStyles(themeCss)
 
-	const group = findLocalGroup(use.element)
+	const group = findLocalGroup(useHost())
 	const {trail, config: {codex, renderLabel}} = group
 
 	const click = (item: CodexItem) => (e: Event) => group.trail.setTrail(e, item)
 
 	return html`
 		<sl-breadcrumb>
-			${trail.signal.value.map(item => html`
+			${trail.signal().map(item => html`
 				<sl-breadcrumb-item @click="${click(item)}">
 					${item === null
 						? "root"

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

@@ -1,4 +1,6 @@
-import {html, shadowComponent} from "@benev/slate"
+
+import {html} from "lit"
+import {shadowElement, useHost, useMount, useRender, useState, useStyles} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import themeCss from "../../theme.css.js"
@@ -6,15 +8,17 @@ import themeCss from "../../theme.css.js"
 import {findLocalGroup} from "../../utils/find-local-group.js"
 import {CodexItem} from "../../../logic/aspects/codex/parts/codex-item.js"
 
-export const QuayBrowser = shadowComponent(use => {
-	use.styles(themeCss, styleCss)
+export const QuayBrowser = shadowElement(() => {
+	useStyles(themeCss, styleCss)
+	const host = useHost()
+	const render = useRender()
 
-	const group = findLocalGroup(use.element)
+	const group = findLocalGroup(host)
 	const {trail, config} = group
-	const [viewMode, setViewMode] = use.state<'details' | 'tiles'>('tiles')
+	const [viewMode, setViewMode] = useState<'details' | 'tiles'>('tiles')
 
-	use.mount(() => {
-		const dispose = group.on.upload.sub(() => use.rerender())
+	useMount(() => {
+		const dispose = group.on.upload.sub(() => render())
 		return () => dispose()
 	})
 

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

@@ -1,5 +1,5 @@
 
-import {css} from "@benev/slate"
+import {css} from "lit"
 export default css`
 
 .toolbar {

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

@@ -1,15 +1,17 @@
 
-import {html, shadowComponent} from "@benev/slate"
+import {html} from "lit"
+import {shadowElement, useHost, useStyles} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import themeCss from "../../theme.css.js"
 
 import {findLocalGroup} from "../../utils/find-local-group.js"
 
-export const QuayDropzone = shadowComponent(use => {
-	use.styles(themeCss, styleCss)
+export const QuayDropzone = shadowElement(() => {
+	useStyles(themeCss, styleCss)
+	const host = useHost()
 
-	const group = findLocalGroup(use.element)
+	const group = findLocalGroup(host)
 	const {dropzone, config: {root}} = group
 
 	return html`

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 {

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

@@ -1,12 +1,16 @@
-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;
 
@@ -20,7 +24,7 @@ export const QuayFilter = shadowComponent(use => {
 
 	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,5 +1,7 @@
 
-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'
@@ -10,9 +12,10 @@ const styleCss = css`
 	}
 `
 
-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,7 +23,7 @@ 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,12 +1,16 @@
-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;
 		}
@@ -24,7 +28,7 @@ export const QuaySort = shadowComponent(use => {
 
 	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,4 +1,5 @@
-import {css} from "@benev/slate"
+
+import {css} from "lit"
 export default css`@layer theme, view; @layer theme {
 
 * {

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) {

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/store.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()
 	}
 }
 

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

@@ -1,7 +1,4 @@
 
-import "@benev/slate/x/node.js"
-import {repeat_string} from "@benev/turtle"
-
 import {Codex} from "./codex.js"
 import {AsSchema, Taxon} from "./parts/types.js"
 
@@ -48,7 +45,7 @@ src
 	//                   we can crawl any folder!
 	//                                    👇
 for (const [item, ancestors] of folder.crawl()) {
-	const indent = repeat_string(ancestors.length, "  ")
+	const indent = "  ".repeat(ancestors.length)
 	const specimen = item.specimen
 	const label = item.kind === "folder"
 		? specimen.label + "/"

package/s/logic/aspects/codex/parts/codex-item.ts

@@ -1,5 +1,5 @@
 
-import {signal} from "@benev/slate"
+import {signal} from "@e280/strata"
 import {Codex} from "../codex.js"
 import {Id, Kind, Schema} from "./types.js"
 
@@ -52,14 +52,14 @@ export class CodexItem<Sc extends Schema = any, K extends Kind<Sc> = Kind<Sc>> {
 	/** add items as children */
 	attach(...items: CodexItem<Sc>[]) {
 		this.codex.hierarchy.attach(this.id, ...items.map(i => i.id))
-		this.signal.publish()
+		this.signal(this)
 		return this
 	}
 
 	/** detach this item from the hierarchy completely */
 	detach() {
 		this.codex.hierarchy.detach(this.id)
-		this.signal.publish()
+		this.signal(this)
 	}
 
 	/** create a new item that will be a child */
@@ -72,7 +72,7 @@ export class CodexItem<Sc extends Schema = any, K extends Kind<Sc> = Kind<Sc>> {
 	/** create a new item that will be a child */
 	destroy() {
 		this.codex.hierarchy.destroy(this.id)
-		this.signal.publish()
+		this.signal(this)
 	}
 
 	/** iterate over this item and all its descendants */