@webstudio-is/react-sdk 0.49.0 → 0.50.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 (143) hide show
  1. package/lib/app/custom-components/image.js +9 -9
  2. package/lib/app/custom-components/shared/remix-link.js +9 -10
  3. package/lib/app/handle-request.server.js +1 -4
  4. package/lib/app/root.js +11 -29
  5. package/lib/cjs/app/custom-components/image.cjs +9 -9
  6. package/lib/cjs/app/custom-components/shared/remix-link.cjs +9 -10
  7. package/lib/cjs/app/handle-request.server.cjs +1 -4
  8. package/lib/cjs/app/root.cjs +11 -29
  9. package/lib/cjs/components/__generated__/fragment.props.cjs +24 -0
  10. package/lib/cjs/components/__generated__/slot.props.cjs +24 -0
  11. package/lib/cjs/components/blockquote.ws.cjs +1 -0
  12. package/lib/cjs/components/body.cjs +1 -4
  13. package/lib/cjs/components/body.ws.cjs +1 -1
  14. package/lib/cjs/components/bold.cjs +1 -4
  15. package/lib/cjs/components/box.ws.cjs +1 -0
  16. package/lib/cjs/components/button.cjs +1 -6
  17. package/lib/cjs/components/button.ws.cjs +1 -0
  18. package/lib/cjs/components/code.ws.cjs +1 -0
  19. package/lib/cjs/components/{component-type.cjs → component-meta.cjs} +22 -4
  20. package/lib/cjs/components/components-utils.cjs +6 -0
  21. package/lib/cjs/components/components.cjs +4 -0
  22. package/lib/cjs/components/form.cjs +1 -4
  23. package/lib/cjs/components/form.ws.cjs +1 -0
  24. package/lib/cjs/components/fragment.cjs +29 -0
  25. package/lib/cjs/components/fragment.ws.cjs +32 -0
  26. package/lib/cjs/components/heading.ws.cjs +1 -0
  27. package/lib/cjs/components/image.cjs +8 -5
  28. package/lib/cjs/components/image.ws.cjs +4 -0
  29. package/lib/cjs/components/index.cjs +8 -0
  30. package/lib/cjs/components/input.cjs +1 -4
  31. package/lib/cjs/components/input.ws.cjs +1 -0
  32. package/lib/cjs/components/italic.cjs +1 -4
  33. package/lib/cjs/components/link-block.cjs +1 -4
  34. package/lib/cjs/components/link-block.ws.cjs +1 -0
  35. package/lib/cjs/components/link.cjs +1 -5
  36. package/lib/cjs/components/link.ws.cjs +1 -0
  37. package/lib/cjs/components/list-item.ws.cjs +1 -0
  38. package/lib/cjs/components/list.ws.cjs +1 -0
  39. package/lib/cjs/components/paragraph.cjs +1 -4
  40. package/lib/cjs/components/paragraph.ws.cjs +1 -0
  41. package/lib/cjs/components/rich-text-link.cjs +1 -4
  42. package/lib/cjs/components/rich-text-link.ws.cjs +2 -1
  43. package/lib/cjs/components/separator.ws.cjs +1 -0
  44. package/lib/cjs/components/slot.cjs +36 -0
  45. package/lib/cjs/components/slot.ws.cjs +34 -0
  46. package/lib/cjs/components/span.cjs +1 -4
  47. package/lib/cjs/components/subscript.cjs +1 -4
  48. package/lib/cjs/components/superscript.cjs +1 -4
  49. package/lib/cjs/components/text-block.cjs +1 -4
  50. package/lib/cjs/components/text-block.ws.cjs +1 -0
  51. package/lib/cjs/css/categories.cjs +6 -0
  52. package/lib/cjs/index.cjs +2 -0
  53. package/lib/cjs/pubsub/create.cjs +13 -0
  54. package/lib/cjs/tree/create-elements-tree.cjs +26 -22
  55. package/lib/cjs/tree/session-storage-polyfill.cjs +7 -4
  56. package/lib/cjs/tree/webstudio-component.cjs +5 -10
  57. package/lib/components/__generated__/fragment.props.js +4 -0
  58. package/lib/components/__generated__/slot.props.js +4 -0
  59. package/lib/components/blockquote.ws.js +1 -0
  60. package/lib/components/body.js +1 -4
  61. package/lib/components/body.ws.js +1 -1
  62. package/lib/components/bold.js +1 -4
  63. package/lib/components/box.ws.js +1 -0
  64. package/lib/components/button.js +1 -6
  65. package/lib/components/button.ws.js +1 -0
  66. package/lib/components/code.ws.js +1 -0
  67. package/lib/components/component-meta.js +34 -0
  68. package/lib/components/components-utils.js +2 -0
  69. package/lib/components/components.js +4 -0
  70. package/lib/components/form.js +1 -4
  71. package/lib/components/form.ws.js +1 -0
  72. package/lib/components/fragment.js +9 -0
  73. package/lib/components/fragment.ws.js +12 -0
  74. package/lib/components/heading.ws.js +1 -0
  75. package/lib/components/image.js +8 -5
  76. package/lib/components/image.ws.js +4 -0
  77. package/lib/components/index.js +8 -0
  78. package/lib/components/input.js +1 -4
  79. package/lib/components/input.ws.js +1 -0
  80. package/lib/components/italic.js +1 -4
  81. package/lib/components/link-block.js +1 -4
  82. package/lib/components/link-block.ws.js +1 -0
  83. package/lib/components/link.js +1 -5
  84. package/lib/components/link.ws.js +1 -0
  85. package/lib/components/list-item.ws.js +1 -0
  86. package/lib/components/list.ws.js +1 -0
  87. package/lib/components/paragraph.js +1 -4
  88. package/lib/components/paragraph.ws.js +1 -0
  89. package/lib/components/rich-text-link.js +1 -4
  90. package/lib/components/rich-text-link.ws.js +2 -1
  91. package/lib/components/separator.ws.js +1 -0
  92. package/lib/components/slot.js +16 -0
  93. package/lib/components/slot.ws.js +14 -0
  94. package/lib/components/span.js +1 -4
  95. package/lib/components/subscript.js +1 -4
  96. package/lib/components/superscript.js +1 -4
  97. package/lib/components/text-block.js +1 -4
  98. package/lib/components/text-block.ws.js +1 -0
  99. package/lib/css/categories.js +6 -0
  100. package/lib/index.js +4 -0
  101. package/lib/pubsub/create.js +9 -0
  102. package/lib/tree/create-elements-tree.js +26 -22
  103. package/lib/tree/session-storage-polyfill.js +7 -4
  104. package/lib/tree/webstudio-component.js +5 -10
  105. package/package.json +12 -16
  106. package/src/app/custom-components/index.ts +1 -1
  107. package/src/components/__generated__/fragment.props.ts +3 -0
  108. package/src/components/__generated__/slot.props.ts +3 -0
  109. package/src/components/blockquote.ws.tsx +2 -1
  110. package/src/components/body.ws.tsx +2 -2
  111. package/src/components/bold.ws.tsx +1 -1
  112. package/src/components/box.ws.ts +2 -1
  113. package/src/components/button.ws.tsx +2 -1
  114. package/src/components/code.ws.tsx +2 -1
  115. package/src/components/{component-type.ts → component-meta.ts} +21 -23
  116. package/src/components/components-utils.ts +4 -0
  117. package/src/components/components.ts +2 -0
  118. package/src/components/form.ws.tsx +2 -1
  119. package/src/components/fragment.tsx +11 -0
  120. package/src/components/fragment.ws.ts +11 -0
  121. package/src/components/heading.ws.tsx +2 -1
  122. package/src/components/image.ws.tsx +2 -1
  123. package/src/components/index.ts +11 -1
  124. package/src/components/input.ws.tsx +2 -1
  125. package/src/components/italic.ws.tsx +1 -1
  126. package/src/components/link-block.ws.tsx +2 -1
  127. package/src/components/link.ws.tsx +2 -1
  128. package/src/components/list-item.ws.tsx +2 -1
  129. package/src/components/list.ws.tsx +2 -1
  130. package/src/components/paragraph.ws.tsx +2 -1
  131. package/src/components/rich-text-link.ws.tsx +4 -2
  132. package/src/components/separator.ws.tsx +2 -1
  133. package/src/components/slot.stories.tsx +16 -0
  134. package/src/components/slot.tsx +17 -0
  135. package/src/components/slot.ws.ts +13 -0
  136. package/src/components/span.ws.tsx +1 -1
  137. package/src/components/subscript.ws.tsx +1 -1
  138. package/src/components/superscript.ws.tsx +1 -1
  139. package/src/components/text-block.ws.tsx +2 -1
  140. package/src/index.ts +5 -4
  141. package/src/tree/create-elements-tree.tsx +24 -10
  142. package/src/tree/webstudio-component.tsx +1 -0
  143. package/lib/components/component-type.js +0 -20
