@e280/quay 0.0.0-1

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

@@ -0,0 +1,75 @@
+import {html, shadowComponent} from "@benev/slate"
+
+import styleCss from "./style.css.js"
+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)
+
+	const group = findLocalGroup(use.element)
+	const {trail, config} = group
+	const [viewMode, setViewMode] = use.state<'details' | 'tiles'>('tiles')
+
+	use.mount(() => {
+		const dispose = group.on.upload.sub(() => use.rerender())
+		return () => dispose()
+	})
+
+	const getItems = () => {
+		return group.sort(trail.currentFolder).filter(item => group.matches(item)) as CodexItem[]
+	}
+
+	const renderTiles = () => html`
+		<div class="tiles">
+			${getItems().map(item => html`
+				<div class="item" @click="${(e: Event) => trail.setTrail(e, item)}">
+					<div class="media-icon">
+						${config.renderPreview(item) ?? config.renderIcon(item, false)}
+					</div>
+					<div class="label" title="${config.renderLabel(item)}">
+						${config.renderLabel(item)}
+					</div>
+				</div>
+			`)}
+		</div>
+	`
+
+	const renderDetails = () => html`
+		<div class="details">
+			${getItems().map(item => html`
+				<div @click=${(e: Event) => trail.setTrail(e, item)} class="card">
+					${config.renderIcon(item, false)}
+					<div class=meta>
+						<div class=name>${config.renderLabel(item)}</div>
+						<div class=type>${item.kind}</div>
+					</div>
+				</div>
+			`)}
+		</div>
+	`
+	// // TODO icons
+	// <sl-icon name=${item.taxon.icon}></sl-icon>
+
+	return html`
+		<div class="toolbar">
+			<sl-button-group label="View mode">
+				<sl-tooltip content="Tiles">
+					<sl-button size="small" outline data-active=${viewMode === 'tiles'} @click=${() => setViewMode('tiles')}>
+						<sl-icon name="grid-3x3-gap"></sl-icon>
+					</sl-button>
+				</sl-tooltip>
+				<sl-tooltip content="Details">
+					<sl-button size="small" outline data-active=${viewMode === 'details'} @click=${() => setViewMode('details')}>
+						<sl-icon name="list"></sl-icon>
+					</sl-button>
+				</sl-tooltip>
+			</sl-button-group>
+		</div>
+
+		${viewMode === 'details' ? renderDetails() : renderTiles()}
+	`
+})
+

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

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

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

@@ -0,0 +1,33 @@
+
+import {html, shadowComponent} from "@benev/slate"
+
+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)
+
+	const group = findLocalGroup(use.element)
+	const {dropzone, config: {root}} = group
+
+	return html`
+		<div class="dropzone" ?data-hovering=${dropzone.hovering}>
+			<input
+				type="file"
+				class="dz-input"
+				@change=${(e: DragEvent) => dropzone.change(e, root)}
+				@drop=${(e: DragEvent) => dropzone.drop(e, root)}
+				@dragover=${(e: DragEvent) => dropzone.dragover(e, root)}
+				@dragenter=${(e: DragEvent) => dropzone.dragenter(e, root)}
+				@dragleave=${dropzone.dragleave}
+			>
+			<div class=dz-info>
+				<sl-icon name="upload"></sl-icon>
+				Drop files here
+			</div>
+		</div>
+	`
+})
+

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

@@ -0,0 +1,54 @@
+
+import {css} from "@benev/slate"
+export default css`
+
+.dropzone {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	border: 2px dashed var(--sl-color-neutral-300);
+	border-radius: 6px;
+	transition: background 0.2s;
+}
+
+.dz-input {
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+	font-size: 14px;
+	cursor: pointer;
+	opacity: 0;
+
+	&::file-selector-button {
+		display: none;
+	}
+}
+
+.dropzone:hover {
+	background: var(--sl-color-gray-50);
+}
+
+.dropzone[data-hovering] {
+	background: var(--sl-color-gray-50);
+	border-color: var(--sl-color-primary-500);
+
+	& .dz-info {
+		color: var(--sl-color-primary-300);
+	}
+}
+
+.dz-info {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5em;
+	color: var(--sl-color-neutral-700);
+}
+
+`
+

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

