@atlasauth/svelte 0.1.4 → 0.2.0

package/README.md

@@ -1,11 +1,11 @@
-# @atlas/svelte
+# @atlasauth/svelte
 
 The official **Svelte / SvelteKit** SDK for Atlas — the Svelte peer of
-[`@atlas/react`](../react). Same surface, expressed the Svelte way: a client
+[`@atlasauth/react`](../react). Same surface, expressed the Svelte way: a client
 installed through **context**, reactive auth state exposed as **stores**, and
 `.svelte` **components** for the common flows.
 
-It wraps [`@atlas/js`](../js), the framework-agnostic browser client, exactly as
+It wraps [`@atlasauth/js`](../js), the framework-agnostic browser client, exactly as
 the React SDK does — so both frameworks drive the same FAPI endpoints through one
 implementation and cannot diverge in what the server sees.
 
@@ -21,7 +21,7 @@ implementation and cannot diverge in what the server sees.
 ## Install
 
 ```bash
-pnpm add @atlas/svelte
+pnpm add @atlasauth/svelte
 ```
 
 Peer dependencies: `svelte >= 4`. `@sveltejs/kit` is an **optional** peer, needed
@@ -38,7 +38,7 @@ component which also paints the appearance tokens onto a host-DOM wrapper.
 ```svelte
 <!-- src/routes/+layout.svelte -->
 <script lang="ts">
-  import { AtlasProvider } from '@atlas/svelte';
+  import { AtlasProvider } from '@atlasauth/svelte';
 </script>
 
 <AtlasProvider publishableKey="pk_live_…" frontendApi="https://your-instance-fapi.atlasauth.net">
@@ -50,7 +50,7 @@ Or imperatively, from any component's `<script>`:
 
 ```svelte
 <script lang="ts">
-  import { initAtlas } from '@atlas/svelte';
+  import { initAtlas } from '@atlasauth/svelte';
   const atlas = initAtlas({ publishableKey: 'pk_live_…' });
 </script>
 ```
@@ -73,7 +73,7 @@ live. They mirror the React hooks one-to-one:
 
 ```svelte
 <script lang="ts">
-  import { getUser, getAuth } from '@atlas/svelte';
+  import { getUser, getAuth } from '@atlasauth/svelte';
   const user = getUser();
   const auth = getAuth();
 
@@ -97,7 +97,7 @@ The raw stores are also on the client: `useAtlas().user`, `.session`,
 
 ### 3. Components
 
-Mirror `@atlas/react`'s `components.tsx`:
+Mirror `@atlasauth/react`'s `components.tsx`:
 
 | Component               | Purpose                                                        |
 | ----------------------- | ------------------------------------------------------------- |
@@ -114,7 +114,7 @@ Mirror `@atlas/react`'s `components.tsx`:
 
 ```svelte
 <script lang="ts">
-  import { SignedIn, SignedOut, SignIn, UserButton, Protect } from '@atlas/svelte';
+  import { SignedIn, SignedOut, SignIn, UserButton, Protect } from '@atlasauth/svelte';
 </script>
 
 <SignedOut><SignIn /></SignedOut>
@@ -132,7 +132,7 @@ Mirror `@atlas/react`'s `components.tsx`:
 
 ### Theming & i18n
 
-Same as `@atlas/react`: pass `appearance` (design tokens + per-element class
+Same as `@atlasauth/react`: pass `appearance` (design tokens + per-element class
 overrides — components render in the host DOM, no iframe, so Tailwind/CSS just
 work) and `localization` (a flat i18n catalog, merged over `en-US`) to
 `initAtlas` / `<AtlasProvider>`.
@@ -148,15 +148,15 @@ work) and `localization` (a flat i18n catalog, merged over `en-US`) to
 
 ## SvelteKit SSR
 
-The server helper lives at the separate `@atlas/svelte/server` entry (it depends
-on `@atlas/backend` and must never enter a browser bundle). It verifies the
+The server helper lives at the separate `@atlasauth/svelte/server` entry (it depends
+on `@atlasauth/backend` and must never enter a browser bundle). It verifies the
 session JWT **locally at the edge** — the JWKS is cached in-process, so a warm
 server verifies with no network round-trip.
 
 ### `hooks.server.ts`
 
 ```ts
