@nexxtmove/ui 1.38.0 → 1.40.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.38.0",
+  "version": "1.40.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/molecules/EditorAlignItems/EditorAlignItems.vue

@@ -1,9 +1,22 @@
 <script lang="ts">
+/**
+ * The options the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `items-` prefix, so the class is `items-` plus the
+ * token. The labels are not in here; they arrive through `messages`, keyed by
+ * token.
+ */
+export const EDITOR_ALIGN_ITEMS_OPTIONS = [
+  { token: 'start' },
+  { token: 'center' },
+  { token: 'end' },
+  { token: 'stretch' },
+] as const
+
 /**
  * The cross-axis alignment as the editor needs it: the Tailwind class itself,
  * so the consumer can put the model value straight on the element it styles.
  */
-export type EditorAlignItemsValue = 'items-start' | 'items-center' | 'items-end' | 'items-stretch'
+export type EditorAlignItemsValue = `items-${(typeof EDITOR_ALIGN_ITEMS_OPTIONS)[number]['token']}`
 
 /** Overridable copy for the four options. Every key is optional. */
 export interface EditorAlignItemsMessages {
@@ -64,16 +77,27 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 // the spacing icons depict gaps between separate objects, which is the
 // justify-between metaphor, not this one. The copy travels as `ariaLabel`, so
 // the buttons still have a name for assistive technology.
-const options = computed<NexxtToggleGroupOption[]>(() => [
-  { value: 'items-start', icon: 'objects-align-top', ariaLabel: copy.value.start },
-  {
-    value: 'items-center',
-    icon: 'objects-align-center-vertical',
-    ariaLabel: copy.value.center,
-  },
-  { value: 'items-end', icon: 'objects-align-bottom', ariaLabel: copy.value.end },
-  { value: 'items-stretch', icon: 'arrows-up-down', ariaLabel: copy.value.stretch },
-])
+/**
+ * The icon of each option. Keyed on the token, so a token added to the list
+ * without an icon is a type error.
+ */
+const ICONS: Record<
+  (typeof EDITOR_ALIGN_ITEMS_OPTIONS)[number]['token'],
+  NonNullable<NexxtToggleGroupOption['icon']>
+> = {
+  start: 'objects-align-top',
+  center: 'objects-align-center-vertical',
+  end: 'objects-align-bottom',
+  stretch: 'arrows-up-down',
+}
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_ALIGN_ITEMS_OPTIONS.map(({ token }) => ({
+    value: `items-${token}`,
+    icon: ICONS[token],
+    ariaLabel: copy.value[token],
+  })),
+)
 
 // ToggleGroup types its model as the open `string` of its options, so writing
 // straight back into the narrower model is a type error. The setter is the one

package/src/components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue

@@ -1,9 +1,21 @@
 <script lang="ts">
+/**
+ * The options the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `bg-` prefix, so the class is `bg-` plus the token.
+ * The labels are not in here; they arrive through `messages`, keyed by token.
+ */
+export const EDITOR_BACKGROUND_SIZE_OPTIONS = [
+  { token: 'cover' },
+  { token: 'contain' },
+  { token: 'auto' },
+] as const
+
 /**
  * The background size as the editor needs it: the Tailwind class itself, so the
  * consumer can put the model value straight on the element it styles.
  */
