AdvancedComposer

Location: src/components/AdvancedComposer.jsx

Overview

AdvancedComposer is the full-page post creation experience at the /compose route. It extends CreatePost with four editor types (simple, longform, drawing, magnetic poetry), a comprehensive style customization system (surface, typography, effects), draft management (both local auto-save and database-backed drafts), style presets, and a confirmation gate before publishing.

Users typically arrive here from CreatePost via the "Open full editor" button, with their in-progress content and selected intent passed through location.state.

Relevant Invariants

• Invariant #4: "Intent Precedes Interpretation" -- Intent selection carries over from CreatePost or can be chosen here.
• Invariant #10: "Expressive Freedom Is Spatially Contained" -- Rich style customization is contained to the author own posts.
• Invariant #19: "Complexity Must Be Earned" -- Advanced features are one step removed from the basic CreatePost flow.

Props

Prop	Type	Required	Default	Description
session	object	Yes	--	Supabase auth session

Editor Types

ID	Label	Description
simple	Quick Post	Plain text post
longform	Article	Rich text with formatting
drawing	Drawing	Canvas-based drawing
magnetic_poetry	Word Art	Drag-and-drop word tiles

Style System

The style panel has three tabs:

Appearance (Surface)

• light, dark, warm, cool

Typography (Font + Emphasis)

• Font options loaded from FONT_OPTIONS constant
• Emphasis: subtle, normal, strong

Effects (Texture)

• flat (clean and minimal), paper (subtle texture), soft-card (gentle shadows), ghost (translucent blur)

Advanced Token-Based Styling

In addition to the simple style system (surface/texture/font/emphasis), AdvancedComposer integrates the full PostCustomizer for token-based visual styling:

• "Advanced Style" button in the style panel footer opens a full-screen PostCustomizer overlay
• Uses the usePostStyle hook to manage token state separately from the simple style
• Token data is stored as style_tokens inside the existing post_style JSONB column on posts
• An indicator badge appears when advanced style is active, with a "Remove" button to clear it
• Draft saves (auto and manual) include token data
• The usePostStyleFor(post) hook extracts tokens from stored posts for rendering

Key Behaviors

• Dual Draft System: useAutoSave persists to IndexedDB (commonplace_drafts database) on every change; useDrafts saves to the composer_drafts Supabase table for cross-device access.
• Style Presets: Users can save and load style configurations from the style_presets table.
• PostConfirmationGate: Before publishing, a modal asks the user to confirm their intent and review the post.
• Navigation State: Receives content, intent, images, audience, selectedCircleIds, sharingAllowed, contentNote, clipData, and clipId from CreatePost via useLocation().state. Note: voiceData is not passed from CreatePost; it is initialized as null and set via the VoiceRecorder component.
• Live Preview: Real-time preview panel shows how the post will look with current style settings.
• Content Note: Optional content note input for sensitive content.
• External Clips: Can attach external content cards (URLs) to posts.

Constants

Constant	Value	Description
MAX_FILE_SIZE	5242880 (5 MB)	Maximum image file size
MAX_IMAGES	10	Maximum images per post
ALLOWED_TYPES	[image/jpeg, image/png, image/gif, image/webp]	Accepted image MIME types

Usage

// Typically navigated to, not rendered directly
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/compose', {
  state: {
    intent: 'thinking_out_loud',
    content: 'Draft text...',
    images: [],
    audience: 'public',
    selectedCircleIds: [],
    sharingAllowed: true,
    contentNote: '',
    clipData: null,
    clipId: null
  }
});

Related

• CreatePost -- Simplified entry point that links to AdvancedComposer
• Post -- Displays the styled post output
• VoiceRecorder -- Voice recording integration
• usePostStyle -- Token-based style management hook
• PostCustomizer (src/components/customizer/src/components/PostCustomizer.jsx) -- Full-screen token style editor

---

Last updated: 2026-02-08