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

@@ -12,18 +12,18 @@ import type {
   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}
    */
@@ -1773,6 +1773,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;
@@ -1803,7 +1804,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;
@@ -2876,6 +2877,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 {}
@@ -2903,6 +2905,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;
@@ -3012,9 +3036,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> {
@@ -3047,9 +3073,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";
 }
 
@@ -3121,7 +3149,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;
@@ -3144,7 +3172,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> {
@@ -3188,11 +3216,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;
@@ -3799,6 +3833,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

@@ -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>
       ),

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

@@ -292,7 +292,7 @@ export default recipe(
       // Call LLM to generate summary
       const summaryResult = llm({
         system: systemPrompt,
-        messages: [userPrompt],
+        messages: [{ role: "user", content: userPrompt }],
       });
 
       // Return a simple object that references the original email
@@ -348,9 +348,9 @@ export default recipe(
               </div>
 
               <div>
-                <common-checkbox
+                <ct-checkbox
                   checked={settings.includeTags}
-                  oncommon-checked={includeTagsHandler}
+                  onct-change={includeTagsHandler}
                 />
                 <label>Include Tags</label>
               </div>