fubi 0.4.8 → 1.0.0-beta.2

package/src/styles/global.css

@@ -0,0 +1,16 @@
+.fubi-scroll-disabled {
+	overflow: hidden !important;
+	touch-action: none;
+}
+
+@media (pointer: coarse) {
+	.fubi-scroll-touch-disabled,
+	.fubi-scroll-touch-disabled body {
+		overflow: hidden !important;
+		touch-action: none;
+	}
+}
+
+html {
+	touch-action: pan-y;
+}

package/src/styles/router.css

@@ -0,0 +1,79 @@
+.page {
+	transform: translateX(calc(100% + var(--fubi-window-right))) rotateY(var(--fubi-rotate-to));
+	position: absolute;
+	transition: box-shadow 300ms ease-out;
+}
+
+.page.page-current {
+	transform: translateX(0%);
+	position: relative;
+}
+
+.window {
+	perspective: 1200px;
+}
+
+/* Router animations */
+
+/* forward, next */
+.router-transition-forward .page-next {
+	animation: next-to-current var(--fubi-router-duration-forward) forwards;
+	animation-timing-function: var(--ease-out-cubic);
+	z-index: 2;
+}
+
+/* forward, current */
+.router-transition-forward .page-current {
+	animation: current-to-prev var(--fubi-router-duration-forward) forwards;
+	animation-timing-function: var(--ease-in-out);
+	z-index: 1;
+}
+
+/* back, previous */
+.router-transition-back .page-current {
+	animation: current-to-next var(--fubi-router-duration-back) forwards;
+	animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
+}
+
+/* back, current */
+.router-transition-back .page-previous {
+	animation: prev-to-current var(--fubi-router-duration-forward) forwards;
+	animation-timing-function: var(--ease-out);
+}
+
+@keyframes next-to-current {
+	from {
+		transform: translateX(calc(100% + var(--fubi-window-right))) rotateY(var(--fubi-rotate-to));
+	}
+	to {
+		transform: translateX(0%) rotateY(0deg);
+	}
+}
+
+@keyframes current-to-next {
+	from {
+		transform: translateX(0%) rotateY(0deg);
+	}
+	to {
+		transform: translateX(calc(100% + var(--fubi-window-right))) rotateY(var(--fubi-rotate-to));
+	}
+}
+
+@keyframes current-to-prev {
+	from {
+		transform: translateX(0%) translateZ(0) rotateY(0deg);
+	}
+	to {
+		transform: translateX(var(--fubi-translate-x-difference)) translateZ(var(--fubi-translate-z-difference))
+			rotateY(0deg);
+	}
+}
+@keyframes prev-to-current {
+	from {
+		transform: translateX(var(--fubi-translate-x-difference)) translateZ(var(--fubi-translate-z-difference))
+			rotateY(0deg);
+	}
+	to {
+		transform: translateX(0%) translateZ(0) rotateY(0deg);
+	}
+}

package/src/styles/styles.css

