@picasso-ai/delivery-spike-core 0.0.0-stage → 0.0.1

package/components/Badge.astro

@@ -0,0 +1,4 @@
+---
+---
+
+<span class="spike-badge tracking-[0.42em]"><slot /></span>

package/components/Greeting.tsx

@@ -0,0 +1,3 @@
+export default function Greeting({ name }: { name: string }) {
+	return <p className="spike-greeting">React island from the core package for {name}</p>
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import { readFileSync } from 'node:fs';
+import { readAlbumLayouts, selectVariantCss } from "./lib/variant-css.js";
+import { loadSite } from "./site.js";
+const manifest = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
+const siteRoot = process.argv[2] ?? process.cwd();
+console.log(`${manifest.name}@${manifest.version} cli from ${import.meta.filename}`);
+console.log(JSON.stringify(selectVariantCss(loadSite(siteRoot), readAlbumLayouts(siteRoot))));

package/dist/config/site-schema.d.ts

@@ -0,0 +1,21 @@
+import type { AlbumLayout } from './variants.ts';
+type CardLook = 'details' | 'compact' | 'title-strip' | 'title-slide';
+export type SiteConfig = {
+    title: string;
+    menu: {
+        animate: string;
+    };
+    topSection: {
+        pattern: string;
+    };
+    album: {
+        layout: AlbumLayout;
+    };
+    portfolio: {
+        card: CardLook;
+    };
+    moreDocs: Record<string, {
+        card: CardLook;
+    }>;
+};
+export {};

package/dist/config/site-schema.js

@@ -0,0 +1 @@
+export {};

package/dist/config/variants.d.ts

@@ -0,0 +1,2 @@
+export declare const ALBUM_LAYOUTS: readonly ["justified", "masonry", "square", "rect"];
+export type AlbumLayout = (typeof ALBUM_LAYOUTS)[number];

package/dist/config/variants.js

@@ -0,0 +1 @@
+export const ALBUM_LAYOUTS = ['justified', 'masonry', 'square', 'rect'];

package/dist/content.d.ts

@@ -0,0 +1,15 @@
+import { z } from 'astro/zod';
+export declare const defineCoreCollections: () => {
+    albums: import("astro/content/config").CollectionConfig<z.ZodObject<{
+        title: z.ZodString;
+        layout: z.ZodOptional<z.ZodEnum<{
+            justified: "justified";
+            masonry: "masonry";
+            square: "square";
+            rect: "rect";
+        }>>;
+    }, z.core.$strip>, import("astro/loaders").Loader>;
+    notes: import("astro/content/config").CollectionConfig<z.ZodObject<{
+        title: z.ZodString;
+    }, z.core.$strip>, import("astro/loaders").Loader>;
+};

package/dist/content.js

@@ -0,0 +1,15 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+import { ALBUM_LAYOUTS } from "./config/variants.js";
+// the site's content.config.ts is one call of this builder; bases are relative to the site root
+export const defineCoreCollections = () => ({
+    albums: defineCollection({
+        loader: glob({ pattern: '**/*.yaml', base: './src/content/albums' }),
+        schema: z.object({ title: z.string(), layout: z.enum(ALBUM_LAYOUTS).optional() }),
+    }),
+    notes: defineCollection({
+        loader: glob({ pattern: '**/*.mdx', base: './src/content/notes' }),
+        schema: z.object({ title: z.string() }),
+    }),
+});

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { AstroIntegration } from 'astro';
+export declare const PACKAGE_ROOT: string;
+export default function deliverySpikeCore(options?: {
+    customCss?: string[];
+}): AstroIntegration;

package/dist/index.js

@@ -0,0 +1,61 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
+import { variantCssPlugin } from "./lib/variant-css.js";
+import { loadSite, siteConfigFile } from "./site.js";
+import { splitVariantCssPlugin } from "./split-variant-css.js";
+export const PACKAGE_ROOT = fileURLToPath(new URL('..', import.meta.url));
+const SITE_MODULE = 'virtual:delivery-spike/site';
+const RESOLVED_SITE_MODULE = `\0${SITE_MODULE}`;
+function siteModulePlugin(siteRoot, customCss) {
+    return {
+        name: 'delivery-spike-site',
+        resolveId: (id) => (id === SITE_MODULE ? RESOLVED_SITE_MODULE : undefined),
+        load(id) {
+            if (id !== RESOLVED_SITE_MODULE)
+                return undefined;
+            const css = customCss.map((file) => `import ${JSON.stringify(path.resolve(siteRoot, file))}`);
+            const { title } = loadSite(siteRoot);
+            return [...css, `export const title = ${JSON.stringify(title)}`].join('\n');
+        },
+    };
+}
+function variantPlugin(variantRoot, siteRoot) {
+    const shared = {
+        siteConfigFile: siteConfigFile(siteRoot),
+        loadSite: () => loadSite(siteRoot),
+    };
+    if (variantRoot === 'split')
+        return splitVariantCssPlugin({ packageRoot: PACKAGE_ROOT, siteRoot, ...shared });
+    const root = { cwd: process.cwd(), site: siteRoot, package: PACKAGE_ROOT }[variantRoot];
+    return variantCssPlugin({ root, ...shared });
+}
+export default function deliverySpikeCore(options = {}) {
+    return {
+        name: 'delivery-spike-core',
+        hooks: {
+            'astro:config:setup': ({ config, injectRoute, updateConfig, logger }) => {
+                const siteRoot = fileURLToPath(config.root);
+                const variantRoot = (process.env.SPIKE_VARIANT_ROOT ?? 'split');
+                logger.info(`package root ${PACKAGE_ROOT}`);
+                logger.info(`site root ${siteRoot}, cwd ${process.cwd()}, variant root ${variantRoot}`);
+                injectRoute({
+                    pattern: '/albums/[slug]',
+                    entrypoint: path.join(PACKAGE_ROOT, 'routes/album.astro'),
+                });
+                updateConfig({
+                    integrations: [mdx(), react()],
+                    vite: {
+                        plugins: [
+                            tailwindcss(),
+                            siteModulePlugin(siteRoot, options.customCss ?? []),
+                            variantPlugin(variantRoot, siteRoot),
+                        ],
+                    },
+                });
+            },
+        },
+    };
+}

package/dist/lib/variant-css.d.ts

@@ -0,0 +1,33 @@
+import type { SiteConfig } from '../config/site-schema.ts';
+import { type AlbumLayout } from '../config/variants.ts';
+export declare const VARIANT_CSS_DIRS: {
+    readonly 'menu-effect': "src/components/menu-effects";
+    readonly 'top-pattern': "src/components/top-patterns";
+    readonly 'album-layout': "src/components/portfolio/album-layouts";
+    readonly 'card-look': "src/components/card-looks";
+};
+export type VariantCssFamily = keyof typeof VARIANT_CSS_DIRS;
+export type VariantCssSite = Pick<SiteConfig, 'menu' | 'topSection' | 'album' | 'portfolio' | 'moreDocs'>;
+export declare function selectVariantCss(site: VariantCssSite, albums: readonly {
+    layout?: AlbumLayout;
+}[]): Record<VariantCssFamily, string[]>;
+export declare function readAlbumLayouts(root: string): {
+    file: string;
+    layout?: AlbumLayout;
+}[];
+export declare const isVariantCssFamily: (value: string) => value is VariantCssFamily;
+type PluginContext = {
+    addWatchFile(id: string): void;
+};
+export declare function everyVariantCss(root: string): Record<VariantCssFamily, string[]>;
+export declare function variantCssPlugin(options: {
+    root: string;
+    siteConfigFile: string;
+    loadSite: () => VariantCssSite;
+    everyVariant?: boolean;
+}): {
+    name: string;
+    resolveId(id: string): string | undefined;
+    load(this: PluginContext, id: string): string | undefined;
+};
+export {};

package/dist/lib/variant-css.js

@@ -0,0 +1,96 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { z } from 'astro/zod';
+import { parse } from 'yaml';
+import { ALBUM_LAYOUTS } from "../config/variants.js";
+// astro bundles CSS by the route's module graph, not by what renders, so a component importing every
+// variant stylesheet would ship them all. Each owner imports `virtual:variant-css/<family>` instead, and
+// the plugin expands it into imports of the selected variants only.
+const VIRTUAL_PREFIX = 'virtual:variant-css/';
+const RESOLVED_PREFIX = `\0${VIRTUAL_PREFIX}`;
+const ALBUMS_DIR = 'src/content/albums';
+export const VARIANT_CSS_DIRS = {
+    'menu-effect': 'src/components/menu-effects',
+    'top-pattern': 'src/components/top-patterns',
+    'album-layout': 'src/components/portfolio/album-layouts',
+    'card-look': 'src/components/card-looks',
+};
+const files = (family, names) => [...new Set(names)].sort().map((name) => `${VARIANT_CSS_DIRS[family]}/${name}.css`);
+// repo-relative stylesheets per family. A family takes the union of every config place that picks it:
+// `off` has no file and `details` is the card base in card.css.
+export function selectVariantCss(site, albums) {
+    const animate = site.menu.animate;
+    const pattern = site.topSection.pattern;
+    const looks = [site.portfolio.card, ...Object.values(site.moreDocs).map((more) => more.card)];
+    return {
+        'menu-effect': files('menu-effect', animate === 'off' ? [] : [animate]),
+        'top-pattern': files('top-pattern', pattern === 'off' ? [] : [pattern]),
+        'album-layout': files('album-layout', [
+            site.album.layout,
+            ...albums.flatMap((album) => (album.layout ? [album.layout] : [])),
+        ]),
+        // a title-slide card without a frame renders as title-strip (card.astro)
+        'card-look': files('card-look', looks.flatMap((look) => look === 'details' ? [] : look === 'title-slide' ? [look, 'title-strip'] : [look])),
+    };
+}
+const albumLayoutSchema = z.object({ layout: z.enum(ALBUM_LAYOUTS).optional() });
+// reads only `layout` of every album; the full content snapshot is validated elsewhere
+export function readAlbumLayouts(root) {
+    const directory = path.resolve(root, ALBUMS_DIR);
+    return readdirSync(directory, { recursive: true, encoding: 'utf8' })
+        .filter((name) => /\.ya?ml$/.test(name))
+        .sort()
+        .map((name) => {
+        const file = path.join(directory, name);
+        const result = albumLayoutSchema.safeParse(parse(readFileSync(file, 'utf8')));
+        if (!result.success)
+            throw new Error(`${file}: ${result.error.message}`);
+        return { file, ...result.data };
+    });
+}
+export const isVariantCssFamily = (value) => Object.hasOwn(VARIANT_CSS_DIRS, value);
+const imports = (root, selected) => selected.length === 0
+    ? 'export {}'
+    : selected.map((file) => `import ${JSON.stringify(path.resolve(root, file))}`).join('\n');
+// every stylesheet of a family, shared ones included, for the E2E harness that renders unselected variants
+export function everyVariantCss(root) {
+    const every = (family) => files(family, readdirSync(path.resolve(root, VARIANT_CSS_DIRS[family]))
+        .filter((name) => name.endsWith('.css'))
+        .map((name) => name.slice(0, -'.css'.length)));
+    return {
+        'menu-effect': every('menu-effect'),
+        'top-pattern': every('top-pattern'),
+        'album-layout': every('album-layout'),
+        'card-look': every('card-look'),
+    };
+}
+// `loadSite` reads the config through the single loader (lib never imports it) and `siteConfigFile`
+// is watched so a site.yaml or album edit re-selects the files in dev. `everyVariant` serves the E2E
+// harness: its own imports would precede the owners' stylesheets (Astro orders page-level CSS first) and
+// lose the equal-specificity overrides, so the variants ride the owners' imports instead.
+export function variantCssPlugin(options) {
+    return {
+        name: 'variant-css',
+        resolveId(id) {
+            if (!id.startsWith(VIRTUAL_PREFIX))
+                return undefined;
+            const family = id.slice(VIRTUAL_PREFIX.length);
+            if (!isVariantCssFamily(family))
+                throw new Error(`unknown variant CSS family: ${family}`);
+            return `${RESOLVED_PREFIX}${family}`;
+        },
+        load(id) {
+            if (!id.startsWith(RESOLVED_PREFIX))
+                return undefined;
+            const family = id.slice(RESOLVED_PREFIX.length);
+            if (options.everyVariant)
+                return imports(options.root, everyVariantCss(options.root)[family]);
+            this.addWatchFile(options.siteConfigFile);
+            // only the album-layout module depends on the albums, so only it re-selects on their edits
+            const albums = family === 'album-layout' ? readAlbumLayouts(options.root) : [];
+            for (const album of albums)
+                this.addWatchFile(album.file);
+            return imports(options.root, selectVariantCss(options.loadSite(), albums)[family]);
+        },
+    };
+}

package/dist/site.d.ts

@@ -0,0 +1,4 @@
+import type { SiteConfig } from './config/site-schema.ts';
+export declare const SITE_CONFIG_FILE = "site.yaml";
+export declare const siteConfigFile: (siteRoot: string) => string;
+export declare const loadSite: (siteRoot: string) => SiteConfig;

package/dist/site.js

@@ -0,0 +1,6 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { parse } from 'yaml';
+export const SITE_CONFIG_FILE = 'site.yaml';
+export const siteConfigFile = (siteRoot) => path.resolve(siteRoot, SITE_CONFIG_FILE);
+export const loadSite = (siteRoot) => parse(readFileSync(siteConfigFile(siteRoot), 'utf8'));

package/dist/split-variant-css.d.ts

@@ -0,0 +1,15 @@
+import { type VariantCssSite } from './lib/variant-css.ts';
+type PluginContext = {
+    addWatchFile(id: string): void;
+};
+export declare function splitVariantCssPlugin(options: {
+    packageRoot: string;
+    siteRoot: string;
+    siteConfigFile: string;
+    loadSite: () => VariantCssSite;
+}): {
+    name: string;
+    resolveId(id: string): string | undefined;
+    load(this: PluginContext, id: string): string | undefined;
+};
+export {};

package/dist/split-variant-css.js

@@ -0,0 +1,34 @@
+import path from 'node:path';
+import { isVariantCssFamily, readAlbumLayouts, selectVariantCss, } from "./lib/variant-css.js";
+const VIRTUAL_PREFIX = 'virtual:variant-css/';
+const RESOLVED_PREFIX = `\0${VIRTUAL_PREFIX}`;
+// the verbatim plugin resolves both the variant stylesheets and the albums from one `root`; here the
+// stylesheets come from the installed package and the albums from the consumer site
+export function splitVariantCssPlugin(options) {
+    return {
+        name: 'variant-css-split',
+        resolveId(id) {
+            if (!id.startsWith(VIRTUAL_PREFIX))
+                return undefined;
+            const family = id.slice(VIRTUAL_PREFIX.length);
+            if (!isVariantCssFamily(family))
+                throw new Error(`unknown variant CSS family: ${family}`);
+            return `${RESOLVED_PREFIX}${family}`;
+        },
+        load(id) {
+            if (!id.startsWith(RESOLVED_PREFIX))
+                return undefined;
+            const family = id.slice(RESOLVED_PREFIX.length);
+            this.addWatchFile(options.siteConfigFile);
+            const albums = family === 'album-layout' ? readAlbumLayouts(options.siteRoot) : [];
+            for (const album of albums)
+                this.addWatchFile(album.file);
+            const selected = selectVariantCss(options.loadSite(), albums)[family];
+            if (selected.length === 0)
+                return 'export {}';
+            return selected
+                .map((file) => `import ${JSON.stringify(path.resolve(options.packageRoot, file))}`)
+                .join('\n');
+        },
+    };
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@picasso-ai/delivery-spike-core",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "description": "Throwaway delivery-channel spike package. Not for use.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/picasso/core-delivery-spike.git",
+    "directory": "packages/core"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./content": {
+      "types": "./dist/content.d.ts",
+      "default": "./dist/content.js"
+    },
+    "./components/*": "./components/*",
+    "./core.css": "./styles/core.css"
+  },
+  "bin": {
+    "delivery-spike-core": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "components",
+    "routes",
+    "styles",
+    "src/components",
+    "src/styles"
+  ],
+  "peerDependencies": {
+    "astro": "^7.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^7.0.3",
+    "@astrojs/react": "^6.0.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "yaml": "^2.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.17",
+    "astro": "7.1.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}

package/routes/album.astro

@@ -0,0 +1,34 @@
+---
+import 'virtual:variant-css/album-layout'
+import 'virtual:variant-css/card-look'
+import 'virtual:variant-css/menu-effect'
+import 'virtual:variant-css/top-pattern'
+
+import { getCollection, getEntry, render } from 'astro:content'
+import { title } from 'virtual:delivery-spike/site'
+
+import Badge from '../components/Badge.astro'
+import Greeting from '../components/Greeting.tsx'
+
+export async function getStaticPaths() {
+	const albums = await getCollection('albums')
+	return albums.map((album) => ({ params: { slug: album.id }, props: { album } }))
+}
+
+const { album } = Astro.props
+const note = await getEntry('notes', album.id)
+const rendered = note ? await render(note) : undefined
+const Content = rendered?.Content
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>{album.data.title} · {title}</title>
+	</head>
+	<body data-layout={album.data.layout ?? 'site-default'}>
+		<h1 class="core-route-heading">{album.data.title}</h1>
+		<Greeting name={title} />
+		{Content && <Content components={{ Badge }} />}
+	</body>
+</html>

package/src/components/card-looks/compact.css

@@ -0,0 +1,24 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* Only a Card with an explicit presentation sets these modifiers, so other collections are unaffected.
+	 * Two lines at most so the strip does not cover the photo. */
+	.card--title-strip .card__title,
+	.card--title-slide .card__title {
+		display: -webkit-box;
+		overflow: hidden;
+		margin: 0;
+		font-size: 18px;
+		line-height: 1.3;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+	}
+
+	@media (max-width: 767px) {
+		.card--title-strip .card__title,
+		.card--title-slide .card__title {
+			font-size: 16px;
+		}
+	}
+}

