feat: new dynamic system

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

@@ -0,0 +1,86 @@
+import { grayA, grayDark, grayDarkA } from '@radix-ui/colors';
+import { use } from 'react';
+import {
+  BreakdownEmbedCard,
+  BreakdownEmbedWrapper,
+} from '../../../../components/TanksEmbed';
+import { tankDefinitionsArray } from '../../../../core/blitzkit/tankDefinitions';
+import { EmbedConfig } from '../../../../stores/embedState';
+import { EmbedItemType } from '../../../../stores/embedState/constants';
+import { useEmbedStateCurry } from '../../../../stores/embedState/utilities';
+
+export const breakdownConfig = {
+  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,
+    default: 4,
+    min: 0,
+    max: 8,
+    pad: true,
+  },
+
+  cardRadius: { type: EmbedItemType.Radius, default: '2' },
+  cardHeaderBackgroundColor: {
+    type: EmbedItemType.Color,
+    default: grayDarkA.grayA3,
+  },
+  cardHeaderPadding: { type: EmbedItemType.Size, default: '1' },
+  cardTitle: {
+    type: EmbedItemType.RichText,
+    default: { color: grayDark.gray12, weight: 'bold', size: '3' },
+  },
+  cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true },
+  cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true },
+  cardBodyBackgroundColor: {
+    type: EmbedItemType.Color,
+    default: grayA.grayA11,
+  },
+  cardBodyPadding: {
+    type: EmbedItemType.Size,
+    default: '2',
+    pad: true,
+  },
+
+  columnGap: { type: EmbedItemType.Size, default: '0' },
+  columnValue: {
+    type: EmbedItemType.RichText,
+    default: { color: grayDark.gray12, size: '3', weight: 'regular' },
+  },
+  columnLabel: {
+    type: EmbedItemType.RichText,
+    default: { color: 'gray', size: '2', weight: 'regular' },
+    pad: true,
+  },
+
+  column1Unit: { type: EmbedItemType.String, default: '' },
+  column2Unit: { type: EmbedItemType.String, default: '%' },
+  column3Unit: { type: EmbedItemType.String, default: '' },
+  column4Unit: { type: EmbedItemType.String, default: '' },
+  column1Label: { type: EmbedItemType.String, default: 'Battles' },
+  column2Label: { type: EmbedItemType.String, default: 'Winrate' },
+  column3Label: { type: EmbedItemType.String, default: 'WN8' },
+  column4Label: { type: EmbedItemType.String, default: 'Damage' },
+} satisfies EmbedConfig;
+
+export function BreakdownPreview() {
+  const tanks = use(tankDefinitionsArray);
+  const { useState } = useEmbedStateCurry<typeof breakdownConfig>();
+
+  return (
+    <BreakdownEmbedWrapper>
+      {useState('showTotal') && <BreakdownEmbedCard tank={null} />}
+
+      {tanks.slice(0, useState('listMaxTanks')).map((tank) => (
+        <BreakdownEmbedCard key={tank.id} tank={tank} />
+      ))}
+    </BreakdownEmbedWrapper>
+  );
+}

src/app/tools/embed/configurations/index.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { EmbedConfig } from '../../../../stores/embedState';
+import { BreakdownPreview, breakdownConfig } from './breakdown';
+
+export const configurations = {
+  breakdown: breakdownConfig,
+} satisfies Record<string, EmbedConfig>;
+
+export const previews = {
+  breakdown: BreakdownPreview,
+} satisfies Record<string, () => ReactNode>;

src/app/tools/embed/customize/[embed]/components/Boolean.tsx

@@ -0,0 +1,18 @@
+import { Switch } from '@radix-ui/themes';
+import * as EmbedState from '../../../../../../stores/embedState';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function Boolean({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Switch
+      checked={EmbedState.use((state) => state[configKey] as boolean)}
+      onCheckedChange={() => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = !draft[configKey];
+        });
+      }}
+    />
+  );
+}

src/app/tools/embed/customize/[embed]/components/Color.tsx

