From a111544000913643e8f96ea7fdba4cea3f725fad Mon Sep 17 00:00:00 2001
From: tristan <tm@tristanmayo.com>
Date: Sun, 3 Mar 2024 10:43:08 +0100
Subject: [PATCH] docs: duplicated example#2 & used it as a basis for the
 responsiveness example

---
 examples/responsive/.babelrc                  |   4 +
 examples/responsive/.gitignore                |  25 ++++
 examples/responsive/README.md                 |   5 +
 .../selectors/Button/ButtonSettings.tsx       |  65 +++++++++
 .../components/selectors/Button/index.tsx     |  73 ++++++++++
 .../selectors/Container/ContainerSettings.tsx | 125 ++++++++++++++++++
 .../components/selectors/Container/index.tsx  |  90 +++++++++++++
 .../selectors/Text/TextSettings.tsx           |  79 +++++++++++
 .../components/selectors/Text/index.tsx       |  69 ++++++++++
 .../responsive/components/selectors/index.ts  |   2 +
 examples/responsive/next-env.d.ts             |   5 +
 examples/responsive/next.config.js            |   4 +
 examples/responsive/package.json              |  50 +++++++
 examples/responsive/pages/_app.tsx            |  21 +++
 examples/responsive/pages/_document.tsx       |  32 +++++
 examples/responsive/pages/index.tsx           | 102 ++++++++++++++
 examples/responsive/postcss.config.js         |   6 +
 examples/responsive/public/favicon.ico        | Bin 0 -> 15086 bytes
 examples/responsive/public/icons/arrow-up.svg |   4 +
 examples/responsive/public/icons/arrow.svg    |   4 +
 examples/responsive/public/icons/button.svg   |   1 +
 examples/responsive/public/icons/check.svg    |   5 +
 .../responsive/public/icons/customize.svg     |   6 +
 examples/responsive/public/icons/delete.svg   |  11 ++
 examples/responsive/public/icons/edit.svg     |  11 ++
 examples/responsive/public/icons/layers.svg   |  12 ++
 examples/responsive/public/icons/move.svg     |  11 ++
 examples/responsive/public/icons/square.svg   |   1 +
 .../public/icons/toolbox/button.svg           |  12 ++
 .../public/icons/toolbox/container.svg        |   1 +
 .../responsive/public/icons/toolbox/link.svg  |   1 +
 .../public/icons/toolbox/rectangle.svg        |  11 ++
 .../responsive/public/icons/toolbox/redo.svg  |   4 +
 .../public/icons/toolbox/text-fill.svg        |   1 +
 .../responsive/public/icons/toolbox/text.svg  |   1 +
 .../responsive/public/icons/toolbox/undo.svg  |   4 +
 .../public/icons/toolbox/video-fill.svg       |   1 +
 .../public/icons/toolbox/video-line.svg       |   1 +
 examples/responsive/public/icons/type.svg     |   1 +
 examples/responsive/public/icons/youtube.svg  |   1 +
 .../seo/googlee6ec608adf0c9ed0.html           |   1 +
 examples/responsive/seo/sitemap.xml           |  16 +++
 examples/responsive/seo/urllist.txt           |   1 +
 examples/responsive/styles/app.css            |  41 ++++++
 examples/responsive/tailwind.config.js        |  20 +++
 examples/responsive/tsconfig.json             |  38 ++++++
 examples/responsive/types/svg.d.ts            |   4 +
 examples/responsive/utils/numToMeasurement.ts |  32 +++++
 examples/responsive/utils/text.ts             |   4 +
 yarn.lock                                     |  53 ++++++++
 50 files changed, 1072 insertions(+)
 create mode 100644 examples/responsive/.babelrc
 create mode 100644 examples/responsive/.gitignore
 create mode 100644 examples/responsive/README.md
 create mode 100644 examples/responsive/components/selectors/Button/ButtonSettings.tsx
 create mode 100644 examples/responsive/components/selectors/Button/index.tsx
 create mode 100644 examples/responsive/components/selectors/Container/ContainerSettings.tsx
 create mode 100644 examples/responsive/components/selectors/Container/index.tsx
 create mode 100644 examples/responsive/components/selectors/Text/TextSettings.tsx
 create mode 100644 examples/responsive/components/selectors/Text/index.tsx
 create mode 100644 examples/responsive/components/selectors/index.ts
 create mode 100644 examples/responsive/next-env.d.ts
 create mode 100644 examples/responsive/next.config.js
 create mode 100644 examples/responsive/package.json
 create mode 100644 examples/responsive/pages/_app.tsx
 create mode 100644 examples/responsive/pages/_document.tsx
 create mode 100644 examples/responsive/pages/index.tsx
 create mode 100644 examples/responsive/postcss.config.js
 create mode 100644 examples/responsive/public/favicon.ico
 create mode 100644 examples/responsive/public/icons/arrow-up.svg
 create mode 100644 examples/responsive/public/icons/arrow.svg
 create mode 100644 examples/responsive/public/icons/button.svg
 create mode 100644 examples/responsive/public/icons/check.svg
 create mode 100644 examples/responsive/public/icons/customize.svg
 create mode 100644 examples/responsive/public/icons/delete.svg
 create mode 100644 examples/responsive/public/icons/edit.svg
 create mode 100644 examples/responsive/public/icons/layers.svg
 create mode 100644 examples/responsive/public/icons/move.svg
 create mode 100644 examples/responsive/public/icons/square.svg
 create mode 100644 examples/responsive/public/icons/toolbox/button.svg
 create mode 100644 examples/responsive/public/icons/toolbox/container.svg
 create mode 100644 examples/responsive/public/icons/toolbox/link.svg
 create mode 100644 examples/responsive/public/icons/toolbox/rectangle.svg
 create mode 100644 examples/responsive/public/icons/toolbox/redo.svg
 create mode 100644 examples/responsive/public/icons/toolbox/text-fill.svg
 create mode 100644 examples/responsive/public/icons/toolbox/text.svg
 create mode 100644 examples/responsive/public/icons/toolbox/undo.svg
 create mode 100644 examples/responsive/public/icons/toolbox/video-fill.svg
 create mode 100644 examples/responsive/public/icons/toolbox/video-line.svg
 create mode 100644 examples/responsive/public/icons/type.svg
 create mode 100644 examples/responsive/public/icons/youtube.svg
 create mode 100644 examples/responsive/seo/googlee6ec608adf0c9ed0.html
 create mode 100644 examples/responsive/seo/sitemap.xml
 create mode 100755 examples/responsive/seo/urllist.txt
 create mode 100644 examples/responsive/styles/app.css
 create mode 100644 examples/responsive/tailwind.config.js
 create mode 100644 examples/responsive/tsconfig.json
 create mode 100644 examples/responsive/types/svg.d.ts
 create mode 100644 examples/responsive/utils/numToMeasurement.ts
 create mode 100644 examples/responsive/utils/text.ts

