@uniformdev/canvas-next-rsc 19.173.1-alpha.17 → 19.173.2-alpha.258

package/dist/component.js

@@ -48,56 +48,71 @@ var DefaultNotImplementedComponent = ({ component }) => {
 };
 
 // src/components/UniformRichText.tsx
-var import_richtext5 = require("@uniformdev/richtext");
-var import_react11 = __toESM(require("react"));
+var import_canvas = require("@uniformdev/canvas");
+var import_richtext6 = require("@uniformdev/richtext");
+var import_react13 = __toESM(require("react"));
 
 // src/components/UniformRichTextNode.tsx
-var import_richtext4 = require("@uniformdev/richtext");
-var import_react10 = __toESM(require("react"));
+var import_richtext5 = require("@uniformdev/richtext");
+var import_react12 = __toESM(require("react"));
 
-// src/components/nodes/HeadingRichTextNode.tsx
+// src/components/nodes/AssetRichTextNode.tsx
 var import_react2 = __toESM(require("react"));
+var AssetRichTextNode = ({ node }) => {
+  var _a, _b;
+  const { __asset } = node;
+  if (__asset === void 0) {
+    return null;
+  }
+  if (__asset.type !== "image") {
+    return null;
+  }
+  return /* @__PURE__ */ import_react2.default.createElement("figure", null, /* @__PURE__ */ import_react2.default.createElement("img", { src: __asset.fields.url.value, alt: (_a = __asset.fields.title) == null ? void 0 : _a.value }), ((_b = __asset.fields.description) == null ? void 0 : _b.value) ? /* @__PURE__ */ import_react2.default.createElement("figcaption", null, __asset.fields.description.value) : null);
+};
+
+// src/components/nodes/HeadingRichTextNode.tsx
+var import_react3 = __toESM(require("react"));
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ import_react2.default.createElement(HTag, null, children);
+  return /* @__PURE__ */ import_react3.default.createElement(HTag, null, children);
 };
 
 // src/components/nodes/LinebreakRichTextNode.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ import_react3.default.createElement("br", null);
+  return /* @__PURE__ */ import_react4.default.createElement("br", null);
 };
 
 // src/components/nodes/LinkRichTextNode.tsx
 var import_richtext = require("@uniformdev/richtext");
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ import_react4.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
+  return /* @__PURE__ */ import_react5.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
 };
 
 // src/components/nodes/ListItemRichTextNode.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ import_react5.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ import_react6.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/nodes/ListRichTextNode.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ import_react6.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ import_react7.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/nodes/ParagraphRichTextNode.tsx
 var import_richtext2 = require("@uniformdev/richtext");
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     "p",
     {
       dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
@@ -107,25 +122,34 @@ var ParagraphRichTextNode = ({ children, node }) => {
   );
 };
 
+// src/components/nodes/TableCellRichTextNode.tsx
+var import_richtext3 = require("@uniformdev/richtext");
+var import_react9 = __toESM(require("react"));
+var TableCellRichTextNode = ({ children, node }) => {
+  const { headerState } = node;
+  const TableCellTag = (0, import_richtext3.getRichTextTagFromTableCellHeaderState)(headerState);
+  return /* @__PURE__ */ import_react9.default.createElement(TableCellTag, null, children);
+};
+
 // src/components/nodes/TabRichTextNode.tsx
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, "	");
+  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, "	");
 };
 
 // src/components/nodes/TextRichTextNode.tsx