package/src/components/card-looks/title-slide.css

@@ -0,0 +1,50 @@
+@import '../../styles/layers.css';
+@import './compact.css';
+
+@layer components {
+	/* Dark translucent plate with white text in both themes: a theme-colored plate gets lost on a light
+	 * sky, while this one stays ≈ 5.5:1 even on a white photo. Visible by default so touch needs no extra
+	 * tap; hidden at rest only for a fine hover pointer. */
+	.card--title-slide .card__media-frame {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.card__overlay {
+		position: absolute;
+		inset-inline: 0;
+		bottom: 0;
+		padding: 10px 16px;
+		background-color: color-mix(in srgb, var(--color-overlay) 62%, transparent);
+	}
+
+	.card--title-slide .card__title,
+	.card--title-slide:hover .card__title,
+	.card--title-slide:focus-visible .card__title {
+		color: var(--color-on-image);
+	}
+
+	/* The moving plate is feedback enough; dimming the photo too would be redundant. */
+	.card--title-slide:hover .card__img,
+	.card--title-slide:focus-visible .card__img {
+		opacity: 1;
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.card--title-slide .card__overlay {
+			transform: translateY(100%);
+			transition: transform var(--duration-base) var(--ease-out);
+		}
+
+		.card--title-slide:hover .card__overlay,
+		.card--title-slide:focus-visible .card__overlay {
+			transform: none;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.card--title-slide .card__overlay {
+			transition: none;
+		}
+	}
+}

package/src/components/card-looks/title-strip.css

@@ -0,0 +1,8 @@
+@import '../../styles/layers.css';
+@import './compact.css';
+
+@layer components {
+	.card--title-strip .card__body {
+		padding-inline: 16px;
+	}
+}

package/src/components/menu-effects/borders-slide-in.css

@@ -0,0 +1,43 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* Top and bottom borders slide toward the text. */
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link {
+		padding-top: 10px;
+		padding-bottom: 10px;
+		font-weight: var(--font-weight-semibold);
+		text-shadow: none;
+	}
+
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link::before,
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 2px;
+		background-color: var(--menu-effect-color);
+		opacity: 0;
+		transition:
+			opacity var(--duration-base) linear,
+			transform var(--duration-base) linear;
+	}
+
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link::before {
+		top: 0;
+		transform: translateY(-10px);
+	}
+
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link::after {
+		bottom: 0;
+		transform: translateY(10px);
+	}
+
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link:hover::before,
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link:hover::after,
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link:focus-visible::before,
+	nav[aria-label='Primary'].anim-borders-slide-in .top-menu-link:focus-visible::after {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/components/menu-effects/bottom-dots-expand.css

@@ -0,0 +1,31 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* A dot splits into three. */
+	nav[aria-label='Primary'].anim-bottom-dots-expand .top-menu-link {
+		padding-bottom: 5px;
+		transition: color calc(var(--duration-base) * 2) var(--ease-out);
+	}
+
+	nav[aria-label='Primary'].anim-bottom-dots-expand .top-menu-link::before {
+		content: '•';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		color: transparent;
+		font-size: 1.2em;
+		transform: translateX(-50%);
+		transition:
+			text-shadow var(--duration-base) linear,
+			color var(--duration-base) linear;
+		pointer-events: none;
+	}
+
+	nav[aria-label='Primary'].anim-bottom-dots-expand .top-menu-link:hover::before,
+	nav[aria-label='Primary'].anim-bottom-dots-expand .top-menu-link:focus-visible::before {
+		color: var(--menu-effect-color);
+		text-shadow:
+			15px 0 var(--menu-effect-color),
+			-15px 0 var(--menu-effect-color);
+	}
+}

package/src/components/menu-effects/bottom-line-drop.css

@@ -0,0 +1,31 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* The underline grows down from the top. */
+	nav[aria-label='Primary'].anim-bottom-line-drop .top-menu-link {
+		padding-bottom: 10px;
+	}
+
+	nav[aria-label='Primary'].anim-bottom-line-drop .top-menu-link::after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 100%;
+		height: 1px;
+		background: var(--menu-effect-color);
+		opacity: 0;
+		transform: translateY(-10px);
+		transition:
+			height var(--duration-base) linear,
+			opacity var(--duration-base) linear,
+			transform var(--duration-base) linear;
+	}
+
+	nav[aria-label='Primary'].anim-bottom-line-drop .top-menu-link:hover::after,
+	nav[aria-label='Primary'].anim-bottom-line-drop .top-menu-link:focus-visible::after {
+		height: 5px;
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/components/menu-effects/bottom-line-slide-in.css

@@ -0,0 +1,30 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* The underline slides in from below. */
+	nav[aria-label='Primary'].anim-bottom-line-slide-in .top-menu-link {
+		padding-top: 10px;
+		padding-bottom: 10px;
+	}
+
+	nav[aria-label='Primary'].anim-bottom-line-slide-in .top-menu-link::after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 100%;
+		height: 5px;
+		background: var(--menu-effect-color);
+		opacity: 0;
+		transform: translateY(10px);
+		transition:
+			opacity var(--duration-base) linear,
+			transform var(--duration-base) linear;
+	}
+
+	nav[aria-label='Primary'].anim-bottom-line-slide-in .top-menu-link:hover::after,
+	nav[aria-label='Primary'].anim-bottom-line-slide-in .top-menu-link:focus-visible::after {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/components/menu-effects/circles-expand.css

@@ -0,0 +1,52 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* Two circles expand from the center. */
+	nav[aria-label='Primary'].anim-circles-expand .top-menu-label {
+		position: relative;
+	}
+
+	nav[aria-label='Primary'].anim-circles-expand .top-menu-label::before,
+	nav[aria-label='Primary'].anim-circles-expand .top-menu-label::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 50px;
+		height: 50px;
+		border: 2px solid var(--menu-effect-color);
+		border-radius: 50%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.2);
+		transition:
+			opacity var(--duration-base) linear,
+			transform var(--duration-base) linear;
+		pointer-events: none;
+	}
+
+	nav[aria-label='Primary'].anim-circles-expand .top-menu-label::after {
+		width: 40px;
+		height: 40px;
+		border-width: 5px;
+		transform: translate(-50%, -50%) scale(0.8);
+	}
+
+	/* In light this effect alone draws the circles in translucent black, not the hover color, matching the
+	 * legacy site. */
+	[data-theme='light'] nav[aria-label='Primary'].anim-circles-expand .top-menu-label::before,
+	[data-theme='light'] nav[aria-label='Primary'].anim-circles-expand .top-menu-label::after {
+		border-color: color-mix(in srgb, var(--color-shade) 15%, transparent);
+	}
+
+	nav[aria-label='Primary'].anim-circles-expand .top-menu-link:hover .top-menu-label::before,
+	nav[aria-label='Primary'].anim-circles-expand .top-menu-link:hover .top-menu-label::after,
+	nav[aria-label='Primary'].anim-circles-expand
+		.top-menu-link:focus-visible
+		.top-menu-label::before,
+	nav[aria-label='Primary'].anim-circles-expand
+		.top-menu-link:focus-visible
+		.top-menu-label::after {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}

