fubi 1.0.0-beta.3 → 1.0.0-beta.5

package/src/components/icons/PlusIcon.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	const { ...rest } = $props();
-</script>
-
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-	<path d="M9 2V16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="bevel"/>
-	<path d="M16 9L2 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="bevel"/>
-</svg>

package/src/components/toolbar/ButtonToolbar.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { BubbleChatIcon } from '@hugeicons-pro/core-solid-rounded';
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-
-	const { active = $bindable(), icon = BubbleChatIcon, variant = "default", label = "Icon", iconSize = 24, ...rest } = $props();
-
-	const variants = new Map([
-		["default", "from-slate-400 to-slate-500 text-slate-200"],
-		["sky", "from-sky-400 to-sky-600 text-sky-200"],
-		["green", "from-green-400 to-green-600 text-green-200"],
-	]);
-</script>
-
-<button
-	class={[
-		"size-36 touch:size-40 ease-out transition-[background-color,color] duration-100 rounded-[12px] flex-center relative user-select-none shrink-0",
-		"active:scale-90 transition-[scale] duration-100 ease-out",
-		"focus-visible",
-		active
-			? "text-white bg-gradient-to-b " + variants.get(variant)
-			: "text-slate-600 hover:text-slate-400 hover:bg-slate-500/10 active:bg-slate-500/20 focus-visible:text-slate-400 focus-visible:bg-slate-500/10"
-	]}
-	{...rest}
->
-	<!-- @ts-ignore-next -->
-	<!-- <input type="checkbox" switch class="absolute z-10 inset-0 opacity-0" tabindex="-1"> -->
-	<span class="sr-only">{label}</span>
-	<HugeiconsIcon {icon} className="size-24 touch:size-26" />
-</button>

