@nextclaw/ui 0.21.0 → 0.22.0

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -15,6 +15,7 @@ const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   graphite: '#F8F8F7',
   night: '#101318',
   charcoal: '#1C1C1C',
+  island: '#FBF8ED',
   probe: '#FEFCF6',
 };
 

package/src/features/service-apps/components/__tests__/service-apps-panel.test.tsx

@@ -11,6 +11,7 @@ const refetchServiceApps = vi.fn();
 const refetchAppData = vi.fn();
 const restartServiceAppMutate = vi.fn();
 const revokeServiceActionGrantMutate = vi.fn();
+const grantAgentServiceActionsMutate = vi.fn();
 const resetDeleteServiceApp = vi.fn();
 
 vi.mock('@/features/app-data/hooks/use-app-data', () => ({
@@ -66,6 +67,10 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
     isPending: false,
     mutateAsync: discoverServiceAppActionsMutateAsync,
   }),
+  useGrantAgentServiceActions: () => ({
+    isPending: false,
+    mutate: grantAgentServiceActionsMutate,
+  }),
   useRestartServiceApp: () => ({
     mutate: restartServiceAppMutate,
   }),
@@ -79,7 +84,18 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
     refetch: refetchServiceActionGrants,
   }),
   useServiceActions: () => ({
-    data: { actions: [] },
+    data: {
+      actions: [{
+        id: 'notes.read',
+        appId: 'notes',
+        name: 'read',
+        title: 'Read notes',
+        description: 'Read persisted notes.',
+        risk: 'read',
+        runtimeState: 'matched',
+        grantState: 'not-granted',
+      }],
+    },
     isError: false,
     isLoading: false,
     refetch: refetchServiceActions,
@@ -122,6 +138,10 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
   }),
 }));
 
