fubi 1.0.0-beta.1 → 1.0.0-beta.11

package/src/components/ui/Page.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import { ScrollState } from "runed";
-	import { getModules } from "@modules";
-
-	const { tabbar, navbar, win, router } = getModules();
-
-	let { title = null, navbar: navbarVisible = true, tabbar: tabbarVisible = true, name = "", children } = $props();
-
-	let current = $derived(router.current === name);
-	let previous = $derived(router.previous === name);
-	let next = $derived(router.next === name);
-
-	let active = $derived(router.navigating
-				? router.direction === "forward"
-					? router.next === name
-					: router.previous === name
-				: router.current === name);
-
-	let scrollContentEl = $state<HTMLElement>();
-
-	const scrollContentState = new ScrollState({
-		element: () => scrollContentEl,
-		onScroll: (e) => {
-			win.contentScroll = scrollContentState.y;
-		}
-	});
-
-	$effect(() => {
-		if (active) {
-			navbar.title = title;
-			navbar.visible = navbarVisible;
-			tabbar.visible = tabbarVisible;
-		}
-	});
-</script>
-
-
-<div
-	data-fubi-page={name}
-	inert={!current}
-	class={["page rim touch:rim-top flex min-w-full w-full flex-col rounded-(--fubi-rounded) mouse:rounded-(--fubi-rounded-mouse) touch:rounded-b-none h-full",
-	"from-(--fubi-page-from-bg) to-(--fubi-page-to-bg)",
-	"mouse:bg-gradient-to-b touch:bg-gradient-to-b from-(--fubi-page-from-bg) to-(--fubi-page-to-bg)",
-	"transition-[translate,scale,opacity] ease-out-cubic duration-500 top-0",
-	current && "page-current",
-	previous && "page-previous",
-	next && "page-next"
-	]}
->
-	<div
-		tabindex="-1"
-		class={[
-			"page-content flex flex-col hide-scrollbar",
-			"focus-visible:outline-none",
-			win.dragging.active && "pointer-events-none select-none",
-			"z-[8] relative overflow-auto h-full rounded-(--fubi-rounded) mouse:rounded-(--fubi-rounded-mouse)",
-			"transition-[padding-top] duration-300 ease-out will-change-[padding-top]",
-			navbarVisible && `pt-(--fubi-navbar-height) touch:pt-(--fubi-navbar-height-touch)`,
-			tabbarVisible && `pb-(--fubi-tabbar-height) touch:pb-(--fubi-tabbar-height-touch)`,
-			`px-12 touch:px-16`,
-		]}
-		bind:this={scrollContentEl}
-	>
-		{@render children()}
-		<!-- <div class="h-62 touch:h-76 w-full mouse:rounded-(--fubi-rounded-mouse) from-neutral-900/0 to-neutral-900 bg-gradient-to-b shrink-0 sticky bottom-0 left-0"></div> -->
-	</div>
-</div>

