@copilotkit/a2ui-renderer 1.53.0 → 1.53.1-next.0

package/dist/react-renderer/registry/ComponentRegistry.d.cts

@@ -0,0 +1,82 @@
+import { A2UIComponentProps, ComponentRegistration } from "../types.cjs";
+import { ComponentType } from "react";
+import { Types } from "@a2ui/lit/0.8";
+
+//#region src/react-renderer/registry/ComponentRegistry.d.ts
+/**
+ * Registry for A2UI components. Allows registration of custom components
+ * and supports lazy loading for code splitting.
+ *
+ * @example
+ * ```tsx
+ * const registry = new ComponentRegistry();
+ *
+ * // Register a component directly
+ * registry.register('Text', { component: Text });
+ *
+ * // Register with lazy loading
+ * registry.register('Modal', {
+ *   component: () => import('./components/Modal'),
+ *   lazy: true
+ * });
+ *
+ * // Use with A2UIRenderer
+ * <A2UIRenderer surfaceId="main" registry={registry} />
+ * ```
+ */
+declare class ComponentRegistry {
+  private static _instance;
+  private registry;
+  private lazyCache;
+  /**
+   * Get the singleton instance of the registry.
+   * Use this for the default global registry.
+   */
+  static getInstance(): ComponentRegistry;
+  /**
+   * Reset the singleton instance.
+   * Useful for testing.
+   */
+  static resetInstance(): void;
+  /**
+   * Register a component type.
+   *
+   * @param type - The A2UI component type name (e.g., 'Text', 'Button')
+   * @param registration - The component registration
+   */
+  register<T extends Types.AnyComponentNode>(type: string, registration: ComponentRegistration<T>): void;
+  /**
+   * Unregister a component type.
+   *
+   * @param type - The component type to unregister
+   */
+  unregister(type: string): void;
+  /**
+   * Check if a component type is registered.
+   *
+   * @param type - The component type to check
+   * @returns True if the component is registered
+   */
+  has(type: string): boolean;
+  /**
+   * Get a component by type. If the component is registered with lazy loading,
+   * returns a React.lazy wrapped component.
+   *
+   * @param type - The component type to get
+   * @returns The React component, or null if not found
+   */
+  get(type: string): ComponentType<A2UIComponentProps> | null;
+  /**
+   * Get all registered component types.
+   *
+   * @returns Array of registered type names
+   */
+  getRegisteredTypes(): string[];
+  /**
+   * Clear all registrations.
+   */
+  clear(): void;
+}
+//#endregion
+export { ComponentRegistry };
+//# sourceMappingURL=ComponentRegistry.d.cts.map

package/dist/react-renderer/registry/ComponentRegistry.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRegistry.d.cts","names":[],"sources":["../../../src/react-renderer/registry/ComponentRegistry.ts"],"mappings":";;;;;;;AA6BA;;;;;;;;;;;;;;;;;;;cAAa,iBAAA;EAAA,eACI,SAAA;EAAA,QACP,QAAA;EAAA,QACA,SAAA;EA6B8B;;;;EAAA,OAvB/B,WAAA,CAAA,GAAe,iBAAA;EA4ClB;;;;EAAA,OAjCG,aAAA,CAAA;EAoEP;;;;;;EA1DA,QAAA,WAAmB,KAAA,CAAM,gBAAA,CAAA,CACvB,IAAA,UACA,YAAA,EAAc,qBAAA,CAAsB,CAAA;;;;;;EAUtC,UAAA,CAAW,IAAA;;;;;;;EAWX,GAAA,CAAI,IAAA;;;;;;;;EAWJ,GAAA,CAAI,IAAA,WAAe,aAAA,CAAc,kBAAA;;;;;;EAwBjC,kBAAA,CAAA;;;;EAOA,KAAA,CAAA;AAAA"}

package/dist/react-renderer/registry/ComponentRegistry.d.mts

