npm - @supernova-studio/client - Versions diffs - 0.47.58 → 0.47.60 - Mend

@supernova-studio/client 0.47.58 → 0.47.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.d.mts +312 -114
package/dist/index.d.ts +312 -114
package/dist/index.js +1002 -210
package/dist/index.js.map +1 -1
package/dist/index.mjs +1025 -233
package/dist/index.mjs.map +1 -1
package/package.json +1 -1
package/src/api/dto/documentation/publish.ts +10 -4
package/src/yjs/docs-editor/mock.ts +920 -144
package/src/yjs/version-room/frontend.ts +6 -3

package/src/yjs/docs-editor/mock.ts CHANGED Viewed

@@ -28,23 +28,42 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { richTextStyle: "Default" },
+          options: {
+            richTextStyle: "Default",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: false },
+          appearance: {
+            isEditorPresentationDifferent: false,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use rich text block to write text and add additional formatting to it.",
@@ -71,15 +90,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Heading 1", richTextStyle: "Title1" },
+          options: {
+            placeholder: "Heading 1",
+            richTextStyle: "Title1",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -87,7 +118,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use for main sections within the page, introducing broad topics or themes.",
@@ -114,15 +151,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Heading 2", richTextStyle: "Title2" },
+          options: {
+            placeholder: "Heading 2",
+            richTextStyle: "Title2",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -130,7 +179,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use for subheadings, indicating major subsections under the main sections.",
@@ -157,15 +212,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Heading 3", richTextStyle: "Title3" },
+          options: {
+            placeholder: "Heading 3",
+            richTextStyle: "Title3",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -173,7 +240,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use for further subsections, detailing specific topics within the major subsections.",
@@ -200,15 +273,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Heading 4", richTextStyle: "Title4" },
+          options: {
+            placeholder: "Heading 4",
+            richTextStyle: "Title4",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -216,7 +301,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use for sub-divisions, elaborating on details within the subsections.",
@@ -243,15 +334,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Heading 5", richTextStyle: "Title5" },
+          options: {
+            placeholder: "Heading 5",
+            richTextStyle: "Title5",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -259,7 +362,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use for nuanced details or specific sub-points within sub-divisions.",
@@ -286,15 +395,26 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "MultiRichText",
-          options: { multiRichTextStyle: "OL" },
+          options: {
+            multiRichTextStyle: "OL",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -302,7 +422,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Display a sequence of numbers or letters to indicate order.",
@@ -329,15 +455,26 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "MultiRichText",
-          options: { multiRichTextStyle: "UL" },
+          options: {
+            multiRichTextStyle: "UL",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -345,7 +482,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "A list of items displayed with bullet points without a specific sequence.",
@@ -359,6 +502,7 @@ const blocks: PageBlockDefinition[] = [
       showBlockHeaderInEditor: false,
     },
   },
   {
     id: "io.supernova.block.divider",
     name: "Divider",
@@ -367,8 +511,18 @@ const blocks: PageBlockDefinition[] = [
     icon: "https://cdn-assets.supernova.io/blocks/icons/divider.svg",
     searchKeywords: ["hr", "line", "rule", "separator"],
     item: {
-      properties: [{ id: "divider", name: "Divider", type: "Divider", options: {} }],
-      appearance: { isBordered: true, hasBackground: false },
+      properties: [
+        {
+          id: "divider",
+          name: "Divider",
+          type: "Divider",
+          options: {},
+        },
+      ],
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -387,7 +541,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "A thematic break or horizontal rule, often used to separate content or define a change in topic.",
@@ -414,15 +574,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Write a quote...", richTextStyle: "Quote" },
+          options: {
+            placeholder: "Write a quote...",
+            richTextStyle: "Quote",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -430,7 +602,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use a blockquote to set off a quotation or cited content from the main text.",
@@ -457,15 +635,27 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Highlight some information...", richTextStyle: "Callout" },
+          options: {
+            placeholder: "Highlight some information...",
+            richTextStyle: "Callout",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["text"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["text"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -473,7 +663,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use to highlight a section of text.",
@@ -500,15 +696,26 @@ const blocks: PageBlockDefinition[] = [
           id: "image",
           name: "Image",
           type: "Image",
-          options: { allowCaption: true },
+          options: {
+            allowCaption: true,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["image"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["image"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -516,7 +723,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use to display an image or Figma image.",
@@ -544,27 +757,48 @@ const blocks: PageBlockDefinition[] = [
           id: "block.links.property.image",
           name: "Image",
           type: "Image",
-          options: { aspectRatio: "Landscape", allowCaption: false },
+          options: {
+            aspectRatio: "Landscape",
+            allowCaption: false,
+          },
           variantOptions: {
-            iconOnTop: { width: "Icon", aspectRatio: "Square" },
-            imageOnLeft: { width: "Medium" },
-            iconOnLeft: { width: "Icon", aspectRatio: "Square" },
+            iconOnTop: {
+              width: "Icon",
+              aspectRatio: "Square",
+            },
+            imageOnLeft: {
+              width: "Medium",
+            },
+            iconOnLeft: {
+              width: "Icon",
+              aspectRatio: "Square",
+            },
           },
         },
         {
           id: "block.links.property.title",
           name: "Title",
           type: "Text",
-          options: { textStyle: "Title5", placeholder: "Add title" },
+          options: {
+            textStyle: "Title5",
+            placeholder: "Add title",
+          },
         },
         {
           id: "block.links.property.description",
           name: "Short description",
           type: "Text",
-          options: { textStyle: "Default", color: "NeutralFaded", placeholder: "Add description" },
+          options: {
+            textStyle: "Default",
+            color: "NeutralFaded",
+            placeholder: "Add description",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "imageOnTop",
@@ -578,7 +812,7 @@ const blocks: PageBlockDefinition[] = [
             gap: "Medium",
           },
           maxColumns: 4,
-          defaultColumns: 1,
+          defaultColumns: 3,
           appearance: {},
         },
         {
@@ -659,13 +893,21 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "imageOnTop",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: -1, allowLinks: true } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: -1,
+        allowLinks: true,
+        newItemLabel: "Add shortcut",
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use link block to create single or multiple links to places in or out of your documentation.",
         documentationLink:
           "https://learn.supernova.io/latest/documentation/types-of-blocks/links/shortcuts/general-jVfNifo4",
       },
+      newItemLabel: "Add shortcut",
     },
     appearance: {
       isBordered: true,
@@ -695,12 +937,21 @@ const blocks: PageBlockDefinition[] = [
           },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["embed"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["embed"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -708,7 +959,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Embed a Figma canvas or prototype to your documentation.",
@@ -735,15 +992,28 @@ const blocks: PageBlockDefinition[] = [
           id: "embed",
           name: "Storybook URL",
           type: "Storybook",
-          options: { allowCaption: true, allowResize: true, defaultHeight: 400 },
+          options: {
+            allowCaption: true,
+            allowResize: true,
+            defaultHeight: 400,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["embed"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["embed"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -751,7 +1021,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Embed a Storybook story to your documentation.",
@@ -786,12 +1062,21 @@ const blocks: PageBlockDefinition[] = [
           },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["embed"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["embed"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -799,7 +1084,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Embed a YouTube video to your documentation.",
@@ -828,40 +1119,55 @@ const blocks: PageBlockDefinition[] = [
           name: "Lottie URL",
           type: "URL",
           description: "Add URL to your Lottie animation file. We support .json and .lottie file extensions.",
-          options: { urlValidationRegex: "^(http|https)://.*.(json|lottie)$" },
+          options: {
+            urlValidationRegex: "^(http|https)://.*.(json|lottie)$",
+          },
         },
         {
           id: "height",
           name: "Height",
           type: "Number",
-          options: { defaultValue: 270 },
+          options: {
+            defaultValue: 270,
+          },
         },
         {
           id: "width",
           name: "Width",
           type: "Number",
-          options: { defaultValue: 400 },
+          options: {
+            defaultValue: 400,
+          },
         },
         {
           id: "autoplay",
           name: "Autoplay",
           type: "Boolean",
-          options: { defaultValue: true },
+          options: {
+            defaultValue: true,
+          },
         },
         {
           id: "loop",
           name: "Loop",
           type: "Boolean",
-          options: { defaultValue: true },
+          options: {
+            defaultValue: true,
+          },
         },
         {
           id: "playerControls",
           name: "Show player controls",
           type: "Boolean",
-          options: { defaultValue: true },
+          options: {
+            defaultValue: true,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -882,7 +1188,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Embed a Lottie animation to your documentation.",
@@ -918,7 +1230,10 @@ const blocks: PageBlockDefinition[] = [
           },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -937,7 +1252,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Embed any page to your documentation as an iframe.",
@@ -965,10 +1286,15 @@ const blocks: PageBlockDefinition[] = [
           id: "markdownUrl",
           name: "Markdown URL",
           type: "Markdown",
-          options: { urlValidationRegex: "^(https?://)?(www\\.)?.+\\.md(\\?.*)?$" },
+          options: {
+            urlValidationRegex: "^(https?://)?(www\\.)?.+\\.md(\\?.*)?$",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "plain",
@@ -1018,7 +1344,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "plain",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Render any markdown file directly inside of your documentation.",
@@ -1041,13 +1373,29 @@ const blocks: PageBlockDefinition[] = [
     icon: "https://cdn-assets.supernova.io/blocks/icons/v2/table.svg",
     searchKeywords: ["grid", "data", "spreadsheet", "api"],
     item: {
-      properties: [{ id: "table", name: "Table", type: "Table", options: {} }],
-      appearance: { isBordered: true, hasBackground: false },
+      properties: [
+        {
+          id: "table",
+          name: "Table",
+          type: "Table",
+          options: {},
+        },
+      ],
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["table"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["table"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1055,7 +1403,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Use for displaying data in a tabular format.",
@@ -1092,17 +1446,34 @@ const blocks: PageBlockDefinition[] = [
           id: "tokens",
           name: "Tokens",
           type: "Token",
-          options: { renderLayoutAs: "List", defaultTheme: "none", defaultValuePreview: "Split" },
-          variantOptions: { grid: { renderLayoutAs: "Grid" } },
+          options: {
+            renderLayoutAs: "List",
+            defaultTheme: "none",
+            defaultValuePreview: "Split",
+          },
+          variantOptions: {
+            grid: {
+              renderLayoutAs: "Grid",
+            },
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "table",
           name: "Table",
           image: "https://cdn-assets.supernova.io/blocks/variants/tokens-table.svg",
-          layout: { type: "Column", children: ["tokens"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["tokens"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1111,7 +1482,13 @@ const blocks: PageBlockDefinition[] = [
           id: "grid",
           name: "Grid",
           image: "https://cdn-assets.supernova.io/blocks/variants/tokens-grid.svg",
-          layout: { type: "Column", children: ["tokens"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["tokens"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 4,
           defaultColumns: 1,
           appearance: {},
@@ -1119,7 +1496,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "table",
     },
-    behavior: { dataType: "Token", entities: { selectionType: "EntityAndGroup", maxSelected: 0 } },
+    behavior: {
+      dataType: "Token",
+      entities: {
+        selectionType: "EntityAndGroup",
+        maxSelected: 0,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Show a group of design tokens. Automatically display all subgroups too.",
@@ -1147,26 +1530,50 @@ const blocks: PageBlockDefinition[] = [
           id: "tokens",
           name: "Tokens",
           type: "Token",
-          options: { allowedTypes: ["Color"], allowPropertySelection: false, allowThemeSelection: true },
+          options: {
+            allowedTypes: ["Color"],
+            allowPropertySelection: false,
+            allowThemeSelection: true,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
           image: "https://cdn-assets.supernova.io/blocks/variants/tokens-color-stack.svg",
-          layout: { type: "Column", children: ["tokens"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["tokens"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 2,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Token", entities: { selectionType: "EntityAndGroup", maxSelected: 0 } },
+    behavior: {
+      dataType: "Token",
+      entities: {
+        selectionType: "EntityAndGroup",
+        maxSelected: 0,
+      },
+    },
     editorOptions: {
-      onboarding: { helpText: "The best way to display colors", documentationLink: "https://learn.supernova.io" },
+      onboarding: {
+        helpText: "The best way to display colors",
+        documentationLink: "https://learn.supernova.io",
+      },
     },
     appearance: {
       isBordered: true,
@@ -1188,10 +1595,17 @@ const blocks: PageBlockDefinition[] = [
           id: "tokens",
           name: "Tokens",
           type: "Token",
-          options: { allowedTypes: ["Color"], allowPropertySelection: false, allowThemeSelection: false },
+          options: {
+            allowedTypes: ["Color"],
+            allowPropertySelection: false,
+            allowThemeSelection: false,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -1199,15 +1613,29 @@ const blocks: PageBlockDefinition[] = [
           image: "https://cdn-assets.supernova.io/blocks/variants/contrast-grid-large.svg",
           description:
             "Visualize accessibility of your colors by automatically calculating their color contrast ratio.",
-          layout: { type: "Column", children: ["tokens"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["tokens"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Token", entities: { selectionType: "EntityAndGroup", maxSelected: 0 } },
+    behavior: {
+      dataType: "Token",
+      entities: {
+        selectionType: "EntityAndGroup",
+        maxSelected: 0,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Visualize accessibility of your colors by automatically calculating their color contrast ratio.",
@@ -1229,13 +1657,29 @@ const blocks: PageBlockDefinition[] = [
     icon: "https://cdn-assets.supernova.io/blocks/icons/code.svg",
     searchKeywords: ["code"],
     item: {
-      properties: [{ id: "code", name: "Code", type: "Code", options: {} }],
-      appearance: { isBordered: true, hasBackground: false },
+      properties: [
+        {
+          id: "code",
+          name: "Code",
+          type: "Code",
+          options: {},
+        },
+      ],
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
-          layout: { type: "Column", children: ["code"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["code"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1243,8 +1687,18 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
-    editorOptions: { onboarding: { helpText: "Code descriptor." } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
+    editorOptions: {
+      onboarding: {
+        helpText: "Code descriptor.",
+      },
+    },
     appearance: {
       isBordered: false,
       hasBackground: false,
@@ -1265,22 +1719,39 @@ const blocks: PageBlockDefinition[] = [
           id: "code",
           name: "Code",
           type: "CodeSandbox",
-          options: { renderLayoutAs: "PreviewOnTop" },
+          options: {
+            renderLayoutAs: "PreviewOnTop",
+          },
           variantOptions: {
-            codeTop: { renderLayoutAs: "PreviewOnBottom" },
-            codeLeft: { renderLayoutAs: "PreviewOnRight" },
-            codeRight: { renderLayoutAs: "PreviewOnLeft" },
+            codeTop: {
+              renderLayoutAs: "PreviewOnBottom",
+            },
+            codeLeft: {
+              renderLayoutAs: "PreviewOnRight",
+            },
+            codeRight: {
+              renderLayoutAs: "PreviewOnLeft",
+            },
           },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "codeBottom",
           name: "Full width, code bottom",
           image: "https://cdn-assets.supernova.io/blocks/variants/react-code-bottom.svg",
           description: "Full-width block of code, with a preview on top.",
-          layout: { type: "Column", children: ["code"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["code"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1290,7 +1761,13 @@ const blocks: PageBlockDefinition[] = [
           name: "Full width, code top",
           image: "https://cdn-assets.supernova.io/blocks/variants/react-code-top.svg",
           description: "Full-width block of code, with a preview on bottom.",
-          layout: { type: "Column", children: ["code"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["code"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1300,7 +1777,13 @@ const blocks: PageBlockDefinition[] = [
           name: "Side by side, code left",
           image: "https://cdn-assets.supernova.io/blocks/variants/react-code-left.svg",
           description: "Side-by-side preview and code, with code on the left.",
-          layout: { type: "Column", children: ["code"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["code"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1310,7 +1793,13 @@ const blocks: PageBlockDefinition[] = [
           name: "Side by side, code right",
           image: "https://cdn-assets.supernova.io/blocks/variants/react-code-right.svg",
           description: "Side-by-side preview and code, with code on the right.",
-          layout: { type: "Column", children: ["code"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["code"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1318,7 +1807,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "codeBottom",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Display rendered code example",
@@ -1341,15 +1836,31 @@ const blocks: PageBlockDefinition[] = [
     icon: "https://cdn-assets.supernova.io/blocks/icons/v2/assets.svg",
     searchKeywords: ["icons", "illustrations", "grid", "svg", "logos"],
     item: {
-      properties: [{ id: "assets", name: "Assets", type: "Asset", options: {} }],
-      appearance: { isBordered: true, hasBackground: false },
+      properties: [
+        {
+          id: "assets",
+          name: "Assets",
+          type: "Asset",
+          options: {},
+        },
+      ],
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Simple grid",
           image: "https://cdn-assets.supernova.io/blocks/variants/assets-simple-grid.svg",
           description: "A simple grid of assets. Both the title and description are displayed below the preview.",
-          layout: { type: "Column", children: ["assets"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["assets"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 8,
           defaultColumns: 1,
           appearance: {},
@@ -1359,25 +1870,47 @@ const blocks: PageBlockDefinition[] = [
           name: "Square grid",
           image: "https://cdn-assets.supernova.io/blocks/variants/assets-square-grid.svg",
           description: "Bordered square grid tailored for displaying icon assets. Only the title is displayed.",
-          layout: { type: "Column", children: ["assets"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["assets"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 8,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
         {
           id: "borderless-grid",
           name: "Borderless grid",
           image: "https://cdn-assets.supernova.io/blocks/variants/assets-borderless-grid.svg",
           description: "Borderless grid, perfect for displaying assets of the same height. Only the title is visible.",
-          layout: { type: "Column", children: ["assets"], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: ["assets"],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 8,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Asset", entities: { selectionType: "EntityAndGroup", maxSelected: 0 } },
+    behavior: {
+      dataType: "Asset",
+      entities: {
+        selectionType: "EntityAndGroup",
+        maxSelected: 0,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Display a grid of icons or illustrations.",
@@ -1408,7 +1941,10 @@ const blocks: PageBlockDefinition[] = [
           options: {},
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "bordered",
@@ -1445,7 +1981,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "bordered",
     },
-    behavior: { dataType: "FigmaNode", entities: { selectionType: "Entity", maxSelected: 0 } },
+    behavior: {
+      dataType: "FigmaNode",
+      entities: {
+        selectionType: "Entity",
+        maxSelected: 0,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Generate images from Figma layers",
@@ -1469,14 +2011,23 @@ const blocks: PageBlockDefinition[] = [
     searchKeywords: ["version", "changelog", "history"],
     item: {
       properties: [],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
           name: "Default",
           image: "https://cdn-assets.supernova.io/blocks/variants/release-notes-2.svg",
           description: "Show formatted release notes from all previously released versions.",
-          layout: { type: "Column", children: [], columnAlign: "Start", columnResizing: "Fill", gap: "Medium" },
+          layout: {
+            type: "Column",
+            children: [],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
           maxColumns: 1,
           defaultColumns: 1,
           appearance: {},
@@ -1484,7 +2035,13 @@ const blocks: PageBlockDefinition[] = [
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Item", items: { numberOfItems: 1, allowLinks: false } },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: 1,
+        allowLinks: false,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Show formatted release notes from all previously released versions.",
@@ -1510,22 +2067,31 @@ const blocks: PageBlockDefinition[] = [
           id: "components",
           name: "Components",
           type: "Component",
-          options: { renderLayoutAs: "List" },
+          options: {
+            renderLayoutAs: "List",
+          },
         },
         {
           id: "title",
           name: "Title",
           type: "Text",
-          options: { defaultValue: "Component checklist" },
+          options: {
+            defaultValue: "Component checklist",
+          },
         },
         {
           id: "showDescription",
           name: "Show description",
           type: "Boolean",
-          options: { defaultValue: true },
+          options: {
+            defaultValue: true,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -1540,12 +2106,20 @@ const blocks: PageBlockDefinition[] = [
           },
           maxColumns: 1,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Component", entities: { selectionType: "Entity", maxSelected: 1 } },
+    behavior: {
+      dataType: "Component",
+      entities: {
+        selectionType: "Entity",
+        maxSelected: 1,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Highlight specific component properties",
@@ -1573,16 +2147,23 @@ const blocks: PageBlockDefinition[] = [
           id: "components",
           name: "Components",
           type: "Component",
-          options: { renderLayoutAs: "Table" },
+          options: {
+            renderLayoutAs: "Table",
+          },
         },
         {
           id: "showLastUpdatedColumn",
           name: "Show last updated column",
           type: "Boolean",
-          options: { defaultValue: true },
+          options: {
+            defaultValue: true,
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -1597,12 +2178,20 @@ const blocks: PageBlockDefinition[] = [
           },
           maxColumns: 1,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Component", entities: { selectionType: "Group", maxSelected: 1 } },
+    behavior: {
+      dataType: "Component",
+      entities: {
+        selectionType: "Group",
+        maxSelected: 1,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Show an overview of all your components",
@@ -1630,10 +2219,15 @@ const blocks: PageBlockDefinition[] = [
           id: "components",
           name: "Components",
           type: "Component",
-          options: { renderLayoutAs: "List" },
+          options: {
+            renderLayoutAs: "List",
+          },
         },
       ],
-      appearance: { isBordered: true, hasBackground: false },
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
       variants: [
         {
           id: "default",
@@ -1648,12 +2242,20 @@ const blocks: PageBlockDefinition[] = [
           },
           maxColumns: 1,
           defaultColumns: 1,
-          appearance: { isEditorPresentationDifferent: true },
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
         },
       ],
       defaultVariantKey: "default",
     },
-    behavior: { dataType: "Component", entities: { selectionType: "Entity", maxSelected: 1 } },
+    behavior: {
+      dataType: "Component",
+      entities: {
+        selectionType: "Entity",
+        maxSelected: 1,
+      },
+    },
     editorOptions: {
       onboarding: {
         helpText: "Show component health and additional attributes",
@@ -1668,4 +2270,178 @@ const blocks: PageBlockDefinition[] = [
       showBlockHeaderInEditor: false,
     },
   },
+  {
+    id: "io.supernova.block.do-dont-guidelines",
+    name: "Guidelines",
+    description: "Do/Don’t rules and best practices.",
+    category: "Guidelines",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/guidelines.svg",
+    searchKeywords: ["dont", "caution", "rules"],
+    item: {
+      properties: [
+        {
+          id: "block.do-dont-guidelines.property.image",
+          name: "Image",
+          type: "Image",
+          options: {
+            allowCaption: false,
+          },
+        },
+        {
+          id: "block.do-dont-guidelines.property.type",
+          name: "Type",
+          type: "SingleSelect",
+          options: {
+            defaultChoice: "do",
+            choices: [
+              {
+                value: "do",
+                name: "Do",
+                color: "Green",
+                icon: "CheckCircle",
+              },
+              {
+                value: "dont",
+                name: "Don't",
+                color: "Red",
+                icon: "CrossCircle",
+              },
+              {
+                value: "caution",
+                name: "Caution",
+                color: "Orange",
+                icon: "Alert",
+              },
+            ],
+            singleSelectStyle: "SegmentedControl",
+          },
+        },
+        {
+          id: "block.do-dont-guidelines.property.description",
+          name: "Description",
+          type: "Text",
+          options: {
+            textStyle: "Default",
+            color: "Neutral",
+            placeholder: "Add description",
+          },
+        },
+      ],
+      appearance: {
+        isBordered: true,
+        hasBackground: false,
+      },
+      variants: [
+        {
+          id: "simple",
+          name: "Simple",
+          image: "https://cdn-assets.supernova.io/blocks/variants/guidelines-simple.svg",
+          description: "With a minimalist badge at the top, this design is great for content guidelines.",
+          layout: {
+            type: "Column",
+            children: [
+              "block.do-dont-guidelines.property.type",
+              "block.do-dont-guidelines.property.image",
+              "block.do-dont-guidelines.property.description",
+            ],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
+          maxColumns: 3,
+          defaultColumns: 2,
+          appearance: {},
+        },
+        {
+          id: "prominent",
+          name: "Prominent",
+          image: "https://cdn-assets.supernova.io/blocks/variants/guidelines-prominent.svg",
+          description: "Recommended when you need guidelines that need to stand out.",
+          layout: {
+            type: "Column",
+            children: [
+              "block.do-dont-guidelines.property.type",
+              "block.do-dont-guidelines.property.image",
+              "block.do-dont-guidelines.property.description",
+            ],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
+          maxColumns: 3,
+          defaultColumns: 1,
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
+        },
+        {
+          id: "contained",
+          name: "Contained",
+          image: "https://cdn-assets.supernova.io/blocks/variants/guidelines-contained.svg",
+          description: "Perfect for component guidelines with spacious images.",
+          layout: {
+            type: "Column",
+            children: [
+              "block.do-dont-guidelines.property.type",
+              "block.do-dont-guidelines.property.image",
+              "block.do-dont-guidelines.property.description",
+            ],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
+          maxColumns: 3,
+          defaultColumns: 1,
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
+        },
+        {
+          id: "side-border",
+          name: "Side border",
+          image: "https://cdn-assets.supernova.io/blocks/variants/guidelines-side-border.svg",
+          description: "The side border makes this variant well-suited for longer text guidelines.",
+          layout: {
+            type: "Column",
+            children: [
+              "block.do-dont-guidelines.property.type",
+              "block.do-dont-guidelines.property.image",
+              "block.do-dont-guidelines.property.description",
+            ],
+            columnAlign: "Start",
+            columnResizing: "Fill",
+            gap: "Medium",
+          },
+          maxColumns: 3,
+          defaultColumns: 1,
+          appearance: {
+            isEditorPresentationDifferent: true,
+          },
+        },
+      ],
+      defaultVariantKey: "simple",
+    },
+    behavior: {
+      dataType: "Item",
+      items: {
+        numberOfItems: -1,
+        allowLinks: false,
+        newItemLabel: "Add guideline",
+      },
+    },
+    editorOptions: {
+      onboarding: {
+        helpText: "Use link block to document your Do/Don't guidelines for your components and patterns.",
+        documentationLink:
+          "https://learn.supernova.io/latest/documentation/types-of-blocks/links/shortcuts/general-jVfNifo4",
+      },
+      newItemLabel: "Add guideline",
+    },
+    appearance: {
+      isBordered: true,
+      hasBackground: false,
+      isEditorPresentationDifferent: false,
+      showBlockHeaderInEditor: false,
+    },
+  },
 ];