Strip down to only the USED common- v1 components (commontoolsinc#2091)

* Strip down to only the USED `common-` v1 components

Preparation before migrating these to v2

* Format

* Fix type errors

* Restore `common-charm`

* Format + lint

* Restore `common-code-editor` that supports errors still

Author: bfollington

docs/common/COMPONENTS.md

@@ -207,22 +207,22 @@ HTML elements (`div`, `span`, `button`, etc.) use JavaScript object syntax for s
 
 ## Custom Elements: String Syntax
 
-CommonTools custom elements (`common-hstack`, `common-vstack`, `ct-card`, etc.) use CSS string syntax:
+CommonTools custom elements (`ct-hstack`, `ct-vstack`, `ct-card`, etc.) use CSS string syntax:
 
 ```tsx
 // ✅ CORRECT - String syntax for custom elements
-<common-hstack gap="sm" style="align-items: center; padding: 1rem;">
-  <common-vstack gap="md" style="flex: 1; max-width: 600px;">
+<ct-hstack gap="1" style="align-items: center; padding: 1rem;">
+  <ct-vstack gap="2" style="flex: 1; max-width: 600px;">
     <ct-card style="border: 1px solid #ccc; padding: 0.5rem;">
       Content here
     </ct-card>
-  </common-vstack>
-</common-hstack>
+  </ct-vstack>
+</ct-hstack>
 
 // ❌ WRONG - Object syntax causes errors on custom elements
-<common-hstack style={{ alignItems: "center" }}>
+<ct-hstack style={{ alignItems: "center" }}>
   {/* Error: Custom elements expect string styles */}
-</common-hstack>
+</ct-hstack>
 ```
 
 **Properties use kebab-case**: `background-color`, `font-size`, `margin-bottom`
@@ -239,12 +239,12 @@ CommonTools custom elements (`common-hstack`, `common-vstack`, `ct-card`, etc.)
 ```tsx
 // You'll often mix both types in one recipe
 <div style={{ display: "flex", gap: "1rem" }}>
-  <common-vstack gap="md" style="flex: 1; padding: 1rem;">
+  <ct-vstack gap="2" style="flex: 1; padding: 1rem;">
     <span style={{ color: "#333", fontSize: "14px" }}>
       Label Text
     </span>
     <ct-button>Click Me</ct-button>
-  </common-vstack>
+  </ct-vstack>
 </div>
 ```
 
@@ -264,10 +264,10 @@ CommonTools custom elements (`common-hstack`, `common-vstack`, `ct-card`, etc.)
 
 ```tsx
 // ❌ Problem: Using object on custom element
-<common-hstack style={{ padding: "1rem" }}>
+<ct-hstack style={{ padding: "1rem" }}>
 
 // ✅ Solution: Use string syntax
-<common-hstack style="padding: 1rem;">
+<ct-hstack style="padding: 1rem;">
 ```
 
 ## ct-input

docs/common/PATTERNS.md

@@ -581,14 +581,14 @@ These are the most frequent mistakes developers make when building patterns:
 </div>
 
 // ❌ WRONG - Object style on custom element
-<common-hstack style={{ flex: 1 }}>
+<ct-hstack style={{ flex: 1 }}>
   {/* Error */}
-</common-hstack>
+</ct-hstack>
 
 // ✅ CORRECT - String style on custom element
-<common-hstack style="flex: 1;">
+<ct-hstack style="flex: 1;">
   {/* Works! */}
-</common-hstack>
+</ct-hstack>
 ```
 
 **Rule:** HTML elements use object styles, custom elements use string styles. See "Styling: String vs Object Syntax" in `COMPONENTS.md` for details.
@@ -875,7 +875,7 @@ Remember: HTML elements use object syntax, custom elements use string syntax.
 <span style={{ color: "red", fontWeight: "bold" }} />
 
 // ✅ Custom elements - String syntax
-<common-hstack style="flex: 1; padding: 1rem;" />
+<ct-hstack style="flex: 1; padding: 1rem;" />
 <ct-card style="border: 1px solid #ccc;" />
 
 // ❌ Common mistake

docs/common/RECIPES.md

@@ -269,31 +269,6 @@ actually creates mini-recipes for each item in the array, constructing a
 reactive graph. Each mapped item becomes a reactive node that updates when the
 source data changes.
 
-In the todo-list example, this pattern is used to create draggable todo items,
-where each item has its own encapsulated recipe:
-
-```typescript
-{items.map((item: TodoItem) => (
-  <common-draggable
-    $entity={item}
-    spell={JSON.stringify(
-      recipe(TodoItemSchema, {}, (item) => ({
-        [UI]: (
-          <common-todo
-            checked={item.done}
-            value={item.title}
-            ontodo-checked={updateItem({ item })}
-            ontodo-input={updateItem({ item })}
-          />
-        ),
-      })),
-    )}
-  >
-    <!-- Component content -->
-  </common-draggable>
-))}
-```
-
 This approach allows for efficient updates and encapsulation of item-specific
 logic.
 

packages/html/src/jsx.d.ts

@@ -3034,7 +3034,7 @@ interface CTSendMessageAttributes<T> extends CTHTMLAttributes<T> {
   "value"?: any;
   "placeholder"?: string;
   "appearance"?: "rounded";
-  "onmessagesend"?: EventHandler<{ message: string }>;
+  "onct-send"?: EventHandler<{ message: string }>;
   "inline"?: Booleanish;
 }
 
@@ -3864,14 +3864,6 @@ declare global {
         CTUpdaterAttributes<CTUpdaterElement>,
         CTUpdaterElement
       >;
-      "common-input": CTDOM.DetailedHTMLProps<
-        CTInputLegacyAttributes<CTInputLegacyElement>,
-        CTInputLegacyElement
-      >;
-      "common-send-message": CTDOM.DetailedHTMLProps<
-        CTSendMessageAttributes<CTSendMessageElement>,
-        CTSendMessageElement
-      >;
       "common-google-oauth": CTDOM.DetailedHTMLProps<
         CTGoogleOAuthAttributes<CTGoogleOAuthElement>,
         CTGoogleOAuthElement
@@ -3909,14 +3901,6 @@ declare global {
         CTStackAttributes<CTVStackElement>,
         CTVStackElement
       >;
-      "common-hstack": CTDOM.DetailedHTMLProps<
-        CTStackLegacyAttributes<CTHStackElement>,
-        CTHStackElement
-      >;
-      "common-vstack": CTDOM.DetailedHTMLProps<
-        CTStackLegacyAttributes<CTVStackElement>,
-        CTVStackElement
-      >;
     }
   }
 }

packages/patterns/array-in-cell-ast-nocomponents.tsx

@@ -39,11 +39,11 @@ export default recipe<InputSchema>(({ title, items }) => {
             items.map((item) => <li>{item.text}</li>)
           }
         </ul>
-        <common-send-message
+        <ct-message-input
           name="Send"
           placeholder="Type a message..."
           appearance="rounded"
-          onmessagesend={addItem({ items })}
+          onct-send={addItem({ items })}
         />
       </div>
     ),

packages/patterns/array-in-cell-with-remove-ast-nocomponents.tsx

@@ -57,11 +57,11 @@ export default recipe<InputSchema>(
               </li>
             ))}
           </ul>
-          <common-send-message
+          <ct-message-input
             name="Send"
             placeholder="Type a message..."
             appearance="rounded"
-            onmessagesend={addItem({ items })}
+            onct-send={addItem({ items })}
           />
         </div>
       ),

packages/patterns/array-in-cell-with-remove-editable.tsx

@@ -82,11 +82,11 @@ export default recipe<InputSchema>(
             ))}
           </div>
           <div style={{ marginTop: "1rem" }}>
-            <common-send-message
+            <ct-message-input
               name="Send"
               placeholder="Type a message..."
               appearance="rounded"
-              onmessagesend={addItem({ items })}
+              onct-send={addItem({ items })}
             />
           </div>
         </div>

packages/patterns/ct-checkbox-cell.tsx

@@ -27,7 +27,7 @@ export default recipe<CheckboxDemoInput, CheckboxDemoOutput>(
     return {
       [NAME]: "Checkbox Demo",
       [UI]: (
-        <common-vstack gap="md" style="padding: 2rem; max-width: 600px;">
+        <ct-vstack gap="2" style="padding: 2rem; max-width: 600px;">
           <h3>ct-checkbox Bidirectional Binding Demo</h3>
 
           <ct-card>
@@ -78,7 +78,7 @@ export default recipe<CheckboxDemoInput, CheckboxDemoOutput>(
               beyond just updating the value.
             </p>
           </ct-card>
-        </common-vstack>
+        </ct-vstack>
       ),
       simpleEnabled,
       trackedEnabled,

packages/patterns/ct-checkbox-handler.tsx

@@ -13,7 +13,7 @@ export default recipe<CheckboxSimpleInput, CheckboxSimpleOutput>(
     return {
       [NAME]: "Checkbox Demo",
       [UI]: (
-        <common-vstack gap="md" style="padding: 2rem; max-width: 400px;">
+        <ct-vstack gap="2" style="padding: 2rem; max-width: 400px;">
           <h3>Simple ct-checkbox + ifElse Demo</h3>
 
           <ct-checkbox $checked={enabled}>
@@ -29,7 +29,7 @@ export default recipe<CheckboxSimpleInput, CheckboxSimpleOutput>(
           <p data-testid="status">
             Status: {ifElse(enabled, "ON", "OFF")}
           </p>
-        </common-vstack>
+        </ct-vstack>
       ),
       enabled,
     };

packages/patterns/ct-list.tsx

@@ -18,7 +18,7 @@ export default recipe<ListInput, ListOutput>(
     return {
       [NAME]: title,
       [UI]: (
-        <common-vstack gap="md" style="padding: 1rem; max-width: 600px;">
+        <ct-vstack gap="2" style="padding: 1rem; max-width: 600px;">
           <ct-input
             $value={title}
             placeholder="List title"
@@ -34,7 +34,7 @@ export default recipe<ListInput, ListOutput>(
               title="Items"
             />
           </ct-card>
-        </common-vstack>
+        </ct-vstack>
       ),
       title,
       items,