@@ -0,0 +1,48 @@
+import { Slider } from '@radix-ui/themes';
+import { useRef } from 'react';
+import * as EmbedState from '../../../../../../stores/embedState';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function Color({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+  const embedStore = EmbedState.useStore();
+  const input = useRef<HTMLInputElement>(null);
+
+  return (
+    <>
+      <input
+        ref={input}
+        type="color"
+        value={EmbedState.use((state) =>
+          (state[configKey] as string).slice(0, 7),
+        )}
+        onChange={(event) => {
+          mutateEmbedState((draft) => {
+            let alpha = (draft[configKey] as string).slice(7, 9);
+            if (alpha.length === 0) alpha = 'ff';
+            draft[configKey] = `${event.target.value}${alpha}`;
+          });
+        }}
+      />
+      <Slider
+        min={0}
+        max={255}
+        value={[
+          EmbedState.use((state) => {
+            let alpha = (state[configKey] as string).slice(7, 9);
+            if (alpha.length === 0) return 255;
+            return parseInt(alpha, 16);
+          }),
+        ]}
+        onValueChange={([value]) => {
+          mutateEmbedState((draft) => {
+            if (!input.current) return;
+
+            const color = input.current.value;
+            draft[configKey] = `${color}${value.toString(16)}`;
+          });
+        }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import * as EmbedState from '../../../../../stores/embedState';
+import { configurations } from '../../configurations';
+import { extractEmbedConfigDefaults } from '../../utilities';
+
+export default function Layout({
+  params,
+  children,
+}: {
+  params: { embed: keyof typeof configurations };
+  children: React.ReactNode;
+}) {
+  const config = configurations[params.embed];
+  const initialState = useMemo(
+    () => extractEmbedConfigDefaults(config),
+    [params.embed],
+  );
+
+  return (
+    <EmbedState.Provider data={initialState}>{children}</EmbedState.Provider>
+  );
+}

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

@@ -0,0 +1,524 @@
+'use client';
+
+import { ImageIcon } from '@radix-ui/react-icons';
+import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
+import { capitalize, startCase } from 'lodash';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import { NAVBAR_HEIGHT } from '../../../../../components/Navbar';
+import PageWrapper from '../../../../../components/PageWrapper';
+import { imgur } from '../../../../../core/blitzkit/imgur';
+import { EmbedConfig } from '../../../../../stores/embedState';
+import { EmbedItemType } from '../../../../../stores/embedState/constants';
+import { configurations, previews } from '../../configurations';
+import { Boolean } from './components/Boolean';
+import { Color } from './components/Color';
+
+export interface EmbedPreviewControllerProps {
+  configKey: string;
+}
+
+export default function Page({
+  params,
+}: {
+  params: { embed: keyof typeof configurations };
+}) {
+  const config = configurations[params.embed] as EmbedConfig;
+  const Preview = previews[params.embed];
+  const [backgroundImage, setBackgroundImage] = useState(imgur('SO13zur'));
+  const fileInput = useRef<HTMLInputElement>();
+
+  useEffect(() => {
+    fileInput.current = document.createElement('input');
+    fileInput.current.type = 'file';
+    fileInput.current.style.display = 'none';
+    fileInput.current.accept = 'image/*';
+    fileInput.current.onchange = (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      setBackgroundImage(URL.createObjectURL(file));
+    };
+  }, []);
+
+  return (
+    <PageWrapper padding="0" size={1028 + 640}>
+      <Flex>
+        <ScrollArea
+          scrollbars="vertical"
+          style={{ height: '100%', maxWidth: 320 }}
+        >
+          <Flex direction="column" gap="2" p="4">
+            <Heading mb="4">Customize</Heading>
+
+            {Object.keys(config).map((configKey) => {
+              const item = config[configKey];
+              let control: ReactNode;
+              let oneLiner = false;
+
+              switch (item.type) {
+                case EmbedItemType.Boolean: {
+                  control = <Boolean configKey={configKey} />;
+                  oneLiner = true;
+                  break;
+                }
+
+                case EmbedItemType.Color: {
+                  control = <Color configKey={configKey} />;
+                  break;
+                }
+              }
+
+              return (
+                <Flex
+                  direction={oneLiner ? undefined : 'column'}
+                  gap={oneLiner ? '2' : '1'}
+                  justify={oneLiner ? 'between' : undefined}
+                  mb="2"
+                  pb={item.pad ? '6' : undefined}
+                >
+                  <Text>{capitalize(startCase(configKey as string))}</Text>
+                  <Flex gap="2" align="center">
+                    {control}
+                  </Flex>
+                </Flex>
+              );
+            })}
+
+            {/* {Object.entries(config).map(([configKeyRaw, configItem]) => {
+              const configKey = configKeyRaw as keyof (
+                | Immutable<ExtractEmbedConfigTypes<Config>>
+                | ExtractEmbedConfigTypes<Config>
+              );
+              const stateItem = state[configKey];
+              let control: ReactNode;
+
+              if (configItem.type === EmbedItemType.Slider) {
+                control = (
+                  <Slider
+                    state={
+                      stateItem as EmbedConfigItemStateType<EmbedItemType.Slider>
+                    }
+                    config={configItem as EmbedItemType<EmbedItemType.Slider>}
+                  />
+                );
+              }
+
+              // switch (configItem.type) {
+              //   case EmbedConfigType.Slider: {
+              //     control = (
+
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.Boolean: {
+              //     control = (
+              //       <Switch
+              //         checked={state[configKey] as boolean}
+              //         onCheckedChange={(checked) =>
+              //           mutateState((draft) => {
+              //             (draft[configKey] as boolean) = checked;
+              //           })
+              //         }
+              //       />
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.RichText: {
+              //     control = (
+              //       <>
+              //         <Select.Root
+              //           value={`${(state[configKey] as EmbedConfigItemType<EmbedConfigType.RichText>['default']).color}`}
+              //           onValueChange={(value) => {
+              //             mutateState((draft) => {
+              //               (
+              //                 draft[
+              //                   configKey
+              //                 ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
+              //               ).color = value as RadixTextColor;
+              //             });
+              //           }}
+              //         >
+              //           <Select.Trigger />
+              //           <Select.Content>
+              //             <Select.Item value="undefined">
+              //               <Box
+              //                 style={{
+              //                   display: 'inline-block',
+              //                   width: '1em',
+              //                   height: '1em',
+              //                   verticalAlign: 'text-top',
+              //                   borderRadius: toRadiusVar('full'),
+              //                   backgroundColor: 'white',
+              //                 }}
+              //               />{' '}
+              //               White
+              //             </Select.Item>
+              //             <Select.Item value="gray">
+              //               <Box
+              //                 style={{
+              //                   display: 'inline-block',
+              //                   width: '1em',
+              //                   height: '1em',
+              //                   verticalAlign: 'text-top',
+              //                   borderRadius: toRadiusVar('full'),
+              //                   backgroundColor: 'gray',
+              //                 }}
+              //               />{' '}
+              //               Gray
+              //             </Select.Item>
+              //             {Object.entries(radixColors)
+              //               .filter(
+              //                 ([key]) =>
+              //                   !key.endsWith('A') &&
+              //                   !key.endsWith('P3') &&
+              //                   !key.endsWith('Dark') &&
+              //                   !radixGrays.includes(key),
+              //               )
+              //               .map(([key]) => (
+              //                 <Select.Item key={key} value={key}>
+              //                   <Box
+              //                     style={{
+              //                       display: 'inline-block',
+              //                       width: '1em',
+              //                       height: '1em',
+              //                       verticalAlign: 'text-top',
+              //                       borderRadius: toRadiusVar('full'),
+              //                       backgroundColor: toColorVar({
+              //                         base: key as RadixColorBase,
+              //                         variant: '9',
+              //                       }),
+              //                     }}
+              //                   />{' '}
+              //                   {capitalize(key)}
+              //                 </Select.Item>
+              //               ))}
+              //           </Select.Content>
+              //         </Select.Root>
+              //         <Select.Root
+              //           value={
+              //             (
+              //               state[
+              //                 configKey
+              //               ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
+              //             ).size
+              //           }
+              //           onValueChange={(value) => {
+              //             mutateState((draft) => {
+              //               (
+              //                 draft[
+              //                   configKey
+              //                 ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
+              //               ).size = value as RadixSizeWithout0;
+              //             });
+              //           }}
+              //         >
+              //           <Select.Trigger />
+              //           <Select.Content>
+              //             {times(9, (index) => (
+              //               <Select.Item key={index} value={`${index + 1}`}>
+              //                 Size {index + 1}
+              //               </Select.Item>
+              //             ))}
+              //           </Select.Content>
+              //         </Select.Root>
+              //         <Select.Root
+              //           value={
+              //             (
+              //               state[
+              //                 configKey
+              //               ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
+              //             ).weight
+              //           }
+              //           onValueChange={(value) => {
+              //             mutateState((draft) => {
+              //               (
+              //                 draft[
+              //                   configKey
+              //                 ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
+              //               ).weight = value as RadixTextWeight;
+              //             });
+              //           }}
+              //         >
+              //           <Select.Trigger />
+              //           <Select.Content>
+              //             {radixTextWeights.map((weight) => (
+              //               <Select.Item key={weight} value={weight}>
+              //                 {startCase(weight)}
+              //               </Select.Item>
+              //             ))}
+              //           </Select.Content>
+              //         </Select.Root>
+              //       </>
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.Number: {
+              //     control = (
+              //       <TextField.Root
+              //         style={{ width: 64 }}
+              //         type="number"
+              //         value={state[configKey] as number}
+              //         onChange={(event) => {
+              //           mutateState((draft) => {
+              //             (draft[configKey] as number) = (
+              //               event.target as HTMLInputElement
+              //             ).valueAsNumber;
+              //           });
+              //         }}
+              //       >
+              //         {configItem.unit && (
+              //           <TextField.Slot side="right">px</TextField.Slot>
+              //         )}
+              //       </TextField.Root>
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.String: {
+              //     control = (
+              //       <TextField.Root
+              //         placeholder="Empty"
+              //         style={{ width: 64 }}
+              //         value={state[configKey] as string}
+              //         onChange={(event) => {
+              //           mutateState((draft) => {
+              //             (draft[configKey] as string) = (
+              //               event.target as HTMLInputElement
+              //             ).value;
+              //           });
+              //         }}
+              //       />
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.SizeWithout0:
+              //   case EmbedConfigType.Size: {
+              //     control = (
+              //       <Slider
+              //         value={[Number(state[configKey])]}
+              //         min={
+              //           configItem.type === EmbedConfigType.SizeWithout0 ? 1 : 0
+              //         }
+              //         max={9}
+              //         onValueChange={([value]) =>
+              //           mutateState((draft) => {
+              //             (draft[configKey] as RadixSize) =
+              //               `${value}` as RadixSize;
+              //           })
+              //         }
+              //       />
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.Radius: {
+              //     control = (
+              //       <Slider
+              //         value={[
+              //           (state[configKey] as RadixRadius) === 'full'
+              //             ? 5
+              //             : Number(state[configKey]),
+              //         ]}
+              //         min={0}
+              //         max={5}
+              //         onValueChange={([value]) =>
+              //           mutateState((draft) => {
+              //             (draft[configKey] as RadixRadius) = (
+              //               value === 5 ? 'full' : `${value}`
+              //             ) as RadixRadius;
+              //           })
+              //         }
+              //       />
+              //     );
+              //     break;
+              //   }
+
+              //   case EmbedConfigType.Color: {
+              //     control = (
+              //       <>
+              //         <Select.Root
+              //           value={(state[configKey] as RadixColor).base}
+              //           onValueChange={(value) => {
+              //             mutateState((draft) => {
+              //               (draft[configKey] as RadixColor).base =
+              //                 value as RadixColorBase;
+              //             });
+              //           }}
+              //         >
+              //           <Select.Trigger />
+              //           <Select.Content>
+              //             {Object.entries(radixColors)
+              //               .filter(
+              //                 ([key]) =>
+              //                   !key.endsWith('A') &&
+              //                   !key.endsWith('P3') &&
+              //                   !key.endsWith('Dark'),
+              //               )
+              //               .map(([key]) => (
+              //                 <Select.Item key={key} value={key}>
+              //                   <Box
+              //                     style={{
+              //                       display: 'inline-block',
+              //                       width: '1em',
+              //                       height: '1em',
+              //                       verticalAlign: 'text-top',
+              //                       borderRadius: toRadiusVar('full'),
+              //                       backgroundColor: toColorVar({
+              //                         base: key as RadixColorBase,
+              //                         variant: '9',
+              //                       }),
+              //                     }}
+              //                   />{' '}
+              //                   {capitalize(key)}
+              //                 </Select.Item>
+              //               ))}
+              //           </Select.Content>
+              //         </Select.Root>
+
+              //         <Select.Root
+              //           value={(state[configKey] as RadixColor).variant}
+              //           onValueChange={(value) => {
+              //             mutateState((draft) => {
+              //               (draft[configKey] as RadixColor).variant =
+              //                 value as RadixColorVariant;
+              //             });
+              //           }}
+              //         >
+              //           <Select.Trigger />
+              //           <Select.Content>
+              //             {times(12, (index) => {
+              //               const variant =
+              //                 `${index + 1}` as RadixColorVariantRaw;
+
+              //               return (
+              //                 <>
+              //                   <Select.Item value={variant}>
+              //                     <Box
+              //                       style={{
+              //                         display: 'inline-block',
+              //                         width: '1em',
+              //                         height: '1em',
+              //                         verticalAlign: 'text-top',
+              //                         borderRadius: toRadiusVar('full'),
+              //                         backgroundColor: toColorVar({
+              //                           base: (state[configKey] as RadixColor)
+              //                             .base,
+              //                           variant,
+              //                         }),
+              //                       }}
+              //                     />{' '}
+              //                     {variant}
+              //                   </Select.Item>
+              //                   <Select.Item value={`a${variant}`}>
+              //                     <Box
+              //                       style={{
+              //                         display: 'inline-block',
+              //                         overflow: 'hidden',
+              //                         width: '1em',
+              //                         height: '1em',
+              //                         verticalAlign: 'text-top',
+              //                         borderRadius: toRadiusVar('full'),
+              //                         backgroundColor: toColorVar({
+              //                           base: (state[configKey] as RadixColor)
+              //                             .base,
+              //                           variant: `a${variant}`,
+              //                         }),
+              //                       }}
+              //                     >
+              //                       <Box
+              //                         style={{
+              //                           width: '50%',
+              //                           height: '100%',
+              //                           backgroundColor: toColorVar({
+              //                             base: (state[configKey] as RadixColor)
+              //                               .base,
+              //                             variant,
+              //                           }),
+              //                         }}
+              //                       />
+              //                     </Box>{' '}
+              //                     {variant} translucent
+              //                   </Select.Item>
+              //                 </>
+              //               );
+              //             })}
+              //           </Select.Content>
+              //         </Select.Root>
+              //       </>
+              //     );
+              //     break;
+              //   }
+              // }
+
+              return (
+                <Flex
+                  direction="column"
+                  gap="1"
+                  mb="1"
+                  pb={configItem.pad ? '6' : undefined}
+                >
+                  <Text>{capitalize(startCase(configKey as string))}</Text>
+
+                  {control && <Flex gap="1">{control}</Flex>}
+                  {!control && <Text color="red">Immutable</Text>}
+                </Flex>
+              );
+            })} */}
+          </Flex>
+        </ScrollArea>
+
+        <Box
+          p="4"
+          flexGrow="1"
+          position="sticky"
+          top={`${NAVBAR_HEIGHT}px`}
+          height={`calc(100vh - ${NAVBAR_HEIGHT}px)`}
+        >
+          <Flex
+            direction="column"
+            height="100%"
+            style={{
+              borderRadius: 'var(--radius-3)',
+              overflow: 'hidden',
+              boxShadow: 'var(--shadow-3)',
+            }}
+          >
+            <Flex
+              justify="between"
+              align="center"
+              p="2"
+              pl="3"
+              style={{
+                backgroundColor: 'var(--color-panel-solid)',
+              }}
+            >
+              <Text color="gray">Example preview</Text>
+
+              <Button
+                variant="outline"
+                color="gray"
+                onClick={() => fileInput.current?.click()}
+              >
+                <ImageIcon /> Upload test background
+              </Button>
+            </Flex>
+
+            <Flex
+              flexGrow="1"
+              style={{
+                background: `url(${backgroundImage}) center / cover no-repeat`,
+              }}
+              align="center"
+              justify="center"
+            >
+              <Preview />
+            </Flex>
+          </Flex>
+        </Box>
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/embed/customize/breakdown/page.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { use } from 'react';
-import { EmbedCustomize } from '../../../../../components/EmbedCustomize';
-import {
-  BreakdownEmbedCard,
-  BreakdownEmbedWrapper,
-} from '../../../../../components/TanksEmbed';
-import { tanksDefinitionsArray } from '../../../../../core/blitzkit/tankDefinitions';
-import {
-  EmbedConfig,
-  EmbedConfigType,
-  ExtractEmbedConfigType,
-} from '../../types';
-
-const breakdownEmbedConfig = {
-  showTotal: { type: EmbedConfigType.Boolean, default: true },
-
-  listWidth: { type: EmbedConfigType.Slider, default: 320, min: 128, max: 640 },
-  listGap: { type: EmbedConfigType.Size, default: '2' },
-  listMaxTanks: {
-    type: EmbedConfigType.Slider,
-    default: 4,
-    min: 0,
-    max: 8,
-    pad: true,
-  },
-
-  cardRadius: { type: EmbedConfigType.Radius, default: '2' },
-  cardHeaderBackgroundColor: {
-    type: EmbedConfigType.Color,
-    default: { base: 'gray', variant: '3' },
-  },
-  cardHeaderPadding: { type: EmbedConfigType.Size, default: '1' },
-  cardTitle: {
-    type: EmbedConfigType.FullTextControl,
-    default: { color: undefined, weight: 'bold', size: '3' },
-  },
-  cardTitleTypeColor: { type: EmbedConfigType.Boolean, default: true },
-  cardTitleClassIcon: { type: EmbedConfigType.Boolean, default: true },
-  cardBodyBackgroundColor: {
-    type: EmbedConfigType.Color,
-    default: { base: 'gray', variant: '2' },
-  },
-  cardBodyPadding: { type: EmbedConfigType.Size, default: '2', pad: true },
-
-  columnGap: { type: EmbedConfigType.Size, default: '0' },
-  columnValue: {
-    type: EmbedConfigType.FullTextControl,
-    default: { color: undefined, size: '3', weight: 'regular' },
-  },
-  columnLabel: {
-    type: EmbedConfigType.FullTextControl,
-    default: { color: 'gray', size: '2', weight: 'regular' },
-    pad: true,
-  },
-
-  column1Unit: { type: EmbedConfigType.String, default: '' },
-  column2Unit: { type: EmbedConfigType.String, default: '%' },
-  column3Unit: { type: EmbedConfigType.String, default: '' },
-  column4Unit: { type: EmbedConfigType.String, default: '' },
-  column1Label: { type: EmbedConfigType.String, default: 'Battles' },
-  column2Label: { type: EmbedConfigType.String, default: 'Winrate' },
-  column3Label: { type: EmbedConfigType.String, default: 'WN8' },
-  column4Label: { type: EmbedConfigType.String, default: 'Damage' },
-} satisfies EmbedConfig;
-
-export type BreakdownEmbedState = ExtractEmbedConfigType<
-  typeof breakdownEmbedConfig
->;
-
-export default function Page() {
-  const tanks = use(tanksDefinitionsArray);
-
-  return (
-    <EmbedCustomize
-      config={breakdownEmbedConfig}
-      preview={(state) => (
-        <BreakdownEmbedWrapper state={state}>
-          {state.showTotal && <BreakdownEmbedCard state={state} tank={null} />}
-
-          {tanks.slice(0, state.listMaxTanks).map((tank) => (
-            <BreakdownEmbedCard key={tank.id} tank={tank} state={state} />
-          ))}
-        </BreakdownEmbedWrapper>
-      )}
-    />
-  );
-}

src/app/tools/embed/types.ts

@@ -1,106 +0,0 @@
-import * as radixColors from '@radix-ui/colors';
-
-export enum EmbedConfigType {
-  Number,
-  Radius,
-  Size,
-  Color,
-  SizeNo0,
-  TextColor,
-  String,
-  FullTextControl,
-  Boolean,
-  Slider,
-}
-
-export const radixGrays = [
-  'gray',
-  'mauve',
-  'slate',
-  'sage',
-  'olive',
-  'sand',
-] as const;
-
-export const radixTextWeights = ['light', 'regular', 'medium', 'bold'] as const;
-
-export type EmbedConfig = Record<string, EmbedConfigItem>;
-
-export type EmbedConfigItem = (
-  | {
-      type: EmbedConfigType.Slider;
-      default: number;
-      min: number;
-      max: number;
-    }
-  | {
-      type: EmbedConfigType.Boolean;
-      default: boolean;
-    }
-  | {
-      type: EmbedConfigType.Number;
-      default: number;
-      unit?: string;
-    }
-  | {
-      type: EmbedConfigType.String;
-      default: string;
-    }
-  | {
-      type: EmbedConfigType.Radius;
-      default: RadixRadius;
-    }
-  | {
-      type: EmbedConfigType.Size;
-      default: RadixSize;
-    }
-  | {
-      type: EmbedConfigType.SizeNo0;
-      default: RadixSizeNo0;
-    }
-  | {
-      type: EmbedConfigType.Color;
-      default: RadixColor;
-    }
-  | {
-      type: EmbedConfigType.TextColor;
-      default: RadixTextColor;
-    }
-  | {
-      type: EmbedConfigType.FullTextControl;
-      default: {
-        color: RadixTextColor;
-        size: RadixSizeNo0;
-        weight: RadixTextWeight;
-      };
-    }
-) & {
-  pad?: boolean;
-};
-
-export type RadixRadius = `${1 | 2 | 3 | 4}` | 'full';
-export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
-export type RadixTextWeight = (typeof radixTextWeights)[number];
-export type RadixSizeNo0 = Exclude<RadixSize, '0'>;
-export type RadixColor = { base: RadixColorBase; variant: RadixColorVariant };
-export type RadixColorBase = Exclude<
-  keyof typeof radixColors,
-  `${string}${'A' | 'P3' | 'Dark'}`
->;
-type RadixColorGrays = (typeof radixGrays)[number];
-export type RadixTextColor =
-  | Exclude<RadixColorBase, RadixColorGrays>
-  | 'gray'
-  | undefined;
-export type RadixColorVariantRaw =
-  `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
-export type RadixColorVariant = `${'' | 'a'}${RadixColorVariantRaw}`;
-
-export type ExtractEmbedConfigType<Config extends EmbedConfig> = {
-  [Key in keyof Config]: ({
-    type: Config[Key]['type'];
-  } & EmbedConfigItem)['default'];
-};
-
-export type EmbedConfigItemType<Type extends EmbedConfigType> =
-  (EmbedConfigItem & { type: Type })

src/app/tools/embed/utilities.ts

@@ -1,16 +1,16 @@
 import {
   EmbedConfig,
-  ExtractEmbedConfigType,
-  RadixColor,
+  ExtractEmbedConfigTypes,
+  RadixColorCompound,
   RadixRadius,
-} from './types';
+} from '../../../stores/embedState';
 
 export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
   config: Config,
 ) {
   return Object.fromEntries(
     Object.entries(config).map(([key, value]) => [key, value.default]),
-  ) as ExtractEmbedConfigType<Config>;
+  ) as ExtractEmbedConfigTypes<Config>;
 }
 
 export function toWidthVar(state: number) {
@@ -21,6 +21,6 @@ export function toRadiusVar(state: RadixRadius) {
   return `var(--radius-${state})`;
 }
 
-export function toColorVar(state: RadixColor) {
+export function toColorVar(state: RadixColorCompound) {
   return `var(--${state.base}-${state.variant})`;
 }

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -17,8 +17,8 @@ import { resolveReload } from '../../../../../core/blitzkit/resolveReload';
 import {
   TankDefinition,
   tankDefinitions,
+  tankDefinitionsArray,
   tankNames,
-  tanksDefinitionsArray,
 } from '../../../../../core/blitzkit/tankDefinitions';
 import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
 import { useAdExempt } from '../../../../../hooks/useAdExempt';
@@ -51,7 +51,7 @@ export const TankSearch = memo<TankSearchProps>(
     const awaitedGameDefinitions = use(gameDefinitions);
     const awaitedModelDefinitions = use(modelDefinitions);
     const awaitedTankDefinitions = use(tankDefinitions);
-    const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
+    const awaitedTanksDefinitionsArray = use(tankDefinitionsArray);
     const awaitedTankNames = use(tankNames);
     const filters = TankFilters.use();
     const sort = TankopediaSort.use();