Module Structure

A Code SCE module is designed around the Zero Source Exposure model: prospective buyers inspect rich visual proofs, technical specifications, and configuration options, while the paid source code remains protected until purchase.

Core Module Components

Component	What it is	Visibility	Delivery / Storage
Visual Previews & Proofs	Up to 5 UI screenshots, animated GIFs, or image proofs demonstrating the component.	🌐 Public	Cloudflare R2 (public CDN) / Displayed in the Explorer carousel.
README.md	Comprehensive technical documentation detailing architecture, props, styling, and integration guide.	🌐 Public	Rendered on the module page before purchase.
Config Schema (config_schema)	JSON schema defining configurable variables for the Dynamic Form Engine.	🌐 Public (schema structure)	Stored in PostgreSQL; rendered as a dynamic customization form.
Extra UI Demo (Optional)	Standalone HTML file for interactive sandboxed preview testing.	🔒 Private	Served only within isolated, sandboxed preview iframes.
Paid Deliverable	The full production code package delivered to buyers post-purchase.	🔒 Private (paid deliverable)	Generated per-buyer with dual-layer forensic watermarking via signed single-use links.

---

1. Visual Previews & Proofs

Visual assets are the primary evaluation mechanism in the marketplace:

• Authors upload high-resolution screenshots or GIFs showing the component across various states (active, idle, responsive, dark/light theme).
• Buyers can click any preview to engage full-screen lightbox zoom.
• Raw executable files and unverified ZIPs are prohibited during listing creation (zip_not_allowed), safeguarding author intellectual property.

2. README Documentation (README.md)

The public contract for the module. A high-quality README includes:

• Component architecture and design system principles.
• Required peer dependencies (e.g. icon sets, animation utilities).
• API reference: props, events, slots, and styling class hooks.
• Code integration examples for common frameworks (React, Vue, Svelte, Vanilla).

3. Dynamic Config Schema

Defines the configurable properties exposed to buyers:

• Declares variable types (colors, numbers, booleans, sliders, select options).
• The Dynamic Form Engine renders these into an interactive form.
• The schema shape is public so buyers understand customization flexibility before purchasing.

4. Paid Deliverable & Watermarked Distribution

Once purchase verification completes:

• The backend generates a per-buyer watermarked archive containing source files.
• Invisible zero-width HMAC tokens and a .sce/watermark.json record are stamped into the package.
• Delivered over a short-lived (≤ 60s), single-use signed download token bound to the buyer's IP.

Visibility & Storage Separation

• Public Assets (/backend/uploads/): Screenshots, GIFs, and README files are stored in object storage and served openly for instant browsing.
• Private Artifacts (/backend/private/): Standalone UI demos and source assets are blocked from static web serving (server.js blocks /backend/private). Access is permitted solely through authenticated, ownership-verified API routes.

Next Step

See how config schemas are authored and rendered: Dynamic Configuration System →.