package/src/components/menu-effects/opacity-change.css

@@ -0,0 +1,22 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* A dimmed link turns fully opaque. */
+	nav[aria-label='Primary'].anim-opacity-change .top-menu-link {
+		opacity: 0.6;
+		transition:
+			opacity var(--duration-medium) var(--ease-cubic),
+			color var(--duration-medium) var(--ease-cubic);
+	}
+
+	nav[aria-label='Primary'].anim-opacity-change .top-menu-link:hover,
+	nav[aria-label='Primary'].anim-opacity-change .top-menu-link:focus-visible {
+		opacity: 1;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		nav[aria-label='Primary'].anim-opacity-change .top-menu-link {
+			opacity: 1;
+		}
+	}
+}

package/src/components/menu-effects/text-bounce-in.css

@@ -0,0 +1,15 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* The text grows with a bounce. */
+	nav[aria-label='Primary'].anim-text-bounce-in .top-menu-label {
+		display: inline-block;
+		transform: scale(1);
+		transition: transform var(--duration-medium) cubic-bezier(0.47, 2.02, 0.31, -0.36);
+	}
+
+	nav[aria-label='Primary'].anim-text-bounce-in .top-menu-link:hover .top-menu-label,
+	nav[aria-label='Primary'].anim-text-bounce-in .top-menu-link:focus-visible .top-menu-label {
+		transform: scale(1.08);
+	}
+}

