@rxdrag/website-studio 0.0.77 → 0.0.79

package/dist/{index-c56cb64e.js → index-55da451c.js}

@@ -15,10 +15,10 @@ import { compileAstroToReact, transformSchemaToCode, extractVariables, isExpress
 import clsx$1 from "clsx";
 import { useDesignerEngine, useActivedDocumentId, Designer, useDocumentModified, useClearModified, useDocConfig, useDocumentCode, useViewMode, useGetDocSchemaTree, ViewMode, useRootNode, IFrameCanvasImpl, KeyboardDriver, DragDropDriver, DragOverDriver, MouseClickDriver, MouseMoveDriver, MouseOverOutDriver, CanvasResizeDriver, CanvasScrollDriver, MouseUpDriver, useDragStore, RelativePosition, AcceptType, useCurrentNode, useSelectedElementsRectsInIframe, useActivedElementRect, useActivedId, useTreeNode, useChangeNodeMeta, useNodeMeta, createNodeHandlerProps, useSelection, useBackup, useSetInsertTargetWithPosition, useComponentOperationStore, NodeRelativePosition, TabType, InsertMode, useGetNode, useNodeMove, useClone, useRemoveSelectedNodes, useSelectedNode, useSelectedParent, useSelectParent, MouseMoveEvent, useCodeModified, RXID_ATTR_NAME, useSchemaTree, useSetChildren, useSetDocConfig, useDeviceType, DeviceType, useHistory, useResourceNode, useCanAccept, useConfigModified, useCreateDocument, useRemoveDocument, ContainerImpl, DocumentRoot } from "@rxdrag/rxcraft";
 import { staticMaterials, AddablePlaceHolder, ViewKeyProvider, ComponentTreeWidget, VariableProvider, setters, DEFUALT_DEVICE_MAP, DEFAULT_SMALLEST_DEVICE, MetaEdittingProvider, useVariables, useExecuteExpression, classListToClassName, expressionAndName, expressionTernaryName, expressionLoopName, useViewKey, slotContentName } from "@rxdrag/website-materials";
-import { Icon, Entify, PageLoader, PopoverController, ModalController, AnimateController, TabsController, NumberController, FlipController, CollapseController, AosController, DEFAULT_SAMLL, DEFAULT_MEDIUM, DEFAULT_LARGE, DEFAULT_PRODUCT_IMAGE_SIZE, DEFAULT_PRODUCT_THUMBNAIL_IMAGE_SIZE, DEFAULT_POST_IMAGE_SIZE, DEFAULT_POST_THUMBNAIL_IMAGE_SIZE } from "@rxdrag/website-lib-core";
+import { Icon, Entify, useScroll, PageLoader, PopoverController, ModalController, AnimateController, TabsController, NumberController, FlipController, CollapseController, AosController, DEFAULT_SAMLL, DEFAULT_MEDIUM, DEFAULT_LARGE, DEFAULT_PRODUCT_IMAGE_SIZE, DEFAULT_PRODUCT_THUMBNAIL_IMAGE_SIZE, DEFAULT_POST_IMAGE_SIZE, DEFAULT_POST_THUMBNAIL_IMAGE_SIZE } from "@rxdrag/website-lib-core";
 import gsap$2 from "gsap";
 import { useCreateEntityClient, useLazyQueryOneEntity, emitEntityChange, useEntifyEndpoint, useEntifyToken } from "@rxdrag/entify-hooks";
-import { CheckCircleIcon as CheckCircleIcon$1, CloseIcon, ModalBody, AddIcon as AddIcon$1, TaskStopIcon, AiStarIcon, ConfirmDialog, SettingsIcon, ModalFooter, FavouriteIcon, LightIcon, DarkIcon, EditIcon, TextInput, Drawer, ModalHeader, ModalClose, SearchIcon, ModalContent as ModalContent$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, WarningIcon, PinIcon, ErrorBoundary, CloneIcon, RemoveIcon, MonacoEditor, RunningIcon, StyledTooltip, PlayIcon, getTheFile, useSave, MoreIcon, CodeSyncIcon, Logo, PagesIcon, WidgetIcon, SeoIcon, TextIcon, HeadingIcon, StarIcon, ImageIcon, VideoIcon, SplineIcon, CardIcon, TableIcon, GridIcon, BoxIcon, DividerIcon, SpacerIcon, SlotIcon, LinkIcon, BreadcrumbIcon, TabsIcon, PopoverIcon, ModalIcon, FormIcon, LeafNode, GroupNode, TreeView, DesignIcon, ResetIcon, ImportIcon, AstroIcon, AddFolderIcon, MediasIcon, LanguageIcon, SettingsMinimalisticIcon, CodeSquareIcon, DownloadIcon, UploadIcon } from "@rxdrag/rxcms-common";
+import { CheckCircleIcon as CheckCircleIcon$1, CloseIcon, ModalBody, AddIcon as AddIcon$1, TaskStopIcon, AiStarIcon, ConfirmDialog, SettingsIcon, ModalFooter, FavouriteIcon, LightIcon, DarkIcon, EditIcon, TextInput, Drawer, ModalHeader, ModalClose, SearchIcon, ModalContent as ModalContent$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, WarningIcon, PinIcon, ErrorBoundary, CloneIcon, RemoveIcon, MonacoEditor, RunningIcon, StyledTooltip, PlayIcon, getTheFile, useSave, MoreIcon, CodeSyncIcon, Logo, PagesIcon, WidgetIcon, SeoIcon, TextIcon, HeadingIcon, StarIcon, ImageIcon, VideoIcon, SplineIcon, CardIcon, TableIcon, GridIcon, BoxIcon, DividerIcon, SpacerIcon, SlotIcon, LinkIcon, BreadcrumbIcon, TabsIcon, CarouselIcon, PopoverIcon, ModalIcon, FormIcon, LeafNode, GroupNode, TreeView, DesignIcon, ResetIcon, ImportIcon, AstroIcon, AddFolderIcon, MediasIcon, StarsIcon, LanguageIcon, SettingsMinimalisticIcon, CodeSquareIcon, DownloadIcon, UploadIcon } from "@rxdrag/rxcms-common";
 import { create as create$4 } from "zustand";
 import { Card, CardBody, Button as Button$2, CircularProgress, addToast, CardHeader, Select, SelectItem, Dropdown, DropdownTrigger, DropdownMenu as DropdownMenu$1, DropdownItem, Accordion, AccordionItem, Input, Tabs, Tab, Divider, cn, Checkbox, Chip, Skeleton, CardFooter, Image, useDisclosure, Modal as Modal$2, ModalContent as ModalContent$2, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, Tooltip, RadioGroup, Radio } from "@heroui/react";
 import { Icon as Icon$1 } from "@iconify/react";
@@ -1142,7 +1142,9 @@ const createAstroRuntime = () => {
                   const propName = attrKey === "class" ? "className" : attrKey;
                   props[propName] = attrValue;
                 });
-              } else {
+              } else if (attr.name === "style")
+                ;
+              else {
                 const name = attr.name === "class" ? "className" : attr.name;
                 const lowerName = attr.name.toLowerCase();
                 if (booleanAttrs.has(lowerName)) {
@@ -1152,6 +1154,19 @@ const createAstroRuntime = () => {
                 }
               }
             });
