@svadmin/ui 0.40.5 → 0.41.0

package/dist/components/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { captureAdminContext, getResources, canAccessAsync, getAccessControlProvider } from '@svadmin/core';
-  import type { Identity, MenuItem } from '@svadmin/core';
+  import { captureAdminContext } from '@svadmin/core';
+  import type { AccessControlProvider, Action, Identity, MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -35,6 +35,7 @@
     routeMode?: 'hash' | 'path' | 'auto';
   } = $props();
   const adminContext = captureAdminContext();
+  const accessControlProvider = $derived(adminContext.accessControlProvider);
 
   const effectiveRouteMode = $derived(
     routeMode === 'auto'
@@ -103,13 +104,23 @@
     items: NavItem[];
   }
 
-  async function hasCustomMenuAccess(menuItem: MenuItem): Promise<boolean> {
+  async function checkAccess(provider: AccessControlProvider | null, resource: string, action: Action): Promise<boolean> {
+    if (!provider) return true;
+
+    const result = await provider.can({
+      resource,
+      action,
+      meta: adminContext.getProviderMeta(resource),
+    });
+    return Array.isArray(result) ? (result[0]?.can ?? false) : result.can;
+  }
+
+  async function hasCustomMenuAccess(menuItem: MenuItem, provider: AccessControlProvider | null): Promise<boolean> {
     const resource = menuItem.meta?.resource;
     if (!resource) return true;
 
     try {
-      const { can } = await canAccessAsync(resource, menuItem.meta?.action ?? 'list');
-      return can;
+      return await checkAccess(provider, resource, menuItem.meta?.action ?? 'list');
     } catch {
       // Permission-provider failures must not expose protected navigation.
       return false;
@@ -128,17 +139,17 @@
     }));
   }
 
