canopycms 0.0.0

package/src/editor/PermissionManager.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+/**
+ * PermissionManager - Re-export from permission-manager module.
+ *
+ * This file maintains backward compatibility for imports.
+ * The actual implementation is in ./permission-manager/
+ */
+
+export { PermissionManager, usePermissionTree, useGroupsAndUsers } from './permission-manager'
+
+export type { PermissionManagerProps, ContentNode, TreeNode } from './permission-manager'

package/src/editor/canopy-path.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatCanopyPath, normalizeCanopyPath, parseCanopyPath } from './canopy-path'
+
+describe('canopy path helpers', () => {
+  it('formats segments with bracketed arrays', () => {
+    expect(formatCanopyPath(['blocks', 0, 'title'])).toBe('blocks[0].title')
+    expect(formatCanopyPath(['features', 3])).toBe('features[3]')
+    expect(formatCanopyPath([0, 'title'])).toBe('[0].title')
+  })
+
+  it('parses dotted or bracketed input into segments', () => {
+    expect(parseCanopyPath('blocks[1].cta.text')).toEqual(['blocks', 1, 'cta', 'text'])
+    expect(parseCanopyPath('blocks.2.title')).toEqual(['blocks', 2, 'title'])
+    expect(parseCanopyPath('[0].title')).toEqual([0, 'title'])
+  })
+
+  it('normalizes mixed input to canonical string', () => {
+    expect(normalizeCanopyPath('blocks.0.title')).toBe('blocks[0].title')
+    expect(normalizeCanopyPath(['blocks', 0, 'title'])).toBe('blocks[0].title')
+    expect(normalizeCanopyPath('blocks[0].title')).toBe('blocks[0].title')
+  })
+})

package/src/editor/canopy-path.ts

@@ -0,0 +1,52 @@
+export type CanopyPathSegment = string | number
+
+/**
+ * Convert a list of path segments into the canonical CanopyCMS path string.
+ * Arrays are rendered with bracket notation (e.g., blocks[0].title).
+ */
+export const formatCanopyPath = (segments: CanopyPathSegment[]): string => {
+  return segments.reduce<string>((acc, segment, index) => {
+    if (typeof segment === 'number') {
+      return `${acc}[${segment}]`
+    }
+    const prefix = index === 0 ? '' : '.'
+    return `${acc}${prefix}${segment}`
+  }, '')
+}
+
+/**
+ * Parse a CanopyCMS path string into segments. Supports bracketed array
+ * indices and dotted segments (e.g., blocks.0.title or blocks[0].title).
+ */
+export const parseCanopyPath = (path: string): CanopyPathSegment[] => {
+  const segments: CanopyPathSegment[] = []
+  const matcher = /([^[.\]]+)|\[(\d+)\]/g
+  let match: RegExpExecArray | null
+
+  while ((match = matcher.exec(path)) !== null) {
+    if (match[1]) {
+      const raw = match[1]
+      // Allow dotted numeric segments (e.g., blocks.0.title)
+      if (/^\d+$/.test(raw)) {
+        segments.push(Number(raw))
+      } else {
+        segments.push(raw)
+      }
+    } else if (match[2]) {
+      segments.push(Number(match[2]))
+    }
+  }
+
+  return segments
+}
+
+/**
+ * Normalize any supported path input (string or segments) into the
+ * canonical bracketed representation.
+ */
+export const normalizeCanopyPath = (input: string | CanopyPathSegment[]): string => {
+  if (Array.isArray(input)) {
+    return formatCanopyPath(input)
+  }
+  return formatCanopyPath(parseCanopyPath(input))
+}

package/src/editor/client-reference-resolver.ts

