create-elytra 0.0.0 → 0.0.1

package/template/cms/collections/page.ts

@@ -0,0 +1,45 @@
+import type { CollectionDef } from '@elytracms/core/cms-core'
+import { PROJECT_BLOCKS } from '../blocks'
+
+/**
+ * The `page` collection (EC-187): a document collection whose `body` IS a
+ * composition (`blocks`) field on its own "Canvas" tab (EC-188), plus structured
+ * SEO fields and a `layoutId` selecting which graph layout wraps the rendered
+ * composition at delivery.
+ */
+export const page: CollectionDef = {
+  id: 'page',
+  kind: 'document',
+  titleField: 'name',
+  form: { label: 'Pages', labelSingular: 'Page', tabs: ['main', 'canvas', 'seo'] },
+  fields: [
+    { name: 'name', type: 'text', validation: { required: true }, form: { tab: 'main' } },
+    // EC-218: page hierarchy. The local `slug` is one URL segment; the `parent`
+    // self-relation nests pages. The full nested URL is composed from the parent
+    // chain (never stored), so moving/renaming a parent re-derives descendants.
+    { name: 'slug', type: 'text', filterable: true, form: { tab: 'main', label: 'Slug' } },
+    {
+      name: 'parent',
+      type: 'relation',
+      target: 'page',
+      cardinality: 'one',
+      form: { tab: 'main', label: 'Parent page' },
+    },
+    {
+      name: 'body',
+      type: 'blocks',
+      allow: PROJECT_BLOCKS,
+      cardinality: 'many',
+      form: { label: 'Canvas', tab: 'canvas' },
+    },
+    { name: 'layoutId', type: 'text', form: { tab: 'main' } },
+    { name: 'seoTitle', type: 'text', form: { tab: 'seo' } },
+    { name: 'seoDescription', type: 'text', form: { tab: 'seo' } },
+    // The page's canonical URL (absolute or root-relative), emitted as
+    // `metadata.alternates.canonical`.
+    { name: 'seoCanonical', type: 'text', form: { tab: 'seo', label: 'Canonical URL' } },
+    { name: 'seoOgTitle', type: 'text', form: { tab: 'seo' } },
+    { name: 'seoOgImage', type: 'text', form: { tab: 'seo' } },
+    { name: 'seoNoindex', type: 'boolean', form: { tab: 'seo' } },
+  ],
+}

package/template/cms/collections/post.ts

@@ -0,0 +1,104 @@
+import type { CollectionDef } from '@elytracms/core/cms-core'
+import { PROJECT_BLOCKS } from '../blocks'
+
+/**
+ * A localized blog-post collection exercising every field type. Filter
+ * declarations (EC-143) are applied inline. The `content` field is a `blocks`
+ * composition on its own "Canvas" fieldset tab (EC-188), leashed to this repo's
+ * real component vocabulary.
+ */
+export const post: CollectionDef = {
+  id: 'post',
+  kind: 'document',
+  localized: true,
+  titleField: 'title',
+  form: {
+    label: 'Posts',
+    labelSingular: 'Post',
+    groups: ['content', 'meta'],
+    tabs: ['main', 'canvas', 'seo'],
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      localized: true,
+      validation: { required: true, min: 1, max: 120 },
+      form: { label: 'Title', group: 'content', tab: 'main', order: 1 },
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      filterable: true,
+      validation: { required: true, pattern: '^[a-z0-9-]+$', unique: true },
+      form: { label: 'Slug', group: 'content', tab: 'main', order: 2 },
+    },
+    {
+      name: 'body',
+      type: 'richText',
+      localized: true,
+      form: { label: 'Body', group: 'content', tab: 'main', order: 3 },
+    },
+    {
+      name: 'views',
+      type: 'number',
+      filterable: true,
+      validation: { min: 0 },
+      form: { label: 'Views', group: 'meta', tab: 'main' },
+    },
+    {
+      name: 'featured',
+      type: 'boolean',
+      filterable: true,
+      form: { label: 'Featured', group: 'meta', tab: 'main' },
+    },
+    {
+      name: 'publishedAt',
+      type: 'date',
+      filterable: true,
+      form: { label: 'Published at', group: 'meta', tab: 'main' },
+    },
+    {
+      name: 'status',
+      type: 'select',
+      filterable: true,
+      options: [
+        { value: 'news', label: 'News' },
+        { value: 'guide', label: 'Guide' },
+      ],
+      form: { label: 'Status', group: 'meta', tab: 'main' },
+    },
+    {
+      name: 'author',
+      type: 'relation',
+      filterable: true,
+      target: 'author',
+      cardinality: 'one',
+      validation: { required: true },
+      form: { label: 'Author', group: 'meta', tab: 'main' },
+    },
+    {
+      name: 'related',
+      type: 'relation',
+      target: 'post',
+      cardinality: 'many',
+      form: { label: 'Related posts', group: 'meta', tab: 'main' },
+    },
+    {
+      name: 'cover',
+      type: 'asset',
+      cardinality: 'one',
+      accept: ['image'],
+      form: { label: 'Cover image', group: 'content', tab: 'main' },
+    },
+    // EC-188: the composition (`blocks`) field on its own "Canvas" fieldset tab,
+    // leashed to this repo's real component vocabulary (PROJECT_BLOCKS).
+    {
+      name: 'content',
+      type: 'blocks',
+      allow: PROJECT_BLOCKS,
+      cardinality: 'many',
+      form: { label: 'Content', tab: 'canvas' },
+    },
+  ],
+}