diff --git a/examples/responsive/.babelrc b/examples/responsive/.babelrc
new file mode 100644
index 000000000..a6f4434e2
--- /dev/null
+++ b/examples/responsive/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["inline-react-svg"]
+}
diff --git a/examples/responsive/.gitignore b/examples/responsive/.gitignore
new file mode 100644
index 000000000..922d92a57
--- /dev/null
+++ b/examples/responsive/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/responsive/README.md b/examples/responsive/README.md
new file mode 100644
index 000000000..7513716f5
--- /dev/null
+++ b/examples/responsive/README.md
@@ -0,0 +1,5 @@
+# Landing
+
+This is the source code for the landing page demo seen [here](https://craft.js.org/)
+
+> The code is admittedly a bit messy and is scheduled for a clean up. In the mean time, feel free to submit an issue if you encounter any confusing/weird/wtf bits ... or even better, submit a pull request! :clap:
diff --git a/examples/responsive/components/selectors/Button/ButtonSettings.tsx b/examples/responsive/components/selectors/Button/ButtonSettings.tsx
new file mode 100644
index 000000000..2f2ba3658
--- /dev/null
+++ b/examples/responsive/components/selectors/Button/ButtonSettings.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { ToolbarSection, ToolbarItem } from '../../editor';
+import { ToolbarRadio } from '../../editor/Toolbar/ToolbarRadio';
+
+export const ButtonSettings = () => {
+  return (
+    <React.Fragment>
+      <ToolbarSection
+        title="Colors"
+        props={['background', 'color']}
+        summary={({ background, color }: any) => {
+          return (
+            <div className="flex flex-row-reverse">
+              <div
+                style={{
+                  background:
+                    background && `rgba(${Object.values(background)})`,
+                }}
+                className="shadow-md flex-end w-6 h-6 text-center flex items-center rounded-full bg-black"
+              >
+                <p
+                  style={{
+                    color: color && `rgba(${Object.values(color)})`,
+                  }}
+                  className="text-white w-full text-center"
+                >
+                  T
+                </p>
+              </div>
+            </div>
+          );
+        }}
+      >
+        <ToolbarItem
+          full={true}
+          propKey="background"
+          type="bg"
+          label="Background"
+        />
+        <ToolbarItem full={true} propKey="color" type="color" label="Text" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Margin"
+        props={['margin']}
+        summary={({ margin }: any) => {
+          return `${margin[0] || 0}px ${margin[1] || 0}px ${margin[2] || 0}px ${
+            margin[3] || 0
+          }px`;
+        }}
+      >
+        <ToolbarItem propKey="margin" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="margin" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="margin" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="margin" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection title="Decoration">
+        <ToolbarItem propKey="buttonStyle" type="radio" label="Style">
+          <ToolbarRadio value="full" label="Full" />
+          <ToolbarRadio value="outline" label="Outline" />
+        </ToolbarItem>
+      </ToolbarSection>
+    </React.Fragment>
+  );
+};
diff --git a/examples/responsive/components/selectors/Button/index.tsx b/examples/responsive/components/selectors/Button/index.tsx
new file mode 100644
index 000000000..aa21c6366
--- /dev/null
+++ b/examples/responsive/components/selectors/Button/index.tsx
@@ -0,0 +1,73 @@
+import { UserComponent, useNode } from '@craftjs/core';
+import cx from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+
+import { ButtonSettings } from './ButtonSettings';
+
+import { Text } from '../Text';
+
+type ButtonProps = {
+  background?: Record<'r' | 'g' | 'b' | 'a', number>;
+  color?: Record<'r' | 'g' | 'b' | 'a', number>;
+  buttonStyle?: string;
+  margin?: any[];
+  text?: string;
+  textComponent?: any;
+};
+
+const StyledButton = styled.button<ButtonProps>`
+  background: ${(props) =>
+    props.buttonStyle === 'full'
+      ? `rgba(${Object.values(props.background)})`
+      : 'transparent'};
+  border: 2px solid transparent;
+  border-color: ${(props) =>
+    props.buttonStyle === 'outline'
+      ? `rgba(${Object.values(props.background)})`
+      : 'transparent'};
+  margin: ${({ margin }) =>
+    `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};
+`;
+
+export const Button: UserComponent<ButtonProps> = (props: any) => {
+  const {
+    connectors: { connect },
+  } = useNode((node) => ({
+    selected: node.events.selected,
+  }));
+
+  const { text, textComponent, color, ...otherProps } = props;
+  return (
+    <StyledButton
+      ref={connect}
+      className={cx([
+        'rounded w-full px-4 py-2',
+        {
+          'shadow-lg': props.buttonStyle === 'full',
+        },
+      ])}
+      {...otherProps}
+    >
+      <Text {...textComponent} text={text} color={props.color} />
+    </StyledButton>
+  );
+};
+
+Button.craft = {
+  displayName: 'Button',
+  props: {
+    background: { r: 255, g: 255, b: 255, a: 0.5 },
+    color: { r: 92, g: 90, b: 90, a: 1 },
+    buttonStyle: 'full',
+    text: 'Button',
+    margin: ['5', '0', '5', '0'],
+    textComponent: {
+      ...Text.craft.props,
+      textAlign: 'center',
+    },
+  },
+  related: {
+    toolbar: ButtonSettings,
+  },
+};
diff --git a/examples/responsive/components/selectors/Container/ContainerSettings.tsx b/examples/responsive/components/selectors/Container/ContainerSettings.tsx
new file mode 100644
index 000000000..618c54e96
--- /dev/null
+++ b/examples/responsive/components/selectors/Container/ContainerSettings.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+
+import { ToolbarSection, ToolbarItem } from '../../editor';
+import { ToolbarRadio } from '../../editor/Toolbar/ToolbarRadio';
+
+export const ContainerSettings = () => {
+  return (
+    <React.Fragment>
+      <ToolbarSection
+        title="Dimensions"
+        props={['width', 'height']}
+        summary={({ width, height }: any) => {
+          return `${width || 0} x ${height || 0}`;
+        }}
+      >
+        <ToolbarItem propKey="width" type="text" label="Width" />
+        <ToolbarItem propKey="height" type="text" label="Height" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Colors"
+        props={['background', 'color']}
+        summary={({ background, color }: any) => {
+          return (
+            <div className="flex flex-row-reverse">
+              <div
+                style={{
+                  background:
+                    background && `rgba(${Object.values(background)})`,
+                }}
+                className="shadow-md flex-end w-6 h-6 text-center flex items-center rounded-full bg-black"
+              >
+                <p
+                  style={{
+                    color: color && `rgba(${Object.values(color)})`,
+                  }}
+                  className="text-white w-full text-center"
+                >
+                  T
+                </p>
+              </div>
+            </div>
+          );
+        }}
+      >
+        <ToolbarItem
+          full={true}
+          propKey="background"
+          type="bg"
+          label="Background"
+        />
+        <ToolbarItem full={true} propKey="color" type="color" label="Text" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Margin"
+        props={['margin']}
+        summary={({ margin }: any) => {
+          return `${margin[0] || 0}px ${margin[1] || 0}px ${margin[2] || 0}px ${
+            margin[3] || 0
+          }px`;
+        }}
+      >
+        <ToolbarItem propKey="margin" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="margin" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="margin" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="margin" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Padding"
+        props={['padding']}
+        summary={({ padding }: any) => {
+          return `${padding[0] || 0}px ${padding[1] || 0}px ${
+            padding[2] || 0
+          }px ${padding[3] || 0}px`;
+        }}
+      >
+        <ToolbarItem propKey="padding" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="padding" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="padding" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="padding" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection title="Decoration" props={['radius', 'shadow']}>
+        <ToolbarItem
+          full={true}
+          propKey="radius"
+          type="slider"
+          label="Radius"
+        />
+        <ToolbarItem
+          full={true}
+          propKey="shadow"
+          type="slider"
+          label="Shadow"
+        />
+      </ToolbarSection>
+      <ToolbarSection title="Alignment">
+        <ToolbarItem
+          propKey="flexDirection"
+          type="radio"
+          label="Flex Direction"
+        >
+          <ToolbarRadio value="row" label="Row" />
+          <ToolbarRadio value="column" label="Column" />
+        </ToolbarItem>
+        <ToolbarItem propKey="fillSpace" type="radio" label="Fill space">
+          <ToolbarRadio value="yes" label="Yes" />
+          <ToolbarRadio value="no" label="No" />
+        </ToolbarItem>
+        <ToolbarItem propKey="alignItems" type="radio" label="Align Items">
+          <ToolbarRadio value="flex-start" label="Flex start" />
+          <ToolbarRadio value="center" label="Center" />
+          <ToolbarRadio value="flex-end" label="Flex end" />
+        </ToolbarItem>
+        <ToolbarItem
+          propKey="justifyContent"
+          type="radio"
+          label="Justify Content"
+        >
+          <ToolbarRadio value="flex-start" label="Flex start" />
+          <ToolbarRadio value="center" label="Center" />
+          <ToolbarRadio value="flex-end" label="Flex end" />
+        </ToolbarItem>
+      </ToolbarSection>
+    </React.Fragment>
+  );
+};
diff --git a/examples/responsive/components/selectors/Container/index.tsx b/examples/responsive/components/selectors/Container/index.tsx
new file mode 100644
index 000000000..a64b865c1
--- /dev/null
+++ b/examples/responsive/components/selectors/Container/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { ContainerSettings } from './ContainerSettings';
+
+export type ContainerProps = {
+  background: Record<'r' | 'g' | 'b' | 'a', number>;
+  color: Record<'r' | 'g' | 'b' | 'a', number>;
+  flexDirection: string;
+  alignItems: string;
+  justifyContent: string;
+  fillSpace: string;
+  width: string;
+  height: string;
+  padding: string[];
+  margin: string[];
+  marginTop: number;
+  marginLeft: number;
+  marginBottom: number;
+  marginRight: number;
+  shadow: number;
+  children: React.ReactNode;
+  radius: number;
+};
+
+const defaultProps = {
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  fillSpace: 'no',
+  padding: ['0', '0', '0', '0'],
+  margin: ['0', '0', '0', '0'],
+  background: { r: 255, g: 255, b: 255, a: 1 },
+  color: { r: 0, g: 0, b: 0, a: 1 },
+  shadow: 0,
+  radius: 0,
+  width: '100%',
+  height: 'auto',
+};
+
+export const Container = (props: Partial<ContainerProps>) => {
+  props = {
+    ...defaultProps,
+    ...props,
+  };
+  const {
+    flexDirection,
+    alignItems,
+    justifyContent,
+    fillSpace,
+    background,
+    color,
+    padding,
+    margin,
+    shadow,
+    radius,
+    children,
+  } = props;
+  return (
+    <div
+      style={{
+        // justifyContent,
+        // flexDirection,
+        // alignItems,
+        background: `rgba(${Object.values(background)})`,
+        // color: `rgba(${Object.values(color)})`,
+        // padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
+        // margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
+        boxShadow:
+          shadow === 0
+            ? 'none'
+            : `0px 3px 100px ${shadow}px rgba(0, 0, 0, 0.13)`,
+        // borderRadius: `${radius}px`,
+        // flex: fillSpace === 'yes' ? 1 : 'unset',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Container.craft = {
+  displayName: 'Container',
+  props: defaultProps,
+  rules: {
+    canDrag: () => true,
+  },
+  related: {
+    toolbar: ContainerSettings,
+  },
+};
diff --git a/examples/responsive/components/selectors/Text/TextSettings.tsx b/examples/responsive/components/selectors/Text/TextSettings.tsx
new file mode 100644
index 000000000..b26a18f62
--- /dev/null
+++ b/examples/responsive/components/selectors/Text/TextSettings.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { capitalize, weightDescription } from '../../../utils/text';
+import { ToolbarSection, ToolbarItem } from '../../editor';
+import { ToolbarRadio } from '../../editor/Toolbar/ToolbarRadio';
+
+export const TextSettings = () => {
+  return (
+    <React.Fragment>
+      <ToolbarSection
+        title="Typography"
+        props={['fontSize', 'fontWeight', 'textAlign']}
+        summary={({ fontSize, fontWeight, textAlign }: any) => {
+          return `${fontSize || ''}, ${weightDescription(
+            fontWeight
+          )}, ${capitalize(textAlign)}`;
+        }}
+      >
+        <ToolbarItem
+          full={true}
+          propKey="fontSize"
+          type="slider"
+          label="Font Size"
+        />
+        <ToolbarItem propKey="textAlign" type="radio" label="Align">
+          <ToolbarRadio value="left" label="Left" />
+          <ToolbarRadio value="center" label="Center" />
+          <ToolbarRadio value="right" label="Right" />
+        </ToolbarItem>
+        <ToolbarItem propKey="fontWeight" type="radio" label="Weight">
+          <ToolbarRadio value="400" label="Regular" />
+          <ToolbarRadio value="500" label="Medium" />
+          <ToolbarRadio value="700" label="Bold" />
+        </ToolbarItem>
+      </ToolbarSection>
+      <ToolbarSection
+        title="Margin"
+        props={['margin']}
+        summary={({ margin }: any) => {
+          return `${margin[0] || 0}px ${margin[1] || 0}px ${margin[2] || 0}px ${
+            margin[3] || 0
+          }px`;
+        }}
+      >
+        <ToolbarItem propKey="margin" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="margin" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="margin" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="margin" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Appearance"
+        props={['color', 'shadow']}
+        summary={({ color, shadow }: any) => {
+          return (
+            <div className="fletext-right">
+              <p
+                style={{
+                  color: color && `rgba(${Object.values(color)})`,
+                  textShadow: `0px 0px 2px rgba(0, 0, 0, ${shadow / 100})`,
+                }}
+                className="text-white text-right"
+              >
+                T
+              </p>
+            </div>
+          );
+        }}
+      >
+        <ToolbarItem full={true} propKey="color" type="color" label="Text" />
+        <ToolbarItem
+          full={true}
+          propKey="shadow"
+          type="slider"
+          label="Shadow"
+        />
+      </ToolbarSection>
+    </React.Fragment>
+  );
+};
diff --git a/examples/responsive/components/selectors/Text/index.tsx b/examples/responsive/components/selectors/Text/index.tsx
new file mode 100644
index 000000000..6bef80b20
--- /dev/null
+++ b/examples/responsive/components/selectors/Text/index.tsx
@@ -0,0 +1,69 @@
+import { useNode, useEditor } from '@craftjs/core';
+import React from 'react';
+import ContentEditable from 'react-contenteditable';
+
+import { TextSettings } from './TextSettings';
+
+export type TextProps = {
+  fontSize: string;
+  textAlign: string;
+  fontWeight: string;
+  color: Record<'r' | 'g' | 'b' | 'a', string>;
+  shadow: number;
+  text: string;
+  margin: [string, string, string, string];
+};
+
+export const Text = ({
+  fontSize,
+  textAlign,
+  fontWeight,
+  color,
+  shadow,
+  text,
+  margin,
+}: Partial<TextProps>) => {
+  const {
+    connectors: { connect },
+    setProp,
+  } = useNode();
+  const { enabled } = useEditor((state) => ({
+    enabled: state.options.enabled,
+  }));
+  return (
+    <ContentEditable
+      innerRef={connect}
+      html={text} // innerHTML of the editable div
+      disabled={!enabled}
+      onChange={(e) => {
+        setProp((prop) => (prop.text = e.target.value), 500);
+      }} // use true to disable editing
+      tagName="h2" // Use a custom HTML tag (uses a div by default)
+      style={{
+        width: '100%',
+        margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
+        color: `rgba(${Object.values(color)})`,
+        fontSize: `${fontSize}px`,
+        textShadow: `0px 0px 2px rgba(0,0,0,${(shadow || 0) / 100})`,
+        fontWeight,
+        textAlign,
+      }}
+    />
+  );
+};
+
+Text.craft = {
+  displayName: 'Text',
+  props: {
+    fontSize: '15',
+    textAlign: 'left',
+    fontWeight: '500',
+    color: { r: 92, g: 90, b: 90, a: 1 },
+    margin: [0, 0, 0, 0],
+    shadow: 0,
+    text: 'Text',
+  },
+  related: {
+    toolbar: TextSettings,
+  },
+};
diff --git a/examples/responsive/components/selectors/index.ts b/examples/responsive/components/selectors/index.ts
new file mode 100644
index 000000000..8dd533d20
--- /dev/null
+++ b/examples/responsive/components/selectors/index.ts
@@ -0,0 +1,2 @@
+export * from './Container';
+export * from './Text';
diff --git a/examples/responsive/next-env.d.ts b/examples/responsive/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/examples/responsive/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/responsive/next.config.js b/examples/responsive/next.config.js
new file mode 100644
index 000000000..ea48d4656
--- /dev/null
+++ b/examples/responsive/next.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  assetPrefix:
+    process.env.NODE_ENV === 'production' ? '/examples/landing' : '/',
+};
diff --git a/examples/responsive/package.json b/examples/responsive/package.json
new file mode 100644
index 000000000..a6da0d08d
--- /dev/null
+++ b/examples/responsive/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "example-responsive",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "start": "next dev -p 3002",
+    "build": "next build",
+    "export": "next export",
+    "clean": "rimraf lib .next out dist"
+  },
+  "dependencies": {
+    "@craftjs/core": "workspace:*",
+    "@craftjs/layers": "workspace:*",
+    "@material-ui/core": "4.5.2",
+    "@material-ui/icons": "4.5.1",
+    "autoprefixer": "latest",
+    "classnames": "2.2.6",
+    "cssnano": "4.1.10",
+    "debounce": "1.2.0",
+    "lzutf8": "0.5.5",
+    "next": "13.1.6",
+    "next-seo": "4.24.0",
+    "postcss": "latest",
+    "re-resizable": "6.1.0",
+    "react": "18.2.0",
+    "react-color": "2.17.3",
+    "react-contenteditable": "3.3.2",
+    "react-dom": "18.2.0",
+    "react-frame-component": "^5.2.6",
+    "react-loading": "2.0.3",
+    "react-rnd": "10.1.1",
+    "react-youtube": "7.9.0",
+    "styled-components": "4.4.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.7.5",
+    "@fullhuman/postcss-purgecss": "1.3.0",
+    "@types/classnames": "2.2.9",
+    "@types/node": "12.12.5",
+    "@types/react": "18.0.27",
+    "@types/react-color": "3.0.1",
+    "@types/styled-components": "4.4.1",
+    "babel-plugin-inline-react-svg": "2.0.1",
+    "cross-env": "6.0.3",
+    "postcss-import": "12.0.1",
+    "postcss-preset-env": "6.7.0",
+    "tailwindcss": "latest",
+    "typescript": "4.9.5"
+  }
+}
diff --git a/examples/responsive/pages/_app.tsx b/examples/responsive/pages/_app.tsx
new file mode 100644
index 000000000..97a6c4d58
--- /dev/null
+++ b/examples/responsive/pages/_app.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import '../styles/app.css';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// MyApp.getInitialProps = async (appContext) => {
+//   // calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(appContext);
+//
+//   return { ...appProps }
+// }
+
+export default MyApp;
diff --git a/examples/responsive/pages/_document.tsx b/examples/responsive/pages/_document.tsx
new file mode 100644
index 000000000..0da52da1b
--- /dev/null
+++ b/examples/responsive/pages/_document.tsx
@@ -0,0 +1,32 @@
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}
diff --git a/examples/responsive/pages/index.tsx b/examples/responsive/pages/index.tsx
new file mode 100644
index 000000000..016384e53
--- /dev/null
+++ b/examples/responsive/pages/index.tsx
@@ -0,0 +1,102 @@
+import { Editor, Frame, Element } from '@craftjs/core';
+import { Button, ButtonGroup, createMuiTheme } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core/styles';
+import React, { useState } from 'react';
+
+import { Container, Text } from '../components/selectors';
+import IFrame from 'react-frame-component';
+
+const theme = createMuiTheme({
+  typography: {
+    fontFamily: [
+      'acumin-pro',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+    ].join(','),
+  },
+});
+
+function App() {
+  const breakpoints = {
+    sm: '640px', // small devices i.e phones
+    md: '1280px', // medium devices i.e tablets
+    lg: '1536px', // large devices i.e computers,laptops...
+  };
+
+  const [breakpoint, setBreakpoint] = useState('lg');
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div className="h-full h-screen">
+        <Editor
+          resolver={{
+            Container,
+            Text,
+          }}
+          enabled={false}
+        >
+          <div className="flex items-center justify-center h-12">
+            <ButtonGroup variant="contained" aria-label="Basic button group">
+              <Button onClick={() => setBreakpoint('sm')}>Mobile</Button>
+              <Button onClick={() => setBreakpoint('md')}>Tablet</Button>
+              <Button onClick={() => setBreakpoint('lg')}>Desktop</Button>
+            </ButtonGroup>
+          </div>
+
+          <div
+            className=""
+            style={{ width: breakpoints[breakpoint], margin: '0 auto' }}
+          >
+            <IFrame className="block h-full w-full">
+              <AddStyles>
+                <Frame>
+                  <Element canvas is={Container}>
+                    <div className="sm:text-red md:text-white 2xl:text-black">
+                      This text is red on mobile, white on tablets & black on
+                      desktops
+                    </div>
+                  </Element>
+                </Frame>
+              </AddStyles>
+            </IFrame>
+          </div>
+        </Editor>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+import type { ReactNode } from 'react';
+import { useFrame } from 'react-frame-component';
+import { useLayoutEffect } from 'react';
+function AddStyles({ children }: { children: ReactNode }) {
+  const { document: doc } = useFrame(); // <iframe ref="iframe" /> then this.$refs.iframe....
+  useLayoutEffect(() => {
+    // this covers development case as well as part of production
+    document.head.querySelectorAll('style').forEach((style) => {
+      if (style.id === 'colors') return;
+      const frameStyles = style.cloneNode(true);
+      doc?.head.append(frameStyles);
+    });
+    if (process && process.env.NODE_ENV === 'production') {
+      document.head.querySelectorAll('link[as="style"]').forEach((ele) => {
+        if (ele.id === 'colors') return;
+        doc?.head.append(ele.cloneNode(true));
+      });
+      document.head
+        .querySelectorAll('link[rel="stylesheet"]')
+        .forEach((ele) => {
+          if (ele.id === 'colors') return;
+          doc?.head.append(ele.cloneNode(true));
+        });
+    }
+  }, [doc]);
+
+  return <>{children}</>;
+}
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => Promise.resolve(App), { ssr: false });
diff --git a/examples/responsive/postcss.config.js b/examples/responsive/postcss.config.js
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/examples/responsive/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/responsive/public/favicon.ico b/examples/responsive/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a
GIT binary patch
literal 15086
zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ
zU6^i~bWuZYHL)9$wuvEKm~qo~(<Zhq=%PtAwXvy2(jcebH**geX1LCs2h7miFZps_
z|2gOX|8wS^%YQCHxP)6277C<3F`Xeqs}REH3zlb5{~78U8_n{oLJXD&Q4bk3p+~SD
zi4c%WV`M?Me9)tqo15z?FE97(-o4w?-QDduc<`X-<jIryXU?3VY&e=xaR<By`pHe3
zHu;N+iu~2p)&Az@X8*vzz`c=?kvpeOouX_wHlyMOC_|Z*l_j@r+a_ykYh_zoo7}s1
z?~SpsG0LunPE<YuBgQB#E#(-GT3T8tV+A)Fu7WH2vz(osElWyDuJ-o!Qs!mg(mw!K
zjNx**9>5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1k<zZkuF29=w50WV~>p
zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gK<H$_?cM`#?UQ0^ozkf#ZSn_W+-zniVx5
zKR;i?vs?3ey;^;Jy|!o19<9B-UF+-X)AsG#ryV|gSUZ0FxHd5{p-oRuYcn%5(VoxB
zD?E+QgEv9LiWwOh2F^hP=a_-B(5R`YF>oFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM
zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B
zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A
z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2
z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50<cPtWn&WS?Xq4+DJ#+M3^#WuIi?Ee!S-
z7)=MtyqV02&9V6G{1l8fKV|GbXU(B)Ck>GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM
z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1<k$P{dI)p=W0Lvx2L2)uUzlV*6?hGkk`5dX
zI39?@1JVMELi8#k$aI0k!%oVJt{~^!Qj+soK|U#va={zqVy~3s(uE+UH5jL81Si1d
zI7JN#4jd0S9&kM1c);<%|K9^V@h*XSEOfiwdQMJ`j`*8iTwJVg-@aW(%tc2mQs23A
zr;hlOj(DWr(b1vfeo9A7Qs2LSzdk%XtRpU|<GxJCotr*2HFXIw(nL<(BIrE_s=tS9
zrHs|!?n@$$Dhmq>d5<Q`%F3kA=L^I#ckS9G8ygz~@yyQ7PTAkzABbrV4Gqa7M~*PA
zDG^(hr%#`rJA3vlbw~um==>D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk
zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4<K(v~e-0`X|tuw%!L<-MeAKzv^9r9ZHj
zIA^lJIPYaJLO(lotJ#3Ng=HIXzaVJ?@4HPKE+0L5G~U><mCdzixNk?_)npL+46H+5
zUf%LLC>t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_
zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSF<bBhOJw-2JSVm4$twM=Gbcu#?NnoajyaU
zu42Qjii(QdwN~C7zaQyi>X8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT}
zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv
zpk2L{9Q&|uI^b<6@i(Y+i<VNBebNQIr}-R=rnhRRY^v^dtbEpjhTm=2KpD!W8(dK6
zV^I0nDy0l%(-Bor>SxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO
zjd|8>6l{i~UxI244CGn2k<bNY|1`<`MuQs)e`1pPjfiq6O*(Kq;CR6Cfa3wj1C9qm
zJP`bX2rpUzB#?4UyshztEs$QsA6YD`bWR92%PO76AHXa>K@cJ|#ecwgSyt&HKA2)z
zrOO{op^o*-<OftNtCSy6v8+;lP{p!J`C%2y3*MC}Kd@rGO8K!B%PN%s%gIUq1Ls!7
A761SM

literal 0
HcmV?d00001

diff --git a/examples/responsive/public/icons/arrow-up.svg b/examples/responsive/public/icons/arrow-up.svg
new file mode 100644
index 000000000..ed732073b
--- /dev/null
+++ b/examples/responsive/public/icons/arrow-up.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24">
+  <title>Arrow Up</title>
+  <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path>
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/arrow.svg b/examples/responsive/public/icons/arrow.svg
new file mode 100644
index 000000000..9ae5d222f
--- /dev/null
+++ b/examples/responsive/public/icons/arrow.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6">
+  <title>ChevronDownMedium</title>
+  <rect id="ToDelete" fill="#ff13dc" opacity="0" /><path d="M9.99,1.01A.9999.9999,0,0,0,8.28266.30327L5,3.58594,1.71734.30327A.9999.9999,0,1,0,.30327,1.71734L4.29266,5.69673a.99965.99965,0,0,0,1.41468,0L9.69673,1.71734A.99669.99669,0,0,0,9.99,1.01Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/button.svg b/examples/responsive/public/icons/button.svg
new file mode 100644
index 000000000..c89dd41c2
--- /dev/null
+++ b/examples/responsive/public/icons/button.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/check.svg b/examples/responsive/public/icons/check.svg
new file mode 100644
index 000000000..6f218c3c9
--- /dev/null
+++ b/examples/responsive/public/icons/check.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  
+  <title>S Checkmark 18 N</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M15.656,3.8625l-.7275-.5665a.5.5,0,0,0-.7.0875L7.411,12.1415,4.0875,8.8355a.5.5,0,0,0-.707,0L2.718,9.5a.5.5,0,0,0,0,.707l4.463,4.45a.5.5,0,0,0,.75-.0465L15.7435,4.564A.5.5,0,0,0,15.656,3.8625Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/customize.svg b/examples/responsive/public/icons/customize.svg
new file mode 100644
index 000000000..3559166f4
--- /dev/null
+++ b/examples/responsive/public/icons/customize.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+  </defs>
+  <title>S Edit 18 N</title>
+  <rect id="Canvas"  opacity="0"  /><path class="a" d="M16.7835,4.1,13.9,1.216a.60751.60751,0,0,0-.433-.1765H13.45a.6855.6855,0,0,0-.4635.203L2.542,11.686a.49494.49494,0,0,0-.1255.211L1.0275,16.55c-.057.1885.2295.4255.3915.4255a.12544.12544,0,0,0,.031-.0035c.138-.0315,3.933-1.172,4.6555-1.389a.486.486,0,0,0,.207-.1245L16.7565,5.014a.686.686,0,0,0,.2-.4415A.61049.61049,0,0,0,16.7835,4.1ZM5.7,14.658c-1.0805.3245-2.431.7325-3.3645,1.011L3.34,12.304Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/delete.svg b/examples/responsive/public/icons/delete.svg
new file mode 100644
index 000000000..dd8f05646
--- /dev/null
+++ b/examples/responsive/public/icons/delete.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" >
+  <defs>
+    <style>
+      <!-- .a {
+        fill: #707070;
+      } -->
+    </style>
+  </defs>
+  <title>S Delete 18 N</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" /><path class="a" d="M15.75,3H12V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V3H1.25A.25.25,0,0,0,1,3.25v.5A.25.25,0,0,0,1.25,4h1L3.4565,16.55a.5.5,0,0,0,.5.45H13.046a.5.5,0,0,0,.5-.45L14.75,4h1A.25.25,0,0,0,16,3.75v-.5A.25.25,0,0,0,15.75,3ZM5.5325,14.5a.5.5,0,0,1-.53245-.46529L5,14.034l-.5355-8a.50112.50112,0,0,1,1-.067l.5355,8a.5.5,0,0,1-.46486.53283ZM9,14a.5.5,0,0,1-1,0V6A.5.5,0,0,1,9,6ZM11,3H6V2h5Zm1,11.034a.50112.50112,0,0,1-1-.067l.5355-8a.50112.50112,0,1,1,1,.067Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/edit.svg b/examples/responsive/public/icons/edit.svg
new file mode 100644
index 000000000..ee11f9ef8
--- /dev/null
+++ b/examples/responsive/public/icons/edit.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+  <defs>
+    <style>
+      .a {
+        fill: #707070;
+      }
+    </style>
+  </defs>
+  <title>S Edit 18 N</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M16.7835,4.1,13.9,1.216a.60751.60751,0,0,0-.433-.1765H13.45a.6855.6855,0,0,0-.4635.203L2.542,11.686a.49494.49494,0,0,0-.1255.211L1.0275,16.55c-.057.1885.2295.4255.3915.4255a.12544.12544,0,0,0,.031-.0035c.138-.0315,3.933-1.172,4.6555-1.389a.486.486,0,0,0,.207-.1245L16.7565,5.014a.686.686,0,0,0,.2-.4415A.61049.61049,0,0,0,16.7835,4.1ZM5.7,14.658c-1.0805.3245-2.431.7325-3.3645,1.011L3.34,12.304Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/layers.svg b/examples/responsive/public/icons/layers.svg
new file mode 100644
index 000000000..9ac9c11a3
--- /dev/null
+++ b/examples/responsive/public/icons/layers.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      <!-- .a {
+        fill: #707070;
+      } -->
+    </style>
+  </defs>
+  <title>S Layers 18 N </title>
+  <rect id="Canvas" opacity="0" /><path class="a" d="M14.144,9.969,9.2245,13.3825a.3945.3945,0,0,1-.45,0L3.856,9.969.929,12a.1255.1255,0,0,0,0,.2055l7.925,5.5a.2575.2575,0,0,0,.292,0l7.925-5.5a.1255.1255,0,0,0,0-.2055Z" />
+  <path class="a" d="M8.85,11.494.929,6a.1245.1245,0,0,1,0-.205L8.85.297a.265.265,0,0,1,.3,0l7.921,5.496a.1245.1245,0,0,1,0,.205L9.15,11.494A.265.265,0,0,1,8.85,11.494Z" />
+</svg>
diff --git a/examples/responsive/public/icons/move.svg b/examples/responsive/public/icons/move.svg
new file mode 100644
index 000000000..62da1e0d5
--- /dev/null
+++ b/examples/responsive/public/icons/move.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" >
+  <defs>
+    <style>
+      <!-- .a {
+        fill: #707070;
+      } -->
+    </style>
+  </defs>
+  <title>S Move 18 N</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M17,9a.25.25,0,0,0-.0565-.158L16,8.0145V8h-.0165L14.927,7.0735A.245.245,0,0,0,14.75,7a.25.25,0,0,0-.25.25V8H10V3.5h.75A.25.25,0,0,0,11,3.25a.24448.24448,0,0,0-.0735-.175L10,2.0165V2H9.9855L9.158,1.0565a.25.25,0,0,0-.316,0L8.0145,2H8v.0165L7.0735,3.073A.24449.24449,0,0,0,7,3.25a.25.25,0,0,0,.25.25H8V8H3.5V7.25A.25.25,0,0,0,3.25,7a.245.245,0,0,0-.175.0735L2.0165,8H2v.0145l-.9435.8275a.25.25,0,0,0,0,.316L2,9.9855V10h.0165l1.0565.926A.24552.24552,0,0,0,3.25,11a.25.25,0,0,0,.25-.25V10H8v4.5H7.25a.25.25,0,0,0-.25.25.24352.24352,0,0,0,.0735.175L8,15.9835V16h.0145l.8275.9435a.25.25,0,0,0,.316,0L9.9855,16H10v-.0165l.9265-1.057A.24349.24349,0,0,0,11,14.75a.25.25,0,0,0-.25-.25H10V10h4.5v.75a.25.25,0,0,0,.25.25.24549.24549,0,0,0,.175-.074L15.9835,10H16V9.9855l.9435-.8275A.25.25,0,0,0,17,9Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/square.svg b/examples/responsive/public/icons/square.svg
new file mode 100644
index 000000000..6eabc77db
--- /dev/null
+++ b/examples/responsive/public/icons/square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/button.svg b/examples/responsive/public/icons/toolbox/button.svg
new file mode 100644
index 000000000..7b0dc08ea
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/button.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      <!-- .a {
+        fill: #707070;
+      } -->
+    </style>
+  </defs>
+  <title>S Button 18 N</title>
+  <rect id="Canvas" opacity="0" /><path class="a" d="M13,4H5A5,5,0,0,0,5,14h8A5,5,0,0,0,13,4Zm0,9.05H5a4.05,4.05,0,0,1,0-8.1h8a4.05,4.05,0,0,1,0,8.1Z" />
+  <path class="a" d="M13,6.05H5a2.95,2.95,0,0,0,0,5.9h8a2.95,2.95,0,0,0,0-5.9Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/container.svg b/examples/responsive/public/icons/toolbox/container.svg
new file mode 100644
index 000000000..bb1559f0d
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/container.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 16h2v6h-6v-2H8v2H2v-6h2V8H2V2h6v2h8V2h6v6h-2v8zm-2 0V8h-2V6H8v2H6v8h2v2h8v-2h2zM4 4v2h2V4H4zm0 14v2h2v-2H4zM18 4v2h2V4h-2zm0 14v2h2v-2h-2z"/></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/link.svg b/examples/responsive/public/icons/toolbox/link.svg
new file mode 100644
index 000000000..1a0707929
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M14 13.5V8a4 4 0 1 0-8 0v5.5a6.5 6.5 0 1 0 13 0V4h2v9.5a8.5 8.5 0 1 1-17 0V8a6 6 0 1 1 12 0v5.5a3.5 3.5 0 0 1-7 0V8h2v5.5a1.5 1.5 0 0 0 3 0z"/></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/rectangle.svg b/examples/responsive/public/icons/toolbox/rectangle.svg
new file mode 100644
index 000000000..94abe1f8a
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/rectangle.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      <!-- .a {
+        fill: #707070;
+      } -->
+    </style>
+  </defs>
+  <title>S Rectangle 18 N</title>
+  <rect id="Canvas" opacity="0" /><path class="a" d="M1,2.5v13a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5V2.5a.5.5,0,0,0-.5-.5H1.5A.5.5,0,0,0,1,2.5ZM16,15H2V3H16Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/redo.svg b/examples/responsive/public/icons/toolbox/redo.svg
new file mode 100644
index 000000000..4026d152e
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/redo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+  <title>Redo</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M2.6685,6.271A5.19551,5.19551,0,0,1,6.1645,5H12.5V2.4a.4.4,0,0,1,.4-.4.39352.39352,0,0,1,.2635.1l3.762,3.7225a.25.25,0,0,1,0,.35L13.166,9.9a.39352.39352,0,0,1-.2635.1.4.4,0,0,1-.4-.4V7H6.0615A3.06949,3.06949,0,0,0,2.95,9.9a2.9445,2.9445,0,0,0,2.78274,3.09783Q5.86626,13.005,6,13H9.5a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5H6.237a5.16751,5.16751,0,0,1-5.213-4.5065A4.97349,4.97349,0,0,1,2.6685,6.271Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/text-fill.svg b/examples/responsive/public/icons/toolbox/text-fill.svg
new file mode 100644
index 000000000..6b9e72932
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/text-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 8H7v2h4v7h2v-7h4V8zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/text.svg b/examples/responsive/public/icons/toolbox/text.svg
new file mode 100644
index 000000000..9422b1082
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 5v14h14V5H5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9 7v7h-2v-7H7V8h10v2h-4z"/></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/undo.svg b/examples/responsive/public/icons/toolbox/undo.svg
new file mode 100644
index 000000000..77eb5dd98
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/undo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+  <title>Undo</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M15.3315,6.271A5.19551,5.19551,0,0,0,11.8355,5H5.5V2.4A.4.4,0,0,0,5.1,2a.39352.39352,0,0,0-.2635.1L1.072,5.8245a.25.25,0,0,0,0,.35L4.834,9.9a.39352.39352,0,0,0,.2635.1.4.4,0,0,0,.4-.4V7h6.441A3.06949,3.06949,0,0,1,15.05,9.9a2.9445,2.9445,0,0,1-2.78274,3.09783Q12.13375,13.005,12,13H8.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3.263a5.16751,5.16751,0,0,0,5.213-4.5065A4.97351,4.97351,0,0,0,15.3315,6.271Z" />
+</svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/video-fill.svg b/examples/responsive/public/icons/toolbox/video-fill.svg
new file mode 100644
index 000000000..903451cc9
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/video-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zm7.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"/></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/toolbox/video-line.svg b/examples/responsive/public/icons/toolbox/video-line.svg
new file mode 100644
index 000000000..eddc516b5
--- /dev/null
+++ b/examples/responsive/public/icons/toolbox/video-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zM5 5v14h14V5H5zm5.622 3.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"/></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/type.svg b/examples/responsive/public/icons/type.svg
new file mode 100644
index 000000000..c6b2de334
--- /dev/null
+++ b/examples/responsive/public/icons/type.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
\ No newline at end of file
diff --git a/examples/responsive/public/icons/youtube.svg b/examples/responsive/public/icons/youtube.svg
new file mode 100644
index 000000000..c48243850
--- /dev/null
+++ b/examples/responsive/public/icons/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
\ No newline at end of file
diff --git a/examples/responsive/seo/googlee6ec608adf0c9ed0.html b/examples/responsive/seo/googlee6ec608adf0c9ed0.html
new file mode 100644
index 000000000..9be2f3abb
--- /dev/null
+++ b/examples/responsive/seo/googlee6ec608adf0c9ed0.html
@@ -0,0 +1 @@
+google-site-verification: googlee6ec608adf0c9ed0.html
diff --git a/examples/responsive/seo/sitemap.xml b/examples/responsive/seo/sitemap.xml
new file mode 100644
index 000000000..358b6301a
--- /dev/null
+++ b/examples/responsive/seo/sitemap.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<url>
+  <loc>https://craft.js.org/</loc>
+  <lastmod>2020-01-04T06:39:23+00:00</lastmod>
+</url>
+
+<url>
+  <loc>https://craft.js.org/r/</loc>
+  <lastmod>2020-01-04T06:39:23+00:00</lastmod>
+</url>
+</urlset>
\ No newline at end of file
diff --git a/examples/responsive/seo/urllist.txt b/examples/responsive/seo/urllist.txt
new file mode 100755
index 000000000..724eb487e
--- /dev/null
+++ b/examples/responsive/seo/urllist.txt
@@ -0,0 +1 @@
+https://craft.js.org/
diff --git a/examples/responsive/styles/app.css b/examples/responsive/styles/app.css
new file mode 100644
index 000000000..982abed39
--- /dev/null
+++ b/examples/responsive/styles/app.css
@@ -0,0 +1,41 @@
+/* purgecss start ignore */
+@tailwind base;
+@tailwind components;
+@import url('https://use.typekit.net/mpa1wkh.css');
+html,
+body {
+  font-family: 'acumin-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+  color: rgb(75, 75, 75);
+  background: #e0e0e0;
+}
+/* purgecss end ignore */
+
+@tailwind utilities;
+
+.component-selected {
+  @apply relative;
+}
+.component-selected::after {
+  content: ' ';
+  @apply border-primary border border-dashed w-full h-full absolute left-0 top-0 pointer-events-none block;
+}
+
+.transition {
+  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+
+  padding: 10px 0.5rem;
+  border-top: 1px solid rgb(0 0 0 / 6%);
+}
diff --git a/examples/responsive/tailwind.config.js b/examples/responsive/tailwind.config.js
new file mode 100644
index 000000000..a65c8a297
--- /dev/null
+++ b/examples/responsive/tailwind.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#2680eb',
+        'dar-gray': '#4b4b4b',
+        'light-gray-0': '#eaeaea',
+        'light-gray-1': 'rgb(75,75,75)',
+        'light-gray-2': 'rgb(128,128,128)',
+        'renderer-gray': 'rgb(224, 224, 224)',
+        red: '#e34850',
+        'green-400': '#2d9d78',
+        'green-500': '#268e6c',
+      },
+    },
+  },
+  variants: {},
+  plugins: [],
+};
diff --git a/examples/responsive/tsconfig.json b/examples/responsive/tsconfig.json
new file mode 100644
index 000000000..ae305af4c
--- /dev/null
+++ b/examples/responsive/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "preserve",
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "baseUrl": ".",
+    "moduleResolution": "node",
+    "strict": true,
+    "allowJs": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "isolatedModules": true,
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/examples/responsive/types/svg.d.ts b/examples/responsive/types/svg.d.ts
new file mode 100644
index 000000000..cdb2b1a9a
--- /dev/null
+++ b/examples/responsive/types/svg.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/examples/responsive/utils/numToMeasurement.ts b/examples/responsive/utils/numToMeasurement.ts
new file mode 100644
index 000000000..b83421aaf
--- /dev/null
+++ b/examples/responsive/utils/numToMeasurement.ts
@@ -0,0 +1,32 @@
+export const isPercentage = (val: string) =>
+  typeof val === 'string' && val.indexOf('%') > -1;
+
+export const percentToPx = (value: any, comparativeValue: number) => {
+  if (value.indexOf('px') > -1 || value === 'auto' || !comparativeValue)
+    return value;
+  const percent = parseInt(value);
+  return (percent / 100) * comparativeValue + 'px';
+};
+export const pxToPercent = (value: any, comparativeValue: number) => {
+  const val = (Math.abs(value) / comparativeValue) * 100;
+  if (value < 0) return -1 * val;
+  else return Math.round(val);
+};
+export const getElementDimensions = (element: HTMLElement) => {
+  const computedStyle = getComputedStyle(element);
+
+  let height = element.clientHeight,
+    width = element.clientWidth; // width with padding
+
+  height -=
+    parseFloat(computedStyle.paddingTop) +
+    parseFloat(computedStyle.paddingBottom);
+  width -=
+    parseFloat(computedStyle.paddingLeft) +
+    parseFloat(computedStyle.paddingRight);
+
+  return {
+    width,
+    height,
+  };
+};
diff --git a/examples/responsive/utils/text.ts b/examples/responsive/utils/text.ts
new file mode 100644
index 000000000..25ec5787a
--- /dev/null
+++ b/examples/responsive/utils/text.ts
@@ -0,0 +1,4 @@
+export const capitalize = (text: string) =>
+  text[0].toUpperCase() + text.substr(1, text.length);
+export const weightDescription = (weight: number) =>
+  weight === 400 ? 'Regular' : weight === 500 ? 'Medium' : 'Bold';
diff --git a/yarn.lock b/yarn.lock
index 0e94ac3d9..4b37d659d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10877,6 +10877,48 @@ clsx@latest:
   languageName: unknown
   linkType: soft
 
+"example-responsive@workspace:examples/responsive":
+  version: 0.0.0-use.local
+  resolution: "example-responsive@workspace:examples/responsive"
+  dependencies:
+    "@babel/core": 7.7.5
+    "@craftjs/core": "workspace:*"
+    "@craftjs/layers": "workspace:*"
+    "@fullhuman/postcss-purgecss": 1.3.0
+    "@material-ui/core": 4.5.2
+    "@material-ui/icons": 4.5.1
+    "@types/classnames": 2.2.9
+    "@types/node": 12.12.5
+    "@types/react": 18.0.27
+    "@types/react-color": 3.0.1
+    "@types/styled-components": 4.4.1
+    autoprefixer: latest
+    babel-plugin-inline-react-svg: 2.0.1
+    classnames: 2.2.6
+    cross-env: 6.0.3
+    cssnano: 4.1.10
+    debounce: 1.2.0
+    lzutf8: 0.5.5
+    next: 13.1.6
+    next-seo: 4.24.0
+    postcss: latest
+    postcss-import: 12.0.1
+    postcss-preset-env: 6.7.0
+    re-resizable: 6.1.0
+    react: 18.2.0
+    react-color: 2.17.3
+    react-contenteditable: 3.3.2
+    react-dom: 18.2.0
+    react-frame-component: ^5.2.6
+    react-loading: 2.0.3
+    react-rnd: 10.1.1
+    react-youtube: 7.9.0
+    styled-components: 4.4.1
+    tailwindcss: latest
+    typescript: 4.9.5
+  languageName: unknown
+  linkType: soft
+
 "execa@npm:5.0.0, execa@npm:^5.0.0":
   version: 5.0.0
   resolution: "execa@npm:5.0.0"
@@ -20143,6 +20185,17 @@ clsx@latest:
   languageName: node
   linkType: hard
 
+"react-frame-component@npm:^5.2.6":
+  version: 5.2.6
+  resolution: "react-frame-component@npm:5.2.6"
+  peerDependencies:
+    prop-types: ^15.5.9
+    react: ">= 16.3"
+    react-dom: ">= 16.3"
+  checksum: 6669a0acc1532b53e80b14688b06d64bfab88103a1e4377a386f4350a51d76494b48ac1b8f6818bd60ae2d37cce015314ce725d807be72e9fe9258e9303bb6ec
+  languageName: node
+  linkType: hard
+
 "react-helmet-async@npm:*, react-helmet-async@npm:^1.3.0":
   version: 1.3.0
   resolution: "react-helmet-async@npm:1.3.0"