Example library

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Serein" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #b45309, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 145" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #b45309, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$195000" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "24" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "98%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 145" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #b45309, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 145" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 245 | Paid", "Project 155 | Active", "Review 145 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #b45309, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Atlas" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #4338ca, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 146" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #4338ca, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$196250" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "25" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "70%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 146" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #4338ca, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 146" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 246 | Paid", "Project 156 | Active", "Review 146 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #4338ca, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Nocturne" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #047857, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 147" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #047857, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$197500" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "26" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "71%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 147" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #047857, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 147" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 247 | Paid", "Project 157 | Active", "Review 147 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #047857, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Cedar" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #c026d3, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 148" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #c026d3, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$198750" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "27" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "72%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 148" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #c026d3, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 148" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 248 | Paid", "Project 158 | Active", "Review 148 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #c026d3, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Forma" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #0369a1, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 149" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #0369a1, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$200000" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "28" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "73%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 149" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #0369a1, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 149" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 249 | Paid", "Project 159 | Active", "Review 149 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #0369a1, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Morrow" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #4f46e5, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 150" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #4f46e5, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$201250" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "29" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "74%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 150" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #4f46e5, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 150" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 250 | Paid", "Project 160 | Active", "Review 150 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #4f46e5, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Halcyon" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #7c3aed, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 151" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #7c3aed, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$202500" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "30" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "75%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 151" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #7c3aed, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 151" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 251 | Paid", "Project 161 | Active", "Review 151 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #7c3aed, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Orbit" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #2563eb, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 152" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #2563eb, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$203750" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "31" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "76%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 152" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #2563eb, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 152" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 252 | Paid", "Project 162 | Active", "Review 152 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #2563eb, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Monument" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #0f766e, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 153" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #0f766e, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$205000" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "32" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "77%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 153" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #0f766e, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 153" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 253 | Paid", "Project 163 | Active", "Review 153 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #0f766e, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Kindred" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #be123c, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 154" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #be123c, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$206250" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "33" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "78%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 154" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #be123c, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 154" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 254 | Paid", "Project 164 | Active", "Review 154 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #be123c, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Juniper" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #b45309, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 155" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #b45309, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$207500" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "34" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "79%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 155" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #b45309, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 155" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 255 | Paid", "Project 165 | Active", "Review 155 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #b45309, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Solace" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #4338ca, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 156" with font size 24 pixels, font weight 800.
Create button open_report displaying "View report" with background #4338ca, text color white, padding 10 pixels, border radius 8 pixels.
Create section dashboard_body containing metrics, report_modal with padding 26 pixels, gap 20 pixels.
Create container metrics containing metric_one, metric_two, metric_three with layout grid, grid columns 3, gap 16 pixels.
Create card metric_one containing metric_one_label, metric_one_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_one_label displaying "Revenue" with text color #64748b.
Create heading metric_one_value displaying "$208750" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "35" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "80%" with font size 28 pixels.
Create container report_modal containing report_dialog with position fixed, top 0 pixels, right 0 pixels, bottom 0 pixels, left 0 pixels, alignment center, distribution center, padding 24 pixels, z index 40.
Create card report_dialog containing report_title, report_copy, close_report with width fill, maximum width 540 pixels, padding 26 pixels, gap 14 pixels, background white, border radius 14 pixels.
Create heading report_title displaying "Quarterly report 156" with font size 26 pixels.
Create text report_copy displaying "Performance remains stable across the current delivery window." with text color #64748b.
Create button close_report displaying "Close" with background #4338ca, text color white, padding 10 pixels, border radius 8 pixels.
report_modal starts hidden.
When open_report is clicked, show report_modal.
When close_report is clicked, hide report_modal.
When Escape is pressed, hide report_modal.
On screens below 760 pixels, metrics grid columns is 1.
Create page records containing records_title, search, results, back_button with viewport fill, background #f8fafc, padding 28 pixels, gap 18 pixels.
Create heading records_title displaying "Records 156" with font size 30 pixels.
Create input search with placeholder "Search records".
Create state search_text with value "".
Create collection all_records with values "Invoice 256 | Paid", "Project 166 | Active", "Review 156 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #4338ca, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.