package/src/components/ui/Tabbar.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import ButtonIcon from "./ButtonIcon.svelte";
-	import ButtonTabbar from "@ui/ButtonTabbar.svelte";
-
-	// icons
-	import { Folder01Icon, FileEmpty02Icon, Comment03Icon } from "@hugeicons-pro/core-solid-rounded";
-
-	const { tabbar, folders, router } = getModules();
-
-	let tabs = $derived([
-		{ path: "folders", icon: Folder01Icon, alt: "Folders" },
-		{ path: "pages", icon: FileEmpty02Icon, alt: "Pages" },
-		{ path: "comments", icon: Comment03Icon, alt: "Comments" },
-	]);
-
-	let tabActive = $derived(
-		(router.navigating ? (router.direction === "forward" ? router.next : router.previous) : router.current) === "comments"
-			? "comments"
-			: (router.navigating ? (router.direction === "forward" ? router.next : router.previous) : router.current) === "folders"
-				? "folders"
-				: "pages",
-	);
-
-	let backLabel = $derived(tabActive === "comments" ? "pages" : tabActive === "folders" ? "folders" : "folders")
-</script>
-
-<div
-	class={[
-		"absolute w-full bottom-0 left-0 right-0 py-14 touch:py-16 mouse:justify-center touch:justify-center flex items-start gap-4 z-10","transition-[translate,opacity]",
-		tabbar.visible ? "ease-out-cubic duration-400" : "translate-y-full pointer-events-none opacity-0 ease-in duration-200"
-	]}
->
-	<!-- <div class="touch:hidden">
-		<ButtonIcon icon="chevron-left" alt="Back" label={backLabel} onclick={() => router.goto(backLabel, "back")} />
-	</div> -->
-
-	<div class="toolbar overflow-clip flex bg-neutral-500/10 glass backdrop-blur rounded-full p-4 relative z-10 pointer-events-auto">
-		<div
-			class={[
-				"absolute right-4 top-1/2 -translate-y-1/2 flex h-32 w-36 touch:h-48 touch:w-56 rounded-full bg-slate-500/20 pointer-events-none",
-				"transition-[translate,scale] duration-300 will-change-[transform]",
-				tabActive === "pages" && "-translate-x-full",
-				tabActive === "folders" && "-translate-x-[200%]",
-				router.navigating ? "scale-140 glass ease-out" : "ease-out"
-			]}
-		></div>
-
-		{#each tabs as { path, icon, alt }}
-			{#if path === "folders" && folders.unlockedCount > 1 || path !== "folders"}
-				<ButtonTabbar {path} {icon} {alt} active={tabActive === path} />
-			{/if}
-		{/each}
-	</div>
-	<!-- <div class="touch:hidden">
-		<ButtonIcon icon="dots" alt="Menu" />
-	</div> -->
-</div>

package/src/components/ui/Toggle.svelte

@@ -1,8 +0,0 @@
-<script>
-	let { name, checked = $bindable() } = $props();
-</script>
-
-<label for={`fubi-checkbox-${name}`} class="block h-28 w-50 rounded-full bg-slate-500/20 hover:bg-slate-500/40 group/checkbox has-checked:bg-sky-500 relative transition-[background-color] ease-in-out-cubic duration-100 will-change-[background-color] focus-visible">
-	<input name={`fubi-checkbox-${name}`} id={`fubi-checkbox-${name}`} type="checkbox" class="absolute inset-0 opacity-0" bind:checked switch />
-	<div class="inset-4 rounded-full block absolute right-auto w-28 bg-white/80 shadow group-has-checked/checkbox:bg-white group-active/checkbox:w-32 transition-[width,background-color,translate] ease-out-cubic duration-100 group-has-checked/checkbox:translate-x-14 group-has-checked/checkbox:group-active/checkbox:translate-x-10 will-change-[width,background-color,translate]"></div>
-</label>

package/src/components/ui/Window.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	import Tabbar from "@components/ui/Tabbar.svelte";
-	import Navbar from "@ui/Navbar.svelte";
-
-	const { win } = getModules();
-
-	let { children = null } = $props();
-</script>
-
-<button
-	class={[
-		"fixed block inset-0 bg-transparent z-[1000] mouse:hidden",
-		win.opened ? "touch:pointer-events-auto" : "pointer-events-none"
-	]}
-	onclick={() => win.close()}>
-	<span class="sr-only">Close Window</span>
-</button>
-
-
-<div
-	bind:this={win.el}
-	class={[
-	// default styles
-	"window fixed left-0 right-0 touch:overflow-clip touch:rounded-b-none z-[1001] text-white -bottom-0.5",
-	"touch:rounded-t-(--fubi-rounded) touch:bg-neutral-900",
-	// breakpoint styles
-	"md:max-w-375",
-	// styles for desktop
-	"mouse:right-(--fubi-window-right) mouse:left-auto mouse:top-auto mouse:origin-bottom-right will-change-[translate,max-height,scale,opacity] mouse:bottom-(--fubi-window-bottom) mouse:w-300",
-	"transition-[max-height,opacity,scale] will-change-[max-height,opacity,scale]",
-	"mouse:max-h-1/2! mouse:min-h-[350px] h-[99dvh] mouse:h-500",
-	// when dragging the window
-	win.dragging.active
-		? "select-none duration-0"
-		: win.opened
-			? "duration-300 mouse:duration-200 ease-out"
-			: "duration-100 mouse:duration-200 ease",
-
-	// when window opened or closed
-	win.opened
-		? ""
-		: "mouse:opacity-0 mouse:scale-90 pointer-events-none",
-	]}
-	style={`max-height: ${win.dragging.active ? win.dragging.height : win.opened ? win.currentBreakpoint : 0}px;`}
-	onpointerdown={(e) => win.drag.start(e)}
-	onpointerup={(e) => win.drag.end(e)}
-	onpointermove={(e) => win.drag.move(e)}
-	onpointercancel={(e) => win.drag.end(e)}
->
-	<div class={["pointer-events-none rounded-full absolute left-1/2 -translate-x-1/2 z-[1001] mouse:hidden",
-		"transition-[background-color,box-shadow,scale,width,height,top] duration-100 ease-out will-change-[background-color,box-shadow,scale,width,height,top]",
-		"bg-slate-500/30 w-50 h-3 top-7"
-	]}></div>
-	<Navbar />
-	{#if children}
-		{@render children()}
-	{/if}
-	<Tabbar />
-</div>

package/src/index.ts

@@ -1,28 +0,0 @@
-import { mount } from "svelte";
-
-import App from "./components/App.svelte";
-
-import styles from "./styles/styles.css?inline";
-import stylesGlobal from "./styles/global.css?inline";
-
-export const fubi = (projectId: string) => {
-	// check if projectId provided if not throw error
-	if (!projectId) {
-		throw new Error("Please provide a projectId");
-	}
-
-	const root = document.createElement("div");
-	root.id = "fubi-shadow-root";
-
-	const shadowRoot = root.attachShadow({ mode: "open" });
-	shadowRoot.innerHTML = `<style>${styles}</style>`;
-
-	const wrapper = document.createElement("div");
-	wrapper.id = "fubi-wrapper";
-	shadowRoot.appendChild(wrapper);
-
-	document.body.appendChild(root);
-	document.head.insertAdjacentHTML("beforeend", `<style id="fubi-global-styles">${stylesGlobal}</style>`);
-
-	mount(App, { target: wrapper, props: { projectId, wrapper } });
-};

package/src/lib/actions.ts

@@ -1,58 +0,0 @@
-import { Action } from "svelte/action";
-import { animate, AnimationPlaybackControls, press as pressMotion } from "motion";
-
-type AnimateParams = Parameters<typeof animate>[1];
-
-interface PressActionParams {
-	animate: AnimateParams;
-	reset: AnimateParams;
-}
-
-interface SelectedActionParams {
-	active: boolean;
-	animate: AnimateParams;
-}
-
-export const press: Action<HTMLElement, PressActionParams> = (node, params) => {
-	pressMotion(node, (pressedNode) => {
-		animate(pressedNode, params.animate, { type: "spring", duration: 0.2 });
-
-		return () => animate(pressedNode, params.reset);
-	});
-};
-
-export const selected: Action<HTMLElement, SelectedActionParams> = (node, params) => {
-	let animation: AnimationPlaybackControls;
-
-	const updateAnimation = (isActive: boolean) => {
-		// Cancel any existing animation first
-		if (animation) animation.cancel();
-
-		if (isActive) {
-			// Animate TO the selected state
-			animation = animate(node, params.animate, { duration: 0.3 });
-		} else {
-			// Animate BACK to the original state
-			animation = animate(
-				node,
-				{
-					scale: 1,
-					borderRadius: 0,
-					backgroundColor: "transparent",
-				},
-				{ duration: 0.3 },
-			);
-		}
-	};
-
-	updateAnimation(params.active);
-
-	return {
-		update(newParams) {
-			updateAnimation(newParams.active);
-		},
-		destroy() {
-			if (animation) animation.cancel();
-		},
-	};
-};

package/src/lib/haptics.ts

@@ -1,94 +0,0 @@
-export const supportsHaptics = typeof window === "undefined" ? false : window.matchMedia("(pointer: coarse)").matches;
-
-function _haptic() {
-	try {
-		if (navigator.vibrate) {
-			navigator.vibrate(50);
-			return;
-		}
-
-		if (!supportsHaptics) return;
-
-		const labelEl = document.createElement("label");
-		labelEl.ariaHidden = "true";
-		labelEl.style.display = "none";
-
-		const inputEl = document.createElement("input");
-		inputEl.type = "checkbox";
-		inputEl.setAttribute("switch", "");
-		labelEl.appendChild(inputEl);
-
-		document.head.appendChild(labelEl);
-		labelEl.click();
-		document.head.removeChild(labelEl);
-	} catch {
-		// do nothing
-	}
-}
-
-_haptic.confirm = () => {
-	if (navigator.vibrate) {
-		navigator.vibrate([50, 70, 50]);
-		return;
-	}
-
-	_haptic();
-	setTimeout(() => _haptic(), 120);
-};
-
-_haptic.error = () => {
-	if (navigator.vibrate) {
-		navigator.vibrate([50, 70, 50, 70, 50]);
-		return;
-	}
-
-	_haptic();
-	setTimeout(() => _haptic(), 120);
-	setTimeout(() => _haptic(), 240);
-};
-
-// prevent intellisense from being unhelpful
-interface haptic {
-	/** @deprecated */
-	apply: never;
-
-	/** @deprecated */
-	arguments: never;
-
-	/** @deprecated */
-	bind: never;
-
-	/** @deprecated */
-	call: never;
-
-	/** @deprecated */
-	caller: never;
-
-	/** @deprecated */
-	length: never;
-
-	/** @deprecated */
-	name: never;
-
-	/** @deprecated */
-	prototype: never;
-
-	/** @deprecated */
-	toString: never;
-
-	/** @deprecated */
-	Symbol: never;
-
-	/**  a single haptic */
-	(): void;
-
-	/** two rapid haptics */
-	confirm: () => void;
-
-	/** three rapid haptics */
-	error: () => void;
-}
-
-const __haptic = _haptic as haptic;
-
-export { __haptic as haptics };

package/src/lib/logger.ts

@@ -1,22 +0,0 @@
-const debug = true;
-
-export function logger(module: string) {
-	return {
-		info: (...params: any[]) => {
-			if (debug) console.log(`%c➜ [${module}]`, "color: #38bdf8", ...params);
-		},
-		error: (...params: any[]) => {
-			if (debug) console.error(`[${module}]`, ...params);
-		},
-		warn: (...params: any[]) => {
-			if (debug) console.warn(`[${module}]`, ...params);
-		},
-		ok: (...params: any[]) => {
-			if (debug) console.log(`%c✔ [${module}]`, "color: #22c55e", ...params);
-		},
-		group: (label?: string) => {
-			label ? console.group(`%c—— ${label} ——`, "color: #6366f1") : console.group();
-		},
-		groupEnd: () => console.groupEnd(),
-	};
-}

package/src/lib/routes.ts

@@ -1,37 +0,0 @@
-import { Component } from "svelte";
-
-import Login from "@pages/Login.svelte";
-import Folders from "@pages/Folders.svelte";
-import Pages from "@pages/Pages.svelte";
-import Comments from "@pages/Comments.svelte";
-import Thread from "@pages/Thread.svelte";
-import Error from "@pages/Error.svelte";
-
-export type RouteType = {
-	component: Component;
-	default?: boolean;
-	direction?: "forward" | "back";
-};
-
-export const routes: Record<string, RouteType> = {
-	login: {
-		component: Login,
-	},
-	folders: {
-		component: Folders,
-	},
-	pages: {
-		component: Pages,
-	},
-	comments: {
-		component: Comments,
-	},
-	thread: {
-		component: Thread,
-	},
-	error: {
-		component: Error,
-	},
-};
-
-export type Routes = keyof typeof routes;

package/src/lib/utils.ts

@@ -1,27 +0,0 @@
-import { pocketbaseUrl } from "@modules/app.svelte";
-import { CollectionItem } from "@/types/pocketbase.js";
-
-export function hasFocus(): boolean {
-	let activeEl = document.activeElement as HTMLElement | null;
-	if (!activeEl) return false;
-
-	while (activeEl?.shadowRoot?.activeElement) {
-		activeEl = activeEl.shadowRoot.activeElement as HTMLElement;
-	}
-
-	if (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA") return true;
-
-	if (activeEl.contentEditable === "true") return true;
-
-	return false;
-}
-
-export function getAssetUrl(record: CollectionItem, field: string): string | null {
-	if (!record) return null;
-
-	if (!record[field]) return null;
-
-	const { id, collectionName } = record;
-
-	return `${pocketbaseUrl}/api/files/${collectionName}/${id}/${record[field]}`;
-}

package/src/modules/app.svelte.ts

@@ -1,66 +0,0 @@
-import PocketBase from "pocketbase";
-import {
-	Win,
-	Navbar,
-	Tabbar,
-	Router,
-	Auth,
-	Project,
-	Folders,
-	Pages,
-	Comments,
-	Events,
-	Toolbar,
-	Keys,
-	Dom,
-	Environment,
-	Hover,
-	Domains,
-	Home,
-} from ".";
-
-export const pocketbaseUrl = "https://fubi.wondermakers.dev";
-
-import { logger } from "@logger";
-const log = logger("app");
-
-export const createApp = (params: { projectId: string; wrapper: HTMLElement }) => {
-	const { projectId, wrapper } = params;
-
-	const modules = {
-		win: new Win(),
-		navbar: new Navbar(),
-		tabbar: new Tabbar(),
-		router: new Router(),
-		auth: new Auth(),
-		pb: new PocketBase(pocketbaseUrl),
-		project: new Project(projectId),
-		folders: new Folders(),
-		pages: new Pages(),
-		events: new Events(),
-		comments: new Comments(),
-		domains: new Domains(),
-		toolbar: new Toolbar(wrapper),
-		keys: new Keys(),
-		dom: new Dom(),
-		environment: new Environment(),
-		hover: new Hover(),
-		home: new Home(),
-	};
-
-	// init modules first
-	Object.values(modules).forEach((m: any) => {
-		if (m.init) m.init?.(modules);
-	});
-
-	log.ok(`All modules initialized.`);
-
-	// start modules
-	Object.values(modules).forEach((m: any) => {
-		if (m.start) m.start?.();
-	});
-
-	return { modules };
-};
-
-export type App = ReturnType<typeof createApp>;

package/src/modules/auth.svelte.ts

@@ -1,80 +0,0 @@
-import { MsgType } from "./../types/msg";
-import { Module } from "./module.svelte";
-
-import { logger } from "@logger";
-const log = logger("auth");
-
-import type { UserType } from "@/types/user";
-export class Auth extends Module {
-	loading = $state(false);
-	user = $state(null) as UserType | null;
-	isAllowed = $derived(this.modules.project.isTeamMember || this.modules.folders.unlockedCount > 0);
-
-	msg: MsgType = $state({
-		type: "info",
-		text: "",
-		visible: false,
-	});
-
-	start() {
-		this.user = this.modules.pb.authStore.record as UserType | null;
-
-		this.modules.pb.authStore.onChange(async () => {
-			this.user = this.modules.pb.authStore.record as UserType | null;
-			await this.checkAccess();
-		});
-
-		this.checkAccess();
-	}
-
-	/**
-	 * Checks if user is allowed (team member/admin or has folder access) and routes accordingly
-	 */
-	private async checkAccess() {
-		if (this.user) {
-			await this.modules.project.checkTeamMembership(this.user.id); // check if user is team member or admin
-			await this.modules.folders.fetch(); // refetch the folders to update access
-			if (this.isAllowed) await this.modules.domains.verify(); // verify domain by allowed user
-		}
-
-		// force logout user if not allowed
-		if (!this.isAllowed && this.user) {
-			this.msg = {
-				type: "error",
-				text: "You do not have access to this project or any of its folders.",
-				visible: true,
-			};
-			this.track("warn", "User does not have access to project or any folders", { user: this.user.id });
-			this.logout();
-		}
-
-		// navigate user based on access
-		const nextRoute: Array<string> = this.modules.router.determineRoute(this.user, this.isAllowed);
-		this.modules.router.goto(...(nextRoute as ["string", "forward" | "back"]));
-	}
-
-	async login(email: string, password: string) {
-		this.loading = true;
-		this.msg = { type: "info", text: "", visible: false };
-
-		try {
-			await this.modules.pb.collection("users").authWithPassword(email, password);
-			this.user = this.modules.pb.authStore.record as UserType;
-			this.track("ok", "User logged in");
-			this.loading = false;
-			return { success: true };
-		} catch (error: any) {
-			this.track("error", "Login failed", { error: error?.message || error, email });
-			this.msg = { type: "error", text: error?.message || "Login failed", visible: true };
-			this.loading = false;
-			return { success: false, error: error?.message || error };
-		}
-	}
-
-	async logout() {
-		if (!this.user) return;
-
-		this.modules.pb.authStore.clear();
-		this.user = null;
-	}
-}

package/src/modules/collection.svelte.ts

@@ -1,79 +0,0 @@
-import type { AuthRecord, RecordService, RecordSubscription } from "pocketbase";
-import { CollectionItem } from "@/types/pocketbase";
-import { Module } from "./module.svelte";
-import { logger } from "@logger";
-
-const log = logger("collection-module");
-
-interface CollectionModuleOptions<T extends CollectionItem = CollectionItem> {
-	name: string;
-	filters?: string;
-	sort?: string;
-	expand?: string;
-	page?: number;
-	perPage?: number;
-	query?: Record<string, any>;
-	transform?: (record: T, authUser: AuthRecord | null) => T;
-	onChange?: (e: RecordSubscription) => void;
-	onFinish?: () => void;
-}
-
-export abstract class CollectionModule<T extends CollectionItem = CollectionItem> extends Module {
-	data = $state<T[]>([]);
-	loading = $state(false);
-	error = $state<string | null>(null);
-	filters = $state<string | undefined>(undefined);
-	sort = $state<string | undefined>(undefined);
-	page = $state<number>(1);
-	perPage = $state<number>(50);
-
-	empty = $derived(this.data.length === 0);
-
-	protected collection!: RecordService<T>;
-	private options!: CollectionModuleOptions<T>;
-
-	protected initCollection(options: CollectionModuleOptions<T>) {
-		this.options = options;
-		this.filters = options.filters;
-		this.sort = options.sort;
-		this.page = options.page || 1;
-		this.perPage = options.perPage || 50;
-		this.collection = this.modules.pb.collection(options.name);
-		this.collection.subscribe("*", (e) => {
-			this.fetch();
-			if (options.onChange) options.onChange(e);
-		});
-	}
-
-	async fetch() {
-		this.loading = true;
-		this.error = null;
-
-		try {
-			const result = await this.collection.getList<T>(this.page, this.perPage, {
-				filter: this.filters,
-				sort: this.sort,
-				expand: this.options.expand,
-				...this.options.query,
-			});
-
-			log.info("fetched:");
-			console.log(result.items);
-
-			this.data = result.items.map((record) =>
-				this.options.transform ? this.options.transform(record, this.modules.pb.authStore.record) : record,
-			);
-
-			if (this.options.onFinish) this.options.onFinish();
-		} catch (err: any) {
-			this.error = err.message || "Failed to fetch";
-			log.error(`Error fetching ${this.options.name}:`, err);
-		} finally {
-			this.loading = false;
-		}
-	}
-
-	destroy() {
-		this.collection?.unsubscribe("*");
-	}
-}