metabuilder/packages/ui_level4/seed/scripts/layout.lua

-- Level 4 layout module

---@class UIComponent
---@field type string
---@field props? table
---@field children? UIComponent[]

---@class User
---@field username string

---@class RenderContext
---@field nerdMode boolean
---@field user User

---@class Level4Module
---@field render fun(ctx: RenderContext): UIComponent
---@field tabs fun(ctx: RenderContext): UIComponent

local M = {}

---Renders the main Level 4 application builder layout
---@param ctx RenderContext
---@return UIComponent
function M.render(ctx)
  local desc = ctx.nerdMode
    and "Design declaratively with schemas and Lua scripts."
    or "Build visually with forms and drag-and-drop."
  return {
    type = "Box",
    props = { className = "min-h-screen bg-canvas" },
    children = {
      { type = "Level4Header", props = { username = ctx.user.username, nerdMode = ctx.nerdMode } },
      {
        type = "Container",
        props = { className = "max-w-7xl mx-auto px-4 py-8 space-y-8" },
        children = {
          { type = "IntroSection", props = { eyebrow = "Level 4", title = "Application Builder", description = desc } },
          M.tabs(ctx)
        }
      }
    }
  }
end

---Renders the tabbed interface for Schemas, Workflows, and Lua Scripts
---@param ctx RenderContext
---@return UIComponent
function M.tabs(ctx)
  return {
    type = "Tabs",
    props = { defaultValue = "schemas" },
    children = {
      {
        type = "TabsList",
        children = {
          { type = "TabsTrigger", props = { value = "schemas", text = "Schemas" } },
          { type = "TabsTrigger", props = { value = "workflows", text = "Workflows" } },
          { type = "TabsTrigger", props = { value = "lua", text = "Lua Scripts" } }
        }
      },
      { type = "TabsContent", props = { value = "schemas" }, children = { { type = "SchemasTab" } } },
      { type = "TabsContent", props = { value = "workflows" }, children = { { type = "WorkflowsTab" } } },
      { type = "TabsContent", props = { value = "lua" }, children = { { type = "LuaScriptsTab" } } }
    }
  }
end

return M