package/template/cms/collections/settings.ts

@@ -0,0 +1,27 @@
+import type { CollectionDef } from '@elytracms/core/cms-core'
+
+/**
+ * Global site settings — a singleton collection (EC-217): exactly one fixed
+ * document, opened straight in the detail editor with no list view. Internally
+ * an ordinary `document` collection with `singleton: true`, so delivery,
+ * validation, and binding paths treat it like any other document.
+ */
+export const settings: CollectionDef = {
+  id: 'settings',
+  kind: 'document',
+  singleton: true,
+  titleField: 'siteName',
+  form: { label: 'Settings', labelSingular: 'Settings' },
+  fields: [
+    {
+      name: 'siteName',
+      type: 'text',
+      validation: { required: true },
+      form: { label: 'Site name' },
+    },
+    { name: 'tagline', type: 'text', localized: true, form: { label: 'Tagline' } },
+    { name: 'logo', type: 'asset', cardinality: 'one', accept: ['image'], form: { label: 'Logo' } },
+    { name: 'primaryCtaLabel', type: 'text', form: { label: 'Primary CTA label' } },
+    { name: 'primaryCtaHref', type: 'text', form: { label: 'Primary CTA link' } },
+  ],
+}

package/template/cms/index.ts

@@ -0,0 +1,11 @@
+/**
+ * This project's CMS structure, authored in code in its OWN repo (AD-11): the
+ * collection schema, routes, and redirects. The host (`apps/example-site`) reads
+ * these directly; the studio (`apps/builder`) reads the same files through its
+ * `@site/*` alias — neither borrows a vendor package for structure. A clone of
+ * this project edits `cms/collections/*.ts` / `cms/routes.ts` here, in-repo.
+ */
+export { collections, asset, author, post, page } from './collections'
+export { routes } from './routes'
+export { redirects } from './redirects'
+export { PROJECT_BLOCKS } from './blocks'

package/template/cms/redirects.ts

@@ -0,0 +1,7 @@
+import type { RedirectRecord } from '@elytracms/core/cms-core'
+
+/** Redirects as code (EC-207): one permanent (301-class), one temporary (302-class). */
+export const redirects: RedirectRecord[] = [
+  { id: 'rd-old-about', from: '/old-about', to: '/about', permanent: true },
+  { id: 'rd-temp-home', from: '/temp', to: '/', permanent: false },
+]

package/template/cms/routes.ts