package/lib/app/custom-components/image.js CHANGED
@@ -28,18 +28,18 @@ const Image = forwardRef(
28
28
  src = asset.path;
29
29
  }
30
30
  if (asset == null || loader == null) {
31
- return /* @__PURE__ */ jsx(SdkImage, {
31
+ return /* @__PURE__ */ jsx(SdkImage, { ...props, src, ref }, src);
32
+ }
33
+ return /* @__PURE__ */ jsx(
34
+ WebstudioImage,
35
+ {
32
36
  ...props,
37
+ loader,
33
38
  src,
34
39
  ref
35
- }, src);
36
- }
37
- return /* @__PURE__ */ jsx(WebstudioImage, {
38
- ...props,
39
- loader,
40
- src,
41
- ref
42
- }, src);
40
+ },
41
+ src
42
+ );
43
43
  }
44
44
  );
45
45
  Image.displayName = "Image";
package/lib/app/custom-components/shared/remix-link.js CHANGED
@@ -15,17 +15,16 @@ const wrapLinkComponent = (BaseLink) => {
15
15
  const isAbsolute = isAbsoluteUrl(href);
16
16
  const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
17
17
  if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
18
- return /* @__PURE__ */ jsx(BaseLink, {
19
- ...props,
20
- href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
21
- ref
22
- });
18
+ return /* @__PURE__ */ jsx(
19
+ BaseLink,
20
+ {
21
+ ...props,
22
+ href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
23
+ ref
24
+ }
25
+ );
23
26
  }
