LANGUAGE V1 · FROZEN REFERENCE

Complete v1 course

Laygent Language v1.0.0: Complete Course and Reference

Frozen MVP specification. Incompatible grammar changes require a new version.

Laygent is controlled English compiled deterministically into React + TypeScript or HTML + CSS + JavaScript, with optional Supabase schema, Auth, Storage, Edge Functions, GitHub source, and Vercel deployment.

Study protocol

1. Read modules in order.
2. Type examples instead of pasting them.
3. Compile after every small group of sentences.
4. Treat the compiler error and dictionary as authoritative.
5. Complete every exercise and one library adaptation.

Non-negotiable syntax

• One sentence per line and a period at the end.
• Identifiers begin with a letter and contain only letters, numbers, and underscores.
• Declare every identifier once before behavior references it.
• Every non-page element belongs to exactly one page tree.
• Put layout on containers and visible content in quoted text.
• Unsupported English is rejected rather than guessed.

Machine dictionary

The exhaustive compiler reference is grammar-reference.txt. Structured vocabulary and sentence templates are in dictionary.json.

Module 1: Foundations

Scope: line grammar, punctuation, identifiers, errors.

Objectives

• Explain line grammar, punctuation, identifiers, errors in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page home containing navigation, hero, collection with viewport fill, background #0b0b0d, text color white.
Create navigation navigation containing wordmark, catalogue_link with direction horizontal, distribution between, alignment center, padding 28 pixels.
Create heading wordmark displaying "AURELIA" with font size 18 pixels, font weight 800, letter spacing 3 pixels.
Create link catalogue_link displaying "Private collection 1" with destination "#collection", text color white.
Create section hero containing eyebrow, title, introduction, action with minimum height 620 pixels, padding 40 pixels, distribution center, gap 18 pixels.
Create text eyebrow displaying "EDITION 001" with text color #7c3aed, font size 12 pixels, letter spacing 2 pixels.
Create heading title displaying "Objects for enduring rituals" with font size 48 pixels, font weight 800, maximum width 760 pixels, line height 1.1.
Create text introduction displaying "A considered series shaped by material, restraint, and craft." with font size 18 pixels, maximum width 620 pixels, line height 1.5.
Create button action displaying "Request catalogue" with background #7c3aed, text color white, padding 14 pixels, width content.
Create section collection containing collection_title, collection_grid with padding 40 pixels, gap 24 pixels, background #141418.
Create heading collection_title displaying "Collection 1" with font size 32 pixels, font weight 700.
Create container collection_grid containing object_one, object_two, object_three with layout grid, grid columns 3, gap 20 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 2: Pages and trees

Scope: roots, containment, ownership, semantic structure.

Objectives

• Explain roots, containment, ownership, semantic structure in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page home containing navigation, hero, collection with viewport fill, background #0b0b0d, text color white.
Create navigation navigation containing wordmark, catalogue_link with direction horizontal, distribution between, alignment center, padding 28 pixels.
Create heading wordmark displaying "LUMA" with font size 18 pixels, font weight 800, letter spacing 3 pixels.
Create link catalogue_link displaying "Private collection 104" with destination "#collection", text color white.
Create section hero containing eyebrow, title, introduction, action with minimum height 620 pixels, padding 64 pixels, distribution center, gap 18 pixels.
Create text eyebrow displaying "EDITION 104" with text color #be123c, font size 12 pixels, letter spacing 2 pixels.
Create heading title displaying "Objects for enduring rituals" with font size 60 pixels, font weight 800, maximum width 760 pixels, line height 1.1.
Create text introduction displaying "A considered series shaped by material, restraint, and craft." with font size 18 pixels, maximum width 620 pixels, line height 1.5.
Create button action displaying "Request catalogue" with background #be123c, text color white, padding 14 pixels, width content.
Create section collection containing collection_title, collection_grid with padding 40 pixels, gap 24 pixels, background #141418.
Create heading collection_title displaying "Collection 104" with font size 32 pixels, font weight 700.
Create container collection_grid containing object_one, object_two, object_three with layout grid, grid columns 3, gap 20 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 3: Typography

Scope: hierarchy, alignment, weight, rhythm, readable measure.

Objectives