@@ -0,0 +1,44 @@
+import {html, shadowComponent, css} from "@benev/slate"
+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)
+
+	use.styles(themeCss, css`
+		sl-menu {
+			margin-top: 0.3em;
+
+			.item {
+				display: flex;
+				align-items: center;
+				gap: 0.5em;
+			}
+		}
+	`)
+
+	const onSelectFilter = (e: CustomEvent<{item: SlMenuItem}>) => {
+		const value = e.detail.item.value
+		group.selectedFilter.value = value
+	}
+
+	return html`
+		<div class="panel">
+			<sl-dropdown>
+				<sl-button size="small" slot="trigger" caret>
+					<sl-icon name="funnel"></sl-icon>
+				</sl-button>
+			<sl-menu @sl-select=${onSelectFilter}>
+				${[...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>
+							<span>${filter}</span>
+						</div>
+					</sl-menu-item>
+				`)}
+			</sl-menu>
+			</sl-dropdown>
+		</div>`
+})

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

@@ -0,0 +1,16 @@
+
+import {html, shadowComponent} from "@benev/slate"
+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)
+
+	return html`
+		<div class="panel">
+			${Tree([group])}
+		</div>`
+})
+

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

@@ -0,0 +1,29 @@
+
+import {html, shadowComponent, css} from '@benev/slate'
+import themeCss from '../../theme.css.js'
+
+import {findLocalGroup} from '../../utils/find-local-group.js'
+
+const styleCss = css`
+	sl-input::part(prefix) {
+		padding-left: 0.5em;
+	}
+`
+
+export const QuaySearchbar = shadowComponent(use => {
+	use.styles(themeCss, styleCss)
+	const group = findLocalGroup(use.element)
+
+	return html`
+		<sl-input
+			size='small'
+			pill
+			placeholder='Search'
+			clearable
+			@sl-input=${(e: CustomEvent) => group.searchText.value = (e.target as HTMLInputElement).value}
+		>
+			<sl-icon name='search' slot='prefix'></sl-icon>
+		</sl-input>
+	`
+})
+

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

@@ -0,0 +1,48 @@
+import {html, shadowComponent, css} from "@benev/slate"
+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)
+
+	use.styles(themeCss, css`
+		sl-button sl-icon {
+			font-size: 14px;
+		}
+
+		sl-menu {
+			margin-top: 0.3em;
+
+			.item {
+				display: flex;
+				align-items: center;
+				gap: 0.5em;
+			}
+		}
+	`)
+
+	const onSelectSort = (e: CustomEvent<{item: SlMenuItem}>) => {
+		const value = e.detail.item.value
+		group.selectedSort.value = value
+	}
+
+	return html`
+		<div class="panel">
+			<sl-dropdown>
+				<sl-button size="small" slot="trigger" caret>
+					<sl-icon name="sort-down-alt"></sl-icon>
+				</sl-button>
+			<sl-menu @sl-select=${onSelectSort}>
+				${[...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>
+							<span>${sort}</span>
+						</div>
+					</sl-menu-item>
+				`)}
+			</sl-menu>
+			</sl-dropdown>
+		</div>`
+})

package/s/dom/components.ts

@@ -0,0 +1,15 @@
+import {QuaySort} from "./components/sort/component.js"
+import {QuayFilter} from "./components/filter/component.js"
+import {QuayBrowser} from "./components/browser/component.js"
+import {QuayDropzone} from "./components/dropzone/component.js"
+import {QuayOutliner} from "./components/outliner/component.js"
+import {QuaySearchbar} from "./components/searchbar/component.js"
+import {QuayBreadcrumb} from "./components/breadcrumb/component.js"
+export {QuayOutliner, QuaySearchbar, QuayDropzone, QuayBrowser, QuayBreadcrumb, QuayFilter, QuaySort}
+
+export const components = {QuayOutliner, QuaySearchbar, QuayDropzone, QuayBrowser, QuayBreadcrumb, QuayFilter, QuaySort}
+
+export function setShoelaceDarkTheme() {
+	document.documentElement.className = "sl-theme-dark"
+}
+

package/s/dom/context.ts

@@ -0,0 +1,5 @@
+
+import {Brain} from "../logic/brain.js"
+
+export const brain = new Brain()
+

package/s/dom/theme.css.ts

@@ -0,0 +1,11 @@
+import {css} from "@benev/slate"
+export default css`@layer theme, view; @layer theme {
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+}`
+

package/s/dom/utils/find-group-name.ts

@@ -0,0 +1,12 @@
+export function findGroupName(el: HTMLElement) {
+	for (
+		let current: HTMLElement | null = el;
+		current;
+		current = current.parentElement
+	) {
+		const group = current.getAttribute("group")
+		if (group)
+			return group
+	}
+	return "default"
+}

package/s/dom/utils/find-local-group.ts