-export type EditorBackgroundSizeValue = 'bg-cover' | 'bg-contain' | 'bg-auto'
+export type EditorBackgroundSizeValue =
+  `bg-${(typeof EDITOR_BACKGROUND_SIZE_OPTIONS)[number]['token']}`
 
 /** Overridable copy for the three options. Every key is optional. */
 export interface EditorBackgroundSizeMessages {
@@ -58,11 +70,26 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 // options do not fit the width the editor sidebar gives this block. The copy
 // travels as `ariaLabel`, so the buttons still have a name for assistive
 // technology.
-const options = computed<NexxtToggleGroupOption[]>(() => [
-  { value: 'bg-cover', icon: 'arrows-maximize', ariaLabel: copy.value.cover },
-  { value: 'bg-contain', icon: 'arrows-minimize', ariaLabel: copy.value.contain },
-  { value: 'bg-auto', icon: 'image', ariaLabel: copy.value.auto },
-])
+/**
+ * The icon of each option. Keyed on the token, so a token added to the list
+ * without an icon is a type error.
+ */
+const ICONS: Record<
+  (typeof EDITOR_BACKGROUND_SIZE_OPTIONS)[number]['token'],
+  NonNullable<NexxtToggleGroupOption['icon']>
+> = {
+  cover: 'arrows-maximize',
+  contain: 'arrows-minimize',
+  auto: 'image',
+}
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_BACKGROUND_SIZE_OPTIONS.map(({ token }) => ({
+    value: `bg-${token}`,
+    icon: ICONS[token],
+    ariaLabel: copy.value[token],
+  })),
+)
 
 // ToggleGroup types its model as the open `string` of its options, so writing
 // straight back into the narrower model is a type error. The setter is the one

package/src/components/editor/molecules/EditorBorder/EditorBorder.vue

@@ -5,16 +5,21 @@
  * rather than theme tokens -- the theme defines no border-width scale, so
  * stepping over arbitrary integers would produce classes with no CSS behind
  * them.
+ *
+ * `token` is the full width class, not a suffix: the 1px step is the bare
+ * `border`, which has none. The model value pairs it with an optional colour
+ * class; a value without a width class on the list puts the slider on the first
+ * step.
  */