• Explain hierarchy, alignment, weight, rhythm, readable measure in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page home containing header, hero, feature_grid, pricing, footer with viewport fill, background white, text color #0f172a.
Create navigation header containing logo, header_action with direction horizontal, alignment center, distribution between, padding 22 pixels, border 1 pixels #e2e8f0.
Create heading logo displaying "Nocturne" with font size 22 pixels, font weight 800, text color #047857.
Create button header_action displaying "Start free" with background #047857, text color white, padding 11 pixels, border radius 9 pixels.
Create section hero containing hero_badge, hero_title, hero_copy, hero_action with alignment center, padding 64 pixels, gap 18 pixels, background #ecfdf5.
Create text hero_badge displaying "WORKFLOW 7" with text color #047857, font weight 700.
Create heading hero_title displaying "Move important work forward" with font size 52 pixels, font weight 800, text alignment center, maximum width 820 pixels.
Create text hero_copy displaying "Plan, review, and deliver from one focused workspace." with font size 18 pixels, text alignment center.
Create button hero_action displaying "Create workspace" with background #047857, text color white, padding 14 pixels, border radius 10 pixels.
Create container feature_grid containing feature_one, feature_two, feature_three with layout grid, grid columns 3, gap 18 pixels, padding 48 pixels.
Create card feature_one containing feature_one_title, feature_one_copy with padding 22 pixels, gap 8 pixels, background white, border 1 pixels #e2e8f0, border radius 12 pixels.
Create heading feature_one_title displaying "Clear ownership" with font size 19 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 4: Color and surfaces

Scope: palettes, borders, gradients, shadows, contrast.

Objectives

• Explain palettes, borders, gradients, shadows, contrast in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page home containing header, hero, feature_grid, pricing, footer with viewport fill, background white, text color #0f172a.
Create navigation header containing logo, header_action with direction horizontal, alignment center, distribution between, padding 22 pixels, border 1 pixels #e2e8f0.
Create heading logo displaying "Morrow" with font size 22 pixels, font weight 800, text color #4f46e5.
Create button header_action displaying "Start free" with background #4f46e5, text color white, padding 11 pixels, border radius 9 pixels.
Create section hero containing hero_badge, hero_title, hero_copy, hero_action with alignment center, padding 64 pixels, gap 18 pixels, background #f5f3ff.
Create text hero_badge displaying "WORKFLOW 110" with text color #4f46e5, font weight 700.
Create heading hero_title displaying "Move important work forward" with font size 52 pixels, font weight 800, text alignment center, maximum width 820 pixels.
Create text hero_copy displaying "Plan, review, and deliver from one focused workspace." with font size 18 pixels, text alignment center.
Create button hero_action displaying "Create workspace" with background #4f46e5, text color white, padding 14 pixels, border radius 10 pixels.
Create container feature_grid containing feature_one, feature_two, feature_three with layout grid, grid columns 3, gap 18 pixels, padding 48 pixels.
Create card feature_one containing feature_one_title, feature_one_copy with padding 22 pixels, gap 8 pixels, background white, border 1 pixels #e2e8f0, border radius 12 pixels.
Create heading feature_one_title displaying "Clear ownership" with font size 19 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 5: Flex and grid

Scope: rows, stacks, alignment, distribution, wrapping, grids.

Objectives

• Explain rows, stacks, alignment, distribution, wrapping, grids in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page portfolio containing masthead, introduction, work_grid, about with viewport fill, background #fafaf9, text color #1c1917, padding 32 pixels, gap 34 pixels.
Create navigation masthead containing name, index_link with direction horizontal, distribution between, alignment center.
Create heading name displaying "Monument Studio" with font size 20 pixels, font weight 800.
Create link index_link displaying "Index 013" with destination "#work", text color #57534e.
Create section introduction containing discipline, statement with gap 12 pixels, maximum width 920 pixels.
Create text discipline displaying "ART DIRECTION / DIGITAL / OBJECTS" with font size 12 pixels, letter spacing 2 pixels.
Create heading statement displaying "We build identities and spaces with clarity, character, and cultural weight." with font size 42 pixels, line height 1.1.
Create container work_grid containing project_one, project_two, project_three, project_four with layout grid, grid columns 2, gap 18 pixels.
Create card project_one containing project_one_number, project_one_title with background #f0fdfa, padding 28 pixels, minimum height 220 pixels, distribution between.
Create text project_one_number displaying "01" with text color #78716c.
Create heading project_one_title displaying "Material study 13" with font size 26 pixels.
Create card project_two containing project_two_number, project_two_title with background #e7e5e4, padding 28 pixels, minimum height 220 pixels, distribution between.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 6: Sizing and positioning

Scope: fill, content, exact sizes, bounds, offsets, overlays.

Objectives

