mono/packages/ui/docs/layoutcontainer-todos.md

Flexible Container — Implementation Todos

Phase 1: Data Model & Types

• Add ColumnDef, RowDef, FlexibleContainer types to LayoutManager.ts
• Add Zod schemas to schemas.ts (ColumnDefSchema, RowDefSchema, FlexibleContainerSchema, AnyContainerSchema)
• Update PageLayout.containers to AnyContainer[] union type
• Add rowId, column fields to WidgetInstance for cell placement
• Add type guards (isLayoutContainer, isFlexibleContainer, getLayoutContainers)
• Add findLayoutContainer(), findFlexContainer() narrowing helpers
• Add generateRowId(), addFlexibleContainer() methods
• Fix all internal closures in LayoutManager.ts to handle AnyContainer[]

Phase 2: Renderer Component

• Create FlexibleContainerRenderer.tsx — CSS Grid row-based renderer
• Integrate type-based dispatch in GenericCanvas.tsx
• Fix all downstream type errors (UserPageEdit.tsx, GenericCanvas.tsx)

Phase 3: UI Integration & Add Button

• Quick-add buttons in GenericCanvas.tsx empty state
• AddFlexContainerCommand in commands.ts (with undo)
• addFlexPageContainer method in LayoutContext.tsx
• handleAddFlexContainer handler in UserPageEdit.tsx
• CommandPicker palette entry (Ctrl+K → "Add Flexible Container")
• Ribbon bar "Flex Container" button (purple icon, Columns)
• Update commands.ts helpers for AnyContainer[] support

Phase 4: Row/Column Commands

• FlexAddRowCommand — adds row with 2 equal columns
• FlexRemoveRowCommand — removes row (with state capture for undo)
• FlexAddColumnCommand — adds 1fr column to row
• FlexRemoveColumnCommand — removes column by index (with state capture)
• Wire commands to FlexibleContainerRenderer UI buttons via executeCommand

Phase 5: Edit-Mode UI Polish

• Column drag handles for width adjustment
• Column width presets dropdown
• Row reordering (move up/down)

Phase 6: Email Rendering

• Add renderFlexibleContainer() to pages-email.ts
• columnsToPercentages() utility
• Dynamic <table> generation with MSO conditionals

Phase 7: Iteration & Polish

• Settings panel for row sizing mode (constrained/unconstrained)
• Per-cell alignment overrides
• Mobile responsive collapse
• PDF rendering support