scratch-blocks 2.0.0-spork.5 → 2.0.0-spork.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-blocks",
-  "version": "2.0.0-spork.5",
+  "version": "2.0.0-spork.7",
   "description": "Scratch Blocks is a library for building creative computing interfaces.",
   "author": "Massachusetts Institute of Technology",
   "license": "Apache-2.0",
@@ -17,12 +17,17 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "test:lint": "eslint ."
   },
+  "dependencies": {
+    "@blockly/continuous-toolbox": "^7.0.1",
+    "@blockly/field-colour": "^6.0.3",
+    "blockly": "^12.3.0-beta.0"
+  },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
-    "eslint": "^4.19.1",
+    "@commitlint/cli": "17.8.1",
+    "@commitlint/config-conventional": "17.8.1",
+    "eslint": "4.19.1",
     "husky": "9.1.6",
-    "scratch-semantic-release-config": "1.0.16",
+    "scratch-semantic-release-config": "4.0.0",
     "semantic-release": "22.0.12",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.5.1",
@@ -31,11 +36,6 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "dependencies": {
-    "@blockly/continuous-toolbox": "^7.0.1",
-    "@blockly/field-colour": "^6.0.3",
-    "blockly": "12.3.0-beta.0"
-  },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"

package/src/blocks/sensing.ts

@@ -374,6 +374,18 @@ Blockly.Blocks["sensing_dayssince2000"] = {
   },
 };
 