@@ -0,0 +1,82 @@
+import { A2UIComponentProps, ComponentRegistration } from "../types.mjs";
+import { ComponentType } from "react";
+import { Types } from "@a2ui/lit/0.8";
+
+//#region src/react-renderer/registry/ComponentRegistry.d.ts
+/**
+ * Registry for A2UI components. Allows registration of custom components
+ * and supports lazy loading for code splitting.
+ *
+ * @example
+ * ```tsx
+ * const registry = new ComponentRegistry();
+ *
+ * // Register a component directly
+ * registry.register('Text', { component: Text });
+ *
+ * // Register with lazy loading
+ * registry.register('Modal', {
+ *   component: () => import('./components/Modal'),
+ *   lazy: true
+ * });
+ *
+ * // Use with A2UIRenderer
+ * <A2UIRenderer surfaceId="main" registry={registry} />
+ * ```
+ */
+declare class ComponentRegistry {
+  private static _instance;
+  private registry;
+  private lazyCache;
+  /**
+   * Get the singleton instance of the registry.
+   * Use this for the default global registry.
+   */
+  static getInstance(): ComponentRegistry;
+  /**
+   * Reset the singleton instance.
+   * Useful for testing.
+   */
+  static resetInstance(): void;
+  /**
+   * Register a component type.
+   *
+   * @param type - The A2UI component type name (e.g., 'Text', 'Button')
+   * @param registration - The component registration
+   */
+  register<T extends Types.AnyComponentNode>(type: string, registration: ComponentRegistration<T>): void;
+  /**
+   * Unregister a component type.
+   *
+   * @param type - The component type to unregister
+   */
+  unregister(type: string): void;
+  /**
+   * Check if a component type is registered.
+   *
+   * @param type - The component type to check
+   * @returns True if the component is registered
+   */
+  has(type: string): boolean;
+  /**
+   * Get a component by type. If the component is registered with lazy loading,
+   * returns a React.lazy wrapped component.
+   *
+   * @param type - The component type to get
+   * @returns The React component, or null if not found
+   */
+  get(type: string): ComponentType<A2UIComponentProps> | null;
+  /**
+   * Get all registered component types.
+   *
+   * @returns Array of registered type names
+   */
+  getRegisteredTypes(): string[];
+  /**
+   * Clear all registrations.
+   */
+  clear(): void;
+}
+//#endregion
+export { ComponentRegistry };
+//# sourceMappingURL=ComponentRegistry.d.mts.map

package/dist/react-renderer/registry/ComponentRegistry.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRegistry.d.mts","names":[],"sources":["../../../src/react-renderer/registry/ComponentRegistry.ts"],"mappings":";;;;;;;AA6BA;;;;;;;;;;;;;;;;;;;cAAa,iBAAA;EAAA,eACI,SAAA;EAAA,QACP,QAAA;EAAA,QACA,SAAA;EA6B8B;;;;EAAA,OAvB/B,WAAA,CAAA,GAAe,iBAAA;EA4ClB;;;;EAAA,OAjCG,aAAA,CAAA;EAoEP;;;;;;EA1DA,QAAA,WAAmB,KAAA,CAAM,gBAAA,CAAA,CACvB,IAAA,UACA,YAAA,EAAc,qBAAA,CAAsB,CAAA;;;;;;EAUtC,UAAA,CAAW,IAAA;;;;;;;EAWX,GAAA,CAAI,IAAA;;;;;;;;EAWJ,GAAA,CAAI,IAAA,WAAe,aAAA,CAAc,kBAAA;;;;;;EAwBjC,kBAAA,CAAA;;;;EAOA,KAAA,CAAA;AAAA"}

package/dist/react-renderer/registry/defaultCatalog.cjs

