lecodes-cli 0.13.1 → 0.14.0

package/runtime/sdk/ui/UITabs.ts

@@ -1,15 +1,16 @@
 import { PagerElement, type UIPager } from "./UIPager"
-import { ScreenElement, type UIScreen } from "./UIScreen"
+import { ScreenElement, UIScreen } from "./UIScreen"
 import { UIButton } from "./UIButton"
 import { UIRow, UIColumn, type UIRow as UIRowType } from "./UIContainer"
 import { UIText } from "./UIText"
 import { UIImage, type ImageSource } from "./UIImage"
+import type { UIChildArg } from "./UINode"
 
 // UITabs — the standard bottom-tab shell, prewired: a UIScreen composing [ UIPager (flexGrow: 1),
 // tab bar ]. Pure SDK composition over the pager — zero new ABI, works wherever UIPager does.
-// The build-mode twin of the design scaffold's `defineTabs` (lecodes-design/tabbar-surface.md):
-// same keyed config, same `tab-<id>` button names, same theme variables with the same fallbacks,
-// so a designed mockup and the built app render identically.
+// `defineTabs` (below) is its design-stage twin (lecodes-design/tabbar-surface.md): the same keyed
+// config without screens, mounted per-file with a literal tab id. They share the constants and bar
+// geometry in this file, so a designed mockup and the built app render identically.
 
 /** Active/inactive/bar colors ride the theme — one `theme({ primaryColor, mutedColor, tabbarBg })`
  *  call restyles the bar app-wide; the fallbacks keep an unthemed app looking right. */
@@ -173,3 +174,63 @@ export class TabsElement extends ScreenElement {
 export function UITabs(tabs: Record<string, UITabDef>): UITabs {
   return new TabsElement(tabs) as unknown as UITabs
 }
+
+// ---- defineTabs — the design-stage twin ---------------------------------------------------------
+
+/** A `defineTabs` tab: `label` + optional `icon` (an `assetIcon("lucide:…")` call — never a
+ *  hand-written source object). `UITabDef` is this plus the tab's root `screen`. */
+export type TabDef = Omit<UITabDef, "screen">
+
+/** What `defineTabs` returns: the bar (mount it yourself when the screen owns its whole layout)
+ *  and the standard screen shell around it. `active` must be a declared tab id, as a literal. */
+export type TabsHandle<T extends Record<string, TabDef>> = {
+  /** Tab ids in declaration order. */
+  ids: (keyof T & string)[]
+  /** The bar alone — one button per tab, the `active` one highlighted. */
+  bar(active: keyof T & string): UIRowType
+  /** A screen sitting ON the bar: `[ padded content column, bar ]`. */
+  screen(active: keyof T & string, ...children: UIChildArg[]): UIScreen
+}
+
+/**
+ * Declare a tab bar WITHOUT screens — the design-stage twin of {@link UITabs} (same keys, same
+ * `tab-<id>` button names, same theme variables), for mockups where every screen is its own file
+ * and mounts the bar with a literal tab id:
+ *
+ * ```ts
+ * export const mainTabs = defineTabs({
+ *   home:    { label: "Home",    icon: assetIcon("lucide:house") },
+ *   profile: { label: "Profile", icon: assetIcon("lucide:user") },
+ * })
+ * // in a screen file:
+ * export default () => mainTabs.screen("home", [ ...content ])
+ * ```
+ *
+ * Restyle through the theme — `theme({ primaryColor, mutedColor, tabbarBg, screenBg })` recolors
+ * every bar at once. The built app passes the same keys (plus each tab's root screen) to `UITabs`,
+ * which renders the identical bar interactively.
+ */
+export function defineTabs<T extends Record<string, TabDef>>(tabs: T): TabsHandle<T> {
+  const ids = Object.keys(tabs) as (keyof T & string)[]
+
+  const bar = (active: keyof T & string) =>
+    UIRow(ids.map((id) => {
+      const def = tabs[id]
+      const color = id === active ? ACTIVE : INACTIVE
+      return UIButton(
+        def.icon ? UIImage(def.icon).style({ width: 22, height: 22, tintColor: color }) : null,
+        UIText(def.label).style({ fontSize: 10, color }),
+      ).style({ name: `tab-${id}`, flexDirection: "column", gap: 3, flex: 1, pt: 8, pb: 6 })
+    })).style({
+      name: "tabbar", bgColor: BAR_BG, pb: "comfort-bottom",
+      borderTopWidth: 1, borderTopColor: BAR_BORDER,
+    })
+
+  const screen = (active: keyof T & string, ...children: UIChildArg[]) =>
+    UIScreen(
+      UIColumn(...children).style({ flexGrow: 1, p: 16, pt: "safe-top" }),
+      bar(active),
+    ).style({ bgColor: SCREEN_BG })
+
+  return { ids, bar, screen }
+}