refactor(typography): prioritize formatting and de-jargon font features

packages/vue/src/i18n/locales/de/panels.json

@@ -32,7 +32,7 @@
   "truncationDisabled": "Deaktiviert",
   "truncationEnding": "Auslassung am Ende",
   "maxLines": "Maximale Zeilen",
-  "openTypeFeatures": "OpenType-Funktionen",
+  "openTypeFeatures": "Schrifteigenschaften",
   "standardLigatures": "Standardligaturen",
   "contextualAlternates": "Kontextvarianten",
   "kerning": "Kerning",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "Sättigung",
   "blendModeColor": "Farbe",
   "blendModeLuminosity": "Luminanz"
-}
+}

packages/vue/src/i18n/locales/es/panels.json

@@ -43,7 +43,7 @@
   "truncationDisabled": "Desactivado",
   "truncationEnding": "Puntos suspensivos finales",
   "maxLines": "Líneas máximas",
-  "openTypeFeatures": "Funciones OpenType",
+  "openTypeFeatures": "Funciones de fuente",
   "standardLigatures": "Ligaduras estándar",
   "contextualAlternates": "Alternativas contextuales",
   "kerning": "Kerning",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "Saturación",
   "blendModeColor": "Color",
   "blendModeLuminosity": "Luminosidad"
-}
+}

packages/vue/src/i18n/locales/fr/panels.json

@@ -32,7 +32,7 @@
   "truncationDisabled": "Désactivée",
   "truncationEnding": "Points de suspension finaux",
   "maxLines": "Lignes maximales",
-  "openTypeFeatures": "Fonctions OpenType",
+  "openTypeFeatures": "Propriétés de police",
   "standardLigatures": "Ligatures standard",
   "contextualAlternates": "Variantes contextuelles",
   "kerning": "Crénage",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "Saturation",
   "blendModeColor": "Couleur",
   "blendModeLuminosity": "Luminosité"
-}
+}

packages/vue/src/i18n/locales/it/panels.json

@@ -32,7 +32,7 @@
   "truncationDisabled": "Disattivato",
   "truncationEnding": "Puntini finali",
   "maxLines": "Righe massime",
-  "openTypeFeatures": "Funzioni OpenType",
+  "openTypeFeatures": "Funzioni del font",
   "standardLigatures": "Legature standard",
   "contextualAlternates": "Alternative contestuali",
   "kerning": "Crenatura",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "Saturazione",
   "blendModeColor": "Colore",
   "blendModeLuminosity": "Luminosità"
-}
+}

packages/vue/src/i18n/locales/ja/panels.json

@@ -43,7 +43,7 @@
   "truncationDisabled": "無効",
   "truncationEnding": "末尾を省略",
   "maxLines": "最大行数",
-  "openTypeFeatures": "OpenType 機能",
+  "openTypeFeatures": "フォント機能",
   "standardLigatures": "標準合字",
   "contextualAlternates": "文脈依存字形",
   "kerning": "カーニング",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "彩度",
   "blendModeColor": "カラー",
   "blendModeLuminosity": "輝度"
-}
+}

packages/vue/src/i18n/locales/pl/panels.json

@@ -32,7 +32,7 @@
   "truncationDisabled": "Wyłączone",
   "truncationEnding": "Wielokropek na końcu",
   "maxLines": "Maksymalna liczba wierszy",
-  "openTypeFeatures": "Funkcje OpenType",
+  "openTypeFeatures": "Funkcje czcionki",
   "standardLigatures": "Ligatury standardowe",
   "contextualAlternates": "Alternatywy kontekstowe",
   "kerning": "Kerning",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "Nasycenie",
   "blendModeColor": "Kolor",
   "blendModeLuminosity": "Jasność"
-}
+}

packages/vue/src/i18n/locales/ru/panels.json

@@ -32,7 +32,7 @@
   "truncationDisabled": "Отключена",
   "truncationEnding": "Многоточие в конце",
   "maxLines": "Максимум строк",
-  "openTypeFeatures": "Функции OpenType",
+  "openTypeFeatures": "Свойства шрифта",
   "standardLigatures": "Стандартные лигатуры",
   "contextualAlternates": "Контекстные варианты",
   "kerning": "Кернинг",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "Насыщенность",
   "blendModeColor": "Цвет",
   "blendModeLuminosity": "Яркость"
-}
+}

packages/vue/src/i18n/locales/zh-cn/panels.json

@@ -32,7 +32,7 @@
   "truncationDisabled": "禁用",
   "truncationEnding": "末尾省略号",
   "maxLines": "最大行数",
-  "openTypeFeatures": "OpenType 功能",
+  "openTypeFeatures": "字体功能",
   "standardLigatures": "标准连字",
   "contextualAlternates": "上下文替代字形",
   "kerning": "字距调整",
