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 "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 1" 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 "$15000" 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 "20" 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 1" 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 1" 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 101 | Paid", "Project 11 | Active", "Review 1 | 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 2" 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 "$16250" 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 "21" 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 2" 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 2" 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 102 | Paid", "Project 12 | Active", "Review 2 | 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 3" 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 "$17500" 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 "22" 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 3" 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 3" 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 103 | Paid", "Project 13 | Active", "Review 3 | 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 4" 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 "$18750" 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 "23" 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 4" 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 4" 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 104 | Paid", "Project 14 | Active", "Review 4 | 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 5" 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 "$20000" 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 "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 5" 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 5" 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 105 | Paid", "Project 15 | Active", "Review 5 | 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 6" 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 "$21250" 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 "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 6" 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 6" 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 106 | Paid", "Project 16 | Active", "Review 6 | 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 7" 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 "$22500" 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 "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 7" 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 7" 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 107 | Paid", "Project 17 | Active", "Review 7 | 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 8" 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 "$23750" 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 "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 8" 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 8" 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 108 | Paid", "Project 18 | Active", "Review 8 | 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 9" 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 "$25000" 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 "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 9" 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 9" 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 109 | Paid", "Project 19 | Active", "Review 9 | 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 10" 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 "$26250" 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 "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 10" 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 10" 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 110 | Paid", "Project 20 | Active", "Review 10 | 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 11" 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 "$27500" 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 "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 11" 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 11" 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 111 | Paid", "Project 21 | Active", "Review 11 | 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 12" 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 "$28750" 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 "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 12" 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 12" 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 112 | Paid", "Project 22 | Active", "Review 12 | 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.