@@ -0,0 +1,118 @@
+import type { EntrySchema, FieldConfig, ReferenceFieldConfig } from '../config'
+import type { FormValue } from './FormRenderer'
+import { createApiClient } from '../api/client'
+
+/**
+ * Client-side utility for incrementally resolving reference fields in form data.
+ * Used by FormRenderer to transform draft data before sending to preview.
+ */
+
+/**
+ * Find which fields changed between two form values.
+ * Only returns top-level field configs for fields that changed.
+ */
+export function findChangedFields(
+  prevValue: FormValue,
+  currentValue: FormValue,
+  schema: EntrySchema,
+): FieldConfig[] {
+  const changed: FieldConfig[] = []
+
+  for (const field of schema) {
+    const prevFieldValue = prevValue[field.name]
+    const currentFieldValue = currentValue[field.name]
+
+    // Deep equality check for objects and arrays
+    if (JSON.stringify(prevFieldValue) !== JSON.stringify(currentFieldValue)) {
+      changed.push(field)
+    }
+  }
+
+  return changed
+}
+
+/**
+ * Resolve changed references incrementally.
+ * Only resolves reference fields that have changed.
+ * Uses cache to avoid duplicate API calls.
+ */
+export async function resolveChangedReferences(
+  prevValue: FormValue,
+  currentValue: FormValue,
+  schema: EntrySchema,
+  branch: string,
+  cache: Map<string, unknown>,
+): Promise<Partial<FormValue>> {
+  const changedFields = findChangedFields(prevValue, currentValue, schema)
+  const updates: Partial<FormValue> = {}
+
+  for (const field of changedFields) {
+    if (field.type === 'reference') {
+      const refField = field as ReferenceFieldConfig
+      const fieldValue = currentValue[field.name]
+
+      // Resolve this field's value
+      if (refField.list && Array.isArray(fieldValue)) {
+        // List of references
+        const resolved = await Promise.all(
+          fieldValue.map((id) => resolveReferenceId(id, branch, cache)),
+        )
+        updates[field.name] = resolved
+      } else if (fieldValue) {
+        // Single reference
+        const resolved = await resolveReferenceId(fieldValue, branch, cache)
+        updates[field.name] = resolved
+      }
+    }
+  }
+
+  return updates
+}
+
+/**
+ * Resolve a single reference ID to full object.
+ * Checks cache first, then makes API call if needed.
+ * Returns original ID if resolution fails.
+ */
+async function resolveReferenceId(
+  id: unknown,
+  branch: string,
+  cache: Map<string, unknown>,
+): Promise<unknown> {
+  // Only resolve string IDs
+  if (typeof id !== 'string') {
+    return id
+  }
+
+  // Check if already resolved (has __typename or other object properties)
+  if (typeof id === 'object' && id !== null) {
+    return id
+  }
+
+  const cacheKey = `${branch}:${id}`
+
+  // Check cache first
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey)
+  }
+
+  try {
+    // Fetch from API (single ID)
+    const apiClient = createApiClient()
+    const result = await apiClient.content.resolveReferences({ branch }, { ids: [id] })
+
+    if (result.ok && result.data && result.data.resolved[id]) {
+      // Cache and return resolved object
+      const resolved = result.data.resolved[id]
+      cache.set(cacheKey, resolved)
+      return resolved
+    }
+
+    // Resolution failed - return original ID string
+    return id
+  } catch (error) {
+    console.error(`Failed to resolve reference ID ${id}:`, error)
+    // Return original ID on error
+    return id
+  }
+}

package/src/editor/comments/BranchComments.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import React, { useMemo, useState } from 'react'
+import { Box, Button } from '@mantine/core'
+import type { CommentThread } from '../../comment-store'
+import type { UserSearchResult } from '../../auth/types'
+import { ThreadCarousel } from './ThreadCarousel'
+
+export interface BranchCommentsProps {
+  /** All comments (will be filtered for branch-level) */
+  comments: CommentThread[]
+  /** Current user ID */
+  currentUserId: string
+  /** Whether user can resolve threads */
+  canResolve: boolean
+  /** Handler to add a comment */
+  onAddComment: (
+    text: string,
+    type: 'field' | 'entry' | 'branch',
+    entryPath?: string,
+    canopyPath?: string,
+    threadId?: string,
+  ) => Promise<void>
+  /** Handler to resolve a thread */
+  onResolveThread: (threadId: string) => Promise<void>
+  /** Auto-focus and expand */
+  autoFocus?: boolean
+  /** Thread ID to highlight and scroll to */
+  highlightThreadId?: string
+  /** Optional function to fetch user metadata for displaying user badges */
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+}
+
+/**
+ * Branch-level comments section displayed at the top of BranchManager.
+ * Uses ThreadCarousel for navigation.
+ */
+export const BranchComments: React.FC<BranchCommentsProps> = ({
+  comments,
+  currentUserId,
+  canResolve,
+  onAddComment,
+  onResolveThread,
+  autoFocus,
+  highlightThreadId,
+  onGetUserMetadata,
+}) => {
+  const [showCarousel, setShowCarousel] = useState(false)
+
+  // Filter for branch-level threads
+  const branchThreads = useMemo(() => comments.filter((t) => t.type === 'branch'), [comments])
+
+  // Show carousel if threads exist or if auto-focused
+  const shouldShowCarousel = branchThreads.length > 0 || showCarousel || autoFocus
+
+  // Wrapper to add branch context to comment handler
+  const handleAddComment = async (text: string, threadId?: string) => {
+    await onAddComment(text, 'branch', undefined, undefined, threadId)
+  }
+
+  // Show "New branch comment" button when no threads
+  if (!shouldShowCarousel) {
+    return (
+      <Box>
+        <Button
+          size="xs"
+          variant="subtle"
+          color="gray"
+          onClick={() => setShowCarousel(true)}
+          style={{ fontSize: '0.75rem', height: '1.5rem' }}
+        >
+          New branch comment
+        </Button>
+      </Box>
+    )
+  }
+
+  return (
+    <ThreadCarousel
+      threads={branchThreads}
+      label="Branch Discussion"
+      contextType="branch"
+      currentUserId={currentUserId}
+      canResolve={canResolve}
+      onAddComment={handleAddComment}
+      onResolveThread={onResolveThread}
+      autoFocus={autoFocus}
+      autoOpenNewThread={showCarousel && branchThreads.length === 0}
+      highlightThreadId={highlightThreadId}
+      onGetUserMetadata={onGetUserMetadata}
+    />
+  )
+}

