@webstudio-is/react-sdk 0.59.0 → 0.61.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 (163) hide show
  1. package/lib/app/custom-components/shared/remix-link.js +2 -2
  2. package/lib/app/index.js +0 -1
  3. package/lib/cjs/app/custom-components/shared/remix-link.js +2 -2
  4. package/lib/cjs/app/index.js +0 -1
  5. package/lib/cjs/components/__generated__/blockquote.props.js +5 -0
  6. package/lib/cjs/components/__generated__/body.props.js +5 -0
  7. package/lib/cjs/components/__generated__/bold.props.js +5 -0
  8. package/lib/cjs/components/__generated__/box.props.js +5 -0
  9. package/lib/cjs/components/__generated__/button.props.js +5 -1
  10. package/lib/cjs/components/__generated__/code.props.js +5 -0
  11. package/lib/cjs/components/__generated__/form.props.js +5 -0
  12. package/lib/cjs/components/__generated__/heading.props.js +5 -0
  13. package/lib/cjs/components/__generated__/image.props.js +5 -0
  14. package/lib/cjs/components/__generated__/input.props.js +11 -2
  15. package/lib/cjs/components/__generated__/italic.props.js +5 -0
  16. package/lib/cjs/components/__generated__/link-block.props.js +5 -1
  17. package/lib/cjs/components/__generated__/link.props.js +5 -1
  18. package/lib/cjs/components/__generated__/list-item.props.js +5 -0
  19. package/lib/cjs/components/__generated__/list.props.js +5 -0
  20. package/lib/cjs/components/__generated__/paragraph.props.js +5 -0
  21. package/lib/cjs/components/__generated__/rich-text-link.props.js +5 -1
  22. package/lib/cjs/components/__generated__/separator.props.js +5 -0
  23. package/lib/cjs/components/__generated__/span.props.js +5 -0
  24. package/lib/cjs/components/__generated__/subscript.props.js +5 -0
  25. package/lib/cjs/components/__generated__/superscript.props.js +5 -0
  26. package/lib/cjs/components/__generated__/text-block.props.js +5 -0
  27. package/lib/cjs/components/blockquote.ws.js +36 -48
  28. package/lib/cjs/components/body.ws.js +19 -24
  29. package/lib/cjs/components/button.ws.js +1 -1
  30. package/lib/cjs/components/code.ws.js +20 -28
  31. package/lib/cjs/components/component-meta.js +2 -1
  32. package/lib/cjs/components/form.ws.js +14 -7
  33. package/lib/cjs/components/heading.ws.js +1 -1
  34. package/lib/cjs/components/image.ws.js +8 -9
  35. package/lib/cjs/components/italic.ws.js +5 -5
  36. package/lib/cjs/components/link-block.ws.js +5 -5
  37. package/lib/cjs/components/link.js +1 -1
  38. package/lib/cjs/components/link.ws.js +9 -10
  39. package/lib/cjs/components/list-item.ws.js +1 -1
  40. package/lib/cjs/components/list.ws.js +22 -22
  41. package/lib/cjs/components/paragraph.ws.js +1 -1
  42. package/lib/cjs/components/separator.ws.js +20 -20
  43. package/lib/cjs/components/text-block.ws.js +6 -7
  44. package/lib/cjs/css/css.js +6 -9
  45. package/lib/cjs/css/normalize.js +166 -185
  46. package/lib/cjs/css/presets.js +14 -34
  47. package/lib/cjs/css/style-rules.js +17 -0
  48. package/lib/cjs/embed-template.js +160 -0
  49. package/lib/cjs/index.js +1 -0
  50. package/lib/components/__generated__/blockquote.props.js +5 -0
  51. package/lib/components/__generated__/body.props.js +5 -0
  52. package/lib/components/__generated__/bold.props.js +5 -0
  53. package/lib/components/__generated__/box.props.js +5 -0
  54. package/lib/components/__generated__/button.props.js +5 -1
  55. package/lib/components/__generated__/code.props.js +5 -0
  56. package/lib/components/__generated__/form.props.js +5 -0
  57. package/lib/components/__generated__/heading.props.js +5 -0
  58. package/lib/components/__generated__/image.props.js +5 -0
  59. package/lib/components/__generated__/input.props.js +11 -2
  60. package/lib/components/__generated__/italic.props.js +5 -0
  61. package/lib/components/__generated__/link-block.props.js +5 -1
  62. package/lib/components/__generated__/link.props.js +5 -1
  63. package/lib/components/__generated__/list-item.props.js +5 -0
  64. package/lib/components/__generated__/list.props.js +5 -0
  65. package/lib/components/__generated__/paragraph.props.js +5 -0
  66. package/lib/components/__generated__/rich-text-link.props.js +5 -1
  67. package/lib/components/__generated__/separator.props.js +5 -0
  68. package/lib/components/__generated__/span.props.js +5 -0
  69. package/lib/components/__generated__/subscript.props.js +5 -0
  70. package/lib/components/__generated__/superscript.props.js +5 -0
  71. package/lib/components/__generated__/text-block.props.js +5 -0
  72. package/lib/components/blockquote.ws.js +36 -48
  73. package/lib/components/body.ws.js +19 -24
  74. package/lib/components/button.ws.js +1 -1
  75. package/lib/components/code.ws.js +20 -28
  76. package/lib/components/component-meta.js +2 -1
  77. package/lib/components/form.ws.js +14 -7
  78. package/lib/components/heading.ws.js +1 -1
  79. package/lib/components/image.ws.js +8 -9
  80. package/lib/components/italic.ws.js +5 -5
  81. package/lib/components/link-block.ws.js +5 -5
  82. package/lib/components/link.js +1 -1
  83. package/lib/components/link.ws.js +9 -10
  84. package/lib/components/list-item.ws.js +1 -1
  85. package/lib/components/list.ws.js +22 -22
  86. package/lib/components/paragraph.ws.js +1 -1
  87. package/lib/components/separator.ws.js +20 -20
  88. package/lib/components/text-block.ws.js +6 -7
  89. package/lib/css/css.js +8 -11
  90. package/lib/css/normalize.js +166 -185
  91. package/lib/css/presets.js +14 -34
  92. package/lib/css/style-rules.js +17 -0
  93. package/lib/embed-template.js +140 -0
  94. package/lib/index.js +1 -0
  95. package/lib/types/app/index.d.ts +0 -1
  96. package/lib/types/components/box.stories.d.ts +2 -2
  97. package/lib/types/components/component-meta.d.ts +20 -5
  98. package/lib/types/components/components-utils.d.ts +1 -1
  99. package/lib/types/css/normalize.d.ts +8786 -2286
  100. package/lib/types/css/presets.d.ts +2 -38
  101. package/lib/types/css/style-rules.d.ts +11 -9
  102. package/lib/types/embed-template.d.ts +1725 -0
  103. package/lib/types/embed-template.test.d.ts +1 -0
  104. package/lib/types/index.d.ts +1 -0
  105. package/package.json +16 -19
  106. package/src/app/custom-components/shared/remix-link.tsx +2 -2
  107. package/src/app/index.ts +0 -1
  108. package/src/components/__generated__/blockquote.props.ts +5 -0
  109. package/src/components/__generated__/body.props.ts +5 -0
  110. package/src/components/__generated__/bold.props.ts +5 -0
  111. package/src/components/__generated__/box.props.ts +5 -0
  112. package/src/components/__generated__/button.props.ts +5 -1
  113. package/src/components/__generated__/code.props.ts +5 -0
  114. package/src/components/__generated__/form.props.ts +5 -0
  115. package/src/components/__generated__/heading.props.ts +5 -0
  116. package/src/components/__generated__/image.props.ts +5 -0
  117. package/src/components/__generated__/input.props.ts +11 -2
  118. package/src/components/__generated__/italic.props.ts +5 -0
  119. package/src/components/__generated__/link-block.props.ts +5 -1
  120. package/src/components/__generated__/link.props.ts +5 -1
  121. package/src/components/__generated__/list-item.props.ts +5 -0
  122. package/src/components/__generated__/list.props.ts +5 -0
  123. package/src/components/__generated__/paragraph.props.ts +5 -0
  124. package/src/components/__generated__/rich-text-link.props.ts +5 -1
  125. package/src/components/__generated__/separator.props.ts +5 -0
  126. package/src/components/__generated__/span.props.ts +5 -0
  127. package/src/components/__generated__/subscript.props.ts +5 -0
  128. package/src/components/__generated__/superscript.props.ts +5 -0
  129. package/src/components/__generated__/text-block.props.ts +5 -0
  130. package/src/components/blockquote.ws.tsx +42 -52
  131. package/src/components/body.ws.tsx +25 -32
  132. package/src/components/bold.ws.tsx +6 -3
  133. package/src/components/box.ws.ts +6 -3
  134. package/src/components/button.ws.tsx +7 -4
  135. package/src/components/code.ws.tsx +26 -32
  136. package/src/components/component-meta.ts +5 -3
  137. package/src/components/form.ws.tsx +19 -9
  138. package/src/components/heading.ws.tsx +7 -4
  139. package/src/components/image.ws.tsx +14 -12
  140. package/src/components/input.ws.tsx +6 -3
  141. package/src/components/italic.ws.tsx +11 -8
  142. package/src/components/link-block.ws.tsx +11 -8
  143. package/src/components/link.tsx +1 -1
  144. package/src/components/link.ws.tsx +15 -13
  145. package/src/components/list-item.ws.tsx +7 -4
  146. package/src/components/list.ws.tsx +28 -25
  147. package/src/components/paragraph.ws.tsx +7 -4
  148. package/src/components/separator.ws.tsx +26 -25
  149. package/src/components/span.ws.tsx +6 -3
  150. package/src/components/subscript.ws.tsx +6 -3
  151. package/src/components/superscript.ws.tsx +6 -3
  152. package/src/components/text-block.ws.tsx +12 -11
  153. package/src/css/css.ts +8 -11
  154. package/src/css/normalize.ts +165 -188
  155. package/src/css/presets.ts +15 -37
  156. package/src/css/style-rules.ts +24 -0
  157. package/src/embed-template.test.ts +210 -0
  158. package/src/embed-template.ts +187 -0
  159. package/src/index.ts +1 -0
  160. package/lib/app/handle-request.server.js +0 -16
  161. package/lib/cjs/app/handle-request.server.js +0 -36
  162. package/lib/types/app/handle-request.server.d.ts +0 -2
  163. package/src/app/handle-request.server.tsx +0 -21
