@webstudio-is/sdk 0.237.0 → 0.252.1

package/lib/core-templates.js

@@ -589,6 +589,16 @@ var collectionMeta = {
       required: true,
       control: "json",
       type: "json"
+    },
+    item: {
+      required: false,
+      control: "text",
+      type: "string"
+    },
+    itemKey: {
+      required: false,
+      control: "text",
+      type: "string"
     }
   }
 };
@@ -678,6 +688,7 @@ var linkMeta = {
   )
 };
 var collectionItem = new Parameter("collectionItem");
+var collectionItemKey = new Parameter("collectionItemKey");
 var collectionMeta2 = {
   category: "data",
   order: 2,
@@ -686,6 +697,7 @@ var collectionMeta2 = {
     {
       data: ["Collection Item 1", "Collection Item 2", "Collection Item 3"],
       item: collectionItem,
+      itemKey: collectionItemKey,
       children: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "div", children: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "div", children: expression`${collectionItem}` }) })
     }
   )

package/lib/index.js

@@ -33,7 +33,13 @@ var ImageAsset = z.object({
   meta: ImageMeta,
   type: z.literal("image")
 });
-var Asset = z.union([FontAsset, ImageAsset]);
+var FileAsset = z.object({
+  ...baseAsset,
+  format: z.string(),
+  meta: z.object({}),
+  type: z.literal("file")
+});
+var Asset = z.union([FontAsset, ImageAsset, FileAsset]);
 var Assets = z.map(AssetId, Asset);
 
 // src/schema/pages.ts
