V48 (specification-implementation): Modularize marketing, docs, and conversations experiences

Split large experience shells into named co-located units per SOURCE_LAYOUT:
- Marketing: data/helpers + subcomponents for screenshot, competitor, walkthrough,
  marketplace, BTD investment, and acceleration sections; fix sibling import paths
- Docs: bitcode-docs-content → types/helpers/content modules; thin DocsArticlePage
  into rail/card/specimen/API/manual components
- Conversations: overlay types/hydration/side panels; rich-text token helpers;
  factory edge-case split; edge-case facade + concern modules

Update experience READMEs and FAMILIARIZATION.md §§7.1, 7.5, 7.6.

Author: geraldarthurdavis

FAMILIARIZATION.md

@@ -372,8 +372,9 @@ Named entry file — **not** `index.tsx`. Top-of-file overview comment on non-tr
 ### 7.1 Marketing (`/`)
 
 Landing, walkthrough, marketplace narrative, competitor tables, BTD education.  
-Home: `uapi/components/marketing/`. Large section components; prefer SRP splits
-into sub-units when editing.
+Home: `uapi/components/marketing/`. Large sections are modularized (data/helpers
++ co-located subcomponents under each `Marketing*Section/` directory); see
+`uapi/components/marketing/README.md`.
 
 ### 7.2 Deposits (`/deposits`)
 
@@ -432,14 +433,17 @@ App shell: `uapi/app/packs/` re-exports the page client. Layout contract:
 
 ### 7.5 Docs (`/docs`)
 
-Public documentation articles. Content largely in `docs/models/bitcode-docs-content.ts`
-+ `DocsArticlePage`.
+Public documentation articles. Content is modular under
+`docs/models/` (`bitcode-docs-types`, `bitcode-docs-helpers`, `content/*`) with
+stable re-export `bitcode-docs-content.ts`. UI: thin `DocsArticlePage` plus
+rail/card/specimen/API/manual subcomponents.
 
 ### 7.6 Conversations
 
 Full commercial Conversations UX is **deferred post-V48**, but structure remains
-under `uapi/components/conversations/` (overlay, waterfall, source selectors,
-utilities). Prefer `/packs` as post-auth landing, not Terminal.
+under `uapi/components/conversations/`. Overlay is a shell + side panels +
+hydration hook; rich-text input has co-located token helpers; utilities split
+factory vs edge-case concerns. Prefer `/packs` as post-auth landing, not Terminal.
 
 ### 7.7 Auxillaries
 

uapi/components/conversations/ConversationsEnhancedRichTextInput/ConversationsEnhancedRichTextInput.tsx

@@ -1,5 +1,10 @@
 'use client';
 
+/**
+ * Enhanced rich-text conversation input with token pickers.
+ * Token types and display helpers are co-located modules.
+ */
+
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 // motion and AnimatePresence not needed here
 // import { motion, AnimatePresence } from 'framer-motion';
@@ -10,38 +15,15 @@ import PipelineRunPicker from '@/components/conversations/pickers/PipelineRunPic
 import '@/styles/conversations/rich-text-input.css';
 import glassyInputStyles from '@/components/bitcode/inputs/GlassyInput/GlassyInput/glassy-input.module.css';
 
