@smart-cloud/ai-kit-ui 1.0.0

package/eslint.config.js

@@ -0,0 +1,18 @@
+import jseslint from "@eslint/js";
+import { defineConfig } from 'eslint/config';
+import globals from "globals";
+import tseslint from 'typescript-eslint';
+
+export default defineConfig(
+  { ignores: ['**/build/**', '**/dist/**', '**/webpack.config.cjs'] },
+  jseslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ["**/*.tsx", "**/*.ts"],
+    languageOptions: {
+      parser: tseslint.parser,
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  }
+);

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@smart-cloud/ai-kit-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "ISC",
+  "scripts": {
+    "build": "tsup --minify",
+    "lint": "eslint 'src/**/*.{ts,tsx}' --report-unused-disable-directives --max-warnings 0",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish": "WPSUITE_PREMIUM=true tsup --minify && npm publish --access=public"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "scope": "@smart-cloud/ai-kit-ui"
+  },
+  "dependencies": {
+    "@smart-cloud/ai-kit-core": "^1.0.0",
+    "@smart-cloud/wpsuite-core": "^2.0.5",
+    "@tabler/icons-react": "^3.36.1",
+    "react-markdown": "^10.1.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "unified": "^11.0.5"
+  },
+  "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@mantine/core": "^8.3.12",
+    "@mantine/hooks": "^8.3.12",
+    "@mantine/modals": "^8.3.12",
+    "@wordpress/data": "^10.37.0",
+    "aws-amplify": "^6.15.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@eslint/js": "^9.39.2",
+    "@mantine/core": "^8.3.12",
+    "@mantine/hooks": "^8.3.12",
+    "@mantine/modals": "^8.3.12",
+    "@types/dom-chromium-ai": "^0.0.13",
+    "@types/jquery": "^3.5.33",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "@wordpress/data": "^10.37.0",
+    "ajv": "^8.17.1",
+    "aws-amplify": "^6.15.9",
+    "eslint": "^9.39.2",
+    "globals": "^17.0.0",
+    "jquery": "^3.7.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.52.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/ai-kit-ui.css"
+  }
+}

package/src/ShadowBoundary.tsx