@@ -0,0 +1,34 @@
+import type { CollectionDef, RouteRecord } from '@elytracms/core/cms-core'
+
+/**
+ * Routes as code (AD-3/AD-11, EC-207): this project's URL→document map, declared
+ * in its own repo and read by BOTH the host (delivery) and the studio (read-only).
+ * A derive `(collections) => RouteRecord[]` (next.config `rewrites()`-style): the
+ * concrete page routes are static; the `post` collection, when present, is served
+ * at the template route `/blog/:slug` (`:slug` is substituted per document at
+ * resolve time). The engine (`createRouter`) consumes the result verbatim.
+ */
+export const routes = (collections: CollectionDef[]): RouteRecord[] => {
+  const records: RouteRecord[] = [
+    { id: 'r-home', pattern: '/', document: { collection: 'page', id: 'home' } },
+  ]
+  if (collections.some((collection) => collection.id === 'post')) {
+    records.push({
+      id: 'r-post',
+      pattern: '/blog/:slug',
+      document: { collection: 'post', id: ':slug' },
+    })
+  }
+  // EC-218: a hierarchy mount — pages that declare a `slug` are served by their
+  // COMPOSED nested path (their parent chain), resolved per-request and
+  // perspective-aware. Pages routed explicitly above carry no slug and are
+  // unaffected; explicit/static routes always win over the mount.
+  if (collections.some((collection) => collection.id === 'page')) {
+    records.push({
+      id: 'r-pages',
+      pattern: '/:path*',
+      document: { collection: 'page', id: ':path*' },
+    })
+  }
+  return records
+}

package/template/components/index.ts

@@ -0,0 +1,24 @@
+import { defineHostComponents, nextImagePrimitive } from '@elytracms/next'
+import { marketingComponents } from './marketing'
+import { postBodyComponent } from './post-body'
+import { postTeaserComponent } from './post-teaser'
+
+/**
+ * The host app's component surface (EC-144 registration API): base primitives
+ * ship by default; project components are real code in THIS repo.
+ *
+ * EC-194 / EC-208: the marketing components (`project.Hero`, `project.FeatureCard`,
+ * `project.Section`) live in `./marketing` (Next-free) — the SAME modules the studio
+ * composes the page builder with (via its `@site/components/marketing` alias), so
+ * what an editor places in the studio is exactly what renders here (AD-2/AD-11).
+ * The post-specific components (`project.PostBody` composition host,
+ * `project.PostTeaser`) stay local to this host. `nextImagePrimitive()` swaps the
+ * `base.primitives.Image` implementation for `next/image` delivery (EC-152) — the
+ * canonical manifest stays.
+ */
+export const hostComponents = defineHostComponents([
+  nextImagePrimitive(),
+  ...marketingComponents,
+  postBodyComponent,
+  postTeaserComponent,
+])

package/template/components/marketing/feature-card.tsx

@@ -0,0 +1,77 @@
+import { defineComponent } from '@elytracms/core/component-registry'
+import type { ReactNode } from 'react'
+import { str, type Props } from './shared'
+
+export function FeatureCard(props: Props): ReactNode {
+  const accent = props.tone === 'accent'
+  return (
+    <div
+      data-component="project.FeatureCard"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+        padding: '1.25rem',
+        borderRadius: '0.5rem',
+        border: `1px solid ${accent ? 'rgba(56,189,248,0.4)' : 'rgba(148,163,184,0.3)'}`,
+        background: accent ? 'rgba(56,189,248,0.08)' : '#ffffff',
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          placeItems: 'center',
+          width: '2rem',
+          height: '2rem',
+          borderRadius: '0.375rem',
+          background: accent ? '#38bdf8' : '#e2e8f0',
+          color: accent ? '#082f49' : '#0f172a',
+          fontWeight: 700,
+        }}
+      >
+        {str(props.title, 'F').charAt(0).toUpperCase()}
+      </div>
+      <h3 style={{ margin: 0, fontSize: '0.95rem', fontWeight: 600, color: '#0f172a' }}>
+        {str(props.title, 'Feature title')}
+      </h3>
+      <p style={{ margin: 0, fontSize: '0.85rem', color: '#475569' }}>
+        {str(props.body, 'A short description of this feature.')}
+      </p>
+    </div>
+  )
+}
+
+export const FeatureCardManifest = defineComponent({
+  id: 'project.FeatureCard',
+  namespace: 'project',
+  title: 'Feature Card',
+  description: 'A compact card highlighting one feature, with an optional accent tone.',
+  category: 'marketing',
+  props: {
+    title: {
+      type: 'text',
+      context: 'prop',
+      default: 'Validation first',
+      validation: { min: 1 },
+      form: { label: 'Title' },
+    },
+    body: {
+      type: 'text',
+      context: 'prop',
+      default: 'Broken bindings and missing components are explicit, never silent.',
+      form: { label: 'Body', control: 'textarea' },
+    },
+    tone: {
+      type: 'select',
+      context: 'prop',
+      default: 'default',
+      options: [
+        { value: 'default', label: 'Default' },
+        { value: 'accent', label: 'Accent' },
+      ],
+      form: { label: 'Tone' },
+    },
+  },
+  slots: [],
+  fixtures: [{ name: 'Default' }, { name: 'Accent', props: { tone: 'accent', title: 'Code-first' } }],
+})

