@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.11.0",
+  "description": "OmniaUI for Vue 3: one single-file component per OmniaUI component and block, rendering the exact markup of the CSS packages.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniaui.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaUI.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaUI/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "css",
+    "omniaui"
+  ],
+  "main": "./dist/omniaui-vue.js",
+  "module": "./dist/omniaui-vue.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/omniaui-vue.js"
+    },
+    "./src/*": "./src/*",
+    "./manifest.json": "./manifest.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "manifest.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "generate": "node scripts/generate-index.mjs",
+    "build": "npm run generate && vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.0.0",
+    "vitest": "^3.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/blocks/OcBlockAboutTimeline.vue

@@ -0,0 +1,44 @@
+<!-- File: packages/vue/src/blocks/OcBlockAboutTimeline.vue | Map: props -> media (+ badge slot) -> copy (title, default slot) -> OcTimeline -->
+<script setup lang="ts">
+/**
+ * About section: picture with a badge next to the company story and a year timeline.
+ * `title` + `highlight` (gradient part), or the `title` slot. Slots: title, default (paragraphs), badge.
+ * Classes: .oc-block-about (--reverse), -inner, -media, -badge, -copy, -title + .oc-timeline
+ */
+import OcTimeline from '../components/OcTimeline.vue'
+import type { TimelineEntry } from '../components/OcTimeline.vue'
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    highlight?: string
+    timeline?: TimelineEntry[]
+    image?: string
+    imageAlt?: string
+    reverse?: boolean
+  }>(),
+  { timeline: () => [], imageAlt: '' },
+)
+const titleId = useUid('oc-about-title')
+</script>
+
+<template>
+  <section :class="['oc-block-about', reverse && 'oc-block-about--reverse']" :aria-labelledby="titleId">
+    <div class="oc-block-about-inner">
+      <figure class="oc-block-about-media" :aria-hidden="image ? undefined : 'true'">
+        <img v-if="image" :src="image" :alt="imageAlt" loading="lazy" />
+        <span v-if="$slots.badge" class="oc-block-about-badge"><slot name="badge" /></span>
+      </figure>
+      <div class="oc-block-about-copy">
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h2 :id="titleId" class="oc-block-about-title">
+          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></slot>
+        </h2>
+        <slot />
+        <OcTimeline v-if="timeline.length" :items="timeline" />
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockAppHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Top bar with sidebar toggle, module navigation and user actions.
+ * `toggleFor` = id of the checkbox that collapses the sidebar (see OcBlockAppShell).
+ * Slots: toggle (replaces the default hamburger label), nav (replaces the items), title, actions.
+ * Classes: .oc-block-appbar, -nav, -actions, -title
+ */
+import OcNavmenuList, { type NavmenuItem } from '../components/OcNavmenuList.vue'
+
+withDefaults(
+  defineProps<{
+    toggleFor?: string
+    toggleLabel?: string
+    navItems?: NavmenuItem[]
+    navLabel?: string
+    title?: string
+  }>(),
+  { toggleLabel: 'Toggle sidebar', navLabel: 'Module navigation' },
+)
+</script>
+
+<template>
+  <header class="oc-block-appbar">
+    <slot name="toggle">
+      <label v-if="toggleFor" class="oc-btn oc-btn--ghost oc-btn--icon" :for="toggleFor" :title="toggleLabel">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+        <span class="oc-visually-hidden">{{ toggleLabel }}</span>
+      </label>
+    </slot>
+    <span v-if="title" class="oc-block-appbar-title">{{ title }}</span>
+    <nav v-if="navItems?.length || $slots.nav" class="oc-block-appbar-nav" :aria-label="navLabel">
+      <slot name="nav"><OcNavmenuList :items="navItems" /></slot>
+    </nav>
+    <div v-if="$slots.actions" class="oc-block-appbar-actions"><slot name="actions" /></div>
+  </header>
+</template>