package/src/components/__generated__/paragraph.props.ts CHANGED
@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
17
17
  type: "boolean",
18
18
  },
19
19
  accessKey: { required: false, control: "text", type: "string" },
20
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
20
21
  className: { required: false, control: "text", type: "string" },
21
22
  contentEditable: { required: false, control: "text", type: "string" },
22
23
  contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
25
26
  hidden: { required: false, control: "boolean", type: "boolean" },
26
27
  id: { required: false, control: "text", type: "string" },
27
28
  lang: { required: false, control: "text", type: "string" },
29
+ nonce: { required: false, control: "text", type: "string" },
28
30
  placeholder: { required: false, control: "text", type: "string" },
29
31
  spellCheck: { required: false, control: "boolean", type: "boolean" },
30
32
  tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
37
39
  radioGroup: { required: false, control: "text", type: "string" },
38
40
  role: { required: false, control: "text", type: "string" },
39
41
  about: { required: false, control: "text", type: "string" },
42
+ content: { required: false, control: "text", type: "string" },
40
43
  datatype: { required: false, control: "text", type: "string" },
41
44
  inlist: { required: false, control: "text", type: "string" },
42
45
  prefix: { required: false, control: "text", type: "string" },
43
46
  property: { required: false, control: "text", type: "string" },
