@webstudio-is/react-sdk 0.49.0 → 0.51.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 (165) hide show
  1. package/lib/app/custom-components/image.js +11 -13
  2. package/lib/app/custom-components/shared/remix-link.js +7 -24
  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 +10 -12
  6. package/lib/cjs/app/custom-components/shared/remix-link.cjs +6 -23
  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__/link-block.props.cjs +5 -5
  11. package/lib/cjs/components/__generated__/link.props.cjs +6 -6
  12. package/lib/cjs/components/__generated__/rich-text-link.props.cjs +5 -5
  13. package/lib/cjs/components/__generated__/slot.props.cjs +24 -0
  14. package/lib/cjs/components/blockquote.ws.cjs +1 -0
  15. package/lib/cjs/components/body.cjs +1 -4
  16. package/lib/cjs/components/body.ws.cjs +1 -1
  17. package/lib/cjs/components/bold.cjs +1 -4
  18. package/lib/cjs/components/box.ws.cjs +1 -0
  19. package/lib/cjs/components/button.cjs +1 -6
  20. package/lib/cjs/components/button.ws.cjs +1 -0
  21. package/lib/cjs/components/code.ws.cjs +1 -0
  22. package/lib/cjs/components/{component-type.cjs → component-meta.cjs} +22 -4
  23. package/lib/cjs/components/components-utils.cjs +6 -0
  24. package/lib/cjs/components/components.cjs +4 -0
  25. package/lib/cjs/components/form.cjs +1 -4
  26. package/lib/cjs/components/form.ws.cjs +1 -0
  27. package/lib/cjs/components/fragment.cjs +29 -0
  28. package/lib/cjs/components/fragment.ws.cjs +32 -0
  29. package/lib/cjs/components/heading.ws.cjs +1 -0
  30. package/lib/cjs/components/image.cjs +8 -5
  31. package/lib/cjs/components/image.ws.cjs +4 -0
  32. package/lib/cjs/components/index.cjs +8 -0
  33. package/lib/cjs/components/input.cjs +1 -4
  34. package/lib/cjs/components/input.ws.cjs +1 -0
  35. package/lib/cjs/components/italic.cjs +1 -4
  36. package/lib/cjs/components/link-block.cjs +1 -4
  37. package/lib/cjs/components/link-block.ws.cjs +7 -2
  38. package/lib/cjs/components/link.cjs +10 -7
  39. package/lib/cjs/components/link.ws.cjs +9 -1
  40. package/lib/cjs/components/list-item.ws.cjs +1 -0
  41. package/lib/cjs/components/list.ws.cjs +1 -0
  42. package/lib/cjs/components/paragraph.cjs +1 -4
  43. package/lib/cjs/components/paragraph.ws.cjs +1 -0
  44. package/lib/cjs/components/rich-text-link.cjs +1 -4
  45. package/lib/cjs/components/rich-text-link.ws.cjs +7 -3
  46. package/lib/cjs/components/separator.ws.cjs +1 -0
  47. package/lib/cjs/components/slot.cjs +36 -0
  48. package/lib/cjs/components/slot.ws.cjs +34 -0
  49. package/lib/cjs/components/span.cjs +1 -4
  50. package/lib/cjs/components/subscript.cjs +1 -4
  51. package/lib/cjs/components/superscript.cjs +1 -4
  52. package/lib/cjs/components/text-block.cjs +1 -4
  53. package/lib/cjs/components/text-block.ws.cjs +1 -0
  54. package/lib/cjs/context.cjs +2 -1
  55. package/lib/cjs/css/categories.cjs +6 -0
  56. package/lib/cjs/index.cjs +2 -0
  57. package/lib/cjs/props.cjs +43 -2
  58. package/lib/cjs/pubsub/create.cjs +13 -0
  59. package/lib/cjs/tree/create-elements-tree.cjs +33 -22
  60. package/lib/cjs/tree/root.cjs +1 -0
  61. package/lib/cjs/tree/session-storage-polyfill.cjs +7 -4
  62. package/lib/cjs/tree/webstudio-component.cjs +5 -10
  63. package/lib/components/__generated__/fragment.props.js +4 -0
  64. package/lib/components/__generated__/link-block.props.js +5 -5
  65. package/lib/components/__generated__/link.props.js +6 -6
  66. package/lib/components/__generated__/rich-text-link.props.js +5 -5
  67. package/lib/components/__generated__/slot.props.js +4 -0
  68. package/lib/components/blockquote.ws.js +1 -0
  69. package/lib/components/body.js +1 -4
  70. package/lib/components/body.ws.js +1 -1
  71. package/lib/components/bold.js +1 -4
  72. package/lib/components/box.ws.js +1 -0
  73. package/lib/components/button.js +1 -6
  74. package/lib/components/button.ws.js +1 -0
  75. package/lib/components/code.ws.js +1 -0
  76. package/lib/components/component-meta.js +34 -0
  77. package/lib/components/components-utils.js +2 -0
  78. package/lib/components/components.js +4 -0
  79. package/lib/components/form.js +1 -4
  80. package/lib/components/form.ws.js +1 -0
  81. package/lib/components/fragment.js +9 -0
  82. package/lib/components/fragment.ws.js +12 -0
  83. package/lib/components/heading.ws.js +1 -0
  84. package/lib/components/image.js +8 -5
  85. package/lib/components/image.ws.js +4 -0
  86. package/lib/components/index.js +8 -0
  87. package/lib/components/input.js +1 -4
  88. package/lib/components/input.ws.js +1 -0
  89. package/lib/components/italic.js +1 -4
  90. package/lib/components/link-block.js +1 -4
  91. package/lib/components/link-block.ws.js +7 -2
  92. package/lib/components/link.js +10 -7
  93. package/lib/components/link.ws.js +9 -1
  94. package/lib/components/list-item.ws.js +1 -0
  95. package/lib/components/list.ws.js +1 -0
  96. package/lib/components/paragraph.js +1 -4
  97. package/lib/components/paragraph.ws.js +1 -0
  98. package/lib/components/rich-text-link.js +1 -4
  99. package/lib/components/rich-text-link.ws.js +8 -4
  100. package/lib/components/separator.ws.js +1 -0
  101. package/lib/components/slot.js +16 -0
  102. package/lib/components/slot.ws.js +14 -0
  103. package/lib/components/span.js +1 -4
  104. package/lib/components/subscript.js +1 -4
  105. package/lib/components/superscript.js +1 -4
  106. package/lib/components/text-block.js +1 -4
  107. package/lib/components/text-block.ws.js +1 -0
  108. package/lib/context.js +2 -1
  109. package/lib/css/categories.js +6 -0
  110. package/lib/index.js +4 -0
  111. package/lib/props.js +43 -2
  112. package/lib/pubsub/create.js +9 -0
  113. package/lib/tree/create-elements-tree.js +33 -22
  114. package/lib/tree/root.js +1 -0
  115. package/lib/tree/session-storage-polyfill.js +7 -4
  116. package/lib/tree/webstudio-component.js +5 -10
  117. package/package.json +12 -16
  118. package/src/app/custom-components/image.tsx +4 -7
  119. package/src/app/custom-components/index.ts +1 -1
  120. package/src/app/custom-components/shared/remix-link.tsx +12 -48
  121. package/src/components/__generated__/fragment.props.ts +3 -0
  122. package/src/components/__generated__/link-block.props.ts +5 -5
  123. package/src/components/__generated__/link.props.ts +6 -6
  124. package/src/components/__generated__/rich-text-link.props.ts +5 -5
  125. package/src/components/__generated__/slot.props.ts +3 -0
  126. package/src/components/blockquote.ws.tsx +2 -1
  127. package/src/components/body.ws.tsx +2 -2
  128. package/src/components/bold.ws.tsx +1 -1
  129. package/src/components/box.ws.ts +2 -1
  130. package/src/components/button.ws.tsx +2 -1
  131. package/src/components/code.ws.tsx +2 -1
  132. package/src/components/{component-type.ts → component-meta.ts} +21 -23
  133. package/src/components/components-utils.ts +4 -0
  134. package/src/components/components.ts +2 -0
  135. package/src/components/form.ws.tsx +2 -1
  136. package/src/components/fragment.tsx +11 -0
  137. package/src/components/fragment.ws.ts +11 -0
  138. package/src/components/heading.ws.tsx +2 -1
  139. package/src/components/image.ws.tsx +2 -1
  140. package/src/components/index.ts +11 -1
  141. package/src/components/input.ws.tsx +2 -1
  142. package/src/components/italic.ws.tsx +1 -1
  143. package/src/components/link-block.ws.tsx +8 -3
  144. package/src/components/link.tsx +12 -6
  145. package/src/components/link.ws.tsx +10 -2
  146. package/src/components/list-item.ws.tsx +2 -1
  147. package/src/components/list.ws.tsx +2 -1
  148. package/src/components/paragraph.ws.tsx +2 -1
  149. package/src/components/rich-text-link.ws.tsx +10 -5
  150. package/src/components/separator.ws.tsx +2 -1
  151. package/src/components/slot.stories.tsx +16 -0
  152. package/src/components/slot.tsx +17 -0
  153. package/src/components/slot.ws.ts +13 -0
  154. package/src/components/span.ws.tsx +1 -1
  155. package/src/components/subscript.ws.tsx +1 -1
  156. package/src/components/superscript.ws.tsx +1 -1
  157. package/src/components/text-block.ws.tsx +2 -1
  158. package/src/context.tsx +3 -1
  159. package/src/index.ts +5 -4
  160. package/src/props.test.ts +95 -0
  161. package/src/props.ts +59 -3
  162. package/src/tree/create-elements-tree.tsx +30 -12
  163. package/src/tree/root.ts +2 -0
  164. package/src/tree/webstudio-component.tsx +1 -0
  165. package/lib/components/component-type.js +0 -20
