ARIANA\_STYLES
const ARIANA_STYLES: "\n/* Theme defaults, with zero specificity so any rule of yours (e.g. `.ar-root { --ar-primary: red }`) wins.\n A nested root (the designer's preview) inherits the outer theme. */\n:where(.ar-root:not(.ar-root .ar-root)) {\n --ar-primary: #1976d2;\n --ar-on-primary: #ffffff;\n --ar-bg: #eef1f5;\n --ar-surface: #ffffff;\n --ar-surface-2: #f5f7fa;\n --ar-input-bg: #ffffff;\n --ar-border: #dde2e8;\n --ar-text: #1f2933;\n --ar-muted: #66717d;\n --ar-danger: #c62828;\n --ar-radius: 6px;\n --ar-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --ar-font-size: 13px;\n --ar-band-color: #455a64;\n --ar-band-caption-text: #ffffff;\n --ar-primary-soft: color-mix(in srgb, var(--ar-primary) 14%, transparent);\n --ar-primary-softer: color-mix(in srgb, var(--ar-primary) 7%, transparent);\n --ar-hover: color-mix(in srgb, var(--ar-text) 7%, transparent);\n --ar-focus: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 35%, transparent);\n --ar-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.08);\n}\n.ar-root {\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n font-family: var(--ar-font);\n font-size: var(--ar-font-size);\n line-height: 1.45;\n color: var(--ar-text);\n background: var(--ar-bg);\n box-sizing: border-box;\n}\n.ar-root *, .ar-root *::before, .ar-root *::after { box-sizing: border-box; }\n.ar-root :focus-visible { outline: none; box-shadow: var(--ar-focus); }\n.ar-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n.ar-root[dir=\"rtl\"] .ar-icon-flip { transform: scaleX(-1); }\n\n/* -- toolbar ------------------------------------------------------------- */\n.ar-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n min-height: 48px;\n padding: 6px 10px;\n background: var(--ar-surface);\n border-bottom: 1px solid var(--ar-border);\n}\n.ar-toolbar-group { display: flex; align-items: center; gap: 2px; }\n.ar-toolbar-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--ar-border); }\n.ar-spacer { flex: 1; }\n\n.ar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n min-width: 32px;\n height: 32px;\n padding: 0 10px;\n border: 1px solid transparent;\n border-radius: var(--ar-radius);\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: 500;\n cursor: pointer;\n white-space: nowrap;\n transition: background-color 0.12s, border-color 0.12s, color 0.12s;\n}\n.ar-btn-icon { padding: 0; width: 32px; }\n.ar-btn-icon .ar-icon { width: 18px; height: 18px; }\n.ar-btn:hover:not(:disabled) { background: var(--ar-hover); }\n.ar-btn:disabled { opacity: 0.4; cursor: default; }\n.ar-btn[aria-pressed=\"true\"] { background: var(--ar-primary-soft); color: var(--ar-primary); }\n.ar-btn-primary, .ar-btn-primary:hover:not(:disabled) { background: var(--ar-primary); color: var(--ar-on-primary); }\n.ar-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }\n.ar-btn-outline { border-color: var(--ar-border); }\n.ar-btn-danger { color: var(--ar-danger); }\n.ar-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--ar-danger) 10%, transparent); }\n.ar-btn-sm { height: 26px; min-width: 26px; padding: 0 8px; font-size: 12px; }\n.ar-btn-sm.ar-btn-icon { width: 26px; padding: 0; }\n.ar-btn-sm .ar-icon { width: 15px; height: 15px; }\n.ar-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--ar-radius) + 2px); background: var(--ar-surface-2); border: 1px solid var(--ar-border); }\n.ar-tabs .ar-btn { height: 28px; }\n.ar-tabs .ar-btn[aria-selected=\"true\"] { background: var(--ar-surface); color: var(--ar-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }\n\n/* -- form controls ------------------------------------------------------- */\n.ar-input, .ar-select, .ar-textarea {\n height: 32px;\n padding: 0 8px;\n border: 1px solid var(--ar-border);\n border-radius: var(--ar-radius);\n background: var(--ar-input-bg);\n color: inherit;\n font: inherit;\n min-width: 0;\n width: 100%;\n transition: border-color 0.12s, box-shadow 0.12s;\n}\n.ar-input:hover, .ar-select:hover, .ar-textarea:hover { border-color: color-mix(in srgb, var(--ar-text) 35%, var(--ar-border)); }\n.ar-input:focus, .ar-select:focus, .ar-textarea:focus { outline: none; border-color: var(--ar-primary); box-shadow: var(--ar-focus); }\n.ar-toolbar .ar-input, .ar-toolbar .ar-select { width: auto; }\n.ar-textarea { height: auto; min-height: 64px; padding: 6px 8px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }\n.ar-input[aria-invalid=\"true\"], .ar-textarea[aria-invalid=\"true\"] { border-color: var(--ar-danger); }\n.ar-input-page { width: 56px !important; text-align: center; }\n.ar-input-color { width: 32px !important; height: 28px; padding: 2px; cursor: pointer; }\n.ar-root input[type=\"checkbox\"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ar-primary); cursor: pointer; }\n\n/* -- viewer -------------------------------------------------------------- */\n.ar-viewer-body { flex: 1; min-height: 0; display: flex; }\n.ar-viewer-scroll {\n flex: 1;\n min-width: 0;\n overflow: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 24px;\n gap: 20px;\n}\n.ar-page-host .ar-page, .ar-page-slot { box-shadow: var(--ar-shadow); }\n/* Report content is laid out left to right, also in right-to-left UIs. Auto margins keep wide pages scrollable. */\n.ar-page-host, .ar-pages { direction: ltr; margin: 0 auto; flex: none; }\n.ar-pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }\n.ar-pages[hidden] { display: none; }\n.ar-page-slot { flex: none; position: relative; background: #fff; }\n.ar-status { padding: 24px; color: var(--ar-muted); }\n.ar-status-error { color: var(--ar-danger); white-space: pre-wrap; }\n.ar-issues {\n width: 320px;\n overflow: auto;\n background: var(--ar-surface);\n border-inline-start: 1px solid var(--ar-border);\n}\n.ar-issues > ul { padding: 4px 8px !important; }\n.ar-issue { padding: 8px; border-radius: var(--ar-radius); margin-bottom: 4px; background: var(--ar-surface-2); }\n.ar-issue-error { color: var(--ar-danger); }\n.ar-issue code { display: block; color: var(--ar-muted); word-break: break-all; font-size: 12px; }\n.ar-error { outline: 1px dashed var(--ar-danger); outline-offset: -1px; }\n\n/* -- panels -------------------------------------------------------------- */\n.ar-designer-body { flex: 1; min-height: 0; display: flex; }\n.ar-panel {\n width: 272px;\n flex: none;\n overflow: auto;\n background: var(--ar-surface);\n border-inline-end: 1px solid var(--ar-border);\n}\n.ar-panel-right { border-inline-end: 0; border-inline-start: 1px solid var(--ar-border); width: 320px; }\n.ar-panel-header {\n position: sticky; top: 0; z-index: 2;\n display: flex; align-items: center; gap: 8px;\n min-height: 44px;\n padding: 8px 14px;\n background: var(--ar-surface);\n border-bottom: 1px solid var(--ar-border);\n font-weight: 600;\n}\nh2.ar-panel-header { margin: 0; font-size: inherit; }\n.ar-panel-header .ar-hint { font-weight: 400; margin-inline-start: auto; }\n.ar-panel-section, .ar-section { border-bottom: 1px solid var(--ar-border); }\n.ar-panel-section { padding: 10px 14px; }\n.ar-section > summary, .ar-section-summary {\n display: flex; align-items: center; gap: 6px;\n padding: 10px 14px;\n cursor: pointer;\n list-style: none;\n user-select: none;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--ar-muted);\n}\n.ar-section > summary::-webkit-details-marker { display: none; }\n.ar-section > summary:hover { color: var(--ar-text); background: var(--ar-surface-2); }\n.ar-section > summary .ar-icon { width: 14px; height: 14px; transition: transform 0.15s; transform: rotate(-90deg); }\n.ar-root[dir=\"rtl\"] .ar-section > summary .ar-icon { transform: rotate(90deg); }\n.ar-section[open] > summary .ar-icon { transform: none !important; }\n.ar-section-body { padding: 2px 14px 14px; }\n.ar-panel-title { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ar-muted); }\n.ar-subsection { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ar-border); }\n.ar-field { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }\n.ar-field > label, .ar-field > .ar-label { color: var(--ar-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }\n.ar-field-full { grid-template-columns: minmax(0, 1fr); gap: 4px; }\n.ar-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }\n.ar-field-grid > label { display: flex; flex-direction: column; gap: 3px; }\n.ar-field-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }\n.ar-field-row > .ar-input, .ar-field-row > .ar-select { flex: 1; width: auto; }\n.ar-field-control { display: flex; gap: 4px; align-items: flex-start; min-width: 0; }\n.ar-field-control > :first-child { flex: 1; min-width: 0; }\n.ar-field-control { flex-wrap: wrap; }\n.ar-field-control > .ar-field-error { flex-basis: 100%; }\n.ar-check { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 2px; cursor: pointer; }\n.ar-check label { cursor: pointer; }\n.ar-hint { font-size: 11.5px; color: var(--ar-muted); }\np.ar-hint { margin: 2px 0 10px; }\n.ar-field-error { grid-column: 1 / -1; font-size: 11.5px; color: var(--ar-danger); }\n.ar-color { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ar-color .ar-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* toolbox */\n.ar-toolbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }\n.ar-toolbox-item {\n display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;\n min-height: 60px;\n padding: 8px 6px;\n border: 1px solid var(--ar-border);\n border-radius: var(--ar-radius);\n background: var(--ar-surface);\n cursor: grab;\n font: inherit;\n font-size: 12px;\n color: inherit;\n transition: border-color 0.12s, background-color 0.12s, color 0.12s;\n}\n.ar-toolbox-item .ar-icon { width: 22px; height: 22px; color: var(--ar-muted); }\n.ar-toolbox-item:hover { border-color: var(--ar-primary); background: var(--ar-primary-softer); }\n.ar-toolbox-item:hover .ar-icon { color: var(--ar-primary); }\n.ar-toolbox-item:active { cursor: grabbing; }\n\n/* data sources and field tree */\n.ar-source { border: 1px solid var(--ar-border); border-radius: var(--ar-radius); margin-bottom: 8px; background: var(--ar-surface); overflow: hidden; }\n.ar-source > summary { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; list-style: none; background: var(--ar-surface-2); font-weight: 600; }\n.ar-source > summary::-webkit-details-marker { display: none; }\n.ar-source > summary .ar-icon { width: 16px; height: 16px; color: var(--ar-primary); }\n.ar-source-body { padding: 10px; }\n.ar-tree { list-style: none; margin: 0; padding: 0; padding-inline-start: 14px; }\n.ar-tree-root { padding-inline-start: 0; margin-top: 4px; }\n.ar-tree-item {\n display: flex; align-items: center; gap: 6px;\n padding: 4px 6px;\n border-radius: calc(var(--ar-radius) - 2px);\n cursor: grab;\n user-select: none;\n}\n.ar-tree-item .ar-icon { width: 14px; height: 14px; color: var(--ar-muted); }\n.ar-tree-item:hover { background: var(--ar-primary-softer); }\n.ar-tree-item:hover .ar-icon { color: var(--ar-primary); }\n.ar-tree-type { margin-inline-start: auto; font-size: 11px; color: var(--ar-muted); padding: 0 6px; border-radius: 999px; background: var(--ar-surface-2); }\n\n/* -- design surface ------------------------------------------------------ */\n.ar-surface-scroll { flex: 1; min-width: 0; overflow: auto; padding: 32px; }\n.ar-surface { position: relative; direction: ltr; margin: 0 auto; background: #fff; box-shadow: var(--ar-shadow); width: max-content; color: #111827; }\n.ar-margin-guide { position: absolute; pointer-events: none; z-index: 6; border: 1px dashed color-mix(in srgb, var(--ar-primary) 60%, transparent); }\n.ar-section-band { --ar-band-tint: color-mix(in srgb, var(--ar-band-color) 9%, #ffffff); }\n.ar-section-caption {\n display: flex; align-items: center; gap: 6px;\n height: 24px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--ar-band-caption-text);\n background: var(--ar-band-color);\n cursor: pointer;\n user-select: none;\n font-family: var(--ar-font);\n}\n.ar-section-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ar-section-caption[aria-selected=\"true\"] { box-shadow: inset 0 0 0 2px var(--ar-primary), inset 4px 0 0 var(--ar-primary); }\n.ar-section-caption .ar-btn { height: 18px; min-width: 18px; width: 18px; padding: 0; color: inherit; border-radius: 3px; }\n.ar-section-caption .ar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }\n.ar-section-caption .ar-icon { width: 13px; height: 13px; }\n.ar-band { position: relative; overflow: visible; touch-action: none; background-color: var(--ar-band-tint); }\n.ar-band-grid {\n background-image:\n linear-gradient(to right, rgba(0,0,0,0.055) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(0,0,0,0.055) 1px, transparent 1px);\n}\n.ar-band-drop { outline: 2px dashed var(--ar-primary); outline-offset: -2px; }\n.ar-band-resize {\n position: absolute; left: 0; right: 0; bottom: -3px; height: 6px;\n cursor: ns-resize; z-index: 3;\n}\n.ar-band-resize:hover { background: var(--ar-primary-soft); }\n.ar-band-gap {\n height: 12px;\n touch-action: none;\n cursor: crosshair;\n background: #ffffff;\n}\n.ar-component {\n position: absolute;\n overflow: visible;\n cursor: move;\n outline: 1px dashed rgba(0, 0, 0, 0.3);\n outline-offset: -1px;\n user-select: none;\n}\n/* Content is clipped to the box; handles (children of the box) stay visible outside it. */\n/* The inner body clips the content; the component box itself never clips, so handles can stick out. */\n.ar-component-body, .ar-component-label { overflow: hidden; min-height: 0; min-width: 0; max-width: 100%; max-height: 100%; }\n/* Text boxes wrap by default; wordWrap: false sets white-space: pre inline on the box. */\n.ar-component-text { white-space: pre-wrap; word-break: break-word; }\n.ar-component-image { display: flex; align-items: center; justify-content: center; color: #6b7280; background: repeating-linear-gradient(45deg, #f9fafb, #f9fafb 6px, #f3f4f6 6px, #f3f4f6 12px); }\n.ar-component-line { outline: none; }\n.ar-component[aria-selected=\"true\"] { outline: 1px solid var(--ar-primary); z-index: 2; }\n.ar-component-invalid { outline: 1px solid var(--ar-danger); }\n.ar-handle {\n position: absolute; width: 8px; height: 8px;\n background: #fff; border: 1.5px solid var(--ar-primary); border-radius: 2px;\n z-index: 4;\n}\n/* Centered on the edges: half inside, half outside the component. */\n.ar-handle-nw { left: -4px; top: -4px; cursor: nwse-resize; }\n.ar-handle-n { left: calc(50% - 4px); top: -4px; cursor: ns-resize; }\n.ar-handle-ne { right: -4px; top: -4px; cursor: nesw-resize; }\n.ar-handle-e { right: -4px; top: calc(50% - 4px); cursor: ew-resize; }\n.ar-handle-se { right: -4px; bottom: -4px; cursor: nwse-resize; }\n.ar-handle-s { left: calc(50% - 4px); bottom: -4px; cursor: ns-resize; }\n.ar-handle-sw { left: -4px; bottom: -4px; cursor: nesw-resize; }\n.ar-handle-w { left: -4px; top: calc(50% - 4px); cursor: ew-resize; }\n.ar-guide { position: absolute; pointer-events: none; z-index: 5; background: #ec4899; }\n.ar-marquee { position: absolute; pointer-events: none; z-index: 5; border: 1px solid var(--ar-primary); background: var(--ar-primary-soft); }\n\n/* -- menus and dialogs --------------------------------------------------- */\n.ar-menu { position: relative; display: inline-block; }\n.ar-menu-list {\n position: absolute; z-index: 20; top: 100%; inset-inline-start: 0;\n min-width: 180px;\n margin: 4px 0 0; padding: 4px;\n list-style: none;\n background: var(--ar-surface);\n border: 1px solid var(--ar-border);\n border-radius: var(--ar-radius);\n box-shadow: var(--ar-shadow);\n}\n.ar-menu-list .ar-btn { width: 100%; justify-content: flex-start; }\n.ar-modal-backdrop {\n position: fixed; inset: 0; z-index: 1300;\n display: flex; align-items: center; justify-content: center;\n padding: 24px;\n background: rgba(15, 23, 42, 0.45);\n}\n.ar-modal {\n display: flex; flex-direction: column;\n width: min(960px, 100%);\n height: min(640px, 100%);\n background: var(--ar-surface);\n color: var(--ar-text);\n border-radius: calc(var(--ar-radius) + 4px);\n box-shadow: 0 24px 48px rgba(15, 23, 42, 0.3);\n overflow: hidden;\n}\n.ar-modal-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ar-border); }\n.ar-modal-header h2 { margin: 0; font-size: 15px; font-weight: 600; }\n.ar-modal-body { flex: 1; min-height: 0; display: flex; }\n.ar-modal-footer { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ar-border); background: var(--ar-surface-2); }\n.ar-editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }\n.ar-editor-main .ar-textarea { flex: 1; min-height: 0; resize: none; font-size: 13px; }\n.ar-editor-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }\n.ar-editor-side { width: 260px; flex: none; overflow: auto; border-inline-start: 1px solid var(--ar-border); background: var(--ar-surface-2); padding: 12px; }\n.ar-editor-side input.ar-input { margin-bottom: 8px; }\n.ar-editor-list { list-style: none; margin: 0 0 12px; padding: 0; }\n.ar-editor-list button {\n display: block; width: 100%; text-align: start;\n padding: 4px 8px; border: 0; border-radius: calc(var(--ar-radius) - 2px);\n background: transparent; color: inherit; cursor: pointer;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.ar-editor-list button:hover, .ar-editor-list button:focus-visible { background: var(--ar-primary-soft); color: var(--ar-primary); }\n\n.ar-visually-hidden {\n position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;\n overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;\n}\n@media print {\n .ar-toolbar, .ar-issues { display: none !important; }\n}\n";Default stylesheet for the viewer and designer UIs. React and Vue components use the same class names, so both look the same.
Theming: every color, the corner radius and the font come from CSS custom
properties on .ar-root (see ArianaTheme / themeVars()), so the UI
can follow your application theme (e.g. themeFromMui(theme)) without
overriding individual rules.