-interface Token {
-  id: string;
-  type: 'evidence_document' | 'shippable' | 'attachment' | 'source' | 'destination' | 'pipeline_run' | 'command';
-  text: string;
-  data: any;
-  displayInfo?: string;
-}
-
-interface RichTextInputProps {
-  onSend: (message: string, tokens: Token[]) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  /**
-   * Enable Conversations pickers (^ @ + # !) – set to false for plain input mode
-   */
-  enablePickers?: boolean;
-  className?: string;
-  /**
-   * When true, the textarea stretches to fill the height of its container so
-   * callers can align it perfectly inside fixed-height flex rows.
-   */
-  fullHeight?: boolean;
-  /**
-   * Use minimal vertical padding so the overall height matches button-like
-   * controls. Useful for compact instruction bars.
-   */
-  compact?: boolean;
-  /**
-   * Current conversation ID for OTF target picker defaults
-   */
-  currentConversationId?: string;
-}
+import type {
+  ConversationsRichTextToken as Token,
+  ConversationsEnhancedRichTextInputProps as RichTextInputProps,
+} from './conversations-enhanced-rich-text-input.types';
+import {
+  getTokenIcon,
+  getTokenTypeLabel,
+  adjustTokenSpacing as adjustTokenSpacingHelper,
+} from './conversations-enhanced-rich-text-helpers';
 
 export default function RichTextInput({
   onSend,
@@ -505,71 +487,7 @@ export default function RichTextInput({
     }
   }, [text, tokens, renderRichText]);
 
-  // Helper function to get the appropriate icon for each token type
-  const getTokenIcon = (type: string) => {
-    switch (type) {
-      case 'evidence_document':
-        return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 16v-3a2 2 0 0 0-2-2h-4V7a2 2 0 0 0-2-2H6"></path><path d="M18 14v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4"></path><path d="M6 5l4 4-4 4"></path></svg>';
-      case 'shippable':
-        return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="M22 4L12 14.01l-3-3"></path></svg>';
-      case 'attachment':
-        return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>';
-      case 'source':
-        return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>';
-      case 'command':
-        return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>';
-      case 'destination':
-      case 'pipeline_run':
-        return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>';
-      default:
-        return '';
-    }
-  };
-
-  // Helper function to get a human-readable label for each token type
-  const getTokenTypeLabel = (type: string) => {
-    switch (type) {
-      case 'evidence_document':
-        return 'Evidence Document';
-      case 'shippable':
-        return 'Shippable';
-      case 'attachment':
-        return 'Attachment';
-      case 'source':
-        return 'Connect source';
-      case 'command':
-        return 'Command';
-      case 'destination':
-      case 'pipeline_run':
-        return 'Output destination';
-      default:
-        return type.charAt(0).toUpperCase() + type.slice(1);
-    }
-  };
-
-  // Helper function to ensure proper spacing around tokens
-  const adjustTokenSpacing = (inputText: string) => {
-    if (!tokens.length) return inputText;
-
-    let adjustedText = inputText;
-
-    // For each token, ensure it has proper spacing
-    tokens.forEach(token => {
-      // Find all instances of the token without proper spacing
-      const tokenText = token.text.trim();
-      const escapedText = tokenText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-      // Check for tokens without space before
-      const noSpaceBeforeRegex = new RegExp(`([^\\s])${escapedText}`, 'g');
-      adjustedText = adjustedText.replace(noSpaceBeforeRegex, `$1 ${tokenText}`);
-
-      // Check for tokens without space after (unless at end of text)
-      const noSpaceAfterRegex = new RegExp(`${escapedText}([^\\s])`, 'g');
-      adjustedText = adjustedText.replace(noSpaceAfterRegex, `${tokenText} $1`);
-    });
-
-    return adjustedText;
-  };
+  const adjustTokenSpacing = (inputText: string) => adjustTokenSpacingHelper(inputText, tokens);
   // Prevent default drop behavior; optional file handling
   const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();

uapi/components/conversations/ConversationsEnhancedRichTextInput/conversations-enhanced-rich-text-helpers.ts

@@ -0,0 +1,66 @@
+/**
+ * Token display helpers for Conversations enhanced rich-text input.
+ */
+import type { ConversationsRichTextToken } from './conversations-enhanced-rich-text-input.types';
+
+export function getTokenIcon(type: string): string {
+  switch (type) {
+    case 'evidence_document':
+      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 16v-3a2 2 0 0 0-2-2h-4V7a2 2 0 0 0-2-2H6"></path><path d="M18 14v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4"></path><path d="M6 5l4 4-4 4"></path></svg>';
+    case 'shippable':
+      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="M22 4L12 14.01l-3-3"></path></svg>';
+    case 'attachment':
+      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>';
+    case 'source':
+      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>';
+    case 'command':
+      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>';
+    case 'destination':
+    case 'pipeline_run':
+      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>';
+    default:
+      return '';
+  }
+}
+
+export function getTokenTypeLabel(type: string): string {
+  switch (type) {
+    case 'evidence_document':
+      return 'Evidence Document';
+    case 'shippable':
+      return 'Shippable';
+    case 'attachment':
+      return 'Attachment';
+    case 'source':
+      return 'Connect source';
+    case 'command':
+      return 'Command';
+    case 'destination':
+    case 'pipeline_run':
+      return 'Output destination';
+    default:
+      return type.charAt(0).toUpperCase() + type.slice(1);
+  }
+}
+
+export function adjustTokenSpacing(
+  inputText: string,
+  tokens: readonly ConversationsRichTextToken[],
+): string {
+  if (!tokens.length) return inputText;
+
+  let adjustedText = inputText;
+
+  tokens.forEach((token) => {
+    const tokenText = token.text.trim();
+    const escapedText = tokenText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    const noSpaceBeforeRegex = new RegExp(`([^\\s])${escapedText}`, 'g');
+    adjustedText = adjustedText.replace(noSpaceBeforeRegex, `$1 ${tokenText}`);
+
+    const noSpaceAfterRegex = new RegExp(`${escapedText}([^\\s])`, 'g');
+    adjustedText = adjustedText.replace(noSpaceAfterRegex, `${tokenText} $1`);
+  });
+
+  return adjustedText;
+}

uapi/components/conversations/ConversationsEnhancedRichTextInput/conversations-enhanced-rich-text-input.types.ts

@@ -0,0 +1,35 @@
+/**
+ * Token model for Conversations enhanced rich-text input.
+ */
+export interface ConversationsRichTextToken {
+  id: string;
+  type: 'evidence_document' | 'shippable' | 'attachment' | 'source' | 'destination' | 'pipeline_run' | 'command';
+  text: string;
+  data: any;
+  displayInfo?: string;
+}
+
+export interface ConversationsEnhancedRichTextInputProps {
+  onSend: (message: string, tokens: ConversationsRichTextToken[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /**
+   * Enable Conversations pickers (^ @ + # !) – set to false for plain input mode
+   */
+  enablePickers?: boolean;
+  className?: string;
+  /**
+   * When true, the textarea stretches to fill the height of its container so
+   * callers can align it perfectly inside fixed-height flex rows.
+   */
+  fullHeight?: boolean;
+  /**
+   * Use minimal vertical padding so the overall height matches button-like
+   * controls. Useful for compact instruction bars.
+   */
+  compact?: boolean;
+  /**
+   * Current conversation ID for OTF target picker defaults
+   */
+  currentConversationId?: string;
+}