feat: release design system engine, studio and component contracts

packages/block-editor/test/image-preview.test.ts

@@ -3,24 +3,39 @@ import { showImageFallbacks } from "../src/image-preview.ts";
 
 test("image-disabled mode exposes safe alt text, proportions and reversible placeholders", () => {
   const displayed: any[] = [];
-  const images = [{ alt: '<b>Logo & name</b>', width: '320', height: '180' }, { alt: '', width: 'not a size', height: '99999' }].map(attributes => ({
+  const images = [
+    { alt: "<b>Logo & name</b>", width: "320", height: "180" },
+    { alt: "", width: "not a size", height: "99999" },
+  ].map((attributes) => ({
     getAttribute: (key: string) => (attributes as Record<string, string>)[key] ?? null,
     after: (element: unknown) => displayed.push(element),
   }));
   const canvas = {
     querySelectorAll: () => images,
-    createElement: () => ({ dataset: {}, style: {} as Record<string, string>, textContent: "", attributes: {} as Record<string, string>, setAttribute(key: string, value: string) { this.attributes[key] = value; }, remove() { const index = displayed.indexOf(this); if (index >= 0) displayed.splice(index, 1); } }),
+    createElement: () => ({
+      dataset: {},
+      style: {} as Record<string, string>,
+      textContent: "",
+      attributes: {} as Record<string, string>,
+      setAttribute(key: string, value: string) {
+        this.attributes[key] = value;
+      },
+      remove() {
+        const index = displayed.indexOf(this);
+        if (index >= 0) displayed.splice(index, 1);
+      },
+    }),
   } as unknown as Document;
   showImageFallbacks(canvas, true);
   expect(displayed).toHaveLength(2);
-  expect(displayed[0].textContent).toBe('<b>Logo & name</b>');
-  expect(displayed[0].attributes['aria-label']).toBe('<b>Logo & name</b>');
-  expect(displayed[0].style.aspectRatio).toBe('320/180');
-  expect(displayed[1].attributes['aria-hidden']).toBe('true');
+  expect(displayed[0].textContent).toBe("<b>Logo & name</b>");
+  expect(displayed[0].attributes["aria-label"]).toBe("<b>Logo & name</b>");
+  expect(displayed[0].style.aspectRatio).toBe("320/180");
+  expect(displayed[1].attributes["aria-hidden"]).toBe("true");
   expect(displayed[1].style.maxWidth).toBeUndefined();
   showImageFallbacks(canvas, true);
   expect(displayed).toHaveLength(2);
   showImageFallbacks(canvas, false);
   expect(displayed).toHaveLength(0);
-  expect(images[0]!.getAttribute('alt')).toBe('<b>Logo & name</b>');
+  expect(images[0]!.getAttribute("alt")).toBe("<b>Logo & name</b>");
 });