@@ -246,4 +246,4 @@
   "blendModeSaturation": "饱和度",
   "blendModeColor": "颜色",
   "blendModeLuminosity": "明度"
-}
+}

packages/vue/src/i18n/messages/panels.ts

@@ -64,7 +64,7 @@ export const panelMessageDefaults = {
   truncationDisabled: 'Disabled',
   truncationEnding: 'Ending ellipsis',
   maxLines: 'Maximum lines',
-  openTypeFeatures: 'OpenType features',
+  openTypeFeatures: 'Font features',
   standardLigatures: 'Standard ligatures',
   contextualAlternates: 'Contextual alternates',
   kerning: 'Kerning',

src/components/properties/TypographySection.vue

@@ -196,6 +196,47 @@ function featureEnabled(features: Array<{ tag: string; enabled: boolean }>, tag:
         </SegmentedControl>
       </PanelFieldGroup>
 
+      <PanelFieldGroup :label="panels.textFormatting" class="mb-3" :ui="{ container: 'flex-row gap-1.5' }">
+        <div
+          class="inline-flex items-center gap-0.5 rounded bg-panel-field p-0.5 hover:bg-panel-field-hover"
+          role="toolbar"
+          :aria-label="panels.textFormatting"
+        >
+          <IconButton
+            :label="`${menu.bold} (${appMenuShortcutLabel('text.bold')})`"
+            size="md"
+            :active="ctx.activeFormatting.value.includes('bold')"
+            @click="ctx.actions.toggleBold"
+          >
+            <icon-lucide-bold class="size-3.5" />
+          </IconButton>
+          <IconButton
+            :label="`${menu.italic} (${appMenuShortcutLabel('text.italic')})`"
+            size="md"
+            :active="ctx.activeFormatting.value.includes('italic')"
+            @click="ctx.actions.toggleItalic"
+          >
+            <icon-lucide-italic class="size-3.5" />
+          </IconButton>
+          <IconButton
+            :label="`${menu.underline} (${appMenuShortcutLabel('text.underline')})`"
+            size="md"
+            :active="ctx.activeFormatting.value.includes('underline')"
+            @click="ctx.actions.toggleDecoration('UNDERLINE')"
+          >
+            <icon-lucide-underline class="size-3.5" />
+          </IconButton>
+          <IconButton
+            :label="menu.strikethrough"
+            size="md"
+            :active="ctx.activeFormatting.value.includes('strikethrough')"
+            @click="ctx.actions.toggleDecoration('STRIKETHROUGH')"
+          >
+            <icon-lucide-strikethrough class="size-3.5" />
+          </IconButton>
+        </div>
+      </PanelFieldGroup>
+
       <PanelGrid columns="two" class="mb-3">
         <PanelFieldGroup :label="panels.textCase">
           <AppSelect
@@ -256,47 +297,6 @@ function featureEnabled(features: Array<{ tag: string; enabled: boolean }>, tag:
           </label>
         </div>
       </PanelFieldGroup>
-
-      <PanelFieldGroup :label="panels.textFormatting" :ui="{ container: 'flex-row gap-1.5' }">
-        <div
-          class="inline-flex items-center gap-0.5 rounded bg-panel-field p-0.5 hover:bg-panel-field-hover"
-          role="toolbar"
-          :aria-label="panels.textFormatting"
-        >
-          <IconButton
-            :label="`${menu.bold} (${appMenuShortcutLabel('text.bold')})`"
-            size="md"
-            :active="ctx.activeFormatting.value.includes('bold')"
-            @click="ctx.actions.toggleBold"
-          >
-            <icon-lucide-bold class="size-3.5" />
-          </IconButton>
-          <IconButton
-            :label="`${menu.italic} (${appMenuShortcutLabel('text.italic')})`"
-            size="md"
-            :active="ctx.activeFormatting.value.includes('italic')"
-            @click="ctx.actions.toggleItalic"
-          >
-            <icon-lucide-italic class="size-3.5" />
-          </IconButton>
-          <IconButton
-            :label="`${menu.underline} (${appMenuShortcutLabel('text.underline')})`"
-            size="md"
-            :active="ctx.activeFormatting.value.includes('underline')"
-            @click="ctx.actions.toggleDecoration('UNDERLINE')"
-          >
-            <icon-lucide-underline class="size-3.5" />
-          </IconButton>
-          <IconButton
-            :label="menu.strikethrough"
-            size="md"
-            :active="ctx.activeFormatting.value.includes('strikethrough')"
-            @click="ctx.actions.toggleDecoration('STRIKETHROUGH')"
-          >
-            <icon-lucide-strikethrough class="size-3.5" />
-          </IconButton>
-        </div>
-      </PanelFieldGroup>
     </PanelSection>
   </TypographyControlsRoot>
 </template>