@@ -0,0 +1,9 @@
+
+import {brain} from "../context.js"
+import {findGroupName} from "./find-group-name.js"
+
+export function findLocalGroup(element: HTMLElement) {
+	const name = findGroupName(element)
+	return brain.getGroup(name)
+}
+

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

@@ -0,0 +1,64 @@
+
+import {html, shadowView, TemplateResult} from "@benev/slate"
+
+import styleCss from "./style.css.js"
+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)
+
+	const {config} = group
+	const {dropzone, trail, config: {root}} = group
+
+	use.mount(() => {
+		const dispose = group.on.upload.sub(() => use.rerender())
+		return () => dispose()
+	})
+
+	const renderFolderItem = (item: CodexItem) => html`
+		<input
+			@dragenter=${(e: DragEvent) => dropzone.dragenter(e, item)}
+			@dragleave=${dropzone.dragleave}
+			@dragover=${(e: DragEvent) => dropzone.dragover(e, item)}
+			@drop=${(e: DragEvent) => dropzone.drop(e, item)}
+			@click=${(e: Event) => e.preventDefault()}
+			id="file-import"
+			class="file-import folder-hover"
+		>
+		<span class="folder" slot="expand-icon">${config.renderIcon(item, false)}</span>
+		<span class="folder" slot="collapse-icon">${config.renderIcon(item, true)}</span>
+		${config.renderLabel(item)}
+	`
+
+	const renderItem = (item: CodexItem) => html`
+		${config.renderIcon(item, false)}
+		${config.renderLabel(item)}
+	`
+
+	const render = (item: CodexItem): TemplateResult => {
+		return html`
+			<sl-tree-item
+				draggable="true"
+				@dragstart=${(e: DragEvent) => dropzone.dragstart(e, item)}
+				@dragend=${dropzone.dragend}
+				@click=${(e: Event) => trail.setTrail(e, item)}
+				data-type=${item.kind}
+				?data-hover=${dropzone.hovering?.id === item.id}
+			>
+				${item.kind === "folder"
+					? renderFolderItem(item)
+					: renderItem(item)}
+				${group.sort(item.children).map((item) => group.matches(item) ? render(item) : null)}
+			</sl-tree-item>
+		`
+	}
+
+	return html`
+		<sl-tree selection=leaf>
+			${render(root)}
+		</sl-tree>`
+})
+

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

@@ -0,0 +1,64 @@
+
+import {css} from "@benev/slate"
+export default css`
+
+sl-tree-item::part(expand-button) {
+	rotate: none;
+}
+
+sl-tree-item::part(base) {
+	min-height: 30px;
+	justify-content: center;
+}
+
+sl-icon:is(.item) {
+	padding: 0.5em;
+}
+
+sl-tree-item:not([data-type=folder])::part(expand-button) {
+	display: none;
+}
+
+.file-import {
+	position: absolute;
+	opacity: 0;
+	left: 0;
+	width: 100%;
+}
+
+.folder-hover {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	bottom: 0;
+}
+
+sl-tree-item {
+	min-height: 30px;
+	transition: background 0.2s ease, border-radius 0.2s ease;
+
+	::part(label) {
+		gap: 0.5em;
+	}
+
+	.folder {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	::part(item--selected) {
+		background: rgba(0, 0, 0, 0.4);
+		min-height: 30px;
+	}
+
+}
+
+sl-tree-item[data-hover] {
+	border-radius: 5px;
+	background: rgba(0, 0, 0, 0.4);
+}
+
+`
+

package/s/genius/folio.md

@@ -0,0 +1,29 @@
+
+# 🗂️ Folio
+
+A virtual filesystem for the web.
+
+Folio provides primitives for building intuitive file browsing experiences on the web.
+- Agnostic about where data is actually stored
+- For local, best to use [Turbo](./turbo.md) as an OPFS turbocharger
+
+> 🤷 **Why not just use OPFS?**  
+> OPFS doesn't have cross-browser support for efficient move or rename operations.  
+> Folio is like a souped-up extended opfs.  
+
+Folio stores two kinds of data:
+- **Blob storage**  
+  Stores the binary payloads for files.  
+  Usually, blob storage will target *opfs* — though localstorage, indexeddb, or cloud storage are options.  
+  sha256 hashes are the identifiers, thus binary payloads are thus de-duplicated.  
+- **Index storage**  
+  Stores metadata and directory hierarchy.  
+  Usually, index storage will target *indexeddb* — though localstorage or cloud storage are options.  
+
+<br/>
+
+---
+
+> ### Wip: implementation plan
+> - Folio implements the `Twig` interface
+