@copilotkit/a2ui-renderer 1.55.0-next.9 → 1.55.0

package/dist/react-renderer/lib/utils.cjs

@@ -1,39 +1,14 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../theme/utils.cjs');
-let _a2ui_lit_0_8 = require("@a2ui/lit/0.8");
 let clsx = require("clsx");
 
 //#region src/react-renderer/lib/utils.ts
 /**
 * Utility function to merge class names.
-* Combines clsx for conditional classes.
-*
-* @param inputs - Class values to merge
-* @returns Merged class name string
-*
-* @example
-* cn('base-class', condition && 'conditional-class', { 'object-class': true })
 */
 function cn(...inputs) {
 	return (0, clsx.clsx)(inputs);
 }
-/**
-* Merges multiple class maps into a single class map.
-* Uses Lit's Styles.merge() function directly for consistency.
-*
-* Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',
-* only the latter is kept (same prefix 'layout-p-' means they conflict).
-*
-* @param maps - Class maps to merge
-* @returns A merged class map
-*/
-function mergeClassMaps(...maps) {
-	const validMaps = maps.filter((m) => m !== void 0);
-	if (validMaps.length === 0) return {};
-	return _a2ui_lit_0_8.Styles.merge(...validMaps);
-}
 
 //#endregion
 exports.cn = cn;
-exports.mergeClassMaps = mergeClassMaps;
 //# sourceMappingURL=utils.cjs.map

package/dist/react-renderer/lib/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","names":["Styles"],"sources":["../../../src/react-renderer/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { Styles } from \"@a2ui/lit/0.8\";\n\n/**\n * Utility function to merge class names.\n * Combines clsx for conditional classes.\n *\n * @param inputs - Class values to merge\n * @returns Merged class name string\n *\n * @example\n * cn('base-class', condition && 'conditional-class', { 'object-class': true })\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n\n/**\n * Converts a theme class map (Record<string, boolean>) to a className string.\n * Re-exported from theme/utils for convenience.\n *\n * @param classMap - An object where keys are class names and values are booleans\n * @returns A space-separated string of class names where the value is true\n */\nexport { classMapToString, stylesToObject } from \"../theme/utils\";\n\n/**\n * Merges multiple class maps into a single class map.\n * Uses Lit's Styles.merge() function directly for consistency.\n *\n * Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',\n * only the latter is kept (same prefix 'layout-p-' means they conflict).\n *\n * @param maps - Class maps to merge\n * @returns A merged class map\n */\nexport function mergeClassMaps(\n  ...maps: (Record<string, boolean> | undefined)[]\n): Record<string, boolean> {\n  // Filter out undefined maps and use Lit's merge function\n  const validMaps = maps.filter(\n    (m): m is Record<string, boolean> => m !== undefined,\n  );\n  if (validMaps.length === 0) return {};\n  return Styles.merge(...validMaps);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,SAAgB,GAAG,GAAG,QAA8B;AAClD,uBAAY,OAAO;;;;;;;;;;;;AAsBrB,SAAgB,eACd,GAAG,MACsB;CAEzB,MAAM,YAAY,KAAK,QACpB,MAAoC,MAAM,OAC5C;AACD,KAAI,UAAU,WAAW,EAAG,QAAO,EAAE;AACrC,QAAOA,qBAAO,MAAM,GAAG,UAAU"}
+{"version":3,"file":"utils.cjs","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\n/**\n * Utility function to merge class names.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,GAAG,GAAG,QAA8B;AAClD,uBAAY,OAAO"}

package/dist/react-renderer/lib/utils.d.cts

@@ -1,16 +1,8 @@
-import { classMapToString, stylesToObject } from "../theme/utils.cjs";
 import { ClassValue } from "clsx";
 
 //#region src/react-renderer/lib/utils.d.ts
 /**
  * Utility function to merge class names.
- * Combines clsx for conditional classes.
- *
- * @param inputs - Class values to merge
- * @returns Merged class name string
- *
- * @example
- * cn('base-class', condition && 'conditional-class', { 'object-class': true })
  */
 declare function cn(...inputs: ClassValue[]): string;
 //#endregion

package/dist/react-renderer/lib/utils.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"mappings":";;;;;;;AAaA;;;;;;;iBAAgB,EAAA,CAAA,GAAM,MAAA,EAAQ,UAAA"}
+{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"mappings":";;;;;AAKA;iBAAgB,EAAA,CAAA,GAAM,MAAA,EAAQ,UAAA"}

package/dist/react-renderer/lib/utils.d.mts