@@ -0,0 +1,159 @@
+@import "tailwindcss";
+@import "./tailwind.css";
+@import "./variables.css";
+@import "./router.css";
+
+@custom-variant dark (&:is(.dark *));
+
+[data-conte-portal] {
+	@apply isolate;
+}
+
+.xxx {
+	@apply bg-sky-500/10;
+}
+
+.xxxx {
+	@apply bg-sky-500/10 border border-sky-500/20;
+}
+
+.bordered {
+	box-shadow:
+		inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1),
+		inset 0px 2px 4px 0px rgba(255, 255, 255, 0.1);
+}
+
+.glass {
+	box-shadow:
+		inset 0.7px 0.7px 0.5px 0px rgba(255, 255, 255, 0.15),
+		inset -0.7px -0.7px 0.5px 0px rgba(255, 255, 255, 0.15),
+		0px 8px 12px 0px rgba(0, 0, 0, 0.15);
+}
+
+.rim {
+	box-shadow:
+		inset 0px 0.7px 2px 0px rgba(255, 255, 255, 0.2),
+		inset 0px 0.5px 0.5px 0.7px rgba(255, 255, 255, 0.05);
+}
+
+.lift {
+	box-shadow:
+		inset 0px 0.7px 1px 0px rgba(255, 255, 255, 0.1),
+		0px 2px 10px 0px rgba(0, 0, 0, 0.1),
+		0px 4px 8px 0px rgba(0, 0, 0, 0.05);
+}
+
+@media (pointer: coarse) {
+	.page.rim {
+		box-shadow: inset 0px 0.7px 0px 0px rgba(255, 255, 255, 0.2);
+	}
+}
+
+/* reset input autocomplete color */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: rgba(255, 255, 255, 0.5);
+	transition: background-color 5000s ease-in-out 0s;
+	box-shadow: inset 0 0 20px 20px transparent;
+}
+
+input {
+	min-width: 0px;
+}
+
+/* .page-content {
+	mask-image: linear-gradient(
+		to bottom,
+		rgba(0, 0, 0, 0) 0px,
+		rgba(0, 0, 0, 0.01) 7px,
+		rgba(0, 0, 0, 0.04) 13px,
+		rgba(0, 0, 0, 0.08) 20px,
+		rgba(0, 0, 0, 0.15) 27px,
+		rgba(0, 0, 0, 0.23) 33px,
+		rgba(0, 0, 0, 0.33) 40px,
+		rgba(0, 0, 0, 0.44) 47px,
+		rgba(0, 0, 0, 0.56) 53px,
+		rgba(0, 0, 0, 0.67) 60px,
+		rgba(0, 0, 0, 0.77) 67px,
+		rgba(0, 0, 0, 0.85) 73px,
+		rgba(0, 0, 0, 0.92) 80px,
+		rgba(0, 0, 0, 0.96) 87px,
+		rgba(0, 0, 0, 0.99) 93px,
+		rgba(0, 0, 0, 1) 100px
+	);
+} */
+
+@media (pointer: coarse) {
+	/* .page-content {
+		mask-image: linear-gradient(
+			to bottom,
+			rgba(0, 0, 0, 0) 0px,
+			rgba(0, 0, 0, 0.01) 8px,
+			rgba(0, 0, 0, 0.04) 16px,
+			rgba(0, 0, 0, 0.08) 24px,
+			rgba(0, 0, 0, 0.15) 32px,
+			rgba(0, 0, 0, 0.23) 40px,
+			rgba(0, 0, 0, 0.33) 48px,
+			rgba(0, 0, 0, 0.44) 56px,
+			rgba(0, 0, 0, 0.56) 64px,
+			rgba(0, 0, 0, 0.67) 72px,
+			rgba(0, 0, 0, 0.77) 80px,
+			rgba(0, 0, 0, 0.85) 88px,
+			rgba(0, 0, 0, 0.92) 96px,
+			rgba(0, 0, 0, 0.96) 104px,
+			rgba(0, 0, 0, 0.99) 112px,
+			rgba(0, 0, 0, 1) 120px
+		);
+	} */
+}
+
+.window-inner::-webkit-scrollbar,
+.hide-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+/* list loading animations */
+@keyframes list-loading {
+	0% {
+		background-color: rgba(100, 116, 139, 0.06);
+		transform: scale(1);
+	}
+	30% {
+		background-color: rgba(100, 116, 139, 0.08);
+		transform: scale(1.02);
+	}
+	60% {
+		background-color: rgba(100, 116, 139, 0.06);
+		transform: scale(1);
+	}
+	100% {
+		background-color: rgba(100, 116, 139, 0.06);
+		transform: scale(1);
+	}
+}
+
+.animate-list-loading {
+	animation: list-loading 1s infinite;
+	animation-timing-function: ease-in-out;
+}
+
+.animate-list-loading:first-child {
+	animation-delay: 0s;
+}
+.animate-list-loading:nth-child(2) {
+	animation-delay: 0.1s;
+}
+.animate-list-loading:nth-child(3) {
+	animation-delay: 0.2s;
+}
+
+/* global focus visible settings */
+.focus-visible {
+	@apply focus:outline-0 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-sky-500;
+}
+
+.focus-within {
+	@apply focus:outline-0 focus-within:outline focus-within:outline-offset-2 focus-within:outline-sky-500;
+}

