@nexxtmove/ui 1.24.0 → 1.26.0

package/dist/nuxt.js

@@ -28,7 +28,10 @@ var s = {
 	NexxtInputField: "components/molecules/InputField/InputField.vue",
 	NexxtInputSelect: "components/molecules/InputSelect/InputSelect.vue",
 	NexxtModalFooter: "components/molecules/ModalFooter/ModalFooter.vue",
+	NexxtPageCard: "components/molecules/PageCard/PageCard.vue",
 	NexxtPageContainer: "components/molecules/PageContainer/PageContainer.vue",
+	NexxtPageMockup: "components/molecules/PageMockup/PageMockup.vue",
+	NexxtPageTypeTile: "components/molecules/PageTypeTile/PageTypeTile.vue",
 	NexxtPagination: "components/molecules/Pagination/Pagination.vue",
 	NexxtPropertyCard: "components/molecules/PropertyCard/PropertyCard.vue",
 	NexxtSelect: "components/molecules/Select/Select.vue",
@@ -66,6 +69,7 @@ var s = {
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",

package/package.json

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

package/src/assets/svg/page_mockup_about.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="32" width="150" height="8" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="46" width="100" height="6" rx="3" fill="#CBD5E1"></rect>
+  <g>
+    <rect x="0" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="6" y="68" width="88" height="22" rx="4" fill="#FBE4E4"></rect>
+    <rect x="6" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="110" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="116" y="68" width="88" height="22" rx="4" fill="#FDEBDD"></rect>
+    <rect x="116" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="220" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="226" y="68" width="88" height="22" rx="4" fill="#E3E8FD"></rect>
+    <rect x="226" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <rect x="0" y="116" width="320" height="14" rx="4" fill="#7C7CF0"></rect>
+  <rect x="8" y="121" width="60" height="4" rx="2" fill="#FFFFFF"></rect>
+  <rect x="296" y="121" width="16" height="4" rx="2" fill="#FFFFFF"></rect>
+</svg>

package/src/assets/svg/page_mockup_introduction.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="118" width="150" height="8" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="132" width="100" height="6" rx="3" fill="#CBD5E1"></rect>
+</svg>

package/src/assets/svg/page_mockup_other.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="34" width="180" height="10" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="58" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="72" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="86" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="100" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="114" width="160" height="6" rx="3" fill="#CBD5E1"></rect>
+</svg>

package/src/assets/svg/page_mockup_packages.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="100" height="100" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="10" y="44" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+    <rect x="10" y="58" width="60" height="10" rx="3" fill="#CBD5E1"></rect>
+    <rect x="10" y="88" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="100" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="112" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="120" width="80" height="8" rx="4" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="110" y="34" width="100" height="100" rx="6" fill="#E3E3FB" stroke="#7C7CF0"></rect>
+    <rect x="120" y="44" width="40" height="6" rx="3" fill="#7C7CF0"></rect>
+    <rect x="120" y="58" width="60" height="10" rx="3" fill="#CBD5E1"></rect>
+    <rect x="120" y="88" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="100" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="112" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="120" width="80" height="8" rx="4" fill="#7C7CF0"></rect>
+  </g>
+  <g>
+    <rect x="220" y="34" width="100" height="100" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="230" y="44" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+    <rect x="230" y="58" width="60" height="10" rx="3" fill="#CBD5E1"></rect>
+    <rect x="230" y="88" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="100" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="112" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="120" width="80" height="8" rx="4" fill="#E2E8F0"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_references.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="155" height="64" rx="6" fill="#E3E8FD"></rect>
+    <rect x="0" y="106" width="90" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="0" y="118" width="60" height="5" rx="2" fill="#CBD5E1"></rect>
+    <rect x="115" y="106" width="40" height="12" rx="6" fill="#E3E3FB"></rect>
+  </g>
+  <g>
+    <rect x="165" y="34" width="155" height="64" rx="6" fill="#E3E8FD"></rect>
+    <rect x="165" y="106" width="90" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="165" y="118" width="60" height="5" rx="2" fill="#CBD5E1"></rect>
+    <rect x="280" y="106" width="40" height="12" rx="6" fill="#E3E3FB"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_reviews.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="100" height="96" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="16" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="28" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="40" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="52" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="64" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="10" y="64" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="76" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="88" width="50" height="5" rx="2" fill="#E2E8F0"></rect>
+    <circle cx="20" cy="114" r="8" fill="#FBE4E4"></circle>
+    <rect x="34" y="111" width="40" height="6" rx="3" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="110" y="34" width="100" height="96" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="126" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="138" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="150" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="162" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="174" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="120" y="64" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="76" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="88" width="50" height="5" rx="2" fill="#E2E8F0"></rect>
+    <circle cx="130" cy="114" r="8" fill="#FDEBDD"></circle>
+    <rect x="144" y="111" width="40" height="6" rx="3" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="220" y="34" width="100" height="96" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="236" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="248" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="260" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="272" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="284" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="230" y="64" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="76" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="88" width="50" height="5" rx="2" fill="#E2E8F0"></rect>
+    <circle cx="240" cy="114" r="8" fill="#E3E8FD"></circle>
+    <rect x="254" y="111" width="40" height="6" rx="3" fill="#CBD5E1"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_services.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="24" height="24" rx="6" fill="#FBE4E4"></rect>
+    <rect x="34" y="38" width="140" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="34" y="50" width="220" height="5" rx="2" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="0" y="70" width="24" height="24" rx="6" fill="#FDEBDD"></rect>
+    <rect x="34" y="74" width="140" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="34" y="86" width="220" height="5" rx="2" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="0" y="106" width="24" height="24" rx="6" fill="#E3E8FD"></rect>
+    <rect x="34" y="110" width="140" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="34" y="122" width="220" height="5" rx="2" fill="#CBD5E1"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_valuation.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="32" width="150" height="8" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="46" width="100" height="6" rx="3" fill="#CBD5E1"></rect>
+  <g>
+    <rect x="0" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="6" y="68" width="88" height="22" rx="4" fill="#FBE4E4"></rect>
+    <rect x="6" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="110" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="116" y="68" width="88" height="22" rx="4" fill="#FDEBDD"></rect>
+    <rect x="116" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="220" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="226" y="68" width="88" height="22" rx="4" fill="#E3E8FD"></rect>
+    <rect x="226" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+</svg>

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

@@ -0,0 +1,215 @@
+<script lang="ts">
+/**
+ * The widths the slider can land on: the Tailwind class and the pixels it
+ * renders. These are Tailwind's own defaults (`border` is 1px, then 2, 4 and 8)
+ * rather than theme tokens -- the theme defines no border-width scale, so
+ * stepping over arbitrary integers would produce classes with no CSS behind
+ * them.
+ */
+const BORDER_STEPS = [
+  { class: 'border', px: 1 },
+  { class: 'border-2', px: 2 },
+  { class: 'border-4', px: 4 },
+  { class: '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']
+
+/** Overridable copy of the readout and the picker. Every key is optional. */
+export interface EditorBorderMessages {
+  /** Unit shown behind the width. Defaults to `'px'`. */
+  unit?: string
+  /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
+  placeholder?: string
+  /** Accessible name of the width slider. Defaults to `'Dikte'`. */
+  width?: string
+}
+
+export interface NexxtEditorBorderProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Rand'`; the
+   * library has no i18n layer, so a consumer in another language passes its own
+   * copy in.
+   */
+  label?: string
+  /**
+   * Render a switch next to the label that collapses and expands the controls.
+   * Defaults to `true`: a border is the kind of setting that is off as often as
+   * it is on, so turning it off is part of the control rather than an extra.
+   * The switch state is the `enabled` model; the width and the colour are kept
+   * while the block is collapsed.
+   */
+  switchable?: boolean
+  /**
+   * Copy of the readout and the picker. Merged per key, so overriding one key
+   * keeps the defaults of the others. Copy is never translated inside the
+   * component.
+   */
+  messages?: EditorBorderMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+  placeholder: 'Kies kleur...',
+  width: 'Dikte',
+} satisfies Required<EditorBorderMessages>
+
+/**
+ * The colour token: `border-[` then a 6- or 8-digit hex. The alpha pair is
+ * accepted on read so a stored `#1777EA80` survives a round trip, even though
+ * the picker itself is opened without an alpha channel here.
+ */
+const COLOR_PATTERN = /^border-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+
+defineOptions({ name: 'NexxtEditorBorder' })
+
+const { label = 'Rand', switchable = true, messages } = defineProps<NexxtEditorBorderProps>()
+
+/**
+ * The border as the editor needs it: one class string that carries both halves
+ * of the setting -- a width class, a space, and a `border-[#hex]` colour class,
+ * as in `'border-2 border-[#1777EA]'`. Either half may be missing on read and
+ * the two may arrive in any order; a change always writes the width first.
+ * Tokens this component does not own are dropped by that rewrite.
+ *
+ * Beware: Tailwind only generates an arbitrary class for text it finds in the
+ * source at build time. A value that arrives at runtime -- from a database,
+ * say -- therefore gets no CSS of its own; the consumer either translates it
+ * into an inline style or safelists the classes it can produce. The hex is
+ * always parseable out of the string, which is what makes that translation
+ * possible.
+ */
+const model = defineModel<string>({ required: true })
+
+/** Open state of the block. Only has an effect when `switchable` is `true`. */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = 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))
+
+/**
+ * Position of the current width on the step list, taken from the first token
+ * that is a width class so that the token order in the string decides. A string
+ * without one -- a colour-only value, or copy from before this component --
+ * falls back to the first step instead of leaving the thumb off the track; the
+ * first change writes a valid class back.
+ */
+const stepIndex = computed(() => {
+  const widthToken = tokens.value.find((token) => BORDER_STEPS.some((step) => step.class === token))
+
+  return Math.max(
+    0,
+    BORDER_STEPS.findIndex((step) => step.class === widthToken),
+  )
+})
+
+/**
+ * The hex is part of the class the model writes, so a bare `string` cannot be
+ * handed to the writer. This narrows the picker's output and the regex capture
+ * to the shape the value promises, without a cast.
+ */
+const isHex = (value: string): value is `#${string}` => value.startsWith('#')
+
+/** The hex out of the model, or an empty string when it carries no colour. */
+const hex = computed(() => {
+  const captured = tokens.value.map((token) => COLOR_PATTERN.exec(token)?.[1]).find(Boolean)
+
+  return captured && isHex(captured) ? captured : ''
+})
+
+/**
+ * Both halves are written as one string, always width first, so the stored
+ * value has a single shape no matter what arrived. Without a colour the width
+ * stands alone rather than gaining an empty `border-[]`.
+ */
+const write = (width: EditorBorderWidth, color: string) => {
+  model.value = color ? `${width} border-[${color}]` : width
+}
+
+// The slider moves over the index, not over the px value, so its model is
+// translated both ways here.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    write(BORDER_STEPS[index].class, hex.value)
+  },
+})
+
+const picked = computed({
+  get: () => hex.value,
+  // The picker clears its own value in no flow it offers, but an empty string
+  // 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)
+  },
+})
+
+const displayValue = computed(() => `${BORDER_STEPS[stepIndex.value].px} ${copy.value.unit}`)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock v-model="enabled" :label="label" :switchable="switchable">
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center gap-4">
+        <!--
+          Slider's own `showValue` prints its model, which here is the step index
+          rather than the width, so the readout is rendered next to it instead.
+          The thumb has the same problem in `aria-valuenow`, which
+          `aria-valuetext` overrides with the string the readout shows. The block
+          header names the whole setting ('Rand'), so the thumb is named after
+          the half it controls instead.
+        -->
+        <NexxtSlider
+          v-model="sliderValue"
+          :min="0"
+          :max="maxIndex"
+          :step="1"
+          :aria-label="copy.width"
+          :aria-valuetext="displayValue"
+        />
+
+        <!--
+          gray-700, not the gray-500 Slider uses for its own readout: axe puts
+          gray-500 on white at 1.84:1, well under the 4.5:1 it needs at this size.
+        -->
+        <span class="min-w-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">
+          {{ displayValue }}
+        </span>
+      </div>
+
+      <!--
+        The block label is the switch's own label, so the picker gets no `label`
+        of its own -- that would print the heading twice. Its trigger falls back
+        to the placeholder for its accessible name, which is why the placeholder
+        is the one piece of copy this component passes down.
+      -->
+      <!--
+        `matchWidth` makes the panel as wide as the full-width trigger instead of
+        the fixed `w-70` it defaults to. It works by setting a `min-width` on the
+        floating element, so a panel in a container narrower than its content
+        would still be wider than the trigger; in the settings column it is not.
+      -->
+      <NexxtColorPicker
+        v-model="picked"
+        full-width
+        match-width
+        :formats="['hex']"
+        :show-alpha="false"
+        :placeholder="copy.placeholder"
+      />
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components/molecules/PageCard/PageCard.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+import NexxtPageMockup, { type NexxtPageMockupType } from '../PageMockup/PageMockup.vue'
+
+export interface NexxtPageCardProps {
+  /** Page name, shown in the footer. Truncated on one line. */
+  title: string
+  /** Icon for the page type, shown before the title. */
+  icon?: NexxtIconName
+  /** Draws the sketch for this page type in the preview area. The `preview` slot wins when both are given. */
+  mockup?: NexxtPageMockupType
+  /** Lays a full-card button over the content that emits `select`. Off keeps the card inert. */
+  selectable?: boolean
+  /** Whether this card is the current one: draws the blue border. Only does something with `selectable`. */
+  selected?: boolean
+  /** The card is being dragged: dims it and draws the blue border, so the list shows where it came from. */
+  dragging?: boolean
+}
+
+export type NexxtPageCardSlots = {
+  /** The preview area above the footer, for a mockup or thumbnail of the page. Empty shows a plain surface. */
+  preview?(): unknown
+  /** Right side of the footer, for a menu. Kept above the select button so a press there never selects. */
+  actions?(): unknown
+}
+
+defineOptions({ name: 'NexxtPageCard' })
+
+const props = withDefaults(defineProps<NexxtPageCardProps>(), {
+  icon: undefined,
+  mockup: undefined,
+  selectable: false,
+  selected: false,
+  dragging: false,
+})
+
+const emit = defineEmits<{
+  /** The card was chosen. No payload: the consumer knows which page it rendered. */
+  select: []
+}>()
+
+// The heading may not sit inside a button, so like TemplateCard the select button is a stretched
+// sibling under the content, with the actions layered above it
+defineSlots<NexxtPageCardSlots>()
+
+const onSelect = () => {
+  if (props.selectable) emit('select')
+}
+</script>
+
+<template>
+  <div
+    class="relative flex w-full flex-col overflow-hidden rounded-xl border bg-white transition-[border-color,opacity] duration-200 ease-out"
+    :class="[
+      (selectable && selected) || dragging ? 'border-cornflower-blue-500' : 'border-gray-200',
+      selectable && !selected && !dragging && 'hover:border-gray-300',
+      dragging && 'opacity-60',
+    ]"
+  >
+    <div
+      class="relative z-10 h-52 overflow-hidden border-b border-gray-200 bg-white p-3"
+      :class="selectable && 'pointer-events-none'"
+    >
+      <slot name="preview">
+        <NexxtPageMockup v-if="mockup" :type="mockup" />
+      </slot>
+    </div>
+
+    <div class="relative flex items-center gap-2.5 px-4 py-3">
+      <div
+        class="relative z-10 flex min-w-0 flex-1 items-center gap-2.5"
+        :class="selectable && 'pointer-events-none'"
+      >
+        <NexxtIcon v-if="icon" :name="icon" class="shrink-0 text-lg text-gray-500" />
+        <h3 class="truncate body-semibold text-gray-900">{{ title }}</h3>
+      </div>
+
+      <div v-if="$slots.actions" class="relative z-20 flex shrink-0 items-center">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <button
+      v-if="selectable"
+      type="button"
+      :aria-label="title"
+      :aria-current="selected ? 'true' : undefined"
+      class="absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-cornflower-blue-500"
+      @click="onSelect"
+    />
+  </div>
+</template>