-import { handleAtlas } from '@atlas/svelte/server';
+import { handleAtlas } from '@atlasauth/svelte/server';
 
 export const handle = handleAtlas({
   jwksUrl: 'https://your-instance-fapi.atlasauth.net/.well-known/jwks.json',
@@ -172,7 +172,7 @@ This resolves the session once per request and stashes it on
 
 ```ts
 // +layout.server.ts
-import { getServerAuth } from '@atlas/svelte/server';
+import { getServerAuth } from '@atlasauth/svelte/server';
 
 export const load = (event) => {
   const auth = getServerAuth(event);
@@ -182,7 +182,7 @@ export const load = (event) => {
 
 ```ts
 // a protected +page.server.ts
-import { getServerAuth } from '@atlas/svelte/server';
+import { getServerAuth } from '@atlasauth/svelte/server';
 import { error } from '@sveltejs/kit';
 
 export const load = (event) => {
@@ -198,13 +198,13 @@ export const load = (event) => {
 
 `getServerAuth(event).has(condition)` answers a condition without throwing;
 `.protect(condition)` asserts it (throwing `ForbiddenError`). Both use the shared
-`@atlas/authz` primitive — the same one `<Protect>` evaluates in the browser — so
+`@atlasauth/authz` primitive — the same one `<Protect>` evaluates in the browser — so
 a check reads identically on the client, here, and in the React/Next SDKs.
 
 For strong typing of `event.locals.auth`, add to `src/app.d.ts`:
 
 ```ts
-import type { ServerAuth } from '@atlas/svelte/server';
+import type { ServerAuth } from '@atlasauth/svelte/server';
 declare global {
   namespace App {
     interface Locals {
@@ -218,13 +218,13 @@ export {};
 ## Development
 
 ```bash
-pnpm --filter @atlas/svelte build       # svelte-package → dist/
-pnpm --filter @atlas/svelte typecheck   # svelte-check
-pnpm --filter @atlas/svelte test        # vitest (jsdom + @testing-library/svelte)
+pnpm --filter @atlasauth/svelte build       # svelte-package → dist/
+pnpm --filter @atlasauth/svelte typecheck   # svelte-check
+pnpm --filter @atlasauth/svelte test        # vitest (jsdom + @testing-library/svelte)
 ```
 
 Tests cover the context init, the reactive stores, and `<SignedIn>`/`<SignedOut>`
-(with `@atlas/js` mocked).
+(with `@atlasauth/js` mocked).
 
 ## License
 

package/dist/accessors.d.ts

@@ -1,5 +1,6 @@
 import { type Readable } from 'svelte/store';
 import { type FlowState, type ProviderToken } from '@atlasauth/js';
+import { type AuthStatus } from './context';
 import { type ProtectCondition } from './protect';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
 /**
@@ -35,6 +36,10 @@ export declare function getSession(): Readable<UseSession>;
 export interface UseAuth {
     isLoaded: boolean;
     isSignedIn: boolean;
+    /** Three-state auth status (`loading` | `signed_in` | `signed_out`); same source as isLoaded/isSignedIn. */
+    status: AuthStatus;
+    /** The active session, or null while loading or signed out. */
+    session: AtlasSession | null;
     userId: string | null;
     sessionId: string | null;
     orgId: string | null;

package/dist/accessors.js

@@ -20,9 +20,11 @@ export function getSession() {
 }
 export function getAuth() {
     const atlas = useAtlas();
-    return derived([atlas.status, atlas.claims], ([$status, $claims]) => ({
+    return derived([atlas.status, atlas.session, atlas.claims], ([$status, $session, $claims]) => ({
         isLoaded: $status !== 'loading',
         isSignedIn: $status === 'signed_in',
+        status: $status,
+        session: $session,
         userId: $claims?.sub ?? null,
         sessionId: $claims?.sid ?? null,
         orgId: $claims?.org_id ?? null,

package/dist/appearance.d.ts

@@ -17,6 +17,9 @@
  * replacement is a support burden where every override starts by rebuilding the
  * component's base styles from scratch.
  */
+import { type AppearanceRender, type DesignAppearance, type DesignWarn, type InstanceDesign } from '@atlasauth/design/runtime';
+export { instanceDesignFrom } from '@atlasauth/design/runtime';
+export type { AppearanceRender, AtlasDesign, InstanceDesign, PresetId } from '@atlasauth/design/runtime';
 export interface DesignTokens {
     colorPrimary?: string;
     colorText?: string;
@@ -29,9 +32,13 @@ export interface DesignTokens {
 }
 /** Every element a customer may target. Named for what it IS, not where it sits. */
 export type ElementKey = 'root' | 'card' | 'headerTitle' | 'headerSubtitle' | 'formField' | 'formFieldLabel' | 'formFieldInput' | 'formFieldError' | 'formButtonPrimary' | 'formButtonSecondary' | 'socialButton' | 'dividerText' | 'footerAction' | 'avatar' | 'menu' | 'menuItem' | 'badge';
-export interface Appearance {
-    /** A prebuilt theme to start from. */
+export interface Appearance extends DesignAppearance {
+    /** A prebuilt token theme to start from (pre-design-system themes). */
     baseTheme?: keyof typeof THEMES;
+    /**
+     * Legacy design tokens. Without a design they set the `--atlas-*` variables
+     * exactly as before; with one they map onto it.
+     */
     variables?: DesignTokens;
     elements?: Partial<Record<ElementKey, string>>;
 }
@@ -83,3 +90,21 @@ export declare function cssVariables(tokens: Required<DesignTokens>): Record<str
  * specificity, which is the behaviour anyone writing Tailwind expects.
  */
 export declare function classFor(element: ElementKey, appearance: Appearance | undefined, base: string): string;
+/**
+ * The legacy tokens the developer chose EXPLICITLY: a non-default `baseTheme`
+ * plus `variables`. Only these map onto a design — the token defaults must not
+ * overwrite the dashboard design.
+ */
+export declare function explicitTokens(appearance?: Appearance): DesignTokens;
+/**
+ * Turn an `appearance` (+ the instance's dashboard design from the Frontend
+ * API) into root attributes and a stylesheet — the same semantics as
+ * `@atlasauth/react`. Precedence, lowest first: dashboard design < `preset` <
+ * `variables` (and a non-default `baseTheme`) < `design`. Without a dashboard
+ * design and without `preset`/`design`, the output is exactly the
+ * pre-design-system one: the token variables, no stylesheet, no attributes.
+ */
+export declare function renderAppearance(appearance: Appearance | undefined, instanceDesign: InstanceDesign | null | undefined, options?: {
+    frontendApi?: string;
+    warn?: DesignWarn;
+}): AppearanceRender;

package/dist/appearance.js

@@ -17,6 +17,8 @@
  * replacement is a support burden where every override starts by rebuilding the
  * component's base styles from scratch.
  */
+import { renderDesignAppearance, } from '@atlasauth/design/runtime';
+export { instanceDesignFrom } from '@atlasauth/design/runtime';
 export const DEFAULT_TOKENS = {
     colorPrimary: '#5b5bd6',
     colorText: '#1c1c1f',
@@ -89,3 +91,36 @@ export function classFor(element, appearance, base) {
     const override = appearance?.elements?.[element];
     return override ? `${base} ${override}` : base;
 }
+// ---- the design system ---------------------------------------------------------
+/**
+ * The legacy tokens the developer chose EXPLICITLY: a non-default `baseTheme`
+ * plus `variables`. Only these map onto a design — the token defaults must not
+ * overwrite the dashboard design.
+ */
+export function explicitTokens(appearance) {
+    const out = {};
+    if (appearance?.baseTheme && appearance.baseTheme !== 'default') {
+        Object.assign(out, THEMES[appearance.baseTheme]);
+    }
+    for (const [key, value] of Object.entries(appearance?.variables ?? {})) {
+        if (value !== undefined)
+            out[key] = value;
+    }
+    return out;
+}
+/**
+ * Turn an `appearance` (+ the instance's dashboard design from the Frontend
+ * API) into root attributes and a stylesheet — the same semantics as
+ * `@atlasauth/react`. Precedence, lowest first: dashboard design < `preset` <
+ * `variables` (and a non-default `baseTheme`) < `design`. Without a dashboard
+ * design and without `preset`/`design`, the output is exactly the
+ * pre-design-system one: the token variables, no stylesheet, no attributes.
+ */
+export function renderAppearance(appearance, instanceDesign, options = {}) {
+    return renderDesignAppearance(appearance, instanceDesign, {
+        tokens: explicitTokens(appearance),
+        legacyStyle: () => cssVariables(resolveTokens(appearance)),
+        frontendApi: options.frontendApi,
+        warn: options.warn,
+    });
+}

package/dist/components/AtlasProvider.svelte

@@ -1,6 +1,6 @@
 <script>import { onDestroy, onMount } from "svelte";
 import { initAtlas } from "../context";
-import { cssVariables, resolveTokens } from "../appearance";
+import { renderAppearance } from "../appearance";
 export let publishableKey;
 export let frontendApi = void 0;
 export let appearance = void 0;
@@ -13,11 +13,28 @@ const client = initAtlas({
   localization,
   fetchImpl
 });
-$: style = Object.entries(cssVariables(resolveTokens(appearance))).map(([name, value]) => `${name}: ${value}`).join("; ");
-onMount(() => void client.boot());
+let instanceDesign = null;
+$: rendered = renderAppearance(appearance, instanceDesign, { frontendApi });
+$: style = Object.entries(rendered.style).map(([name, value]) => `${name}: ${value}`).join("; ");
+$: designStyle = rendered.css ? `<style data-atlas-design="${rendered.key}">${rendered.css}</style>` : "";
+onMount(() => {
+  void client.boot();
+  if (appearance?.instanceDesign !== false) {
+    void client.loadInstanceDesign().then((design) => {
+      if (design) instanceDesign = design;
+    });
+  }
+});
 onDestroy(() => client.destroy());
 </script>
 
-<div class="atlas-root" {style}>
+<svelte:head>
+  {@html designStyle}
+  {#each rendered.fontStylesheets as href (href)}
+    <link rel="stylesheet" {href} data-atlas-font="" />
+  {/each}
+</svelte:head>
+
+<div class="atlas-root" {style} {...rendered.attributes}>
   <slot />
 </div>

package/dist/context.d.ts

@@ -1,7 +1,7 @@
 import { type Readable } from 'svelte/store';
 import { type ProviderToken } from '@atlasauth/js';
 import { type Catalog } from './i18n';
-import type { Appearance } from './appearance';
+import { type Appearance, type InstanceDesign } from './appearance';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser, SessionClaims } from './types';
 /**
  * §10.1 the Svelte peer of React's `<AtlasProvider>`.
@@ -80,6 +80,11 @@ export interface AtlasClient extends AtlasStores {
      * `<AtlasProvider>` also calls it in `onMount`, and a second call is a no-op.
      */
     boot(): Promise<void>;
+    /**
+     * The design configured in the Atlas dashboard (`GET /v1/appearance`), or null
+     * when there is none or it cannot be read. `<AtlasProvider>` applies it.
+     */
+    loadInstanceDesign(): Promise<InstanceDesign | null>;
     /** Cancel the scheduled refresh — call from a component's `onDestroy`. */
     destroy(): void;
 }

package/dist/context.js

@@ -2,6 +2,7 @@ import { getContext, setContext } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
 import { FapiClient, TokenCache, getProviderToken as fetchProviderToken, msUntilRefresh, readExpiry, readRedirectResult, stripRedirectParams, } from '@atlasauth/js';
 import { EN_US, withFallback } from './i18n';
+import { instanceDesignFrom } from './appearance';
 /** The context key. A `Symbol` so it cannot collide with an app's own context. */
 export const ATLAS_KEY = Symbol('atlas');
 function decodeClaims(jwt) {
@@ -196,6 +197,15 @@ export function createAtlasClient(options) {
         }
         await reload();
     }
+    async function loadInstanceDesign() {
+        try {
+            const response = await call('/v1/appearance');
+            return response.ok ? instanceDesignFrom(await response.json()) : null;
+        }
+        catch {
+            return null;
+        }
+    }
     function destroy() {
         if (timer)
             clearTimeout(timer);
@@ -222,6 +232,7 @@ export function createAtlasClient(options) {
         setActiveOrganization,
         reload,
         boot,
+        loadInstanceDesign,
         destroy,
     };
     // Kick off the browser boot immediately unless the caller opts out. Guarded to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,9 +21,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@atlasauth/js": "0.1.9",
+    "@atlasauth/design": "0.1.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/backend": "0.1.7"
+    "@atlasauth/js": "0.4.0",
+    "@atlasauth/backend": "0.3.0"
   },
   "peerDependencies": {
     "svelte": ">=4",