package/src/styles/tailwind.css

@@ -0,0 +1,115 @@
+@custom-variant touch {
+	@media (hover: none) and (pointer: coarse) {
+		@slot;
+	}
+}
+
+@custom-variant mouse {
+	@media (pointer: fine) {
+		@slot;
+	}
+}
+
+@theme {
+	--spacing: 0.0625rem;
+
+	/* Easing functions */
+	--ease-in-cubic: cubic-bezier(0.5, 0, 0.6, 0.2);
+	--ease-out-cubic: cubic-bezier(0.2, 0.6, 0.35, 1);
+	--ease-in-out-cubic: cubic-bezier(0.6, 0, 0.35, 1);
+	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+	--ease-in-quart: cubic-bezier(0.9, 0, 0.7, 0.2);
+	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+	--ease-in-out-quart: cubic-bezier(0.8, 0, 0.2, 1);
+	--ease-in-out-quint: cubic-bezier(0.655, 0, 0, 1);
+
+	--ease-spring: linear(
+		0,
+		0.0018,
+		0.0069 1.15%,
+		0.026 2.3%,
+		0.0637,
+		0.1135 5.18%,
+		0.2229 7.78%,
+		0.5977 15.84%,
+		0.7014,
+		0.7904,
+		0.8641,
+		0.9228,
+		0.9676 28.8%,
+		1.0032 31.68%,
+		1.0225,
+		1.0352 36.29%,
+		1.0431 38.88%,
+		1.046 42.05%,
+		1.0448 44.35%,
+		1.0407 47.23%,
+		1.0118 61.63%,
+		1.0025 69.41%,
+		0.9981 80.35%,
+		0.9992 99.94%
+	);
+	--spring-duration: 0.8333s;
+
+	/*
+	--color-slate: oklch(31.116% 0.01639 237.26);
+	--color-slate-50: oklch(76.037% 0.02274 218.68);
+	--color-slate-100: oklch(72.44% 0.02616 222.72);
+	--color-slate-200: oklch(64.988% 0.03295 223.16);
+	--color-slate-300: oklch(57.092% 0.0344 228.68);
+	--color-slate-400: oklch(48.772% 0.02808 231);
+	--color-slate-500: oklch(40.043% 0.02349 236.38);
+	--color-slate-600: oklch(31.116% 0.01639 237.26);
+	--color-slate-700: oklch(26.802% 0.01367 239.13);
+	--color-slate-800: oklch(22.403% 0.00987 248.27);
+	--color-slate-900: oklch(18.029% 0.00781 248.26);
+	--color-slate-950: oklch(15.77% 0.00539 248.17);
+	*/
+
+	--color-slate: oklch(28.306% 0.01341 229.47);
+	--color-slate-50: oklch(93.154% 0.00509 228.82);
+	--color-slate-100: oklch(89.335% 0.00937 232.38);
+	--color-slate-200: oklch(81.599% 0.01569 229.01);
+	--color-slate-300: oklch(73.621% 0.02321 226.26);
+	--color-slate-400: oklch(65.341% 0.0308 231.74);
+	--color-slate-500: oklch(56.892% 0.03261 230.77);
+	--color-slate-600: oklch(47.781% 0.02727 232.41);
+	--color-slate-700: oklch(38.424% 0.0207 225.75);
+	--color-slate-800: oklch(28.306% 0.01341 229.47);
+	--color-slate-900: oklch(21.782% 0.00848 223.87);
+	--color-slate-950: oklch(18.333% 0.0075 229.36);
+
+	/* 'gray': {
+  DEFAULT: '#8C8C8C',
+  50: '#E8E8E8',
+  100: '#DEDEDE',
+  200: '#C9C9C9',
+  300: '#B5B5B5',
+  400: '#A1A1A1',
+  500: '#8C8C8C',
+  600: '#707070',
+  700: '#545454',
+  800: '#383838',
+  900: '#1C1C1C',
+  950: '#0E0E0E'
+}, */
+
+	--safe-area-top: env(safe-area-inset-top);
+	--safe-area-right: env(safe-area-inset-right);
+	--safe-area-bottom: env(safe-area-inset-bottom);
+	--safe-area-left: env(safe-area-inset-left);
+}
+
+@media (hover: none) and (pointer: coarse) {
+	@theme {
+		/*--spacing: 0.06875rem;*/
+	}
+}
+
+.flex-center {
+	@apply flex items-center justify-center;
+}
+
+.absolute-center {
+	@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}

