@commonpub/layer 0.1.0

package/composables/useApiError.ts

@@ -0,0 +1,39 @@
+// Consistent client-side error extraction from API responses
+
+export function useApiError() {
+  function extract(err: unknown): string {
+    const e = err as {
+      data?: {
+        statusMessage?: string;
+        message?: string;
+        errors?: Record<string, string[]>;
+      };
+      statusCode?: number;
+      message?: string;
+    };
+
+    // Zod validation errors
+    if (e?.data?.errors) {
+      return Object.entries(e.data.errors)
+        .map(([field, msgs]) => `${field}: ${(msgs as string[]).join(', ')}`)
+        .join('; ');
+    }
+
+    // Server error messages
+    if (e?.data?.statusMessage) return e.data.statusMessage;
+    if (e?.data?.message) return e.data.message;
+
+    // Status code hints
+    if (e?.statusCode === 401) return 'Not authenticated. Please log in again.';
+    if (e?.statusCode === 403) return 'Permission denied.';
+    if (e?.statusCode === 404) return 'Not found.';
+    if (e?.statusCode === 429) return 'Too many requests. Please wait.';
+    if (e?.statusCode === 500) return 'Server error. Please try again.';
+
+    // Fallback
+    if (e?.message) return e.message;
+    return 'Something went wrong. Please try again.';
+  }
+
+  return { extract };
+}

package/composables/useAuth.ts

@@ -0,0 +1,87 @@
+// Auth composable — reactive auth state + methods
+
+/** Client-side auth user shape, matching what Better Auth returns */
+export interface ClientAuthUser {
+  id: string;
+  name: string | null;
+  username: string;
+  email: string;
+  role: string;
+  image: string | null;
+  emailVerified: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ClientAuthSession {
+  id: string;
+  userId: string;
+  token: string;
+  expiresAt: string;
+}
+
+export function useAuth() {
+  const user = useState<ClientAuthUser | null>('auth-user', () => null);
+  const session = useState<ClientAuthSession | null>('auth-session', () => null);
+
+  const isAuthenticated = computed(() => !!user.value);
+  const isAdmin = computed(() => user.value?.role === 'admin');
+
+  async function signIn(email: string, password: string): Promise<void> {
+    const data = await $fetch<{ user: ClientAuthUser | null; session: ClientAuthSession | null }>('/api/auth/sign-in/email', {
+      method: 'POST',
+      body: { email, password },
+      credentials: 'include',
+    });
+    user.value = data?.user ?? null;
+    session.value = data?.session ?? null;
+  }
+
+  async function signUp(email: string, password: string, username: string): Promise<void> {
+    const data = await $fetch<{ user: ClientAuthUser | null; session: ClientAuthSession | null }>('/api/auth/sign-up/email', {
+      method: 'POST',
+      body: { email, password, username, name: username },
+      credentials: 'include',
+    });
+    user.value = data?.user ?? null;
+    session.value = data?.session ?? null;
+  }
+
+  async function signOut(): Promise<void> {
+    await $fetch('/api/auth/sign-out', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: {} });
+    user.value = null;
+    session.value = null;
+    await navigateTo('/');
+  }
+
+  /**
+   * Refresh the session from the server.
+   * Call on app mount to detect expired sessions and sync SSR-hydrated state.
+   */
+  async function refreshSession(): Promise<void> {
+    if (import.meta.server) return;
+    try {
+      const data = await $fetch<{ user: ClientAuthUser | null; session: ClientAuthSession | null }>(
+        '/api/me',
+        { credentials: 'include' },
+      );
+      user.value = data?.user ?? null;
+      session.value = data?.session ?? null;
+    } catch {
+      // Session invalid or server unreachable — clear client state
+      user.value = null;
+      session.value = null;
+    }
+  }
+
+  return {
+    user: readonly(user),
+    session: readonly(session),
+    isAuthenticated,
+    isAdmin,
+    signIn,
+    signUp,
+    signOut,
+    refreshSession,
+  };
+}

package/composables/useBlockEditor.ts