-var import_richtext3 = require("@uniformdev/richtext");
-var import_react9 = __toESM(require("react"));
+var import_richtext4 = require("@uniformdev/richtext");
+var import_react11 = __toESM(require("react"));
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
-  const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
-  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react9.default.createElement(Tag, null, children), text) : text);
+  const tags = (0, import_richtext4.getRichTextTagsFromTextFormat)(format);
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react11.default.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichTextNode.tsx
 function UniformRichTextNode({ node, ...props }) {
   var _a;
-  if (!(0, import_richtext4.isRichTextNode)(node)) return null;
+  if (!(0, import_richtext5.isRichTextNode)(node)) return null;
   let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
   if (typeof NodeRenderer === "undefined") {
     NodeRenderer = resolveRichTextDefaultRenderer(node);
@@ -133,8 +157,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react10.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ import_react10.default.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react12.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ import_react12.default.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -143,26 +167,59 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ import_react10.default.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ import_react12.default.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ import_react10.default.createElement("pre", null, /* @__PURE__ */ import_react10.default.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ import_react12.default.createElement("pre", null, /* @__PURE__ */ import_react12.default.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, children)],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  [
+    "table",
+    ({ children }) => /* @__PURE__ */ import_react12.default.createElement("table", null, /* @__PURE__ */ import_react12.default.createElement("tbody", null, children))
+  ],
+  ["tablerow", ({ children }) => /* @__PURE__ */ import_react12.default.createElement("tr", null, children)],
+  ["tablecell", TableCellRichTextNode],
+  ["asset", AssetRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
 };
 
 // src/components/UniformRichText.tsx
-var UniformRichText = import_react11.default.forwardRef(function UniformRichText2({ parameterId, component, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
-  var _a;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
-  const value = parameter == null ? void 0 : parameter.value;
-  if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value)) return null;
-  return Tag === null ? /* @__PURE__ */ import_react11.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react11.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react11.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+var UniformRichText = import_react13.default.forwardRef(function UniformRichText2({
+  parameterId,
+  component,
+  resolveRichTextRenderer,
+  as: Tag = "div",
+  context,
+  placeholder,
+  ...props
+}, ref) {
+  var _a, _b;
+  const isContextualEditing = (_a = context == null ? void 0 : context.isContextualEditing) != null ? _a : false;
+  const parameter = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b[parameterId];
+  if (!parameter) {
+    return null;
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  const value = parameter.value;
+  if (!value || !(0, import_richtext6.isRichTextValue)(value)) return null;
+  if (!isContextualEditing && (0, import_richtext6.isRichTextValueConsideredEmpty)(value)) return null;
+  return Tag === null ? /* @__PURE__ */ import_react13.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react13.default.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...isContextualEditing ? {
+        [import_canvas.ATTRIBUTE_COMPONENT_ID]: component._id,
+        [import_canvas.ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [import_canvas.ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      } : {}
+    },
+    (0, import_richtext6.isRichTextValueConsideredEmpty)(value) ? /* @__PURE__ */ import_react13.default.createElement("p", null, /* @__PURE__ */ import_react13.default.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ import_react13.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformSlot.tsx
@@ -193,9 +250,9 @@ var UniformSlot = ({ data, slot, children }) => {
 
 // src/components/UniformText.tsx
 var import_core = require("@uniformdev/canvas-react/core");
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var UniformText = ({ context, ...rest }) => {
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(
     import_core.PureUniformText,
     {
       ...rest,

package/dist/component.mjs

@@ -6,58 +6,74 @@ var DefaultNotImplementedComponent = ({ component }) => {
 
 // src/components/UniformRichText.tsx
 import {
-  isRichTextValue,
-  isRichTextValueConsideredEmpty
-} from "@uniformdev/richtext";
-import React11 from "react";
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
+import { isRichTextValue, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
+import React13 from "react";
 
 // src/components/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React10 from "react";
+import React12 from "react";
 
-// src/components/nodes/HeadingRichTextNode.tsx
+// src/components/nodes/AssetRichTextNode.tsx
 import React2 from "react";
+var AssetRichTextNode = ({ node }) => {
+  var _a, _b;
+  const { __asset } = node;
+  if (__asset === void 0) {
+    return null;
+  }
+  if (__asset.type !== "image") {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement("figure", null, /* @__PURE__ */ React2.createElement("img", { src: __asset.fields.url.value, alt: (_a = __asset.fields.title) == null ? void 0 : _a.value }), ((_b = __asset.fields.description) == null ? void 0 : _b.value) ? /* @__PURE__ */ React2.createElement("figcaption", null, __asset.fields.description.value) : null);
+};
+
+// src/components/nodes/HeadingRichTextNode.tsx
+import React3 from "react";
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ React2.createElement(HTag, null, children);
+  return /* @__PURE__ */ React3.createElement(HTag, null, children);
 };
 
 // src/components/nodes/LinebreakRichTextNode.tsx
-import React3 from "react";
+import React4 from "react";
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ React3.createElement("br", null);
+  return /* @__PURE__ */ React4.createElement("br", null);
 };
 
 // src/components/nodes/LinkRichTextNode.tsx
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import React4 from "react";
+import React5 from "react";
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ React4.createElement("a", { href: linkParamValueToHref(link) }, children);
+  return /* @__PURE__ */ React5.createElement("a", { href: linkParamValueToHref(link) }, children);
 };
 
 // src/components/nodes/ListItemRichTextNode.tsx
-import React5 from "react";
+import React6 from "react";
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ React5.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ React6.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/nodes/ListRichTextNode.tsx
-import React6 from "react";
+import React7 from "react";
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ React6.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ React7.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/nodes/ParagraphRichTextNode.tsx
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import React7 from "react";
+import React8 from "react";
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -67,19 +83,28 @@ var ParagraphRichTextNode = ({ children, node }) => {
   );
 };
 
+// src/components/nodes/TableCellRichTextNode.tsx
+import { getRichTextTagFromTableCellHeaderState } from "@uniformdev/richtext";
+import React9 from "react";
+var TableCellRichTextNode = ({ children, node }) => {
+  const { headerState } = node;
+  const TableCellTag = getRichTextTagFromTableCellHeaderState(headerState);
+  return /* @__PURE__ */ React9.createElement(TableCellTag, null, children);
+};
+
 // src/components/nodes/TabRichTextNode.tsx
-import React8 from "react";
+import React10 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, "	");
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, "	");
 };
 
 // src/components/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React9 from "react";
+import React11 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React9.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React11.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichTextNode.tsx
@@ -93,8 +118,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React10.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React10.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React12.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React12.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -103,26 +128,59 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React10.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React12.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React10.createElement("pre", null, /* @__PURE__ */ React10.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React12.createElement("pre", null, /* @__PURE__ */ React12.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React10.createElement(React10.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React12.createElement(React12.Fragment, null, children)],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  [
+    "table",
+    ({ children }) => /* @__PURE__ */ React12.createElement("table", null, /* @__PURE__ */ React12.createElement("tbody", null, children))
+  ],
+  ["tablerow", ({ children }) => /* @__PURE__ */ React12.createElement("tr", null, children)],
+  ["tablecell", TableCellRichTextNode],
+  ["asset", AssetRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
 };
 
 // src/components/UniformRichText.tsx
-var UniformRichText = React11.forwardRef(function UniformRichText2({ parameterId, component, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
-  var _a;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
-  const value = parameter == null ? void 0 : parameter.value;
-  if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
-  return Tag === null ? /* @__PURE__ */ React11.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React11.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React11.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+var UniformRichText = React13.forwardRef(function UniformRichText2({
+  parameterId,
+  component,
+  resolveRichTextRenderer,
+  as: Tag = "div",
+  context,
+  placeholder,
+  ...props
+}, ref) {
+  var _a, _b;
+  const isContextualEditing = (_a = context == null ? void 0 : context.isContextualEditing) != null ? _a : false;
+  const parameter = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b[parameterId];
+  if (!parameter) {
+    return null;
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  const value = parameter.value;
+  if (!value || !isRichTextValue(value)) return null;
+  if (!isContextualEditing && isRichTextValueConsideredEmpty(value)) return null;
+  return Tag === null ? /* @__PURE__ */ React13.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React13.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...isContextualEditing ? {
+        [ATTRIBUTE_COMPONENT_ID]: component._id,
+        [ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      } : {}
+    },
+    isRichTextValueConsideredEmpty(value) ? /* @__PURE__ */ React13.createElement("p", null, /* @__PURE__ */ React13.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ React13.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformSlot.tsx
@@ -153,9 +211,9 @@ var UniformSlot = ({ data, slot, children }) => {
 
 // src/components/UniformText.tsx
 import { PureUniformText } from "@uniformdev/canvas-react/core";
-import React12 from "react";
+import React14 from "react";
 var UniformText = ({ context, ...rest }) => {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     PureUniformText,
     {
       ...rest,

package/dist/components/DefaultNotImplementedComponent.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from './UniformComponent';
+export declare function DefaultNotImplementedComponent(
+  props: ComponentProps
+): import('react/jsx-runtime').JSX.Element | null;

package/dist/components/DefaultNotImplementedComponent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CANVAS_LOCALIZATION_TYPE } from '@uniformdev/canvas';
+const wrapperStyles = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    borderLeft: '4px solid #e42535',
+    padding: '16px',
+    fontSize: '16px',
+    borderRadius: '0 8px 8px 0',
+    margin: '8px',
+    backgroundColor: 'rgba(255, 255, 255, 0.45)',
+    color: '#1d3557',
+};
+export function DefaultNotImplementedComponent(props) {
+    var _a, _b, _c;
+    const componentType = (_a = props.component) === null || _a === void 0 ? void 0 : _a.type;
+    if (!componentType) {
+        return null;
+    }
+    if (componentType === CANVAS_LOCALIZATION_TYPE) {
+        return (_jsx("div", { style: wrapperStyles, children: _jsxs("p", { children: ["Seems like localization is not enabled in your application. Please read our documentation on how to", ' ', _jsx("a", { href: "https://docs.uniform.app/guides/composition/localization#activate-front-end", target: "_blank", style: { fontWeight: 'bolder', textDecoration: 'underline' }, rel: "noreferrer", children: "enable localization in your front-end application." })] }) }));
+    }
+    const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
+    const probableProps = Object.keys((_b = props.component.parameters) !== null && _b !== void 0 ? _b : {});
+    const probableSlots = Object.keys((_c = props.component.slots) !== null && _c !== void 0 ? _c : {});
+    return (_jsxs("div", { style: wrapperStyles, children: [_jsx("h2", { style: { fontSize: '1.2rem' }, children: "Unknown Component" }), _jsxs("p", { children: ["Received request from Uniform to render a component with the public ID: ", _jsx("code", { children: componentType }), "."] }), _jsxs("p", { children: [_jsx("code", { children: "<UniformComposition />" }), " does not have ", _jsx("code", { children: componentType }), " mapped to a React component yet."] }), _jsx("p", { children: "To teach your app how to render this component:" }), ' ', _jsxs("ul", { style: {
+                    listStyleType: 'disc',
+                    marginLeft: '1rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.5rem',
+                }, children: [_jsxs("li", { children: ["Create a React component and register it with Uniform, for example", _jsx("pre", { children: `function ${proposedFileName}(${probableProps.length > 0 ? `{ ${probableProps.join(', ')} }` : ''}) {
+  return (
+    <div>
+      ${proposedFileName}!
+      ${probableSlots.length > 0
+                                    ? probableSlots.map((slot) => `<UniformSlot name="${slot}" />`).join('\n      ')
+                                    : ''}
+    </div>
+  )
+}
+
+registerUniformComponent({ type: "${componentType}", component: ${proposedFileName} })` }), _jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer' }, children: "Props that your React component will receive" }), _jsx("pre", { children: JSON.stringify(props, null, 2) })] })] }), _jsxs("li", { children: ["Import the component into the file where ", _jsx("code", { children: "<UniformComposition />" }), " is defined, for example ", _jsx("pre", { children: `import "../components/${proposedFileName}.tsx"` })] })] }), ' ', _jsxs("p", { children: ["Need more help?", ' ', _jsx("a", { href: "https://docs.uniform.app/docs/guides/composition/rendering", target: "_blank", rel: "noreferrer", style: { textDecoration: 'underline' }, children: "Check out the documentation." })] })] }));
+}

package/dist/components/GoogleTagManagerAnalytics.d.ts

@@ -0,0 +1,3 @@
+export declare const GoogleTagManagerAnalytics: (props?: {
+  measurementId?: string;
+}) => import('react/jsx-runtime').JSX.Element;

package/dist/components/GoogleTagManagerAnalytics.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Script from 'next/script';
+import { useEffect } from 'react';
+import { useUniformContext } from '../hooks/useUniformContext';
+const isGtagConfigured = () => {
+    return typeof window !== 'undefined' && typeof window.gtag === 'function';
+};
+export const GoogleTagManagerAnalytics = (props) => {
+    const { seenComponents } = useUniformContext();
+    useEffect(() => {
+        if (!(seenComponents === null || seenComponents === void 0 ? void 0 : seenComponents.length)) {
+            return;
+        }
+        if (!isGtagConfigured()) {
+            // eslint-disable-next-line no-console
+            console.warn('Google Tag Manager is not configured. Please add the gtag script to your site.');
+            return;
+        }
+        seenComponents.forEach((component) => {
+            var _a, _b, _c, _d, _e;
+            if (component.type === 'personalization') {
+                (_b = (_a = window).gtag) === null || _b === void 0 ? void 0 : _b.call(_a, 'event', component.id, {
+                    event_category: 'Uniform Personalization',
+                    event_label: component.variants.join(', '),
+                    is_control_group: component.control ? 1 : 0,
+                });
+            }
+            else if (component.type === 'test') {
+                (_d = (_c = window).gtag) === null || _d === void 0 ? void 0 : _d.call(_c, 'event', component.id, {
+                    event_category: 'Uniform AB Testing',
+                    event_label: (_e = component.variant) !== null && _e !== void 0 ? _e : 'No Variant',
+                });
+            }
+        });
+    }, [seenComponents]);
+    return (_jsx(_Fragment, { children: Boolean(props === null || props === void 0 ? void 0 : props.measurementId) && (_jsxs(_Fragment, { children: [_jsx(Script, { src: `https://www.googletagmanager.com/gtag/js?id=${props.measurementId}`, strategy: "afterInteractive" }), _jsx(Script, { id: "google-analytics", strategy: "afterInteractive", children: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){window.dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '${props.measurementId}');
+    ` })] })) }));
+};

package/dist/components/UniformComponent.d.ts

@@ -0,0 +1,35 @@
+import {
+  type ComponentInstance,
+  type RootComponentInstance,
+  RouteGetResponseComposition,
+} from '@uniformdev/canvas';
+import { ReactNode } from 'react';
+export type CompositionContext = Omit<RouteGetResponseComposition, 'compositionApiResponse'> & {
+  composition: RootComponentInstance;
+  path: string;
+  state?: number;
+  searchParams:
+    | {
+        [key: string]: string | undefined;
+      }
+    | undefined;
+  cookieValue: string | undefined;
+  isDraftMode: boolean;
+  isContextualEditing: boolean;
+};
+export type ComponentProps<TProps = unknown> = TProps & {
+  component: ComponentInstance;
+  context: CompositionContext;
+};
+export type UniformComponentProps<TRenderProps = unknown> = {
+  data: ComponentInstance;
+  context: CompositionContext;
+  children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+};
+export declare function UniformComponent({
+  data,
+  children,
+  context,
+}: UniformComponentProps): import('react').FunctionComponentElement<{
+  children?: ReactNode;
+}>;

package/dist/components/UniformComponent.js

@@ -0,0 +1,14 @@
+import { createElement, Fragment } from 'react';
+import { componentStoreResolver } from '../register/componentStoreResolver';
+import { resolveChildren } from '../resolve/resolveChildren';
+export function UniformComponent({ data, children, context }) {
+    const resolvedChildren = resolveChildren({
+        children,
+        data,
+        context,
+        hasParentLayout: false,
+        resolveRenderer: componentStoreResolver,
+    });
+    const childrenToRender = [resolvedChildren];
+    return createElement(Fragment, {}, childrenToRender);
+}

package/dist/components/UniformComposition.d.ts

@@ -0,0 +1,47 @@
+import { ContextState } from '@uniformdev/context';
+import { ReactNode } from 'react';
+export type SuspenseOptions =
+  | {
+      mode: 'off';
+    }
+  | {
+      mode: 'fallback';
+      fallback: React.ReactNode;
+    };
+export type UniformCompositionProps = {
+  /**
+   * The params object from Next.js router. Used to resolve a composition.
+   */
+  params: {
+    slug: string | string[];
+  };
+  /**
+   * The searchParams object from Next.js router. Used for signal evaluation.
+   */
+  searchParams?: {
+    [key: string]: string | undefined;
+  };
+  /**
+   * Behavior of root Suspense component.
+   */
+  suspense?:
+    | {
+        mode: 'off';
+      }
+    | {
+        mode: 'fallback';
+        fallback: ReactNode;
+      };
+  /**
+   * Update state that should be added to the call to update before composition evaluation
+   */
+  update?: Partial<ContextState>;
+  /**
+   * The children of the UniformComposition component.
+   */
+  children?: ReactNode;
+};
+export declare const UniformComposition: ({
+  suspense,
+  ...props
+}: UniformCompositionProps) => import('react/jsx-runtime').JSX.Element;