Grammar reference

Plain controlled-English language

Compact declaration:
  Create <type> <name> [displaying "text"] [containing children] [with properties].

Element types:
  audio, button, card, container, custom, divider, form, heading, icon, image, input, item, label, link, list, navigation, option, page, section, select, text, textarea, video

Properties:
  viewport fill
  direction vertical|horizontal
  width|height fill|content|<number> pixels|<number> percent
  minimum|maximum width|height <size>
  background <color>
  gradient <color> to <color> right|left|down|up
  text color <color>
  padding|horizontal padding|vertical padding <number> pixels
  margin <number> pixels|auto
  gap <number> pixels
  border radius <number> pixels
  border <number> pixels <color>
  shadow none|small|medium|large|xlarge
  font size <number> pixels
  font weight 400|500|600|700|800
  line height <number>
  letter spacing <number> pixels
  text alignment left|center|right
  text decoration none|underline
  alignment start|center|end|stretch
  distribution start|center|end|between|around|evenly
  wrap enabled|disabled
  layout grid
  grid columns <number>
  overflow visible|hidden|auto|scroll
  position relative|absolute|fixed|sticky
  top|right|bottom|left <number> pixels
  opacity <number> percent
  backdrop blur <number> pixels
  cursor pointer
  transition fast|normal|slow
  hover background <color>
  hover lift <number> pixels
  z index <integer>
  scale <number>
  rotation <number> degrees
  aspect ratio <number> by <number>
  object fit cover|contain|fill|none (image)
  entry fade|rise|scale <milliseconds> milliseconds
  destination "url" (link)
  source "url" and description "text" (image)
  placeholder "text" (input)

Responsive rule:
  On screens below <number> pixels, <name> direction is vertical|horizontal.
  On screens below <number> pixels, <name> width is <size>.
  On screens below <number> pixels, <name> gap is <number> pixels.
  On screens below <number> pixels, <name> grid columns is <number>.

Browser interactions:
  <element> starts hidden.
  When <element> is clicked, show <element>.
  When <element> is clicked, hide <element>.
  When <element> is clicked, toggle <element>.
  When <element> is clicked, navigate to <page>.
  When Escape is pressed, hide <element>.
  When <form> is submitted, show|hide|toggle <element>.
  When <input> changes, show|hide|toggle <element>.

State and reactive data:
  Create state <name> with value <number>|true|false|"text".
  <element> displays state <state>.
  Show <element> when <state> equals <value>.
  Show <element> when <state> does not equal <value>.
  When <element> is clicked, increase|decrease <state> by <number>.
  When <element> is clicked, set <state> to <value>.
  When <input> changes, set <state> from its value.
  Create collection <name> with values "item", "item".
  Render collection <name> inside <container> as text|list items.

Forms and reuse:
  <input> input type is text|email|number|password|date|checkbox|radio|range|color|file|url|tel|search|time|datetime-local|hidden.
  <input|textarea> is required.
  <label> describes <input>.
  <button> submits form.
  <element> uses styles from <element>.
  <input> minimum|maximum|step|minimum length|maximum length is <number>.
  <input> accepts file types "<types>".
  <input|textarea|select> field name is "<name>".
  <input|textarea> autocomplete is "<value>".
  <input> pattern is "<pattern>".
  <option> option value is "<value>".
  <element> is disabled|is read only|allows multiple values|is selected|shows controls|plays automatically|loops.
  When <file-input> changes, preview selected image in <image>.
  When <form> is submitted, validate it and show <success> or show errors in <error>.

Parameterized components:
  Define component <name> with parameters <parameter>, <parameter>.
  <ordinary controlled sentences; create one element named root>
  End component.
  Create component <name> as <instance> with <parameter> "<value>".

Collections and loops:
  Create filtered collection <name> from <collection> containing state <query>.
  Create sorted collection <name> from <collection> ascending|descending.
  <element> displays collection item.
  <element> displays collection field <field>.
  Render collection <name> inside <container> using template <element>.

Pointers and drag/drop:
  Make <element> draggable [within <container>].
  Make children of <container> reorderable.
  When <element> is dropped on <container>, move it into the target.
  When <element> is swiped left|right|up|down, show|hide|toggle <element>.
  When <element> is long pressed, show|hide|toggle <element>.

Assets and loading:
  <image|icon|element> loads lazily.
  Import stylesheet from "<url>".
  Import JavaScript module from "<url>".
  <link> destination is "<url>".
  <image|icon|video|audio> source is "<url-or-path>".
  <image|icon> description is "<accessible text>".

