Machine Coding

Recursive component that takes a tree node and renders folder/file. Toggle expansion state per node id (Set<string> in a parent or normalized store). Tri-state checkboxes propagate down on parent click and up on child change.

Week grid: time-axis vertical (hours), day-columns horizontal. Events absolutely positioned within their day column: `top = startMinutes * pxPerMinute`, `height = duration * pxPerMinute`. Overlapping events use the cluster-and-column layout algorithm to share horizontal space. Multi-day events span the day columns above the grid. Click empty to create, drag to move/resize.

Imperative API (`modal.open(<Comp/>)`) backed by a React context store of open modals; renders via a single portal at the root; supports stacking, per-modal options (size, dismissible), focus trap, scroll lock, Esc + outside-click close, and returning a promise for confirm/cancel flows. Decouples 'who opens' from 'who renders'.

Track a startedAt timestamp + accumulated ms across pauses; compute display from Date.now(). Use requestAnimationFrame (or setInterval) just to trigger re-renders. Don't store ticks in state.

Normalize state (id-keyed map + ordered ids). Memoize the Row component by id. Selector-style subscriptions so toggling one item only re-renders that row. Lazy-load the Edit modal. Confirm-on-duplicate.

Imperative API (toast.success/error/...) backed by a global store. Render via Portal with aria-live='polite'. Auto-dismiss with pause-on-hover. Cap visible count and queue overflow.

Each item is a header (button) + a panel. Use real <button> + aria-expanded + aria-controls. Support single-open or multi-open mode. Animate height with grid-template-rows: 0fr → 1fr (modern, no JS measure).

Render via Portal, lock body scroll, trap focus inside the dialog, restore focus on close, close on Esc + backdrop click, and use role='dialog' aria-modal='true' with labelled title.

Compound components: <Tabs><TabList><Tab/></TabList><TabPanels><TabPanel/></TabPanels></Tabs>. Active tab in context. Keyboard: Left/Right arrows move focus, Home/End jump. Roles: tablist, tab, tabpanel with aria-controls / aria-labelledby pairing.

Controlled input + debounced async suggestion fetch + AbortController to drop stale responses + keyboard navigation (arrows, Enter, Esc) + ARIA combobox pattern. Cache by query string.

Track active index. Render slides in a flex row, transform: translateX(-index * 100%). Auto-advance with setInterval (pause on hover/focus). Lazy-load adjacent images. Keyboard arrows + ARIA region with live announcement.

Headless data layer (sort/filter/pagination state) decoupled from rendering. Column config drives header + cell render. Server vs client mode. Use TanStack Table headless under the hood; don't reinvent.

Catch-all category. Common forms: shortest path (BFS for unweighted, Dijkstra for weighted, Bellman-Ford for negative edges, A* with heuristic), minimum spanning tree (Kruskal/Prim), max-flow/min-cut (Ford-Fulkerson), strongly connected components (Tarjan/Kosaraju), topological sort (DFS or Kahn). Recognize the problem shape, then pick the algorithm.