@@ -1,16 +1,8 @@
-import { classMapToString, stylesToObject } from "../theme/utils.mjs";
 import { ClassValue } from "clsx";
 
 //#region src/react-renderer/lib/utils.d.ts
 /**
  * Utility function to merge class names.
- * Combines clsx for conditional classes.
- *
- * @param inputs - Class values to merge
- * @returns Merged class name string
- *
- * @example
- * cn('base-class', condition && 'conditional-class', { 'object-class': true })
  */
 declare function cn(...inputs: ClassValue[]): string;
 //#endregion

package/dist/react-renderer/lib/utils.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.mts","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"mappings":";;;;;;;AAaA;;;;;;;iBAAgB,EAAA,CAAA,GAAM,MAAA,EAAQ,UAAA"}
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"mappings":";;;;;AAKA;iBAAgB,EAAA,CAAA,GAAM,MAAA,EAAQ,UAAA"}

package/dist/react-renderer/lib/utils.mjs

@@ -1,37 +1,13 @@
-import { classMapToString, stylesToObject } from "../theme/utils.mjs";
-import { Styles } from "@a2ui/lit/0.8";
 import { clsx } from "clsx";
 
 //#region src/react-renderer/lib/utils.ts
 /**
 * Utility function to merge class names.
-* Combines clsx for conditional classes.
-*
-* @param inputs - Class values to merge
-* @returns Merged class name string
-*
-* @example
-* cn('base-class', condition && 'conditional-class', { 'object-class': true })
 */
 function cn(...inputs) {
 	return clsx(inputs);
 }
-/**
-* Merges multiple class maps into a single class map.
-* Uses Lit's Styles.merge() function directly for consistency.
-*
-* Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',
-* only the latter is kept (same prefix 'layout-p-' means they conflict).
-*
-* @param maps - Class maps to merge
-* @returns A merged class map
-*/
-function mergeClassMaps(...maps) {
-	const validMaps = maps.filter((m) => m !== void 0);
-	if (validMaps.length === 0) return {};
-	return Styles.merge(...validMaps);
-}
 
 //#endregion
-export { cn, mergeClassMaps };
+export { cn };
 //# sourceMappingURL=utils.mjs.map

package/dist/react-renderer/lib/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { Styles } from \"@a2ui/lit/0.8\";\n\n/**\n * Utility function to merge class names.\n * Combines clsx for conditional classes.\n *\n * @param inputs - Class values to merge\n * @returns Merged class name string\n *\n * @example\n * cn('base-class', condition && 'conditional-class', { 'object-class': true })\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n\n/**\n * Converts a theme class map (Record<string, boolean>) to a className string.\n * Re-exported from theme/utils for convenience.\n *\n * @param classMap - An object where keys are class names and values are booleans\n * @returns A space-separated string of class names where the value is true\n */\nexport { classMapToString, stylesToObject } from \"../theme/utils\";\n\n/**\n * Merges multiple class maps into a single class map.\n * Uses Lit's Styles.merge() function directly for consistency.\n *\n * Lit's merge handles prefix conflicts: if you have 'layout-p-2' and 'layout-p-4',\n * only the latter is kept (same prefix 'layout-p-' means they conflict).\n *\n * @param maps - Class maps to merge\n * @returns A merged class map\n */\nexport function mergeClassMaps(\n  ...maps: (Record<string, boolean> | undefined)[]\n): Record<string, boolean> {\n  // Filter out undefined maps and use Lit's merge function\n  const validMaps = maps.filter(\n    (m): m is Record<string, boolean> => m !== undefined,\n  );\n  if (validMaps.length === 0) return {};\n  return Styles.merge(...validMaps);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,GAAG,GAAG,QAA8B;AAClD,QAAO,KAAK,OAAO;;;;;;;;;;;;AAsBrB,SAAgB,eACd,GAAG,MACsB;CAEzB,MAAM,YAAY,KAAK,QACpB,MAAoC,MAAM,OAC5C;AACD,KAAI,UAAU,WAAW,EAAG,QAAO,EAAE;AACrC,QAAO,OAAO,MAAM,GAAG,UAAU"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/react-renderer/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\n/**\n * Utility function to merge class names.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n"],"mappings":";;;;;;AAKA,SAAgB,GAAG,GAAG,QAA8B;AAClD,QAAO,KAAK,OAAO"}

package/dist/react-renderer/styles/index.cjs

@@ -1,466 +1,11 @@
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
-const require_reset = require('./reset.cjs');
-let _a2ui_lit_0_8 = require("@a2ui/lit/0.8");
 
 //#region src/react-renderer/styles/index.ts
 /**
-* Structural CSS styles from the Lit renderer, converted for global DOM use.
-* These styles define all the utility classes (layout-*, typography-*, color-*, etc.)
-* Converts :host selectors to .a2ui-surface for scoped use outside Shadow DOM.
+* v0.9: Styles are now handled by a2ui-react components internally.
+* These functions are kept as no-ops for backward compatibility.
 */
