fix: now using package.json imports and exports for path alias instea…

…d of tsconfig or svelte config

apps/console-sc/package.json

@@ -55,6 +55,7 @@
 		"prettier-plugin-tailwindcss": "0.5.12",
 		"svelte": "4.2.12",
 		"svelte-check": "3.6.6",
+		"svelte-radix": "1.1.0",
 		"sveltekit-rate-limiter": "0.4.3",
 		"sveltekit-superforms": "2.9.0",
 		"sveltekit-view-transition": "0.5.3",
@@ -66,7 +67,6 @@
 		"typescript": "5.4.2",
 		"vite": "5.1.6",
 		"vite-plugin-tailwind-purgecss": "0.2.0",
-		"vite-tsconfig-paths": "4.3.1",
 		"vitest": "1.3.1",
 		"zod": "3.22.4"
 	},

apps/console-sc/src/app.pcss

@@ -1,4 +1,4 @@
-@import '@spectacular/ui/default';
+@import '@spectacular/ui/styles/default';
 
 @import '@fontsource-variable/inter';
 /*

apps/console-sc/src/routes/+page.svelte

@@ -1,7 +1,12 @@
-<script>
-	import { Button } from '@spectacular/ui/components/button';
+<script lang="ts">
+	import * as Button from "@spectacular/ui/components/button";
 	import { DashboardPage } from '$lib/components/dashboard';
+
+	type $$Props = Button.Props;
+	type $$Events = Button.Events;
 </script>
 
 <DashboardPage />
-<Button>Button</Button>
+<Button.Root type="submit" on:click on:keydown {...$$restProps}>
+	Test
+</Button.Root>

apps/console-sc/vite.config.ts

@@ -2,12 +2,18 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
 import { enhancedImages } from '@sveltejs/enhanced-img';
 import { purgeCss } from 'vite-plugin-tailwind-purgecss';
-import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-	// TODO: evaluate if we still need 'vite-tsconfig-paths' as sveltekit can handel this with `Path aliases`.
-	// b.t.w packages/ui/tsconfig.json has paths.
-	plugins: [enhancedImages(), sveltekit(), purgeCss(), tsconfigPaths({ ignoreConfigErrors: true })],
+	server: {
+		host: 'console.traefik.me',
+		// host: 'console-192-168-50-34.traefik.me',
+		https: {
+			cert: './../../infra/base/traefik/certs/traefik.me.crt',
+			key: './../../infra/base/traefik/certs/traefik.me.key'
+		},
+		proxy: {}
+	},
+	plugins: [enhancedImages(), sveltekit(), purgeCss()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	},

apps/console/package.json

@@ -94,7 +94,6 @@
 		"typescript": "5.4.2",
 		"vite": "5.1.6",
 		"vite-plugin-tailwind-purgecss": "0.2.0",
-		"vite-tsconfig-paths": "4.3.1",
 		"vitest": "1.3.1",
 		"xstate": "4.38.3",
 		"zod": "3.22.4"

apps/console/src/app.pcss

@@ -1,4 +1,4 @@
-@import '@spectacular/skeleton/default';
+@import '@spectacular/skeleton/styles/default';
 
 @layer components {
 	/* Page Styles */

apps/console/src/lib/components/layout/footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { VERSION } from '@sveltejs/kit';
-	import DocsLogoIcon from '@spectacular/skeleton/components/logos/LogoIcon.svelte';
+	import { LogoIcon } from '@spectacular/skeleton/components/logos';
 	import { Twitter, Youtube, Github, Linkedin } from 'lucide-svelte';
 
 	const appVersion = __APP_VERSION__;
@@ -30,7 +30,7 @@
 			href={'#'}
 			class="title-font flex items-center justify-center font-medium text-gray-900 dark:text-white md:justify-start"
 		>
-			<DocsLogoIcon />
+			<LogoIcon />
 			<span class="ml-3 text-xl">Datablocks</span>
 		</a>
 		<p

apps/console/src/lib/components/layout/header.svelte

@@ -19,7 +19,7 @@
 		Search,
 		ChevronDown
 	} from 'lucide-svelte';
