@honeydeck/honeydeck 0.1.0

package/src/layouts/bee/Image/Image.tsx

@@ -0,0 +1,151 @@
+/**
+ * Image layout — prominent framed image with optional title and caption.
+ *
+ * The image is presented as a gallery-quality piece: a surface-coloured mat
+ * behind it, a deep shadow for lift, and a subtle ring border. A thin primary
+ * accent border at the caption ties the slide to the deck theme.
+ *
+ * - Use `image` frontmatter to supply the URL / path.
+ * - Use `darkImage` frontmatter to override the URL / path in dark mode.
+ * - The `alt` frontmatter field is forwarded to the <img> for accessibility.
+ * - Any MDX body text (after the h1) becomes the figure caption, separated
+ *   by a primary left-border accent — italic, subordinate to the image.
+ *
+ * @example
+ * ```mdx
+ * ---
+ * layout: Image
+ * image: /diagrams/architecture.png
+ * darkImage: /diagrams/architecture-dark.png
+ * alt: High-level architecture diagram showing three service tiers
+ * ---
+ *
+ * # System Architecture
+ *
+ * Our distributed system in production.
+ * ```
+ */
+
+import type { ReactNode } from "react";
+import type { LayoutDemo, LayoutProps } from "../../../runtime/types.ts";
+import {
+	ColorModeImage,
+	type DarkModeImageFrontmatter,
+} from "../../ColorModeImage.tsx";
+import { imagePlaceholder, imagePlaceholderDark } from "../../placeholders.ts";
+import DefaultLayout from "../Default.tsx";
+
+type ImageFrontmatter = DarkModeImageFrontmatter & {
+	/** URL or path to the image (supports /public/, relative, or external URLs) */
+	image?: string;
+	/** URL or path used when Honeydeck's effective color mode is dark */
+	darkImage?: string;
+	/** Alt text for the image */
+	alt?: string;
+};
+
+// ---------------------------------------------------------------------------
+// ImageFrame — shared framed container for the image stage
+// ---------------------------------------------------------------------------
+
+function ImageFrame({ children }: { children: ReactNode }) {
+	return (
+		<div className="max-h-full rounded-honeydeck overflow-hidden bg-surface shadow-2xl ring-1 ring-border">
+			{children}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Placeholder — shown when no `image` frontmatter key is set
+// ---------------------------------------------------------------------------
+
+function PlaceholderBox() {
+	return (
+		<div className="flex flex-col items-center gap-11 max-h-full min-h-0">
+			<ImageFrame>
+				<ColorModeImage
+					src={imagePlaceholder}
+					darkSrc={imagePlaceholderDark}
+					alt=""
+					className="max-h-full max-w-full object-contain"
+					aria-hidden="true"
+				/>
+			</ImageFrame>
+			{/* Hint text below the frame */}
+			<p className="text-[length:var(--honeydeck-font-size-small)] text-surface-foreground text-center opacity-50 leading-snug">
+				Add{" "}
+				<code className="font-mono bg-background px-5 py-1 rounded-honeydeck">
+					image: /path/to/image.png
+				</code>{" "}
+				to frontmatter
+			</p>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Layout
+// ---------------------------------------------------------------------------
+
+export default function ImageLayout({
+	title,
+	children,
+	frontmatter,
+	rawChildren,
+}: LayoutProps<ImageFrontmatter>) {
+	const { image, darkImage, alt = "" } = frontmatter;
+	const hasImage = Boolean(image || darkImage);
+	const hasCaption = Boolean(children);
+
+	return (
+		<DefaultLayout
+			title={title}
+			frontmatter={frontmatter}
+			rawChildren={rawChildren}
+		>
+			{/*
+        Semantic <figure> groups the image and its optional caption.
+        h-full makes it consume all remaining vertical space so the
+        image stage is as large as possible.
+      */}
+			<figure className="h-full flex flex-col gap-11 m-0 p-0">
+				{/* ── Image stage ─────────────────────────────────────────────── */}
+				<div className="flex-1 min-h-0 flex flex-col items-center justify-center">
+					{hasImage ? (
+						<ImageFrame>
+							<ColorModeImage
+								src={image || imagePlaceholder}
+								darkSrc={darkImage}
+								alt={alt}
+								className="max-h-full max-w-full object-contain"
+							/>
+						</ImageFrame>
+					) : (
+						<PlaceholderBox />
+					)}
+				</div>
+
+				{/* ── Caption ─────────────────────────────────────────────────── */}
+				{hasCaption && (
+					<figcaption className="flex-shrink-0 border-l-4 border-accent pl-11 text-[length:var(--honeydeck-font-size-small)] text-surface-foreground italic leading-snug">
+						{children}
+					</figcaption>
+				)}
+			</figure>
+		</DefaultLayout>
+	);
+}
+
+export const demo: LayoutDemo<ImageFrontmatter> = {
+	mdx: `---
+layout: Image
+image: ""
+darkImage: ""
+alt: Architecture diagram
+---
+
+# System Architecture
+
+Our distributed system in production.`,
+};

package/src/layouts/bee/ImageLeft.tsx

@@ -0,0 +1,27 @@
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import type { DarkModeImageFrontmatter } from "../ColorModeImage.tsx";
+import { DefaultImageSideLayout } from "./ImageSide.tsx";
+
+type ImageLeftFrontmatter = DarkModeImageFrontmatter & {
+	/** Accessible text for the image. */
+	alt?: string;
+};
+
+export default function ImageLeftLayout(
+	props: LayoutProps<ImageLeftFrontmatter>,
+) {
+	return <DefaultImageSideLayout {...props} side="left" />;
+}
+
+export const demo: LayoutDemo<ImageLeftFrontmatter> = {
+	mdx: `---
+layout: ImageLeft
+image: ""
+darkImage: ""
+alt: Product detail
+---
+
+# Product Detail
+
+Use the body area for supporting context, bullets, or a short narrative beside the image.`,
+};

package/src/layouts/bee/ImageRight.tsx

@@ -0,0 +1,27 @@
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import type { DarkModeImageFrontmatter } from "../ColorModeImage.tsx";
+import { DefaultImageSideLayout } from "./ImageSide.tsx";
+
+type ImageRightFrontmatter = DarkModeImageFrontmatter & {
+	/** Accessible text for the image. */
+	alt?: string;
+};
+
+export default function ImageRightLayout(
+	props: LayoutProps<ImageRightFrontmatter>,
+) {
+	return <DefaultImageSideLayout {...props} side="right" />;
+}
+
+export const demo: LayoutDemo<ImageRightFrontmatter> = {
+	mdx: `---
+layout: ImageRight
+image: ""
+darkImage: ""
+alt: Launch moment
+---
+
+# Launch Moment
+
+Pair a prominent image with the same heading treatment used by the default content slides.`,
+};

package/src/layouts/bee/ImageSide.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react";
+import type { LayoutProps } from "../../runtime/types.ts";
+import {
+	ColorModeImage,
+	type DarkModeImageFrontmatter,
+} from "../ColorModeImage.tsx";
+import {
+	verticalImagePlaceholder,
+	verticalImagePlaceholderDark,
+} from "../placeholders.ts";
+import { SlideFrame } from "../SlideFrame.tsx";
+import { hasTitle } from "../utils.ts";
+
+type ImageSideFrontmatter = DarkModeImageFrontmatter & {
+	alt?: string;
+};
+
+type ImageSide = "left" | "right";
+
+type ImageSideLayoutProps = LayoutProps<ImageSideFrontmatter> & {
+	side: ImageSide;
+};
+
+function DefaultSideImageFrame({
+	image,
+	darkImage,
+	alt,
+}: {
+	image?: string;
+	darkImage?: string;
+	alt: string;
+}) {
+	const hasImage = Boolean(image || darkImage);
+
+	return (
+		<div className="h-full min-h-0 rounded-honeydeck bg-surface p-3 shadow-2xl ring-1 ring-border">
+			<ColorModeImage
+				src={image || verticalImagePlaceholder}
+				darkSrc={
+					darkImage || (hasImage ? undefined : verticalImagePlaceholderDark)
+				}
+				alt={hasImage ? alt : ""}
+				className="size-full rounded-honeydeck object-cover"
+				aria-hidden={hasImage ? undefined : "true"}
+			/>
+		</div>
+	);
+}
+
+function DefaultSideContent({
+	title,
+	children,
+}: {
+	title: ReactNode | null;
+	children: ReactNode;
+}) {
+	return (
+		<div className="flex min-h-0 flex-col overflow-hidden">
+			{hasTitle(title) && (
+				<header className="mb-8 flex-shrink-0">
+					<h1 className="font-heading font-bold text-[length:var(--honeydeck-font-size-h2)] leading-tight text-primary">
+						{title}
+					</h1>
+					<div
+						className="mt-4 h-2 w-28 rounded-full bg-accent"
+						aria-hidden="true"
+					/>
+				</header>
+			)}
+
+			<div className="min-h-0 flex-1 overflow-hidden">{children}</div>
+		</div>
+	);
+}
+
+export function DefaultImageSideLayout({
+	title,
+	children,
+	frontmatter,
+	side,
+}: ImageSideLayoutProps) {
+	const { image, darkImage, alt = "" } = frontmatter;
+	const imagePane = (
+		<DefaultSideImageFrame image={image} darkImage={darkImage} alt={alt} />
+	);
+	const contentPane = (
+		<DefaultSideContent title={title}>{children}</DefaultSideContent>
+	);
+
+	return (
+		<SlideFrame>
+			<div className="grid h-full min-h-0 grid-cols-2 gap-12">
+				{side === "left" ? (
+					<>
+						{imagePane}
+						{contentPane}
+					</>
+				) : (
+					<>
+						{contentPane}
+						{imagePane}
+					</>
+				)}
+			</div>
+		</SlideFrame>
+	);
+}

package/src/layouts/bee/Section.tsx

@@ -0,0 +1,40 @@
+/**
+ * Section layout — big centered heading with primary background.
+ *
+ * Used as a visual divider between chapters/sections. The title is the
+ * only required content; body children appear as a subtitle below.
+ */
+
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import { SlideFrame } from "../SlideFrame.tsx";
+import { hasTitle } from "../utils.ts";
+
+export default function SectionLayout({ title, children }: LayoutProps) {
+	return (
+		<SlideFrame className="items-center justify-center bg-primary dark:bg-primary/75 text-primary-foreground text-center">
+			{/* Big centered section title */}
+			{hasTitle(title) && (
+				<h1 className="font-heading font-black text-[length:var(--honeydeck-font-size-display)] leading-none mb-6 tracking-tight">
+					{title}
+				</h1>
+			)}
+
+			{/* Optional subtitle / body */}
+			{children && (
+				<div className="text-[length:var(--honeydeck-font-size-body)] text-primary-foreground/70 max-w-3xl font-light">
+					{children}
+				</div>
+			)}
+		</SlideFrame>
+	);
+}
+
+export const demo: LayoutDemo = {
+	mdx: `---
+layout: Section
+---
+
+# Section Title
+
+An optional section subtitle or brief description.`,
+};

package/src/layouts/bee/TwoCol.tsx

@@ -0,0 +1,108 @@
+/**
+ * TwoCol layout — two equal columns side by side.
+ *
+ * Exports `Left` and `Right` slot components that users place in their
+ * MDX to control which content appears in which column.
+ *
+ * @example
+ * ```mdx
+ * ---
+ * layout: TwoCol
+ * ---
+ *
+ * import { Left, Right } from '@honeydeck/honeydeck/layouts/bee/TwoCol'
+ *
+ * # My Two-Column Slide
+ *
+ * <Left>
+ * ## Pros
+ * - Fast
+ * - Simple
+ * </Left>
+ *
+ * <Right>
+ * ## Cons
+ * - Limited
+ * </Right>
+ * ```
+ */
+
+import type { ReactNode } from "react";
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import DefaultLayout from "./Default.tsx";
+
+// ---------------------------------------------------------------------------
+// Slot components — thin wrappers that emit data-honeydeck-slot attributes.
+// Tailwind utility classes position them into the correct grid column.
+// ---------------------------------------------------------------------------
+
+/** Slot for the left column */
+export function Left({ children }: { children?: ReactNode }) {
+	return (
+		<div data-honeydeck-slot="left" className="col-start-1 overflow-hidden">
+			{children}
+		</div>
+	);
+}
+
+/** Slot for the right column */
+export function Right({ children }: { children?: ReactNode }) {
+	return (
+		<div data-honeydeck-slot="right" className="col-start-2 overflow-hidden">
+			{children}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Layout component
+// ---------------------------------------------------------------------------
+
+/**
+ * TwoCol layout — renders children in a two-column CSS grid.
+ *
+ * The `<Left>` and `<Right>` slot components render divs with
+ * `data-honeydeck-slot="left|right"` attributes and Tailwind column utilities.
+ * This works because MDX components return fragments — the slot divs become
+ * direct DOM children of the grid container without any intermediate wrapper.
+ */
+export default function TwoColLayout({
+	title,
+	children,
+	frontmatter,
+	rawChildren,
+}: LayoutProps) {
+	return (
+		<DefaultLayout
+			title={title}
+			frontmatter={frontmatter}
+			rawChildren={rawChildren}
+		>
+			{/* Two columns — slot positioning handled by Tailwind utilities */}
+			<div className="grid h-full grid-cols-2 gap-12">{children}</div>
+		</DefaultLayout>
+	);
+}
+
+export const demo: LayoutDemo = {
+	mdx: `---
+layout: TwoCol
+---
+
+import { Left, Right } from '@honeydeck/honeydeck/layouts/bee/TwoCol'
+
+# Pros vs Cons
+
+<Left>
+## Pros
+
+- Fast
+- Simple
+</Left>
+
+<Right>
+## Cons
+
+- Limited
+</Right>`,
+};

package/src/layouts/bee/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Bee Honeydeck layout map.
+ *
+ * This keeps the original playful Honeydeck layouts available after the default
+ * `@honeydeck/honeydeck/layouts` export moved to the clean layout set.
+ */
+
+import type { LayoutMap } from "../../runtime/types.ts";
+import BlankLayout from "./Blank.tsx";
+import CoverLayout from "./Cover.tsx";
+import DefaultLayout from "./Default.tsx";
+import ImageLayout from "./Image/Image.tsx";
+import ImageLeftLayout from "./ImageLeft.tsx";
+import ImageRightLayout from "./ImageRight.tsx";
+import SectionLayout from "./Section.tsx";
+import TwoColLayout from "./TwoCol.tsx";
+
+const beeLayouts: LayoutMap = {
+	Default: DefaultLayout,
+	Blank: BlankLayout,
+	Cover: CoverLayout,
+	Section: SectionLayout,
+	TwoCol: TwoColLayout,
+	Image: ImageLayout,
+	ImageLeft: ImageLeftLayout,
+	ImageRight: ImageRightLayout,
+};
+
+export default beeLayouts;
+
+export {
+	BlankLayout,
+	CoverLayout,
+	DefaultLayout,
+	ImageLayout,
+	ImageLeftLayout,
+	ImageRightLayout,
+	SectionLayout,
+	TwoColLayout,
+};

package/src/layouts/clean/Blank.tsx

@@ -0,0 +1,12 @@
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import { SlideFrame } from "../SlideFrame.tsx";
+
+export default function CleanBlankLayout(props: LayoutProps) {
+	return <SlideFrame>{props.children}</SlideFrame>;
+}
+
+export const demo: LayoutDemo = {
+	mdx: `---
+layout: Blank
+---`,
+};

package/src/layouts/clean/Cover.tsx

@@ -0,0 +1,58 @@
+/**
+ * Clean Cover layout — centered title, body copy, and simple metadata.
+ */
+
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import { SlideFrame } from "../SlideFrame.tsx";
+import { hasTitle } from "../utils.ts";
+
+type CoverFrontmatter = {
+	/** Speaker or organization shown below the cover body. */
+	author?: string;
+	/** Date or event label shown below the cover body. */
+	date?: string;
+};
+
+export default function CleanCoverLayout({
+	title,
+	children,
+	frontmatter,
+}: LayoutProps<CoverFrontmatter>) {
+	const { author, date } = frontmatter;
+
+	return (
+		<SlideFrame className="items-center justify-center text-center">
+			{hasTitle(title) && (
+				<h1 className="mb-10 font-heading text-[length:var(--honeydeck-font-size-h1)] font-semibold leading-tight text-foreground">
+					{title}
+				</h1>
+			)}
+
+			{children && (
+				<div className="mb-12 max-w-4xl text-[length:var(--honeydeck-font-size-body)] leading-snug text-surface-foreground">
+					{children}
+				</div>
+			)}
+
+			{(author || date) && (
+				<div className="flex items-center gap-10 border-t border-border pt-5 text-[length:var(--honeydeck-font-size-small)] text-surface-foreground">
+					{author && <span>{author}</span>}
+					{author && date && <span aria-hidden="true">/</span>}
+					{date && <span>{date}</span>}
+				</div>
+			)}
+		</SlideFrame>
+	);
+}
+
+export const demo: LayoutDemo<CoverFrontmatter> = {
+	mdx: `---
+layout: Cover
+author: The honeydeck team
+date: 2026
+---
+
+# Welcome to My Talk
+
+A modern slide framework.`,
+};

package/src/layouts/clean/Default.tsx

@@ -0,0 +1,33 @@
+/**
+ * Clean Default layout — plain title and body.
+ */
+
+import type { LayoutDemo, LayoutProps } from "../../runtime/types.ts";
+import { SlideFrame } from "../SlideFrame.tsx";
+import { hasTitle } from "../utils.ts";
+
+export default function CleanDefaultLayout({ title, children }: LayoutProps) {
+	return (
+		<SlideFrame>
+			{hasTitle(title) && (
+				<header className="mb-8 flex-shrink-0">
+					<h1 className="font-heading text-[length:var(--honeydeck-font-size-h2)] font-semibold leading-tight text-foreground">
+						{title}
+					</h1>
+				</header>
+			)}
+
+			<div className="min-h-0 flex-1 overflow-hidden">{children}</div>
+		</SlideFrame>
+	);
+}
+
+export const demo: LayoutDemo = {
+	mdx: `---
+layout: Default
+---
+
+# Default Layout
+
+Body content flows naturally below the title.`,
+};