@webstudio-is/react-sdk 0.209.0 → 0.212.0

package/lib/index.js

@@ -153,7 +153,6 @@ var idAttribute = "data-ws-id";
 var selectorIdAttribute = "data-ws-selector";
 var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
-var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
 var animationCanPlayOnCanvasAttribute = "data-ws-animation-can-play-on-canvas";
@@ -400,42 +399,6 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, generateId = nanoid) =
     resources: []
   };
 };
-var namespaceMatcher = (namespace, matcher) => {
-  const newMatcher = structuredClone(matcher);
-  if (newMatcher.component?.$eq) {
-    newMatcher.component.$eq = `${namespace}:${newMatcher.component.$eq}`;
-  }
-  if (newMatcher.component?.$neq) {
-    newMatcher.component.$neq = `${namespace}:${newMatcher.component.$neq}`;
-  }
-  if (newMatcher.component?.$in) {
-    newMatcher.component.$in = newMatcher.component.$in.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  if (newMatcher.component?.$nin) {
-    newMatcher.component.$nin = newMatcher.component.$nin.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  return newMatcher;
-};
-var namespaceMeta = (meta, namespace, components) => {
-  const newMeta = { ...meta };
-  if (newMeta.constraints) {
-    if (Array.isArray(newMeta.constraints)) {
-      newMeta.constraints = newMeta.constraints.map(
-        (matcher) => namespaceMatcher(namespace, matcher)
-      );
-    } else {
-      newMeta.constraints = namespaceMatcher(namespace, newMeta.constraints);
-    }
-  }
-  if (newMeta.indexWithinAncestor) {
-    newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
-  }
-  return newMeta;
-};
 
 // src/component-generator.ts
 import {
@@ -447,8 +410,510 @@ import {
   blockTemplateComponent,
   collectionComponent,
   descendantComponent,
-  getIndexesWithinAncestors
+  getIndexesWithinAncestors,
+  elementComponent
 } from "@webstudio-is/sdk";
+import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
+
+// src/standard-attributes.ts
+var standardAttributesToReactProps = {
+  // HTML
+  accept: "accept",
+  acceptcharset: "acceptCharset",
+  "accept-charset": "acceptCharset",
+  accesskey: "accessKey",
+  action: "action",
+  allowfullscreen: "allowFullScreen",
+  alt: "alt",
+  as: "as",
+  async: "async",
+  autocapitalize: "autoCapitalize",
+  autocomplete: "autoComplete",
+  autocorrect: "autoCorrect",
+  autofocus: "autoFocus",
+  autoplay: "autoPlay",
+  autosave: "autoSave",
+  capture: "capture",
+  cellpadding: "cellPadding",
+  cellspacing: "cellSpacing",
+  challenge: "challenge",
+  charset: "charSet",
+  checked: "checked",
+  children: "children",
+  cite: "cite",
+  class: "className",
+  classid: "classID",
+  classname: "className",
+  cols: "cols",
+  colspan: "colSpan",
+  content: "content",
+  contenteditable: "contentEditable",
+  contextmenu: "contextMenu",
+  controls: "controls",
+  controlslist: "controlsList",
+  coords: "coords",
+  crossorigin: "crossOrigin",
+  dangerouslysetinnerhtml: "dangerouslySetInnerHTML",
+  data: "data",
+  datetime: "dateTime",
+  default: "default",
+  defaultchecked: "defaultChecked",
+  defaultvalue: "defaultValue",
+  defer: "defer",
+  dir: "dir",
+  disabled: "disabled",
+  disablepictureinpicture: "disablePictureInPicture",
+  disableremoteplayback: "disableRemotePlayback",
+  download: "download",
+  draggable: "draggable",
+  enctype: "encType",
+  enterkeyhint: "enterKeyHint",
+  fetchpriority: "fetchPriority",
+  for: "htmlFor",
+  form: "form",
+  formmethod: "formMethod",
+  formaction: "formAction",
+  formenctype: "formEncType",
+  formnovalidate: "formNoValidate",
+  formtarget: "formTarget",
+  frameborder: "frameBorder",
+  headers: "headers",
+  height: "height",
+  hidden: "hidden",
+  high: "high",
+  href: "href",
+  hreflang: "hrefLang",
+  htmlfor: "htmlFor",
+  httpequiv: "httpEquiv",
+  "http-equiv": "httpEquiv",
+  icon: "icon",
+  id: "id",
+  imagesizes: "imageSizes",
+  imagesrcset: "imageSrcSet",
+  inert: "inert",
+  innerhtml: "innerHTML",
+  inputmode: "inputMode",
+  integrity: "integrity",
+  is: "is",
+  itemid: "itemID",
+  itemprop: "itemProp",
+  itemref: "itemRef",
+  itemscope: "itemScope",
+  itemtype: "itemType",
+  keyparams: "keyParams",
+  keytype: "keyType",
+  kind: "kind",
+  label: "label",
+  lang: "lang",
+  list: "list",
+  loop: "loop",
+  low: "low",
+  manifest: "manifest",
+  marginwidth: "marginWidth",
+  marginheight: "marginHeight",
+  max: "max",
+  maxlength: "maxLength",
+  media: "media",
+  mediagroup: "mediaGroup",
+  method: "method",
+  min: "min",
+  minlength: "minLength",
+  multiple: "multiple",
+  muted: "muted",
+  name: "name",
+  nomodule: "noModule",
+  nonce: "nonce",
+  novalidate: "noValidate",
+  open: "open",
+  optimum: "optimum",
+  pattern: "pattern",
+  placeholder: "placeholder",
+  playsinline: "playsInline",
+  poster: "poster",
+  preload: "preload",
+  profile: "profile",
+  radiogroup: "radioGroup",
+  readonly: "readOnly",
+  referrerpolicy: "referrerPolicy",
+  rel: "rel",
+  required: "required",
+  reversed: "reversed",
+  role: "role",
+  rows: "rows",
+  rowspan: "rowSpan",
+  sandbox: "sandbox",
+  scope: "scope",
+  scoped: "scoped",
+  scrolling: "scrolling",
+  seamless: "seamless",
+  selected: "selected",
+  shape: "shape",
+  size: "size",
+  sizes: "sizes",
+  span: "span",
+  spellcheck: "spellCheck",
+  src: "src",
+  srcdoc: "srcDoc",
+  srclang: "srcLang",
+  srcset: "srcSet",
+  start: "start",
+  step: "step",
+  style: "style",
+  summary: "summary",
+  tabindex: "tabIndex",
+  target: "target",
+  title: "title",
+  type: "type",
+  usemap: "useMap",
+  value: "value",
+  width: "width",
+  wmode: "wmode",
+  wrap: "wrap",
+  // SVG
+  about: "about",
+  accentheight: "accentHeight",
+  "accent-height": "accentHeight",
+  accumulate: "accumulate",
+  additive: "additive",
+  alignmentbaseline: "alignmentBaseline",
+  "alignment-baseline": "alignmentBaseline",
+  allowreorder: "allowReorder",
+  alphabetic: "alphabetic",
+  amplitude: "amplitude",
+  arabicform: "arabicForm",
+  "arabic-form": "arabicForm",
+  ascent: "ascent",
+  attributename: "attributeName",
+  attributetype: "attributeType",
+  autoreverse: "autoReverse",
+  azimuth: "azimuth",
+  basefrequency: "baseFrequency",
+  baselineshift: "baselineShift",
+  "baseline-shift": "baselineShift",
+  baseprofile: "baseProfile",
+  bbox: "bbox",
+  begin: "begin",
+  bias: "bias",
+  by: "by",
+  calcmode: "calcMode",
+  capheight: "capHeight",
+  "cap-height": "capHeight",
+  clip: "clip",
+  clippath: "clipPath",
+  "clip-path": "clipPath",
+  clippathunits: "clipPathUnits",
+  cliprule: "clipRule",
+  "clip-rule": "clipRule",
+  color: "color",
+  colorinterpolation: "colorInterpolation",
+  "color-interpolation": "colorInterpolation",
+  colorinterpolationfilters: "colorInterpolationFilters",
+  "color-interpolation-filters": "colorInterpolationFilters",
+  colorprofile: "colorProfile",
+  "color-profile": "colorProfile",
+  colorrendering: "colorRendering",
+  "color-rendering": "colorRendering",
+  contentscripttype: "contentScriptType",
+  contentstyletype: "contentStyleType",
+  cursor: "cursor",
+  cx: "cx",
+  cy: "cy",
+  d: "d",
+  datatype: "datatype",
+  decelerate: "decelerate",
+  descent: "descent",
+  diffuseconstant: "diffuseConstant",
+  direction: "direction",
+  display: "display",
+  divisor: "divisor",
+  dominantbaseline: "dominantBaseline",
+  "dominant-baseline": "dominantBaseline",
+  dur: "dur",
+  dx: "dx",
+  dy: "dy",
+  edgemode: "edgeMode",
+  elevation: "elevation",
+  enablebackground: "enableBackground",
+  "enable-background": "enableBackground",
+  end: "end",
+  exponent: "exponent",
+  externalresourcesrequired: "externalResourcesRequired",
+  fill: "fill",
+  fillopacity: "fillOpacity",
+  "fill-opacity": "fillOpacity",
+  fillrule: "fillRule",
+  "fill-rule": "fillRule",
+  filter: "filter",
+  filterres: "filterRes",
+  filterunits: "filterUnits",
+  floodopacity: "floodOpacity",
+  "flood-opacity": "floodOpacity",
+  floodcolor: "floodColor",
+  "flood-color": "floodColor",
+  focusable: "focusable",
+  fontfamily: "fontFamily",
+  "font-family": "fontFamily",
+  fontsize: "fontSize",
+  "font-size": "fontSize",
+  fontsizeadjust: "fontSizeAdjust",
+  "font-size-adjust": "fontSizeAdjust",
+  fontstretch: "fontStretch",
+  "font-stretch": "fontStretch",
+  fontstyle: "fontStyle",
+  "font-style": "fontStyle",
+  fontvariant: "fontVariant",
+  "font-variant": "fontVariant",
+  fontweight: "fontWeight",
+  "font-weight": "fontWeight",
+  format: "format",
+  from: "from",
+  fx: "fx",
+  fy: "fy",
+  g1: "g1",
+  g2: "g2",
+  glyphname: "glyphName",
+  "glyph-name": "glyphName",
+  glyphorientationhorizontal: "glyphOrientationHorizontal",
+  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
+  glyphorientationvertical: "glyphOrientationVertical",
+  "glyph-orientation-vertical": "glyphOrientationVertical",
+  glyphref: "glyphRef",
+  gradienttransform: "gradientTransform",
+  gradientunits: "gradientUnits",
+  hanging: "hanging",
+  horizadvx: "horizAdvX",
+  "horiz-adv-x": "horizAdvX",
+  horizoriginx: "horizOriginX",
+  "horiz-origin-x": "horizOriginX",
+  ideographic: "ideographic",
+  imagerendering: "imageRendering",
+  "image-rendering": "imageRendering",
+  in2: "in2",
+  in: "in",
+  inlist: "inlist",
+  intercept: "intercept",
+  k1: "k1",
+  k2: "k2",
+  k3: "k3",
+  k4: "k4",
+  k: "k",
+  kernelmatrix: "kernelMatrix",
+  kernelunitlength: "kernelUnitLength",
+  kerning: "kerning",
+  keypoints: "keyPoints",
+  keysplines: "keySplines",
+  keytimes: "keyTimes",
+  lengthadjust: "lengthAdjust",
+  letterspacing: "letterSpacing",
+  "letter-spacing": "letterSpacing",
+  lightingcolor: "lightingColor",
+  "lighting-color": "lightingColor",
+  limitingconeangle: "limitingConeAngle",
+  local: "local",
+  markerend: "markerEnd",
+  "marker-end": "markerEnd",
+  markerheight: "markerHeight",
+  markermid: "markerMid",
+  "marker-mid": "markerMid",
+  markerstart: "markerStart",
+  "marker-start": "markerStart",
+  markerunits: "markerUnits",
+  markerwidth: "markerWidth",
+  mask: "mask",
+  maskcontentunits: "maskContentUnits",
+  maskunits: "maskUnits",
+  mathematical: "mathematical",
+  mode: "mode",
+  numoctaves: "numOctaves",
+  offset: "offset",
+  opacity: "opacity",
+  operator: "operator",
+  order: "order",
+  orient: "orient",
+  orientation: "orientation",
+  origin: "origin",
+  overflow: "overflow",
+  overlineposition: "overlinePosition",
+  "overline-position": "overlinePosition",
+  overlinethickness: "overlineThickness",
+  "overline-thickness": "overlineThickness",
+  paintorder: "paintOrder",
+  "paint-order": "paintOrder",
+  panose1: "panose1",
+  "panose-1": "panose1",
+  pathlength: "pathLength",
+  patterncontentunits: "patternContentUnits",
+  patterntransform: "patternTransform",
+  patternunits: "patternUnits",
+  pointerevents: "pointerEvents",
+  "pointer-events": "pointerEvents",
+  points: "points",
+  pointsatx: "pointsAtX",
+  pointsaty: "pointsAtY",
+  pointsatz: "pointsAtZ",
+  popover: "popover",
+  popovertarget: "popoverTarget",
+  popovertargetaction: "popoverTargetAction",
+  prefix: "prefix",
+  preservealpha: "preserveAlpha",
+  preserveaspectratio: "preserveAspectRatio",
+  primitiveunits: "primitiveUnits",
+  property: "property",
+  r: "r",
+  radius: "radius",
+  refx: "refX",
+  refy: "refY",
+  renderingintent: "renderingIntent",
+  "rendering-intent": "renderingIntent",
+  repeatcount: "repeatCount",
+  repeatdur: "repeatDur",
+  requiredextensions: "requiredExtensions",
+  requiredfeatures: "requiredFeatures",
+  resource: "resource",
+  restart: "restart",
+  result: "result",
+  results: "results",
+  rotate: "rotate",
+  rx: "rx",
+  ry: "ry",
+  scale: "scale",
+  security: "security",
+  seed: "seed",
+  shaperendering: "shapeRendering",
+  "shape-rendering": "shapeRendering",
+  slope: "slope",
+  spacing: "spacing",
+  specularconstant: "specularConstant",
+  specularexponent: "specularExponent",
+  speed: "speed",
+  spreadmethod: "spreadMethod",
+  startoffset: "startOffset",
+  stddeviation: "stdDeviation",
+  stemh: "stemh",
+  stemv: "stemv",
+  stitchtiles: "stitchTiles",
+  stopcolor: "stopColor",
+  "stop-color": "stopColor",
+  stopopacity: "stopOpacity",
+  "stop-opacity": "stopOpacity",
+  strikethroughposition: "strikethroughPosition",
+  "strikethrough-position": "strikethroughPosition",
+  strikethroughthickness: "strikethroughThickness",
+  "strikethrough-thickness": "strikethroughThickness",
+  string: "string",
+  stroke: "stroke",
+  strokedasharray: "strokeDasharray",
+  "stroke-dasharray": "strokeDasharray",
+  strokedashoffset: "strokeDashoffset",
+  "stroke-dashoffset": "strokeDashoffset",
+  strokelinecap: "strokeLinecap",
+  "stroke-linecap": "strokeLinecap",
+  strokelinejoin: "strokeLinejoin",
+  "stroke-linejoin": "strokeLinejoin",
+  strokemiterlimit: "strokeMiterlimit",
+  "stroke-miterlimit": "strokeMiterlimit",
+  strokewidth: "strokeWidth",
+  "stroke-width": "strokeWidth",
+  strokeopacity: "strokeOpacity",
+  "stroke-opacity": "strokeOpacity",
+  suppresscontenteditablewarning: "suppressContentEditableWarning",
+  suppresshydrationwarning: "suppressHydrationWarning",
+  surfacescale: "surfaceScale",
+  systemlanguage: "systemLanguage",
+  tablevalues: "tableValues",
+  targetx: "targetX",
+  targety: "targetY",
+  textanchor: "textAnchor",
+  "text-anchor": "textAnchor",
+  textdecoration: "textDecoration",
+  "text-decoration": "textDecoration",
+  textlength: "textLength",
+  textrendering: "textRendering",
+  "text-rendering": "textRendering",
+  to: "to",
+  transform: "transform",
+  transformorigin: "transformOrigin",
+  "transform-origin": "transformOrigin",
+  typeof: "typeof",
+  u1: "u1",
+  u2: "u2",
+  underlineposition: "underlinePosition",
+  "underline-position": "underlinePosition",
+  underlinethickness: "underlineThickness",
+  "underline-thickness": "underlineThickness",
+  unicode: "unicode",
+  unicodebidi: "unicodeBidi",
+  "unicode-bidi": "unicodeBidi",
+  unicoderange: "unicodeRange",
+  "unicode-range": "unicodeRange",
+  unitsperem: "unitsPerEm",
+  "units-per-em": "unitsPerEm",
+  unselectable: "unselectable",
+  valphabetic: "vAlphabetic",
+  "v-alphabetic": "vAlphabetic",
+  values: "values",
+  vectoreffect: "vectorEffect",
+  "vector-effect": "vectorEffect",
+  version: "version",
+  vertadvy: "vertAdvY",
+  "vert-adv-y": "vertAdvY",
+  vertoriginx: "vertOriginX",
+  "vert-origin-x": "vertOriginX",
+  vertoriginy: "vertOriginY",
+  "vert-origin-y": "vertOriginY",
+  vhanging: "vHanging",
+  "v-hanging": "vHanging",
+  videographic: "vIdeographic",
+  "v-ideographic": "vIdeographic",
+  viewbox: "viewBox",
+  viewtarget: "viewTarget",
+  visibility: "visibility",
+  vmathematical: "vMathematical",
+  "v-mathematical": "vMathematical",
+  vocab: "vocab",
+  widths: "widths",
+  wordspacing: "wordSpacing",
+  "word-spacing": "wordSpacing",
+  writingmode: "writingMode",
+  "writing-mode": "writingMode",
+  x1: "x1",
+  x2: "x2",
+  x: "x",
+  xchannelselector: "xChannelSelector",
+  xheight: "xHeight",
+  "x-height": "xHeight",
+  xlinkactuate: "xlinkActuate",
+  "xlink:actuate": "xlinkActuate",
+  xlinkarcrole: "xlinkArcrole",
+  "xlink:arcrole": "xlinkArcrole",
+  xlinkhref: "xlinkHref",
+  "xlink:href": "xlinkHref",
+  xlinkrole: "xlinkRole",
+  "xlink:role": "xlinkRole",
+  xlinkshow: "xlinkShow",
+  "xlink:show": "xlinkShow",
+  xlinktitle: "xlinkTitle",
+  "xlink:title": "xlinkTitle",
+  xlinktype: "xlinkType",
+  "xlink:type": "xlinkType",
+  xmlbase: "xmlBase",
+  "xml:base": "xmlBase",
+  xmllang: "xmlLang",
+  "xml:lang": "xmlLang",
+  xmlns: "xmlns",
+  "xml:space": "xmlSpace",
+  xmlnsxlink: "xmlnsXlink",
+  "xmlns:xlink": "xmlnsXlink",
+  xmlspace: "xmlSpace",
+  y1: "y1",
+  y2: "y2",
+  y: "y",
+  ychannelselector: "yChannelSelector",
+  z: "z",
+  zoomandpan: "zoomAndPan"
+};
+
+// src/component-generator.ts
 var generateAction = ({
   scope,
   prop,
@@ -556,7 +1021,11 @@ var generateJsxElement = ({
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
     generatedProps += `
-${indexAttribute}="${index}"`;
+${indexProperty}="${index}"`;
+  }
+  if (instance.tag !== void 0 && instance.component !== elementComponent) {
+    generatedProps += `
+${tagProperty}=${JSON.stringify(instance.tag)}`;
   }
   let conditionValue;
   let collectionDataValue;
@@ -575,6 +1044,10 @@ ${indexAttribute}="${index}"`;
     if (isAttributeNameSafe(prop.name) === false) {
       continue;
     }
+    let name = prop.name;
+    if (instance.component === elementComponent) {
+      name = standardAttributesToReactProps[prop.name] ?? prop.name;
+    }
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -594,13 +1067,13 @@ ${indexAttribute}="${index}"`;
       }
       continue;
     }
-    if (prop.name === "className" && propValue !== void 0) {
+    if (name === "className" && propValue !== void 0) {
       classNameValue = propValue;
       continue;
     }
     if (propValue !== void 0) {
       generatedProps += `
-${prop.name}={${propValue}}`;
+${name}={${propValue}}`;
     }
   }
   const classMapArray = classesMap?.get(instance.id);
@@ -634,6 +1107,18 @@ ${prop.name}={${propValue}}`;
 `;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
+  } else if (instance.component === elementComponent) {
+    const tagName = instance.tag ?? "div";
+    if (instance.children.length === 0) {
+      generatedElement += `<${tagName}${generatedProps} />
+`;
+    } else {
+      generatedElement += `<${tagName}${generatedProps}>
+`;
+      generatedElement += children;
+      generatedElement += `</${tagName}>
+`;
+    }
   } else {
     const [_namespace, shortName] = parseComponentName(instance.component);
     const componentVariable = scope.getName(instance.component, shortName);
@@ -841,9 +1326,7 @@ export {
   generateRemixRoute,
   generateWebstudioComponent,
   idAttribute,
-  indexAttribute,
   isAttributeNameSafe,
-  namespaceMeta,
   normalizeProps,
   selectorIdAttribute,
   showAttribute,

package/lib/runtime.js

@@ -198,16 +198,12 @@ var PageSettingsCanonicalLink = (props) => {
 
 // src/runtime.ts
 var xmlNodeTagSuffix = "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
-var getIndexWithinAncestorFromComponentProps = (props) => {
-  return props["data-ws-index"];
-};
 export {
   PageSettingsCanonicalLink,
   PageSettingsMeta,
   PageSettingsTitle,
   ReactSdkContext,
   getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
   useResource,
   useVariableState,
   xmlNodeTagSuffix

package/lib/types/embed-template.d.ts

@@ -1,49 +1,2 @@
-import type { Instance, WebstudioFragment, WsEmbedTemplate, EmbedTemplateInstance, WsComponentMeta } from "@webstudio-is/sdk";
+import type { Instance, WebstudioFragment, WsEmbedTemplate, WsComponentMeta } from "@webstudio-is/sdk";
 export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTemplate, metas: Map<Instance["component"], WsComponentMeta>, generateId?: () => string) => WebstudioFragment;
-export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
-    type: "control" | "embed" | "container" | "rich-text-child";
-    description?: string | undefined;
-    category?: "xml" | "hidden" | "data" | "media" | "general" | "typography" | "forms" | "localization" | "radix" | "internal" | undefined;
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    order?: number | undefined;
-    states?: {
-        label: string;
-        selector: string;
-        category?: "states" | "component-states" | undefined;
-    }[] | undefined;
-    constraints?: {
-        relation: "ancestor" | "parent" | "self" | "child" | "descendant";
-        text?: false | undefined;
-        component?: {
-            $eq?: string | undefined;
-            $neq?: string | undefined;
-            $in?: string[] | undefined;
-            $nin?: string[] | undefined;
-        } | undefined;
-        tag?: {
-            $eq?: string | undefined;
-            $neq?: string | undefined;
-            $in?: string[] | undefined;
-            $nin?: string[] | undefined;
-        } | undefined;
-    } | {
-        relation: "ancestor" | "parent" | "self" | "child" | "descendant";
-        text?: false | undefined;
-        component?: {
-            $eq?: string | undefined;
-            $neq?: string | undefined;
-            $in?: string[] | undefined;
-            $nin?: string[] | undefined;
-        } | undefined;
-        tag?: {
-            $eq?: string | undefined;
-            $neq?: string | undefined;
-            $in?: string[] | undefined;
-            $nin?: string[] | undefined;
-        } | undefined;
-    }[] | undefined;
-    indexWithinAncestor?: string | undefined;
-    icon: string;
-    presetStyle?: import("@webstudio-is/sdk").PresetStyle;
-};

package/lib/types/props.d.ts

@@ -702,6 +702,14 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
             timing: {
                 fill?: "none" | "forwards" | "backwards" | "both" | undefined;
                 easing?: string | undefined;
+                duration?: {
+                    value: number;
+                    type: "unit";
+                    unit: "s" | "ms";
+                } | {
+                    value: string;
+                    type: "var";
+                } | undefined;
                 rangeStart?: ["start" | "end", {
                     value: number;
                     type: "unit";
@@ -709,6 +717,9 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
                 } | {
                     value: string;
                     type: "unparsed";
+                } | {
+                    value: string;
+                    type: "var";
                 }] | undefined;
                 rangeEnd?: ["start" | "end", {
                     value: number;
@@ -717,6 +728,9 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
                 } | {
                     value: string;
                     type: "unparsed";
+                } | {
+                    value: string;
+                    type: "var";
                 }] | undefined;
             };
             name?: string | undefined;
@@ -1338,6 +1352,14 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
             timing: {
                 fill?: "none" | "forwards" | "backwards" | "both" | undefined;
                 easing?: string | undefined;
+                duration?: {
+                    value: number;
+                    type: "unit";
+                    unit: "s" | "ms";
+                } | {
+                    value: string;
+                    type: "var";
+                } | undefined;
                 rangeStart?: ["contain" | "cover" | "entry" | "exit" | "entry-crossing" | "exit-crossing", {
                     value: number;
                     type: "unit";
@@ -1345,6 +1367,9 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
                 } | {
                     value: string;
                     type: "unparsed";
+                } | {
+                    value: string;
+                    type: "var";
                 }] | undefined;
                 rangeEnd?: ["contain" | "cover" | "entry" | "exit" | "entry-crossing" | "exit-crossing", {
                     value: number;
@@ -1353,6 +1378,9 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
                 } | {
                     value: string;
                     type: "unparsed";
+                } | {
+                    value: string;
+                    type: "var";
                 }] | undefined;
             };
             name?: string | undefined;
@@ -1370,6 +1398,9 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
         } | {
             value: string;
             type: "unparsed";
+        } | {
+            value: string;
+            type: "var";
         } | {
             value: "auto";
             type: "keyword";
@@ -1381,6 +1412,9 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
         } | {
             value: string;
             type: "unparsed";
+        } | {
+            value: string;
+            type: "var";
         } | {
             value: "auto";
             type: "keyword";
@@ -1396,7 +1430,6 @@ export declare const idAttribute: "data-ws-id";
 export declare const selectorIdAttribute: "data-ws-selector";
 export declare const componentAttribute: "data-ws-component";
 export declare const showAttribute: "data-ws-show";
-export declare const indexAttribute: "data-ws-index";
 export declare const collapsedAttribute: "data-ws-collapsed";
 export declare const textContentAttribute: "data-ws-text-content";
 export declare const animationCanPlayOnCanvasAttribute = "data-ws-animation-can-play-on-canvas";

package/lib/types/runtime.d.ts

@@ -9,4 +9,3 @@ export { PageSettingsCanonicalLink } from "./page-settings-canonical-link";
  * To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
  */
 export declare const xmlNodeTagSuffix = "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
-export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

package/lib/types/standard-attributes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const standardAttributesToReactProps: Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.209.0",
+  "version": "0.212.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,7 +14,7 @@
     "type-fest": "^4.37.0",
     "vitest": "^3.0.8",
     "zod": "^3.24.2",
-    "@webstudio-is/template": "0.209.0",
+    "@webstudio-is/template": "0.212.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -26,11 +26,11 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.9",
-    "@webstudio-is/css-engine": "0.209.0",
-    "@webstudio-is/fonts": "0.209.0",
-    "@webstudio-is/icons": "^0.209.0",
-    "@webstudio-is/image": "0.209.0",
-    "@webstudio-is/sdk": "0.209.0"
+    "@webstudio-is/fonts": "0.212.0",
+    "@webstudio-is/css-engine": "0.212.0",
+    "@webstudio-is/icons": "^0.212.0",
+    "@webstudio-is/image": "0.212.0",
+    "@webstudio-is/sdk": "0.212.0"
   },
   "exports": {
     ".": {