package/src/components/molecules/PageMockup/PageMockup.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+export const PAGE_MOCKUP_TYPES = [
+  'introduction',
+  'about',
+  'valuation',
+  'services',
+  'packages',
+  'references',
+  'reviews',
+  'other',
+] as const
+
+export type NexxtPageMockupType = (typeof PAGE_MOCKUP_TYPES)[number]
+</script>
+
+<script lang="ts" setup>
+import { computed, type Component } from 'vue'
+import IntroductionSvg from '@ui-assets/svg/page_mockup_introduction.svg'
+import AboutSvg from '@ui-assets/svg/page_mockup_about.svg'
+import ValuationSvg from '@ui-assets/svg/page_mockup_valuation.svg'
+import ServicesSvg from '@ui-assets/svg/page_mockup_services.svg'
+import PackagesSvg from '@ui-assets/svg/page_mockup_packages.svg'
+import ReferencesSvg from '@ui-assets/svg/page_mockup_references.svg'
+import ReviewsSvg from '@ui-assets/svg/page_mockup_reviews.svg'
+import OtherSvg from '@ui-assets/svg/page_mockup_other.svg'
+
+export interface NexxtPageMockupProps {
+  /** Which kind of proposal page to sketch. */
+  type: NexxtPageMockupType
+}
+
+defineOptions({ name: 'NexxtPageMockup' })
+
+const props = defineProps<NexxtPageMockupProps>()
+
+const SKETCHES: Record<NexxtPageMockupType, Component> = {
+  introduction: IntroductionSvg,
+  about: AboutSvg,
+  valuation: ValuationSvg,
+  services: ServicesSvg,
+  packages: PackagesSvg,
+  references: ReferencesSvg,
+  reviews: ReviewsSvg,
+  other: OtherSvg,
+}
+
+const sketch = computed(() => SKETCHES[props.type])
+</script>
+
+<template>
+  <component :is="sketch" class="size-full" aria-hidden="true" />
+</template>

package/src/components/molecules/PageTypeTile/PageTypeTile.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+
+export interface NexxtPageTypeTileProps {
+  /** What the tile stands for, e.g. a page type. Shown under the icon. */
+  label: string
+  icon: NexxtIconName
+  /** The tile is being dragged: draws the blue border. The consumer makes it draggable. */
+  dragging?: boolean
+}
+
+defineOptions({ name: 'NexxtPageTypeTile' })
+
+withDefaults(defineProps<NexxtPageTypeTileProps>(), {
+  dragging: false,
+})
+
+const emit = defineEmits<{
+  /** The tile was clicked, as opposed to dragged. */
+  select: []
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex w-full cursor-grab flex-col items-center gap-2 rounded-xl border bg-white px-3 py-5 text-center transition-colors duration-200 ease-out hover:bg-gray-50 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 active:cursor-grabbing"
+    :class="dragging ? 'border-cornflower-blue-500' : 'border-gray-200 hover:border-gray-300'"
+    @click="emit('select')"
+  >
+    <NexxtIcon :name="icon" class="text-xl text-gray-700" />
+    <span class="extra-small-semibold text-gray-900">{{ label }}</span>
+  </button>
+</template>