@@ -577,14 +583,23 @@ var Breakpoint = z8.object({
   id: BreakpointId,
   label: z8.string(),
   minWidth: z8.number().optional(),
-  maxWidth: z8.number().optional()
-}).refine(({ minWidth, maxWidth }) => {
+  maxWidth: z8.number().optional(),
+  condition: z8.string().optional()
+}).transform((data) => {
+  if (data.condition !== void 0 && data.condition.trim() === "") {
+    return { ...data, condition: void 0 };
+  }
+  return data;
+}).refine(({ minWidth, maxWidth, condition }) => {
+  if (condition !== void 0) {
+    return minWidth === void 0 && maxWidth === void 0;
+  }
   return (
     // Either min or max width have to be defined
     minWidth !== void 0 && maxWidth === void 0 || minWidth === void 0 && maxWidth !== void 0 || // This is a base breakpoint
     minWidth === void 0 && maxWidth === void 0
   );
-}, "Either minWidth or maxWidth should be defined");
+}, "Either minWidth, maxWidth, or condition should be defined, but not both");
 var Breakpoints = z8.map(BreakpointId, Breakpoint);
 var initialBreakpoints = [
   { id: "placeholder", label: "Base" },
@@ -924,6 +939,303 @@ var WsComponentMeta = z15.object({
   props: z15.record(PropMeta).optional()
 });
 
+// src/assets.ts
+import warnOnce from "warn-once";
+var ALLOWED_FILE_TYPES = {
+  // Documents
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  csv: "text/csv",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  // Code
+  txt: "text/plain",
+  md: "text/markdown",
+  js: "text/javascript",
+  css: "text/css",
+  json: "application/json",
+  html: "text/html",
+  xml: "application/xml",
+  // Archives
+  zip: "application/zip",
+  rar: "application/vnd.rar",
+  // Audio
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  m4a: "audio/mp4",
+  // Video
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  webm: "video/webm",
+  // Images
+  // Note: Cloudflare Image Resizing supports: jpg, jpeg, png, gif, webp, svg, avif
+  // Other formats (bmp, ico, tif, tiff) are served as-is without optimization
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  avif: "image/avif",
+  ico: "image/vnd.microsoft.icon",
+  // Used for favicons
+  bmp: "image/bmp",
+  // Served without optimization
+  tif: "image/tiff",
+  // Served without optimization
+  tiff: "image/tiff",
+  // Served without optimization
+  // Fonts
+  woff: "font/woff",
+  woff2: "font/woff2",
+  ttf: "font/ttf",
+  otf: "font/otf"
+};
+var ALLOWED_FILE_EXTENSIONS = new Set(
+  Object.keys(ALLOWED_FILE_TYPES)
+);
+var MIME_CATEGORIES = [
+  "image",
+  "video",
+  "audio",
+  "font",
+  "text",
+  "application"
+];
+var FILE_EXTENSIONS_BY_CATEGORY = (() => {
+  const categories = Object.fromEntries(
+    MIME_CATEGORIES.map((category) => [category, []])
+  );
+  Object.entries(ALLOWED_FILE_TYPES).forEach(([ext, mimeType]) => {
+    const [category] = mimeType.split("/");
+    if (category in categories) {
+      categories[category].push(ext);
+    }
+  });
+  return categories;
+})();
+var extensionToMime = new Map(
+  Object.entries(ALLOWED_FILE_TYPES).map(([ext, mime]) => [`.${ext}`, mime])
+);
+var mimeTypes = new Set(extensionToMime.values());
+var mimePatterns = /* @__PURE__ */ new Set([
+  ...mimeTypes.values(),
+  ...MIME_CATEGORIES.map((category) => `${category}/*`)
+]);
+var getCategory = (pattern) => {
+  const categoryAsString = pattern.split("/")[0];
+  const category = MIME_CATEGORIES.find(
+    (category2) => category2 === categoryAsString
+  );
+  if (category === void 0) {
+    throw new Error(`Invalid mime pattern: ${pattern}`);
+  }
+  return category;
+};
+var IMAGE_EXTENSIONS = FILE_EXTENSIONS_BY_CATEGORY.image;
+var IMAGE_MIME_TYPES = IMAGE_EXTENSIONS.map(
+  (ext) => ALLOWED_FILE_TYPES[ext]
+);
+var VIDEO_EXTENSIONS = FILE_EXTENSIONS_BY_CATEGORY.video;
+var VIDEO_MIME_TYPES = VIDEO_EXTENSIONS.map(
+  (ext) => ALLOWED_FILE_TYPES[ext]
+);
+var FONT_EXTENSIONS = FILE_EXTENSIONS_BY_CATEGORY.font;
+var getMimeTypeByExtension = (extension) => {
+  return ALLOWED_FILE_TYPES[extension.toLowerCase()];
+};
+var getMimeTypeByFilename = (fileName) => {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  if (!extension) {
+    return "application/octet-stream";
+  }
+  return getMimeTypeByExtension(extension) ?? "application/octet-stream";
+};
+var isAllowedExtension = (extension) => {
+  return ALLOWED_FILE_EXTENSIONS.has(
+    extension.toLowerCase()
+  );
+};
+var isAllowedMimeCategory = (category) => {
+  return MIME_CATEGORIES.includes(category);
+};
+var acceptToMimePatterns = (accept) => {
+  const result = /* @__PURE__ */ new Set();
+  if (accept === "") {
+    return "*";
+  }
+  for (const type of accept.split(",")) {
+    const trimmed = type.trim();
+    if (trimmed === "*" || trimmed === "*/*") {
+      return "*";
+    }
+    if (mimePatterns.has(trimmed)) {
+      result.add(trimmed);
+      continue;
+    }
+    const mime = extensionToMime.get(trimmed);
+    if (mime === void 0) {
+      warnOnce(
+        true,
+        `Couldn't not parse accept attribute value: ${trimmed}. Falling back to "*".`
+      );
+      return "*";
+    }
+    result.add(mime);
+  }
+  return result;
+};
+var acceptToMimeCategories = (accept) => {
+  const patterns = acceptToMimePatterns(accept);
+  if (patterns === "*") {
+    return "*";
+  }
+  const categories = /* @__PURE__ */ new Set();
+  for (const pattern of patterns) {
+    categories.add(getCategory(pattern));
+  }
+  return categories;
+};
+var getAssetMime = ({
+  type,
+  format
+}) => {
+  const lowerFormat = format.toLowerCase();
+  const mime = `${type}/${lowerFormat}`;
+  if (mimeTypes.has(mime)) {
+    return mime;
+  }
+  const mime2 = extensionToMime.get(`.${lowerFormat}`);
+  if (mime2 === void 0) {
+    warnOnce(
+      true,
+      `Couldn't determine mime type of asset: ${type}, ${format}.`
+    );
+  }
+  return mime2;
+};
+var doesAssetMatchMimePatterns = (asset, patterns) => {
+  if (patterns === "*") {
+    return true;
+  }
+  const mime = getAssetMime(asset);
+  if (mime !== void 0) {
+    if (patterns.has(mime) || patterns.has(`${getCategory(mime)}/*`)) {
+      return true;
+    }
+  }
+  if (asset.type === "file" && asset.name) {
+    const extension = asset.name.split(".").pop()?.toLowerCase();
+    if (extension) {
+      const mimeFromExtension = extensionToMime.get(`.${extension}`);
+      if (mimeFromExtension) {
+        return patterns.has(mimeFromExtension) || patterns.has(`${getCategory(mimeFromExtension)}/*`);
+      }
+    }
+  }
+  return false;
+};
+var validateFileName = (fileName) => {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  if (!extension) {
+    throw new Error("File must have an extension");
+  }
+  if (!isAllowedExtension(extension)) {
+    throw new Error(
+      `File type "${extension}" is not allowed. Allowed types: ${Array.from(
+        ALLOWED_FILE_EXTENSIONS
+      ).join(", ")}`
+    );
+  }
+  const mimeType = getMimeTypeByExtension(extension);
+  if (!mimeType) {
+    throw new Error(
+      `Could not determine MIME type for extension: ${extension}`
+    );
+  }
+  return { extension, mimeType };
+};
+var detectAssetType = (fileName) => {
+  const ext = fileName.split(".").pop()?.toLowerCase();
+  if (!ext) {
+    return "file";
+  }
+  if (IMAGE_EXTENSIONS.includes(ext)) {
+    return "image";
+  }
+  if (FONT_EXTENSIONS.includes(ext)) {
+    return "font";
+  }
+  if (VIDEO_EXTENSIONS.includes(ext)) {
+    return "video";
+  }
+  return "file";
+};
+var decodePathFragment = (fragment) => {
+  const decoded = decodeURIComponent(fragment);
+  if (decoded.includes("..") || decoded.startsWith("/")) {
+    throw new Error("Invalid file path");
+  }
+  return decoded;
+};
+var getAssetUrl = (asset, origin) => {
+  let path;
+  const assetType = detectAssetType(asset.name);
+  if (assetType === "image") {
+    path = `/cgi/image/${asset.name}?format=raw`;
+  } else {
+    path = `/cgi/asset/${asset.name}?format=raw`;
+  }
+  return new URL(path, origin);
+};
+var extractImageMetadata = (asset) => {
+  if (asset.type !== "image") {
+    return;
+  }
+  if (asset.meta.width && asset.meta.height) {
+    return {
+      width: asset.meta.width,
+      height: asset.meta.height
+    };
+  }
+};
+var extractFontMetadata = (asset) => {
+  if (asset.type !== "font") {
+    return;
+  }
+  const metadata = {
+    family: asset.meta.family
+  };
+  if ("style" in asset.meta) {
+    metadata.style = asset.meta.style;
+    metadata.weight = asset.meta.weight;
+  }
+  return metadata;
+};
+var extractFileMetadata = (_asset) => {
+  return;
+};
+var metadataExtractors = {
+  image: extractImageMetadata,
+  font: extractFontMetadata,
+  file: extractFileMetadata
+};
+var toRuntimeAsset = (asset, origin) => {
+  const extractor = metadataExtractors[asset.type];
+  const metadata = extractor(asset);
+  const url = getAssetUrl(asset, origin);
+  const relativeUrl = url.pathname + url.search;
+  return {
+    url: relativeUrl,
+    ...metadata
+  };
+};
+
 // src/core-metas.ts
 import {
   ContentBlockIcon,
@@ -1495,6 +1807,16 @@ var collectionMeta = {
       required: true,
       control: "json",
       type: "json"
+    },
+    item: {
+      required: false,
+      control: "text",
+      type: "string"
+    },
+    itemKey: {
+      required: false,
+      control: "text",
+      type: "string"
     }
   }
 };
