code: tsx,nextjs,frontends (12 files)

frontends/nextjs/src/components/editors/lua/LuaEditorToolbar.tsx

@@ -1,4 +1,4 @@
-import { Play, ShieldCheck } from '@phosphor-icons/react'
+import { Play, ShieldCheck } from '@/fakemui/icons'
 
 import { Button, CardDescription, CardHeader, CardTitle } from '@/components/ui'
 

frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary.tsx

@@ -1,4 +1,4 @@
-import { BookOpen } from '@phosphor-icons/react'
+import { BookOpen } from '@/fakemui/icons'
 import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
 

frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { MagnifyingGlass } from '@phosphor-icons/react'
+import { MagnifyingGlass } from '@/fakemui/icons'
 
 import { Input, ScrollArea, TabsList, TabsTrigger } from '@/components/ui'
 import { LUA_SNIPPET_CATEGORIES } from '@/lib/lua-snippets'

frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetDialog.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, Code, Copy, Tag } from '@phosphor-icons/react'
+import { ArrowRight, Check, Code, Copy, Tag } from '@/fakemui/icons'
 
 import {
   Badge,

frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetList.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, Code, Copy, Tag } from '@phosphor-icons/react'
+import { ArrowRight, Check, Code, Copy, Tag } from '@/fakemui/icons'
 
 import {
   Badge,

frontends/nextjs/src/components/editors/lua/lua-editor/configuration/LuaScriptDetails.tsx

@@ -1,4 +1,4 @@
-import { Plus, Trash } from '@phosphor-icons/react'
+import { Plus, Trash } from '@/fakemui/icons'
 
 import { Badge, Button, CardContent, Input, Label } from '@/components/ui'
 import type { LuaScript } from '@/lib/level-types'

frontends/nextjs/src/components/editors/lua/lua-editor/configuration/LuaScriptsListCard.tsx

@@ -1,4 +1,4 @@
-import { Plus, Trash } from '@phosphor-icons/react'
+import { Plus, Trash } from '@/fakemui/icons'
 
 import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
 import type { LuaScript } from '@/lib/level-types'

frontends/nextjs/src/components/editors/lua/lua-editor/execution/LuaExecutionPreview.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle, XCircle } from '@phosphor-icons/react'
+import { CheckCircle, XCircle } from '@/fakemui/icons'
 
 import { Card, CardContent, CardHeader, CardTitle, Label } from '@/components/ui'
 import type { LuaExecutionResult } from '@/lib/lua-engine'

frontends/nextjs/src/components/editors/lua/lua-editor/toolbar/LuaEditorToolbar.tsx

@@ -1,4 +1,4 @@
-import { Play, ShieldCheck } from '@phosphor-icons/react'
+import { Play, ShieldCheck } from '@/fakemui/icons'
 
 import { Button, CardDescription, CardHeader, CardTitle } from '@/components/ui'
 import type { LuaScript } from '@/lib/level-types'

frontends/nextjs/src/components/editors/schema/SchemaEditorLevel4.tsx

@@ -1,4 +1,4 @@
-import { Plus, Trash } from '@phosphor-icons/react'
+import { Plus, Trash } from '@/fakemui/icons'
 
 import { SchemaTabs } from '@/components/schema/level4/Tabs'
 import { useSchemaLevel4 } from '@/components/schema/level4/useSchemaLevel4'

packages/ui_level4/seed/scripts/layout.lua

@@ -1,68 +1,3 @@
--- 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
+-- Level 4 layout module redirect
+-- This file now redirects to the modular implementation in layout/
+return require("layout.init")

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

@@ -4,17 +4,23 @@
 ---@alias GodSidebarFn fun(items?: table[]): table
 ---@alias GodToolbarFn fun(actions?: table[]): table
 ---@alias GodContentFn fun(children?: table[]): table
+---@alias RenderFn fun(ctx: RenderContext): UIComponent
+---@alias TabsFn fun(ctx: RenderContext): UIComponent
 
 ---@class LayoutModule
 ---@field god_sidebar GodSidebarFn
 ---@field god_toolbar GodToolbarFn
 ---@field god_content GodContentFn
+---@field render RenderFn
+---@field tabs TabsFn
 
 ---@type LayoutModule
 local layout = {
   god_sidebar = require("layout.god_sidebar"),
   god_toolbar = require("layout.god_toolbar"),
-  god_content = require("layout.god_content")
+  god_content = require("layout.god_content"),
+  render = require("layout.render"),
+  tabs = require("layout.tabs")
 }
 
 return layout