@lightspeed/crane 1.1.2 → 1.2.0

package/template/sections/example-section/showcases/translations.ts

@@ -13,7 +13,7 @@ export default {
 
     '$label.card_button_title': 'Card button',
 
-    '$label.showcase_2.blockName': 'Reference section — Apparel',
+    '$label.showcase_2.blockName': 'Reference Section — Apparel',
     '$label.showcase_2.section_title.text': 'Trending collections',
     '$label.showcase_2.image_text_1.text': 'New t-shirts collection',
     '$label.showcase_2.image_text_2.text': 'Autumn looks',
@@ -21,6 +21,65 @@ export default {
     '$label.showcase_2.image_text_4.text': 'Story of Jane',
     '$label.showcase_2.image_link_1.text': '/products',
     '$label.template_standard_showcase_1.section_title.text': 'Something really catchy',
+
+    '$label.showcase_3.blockName': 'Reference Section — Bike Shop',
+    '$label.showcase_3.section_title.text': 'New arrivals',
+    '$label.showcase_3.image_text_1.text': 'New Arrivals',
+    '$label.showcase_3.image_link_1.text': '/products',
+    '$label.showcase_3.image_text_2.text': 'Fixed-gears',
+    '$label.showcase_3.image_text_3.text': 'Repair service',
+    '$label.showcase_3.image_text_4.text': 'Bike accessories',
+    '$label.showcase_1.info.text': 'Showcase 1: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_2.info.text': 'Showcase 2: This is area for useful tips regarding custom section usage',
+    '$label.showcase_3.info.text': 'Showcase 3: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_1.info.button.title': 'Showcase 1: Learn',
+    '$label.showcase_2.info.button.title': 'Showcase 2: More',
+    '$label.showcase_3.info.button.title': 'Showcase 3: More',
+
+    '$label.showcase_1.button.label': 'Content.ts: Button',
+    '$label.showcase_1.button.defaults.title': 'Button Title',
+    '$label.showcase_1.toggle.label': 'Toggle',
+    '$label.showcase_1.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.showcase_1.selectbox.placeholder': 'Select an option',
+    '$label.showcase_1.selectbox.label': 'Content.ts: Selectbox',
+    '$label.showcase_1.selectbox.description': 'Content.ts:Select an option from the dropdown to customize your settings',
+    '$label.showcase_1.selectbox.one.label': 'One label',
+    '$label.showcase_1.selectbox.two.label': 'Two label',
+
+    '$label.showcase_1.info.label': 'Content.ts: Info',
+    '$label.showcase_1.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_1.info.button.label': 'Content.ts: Learn more',
+
+    '$label.showcase_2.button.label': 'Content.ts: Button',
+    '$label.showcase_2.button.defaults.title': 'Button Title',
+    '$label.showcase_2.toggle.label': 'Toggle',
+    '$label.showcase_2.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.showcase_2.selectbox.placeholder': 'Select an option',
+    '$label.showcase_2.selectbox.label': 'Content.ts: Selectbox',
+    '$label.showcase_2.selectbox.description': 'Content.ts:Select an option from the dropdown to customize your settings',
+    '$label.showcase_2.selectbox.one.label': 'One label',
+    '$label.showcase_2.selectbox.two.label': 'Two label',
+
+    '$label.showcase_2.info.label': 'Content.ts: Info',
+    '$label.showcase_2.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_2.info.button.label': 'Content.ts: Learn more',
+
+    '$label.showcase_3.button.label': 'Content.ts: Button',
+    '$label.showcase_3.button.defaults.title': 'Button Title',
+    '$label.showcase_3.toggle.label': 'Toggle',
+    '$label.showcase_3.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.showcase_3.selectbox.placeholder': 'Select an option',
+    '$label.showcase_3.selectbox.label': 'Content.ts: Selectbox',
+    '$label.showcase_3.selectbox.description': 'Content.ts:Select an option from the dropdown to customize your settings',
+    '$label.showcase_3.selectbox.one.label': 'One label',
+    '$label.showcase_3.selectbox.two.label': 'Two label',
+
+    '$label.showcase_3.info.label': 'Content.ts: Info',
+    '$label.showcase_3.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_3.info.button.label': 'Content.ts: Learn more',
   },
 
   nl: {
@@ -43,5 +102,150 @@ export default {
     '$label.showcase_2.image_text_4.text': 'Verhaal van Jane',
     '$label.showcase_2.image_link_1.text': '/products',
     '$label.template_standard_showcase_1.section_title.text': 'Iets heel pakkends',
+
+    '$label.showcase_3.blockName': 'Referentiesectie — Fietsenwinkel',
+    '$label.showcase_3.section_title.text': 'Nieuw binnen',
+    '$label.showcase_3.image_text_1.text': 'Nieuw binnen',
+    '$label.showcase_3.image_link_1.text': '/products',
+    '$label.showcase_3.image_text_2.text': 'Vaste versnellingen',
+    '$label.showcase_3.image_text_3.text': 'Reparatieservice',
+    '$label.showcase_3.image_text_4.text': 'Fietsaccessoires',
+    '$label.showcase_1.info.text': 'Dit is het informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_2.info.text': 'Hier is een gebied voor nuttige tips over het gebruik van aangepaste secties',
+    '$label.showcase_1.info.button.title': 'Leren',
+    '$label.showcase_2.info.button.title': 'Meer',
+
+    '$label.showcase_1.button.label': 'Content.ts: Knop',
+    '$label.showcase_1.button.defaults.title': 'Knoptitel',
+    '$label.showcase_1.toggle.label': 'Schakelaar',
+    '$label.showcase_1.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.showcase_1.selectbox.placeholder': 'Selecteer een optie',
+    '$label.showcase_1.selectbox.label': 'Content.ts: Selectievak',
+    '$label.showcase_1.selectbox.description': 'Content.ts:Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.showcase_1.selectbox.one.label': 'Eén label',
+    '$label.showcase_1.selectbox.two.label': 'Twee label',
+
+    '$label.showcase_1.info.label': 'Content.ts: Info',
+    '$label.showcase_1.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele nuttige tips '
+        + 'kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_1.info.button.label': 'Content.ts: Meer informatie',
+
+    '$label.showcase_2.button.label': 'Content.ts: Knop',
+    '$label.showcase_2.button.defaults.title': 'Knoptitel',
+    '$label.showcase_2.toggle.label': 'Schakelaar',
+    '$label.showcase_2.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.showcase_2.selectbox.placeholder': 'Selecteer een optie',
+    '$label.showcase_2.selectbox.label': 'Content.ts: Selectievak',
+    '$label.showcase_2.selectbox.description': 'Content.ts:Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.showcase_2.selectbox.one.label': 'Eén label',
+    '$label.showcase_2.selectbox.two.label': 'Twee label',
+
+    '$label.showcase_2.info.label': 'Content.ts: Info',
+    '$label.showcase_2.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele '
+        + 'nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_2.info.button.label': 'Content.ts: Meer informatie',
+
+    '$label.showcase_3.button.label': 'Content.ts: Knop',
+    '$label.showcase_3.button.defaults.title': 'Knoptitel',
+    '$label.showcase_3.toggle.label': 'Schakelaar',
+    '$label.showcase_3.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.showcase_3.selectbox.placeholder': 'Selecteer een optie',
+    '$label.showcase_3.selectbox.label': 'Content.ts: Selectievak',
+    '$label.showcase_3.selectbox.description': 'Content.ts:Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.showcase_3.selectbox.one.label': 'Eén label',
+    '$label.showcase_3.selectbox.two.label': 'Twee label',
+
+    '$label.showcase_3.info.label': 'Content.ts: Info',
+    '$label.showcase_3.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele nuttige tips '
+        + 'kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_3.info.button.label': 'Content.ts: Meer informatie',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section de référence — Vente au détail',
+    '$label.showcase_1.section_title.text': 'Collections tendance',
+    '$label.showcase_1.section_description.text': 'Découvrez nos pièces préférées de cette saison et offrez-vous ces '
+        + 'pièces intemporelles adaptées à toutes les occasions. Nous offrons la livraison et les retours gratuits, ainsi '
+        + 'que des conseils de mode 24/7 via notre application mobile.',
+    '$label.showcase_1.image_text_1.text': 'Nouveautés',
+    '$label.showcase_1.image_text_2.text': 'Look sportif',
+    '$label.showcase_1.image_text_3.text': 'Accessoires d\'été',
+    '$label.showcase_1.image_text_4.text': 'Chaussures tendance',
+    '$label.showcase_1.image_link_1.text': '/products',
+
+    '$label.card_button_title': 'Bouton de carte',
+
+    '$label.showcase_2.blockName': 'Section de référence — Vêtements',
+    '$label.showcase_2.section_title.text': 'Collections tendance',
+    '$label.showcase_2.image_text_1.text': 'Nouvelle collection de t-shirts',
+    '$label.showcase_2.image_text_2.text': 'Looks d\'automne',
+    '$label.showcase_2.image_text_3.text': 'Garde-robe de Bianka',
+    '$label.showcase_2.image_text_4.text': 'Histoire de Jane',
+    '$label.showcase_2.image_link_1.text': '/products',
+    '$label.template_standard_showcase_1.section_title.text': 'Quelque chose de vraiment accrocheur',
+
+    '$label.showcase_3.blockName': 'Section de référence — Magasin de vélos',
+    '$label.showcase_3.section_title.text': 'Nouveautés',
+    '$label.showcase_3.image_text_1.text': 'Nouveautés',
+    '$label.showcase_3.image_link_1.text': '/products',
+    '$label.showcase_3.image_text_2.text': 'Vélos à pignon fixe',
+    '$label.showcase_3.image_text_3.text': 'Service de réparation',
+    '$label.showcase_3.image_text_4.text': 'Accessoires pour vélos',
+    '$label.showcase_1.info.text': 'Showcase 1: Ceci est une section d\'information où vous pouvez fournir des conseils utiles sur '
+        + 'l\'utilisation de la section personnalisée',
+    '$label.showcase_2.info.text': 'Showcase 2: Ceci est une zone pour des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.showcase_1.info.button.title': 'Showcase 1: Apprendre',
+    '$label.showcase_2.info.button.title': 'Showcase 2: Plus',
+
+    '$label.showcase_1.button.label': 'Content.ts: Bouton',
+    '$label.showcase_1.button.defaults.title': 'Titre du bouton',
+    '$label.showcase_1.toggle.label': 'Basculer',
+    '$label.showcase_1.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.showcase_1.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.showcase_1.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.showcase_1.selectbox.description': 'Content.ts:Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.showcase_1.selectbox.one.label': 'Un label',
+    '$label.showcase_1.selectbox.two.label': 'Deux label',
+
+    '$label.showcase_1.info.label': 'Content.ts: Info',
+    '$label.showcase_1.info.description': 'Content.ts: Ceci est une section d\'information où vous pouvez '
+        + 'fournir des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.showcase_1.info.button.label': 'Content.ts: En savoir plus',
+
+    '$label.showcase_2.button.label': 'Content.ts: Bouton',
+    '$label.showcase_2.button.defaults.title': 'Titre du bouton',
+    '$label.showcase_2.toggle.label': 'Basculer',
+    '$label.showcase_2.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.showcase_2.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.showcase_2.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.showcase_2.selectbox.description': 'Content.ts:Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.showcase_2.selectbox.one.label': 'Un label',
+    '$label.showcase_2.selectbox.two.label': 'Deux label',
+
+    '$label.showcase_2.info.label': 'Content.ts: Info',
+    '$label.showcase_2.info.description': 'Content.ts: Ceci est une section d\'information où vous pouvez fournir '
+        + 'des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.showcase_2.info.button.label': 'Content.ts: En savoir plus',
+
+    '$label.showcase_3.button.label': 'Content.ts: Bouton',
+    '$label.showcase_3.button.defaults.title': 'Titre du bouton',
+    '$label.showcase_3.toggle.label': 'Basculer',
+    '$label.showcase_3.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.showcase_3.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.showcase_3.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.showcase_3.selectbox.description': 'Content.ts:Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.showcase_3.selectbox.one.label': 'Un label',
+    '$label.showcase_3.selectbox.two.label': 'Deux label',
+
+    '$label.showcase_3.info.label': 'Content.ts: Info',
+    '$label.showcase_3.info.description': 'Content.ts: Ceci est une section d\'information où vous pouvez fournir '
+        + 'des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.showcase_3.info.button.label': 'Content.ts: En savoir plus',
   },
 } as const;

package/template/shared/{LanguageSelector.vue → components/LanguageSelector.vue}

@@ -22,13 +22,13 @@
 <script setup lang="ts">
 import { useVueBaseProps } from '@lightspeed/crane';
 import { computed } from 'vue';
-import { Design } from '../headers/example-header/type.ts';
+import { Design } from '../../headers/example-header/type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
-const externalContent = computed(() => baseProps.externalContent?.value as ExternalContentData);
-const isPreviewMode = computed(() => externalContent.value?.isPreviewMode ?? false);
-const sortedLanguages = computed(() => (externalContent.value?.languages
-  ? [...externalContent.value.languages].sort((a, b) => {
+const siteContent = computed(() => baseProps.site?.value satisfies SiteContent);
+const isPreviewMode = computed(() => siteContent.value?.isPreviewMode ?? false);
+const sortedLanguages = computed(() => (siteContent.value?.languages
+  ? [...siteContent.value.languages].sort((a, b) => {
     if (a.main && !b.main) return -1;
     if (!a.main && b.main) return 1;
     return 0;

package/template/shared/components/SectionWrapper.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="section">
+    <div class="section__wrapper">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.section {
+  padding: 60px 20px;
+
+  @media screen and (min-width: 700px) {
+    padding: 75px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding: 100px;
+  }
+
+  &__wrapper {
+    max-width: 1120px;
+    margin: 0 auto;
+  }
+}
+</style>

package/template/shared/utils.ts

@@ -0,0 +1,28 @@
+export function isDark(color: string): boolean {
+  if (!color) return false;
+
+  let r; let g; let b;
+
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '');
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else {
+      r = parseInt(hex.substring(0, 2), 16);
+      g = parseInt(hex.substring(2, 4), 16);
+      b = parseInt(hex.substring(4, 6), 16);
+    }
+  } else if (color.startsWith('rgb')) {
+    const rgbValues = color.match(/\d+/g);
+    if (rgbValues) {
+      [r, g, b] = rgbValues.map(Number);
+    }
+  }
+
+  if (r === undefined || g === undefined || b === undefined) return false;
+
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness < 128;
+}

package/template/templates/template.ts

@@ -18,7 +18,8 @@ export default {
     },
     {
       type: 'default',
-      id: 'slider_001',
+      id: 'slider',
+      showcase_id: '001',
     },
     {
       type: 'custom',

package/types.d.ts

@@ -8,13 +8,13 @@ declare module '*.vue' {
 }
 
 type ActionLinkType
-  = 'SCROLL_TO_TILE'
-  | 'HYPER_LINK'
-  | 'MAIL_LINK'
-  | 'TEL_LINK'
-  | 'GO_TO_STORE'
-  | 'GO_TO_STORE_LINK'
-  | 'GO_TO_PAGE';
+    = 'SCROLL_TO_TILE'
+    | 'HYPER_LINK'
+    | 'MAIL_LINK'
+    | 'TEL_LINK'
+    | 'GO_TO_STORE'
+    | 'GO_TO_STORE_LINK'
+    | 'GO_TO_PAGE';
 
 interface ButtonContentData {
   readonly title: string;
@@ -81,20 +81,20 @@ interface LogoContentData {
 }
 
 type GlobalColorsString =
-  'global.color.title' |
-  'global.color.body' |
-  'global.color.button' |
-  'global.color.link' |
-  'global.color.background';
+    'global.color.title' |
+    'global.color.body' |
+    'global.color.button' |
+    'global.color.link' |
+    'global.color.background';
 
 type GlobalFontsString =
-  'global.fontFamily.title' |
-  'global.fontFamily.body';
+    'global.fontFamily.title' |
+    'global.fontFamily.body';
 
 type GlobalTextSizeString =
-  'global.textSize.title' |
-  'global.textSize.subtitle' |
-  'global.textSize.body';
+    'global.textSize.title' |
+    'global.textSize.subtitle' |
+    'global.textSize.body';
 
 interface HSLColor {
   h: number;
@@ -140,9 +140,9 @@ interface TextareaDesignData extends TextDesignData {
 }
 
 type CapitalizationType =
-  'none'
-  | 'all'
-  | 'small';
+    'none'
+    | 'all'
+    | 'small';
 
 interface Frame {
   visible: boolean;
@@ -163,19 +163,19 @@ interface LogoDesignData {
 }
 
 type ButtonAppearance =
-  'solid-button'
-  | 'outline-button'
-  | 'text-link';
+    'solid-button'
+    | 'outline-button'
+    | 'text-link';
 
 type ButtonSize =
-  'small'
-  | 'medium'
-  | 'large';
+    'small'
+    | 'medium'
+    | 'large';
 
 type ButtonStyle =
-  'round-corner'
-  | 'rectangle'
-  | 'pill';
+    'round-corner'
+    | 'rectangle'
+    | 'pill';
 
 interface ButtonDesignData {
   appearance: ButtonAppearance | undefined;
@@ -187,9 +187,9 @@ interface ButtonDesignData {
 }
 
 type OverlayType =
-  'solid'
-  | 'gradient'
-  | 'none';
+    'solid'
+    | 'gradient'
+    | 'none';
 
 interface Overlay {
   type: OverlayType | undefined;
@@ -211,8 +211,8 @@ interface ToggleDesignData {
 }
 
 type BackgroundType =
-  'solid'
-  | 'gradient';
+    'solid'
+    | 'gradient';
 
 interface Background {
   type: BackgroundType | undefined;
@@ -247,32 +247,56 @@ interface TextareaContentEditor {
   readonly placeholder: Record<string, string>;
 }
 
-interface SimpleLink {
-    readonly url?: string,
-    readonly title?: string,
-    readonly target?: string,
+interface ReportAbuse {
+  readonly title: string;
+  readonly url: string | undefined;
+  readonly target: string | undefined;
 }
 
-interface SimpleLink {
-    readonly url?: string,
-    readonly title?: string,
-    readonly target?: string,
+interface MadeWith {
+  readonly url: string | undefined;
+  readonly target: string | undefined;
+  readonly icon: string | undefined;
+  readonly poweredBy: string | undefined;
+  readonly company: string | undefined;
 }
 
 interface Language {
-    readonly code: string;
-    readonly description: string;
-    readonly main: boolean;
-    readonly selected: boolean;
-    readonly url?: string;
+  readonly code: string;
+  readonly description: string;
+  readonly main: boolean;
+  readonly selected: boolean;
+  readonly url: string;
+}
+
+interface Account {
+  readonly title: string | undefined;
+  readonly url: string | undefined;
+  readonly target: string | undefined;
+}
+
+interface Cart {
+  readonly url: string | undefined;
+  readonly count: number;
+}
+
+interface LegalPage {
+  readonly title: string | undefined;
+  readonly url: string | undefined;
+}
+
+interface SiteContent {
+  readonly isPreviewMode: boolean;
+  readonly reportAbuse?: ReportAbuse;
+  readonly madeWith?: MadeWith;
+  readonly languages?: Language[];
+  readonly account?: Account;
+  readonly cart?: Cart;
+  readonly legalPages?: LegalPage[];
 }
 
 interface ExternalContentData {
-    readonly reportAbuse?: SimpleLink;
-    readonly account?: SimpleLink;
-    readonly languages?: Language[];
-    readonly legalLinks?: SimpleLink[];
-    readonly isPreviewMode?: boolean;
+    readonly site?: SiteContent;
 }
 
 interface ButtonContentEditor {
@@ -320,15 +344,15 @@ interface LogoContentEditor {
 }
 
 type ContentEditor =
-  TextContentEditor
-  | MultilineTextContentEditor
-  | ButtonContentEditor
-  | ImageContentEditor
-  | ToggleContentEditor
-  | SelectboxContentEditor
-  | MenuContentEditor
-  | NavigationMenuContentEditor
-  | LogoContentEditor;
+    TextContentEditor
+    | MultilineTextContentEditor
+    | ButtonContentEditor
+    | ImageContentEditor
+    | ToggleContentEditor
+    | SelectboxContentEditor
+    | MenuContentEditor
+    | NavigationMenuContentEditor
+    | LogoContentEditor;
 
 type InferContentType<T extends Record<string, ContentEditor>> = {
   readonly [P in keyof T]: MapEditorContentTypes[T[P]['type']]
@@ -388,20 +412,22 @@ interface ColorPickerDesignEditor {
 
 interface LogoDesignEditor {
   readonly type: 'LOGO';
-  readonly label: string | Record<string, string>;
+  readonly label?: string | Record<string, string>;
   defaults: Record<string, unknown>;
 }
 
 type DesignEditor =
-  TextDesignEditor
-  | ButtonDesignEditor
-  | ImageDesignEditor
-  | ToggleDesignEditor
-  | SelectboxDesignEditor
-  | BackgroundDesignEditor
-  | ColorPickerDesignEditor
-  | LogoDesignEditor;
+    TextDesignEditor
+    | ButtonDesignEditor
+    | ImageDesignEditor
+    | ToggleDesignEditor
+    | SelectboxDesignEditor
+    | BackgroundDesignEditor
+    | ColorPickerDesignEditor
+    | LogoDesignEditor;
 
 type InferDesignType<T extends Record<string, DesignEditor>> = {
   readonly [P in keyof T]: MapEditorDesignTypes[T[P]['type']]
 }
+
+type SettingsEditor = DesignEditor | ContentEditor;