@e280/quay 0.0.0-12 → 0.0.0-13

package/README.md

@@ -143,3 +143,62 @@ The scope passed to `open()` separates media libraries.
 const projectA = await MediaLibrary.open("project-a")
 const projectB = await MediaLibrary.open("project-b")
 ```
+
+<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-12",
+	"version": "0.0.0-13",
 	"description": "File-browser and outliner UI for the web",
 	"author": "Przemysław Gałęzki",
 	"license": "MIT",
@@ -16,6 +16,7 @@
 		"@e280/sly": "^0.4.0-next.5",
 		"@e280/strata": "^0.4.0-next.8",
 		"@e280/stz": "^0.0.0-22",
+		"@noble/hashes": "^2.2.0",
 		"lit": "^3.3.1"
 	},
 	"devDependencies": {

package/s/cellar/cask.ts

@@ -1,18 +1,24 @@
 
 import {Hex} from "@e280/stz"
+import {blake3} from "@noble/hashes/blake3.js"
 
 /** 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 hash(file: Blob) {
+		const hasher = blake3.create()
+
+		for await (const chunk of file.stream())
+			hasher.update(chunk)
+
+		const digest = hasher.digest()
+		return Hex.fromBytes(digest)
 	}
 
-	static async make(bytes: Uint8Array) {
-		const hash = await this.hash(bytes)
-		return new this(hash, bytes)
+	static async make(file: Blob) {
+		const hash = await this.hash(file)
+		return new this(hash, file)
 	}
 
-	constructor(public hash: string, public bytes: Uint8Array) {}
+	constructor(public hash: string, public file: Blob) {}
 }
 

package/s/cellar/cellar.test.ts

@@ -6,36 +6,38 @@ 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() => {
 		const cellar = new Cellar()
 		const text = "hello world"
-		const bytes = Txt.toBytes(text)
-		await cellar.save(bytes)
+		const file = blob(text)
+		await cellar.save(file)
 
-		const hash = await Cask.hash(bytes)
+		const hash = await Cask.hash(file)
 		expect(await cellar.has(hash)).is(true)
 
 		const loaded = await cellar.load(hash)
 		expect(loaded.hash).is(hash)
-		expect(Txt.fromBytes(loaded.bytes)).is(text)
+		expect(await loaded.file.text()).is(text)
 	}),
 
 	"save 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 file = blob("foo bar")
+		await cellar.save(file)
+		await cellar.save(file) // again
 
-		const hash = await Cask.hash(bytes)
+		const hash = await Cask.hash(file)
 		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 good = blob("valid data")
+		const bad = blob("corrupt data")
 
 		const hash = await Cask.hash(good)
 		await forklift.save(hash, bad)
@@ -45,10 +47,10 @@ export default Science.suite({
 
 	"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")
+		await cellar.save(file)
 
-		const hash = await Cask.hash(bytes)
+		const hash = await Cask.hash(file)
 		expect(await cellar.has(hash)).is(true)
 
 		await cellar.delete(hash)
@@ -67,7 +69,7 @@ export default Science.suite({
 		const texts = ["a", "b", "c"]
 
 		for (const t of texts)
-			await cellar.save(Txt.toBytes(t))
+			await cellar.save(blob(t))
 
 		const hashes = []
 		for await (const hash of cellar.list())
@@ -75,16 +77,16 @@ export default Science.suite({
 
 		expect(hashes.length).is(3)
 		for (const t of texts) {
-			const h = await Cask.hash(Txt.toBytes(t))
+			const h = await Cask.hash(blob(t))
 			expect(hashes.includes(h)).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.save(blob("one"))
+		await cellar.save(blob("two"))
+		await cellar.save(blob("three"))
 
 		let count = 0
 		for await (const _ of cellar.list()) count++

package/s/cellar/cellar.ts

@@ -28,10 +28,10 @@ export class Cellar {
 		return this.forklift.has(hash)
 	}
 
-	async save(bytes: Uint8Array) {
-		const cask = await Cask.make(bytes)
+	async save(file: Blob) {
+		const cask = await Cask.make(file)
 		if (!await this.forklift.has(cask.hash))
-			await this.forklift.save(cask.hash, cask.bytes)
+			await this.forklift.save(cask.hash, cask.file)
 		return cask
 	}
 

package/s/cellar/forklift.ts

@@ -2,8 +2,8 @@
 export type Forklift = {
 	list(): AsyncIterable<string>
 	has(label: string): Promise<boolean>
-	save(label: string, bytes: Uint8Array): Promise<void>
-	load(label: string): Promise<Uint8Array>
+	save(label: string, file: Blob): Promise<void>
+	load(label: string): Promise<Blob>
 	delete(label: string): Promise<void>
 }
 

package/s/cellar/memory-forklift.ts

@@ -14,12 +14,13 @@ export class MemoryForklift implements Forklift {
 		return this.#map.has(label)
 	}
 
-	async save(label: string, bytes: Uint8Array): Promise<void> {
+	async save(label: string, file: Blob): Promise<void> {
+		const bytes = new Uint8Array(await file.arrayBuffer())
 		this.#map.set(label, bytes)
 	}
 
-	async load(label: string): Promise<Uint8Array> {
-		return this.#map.require(label)
+	async load(label: string): Promise<Blob> {
+		return new Blob([this.#map.require(label)])
 	}
 
 	async delete(label: string) {

package/s/cellar/opfs-forklift.ts

@@ -28,18 +28,16 @@ export class OpfsForklift implements Forklift {
 		}
 	}
 
-	async save(label: string, bytes: Uint8Array): Promise<void> {
+	async save(label: string, file: Blob): Promise<void> {
 		const fileHandle = await this.directory.getFileHandle(label, {create: true})
 		const writable = await fileHandle.createWritable()
-		await writable.write(bytes)
+		await writable.write(file)
 		await writable.close()
 	}
 
-	async load(label: string): Promise<Uint8Array> {
+	async load(label: string): Promise<Blob> {
 		const fileHandle = await this.directory.getFileHandle(label)
-		const file = await fileHandle.getFile()
-		const buffer = await file.arrayBuffer()
-		return new Uint8Array(buffer)
+		return await fileHandle.getFile()
 	}
 
 	async delete(label: string) {

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

@@ -5,38 +5,39 @@ 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/style.css.ts

@@ -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

@@ -12,12 +12,12 @@ export const QuayFilter = shadowElement(() => {
 
 	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);
 			}
 		}
 	`)

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

