@smart-cloud/ai-kit-ui 1.1.24 → 1.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/ShadowBoundary.tsx

@@ -1,6 +1,12 @@
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { SetStateAction, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  SetStateAction,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 
 export type ShadowBoundaryMode = "local" | "overlay";
@@ -63,16 +69,11 @@ function ensureStylesheets(
 
 const REGISTRY_ID = "ai-kit-property-registry";
 
-function installAiKitPropertyRegistry() {
-  const doc = getTopDocumentSafe();
-
-  // simple dedupe
+function installAiKitPropertyRegistry(doc: Document) {
   if (doc.getElementById(REGISTRY_ID)) return;
 
   const style = doc.createElement("style");
   style.id = REGISTRY_ID;
-
-  // ONLY @property registrations (no global resets!)
   style.textContent = `
 @property --ai-kit-border-angle {
   syntax: "<angle>";
@@ -80,8 +81,7 @@ function installAiKitPropertyRegistry() {
   initial-value: 0deg;
 }
 `;
-
-  doc.head.appendChild(style);
+  (doc.head ?? doc.documentElement).appendChild(style);
 }
 
 export function ShadowBoundary({
@@ -175,7 +175,7 @@ export function ShadowBoundary({
     const onMq = () => applyScheme();
     mq?.addEventListener?.("change", onMq);
 
-    installAiKitPropertyRegistry();
+    installAiKitPropertyRegistry(doc);
 
     // 5) Inject styles into shadow body (dedup per shadow root)
     ensureStylesheets(
@@ -214,11 +214,11 @@ export function ShadowBoundary({
     >
       {portalTarget && shadowRoot && emotionCache
         ? createPortal(
-          <CacheProvider value={emotionCache}>
-            {children({ rootElement: portalTarget, shadowRoot })}
-          </CacheProvider>,
-          portalTarget,
-        )
+            <CacheProvider value={emotionCache}>
+              {children({ rootElement: portalTarget, shadowRoot })}
+            </CacheProvider>,
+            portalTarget,
+          )
         : null}
     </div>
   );

package/src/styles/ai-kit-ui.css

@@ -105,14 +105,7 @@
   --ai-kit-border-speed: 1400ms;
   --ai-kit-border-angle: 0deg;
 
-  --ai-kit-border-gradient: conic-gradient(
-    from var(--ai-kit-border-angle, 0deg) at 50% 50%,
-    #00c2ff,
-    #7c3aed,
-    #22c55e,
-    #f59e0b,
-    #00c2ff
-  );
+  --ai-kit-border-stops: #00c2ff, #7c3aed, #22c55e, #f59e0b, #00c2ff;
 
   --ai-kit-position-z-index: 100001;
 
@@ -306,7 +299,10 @@
   z-index: 0;
   border-radius: var(--ai-kit-radius);
   padding: var(--ai-kit-border-thickness);
-  background: var(--ai-kit-border-gradient);
+  background: conic-gradient(
+    from var(--ai-kit-border-angle, 0deg) at 50% 50%,
+    var(--ai-kit-border-stops)
+  );
   animation: ai-kit-border-run var(--ai-kit-border-speed) linear infinite;
   -webkit-mask:
     linear-gradient(#000 0 0) content-box,