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

package/dist/react-renderer/styles/index.d.mts

@@ -1,25 +1,9 @@
 //#region src/react-renderer/styles/index.d.ts
 /**
- * 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();
- * ```
+ * v0.9: Styles are now handled by a2ui-react components internally.
+ * These functions are kept as no-ops for backward compatibility.
  */
 declare function injectStyles(): void;
-/**
- * Removes injected A2UI styles from the document.
- * Useful for cleanup in tests or when unmounting.
- */
 declare function removeStyles(): void;
 //#endregion
 export { injectStyles, removeStyles };

package/dist/react-renderer/styles/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/react-renderer/styles/index.ts"],"mappings":";;;;;;;;;;;;;;;;;iBAgcgB,YAAA,CAAA;;;;;iBA0BA,YAAA,CAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/react-renderer/styles/index.ts"],"mappings":";;AAKA;;;iBAAgB,YAAA,CAAA;AAAA,iBAIA,YAAA,CAAA"}

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

@@ -1,465 +1,10 @@
-import { resetStyles } from "./reset.mjs";
-import { Styles } from "@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.
-*/
-const structuralStyles = 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 = resetStyles + "\n" + structuralStyles + "\n" + componentSpecificStyles;
-	document.head.appendChild(styleElement);
-}
-/**
-* Removes injected A2UI styles from the document.
-* Useful for cleanup in tests or when unmounting.
+* v0.9: Styles are now handled by a2ui-react components internally.
+* These functions are kept as no-ops for backward compatibility.
 */
-function removeStyles() {
-	if (typeof document === "undefined") return;
-	const styleElement = document.getElementById("a2ui-structural-styles");
-	if (styleElement) styleElement.remove();
-}
+function injectStyles() {}
+function removeStyles() {}
 
 //#endregion
 export { injectStyles, removeStyles };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"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,mBAA2B,OAAO,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,cACX,cAAc,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.mjs","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"}

package/dist/react-renderer/theme/ThemeContext.cjs

@@ -1,38 +1,21 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
-const require_litTheme = require('./litTheme.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/react-renderer/theme/ThemeContext.tsx
-/**
-* React context for the A2UI theme.
-*/
+/** React context for the A2UI theme. */
 const ThemeContext = (0, react.createContext)(void 0);
-/**
-* Provider component that makes the A2UI theme available to descendant components.
-*/
 function ThemeProvider({ theme, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
-		value: theme ?? require_litTheme.defaultTheme,
+		value: theme ?? {},
 		children
 	});
 }
-/**
-* Hook to access the current A2UI theme.
-*
-* @returns The current theme
-* @throws If used outside of a ThemeProvider
-*/
 function useTheme() {
 	const theme = (0, react.useContext)(ThemeContext);
 	if (!theme) throw new Error("useTheme must be used within a ThemeProvider or A2UIProvider");
 	return theme;
 }
-/**
-* Hook to optionally access the current A2UI theme.
-*
-* @returns The current theme, or undefined if not within a provider
-*/
 function useThemeOptional() {
 	return (0, react.useContext)(ThemeContext);
 }

