webstudio 0.213.0 → 0.215.0

package/lib/cli.js

@@ -2445,7 +2445,7 @@ var Json = z.object({
   type: z.literal("json"),
   defaultValue: z.unknown().optional()
 });
-var Date = z.object({
+var Date$1 = z.object({
   ...common,
   control: z.literal("date"),
   // @todo not sure what type should be here
@@ -2490,7 +2490,7 @@ var PropMeta = z.union([
   File,
   Url,
   Json,
-  Date,
+  Date$1,
   Action,
   TextContent,
   AnimationAction
@@ -2627,20 +2627,14 @@ var ContentModel = z.object({
    * transparent - pass through possible children from parent
    * rich-text - can be edited as rich text
    * instance - other instances accepted
-   * empty - no children accepted
    * ComponentName - accept specific components with none category
    */
-  children: z.array(
-    z.string()
-  )
+  children: z.array(z.string())
 });
 z.object({
   category: z.enum(componentCategories).optional(),
-  // container - can accept other components with dnd or be edited as text
-  // control - usually form controls like inputs, without children
-  // embed - images, videos or other embeddable components, without children
-  // rich-text-child - formatted text fragment, not listed in components list
-  type: z.enum(["container", "control", "embed", "rich-text-child"]),
+  // container - can accept other components with dnd or be edited as text              ..
+  type: z.enum(["container"]).optional(),
   /**
    * a property used as textual placeholder when no content specified while in builder
    * also signals to not insert components inside unless dropped explicitly
@@ -2679,7 +2673,6 @@ var html = [
 ];
 var rootComponent = "ws:root";
 var rootMeta = {
-  type: "container",
   label: "Global Root",
   icon: SettingsIcon,
   presetStyle: {
@@ -2688,24 +2681,25 @@ var rootMeta = {
 };
 var elementComponent = "ws:element";
 var elementMeta = {
-  type: "container",
   label: "Element",
   icon: HtmlElementIcon
 };
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  type: "container",
   label: "Collection",
-  icon: ListViewIcon
+  icon: ListViewIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"]
+  }
 };
 var descendantComponent = "ws:descendant";
 var descendantMeta = {
-  type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   },
   // @todo infer possible presets
   presetStyle: {}
@@ -2713,7 +2707,6 @@ var descendantMeta = {
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
-  type: "container",
   icon: AddTemplateInstanceIcon,
   contentModel: {
     category: "none",
@@ -2721,7 +2714,6 @@ var blockTemplateMeta = {
   }
 };
 var blockMeta = {
-  type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
   contentModel: {
@@ -3367,7 +3359,30 @@ var generateCss = ({
   presetSheet.addMediaRule("presets");
   const presetClasses = /* @__PURE__ */ new Map();
   const scope = createScope([], normalizeClassName, "-");
+  const tagsByComponent = /* @__PURE__ */ new Map();
+  tagsByComponent.set(rootComponent, /* @__PURE__ */ new Set(["html"]));
+  const tagByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.type === "string" && prop.name === "tag") {
+      tagByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
+  for (const instance of instances.values()) {
+    const propTag = tagByInstanceId.get(instance.id);
+    const meta = componentMetas.get(instance.component);
+    const metaTag = Object.keys((meta == null ? void 0 : meta.presetStyle) ?? {}).at(0);
+    let componentTags = tagsByComponent.get(instance.component);
+    if (componentTags === void 0) {
+      componentTags = /* @__PURE__ */ new Set();
+      tagsByComponent.set(instance.component, componentTags);
+    }
+    const tag = instance.tag ?? propTag ?? metaTag;
+    if (tag) {
+      componentTags.add(tag);
+    }
+  }
   for (const [component, meta] of componentMetas) {
+    const componentTags = tagsByComponent.get(component);
     const [_namespace, componentName] = parseComponentName(component);
     const className = `w-${scope.getName(component, meta.label ?? componentName)}`;
     const presetStyle = Object.entries(meta.presetStyle ?? {});
@@ -3375,6 +3390,9 @@ var generateCss = ({
       presetClasses.set(component, className);
     }
     for (const [tag, styles2] of presetStyle) {
+      if (!(componentTags == null ? void 0 : componentTags.has(tag))) {
+        continue;
+      }
       const selector = component === rootComponent ? ":root" : `${tag}.${className}`;
       const rule = presetSheet.addNestingRule(selector);
       for (const declaration of styles2) {
@@ -4667,7 +4685,7 @@ const e$5 = {
   icon: SlotComponentIcon,
   order: 5
 };
-const o$4 = {
+const o$5 = {
   type: "container",
   icon: ""
 };
@@ -4681,7 +4699,7 @@ const e$4 = {
     type: "boolean"
   }
 };
-const r$c = {
+const r$a = {
   category: "general",
   type: "container",
   label: "HTML Embed",
@@ -4726,7 +4744,7 @@ const r$c = {
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
-const a$e = {
+const a$a = {
   type: "container",
   icon: MarkdownEmbedIcon,
   contentModel: {
@@ -4784,13 +4802,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$1 = div;
+var i$3 = div;
 var img = div;
-var a$d = div;
+var a$9 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$9 = div;
+var p$c = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -5101,7 +5119,7 @@ var button = [
   { property: "text-transform", value: { type: "keyword", value: "none" } }
 ];
 var select = button;
-const a$c = {
+const a$8 = {
   body: [
     ...body,
     {
@@ -5113,11 +5131,11 @@ const a$c = {
       value: { type: "keyword", value: "grayscale" }
     }
   ]
-}, n$6 = {
+}, n$8 = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
-  presetStyle: a$c
+  presetStyle: a$8
 };
 const v$2 = {
   category: "general",
@@ -5153,7 +5171,7 @@ const s$6 = {
     ]
   }
 };
-const d$6 = {
+const d$5 = {
   type: "container",
   placeholder: "Heading",
   icon: HeadingIcon,
@@ -5167,28 +5185,28 @@ const d$6 = {
     h6
   }
 };
-const p$8 = {
-  p: p$9
-}, n$5 = {
+const p$b = {
+  p: p$c
+}, n$7 = {
   type: "container",
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
-  presetStyle: p$8
+  presetStyle: p$b
 };
-const a$b = {
+const a$7 = {
   a: [
-    ...a$d,
+    ...a$9,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, n$4 = {
+}, n$6 = {
   type: "container",
   placeholder: "Link",
   icon: LinkIcon,
-  presetStyle: a$b,
+  presetStyle: a$7,
   states: [
     ...defaultStates,
     {
@@ -5202,47 +5220,47 @@ const a$b = {
     }
   ]
 };
-const a$a = {
-  ...n$4,
-  type: "rich-text-child"
+const o$4 = {
+  ...n$6,
+  type: "container"
 };
 const s$5 = {
   span
-}, c$6 = {
-  type: "rich-text-child",
+}, n$5 = {
+  type: "container",
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle: s$5
 };
-const p$7 = {
+const p$a = {
   b: b$8
 }, l$6 = {
-  type: "rich-text-child",
+  type: "container",
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: p$7
+  presetStyle: p$a
 };
-const r$b = {
+const i$2 = {
   i: [
-    ...i$1,
+    ...i$3,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
 }, c$5 = {
-  type: "rich-text-child",
+  type: "container",
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: r$b
+  presetStyle: i$2
 };
 const e$3 = {
   sup
-}, a$9 = {
-  type: "rich-text-child",
+}, c$4 = {
+  type: "container",
   label: "Superscript Text",
   icon: SuperscriptIcon,
   states: defaultStates,
@@ -5250,8 +5268,8 @@ const e$3 = {
 };
 const e$2 = {
   sub
-}, a$8 = {
-  type: "rich-text-child",
+}, c$3 = {
+  type: "container",
   label: "Subscript Text",
   icon: SubscriptIcon,
   states: defaultStates,
@@ -5259,7 +5277,7 @@ const e$2 = {
 };
 const l$5 = {
   button
-}, p$6 = {
+}, p$9 = {
   icon: ButtonElementIcon,
   type: "container",
   presetStyle: l$5,
@@ -5269,7 +5287,7 @@ const l$5 = {
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const r$a = {
+const r$9 = {
   input: [
     ...input,
     {
@@ -5277,13 +5295,12 @@ const r$a = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$4 = {
+}, c$2 = {
   category: "forms",
-  type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: r$a,
+  presetStyle: r$9,
   order: 3,
   states: [
     ...defaultStates,
@@ -5299,7 +5316,7 @@ const r$a = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const c$3 = {
+const c$1 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
@@ -5316,7 +5333,7 @@ const s$4 = {
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, n$3 = {
+}, n$4 = {
   category: "forms",
   type: "container",
   label: "Form",
@@ -5326,7 +5343,7 @@ const s$4 = {
   presetStyle: s$4,
   order: 0
 };
-const a$7 = {
+const a$6 = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -5350,14 +5367,13 @@ const a$7 = {
   ]
 }, l$4 = {
   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.",
   icon: ImageIcon,
   states: defaultStates,
-  presetStyle: a$7,
+  presetStyle: a$6,
   order: 0
 };
-const r$9 = {
+const r$8 = {
   blockquote: [
     {
       property: "margin-top",
@@ -5404,14 +5420,14 @@ const r$9 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i = {
+}, i$1 = {
   type: "container",
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: r$9
+  presetStyle: r$8
 };
-const a$6 = {
+const a$5 = {
   ol: [
     ...ol,
     {
@@ -5442,13 +5458,13 @@ const a$6 = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d$5 = {
+}, d$4 = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
-  presetStyle: a$6
+  presetStyle: a$5
 };
-const a$5 = {
+const a$4 = {
   type: "container",
   placeholder: "List item",
   icon: ListItemIcon,
@@ -5457,7 +5473,7 @@ const a$5 = {
     li
   }
 };
-const p$5 = {
+const p$8 = {
   hr: [
     ...hr,
     {
@@ -5485,16 +5501,15 @@ const p$5 = {
       value: { type: "keyword", value: "none" }
     }
   ]
-}, n$2 = {
+}, n$3 = {
   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: p$5,
+  presetStyle: p$8,
   order: 3
 };
-const p$4 = {
+const p$7 = {
   code: [
     ...code,
     {
@@ -5522,16 +5537,19 @@ const p$4 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, d$4 = {
+}, i = {
   category: "general",
-  type: "embed",
   description: "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
   states: defaultStates,
-  presetStyle: p$4,
+  presetStyle: p$7,
   order: 5
 };
-const a$4 = {
+const a$3 = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
@@ -5541,7 +5559,7 @@ const a$4 = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
-  presetStyle: a$4
+  presetStyle: a$3
 };
 const l$3 = {
   textarea: [
@@ -5553,14 +5571,17 @@ const l$3 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$2 = {
+}, n$2 = {
   category: "forms",
-  type: "control",
   label: "Text Area",
   description: "A multi-line text input for collecting longer string data from your users.",
   icon: FormTextAreaIcon,
   presetStyle: l$3,
   order: 4,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5575,7 +5596,7 @@ const l$3 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const a$3 = {
+const a$2 = {
   input: [
     ...radio,
     {
@@ -5584,10 +5605,9 @@ const a$3 = {
     }
   ]
 }, s$3 = {
-  type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: a$3,
+  presetStyle: a$2,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5609,7 +5629,6 @@ const o$3 = {
     }
   ]
 }, d$3 = {
-  type: "control",
   icon: CheckboxCheckedIcon,
   presetStyle: o$3,
   states: [
@@ -5640,7 +5659,7 @@ const m$2 = {
     div
   }
 };
-const p$3 = {
+const p$6 = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
@@ -5657,13 +5676,13 @@ const p$3 = {
     div
   }
 };
-const a$2 = {
+const p$5 = {
   ...l$4,
   category: "hidden",
   label: "Preview Image",
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   }
 };
 const s$2 = {
@@ -5708,7 +5727,7 @@ const a$1 = {
   icon: CalendarIcon,
   order: 7
 };
-const r$8 = {
+const r$7 = {
   time
 }, s = {
   category: "localization",
@@ -5716,9 +5735,9 @@ const r$8 = {
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
-  presetStyle: r$8
+  presetStyle: r$7
 };
-const r$7 = {
+const r$6 = {
   select: [
     ...select,
     {
@@ -5726,10 +5745,10 @@ const r$7 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$1 = {
+}, c = {
   type: "container",
   icon: SelectIcon,
-  presetStyle: r$7,
+  presetStyle: r$6,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5753,9 +5772,8 @@ const l$2 = {
       }
     }
   ]
-}, r$6 = {
+}, r$5 = {
   category: "hidden",
-  type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
   presetStyle: l$2,
@@ -5770,7 +5788,7 @@ const l$2 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
-const r$5 = {
+const r$4 = {
   icon: HeaderIcon,
   type: "container",
   description: "Inserts children into the head of the document",
@@ -5779,26 +5797,21 @@ const r$5 = {
     children: ["HeadLink", "HeadMeta", "HeadTitle"]
   }
 };
-const p$2 = {
-  category: "hidden",
+const p$4 = {
   icon: ResourceIcon,
-  type: "embed",
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   }
 };
-const p$1 = {
-  category: "hidden",
+const p$3 = {
   icon: WindowInfoIcon,
-  type: "embed",
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   }
 };
-const c = {
-  category: "hidden",
+const p$2 = {
   icon: WindowTitleIcon,
   type: "container",
   contentModel: {
@@ -5806,9 +5819,12 @@ const c = {
     children: ["text"]
   }
 };
-const r$4 = {
-  type: "control",
+const p$1 = {
   icon: VideoIcon,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
   presetStyle: {
     video: [
       {
@@ -5820,51 +5836,51 @@ const r$4 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i,
-  Body: n$6,
+  Blockquote: i$1,
+  Body: n$8,
   Bold: l$6,
   Box: v$2,
-  Button: p$6,
+  Button: p$9,
   Checkbox: d$3,
-  CodeText: d$4,
-  Form: c$3,
-  Fragment: o$4,
-  HeadLink: p$2,
-  HeadMeta: p$1,
-  HeadSlot: r$5,
-  HeadTitle: c,
-  Heading: d$6,
-  HtmlEmbed: r$c,
+  CodeText: i,
+  Form: c$1,
+  Fragment: o$5,
+  HeadLink: p$4,
+  HeadMeta: p$3,
+  HeadSlot: r$4,
+  HeadTitle: p$2,
+  Heading: d$5,
+  HtmlEmbed: r$a,
   Image: l$4,
-  Input: c$4,
+  Input: c$2,
   Italic: c$5,
   Label: m$3,
-  Link: n$4,
-  List: d$5,
-  ListItem: a$5,
-  MarkdownEmbed: a$e,
-  Option: r$6,
-  Paragraph: n$5,
+  Link: n$6,
+  List: d$4,
+  ListItem: a$4,
+  MarkdownEmbed: a$a,
+  Option: r$5,
+  Paragraph: n$7,
   RadioButton: s$3,
-  RemixForm: n$3,
-  RichTextLink: a$a,
-  Select: c$1,
-  Separator: n$2,
+  RemixForm: n$4,
+  RichTextLink: o$4,
+  Select: c,
+  Separator: n$3,
   Slot: e$5,
-  Span: c$6,
-  Subscript: a$8,
-  Superscript: a$9,
+  Span: n$5,
+  Subscript: c$3,
+  Superscript: c$4,
   Text: s$6,
-  Textarea: c$2,
+  Textarea: n$2,
   Time: s,
-  Video: r$4,
+  Video: p$1,
   Vimeo: m$2,
   VimeoPlayButton: s$2,
-  VimeoPreviewImage: a$2,
+  VimeoPreviewImage: p$5,
   VimeoSpinner: s$1,
   XmlNode: e$1,
   XmlTime: a$1,
-  YouTube: p$3
+  YouTube: p$6
 }, Symbol.toStringTag, { value: "Module" }));
 const o$2 = {
   category: "animations",
@@ -5939,11 +5955,11 @@ const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Ob
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$6,
-  Form: c$3,
-  Link: n$4,
-  RemixForm: n$3,
-  RichTextLink: a$a
+  Body: n$8,
+  Form: c$1,
+  Link: n$6,
+  RemixForm: n$4,
+  RichTextLink: o$4
 }, Symbol.toStringTag, { value: "Module" }));
 const r = (t2) => new Proxy(
   {},
@@ -6088,7 +6104,7 @@ const S$1 = {
 }, h$1 = {
   type: "container",
   presetStyle: {
-    p: p$9
+    p: p$c
   },
   icon: TextIcon,
   constraints: {
@@ -6817,11 +6833,11 @@ const createFramework$2 = async () => {
 };
 const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$6,
-  Form: c$3,
-  Link: n$4,
-  RemixForm: n$3,
-  RichTextLink: a$a
+  Body: n$8,
+  Form: c$1,
+  Link: n$6,
+  RemixForm: n$4,
+  RichTextLink: o$4
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -7359,6 +7375,10 @@ Please check webstudio --help for more details`
       import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
       ${componentImports}
 
+      export const projectId = "${siteData.build.projectId}";
+
+      export const lastPublished = "${new Date(siteData.build.createdAt).toISOString()}";
+
       export const siteName = ${JSON.stringify(projectMeta == null ? void 0 : projectMeta.siteName)};
 
       export const breakpoints = ${JSON.stringify(breakpoints)};
@@ -7422,8 +7442,6 @@ Please check webstudio --help for more details`
 
       ${generateRemixParams(page.path)}
 
-      export const projectId = "${siteData.build.projectId}";
-
       export const contactEmail = ${JSON.stringify(contactEmail)};
     `;
     const generatedBasename = generateRemixRoute(pagePath);
@@ -7641,7 +7659,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.213.0";
+const version = "0.215.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.213.0",
+  "version": "0.215.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -68,17 +68,17 @@
     "vite": "^5.4.11",
     "vitest": "^3.0.8",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.213.0",
-    "@webstudio-is/http-client": "0.213.0",
-    "@webstudio-is/image": "0.213.0",
-    "@webstudio-is/react-sdk": "0.213.0",
-    "@webstudio-is/sdk-components-animation": "0.213.0",
-    "@webstudio-is/sdk-components-react": "0.213.0",
-    "@webstudio-is/sdk-components-react-radix": "0.213.0",
-    "@webstudio-is/sdk-components-react-remix": "0.213.0",
-    "@webstudio-is/sdk-components-react-router": "0.213.0",
+    "@webstudio-is/css-engine": "0.215.0",
+    "@webstudio-is/http-client": "0.215.0",
+    "@webstudio-is/image": "0.215.0",
+    "@webstudio-is/react-sdk": "0.215.0",
+    "@webstudio-is/sdk-components-react": "0.215.0",
+    "@webstudio-is/sdk-components-react-radix": "0.215.0",
+    "@webstudio-is/sdk-components-react-remix": "0.215.0",
+    "@webstudio-is/sdk-components-react-router": "0.215.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk": "0.213.0"
+    "@webstudio-is/sdk": "0.215.0",
+    "@webstudio-is/sdk-components-animation": "0.215.0"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/defaults/app/root.tsx

@@ -3,7 +3,7 @@
 import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
-import { CustomCode } from "./__generated__/_index";
+import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
 const Root = () => {
   // Get language from matches
@@ -19,7 +19,11 @@ const Root = () => {
   const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
 
   return (
-    <html lang={lang}>
+    <html
+      lang={lang}
+      data-ws-project={projectId}
+      data-ws-last-published={lastPublished}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />

package/templates/defaults/app/route-templates/html.tsx

@@ -23,6 +23,7 @@ import {
   PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
+  projectId,
   Page,
   siteName,
   favIconAsset,
@@ -34,7 +35,6 @@ import {
   getResources,
   getPageMeta,
   getRemixParams,
-  projectId,
   contactEmail,
 } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.16.4",
     "@remix-run/react": "2.16.4",
     "@remix-run/server-runtime": "2.16.4",
-    "@webstudio-is/image": "0.213.0",
-    "@webstudio-is/react-sdk": "0.213.0",
-    "@webstudio-is/sdk": "0.213.0",
-    "@webstudio-is/sdk-components-react": "0.213.0",
-    "@webstudio-is/sdk-components-animation": "0.213.0",
-    "@webstudio-is/sdk-components-react-radix": "0.213.0",
-    "@webstudio-is/sdk-components-react-remix": "0.213.0",
+    "@webstudio-is/image": "0.215.0",
+    "@webstudio-is/react-sdk": "0.215.0",
+    "@webstudio-is/sdk": "0.215.0",
+    "@webstudio-is/sdk-components-react": "0.215.0",
+    "@webstudio-is/sdk-components-animation": "0.215.0",
+    "@webstudio-is/sdk-components-react-radix": "0.215.0",
+    "@webstudio-is/sdk-components-react-remix": "0.215.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/app/root.tsx

@@ -3,7 +3,7 @@
 import { Links, Meta, Outlet, useMatches } from "react-router";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
-import { CustomCode } from "./__generated__/_index";
+import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
 const Root = () => {
   // Get language from matches
@@ -19,7 +19,11 @@ const Root = () => {
   const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
 
   return (
-    <html lang={lang}>
+    <html
+      lang={lang}
+      data-ws-project={projectId}
+      data-ws-last-published={lastPublished}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />

package/templates/react-router/app/route-templates/html.tsx

@@ -22,6 +22,7 @@ import {
   PageSettingsTitle,
 } from "@webstudio-is/react-sdk/runtime";
 import {
+  projectId,
   Page,
   siteName,
   favIconAsset,
@@ -33,7 +34,6 @@ import {
   getResources,
   getPageMeta,
   getRemixParams,
-  projectId,
   contactEmail,
 } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";

package/templates/react-router/package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@react-router/dev": "^7.5.0",
     "@react-router/fs-routes": "^7.5.0",
-    "@webstudio-is/image": "0.213.0",
-    "@webstudio-is/react-sdk": "0.213.0",
-    "@webstudio-is/sdk": "0.213.0",
-    "@webstudio-is/sdk-components-animation": "0.213.0",
-    "@webstudio-is/sdk-components-react-radix": "0.213.0",
-    "@webstudio-is/sdk-components-react-router": "0.213.0",
-    "@webstudio-is/sdk-components-react": "0.213.0",
+    "@webstudio-is/image": "0.215.0",
+    "@webstudio-is/react-sdk": "0.215.0",
+    "@webstudio-is/sdk": "0.215.0",
+    "@webstudio-is/sdk-components-animation": "0.215.0",
+    "@webstudio-is/sdk-components-react-radix": "0.215.0",
+    "@webstudio-is/sdk-components-react-router": "0.215.0",
+    "@webstudio-is/sdk-components-react": "0.215.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.213.0",
-    "@webstudio-is/react-sdk": "0.213.0",
-    "@webstudio-is/sdk": "0.213.0",
-    "@webstudio-is/sdk-components-react": "0.213.0",
-    "@webstudio-is/sdk-components-animation": "0.213.0",
-    "@webstudio-is/sdk-components-react-radix": "0.213.0",
+    "@webstudio-is/image": "0.215.0",
+    "@webstudio-is/react-sdk": "0.215.0",
+    "@webstudio-is/sdk": "0.215.0",
+    "@webstudio-is/sdk-components-react": "0.215.0",
+    "@webstudio-is/sdk-components-animation": "0.215.0",
+    "@webstudio-is/sdk-components-react-radix": "0.215.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.228"

package/templates/ssg/renderer/+onRenderHtml.tsx

@@ -1,10 +1,14 @@
 import { renderToString } from "react-dom/server";
 import { dangerouslySkipEscape, escapeInject } from "vike/server";
 import type { OnRenderHtmlSync } from "vike/types";
-// @todo think about how to make __generated__ typeable
-/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-// @ts-ignore
-import { CustomCode } from "../app/__generated__/_index";
+import {
+  CustomCode,
+  projectId,
+  lastPublished,
+  // @todo think about how to make __generated__ typeable
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+} from "../app/__generated__/_index";
 
 export const onRenderHtml: OnRenderHtmlSync = (pageContext) => {
   const lang = pageContext.data.pageMeta.language || "en";
@@ -12,7 +16,11 @@ export const onRenderHtml: OnRenderHtmlSync = (pageContext) => {
   const Page = pageContext.Page ?? (() => <></>);
   const html = dangerouslySkipEscape(
     renderToString(
-      <html lang={lang}>
+      <html
+        lang={lang}
+        data-ws-project={projectId}
+        data-ws-last-published={lastPublished}
+      >
         <head>
           <meta charSet="UTF-8" />
           <meta name="viewport" content="width=device-width,initial-scale=1" />