@supernova-studio/client 0.23.0 → 0.25.0

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

@@ -19,7 +19,6 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           options: {
-            placeholder: "Start writing with plain text",
             richTextStyle: "Default",
           },
         },
@@ -73,7 +72,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 1",
     description: "Main sections within the page",
     category: "Text",
-    searchKeywords: ["heading"],
+    searchKeywords: ["heading", "h1"],
     item: {
       properties: [
         {
@@ -135,7 +134,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 2",
     description: "Section subheadings",
     category: "Text",
-    searchKeywords: ["heading"],
+    searchKeywords: ["heading", "h2"],
     item: {
       properties: [
         {
@@ -197,7 +196,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 3",
     description: "Further subsections",
     category: "Text",
-    searchKeywords: ["heading"],
+    searchKeywords: ["heading", "h3"],
     item: {
       properties: [
         {
@@ -259,7 +258,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 4",
     description: "Details in subsections",
     category: "Text",
-    searchKeywords: ["heading"],
+    searchKeywords: ["heading", "h4"],
     item: {
       properties: [
         {
@@ -321,7 +320,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 5",
     description: "Nuanced details or sub-points",
     category: "Text",
-    searchKeywords: ["heading"],
+    searchKeywords: ["heading", "h5"],
     item: {
       properties: [
         {
@@ -444,7 +443,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Unordered list",
     description: "A list with bullet points",
     category: "Text",
-    searchKeywords: ["ul"],
+    searchKeywords: ["ul", "bullet points"],
     item: {
       properties: [
         {
@@ -572,7 +571,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           options: {
-            placeholder: "Empty quote",
+            placeholder: "Write a quote...",
             richTextStyle: "Quote",
           },
         },
@@ -634,6 +633,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           options: {
+            placeholder: "Highlight some information...",
             richTextStyle: "Callout",
           },
         },
@@ -752,29 +752,11 @@ const blocks: PageBlockDefinition[] = [
     searchKeywords: [],
     item: {
       properties: [
-        {
-          id: "block.links.property.title",
-          name: "Title",
-          type: "Text",
-          options: {
-            textStyle: "Title5",
-          },
-        },
-        {
-          id: "block.links.property.description",
-          name: "Short description",
-          type: "Text",
-          options: {
-            textStyle: "Default",
-            color: "NeutralFaded",
-          },
-        },
         {
           id: "block.links.property.image",
           name: "Image",
           type: "Image",
           options: {
-            width: "Medium",
             aspectRatio: "Landscape",
             allowCaption: false,
           },
@@ -789,6 +771,25 @@ const blocks: PageBlockDefinition[] = [
             },
           },
         },
+        {
+          id: "block.links.property.title",
+          name: "Title",
+          type: "Text",
+          options: {
+            textStyle: "Title5",
+            placeholder: "Add title",
+          },
+        },
+        {
+          id: "block.links.property.description",
+          name: "Short description",
+          type: "Text",
+          options: {
+            textStyle: "Default",
+            color: "NeutralFaded",
+            placeholder: "Add description",
+          },
+        },
       ],
       appearance: {
         isBordered: false,
@@ -798,7 +799,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "imageOnTop",
           name: "Image on top",
-          image: "assets/variant-image-on-top.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/shortcuts-image-on-top.svg",
           layout: {
             type: "Column",
             children: ["block.links.property.image", "block.links.property.title", "block.links.property.description"],
@@ -817,7 +818,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "imageOnLeft",
           name: "Image on left",
-          image: "assets/variant-image-on-left.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/shortcuts-leading-image.svg",
           layout: {
             type: "Row",
             children: [
@@ -851,7 +852,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "iconOnTop",
           name: "Icon on top",
-          image: "assets/variant-icon-on-top.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/shortcuts-icon-on-top.svg",
           layout: {
             type: "Column",
             children: ["block.links.property.image", "block.links.property.title", "block.links.property.description"],
@@ -870,7 +871,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "iconOnLeft",
           name: "Icon on left",
-          image: "assets/variant-icon-on-left.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/shortcuts-leading-icon.svg",
           layout: {
             type: "Row",
             children: [
@@ -971,8 +972,8 @@ const blocks: PageBlockDefinition[] = [
     behavior: {
       dataType: "Token",
       entities: {
-        selectionType: "Group",
-        maxSelected: 2,
+        selectionType: "EntityAndGroup",
+        maxSelected: 0,
       },
     },
     editorOptions: {
@@ -1129,8 +1130,23 @@ const blocks: PageBlockDefinition[] = [
           name: "Lottie URL",
           type: "URL",
           options: {
-            urlValidationRegex:
-              "^(https?:\\/\\/)?([\\w\\d\\-\\.]+)\\.([\\w]+)(\\/[\\w\\d_\\-\\.\\/]*)?(\\.json|\\.lottie)$\n",
+            urlValidationRegex: "^(http|https)://.*.(json|lottie)$",
+          },
+        },
+        {
+          id: "height",
+          name: "Height",
+          type: "Number",
+          options: {
+            defaultValue: 270,
+          },
+        },
+        {
+          id: "width",
+          name: "Width",
+          type: "Number",
+          options: {
+            defaultValue: 400,
           },
         },
         {
@@ -1149,6 +1165,14 @@ const blocks: PageBlockDefinition[] = [
             defaultValue: true,
           },
         },
+        {
+          id: "playerControls",
+          name: "Show player controls",
+          type: "Boolean",
+          options: {
+            defaultValue: true,
+          },
+        },
       ],
       appearance: {
         isBordered: false,
@@ -1158,9 +1182,10 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "default",
           name: "Default",
+          image: "https://cdn-assets.supernova.io/blocks/variants/lottie.svg",
           layout: {
             type: "Column",
-            children: ["url", "autoplay", "loop"],
+            children: ["url", "height", "width", "autoplay", "loop", "playerControls"],
             columnAlign: "Start",
             columnResizing: "Fill",
             gap: "Medium",
@@ -1170,7 +1195,7 @@ const blocks: PageBlockDefinition[] = [
           appearance: {
             isBordered: false,
             hasBackground: false,
-            isEditorPresentationDifferent: false,
+            isEditorPresentationDifferent: true,
           },
         },
       ],
@@ -1334,7 +1359,9 @@ const blocks: PageBlockDefinition[] = [
           id: "markdownUrl",
           name: "Markdown URL",
           type: "Markdown",
-          options: {},
+          options: {
+            urlValidationRegex: "^(https?://)?(www.)?.+.md$",
+          },
         },
       ],
       appearance: {
@@ -1345,7 +1372,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "plain",
           name: "Plain",
-          image: "assets/variant-plain.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/markdown-plain.svg",
           layout: {
             type: "Column",
             children: ["markdownUrl"],
@@ -1364,7 +1391,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "bordered",
           name: "Bordered",
-          image: "assets/variant-Bordered.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/markdown-bordered.svg",
           layout: {
             type: "Column",
             children: ["markdownUrl"],
@@ -1383,7 +1410,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "boxed",
           name: "Boxed",
-          image: "assets/variant-boxed.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/markdown-boxed.svg",
           layout: {
             type: "Column",
             children: ["markdownUrl"],
@@ -1495,7 +1522,7 @@ const blocks: PageBlockDefinition[] = [
           options: {
             renderLayoutAs: "List",
             defaultTheme: "none",
-            defaultValuePreview: "splitView",
+            defaultValuePreview: "Split",
           },
         },
       ],
@@ -1506,8 +1533,8 @@ const blocks: PageBlockDefinition[] = [
       variants: [
         {
           id: "table",
-          name: "Table Row",
-          image: "assets/variant-table.png",
+          name: "Table row",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-table.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1525,8 +1552,8 @@ const blocks: PageBlockDefinition[] = [
         },
         {
           id: "grid",
-          name: "Grid Item",
-          image: "assets/variant-grid.png",
+          name: "Grid item",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-grid.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1545,7 +1572,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "color-stack",
           name: "Color stack item",
-          image: "assets/variant-color-stack.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-color-stack.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1588,7 +1615,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token list",
     description: "Show a list of design tokens",
     category: "Tokens",
-    searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme", "accessibility", "contrast"],
+    searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
         {
@@ -1598,7 +1625,7 @@ const blocks: PageBlockDefinition[] = [
           options: {
             renderLayoutAs: "List",
             defaultTheme: "none",
-            defaultValuePreview: "splitView",
+            defaultValuePreview: "Split",
           },
           variantOptions: {
             grid: {
@@ -1615,7 +1642,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "table",
           name: "Table",
-          image: "assets/variant-table.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-table.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1634,7 +1661,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "grid",
           name: "Grid",
-          image: "assets/variant-grid.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-grid.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1653,26 +1680,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "color-stack",
           name: "Color stack",
-          image: "assets/variant-color-stack.png",
-          layout: {
-            type: "Column",
-            children: ["tokens"],
-            columnAlign: "Start",
-            columnResizing: "Fill",
-            gap: "Medium",
-          },
-          maxColumns: 1,
-          defaultColumns: 1,
-          appearance: {
-            isBordered: false,
-            hasBackground: false,
-            isEditorPresentationDifferent: false,
-          },
-        },
-        {
-          id: "color-contrast-grid",
-          name: "Color contrast grid",
-          image: "assets/variant-color-contrast-grid.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-color-stack.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1716,7 +1724,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token group",
     description: "Show a group of design tokens",
     category: "Tokens",
-    searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme", "accessibility", "contrast"],
+    searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
         {
@@ -1726,7 +1734,7 @@ const blocks: PageBlockDefinition[] = [
           options: {
             renderLayoutAs: "List",
             defaultTheme: "none",
-            defaultValuePreview: "splitView",
+            defaultValuePreview: "Split",
           },
           variantOptions: {
             grid: {
@@ -1743,7 +1751,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "table",
           name: "Table",
-          image: "assets/variant-table.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-table.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1762,7 +1770,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "grid",
           name: "Grid",
-          image: "assets/variant-grid.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-grid.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1781,7 +1789,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "color-stack",
           name: "Color stack",
-          image: "assets/variant-color-stack.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/tokens-color-stack.svg",
           layout: {
             type: "Column",
             children: ["tokens"],
@@ -1797,25 +1805,6 @@ const blocks: PageBlockDefinition[] = [
             isEditorPresentationDifferent: false,
           },
         },
-        {
-          id: "color-contrast-grid",
-          name: "Color contrast grid",
-          image: "assets/variant-color-contrast-grid.png",
-          layout: {
-            type: "Column",
-            children: ["tokens"],
-            columnAlign: "Start",
-            columnResizing: "Fill",
-            gap: "Medium",
-          },
-          maxColumns: 1,
-          defaultColumns: 1,
-          appearance: {
-            isBordered: false,
-            hasBackground: false,
-            isEditorPresentationDifferent: false,
-          },
-        },
       ],
       defaultVariantKey: "table",
     },
@@ -1828,8 +1817,7 @@ const blocks: PageBlockDefinition[] = [
     },
     editorOptions: {
       onboarding: {
-        helpText:
-          "Show a group of design tokens. You can use this block to create a list of colors, typography, spacing, grid, or any other token type.",
+        helpText: "Show a group of design tokens. Automatically display all subgroups too.",
         documentationLink:
           "https://learn.supernova.io/latest/documentation/types-of-blocks/token/tokens/general-84NRgxGl#section-token-group-09",
       },
@@ -1933,7 +1921,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "codeBottom",
           name: "Full width, code bottom",
-          image: "thumbnails/RenderCode_CodeBottom.png",
+          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",
@@ -1953,7 +1941,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "codeTop",
           name: "Full width, code top",
-          image: "thumbnails/RenderCode_CodeTop.png",
+          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",
@@ -1973,7 +1961,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "codeLeft",
           name: "Side by side, code left",
-          image: "thumbnails/RenderCode_CodeLeft.png",
+          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",
@@ -1993,7 +1981,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "codeRight",
           name: "Side by side, code right",
-          image: "thumbnails/RenderCode_CodeRight.png",
+          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",
@@ -2112,7 +2100,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "default",
           name: "Simple grid",
-          image: "assets/variant-default.png",
+          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",
@@ -2132,7 +2120,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "square-grid",
           name: "Square grid",
-          image: "assets/variant-square-grid.png",
+          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",
@@ -2152,7 +2140,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "borderless-grid",
           name: "Borderless grid",
-          image: "assets/variant-color-stack.png",
+          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",
@@ -2175,7 +2163,7 @@ const blocks: PageBlockDefinition[] = [
     behavior: {
       dataType: "Asset",
       entities: {
-        selectionType: "Entity",
+        selectionType: "EntityAndGroup",
         maxSelected: 0,
       },
     },
@@ -2192,7 +2180,7 @@ const blocks: PageBlockDefinition[] = [
     },
   },
   {
-    id: "io.supernova.block.figma-nodes",
+    id: "io.supernova.block.figma-frames",
     name: "Figma frames",
     description: "Display Figma frames as images",
     category: "Figma",
@@ -2200,9 +2188,9 @@ const blocks: PageBlockDefinition[] = [
     item: {
       properties: [
         {
-          id: "figmaFrames",
-          name: "Figma Frames (tbd)",
-          type: "Asset",
+          id: "figmaNodes",
+          name: "Figma Frames",
+          type: "FigmaNode",
           options: {},
         },
       ],
@@ -2214,11 +2202,11 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "bordered",
           name: "Bordered",
-          image: "assets/variant-default.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/figma-nodes-boxed.svg",
           description: "Tiles with background and border, great for larger sets of frames.",
           layout: {
             type: "Column",
-            children: ["figmaFrames"],
+            children: ["figmaNodes"],
             columnAlign: "Start",
             columnResizing: "Fill",
             gap: "Medium",
@@ -2234,11 +2222,11 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "plain",
           name: "Plain",
-          image: "assets/variant-square-grid.png",
+          image: "https://cdn-assets.supernova.io/blocks/variants/figma-nodes-plain.svg",
           description: "Frame as it is in Figma with no extra formatting, great for single images.",
           layout: {
             type: "Column",
-            children: ["figmaFrames"],
+            children: ["figmaNodes"],
             columnAlign: "Start",
             columnResizing: "Fill",
             gap: "Medium",
@@ -2289,6 +2277,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "default",
           name: "Default",
+          image: "https://cdn-assets.supernova.io/blocks/variants/release-notes.svg",
           layout: {
             type: "Column",
             children: [],
@@ -2301,7 +2290,7 @@ const blocks: PageBlockDefinition[] = [
           appearance: {
             isBordered: false,
             hasBackground: false,
-            isEditorPresentationDifferent: false,
+            isEditorPresentationDifferent: true,
           },
         },
       ],
@@ -2340,6 +2329,22 @@ const blocks: PageBlockDefinition[] = [
             renderLayoutAs: "List",
           },
         },
+        {
+          id: "showDescription",
+          name: "Show description",
+          type: "Boolean",
+          options: {
+            defaultValue: true,
+          },
+        },
+        {
+          id: "title",
+          name: "Title",
+          type: "Text",
+          options: {
+            defaultValue: "Component checklist",
+          },
+        },
       ],
       appearance: {
         isBordered: false,
@@ -2349,9 +2354,10 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "default",
           name: "Default",
+          image: "https://cdn-assets.supernova.io/blocks/variants/component-checklist.svg",
           layout: {
             type: "Column",
-            children: ["components"],
+            children: ["components", "showDescription", "title"],
             columnAlign: "Start",
             columnResizing: "Fill",
             gap: "Medium",
@@ -2361,7 +2367,7 @@ const blocks: PageBlockDefinition[] = [
           appearance: {
             isBordered: false,
             hasBackground: false,
-            isEditorPresentationDifferent: false,
+            isEditorPresentationDifferent: true,
           },
         },
       ],
@@ -2399,7 +2405,15 @@ const blocks: PageBlockDefinition[] = [
           name: "Components",
           type: "Component",
           options: {
-            renderLayoutAs: "List",
+            renderLayoutAs: "Table",
+          },
+        },
+        {
+          id: "showLastUpdatedColumn",
+          name: "Show last updated column",
+          type: "Boolean",
+          options: {
+            defaultValue: true,
           },
         },
       ],
@@ -2411,9 +2425,10 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "default",
           name: "Default",
+          image: "https://cdn-assets.supernova.io/blocks/variants/component-overview-table.svg",
           layout: {
             type: "Column",
-            children: ["components"],
+            children: ["components", "showLastUpdatedColumn"],
             columnAlign: "Start",
             columnResizing: "Fill",
             gap: "Medium",
@@ -2423,7 +2438,7 @@ const blocks: PageBlockDefinition[] = [
           appearance: {
             isBordered: false,
             hasBackground: false,
-            isEditorPresentationDifferent: false,
+            isEditorPresentationDifferent: true,
           },
         },
       ],
@@ -2473,6 +2488,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "default",
           name: "Default",
+          image: "https://cdn-assets.supernova.io/blocks/variants/component-health.svg",
           layout: {
             type: "Column",
             children: ["components"],
@@ -2485,7 +2501,7 @@ const blocks: PageBlockDefinition[] = [
           appearance: {
             isBordered: false,
             hasBackground: false,
-            isEditorPresentationDifferent: false,
+            isEditorPresentationDifferent: true,
           },
         },
       ],