@hai3/studio 0.4.0-alpha.0 → 0.4.0-alpha.1

package/dist/index.js

@@ -1,8 +1,13 @@
 import React2, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { I18nRegistry, Language, i18nRegistry, eventBus, useHAI3, useTranslation, HAI3_SCREEN_DOMAIN, HAI3_ACTION_MOUNT_EXT, useRegisteredPackages, useActivePackage, useAppSelector, useTheme, getLanguageMetadata, LanguageDisplayMode, SUPPORTED_LANGUAGES, TextDirection, toggleMockMode } from '@hai3/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Card, Button, ButtonSize, ButtonVariant, DropdownMenu, DropdownMenuTrigger, DropdownButton, DropdownMenuContent, DropdownMenuItem, Switch } from '@hai3/uikit';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
 import { clamp, upperFirst } from 'lodash';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1055,6 +1060,69 @@ var StudioProvider = ({ children }) => {
   );
 };
 StudioProvider.displayName = "StudioProvider";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Card = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+);
+Card.displayName = "Card";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        ["default" /* Default */]: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        ["destructive" /* Destructive */]: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        ["outline" /* Outline */]: "border border-input bg-background text-foreground shadow-sm hover:bg-accent data-[state=open]:bg-accent",
+        ["secondary" /* Secondary */]: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ["ghost" /* Ghost */]: "hover:bg-accent data-[state=open]:bg-accent",
+        ["link" /* Link */]: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        ["default" /* Default */]: "h-9 px-4 py-2",
+        ["sm" /* Sm */]: "h-8 rounded-md px-3 text-xs",
+        ["lg" /* Lg */]: "h-10 rounded-md px-8",
+        ["icon" /* Icon */]: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default" /* Default */,
+      size: "default" /* Default */
+    }
+  }
+);
+var Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props
+    }
+  );
+};
+Button.displayName = "Button";
 var VIEWPORT_MARGIN = 20;
 function clampToViewport(pos, size) {
   const maxX = Math.max(VIEWPORT_MARGIN, window.innerWidth - size.width - VIEWPORT_MARGIN);
@@ -1184,6 +1252,90 @@ var useResizable = () => {
     handleMouseDown
   };
 };