47
+ rel: { required: false, control: "text", type: "string" },
44
48
  resource: { required: false, control: "text", type: "string" },
49
+ rev: { required: false, control: "text", type: "string" },
45
50
  typeof: { required: false, control: "text", type: "string" },
46
51
  vocab: { required: false, control: "text", type: "string" },
47
52
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/__generated__/rich-text-link.props.ts CHANGED
@@ -15,7 +15,6 @@ export const props: Record<string, PropMeta> = {
15
15
  hrefLang: { required: false, control: "text", type: "string" },
16
16
  media: { required: false, control: "text", type: "string" },
17
17
  ping: { required: false, control: "text", type: "string" },
18
- rel: { required: false, control: "text", type: "string" },
19
18
  type: { required: false, control: "text", type: "string" },
20
19
  referrerPolicy: {
21
20
  required: false,
@@ -46,6 +45,7 @@ export const props: Record<string, PropMeta> = {
46
45
  type: "boolean",
47
46
  },
48
47
  accessKey: { required: false, control: "text", type: "string" },
48
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
49
49
  className: { required: false, control: "text", type: "string" },
50
50
  contentEditable: { required: false, control: "text", type: "string" },
51
51
  contextMenu: { required: false, control: "text", type: "string" },
@@ -54,6 +54,7 @@ export const props: Record<string, PropMeta> = {
54
54
  hidden: { required: false, control: "boolean", type: "boolean" },
55
55
  id: { required: false, control: "text", type: "string" },
56
56
  lang: { required: false, control: "text", type: "string" },
57
+ nonce: { required: false, control: "text", type: "string" },
57
58
  placeholder: { required: false, control: "text", type: "string" },
58
59
  spellCheck: { required: false, control: "boolean", type: "boolean" },
59
60
  tabIndex: { required: false, control: "number", type: "number" },
@@ -66,11 +67,14 @@ export const props: Record<string, PropMeta> = {
66
67
  radioGroup: { required: false, control: "text", type: "string" },
67
68
  role: { required: false, control: "text", type: "string" },
68
69
  about: { required: false, control: "text", type: "string" },
70
+ content: { required: false, control: "text", type: "string" },
69
71
  datatype: { required: false, control: "text", type: "string" },
70
72
  inlist: { required: false, control: "text", type: "string" },
71
73
  prefix: { required: false, control: "text", type: "string" },
72
74
  property: { required: false, control: "text", type: "string" },
75
+ rel: { required: false, control: "text", type: "string" },
73
76
  resource: { required: false, control: "text", type: "string" },
77
+ rev: { required: false, control: "text", type: "string" },
74
78
  typeof: { required: false, control: "text", type: "string" },
75
79
  vocab: { required: false, control: "text", type: "string" },
76
80
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/__generated__/separator.props.ts CHANGED
@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
17
17
  type: "boolean",
18
18
  },
19
19
  accessKey: { required: false, control: "text", type: "string" },
20
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
20
21
  className: { required: false, control: "text", type: "string" },
21
22
  contentEditable: { required: false, control: "text", type: "string" },
22
23
  contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
25
26
  hidden: { required: false, control: "boolean", type: "boolean" },
26
27
  id: { required: false, control: "text", type: "string" },
27
28
  lang: { required: false, control: "text", type: "string" },
29
+ nonce: { required: false, control: "text", type: "string" },
28
30
  placeholder: { required: false, control: "text", type: "string" },
29
31
  spellCheck: { required: false, control: "boolean", type: "boolean" },
30
32
  tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
37
39
  radioGroup: { required: false, control: "text", type: "string" },
38
40
  role: { required: false, control: "text", type: "string" },
39
41
  about: { required: false, control: "text", type: "string" },
42
+ content: { required: false, control: "text", type: "string" },
40
43
  datatype: { required: false, control: "text", type: "string" },
41
44
  inlist: { required: false, control: "text", type: "string" },
42
45
  prefix: { required: false, control: "text", type: "string" },
43
46
  property: { required: false, control: "text", type: "string" },
47
+ rel: { required: false, control: "text", type: "string" },
44
48
  resource: { required: false, control: "text", type: "string" },
49
+ rev: { required: false, control: "text", type: "string" },
45
50
  typeof: { required: false, control: "text", type: "string" },
46
51
  vocab: { required: false, control: "text", type: "string" },
47
52
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/__generated__/span.props.ts CHANGED
@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
17
17
  type: "boolean",
18
18
  },
19
19
  accessKey: { required: false, control: "text", type: "string" },
20
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
20
21
  className: { required: false, control: "text", type: "string" },
21
22
  contentEditable: { required: false, control: "text", type: "string" },
22
23
  contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
25
26
  hidden: { required: false, control: "boolean", type: "boolean" },
26
27
  id: { required: false, control: "text", type: "string" },
27
28
  lang: { required: false, control: "text", type: "string" },
29
+ nonce: { required: false, control: "text", type: "string" },
28
30
  placeholder: { required: false, control: "text", type: "string" },
29
31
  spellCheck: { required: false, control: "boolean", type: "boolean" },
30
32
  tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
37
39
  radioGroup: { required: false, control: "text", type: "string" },
38
40
  role: { required: false, control: "text", type: "string" },
39
41
  about: { required: false, control: "text", type: "string" },
42
+ content: { required: false, control: "text", type: "string" },
40
43
  datatype: { required: false, control: "text", type: "string" },
41
44
  inlist: { required: false, control: "text", type: "string" },
42
45
  prefix: { required: false, control: "text", type: "string" },
43
46
  property: { required: false, control: "text", type: "string" },
47
+ rel: { required: false, control: "text", type: "string" },
44
48
  resource: { required: false, control: "text", type: "string" },
49
+ rev: { required: false, control: "text", type: "string" },
45
50
  typeof: { required: false, control: "text", type: "string" },
46
51
  vocab: { required: false, control: "text", type: "string" },
47
52
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/__generated__/subscript.props.ts CHANGED
@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
17
17
  type: "boolean",
18
18
  },
19
19
  accessKey: { required: false, control: "text", type: "string" },
20
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
20
21
  className: { required: false, control: "text", type: "string" },
21
22
  contentEditable: { required: false, control: "text", type: "string" },
22
23
  contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
25
26
  hidden: { required: false, control: "boolean", type: "boolean" },
26
27
  id: { required: false, control: "text", type: "string" },
27
28
  lang: { required: false, control: "text", type: "string" },
29
+ nonce: { required: false, control: "text", type: "string" },
28
30
  placeholder: { required: false, control: "text", type: "string" },
29
31
  spellCheck: { required: false, control: "boolean", type: "boolean" },
30
32
  tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
37
39
  radioGroup: { required: false, control: "text", type: "string" },
38
40
  role: { required: false, control: "text", type: "string" },
39
41
  about: { required: false, control: "text", type: "string" },
42
+ content: { required: false, control: "text", type: "string" },
40
43
  datatype: { required: false, control: "text", type: "string" },
41
44
  inlist: { required: false, control: "text", type: "string" },
42
45
  prefix: { required: false, control: "text", type: "string" },
43
46
  property: { required: false, control: "text", type: "string" },
47
+ rel: { required: false, control: "text", type: "string" },
44
48
  resource: { required: false, control: "text", type: "string" },
49
+ rev: { required: false, control: "text", type: "string" },
45
50
  typeof: { required: false, control: "text", type: "string" },
46
51
  vocab: { required: false, control: "text", type: "string" },
47
52
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/__generated__/superscript.props.ts CHANGED
@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
17
17
  type: "boolean",
18
18
  },
