expose h_align/v_align through full stack

display_hint becomes {kind, h_align, v_align} object in API, SQLite
gets alignment columns, SPA widget form gets alignment selects, layout
preview reflects actual alignment instead of hardcoded center

crates/adapters/config-sqlite/src/lib.rs

@@ -96,6 +96,14 @@ impl SqliteConfigStore {
         .execute(&self.pool)
         .await?;
 
+        // Add alignment columns to widgets (idempotent)
+        let _ = sqlx::query("ALTER TABLE widgets ADD COLUMN h_align TEXT NOT NULL DEFAULT 'left'")
+            .execute(&self.pool)
+            .await;
+        let _ = sqlx::query("ALTER TABLE widgets ADD COLUMN v_align TEXT NOT NULL DEFAULT 'top'")
+            .execute(&self.pool)
+            .await;
+
         Ok(())
     }
 }

crates/adapters/config-sqlite/src/repository/widgets.rs

@@ -34,15 +34,19 @@ impl SqliteConfigStore {
         config: &WidgetConfig,
     ) -> Result<(), SqliteConfigError> {
         let mappings_json = ser::mappings_to_json(&config.mappings)?;
-        let hint_str = ser::display_hint_to_str(&config.display_hint);
+        let hint_str = ser::display_hint_kind_to_str(&config.display_hint);
+        let h_align_str = ser::h_align_to_str(config.display_hint.h_align);
+        let v_align_str = ser::v_align_to_str(config.display_hint.v_align);
 
         sqlx::query(
-            "INSERT OR REPLACE INTO widgets (id, name, display_hint, data_source_id, mappings, max_data_size)
+            "INSERT OR REPLACE INTO widgets (id, name, display_hint, h_align, v_align, data_source_id, mappings, max_data_size)
-             VALUES (?, ?, ?, ?, ?, ?)"
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?)"
         )
         .bind(config.id as i64)
         .bind(&config.name)
         .bind(hint_str)
+        .bind(h_align_str)
+        .bind(v_align_str)
         .bind(config.data_source_id as i64)
         .bind(&mappings_json)
         .bind(config.max_data_size as i64)

crates/adapters/config-sqlite/src/serialization/widget.rs

@@ -1,9 +1,9 @@
 use crate::error::SqliteConfigError;
-use domain::{DisplayHint, DisplayHintKind, KeyMapping, WidgetConfig};
+use domain::{DisplayHint, DisplayHintKind, HAlign, KeyMapping, VAlign, WidgetConfig};
 use sqlx::Row;
 use sqlx::sqlite::SqliteRow;
 
-pub fn display_hint_to_str(hint: &DisplayHint) -> &'static str {
+pub fn display_hint_kind_to_str(hint: &DisplayHint) -> &'static str {
     match hint.kind {
         DisplayHintKind::IconValue => "icon_value",
         DisplayHintKind::TextBlock => "text_block",
@@ -11,17 +11,55 @@ pub fn display_hint_to_str(hint: &DisplayHint) -> &'static str {
     }
 }
 
-fn display_hint_from_str(s: &str) -> Result<DisplayHint, SqliteConfigError> {
+pub fn h_align_to_str(a: HAlign) -> &'static str {
+    match a {
+        HAlign::Left => "left",
+        HAlign::Center => "center",
+        HAlign::Right => "right",
+    }
+}
+
+pub fn v_align_to_str(a: VAlign) -> &'static str {
+    match a {
+        VAlign::Top => "top",
+        VAlign::Middle => "middle",
+        VAlign::Bottom => "bottom",
+    }
+}
+
+fn hint_kind_from_str(s: &str) -> Result<DisplayHintKind, SqliteConfigError> {
     match s {
-        "icon_value" => Ok(DisplayHint::new(DisplayHintKind::IconValue)),
+        "icon_value" => Ok(DisplayHintKind::IconValue),
-        "text_block" => Ok(DisplayHint::new(DisplayHintKind::TextBlock)),
+        "text_block" => Ok(DisplayHintKind::TextBlock),
-        "key_value" => Ok(DisplayHint::new(DisplayHintKind::KeyValue)),
+        "key_value" => Ok(DisplayHintKind::KeyValue),
         _ => Err(SqliteConfigError::Serialization(format!(
             "unknown display hint: {s}"
         ))),
     }
 }
 