+            if (element2.style.length > 0) {
+              const styleObj = {};
+              for (let i2 = 0; i2 < element2.style.length; i2++) {
+                const key22 = element2.style[i2];
+                const value = element2.style.getPropertyValue(key22);
+                const camelKey = key22.replace(
+                  /-([a-z])/g,
+                  (g2) => g2[1].toUpperCase()
+                );
+                styleObj[camelKey] = value;
+              }
+              props.style = styleObj;
+            }
             if (element2.tagName.toLowerCase() === "video") {
               if (props.autoplay || props.autoPlay) {
                 props.muted = true;
@@ -1217,12 +1232,34 @@ const createAstroRuntime = () => {
         }
       });
       if (Component2 && typeof Component2 === "object" && "$$typeof" in Component2) {
+        if (finalProps.style && typeof finalProps.style === "string") {
+          const styleObj = {};
+          finalProps.style.split(";").forEach((rule) => {
+            const [key2, value] = rule.split(":");
+            if (key2 && value) {
+              const camelKey = key2.trim().replace(/-([a-z])/g, (g2) => g2[1].toUpperCase());
+              styleObj[camelKey] = value.trim();
+            }
+          });
+          finalProps.style = styleObj;
+        }
         return React__default.createElement(
           Component2,
           finalProps
         );
       }
       if (typeof Component2 === "function") {
+        if (finalProps.style && typeof finalProps.style === "string") {
+          const styleObj = {};
+          finalProps.style.split(";").forEach((rule) => {
+            const [key2, value] = rule.split(":");
+            if (key2 && value) {
+              const camelKey = key2.trim().replace(/-([a-z])/g, (g2) => g2[1].toUpperCase());
+              styleObj[camelKey] = value.trim();
+            }
+          });
+          finalProps.style = styleObj;
+        }
         const Wrapped = (p2) => {
           const out = Component2(p2);
           if (React__default.isValidElement(out))
@@ -81051,7 +81088,7 @@ class InputBox2 extends Widget$1 {
       return;
     }
     let div;
-    const layout3 = () => div.style.width = getTotalWidth(this.element) + "px";
+    const layout2 = () => div.style.width = getTotalWidth(this.element) + "px";
     this.contextViewProvider.showContextView({
       getAnchor: () => this.element,
       anchorAlignment: 1,
@@ -81060,7 +81097,7 @@ class InputBox2 extends Widget$1 {
           return null;
         }
         div = append$1(container, $$a(".monaco-inputbox-container"));
-        layout3();
+        layout2();
         const renderOptions = {
           inline: true,
           className: "monaco-inputbox-message"
@@ -81077,7 +81114,7 @@ class InputBox2 extends Widget$1 {
       onHide: () => {
         this.state = "closed";
       },
-      layout: layout3
+      layout: layout2
     });
     let alertText;
     if (this.message.type === 3) {
@@ -112393,8 +112430,8 @@ class RenderData {
   /**
    * Check if the current RenderData matches accurately the new desired layout and no painting is needed.
    */
-  linesEquals(layout3) {
-    if (!this.scrollEquals(layout3)) {
+  linesEquals(layout2) {
+    if (!this.scrollEquals(layout2)) {
       return false;
     }
     const tmp = this._renderedLines._get();
@@ -112409,8 +112446,8 @@ class RenderData {
   /**
    * Check if the current RenderData matches the new layout's scroll position
    */
-  scrollEquals(layout3) {
-    return this.renderedLayout.startLineNumber === layout3.startLineNumber && this.renderedLayout.endLineNumber === layout3.endLineNumber;
+  scrollEquals(layout2) {
+    return this.renderedLayout.startLineNumber === layout2.startLineNumber && this.renderedLayout.endLineNumber === layout2.endLineNumber;
   }
   _get() {
     const tmp = this._renderedLines._get();
@@ -113179,23 +113216,23 @@ class InnerMinimap extends Disposable {
     } else {
       this._shadow.setClassName("minimap-shadow-visible");
     }
-    const layout3 = MinimapLayout.create(this._model.options, renderingCtx.viewportStartLineNumber, renderingCtx.viewportEndLineNumber, renderingCtx.viewportStartLineNumberVerticalOffset, renderingCtx.viewportHeight, renderingCtx.viewportContainsWhitespaceGaps, this._model.getLineCount(), this._model.getRealLineCount(), renderingCtx.scrollTop, renderingCtx.scrollHeight, this._lastRenderData ? this._lastRenderData.renderedLayout : null);
-    this._slider.setDisplay(layout3.sliderNeeded ? "block" : "none");
-    this._slider.setTop(layout3.sliderTop);
-    this._slider.setHeight(layout3.sliderHeight);
+    const layout2 = MinimapLayout.create(this._model.options, renderingCtx.viewportStartLineNumber, renderingCtx.viewportEndLineNumber, renderingCtx.viewportStartLineNumberVerticalOffset, renderingCtx.viewportHeight, renderingCtx.viewportContainsWhitespaceGaps, this._model.getLineCount(), this._model.getRealLineCount(), renderingCtx.scrollTop, renderingCtx.scrollHeight, this._lastRenderData ? this._lastRenderData.renderedLayout : null);
+    this._slider.setDisplay(layout2.sliderNeeded ? "block" : "none");
+    this._slider.setTop(layout2.sliderTop);
+    this._slider.setHeight(layout2.sliderHeight);
     this._sliderHorizontal.setLeft(0);
     this._sliderHorizontal.setWidth(this._model.options.minimapWidth);
     this._sliderHorizontal.setTop(0);
-    this._sliderHorizontal.setHeight(layout3.sliderHeight);
-    this.renderDecorations(layout3);
-    this._lastRenderData = this.renderLines(layout3);
+    this._sliderHorizontal.setHeight(layout2.sliderHeight);
+    this.renderDecorations(layout2);
+    this._lastRenderData = this.renderLines(layout2);
   }
-  renderDecorations(layout3) {
+  renderDecorations(layout2) {
     if (this._renderDecorations) {
       this._renderDecorations = false;
       const selections2 = this._model.getSelections();
       selections2.sort(Range$2.compareRangesUsingStarts);
-      const decorations2 = this._model.getMinimapDecorationsInViewport(layout3.startLineNumber, layout3.endLineNumber);
+      const decorations2 = this._model.getMinimapDecorationsInViewport(layout2.startLineNumber, layout2.endLineNumber);
       decorations2.sort((a2, b) => (a2.options.zIndex || 0) - (b.options.zIndex || 0));
       const { canvasInnerWidth, canvasInnerHeight } = this._model.options;
       const minimapLineHeight = this._model.options.minimapLineHeight;
@@ -113203,16 +113240,16 @@ class InnerMinimap extends Disposable {
       const tabSize = this._model.getOptions().tabSize;
       const canvasContext = this._decorationsCanvas.domNode.getContext("2d");
       canvasContext.clearRect(0, 0, canvasInnerWidth, canvasInnerHeight);
-      const highlightedLines = new ContiguousLineMap(layout3.startLineNumber, layout3.endLineNumber, false);
-      this._renderSelectionLineHighlights(canvasContext, selections2, highlightedLines, layout3, minimapLineHeight);
-      this._renderDecorationsLineHighlights(canvasContext, decorations2, highlightedLines, layout3, minimapLineHeight);
-      const lineOffsetMap = new ContiguousLineMap(layout3.startLineNumber, layout3.endLineNumber, null);
-      this._renderSelectionsHighlights(canvasContext, selections2, lineOffsetMap, layout3, minimapLineHeight, tabSize, minimapCharWidth, canvasInnerWidth);
-      this._renderDecorationsHighlights(canvasContext, decorations2, lineOffsetMap, layout3, minimapLineHeight, tabSize, minimapCharWidth, canvasInnerWidth);
-      this._renderSectionHeaders(layout3);
+      const highlightedLines = new ContiguousLineMap(layout2.startLineNumber, layout2.endLineNumber, false);
+      this._renderSelectionLineHighlights(canvasContext, selections2, highlightedLines, layout2, minimapLineHeight);
+      this._renderDecorationsLineHighlights(canvasContext, decorations2, highlightedLines, layout2, minimapLineHeight);
+      const lineOffsetMap = new ContiguousLineMap(layout2.startLineNumber, layout2.endLineNumber, null);
+      this._renderSelectionsHighlights(canvasContext, selections2, lineOffsetMap, layout2, minimapLineHeight, tabSize, minimapCharWidth, canvasInnerWidth);
+      this._renderDecorationsHighlights(canvasContext, decorations2, lineOffsetMap, layout2, minimapLineHeight, tabSize, minimapCharWidth, canvasInnerWidth);
+      this._renderSectionHeaders(layout2);
     }
   }
-  _renderSelectionLineHighlights(canvasContext, selections2, highlightedLines, layout3, minimapLineHeight) {
+  _renderSelectionLineHighlights(canvasContext, selections2, highlightedLines, layout2, minimapLineHeight) {
     if (!this._selectionColor || this._selectionColor.isTransparent()) {
       return;
     }
@@ -113220,7 +113257,7 @@ class InnerMinimap extends Disposable {
     let y1 = 0;
     let y2 = 0;
     for (const selection of selections2) {
-      const intersection2 = layout3.intersectWithViewport(selection);
+      const intersection2 = layout2.intersectWithViewport(selection);
       if (!intersection2) {
         continue;
       }
@@ -113228,8 +113265,8 @@ class InnerMinimap extends Disposable {
       for (let line = startLineNumber; line <= endLineNumber; line++) {
         highlightedLines.set(line, true);
       }
-      const yy1 = layout3.getYForLineNumber(startLineNumber, minimapLineHeight);
-      const yy2 = layout3.getYForLineNumber(endLineNumber, minimapLineHeight);
+      const yy1 = layout2.getYForLineNumber(startLineNumber, minimapLineHeight);
+      const yy2 = layout2.getYForLineNumber(endLineNumber, minimapLineHeight);
       if (y2 >= yy1) {
         y2 = yy2;
       } else {
@@ -113244,7 +113281,7 @@ class InnerMinimap extends Disposable {
       canvasContext.fillRect(MINIMAP_GUTTER_WIDTH, y1, canvasContext.canvas.width, y2 - y1);
     }
   }
-  _renderDecorationsLineHighlights(canvasContext, decorations2, highlightedLines, layout3, minimapLineHeight) {
+  _renderDecorationsLineHighlights(canvasContext, decorations2, highlightedLines, layout2, minimapLineHeight) {
     const highlightColors = /* @__PURE__ */ new Map();
     for (let i2 = decorations2.length - 1; i2 >= 0; i2--) {
       const decoration2 = decorations2[i2];
@@ -113252,7 +113289,7 @@ class InnerMinimap extends Disposable {
       if (!minimapOptions || minimapOptions.position !== 1) {
         continue;
       }
-      const intersection2 = layout3.intersectWithViewport(decoration2.range);
+      const intersection2 = layout2.intersectWithViewport(decoration2.range);
       if (!intersection2) {
         continue;
       }
@@ -113272,33 +113309,33 @@ class InnerMinimap extends Disposable {
           continue;
         }
         highlightedLines.set(line, true);
-        const y2 = layout3.getYForLineNumber(startLineNumber, minimapLineHeight);
+        const y2 = layout2.getYForLineNumber(startLineNumber, minimapLineHeight);
         canvasContext.fillRect(MINIMAP_GUTTER_WIDTH, y2, canvasContext.canvas.width, minimapLineHeight);
       }
     }
   }
-  _renderSelectionsHighlights(canvasContext, selections2, lineOffsetMap, layout3, lineHeight, tabSize, characterWidth, canvasInnerWidth) {
+  _renderSelectionsHighlights(canvasContext, selections2, lineOffsetMap, layout2, lineHeight, tabSize, characterWidth, canvasInnerWidth) {
     if (!this._selectionColor || this._selectionColor.isTransparent()) {
       return;
     }
     for (const selection of selections2) {
-      const intersection2 = layout3.intersectWithViewport(selection);
+      const intersection2 = layout2.intersectWithViewport(selection);
       if (!intersection2) {
         continue;
       }
       const [startLineNumber, endLineNumber] = intersection2;
       for (let line = startLineNumber; line <= endLineNumber; line++) {
-        this.renderDecorationOnLine(canvasContext, lineOffsetMap, selection, this._selectionColor, layout3, line, lineHeight, lineHeight, tabSize, characterWidth, canvasInnerWidth);
+        this.renderDecorationOnLine(canvasContext, lineOffsetMap, selection, this._selectionColor, layout2, line, lineHeight, lineHeight, tabSize, characterWidth, canvasInnerWidth);
       }
     }
   }
-  _renderDecorationsHighlights(canvasContext, decorations2, lineOffsetMap, layout3, minimapLineHeight, tabSize, characterWidth, canvasInnerWidth) {
+  _renderDecorationsHighlights(canvasContext, decorations2, lineOffsetMap, layout2, minimapLineHeight, tabSize, characterWidth, canvasInnerWidth) {
     for (const decoration2 of decorations2) {
       const minimapOptions = decoration2.options.minimap;
       if (!minimapOptions) {
         continue;
       }
-      const intersection2 = layout3.intersectWithViewport(decoration2.range);
+      const intersection2 = layout2.intersectWithViewport(decoration2.range);
       if (!intersection2) {
         continue;
       }
@@ -113310,10 +113347,10 @@ class InnerMinimap extends Disposable {
       for (let line = startLineNumber; line <= endLineNumber; line++) {
         switch (minimapOptions.position) {
           case 1:
-            this.renderDecorationOnLine(canvasContext, lineOffsetMap, decoration2.range, decorationColor, layout3, line, minimapLineHeight, minimapLineHeight, tabSize, characterWidth, canvasInnerWidth);
+            this.renderDecorationOnLine(canvasContext, lineOffsetMap, decoration2.range, decorationColor, layout2, line, minimapLineHeight, minimapLineHeight, tabSize, characterWidth, canvasInnerWidth);
             continue;
           case 2: {
-            const y2 = layout3.getYForLineNumber(line, minimapLineHeight);
+            const y2 = layout2.getYForLineNumber(line, minimapLineHeight);
             const x2 = 2;
             this.renderDecoration(canvasContext, decorationColor, x2, y2, GUTTER_DECORATION_WIDTH, minimapLineHeight);
             continue;
@@ -113322,8 +113359,8 @@ class InnerMinimap extends Disposable {
       }
     }
   }
-  renderDecorationOnLine(canvasContext, lineOffsetMap, decorationRange, decorationColor, layout3, lineNumber, height, minimapLineHeight, tabSize, charWidth, canvasInnerWidth) {
-    const y2 = layout3.getYForLineNumber(lineNumber, minimapLineHeight);
+  renderDecorationOnLine(canvasContext, lineOffsetMap, decorationRange, decorationColor, layout2, lineNumber, height, minimapLineHeight, tabSize, charWidth, canvasInnerWidth) {
+    const y2 = layout2.getYForLineNumber(lineNumber, minimapLineHeight);
     if (y2 + height < 0 || y2 > this._model.options.canvasInnerHeight) {
       return;
     }
@@ -113369,7 +113406,7 @@ class InnerMinimap extends Disposable {
     canvasContext.fillStyle = decorationColor && decorationColor.toString() || "";
     canvasContext.fillRect(x2, y2, width2, height);
   }
-  _renderSectionHeaders(layout3) {
+  _renderSectionHeaders(layout2) {
     var _a3;
     const minimapLineHeight = this._model.options.minimapLineHeight;
     const sectionHeaderFontSize = this._model.options.sectionHeaderFontSize;
@@ -113386,11 +113423,11 @@ class InnerMinimap extends Disposable {
     canvasContext.font = "500 " + sectionHeaderFontSize + "px " + this._model.options.sectionHeaderFontFamily;
     canvasContext.strokeStyle = separatorStroke;
     canvasContext.lineWidth = 0.2;
-    const decorations2 = this._model.getSectionHeaderDecorationsInViewport(layout3.startLineNumber, layout3.endLineNumber);
+    const decorations2 = this._model.getSectionHeaderDecorationsInViewport(layout2.startLineNumber, layout2.endLineNumber);
     decorations2.sort((a2, b) => a2.range.startLineNumber - b.range.startLineNumber);
     const fitWidth = InnerMinimap._fitSectionHeader.bind(null, canvasContext, canvasInnerWidth - MINIMAP_GUTTER_WIDTH);
     for (const decoration2 of decorations2) {
-      const y2 = layout3.getYForLineNumber(decoration2.range.startLineNumber, minimapLineHeight) + sectionHeaderFontSize;
+      const y2 = layout2.getYForLineNumber(decoration2.range.startLineNumber, minimapLineHeight) + sectionHeaderFontSize;
       const backgroundFillY = y2 - sectionHeaderFontSize;
       const separatorY = backgroundFillY + 2;
       const headerText = this._model.getSectionHeaderText(decoration2, fitWidth);
@@ -113431,19 +113468,19 @@ class InnerMinimap extends Disposable {
       target.stroke();
     }
   }
-  renderLines(layout3) {
-    const startLineNumber = layout3.startLineNumber;
-    const endLineNumber = layout3.endLineNumber;
+  renderLines(layout2) {
+    const startLineNumber = layout2.startLineNumber;
+    const endLineNumber = layout2.endLineNumber;
     const minimapLineHeight = this._model.options.minimapLineHeight;
-    if (this._lastRenderData && this._lastRenderData.linesEquals(layout3)) {
+    if (this._lastRenderData && this._lastRenderData.linesEquals(layout2)) {
       const _lastData = this._lastRenderData._get();
-      return new RenderData(layout3, _lastData.imageData, _lastData.lines);
+      return new RenderData(layout2, _lastData.imageData, _lastData.lines);
     }
     const imageData = this._getBuffer();
     if (!imageData) {
       return null;
     }
-    const [_dirtyY1, _dirtyY2, needed] = InnerMinimap._renderUntouchedLines(imageData, layout3.topPaddingLineCount, startLineNumber, endLineNumber, minimapLineHeight, this._lastRenderData);
+    const [_dirtyY1, _dirtyY2, needed] = InnerMinimap._renderUntouchedLines(imageData, layout2.topPaddingLineCount, startLineNumber, endLineNumber, minimapLineHeight, this._lastRenderData);
     const lineInfo = this._model.getMinimapLinesRenderingData(startLineNumber, endLineNumber, needed);
     const tabSize = this._model.getOptions().tabSize;
     const defaultBackground = this._model.options.defaultBackgroundColor;
@@ -113460,7 +113497,7 @@ class InnerMinimap extends Disposable {
     const innerLinePadding = minimapLineHeight > renderMinimapLineHeight ? Math.floor((minimapLineHeight - renderMinimapLineHeight) / 2) : 0;
     const backgroundA = background.a / 255;
     const renderBackground = new RGBA8(Math.round((background.r - defaultBackground.r) * backgroundA + defaultBackground.r), Math.round((background.g - defaultBackground.g) * backgroundA + defaultBackground.g), Math.round((background.b - defaultBackground.b) * backgroundA + defaultBackground.b), 255);
-    let dy = layout3.topPaddingLineCount * minimapLineHeight;
+    let dy = layout2.topPaddingLineCount * minimapLineHeight;
     const renderedLines = [];
     for (let lineIndex = 0, lineCount = endLineNumber - startLineNumber + 1; lineIndex < lineCount; lineIndex++) {
       if (needed[lineIndex]) {
@@ -113474,7 +113511,7 @@ class InnerMinimap extends Disposable {
     const dirtyHeight = dirtyY2 - dirtyY1;
     const ctx = this._canvas.domNode.getContext("2d");
     ctx.putImageData(imageData, 0, 0, 0, dirtyY1, imageData.width, dirtyHeight);
-    return new RenderData(layout3, imageData, renderedLines);
+    return new RenderData(layout2, imageData, renderedLines);
   }
   static _renderUntouchedLines(target, topPaddingLineCount, startLineNumber, endLineNumber, minimapLineHeight, lastRenderData) {
     const needed = [];
@@ -127383,14 +127420,14 @@ const _MovedBlocksLinesFeature = class _MovedBlocksLinesFeature extends Disposab
         return { range: new OffsetRange(top, bottom), from, to, fromWithoutScroll: start, toWithoutScroll: end, move };
       });
       lines.sort(tieBreakComparators(compareBy((l2) => l2.fromWithoutScroll > l2.toWithoutScroll, booleanComparator), compareBy((l2) => l2.fromWithoutScroll > l2.toWithoutScroll ? l2.fromWithoutScroll : -l2.toWithoutScroll, numberComparator)));
-      const layout3 = LinesLayout.compute(lines.map((l2) => l2.range));
+      const layout2 = LinesLayout.compute(lines.map((l2) => l2.range));
       const padding = 10;
       const lineAreaLeft = infoOrig.verticalScrollbarWidth;
-      const lineAreaWidth = (layout3.getTrackCount() - 1) * 10 + padding * 2;
+      const lineAreaWidth = (layout2.getTrackCount() - 1) * 10 + padding * 2;
       const width2 = lineAreaLeft + lineAreaWidth + (infoMod.contentLeft - _MovedBlocksLinesFeature.movedCodeBlockPadding);
       let idx = 0;
       for (const line of lines) {
-        const track = layout3.getTrack(idx);
+        const track = layout2.getTrack(idx);
         const verticalY = lineAreaLeft + padding + track * 10;
         const arrowHeight = 15;
         const arrowWidth = 15;
@@ -133476,7 +133513,7 @@ registerLanguage({
   aliases: ["FreeMarker2", "Apache FreeMarker2"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagAutoInterpolationDollar);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagAutoInterpolationDollar);
     }
   }
 });
@@ -133485,7 +133522,7 @@ registerLanguage({
   aliases: ["FreeMarker2 (Angle/Dollar)", "Apache FreeMarker2 (Angle/Dollar)"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagAngleInterpolationDollar);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagAngleInterpolationDollar);
     }
   }
 });
@@ -133494,7 +133531,7 @@ registerLanguage({
   aliases: ["FreeMarker2 (Bracket/Dollar)", "Apache FreeMarker2 (Bracket/Dollar)"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagBracketInterpolationDollar);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagBracketInterpolationDollar);
     }
   }
 });
@@ -133503,7 +133540,7 @@ registerLanguage({
   aliases: ["FreeMarker2 (Angle/Bracket)", "Apache FreeMarker2 (Angle/Bracket)"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagAngleInterpolationBracket);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagAngleInterpolationBracket);
     }
   }
 });
@@ -133512,7 +133549,7 @@ registerLanguage({
   aliases: ["FreeMarker2 (Bracket/Bracket)", "Apache FreeMarker2 (Bracket/Bracket)"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagBracketInterpolationBracket);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagBracketInterpolationBracket);
     }
   }
 });
@@ -133521,7 +133558,7 @@ registerLanguage({
   aliases: ["FreeMarker2 (Auto/Dollar)", "Apache FreeMarker2 (Auto/Dollar)"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagAutoInterpolationDollar);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagAutoInterpolationDollar);
     }
   }
 });
@@ -133530,7 +133567,7 @@ registerLanguage({
   aliases: ["FreeMarker2 (Auto/Bracket)", "Apache FreeMarker2 (Auto/Bracket)"],
   loader: () => {
     {
-      return import("./freemarker2-985c1aab.js").then((m2) => m2.TagAutoInterpolationBracket);
+      return import("./freemarker2-7edb092b.js").then((m2) => m2.TagAutoInterpolationBracket);
     }
   }
 });
@@ -133580,7 +133617,7 @@ registerLanguage({
   mimetypes: ["text/x-handlebars-template"],
   loader: () => {
     {
-      return import("./handlebars-41f9e3d5.js");
+      return import("./handlebars-feb05976.js");
     }
   }
 });
@@ -133613,7 +133650,7 @@ registerLanguage({
   mimetypes: ["text/html", "text/x-jshtm", "text/template", "text/ng-template"],
   loader: () => {
     {
-      return import("./html-4e07dfcb.js");
+      return import("./html-870671b6.js");
     }
   }
 });
@@ -133666,7 +133703,7 @@ registerLanguage({
   mimetypes: ["text/javascript"],
   loader: () => {
     {
-      return import("./javascript-b8a057c6.js");
+      return import("./javascript-c26f93ec.js");
     }
   }
 });
@@ -133765,7 +133802,7 @@ registerLanguage({
   mimetypes: ["application/liquid"],
   loader: () => {
     {
-      return import("./liquid-545fa7e1.js");
+      return import("./liquid-6ab364b9.js");
     }
   }
 });
@@ -133813,7 +133850,7 @@ registerLanguage({
   aliases: ["MDX", "mdx"],
   loader: () => {
     {
-      return import("./mdx-23212856.js");
+      return import("./mdx-c70a8a1c.js");
     }
   }
 });
@@ -134072,7 +134109,7 @@ registerLanguage({
   firstLine: "^#!/.*\\bpython[0-9.-]*\\b",
   loader: () => {
     {
-      return import("./python-571a1d38.js");
+      return import("./python-31cd5a7c.js");
     }
   }
 });
@@ -134121,7 +134158,7 @@ registerLanguage({
   mimetypes: ["text/x-cshtml"],
   loader: () => {
     {
-      return import("./razor-5d3d8972.js");
+      return import("./razor-d5fae3eb.js");
     }
   }
 });
@@ -134457,7 +134494,7 @@ registerLanguage({
   mimetypes: ["text/typescript"],
   loader: () => {
     {
-      return import("./typescript-70b501c4.js");
+      return import("./typescript-84dc99fd.js");
     }
   }
 });
@@ -134541,7 +134578,7 @@ registerLanguage({
   mimetypes: ["text/xml", "application/xml", "application/xaml+xml", "application/xml-dtd"],
   loader: () => {
     {
-      return import("./xml-e3501494.js");
+      return import("./xml-8852fbc1.js");
     }
   }
 });
@@ -134558,7 +134595,7 @@ registerLanguage({
   mimetypes: ["application/x-yaml", "text/x-yaml"],
   loader: () => {
     {
-      return import("./yaml-9cffb366.js");
+      return import("./yaml-38f98cba.js");
     }
   }
 });
@@ -134682,7 +134719,7 @@ var lessDefaults = new LanguageServiceDefaultsImpl$3(
 monaco_editor_core_exports$3.languages.css = { cssDefaults, lessDefaults, scssDefaults };
 function getMode$3() {
   {
-    return import("./cssMode-2fab6fd8.js");
+    return import("./cssMode-df1a2138.js");
   }
 }
 monaco_editor_core_exports$3.languages.onLanguage("less", () => {
@@ -134813,7 +134850,7 @@ monaco_editor_core_exports$2.languages.html = {
 };
 function getMode$2() {
   {
-    return import("./htmlMode-f2256fc7.js");
+    return import("./htmlMode-a2b081f4.js");
   }
 }
 function registerHTMLLanguageService(languageId, options = optionsDefault, modeConfiguration = getConfigurationDefault(languageId)) {
@@ -134911,7 +134948,7 @@ var getWorker = () => getMode$1().then((mode) => mode.getWorker());
 monaco_editor_core_exports$1.languages.json = { jsonDefaults, getWorker };
 function getMode$1() {
   {
-    return import("./jsonMode-a93a3066.js");
+    return import("./jsonMode-9bb59d77.js");
   }
 }
 monaco_editor_core_exports$1.languages.register({
@@ -135187,7 +135224,7 @@ monaco_editor_core_exports.languages.typescript = {
 };
 function getMode() {
   {
-    return import("./tsMode-715919b3.js");
+    return import("./tsMode-089b8a95.js");
   }
 }
 monaco_editor_core_exports.languages.onLanguage("typescript", () => {
@@ -186140,6 +186177,11 @@ const DocFrame = memo(
     const initialHTML = useFrameInitialHTML({
       styleConfig
     });
+    useScroll(
+      10,
+      (iframeDoc == null ? void 0 : iframeDoc.defaultView) || void 0,
+      iframeDoc || void 0
+    );
     useEffect(() => {
       if (iframeDoc) {
         const styles = [];
@@ -187330,6 +187372,9 @@ const DocCanvas = memo((props) => {
       ...astroVariables
     };
   }, [variables, astroVariables]);
+  if ((resource == null ? void 0 : resource.frontmatter) && variables === void 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DocFrame, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: documentId && /* @__PURE__ */ jsxRuntimeExports.jsx(VariableProvider, { value: allVariables, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DocTreeView, {}) }) }) });
 });
 const InsertionCursor = () => {
@@ -190983,6 +191028,11 @@ const DocPreview = memo(() => {
   const initialHTML = useFrameInitialHTML({
     styleConfig
   });
+  useScroll(
+    10,
+    (iframeDoc == null ? void 0 : iframeDoc.defaultView) || void 0,
+    iframeDoc || void 0
+  );
   useEffect(() => {
     if (iframeDoc) {
       const styles = [];
@@ -199073,10 +199123,7 @@ function StyleConfigModal(props) {
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[480px] flex flex-col min-h-0 h-full bg-default-100 rounded-lg overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-divider flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1, { icon: "solar:palette-bold", className: "text-primary" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: "预览" })
-            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: "预览" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               Button$2,
               {
@@ -199924,123 +199971,129 @@ function LeftBar(props) {
     setOpenInsertDrawer(true);
     onSelectDrawerType == null ? void 0 : onSelectDrawerType(null);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Sheet, { className: `w-14 flex flex-col border-r shrink-0 relative z-50 pb-2 items-center`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col items-center gap-1 py-2", children: [
-      selectedContent && viewMode === ViewMode.Design && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LeftbarButtion,
-        {
-          title: "插入",
-          selected: openInsertDrawer,
-          onPress: handleOpenInsertDrawer,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon$1, { className: "size-6" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LeftbarButtion,
-        {
-          title: "页面",
-          selected: selectedDrawerType === DrawerConentType.Pages,
-          onPress: () => handleOpenDrawer(DrawerConentType.Pages),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(PagesIcon, { className: "size-5" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LeftbarButtion,
-        {
-          title: titles[DrawerConentType.Components],
-          selected: selectedDrawerType === DrawerConentType.Components,
-          onPress: () => handleOpenDrawer(DrawerConentType.Components),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetIcon, { className: "size-5" })
-        }
-      ),
-      ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.Page || (selectedContent == null ? void 0 : selectedContent.type) === ContentType.PredefinedPage) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LeftbarButtion,
-          {
-            title: titles[DrawerConentType.SEO],
-            selected: selectedDrawerType === DrawerConentType.SEO,
-            onPress: () => handleOpenDrawer(DrawerConentType.SEO),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(SeoIcon, { className: "size-5" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LeftbarButtion,
-          {
-            title: titles[DrawerConentType.SNS],
-            selected: selectedDrawerType === DrawerConentType.SNS,
-            onPress: () => handleOpenDrawer(DrawerConentType.SNS),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "svg",
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Sheet,
+    {
+      className: `w-14 flex flex-col border-r shrink-0 relative z-50 pb-2 items-center`,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col items-center gap-1 py-2", children: [
+          selectedContent && viewMode === ViewMode.Design && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LeftbarButtion,
+            {
+              title: "插入",
+              selected: openInsertDrawer,
+              onPress: handleOpenInsertDrawer,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon$1, { className: "size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LeftbarButtion,
+            {
+              title: "页面",
+              selected: selectedDrawerType === DrawerConentType.Pages,
+              onPress: () => handleOpenDrawer(DrawerConentType.Pages),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(PagesIcon, { className: "size-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LeftbarButtion,
+            {
+              title: titles[DrawerConentType.Components],
+              selected: selectedDrawerType === DrawerConentType.Components,
+              onPress: () => handleOpenDrawer(DrawerConentType.Components),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetIcon, { className: "size-5" })
+            }
+          ),
+          (selectedContent == null ? void 0 : selectedContent.type) === ContentType.Page && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LeftbarButtion,
               {
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "size-5",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      d: "M14 6.5L9 10m5 7.5L9 14"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z" })
-                ] })
+                title: titles[DrawerConentType.SEO],
+                selected: selectedDrawerType === DrawerConentType.SEO,
+                onPress: () => handleOpenDrawer(DrawerConentType.SEO),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(SeoIcon, { className: "size-5" })
               }
-            )
-          }
-        )
-      ] }),
-      (selectedContent == null ? void 0 : selectedContent.type) === ContentType.Component && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LeftbarButtion,
-          {
-            title: titles[DrawerConentType.ComponentSchema],
-            selected: selectedDrawerType === DrawerConentType.ComponentSchema,
-            onPress: () => handleOpenDrawer(DrawerConentType.ComponentSchema),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "svg",
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LeftbarButtion,
               {
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "size-5",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 8.25a3.75 3.75 0 1 0 0 7.5a3.75 3.75 0 0 0 0-7.5M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 1.25c-.705 0-1.348.194-2.051.52c-.68.317-1.469.783-2.454 1.367l-.754.446c-.986.584-1.773 1.05-2.38 1.496c-.628.462-1.11.934-1.458 1.553s-.505 1.279-.58 2.063c-.073.76-.073 1.691-.073 2.861v.888c0 1.17 0 2.1.073 2.86c.075.785.232 1.446.58 2.064c.349.619.83 1.091 1.458 1.553c.607.446 1.394.912 2.38 1.496l.754.446c.985.584 1.773 1.05 2.454 1.367c.703.326 1.346.52 2.051.52s1.348-.194 2.051-.52c.68-.317 1.469-.783 2.454-1.367l.754-.446c.986-.584 1.773-1.05 2.38-1.496c.628-.462 1.11-.934 1.458-1.553s.505-1.279.58-2.063c.073-.76.073-1.691.073-2.86v-.889c0-1.17 0-2.1-.073-2.86c-.075-.785-.232-1.446-.58-2.064c-.349-.619-.83-1.091-1.458-1.553c-.607-.446-1.394-.912-2.38-1.496l-.754-.446c-.985-.584-1.773-1.05-2.454-1.367c-.703-.326-1.346-.52-2.051-.52M8.225 4.447c1.027-.608 1.751-1.035 2.356-1.316c.59-.274 1.01-.381 1.419-.381s.83.107 1.42.38c.604.282 1.328.71 2.355 1.317l.686.407c1.027.608 1.75 1.037 2.29 1.434c.526.387.83.71 1.038 1.08c.21.371.33.806.395 1.47c.065.68.066 1.54.066 2.756v.812c0 1.216 0 2.075-.066 2.755c-.064.665-.185 1.1-.395 1.471c-.208.37-.512.693-1.038 1.08c-.54.397-1.263.826-2.29 1.434l-.686.407c-1.027.608-1.751 1.035-2.356 1.316c-.59.274-1.01.381-1.419.381s-.83-.107-1.42-.38c-.604-.282-1.328-.71-2.355-1.317l-.686-.407c-1.027-.608-1.75-1.037-2.29-1.434c-.526-.387-.83-.71-1.038-1.08c-.21-.371-.331-.806-.395-1.47c-.065-.68-.066-1.54-.066-2.756v-.812c0-1.216 0-2.075.066-2.755c.064-.665.185-1.1.394-1.471c.209-.37.513-.693 1.04-1.08c.54-.397 1.262-.826 2.29-1.434z" })
-                ] })
+                title: titles[DrawerConentType.SNS],
+                selected: selectedDrawerType === DrawerConentType.SNS,
+                onPress: () => handleOpenDrawer(DrawerConentType.SNS),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "size-5",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          d: "M14 6.5L9 10m5 7.5L9 14"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z" })
+                    ] })
+                  }
+                )
               }
             )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LeftbarButtion,
-          {
-            title: titles[DrawerConentType.ComponentTest],
-            selected: selectedDrawerType === DrawerConentType.ComponentTest,
-            onPress: () => handleOpenDrawer(DrawerConentType.ComponentTest),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "svg",
+          ] }),
+          (selectedContent == null ? void 0 : selectedContent.type) === ContentType.Component && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LeftbarButtion,
               {
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "size-5",
-                viewBox: "0 0 24 24",
+                title: titles[DrawerConentType.ComponentSchema],
+                selected: selectedDrawerType === DrawerConentType.ComponentSchema,
+                onPress: () => handleOpenDrawer(DrawerConentType.ComponentSchema),
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "path",
+                  "svg",
                   {
-                    fill: "currentColor",
-                    fillRule: "evenodd",
-                    d: "M9.295 1.354a.75.75 0 0 0-.764 1.292l.196.116L2.002 14.37a5.577 5.577 0 0 0 2.051 7.632a5.61 5.61 0 0 0 7.652-2.045l6.729-11.614l.192.11a.75.75 0 0 0 .748-1.3l-.84-.483l-8.408-4.824zM3.3 15.122l6.723-11.606l7.11 4.08l-1.505 2.597l-1.91-1.098a.75.75 0 0 0-.748 1.3l1.906 1.096l-.961 1.66l-3.555-2.045a.75.75 0 1 0-.748 1.3l3.55 2.043l-.885 1.528l-1.964-1.13a.75.75 0 0 0-.748 1.3l1.96 1.128l-1.118 1.93a4.11 4.11 0 0 1-5.606 1.496a4.077 4.077 0 0 1-1.501-5.58m17.875-3.019a1.61 1.61 0 0 0-2.35 0a9 9 0 0 0-.986 1.214c-.284.43-.589 1.008-.589 1.6c0 1.536 1.203 2.834 2.75 2.834s2.75-1.298 2.75-2.833c0-.593-.304-1.17-.589-1.601a9 9 0 0 0-.986-1.214m-1.261 1.031c.029-.03.06-.04.086-.04a.12.12 0 0 1 .087.04c.278.294.587.653.823 1.01c.253.383.34.646.34.774c0 .765-.588 1.333-1.25 1.333s-1.25-.568-1.25-1.333c0-.128.087-.39.34-.775c.236-.356.545-.715.824-1.009",
-                    clipRule: "evenodd"
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "size-5",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 8.25a3.75 3.75 0 1 0 0 7.5a3.75 3.75 0 0 0 0-7.5M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 1.25c-.705 0-1.348.194-2.051.52c-.68.317-1.469.783-2.454 1.367l-.754.446c-.986.584-1.773 1.05-2.38 1.496c-.628.462-1.11.934-1.458 1.553s-.505 1.279-.58 2.063c-.073.76-.073 1.691-.073 2.861v.888c0 1.17 0 2.1.073 2.86c.075.785.232 1.446.58 2.064c.349.619.83 1.091 1.458 1.553c.607.446 1.394.912 2.38 1.496l.754.446c.985.584 1.773 1.05 2.454 1.367c.703.326 1.346.52 2.051.52s1.348-.194 2.051-.52c.68-.317 1.469-.783 2.454-1.367l.754-.446c.986-.584 1.773-1.05 2.38-1.496c.628-.462 1.11-.934 1.458-1.553s.505-1.279.58-2.063c.073-.76.073-1.691.073-2.86v-.889c0-1.17 0-2.1-.073-2.86c-.075-.785-.232-1.446-.58-2.064c-.349-.619-.83-1.091-1.458-1.553c-.607-.446-1.394-.912-2.38-1.496l-.754-.446c-.985-.584-1.773-1.05-2.454-1.367c-.703-.326-1.346-.52-2.051-.52M8.225 4.447c1.027-.608 1.751-1.035 2.356-1.316c.59-.274 1.01-.381 1.419-.381s.83.107 1.42.38c.604.282 1.328.71 2.355 1.317l.686.407c1.027.608 1.75 1.037 2.29 1.434c.526.387.83.71 1.038 1.08c.21.371.33.806.395 1.47c.065.68.066 1.54.066 2.756v.812c0 1.216 0 2.075-.066 2.755c-.064.665-.185 1.1-.395 1.471c-.208.37-.512.693-1.038 1.08c-.54.397-1.263.826-2.29 1.434l-.686.407c-1.027.608-1.751 1.035-2.356 1.316c-.59.274-1.01.381-1.419.381s-.83-.107-1.42-.38c-.604-.282-1.328-.71-2.355-1.317l-.686-.407c-1.027-.608-1.75-1.037-2.29-1.434c-.526-.387-.83-.71-1.038-1.08c-.21-.371-.331-.806-.395-1.47c-.065-.68-.066-1.54-.066-2.756v-.812c0-1.216 0-2.075.066-2.755c.064-.665.185-1.1.394-1.471c.209-.37.513-.693 1.04-1.08c.54-.397 1.262-.826 2.29-1.434z" })
+                    ] })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LeftbarButtion,
+              {
+                title: titles[DrawerConentType.ComponentTest],
+                selected: selectedDrawerType === DrawerConentType.ComponentTest,
+                onPress: () => handleOpenDrawer(DrawerConentType.ComponentTest),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "size-5",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "path",
+                      {
+                        fill: "currentColor",
+                        fillRule: "evenodd",
+                        d: "M9.295 1.354a.75.75 0 0 0-.764 1.292l.196.116L2.002 14.37a5.577 5.577 0 0 0 2.051 7.632a5.61 5.61 0 0 0 7.652-2.045l6.729-11.614l.192.11a.75.75 0 0 0 .748-1.3l-.84-.483l-8.408-4.824zM3.3 15.122l6.723-11.606l7.11 4.08l-1.505 2.597l-1.91-1.098a.75.75 0 0 0-.748 1.3l1.906 1.096l-.961 1.66l-3.555-2.045a.75.75 0 1 0-.748 1.3l3.55 2.043l-.885 1.528l-1.964-1.13a.75.75 0 0 0-.748 1.3l1.96 1.128l-1.118 1.93a4.11 4.11 0 0 1-5.606 1.496a4.077 4.077 0 0 1-1.501-5.58m17.875-3.019a1.61 1.61 0 0 0-2.35 0a9 9 0 0 0-.986 1.214c-.284.43-.589 1.008-.589 1.6c0 1.536 1.203 2.834 2.75 2.834s2.75-1.298 2.75-2.833c0-.593-.304-1.17-.589-1.601a9 9 0 0 0-.986-1.214m-1.261 1.031c.029-.03.06-.04.086-.04a.12.12 0 0 1 .087.04c.278.294.587.653.823 1.01c.253.383.34.646.34.774c0 .765-.588 1.333-1.25 1.333s-1.25-.568-1.25-1.333c0-.128.087-.39.34-.775c.236-.356.545-.715.824-1.009",
+                        clipRule: "evenodd"
+                      }
+                    )
                   }
                 )
               }
             )
-          }
-        )
-      ] })
-    ] }),
-    extra
-  ] });
+          ] })
+        ] }),
+        extra
+      ]
+    }
+  );
 }
 function LeftPanel(props) {
   const { hidden, className, children, ...rest } = props;
@@ -200235,7 +200288,7 @@ function NewSectionList(props) {
       ((_a3 = category == null ? void 0 : category.resources) == null ? void 0 : _a3.length) || 0,
       ")"
     ] }),
