@e280/quay 0.0.0-2 → 0.0.0-20

package/README.md

@@ -115,3 +115,101 @@ new Quay.Brain({
 
 In this way, you can setup sophisticated rules about what actions are permitted, and under whatever changing circumstances.
 
+<br/>
+
+## MediaLibrary
+
+`MediaLibrary` is a small persistent media-bin preset.
+
+```ts
+import {MediaLibrary, brain, register, components} from "@e280/quay"
+
+const media = await MediaLibrary.open("my-app")
+brain.setGroup("media", media)
+
+register(components)
+```
+
+```html
+<div group="media">
+  <quay-dropzone></quay-dropzone>
+  <quay-browser></quay-browser>
+</div>
+```
+
+Open a library once, then derive nested scopes as needed.
+
+```ts
+const project = await media.scope("project-a")
+const favorites = await project.scope("favorites")
+```
+
+Media already in the library can be included in another scope without uploading
+it again.
+
+```ts
+await project.include(hash)
+```
+
+Adding media to a scope also adds it to every parent scope. Removing media from
+a scope removes it from that scope and its child scopes. Removing it from the
+root removes it everywhere, including its stored file.
+
+<br/>
+
+## Styling
+
+Customize quay through its css vars
+
+```css
+:root {
+  --quay-surface: #111;
+  --quay-border: #222;
+  --quay-text: #333;
+  --quay-muted: #777;
+  --quay-accent: #0ea5e9;
+  --quay-radius: 6px;
+}
+```
+
+You can scope those variables to one area or one component.
+
+```css
+.media-panel {
+  --quay-surface: #18181b;
+  --quay-border: #27272a;
+}
+
+quay-browser {
+  --quay-browser-thumb-width: 120px;
+  --quay-browser-thumb-height: 72px;
+}
+```
+
+Public tokens:
+
+```css
+--quay-surface
+--quay-surface-hover
+--quay-surface-selected
+--quay-border
+--quay-text
+--quay-muted
+--quay-accent
+--quay-radius
+--quay-browser-thumb-width
+--quay-browser-thumb-height
+```
+
+Quay is built on Shoelace, and its internal theme uses Shoelace tokens as fallbacks.
+For deeper control, set Shoelace tokens in your app or scoped around Quay,
+watch out for conflicts if you already use shoelace components in your app.
+
+```css
+.media-panel {
+  --sl-color-primary-600: #575757;
+  --sl-input-focus-ring-color: rgb(119 119 119 / 35%);
+  --sl-border-radius-medium: 3px;
+  --sl-spacing-x-small: 0.5em;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/quay",
-	"version": "0.0.0-2",
+	"version": "0.0.0-20",
 	"description": "File-browser and outliner UI for the web",
 	"author": "Przemysław Gałęzki",
 	"license": "MIT",
@@ -11,28 +11,34 @@
 		"s"
 	],
 	"dependencies": {
-		"@benev/slate": "^0.3.5",
-		"@e280/kv": "^0.0.0-7",
-		"@e280/stz": "^0.0.0-22"
+		"@e280/comrade": "^0.1.0",
+		"@e280/kv": "^0.2.0-3",
+		"@e280/mammoth": "^0.1.0-19",
+		"@e280/scute": "^0.4.0-next.4",
+		"@e280/sly": "^0.4.0-next.5",
+		"@e280/strata": "^0.4.0-next.8",
+		"@e280/stz": "^0.2.8",
+		"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",
+		"@types/wicg-file-system-access": "^2023.10.7",
 		"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/cellar/cask.ts

@@ -1,18 +1,6 @@
 
-import {Hex} from "@e280/stz"
-
 /** File with a hash label */
 export class Cask {
-	static async hash(bytes: Uint8Array) {
-		const hashBuffer = await crypto.subtle.digest("SHA-256", bytes)
-		return Hex.fromBytes(new Uint8Array(hashBuffer))
-	}
-
-	static async make(bytes: Uint8Array) {
-		const hash = await this.hash(bytes)
-		return new this(hash, bytes)
-	}
-
-	constructor(public hash: string, public bytes: Uint8Array) {}
+	constructor(public hash: string, public file: Blob) {}
 }
 

package/s/cellar/cellar.test.ts

@@ -2,57 +2,42 @@
 import {Txt} from "@e280/stz"
 import {expect, Science, test} from "@e280/science"
 
-import {Cask} from "./cask.js"
 import {Cellar} from "./cellar.js"
-import {MemoryForklift} from "./memory-forklift.js"
+
+const blob = (text: string) => new Blob([Txt.toBytes(text)])
 
 export default Science.suite({
-	"save + load roundtrip": test(async() => {
+	"write + load roundtrip": test(async() => {
 		const cellar = new Cellar()
 		const text = "hello world"
-		const bytes = Txt.toBytes(text)
-		await cellar.save(bytes)
+		const file = blob(text)
+		const digest = await cellar.write(file.stream())
 
-		const hash = await Cask.hash(bytes)
-		expect(await cellar.has(hash)).is(true)
+		expect(await cellar.has(digest)).is(true)
 
-		const loaded = await cellar.load(hash)
-		expect(loaded.hash).is(hash)
-		expect(Txt.fromBytes(loaded.bytes)).is(text)
+		const loaded = await cellar.load(digest)
+		expect(loaded.hash).is(digest)
+		expect(await loaded.file.text()).is(text)
 	}),
 
-	"save is idempotent": test(async() => {
+	"write is idempotent": test(async() => {
 		const cellar = new Cellar()
-		const bytes = new TextEncoder().encode("foo bar")
-		await cellar.save(bytes)
-		await cellar.save(bytes) // again
-
-		const hash = await Cask.hash(bytes)
-		expect(await cellar.has(hash)).is(true)
-	}),
-
-	"throws on corruption": test(async() => {
-		const forklift = new MemoryForklift()
-		const cellar = new Cellar(forklift)
-		const good = new TextEncoder().encode("valid data")
-		const bad = new TextEncoder().encode("corrupt data")
-
-		const hash = await Cask.hash(good)
-		await forklift.save(hash, bad)
+		const file = blob("foo bar")
+		const digest = await cellar.write(file.stream())
+		expect(await cellar.write(file.stream())).is(digest)
 
-		await expect(async() => cellar.load(hash)).throwsAsync()
+		expect(await cellar.has(digest)).is(true)
 	}),
 
 	"delete removes file": test(async() => {
 		const cellar = new Cellar()
-		const bytes = new TextEncoder().encode("temporary data")
-		await cellar.save(bytes)
+		const file = blob("temporary data")
+		const digest = await cellar.write(file.stream())
 
-		const hash = await Cask.hash(bytes)
-		expect(await cellar.has(hash)).is(true)
+		expect(await cellar.has(digest)).is(true)
 
-		await cellar.delete(hash)
-		expect(await cellar.has(hash)).is(false)
+		await cellar.delete(digest)
+		expect(await cellar.has(digest)).is(false)
 	}),
 
 	"load missing throws": test(async() => {
@@ -67,24 +52,22 @@ export default Science.suite({
 		const texts = ["a", "b", "c"]
 
 		for (const t of texts)
-			await cellar.save(Txt.toBytes(t))
+			await cellar.write(blob(t).stream())
 
 		const hashes = []
 		for await (const hash of cellar.list())
 			hashes.push(hash)
 
 		expect(hashes.length).is(3)
-		for (const t of texts) {
-			const h = await Cask.hash(Txt.toBytes(t))
-			expect(hashes.includes(h)).is(true)
-		}
+		for (const text of texts)
+			expect(hashes.includes(await cellar.write(blob(text).stream()))).is(true)
 	}),
 
 	"clear removes all entries": test(async() => {
 		const cellar = new Cellar()
-		await cellar.save(Txt.toBytes("one"))
-		await cellar.save(Txt.toBytes("two"))
-		await cellar.save(Txt.toBytes("three"))
+		await cellar.write(blob("one").stream())
+		await cellar.write(blob("two").stream())
+		await cellar.write(blob("three").stream())
 
 		let count = 0
 		for await (const _ of cellar.list()) count++

package/s/cellar/cellar.ts

@@ -1,49 +1,45 @@
 
+import {Mammoth} from "@e280/mammoth"
+
 import {Cask} from "./cask.js"
-import {Forklift} from "./forklift.js"
-import {OpfsForklift} from "./opfs-forklift.js"
-import {MemoryForklift} from "./memory-forklift.js"
+import {MammothOpfs} from "./mammoth.js"
 
 /**
  * Cellar is an immutable content-addressable file store
  *  - files are identified by their hashes (duplicates are impossible)
  *  - files cannot be modified (delete it and save another)
  *  - no filenames or metadata (store those somewhere else)
- *  - pass in a forklift, which is the backend that actually stores the data
- *    - MemoryForklift is the default
- *    - OpfsForklift is probably what you really want in the browser
+ *  - new Cellar uses Mammoth's in-memory backend by default
+ *  - Cellar.opfs creates MammothOpfs for persistent browser storage
+ *  - pass in a Mammoth to use a different backend
+ *  - most likely you want to use Cellar.opfs for storing files in the browser
  */
 export class Cellar {
 	static async opfs(dirname = "cellar") {
-		return new this(await OpfsForklift.setup(dirname))
+		return new this(await MammothOpfs.setup(dirname))
 	}
 
-	constructor(private forklift: Forklift = new MemoryForklift()) {}
+	constructor(private mammoth: Mammoth | MammothOpfs = new Mammoth()) {}
 
 	async *list(): AsyncIterable<string> {
-		yield* this.forklift.list()
+		for await (const [hash] of this.mammoth.entries())
+			yield hash
 	}
 
 	async has(hash: string): Promise<boolean> {
-		return this.forklift.has(hash)
+		return this.mammoth.has(hash)
 	}
 
-	async save(bytes: Uint8Array) {
-		const cask = await Cask.make(bytes)
-		if (!await this.forklift.has(cask.hash))
-			await this.forklift.save(cask.hash, cask.bytes)
-		return cask
+	async write(readable: ReadableStream<Uint8Array>) {
+		return this.mammoth.write(readable)
 	}
 
 	async load(hash: string): Promise<Cask> {
-		const bytes = await this.forklift.load(hash)
-		const cask = await Cask.make(bytes)
-		if (cask.hash !== hash) throw new Error(`corruption error, hash mismatch (requested ${hash}) (got ${cask.hash})`)
-		return cask
+		return new Cask(hash, await this.mammoth.read(hash))
 	}
 
 	async delete(hash: string) {
-		await this.forklift.delete(hash)
+		await this.mammoth.delete(hash)
 	}
 
 	async clear() {

package/s/cellar/index.ts

@@ -1,7 +1,3 @@
 
 export * from "./cask.js"
 export * from "./cellar.js"
-export * from "./forklift.js"
-export * from "./memory-forklift.js"
-export * from "./opfs-forklift.js"
-

package/s/cellar/mammoth.ts

@@ -0,0 +1,50 @@
+
+import {Comrade, Thread, tune, AsSchematic} from "@e280/comrade"
+
+export type MammothSchematic = AsSchematic<{
+	work: {
+		setup(dirname: string): Promise<void>
+		write(readable: ReadableStream<Uint8Array>): Promise<string>
+		has(hash: string): Promise<boolean>
+		read(hash: string): Promise<Blob>
+		delete(hash: string): Promise<void>
+		hashes(): Promise<string[]>
+	}
+	host: {}
+}>
+
+/** Worker proxy for Mammoth using an OPFS bucket and IndexedDB manifest. */
+export class MammothOpfs {
+	static async setup(dirname: string) {
+		const thread = await Comrade.thread<MammothSchematic>({
+			workerUrl: "/node_modules/@e280/quay/x/cellar/mammoth.worker.bundle.min.js",
+			setupHost: () => ({}),
+		})
+		const mammoth = new this(thread)
+		await mammoth.thread.work.setup(dirname)
+		return mammoth
+	}
+
+	constructor(private thread: Thread<MammothSchematic>) {}
+
+	async write(readable: ReadableStream<Uint8Array>) {
+		return this.thread.work.write[tune]({transfer: [readable]})(readable)
+	}
+
+	async has(hash: string) {
+		return this.thread.work.has(hash)
+	}
+
+	async read(hash: string) {
+		return this.thread.work.read(hash)
+	}
+
+	async delete(hash: string) {
+		return this.thread.work.delete(hash)
+	}
+
+	async *entries(): AsyncIterable<[string, unknown]> {
+		for (const hash of await this.thread.work.hashes())
+			yield [hash, undefined]
+	}
+}

package/s/cellar/mammoth.worker.bundle.ts

@@ -0,0 +1,30 @@
+
+import {collect} from "@e280/stz"
+import {Comrade} from "@e280/comrade"
+import {Mammoth, OpfsBucket} from "@e280/mammoth"
+import {idbOpen, IdbMagazine, Kv} from "@e280/kv"
+
+import type {MammothSchematic} from "./mammoth.js"
+
+let mammoth: Mammoth
+
+await Comrade.worker<MammothSchematic>(() => ({
+	async setup(dirname) {
+		const root = await navigator.storage.getDirectory()
+		const directory = await root.getDirectoryHandle(dirname, {create: true})
+		mammoth = new Mammoth(
+			new OpfsBucket(directory),
+			new Kv(new IdbMagazine(await idbOpen(`quay.mammoth:${dirname}`))),
+		)
+	},
+
+	write: readable => mammoth.write(readable),
+	has: hash => mammoth.has(hash),
+	read: hash => mammoth.read(hash),
+	delete: hash => mammoth.delete(hash),
+
+	async hashes() {
+		return (await collect(mammoth.entries())).map(([hash]) => hash)
+	},
+}))
+

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.refresh.sub(() => render())
 		return () => dispose()
 	})
 

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

@@ -1,42 +1,43 @@
 
-import {css} from "@benev/slate"
+import {css} from "lit"
 export default css`
 
 .toolbar {
 	display: flex;
 	justify-content: flex-end;
-	padding: 0.5rem;
+	padding: var(--space-sm);
 
 	sl-button {
-		background: #0F0F11;
-		border-radius: 5px;
+		background: var(--surface);
+		border-radius: var(--radius-small);
 
 		&[data-active=true] {
-			background: var(--sl-color-neutral-0);
+			background: var(--surface-active);
 		}
 
 		&::part(base) {
 			display: flex;
 			align-items: center;
-			height: 30px;
+			height: var(--control-height);
+			border-radius: var(--radius-small);
 		}
 
 		&::part(label) {
 			display: flex;
-			width: 40px;
+			width: var(--control-width);
 		}
 	}
 }
 
 .tiles,
 .details {
-	padding: 0.5rem;
+	padding: var(--space-sm);
 }
 
 .tiles {
 	display: flex;
 	flex-wrap: wrap;
-	row-gap: 1em;
+	row-gap: var(--space-md);
 	width: 100%;
 
 	.item {
@@ -50,11 +51,11 @@ export default css`
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 100px;
-			height: 60px;
-			border: 2px solid #0D0D0E;
-			border-radius: 5px;
-			background: #0F0F11;
+			width: var(--quay-browser-thumb-width, 100px);
+			height: var(--quay-browser-thumb-height, 60px);
+			border: var(--border-width) solid var(--border);
+			border-radius: var(--radius-small);
+			background: var(--surface);
 			pointer-events: none;
 
 			img {
@@ -64,14 +65,14 @@ export default css`
 		}
 
 		.label {
-			margin-top: 0.5em;
+			margin-top: var(--space-xs);
 			max-width: 150px;
-			font-size: 0.85rem;
+			font-size: var(--font-size-sm);
 			text-align: center;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			color: var(--sl-color-neutral-700);
+			color: var(--text-muted);
 		}
 	}
 }
@@ -79,40 +80,39 @@ export default css`
 .details {
 	.card {
 		display: flex;
-		gap: 1rem;
-		padding: 0.8rem;
-		border: 2px solid #0D0D0E;
-		background: #0F0F11;
-		border-radius: 6px;
-		margin-bottom: 0.5rem;
+		gap: var(--space-md);
+		padding: var(--space-sm);
+		border: var(--border-width) solid var(--border);
+		background: var(--surface);
+		border-radius: var(--radius);
+		margin-bottom: var(--space-sm);
 		align-items: center;
 
 		.meta {
 			.name {
 				font-weight: 500;
-				color: var(--sl-color-neutral-800);
+				color: var(--text);
 			}
 			.type {
-				font-size: 0.75rem;
-				color: var(--sl-color-neutral-500);
+				font-size: var(--font-size-xs);
+				color: var(--text-subtle);
 			}
 		}
 	}
 }
 
 sl-icon {
-	font-size: 2rem;
-	color: var(--sl-color-neutral-300);
+	font-size: var(--icon-size);
+	color: var(--icon);
 }
 
 sl-tooltip {
 	--sl-tooltip-arrow-size: 0;
 
 	&::part(body) {
-		background: #0D0D0E;
-		color: var(--sl-color-neutral-700);
+		background: var(--border);
+		color: var(--text-muted);
 	}
 }
 
 `
-

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`