diff --git a/index.html b/index.html
index 96c20c4b7..e27aa6850 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,10 @@
+
+
+
+
diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
new file mode 100644
index 000000000..455fc1e8a
--- /dev/null
+++ b/src/components/component_preview/component_preview.js
@@ -0,0 +1,80 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
+
+export default {
+ components: {
+ Checkbox,
+ ColorInput
+ },
+ props: [
+ 'shadow',
+ 'shadowControl',
+ 'previewClass',
+ 'previewStyle',
+ 'previewCss',
+ 'disabled',
+ 'invalid',
+ 'noColorControl'
+ ],
+ emits: ['update:shadow'],
+ data () {
+ return {
+ colorOverride: undefined,
+ lightGrid: false,
+ zoom: 100,
+ randomSeed: genRandomSeed()
+ }
+ },
+ computed: {
+ hideControls () {
+ return typeof this.shadow === 'string'
+ }
+ },
+ watch: {
+ previewCss () {
+ this.update()
+ },
+ previewStyle () {
+ this.update()
+ },
+ zoom () {
+ this.update()
+ }
+ },
+ methods: {
+ updateProperty (axis, value) {
+ this.$emit('update:shadow', { axis, value: Number(value) })
+ },
+ update () {
+ const styleEl = document.getElementById('component-style-holder')
+ const styleSheet = styleEl.sheet
+
+ for (let i = styleEl.sheet.cssRules.length - 1; i >= 0; --i) {
+ styleEl.sheet.deleteRule(i)
+ }
+
+ const result = []
+
+ if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
+
+ const styleRule = [
+ '#component-preview-', this.randomSeed, ' {\n',
+ '.preview-block {\n',
+ `zoom: ${this.zoom / 100};`,
+ this.previewStyle,
+ '\n}',
+ '\n}'
+ ].join('')
+
+ styleSheet.insertRule(styleRule)
+ styleSheet.insertRule([
+ '#component-preview-', this.randomSeed, ' {\n',
+ this.previewCss,
+ ...result,
+ '\n}'
+ ].join(''), 'index-max')
+ }
+ }
+}
diff --git a/src/components/component_preview/component_preview.scss b/src/components/component_preview/component_preview.scss
new file mode 100644
index 000000000..bb83b7908
--- /dev/null
+++ b/src/components/component_preview/component_preview.scss
@@ -0,0 +1,151 @@
+.ComponentPreview {
+ display: grid;
+ grid-template-columns: 1em 1fr 1fr 1em;
+ grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
+ grid-template-areas:
+ "header header header header "
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "x-slide x-slide x-slide . "
+ "x-num x-num y-num y-num "
+ "assists assists assists assists";
+ grid-gap: 0.5em;
+
+ &:not(.-shadow-controls) {
+ grid-template-areas:
+ "header header header header "
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "assists assists assists assists";
+ grid-template-rows: 2em 1fr 1fr 1fr max-content;
+ }
+
+ .header {
+ grid-area: header;
+ place-self: baseline center;
+ line-height: 2;
+ }
+
+ .invalid-container {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center center;
+ background-color: rgb(100 0 0 / 50%);
+
+ .alert {
+ padding: 0.5em 1em;
+ }
+ }
+
+ .assists {
+ grid-area: assists;
+ display: grid;
+ grid-auto-flow: row;
+ grid-auto-rows: 2em;
+ grid-gap: 0.5em;
+ }
+
+ .input-light-grid {
+ justify-self: center;
+ }
+
+ .input-number {
+ min-width: 2em;
+ }
+
+ .x-shift-number {
+ grid-area: x-num;
+ justify-self: right;
+ }
+
+ .y-shift-number {
+ grid-area: y-num;
+ justify-self: left;
+ }
+
+ .x-shift-number,
+ .y-shift-number {
+ input {
+ max-width: 4em;
+ }
+ }
+
+ .x-shift-slider {
+ grid-area: x-slide;
+ height: auto;
+ align-self: start;
+ min-width: 10em;
+ }
+
+ .y-shift-slider {
+ grid-area: y-slide;
+ writing-mode: vertical-lr;
+ justify-self: left;
+ min-height: 10em;
+ }
+
+ .x-shift-slider,
+ .y-shift-slider {
+ padding: 0;
+ }
+
+ .preview-window {
+ --__grid-color1: rgb(102 102 102);
+ --__grid-color2: rgb(153 153 153);
+ --__grid-color1-disabled: rgb(102 102 102 / 20%);
+ --__grid-color2-disabled: rgb(153 153 153 / 20%);
+
+ &.-light-grid {
+ --__grid-color1: rgb(205 205 205);
+ --__grid-color2: rgb(255 255 255);
+ --__grid-color1-disabled: rgb(205 205 205 / 20%);
+ --__grid-color2-disabled: rgb(255 255 255 / 20%);
+ }
+
+ position: relative;
+ grid-area: preview;
+ aspect-ratio: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 10em;
+ min-height: 10em;
+ background-color: var(--__grid-color2);
+ background-image:
+ linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
+ linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
+ linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
+ background-size: 20px 20px;
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+ border-radius: var(--roundness);
+
+ &.disabled {
+ background-color: var(--__grid-color2-disabled);
+ background-image:
+ linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+ linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
+ linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
+ }
+
+ .preview-block {
+ background: var(--background, var(--bg));
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 33%;
+ min-height: 33%;
+ max-width: 80%;
+ max-height: 80%;
+ border-width: 0;
+ border-style: solid;
+ border-color: var(--border);
+ border-radius: var(--roundness);
+ box-shadow: var(--shadow);
+ }
+ }
+}
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index be9d25ac5..7e226e59a 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -2,13 +2,8 @@
-
-
-
-
-
-