tiptapify 0.3.2 → 0.3.4

package/src/components/Tiptapify.skin.test.ts

@@ -0,0 +1,186 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, createSSRApp, h, nextTick, ref, Ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import { createI18n } from 'vue-i18n'
+import Tiptapify from '@tiptapify/components/Tiptapify.vue'
+import { messages } from '@tiptapify/i18n'
+
+function withPlugins (app: { use: (plugin: never) => unknown }) {
+  app.use(createVuetify() as never)
+  app.use(createI18n({ legacy: false, locale: 'en', fallbackLocale: 'en', messages }) as never)
+}
+
+async function renderShell (skin: unknown): Promise<string> {
+  const app = createSSRApp({ setup: () => () => h(Tiptapify, { skin }) })
+  withPlugins(app)
+
+  return renderToString(app)
+}
+
+// The opening tag of the editor root div, so assertions see the skin class and the token style
+function rootTag (html: string): string {
+  const start = html.indexOf('tiptapify-editor-')
+
+  return html.slice(0, html.indexOf('>', start) + 1)
+}
+
+async function mountEditor (skinRef: Ref<unknown>) {
+  const app = createApp({ setup: () => () => h(Tiptapify, { skin: skinRef.value }) })
+  withPlugins(app)
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  app.mount(host)
+  await nextTick()
+  await nextTick()
+
+  return { app, host }
+}
+
+describe('Tiptapify skin resolution', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders the default skin class and emits no token vars', async () => {
+    const html = await renderShell('default')
+
+    expect(rootTag(html)).toContain('tiptapify-skin-default')
+    expect(rootTag(html)).not.toContain('--tf-')
+  })
+
+  it('renders the pastel skin class and emits its token overrides', async () => {
+    const html = await renderShell('pastel')
+
+    expect(rootTag(html)).toContain('tiptapify-skin-pastel')
+    expect(rootTag(html)).toContain('--tf-toolbar-bg:rgba(var(--v-theme-on-surface), 0.03)')
+    expect(rootTag(html)).toContain('--tf-group-shadow:none')
+    expect(rootTag(html)).toContain('--tf-button-radius:6px')
+  })
+
+  it('renders an inline skin object under tiptapify-skin-inline with merged tokens', async () => {
+    const html = await renderShell({ colors: { toolbarBg: 'rgb(1, 2, 3)' }, metrics: { buttonRadius: '9px' } })
+
+    expect(rootTag(html)).toContain('tiptapify-skin-inline')
+    expect(rootTag(html)).toContain('--tf-toolbar-bg:rgb(1, 2, 3)')
+    expect(rootTag(html)).toContain('--tf-button-radius:9px')
+  })
+
+  it('a named inline object renders under tiptapify-skin-{name}, not the inline name', async () => {
+    const html = await renderShell({
+      name: 'mint',
+      extends: 'pastel',
+      colors: { toolbarBg: 'rgba(0, 128, 0, 0.05)' },
+    })
+
+    expect(rootTag(html)).toContain('tiptapify-skin-mint')
+    expect(rootTag(html)).not.toContain('tiptapify-skin-inline')
+    expect(rootTag(html)).toContain('--tf-toolbar-bg:rgba(0, 128, 0, 0.05)')
+  })
+
+  it('falls back to the default skin for an unknown name', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const html = await renderShell('nope')
+
+    expect(rootTag(html)).toContain('tiptapify-skin-default')
+    expect(rootTag(html)).not.toContain('--tf-')
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('nope'))
+  })
+
+  it('re-resolves the skin when the prop changes, without re-rendering the editor', async () => {
+    const skin = ref<unknown>('default')
+    const { app, host } = await mountEditor(skin)
+
+    const root = host.querySelector('[id^=tiptapify-editor-]') as HTMLElement
+    expect(root.className).toContain('tiptapify-skin-default')
+
+    const proseMirror = host.querySelector('.ProseMirror')
+    expect(proseMirror).toBeTruthy()
+
+    skin.value = { colors: { toolbarBg: 'rgb(9, 9, 9)' } }
+    await nextTick()
+
+    expect(root.className).toContain('tiptapify-skin-inline')
+    expect(root.style.getPropertyValue('--tf-toolbar-bg')).toBe('rgb(9, 9, 9)')
+    // The editor DOM is the same node: a skin change never recreates the editor
+    expect(host.querySelector('.ProseMirror')).toBe(proseMirror)
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('keeps the pastel toolbar quiet through the resolved skin name', async () => {
+    const skin = ref<unknown>('pastel')
+    const { app, host } = await mountEditor(skin)
+
+    const toolbar = host.querySelector('.v-toolbar')
+    expect(toolbar?.classList.contains('v-toolbar--flat')).toBe(true)
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('the root carries all six shape classes: classic values for the default skin', async () => {
+    const tag = rootTag(await renderShell('default'))
+
+    expect(tag).toContain('tiptapify-shape-toolbar-raised')
+    expect(tag).toContain('tiptapify-shape-groups-box')
+    expect(tag).toContain('tiptapify-shape-buttons-vuetify')
+    expect(tag).toContain('tiptapify-shape-bubble-card')
+    expect(tag).toContain('tiptapify-shape-dialog-classic')
+    expect(tag).toContain('tiptapify-shape-menu-vuetify')
+  })
+
+  it('the pastel root carries the quiet shape classes and keeps the skin name class', async () => {
+    const tag = rootTag(await renderShell('pastel'))
+
+    expect(tag).toContain('tiptapify-skin-pastel')
+    expect(tag).toContain('tiptapify-shape-toolbar-flat')
+    expect(tag).toContain('tiptapify-shape-groups-flat')
+    expect(tag).toContain('tiptapify-shape-buttons-quiet')
+    expect(tag).toContain('tiptapify-shape-bubble-flat')
+    expect(tag).toContain('tiptapify-shape-dialog-soft')
+    expect(tag).toContain('tiptapify-shape-menu-soft')
+    expect(tag).not.toContain('tiptapify-shape-dialog-classic')
+    expect(tag).not.toContain('tiptapify-shape-buttons-vuetify')
+  })
+
+  it('an inline shape object lands on the root classes; the flags it omits stay classic', async () => {
+    const tag = rootTag(await renderShell({ buttons: 'quiet', dialog: 'soft' }))
+
+    expect(tag).toContain('tiptapify-skin-inline')
+    expect(tag).toContain('tiptapify-shape-buttons-quiet')
+    expect(tag).toContain('tiptapify-shape-dialog-soft')
+    expect(tag).toContain('tiptapify-shape-toolbar-raised')
+    expect(tag).toContain('tiptapify-shape-groups-box')
+    expect(tag).toContain('tiptapify-shape-bubble-card')
+    expect(tag).toContain('tiptapify-shape-menu-vuetify')
+  })
+
+  it('a custom skin extending pastel keeps the pastel shape classes under the inline name', async () => {
+    const tag = rootTag(await renderShell({ extends: 'pastel' }))
+
+    expect(tag).toContain('tiptapify-skin-inline')
+    expect(tag).toContain('tiptapify-shape-toolbar-flat')
+    expect(tag).toContain('tiptapify-shape-groups-flat')
+    expect(tag).toContain('tiptapify-shape-buttons-quiet')
+    expect(tag).toContain('tiptapify-shape-bubble-flat')
+    expect(tag).toContain('tiptapify-shape-dialog-soft')
+    expect(tag).toContain('tiptapify-shape-menu-soft')
+  })
+
+  it('the toolbar elevation follows the toolbar shape flag, not the skin name', async () => {
+    const skin = ref<unknown>({ toolbar: 'flat' })
+    const { app, host } = await mountEditor(skin)
+
+    expect(host.querySelector('.v-toolbar')?.classList.contains('v-toolbar--flat')).toBe(true)
+
+    skin.value = { toolbar: 'raised' }
+    await nextTick()
+
+    expect(host.querySelector('.v-toolbar')?.classList.contains('v-toolbar--flat')).toBe(false)
+
+    app.unmount()
+    host.remove()
+  })
+})

package/src/components/Tiptapify.vue

@@ -6,14 +6,24 @@ 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'
 
 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'
@@ -49,6 +59,10 @@ const props = defineProps({
   loading: { type: Boolean, default() { return false } },
   loadingColor: { type: String, default() { return 'default' } },
   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'])
@@ -135,14 +149,46 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
         getJSON: () => editorInstance.getJSON(),
       })
     },
+    {
+      captionPlaceholder: t('dialog.image.caption_placeholder'),
+      sliderMinImages: props.imageSlider,
+      sliderLabel: t('media.slider'),
+    },
 )
 
 provide('tiptapifyEditor', editor)
