@copilotkitnext/angular 1.52.0-next.5 → 1.52.0-next.7

package/dist/styles.css

@@ -34,13 +34,13 @@
   }
 }
 @layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
+  [data-copilotkit], [data-copilotkit] *, [data-copilotkit] ::after, [data-copilotkit] ::before, [data-copilotkit] ::file-selector-button {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border: 0 solid;
   }
-  html, :host {
+  [data-copilotkit], [data-copilotkit] {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
@@ -49,74 +49,74 @@
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
-  hr {
+  [data-copilotkit] hr, hr[data-copilotkit] {
     height: 0;
     color: inherit;
     border-top-width: 1px;
   }
-  abbr:where([title]) {
+  [data-copilotkit] abbr:where([title]), abbr:where([title])[data-copilotkit] {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
   }
-  h1, h2, h3, h4, h5, h6 {
+  [data-copilotkit] h1, h1[data-copilotkit], [data-copilotkit] h2, h2[data-copilotkit], [data-copilotkit] h3, h3[data-copilotkit], [data-copilotkit] h4, h4[data-copilotkit], [data-copilotkit] h5, h5[data-copilotkit], [data-copilotkit] h6, h6[data-copilotkit] {
     font-size: inherit;
     font-weight: inherit;
   }
-  a {
+  [data-copilotkit] a, a[data-copilotkit] {
     color: inherit;
     -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
-  b, strong {
+  [data-copilotkit] b, b[data-copilotkit], [data-copilotkit] strong, strong[data-copilotkit] {
     font-weight: bolder;
   }
-  code, kbd, samp, pre {
+  [data-copilotkit] code, code[data-copilotkit], [data-copilotkit] kbd, kbd[data-copilotkit], [data-copilotkit] samp, samp[data-copilotkit], [data-copilotkit] pre, pre[data-copilotkit] {
     font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
     font-feature-settings: var(--default-mono-font-feature-settings, normal);
     font-variation-settings: var(--default-mono-font-variation-settings, normal);
     font-size: 1em;
   }
-  small {
+  [data-copilotkit] small, small[data-copilotkit] {
     font-size: 80%;
   }
-  sub, sup {
+  [data-copilotkit] sub, sub[data-copilotkit], [data-copilotkit] sup, sup[data-copilotkit] {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
-  sub {
+  [data-copilotkit] sub, sub[data-copilotkit] {
     bottom: -0.25em;
   }
-  sup {
+  [data-copilotkit] sup, sup[data-copilotkit] {
     top: -0.5em;
   }
-  table {
+  [data-copilotkit] table, table[data-copilotkit] {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
   }
-  :-moz-focusring {
+  [data-copilotkit] :-moz-focusring {
     outline: auto;
   }
-  progress {
+  [data-copilotkit] progress, progress[data-copilotkit] {
     vertical-align: baseline;
   }
-  summary {
+  [data-copilotkit] summary, summary[data-copilotkit] {
     display: list-item;
   }
-  ol, ul, menu {
+  [data-copilotkit] ol, ol[data-copilotkit], [data-copilotkit] ul, ul[data-copilotkit], [data-copilotkit] menu, menu[data-copilotkit] {
     list-style: none;
   }
-  img, svg, video, canvas, audio, iframe, embed, object {
+  [data-copilotkit] img, img[data-copilotkit], [data-copilotkit] svg, svg[data-copilotkit], [data-copilotkit] video, video[data-copilotkit], [data-copilotkit] canvas, canvas[data-copilotkit], [data-copilotkit] audio, audio[data-copilotkit], [data-copilotkit] iframe, iframe[data-copilotkit], [data-copilotkit] embed, embed[data-copilotkit], [data-copilotkit] object, object[data-copilotkit] {
     display: block;
     vertical-align: middle;
   }
-  img, video {
+  [data-copilotkit] img, img[data-copilotkit], [data-copilotkit] video, video[data-copilotkit] {
     max-width: 100%;
     height: auto;
   }
-  button, input, select, optgroup, textarea, ::file-selector-button {
+  [data-copilotkit] button, button[data-copilotkit], [data-copilotkit] input, input[data-copilotkit], [data-copilotkit] select, select[data-copilotkit], [data-copilotkit] optgroup, optgroup[data-copilotkit], [data-copilotkit] textarea, textarea[data-copilotkit], [data-copilotkit] ::file-selector-button {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -126,58 +126,58 @@
     background-color: transparent;
     opacity: 1;
   }
-  :where(select:is([multiple], [size])) optgroup {
+  [data-copilotkit] :where(select:is([multiple], [size])) optgroup {
     font-weight: bolder;
   }
-  :where(select:is([multiple], [size])) optgroup option {
+  [data-copilotkit] :where(select:is([multiple], [size])) optgroup option {
     padding-inline-start: 20px;
   }
-  ::file-selector-button {
+  [data-copilotkit] ::file-selector-button {
     margin-inline-end: 4px;
   }
-  ::placeholder {
+  [data-copilotkit] ::placeholder {
     opacity: 1;
   }
   @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
+    [data-copilotkit] ::placeholder {
       color: currentcolor;
       @supports (color: color-mix(in lab, red, red)) {
         color: color-mix(in oklab, currentcolor 50%, transparent);
       }
     }
   }
-  textarea {
+  [data-copilotkit] textarea, textarea[data-copilotkit] {
     resize: vertical;
   }
-  ::-webkit-search-decoration {
+  [data-copilotkit] ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
-  ::-webkit-date-and-time-value {
+  [data-copilotkit] ::-webkit-date-and-time-value {
     min-height: 1lh;
     text-align: inherit;
   }
-  ::-webkit-datetime-edit {
+  [data-copilotkit] ::-webkit-datetime-edit {
     display: inline-flex;
   }
-  ::-webkit-datetime-edit-fields-wrapper {
+  [data-copilotkit] ::-webkit-datetime-edit-fields-wrapper {
     padding: 0;
   }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+  [data-copilotkit] ::-webkit-datetime-edit, [data-copilotkit] ::-webkit-datetime-edit-year-field, [data-copilotkit] ::-webkit-datetime-edit-month-field, [data-copilotkit] ::-webkit-datetime-edit-day-field, [data-copilotkit] ::-webkit-datetime-edit-hour-field, [data-copilotkit] ::-webkit-datetime-edit-minute-field, [data-copilotkit] ::-webkit-datetime-edit-second-field, [data-copilotkit] ::-webkit-datetime-edit-millisecond-field, [data-copilotkit] ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
-  ::-webkit-calendar-picker-indicator {
+  [data-copilotkit] ::-webkit-calendar-picker-indicator {
     line-height: 1;
   }
-  :-moz-ui-invalid {
+  [data-copilotkit] :-moz-ui-invalid {
     box-shadow: none;
   }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+  [data-copilotkit] button, button[data-copilotkit], [data-copilotkit] input:where([type="button"], [type="reset"], [type="submit"]), input:where([type="button"], [type="reset"], [type="submit"])[data-copilotkit], [data-copilotkit] ::file-selector-button {
     appearance: button;
   }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  [data-copilotkit] ::-webkit-inner-spin-button, [data-copilotkit] ::-webkit-outer-spin-button {
     height: auto;
   }
-  [hidden]:where(:not([hidden="until-found"])) {
+  [data-copilotkit] [hidden]:where(:not([hidden="until-found"])), [hidden]:where(:not([hidden="until-found"]))[data-copilotkit] {
     display: none !important;
   }
 }
@@ -1479,7 +1479,7 @@
   inherits: false;
   initial-value: 0;
 }
-:root {
+[data-copilotkit] {
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -1514,7 +1514,7 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
-.dark {
+.dark [data-copilotkit], [data-copilotkit].dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.145 0 0);
@@ -1549,38 +1549,38 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 @layer base {
-  * {
+  [data-copilotkit], [data-copilotkit] * {
     border-color: var(--border);
     outline-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
       outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
-  body {
-    background-color: var(--background);
+  [data-copilotkit] {
     color: var(--foreground);
+    background-color: var(--background);
   }
 }
-.prose {
+[data-copilotkit] .prose {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.prose :where(code):not( :where([class~="not-prose"], [class~="not-prose"] *) )::before {
+[data-copilotkit] .prose :where(code):not( :where([class~="not-prose"], [class~="not-prose"] *) )::before {
   content: none;
 }
-.prose :where(code):not( :where([class~="not-prose"], [class~="not-prose"] *) )::after {
+[data-copilotkit] .prose :where(code):not( :where([class~="not-prose"], [class~="not-prose"] *) )::after {
   content: none;
 }
-.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+[data-copilotkit] .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-weight: 400;
 }
-.prose h1 {
+[data-copilotkit] .prose h1 {
   margin-block-end: 8px;
   margin-bottom: 8px;
   font-size: 24px;
   font-weight: 600;
 }
-.prose h2 {
+[data-copilotkit] .prose h2 {
   margin-block-end: 4px;
   margin-block-start: 16px;
   margin-top: 16px;
@@ -1588,7 +1588,7 @@
   font-size: 20px;
   font-weight: 600;
 }
-.prose h3 {
+[data-copilotkit] .prose h3 {
   margin-block-end: 4px;
   margin-block-start: 16px;
   margin-top: 16px;
@@ -1596,27 +1596,27 @@
   font-size: 18px;
   font-weight: 600;
 }
-.prose p {
+[data-copilotkit] .prose p {
   margin-block-start: 8px;
   margin-block-end: 4px;
   margin-top: 4px;
   margin-bottom: 8px;
 }
-.prose a {
+[data-copilotkit] .prose a {
   color: #2964aa;
   text-decoration: none;
 }
-.prose a:hover {
+[data-copilotkit] .prose a:hover {
   color: #749ac8;
 }
-.prose :where(blockquote p:first-of-type):not( :where([class~="not-prose"], [class~="not-prose"] *) )::before {
+[data-copilotkit] .prose :where(blockquote p:first-of-type):not( :where([class~="not-prose"], [class~="not-prose"] *) )::before {
   content: none;
 }
-.prose blockquote {
+[data-copilotkit] .prose blockquote {
   font-style: normal;
   font-weight: 400;
 }
-.prose input[type="checkbox"] {
+[data-copilotkit] .prose input[type="checkbox"] {
   appearance: none;
   background-color: #fff;
   background-origin: border-box;
@@ -1635,7 +1635,7 @@
   width: 1rem;
   border-radius: 2px;
 }
-.prose input[type="checkbox"]:checked {
+[data-copilotkit] .prose input[type="checkbox"]:checked {
   background-color: #004f99;
   border-color: #004f99;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
@@ -1643,17 +1643,17 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-.prose em {
+[data-copilotkit] .prose em {
   color: var(--foreground);
 }
-.prose hr {
+[data-copilotkit] .prose hr {
   margin-block-start: 0px;
   margin-block-end: 0px;
   margin-top: 28px;
   margin-bottom: 28px;
   color: rgb(13, 13, 13);
 }
-.prose td {
+[data-copilotkit] .prose td {
   color: var(--foreground);
 }
 @property --tw-rotate-x {

package/eslint.config.mjs

@@ -15,6 +15,6 @@ export default tseslint.config(
     }
   },
   {
-    ignores: ['dist/**', 'node_modules/**', '**/*.spec.ts', '**/*.test.ts']
+    ignores: ['dist/**', 'node_modules/**', 'scripts/**', '**/*.spec.ts', '**/*.test.ts']
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkitnext/angular",
-  "version": "1.52.0-next.5",
+  "version": "1.52.0-next.7",
   "description": "Angular library for CopilotKit",
   "main": "dist/fesm2022/copilotkitnext-angular.mjs",
   "module": "dist/fesm2022/copilotkitnext-angular.mjs",
@@ -24,8 +24,8 @@
     "tailwind-merge": "^2.6.0",
     "zod": "^3.22.4",
     "tslib": "^2.6.0",
-    "@copilotkitnext/core": "1.52.0-next.5",
-    "@copilotkitnext/shared": "1.52.0-next.5"
+    "@copilotkitnext/core": "1.52.0-next.7",
+    "@copilotkitnext/shared": "1.52.0-next.7"
   },
   "peerDependencies": {
     "@angular/cdk": "^18.0.0 || ^19.0.0",
@@ -68,8 +68,8 @@
     "vite": "^7.1.4",
     "vitest": "^3.2.4",
     "zone.js": "^0.14.0",
-    "@copilotkitnext/eslint-config": "1.52.0-next.5",
-    "@copilotkitnext/typescript-config": "1.52.0-next.5"
+    "@copilotkitnext/eslint-config": "1.52.0-next.7",
+    "@copilotkitnext/typescript-config": "1.52.0-next.7"
   },
   "publishConfig": {
     "access": "public"
@@ -82,7 +82,7 @@
   "license": "MIT",
   "scripts": {
     "build": "ng-packagr -p ng-package.json && npm run build:css",
-    "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/styles.css",
+    "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/styles.css && node scripts/scope-preflight.mjs ./dist/styles.css",
     "dev": "concurrently \"ng-packagr -p ng-package.json --watch\" \"npm run dev:css\"",
     "dev:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/styles.css --watch",
     "lint": "eslint .",

package/scripts/scope-preflight.mjs

@@ -0,0 +1,101 @@
+/**
+ * Post-processes compiled Tailwind CSS to scope all @layer base rules
+ * under [data-copilotkit], preventing CopilotKit styles from leaking
+ * into the host application.
+ *
+ * Run after `tailwindcss` CLI: node scripts/scope-preflight.mjs <file>
+ */
+
+import { readFileSync, writeFileSync } from "fs";
+import postcss from "postcss";
+
+const SCOPE = "[data-copilotkit]";
+const file = process.argv[2];
+if (!file) {
+  console.error("Usage: node scripts/scope-preflight.mjs <css-file>");
+  process.exit(1);
+}
+
+/** Selectors that are already scoped and should be left alone. */
+function isAlreadyScoped(selector) {
+  return (
+    selector.includes("[data-copilot") ||
+    selector.includes("[data-sidebar")
+  );
+}
+
+/** Rewrite a single selector to be scoped under [data-copilotkit]. */
+function scopeSelector(sel) {
+  sel = sel.trim();
+
+  // Already scoped — keep as-is
+  if (isAlreadyScoped(sel)) return sel;
+
+  // html, :host → [data-copilotkit]
+  if (sel === "html" || sel === ":host" || sel === "html,:host") {
+    return SCOPE;
+  }
+
+  // body → null (remove)
+  if (sel === "body") return null;
+
+  // ::backdrop → null (cannot be scoped to a container)
+  if (sel === "::backdrop") return null;
+
+  // Bare universal selector → scope to container + descendants
+  if (sel === "*") return `${SCOPE}, ${SCOPE} *`;
+
+  // Pseudo-elements (::) and vendor pseudo-classes (:-) → descendant only
+  // These can't be combined with an attribute selector suffix
+  if (sel.startsWith(":")) {
+    return `${SCOPE} ${sel}`;
+  }
+
+  // Element / attribute selectors → descendant AND self-matching
+  // e.g. button → [data-copilotkit] button, button[data-copilotkit]
+  // This ensures <button data-copilotkit> also receives the preflight reset
+  return `${SCOPE} ${sel}, ${sel}${SCOPE}`;
+}
+
+function scopeRule(rule) {
+  const newSelectors = [];
+
+  for (const sel of rule.selectors) {
+    const scoped = scopeSelector(sel);
+    if (scoped !== null) {
+      // scopeSelector may return comma-separated selectors (for *)
+      if (typeof scoped === "string" && scoped.includes(", ")) {
+        newSelectors.push(...scoped.split(", "));
+      } else if (scoped) {
+        newSelectors.push(scoped);
+      }
+    }
+  }
+
+  if (newSelectors.length === 0) {
+    rule.remove();
+  } else {
+    rule.selectors = newSelectors;
+  }
+}
+
+/** Recursively scope all rules within a node (handles @supports, @media, etc.) */
+function scopeChildren(node) {
+  node.walk((child) => {
+    if (child.type === "rule") {
+      scopeRule(child);
+    }
+    // @supports / @media blocks are walked automatically
+  });
+}
+
+// --- Main ---
+const css = readFileSync(file, "utf8");
+const root = postcss.parse(css);
+
+root.walkAtRules("layer", (layer) => {
+  if (layer.params !== "base") return;
+  scopeChildren(layer);
+});
+
+writeFileSync(file, root.toString());