-const structuralStyles = _a2ui_lit_0_8.Styles.structuralStyles.replace(/:host\s*\{/g, ".a2ui-surface {");
-/**
-* Component-specific styles that replicate Lit's Shadow DOM scoped CSS.
-*
-* Each Lit component has `static styles` with :host, element selectors, and ::slotted().
-* Since React uses Light DOM, we transform these to global CSS scoped under .a2ui-surface.
-*
-* Transformation rules:
-*   :host          → .a2ui-surface .a2ui-{component}
-*   section        → .a2ui-surface .a2ui-{component} section
-*   ::slotted(*)   → .a2ui-surface .a2ui-{component} section > *
-*/
-const componentSpecificStyles = `
-/* =========================================================================
- * Card (from Lit card.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-card {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* section { height: 100%; width: 100%; min-height: 0; overflow: auto; } */
-/* Use > to target only Card's direct section, not nested sections (e.g., TextField's section) */
-.a2ui-surface .a2ui-card > section {
-  height: 100%;
-  width: 100%;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* section ::slotted(*) { height: 100%; width: 100%; } */
-/* Use > section > to only target Card's slotted children, not deeply nested elements */
-.a2ui-surface .a2ui-card > section > * {
-  height: 100%;
-  width: 100%;
-}
-
-/* =========================================================================
- * Divider (from Lit divider.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-divider {
-  display: block;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* hr { height: 1px; background: #ccc; border: none; } */
-/* Use :where() for low specificity (0,0,1) so theme utility classes can override */
-/* Browser default margins apply (margin-block: 0.5em, margin-inline: auto) */
-:where(.a2ui-surface .a2ui-divider) hr {
-  height: 1px;
-  background: #ccc;
-  border: none;
-}
-
-/* =========================================================================
- * Text (from Lit text.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); } */
-.a2ui-surface .a2ui-text {
-  display: block;
-  flex: var(--weight);
-}
-
-/* h1, h2, h3, h4, h5 { line-height: inherit; font: inherit; } */
-/* Use :where() to match Lit's low specificity (0,0,0,1 - just element) */
-:where(.a2ui-surface .a2ui-text) h1,
-:where(.a2ui-surface .a2ui-text) h2,
-:where(.a2ui-surface .a2ui-text) h3,
-:where(.a2ui-surface .a2ui-text) h4,
-:where(.a2ui-surface .a2ui-text) h5 {
-  line-height: inherit;
-  font: inherit;
-}
-
-/* Ensure markdown paragraph margins are reset */
-.a2ui-surface .a2ui-text p {
-  margin: 0;
-}
-
-/* =========================================================================
- * TextField (from Lit text-field.ts static styles)
- * ========================================================================= */
-
-/* :host { display: flex; flex: var(--weight); } */
-.a2ui-surface .a2ui-textfield {
-  display: flex;
-  flex: var(--weight);
-}
-
-/* input { display: block; width: 100%; } */
-:where(.a2ui-surface .a2ui-textfield) input {
-  display: block;
-  width: 100%;
-}
-
-/* label { display: block; margin-bottom: 4px; } */
-:where(.a2ui-surface .a2ui-textfield) label {
-  display: block;
-  margin-bottom: 4px;
-}
-
-/* textarea - same styling as input for multiline text fields */
-:where(.a2ui-surface .a2ui-textfield) textarea {
-  display: block;
-  width: 100%;
-}
-
-/* =========================================================================
- * CheckBox (from Lit checkbox.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-checkbox {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* input { display: block; width: 100%; } */
-:where(.a2ui-surface .a2ui-checkbox) input {
-  display: block;
-  width: 100%;
-}
-
-/* =========================================================================
- * Slider (from Lit slider.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); } */
-.a2ui-surface .a2ui-slider {
-  display: block;
-  flex: var(--weight);
-}
-
-/* input { display: block; width: 100%; } */
-:where(.a2ui-surface .a2ui-slider) input {
-  display: block;
-  width: 100%;
-}
-
-/* =========================================================================
- * Button (from Lit button.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; } */
-.a2ui-surface .a2ui-button {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-}
-
-/* =========================================================================
- * Icon (from Lit icon.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-icon {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* =========================================================================
- * Tabs (from Lit tabs.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); } */
-.a2ui-surface .a2ui-tabs {
-  display: block;
-  flex: var(--weight);
-}
-
-/* =========================================================================
- * Modal (from Lit modal.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); } */
-.a2ui-surface .a2ui-modal {
-  display: block;
-  flex: var(--weight);
-}
-
-/* dialog { padding: 0; border: none; background: none; } */
-:where(.a2ui-surface .a2ui-modal) dialog {
-  padding: 0;
-  border: none;
-  background: none;
-}
-
-/* dialog section #controls { display: flex; justify-content: end; margin-bottom: 4px; } */
-.a2ui-surface .a2ui-modal dialog section #controls {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 4px;
-}
-
-/* dialog section #controls button { padding: 0; background: none; ... } */
-.a2ui-surface .a2ui-modal dialog section #controls button {
-  padding: 0;
-  background: none;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border: none;
-}
-
-/* =========================================================================
- * Image (from Lit image.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-image {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* img { display: block; width: 100%; height: 100%; object-fit: var(--object-fit, fill); } */
-:where(.a2ui-surface .a2ui-image) img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: var(--object-fit, fill);
-}
-
-/* =========================================================================
- * Video (from Lit video.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-video {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* video { display: block; width: 100%; } */
-:where(.a2ui-surface .a2ui-video) video {
-  display: block;
-  width: 100%;
-}
-
-/* =========================================================================
- * AudioPlayer (from Lit audio.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-audio {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* audio { display: block; width: 100%; } */
-:where(.a2ui-surface .a2ui-audio) audio {
-  display: block;
-  width: 100%;
-}
-
-/* =========================================================================
- * MultipleChoice (from Lit multiple-choice.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-multiplechoice {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* select { width: 100%; } */
-:where(.a2ui-surface .a2ui-multiplechoice) select {
-  width: 100%;
-}
-
-/* =========================================================================
- * Column (from Lit column.ts static styles)
- * ========================================================================= */
-
-/* :host { display: flex; flex: var(--weight); } */
-.a2ui-surface .a2ui-column {
-  display: flex;
-  flex: var(--weight);
-}
-
-/* section { display: flex; flex-direction: column; min-width: 100%; height: 100%; } */
-.a2ui-surface .a2ui-column > section {
-  display: flex;
-  flex-direction: column;
-  min-width: 100%;
-  height: 100%;
-}
-
-/* :host([alignment="..."]) section { align-items: ...; } */
-/* Use > section to only target Column's direct section, not nested sections (e.g., CheckBox's section) */
-.a2ui-surface .a2ui-column[data-alignment="start"] > section { align-items: start; }
-.a2ui-surface .a2ui-column[data-alignment="center"] > section { align-items: center; }
-.a2ui-surface .a2ui-column[data-alignment="end"] > section { align-items: end; }
-.a2ui-surface .a2ui-column[data-alignment="stretch"] > section { align-items: stretch; }
-
-/* :host([distribution="..."]) section { justify-content: ...; } */
-.a2ui-surface .a2ui-column[data-distribution="start"] > section { justify-content: start; }
-.a2ui-surface .a2ui-column[data-distribution="center"] > section { justify-content: center; }
-.a2ui-surface .a2ui-column[data-distribution="end"] > section { justify-content: end; }
-.a2ui-surface .a2ui-column[data-distribution="spaceBetween"] > section { justify-content: space-between; }
-.a2ui-surface .a2ui-column[data-distribution="spaceAround"] > section { justify-content: space-around; }
-.a2ui-surface .a2ui-column[data-distribution="spaceEvenly"] > section { justify-content: space-evenly; }
-
-/* =========================================================================
- * Row (from Lit row.ts static styles)
- * ========================================================================= */
-
-/* :host { display: flex; flex: var(--weight); } */
-.a2ui-surface .a2ui-row {
-  display: flex;
-  flex: var(--weight);
-}
-
-/* section { display: flex; flex-direction: row; width: 100%; min-height: 100%; } */
-.a2ui-surface .a2ui-row > section {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  min-height: 100%;
-}
-
-/* :host([alignment="..."]) section { align-items: ...; } */
-/* Use > section to only target Row's direct section, not nested sections */
-.a2ui-surface .a2ui-row[data-alignment="start"] > section { align-items: start; }
-.a2ui-surface .a2ui-row[data-alignment="center"] > section { align-items: center; }
-.a2ui-surface .a2ui-row[data-alignment="end"] > section { align-items: end; }
-.a2ui-surface .a2ui-row[data-alignment="stretch"] > section { align-items: stretch; }
-
-/* :host([distribution="..."]) section { justify-content: ...; } */
-.a2ui-surface .a2ui-row[data-distribution="start"] > section { justify-content: start; }
-.a2ui-surface .a2ui-row[data-distribution="center"] > section { justify-content: center; }
-.a2ui-surface .a2ui-row[data-distribution="end"] > section { justify-content: end; }
-.a2ui-surface .a2ui-row[data-distribution="spaceBetween"] > section { justify-content: space-between; }
-.a2ui-surface .a2ui-row[data-distribution="spaceAround"] > section { justify-content: space-around; }
-.a2ui-surface .a2ui-row[data-distribution="spaceEvenly"] > section { justify-content: space-evenly; }
-
-/* =========================================================================
- * List (from Lit list.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-list {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* :host([direction="vertical"]) section { display: grid; } */
-.a2ui-surface .a2ui-list[data-direction="vertical"] > section {
-  display: grid;
-}
-
-/* :host([direction="horizontal"]) section { display: flex; max-width: 100%; overflow-x: scroll; ... } */
-.a2ui-surface .a2ui-list[data-direction="horizontal"] > section {
-  display: flex;
-  max-width: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scrollbar-width: none;
-}
-
-/* :host([direction="horizontal"]) section > ::slotted(*) { flex: 1 0 fit-content; ... } */
-.a2ui-surface .a2ui-list[data-direction="horizontal"] > section > * {
-  flex: 1 0 fit-content;
-  max-width: min(80%, 400px);
-}
-
-/* =========================================================================
- * DateTimeInput (from Lit datetime-input.ts static styles)
- * ========================================================================= */
-
-/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */
-.a2ui-surface .a2ui-datetime-input {
-  display: block;
-  flex: var(--weight);
-  min-height: 0;
-  overflow: auto;
-}
-
-/* input { display: block; border-radius: 8px; padding: 8px; border: 1px solid #ccc; width: 100%; } */
-/* Use :where() to match Lit's low specificity (0,0,0,1) so theme utility classes can override */
-:where(.a2ui-surface .a2ui-datetime-input) input {
-  display: block;
-  border-radius: 8px;
-  padding: 8px;
-  border: 1px solid #ccc;
-  width: 100%;
-}
-
-/* =========================================================================
- * Global box-sizing (matches Lit's * { box-sizing: border-box; } in components)
- * ========================================================================= */
-
-.a2ui-surface *,
-.a2ui-surface *::before,
-.a2ui-surface *::after {
-  box-sizing: border-box;
-}
-`;
-/**
-* Injects A2UI structural styles into the document head.
-* Includes utility classes (layout-*, typography-*, color-*, etc.) and React-specific overrides.
-* Call this once at application startup.
-*
-* NOTE: CSS variables (--n-*, --p-*, etc.) must be defined by the host application on :root,
-* just like in the Lit renderer. This allows full customization of the color palette.
-*
-* @example
-* ```tsx
-* import { injectStyles } from '@a2ui/react/styles';
-*
-* // In your app entry point:
-* injectStyles();
-* ```
-*/
-function injectStyles() {
-	if (typeof document === "undefined") return;
-	const styleId = "a2ui-structural-styles";
-	if (document.getElementById(styleId)) return;
-	const styleElement = document.createElement("style");
-	styleElement.id = styleId;
-	styleElement.textContent = require_reset.resetStyles + "\n" + structuralStyles + "\n" + componentSpecificStyles;
-	document.head.appendChild(styleElement);
-}
-/**
-* Removes injected A2UI styles from the document.
-* Useful for cleanup in tests or when unmounting.
-*/
-function removeStyles() {
-	if (typeof document === "undefined") return;
-	const styleElement = document.getElementById("a2ui-structural-styles");
-	if (styleElement) styleElement.remove();
-}
+function injectStyles() {}
+function removeStyles() {}
 
 //#endregion
 exports.injectStyles = injectStyles;

package/dist/react-renderer/styles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Styles","resetStyles"],"sources":["../../../src/react-renderer/styles/index.ts"],"sourcesContent":["import { Styles } from \"@a2ui/lit/0.8\";\nimport { resetStyles } from \"./reset\";\n\n/**\n * Structural CSS styles from the Lit renderer, converted for global DOM use.\n * These styles define all the utility classes (layout-*, typography-*, color-*, etc.)\n * Converts :host selectors to .a2ui-surface for scoped use outside Shadow DOM.\n */\nexport const structuralStyles: string = Styles.structuralStyles.replace(\n  /:host\\s*\\{/g,\n  \".a2ui-surface {\",\n);\n\n/**\n * Component-specific styles that replicate Lit's Shadow DOM scoped CSS.\n *\n * Each Lit component has `static styles` with :host, element selectors, and ::slotted().\n * Since React uses Light DOM, we transform these to global CSS scoped under .a2ui-surface.\n *\n * Transformation rules:\n *   :host          → .a2ui-surface .a2ui-{component}\n *   section        → .a2ui-surface .a2ui-{component} section\n *   ::slotted(*)   → .a2ui-surface .a2ui-{component} section > *\n */\nexport const componentSpecificStyles: string = `\n/* =========================================================================\n * Card (from Lit card.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-card {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* section { height: 100%; width: 100%; min-height: 0; overflow: auto; } */\n/* Use > to target only Card's direct section, not nested sections (e.g., TextField's section) */\n.a2ui-surface .a2ui-card > section {\n  height: 100%;\n  width: 100%;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* section ::slotted(*) { height: 100%; width: 100%; } */\n/* Use > section > to only target Card's slotted children, not deeply nested elements */\n.a2ui-surface .a2ui-card > section > * {\n  height: 100%;\n  width: 100%;\n}\n\n/* =========================================================================\n * Divider (from Lit divider.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-divider {\n  display: block;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* hr { height: 1px; background: #ccc; border: none; } */\n/* Use :where() for low specificity (0,0,1) so theme utility classes can override */\n/* Browser default margins apply (margin-block: 0.5em, margin-inline: auto) */\n:where(.a2ui-surface .a2ui-divider) hr {\n  height: 1px;\n  background: #ccc;\n  border: none;\n}\n\n/* =========================================================================\n * Text (from Lit text.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-text {\n  display: block;\n  flex: var(--weight);\n}\n\n/* h1, h2, h3, h4, h5 { line-height: inherit; font: inherit; } */\n/* Use :where() to match Lit's low specificity (0,0,0,1 - just element) */\n:where(.a2ui-surface .a2ui-text) h1,\n:where(.a2ui-surface .a2ui-text) h2,\n:where(.a2ui-surface .a2ui-text) h3,\n:where(.a2ui-surface .a2ui-text) h4,\n:where(.a2ui-surface .a2ui-text) h5 {\n  line-height: inherit;\n  font: inherit;\n}\n\n/* Ensure markdown paragraph margins are reset */\n.a2ui-surface .a2ui-text p {\n  margin: 0;\n}\n\n/* =========================================================================\n * TextField (from Lit text-field.ts static styles)\n * ========================================================================= */\n\n/* :host { display: flex; flex: var(--weight); } */\n.a2ui-surface .a2ui-textfield {\n  display: flex;\n  flex: var(--weight);\n}\n\n/* input { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-textfield) input {\n  display: block;\n  width: 100%;\n}\n\n/* label { display: block; margin-bottom: 4px; } */\n:where(.a2ui-surface .a2ui-textfield) label {\n  display: block;\n  margin-bottom: 4px;\n}\n\n/* textarea - same styling as input for multiline text fields */\n:where(.a2ui-surface .a2ui-textfield) textarea {\n  display: block;\n  width: 100%;\n}\n\n/* =========================================================================\n * CheckBox (from Lit checkbox.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-checkbox {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* input { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-checkbox) input {\n  display: block;\n  width: 100%;\n}\n\n/* =========================================================================\n * Slider (from Lit slider.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-slider {\n  display: block;\n  flex: var(--weight);\n}\n\n/* input { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-slider) input {\n  display: block;\n  width: 100%;\n}\n\n/* =========================================================================\n * Button (from Lit button.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; } */\n.a2ui-surface .a2ui-button {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n}\n\n/* =========================================================================\n * Icon (from Lit icon.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-icon {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* =========================================================================\n * Tabs (from Lit tabs.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-tabs {\n  display: block;\n  flex: var(--weight);\n}\n\n/* =========================================================================\n * Modal (from Lit modal.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-modal {\n  display: block;\n  flex: var(--weight);\n}\n\n/* dialog { padding: 0; border: none; background: none; } */\n:where(.a2ui-surface .a2ui-modal) dialog {\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n/* dialog section #controls { display: flex; justify-content: end; margin-bottom: 4px; } */\n.a2ui-surface .a2ui-modal dialog section #controls {\n  display: flex;\n  justify-content: end;\n  margin-bottom: 4px;\n}\n\n/* dialog section #controls button { padding: 0; background: none; ... } */\n.a2ui-surface .a2ui-modal dialog section #controls button {\n  padding: 0;\n  background: none;\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  border: none;\n}\n\n/* =========================================================================\n * Image (from Lit image.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-image {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* img { display: block; width: 100%; height: 100%; object-fit: var(--object-fit, fill); } */\n:where(.a2ui-surface .a2ui-image) img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--object-fit, fill);\n}\n\n/* =========================================================================\n * Video (from Lit video.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-video {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* video { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-video) video {\n  display: block;\n  width: 100%;\n}\n\n/* =========================================================================\n * AudioPlayer (from Lit audio.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-audio {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* audio { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-audio) audio {\n  display: block;\n  width: 100%;\n}\n\n/* =========================================================================\n * MultipleChoice (from Lit multiple-choice.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-multiplechoice {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* select { width: 100%; } */\n:where(.a2ui-surface .a2ui-multiplechoice) select {\n  width: 100%;\n}\n\n/* =========================================================================\n * Column (from Lit column.ts static styles)\n * ========================================================================= */\n\n/* :host { display: flex; flex: var(--weight); } */\n.a2ui-surface .a2ui-column {\n  display: flex;\n  flex: var(--weight);\n}\n\n/* section { display: flex; flex-direction: column; min-width: 100%; height: 100%; } */\n.a2ui-surface .a2ui-column > section {\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  height: 100%;\n}\n\n/* :host([alignment=\"...\"]) section { align-items: ...; } */\n/* Use > section to only target Column's direct section, not nested sections (e.g., CheckBox's section) */\n.a2ui-surface .a2ui-column[data-alignment=\"start\"] > section { align-items: start; }\n.a2ui-surface .a2ui-column[data-alignment=\"center\"] > section { align-items: center; }\n.a2ui-surface .a2ui-column[data-alignment=\"end\"] > section { align-items: end; }\n.a2ui-surface .a2ui-column[data-alignment=\"stretch\"] > section { align-items: stretch; }\n\n/* :host([distribution=\"...\"]) section { justify-content: ...; } */\n.a2ui-surface .a2ui-column[data-distribution=\"start\"] > section { justify-content: start; }\n.a2ui-surface .a2ui-column[data-distribution=\"center\"] > section { justify-content: center; }\n.a2ui-surface .a2ui-column[data-distribution=\"end\"] > section { justify-content: end; }\n.a2ui-surface .a2ui-column[data-distribution=\"spaceBetween\"] > section { justify-content: space-between; }\n.a2ui-surface .a2ui-column[data-distribution=\"spaceAround\"] > section { justify-content: space-around; }\n.a2ui-surface .a2ui-column[data-distribution=\"spaceEvenly\"] > section { justify-content: space-evenly; }\n\n/* =========================================================================\n * Row (from Lit row.ts static styles)\n * ========================================================================= */\n\n/* :host { display: flex; flex: var(--weight); } */\n.a2ui-surface .a2ui-row {\n  display: flex;\n  flex: var(--weight);\n}\n\n/* section { display: flex; flex-direction: row; width: 100%; min-height: 100%; } */\n.a2ui-surface .a2ui-row > section {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 100%;\n}\n\n/* :host([alignment=\"...\"]) section { align-items: ...; } */\n/* Use > section to only target Row's direct section, not nested sections */\n.a2ui-surface .a2ui-row[data-alignment=\"start\"] > section { align-items: start; }\n.a2ui-surface .a2ui-row[data-alignment=\"center\"] > section { align-items: center; }\n.a2ui-surface .a2ui-row[data-alignment=\"end\"] > section { align-items: end; }\n.a2ui-surface .a2ui-row[data-alignment=\"stretch\"] > section { align-items: stretch; }\n\n/* :host([distribution=\"...\"]) section { justify-content: ...; } */\n.a2ui-surface .a2ui-row[data-distribution=\"start\"] > section { justify-content: start; }\n.a2ui-surface .a2ui-row[data-distribution=\"center\"] > section { justify-content: center; }\n.a2ui-surface .a2ui-row[data-distribution=\"end\"] > section { justify-content: end; }\n.a2ui-surface .a2ui-row[data-distribution=\"spaceBetween\"] > section { justify-content: space-between; }\n.a2ui-surface .a2ui-row[data-distribution=\"spaceAround\"] > section { justify-content: space-around; }\n.a2ui-surface .a2ui-row[data-distribution=\"spaceEvenly\"] > section { justify-content: space-evenly; }\n\n/* =========================================================================\n * List (from Lit list.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-list {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* :host([direction=\"vertical\"]) section { display: grid; } */\n.a2ui-surface .a2ui-list[data-direction=\"vertical\"] > section {\n  display: grid;\n}\n\n/* :host([direction=\"horizontal\"]) section { display: flex; max-width: 100%; overflow-x: scroll; ... } */\n.a2ui-surface .a2ui-list[data-direction=\"horizontal\"] > section {\n  display: flex;\n  max-width: 100%;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n\n/* :host([direction=\"horizontal\"]) section > ::slotted(*) { flex: 1 0 fit-content; ... } */\n.a2ui-surface .a2ui-list[data-direction=\"horizontal\"] > section > * {\n  flex: 1 0 fit-content;\n  max-width: min(80%, 400px);\n}\n\n/* =========================================================================\n * DateTimeInput (from Lit datetime-input.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-datetime-input {\n  display: block;\n  flex: var(--weight);\n  min-height: 0;\n  overflow: auto;\n}\n\n/* input { display: block; border-radius: 8px; padding: 8px; border: 1px solid #ccc; width: 100%; } */\n/* Use :where() to match Lit's low specificity (0,0,0,1) so theme utility classes can override */\n:where(.a2ui-surface .a2ui-datetime-input) input {\n  display: block;\n  border-radius: 8px;\n  padding: 8px;\n  border: 1px solid #ccc;\n  width: 100%;\n}\n\n/* =========================================================================\n * Global box-sizing (matches Lit's * { box-sizing: border-box; } in components)\n * ========================================================================= */\n\n.a2ui-surface *,\n.a2ui-surface *::before,\n.a2ui-surface *::after {\n  box-sizing: border-box;\n}\n`;\n\n/**\n * Injects A2UI structural styles into the document head.\n * Includes utility classes (layout-*, typography-*, color-*, etc.) and React-specific overrides.\n * Call this once at application startup.\n *\n * NOTE: CSS variables (--n-*, --p-*, etc.) must be defined by the host application on :root,\n * just like in the Lit renderer. This allows full customization of the color palette.\n *\n * @example\n * ```tsx\n * import { injectStyles } from '@a2ui/react/styles';\n *\n * // In your app entry point:\n * injectStyles();\n * ```\n */\nexport function injectStyles(): void {\n  if (typeof document === \"undefined\") {\n    return; // SSR safety\n  }\n\n  const styleId = \"a2ui-structural-styles\";\n\n  // Avoid duplicate injection\n  if (document.getElementById(styleId)) {\n    return;\n  }\n\n  const styleElement = document.createElement(\"style\");\n  styleElement.id = styleId;\n  // Include structural (utility classes) and component-specific styles\n  // Note: CSS variables (palette) must be defined by the host application on :root,\n  // just like in the Lit renderer. This allows full customization.\n  styleElement.textContent =\n    resetStyles + \"\\n\" + structuralStyles + \"\\n\" + componentSpecificStyles;\n  document.head.appendChild(styleElement);\n}\n\n/**\n * Removes injected A2UI styles from the document.\n * Useful for cleanup in tests or when unmounting.\n */\nexport function removeStyles(): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const styleElement = document.getElementById(\"a2ui-structural-styles\");\n  if (styleElement) {\n    styleElement.remove();\n  }\n}\n"],"mappings":";;;;;;;;;;AAQA,MAAa,mBAA2BA,qBAAO,iBAAiB,QAC9D,eACA,kBACD;;;;;;;;;;;;AAaD,MAAa,0BAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwa/C,SAAgB,eAAqB;AACnC,KAAI,OAAO,aAAa,YACtB;CAGF,MAAM,UAAU;AAGhB,KAAI,SAAS,eAAe,QAAQ,CAClC;CAGF,MAAM,eAAe,SAAS,cAAc,QAAQ;AACpD,cAAa,KAAK;AAIlB,cAAa,cACXC,4BAAc,OAAO,mBAAmB,OAAO;AACjD,UAAS,KAAK,YAAY,aAAa;;;;;;AAOzC,SAAgB,eAAqB;AACnC,KAAI,OAAO,aAAa,YACtB;CAGF,MAAM,eAAe,SAAS,eAAe,yBAAyB;AACtE,KAAI,aACF,cAAa,QAAQ"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/react-renderer/styles/index.ts"],"sourcesContent":["/**\n * v0.9: Styles are now handled by a2ui-react components internally.\n * These functions are kept as no-ops for backward compatibility.\n */\n\nexport function injectStyles(): void {\n  // v0.9: styles are inline in a2ui-react components (no external injection needed)\n}\n\nexport function removeStyles(): void {\n  // v0.9: no-op\n}\n"],"mappings":";;;;;;AAKA,SAAgB,eAAqB;AAIrC,SAAgB,eAAqB"}