From 254c808383d5d9681aa971a66ac32d0ffda5825f Mon Sep 17 00:00:00 2001
From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Date: Sun, 24 May 2026 03:21:29 -0500
Subject: [PATCH 1/3] refactor: alignment to use string literals instead of
 magic numbers

---
 demo/inline-region.ts |  2 +-
 demo/keyboard.ts      | 14 +++++++-------
 ops.ts                | 18 +++++++++++++++---
 validate.ts           | 16 ++++++++++++++--
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/demo/inline-region.ts b/demo/inline-region.ts
index 75a5b92..b13d191 100644
--- a/demo/inline-region.ts
+++ b/demo/inline-region.ts
@@ -89,7 +89,7 @@ function box(msg: string, fg: number, border: number): Op[] {
         height: grow(),
         direction: "ttb",
         padding: { left: 1 },
-        alignY: 2,
+        alignY: "center",
       },
       border: {
         color: border,
diff --git a/demo/keyboard.ts b/demo/keyboard.ts
index 0dce0c3..580b1cc 100644
--- a/demo/keyboard.ts
+++ b/demo/keyboard.ts
@@ -71,8 +71,8 @@ function key(ops: Op[], k: KeyDef, ctx: AppContext): void {
         width: fixed(w),
         height: grow(),
         padding: { left: 1, right: 1 },
-        alignX: 2,
-        alignY: 2,
+        alignX: "center",
+        alignY: "center",
       },
       bg,
       border: hover
@@ -435,8 +435,8 @@ function keyboard(ctx: AppContext): Op[] {
         width: grow(),
         height: grow(),
         direction: "ttb",
-        alignX: 2,
-        alignY: 2,
+        alignX: "center",
+        alignY: "center",
         padding: { left: 2, top: 1 },
       },
     }),
@@ -453,7 +453,7 @@ function keyboard(ctx: AppContext): Op[] {
       layout: {
         width: grow(),
         direction: "ltr",
-        alignY: 0,
+        alignY: "top",
         padding: { bottom: 1 },
       },
     }),
@@ -504,7 +504,7 @@ function keyboard(ctx: AppContext): Op[] {
 
   // config panel (right)
   ops.push(
-    open("", { layout: { width: grow(), direction: "ltr", alignX: 1 } }),
+    open("", { layout: { width: grow(), direction: "ltr", alignX: "right" } }),
   );
   configPanel(ops, ctx);
   ops.push(close());
@@ -518,7 +518,7 @@ function keyboard(ctx: AppContext): Op[] {
       layout: {
         direction: "ltr",
         gap: 3,
-        alignY: 1,
+        alignY: "bottom",
         padding: { left: 1, right: 1, top: 1, bottom: 1 },
       },
       border: { color: kbColor, left: 1, right: 1, top: 1, bottom: 1 },
diff --git a/ops.ts b/ops.ts
index 3344eea..756da27 100644
--- a/ops.ts
+++ b/ops.ts
@@ -115,7 +115,19 @@ export function pack(
           );
           o += 4;
 
-          view.setUint32(o, (l.alignX ?? 0) | ((l.alignY ?? 0) << 8), true);
+          const alignX = l.alignX === "right"
+            ? 1
+            : l.alignX === "center"
+            ? 2
+            : 0;
+
+          const alignY = l.alignY === "bottom"
+            ? 1
+            : l.alignY === "center"
+            ? 2
+            : 0;
+
+          view.setUint32(o, alignX | (alignY << 8), true);
           o += 4;
         }
 
@@ -248,8 +260,8 @@ export interface OpenElement {
     padding?: { left?: number; right?: number; top?: number; bottom?: number };
     gap?: number;
     direction?: "ltr" | "ttb";
-    alignX?: number;
-    alignY?: number;
+    alignX?: "left" | "center" | "right";
+    alignY?: "top" | "center" | "bottom";
   };
   bg?: number;
   cornerRadius?: { tl?: number; tr?: number; bl?: number; br?: number };
diff --git a/validate.ts b/validate.ts
index 248ea48..ef96b99 100644
--- a/validate.ts
+++ b/validate.ts
@@ -56,8 +56,20 @@ const Layout = Type.Object({
   direction: Type.Optional(
     Type.Union([Type.Literal("ltr"), Type.Literal("ttb")]),
   ),
-  alignX: Type.Optional(u8),
-  alignY: Type.Optional(u8),
+  alignX: Type.Optional(
+    Type.Union([
+      Type.Literal("left"),
+      Type.Literal("center"),
+      Type.Literal("right"),
+    ]),
+  ),
+  alignY: Type.Optional(
+    Type.Union([
+      Type.Literal("top"),
+      Type.Literal("center"),
+      Type.Literal("bottom"),
+    ]),
+  ),
 });
 
 const CornerRadius = Type.Object({

From b253b9525131cf391e86b996828d5f9244242e09 Mon Sep 17 00:00:00 2001
From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Date: Sun, 24 May 2026 03:33:11 -0500
Subject: [PATCH 2/3] fix: linting issues

---
 ops.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ops.ts b/ops.ts
index 756da27..aa156ef 100644
--- a/ops.ts
+++ b/ops.ts
@@ -115,13 +115,13 @@ export function pack(
           );
           o += 4;
 
-          const alignX = l.alignX === "right"
+          let alignX = l.alignX === "right"
             ? 1
             : l.alignX === "center"
             ? 2
             : 0;
 
-          const alignY = l.alignY === "bottom"
+          let alignY = l.alignY === "bottom"
             ? 1
             : l.alignY === "center"
             ? 2

From 1571dde2ed46210bdb2c1ab314f2154607be4398 Mon Sep 17 00:00:00 2001
From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Date: Sun, 24 May 2026 03:34:11 -0500
Subject: [PATCH 3/3] format

---
 ops.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/ops.ts b/ops.ts
index aa156ef..c2bcc20 100644
--- a/ops.ts
+++ b/ops.ts
@@ -115,11 +115,7 @@ export function pack(
           );
           o += 4;
 
-          let alignX = l.alignX === "right"
-            ? 1
-            : l.alignX === "center"
-            ? 2
-            : 0;
+          let alignX = l.alignX === "right" ? 1 : l.alignX === "center" ? 2 : 0;
 
           let alignY = l.alignY === "bottom"
             ? 1