+Blockly.Blocks["sensing_online"] = {
+  /**
+   * Block to report whether or not the system is online
+   */
+  init: function(this: Blockly.Block) {
+    this.jsonInit({
+      message0: Blockly.Msg.SENSING_ONLINE,
+      extensions: ["colours_sensing", "output_boolean", "monitor_block"],
+    });
+  },
+};
+
 Blockly.Blocks["sensing_username"] = {
   /**
    * Block to report user's username

package/src/constants.ts

@@ -74,3 +74,12 @@ export { OUTPUT_SHAPE_ROUND };
  */
 const NEW_BROADCAST_MESSAGE_ID = "NEW_BROADCAST_MESSAGE_ID";
 export { NEW_BROADCAST_MESSAGE_ID };
+
+/**
+ * Enum defining supported Scratch block themes.
+ * Scratch block themes can customize the shape of blocks independently of their color.
+ */
+export enum ScratchBlocksTheme {
+  CLASSIC = "classic",
+  CAT_BLOCKS = "catblocks",
+}

package/src/index.ts

@@ -23,6 +23,7 @@ import "./blocks/sound";
 import * as scratchBlocksUtils from "./scratch_blocks_utils";
 import * as ScratchVariables from "./variables";
 import "./css";
+import "./renderer/cat/renderer";
 import "./renderer/renderer";
 import * as contextMenuItems from "./context_menu_items";
 import {
@@ -64,6 +65,7 @@ import { registerRecyclableBlockFlyoutInflater } from "./recyclable_block_flyout
 import { registerScratchBlockPaster } from "./scratch_block_paster";
 import { registerStatusIndicatorLabelFlyoutInflater } from "./status_indicator_label_flyout_inflater";
 import { registerScratchContinuousCategory } from "./scratch_continuous_category";
+import { ScratchBlocksTheme } from "./constants";
 
 export * from "blockly/core";
 export * from "./block_reporting";
@@ -83,7 +85,22 @@ export {
 } from "./status_indicator_label";
 export * from "./xml";
 
-export function inject(container: Element, options: Blockly.BlocklyOptions) {
+interface ScratchBlocksOptions extends Blockly.BlocklyOptions {
+  /**
+   * Scratch uses "theme" to talk about the shape of blocks. The Blockly concept of a theme affects CSS properties and
+   * aligns more closely with "color mode" in Scratch.
+   */
+  scratchTheme?: ScratchBlocksTheme;
+}
+
+function sanitizeTheme(theme?: ScratchBlocksTheme) {
+  if (theme === ScratchBlocksTheme.CAT_BLOCKS) {
+    return theme;
+  }
+  return ScratchBlocksTheme.CLASSIC;
+}
+
+export function inject(container: Element, options: ScratchBlocksOptions) {
   registerScratchFieldAngle();
   registerFieldColourSlider();
   registerScratchFieldDropdown();
@@ -99,8 +116,10 @@ export function inject(container: Element, options: Blockly.BlocklyOptions) {
   registerStatusIndicatorLabelFlyoutInflater();
   registerScratchContinuousCategory();
 
+  const scratchTheme = sanitizeTheme(options.scratchTheme);
+
   Object.assign(options, {
-    renderer: "scratch",
+    renderer: `scratch_${scratchTheme}`,
     plugins: {
       toolbox: ScratchContinuousToolbox,
       flyoutsVerticalToolbox: CheckableContinuousFlyout,

package/src/renderer/bowler_hat.ts

@@ -5,13 +5,14 @@
  */
 
 import * as Blockly from "blockly/core";
+import { ConstantProvider } from "./constants";
 
 export class BowlerHat extends Blockly.blockRendering.Hat {
-  constructor(constants: Blockly.blockRendering.ConstantProvider) {
+  constructor(constants: ConstantProvider) {
     super(constants);
     // Calculated dynamically by computeBounds_().
     this.width = 0;
-    this.height = 20;
+    this.height = constants.BOWLER_HAT_HEIGHT;
     this.ascenderHeight = this.height;
   }
 }

package/src/renderer/cat/cat_face.ts

@@ -0,0 +1,226 @@
+/**
+ * @license
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+import { type ConstantProvider, type CatPathState, PathCapType, PathEarState } from "./constants";
+import { type CatScratchRenderer } from "./renderer";
+import { type RenderInfo } from "./render_info";
+
+const Svg = Blockly.utils.Svg;
+
+enum FacePart {
+  MOUTH,
+  EYE_1_OPEN,
+  EYE_2_OPEN,
+  EYE_1_CLOSED,
+  EYE_2_CLOSED,
+  EAR_1_INSIDE,
+  EAR_2_INSIDE,
+}
+
+const setVisibility = (element: SVGElement, visible: boolean) => {
+  if (visible) {
+    element.style.removeProperty("visibility");
+  } else {
+    element.style.setProperty("visibility", "hidden");
+  }
+};
+
+/**
+ * Manages the SVG elements for the cat face.
+ * This class holds the persistent SVG elements and manages events (blinking, etc.)
+ * Owned by the PathObject with similar lifetime.
+ */
+export class CatFace {
+  faceGroup_: SVGElement;
+  parts_ = {} as Record<FacePart, SVGElement>;
+  pathEarState: CatPathState;
+  constants_: ConstantProvider;
+  renderer_: CatScratchRenderer;
+  block_: Blockly.BlockSvg;
+
+  constructor(info: RenderInfo) {
+    this.constants_ = info.constants_;
+    this.renderer_ = info.renderer_;
+    this.block_ = info.block_;
+    this.pathEarState = {
+      capType: info.isBowlerHatBlock() ? PathCapType.BOWLER : PathCapType.CAP,
+      ear1State: PathEarState.UP,
+      ear2State: PathEarState.UP,
+    };
+  }
+
+  /**
+   * Initializes the face SVG elements if they haven't been created yet.
+   */
+  init(parent: SVGElement) {
+    if (this.faceGroup_) return;
+    this.buildFaceGeometry_(parent);
+    this.setupBlinking_();
+    this.setupEarFlicks_();
+  }
+
+  /**
+   * Updates the transform of the entire face group.
+   */
+  setTransform(transform: string) {
+    if (this.faceGroup_) {
+      this.faceGroup_.setAttribute("transform", transform);
+    }
+  }
+
+  private setupBlinking_() {
+    const blinkDuration = 100;
+    let ignoreBlink = false;
+
+    // TODO: Would it be better to use CSS for this?
+    Blockly.browserEvents.bind(this.block_.pathObject.svgPath, "mouseenter", this, () => {
+      if (ignoreBlink) return;
+      ignoreBlink = true;
+      setVisibility(this.parts_[FacePart.EYE_1_OPEN], false);
+      setVisibility(this.parts_[FacePart.EYE_2_OPEN], false);
+      setVisibility(this.parts_[FacePart.EYE_1_CLOSED], true);
+      setVisibility(this.parts_[FacePart.EYE_2_CLOSED], true);
+      setTimeout(() => {
+        setVisibility(this.parts_[FacePart.EYE_1_OPEN], true);
+        setVisibility(this.parts_[FacePart.EYE_2_OPEN], true);
+        setVisibility(this.parts_[FacePart.EYE_1_CLOSED], false);
+        setVisibility(this.parts_[FacePart.EYE_2_CLOSED], false);
+      }, blinkDuration);
+      setTimeout(() => {
+        ignoreBlink = false;
+      }, 2 * blinkDuration);
+    });
+  }
+
+  /**
+   * Asks the renderer to re-render the block at a time when it normally wouldn't.
+   * Necessary if the path geometry has changed (ear flicks).
+   * Not necessary for face changes (blinking).
+   */
+  private triggerRedraw() {
+    this.renderer_.render(this.block_);
+  }
+
+  private setupEarFlicks_() {
+    const flickDuration = 50;
+    let ignoreFlick1 = false;
+    let ignoreFlick2 = false;
+
+    Blockly.browserEvents.bind(this.parts_[FacePart.EAR_1_INSIDE], "mouseenter", this, () => {
+      if (ignoreFlick1) return;
+      ignoreFlick1 = true;
+      setVisibility(this.parts_[FacePart.EAR_1_INSIDE], false);
+      this.pathEarState.ear1State = PathEarState.DOWN;
+      this.triggerRedraw();
+      setTimeout(() => {
+        setVisibility(this.parts_[FacePart.EAR_1_INSIDE], true);
+        this.pathEarState.ear1State = PathEarState.UP;
+        this.triggerRedraw();
+      }, flickDuration);
+      setTimeout(() => {
+        ignoreFlick1 = false;
+      }, 2 * flickDuration);
+    });
+    Blockly.browserEvents.bind(this.parts_[FacePart.EAR_2_INSIDE], "mouseenter", this, () => {
+      if (ignoreFlick2) return;
+      ignoreFlick2 = true;
+      setVisibility(this.parts_[FacePart.EAR_2_INSIDE], false);
+      this.pathEarState.ear2State = PathEarState.DOWN;
+      this.triggerRedraw();
+      setTimeout(() => {
+        setVisibility(this.parts_[FacePart.EAR_2_INSIDE], true);
+        this.pathEarState.ear2State = PathEarState.UP;
+        this.triggerRedraw();
+      }, flickDuration);
+      setTimeout(() => {
+        ignoreFlick2 = false;
+      }, 2 * flickDuration);
+    });
+  }
+
+  private buildFaceGeometry_(parent: SVGElement) {
+    const face = Blockly.utils.dom.createSvgElement(
+      Svg.G,
+      {
+        fill: "#000000",
+        // transform set in setTransform()
+      },
+      parent
+    );
+    this.faceGroup_ = face;
+
+    this.parts_[FacePart.MOUTH] = Blockly.utils.dom.createSvgElement(
+      Svg.PATH,
+      {
+        "fill-opacity": this.constants_.FACE_OPACITY,
+        d: this.constants_.MOUTH_PATH,
+      },
+      face
+    );
+
+    this.parts_[FacePart.EAR_1_INSIDE] = Blockly.utils.dom.createSvgElement(
+      Svg.PATH,
+      {
+        fill: this.constants_.EAR_INSIDE_COLOR,
+        d: this.constants_.EAR_1_INSIDE_PATH,
+      },
+      face
+    );
+
+    this.parts_[FacePart.EAR_2_INSIDE] = Blockly.utils.dom.createSvgElement(
+      Svg.PATH,
+      {
+        fill: this.constants_.EAR_INSIDE_COLOR,
+        d: this.constants_.EAR_2_INSIDE_PATH,
+      },
+      face
+    );
+
+    this.parts_[FacePart.EYE_1_OPEN] = Blockly.utils.dom.createSvgElement(
+      Svg.CIRCLE,
+      {
+        "fill-opacity": this.constants_.FACE_OPACITY,
+        cx: this.constants_.EYE_1_X,
+        cy: this.constants_.EYE_1_Y,
+        r: this.constants_.OPEN_EYE_RADIUS,
+      },
+      face
+    );
+
+    this.parts_[FacePart.EYE_1_CLOSED] = Blockly.utils.dom.createSvgElement(
+      Svg.PATH,
+      {
+        "fill-opacity": this.constants_.FACE_OPACITY,
+        d: this.constants_.CLOSED_EYE_1_PATH,
+      },
+      face
+    );
+    setVisibility(this.parts_[FacePart.EYE_1_CLOSED], false);
+
+    this.parts_[FacePart.EYE_2_OPEN] = Blockly.utils.dom.createSvgElement(
+      Svg.CIRCLE,
+      {
+        "fill-opacity": this.constants_.FACE_OPACITY,
+        cx: this.constants_.EYE_2_X,
+        cy: this.constants_.EYE_2_Y,
+        r: this.constants_.OPEN_EYE_RADIUS,
+      },
+      face
+    );
+
+    this.parts_[FacePart.EYE_2_CLOSED] = Blockly.utils.dom.createSvgElement(
+      Svg.PATH,
+      {
+        "fill-opacity": this.constants_.FACE_OPACITY,
+        d: this.constants_.CLOSED_EYE_2_PATH,
+      },
+      face
+    );
+    setVisibility(this.parts_[FacePart.EYE_2_CLOSED], false);
+  }
+}

package/src/renderer/cat/constants.ts

@@ -0,0 +1,136 @@
+/**
+ * @license
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ConstantProvider as ClassicConstantProvider } from "../constants";
+
+export enum PathCapType {
+  CAP = "CAP",
+  BOWLER = "BOWLER",
+}
+
+export enum PathEarState {
+  DOWN = "DOWN",
+  UP = "UP",
+}
+
+export interface CatPathState {
+  capType: PathCapType;
+  ear1State: PathEarState; // Left ear in LTR, right in RTL
+  ear2State: PathEarState; // Right ear in LTR, left in RTL
+}
+
+export class ConstantProvider extends ClassicConstantProvider {
+  START_HAT_HEIGHT = 31.5;
+  START_HAT_WIDTH = 96;
+
+  BOWLER_HAT_HEIGHT = 35;
+
+  FACE_OPACITY = 0.6;
+
+  EYE_1_X = 59.2;
+  EYE_1_Y = -3.3;
+  EYE_2_X = 29.1;
+  EYE_2_Y = -3.3;
+  OPEN_EYE_RADIUS = 3.4;
+  CLOSED_EYE_1_PATH =
+    "M25.2-1.1c0.1,0,0.2,0,0.2,0l8.3-2.1l-7-4.8" +
+    "c-0.5-0.3-1.1-0.2-1.4,0.3s-0.2,1.1,0.3,1.4L29-4.1l-4,1" +
+    "c-0.5,0.1-0.9,0.7-0.7,1.2C24.3-1.4,24.7-1.1,25.2-1.1z";
+  CLOSED_EYE_2_PATH =
+    "M62.4-1.1c-0.1,0-0.2,0-0.2,0l-8.3-2.1l7-4.8" +
+    "c0.5-0.3,1.1-0.2,1.4,0.3s0.2,1.1-0.3,1.4l-3.4,2.3l4,1" +
+    "c0.5,0.1,0.9,0.7,0.7,1.2C63.2-1.4,62.8-1.1,62.4-1.1z";
+
+  MOUTH_PATH =
+    "M45.6,0.1c-0.9,0-1.7-0.3-2.3-0.9" +
+    "c-0.6,0.6-1.3,0.9-2.2,0.9c-0.9,0-1.8-0.3-2.3-0.9c-1-1.1-1.1-2.6-1.1-2.8" +
+    "c0-0.5,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1c0,0.4,0.1,1.7,1.4,1.7" +
+    "c0.5,0,0.7-0.2,0.8-0.3c0.3-0.3,0.4-1,0.4-1.3c0-0.1,0-0.1,0-0.2" +
+    "c0-0.5,0.5-1,1-1l0,0c0.5,0,1,0.4,1,1c0,0,0,0.1,0,0.2" +
+    "c0,0.3,0.1,0.9,0.4,1.2C44.8-2.2,45-2,45.5-2s0.7-0.2,0.8-0.3" +
+    "c0.3-0.4,0.4-1.1,0.3-1.3c0-0.5,0.4-1,0.9-1.1c0.5,0,1,0.4,1.1,0.9" +
+    "c0,0.2,0.1,1.8-0.8,2.8C47.5-0.4,46.8,0.1,45.6,0.1z";
+
+  EAR_INSIDE_COLOR = "#FFD5E6";
+  EAR_1_INSIDE_PATH =
+    "M22.4-15.6c-1.7-4.2-4.5-9.1-5.8-8.5" +
+    "c-1.6,0.8-5.4,7.9-5,15.4c0,0.6,0.7,0.7,1.1,0.5c3-1.6,6.4-2.8,8.6-3.6" +
+    "C22.8-12.3,23.2-13.7,22.4-15.6z";
+  EAR_2_INSIDE_PATH =
+    "M73.1-15.6c1.7-4.2,4.5-9.1,5.8-8.5" +
+    "c1.6,0.8,5.4,7.9,5,15.4c0,0.6-0.7,0.7-1.1,0.5c-3-1.6-6.4-2.8-8.6-3.6" +
+    "C72.8-12.3,72.4-13.7,73.1-15.6z";
+
+  CAP_START_PATH = "c2.6,-2.3 5.5,-4.3 8.5,-6.2";
+  CAP_MIDDLE_PATH = "c8.4,-1.3 17,-1.3 25.4,0";
+  CAP_END_PATH = "c3,1.8 5.9,3.9 8.5,6.1";
+
+  CAP_EAR_1_UP_PATH =
+    "c-1,-12.5 5.3,-23.3 8.4,-24.8" + "c3.7,-1.8 16.5,13.1 18.4,15.4";
+  CAP_EAR_2_UP_PATH =
+    "c1.9,-2.3 14.7,-17.2 18.4,-15.4" + "c3.1,1.5 9.4,12.3 8.4,24.8";
+  CAP_EAR_1_DOWN_PATH =
+    "c-5.8,-4.8 -8,-18 -4.9,-19.5" + "c3.7,-1.8 24.5,11.1 31.7,10.1";
+  CAP_EAR_2_DOWN_PATH =
+    "c7.2,1 28,-11.9 31.7,-10.1" + "c3.1,1.5 0.9,14.7 -4.9,19.5";
+
+  BOWLER_START_PATH = ""; // opening curve depends on whether ear 1 is up or down
+  BOWLER_MIDDLE_PATH = "h33";
+  BOWLER_END_PATH = "a 20,20 0 0,1 20,20";
+  BOWLER_EAR_1_UP_PATH =
+    "c0,-7.1 3.7,-13.3 9.3,-16.9" +
+    "c1.7,-7.5 5.4,-13.2 7.6,-14.2" +
+    "c2.6,-1.3 10,6 14.6,11.1";
+  BOWLER_EAR_2_UP_PATH =
+    "c4.6,-5.1 11.9,-12.4 14.6,-11.1" +
+    "c1.9,0.9 4.9,5.2 6.8,11.1" +
+    "h7.8";
+  BOWLER_EAR_1_DOWN_PATH =
+    "c0,-4.6 1.6,-8.9 4.3,-12.3" +
+    "c-2.4,-5.6 -2.9,-12.4 -0.7,-13.4" +
+    "c2.1,-1 9.6,2.6 17,5.8" +
+    "h10.9";
+  BOWLER_EAR_2_DOWN_PATH =
+    "h11" +
+    "c7.4,-3.2 14.8,-6.8 16.9,-5.8" +
+    "c1.2,0.6 1.6,2.9 1.3,5.8";
+
+  // This number was determined experimentally:
+  // - The 17 came from zooming in on a "define" block and iterating to get a near-vertical edge.
+  // - The .7 came from measuring the width of the other parts of the SVG path.
+  BOWLER_WIDTH_MAGIC = 17.7;
+
+  /**
+   * Make the starting portion of a block's hat.
+   * The return value will be stored as START_HAT.
+   * In the case of cat blocks, this is just a placeholder for sizing.
+   */
+  override makeStartHat() {
+    return {
+      height: this.START_HAT_HEIGHT,
+      width: this.START_HAT_WIDTH,
+      path: this.makeCatPath(0, {
+        capType: PathCapType.CAP,
+        ear1State: PathEarState.UP,
+        ear2State: PathEarState.UP,
+      }),
+    };
+  }
+
+  makeCatPath(width: number, state: CatPathState) {
+    const pathStart = this[`${state.capType}_START_PATH`];
+    const pathEar1 =
+      this[`${state.capType}_EAR_1_${state.ear1State}_PATH`];
+    const pathMiddle = this[`${state.capType}_MIDDLE_PATH`];
+    const pathEar2 =
+      this[`${state.capType}_EAR_2_${state.ear2State}_PATH`];
+    const spacer = (state.capType === PathCapType.BOWLER)
+      ? `l ${width - this.START_HAT_WIDTH - this.BOWLER_WIDTH_MAGIC} 0`
+      : ""; // caps don't need an internal spacer like bowlers do
+    const pathEnd = this[`${state.capType}_END_PATH`];
+    return `${pathStart}${pathEar1}${pathMiddle}${pathEar2}${spacer}${pathEnd}`;
+  }
+}

package/src/renderer/cat/drawer.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Drawer as ClassicDrawer } from "../drawer";
+
+import { type ConstantProvider } from "./constants";
+import { type PathObject } from "./path_object";
+import { type RenderInfo } from "./render_info";
+import { CatFace } from "./cat_face";
+
+export class Drawer extends ClassicDrawer {
+  constants_: ConstantProvider;
+  info_: RenderInfo;
+
+  override draw() {
+    // Make sure the face exists if we need it.
+    if (this.block_.hat) {
+      const pathObject = this.block_.pathObject as PathObject;
+
+      if (!pathObject.catFace) {
+        // Initialize the persistent face view.
+        // Be aware of lifetimes:
+        // Drawer and RenderInfo only exist during `Renderer.render(block)`.
+        // Block, PathObject, and CatFace last for the lifetime of the block.
+        // ConstantsProvider and the Renderer last for the lifetime of the workspace.
+        pathObject.catFace = new CatFace(this.info_);
+        pathObject.catFace.init(this.block_.getSvgRoot());
+      }
+    }
+
+    super.draw();
+  }
+
+  override drawInternals_() {
+    super.drawInternals_();
+
+    const pathObject = this.block_.pathObject as PathObject;
+    const catFace = pathObject.catFace;
+    if (catFace) {
+      // Update the transform for the whole group
+      const transformParts: string[] = [];
+      if (this.info_.RTL) {
+        transformParts.push("scale(-1 1)");
+      }
+      transformParts.push(`translate(0, ${this.info_.startY})`);
+      catFace.setTransform(transformParts.join(" "));
+    }
+  }
+
+  override makeReplacementTop_() {
+    if (!this.block_.hat) {
+      return super.makeReplacementTop_();
+    }
+    const pathObject = this.block_.pathObject as PathObject;
+    return this.constants_.makeCatPath(
+      this.info_.width,
+      pathObject.catFace.pathEarState
+    );
+  }
+}

package/src/renderer/cat/path_object.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PathObject as ClassicPathObject } from "../path_object";
+import { type CatFace } from "./cat_face";
+
+export class PathObject extends ClassicPathObject {
+  /**
+   * The face view for this block.
+   * Only valid if this block has a hat and therefore should have a face.
+   */
+  catFace?: CatFace;
+}

package/src/renderer/cat/render_info.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RenderInfo as ClassicRenderInfo } from "../render_info";
+
+import { ConstantProvider } from "./constants";
+import { CatScratchRenderer } from "./renderer";
+
+export class RenderInfo extends ClassicRenderInfo {
+  override constants_: ConstantProvider;
+  override renderer_: CatScratchRenderer;
+}

package/src/renderer/cat/renderer.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+import { ScratchRenderer } from "../renderer";
+
+import { ConstantProvider } from "./constants";
+import { Drawer } from "./drawer";
+import { RenderInfo } from "./render_info";
+import { PathObject } from "./path_object";
+
+export class CatScratchRenderer extends ScratchRenderer {
+  override makeConstants_() {
+    return new ConstantProvider();
+  }
+
+  override makeDrawer_(block: Blockly.BlockSvg, info: RenderInfo) {
+    return new Drawer(block, info);
+  }
+
+  override makeRenderInfo_(block: Blockly.BlockSvg): RenderInfo {
+    return new RenderInfo(this, block);
+  }
+
+  override makePathObject(root: SVGElement, style: Blockly.Theme.BlockStyle): PathObject {
+    return new PathObject(root, style, this.getConstants());
+  }
+}
+
+Blockly.blockRendering.register("scratch_catblocks", CatScratchRenderer);

package/src/renderer/constants.ts

@@ -10,6 +10,8 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider {
   REPLACEMENT_GLOW_COLOUR = "#ffffff";
   SELECTED_GLOW_COLOUR = "#ffffff";
 
+  BOWLER_HAT_HEIGHT = 20;
+
   /**
    * Sets the visual theme used to render the workspace.
    * This method also synthesizes a "selected" theme, used to color blocks with
@@ -20,7 +22,7 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider {
    *
    * @param theme The new theme to apply.
    */
-  setTheme(theme: Blockly.Theme) {
+  override setTheme(theme: Blockly.Theme) {
     const root = document.querySelector(":root") as HTMLElement;
     for (const [key, colour] of Object.entries(theme.blockStyles)) {
       if (typeof colour !== "object") {
@@ -52,8 +54,20 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider {
     super.setTheme(theme);
   }
 
-  createDom(svg: SVGElement, tagName: string, selector: string) {
+  override createDom(svg: SVGElement, tagName: string, selector: string) {
     super.createDom(svg, tagName, selector);
     this.selectedGlowFilterId = "";
   }
+
+  /**
+   * Generate a bowler hat path string for a specific block.
+   * @param width the `info_.width` of the block.
+   * @returns The SVG path string for the bowler hat.
+   */
+  makeBowlerHatPath(width: number): string {
+    const bowlerHatPath = `a20,20 0 0,1 20,-20 l ${
+      width - 40
+    } 0 a20,20 0 0,1 20,20`;
+    return bowlerHatPath;
+  }
 }