Add ct-copy-button component (commontoolsinc#2081)

* Fix: Use derive instead of lift for reactive mentionable tracking

Issue: backlinks-index used lift() which computes once at initialization.
When allCharms was empty initially, mentionable stayed empty even after
charms were added.

Fix: Use derive(allCharms, ...) which reactively tracks when allCharms
changes and recomputes mentionable automatically.

This fixes the bug where [[ dropdown is empty until page refresh.

Fixes timing issue reported by Berni where fresh spaces need refresh for
mentions to work.

* Add ct-copy-button component

Implements a reusable copy-to-clipboard button component that:
- Composes ct-button internally for consistent styling
- Accepts text via the `text` attribute (supports Cell bindings)
- Provides automatic visual feedback (icon swap for 2 seconds)
- Fires ct-copy-success and ct-copy-error events
- Follows security model: patterns provide text, component handles DOM API

Component supports:
- All ct-button variants (primary, secondary, ghost, etc.)
- All ct-button sizes (sm, md, lg, icon, default)
- Icon-only mode for compact UIs
- Configurable feedback duration
- Full TypeScript type definitions

Usage:
```tsx
<ct-copy-button
  text={ingredientListText}
  variant="secondary"
  size="sm"
  icon-only
/>
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <[email protected]>
Co-Authored-By: Happy <[email protected]>

* Fix ct-copy-button to properly handle Cell<string> bindings

The component now checks if text is a Cell and unwraps it using .get()
to avoid copying '[object Object]' when Cell bindings are passed.

- Import isCell and Cell type from @commontools/runner
- Add _getTextValue() helper to unwrap Cell values
- Update type declaration to accept string | Cell<string>
- Use _getTextValue() in _handleClick to get actual text value

Fixes cubic-dev-ai review comment on PR commontoolsinc#2081

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <[email protected]>
Co-Authored-By: Happy <[email protected]>

* Action PR feedback

* Use `ct-copy-button` in `ct-chat-message`

* Lint + format

* Fix copy-button aspect ratio

* Remove reference to cell

* Format

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: Happy <[email protected]>
Co-authored-by: Ben Follington <[email protected]>

Author: 4 people

packages/html/src/jsx.d.ts

@@ -2875,6 +2875,7 @@ interface CTCodeEditorLegacyElement extends CTHTMLElement {}
 interface CTScreenElement extends CTHTMLElement {}
 interface CTAutoLayoutElement extends CTHTMLElement {}
 interface CTButtonElement extends CTHTMLElement {}
+interface CTCopyButtonElement extends CTHTMLElement {}
 interface CTIFrameElement extends CTHTMLElement {}
 interface CTHStackElement extends CTHTMLElement {}
 interface CTFabElement extends CTHTMLElement {}
@@ -3075,6 +3076,22 @@ interface CTButtonAttributes<T> extends CTHTMLAttributes<T> {
   "type"?: "button" | "submit" | "reset";
 }
 
+interface CTCopyButtonAttributes<T> extends CTHTMLAttributes<T> {
+  "text": string;
+  "variant"?:
+    | "primary"
+    | "secondary"
+    | "destructive"
+    | "outline"
+    | "ghost"
+    | "link"
+    | "pill";
+  "size"?: "default" | "sm" | "lg" | "icon" | "md";
+  "disabled"?: boolean;
+  "feedback-duration"?: number;
+  "icon-only"?: boolean;
+}
+
 interface CTIframeAttributes<T> extends CTHTMLAttributes<T> {
   "src": string;
   "$context": CellLike<any>;
@@ -3759,6 +3776,10 @@ declare global {
         CTButtonAttributes<CTButtonElement>,
         CTButtonElement
       >;
+      "ct-copy-button": CTDOM.DetailedHTMLProps<
+        CTCopyButtonAttributes<CTCopyButtonElement>,
+        CTCopyButtonElement
+      >;
       "common-iframe": CTDOM.DetailedHTMLProps<
         CTIframeAttributes<CTIFrameElement>,
         CTIFrameElement

packages/patterns/backlinks-index.tsx

@@ -1,5 +1,5 @@
 /// <cts-enable />
-import { Cell, lift, NAME, OpaqueRef, recipe, UI } from "commontools";
+import { Cell, derive, lift, NAME, OpaqueRef, recipe, UI } from "commontools";
 
 export type MentionableCharm = {
   [NAME]?: string;
@@ -63,13 +63,9 @@ const BacklinksIndex = recipe<Input, Output>(
       allCharms: allCharms as unknown as OpaqueRef<WriteableBacklinks[]>,
     });
 
-    // Compute mentionable list from allCharms via lift, then mirror that into
-    // a real Cell for downstream consumers that expect a Cell.
-    const computeMentionable = lift<
-      { allCharms: any[] },
-      MentionableCharm[]
-    >(({ allCharms }) => {
-      const cs = allCharms ?? [];
+    // Compute mentionable list from allCharms reactively
+    const mentionable = derive(allCharms, (charmList) => {
+      const cs = charmList ?? [];
       const out: MentionableCharm[] = [];
       for (const c of cs) {
         out.push(c);
@@ -90,7 +86,7 @@ const BacklinksIndex = recipe<Input, Output>(
     return {
       [NAME]: "BacklinksIndex",
       [UI]: undefined,
-      mentionable: computeMentionable({ allCharms }),
+      mentionable,
     };
   },
 );

packages/ui/src/v2/components/ct-chat-message/ct-chat-message.ts

@@ -6,6 +6,7 @@ import { marked } from "marked";
 import { BaseElement } from "../../core/base-element.ts";
 import "../ct-tool-call/ct-tool-call.ts";
 import "../ct-button/ct-button.ts";
+import "../ct-copy-button/ct-copy-button.ts";
 import type {
   BuiltInLLMContent,
   BuiltInLLMTextPart,
@@ -373,11 +374,6 @@ export class CTChatMessage extends BaseElement {
   @property({ attribute: false })
   declare theme?: CTTheme;
 
-  @property({ type: Boolean })
-  private _copied = false;
-
-  private _codeBlockCopiedStates = new Map<string, boolean>();
-
   constructor() {
     super();
     this.role = "user";
@@ -407,22 +403,18 @@ export class CTChatMessage extends BaseElement {
     return html.replace(
       /<pre><code([^>]*)>([\s\S]*?)<\/code><\/pre>/g,
       (_match, codeAttrs, codeContent) => {
-        const blockId = `code-${Math.random().toString(36).substr(2, 9)}`;
         // Decode HTML entities for the copy content
         const decodedContent = this._decodeHtmlEntities(codeContent);
 
         return `<div class="code-block-container">
           <pre><code${codeAttrs}>${codeContent}</code></pre>
-          <ct-button
+          <ct-copy-button
             class="code-copy-button"
+            text="${this._escapeForAttribute(decodedContent)}"
             variant="ghost"
             size="sm"
-            data-block-id="${blockId}"
-            data-copy-content="${this._escapeForAttribute(decodedContent)}"
-            title="Copy code"
-          >
-            📋
-          </ct-button>
+            icon-only
+          ></ct-copy-button>
         </div>`;
       },
     );
@@ -443,61 +435,6 @@ export class CTChatMessage extends BaseElement {
       .replace(/>/g, "&gt;");
   }
 
-  private async _copyMessage() {
-    const textContent = this._extractTextContent();
-    if (!textContent) return;
-
-    try {
-      await navigator.clipboard.writeText(textContent);
-      this._copied = true;
-
-      // Reset copied state after 2 seconds
-      setTimeout(() => {
-        this._copied = false;
-        this.requestUpdate();
-      }, 2000);
-
-      this.requestUpdate();
-    } catch (err) {
-      console.error("Failed to copy message:", err);
-    }
-  }
-
-  private async _copyCodeBlock(blockId: string, content: string) {
-    try {
-      // Decode the content from the attribute
-      const decodedContent = content
-        .replace(/&amp;/g, "&")
-        .replace(/&quot;/g, '"')
-        .replace(/&#39;/g, "'")
-        .replace(/&lt;/g, "<")
-        .replace(/&gt;/g, ">");
-
-      await navigator.clipboard.writeText(decodedContent);
-      this._codeBlockCopiedStates.set(blockId, true);
-
-      // Update the button to show copied state
-      const button = this.shadowRoot?.querySelector(
-        `[data-block-id="${blockId}"]`,
-      ) as HTMLElement;
-      if (button) {
-        button.textContent = "✓";
-        button.title = "Copied!";
-      }
-
-      // Reset copied state after 2 seconds
-      setTimeout(() => {
-        this._codeBlockCopiedStates.set(blockId, false);
-        if (button) {
-          button.textContent = "📋";
-          button.title = "Copy code";
-        }
-      }, 2000);
-    } catch (err) {
-      console.error("Failed to copy code block:", err);
-    }
-  }
-
   private _renderToolAttachments() {
     // Extract tool calls and results from content array
     const contentArray = Array.isArray(this.content) ? this.content : [];
@@ -579,14 +516,12 @@ export class CTChatMessage extends BaseElement {
       <div class="message-actions">
         ${this.role === "assistant"
           ? html`
-            <ct-button
+            <ct-copy-button
+              text="${textContent}"
               variant="ghost"
               size="sm"
-              @click="${this._copyMessage}"
-              title="${this._copied ? "Copied!" : "Copy message"}"
-            >
-              ${this._copied ? "✓" : "📋"}
-            </ct-button>
+              icon-only
+            ></ct-copy-button>
           `
           : null}
       </div>
@@ -610,34 +545,13 @@ export class CTChatMessage extends BaseElement {
     if (changedProperties.has("theme") && this.theme) {
       this._updateThemeProperties();
     }
-
-    // Add event listeners to code copy buttons after render
-    if (changedProperties.has("content")) {
-      this._setupCodeCopyButtons();
-    }
   }
 
   private _updateThemeProperties() {
     if (!this.theme) return;
     applyThemeToElement(this, this.theme);
   }
 
-  private _setupCodeCopyButtons() {
-    const copyButtons = this.shadowRoot?.querySelectorAll(".code-copy-button");
-    copyButtons?.forEach((button) => {
-      button.addEventListener("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const target = e.target as HTMLElement;
-        const blockId = target.getAttribute("data-block-id");
-        const content = target.getAttribute("data-copy-content");
-        if (blockId && content) {
-          this._copyCodeBlock(blockId, content);
-        }
-      });
-    });
-  }
-
   override render() {
     const messageClass = `message message-${this.role}${
       this.streaming ? " streaming" : ""

packages/ui/src/v2/components/ct-copy-button/ct-copy-button.test.ts

@@ -0,0 +1,31 @@
+/**
+ * Tests for CTCopyButton component
+ */
+import { expect } from "@std/expect";
+import { describe, it } from "@std/testing/bdd";
+import { CTCopyButton } from "./ct-copy-button.ts";
+
+describe("CTCopyButton", () => {
+  it("should be defined", () => {
+    expect(CTCopyButton).toBeDefined();
+  });
+
+  it("should have customElement definition", () => {
+    expect(customElements.get("ct-copy-button")).toBe(CTCopyButton);
+  });
+
+  it("should create element instance", () => {
+    const element = new CTCopyButton();
+    expect(element).toBeInstanceOf(CTCopyButton);
+  });
+
+  it("should have default properties", () => {
+    const element = new CTCopyButton();
+    expect(element.text).toBe("");
+    expect(element.variant).toBe("secondary");
+    expect(element.size).toBe("default");
+    expect(element.disabled).toBe(false);
+    expect(element.feedbackDuration).toBe(2000);
+    expect(element.iconOnly).toBe(false);
+  });
+});