@@ -1680,7 +2002,13 @@ var allowedStringMethods = /* @__PURE__ */ new Set([
   "toLocaleLowerCase",
   "toLocaleUpperCase"
 ]);
-var allowedArrayMethods = /* @__PURE__ */ new Set(["at", "includes", "join", "slice"]);
+var allowedArrayMethods = /* @__PURE__ */ new Set([
+  "at",
+  "includes",
+  "join",
+  "slice",
+  "filter"
+]);
 var lintExpression = ({
   expression,
   availableVariables = /* @__PURE__ */ new Set(),
@@ -2019,6 +2347,14 @@ var tokenRegexGlobal = new RegExp(tokenRegex.source, "g");
 var matchPathnameParams = (pathname) => {
   return pathname.matchAll(tokenRegexGlobal);
 };
+var isAbsoluteUrl = (href) => {
+  try {
+    new URL(href);
+    return true;
+  } catch {
+    return false;
+  }
+};
 
 // src/page-utils.ts
 var ROOT_FOLDER_ID = "root";
@@ -2649,6 +2985,8 @@ ${userSheet.cssText}`,
   };
 };
 export {
+  ALLOWED_FILE_EXTENSIONS,
+  ALLOWED_FILE_TYPES,
   Asset,
   Assets,
   Breakpoint,
@@ -2661,16 +2999,22 @@ export {
   DataSources,
   Deployment,
   ExpressionChild,
+  FILE_EXTENSIONS_BY_CATEGORY,
+  FONT_EXTENSIONS,
+  FileAsset,
   Folder,
   FolderName,
   FontAsset,
   HomePagePath,
+  IMAGE_EXTENSIONS,
+  IMAGE_MIME_TYPES,
   IdChild,
   ImageAsset,
   ImageMeta,
   Instance,
   InstanceChild,
   Instances,
+  MIME_CATEGORIES,
   OldPagePath,
   PageName,
   PagePath,
@@ -2697,8 +3041,12 @@ export {
   Styles,
   Templates,
   TextChild,
+  VIDEO_EXTENSIONS,
+  VIDEO_MIME_TYPES,
   WebstudioFragment,
   WsComponentMeta,
+  acceptToMimeCategories,
+  acceptToMimePatterns,
   addFontRules,
   allowedArrayMethods,
   allowedStringMethods,
@@ -2714,8 +3062,11 @@ export {
   createScope,
   decodeDataVariableId as decodeDataSourceVariable,
   decodeDataVariableId,
+  decodePathFragment,
   descendantComponent,
+  detectAssetType,
   documentTypes,
+  doesAssetMatchMimePatterns,
   durationUnitValueSchema,
   elementComponent,
   encodeDataVariableId as encodeDataSourceVariable,
@@ -2730,13 +3081,20 @@ export {
   generateObjectExpression,
   generatePageMeta,
   generateResources,
+  getAssetMime,
+  getAssetUrl,
   getExpressionIdentifiers,
   getIndexesWithinAncestors,
+  getMimeTypeByExtension,
+  getMimeTypeByFilename,
   getPagePath,
   getStaticSiteMapXml,
   getStyleDeclKey,
   initialBreakpoints,
   insetUnitValueSchema,
+  isAbsoluteUrl,
+  isAllowedExtension,
+  isAllowedMimeCategory,
   isComponentDetachable,
   isCoreComponent,
   isLiteralExpression,
@@ -2753,6 +3111,8 @@ export {
   scrollAnimationSchema,
   systemParameter,
   tags,
+  toRuntimeAsset,
   transpileExpression,
+  validateFileName,
   viewAnimationSchema
 };

package/lib/runtime.js

@@ -39,6 +39,7 @@ var isLocalResource = (pathname, resourceName) => {
 };
 var sitemapResourceUrl = `/${LOCAL_RESOURCE_PREFIX}/sitemap.xml`;
 var currentDateResourceUrl = `/${LOCAL_RESOURCE_PREFIX}/current-date`;
+var assetsResourceUrl = `/${LOCAL_RESOURCE_PREFIX}/assets`;
 var loadResource = async (customFetch, resourceRequest) => {
   try {
     const { method, searchParams, headers, body } = resourceRequest;
@@ -141,6 +142,12 @@ var cachedFetch = async (namespace, input, init) => {
 // src/form-fields.ts
 var formIdFieldName = `ws--form-id`;
 var formBotFieldName = `ws--form-bot`;
+var isBraveBrowser = () => {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  return navigator.brave?.isBrave?.() === true || navigator.brave !== void 0;
+};
 
 // src/runtime.ts
 var tagProperty = "data-ws-tag";
@@ -154,6 +161,7 @@ var getIndexWithinAncestorFromProps = (props) => {
 var animationCanPlayOnCanvasProperty = "data-ws-animation-can-play-on-canvas";
 export {
   animationCanPlayOnCanvasProperty,
+  assetsResourceUrl,
   cachedFetch,
   createJsonStringifyProxy,
   currentDateResourceUrl,
@@ -162,6 +170,7 @@ export {
   getIndexWithinAncestorFromProps,
   getTagFromProps,
   indexProperty,
+  isBraveBrowser,
   isLocalResource,
   isPlainObject,
   loadResource,

package/lib/types/assets.d.ts

@@ -0,0 +1,176 @@
+import type { Asset } from "./schema/assets";
+/**
+ * Central registry of allowed file types, extensions, and MIME types
+ * for asset uploads and serving.
+ *
+ * IMPORTANT: For images, we only support formats that Cloudflare Image Resizing can process.
+ * Supported by Cloudflare: JPEG, PNG, GIF, WebP, SVG, AVIF
+ * See: https://developers.cloudflare.com/images/image-resizing/format-limitations/
+ *
+ * Other formats (BMP, ICO, TIFF) are allowed for upload but served as-is without optimization.
+ */
+export declare const ALLOWED_FILE_TYPES: {
+    readonly pdf: "application/pdf";
+    readonly doc: "application/msword";
+    readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly xls: "application/vnd.ms-excel";
+    readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly csv: "text/csv";
+    readonly ppt: "application/vnd.ms-powerpoint";
+    readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly txt: "text/plain";
+    readonly md: "text/markdown";
+    readonly js: "text/javascript";
+    readonly css: "text/css";
+    readonly json: "application/json";
+    readonly html: "text/html";
+    readonly xml: "application/xml";
+    readonly zip: "application/zip";
+    readonly rar: "application/vnd.rar";
+    readonly mp3: "audio/mpeg";
+    readonly wav: "audio/wav";
+    readonly ogg: "audio/ogg";
+    readonly m4a: "audio/mp4";
+    readonly mp4: "video/mp4";
+    readonly mov: "video/quicktime";
+    readonly avi: "video/x-msvideo";
+    readonly webm: "video/webm";
+    readonly jpg: "image/jpeg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly gif: "image/gif";
+    readonly svg: "image/svg+xml";
+    readonly webp: "image/webp";
+    readonly avif: "image/avif";
+    readonly ico: "image/vnd.microsoft.icon";
+    readonly bmp: "image/bmp";
+    readonly tif: "image/tiff";
+    readonly tiff: "image/tiff";
+    readonly woff: "font/woff";
+    readonly woff2: "font/woff2";
+    readonly ttf: "font/ttf";
+    readonly otf: "font/otf";
+};
+export type AllowedFileExtension = keyof typeof ALLOWED_FILE_TYPES;
+/**
+ * Set of allowed file extensions for quick lookup
+ */
+export declare const ALLOWED_FILE_EXTENSIONS: ReadonlySet<AllowedFileExtension>;
+/**
+ * Set of allowed MIME type categories
+ */
+export declare const MIME_CATEGORIES: readonly ["image", "video", "audio", "font", "text", "application"];
+export type MimeCategory = (typeof MIME_CATEGORIES)[number];
+/**
+ * File extensions grouped by MIME category for UI display and filtering
+ */
+export declare const FILE_EXTENSIONS_BY_CATEGORY: Readonly<Record<MimeCategory, AllowedFileExtension[]>>;
+/**
+ * All image file extensions
+ */
+export declare const IMAGE_EXTENSIONS: readonly AllowedFileExtension[];
+/**
+ * All image MIME types
+ */
+export declare const IMAGE_MIME_TYPES: readonly string[];
+/**
+ * All video file extensions
+ */
+export declare const VIDEO_EXTENSIONS: readonly AllowedFileExtension[];
+/**
+ * All video MIME types
+ */
+export declare const VIDEO_MIME_TYPES: readonly string[];
+/**
+ * All font file extensions
+ */
+export declare const FONT_EXTENSIONS: readonly AllowedFileExtension[];
+/**
+ * Get MIME type for a given file extension
+ */
+export declare const getMimeTypeByExtension: (extension: string) => string | undefined;
+/**
+ * Get MIME type from a filename
+ */
+export declare const getMimeTypeByFilename: (fileName: string) => string;
+/**
+ * Check if a file extension is allowed
+ */
+export declare const isAllowedExtension: (extension: string) => boolean;
+/**
+ * Check if a MIME type category is allowed
+ */
+export declare const isAllowedMimeCategory: (category: string) => boolean;
+/**
+ * Convert accept attribute value to MIME patterns.
+ * `".svg,font/otf,text/*"` -> `"image/svg+xml", "font/otf", "text/*"`
+ */
+export declare const acceptToMimePatterns: (accept: string) => Set<string> | "*";
+/**
+ * Convert accept attribute value to MIME categories.
+ * `".svg,font/otf,text/*"` -> `"image", "font", "text"`
+ */
+export declare const acceptToMimeCategories: (accept: string) => Set<MimeCategory> | "*";
+/**
+ * Get MIME type for an asset based on its type and format
+ */
+export declare const getAssetMime: ({ type, format, }: {
+    type: "image" | "font" | "file";
+    format: string;
+}) => string | undefined;
+/**
+ * Check if an asset matches the given MIME patterns.
+ * Supports legacy assets that were incorrectly stored with type "file".
+ */
+export declare const doesAssetMatchMimePatterns: (asset: Pick<Asset, "format" | "type" | "name">, patterns: Set<string> | "*") => boolean;
+/**
+ * Validate a filename and return its extension and MIME type
+ * @throws Error if file extension is not allowed
+ */
+export declare const validateFileName: (fileName: string) => {
+    extension: string;
+    mimeType: string;
+};
+/**
+ * Detect the asset type from a file based on its extension
+ */
+export declare const detectAssetType: (fileName: string) => "image" | "font" | "video" | "file";
+/**
+ * Safely decode a URL path fragment, preventing path traversal attacks
+ * @throws Error if the decoded path contains path traversal attempts
+ */
+export declare const decodePathFragment: (fragment: string) => string;
+/**
+ * Generates the appropriate URL for an asset based on its type and format.
+ * - Images use /cgi/image/ with format=raw
+ * - All other assets (videos, audio, fonts, documents) use /cgi/asset/ with format=raw
+ *
+ * @param asset - The asset to generate URL for
+ * @param origin - Origin to prepend (e.g., "https://example.com"). When provided, returns an absolute URL.
+ * @returns A URL object. Use .pathname for relative paths, .href for absolute URLs
+ */
+export declare const getAssetUrl: (asset: Asset, origin: string) => URL;
+/**
+ * Runtime asset data structure with only fields needed at runtime.
+ * This is a simplified version of the Asset type, optimized for client-side usage.
+ */
+export type RuntimeAsset = {
+    url: string;
+    width?: number;
+    height?: number;
+    family?: string;
+    style?: string;
+    weight?: number;
+};
+/**
+ * Converts a full Asset to a minimal RuntimeAsset format.
+ * This reduces payload size by including only runtime-needed data.
+ *
+ * Each asset type defines its own metadata extractor to ensure we only
+ * include the fields that are actually needed at runtime.
+ *
+ * @param asset - The full asset object
+ * @param origin - Origin to use for generating the asset URL (only used for URL construction, result is always a relative path)
+ * @returns A minimal RuntimeAsset object with relative URL
+ */
+export declare const toRuntimeAsset: (asset: Asset, origin: string) => RuntimeAsset;

package/lib/types/form-fields.d.ts

@@ -6,3 +6,10 @@ export declare const formIdFieldName = "ws--form-id";
  * Used for simlpe protection against non js bots
  */
 export declare const formBotFieldName = "ws--form-bot";
+/**
+ * Detects if the browser is Brave.
+ * Brave Shields blocks our bot protection mechanism (matchMedia fingerprinting detection),
+ * causing form submissions to silently fail.
+ * @see https://github.com/brave/brave-browser/issues/46541
+ */
+export declare const isBraveBrowser: () => boolean;

package/lib/types/index.d.ts

@@ -12,6 +12,7 @@ export * from "./schema/deployment";
 export * from "./schema/webstudio";
 export * from "./schema/prop-meta";
 export * from "./schema/component-meta";
+export * from "./assets";
 export * from "./core-metas";
 export * from "./instances-utils";
 export * from "./page-utils";

package/lib/types/resource-loader.d.ts

@@ -5,6 +5,7 @@ import type { ResourceRequest } from "./schema/resources";
 export declare const isLocalResource: (pathname: string, resourceName?: string) => boolean;
 export declare const sitemapResourceUrl = "/$resources/sitemap.xml";
 export declare const currentDateResourceUrl = "/$resources/current-date";
+export declare const assetsResourceUrl = "/$resources/assets";
 export declare const loadResource: (customFetch: typeof fetch, resourceRequest: ResourceRequest) => Promise<{
     ok: boolean;
     status: number;

package/lib/types/schema/assets.d.ts

@@ -165,6 +165,41 @@ export declare const ImageAsset: z.ZodObject<{
     description?: string | null | undefined;
 }>;
 export type ImageAsset = z.infer<typeof ImageAsset>;
+export declare const FileAsset: z.ZodObject<{
+    format: z.ZodString;
+    meta: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    type: z.ZodLiteral<"file">;
+    id: z.ZodString;
+    projectId: z.ZodString;
+    size: z.ZodNumber;
+    name: z.ZodString;
+    filename: z.ZodOptional<z.ZodString>;
+    description: z.ZodUnion<[z.ZodOptional<z.ZodString>, z.ZodNull]>;
+    createdAt: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    type: "file";
+    name: string;
+    format: string;
+    meta: {};
+    id: string;
+    projectId: string;
+    size: number;
+    createdAt: string;
+    filename?: string | undefined;
+    description?: string | null | undefined;
+}, {
+    type: "file";
+    name: string;
+    format: string;
+    meta: {};
+    id: string;
+    projectId: string;
+    size: number;
+    createdAt: string;
+    filename?: string | undefined;
+    description?: string | null | undefined;
+}>;
+export type FileAsset = z.infer<typeof FileAsset>;
 export declare const Asset: z.ZodUnion<[z.ZodObject<{
     format: z.ZodUnion<[z.ZodLiteral<"ttf">, z.ZodLiteral<"woff">, z.ZodLiteral<"woff2">]>;
     meta: z.ZodUnion<[z.ZodObject<{
@@ -316,6 +351,39 @@ export declare const Asset: z.ZodUnion<[z.ZodObject<{
     createdAt: string;
     filename?: string | undefined;
     description?: string | null | undefined;
+}>, z.ZodObject<{
+    format: z.ZodString;
+    meta: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    type: z.ZodLiteral<"file">;
+    id: z.ZodString;
+    projectId: z.ZodString;
+    size: z.ZodNumber;
+    name: z.ZodString;
+    filename: z.ZodOptional<z.ZodString>;
+    description: z.ZodUnion<[z.ZodOptional<z.ZodString>, z.ZodNull]>;
+    createdAt: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    type: "file";
+    name: string;
+    format: string;
+    meta: {};
+    id: string;
+    projectId: string;
+    size: number;
+    createdAt: string;
+    filename?: string | undefined;
+    description?: string | null | undefined;
+}, {
+    type: "file";
+    name: string;
+    format: string;
+    meta: {};
+    id: string;
+    projectId: string;
+    size: number;
+    createdAt: string;
+    filename?: string | undefined;
+    description?: string | null | undefined;
 }>]>;
 export type Asset = z.infer<typeof Asset>;
 export declare const Assets: z.ZodMap<z.ZodString, z.ZodUnion<[z.ZodObject<{
@@ -469,5 +537,38 @@ export declare const Assets: z.ZodMap<z.ZodString, z.ZodUnion<[z.ZodObject<{
     createdAt: string;
     filename?: string | undefined;
     description?: string | null | undefined;
+}>, z.ZodObject<{
+    format: z.ZodString;
+    meta: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    type: z.ZodLiteral<"file">;
+    id: z.ZodString;
+    projectId: z.ZodString;
+    size: z.ZodNumber;
+    name: z.ZodString;
+    filename: z.ZodOptional<z.ZodString>;
+    description: z.ZodUnion<[z.ZodOptional<z.ZodString>, z.ZodNull]>;
+    createdAt: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    type: "file";
+    name: string;
+    format: string;
+    meta: {};
+    id: string;
+    projectId: string;
+    size: number;
+    createdAt: string;
+    filename?: string | undefined;
+    description?: string | null | undefined;
+}, {
+    type: "file";
+    name: string;
+    format: string;
+    meta: {};
+    id: string;
+    projectId: string;
+    size: number;
+    createdAt: string;
+    filename?: string | undefined;
+    description?: string | null | undefined;
 }>]>>;
 export type Assets = z.infer<typeof Assets>;

package/lib/types/schema/breakpoints.d.ts

@@ -1,56 +1,90 @@
 import { z } from "zod";
-export declare const Breakpoint: z.ZodEffects<z.ZodObject<{
+export declare const Breakpoint: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     id: z.ZodString;
     label: z.ZodString;
     minWidth: z.ZodOptional<z.ZodNumber>;
     maxWidth: z.ZodOptional<z.ZodNumber>;
+    condition: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
 }, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
 }>, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
 }, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
+}>, {
+    id: string;
+    label: string;
+    maxWidth?: number | undefined;
+    minWidth?: number | undefined;
+    condition?: string | undefined;
+}, {
+    id: string;
+    label: string;
+    maxWidth?: number | undefined;
+    minWidth?: number | undefined;
+    condition?: string | undefined;
 }>;
 export type Breakpoint = z.infer<typeof Breakpoint>;
-export declare const Breakpoints: z.ZodMap<z.ZodString, z.ZodEffects<z.ZodObject<{
+export declare const Breakpoints: z.ZodMap<z.ZodString, z.ZodEffects<z.ZodEffects<z.ZodObject<{
     id: z.ZodString;
     label: z.ZodString;
     minWidth: z.ZodOptional<z.ZodNumber>;
     maxWidth: z.ZodOptional<z.ZodNumber>;
+    condition: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
+}, {
+    id: string;
+    label: string;
+    maxWidth?: number | undefined;
+    minWidth?: number | undefined;
+    condition?: string | undefined;
+}>, {
+    id: string;
+    label: string;
+    maxWidth?: number | undefined;
+    minWidth?: number | undefined;
+    condition?: string | undefined;
 }, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
 }>, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
 }, {
     id: string;
     label: string;
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
+    condition?: string | undefined;
 }>>;
 export type Breakpoints = z.infer<typeof Breakpoints>;
 export declare const initialBreakpoints: Array<Breakpoint>;

package/lib/types/schema/webstudio.d.ts

@@ -268,6 +268,39 @@ export declare const WebstudioFragment: z.ZodObject<{
         createdAt: string;
         filename?: string | undefined;
         description?: string | null | undefined;
+    }>, z.ZodObject<{
+        format: z.ZodString;
+        meta: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+        type: z.ZodLiteral<"file">;
+        id: z.ZodString;
+        projectId: z.ZodString;
+        size: z.ZodNumber;
+        name: z.ZodString;
+        filename: z.ZodOptional<z.ZodString>;
+        description: z.ZodUnion<[z.ZodOptional<z.ZodString>, z.ZodNull]>;
+        createdAt: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        type: "file";
+        name: string;
+        format: string;
+        meta: {};
+        id: string;
+        projectId: string;
+        size: number;
+        createdAt: string;
+        filename?: string | undefined;
+        description?: string | null | undefined;
+    }, {
+        type: "file";
+        name: string;
+        format: string;
+        meta: {};
+        id: string;
+        projectId: string;
+        size: number;
+        createdAt: string;
+        filename?: string | undefined;
+        description?: string | null | undefined;
     }>]>, "many">;
     dataSources: z.ZodArray<z.ZodUnion<[z.ZodObject<{
         type: z.ZodLiteral<"variable">;
@@ -22936,31 +22969,48 @@ export declare const WebstudioFragment: z.ZodObject<{
         instanceId: string;
         required?: boolean | undefined;
     }>]>, "many">;
-    breakpoints: z.ZodArray<z.ZodEffects<z.ZodObject<{
+    breakpoints: z.ZodArray<z.ZodEffects<z.ZodEffects<z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         minWidth: z.ZodOptional<z.ZodNumber>;
         maxWidth: z.ZodOptional<z.ZodNumber>;
+        condition: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         id: string;
         label: string;
         maxWidth?: number | undefined;
         minWidth?: number | undefined;
+        condition?: string | undefined;
     }, {
         id: string;
         label: string;
         maxWidth?: number | undefined;
         minWidth?: number | undefined;
+        condition?: string | undefined;
     }>, {
         id: string;
         label: string;
         maxWidth?: number | undefined;
         minWidth?: number | undefined;
+        condition?: string | undefined;
     }, {
         id: string;
         label: string;
         maxWidth?: number | undefined;
         minWidth?: number | undefined;
+        condition?: string | undefined;
+    }>, {
+        id: string;
+        label: string;
+        maxWidth?: number | undefined;
+        minWidth?: number | undefined;
+        condition?: string | undefined;
+    }, {
+        id: string;
+        label: string;
+        maxWidth?: number | undefined;
+        minWidth?: number | undefined;
+        condition?: string | undefined;
     }>, "many">;
     styleSourceSelections: z.ZodArray<z.ZodObject<{
         instanceId: z.ZodString;
@@ -25247,6 +25297,17 @@ export declare const WebstudioFragment: z.ZodObject<{
         createdAt: string;
         filename?: string | undefined;
         description?: string | null | undefined;
+    } | {
+        type: "file";
+        name: string;
+        format: string;
+        meta: {};
+        id: string;
+        projectId: string;
+        size: number;
+        createdAt: string;
+        filename?: string | undefined;
+        description?: string | null | undefined;
     })[];
     dataSources: ({
         value: {
@@ -26980,6 +27041,7 @@ export declare const WebstudioFragment: z.ZodObject<{
         label: string;
         maxWidth?: number | undefined;
         minWidth?: number | undefined;
+        condition?: string | undefined;
     }[];
     styleSourceSelections: {
         values: string[];
@@ -27789,6 +27851,17 @@ export declare const WebstudioFragment: z.ZodObject<{
         createdAt: string;
         filename?: string | undefined;
         description?: string | null | undefined;
+    } | {
+        type: "file";
+        name: string;
+        format: string;
+        meta: {};
+        id: string;
+        projectId: string;
+        size: number;
+        createdAt: string;
+        filename?: string | undefined;
+        description?: string | null | undefined;
     })[];
     dataSources: ({
         value: {
@@ -29522,6 +29595,7 @@ export declare const WebstudioFragment: z.ZodObject<{
         label: string;
         maxWidth?: number | undefined;
         minWidth?: number | undefined;
+        condition?: string | undefined;
     }[];
     styleSourceSelections: {
         values: string[];

package/lib/types/url-pattern.d.ts

@@ -1,2 +1,6 @@
 export declare const isPathnamePattern: (pathname: string) => boolean;
 export declare const matchPathnameParams: (pathname: string) => RegExpStringIterator<RegExpExecArray>;
+/**
+ * Check if a string is an absolute URL (has a valid protocol)
+ */
+export declare const isAbsoluteUrl: (href: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk",
-  "version": "0.237.0",
+  "version": "0.252.1",
   "description": "Webstudio project data schema",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,20 +40,21 @@
     "change-case": "^5.4.4",
     "reserved-identifiers": "^1.0.0",
     "type-fest": "^4.37.0",
+    "warn-once": "^0.1.1",
     "zod": "^3.24.2",
-    "@webstudio-is/icons": "0.237.0",
-    "@webstudio-is/fonts": "0.237.0",
-    "@webstudio-is/css-engine": "0.237.0"
+    "@webstudio-is/css-engine": "0.252.1",
+    "@webstudio-is/fonts": "0.252.1",
+    "@webstudio-is/icons": "0.252.1"
   },
   "devDependencies": {
     "html-tags": "^4.0.0",
     "vitest": "^3.1.2",
     "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.237.0"
+    "@webstudio-is/template": "0.252.1",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsgo --noEmit -p tsconfig.typecheck.json",
     "test": "vitest run",
     "build:normalize.css": "tsx --conditions=webstudio ./scripts/normalize.css.ts && prettier --write src/__generated__/normalize.css.ts",
     "build": "rm -rf lib && esbuild src/index.ts src/runtime.ts src/__generated__/normalize.css.ts src/core-templates.tsx --outdir=lib --bundle --format=esm --packages=external",