@@ -0,0 +1,266 @@
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export type ShadowBoundaryMode = "local" | "overlay";
+
+export type ShadowBoundaryProps = {
+  /** Stylesheets to inject into the shadow root (as <link rel="stylesheet">). */
+  stylesheets: string[];
+
+  /** Optional class name applied to the host element. */
+  className?: string;
+
+  /** Optional raw CSS text injected into the shadow root (as <style>). */
+  styleText?: string;
+
+  /** ID of the element inside the shadow root used as the portal target. */
+  rootElementId: string;
+
+  /**
+   * Where to create the shadow root:
+   * - "local": attach shadow to this component's host element (keeps layout positioning).
+   * - "overlay": attach shadow to a singleton element in top (or self) document (always on top).
+   */
+  mode?: ShadowBoundaryMode;
+
+  /**
+   * For mode="overlay": host id in the top (or self) document.
+   * Same id everywhere => singleton overlay host.
+   */
+  overlayRootId?: string;
+
+  children: (api: {
+    /** Portal target element inside the shadow root. */
+    rootElement: HTMLDivElement;
+    /** Shadow root instance. */
+    shadowRoot: ShadowRoot;
+  }) => React.ReactNode;
+};
+
+function getTopDocumentSafe(): Document {
+  try {
+    return window.top?.document ?? window.document;
+  } catch {
+    return window.document;
+  }
+}
+
+function ensureStylesheets(
+  doc: Document,
+  container: HTMLElement,
+  shadow: ShadowRoot,
+  hrefs: string[],
+) {
+  for (const href of hrefs) {
+    const id = `ai-kit-style-${btoa(href).replace(/=+$/g, "")}`;
+    if (shadow.getElementById(id)) continue;
+    const link = doc.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = href;
+    container.appendChild(link);
+  }
+}
+
+const REGISTRY_ID = "ai-kit-property-registry";
+
+function installAiKitPropertyRegistry() {
+  const doc = getTopDocumentSafe();
+
+  // simple dedupe
+  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>";
+  inherits: true;
+  initial-value: 0deg;
+}
+`;
+
+  doc.head.appendChild(style);
+}
+
+// tiny stable hash to detect styleText changes without forcing huge deps churn
+function hashStringDjb2(str: string): string {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
+  }
+  // unsigned + base36
+  return (hash >>> 0).toString(36);
+}
+
+const STYLE_TEXT_ID = "ai-kit-style-text";
+
+export function ShadowBoundary({
+  stylesheets,
+  className,
+  styleText,
+  children,
+  rootElementId,
+  mode = "local",
+  overlayRootId = "ai-kit-overlay-root",
+}: ShadowBoundaryProps) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+  const [portalTarget, setPortalTarget] = useState<HTMLDivElement | null>(null);
+
+  // Combine built-in + external stylesheets; stable key so callers don't need to memoize arrays.
+  const stylesKey = useMemo(() => {
+    const all = [...stylesheets];
+    return all.join("|");
+  }, [stylesheets]);
+
+  const styleTextHash = useMemo(() => {
+    return styleText ? hashStringDjb2(styleText) : "";
+  }, [styleText]);
+
+  useLayoutEffect(() => {
+    if (!hostRef.current) return;
+
+    const doc =
+      mode === "overlay" ? getTopDocumentSafe() : hostRef.current.ownerDocument;
+
+    // 1) Decide overlay host vs local host
+    let host: HTMLElement;
+    if (mode === "overlay") {
+      let overlayHost = doc.getElementById(
+        overlayRootId,
+      ) as HTMLDivElement | null;
+      if (!overlayHost) {
+        overlayHost = doc.createElement("div");
+        overlayHost.id = overlayRootId;
+
+        // Do not affect layout; allow overlays to sit above everything.
+        overlayHost.style.position = "fixed";
+        overlayHost.style.inset = "0";
+        overlayHost.style.width = "0";
+        overlayHost.style.height = "0";
+        overlayHost.style.zIndex = "2147483647"; // max z-index
+        overlayHost.style.pointerEvents = "none";
+
+        doc.body.appendChild(overlayHost);
+      }
+      host = overlayHost;
+    } else {
+      host = hostRef.current;
+    }
+
+    // 2) Ensure shadow root
+    const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+
+    // 3) Ensure portal target div
+    let rootEl = shadow.querySelector(
+      `#${CSS.escape(rootElementId)}`,
+    ) as HTMLDivElement | null;
+    if (!rootEl) {
+      rootEl = doc.createElement("div");
+      rootEl.id = rootElementId;
+      rootEl.style.margin = "0";
+
+      // Overlay host itself has pointerEvents:none; allow content to receive events.
+      if (mode === "overlay") {
+        rootEl.style.pointerEvents = "auto";
+      }
+      shadow.appendChild(rootEl);
+    }
+
+    const readScheme = () => rootEl.getAttribute("data-mantine-color-scheme");
+    const readVariation = () => rootEl.getAttribute("data-ai-kit-variation");
+
+    const applyScheme = () => {
+      host.setAttribute("data-ai-kit-variation", readVariation() || "default");
+      host.setAttribute("data-mantine-color-scheme", readScheme() || "auto");
+      if (className) {
+        host.className = className;
+      }
+      host.style.setProperty("outline", "none");
+      host.style.setProperty("box-shadow", "none");
+      host.style.setProperty("--mantine-color-body", "transparent");
+    };
+
+    applyScheme();
+
+    // Kövesd, ha a host dokumentumban változik a séma
+    const mo = new MutationObserver(applyScheme);
+    mo.observe(rootEl, {
+      attributes: true,
+      attributeFilter: ["data-mantine-color-scheme"],
+    });
+
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    const onMq = () => applyScheme();
+    mq?.addEventListener?.("change", onMq);
+
+    installAiKitPropertyRegistry();
+
+    // 5) Inject styles into shadow body (dedup per shadow root)
+    ensureStylesheets(
+      doc,
+      rootEl,
+      shadow,
+      stylesKey ? stylesKey.split("|") : [],
+    );
+
+    // 6) Optional: inject raw style text into the shadow root
+    const existingStyle = shadow.getElementById(
+      STYLE_TEXT_ID,
+    ) as HTMLStyleElement | null;
+
+    if (styleText) {
+      if (!existingStyle) {
+        const s = doc.createElement("style");
+        s.id = STYLE_TEXT_ID;
+        s.setAttribute("data-hash", styleTextHash);
+        s.textContent = styleText;
+        rootEl.appendChild(s);
+      } else {
+        const prevHash = existingStyle.getAttribute("data-hash") || "";
+        if (prevHash !== styleTextHash) {
+          existingStyle.setAttribute("data-hash", styleTextHash);
+          existingStyle.textContent = styleText;
+        }
+      }
+    } else if (existingStyle) {
+      existingStyle.remove();
+    }
+
+    setShadowRoot(shadow);
+    setPortalTarget(rootEl);
+
+    return () => {
+      mo.disconnect();
+      mq?.removeEventListener?.("change", onMq);
+    };
+  }, [mode, overlayRootId, rootElementId, stylesKey, styleText, styleTextHash]);
+
+  const emotionCache = useMemo(() => {
+    if (!portalTarget) return null;
+    // IMPORTANT: container must be an HTMLElement inside the shadow tree.
+    return createCache({
+      key: mode === "overlay" ? "ai-kit-ov" : "ai-kit-local",
+      container: portalTarget,
+    });
+  }, [portalTarget, mode]);
+
+  return (
+    <div ref={hostRef}>
+      {portalTarget && shadowRoot && emotionCache
+        ? createPortal(
+            <CacheProvider value={emotionCache}>
+              {children({ rootElement: portalTarget, shadowRoot })}
+            </CacheProvider>,
+            portalTarget,
+          )
+        : null}
+    </div>
+  );
+}