Add UID field for generating unique identifiers with tags and duplicate detection

[Copilot]

This PR implements a new schema.uid() field type for Root.js CMS that generates unique identifiers localized to documents, addressing the need for trackable IDs in web pages and content management.

🎯 Features

Schema Definition

• UidField type with support for optional tags, default values, and custom button labels
• uid() helper function following existing field patterns for consistent API
• Full TypeScript support with proper type integration

UI Component

• Text input for manual UID entry or editing
• "Generate UID" button for automatic ID creation
• Real-time duplicate detection with warning alerts
• Consistent styling with existing CMS field components

UID Generation

• Format: [tag-]timestamp-randomNumber (e.g., page-1753420863612-847)
• Timestamp ensures chronological ordering and uniqueness
• 3-digit random suffix prevents collisions within the same millisecond
• Optional tag prefixes for organization and categorization

Duplicate Detection

• Recursive document scanning to find duplicate UIDs
• Excludes current field from duplicate checks to avoid false positives
• Shows warning with field paths where duplicates are found
• Updates in real-time as document content changes

📋 Use Cases

The UID field supports various content management scenarios:

// Page-level tracking
schema.uid({
  id: 'pageId',
  label: 'Page Tracking ID',
  help: 'Unique identifier for analytics',
  tag: 'page',
})

// Section anchor links
schema.uid({
  id: 'sectionId', 
  label: 'Section ID',
  help: 'Used for table of contents and deep linking',
  tag: 'section',
  buttonLabel: 'Generate Anchor',
})

// Interactive element tracking
schema.uid({
  id: 'buttonId',
  label: 'Button ID', 
  tag: 'cta',
})

Common tag conventions:

• page-* - Page-level tracking
• section-* - Section anchors
• cta-*, btn-* - Call-to-action buttons
• form-* - Form identification
• exp-* - A/B testing experiments
• img-*, gallery-* - Media tracking

🔧 Implementation Details

Files Changed

• packages/root-cms/core/schema.ts - Added UidField type and uid() function
• packages/root-cms/ui/components/DocEditor/fields/UidField.tsx - New UI component
• packages/root-cms/ui/components/DocEditor/DocEditor.tsx - Field registration
• packages/root-cms/core/schema.test.ts - Test coverage

Integration

• Follows existing field component patterns for consistency
• Uses DraftController for data management and change subscription
• Integrates with DocEditor field rendering system
• Comprehensive test coverage for all functionality

🧪 Example Usage

import * as schema from '@blinkk/root-cms';

export const Page = schema.define({
  name: 'Page',
  fields: [
    schema.string({
      id: 'title',
      label: 'Page Title',
    }),
    
    schema.uid({
      id: 'pageId',
      label: 'Page ID',
      help: 'Unique identifier for tracking',
      tag: 'page',
    }),
    
    schema.array({
      id: 'sections',
      of: schema.object({
        fields: [
          schema.uid({
            id: 'sectionId',
            label: 'Section ID',
            tag: 'section',
            buttonLabel: 'Generate Section ID',
          }),
          // ... other fields
        ],
      }),
    }),
  ],
});

The generated UIDs can be used for:

• HTML id attributes for anchor links
• Analytics tracking identifiers
• A/B testing experiment IDs
• Form submission tracking
• Custom JavaScript targeting

Fixes #530.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.