-	import LogoIcon from '@spectacular/skeleton/components/logos/LogoIcon.svelte';
+	import { LogoIcon } from '@spectacular/skeleton/components/logos';
 	import type { User } from '@nhost/nhost-js';
 	// import LoadingIndicatorSpinner from '$lib/components/layout/loading-indicator-spinner.svelte';
 	import LoadingIndicatorBar from '$lib/components/layout/loading-indicator-bar.svelte';

apps/console/src/lib/components/layout/sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AppRail, AppRailAnchor, AppRailTile, getDrawerStore } from '@skeletonlabs/skeleton';
-	import Icon from '@spectacular/skeleton/components/icons/icon.svelte';
+	import { Icon } from '@spectacular/skeleton/components/icons';
 	import { menuNavLinks } from '$lib/links';
 	import { page } from '$app/stores';
 

apps/console/src/routes/(app)/dashboard/customers/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DataHandler } from '@vincjo/datatables';
-	import * as Table from '@spectacular/skeleton/components/table/index.ts';
+	import * as Table from '@spectacular/skeleton/components/table';
 	//Import data
 	// export let data: PageData;
 	// $: ({ customers } = data);

apps/console/src/routes/(app)/dashboard/policies/+page.svelte

@@ -3,11 +3,11 @@
 	import { GraphQLError } from 'graphql';
 	// import { default as SelectFetch } from 'svelte-select';
 	// import { TimeDistance } from 'svelte-time-distance';
-	import DebugShell from '@spectacular/skeleton/components/debug-shell.svelte';
+	import { DebugShell } from '@spectacular/skeleton/components';
 	import SuperDebug, { superForm } from 'sveltekit-superforms';
 	import { Logger } from '@spectacular/utils';
 	import { getToastStore } from '@skeletonlabs/skeleton';
-	import * as Form from '@spectacular/skeleton/components/form/index.ts';
+	import * as Form from '@spectacular/skeleton/components/form';
 	import { handleMessage } from '$lib/components/layout/toast-manager';
 	import { goto, invalidateAll } from '$app/navigation';
 	import { browser, dev } from '$app/environment';

apps/console/src/routes/(app)/dashboard/settings/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Debug from '@spectacular/skeleton/components/debug.svelte';
+	import { Debug } from '@spectacular/skeleton/components';
 
 	export let data;
 </script>

apps/console/src/routes/+error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ParaglideJS } from '@inlang/paraglide-js-adapter-sveltekit';
-	import LogoAnim from '@spectacular/skeleton/components/logos/LogoAnim.svelte';
+	import { LogoAnim } from '@spectacular/skeleton/components/logos';
 	import { page } from '$app/stores';
 	import { i18n } from '$lib/i18n';
 	import * as m from '$i18n/messages';

apps/console/src/routes/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import LogoAnim from '@spectacular/skeleton/components/logos/LogoAnim.svelte';
+	import { LogoAnim } from '@spectacular/skeleton/components/logos';
 	import { version } from '$app/environment';
 	import * as m from '$i18n/messages';
 	import { languageTag } from '$i18n/runtime';
-	// import LogoAnim from '@spectacular/skeleton/components/logos/LogoAnim.svelte';
 	console.log(`Client version: ${version}`);
 </script>
 

apps/console/src/routes/auth/signin/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { AlertTriangle, Loader, Github, MoreHorizontal } from 'lucide-svelte';
-	import Icon from '@spectacular/skeleton/components/icons/icon.svelte';
-	import DebugShell from '@spectacular/skeleton/components/debug-shell.svelte';
+	import { Icon } from '@spectacular/skeleton/components/icons';
+	import { DebugShell } from '@spectacular/skeleton/components';
 	import SuperDebug, { superForm } from 'sveltekit-superforms';
 	import { Logger } from '@spectacular/utils';
 	import { getToastStore } from '@skeletonlabs/skeleton';

