@atlasauth/svelte 0.1.5 → 0.2.0

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.5",
+  "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/design": "0.1.0",
+    "@atlasauth/authz": "0.1.1",
     "@atlasauth/js": "0.4.0",
-    "@atlasauth/backend": "0.3.0",
-    "@atlasauth/authz": "0.1.1"
+    "@atlasauth/backend": "0.3.0"
   },
   "peerDependencies": {
     "svelte": ">=4",