https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/Recent content in Build a custom Compose toolkit on Staticvar LearnHugo -- gohugo.ioen-ushttps://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/01-compose-boundary/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/01-compose-boundary/Learning goal Separate the machinery supplied by Compose from the UI policy that a new surface requires. Start with the split “Compose” is often used to mean several layers at once. For a new surface, that shortcut hides the most important design decision. DiagramExpandmindmap root((Compose ecosystem)) Compiler transforms composable calls inserts group calls and source-derived keys passes a Composer Runtime Composer records positional information slot table remember snapshot state recomposition effects tree changes Compose UI LayoutNode measurement drawing modifiers input semantics Foundation and Material Text scrolling controls design system Atlas UI reuses the first two branches.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/02-multiplatform-foundation/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/02-multiplatform-foundation/Learning goal Place the reusable toolkit engine in Kotlin Multiplatform commonMain and keep platform integration behind narrow contracts. Source-set map DiagramExpandflowchart TD commonMain[commonMain<br/>nodes · Applier · composables<br/>layout · frames · semantics] commonTest[commonTest<br/>tree · layout · frame tests] mac[macosArm64Main<br/>optional adapter] linux[linuxX64Main<br/>optional adapter] win[mingwX64Main<br/>optional adapter] mac -->|depends on| commonMain linux -->|depends on| commonMain win -->|depends on| commonMain commonTest -. tests .-> commonMain The arrows follow source-set dependency direction: platform source sets consume shared policy from commonMain.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/03-surface-contract/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/03-surface-contract/Learning goal Create the smallest boundary through which a complete logical frame can reach any surface. Think in frames, not platform calls The toolkit should not know whether a frame becomes pixels, hardware instructions, remote messages, or test data. DiagramExpandflowchart LR Painter --> Frame[SurfaceFrame] Frame --> Contract{{Surface.present}} Contract --> Recorder[RecordingSurface] Contract --> Device[Future device adapter] Contract --> Remote[Future remote adapter] Typed surface vocabulary Start with explicit units and commands: package atlas.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/04-retained-node-tree/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/04-retained-node-tree/Learning goal Define the objects that survive recomposition and carry UI intent into layout and rendering. Tree versus frame DiagramExpandflowchart LR subgraph Retained[Retained across frames] Root --> Group Group --> Title["TextNode: Counter"] Group --> Value["TextNode: Count 0"] end Retained -->|layout + paint| Frame1[Frame 1] Retained -->|property update| Changed["Value.text = Count 1"] Changed -->|layout + paint| Frame2[Frame 2] Nodes hold identity and current properties. Frames are temporary output snapshots. Geometry types package atlas.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/05-applier/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/05-applier/Learning goal Implement the structural bridge through which Compose Runtime maintains the Atlas node tree. The bridge DiagramExpandsequenceDiagram participant Apply as Runtime apply phase participant Applier as AtlasApplier participant Current as current ContainerNode Apply->>Applier: insertTopDown(0, group) [no-op] Apply->>Applier: down(group) Applier->>Applier: current = group Apply->>Applier: insertTopDown(0, text) [no-op] Apply->>Applier: down(text) Apply->>Applier: apply TextNode property updates Apply->>Applier: up() Apply->>Applier: insertBottomUp(0, text) Applier->>Current: attach text to current group Apply->>Applier: up() Apply->>Applier: insertBottomUp(0, group) An Applier<N> navigates and structurally edits a tree of N.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/06-node-emitting-composables/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/06-node-emitting-composables/Learning goal Define a Compose target and connect declarative Atlas components to retained Atlas nodes. From call to node DiagramExpandflowchart LR Call["Text(Hello)"] --> Compiler[Compose compiler transformation] Compiler --> CN[ComposeNode] CN -->|new call-site identity| Factory[create TextNode] CN -->|changed parameter| Update[record property update] Factory --> Applier Update --> Node[existing TextNode] Mark the custom target A target marker lets the Compose compiler distinguish Atlas composables from composables intended for another Applier family. package atlas.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/07-composition-host/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/07-composition-host/Learning goal Understand the process owner that coordinates composition, snapshot notifications, frame time, rendering, and cleanup. The host is an orchestrator DiagramExpandflowchart TD Content[AtlasContent] --> Composition StateWrite[Snapshot state write] --> Notify[Apply notifications] Notify --> Recomposer Clock[MonotonicFrameClock] --> Recomposer Recomposer -->|apply changes| Applier Applier --> Tree Applier -->|onEndChanges| RenderRequest RenderRequest --> Renderer Tree --> Renderer Renderer --> Surface DriverEnd[driver ends or critical work fails] --> TerminalState[terminal-state coordinator] TerminalState --> Lifecycle Lifecycle -->|dispose| Composition Lifecycle -->|cancel/join| Recomposer Lifecycle -->|cancel| Clock Lifecycle -->|cancel/join| OwnerJob[owner job] Lifecycle -->|dispose| Notify The host does not decide layout or component behavior.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/08-state-and-identity/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/08-state-and-identity/Learning goal Trace a state mutation into an in-place node update and predict when identity is retained, moved, or replaced. Counter example @Composable @AtlasComposable fun Counter(count: Int, onIncrement: () -> Unit) { Group { Text("Count: $count") Button(label = "Increment", onActivate = onIncrement) } } @Composable @AtlasComposable fun RememberingCounter() { var count by remember { mutableStateOf(0) } Counter(count = count, onIncrement = { count++ }) } Button is developed fully after events are introduced; for now, focus on its state-writing callback.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/09-layout-and-rendering/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/09-layout-and-rendering/Learning goal Turn retained intent into geometry and then into a complete SurfaceFrame that is not mutated after construction. Separate the phases DiagramExpandflowchart LR Tree[Retained node tree] --> Measure Measure --> Place Place --> Paint Paint --> Frame[SurfaceFrame] Frame --> Surface Measure: a parent offers constraints; a child chooses a size. Place: a parent assigns child positions. Paint: nodes append commands using final geometry. Present: the adapter receives one complete frame.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/10-events-focus-semantics/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/10-events-focus-semantics/Learning goal Return typed interaction from the surface to component state without coupling components to a platform protocol. The feedback loop DiagramExpandflowchart LR NativeInput[native or device input] --> Adapter Adapter -->|SurfaceEvent| EventSink EventSink -->|enqueue on owner context| Router Router --> Target[focused or hit-tested node] Target --> Handler Handler --> State State --> Runtime Runtime --> Tree Tree -->|new frame| Surface Output uses Surface.present. Input uses a separate contract because a surface may be output-only, and input capabilities can evolve independently.https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/11-library-boundaries/Mon, 01 Jan 0001 00:00:00 +0000https://learn.staticvar.dev/courses/compose-for-new-surfaces/01-build-a-custom-compose-toolkit/11-library-boundaries/Learning goal Turn the learning implementation into a reusable library with explicit public boundaries and layered evidence. Final architecture DiagramExpandflowchart TB subgraph App Content[Atlas composables] State[application state] end subgraph Library[atlas-ui commonMain] Components[public components] Host[AtlasHost] Lifecycle[terminal state + cleanup] RuntimeBridge[ComposeNode + AtlasApplier] Nodes[internal retained nodes] Layout[layout + painter] SurfaceContract[Surface / SurfaceFrame] InputContract[EventSink / SurfaceEvent] DriverContract[FrameDriver] Router[event router] Semantics[semantics + focus] end subgraph Adapters Recording[recording adapters] Concrete[real surface adapters] end TestHarness[test harness] State --> Content --> Components --> RuntimeBridge --> Nodes --> Layout --> SurfaceContract InputContract --> Router --> State DriverContract --> Host --> RuntimeBridge Host -->|owns| Router Host -->|owns| Lifecycle Lifecycle -->|cancel / dispose / join| RuntimeBridge Semantics --> Nodes Semantics --> Router Recording -.