package/src/blocks/OcBlockAppShell.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+/**
+ * Application layout: sidebar, header bar, breadcrumb strip and scrolling content.
+ * v-model:collapsed drives the hidden checkbox (`toggleId`) that collapses the sidebar; point the header's
+ * toggle label at the same id. `height` sets --oc-block-shell-height (default 100dvh).
+ * Slots: sidebar (an OcSidebar), header (an OcBlockAppHeader), breadcrumbs, default (content).
+ * Classes: .oc-block-shell, -toggle, -main, -breadcrumbs, -content
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ toggleId?: string; height?: string; toggleLabel?: string }>(), {
+  toggleId: 'oc-shell-toggle',
+  toggleLabel: 'Collapse sidebar',
+})
+const collapsed = defineModel<boolean>('collapsed', { default: false })
+const style = computed(() => (props.height ? { '--oc-block-shell-height': props.height } : undefined))
+</script>
+
+<template>
+  <div class="oc-block-shell" :style="style">
+    <input :id="toggleId" v-model="collapsed" class="oc-block-shell-toggle" type="checkbox" :aria-label="toggleLabel" />
+    <slot name="sidebar" />
+    <div class="oc-block-shell-main">
+      <slot name="header" />
+      <div v-if="$slots.breadcrumbs" class="oc-block-shell-breadcrumbs"><slot name="breadcrumbs" /></div>
+      <main class="oc-block-shell-content"><slot /></main>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockAuth.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * Sign-in card. Slots: default (fields, e.g. .oc-form-group blocks), actions (primary button),
+ * social (alternative sign-in buttons, shown under the divider text), footer.
+ * Classes: .oc-block-auth, -card, -divider, -footer, .oc-block-subtitle
+ */
+defineProps<{ title?: string; subtitle?: string; divider?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-auth">
+    <div class="oc-block-auth-card">
+      <h2 v-if="title">{{ title }}</h2>
+      <p v-if="subtitle" class="oc-block-subtitle">{{ subtitle }}</p>
+      <slot />
+      <slot name="actions" />
+      <template v-if="$slots.social">
+        <div v-if="divider" class="oc-block-auth-divider">{{ divider }}</div>
+        <slot name="social" />
+      </template>
+    </div>
+    <div v-if="$slots.footer" class="oc-block-auth-footer"><slot name="footer" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockAuthSplit.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Sign-in with a brand panel (logo, quote) next to the form. Emits `submit` (the native submit event).
+ * Slots: logo, quote (or `quote` + `quoteAuthor` props), default (fields), row (remember me / forgot password),
+ * submit (default: a full-width primary button with `submitLabel`), footer.
+ * Classes: .oc-block-authsplit, -brand, -logo, -quote, -form, -card, -title, -subtitle, -fields, -row
+ */
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    quote?: string
+    quoteAuthor?: string
+    submitLabel?: string
+    action?: string
+    method?: string
+  }>(),
+  { submitLabel: 'Sign in', action: '#', method: 'post' },
+)
+defineEmits<{ submit: [event: SubmitEvent] }>()
+</script>
+
+<template>
+  <div class="oc-block-authsplit">
+    <aside class="oc-block-authsplit-brand">
+      <a v-if="$slots.logo" class="oc-block-authsplit-logo" href="/"><slot name="logo" /></a>
+      <blockquote v-if="quote || $slots.quote" class="oc-block-authsplit-quote">
+        <slot name="quote">
+          <p>{{ quote }}</p>
+          <footer v-if="quoteAuthor">{{ quoteAuthor }}</footer>
+        </slot>
+      </blockquote>
+    </aside>
+    <div class="oc-block-authsplit-form">
+      <form class="oc-block-authsplit-card" :action="action" :method="method" @submit="$emit('submit', $event)">
+        <h1 v-if="title" class="oc-block-authsplit-title">{{ title }}</h1>
+        <p v-if="subtitle" class="oc-block-authsplit-subtitle">{{ subtitle }}</p>
+        <div class="oc-block-authsplit-fields">
+          <slot />
+          <div v-if="$slots.row" class="oc-block-authsplit-row"><slot name="row" /></div>
+          <slot name="submit"><button class="oc-btn" type="submit" style="width: 100%">{{ submitLabel }}</button></slot>
+        </div>
+        <slot name="footer" />
+      </form>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockContactGrid.vue

