diff --git a/src/cg/03-ui-components.cg b/src/cg/03-ui-components.cg
index 9e46167..c5cd0c9 100644
--- a/src/cg/03-ui-components.cg
+++ b/src/cg/03-ui-components.cg
@@ -390,78 +390,78 @@ LayoutChild = Fixed Int (Int \ Int \ UI) | Flex Int (Int \ Int \ UI);
 Alignment = Start | Center | End;
 Direction = Col | Row;
 
-@layout
-
-layoutDir
-  : Direction \ { w : Int, h : Int } \ List LayoutChild \ { ui : UI, w : Int, h : Int }
-  = dir constraints children \
-  mainSize = dir | Col \ constraints.h | Row \ constraints.w;
-  crossSize = dir | Col \ constraints.w | Row \ constraints.h;
-
-  # Pass 1: sum fixed heights, total flex weight
-  info = fold (acc child \ child
-    | Fixed s _ \ acc.{ fixedMain = acc.fixedMain + s }
-    | Flex n _ \ acc.{ totalFlex = acc.totalFlex + n }
-   ) { fixedMain = 0, totalFlex = 0 } children;
-
-   remaining = mainSize - info.fixedMain;
-
-   # Pass 2
-   result = fold (acc child \
-     allocated = (child
-       | Fixed s view \ { s = s, view = view }
-       | Flex n view \ { s = remaining * n / info.totalFlex, view = view });
-
-      childW = dir | Col \ crossSize | Row \ allocated.s;
-      childH = dir | Col \ allocated.s | Row \ crossSize;
-      posX = dir | Col \ 0 | Row \ acc.pos;
-      posY = dir | Col \ acc.pos | Row \ 0;
-
-      rendered = ui.positioned {
-        x = posX, y = posY,
-        child = allocated.view childW childH
-      };
-
-    acc.{ pos = acc.pos + allocated.s, children = [...acc.children, rendered] }
-  ) { pos = 0, children = [] } children;
-
-  { ui = ui.stack { children = result.children }, w = constraints.w, h = constraints.h };
-
-col = layoutDir Col;
-row = layoutDir Row;
-
-align = hAlign vAlign w h child \
-  x = hAlign
-    | Start \ 0
-    | Center \ (w - child.w) / 2
-    | End \ w - child.w;
-  y = vAlign
-    | Start \ 0
-    | Center \ (h - child.h) / 2
-    | End \ h - child.h;
-  { ui = ui.positioned { x = x, y = y, child = child.ui }, w = w, h = h };
-
-@
-
-testApp = name \
-  { view = ctx \
-    col { w = ctx.w, h = ctx.h } [
-      Fixed 40 (w h \ box { w = w, h = h, color = "red", child = text "Header" }),
-      Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main content" }),
-      Fixed 30 (w h \ box { w = w, h = h, color = "blue", child = text "Footer" }),
-    ]
-    ~ (e \ e.ui)
-  };
-
-testApp2 = _ \
-  { view = ctx \
-    col { w = ctx.w, h = ctx.h } [
-      Fixed 40 (w h \ (align Center Center w h (sizedText "Header")).ui),
-      Flex 1 (w h \ (row { w = w, h = h } [
-        Fixed 200 (w h \ box { w = w, h = h, color = "#2a2a3e", child = text "Sidebar" }),
-        Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main" }),
-      ]).ui),
-      Fixed 30 (w h \ (align Center Center w h (sizedText "Footer")).ui),
-    ]
-    ~ (e \ e.ui)
-  };
+# @layout
+# 
+# layoutDir
+#   : Direction \ { w : Int, h : Int } \ List LayoutChild \ { ui : UI, w : Int, h : Int }
+#   = dir constraints children \
+#   mainSize = dir | Col \ constraints.h | Row \ constraints.w;
+#   crossSize = dir | Col \ constraints.w | Row \ constraints.h;
+# 
+#   # Pass 1: sum fixed heights, total flex weight
+#   info = fold (acc child \ child
+#     | Fixed s _ \ acc.{ fixedMain = acc.fixedMain + s }
+#     | Flex n _ \ acc.{ totalFlex = acc.totalFlex + n }
+#    ) { fixedMain = 0, totalFlex = 0 } children;
+# 
+#    remaining = mainSize - info.fixedMain;
+# 
+#    # Pass 2
+#    result = fold (acc child \
+#      allocated = (child
+#        | Fixed s view \ { s = s, view = view }
+#        | Flex n view \ { s = remaining * n / info.totalFlex, view = view });
+# 
+#       childW = dir | Col \ crossSize | Row \ allocated.s;
+#       childH = dir | Col \ allocated.s | Row \ crossSize;
+#       posX = dir | Col \ 0 | Row \ acc.pos;
+#       posY = dir | Col \ acc.pos | Row \ 0;
+# 
+#       rendered = ui.positioned {
+#         x = posX, y = posY,
+#         child = allocated.view childW childH
+#       };
+# 
+#     acc.{ pos = acc.pos + allocated.s, children = [...acc.children, rendered] }
+#   ) { pos = 0, children = [] } children;
+# 
+#   { ui = ui.stack { children = result.children }, w = constraints.w, h = constraints.h };
+# 
+# col = layoutDir Col;
+# row = layoutDir Row;
+# 
+# align = hAlign vAlign w h child \
+#   x = hAlign
+#     | Start \ 0
+#     | Center \ (w - child.w) / 2
+#     | End \ w - child.w;
+#   y = vAlign
+#     | Start \ 0
+#     | Center \ (h - child.h) / 2
+#     | End \ h - child.h;
+#   { ui = ui.positioned { x = x, y = y, child = child.ui }, w = w, h = h };
+# 
+# @
+# 
+# testApp = name \
+#   { view = ctx \
+#     col { w = ctx.w, h = ctx.h } [
+#       Fixed 40 (w h \ box { w = w, h = h, color = "red", child = text "Header" }),
+#       Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main content" }),
+#       Fixed 30 (w h \ box { w = w, h = h, color = "blue", child = text "Footer" }),
+#     ]
+#     ~ (e \ e.ui)
+#   };
+# 
+# testApp2 = _ \
+#   { view = ctx \
+#     col { w = ctx.w, h = ctx.h } [
+#       Fixed 40 (w h \ (align Center Center w h (sizedText "Header")).ui),
+#       Flex 1 (w h \ (row { w = w, h = h } [
+#         Fixed 200 (w h \ box { w = w, h = h, color = "#2a2a3e", child = text "Sidebar" }),
+#         Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main" }),
+#       ]).ui),
+#       Fixed 30 (w h \ (align Center Center w h (sizedText "Footer")).ui),
+#     ]
+#     ~ (e \ e.ui)
+#   };
diff --git a/src/cg/layout.cg b/src/cg/layout.cg
new file mode 100644
index 0000000..dbb9119
--- /dev/null
+++ b/src/cg/layout.cg
@@ -0,0 +1,58 @@
+@layout
+
+layoutDir : Direction \ { w : Int, h : Int } \ List LayoutChild \ { ui : UI, w : Int, h : Int } = dir constraints children \
+  mainSize = dir
+    | Col \ constraints.h
+    | Row \ constraints.w;
+  crossSize = dir
+    | Col \ constraints.w
+    | Row \ constraints.h;
+  info = fold (acc child \
+      child
+      | (Fixed s _) \ acc.{ fixedMain = acc.fixedMain + s }
+      | (Flex n _) \ acc.{ totalFlex = acc.totalFlex + n }) { fixedMain = 0, totalFlex = 0 } children;
+  remaining = mainSize - info.fixedMain;
+  result = fold (acc child \
+      allocated = child
+        | (Fixed s view) \ { s = s, view = view }
+        | (Flex n view) \ { s = (remaining * n) / info.totalFlex, view = view };
+      childW = dir
+        | Col \ crossSize
+        | Row \ allocated.s;
+      childH = dir
+        | Col \ allocated.s
+        | Row \ crossSize;
+      posX = dir
+        | Col \ 0
+        | Row \ acc.pos;
+      posY = dir
+        | Col \ acc.pos
+        | Row \ 0;
+      rendered = ui.positioned { x = posX, y = posY, child = allocated.view childW childH };
+      acc.{ pos = acc.pos + allocated.s, children = [...acc.children, rendered] }) { pos = 0, children = [] } children;
+  {
+    ui = ui.stack { children = result.children },
+    w = constraints.w,
+    h = constraints.h
+  };
+
+col = layoutDir Col;
+
+row = layoutDir Row;
+
+align = hAlign vAlign w h child \
+  x = hAlign
+    | Start \ 0
+    | Center \ (w - child.w) / 2
+    | End \ w - child.w;
+  y = vAlign
+    | Start \ 0
+    | Center \ (h - child.h) / 2
+    | End \ h - child.h;
+  {
+    ui = ui.positioned { x = x, y = y, child = child.ui },
+    w = w,
+    h = h
+  };
+
+@