• Explain fill, content, exact sizes, bounds, offsets, overlays in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page portfolio containing masthead, introduction, work_grid, about with viewport fill, background #fafaf9, text color #1c1917, padding 32 pixels, gap 34 pixels.
Create navigation masthead containing name, index_link with direction horizontal, distribution between, alignment center.
Create heading name displaying "Solace Studio" with font size 20 pixels, font weight 800.
Create link index_link displaying "Index 116" with destination "#work", text color #57534e.
Create section introduction containing discipline, statement with gap 12 pixels, maximum width 920 pixels.
Create text discipline displaying "ART DIRECTION / DIGITAL / OBJECTS" with font size 12 pixels, letter spacing 2 pixels.
Create heading statement displaying "We build identities and spaces with clarity, character, and cultural weight." with font size 46 pixels, line height 1.1.
Create container work_grid containing project_one, project_two, project_three, project_four with layout grid, grid columns 2, gap 18 pixels.
Create card project_one containing project_one_number, project_one_title with background #eef2ff, padding 28 pixels, minimum height 220 pixels, distribution between.
Create text project_one_number displaying "01" with text color #78716c.
Create heading project_one_title displaying "Material study 116" with font size 26 pixels.
Create card project_two containing project_two_number, project_two_title with background #e7e5e4, padding 28 pixels, minimum height 220 pixels, distribution between.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 7: Forms

Scope: labels, input types, validation, selects, textareas, submit behavior.

Objectives

• Explain labels, input types, validation, selects, textareas, submit behavior in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

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.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 8: State

Scope: values, bindings, counters, input state, conditions.

Objectives

• Explain values, bindings, counters, input state, conditions in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

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 122" 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.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 9: Interactions and modals

Scope: show, hide, toggle, focus, Escape, dialogs.

Objectives

• Explain show, hide, toggle, focus, Escape, dialogs in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page shop containing header, product_grid, cart_bar with viewport fill, background #f8fafc, padding 26 pixels, gap 22 pixels.
Create container header containing shop_title, shop_copy with gap 8 pixels.
Create heading shop_title displaying "Serein Market 25" with font size 34 pixels, font weight 800.
Create text shop_copy displaying "Objects selected for useful, beautiful everyday living." with text color #64748b.
Create container product_grid containing product_one, product_two, product_three with layout grid, grid columns 3, gap 18 pixels.
Create card product_one containing product_one_name, product_one_price, add_one with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_one_name displaying "Studio chair" with font size 20 pixels.
Create text product_one_price displaying "$42" with text color #b45309, font weight 700.
Create button add_one displaying "Add to cart" with background #b45309, text color white, padding 10 pixels, border radius 8 pixels.
Create card product_two containing product_two_name, product_two_price, add_two with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_two_name displaying "Ceramic lamp" with font size 20 pixels.
Create text product_two_price displaying "$52" with text color #b45309, font weight 700.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 10: Collections

Scope: rendering, filtering, sorting, searching, repeated content.

Objectives

• Explain rendering, filtering, sorting, searching, repeated content in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page shop containing header, product_grid, cart_bar with viewport fill, background #f8fafc, padding 26 pixels, gap 22 pixels.
Create container header containing shop_title, shop_copy with gap 8 pixels.
Create heading shop_title displaying "Cedar Market 128" with font size 34 pixels, font weight 800.
Create text shop_copy displaying "Objects selected for useful, beautiful everyday living." with text color #64748b.
Create container product_grid containing product_one, product_two, product_three with layout grid, grid columns 3, gap 18 pixels.
Create card product_one containing product_one_name, product_one_price, add_one with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_one_name displaying "Studio chair" with font size 20 pixels.
Create text product_one_price displaying "$45" with text color #c026d3, font weight 700.
Create button add_one displaying "Add to cart" with background #c026d3, text color white, padding 10 pixels, border radius 8 pixels.
Create card product_two containing product_two_name, product_two_price, add_two with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_two_name displaying "Ceramic lamp" with font size 20 pixels.
Create text product_two_price displaying "$35" with text color #c026d3, font weight 700.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 11: Responsive design

Scope: breakpoints, mobile stacks, grids, reduced motion.

Objectives