@@ -0,0 +1,53 @@
+<!-- File: packages/vue/src/blocks/OcBlockContactGrid.vue | Map: props -> head -> grid -> cards (mark, title, lines) -->
+<script setup lang="ts">
+/**
+ * Contact info cards (e-mail, phone, address, hours). A card with `address: true` renders as <address>.
+ * Slot: default (own cards). Classes: .oc-block-contact (--plain), -head, -heading, -lead, -grid, -card, -title, -line
+ */
+import { useUid } from '../composables/useUid'
+
+export interface ContactGridLine {
+  text: string
+  href?: string
+}
+export interface ContactGridCard {
+  title: string
+  lines: ContactGridLine[]
+  icon?: string
+  accent?: string
+  address?: boolean
+}
+withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    lead?: string
+    cards?: ContactGridCard[]
+    plain?: boolean
+  }>(),
+  { cards: () => [] },
+)
+const titleId = useUid('oc-contact-title')
+</script>
+
+<template>
+  <section :class="['oc-block-contact', plain && 'oc-block-contact--plain']" :aria-labelledby="title ? titleId : undefined">
+    <div v-if="eyebrow || title || lead" class="oc-block-contact-head">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 v-if="title" :id="titleId" class="oc-block-contact-heading">{{ title }}</h2>
+      <p v-if="lead" class="oc-block-contact-lead">{{ lead }}</p>
+    </div>
+    <div class="oc-block-contact-grid">
+      <slot>
+        <component :is="card.address ? 'address' : 'article'" v-for="(card, i) in cards" :key="i" class="oc-block-contact-card">
+          <span v-if="card.icon" :class="['oc-product-mark oc-product-mark--sm oc-product-mark--soft', card.accent && `oc-accent--${card.accent}`]" aria-hidden="true">{{ card.icon }}</span>
+          <component :is="card.address ? 'span' : 'h3'" class="oc-block-contact-title">{{ card.title }}</component>
+          <template v-for="(line, j) in card.lines" :key="j">
+            <a v-if="line.href" class="oc-block-contact-line" :href="line.href">{{ line.text }}</a>
+            <component :is="card.address ? 'span' : 'p'" v-else class="oc-block-contact-line">{{ line.text }}</component>
+          </template>
+        </component>
+      </slot>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockCta.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+/** Call to action banner. Slot `actions` holds the buttons (inside .oc-block-hero-actions). */
+defineProps<{ title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-cta">
+    <h2 v-if="title">{{ title }}</h2>
+    <p v-if="text">{{ text }}</p>
+    <div v-if="$slots.actions" class="oc-block-hero-actions"><slot name="actions" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockDataTable.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Card with title, actions, toolbar, table, bulk bar and footer. Put an <OcTable> in the default slot.
+ * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills, columns popover),
+ * bulk (selection bar, shown when `selectedCount` > 0), default (table), footer (.oc-table-footer: entries text, page size, pagination).
+ * Classes: .oc-card.oc-block-datatable, -head, -title, -description, -body, -bulk, .oc-table-toolbar, .oc-table-footer
+ */
+defineProps<{ title?: string; description?: string; selectedCount?: number }>()
+</script>
+
+<template>
+  <section class="oc-card oc-block-datatable">
+    <header v-if="title || description || $slots.actions" class="oc-block-datatable-head">
+      <div>
+        <h2 v-if="title" class="oc-block-datatable-title">{{ title }}</h2>
+        <p v-if="description" class="oc-block-datatable-description">{{ description }}</p>
+      </div>
+      <div v-if="$slots.actions"><slot name="actions" /></div>
+    </header>
+    <div class="oc-block-datatable-body">
+      <div v-if="$slots.toolbar" class="oc-table-toolbar"><slot name="toolbar" /></div>
+      <div v-if="$slots.bulk && selectedCount" class="oc-block-datatable-bulk"><slot name="bulk" :count="selectedCount" /></div>
+      <slot />
+      <div v-if="$slots.footer" class="oc-table-footer"><slot name="footer" /></div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockFaq.vue

