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
  };
}

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>;
};

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

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

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

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

const createID = (name: string) => `${name}_${nanoid(12)}`; 
export function createTodoListScope(store: Store<typeof schema>): 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: () => {
        emitFunctionCall("todo-toggleCompleted", { args: [] });
        store.commit(store.query(completed$) ? events.todoUncompleted({ id }) : events.todoCompleted({ id }));
      },
      remove: () => {
        emitFunctionCall("todo-remove", { args: [] });
        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: "incompleteDisplayText",
  });
  const incompleteDisplayText$ = computed(
    (get) => `${get(incompleteCount_$)} ${pluralize(get(incompleteCount_$), "item", "items")} left`,
  );


  return {
    header: {
      newTodoText$,
      updateNewTodoText: (text: string) => {
        emitFunctionCall("todo-updateNewTodoText", { args: [text] });
        store.commit(events.uiStateSet({ newTodoText: text }));
      },
      addTodo: () => {
        emitFunctionCall("todo-addTodo", { args: [] });
        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: {
      incompleteDisplayText$,
      currentFilter$,
      showAll: () => {
        emitFunctionCall("todo-showAll", { args: [] });
        store.commit(events.uiStateSet({ filter: "all" }));
      },
      showActive: () => {
        emitFunctionCall("todo-showActive", { args: [] });
        store.commit(events.uiStateSet({ filter: "active" }));
      },
      showCompleted: () => {
        emitFunctionCall("todo-showCompleted", { args: [] });
        store.commit(events.uiStateSet({ filter: "completed" }));
      },
      clearCompleted: () => {
        emitFunctionCall("todo-clearCompleted", { args: [] });
        store.commit(events.todoClearedCompleted({ deletedAt: new Date() }));
      },
    },
    reset: () => store.commit(events.stateReset({}), events.uiStateSet({ newTodoText: "", filter: "all" })),
  };
}