@commonpub/editor 0.5.0 → 0.6.0

package/README.md

@@ -29,14 +29,47 @@ const editor = createCommonPubEditor({
 
 ### Block Types
 
-| Type       | Extension           | Description                         |
-| ---------- | ------------------- | ----------------------------------- |
-| `text`     | `CommonPubText`      | Rich text paragraph                 |
-| `heading`  | `CommonPubHeading`   | Heading (h1-h6)                     |
-| `code`     | `CommonPubCodeBlock` | Syntax-highlighted code block       |
-| `image`    | `CommonPubImage`     | Image with alt text and caption     |
-| `quote`    | `CommonPubQuote`     | Block quote with attribution        |
-| `callout`  | `CommonPubCallout`   | Callout box (info, warning, tip)    |
+20 block types are available, covering rich text, media, and maker-specific content:
+
+**Core blocks:**
+
+| Type       | Extension                 | Description                         |
+| ---------- | ------------------------- | ----------------------------------- |
+| `text`     | `CommonPubText`           | Rich text paragraph                 |
+| `heading`  | `CommonPubHeading`        | Heading (h1-h6)                     |
+| `code`     | `CommonPubCodeBlock`      | Syntax-highlighted code block       |
+| `image`    | `CommonPubImage`          | Image with alt text and caption     |
+| `quote`    | `CommonPubQuote`          | Block quote with attribution        |
+| `callout`  | `CommonPubCallout`        | Callout box (info, warning, tip)    |
+
+**Media & embed blocks:**
+
+| Type       | Extension                 | Description                         |
+| ---------- | ------------------------- | ----------------------------------- |
+| `gallery`  | `CommonPubGallery`        | Image gallery with captions         |
+| `video`    | `CommonPubVideo`          | Embedded video player               |
+| `embed`    | `CommonPubEmbed`          | External embed (iframe)             |
+| `markdown` | `CommonPubMarkdown`       | Raw markdown block                  |
+| `divider`  | —                         | Horizontal divider                  |
+| `sectionHeader` | —                    | Section header / separator          |
+
+**Maker-focused blocks:**
+
+| Type               | Extension                       | Description                         |
+| ------------------ | ------------------------------- | ----------------------------------- |
+| `partsList`        | `CommonPubPartsList`            | Bill of materials / parts list      |
+| `buildStep`        | `CommonPubBuildStep`            | Step-by-step build instructions     |
+| `toolList`         | `CommonPubToolList`             | Required tools list                 |
+| `downloads`        | `CommonPubDownloads`            | Downloadable files (STL, Gerber, etc.) |
+
+**Interactive blocks (explainers):**
+
+| Type                 | Extension                       | Description                         |
+| -------------------- | ------------------------------- | ----------------------------------- |
+| `quiz`               | `CommonPubQuiz`                 | Multiple-choice quiz                |
+| `interactiveSlider`  | `CommonPubInteractiveSlider`    | Interactive slider control          |
+| `checkpoint`         | `CommonPubCheckpoint`           | Progress checkpoint                 |
+| `mathNotation`       | `CommonPubMathNotation`         | Mathematical notation               |
 
 ### BlockTuple Format
 
@@ -76,7 +109,7 @@ Register custom block types or use the built-in ones:
 ```ts
 import { registerBlock, lookupBlock, listBlocks, registerCoreBlocks } from '@commonpub/editor';
 
-// Register all 6 core block types
+// Register all 20 built-in block types
 registerCoreBlocks();
 
 // Register a custom block type
@@ -139,7 +172,7 @@ pnpm typecheck    # Type-check without emitting
 
 - `@tiptap/core` + extensions: Editor framework
 - `@tiptap/pm`: ProseMirror bindings
-- `lowlight`: Syntax highlighting for code blocks
+- `shiki`: Syntax highlighting for code blocks
 - `zod`: Block content validation
 - `@commonpub/config`: Feature flags
 - `@commonpub/schema`: Content type definitions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/editor",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "TipTap block editor with 18+ maker-focused extensions for CommonPub",
   "license": "AGPL-3.0-or-later",
@@ -31,10 +31,14 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./vue": {
+      "import": "./vue/index.ts"
     }
   },
   "files": [
     "dist/",
+    "vue/",
     "!dist/__tests__/",
     "README.md",
     "LICENSE"
@@ -46,10 +50,11 @@
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.5.0",
-    "@commonpub/schema": "0.5.0"
+    "@commonpub/config": "0.8.0",
+    "@commonpub/schema": "0.9.2"
   },
   "peerDependencies": {
+    "vue": "^3.4.0",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -61,16 +66,23 @@
     "@tiptap/extension-link": "^2.11.0",
     "@tiptap/extension-list-item": "^2.11.0",
     "@tiptap/extension-ordered-list": "^2.11.0",
+    "@tiptap/extension-paragraph": "^2.11.0",
     "@tiptap/extension-placeholder": "^2.11.0",
     "@tiptap/extension-strike": "^2.11.0",
     "@tiptap/extension-text": "^2.11.0",
     "@tiptap/pm": "^2.11.0"
   },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/mdast": "^4.0.4",
     "jsdom": "^25.0.0",
     "typescript": "^5.7.0",
-    "vitest": "^3.0.0"
+    "vitest": "^3.0.0",
+    "vue": "^3.5.0"
   },
   "scripts": {
     "build": "tsc",

package/vue/components/BlockCanvas.vue

@@ -0,0 +1,512 @@
+<script setup lang="ts">
+/**
+ * BlockCanvas — the main editor canvas that renders a block array
+ * with wrappers, insert zones, and a block picker.
+ *
+ * Supports:
+ * - Insert zones between blocks (click to open picker)
+ * - Slash command (/ in empty text block) opens picker inline
+ * - Drag-and-drop reordering via BlockWrapper
+ * - Floating text toolbar on selection (delegated to FloatingToolbar)
+ */
+import { ref, inject, type Component } from 'vue';
+import type { EditorBlock, BlockTypeGroup } from '../types.js';
+import type { BlockEditor } from '../composables/useBlockEditor.js';
+import { BLOCK_COMPONENTS_KEY, UPLOAD_HANDLER_KEY, SEARCH_PRODUCTS_KEY } from '../provide.js';
+
+import BlockWrapper from './BlockWrapper.vue';
+import BlockPicker from './BlockPicker.vue';
+import BlockInsertZone from './BlockInsertZone.vue';
+
+// Block components — static import map
+import TextBlock from './blocks/TextBlock.vue';
+import HeadingBlock from './blocks/HeadingBlock.vue';
+import CodeBlock from './blocks/CodeBlock.vue';
+import ImageBlock from './blocks/ImageBlock.vue';
+import QuoteBlock from './blocks/QuoteBlock.vue';
+import CalloutBlock from './blocks/CalloutBlock.vue';
+import DividerBlock from './blocks/DividerBlock.vue';
+import VideoBlock from './blocks/VideoBlock.vue';
+import EmbedBlock from './blocks/EmbedBlock.vue';
+import GalleryBlock from './blocks/GalleryBlock.vue';
+import PartsListBlock from './blocks/PartsListBlock.vue';
+import BuildStepBlock from './blocks/BuildStepBlock.vue';
+import ToolListBlock from './blocks/ToolListBlock.vue';
+import DownloadsBlock from './blocks/DownloadsBlock.vue';
+import QuizBlock from './blocks/QuizBlock.vue';
+import SliderBlock from './blocks/SliderBlock.vue';
+import CheckpointBlock from './blocks/CheckpointBlock.vue';
+import MathBlock from './blocks/MathBlock.vue';
+import SectionHeaderBlock from './blocks/SectionHeaderBlock.vue';
+import MarkdownBlock from './blocks/MarkdownBlock.vue';
+
+const BLOCK_COMPONENTS: Record<string, Component> = {
+  paragraph: TextBlock,
+  text: TextBlock,
+  heading: HeadingBlock,
+  code: CodeBlock,
+  code_block: CodeBlock,
+  codeBlock: CodeBlock,
+  image: ImageBlock,
+  gallery: GalleryBlock,
+  quote: QuoteBlock,
+  blockquote: QuoteBlock,
+  callout: CalloutBlock,
+  divider: DividerBlock,
+  horizontal_rule: DividerBlock,
+  horizontalRule: DividerBlock,
+  video: VideoBlock,
+  embed: EmbedBlock,
+  partsList: PartsListBlock,
+  buildStep: BuildStepBlock,
+  toolList: ToolListBlock,
+  downloads: DownloadsBlock,
+  quiz: QuizBlock,
+  interactiveSlider: SliderBlock,
+  slider: SliderBlock,
+  checkpoint: CheckpointBlock,
+  mathNotation: MathBlock,
+  math: MathBlock,
+  bulletList: TextBlock,
+  orderedList: TextBlock,
+  sectionHeader: SectionHeaderBlock,
+  markdown: MarkdownBlock,
+};
+
+const props = defineProps<{
+  blockEditor: BlockEditor;
+  blockTypes: BlockTypeGroup[];
+  /** Upload handler passed through to ImageBlock/GalleryBlock */
+  onUpload?: (file: File) => Promise<{ url: string; width?: number | null; height?: number | null }>;
+  /** Product search handler passed through to PartsListBlock */
+  onSearchProducts?: (query: string) => Promise<Array<{ id: string; name: string; slug: string; description: string | null; category: string | null; imageUrl: string | null; purchaseUrl: string | null }>>;
+}>();
+
+// --- Provide/inject overrides ---
+const componentOverrides = inject(BLOCK_COMPONENTS_KEY, {});
+const injectedUpload = inject(UPLOAD_HANDLER_KEY, undefined);
+const injectedSearch = inject(SEARCH_PRODUCTS_KEY, undefined);
+
+/** Resolved upload handler — prop takes priority over injected */
+const resolvedUpload = props.onUpload ?? injectedUpload;
+const resolvedSearch = props.onSearchProducts ?? injectedSearch;
+
+// --- Block picker state ---
+const pickerVisible = ref(false);
+const pickerInsertIndex = ref(0);
+/** When non-null, slash command is replacing this block instead of inserting */
+const slashCommandBlockId = ref<string | null>(null);
+
+function openPicker(atIndex: number): void {
+  slashCommandBlockId.value = null;
+  pickerInsertIndex.value = atIndex;
+  pickerVisible.value = true;
+}
+
+function openSlashPicker(block: EditorBlock): void {
+  const idx = props.blockEditor.getBlockIndex(block.id);
+  if (idx === -1) return;
+  slashCommandBlockId.value = block.id;
+  pickerInsertIndex.value = idx;
+  pickerVisible.value = true;
+}
+
+function closePicker(): void {
+  pickerVisible.value = false;
+  slashCommandBlockId.value = null;
+}
+
+function onPickerSelect(type: string, attrs?: Record<string, unknown>): void {
+  if (slashCommandBlockId.value) {
+    props.blockEditor.replaceBlock(slashCommandBlockId.value, type, attrs);
+  } else {
+    props.blockEditor.addBlock(type, attrs, pickerInsertIndex.value);
+  }
+  closePicker();
+}
+
+// --- Floating toolbar state ---
+const floatingToolbar = ref<{
+  visible: boolean;
+  top: number;
+  left: number;
+  blockId: string;
+}>({ visible: false, top: 0, left: 0, blockId: '' });
+
+function onSelectionChange(block: EditorBlock, hasSelection: boolean, rect: DOMRect | null): void {
+  if (hasSelection && rect) {
+    const toolbarWidth = 180;
+    const toolbarHeight = 44;
+    const rawTop = rect.top - toolbarHeight;
+    const rawLeft = rect.left + rect.width / 2;
+    floatingToolbar.value = {
+      visible: true,
+      top: Math.max(4, rawTop),
+      left: Math.max(toolbarWidth / 2 + 4, Math.min(rawLeft, window.innerWidth - toolbarWidth / 2 - 4)),
+      blockId: block.id,
+    };
+  } else {
+    floatingToolbar.value = { visible: false, top: 0, left: 0, blockId: '' };
+  }
+}
+
+// --- Floating toolbar commands ---
+const blockRefs = ref<Map<string, { getEditor?: () => unknown }>>(new Map());
+
+function setBlockRef(blockId: string, el: unknown): void {
+  if (el && typeof el === 'object' && 'getEditor' in el) {
+    blockRefs.value.set(blockId, el as { getEditor: () => unknown });
+  }
+}
+
+function getActiveEditor(): unknown {
+  const ref = blockRefs.value.get(floatingToolbar.value.blockId);
+  return ref?.getEditor?.() ?? null;
+}
+
+interface TipTapChainable {
+  focus: () => TipTapChainable;
+  toggleMark: (mark: string) => TipTapChainable;
+  unsetLink: () => TipTapChainable;
+  extendMarkRange: (type: string) => TipTapChainable;
+  setLink: (attrs: { href: string }) => TipTapChainable;
+  run: () => void;
+}
+
+interface TipTapEditor {
+  chain: () => TipTapChainable;
+  isActive: (name: string) => boolean;
+}
+
+function toggleMark(mark: string): void {
+  const editor = getActiveEditor() as TipTapEditor | null;
+  if (!editor) return;
+  editor.chain().focus().toggleMark(mark).run();
+}
+
+function toggleLink(): void {
+  const editor = getActiveEditor() as TipTapEditor | null;
+  if (!editor) return;
+  if (editor.isActive('link')) {
+    editor.chain().focus().unsetLink().run();
+    return;
+  }
+  const url = window.prompt('Enter URL:');
+  if (url) {
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+  }
+}
+
+// --- Empty state ---
+function addFirstBlock(): void {
+  props.blockEditor.addBlock('paragraph');
+}
+
+// --- Block actions ---
+function onSelect(block: EditorBlock): void {
+  props.blockEditor.selectBlock(block.id);
+}
+
+function onDelete(block: EditorBlock): void {
+  props.blockEditor.removeBlock(block.id);
+}
+
+function onDuplicate(block: EditorBlock): void {
+  props.blockEditor.duplicateBlock(block.id);
+}
+
+function onMoveUp(block: EditorBlock): void {
+  props.blockEditor.moveBlockUp(block.id);
+}
+
+function onMoveDown(block: EditorBlock): void {
+  props.blockEditor.moveBlockDown(block.id);
+}
+
+function onBlockUpdate(block: EditorBlock, content: Record<string, unknown>): void {
+  props.blockEditor.updateBlock(block.id, content);
+}
+
+function onEnterAtEnd(block: EditorBlock): void {
+  const idx = props.blockEditor.getBlockIndex(block.id);
+  if (idx === -1) return;
+  props.blockEditor.addBlock('paragraph', undefined, idx + 1);
+}
+
+function onBackspaceEmpty(block: EditorBlock): void {
+  const idx = props.blockEditor.getBlockIndex(block.id);
+  if (idx === -1) return;
+  if (props.blockEditor.blocks.value.length <= 1) return;
+  props.blockEditor.removeBlock(block.id);
+}
+
+// --- Drag and drop ---
+const draggedBlockId = ref<string | null>(null);
+
+function onDragStart(block: EditorBlock): void {
+  draggedBlockId.value = block.id;
+}
+
+function onDragEnd(): void {
+  draggedBlockId.value = null;
+}
+
+function onDrop(atIndex: number, event: DragEvent): void {
+  event.preventDefault();
+  if (!draggedBlockId.value) return;
+
+  const fromIndex = props.blockEditor.getBlockIndex(draggedBlockId.value);
+  if (fromIndex === -1) return;
+
+  const toIndex = atIndex > fromIndex ? atIndex - 1 : atIndex;
+  props.blockEditor.moveBlock(fromIndex, toIndex);
+  draggedBlockId.value = null;
+}
+
+// --- Click outside to deselect ---
+function onCanvasClick(): void {
+  props.blockEditor.selectBlock(null);
+  floatingToolbar.value = { visible: false, top: 0, left: 0, blockId: '' };
+}
+
+// --- Resolve block component (injected overrides take priority) ---
+function getBlockComponent(type: string): Component {
+  return componentOverrides[type] ?? BLOCK_COMPONENTS[type] ?? TextBlock;
+}
+
+/** Compute auto-numbered content for buildStep blocks */
+function getBlockContent(block: EditorBlock, index: number): Record<string, unknown> {
+  if (block.type === 'buildStep') {
+    let stepNum = 1;
+    for (let i = 0; i < index; i++) {
+      if (props.blockEditor.blocks.value[i].type === 'buildStep') stepNum++;
+    }
+    return { ...block.content, stepNumber: stepNum };
+  }
+  return block.content;
+}
+
+/** Check if a block type uses the TextBlock component (supports slash commands) */
+function isTextBlock(type: string): boolean {
+  return type === 'paragraph' || type === 'bulletList' || type === 'orderedList';
+}
+
+/** Check if a block type needs the onUpload prop */
+function needsUpload(type: string): boolean {
+  return type === 'image' || type === 'gallery';
+}
+
+/** Check if a block type needs the onSearchProducts prop */
+function needsSearch(type: string): boolean {
+  return type === 'partsList';
+}
+</script>
+
+<template>
+  <div class="cpub-block-canvas" @click.self="onCanvasClick">
+    <!-- Page card wrapper -->
+    <div class="cpub-canvas-page">
+
+    <!-- Empty state -->
+    <div v-if="blockEditor.isEmpty.value" class="cpub-canvas-empty" @click="addFirstBlock">
+      <div class="cpub-canvas-empty-icon"><i class="fa-solid fa-pen-nib"></i></div>
+      <p class="cpub-canvas-empty-title">Start writing</p>
+      <p class="cpub-canvas-empty-desc">Click here to begin, or use the sidebar to add blocks</p>
+    </div>
+
+    <!-- Insert zone at top -->
+    <BlockInsertZone @insert="openPicker(0)" />
+    <!-- Picker at top position -->
+    <div v-if="pickerVisible && !slashCommandBlockId && pickerInsertIndex === 0" class="cpub-canvas-picker-anchor">
+      <BlockPicker :groups="blockTypes" :visible="true" @select="onPickerSelect" @close="closePicker" />
+    </div>
+
+    <!-- Block list -->
+    <template v-for="(block, index) in blockEditor.blocks.value" :key="block.id">
+      <BlockWrapper
+        :block="block"
+        :selected="blockEditor.selectedBlockId.value === block.id"
+        @select="onSelect(block)"
+        @delete="onDelete(block)"
+        @duplicate="onDuplicate(block)"
+        @move-up="onMoveUp(block)"
+        @move-down="onMoveDown(block)"
+        @drag-start="onDragStart(block)"
+        @drag-end="onDragEnd"
+      >
+        <component
+          :is="getBlockComponent(block.type)"
+          :ref="(el: unknown) => isTextBlock(block.type) && setBlockRef(block.id, el)"
+          :content="getBlockContent(block, index)"
+          v-bind="{
+            ...(needsUpload(block.type) && resolvedUpload ? { onUpload: resolvedUpload } : {}),
+            ...(needsSearch(block.type) && resolvedSearch ? { onSearchProducts: resolvedSearch } : {}),
+          }"
+          @update="(c: Record<string, unknown>) => onBlockUpdate(block, c)"
+          @slash-command="openSlashPicker(block)"
+          @selection-change="(has: boolean, rect: DOMRect | null) => onSelectionChange(block, has, rect)"
+          @enter-at-end="onEnterAtEnd(block)"
+          @backspace-empty="onBackspaceEmpty(block)"
+        />
+      </BlockWrapper>
+
+      <!-- Picker: slash command replaces this block -->
+      <div v-if="pickerVisible && slashCommandBlockId === block.id" class="cpub-canvas-picker-anchor">
+        <BlockPicker :groups="blockTypes" :visible="true" @select="onPickerSelect" @close="closePicker" />
+      </div>
+
+      <!-- Insert zone after each block -->
+      <BlockInsertZone
+        @insert="openPicker(index + 1)"
+        @drop="onDrop(index + 1, $event)"
+      />
+
+      <!-- Picker: insert zone triggered at this position -->
+      <div v-if="pickerVisible && !slashCommandBlockId && pickerInsertIndex === index + 1" class="cpub-canvas-picker-anchor">
+        <BlockPicker :groups="blockTypes" :visible="true" @select="onPickerSelect" @close="closePicker" />
+      </div>
+    </template>
+
+    </div><!-- /.cpub-canvas-page -->
+
+    <!-- Floating text toolbar -->
+    <Teleport to="body">
+      <div
+        v-if="floatingToolbar.visible"
+        class="cpub-floating-toolbar"
+        :style="{ top: floatingToolbar.top + 'px', left: floatingToolbar.left + 'px' }"
+      >
+        <button class="cpub-ft-btn" title="Bold" @mousedown.prevent="toggleMark('bold')">
+          <i class="fa-solid fa-bold"></i>
+        </button>
+        <button class="cpub-ft-btn" title="Italic" @mousedown.prevent="toggleMark('italic')">
+          <i class="fa-solid fa-italic"></i>
+        </button>
+        <button class="cpub-ft-btn" title="Strikethrough" @mousedown.prevent="toggleMark('strike')">
+          <i class="fa-solid fa-strikethrough"></i>
+        </button>
+        <button class="cpub-ft-btn" title="Inline code" @mousedown.prevent="toggleMark('code')">
+          <i class="fa-solid fa-code"></i>
+        </button>
+        <div class="cpub-ft-divider" />
+        <button class="cpub-ft-btn" title="Link" @mousedown.prevent="toggleLink">
+          <i class="fa-solid fa-link"></i>
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-canvas {
+  padding: 36px 0 52px;
+  min-height: 300px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.cpub-canvas-page {
+  width: 100%;
+  max-width: 680px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-md);
+  padding: 44px 56px;
+  position: relative;
+}
+
+@media (max-width: 768px) {
+  .cpub-canvas-page {
+    border: none;
+    box-shadow: none;
+    padding: 16px;
+  }
+  .cpub-block-canvas {
+    padding: 8px 0 48px;
+  }
+}
+
+.cpub-canvas-empty {
+  text-align: center;
+  padding: 48px 24px 32px;
+  cursor: pointer;
+  border: 2px dashed transparent;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.cpub-canvas-empty:hover {
+  border-color: var(--accent-border);
+  background: var(--accent-bg);
+}
+
+.cpub-canvas-empty-icon {
+  font-size: 32px;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+}
+
+.cpub-canvas-empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+
+.cpub-canvas-empty-desc {
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.cpub-canvas-picker-anchor {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+</style>
+
+<!-- Floating toolbar styles (global since it's teleported) -->
+<style>
+.cpub-floating-toolbar {
+  --ft-surface: rgba(255, 255, 255, 0.15);
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  background: var(--text, #1a1a1a);
+  border: var(--border-width-default) solid var(--border, #1a1a1a);
+  box-shadow: var(--shadow-md);
+  padding: 3px;
+  transform: translateX(-50%);
+  pointer-events: auto;
+}
+
+.cpub-ft-btn {
+  width: 30px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--surface3, #eaeae7);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0;
+  transition: background 0.08s, color 0.08s;
+}
+
+.cpub-ft-btn:hover {
+  background: var(--ft-surface);
+  color: var(--surface, #fff);
+}
+
+.cpub-ft-divider {
+  width: 2px;
+  height: 18px;
+  background: var(--ft-surface);
+  margin: 0 2px;
+}
+</style>