:recycle: Rename '--include-styles' flag to '--use-lustre-ui' for clarity.

10 files changed, 45 insertions, 17 deletions

diff --git a/examples/01-hello-world/README.md b/examples/01-hello-world/README.md
index aabaab2..c7b5bbc 100644
--- a/examples/01-hello-world/README.md
+++ b/examples/01-hello-world/README.md
@@ -71,10 +71,10 @@ with Lustre ASAP. Each of these examples have been written to use elements from
 that package.
 
 Lustre's development server can be configured to include the `lustre/ui` stylesheet
-by passing the `--include-styles` flag:
+by passing the `--use-lustre-ui` flag:
 
 ```sh
-$ gleam run -m lustre dev --include-styles
+$ gleam run -m lustre dev --use-lustre-ui
 ```
 
 It's not necessary to use `lustre/ui` to use Lustre or to check out any of these
diff --git a/examples/01-hello-world/src/app.gleam b/examples/01-hello-world/src/app.gleam
index 3e11f5b..37ea96c 100644
--- a/examples/01-hello-world/src/app.gleam
+++ b/examples/01-hello-world/src/app.gleam
@@ -4,9 +4,9 @@ import lustre/element
 import lustre/element/html
 // These examples are written with `lustre/ui` in mind. They'll work regardless,
 // but to see what `lustre/ui` can do make sure to run each of these examples with
-// the `--include-styles` flag:
+// the `--use-lustre-ui` flag:
 //
-//   $ gleam run -m lustre dev --include-styles
+//   $ gleam run -m lustre dev --use-lustre-ui
 //
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
diff --git a/examples/02-interactivity/src/app.gleam b/examples/02-interactivity/src/app.gleam
index efbed9f..72d3a58 100644
--- a/examples/02-interactivity/src/app.gleam
+++ b/examples/02-interactivity/src/app.gleam
@@ -6,9 +6,9 @@ import lustre/element/html
 import lustre/event
 // These examples are written with `lustre/ui` in mind. They'll work regardless,
 // but to see what `lustre/ui` can do make sure to run each of these examples with
-// the `--include-styles` flag:
+// the `--use-lustre-ui` flag:
 //
-//   $ gleam run -m lustre dev --include-styles
+//   $ gleam run -m lustre dev --use-lustre-ui
 //
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
diff --git a/examples/03-controlled-inputs/src/app.gleam b/examples/03-controlled-inputs/src/app.gleam
index 5c8381d..2d43170 100644
--- a/examples/03-controlled-inputs/src/app.gleam
+++ b/examples/03-controlled-inputs/src/app.gleam
@@ -6,9 +6,9 @@ import lustre/element.{type Element}
 import lustre/event
 // These examples are written with `lustre/ui` in mind. They'll work regardless,
 // but to see what `lustre/ui` can do make sure to run each of these examples with
-// the `--include-styles` flag:
+// the `--use-lustre-ui` flag:
 //
-//   $ gleam run -m lustre try --include-styles
+//   $ gleam run -m lustre try --use-lustre-ui
 //
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
diff --git a/examples/04-custom-event-handlers/src/app.gleam b/examples/04-custom-event-handlers/src/app.gleam
index fe7c6c3..35a6831 100644
--- a/examples/04-custom-event-handlers/src/app.gleam
+++ b/examples/04-custom-event-handlers/src/app.gleam
@@ -8,9 +8,9 @@ import lustre/element.{type Element}
 import lustre/event
 // These examples are written with `lustre/ui` in mind. They'll work regardless,
 // but to see what `lustre/ui` can do make sure to run each of these examples with
-// the `--include-styles` flag:
+// the `--use-lustre-ui` flag:
 //
