tiptapify 0.3.2 → 0.3.4

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

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createSSRApp, defineComponent, h, markRaw, provide, shallowRef } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import Toolbar from '@tiptapify/components/Toolbar/Index.vue'
+
+// Every editor call answers with something callable, so toolbar buttons can render
+function permissive (): unknown {
+  return new Proxy(() => false, {
+    get: (_, key) => {
+      if (key === '__v_skip') {
+        return true
+      }
+      if (key === Symbol.toPrimitive) {
+        return () => ''
+      }
+      if (typeof key === 'symbol' || key.startsWith('__v') || key === 'then') {
+        return undefined
+      }
+
+      return key === 'instanceId' ? 1 : permissive()
+    },
+    apply: () => permissive(),
+  })
+}
+
+const stub = (className: string) => markRaw(defineComponent({ render: () => h('i', { class: className }) }))
+
+async function renderToolbar (items: string[], customExtensions: unknown[]) {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  const app = createSSRApp({
+    setup () {
+      provide('tiptapifyEditor', shallowRef(permissive()))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+
+      return () => h(Toolbar, { items, customExtensions })
+    },
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('Toolbar', () => {
+  it('adds a custom button to an existing section after its own buttons', async () => {
+    const html = await renderToolbar(['sup', 'blockquote'], [
+      { section: 'formatExtra', group: true, components: [{ name: 'disclaimer', component: stub('custom-disclaimer') }] },
+    ])
+
+    expect(html).toContain('custom-disclaimer')
+    expect(html.indexOf('custom-disclaimer')).toBeGreaterThan(html.indexOf('tiptapify-toolbar-group'))
+  })
+
+  it('puts custom sections before the spacer', async () => {
+    const html = await renderToolbar(['bold', '~', 'undo'], [
+      { section: 'extra', group: true, components: [{ name: 'snippet', component: stub('custom-snippet') }] },
+    ])
+
+    expect(html.indexOf('custom-snippet')).toBeLessThan(html.indexOf('tiptapify-toolbar-spacer'))
+  })
+
+  it('does not leak custom buttons into the next editor', async () => {
+    await renderToolbar([], [
+      { section: 'formatExtra', group: true, components: [{ name: 'disclaimer', component: stub('custom-disclaimer') }] },
+    ])
+    const html = await renderToolbar([], [])
+
+    expect(html).not.toContain('custom-disclaimer')
+  })
+
+  it('groups the items by the separators, across sections', async () => {
+    const html = await renderToolbar(['bold', 'link', '|', 'blockquote', 'custom-note', '|', 'undo'], [
+      { section: 'extra', group: true, components: [{ name: 'custom-note', component: stub('custom-note') }] },
+    ])
+
+    const groups = html.split('tiptapify-toolbar-group').slice(1)
+    expect(groups).toHaveLength(3)
+    expect(groups[1]).toContain('custom-note')
+    expect(groups[0]).not.toContain('custom-note')
+  })
+
+  it('drops the place of a custom button the editor does not have', async () => {
+    const html = await renderToolbar(['bold', '|', 'custom-note', '|', 'undo'], [])
+
+    expect(html.split('tiptapify-toolbar-group').slice(1)).toHaveLength(2)
+  })
+
+  it('replaces a built-in button by a custom one of the same name in its place', async () => {
+    const html = await renderToolbar(['bold', '|', 'image', 'link'], [
+      { section: 'media', group: true, components: [{ name: 'image', component: stub('custom-image') }] },
+    ])
+
+    expect(html).toContain('custom-image')
+    expect(html.split('tiptapify-toolbar-group').slice(1)).toHaveLength(2)
+  })
+})

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,20 +24,73 @@ 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)
 
 // this prevents from overriding the default items
-let toolbarItems = [...Object.values(toolbarItemsGroups)]
+let toolbarItems = Object.values(toolbarItemsGroups).map(section => ({
+  ...section,
+  components: section.components.map(component => ({ ...component })),
+}))
 const availableItemsKeys = Object.keys(availableItems)
 
 type toolbarItemsType = { [key: string]: { section: string, group: boolean, components: any[] } }
 if (propsItemsExclude.value) {
   prepareExcludeToolbarItems()
+} else if (Array.isArray(propsItems.value) && propsItems.value.includes('|')) {
+  prepareGroupedToolbarItems(propsItems.value as string[])
 } else {
   prepareToolbarItems()
 }
 
+/**
+ * Items split by `'|'` into groups of their own, whatever sections the buttons come from. A name that is
+ * not a built-in item keeps a place for the custom button of that name; editors without it drop the place.
+ */
+function prepareGroupedToolbarItems(items: string[]) {
+  const groups: toolbarItemsType[string][] = []
+  const newGroup = () => ({ section: `__group_${groups.length}__`, group: true, components: [] as any[] })
+  let group = newGroup()
+
+  const flush = () => {
+    if (group.components.length > 0) {
+      groups.push(group)
+    }
+    group = newGroup()
+  }
+
+  for (const propsItem of items) {
+    if (propsItem === '|') {
+      flush()
+      continue
+    }
+
+    if (propsItem === '~') {
+      flush()
+      groups.push({ section: '__spacer__', group: false, components: [] })
+      group = newGroup()
+      continue
+    }
+
+    const itemName = propsItem.split(':')[0]
+    if (!availableItemsKeys.includes(itemName)) {
+      group.components.push({ name: itemName, component: null })
+      continue
+    }
+
+    const itemSections: toolbarItemsType = {}
+    addToolbarItem(itemSections, items, propsItem)
+    group.components.push(...Object.values(itemSections).flatMap(section => section.components))
+  }
+  flush()
+
+  toolbarItems = groups
+}
+
 function prepareToolbarItems() {
   const _toolbarItems: toolbarItemsType = {}
 
@@ -67,6 +121,15 @@ function prepareToolbarItems() {
         }
         continue
       }
+      // `~` pushes the items after it to the end of the toolbar
+      if (propsItem === '~') {
+        _toolbarItems['__spacer__'] ??= {
+          section: '__spacer__',
+          group: false,
+          components: []
+        }
+        continue
+      }
       const item = propsItem.split(':')
       if (!availableItemsKeys.includes(item[0])) {
         throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)
@@ -105,7 +168,9 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
   const itemSection = availableItems[_itemTitle]
   const section = toolbarItemsGroups[itemSection]
 
-  const component = section?.components.find((component: { name: string }) => component.name === _itemTitle)
+  // A copy: item options set its props, which must not reach the toolbars of other editors
+  const sectionComponent = section?.components.find((component: { name: string }) => component.name === _itemTitle)
+  const component = sectionComponent ? { ...sectionComponent } : undefined
 
   let itemExists = itemsList.includes(itemTitle)
   itemExists = propsItemsExclude.value ? itemExists : !itemExists
@@ -145,6 +210,20 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
     }
   }
 