+vi.mock('@/shared/hooks/use-agents', () => ({
+  useAgents: () => ({ data: { agents: [{ id: 'main', displayName: 'Main' }] } }),
+}));
+
 describe('ServiceAppsPanel', () => {
   it('keeps service actions progressive and deletes through a confirm dialog', async () => {
     const user = userEvent.setup();
@@ -171,4 +191,18 @@ describe('ServiceAppsPanel', () => {
 
     expect(onManagePackage).toHaveBeenCalledWith('nextclaw.personal-organizer');
   });
+
+  it('explicitly grants a service action to the selected agent', async () => {
+    const user = userEvent.setup();
+    render(<ServiceAppsPanel onManagePackage={vi.fn()} />);
+
+    await user.click(screen.getAllByRole('button', { name: /Actions/ })[0]!);
+    await user.click(screen.getByRole('button', { name: 'Grant to Agent' }));
+    await user.click(screen.getByRole('button', { name: 'Main' }));
+
+    expect(grantAgentServiceActionsMutate).toHaveBeenCalledWith({
+      actionIds: ['notes.read'],
+      agentId: 'main',
+    });
+  });
 });

package/src/features/service-apps/components/service-action-row.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import type {
+  AgentProfileView,
+  ServiceActionGrantView,
+  ServiceActionListView,
+} from "@nextclaw/client-sdk";
+import { Bot, ShieldCheck, ShieldPlus, Trash2, Wrench } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { t } from "@/shared/lib/i18n";
+
+type ServiceActionView = ServiceActionListView["actions"][number];
+
+export function ServiceActionRow({
+  action,
+  grants,
+  agents,
+  grantAgentPending,
+  onGrantAgent,
+  onRevoke,
+}: {
+  action: ServiceActionView;
+  grants: ServiceActionGrantView[];
+  agents: AgentProfileView[];
+  grantAgentPending: boolean;
+  onGrantAgent: (actionId: string, agentId: string) => void;
+  onRevoke: (grant: ServiceActionGrantView) => void;
+}) {
+  const [agentMenuOpen, setAgentMenuOpen] = useState(false);
+  const grantedAgentIds = new Set(
+    grants.flatMap((grant) =>
+      grant.caller.surface === "agent" ? [grant.caller.agentId] : [],
+    ),
+  );
+  const availableAgents = agents.filter((agent) => !grantedAgentIds.has(agent.id));
+  return (
+    <div className="py-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground">
+            <Wrench className="h-3.5 w-3.5" />
+          </span>
+          <div className="min-w-0">
+            <div className="truncate text-xs font-medium text-foreground">
+              {action.title ?? action.name}
+            </div>
+            {action.description ? (
+              <div className="truncate text-[11px] text-muted-foreground">
+                {action.description}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {action.runtimeState ? (
+            <span className="text-[11px] text-muted-foreground">
+              {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
+            </span>
+          ) : null}
+          <span className="text-[11px] text-muted-foreground">{action.risk}</span>
+          <Popover open={agentMenuOpen} onOpenChange={setAgentMenuOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                disabled={grantAgentPending || availableAgents.length === 0}
+                className="ml-1 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-40"
+                title={t("serviceAppsGrantToAgent")}
+                aria-label={t("serviceAppsGrantToAgent")}
+              >
+                <ShieldPlus className="h-3.5 w-3.5" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-56 rounded-xl p-1.5">
+              <div className="px-2 py-1.5 text-[11px] font-medium text-muted-foreground">
+                {t("serviceAppsGrantToAgent")}
+              </div>
+              {availableAgents.map((agent) => (
+                <button
+                  key={agent.id}
+                  type="button"
+                  onClick={() => {
+                    onGrantAgent(action.id, agent.id);
+                    setAgentMenuOpen(false);
+                  }}
+                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                >
+                  <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                  <span className="min-w-0 truncate">
+                    {agent.displayName?.trim() || agent.id}
+                  </span>
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      {grants.map((grant) => (
+        <div
+          key={`${grant.caller.surface}:${getGrantCallerId(grant)}:${grant.actionId}`}
+          className="mt-1.5 flex items-center justify-between gap-2 pl-8"
+        >
+          <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+            <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
+            <span className="truncate">
+              {t("serviceAppsGrantedTo")} {getGrantCallerId(grant)}
+            </span>
+          </div>
+          <button
+            type="button"
+            onClick={() => onRevoke(grant)}
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            title={t("serviceAppsRevokeGrant")}
+            aria-label={t("serviceAppsRevokeGrant")}
+          >
+            <Trash2 className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function getGrantCallerId(grant: ServiceActionGrantView): string {
+  return grant.caller.surface === "panel-app"
+    ? grant.caller.appId
+    : grant.caller.agentId;
+}

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type {
+  AgentProfileView,
   ServiceActionGrantView,
   ServiceActionListView,
   AppDataEntry,
@@ -16,13 +17,12 @@ import {
   PauseCircle,
   Radar,
   Server,
-  ShieldCheck,
   Trash2,
   Unplug,
   type LucideIcon,
-  Wrench,
 } from "lucide-react";
 import { ServiceAppDeleteDialog } from "@/features/service-apps/components/service-app-delete-dialog";
+import { ServiceActionRow } from "@/features/service-apps/components/service-action-row";
 import {
   Popover,
   PopoverContent,
@@ -45,6 +45,7 @@ export function ServiceAppListItem({
   actions,
   actionsOpen,
   grants,
+  agents,
   deletePending,
   deleteError,
   dataEntry,
@@ -57,11 +58,14 @@ export function ServiceAppListItem({
   onResetDelete,
   onRestart,
   onRevoke,
+  onGrantAgent,
+  grantAgentPending,
 }: {
   app: ServiceAppRecordView;
   actions: ServiceActionView[];
   actionsOpen: boolean;
   grants: ServiceActionGrantView[];
+  agents: AgentProfileView[];
   deletePending: boolean;
   deleteError: unknown;
   dataEntry?: AppDataEntry;
@@ -74,6 +78,8 @@ export function ServiceAppListItem({
   onResetDelete: () => void;
   onRestart: (appId: string) => void;
   onRevoke: (grant: ServiceActionGrantView) => void;
+  onGrantAgent: (actionId: string, agentId: string) => void;
+  grantAgentPending: boolean;
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -245,6 +251,9 @@ export function ServiceAppListItem({
                       grants={grants.filter(
                         (grant) => grant.actionId === action.id,
                       )}
+                      agents={agents}
+                      grantAgentPending={grantAgentPending}
+                      onGrantAgent={onGrantAgent}
                       onRevoke={onRevoke}
                     />
                   ))}
@@ -433,67 +442,3 @@ function ServiceAppDiagnosticRow({
     </>
   );
 }
-
-function ServiceActionRow({
-  action,
-  grants,
-  onRevoke,
-}: {
-  action: ServiceActionView;
-  grants: ServiceActionGrantView[];
-  onRevoke: (grant: ServiceActionGrantView) => void;
-}) {
-  return (
-    <div className="py-2">
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground">
-            <Wrench className="h-3.5 w-3.5" />
-          </span>
-          <div className="min-w-0">
-            <div className="truncate text-xs font-medium text-foreground">
-              {action.title ?? action.name}
-            </div>
-            {action.description ? (
-              <div className="truncate text-[11px] text-muted-foreground">
-                {action.description}
-              </div>
-            ) : null}
-          </div>
-        </div>
-        <div className="flex shrink-0 items-center gap-1">
-          {action.runtimeState ? (
-            <span className="text-[11px] text-muted-foreground">
-              {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
-            </span>
-          ) : null}
-          <span className="text-[11px] text-muted-foreground">
-            {action.risk}
-          </span>
-        </div>
-      </div>
-      {grants.map((grant) => (
-        <div
-          key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`}
-          className="mt-1.5 flex items-center justify-between gap-2 pl-8"
-        >
-          <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
-            <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
-            <span className="truncate">
-              {t("serviceAppsGrantedTo")} {grant.caller.appId}
-            </span>
-          </div>
-          <button
-            type="button"
-            onClick={() => onRevoke(grant)}
-            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-            title={t("serviceAppsRevokeGrant")}
-            aria-label={t("serviceAppsRevokeGrant")}
-          >
-            <Trash2 className="h-3 w-3" />
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -11,12 +11,14 @@ import { ServiceAppListItem } from "@/features/service-apps/components/service-a
 import {
   useDeleteServiceApp,
   useDiscoverServiceAppActions,
+  useGrantAgentServiceActions,
   useRestartServiceApp,
   useRevokeServiceActionGrant,
   useServiceActionGrants,
   useServiceActions,
   useServiceApps,
 } from "@/features/service-apps/hooks/use-service-apps";
+import { useAgents } from "@/shared/hooks/use-agents";
 import {
   Tooltip,
   TooltipContent,
@@ -36,10 +38,12 @@ export function ServiceAppsPanel({
   const appData = useAppData();
   const serviceActions = useServiceActions();
   const serviceActionGrants = useServiceActionGrants();
+  const agents = useAgents();
   const deleteServiceApp = useDeleteServiceApp();
   const restartServiceApp = useRestartServiceApp();
   const discoverServiceAppActions = useDiscoverServiceAppActions();
   const revokeServiceActionGrant = useRevokeServiceActionGrant();
+  const grantAgentServiceActions = useGrantAgentServiceActions();
   const [discoveredActionsByApp, setDiscoveredActionsByApp] = useState<
     Record<string, ServiceActionView[]>
   >({});
@@ -163,6 +167,7 @@ export function ServiceAppsPanel({
                 }
                 actionsOpen={Boolean(expandedActionsByApp[app.id])}
                 grants={grants}
+                agents={agents.data?.agents ?? []}
                 deletePending={deleteServiceApp.isPending}
                 deleteError={deleteServiceApp.error}
                 dataEntry={workspaceDataEntries.find((entry) => entry.appId === app.id)}
@@ -188,6 +193,13 @@ export function ServiceAppsPanel({
                     caller: grant.caller,
                   })
                 }
+                onGrantAgent={(actionId, agentId) =>
+                  void grantAgentServiceActions.mutate({
+                    actionIds: [actionId],
+                    agentId,
+                  })
+                }
+                grantAgentPending={grantAgentServiceActions.isPending}
               />
             ))}
           </div>

package/src/features/service-apps/hooks/use-service-apps.ts

@@ -71,7 +71,9 @@ export function useRevokeServiceActionGrant() {
   return useMutation({
     mutationFn: (params: {
       actionId: string;
-      caller: { surface: 'panel-app'; appId: string };
+      caller:
+        | { surface: 'panel-app'; appId: string }
+        | { surface: 'agent'; agentId: string };
     }) => nextclawClient.serviceApps.revokeServiceActionGrant(params),
     onSuccess: async () => {
       await Promise.all([
@@ -81,3 +83,20 @@ export function useRevokeServiceActionGrant() {
     },
   });
 }
+
+export function useGrantAgentServiceActions() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (params: { agentId: string; actionIds: string[] }) =>
+      nextclawClient.serviceApps.grantAgentServiceActions(
+        params.agentId,
+        params.actionIds,
+      ),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTION_GRANTS_QUERY_KEY }),
+      ]);
+    },
+  });
+}

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -66,8 +66,8 @@ describe("AppearanceSettingsPage", () => {
     render(<AppearanceSettingsPage />);
 
     fireEvent.click(screen.getByRole("combobox", { name: "Theme" }));
-    fireEvent.click(screen.getByRole("option", { name: "Charcoal" }));
-    expect(mocks.setTheme).toHaveBeenCalledWith("charcoal");
+    fireEvent.click(screen.getByRole("option", { name: "Island" }));
+    expect(mocks.setTheme).toHaveBeenCalledWith("island");
 
     fireEvent.click(screen.getByRole("combobox", { name: "Language" }));
     fireEvent.click(screen.getByRole("option", { name: "中文" }));

package/src/features/side-dock/components/side-dock.tsx

@@ -230,6 +230,7 @@ export function SideDock({ manager }: SideDockProps) {
     <TooltipProvider delayDuration={250}>
       <aside
         data-testid="side-dock"
+        data-theme-surface="utility-rail"
         className="z-30 flex h-full w-14 shrink-0 flex-col items-center gap-1 border-l border-border/60 bg-background/95 px-2 py-3"
       >
         <div className="flex w-full flex-col items-center gap-1">

package/src/index.css

@@ -1,5 +1,6 @@
 @import "./app/styles/design-system.css";
 @import "./app/styles/charcoal-theme.css";
+@import "./app/styles/island-theme.css";
 
 @tailwind base;
 @tailwind components;

package/src/platforms/desktop/components/__tests__/desktop-app-shell.test.tsx

@@ -83,6 +83,7 @@ describe("DesktopAppShell", () => {
     const controls = screen.getByTestId("desktop-window-controls");
 
     expect(chrome).toBeTruthy();
+    expect(chrome.getAttribute("data-theme-surface")).toBe("header");
     expect(
       chrome.parentElement?.style.getPropertyValue("--desktop-titlebar-height"),
     ).toBe("40px");
@@ -149,6 +150,13 @@ describe("DesktopAppShell", () => {
 
     expect(screen.queryByTestId("desktop-window-chrome")).toBeNull();
     expect(screen.getByTestId("app-content")).toBeTruthy();
+    expect(
+      document.querySelector('[data-theme-decoration="island-paper"]'),
+    ).toBeTruthy();
+    expect(
+      document.querySelector('[data-theme-decoration="island-palm"]'),
+    ).toBeTruthy();
+    expect(document.querySelector("#island-wind-filter")).toBeTruthy();
   });
 
   it("keeps mobile bottom navigation visible inside Windows desktop hosts at narrow widths", () => {

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -59,10 +59,12 @@ export function DesktopAppShell({
   const settingsScroll = useScrollRestoration<HTMLElement>({
     restorationKey: isMainRoute ? null : `settings-page:${pathname}`,
   });
-  const { onScroll: onSettingsScroll, scrollRef: settingsScrollRef } = settingsScroll;
+  const { onScroll: onSettingsScroll, scrollRef: settingsScrollRef } =
+    settingsScroll;
 
   return (
     <div
+      data-theme-surface="app-shell"
       className={cn(
         "h-screen flex flex-col overflow-hidden bg-background font-sans text-foreground",
         shouldUseWindowsChrome ? "rounded-[10px]" : null,
@@ -77,10 +79,61 @@ export function DesktopAppShell({
           : undefined
       }
     >
+      <div aria-hidden="true" data-theme-decoration="island-paper" />
+      <svg aria-hidden="true" className="absolute h-0 w-0" focusable="false">
+        <defs>
+          <filter
+            id="island-wind-filter"
+            x="-8%"
+            y="-8%"
+            width="116%"
+            height="116%"
+            colorInterpolationFilters="sRGB"
+          >
+            <feTurbulence
+              type="turbulence"
+              baseFrequency="0.0025 0.011"
+              numOctaves="2"
+              seed="7"
+              result="island-wind-noise"
+            >
+              <animate
+                attributeName="baseFrequency"
+                dur="8.5s"
+                values="0.0025 0.011;0.0038 0.015;0.0028 0.009;0.0025 0.011"
+                keyTimes="0;0.38;0.72;1"
+                calcMode="spline"
+                keySplines="0.42 0 0.25 1;0.45 0 0.2 1;0.4 0 0.3 1"
+                repeatCount="indefinite"
+              />
+            </feTurbulence>
+            <feDisplacementMap
+              in="SourceGraphic"
+              in2="island-wind-noise"
+              scale="5"
+              xChannelSelector="R"
+              yChannelSelector="G"
+            >
+              <animate
+                attributeName="scale"
+                dur="8.5s"
+                values="5;17;9;14;5"
+                keyTimes="0;0.34;0.58;0.78;1"
+                calcMode="spline"
+                keySplines="0.42 0 0.25 1;0.45 0 0.2 1;0.4 0 0.3 1;0.42 0 0.3 1"
+                repeatCount="indefinite"
+              />
+            </feDisplacementMap>
+          </filter>
+        </defs>
+      </svg>
+      <div aria-hidden="true" data-theme-decoration="island-palm">
+        <span data-island-palm-part="frond-wind" />
+      </div>
       {shouldUseWindowsChrome ? (
         <DesktopWindowChrome sidebarCollapsed={isSidebarCollapsed} />
       ) : null}
-      <div className="flex min-h-0 flex-1 overflow-hidden">
+      <div className="relative z-[1] flex min-h-0 flex-1 overflow-hidden">
         {!isMainRoute && <Sidebar />}
         <div className="flex-1 flex min-w-0 overflow-hidden relative">
           <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
@@ -88,6 +141,7 @@ export function DesktopAppShell({
               <div className="flex-1 h-full overflow-hidden">{children}</div>
             ) : (
               <main
+                data-theme-surface="settings-workspace"
                 ref={settingsScrollRef}
                 onScroll={onSettingsScroll}
                 className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar"

package/src/platforms/desktop/components/desktop-window-chrome.tsx

@@ -30,6 +30,7 @@ export function DesktopWindowChrome({
 
   return (
     <header
+      data-theme-surface="header"
       className="desktop-window-drag relative flex h-[var(--desktop-titlebar-height)] shrink-0 bg-secondary after:absolute after:bottom-0 after:left-[var(--desktop-sidebar-width)] after:right-0 after:border-b after:border-border/80"
       data-testid="desktop-window-chrome"
     >

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -188,6 +188,9 @@ describe("DocBrowser", () => {
     render(<DocBrowser />);
 
     expect(screen.getByTestId("doc-browser-panel").style.width).toBe("420px");
+    expect(
+      screen.getByTestId("doc-browser-panel").getAttribute("data-theme-surface"),
+    ).toBe("doc-browser");
     expect(screen.getByTestId("resizable-right-panel-handle")).toBeTruthy();
   });
 

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -410,6 +410,7 @@ export function DocBrowser({
     return (
       <ResizableRightPanel
         data-testid="doc-browser-panel"
+        data-theme-surface="doc-browser"
         defaultWidth={dockedWidth}
         width={dockedWidth}
         minWidth={DOC_BROWSER_DOCKED_MIN_WIDTH}
@@ -424,6 +425,7 @@ export function DocBrowser({
   return (
     <div
       data-testid="doc-browser-panel"
+      data-theme-surface="doc-browser"
       className={cn(
         'relative flex flex-col overflow-hidden bg-card text-card-foreground',
         isFullscreen

package/src/shared/components/ui/context-menu/context-menu.tsx

@@ -108,6 +108,7 @@ function ContextMenuSurface({
       <div
         ref={menuRef}
         role="menu"
+        data-theme-overlay="menu"
         aria-label={label}
         className="fixed min-w-52 max-w-72 overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[0_18px_48px_-20px_rgba(15,23,42,0.42)]"
         style={{ left: position.x, top: position.y }}

package/src/shared/components/ui/dialog.tsx

@@ -18,6 +18,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
+    data-theme-overlay="modal-backdrop"
     className={cn(
       "fixed inset-0 z-[var(--z-modal-backdrop,10000)] bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
@@ -35,6 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      data-theme-overlay="dialog"
       className={cn(
         "fixed left-[50%] top-[50%] z-[var(--z-modal,10050)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className

package/src/shared/components/ui/overlays/sheet.tsx

@@ -16,6 +16,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     ref={ref}
+    data-theme-overlay="modal-backdrop"
     className={cn(
       "fixed inset-0 z-[var(--z-modal-backdrop,10000)] bg-black/35 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
@@ -59,6 +60,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
+      data-theme-overlay="sheet"
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >

package/src/shared/components/ui/popover.tsx

@@ -24,6 +24,7 @@ const PopoverContent = React.forwardRef<
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
+      data-theme-overlay="popover"
       sideOffset={sideOffset}
       align={align}
       collisionPadding={collisionPadding}

package/src/shared/components/ui/select.tsx

@@ -77,6 +77,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Portal>
         <SelectPrimitive.Content
             ref={ref}
+            data-theme-overlay="select"
             className={cn(
                 "relative z-[var(--z-popover,10100)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 position === "popper" &&

package/src/shared/components/ui/tooltip.tsx

@@ -31,6 +31,7 @@ const TooltipContent = React.forwardRef<
     <TooltipPrimitive.Portal>
         <TooltipPrimitive.Content
             ref={ref}
+            data-theme-overlay="tooltip"
             sideOffset={sideOffset}
             className={cn(
                 'z-[var(--z-tooltip,10150)] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',