webstudio 0.231.0 → 0.233.0

package/lib/cli.js

@@ -5020,7 +5020,7 @@ const e$u = {
     required: false,
     control: "text",
     type: "string",
-    description: "Classes to which the element belongs"
+    description: ""
   },
   clientOnly: { required: false, control: "boolean", type: "boolean" },
   code: { required: true, control: "text", type: "string" },
@@ -6495,7 +6495,7 @@ const e$f = {
     required: false,
     control: "text",
     type: "string",
-    description: "Document base URL"
+    description: "Address of the hyperlink"
   },
   hreflang: {
     required: false,
@@ -6760,6 +6760,14 @@ const e$d = {
     defaultValue: "medium",
     options: ["full", "long", "medium", "short", "none"]
   },
+  format: {
+    description: `Custom format template string. When provided, overrides Date Style and Time Style.
+Supports tokens: YYYY, YY, MM, M, DD, D, HH, H, mm, m, ss, s.
+Example: "YYYY-MM-DD HH:mm:ss" displays as "2025-11-03 18:47:25"`,
+    required: false,
+    control: "text",
+    type: "string"
+  },
   language: {
     required: false,
     control: "select",
@@ -6857,7 +6865,14 @@ const r$9 = {
   presetStyle: {
     time
   },
-  initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"],
+  initialProps: [
+    "datetime",
+    "language",
+    "country",
+    "dateStyle",
+    "timeStyle",
+    "format"
+  ],
   props: e$d
 };
 const o$k = {};
@@ -7050,13 +7065,13 @@ const l$1 = (n2) => new Proxy({}, { get(w2, t2) {
 - (1..n]: Animates multiple parts of the text within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 5 }, splitBy: { description: "Defines how the text is split for animation (e.g., by character, space, or symbol).", required: false, control: "select", type: "string", defaultValue: "char", options: ["char", "space", 'symbol "#"', 'symbol "~"'] } }, p$1 = { category: "animations", description: "Text animation allows you to split text by char or by word to animate it.", icon: TextAnimationIcon, order: 1, label: "Text Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing", "splitBy"], props: d$2 }, m$5 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
 - 0: Typewriter effect (no animation).
 - (0..1]: Animates one child at a time.
-- (1..n]: Animates multiple children within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 1 } }, u$1 = { category: "animations", description: "Stagger animation allows you to animate children elements with a sliding window.", icon: StaggerAnimationIcon, order: 4, label: "Stagger Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing"], props: m$5 }, g$2 = { timeline: { required: false, control: "boolean", type: "boolean" } }, h$3 = { icon: PlayIcon, label: "Video Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, props: g$2, initialProps: ["timeline"] };
+- (1..n]: Animates multiple children within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 1 } }, u$1 = { category: "animations", description: "Stagger animation allows you to animate children elements with a sliding window.", icon: StaggerAnimationIcon, order: 4, label: "Stagger Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing"], props: m$5 }, g$2 = { timeline: { required: false, control: "boolean", type: "boolean" } }, h$2 = { icon: PlayIcon, label: "Video Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, props: g$2, initialProps: ["timeline"] };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AnimateChildren: c,
   AnimateText: p$1,
   StaggerAnimation: u$1,
-  VideoAnimation: h$3
+  VideoAnimation: h$2
 }, Symbol.toStringTag, { value: "Module" }));
 const r$6 = (t2) => new Proxy(
   {},
@@ -7303,7 +7318,7 @@ const C$3 = {
   },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$5
-}, h$2 = {
+}, h$1 = {
   icon: PopoverIcon,
   contentModel: {
     category: "instance",
@@ -7491,7 +7506,7 @@ const y = {
   },
   presetStyle: { div },
   props: e$6
-}, f$3 = {
+}, f$2 = {
   icon: HeaderIcon,
   contentModel: {
     category: "none",
@@ -7610,7 +7625,7 @@ const v$1 = {
   presetStyle: { div },
   initialProps: ["value"],
   props: o$5
-}, f$2 = {
+}, f$1 = {
   label: "Item Header",
   icon: HeaderIcon,
   contentModel: {
@@ -7706,7 +7721,7 @@ const L = {
     div
   },
   props: e$4
-}, h$1 = {
+}, h = {
   icon: ListIcon,
   label: "Menu List",
   contentModel: {
@@ -7735,7 +7750,7 @@ const L = {
     div
   },
   props: o$4
-}, k$2 = {
+}, k$3 = {
   icon: TriggerIcon,
   label: "Menu Trigger",
   contentModel: {
@@ -7888,7 +7903,7 @@ const b$1 = {
   },
   initialProps: ["name", "value", "open", "required"],
   props: e$3
-}, f$1 = {
+}, f = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -7925,7 +7940,7 @@ const b$1 = {
   },
   presetStyle: { div },
   props: n
-}, k$1 = {
+}, k$2 = {
   icon: ItemIcon,
   contentModel: {
     category: "none",
@@ -8029,7 +8044,7 @@ const m = {
   },
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: e$1
-}, k = {
+}, k$1 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
@@ -8105,40 +8120,44 @@ const e = {
     description: "Current value of the element"
   }
 }, r = {};
-const G = {
+const R = {
   icon: RadioGroupIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [n$4.RadioGroupItem]
   },
-  states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
-  ],
   presetStyle: {
     div
   },
   initialProps: ["id", "class", "name", "value", "required"],
   props: e
-}, h = {
+}, G = {
   icon: ItemIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.RadioGroupIndicator]
   },
+  states: [
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
+  ],
   presetStyle: {
     button: [button, b$4].flat()
   },
   initialProps: ["value"],
   props: o
-}, f = {
+}, k = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
+  ],
   presetStyle: {
     span
   },
@@ -8148,11 +8167,11 @@ const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   __proto__: null,
   Accordion: v$1,
   AccordionContent: H,
-  AccordionHeader: f$2,
+  AccordionHeader: f$1,
   AccordionItem: x,
   AccordionTrigger: C$1,
   Checkbox: m,
-  CheckboxIndicator: k,
+  CheckboxIndicator: k$1,
   Collapsible: g$1,
   CollapsibleContent: d$1,
   CollapsibleTrigger: m$4,
@@ -8168,29 +8187,29 @@ const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   NavigationMenuContent: w$1,
   NavigationMenuItem: b$2,
   NavigationMenuLink: C,
-  NavigationMenuList: h$1,
-  NavigationMenuTrigger: k$2,
+  NavigationMenuList: h,
+  NavigationMenuTrigger: k$3,
   NavigationMenuViewport: S,
-  Popover: h$2,
+  Popover: h$1,
   PopoverClose: u,
   PopoverContent: y$1,
   PopoverTrigger: C$3,
-  RadioGroup: G,
-  RadioGroupIndicator: f,
-  RadioGroupItem: h,
+  RadioGroup: R,
+  RadioGroupIndicator: k,
+  RadioGroupItem: G,
   Select: b$1,
   SelectContent: v,
-  SelectItem: k$1,
+  SelectItem: k$2,
   SelectItemIndicator: F,
   SelectItemText: q,
-  SelectTrigger: f$1,
+  SelectTrigger: f,
   SelectValue: w,
   SelectViewport: P,
   Switch: m$1,
   SwitchThumb: b,
   Tabs: y,
   TabsContent: C$2,
-  TabsList: f$3,
+  TabsList: f$2,
   TabsTrigger: x$1,
   Tooltip: m$3,
   TooltipContent: T,
@@ -9098,7 +9117,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.231.0";
+const version = "0.233.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.231.0",
+  "version": "0.233.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -70,16 +70,16 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.231.0",
-    "@webstudio-is/http-client": "0.231.0",
-    "@webstudio-is/image": "0.231.0",
-    "@webstudio-is/sdk": "0.231.0",
-    "@webstudio-is/sdk-components-animation": "0.231.0",
-    "@webstudio-is/sdk-components-react": "0.231.0",
-    "@webstudio-is/react-sdk": "0.231.0",
-    "@webstudio-is/sdk-components-react-radix": "0.231.0",
-    "@webstudio-is/sdk-components-react-remix": "0.231.0",
-    "@webstudio-is/sdk-components-react-router": "0.231.0",
+    "@webstudio-is/css-engine": "0.233.0",
+    "@webstudio-is/http-client": "0.233.0",
+    "@webstudio-is/image": "0.233.0",
+    "@webstudio-is/react-sdk": "0.233.0",
+    "@webstudio-is/sdk": "0.233.0",
+    "@webstudio-is/sdk-components-animation": "0.233.0",
+    "@webstudio-is/sdk-components-react": "0.233.0",
+    "@webstudio-is/sdk-components-react-remix": "0.233.0",
+    "@webstudio-is/sdk-components-react-radix": "0.233.0",
+    "@webstudio-is/sdk-components-react-router": "0.233.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

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

@@ -54,6 +54,24 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    // Normalize to midnight UTC to prevent hydration mismatches
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
   return cachedFetch(projectId, input, init);
 };
 
