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

package/README.md

@@ -125,8 +125,6 @@ Apache-2.0
 ## Related Packages
 
 - [`@hai3/uicore`](../uicore) - Core layout and state management
-- [`@hai3/uikit`](../uikit) - UI component library
-- [`@hai3/uikit-contracts`](../uikit-contracts) - Type definitions
 
 ## Contributing
 

package/dist/index.cjs

@@ -3,12 +3,37 @@
 var React2 = require('react');
 var react = require('@hai3/react');
 var jsxRuntime = require('react/jsx-runtime');
-var uikit = require('@hai3/uikit');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
 var lodash = require('lodash');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var SwitchPrimitives = require('@radix-ui/react-switch');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var React2__default = /*#__PURE__*/_interopDefault(React2);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1061,6 +1086,69 @@ var StudioProvider = ({ children }) => {
   );
 };
 StudioProvider.displayName = "StudioProvider";
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Card = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+);
+Card.displayName = "Card";
+var buttonVariants = classVarianceAuthority.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 ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.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);
@@ -1190,6 +1278,90 @@ var useResizable = () => {
     handleMouseDown
   };
 };
+var DropdownMenu = ({
+  dir,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Root,
+  {
+    ...props,
+    dir
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuContent = ({
+  ref,
+  className,
+  sideOffset = 4,
+  container,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.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__namespace.Content.displayName;
+var DropdownMenuItem = ({
+  ref,
+  className,
+  inset,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.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__namespace.Item.displayName;
+var ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  }
+);
+var DropdownButton = ({
+  ref,
+  children,
+  variant = "outline" /* Outline */,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      ref,
+      variant,
+      className: cn("min-w-40 justify-between rtl:flex-row-reverse", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "h-4 w-4" })
+      ]
+    }
+  );
+};
+DropdownButton.displayName = "DropdownButton";
 function isScreenExtension2(ext) {
   return "presentation" in ext && typeof ext.presentation === "object";
 }
@@ -1227,17 +1399,17 @@ var MfePackageSelector = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.gts_package") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        uikit.DropdownButton,
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownButton,
         {
-          variant: uikit.ButtonVariant.Outline,
+          variant: "outline" /* Outline */,
           disabled: packages.length <= 1,
           children: activePackage || "No package"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: packages.map((pkg) => /* @__PURE__ */ jsxRuntime.jsx(
-        uikit.DropdownMenuItem,
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: packages.map((pkg) => /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenuItem,
         {
           onClick: () => handlePackageChange(pkg),
           children: pkg
@@ -1259,10 +1431,10 @@ var ThemeSelector = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.theme") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownButton, { variant: uikit.ButtonVariant.Outline, children: formatThemeName(currentTheme || "") }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: themes.map((theme) => /* @__PURE__ */ jsxRuntime.jsx(
-        uikit.DropdownMenuItem,
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownButton, { variant: "outline" /* Outline */, children: formatThemeName(currentTheme || "") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: themes.map((theme) => /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenuItem,
         {
           onClick: () => setTheme(theme.id),
           children: formatThemeName(theme.name || theme.id)
@@ -1283,10 +1455,10 @@ function LanguageSelector({
   const currentLanguage = language ? react.getLanguageMetadata(language) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.language") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikit.Button, { variant: uikit.ButtonVariant.Outline, children: currentLanguage ? displayMode === react.LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: react.SUPPORTED_LANGUAGES.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
-        uikit.DropdownMenuItem,
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline" /* Outline */, children: currentLanguage ? displayMode === react.LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: react.SUPPORTED_LANGUAGES.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
         {
           onClick: () => setLanguage(lang.code),
           children: [
@@ -1299,6 +1471,32 @@ function LanguageSelector({
     ] })
   ] });
 }
+var Switch = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.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__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.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__namespace.Root.displayName;
 var ApiModeToggle = ({
   className
 }) => {
@@ -1320,7 +1518,7 @@ var ApiModeToggle = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      uikit.Switch,
+      Switch,
       {
         id: "api-mode-toggle",
         checked: enabled,
@@ -1374,7 +1572,7 @@ var StudioPanel = () => {
           width: `${size.width}px`,
           height: `${size.height}px`
         },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(uikit.Card, { className: "h-full w-full flex flex-col overflow-hidden bg-white/20 dark:bg-black/50 backdrop-blur-md backdrop-saturate-[180%] border border-white/30 dark:border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.2)]", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-full w-full flex flex-col overflow-hidden bg-white/20 dark:bg-black/50 backdrop-blur-md backdrop-saturate-[180%] border border-white/30 dark:border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.2)]", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1384,10 +1582,10 @@ var StudioPanel = () => {
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-foreground", children: t("studio:title") }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  uikit.Button,
+                  Button,
                   {
-                    variant: uikit.ButtonVariant.Ghost,
-                    size: uikit.ButtonSize.Sm,
+                    variant: "ghost" /* Ghost */,
+                    size: "sm" /* Sm */,
                     onClick: toggleCollapsed,
                     className: "h-7 w-7 p-0",
                     "aria-label": t("studio:aria.collapseButton"),
@@ -1464,9 +1662,9 @@ var GlassmorphicButton = ({
   isDragging = false
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    uikit.Button,
+    Button,
     {
-      variant: uikit.ButtonVariant.Ghost,
+      variant: "ghost" /* Ghost */,
       onMouseDown,
       onClick,
       title,
@@ -1539,6 +1737,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);
@@ -1548,6 +2018,9 @@ var StudioContent = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(StudioPanel, {});
 };
 var StudioOverlay = () => {
+  React2.useEffect(() => {
+    return injectStudioStyles();
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(StudioProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(StudioContent, {}) });
 };
 StudioOverlay.displayName = "StudioOverlay";