@svadmin/ui 0.38.0 → 0.38.2

package/dist/components/AdminApp.svelte

@@ -117,27 +117,16 @@
     Skeleton: Skeleton as unknown as ComponentRegistry['Skeleton'],
   };
 
-  // Merge and keep a local reference — setContext is only visible to *children*,
-  // so we must use the local variable for lookups within this component.
-  const mergedComponents: ComponentRegistry = { ...defaultComponents, ...userComponents };
-  setComponentRegistry(mergedComponents);
-
   // Resolve router provider (default to hash)
+  const mergedComponents = $derived.by((): ComponentRegistry => ({ ...defaultComponents, ...userComponents }));
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
   const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
-  // Set up initial context synchronously so children can access resources immediately during first render
-  setDataProvider(dataProvider);
-  if (authProvider) setAuthProvider(authProvider);
-  if (taskProvider) setTaskProvider(taskProvider);
-  setResources(resources);
-  setRouterProvider(resolvedRouter);
-  if (locale) setLocale(locale);
-  if (userThemeConfig) configureTheme(userThemeConfig);
-  if (defaultTheme) setTheme(defaultTheme);
+  function syncComponentRegistry() {
+    setComponentRegistry(mergedComponents);
+  }
 
-  // Set up context — use $effect so prop changes are tracked
-  $effect.pre(() => {
+  function syncAppContext() {
     setDataProvider(dataProvider);
     if (authProvider) setAuthProvider(authProvider);
     if (taskProvider) setTaskProvider(taskProvider);
@@ -146,7 +135,15 @@
     if (locale) setLocale(locale);
     if (userThemeConfig) configureTheme(userThemeConfig);
     if (defaultTheme) setTheme(defaultTheme);
-  });
+  }
+
+  // Set up initial context synchronously so children can access resources immediately during first render.
+  syncComponentRegistry();
+  syncAppContext();
+
+  // Set up context — use $effect so prop changes are tracked
+  $effect.pre(syncComponentRegistry);
+  $effect.pre(syncAppContext);
 
   const queryClient = $derived(providedQueryClient ?? new QueryClient({
     defaultOptions: {
@@ -155,11 +152,13 @@
     },
   }));
 
-  // Initialize router with provider synchronously
-  initRouter(resolvedRouter);
-  $effect.pre(() => {
+  function syncRouter() {
     initRouter(resolvedRouter);
-  });
+  }
+
+  // Initialize router with provider synchronously
+  syncRouter();
+  $effect.pre(syncRouter);
 
   // Reactive getters for route state
   const route = $derived(getRoute());

package/dist/components/Layout.svelte

@@ -172,13 +172,16 @@
         {/snippet}
       </Header>
 
-      <!-- Content area -->
-      <main class="flex-1 overflow-y-auto p-5 md:p-7 bg-muted/30">
-        {#key getPath()}
-          <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
-            {@render children()}
-          </div>
-        {/key}
+      <!-- Content area: responsive padding + centered max-width container
+           so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
+      <main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
+        <div class="mx-auto w-full max-w-[1600px]">
+          {#key getPath()}
+            <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+              {@render children()}
+            </div>
+          {/key}
+        </div>
       </main>
     </div>
   </div>

package/dist/components/StepsForm.svelte

@@ -54,6 +54,7 @@
   })());
 
   const validator = $derived(deriveValidator(flatStepsFields));
+  const stepsCount = $derived(steps.length);
 
   // ─── useStepsForm: form state + step navigation ──────────────────
   const form = useStepsForm({
@@ -61,7 +62,7 @@
     get action() { return mode; },
     get id() { return id; },
     get defaultValues() { return defaults; },
-    stepsCount: steps.length,
+    get stepsCount() { return stepsCount; },
     redirect: 'list',
     warnWhenUnsavedChanges: true,
     get validate() { return validator; },

package/dist/components/UndoableNotification.svelte

@@ -12,10 +12,11 @@
     onTimeout: () => void;
   }>();
 
-  let remaining = $state(duration);
+  let remaining = $state(0);
   let dismissed = $state(false);
 
   $effect(() => {
+    remaining = duration;
     const startTime = Date.now();
     const totalMs = duration;
     const interval = setInterval(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.38.0",
+  "version": "0.38.2",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -25,6 +25,10 @@
       "style": "./dist/app.css",
       "default": "./dist/app.css"
     },
+    "./app.theme.css": {
+      "style": "./dist/app.theme.css",
+      "default": "./dist/app.theme.css"
+    },
     "./components/*.svelte": {
       "types": "./dist/components/*.svelte.d.ts",
       "svelte": "./dist/components/*.svelte",
@@ -99,7 +103,7 @@
     "vitest": "^4.1.8"
   },
   "scripts": {
-    "build": "svelte-package -i src -o dist",
+    "build": "svelte-package -i src -o dist && node scripts/postbuild-css.mjs",
     "test": "vitest run --config ./vitest.config.ts"
   }
 }