feat: centralized dimentions

src/app/tools/embed/[embed]/customize/components/PreviewWrapper/index.css.ts

@@ -0,0 +1,26 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const fadeOutBorder = keyframes({
+  from: {
+    outline: '1rem solid #ff0000ff',
+  },
+  to: {
+    outline: '1rem solid #ff000000',
+  },
+});
+
+export const wrapper = style({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  overflow: 'hidden',
+});
+
+export const animated = style({
+  animation: `${fadeOutBorder} 0.5s linear`,
+
+  ':hover': {
+    outline: '1rem solid #ff000080',
+  },
+});

src/app/tools/embed/[embed]/customize/components/PreviewWrapper/index.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@radix-ui/themes';
+import { useEffect, useRef } from 'react';
+import { useEmbedStateCurry } from '../../../../../../../stores/embedState/utilities';
+import { previews } from '../../../../configurations';
+import * as styles from './index.css';
+
+interface PreviewWrapperProps {
+  name: keyof typeof previews;
+}
+
+export function PreviewWrapper({ name }: PreviewWrapperProps) {
+  const { useState } = useEmbedStateCurry();
+  const width = useState('width');
+  const height = useState('height');
+  const Preview = previews[name];
+  const wrapper = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!wrapper.current) return;
+
+    wrapper.current.classList.remove(styles.animated);
+    void wrapper.current.offsetWidth;
+    wrapper.current.classList.add(styles.animated);
+  }, [width, height]);
+
+  return (
+    <Box
+      ref={wrapper}
+      className={styles.wrapper}
+      width={`${width}px`}
+      height={`${height}px`}
+    >
+      <Preview />
+    </Box>
+  );
+}

src/app/tools/embed/[embed]/customize/page.tsx

@@ -11,10 +11,11 @@ import * as App from '../../../../../stores/app';
 import * as EmbedState from '../../../../../stores/embedState';
 import { EmbedConfig } from '../../../../../stores/embedState';
 import { EmbedItemType } from '../../../../../stores/embedState/constants';
-import { configurations, previews } from '../../configurations';
+import { configurations } from '../../configurations';
 import { Boolean } from './components/Boolean';
 import { Color } from './components/Color';
 import { Enum } from './components/Enum';
+import { PreviewWrapper } from './components/PreviewWrapper';
 import { Radius } from './components/Radius';
 import { RichText } from './components/RichText';
 import { Size } from './components/Size';
@@ -34,7 +35,6 @@ export default function Page({
   const embedStateStore = EmbedState.useStore();
   const appStore = App.useStore();
   const config = configurations[params.embed] as EmbedConfig;
-  const Preview = previews[params.embed];
   const [backgroundImage, setBackgroundImage] = useState(imgur('SO13zur'));
   const fileInput = useRef<HTMLInputElement>();
 
@@ -210,16 +210,16 @@ export default function Page({
               </Button>
             </Flex>
 
-            <Flex
+            <Box
               flexGrow="1"
               style={{
                 background: `url(${backgroundImage}) center / cover no-repeat`,
               }}
-              align="center"
+              position="relative"
-              justify="center"
+              overflow="hidden"
             >
-              <Preview />
+              <PreviewWrapper name={params.embed} />
-            </Flex>
+            </Box>
           </Flex>
         </Box>
       </Flex>

src/app/tools/embed/configurations/breakdown.tsx

@@ -20,14 +20,11 @@ const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
 }));
 
 export const breakdownConfig = {
+  width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 },
+  height: { type: EmbedItemType.Slider, default: 640, min: 128, max: 1024 },
+
   showTotal: { type: EmbedItemType.Boolean, default: true, pad: true },
 
-  listWidth: {
-    type: EmbedItemType.Slider,
-    default: 320,
-    min: 128,
-    max: 640,
-  },
   listGap: { type: EmbedItemType.Size, default: '2' },
   listMaxTanks: {
     type: EmbedItemType.Slider,

src/components/TanksEmbed.tsx

@@ -27,7 +27,8 @@ export function BreakdownEmbedWrapper({
     <Flex
       direction="column"
       gap={useState('listGap')}
-      width={`${useState('listWidth')}px`}
+      justify="center"
+      height="100%"
     >
       {children}
     </Flex>

src/stores/embedState/index.ts

@@ -3,7 +3,12 @@
 import * as radixColors from '@radix-ui/colors';
 import { create } from 'zustand';
 import { createNextSafeStore } from '../../core/zustand/createNextSafeStore';
-import { EmbedItemType, radixGrays, radixTextWeights } from './constants';
+import {
+  EmbedConfigItemType,
+  EmbedItemType,
+  radixGrays,
+  radixTextWeights,
+} from './constants';
 
 export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
 export type RadixSizeWithout0 = Exclude<RadixSize, '0'>;
@@ -32,7 +37,10 @@ export type ExtractEmbedConfigTypes<Config extends EmbedConfig> = {
   } & EmbedConfigItem)['default'];
 };
 
-export type EmbedConfig = Record<string, EmbedConfigItem>;
+export type EmbedConfig = {
+  width: EmbedConfigItemType<EmbedItemType.Slider>;
+  height: EmbedConfigItemType<EmbedItemType.Slider>;
+} & Record<string, EmbedConfigItem>;
 
 export type EmbedConfigItem = (
   | {