@@ -7,8 +7,12 @@ 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);
 	}
 `
 
@@ -29,4 +33,3 @@ export const QuaySearchbar = shadowElement(() => {
 		</sl-input>
 	`
 })
-

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

@@ -12,16 +12,16 @@ export const QuaySort = shadowElement(() => {
 
 	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);
 			}
 		}
 	`)

package/s/dom/theme.css.ts

@@ -2,6 +2,34 @@
 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;

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

@@ -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/logic/presets/media/library.ts

@@ -60,8 +60,7 @@ export class MediaLibrary extends MediaGroup {
 	}
 
 	async #storeFile(file: File, parent: CodexItem<MediaSchema>) {
-		const bytes = new Uint8Array(await file.arrayBuffer())
-		const cask = await this.cellar.save(bytes)
+		const cask = await this.cellar.save(file)
 		const existing = await this.#index.get(cask.hash)
 		const now = Date.now()
 		const record: MediaRecord = {
@@ -126,7 +125,7 @@ export class MediaLibrary extends MediaGroup {
 
 	async #loadPreview(record: MediaRecord) {
 		const cask = await this.cellar.load(record.hash)
-		const blob = new Blob([cask.bytes], {type: record.mime || "image/*"})
+		const blob = new Blob([cask.file], {type: record.mime || "image/*"})
 		return this.#setPreview(record.hash, URL.createObjectURL(blob))
 	}
 

package/x/cellar/cask.d.ts

@@ -1,8 +1,8 @@
 /** File with a hash label */
 export declare class Cask {
     hash: string;
-    bytes: Uint8Array;
-    static hash(bytes: Uint8Array): Promise<string>;
-    static make(bytes: Uint8Array): Promise<Cask>;
-    constructor(hash: string, bytes: Uint8Array);
+    file: Blob;
+    static hash(file: Blob): Promise<string>;
+    static make(file: Blob): Promise<Cask>;
+    constructor(hash: string, file: Blob);
 }

package/x/cellar/cask.js

@@ -1,19 +1,23 @@
 import { Hex } from "@e280/stz";
+import { blake3 } from "@noble/hashes/blake3.js";
 /** File with a hash label */
 export class Cask {
     hash;
-    bytes;
-    static async hash(bytes) {
-        const hashBuffer = await crypto.subtle.digest("SHA-256", bytes);
-        return Hex.fromBytes(new Uint8Array(hashBuffer));
+    file;
+    static async hash(file) {
+        const hasher = blake3.create();
+        for await (const chunk of file.stream())
+            hasher.update(chunk);
+        const digest = hasher.digest();
+        return Hex.fromBytes(digest);
     }
-    static async make(bytes) {
-        const hash = await this.hash(bytes);
-        return new this(hash, bytes);
+    static async make(file) {
+        const hash = await this.hash(file);
+        return new this(hash, file);
     }
-    constructor(hash, bytes) {
+    constructor(hash, file) {
         this.hash = hash;
-        this.bytes = bytes;
+        this.file = file;
     }
 }
 //# sourceMappingURL=cask.js.map

package/x/cellar/cask.js.map

@@ -1 +1 @@
-{"version":3,"file":"cask.js","sourceRoot":"","sources":["../../s/cellar/cask.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAE7B,6BAA6B;AAC7B,MAAM,OAAO,IAAI;IAWG;IAAqB;IAVxC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAiB;QAClC,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;QAC/D,OAAO,GAAG,CAAC,SAAS,CAAC,IAAI,UAAU,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAC7B,CAAC;IAED,YAAmB,IAAY,EAAS,KAAiB;QAAtC,SAAI,GAAJ,IAAI,CAAQ;QAAS,UAAK,GAAL,KAAK,CAAY;IAAG,CAAC;CAC7D"}
+{"version":3,"file":"cask.js","sourceRoot":"","sources":["../../s/cellar/cask.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAA;AAE9C,6BAA6B;AAC7B,MAAM,OAAO,IAAI;IAgBG;IAAqB;IAfxC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAU;QAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAA;QAE9B,IAAI,KAAK,EAAE,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;YACtC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAErB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAA;QAC9B,OAAO,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC7B,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAU;QAC3B,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAClC,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAC5B,CAAC;IAED,YAAmB,IAAY,EAAS,IAAU;QAA/B,SAAI,GAAJ,IAAI,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAM;IAAG,CAAC;CACtD"}