PhrontHQ · thibaultzanini · Feb 9, 2026 · Jan 23, 2026 · Jan 23, 2026 · Jan 28, 2026
diff --git a/examples/responsive-app/assets/img/866-1024x1024.jpg b/examples/responsive-app/assets/img/866-1024x1024.jpg
diff --git a/examples/responsive-app/index.css b/examples/responsive-app/index.css
@@ -0,0 +1,8 @@
+body,
+html {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, Roboto, sans-serif;
+    background-color: #fafafa;
+    min-width: 320px;
+}
diff --git a/examples/responsive-app/index.html b/examples/responsive-app/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Responsive App Demo</title>
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+        <script src="../../montage.js"></script>
+        <script type="text/mod-serialization">
+        {
+            "owner": {
+                "prototype": "mod/ui/loader.mod"
+            }
+        }
+        </script>
+    </head>
+    <body>
+        <span class="loading"></span>
+    </body>
+</html>
diff --git a/examples/responsive-app/package.json b/examples/responsive-app/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "responsive-app",
+    "version": "1.0.0",
+    "dependencies": {
+        "mod": "*"
+    },
+    "mappings": {
+        "mod": "../../"
+    }
+}
diff --git a/examples/responsive-app/ui/footer.mod/footer.css b/examples/responsive-app/ui/footer.mod/footer.css
@@ -0,0 +1,5 @@
+.Footer {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+}
diff --git a/examples/responsive-app/ui/footer.mod/footer.html b/examples/responsive-app/ui/footer.mod/footer.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="footer.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "owner"}
+                    }
+                },
+                "button": {
+                    "prototype": "mod/ui/button.mod",
+                    "values": {
+                        "element": {"#": "button"},
+                        "label": "Click Me"
+                    }
+                },
+                "dangerButton": {
+                    "prototype": "mod/ui/button.mod",
+                    "values": {
+                        "visualStyle": {"@": "dangerVisualStyle"},
+                        "element": {"#": "dangerButton"},
+                        "label": "Delete"
+                    }
+                },
+                "dangerVisualStyle": {
+                    "prototype": "mod/ui/visual-style.mod",
+                    "values": {
+                        "raisedSurfaceFill": "rgba(220, 53, 69, 1)",
+                        "controlBorderWidth": "0px",
+                        "textFill": "rgba(255, 255, 255, 1)",
+                        "_FIXME": "Visual-style properties should be inherited from the closest ancestor with a visual style. @see controlBorderRadius from footerVisualStyle in main.mod/main.html"
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <footer data-mod-id="owner" class="Footer">
+            <div data-mod-id="button" class="Footer-button"></div>
+            <div data-mod-id="dangerButton" class="Footer-dangerButton"></div>
+        </footer>
+    </body>
+</html>
diff --git a/examples/responsive-app/ui/footer.mod/footer.js b/examples/responsive-app/ui/footer.mod/footer.js
@@ -0,0 +1,10 @@
+/**
+ * @module "ui/footer.mod"
+ */
+const Component = require("mod/ui/component").Component;
+
+/**
+ * @class Footer
+ * @extends Component
+ */
+exports.Footer = class Footer extends Component {};
diff --git a/examples/responsive-app/ui/list-item.mod/list-item.css b/examples/responsive-app/ui/list-item.mod/list-item.css
@@ -0,0 +1,43 @@
+.ListItem {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px;
+    border-bottom: 1px solid #eee;
+    background-color: #f9f9f9;
+    gap: 8px;
+
+    .ListItem-title {
+        font-weight: bold;
+        flex: 0 0 150px;
+    }
+
+    .ListItem-description {
+        color: #666;
+        font-size: 0.9rem;
+        flex: 1;
+    }
+
+    @container (min-width: 400px) {
+        gap: 16px;
+        padding: 12px 16px;
+
+        .ListItem-description {
+            font-size: 0.95rem;
+        }
+    }
+
+    @container (min-width: 600px) {
+        flex-direction: row;
+        align-items: center;
+        gap: 24px;
+        padding: 16px 24px;
+
+        .ListItem-title {
+            font-size: 1.2rem;
+        }
+
+        .ListItem-description {
+            font-size: 1rem;
+        }
+    }
+}
diff --git a/examples/responsive-app/ui/list-item.mod/list-item.html b/examples/responsive-app/ui/list-item.mod/list-item.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="list-item.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "owner"}
+                    }
+                },
+                "title": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "title"},
+                        "value": {"<-": "@owner.item.title"}
+                    }
+                },
+                "description": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "description"},
+                        "value": {"<-": "@owner.item.description"}
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <div data-mod-id="owner" class="ListItem">
+            <div data-mod-id="title" class="ListItem-text"></div>
+            <div data-mod-id="description" class="ListItem-description"></div>
+        </div>
+    </body>
+</html>
diff --git a/examples/responsive-app/ui/list-item.mod/list-item.js b/examples/responsive-app/ui/list-item.mod/list-item.js
@@ -0,0 +1,10 @@
+/**
+ * @module "ui/list-item.mod"
+ */
+const Component = require("mod/ui/component").Component;
+
+/**
+ * @class ListItem
+ * @extends Component
+ */
+exports.ListItem = class ListItem extends Component {};
diff --git a/examples/responsive-app/ui/main.mod/main.css b/examples/responsive-app/ui/main.mod/main.css
@@ -0,0 +1,53 @@
+.Main {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 0 16px;
+
+    > .Main-header {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 12px;
+
+        > .Main-title {
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+
+        > .Main-logo {
+            flex-shrink: 0;
+            height: 48px;
+            width: 48px;
+
+            > img {
+                border-radius: 4px;
+            }
+        }
+    }
+}
+
+/* Tablets */
+@media screen and (min-width: 768px) {
+    .Main {
+        > .Main-header {
+            justify-content: space-between;
+            flex-direction: row;
+
+            > .Main-title {
+                font-size: 2rem;
+            }
+
+            > .Main-logo {
+                /* 16/9 ratio */
+                width: 128px;
+                height: 72px;
+            }
+        }
+
+        > .Main-nav {
+            max-width: 600px;
+        }
+    }
+}
diff --git a/examples/responsive-app/ui/main.mod/main.html b/examples/responsive-app/ui/main.mod/main.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="main.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "owner"},
+                        "visualStyle": {"@": "visualStyle"}
+                    }
+                },
+                "image": {
+                    "prototype": "mod/ui/image.mod",
+                    "values": {
+                        "element": {"#": "image"},
+                        "src": "assets/img/866-1024x1024.jpg",
+                        "enclosesSize": true
+                    }
+                },
+                "visualStyle": {
+                    "prototype": "mod/ui/visual-style.mod",
+                    "values": {
+                        "controlBorderWidth": "0.5px",
+                        "controlBorderRadius": "8px",
+                        "controlLabelSize": "16px",
+                        "controlBackgroundFill": "rgba(243, 244, 246, 1)",
+                        "controlSelectionFill": "rgba(252, 252, 252, 1)",
+                        "textFill": "rgba(0, 0, 0, 1)",
+                        "raisedSurfaceFill": "rgba(255, 255, 255, 1)"
+                    }
+                },
+                "segmentedControl": {
+                    "prototype": "mod/ui/segmented-control.mod",
+                    "values": {
+                        "element": {"#": "segmentedControl"},
+                        "options": {"<-": "@owner.menuOptions"},
+                        "selection": "home",
+                        "valuePath": "value",
+                        "enclosesSize": true
+                    }
+                },
+                "segmentedControlSegment": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "segmentedControlSegment"},
+                        "value": {"<-": "@segmentedControl:segment.object.label"}
+                    }
+                },
+                "list": {
+                    "prototype": "mod/ui/repetition.mod",
+                    "values": {
+                        "content": {"<-": "@owner.items"},
+                        "element": {"#": "list"}
+                    }
+                },
+                "listItem": {
+                    "prototype": "ui/list-item.mod",
+                     "values": {
+                        "item": {"<-": "@list:iteration.object"},
+                        "element": {"#": "listItem"},
+                        "enclosesSize": true
+                    }
+                },
+                "footer": {
+                    "prototype": "ui/footer.mod",
+                    "values": {
+                        "element": {"#": "footer"},
+                        "visualStyle": {"@": "footerVisualStyle"}
+                    }
+                },
+                "footerVisualStyle": {
+                    "prototype": "mod/ui/visual-style.mod",
+                    "values": {
+                        "controlBorderRadius": "16px"
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <div data-mod-id="owner" class="Main">
+            <header class="Main-header">
+                <h1 class="Main-title">Responsive App Demo</h1>
+                <div data-mod-id="image" class="Main-logo"></div>
+            </header>
+            <nav class="Main-nav">
+                <div data-mod-id="segmentedControl">
+                    <div data-mod-id="segmentedControlSegment"></div>
+                </div>
+            </nav>
+            <section class="Main-content">
+                <div data-mod-id="list" class="Main-List">
+                    <div data-mod-id="listItem" class="Main-ListItem"></div>
+                </div>
+            </section>
+            <footer data-mod-id="footer" class="Main-footer"></footer>
+        </div>
+    </body>
+</html>
diff --git a/examples/responsive-app/ui/main.mod/main.js b/examples/responsive-app/ui/main.mod/main.js
@@ -0,0 +1,22 @@
+/**
+ * @module "ui/main.mod"
+ */
+const Component = require("mod/ui/component").Component;
+
+/**
+ * @class Main
+ * @extends Component
+ */
+exports.Main = class Main extends Component {
+    menuOptions = [
+        { label: "Home", value: "home" },
+        { label: "About", value: "about" },
+        { label: "Contact", value: "contact" },
+    ];
+
+    items = [
+        { title: "Item 1", description: "This is the first item." },
+        { title: "Item 2", description: "This is the second item." },
+        { title: "Item 3", description: "This is the third item." },
+    ];
+};
diff --git a/index.html b/index.html
@@ -67,6 +67,7 @@ <h4>Tests:</h4>
 
             <h4>Examples:</h4>
             <a href="examples/data-app/index.html">Data App</a>
+            <a href="examples/responsive-app/index.html">Responsive App</a>
         </nav>
     </body>
 </html>