-  async function visibleCustomMenuItem(menuItem: MenuItem): Promise<MenuItem | null> {
-    if (menuItem.meta?.hidden || !await hasCustomMenuAccess(menuItem)) return null;
+  async function visibleCustomMenuItem(menuItem: MenuItem, provider: AccessControlProvider | null): Promise<MenuItem | null> {
+    if (menuItem.meta?.hidden || !await hasCustomMenuAccess(menuItem, provider)) return null;
     if (!menuItem.children) return menuItem;
 
-    const children = await visibleCustomMenuItems(menuItem.children);
+    const children = await visibleCustomMenuItems(menuItem.children, provider);
     if (children.length === 0 && !menuItem.href) return null;
     return { ...menuItem, children };
   }
 
-  async function visibleCustomMenuItems(menuItems: MenuItem[]): Promise<MenuItem[]> {
-    const filteredItems = await Promise.all(menuItems.map(visibleCustomMenuItem));
+  async function visibleCustomMenuItems(menuItems: MenuItem[], provider: AccessControlProvider | null): Promise<MenuItem[]> {
+    const filteredItems = await Promise.all(menuItems.map((menuItem) => visibleCustomMenuItem(menuItem, provider)));
     return filteredItems.filter(isVisibleCustomMenuItem);
   }
 
@@ -146,13 +157,12 @@
 
   $effect(() => {
     const configuredMenu = menu?.length ? snapshotCustomMenuItems(menu) : [];
-    // Provider swaps must invalidate checks nested below public menu groups.
-    getAccessControlProvider();
+    const provider = accessControlProvider;
     customMenuItems = [];
     if (configuredMenu.length === 0) return;
 
     let cancelled = false;
-    void visibleCustomMenuItems(configuredMenu).then((visibleItems) => {
+    void visibleCustomMenuItems(configuredMenu, provider).then((visibleItems) => {
       if (!cancelled) customMenuItems = visibleItems;
     });
 
@@ -163,13 +173,13 @@
 
   $effect(() => {
     const homeLabel = i18n.t('common.home');
-    const currentResources = getResources();
+    const currentResources = adminContext.resources;
+    const provider = accessControlProvider;
     let cancelled = false;
 
     Promise.all(currentResources.map(async (r) => {
       try {
-        const { can } = await canAccessAsync(r.name, 'list');
-        return { r, can };
+        return { r, can: await checkAccess(provider, r.name, 'list') };
       } catch {
         return { r, can: false };
       }

package/dist/components/SmartSuggest.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Input } from './ui/input/index.js';
+  import { captureAdminContext } from '@svadmin/core';
   import type { ChatProvider } from '@svadmin/core';
 
   interface Props {
@@ -29,11 +30,14 @@
     name, 
     type = 'text' 
   }: Props = $props();
+  const adminContext = captureAdminContext();
 
   let suggestion = $state('');
   let isPredicting = $state(false);
   let abortController: AbortController | null = null;
   let predictTimer: ReturnType<typeof setTimeout> | null = null;
+  let requestEpoch = 0;
+  let observedValue = value;
 
   // The ghost text shows the suggestion, but only the part *after* what the user has typed
   // It only displays if the suggestion actually starts with the current value
@@ -49,66 +53,102 @@
     return '';
   });
 
-  import { getChatProvider } from '@svadmin/core';
-
   const suffixText = $derived(ghostText ? ghostText.slice(value.length) : '');
+  const resolvedProvider = $derived(provider ?? adminContext.chatProvider);
 
-  const resolvedProvider = $derived(provider ?? (() => {
-    try {
-      return getChatProvider();
-    } catch {
-      return null;
+  $effect(() => {
+    void resolvedProvider;
+    void context;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    clearSuggestionScope();
+
+    return cancelPrediction;
+  });
+
+  $effect(() => {
+    const currentValue = value;
+    if (currentValue !== observedValue) {
+      observedValue = currentValue;
+      clearSuggestionScope();
     }
-  })());
+  });
+
+  function cancelPrediction() {
+    requestEpoch += 1;
+    abortController?.abort();
+    abortController = null;
+    if (predictTimer) clearTimeout(predictTimer);
+    predictTimer = null;
+    isPredicting = false;
+  }
+
+  function clearSuggestionScope() {
+    cancelPrediction();
+    suggestion = '';
+  }
+
+  function isCurrentPrediction(epoch: number, scopedValue: string) {
+    return epoch === requestEpoch && value === scopedValue;
+  }
 
   async function predict() {
-    if (!resolvedProvider || !value.trim()) {
+    predictTimer = null;
+    const scopedProvider = resolvedProvider;
+    const scopedValue = value;
+    const scopedContext = context;
+    if (!scopedProvider || !scopedValue.trim()) {
       suggestion = '';
       return;
     }
 
+    cancelPrediction();
+    const epoch = requestEpoch;
+    const controller = new AbortController();
+    abortController = controller;
     isPredicting = true;
-    if (abortController) {
-      abortController.abort();
-    }
-    abortController = new AbortController();
+    suggestion = '';
 
     try {
-      const prompt = `You are an autocomplete engine. The user is typing: "${value}". 
-Context: ${context}.
+      const prompt = `You are an autocomplete engine. The user is typing: "${scopedValue}".
+Context: ${scopedContext}.
 Provide ONLY the most likely completion of the exact phrase the user is typing. 
 Include the user's input in your returned string. 
 Do not include any other text, Markdown formatting, quotes, or explanations.`;
 
-      const result = resolvedProvider.sendMessage(
+      const result = scopedProvider.sendMessage(
         [{ id: 'prompt', role: 'user', content: prompt, timestamp: Date.now() }],
-        { signal: abortController.signal }
+        { signal: controller.signal }
       );
 
-      suggestion = '';
-      
-      // Handle streaming or Promise responses seamlessly
       if (Symbol.asyncIterator in result) {
         for await (const chunk of result as AsyncIterable<string>) {
+          if (!isCurrentPrediction(epoch, scopedValue)) return;
           suggestion += chunk;
         }
       } else {
-        suggestion = await result;
+        const response = await result;
+        if (isCurrentPrediction(epoch, scopedValue)) suggestion = response;
+      }
+
+      if (isCurrentPrediction(epoch, scopedValue)) {
+        suggestion = suggestion.trim().replace(/^["']|["']$/g, '');
       }
-      
-      // Clean up the suggestion
-      suggestion = suggestion.trim().replace(/^["']|["']$/g, '');
     } catch (err: unknown) {
-      if (err instanceof Error && err.name !== 'AbortError') {
+      if (isCurrentPrediction(epoch, scopedValue) && err instanceof Error && err.name !== 'AbortError') {
         suggestion = '';
       }
     } finally {
-      isPredicting = false;
+      if (isCurrentPrediction(epoch, scopedValue)) {
+        isPredicting = false;
+        if (abortController === controller) abortController = null;
+      }
     }
   }
 
   function handleInput(e: Event) {
     const target = e.target as HTMLInputElement;
+    cancelPrediction();
+    observedValue = target.value;
     value = target.value;
 
     // Reset suggestion immediately if it no longer matches
@@ -116,19 +156,18 @@ Do not include any other text, Markdown formatting, quotes, or explanations.`;
       suggestion = '';
     }
 
-    if (predictTimer) clearTimeout(predictTimer);
-    
-    // Debounce prediction
     predictTimer = setTimeout(() => {
-      predict();
+      void predict();
     }, 500);
   }
 
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key === 'Tab' && suffixText) {
-      e.preventDefault(); // Prevent standard tab navigation
+      e.preventDefault();
+      cancelPrediction();
+      observedValue = ghostText;
       value = ghostText;
-      suggestion = ''; // Clear suggestion once accepted
+      suggestion = '';
     }
   }
 

package/dist/components/ui/input/input.svelte

@@ -23,9 +23,11 @@
 		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
+
+	const isFileInput = $derived(type?.toLowerCase() === "file");
 </script>
 
-{#if type === "file"}
+{#if isFileInput}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}

package/dist/index.d.ts

@@ -72,7 +72,7 @@ export { default as NotificationsSettings } from "./components/NotificationsSett
 export { default as ApiSettings } from "./components/ApiSettings.svelte";
 export { default as ErrorPage } from "./components/ErrorPage.svelte";
 export { default as PermissionMatrix } from "./components/PermissionMatrix.svelte";
-export type { RoleInfo, ResourceInfo, ActionInfo } from "./types.js";
+export type { AdminProviderBundle, RoleInfo, ResourceInfo, ActionInfo } from "./types.js";
 export { default as RolesSettings } from "./components/RolesSettings.svelte";
 export { default as AuditLogViewer } from "./components/AuditLogViewer.svelte";
 export { default as TenantSwitcher } from "./components/TenantSwitcher.svelte";

package/dist/types.d.ts

@@ -1,3 +1,14 @@
+import type { I18nProvider, ProviderBundle } from '@svadmin/core';
+/**
+ * AdminApp 的可组合 provider 配置。
+ *
+ * 旧版顶层 props 仍然可用，且在同时传入时优先于这里的同名配置。
+ * Access control 仅控制浏览器端呈现，后端仍必须独立鉴权。
+ */
+export type AdminProviderBundle = ProviderBundle & {
+    /** UI-only locale integration; all other fields come from Core's canonical ProviderBundle. */
+    readonly i18nProvider?: I18nProvider;
+};
 export type RoleInfo = {
     code: string;
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.40.5",
+  "version": "0.41.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.34.2",
+    "@svadmin/core": "^0.35.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",