24
- return /* @__PURE__ */ jsx(Link, {
25
- ...props,
26
- to: href,
27
- ref
28
- });
27
+ return /* @__PURE__ */ jsx(Link, { ...props, to: href, ref });
29
28
  });
30
29
  Component.displayName = BaseLink.displayName;
31
30
  return Component;
package/lib/app/handle-request.server.js CHANGED
@@ -3,10 +3,7 @@ import { renderToString } from "react-dom/server";
3
3
  import { RemixServer } from "@remix-run/react";
4
4
  const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
5
5
  const markup = renderToString(
6
- /* @__PURE__ */ jsx(RemixServer, {
7
- context: remixContext,
8
- url: request.url
9
- })
6
+ /* @__PURE__ */ jsx(RemixServer, { context: remixContext, url: request.url })
10
7
  );
11
8
  responseHeaders.set("Content-Type", "text/html");
12
9
  return new Response(`<!DOCTYPE html>${markup}`, {
package/lib/app/root.js CHANGED
@@ -3,35 +3,17 @@ import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
3
3
  const Root = ({
4
4
  Outlet = DefaultOutlet
5
5
  }) => {
6
- return /* @__PURE__ */ jsxs("html", {
7
- lang: "en",
8
- children: [
9
- /* @__PURE__ */ jsxs("head", {
10
- children: [
11
- /* @__PURE__ */ jsx("meta", {
12
- charSet: "utf-8"
13
- }),
14
- /* @__PURE__ */ jsx("meta", {
15
- name: "viewport",
16
- content: "width=device-width,initial-scale=1"
17
- }),
18
- /* @__PURE__ */ jsx("link", {
19
- rel: "icon",
20
- href: "/favicon.ico",
21
- type: "image/x-icon"
22
- }),
23
- /* @__PURE__ */ jsx("link", {
24
- rel: "shortcut icon",
25
- href: "/favicon.ico",
26
- type: "image/x-icon"
27
- }),
28
- /* @__PURE__ */ jsx(Meta, {}),
29
- /* @__PURE__ */ jsx(Links, {})
30
- ]
31
- }),
32
- /* @__PURE__ */ jsx(Outlet, {})
33
- ]
34
- });
6
+ return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
7
+ /* @__PURE__ */ jsxs("head", { children: [
8
+ /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
9
+ /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
10
+ /* @__PURE__ */ jsx("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }),
11
+ /* @__PURE__ */ jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }),
12
+ /* @__PURE__ */ jsx(Meta, {}),
13
+ /* @__PURE__ */ jsx(Links, {})
14
+ ] }),
15
+ /* @__PURE__ */ jsx(Outlet, {})
16
+ ] });
35
17
  };