package/src/editor/comments/EntryComments.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import React, { useMemo, useState } from 'react'
+import { Box, Button } from '@mantine/core'
+import type { CommentThread } from '../../comment-store'
+import { ThreadCarousel } from './ThreadCarousel'
+
+export interface EntryCommentsProps {
+  /** All comments (will be filtered for entry-level) */
+  comments: CommentThread[]
+  /** Current entry path */
+  entryPath: string
+  /** Current user ID */
+  currentUserId: string
+  /** Whether user can resolve threads */
+  canResolve: boolean
+  /** Handler to add a comment */
+  onAddComment: (
+    text: string,
+    type: 'field' | 'entry' | 'branch',
+    entryPath?: string,
+    canopyPath?: string,
+    threadId?: string,
+  ) => Promise<void>
+  /** Handler to resolve a thread */
+  onResolveThread: (threadId: string) => Promise<void>
+  /** Auto-focus and expand */
+  autoFocus?: boolean
+  /** Thread ID to highlight and scroll to */
+  highlightThreadId?: string
+}
+
+/**
+ * Entry-level comments section displayed at the top of the form.
+ * Uses ThreadCarousel for navigation.
+ */
+export const EntryComments: React.FC<EntryCommentsProps> = ({
+  comments,
+  entryPath,
+  currentUserId,
+  canResolve,
+  onAddComment,
+  onResolveThread,
+  autoFocus,
+  highlightThreadId,
+}) => {
+  const [showCarousel, setShowCarousel] = useState(false)
+
+  // Filter for entry-level threads
+  const entryThreads = useMemo(
+    () => comments.filter((t) => t.type === 'entry' && t.entryPath === entryPath),
+    [comments, entryPath],
+  )
+
+  // Show carousel if threads exist or if auto-focused
+  const shouldShowCarousel = entryThreads.length > 0 || showCarousel || autoFocus
+
+  // Wrapper to add entry context to comment handler
+  const handleAddComment = async (text: string, threadId?: string) => {
+    await onAddComment(text, 'entry', entryPath, undefined, threadId)
+  }
+
+  // Show "New file comment" button when no threads
+  if (!shouldShowCarousel) {
+    return (
+      <Box>
+        <Button
+          size="xs"
+          variant="subtle"
+          color="gray"
+          onClick={() => setShowCarousel(true)}
+          style={{ fontSize: '0.75rem', height: '1.5rem' }}
+        >
+          New file comment
+        </Button>
+      </Box>
+    )
+  }
+
+  return (
+    <ThreadCarousel
+      threads={entryThreads}
+      label="Entry Comments"
+      contextType="entry"
+      currentUserId={currentUserId}
+      canResolve={canResolve}
+      onAddComment={handleAddComment}
+      onResolveThread={onResolveThread}
+      autoFocus={autoFocus}
+      autoOpenNewThread={showCarousel && entryThreads.length === 0}
+      highlightThreadId={highlightThreadId}
+    />
+  )
+}

package/src/editor/comments/FieldWrapper.stories.tsx

