webstudio 0.197.0 → 0.199.0

package/lib/cli.js

@@ -105,6 +105,11 @@ const INTERNAL_TEMPLATES = [
     value: "cloudflare",
     label: "Cloudflare",
     expand: ["defaults", "cloudflare"]
+  },
+  {
+    value: "react-router-docker",
+    label: "Dokcer",
+    expand: ["react-router-docker"]
   }
 ];
 const isFileExists = async (filePath) => {
@@ -1955,148 +1960,574 @@ z.object({
   template: z.optional(WsEmbedTemplate),
   order: z.number().optional()
 });
-const ROOT_INSTANCE_ID = ":root";
-const traverseInstances = (instances, instanceId, callback) => {
-  const instance = instances.get(instanceId);
-  if (instance === void 0) {
-    return;
-  }
-  const skipTraversingChildren = callback(instance);
-  if (skipTraversingChildren === false) {
-    return;
+const AccordionIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.056 8H14.5V4.101a1.3 1.3 0 0 0-1.3-1.299H2.8a1.3 1.3 0 0 0-1.3 1.3V8H13.056ZM13.056 13.198h.145a1.3 1.3 0 0 0 1.299-1.3V8h-13v3.899a1.3 1.3 0 0 0 1.3 1.299h10.256Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.026 4.913.975.976.976-.976M10.026 10.111l.975.976.976-.976"/></svg>`;
+const AddTemplateInstanceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 14h2M2 7v2M8.461 4.77H14M11.23 2v5.538"/></svg>`;
+const BlockquoteIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" d="M6.667 8H3.333a.667.667 0 0 1-.666-.667V5a.667.667 0 0 1 .666-.667H6A.667.667 0 0 1 6.667 5v3Zm0 0C6.667 9.667 6 10.667 4 11.667M13.333 8H10a.667.667 0 0 1-.667-.667V5A.667.667 0 0 1 10 4.333h2.667a.667.667 0 0 1 .666.667v3Zm0 0c0 1.667-.666 2.667-2.666 3.667"/></svg>`;
+const BodyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM2 6h12"/></svg>`;
+const BoldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h6a2.667 2.667 0 0 1 0 5.333H4.667A.667.667 0 0 1 4 12.667V3.333a.667.667 0 0 1 .667-.666h4.666a2.667 2.667 0 1 1 0 5.333"/></svg>`;
+const BoxIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/></svg>`;
+const BracesIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 2h-.666a1.333 1.333 0 0 0-1.334 1.333v3.334A1.333 1.333 0 0 1 2 8a1.333 1.333 0 0 1 1.333 1.333v3.334c0 .733.6 1.333 1.334 1.333h.666M10.667 14h.666a1.333 1.333 0 0 0 1.334-1.333V9.333C12.667 8.6 13.267 8 14 8a1.333 1.333 0 0 1-1.333-1.333V3.333A1.333 1.333 0 0 0 11.333 2h-.666"/></svg>`;
+const ButtonElementIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M1.833 8a3.5 3.5 0 0 1 3.5-3.5h5.334a3.5 3.5 0 1 1 0 7H5.333a3.5 3.5 0 0 1-3.5-3.5Zm3.5-4.5a4.5 4.5 0 0 0 0 9h5.334a4.5 4.5 0 1 0 0-9H5.333ZM5.72 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4.28-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd"/></svg>`;
+const CalendarIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.333 9.333H8V12M10.667 1.333V4M2 6.667h12M5.333 1.333V4"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2.667H3.333C2.597 2.667 2 3.264 2 4v9.333c0 .737.597 1.334 1.333 1.334h9.334c.736 0 1.333-.597 1.333-1.334V4c0-.736-.597-1.333-1.333-1.333Z"/></svg>`;
+const CheckMarkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.091" d="m13.636 3.667-8 8L2 8.03"/></svg>`;
+const CheckboxCheckedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 8.238 1.383 1.383L10.003 7"/></svg>`;
+const CollapsibleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 14.667v-4M8 5.333v-4M2.5 8h-1M6.5 8h-1M10.5 8h-1M14.5 8h-1M10 12.667l-2-2-2 2M10 3.333l-2 2-2-2"/></svg>`;
+const ContentBlockIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 2H3.333A1.333 1.333 0 0 0 2 3.333v9.334A1.333 1.333 0 0 0 3.333 14h9.334A1.334 1.334 0 0 0 14 12.667V8"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.25 1.75a1.414 1.414 0 1 1 2 2L8.24 9.76a1.333 1.333 0 0 1-.568.336l-1.916.56a.334.334 0 0 1-.413-.413l.56-1.916c.063-.214.179-.41.337-.568L12.25 1.75Z"/></svg>`;
+const ContentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.666 8H10m-5.333 2.667h4M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v9.188c0 .724-.588 1.312-1.313 1.312H3.313A1.312 1.312 0 0 1 2 12.687V3.5Z"/></svg>`;
+const DialogIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/><path fill="#fff" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.334 5.667H4.667v4.666h6.667V5.667Z"/></svg>`;
+const EmbedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 10.667 14.667 8 12 5.333M4 5.333 1.333 8 4 10.667M9.667 2.667 6.333 13.333"/></svg>`;
+const FormTextAreaIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.522C14 2.682 13.318 2 12.478 2h-9C2.662 2 2 2.662 2 3.478v9.189C2 13.403 2.597 14 3.333 14ZM3.83 6.636V3.943"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.496 13.76 1.724-1.725 1.717-1.717"/></svg>`;
+const FormTextFieldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 2.667H4a2 2 0 0 1 2 2 2 2 0 0 1 2-2h.667M8.667 13.333H8a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-.667M3.333 10.667h-.666a1.333 1.333 0 0 1-1.334-1.334V6.667a1.333 1.333 0 0 1 1.334-1.334h.666M8.667 5.333h4.666a1.333 1.333 0 0 1 1.334 1.334v2.666a1.333 1.333 0 0 1-1.334 1.334H8.667M6 4.667v6.666"/></svg>`;
+const FormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 5.5h.731a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.085a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099ZM13.184 10.5h.732a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.084a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099Z"/><path fill="currentColor" d="M6.613 14.5h.222a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H6.613Z"/></svg>`;
+const HeaderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM4 4h8"/></svg>`;
+const HeadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h8M4 13.333V2.667M12 13.333V2.667"/></svg>`;
+const ImageIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14"/></svg>`;
+const ItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2 6h.007M5.333 10H14M5.333 6H14"/></svg>`;
+const LabelIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.476 11.074V4.926m0 6.148h3.77v-.615m-3.77.615h-.722m.722-6.148h.632m-.632 0h-.722"/></svg>`;
+const LinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.943 11.771 8 12.714A3.333 3.333 0 0 1 3.286 8l.943-.943M7.057 4.229 8 3.286A3.333 3.333 0 1 1 12.714 8l-.943.943M6.114 9.886l3.772-3.772"/></svg>`;
+const ListItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M3.7 6.175a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 6.175c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 6.175ZM5 10.05c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 10.05Z" clip-rule="evenodd"/></svg>`;
+const ListViewIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M3.333 2.5a.833.833 0 0 0-.833.833v9.334c0 .46.373.833.833.833h9.334c.46 0 .833-.373.833-.833V3.333a.833.833 0 0 0-.833-.833H3.333ZM1.5 3.333c0-1.012.82-1.833 1.833-1.833h9.334c1.012 0 1.833.82 1.833 1.833v9.334c0 1.012-.82 1.833-1.833 1.833H3.333A1.833 1.833 0 0 1 1.5 12.667V3.333Z" clip-rule="evenodd"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 6H2M14 10H2"/></svg>`;
+const ListIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M3.7 4.35a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 4.35c0-.346.28-.626.625-.626h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 4.35Z" clip-rule="evenodd"/><path d="M3.7 8A.85.85 0 1 1 2 8a.85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 8c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 8Z" clip-rule="evenodd"/><path d="M3.7 11.65a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 11.65c0-.346.28-.626.625-.626h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 11.65Z" clip-rule="evenodd"/></svg>`;
+const MarkdownEmbedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.191c0 .725.588 1.313 1.313 1.313h4.691"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 14.314v-4l2 2.03 2-2.03v4"/></svg>`;
+const MinusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 8h9.334"/></svg>`;
+const NavigationMenuIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 7v5.833c0 .645-.597 1.167-1.333 1.167H3.333C2.597 14 2 13.478 2 12.833V7"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.978 2.003H2.6a.6.6 0 0 0-.6.6v1.4h11.971v-1.4a.6.6 0 0 0-.6-.6h-2.393Z"/></svg>`;
+const OverlayIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/></svg>`;
+const PaintBrushIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6.04 7.933 5.38-5.373a1.9 1.9 0 1 1 2.687 2.687l-5.374 5.386M4.713 9.96c-1.106 0-2 .9-2 2.013 0 .887-1.666 1.014-1.333 1.347.72.733 1.66 1.347 2.667 1.347 1.466 0 2.666-1.2 2.666-2.694a2.007 2.007 0 0 0-2-2.013Z"/></svg>`;
+const PopoverIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 6V4a1.334 1.334 0 0 0-1.333-1.333h-10A1.333 1.333 0 0 0 1.333 4v6.667c0 .733.6 1.333 1.334 1.333h2.666"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.333 8.667h-4C8.597 8.667 8 9.264 8 10v2c0 .736.597 1.333 1.333 1.333h4c.737 0 1.334-.597 1.334-1.333v-2c0-.736-.597-1.333-1.334-1.333Z"/></svg>`;
+const RadioCheckedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>`;
+const RadioGroupIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.839 8a1.82 1.82 0 1 1-3.64 0 1.82 1.82 0 0 1 3.64 0Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.019 13.027a5.027 5.027 0 1 0 0-10.054 5.027 5.027 0 0 0 0 10.054Z"/><path stroke="#000" stroke-linecap="round" d="M12.629 12.077v0a6.73 6.73 0 0 0-.337-8.565v0"/></svg>`;
+const ResourceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.252c0 .69.56 1.25 1.25 1.25v0H6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.45 14.5h-.7a1.75 1.75 0 1 1 0-3.5h.7M12.55 11h.7a1.75 1.75 0 1 1 0 3.5h-.7M10.1 12.75h2.8"/></svg>`;
+const SelectIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 10.33h.149c.736 0 1.332-.597 1.332-1.332V6.332c0-.735-.596-1.332-1.332-1.332H2.667c-.735 0-1.332.597-1.332 1.332v2.666c0 .735.597 1.332 1.333 1.332h10.516Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.078 7.165 1 1 1-1"/></svg>`;
+const SettingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.987 6H9.32M13.932 6h-12M14 10.5H2"/><rect width="4" height="4" x="1.932" y="8.534" fill="#fff" stroke="currentColor" rx="2"/><rect width="4" height="4" x="10.068" y="4" fill="#fff" stroke="currentColor" rx="2"/></svg>`;
+const SlotComponentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 4.5V3.333A1.333 1.333 0 0 0 12.667 2H11.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 2h2M7 14h2M2 7v2M14 7v2"/></svg>`;
+const SubscriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 3.333 8 8.667M8 3.333 2.667 8.667M13.333 12.667h-2.666c0-1 .293-1.334 1-1.667.706-.333 1.666-.78 1.666-1.667 0-.313-.113-.62-.32-.86a1.407 1.407 0 0 0-1.746-.293c-.28.16-.494.413-.6.713"/></svg>`;
+const SuperscriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 12.667 8 7.333M8 12.667 2.667 7.333M13.333 8h-2.666c0-1 .294-1.333 1-1.667.705-.333 1.666-.777 1.666-1.665 0-.315-.113-.62-.322-.86a1.403 1.403 0 0 0-1.745-.29c-.28.159-.492.409-.6.706"/></svg>`;
+const SwitchIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.667 4H5.333a4 4 0 1 0 0 8h5.334a4 4 0 0 0 0-8Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 9.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666Z"/></svg>`;
+const TabsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.75 5H13M9.75 5H7.401A1.684 1.684 0 0 1 6 4.25v0l-.5-.75-.5-.75L4.5 2m5.25 3-1-1.5-.5-.75-.5-.75M4.5 2H3v0a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 3 14h10v0a1.5 1.5 0 0 0 1.5-1.5v0-6A1.5 1.5 0 0 0 13 5v0M4.5 2h3.25m0 0h2.375v0c.547 0 1.057.273 1.36.728l.015.022.5.75L13 5"/></svg>`;
+const TextAlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 8H2M11.333 12H2M14 4H2"/></svg>`;
+const TextItalicIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2.667h-6M9.333 13.333h-6M10 2.667 6 13.333"/></svg>`;
+const TextIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 4.667v-2h10.666v2M6 13.333h4M8 2.667v10.666"/></svg>`;
+const TooltipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14 10a1.333 1.333 0 0 1-1.333 1.333h-8L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z"/></svg>`;
+const TriggerIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.915 7.354v-.647a1.294 1.294 0 1 0-2.587 0"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.328 6.707V6.06a1.294 1.294 0 1 0-2.587 0v.647"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.74 6.383V2.826a1.293 1.293 0 1 0-2.586 0v6.467"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.914 7.353a1.293 1.293 0 0 1 2.587 0v1.94a5.174 5.174 0 0 1-5.174 5.174H8.034c-1.81 0-2.91-.556-3.874-1.513l-2.328-2.328a1.293 1.293 0 0 1 1.83-1.824L4.8 9.94"/></svg>`;
+const ViewportIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M5.173 1.35h.157a.65.65 0 0 1 0 1.3H5.2c-.57 0-.96 0-1.26.025-.294.024-.446.068-.553.122a1.35 1.35 0 0 0-.59.59c-.054.107-.098.259-.122.552-.025.301-.025.69-.025 1.261v.13a.65.65 0 0 1-1.3 0v-.157c0-.537 0-.98.03-1.34.03-.373.095-.715.259-1.036a2.65 2.65 0 0 1 1.158-1.158c.32-.164.663-.229 1.036-.26.36-.029.803-.029 1.34-.029Zm6.888 1.325c-.301-.024-.69-.025-1.261-.025h-.13a.65.65 0 1 1 0-1.3h.157c.537 0 .98 0 1.34.03.373.03.715.095 1.036.259.499.254.904.66 1.158 1.158.164.32.229.663.26 1.036.029.36.029.803.029 1.34v.157a.65.65 0 1 1-1.3 0V5.2c0-.57 0-.96-.025-1.26-.024-.294-.068-.446-.122-.553a1.35 1.35 0 0 0-.59-.59c-.107-.054-.26-.098-.552-.122ZM2 10.02a.65.65 0 0 1 .65.65v.13c0 .57 0 .96.025 1.26.024.294.068.446.122.553.13.254.336.46.59.59.107.054.259.098.552.122.301.025.69.025 1.261.025h.13a.65.65 0 1 1 0 1.3h-.157c-.537 0-.98 0-1.34-.03-.373-.03-.715-.095-1.036-.259a2.65 2.65 0 0 1-1.158-1.158c-.164-.32-.23-.663-.26-1.037-.029-.36-.029-.802-.029-1.34v-.156a.65.65 0 0 1 .65-.65Zm12 0a.65.65 0 0 1 .65.65v.157c0 .537 0 .98-.03 1.34-.03.373-.095.715-.259 1.036a2.65 2.65 0 0 1-1.158 1.158c-.32.164-.663.23-1.037.26-.36.029-.802.029-1.34.029h-.156a.65.65 0 1 1 0-1.3h.13c.57 0 .96 0 1.26-.025.294-.024.446-.068.553-.122.254-.13.46-.336.59-.59.054-.107.098-.259.122-.552.025-.301.025-.69.025-1.261v-.13a.65.65 0 0 1 .65-.65ZM8 10.033a2.033 2.033 0 1 0 0-4.066 2.033 2.033 0 0 0 0 4.066Zm0 1.3a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666Z" clip-rule="evenodd"/></svg>`;
+const VimeoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.993 4.801c-.062 1.363-1.014 3.228-2.855 5.597-1.903 2.473-3.514 3.71-4.83 3.71-.817 0-1.508-.753-2.072-2.26l-1.13-4.143c-.419-1.506-.868-2.259-1.349-2.26a4.332 4.332 0 0 0-1.099.66L1 5.257c.69-.607 1.372-1.214 2.043-1.822.921-.796 1.613-1.215 2.074-1.257 1.09-.105 1.76.64 2.012 2.234.272 1.72.461 2.79.566 3.208.315 1.427.66 2.14 1.038 2.14.292 0 .733-.463 1.32-1.39.586-.925.9-1.63.942-2.113.084-.798-.23-1.198-.942-1.199-.357.005-.71.084-1.036.23.688-2.253 2.002-3.349 3.942-3.285 1.439.042 2.117.975 2.034 2.798Z"/></svg>`;
+const WebhookFormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 11.32H8.007c-.734 0-1.3.627-1.654 1.267a2.666 2.666 0 0 1-5.02-1.254A2.62 2.62 0 0 1 1.713 10"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 11.333 6.087 7.48c.353-.647.066-1.453-.334-2.067a2.667 2.667 0 1 1 4.594-2.706"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m8 4 2.087 3.82c.353.647 1.18.847 1.913.847A2.667 2.667 0 0 1 12 14"/></svg>`;
+const WindowInfoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM8 11.516V7.853"/><rect width="1.4" height="1.4" x="7.3" y="4.484" fill="currentColor" rx=".7"/></svg>`;
+const WindowTitleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 4H3.333C2.597 4 2 4.497 2 5.111v7.778C2 13.503 2.597 14 3.333 14h9.334c.736 0 1.333-.498 1.333-1.111V5.11C14 4.497 13.403 4 12.667 4ZM4 2h8"/></svg>`;
+const XmlIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.163 9.02v-4L8.83 1.686h-5.5A1.333 1.333 0 0 0 1.997 3.02v6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.164 2.186v1.667a1.333 1.333 0 0 0 1.333 1.333h2.667M1.997 11.314l3 3M4.997 11.314l-3 3M6.997 14.314v-3l1.5 1.523 1.5-1.523v3M12.163 11.314v3h1.84"/></svg>`;
+const YoutubeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path d="M.892 11.528a18.047 18.047 0 0 1 0-7.482A1.496 1.496 0 0 1 1.94 3a37.082 37.082 0 0 1 12.12 0 1.497 1.497 0 0 1 1.048 1.047 18.046 18.046 0 0 1 0 7.482 1.497 1.497 0 0 1-1.048 1.048 37.077 37.077 0 0 1-12.12 0 1.497 1.497 0 0 1-1.048-1.048Z"/><path d="m6.5 10.3 4-2.4-4-2.4v4.8Z"/></svg>`;
+const div = [
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "outlineWidth", value: { type: "unit", unit: "px", value: 1 } }
+];
+const address = div;
+const article = div;
+const aside = div;
+const figure = div;
+const footer = div;
+const header = div;
+const main$1 = div;
+const nav = div;
+const section = div;
+const form = div;
+const label = div;
+const time = div;
+const h1 = div;
+const h2 = div;
+const h3 = div;
+const h4 = div;
+const h5 = div;
+const h6 = div;
+const i = div;
+const img = div;
+const a = div;
+const li = div;
+const ul = div;
+const ol = div;
+const p = div;
+const span = div;
+const html = [
+  { property: "display", value: { type: "keyword", value: "grid" } },
+  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "fontFamily",
+    value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
+  },
+  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.2 }
+  },
+  {
+    property: "whiteSpaceCollapse",
+    value: { type: "keyword", value: "preserve" }
   }
-  for (const child of instance.children) {
-    if (child.type === "id") {
-      traverseInstances(instances, child.value, callback);
-    }
+];
+const body = [
+  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "marginRight",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
   }
-};
-const findTreeInstanceIds = (instances, rootInstanceId) => {
-  const ids = /* @__PURE__ */ new Set([rootInstanceId]);
-  traverseInstances(instances, rootInstanceId, (instance) => {
-    ids.add(instance.id);
-  });
-  return ids;
-};
-const parseComponentName = (componentName) => {
-  const parts = componentName.split(":");
-  let namespace;
-  let name2;
-  if (parts.length === 1) {
-    [name2] = parts;
-  } else {
-    [namespace, name2] = parts;
+];
+const hr = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
   }
-  return [namespace, name2];
-};
-const transpileExpression = ({
-  expression,
-  executable = false,
-  replaceVariable
-}) => {
-  let root;
-  try {
-    root = parseExpressionAt(expression, 0, { ecmaVersion: "latest" });
-  } catch (error) {
-    const message = error.message;
-    throw Error(`${message} in ${JSON.stringify(expression)}`);
+];
+const b = [
+  {
+    property: "fontWeight",
+    value: { type: "unit", unit: "number", value: 700 }
+  },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
   }
-  const replacements = [];
-  const replaceIdentifier = (node, assignee) => {
-    const newName = replaceVariable == null ? void 0 : replaceVariable(node.name, assignee);
-    if (newName) {
-      replacements.push([node.start, node.end, newName]);
-    }
-  };
-  simple(root, {
-    Identifier: (node) => replaceIdentifier(node, false),
-    AssignmentExpression(node) {
-      simple(node.left, {
-        Identifier: (node2) => replaceIdentifier(node2, true)
-      });
-    },
-    MemberExpression(node) {
-      if (executable === false || node.optional) {
-        return;
-      }
-      if (node.computed === false) {
-        const dotIndex = expression.indexOf(".", node.object.end);
-        replacements.push([dotIndex, dotIndex, "?"]);
-      }
-      if (node.computed === true) {
-        const dotIndex = expression.indexOf("[", node.object.end);
-        replacements.push([dotIndex, dotIndex, "?."]);
-      }
+];
+const code = [
+  {
+    property: "fontFamily",
+    value: {
+      type: "fontFamily",
+      value: [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Consolas",
+        "Liberation Mono",
+        "Menlo",
+        "monospace"
+      ]
     }
-  });
-  replacements.sort(([leftStart], [rightStart]) => rightStart - leftStart);
-  for (const [start, end, fragment] of replacements) {
-    const before = expression.slice(0, start);
-    const after = expression.slice(end);
-    expression = before + fragment + after;
+  },
+  { property: "fontSize", value: { type: "unit", unit: "em", value: 1 } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
   }
-  return expression;
-};
-const dataSourceVariablePrefix = "$ws$dataSource$";
-const decodeDataSourceVariable = (name2) => {
-  if (name2.startsWith(dataSourceVariablePrefix)) {
-    const encoded = name2.slice(dataSourceVariablePrefix.length);
-    return encoded.replaceAll("__DASH__", "-");
+];
+const sub = [
+  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
+  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "position", value: { type: "keyword", value: "relative" } },
+  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } }
+];
+const sup = [
+  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
+  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "position", value: { type: "keyword", value: "relative" } },
+  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "top", value: { type: "unit", unit: "em", value: -0.5 } }
+];
+const input = [
+  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
+  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "marginRight",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
+  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
+  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
+  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } }
+];
+const textarea = input;
+const radio = [
+  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
+  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "marginRight",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "borderTopStyle", value: { type: "keyword", value: "none" } },
+  { property: "borderRightStyle", value: { type: "keyword", value: "none" } },
+  { property: "borderBottomStyle", value: { type: "keyword", value: "none" } },
+  { property: "borderLeftStyle", value: { type: "keyword", value: "none" } }
+];
+const checkbox = radio;
+const button = [
+  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
+  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "marginRight",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
+  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
+  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
+  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } },
+  { property: "textTransform", value: { type: "keyword", value: "none" } }
+];
+const select = button;
+const rootComponent = "ws:root";
+const rootMeta = {
+  type: "container",
+  label: "Global Root",
+  icon: SettingsIcon,
+  presetStyle: {
+    html
   }
-  return;
 };
-const generateExpression = ({
-  expression,
-  dataSources,
-  usedDataSources,
-  scope
-}) => {
-  return transpileExpression({
-    expression,
-    executable: true,
-    replaceVariable: (identifier) => {
-      const depId = decodeDataSourceVariable(identifier);
-      const dep = depId ? dataSources.get(depId) : void 0;
-      if (dep) {
-        usedDataSources == null ? void 0 : usedDataSources.set(dep.id, dep);
-        return scope.getName(dep.id, dep.name);
-      }
-    }
-  });
+const collectionComponent = "ws:collection";
+const collectionMeta = {
+  type: "container",
+  label: "Collection",
+  icon: ListViewIcon,
+  stylable: false
 };
-const executeExpression = (expression) => {
-  try {
-    const fn = new Function(`return (${expression})`);
-    return fn();
-  } catch {
+const descendantComponent = "ws:descendant";
+const descendantMeta = {
+  type: "control",
+  label: "Descendant",
+  icon: PaintBrushIcon,
+  constraints: {
+    relation: "parent",
+    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
   }
 };
-const tokenRegex = new RegExp(":(?<name>\\w+)(?<modifier>[?*]?)|(?<wildcard>(?<!:\\w+)\\*)");
-const isPathnamePattern = (pathname) => tokenRegex.test(pathname);
-const findPageByIdOrPath = (idOrPath, pages) => {
-  if (idOrPath === "" || idOrPath === "/" || idOrPath === pages.homePage.id) {
-    return pages.homePage;
+const blockComponent = "ws:block";
+const blockTemplateComponent = "ws:block-template";
+const blockTemplateMeta = {
+  type: "container",
+  icon: AddTemplateInstanceIcon,
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: blockComponent }
   }
-  return pages.pages.find(
-    (page) => page.id === idOrPath || getPagePath(page.id, pages) === idOrPath
-  );
 };
-const getPagePath = (id, pages) => {
-  const foldersMap = /* @__PURE__ */ new Map();
-  const childParentMap = /* @__PURE__ */ new Map();
-  for (const folder of pages.folders) {
-    foldersMap.set(folder.id, folder);
-    for (const childId of folder.children) {
-      childParentMap.set(childId, folder.id);
-    }
-  }
-  const paths = [];
-  let currentId = id;
-  const allPages = [pages.homePage, ...pages.pages];
-  for (const page of allPages) {
-    if (page.id === id) {
-      paths.push(page.path);
-      currentId = childParentMap.get(page.id);
+const blockMeta = {
+  type: "container",
+  label: "Content Block",
+  icon: ContentBlockIcon,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $nin: [collectionComponent, blockComponent] }
+    },
+    {
+      relation: "child",
+      component: { $eq: blockTemplateComponent }
+    }
+  ],
+  stylable: false
+};
+const coreMetas = {
+  [rootComponent]: rootMeta,
+  [collectionComponent]: collectionMeta,
+  [descendantComponent]: descendantMeta,
+  [blockComponent]: blockMeta,
+  [blockTemplateComponent]: blockTemplateMeta
+};
+const isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+const ROOT_INSTANCE_ID = ":root";
+const traverseInstances = (instances, instanceId, callback) => {
+  const instance = instances.get(instanceId);
+  if (instance === void 0) {
+    return;
+  }
+  const skipTraversingChildren = callback(instance);
+  if (skipTraversingChildren === false) {
+    return;
+  }
+  for (const child of instance.children) {
+    if (child.type === "id") {
+      traverseInstances(instances, child.value, callback);
+    }
+  }
+};
+const findTreeInstanceIds = (instances, rootInstanceId) => {
+  const ids = /* @__PURE__ */ new Set([rootInstanceId]);
+  traverseInstances(instances, rootInstanceId, (instance) => {
+    ids.add(instance.id);
+  });
+  return ids;
+};
+const parseComponentName = (componentName) => {
+  const parts = componentName.split(":");
+  let namespace;
+  let name2;
+  if (parts.length === 1) {
+    [name2] = parts;
+  } else {
+    [namespace, name2] = parts;
+  }
+  return [namespace, name2];
+};
+const transpileExpression = ({
+  expression,
+  executable = false,
+  replaceVariable
+}) => {
+  let root;
+  try {
+    root = parseExpressionAt(expression, 0, { ecmaVersion: "latest" });
+  } catch (error) {
+    const message = error.message;
+    throw Error(`${message} in ${JSON.stringify(expression)}`);
+  }
+  const replacements = [];
+  const replaceIdentifier = (node, assignee) => {
+    const newName = replaceVariable == null ? void 0 : replaceVariable(node.name, assignee);
+    if (newName) {
+      replacements.push([node.start, node.end, newName]);
+    }
+  };
+  simple(root, {
+    Identifier: (node) => replaceIdentifier(node, false),
+    AssignmentExpression(node) {
+      simple(node.left, {
+        Identifier: (node2) => replaceIdentifier(node2, true)
+      });
+    },
+    MemberExpression(node) {
+      if (executable === false || node.optional) {
+        return;
+      }
+      if (node.computed === false) {
+        const dotIndex = expression.indexOf(".", node.object.end);
+        replacements.push([dotIndex, dotIndex, "?"]);
+      }
+      if (node.computed === true) {
+        const dotIndex = expression.indexOf("[", node.object.end);
+        replacements.push([dotIndex, dotIndex, "?."]);
+      }
+    }
+  });
+  replacements.sort(([leftStart], [rightStart]) => rightStart - leftStart);
+  for (const [start, end, fragment] of replacements) {
+    const before = expression.slice(0, start);
+    const after = expression.slice(end);
+    expression = before + fragment + after;
+  }
+  return expression;
+};
+const dataSourceVariablePrefix = "$ws$dataSource$";
+const decodeDataSourceVariable = (name2) => {
+  if (name2.startsWith(dataSourceVariablePrefix)) {
+    const encoded = name2.slice(dataSourceVariablePrefix.length);
+    return encoded.replaceAll("__DASH__", "-");
+  }
+  return;
+};
+const generateExpression = ({
+  expression,
+  dataSources,
+  usedDataSources,
+  scope
+}) => {
+  return transpileExpression({
+    expression,
+    executable: true,
+    replaceVariable: (identifier) => {
+      const depId = decodeDataSourceVariable(identifier);
+      const dep = depId ? dataSources.get(depId) : void 0;
+      if (dep) {
+        usedDataSources == null ? void 0 : usedDataSources.set(dep.id, dep);
+        return scope.getName(dep.id, dep.name);
+      }
+    }
+  });
+};
+const executeExpression = (expression) => {
+  try {
+    const fn = new Function(`return (${expression})`);
+    return fn();
+  } catch {
+  }
+};
+const tokenRegex = new RegExp(":(?<name>\\w+)(?<modifier>[?*]?)|(?<wildcard>(?<!:\\w+)\\*)");
+const isPathnamePattern = (pathname) => tokenRegex.test(pathname);
+const findPageByIdOrPath = (idOrPath, pages) => {
+  if (idOrPath === "" || idOrPath === "/" || idOrPath === pages.homePage.id) {
+    return pages.homePage;
+  }
+  return pages.pages.find(
+    (page) => page.id === idOrPath || getPagePath(page.id, pages) === idOrPath
+  );
+};
+const getPagePath = (id, pages) => {
+  const foldersMap = /* @__PURE__ */ new Map();
+  const childParentMap = /* @__PURE__ */ new Map();
+  for (const folder of pages.folders) {
+    foldersMap.set(folder.id, folder);
+    for (const childId of folder.children) {
+      childParentMap.set(childId, folder.id);
+    }
+  }
+  const paths = [];
+  let currentId = id;
+  const allPages = [pages.homePage, ...pages.pages];
+  for (const page of allPages) {
+    if (page.id === id) {
+      paths.push(page.path);
+      currentId = childParentMap.get(page.id);
       break;
     }
   }
@@ -2227,973 +2658,250 @@ const generateResources = ({
     if (dataSource.type === "parameter") {
       if (dataSource.id !== page.systemDataSourceId) {
         continue;
-      }
-      const name2 = scope.getName(dataSource.id, dataSource.name);
-      generatedVariables += `  const ${name2} = _props.system
-`;
-    }
-  }
-  let generated = "";
-  generated += `import type { System, ResourceRequest } from "@webstudio-is/sdk";
-`;
-  generated += `export const getResources = (_props: { system: System }) => {
-`;
-  generated += generatedVariables;
-  generated += generatedRequests;
-  generated += `  const _data = new Map<string, ResourceRequest>([
-`;
-  for (const dataSource of dataSources.values()) {
-    if (dataSource.type === "resource") {
-      const name2 = scope.getName(dataSource.resourceId, dataSource.name);
-      generated += `    ["${name2}", ${name2}],
-`;
-    }
-  }
-  generated += `  ])
-`;
-  generated += `  const _action = new Map<string, ResourceRequest>([
-`;
-  for (const prop of props2.values()) {
-    if (prop.type === "resource") {
-      const name2 = scope.getName(prop.value, prop.name);
-      generated += `    ["${name2}", ${name2}],
-`;
-    }
-  }
-  generated += `  ])
-`;
-  generated += `  return { data: _data, action: _action }
-`;
-  generated += `}
-`;
-  return generated;
-};
-const getMethod = (value) => {
-  switch (value == null ? void 0 : value.toLowerCase()) {
-    case "get":
-      return "get";
-    case "delete":
-      return "delete";
-    case "put":
-      return "put";
-    default:
-      return "post";
-  }
-};
-const replaceFormActionsWithResources = ({
-  props: props2,
-  instances,
-  resources
-}) => {
-  var _a, _b;
-  const formProps = /* @__PURE__ */ new Map();
-  for (const prop of props2.values()) {
-    if (prop.name === "method" && prop.type === "string" && ((_a = instances.get(prop.instanceId)) == null ? void 0 : _a.component) === "Form") {
-      let data = formProps.get(prop.instanceId);
-      if (data === void 0) {
-        data = {};
-        formProps.set(prop.instanceId, data);
-      }
-      data.method = prop.value;
-      props2.delete(prop.id);
-    }
-    if (prop.name === "action" && prop.type === "string" && prop.value && ((_b = instances.get(prop.instanceId)) == null ? void 0 : _b.component) === "Form") {
-      let data = formProps.get(prop.instanceId);
-      if (data === void 0) {
-        data = {};
-        formProps.set(prop.instanceId, data);
-      }
-      data.action = prop.value;
-      props2.set(prop.id, {
-        id: prop.id,
-        instanceId: prop.instanceId,
-        name: prop.name,
-        type: "resource",
-        value: prop.instanceId
-      });
-    }
-  }
-  for (const [instanceId, { action, method }] of formProps) {
-    if (action) {
-      resources.set(instanceId, {
-        id: instanceId,
-        name: "action",
-        method: getMethod(method),
-        url: JSON.stringify(action),
-        headers: []
-      });
-    }
-  }
-};
-const generatePageMeta = ({
-  globalScope,
-  page,
-  dataSources,
-  assets
-}) => {
-  var _a;
-  const localScope = createScope(["system", "resources"]);
-  const usedDataSources = /* @__PURE__ */ new Map();
-  const titleExpression = generateExpression({
-    expression: page.title,
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  const descriptionExpression = generateExpression({
-    expression: page.meta.description ?? "undefined",
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  const excludePageFromSearchExpression = generateExpression({
-    expression: page.meta.excludePageFromSearch ?? "undefined",
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  const languageExpression = generateExpression({
-    expression: page.meta.language ?? "undefined",
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  const socialImageAssetNameExpression = JSON.stringify(
-    page.meta.socialImageAssetId ? (_a = assets.get(page.meta.socialImageAssetId)) == null ? void 0 : _a.name : void 0
-  );
-  const socialImageUrlExpression = generateExpression({
-    expression: page.meta.socialImageUrl ?? "undefined",
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  const statusExpression = generateExpression({
-    expression: page.meta.status ?? "undefined",
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  const redirectExpression = generateExpression({
-    expression: page.meta.redirect ?? "undefined",
-    dataSources,
-    usedDataSources,
-    scope: localScope
-  });
-  let customExpression = "";
-  customExpression += `[
-`;
-  for (const customMeta of page.meta.custom ?? []) {
-    if (customMeta.property.trim().length === 0) {
-      continue;
-    }
-    const propertyExpression = JSON.stringify(customMeta.property);
-    const contentExpression = generateExpression({
-      expression: customMeta.content,
-      dataSources,
-      usedDataSources,
-      scope: localScope
-    });
-    customExpression += `      {
-`;
-    customExpression += `        property: ${propertyExpression},
-`;
-    customExpression += `        content: ${contentExpression},
-`;
-    customExpression += `      },
-`;
-  }
-  customExpression += `    ]`;
-  let generated = "";
-  generated += `export const getPageMeta = ({
-`;
-  generated += `  system,
-`;
-  generated += `  resources,
-`;
-  generated += `}: {
-`;
-  generated += `  system: System;
-`;
-  generated += `  resources: Record<string, any>;
-`;
-  generated += `}): PageMeta => {
-`;
-  for (const dataSource of usedDataSources.values()) {
-    if (dataSource.type === "variable") {
-      const valueName = localScope.getName(dataSource.id, dataSource.name);
-      const initialValueString = JSON.stringify(dataSource.value.value);
-      generated += `  let ${valueName} = ${initialValueString}
-`;
-      continue;
-    }
-    if (dataSource.type === "parameter") {
-      if (dataSource.id === page.systemDataSourceId) {
-        const valueName = localScope.getName(dataSource.id, dataSource.name);
-        generated += `  let ${valueName} = system
-`;
-      }
-      continue;
-    }
-    if (dataSource.type === "resource") {
-      const valueName = localScope.getName(dataSource.id, dataSource.name);
-      const resourceName = globalScope.getName(
-        dataSource.resourceId,
-        dataSource.name
-      );
-      generated += `  let ${valueName} = resources.${resourceName}
-`;
-      continue;
-    }
-  }
-  generated += `  return {
-`;
-  generated += `    title: ${titleExpression},
-`;
-  generated += `    description: ${descriptionExpression},
-`;
-  generated += `    excludePageFromSearch: ${excludePageFromSearchExpression},
-`;
-  generated += `    language: ${languageExpression},
-`;
-  generated += `    socialImageAssetName: ${socialImageAssetNameExpression},
-`;
-  generated += `    socialImageUrl: ${socialImageUrlExpression},
-`;
-  generated += `    status: ${statusExpression},
-`;
-  generated += `    redirect: ${redirectExpression},
-`;
-  generated += `    custom: ${customExpression},
-`;
-  generated += `  };
-`;
-  generated += `};
-`;
-  return generated;
-};
-const AccordionIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.056 8H14.5V4.101a1.3 1.3 0 0 0-1.3-1.299H2.8a1.3 1.3 0 0 0-1.3 1.3V8H13.056ZM13.056 13.198h.145a1.3 1.3 0 0 0 1.299-1.3V8h-13v3.899a1.3 1.3 0 0 0 1.3 1.299h10.256Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.026 4.913.975.976.976-.976M10.026 10.111l.975.976.976-.976"/></svg>`;
-const AddTemplateInstanceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 14h2M2 7v2M8.461 4.77H14M11.23 2v5.538"/></svg>`;
-const BlockquoteIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M6.142 8.5c-.056.516-.205.928-.465 1.293-.349.488-.933.943-1.9 1.427a.5.5 0 1 0 .447.894c1.032-.516 1.782-1.061 2.266-1.74.494-.691.677-1.47.677-2.374V5c0-.644-.523-1.167-1.167-1.167H3.333c-.644 0-1.166.523-1.166 1.167v2.333c0 .645.522 1.167 1.166 1.167h2.809ZM12.808 8.5c-.055.516-.204.928-.465 1.293-.348.488-.933.943-1.9 1.427a.5.5 0 1 0 .447.894c1.033-.516 1.782-1.061 2.267-1.74.494-.691.676-1.47.676-2.374V5c0-.644-.522-1.167-1.166-1.167H10c-.644 0-1.167.523-1.167 1.167v2.333c0 .645.523 1.167 1.167 1.167h2.808Z" clip-rule="evenodd"/></svg>`;
-const BodyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM2 6h12"/></svg>`;
-const BoldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h6a2.667 2.667 0 0 1 0 5.333H4.667A.667.667 0 0 1 4 12.667V3.333a.667.667 0 0 1 .667-.666h4.666a2.667 2.667 0 1 1 0 5.333"/></svg>`;
-const BoxIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/></svg>`;
-const BracesIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 2h-.666a1.333 1.333 0 0 0-1.334 1.333v3.334A1.333 1.333 0 0 1 2 8a1.333 1.333 0 0 1 1.333 1.333v3.334c0 .733.6 1.333 1.334 1.333h.666M10.667 14h.666a1.333 1.333 0 0 0 1.334-1.333V9.333C12.667 8.6 13.267 8 14 8a1.333 1.333 0 0 1-1.333-1.333V3.333A1.333 1.333 0 0 0 11.333 2h-.666"/></svg>`;
-const ButtonElementIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M1.833 8a3.5 3.5 0 0 1 3.5-3.5h5.334a3.5 3.5 0 1 1 0 7H5.333a3.5 3.5 0 0 1-3.5-3.5Zm3.5-4.5a4.5 4.5 0 0 0 0 9h5.334a4.5 4.5 0 1 0 0-9H5.333ZM5.72 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4.28-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd"/></svg>`;
-const CalendarIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.333 9.333H8V12M10.667 1.333V4M2 6.667h12M5.333 1.333V4"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2.667H3.333C2.597 2.667 2 3.264 2 4v9.333c0 .737.597 1.334 1.333 1.334h9.334c.736 0 1.333-.597 1.333-1.334V4c0-.736-.597-1.333-1.333-1.333Z"/></svg>`;
-const CheckMarkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.091" d="m13.636 3.667-8 8L2 8.03"/></svg>`;
-const CheckboxCheckedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 8.238 1.383 1.383L10.003 7"/></svg>`;
-const CollapsibleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 14.667v-4M8 5.333v-4M2.5 8h-1M6.5 8h-1M10.5 8h-1M14.5 8h-1M10 12.667l-2-2-2 2M10 3.333l-2 2-2-2"/></svg>`;
-const ContentBlockIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 2H3.333A1.333 1.333 0 0 0 2 3.333v9.334A1.333 1.333 0 0 0 3.333 14h9.334A1.334 1.334 0 0 0 14 12.667V8"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.25 1.75a1.414 1.414 0 1 1 2 2L8.24 9.76a1.333 1.333 0 0 1-.568.336l-1.916.56a.334.334 0 0 1-.413-.413l.56-1.916c.063-.214.179-.41.337-.568L12.25 1.75Z"/></svg>`;
-const ContentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.667 8H10M4.667 10.667h4M3.313 14A1.312 1.312 0 0 1 2 12.687v0V3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v9.188"/></svg>`;
-const DialogIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/><path fill="#fff" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.334 5.667H4.667v4.666h6.667V5.667Z"/></svg>`;
-const EmbedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 10.667 14.667 8 12 5.333M4 5.333 1.333 8 4 10.667M9.667 2.667 6.333 13.333"/></svg>`;
-const FormTextAreaIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.522C14 2.682 13.318 2 12.478 2h-9C2.662 2 2 2.662 2 3.478v9.189C2 13.403 2.597 14 3.333 14ZM3.83 6.636V3.943"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.496 13.76 1.724-1.725 1.717-1.717"/></svg>`;
-const FormTextFieldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 2.667H4a2 2 0 0 1 2 2 2 2 0 0 1 2-2h.667M8.667 13.333H8a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-.667M3.333 10.667h-.666a1.333 1.333 0 0 1-1.334-1.334V6.667a1.333 1.333 0 0 1 1.334-1.334h.666M8.667 5.333h4.666a1.333 1.333 0 0 1 1.334 1.334v2.666a1.333 1.333 0 0 1-1.334 1.334H8.667M6 4.667v6.666"/></svg>`;
-const FormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 5.5h.731a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.085a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099ZM13.184 10.5h.732a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.084a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099Z"/><path fill="currentColor" d="M6.613 14.5h.222a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H6.613Z"/></svg>`;
-const HeaderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM4 4h8"/></svg>`;
-const HeadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h8M4 13.333V2.667M12 13.333V2.667"/></svg>`;
-const ImageIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14"/></svg>`;
-const ItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2 6h.007M5.333 10H14M5.333 6H14"/></svg>`;
-const LabelIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.476 11.074V4.926m0 6.148h3.77v-.615m-3.77.615h-.722m.722-6.148h.632m-.632 0h-.722"/></svg>`;
-const LinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.943 11.771 8 12.714A3.333 3.333 0 0 1 3.286 8l.943-.943M7.057 4.229 8 3.286A3.333 3.333 0 1 1 12.714 8l-.943.943M6.114 9.886l3.772-3.772"/></svg>`;
-const ListItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M3.7 6.175a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 6.175c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 6.175ZM5 10.05c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 10.05Z" clip-rule="evenodd"/></svg>`;
-const ListViewIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M3.333 2.5a.833.833 0 0 0-.833.833v9.334c0 .46.373.833.833.833h9.334c.46 0 .833-.373.833-.833V3.333a.833.833 0 0 0-.833-.833H3.333ZM1.5 3.333c0-1.012.82-1.833 1.833-1.833h9.334c1.012 0 1.833.82 1.833 1.833v9.334c0 1.012-.82 1.833-1.833 1.833H3.333A1.833 1.833 0 0 1 1.5 12.667V3.333Z" clip-rule="evenodd"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 6H2M14 10H2"/></svg>`;
-const ListIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M3.7 4.35a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 4.35c0-.346.28-.626.625-.626h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 4.35Z" clip-rule="evenodd"/><path d="M3.7 8A.85.85 0 1 1 2 8a.85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 8c0-.345.28-.625.625-.625h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 8Z" clip-rule="evenodd"/><path d="M3.7 11.65a.85.85 0 1 1-1.7 0 .85.85 0 0 1 1.7 0Z"/><path fill-rule="evenodd" d="M5 11.65c0-.346.28-.626.625-.626h7.75a.625.625 0 1 1 0 1.25h-7.75A.625.625 0 0 1 5 11.65Z" clip-rule="evenodd"/></svg>`;
-const MarkdownEmbedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.191c0 .725.588 1.313 1.313 1.313h4.691"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11 14.314v-3l1.5 1.523 1.5-1.523v3"/></svg>`;
-const MinusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.333 8h9.334"/></svg>`;
-const NavigationMenuIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 7v5.833c0 .645-.597 1.167-1.333 1.167H3.333C2.597 14 2 13.478 2 12.833V7"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.978 2.003H2.6a.6.6 0 0 0-.6.6v1.4h11.971v-1.4a.6.6 0 0 0-.6-.6h-2.393Z"/></svg>`;
-const OverlayIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/></svg>`;
-const PaintBrushIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6.04 7.933 5.38-5.373a1.9 1.9 0 1 1 2.687 2.687l-5.374 5.386M4.713 9.96c-1.106 0-2 .9-2 2.013 0 .887-1.666 1.014-1.333 1.347.72.733 1.66 1.347 2.667 1.347 1.466 0 2.666-1.2 2.666-2.694a2.007 2.007 0 0 0-2-2.013Z"/></svg>`;
-const PopoverIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14 6V4a1.334 1.334 0 0 0-1.333-1.333h-10A1.333 1.333 0 0 0 1.333 4v6.667c0 .733.6 1.333 1.334 1.333h2.666"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.333 8.667h-4C8.597 8.667 8 9.264 8 10v2c0 .736.597 1.333 1.333 1.333h4c.737 0 1.334-.597 1.334-1.333v-2c0-.736-.597-1.333-1.334-1.333Z"/></svg>`;
-const RadioCheckedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>`;
-const RadioGroupIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.839 8a1.82 1.82 0 1 1-3.64 0 1.82 1.82 0 0 1 3.64 0Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.019 13.027a5.027 5.027 0 1 0 0-10.054 5.027 5.027 0 0 0 0 10.054Z"/><path stroke="#000" stroke-linecap="round" d="M12.629 12.077v0a6.73 6.73 0 0 0-.337-8.565v0"/></svg>`;
-const SelectIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 10.33h.149c.736 0 1.332-.597 1.332-1.332V6.332c0-.735-.596-1.332-1.332-1.332H2.667c-.735 0-1.332.597-1.332 1.332v2.666c0 .735.597 1.332 1.333 1.332h10.516Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.078 7.165 1 1 1-1"/></svg>`;
-const SettingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.987 6H9.32M13.932 6h-12M14 10.5H2"/><rect width="4" height="4" x="1.932" y="8.534" fill="#fff" stroke="currentColor" rx="2"/><rect width="4" height="4" x="10.068" y="4" fill="#fff" stroke="currentColor" rx="2"/></svg>`;
-const SlotComponentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 4.5V3.333A1.333 1.333 0 0 0 12.667 2H11.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 2h2M7 14h2M2 7v2M14 7v2"/></svg>`;
-const SubscriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 3.333 8 8.667M8 3.333 2.667 8.667M13.333 12.667h-2.666c0-1 .293-1.334 1-1.667.706-.333 1.666-.78 1.666-1.667 0-.313-.113-.62-.32-.86a1.407 1.407 0 0 0-1.746-.293c-.28.16-.494.413-.6.713"/></svg>`;
-const SuperscriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 12.667 8 7.333M8 12.667 2.667 7.333M13.333 8h-2.666c0-1 .294-1.333 1-1.667.705-.333 1.666-.777 1.666-1.665 0-.315-.113-.62-.322-.86a1.403 1.403 0 0 0-1.745-.29c-.28.159-.492.409-.6.706"/></svg>`;
-const SwitchIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.667 4H5.333a4 4 0 1 0 0 8h5.334a4 4 0 0 0 0-8Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 9.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666Z"/></svg>`;
-const TabsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.75 5H13M9.75 5H7.401A1.684 1.684 0 0 1 6 4.25v0l-.5-.75-.5-.75L4.5 2m5.25 3-1-1.5-.5-.75-.5-.75M4.5 2H3v0a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 3 14h10v0a1.5 1.5 0 0 0 1.5-1.5v0-6A1.5 1.5 0 0 0 13 5v0M4.5 2h3.25m0 0h2.375v0c.547 0 1.057.273 1.36.728l.015.022.5.75L13 5"/></svg>`;
-const TextAlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 8H2M11.333 12H2M14 4H2"/></svg>`;
-const TextItalicIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2.667h-6M9.333 13.333h-6M10 2.667 6 13.333"/></svg>`;
-const TextIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 4.667v-2h10.666v2M6 13.333h4M8 2.667v10.666"/></svg>`;
-const TooltipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14 10a1.333 1.333 0 0 1-1.333 1.333h-8L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z"/></svg>`;
-const TriggerIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.915 7.354v-.647a1.294 1.294 0 1 0-2.587 0"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.328 6.707V6.06a1.294 1.294 0 1 0-2.587 0v.647"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.74 6.383V2.826a1.293 1.293 0 1 0-2.586 0v6.467"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.914 7.353a1.293 1.293 0 0 1 2.587 0v1.94a5.174 5.174 0 0 1-5.174 5.174H8.034c-1.81 0-2.91-.556-3.874-1.513l-2.328-2.328a1.293 1.293 0 0 1 1.83-1.824L4.8 9.94"/></svg>`;
-const ViewportIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M5.173 1.35h.157a.65.65 0 0 1 0 1.3H5.2c-.57 0-.96 0-1.26.025-.294.024-.446.068-.553.122a1.35 1.35 0 0 0-.59.59c-.054.107-.098.259-.122.552-.025.301-.025.69-.025 1.261v.13a.65.65 0 0 1-1.3 0v-.157c0-.537 0-.98.03-1.34.03-.373.095-.715.259-1.036a2.65 2.65 0 0 1 1.158-1.158c.32-.164.663-.229 1.036-.26.36-.029.803-.029 1.34-.029Zm6.888 1.325c-.301-.024-.69-.025-1.261-.025h-.13a.65.65 0 1 1 0-1.3h.157c.537 0 .98 0 1.34.03.373.03.715.095 1.036.259.499.254.904.66 1.158 1.158.164.32.229.663.26 1.036.029.36.029.803.029 1.34v.157a.65.65 0 1 1-1.3 0V5.2c0-.57 0-.96-.025-1.26-.024-.294-.068-.446-.122-.553a1.35 1.35 0 0 0-.59-.59c-.107-.054-.26-.098-.552-.122ZM2 10.02a.65.65 0 0 1 .65.65v.13c0 .57 0 .96.025 1.26.024.294.068.446.122.553.13.254.336.46.59.59.107.054.259.098.552.122.301.025.69.025 1.261.025h.13a.65.65 0 1 1 0 1.3h-.157c-.537 0-.98 0-1.34-.03-.373-.03-.715-.095-1.036-.259a2.65 2.65 0 0 1-1.158-1.158c-.164-.32-.23-.663-.26-1.037-.029-.36-.029-.802-.029-1.34v-.156a.65.65 0 0 1 .65-.65Zm12 0a.65.65 0 0 1 .65.65v.157c0 .537 0 .98-.03 1.34-.03.373-.095.715-.259 1.036a2.65 2.65 0 0 1-1.158 1.158c-.32.164-.663.23-1.037.26-.36.029-.802.029-1.34.029h-.156a.65.65 0 1 1 0-1.3h.13c.57 0 .96 0 1.26-.025.294-.024.446-.068.553-.122.254-.13.46-.336.59-.59.054-.107.098-.259.122-.552.025-.301.025-.69.025-1.261v-.13a.65.65 0 0 1 .65-.65ZM8 10.033a2.033 2.033 0 1 0 0-4.066 2.033 2.033 0 0 0 0 4.066Zm0 1.3a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666Z" clip-rule="evenodd"/></svg>`;
-const VimeoIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M20.158 6.738c-.082 1.785-1.329 4.23-3.74 7.333-2.492 3.24-4.6 4.861-6.327 4.861-1.068 0-1.972-.986-2.711-2.961L5.9 10.543c-.548-1.973-1.136-2.96-1.766-2.96-.136 0-.617.288-1.439.863l-.862-1.111c.904-.795 1.797-1.59 2.675-2.388C5.715 3.905 6.621 3.356 7.225 3.3c1.427-.136 2.305.84 2.635 2.928.356 2.254.603 3.655.74 4.203.412 1.87.865 2.804 1.359 2.804.384 0 .96-.607 1.73-1.82.767-1.212 1.178-2.135 1.233-2.768.11-1.047-.301-1.572-1.234-1.572-.44 0-.892.1-1.357.3.9-2.951 2.622-4.386 5.164-4.304 1.883.055 2.771 1.277 2.663 3.667Z"/></svg>`;
-const WebhookFormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 11.32H8.007c-.734 0-1.3.627-1.654 1.267a2.666 2.666 0 0 1-5.02-1.254A2.62 2.62 0 0 1 1.713 10"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 11.333 6.087 7.48c.353-.647.066-1.453-.334-2.067a2.667 2.667 0 1 1 4.594-2.706"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m8 4 2.087 3.82c.353.647 1.18.847 1.913.847A2.667 2.667 0 0 1 12 14"/></svg>`;
-const XmlIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.163 9.02v-4L8.83 1.686h-5.5A1.333 1.333 0 0 0 1.997 3.02v6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.164 2.186v1.667a1.333 1.333 0 0 0 1.333 1.333h2.667M1.997 11.314l3 3M4.997 11.314l-3 3M6.997 14.314v-3l1.5 1.523 1.5-1.523v3M12.163 11.314v3h1.84"/></svg>`;
-const Youtube1cIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M13.47 3.299a1.771 1.771 0 0 1 1.238 1.263C15 5.675 15 8 15 8s0 2.325-.293 3.438a1.771 1.771 0 0 1-1.238 1.263C12.38 13 8 13 8 13s-4.378 0-5.47-.299a1.771 1.771 0 0 1-1.237-1.263C1 10.325 1 8 1 8s0-2.325.293-3.438A1.771 1.771 0 0 1 2.53 3.299C3.622 3 8 3 8 3s4.378 0 5.47.299Zm-3.232 4.7L6.6 10.144V5.857L10.238 8Z" clip-rule="evenodd"/></svg>`;
-const div = [
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  { property: "outlineWidth", value: { type: "unit", unit: "px", value: 1 } }
-];
-const address = div;
-const article = div;
-const aside = div;
-const figure = div;
-const footer = div;
-const header = div;
-const main$1 = div;
-const nav = div;
-const section = div;
-const form = div;
-const label = div;
-const time = div;
-const h1 = div;
-const h2 = div;
-const h3 = div;
-const h4 = div;
-const h5 = div;
-const h6 = div;
-const i = div;
-const img = div;
-const a = div;
-const li = div;
-const ul = div;
-const ol = div;
-const p = div;
-const span = div;
-const html = [
-  { property: "display", value: { type: "keyword", value: "grid" } },
-  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
-  {
-    property: "fontFamily",
-    value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
-  },
-  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
-  {
-    property: "lineHeight",
-    value: { type: "unit", unit: "number", value: 1.2 }
-  },
-  {
-    property: "whiteSpaceCollapse",
-    value: { type: "keyword", value: "preserve" }
-  }
-];
-const body = [
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
-  {
-    property: "marginRight",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-const hr = [
-  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-const b = [
-  {
-    property: "fontWeight",
-    value: { type: "unit", unit: "number", value: 700 }
-  },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-const code = [
-  {
-    property: "fontFamily",
-    value: {
-      type: "fontFamily",
-      value: [
-        "ui-monospace",
-        "SFMono-Regular",
-        "Consolas",
-        "Liberation Mono",
-        "Menlo",
-        "monospace"
-      ]
-    }
-  },
-  { property: "fontSize", value: { type: "unit", unit: "em", value: 1 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-const sub = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
-  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "position", value: { type: "keyword", value: "relative" } },
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } }
-];
-const sup = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
-  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "position", value: { type: "keyword", value: "relative" } },
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  { property: "top", value: { type: "unit", unit: "em", value: -0.5 } }
-];
-const input = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
-  {
-    property: "lineHeight",
-    value: { type: "unit", unit: "number", value: 1.15 }
-  },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
-  {
-    property: "marginRight",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } }
-];
-const textarea = input;
-const radio = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
-  {
-    property: "lineHeight",
-    value: { type: "unit", unit: "number", value: 1.15 }
-  },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
-  {
-    property: "marginRight",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  { property: "borderTopStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "none" } }
-];
-const checkbox = radio;
-const button = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
-  {
-    property: "lineHeight",
-    value: { type: "unit", unit: "number", value: 1.15 }
-  },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
-  {
-    property: "marginRight",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", unit: "number", value: 0 }
-  },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } },
-  { property: "textTransform", value: { type: "keyword", value: "none" } }
-];
-const select = button;
-const rootComponent = "ws:root";
-const rootMeta = {
-  category: "hidden",
-  type: "container",
-  label: "Global Root",
-  icon: SettingsIcon,
-  presetStyle: {
-    html
+      }
+      const name2 = scope.getName(dataSource.id, dataSource.name);
+      generatedVariables += `  const ${name2} = _props.system
+`;
+    }
   }