@@ -71,6 +89,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(
@@ -204,6 +223,7 @@ export const action = async ({
       params: {},
       search: {},
       origin: url.origin,
+      pathname: url.pathname,
     };
 
     const resourceName = formData.get(formIdFieldName);

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

@@ -22,6 +22,24 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    // Normalize to midnight UTC to prevent hydration mismatches
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
   return fetch(input, init);
 };
 
@@ -40,6 +58,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@webstudio-is/image": "0.231.0",
-    "@webstudio-is/react-sdk": "0.231.0",
-    "@webstudio-is/sdk": "0.231.0",
-    "@webstudio-is/sdk-components-react": "0.231.0",
-    "@webstudio-is/sdk-components-animation": "0.231.0",
-    "@webstudio-is/sdk-components-react-radix": "0.231.0",
-    "@webstudio-is/sdk-components-react-remix": "0.231.0",
+    "@webstudio-is/image": "0.233.0",
+    "@webstudio-is/react-sdk": "0.233.0",
+    "@webstudio-is/sdk": "0.233.0",
+    "@webstudio-is/sdk-components-react": "0.233.0",
+    "@webstudio-is/sdk-components-animation": "0.233.0",
+    "@webstudio-is/sdk-components-react-radix": "0.233.0",
+    "@webstudio-is/sdk-components-react-remix": "0.233.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/route-templates/html.tsx

@@ -53,6 +53,24 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    // Normalize to midnight UTC to prevent hydration mismatches
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
   return cachedFetch(projectId, input, init);
 };
 