-const BORDER_STEPS = [
-  { class: 'border', px: 1 },
-  { class: 'border-2', px: 2 },
-  { class: 'border-4', px: 4 },
-  { class: 'border-8', px: 8 },
+export const EDITOR_BORDER_STEPS = [
+  { token: 'border', px: 1 },
+  { token: 'border-2', px: 2 },
+  { token: 'border-4', px: 4 },
+  { token: 'border-8', px: 8 },
 ] as const
 
 /** The width part of the model value, as the Tailwind class itself. */
-export type EditorBorderWidth = (typeof BORDER_STEPS)[number]['class']
+export type EditorBorderWidth = (typeof EDITOR_BORDER_STEPS)[number]['token']
 
 /** Overridable copy of the readout and the picker. Every key is optional. */
 export interface EditorBorderMessages {
@@ -94,7 +99,7 @@ const enabled = defineModel<boolean>('enabled', { default: true })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
-const maxIndex = BORDER_STEPS.length - 1
+const maxIndex = EDITOR_BORDER_STEPS.length - 1
 
 /** The model read as a token list; whitespace of any shape separates them. */
 const tokens = computed(() => model.value.split(/\s+/).filter(Boolean))
@@ -107,11 +112,13 @@ const tokens = computed(() => model.value.split(/\s+/).filter(Boolean))
  * first change writes a valid class back.
  */
 const stepIndex = computed(() => {
-  const widthToken = tokens.value.find((token) => BORDER_STEPS.some((step) => step.class === token))
+  const widthToken = tokens.value.find((token) =>
+    EDITOR_BORDER_STEPS.some((step) => step.token === token),
+  )
 
   return Math.max(
     0,
-    BORDER_STEPS.findIndex((step) => step.class === widthToken),
+    EDITOR_BORDER_STEPS.findIndex((step) => step.token === widthToken),
   )
 })
 
@@ -143,7 +150,7 @@ const write = (width: EditorBorderWidth, color: string) => {
 const sliderValue = computed({
   get: () => [stepIndex.value],
   set: ([index]) => {
-    write(BORDER_STEPS[index].class, hex.value)
+    write(EDITOR_BORDER_STEPS[index].token, hex.value)
   },
 })
 
@@ -153,11 +160,11 @@ const picked = computed({
   // would still wipe a perfectly good colour, so it is dropped rather than
   // written through. The picker keeps rendering the model's colour.
   set: (value: string) => {
-    if (isHex(value)) write(BORDER_STEPS[stepIndex.value].class, value)
+    if (isHex(value)) write(EDITOR_BORDER_STEPS[stepIndex.value].token, value)
   },
 })
 
-const displayValue = computed(() => `${BORDER_STEPS[stepIndex.value].px} ${copy.value.unit}`)
+const displayValue = computed(() => `${EDITOR_BORDER_STEPS[stepIndex.value].px} ${copy.value.unit}`)
 </script>
 
 <template>

package/src/components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue

@@ -1,9 +1,17 @@
 <script lang="ts">
+/**
+ * The options the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `flex-` prefix, so the class is `flex-` plus the
+ * token. The labels are not in here; they arrive through `messages`.
+ */
+export const EDITOR_FLEX_DIRECTION_OPTIONS = [{ token: 'row' }, { token: 'col' }] as const
+
 /**
  * The flex direction as the editor needs it: the Tailwind class itself, so the
  * consumer can put the model value straight on the element it styles.
  */
-export type EditorFlexDirectionValue = 'flex-row' | 'flex-col'
+export type EditorFlexDirectionValue =
+  `flex-${(typeof EDITOR_FLEX_DIRECTION_OPTIONS)[number]['token']}`
 
 /** Overridable copy for the two options. Every key is optional. */
 export interface EditorFlexDirectionMessages {
@@ -49,10 +57,37 @@ const model = defineModel<EditorFlexDirectionValue>({ required: true })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
-const options = computed<NexxtToggleGroupOption[]>(() => [
-  { value: 'flex-row', label: copy.value.horizontal, icon: 'arrow-right' },
-  { value: 'flex-col', label: copy.value.vertical, icon: 'arrow-down' },
-])
+/**
+ * The icon of each option. Keyed on the token, so a token added to the list
+ * without an icon is a type error.
+ */
+const ICONS: Record<
+  (typeof EDITOR_FLEX_DIRECTION_OPTIONS)[number]['token'],
+  NonNullable<NexxtToggleGroupOption['icon']>
+> = {
+  row: 'arrow-right',
+  col: 'arrow-down',
+}
+
+/**
+ * The messages key of each option: the copy names the direction, not the
+ * class.
+ */
+const MESSAGE_KEYS: Record<
+  (typeof EDITOR_FLEX_DIRECTION_OPTIONS)[number]['token'],
+  keyof EditorFlexDirectionMessages
+> = {
+  row: 'horizontal',
+  col: 'vertical',
+}
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_FLEX_DIRECTION_OPTIONS.map(({ token }) => ({
+    value: `flex-${token}`,
+    icon: ICONS[token],
+    label: copy.value[MESSAGE_KEYS[token]],
+  })),
+)
 
 // ToggleGroup types its model as the open `string` of its options, so writing
 // straight back into the narrower model is a type error. The setter is the one

package/src/components/editor/molecules/EditorGap/EditorGap.vue

@@ -1,17 +1,37 @@
 <script lang="ts">
 /**
- * The steps the slider can land on, as the numeric part of the Tailwind class.
- * 13 and 15 are missing on purpose: the theme defines `--spacing-0` through
- * `--spacing-12` and then only 14 and 16, so stepping over the px value instead
- * of over this list would offer gaps that have no token behind them.
+ * The steps the slider can land on, with the px they render (the spacing scale
+ * is built on 0.25rem, so a step is 4 px). 13 and 15 are missing on purpose:
+ * the theme defines `--spacing-0` through `--spacing-12` and then only 14 and
+ * 16, so stepping over the px value instead of over this list would offer gaps
+ * that have no token behind them.
+ *
+ * `token` is the numeric part of the class; the class is `gap-` plus the token.
+ * A stored value that is not on the list puts the slider on the first step.
  */
-const GAP_STEPS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16] as const
+export const EDITOR_GAP_STEPS = [
+  { token: 0, px: 0 },
+  { token: 1, px: 4 },
+  { token: 2, px: 8 },
+  { token: 3, px: 12 },
+  { token: 4, px: 16 },
+  { token: 5, px: 20 },
+  { token: 6, px: 24 },
+  { token: 7, px: 28 },
+  { token: 8, px: 32 },
+  { token: 9, px: 36 },
+  { token: 10, px: 40 },
+  { token: 11, px: 44 },
+  { token: 12, px: 48 },
+  { token: 14, px: 56 },
+  { token: 16, px: 64 },
+] as const
 
 /**
  * The gap as the editor needs it: the Tailwind class itself, so the consumer
  * can put the model value straight on the element it styles.
  */
-export type EditorGapValue = `gap-${(typeof GAP_STEPS)[number]}`
+export type EditorGapValue = `gap-${(typeof EDITOR_GAP_STEPS)[number]['token']}`
 
 /** Overridable copy of the value readout. Every key is optional. */
 export interface EditorGapMessages {
@@ -36,9 +56,6 @@ export interface NexxtEditorGapProps {
 const DEFAULT_MESSAGES = {
   unit: 'px',
 } satisfies Required<EditorGapMessages>
-
-/** The spacing scale is built on 0.25rem, so `gap-4` is 4 × 4 = 16 px. */
-const PX_PER_STEP = 4
 </script>
 
 <script lang="ts" setup>
@@ -55,7 +72,7 @@ const model = defineModel<EditorGapValue>({ required: true })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
-const maxIndex = GAP_STEPS.length - 1
+const maxIndex = EDITOR_GAP_STEPS.length - 1
 
 /**
  * Position of the current value on the step list. A value that is not on the
@@ -66,7 +83,7 @@ const maxIndex = GAP_STEPS.length - 1
 const stepIndex = computed(() =>
   Math.max(
     0,
-    GAP_STEPS.findIndex((step) => `gap-${step}` === model.value),
+    EDITOR_GAP_STEPS.findIndex(({ token }) => `gap-${token}` === model.value),
   ),
 )
 
@@ -75,13 +92,11 @@ const stepIndex = computed(() =>
 const sliderValue = computed({
   get: () => [stepIndex.value],
   set: ([index]) => {
-    model.value = `gap-${GAP_STEPS[index]}`
+    model.value = `gap-${EDITOR_GAP_STEPS[index].token}`
   },
 })
 
-const displayValue = computed(
-  () => `${GAP_STEPS[stepIndex.value] * PX_PER_STEP} ${copy.value.unit}`,
-)
+const displayValue = computed(() => `${EDITOR_GAP_STEPS[stepIndex.value].px} ${copy.value.unit}`)
 </script>
 
 <template>

package/src/components/editor/molecules/EditorHeadingType/EditorHeadingType.vue

@@ -1,18 +1,22 @@
 <script lang="ts">
 /**
  * The heading levels the editor offers, in the order they are listed. The level
- * is what the option shows -- its label and its `h1`..`h6` icon -- and the size
- * is what the model carries. The sizes are Tailwind's default scale on purpose,
- * not the theme's `heading-*` utilities: this value is data the editor stores
- * and puts back on an element, so it has to be a class every consumer resolves.
+ * is what the option shows -- its label and its `h1`..`h6` icon -- and the
+ * token is what the model carries. The sizes are Tailwind's default scale on
+ * purpose, not the theme's `heading-*` utilities: this value is data the editor
+ * stores and puts back on an element, so it has to be a class every consumer
+ * resolves.
+ *
+ * `token` is the full font-size class, not a suffix: it is stored as is. The
+ * labels are not in here; they arrive through `messages`, keyed by level.
  */
-const HEADING_LEVELS = [
-  { level: 1, size: 'text-4xl' },
-  { level: 2, size: 'text-3xl' },
-  { level: 3, size: 'text-2xl' },
-  { level: 4, size: 'text-xl' },
-  { level: 5, size: 'text-lg' },
-  { level: 6, size: 'text-base' },
+export const EDITOR_HEADING_TYPE_OPTIONS = [
+  { token: 'text-4xl', level: 1 },
+  { token: 'text-3xl', level: 2 },
+  { token: 'text-2xl', level: 3 },
+  { token: 'text-xl', level: 4 },
+  { token: 'text-lg', level: 5 },
+  { token: 'text-base', level: 6 },
 ] as const
 
 /**
@@ -20,7 +24,7 @@ const HEADING_LEVELS = [
  * the consumer can put the model value straight on the element it styles.
  * Weight is deliberately not part of it -- that becomes a setting of its own.
  */
-export type EditorHeadingTypeValue = (typeof HEADING_LEVELS)[number]['size']
+export type EditorHeadingTypeValue = (typeof EDITOR_HEADING_TYPE_OPTIONS)[number]['token']
 
 /** Overridable copy for the six options. Every key is optional. */
 export interface EditorHeadingTypeMessages {
@@ -82,13 +86,13 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 // The level doubles as the messages key and the Font Awesome icon name --
 // `h1` through `h6` all exist in the kit.
 const options = computed<SelectOption[]>(() =>
-  HEADING_LEVELS.map(({ level, size }) => {
+  EDITOR_HEADING_TYPE_OPTIONS.map(({ token, level }) => {
     const key = `h${level}` as const
-    return { value: size, label: copy.value[key], icon: key }
+    return { value: token, label: copy.value[key], icon: key }
   }),
 )
 
-const values = HEADING_LEVELS.map(({ size }) => size)
+const values = EDITOR_HEADING_TYPE_OPTIONS.map(({ token }) => token)
 
 // Select types its model as the open `string | number | null` of its options,
 // so writing straight back into the narrower model is a type error. The setter

package/src/components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue

@@ -1,10 +1,23 @@
 <script lang="ts">
+/**
+ * The options the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `justify-` prefix, so the class is `justify-` plus
+ * the token. The labels are not in here; they arrive through `messages`, keyed
+ * by token.
+ */
+export const EDITOR_JUSTIFY_CONTENT_OPTIONS = [
+  { token: 'start' },
+  { token: 'center' },
+  { token: 'end' },
+  { token: 'between' },
+] as const
+
 /**
  * The justification as the editor needs it: the Tailwind class itself, so the
  * consumer can put the model value straight on the element it styles.
  */
 export type EditorJustifyContentValue =
-  'justify-start' | 'justify-center' | 'justify-end' | 'justify-between'
+  `justify-${(typeof EDITOR_JUSTIFY_CONTENT_OPTIONS)[number]['token']}`
 
 /** Overridable copy for the four options. Every key is optional. */
 export interface EditorJustifyContentMessages {
@@ -61,20 +74,27 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 // side at the width the editor sidebar gives this block, and the icons are
 // conventional enough to stand on their own. The copy travels as `ariaLabel`,
 // so the buttons still have a name for assistive technology.
-const options = computed<NexxtToggleGroupOption[]>(() => [
-  { value: 'justify-start', icon: 'objects-align-left', ariaLabel: copy.value.start },
-  {
-    value: 'justify-center',
-    icon: 'objects-align-center-horizontal',
-    ariaLabel: copy.value.center,
-  },
-  { value: 'justify-end', icon: 'objects-align-right', ariaLabel: copy.value.end },
-  {
-    value: 'justify-between',
-    icon: 'distribute-spacing-horizontal',
-    ariaLabel: copy.value.between,
-  },
-])
+/**
+ * The icon of each option. Keyed on the token, so a token added to the list
+ * without an icon is a type error.
+ */
+const ICONS: Record<
+  (typeof EDITOR_JUSTIFY_CONTENT_OPTIONS)[number]['token'],
+  NonNullable<NexxtToggleGroupOption['icon']>
+> = {
+  start: 'objects-align-left',
+  center: 'objects-align-center-horizontal',
+  end: 'objects-align-right',
+  between: 'distribute-spacing-horizontal',
+}
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_JUSTIFY_CONTENT_OPTIONS.map(({ token }) => ({
+    value: `justify-${token}`,
+    icon: ICONS[token],
+    ariaLabel: copy.value[token],
+  })),
+)
 
 // ToggleGroup types its model as the open `string` of its options, so writing
 // straight back into the narrower model is a type error. The setter is the one

package/src/components/editor/molecules/EditorPadding/EditorPadding.vue

@@ -2,22 +2,56 @@
 import type { PaddingIconSide } from './_PaddingIcon.vue'
 
 /**
- * The steps a field can land on, as the numeric part of the Tailwind class:
- * every integer `--spacing-*` token the theme defines. The list thins out as it
- * climbs -- 13 and 15 are absent, and past 16 it moves in fours and then
- * eights -- so snapping over this list rather than over the px value keeps the
- * field off classes that have no token behind them.
+ * The steps a field can land on: every integer `--spacing-*` token the theme
+ * defines, with the px it renders (the spacing scale is built on 0.25rem, so a
+ * step is 4 px). The list thins out as it climbs -- 13 and 15 are absent, and
+ * past 16 it moves in fours and then eights -- so snapping over this list
+ * rather than over the px value keeps the field off classes that have no token
+ * behind them.
+ *
+ * `token` is the numeric part of the class, without a prefix: one padding value
+ * is written with several of them (`p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`,
+ * `pl-`), so the full class depends on which sides it covers. A value between
+ * two steps snaps to the nearest one, the lower on a tie.
  */
-const PADDING_STEPS = [
-  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64,
-  72, 80, 96,
+export const EDITOR_PADDING_STEPS = [
+  { token: 0, px: 0 },
+  { token: 1, px: 4 },
+  { token: 2, px: 8 },
+  { token: 3, px: 12 },
+  { token: 4, px: 16 },
+  { token: 5, px: 20 },
+  { token: 6, px: 24 },
+  { token: 7, px: 28 },
+  { token: 8, px: 32 },
+  { token: 9, px: 36 },
+  { token: 10, px: 40 },
+  { token: 11, px: 44 },
+  { token: 12, px: 48 },
+  { token: 14, px: 56 },
+  { token: 16, px: 64 },
+  { token: 20, px: 80 },
+  { token: 24, px: 96 },
+  { token: 28, px: 112 },
+  { token: 32, px: 128 },
+  { token: 36, px: 144 },
+  { token: 40, px: 160 },
+  { token: 44, px: 176 },
+  { token: 48, px: 192 },
+  { token: 52, px: 208 },
+  { token: 56, px: 224 },
+  { token: 60, px: 240 },
+  { token: 64, px: 256 },
+  { token: 72, px: 288 },
+  { token: 80, px: 320 },
+  { token: 96, px: 384 },
 ] as const
 
-/** The spacing scale is built on 0.25rem, so `p-4` is 4 × 4 = 16 px. */
-const PX_PER_STEP = 4
+/** A padding step as the numeric part of the Tailwind class, as in `p-4`. */
+export type EditorPaddingStep = (typeof EDITOR_PADDING_STEPS)[number]['token']
 
 /** Highest value a field takes, in px: the top step is `p-96`, which is 384 px. */
-const MAX_PX = PADDING_STEPS[PADDING_STEPS.length - 1] * PX_PER_STEP
+const MAX_PX = EDITOR_PADDING_STEPS[EDITOR_PADDING_STEPS.length - 1].px
 
 const ALL_SIDES: PaddingIconSide[] = ['top', 'right', 'bottom', 'left']
 
@@ -103,7 +137,7 @@ const parse = (value: string): PaddingSides => {
     if (!match) continue
 
     const step = Number(match[2])
-    if (!PADDING_STEPS.includes(step as (typeof PADDING_STEPS)[number])) continue
+    if (!EDITOR_PADDING_STEPS.some(({ token }) => token === step)) continue
 
     for (const side of PREFIX_SIDES[match[1]]) sides[side] = step
   }
@@ -126,10 +160,18 @@ const serialize = ({ top, right, bottom, left }: PaddingSides): string => {
 const snap = (px: number): number => {
   const clamped = Math.min(Math.max(px, 0), MAX_PX)
 
-  return PADDING_STEPS.reduce((best, step) =>
-    Math.abs(step * PX_PER_STEP - clamped) < Math.abs(best * PX_PER_STEP - clamped) ? step : best,
-  )
+  return EDITOR_PADDING_STEPS.reduce((best, step) =>
+    Math.abs(step.px - clamped) < Math.abs(best.px - clamped) ? step : best,
+  ).token
 }
+
+/**
+ * The px a step renders. Every side only ever holds a token from the list --
+ * `parse` skips the rest and every write goes through `snap` or the list -- so
+ * the lookup always hits; the 0 is there for the type, not for a real case.
+ */
+const pxOf = (step: number): number =>
+  EDITOR_PADDING_STEPS.find(({ token }) => token === step)?.px ?? 0
 </script>
 
 <script lang="ts" setup>
@@ -215,7 +257,7 @@ const secondaryInert = computed(() => (expanded.value ? undefined : true))
 // The fields speak px, not steps: `p-6` reads as 24. A 0 is shown as an empty
 // field so the placeholder carries it, and an empty field commits back as a 0.
 const display = (side: PaddingIconSide) =>
-  sides.value[side] === 0 ? '' : String(sides.value[side] * PX_PER_STEP)
+  sides.value[side] === 0 ? '' : String(pxOf(sides.value[side]))
 
 const apply = (next: PaddingSides) => {
   // A change that changes nothing -- committing 30 where the value is already
@@ -239,11 +281,11 @@ const onCommit = (field: PaddingField, px: number) => write(field, snap(px))
 
 /** One step along the list, so the arrow keys never stop on a missing token. */
 const onStep = (field: PaddingField, direction: 1 | -1) => {
-  const index = PADDING_STEPS.indexOf(sides.value[field.source] as (typeof PADDING_STEPS)[number])
+  const index = EDITOR_PADDING_STEPS.findIndex(({ token }) => token === sides.value[field.source])
   // No wrapping: the ends of the list are the ends of the range.
-  const next = Math.min(Math.max(index + direction, 0), PADDING_STEPS.length - 1)
+  const next = Math.min(Math.max(index + direction, 0), EDITOR_PADDING_STEPS.length - 1)
 
-  write(field, PADDING_STEPS[next])
+  write(field, EDITOR_PADDING_STEPS[next].token)
 }
 
 /**

package/src/components/editor/molecules/EditorTextAlign/EditorTextAlign.vue

@@ -1,9 +1,22 @@
 <script lang="ts">
+/**
+ * The options the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `text-` prefix, so the class is `text-` plus the
+ * token. The labels are not in here; they arrive through `messages`, keyed by
+ * token.
+ */
+export const EDITOR_TEXT_ALIGN_OPTIONS = [
+  { token: 'left' },
+  { token: 'center' },
+  { token: 'right' },
+  { token: 'justify' },
+] as const
+
 /**
  * The text alignment as the editor needs it: the Tailwind class itself, so the
  * consumer can put the model value straight on the element it styles.
  */
-export type EditorTextAlignValue = 'text-left' | 'text-center' | 'text-right' | 'text-justify'
+export type EditorTextAlignValue = `text-${(typeof EDITOR_TEXT_ALIGN_OPTIONS)[number]['token']}`
 
 /** Overridable copy for the four options. Every key is optional. */
 export interface EditorTextAlignMessages {
@@ -60,12 +73,27 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 // side at the width the editor sidebar gives this block, and the icons are
 // conventional enough to stand on their own. The copy travels as `ariaLabel`,
 // so the buttons still have a name for assistive technology.
-const options = computed<NexxtToggleGroupOption[]>(() => [
-  { value: 'text-left', icon: 'align-left', ariaLabel: copy.value.left },
-  { value: 'text-center', icon: 'align-center', ariaLabel: copy.value.center },
-  { value: 'text-right', icon: 'align-right', ariaLabel: copy.value.right },
-  { value: 'text-justify', icon: 'align-justify', ariaLabel: copy.value.justify },
-])
+/**
+ * The icon of each option. Keyed on the token, so a token added to the list
+ * without an icon is a type error.
+ */
+const ICONS: Record<
+  (typeof EDITOR_TEXT_ALIGN_OPTIONS)[number]['token'],
+  NonNullable<NexxtToggleGroupOption['icon']>
+> = {
+  left: 'align-left',
+  center: 'align-center',
+  right: 'align-right',
+  justify: 'align-justify',
+}
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_TEXT_ALIGN_OPTIONS.map(({ token }) => ({
+    value: `text-${token}`,
+    icon: ICONS[token],
+    ariaLabel: copy.value[token],
+  })),
+)
 
 // ToggleGroup types its model as the open `string` of its options, so writing
 // straight back into the narrower model is a type error. The setter is the one