• Explain breakpoints, mobile stacks, grids, reduced motion in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page home containing home_nav, hero with viewport fill, background white, padding 28 pixels, gap 24 pixels.
Create navigation home_nav containing home_brand, about_link, contact_link with direction horizontal, distribution between, alignment center.
Create heading home_brand displaying "Halcyon" with font size 22 pixels, font weight 800, text color #7c3aed.
Create button about_link displaying "About" with background transparent, text color #0f172a, padding 10 pixels.
When about_link is clicked, navigate to about.
Create button contact_link displaying "Contact" with background #7c3aed, text color white, padding 10 pixels, border radius 8 pixels.
When contact_link is clicked, navigate to contact.
Create section hero containing hero_title, hero_copy, hero_action with alignment center, distribution center, gap 16 pixels, minimum height 560 pixels.
Create heading hero_title displaying "Build a clearer path forward 31" with font size 48 pixels, text alignment center, maximum width 760 pixels.
Create text hero_copy displaying "Strategy, design, and delivery for ambitious teams." with font size 18 pixels, text alignment center.
Create button hero_action displaying "Meet the studio" with background #7c3aed, text color white, padding 13 pixels, border radius 9 pixels.
When hero_action is clicked, navigate to about.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 12: Multipage applications

Scope: navigation, page-local trees, shared product flows.

Objectives

• Explain navigation, page-local trees, shared product flows in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page home containing home_nav, hero with viewport fill, background white, padding 28 pixels, gap 24 pixels.
Create navigation home_nav containing home_brand, about_link, contact_link with direction horizontal, distribution between, alignment center.
Create heading home_brand displaying "Kindred" with font size 22 pixels, font weight 800, text color #be123c.
Create button about_link displaying "About" with background transparent, text color #0f172a, padding 10 pixels.
When about_link is clicked, navigate to about.
Create button contact_link displaying "Contact" with background #be123c, text color white, padding 10 pixels, border radius 8 pixels.
When contact_link is clicked, navigate to contact.
Create section hero containing hero_title, hero_copy, hero_action with alignment center, distribution center, gap 16 pixels, minimum height 560 pixels.
Create heading hero_title displaying "Build a clearer path forward 134" with font size 48 pixels, text alignment center, maximum width 760 pixels.
Create text hero_copy displaying "Strategy, design, and delivery for ambitious teams." with font size 18 pixels, text alignment center.
Create button hero_action displaying "Meet the studio" with background #be123c, text color white, padding 13 pixels, border radius 9 pixels.
When hero_action is clicked, navigate to about.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 13: Authentication

Scope: signup, sign-in, reset, logout, protection, redirects.

Objectives

• Explain signup, sign-in, reset, logout, protection, redirects in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page login containing login_form, signup_form with viewport fill, alignment center, distribution center, background #f8fafc, padding 32 pixels, gap 18 pixels.
Create form login_form containing login_email, login_password, login_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input login_email with placeholder "Email".
Create input login_password with placeholder "Password".
login_password input type is password.
Create button login_button displaying "Sign in" with background #047857, text color white, padding 11 pixels.
login_button submits form.
Create form signup_form containing signup_email, signup_password, signup_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input signup_email with placeholder "Create account email".
Create input signup_password with placeholder "Create password".
signup_password input type is password.
Create button signup_button displaying "Create account" with background #0f172a, text color white, padding 11 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 14: Database and RLS

Scope: tables, columns, relationships, indexes, ownership policies.

Objectives

• Explain tables, columns, relationships, indexes, ownership policies in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page login containing login_form, signup_form with viewport fill, alignment center, distribution center, background #f8fafc, padding 32 pixels, gap 18 pixels.
Create form login_form containing login_email, login_password, login_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input login_email with placeholder "Email".
Create input login_password with placeholder "Password".
login_password input type is password.
Create button login_button displaying "Sign in" with background #4f46e5, text color white, padding 11 pixels.
login_button submits form.
Create form signup_form containing signup_email, signup_password, signup_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input signup_email with placeholder "Create account email".
Create input signup_password with placeholder "Create password".
signup_password input type is password.
Create button signup_button displaying "Create account" with background #0f172a, text color white, padding 11 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 15: Queries and mutations

Scope: load, order, insert, update, delete.

Objectives

• Explain load, order, insert, update, delete in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page login containing login_form, signup_form with viewport fill, alignment center, distribution center, background #f8fafc, padding 32 pixels, gap 18 pixels.
Create form login_form containing login_email, login_password, login_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input login_email with placeholder "Email".
Create input login_password with placeholder "Password".
login_password input type is password.
Create button login_button displaying "Sign in" with background #0f766e, text color white, padding 11 pixels.
login_button submits form.
Create form signup_form containing signup_email, signup_password, signup_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input signup_email with placeholder "Create account email".
Create input signup_password with placeholder "Create password".
signup_password input type is password.
Create button signup_button displaying "Create account" with background #0f172a, text color white, padding 11 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 16: Storage

Scope: buckets, file ownership, uploads, stored paths.