36
18
  export {
37
19
  Root
package/lib/cjs/app/custom-components/image.cjs CHANGED
@@ -48,18 +48,18 @@ const Image = (0, import_react.forwardRef)(
48
48
  src = asset.path;
49
49
  }
50
50
  if (asset == null || loader == null) {
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, {
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, { ...props, src, ref }, src);
52
+ }
53
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
+ import_image.Image,
55
+ {
52
56
  ...props,
57
+ loader,
53
58
  src,
54
59
  ref
55
- }, src);
56
- }
57
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.Image, {
58
- ...props,
59
- loader,
60
- src,
61
- ref
62
- }, src);
60
+ },
61
+ src
62
+ );
63
63
  }
64
64
  );
65
65
  Image.displayName = "Image";
package/lib/cjs/app/custom-components/shared/remix-link.cjs CHANGED
@@ -38,17 +38,16 @@ const wrapLinkComponent = (BaseLink) => {
38
38
  const isAbsolute = isAbsoluteUrl(href);
39
39
  const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
40
40
  if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
41
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, {
42
- ...props,
43
- href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
44
- ref
45
- });
41
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
42
+ BaseLink,
43
+ {
44
+ ...props,
45
+ href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
46
+ ref
47
+ }
48
+ );
46
49
  }
47
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, {
48
- ...props,
49
- to: href,
50
- ref
51
- });
50
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href, ref });
52
51
  });
53
52
  Component.displayName = BaseLink.displayName;
54
53
  return Component;
package/lib/cjs/app/handle-request.server.cjs CHANGED
@@ -26,10 +26,7 @@ var import_server = require("react-dom/server");
26
26
  var import_react = require("@remix-run/react");
27
27
  const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
28
28
  const markup = (0, import_server.renderToString)(
29
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.RemixServer, {
30
- context: remixContext,
31
- url: request.url
32
- })
29
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.RemixServer, { context: remixContext, url: request.url })
33
30
  );
34
31
  responseHeaders.set("Content-Type", "text/html");
35
32
  return new Response(`<!DOCTYPE html>${markup}`, {
package/lib/cjs/app/root.cjs CHANGED
@@ -26,33 +26,15 @@ var import_react = require("@remix-run/react");
26
26
  const Root = ({
27
27
  Outlet = import_react.Outlet
28
28
  }) => {
29
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", {
30
- lang: "en",
31
- children: [
32
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", {
33
- children: [
34
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", {
35
- charSet: "utf-8"
36
- }),
37
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", {
38
- name: "viewport",
39
- content: "width=device-width,initial-scale=1"
40
- }),
41
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", {
42
- rel: "icon",
43
- href: "/favicon.ico",
44
- type: "image/x-icon"
45
- }),
46
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", {
47
- rel: "shortcut icon",
48
- href: "/favicon.ico",
49
- type: "image/x-icon"
50
- }),
51
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Meta, {}),
52
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Links, {})
53
- ]
54
- }),
55
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Outlet, {})
56
- ]
57
- });
29
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", { lang: "en", children: [
30
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", { children: [
31
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { charSet: "utf-8" }),
32
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
33
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }),
34
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }),
35
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Meta, {}),
36
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Links, {})
37
+ ] }),
38
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Outlet, {})
39
+ ] });
58
40
  };
package/lib/cjs/components/__generated__/fragment.props.cjs ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var fragment_props_exports = {};
20
+ __export(fragment_props_exports, {
21
+ props: () => props
22
+ });
23
+ module.exports = __toCommonJS(fragment_props_exports);
24
+ const props = {};
package/lib/cjs/components/__generated__/slot.props.cjs ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var slot_props_exports = {};
20
+ __export(slot_props_exports, {
21
+ props: () => props
22
+ });
23
+ module.exports = __toCommonJS(slot_props_exports);
24
+ const props = {};
package/lib/cjs/components/blockquote.ws.cjs CHANGED
@@ -63,6 +63,7 @@ const presetStyle = {
63
63
  }
64
64
  };