+
+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()
@@ -162,8 +208,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :id="`tiptapify-editor-${editor?.instanceId}`">
-    <div :class="`border border-t-0 rounded-t-${rounded} rounded-b-${rounded}`">
+  <div
+    :id="`tiptapify-editor-${editor?.instanceId}`"
+    :class="[resolvedSkin.className, shapeClasses]"
+    :style="resolvedSkin.tokens"
+  >
+    <div :class="`tiptapify-frame rounded-${rounded}`">
       <template v-if="toolbar">
         <Toolbar
           v-if="editor"
@@ -179,11 +229,13 @@ onBeforeUnmount(() => {
 
       <VProgressLinear v-model="loadingProgress" :color="loadingColor" :height="loadingHeight" :indeterminate="loading" />
 
-      <div class="pa-2 tiptapify-container resizable" :style="computeResizableHeight" @click="onContainerClick">
+      <div ref="scrollContainer" class="pa-2 tiptapify-container resizable" :style="computeResizableHeight" @click="onContainerClick">
         <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
         <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
 
+        <ImageBubbleMenu />
+
         <EditorContent :editor="editor" class="tiptapify-editor" />
       </div>
 
@@ -232,12 +284,38 @@ 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: 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));
+}
+
 .resizable {
   resize: vertical;
   overflow: auto;
 }
 
 .tiptapify-container {
+  /* The containing block of the bubble menus, so they scroll with the text they belong to */
+  position: relative;
   display: flex;
   flex-direction: column;
 }
