@sero-ai/ui 0.4.1 → 0.4.2

package/dist/components/ui/sheet.cjs

@@ -3,6 +3,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var _lucidereact = require('lucide-react');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 function Sheet({ ...props }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Dialog.Root, { "data-slot": "sheet", ...props });
 }
@@ -19,7 +20,8 @@ function SheetClose({
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Dialog.Portal, { "data-slot": "sheet-portal", container, ...props });
 }
 function SheetOverlay({
   className,
@@ -112,7 +114,7 @@ function SheetDescription({
     _radixui.Dialog.Description,
     {
       "data-slot": "sheet-description",
-      className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/sheet.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog as SheetPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -19,7 +20,8 @@ function SheetClose({
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", container, ...props });
 }
 function SheetOverlay({
   className,
@@ -112,7 +114,7 @@ function SheetDescription({
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/sidebar.cjs

@@ -389,7 +389,7 @@ function SidebarGroupContent({
     {
       "data-slot": "sidebar-group-content",
       "data-sidebar": "group-content",
-      className: _utils.cn.call(void 0, "w-full text-sm", className),
+      className: _utils.cn.call(void 0, "w-full text-base", className),
       ...props
     }
   );
@@ -417,7 +417,7 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 const sidebarMenuButtonVariants = _classvarianceauthority.cva.call(void 0, 
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-base outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -425,9 +425,9 @@ const sidebarMenuButtonVariants = _classvarianceauthority.cva.call(void 0,
         outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
       },
       size: {
-        default: "h-8 text-sm",
+        default: "h-8 text-base",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+        lg: "h-12 text-base group-data-[collapsible=icon]:p-0!"
       }
     },
     defaultVariants: {
@@ -613,7 +613,7 @@ function SidebarMenuSubButton({
         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
-        size === "md" && "text-sm",
+        size === "md" && "text-base",
         "group-data-[collapsible=icon]:hidden",
         className
       ),

package/dist/components/ui/sidebar.js

@@ -389,7 +389,7 @@ function SidebarGroupContent({
     {
       "data-slot": "sidebar-group-content",
       "data-sidebar": "group-content",
-      className: cn("w-full text-sm", className),
+      className: cn("w-full text-base", className),
       ...props
     }
   );
@@ -417,7 +417,7 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-base outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -425,9 +425,9 @@ const sidebarMenuButtonVariants = cva(
         outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
       },
       size: {
-        default: "h-8 text-sm",
+        default: "h-8 text-base",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+        lg: "h-12 text-base group-data-[collapsible=icon]:p-0!"
       }
     },
     defaultVariants: {
@@ -613,7 +613,7 @@ function SidebarMenuSubButton({
         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
-        size === "md" && "text-sm",
+        size === "md" && "text-base",
         "group-data-[collapsible=icon]:hidden",
         className
       ),

package/dist/components/ui/table.cjs

@@ -11,7 +11,7 @@ function Table({ className, ...props }) {
         "table",
         {
           "data-slot": "table",
-          className: _utils.cn.call(void 0, "w-full caption-bottom text-sm", className),
+          className: _utils.cn.call(void 0, "w-full caption-bottom text-base", className),
           ...props
         }
       )
@@ -98,7 +98,7 @@ function TableCaption({
     "caption",
     {
       "data-slot": "table-caption",
-      className: _utils.cn.call(void 0, "text-muted-foreground mt-4 text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground mt-4 text-base", className),
       ...props
     }
   );

package/dist/components/ui/table.js

@@ -11,7 +11,7 @@ function Table({ className, ...props }) {
         "table",
         {
           "data-slot": "table",
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn("w-full caption-bottom text-base", className),
           ...props
         }
       )
@@ -98,7 +98,7 @@ function TableCaption({
     "caption",
     {
       "data-slot": "table-caption",
-      className: cn("text-muted-foreground mt-4 text-sm", className),
+      className: cn("text-muted-foreground mt-4 text-base", className),
       ...props
     }
   );

package/dist/components/ui/tabs.cjs

@@ -60,7 +60,7 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: _utils.cn.call(void 0, 
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-base font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",

package/dist/components/ui/tabs.js

@@ -60,7 +60,7 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-base font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",

package/dist/components/ui/textarea.cjs

@@ -8,7 +8,7 @@ function Textarea({ className, placeholder, "aria-label": ariaLabel, ...props })
       placeholder,
       "data-slot": "textarea",
       className: _utils.cn.call(void 0, 
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-base",
         className
       ),
       ...props

package/dist/components/ui/textarea.js

@@ -8,7 +8,7 @@ function Textarea({ className, placeholder, "aria-label": ariaLabel, ...props })
       placeholder,
       "data-slot": "textarea",
       className: cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-base",
         className
       ),
       ...props

package/dist/components/ui/toggle.cjs

@@ -4,7 +4,7 @@ var _classvarianceauthority = require('class-variance-authority');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
 const toggleVariants = _classvarianceauthority.cva.call(void 0, 
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-base font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {

package/dist/components/ui/toggle.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-base font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {

package/dist/components/ui/tooltip.cjs

@@ -2,6 +2,7 @@
 var _jsxruntime = require('react/jsx-runtime');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -31,7 +32,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Tooltip.Portal, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Tooltip.Portal, { container, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _radixui.Tooltip.Content,
     {
       "data-slot": "tooltip-content",

package/dist/components/ui/tooltip.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -31,7 +32,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",

package/dist/index.cjs

@@ -116,7 +116,11 @@ var _dashboard = require('./components/dashboard'); _createStarExport(_dashboard
 var _availablemodelpicker = require('./components/model-selection/available-model-picker'); _createStarExport(_availablemodelpicker);
 var _modelwarninglist = require('./components/model-selection/model-warning-list'); _createStarExport(_modelwarninglist);
 var _thinkinglevelpicker = require('./components/model-selection/thinking-level-picker'); _createStarExport(_thinkinglevelpicker);
+var _pluginstylescope = require('./plugin-style-scope');
+var _pluginstylescopecontext = require('./plugin-style-scope-context');
 
 
 
-exports.cn = _utils.cn; exports.useIsMobile = _usemobile.useIsMobile;
+
+
+exports.PluginStyleScope = _pluginstylescope.PluginStyleScope; exports.cn = _utils.cn; exports.useIsMobile = _usemobile.useIsMobile; exports.usePluginPortalContainer = _pluginstylescopecontext.usePluginPortalContainer;

package/dist/index.d.cts

@@ -132,6 +132,8 @@ export { DashboardComponentCatalogEntry } from './components/dashboard/catalog.c
 export { AvailableModelPicker } from './components/model-selection/available-model-picker.cjs';
 export { ModelWarningList } from './components/model-selection/model-warning-list.cjs';
 export { ThinkingLevelPicker } from './components/model-selection/thinking-level-picker.cjs';
+export { PluginStyleScope, PluginStyleScopeProps } from './plugin-style-scope.cjs';
+export { usePluginPortalContainer } from './plugin-style-scope-context.cjs';
 import 'clsx';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.d.ts

@@ -132,6 +132,8 @@ export { DashboardComponentCatalogEntry } from './components/dashboard/catalog.j
 export { AvailableModelPicker } from './components/model-selection/available-model-picker.js';
 export { ModelWarningList } from './components/model-selection/model-warning-list.js';
 export { ThinkingLevelPicker } from './components/model-selection/thinking-level-picker.js';
+export { PluginStyleScope, PluginStyleScopeProps } from './plugin-style-scope.js';
+export { usePluginPortalContainer } from './plugin-style-scope-context.js';
 import 'clsx';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -116,7 +116,11 @@ export * from "./components/dashboard";
 export * from "./components/model-selection/available-model-picker";
 export * from "./components/model-selection/model-warning-list";
 export * from "./components/model-selection/thinking-level-picker";
+import { PluginStyleScope } from "./plugin-style-scope";
+import { usePluginPortalContainer } from "./plugin-style-scope-context";
 export {
+  PluginStyleScope,
   cn,
-  useIsMobile
+  useIsMobile,
+  usePluginPortalContainer
 };

package/dist/plugin-style-scope-context.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _react = require('react');
+const PluginStyleScopeContext = _nullishCoalesce(globalThis.__sero_plugin_style_scope_context__, () => ( _react.createContext.call(void 0, null)));
+globalThis.__sero_plugin_style_scope_context__ = PluginStyleScopeContext;
+function usePluginPortalContainer() {
+  return _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, PluginStyleScopeContext), 'optionalAccess', _ => _.portalContainer]), () => ( void 0));
+}
+
+
+
+exports.PluginStyleScopeContext = PluginStyleScopeContext; exports.usePluginPortalContainer = usePluginPortalContainer;

package/dist/plugin-style-scope-context.d.cts

@@ -0,0 +1,13 @@
+import { Context } from 'react';
+
+interface PluginStyleScopeValue {
+    pluginId: string;
+    portalContainer: HTMLDivElement | null;
+}
+declare global {
+    var __sero_plugin_style_scope_context__: Context<PluginStyleScopeValue | null> | undefined;
+}
+declare const PluginStyleScopeContext: Context<PluginStyleScopeValue | null>;
+declare function usePluginPortalContainer(): HTMLElement | undefined;
+
+export { PluginStyleScopeContext, type PluginStyleScopeValue, usePluginPortalContainer };

package/dist/plugin-style-scope-context.d.ts

@@ -0,0 +1,13 @@
+import { Context } from 'react';
+
+interface PluginStyleScopeValue {
+    pluginId: string;
+    portalContainer: HTMLDivElement | null;
+}
+declare global {
+    var __sero_plugin_style_scope_context__: Context<PluginStyleScopeValue | null> | undefined;
+}
+declare const PluginStyleScopeContext: Context<PluginStyleScopeValue | null>;
+declare function usePluginPortalContainer(): HTMLElement | undefined;
+
+export { PluginStyleScopeContext, type PluginStyleScopeValue, usePluginPortalContainer };

package/dist/plugin-style-scope-context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const PluginStyleScopeContext = globalThis.__sero_plugin_style_scope_context__ ?? createContext(null);
+globalThis.__sero_plugin_style_scope_context__ = PluginStyleScopeContext;
+function usePluginPortalContainer() {
+  return useContext(PluginStyleScopeContext)?.portalContainer ?? void 0;
+}
+export {
+  PluginStyleScopeContext,
+  usePluginPortalContainer
+};

package/dist/plugin-style-scope.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _pluginstylescopecontext = require('./plugin-style-scope-context');
+function PluginStyleScope({ children, pluginId, surfaceId }) {
+  const portalContainer = _react.useMemo.call(void 0, () => {
+    if (typeof document === "undefined") return null;
+    const container = document.createElement("div");
+    container.dataset.seroPlugin = pluginId;
+    container.dataset.seroPluginPortals = surfaceId;
+    return container;
+  }, [pluginId, surfaceId]);
+  _react.useInsertionEffect.call(void 0, () => {
+    if (!portalContainer) return void 0;
+    document.body.append(portalContainer);
+    return () => portalContainer.remove();
+  }, [portalContainer]);
+  const value = _react.useMemo.call(void 0, 
+    () => ({ pluginId, portalContainer }),
+    [pluginId, portalContainer]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pluginstylescopecontext.PluginStyleScopeContext.Provider, { value, children });
+}
+
+
+exports.PluginStyleScope = PluginStyleScope;

package/dist/plugin-style-scope.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PluginStyleScopeProps {
+    children: ReactNode;
+    pluginId: string;
+    surfaceId: string;
+}
+declare function PluginStyleScope({ children, pluginId, surfaceId }: PluginStyleScopeProps): react_jsx_runtime.JSX.Element;
+
+export { PluginStyleScope, type PluginStyleScopeProps };

package/dist/plugin-style-scope.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PluginStyleScopeProps {
+    children: ReactNode;
+    pluginId: string;
+    surfaceId: string;
+}
+declare function PluginStyleScope({ children, pluginId, surfaceId }: PluginStyleScopeProps): react_jsx_runtime.JSX.Element;
+
+export { PluginStyleScope, type PluginStyleScopeProps };

package/dist/plugin-style-scope.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useInsertionEffect, useMemo } from "react";
+import { PluginStyleScopeContext } from "./plugin-style-scope-context";
+function PluginStyleScope({ children, pluginId, surfaceId }) {
+  const portalContainer = useMemo(() => {
+    if (typeof document === "undefined") return null;
+    const container = document.createElement("div");
+    container.dataset.seroPlugin = pluginId;
+    container.dataset.seroPluginPortals = surfaceId;
+    return container;
+  }, [pluginId, surfaceId]);
+  useInsertionEffect(() => {
+    if (!portalContainer) return void 0;
+    document.body.append(portalContainer);
+    return () => portalContainer.remove();
+  }, [portalContainer]);
+  const value = useMemo(
+    () => ({ pluginId, portalContainer }),
+    [pluginId, portalContainer]
+  );
+  return /* @__PURE__ */ jsx(PluginStyleScopeContext.Provider, { value, children });
+}
+export {
+  PluginStyleScope
+};

package/dist/reference.cjs

@@ -255,7 +255,7 @@ function Section({
       children: [
         (heading || action) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-            heading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            heading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
             description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
           ] }),
           action && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "shrink-0", children: action })
@@ -292,11 +292,11 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var textVariants = (0, import_class_variance_authority2.cva)("min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
-      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      body: "text-base text-[var(--text-primary)]",
+      label: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
-      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+      numeric: "text-base font-semibold tabular-nums text-[var(--text-primary)]"
     }
   },
   defaultVariants: { variant: "body" }
@@ -330,7 +330,7 @@ function Text({
 }
 var headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({
@@ -413,7 +413,7 @@ function Metric({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5", children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon, size: "sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-baseline gap-1.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -575,7 +575,7 @@ var import_class_variance_authority3 = require("class-variance-authority");
 var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var itemVariants = (0, import_class_variance_authority3.cva)(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "group/item flex items-center border border-transparent text-base rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -662,7 +662,7 @@ function ItemTitle({ className, ...props }) {
     {
       "data-slot": "item-title",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        "flex w-fit items-center gap-2 text-base leading-snug font-medium",
         className
       ),
       ...props
@@ -675,7 +675,7 @@ function ItemDescription({ className, ...props }) {
     {
       "data-slot": "item-description",
       className: cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "text-muted-foreground line-clamp-2 text-base leading-normal font-normal text-balance",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
       ),
@@ -723,7 +723,7 @@ function ItemListItem({
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
           secondary && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
         ] }),
-        trailing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: trailing }),
         actions && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ItemActions, { children: actions })
       ]
     }
@@ -744,7 +744,7 @@ function ItemList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "px-2 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"
@@ -776,7 +776,7 @@ function ActivityListItem({
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
-            timestamp && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: timestamp })
           ] }),
           detail && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
         ] })
@@ -798,7 +798,7 @@ function ActivityList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { className: "pl-5 pt-0.5 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"
@@ -890,7 +890,7 @@ var import_class_variance_authority4 = require("class-variance-authority");
 var import_radix_ui3 = require("radix-ui");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority4.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -988,7 +988,7 @@ function StaleIndicator({
     {
       "data-slot": "stale-indicator",
       className: cn(
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className
       ),
       ...props,