package/src/components/menu-effects/text-grow.css

@@ -0,0 +1,15 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* The text grows smoothly. */
+	nav[aria-label='Primary'].anim-text-grow .top-menu-label {
+		display: inline-block;
+		transform: scale(1);
+		transition: transform var(--duration-base) var(--ease-out);
+	}
+
+	nav[aria-label='Primary'].anim-text-grow .top-menu-link:hover .top-menu-label,
+	nav[aria-label='Primary'].anim-text-grow .top-menu-link:focus-visible .top-menu-label {
+		transform: scale(1.1);
+	}
+}

package/src/components/menu-effects/word-slide-in.css

@@ -0,0 +1,29 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	/* A copy of the word from attr(data-hover) slides in from below. */
+	nav[aria-label='Primary'].anim-word-slide-in .top-menu-link {
+		overflow: hidden;
+		height: 1.1em;
+		line-height: 1.1em;
+	}
+
+	nav[aria-label='Primary'].anim-word-slide-in .top-menu-label {
+		position: relative;
+		display: inline-block;
+		transition: transform var(--duration-base) linear;
+	}
+
+	nav[aria-label='Primary'].anim-word-slide-in .top-menu-label::before {
+		position: absolute;
+		top: 110%;
+		left: 0;
+		content: attr(data-hover);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	nav[aria-label='Primary'].anim-word-slide-in .top-menu-link:hover .top-menu-label,
+	nav[aria-label='Primary'].anim-word-slide-in .top-menu-link:focus-visible .top-menu-label {
+		transform: translateY(-110%);
+	}
+}