apps/console/src/routes/auth/signup/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { AlertTriangle, Loader, MoreHorizontal } from 'lucide-svelte';
-	import DebugShell from '@spectacular/skeleton/components/debug-shell.svelte';
+	import { DebugShell } from '@spectacular/skeleton/components';
 	import SuperDebug, { superForm } from 'sveltekit-superforms';
 	import { Logger } from '@spectacular/utils';
 	import { getToastStore } from '@skeletonlabs/skeleton';

apps/console/svelte.config.js

@@ -29,10 +29,7 @@ const config = {
 		},
 		alias: {
 			$houdini: './$houdini',
-			$i18n: 'src/i18n',
-			// TODO: This alias should not be needed, but without it, VSCode show `Cannot find module` error!!!
-			// Ref: https://github.com/vercel/turbo/discussions/620
-			'@spectacular/skeleton/components/*': '../../packages/skeleton-ui/components/*'
+			$i18n: 'src/i18n'
 		}
 		// env: {
 		// 	dir: '../..',

apps/console/vite.config.ts

@@ -4,16 +4,13 @@ import { defineConfig } from 'vitest/config';
 import { enhancedImages } from '@sveltejs/enhanced-img';
 import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { paraglide } from '@inlang/paraglide-js-adapter-sveltekit/vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import houdini from 'houdini/vite';
 
 // if (!existsSync('./../../infra/base/traefik/certs/traefik.me.crt')) {
 // 	console.log('Missing HTTPS key/cert. You may need to run:  npm run cert');
 // }
 
 export default defineConfig({
-	// TODO: evaluate if we still need 'vite-tsconfig-paths' as sveltekit can handel this with `Path aliases`.
-	// b.t.w packages/ui/tsconfig.json has paths.
 	server: {
 		host: 'console.traefik.me',
 		// host: 'console-192-168-50-34.traefik.me',
@@ -28,7 +25,6 @@ export default defineConfig({
 		enhancedImages(),
 		sveltekit(),
 		purgeCss(),
-		tsconfigPaths({ ignoreConfigErrors: true }),
 		paraglide({
 			project: './project.inlang',
 			outdir: './src/i18n'

apps/playground/package.json

@@ -92,7 +92,6 @@
 		"typescript": "5.4.2",
 		"vite": "5.1.6",
 		"vite-plugin-tailwind-purgecss": "0.2.0",
-		"vite-tsconfig-paths": "4.3.1",
 		"vitest": "1.3.1",
 		"zod": "3.22.4"
 	},

apps/playground/src/app.pcss

@@ -1,4 +1,4 @@
-@import '@spectacular/skeleton/default';
+@import '@spectacular/skeleton/styles/default';
 
 @layer components {
 	/* Page Styles */

apps/playground/src/lib/components/layout/Footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { VERSION } from '@sveltejs/kit';
-	import DocsLogoIcon from '@spectacular/skeleton/components/logos/LogoIcon.svelte';
+	import { LogoIcon } from '@spectacular/skeleton/components/logos';
 	import { Twitter, Youtube, Github, Linkedin } from 'lucide-svelte';
 
 	const appVersion = __APP_VERSION__;
@@ -30,7 +30,7 @@
 			href={'#'}
 			class="title-font flex items-center justify-center font-medium text-gray-900 dark:text-white md:justify-start"
 		>
-			<DocsLogoIcon />
+			<LogoIcon />
 			<span class="ml-3 text-xl">Datablocks</span>
 		</a>
 		<p

apps/playground/src/lib/components/layout/footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { VERSION } from '@sveltejs/kit';
-	import DocsLogoIcon from '@spectacular/skeleton/components/logos/LogoIcon.svelte';
+	import { LogoIcon } from '@spectacular/skeleton/components/logos';
 	import { Twitter, Youtube, Github, Linkedin } from 'lucide-svelte';
 
 	const appVersion = __APP_VERSION__;
@@ -30,7 +30,7 @@
 			href={'#'}
 			class="title-font flex items-center justify-center font-medium text-gray-900 dark:text-white md:justify-start"
 		>
-			<DocsLogoIcon />
+			<LogoIcon />
 			<span class="ml-3 text-xl">Datablocks</span>
 		</a>
 		<p

apps/playground/src/lib/components/layout/header.svelte

@@ -19,7 +19,7 @@
 		Search,
 		ChevronDown
 	} from 'lucide-svelte';
-	import LogoIcon from '@spectacular/skeleton/components/logos/LogoIcon.svelte';
+	import { LogoIcon } from '@spectacular/skeleton/components/logos';
 	import type { User } from '@nhost/nhost-js';
 	// import LoadingIndicatorSpinner from '$lib/components/layout/loading-indicator-spinner.svelte';
 	import LoadingIndicatorBar from '$lib/components/layout/loading-indicator-bar.svelte';

apps/playground/src/lib/components/layout/sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AppRail, AppRailAnchor, AppRailTile, getDrawerStore } from '@skeletonlabs/skeleton';
-	import Icon from '@spectacular/skeleton/components/icons/icon.svelte';
+	import { Icon } from '@spectacular/skeleton/components/icons';
 	import { menuNavLinks } from '$lib/links';
 	import { page } from '$app/stores';
 

apps/playground/src/routes/(app)/dashboard/customers/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DataHandler } from '@vincjo/datatables';
-	import * as Table from '@spectacular/skeleton/components/table/index.ts';
+	import * as Table from '@spectacular/skeleton/components/table';
 	//Import data
 	// export let data: PageData;
 	// $: ({ customers } = data);

apps/playground/src/routes/(play)/experiments/settings/+page.svelte

@@ -5,7 +5,7 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { allergies, schema, themes } from './schema.js';
 	import SuperDebug from 'sveltekit-superforms';
-	import DebugShell from '@spectacular/skeleton/components/debug-shell.svelte';
+	import { DebugShell } from '@spectacular/skeleton/components';
 
 	export let data;
 

apps/playground/src/routes/+error.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LogoAnim from '@spectacular/skeleton/components/logos/LogoAnim.svelte';
+	import { LogoAnim } from '@spectacular/skeleton/components/logos';
 	import { page } from '$app/stores';
 </script>
 

apps/playground/src/routes/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import LogoAnim from '@spectacular/skeleton/components/logos/LogoAnim.svelte';
+	import { LogoAnim } from '@spectacular/skeleton/components/logos';
 	import { version } from '$app/environment';
 	import * as m from '$i18n/messages';
 	import { languageTag } from '$i18n/runtime';
-	// import LogoAnim from '@spectacular/skeleton/components/logos/LogoAnim.svelte';
 	console.log(`Client version: ${version}`);
 </script>
 

apps/playground/svelte.config.js

@@ -29,10 +29,7 @@ const config = {
 		},
 		alias: {
 			$houdini: './$houdini',
-			$i18n: 'src/i18n',
-			// TODO: This alias should not be needed, but without it, VSCode show `Cannot find module` error!!!
-			// Ref: https://github.com/vercel/turbo/discussions/620
-			'@spectacular/skeleton/components/*': '../../packages/skeleton-ui/components/*'
+			$i18n: 'src/i18n'
 		}
 		// env: {
 		// 	dir: '../..',

apps/playground/vite.config.ts

@@ -4,16 +4,21 @@ import { defineConfig } from 'vitest/config';
 import { enhancedImages } from '@sveltejs/enhanced-img';
 import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { paraglide } from '@inlang/paraglide-js-adapter-sveltekit/vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-	// TODO: evaluate if we still need 'vite-tsconfig-paths' as sveltekit can handel this with `Path aliases`.
-	// b.t.w packages/ui/tsconfig.json has paths.
+	server: {
+		host: 'playground.traefik.me',
+		// host: 'playground-192-168-50-34.traefik.me',
+		https: {
+			cert: './../../infra/base/traefik/certs/traefik.me.crt',
+			key: './../../infra/base/traefik/certs/traefik.me.key'
+		},
+		proxy: {}
+	},
 	plugins: [
 		enhancedImages(),
 		sveltekit(),
 		purgeCss(),
-		tsconfigPaths({ ignoreConfigErrors: true }),
 		paraglide({
 			project: './project.inlang',
 			outdir: './src/i18n'