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 "Arc" 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 97" 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 "$135000" 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 "46" 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 97" 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 97" 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 197 | Paid", "Project 107 | Active", "Review 97 | 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 "Vesper" 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 98" 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 "$136250" 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 "47" 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 98" 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 98" 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 198 | Paid", "Project 108 | Active", "Review 98 | 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 "Fieldwork" 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 99" 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 "$137500" 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 "48" 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 "81%" 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 99" 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 99" 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 199 | Paid", "Project 109 | Active", "Review 99 | 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 "Ember" 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 100" 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 "$138750" 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 "49" 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 "82%" 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 100" 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 100" 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 200 | Paid", "Project 110 | Active", "Review 100 | 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 "Aurelia" 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 101" 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 "$140000" 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 "50" 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 "83%" 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 101" 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 101" 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 201 | Paid", "Project 111 | Active", "Review 101 | 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 "Northstar" 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 102" 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 "$141250" 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 "51" 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 "84%" 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 102" 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 102" 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 202 | Paid", "Project 112 | Active", "Review 102 | 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 "Velvet House" 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 103" 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 "$142500" 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 "52" 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 "85%" 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 103" 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 103" 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 203 | Paid", "Project 113 | Active", "Review 103 | 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 "Luma" 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 104" 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 "$143750" 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 "53" 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 "86%" 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 104" 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 104" 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 204 | Paid", "Project 114 | Active", "Review 104 | 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 "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 105" 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 "$145000" 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 "54" 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 "87%" 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 105" 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 105" 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 205 | Paid", "Project 115 | Active", "Review 105 | 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 106" 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 "$146250" 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 "55" 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 "88%" 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 106" 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 106" 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 206 | Paid", "Project 116 | Active", "Review 106 | 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 107" 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 "$147500" 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 "56" 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 "89%" 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 107" 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 107" 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 207 | Paid", "Project 117 | Active", "Review 107 | 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 108" 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 "$148750" 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 "57" 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 "90%" 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 108" 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 108" 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 208 | Paid", "Project 118 | Active", "Review 108 | 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.