1. DashRenderer constructor
   └─ ReactDOM.createRoot('#react-entry-point')
      └─ <AppProvider />

2. AppProvider creates Redux store
   └─ Registers observers for callback processing

3. APIController fetches from server
   ├─ GET /_dash-layout → component tree
   ├─ GET /_dash-dependencies → callback definitions
   └─ Dispatches setLayout, setGraphs, setPaths

4. Config includes children_props from ComponentRegistry
   └─ Stored in window.__dashprivate_childrenProps

5. hydrateInitialOutputs()
   ├─ Validates callbacks against layout
   ├─ Triggers initial callbacks
   └─ Sets appLifecycle: 'HYDRATED'

6. DashWrapper renders component tree

# Example: Python component class
class Dropdown(Component):
    _children_props = ['options.[].label', 'options.[].title']
    # ...

crawlLayout(object, func, currentPath, extraPath)

// For each component:
// 1. Call func(object, currentPath)
// 2. If props.children exists, crawl it
// 3. For each path in children_props[namespace][type]:
//    - Parse the pattern (handle [], {})
//    - Crawl that path to find nested components

// Component packages register on window
window.dash_html_components = { Div, Span, H1, ... };
window.dash_core_components = { Dropdown, Graph, Input, ... };

// Registry.js resolves {type, namespace} → React component
Registry.resolve({type: 'Div', namespace: 'dash_html_components'})
// → window.dash_html_components.Div

// Component calls setProps
this.props.setProps({ value: newValue });

// DashWrapper.tsx handles this:
// 1. dispatch(updateProps(...))     → Updates layout in Redux
// 2. dispatch(notifyObservers(...)) → Finds and queues callbacks

// actions/index.js
export function notifyObservers({id, props}) {
  return async function (dispatch, getState) {
    const {graphs, paths} = getState();
    dispatch(
      addRequestedCallbacks(includeObservers(id, props, graphs, paths))
    );
  };
}

REQUESTED → PRIORITIZED → EXECUTING → EXECUTED → STORED
                              ↓
                          WATCHED (promises)
                              ↓
                          BLOCKED (waiting on deps)

{
  layout: { ... },              // Component tree

  layoutHashes: {               // Change tracking for memoization
    "path": { hash, changedProps }
  },

  paths: {                      // ID → path mapping
    strs: { "my-id": [...path] },
    objs: { "type,index": [...] }  // Wildcards
  },

  callbacks: {                  // Pipeline states
    requested, prioritized, blocked,
    executing, watched, executed, stored
  },

  graphs: {                     // Dependency graph
    inputMap: { "id": { "prop": [callbacks] } }
  },

  config: {
    children_props: { ... },    // From ComponentRegistry
    // ...
  },

  isLoading: boolean
}

// String IDs
paths.strs["my-dropdown"] = ["layout", "props", "children", 2, "props"]

// Wildcard IDs (pattern-matching)
paths.objs["type,index"] = [
  { values: ["filter", 0], path: [...] },
  { values: ["filter", 1], path: [...] }
]

window.dash_clientside = {
  no_update,        // Return to skip output
  PreventUpdate,    // Throw to cancel callback
  callback_context, // Current callback info
  set_props,        // Update props from clientside
  clean_url,        // URL sanitization
  Patch             // Partial prop updates
}

window.dash_clientside.callback_context = {
  triggered: [{ prop_id: "btn.n_clicks", value: 1 }],
  triggered_id: "btn",
  inputs: { "input.value": "hello" },
  states: { "store.data": {...} }
}

// In assets/clientside.js
window.dash_clientside = window.dash_clientside || {};
window.dash_clientside.my_namespace = {
  my_function: function(input_value) {
    return input_value.toUpperCase();
  }
};

// By string ID
window.dash_clientside.set_props('my-component', { value: 'new' });

// By pattern-matching ID
window.dash_clientside.set_props({ type: 'input', index: 0 }, { value: 'new' });

window.dash_component_api = {
  ExternalWrapper,     // Render outside main tree
  DashContext,         // React Context
  useDashContext,      // Hook for context
  getLayout,           // Get props by ID/path
  stringifyId          // Convert wildcard IDs
}

const props = window.dash_component_api.getLayout('my-dropdown');
// → { id: 'my-dropdown', options: [...], value: 'a' }

const {
  componentPath,
  isLoading,
  useSelector,
  useDispatch
} = useDashContext();

layoutHashes["0,props,children"] = {
  hash: 42,                      // Increments on change
  changedProps: { value: true }
}