package/template/components/marketing/hero.tsx

@@ -0,0 +1,81 @@
+import { defineComponent } from '@elytracms/core/component-registry'
+import type { ReactNode } from 'react'
+import { str, type Props } from './shared'
+
+export function Hero(props: Props): ReactNode {
+  const align = props.align === 'center' ? 'center' : 'flex-start'
+  const textAlign = props.align === 'center' ? 'center' : 'left'
+  return (
+    <section
+      data-component="project.Hero"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+        alignItems: align,
+        textAlign,
+        padding: '3rem 2rem',
+        borderRadius: '0.75rem',
+        background: 'linear-gradient(135deg, #0f172a, #1e293b)',
+        color: '#f8fafc',
+      }}
+    >
+      {str(props.eyebrow) ? (
+        <span style={{ fontSize: '0.7rem', fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7dd3fc' }}>
+          {str(props.eyebrow)}
+        </span>
+      ) : null}
+      <h1 style={{ margin: 0, fontSize: '2.25rem', fontWeight: 700, letterSpacing: '-0.02em' }}>
+        {str(props.title, 'Your headline here')}
+      </h1>
+      {str(props.subtitle) ? (
+        <p style={{ margin: 0, maxWidth: '40ch', fontSize: '1rem', opacity: 0.82 }}>{str(props.subtitle)}</p>
+      ) : null}
+      {str(props.ctaLabel) ? (
+        <span style={{ marginTop: '0.5rem', alignSelf: align, borderRadius: '0.5rem', background: '#38bdf8', color: '#082f49', padding: '0.55rem 1.1rem', fontSize: '0.9rem', fontWeight: 600 }}>
+          {str(props.ctaLabel)}
+        </span>
+      ) : null}
+    </section>
+  )
+}
+
+export const HeroManifest = defineComponent({
+  id: 'project.Hero',
+  namespace: 'project',
+  title: 'Hero',
+  description: 'A full-width hero banner with eyebrow, headline, subtitle, and a call to action.',
+  category: 'marketing',
+  props: {
+    eyebrow: { type: 'text', context: 'prop', default: 'Introducing', form: { label: 'Eyebrow' } },
+    title: {
+      type: 'text',
+      context: 'prop',
+      default: 'Build your site, your way',
+      validation: { min: 1 },
+      form: { label: 'Headline' },
+    },
+    subtitle: {
+      type: 'text',
+      context: 'prop',
+      default: 'One canonical graph powers editing, content, and delivery.',
+      form: { label: 'Subtitle', control: 'textarea' },
+    },
+    ctaLabel: { type: 'text', context: 'prop', default: 'Get started', form: { label: 'Button label' } },
+    align: {
+      type: 'select',
+      context: 'prop',
+      default: 'left',
+      options: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+      ],
+      form: { label: 'Alignment' },
+    },
+  },
+  slots: [],
+  fixtures: [
+    { name: 'Default' },
+    { name: 'Centered', props: { align: 'center', eyebrow: 'New', title: 'Ship faster' } },
+  ],
+})