+var DropdownMenu = ({
+  dir,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Root,
+  {
+    ...props,
+    dir
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = ({
+  ref,
+  className,
+  sideOffset = 4,
+  container,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    style: { backgroundColor: "hsl(var(--background, 0 0% 100%))" },
+    className: cn(
+      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) });
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = ({
+  ref,
+  className,
+  inset,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  }
+);
+var DropdownButton = ({
+  ref,
+  children,
+  variant = "outline" /* Outline */,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      variant,
+      className: cn("min-w-40 justify-between rtl:flex-row-reverse", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4" })
+      ]
+    }
+  );
+};
+DropdownButton.displayName = "DropdownButton";
 function isScreenExtension2(ext) {
   return "presentation" in ext && typeof ext.presentation === "object";
 }
@@ -1225,7 +1377,7 @@ var MfePackageSelector = ({
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
         DropdownButton,
         {
-          variant: ButtonVariant.Outline,
+          variant: "outline" /* Outline */,
           disabled: packages.length <= 1,
           children: activePackage || "No package"
         }
@@ -1254,7 +1406,7 @@ var ThemeSelector = ({
   return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
     /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.theme") }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: ButtonVariant.Outline, children: formatThemeName(currentTheme || "") }) }),
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: "outline" /* Outline */, children: formatThemeName(currentTheme || "") }) }),
       /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: themes.map((theme) => /* @__PURE__ */ jsx(
         DropdownMenuItem,
         {
@@ -1278,7 +1430,7 @@ function LanguageSelector({
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.language") }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: ButtonVariant.Outline, children: currentLanguage ? displayMode === LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline" /* Outline */, children: currentLanguage ? displayMode === LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
       /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: SUPPORTED_LANGUAGES.map((lang) => /* @__PURE__ */ jsxs(
         DropdownMenuItem,
         {
@@ -1293,6 +1445,32 @@ function LanguageSelector({
     ] })
   ] });
 }
+var Switch = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          "data-[state=checked]:ltr:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+          "data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
 var ApiModeToggle = ({
   className
 }) => {
@@ -1380,8 +1558,8 @@ var StudioPanel = () => {
                 /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: ButtonVariant.Ghost,
-                    size: ButtonSize.Sm,
+                    variant: "ghost" /* Ghost */,
+                    size: "sm" /* Sm */,
                     onClick: toggleCollapsed,
                     className: "h-7 w-7 p-0",
                     "aria-label": t("studio:aria.collapseButton"),
@@ -1460,7 +1638,7 @@ var GlassmorphicButton = ({
   return /* @__PURE__ */ jsx(
     Button,
     {
-      variant: ButtonVariant.Ghost,
+      variant: "ghost" /* Ghost */,
       onMouseDown,
       onClick,
       title,
@@ -1533,6 +1711,278 @@ var CollapsedButton = ({ toggleCollapsed }) => {
   );
 };
 CollapsedButton.displayName = "CollapsedButton";
+
+// src/styles/studioStyles.ts
+var STUDIO_STYLE_ID = "hai3-studio-styles";
+var STUDIO_CSS = (
+  /* css */
+  `
+/* ============================================================
+   HAI3 Studio \u2014 Self-contained utility styles
+   ============================================================ */
+
+/* --- Base normalization (Preflight may be absent in no-uikit hosts) ---
+   :where() keeps specificity at 0-0-0 so utility classes always win. */
+.studio-panel,
+.studio-portal-container {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+}
+:where(.studio-panel *, .studio-portal-container *) { box-sizing: border-box; }
+:where(.studio-panel button, .studio-portal-container button) {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+:where(.studio-panel h2, .studio-panel h3, .studio-portal-container h2, .studio-portal-container h3) {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+/* --- Layout --- */
+.fixed { position: fixed; }
+.absolute { position: absolute; }
+.relative { position: relative; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.block { display: block; }
+.peer { /* Radix peer marker \u2014 no CSS needed */ }
+.flex-col { flex-direction: column; }
+.flex-1 { flex: 1 1 0%; }
+.shrink-0 { flex-shrink: 0; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-2 { gap: 0.5rem; }
+.overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+
+/* --- Sizing --- */
+.h-full { height: 100%; }
+.w-full { width: 100%; }
+.h-4 { height: 1rem; }
+.w-4 { width: 1rem; }
+.h-5 { height: 1.25rem; }
+.w-5 { width: 1.25rem; }
+.w-9 { width: 2.25rem; }
+.h-6 { height: 1.5rem; }
+.w-6 { width: 1.5rem; }
+.h-7 { height: 1.75rem; }
+.w-7 { width: 1.75rem; }
+.h-8 { height: 2rem; }
+.h-9 { height: 2.25rem; }
+.h-10 { height: 2.5rem; }
+.h-12 { height: 3rem; }
+.w-12 { width: 3rem; }
+.min-w-\\[8rem\\] { min-width: 8rem; }
+.min-w-40 { min-width: 10rem; }
+
+/* --- Spacing --- */
+.p-0 { padding: 0; }
+.p-1 { padding: 0.25rem; }
+.p-4 { padding: 1rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.px-8 { padding-left: 2rem; padding-right: 2rem; }
+.py-1\\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.pl-8 { padding-left: 2rem; }
+.bottom-1 { bottom: 0.25rem; }
+.right-1 { right: 0.25rem; }
+.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
+
+/* --- Typography --- */
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.uppercase { text-transform: uppercase; }
+.tracking-wider { letter-spacing: 0.05em; }
+.whitespace-nowrap { white-space: nowrap; }
+
+/* --- Colors (theme-aware via CSS variables) ---
+   Some theme variables (--popover-foreground, --card-foreground) may have
+   incorrect values in third-party themes. The Studio maps all component
+   colors to --foreground / --background which are always correct (body uses them).
+   :where() ensures host-app Tailwind utilities take precedence when available. */
+.text-foreground { color: hsl(var(--foreground)); }
+.text-muted-foreground { color: hsl(var(--muted-foreground)); }
+.text-muted-foreground\\/70 { color: hsl(var(--muted-foreground) / 0.7); }
+:where(.bg-popover) { background-color: hsl(var(--background)); }
+:where(.text-popover-foreground) { color: hsl(var(--foreground)); }
+:where(.bg-accent) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.text-accent-foreground) { color: hsl(var(--foreground)); }
+:where(.bg-background) { background-color: hsl(var(--background)); }
+:where(.bg-card) { background-color: hsl(var(--background)); }
+:where(.text-card-foreground) { color: hsl(var(--foreground)); }
+:where(.bg-primary) { background-color: hsl(var(--foreground)); }
+:where(.text-primary-foreground) { color: hsl(var(--background)); }
+:where(.bg-input) { background-color: hsl(var(--foreground) / 0.15); }
+:where(.border-input) { border-color: hsl(var(--foreground) / 0.2); }
+:where(.ring-ring) { --tw-ring-color: hsl(var(--foreground) / 0.5); }
+.border-transparent { border-color: transparent; }
+
+/* --- Borders --- */
+.border { border-width: 1px; }
+.border-2 { border-width: 2px; }
+.border-b { border-bottom-width: 1px; }
+:where(.border-border\\/50) { border-color: hsl(var(--foreground) / 0.15); }
+.rounded-full { border-radius: 9999px; }
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-md { border-radius: calc(var(--radius, 0.5rem) - 2px); }
+.rounded-sm { border-radius: calc(var(--radius, 0.5rem) - 4px); }
+
+/* --- Interaction --- */
+.select-none { -webkit-user-select: none; user-select: none; }
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+.cursor-nwse-resize { cursor: nwse-resize; }
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* --- Z-index (arbitrary values) --- */
+.z-\\[10000\\] { z-index: 10000; }
+.z-\\[99999\\] { z-index: 99999; }
+
+/* --- Glassmorphic: background with opacity --- */
+.bg-white\\/20 { background-color: rgb(255 255 255 / 0.2); }
+.bg-white\\/30 { background-color: rgb(255 255 255 / 0.3); }
+.dark .dark\\:bg-black\\/50 { background-color: rgb(0 0 0 / 0.5); }
+.dark .dark\\:bg-black\\/60 { background-color: rgb(0 0 0 / 0.6); }
+
+/* --- Glassmorphic: border with opacity --- */
+.border-white\\/30 { border-color: rgb(255 255 255 / 0.3); }
+.dark .dark\\:border-white\\/20 { border-color: rgb(255 255 255 / 0.2); }
+
+/* --- Glassmorphic: backdrop filters --- */
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+}
+.backdrop-saturate-\\[180\\%\\] {
+  --tw-backdrop-saturate: saturate(1.8);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia, );
+}
+
+/* --- Glassmorphic: box shadow (arbitrary) --- */
+.shadow-\\[0_8px_32px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+/* --- Shadows --- */
+.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
+.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
+.ring-0 { box-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, transparent); }
+
+/* --- Hover states --- */
+.hover\\:bg-white\\/30:hover { background-color: rgb(255 255 255 / 0.3); }
+.dark .dark\\:hover\\:bg-black\\/60:hover { background-color: rgb(0 0 0 / 0.6); }
+.hover\\:text-muted-foreground:hover { color: hsl(var(--muted-foreground)); }
+:where(.hover\\:bg-accent:hover) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.hover\\:bg-primary\\/90:hover) { background-color: hsl(var(--foreground) / 0.85); }
+:where(.hover\\:bg-secondary\\/80:hover) { background-color: hsl(var(--foreground) / 0.08); }
+:where(.hover\\:bg-destructive\\/90:hover) { background-color: hsl(0 60% 50% / 0.9); }
+
+/* --- Focus states --- */
+:where(.focus\\:bg-accent:focus) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.focus\\:text-foreground:focus) { color: hsl(var(--foreground)); }
+:where(.focus\\:text-accent-foreground:focus) { color: hsl(var(--foreground)); }
+.focus-visible\\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
+:where(.focus-visible\\:ring-1:focus-visible) {
+  box-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, hsl(var(--foreground) / 0.5));
+}
+:where(.focus-visible\\:ring-2:focus-visible) {
+  box-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, hsl(var(--foreground) / 0.5));
+}
+:where(.focus-visible\\:ring-ring:focus-visible) { --tw-ring-color: hsl(var(--foreground) / 0.5); }
+:where(.focus-visible\\:ring-offset-2:focus-visible) { --tw-ring-offset-width: 2px; }
+:where(.focus-visible\\:ring-offset-background:focus-visible) { --tw-ring-offset-color: hsl(var(--background)); }
+
+/* --- Data-attribute & disabled states --- */
+:where(.data-\\[state\\=open\\]\\:bg-accent[data-state=open]) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked]) { background-color: hsl(var(--foreground)); }
+:where(.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked]) { background-color: hsl(var(--foreground) / 0.15); }
+.data-\\[disabled\\]\\:pointer-events-none[data-disabled] { pointer-events: none; }
+.data-\\[disabled\\]\\:opacity-50[data-disabled] { opacity: 0.5; }
+.disabled\\:pointer-events-none:disabled { pointer-events: none; }
+.disabled\\:opacity-50:disabled { opacity: 0.5; }
+.disabled\\:cursor-not-allowed:disabled { cursor: not-allowed; }
+
+/* --- SVG child selectors --- */
+[class*="[&>svg]:size-4"] > svg,
+[class*="[&_svg]:size-4"] svg { width: 1rem; height: 1rem; }
+[class*="[&>svg]:shrink-0"] > svg,
+[class*="[&_svg]:shrink-0"] svg { flex-shrink: 0; }
+[class*="[&_svg]:pointer-events-none"] svg { pointer-events: none; }
+
+/* --- RTL support --- */
+.rtl\\:flex-row-reverse:where([dir=rtl], [dir=rtl] *) { flex-direction: row-reverse; }
+.data-\\[state\\=checked\\]\\:ltr\\:translate-x-4[data-state=checked]:where([dir=ltr], [dir=ltr] *) { transform: translateX(1rem); }
+.data-\\[state\\=checked\\]\\:rtl\\:-translate-x-4[data-state=checked]:where([dir=rtl], [dir=rtl] *) { transform: translateX(-1rem); }
+.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] { transform: translateX(0); }
+
+/* --- Radix animation (minimal enter/exit for dropdown) --- */
+@keyframes hai3-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hai3-fade-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes hai3-zoom-in { from { transform: scale(0.95); } to { transform: scale(1); } }
+@keyframes hai3-zoom-out { from { transform: scale(1); } to { transform: scale(0.95); } }
+.data-\\[state\\=open\\]\\:animate-in[data-state=open] { animation: hai3-fade-in 150ms ease-out, hai3-zoom-in 150ms ease-out; }
+.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] { animation: hai3-fade-out 100ms ease-in, hai3-zoom-out 100ms ease-in; animation-fill-mode: forwards; }
+
+/* --- Studio portal: scoped dropdown color overrides ---
+   Dropdown content portaled here inherits host-app Tailwind utilities that
+   may reference broken theme variables (e.g. --popover-foreground identical
+   to --popover in some third-party themes). Scoped rules (specificity 0-2-0)
+   beat host-app Tailwind (0-1-0) and map everything to --foreground / --background. */
+.studio-portal-container .bg-popover { background-color: hsl(var(--background, 0 0% 100%)); }
+.studio-portal-container .text-popover-foreground { color: hsl(var(--foreground, 0 0% 0%)); }
+.studio-portal-container .focus\\:bg-accent:focus { background-color: hsl(var(--foreground) / 0.1); }
+.studio-portal-container .focus\\:text-foreground:focus { color: hsl(var(--foreground)); }
+
+/* --- Z-index (dropdown content) --- */
+.z-50 { z-index: 50; }
+`
+);
+function injectStudioStyles() {
+  if (typeof document === "undefined") return () => {
+  };
+  let styleEl = document.getElementById(STUDIO_STYLE_ID);
+  if (styleEl) return () => {
+  };
+  styleEl = document.createElement("style");
+  styleEl.id = STUDIO_STYLE_ID;
+  styleEl.textContent = STUDIO_CSS;
+  document.head.appendChild(styleEl);
+  return () => {
+    styleEl?.remove();
+  };
+}
 var StudioContent = () => {
   const { collapsed, toggleCollapsed } = useStudioContext();
   useKeyboardShortcut(toggleCollapsed);
@@ -1542,6 +1992,9 @@ var StudioContent = () => {
   return /* @__PURE__ */ jsx(StudioPanel, {});
 };
 var StudioOverlay = () => {
+  useEffect(() => {
+    return injectStudioStyles();
+  }, []);
   return /* @__PURE__ */ jsx(StudioProvider, { children: /* @__PURE__ */ jsx(StudioContent, {}) });
 };
 StudioOverlay.displayName = "StudioOverlay";