Advanced deterministic extensions:
  Create custom element <name> as <html-tag>.
  <element> attribute "<name>" is "<value>".
  <element> CSS property "<property>" is "<value>".
  Create style class <name>.
  Create style rule <name> for <element> [when hovered|focused|active|disabled].
  Create style rule <name> for descendants|direct children of <element>.
  Create style rule <name> for child number <number> of <element>.
  Create style rule <name> for <element> before|after it.
  Create style rule <name> for <element> when it contains <element>.
  <style> property "<css-property>" is "<value>".
  Use style rule <name> on screens below|above <number> pixels.
  Use style rule <name> when dark mode|reduced motion is preferred.
  Use style rule <name> in landscape orientation|when printing.
  Apply style class <style> to <element>.
  Create design token <name> with value "<css-value>".
  <element|style> property "<css-property>" uses token <name>.
  Create animation <name>.
  At <0-100> percent, <animation> property "<css-property>" is "<value>".
  <element> plays <animation> over <milliseconds> milliseconds once|forever.
  When <element> <event>, set <element> text to "<text>".
  When <element> <event>, set <element> attribute "<name>" to "<value>".
  When <element> <event>, remove <element> attribute "<name>".
  When <element> <event>, add|remove|toggle style class <style> on <element>.
  When <element> <event>, focus|scroll to|copy text from <element>.
  When <key> is pressed on <element>, show|hide|toggle|focus <element>.
  When <element> <event> and state <state> equals|does not equal <value>, show|hide|toggle <element>.
  When <element> is clicked, set design token <token> to "<value>".
  Persist state <state> in local storage.
  On page <page>, every <milliseconds> milliseconds, increase|decrease <state> by <number>.
  When <element> <event>, request JSON from "<url>" into <state>.
  When <element> <event>, request JSON from "<url>" into <collection> while showing <loader> and show <error> if it fails.

Events:
  is clicked | is submitted | changes | is focused | loses focus | is entered | is left

Unrestricted CSS and JavaScript blocks are rejected. Advanced behavior must be
represented by a controlled sentence so the compiler can validate every target.

Multiple pages:
  Create two or more page elements in one source file. Each page and all of
  its descendants compile into <output>/<page>/index.html and styles.css.
  A script.js file is added only to pages that define browser interactions.

Named colors:
  white, black, gray, light gray, dark gray, red, green, blue, yellow, orange, purple, slate, navy, indigo, cyan, teal, emerald, rose, pink, transparent

Supabase full-stack project grammar

Backend:
  Use Supabase backend.
  Enable email and password authentication.
  Protect page <page> with authentication.
  After authentication navigate to <page>.
  Use form <form> to sign up|sign in with email <input> and password <input>.
  Use form <form> to request password reset with email <input>.
  When <button> is clicked, sign out.

Database:
  Create database table <table>.
  <table> has [required] [unique] text|integer|number|boolean|uuid|timestamp|date|json column <column> [with default <value>].
  <table> belongs to authenticated user through <owner-column>.
  <table> references <table> through <column> [deleting cascade|restrict|set null].
  Create index <index> on <table> using <column>, <column>.
  Allow authenticated users to read|create|update|delete|read, create, update, and delete their own rows in <table> through <owner-column>.
  Allow anyone to read rows in <table>.

Data:
  Create data query <query> from <table> selecting <column>, <column>.
  <query> orders by <column> ascending|descending.
  Load <query> on page <page> into <collection>.
  Use form <form> to insert into <table> mapping <input> to <column>, <input> to <column>.
  Use form <form> to update <table> using state <state> as <column> mapping <input> to <column>.
  When <button> is clicked, delete from <table> using state <state> as <column>.

Storage:
  Create public|private storage bucket <bucket>.
  Allow authenticated users to read|upload|update|delete|read, upload, update, and delete their own files in <bucket>.
  When <file-input> changes, upload file to <bucket> and store path in <state>.

APIs and server functions:
  Create server function <function>.
  <function> requires authentication.
  <function> accepts text|number|boolean field <field>.
  <function> returns JSON message "<message>".
  <function> forwards request to URL from secret <UPPERCASE_SECRET>.
  Use form <form> to call server function <function>.

These sentences generate Supabase migrations, RLS policies, storage policies,
typed project configuration, browser or React client wiring, Edge Functions,
environment templates, and setup instructions. Provisioning remains explicit.