class UI::Web::Renderer

Overview

Renders a UI view tree to HTML using the Components::Elements system.

The renderer walks the view tree via the visitor pattern and produces an equivalent DOM tree built from Components::Elements classes. Call #render on a view to get the final HTML string.

Example: label = UI::Label.new("Hello") renderer = UI::Web::Renderer.new label.accept(renderer) renderer.output # => "<span style="font-size: 17.0px; color: rgba(0, 0, 0, 1.0); text-align: left">Hello"

Defined in:

ui/renderers/web_renderer.cr

Constant Summary

ACTION_SHEET_FALLBACK_CSS = ".ap-action-sheet { position: fixed; inset: 0; z-index: 1000; display: none; }\n.ap-action-sheet[data-presented=\"true\"] { display: block; }\n.ap-action-sheet__backdrop {\n position: absolute; inset: 0;\n background: oklch(0.18 0.02 248 / 0.42);\n}\n.ap-action-sheet__panel {\n position: absolute; left: 0; right: 0; bottom: 0;\n background: var(--ap-color-surface-panel);\n color: var(--ap-color-text-primary);\n border-radius: var(--ap-radius-panel) var(--ap-radius-panel) 0 0;\n padding: 12px 16px env(safe-area-inset-bottom);\n box-shadow: var(--ap-elevation-overlay);\n transform: translateY(0);\n transition: transform var(--ap-motion-duration-base) var(--ap-motion-ease-standard);\n outline: none;\n max-height: 80vh;\n overflow-y: auto;\n}\n.ap-action-sheet[data-presented=\"false\"] .ap-action-sheet__panel {\n transform: translateY(100%);\n}\n.ap-action-sheet__handle {\n width: 36px; height: 5px;\n background: var(--ap-color-border-default);\n border-radius: var(--ap-radius-pill);\n margin: 0 auto 12px;\n}\n@media (min-width: 768px) {\n .ap-action-sheet__panel {\n left: 50%; right: auto; bottom: 50%;\n transform: translate(-50%, 50%);\n max-width: 420px; width: 90vw;\n border-radius: var(--ap-radius-panel);\n }\n .ap-action-sheet[data-presented=\"false\"] .ap-action-sheet__panel {\n transform: translate(-50%, 50%) scale(0.96);\n opacity: 0;\n }\n .ap-action-sheet__handle { display: none; }\n}\n.ap-action-sheet__title { font-size: 17px; font-weight: 600; text-align: center; margin: 0 0 4px; }\n.ap-action-sheet__message { font-size: 13px; color: var(--ap-color-text-secondary); text-align: center; margin: 0 0 16px; }\n.ap-action-sheet__actions { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }\n.ap-action-sheet__action {\n width: 100%;\n padding: 12px 16px;\n border: none; border-radius: var(--ap-radius-control);\n background: var(--ap-color-surface-sunken);\n /* Phase 4 R2: brand-accent on surface-sunken measured 1.92:1 in\n * light mode (WCAG-AA fails 4.5:1 for 17px normal text). The\n * cancel action inherits this color over surface-panel (#fff),\n * measured 2.27:1. Swapping to brand-primary lifts both surfaces\n * to >= 5.05:1 (sunken) and >= 5.78:1 (panel) in light mode and\n * >= 8.72:1 in dark mode, while preserving the \"interactive CTA\"\n * semantic affordance. */\n color: var(--ap-color-brand-primary);\n font-size: 17px;\n cursor: pointer;\n min-height: 44px;\n}\n.ap-action-sheet__action:focus-visible {\n outline: 2px solid var(--ap-color-focus-ring);\n outline-offset: 2px;\n}\n.ap-action-sheet__action--destructive { color: var(--ap-color-danger-text); }\n.ap-action-sheet__action--cancel {\n background: var(--ap-color-surface-panel);\n font-weight: 600;\n margin-top: 4px;\n border: 1px solid var(--ap-color-border-default);\n}"
ACTION_SHEET_FALLBACK_JS = {{ read_file("/srv/crystaldoc.info/github-amberframework-asset_pipeline-v0.36.0/src/ui/renderers/../web/action_sheet_fallback.js") }}

Vanilla-JS bottom-sheet behavior. Source lives at src/ui/web/action_sheet_fallback.js and is inlined into the renderer binary at compile time so the rendered HTML is self-sufficient (no external