package/lib/app/custom-components/image.js CHANGED
@@ -5,14 +5,12 @@ import {
5
5
  } from "react";
6
6
  import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
7
7
  import { Image as SdkImage } from "../../components/image";
8
- import { usePropAsset } from "../../props";
9
- import { idAttribute } from "../../tree/webstudio-component";
8
+ import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
10
9
  import { getParams } from "../params";
11
10
  const defaultTag = "img";
12
11
  const Image = forwardRef(
13
12
  (props, ref) => {
14
- const componentId = props[idAttribute];
15
- const asset = usePropAsset(componentId, "src");
13
+ const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
16
14
  const params = getParams();
17
15
  const loader = useMemo(() => {
18
16
  if (asset === void 0) {
@@ -28,18 +26,18 @@ const Image = forwardRef(
28
26
  src = asset.path;
29
27
  }
30
28
  if (asset == null || loader == null) {
31
- return /* @__PURE__ */ jsx(SdkImage, {
29
+ return /* @__PURE__ */ jsx(SdkImage, { ...props, src, ref }, src);
30
+ }
31
+ return /* @__PURE__ */ jsx(
32
+ WebstudioImage,
33
+ {
32
34
  ...props,
35
+ loader,
33
36
  src,
34
37
  ref
35
- }, src);
36
- }
37
- return /* @__PURE__ */ jsx(WebstudioImage, {
38
- ...props,
39
- loader,
40
- src,
41
- ref
42
- }, src);
38
+ },
39
+ src
40
+ );
43
41
  }
44
42
  );
45
43
  Image.displayName = "Image";
package/lib/app/custom-components/shared/remix-link.js CHANGED
@@ -1,31 +1,14 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { Link } from "@remix-run/react";
2
+ import { Link as RemixLink } from "@remix-run/react";
3
3
  import { forwardRef } from "react";
4
- const isAbsoluteUrl = (href) => {
5
- try {
6
- new URL(href);
7
- return true;
8
- } catch {
9
- return false;
10
- }
11
- };
12
- const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
4
+ import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
13
5
  const wrapLinkComponent = (BaseLink) => {
14
- const Component = forwardRef(({ href = "", ...props }, ref) => {
15
- const isAbsolute = isAbsoluteUrl(href);
16
- const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
17
- if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
18
- return /* @__PURE__ */ jsx(BaseLink, {
19
- ...props,
20
- href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
21
- ref
22
- });
6
+ const Component = forwardRef((props, ref) => {
7
+ const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
8
+ if (typeof href === "string" || href === void 0) {
9
+ return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
23
10
  }
24
- return /* @__PURE__ */ jsx(Link, {
25
- ...props,
26
- to: href,
27
- ref
28
- });
11
+ return /* @__PURE__ */ jsx(RemixLink, { ...props, to: href.path, ref });
29
12
  });
30
13
  Component.displayName = BaseLink.displayName;
31
14
  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
@@ -26,13 +26,11 @@ var import_react = require("react");
26
26
  var import_image = require("@webstudio-is/image");
27
27
  var import_image2 = require("../../components/image");
28
28
  var import_props = require("../../props");
29
- var import_webstudio_component = require("../../tree/webstudio-component");
30
29
  var import_params = require("../params");
31
30
  const defaultTag = "img";
32
31
  const Image = (0, import_react.forwardRef)(
33
32
  (props, ref) => {
34
- const componentId = props[import_webstudio_component.idAttribute];
35
- const asset = (0, import_props.usePropAsset)(componentId, "src");
33
+ const asset = (0, import_props.usePropAsset)((0, import_props.getInstanceIdFromComponentProps)(props), "src");
36
34
  const params = (0, import_params.getParams)();
37
35
  const loader = (0, import_react.useMemo)(() => {
38
36
  if (asset === void 0) {
@@ -48,18 +46,18 @@ const Image = (0, import_react.forwardRef)(
48
46
  src = asset.path;
49
47
  }
50
48
  if (asset == null || loader == null) {
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, {
49
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, { ...props, src, ref }, src);
50
+ }
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
52
+ import_image.Image,
53
+ {
52
54
  ...props,
55
+ loader,
53
56
  src,
54
57
  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);
58
+ },
59
+ src
60
+ );
63
61
  }
64
62
  );
65
63
  Image.displayName = "Image";
package/lib/cjs/app/custom-components/shared/remix-link.cjs CHANGED
@@ -24,31 +24,14 @@ module.exports = __toCommonJS(remix_link_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_react = require("@remix-run/react");
26
26
  var import_react2 = require("react");
27
- const isAbsoluteUrl = (href) => {
28
- try {
29
- new URL(href);
30
- return true;
31
- } catch {
32
- return false;
33
- }
34
- };
35
- const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
27
+ var import_props = require("../../../props");
36
28
  const wrapLinkComponent = (BaseLink) => {
37
- const Component = (0, import_react2.forwardRef)(({ href = "", ...props }, ref) => {
38
- const isAbsolute = isAbsoluteUrl(href);
39
- const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
40
- if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
41
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, {
42
- ...props,
43
- href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
44
- ref
45
- });
29
+ const Component = (0, import_react2.forwardRef)((props, ref) => {
30
+ const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
31
+ if (typeof href === "string" || href === void 0) {
32
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
46
33
  }
47
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, {
48
- ...props,
49
- to: href,
50
- ref
51
- });
34
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href.path, ref });
52
35
  });
53
36
  Component.displayName = BaseLink.displayName;
54
37
  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__/link-block.props.cjs CHANGED
@@ -25,18 +25,18 @@ const props = {
25
25
  slot: { required: false, control: "text", type: "string" },
26
26
  style: { required: false, control: "text", type: "string" },
27
27
  title: { required: false, control: "text", type: "string" },
28
- download: { required: false, control: "text", type: "string" },
29
28
  href: { required: false, control: "text", type: "string" },
30
- hrefLang: { required: false, control: "text", type: "string" },
31
- media: { required: false, control: "text", type: "string" },
32
- ping: { required: false, control: "text", type: "string" },
33
- rel: { required: false, control: "text", type: "string" },
34
29
  target: {
35
30
  required: false,
36
31
  control: "select",
37
32
  type: "string",
38
33
  options: ["_self", "_blank", "_parent", "_top"]
39
34
  },
35
+ download: { required: false, control: "text", type: "string" },
36
+ hrefLang: { required: false, control: "text", type: "string" },
37
+ media: { required: false, control: "text", type: "string" },
38
+ ping: { required: false, control: "text", type: "string" },
39
+ rel: { required: false, control: "text", type: "string" },
40
40
  type: { required: false, control: "text", type: "string" },
41
41
  referrerPolicy: {
42
42
  required: false,
package/lib/cjs/components/__generated__/link.props.cjs CHANGED
@@ -25,18 +25,18 @@ const props = {
25
25
  slot: { required: false, control: "text", type: "string" },
26
26
  style: { required: false, control: "text", type: "string" },
27
27
  title: { required: false, control: "text", type: "string" },
28
- download: { required: false, control: "text", type: "string" },
29
- href: { required: false, control: "text", type: "string", defaultValue: "" },
30
- hrefLang: { required: false, control: "text", type: "string" },
31
- media: { required: false, control: "text", type: "string" },
32
- ping: { required: false, control: "text", type: "string" },
33
- rel: { required: false, control: "text", type: "string" },
28
+ href: { required: false, control: "text", type: "string" },
34
29
  target: {
35
30
  required: false,
36
31
  control: "select",
37
32
  type: "string",
38
33
  options: ["_self", "_blank", "_parent", "_top"]
39
34
  },
35
+ download: { required: false, control: "text", type: "string" },
36
+ hrefLang: { required: false, control: "text", type: "string" },
37
+ media: { required: false, control: "text", type: "string" },
38
+ ping: { required: false, control: "text", type: "string" },
39
+ rel: { required: false, control: "text", type: "string" },
40
40
  type: { required: false, control: "text", type: "string" },
41
41
  referrerPolicy: {
42
42
  required: false,
package/lib/cjs/components/__generated__/rich-text-link.props.cjs CHANGED
@@ -25,18 +25,18 @@ const props = {
25
25
  slot: { required: false, control: "text", type: "string" },
26
26
  style: { required: false, control: "text", type: "string" },
27
27
  title: { required: false, control: "text", type: "string" },
28
- download: { required: false, control: "text", type: "string" },
29
28
  href: { required: false, control: "text", type: "string" },
30
- hrefLang: { required: false, control: "text", type: "string" },
31
- media: { required: false, control: "text", type: "string" },
32
- ping: { required: false, control: "text", type: "string" },
33
- rel: { required: false, control: "text", type: "string" },
34
29
  target: {
35
30
  required: false,
36
31
  control: "select",
37
32
  type: "string",
38
33
  options: ["_self", "_blank", "_parent", "_top"]
39
34
  },
35
+ download: { required: false, control: "text", type: "string" },
36
+ hrefLang: { required: false, control: "text", type: "string" },
37
+ media: { required: false, control: "text", type: "string" },
38
+ ping: { required: false, control: "text", type: "string" },
39
+ rel: { required: false, control: "text", type: "string" },
40
40
  type: { required: false, control: "text", type: "string" },
41
41
  referrerPolicy: {
42
42
  required: false,
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";