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

package/src/styles/global.css

@@ -1,16 +0,0 @@
-.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

@@ -1,79 +0,0 @@
-.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

@@ -1,159 +0,0 @@
-@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

@@ -1,115 +0,0 @@
-@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

@@ -1,99 +0,0 @@
-: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

@@ -1,22 +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";
-
-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

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

package/src/types/pocketbase.ts

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

package/src/types/user.ts

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

package/svelte.config.js

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

package/tsconfig.json

@@ -1,41 +0,0 @@
-{
-	"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

@@ -1,40 +0,0 @@
-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"),
-		},
-	},
-});