package/dist/react-renderer/theme/ThemeContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.cjs","names":["defaultTheme"],"sources":["../../../src/react-renderer/theme/ThemeContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport { defaultTheme } from \"./litTheme\";\n\n/**\n * React context for the A2UI theme.\n */\nconst ThemeContext = createContext<Types.Theme | undefined>(undefined);\n\n/**\n * Props for the ThemeProvider component.\n */\nexport interface ThemeProviderProps {\n  /** The theme to provide. Falls back to defaultTheme if not specified. */\n  theme?: Types.Theme;\n  /** Child components that will have access to the theme */\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the A2UI theme available to descendant components.\n */\nexport function ThemeProvider({ theme, children }: ThemeProviderProps) {\n  return (\n    <ThemeContext.Provider value={theme ?? defaultTheme}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * Hook to access the current A2UI theme.\n *\n * @returns The current theme\n * @throws If used outside of a ThemeProvider\n */\nexport function useTheme(): Types.Theme {\n  const theme = useContext(ThemeContext);\n  if (!theme) {\n    throw new Error(\n      \"useTheme must be used within a ThemeProvider or A2UIProvider\",\n    );\n  }\n  return theme;\n}\n\n/**\n * Hook to optionally access the current A2UI theme.\n *\n * @returns The current theme, or undefined if not within a provider\n */\nexport function useThemeOptional(): Types.Theme | undefined {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,wCAAsD,OAAU;;;;AAetE,SAAgB,cAAc,EAAE,OAAO,YAAgC;AACrE,QACE,2CAAC,aAAa;EAAS,OAAO,SAASA;EACpC;GACqB;;;;;;;;AAU5B,SAAgB,WAAwB;CACtC,MAAM,8BAAmB,aAAa;AACtC,KAAI,CAAC,MACH,OAAM,IAAI,MACR,+DACD;AAEH,QAAO;;;;;;;AAQT,SAAgB,mBAA4C;AAC1D,8BAAkB,aAAa"}
+{"version":3,"file":"ThemeContext.cjs","names":[],"sources":["../../../src/react-renderer/theme/ThemeContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\ntype ThemeType = Record<string, unknown>;\n\n/** React context for the A2UI theme. */\nconst ThemeContext = createContext<ThemeType | undefined>(undefined);\n\nexport interface ThemeProviderProps {\n  theme?: ThemeType;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({ theme, children }: ThemeProviderProps) {\n  return (\n    <ThemeContext.Provider value={theme ?? {}}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme(): ThemeType {\n  const theme = useContext(ThemeContext);\n  if (!theme) {\n    throw new Error(\n      \"useTheme must be used within a ThemeProvider or A2UIProvider\",\n    );\n  }\n  return theme;\n}\n\nexport function useThemeOptional(): ThemeType | undefined {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;;AAKA,MAAM,wCAAoD,OAAU;AAOpE,SAAgB,cAAc,EAAE,OAAO,YAAgC;AACrE,QACE,2CAAC,aAAa;EAAS,OAAO,SAAS,EAAE;EACtC;GACqB;;AAI5B,SAAgB,WAAsB;CACpC,MAAM,8BAAmB,aAAa;AACtC,KAAI,CAAC,MACH,OAAM,IAAI,MACR,+DACD;AAEH,QAAO;;AAGT,SAAgB,mBAA0C;AACxD,8BAAkB,aAAa"}

package/dist/react-renderer/theme/ThemeContext.d.cts

@@ -1,37 +1,18 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
-import { Types } from "@a2ui/lit/0.8";
 
 //#region src/react-renderer/theme/ThemeContext.d.ts
-/**
- * Props for the ThemeProvider component.
- */
+type ThemeType = Record<string, unknown>;
 interface ThemeProviderProps {
-  /** The theme to provide. Falls back to defaultTheme if not specified. */
-  theme?: Types.Theme;
-  /** Child components that will have access to the theme */
+  theme?: ThemeType;
   children: ReactNode;
 }
-/**
- * Provider component that makes the A2UI theme available to descendant components.
- */
 declare function ThemeProvider({
   theme,
   children
 }: ThemeProviderProps): react_jsx_runtime0.JSX.Element;
-/**
- * Hook to access the current A2UI theme.
- *
- * @returns The current theme
- * @throws If used outside of a ThemeProvider
- */
-declare function useTheme(): Types.Theme;
-/**
- * Hook to optionally access the current A2UI theme.
- *
- * @returns The current theme, or undefined if not within a provider
- */
-declare function useThemeOptional(): Types.Theme | undefined;
+declare function useTheme(): ThemeType;
+declare function useThemeOptional(): ThemeType | undefined;
 //#endregion
 export { ThemeProvider, useTheme, useThemeOptional };
 //# sourceMappingURL=ThemeContext.d.cts.map

package/dist/react-renderer/theme/ThemeContext.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.cts","names":[],"sources":["../../../src/react-renderer/theme/ThemeContext.tsx"],"mappings":";;;;;;;;UAYiB,kBAAA;EAAkB;EAEjC,KAAA,GAAQ,KAAA,CAAM,KAAA;EAEK;EAAnB,QAAA,EAAU,SAAA;AAAA;;;;iBAMI,aAAA,CAAA;EAAgB,KAAA;EAAO;AAAA,GAAY,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAArE;;;;;iBAcgB,QAAA,CAAA,GAAY,KAAA,CAAM,KAAA;;;;;;iBAelB,gBAAA,CAAA,GAAoB,KAAA,CAAM,KAAA"}
+{"version":3,"file":"ThemeContext.d.cts","names":[],"sources":["../../../src/react-renderer/theme/ThemeContext.tsx"],"mappings":";;;;KAEK,SAAA,GAAY,MAAA;AAAA,UAKA,kBAAA;EACf,KAAA,GAAQ,SAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAAA,iBAGI,aAAA,CAAA;EAAgB,KAAA;EAAO;AAAA,GAAY,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQrD,QAAA,CAAA,GAAY,SAAA;AAAA,iBAUZ,gBAAA,CAAA,GAAoB,SAAA"}