-    category == null ? void 0 : category.resources.map((resource) => /* @__PURE__ */ jsxRuntimeExports.jsx(ResourceCard, { resource }, resource.name))
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3", children: category == null ? void 0 : category.resources.map((resource) => /* @__PURE__ */ jsxRuntimeExports.jsx(ResourceCard, { resource }, resource.name)) })
   ] });
 }
 function useRegisterComponent(component) {
@@ -200386,7 +200439,14 @@ function ThemeSectionList(props) {
 }
 function GridView(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("grid gap-1", className || "grid-cols-12"), children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: cn("grid gap-1", className || "grid-cols-12"),
+      style: { gridAutoRows: "40px" },
+      children
+    }
+  );
 }
 function CellView(props) {
   const { className, children } = props;
@@ -200394,7 +200454,7 @@ function CellView(props) {
     "div",
     {
       className: cn(
-        "bg-default-200 rounded-sm h-10",
+        "bg-default-200 rounded-sm h-full",
         "group-hover:bg-blue-500",
         className
       ),
@@ -200402,8 +200462,8 @@ function CellView(props) {
     }
   );
 }
-const layout1 = {
-  name: "Layout1",
+const layout1_1 = {
+  name: "Layout1_1",
   title: "单行区块",
   elements: [
     {
@@ -200428,9 +200488,702 @@ const layout1 = {
   ],
   view: /* @__PURE__ */ jsxRuntimeExports.jsx(GridView, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }) })
 };
-const layout2 = {
-  name: "Layout2",
-  title: "双列区块",
+const layout1_2 = {
+  name: "Layout1_2",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout1_3 = {
+  name: "Layout1_3",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" })
+  ] })
+};
+const layout1_4 = {
+  name: "Layout1_4",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout1_5 = {
+  name: "Layout1_5",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout1_6 = {
+  name: "Layout1_6",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" })
+  ] })
+};
+const layout1_7 = {
+  name: "Layout1_7",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout1_8 = {
+  name: "Layout1_8",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" })
+  ] })
+};
+const layout1_9 = {
+  name: "Layout1_9",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-10 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-10", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" })
+  ] })
+};
+const layout1_10 = {
+  name: "Layout1_10",
+  title: "单行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-2"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-2" })
+  ] })
+};
+const layout2_1 = {
+  name: "Layout2_1",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" })
+  ] })
+};
+const layout2_2 = {
+  name: "Layout2_2",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" })
+  ] })
+};
+const layout2_3 = {
+  name: "Layout2_3",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout2_4 = {
+  name: "Layout2_4",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout2_5 = {
+  name: "Layout2_5",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-9"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-9"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-9" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-9" })
+  ] })
+};
+const layout2_6 = {
+  name: "Layout2_6",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-9"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-9"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-9" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-9" })
+  ] })
+};
+const layout2_7 = {
+  name: "Layout2_7",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" })
+  ] })
+};
+const layout2_8 = {
+  name: "Layout2_8",
+  title: "两行区块",
   elements: [
     {
       componentName: "Section",
@@ -200441,6 +201194,12 @@ const layout2 = {
             className: "grid-cols-12 gap-6"
           },
           children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            },
             {
               componentName: "GridCell",
               props: {
@@ -200459,36 +201218,1327 @@ const layout2 = {
     }
   ],
   view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
   ] })
 };