package/src/components/portfolio/album-layouts/crop.css

@@ -0,0 +1,41 @@
+@import '../../../styles/layers.css';
+
+@layer components {
+	/* The minimum cell width makes `auto-fill` give min(columns, max(minColumns, floor((W + gap) /
+	 * (240 + gap)))) columns, the same formula as `sizes` (lib/portfolio/sizes.ts) and Gallery. The
+	 * viewer shows the uncropped photo. */
+	.album-square,
+	.album-rect {
+		--album-tile-max: calc(
+			(100% - (var(--album-columns) - 1) * var(--album-gap)) / var(--album-columns)
+		);
+		--album-tile-min: calc(
+			(100% - (var(--album-min-columns) - 1) * var(--album-gap)) / var(--album-min-columns)
+		);
+
+		display: grid;
+		grid-template-columns: repeat(
+			auto-fill,
+			minmax(max(var(--album-tile-max), min(240px, var(--album-tile-min))), 1fr)
+		);
+		gap: var(--album-gap, 12px);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	/* The anchor holds the cell ratio: <img> carries the photo's inline aspect-ratio (no CLS), and with
+	 * width and height both set aspect-ratio no longer applies, so the image fills the cell height. */
+	:is(.album-square__item, .album-rect__item) .album-photo {
+		overflow: hidden;
+	}
+
+	:is(.album-square__item, .album-rect__item) :is(.album-photo__media, .album-photo__img) {
+		height: 100%;
+	}
+
+	:is(.album-square__item, .album-rect__item) .album-photo__img {
+		object-fit: cover;
+		object-position: var(--album-focal, 50% 50%);
+	}
+}

package/src/components/portfolio/album-layouts/justified.css

@@ -0,0 +1,25 @@
+@import '../../../styles/layers.css';
+
+@layer components {
+	/* photo-item.astro sets flex-grow ∝ aspect-ratio and flex-basis ∝ aspect-ratio × row height inline per
+	 * photo, which gives every photo in a row the same height without cropping. The `::after` with a large
+	 * flex-grow takes the slack only on the incomplete last row, so its photos keep the target height. */
+	.album-justified {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--justified-gap, 12px);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.album-justified::after {
+		content: '';
+		flex-grow: 1000000;
+		flex-basis: 0;
+	}
+
+	.album-justified__item {
+		min-width: 0;
+	}
+}

package/src/components/portfolio/album-layouts/masonry.css

@@ -0,0 +1,18 @@
+@import '../../../styles/layers.css';
+
+@layer components {
+	/* Photos run top to bottom by column; DOM, keyboard and viewer order stay the album order. */
+	.album-masonry {
+		column-width: var(--album-col-width, 300px);
+		column-count: var(--album-max-columns, 5);
+		column-gap: var(--album-gap, 12px);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.album-masonry__item {
+		break-inside: avoid;
+		margin-bottom: var(--album-gap, 12px);
+	}
+}

package/src/components/portfolio/album-layouts/rect.css

@@ -0,0 +1,8 @@
+@import '../../../styles/layers.css';
+@import './crop.css';
+
+@layer components {
+	.album-rect__item .album-photo {
+		aspect-ratio: 3 / 2;
+	}
+}

package/src/components/portfolio/album-layouts/square.css

@@ -0,0 +1,8 @@
+@import '../../../styles/layers.css';
+@import './crop.css';
+
+@layer components {
+	.album-square__item .album-photo {
+		aspect-ratio: 1;
+	}
+}

package/src/components/top-patterns/carbon.css

@@ -0,0 +1,18 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	.top-section--pattern-carbon .top-section__pattern::after {
+		background:
+			radial-gradient(
+					color-mix(in srgb, var(--color-shade) 15%, transparent) 30%,
+					transparent 40%
+				)
+				0 0,
+			radial-gradient(
+					color-mix(in srgb, var(--color-shade) 15%, transparent) 30%,
+					transparent 40%
+				)
+				3px 3px;
+		background-size: 6px 6px;
+	}
+}

package/src/components/top-patterns/diagonal.css

@@ -0,0 +1,13 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	.top-section--pattern-diagonal .top-section__pattern::after {
+		background: repeating-linear-gradient(
+			-25deg,
+			color-mix(in srgb, var(--color-shade) 20%, transparent),
+			color-mix(in srgb, var(--color-shade) 20%, transparent) 3px,
+			color-mix(in srgb, var(--color-shade) 10%, transparent) 3px,
+			color-mix(in srgb, var(--color-shade) 10%, transparent) 6px
+		);
+	}
+}

