tiptapify 0.3.3 → 0.3.4

package/src/components/Tiptapify.vue

@@ -6,7 +6,15 @@ import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, toRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
-import { TiptapifyAiOptions, TiptapifyAiResolvedOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import {
+  TiptapifyAiOptions,
+  TiptapifyAiResolvedOptions,
+  TiptapifyEditor,
+  TiptapifyFooterAlignment,
+  TiptapifySkinInput,
+  variantBtnTypes,
+  variantFieldTypes
+} from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 import ImageBubbleMenu from '@tiptapify/components/ImageBubbleMenu.vue'
@@ -15,6 +23,7 @@ import { useI18n } from 'vue-i18n'
 
 import { getTiptapEditor } from '@tiptapify/components/index'
 import { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+import { resolveSkin } from '@tiptapify/skins/registry'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 
 import Footer from '@tiptapify/components/Footer.vue'
@@ -52,6 +61,8 @@ const props = defineProps({
   loadingHeight: { type: String, default() { return '1px' } },
   // From this many images in a row the editor shows them as a slider grid; 0 turns it off
   imageSlider: { type: Number, default() { return 0 } },
+  // The skin of the editor chrome: a registered name ('default', 'pastel') or an inline skin object
+  skin: { type: [String, Object] as PropType<TiptapifySkinInput>, default() { return defaults.skin } },
 })
 
 const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
@@ -151,9 +162,33 @@ const scrollContainer = ref<HTMLElement | null>(null)
 provide('tiptapifyScrollContainer', scrollContainer)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)
+// The skin prop resolves through the registry; computed refs so a prop change
+// re-resolves tokens and shape without an editor re-render
+const resolvedSkin = computed(() => resolveSkin(props.skin))
+
+// The shape classes: `.tiptapify-shape-{flag}-{value}` for all six flags, so CSS gates on
+// shape (not on the skin name); templates read the computed refs. The name class stays
+// as the escape hatch for consumer CSS.
+const shapeClasses = computed(() => {
+  const shape = resolvedSkin.value.shape
+
+  return [
+    `tiptapify-shape-toolbar-${shape.toolbar}`,
+    `tiptapify-shape-groups-${shape.groups}`,
+    `tiptapify-shape-buttons-${shape.buttons}`,
+    `tiptapify-shape-bubble-${shape.bubble}`,
+    `tiptapify-shape-dialog-${shape.dialog}`,
+    `tiptapify-shape-menu-${shape.menu}`,
+  ].join(' ')
+})
+
 provide(TIPTAPIFY_CONFIG_KEY, {
   variantBtn: toRef(props, 'variantBtn'),
   variantField: toRef(props, 'variantField'),
+  skin: toRef(props, 'skin'),
+  skinName: computed(() => resolvedSkin.value.name),
+  tokens: computed(() => resolvedSkin.value.tokens),
+  shape: computed(() => resolvedSkin.value.shape),
 })
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
@@ -173,7 +208,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :id="`tiptapify-editor-${editor?.instanceId}`">
+  <div
+    :id="`tiptapify-editor-${editor?.instanceId}`"
+    :class="[resolvedSkin.className, shapeClasses]"
+    :style="resolvedSkin.tokens"
+  >
     <div :class="`tiptapify-frame rounded-${rounded}`">
       <template v-if="toolbar">
         <Toolbar
@@ -245,11 +284,28 @@ onBeforeUnmount(() => {
   --border: 1px solid var(--gray-2);
 }
 
+/*
+ * The frame: one rule, skin-agnostic, reading the frame tokens (classic fallbacks).
+ * The classic shape keeps `border-top: 0`: the raised toolbar sits on the frame's top
+ * edge, so no line is needed there. The per-side deltas of the flat shape (full border,
+ * bottom edge at 1.6x border opacity) are a property of that shape, not of any one
+ * skin, so the gate is the toolbar shape class. `--tf-frame-border` is the shorthand
+ * for all sides; the bottom emphasis composes from Vuetify's border-opacity (it is a
+ * shading rule, not a catalog token).
+ */
 .tiptapify-frame {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border: var(--tf-frame-border, 1px solid rgba(var(--v-border-color), var(--v-border-opacity)));
+  border-top: 0;
+  background: var(--tf-frame-bg, transparent);
+  box-shadow: var(--tf-frame-shadow, none);
+}
+
+.tiptapify-shape-toolbar-flat .tiptapify-frame {
+  /* A flat toolbar lives inside the frame: the top edge closes like the other sides... */
+  border-top: var(--tf-frame-border, 1px solid rgba(var(--v-border-color), var(--v-border-opacity)));
+
+  /* ...and the bottom edge carries the frame's visual weight (1.6x border opacity) */
   border-bottom-color: rgba(var(--v-border-color), calc(var(--v-border-opacity) * 1.6));
-  background: rgb(var(--v-theme-surface));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .resizable {
@@ -557,29 +613,24 @@ onBeforeUnmount(() => {
       max-width: 100%;
       height: auto !important;
       margin: 0;
-      border-radius: 4px;
-      background: rgba(var(--v-theme-on-surface), 0.04);
     }
 
     [data-resize-wrapper] {
       max-width: min(100%, calc(var(--tiptapify-image-max-height) * var(--tiptapify-image-ratio, 100)));
-      border-radius: 4px;
-      outline: 2px solid transparent;
-      outline-offset: 2px;
+      border-radius: var(--tf-image-radius, 0.125rem);
+      outline: 1px solid transparent;
       transition: outline-color 0.15s;
     }
 
     /* One block: hovering outlines it, a click selects it and shows its toolbar */
     img {
       cursor: pointer;
-    }
-
-    &:hover [data-resize-wrapper] {
-      outline-color: rgba(var(--v-theme-primary), 0.35);
+      border-radius: var(--tf-image-radius, 0px);
+      background: var(--tf-image-bg, transparent);
     }
 
     &.ProseMirror-selectednode [data-resize-wrapper] {
-      outline-color: rgb(var(--v-theme-primary));
+      outline: var(--tf-image-outline, 1px solid rgba(0, 0, 0, 0.25));
     }
 
     /* Centered unless floated; a floated image lets the text wrap around it */
@@ -696,7 +747,7 @@ onBeforeUnmount(() => {
     }
   }
 
-  /* Resize handles of a selected image: dots on its corners and edge middles */
+  /* Resize handles of a selected image: dark squares at the corners and edge middles */
   [data-node='image'] [data-resize-handle] {
     display: none;
   }
@@ -707,10 +758,19 @@ onBeforeUnmount(() => {
     display: block;
     width: 10px;
     height: 10px;
-    border: 2px solid rgb(var(--v-theme-surface));
-    border-radius: 50%;
-    background: rgb(var(--v-theme-primary));
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+    border: var(--tf-handle-border, none);
+    border-radius: var(--tf-handle-radius, 2px);
+    background: var(--tf-handle-bg, rgba(0, 0, 0, 0.5));
+    box-shadow: var(--tf-handle-shadow, none);
+    transition: background-color 0.15s;
+
+    /* Longhand on purpose: the hover needle in the measurement bundle reads
+     * `background-color` from CSSOM, and a shorthand carrying var() has no
+     * retrievable longhand (pending-substitution value).
+     */
+    &:hover {
+      background-color: var(--tf-handle-bg-hover, rgba(0, 0, 0, 0.8));
+    }
 
     &[data-resize-handle='top-left'] { top: -5px !important; left: -5px !important; cursor: nwse-resize; }
     &[data-resize-handle='top-right'] { top: -5px !important; right: -5px !important; left: auto !important; cursor: nesw-resize; }
@@ -723,6 +783,29 @@ onBeforeUnmount(() => {
   }
 }
 
+/*
+ * The quiet image chrome (shape: `buttons: quiet`): the outline around an image becomes an
+ * inset 2px ring (the classic flush 1px hairline is the base rule's fallback) and hovering
+ * tints it. Gated on the buttons shape because that is the flag of the 0.3.3 quiet look this
+ * structure belongs to; the colors stay tokens (`--tf-image-outline*`), the structural
+ * width/offset pair is the shape's base.
+ */
+.tiptapify-shape-buttons-quiet .tiptap .tiptapify-image {
+  [data-resize-wrapper] {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  &:hover [data-resize-wrapper] {
+    outline-color: var(--tf-image-outline-hover, rgba(var(--v-theme-primary), 0.35));
+  }
+
+  &.ProseMirror-selectednode [data-resize-wrapper] {
+    outline: var(--tf-image-outline, 2px solid rgb(var(--v-theme-primary)));
+    outline-offset: 2px;
+  }
+}
+
 /*
  * Dialog layout primitives.
  *
@@ -739,7 +822,7 @@ onBeforeUnmount(() => {
  */
 .tiptapify-dialog-grid {
   display: grid;
-  gap: 16px;
+  gap: var(--tf-dialog-grid-gap, 24px);
   grid-template-columns: repeat(12, minmax(0, 1fr));
 
   > .tiptapify-dialog-col {
@@ -766,6 +849,17 @@ onBeforeUnmount(() => {
   }
 }
 
+/*
+ * The soft dialog grid.
+ *
+ * The dialog is teleported to the overlay root, so it has no shape class
+ * ancestor: the shape reaches it through the dialog's own modifier class,
+ * the same way every other soft dialog style applies.
+ */
+.tiptapify-dialog--soft .tiptapify-dialog-grid {
+  gap: var(--tf-dialog-grid-gap, 16px);
+}
+
 .tiptapify-dialog-actions {
   display: flex;
   flex-wrap: wrap;

package/src/components/Toolbar/Index.vue

@@ -7,6 +7,7 @@ import { computed, inject, PropType, Ref } from 'vue'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 import { default as toolbarItemsGroups, availableItems } from '@tiptapify/components/Toolbar/items'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
 const props = defineProps({
   variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
@@ -23,6 +24,10 @@ const props = defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+// The toolbar shape flag styles the bar: a flat tinted bar when `toolbar` is flat;
+// the classic shape keeps the raised Vuetify toolbar
+const { shape } = useTiptapifyConfig()
+
 const propsItems = computed(() => props.items)
 const propsItemsExclude = computed(() => props.itemsExclude)
 
@@ -272,7 +277,13 @@ toolbarItems = toolbarItems
 
 <template>
   <div v-if="editor" class="tiptapify-toolbar">
-    <VToolbar flat :theme="theme" height="auto" :class="`rounded-t-${rounded}`">
+    <VToolbar
+      :elevation="shape.toolbar === 'flat' ? 0 : 1"
+      :flat="shape.toolbar === 'flat'"
+      :theme="theme"
+      height="auto"
+      :class="`rounded-t-${rounded}`"
+    >
       <VSlideGroup v-if="toolbarScrollable">
         <Items :items="toolbarItems" />
       </VSlideGroup>
@@ -284,30 +295,39 @@ toolbarItems = toolbarItems
 
 <style lang="scss">
 /*
- * Quiet toolbar: a tinted bar under a hairline, ghost icon buttons that only get a background on
- * hover, and a neutral "pressed" state instead of the filled primary button. The buttons keep
- * coloring themselves with `color="primary"` when active; the toolbar maps that to the pressed look.
+ * Flat toolbar: a tinted bar under a hairline. The raised shape paints the bar with the Vuetify
+ * toolbar and its own button variants instead, so this rule set is gated on the shape and its
+ * fallbacks are the flat shape's base look (the raised values are Vuetify's, not skin rules).
  */
-.tiptapify-toolbar {
+.tiptapify-shape-toolbar-flat .tiptapify-toolbar {
   > .v-toolbar {
-    background: rgba(var(--v-theme-on-surface), 0.03);
-    border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    background: var(--tf-toolbar-bg, rgba(var(--v-theme-on-surface), 0.03));
+    border-bottom: var(--tf-toolbar-border-bottom, 1px solid rgba(var(--v-border-color), var(--v-border-opacity)));
+    color: var(--tf-toolbar-fg, rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)));
   }
 }
 
 /*
- * Quiet buttons of the toolbar and the bubble menus. Tripled class: outranks Vuetify's color utilities and
- * the theme rules that repaint colored buttons on hover, focus and press (`.bg-primary:focus` and the like).
- * Active buttons keep `color="primary"` (or `.tiptapify-btn--active`) and get the neutral pressed look.
+ * Quiet buttons: ghost icon buttons that only get a background on hover, and a neutral "pressed"
+ * state instead of the filled primary button. The buttons keep coloring themselves with
+ * `color="primary"` when active; this rule maps that to the pressed look. The rules apply iff
+ * `buttons` is quiet: through the root shape class in the toolbar, and through the
+ * `.tiptapify-quiet-buttons` carrier that the bubble menus carry only in that shape.
+ * Tripled class: outranks Vuetify's variant rules (`.v-btn--variant-elevated` background/shadow
+ * are plain (0-1-0), so the doubled/tripled class beats them — no `!important` needed for the
+ * resting state). The pressed-state block keeps its `!important`s: an active button carries the
+ * runtime theme utility class `.bg-primary`/`.text-primary`, which Vuetify generates with
+ * `!important`, and the consumer "admin theme" repaints those colored buttons on hover, focus
+ * and press (`.bg-primary:focus` and the like) — plain specificity loses against `!important`;
+ * this is the admin-theme defense set of the skin layer (spec: Specificity convention).
  */
-.tiptapify-toolbar,
+.tiptapify-shape-buttons-quiet .tiptapify-toolbar,
 .tiptapify-quiet-buttons {
   .v-btn.v-btn.v-btn {
-    border-radius: 6px;
-    box-shadow: none !important;
-    background-color: transparent !important;
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    border-radius: var(--tf-button-radius, 6px);
+    box-shadow: none;
+    background-color: transparent;
+    color: var(--tf-button-fg, rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)));
     transition: background-color 0.15s, color 0.15s;
 
     > .v-btn__overlay,
@@ -318,8 +338,8 @@ toolbarItems = toolbarItems
     &:hover,
     &:focus-visible,
     &[aria-expanded='true'] {
-      background-color: rgba(var(--v-theme-on-surface), 0.07) !important;
-      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+      background-color: var(--tf-button-hover-bg, rgba(var(--v-theme-on-surface), 0.07)) !important;
+      color: var(--tf-button-hover-fg, rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))) !important;
     }
 
     &.bg-primary,
@@ -328,14 +348,14 @@ toolbarItems = toolbarItems
       &,
       &:focus,
       &:active {
-        background-color: rgba(var(--v-theme-on-surface), 0.1) !important;
-        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+        background-color: var(--tf-button-active-bg, rgba(var(--v-theme-on-surface), 0.1)) !important;
+        color: var(--tf-button-hover-fg, rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))) !important;
       }
 
       &:hover,
       &:focus-visible,
       &[aria-expanded='true'] {
-        background-color: rgba(var(--v-theme-on-surface), 0.14) !important;
+        background-color: var(--tf-button-active-hover-bg, rgba(var(--v-theme-on-surface), 0.14)) !important;
       }
     }
 
@@ -357,45 +377,6 @@ toolbarItems = toolbarItems
   }
 }
 
-/* Dropdowns opened from the toolbar: a light card with compact rows of icon + label. */
-.tiptapify-menu {
-  /* Doubled classes: the admin theme pads menu lists and items with its own !important rules */
-  > .v-list.v-list {
-    padding: 4px !important;
-    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-
-    > .v-list-item.v-list-item {
-      min-height: 34px;
-      margin: 0 !important;
-      padding: 4px 8px !important;
-      border-radius: 6px;
-      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-
-      .v-list-item__prepend > .v-icon {
-        margin-inline-end: 0;
-        opacity: 0.6;
-      }
-
-      .v-list-item__spacer {
-        width: 10px !important;
-      }
-
-      .v-list-item-title {
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      &.v-list-item--active {
-        background: rgba(var(--v-theme-on-surface), 0.06);
-        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
-
-        > .v-list-item__overlay {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}
+/* Dropdowns opened from the toolbar: a light card with compact rows of icon + label.
+ * The pastel menu skin rules moved to src/skins/menu.css (SkinScope wrapper, spec step 5). */
 </style>

package/src/components/Toolbar/Items.test.ts

@@ -1,11 +1,14 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { createSSRApp, h, provide, ref } from 'vue'
+import { computed, createSSRApp, h, provide, ref } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { createVuetify } from 'vuetify'
 import Items from '@tiptapify/components/Toolbar/Items.vue'
 import HeadingButton from '@tiptapify/extensions/components/style/heading/Button.vue'
 import AlignmentMenuButton from '@tiptapify/extensions/components/alignment/menu/Button.vue'
 import { headingLevels } from '@tiptapify/constants/style'
+import { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+import { resolveSkin } from '@tiptapify/skins/registry'
+import { variantBtnTypes } from '@tiptapify/types/editor'
 
 const editor = {
   instanceId: 1,
@@ -23,16 +26,31 @@ const items = [
   },
 ]
 
-async function renderToolbar (toolbarItems: typeof items = items) {
+async function renderToolbar (
+  toolbarItems: typeof items = items,
+  skin: unknown = 'default',
+  variantBtn: variantBtnTypes = 'flat',
+) {
   const warnings: string[] = []
   const warn = vi.spyOn(console, 'warn').mockImplementation((...args: unknown[]) => {
     warnings.push(args.map(String).join(' '))
   })
 
+  // The shape the section markup reads: exactly the chain a real editor provides
+  const resolved = resolveSkin(skin as never)
+
   const app = createSSRApp({
     setup () {
       provide('tiptapifyEditor', ref(editor))
       provide('tiptapifyI18n', { t: (key: string) => key })
+      provide(TIPTAPIFY_CONFIG_KEY, {
+        variantBtn: ref(variantBtn),
+        variantField: ref('outlined'),
+        skin: ref(skin),
+        skinName: computed(() => resolved.name),
+        tokens: computed(() => resolved.tokens),
+        shape: computed(() => resolved.shape),
+      })
 
       return () => h(Items, { items: toolbarItems })
     },
@@ -45,6 +63,13 @@ async function renderToolbar (toolbarItems: typeof items = items) {
   return { html, warnings }
 }
 
+// The opening tag of the section's group element
+function groupTag (html: string): string {
+  const match = html.match(/<div[^>]*class="[^"]*tiptapify-toolbar-group[^"]*"[^>]*>/)
+
+  return match ? match[0] : ''
+}
+
 describe('Toolbar Items', () => {
   afterEach(() => {
     headingLevels.value = [1, 2, 3, 4, 5, 6]
@@ -96,4 +121,35 @@ describe('Toolbar Items', () => {
     expect(html).toContain('tiptapify-align-button-1')
     expect(html).toContain('tiptapify-dropdown-button__chevron')
   })
+
+  it('renders a grouped section as a VBtnGroup under groups: box', async () => {
+    const tag = groupTag(await renderToolbar(items, 'default').then((r) => r.html))
+
+    expect(tag).toContain('tiptapify-toolbar-group')
+    expect(tag).toContain('v-btn-group')
+    expect(tag).toContain('elevation-4')
+  })
+
+  it('keeps the 0.3.2 variantBtn elevation class conditional', async () => {
+    const flat = groupTag(await renderToolbar(items, 'default', 'flat').then((r) => r.html))
+    expect(flat).toContain('v-btn-group')
+    expect(flat).not.toContain('tiptapify-btn-group--elevated')
+
+    const elevated = groupTag(await renderToolbar(items, 'default', 'elevated').then((r) => r.html))
+    expect(elevated).toContain('tiptapify-btn-group--elevated')
+  })
+
+  it('renders a grouped section as a plain div under groups: flat', async () => {
+    const tag = groupTag(await renderToolbar(items, 'pastel').then((r) => r.html))
+
+    expect(tag).toContain('tiptapify-toolbar-group')
+    expect(tag).not.toContain('v-btn-group')
+  })
+
+  it('an inline groups: box flag on a pastel-base skin gets the VBtnGroup markup', async () => {
+    const tag = groupTag(await renderToolbar(items, { extends: 'pastel', groups: 'box' }).then((r) => r.html))
+
+    expect(tag).toContain('tiptapify-toolbar-group')
+    expect(tag).toContain('v-btn-group')
+  })
 })

package/src/components/Toolbar/Items.vue

@@ -4,10 +4,17 @@ import { PropType } from 'vue'
 
 import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+
 defineProps({
   items: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
+// The section markup follows the `groups` shape flag: 'box' renders the 0.3.2 VBtnGroup
+// (joined buttons in a raised box, the tokens below paint it), 'flat' keeps the plain div.
+// `variantBtn` carries the 0.3.2 elevation-override class onto the group.
+const { shape, variantBtn } = useTiptapifyConfig()
+
 </script>
 
 <template>
@@ -20,7 +27,17 @@ defineProps({
         <div class="tiptapify-toolbar-spacer" />
       </template>
       <template v-else>
-        <div v-if="item.group" class="tiptapify-toolbar-group">
+        <VBtnGroup
+          v-if="item.group && shape.groups === 'box'"
+          class="tiptapify-toolbar-group"
+          elevation="4"
+          :class="{ 'tiptapify-btn-group--elevated': variantBtn === 'elevated' }"
+        >
+          <template v-for="sectionItem in item.components" :key="sectionItem.name">
+            <component :is="sectionItem.component" v-bind="sectionItem.props ?? {}" />
+          </template>
+        </VBtnGroup>
+        <div v-else-if="item.group" class="tiptapify-toolbar-group">
           <template v-for="sectionItem in item.components" :key="sectionItem.name">
             <component :is="sectionItem.component" v-bind="sectionItem.props ?? {}" />
           </template>
@@ -40,26 +57,44 @@ defineProps({
 </template>
 
 <style lang="scss" scoped>
+/*
+ * Skin rules for the bar, the group boxes and the dividers (spec 2026-10-18: single rules
+ * reading `var(--tf-*)`). Base = the classic look, the fixture-canonical fallbacks; the
+ * shape gates (`toolbar: flat`, `groups: flat`) carry the same tokens with the shape's
+ * own base as fallback, so a shape flag without tokens paints the 0.3.3 look.
+ */
 .tiptapify-toolbar-items {
   /* Vuetify sizes .v-toolbar-items to its content; grow it to the full toolbar width,
    * otherwise the `~` spacer has no free space to expand into. */
   flex-grow: 1;
   flex-wrap: wrap;
   align-items: center;
-  gap: 4px 6px;
-  padding: 6px 8px;
+  row-gap: var(--tf-items-row-gap, 5px);
+  /* Classic: no column gap (Vuetify's `normal`); the flat gate sets the token's own base */
+  column-gap: var(--tf-items-gap, normal);
+  padding: var(--tf-items-padding, 12px 16px);
 }
 
 .tiptapify-toolbar-group {
   display: flex;
   align-items: center;
-  gap: 2px;
+
+  /* The classic group: a raised box around the section's buttons, Vuetify elevation 2 (fixture-canonical) */
+  height: var(--tf-group-height, 32px);
+  border-radius: var(--tf-group-radius, 4px);
+  background: var(--tf-group-bg, rgb(var(--v-theme-surface)));
+  box-shadow:
+    var(--tf-group-shadow,
+      0 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
+      0 2px 2px 0 var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
+      0 1px 5px 0 var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)));
 }
 
 .menu-divider {
-  width: 1px;
-  height: 20px;
-  background: rgba(var(--v-border-color), var(--v-border-opacity));
+  margin: 0 4px;
+  width: var(--tf-divider-width, 0px);
+  height: var(--tf-divider-height, 0px);
+  background: var(--tf-divider-color, transparent);
 }
 
 .menu-divider:nth-last-child(1),
@@ -70,4 +105,55 @@ defineProps({
 .tiptapify-toolbar-spacer {
   flex: 1 0 0;
 }
+
+/* Flat toolbar: compact padding and tighter gaps in the flat bar */
+.tiptapify-shape-toolbar-flat {
+  .tiptapify-toolbar-items {
+    column-gap: var(--tf-items-gap, 6px);
+    row-gap: var(--tf-items-row-gap, 4px);
+    padding: var(--tf-items-padding, 6px 8px);
+  }
+}
+
+/* Box groups: the section is a VBtnGroup (0.3.2 structure restored). The base token rules
+ * above keep painting the box: the scoped `.tiptapify-toolbar-group` (class + scope
+ * attribute) out-specifies Vuetify's single-class `.v-btn-group` background, radius and
+ * zero-shadow rules, and `.elevation-4`. Two 0.3.2 pieces are what its own CSS fights:
+ * - `.v-btn-group--density-default.v-btn-group` pins 48px at equal specificity, decided by
+ *   stylesheet order — 0.3.2 needed `:deep(.v-btn-group){ height: 32px !important }`, kept
+ *   here as the tokenized `--tf-group-height` consumer (the 0.3.2 set demands the
+ *   !important; the token contract stays honest, no new tokens);
+ * - `.menu-button { margin: 0 1px }` re-added for CSS-set parity with 0.3.2: inert there
+ *   too (no toolbar element carries the class), and the buttons joining inside the box is
+ *   native VBtnGroup (`border-radius: 0` + corner `inherit`), needing no rule of ours.
+ * The 0.3.2 `.tiptapify-btn-group--elevated` shadow override is NOT re-added: the token
+ * fallback is exactly that elevation-2 triple, and the scoped base rule beats elevation-4. */
+.tiptapify-shape-groups-box {
+  .tiptapify-toolbar-group {
+    height: var(--tf-group-height, 32px) !important;
+  }
+
+  .menu-button {
+    margin: 0 1px;
+  }
+}
+
+/* Flat groups: sections become plain runs of buttons with hairline dividers between them;
+ * the box shape keeps the raised group defaults above untouched. */
+.tiptapify-shape-groups-flat {
+  .tiptapify-toolbar-group {
+    gap: var(--tf-group-gap, 2px);
+    height: var(--tf-group-height, auto);
+    border-radius: var(--tf-group-radius, 0px);
+    background: var(--tf-group-bg, transparent);
+    box-shadow: var(--tf-group-shadow, none);
+  }
+
+  .menu-divider {
+    margin: 0;
+    width: var(--tf-divider-width, 1px);
+    height: var(--tf-divider-height, 20px);
+    background: var(--tf-divider-color, rgba(var(--v-border-color), var(--v-border-opacity)));
+  }
+}
 </style>