@webstudio-is/react-sdk 0.204.0 → 0.206.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/index.js +22 -237
  2. package/lib/types/component-generator.d.ts +3 -4
  3. package/lib/types/embed-template.d.ts +1 -0
  4. package/lib/types/hook.d.ts +1 -2
  5. package/lib/types/index.d.ts +0 -2
  6. package/lib/types/props.d.ts +639 -2
  7. package/package.json +7 -7
  8. package/placeholder.d.ts +4 -9
  9. package/lib/types/css/css.d.ts +0 -20
  10. package/lib/types/css/css.test.d.ts +0 -1
  11. package/lib/types/css/global-rules.d.ts +0 -6
  12. package/lib/types/css/index.d.ts +0 -2
  13. package/lib/types/instance-utils.d.ts +0 -3
  14. package/lib/types/instance-utils.test.d.ts +0 -1
package/lib/index.js CHANGED
@@ -54,178 +54,6 @@ var generateRemixParams = (pathname) => {
54
54
  return generated;
55
55
  };
56
56
 
57
- // src/css/global-rules.ts
58
- import { getFontFaces } from "@webstudio-is/fonts";
59
- var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
60
- const fontAssets = [];
61
- for (const asset of assets.values()) {
62
- if (asset.type === "font") {
63
- fontAssets.push(asset);
64
- }
65
- }
66
- const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
67
- for (const fontFace of fontFaces) {
68
- sheet.addFontFaceRule(fontFace);
69
- }
70
- };
71
-
72
- // src/css/css.ts
73
- import {
74
- createRegularStyleSheet,
75
- generateAtomic
76
- } from "@webstudio-is/css-engine";
77
- import {
78
- ROOT_INSTANCE_ID,
79
- createScope,
80
- parseComponentName,
81
- descendantComponent,
82
- rootComponent
83
- } from "@webstudio-is/sdk";
84
- import { kebabCase } from "change-case";
85
- var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
86
- if (styleValue.type === "image" && styleValue.value.type === "asset") {
87
- const asset = assets.get(styleValue.value.value);
88
- if (asset === void 0) {
89
- return { type: "keyword", value: "none" };
90
- }
91
- const url = `${assetBaseUrl}${asset.name}`;
92
- return {
93
- type: "image",
94
- value: {
95
- type: "url",
96
- url
97
- },
98
- hidden: styleValue.hidden
99
- };
100
- }
101
- };
102
- var normalizeClassName = (name) => kebabCase(name);
103
- var generateCss = ({
104
- assets,
105
- instances,
106
- props,
107
- breakpoints,
108
- styles,
109
- styleSourceSelections,
110
- componentMetas,
111
- assetBaseUrl,
112
- atomic
113
- }) => {
114
- const globalSheet = createRegularStyleSheet({ name: "ssr" });
115
- const sheet = createRegularStyleSheet({ name: "ssr" });
116
- addGlobalRules(globalSheet, { assets, assetBaseUrl });
117
- globalSheet.addMediaRule("presets");
118
- const presetClasses = /* @__PURE__ */ new Map();
119
- const scope = createScope([], normalizeClassName, "-");
120
- for (const [component, meta] of componentMetas) {
121
- const [_namespace, componentName] = parseComponentName(component);
122
- const className = `w-${scope.getName(component, meta.label ?? componentName)}`;
123
- const presetStyle = Object.entries(meta.presetStyle ?? {});
124
- if (presetStyle.length > 0) {
125
- presetClasses.set(component, className);
126
- }
127
- for (const [tag, styles2] of presetStyle) {
128
- const selector = component === rootComponent ? ":root" : `:where(${tag}.${className})`;
129
- const rule = globalSheet.addNestingRule(selector);
130
- for (const declaration of styles2) {
131
- rule.setDeclaration({
132
- breakpoint: "presets",
133
- selector: declaration.state ?? "",
134
- property: declaration.property,
135
- value: declaration.value
136
- });
137
- }
138
- }
139
- }
140
- for (const breakpoint of breakpoints.values()) {
141
- sheet.addMediaRule(breakpoint.id, breakpoint);
142
- }
143
- const imageValueTransformer = createImageValueTransformer(assets, {
144
- assetBaseUrl
145
- });
146
- sheet.setTransformer(imageValueTransformer);
147
- for (const styleDecl of styles.values()) {
148
- const rule = sheet.addMixinRule(styleDecl.styleSourceId);
149
- rule.setDeclaration({
150
- breakpoint: styleDecl.breakpointId,
151
- selector: styleDecl.state ?? "",
152
- property: styleDecl.property,
153
- value: styleDecl.value
154
- });
155
- }
156
- const classes = /* @__PURE__ */ new Map();
157
- const parentIdByInstanceId = /* @__PURE__ */ new Map();
158
- for (const instance of instances.values()) {
159
- const presetClass = presetClasses.get(instance.component);
160
- if (presetClass) {
161
- classes.set(instance.id, [presetClass]);
162
- }
163
- for (const child of instance.children) {
164
- if (child.type === "id") {
165
- parentIdByInstanceId.set(child.value, instance.id);
166
- }
167
- }
168
- }
169
- const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
170
- for (const prop of props.values()) {
171
- if (prop.name === "selector" && prop.type === "string") {
172
- descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
173
- }
174
- }
175
- const instanceByRule = /* @__PURE__ */ new Map();
176
- for (const selection of styleSourceSelections.values()) {
177
- let { instanceId } = selection;
178
- const { values } = selection;
179
- if (instanceId === ROOT_INSTANCE_ID) {
180
- const rule2 = sheet.addNestingRule(`:root`);
181
- rule2.applyMixins(values);
182
- continue;
183
- }
184
- let descendantSuffix = "";
185
- const instance = instances.get(instanceId);
186
- if (instance === void 0) {
187
- continue;
188
- }
189
- if (instance.component === descendantComponent) {
190
- const parentId = parentIdByInstanceId.get(instanceId);
191
- const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
192
- if (parentId && descendantSelector) {
193
- descendantSuffix = descendantSelector;
194
- instanceId = parentId;
195
- }
196
- }
197
- const meta = componentMetas.get(instance.component);
198
- const [_namespace, shortName] = parseComponentName(instance.component);
199
- const baseName = instance.label ?? meta?.label ?? shortName;
200
- const className = `w-${scope.getName(instanceId, baseName)}`;
201
- if (atomic === false) {
202
- let classList = classes.get(instanceId);
203
- if (classList === void 0) {
204
- classList = [];
205
- classes.set(instanceId, classList);
206
- }
207
- classList.push(className);
208
- }
209
- const rule = sheet.addNestingRule(`.${className}`, descendantSuffix);
210
- rule.applyMixins(values);
211
- instanceByRule.set(rule, instanceId);
212
- }
213
- if (atomic) {
214
- const { cssText } = generateAtomic(sheet, {
215
- getKey: (rule) => instanceByRule.get(rule),
216
- transformValue: imageValueTransformer,
217
- classes
218
- });
219
- return { cssText: `${globalSheet.cssText}
220
- ${cssText}`, classes };
221
- }
222
- return {
223
- cssText: `${globalSheet.cssText}
224
- ${sheet.cssText}`,
225
- classes
226
- };
227
- };
228
-
229
57
  // src/props.ts