65
65
  const meta = {
66
+ category: "typography",
66
67
  type: "rich-text",
67
68
  label: "Blockquote",
68
69
  Icon: import_icons.BlockquoteIcon,
package/lib/cjs/components/body.cjs CHANGED
@@ -24,8 +24,5 @@ module.exports = __toCommonJS(body_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_react = require("react");
26
26
  const defaultTag = "body";
27
- const Body = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", {
28
- ...props,
29
- ref
30
- }));
27
+ const Body = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", { ...props, ref }));
31
28
  Body.displayName = "Body";
package/lib/cjs/components/body.ws.cjs CHANGED
@@ -74,7 +74,7 @@ const presetStyle = {
74
74
  }
75
75
  };
76
76
  const meta = {
77
- type: "body",
77
+ type: "container",
78
78
  label: "Body",
79
79
  Icon: import_icons.BodyIcon,
80
80
  presetStyle
package/lib/cjs/components/bold.cjs CHANGED
@@ -24,8 +24,5 @@ module.exports = __toCommonJS(bold_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_react = require("react");
26
26
  const defaultTag = "b";
27
- const Bold = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", {
28
- ...props,
29
- ref
30
- }));
27
+ const Bold = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { ...props, ref }));
31
28
  Bold.displayName = "Bold";
package/lib/cjs/components/box.ws.cjs CHANGED
@@ -31,6 +31,7 @@ const presetStyle = {
31
31
  }
32
32
  };
33
33
  const meta = {
34
+ category: "general",
34
35
  type: "container",
35
36
  label: "Box",
36
37
  Icon: import_icons.BoxIcon,
package/lib/cjs/components/button.cjs CHANGED
@@ -30,11 +30,6 @@ const Button = (0, import_react.forwardRef)(
30
30
  innerText = "Edit Inner Text in Properties",
31
31
  children,
32
32
  ...props
33
- }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
34
- type,
35
- ...props,
36
- ref,
37
- children: children ? children : innerText
38
- })
33
+ }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, ...props, ref, children: children ? children : innerText })
39
34
  );
40
35
  Button.displayName = "Button";
package/lib/cjs/components/button.ws.cjs CHANGED
@@ -25,6 +25,7 @@ module.exports = __toCommonJS(button_ws_exports);
25
25
  var import_icons = require("@webstudio-is/icons");
26
26
  var import_button = require("./__generated__/button.props");
27
27
  const meta = {
28
+ category: "forms",
28
29
  type: "container",
29
30
  label: "Button",
30
31
  Icon: import_icons.ButtonIcon
package/lib/cjs/components/code.ws.cjs CHANGED
@@ -54,6 +54,7 @@ const presetStyle = {
54
54
  }
55
55
  };