package/template/components/marketing/index.tsx

@@ -0,0 +1,32 @@
+import type { ComponentManifest } from '@elytracms/core/component-registry'
+import type { ComponentType } from 'react'
+import { Hero, HeroManifest } from './hero'
+import { FeatureCard, FeatureCardManifest } from './feature-card'
+import { Section, SectionManifest } from './section'
+import type { MarketingComponent, Props } from './shared'
+
+export type { MarketingComponent } from './shared'
+export { Hero, HeroManifest } from './hero'
+export { FeatureCard, FeatureCardManifest } from './feature-card'
+export { Section, SectionManifest } from './section'
+
+/**
+ * This project's REAL components (manifest + implementation pairs). The host
+ * renders them in production; the studio (`apps/builder`) imports the manifests +
+ * implementations through its `@site/components/marketing` alias and composes the
+ * page builder with THESE — so what an editor places is exactly what ships
+ * (AD-2/AD-11). They live in this repo, not a vendor package.
+ */
+export const marketingComponents: MarketingComponent[] = [
+  { manifest: HeroManifest, implementation: Hero },
+  { manifest: FeatureCardManifest, implementation: FeatureCard },
+  { manifest: SectionManifest, implementation: Section as ComponentType<Props> },
+]
+
+/** The component ids this set registers — the canvas `allow` vocabulary references these. */
+export const marketingComponentIds = marketingComponents.map((c) => c.manifest.id)
+
+export const marketingManifests: ComponentManifest[] = marketingComponents.map((c) => c.manifest)
+export const marketingImplementations: Record<string, ComponentType<Props>> = Object.fromEntries(
+  marketingComponents.map((c) => [c.manifest.id, c.implementation]),
+)

package/template/components/marketing/section.tsx

@@ -0,0 +1,41 @@
+import { defineComponent } from '@elytracms/core/component-registry'
+import type { ReactNode } from 'react'
+import { str, type Props } from './shared'
+
+export function Section(props: Props & { body?: ReactNode }): ReactNode {
+  return (
+    <section
+      data-component="project.Section"
+      style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '2rem 0' }}
+    >
+      {str(props.heading) ? (
+        <h2 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700, color: '#0f172a' }}>{str(props.heading)}</h2>
+      ) : null}
+      <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
+        {props.body}
+      </div>
+    </section>
+  )
+}
+
+export const SectionManifest = defineComponent({
+  id: 'project.Section',
+  namespace: 'project',
+  title: 'Section',
+  description: 'A titled section whose body holds a grid of nested blocks.',
+  category: 'layout',
+  props: {
+    heading: { type: 'text', context: 'prop', default: 'Why teams choose us', form: { label: 'Heading' } },
+    // A `blocks` prop is a child region (slot) — nesting other components, so the
+    // builder shows real composition with this repo's own components.
+    body: {
+      type: 'blocks',
+      context: 'prop',
+      cardinality: 'many',
+      allow: ['project.FeatureCard', 'base.primitives.Text', 'base.primitives.Heading'],
+      form: { label: 'Body' },
+    },
+  },
+  slots: [],
+  fixtures: [{ name: 'Default' }],
+})

package/template/components/marketing/shared.ts

@@ -0,0 +1,21 @@
+import type { ComponentManifest } from '@elytracms/core/component-registry'
+import type { ComponentType } from 'react'
+
+/**
+ * Shared helpers for this project's REAL marketing components (`project.Hero`,
+ * `project.FeatureCard`, `project.Section`). These are Next-free (they import
+ * `defineComponent` from `@elytracms/core/component-registry`, NOT `@elytracms/next`, and
+ * render plain elements — no `next/image`, no server-only modules) so the SAME
+ * component renders in the Vite-based studio canvas AND the Next host (AD-2/AD-11).
+ */
+export type Props = Record<string, unknown>
+
+export function str(value: unknown, fallback = ''): string {
+  return typeof value === 'string' && value.length > 0 ? value : fallback
+}
+
+/** A manifest + implementation pair for one of this project's components. */
+export interface MarketingComponent {
+  manifest: ComponentManifest
+  implementation: ComponentType<Props>
+}