230
58
  import {
231
59
  getPagePath,
@@ -328,8 +156,6 @@ var showAttribute = "data-ws-show";
328
156
  var indexAttribute = "data-ws-index";
329
157
  var collapsedAttribute = "data-ws-collapsed";
330
158
  var textContentAttribute = "data-ws-text-content";
331
- var editablePlaceholderVariable = "--data-ws-editable-placeholder";
332
- var editingPlaceholderVariable = "--data-ws-editing-placeholder";
333
159
  var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
334
160
  var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
335
161
  var validAttributeNameRegex = new RegExp(
@@ -641,60 +467,17 @@ var namespaceMeta = (meta, namespace, components) => {
641
467
  return newMeta;
642
468
  };
643
469
 
644
- // src/instance-utils.ts
645
- var getIndexesWithinAncestors = (metas, instances, rootIds) => {
646
- const ancestors = /* @__PURE__ */ new Set();
647
- for (const meta of metas.values()) {
648
- if (meta.indexWithinAncestor !== void 0) {
649
- ancestors.add(meta.indexWithinAncestor);
650
- }
651
- }
652
- const indexes = /* @__PURE__ */ new Map();
653
- const traverseInstances = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
654
- const instance = instances2.get(instanceId);
655
- if (instance === void 0) {
656
- return;
657
- }
658
- const meta = metas.get(instance.component);
659
- if (meta === void 0) {
660
- return;
661
- }
662
- if (ancestors.has(instance.component)) {
663
- latestIndexes2 = new Map(latestIndexes2);
664
- latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
665
- }
666
- if (meta.indexWithinAncestor !== void 0) {
667
- const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
668
- if (ancestorIndexes !== void 0) {
669
- let index = ancestorIndexes.get(instance.component) ?? -1;
670
- index += 1;
671
- ancestorIndexes.set(instance.component, index);
672
- indexes.set(instance.id, index);
673
- }
674
- }
675
- for (const child of instance.children) {
676
- if (child.type === "id") {
677
- traverseInstances(instances2, child.value, latestIndexes2);
678
- }
679
- }
680
- };
681
- const latestIndexes = /* @__PURE__ */ new Map();
682
- for (const instanceId of rootIds) {
683
- traverseInstances(instances, instanceId, latestIndexes);
684
- }
685
- return indexes;
686
- };
687
-
688
470
  // src/component-generator.ts
689
471
  import {
690
- parseComponentName as parseComponentName2,
472
+ parseComponentName,
691
473
  generateExpression,
692
474
  decodeDataSourceVariable,
693
475
  transpileExpression as transpileExpression2,
694
476
  blockComponent,
695
477
  blockTemplateComponent,
696
478
  collectionComponent,
697
- descendantComponent as descendantComponent2
479
+ descendantComponent,
480
+ getIndexesWithinAncestors
698
481
  } from "@webstudio-is/sdk";
699
482
  var generateAction = ({
700
483
  scope,
@@ -758,7 +541,7 @@ var generatePropValue = ({
758
541
  if (prop.type === "asset" || prop.type === "page") {
759
542
  return;
760
543
  }
761
- if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
544
+ if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json" || prop.type === "animationAction") {
762
545
  return JSON.stringify(prop.value);
763
546
  }
764
547
  if (prop.type === "parameter") {
@@ -796,7 +579,7 @@ var generateJsxElement = ({
796
579
  children,
797
580
  classesMap
798
581
  }) => {
799
- if (instance.component === descendantComponent2) {
582
+ if (instance.component === descendantComponent) {
800
583
  return "";
801
584
  }
802
585
  let generatedProps = "";
@@ -882,7 +665,7 @@ ${prop.name}={${propValue}}`;
882
665
  } else if (instance.component === blockComponent) {
883
666
  generatedElement += children;
884
667
  } else {
885
- const [_namespace, shortName] = parseComponentName2(instance.component);
668
+ const [_namespace, shortName] = parseComponentName(instance.component);
886
669
  const componentVariable = scope.getName(instance.component, shortName);
887
670
  if (instance.children.length === 0) {
888
671
  generatedElement += `<${componentVariable}${generatedProps} />
@@ -992,13 +775,16 @@ var generateWebstudioComponent = ({
992
775
  instances,
993
776
  props,
994
777
  dataSources,
995
- indexesWithinAncestors,
778
+ metas,
996
779
  classesMap
997
780
  }) => {
998
781
  const instance = instances.get(rootInstanceId);
999
782
  if (instance === void 0) {
1000
783
  return "";
1001
784
  }
785
+ const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
786
+ rootInstanceId
787
+ ]);
1002
788
  const usedDataSources = /* @__PURE__ */ new Map();
1003
789
  const generatedJsx = generateJsxElement({
1004
790
  context: "expression",
@@ -1021,20 +807,24 @@ var generateWebstudioComponent = ({
1021
807
  })
1022
808
  });
1023
809
  let generatedProps = "";
810
+ let generatedParameters = "";
811
+ const uniqueParameters = new Set(
812
+ parameters.map((parameter) => parameter.name)
813
+ );
1024
814
  if (parameters.length > 0) {
1025
- let generatedPropsValue = "{ ";
1026
- let generatedPropsType = "{ ";
815
+ let generatedPropsType = "";
816
+ for (const parameterName of uniqueParameters) {
817
+ generatedPropsType += `${parameterName}: any; `;
818
+ }
819
+ generatedProps = `_props: { ${generatedPropsType}}`;
1027
820
  for (const parameter of parameters) {
1028
821
  const dataSource = usedDataSources.get(parameter.value);
1029
822
  if (dataSource) {
1030
823
  const valueName = scope.getName(dataSource.id, dataSource.name);
1031
- generatedPropsValue += `${parameter.name}: ${valueName}, `;
824
+ generatedParameters += `const ${valueName} = _props.${parameter.name};
825
+ `;
1032
826
  }
1033
- generatedPropsType += `${parameter.name}: any; `;
1034
827
  }
1035
- generatedPropsValue += `}`;
1036
- generatedPropsType += `}`;
1037
- generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
1038
828
  }
1039
829
  let generatedDataSources = "";
1040
830
  for (const dataSource of usedDataSources.values()) {
@@ -1063,6 +853,7 @@ var generateWebstudioComponent = ({
1063
853
  let generatedComponent = "";
1064
854
  generatedComponent += `const ${name} = (${generatedProps}) => {
1065
855
  `;
856
+ generatedComponent += `${generatedParameters}`;
1066
857
  generatedComponent += `${generatedDataSources}`;
1067
858
  generatedComponent += `return ${generatedJsx}`;
1068
859
  generatedComponent += `}
@@ -1070,20 +861,14 @@ var generateWebstudioComponent = ({
1070
861
  return generatedComponent;
1071
862
  };
1072
863
  export {
1073
- addGlobalRules,
1074
864
  collapsedAttribute,
1075
865
  componentAttribute,
1076
- createImageValueTransformer,
1077
- editablePlaceholderVariable,
1078
- editingPlaceholderVariable,
1079
- generateCss,
1080
866
  generateDataFromEmbedTemplate,
1081
867
  generateJsxChildren,
1082
868
  generateJsxElement,
1083
869
  generateRemixParams,
1084
870
  generateRemixRoute,
1085
871
  generateWebstudioComponent,
1086
- getIndexesWithinAncestors,
1087
872
  idAttribute,
1088
873
  indexAttribute,
1089
874
  isAttributeNameSafe,
package/lib/types/component-generator.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
2
- import type { IndexesWithinAncestors } from "./instance-utils";
1
+ import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors } from "@webstudio-is/sdk";
3
2
  export declare const generateJsxElement: ({ context, scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
4
3
  context?: "expression" | "jsx";
5
4
  scope: Scope;
@@ -22,7 +21,7 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
22
21
  classesMap?: Map<string, Array<string>>;
23
22
  excludePlaceholders?: boolean;
24
23
  }) => string;
25
- export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
24
+ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, metas, classesMap, }: {
26
25
  scope: Scope;
27
26
  name: string;
28
27
  rootInstanceId: Instance["id"];
@@ -32,6 +31,6 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
32
31
  instances: Instances;
33
32
  props: Props;
34
33
  dataSources: DataSources;
35
- indexesWithinAncestors: IndexesWithinAncestors;
36
34
  classesMap: Map<string, Array<string>>;
35
+ metas: Map<Instance["component"], WsComponentMeta>;
37
36
  }) => string;
package/lib/types/embed-template.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
4
4
  type: "control" | "embed" | "container" | "rich-text-child";
5
5
  description?: string | undefined;
6
6
  category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "localization" | "radix" | "internal" | undefined;
7
+ placeholder?: string | undefined;
7
8
  label?: string | undefined;
8
9
  order?: number | undefined;
9
10
  template?: ({
package/lib/types/hook.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import type { Instance, Prop } from "@webstudio-is/sdk";
2
- import type { IndexesWithinAncestors } from "./instance-utils";
1
+ import type { IndexesWithinAncestors, Instance, Prop } from "@webstudio-is/sdk";
3
2
  export type InstanceData = {
4
3
  id: Instance["id"];
5
4
  instanceKey: string;
package/lib/types/index.d.ts CHANGED
@@ -1,9 +1,7 @@
1
1
  export * from "./remix";
2
- export * from "./css/index";
3
2
  export * from "./components/components-utils";
4
3
  export * from "./embed-template";
5
4
  export * from "./props";
6
5
  export type * from "./context";
7
- export { getIndexesWithinAncestors } from "./instance-utils";
8
6
  export type * from "./hook";
9
7
  export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
package/lib/types/props.d.ts CHANGED
@@ -93,6 +93,645 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
93
93
  id: string;
94
94
  instanceId: string;
95
95
  required?: boolean | undefined;
96
+ } | {
97
+ value: {
98
+ type: "scroll";
99
+ animations: {
100
+ keyframes: {
101
+ styles: Record<string, {
102
+ value: {
103
+ value: string;
104
+ type: "asset";
105
+ } | {
106
+ type: "url";
107
+ url: string;
108
+ };
109
+ type: "image";
110
+ hidden?: boolean | undefined;
111
+ } | {
112
+ value: number;
113
+ type: "unit";
114
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
115
+ hidden?: boolean | undefined;
116
+ } | {
117
+ value: string;
118
+ type: "keyword";
119
+ hidden?: boolean | undefined;
120
+ } | {
121
+ value: string;
122
+ type: "unparsed";
123
+ hidden?: boolean | undefined;
124
+ } | {
125
+ type: "rgb";
126
+ r: number;
127
+ g: number;
128
+ b: number;
129
+ alpha: number;
130
+ hidden?: boolean | undefined;
131
+ } | {
132
+ type: "function";
133
+ name: string;
134
+ args: import("@webstudio-is/css-engine").StyleValue;
135
+ hidden?: boolean;
136
+ } | {
137
+ value: string;
138
+ type: "var";
139
+ fallback?: {
140
+ value: number;
141
+ type: "unit";
142
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
143
+ hidden?: boolean | undefined;
144
+ } | {
145
+ value: string;
146
+ type: "keyword";
147
+ hidden?: boolean | undefined;
148
+ } | {
149
+ value: string;
150
+ type: "unparsed";
151
+ hidden?: boolean | undefined;
152
+ } | {
153
+ type: "rgb";
154
+ r: number;
155
+ g: number;
156
+ b: number;
157
+ alpha: number;
158
+ hidden?: boolean | undefined;
159
+ } | undefined;
160
+ hidden?: boolean | undefined;
161
+ } | {
162
+ value: ({
163
+ value: {
164
+ value: string;
165
+ type: "asset";
166
+ } | {
167
+ type: "url";
168
+ url: string;
169
+ };
170
+ type: "image";
171
+ hidden?: boolean | undefined;
172
+ } | {
173
+ value: number;
174
+ type: "unit";
175
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
176
+ hidden?: boolean | undefined;
177
+ } | {
178
+ value: string;
179
+ type: "keyword";
180
+ hidden?: boolean | undefined;
181
+ } | {
182
+ value: string;
183
+ type: "unparsed";
184
+ hidden?: boolean | undefined;
185
+ } | {
186
+ type: "rgb";
187
+ r: number;
188
+ g: number;
189
+ b: number;
190
+ alpha: number;
191
+ hidden?: boolean | undefined;
192
+ } | {
193
+ type: "function";
194
+ name: string;
195
+ args: import("@webstudio-is/css-engine").StyleValue;
196
+ hidden?: boolean;
197
+ } | {
198
+ value: string;
199
+ type: "var";
200
+ fallback?: {
201
+ value: number;
202
+ type: "unit";
203
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
204
+ hidden?: boolean | undefined;
205
+ } | {
206
+ value: string;
207
+ type: "keyword";
208
+ hidden?: boolean | undefined;
209
+ } | {
210
+ value: string;
211
+ type: "unparsed";
212
+ hidden?: boolean | undefined;
213
+ } | {
214
+ type: "rgb";
215
+ r: number;
216
+ g: number;
217
+ b: number;
218
+ alpha: number;
219
+ hidden?: boolean | undefined;
220
+ } | undefined;
221
+ hidden?: boolean | undefined;
222
+ })[];
223
+ type: "tuple";
224
+ hidden?: boolean | undefined;
225
+ } | {
226
+ value: string;
227
+ type: "invalid";
228
+ hidden?: boolean | undefined;
229
+ } | {
230
+ value: ({
231
+ value: {
232
+ value: string;
233
+ type: "asset";
234
+ } | {
235
+ type: "url";
236
+ url: string;
237
+ };
238
+ type: "image";
239
+ hidden?: boolean | undefined;
240
+ } | {
241
+ value: number;
242
+ type: "unit";
243
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
244
+ hidden?: boolean | undefined;
245
+ } | {
246
+ value: string;
247
+ type: "keyword";
248
+ hidden?: boolean | undefined;
249
+ } | {
250
+ value: string;
251
+ type: "unparsed";
252
+ hidden?: boolean | undefined;
253
+ } | {
254
+ type: "rgb";
255
+ r: number;
256
+ g: number;
257
+ b: number;
258
+ alpha: number;
259
+ hidden?: boolean | undefined;
260
+ } | {
261
+ type: "function";
262
+ name: string;
263
+ args: import("@webstudio-is/css-engine").StyleValue;
264
+ hidden?: boolean;
265
+ } | {
266
+ value: string;
267
+ type: "var";
268
+ fallback?: {
269
+ value: number;
270
+ type: "unit";
271
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
272
+ hidden?: boolean | undefined;
273
+ } | {
274
+ value: string;
275
+ type: "keyword";
276
+ hidden?: boolean | undefined;
277
+ } | {
278
+ value: string;
279
+ type: "unparsed";
280
+ hidden?: boolean | undefined;
281
+ } | {
282
+ type: "rgb";
283
+ r: number;
284
+ g: number;
285
+ b: number;
286
+ alpha: number;
287
+ hidden?: boolean | undefined;
288
+ } | undefined;
289
+ hidden?: boolean | undefined;
290
+ } | {
291
+ value: ({
292
+ value: {
293
+ value: string;
294
+ type: "asset";
295
+ } | {
296
+ type: "url";
297
+ url: string;
298
+ };
299
+ type: "image";
300
+ hidden?: boolean | undefined;
301
+ } | {
302
+ value: number;
303
+ type: "unit";
304
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
305
+ hidden?: boolean | undefined;
306
+ } | {
307
+ value: string;
308
+ type: "keyword";
309
+ hidden?: boolean | undefined;
310
+ } | {
311
+ value: string;
312
+ type: "unparsed";
313
+ hidden?: boolean | undefined;
314
+ } | {
315
+ type: "rgb";
316
+ r: number;
317
+ g: number;
318
+ b: number;
319
+ alpha: number;
320
+ hidden?: boolean | undefined;
321
+ } | {
322
+ type: "function";
323
+ name: string;
324
+ args: import("@webstudio-is/css-engine").StyleValue;
325
+ hidden?: boolean;
326
+ } | {
327
+ value: string;
328
+ type: "var";
329
+ fallback?: {
330
+ value: number;
331
+ type: "unit";
332
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
333
+ hidden?: boolean | undefined;
334
+ } | {
335
+ value: string;
336
+ type: "keyword";
337
+ hidden?: boolean | undefined;
338
+ } | {
339
+ value: string;
340
+ type: "unparsed";
341
+ hidden?: boolean | undefined;
342
+ } | {
343
+ type: "rgb";
344
+ r: number;
345
+ g: number;
346
+ b: number;
347
+ alpha: number;
348
+ hidden?: boolean | undefined;
349
+ } | undefined;
350
+ hidden?: boolean | undefined;
351
+ })[];
352
+ type: "tuple";
353
+ hidden?: boolean | undefined;
354
+ } | {
355
+ value: string;
356
+ type: "invalid";
357
+ hidden?: boolean | undefined;
358
+ })[];
359
+ type: "layers";
360
+ hidden?: boolean | undefined;
361
+ } | {
362
+ value: string[];
363
+ type: "fontFamily";
364
+ hidden?: boolean | undefined;
365
+ } | {
366
+ type: "guaranteedInvalid";
367
+ hidden?: boolean | undefined;
368
+ } | {
369
+ value: "";
370
+ type: "unset";
371
+ hidden?: boolean | undefined;
372
+ }>;
373
+ offset?: number | undefined;
374
+ }[];
375
+ timing: {
376
+ fill?: "none" | "forwards" | "backwards" | "both" | undefined;
377
+ easing?: string | undefined;
378
+ rangeStart?: ["start" | "end", {
379
+ value: number;
380
+ type: "unit";
381
+ unit: "%" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax";
382
+ } | {
383
+ value: string;
384
+ type: "unparsed";
385
+ }] | undefined;
386
+ rangeEnd?: ["start" | "end", {
387
+ value: number;
388
+ type: "unit";
389
+ unit: "%" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax";
390
+ } | {
391
+ value: string;
392
+ type: "unparsed";
393
+ }] | undefined;
394
+ };
395
+ name?: string | undefined;
396
+ description?: string | undefined;
397
+ }[];
398
+ source?: "closest" | "nearest" | "root" | undefined;
399
+ axis?: "block" | "x" | "inline" | "y" | undefined;
400
+ isPinned?: boolean | undefined;
401
+ debug?: boolean | undefined;
402
+ } | {
403
+ type: "view";
404
+ animations: {
405
+ keyframes: {
406
+ styles: Record<string, {
407
+ value: {
408
+ value: string;
409
+ type: "asset";
410
+ } | {
411
+ type: "url";
412
+ url: string;
413
+ };
414
+ type: "image";
415
+ hidden?: boolean | undefined;
416
+ } | {
417
+ value: number;
418
+ type: "unit";
419
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
420
+ hidden?: boolean | undefined;
421
+ } | {
422
+ value: string;
423
+ type: "keyword";
424
+ hidden?: boolean | undefined;
425
+ } | {
426
+ value: string;
427
+ type: "unparsed";
428
+ hidden?: boolean | undefined;
429
+ } | {
430
+ type: "rgb";
431
+ r: number;
432
+ g: number;
433
+ b: number;
434
+ alpha: number;
435
+ hidden?: boolean | undefined;
436
+ } | {
437
+ type: "function";
438
+ name: string;
439
+ args: import("@webstudio-is/css-engine").StyleValue;
440
+ hidden?: boolean;
441
+ } | {
442
+ value: string;
443
+ type: "var";
444
+ fallback?: {
445
+ value: number;
446
+ type: "unit";
447
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
448
+ hidden?: boolean | undefined;
449
+ } | {
450
+ value: string;
451
+ type: "keyword";
452
+ hidden?: boolean | undefined;
453
+ } | {
454
+ value: string;
455
+ type: "unparsed";
456
+ hidden?: boolean | undefined;
457
+ } | {
458
+ type: "rgb";
459
+ r: number;
460
+ g: number;
461
+ b: number;
462
+ alpha: number;
463
+ hidden?: boolean | undefined;
464
+ } | undefined;
465
+ hidden?: boolean | undefined;
466
+ } | {
467
+ value: ({
468
+ value: {
469
+ value: string;
470
+ type: "asset";
471
+ } | {
472
+ type: "url";
473
+ url: string;
474
+ };
475
+ type: "image";
476
+ hidden?: boolean | undefined;
477
+ } | {
478
+ value: number;
479
+ type: "unit";
480
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
481
+ hidden?: boolean | undefined;
482
+ } | {
483
+ value: string;
484
+ type: "keyword";
485
+ hidden?: boolean | undefined;
486
+ } | {
487
+ value: string;
488
+ type: "unparsed";
489
+ hidden?: boolean | undefined;
490
+ } | {
491
+ type: "rgb";
492
+ r: number;
493
+ g: number;
494
+ b: number;
495
+ alpha: number;
496
+ hidden?: boolean | undefined;
497
+ } | {
498
+ type: "function";
499
+ name: string;
500
+ args: import("@webstudio-is/css-engine").StyleValue;
501
+ hidden?: boolean;
502
+ } | {
503
+ value: string;
504
+ type: "var";
505
+ fallback?: {
506
+ value: number;
507
+ type: "unit";
508
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
509
+ hidden?: boolean | undefined;
510
+ } | {
511
+ value: string;
512
+ type: "keyword";
513
+ hidden?: boolean | undefined;
514
+ } | {
515
+ value: string;
516
+ type: "unparsed";
517
+ hidden?: boolean | undefined;
518
+ } | {
519
+ type: "rgb";
520
+ r: number;
521
+ g: number;
522
+ b: number;
523
+ alpha: number;
524
+ hidden?: boolean | undefined;
525
+ } | undefined;
526
+ hidden?: boolean | undefined;
527
+ })[];
528
+ type: "tuple";
529
+ hidden?: boolean | undefined;
530
+ } | {
531
+ value: string;
532
+ type: "invalid";
533
+ hidden?: boolean | undefined;
534
+ } | {
535
+ value: ({
536
+ value: {
537
+ value: string;
538
+ type: "asset";
539
+ } | {
540
+ type: "url";
541
+ url: string;
542
+ };
543
+ type: "image";
544
+ hidden?: boolean | undefined;
545
+ } | {
546
+ value: number;
547
+ type: "unit";
548
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
549
+ hidden?: boolean | undefined;
550
+ } | {
551
+ value: string;
552
+ type: "keyword";
553
+ hidden?: boolean | undefined;
554
+ } | {
555
+ value: string;
556
+ type: "unparsed";
557
+ hidden?: boolean | undefined;
558
+ } | {
559
+ type: "rgb";
560
+ r: number;
561
+ g: number;
562
+ b: number;
563
+ alpha: number;
564
+ hidden?: boolean | undefined;
565
+ } | {
566
+ type: "function";
567
+ name: string;
568
+ args: import("@webstudio-is/css-engine").StyleValue;
569
+ hidden?: boolean;
570
+ } | {
571
+ value: string;
572
+ type: "var";
573
+ fallback?: {
574
+ value: number;
575
+ type: "unit";
576
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
577
+ hidden?: boolean | undefined;
578
+ } | {
579
+ value: string;
580
+ type: "keyword";
581
+ hidden?: boolean | undefined;
582
+ } | {
583
+ value: string;
584
+ type: "unparsed";
585
+ hidden?: boolean | undefined;
586
+ } | {
587
+ type: "rgb";
588
+ r: number;
589
+ g: number;
590
+ b: number;
591
+ alpha: number;
592
+ hidden?: boolean | undefined;
593
+ } | undefined;
594
+ hidden?: boolean | undefined;
595
+ } | {
596
+ value: ({
597
+ value: {
598
+ value: string;
599
+ type: "asset";
600
+ } | {
601
+ type: "url";
602
+ url: string;
603
+ };
604
+ type: "image";
605
+ hidden?: boolean | undefined;
606
+ } | {
607
+ value: number;
608
+ type: "unit";
609
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
610
+ hidden?: boolean | undefined;
611
+ } | {
612
+ value: string;
613
+ type: "keyword";
614
+ hidden?: boolean | undefined;
615
+ } | {
616
+ value: string;
617
+ type: "unparsed";
618
+ hidden?: boolean | undefined;
619
+ } | {
620
+ type: "rgb";
621
+ r: number;
622
+ g: number;
623
+ b: number;
624
+ alpha: number;
625
+ hidden?: boolean | undefined;
626
+ } | {
627
+ type: "function";
628
+ name: string;
629
+ args: import("@webstudio-is/css-engine").StyleValue;
630
+ hidden?: boolean;
631
+ } | {
632
+ value: string;
633
+ type: "var";
634
+ fallback?: {
635
+ value: number;
636
+ type: "unit";
637
+ unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
638
+ hidden?: boolean | undefined;
639
+ } | {
640
+ value: string;
641
+ type: "keyword";
642
+ hidden?: boolean | undefined;
643
+ } | {
644
+ value: string;
645
+ type: "unparsed";
646
+ hidden?: boolean | undefined;
647
+ } | {
648
+ type: "rgb";
649
+ r: number;
650
+ g: number;
651
+ b: number;
652
+ alpha: number;
653
+ hidden?: boolean | undefined;
654
+ } | undefined;
655
+ hidden?: boolean | undefined;
656
+ })[];
657
+ type: "tuple";
658
+ hidden?: boolean | undefined;
659
+ } | {
660
+ value: string;
661
+ type: "invalid";
662
+ hidden?: boolean | undefined;
663
+ })[];
664
+ type: "layers";
665
+ hidden?: boolean | undefined;
666
+ } | {
667
+ value: string[];
668
+ type: "fontFamily";
669
+ hidden?: boolean | undefined;
670
+ } | {
671
+ type: "guaranteedInvalid";
672
+ hidden?: boolean | undefined;
673
+ } | {
674
+ value: "";
675
+ type: "unset";
676
+ hidden?: boolean | undefined;
677
+ }>;
678
+ offset?: number | undefined;
679
+ }[];
680
+ timing: {
681
+ fill?: "none" | "forwards" | "backwards" | "both" | undefined;
682
+ easing?: string | undefined;
683
+ rangeStart?: ["contain" | "cover" | "entry" | "exit" | "entry-crossing" | "exit-crossing", {
684
+ value: number;
685
+ type: "unit";
686
+ unit: "%" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax";
687
+ } | {
688
+ value: string;
689
+ type: "unparsed";
690
+ }] | undefined;
691
+ rangeEnd?: ["contain" | "cover" | "entry" | "exit" | "entry-crossing" | "exit-crossing", {
692
+ value: number;
693
+ type: "unit";
694
+ unit: "%" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax";
695
+ } | {
696
+ value: string;
697
+ type: "unparsed";
698
+ }] | undefined;
699
+ };
700
+ name?: string | undefined;
701
+ description?: string | undefined;
702
+ }[];
703
+ subject?: string | undefined;
704
+ axis?: "block" | "x" | "inline" | "y" | undefined;
705
+ insetStart?: {
706
+ value: number;
707
+ type: "unit";
708
+ unit: "%" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax";
709
+ } | {
710
+ value: string;
711
+ type: "unparsed";
712
+ } | {
713
+ value: "auto";
714
+ type: "keyword";
715
+ } | undefined;
716
+ insetEnd?: {
717
+ value: number;
718
+ type: "unit";
719
+ unit: "%" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax";
720
+ } | {
721
+ value: string;
722
+ type: "unparsed";
723
+ } | {
724
+ value: "auto";
725
+ type: "keyword";
726
+ } | undefined;
727
+ isPinned?: boolean | undefined;
728
+ debug?: boolean | undefined;
729
+ };
730
+ type: "animationAction";
731
+ name: string;
732
+ id: string;
733
+ instanceId: string;
734
+ required?: boolean | undefined;
96
735
  })[];
97
736
  export declare const idAttribute: "data-ws-id";
98
737
  export declare const selectorIdAttribute: "data-ws-selector";
@@ -101,6 +740,4 @@ export declare const showAttribute: "data-ws-show";
101
740
  export declare const indexAttribute: "data-ws-index";
102
741
  export declare const collapsedAttribute: "data-ws-collapsed";
103
742
  export declare const textContentAttribute: "data-ws-text-content";
104
- export declare const editablePlaceholderVariable: "--data-ws-editable-placeholder";
105
- export declare const editingPlaceholderVariable: "--data-ws-editing-placeholder";
106
743
  export declare const isAttributeNameSafe: (attributeName: string) => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/react-sdk",
3
- "version": "0.204.0",
3
+ "version": "0.206.0",
4
4
  "description": "Webstudio JavaScript / TypeScript API",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -14,7 +14,7 @@
14
14
  "type-fest": "^4.32.0",
15
15
  "vitest": "^3.0.4",
16
16
  "zod": "^3.22.4",
17
- "@webstudio-is/template": "0.204.0",
17
+ "@webstudio-is/template": "0.206.0",
18
18
  "@webstudio-is/tsconfig": "1.0.7"
19
19
  },
20
20
  "peerDependencies": {
@@ -26,11 +26,11 @@
26
26
  "change-case": "^5.4.4",
27
27
  "html-tags": "^4.0.0",
28
28
  "nanoid": "^5.0.9",
29
- "@webstudio-is/css-engine": "0.204.0",
30
- "@webstudio-is/fonts": "0.204.0",
31
- "@webstudio-is/image": "0.204.0",
32
- "@webstudio-is/icons": "^0.204.0",
33
- "@webstudio-is/sdk": "0.204.0"
29
+ "@webstudio-is/css-engine": "0.206.0",
30
+ "@webstudio-is/fonts": "0.206.0",
31
+ "@webstudio-is/icons": "^0.206.0",
32
+ "@webstudio-is/image": "0.206.0",
33
+ "@webstudio-is/sdk": "0.206.0"
34
34
  },
35
35
  "exports": {
36
36
  ".": {
package/placeholder.d.ts CHANGED
@@ -5,21 +5,16 @@ declare module "__CONSTANTS__" {
5
5
  }
6
6
 
7
7
  declare module "__CLIENT__" {
8
- import type {
9
- FontAsset,
10
- ImageAsset,
11
- ResourceRequest,
12
- System,
13
- } from "@webstudio-is/sdk";
8
+ import type { ResourceRequest, System } from "@webstudio-is/sdk";
14
9
 
15
10
  export const siteName: string;
16
11
 
17
- export const favIconAsset: ImageAsset | undefined;
12
+ export const favIconAsset: string | undefined;
18
13
 
19
14
  // Font assets on current page (can be preloaded)
20
- export const pageFontAssets: FontAsset[];
15
+ export const pageFontAssets: string[];
21
16
 
22
- export const pageBackgroundImageAssets: ImageAsset[];
17
+ export const pageBackgroundImageAssets: string[];
23
18
 
24
19
  export const CustomCode: () => ReactNode;
25
20
 
package/lib/types/css/css.d.ts DELETED
@@ -1,20 +0,0 @@
1
- import { type TransformValue } from "@webstudio-is/css-engine";
2
- import { type Assets, type Breakpoints, type Instances, type Props, type StyleSourceSelections, type Styles, type WsComponentMeta } from "@webstudio-is/sdk";
3
- export type CssConfig = {
4
- assets: Assets;
5
- instances: Instances;
6
- props: Props;
7
- breakpoints: Breakpoints;
8
- styles: Styles;
9
- styleSourceSelections: StyleSourceSelections;
10
- componentMetas: Map<string, WsComponentMeta>;
11
- assetBaseUrl: string;
12
- atomic: boolean;
13
- };
14
- export declare const createImageValueTransformer: (assets: Assets, { assetBaseUrl }: {
15
- assetBaseUrl: string;
16
- }) => TransformValue;
17
- export declare const generateCss: ({ assets, instances, props, breakpoints, styles, styleSourceSelections, componentMetas, assetBaseUrl, atomic, }: CssConfig) => {
18
- cssText: string;
19
- classes: Map<string, string[]>;
20
- };
package/lib/types/css/css.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/lib/types/css/global-rules.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { StyleSheetRegular } from "@webstudio-is/css-engine";
2
- import type { Assets } from "@webstudio-is/sdk";
3
- export declare const addGlobalRules: (sheet: StyleSheetRegular, { assets, assetBaseUrl }: {
4
- assets: Assets;
5
- assetBaseUrl: string;
6
- }) => void;
package/lib/types/css/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from "./global-rules";
2
- export * from "./css";
package/lib/types/instance-utils.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { Instance, Instances, WsComponentMeta } from "@webstudio-is/sdk";
2
- export type IndexesWithinAncestors = Map<Instance["id"], number>;
3
- export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"], WsComponentMeta>, instances: Instances, rootIds: Instance["id"][]) => IndexesWithinAncestors;
package/lib/types/instance-utils.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};