@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/code-connect/toggle.figma.ts

@@ -0,0 +1,356 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4524-265
+// source=platforms/wordpress/theme/inc/components/toggle.php
+// component=baseline_toggle()
+// WordPress Code Connect template (label "WordPress"): Toggle has no editor block (user, 2026-10-06); templates and
+// patterns call the PHP helper, which emits React's markup.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// BASELINE_ICONS_START (generated by tokens/icons.mjs from tokens/icons/vocabulary.json; do not edit)
+const BASELINE_SYSTEM_ICONS: Record<string, string> = {
+  "brands/amazon": "brand-amazon",
+  "brands/americanexpress": "brand-americanexpress",
+  "brands/apple": "brand-apple",
+  "brands/applepay": "brand-applepay",
+  "brands/bluesky": "brand-bluesky",
+  "brands/discord": "brand-discord",
+  "brands/facebook": "brand-facebook",
+  "brands/github": "brand-github",
+  "brands/google": "brand-google",
+  "brands/googlepay": "brand-googlepay",
+  "brands/instagram": "brand-instagram",
+  "brands/linkedin": "brand-linkedin",
+  "brands/mastercard": "brand-mastercard",
+  "brands/paypal": "brand-paypal",
+  "brands/pinterest": "brand-pinterest",
+  "brands/reddit": "brand-reddit",
+  "brands/shopify": "brand-shopify",
+  "brands/snapchat": "brand-snapchat",
+  "brands/spotify": "brand-spotify",
+  "brands/telegram": "brand-telegram",
+  "brands/threads": "brand-threads",
+  "brands/tiktok": "brand-tiktok",
+  "brands/tripadvisor": "brand-tripadvisor",
+  "brands/vimeo": "brand-vimeo",
+  "brands/visa": "brand-visa",
+  "brands/whatsapp": "brand-whatsapp",
+  "brands/wordpress": "brand-wordpress",
+  "brands/x": "brand-x",
+  "brands/yelp": "brand-yelp",
+  "brands/youtube": "brand-youtube",
+  "lucide/arrow-down": "arrow-down",
+  "lucide/arrow-left": "arrow-left",
+  "lucide/arrow-right": "arrow-right",
+  "lucide/arrow-up": "arrow-up",
+  "lucide/arrow-up-down": "arrow-up-down",
+  "lucide/calendar": "calendar",
+  "lucide/check": "check",
+  "lucide/chevron-down": "chevron-down",
+  "lucide/chevron-left": "chevron-left",
+  "lucide/chevron-right": "chevron-right",
+  "lucide/chevron-up": "chevron-up",
+  "lucide/chevrons-left": "chevrons-left",
+  "lucide/chevrons-right": "chevrons-right",
+  "lucide/chevrons-up-down": "chevrons-up-down",
+  "lucide/circle": "circle",
+  "lucide/circle-alert": "error",
+  "lucide/circle-check": "success",
+  "lucide/circle-x": "close-circle",
+  "lucide/clock": "clock",
+  "lucide/copy": "copy",
+  "lucide/download": "download",
+  "lucide/ellipsis": "more-horizontal",
+  "lucide/ellipsis-vertical": "more-vertical",
+  "lucide/external-link": "external-link",
+  "lucide/eye": "eye",
+  "lucide/eye-off": "eye-off",
+  "lucide/file": "file",
+  "lucide/funnel": "filter",
+  "lucide/grip-vertical": "grip-vertical",
+  "lucide/house": "home",
+  "lucide/image": "image",
+  "lucide/info": "info",
+  "lucide/link": "link",
+  "lucide/loader-circle": "loader",
+  "lucide/lock": "lock",
+  "lucide/mail": "mail",
+  "lucide/menu": "menu",
+  "lucide/minus": "minus",
+  "lucide/panel-left": "sidebar",
+  "lucide/pause": "pause",
+  "lucide/pencil": "edit",
+  "lucide/phone": "phone",
+  "lucide/play": "play",
+  "lucide/plus": "plus",
+  "lucide/refresh-cw": "refresh",
+  "lucide/search": "search",
+  "lucide/settings": "settings",
+  "lucide/share-2": "share",
+  "lucide/shopping-cart": "cart",
+  "lucide/star": "star",
+  "lucide/trash-2": "trash",
+  "lucide/triangle-alert": "warning",
+  "lucide/upload": "upload",
+  "lucide/user": "user",
+  "lucide/x": "close",
+  "material-symbols/add": "plus",
+  "material-symbols/arrow-back": "arrow-left",
+  "material-symbols/arrow-downward": "arrow-down",
+  "material-symbols/arrow-forward": "arrow-right",
+  "material-symbols/arrow-upward": "arrow-up",
+  "material-symbols/calendar-today": "calendar",
+  "material-symbols/call": "phone",
+  "material-symbols/cancel": "close-circle",
+  "material-symbols/check": "check",
+  "material-symbols/check-circle": "success",
+  "material-symbols/circle": "circle",
+  "material-symbols/close": "close",
+  "material-symbols/content-copy": "copy",
+  "material-symbols/delete": "trash",
+  "material-symbols/description": "file",
+  "material-symbols/download": "download",
+  "material-symbols/drag-indicator": "grip-vertical",
+  "material-symbols/edit": "edit",
+  "material-symbols/error": "error",
+  "material-symbols/filter-list": "filter",
+  "material-symbols/home": "home",
+  "material-symbols/image": "image",
+  "material-symbols/info": "info",
+  "material-symbols/keyboard-arrow-down": "chevron-down",
+  "material-symbols/keyboard-arrow-left": "chevron-left",
+  "material-symbols/keyboard-arrow-right": "chevron-right",
+  "material-symbols/keyboard-arrow-up": "chevron-up",
+  "material-symbols/keyboard-double-arrow-left": "chevrons-left",
+  "material-symbols/keyboard-double-arrow-right": "chevrons-right",
+  "material-symbols/link": "link",
+  "material-symbols/lock": "lock",
+  "material-symbols/mail": "mail",
+  "material-symbols/menu": "menu",
+  "material-symbols/more-horiz": "more-horizontal",
+  "material-symbols/more-vert": "more-vertical",
+  "material-symbols/open-in-new": "external-link",
+  "material-symbols/pause": "pause",
+  "material-symbols/person": "user",
+  "material-symbols/play-arrow": "play",
+  "material-symbols/progress-activity": "loader",
+  "material-symbols/refresh": "refresh",
+  "material-symbols/remove": "minus",
+  "material-symbols/schedule": "clock",
+  "material-symbols/search": "search",
+  "material-symbols/settings": "settings",
+  "material-symbols/share": "share",
+  "material-symbols/shopping-cart": "cart",
+  "material-symbols/star": "star",
+  "material-symbols/swap-vert": "arrow-up-down",
+  "material-symbols/unfold-more": "chevrons-up-down",
+  "material-symbols/upload": "upload",
+  "material-symbols/view-sidebar": "sidebar",
+  "material-symbols/visibility": "eye",
+  "material-symbols/visibility-off": "eye-off",
+  "material-symbols/warning": "warning",
+  "phosphor/arrow-down": "arrow-down",
+  "phosphor/arrow-left": "arrow-left",
+  "phosphor/arrow-right": "arrow-right",
+  "phosphor/arrow-square-out": "external-link",
+  "phosphor/arrow-up": "arrow-up",
+  "phosphor/arrows-clockwise": "refresh",
+  "phosphor/arrows-down-up": "arrow-up-down",
+  "phosphor/calendar": "calendar",
+  "phosphor/caret-double-left": "chevrons-left",
+  "phosphor/caret-double-right": "chevrons-right",
+  "phosphor/caret-down": "chevron-down",
+  "phosphor/caret-left": "chevron-left",
+  "phosphor/caret-right": "chevron-right",
+  "phosphor/caret-up": "chevron-up",
+  "phosphor/caret-up-down": "chevrons-up-down",
+  "phosphor/check": "check",
+  "phosphor/check-circle": "success",
+  "phosphor/circle": "circle",
+  "phosphor/circle-notch": "loader",
+  "phosphor/clock": "clock",
+  "phosphor/copy": "copy",
+  "phosphor/dots-six-vertical": "grip-vertical",
+  "phosphor/dots-three": "more-horizontal",
+  "phosphor/dots-three-vertical": "more-vertical",
+  "phosphor/download-simple": "download",
+  "phosphor/envelope": "mail",
+  "phosphor/eye": "eye",
+  "phosphor/eye-slash": "eye-off",
+  "phosphor/file": "file",
+  "phosphor/funnel": "filter",
+  "phosphor/gear": "settings",
+  "phosphor/house": "home",
+  "phosphor/image": "image",
+  "phosphor/info": "info",
+  "phosphor/link": "link",
+  "phosphor/list": "menu",
+  "phosphor/lock": "lock",
+  "phosphor/magnifying-glass": "search",
+  "phosphor/minus": "minus",
+  "phosphor/pause": "pause",
+  "phosphor/pencil-simple": "edit",
+  "phosphor/phone": "phone",
+  "phosphor/play": "play",
+  "phosphor/plus": "plus",
+  "phosphor/share-network": "share",
+  "phosphor/shopping-cart": "cart",
+  "phosphor/sidebar": "sidebar",
+  "phosphor/star": "star",
+  "phosphor/trash": "trash",
+  "phosphor/upload-simple": "upload",
+  "phosphor/user": "user",
+  "phosphor/warning": "warning",
+  "phosphor/warning-circle": "error",
+  "phosphor/x": "close",
+  "phosphor/x-circle": "close-circle",
+  "remix/add": "plus",
+  "remix/alert": "warning",
+  "remix/arrow-down": "arrow-down",
+  "remix/arrow-down-s": "chevron-down",
+  "remix/arrow-left": "arrow-left",
+  "remix/arrow-left-double": "chevrons-left",
+  "remix/arrow-left-s": "chevron-left",
+  "remix/arrow-right": "arrow-right",
+  "remix/arrow-right-double": "chevrons-right",
+  "remix/arrow-right-s": "chevron-right",
+  "remix/arrow-up": "arrow-up",
+  "remix/arrow-up-down": "arrow-up-down",
+  "remix/arrow-up-s": "chevron-up",
+  "remix/calendar": "calendar",
+  "remix/check": "check",
+  "remix/checkbox-blank-circle": "circle",
+  "remix/checkbox-circle": "success",
+  "remix/close": "close",
+  "remix/close-circle": "close-circle",
+  "remix/delete-bin": "trash",
+  "remix/download-2": "download",
+  "remix/draggable": "grip-vertical",
+  "remix/error-warning": "error",
+  "remix/expand-up-down": "chevrons-up-down",
+  "remix/external-link": "external-link",
+  "remix/eye": "eye",
+  "remix/eye-off": "eye-off",
+  "remix/file": "file",
+  "remix/file-copy": "copy",
+  "remix/filter": "filter",
+  "remix/home": "home",
+  "remix/image": "image",
+  "remix/information": "info",
+  "remix/layout-left": "sidebar",
+  "remix/link": "link",
+  "remix/loader-4": "loader",
+  "remix/lock": "lock",
+  "remix/mail": "mail",
+  "remix/menu": "menu",
+  "remix/more": "more-horizontal",
+  "remix/more-2": "more-vertical",
+  "remix/pause": "pause",
+  "remix/pencil": "edit",
+  "remix/phone": "phone",
+  "remix/play": "play",
+  "remix/refresh": "refresh",
+  "remix/search": "search",
+  "remix/settings-3": "settings",
+  "remix/share": "share",
+  "remix/shopping-cart": "cart",
+  "remix/star": "star",
+  "remix/subtract": "minus",
+  "remix/time": "clock",
+  "remix/upload-2": "upload",
+  "remix/user": "user",
+  "tabler/alert-circle": "error",
+  "tabler/alert-triangle": "warning",
+  "tabler/arrow-down": "arrow-down",
+  "tabler/arrow-left": "arrow-left",
+  "tabler/arrow-right": "arrow-right",
+  "tabler/arrow-up": "arrow-up",
+  "tabler/arrows-sort": "arrow-up-down",
+  "tabler/calendar": "calendar",
+  "tabler/check": "check",
+  "tabler/chevron-down": "chevron-down",
+  "tabler/chevron-left": "chevron-left",
+  "tabler/chevron-right": "chevron-right",
+  "tabler/chevron-up": "chevron-up",
+  "tabler/chevrons-left": "chevrons-left",
+  "tabler/chevrons-right": "chevrons-right",
+  "tabler/circle": "circle",
+  "tabler/circle-check": "success",
+  "tabler/circle-x": "close-circle",
+  "tabler/clock": "clock",
+  "tabler/copy": "copy",
+  "tabler/dots": "more-horizontal",
+  "tabler/dots-vertical": "more-vertical",
+  "tabler/download": "download",
+  "tabler/external-link": "external-link",
+  "tabler/eye": "eye",
+  "tabler/eye-off": "eye-off",
+  "tabler/file": "file",
+  "tabler/filter": "filter",
+  "tabler/grip-vertical": "grip-vertical",
+  "tabler/home": "home",
+  "tabler/info-circle": "info",
+  "tabler/layout-sidebar": "sidebar",
+  "tabler/link": "link",
+  "tabler/loader-2": "loader",
+  "tabler/lock": "lock",
+  "tabler/mail": "mail",
+  "tabler/menu-2": "menu",
+  "tabler/minus": "minus",
+  "tabler/pencil": "edit",
+  "tabler/phone": "phone",
+  "tabler/photo": "image",
+  "tabler/player-pause": "pause",
+  "tabler/player-play": "play",
+  "tabler/plus": "plus",
+  "tabler/refresh": "refresh",
+  "tabler/search": "search",
+  "tabler/selector": "chevrons-up-down",
+  "tabler/settings": "settings",
+  "tabler/share": "share",
+  "tabler/shopping-cart": "cart",
+  "tabler/star": "star",
+  "tabler/trash": "trash",
+  "tabler/upload": "upload",
+  "tabler/user": "user",
+  "tabler/x": "close"
+};
+// BASELINE_ICONS_END
+
+// A swapped glyph is named "<Set>/<icon>"; normalise to lower-kebab and look it up in the vocabulary (ADR-0020 A).
+const kebab = (s: string) => s.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+function iconName(layerName: string): string {
+  const placeholder = instance.findInstance(layerName, { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return "";
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return "";
+  const slash = glyph.name.indexOf("/");
+  if (slash < 0) return kebab(glyph.name);
+  const key = kebab(glyph.name.slice(0, slash)) + "/" + kebab(glyph.name.slice(slash + 1));
+  return BASELINE_SYSTEM_ICONS[key] ?? kebab(glyph.name.slice(slash + 1));
+}
+const php = (s: string) => `'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+
+const label = instance.getString("Label");
+const variant = instance.getEnum("Variant", { default: "default", outline: "outline" });
+const size = instance.getEnum("Size", { sm: "sm", md: "md", lg: "lg" });
+// hover is a Figma-only preview; pressed and disabled are the input's state
+const state = instance.getEnum("State", { default: "default", hover: "default", pressed: "pressed", disabled: "disabled" });
+// Icon (none | start | end | only, 2026-10-06): only is icon-only, so the label becomes the accessible name
+const iconSide = instance.getEnum("Icon", { none: "none", start: "start", end: "end", only: "only" });
+const icon = iconSide !== "none" ? iconName("Icon") : "";
+
+const args = [
+  iconSide === "only" ? `'aria_label' => ${php(label)}` : `'label' => ${php(label)}`,
+  icon ? `'icon' => '${icon}'` : "",
+  iconSide === "end" ? `'icon_position' => 'end'` : "",
+  variant !== "default" ? `'variant' => '${variant}'` : "",
+  size !== "md" ? `'size' => '${size}'` : "",
+  state === "pressed" ? `'pressed' => true` : "",
+  state === "disabled" ? `'disabled' => true` : "",
+].filter(Boolean);
+
+export default {
+  example: figma.code`<?php echo baseline_toggle([${args.join(", ")}]); ?>`,
+  id: "wp-toggle",
+  metadata: { nestable: true },
+};

package/templates/wordpress/theme/composer.json

@@ -0,0 +1,7 @@
+{
+  "name": "goldencomm/baseline-theme",
+  "description": "Baseline design system WordPress theme (hybrid theme with ACF Blocks).",
+  "type": "wordpress-theme",
+  "license": "proprietary",
+  "require": { "php": ">=8.2", "composer/installers": "^2.0" }
+}

package/templates/wordpress/theme/footer.php

@@ -0,0 +1,4 @@
+<?php declare(strict_types=1); ?>
+<?php wp_footer(); ?>
+</body>
+</html>

package/templates/wordpress/theme/functions.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * Baseline theme bootstrap.
+ *
+ * Hybrid theme: classic templates + theme.json + core blocks styled by Baseline (ADR-0018); ACF Blocks only where
+ * core has no comparable block (ADR-0002, ADR-0008).
+ * Tailwind guardrails: front-end gets assets/app.css (with preflight); the block editor gets
+ * assets/editor.css (theme + utilities, NO preflight) so editor chrome is never reset.
+ */
+
+declare(strict_types=1);
+
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+define('BASELINE_VERSION', '0.1.0');
+define('BASELINE_DIR', get_template_directory());
+define('BASELINE_URI', get_template_directory_uri());
+
+require_once BASELINE_DIR . '/inc/blocks.php';
+require_once BASELINE_DIR . '/inc/acf.php';
+require_once BASELINE_DIR . '/inc/core-button.php';
+require_once BASELINE_DIR . '/inc/core-navigation.php';
+require_once BASELINE_DIR . '/inc/carousel.php';
+require_once BASELINE_DIR . '/inc/core-card.php';
+require_once BASELINE_DIR . '/inc/core-layout.php';
+require_once BASELINE_DIR . '/inc/header.php';
+require_once BASELINE_DIR . '/inc/sections.php';
+require_once BASELINE_DIR . '/inc/core-pagination.php';
+require_once BASELINE_DIR . '/inc/looks.generated.php';
+require_once BASELINE_DIR . '/inc/media.php';
+require_once BASELINE_DIR . '/inc/icons.php';
+require_once BASELINE_DIR . '/inc/components/button.php';
+require_once BASELINE_DIR . '/inc/components/badge.php';
+require_once BASELINE_DIR . '/inc/components/avatar.php';
+require_once BASELINE_DIR . '/inc/components/alert.php';
+require_once BASELINE_DIR . '/inc/components/item.php';
+require_once BASELINE_DIR . '/inc/components/dialog.php';
+require_once BASELINE_DIR . '/inc/components/sheet.php';
+require_once BASELINE_DIR . '/inc/components/popover.php';
+require_once BASELINE_DIR . '/inc/components/toggle.php';
+
+add_action('after_setup_theme', static function (): void {
+    add_theme_support('title-tag');
+    add_theme_support('post-thumbnails');
+    add_theme_support('html5', ['search-form', 'gallery', 'caption', 'style', 'script']);
+    add_theme_support('editor-styles');
+    // the header template part (parts/header.html) is editable in the Site Editor (B5, components/header/spec.md)
+    add_theme_support('block-template-parts');
+    // editor.css is enqueued via enqueue_block_editor_assets so it is scanned once, not duplicated per iframe
+    register_nav_menus(['primary' => __('Primary', 'baseline')]);
+});
+
+/** Front-end: tokens + compiled Tailwind (preflight included). */
+add_action('wp_enqueue_scripts', static function (): void {
+    $ver = static fn(string $rel): string => (string) filemtime(BASELINE_DIR . $rel);
+    wp_enqueue_style('baseline-app', BASELINE_URI . '/assets/app.css', [], $ver('/assets/app.css'));
+});
+
+/**
+ * Editor: theme + utilities only, no preflight. Blocks are apiVersion 3, so previews render inside the editor
+ * iframe; only `enqueue_block_assets` reaches that document (`enqueue_block_editor_assets` styles the chrome).
+ */
+add_action('enqueue_block_assets', static function (): void {
+    if (!is_admin()) {
+        return; // front end gets app.css via wp_enqueue_scripts
+    }
+    $ver = (string) filemtime(BASELINE_DIR . '/assets/editor.css');
+    wp_enqueue_style('baseline-editor', BASELINE_URI . '/assets/editor.css', [], $ver);
+});
+/** The Icon panel (inspector) lives in the admin chrome, outside the canvas iframe: its styles ship there as well. */
+add_action('enqueue_block_editor_assets', static function (): void {
+    $ver = (string) filemtime(BASELINE_DIR . '/assets/editor.css');
+    wp_enqueue_style('baseline-editor-chrome', BASELINE_URI . '/assets/editor.css', [], $ver);
+});
+
+/**
+ * Scheme context: any element may carry data-scheme="scheme-2|error|success|warning" (ADR-0009).
+ * Helper for templates and blocks; returns an attribute string or ''.
+ */
+function baseline_scheme_attr(?string $scheme): string
+{
+    $allowed = ['scheme-2', 'error', 'success', 'warning'];
+    return ($scheme && in_array($scheme, $allowed, true)) ? ' data-scheme="' . esc_attr($scheme) . '"' : '';
+}

package/templates/wordpress/theme/header.php

@@ -0,0 +1,17 @@
+<?php declare(strict_types=1); ?>
+<!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+    <meta charset="<?php bloginfo('charset'); ?>">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <?php wp_head(); ?>
+</head>
+<body <?php body_class('bg-background text-foreground antialiased'); ?>>
+<?php wp_body_open(); ?>
+<header class="site-header">
+    <?php
+    // B5 (spec: components/header/spec.md): the header is the `header` template part (parts/header.html), edited in the
+    // Site Editor; the header-inline and header-stacked patterns are the two layouts to swap in (inc/header.php).
+    block_template_part('header');
+    ?>
+</header>

package/templates/wordpress/theme/inc/acf.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * ACF Local JSON: field groups live in the theme (acf-json/) and are versioned with the blocks they belong to.
+ * Editing a group in the ACF UI writes back here; commit the result.
+ */
+
+declare(strict_types=1);
+
+add_filter('acf/settings/save_json', static fn(): string => BASELINE_DIR . '/acf-json');
+add_filter('acf/settings/load_json', static function (array $paths): array {
+    $paths[] = BASELINE_DIR . '/acf-json';
+    return $paths;
+});

package/templates/wordpress/theme/inc/blocks.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Registers every ACF block under blocks/<name>/block.json.
+ *
+ * Core blocks first (ADR-0018): a Baseline component ships as an ACF block only when WordPress has no comparable
+ * core block. Button is core/button (inc/core-button.php). Blocks here are apiVersion 3 (iframed editor) and
+ * render through render.php (ADR-0008).
+ */
+
+declare(strict_types=1);
+
+/**
+ * wptexturize runs on post content after blocks render (do_blocks at 9, wptexturize at 10) and reads a Tailwind bracket
+ * class such as `[&_a]:underline` as a shortcode, and a `>` inside one (`group-has-[>svg]`) as the end of the tag; the rest
+ * of the attribute is then treated as text and its closing quote "smartened" into &#8221;, the
+ * tag breaks, and whatever follows disappears (found 2026-10-01: every acf/alert title vanished on the kitchen-sink
+ * page). Encoding the brackets inside class attributes as character references hides them from texturize; the browser
+ * decodes them back, so Tailwind's selectors still match. Applied to the theme's ACF blocks, the only blocks whose
+ * markup carries these classes.
+ */
+add_filter('render_block', static function (string $content, array $block): string {
+    if (!str_starts_with((string) ($block['blockName'] ?? ''), 'acf/') || !str_contains($content, '[')) {
+        return $content;
+    }
+    $out = preg_replace_callback(
+        '/\bclass="([^"]*)"/',
+        static fn (array $m): string => 'class="' . str_replace(['[', ']', '<', '>'], ['&#91;', '&#93;', '&lt;', '&gt;'], $m[1]) . '"',
+        $content
+    );
+    return is_string($out) ? $out : $content;
+}, 10, 2);
+
+add_action('init', static function (): void {
+    if (!function_exists('acf_register_block_type')) {
+        // ACF Pro is required for ACF Blocks; without it the theme still boots (Playground CI smoke).
+        return;
+    }
+    foreach (glob(BASELINE_DIR . '/blocks/*/block.json') ?: [] as $json) {
+        register_block_type(dirname($json));
+    }
+});

package/templates/wordpress/theme/inc/carousel.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Carousel on WordPress (spec: components/carousel/spec.md): the acf/carousel block's viewScript. assets/js/carousel.js
+ * is built by `npm run build` (build-js.mjs) from src/carousel.js with this theme's own embla-carousel, so a project
+ * scaffolded from the theme updates Embla with npm install + npm run build. Registered early so block.json's
+ * "viewScript": "baseline-carousel" finds it; WordPress enqueues it only on pages with a carousel.
+ */
+
+declare(strict_types=1);
+
+add_action('init', static function (): void {
+    wp_register_script(
+        'baseline-carousel',
+        BASELINE_URI . '/assets/js/carousel.js',
+        [],
+        (string) filemtime(BASELINE_DIR . '/assets/js/carousel.js'),
+        ['strategy' => 'defer', 'in_footer' => true]
+    );
+}, 5);
+
+/**
+ * The editor canvas: assets/js/carousel-editor.js makes Previous / Next and the dots scroll the slides there (Embla does
+ * not run in the editor). Only enqueue_block_assets reaches the canvas iframe; the front end never gets it.
+ */
+add_action('enqueue_block_assets', static function (): void {
+    if (!is_admin()) {
+        return;
+    }
+    wp_enqueue_script(
+        'baseline-carousel-editor',
+        BASELINE_URI . '/assets/js/carousel-editor.js',
+        [],
+        (string) filemtime(BASELINE_DIR . '/assets/js/carousel-editor.js'),
+        ['in_footer' => true]
+    );
+});

package/templates/wordpress/theme/inc/components/alert.php

@@ -0,0 +1,83 @@
+<?php
+/**
+ * Baseline Alert for template code and the acf/alert block (spec: components/alert/spec.md). Emits the same markup
+ * and classes as the React Alert (registry/src/ui/alert/alert.tsx):
+ *
+ *   echo baseline_alert(['title' => 'Order placed', 'description' => '<p>A confirmation is on its way.</p>', 'icon' => 'success']);
+ *   echo baseline_alert(['title' => 'Payment failed', 'variant' => 'destructive', 'icon' => 'error', 'urgent' => true]);
+ *
+ * Success and warning are schemes, not variants: wrap the alert in data-scheme="success|warning" (or pass `scheme`).
+ * Role: an alert rendered with the page is already there when it loads, so it is role="status" (announced politely,
+ * once) unless `urgent` asks for role="alert", which interrupts. Class strings are static maps (ADR-0008).
+ */
+
+declare(strict_types=1);
+
+const BASELINE_ALERT_BASE = 'group/alert relative grid w-full gap-(--bl-alert-content-gap) text-left rounded-(--bl-alert-radius) border-(length:--bl-alert-border-width) border-border px-(--bl-alert-padding-x) py-(--bl-alert-padding-y) text-(length:--bl-alert-description-font-size) leading-(--bl-alert-description-line-height) has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-data-[slot=alert-action]:gap-x-(--bl-alert-gap) has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-(--bl-alert-gap) has-[>svg]:has-data-[slot=alert-action]:grid-cols-[auto_1fr_auto] *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg]:size-(--bl-alert-icon-size)';
+
+const BASELINE_ALERT_VARIANTS = [
+    'default'     => 'bg-card text-card-foreground',
+    'destructive' => 'bg-card text-destructive *:data-[slot=alert-description]:text-(--bl-alert-destructive-description-foreground)',
+];
+
+const BASELINE_ALERT_TITLE = 'font-(--bl-alert-title-font-weight) text-(length:--bl-alert-title-font-size) leading-(--bl-alert-title-line-height) group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground';
+
+const BASELINE_ALERT_DESCRIPTION = 'text-(length:--bl-alert-description-font-size) leading-(--bl-alert-description-line-height) text-balance text-muted-foreground md:text-pretty group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4 [&_p]:m-0';
+
+// the action is the grid's last column, beside the text (Baseline deviation from upstream's absolute box, 2026-10-02)
+const BASELINE_ALERT_ACTION = 'col-end-[-1] row-span-2 row-start-1 self-start';
+
+/** The alert's root classes for a variant (shared with the acf/alert block's wrapper attributes). */
+function baseline_alert_classes(string $variant, string $extra = ''): string
+{
+    $variant = isset(BASELINE_ALERT_VARIANTS[$variant]) ? $variant : 'default';
+    // not-typeset: inside post content typeset's paragraph, link and media rules would reach in (ADR-0028)
+    return trim(BASELINE_ALERT_BASE . ' not-typeset ' . BASELINE_ALERT_VARIANTS[$variant] . ' ' . $extra);
+}
+
+/**
+ * @param array{
+ *   title?: string, description?: string, variant?: string, icon?: string, scheme?: string, urgent?: bool,
+ *   action?: string, class?: string, root_attrs?: string
+ * } $args `description` is trusted HTML (a WYSIWYG field or template markup, passed through wp_kses_post);
+ *   `action` is ready markup (a baseline_button() or the block's InnerBlocks); `root_attrs` replaces the class attribute
+ */
+function baseline_alert(array $args): string
+{
+    $variant = (string) ($args['variant'] ?? 'default');
+    $icon    = (string) ($args['icon'] ?? '');
+    $title   = (string) ($args['title'] ?? '');
+    $desc    = (string) ($args['description'] ?? '');
+    $action  = (string) ($args['action'] ?? '');
+    $scheme  = (string) ($args['scheme'] ?? '');
+
+    $inner = '';
+    if ($icon !== '') {
+        $inner .= baseline_icon($icon, 'shrink-0');
+    }
+    if ($title !== '') {
+        $inner .= '<div data-slot="alert-title" class="' . BASELINE_ALERT_TITLE . '">' . esc_html($title) . '</div>';
+    }
+    if ($desc !== '') {
+        $inner .= '<div data-slot="alert-description" class="' . BASELINE_ALERT_DESCRIPTION . '">' . wp_kses_post($desc) . '</div>';
+    }
+    if (trim($action) !== '') {
+        $inner .= '<div data-slot="alert-action" class="' . BASELINE_ALERT_ACTION . '">' . $action . '</div>';
+    }
+
+    $root = isset($args['root_attrs'])
+        ? (string) $args['root_attrs']
+        : 'class="' . esc_attr(baseline_alert_classes($variant, (string) ($args['class'] ?? ''))) . '"';
+    $scheme_attr = in_array($scheme, ['success', 'warning', 'error'], true) ? ' data-scheme="' . $scheme . '"' : '';
+    $role = !empty($args['urgent']) ? 'alert' : 'status';
+    return '<div data-slot="alert" role="' . $role . '"' . $scheme_attr . ' ' . $root . '>' . $inner . '</div>';
+}
+
+/** The acf/alert block's Icon select lists the active icon set's vocabulary, as acf/badge's does. */
+add_filter('acf/load_field/key=field_baseline_alert_icon', static function (array $field): array {
+    $field['choices'] = ['' => __('None', 'baseline')];
+    foreach (baseline_icons() as $name => $icon) {
+        $field['choices'][$name] = (string) ($icon['label'] ?? $name);
+    }
+    return $field;
+});