19
19
  accessKey: { required: false, control: "text", type: "string" },
20
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
20
21
  className: { required: false, control: "text", type: "string" },
21
22
  contentEditable: { required: false, control: "text", type: "string" },
22
23
  contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
25
26
  hidden: { required: false, control: "boolean", type: "boolean" },
26
27
  id: { required: false, control: "text", type: "string" },
27
28
  lang: { required: false, control: "text", type: "string" },
29
+ nonce: { required: false, control: "text", type: "string" },
28
30
  placeholder: { required: false, control: "text", type: "string" },
29
31
  spellCheck: { required: false, control: "boolean", type: "boolean" },
30
32
  tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
37
39
  radioGroup: { required: false, control: "text", type: "string" },
38
40
  role: { required: false, control: "text", type: "string" },
39
41
  about: { required: false, control: "text", type: "string" },
42
+ content: { required: false, control: "text", type: "string" },
40
43
  datatype: { required: false, control: "text", type: "string" },
41
44
  inlist: { required: false, control: "text", type: "string" },
42
45
  prefix: { required: false, control: "text", type: "string" },
43
46
  property: { required: false, control: "text", type: "string" },
47
+ rel: { required: false, control: "text", type: "string" },
44
48
  resource: { required: false, control: "text", type: "string" },