@@ -54,4 +54,5 @@ function initializeDefaultCatalog() {
 
 //#endregion
 exports.initializeDefaultCatalog = initializeDefaultCatalog;
+exports.registerDefaultCatalog = registerDefaultCatalog;
 //# sourceMappingURL=defaultCatalog.cjs.map

package/dist/react-renderer/registry/defaultCatalog.d.cts

@@ -0,0 +1,17 @@
+import { ComponentRegistry } from "./ComponentRegistry.cjs";
+
+//#region src/react-renderer/registry/defaultCatalog.d.ts
+/**
+ * Registers all standard A2UI components in the registry.
+ *
+ * @param registry - The component registry to populate
+ */
+declare function registerDefaultCatalog(registry: ComponentRegistry): void;
+/**
+ * Initialize the default catalog in the singleton registry.
+ * Call this once at app startup.
+ */
+declare function initializeDefaultCatalog(): void;
+//#endregion
+export { initializeDefaultCatalog, registerDefaultCatalog };
+//# sourceMappingURL=defaultCatalog.d.cts.map

package/dist/react-renderer/registry/defaultCatalog.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultCatalog.d.cts","names":[],"sources":["../../../src/react-renderer/registry/defaultCatalog.ts"],"mappings":";;;;;AA+BA;;;iBAAgB,sBAAA,CAAuB,QAAA,EAAU,iBAAA;;AAgCjD;;;iBAAgB,wBAAA,CAAA"}

package/dist/react-renderer/registry/defaultCatalog.d.mts

@@ -0,0 +1,17 @@
+import { ComponentRegistry } from "./ComponentRegistry.mjs";
+
+//#region src/react-renderer/registry/defaultCatalog.d.ts
+/**
+ * Registers all standard A2UI components in the registry.
+ *
+ * @param registry - The component registry to populate
+ */
+declare function registerDefaultCatalog(registry: ComponentRegistry): void;
+/**
+ * Initialize the default catalog in the singleton registry.
+ * Call this once at app startup.
+ */
+declare function initializeDefaultCatalog(): void;
+//#endregion
+export { initializeDefaultCatalog, registerDefaultCatalog };
+//# sourceMappingURL=defaultCatalog.d.mts.map

package/dist/react-renderer/registry/defaultCatalog.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultCatalog.d.mts","names":[],"sources":["../../../src/react-renderer/registry/defaultCatalog.ts"],"mappings":";;;;;AA+BA;;;iBAAgB,sBAAA,CAAuB,QAAA,EAAU,iBAAA;;AAgCjD;;;iBAAgB,wBAAA,CAAA"}

package/dist/react-renderer/registry/defaultCatalog.mjs

@@ -53,5 +53,5 @@ function initializeDefaultCatalog() {
 }
 
 //#endregion
-export { initializeDefaultCatalog };
+export { initializeDefaultCatalog, registerDefaultCatalog };
 //# sourceMappingURL=defaultCatalog.mjs.map

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

@@ -452,7 +452,17 @@ function injectStyles() {
 	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();
+}
 
 //#endregion
 exports.injectStyles = injectStyles;
+exports.removeStyles = removeStyles;
 //# sourceMappingURL=index.cjs.map

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"}
+{"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"}

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

@@ -0,0 +1,14 @@
+//#region src/react-renderer/styles/index.d.ts
+/**
+ * Injects A2UI structural styles into the document head.
+ * Includes utility classes and React-specific overrides.
+ * CSS variables (palette) must be defined by the host on :root.
+ */
+declare function injectStyles(): void;
+/**
+ * Removes the injected A2UI structural styles from the document.
+ */
+declare function removeStyles(): void;
+//#endregion
+export { injectStyles, removeStyles };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":["structuralStyles","componentSpecificStyles","injectStyles","removeStyles"],"sources":["../../../src/react-renderer/styles/index.d.ts"],"mappings":";;;;;;iBAiBwBE,YAAAA,CAAAA;;;;iBAKAC,YAAAA,CAAAA"}

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

@@ -0,0 +1,26 @@
+//#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();
+ * ```
+ */
+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 };
+//# sourceMappingURL=index.d.mts.map

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

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

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

@@ -451,7 +451,16 @@ function injectStyles() {
 	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.
+*/
+function removeStyles() {
+	if (typeof document === "undefined") return;
+	const styleElement = document.getElementById("a2ui-structural-styles");
+	if (styleElement) styleElement.remove();
+}
 
 //#endregion
-export { injectStyles };
+export { injectStyles, removeStyles };
 //# sourceMappingURL=index.mjs.map

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"}
+{"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"}

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

@@ -28,8 +28,17 @@ function useTheme() {
 	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);
+}
 
 //#endregion
 exports.ThemeProvider = ThemeProvider;
 exports.useTheme = useTheme;
+exports.useThemeOptional = useThemeOptional;
 //# sourceMappingURL=ThemeContext.cjs.map

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"}
+{"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"}

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

@@ -0,0 +1,37 @@
+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.
+ */
+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 */
+  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;
+//#endregion
+export { ThemeProvider, useTheme, useThemeOptional };
+//# sourceMappingURL=ThemeContext.d.cts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react-renderer/theme/ThemeContext.d.ts
+/**
+ * Props for the ThemeProvider component.
+ */
+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 */
+  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;
+//#endregion
+export { ThemeProvider, useTheme, useThemeOptional };
+//# sourceMappingURL=ThemeContext.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.mts","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"}

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

@@ -27,7 +27,15 @@ function useTheme() {
 	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 useContext(ThemeContext);
+}
 
 //#endregion
-export { ThemeProvider, useTheme };
+export { ThemeProvider, useTheme, useThemeOptional };
 //# sourceMappingURL=ThemeContext.mjs.map