+  // `orderedList:styles` adds the numbering styles dropdown
+  if (_itemTitle === 'orderedList' && _itemOptions.includes('styles')) {
+    component.props = {
+      withStyles: true,
+    }
+  }
+
+  // `align` is the alignment dropdown; `align:left,center,right` limits its options
+  if (_itemTitle === 'align' && _itemOptions.length > 0) {
+    component.props = {
+      alignments: _itemOptions,
+    }
+  }
+
   if (_itemTitle === 'bulletList' && _itemOptions.length > 0) {
     const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
     const withParagraph = paragraphIndex > -1
@@ -153,6 +232,7 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
     }
 
     component.props = {
+      withStyles: _itemOptions.includes('styles'),
       withDisc: _itemOptions.includes('disc'),
       withCircle: _itemOptions.includes('circle'),
       withSquare: _itemOptions.includes('square'),
@@ -164,25 +244,46 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
   return true
 }
 
-Object.keys(props.customExtensions).forEach((key: any) => {
-  const existingSection = toolbarItems.find(item => item.section === props.customExtensions[key].section)
-  if (existingSection) {
-    for (const component of props.customExtensions[key].components) {
-      const existingComponent = existingSection.components.find(_component => _component.name === component.name)
-      if (existingComponent) {
-        existingComponent.component = component.component
-      }
+// A custom button takes the place of the item of its name, joins its section or comes as a section of its own
+for (const customSection of props.customExtensions) {
+  const unplaced = []
+  for (const component of customSection.components) {
+    const place = toolbarItems.flatMap(item => item.components).find(_component => _component.name === component.name)
+    if (place) {
+      Object.assign(place, component)
+    } else {
+      unplaced.push(component)
     }
+  }
+
+  if (unplaced.length === 0) {
+    continue
+  }
+
+  const existingSection = toolbarItems.find(item => item.section === customSection.section)
+  if (existingSection) {
+    existingSection.components.push(...unplaced)
   } else {
-    toolbarItems.push(props.customExtensions[key])
+    const spacerIndex = toolbarItems.findIndex(item => item.section === '__spacer__')
+    toolbarItems.splice(spacerIndex > -1 ? spacerIndex : toolbarItems.length, 0, { ...customSection, components: unplaced })
   }
-})
+}
+
+toolbarItems = toolbarItems
+  .map(item => ({ ...item, components: item.components.filter(component => component.component) }))
+  .filter(item => item.components.length > 0 || ['__spacer__', '__separator__'].includes(item.section))
 
 </script>
 
 <template>
   <div v-if="editor" class="tiptapify-toolbar">
-    <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 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>
@@ -192,6 +293,90 @@ Object.keys(props.customExtensions).forEach((key: any) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
+/*
+ * 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-shape-toolbar-flat .tiptapify-toolbar {
+  > .v-toolbar {
+    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: 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-shape-buttons-quiet .tiptapify-toolbar,
+.tiptapify-quiet-buttons {
+  .v-btn.v-btn.v-btn {
+    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,
+    > .v-btn__underlay {
+      display: none;
+    }
+
+    &:hover,
+    &:focus-visible,
+    &[aria-expanded='true'] {
+      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,
+    &.text-primary,
+    &.tiptapify-btn--active {
+      &,
+      &:focus,
+      &:active {
+        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: var(--tf-button-active-hover-bg, rgba(var(--v-theme-on-surface), 0.14)) !important;
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba(var(--v-theme-on-surface), 0.25);
+      outline-offset: -2px;
+    }
+  }
+}
+
+/* A toolbar button that opens a dropdown: the current choice and a chevron */
+.tiptapify-toolbar .v-btn.tiptapify-dropdown-button {
+  min-width: 0;
+  padding-inline: 6px 4px;
+
+  .tiptapify-dropdown-button__chevron {
+    margin-inline-start: 2px;
+    opacity: 0.7;
+  }
+}
 
+/* 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,10 +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,
@@ -22,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 })
     },
@@ -44,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]
@@ -72,4 +98,58 @@ describe('Toolbar Items', () => {
     expect(html).not.toContain('tiptapify-heading-button-1')
     expect(html.match(/<button/g)).toHaveLength(3)
   })
+
+  it('renders a spacer that pushes the next items to the end', async () => {
+    const { html } = await renderToolbar([
+      items[0],
+      { section: '__spacer__', group: false, components: [] },
+      { section: 'actions', group: true, components: [{ name: 'heading', component: HeadingButton }] },
+    ])
+
+    expect(html).toContain('tiptapify-toolbar-spacer')
+  })
+
+  it('renders the alignment dropdown with the chosen alignments', async () => {
+    const { html } = await renderToolbar([
+      {
+        section: 'alignment',
+        group: true,
+        components: [{ name: 'align', component: AlignmentMenuButton, props: { alignments: ['left', 'center'] } }],
+      },
+    ])
+
+    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

@@ -1,30 +1,47 @@
 <script setup lang="ts">
 
-import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 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 {} } },
 })
 
-const { variantBtn } = useTiptapifyConfig()
+// 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>
-  <VToolbarItems class="px-2 py-3">
+  <VToolbarItems class="tiptapify-toolbar-items">
     <template v-for="item in items" :key="item.section">
       <template v-if="item.section === '__separator__'">
         <div class="menu-divider" />
       </template>
+      <template v-else-if="item.section === '__spacer__'">
+        <div class="tiptapify-toolbar-spacer" />
+      </template>
       <template v-else>
-        <VBtnGroup v-if="item.group" elevation="4" :class="{ 'tiptapify-btn-group--elevated': variantBtn === 'elevated' }">
+        <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>
+        </div>
         <template v-else>
           <component
             :is="sectionItem.component"
@@ -40,35 +57,103 @@ const { variantBtn } = useTiptapifyConfig()
 </template>
 
 <style lang="scss" scoped>
-.tiptapify-btn-group--elevated {
+/*
+ * 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;
+  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;
+
+  /* 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));
+      0 1px 5px 0 var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)));
 }
 
-:deep(.v-btn-group) {
-  height: 32px !important;
+.menu-divider {
+  margin: 0 4px;
+  width: var(--tf-divider-width, 0px);
+  height: var(--tf-divider-height, 0px);
+  background: var(--tf-divider-color, transparent);
 }
 
-.menu-item-title {
-  font-size: 14px;
+.menu-divider:nth-last-child(1),
+.menu-divider:has(+ .tiptapify-toolbar-spacer) {
+  display: none;
 }
 
-.menu-button {
-  margin: 0 1px;
+.tiptapify-toolbar-spacer {
+  flex: 1 0 0;
 }
 
-.menu-divider {
-  margin: 0 4px;
+/* 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);
+  }
 }
 
-.menu-divider:nth-last-child(1) {
-  display: none;
+/* 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;
+  }
 }
 
-.v-toolbar-items {
-  flex-wrap: wrap;
-  row-gap: 5px;
+/* 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>