DraftThis article is currently in draft mode

View Model Interfaces
⋅

Raw
View Model Interfaces are a pattern for designing the boundary between view and business logic. I have leveraged, to my benefit, this set of rules to follow in several projects.

- Where either the performance needed to be very high
- By performance I mean reactivity like needs to be very controlled
- The complexity that comes from raw React hooks was difficult to follow
- When I've had to manage complex UI state that might involve CSS animations or user inputs and the like where I really need to understand and know exactly what's going to change in the DOM to not interrupt the user who might be selecting text or inserting inputs and so forth.
I accomplished a lot of. There's also a fourth thing which is also equally important is being able when a certain part of my application becomes sufficiently complicated enough I have found that adhering to these rules for that boundary leads to much easier testability, much easier prototyping, and a simpler UI.

The controversial thesis here is that you should take the time to split out. You should take the time to adopt a reactivity toolset that is not dependent on the UI or rendering contexts. You should use fine-grained reactivity tooling (whether it's signals or observables or the like) so that when you are defining the interface, it's extremely clear from a type system point of view what's going to change and where to draw your boundaries.

The audience here is somewhat familiar with different patterns of encapsulating UI. They probably have a lot of experience with React, Svelte, or Vue. I'm going to be focusing on React.

The too-long-didn't-read, it's that... Your view model interface should be entirely interactive outside of the view's lifecycle, however your view lifecycle works (whether that's React hook context) you shouldn't have to rely on that when designing your view model interface and following these patterns will lead to more easily testable code, more easily iterated on code, and better LLM performance for complex code, complex UIs.

The reason that the LLMs perform better is because you can define a clear boundary between "here's what the state looks like and how it is reactive in a type-driven way" and have an AI implement the UI above that. You'll know that the AI's implementation of that UI is type-checked and following your plan.

These view model interfaces also provide a central point of documentation for what's expected out of the view and what the different sections of a UI are, so it gives you an opportunity to inform an AI how the view is supposed to be laid out before it gets started and the AI doesn't get distracted by the actual implementation.

My personal hook here has been, I just tend to struggle with managing to hold in my head all of events management plus styling plus render performance plus contexts plus testing concerns. Like early on in my career, I realized I just struggled a lot as the normal React applications got more complex and I found myself in a lot of conversations about hooks and how to manage hooks and how to manage the reactivity of a certain part of an application. I always could just step back and say, "What the fuck is actually going on?" Like I think I know and I can kinda look at a few things at the same time to get an idea, but at the end of the day it was really unclear. Once you had a couple of use effects involved and some use states and maybe a context, I really lost the feeling that I could understand what was happening.

Hook: As my software projects and jobs became targeting more complicated UIs and authorable UIs, I found a video about Flutter BLOC pattern from Paulo Soares in 2018 that described this kind of thinking pattern to apply. From then on, I have been leveraging this kind of pattern. Originally, I actually called it MVVM or the block pattern, but the more that I've implemented it and tried to explain it to people, it became more obvious that it's the important part of the pattern is actually just a view model interface and having a definition of what a view model interface is. So that's what we're going to talk about in this article.

So yeah, the context here is that you're trying to reason about hooks and how they're interacting together and you're trying to tie things together and you're also trying to communicate to other engineers how something works and you're managing. contexts and I mean you don't have that kind of memory to remember like spatially how all these contexts like work together. You probably really enjoyed the container and display components patterns and react early on and you were wondering what the next iteration of those ideas might look like.

The turn here is we define everything that the UI should look like, the actual even structure of the UI, we define that in a view model, like a type and an interface. That interface is going to expose as little as closely to how the UI gets mapped as possible, so that when we go to render the UI, you shouldn't have to reach for anything beyond a dot map, and you shouldn't have to call any functions with anything beyond, like, input text. If there's an event that changes the, your goal is to basically make all of the inner workings of your business logic, fetch state, everything opaque to the UI code.

By following this rule, we can actually forego testing the majority of our UI side and skip a lot of complexity by not needing to set up end-to-end testing from React all the way to our business logic. We can actually test our entire application interacting directly with a view model which is much simpler than interacting with the UI directly or trying to only interact with the state machine itself.

Proof: In fact, for most of my projects now, I only test when the only testing I do up front is on the view model itself, and usually that's only if the view has sufficiently complicated logic. I found that by breaking apart the view from the actual business logic, there's a lot fewer things that you need to test or that can go wrong because it's a lot easier to reason about.
Anchors
Goal: Persuade React engineers to define a typed, reactive boundary (VM) outside the view lifecycle.
Audience: Intermediate+ React devs; familiar with hooks; open to signals/observables.
Thesis: Separate view from business logic via a fine-grained, type-first VM to gain predictability and testability.
Objections to address (implicitly via examples): extra layer? overkill for simple UIs? integration with React?
Proof strategy: small interface sketch + VM-only tests + React projection.

Thesis (why this matters)
⋅

If your UI complexity is rising (effects, selection, async, animations), defining a view model interface outside the view lifecycle makes behavior predictable and testable, and keeps React code a pure projection.

Definition (what it is)
⋅

A View Model Interface is a small, typed surface that:

  • Exposes reactive values (signals/observables) as read-only "$" streams
  • Provides imperative methods for intent (no DOM details)
  • Is framework-agnostic (lives outside React lifecycle)
  • Maps 1:1 to rendered structure (dot-map friendly)

Principles (how to shape it)
⋅

  • Name the UI regions explicitly in the interface
  • Prefer fine-grained reactive primitives (no global invalidation)
  • Accept domain inputs; return UI-ready outputs
  • Keep event handlers side-effectful but opaque to the view

When it shines / When not to use
⋅

  • Shines: rich inputs, keyboard nav, selections, async suggestions, controlled animations
  • Shines: teams splitting view/business logic; AI-assisted UI implementation
  • Shines: complex animations that need precise triggering from business logic
  • Not for: trivial forms, static pages, or where a single useState suffices

Testing Workflow (evidence over rhetoric)
⋅

  • Drive behavior by calling VM methods and asserting reactive outputs
  • UI tests become thin: render is a projection over VM
  • Animation triggers are testable: increment atom, assert on UI state changes

Introduction
⋅

View Model Interfaces are a pattern for designing the boundary between view and business logic.

Let's take a look at a simple example of what a view model interface for the following autocomplete input might look like.

Interface

// From the interface alone, we can picture
// what this is and how it behaves.
export interface AutocompleteVM {
  inputText$: Queryable<string>;
  updateInput(text: string, pos: "end" | number): void;
  /** Creating a selection should dismiss */
  updateSelection(pos: number, anchor?: number): void;
  pressKey(key: "enter" | "up" | "down" | "escape"): void;
  options$: Queryable<
    Array<{
      key: string;
      label: string;
      selected$: Queryable<boolean>;
      click(): void;
    }>
  >;
}

Test

autocomplete.updateInput("Update @ind", "end");
const options = get(autocomplete.options$);
expect(options).toMatchObject([
  { label: "src/index.html" },
  { label: "src/index.ts" },
  { label: "src/utils/index.ts" },
]);
expect(get(options[0].selected$)).toBe(true);
expect(get(options[1].selected$)).toBe(false);
autocomplete.pressKey("down");
expect(get(options[0].selected$)).toBe(false);
expect(get(options[1].selected$)).toBe(true);

Benefits
⋅

  • Unit-testable without DOM: assert on VM streams and actions
  • Predictable updates: fine-grained reactivity, no accidental re-renders
  • Simpler React: render from data, dot-map, minimal effects

Example
⋅

Interface

export type TodoItemVM = {
  key: string;
  text$: Queryable<string>; 
  completed$: Queryable<boolean>; 
  toggleCompleted: () => void;
  remove: () => void;
};

export type TodoListVM = {
  header: {
    newTodoText$: Queryable<string>; 
    updateNewTodoText: (text: string) => void;
    addTodo: () => void;
  };
  itemList: {
    items$: Queryable<TodoItemVM[]>; 
  };
  footer: {
    incompleteCount$: Queryable<number>; 
    currentFilter$: Queryable<"all" | "active" | "completed">; 
    showAll: () => void;
    showActive: () => void;
    showCompleted: () => void;
    clearCompleted: () => void;
  };
};

React Code

export const MainSection: React.FC = () => {
  const vm = useTodoVM();

  return (
    <section className="todos">
      <ul className="todo-list">
        <LiveValue query={vm.itemList.items$}>
          {(items) =>
            items.map((item) => (
              <li className="state" key={item.key}>
                <LiveValue query={item.completed$}>
                  {(completed) => (
                    <input className="toggle" type="checkbox" checked={completed} onChange={item.toggleCompleted} />
                  )}
                </LiveValue>
                <label >
                  <LiveValue query={item.text$} />
                </label>
                <button type="button" className="destroy" onClick={item.remove} />
              </li>
            ))
          }
        </LiveValue>
      </ul>
    </section>
  );
};

Animation Triggers
⋅

View Models can expose animation triggers using PrimitiveAtom<number> for precise control over visual feedback:

interface ProposalVM {
  // ... other properties

  // Animation triggers - writable atoms that increment to trigger effects
  animationTriggers: {
    commitAddedAtom: PrimitiveAtom<number>; // Flash when commit added
    mergedAtom: PrimitiveAtom<number>; // Pulse when merged
  };
}

Why this pattern?

  • Declarative: Reading the interface reveals animation capabilities
  • Testable: Writable atoms allow resetting and manual triggering in tests
  • Framework-agnostic: Works with any reactive renderer
  • Self-describing: Clear semantic meaning in the interface

Component consumption:

const ProposalComponent = ({ proposal }: { proposal: ProposalVM }) => {
  const trigger = useAtomValue(proposal.animationTriggers.commitAddedAtom);
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    if (trigger > 0) {
      setIsAnimating(true);
      const timer = setTimeout(() => setIsAnimating(false), 500);
      return () => clearTimeout(timer);
    }
  }, [trigger]);

  // Use OKLCH for dynamic colors
  const color = proposal.backgroundColor;
  const animStyle = isAnimating ? {
    boxShadow: `0 0 0 2px oklch(0.75 ${color.chroma} ${color.hue})`,
    backgroundColor: `oklch(0.95 ${color.chroma * 0.3} ${color.hue})`,
  } : {};

  return <div style={animStyle} className="transition-all duration-500">
    {/* content */}
  </div>;
};

Business logic side:

const dispatchCommit = (proposalId: ProposalID) => {
  // ... commit logic

  // Trigger animation
  const atoms = memoProposalAnimationAtoms(proposalId);
  jotaiStore.set(atoms.commitAddedAtom, (prev) => prev + 1);
};

Testing:

// Reset animation state
jotaiStore.set(proposal.animationTriggers.commitAddedAtom, 0);

// Manually trigger for testing
jotaiStore.set(proposal.animationTriggers.commitAddedAtom, (n) => n + 1);

This pattern ensures animations are triggered from business logic events while keeping the UI a pure projection of state.

Defining a Scope
⋅

const createID = (name: string) => `${name}_${nanoid(12)}`; 
export function createTodoListScope(store: Store): TodoListVM {
  const currentFilter$ = computed((get) => get(uiState$).filter, { label: "filter" });
  const newTodoText$ = computed((get) => get(uiState$).newTodoText, { label: "newTodoText" });

  const createTodoItemVM = memoFn((id: string): TodoItemVM => {

    const completed$ = queryDb(
      tables.todos.select("completed").where({ id }).first({ behaviour: "error" }),
      { label: "todoItem.completed", deps: [id] },
    );

    const text$ = queryDb(tables.todos.select("text").where({ id }).first({ behaviour: "error" }), {
      label: "todoItem.text",
      deps: [id],
    });
    return {
      key: id,
      completed$,
      text$,
      toggleCompleted: () =>
        store.commit(store.query(completed$) ? events.todoUncompleted({ id }) : events.todoCompleted({ id })),
      remove: () => store.commit(events.todoDeleted({ id, deletedAt: new Date() })),
    };
  });

  const visibleTodosQuery = (filter: "all" | "active" | "completed") =>
    queryDb(
      () =>
        tables.todos.where({
          completed: filter === "all" ? undefined : filter === "completed",
          deletedAt: { op: "=", value: null },
        }),
      {
        label: "visibleTodos",
        map: (rows) => rows.map((row) => createTodoItemVM(row.id)),
        deps: [filter],
      },
    );


  const visibleTodos$ = computed(
    (get) => {
      const filter = get(currentFilter$);
      return get(visibleTodosQuery(filter));
    },
    { label: "visibleTodos" },
  );

  const incompleteCount$ = queryDb(tables.todos.count().where({ completed: false, deletedAt: null }), {
    label: "incompleteCount",
  });


  return {
    header: {
      newTodoText$,
      updateNewTodoText: (text: string) => store.commit(events.uiStateSet({ newTodoText: text })),
      addTodo: () => {
        const newTodoText = store.query(newTodoText$).trim();
        if (newTodoText) {
          store.commit(
            events.todoCreated({ id: createID("todo"), text: newTodoText }),
            events.uiStateSet({ newTodoText: "" }), // update text
          );
        }
      },
    },
    itemList: {
      items$: visibleTodos$,
    },
    footer: {
      incompleteCount$,
      currentFilter$,
      showAll: () => store.commit(events.uiStateSet({ filter: "all" })),
      showActive: () => store.commit(events.uiStateSet({ filter: "active" })),
      showCompleted: () => store.commit(events.uiStateSet({ filter: "completed" })),
      clearCompleted: () => store.commit(events.todoClearedCompleted({ deletedAt: new Date() })),
    },
  };
}
Tera Template Context (Zola data-loc) 
	