49
+ rev: { required: false, control: "text", type: "string" },
45
50
  typeof: { required: false, control: "text", type: "string" },
46
51
  vocab: { required: false, control: "text", type: "string" },
47
52
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/__generated__/text-block.props.ts CHANGED
@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
17
17
  type: "boolean",
18
18
  },
19
19
  accessKey: { required: false, control: "text", type: "string" },
20
+ autoFocus: { required: false, control: "boolean", type: "boolean" },
20
21
  className: { required: false, control: "text", type: "string" },
21
22
  contentEditable: { required: false, control: "text", type: "string" },
22
23
  contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
25
26
  hidden: { required: false, control: "boolean", type: "boolean" },
26
27
  id: { required: false, control: "text", type: "string" },
27
28
  lang: { required: false, control: "text", type: "string" },
29
+ nonce: { required: false, control: "text", type: "string" },
28
30
  placeholder: { required: false, control: "text", type: "string" },
29
31
  spellCheck: { required: false, control: "boolean", type: "boolean" },
30
32
  tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
37
39
  radioGroup: { required: false, control: "text", type: "string" },
38
40
  role: { required: false, control: "text", type: "string" },
39
41
  about: { required: false, control: "text", type: "string" },
42
+ content: { required: false, control: "text", type: "string" },
40
43
  datatype: { required: false, control: "text", type: "string" },
41
44
  inlist: { required: false, control: "text", type: "string" },
42
45
  prefix: { required: false, control: "text", type: "string" },
43
46
  property: { required: false, control: "text", type: "string" },
47
+ rel: { required: false, control: "text", type: "string" },
44
48
  resource: { required: false, control: "text", type: "string" },
49
+ rev: { required: false, control: "text", type: "string" },
45
50
  typeof: { required: false, control: "text", type: "string" },
46
51
  vocab: { required: false, control: "text", type: "string" },
47
52
  autoCapitalize: { required: false, control: "text", type: "string" },
package/src/components/blockquote.ws.tsx CHANGED
@@ -1,72 +1,62 @@
1
- import type { Style } from "@webstudio-is/css-data";
2
1
  import { BlockquoteIcon } from "@webstudio-is/icons";
3
2
  import type { defaultTag } from "./blockquote";
