Let the Checkbox extension own its text-card adornment

The second contribution point from ADR 008: a text-card adornment draws
content before the card's text and may name a text state the card
styles. The Checkbox extension now owns its tick box, its styles and its
"done" text state; the Text Card only hosts registered adornments (none
on mind-map nodes). The card view carries the installed extensions
instead of a checked flag, and the toggle goes through the shared
ExtensionCommands port, which moves to its own module now that two
contribution points use it.

Computed styles of the cards are unchanged unchecked, hovered and
checked.

Author: MerkDesigns

docs/REFACTOR-STATE.md

@@ -53,9 +53,11 @@
    the definitions are registered in `src/extensions/architectureRegistry.ts`. Header controls are
    migrated: Lock, Privacy, Extra colors, Counter and Copy/Paste JSON own their header control in
    their module (`headerControlRegistry.ts`), the container and text-block headers host them through
-   `useElementHeaderExtensions`, and commands go through one `ExtensionCommands` port. Next: the
-   text-card checkbox as an element adornment, extension menu items, then behavior (lock, search,
-   privacy, auto checkboxes, inherit card color, JSON copy/paste) out of `App.tsx`.
+   `useElementHeaderExtensions`, and commands go through one `ExtensionCommands` port. The
+   Checkbox is a text-card adornment (`cardAdornmentRegistry.ts`): it draws its tick box and marks
+   the card's text state; the Text Card only hosts adornments. Next: extension menu items, then
+   behavior (lock, search, privacy, auto checkboxes, inherit card color, JSON copy/paste) out of
+   `App.tsx`.
    Phase 5 leftovers, not blocking: Text Card editing state (draft, editing id) is still in
    `App.tsx`; element registration in `src/elements/registry.ts` waits until rendering dispatches
    through the registry; loose text cards and mind-map nodes still position with left/top rather

docs/decisions/008-extension-ui-contributions.md

@@ -32,9 +32,11 @@ An extension owns its UI and reaches the application through a command port. Ele
   closing.
 - Commands go through one `ExtensionCommands` port supplied by the application (today `App.tsx`
   over the retained callbacks). Elements forward the port without inspecting it.
-- Further contribution points (element adornments such as the text-card checkbox, menu items,
-  and behavioral effects such as lock, search filtering and privacy) follow the same pattern as
-  their extensions migrate.
+- The second point is the **text-card adornment** (`cardAdornment.ts`,
+  `cardAdornmentRegistry.ts`): content drawn before the card's text, plus a named text state
+  (`done`) that the card styles. Mind-map nodes, which share the Text Card renderer, take none.
+- Further contribution points (menu items, and behavioral effects such as lock, search filtering
+  and privacy) follow the same pattern as their extensions migrate.
 
 ## Consequences
 

src/App.tsx

@@ -20,7 +20,7 @@ import { IconRotateClockwise } from "@tabler/icons-react";
 import { CanvasContextMenu, ContainerContentContextMenu } from "./components/ContextMenus";
 import { ContainerRenderer } from "./elements/container/ContainerRenderer";
 import type { ContainerActions } from "./elements/container/containerView";
-import type { ExtensionCommands } from "./extensions/headerControl";
+import type { ExtensionCommands } from "./extensions/extensionCommands";
 import { ContainerMenu, type ContainerMenuActions } from "./elements/container/ContainerMenu";
 import { asContainerDocumentElement } from "./elements/container/containerViewProjection";
 import { ContainerJsonEditorWindow } from "./components/ContainerJsonEditorWindow";