Tera Documentation

	
	
		
		
		
	

		
Introduction

		
	

	
		
		
		
	

		
Data structures

		
	

	
		
		
		
	

		
Manipulating data

		
	

	
		
		
		
	

		
Control structures

		
	

	
		
		
		
	

		
Inheritance

		
	

	
		
		
		
	

		
Built-ins

		
	

	

{
  "config": {
    "base_url": "/",
    "mode": "build",
    "title": "Phosphor",
    "description": "Things we learned while building Phosphor",
    "languages": {},
    "default_language": "en",
    "generate_feed": true,
    "generate_feeds": true,
    "feed_filenames": [
      "atom.xml"
    ],
    "taxonomies": [],
    "author": null,
    "build_search_index": true,
    "extra": {
      "logo_svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"108\" height=\"26\" fill=\"none\" viewBox=\"0 0 174 42\">\n<g fill=\"currentColor\">\n<path d=\"M.4 32.6c1.9 0 3-.9 3.8-3.9l4.6-22c.7-3-.7-4-2.5-4v-.5H19c9.2 0 11 5.5 10 10.1-1 4.8-4.8 9.5-16.5 9l.1-.5c7.3.4 10.5-3.9 11.3-8.4.9-4.3-.3-9.4-6.2-9.4h-3L9.2 28.7c-.7 3 1.2 3.9 3.7 3.9v.6H.5v-.6Z\"/><path d=\"M34.5 30.5c0-1.3.9-2.7 2.5-2.7 1.5 0 2.5 1.2 2.3 3-.2 1.2.3 1.6 1 1.5 1.7-.2 4.6-4.2 4.7-10.7 0-6.4-2-8.6-3.6-8.6-2.9 0-7.8 8-9.8 17.9l-.5 2.3h-4.7l5.7-27c.6-2.6 0-3.4-2-3.4v-.6c2.6-.2 5-.5 7.7-2.2l.3.3-.8 4-4 18.1C36 16 40 10 43.9 10c3.4 0 5.4 3.5 5.1 8.4-.3 6.2-4.8 15.2-10.8 15.2-2.4 0-3.6-1.6-3.6-3Zm15.9-9.2c1.6-7 7.4-11 12.6-11 5.2 0 9 5 7.3 12-1.6 7.2-7.4 11.3-12.5 11.3-5.5 0-9-5.2-7.4-12.3Zm7.9 11.5c2.7 0 5.6-4.1 7-11.1 1.4-7 .3-10.8-2.7-10.7-3 0-6 4.3-7.3 11.1-1.4 7 0 10.8 3 10.8Zm11.4-3.3c-.4-1.6.2-3 1.4-3.4a2.2 2.2 0 0 1 3 1.3c.5 1.4-.7 2.4-.6 3.8.2 1 1.2 1.9 3 1.8 1.8 0 3.5-1 4-3 .4-2-1-3.8-3.7-6.5-3-3-4.4-5.2-3.9-8.1.7-3 3.5-5.1 7.3-5.2 3-.1 5.9 1.2 6.5 3.6.5 1.5 0 3-1.4 3.4a2.1 2.1 0 0 1-2.8-1.3c-.5-1.6.8-2.5.6-3.5-.2-.9-1.1-1.7-2.6-1.6a3.8 3.8 0 0 0-3.7 3.2c-.2 1.7.5 3 3.1 5.5 2.7 2.6 5.2 5 4.5 8.5-.7 3.8-4 5.6-7.7 5.6-2.8 0-6.2-1.3-7-4.2Zm17.4 12c1.7 0 3-1 3-4v-22c0-2-.8-2.8-2.9-2.8V12c2.4-.2 5-.7 7.3-1.7l.4.2v4.6a7.7 7.7 0 0 1 7.1-4.8c5.3 0 9 5 9 11.4s-4.5 11.8-10.3 11.8A7.4 7.4 0 0 1 95 31v6.5c0 3 1.6 4 3.7 4v.5H87.1v-.6Zm13.3-8.7c3.3 0 5.7-3.7 5.7-9.4 0-6.9-3-10.5-6.5-10.5-2.4 0-4 1.6-4.7 3.7v7.6c0 4.8 2 8.6 5.5 8.6Z\"/><path d=\"M125 32.6c2.2 0 3.8-.9 3.4-3.9l-1.4-10c-.5-3.6-1.9-5.7-4.6-5.7-2.3 0-4 2.2-4.3 4.8v10.9c0 3 1.3 3.9 3 3.9v.6h-10.9v-.6c1.8 0 3.1-.8 3.1-3.9v-23c0-2.2-.9-3-2.9-3v-.5c2.3-.2 5-.6 7.3-1.7l.4.2V16c.8-3 3.3-5.6 6.7-5.6 3.7 0 6.2 2.5 7 8.2l1.5 10.2c.4 3 1.7 3.9 3.5 3.9v.5h-11.7v-.5ZM134.4 21.8a11 11 0 0 1 11.1-11.5c6 0 11.2 4.9 11.2 11.6 0 6.8-5 11.7-11 11.7-6.2 0-11.3-5.1-11.3-11.8Zm12.6 11c3.7-.6 5.3-5.7 4.5-12-.8-6-3.8-10.1-7.4-9.6-3.7.5-5.3 5.6-4.5 11.6.8 6.2 3.7 10.4 7.4 10Z\"/><path d=\"M155.9 32.6c1.8 0 3-.9 3-4v-13c0-2.2-.8-2.9-2.8-3v-.5a21.2 21.2 0 0 0 7.3-1.7l.4.2v4.8c.7-2.5 2.6-5 5.4-5 2.1 0 3.5 1.5 3.5 3.1 0 1.4-1 2.7-2.6 2.7s-2-1.4-2.4-2.3c-.3-.7-.5-1-1-1-1.4 0-2.7 2-3 4.2v11.6c0 3 1.8 3.9 4 3.9v.6H156v-.6Z\"/>\n</g>\n</svg>\n",
      "drafts": true,
      "sections": [
        "Getting Started",
        "Managing Complexity",
        "Moving Quickly",
        "Understanding Quickly",
        "Architecture Patterns",
        "Interactive Demos",
        "Developer Tools",
        "Advanced Topics"
      ],
      "author": "Phosphor"
    },
    "markdown": {
      "highlight_code": true,
      "error_on_missing_highlight": false,
      "highlight_theme": "base16-ocean-dark",
      "highlight_themes_css": [],
      "render_emoji": false,
      "external_links_class": null,
      "external_links_target_blank": false,
      "external_links_no_follow": false,
      "external_links_no_referrer": false,
      "smart_punctuation": false,
      "definition_list": false,
      "bottom_footnotes": false,
      "extra_syntaxes_and_themes": [],
      "lazy_async_image": false,
      "insert_anchor_links": "none",
      "github_alerts": false
    },
    "search": {
      "index_format": "elasticlunr_javascript"
    },
    "generate_sitemap": true,
    "generate_robots_txt": true,
    "exclude_paginated_pages_in_sitemap": "none"
  },
  "current_path": "/view-model-interfaces/",
  "current_url": "/view-model-interfaces/",
  "lang": "en",
  "page": {
    "relative_path": "view-model-interfaces.md",
    "colocated_path": null,
    "content": "<h1 id=\"view-model-interfaces\">View Model Interfaces <div data-loc=\"content/view-model-interfaces.md:12\" class=\"heading-src\">⋅</div></h1>\n\n<!-- https://www.getzola.org/documentation/content/shortcodes/ -->\n<details class=\"article-spoiler\" data-loc=\"content&#x2F;view-model-interfaces.md:14\">\n  <summary>\n    <span class=\"article-spoiler-title\">Raw</span>\n  </summary>\n  <!-- https://www.getzola.org/documentation/content/shortcodes/#shortcodes-with-body -->\n  <div class=\"article-spoiler-content whitespace-pre-wrap text-xs\">View Model Interfaces are a pattern for designing the boundary between view and business logic. I have leveraged, to my benefit, this set of rules to follow in several projects.<br><br>- Where either the performance needed to be very high<br>- By performance I mean reactivity like needs to be very controlled<br>- The complexity that comes from raw React hooks was difficult to follow<br>- When I've had to manage complex UI state that might involve CSS animations or user inputs and the like where I really need to understand and know exactly what's going to change in the DOM to not interrupt the user who might be selecting text or inserting inputs and so forth.<br>  I accomplished a lot of. There's also a fourth thing which is also equally important is being able when a certain part of my application becomes sufficiently complicated enough I have found that adhering to these rules for that boundary leads to much easier testability, much easier prototyping, and a simpler UI.<br><br>The controversial thesis here is that you should take the time to split out. You should take the time to adopt a reactivity toolset that is not dependent on the UI or rendering contexts. You should use fine-grained reactivity tooling (whether it's signals or observables or the like) so that when you are defining the interface, it's extremely clear from a type system point of view what's going to change and where to draw your boundaries.<br><br>The audience here is somewhat familiar with different patterns of encapsulating UI. They probably have a lot of experience with React, Svelte, or Vue. I'm going to be focusing on React.<br><br>The too-long-didn't-read, it's that... Your view model interface should be entirely interactive outside of the view's lifecycle, however your view lifecycle works (whether that's React hook context) you shouldn't have to rely on that when designing your view model interface and following these patterns will lead to more easily testable code, more easily iterated on code, and better LLM performance for complex code, complex UIs.<br><br>The reason that the LLMs perform better is because you can define a clear boundary between \"here's what the state looks like and how it is reactive in a type-driven way\" and have an AI implement the UI above that. You'll know that the AI's implementation of that UI is type-checked and following your plan.<br><br>These view model interfaces also provide a central point of documentation for what's expected out of the view and what the different sections of a UI are, so it gives you an opportunity to inform an AI how the view is supposed to be laid out before it gets started and the AI doesn't get distracted by the actual implementation.<br><br>My personal hook here has been, I just tend to struggle with managing to hold in my head all of events management plus styling plus render performance plus contexts plus testing concerns. Like early on in my career, I realized I just struggled a lot as the normal React applications got more complex and I found myself in a lot of conversations about hooks and how to manage hooks and how to manage the reactivity of a certain part of an application. I always could just step back and say, \"What the fuck is actually going on?\" Like I think I know and I can kinda look at a few things at the same time to get an idea, but at the end of the day it was really unclear. Once you had a couple of use effects involved and some use states and maybe a context, I really lost the feeling that I could understand what was happening.<br><br>Hook: As my software projects and jobs became targeting more complicated UIs and authorable UIs, I found a video about Flutter BLOC pattern from Paulo Soares in 2018 that described this kind of thinking pattern to apply. From then on, I have been leveraging this kind of pattern. Originally, I actually called it MVVM or the block pattern, but the more that I've implemented it and tried to explain it to people, it became more obvious that it's the important part of the pattern is actually just a view model interface and having a definition of what a view model interface is. So that's what we're going to talk about in this article.<br><br>So yeah, the context here is that you're trying to reason about hooks and how they're interacting together and you're trying to tie things together and you're also trying to communicate to other engineers how something works and you're managing. contexts and I mean you don't have that kind of memory to remember like spatially how all these contexts like work together. You probably really enjoyed the container and display components patterns and react early on and you were wondering what the next iteration of those ideas might look like.<br><br>The turn here is we define everything that the UI should look like, the actual even structure of the UI, we define that in a view model, like a type and an interface. That interface is going to expose as little as closely to how the UI gets mapped as possible, so that when we go to render the UI, you shouldn't have to reach for anything beyond a dot map, and you shouldn't have to call any functions with anything beyond, like, input text. If there's an event that changes the, your goal is to basically make all of the inner workings of your business logic, fetch state, everything opaque to the UI code.<br><br>By following this rule, we can actually forego testing the majority of our UI side and skip a lot of complexity by not needing to set up end-to-end testing from React all the way to our business logic. We can actually test our entire application interacting directly with a view model which is much simpler than interacting with the UI directly or trying to only interact with the state machine itself.<br><br>Proof: In fact, for most of my projects now, I only test when the only testing I do up front is on the view model itself, and usually that's only if the view has sufficiently complicated logic. I found that by breaking apart the view from the actual business logic, there's a lot fewer things that you need to test or that can go wrong because it's a lot easier to reason about.</div>\n</details>\n\n\n<!-- https://www.getzola.org/documentation/content/shortcodes/ -->\n<details class=\"article-spoiler\" data-loc=\"content&#x2F;view-model-interfaces.md:47\">\n  <summary>\n    <span class=\"article-spoiler-title\">Anchors</span>\n  </summary>\n  <!-- https://www.getzola.org/documentation/content/shortcodes/#shortcodes-with-body -->\n  <div class=\"article-spoiler-content whitespace-pre-wrap text-xs\">Goal: Persuade React engineers to define a typed, reactive boundary (VM) outside the view lifecycle.<br>Audience: Intermediate+ React devs; familiar with hooks; open to signals/observables.<br>Thesis: Separate view from business logic via a fine-grained, type-first VM to gain predictability and testability.<br>Objections to address (implicitly via examples): extra layer? overkill for simple UIs? integration with React?<br>Proof strategy: small interface sketch + VM-only tests + React projection.</div>\n</details>\n\n<h2 id=\"thesis-why-this-matters\">Thesis (why this matters) <div data-loc=\"content/view-model-interfaces.md:55\" class=\"heading-src\">⋅</div></h2>\n<p>If your UI complexity is rising (effects, selection, async, animations), defining a view model interface outside the view lifecycle makes behavior predictable and testable, and keeps React code a pure projection.</p>\n<h2 id=\"definition-what-it-is\">Definition (what it is) <div data-loc=\"content/view-model-interfaces.md:59\" class=\"heading-src\">⋅</div></h2>\n<p>A View Model Interface is a small, typed surface that:</p>\n<ul>\n<li>Exposes reactive values (signals/observables) as read-only \"$\" streams</li>\n<li>Provides imperative methods for intent (no DOM details)</li>\n<li>Is framework-agnostic (lives outside React lifecycle)</li>\n<li>Maps 1:1 to rendered structure (dot-map friendly)</li>\n</ul>\n<h2 id=\"principles-how-to-shape-it\">Principles (how to shape it) <div data-loc=\"content/view-model-interfaces.md:68\" class=\"heading-src\">⋅</div></h2>\n<ul>\n<li>Name the UI regions explicitly in the interface</li>\n<li>Prefer fine-grained reactive primitives (no global invalidation)</li>\n<li>Accept domain inputs; return UI-ready outputs</li>\n<li>Keep event handlers side-effectful but opaque to the view</li>\n</ul>\n<h2 id=\"when-it-shines-when-not-to-use\">When it shines / When not to use <div data-loc=\"content/view-model-interfaces.md:75\" class=\"heading-src\">⋅</div></h2>\n<ul>\n<li>Shines: rich inputs, keyboard nav, selections, async suggestions, controlled animations</li>\n<li>Shines: teams splitting view/business logic; AI-assisted UI implementation</li>\n<li>Shines: complex animations that need precise triggering from business logic</li>\n<li>Not for: trivial forms, static pages, or where a single <code>useState</code> suffices</li>\n</ul>\n<h2 id=\"testing-workflow-evidence-over-rhetoric\">Testing Workflow (evidence over rhetoric) <div data-loc=\"content/view-model-interfaces.md:82\" class=\"heading-src\">⋅</div></h2>\n<ul>\n<li>Drive behavior by calling VM methods and asserting reactive outputs</li>\n<li>UI tests become thin: render is a projection over VM</li>\n<li>Animation triggers are testable: increment atom, assert on UI state changes</li>\n</ul>\n<h2 id=\"introduction\">Introduction <div data-loc=\"content/view-model-interfaces.md:88\" class=\"heading-src\">⋅</div></h2>\n<p>View Model Interfaces are a pattern for designing the boundary between view and business logic.</p>\n<p>Let's take a look at a simple example of <em>what</em> a view model interface for the following autocomplete input might look like.</p>\n\n<div data-loc=\"content&#x2F;view-model-interfaces.md:94\" class=\"!col-start-1 col-span-3 !max-w-[initial] -mx-6 md:mx-0\">\n  <div class=\"bg-bg-elevated border-y md:border md:rounded-lg shadow-inner overflow-hidden border-border-subtle\">\n    <div class=\"grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-border\">\n<div\n  data-loc=\"content&#x2F;view-model-interfaces.md:95\"\n  class=\"flex flex-col\"\n>\n  \n  <h3\n    class=\"text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4 px-6 pt-5\"\n  >\n    Interface\n  </h3>\n  \n  <div\n    class=\"flex-1 flex flex-col justify-stretch  overflow-auto max-h-[600px] [&>.codeblock]:!m-0 [&>.codeblock]:!rounded-none\"\n  >\n    <div class=\"codeblock\" data-loc=\"content&#x2F;view-model-interfaces.md:96\">\n  \n  <div class=\"codeblock-content\" data-id=\"autocomplete-interface\">\n    <pre class=\"shiki rose-pine\" style=\"background-color:#191724;color:#e0def4\" tabindex=\"0\" data-loc=\"content/_sources/autocomplete-demo/types.ts:3\"><code><span class=\"line\"><span style=\"color:#908CAA;font-style:italic\">//</span><span style=\"color:#6E6A86;font-style:italic\"> From the interface alone, we can picture</span></span>\n<span class=\"line\"><span style=\"color:#908CAA;font-style:italic\">//</span><span style=\"color:#6E6A86;font-style:italic\"> what this is and how it behaves.</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">export</span><span style=\"color:#31748F\"> interface</span><span style=\"color:#9CCFD8\"> AutocompleteVM</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  inputText$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">string</span><span style=\"color:#908CAA\">>;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">  updateInput</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">text</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">,</span><span style=\"color:#C4A7E7;font-style:italic\"> pos</span><span style=\"color:#31748F\">:</span><span style=\"color:#F6C177\"> \"end\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#9CCFD8\"> number</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA;font-style:italic\">  /**</span><span style=\"color:#6E6A86;font-style:italic\"> Creating a selection should dismiss </span><span style=\"color:#908CAA;font-style:italic\">*/</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">  updateSelection</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">pos</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> number</span><span style=\"color:#908CAA\">,</span><span style=\"color:#C4A7E7;font-style:italic\"> anchor</span><span style=\"color:#31748F\">?:</span><span style=\"color:#9CCFD8\"> number</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">  pressKey</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">key</span><span style=\"color:#31748F\">:</span><span style=\"color:#F6C177\"> \"enter\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"up\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"down\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"escape\"</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  options$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span></span>\n<span class=\"line\"><span style=\"color:#9CCFD8\">    Array</span><span style=\"color:#908CAA\">&#x3C;{</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">      key</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">      label</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">      selected$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">boolean</span><span style=\"color:#908CAA\">>;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      click</span><span style=\"color:#908CAA\">()</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    }></span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  >;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">}</span></span></code></pre>\n  </div>\n   \n</div>\n  </div>\n</div>\n\n\n\n<div\n  data-loc=\"content&#x2F;view-model-interfaces.md:122\"\n  class=\"flex flex-col\"\n>\n  \n  <h3\n    class=\"text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4 px-6 pt-5\"\n  >\n    Test\n  </h3>\n  \n  <div\n    class=\"flex-1 flex flex-col justify-stretch  overflow-auto max-h-[600px] [&>.codeblock]:!m-0 [&>.codeblock]:!rounded-none\"\n  >\n    <link rel=\"stylesheet\" href=\"/js/autocomplete-demo.entrypoint.css\">\n<div data-loc=\"content/view-model-interfaces.md:125\" id=\"autocomplete-demo\"></div>\n<script src=\"/js/autocomplete-demo.entrypoint.js\" type=\"module\"></script>\n\n<div class=\"codeblock\" data-loc=\"content&#x2F;view-model-interfaces.md:128\">\n  \n  <div class=\"codeblock-content\" data-id=\"autocomplete-test\">\n    <pre class=\"shiki rose-pine\" style=\"background-color:#191724;color:#e0def4\" tabindex=\"0\" data-loc=\"content/view-model-interfaces/autocomplete-sample.ts:9\"><code><span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">autocomplete</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">updateInput</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#F6C177\">\"Update @ind\"</span><span style=\"color:#908CAA\">,</span><span style=\"color:#F6C177\"> \"end\"</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">const</span><span style=\"color:#E0DEF4;font-style:italic\"> options</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">autocomplete</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">options$</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">expect</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">options</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">toMatchObject</span><span style=\"color:#E0DEF4\">([</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"src/index.html\"</span><span style=\"color:#908CAA\"> },</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"src/index.ts\"</span><span style=\"color:#908CAA\"> },</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"src/utils/index.ts\"</span><span style=\"color:#908CAA\"> },</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">])</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">expect</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">options</span><span style=\"color:#E0DEF4\">[</span><span style=\"color:#EBBCBA\">0</span><span style=\"color:#E0DEF4\">]</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">selected$</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">toBe</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">true</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">expect</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">options</span><span style=\"color:#E0DEF4\">[</span><span style=\"color:#EBBCBA\">1</span><span style=\"color:#E0DEF4\">]</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">selected$</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">toBe</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">false</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">autocomplete</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">pressKey</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#F6C177\">\"down\"</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">expect</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">options</span><span style=\"color:#E0DEF4\">[</span><span style=\"color:#EBBCBA\">0</span><span style=\"color:#E0DEF4\">]</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">selected$</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">toBe</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">false</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">expect</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">options</span><span style=\"color:#E0DEF4\">[</span><span style=\"color:#EBBCBA\">1</span><span style=\"color:#E0DEF4\">]</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">selected$</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">toBe</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">true</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span></code></pre>\n  </div>\n   \n</div>\n  </div>\n</div></div>\n  </div>\n</div>\n<h2 id=\"benefits\">Benefits <div data-loc=\"content/view-model-interfaces.md:151\" class=\"heading-src\">⋅</div></h2>\n<ul>\n<li>Unit-testable without DOM: assert on VM streams and actions</li>\n<li>Predictable updates: fine-grained reactivity, no accidental re-renders</li>\n<li>Simpler React: render from data, dot-map, minimal effects</li>\n</ul>\n<h1 id=\"example\">Example <div data-loc=\"content/view-model-interfaces.md:157\" class=\"heading-src\">⋅</div></h1>\n\n<div data-loc=\"content&#x2F;view-model-interfaces.md:159\" class=\"!col-start-1 col-span-3 !max-w-[initial] -mx-6 md:mx-0\">\n  <div class=\"bg-bg-elevated border-y md:border md:rounded-lg shadow-inner overflow-hidden border-border-subtle\">\n    <div class=\"grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-border\"><!-- Left pane -->\n\n\n<div\n  data-loc=\"content&#x2F;view-model-interfaces.md:163\"\n  class=\"flex flex-col\"\n>\n  \n  <h3\n    class=\"text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4 px-6 pt-5\"\n  >\n    Interface\n  </h3>\n  \n  <div\n    class=\"flex-1 flex flex-col justify-stretch  [&>.codeblock]:!m-0 [&>.codeblock]:!rounded-none\"\n  >\n    <!-- <div id=\"todo-vm-demo\" class=\"transform scale-75 lg:scale-90 origin-top-right lg:absolute lg:right-4 lg:top-4 z-10 min-w-lg\"></div> -->\n\n<div class=\"codeblock\" data-loc=\"content&#x2F;view-model-interfaces.md:167\">\n  \n  <div class=\"codeblock-content\" data-id=\"todo-vm-livestore\">\n    <pre class=\"shiki rose-pine\" style=\"background-color:#191724;color:#e0def4\" tabindex=\"0\" data-loc=\"content/_sources/view-model-interfaces/todo-vm/scope.ts:9\"><code><span class=\"line\"><span style=\"color:#31748F\">export</span><span style=\"color:#31748F\"> type</span><span style=\"color:#9CCFD8\"> TodoItemVM</span><span style=\"color:#31748F\"> =</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  key</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  text$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">string</span><span style=\"color:#908CAA\">>;</span><span style=\"color:#E0DEF4\"> </span><span data-debug=\"!todo.text\"></span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  completed$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">boolean</span><span style=\"color:#908CAA\">>;</span><span style=\"color:#E0DEF4\"> </span><span data-debug=\"!todo.completed\"></span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">  toggleCompleted</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">  remove</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#31748F\">export</span><span style=\"color:#31748F\"> type</span><span style=\"color:#9CCFD8\"> TodoListVM</span><span style=\"color:#31748F\"> =</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  header</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">    newTodoText$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">string</span><span style=\"color:#908CAA\">>;</span><span style=\"color:#E0DEF4\"> </span><span data-debug=\"!newTodoText\"></span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    updateNewTodoText</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> (</span><span style=\"color:#C4A7E7;font-style:italic\">text</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    addTodo</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  };</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  itemList</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">    items$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">TodoItemVM</span><span style=\"color:#E0DEF4\">[]</span><span style=\"color:#908CAA\">>;</span><span style=\"color:#E0DEF4\"> </span><span data-debug=\"!visibleTodos\"></span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  };</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">  footer</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">    incompleteCount$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#9CCFD8\">number</span><span style=\"color:#908CAA\">>;</span><span style=\"color:#E0DEF4\"> </span><span data-debug=\"!incompleteCount\"></span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA;font-style:italic\">    currentFilter$</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Queryable</span><span style=\"color:#908CAA\">&#x3C;</span><span style=\"color:#F6C177\">\"all\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"active\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"completed\"</span><span style=\"color:#908CAA\">>;</span><span style=\"color:#E0DEF4\"> </span><span data-debug=\"!currentFilter\"></span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    showAll</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    showActive</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    showCompleted</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    clearCompleted</span><span style=\"color:#31748F\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#9CCFD8\"> void</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  };</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">};</span></span></code></pre>\n  </div>\n   \n</div>\n  </div>\n</div>\n\n\n<!-- Right pane -->\n\n\n<div\n  data-loc=\"content&#x2F;view-model-interfaces.md:203\"\n  class=\"flex flex-col\"\n>\n  \n  <h3\n    class=\"text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4 px-6 pt-5\"\n  >\n    React Code\n  </h3>\n  \n  <div\n    class=\"flex-1 flex flex-col justify-stretch  [&>.codeblock]:!m-0 [&>.codeblock]:!rounded-none\"\n  >\n    <div data-loc=\"content/view-model-interfaces.md:205\" id=\"todo-vm-demo\" class=\"mb-6\"></div> \n<script src=\"/js/todo-vm.entrypoint.js\" type=\"module\"></script>\n<link rel=\"stylesheet\" href=\"/js/todo-vm.entrypoint.css\"/>\n\n<div class=\"codeblock\" data-loc=\"content&#x2F;view-model-interfaces.md:209\">\n  \n  <div class=\"codeblock-content\" data-id=\"todo-vm-ui-livestore\">\n    <pre class=\"shiki rose-pine\" style=\"background-color:#191724;color:#e0def4\" tabindex=\"0\" data-loc=\"content/_sources/view-model-interfaces/todo-vm/components/MainSection.tsx:8\"><code><span class=\"line\"><span style=\"color:#31748F\">export</span><span style=\"color:#31748F\"> const</span><span style=\"color:#EBBCBA;font-style:italic\"> MainSection</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> React</span><span style=\"color:#31748F\">.</span><span style=\"color:#9CCFD8\">FC</span><span style=\"color:#31748F\"> =</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#E0DEF4;font-style:italic\"> vm</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> useTodoVM</span><span style=\"color:#E0DEF4\">()</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#31748F\">  return</span><span style=\"color:#E0DEF4\"> (</span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">    &#x3C;</span><span style=\"color:#9CCFD8\">section</span><span style=\"color:#C4A7E7;font-style:italic\"> className</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"todos\"</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">      &#x3C;</span><span style=\"color:#9CCFD8\">ul</span><span style=\"color:#C4A7E7;font-style:italic\"> className</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"todo-list\"</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">        &#x3C;</span><span style=\"color:#9CCFD8\">LiveValue</span><span style=\"color:#C4A7E7;font-style:italic\"> query</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">vm</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">itemList</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">items$</span><span style=\"color:#908CAA\">}</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">          {(</span><span style=\"color:#C4A7E7;font-style:italic\">items</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">            items</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">map</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">item</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4\"> (</span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">              &#x3C;</span><span style=\"color:#9CCFD8\">li</span><span style=\"color:#C4A7E7;font-style:italic\"> className</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"state\"</span><span style=\"color:#C4A7E7;font-style:italic\"> key</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">item</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">key</span><span style=\"color:#908CAA\">}</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                &#x3C;</span><span style=\"color:#9CCFD8\">LiveValue</span><span style=\"color:#C4A7E7;font-style:italic\"> query</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">item</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">completed$</span><span style=\"color:#908CAA\">}</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">                  {(</span><span style=\"color:#C4A7E7;font-style:italic\">completed</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4\"> (</span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                    &#x3C;</span><span style=\"color:#9CCFD8\">input</span><span style=\"color:#C4A7E7;font-style:italic\"> className</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"toggle\"</span><span style=\"color:#C4A7E7;font-style:italic\"> type</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"checkbox\"</span><span style=\"color:#C4A7E7;font-style:italic\"> checked</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">completed</span><span style=\"color:#908CAA\">}</span><span style=\"color:#C4A7E7;font-style:italic\"> onChange</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">item</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">toggleCompleted</span><span style=\"color:#908CAA\">}</span><span style=\"color:#6E6A86\"> /></span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">                  )</span><span style=\"color:#908CAA\">}</span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                &#x3C;/</span><span style=\"color:#9CCFD8\">LiveValue</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                &#x3C;</span><span style=\"color:#9CCFD8\">label</span><span style=\"color:#6E6A86\"> ></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                  &#x3C;</span><span style=\"color:#9CCFD8\">LiveValue</span><span style=\"color:#C4A7E7;font-style:italic\"> query</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">item</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">text$</span><span style=\"color:#908CAA\">}</span><span style=\"color:#6E6A86\"> /></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                &#x3C;/</span><span style=\"color:#9CCFD8\">label</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">                &#x3C;</span><span style=\"color:#9CCFD8\">button</span><span style=\"color:#C4A7E7;font-style:italic\"> type</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"button\"</span><span style=\"color:#C4A7E7;font-style:italic\"> className</span><span style=\"color:#31748F\">=</span><span style=\"color:#F6C177\">\"destroy\"</span><span style=\"color:#C4A7E7;font-style:italic\"> onClick</span><span style=\"color:#31748F\">=</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\">item</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">remove</span><span style=\"color:#908CAA\">}</span><span style=\"color:#6E6A86\"> /></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">              &#x3C;/</span><span style=\"color:#9CCFD8\">li</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">            ))</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">          }</span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">        &#x3C;/</span><span style=\"color:#9CCFD8\">LiveValue</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">      &#x3C;/</span><span style=\"color:#9CCFD8\">ul</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#6E6A86\">    &#x3C;/</span><span style=\"color:#9CCFD8\">section</span><span style=\"color:#6E6A86\">></span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">  )</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">};</span></span></code></pre>\n  </div>\n   \n</div>\n  </div>\n</div></div>\n  </div>\n</div>\n<h2 id=\"animation-triggers\">Animation Triggers <div data-loc=\"content/view-model-interfaces.md:247\" class=\"heading-src\">⋅</div></h2>\n<p>View Models can expose animation triggers using <code>PrimitiveAtom&lt;number&gt;</code> for precise control over visual feedback:</p>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#b48ead;\">interface </span><span>ProposalVM {\n</span><span>  </span><span style=\"color:#65737e;\">// ... other properties\n</span><span>\n</span><span>  </span><span style=\"color:#65737e;\">// Animation triggers - writable atoms that increment to trigger effects\n</span><span>  </span><span style=\"color:#bf616a;\">animationTriggers</span><span>: {\n</span><span>    </span><span style=\"color:#bf616a;\">commitAddedAtom</span><span>: PrimitiveAtom&lt;number&gt;; </span><span style=\"color:#65737e;\">// Flash when commit added\n</span><span>    </span><span style=\"color:#bf616a;\">mergedAtom</span><span>: PrimitiveAtom&lt;number&gt;; </span><span style=\"color:#65737e;\">// Pulse when merged\n</span><span>  };\n</span><span>}\n</span></code></pre>\n<p><strong>Why this pattern?</strong></p>\n<ul>\n<li><strong>Declarative</strong>: Reading the interface reveals animation capabilities</li>\n<li><strong>Testable</strong>: Writable atoms allow resetting and manual triggering in tests</li>\n<li><strong>Framework-agnostic</strong>: Works with any reactive renderer</li>\n<li><strong>Self-describing</strong>: Clear semantic meaning in the interface</li>\n</ul>\n<p><strong>Component consumption:</strong></p>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#b48ead;\">const </span><span style=\"color:#8fa1b3;\">ProposalComponent </span><span>= ({ </span><span style=\"color:#bf616a;\">proposal </span><span>}: { </span><span style=\"color:#bf616a;\">proposal</span><span>: ProposalVM }) </span><span style=\"color:#b48ead;\">=&gt; </span><span>{\n</span><span>  </span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">trigger </span><span>= </span><span style=\"color:#8fa1b3;\">useAtomValue</span><span>(</span><span style=\"color:#bf616a;\">proposal</span><span>.</span><span style=\"color:#bf616a;\">animationTriggers</span><span>.</span><span style=\"color:#bf616a;\">commitAddedAtom</span><span>);\n</span><span>  </span><span style=\"color:#b48ead;\">const </span><span>[</span><span style=\"color:#bf616a;\">isAnimating</span><span>, </span><span style=\"color:#bf616a;\">setIsAnimating</span><span>] = </span><span style=\"color:#8fa1b3;\">useState</span><span>(</span><span style=\"color:#d08770;\">false</span><span>);\n</span><span>\n</span><span>  </span><span style=\"color:#8fa1b3;\">useEffect</span><span>(() </span><span style=\"color:#b48ead;\">=&gt; </span><span>{\n</span><span>    </span><span style=\"color:#b48ead;\">if </span><span>(</span><span style=\"color:#bf616a;\">trigger </span><span>&gt; </span><span style=\"color:#d08770;\">0</span><span>) {\n</span><span>      </span><span style=\"color:#8fa1b3;\">setIsAnimating</span><span>(</span><span style=\"color:#d08770;\">true</span><span>);\n</span><span>      </span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">timer </span><span>= </span><span style=\"color:#96b5b4;\">setTimeout</span><span>(() </span><span style=\"color:#b48ead;\">=&gt; </span><span style=\"color:#8fa1b3;\">setIsAnimating</span><span>(</span><span style=\"color:#d08770;\">false</span><span>), </span><span style=\"color:#d08770;\">500</span><span>);\n</span><span>      </span><span style=\"color:#b48ead;\">return </span><span>() </span><span style=\"color:#b48ead;\">=&gt; </span><span style=\"color:#96b5b4;\">clearTimeout</span><span>(</span><span style=\"color:#bf616a;\">timer</span><span>);\n</span><span>    }\n</span><span>  }, [</span><span style=\"color:#bf616a;\">trigger</span><span>]);\n</span><span>\n</span><span>  </span><span style=\"color:#65737e;\">// Use OKLCH for dynamic colors\n</span><span>  </span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">color </span><span>= </span><span style=\"color:#bf616a;\">proposal</span><span>.backgroundColor;\n</span><span>  </span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">animStyle </span><span>= </span><span style=\"color:#bf616a;\">isAnimating </span><span>? {\n</span><span>    boxShadow: `</span><span style=\"color:#a3be8c;\">0 0 0 2px oklch(0.75 ${</span><span style=\"color:#bf616a;\">color</span><span style=\"color:#a3be8c;\">.</span><span style=\"color:#bf616a;\">chroma</span><span style=\"color:#a3be8c;\">} ${</span><span style=\"color:#bf616a;\">color</span><span style=\"color:#a3be8c;\">.</span><span style=\"color:#bf616a;\">hue</span><span style=\"color:#a3be8c;\">})</span><span>`,\n</span><span>    backgroundColor: `</span><span style=\"color:#a3be8c;\">oklch(0.95 ${</span><span style=\"color:#bf616a;\">color</span><span style=\"color:#a3be8c;\">.</span><span style=\"color:#bf616a;\">chroma </span><span>* </span><span style=\"color:#d08770;\">0.3</span><span style=\"color:#a3be8c;\">} ${</span><span style=\"color:#bf616a;\">color</span><span style=\"color:#a3be8c;\">.</span><span style=\"color:#bf616a;\">hue</span><span style=\"color:#a3be8c;\">})</span><span>`,\n</span><span>  } : {};\n</span><span>\n</span><span>  </span><span style=\"color:#b48ead;\">return </span><span>&lt;div style={</span><span style=\"color:#bf616a;\">animStyle</span><span>} className=&quot;</span><span style=\"color:#a3be8c;\">transition-all duration-500</span><span>&quot;&gt;\n</span><span>    {</span><span style=\"color:#65737e;\">/* content */</span><span>}\n</span><span>  &lt;/</span><span style=\"color:#bf616a;\">div</span><span>&gt;;\n</span><span>};\n</span></code></pre>\n<p><strong>Business logic side:</strong></p>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#b48ead;\">const </span><span style=\"color:#8fa1b3;\">dispatchCommit </span><span>= (</span><span style=\"color:#bf616a;\">proposalId</span><span>: ProposalID) </span><span style=\"color:#b48ead;\">=&gt; </span><span>{\n</span><span>  </span><span style=\"color:#65737e;\">// ... commit logic\n</span><span>\n</span><span>  </span><span style=\"color:#65737e;\">// Trigger animation\n</span><span>  </span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">atoms </span><span>= </span><span style=\"color:#8fa1b3;\">memoProposalAnimationAtoms</span><span>(</span><span style=\"color:#bf616a;\">proposalId</span><span>);\n</span><span>  </span><span style=\"color:#bf616a;\">jotaiStore</span><span>.</span><span style=\"color:#96b5b4;\">set</span><span>(</span><span style=\"color:#bf616a;\">atoms</span><span>.</span><span style=\"color:#bf616a;\">commitAddedAtom</span><span>, (</span><span style=\"color:#bf616a;\">prev</span><span>) </span><span style=\"color:#b48ead;\">=&gt; </span><span style=\"color:#bf616a;\">prev </span><span>+ </span><span style=\"color:#d08770;\">1</span><span>);\n</span><span>};\n</span></code></pre>\n<p><strong>Testing:</strong></p>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#65737e;\">// Reset animation state\n</span><span style=\"color:#bf616a;\">jotaiStore</span><span>.</span><span style=\"color:#96b5b4;\">set</span><span>(</span><span style=\"color:#bf616a;\">proposal</span><span>.</span><span style=\"color:#bf616a;\">animationTriggers</span><span>.</span><span style=\"color:#bf616a;\">commitAddedAtom</span><span>, </span><span style=\"color:#d08770;\">0</span><span>);\n</span><span>\n</span><span style=\"color:#65737e;\">// Manually trigger for testing\n</span><span style=\"color:#bf616a;\">jotaiStore</span><span>.</span><span style=\"color:#96b5b4;\">set</span><span>(</span><span style=\"color:#bf616a;\">proposal</span><span>.</span><span style=\"color:#bf616a;\">animationTriggers</span><span>.</span><span style=\"color:#bf616a;\">commitAddedAtom</span><span>, (</span><span style=\"color:#bf616a;\">n</span><span>) </span><span style=\"color:#b48ead;\">=&gt; </span><span style=\"color:#bf616a;\">n </span><span>+ </span><span style=\"color:#d08770;\">1</span><span>);\n</span></code></pre>\n<p>This pattern ensures animations are triggered from business logic events while keeping the UI a pure projection of state.</p>\n<h2 id=\"defining-a-scope\">Defining a Scope <div data-loc=\"content/view-model-interfaces.md:322\" class=\"heading-src\">⋅</div></h2>\n<div class=\"codeblock\" data-loc=\"content&#x2F;view-model-interfaces.md:324\">\n  \n  <div class=\"codeblock-content\" data-id=\"todo-scope-livestore\">\n    <pre class=\"shiki rose-pine\" style=\"background-color:#191724;color:#e0def4\" tabindex=\"0\" data-loc=\"content/_sources/view-model-interfaces/todo-vm/scope.ts:38\"><code><span class=\"line muted\"><span style=\"color:#31748F\">const</span><span style=\"color:#EBBCBA;font-style:italic\"> createID</span><span style=\"color:#31748F\"> =</span><span style=\"color:#908CAA\"> (</span><span style=\"color:#C4A7E7;font-style:italic\">name</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#F6C177\"> `</span><span style=\"color:#908CAA\">${</span><span style=\"color:#E0DEF4;font-style:italic\">name</span><span style=\"color:#908CAA\">}</span><span style=\"color:#F6C177\">_</span><span style=\"color:#908CAA\">${</span><span style=\"color:#EBBCBA\">nanoid</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">12</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">}</span><span style=\"color:#F6C177\">`</span><span style=\"color:#908CAA\">;</span><span style=\"color:#E0DEF4\"> </span></span>\n<span class=\"line\"><span style=\"color:#31748F\">export</span><span style=\"color:#31748F\"> function</span><span style=\"color:#EBBCBA\"> createTodoListScope</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">store</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> Store</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> TodoListVM</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#E0DEF4;font-style:italic\"> currentFilter$</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> computed</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">get</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#EBBCBA\"> get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">uiState$</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">filter</span><span style=\"color:#908CAA\">,</span><span style=\"color:#908CAA\"> {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"filter\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#E0DEF4;font-style:italic\"> newTodoText$</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> computed</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">get</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#EBBCBA\"> get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">uiState$</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">newTodoText</span><span style=\"color:#908CAA\">,</span><span style=\"color:#908CAA\"> {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"newTodoText\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#E0DEF4;font-style:italic\"> createTodoItemVM</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> memoFn</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">id</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> TodoItemVM</span><span style=\"color:#31748F\"> =></span><span style=\"color:#908CAA\"> {</span></span>\n<details class=\"code-fold\" data-fold-kind=\"indent\"><summary class=\"code-fold-summary\"><span class=\"line\"><span style=\"color:#31748F\">    const</span><span style=\"color:#E0DEF4;font-style:italic\"> completed$</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> queryDb</span><span style=\"color:#E0DEF4\">(</span></span><span class=\"code-fold-ellipsis\" aria-hidden=\"true\">[…]</span></summary><div class=\"code-fold-content\"><span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">      tables</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">todos</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">select</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#F6C177\">\"completed\"</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">where</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\"> id</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">first</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> behaviour</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"error\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">      {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"todoItem.completed\"</span><span style=\"color:#908CAA\">,</span><span style=\"color:#E0DEF4\"> deps</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4\"> [</span><span style=\"color:#E0DEF4;font-style:italic\">id</span><span style=\"color:#E0DEF4\">] </span><span style=\"color:#908CAA\">},</span></span></div></details><span class=\"line\"><span style=\"color:#E0DEF4\">    )</span><span style=\"color:#908CAA\">;</span></span>\n<details class=\"code-fold\" data-fold-kind=\"indent\"><summary class=\"code-fold-summary\"><span class=\"line\"><span style=\"color:#31748F\">    const</span><span style=\"color:#E0DEF4;font-style:italic\"> text$</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> queryDb</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">tables</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">todos</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">select</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#F6C177\">\"text\"</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">where</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\"> id</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">first</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> behaviour</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"error\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span><span style=\"color:#908CAA\"> {</span></span><span class=\"code-fold-ellipsis\" aria-hidden=\"true\">[…]</span></summary><div class=\"code-fold-content\"><span class=\"line\"><span style=\"color:#E0DEF4\">      label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"todoItem.text\"</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">      deps</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4\"> [</span><span style=\"color:#E0DEF4;font-style:italic\">id</span><span style=\"color:#E0DEF4\">]</span><span style=\"color:#908CAA\">,</span></span></div></details><span class=\"line\"><span style=\"color:#908CAA\">    }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">    return</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">      key</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4;font-style:italic\"> id</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">      completed$</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">      text$</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      toggleCompleted</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">        store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">query</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">completed$</span><span style=\"color:#E0DEF4\">) </span><span style=\"color:#31748F\">?</span><span style=\"color:#E0DEF4;font-style:italic\"> events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">todoUncompleted</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\"> id</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">) </span><span style=\"color:#31748F\">:</span><span style=\"color:#E0DEF4;font-style:italic\"> events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">todoCompleted</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\"> id</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      remove</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">todoDeleted</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4;font-style:italic\"> id</span><span style=\"color:#908CAA\">,</span><span style=\"color:#E0DEF4\"> deletedAt</span><span style=\"color:#908CAA\">:</span><span style=\"color:#31748F\"> new</span><span style=\"color:#EBBCBA\"> Date</span><span style=\"color:#E0DEF4\">() </span><span style=\"color:#908CAA\">}</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    };</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#EBBCBA;font-style:italic\"> visibleTodosQuery</span><span style=\"color:#31748F\"> =</span><span style=\"color:#908CAA\"> (</span><span style=\"color:#C4A7E7;font-style:italic\">filter</span><span style=\"color:#31748F\">:</span><span style=\"color:#F6C177\"> \"all\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"active\"</span><span style=\"color:#31748F\"> |</span><span style=\"color:#F6C177\"> \"completed\"</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">    queryDb</span><span style=\"color:#E0DEF4\">(</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">      ()</span><span style=\"color:#31748F\"> =></span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">        tables</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">todos</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">where</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">          completed</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4;font-style:italic\"> filter</span><span style=\"color:#31748F\"> ===</span><span style=\"color:#F6C177\"> \"all\"</span><span style=\"color:#31748F\"> ?</span><span style=\"color:#EBBCBA\"> undefined</span><span style=\"color:#31748F\"> :</span><span style=\"color:#E0DEF4;font-style:italic\"> filter</span><span style=\"color:#31748F\"> ===</span><span style=\"color:#F6C177\"> \"completed\"</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">          deletedAt</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> {</span><span style=\"color:#E0DEF4\"> op</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"=\"</span><span style=\"color:#908CAA\">,</span><span style=\"color:#E0DEF4\"> value</span><span style=\"color:#908CAA\">:</span><span style=\"color:#EBBCBA\"> null</span><span style=\"color:#908CAA\"> },</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">        }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">      {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">        label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"visibleTodos\"</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">        map</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> (</span><span style=\"color:#C4A7E7;font-style:italic\">rows</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> rows</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">map</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">(</span><span style=\"color:#C4A7E7;font-style:italic\">row</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#EBBCBA\"> createTodoItemVM</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">row</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">id</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">        deps</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4\"> [</span><span style=\"color:#E0DEF4;font-style:italic\">filter</span><span style=\"color:#E0DEF4\">]</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">      },</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">    )</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"></span>\n<details class=\"code-fold\" data-fold-kind=\"indent\"><summary class=\"code-fold-summary\"><span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#E0DEF4;font-style:italic\"> visibleTodos$</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> computed</span><span style=\"color:#E0DEF4\">(</span></span><span class=\"code-fold-ellipsis\" aria-hidden=\"true\">[…]</span></summary><div class=\"code-fold-content\"><span class=\"line\"><span style=\"color:#908CAA\">    (</span><span style=\"color:#C4A7E7;font-style:italic\">get</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">      const</span><span style=\"color:#E0DEF4;font-style:italic\"> filter</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">currentFilter$</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">      return</span><span style=\"color:#EBBCBA\"> get</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#EBBCBA\">visibleTodosQuery</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">filter</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    },</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    {</span><span style=\"color:#E0DEF4\"> label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"visibleTodos\"</span><span style=\"color:#908CAA\"> },</span></span></div></details><span class=\"line\"><span style=\"color:#E0DEF4\">  )</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#31748F\">  const</span><span style=\"color:#E0DEF4;font-style:italic\"> incompleteCount$</span><span style=\"color:#31748F\"> =</span><span style=\"color:#EBBCBA\"> queryDb</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">tables</span><span style=\"color:#31748F\">.</span><span style=\"color:#E0DEF4;font-style:italic\">todos</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">count</span><span style=\"color:#E0DEF4\">()</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">where</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> completed</span><span style=\"color:#908CAA\">:</span><span style=\"color:#EBBCBA\"> false</span><span style=\"color:#908CAA\">,</span><span style=\"color:#E0DEF4\"> deletedAt</span><span style=\"color:#908CAA\">:</span><span style=\"color:#EBBCBA\"> null</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">    label</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"incompleteCount\"</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#31748F\">  return</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">    header</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">      newTodoText$</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      updateNewTodoText</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> (</span><span style=\"color:#C4A7E7;font-style:italic\">text</span><span style=\"color:#31748F\">:</span><span style=\"color:#9CCFD8\"> string</span><span style=\"color:#908CAA\">)</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">uiStateSet</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> newTodoText</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4;font-style:italic\"> text</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      addTodo</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">        const</span><span style=\"color:#E0DEF4;font-style:italic\"> newTodoText</span><span style=\"color:#31748F\"> =</span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">query</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">newTodoText$</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">trim</span><span style=\"color:#E0DEF4\">()</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#31748F\">        if</span><span style=\"color:#E0DEF4\"> (</span><span style=\"color:#E0DEF4;font-style:italic\">newTodoText</span><span style=\"color:#E0DEF4\">) </span><span style=\"color:#908CAA\">{</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">          store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">            events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">todoCreated</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> id</span><span style=\"color:#908CAA\">:</span><span style=\"color:#EBBCBA\"> createID</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#F6C177\">\"todo\"</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span><span style=\"color:#E0DEF4\"> text</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4;font-style:italic\"> newTodoText</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">            events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">uiStateSet</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> newTodoText</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">)</span><span style=\"color:#908CAA\">,</span><span style=\"color:#908CAA;font-style:italic\"> //</span><span style=\"color:#6E6A86;font-style:italic\"> update text</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">          )</span><span style=\"color:#908CAA\">;</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">        }</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">      },</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    },</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">    itemList</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">      items$</span><span style=\"color:#908CAA\">:</span><span style=\"color:#E0DEF4;font-style:italic\"> visibleTodos$</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    },</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4\">    footer</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> {</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">      incompleteCount$</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#E0DEF4;font-style:italic\">      currentFilter$</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      showAll</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">uiStateSet</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> filter</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"all\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      showActive</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">uiStateSet</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> filter</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"active\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      showCompleted</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">uiStateSet</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> filter</span><span style=\"color:#908CAA\">:</span><span style=\"color:#F6C177\"> \"completed\"</span><span style=\"color:#908CAA\"> }</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#EBBCBA\">      clearCompleted</span><span style=\"color:#908CAA\">:</span><span style=\"color:#908CAA\"> ()</span><span style=\"color:#31748F\"> =></span><span style=\"color:#E0DEF4;font-style:italic\"> store</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">commit</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#E0DEF4;font-style:italic\">events</span><span style=\"color:#31748F\">.</span><span style=\"color:#EBBCBA\">todoClearedCompleted</span><span style=\"color:#E0DEF4\">(</span><span style=\"color:#908CAA\">{</span><span style=\"color:#E0DEF4\"> deletedAt</span><span style=\"color:#908CAA\">:</span><span style=\"color:#31748F\"> new</span><span style=\"color:#EBBCBA\"> Date</span><span style=\"color:#E0DEF4\">() </span><span style=\"color:#908CAA\">}</span><span style=\"color:#E0DEF4\">))</span><span style=\"color:#908CAA\">,</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">    },</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">  };</span></span>\n<span class=\"line\"><span style=\"color:#908CAA\">}</span></span></code></pre>\n  </div>\n  \n</div>\n",
    "permalink": "/view-model-interfaces/",
    "slug": "view-model-interfaces",
    "ancestors": [
      "_index.md"
    ],
    "title": "Please write view model interfaces",
    "description": "Designing the boundary between view and business logic.",
    "updated": null,
    "date": "2025-10-17",
    "year": 2025,
    "month": 10,
    "day": 17,
    "taxonomies": {},
    "authors": [],
    "extra": {
      "category": "engineering",
      "nav_section": "Managing Complexity",
      "nav_order": 1
    },
    "path": "/view-model-interfaces/",
    "components": [
      "view-model-interfaces"
    ],
    "summary": null,
    "toc": [
      {
        "level": 1,
        "id": "view-model-interfaces",
        "permalink": "/view-model-interfaces/#view-model-interfaces",
        "title": "View Model Interfaces ⋅",
        "children": [
          {
            "level": 2,
            "id": "thesis-why-this-matters",
            "permalink": "/view-model-interfaces/#thesis-why-this-matters",
            "title": "Thesis (why this matters) ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "definition-what-it-is",
            "permalink": "/view-model-interfaces/#definition-what-it-is",
            "title": "Definition (what it is) ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "principles-how-to-shape-it",
            "permalink": "/view-model-interfaces/#principles-how-to-shape-it",
            "title": "Principles (how to shape it) ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "when-it-shines-when-not-to-use",
            "permalink": "/view-model-interfaces/#when-it-shines-when-not-to-use",
            "title": "When it shines / When not to use ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "testing-workflow-evidence-over-rhetoric",
            "permalink": "/view-model-interfaces/#testing-workflow-evidence-over-rhetoric",
            "title": "Testing Workflow (evidence over rhetoric) ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "introduction",
            "permalink": "/view-model-interfaces/#introduction",
            "title": "Introduction ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "benefits",
            "permalink": "/view-model-interfaces/#benefits",
            "title": "Benefits ⋅",
            "children": []
          }
        ]
      },
      {
        "level": 1,
        "id": "example",
        "permalink": "/view-model-interfaces/#example",
        "title": "Example ⋅",
        "children": [
          {
            "level": 2,
            "id": "animation-triggers",
            "permalink": "/view-model-interfaces/#animation-triggers",
            "title": "Animation Triggers ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "defining-a-scope",
            "permalink": "/view-model-interfaces/#defining-a-scope",
            "title": "Defining a Scope ⋅",
            "children": []
          }
        ]
      }
    ],
    "word_count": 1900,
    "reading_time": 10,
    "assets": [],
    "draft": true,
    "lang": "en",
    "lower": {
      "relative_path": "entity-component-ui.md",
      "colocated_path": null,
      "content": "<h1 id=\"entity-component-ui\">Entity Component UI <div data-loc=\"content/entity-component-ui.md:12\" class=\"heading-src\">⋅</div></h1>\n\n<!-- https://www.getzola.org/documentation/content/shortcodes/ -->\n<details class=\"article-spoiler\" data-loc=\"content&#x2F;entity-component-ui.md:14\">\n  <summary>\n    <span class=\"article-spoiler-title\">Raw</span>\n  </summary>\n  <!-- https://www.getzola.org/documentation/content/shortcodes/#shortcodes-with-body -->\n  <div class=\"article-spoiler-content whitespace-pre-wrap text-xs\">Hi</div>\n</details>\n\n\n<!-- https://www.getzola.org/documentation/content/shortcodes/ -->\n<details class=\"article-spoiler\" data-loc=\"content&#x2F;entity-component-ui.md:18\">\n  <summary>\n    <span class=\"article-spoiler-title\">Anchors</span>\n  </summary>\n  <!-- https://www.getzola.org/documentation/content/shortcodes/#shortcodes-with-body -->\n  <div class=\"article-spoiler-content whitespace-pre-wrap text-xs\">TODO: translate the raw thoughts into initial anchors.<br>Controversial thesis: You should split view from business logic with a type-first, fine-grained reactive View Model Interface that lives outside the view lifecycle.<br><br>- This makes complex UIs testable, predictable, and easier to co-develop (including with LLMs).<br><br>Hero visual ideas:<br><br>- Running UI, View Model interface, and test cases in three panes<br>- Could be a simple text input with autocomplete/hints at the bottom</div>\n</details>\n\n<p><strong>Inspired by</strong> the composability of the Entity-Component-System (ECS) pattern, popularized in game development, and the testability of the Model-View-View-Model (MVVM) pattern, popularized in Swift, Flutter, and Xamarin.\n<strong>Analogies</strong>: Entity ID = UID; System = WorldState.Plugin\n<strong>Primary goals</strong>: (unit) testability, composability, observability.\n<strong>Characteristics</strong>:</p>\n<ul>\n<li>Plugins can be tested in complete isolation of each other (e.g. SpatialNav).</li>\n<li>Source code clearly shows what components each plugin contributes and depends on.</li>\n<li>Central World Store is highly inspectable by being a simple lookup from UIDs to component values.</li>\n<li>Reactivity is managed entirely through jotai atoms</li>\n</ul>\n<h2 id=\"context\">Context <div data-loc=\"content/entity-component-ui.md:41\" class=\"heading-src\">⋅</div></h2>\n<p>Our WorldState architecture is inspired by Entity Component System (ECS) patterns from game development, adapted for dense UI implementations. It decouples behavior, data, and UI rendering across multiple layers. This is especially useful in large-scale or collaborative applications that manage complex data flows–like CRDT-based documents, hierarchical data, or multiple concurrent user sessions.</p>\n<h2 id=\"key-concepts\">Key Concepts <div data-loc=\"content/entity-component-ui.md:45\" class=\"heading-src\">⋅</div></h2>\n<h3 id=\"entities\">Entities <div data-loc=\"content/entity-component-ui.md:47\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li><strong>What</strong>: Unique identifiers representing distinct objects in the UI or application (e.g., modules, variables, workspace info, user accounts, etc.).</li>\n<li><strong>Why</strong>: Entities let us compose data and behavior in a flexible, modular way.</li>\n</ul>\n<h3 id=\"components\">Components <div data-loc=\"content/entity-component-ui.md:52\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li><strong>What</strong>: Reusable pieces of functionality (with their own states/atoms) that can be attached to entities.</li>\n<li><strong>Why</strong>: Components let you attach specialized behavior (e.g., focusable, draggable, collapsable) to any entity without duplicating logic.</li>\n</ul>\n<h3 id=\"uniques\">Uniques <div data-loc=\"content/entity-component-ui.md:57\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li><strong>What</strong>: Singleton objects that exist independently of entities (e.g., global settings, user session state).</li>\n<li><strong>Why</strong>: Uniques allow for truly global or application-wide states that any part of the system can reference.</li>\n</ul>\n<h3 id=\"entity-map-worldstate\">Entity Map / WorldState <div data-loc=\"content/entity-component-ui.md:62\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li><strong>What</strong>: A central registry that manages entities, components, and uniques.</li>\n<li><strong>Why</strong>: The WorldState orchestrates creation, updates, and disposal, ensuring a single source of truth.</li>\n</ul>\n<h3 id=\"plugins\">Plugins <div data-loc=\"content/entity-component-ui.md:67\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li><strong>What</strong>: Extension modules that respond to entity creation, provide derived components, add global uniques, or enforce constraints.</li>\n<li><strong>Why</strong>: Plugins allow building feature layers (like a tree, a grid, or specialized editing behaviors) without entangling the core system logic.</li>\n</ul>\n<h2 id=\"benefits\">Benefits <div data-loc=\"content/entity-component-ui.md:72\" class=\"heading-src\">⋅</div></h2>\n<h3 id=\"composability\">Composability <div data-loc=\"content/entity-component-ui.md:74\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li>You can mix and match components to form new behaviors without duplicating code.</li>\n<li>Example: Attaching <code>CLabel</code> and <code>CFocusable</code> to an entity to make it both labeled and keyboard-focusable.</li>\n</ul>\n<h3 id=\"type-safety\">Type Safety <div data-loc=\"content/entity-component-ui.md:79\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li>The system's use of TypeScript generics ensures correct composition of entities and components.</li>\n<li>You get compile-time verification that the right components exist on an entity.</li>\n</ul>\n<h3 id=\"ui-framework-agnostic\">UI Framework Agnostic <div data-loc=\"content/entity-component-ui.md:84\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li>The \"ECS\"-like logic (entities, components, plugins) is decoupled from rendering (e.g. React).</li>\n</ul>\n<h3 id=\"centralized-state-management-with-jotai\">Centralized State Management with Jotai <div data-loc=\"content/entity-component-ui.md:88\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li>Components store data in Jotai atoms, which are known for their straightforward and granular reactivity.</li>\n<li>This fosters predictable state updates and fine-grained performance optimizations.</li>\n</ul>\n<h3 id=\"easy-testing\">Easy Testing <div data-loc=\"content/entity-component-ui.md:93\" class=\"heading-src\">⋅</div></h3>\n<ul>\n<li>Components can be tested in isolation (like microservices).</li>\n<li>You can directly test reactivity, plugin interactions, and more, all without hooking up any UI.</li>\n</ul>\n<h2 id=\"example-usage\">Example Usage <div data-loc=\"content/entity-component-ui.md:98\" class=\"heading-src\">⋅</div></h2>\n<h3 id=\"defining-a-module-entity\">Defining a Module Entity <div data-loc=\"content/entity-component-ui.md:100\" class=\"heading-src\">⋅</div></h3>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#65737e;\">// Components\n</span><span style=\"color:#b48ead;\">export class </span><span style=\"color:#ebcb8b;\">CEditability </span><span style=\"color:#b48ead;\">extends </span><span style=\"color:#bf616a;\">World</span><span style=\"color:#eff1f5;\">.</span><span style=\"color:#8fa1b3;\">Component</span><span style=\"color:#eff1f5;\">(</span><span>&quot;</span><span style=\"color:#a3be8c;\">editability</span><span>&quot;</span><span style=\"color:#eff1f5;\">)&lt;\n</span><span style=\"color:#eff1f5;\">  CEditability,\n</span><span style=\"color:#eff1f5;\">  { </span><span style=\"color:#bf616a;\">canBeEditedAtom</span><span>: </span><span style=\"color:#eff1f5;\">Atom&lt;boolean&gt;; </span><span style=\"color:#bf616a;\">disabledReasonAtom</span><span>: </span><span style=\"color:#eff1f5;\">Atom&lt;null </span><span>| </span><span style=\"color:#eff1f5;\">string&gt; }\n</span><span style=\"color:#eff1f5;\">&gt;() {}\n</span><span>\n</span><span style=\"color:#b48ead;\">export class </span><span style=\"color:#ebcb8b;\">CLabel </span><span style=\"color:#b48ead;\">extends </span><span style=\"color:#bf616a;\">World</span><span style=\"color:#eff1f5;\">.</span><span style=\"color:#8fa1b3;\">Component</span><span style=\"color:#eff1f5;\">(</span><span>&quot;</span><span style=\"color:#a3be8c;\">label</span><span>&quot;</span><span style=\"color:#eff1f5;\">)&lt;CLabel, { </span><span style=\"color:#bf616a;\">textEditor</span><span>: </span><span style=\"color:#eff1f5;\">MyTextEditorType }&gt;() {}\n</span><span>\n</span><span style=\"color:#65737e;\">// Use tags (zero-value components) to help plugins match on entities of a specific type\n</span><span style=\"color:#b48ead;\">export class </span><span style=\"color:#ebcb8b;\">CModuleTag </span><span style=\"color:#b48ead;\">extends </span><span style=\"color:#bf616a;\">World</span><span style=\"color:#eff1f5;\">.</span><span style=\"color:#8fa1b3;\">Component</span><span style=\"color:#eff1f5;\">(</span><span>&quot;</span><span style=\"color:#a3be8c;\">moduleTag</span><span>&quot;</span><span style=\"color:#eff1f5;\">)&lt;CLabel, {}&gt;() {}\n</span><span>\n</span><span style=\"color:#65737e;\">// Entity\n</span><span style=\"color:#b48ead;\">export class </span><span style=\"color:#ebcb8b;\">ModuleEntity </span><span style=\"color:#b48ead;\">extends </span><span style=\"color:#bf616a;\">World</span><span style=\"color:#eff1f5;\">.</span><span style=\"color:#8fa1b3;\">Entity</span><span style=\"color:#eff1f5;\">(</span><span>&quot;</span><span style=\"color:#a3be8c;\">module</span><span>&quot;</span><span style=\"color:#eff1f5;\">, {\n</span><span style=\"color:#eff1f5;\">  </span><span style=\"color:#65737e;\">// Required initial components\n</span><span style=\"color:#eff1f5;\">  components: [</span><span style=\"color:#bf616a;\">CModuleTag</span><span style=\"color:#eff1f5;\">, </span><span style=\"color:#bf616a;\">CEditability</span><span style=\"color:#eff1f5;\">, </span><span style=\"color:#bf616a;\">CLabel</span><span style=\"color:#eff1f5;\">],\n</span><span style=\"color:#eff1f5;\">  </span><span style=\"color:#65737e;\">// Components expected to be provided by plugins\n</span><span style=\"color:#eff1f5;\">  componentsProvidedByPlugins: [],\n</span><span style=\"color:#eff1f5;\">})&lt;ModuleEntity&gt;() {}\n</span></code></pre>\n<h3 id=\"creating-and-using-the-entity-in-the-worldstate\">Creating and Using the Entity in the WorldState <div data-loc=\"content/entity-component-ui.md:123\" class=\"heading-src\">⋅</div></h3>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#65737e;\">// 1. Create a world with or without plugins\n</span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">world </span><span>= new WorldStateImpl({ </span><span style=\"color:#bf616a;\">store</span><span>, </span><span style=\"color:#bf616a;\">pool</span><span>, plugins: [] });\n</span><span>\n</span><span style=\"color:#65737e;\">// 2. Add a new module entity\n</span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">moduleUID </span><span>= </span><span style=\"color:#bf616a;\">world</span><span>.</span><span style=\"color:#8fa1b3;\">addEntity</span><span>(</span><span style=\"color:#bf616a;\">World</span><span>.</span><span style=\"color:#8fa1b3;\">uid</span><span>(</span><span style=\"color:#d08770;\">null</span><span>, </span><span style=\"color:#d08770;\">null</span><span>, &quot;</span><span style=\"color:#a3be8c;\">module-1</span><span>&quot;), </span><span style=\"color:#bf616a;\">ModuleEntity</span><span>, {\n</span><span>  moduleTag: </span><span style=\"color:#bf616a;\">CModuleTag</span><span>.</span><span style=\"color:#8fa1b3;\">of</span><span>({}),\n</span><span>  editability: </span><span style=\"color:#bf616a;\">CEditability</span><span>.</span><span style=\"color:#8fa1b3;\">of</span><span>({\n</span><span>    canBeEditedAtom: </span><span style=\"color:#8fa1b3;\">atom</span><span>(</span><span style=\"color:#d08770;\">true</span><span>),\n</span><span>    disabledReasonAtom: </span><span style=\"color:#8fa1b3;\">atom</span><span>(</span><span style=\"color:#d08770;\">null</span><span>),\n</span><span>  }),\n</span><span>  label: </span><span style=\"color:#bf616a;\">CLabel</span><span>.</span><span style=\"color:#8fa1b3;\">of</span><span>({\n</span><span>    textEditor: {\n</span><span>      </span><span style=\"color:#65737e;\">/* ...some editor instance... */\n</span><span>    },\n</span><span>  }),\n</span><span>});\n</span><span>\n</span><span style=\"color:#65737e;\">// 3. Retrieve and update\n</span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">labelAtom </span><span>= </span><span style=\"color:#bf616a;\">world</span><span>.</span><span style=\"color:#8fa1b3;\">getComponentAtom</span><span>(</span><span style=\"color:#bf616a;\">moduleUID</span><span>, </span><span style=\"color:#bf616a;\">CLabel</span><span>);\n</span><span style=\"color:#bf616a;\">store</span><span>.</span><span style=\"color:#96b5b4;\">set</span><span>(</span><span style=\"color:#bf616a;\">labelAtom</span><span>, {\n</span><span>  textEditor: {\n</span><span>    </span><span style=\"color:#65737e;\">/* updated editor data */\n</span><span>  },\n</span><span>});\n</span></code></pre>\n<h3 id=\"derived-components-via-a-plugin\">Derived Components via a Plugin <div data-loc=\"content/entity-component-ui.md:152\" class=\"heading-src\">⋅</div></h3>\n<pre data-lang=\"typescript\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-typescript \"><code class=\"language-typescript\" data-lang=\"typescript\"><span style=\"color:#65737e;\">// For any entity with CEditability, automatically add a CDisableable\n</span><span style=\"color:#b48ead;\">class </span><span style=\"color:#ebcb8b;\">CDisableable </span><span style=\"color:#b48ead;\">extends </span><span style=\"color:#bf616a;\">World</span><span style=\"color:#eff1f5;\">.</span><span style=\"color:#8fa1b3;\">Component</span><span style=\"color:#eff1f5;\">(</span><span>&quot;</span><span style=\"color:#a3be8c;\">disableable</span><span>&quot;</span><span style=\"color:#eff1f5;\">)&lt;CDisableable, { </span><span style=\"color:#bf616a;\">isDisabledAtom</span><span>: </span><span style=\"color:#eff1f5;\">Atom&lt;boolean&gt; }&gt;() {}\n</span><span>\n</span><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">disablePlugin </span><span>= {\n</span><span>  name: &quot;</span><span style=\"color:#a3be8c;\">disable-plugin</span><span>&quot;,\n</span><span>  </span><span style=\"color:#8fa1b3;\">setup</span><span>(</span><span style=\"color:#bf616a;\">build</span><span>: World.WorldStateBuild) {\n</span><span>    </span><span style=\"color:#bf616a;\">build</span><span>.</span><span style=\"color:#8fa1b3;\">onEntityCreated</span><span>(\n</span><span>      {\n</span><span>        </span><span style=\"color:#65737e;\">// The plugin can match _any_ entity with CEditability, as opposed to only ModuleEntities\n</span><span>        requires: [</span><span style=\"color:#bf616a;\">CEditability</span><span>],\n</span><span>        provides: [</span><span style=\"color:#bf616a;\">CDisableable</span><span>],\n</span><span>      },\n</span><span>      (</span><span style=\"color:#bf616a;\">uid</span><span>, { </span><span style=\"color:#bf616a;\">editability </span><span>}) </span><span style=\"color:#b48ead;\">=&gt; </span><span>({\n</span><span>        disableable: </span><span style=\"color:#bf616a;\">CDisableable</span><span>.</span><span style=\"color:#8fa1b3;\">of</span><span>({\n</span><span>          isDisabledAtom: </span><span style=\"color:#8fa1b3;\">atom</span><span>((</span><span style=\"color:#bf616a;\">get</span><span>) </span><span style=\"color:#b48ead;\">=&gt; </span><span>!</span><span style=\"color:#8fa1b3;\">get</span><span>(</span><span style=\"color:#bf616a;\">editability</span><span>.</span><span style=\"color:#bf616a;\">canBeEditedAtom</span><span>)),\n</span><span>        }),\n</span><span>      }),\n</span><span>    );\n</span><span>  },\n</span><span>};\n</span></code></pre>\n<h2 id=\"best-practices\">Best Practices <div data-loc=\"content/entity-component-ui.md:177\" class=\"heading-src\">⋅</div></h2>\n<h3 id=\"keep-components-small-and-focused\">Keep Components Small and Focused <div data-loc=\"content/entity-component-ui.md:179\" class=\"heading-src\">⋅</div></h3>\n<p>Each component should do one job. For example, <code>CFocusable</code> for keyboard focus logic, <code>CTreeMovable</code> for drag/move logic.</p>\n<h3 id=\"prefer-composition-over-inheritance\">Prefer Composition Over Inheritance <div data-loc=\"content/entity-component-ui.md:183\" class=\"heading-src\">⋅</div></h3>\n<p>ECS fosters horizontal composition. Attach more components to get new behavior, rather than a deep inheritance hierarchy.</p>\n<h3 id=\"use-jotai-s-atomvalue-or-minimal-hooks\">Use Jotai's <code>&lt;AtomValue /&gt;</code> or Minimal Hooks <div data-loc=\"content/entity-component-ui.md:187\" class=\"heading-src\">⋅</div></h3>\n<p>If you use React, <code>&lt;AtomValue /&gt;</code> or minimal hooks reduce extraneous re-renders. For non-React frameworks, the concept is similar: subscribe only to the atoms you need.</p>\n<pre data-lang=\"tsx\" style=\"background-color:#2b303b;color:#c0c5ce;\" class=\"language-tsx \"><code class=\"language-tsx\" data-lang=\"tsx\"><span style=\"color:#b48ead;\">const </span><span style=\"color:#bf616a;\">labelAtom </span><span>= </span><span style=\"color:#bf616a;\">world</span><span>.</span><span style=\"color:#8fa1b3;\">getComponentAtom</span><span>(</span><span style=\"color:#bf616a;\">moduleUID</span><span>, </span><span style=\"color:#bf616a;\">CLabel</span><span>);\n</span><span style=\"color:#65737e;\">// if the atom is a primitive, you can render it directly as text\n</span><span style=\"color:#b48ead;\">return </span><span>&lt;</span><span style=\"color:#ebcb8b;\">AtomValue </span><span style=\"color:#d08770;\">atom</span><span>=</span><span style=\"color:#ab7967;\">{</span><span style=\"color:#bf616a;\">labelAtom</span><span style=\"color:#ab7967;\">} </span><span>/&gt;;\n</span><span style=\"color:#65737e;\">// or use it with a render function\n</span><span style=\"color:#b48ead;\">return </span><span>&lt;</span><span style=\"color:#ebcb8b;\">AtomValue </span><span style=\"color:#d08770;\">atom</span><span>=</span><span style=\"color:#ab7967;\">{</span><span style=\"color:#bf616a;\">labelAtom</span><span style=\"color:#ab7967;\">}</span><span>&gt;</span><span style=\"color:#ab7967;\">{</span><span>(</span><span style=\"color:#bf616a;\">label</span><span>) </span><span style=\"color:#b48ead;\">=&gt; </span><span>&lt;</span><span style=\"color:#bf616a;\">span </span><span style=\"color:#d08770;\">$</span><span>&gt;</span><span style=\"color:#ab7967;\">{</span><span style=\"color:#bf616a;\">label</span><span>?.text</span><span style=\"color:#ab7967;\">}</span><span>&lt;/</span><span style=\"color:#bf616a;\">span</span><span>&gt;</span><span style=\"color:#ab7967;\">}</span><span>&lt;/</span><span style=\"color:#ebcb8b;\">AtomValue</span><span>&gt;;\n</span><span style=\"color:#65737e;\">// depends on the component...\n</span><span style=\"color:#b48ead;\">return </span><span>&lt;</span><span style=\"color:#ebcb8b;\">AtomValue </span><span style=\"color:#d08770;\">atom</span><span>=</span><span style=\"color:#ab7967;\">{</span><span style=\"color:#bf616a;\">labelAtom</span><span style=\"color:#ab7967;\">}</span><span>&gt;</span><span style=\"color:#ab7967;\">{</span><span>(</span><span style=\"color:#bf616a;\">label</span><span>) </span><span style=\"color:#b48ead;\">=&gt; </span><span>&lt;</span><span style=\"color:#bf616a;\">div </span><span style=\"color:#d08770;\">$ ref</span><span>=</span><span style=\"color:#ab7967;\">{</span><span>(</span><span style=\"color:#bf616a;\">elt</span><span>) </span><span style=\"color:#b48ead;\">=&gt; </span><span style=\"color:#bf616a;\">label</span><span>.</span><span style=\"color:#8fa1b3;\">mount</span><span>(</span><span style=\"color:#bf616a;\">elt</span><span>)</span><span style=\"color:#ab7967;\">} </span><span>/&gt;</span><span style=\"color:#ab7967;\">}</span><span>&lt;/</span><span style=\"color:#ebcb8b;\">AtomValue</span><span>&gt;;\n</span></code></pre>\n<h3 id=\"test-in-isolation\">Test in Isolation <div data-loc=\"content/entity-component-ui.md:201\" class=\"heading-src\">⋅</div></h3>\n<p>Since WorldState logic is framework-agnostic, you can test the business logic of each component or plugin thoroughly without rendering UI.</p>\n<h3 id=\"leverage-the-ecs-for-concurrency\">Leverage the ECS for Concurrency <div data-loc=\"content/entity-component-ui.md:205\" class=\"heading-src\">⋅</div></h3>\n<p>CRDT merges, multiple user sessions, or real-time data streams can be managed more cleanly by hooking them into WorldState components or uniques, instead of scattering logic throughout the code.</p>\n<h2 id=\"conclusion\">Conclusion <div data-loc=\"content/entity-component-ui.md:209\" class=\"heading-src\">⋅</div></h2>\n<p>Our WorldState approach (powered by ECS) provides a robust, modular, and testable foundation for building complex UI and application logic. By separating data (via Jotai atoms), behavior (via components), and global singletons (via uniques), we can scale our application functionality while keeping each layer maintainable and comprehensible.</p>\n",
      "permalink": "/entity-component-ui/",
      "slug": "entity-component-ui",
      "ancestors": [
        "_index.md"
      ],
      "title": "Entity Component UI",
      "description": "For complex UIs, we break view models into separate components.",
      "updated": null,
      "date": "2025-10-17",
      "year": 2025,
      "month": 10,
      "day": 17,
      "taxonomies": {},
      "authors": [],
      "extra": {
        "category": "engineering",
        "nav_section": "Managing Complexity",
        "nav_order": 2
      },
      "path": "/entity-component-ui/",
      "components": [
        "entity-component-ui"
      ],
      "summary": null,
      "toc": [
        {
          "level": 1,
          "id": "entity-component-ui",
          "permalink": "/entity-component-ui/#entity-component-ui",
          "title": "Entity Component UI ⋅",
          "children": [
            {
              "level": 2,
              "id": "context",
              "permalink": "/entity-component-ui/#context",
              "title": "Context ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "key-concepts",
              "permalink": "/entity-component-ui/#key-concepts",
              "title": "Key Concepts ⋅",
              "children": [
                {
                  "level": 3,
                  "id": "entities",
                  "permalink": "/entity-component-ui/#entities",
                  "title": "Entities ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "components",
                  "permalink": "/entity-component-ui/#components",
                  "title": "Components ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "uniques",
                  "permalink": "/entity-component-ui/#uniques",
                  "title": "Uniques ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "entity-map-worldstate",
                  "permalink": "/entity-component-ui/#entity-map-worldstate",
                  "title": "Entity Map / WorldState ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "plugins",
                  "permalink": "/entity-component-ui/#plugins",
                  "title": "Plugins ⋅",
                  "children": []
                }
              ]
            },
            {
              "level": 2,
              "id": "benefits",
              "permalink": "/entity-component-ui/#benefits",
              "title": "Benefits ⋅",
              "children": [
                {
                  "level": 3,
                  "id": "composability",
                  "permalink": "/entity-component-ui/#composability",
                  "title": "Composability ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "type-safety",
                  "permalink": "/entity-component-ui/#type-safety",
                  "title": "Type Safety ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "ui-framework-agnostic",
                  "permalink": "/entity-component-ui/#ui-framework-agnostic",
                  "title": "UI Framework Agnostic ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "centralized-state-management-with-jotai",
                  "permalink": "/entity-component-ui/#centralized-state-management-with-jotai",
                  "title": "Centralized State Management with Jotai ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "easy-testing",
                  "permalink": "/entity-component-ui/#easy-testing",
                  "title": "Easy Testing ⋅",
                  "children": []
                }
              ]
            },
            {
              "level": 2,
              "id": "example-usage",
              "permalink": "/entity-component-ui/#example-usage",
              "title": "Example Usage ⋅",
              "children": [
                {
                  "level": 3,
                  "id": "defining-a-module-entity",
                  "permalink": "/entity-component-ui/#defining-a-module-entity",
                  "title": "Defining a Module Entity ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "creating-and-using-the-entity-in-the-worldstate",
                  "permalink": "/entity-component-ui/#creating-and-using-the-entity-in-the-worldstate",
                  "title": "Creating and Using the Entity in the WorldState ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "derived-components-via-a-plugin",
                  "permalink": "/entity-component-ui/#derived-components-via-a-plugin",
                  "title": "Derived Components via a Plugin ⋅",
                  "children": []
                }
              ]
            },
            {
              "level": 2,
              "id": "best-practices",
              "permalink": "/entity-component-ui/#best-practices",
              "title": "Best Practices ⋅",
              "children": [
                {
                  "level": 3,
                  "id": "keep-components-small-and-focused",
                  "permalink": "/entity-component-ui/#keep-components-small-and-focused",
                  "title": "Keep Components Small and Focused ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "prefer-composition-over-inheritance",
                  "permalink": "/entity-component-ui/#prefer-composition-over-inheritance",
                  "title": "Prefer Composition Over Inheritance ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "use-jotai-s-atomvalue-or-minimal-hooks",
                  "permalink": "/entity-component-ui/#use-jotai-s-atomvalue-or-minimal-hooks",
                  "title": "Use Jotai's <AtomValue /> or Minimal Hooks ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "test-in-isolation",
                  "permalink": "/entity-component-ui/#test-in-isolation",
                  "title": "Test in Isolation ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "leverage-the-ecs-for-concurrency",
                  "permalink": "/entity-component-ui/#leverage-the-ecs-for-concurrency",
                  "title": "Leverage the ECS for Concurrency ⋅",
                  "children": []
                }
              ]
            },
            {
              "level": 2,
              "id": "conclusion",
              "permalink": "/entity-component-ui/#conclusion",
              "title": "Conclusion ⋅",
              "children": []
            }
          ]
        }
      ],
      "word_count": 1048,
      "reading_time": 6,
      "assets": [],
      "draft": true,
      "lang": "en",
      "lower": null,
      "higher": null,
      "translations": [],
      "backlinks": []
    },
    "higher": {
      "relative_path": "der-draft.md",
      "colocated_path": null,
      "content": "<h1 id=\"design-engineering-rectangles\">Design Engineering Rectangles <div data-loc=\"content/der-draft.md:7\" class=\"heading-src\">⋅</div></h1>\n<h2 id=\"s1-hook-rectangle-hydra-problem\">[S1] Hook: Rectangle hydra problem <div data-loc=\"content/der-draft.md:9\" class=\"heading-src\">⋅</div></h2>\n<p>Hi, my name is Cole. I work at Phosphor where we are tackling extremely dense UI problems. At previous companies, I had experienced very similar things. But the scale out was always a challenge I had gone from in my career I've gone from a basic view-model-controller patterns to a form of MVVM (model-view-view-model) and then at my previous start-up, I ventured into an architecture that was in Rust. While writing in Rust, we found that the ease due to how the borrow checker was working made it the easiest way to do this is to write it in Rust.</p>\n<p>The most easy way to do things like reactivity was through a pattern called entity-component-systems, which allow you to create detached components from entities where entities are themselves just IDs that you use to look up components in a sparse set or... a type map.</p>\n<p>What this yielded was that in files that needed to do some kind of complex logic, instead of importing an entire AST structure, you had a parsed version and type checking and errors all as separate components, so one system could handle the raw structure too. Parsed form. Then another system could take parsed form too. The two errors and suggestions and a separate system could handle the parsed form to suggestions. Yet another system says, \"Okay, now let's map those suggestions to UI notifications\", and each one of these systems was able to sort of build on each other in an extremely scoped way where they own each system individually only cared about the components between them.</p>\n<p>I had previously used this pattern not just because I was in Rust previously, but I grew to love the pattern for the properties that gave me for testing and reasoning. I had the suspicion early on here at Phosphor that we could leverage this pattern to improve our UI building because every rectangle has a lot of complexity behind it and you have to figure out how you're going to scale out that complexity.</p>\n<hr />\n<p>Let me take that step back and tell you kind of like, well, see if I can paint the picture of the problem that you know we're experiencing at Phosphor. If we start with one input box, you're going to imagine there's a little there's some hooks, there's some state management, there might be some persistence involved, and you kind of start. Then we add a little bit more. We add validation, and validation will report if there's an error or something. This is where you're thinking now I need system-wide undo and redo, which is going to touch a few files and need to link things together. Then you say, \"Okay, well, I have a shit. I need to also support collaborative editing so multiple people can see what each other are doing and maintain kind of a collaborative feature.\" This is going to touch a bunch of files because now we're talking about the way you present things and it's the talking about your sync layer. Your front-end needs to maybe be reworked so that the sync layer is actually the hook that you're using and not some other persistence thing. You refactor that. \"Okay, cool, normal things.\" But we start to notice that unless you adopt a full sync engine tool, say like Yjs or Loro + Loro-Mirror, the problem becomes very big already.</p>\n<p>[hole] - example of components</p>\n<p>But things don't stop there. All we've categorized so far is very basic, like features for any authorable environment. These are table stakes basics. Maybe some authorable environments don't need validation pieces, but let's continue because now we have to talk about the things that are expensive at Phosphor. We go from what we just described to having a number of additional features like comparisons, so you are comparing a single value in that input to another value, and where does that other value come from? For us, it comes from a version control state. We maintain a version-controlled graph of all the changes and groups of changes with proposals and where every change came from, and we present information about every value's origin in the UI. Right here, you start to wonder, \"Okay, well, if I'm going to present all this information in the UI, how am I going to manage that complexity? I have undo/redo, I didn't even mention key bindings yet, which is another thing you need to consider. Then we're talking about diff views that we're seeing like before and afters, and that has its own set of layers that we don't have to get into, but it's a lot. I'm not even sure I could continue. We could talk about keyboard maps and customizable key bindings, and we can talk about selection state, where you have multiple things that are selected, and then you have copy/paste. You have that, the yada yada, a lot that ends up going into this, and that's how we found ourselves here.</p>\n<p>And here forward, I'm thinking to myself, \"Well, I know how we scaled the complexity at Story.ai, and that was through this ECS pattern. How will that adapt to my favorite approach to UI state management today, which is the view model pattern?\" I started thinking about that because I practically maintained our company's ECS crate that we were specifically using and we had a lot of opinions about how to build up that crate and make it have better errors and make it more usable and so forth. I thought, \"Okay, well, maybe we could adapt a lot of that idea into a library that we can use here at Phosphor,\" and that is where I started with <code>WorldState</code>. <code>WorldState</code> is a set of tools that allows you to build up a UI state without any reliance on React and with this sort of decoupled approach that I liked from structuring things as view models and vs. views and things that I like from ECS. Right now, our <code>WorldState</code> is backed by Jotai Atoms, which is just a reactive container of some kind and reactive values, right? Signals and so forth. We're considering adapting <code>WorldState</code> to use Livestore as our reactivity graph next.</p>\n<h2 id=\"s2-ecs-solution-translated-to-ui\">[S2] ECS solution translated to UI <div data-loc=\"content/der-draft.md:29\" class=\"heading-src\">⋅</div></h2>\n<p>So I was thinking to myself, \"What are the characteristics going to be like? Because unlike Rust, we have these reactive containers and we don't have the frame-by-frame computation thing that most games have. We just have components that contain atoms, and when we want to create the equivalent of a system, we are going to create a plugin. A plugin will base on the fact that if there's an entity created with these components, then I can provide these components and there's never a need to add or remove components from it. You just simply have this sort of plugin architecture.\"</p>\n<blockquote>\n<p>Game developers faced this exact problem a decade ago and found an elegant solution: entities, components, and systems. The pattern translates directly to UI engineering.</p>\n</blockquote>\n<p>[hole](\"Example of a plugin\")</p>\n<aside alt=\"Here's the gist\">\n<p><strong>Entities</strong> are things in your UI world—a text input, a button, a data table. Not React components, but conceptual objects that can have multiple aspects.</p>\n<p><strong>Components</strong> are pure data attached to entities. A Position component stores coordinates. A Label component holds display text. A Selection component tracks what's highlighted. Crucially, components contain no behavior—they're just structured data.</p>\n<p><strong>Plugins</strong> provide behavior that reacts to component combinations. A ValidationPlugin watches entities with Value and ValidationRules components. A CursorPlugin manages entities that have both Position and Presence components. A FocusPlugin handles entities with Selection and Keyboard components.</p>\n</aside>\n<p>The key insight: add features by adding plugins and components, not by editing old code. Your existing validation logic never changes when you add collaborative cursors. Your undo system remains untouched when you introduce AI suggestions.</p>\n<p><code>WorldState</code> isn't a game engine—it's an ECS-inspired approach for expressing UI concerns as composable data and behavior.</p>\n<h2 id=\"s3-interactive-proof-scrolly-feature-accumulation\">[S3] Interactive proof: Scrolly feature accumulation <div data-loc=\"content/der-draft.md:51\" class=\"heading-src\">⋅</div></h2>\n<p>[Interactive scrollytelling demo showing rectangle gaining features step by step]</p>\n<p>Watch a simple rectangle evolve: Base → validation → undo → diffs → presence → focus → commands → AI → inline visualization.</p>\n<p>Each step demonstrates additive architecture. The validation plugin doesn't know about undo. The undo plugin doesn't know about presence. The presence plugin doesn't know about AI suggestions. Yet they all compose cleanly because they operate on shared entity state through well-defined component interfaces.</p>\n<p>Toggle the layer chips at the bottom to see how features compose. Turn validation off and on—notice how it doesn't break undo or cursors. Enable all layers simultaneously—no conflicts, no special coordination code needed.</p>\n<p>Reality check: if your app is a simple contact form, you don't need this. But if your rectangles feel like living systems with multiple interacting concerns, this architecture prevents the coupling nightmare.</p>\n<h2 id=\"s4-interactive-proof-keyboard-focus-composition\">[S4] Interactive proof: Keyboard/focus composition <div data-loc=\"content/der-draft.md:63\" class=\"heading-src\">⋅</div></h2>\n<p>[Working demo: grid navigation with context-sensitive actions palette]</p>\n<p>This demo shows three complex UI concerns working in harmony: selection, focus, and context-sensitive commands.</p>\n<p>Selection (what's highlighted) and focus (where keyboard input goes) are different concepts that can diverge then sync. In this grid, you can select multiple cells with Shift+click while focus remains on a single cell for typing. The selection and focus plugins coordinate through shared component state, not direct coupling.</p>\n<p>Navigate with arrow keys—the focus moves, and the actions palette updates to show contextually relevant commands. Hit Spacebar to select the focused cell. Use Shift+arrows to extend selection. Each behavior is handled by a separate plugin responding to component state changes.</p>\n<p>The power emerges from composition: KeyboardPlugin + SelectionPlugin + ActionsPlugin working together without knowing about each other's implementation details.</p>\n<h2 id=\"s5-when-to-use-vs-avoid\">[S5] When to use vs avoid <div data-loc=\"content/der-draft.md:75\" class=\"heading-src\">⋅</div></h2>\n<p>This architecture shines for certain types of applications and can be overkill for others.</p>\n<p><strong>Great fit if you're building:</strong></p>\n<ul>\n<li>Collaborative editors where multiple people edit the same document simultaneously</li>\n<li>Dashboards with cross-panel effects where selecting data in one chart filters others</li>\n<li>Complex modeling tools with multiple overlapping interaction modes</li>\n<li>Professional workflows requiring deep keyboard navigation and shortcuts</li>\n</ul>\n<p><strong>Probably overkill if:</strong></p>\n<ul>\n<li>You're building a basic CRUD application with standard forms</li>\n<li>Your UI is mostly static content with minimal interactivity</li>\n<li>You have a small team and simple requirements</li>\n</ul>\n<p><strong>Design engineers welcome</strong>: The more interaction layers your application has, the more this pattern will help. If you find yourself building \"features that affect other features,\" you're in the sweet spot.</p>\n<p>The architecture pays for its complexity by preventing coupling debt. Early investment in entity-component structure pays dividends when you need to add the fifth, sixth, and seventh layers of interaction.</p>\n<h2 id=\"s6-community-engagement-conclusion\">[S6] Community engagement conclusion <div data-loc=\"content/der-draft.md:96\" class=\"heading-src\">⋅</div></h2>\n<p>Your rectangle doesn't have to be a hydra.</p>\n<p>We're collecting UI engineering war stories and solutions like this one. What's your rectangle horror story? What tools have you discovered that tame coupling nightmares in complex interfaces?</p>\n<p>Share your dev tooling discoveries with us—we'll feature the best ones and build a knowledge base of battle-tested patterns for UI engineers.</p>\n<p>Send us a DM, or check out our careers page if you're the kind of engineer who sees these patterns and wants to build tools that make them easier to implement.</p>\n<p>The future of UI engineering is compositional. Let's build it together.</p>\n",
      "permalink": "/der-draft/",
      "slug": "der-draft",
      "ancestors": [
        "_index.md"
      ],
      "title": "Design Engineering Rectangles",
      "description": null,
      "updated": null,
      "date": "2025-10-15",
      "year": 2025,
      "month": 10,
      "day": 15,
      "taxonomies": {},
      "authors": [],
      "extra": {},
      "path": "/der-draft/",
      "components": [
        "der-draft"
      ],
      "summary": null,
      "toc": [
        {
          "level": 1,
          "id": "design-engineering-rectangles",
          "permalink": "/der-draft/#design-engineering-rectangles",
          "title": "Design Engineering Rectangles ⋅",
          "children": [
            {
              "level": 2,
              "id": "s1-hook-rectangle-hydra-problem",
              "permalink": "/der-draft/#s1-hook-rectangle-hydra-problem",
              "title": "[S1] Hook: Rectangle hydra problem ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "s2-ecs-solution-translated-to-ui",
              "permalink": "/der-draft/#s2-ecs-solution-translated-to-ui",
              "title": "[S2] ECS solution translated to UI ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "s3-interactive-proof-scrolly-feature-accumulation",
              "permalink": "/der-draft/#s3-interactive-proof-scrolly-feature-accumulation",
              "title": "[S3] Interactive proof: Scrolly feature accumulation ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "s4-interactive-proof-keyboard-focus-composition",
              "permalink": "/der-draft/#s4-interactive-proof-keyboard-focus-composition",
              "title": "[S4] Interactive proof: Keyboard/focus composition ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "s5-when-to-use-vs-avoid",
              "permalink": "/der-draft/#s5-when-to-use-vs-avoid",
              "title": "[S5] When to use vs avoid ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "s6-community-engagement-conclusion",
              "permalink": "/der-draft/#s6-community-engagement-conclusion",
              "title": "[S6] Community engagement conclusion ⋅",
              "children": []
            }
          ]
        }
      ],
      "word_count": 1975,
      "reading_time": 10,
      "assets": [],
      "draft": true,
      "lang": "en",
      "lower": null,
      "higher": null,
      "translations": [],
      "backlinks": []
    },
    "translations": [],
    "backlinks": []
  },
  "zola_version": "0.21.0"
}