chore: Typecheck remaining recipes/*. (#2005)

chore: Typecheck remaining recipes/*. Skip typechecking on underscore-prefixed recipes that still need to be updated to latest API. Update more component types.

Author: jsantell

packages/html/src/jsx.d.ts

@@ -3,18 +3,18 @@
 // deno-lint-ignore-file ban-types
 import type { Cell, CellLike, Props, RenderNode, VNode } from "commontools";
 
+/**
+ * Used to represent DOM API's where users can either pass
+ * true or false as a boolean or as its equivalent strings.
+ */
+type Booleanish = boolean | "true" | "false";
+
 // DOM-ish types for the CT runtime.
 // The DOM is not directly available within the runtime, but the JSX
 // produced must be typed. This defines DOM types like React or Preact,
 // with a subset of supported features, and cannot rely on globals
 // existing like `HTMLElement` from TypeScript's `dom` lib.
 declare namespace CTDOM {
-  /**
-   * Used to represent DOM API's where users can either pass
-   * true or false as a boolean or as its equivalent strings.
-   */
-  type Booleanish = boolean | "true" | "false";
-
   /**
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}
    */
@@ -1764,6 +1764,7 @@ declare namespace CTDOM {
   export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     // CT extensions
     "onClick"?: CellLike<HandlerEvent<unknown>>;
+    "onChange"?: CellLike<HandlerEvent<unknown>>;
     "children"?: RenderNode | undefined;
     // Allow React-isms
     "key"?: number;
@@ -1794,7 +1795,7 @@ declare namespace CTDOM {
       | "search"
       | "send"
       | undefined;
-    hidden?: boolean | undefined;
+    hidden?: Booleanish; // CT addition to be compatible with our component usage of `hidden`
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
@@ -2854,6 +2855,7 @@ interface CTHeadingElement extends CTHTMLElement {}
 interface CTCollapsibleElement extends CTHTMLElement {}
 interface CTThemeElement extends CTHTMLElement {}
 interface CTCodeEditorElement extends CTHTMLElement {}
+interface CTCodeEditorLegacyElement extends CTHTMLElement {}
 interface CTScreenElement extends CTHTMLElement {}
 interface CTAutoLayoutElement extends CTHTMLElement {}
 interface CTButtonElement extends CTHTMLElement {}
@@ -2881,6 +2883,28 @@ interface CTCTCollapsibleElement extends CTHTMLElement {}
 interface CTFragmentElement extends CTHTMLElement {}
 interface CTUpdaterElement extends CTHTMLElement {}
 interface CTGoogleOAuthElement extends CTHTMLElement {}
+interface CTCanvasElement extends CTHTMLElement {}
+interface CTDraggableElement extends CTHTMLElement {}
+interface CTPlaidLinkElement extends CTHTMLElement {}
+
+interface CTDraggableAttributes<T> extends CTHTMLAttributes<T> {
+  "key"?: number;
+  "x"?: CellLike<HandlerEvent<any>>;
+  "y"?: CellLike<HandlerEvent<any>>;
+  "hidden"?: Booleanish;
+  "onpositionchange"?: CellLike<HandlerEvent<any>>;
+}
+
+interface CTCanvasAttributes<T> extends CTHTMLAttributes<T> {
+  "width"?: string | number;
+  "height"?: string | number;
+  "onct-canvas-click"?: CellLike<HandlerEvent<any>>;
+}
+
+interface CTPlaidLinkAttributes<T> extends CTHTMLAttributes<T> {
+  "$auth"?: any;
+  "products"?: string[];
+}
 
 interface CTGoogleOAuthAttributes<T> extends CTHTMLAttributes<T> {
   "$auth"?: any;
@@ -2990,9 +3014,11 @@ interface CTMessageInputAttributes<T> extends CTHTMLAttributes<T> {
 
 interface CTSendMessageAttributes<T> extends CTHTMLAttributes<T> {
   "name"?: string;
+  "value"?: any;
   "placeholder"?: string;
   "appearance"?: "rounded";
   "onmessagesend"?: CellLike<HandlerEvent<{ message: string }>>;
+  "inline"?: Booleanish;
 }
 
 interface CTScrollAttributes<T> extends CTHTMLAttributes<T> {
@@ -3025,9 +3051,11 @@ interface CTButtonAttributes<T> extends CTHTMLAttributes<T> {
     | "secondary"
     | "ghost"
     | "link"
+    | "danger"
     | "pill";
   "size"?: "default" | "sm" | "lg" | "icon";
   "disabled"?: boolean;
+  "outline"?: boolean;
   "type"?: "button" | "submit" | "reset";
 }
 
@@ -3099,7 +3127,7 @@ interface CTInputAttributes<T> extends CTHTMLAttributes<T> {
   "validationPattern"?: string;
   "showValidation"?: boolean;
   "timingStrategy"?: string;
-  "timingDelay"?: number;
+  "timingDelay"?: number | string;
   "onct-change"?: any;
   "onct-focus"?: any;
   "onct-blur"?: any;
@@ -3122,7 +3150,7 @@ interface CTCheckboxAttributes<T> extends CTHTMLAttributes<T> {
   "indeterminate"?: boolean;
   "name"?: string;
   "value"?: string;
-  "onct-change"?: any;
+  "onct-change"?: CellLike<HandlerEvent<any>>;
 }
 
 interface CTSelectAttributes<T> extends CTHTMLAttributes<T> {
@@ -3166,11 +3194,17 @@ interface CTCollapsibleAttributes<T> extends CTHTMLAttributes<T> {
 interface CTThemeAttributes<T> extends CTHTMLAttributes<T> {
   theme?: CTThemeInput;
 }
+interface CTCodeEditorLegacyAttributes<T> extends CTHTMLAttributes<T> {
+  "source"?: string;
+  "language"?: `text/${string}`;
+  "onChange"?: any;
+  "errors"?: any[];
+}
 
 interface CTCodeEditorAttributes<T> extends CTHTMLAttributes<T> {
   "$value"?: CellLike<string>;
   "value"?: string;
-  "language"?: string;
+  "language"?: `text/${string}`;
   "disabled"?: boolean;
   "readonly"?: boolean;
   "placeholder"?: string;
@@ -3777,6 +3811,30 @@ declare global {
         CTGoogleOAuthAttributes<CTGoogleOAuthElement>,
         CTGoogleOAuthElement
       >;
+      "ct-canvas": CTDOM.DetailedHTMLProps<
+        CTCanvasAttributes<CTCanvasElement>,
+        CTCanvasElement
+      >;
+      "ct-draggable": CTDOM.DetailedHTMLProps<
+        CTDraggableAttributes<CTDraggableElement>,
+        CTDraggableElement
+      >;
+      "ct-alert": CTDOM.DetailedHTMLProps<
+        CTHTMLAttributes<CTHTMLElement>,
+        CTHTMLElement
+      >;
+      "os-container": CTDOM.DetailedHTMLProps<
+        CTHTMLAttributes<CTHTMLElement>,
+        CTHTMLElement
+      >;
+      "common-code-editor": CTDOM.DetailedHTMLProps<
+        CTCodeEditorLegacyAttributes<CTCodeEditorLegacyElement>,
+        CTCodeEditorLegacyElement
+      >;
+      "common-plaid-link": CTDOM.DetailedHTMLProps<
+        CTPlaidLinkAttributes<CTPlaidLinkElement>,
+        CTPlaidLinkElement
+      >;
       // Define both `ct-` and `common-` variants
       "ct-hstack": CTDOM.DetailedHTMLProps<
         CTStackAttributes<CTHStackElement>,

recipes/agentic.tsx renamed to recipes/_agentic.tsx

@@ -396,7 +396,7 @@ export default recipe(
       // The framework will handle empty content cases reactively
       const extractionResult = llm({
         system: systemPrompt,
-        messages: [userPrompt],
+        messages: [{ role: "user", content: userPrompt }],
         model: "google:gemini-2.5-flash",
         mode: "json",
       });

recipes/common-ui-v2-showcase.tsx renamed to recipes/_common-ui-v2-showcase.tsx

@@ -1290,16 +1290,16 @@ export default recipe(
                   })}
                 />
               </div>
-              <common-button
+              <ct-button
                 onClick={peopleUpdater({ contacts, auth, settings })}
               >
                 Fetch Contacts
-              </common-button>
-              <common-button
+              </ct-button>
+              <ct-button
                 onClick={clearContacts({ contacts })}
               >
                 Clear Contacts
-              </common-button>
+              </ct-button>
             </common-vstack>
           </common-hstack>
           <common-google-oauth

recipes/email-date-extractor.tsx renamed to recipes/_email-date-extractor.tsx

@@ -64,11 +64,11 @@ export default recipe<Input>(
           {ifElse(
             error,
             <b>fix the errors</b>,
-            <common-button
+            <ct-button
               onClick={visit({ code })}
             >
               Navigate To Charm
-            </common-button>,
+            </ct-button>,
           )}
         </div>
       ),