@robotical/martyblocksjr 4.2.8 → 4.2.9

package/editions/free/src/css/thumbs.css

@@ -30,6 +30,8 @@
     left: ${5 * scaleMultiplier}px;
     width: ${css_vh(25)};
     height: ${css_vh(18.75)};
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
 }
 
 .aproject.empty {
@@ -162,6 +164,167 @@
     right: 8px;
 }
 
+.project-options-button {
+    position: absolute;
+    top: ${css_vh(1.1)};
+    right: ${css_vh(0.8)};
+    z-index: 8;
+    width: ${css_vh(5.2)};
+    height: ${css_vh(5.2)};
+    padding: 0 0 ${css_vh(1.1)};
+    border: 2px solid #315F7B;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 ${css_vh(0.25)} ${css_vh(0.55)} rgba(27, 62, 78, 0.35);
+    color: #315F7B;
+    cursor: pointer;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(4.2)};
+    font-weight: bold;
+    line-height: 1;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.project-options-button:hover,
+.project-options-button:focus-visible,
+.project-options-button[aria-expanded="true"] {
+    background: #EAF7FF;
+    outline: 3px solid #133C46;
+    outline-offset: 2px;
+}
+
+.project-options-menu {
+    position: absolute;
+    top: ${css_vh(6.7)};
+    right: ${css_vh(0.8)};
+    z-index: 20;
+    min-width: ${css_vh(18)};
+    padding: ${css_vh(0.7)};
+    border: 2px solid #315F7B;
+    border-radius: 12px;
+    background: #FFFDF7;
+    box-shadow: 0 ${css_vh(0.45)} ${css_vh(1.1)} rgba(27, 62, 78, 0.4);
+}
+
+.project-options-menu[hidden] {
+    display: none;
+}
+
+.project-options-delete {
+    display: flex;
+    align-items: center;
+    gap: ${css_vh(0.8)};
+    width: 100%;
+    min-height: ${css_vh(4.8)};
+    padding: ${css_vh(0.7)} ${css_vh(1)};
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: #9E1F28;
+    cursor: pointer;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(1.8)};
+    font-weight: bold;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.project-options-delete:hover,
+.project-options-delete:focus-visible {
+    background: #FCE5E5;
+    outline: 3px solid #9E1F28;
+    outline-offset: -1px;
+}
+
+.project-options-delete-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: ${css_vh(2.6)};
+    height: ${css_vh(2.6)};
+    border-radius: 50%;
+    background: #E43D44;
+    color: #fff;
+    font-size: ${css_vh(1.8)};
+    line-height: 1;
+}
+
+.project-delete-dialog-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 12000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${css_vh(3)};
+    background: rgba(27, 51, 66, 0.72);
+}
+
+.project-delete-dialog {
+    width: min(${css_vh(52)}, 90vw);
+    padding: ${css_vh(3)};
+    border: ${css_vh(0.4)} solid #315F7B;
+    border-radius: 18px;
+    background: #FFFDF7;
+    box-shadow: 0 ${css_vh(0.8)} ${css_vh(2)} rgba(0, 0, 0, 0.35);
+    text-align: center;
+}
+
+.project-delete-dialog-title {
+    margin: 0;
+    color: #315F7B;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(3.2)};
+    line-height: 1.2;
+}
+
+.project-delete-dialog-description {
+    margin: ${css_vh(1.6)} 0 0;
+    color: #416E86;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(2.1)};
+    line-height: 1.35;
+}
+
+.project-delete-dialog-actions {
+    display: flex;
+    justify-content: center;
+    gap: ${css_vh(1.4)};
+    margin-top: ${css_vh(2.6)};
+}
+
+.project-delete-cancel,
+.project-delete-confirm {
+    min-width: ${css_vh(14)};
+    min-height: ${css_vh(5.2)};
+    padding: ${css_vh(0.8)} ${css_vh(1.5)};
+    border: 2px solid #315F7B;
+    border-radius: 10px;
+    color: #fff;
+    cursor: pointer;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(1.9)};
+    font-weight: bold;
+}
+
+.project-delete-cancel {
+    background: #5D9CC8;
+}
+
+.project-delete-confirm {
+    border-color: #9E1F28;
+    background: #E43D44;
+}
+
+.project-delete-cancel:focus-visible,
+.project-delete-confirm:focus-visible {
+    outline: 3px solid #133C46;
+    outline-offset: 3px;
+}
+
 .closex {
     position: relative;
     float: left;

package/editions/free/src/settings.json

@@ -17,6 +17,9 @@
     "categoryStopColor": "#D62222",
     "paletteBlockShadowOpacity": 0.8,
     "autoSaveInterval": 30000,
+    "curriculumArtifactAllowedOrigins": [
+        "https://cdn.sanity.io"
+    ],
     "defaultLocale": "en",
     "defaultLocaleShort": "en",
     "supportedLocales": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/martyblocksjr",
-  "version": "4.2.8",
+  "version": "4.2.9",
   "description": "ScratchJr",
   "repository": {
     "type": "git",

package/tests/CurriculumArtifact.test.js

@@ -0,0 +1,272 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { importPackageMock } = vi.hoisted(() => ({
+  importPackageMock: vi.fn(),
+}));
+
+vi.mock("@/editor/ProjectCloud", () => ({
+  default: {
+    importPackage: importPackageMock,
+  },
+}));
+
+import {
+  CURRICULUM_ARTIFACT_KIND,
+  CURRICULUM_ARTIFACT_PLATFORM,
+  importCurriculumArtifactFromSearch,
+  parseCurriculumArtifactRequest,
+  sha256Hex,
+  validateCurriculumArtifact,
+} from "@/editor/CurriculumArtifact";
+
+function validArtifact() {
+  return {
+    kind: CURRICULUM_ARTIFACT_KIND,
+    formatVersion: 1,
+    platform: CURRICULUM_ARTIFACT_PLATFORM,
+    projectPackage: {
+      formatVersion: 1,
+      project: {
+        id: "source-project-id-must-not-be-reused",
+        name: "Walking starter",
+        version: "iOSv01",
+        gallery: "samples",
+        isgift: "1",
+        thumbnail: {
+          pagecount: 1,
+          md5: "thumbnail.png",
+        },
+        json: {
+          pages: ["page 1"],
+          currentPage: "page 1",
+          "page 1": {
+            sprites: ["Marty 1"],
+            layers: ["Marty 1"],
+            md5: "Farm.svg",
+            "Marty 1": {
+              id: "Marty 1",
+              type: "sprite",
+              md5: "marty.svg",
+              animationFrames: ["marty.svg", "marty-2.svg"],
+              sounds: ["hello.wav"],
+              scripts: [],
+            },
+          },
+        },
+      },
+      assets: {
+        "thumbnail.png": "dGh1bWI=",
+        "marty.svg": "PHN2Zy8+",
+        "marty-2.svg": "PHN2Zy8+",
+        "hello.wav": "UklGRg==",
+      },
+    },
+  };
+}
+
+function responseFor(value, url = "https://cdn.sanity.io/files/project/dataset/walking.json") {
+  var bytes = new TextEncoder().encode(JSON.stringify(value));
+  return {
+    ok: true,
+    url: url,
+    headers: {
+      get(name) {
+        if (name.toLowerCase() === "content-type") {
+          return "application/vnd.robotical.curriculum-code-artifact+json; charset=utf-8";
+        }
+        if (name.toLowerCase() === "content-length") {
+          return String(bytes.byteLength);
+        }
+        return null;
+      },
+    },
+    arrayBuffer: async function () {
+      return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+    },
+  };
+}
+
+describe("curriculum artifact import", () => {
+  beforeEach(() => {
+    importPackageMock.mockReset();
+    importPackageMock.mockResolvedValue({ projectId: "42" });
+  });
+
+  it("normalizes a valid artifact into a fresh editable project package", () => {
+    var result = validateCurriculumArtifact(validArtifact());
+
+    expect(result.formatVersion).toBe(1);
+    expect(result.project).toMatchObject({
+      name: "Walking starter",
+      version: "iOSv01",
+      deleted: "NO",
+      isgift: "0",
+    });
+    expect(result.project.id).toBeUndefined();
+    expect(result.project.gallery).toBeUndefined();
+    expect(Object.keys(result.assets).sort()).toEqual([
+      "hello.wav",
+      "marty-2.svg",
+      "marty.svg",
+      "thumbnail.png",
+    ]);
+  });
+
+  it("rejects unsupported envelopes and packages", () => {
+    var artifact = validArtifact();
+    artifact.platform = "martyblocks";
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/platform/);
+
+    artifact = validArtifact();
+    artifact.formatVersion = 2;
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/formatVersion/);
+
+    artifact = validArtifact();
+    artifact.projectPackage.formatVersion = 2;
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/projectPackage formatVersion/);
+  });
+
+  it("rejects remote, traversal and unreferenced project assets", () => {
+    var artifact = validArtifact();
+    artifact.projectPackage.project.json["page 1"].md5 = "https://evil.example/background.svg";
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/safe relative asset identifier/);
+
+    artifact = validArtifact();
+    artifact.projectPackage.project.json["page 1"]["Marty 1"].md5 = "../marty.svg";
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/safe relative asset identifier/);
+
+    artifact = validArtifact();
+    artifact.projectPackage.assets["unused.svg"] = "PHN2Zy8+";
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/unreferenced asset/);
+
+    artifact = validArtifact();
+    artifact.projectPackage.project.json["page 1"]["Marty 1"].md5 = "sprites/%2e%2e/marty.svg";
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/safe relative asset identifier/);
+  });
+
+  it("rejects project structures that the editor cannot safely recreate", () => {
+    var artifact = validArtifact();
+    delete artifact.projectPackage.project.json["page 1"].layers;
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/layers/);
+
+    artifact = validArtifact();
+    artifact.projectPackage.project.json["page 1"].layers = [];
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/every sprite/);
+
+    artifact = validArtifact();
+    delete artifact.projectPackage.project.json["page 1"]["Marty 1"].scripts;
+    expect(() => validateCurriculumArtifact(artifact)).toThrow(/scripts/);
+  });
+
+  it("accepts only configured HTTPS URLs and loopback development URLs", () => {
+    expect(parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=https%3A%2F%2Fcdn.sanity.io%2Fartifact.json" +
+        "&curriculumArtifactSha256=" + "a".repeat(64),
+      {
+        baseUrl: "https://app.example/blocks-jr",
+        allowedOrigins: ["https://cdn.sanity.io"],
+      }
+    ).url).toBe("https://cdn.sanity.io/artifact.json");
+
+    expect(parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=http%3A%2F%2Flocalhost%3A3011%2Fartifact.json",
+      { baseUrl: "http://localhost:3011/blocks-jr" }
+    ).url).toBe("http://localhost:3011/artifact.json");
+
+    expect(() => parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=https%3A%2F%2Fevil.example%2Fartifact.json" +
+        "&curriculumArtifactSha256=" + "a".repeat(64),
+      { baseUrl: "https://app.example/blocks-jr" }
+    )).toThrow(/origin is not allowed/);
+
+    expect(() => parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=https%3A%2F%2Fapp.example%2Fartifact.json" +
+        "&curriculumArtifactSha256=" + "a".repeat(64),
+      { baseUrl: "https://app.example/blocks-jr" }
+    )).toThrow(/origin is not allowed/);
+
+    expect(() => parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=%2Fartifact.json&curriculumArtifactSha256=" + "a".repeat(64),
+      { baseUrl: "https://app.example/blocks-jr" }
+    )).toThrow(/absolute URL/);
+  });
+
+  it("allows explicitly configured artifact origins", () => {
+    var request = parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=https%3A%2F%2Fcontent.robotical.io%2Fartifact.json" +
+        "&curriculumArtifactSha256=" + "a".repeat(64),
+      {
+        baseUrl: "https://app.example/blocks-jr",
+        allowedOrigins: ["https://content.robotical.io"],
+      }
+    );
+    expect(request.url).toBe("https://content.robotical.io/artifact.json");
+  });
+
+  it("requires payload integrity outside loopback development", () => {
+    expect(() => parseCurriculumArtifactRequest(
+      "?curriculumArtifactUrl=https%3A%2F%2Fcdn.sanity.io%2Fartifact.json",
+      {
+        baseUrl: "https://app.example/blocks-jr",
+        allowedOrigins: ["https://cdn.sanity.io"],
+      }
+    )).toThrow(/required outside local development/);
+  });
+
+  it("fetches, verifies and imports a package as a new local project", async () => {
+    var response = responseFor(validArtifact());
+    var body = await response.arrayBuffer();
+    var digest = sha256Hex(body);
+    var fetchMock = vi.fn().mockResolvedValue(response);
+    var result = await importCurriculumArtifactFromSearch(
+      "?curriculumArtifactUrl=https%3A%2F%2Fcdn.sanity.io%2Ffiles%2Fproject%2Fdataset%2Fwalking.json" +
+        "&curriculumArtifactSha256=" + digest,
+      {
+        baseUrl: "https://app.example/blocks-jr",
+        allowedOrigins: ["https://cdn.sanity.io"],
+        fetchImplementation: fetchMock,
+        projectVersion: "iOSv01",
+      }
+    );
+
+    expect(result).toEqual({ projectId: "42" });
+    expect(fetchMock).toHaveBeenCalledWith(
+      "https://cdn.sanity.io/files/project/dataset/walking.json",
+      expect.objectContaining({
+        credentials: "omit",
+        cache: "no-store",
+        referrerPolicy: "no-referrer",
+      })
+    );
+    expect(importPackageMock).toHaveBeenCalledTimes(1);
+    expect(importPackageMock.mock.calls[0][0].project.id).toBeUndefined();
+  });
+
+  it("does not write anything when the checksum is wrong", async () => {
+    var fetchMock = vi.fn().mockResolvedValue(responseFor(validArtifact()));
+    await expect(importCurriculumArtifactFromSearch(
+      "?curriculumArtifactUrl=https%3A%2F%2Fcdn.sanity.io%2Ffiles%2Fproject%2Fdataset%2Fwalking.json" +
+        "&curriculumArtifactSha256=" + "0".repeat(64),
+      {
+        baseUrl: "https://app.example/blocks-jr",
+        allowedOrigins: ["https://cdn.sanity.io"],
+        fetchImplementation: fetchMock,
+      }
+    )).rejects.toThrow(/checksum/);
+    expect(importPackageMock).not.toHaveBeenCalled();
+  });
+
+  it("does not write anything when a redirect crosses an allowed-origin boundary", async () => {
+    var fetchMock = vi.fn().mockResolvedValue(responseFor(validArtifact(), "https://evil.example/artifact.json"));
+    await expect(importCurriculumArtifactFromSearch(
+      "?curriculumArtifactUrl=https%3A%2F%2Fcdn.sanity.io%2Ffiles%2Fproject%2Fdataset%2Fwalking.json" +
+        "&curriculumArtifactSha256=" + "b".repeat(64),
+      {
+        baseUrl: "https://app.example/blocks-jr",
+        allowedOrigins: ["https://cdn.sanity.io"],
+        fetchImplementation: fetchMock,
+      }
+    )).rejects.toThrow(/redirect origin/);
+    expect(importPackageMock).not.toHaveBeenCalled();
+  });
+});