package/template/components/post-body.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+import { defineComponent } from '@elytracms/next'
+import type { HostComponent } from '@elytracms/next'
+
+/**
+ * `project.PostBody` — the post template's composition surface (EC-188, AD-12).
+ * Its `content` prop is bound to the post document's `content` block field; the
+ * `composition: { valueProp: 'content' }` manifest flag makes the renderer resolve
+ * that prop to the stored ComponentNode tree and hand it to this component as
+ * already-rendered `children` (via `renderComposition`, with the live context — so
+ * the composed blocks ship with the same fallbacks and binding resolution as the
+ * page). The implementation is a thin semantic wrapper; the renderer owns the tree.
+ */
+function PostBody(props: Record<string, unknown>): ReactNode {
+  return (
+    <div
+      data-component="project.PostBody"
+      style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+    >
+      {props.children as ReactNode}
+    </div>
+  )
+}
+
+export const postBodyComponent: HostComponent = {
+  manifest: defineComponent({
+    id: 'project.PostBody',
+    namespace: 'project',
+    title: 'Post body',
+    category: 'content',
+    props: {
+      // The composition value (a ComponentNode tree). EC-190/EC-186: a `blocks`
+      // field-def IS the composition prop — the renderer narrows and renders the
+      // stored tree as this node's children (composition host, below).
+      content: {
+        type: 'blocks',
+        context: 'prop',
+        // `many`: the post body is an ordered list of blocks (EC-186).
+        cardinality: 'many',
+        form: { label: 'Content' },
+      },
+    },
+    slots: [],
+    composition: { valueProp: 'content' },
+  }),
+  implementation: PostBody,
+}

package/template/components/post-teaser.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import { defineComponent } from '@elytracms/next'
+import type { HostComponent } from '@elytracms/next'
+
+/**
+ * `project.PostTeaser` — the repeater item template for the home page's post
+ * list. Its props are bound per-item (`repeaterItem` mode) to the delivery
+ * shape of the `post` collection.
+ */
+function PostTeaser(props: Record<string, unknown>): ReactNode {
+  const title = typeof props.title === 'string' ? props.title : ''
+  const slug = typeof props.slug === 'string' ? props.slug : ''
+  return (
+    <article
+      data-component="project.PostTeaser"
+      style={{ padding: '1rem 1.25rem', border: '1px solid #d8dee7', borderRadius: '0.5rem' }}
+    >
+      <h3 style={{ margin: 0 }}>{slug ? <a href={`/blog/${slug}`}>{title}</a> : title}</h3>
+    </article>
+  )
+}
+
+export const postTeaserComponent: HostComponent = {
+  manifest: defineComponent({
+    id: 'project.PostTeaser',
+    namespace: 'project',
+    title: 'Post teaser',
+    category: 'content',
+    props: {
+      title: {
+        type: 'text',
+        context: 'prop',
+        default: '',
+        form: { label: 'Title' },
+      },
+      slug: {
+        type: 'text',
+        context: 'prop',
+        default: '',
+        form: { label: 'Slug' },
+      },
+    },
+    slots: [],
+  }),
+  implementation: PostTeaser,
+}

package/template/components/theme.css

@@ -0,0 +1,31 @@
+/*
+ * Your site's DELIVERY theme — plain CSS for the page-builder blocks. The
+ * frontend imports nothing from here directly (its components carry their own
+ * styles); this file is `@import`ed into the studio canvas preview so the blocks
+ * look the same in the editor as they do live. Author it as normal global site
+ * CSS — it lives only in the isolated preview iframe, so it never leaks into the
+ * studio chrome. Add your fonts, colours, and base element styles here.
+ */
+
+:root {
+  --site-foreground: #1a202c;
+  --site-background: #ffffff;
+  --site-accent: #38bdf8;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  color: var(--site-foreground);
+  background: var(--site-background);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--site-accent);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}