Merge pull request #42 from bombshell-dev/refactor-alignment

refactor: alignment to use string literals instead of magic numbers

Author: dreyfus92

examples/inline-regions/index.ts

@@ -333,7 +333,7 @@ function box(msg: string, fg: number, border: number): Op[] {
         height: grow(),
         direction: "ttb",
         padding: { left: 1 },
-        alignY: 2,
+        alignY: "center",
       },
       border: {
         color: border,

examples/keyboard/index.ts

@@ -225,8 +225,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
@@ -565,8 +565,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 },
       },
     }),
@@ -583,7 +583,7 @@ function keyboard(ctx: AppContext): Op[] {
       layout: {
         width: grow(),
         direction: "ltr",
-        alignY: 0,
+        alignY: "top",
         padding: { bottom: 1 },
       },
     }),
@@ -634,7 +634,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());
@@ -648,7 +648,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 },

ops.ts

@@ -132,7 +132,15 @@ export function pack(
           );
           o += 4;
 
-          view.setUint32(o, (l.alignX ?? 0) | ((l.alignY ?? 0) << 8), true);
+          let alignX = l.alignX === "right" ? 1 : l.alignX === "center" ? 2 : 0;
+
+          let alignY = l.alignY === "bottom"
+            ? 1
+            : l.alignY === "center"
+            ? 2
+            : 0;
+
+          view.setUint32(o, alignX | (alignY << 8), true);
           o += 4;
         }
 
@@ -283,8 +291,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 };

specs/renderer-spec.md

@@ -641,9 +641,9 @@ The `open()` constructor currently accepts the following property groups in its
 `props` parameter:
 
 - **`layout`** — sizing (width and height, specified via sizing helpers),
-  padding (per-side), alignment (currently numeric enum values, with a planned
-  transition to string literals), direction (top-to-bottom or left-to-right),
-  and gap
+  padding (per-side), alignment (`alignX`: `"left"` | `"center"` | `"right"`;
+  `alignY`: `"top"` | `"center"` | `"bottom"`, defaulting to left/top when
+  omitted), direction (top-to-bottom or left-to-right), and gap
 - **`border`** — per-side border widths and border color
 - **`cornerRadius`** — per-corner radius values, producing rounded box-drawing
   characters
@@ -657,8 +657,7 @@ The `text()` constructor accepts: `color`, `bg`, `fontSize`, `letterSpacing`,
 `strikethrough`).
 
 These property groups represent the current implementation surface. New groups
-and fields have been added incrementally and more may follow. Alignment values
-are expected to transition from numeric to string-literal form.
+and fields have been added incrementally and more may follow.
 
 **Border width and layout interaction.** In the underlying layout engine (Clay),
 border configuration does not affect layout computation. This is Clay's intended

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({