@@ -308,12 +308,6 @@ const createAppMetadata = (data: AppData): AppData => ({
 
 type CallbackMap = Record<string, (...args: never[]) => unknown>;
 
-/** Null when no checkbox extension is installed on the card. */
-const textCardChecked = (card: TextCardElement) => {
-  const checkbox = card.extensions?.checkbox;
-  return checkbox ? Boolean(checkbox.checked) : null;
-};
-
 const useStableCallbacks = <T extends CallbackMap>(callbacks: T): T => {
   const callbacksRef = useRef<T | null>(callbacks);
   const stableCallbacksRef = useRef<T | null>(null);
@@ -6436,7 +6430,6 @@ function App({
       onCancel: canvasNodeActions.cancelTextCardEdit,
       onStartMove: canvasNodeActions.startTextCardMove,
       onOpenMenu: canvasNodeActions.openTextCardMenu,
-      onToggleCheckbox: canvasNodeActions.toggleTextCardCheckbox,
       onSizeChange: rememberTextCardSize,
     }),
     [canvasNodeActions, rememberTextCardSize],
@@ -6465,8 +6458,11 @@ function App({
     if (textBlock) action(textBlock);
   };
   const extensionCommands: ExtensionCommands = useStableCallbacks({
-    toggle: (extension: "lock" | "privacy", elementId: string) =>
-      extension === "lock" ? toggleLockExtension(elementId) : togglePrivacyExtension(elementId),
+    toggle: (extension: "lock" | "privacy" | "checkbox", elementId: string) => {
+      if (extension === "lock") toggleLockExtension(elementId);
+      else if (extension === "privacy") togglePrivacyExtension(elementId);
+      else toggleTextCardCheckbox(elementId);
+    },
     updateAccent: (elementId: string, accent: string) =>
       containersById.has(elementId)
         ? updateContainerAccent(elementId, accent)
@@ -7166,9 +7162,10 @@ function App({
                                   key={card.id}
                                   element={cardElement}
                                   actions={textCardActions}
+                                  extensionCommands={extensionCommands}
                                   view={{
                                     layer: card.layer ?? 0,
-                                    checked: textCardChecked(card),
+                                    extensions: card.extensions,
                                     editing: editingTextCardId === card.id,
                                     draft: editingTextCardId === card.id ? textCardDraft : "",
                                     position,
@@ -7250,9 +7247,10 @@ function App({
                             key={card.id}
                             element={cardElement}
                             actions={textCardActions}
+                            extensionCommands={extensionCommands}
                             view={{
                               layer: card.layer ?? 0,
-                              checked: textCardChecked(card),
+                              extensions: card.extensions,
                               editing: editingTextCardId === card.id,
                               draft: editingTextCardId === card.id ? textCardDraft : "",
                               position: getTextCardRenderPosition(card),
@@ -7348,9 +7346,10 @@ function App({
                       key={`drag-overlay-${id}`}
                       element={cardElement}
                       actions={textCardActions}
+                      extensionCommands={extensionCommands}
                       view={{
                         layer: card.layer ?? 0,
-                        checked: textCardChecked(card),
+                        extensions: card.extensions,
                         editing: false,
                         draft: "",
                         position,
@@ -7392,9 +7391,10 @@ function App({
                       key={`release-overlay-${card.id}`}
                       element={cardElement}
                       actions={textCardActions}
+                      extensionCommands={extensionCommands}
                       view={{
                         layer: card.layer ?? 0,
-                        checked: textCardChecked(card),
+                        extensions: card.extensions,
                         editing: false,
                         draft: "",
                         position: textCardInteractionSnapshot.release?.active ? to : from,

src/elements/container/ContainerHeader.tsx

@@ -1,7 +1,7 @@
 import { IconBox, IconDotsVertical, IconSearch, IconX } from "@tabler/icons-react";
 import { useRef } from "react";
 import type { SyntheticEvent } from "react";
-import type { ExtensionCommands } from "../../extensions/headerControl";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import type { HeaderLayoutMetrics } from "../useHeaderExtensionLayout";
 import { useElementHeaderExtensions } from "../useElementHeaderExtensions";
 import type { ContainerDocumentElement } from "./containerModel";

src/elements/container/ContainerRenderer.test.tsx

@@ -3,7 +3,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { asEntityId } from "../../domain/ids/entityIds";
 import type { ContainerDocumentElement } from "./containerModel";
 import { ContainerRenderer } from "./ContainerRenderer";
-import type { ExtensionCommands } from "../../extensions/headerControl";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import type { ContainerActions, ContainerViewState } from "./containerView";
 
 vi.stubGlobal(

src/elements/container/ContainerRenderer.tsx

@@ -1,7 +1,7 @@
 import { IconArrowDownRight } from "@tabler/icons-react";
 import { memo, useState } from "react";
 import type { ReactNode } from "react";
-import type { ExtensionCommands } from "../../extensions/headerControl";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import { placementStyle, shallowEqual } from "../elementPlacement";
 import { ContainerHeader } from "./ContainerHeader";
 import type { ContainerDocumentElement } from "./containerModel";

src/elements/text-block/TextBlockHeader.tsx

@@ -1,7 +1,7 @@
 import { IconDotsVertical, IconNotes } from "@tabler/icons-react";
 import { useRef } from "react";
 import type { SyntheticEvent } from "react";
-import type { ExtensionCommands } from "../../extensions/headerControl";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import type { HeaderLayoutMetrics } from "../useHeaderExtensionLayout";
 import { useElementHeaderExtensions } from "../useElementHeaderExtensions";
 import type { TextBlockDocumentElement } from "./textBlockModel";

src/elements/text-block/TextBlockRenderer.test.tsx

@@ -3,7 +3,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { asEntityId } from "../../domain/ids/entityIds";
 import type { TextBlockDocumentElement } from "./textBlockModel";
 import { TextBlockRenderer } from "./TextBlockRenderer";
-import type { ExtensionCommands } from "../../extensions/headerControl";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import type { TextBlockActions, TextBlockViewState } from "./textBlockView";
 
 vi.stubGlobal(

src/elements/text-block/TextBlockRenderer.tsx

@@ -1,7 +1,7 @@
 import { IconArrowDownRight } from "@tabler/icons-react";
 import { Suspense, lazy, memo, useEffect, useRef, useState } from "react";
 import type { WheelEvent } from "react";
-import type { ExtensionCommands } from "../../extensions/headerControl";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import { placementStyle, shallowEqual } from "../elementPlacement";
 import { TextBlockHeader } from "./TextBlockHeader";
 import type { TextBlockDocumentElement } from "./textBlockModel";

src/elements/text-card/TextCardRenderer.test.tsx

@@ -3,6 +3,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { asEntityId } from "../../domain/ids/entityIds";
 import type { MindMapNodeDocumentElement } from "../mind-map/mindMapModel";
 import type { TextCardDocumentElement } from "./textCardModel";
+import type { ExtensionCommands } from "../../extensions/extensionCommands";
 import {
   TextCardRenderer,
   type TextCardActions,
@@ -53,16 +54,25 @@ function createActions(): { [Key in keyof TextCardActions]: ReturnType<typeof vi
     onCancel: vi.fn(),
     onStartMove: vi.fn(),
     onOpenMenu: vi.fn(),
-    onToggleCheckbox: vi.fn(),
     onSizeChange: vi.fn(),
   };
 }
 
+const extensionCommands = {
+  toggle: vi.fn(),
+  updateAccent: vi.fn(),
+  rememberRecentColor: vi.fn(),
+  copyJsonForAi: vi.fn(async () => undefined),
+  pasteJsonFromAi: vi.fn(async () => undefined),
+  openJsonEditor: vi.fn(),
+} satisfies ExtensionCommands;
+
 function renderCard(element: TextCardRendererElement, view: Partial<TextCardViewState> = {}) {
   const actions = createActions();
+  extensionCommands.toggle.mockClear();
   const fullView: TextCardViewState = {
     layer: 0,
-    checked: null,
+    extensions: undefined,
     editing: false,
     draft: "",
     shadowsUnderElements: true,
@@ -73,6 +83,7 @@ function renderCard(element: TextCardRendererElement, view: Partial<TextCardView
       element={element}
       view={fullView}
       actions={actions as unknown as TextCardActions}
+      extensionCommands={extensionCommands}
     />,
   );
   const card = result.container.querySelector<HTMLElement>(`[data-text-card-id='${CARD_ID}']`)!;
@@ -177,15 +188,20 @@ describe("TextCardRenderer", () => {
   });
 
   it("toggles an installed checkbox without starting a move, and strikes the text through", () => {
-    const { actions, card } = renderCard(textCard(), { checked: true });
+    const { actions, card } = renderCard(textCard(), {
+      extensions: { checkbox: { checked: true } },
+    });
     const checkbox = screen.getByRole("button", { pressed: true });
 
     fireEvent.pointerDown(checkbox);
     fireEvent.click(checkbox);
 
-    expect(actions.onToggleCheckbox).toHaveBeenCalledWith(CARD_ID);
+    expect(extensionCommands.toggle).toHaveBeenCalledWith("checkbox", CARD_ID);
     expect(actions.onStartMove).not.toHaveBeenCalled();
-    expect(card.querySelector(".taskmap-text-card__text")).toHaveAttribute("data-checked", "true");
+    expect(card.querySelector(".taskmap-text-card__text")).toHaveAttribute(
+      "data-text-state",
+      "done",
+    );
   });
 
   it("shows no checkbox when none is installed", () => {
@@ -203,6 +219,7 @@ describe("TextCardRenderer", () => {
           element={nextElement}
           view={next}
           actions={actions as unknown as TextCardActions}
+          extensionCommands={extensionCommands}
         />,
       );
 
@@ -250,7 +267,7 @@ describe("TextCardRenderer mind-map variant", () => {
   });
 
   it("never renders a checkbox", () => {
-    renderCard(mindMapNode(), { checked: false });
+    renderCard(mindMapNode(), { extensions: { checkbox: { checked: false } } });
 
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
   });