-//   $ gleam run -m lustre dev --include-styles
+//   $ gleam run -m lustre dev --use-lustre-ui
 //
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
diff --git a/examples/05-http-requests/src/app.gleam b/examples/05-http-requests/src/app.gleam
index cd9aa0b..9fd518c 100644
--- a/examples/05-http-requests/src/app.gleam
+++ b/examples/05-http-requests/src/app.gleam
@@ -14,9 +14,9 @@ import lustre/event
 import lustre_http.{type HttpError}
 // These examples are written with `lustre/ui` in mind. They'll work regardless,
 // but to see what `lustre/ui` can do make sure to run each of these examples with
-// the `--include-styles` flag:
+// the `--use-lustre-ui` flag:
 //
-//   $ gleam run -m lustre dev --include-styles
+//   $ gleam run -m lustre dev --use-lustre-ui
 //
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
diff --git a/examples/06-custom-effects/src/app.gleam b/examples/06-custom-effects/src/app.gleam
index 60af59e..7ee0096 100644
--- a/examples/06-custom-effects/src/app.gleam
+++ b/examples/06-custom-effects/src/app.gleam
@@ -6,9 +6,9 @@ import lustre/element.{type Element}
 import lustre/event
 // These examples are written with `lustre/ui` in mind. They'll work regardless,
 // but to see what `lustre/ui` can do make sure to run each of these examples with
-// the `--include-styles` flag:
+// the `--use-lustre-ui` flag:
 //
-//   $ gleam run -m lustre dev --include-styles
+//   $ gleam run -m lustre dev --use-lustre-ui
 //
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
diff --git a/pages/guide/02-state-management.md b/pages/guide/02-state-management.md
index e525f5f..2c9b641 100644
--- a/pages/guide/02-state-management.md
+++ b/pages/guide/02-state-management.md
@@ -18,6 +18,34 @@ The MVU architecture is an example of _unidirectional data flow_:
 
 - The UI re-renders based on the new state.
 
+```text
+                                       +--------+
+                                       |        |
+                                       | update |
+                                       |        |
+                                       +--------+
+                                         ^    |
+                                         |    |
+                                     Msg |    | Model
+                                         |    |
+                                         |    v
++------+                         +------------------------+
+|      |          Model          |                        |
+| init |------------------------>|     Lustre Runtime     |
+|      |                         |                        |
++------+                         +------------------------+
+                                         ^    |
+                                         |    |
+                                     Msg |    | Model
+                                         |    |
+                                         |    v
+                                       +--------+
+                                       |        |
+                                       |  view  |
+                                       |        |
+                                       +--------+
+```
+
 This is in contrast to _bidirectional_ approaches to state management, where the
 UI can modify state directly. For some developers this can be a difficult idea
 to get used to, but it brings a number of benefits:
diff --git a/pages/reference/cli.md b/pages/reference/cli.md
index 7959959..d02106e 100644
--- a/pages/reference/cli.md
+++ b/pages/reference/cli.md
@@ -142,7 +142,7 @@ Flags:
 - `--host` - The host to serve the project on. Defaults to `0.0.0.0` and is
   accessible on localhosts and any other devices on the same network.
 
-- `--include-styles` - Include the stylesheet from
+- `--use-lustre-ui` - Include the stylesheet from
   [lustre/ui](https://hexdocs.pm/lustre_ui/). This is mainly used in the example
   projects, but you may use this option to quickly experiment with the library
   yourself.
@@ -150,7 +150,7 @@ Flags:
 Example:
 
 ```sh
-gleam run -m lustre dev --port=8080 --include-styles
+gleam run -m lustre dev --port=8080 --use-lustre-ui
 ```
 
 ## Getting help
diff --git a/src/lustre/cli/dev.gleam b/src/lustre/cli/dev.gleam
index d1bee68..3b24dc9 100644
--- a/src/lustre/cli/dev.gleam
+++ b/src/lustre/cli/dev.gleam
@@ -96,7 +96,7 @@ pub fn run() -> Command(Nil) {
     |> flag.default(default)
     |> flag.description(description)
   })
-  |> glint.flag("include-styles", {
+  |> glint.flag("use-lustre-ui", {
     let description = ""
     let default = False