package/src/styles/variables.css

@@ -0,0 +1,99 @@
+:host {
+	--tw-divide-y-reverse: 0;
+	--tw-border-style: solid;
+	--tw-font-weight: initial;
+	--tw-tracking: initial;
+	--tw-translate-x: 0;
+	--tw-translate-y: 0;
+	--tw-translate-z: 0;
+	--tw-rotate-x: rotateX(0);
+	--tw-rotate-y: rotateY(0);
+	--tw-rotate-z: rotateZ(0);
+	--tw-skew-x: skewX(0);
+	--tw-skew-y: skewY(0);
+	--tw-space-x-reverse: 0;
+	--tw-gradient-position: initial;
+	--tw-gradient-from: #0000;
+	--tw-gradient-via: #0000;
+	--tw-gradient-to: #0000;
+	--tw-gradient-stops: initial;
+	--tw-gradient-via-stops: initial;
+	--tw-gradient-from-position: 0%;
+	--tw-gradient-via-position: 50%;
+	--tw-gradient-to-position: 100%;
+	--tw-shadow: 0 0 #0000;
+	--tw-shadow-color: initial;
+	--tw-inset-shadow: 0 0 #0000;
+	--tw-inset-shadow-color: initial;
+	--tw-ring-color: initial;
+	--tw-ring-shadow: 0 0 #0000;
+	--tw-inset-ring-color: initial;
+	--tw-inset-ring-shadow: 0 0 #0000;
+	--tw-ring-inset: initial;
+	--tw-ring-offset-width: 0px;
+	--tw-ring-offset-color: #fff;
+	--tw-ring-offset-shadow: 0 0 #0000;
+	--tw-blur: initial;
+	--tw-brightness: initial;
+	--tw-contrast: initial;
+	--tw-grayscale: initial;
+	--tw-hue-rotate: initial;
+	--tw-invert: initial;
+	--tw-opacity: initial;
+	--tw-saturate: initial;
+	--tw-sepia: initial;
+	--tw-drop-shadow: initial;
+	--tw-duration: initial;
+	--tw-ease: initial;
+	--tw-outline-style: solid;
+	--px: 0.5px;
+	--tw-scroll-snap-strictness: proximity;
+
+	/* Fubi */
+	--fubi-toolbar-height: 44px;
+	--fubi-toolbar-bottom: 1rem;
+	--fubi-toolbar-right: 1rem;
+
+	--fubi-navbar-height: 52px;
+	--fubi-navbar-height-touch: 66px;
+
+	--fubi-tabbar-height: 68px;
+	--fubi-tabbar-height-touch: 72px;
+
+	--fubi-window-right: 16px;
+	--fubi-window-bottom: calc(var(--fubi-toolbar-height) + var(--fubi-toolbar-bottom) + 4px);
+
+	--fubi-window-bg: transparent;
+	--fubi-page-bg: #151c24;
+	--fubi-page-from-bg: #1e2730;
+	--fubi-page-to-bg: #101316;
+
+	--fubi-ease-forward: cubic-bezier(0.2, 1, 0.3, 1);
+	--fubi-ease-back: cubic-bezier(0.4, 0, 0.7, 0.1);
+	--fubi-router-duration-forward: 400ms;
+	--fubi-router-duration-back: 300ms;
+
+	--fubi-rounded: 38px;
+	--fubi-rounded-mouse: 32px;
+
+	/* router */
+	--fubi-rotate-to: 40deg;
+
+	--fubi-translate-x-difference: 0%;
+	--fubi-translate-z-difference: -300px;
+}
+
+@media (pointer: coarse) {
+	:host {
+		--fubi-rotate-to: 0deg;
+
+		--fubi-translate-x-difference: -30%;
+		--fubi-translate-z-difference: 0px;
+
+		--fubi-toolbar-height: 50px;
+	}
+
+	.router-transition-forward .page-current {
+		animation-timing-function: var(--fubi-ease-forward);
+	}
+}

