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 "Monument" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #0f766e, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 13" 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 "$30000" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "32" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "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 13" 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 13" 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 113 | Paid", "Project 23 | Active", "Review 13 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #0f766e, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Kindred" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #be123c, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 14" 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 "$31250" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "33" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "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 14" 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 14" 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 114 | Paid", "Project 24 | Active", "Review 14 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #be123c, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Juniper" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #b45309, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 15" 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 "$32500" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "34" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "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 15" 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 15" 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 115 | Paid", "Project 25 | Active", "Review 15 | Pending".
Create filtered collection matching_records from all_records containing state search_text.
Create sorted collection sorted_records from matching_records ascending.
Create container results with gap 10 pixels.
Render collection sorted_records inside results as text items.
When search changes, set search_text from its value.
Create button back_button displaying "Back to dashboard" with background #b45309, text color white, padding 10 pixels.
When back_button is clicked, navigate to dashboard.

Create page dashboard containing sidebar, workspace with viewport fill, direction horizontal, background #f8fafc, text color #0f172a.
Create navigation sidebar containing brand, overview_button, records_button with width 228 pixels, padding 22 pixels, gap 12 pixels, background #0f172a.
Create heading brand displaying "Solace" with font size 20 pixels, font weight 800, text color white.
Create button overview_button displaying "Overview" with background #4338ca, text color white, padding 11 pixels, text alignment left.
Create button records_button displaying "Records" with background transparent, text color white, padding 11 pixels, text alignment left.
When records_button is clicked, navigate to records.
Create container workspace containing topbar, dashboard_body with width fill, minimum width 0 pixels.
Create container topbar containing dashboard_title, open_report with direction horizontal, distribution between, alignment center, padding 18 pixels, background white.
Create heading dashboard_title displaying "Operations dashboard 16" 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 "$33750" with font size 28 pixels.
Create card metric_two containing metric_two_label, metric_two_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_two_label displaying "Open work" with text color #64748b.
Create heading metric_two_value displaying "35" with font size 28 pixels.
Create card metric_three containing metric_three_label, metric_three_value with padding 20 pixels, gap 8 pixels, background white, border radius 12 pixels.
Create text metric_three_label displaying "Completion" with text color #64748b.
Create heading metric_three_value displaying "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 16" 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 16" 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 116 | Paid", "Project 26 | Active", "Review 16 | 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 "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 17" 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 "$35000" 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 "36" 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 17" 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 17" 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 117 | Paid", "Project 27 | Active", "Review 17 | 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 18" 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 "$36250" 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 "37" 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 18" 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 18" 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 118 | Paid", "Project 28 | Active", "Review 18 | 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 19" 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 "$37500" 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 "38" 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 19" 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 19" 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 119 | Paid", "Project 29 | Active", "Review 19 | 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 20" 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 "$38750" 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 "39" 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 20" 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 20" 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 120 | Paid", "Project 30 | Active", "Review 20 | 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 21" 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 "$40000" 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 "40" 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 21" 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 21" 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 121 | Paid", "Project 31 | Active", "Review 21 | 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 22" 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 "$41250" 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 "41" 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 "91%" 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 22" 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 22" 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 122 | Paid", "Project 32 | Active", "Review 22 | 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 23" 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 "$42500" 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 "42" 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 "92%" 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 23" 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 23" 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 123 | Paid", "Project 33 | Active", "Review 23 | 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 24" 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 "$43750" 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 "43" 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 "93%" 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 24" 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 24" 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 124 | Paid", "Project 34 | Active", "Review 24 | 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.