Refactor: Enhance .hib examples to showcase dynamic features

index.html

@@ -170,26 +170,38 @@ The JSON equivalent for the Hi language.
 
 A \`.hib\` file is implicitly a Block; the top-level \`{}\` are omitted. It is parsed as native Hi syntax, allowing for comments, executable logic, and symbolic types.
 
-### Example: \`config.hib\`
+### Example: \`theme.hib\`
 \`\`\`js
-// config.hib
+// theme.hib
-user: "Orion"
+// A .hib file can contain static data and dynamic logic.
-level: 99
+colors: {
-active: !0 // Hi's canonical boolean 'true'
+  primary: "#3498db"
-permissions: ["read", "write"]
+  accent: "#f1c40f"
+  text: "#2c3e50"
+}
 
-// Executable logic can be embedded directly.
+// Expressions can generate data structures.
-summary: { "User " + @user + " (Lvl " + @level + ")" }
+// This creates an array: [0, 4, 8, 12]
+spacing: (0..4 -> i) * { i * 4 }
+
+// A block that acts like a factory function.
+createRule: (selector, property, value) {
+  selector + " { " + property + ": " + value + "; }"
+}
 \`\`\`
 
 ### Usage in \`.hi\`
 The file is imported using the \`+\` operator.
 \`\`\`js
 // main.hi
-config: + "./config.hib"
+theme: + "./theme.hib"
 
-_(config.user)      // "Orion"
+_(theme.colors.primary)     // "#3498db"
-_(config.summary()) // "User Orion (Lvl 99)"
+_(theme.spacing[2])         // 8
+
+// Use the factory function from the .hib file.
+rule: theme.createRule(".title", "color", theme.colors.text)
+_(rule) // ".title { color: #2c3e50; }"
 \`\`\`
 `,
             contact: `
@@ -268,4 +280,3 @@ For inquiries, you can reach the development team at the following address:
     </script>
 </body>
 </html>
-