@@ -0,0 +1,187 @@
+/**
+ * Block editor composable — manages an array of content blocks with full CRUD operations.
+ * Blocks are stored as { id, type, content } and serialized to/from BlockTuple format for persistence.
+ */
+import type { BlockTuple } from '@commonpub/editor';
+
+export interface EditorBlock {
+  id: string;
+  type: string;
+  content: Record<string, unknown>;
+}
+
+/** Default content values when creating a new block of each type */
+const BLOCK_DEFAULTS: Record<string, () => Record<string, unknown>> = {
+  paragraph: () => ({ html: '' }),
+  heading: () => ({ text: '', level: 2 }),
+  code_block: () => ({ code: '', language: '', filename: '' }),
+  image: () => ({ src: '', alt: '', caption: '' }),
+  blockquote: () => ({ html: '', attribution: '' }),
+  callout: () => ({ html: '', variant: 'info' }),
+  gallery: () => ({ images: [] }),
+  video: () => ({ url: '', platform: 'youtube', caption: '' }),
+  embed: () => ({ url: '', type: 'generic', html: '' }),
+  horizontal_rule: () => ({}),
+  partsList: () => ({ parts: [] }),
+  buildStep: () => ({ stepNumber: 1, instructions: '', image: '', time: '' }),
+  toolList: () => ({ tools: [] }),
+  downloads: () => ({ files: [] }),
+  quiz: () => ({ question: '', options: [], feedback: '' }),
+  interactiveSlider: () => ({ label: '', min: 0, max: 100, step: 1, defaultValue: 50, states: [] }),
+  checkpoint: () => ({ message: '' }),
+  mathNotation: () => ({ expression: '', display: false }),
+  bulletList: () => ({ html: '' }),
+  orderedList: () => ({ html: '' }),
+  sectionHeader: () => ({ tag: '', title: '', body: '' }),
+};
+
+function generateId(): string {
+  return `blk-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function useBlockEditor(initialBlocks?: BlockTuple[]) {
+  const blocks = ref<EditorBlock[]>([]);
+  const selectedBlockId = ref<string | null>(null);
+
+  // --- Init from BlockTuples ---
+  function fromBlockTuples(tuples: BlockTuple[]): void {
+    blocks.value = tuples.map(([type, content]) => ({
+      id: generateId(),
+      type,
+      content: { ...content },
+    }));
+  }
+
+  if (initialBlocks && initialBlocks.length > 0) {
+    fromBlockTuples(initialBlocks);
+  }
+
+  // --- Serialize back to BlockTuples ---
+  function toBlockTuples(): BlockTuple[] {
+    return blocks.value.map((b) => [b.type, { ...b.content }]);
+  }
+
+  // --- Mutations ---
+
+  function addBlock(type: string, attrs?: Record<string, unknown>, atIndex?: number): string {
+    const defaults = BLOCK_DEFAULTS[type]?.() ?? {};
+    const block: EditorBlock = {
+      id: generateId(),
+      type,
+      content: { ...defaults, ...attrs },
+    };
+
+    if (atIndex !== undefined && atIndex >= 0 && atIndex <= blocks.value.length) {
+      blocks.value.splice(atIndex, 0, block);
+    } else {
+      blocks.value.push(block);
+    }
+
+    selectedBlockId.value = block.id;
+    return block.id;
+  }
+
+  /** Replace a block with a new block type (used by slash command) */
+  function replaceBlock(id: string, newType: string, attrs?: Record<string, unknown>): string {
+    const idx = blocks.value.findIndex((b) => b.id === id);
+    if (idx === -1) return addBlock(newType, attrs);
+
+    const defaults = BLOCK_DEFAULTS[newType]?.() ?? {};
+    const newBlock: EditorBlock = {
+      id: generateId(),
+      type: newType,
+      content: { ...defaults, ...attrs },
+    };
+
+    blocks.value.splice(idx, 1, newBlock);
+    selectedBlockId.value = newBlock.id;
+    return newBlock.id;
+  }
+
+  function removeBlock(id: string): void {
+    const idx = blocks.value.findIndex((b) => b.id === id);
+    if (idx === -1) return;
+    blocks.value.splice(idx, 1);
+    if (selectedBlockId.value === id) {
+      selectedBlockId.value = null;
+    }
+  }
+
+  function clearBlocks(): void {
+    blocks.value.splice(0, blocks.value.length);
+    selectedBlockId.value = null;
+  }
+
+  function updateBlock(id: string, content: Record<string, unknown>): void {
+    const block = blocks.value.find((b) => b.id === id);
+    if (block) {
+      block.content = { ...block.content, ...content };
+    }
+  }
+
+  function moveBlock(fromIndex: number, toIndex: number): void {
+    if (fromIndex < 0 || fromIndex >= blocks.value.length) return;
+    if (toIndex < 0 || toIndex >= blocks.value.length) return;
+    const [moved] = blocks.value.splice(fromIndex, 1);
+    blocks.value.splice(toIndex, 0, moved!);
+  }
+
+  function moveBlockUp(id: string): void {
+    const idx = blocks.value.findIndex((b) => b.id === id);
+    if (idx > 0) moveBlock(idx, idx - 1);
+  }
+
+  function moveBlockDown(id: string): void {
+    const idx = blocks.value.findIndex((b) => b.id === id);
+    if (idx < blocks.value.length - 1) moveBlock(idx, idx + 1);
+  }
+
+  function duplicateBlock(id: string): void {
+    const idx = blocks.value.findIndex((b) => b.id === id);
+    if (idx === -1) return;
+    const original = blocks.value[idx]!;
+    const clone: EditorBlock = {
+      id: generateId(),
+      type: original.type,
+      content: JSON.parse(JSON.stringify(original.content)),
+    };
+    blocks.value.splice(idx + 1, 0, clone);
+    selectedBlockId.value = clone.id;
+  }
+
+  function selectBlock(id: string | null): void {
+    selectedBlockId.value = id;
+  }
+
+  function getBlockIndex(id: string): number {
+    return blocks.value.findIndex((b) => b.id === id);
+  }
+
+  const isEmpty = computed(() => blocks.value.length === 0);
+
+  const selectedBlock = computed(() =>
+    blocks.value.find((b) => b.id === selectedBlockId.value) ?? null,
+  );
+
+  return {
+    blocks: readonly(blocks) as Readonly<Ref<EditorBlock[]>>,
+    selectedBlockId: readonly(selectedBlockId),
+    selectedBlock,
+    isEmpty,
+    addBlock,
+    removeBlock,
+    clearBlocks,
+    updateBlock,
+    moveBlock,
+    moveBlockUp,
+    moveBlockDown,
+    duplicateBlock,
+    replaceBlock,
+    selectBlock,
+    getBlockIndex,
+    toBlockTuples,
+    fromBlockTuples,
+  };
+}
+
+export type BlockEditor = ReturnType<typeof useBlockEditor>;

package/composables/useContentSave.ts

@@ -0,0 +1,253 @@
+/**
+ * Content save composable — manages draft creation, updates, autosave, and publishing.
+ * Extracted from edit.vue to keep the page component thin.
+ */
+import type { BlockTuple } from '@commonpub/editor';
+import type { WatchSource } from 'vue';
+
+export interface ContentSaveOptions {
+  contentType: Ref<string>;
+  title: Ref<string>;
+  metadata: Ref<Record<string, unknown>>;
+  isNew: Ref<boolean>;
+  contentId: Ref<string | null>;
+  isDirty: Ref<boolean>;
+  getBlockTuples: () => BlockTuple[];
+  extractError: (err: unknown) => string;
+  /** Called after every save to sync product links from partsList blocks */
+  onAfterSave?: (id: string) => Promise<void>;
+}
+
+export interface ContentSaveReturn {
+  saving: Ref<boolean>;
+  error: Ref<string>;
+  autoSaveStatus: Ref<'idle' | 'saving' | 'saved' | 'error'>;
+  /** Save without navigating — used by Save Draft, autosave, Ctrl+S */
+  silentSave: () => Promise<void>;
+  /** Save and navigate to the content view page */
+  handleSave: () => Promise<void>;
+  /** Validate, save, publish, and navigate */
+  handlePublish: (validate?: () => string[]) => Promise<string[]>;
+  /** Build a clean save body from current state */
+  buildSaveBody: () => Record<string, unknown>;
+  /** Schedule an autosave after the debounce delay */
+  scheduleAutoSave: () => void;
+  /** Cancel any pending autosave timer */
+  cancelAutoSave: () => void;
+  /** Set up autosave watchers — call in onMounted or setup */
+  initAutoSave: (watches: WatchSource[]) => void;
+  /** Clean up timers — call in onUnmounted */
+  cleanup: () => void;
+}
+
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .slice(0, 128);
+}
+
+const AUTO_SAVE_DELAY = 30_000;
+
+export function useContentSave(opts: ContentSaveOptions): ContentSaveReturn {
+  const saving = ref(false);
+  const error = ref('');
+  const autoSaveStatus = ref<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function buildSaveBody(): Record<string, unknown> {
+    const body: Record<string, unknown> = {
+      type: opts.contentType.value,
+      title: opts.title.value,
+      content: opts.getBlockTuples(),
+      ...opts.metadata.value,
+    };
+    if (!body.slug) delete body.slug;
+    for (const key of Object.keys(body)) {
+      if (body[key] === '') body[key] = undefined;
+    }
+    return body;
+  }
+
+  async function createDraft(body: Record<string, unknown>): Promise<{ id: string; slug: string }> {
+    try {
+      return await $fetch<{ id: string; slug: string }>('/api/content', { method: 'POST', body });
+    } catch (err: unknown) {
+      const msg = (err as { data?: { message?: string } })?.data?.message ?? '';
+      if (msg.toLowerCase().includes('slug') || msg.toLowerCase().includes('duplicate') || msg.toLowerCase().includes('unique')) {
+        body.slug = `${body.slug || slugify(opts.title.value)}-${Date.now().toString(36).slice(-4)}`;
+        return await $fetch<{ id: string; slug: string }>('/api/content', { method: 'POST', body });
+      }
+      throw err;
+    }
+  }
+
+  async function silentSave(): Promise<void> {
+    if (saving.value) return;
+    if (!opts.title.value) {
+      error.value = 'Please enter a title before saving.';
+      return;
+    }
+    if (!opts.isNew.value && !opts.contentId.value) {
+      opts.isNew.value = true;
+    }
+    saving.value = true;
+    autoSaveStatus.value = 'saving';
+    error.value = '';
+
+    try {
+      const body = buildSaveBody();
+
+      if (opts.isNew.value) {
+        const result = await createDraft(body);
+        opts.contentId.value = result.id;
+        opts.isNew.value = false;
+        opts.isDirty.value = false;
+        autoSaveStatus.value = 'saved';
+        if (opts.onAfterSave) await opts.onAfterSave(result.id);
+        history.replaceState({}, '', `/${opts.contentType.value}/${result.slug}/edit`);
+      } else {
+        const updated = await $fetch<{ slug: string }>(`/api/content/${opts.contentId.value}`, { method: 'PUT', body });
+        opts.isDirty.value = false;
+        autoSaveStatus.value = 'saved';
+        if (opts.onAfterSave) await opts.onAfterSave(opts.contentId.value!);
+        if (updated?.slug) {
+          history.replaceState({}, '', `/${opts.contentType.value}/${updated.slug}/edit`);
+        }
+      }
+
+      setTimeout(() => {
+        if (autoSaveStatus.value === 'saved') autoSaveStatus.value = 'idle';
+      }, 3000);
+    } catch (err: unknown) {
+      error.value = opts.extractError(err);
+      autoSaveStatus.value = 'error';
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  async function handleSave(): Promise<void> {
+    if (saving.value || !opts.title.value) return;
+    cancelAutoSave();
+    if (!opts.isNew.value && !opts.contentId.value) opts.isNew.value = true;
+    saving.value = true;
+    error.value = '';
+
+    try {
+      const body = buildSaveBody();
+      if (opts.isNew.value) {
+        const result = await createDraft(body);
+        opts.contentId.value = result.id;
+        opts.isNew.value = false;
+        opts.isDirty.value = false;
+        if (opts.onAfterSave) await opts.onAfterSave(result.id);
+        await navigateTo(`/${opts.contentType.value}/${result.slug}`);
+      } else {
+        const updated = await $fetch<{ slug?: string }>(`/api/content/${opts.contentId.value}`, { method: 'PUT', body });
+        opts.isDirty.value = false;
+        if (opts.onAfterSave) await opts.onAfterSave(opts.contentId.value!);
+        const currentSlug = updated?.slug || useRoute().params.slug as string;
+        await navigateTo(`/${opts.contentType.value}/${currentSlug}`);
+      }
+    } catch (err: unknown) {
+      error.value = opts.extractError(err);
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  async function handlePublish(validate?: () => string[]): Promise<string[]> {
+    if (saving.value || !opts.title.value) return ['Title is required'];
+    if (validate) {
+      const errs = validate();
+      if (errs.length > 0) return errs;
+    }
+    cancelAutoSave();
+    saving.value = true;
+    error.value = '';
+
+    try {
+      const body = buildSaveBody();
+      let resultSlug = useRoute().params.slug as string;
+
+      if (opts.isNew.value || !opts.contentId.value) {
+        const result = await createDraft(body);
+        opts.contentId.value = result.id;
+        opts.isNew.value = false;
+        resultSlug = result.slug;
+        if (opts.onAfterSave) await opts.onAfterSave(result.id);
+      } else {
+        const updated = await $fetch<{ slug: string }>(`/api/content/${opts.contentId.value}`, { method: 'PUT', body });
+        if (updated?.slug) resultSlug = updated.slug;
+        if (opts.onAfterSave) await opts.onAfterSave(opts.contentId.value!);
+      }
+
+      await $fetch(`/api/content/${opts.contentId.value}/publish`, { method: 'POST' });
+
+      // Share to hub if one is selected in metadata
+      const hubSlug = opts.metadata.value?.hubSlug as string | undefined;
+      if (hubSlug && opts.contentId.value) {
+        try {
+          await $fetch(`/api/hubs/${hubSlug}/share`, {
+            method: 'POST',
+            body: { contentId: opts.contentId.value },
+          });
+        } catch {
+          // Non-fatal: content is published even if hub share fails
+          console.warn(`[publish] Failed to share to hub ${hubSlug}`);
+        }
+      }
+
+      opts.isDirty.value = false;
+      await navigateTo(`/${opts.contentType.value}/${resultSlug}`);
+      return [];
+    } catch (err: unknown) {
+      error.value = opts.extractError(err);
+      return [];
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  function scheduleAutoSave(): void {
+    if (autoSaveTimer) clearTimeout(autoSaveTimer);
+    autoSaveTimer = setTimeout(async () => {
+      if (!opts.isDirty.value || saving.value || opts.isNew.value || !opts.contentId.value || !opts.title.value) return;
+      await silentSave();
+    }, AUTO_SAVE_DELAY);
+  }
+
+  function cancelAutoSave(): void {
+    if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
+  }
+
+  function initAutoSave(watches: WatchSource[]): void {
+    watch(watches, () => {
+      if (!opts.isNew.value && opts.contentId.value) {
+        scheduleAutoSave();
+      }
+    }, { deep: true });
+  }
+
+  function cleanup(): void {
+    cancelAutoSave();
+  }
+
+  return {
+    saving,
+    error,
+    autoSaveStatus,
+    silentSave,
+    handleSave,
+    handlePublish,
+    buildSaveBody,
+    scheduleAutoSave,
+    cancelAutoSave,
+    initAutoSave,
+    cleanup,
+  };
+}

package/composables/useContentTypes.ts

@@ -0,0 +1,37 @@
+// Content type composable — reactive access to enabled content types
+
+export type ContentType = 'project' | 'article' | 'blog' | 'explainer';
+
+const CONTENT_TYPE_META: Record<ContentType, { label: string; plural: string; icon: string; route: string }> = {
+  project: { label: 'Project', plural: 'Projects', icon: 'fa-solid fa-microchip', route: '/project' },
+  article: { label: 'Article', plural: 'Articles', icon: 'fa-solid fa-file-lines', route: '/article' },
+  blog: { label: 'Blog', plural: 'Blogs', icon: 'fa-solid fa-pen-nib', route: '/blog' },
+  explainer: { label: 'Explainer', plural: 'Explainers', icon: 'fa-solid fa-lightbulb', route: '/explainer' },
+};
+
+export function useContentTypes() {
+  const config = useRuntimeConfig();
+
+  const enabledTypes = computed<ContentType[]>(() => {
+    const raw = config.public.contentTypes as string;
+    if (!raw) return ['project', 'article', 'blog', 'explainer'];
+    return raw.split(',').map(s => s.trim()).filter(Boolean) as ContentType[];
+  });
+
+  const isTypeEnabled = (type: ContentType): boolean => {
+    return enabledTypes.value.includes(type);
+  };
+
+  const enabledTypeMeta = computed(() => {
+    return enabledTypes.value
+      .filter(t => t in CONTENT_TYPE_META)
+      .map(t => ({ type: t, ...CONTENT_TYPE_META[t] }));
+  });
+
+  return {
+    enabledTypes,
+    isTypeEnabled,
+    enabledTypeMeta,
+    CONTENT_TYPE_META,
+  };
+}