56
56
  const meta = {
57
+ category: "general",
57
58
  type: "rich-text",
58
59
  label: "Code",
59
60
  Icon: import_icons.CodeIcon,
package/lib/cjs/components/{component-type.cjs → component-meta.cjs} RENAMED
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
6
10
  var __copyProps = (to, from, except, desc) => {
7
11
  if (from && typeof from === "object" || typeof from === "function") {
8
12
  for (let key of __getOwnPropNames(from))
@@ -12,17 +16,31 @@ var __copyProps = (to, from, except, desc) => {
12
16
  return to;
13
17
  };
14
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
- var component_type_exports = {};
16
- module.exports = __toCommonJS(component_type_exports);
19
+ var component_meta_exports = {};
20
+ __export(component_meta_exports, {
21
+ componentCategories: () => componentCategories
22
+ });
23
+ module.exports = __toCommonJS(component_meta_exports);
17
24
  var import_zod = require("zod");
18
25
  var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
19
26
  const WsComponentPropsMeta = import_zod.z.object({
20
27
  props: import_zod.z.record(import_generate_arg_types.PropMeta),
21
28
  initialProps: import_zod.z.array(import_zod.z.string()).optional()
22
29
  });
30
+ const componentCategories = [
31
+ "general",
32
+ "typography",
33
+ "media",
34
+ "forms"
35
+ ];
23
36
  const WsComponentMeta = import_zod.z.object({
37
+ category: import_zod.z.enum(componentCategories).optional(),
38
+ // container - can accept other components with dnd
39
+ // control - usually form controls like inputs, without children
40
+ // embed - images, videos or other embeddable components, without children
41
+ // rich-text - editable text component
42
+ // rich-text-child - formatted text fragment, not listed in components list
24
43
  type: import_zod.z.enum([
25
- "body",
26
44
  "container",
27
45
  "control",
28
46
  "embed",
@@ -30,7 +48,7 @@ const WsComponentMeta = import_zod.z.object({
30
48
  "rich-text-child"
31
49
  ]),
32
50
  label: import_zod.z.string(),
33
- Icon: import_zod.z.any(),
51
+ Icon: import_zod.z.function(),
34
52
  presetStyle: import_zod.z.optional(import_zod.z.any()),
35
53
  children: import_zod.z.optional(import_zod.z.array(import_zod.z.string()))
36
54
  });
package/lib/cjs/components/components-utils.cjs CHANGED
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
18
18
  return to;
19
19
  };
20
20
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
21
25
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
26
  mod
23
27
  ));
@@ -32,6 +36,8 @@ module.exports = __toCommonJS(components_utils_exports);
32
36
  var components = __toESM(require("./components"), 1);
33
37
  var import_index = require("./index");
34
38
  const componentNames = Object.keys({
39
+ Slot: 1,
40
+ Fragment: 1,
35
41
  Box: 1,
36
42
  Body: 1,
37
43
  TextBlock: 1,
package/lib/cjs/components/components.cjs CHANGED
@@ -25,6 +25,7 @@ __export(components_exports, {
25
25
  Button: () => import_button.Button,
26
26
  Code: () => import_code.Code,
27
27
  Form: () => import_form.Form,
28
+ Fragment: () => import_fragment.Fragment,
28
29
  Heading: () => import_heading.Heading,
29
30
  Image: () => import_image.Image,
30
31
  Input: () => import_input.Input,
@@ -36,12 +37,15 @@ __export(components_exports, {
36
37
  Paragraph: () => import_paragraph.Paragraph,
37
38
  RichTextLink: () => import_rich_text_link.RichTextLink,
38
39
  Separator: () => import_separator.Separator,
40
+ Slot: () => import_slot.Slot,
39
41
  Span: () => import_span.Span,
40
42
  Subscript: () => import_subscript.Subscript,
41
43
  Superscript: () => import_superscript.Superscript,
42
44
  TextBlock: () => import_text_block.TextBlock
43
45
  });
44
46
  module.exports = __toCommonJS(components_exports);
47
+ var import_slot = require("./slot");
48
+ var import_fragment = require("./fragment");
45
49
  var import_body = require("./body");
46
50
  var import_box = require("./box");
47
51
  var import_text_block = require("./text-block");
package/lib/cjs/components/form.cjs CHANGED
@@ -24,8 +24,5 @@ module.exports = __toCommonJS(form_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_react = require("react");
26
26
  const defaultTag = "form";
27
- const Form = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
28
- ...props,
29
- ref
30
- }));
27
+ const Form = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { ...props, ref }));
31
28
  Form.displayName = "Form";
package/lib/cjs/components/form.ws.cjs CHANGED
@@ -36,6 +36,7 @@ const presetStyle = {
36
36
  }
37
37
  };
38
38
  const meta = {
39
+ category: "forms",
39
40
  type: "container",
40
41
  label: "Form",
41
42
  Icon: import_icons.FormIcon,
package/lib/cjs/components/fragment.cjs ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var fragment_exports = {};
20
+ __export(fragment_exports, {
21
+ Fragment: () => Fragment
22
+ });
23
+ module.exports = __toCommonJS(fragment_exports);
24
+ var import_jsx_runtime = require("react/jsx-runtime");
25
+ var import_react = require("react");
26
+ const Fragment = (0, import_react.forwardRef)((props, ref) => {
27
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, style: { display: "contents" } });
28
+ });
29
+ Fragment.displayName = "Fragment";
package/lib/cjs/components/fragment.ws.cjs ADDED
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var fragment_ws_exports = {};
20
+ __export(fragment_ws_exports, {
21
+ meta: () => meta,
22
+ propsMeta: () => propsMeta
23
+ });
24
+ module.exports = __toCommonJS(fragment_ws_exports);
25
+ const meta = {
26
+ type: "container",
27
+ label: "Fragment",
28
+ Icon: () => null
29
+ };
30
+ const propsMeta = {
31
+ props: {}
32
+ };
package/lib/cjs/components/heading.ws.cjs CHANGED
@@ -25,6 +25,7 @@ module.exports = __toCommonJS(heading_ws_exports);
25
25
  var import_icons = require("@webstudio-is/icons");