-};
-const collectionComponent = "ws:collection";
-const collectionMeta = {
-  category: "data",
-  order: 2,
-  type: "container",
-  label: "Collection",
-  icon: ListViewIcon,
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: collectionComponent,
-      props: [
-        {
-          name: "data",
-          type: "json",
-          value: [
-            "Collection Item 1",
-            "Collection Item 2",
-            "Collection Item 3"
-          ]
-        },
-        {
-          name: "item",
-          type: "parameter",
-          variableName: "collectionItem",
-          variableAlias: "Collection Item"
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "Box",
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [{ type: "expression", value: "collectionItem" }]
-            }
-          ]
-        }
-      ]
+  let generated = "";
+  generated += `import type { System, ResourceRequest } from "@webstudio-is/sdk";
+`;
+  generated += `export const getResources = (_props: { system: System }) => {
+`;
+  generated += generatedVariables;
+  generated += generatedRequests;
+  generated += `  const _data = new Map<string, ResourceRequest>([
+`;
+  for (const dataSource of dataSources.values()) {
+    if (dataSource.type === "resource") {
+      const name2 = scope.getName(dataSource.resourceId, dataSource.name);
+      generated += `    ["${name2}", ${name2}],
+`;
     }
-  ]
+  }
+  generated += `  ])
+`;
+  generated += `  const _action = new Map<string, ResourceRequest>([
+`;
+  for (const prop of props2.values()) {
+    if (prop.type === "resource") {
+      const name2 = scope.getName(prop.value, prop.name);
+      generated += `    ["${name2}", ${name2}],
+`;
+    }
+  }
+  generated += `  ])
+`;
+  generated += `  return { data: _data, action: _action }
+`;
+  generated += `}
+`;
+  return generated;
 };