Objectives

• Explain buckets, file ownership, uploads, stored paths in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page login containing login_form, signup_form with viewport fill, alignment center, distribution center, background #f8fafc, padding 32 pixels, gap 18 pixels.
Create form login_form containing login_email, login_password, login_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input login_email with placeholder "Email".
Create input login_password with placeholder "Password".
login_password input type is password.
Create button login_button displaying "Sign in" with background #4338ca, text color white, padding 11 pixels.
login_button submits form.
Create form signup_form containing signup_email, signup_password, signup_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input signup_email with placeholder "Create account email".
Create input signup_password with placeholder "Create password".
signup_password input type is password.
Create button signup_button displaying "Create account" with background #0f172a, text color white, padding 11 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 17: Server functions

Scope: typed fields, authentication, JSON, secrets, webhooks.

Objectives

• Explain typed fields, authentication, JSON, secrets, webhooks in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page login containing login_form, signup_form with viewport fill, alignment center, distribution center, background #f8fafc, padding 32 pixels, gap 18 pixels.
Create form login_form containing login_email, login_password, login_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input login_email with placeholder "Email".
Create input login_password with placeholder "Password".
login_password input type is password.
Create button login_button displaying "Sign in" with background #0369a1, text color white, padding 11 pixels.
login_button submits form.
Create form signup_form containing signup_email, signup_password, signup_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input signup_email with placeholder "Create account email".
Create input signup_password with placeholder "Create password".
signup_password input type is password.
Create button signup_button displaying "Create account" with background #0f172a, text color white, padding 11 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Module 18: Publishing

Scope: GitHub, Supabase, variables, Vercel, production verification.

Objectives

• Explain GitHub, Supabase, variables, Vercel, production verification in a compiled project.
• Produce valid v1 sentences without invented synonyms.
• Diagnose broken references and unsupported combinations.
• Extend an existing source while preserving unrelated behavior.

Guided example

Create page login containing login_form, signup_form with viewport fill, alignment center, distribution center, background #f8fafc, padding 32 pixels, gap 18 pixels.
Create form login_form containing login_email, login_password, login_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input login_email with placeholder "Email".
Create input login_password with placeholder "Password".
login_password input type is password.
Create button login_button displaying "Sign in" with background #2563eb, text color white, padding 11 pixels.
login_button submits form.
Create form signup_form containing signup_email, signup_password, signup_button with direction vertical, gap 10 pixels, padding 24 pixels, background white, border radius 12 pixels.
Create input signup_email with placeholder "Create account email".
Create input signup_password with placeholder "Create password".
signup_password input type is password.
Create button signup_button displaying "Create account" with background #0f172a, text color white, padding 11 pixels.

Step-by-step method

1. Translate the request into named pages and a containment tree.
2. Declare parents before children and keep identifiers unique.
3. Add semantic content and attributes before decorative properties.
4. Add behavior after every source and target exists.
5. Compile, isolate the first failing line, and change only that line.
6. Inspect preview and both exports when runtime behavior is involved.

Exercises

1. Rebuild the example with a different subject and palette.
2. Produce a minimal version using fewer elements.
3. Produce an advanced version with accessibility and mobile behavior.
4. Introduce one invalid identifier, record the error, and repair it.
5. Add one feature using only the dictionary; explain every generated effect.
6. Compare three matching library examples and diagram their different trees.

Mastery gate

Pass when the source compiles, every requested fact is visible or functional, mobile layout has no horizontal overflow, exported references are valid, and you can justify every sentence from the v1 dictionary.

Capstones

Luxury editorial experience

Build a three-page brand site with a collection grid, story page, responsive behavior, and an accessible modal.

Operations platform

Build an authenticated dashboard with search, two related tables, ownership RLS, ordered queries, and CRUD forms.

Production delivery system

Add private files, an authenticated Edge Function, a webhook secret, GitHub export, Supabase provisioning, Vercel variables, and a live production deployment.

Final acceptance checklist

• All sentences compile under v1.0.0.
• All pages have one root and no orphan elements.
• Forms have labels or meaningful placeholders and valid submit controls.
• Modals close through a button and Escape.
• Responsive pages avoid horizontal overflow.
• Every exposed table has RLS and explicit policies.
• Secrets never appear in browser-safe fields or committed files.
• Both export targets build.
• Production deployment returns a successful response.

Example library

examples.jsonl contains exactly 2,000 compiler-verified, exact-unique records balanced across ten categories. Each record has an ID, category, difficulty, feature labels, and complete source. This is a reference library, not the future training dataset.