26
26
  var import_heading = require("./__generated__/heading.props");
27
27
  const meta = {
28
+ category: "typography",
28
29
  type: "rich-text",
29
30
  label: "Heading",
30
31
  Icon: import_icons.HeadingIcon,
package/lib/cjs/components/image.cjs CHANGED
@@ -26,11 +26,14 @@ var import_react = require("react");
26
26
  const defaultTag = "img";
27
27
  const Image = (0, import_react.forwardRef)(
28
28
  (imageProps, ref) => {
29
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
30
- ...imageProps,
31
- src: imageProps.src || imagePlaceholderSvg,
32
- ref
33
- });
29
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
30
+ "img",
31
+ {
32
+ ...imageProps,
33
+ src: imageProps.src || imagePlaceholderSvg,
34
+ ref
35
+ }
36
+ );
34
37
  }
35
38
  );
36
39
  Image.defaultProps = {
package/lib/cjs/components/image.ws.cjs CHANGED
@@ -25,17 +25,21 @@ module.exports = __toCommonJS(image_ws_exports);
25
25
  var import_icons = require("@webstudio-is/icons");
26
26
  var import_image = require("./__generated__/image.props");
27
27
  const presetStyle = {
28
+ // Otherwise on new image insert onto canvas it can overfit screen size multiple times
28
29
  maxWidth: {
29
30
  type: "unit",
30
31
  unit: "%",
31
32
  value: 100
32
33
  },
34
+ // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
35
+ // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
33
36
  display: {
34
37
  type: "keyword",
35
38
  value: "block"
36
39
  }
37
40
  };
38
41
  const meta = {
42
+ category: "media",
39
43
  type: "embed",
40
44
  label: "Image",
41
45
  Icon: import_icons.ImageIcon,
package/lib/cjs/components/index.cjs CHANGED
@@ -27,6 +27,8 @@ __export(components_exports, {
27
27
  });
28
28
  module.exports = __toCommonJS(components_exports);
29
29
  var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
30
+ var import_slot = require("./slot.ws");
31
+ var import_fragment = require("./fragment.ws");
30
32
  var import_body = require("./body.ws");
31
33
  var import_box = require("./box.ws");
32
34
  var import_text_block = require("./text-block.ws");
@@ -49,6 +51,8 @@ var import_list = require("./list.ws");
49
51
  var import_list_item = require("./list-item.ws");
50
52
  var import_separator = require("./separator.ws");
51
53
  var import_code = require("./code.ws");
54
+ var import_slot2 = require("./slot.ws");
55
+ var import_fragment2 = require("./fragment.ws");
52
56
  var import_body2 = require("./body.ws");
53
57
  var import_box2 = require("./box.ws");
54
58
  var import_text_block2 = require("./text-block.ws");
@@ -72,6 +76,8 @@ var import_list_item2 = require("./list-item.ws");
72
76
  var import_separator2 = require("./separator.ws");
73
77
  var import_code2 = require("./code.ws");
74
78
  const defaultMetas = {
79
+ Slot: import_slot.meta,
80
+ Fragment: import_fragment.meta,
75
81
  Box: import_box.meta,
76
82
  Body: import_body.meta,
77
83
  TextBlock: import_text_block.meta,
@@ -107,6 +113,8 @@ const registerComponentMetas = (overrides) => {
107
113
  currentMetas = result;
108
114
  };
109
115
  const defaultPropsMetasRaw = {
116
+ Slot: import_slot2.propsMeta,
117
+ Fragment: import_fragment2.propsMeta,
110
118
  Box: import_box2.propsMeta,
111
119
  Body: import_body2.propsMeta,
112
120
  TextBlock: import_text_block2.propsMeta,
package/lib/cjs/components/input.cjs CHANGED
@@ -24,8 +24,5 @@ module.exports = __toCommonJS(input_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_react = require("react");
26
26
  const defaultTag = "input";
27
- const Input = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
28
- ...props,
29
- ref
30
- }));
27
+ const Input = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...props, ref }));
31
28
  Input.displayName = "Input";