package/src/components/top-patterns/hatch.css

@@ -0,0 +1,18 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	.top-section--pattern-hatch .top-section__pattern::after {
+		background:
+			radial-gradient(
+					transparent 40%,
+					color-mix(in srgb, var(--color-shade) 20%, transparent) 41%
+				)
+				0 0,
+			radial-gradient(
+					transparent 40%,
+					color-mix(in srgb, var(--color-shade) 20%, transparent) 41%
+				)
+				3px 3px;
+		background-size: 6px 6px;
+	}
+}

package/src/components/top-patterns/plain.css

@@ -0,0 +1,7 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	.top-section--pattern-plain .top-section__pattern::after {
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAtyOW6xcAAAAQSURBVAjXYxBgUGBwYGgAAAJYAPF9gAMvAAAAAElFTkSuQmCC);
+	}
+}

package/src/components/top-patterns/radial.css

@@ -0,0 +1,13 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	.top-section--pattern-radial .top-section__pattern::after {
+		background: repeating-radial-gradient(
+			circle,
+			color-mix(in srgb, var(--color-shade) 10%, transparent),
+			color-mix(in srgb, var(--color-shade) 10%, transparent) 2px,
+			transparent 2px,
+			transparent 5px
+		);
+	}
+}

package/src/components/top-patterns/weave.css