-const descendantComponent = "ws:descendant";
-const descendantMeta = {
-  category: "internal",
-  type: "control",
-  label: "Descendant",
-  icon: PaintBrushIcon,
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
+const getMethod = (value) => {
+  switch (value == null ? void 0 : value.toLowerCase()) {
+    case "get":
+      return "get";
+    case "delete":
+      return "delete";
+    case "put":
+      return "put";
+    default:
+      return "post";
   }
 };
-const blockComponent = "ws:block";
-const blockTemplateComponent = "ws:block-template";
-const blockTemplateMeta = {
-  category: "hidden",
-  type: "container",
-  icon: AddTemplateInstanceIcon,
-  stylable: false,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+const replaceFormActionsWithResources = ({
+  props: props2,
+  instances,
+  resources
+}) => {
+  var _a, _b;
+  const formProps = /* @__PURE__ */ new Map();
+  for (const prop of props2.values()) {
+    if (prop.name === "method" && prop.type === "string" && ((_a = instances.get(prop.instanceId)) == null ? void 0 : _a.component) === "Form") {
+      let data = formProps.get(prop.instanceId);
+      if (data === void 0) {
+        data = {};
+        formProps.set(prop.instanceId, data);
+      }
+      data.method = prop.value;
+      props2.delete(prop.id);
+    }
+    if (prop.name === "action" && prop.type === "string" && prop.value && ((_b = instances.get(prop.instanceId)) == null ? void 0 : _b.component) === "Form") {
+      let data = formProps.get(prop.instanceId);
+      if (data === void 0) {
+        data = {};
+        formProps.set(prop.instanceId, data);
+      }
+      data.action = prop.value;
+      props2.set(prop.id, {
+        id: prop.id,
+        instanceId: prop.instanceId,
+        name: prop.name,
+        type: "resource",
+        value: prop.instanceId
+      });
+    }
+  }
+  for (const [instanceId, { action, method }] of formProps) {
+    if (action) {
+      resources.set(instanceId, {
+        id: instanceId,
+        name: "action",
+        method: getMethod(method),
+        url: JSON.stringify(action),
+        headers: []
+      });
+    }
   }
 };
-const blockMeta = {
-  category: "typography",
-  type: "container",
-  label: "Content Block",
-  icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
+const generatePageMeta = ({
+  globalScope,
+  page,
+  dataSources,
+  assets
+}) => {
+  var _a;
+  const localScope = createScope(["system", "resources"]);
+  const usedDataSources = /* @__PURE__ */ new Map();
+  const titleExpression = generateExpression({
+    expression: page.title,
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const descriptionExpression = generateExpression({
+    expression: page.meta.description ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const excludePageFromSearchExpression = generateExpression({
+    expression: page.meta.excludePageFromSearch ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const languageExpression = generateExpression({
+    expression: page.meta.language ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const socialImageAssetNameExpression = JSON.stringify(
+    page.meta.socialImageAssetId ? (_a = assets.get(page.meta.socialImageAssetId)) == null ? void 0 : _a.name : void 0
+  );
+  const socialImageUrlExpression = generateExpression({
+    expression: page.meta.socialImageUrl ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const statusExpression = generateExpression({
+    expression: page.meta.status ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const redirectExpression = generateExpression({
+    expression: page.meta.redirect ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  let customExpression = "";
+  customExpression += `[
+`;
+  for (const customMeta of page.meta.custom ?? []) {
+    if (customMeta.property.trim().length === 0) {
+      continue;
     }
-  ],
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: blockComponent,
-      props: [],
-      children: [
-        {
-          component: blockTemplateComponent,
-          type: "instance",
-          label: "Templates",
-          children: [
-            {
-              component: "Paragraph",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 1",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h1"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 2",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h2"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 3",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h3"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 4",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h4"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 5",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h5"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Heading",
-              type: "instance",
-              label: "Heading 6",
-              props: [
-                {
-                  name: "tag",
-                  type: "string",
-                  value: "h6"
-                }
-              ],
-              children: []
-            },
-            {
-              component: "List",
-              type: "instance",
-              label: "List (Unordered)",
-              children: [
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: []
-                }
-              ]
-            },
-            {
-              component: "List",
-              type: "instance",
-              label: "List (Ordered)",
-              props: [
-                {
-                  name: "ordered",
-                  type: "boolean",
-                  value: true
-                }
-              ],
-              children: [
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: []
-                }
-              ]
-            },
-            {
-              component: "Link",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "Image",
-              type: "instance",
-              styles: [
-                {
-                  property: "marginRight",
-                  value: {
-                    type: "keyword",
-                    value: "auto"
-                  }
-                },
-                {
-                  property: "marginLeft",
-                  value: {
-                    type: "keyword",
-                    value: "auto"
-                  }
-                },
-                {
-                  property: "width",
-                  value: {
-                    type: "unit",
-                    unit: "%",
-                    value: 100
-                  }
-                },
-                {
-                  property: "height",
-                  value: {
-                    type: "keyword",
-                    value: "auto"
-                  }
-                }
-              ],
-              children: []
-            },
-            {
-              component: "Separator",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "Blockquote",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "HtmlEmbed",
-              type: "instance",
-              children: []
-            },
-            {
-              component: "CodeText",
-              type: "instance",
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "Paragraph",
-          children: [
-            {
-              type: "text",
-              value: "The Content Block component designates regions on the page where pre-styled instances can be inserted in "
-            },
-            {
-              type: "instance",
-              component: "RichTextLink",
-              children: [
-                {
-                  type: "text",
-                  value: "Content mode"
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "href",
-                  value: "https://wstd.us/content-block"
-                }
-              ]
-            },
-            {
-              type: "text",
-              value: "."
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "List",
-          children: [
-            {
-              type: "instance",
-              component: "ListItem",
-              children: [
-                {
-                  type: "text",
-                  value: "In Content mode, you can edit any direct child instances that were pre-added to the Content Block, as well as add new instances predefined in Templates."
-                }
-              ]
-            },
-            {
-              type: "instance",
-              component: "ListItem",
-              children: [
-                {
-                  type: "text",
-                  value: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container."
-                }
-              ]
-            },
-            {
-              type: "instance",
-              component: "ListItem",
-              children: [
-                {
-                  type: "text",
-                  value: "To insert predefined instances in Content mode, click the + button while hovering over the Content Block on the canvas and choose an instance from the list."
-                }
-              ]
-            }
-          ]
-        }
-      ]
+    const propertyExpression = JSON.stringify(customMeta.property);
+    const contentExpression = generateExpression({
+      expression: customMeta.content,
+      dataSources,
+      usedDataSources,
+      scope: localScope
+    });
+    customExpression += `      {
+`;
+    customExpression += `        property: ${propertyExpression},
+`;
+    customExpression += `        content: ${contentExpression},
+`;
+    customExpression += `      },
+`;
+  }
+  customExpression += `    ]`;
+  let generated = "";
+  generated += `export const getPageMeta = ({
+`;
+  generated += `  system,
+`;
+  generated += `  resources,
+`;
+  generated += `}: {
+`;
+  generated += `  system: System;
+`;
+  generated += `  resources: Record<string, any>;
+`;
+  generated += `}): PageMeta => {
+`;
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const valueName = localScope.getName(dataSource.id, dataSource.name);
+      const initialValueString = JSON.stringify(dataSource.value.value);
+      generated += `  let ${valueName} = ${initialValueString}
+`;
+      continue;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id === page.systemDataSourceId) {
+        const valueName = localScope.getName(dataSource.id, dataSource.name);
+        generated += `  let ${valueName} = system
+`;
+      }
+      continue;
     }
-  ]
-};
-const coreMetas = {
-  [rootComponent]: rootMeta,
-  [collectionComponent]: collectionMeta,
-  [descendantComponent]: descendantMeta,
-  [blockComponent]: blockMeta,
-  [blockTemplateComponent]: blockTemplateMeta
+    if (dataSource.type === "resource") {
+      const valueName = localScope.getName(dataSource.id, dataSource.name);
+      const resourceName = globalScope.getName(
+        dataSource.resourceId,
+        dataSource.name
+      );
+      generated += `  let ${valueName} = resources.${resourceName}
+`;
+      continue;
+    }
+  }
+  generated += `  return {
+`;
+  generated += `    title: ${titleExpression},
+`;
+  generated += `    description: ${descriptionExpression},
+`;
+  generated += `    excludePageFromSearch: ${excludePageFromSearchExpression},
+`;
+  generated += `    language: ${languageExpression},
+`;
+  generated += `    socialImageAssetName: ${socialImageAssetNameExpression},
+`;
+  generated += `    socialImageUrl: ${socialImageUrlExpression},
+`;
+  generated += `    status: ${statusExpression},
+`;
+  generated += `    redirect: ${redirectExpression},
+`;
+  generated += `    custom: ${customExpression},
+`;
+  generated += `  };
+`;
+  generated += `};
+`;
+  return generated;
 };
-const isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
 const createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -3671,8 +3379,7 @@ ${indexAttribute}="${index}"`;
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
-  const classMapArray = classesMap == null ? void 0 : classesMap.get(instance.id);
-  const classes = classMapArray !== void 0 ? [JSON.stringify(classMapArray.join(" "))] : [];
+  let classNameValue;
   for (const prop of props2.values()) {
     if (prop.instanceId !== instance.id) {
       continue;
@@ -3706,7 +3413,7 @@ ${indexAttribute}="${index}"`;
       continue;
     }
     if (prop.name === "className" && propValue !== void 0) {
-      classes.push(propValue);
+      classNameValue = propValue;
       continue;
     }
     if (propValue !== void 0) {
@@ -3714,9 +3421,16 @@ ${indexAttribute}="${index}"`;
 ${prop.name}={${propValue}}`;
     }
   }
-  if (classes.length !== 0) {
-    generatedProps += `
-className={${classes.join(` + " " + `)}}`;
+  const classMapArray = classesMap == null ? void 0 : classesMap.get(instance.id);
+  if (classMapArray || classNameValue) {
+    let classNameTemplate = classMapArray ? classMapArray.join(" ") : "";
+    if (classNameValue) {
+      if (classNameTemplate) {
+        classNameTemplate += " ";
+      }
+      classNameTemplate += "${" + classNameValue + "}";
+    }
+    generatedProps += "\nclassName={`" + classNameTemplate + "`}";
   }
   let generatedElement = "";
   if (instance.component === blockTemplateComponent) {
@@ -4077,15 +3791,15 @@ const htmlToJsx = (html2) => {
   }
   return result;
 };
-const meta$E = {
+const meta$I = {
   category: "general",
   type: "container",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
   stylable: false,
-  order: 6
+  order: 5
 };
-const meta$D = {
+const meta$H = {
   type: "container",
   icon: "",
   stylable: false
@@ -4112,14 +3826,14 @@ const presetStyle$E = {
     }
   ]
 };
-const meta$C = {
+const meta$G = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
   presetStyle: presetStyle$E,
-  order: 8
+  order: 2
 };
 ({
   props: {
@@ -4142,7 +3856,7 @@ const meta$C = {
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
-const meta$B = {
+const meta$F = {
   type: "embed",
   icon: MarkdownEmbedIcon,
   presetStyle: {
@@ -4171,7 +3885,7 @@ const presetStyle$D = {
     }
   ]
 };
-const meta$A = {
+const meta$E = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
@@ -4189,7 +3903,7 @@ const presetStyle$C = {
   nav,
   section
 };
-const meta$z = {
+const meta$D = {
   category: "general",
   type: "container",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
@@ -4207,7 +3921,7 @@ const presetStyle$B = {
     }
   ]
 };
-const meta$y = {
+const meta$C = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
@@ -4221,7 +3935,7 @@ const presetStyle$A = {
   h5,
   h6
 };
-const meta$x = {
+const meta$B = {
   type: "container",
   icon: HeadingIcon,
   constraints: {
@@ -4234,7 +3948,7 @@ const meta$x = {
 const presetStyle$z = {
   p
 };
-const meta$w = {
+const meta$A = {
   type: "container",
   icon: TextAlignLeftIcon,
   constraints: {
@@ -4253,7 +3967,7 @@ const presetStyle$y = {
     }
   ]
 };
-const meta$v = {
+const meta$z = {
   type: "container",
   icon: LinkIcon,
   constraints: {
@@ -4274,14 +3988,14 @@ const meta$v = {
     }
   ]
 };
-const meta$u = {
-  ...meta$v,
+const meta$y = {
+  ...meta$z,
   type: "rich-text-child"
 };
 const presetStyle$x = {
   span
 };
-const meta$t = {
+const meta$x = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
@@ -4291,7 +4005,7 @@ const meta$t = {
 const presetStyle$w = {
   b
 };
-const meta$s = {
+const meta$w = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
@@ -4307,7 +4021,7 @@ const presetStyle$v = {
     }
   ]
 };
-const meta$r = {
+const meta$v = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
@@ -4317,7 +4031,7 @@ const meta$r = {
 const presetStyle$u = {
   sup
 };
-const meta$q = {
+const meta$u = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -4327,7 +4041,7 @@ const meta$q = {
 const presetStyle$t = {
   sub
 };
-const meta$p = {
+const meta$t = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
@@ -4337,7 +4051,7 @@ const meta$p = {
 const presetStyle$s = {
   button
 };
-const meta$o = {
+const meta$s = {
   icon: ButtonElementIcon,
   type: "container",
   constraints: {
@@ -4360,7 +4074,7 @@ const presetStyle$r = {
     }
   ]
 };
-const meta$n = {
+const meta$r = {
   category: "forms",
   constraints: {
     relation: "ancestor",
@@ -4386,7 +4100,7 @@ const meta$n = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const meta$m = {
+const meta$q = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
@@ -4408,7 +4122,7 @@ const presetStyle$q = {
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
-const meta$l = {
+const meta$p = {
   category: "forms",
   type: "container",
   label: "Form",
@@ -4445,7 +4159,7 @@ const presetStyle$p = {
     }
   ]
 };
-const meta$k = {
+const meta$o = {
   category: "media",
   type: "embed",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
@@ -4502,7 +4216,7 @@ const presetStyle$o = {
     }
   ]
 };
-const meta$j = {
+const meta$n = {
   type: "container",
   icon: BlockquoteIcon,
   states: defaultStates,
@@ -4540,7 +4254,7 @@ const presetStyle$n = {
     }
   ]
 };
-const meta$i = {
+const meta$m = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
@@ -4549,7 +4263,7 @@ const meta$i = {
 const presetStyle$m = {
   li
 };
-const meta$h = {
+const meta$l = {
   type: "container",
   constraints: {
     // cannot use parent relation here
@@ -4591,14 +4305,14 @@ const presetStyle$l = {
     }
   ]
 };
-const meta$g = {
+const meta$k = {
   category: "general",
   type: "embed",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
   presetStyle: presetStyle$l,
-  order: 5
+  order: 3
 };
 const presetStyle$k = {
   code: [
@@ -4629,7 +4343,7 @@ const presetStyle$k = {
     }
   ]
 };
-const meta$f = {
+const meta$j = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
@@ -4640,7 +4354,7 @@ const meta$f = {
   },
   states: defaultStates,
   presetStyle: presetStyle$k,
-  order: 9
+  order: 5
 };
 const presetStyle$j = {
   label: [
@@ -4648,7 +4362,7 @@ const presetStyle$j = {
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
 };
-const meta$e = {
+const meta$i = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4670,7 +4384,7 @@ const presetStyle$i = {
     }
   ]
 };
-const meta$d = {
+const meta$h = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -4705,7 +4419,7 @@ const presetStyle$h = {
     }
   ]
 };
-const meta$c = {
+const meta$g = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4735,7 +4449,7 @@ const presetStyle$g = {
     }
   ]
 };
-const meta$b = {
+const meta$f = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4757,7 +4471,7 @@ const meta$b = {
 const presetStyle$f = {
   div
 };
-const meta$a = {
+const meta$e = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
@@ -4770,9 +4484,9 @@ const meta$a = {
 const presetStyle$e = {
   div
 };
-const meta$9 = {
+const meta$d = {
   type: "container",
-  icon: Youtube1cIcon,
+  icon: YoutubeIcon,
   states: defaultStates,
   presetStyle: presetStyle$e,
   constraints: {
@@ -4780,8 +4494,8 @@ const meta$9 = {
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const meta$8 = {
-  ...meta$k,
+const meta$c = {
+  ...meta$o,
   category: "hidden",
   label: "Preview Image",
   constraints: {
@@ -4792,7 +4506,7 @@ const meta$8 = {
 const presetStyle$d = {
   button
 };
-const meta$7 = {
+const meta$b = {
   category: "hidden",
   type: "container",
   constraints: [
@@ -4813,7 +4527,7 @@ const meta$7 = {
 const presetStyle$c = {
   div
 };
-const meta$6 = {
+const meta$a = {
   type: "container",
   constraints: {
     relation: "ancestor",
@@ -4825,7 +4539,7 @@ const meta$6 = {
   category: "hidden",
   label: "Spinner"
 };
-const meta$5 = {
+const meta$9 = {
   category: "xml",
   order: 6,
   type: "container",
@@ -4833,7 +4547,7 @@ const meta$5 = {
   stylable: false,
   description: "XML Node"
 };
-const meta$4 = {
+const meta$8 = {
   category: "xml",
   type: "container",
   description: "Converts machine-readable date and time to ISO format.",
@@ -4844,7 +4558,7 @@ const meta$4 = {
 const presetStyle$b = {
   time
 };
-const meta$3 = {
+const meta$7 = {
   category: "localization",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
@@ -4861,7 +4575,7 @@ const presetStyle$a = {
     }
   ]
 };
-const meta$2 = {
+const meta$6 = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4893,7 +4607,7 @@ const presetStyle$9 = {
     }
   ]
 };
-const meta$1 = {
+const meta$5 = {
   category: "hidden",
   constraints: {
     relation: "parent",
@@ -4914,56 +4628,109 @@ const meta$1 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
+const meta$4 = {
+  icon: HeaderIcon,
+  type: "container",
+  stylable: false,
+  description: "Inserts children into the head of the document",
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $nin: ["HeadSlot"] }
+    },
+    {
+      relation: "child",
+      component: { $in: ["HeadLink", "HeadMeta", "HeadTitle"] }
+    }
+  ]
+};
+const meta$3 = {
+  category: "hidden",
+  icon: ResourceIcon,
+  type: "container",
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: "HeadSlot" }
+  }
+};
+const meta$2 = {
+  category: "hidden",
+  icon: WindowInfoIcon,
+  type: "container",
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: "HeadSlot" }
+  }
+};
+const meta$1 = {
+  category: "hidden",
+  icon: WindowTitleIcon,
+  type: "container",
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: "HeadSlot" }
+  }
+};
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: meta$j,
-  Body: meta$A,
-  Bold: meta$s,
-  Box: meta$z,
-  Button: meta$o,
-  Checkbox: meta$b,
-  CodeText: meta$f,
-  Form: meta$m,
-  Fragment: meta$D,
-  Heading: meta$x,
-  HtmlEmbed: meta$C,
-  Image: meta$k,
-  Input: meta$n,
-  Italic: meta$r,
-  Label: meta$e,
-  Link: meta$v,
-  List: meta$i,
-  ListItem: meta$h,
-  MarkdownEmbed: meta$B,
-  Option: meta$1,
-  Paragraph: meta$w,
-  RadioButton: meta$c,
-  RemixForm: meta$l,
-  RichTextLink: meta$u,
-  Select: meta$2,
-  Separator: meta$g,
-  Slot: meta$E,
-  Span: meta$t,
-  Subscript: meta$p,
-  Superscript: meta$q,
-  Text: meta$y,
-  Textarea: meta$d,
-  Time: meta$3,
-  Vimeo: meta$a,
-  VimeoPlayButton: meta$7,
-  VimeoPreviewImage: meta$8,
-  VimeoSpinner: meta$6,
-  XmlNode: meta$5,
-  XmlTime: meta$4,
-  YouTube: meta$9
+  Blockquote: meta$n,
+  Body: meta$E,
+  Bold: meta$w,
+  Box: meta$D,
+  Button: meta$s,
+  Checkbox: meta$f,
+  CodeText: meta$j,
+  Form: meta$q,
+  Fragment: meta$H,
+  HeadLink: meta$3,
+  HeadMeta: meta$2,
+  HeadSlot: meta$4,
+  HeadTitle: meta$1,
+  Heading: meta$B,
+  HtmlEmbed: meta$G,
+  Image: meta$o,
+  Input: meta$r,
+  Italic: meta$v,
+  Label: meta$i,
+  Link: meta$z,
+  List: meta$m,
+  ListItem: meta$l,
+  MarkdownEmbed: meta$F,
+  Option: meta$5,
+  Paragraph: meta$A,
+  RadioButton: meta$g,
+  RemixForm: meta$p,
+  RichTextLink: meta$y,
+  Select: meta$6,
+  Separator: meta$k,
+  Slot: meta$I,
+  Span: meta$x,
+  Subscript: meta$t,
+  Superscript: meta$u,
+  Text: meta$C,
+  Textarea: meta$h,
+  Time: meta$7,
+  Vimeo: meta$e,
+  VimeoPlayButton: meta$b,
+  VimeoPreviewImage: meta$c,
+  VimeoSpinner: meta$a,
+  XmlNode: meta$9,
+  XmlTime: meta$8,
+  YouTube: meta$d
+}, Symbol.toStringTag, { value: "Module" }));
+const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: meta$A,
-  Form: meta$m,
-  Link: meta$v,
-  RemixForm: meta$l,
-  RichTextLink: meta$u
+  Body: meta$E,
+  Form: meta$q,
+  Link: meta$z,
+  RemixForm: meta$p,
+  RichTextLink: meta$y
 }, Symbol.toStringTag, { value: "Module" }));
 const presetStyle$8 = {
   div
@@ -5791,7 +5558,7 @@ const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   TooltipContent: metaTooltipContent,
   TooltipTrigger: metaTooltipTrigger
 }, Symbol.toStringTag, { value: "Module" }));
-const createFramework$1 = async () => {
+const createFramework$2 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
   const htmlTemplate = await readFile(
     join(routeTemplatesDir, "html.tsx"),
@@ -5819,12 +5586,25 @@ const createFramework$1 = async () => {
       new Set(Object.keys(radixComponentMetas))
     );
   }
+  const animationComponentNamespacedMetas = {};
+  for (const [name2, meta2] of Object.entries(animationComponentMetas)) {
+    const namespace = "@webstudio-is/sdk-components-animation";
+    animationComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
+      meta2,
+      namespace,
+      new Set(Object.keys(animationComponentMetas))
+    );
+  }
   return {
     components: [
       {
         source: "@webstudio-is/sdk-components-react",
         metas: baseComponentMetas
       },
+      {
+        source: "@webstudio-is/sdk-components-animation",
+        metas: animationComponentNamespacedMetas
+      },
       {
         source: "@webstudio-is/sdk-components-react-radix",
         metas: radixComponentNamespacedMetas
@@ -5864,6 +5644,87 @@ const createFramework$1 = async () => {
     ]
   };
 };
+const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Body: meta$E,
+  Form: meta$q,
+  Link: meta$z,
+  RemixForm: meta$p,
+  RichTextLink: meta$y
+}, Symbol.toStringTag, { value: "Module" }));
+const createFramework$1 = async () => {
+  const routeTemplatesDir = join("app", "route-templates");
+  const htmlTemplate = await readFile(
+    join(routeTemplatesDir, "html.tsx"),
+    "utf8"
+  );
+  const xmlTemplate = await readFile(
+    join(routeTemplatesDir, "xml.tsx"),
+    "utf8"
+  );
+  const defaultSitemapTemplate = await readFile(
+    join(routeTemplatesDir, "default-sitemap.tsx"),
+    "utf8"
+  );
+  const redirectTemplate = await readFile(
+    join(routeTemplatesDir, "redirect.tsx"),
+    "utf8"
+  );
+  await rm(routeTemplatesDir, { recursive: true, force: true });
+  const radixComponentNamespacedMetas = {};
+  for (const [name2, meta2] of Object.entries(radixComponentMetas)) {
+    const namespace = "@webstudio-is/sdk-components-react-radix";
+    radixComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
+      meta2,
+      namespace,
+      new Set(Object.keys(radixComponentMetas))
+    );
+  }
+  return {
+    components: [
+      {
+        source: "@webstudio-is/sdk-components-react",
+        metas: baseComponentMetas
+      },
+      {
+        source: "@webstudio-is/sdk-components-react-radix",
+        metas: radixComponentNamespacedMetas
+      },
+      {
+        source: "@webstudio-is/sdk-components-react-router",
+        metas: reactRouterComponentMetas
+      }
+    ],
+    html: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: htmlTemplate
+      }
+    ],
+    xml: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: xmlTemplate
+      }
+    ],
+    redirect: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.ts`),
+        template: redirectTemplate
+      }
+    ],
+    defaultSitemap: () => [
+      {
+        file: join(
+          "app",
+          "routes",
+          `${generateRemixRoute("/sitemap.xml")}.tsx`
+        ),
+        template: defaultSitemapTemplate
+      }
+    ]
+  };
+};
 const generateVikeRoute = (pagePath) => {
   if (pagePath === "/") {
     return "index";
@@ -5894,12 +5755,25 @@ const createFramework = async () => {
       new Set(Object.keys(radixComponentMetas))
     );
   }
+  const animationComponentNamespacedMetas = {};
+  for (const [name2, meta2] of Object.entries(animationComponentMetas)) {
+    const namespace = "@webstudio-is/sdk-components-animation";
+    animationComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
+      meta2,
+      namespace,
+      new Set(Object.keys(animationComponentMetas))
+    );
+  }
   return {
     components: [
       {
         source: "@webstudio-is/sdk-components-react",
         metas: baseComponentMetas
       },
+      {
+        source: "@webstudio-is/sdk-components-animation",
+        metas: animationComponentNamespacedMetas
+      },
       {
         source: "@webstudio-is/sdk-components-react-radix",
         metas: radixComponentNamespacedMetas
@@ -6045,8 +5919,10 @@ Please check webstudio --help for more details`
   let framework;
   if (options.template.includes("ssg")) {
     framework = await createFramework();
-  } else {
+  } else if (options.template.includes("react-router-docker")) {
     framework = await createFramework$1();
+  } else {
+    framework = await createFramework$2();
   }
   const constants2 = await import(pathToFileURL(join(cwd(), "app/constants.mjs")).href);
   const { assetBaseUrl } = constants2;
@@ -6597,7 +6473,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.197.0";
+const version = "0.199.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -6649,6 +6525,7 @@ const dependencies = {
 const devDependencies = {
   "@netlify/remix-adapter": "^2.5.1",
   "@netlify/remix-edge-adapter": "3.4.2",
+  "@react-router/dev": "^7.1.1",
   "@remix-run/cloudflare": "^2.15.2",
   "@remix-run/cloudflare-pages": "^2.15.2",
   "@remix-run/dev": "^2.15.2",
@@ -6663,16 +6540,21 @@ const devDependencies = {
   "@webstudio-is/image": "workspace:*",
   "@webstudio-is/react-sdk": "workspace:*",
   "@webstudio-is/sdk": "workspace:*",
+  "@webstudio-is/sdk-components-animation": "workspace:*",
   "@webstudio-is/sdk-components-react": "workspace:*",
   "@webstudio-is/sdk-components-react-radix": "workspace:*",
   "@webstudio-is/sdk-components-react-remix": "workspace:*",
+  "@webstudio-is/sdk-components-react-router": "workspace:*",
   "@webstudio-is/tsconfig": "workspace:*",
+  h3: "^1.13.1",
+  ipx: "^3.0.1",
   prettier: "3.4.2",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
+  "react-router": "^7.1.1",
   "ts-expect": "^1.3.0",
   vike: "^0.4.210",
   vite: "^5.4.11",
-  vitest: "^2.1.8",
+  vitest: "^3.0.2",
   wrangler: "^3.63.2"
 };
 const packageJson = {