@copilotkit/a2ui-renderer 1.51.4 → 1.51.5-next.1

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

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

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

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

package/dist/react-renderer/styles/{index.js → index.mjs}

@@ -1,23 +1,25 @@
+import { resetStyles } from "./reset.mjs";
 import { Styles } from "@a2ui/lit/0.8";
-import { resetStyles } from "./reset";
+
+//#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.
- */
-export const structuralStyles = Styles.structuralStyles.replace(/:host\s*\{/g, ".a2ui-surface {");
+* 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 > *
- */
-export const componentSpecificStyles = `
+* 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)
  * ========================================================================= */
@@ -425,50 +427,31 @@ export const componentSpecificStyles = `
 }
 `;
 /**
- * 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();
- * ```
- */
-export function injectStyles() {
-    if (typeof document === "undefined") {
-        return; // SSR safety
-    }
-    const styleId = "a2ui-structural-styles";
-    // Avoid duplicate injection
-    if (document.getElementById(styleId)) {
-        return;
-    }
-    const styleElement = document.createElement("style");
-    styleElement.id = styleId;
-    // Include structural (utility classes) and component-specific styles
-    // Note: CSS variables (palette) must be defined by the host application on :root,
-    // just like in the Lit renderer. This allows full customization.
-    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.
- */
-export function removeStyles() {
-    if (typeof document === "undefined") {
-        return;
-    }
-    const styleElement = document.getElementById("a2ui-structural-styles");
-    if (styleElement) {
-        styleElement.remove();
-    }
-}
-//# sourceMappingURL=index.js.map
+* 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);
+}
+
+//#endregion
+export { injectStyles };
+//# sourceMappingURL=index.mjs.map

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

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