Concrete components, controlled by a few inputs.

block.define({

  inputs: {

    studentName: { type: "text", label: "Student", default: "Sarah Chen",

      write(node, v) { node.findOne("_name").setText(v) } },

    subject: { type: "text", label: "Subject", default: "Mathematics",

      write(node, v) { node.findOne("_subject").setText(v) } },

    score: { type: "number", label: "Score", default: 72, min: 0, max: 100,

      write(node, v) { node.findOne("_score").setText(String(v)) },

      initial(node) { return Number(node.findOne("_score").getText()) } },

    maxScore: { type: "text", label: "Max Score", default: "100",

      write(node, v) { node.findOne("_max").setText("/ " + v) } },

    term: { type: "select", label: "Term",

      options: ["Spring 2025","Fall 2024","Spring 2024"], default: "Spring 2025",

      write(node, v) { node.findOne("_term").setText(v) } },

  },

  bind(inputs, node) {

    const s = Number(inputs.score);

    // Grade letter

    const grade = s >= 85 ? "A" : s >= 70 ? "B" : s >= 50 ? "C" : s >= 30 ? "D" : "F";

    node.findOne("_grade").setText(grade);

    // Status label + component variant

    const status = s >= 85 ? "Excellent" : s >= 70 ? "Good" : s >= 50 ? "Pass"

                 : s >= 30 ? "Poor" : "Failed";

    node.findOne("_status-label").setText(status);

    node.setProperty("Status", status);

    // Progress bar width (max 240px)

    node.findOne("_bar").resize(block.utils.clamp(s * 2.4, 0, 240), 8);

    // Colour cascade

    const hex = s >= 85 ? "#22C55E" : s >= 70 ? "#3B82F6"

              : s >= 50 ? "#F59E0B" : s >= 30 ? "#F97316" : "#EF4444";

    const { r, g, b } = block.color.fromHex(hex);

    node.findOne("_bar").setFill(r, g, b);

    node.findOne("_grade").setFill(r, g, b);

  },

});