4
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
3
+ import type {
4
+ PresetStyle,
5
+ WsComponentMeta,
6
+ WsComponentPropsMeta,
7
+ } from "./component-meta";
5
8
  import { props } from "./__generated__/blockquote.props";
6
9
 
7
10
  const presetStyle = {
8
- blockquote: {
9
- marginTop: {
10
- type: "unit",
11
- value: 0,
12
- unit: "number",
11
+ blockquote: [
12
+ {
13
+ property: "marginTop",
14
+ value: { type: "unit", value: 0, unit: "number" },
13
15
  },
14
- marginRight: {
15
- type: "unit",
16
- value: 0,
17
- unit: "number",
16
+ {
17
+ property: "marginRight",
18
+ value: { type: "unit", value: 0, unit: "number" },
18
19
  },
19
- marginBottom: {
20
- type: "unit",
21
- value: 10,
22
- unit: "px",
20
+ {
21
+ property: "marginBottom",
22
+ value: { type: "unit", value: 10, unit: "px" },
23
23
  },
24
- marginLeft: {
25
- type: "unit",
26
- value: 0,
27
- unit: "number",
24
+ {
25
+ property: "marginLeft",
26
+ value: { type: "unit", value: 0, unit: "number" },
28
27
  },
29
28
 
30
- paddingTop: {
31
- type: "unit",
32
- value: 10,
33
- unit: "px",
29
+ {
30
+ property: "paddingTop",
31
+ value: { type: "unit", value: 10, unit: "px" },
34
32
  },
35
- paddingBottom: {
36
- type: "unit",
37
- value: 10,
38
- unit: "px",
33
+ {
34
+ property: "paddingBottom",
35
+ value: { type: "unit", value: 10, unit: "px" },
39
36
  },
40
- paddingLeft: {
41
- type: "unit",
42
- value: 20,
43
- unit: "px",
37
+ {
38
+ property: "paddingLeft",
39
+ value: { type: "unit", value: 20, unit: "px" },
44
40
  },
45
- paddingRight: {
46
- type: "unit",
47
- value: 20,
48
- unit: "px",
41
+ {
42
+ property: "paddingRight",
43
+ value: { type: "unit", value: 20, unit: "px" },
49
44
  },
50
45
 
51
- borderLeftWidth: {
52
- type: "unit",
53
- value: 5,
54
- unit: "px",
46
+ {
47
+ property: "borderLeftWidth",
48
+ value: { type: "unit", value: 5, unit: "px" },
55
49
  },
56
- borderLeftStyle: {
57
- type: "keyword",
58
- value: "solid",
50
+ {
51
+ property: "borderLeftStyle",
52
+ value: { type: "keyword", value: "solid" },
59
53
  },
60
-
61
- borderLeftColor: {
62
- type: "rgb",
63
- r: 226,
64
- g: 226,
65
- b: 226,
66
- alpha: 1,
54
+ {
55
+ property: "borderLeftColor",
56
+ value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
67
57
  },
68
- },
69
- } as const satisfies Record<typeof defaultTag, Style>;
58
+ ],
59
+ } satisfies PresetStyle<typeof defaultTag>;
70
60
 
71
61
  export const meta: WsComponentMeta = {
72
62
  category: "typography",
@@ -74,7 +64,7 @@ export const meta: WsComponentMeta = {
74
64
  label: "Blockquote",
75
65
  Icon: BlockquoteIcon,
76
66
  presetStyle,
77
- children: ["Blockquote you can edit"],
67
+ children: [{ type: "text", value: "Blockquote you can edit" }],
78
68
  };
79
69
 
80
70
  export const propsMeta: WsComponentPropsMeta = {
package/src/components/body.ws.tsx CHANGED
@@ -1,48 +1,41 @@
1
1
  import { BodyIcon } from "@webstudio-is/icons";
2
2
  import { body } from "../css/normalize";
3
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
3
+ import type {
4
+ PresetStyle,
5
+ WsComponentMeta,
6
+ WsComponentPropsMeta,
7
+ } from "./component-meta";
4
8
  import { props } from "./__generated__/body.props";
5
9
  import type { defaultTag } from "./body";
6
- import type { Style } from "@webstudio-is/css-data";
7
10
 
8
11
  const presetStyle = {
9
- body: {
12
+ body: [
10
13
  ...body,
11
14
 
12
- minHeight: {
13
- type: "unit",
14
- unit: "%",
15
- value: 100,
15
+ {
16
+ property: "minHeight",
17
+ value: { type: "unit", unit: "%", value: 100 },
16
18
  },
17
-
18
- backgroundColor: {
19
- type: "keyword",
20
- value: "white",
21
- },
22
-
23
- fontFamily: {
24
- type: "keyword",
25
- value: "Arial",
19
+ {
20
+ property: "fontFamily",
21
+ value: { type: "keyword", value: "Arial" },
26
22
  },
27
-
28
- fontSize: {
29
- type: "unit",
30
- unit: "px",
31
- value: 14,
23
+ {
24
+ property: "fontSize",
25
+ value: { type: "unit", unit: "px", value: 14 },
32
26
  },
33
-
34
- lineHeight: {
35
- type: "unit",
36
- unit: "number",
37
- value: 1.5,
27
+ {
28
+ property: "lineHeight",
29
+ value: { type: "unit", unit: "number", value: 1.5 },
38
30
  },
39
-
40
- color: {
41
- type: "keyword",
42
- value: "#232323",
31
+ // temporary set root color
32
+ // until builder start to fallback "inherit" to black
33
+ {
34
+ property: "color",
35
+ value: { type: "keyword", value: "black" },
43
36
  },
44
- },
45
- } as const satisfies Record<typeof defaultTag, Style>;
37
+ ],
38
+ } satisfies PresetStyle<typeof defaultTag>;
46
39
 
47
40
  export const meta: WsComponentMeta = {
48
41
  type: "container",
package/src/components/bold.ws.tsx CHANGED
@@ -1,13 +1,16 @@
1
1
  import { BoldIcon } from "@webstudio-is/icons";
2
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
2
+ import type {
3
+ PresetStyle,
4
+ WsComponentMeta,
5
+ WsComponentPropsMeta,
6
+ } from "./component-meta";
3
7
  import { props } from "./__generated__/bold.props";
4
8
  import { b } from "../css/normalize";
5
- import type { Style } from "@webstudio-is/css-data";
6
9
  import type { defaultTag } from "./bold";
7
10
 
8
11
  const presetStyle = {
9
12
  b,
10
- } as const satisfies Record<typeof defaultTag, Style>;
13
+ } satisfies PresetStyle<typeof defaultTag>;
11
14
 
12
15
  export const meta: WsComponentMeta = {
13
16
  type: "rich-text-child",
package/src/components/box.ws.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import { BoxIcon } from "@webstudio-is/icons";
2
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
2
+ import type {
3
+ PresetStyle,
4
+ WsComponentMeta,
5
+ WsComponentPropsMeta,
6
+ } from "./component-meta";
3
7
  import { props } from "./__generated__/box.props";
4
8
  import type { Box } from "./box";
5
9
  import type { ComponentProps } from "react";
6
- import type { Style } from "@webstudio-is/css-data";
7
10
  import {
8
11
  div,
9
12
  address,
@@ -30,7 +33,7 @@ const presetStyle = {
30
33
  main,
31
34
  nav,
32
35
  section,
33
- } as const satisfies Record<BoxTags, Style>;
36
+ } satisfies PresetStyle<BoxTags>;
34
37
 
35
38
  export const meta: WsComponentMeta = {
36
39
  category: "general",
package/src/components/button.ws.tsx CHANGED
@@ -1,13 +1,16 @@
1
1
  import { ButtonElementIcon } from "@webstudio-is/icons";
2
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
3
- import { props } from "./__generated__/button.props";
4
2
  import { button } from "../css/normalize";
3
+ import type {
4
+ PresetStyle,
5
+ WsComponentMeta,
6
+ WsComponentPropsMeta,
7
+ } from "./component-meta";
8
+ import { props } from "./__generated__/button.props";
5
9
  import type { defaultTag } from "./button";
6
- import type { Style } from "@webstudio-is/css-data";
7
10
 
8
11
  const presetStyle = {
9
12
  button,
10
- } as const satisfies Record<typeof defaultTag, Style>;
13
+ } satisfies PresetStyle<typeof defaultTag>;
11
14
 
12
15
  export const meta: WsComponentMeta = {
13
16
  category: "forms",
package/src/components/code.ws.tsx CHANGED
@@ -1,44 +1,38 @@
1
1
  import { CodeIcon } from "@webstudio-is/icons";
2
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
2
+ import type {
3
+ PresetStyle,
4
+ WsComponentMeta,
5
+ WsComponentPropsMeta,
6
+ } from "./component-meta";
3
7
  import { type defaultTag, displayVarNamespace } from "./code";
4
8
  import { props } from "./__generated__/code.props";
5
- import type { Style, StyleValue } from "@webstudio-is/css-data";
6
9
  import { code } from "../css/normalize";
7
10
 
8
- const display: StyleValue = {
9
- type: "var",
10
- value: displayVarNamespace,
11
- fallbacks: [
12
- {
13
- type: "keyword",
14
- value: "inline-block",
15
- },
16
- ],
17
- };
18
-
19
11
  const presetStyle = {
20
- code: {
12
+ code: [
21
13
  ...code,
22
- display,
23
- paddingLeft: {
24
- type: "unit",
25
- value: 0.2,
26
- unit: "em",
14
+ {
15
+ property: "display",
16
+ value: {
17
+ type: "var",
18
+ value: displayVarNamespace,
19
+ fallbacks: [{ type: "keyword", value: "inline-block" }],
20
+ },
27
21
  },
28
- paddingRight: {
29
- type: "unit",
30
- value: 0.2,
31
- unit: "em",
22
+ {
23
+ property: "paddingLeft",
24
+ value: { type: "unit", value: 0.2, unit: "em" },
32
25
  },
33
- backgroundColor: {
34
- type: "rgb",
35
- r: 238,
36
- g: 238,
37
- b: 238,
38
- alpha: 1,
26
+ {
27
+ property: "paddingRight",
28
+ value: { type: "unit", value: 0.2, unit: "em" },
39
29
  },
40
- },
41
- } as const satisfies Record<typeof defaultTag, Style>;
30
+ {
31
+ property: "backgroundColor",
32
+ value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 },
33
+ },
34
+ ],
35
+ } satisfies PresetStyle<typeof defaultTag>;
42
36
 
43
37
  export const meta: WsComponentMeta = {
44
38
  category: "general",
@@ -46,7 +40,7 @@ export const meta: WsComponentMeta = {
46
40
  label: "Code",
47
41
  Icon: CodeIcon,
48
42
  presetStyle,
49
- children: ["Code you can edit"],
43
+ children: [{ type: "text", value: "Code you can edit" }],
50
44
  };
51
45
 
52
46
  export const propsMeta: WsComponentPropsMeta = {
package/src/components/component-meta.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import { z } from "zod";
2
2
  import type { FunctionComponent } from "react";
3
3
  import type { IconProps } from "@webstudio-is/icons";
4
- import type { Style } from "@webstudio-is/css-data";
5
4
  import { PropMeta } from "@webstudio-is/generate-arg-types";
6
5
  import type { htmlTags as HtmlTags } from "html-tags";
6
+ import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
7
7
 
8
- type PresetStyle = Partial<Record<HtmlTags, Style>>;
8
+ export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<
9
+ Record<Tag, EmbedTemplateStyleDecl[]>
10
+ >;
9
11
 
10
12
  // props are separated from the rest of the meta
11
13
  // so they can be exported separately and potentially tree-shaken
@@ -48,7 +50,7 @@ const WsComponentMeta = z.object({
48
50
  Icon: z.function(),
49
51
  presetStyle: z.optional(z.any()),
50
52
  states: z.optional(z.array(ComponentState)),
51
- children: z.optional(z.array(z.string())),
53
+ children: z.optional(WsEmbedTemplate),
52
54
  });
53
55
 
54
56
  export type WsComponentMeta = Omit<
package/src/components/form.ws.tsx CHANGED
@@ -1,20 +1,22 @@
1
- import type { Style } from "@webstudio-is/css-data";
2
1
  import { FormIcon } from "@webstudio-is/icons";
3
2
  import { form } from "../css/normalize";
4
- import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
3
+ import type {
4
+ PresetStyle,
5
+ WsComponentMeta,
6
+ WsComponentPropsMeta,
7
+ } from "./component-meta";
5
8
  import type { defaultTag } from "./form";
6
9
  import { props } from "./__generated__/form.props";
7
10
 
8
11
  const presetStyle = {
9
- form: {
12
+ form: [
10
13
  ...form,
11
- minHeight: {
12
- type: "unit",
13
- unit: "px",
14
- value: 20,
14
+ {
15
+ property: "minHeight",
16
+ value: { type: "unit", unit: "px", value: 20 },
15
17
  },
16
- },
17
- } as const satisfies Record<typeof defaultTag, Style>;
18
+ ],
19
+ } satisfies PresetStyle<typeof defaultTag>;
18
20
 
19
21
  export const meta: WsComponentMeta = {
20
22
  category: "forms",
@@ -22,6 +24,14 @@ export const meta: WsComponentMeta = {
22
24
  label: "Form",
23
25
  Icon: FormIcon,
24
26
  presetStyle,
27
+ children: [
28
+ { type: "instance", component: "Input", children: [] },
29
+ {
30
+ type: "instance",
31
+ component: "Button",
32
+ children: [{ type: "text", value: "Submit" }],
33
+ },
34
+ ],
25
35
  };
26
36
 
27
37
  export const propsMeta: WsComponentPropsMeta = {