@@ -0,0 +1,30 @@
+@import '../../styles/layers.css';
+
+@layer components {
+	.top-section--pattern-weave .top-section__pattern::after {
+		background:
+			linear-gradient(
+				45deg,
+				color-mix(in srgb, var(--color-on-image) 10%, transparent) 12%,
+				transparent 0,
+				transparent 88%,
+				color-mix(in srgb, var(--color-on-image) 10%, transparent) 0
+			),
+			linear-gradient(
+				135deg,
+				transparent 37%,
+				color-mix(in srgb, var(--color-shade) 15%, transparent) 0,
+				color-mix(in srgb, var(--color-shade) 15%, transparent) 63%,
+				transparent 0
+			),
+			linear-gradient(
+					45deg,
+					transparent 37%,
+					color-mix(in srgb, var(--color-on-image) 10%, transparent) 0,
+					color-mix(in srgb, var(--color-on-image) 10%, transparent) 63%,
+					transparent 0
+				)
+				color-mix(in srgb, var(--color-shade) 20%, transparent);
+		background-size: 5px 5px;
+	}
+}

package/src/styles/layers.css

@@ -0,0 +1,2 @@
+/* Synthetic cascade-layer order for the variant stylesheets copied into the spike. */
+@layer properties, theme, base, vendor, components, utilities;

package/styles/core.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+/* The package lives in node_modules, which Tailwind's automatic detection skips. */
+@source '../components';
+@source '../routes';

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.