@stackonward/section-core

Framework-independent contracts and primitives for section-based content rendering and editing. It owns shared schemas, registration, preview messaging, design tokens, transforms, and safe parsing utilities.

Product section definitions, themes, layouts, and business content remain in consumer-owned packs.

Install

pnpm add @stackonward/section-core

Registry usage

import { SectionRegistryCore } from '@stackonward/section-core'

const registry = new SectionRegistryCore()
registry.register({
  name: 'article-prose',
  componentName: 'ArticleProseSection',
  supportsInlineEdit: true,
})

Consumers register domain-specific definitions without modifying the core package. A second product pack should add its own registrations and composition, not branch inside the generic registry.

Entry points

| Entry point | Content | | -------------------------------------- | ----------------------------------------------------------------------------------- | | @stackonward/section-core | Section data types, registry, breakpoint, keyboard, URL, color, and YouTube helpers | | @stackonward/section-core/bridge | Versioned editor-to-preview protocol, validation, heartbeat, and message types | | @stackonward/section-core/tokens | Design tokens, CSS/style conversion, and Tailwind preset | | @stackonward/section-core/transforms | Section normalization and explicit schema-migration registry | | @stackonward/section-core/utils | Safe URL/color parsing, responsive, keyboard, and YouTube utilities |

Preview bridge

import { PreviewBridge } from '@stackonward/section-core/bridge'

const bridge = new PreviewBridge({
  allowedOrigin: 'https://admin.example.com',
})

bridge.connect()

Bridge messages carry a declared protocol version and are validated before use. Register typed handlers with on(), send preview messages with send(), and call disconnect() when the iframe lifecycle ends. The exact allowed origin is owned by the editor/preview composition boundary.

Data and migration boundaries

• normalizeSectionsData produces the canonical section collection shape.
• registerSchemaMigration registers an explicit version transition.
• migrateSection applies registered transitions rather than guessing an unknown schema.
• safeUrl and safeColor validate presentation inputs; they do not sanitize arbitrary HTML.
• Product definitions and assets are never registered globally by importing this package.

Compatibility

• Modern ESM runtimes
• Browser APIs only when bridge or browser utilities are invoked
• TypeScript declarations included
• No Vue or Nuxt dependency

Related packages

@stackonward/section-renderer-vue adapts these contracts to Vue rendering and editor preview behavior.

License

MIT