@@ -281,6 +359,8 @@ onBeforeUnmount(() => {
 
   /* List styles */
   ul, ol {
+    /* Next to a floated image the markers stay out of it */
+    display: flow-root;
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
 
@@ -518,91 +598,211 @@ onBeforeUnmount(() => {
     display: block;
   }
 
-  [data-node="image"].has-focus {
-    [data-resize-handle] {
-      position: absolute;
-      background: rgba(0, 0, 0, 0.5);
-      border: 1px solid rgba(255, 255, 255, 0.8);
-      border-radius: 2px;
-      z-index: 10;
+  /* Image with the caption under it (see extensions/components/media/image/caption.ts) */
+  .tiptapify-image {
+    --tiptapify-image-max-height: 400px;
 
-      &:hover {
-        background: rgba(0, 0, 0, 0.8);
-      }
+    flex-direction: column;
+    gap: 4px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 1rem 0;
 
-      /* Corner handles */
-      &[data-resize-handle='top-left'],
-      &[data-resize-handle='top-right'],
-      &[data-resize-handle='bottom-left'],
-      &[data-resize-handle='bottom-right'] {
-        width: 8px;
-        height: 8px;
-      }
+    /* Never wider than the text, never taller than the max height: big photos stay out of the way */
+    img {
+      max-width: 100%;
+      height: auto !important;
+      margin: 0;
+    }
 
-      &[data-resize-handle='top-left'] {
-        top: -4px;
-        left: -4px;
-        cursor: nwse-resize;
-      }
+    [data-resize-wrapper] {
+      max-width: min(100%, calc(var(--tiptapify-image-max-height) * var(--tiptapify-image-ratio, 100)));
+      border-radius: var(--tf-image-radius, 0.125rem);
+      outline: 1px solid transparent;
+      transition: outline-color 0.15s;
+    }
 
-      &[data-resize-handle='top-right'] {
-        top: -4px;
-        right: -4px;
-        cursor: nesw-resize;
-      }
+    /* One block: hovering outlines it, a click selects it and shows its toolbar */
+    img {
+      cursor: pointer;
+      border-radius: var(--tf-image-radius, 0px);
+      background: var(--tf-image-bg, transparent);
+    }
 
-      &[data-resize-handle='bottom-left'] {
-        bottom: -4px;
-        left: -4px;
-        cursor: nesw-resize;
-      }
+    &.ProseMirror-selectednode [data-resize-wrapper] {
+      outline: var(--tf-image-outline, 1px solid rgba(0, 0, 0, 0.25));
+    }
 
-      &[data-resize-handle='bottom-right'] {
-        bottom: -4px;
-        right: -4px;
-        cursor: nwse-resize;
-      }
+    /* Centered unless floated; a floated image lets the text wrap around it */
+    &:not([data-align]):not(.tiptapify-slide) {
+      align-items: center;
+      margin-inline: auto;
 
-      /* Edge handles */
-      &[data-resize-handle='top'],
-      &[data-resize-handle='bottom'] {
-        height: 6px;
-        left: 8px;
-        right: 8px;
+      .tiptapify-image-caption {
+        text-align: center;
       }
+    }
 
-      &[data-resize-handle='top'] {
-        top: -3px;
-        cursor: ns-resize;
-      }
+    &[data-align='left'],
+    &[data-align='right'] {
+      max-width: 50%;
+      margin-top: 0.25rem;
+    }
 
-      &[data-resize-handle='bottom'] {
-        bottom: -3px;
-        cursor: ns-resize;
-      }
+    &[data-align='left'] {
+      float: left;
+      margin-right: 1.25rem;
+    }
 
-      &[data-resize-handle='left'],
-      &[data-resize-handle='right'] {
-        width: 6px;
-        top: 8px;
-        bottom: 8px;
-      }
+    &[data-align='right'] {
+      float: right;
+      margin-left: 1.25rem;
+    }
+  }
 
-      &[data-resize-handle='left'] {
-        left: -3px;
-        cursor: ew-resize;
-      }
+  /* Images in a row shown as a slider (extensions/components/media/image/slider.ts): a numbered grid */
+  .tiptapify-image.tiptapify-slide {
+    position: relative;
+    display: inline-flex !important;
+    box-sizing: border-box;
+    width: calc(100% / 3);
+    margin: 0;
+    padding: 8px 6px;
+    vertical-align: top;
+    background: rgba(var(--v-theme-primary), 0.06);
 
-      &[data-resize-handle='right'] {
-        right: -3px;
-        cursor: ew-resize;
-      }
+    [data-resize-wrapper] {
+      width: 100%;
+    }
+
+    img {
+      width: 100% !important;
+      max-width: none;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+
+    [data-resize-handle] {
+      display: none !important;
+    }
+
+    &::before {
+      position: absolute;
+      top: 14px;
+      left: 12px;
+      z-index: 1;
+      padding: 0 6px;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.6);
+      color: #fff;
+      content: attr(data-slide-label);
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      pointer-events: none;
+    }
+  }
+
+  &:has(.tiptapify-slide) {
+    container-type: inline-size;
+  }
+
+  /* The caret between two slides: a vertical line at the edge of the slide before it */
+  .tiptapify-slide + .ProseMirror-gapcursor:has(+ .tiptapify-slide) {
+    display: inline-block;
+
+    &::after {
+      top: 8px;
+      width: 0;
+      height: calc((100cqw / 3 - 12px) * 0.75);
+      border-top: 0;
+      border-left: 2px solid currentColor;
+    }
+  }
+
+  .tiptapify-image-caption {
+    width: 100%;
+    min-width: 0;
+    padding: 2px 0 3px;
+    border: 0;
+    border-bottom: 1px dashed transparent;
+    background: transparent;
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font: inherit;
+    font-size: 0.875em;
+    outline: none;
+    transition: border-color 0.15s;
+
+    &::placeholder {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    }
+
+    &:hover:not(:disabled),
+    &:focus {
+      border-bottom-color: rgba(var(--v-border-color), 0.4);
+    }
+
+    &:disabled:placeholder-shown {
+      display: none;
     }
+  }
 
-    [data-resize-state='true'] [data-resize-wrapper] {
-      outline: 1px solid rgba(0, 0, 0, 0.25);
-      border-radius: 0.125rem;
+  /* Resize handles of a selected image: dark squares at the corners and edge middles */
+  [data-node='image'] [data-resize-handle] {
+    display: none;
+  }
+
+  [data-node='image'].ProseMirror-selectednode [data-resize-handle] {
+    position: absolute;
+    z-index: 10;
+    display: block;
+    width: 10px;
+    height: 10px;
+    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; }
+    &[data-resize-handle='bottom-left'] { bottom: -5px !important; left: -5px !important; top: auto !important; cursor: nesw-resize; }
+    &[data-resize-handle='bottom-right'] { right: -5px !important; bottom: -5px !important; top: auto !important; left: auto !important; cursor: nwse-resize; }
+    &[data-resize-handle='top'] { top: -5px !important; left: calc(50% - 5px) !important; right: auto !important; cursor: ns-resize; }
+    &[data-resize-handle='bottom'] { bottom: -5px !important; top: auto !important; left: calc(50% - 5px) !important; right: auto !important; cursor: ns-resize; }
+    &[data-resize-handle='left'] { left: -5px !important; top: calc(50% - 5px) !important; bottom: auto !important; cursor: ew-resize; }
+    &[data-resize-handle='right'] { right: -5px !important; left: auto !important; top: calc(50% - 5px) !important; bottom: auto !important; cursor: ew-resize; }
+  }
+}
+
+/*
+ * 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;
   }
 }
 
@@ -622,7 +822,7 @@ onBeforeUnmount(() => {
  */
 .tiptapify-dialog-grid {
   display: grid;
-  gap: 24px;
+  gap: var(--tf-dialog-grid-gap, 24px);
   grid-template-columns: repeat(12, minmax(0, 1fr));
 
   > .tiptapify-dialog-col {
@@ -649,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;