@@ -70,6 +88,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(
@@ -203,6 +222,7 @@ export const action = async ({
       params: {},
       search: {},
       origin: url.origin,
+      pathname: url.pathname,
     };
 
     const resourceName = formData.get(formIdFieldName);

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

@@ -22,6 +22,24 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    // Normalize to midnight UTC to prevent hydration mismatches
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
   return fetch(input, init);
 };
 
@@ -40,6 +58,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(

package/templates/react-router/package.json

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

package/templates/ssg/app/route-templates/html/+data.ts

@@ -1,8 +1,34 @@
 import type { PageContextServer } from "vike/types";
 import { redirect } from "vike/abort";
-import { loadResources } from "@webstudio-is/sdk/runtime";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { getPageMeta, getResources } from "__SERVER__";
 
+const customFetch: typeof fetch = (input, init) => {
+  if (typeof input !== "string") {
+    return fetch(input, init);
+  }
+
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    // Normalize to midnight UTC to prevent hydration mismatches
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  return fetch(input, init);
+};
+
 export const data = async (pageContext: PageContextServer) => {
   const url = new URL(pageContext.urlOriginal, "http://url");
   const headers = new Headers(pageContext.headers ?? {});
@@ -15,9 +41,13 @@ export const data = async (pageContext: PageContextServer) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
-  const resources = await loadResources(fetch, getResources({ system }).data);
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
   const pageMeta = getPageMeta({ system, resources });
 
   if (pageMeta.redirect) {

package/templates/ssg/package.json

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