create-feathersdev 0.11.3 → 0.12.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.12.0](https://github.com/feathersdev/cloud/compare/v0.11.4...v0.12.0) (2025-11-04)
+
+
+### Features
+
+* Migrate to D1 ([#301](https://github.com/feathersdev/cloud/issues/301)) ([049fe52](https://github.com/feathersdev/cloud/commit/049fe52d22e1aae32c5b82c1618e4e2ff4193123)), closes [#302](https://github.com/feathersdev/cloud/issues/302) [#303](https://github.com/feathersdev/cloud/issues/303)
+* Talon Auth ([#317](https://github.com/feathersdev/cloud/issues/317)) ([090eb19](https://github.com/feathersdev/cloud/commit/090eb19a26080ab5e1a219e2cbac1de19936541b))
+* Upgrade to Feathers 6 ([#309](https://github.com/feathersdev/cloud/issues/309)) ([7ead81c](https://github.com/feathersdev/cloud/commit/7ead81cc0c87d7a7cf4143ff870bf7e2cad84de6))
+
+
+
+
+
+## [0.11.4](https://github.com/feathersdev/cloud/compare/v0.11.3...v0.11.4) (2025-05-28)
+
+
+### Bug Fixes
+
+* Add --app-id parameter to CLI to skip having to log in ([#293](https://github.com/feathersdev/cloud/issues/293)) ([5188d43](https://github.com/feathersdev/cloud/commit/5188d43817020d24e53670a6570382b0b1bf4057))
+* Some usability tweaks for CLI and app ([#289](https://github.com/feathersdev/cloud/issues/289)) ([3a241ff](https://github.com/feathersdev/cloud/commit/3a241ffa6bf75154d437c8371478df6a5b5c0513))
+
+
+
+
+
 ## [0.11.3](https://github.com/feathersdev/cloud/compare/v0.11.2...v0.11.3) (2025-05-26)
 
 **Note:** Version bump only for package create-feathersdev

package/esm/actions/app.js

@@ -20,7 +20,15 @@ export function generateApp() {
         folder: {
             type: 'input',
             message: 'What folder should the app be created in?',
-            default: ctx.selectedApplication?.name?.toLowerCase(),
+            ...(ctx.selectedApplication?.name && {
+                default: ctx.selectedApplication.name.toLowerCase(),
+            }),
+            validate: (input) => {
+                if (!input) {
+                    return 'Please enter a folder name';
+                }
+                return true;
+            },
         },
     })))
         .then(copyFiles(fromFile(__dirname, '..', '..', 'examples', 'frontend', ctx => ctx.framework), toFile(ctx => ctx.folder)))

package/esm/actions/integrate.js

@@ -19,12 +19,12 @@ export function generateIntegration(force = false) {
             message: 'Which integrations would you like to generate?',
             choices: [
                 {
-                    name: `Frontend - ${chalk.gray('Make authenticated requests from the browser with any framework like React, VueJS, Svelte or Angular etc.')}`,
+                    name: `Frontend - ${chalk.gray('Make authenticated requests from the browser with any framework like React, VueJS, Svelte etc.')}`,
                     checked: true,
                     value: 'frontend',
                 },
                 {
-                    name: `Backend - ${chalk.gray('Verify authenticated requests in a NodeJS, Deno, Bun or Cloudflare Worker server')}`,
+                    name: `Server - ${chalk.gray('Verify authenticated requests in a NodeJS, Deno, Bun or Cloudflare Worker server')}`,
                     checked: true,
                     value: 'backend',
                 },
@@ -35,7 +35,7 @@ export function generateIntegration(force = false) {
         .then(prompt((ctx) => ({
         platform: {
             type: 'list',
-            message: 'Which backend platform are you using?',
+            message: 'Which server platform are you using?',
             choices: [
                 { name: 'NodeJS', value: 'nodejs' },
                 { name: 'Deno', value: 'deno' },
@@ -65,7 +65,7 @@ export function generateIntegration(force = false) {
 }
 export const successMessage = `
 Your feathers.dev auth app is now integrated. 🚀
-Make sure to install the ${chalk.gray('@feathersdev/auth')} package using your your package manager.
+Make sure to install the ${chalk.gray('talon-auth')} package using your your package manager.
 Have a look at the generated files for more information on how to use them.
 
 Go to ${chalk.blue.underline('https://app.feathers.dev')} to customize your login page and manage your users.

package/esm/base.js

@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import { getContext } from '@featherscloud/pinion';
-import { createApiClient, createClient } from '@feathersdev/auth';
+import { createApiClient, createClient } from 'talon-auth';
 const __dirname = new URL('.', import.meta.url).pathname;
 // Read the package.json file
 export const packageJson = JSON.parse(readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));

package/esm/flows/check-login.js

@@ -1,12 +1,12 @@
 import { prompt } from '@featherscloud/pinion';
-import { LoginRequiredError } from '@feathersdev/auth';
 import chalk from 'chalk';
+import { LoginRequiredError } from 'talon-auth';
 export async function performLogin(init) {
     return Promise.resolve(init)
         .then(prompt(ctx => ({
         email: {
             type: 'input',
-            message: 'What is your email address?',
+            message: 'Let\'s get you signed in! Please enter your email address',
             default: ctx.user?.email,
             when: !ctx.email,
         },
@@ -29,7 +29,7 @@ export async function performLogin(init) {
         .then(prompt(ctx => ({
         code: {
             type: 'input',
-            message: `Please enter the verification code that was sent to ${chalk.bold(ctx.email)}`,
+            message: `Please enter the verification code we sent to ${chalk.bold(ctx.email)}`,
             validate: async (code) => {
                 try {
                     await ctx.api.service('verifications/email').update(ctx.verificationId, { code }, {

package/esm/flows/with-application.js

@@ -35,6 +35,21 @@ export async function createApplication(init) {
     });
 }
 export async function withApplication(init) {
+    return Promise.resolve(init)
+        .then((ctx) => {
+        if (ctx.appId) {
+            return {
+                ...ctx,
+                selectedApplication: {
+                    id: ctx.appId,
+                    name: '',
+                }, // Using app ID directly without fetching full details
+            };
+        }
+        return withRemoteApplication(ctx);
+    });
+}
+export async function withRemoteApplication(init) {
     return Promise.resolve(init)
         .then(withOrganization)
         .then(async (ctx) => {

package/esm/index.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { Command, commander } from '@featherscloud/pinion';
-import { createFileStore } from '@feathersdev/auth';
+import { createFileStore } from 'talon-auth';
 import { app } from './actions/app.js';
 import { integrate } from './actions/integrate.js';
 import { login } from './actions/login.js';
@@ -28,6 +28,7 @@ export function generate(initialContext) {
         .option('-e, --email <email>', 'Email address to log in with')
         .option('-p, --platform <platform>', 'The server platform to use (node, deno, bun, cloudflare, express)')
         .option('-f, --framework <framework>', 'The frontend framework to use (react, vue, svelte, vanilla)')
+        .option('-a, --app-id <app-id>', 'The application to use')
         .version(packageJson.version)
         .showHelpAfterError();
     const init = getBaseContext(options, initialContext).then(commander(program));

package/examples/frontend/react/index.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
-  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <title>feathers.dev React App</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/frontend/react/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@feathersdev/auth": "^0.11.2",
-    "@feathersdev/automerge": "^0.11.2",
+    "@feathersdev/auth": "^0.11.0",
+    "@feathersdev/automerge": "^0.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/examples/frontend/react/src/App.css

@@ -1,30 +1,42 @@
-:root {
-  --color-base-100: oklch(3.6% 0.01 270);
-  --color-base-200: oklch(15% 19% 307);
-  --color-base-300: oklch(35% 44% 287);
-  --color-base-300-old: oklch(17.6% 0.04 270);
-  --color-base-content: oklch(93.3% 0.01 260);
-  --color-primary: oklch(48% 39% 348);
-  --color-primary-content: oklch(100% 0 0);
-  --color-secondary: oklch(91.9% 0.13 99.9);
-  --color-secondary`-content: oklch(0% 0 0);
-  --color-accent: oklch(34.1% 0.13 297.4);
-  --color-accent-content: oklch(100% 0 0);
-  --color-neutral: oklch(20.1% 0.05 260.7);
-  --color-neutral-content: oklch(100% 0 0);
-  --color-info: oklch(56.8% 0.14 255.1);
-  --color-info-content: oklch(94.5% 0.01 230);
-  --color-success: oklch(77.1% 0.13 149.9);
-  --color-warning-content: oklch(94.5% 0.01 230);
-  --color-error: oklch(64.1% 0.21 29.3);
-  --color-error-content: oklch(94.5% 0.01 230);
-  --radius-selector: 1rem;
-  --radius-field: 1rem;
-  --radius-box: 0.5rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 1;
-  --noise: 0;
-  --invert-logo: 0;
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
 }

package/examples/frontend/react/src/App.tsx

@@ -5,7 +5,6 @@ import { auth } from './auth'
 import { loadAppDocument, AppDocumentHandle } from './automerge'
 import { FeathersAuthUser } from '@feathersdev/auth'
 import Counter from './Counter'
-import feathersLogo from './assets/feathers.svg'
 
 function App() {
   const [handle, setHandle] = useState<AppDocumentHandle>()
@@ -21,13 +20,15 @@ function App() {
     })
   }, [])
 
-  return (<div className="w-96 mx-auto flex flex-col gap-4 text-center pt-10">
-    <img src={feathersLogo} alt="Feathers Logo" />
-    {handle ? <>
-      <h2 className="text-2xl">Hello <strong>{user?.email}</strong>!</h2>
-      <Counter handle={handle} />
-    </> : <div>Loading...</div>}
-  </div>)
+  return (
+    <>
+      <h1>feathers.dev React Demo</h1>
+      <div className="card">
+        <p>Hello {user?.email}!</p>
+        {handle && <Counter handle={handle} />}
+      </div>
+    </>
+  )
 }
 
 export default App

package/examples/frontend/react/src/Counter.tsx

@@ -16,14 +16,10 @@ export default function Counter({ handle }: { handle: AppDocumentHandle }) {
     })
   }
 
-  return <div className="card bg-base-300 mx-auto rounded-4xl">
-    <div className="card-body">
-      <h2 className="text-2xl">Community Counter</h2>
-      <p className="text-sm">Number of times clicked by everybody</p>
-      <strong className="text-3xl pt-2 pb-3">{counter}</strong>
-      <button className="btn btn-primary" onClick={incrementCounter}>
-        Increment
-      </button>
+  return <div>
+    Our community counter is: <strong>{counter}</strong>
+    <div>
+      <button onClick={incrementCounter}>Increment</button>
     </div>
   </div>
 }

package/examples/frontend/react/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/examples/frontend/react/src/automerge.ts

@@ -7,21 +7,12 @@ import { auth } from './auth.js'
  */
 export const automerge = createAutomerge(auth)
 
-/**
- * Add types for any data you want to store for your application
- */
 export interface AppData {
   counter: number
 }
 
-/**
- * The document handle type for the application
- */
 export type AppDocumentHandle = DocHandle<AppData>
 
-/**
- * Load the document for the application
- */
 export async function loadAppDocument(): Promise<AppDocumentHandle> {
   return automerge.find<AppData>()
 }

package/examples/frontend/react/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/examples/frontend/react/src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

package/examples/frontend/svelte/index.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
-  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <title>feathers.dev Svelte App</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/examples/frontend/svelte/src/App.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
-  import type { FeathersAuthUser } from '@feathersdev/auth';
-  import { loadAppDocument, type AppDocumentHandle } from './automerge.js';
-  import Counter from './Counter.svelte';
-  import { auth } from './auth';
-  import feathersLogo from './assets/feathers.svg';
+  import { authFetch } from './auth';
 
-  let handle: AppDocumentHandle;
-  let user: FeathersAuthUser | null = null;
+  let message = '';
 
-  async function init() {
-    // Get a handle to our app data document
-    handle = await loadAppDocument();
-    // Once the handle is available we are
-    // logged in and can get the current user
-    user = await auth.getUser();
+  async function loadMessage() {
+    // Get data with authentication from your server
+    const response = await authFetch('http://localhost:3030/message', {
+      method: 'GET'
+    });
+
+    if (response.status >= 400) {
+      throw new Error(`Failed to load message: ${response.statusText}`);
+    }
+
+    const body = await response.json();
+
+    message = body.message;
   }
 
-  init();
+  loadMessage().catch((error: any) =>
+    alert(`There was an error: ${error.message}`)
+  );
 </script>
 
-<main class="w-96 mx-auto flex flex-col gap-4 text-center pt-10">
-  <img src={feathersLogo} alt="feathers.dev Logo" />
-  {#if handle}
-    <h2 class="text-2xl">Hello <strong>{user?.email}</strong></h2>
-    <Counter {handle} />
-  {:else}
-    <p>Loading...</p>
-  {/if}
+<main>
+  <h1>Feathers Auth Svelte Demo</h1>
+  <p>The message from the server is:</p>
+  <h2>{message}</h2>
 </main>

package/examples/frontend/svelte/src/app.css

@@ -1,30 +1,79 @@
 :root {
-  --color-base-100: oklch(3.6% 0.01 270);
-  --color-base-200: oklch(15% 19% 307);
-  --color-base-300: oklch(35% 44% 287);
-  --color-base-300-old: oklch(17.6% 0.04 270);
-  --color-base-content: oklch(93.3% 0.01 260);
-  --color-primary: oklch(48% 39% 348);
-  --color-primary-content: oklch(100% 0 0);
-  --color-secondary: oklch(91.9% 0.13 99.9);
-  --color-secondary-content: oklch(0% 0 0);
-  --color-accent: oklch(34.1% 0.13 297.4);
-  --color-accent-content: oklch(100% 0 0);
-  --color-neutral: oklch(20.1% 0.05 260.7);
-  --color-neutral-content: oklch(100% 0 0);
-  --color-info: oklch(56.8% 0.14 255.1);
-  --color-info-content: oklch(94.5% 0.01 230);
-  --color-success: oklch(77.1% 0.13 149.9);
-  --color-warning-content: oklch(94.5% 0.01 230);
-  --color-error: oklch(64.1% 0.21 29.3);
-  --color-error-content: oklch(94.5% 0.01 230);
-  --radius-selector: 1rem;
-  --radius-field: 1rem;
-  --radius-box: 0.5rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 1;
-  --noise: 0;
-  --invert-logo: 0;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
 }

package/examples/frontend/svelte/src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>