+const layout2_9 = {
+  name: "Layout2_9",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" })
+  ] })
+};
+const layout2_10 = {
+  name: "Layout2_10",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" })
+  ] })
+};
+const layout2_11 = {
+  name: "Layout2_11",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_12 = {
+  name: "Layout2_12",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_13 = {
+  name: "Layout2_13",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_14 = {
+  name: "Layout2_14",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout2_15 = {
+  name: "Layout2_15",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout2_16 = {
+  name: "Layout2_16",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-3"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-3" })
+  ] })
+};
+const layout2_17 = {
+  name: "Layout2_17",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_18 = {
+  name: "Layout2_18",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_19 = {
+  name: "Layout2_19",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_20 = {
+  name: "Layout2_20",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" })
+  ] })
+};
+const layout2_21 = {
+  name: "Layout2_21",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout2_22 = {
+  name: "Layout2_22",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" })
+  ] })
+};
+const layout2_23 = {
+  name: "Layout2_23",
+  title: "两行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout3_1 = {
+  name: "Layout3_1",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-8"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-8" })
+  ] })
+};
+const layout3_2 = {
+  name: "Layout3_2",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-4"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-4" })
+  ] })
+};
+const layout3_3 = {
+  name: "Layout3_3",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" })
+  ] })
+};
+const layout3_4 = {
+  name: "Layout3_4",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout3_5 = {
+  name: "Layout3_5",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-12"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-12" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout3_6 = {
+  name: "Layout3_6",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout3_7 = {
+  name: "Layout3_7",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
+const layout3_8 = {
+  name: "Layout3_8",
+  title: "三行区块",
+  elements: [
+    {
+      componentName: "Section",
+      children: [
+        {
+          componentName: "Grid",
+          props: {
+            className: "grid-cols-12 gap-6"
+          },
+          children: [
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6 row-span-2"
+              }
+            },
+            {
+              componentName: "GridCell",
+              props: {
+                className: "col-span-6"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  view: /* @__PURE__ */ jsxRuntimeExports.jsxs(GridView, { className: "grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6 row-span-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CellView, { className: "col-span-6" })
+  ] })
+};
 const newSectionCategories = [
   {
     id: "single",
     title: "单行",
-    resources: [layout1, layout2]
+    resources: [
+      layout1_1,
+      layout1_2,
+      layout1_3,
+      layout1_4,
+      layout1_5,
+      layout1_6,
+      layout1_7,
+      layout1_8,
+      layout1_9,
+      layout1_10
+    ]
   },
   {
     id: "double",
     title: "两行",
-    resources: [layout1, layout2]
+    resources: [
+      layout2_1,
+      layout2_2,
+      layout2_3,
+      layout2_4,
+      layout2_5,
+      layout2_6,
+      layout2_7,
+      layout2_8,
+      layout2_9,
+      layout2_10,
+      layout2_11,
+      layout2_12,
+      layout2_13,
+      layout2_14,
+      layout2_15,
+      layout2_16,
+      layout2_17,
+      layout2_18,
+      layout2_19,
+      layout2_20,
+      layout2_21,
+      layout2_22,
+      layout2_23
+    ]
   },
   {
     id: "triple",
     title: "三行",
-    resources: [layout1, layout2]
-  },
-  {
-    id: "header",
-    title: "页眉",
-    resources: [layout1, layout2]
-  },
-  {
-    id: "footer",
-    title: "页脚",
-    resources: [layout1, layout2]
+    resources: [
+      layout3_1,
+      layout3_2,
+      layout3_3,
+      layout3_4,
+      layout3_5,
+      layout3_6,
+      layout3_7,
+      layout3_8
+    ]
   }
+  // {
+  //   id: "header",
+  //   title: "页头",
+  //   resources: [layout1_1, layout1_2],
+  // },
+  // {
+  //   id: "footer",
+  //   title: "页脚",
+  //   resources: [layout1_1, layout1_2],
+  // },
 ];
 function SectionsPanel(props) {
   const { hidden } = props;
@@ -201336,6 +203386,19 @@ const baseComponents = [
       }
     ]
   },
+  {
+    id: "carousel",
+    name: "Carousel",
+    title: "轮播",
+    description: "轮播组件",
+    categoryId: "navigation",
+    icon: CarouselIcon,
+    elements: [
+      {
+        componentName: "Carousel"
+      }
+    ]
+  },
   // 反馈组件
   {
     id: "popover",
@@ -201960,8 +204023,8 @@ function PropsSchema(props) {
   const setDrawerType = useStudioStore((state) => state.setDrawerType);
   const setInitValue = useCallback(() => {
     var _a3;
-    if (editingComponent == null ? void 0 : editingComponent.props) {
-      setValue(JSON.stringify((_a3 = editingComponent == null ? void 0 : editingComponent.props) == null ? void 0 : _a3.tabs, null, 2));
+    if (editingComponent == null ? void 0 : editingComponent.propsSchema) {
+      setValue(JSON.stringify((_a3 = editingComponent == null ? void 0 : editingComponent.propsSchema) == null ? void 0 : _a3.tabs, null, 2));
     } else {
       setValue(JSON.stringify([], null, 2));
     }
@@ -201983,8 +204046,8 @@ function PropsSchema(props) {
     if (editingComponent) {
       onChangeComponent({
         ...editingComponent,
-        props: {
-          ...editingComponent.props,
+        propsSchema: {
+          ...editingComponent.propsSchema,
           tabs: (value == null ? void 0 : value.trim()) ? JSON.parse(value == null ? void 0 : value.trim()) : void 0
         }
       });
@@ -204207,7 +206270,16 @@ function ThemeDesigner() {
       docIdRef.current && removeDocument(docIdRef.current);
       setDocId(void 0);
     }
-  }, [code, config2, createDocument, engine, removeDocument, schema, onlyCode, setViewMode]);
+  }, [
+    code,
+    config2,
+    createDocument,
+    engine,
+    removeDocument,
+    schema,
+    onlyCode,
+    setViewMode
+  ]);
   const handleRefChange = useCallback(
     (el) => {
       var _a3, _b3;
@@ -204252,15 +206324,25 @@ function ThemeDesigner() {
             selectedDrawerType: drawerType,
             selectedContent,
             onSelectDrawerType: handleDrawerTypeChange,
-            extra: website && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              LeftbarButtion,
-              {
-                title: "媒体库",
-                selected: mediaLibOpen,
-                onPress: handleOpenMediaLib,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediasIcon, { className: "size-5" })
-              }
-            )
+            extra: website && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LeftbarButtion,
+                {
+                  title: "媒体库",
+                  selected: mediaLibOpen,
+                  onPress: handleOpenMediaLib,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediasIcon, { className: "size-5" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LeftbarButtion,
+                {
+                  title: "Svg图标库",
+                  selected: mediaLibOpen,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(StarsIcon, { className: "size-5" })
+                }
+              )
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -204834,7 +206916,16 @@ function WebsiteDesigner(props) {
       }
       setDocId(void 0);
     }
-  }, [code, config2, createDocument, engine, removeDocument, schema, onlyCode, setViewMode]);
+  }, [
+    code,
+    config2,
+    createDocument,
+    engine,
+    removeDocument,
+    schema,
+    onlyCode,
+    setViewMode
+  ]);
   const handleRefChange = useCallback(
     (el) => {
       var _a3, _b3;
@@ -204879,15 +206970,25 @@ function WebsiteDesigner(props) {
                 selectedDrawerType: drawerType,
                 selectedContent,
                 onSelectDrawerType: handleDrawerTypeChange,
-                extra: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LeftbarButtion,
-                  {
-                    title: "媒体库",
-                    selected: mediaLibOpen,
-                    onPress: handleOpenMediaLib,
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediasIcon, { className: "size-5" })
-                  }
-                )
+                extra: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LeftbarButtion,
+                    {
+                      title: "媒体库",
+                      selected: mediaLibOpen,
+                      onPress: handleOpenMediaLib,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediasIcon, { className: "size-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LeftbarButtion,
+                    {
+                      title: "Svg图标库",
+                      selected: mediaLibOpen,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(StarsIcon, { className: "size-5" })
+                    }
+                  )
+                ] })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -204977,4 +207078,4 @@ export {
   typescriptDefaults as t,
   useCustomizedMaterials as u
 };
-//# sourceMappingURL=index-c56cb64e.js.map
+//# sourceMappingURL=index-55da451c.js.map