@@ -0,0 +1,210 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FieldWrapper } from './FieldWrapper'
+import type { CommentThread } from '../../comment-store'
+import { TextInput, Box } from '@mantine/core'
+
+const meta: Meta<typeof FieldWrapper> = {
+  title: 'Editor/Comments/FieldWrapper',
+  component: FieldWrapper,
+  decorators: [
+    (Story) => (
+      <Box p="xl" bg="gray.0">
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof FieldWrapper>
+
+const sampleThreads: CommentThread[] = [
+  {
+    id: 'thread-1',
+    type: 'field',
+    entryPath: 'posts/hello',
+    canopyPath: 'title',
+    authorId: 'alice',
+    resolved: false,
+    createdAt: new Date(Date.now() - 3600000).toISOString(),
+    comments: [
+      {
+        id: 'comment-1',
+        threadId: 'thread-1',
+        userId: 'alice',
+        timestamp: new Date(Date.now() - 3600000).toISOString(),
+        text: 'This title needs work.',
+      },
+      {
+        id: 'comment-2',
+        threadId: 'thread-1',
+        userId: 'bob',
+        timestamp: new Date(Date.now() - 1800000).toISOString(),
+        text: 'I agree, let me revise it.',
+      },
+    ],
+  },
+  {
+    id: 'thread-2',
+    type: 'field',
+    entryPath: 'posts/hello',
+    canopyPath: 'title',
+    authorId: 'charlie',
+    resolved: false,
+    createdAt: new Date(Date.now() - 7200000).toISOString(),
+    comments: [
+      {
+        id: 'comment-3',
+        threadId: 'thread-2',
+        userId: 'charlie',
+        timestamp: new Date(Date.now() - 7200000).toISOString(),
+        text: 'Another concern here.',
+      },
+    ],
+  },
+]
+
+const resolvedThreads: CommentThread[] = [
+  {
+    id: 'thread-3',
+    type: 'field',
+    entryPath: 'posts/hello',
+    canopyPath: 'title',
+    authorId: 'alice',
+    resolved: true,
+    createdAt: new Date(Date.now() - 86400000).toISOString(),
+    resolvedBy: 'bob',
+    resolvedAt: new Date(Date.now() - 43200000).toISOString(),
+    comments: [
+      {
+        id: 'comment-4',
+        threadId: 'thread-3',
+        userId: 'alice',
+        timestamp: new Date(Date.now() - 86400000).toISOString(),
+        text: 'Fixed now!',
+      },
+    ],
+  },
+]
+
+export const WithUnresolvedComments: Story = {
+  args: {
+    children: <TextInput label="Title" placeholder="Enter title..." />,
+    canopyPath: 'title',
+    entryPath: 'posts/hello',
+    threads: sampleThreads,
+    autoFocus: false,
+    currentUserId: 'alice',
+    canResolve: true,
+    onAddComment: async (
+      text: string,
+      type: string,
+      entryPath?: string,
+      canopyPath?: string,
+      threadId?: string,
+    ) => {
+      console.log('Add comment:', {
+        text,
+        type,
+        entryPath,
+        canopyPath,
+        threadId,
+      })
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    },
+  },
+}
+
+export const WithResolvedComments: Story = {
+  args: {
+    children: <TextInput label="Title" placeholder="Enter title..." />,
+    canopyPath: 'title',
+    entryPath: 'posts/hello',
+    threads: resolvedThreads,
+    autoFocus: false,
+    currentUserId: 'alice',
+    canResolve: true,
+    onAddComment: async (
+      text: string,
+      type: string,
+      entryPath?: string,
+      canopyPath?: string,
+      threadId?: string,
+    ) => {
+      console.log('Add comment:', {
+        text,
+        type,
+        entryPath,
+        canopyPath,
+        threadId,
+      })
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+    },
+  },
+}
+
+export const NoComments: Story = {
+  args: {
+    children: <TextInput label="Description" placeholder="Enter description..." />,
+    canopyPath: 'description',
+    entryPath: 'posts/hello',
+    threads: [],
+    autoFocus: false,
+    currentUserId: 'alice',
+    canResolve: true,
+    onAddComment: async (
+      text: string,
+      type: string,
+      entryPath?: string,
+      canopyPath?: string,
+      threadId?: string,
+    ) => {
+      console.log('Add comment:', {
+        text,
+        type,
+        entryPath,
+        canopyPath,
+        threadId,
+      })
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+    },
+  },
+}
+
+export const AutoFocused: Story = {
+  args: {
+    children: <TextInput label="Title" placeholder="Enter title..." />,
+    canopyPath: 'title',
+    entryPath: 'posts/hello',
+    threads: sampleThreads,
+    autoFocus: true,
+    currentUserId: 'alice',
+    canResolve: true,
+    onAddComment: async (
+      text: string,
+      type: string,
+      entryPath?: string,
+      canopyPath?: string,
+      threadId?: string,
+    ) => {
+      console.log('Add comment:', {
+        text,
+        type,
+        entryPath,
+        canopyPath,
+        threadId,
+      })
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+    },
+  },
+}