+fn h_align_from_str(s: &str) -> Result<HAlign, SqliteConfigError> {
+    match s {
+        "left" => Ok(HAlign::Left),
+        "center" => Ok(HAlign::Center),
+        "right" => Ok(HAlign::Right),
+        _ => Err(SqliteConfigError::Serialization(format!(
+            "unknown h_align: {s}"
+        ))),
+    }
+}
+
+fn v_align_from_str(s: &str) -> Result<VAlign, SqliteConfigError> {
+    match s {
+        "top" => Ok(VAlign::Top),
+        "middle" => Ok(VAlign::Middle),
+        "bottom" => Ok(VAlign::Bottom),
+        _ => Err(SqliteConfigError::Serialization(format!(
+            "unknown v_align: {s}"
+        ))),
+    }
+}
+
 pub fn mappings_to_json(mappings: &[KeyMapping]) -> Result<String, SqliteConfigError> {
     let entries: Vec<serde_json::Value> = mappings
         .iter()
@@ -60,6 +98,8 @@ pub fn widget_from_row(row: &SqliteRow) -> Result<WidgetConfig, SqliteConfigErro
     let id: i64 = row.get("id");
     let name: String = row.get("name");
     let hint_str: String = row.get("display_hint");
+    let h_align_str: String = row.get("h_align");
+    let v_align_str: String = row.get("v_align");
     let ds_id: i64 = row.get("data_source_id");
     let mappings_json: String = row.get("mappings");
     let max_size: i64 = row.get("max_data_size");
@@ -67,7 +107,11 @@ pub fn widget_from_row(row: &SqliteRow) -> Result<WidgetConfig, SqliteConfigErro
     Ok(WidgetConfig {
         id: id as u16,
         name,
-        display_hint: display_hint_from_str(&hint_str)?,
+        display_hint: DisplayHint {
+            kind: hint_kind_from_str(&hint_str)?,
+            h_align: h_align_from_str(&h_align_str)?,
+            v_align: v_align_from_str(&v_align_str)?,
+        },
         data_source_id: ds_id as u16,
         mappings: mappings_from_json(&mappings_json)?,
         max_data_size: max_size as u16,

crates/adapters/http-api/tests/api_tests.rs

@@ -86,7 +86,7 @@ async fn create_and_get_widget() {
     let body = r#"{
         "id": 1,
         "name": "weather",
-        "display_hint": "icon_value",
+        "display_hint": {"kind": "icon_value", "h_align": "left", "v_align": "top"},
         "data_source_id": 10,
         "mappings": [{"source_path": "$.temp", "target_key": "temperature"}]
     }"#;
@@ -115,8 +115,8 @@ async fn create_and_get_widget() {
 async fn list_widgets() {
     let app = test_app();
 
-    let w1 = r#"{"id":1,"name":"a","display_hint":"icon_value","data_source_id":1,"mappings":[]}"#;
+    let w1 = r#"{"id":1,"name":"a","display_hint":{"kind":"icon_value"},"data_source_id":1,"mappings":[]}"#;
-    let w2 = r#"{"id":2,"name":"b","display_hint":"key_value","data_source_id":2,"mappings":[]}"#;
+    let w2 = r#"{"id":2,"name":"b","display_hint":{"kind":"key_value"},"data_source_id":2,"mappings":[]}"#;
 
     app.clone()
         .oneshot(authed_json_request("POST", "/api/widgets", Some(w1)))
@@ -142,8 +142,7 @@ async fn list_widgets() {
 async fn delete_widget() {
     let app = test_app();
 
-    let body =
+    let body = r#"{"id":1,"name":"a","display_hint":{"kind":"icon_value"},"data_source_id":1,"mappings":[]}"#;
-        r#"{"id":1,"name":"a","display_hint":"icon_value","data_source_id":1,"mappings":[]}"#;
     app.clone()
         .oneshot(authed_json_request("POST", "/api/widgets", Some(body)))
         .await

crates/api-types/src/widget.rs

@@ -7,11 +7,28 @@ pub struct KeyMappingDto {
     pub target_key: String,
 }
 
+#[derive(Serialize, Deserialize)]
+pub struct DisplayHintDto {
+    pub kind: String,
+    #[serde(default = "default_h_align")]
+    pub h_align: String,
+    #[serde(default = "default_v_align")]
+    pub v_align: String,
+}
+
+fn default_h_align() -> String {
+    "left".into()
+}
+
+fn default_v_align() -> String {
+    "top".into()
+}
+
 #[derive(Serialize, Deserialize)]
 pub struct WidgetDto {
     pub id: u16,
     pub name: String,
-    pub display_hint: String,
+    pub display_hint: DisplayHintDto,
     pub data_source_id: u16,
     pub mappings: Vec<KeyMappingDto>,
     pub max_data_size: u16,
@@ -21,7 +38,7 @@ pub struct WidgetDto {
 pub struct CreateWidgetDto {
     pub id: u16,
     pub name: String,
-    pub display_hint: String,
+    pub display_hint: DisplayHintDto,
     pub data_source_id: u16,
     pub mappings: Vec<KeyMappingDto>,
     #[serde(default = "default_max_data_size")]
@@ -32,17 +49,40 @@ fn default_max_data_size() -> u16 {
     2048
 }
 
+fn kind_to_str(kind: &DisplayHintKind) -> &'static str {
+    match kind {
+        DisplayHintKind::IconValue => "icon_value",
+        DisplayHintKind::TextBlock => "text_block",
+        DisplayHintKind::KeyValue => "key_value",
+    }
+}
+
+fn h_align_to_str(a: HAlign) -> &'static str {
+    match a {
+        HAlign::Left => "left",
+        HAlign::Center => "center",
+        HAlign::Right => "right",
+    }
+}
+
+fn v_align_to_str(a: VAlign) -> &'static str {
+    match a {
+        VAlign::Top => "top",
+        VAlign::Middle => "middle",
+        VAlign::Bottom => "bottom",
+    }
+}
+
 impl From<&WidgetConfig> for WidgetDto {
     fn from(w: &WidgetConfig) -> Self {
         Self {
             id: w.id,
             name: w.name.clone(),
-            display_hint: match w.display_hint.kind {
+            display_hint: DisplayHintDto {
-                DisplayHintKind::IconValue => "icon_value",
+                kind: kind_to_str(&w.display_hint.kind).into(),
-                DisplayHintKind::TextBlock => "text_block",
+                h_align: h_align_to_str(w.display_hint.h_align).into(),
-                DisplayHintKind::KeyValue => "key_value",
+                v_align: v_align_to_str(w.display_hint.v_align).into(),
-            }
+            },
-            .into(),
             data_source_id: w.data_source_id,
             mappings: w
                 .mappings
@@ -59,16 +99,32 @@ impl From<&WidgetConfig> for WidgetDto {
 
 impl CreateWidgetDto {
     pub fn into_domain(self) -> Result<WidgetConfig, String> {
-        let hint = match self.display_hint.as_str() {
+        let kind = match self.display_hint.kind.as_str() {
-            "icon_value" => DisplayHint::new(DisplayHintKind::IconValue),
+            "icon_value" => DisplayHintKind::IconValue,
-            "text_block" => DisplayHint::new(DisplayHintKind::TextBlock),
+            "text_block" => DisplayHintKind::TextBlock,
-            "key_value" => DisplayHint::new(DisplayHintKind::KeyValue),
+            "key_value" => DisplayHintKind::KeyValue,
-            h => return Err(format!("unknown display_hint: {h}")),
+            h => return Err(format!("unknown display_hint kind: {h}")),
+        };
+        let h_align = match self.display_hint.h_align.as_str() {
+            "left" => HAlign::Left,
+            "center" => HAlign::Center,
+            "right" => HAlign::Right,
+            h => return Err(format!("unknown h_align: {h}")),
+        };
+        let v_align = match self.display_hint.v_align.as_str() {
+            "top" => VAlign::Top,
+            "middle" => VAlign::Middle,
+            "bottom" => VAlign::Bottom,
+            v => return Err(format!("unknown v_align: {v}")),
         };
         Ok(WidgetConfig {
             id: self.id,
             name: self.name,
-            display_hint: hint,
+            display_hint: DisplayHint {
+                kind,
+                h_align,
+                v_align,
+            },
             data_source_id: self.data_source_id,
             mappings: self
                 .mappings

spa/src/api/types.ts

@@ -1,4 +1,12 @@
-export type DisplayHint = "icon_value" | "text_block" | "key_value"
+export type DisplayHintKind = "icon_value" | "text_block" | "key_value"
+export type HAlign = "left" | "center" | "right"
+export type VAlign = "top" | "middle" | "bottom"
+
+export interface DisplayHint {
+  kind: DisplayHintKind
+  h_align: HAlign
+  v_align: VAlign
+}
 export type SourceType = "weather" | "media" | "rss" | "http_json" | "webhook"
 export type SizingType = "fixed" | "flex"
 export type Direction = "row" | "column"

spa/src/components/layout-preview.tsx

@@ -54,6 +54,11 @@ export function LayoutPreview({
           const box = bounds.get(wid)
           if (!box) return null
           const w = widgets.find((w) => w.id === wid)
+          const hAlign = w?.display_hint?.h_align ?? "left"
+          const vAlign = w?.display_hint?.v_align ?? "top"
+          const flexAlign = hAlign === "center" ? "center" : hAlign === "right" ? "flex-end" : "flex-start"
+          const flexJustify = vAlign === "middle" ? "center" : vAlign === "bottom" ? "flex-end" : "flex-start"
+          const textAlign = hAlign === "center" ? "center" as const : hAlign === "right" ? "right" as const : "left" as const
           return (
             <div
               key={wid}
@@ -67,8 +72,8 @@ export function LayoutPreview({
                 boxSizing: "border-box",
                 display: "flex",
                 flexDirection: "column",
-                alignItems: "center",
+                alignItems: flexAlign,
-                justifyContent: "center",
+                justifyContent: flexJustify,
                 overflow: "hidden",
                 padding: 2 * scale,
               }}
@@ -77,7 +82,7 @@ export function LayoutPreview({
                 style={{
                   fontSize: 10 * scale,
                   color: colorToCSS(theme.text),
-                  textAlign: "center",
+                  textAlign,
                   lineHeight: 1.2,
                 }}
               >
@@ -88,10 +93,10 @@ export function LayoutPreview({
                   style={{
                     fontSize: 8 * scale,
                     color: colorToCSS(theme.accent),
-                    textAlign: "center",
+                    textAlign,
                   }}
                 >
-                  {w.display_hint}
+                  {w.display_hint.kind}
                 </span>
               )}
             </div>

spa/src/pages/widgets.tsx

@@ -7,7 +7,7 @@ import {
   useWidgetPreview,
 } from "@/api/widgets"
 import { useDataSources } from "@/api/data-sources"
-import type { Widget, DisplayHint, KeyMapping } from "@/api/types"
+import type { Widget, DisplayHintKind, HAlign, VAlign, KeyMapping } from "@/api/types"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -46,13 +46,12 @@ import { Badge } from "@/components/ui/badge"
 import { Plus, Pencil, Trash2, X, Eye } from "lucide-react"
 import { toast } from "sonner"
 
-const DISPLAY_HINTS: DisplayHint[] = ["icon_value", "text_block", "key_value"]
+const DISPLAY_HINT_KINDS: DisplayHintKind[] = ["icon_value", "text_block", "key_value"]
-
 
 const EMPTY: Widget = {
   id: 0,
   name: "",
-  display_hint: "icon_value",
+  display_hint: { kind: "icon_value", h_align: "left", v_align: "top" },
   data_source_id: 0,
   mappings: [],
   max_data_size: 2048,
@@ -141,7 +140,7 @@ export function WidgetsPage() {
                 <div className="space-y-1">
                   <CardTitle className="text-base">{w.name}</CardTitle>
                   <CardDescription className="flex items-center gap-2">
-                    <Badge variant="secondary">{w.display_hint}</Badge>
+                    <Badge variant="secondary">{w.display_hint.kind}</Badge>
                     <span>source: {sourceName(w.data_source_id)}</span>
                     <span>{w.mappings.length} mapping(s)</span>
                   </CardDescription>
@@ -326,14 +325,14 @@ function WidgetForm({
       <div className="grid gap-2">
         <Label>Display Hint</Label>
         <Select
-          value={value.display_hint}
+          value={value.display_hint.kind}
-          onValueChange={(v) => set("display_hint", v as DisplayHint)}
+          onValueChange={(v) => set("display_hint", { ...value.display_hint, kind: v as DisplayHintKind })}
         >
           <SelectTrigger>
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {DISPLAY_HINTS.map((h) => (
+            {DISPLAY_HINT_KINDS.map((h) => (
               <SelectItem key={h} value={h}>
                 {h}
               </SelectItem>
@@ -341,6 +340,40 @@ function WidgetForm({
           </SelectContent>
         </Select>
       </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="grid gap-2">
+          <Label>H Align</Label>
+          <Select
+            value={value.display_hint.h_align}
+            onValueChange={(v) => set("display_hint", { ...value.display_hint, h_align: v as HAlign })}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="left">Left</SelectItem>
+              <SelectItem value="center">Center</SelectItem>
+              <SelectItem value="right">Right</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="grid gap-2">
+          <Label>V Align</Label>
+          <Select
+            value={value.display_hint.v_align}
+            onValueChange={(v) => set("display_hint", { ...value.display_hint, v_align: v as VAlign })}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="top">Top</SelectItem>
+              <SelectItem value="middle">Middle</SelectItem>
+              <SelectItem value="bottom">Bottom</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
       <div className="grid gap-2">
         <Label>Data Source</Label>
         <Select