@commonpub/layer 0.7.2 → 0.7.4

package/components/editors/EditorBlocks.vue

@@ -1,248 +0,0 @@
-<script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-
-/**
- * Reusable block library sidebar for editors.
- * Renders a searchable list of insertable blocks grouped by category.
- * Clicking a block adds it to the end of the document via the block editor composable.
- */
-export interface BlockDef {
-  type: string;
-  label: string;
-  icon: string;
-  description?: string;
-  attrs?: Record<string, unknown>;
-}
-
-export interface BlockGroup {
-  name: string;
-  variant?: string;
-  blocks: BlockDef[];
-}
-
-const props = defineProps<{
-  groups: BlockGroup[];
-  blockEditor: BlockEditor;
-}>();
-
-const blockSearch = ref('');
-
-const filteredGroups = computed(() => {
-  const q = blockSearch.value.toLowerCase();
-  if (!q) return props.groups;
-  return props.groups
-    .map((g) => ({ ...g, blocks: g.blocks.filter((b) => b.label.toLowerCase().includes(q)) }))
-    .filter((g) => g.blocks.length > 0);
-});
-
-function insertBlock(block: BlockDef): void {
-  const selectedId = props.blockEditor.selectedBlockId.value;
-  if (selectedId) {
-    const idx = props.blockEditor.getBlockIndex(selectedId);
-    props.blockEditor.addBlock(block.type, block.attrs, idx + 1);
-  } else {
-    props.blockEditor.addBlock(block.type, block.attrs);
-  }
-}
-</script>
-
-<template>
-  <div class="cpub-block-library">
-    <div class="cpub-bl-search">
-      <i class="fa-solid fa-magnifying-glass cpub-bl-search-icon"></i>
-      <input
-        v-model="blockSearch"
-        type="text"
-        placeholder="Search blocks..."
-        class="cpub-bl-search-input"
-        aria-label="Search blocks"
-      />
-    </div>
-    <div class="cpub-bl-groups">
-      <div v-for="group in filteredGroups" :key="group.name" class="cpub-bl-group">
-        <div class="cpub-bl-group-label">{{ group.name }}</div>
-        <div class="cpub-bl-blocks">
-          <button
-            v-for="block in group.blocks"
-            :key="block.type + (block.attrs?.variant ?? '')"
-            :data-block="block.type"
-            class="cpub-bl-block"
-            :class="group.variant"
-            :title="block.label"
-            @click="insertBlock(block)"
-          >
-            <span class="cpub-bl-block-icon"><i :class="['fa-solid', block.icon]"></i></span>
-            <span class="cpub-bl-block-label">{{ block.label }}</span>
-            <span class="cpub-bl-block-drag"><i class="fa-solid fa-grip-dots-vertical"></i></span>
-          </button>
-        </div>
-      </div>
-      <div v-if="filteredGroups.length === 0" class="cpub-bl-empty">
-        No blocks match "{{ blockSearch }}"
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cpub-block-library {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.cpub-bl-search {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border);
-  padding: 5px 9px;
-  margin: 10px 8px 4px;
-}
-
-.cpub-bl-search-icon {
-  font-size: 10px;
-  color: var(--text-faint);
-  flex-shrink: 0;
-}
-
-.cpub-bl-search-input {
-  background: transparent;
-  border: none;
-  outline: none;
-  font-size: 12px;
-  color: var(--text);
-  width: 100%;
-}
-
-.cpub-bl-search-input::placeholder {
-  color: var(--text-faint);
-}
-
-.cpub-bl-groups {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.cpub-bl-group {
-  padding: 4px 0;
-}
-
-.cpub-bl-group-label {
-  font-family: var(--font-mono);
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  padding: 6px 12px 4px;
-}
-
-.cpub-bl-blocks {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.cpub-bl-block {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 10px 10px;
-  cursor: pointer;
-  border: var(--border-width-default) solid transparent;
-  background: transparent;
-  color: var(--text-dim);
-  font-size: 12px;
-  user-select: none;
-  transition: background 0.1s;
-  text-align: left;
-  width: 100%;
-  margin: 0 4px;
-}
-
-.cpub-bl-block:hover {
-  background: var(--surface2);
-  border-color: var(--border2);
-  color: var(--text);
-}
-
-.cpub-bl-block-icon {
-  width: 22px;
-  height: 22px;
-  background: var(--surface3);
-  border: var(--border-width-default) solid var(--border2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  color: var(--text-faint);
-  flex-shrink: 0;
-  transition: background 0.1s, color 0.1s;
-}
-
-.cpub-bl-block:hover .cpub-bl-block-icon {
-  background: var(--accent-bg);
-  border-color: var(--accent-border);
-  color: var(--accent);
-}
-
-.cpub-bl-block-label {
-  font-size: 11px;
-  flex: 1;
-}
-
-.cpub-bl-block-drag {
-  font-size: 9px;
-  color: var(--text-faint);
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-
-.cpub-bl-block:hover .cpub-bl-block-drag {
-  opacity: 1;
-}
-
-.cpub-bl-empty {
-  font-size: 11px;
-  color: var(--text-faint);
-  padding: 12px;
-  text-align: center;
-}
-
-/* Touch devices: always show drag grip since there's no hover */
-@media (hover: none) {
-  .cpub-bl-block-drag { opacity: 1; }
-}
-
-/* Per-block-type icon colors */
-[data-block="heading"] .cpub-bl-block-icon { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }
-[data-block="text"] .cpub-bl-block-icon,
-[data-block="paragraph"] .cpub-bl-block-icon { color: var(--text-dim); background: var(--surface2); }
-[data-block="image"] .cpub-bl-block-icon { color: #38bdf8; background: rgba(56, 189, 248, 0.08); }
-[data-block="code"] .cpub-bl-block-icon,
-[data-block="code_block"] .cpub-bl-block-icon { color: #c084fc; background: rgba(192, 132, 252, 0.08); }
-[data-block="callout"] .cpub-bl-block-icon { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
-[data-block="quote"] .cpub-bl-block-icon,
-[data-block="blockquote"] .cpub-bl-block-icon { color: #94a3b8; background: rgba(148, 163, 184, 0.08); }
-[data-block="embed"] .cpub-bl-block-icon { color: #f472b6; background: rgba(244, 114, 182, 0.08); }
-[data-block="video"] .cpub-bl-block-icon { color: #fb923c; background: rgba(251, 146, 60, 0.08); }
-[data-block="divider"] .cpub-bl-block-icon,
-[data-block="horizontal_rule"] .cpub-bl-block-icon,
-[data-block="horizontalRule"] .cpub-bl-block-icon { color: var(--text-faint); background: var(--surface2); }
-[data-block="gallery"] .cpub-bl-block-icon { color: #2dd4bf; background: rgba(45, 212, 191, 0.08); }
-[data-block="quiz"] .cpub-bl-block-icon { color: #4ade80; background: rgba(74, 222, 128, 0.08); }
-[data-block="slider"] .cpub-bl-block-icon,
-[data-block="interactiveSlider"] .cpub-bl-block-icon { color: #818cf8; background: rgba(129, 140, 248, 0.08); }
-[data-block="math"] .cpub-bl-block-icon,
-[data-block="mathNotation"] .cpub-bl-block-icon { color: #e879f9; background: rgba(232, 121, 249, 0.08); }
-[data-block="markdown"] .cpub-bl-block-icon { color: var(--text-dim); background: var(--surface2); }
-[data-block="buildStep"] .cpub-bl-block-icon { color: var(--accent); background: var(--accent-bg); }
-[data-block="partsList"] .cpub-bl-block-icon { color: #fb7185; background: rgba(251, 113, 133, 0.08); }
-[data-block="toolList"] .cpub-bl-block-icon { color: #a78bfa; background: rgba(167, 139, 250, 0.08); }
-[data-block="downloads"] .cpub-bl-block-icon { color: #22d3ee; background: rgba(34, 211, 238, 0.08); }
-[data-block="sectionHeader"] .cpub-bl-block-icon { color: var(--accent); background: var(--accent-bg); }
-[data-block="checkpoint"] .cpub-bl-block-icon { color: #34d399; background: rgba(52, 211, 153, 0.08); }
-</style>

package/components/editors/EditorSection.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-/**
- * Collapsible section for editor property panels.
- * Reused across all editor types.
- */
-defineProps<{
-  title: string;
-  icon: string;
-  open?: boolean;
-}>();
-
-const emit = defineEmits<{
-  toggle: [];
-}>();
-</script>
-
-<template>
-  <div class="cpub-ep-section" :class="{ collapsed: !open }">
-    <button class="cpub-ep-section-header" @click="emit('toggle')">
-      <i :class="['fa', icon, 'cpub-ep-sec-icon']"></i>
-      <span class="cpub-ep-sec-label">{{ title }}</span>
-      <i class="fa-solid fa-chevron-down cpub-ep-sec-arrow"></i>
-    </button>
-    <div v-if="open" class="cpub-ep-section-body">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cpub-ep-section {
-  border-bottom: var(--border-width-default) solid var(--border);
-}
-
-.cpub-ep-section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text);
-  font-size: 11px;
-  font-family: var(--font-mono);
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  text-align: left;
-}
-
-.cpub-ep-section-header:hover {
-  background: var(--surface2);
-}
-
-.cpub-ep-sec-icon {
-  font-size: 10px;
-  color: var(--text-faint);
-  width: 14px;
-  text-align: center;
-}
-
-.cpub-ep-sec-label {
-  flex: 1;
-}
-
-.cpub-ep-sec-arrow {
-  font-size: 9px;
-  color: var(--text-faint);
-  transition: transform 0.15s;
-}
-
-.collapsed .cpub-ep-sec-arrow {
-  transform: rotate(-90deg);
-}
-
-.cpub-ep-section-body {
-  padding: 8px 12px 14px;
-}
-</style>

package/components/editors/EditorShell.vue

@@ -1,196 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  showLeftSidebar?: boolean;
-  showRightSidebar?: boolean;
-}>();
-
-const leftOpen = ref(false);
-const rightOpen = ref(false);
-
-function toggleLeft(): void {
-  leftOpen.value = !leftOpen.value;
-  if (leftOpen.value) rightOpen.value = false;
-}
-
-function toggleRight(): void {
-  rightOpen.value = !rightOpen.value;
-  if (rightOpen.value) leftOpen.value = false;
-}
-</script>
-
-<template>
-  <div class="cpub-editor-shell-wrapper">
-    <div class="cpub-editor-shell-inner">
-      <!-- Mobile sidebar toggles -->
-      <div class="cpub-editor-mobile-toggles">
-        <button v-if="showLeftSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle blocks panel" @click="toggleLeft">
-          <i class="fa-solid fa-layer-group"></i>
-        </button>
-        <button v-if="showRightSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle properties panel" @click="toggleRight">
-          <i class="fa-solid fa-sliders"></i>
-        </button>
-      </div>
-
-      <!-- Left sidebar -->
-      <aside
-        v-if="showLeftSidebar"
-        class="cpub-editor-left"
-        :class="{ 'cpub-editor-sidebar-open': leftOpen }"
-        aria-label="Editor sidebar"
-      >
-        <slot name="left" />
-      </aside>
-
-      <!-- Overlay for mobile sidebars -->
-      <div v-if="leftOpen || rightOpen" class="cpub-editor-overlay" @click="leftOpen = false; rightOpen = false" />
-
-      <div class="cpub-editor-center">
-        <slot />
-      </div>
-
-      <!-- Right sidebar -->
-      <aside
-        v-if="showRightSidebar"
-        class="cpub-editor-right"
-        :class="{ 'cpub-editor-sidebar-open': rightOpen }"
-        aria-label="Properties"
-      >
-        <slot name="right" />
-      </aside>
-    </div>
-
-    <!-- Status bar -->
-    <div v-if="$slots.status" class="cpub-editor-status-bar">
-      <slot name="status" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cpub-editor-shell-wrapper {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-}
-
-.cpub-editor-shell-inner {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.cpub-editor-status-bar {
-  height: 28px;
-  flex-shrink: 0;
-  background: var(--surface);
-  border-top: var(--border-width-default) solid var(--border);
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  gap: 14px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-faint);
-}
-
-.cpub-editor-left {
-  width: 220px;
-  flex-shrink: 0;
-  background: var(--surface);
-  border-right: var(--border-width-default) solid var(--border);
-  overflow-y: auto;
-  padding: var(--space-4);
-}
-
-.cpub-editor-center {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-6);
-  background: var(--bg);
-}
-
-.cpub-editor-right {
-  width: 280px;
-  flex-shrink: 0;
-  background: var(--surface);
-  border-left: var(--border-width-default) solid var(--border);
-  overflow-y: auto;
-  padding: var(--space-4);
-}
-
-.cpub-editor-mobile-toggles {
-  display: none;
-}
-
-.cpub-editor-overlay {
-  display: none;
-}
-
-@media (max-width: 1024px) {
-  .cpub-editor-left,
-  .cpub-editor-right {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: var(--z-modal, 200);
-    transform: translateX(-100%);
-    transition: transform 0.2s ease;
-  }
-
-  .cpub-editor-left {
-    left: 0;
-  }
-
-  .cpub-editor-right {
-    right: 0;
-    left: auto;
-    transform: translateX(100%);
-  }
-
-  .cpub-editor-left.cpub-editor-sidebar-open {
-    transform: translateX(0);
-  }
-
-  .cpub-editor-right.cpub-editor-sidebar-open {
-    transform: translateX(0);
-  }
-
-  .cpub-editor-overlay {
-    display: block;
-    position: fixed;
-    inset: 0;
-    background: var(--color-surface-overlay-light);
-    z-index: calc(var(--z-modal, 200) - 1);
-  }
-
-  .cpub-editor-mobile-toggles {
-    display: flex;
-    position: fixed;
-    bottom: var(--space-4);
-    right: var(--space-4);
-    gap: var(--space-2);
-    z-index: var(--z-fixed, 100);
-  }
-
-  .cpub-editor-toggle-btn {
-    width: 44px;
-    height: 44px;
-    border: var(--border-width-default) solid var(--border);
-    background: var(--surface);
-    color: var(--text-dim);
-    font-size: 16px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: var(--shadow-md, var(--shadow-md));
-  }
-
-  .cpub-editor-toggle-btn:hover {
-    background: var(--surface2);
-    color: var(--text);
-  }
-}
-</style>

package/components/editors/EditorTagInput.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-/**
- * Reusable tag input for editor panels.
- * Used by Article, Blog, Project editors.
- */
-const props = defineProps<{
-  tags: string[];
-}>();
-
-const emit = defineEmits<{
-  'update:tags': [tags: string[]];
-}>();
-
-const tagInput = ref('');
-
-function addTag(e: KeyboardEvent): void {
-  if (e.key === 'Enter' || e.key === ',') {
-    e.preventDefault();
-    const val = tagInput.value.trim().replace(/,$/, '');
-    if (val && !props.tags.includes(val)) {
-      emit('update:tags', [...props.tags, val]);
-    }
-    tagInput.value = '';
-  }
-}
-
-function removeTag(idx: number): void {
-  emit('update:tags', props.tags.filter((_: string, i: number) => i !== idx));
-}
-</script>
-
-<template>
-  <div class="cpub-tag-input-wrap">
-    <div class="cpub-tag-chips">
-      <span v-for="(tag, i) in tags" :key="i" class="cpub-tag-chip">
-        {{ tag }}
-        <button class="cpub-tag-remove" aria-label="Remove tag" @click="removeTag(i)">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
-      </span>
-    </div>
-    <input
-      v-model="tagInput"
-      type="text"
-      class="cpub-tag-input"
-      placeholder="Add tag..."
-      aria-label="Add tag"
-      @keydown="addTag"
-    />
-  </div>
-</template>
-
-<style scoped>
-.cpub-tag-input-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.cpub-tag-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.cpub-tag-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-family: var(--font-mono);
-  padding: 2px 8px;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border2);
-  color: var(--text-dim);
-}
-
-.cpub-tag-chip:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.cpub-tag-remove {
-  background: none;
-  border: none;
-  color: var(--text-faint);
-  cursor: pointer;
-  font-size: 9px;
-  padding: 0;
-  line-height: 1;
-}
-
-.cpub-tag-remove:hover {
-  color: var(--red);
-}
-
-.cpub-tag-input {
-  width: 100%;
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border);
-  padding: 5px 8px;
-  font-size: 11px;
-  color: var(--text);
-  outline: none;
-}
-
-.cpub-tag-input:focus {
-  border-color: var(--accent);
-}
-
-.cpub-tag-input::placeholder {
-  color: var(--text-faint);
-}
-</style>