package/src/test.ts

@@ -0,0 +1,22 @@
+import { mount } from "svelte";
+import App from "./components/App.svelte";
+
+import styles from "./styles/styles.css?inline";
+import stylesGlobal from "./styles/global.css?inline";
+
+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: "lqwmo71n75ihvyj", wrapper } });
+
+export default app;

package/src/types/msg.ts

@@ -0,0 +1,5 @@
+export type MsgType = {
+	type: "info" | "success" | "error";
+	text: string;
+	visible: boolean;
+};

package/src/types/pocketbase.ts

@@ -0,0 +1,7 @@
+import type { RecordModel } from "pocketbase";
+
+export interface CollectionItem extends RecordModel {
+	id: string;
+	created: string;
+	updated: string;
+}

package/src/types/user.ts

@@ -0,0 +1,8 @@
+import { CollectionItem } from "@/types/pocketbase";
+export interface UserType extends CollectionItem {
+	avatar?: string;
+	email: string;
+	emailVisibility: boolean;
+	name: string;
+	verified: boolean;
+}

package/svelte.config.js

@@ -0,0 +1,11 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+	compilerOptions: {
+		runes: true,
+		experimental: {
+			async: true
+		}
+	}
+};

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "dist",
+		"rootDir": "./src",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"allowJs": false,
+		"types": ["node", "vite/client"],
+		"paths": {
+			"@modules": ["./src/modules"],
+			"@modules/*": ["./src/modules/*"],
+			"@pages": ["./src/pages"],
+			"@pages/*": ["./src/pages/*"],
+			"@components": ["./src/components"],
+			"@components/*": ["./src/components/*"],
+			"@lib": ["./src/lib"],
+			"@lib/*": ["./src/lib/*"],
+			"@ui": ["./src/components/ui"],
+			"@ui/*": ["./src/components/ui/*"],
+			"@icons": ["./src/components/icons"],
+			"@icons/*": ["./src/components/icons/*"],
+			"@logger": ["./src/lib/logger.ts"],
+			"@utils": ["./src/lib/utils.ts"],
+			"@/types": ["./src/types"],
+			"@/types/*": ["./src/types/*"],
+			"@styles": ["./src/styles"],
+			"@styles/*": ["./src/styles/*"]
+		}
+	},
+	"include": ["src/**/*", "src/modules/.old-window.svelte.ts", "src/modules/.old-window.svelte.ts"],
+	"exclude": ["node_modules", "dist", "./src/test.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { resolve } from "path";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+	plugins: [svelte(), tailwindcss()],
+	optimizeDeps: {
+		exclude: ["bits-ui"],
+		include: ["bits-ui > svelte-toolbelt"],
+	},
+	ssr: {
+		noExternal: ["bits-ui"],
+	},
+	build: {
+		lib: {
+			entry: {
+				index: resolve(__dirname, "src/index.ts"),
+			},
+			formats: ["es"],
+		},
+		rollupOptions: {
+			external: ["vite", "pocketbase"],
+		},
+	},
+	resolve: {
+		alias: {
+			"@modules": resolve(__dirname, "src/modules"),
+			"@pages": resolve(__dirname, "src/pages"),
+			"@components": resolve(__dirname, "src/components"),
+			"@lib": resolve(__dirname, "src/lib"),
+			"@ui": resolve(__dirname, "src/components/ui"),
+			"@icons": resolve(__dirname, "src/components/icons"),
+			"@logger": resolve(__dirname, "src/lib/logger.ts"),
+			"@utils": resolve(__dirname, "src/lib/utils.ts"),
+			"@/types": resolve(__dirname, "src/types"),
+			"@styles": resolve(__dirname, "src/styles"),
+		},
+	},
+});