@@ -0,0 +1,49 @@
+<!-- File: packages/vue/src/blocks/OcBlockFaq.vue | Map: props -> section.oc-block-faq -> head -> accordion (details name) -> more slot -->
+<script setup lang="ts">
+/**
+ * FAQ section: title + exclusive accordion on native <details name> (no JavaScript).
+ * Slots: lead, default (own details items), more. Classes: .oc-block-faq (--split), -inner, -head, -title, -lead, -list, -more
+ */
+import { useUid } from '../composables/useUid'
+
+export interface FaqItem {
+  question: string
+  answer: string
+}
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title: string
+    lead?: string
+    items?: FaqItem[]
+    openIndex?: number
+    split?: boolean
+    name?: string
+  }>(),
+  { items: () => [], openIndex: 0 },
+)
+const titleId = useUid('oc-faq-title')
+const autoGroup = useUid('oc-faq')
+const group = props.name ?? autoGroup
+</script>
+
+<template>
+  <section :class="['oc-block-faq', split && 'oc-block-faq--split']" :aria-labelledby="titleId">
+    <div class="oc-block-faq-inner">
+      <div class="oc-block-faq-head">
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h2 :id="titleId" class="oc-block-faq-title">{{ title }}</h2>
+        <p v-if="lead || $slots.lead" class="oc-block-faq-lead"><slot name="lead">{{ lead }}</slot></p>
+      </div>
+      <div class="oc-accordion oc-block-faq-list">
+        <slot>
+          <details v-for="(item, i) in items" :key="i" class="oc-accordion-item" :name="group" :open="i === openIndex">
+            <summary class="oc-accordion-trigger">{{ item.question }}</summary>
+            <div class="oc-accordion-content">{{ item.answer }}</div>
+          </details>
+        </slot>
+      </div>
+      <p v-if="$slots.more" class="oc-block-faq-more"><slot name="more" /></p>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockFeatures.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/** Feature grid with icons. Slot `icon` (scoped: { item }) overrides the glyph. Classes: .oc-block-features, -grid, .oc-block-feature-card, -icon */
+export interface FeatureItem {
+  icon?: string
+  title: string
+  text: string
+}
+defineProps<{ title?: string; description?: string; items: FeatureItem[] }>()
+</script>
+
+<template>
+  <div class="oc-block-features">
+    <h2 v-if="title">{{ title }}</h2>
+    <p v-if="description">{{ description }}</p>
+    <div class="oc-block-features-grid">
+      <div v-for="(item, i) in items" :key="i" class="oc-block-feature-card">
+        <div class="oc-block-feature-icon"><slot name="icon" :item="item">{{ item.icon }}</slot></div>
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockFooter.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+/** Multi-column site footer. Slots: bottom-start, bottom-end (default text via `copyright` / `credit`). Classes: .oc-block-footer, -grid, -col, -bottom */
+export interface FooterColumn {
+  title: string
+  links: { label: string; href: string }[]
+}
+defineProps<{ columns: FooterColumn[]; copyright?: string; credit?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-footer">
+    <div class="oc-block-footer-grid">
+      <div v-for="col in columns" :key="col.title" class="oc-block-footer-col">
+        <h4>{{ col.title }}</h4>
+        <ul>
+          <li v-for="link in col.links" :key="link.href + link.label"><a :href="link.href">{{ link.label }}</a></li>
+        </ul>
+      </div>
+    </div>
+    <div v-if="copyright || credit || $slots['bottom-start'] || $slots['bottom-end']" class="oc-block-footer-bottom">
+      <span><slot name="bottom-start">{{ copyright }}</slot></span>
+      <span><slot name="bottom-end">{{ credit }}</slot></span>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockFormPage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * Collapsible form sections with a sticky action bar. Default slot = sections (OcCollapsible containing a
+ * `<div class="oc-block-formpage-grid">` for the two-column field grid). Emits `submit`.
+ * Slot `actions` replaces the default Cancel / Save buttons. Classes: .oc-block-formpage, -grid, -actions
+ */
+withDefaults(
+  defineProps<{ cancelLabel?: string; submitLabel?: string; action?: string; method?: string }>(),
+  { cancelLabel: 'Cancel', submitLabel: 'Save', action: '#', method: 'post' },
+)
+defineEmits<{ submit: [event: SubmitEvent]; cancel: [] }>()
+</script>
+
+<template>
+  <form class="oc-block-formpage" :action="action" :method="method" @submit="$emit('submit', $event)">
+    <slot />
+    <div class="oc-block-formpage-actions">
+      <slot name="actions">
+        <button class="oc-btn oc-btn--outline" type="button" @click="$emit('cancel')">{{ cancelLabel }}</button>
+        <button class="oc-btn" type="submit">{{ submitLabel }}</button>
+      </slot>
+    </div>
+  </form>
+</template>

package/src/blocks/OcBlockHero.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+/** Centered hero with badge, headline, text and actions. Classes: .oc-block-hero, -badge, -actions */
+defineProps<{ badge?: string; title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-hero">
+    <span v-if="badge" class="oc-block-hero-badge">{{ badge }}</span>
+    <h1 v-if="title">{{ title }}</h1>
+    <p v-if="text">{{ text }}</p>
+    <div v-if="$slots.actions" class="oc-block-hero-actions"><slot name="actions" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockHeroCode.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * Landing hero: eyebrow, display title with a gradient word, lead, buttons and a code window with floating icon tiles.
+ * `title` + `highlight` (gradient word) + `titleEnd`, or the `title` slot. Slots: lead, actions, visual (replaces the code window).
+ * Classes: .oc-section-pad, .oc-container, .oc-split, .oc-eyebrow, .oc-display, .oc-text-gradient, .oc-lead, .oc-code-window
+ */
+defineProps<{
+  eyebrow?: string
+  title?: string
+  highlight?: string
+  titleEnd?: string
+  lead?: string
+  code?: string
+  codeTitle?: string
+}>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container oc-split">
+      <div>
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h1 class="oc-display">
+          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span>{{ titleEnd }}</slot>
+        </h1>
+        <p v-if="lead || $slots.lead" class="oc-lead"><slot name="lead">{{ lead }}</slot></p>
+        <div v-if="$slots.actions" class="flex flex-wrap gap-1 mt-2"><slot name="actions" /></div>
+      </div>
+      <div class="relative p-2">
+        <slot name="visual">
+          <span class="oc-icon-tile oc-icon-tile--float oc-accent--green absolute" style="inset: -0.5rem auto auto 8%" aria-hidden="true">&#9670;</span>
+          <span class="oc-icon-tile oc-icon-tile--float oc-accent--violet absolute" style="inset: 0 6% auto auto; animation-delay: -2s" aria-hidden="true">&#9673;</span>
+          <span class="oc-icon-tile oc-icon-tile--float oc-accent--orange absolute" style="inset: auto 10% -0.5rem auto; animation-delay: -4s" aria-hidden="true">&#9650;</span>
+          <div class="oc-code-window">
+            <div class="oc-code-window__bar"><i></i><i></i><i></i><span v-if="codeTitle" class="oc-code-window__title">{{ codeTitle }}</span></div>
+            <pre class="oc-code-window__body">{{ code }}</pre>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockHeroOrbit.vue

@@ -0,0 +1,69 @@
+<!-- File: packages/vue/src/blocks/OcBlockHeroOrbit.vue | Map: props + default marks -> copy -> visual (ring with marks + center slot / code window) -->
+<script setup lang="ts">
+/**
+ * Hero with a code window and product marks that orbit around it (reduced motion: they stand still).
+ * `title` + `highlight` + `titleEnd`, or the `title` slot. Slots: lead, actions, center (replaces the code window;
+ * give it class="oc-block-orbit-center"). Classes: .oc-block-orbit-visual, -ring, -mark (--oc-orbit-angle), -center
+ */
+import { computed } from 'vue'
+
+export interface HeroOrbitMark {
+  glyph: string
+  accent: string
+}
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    highlight?: string
+    titleEnd?: string
+    lead?: string
+    code?: string
+    codeTitle?: string
+    marks?: HeroOrbitMark[]
+    duration?: string
+  }>(),
+  {
+    code: '',
+    marks: () => [
+      { glyph: '◆', accent: 'green' },
+      { glyph: '◉', accent: 'violet' },
+      { glyph: '▲', accent: 'orange' },
+      { glyph: '★', accent: 'cyan' },
+      { glyph: '♥', accent: 'red' },
+      { glyph: '☀', accent: 'yellow' },
+    ],
+  },
+)
+// Spread the marks evenly over the ring.
+const angle = (i: number) => `--oc-orbit-angle: ${(360 / props.marks.length) * i}deg`
+const visualStyle = computed(() => (props.duration ? `--oc-orbit-duration: ${props.duration}` : undefined))
+</script>
+
+<template>
+  <section class="oc-block-orbit oc-section-pad">
+    <div class="oc-container oc-split">
+      <div>
+        <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+        <h1 class="oc-display">
+          <slot name="title">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span>{{ titleEnd }}</slot>
+        </h1>
+        <p v-if="lead || $slots.lead" class="oc-lead"><slot name="lead">{{ lead }}</slot></p>
+        <div v-if="$slots.actions" class="flex flex-wrap gap-1 mt-2"><slot name="actions" /></div>
+      </div>
+      <div class="oc-block-orbit-visual" :style="visualStyle">
+        <div class="oc-block-orbit-ring" aria-hidden="true">
+          <span v-for="(mark, i) in marks" :key="i" class="oc-block-orbit-mark" :style="angle(i)">
+            <span :class="['oc-product-mark oc-product-mark--sm', `oc-accent--${mark.accent}`]">{{ mark.glyph }}</span>
+          </span>
+        </div>
+        <slot name="center">
+          <div class="oc-code-window oc-block-orbit-center">
+            <div class="oc-code-window__bar"><i></i><i></i><i></i><span v-if="codeTitle" class="oc-code-window__title">{{ codeTitle }}</span></div>
+            <pre class="oc-code-window__body">{{ code }}</pre>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockHeroSplit.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/** Hero with text left and visual right. Slots: actions, visual. Classes: .oc-block-hero-split, -actions, -visual */
+defineProps<{ title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-block-hero-split">
+    <div>
+      <h1 v-if="title">{{ title }}</h1>
+      <p v-if="text">{{ text }}</p>
+      <div v-if="$slots.actions" class="oc-block-hero-actions justify-start"><slot name="actions" /></div>
+    </div>
+    <div class="oc-block-hero-visual"><slot name="visual" /></div>
+  </div>
+</template>

package/src/blocks/OcBlockModuleHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * Page header with icon tile, title, intro, meta badges and an action row.
+ * Slots: icon, meta (badges), actions. Classes: .oc-block-modulehead, -band, -icon, -body, -title, -intro, -meta, -actions
+ */
+defineProps<{ title: string; intro?: string }>()
+</script>
+
+<template>
+  <header class="oc-block-modulehead">
+    <div class="oc-block-modulehead-band">
+      <span v-if="$slots.icon" class="oc-block-modulehead-icon" aria-hidden="true"><slot name="icon" /></span>
+      <div class="oc-block-modulehead-body">
+        <h1 class="oc-block-modulehead-title">{{ title }}</h1>
+        <p v-if="intro" class="oc-block-modulehead-intro">{{ intro }}</p>
+        <div v-if="$slots.meta" class="oc-block-modulehead-meta"><slot name="meta" /></div>
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="oc-block-modulehead-actions"><slot name="actions" /></div>
+  </header>
+</template>