package/src/components/toolbar/Menu.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import Button from "./ButtonToolbar.svelte";
-	import { DropdownMenu } from "bits-ui";
-
-	// icons
-	import { ViewOffSlashIcon, Menu05Icon } from '@hugeicons-pro/core-solid-rounded';
-	import { HugeiconsIcon } from '@hugeicons/svelte';
-	import { getModules } from "@modules";
-
-	const { toolbar, auth } = getModules();
-
-	let dropdown = $state({
-		opened: false,
-		logo: true
-	})
-</script>
-
-<DropdownMenu.Root bind:open={dropdown.opened}>
-	<DropdownMenu.Trigger>
-		{#snippet child({ props })}
-			<Button
-				icon={Menu05Icon}
-				label="Open Menu"
-				title="Open Menu"
-				active={dropdown.opened}
-				{...props}
-			/>
-		{/snippet}
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Portal to={toolbar.wrapper}>
-		<DropdownMenu.Content
-			align="end"
-			class="bg-black/80 rim backdrop-blur-lg p-4 rounded-[12px] min-w-150 flex flex-col z-[1002]"
-			sideOffset={8}
-		>
-			<DropdownMenu.Item onclick={() => auth.logout()} class="flex gap-6 items-center h-36 px-8 rounded-[8px] hover:bg-slate-500/20">
-				<HugeiconsIcon icon={ViewOffSlashIcon} />
-				<p class="text-sm pointer-events-none">Logout</p>
-			</DropdownMenu.Item>
-		</DropdownMenu.Content>
-	</DropdownMenu.Portal>
-</DropdownMenu.Root>

package/src/components/toolbar/Toolbar.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	// components
-	import Logo from "@ui/Logo.svelte";
-	import Button from "./ButtonToolbar.svelte";
-	import Layout from "../Layout.svelte";
-	import Menu from "./Menu.svelte";
-
-	// icons
-	import { Comment03Icon, InboxIcon, Menu05Icon } from '@hugeicons-pro/core-solid-rounded';
-
-	import { getModules } from "@modules";
-	import { onMount } from "svelte";
-	const { comments, win, toolbar, auth } = getModules();
-
-	onMount(() => {
-		toolbar.visible = true;
-	});
-</script>
-
-<div
-	class={[
-		"rim h-(--fubi-toolbar-height) bg-(--fubi-page-to-bg) px-4 touch:px-6 overflow-clip fixed bottom-4 left-1/2 -translate-x-1/2  text-white rounded-[16px] flex items-center justify-end gap-8 backdrop-blur-lg shadow-lg origin-bottom-right z-[1000]",
-		"transition-[scale,translate,width] duration-600 ease-out-expo origin-bottom-right",
-		"mouse:right-16 mouse:left-auto mouse:bottom-16 mouse:translate-x-0",
-		!toolbar.visible && "translate-y-[calc(100%+var(--fubi-toolbar-bottom))] scale-80"
-	]}
->
-	<div class="flex gap-6 items-center pl-10">
-		<Logo class="h-16 shrink-0 mr-8" />
-		<div class="size-4 rounded-full bg-slate-600"></div>
-	</div>
-	<Layout
-		animate="width"
-		class="flex items-center justify-end gap-2"
-	>
-		{#if comments.canComment}
-		<Button
-			icon={Comment03Icon}
-			iconSize={26}
-			variant="green"
-			label="Enable comments"
-			title="Enable comments"
-		/>
-		{/if}
-		<Button
-			active={win.opened}
-			icon={InboxIcon}
-			variant="sky"
-			label="Open inbox"
-			title="Open inbox"
-			onclick={() => win.toggle()}
-		/>
-		<Menu />
-	</Layout>
-</div>

package/src/components/ui/Button.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { fade, fly, scale, slide } from "svelte/transition";
-
-	import { Loading03Icon } from "@hugeicons-pro/core-solid-rounded";
-
-	const { loading = false, class: classList = "", children, ...rest } = $props();
-</script>
-
-<button
-	class={[
-		"min-h-52 rounded-[24px] bg-sky-500/10 mouse:min-h-48 w-full select-none px-16 group/button hover:bg-sky-500/20 active:bg-sky-500/30 text-sky-500 font-semibold flex-center",
-		"disabled:pointer-events-none disabled:bg-slate-500/5 disabled:text-white/20",
-		"focus-visible",
-		"transition-[background-color,color] ease-out-cubic duration-200",
-		classList
-	]}
-	{...rest}
-	data-loading={loading}
->
-{#if loading}
-	<div in:fade={{duration: 200}} out:fade={{duration: 200}} class="absolute">
-		<HugeiconsIcon
-			icon={Loading03Icon}
-			className="size-24 text-white/50 animate-spin"
-		/>
-	</div>
-{:else}
-	<span in:fade={{duration: 200}} out:fade={{duration: 200}}>
-		{@render children()}
-	</span>
-{/if}
-</button>

package/src/components/ui/ButtonIcon.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import Icon from "./Icon.svelte";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-
-	let { icon = null, primary = false, alt = "", label = null, class: className = "", ...rest } = $props();
-</script>
-
-<button
-	class={[
-		className,
-		"rounded-full h-40 min-w-40 touch:h-48 touch:min-w-48 flex-center select-none glass",
-		"active:scale-120 transition-[scale] duration-100 ease-out backdrop-blur",
-		"focus-visible",
-		label ? "pr-16 pl-12 gap-5 touch:pl-12 touch:pr-16" : "",
-		primary
-			? "bg-sky-600 hover:bg-sky-500 active:bg-sky-600 touch:active:bg-sky-700 text-white"
-			: "bg-neutral-500/10 hover:bg-neutral-500/20 focus:bg-neutral-500/20 active:bg-neutral-500/30 touch:active:bg-neutral-500/20 text-neutral-200 hover:text-neutral-300 focus:text-neutral-300 active:text-white",
-	]}
-	{...rest}
->
- 	{#if typeof icon === "string"}
-		<Icon name={icon} class="size-14 touch:size-18" />
-	{:else if icon}
-		<HugeiconsIcon {icon} color="currentColor" className="size-20 touch:size-24" />
-	{/if}
-	{#if label}
-		<p class="mouse:text-sm/none touch:text-[18px]/none">{label}</p>
-	{:else}
-		<span class="sr-only select-none">{alt}</span>
-	{/if}
-</button>

package/src/components/ui/ButtonSmall.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	let { children, ...rest } = $props();
-</script>
-
-<button
-	class={[
-		"glass bg-white/5 rounded-[8px] h-32 text-white/80 px-16 text-sm",
-		"hover:bg-white/10 active:bg-white/15 active:scale-95",
-		"transition-transform duration-100 ease-out"
-	]}
-	{...rest}
->{@render children()}</button>

package/src/components/ui/ButtonTabbar.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { slide } from "svelte/transition";
-	import { cubicOut } from "svelte/easing";
-
-	const { router } = getModules();
-
-	function getDirection(target: string): "forward" | "back" {
-		const order = ["folders", "pages", "comments"];
-		return order.indexOf(target) > order.indexOf(router.current)
-			? "forward"
-			: "back";
-	}
-
-	let { icon = null, path = "", alt = "", active = false } = $props();
-</script>
-
-<button
-	transition:slide={{ axis: "x", duration: 200, easing: cubicOut }}
-	class={[
-		"h-32 w-36 touch:h-48 touch:w-56 flex-center flex-col rounded-full select-none",
-		active
-			? "text-sky-500"
-			: "text-slate-500/30 hover:text-slate-500/80 active:text-sky-300/50",
-	]}
-	onpointerdown={() => router.goto(path, getDirection(path))}
->
-	<HugeiconsIcon
-		{icon}
-		className={`pointer-events-none size-20 touch:size-28 scale-90 transition-[scale] duration-200 ease-out-cubic will-change-[scale] ${active && "scale-100"}`}
-	/>
-	<span class="sr-only">{alt}</span>
-</button>

package/src/components/ui/Chip.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-
-	let { theme = "sky", icon = null, children = null } = $props();
-
-	const themes: Record<string, string> = {
-		sky: "text-sky-500",
-		red: "text-red-500",
-		green: "text-green-500",
-		yellow: "text-yellow-500",
-		purple: "text-purple-500",
-		pink: "text-pink-500",
-		indigo: "text-indigo-500",
-		gray: "text-slate-500"
-	}
-</script>
-
-<div
-	class={[
-		"h-24 min-w-24 flex-center rounded-[8px] bg-current/10 text-sm mouse:text-[13px]/none font-medium gap-0",
-		"group-disabled/listitem:text-slate-500/30 group-disabled/listitem:bg-transparent",
-		icon ? "pl-4 pr-8" : "px-6",
-		themes[theme]
-	]}
->
-	{#if icon}<HugeiconsIcon {icon} className="size-16 mr-2 flex-shrink-0" />{/if}
-	<p>{@render children()}</p>
-</div>

package/src/components/ui/Icon.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import ChevronLeftIcon from "@icons/ChevronLeftIcon.svelte";
-	import ChevronRightIcon from "@icons/ChevronRightIcon.svelte";
-	import CheckCircle from "@icons/CheckCircle.svelte";
-	import DotsIcon from "@icons/DotsIcon.svelte";
-	import CancelIcon from "@icons/CancelIcon.svelte";
-	import PlusIcon from "@icons/PlusIcon.svelte";
-	import ChevronsUpIcon from "@icons/ChevronsUpIcon.svelte";
-	import CheckIcon from "@icons/CheckIcon.svelte";
-	import CheckSmallIcon from "@icons/CheckSmallIcon.svelte";
-	import AlertIcon from "@icons/AlertIcon.svelte";
-
-	const icons = new Map([
-		["chevron-left", {icon: ChevronLeftIcon, h: "h-16"}],
-		["chevron-right", {icon: ChevronRightIcon, h: "h-16"}],
-		["check-circle", {icon: CheckCircle, h: "h-24"}],
-		["dots", {icon: DotsIcon, h: "h-4"}],
-		["cancel", {icon: CancelIcon, h: "h-14"}],
-		["plus", {icon: PlusIcon, h: "h-18"}],
-		["chevrons-up", {icon: ChevronsUpIcon, h: "h-14"}],
-		["check", {icon: CheckIcon, h: "h-12"}],
-		["check-small", {icon: CheckSmallIcon, h: "h-10"}],
-		["alert", {icon: AlertIcon, h: "h-16"}],
-	]);
-
-	type IconName = typeof icons extends Map<infer K, any> ? K : never;
-
-	const { name = "plus", class: className = "", ...rest }: { name?: IconName, class?: string | string[], rest?: any } = $props();
-
-	const iconRef = icons.get(name);
-	const Icon = iconRef?.icon;
-</script>
-
-{#if icons.has(name)}
-	<Icon class={className} {...rest} />
-{:else}
-	<p>Icon "{name}" not found.</p>
-{/if}

package/src/components/ui/Input.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	let {name, label, value = $bindable(), ...rest } = $props();
-</script>
-
-<label for={`fubi-input-${name}`} class="border-b-[0.5px] border-white/5 last:border-b-0 min-h-52 first:rounded-t-[20px] last:rounded-b-[20px] bg-slate-500/10 mouse:min-h-48 flex px-16 group/input  text-white items-center focus-within">
-	<p class="select-none">{label}</p>
-	<input id={`fubi-input-${name}`} {name} class="flex-1 focus:ring-none focus-visible:outline-hidden text-right text-white/50" bind:value {...rest}>
-</label>
-	

package/src/components/ui/List.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	const { class: classList = "", children } = $props();
-</script>
-
-<ul class={[
-	"list flex flex-col mb-8",
-	"[&>:first-child>.listitem]:rounded-t-[18px] [&>:last-child>.listitem]:rounded-b-[18px]",
-	"[&>.listitem]:first:rounded-t-[18px] [&>.listitem]:last:rounded-b-[18px]",
-	"touch:[&>.listitem]:first:rounded-t-[24px] touch:[&>.listitem]:last:rounded-b-[24px]",
-	"touch:[&>.listitem]:first:rounded-t-[24px] touch:[&>.listitem]:last:rounded-b-[24px]",
-	"touch:[&>:first-child>.listitem]:rounded-t-[22px] touch:[&>:last-child>.listitem]:rounded-b-[22px]",
-
-	"[&>.listitem:last-child>.listitem-content]:border-b-0 [&>:last-child>.listitem>.listitem-content]:border-b-0",
-	classList
-	]}
->
-	{@render children()}
-</ul>

package/src/components/ui/ListItem.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import Icon from "./Icon.svelte";
-
-	import { animate, inView, press } from "motion";
-
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { Folder01Icon } from '@hugeicons-pro/core-solid-rounded';
-
-	import { fade } from "svelte/transition";
-	import { cubicIn, cubicOut } from "svelte/easing";
-
-	import { getModules } from "@modules/index";
-
-	const { router } = getModules();
-
-	let {
-		start = null,
-		icon = Folder01Icon,
-		title = "Title",
-		subtitle = null,
-		active = null,
-		after = null,
-		chevron = true,
-		disabled = null,
-		link = null,
-		onclick = null,
-		index = 0,
-		class: className = "",
-		classIcon = "text-sky-500",
-		...rest
-	} = $props();
-</script>
-
-<button
-	data-active={active ? true : null}
-	in:fade={{ duration: 600, easing: cubicOut, delay: index * 40 }}
-	out:fade={{ duration: router.navigating ? 0 : 400, easing: cubicIn }}
-	class={[
-		"listitem group/listitem w-full min-h-52 mouse:min-h-44 flex items-stretch pr-10 touch:pr-16 ",
-		"focus-visible",
-		"disabled:bg-slate-500/7 disabled:cursor-not-allowed disabled:text-neutral-500/50",
-		"transition-[scale,background-color,border-radius] duration-150 ease-out",
-		"select-none",
-		active
-			? "rounded-[8px] bg-sky-900 hover:bg-sky-800 touch:active:bg-sky-800 scale-[1.03] lift active:scale-[1.01] active:rounded-[2px]"
-			: "bg-slate-500/15 hover:bg-white/10 active:bg-sky-950 touch:active:bg-white/10",
-		className
-	]}
-	{disabled}
-	onclick={() => link ? router.goto(link) : onclick()}
-	{...rest}
->
-	<div class=" w-54 mouse:w-44 flex-center shrink-0">
-		{#if start}
-			{@render start()}
-		{:else}
-			<HugeiconsIcon {icon} className={`${classIcon} size-28 mouse:size-24 group-disabled/listitem:text-neutral-500/50`} />
-		{/if}
-	</div>
-	<div class={[
-		"listitem-content flex relative items-center flex-1 border-b-[0.5px]",
-		"transition-[border-color] duration-0 ease-out",
-		active ? "border-transparent" : "border-neutral-700"
-	]}>
-		<div class="flex flex-col gap-4 mouse:gap-2 flex-1 items-start text-left">
-			<p class="text-base/none mouse:text-sm/none font-medium line-clamp-1">{title}</p>
-			{#if subtitle}
-				<p class={["text-[13px]/none mouse:text-xs/none group-disabled/listitem:text-neutral-500/50 mb-1 line-clamp-1",
-					active ? "text-sky-500" : "text-neutral-500"
-				]}>{subtitle}</p>
-			{/if}
-		</div>
-		<div class="flex gap-8 items-center">
-			{#if after}{@render after()}{/if}
-
-			<Icon
-				name="chevron-right"
-				class={[
-					"h-12 group-focus/listitem:text-neutral-300/80 group-hover/listitem:text-white/80 group-active/listitem:text-neutral-100",
-					"group-disabled/listitem:text-neutral-500/20",
-					active ? "text-sky-500" : "text-neutral-500/60",
-					(!onclick && !link) ? "hidden" : ""
-				]}
-			/>
-		</div>
-	</div>
-</button>

package/src/components/ui/ListLoader.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Loading03Icon } from "@hugeicons-pro/core-solid-rounded";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-
-	const { children = null, spinner = false } = $props();
-</script>
-
-<div class="bg-slate-500/10 w-full min-h-52 mouse:min-h-44 first:rounded-t-[18px] last:rounded-b-[18px] animate-list-loading"></div>
-<div class="bg-slate-500/10 w-full min-h-52 mouse:min-h-44 first:rounded-t-[18px] last:rounded-b-[18px] animate-list-loading flex-center gap-8 text-slate-500 text-sm">
-	{#if spinner}
-	<HugeiconsIcon
-		icon={Loading03Icon}
-		className="size-20 text-slate-500 animate-spin"
-	/>
-	{/if}
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-<div class="bg-slate-500/10 w-full min-h-52 mouse:min-h-44 first:rounded-t-[18px] last:rounded-b-[18px] animate-list-loading"></div>

package/src/components/ui/Loader.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	let { progress = 0, radius = 10, stroke = 4 } = $props()
-
-	let circumference = $derived(2 * Math.PI * radius);
-	let dashLength = $derived((progress / 100) * circumference);
-	let center = $derived(radius + stroke);
-	let viewBoxSize = $derived((radius + stroke) * 2);
-</script>
-
-<svg
-	width={viewBoxSize} 
-	height={viewBoxSize}
-	viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`} 
-	xmlns="http://www.w3.org/2000/svg" 
-	class="-rotate-90 text-sky-500"
->
-	<circle
-		fill="none"
-		cx={center} 
-		cy={center}
-		r={radius}
-		stroke-width={stroke}
-		stroke="white"
-		stroke-opacity="0.1"
-		stroke-linecap="round"
-	/>
-	{#if progress > 0}
-	<circle
-		fill="none"
-		cx={center} 
-		cy={center}
-		r={radius}
-		stroke-width={stroke}
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-dasharray={`${dashLength} ${circumference}`}
-	/>
-	{/if}
-</svg>

package/src/components/ui/Logo.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	const { ...rest } = $props();
-</script>
-
-<!--
-<svg viewBox="0 0 55 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-<path d="M51.5527 16.3028C51.0813 16.3028 50.8456 16.3028 50.6992 16.1564C50.5527 16.0099 50.5527 15.7742 50.5527 15.3028V6.5043C50.5527 6.0329 50.5527 5.7972 50.6992 5.65075C50.8456 5.5043 51.0813 5.5043 51.5527 5.5043H53.9209C54.3923 5.5043 54.628 5.5043 54.7745 5.65075C54.9209 5.7972 54.9209 6.0329 54.9209 6.5043V15.3028C54.9209 15.7742 54.9209 16.0099 54.7745 16.1564C54.628 16.3028 54.3923 16.3028 53.9209 16.3028H51.5527ZM51.5527 3.85151C51.0813 3.85151 50.8456 3.85151 50.6992 3.70506C50.5527 3.55861 50.5527 3.32291 50.5527 2.85151V1.5C50.5527 1.0286 50.5527 0.792893 50.6992 0.646447C50.8456 0.5 51.0813 0.5 51.5527 0.5H53.9209C54.3923 0.5 54.628 0.5 54.7745 0.646447C54.9209 0.792893 54.9209 1.0286 54.9209 1.5V2.85151C54.9209 3.32291 54.9209 3.55861 54.7745 3.70506C54.628 3.85151 54.3923 3.85151 53.9209 3.85151H51.5527Z" fill="currentColor"/>
-<path d="M41.6079 16.5C37.8605 16.5 36.803 15.8572 35.9063 14.457H35.8604V15.7934C35.8604 16.0695 35.6365 16.2934 35.3604 16.2934H31.9922C31.716 16.2934 31.4922 16.0695 31.4922 15.7934V1C31.4922 0.723858 31.716 0.5 31.9922 0.5H35.3604C35.6365 0.5 35.8604 0.723858 35.8604 1V5.27475H35.9063C36.803 3.87446 37.8605 3.23171 41.6079 3.23171C47.4015 3.23171 48.689 4.76973 48.689 9.86585C48.689 14.962 47.4015 16.5 41.6079 16.5ZM35.8604 10.2331C35.8604 12.5976 36.3891 13.0567 39.9986 13.0567C43.746 13.0567 44.1829 12.6435 44.1829 9.86585C44.1829 7.08823 43.746 6.67503 39.9986 6.67503C36.3891 6.67503 35.8604 7.13415 35.8604 9.52152V10.2331Z" fill="currentColor"/>
-<path d="M19.6658 16.4965C14.9298 16.4965 12.9756 15.0503 12.9756 10.3904V6C12.9756 5.72386 13.1994 5.5 13.4756 5.5H16.8438C17.1199 5.5 17.3438 5.72386 17.3438 6V9.9542C17.3438 12.5023 17.7806 12.9384 21.0912 12.9384C23.827 12.9384 24.9076 12.6859 24.9076 9.86238V6C24.9076 5.72386 25.1314 5.5 25.4076 5.5H28.7757C29.0519 5.5 29.2757 5.72386 29.2757 6V15.8129C29.2757 16.089 29.0519 16.3129 28.7757 16.3129H25.4076C25.1314 16.3129 24.9076 16.089 24.9076 15.8129V14.4764H24.8616C24.1029 15.8767 22.6315 16.4965 19.6658 16.4965Z" fill="currentColor"/>
-<path d="M5.33505 0.5C1.97845 0.5 0.920898 1.51004 0.920898 4.65495V12.6737C0.920898 13.7083 0.920898 14.2256 1.06946 14.6405C1.3255 15.3556 1.88832 15.9184 2.60339 16.1744C3.01829 16.323 3.53559 16.323 4.57017 16.323C4.77398 16.323 4.87588 16.323 4.95762 16.2937C5.09848 16.2433 5.20936 16.1324 5.2598 15.9915C5.28906 15.9098 5.28906 15.8079 5.28906 15.6041V8.76399H9.88866C10.3601 8.76399 10.5958 8.76399 10.7422 8.61754C10.8887 8.47109 10.8887 8.23539 10.8887 7.76399V6.5043C10.8887 6.0329 10.8887 5.7972 10.7422 5.65075C10.5958 5.5043 10.3601 5.5043 9.88866 5.5043H5.28906V4.99928C5.28906 4.03515 5.51897 3.82855 6.57653 3.82855H16.7946C16.839 3.82855 16.8612 3.82855 16.8799 3.82714C17.1265 3.80859 17.3225 3.61262 17.341 3.36606C17.3424 3.34733 17.3424 3.32514 17.3424 3.28075C17.3424 3.05543 17.3424 2.94277 17.3353 2.8477C17.2411 1.59612 16.2463 0.601305 14.9947 0.507151C14.8997 0.5 14.787 0.5 14.5617 0.5H5.33505Z" fill="currentColor"/>
-</svg>
- -->
-
- <svg viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-<path d="M16 0H6C3.17157 0 1.75736 0 0.87868 0.87868C0 1.75736 0 3.17157 0 6V13C0 14.6569 1.34315 16 3 16C3.55228 16 4 15.5523 4 15V8H10.5C10.9659 8 11.1989 8 11.3827 7.92388C11.6277 7.82239 11.8224 7.62771 11.9239 7.38268C12 7.19891 12 6.96594 12 6.5C12 6.03406 12 5.80109 11.9239 5.61732C11.8224 5.37229 11.6277 5.17761 11.3827 5.07612C11.1989 5 10.9659 5 10.5 5H4C4 4.05719 4 3.58579 4.29289 3.29289C4.58579 3 5.05719 3 6 3H17C17.5523 3 18 2.55228 18 2C18 0.895431 17.1046 0 16 0Z" fill="currentColor"/>
-<path d="M14 7.73784V6.83333C14 6.05147 14 5.66055 14.2066 5.39124C14.2598 5.32191 14.3219 5.25985 14.3912 5.20665C14.6605 5 15.0515 5 15.8333 5H16C16.9428 5 17.4142 5 17.7071 5.29289C18 5.58579 18 6.05719 18 7V8C18 9.88562 18 10.8284 18.5858 11.4142C19.1716 12 20.1144 12 22 12H23C24.8856 12 25.8284 12 26.4142 11.4142C27 10.8284 27 9.88562 27 8V7C27 6.05719 27 5.58579 27.2929 5.29289C27.5858 5 28.0572 5 29 5C29.9428 5 30.4142 5 30.7071 5.29289C31 5.58579 31 6.05719 31 7V14C31 14.9428 31 15.4142 30.7071 15.7071C30.4142 16 29.9428 16 29 16C28.0572 16 27.5858 16 27.2929 15.7071C27 15.4142 27 14.9428 27 14L26.9359 14.0641C26.1835 14.8165 25.8072 15.1928 25.3625 15.4529C25.0478 15.6369 24.7094 15.7771 24.3568 15.8694C23.8584 16 23.3263 16 22.2622 16C19.2142 16 17.6902 16 16.5486 15.3578C15.7505 14.9089 15.0911 14.2495 14.6422 13.4514C14 12.3098 14 10.7858 14 7.73784Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35 0C35.9428 0 36.4141 7.55489e-05 36.707 0.292969C36.9999 0.585862 37 1.05719 37 2V6C37.5266 5.47345 37.7901 5.2104 38.0781 4.99512C38.7467 4.49551 39.5295 4.17121 40.3555 4.05176C40.7113 4.0003 41.0837 4 41.8281 4H44C44.929 4 45.3936 3.99997 45.7822 4.06152C47.9217 4.4004 49.5996 6.07835 49.9385 8.21777C50 8.60644 50 9.07099 50 10C50 10.929 50 11.3936 49.9385 11.7822C49.5996 13.9217 47.9217 15.5996 45.7822 15.9385C45.3936 16 44.929 16 44 16H41.8281C41.0837 16 40.7113 15.9997 40.3555 15.9482C39.5295 15.8288 38.7467 15.5045 38.0781 15.0049C37.7901 14.7896 37.5265 14.5265 37 14C37 14.9428 36.9999 15.4141 36.707 15.707C36.4141 15.9999 35.9428 16 35 16C34.0572 16 33.5859 15.9999 33.293 15.707C33.0001 15.4141 33 14.9428 33 14V2C33 1.05719 33.0001 0.585862 33.293 0.292969C33.5859 7.55191e-05 34.0572 0 35 0ZM40 8C38.8954 8 38 8.89543 38 10C38 11.1046 38.8954 12 40 12H44C45.1046 12 46 11.1046 46 10C46 8.89543 45.1046 8 44 8H40Z" fill="currentColor"/>
-<path d="M52 7C52 6.05719 52 5.58579 52.2929 5.29289C52.5858 5 53.0572 5 54 5V5C54.9428 5 55.4142 5 55.7071 5.29289C56 5.58579 56 6.05719 56 7V14C56 14.9428 56 15.4142 55.7071 15.7071C55.4142 16 54.9428 16 54 16V16C53.0572 16 52.5858 16 52.2929 15.7071C52 15.4142 52 14.9428 52 14V7Z" fill="currentColor"/>
-<path d="M52 1.5C52 1.03406 52 0.801088 52.0761 0.617317C52.1776 0.372288 52.3723 0.177614 52.6173 0.0761205C52.8011 0 53.0341 0 53.5 0H54.5C54.9659 0 55.1989 0 55.3827 0.0761205C55.6277 0.177614 55.8224 0.372288 55.9239 0.617317C56 0.801088 56 1.03406 56 1.5V1.5C56 1.96594 56 2.19891 55.9239 2.38268C55.8224 2.62771 55.6277 2.82239 55.3827 2.92388C55.1989 3 54.9659 3 54.5 3H53.5C53.0341 3 52.8011 3 52.6173 2.92388C52.3723 2.82239 52.1776 2.62771 52.0761 2.38268C52 2.19891 52 1.96594 52 1.5V1.5Z" fill="currentColor"/>
-</svg>

package/src/components/ui/Msg.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { slide } from "svelte/transition";
-	import type { MsgType } from "@/types/msg";
-
-	let { msg }: { msg: MsgType } = $props();
-
-	const types = {
-		info: "bg-blue-600 text-white",
-		success: "bg-green-600 text-white",
-		error: "bg-red-500/20 text-red-200",
-	};
-</script>
-
-{#if msg.visible}
-	<div
-		transition:slide
-		class={["text-sm/[130%] py-6 px-16 rounded-[8px]", types[msg.type]]}
-	>
-		<p>{msg.text}</p>
-	</div>
-{/if}

package/src/components/ui/Navbar.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { fly, scale } from "svelte/transition";
-	import Layout from "../Layout.svelte";
-
-	import { getModules } from "@modules";
-	import { cubicOut } from "svelte/easing";
-
-	const { router, navbar } = getModules();
-
-	let xIn = $derived(router.direction === "back" ? -32 : 32);
-	let xOut = $derived(router.direction === "back" ? 32 : -32);
-</script>
-
-<div
-	class={[
-		"flex-center py-10 touch:pt-16 navbar absolute inset-0 bottom-auto z-10",
-		"transition-[translate,opacity]",
-		navbar.visible ? "ease-out-cubic duration-400" : "-translate-y-full pointer-events-none opacity-0 ease-in duration-200"
-	]}
->
-	<div class="flex-center h-32 touch:h-40 px-16 glass rounded-full items-center bg-slate-500/10 backdrop-blur overflow-clip">
-		<Layout animate="width" classOutter="flex-center">
-			<p class="flex touch:text-xl/none font-semibold whitespace-nowrap shrink-0 opacity-0">{navbar.title}</p>
-			{#key navbar.title}
-				<p
-					in:fly={{ y: xIn, duration: 400, easing: cubicOut }}
-					out:fly={{ y: xOut, duration: 400, easing: cubicOut }}
-					class="flex touch:text-xl/none font-semibold whitespace-nowrap shrink-0 absolute-center"
-				>{navbar.title}</p>
-			{/key}
-		</Layout>
-	</div>
-</div>

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>