open-brandkit 0.4.7

package/dist/adapters/next/brandkit-page.js

@@ -0,0 +1,1085 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlignCenter, AlignLeft, AlignRight, ArrowDown, Copy, Download, RotateCcw, Upload, X, } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+const transparentPreviewStyle = {
+    backgroundColor: '#f7f7f7',
+    backgroundImage: 'repeating-conic-gradient(#ececec 0% 25%, #f8f8f8 0% 50%)',
+    backgroundPosition: '50%',
+    backgroundSize: '20px 20px',
+};
+const avatarShapeOptions = [
+    { label: 'Square', value: 'square' },
+    { label: 'Round', value: 'round' },
+    { label: 'Rounded', value: 'rounded' },
+];
+const avatarBorderThicknessOptions = [
+    { label: 'None', value: 'none', ratio: 0 },
+    { label: 'Thin', value: 'thin', ratio: 0.16 },
+    { label: 'Medium', value: 'medium', ratio: 0.32 },
+    { label: 'Heavy', value: 'heavy', ratio: 0.48 },
+];
+const avatarSizeOptions = [512, 1024];
+const avatarBorderStep = 4;
+const avatarMaxBorderRatio = 96 / 512;
+const bannerPreviewScale = 0.5;
+const deterministicIntro = 'Approved marks, avatar-ready presets, social profile assets, and the current color system.';
+function getAssetDownloadHref(downloadUrl) {
+    return downloadUrl;
+}
+function assetFileLabel(asset) {
+    return asset.downloads.map((download) => download.fileName).join(' / ');
+}
+function getLightboxDownload(asset) {
+    return (asset.downloads.find((download) => download.format === 'PNG') ??
+        asset.downloads.find((download) => download.format === 'SVG') ??
+        asset.downloads[0]);
+}
+function getAssetSearchText(asset) {
+    return [
+        asset.id,
+        asset.title,
+        asset.previewUrl,
+        ...asset.downloads.map((download) => download.fileName),
+    ]
+        .join(' ')
+        .toLowerCase();
+}
+function isWordmarkAsset(asset) {
+    const compact = getAssetSearchText(asset).replace(/[^a-z0-9]+/g, '');
+    return compact.includes('wordmark');
+}
+function isIconAsset(asset) {
+    const text = getAssetSearchText(asset);
+    const tokens = text.split(/[^a-z0-9]+/).filter(Boolean);
+    const compact = tokens.join('');
+    return (!isWordmarkAsset(asset) &&
+        (tokens.some((token) => ['icon', 'icons', 'symbol', 'symbols', 'favicon'].includes(token)) ||
+            compact.includes('brandmark')));
+}
+function findAvatarAssets(groups) {
+    const iconGroup = groups.find((group) => /icon/i.test(group.key)) ??
+        groups.find((group) => /icon/i.test(group.label));
+    const iconGroupAssets = iconGroup?.items.filter((asset) => !isWordmarkAsset(asset)) ?? [];
+    if (iconGroupAssets.length)
+        return iconGroupAssets;
+    return groups
+        .flatMap((group) => group.items)
+        .filter((asset) => isIconAsset(asset));
+}
+function findHeroAsset(groups) {
+    return findAvatarAssets(groups)[0] ?? groups[0]?.items[0] ?? null;
+}
+function findFooterAsset(groups) {
+    const logoGroup = groups.find((group) => /logo|lockup|wordmark/i.test(group.key)) ??
+        groups.find((group) => /logo|lockup|wordmark/i.test(group.label));
+    return logoGroup?.items[0] ?? groups[0]?.items[0] ?? null;
+}
+function normalizeOptionalHexColor(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim().replace(/^#/, '');
+    if (/^[0-9a-f]{3}$/i.test(trimmed)) {
+        return `#${trimmed
+            .split('')
+            .map((character) => character + character)
+            .join('')}`;
+    }
+    if (/^[0-9a-f]{6}$/i.test(trimmed))
+        return `#${trimmed}`;
+    return null;
+}
+function normalizeHexColor(value) {
+    return normalizeOptionalHexColor(value) ?? '#ffffff';
+}
+function tokenize(value) {
+    return value
+        .toLowerCase()
+        .split(/[^a-z0-9]+/)
+        .filter(Boolean);
+}
+function findPrimaryColor(colors) {
+    return (colors.find((color) => /primary/i.test(color.name)) ??
+        colors[0] ?? {
+        hex: '#0d2249',
+        name: 'Primary',
+    });
+}
+function getBrandGradientStops(colors) {
+    return [
+        ...new Set(colors
+            .map((color) => normalizeOptionalHexColor(color.hex))
+            .filter((hex) => Boolean(hex))),
+    ];
+}
+function getCustomColorPreviewStyle(colors) {
+    const stops = getBrandGradientStops(colors);
+    if (stops.length === 0) {
+        return { backgroundColor: '#ffffff' };
+    }
+    if (stops.length === 1) {
+        return { backgroundColor: stops[0] };
+    }
+    return {
+        backgroundColor: stops[0],
+        backgroundImage: `linear-gradient(135deg, ${stops
+            .map((hex, index) => {
+            const stop = (index / (stops.length - 1)) * 100;
+            const formattedStop = Number.isInteger(stop)
+                ? String(stop)
+                : stop.toFixed(2).replace(/\.?0+$/, '');
+            return `${hex} ${formattedStop}%`;
+        })
+            .join(', ')})`,
+    };
+}
+function findCustomPreviewColors(colors, colorSections) {
+    const colorByName = new Map(colors.map((color) => [color.name.toLowerCase(), color]));
+    const colorByHex = new Map(colors.flatMap((color) => {
+        const hex = normalizeOptionalHexColor(color.hex);
+        return hex ? [[hex.toLowerCase(), color]] : [];
+    }));
+    const selected = [];
+    const seen = new Set();
+    for (const section of colorSections) {
+        if (!/primary|secondary/i.test(section.label))
+            continue;
+        for (const colorReference of section.rows.flat()) {
+            const color = colorByName.get(colorReference.toLowerCase()) ??
+                colorByHex.get(normalizeOptionalHexColor(colorReference)?.toLowerCase() ?? '');
+            if (!color || seen.has(color.name.toLowerCase()))
+                continue;
+            seen.add(color.name.toLowerCase());
+            selected.push(color);
+        }
+    }
+    return selected.length ? selected : colors;
+}
+function getColorPickerFallback(colors) {
+    return getBrandGradientStops(colors)[0] ?? '#05070b';
+}
+function makeFixedBackgroundOptions(customPreviewColors, customHex) {
+    const customColor = normalizeOptionalHexColor(customHex);
+    return [
+        { color: null, key: 'transparent', label: 'Transparent' },
+        { color: '#05070b', key: 'black', label: 'Black' },
+        { color: '#ffffff', key: 'white', label: 'White' },
+        {
+            color: customColor,
+            key: 'custom',
+            label: 'Custom',
+            previewStyle: customColor
+                ? undefined
+                : getCustomColorPreviewStyle(customPreviewColors),
+        },
+    ];
+}
+function makeFixedBorderOptions(colors, customPreviewColors, customHex) {
+    const primary = findPrimaryColor(colors);
+    const customColor = normalizeOptionalHexColor(customHex);
+    return [
+        { color: primary.hex, key: 'primary', label: 'Primary' },
+        { color: '#05070b', key: 'black', label: 'Black' },
+        { color: '#ffffff', key: 'white', label: 'White' },
+        {
+            color: customColor,
+            key: 'custom',
+            label: 'Custom',
+            previewStyle: customColor
+                ? undefined
+                : getCustomColorPreviewStyle(customPreviewColors),
+        },
+    ];
+}
+const avatarVariantStopTokens = new Set([
+    'brandmark',
+    'favicon',
+    'favicons',
+    'icon',
+    'icons',
+    'logo',
+    'logos',
+    'mark',
+    'marks',
+    'symbol',
+    'symbols',
+]);
+function getAvatarAssetTokens(asset) {
+    const fileName = asset.downloads[0]?.fileName ??
+        asset.previewUrl.split('/').pop() ??
+        asset.id.split(':').pop() ??
+        asset.title;
+    return tokenize(fileName.replace(/\.[^.]+$/, ''));
+}
+function getCommonAvatarAssetTokens(assets) {
+    const tokenLists = assets.map((asset) => new Set(getAvatarAssetTokens(asset)));
+    if (!tokenLists.length)
+        return new Set();
+    return new Set(Array.from(tokenLists[0] ?? []).filter((token) => tokenLists.every((tokens) => tokens.has(token))));
+}
+function titleFromAvatarVariantTokens(tokens) {
+    return tokens
+        .map((token) => token.toUpperCase() === token
+        ? token
+        : token.charAt(0).toUpperCase() + token.slice(1))
+        .join(' ');
+}
+function getAvatarIconLabel(asset, commonTokens) {
+    const variantTokens = getAvatarAssetTokens(asset).filter((token) => !commonTokens.has(token) && !avatarVariantStopTokens.has(token));
+    return variantTokens.length
+        ? titleFromAvatarVariantTokens(variantTokens)
+        : 'Primary';
+}
+function inferAvatarIconOptions(assets, colors) {
+    const primary = findPrimaryColor(colors);
+    const brandColorTokenCounts = colors
+        .map((color) => new Set(tokenize(color.name)))
+        .reduce((counts, tokens) => {
+        for (const token of tokens) {
+            counts.set(token, (counts.get(token) ?? 0) + 1);
+        }
+        return counts;
+    }, new Map());
+    const colorCandidates = [
+        ...colors.map((color, index) => ({
+            color: color.hex,
+            key: `brand-${index}-${color.hex.toLowerCase()}`,
+            label: color.name,
+            tokens: tokenize(color.name).filter((token) => token.length > 2 && (brandColorTokenCounts.get(token) ?? 0) === 1),
+        })),
+        {
+            color: '#ffffff',
+            key: 'white',
+            label: 'White',
+            tokens: ['white'],
+        },
+        {
+            color: '#05070b',
+            key: 'black',
+            label: 'Black',
+            tokens: ['black'],
+        },
+    ];
+    const options = [];
+    const seen = new Set();
+    const commonAssetTokens = getCommonAvatarAssetTokens(assets);
+    for (const asset of assets) {
+        const text = getAssetSearchText(asset);
+        const candidate = colorCandidates.find((option) => option.tokens.some((token) => token && text.includes(token))) ??
+            (/\bprimary\b/.test(text)
+                ? {
+                    color: primary.hex,
+                    key: 'primary',
+                    label: primary.name,
+                    tokens: ['primary'],
+                }
+                : null) ?? {
+            color: primary.hex,
+            key: `primary-${primary.hex.toLowerCase()}`,
+            label: primary.name,
+            tokens: ['primary'],
+        };
+        const key = `asset:${asset.id}`;
+        if (seen.has(key))
+            continue;
+        options.push({
+            asset,
+            color: candidate.key.startsWith('primary-') ? '#05070b' : candidate.color,
+            key,
+            label: getAvatarIconLabel(asset, commonAssetTokens),
+        });
+        seen.add(key);
+    }
+    return options.length
+        ? options
+        : assets.map((asset, index) => ({
+            asset,
+            color: '#05070b',
+            key: `icon-${index}:${asset.id}`,
+            label: getAvatarIconLabel(asset, commonAssetTokens),
+        }));
+}
+function getColorOption(options, key) {
+    return options.find((option) => option.key === key) ?? options[0];
+}
+function getMaxBorderThickness(size) {
+    return size * avatarMaxBorderRatio;
+}
+function roundBorderThickness(thickness) {
+    return Math.round(thickness / avatarBorderStep) * avatarBorderStep;
+}
+function getAvatarBorderThickness(thickness, size) {
+    const ratio = avatarBorderThicknessOptions.find((option) => option.value === thickness)
+        ?.ratio ?? 0;
+    return roundBorderThickness(getMaxBorderThickness(size) * ratio);
+}
+function getAvatarShapeClass(shape) {
+    if (shape === 'round')
+        return 'rounded-full';
+    if (shape === 'rounded')
+        return 'rounded-[22%]';
+    return 'rounded-none';
+}
+function selectionRing(isSelected) {
+    return isSelected
+        ? 'border-[#3a89c0] ring-2 ring-[#3a89c0] ring-offset-2'
+        : 'border-neutral-300 hover:border-neutral-500';
+}
+function addAvatarShapePath(context, size, shape, inset = 0) {
+    const edge = size - inset * 2;
+    const radius = Math.min(edge / 2, Math.max(0, size * 0.22 - inset));
+    context.beginPath();
+    if (shape === 'round') {
+        context.arc(size / 2, size / 2, edge / 2, 0, Math.PI * 2);
+        context.closePath();
+        return;
+    }
+    if (shape === 'rounded') {
+        if (typeof context.roundRect === 'function') {
+            context.roundRect(inset, inset, edge, edge, radius);
+            context.closePath();
+            return;
+        }
+        context.moveTo(inset + radius, inset);
+        context.lineTo(inset + edge - radius, inset);
+        context.arcTo(inset + edge, inset, inset + edge, inset + radius, radius);
+        context.lineTo(inset + edge, inset + edge - radius);
+        context.arcTo(inset + edge, inset + edge, inset + edge - radius, inset + edge, radius);
+        context.lineTo(inset + radius, inset + edge);
+        context.arcTo(inset, inset + edge, inset, inset + edge - radius, radius);
+        context.lineTo(inset, inset + radius);
+        context.arcTo(inset, inset, inset + radius, inset, radius);
+        context.closePath();
+        return;
+    }
+    context.rect(inset, inset, edge, edge);
+    context.closePath();
+}
+function loadCanvasImage(src) {
+    return new Promise((resolve, reject) => {
+        const image = document.createElement('img');
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error(`Could not load ${src}`));
+        image.src = src;
+    });
+}
+async function drawAvatarCanvas({ backgroundColor, borderColor, borderThickness, canvas, iconSrc, iconWidthPercent, shape, size, isCurrent = () => true, }) {
+    const context = canvas.getContext('2d');
+    canvas.width = size;
+    canvas.height = size;
+    if (!context)
+        throw new Error('Canvas is unavailable.');
+    context.clearRect(0, 0, size, size);
+    if (borderThickness > 0) {
+        context.save();
+        addAvatarShapePath(context, size, shape);
+        context.fillStyle = borderColor;
+        context.fill();
+        context.restore();
+    }
+    if (backgroundColor || borderThickness > 0) {
+        context.save();
+        addAvatarShapePath(context, size, shape, borderThickness);
+        context.clip();
+        if (backgroundColor) {
+            context.fillStyle = backgroundColor;
+            context.fill();
+        }
+        else {
+            context.clearRect(0, 0, size, size);
+        }
+        context.restore();
+    }
+    const image = await loadCanvasImage(iconSrc);
+    if (!isCurrent())
+        return;
+    const maxIconWidth = size * (iconWidthPercent / 100);
+    const maxIconHeight = size * (iconWidthPercent / 100);
+    const naturalWidth = image.naturalWidth || image.width;
+    const naturalHeight = image.naturalHeight || image.height;
+    const scale = Math.min(maxIconWidth / naturalWidth, maxIconHeight / naturalHeight);
+    const iconWidth = naturalWidth * scale;
+    const iconHeight = naturalHeight * scale;
+    context.drawImage(image, (size - iconWidth) / 2, (size - iconHeight) / 2, iconWidth, iconHeight);
+}
+function createColorRows(manifest) {
+    const colorMap = new Map(manifest.brandColors.map((color) => [color.name.toLowerCase(), color]));
+    const configuredRows = manifest.colorSections
+        .map((section) => ({
+        columns: section.columns ?? 3,
+        label: getDisplayColorSectionLabel(section.label),
+        rows: section.rows
+            .map((row) => row
+            .map((name) => colorMap.get(name.toLowerCase()))
+            .filter((color) => Boolean(color)))
+            .filter((row) => row.length > 0),
+    }))
+        .filter((section) => section.rows.length > 0);
+    if (configuredRows.length)
+        return configuredRows;
+    const rows = [];
+    for (let index = 0; index < manifest.brandColors.length; index += 3) {
+        rows.push(manifest.brandColors.slice(index, index + 3));
+    }
+    return [{ columns: 3, label: 'Primary', rows }];
+}
+function getDisplayColorSectionLabel(label) {
+    const trimmed = label.trim();
+    if (/^brand colors?$/i.test(trimmed))
+        return 'Primary';
+    return trimmed.replace(/\s+colors?$/i, '');
+}
+function formatAssetCount(count) {
+    return `${count} ${count === 1 ? 'asset' : 'assets'} available`;
+}
+function slugify(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '');
+}
+function DownloadIcon() {
+    return _jsx(Download, { "aria-hidden": true, className: "h-4 w-4" });
+}
+function UploadIcon() {
+    return _jsx(Upload, { "aria-hidden": true, className: "h-4 w-4" });
+}
+function ResetIcon() {
+    return _jsx(RotateCcw, { "aria-hidden": true, className: "h-4 w-4" });
+}
+function CloseIcon() {
+    return _jsx(X, { "aria-hidden": true, className: "h-4 w-4" });
+}
+function toastToneClasses(tone) {
+    if (tone === 'error')
+        return 'border-red-200 text-red-950';
+    if (tone === 'info')
+        return 'border-slate-200 text-slate-950';
+    return 'border-neutral-200 text-neutral-950';
+}
+function ToastStack({ toasts }) {
+    if (!toasts.length)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none fixed bottom-4 left-1/2 z-[140] flex w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-2", children: toasts.map((toast) => (_jsx("div", { className: `pointer-events-auto w-full rounded-md border bg-white px-4 py-3 text-left text-sm font-medium shadow-lg ${toastToneClasses(toast.tone)}`, role: "status", children: toast.message }, toast.id))) }));
+}
+function AssetDownloadButton({ download, }) {
+    return (_jsxs("a", { className: "inline-flex items-center gap-1 rounded-md bg-[#2b333f] px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-[#1d232b]", download: download.fileName, href: getAssetDownloadHref(download.url), children: [_jsx(DownloadIcon, {}), _jsx("span", { children: download.format })] }));
+}
+function DownloadAllButton({ href, label = 'Download all' }) {
+    return (_jsxs("a", { className: "inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-800 transition-colors hover:border-neutral-400 hover:bg-neutral-50", download: true, href: href, children: [_jsx(DownloadIcon, {}), _jsx("span", { children: label })] }));
+}
+function AssetCard({ asset, onPreview, }) {
+    return (_jsxs("article", { className: "flex h-full flex-col overflow-hidden rounded-lg border border-neutral-200 bg-white", children: [_jsx("button", { className: "flex min-h-[220px] items-center justify-center border-b border-neutral-200 px-6 py-10 transition-opacity hover:opacity-90", onClick: () => onPreview(asset), style: transparentPreviewStyle, type: "button", children: _jsx("img", { src: asset.previewUrl, alt: asset.title, className: "max-h-28 w-auto max-w-full object-contain", loading: "lazy" }) }), _jsxs("div", { className: "flex flex-1 flex-col justify-between gap-4 p-4", children: [_jsx("div", { children: _jsx("p", { className: "text-sm font-semibold text-neutral-900", children: asset.title }) }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: asset.downloads.map((download) => (_jsx(AssetDownloadButton, { download: download }, `${asset.id}-${download.fileName}`))) })] })] }));
+}
+function AssetGroup({ downloadHref, group, onPreview, }) {
+    return (_jsxs("section", { className: "space-y-5", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-slate-950", children: group.label }), group.description ? (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: group.description })) : null] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-slate-500", children: formatAssetCount(group.items.length) }), _jsx(DownloadAllButton, { href: downloadHref })] })] }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: group.items.map((asset) => (_jsx(AssetCard, { asset: asset, onPreview: onPreview }, asset.id))) })] }));
+}
+function CopyButton({ label, onToast, value, }) {
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            onToast(`${label} copied.`);
+        }
+        catch {
+            onToast('Could not copy that color value.', 'error');
+        }
+    }
+    return (_jsxs("button", { className: "inline-flex cursor-pointer items-center gap-1 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-xs font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50", onClick: () => void copy(), title: `Copy ${label}`, type: "button", children: [_jsx(Copy, { "aria-hidden": true, className: "h-3.5 w-3.5" }), _jsx("span", { children: value })] }));
+}
+function ColorCard({ color, onToast, }) {
+    return (_jsxs("article", { className: "overflow-hidden rounded-lg border border-neutral-200 bg-white", children: [_jsx("div", { className: "h-28 w-full border-b border-neutral-200", style: { backgroundColor: color.hex } }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsx("div", { children: _jsx("p", { className: "text-sm font-semibold text-neutral-900", children: color.name }) }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: _jsx(CopyButton, { label: `${color.name} hex`, onToast: onToast, value: color.hex }) })] })] }));
+}
+function PrintCopyButton({ label, onToast, value, }) {
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            document.activeElement?.blur();
+            onToast(`${label} copied.`);
+        }
+        catch {
+            onToast('Could not copy that print color value.', 'error');
+        }
+    }
+    return (_jsx("button", { "aria-label": `Copy ${label}`, className: "cursor-pointer text-left font-mono text-xs leading-5 text-neutral-800 transition-colors hover:text-[#3a89c0] hover:underline", onClick: () => void copy(), type: "button", children: value }));
+}
+function PrintComponentCopyButton({ channel, label, onToast, value, }) {
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            document.activeElement?.blur();
+            onToast(`${label} copied.`);
+        }
+        catch {
+            onToast('Could not copy that print color value.', 'error');
+        }
+    }
+    return (_jsxs("button", { "aria-label": `Copy ${label}`, className: "flex cursor-pointer items-baseline gap-1.5 text-left font-mono text-xs leading-5 text-neutral-800 transition-colors hover:text-[#3a89c0] hover:underline", onClick: () => void copy(), type: "button", children: [_jsx("span", { className: "w-4 font-sans text-xs font-semibold text-neutral-500", children: channel }), _jsx("span", { children: value })] }));
+}
+function PrintValueGroup({ color, label, onToast, values, }) {
+    return (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-neutral-500 uppercase", children: label }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Copy, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-neutral-400" }), _jsx("div", { className: "flex items-center gap-3", children: values.map((item) => item.value ? (_jsx(PrintComponentCopyButton, { channel: item.channel, label: `${color.pantone} ${label} ${item.channel}`, onToast: onToast, value: item.value }, item.channel)) : null) })] })] }));
+}
+function PrintColorCard({ color, onToast, }) {
+    const swatchRef = useRef(null);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [popoverPlacement, setPopoverPlacement] = useState('bottom');
+    const [popoverAlignment, setPopoverAlignment] = useState('left');
+    const rgbValues = ['R', 'G', 'B'].map((channel, index) => ({
+        channel,
+        value: color.rgb[index] ?? '',
+    }));
+    const cmykValues = ['C', 'M', 'Y', 'K'].map((channel, index) => ({
+        channel,
+        value: color.cmyk[index] ?? '',
+    }));
+    function preparePopover() {
+        const swatch = swatchRef.current;
+        if (!swatch) {
+            setPopoverOpen(true);
+            return;
+        }
+        const rect = swatch.getBoundingClientRect();
+        const estimatedPopoverHeight = 220;
+        const estimatedPopoverWidth = 320;
+        const viewportPadding = 16;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        setPopoverPlacement(spaceBelow < estimatedPopoverHeight && spaceAbove > spaceBelow
+            ? 'top'
+            : 'bottom');
+        setPopoverAlignment(rect.left + estimatedPopoverWidth > window.innerWidth - viewportPadding
+            ? 'right'
+            : 'left');
+        setPopoverOpen(true);
+    }
+    useEffect(() => {
+        if (!popoverOpen)
+            return;
+        const closeOnOutsidePointer = (event) => {
+            if (!swatchRef.current?.contains(event.target)) {
+                setPopoverOpen(false);
+            }
+        };
+        document.addEventListener('pointerdown', closeOnOutsidePointer);
+        return () => document.removeEventListener('pointerdown', closeOnOutsidePointer);
+    }, [popoverOpen]);
+    return (_jsxs("article", { className: "relative", onMouseEnter: preparePopover, onMouseLeave: () => setPopoverOpen(false), ref: swatchRef, children: [_jsxs("div", { className: "overflow-hidden rounded-md border border-neutral-200 bg-white shadow-sm", children: [_jsx("button", { "aria-label": `${color.pantone} color values`, className: "aspect-square w-full border-b border-neutral-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3a89c0]", onClick: preparePopover, onFocus: preparePopover, style: { backgroundColor: color.hex }, type: "button" }), _jsxs("div", { className: "bg-white px-2.5 pt-1.5 pb-2.5 text-left", children: [_jsx("p", { className: "text-[10px] font-semibold tracking-[0.12em] text-neutral-500 uppercase", children: "Pantone" }), _jsx("p", { className: "mt-0.5 text-xs font-semibold text-neutral-900", children: color.pantone })] })] }), _jsx("div", { className: `absolute z-40 w-max max-w-[calc(100vw-2rem)] min-w-64 ${popoverAlignment === 'right' ? 'right-0' : 'left-0'} ${popoverPlacement === 'top' ? 'bottom-full pb-2' : 'top-full pt-2'} ${popoverOpen ? 'block' : 'hidden'}`, children: _jsxs("div", { className: "relative rounded-lg border border-neutral-200 bg-white p-4 text-left shadow-xl", children: [_jsxs("div", { className: "absolute top-3 right-3 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-right shadow-sm", children: [_jsx("p", { className: "text-[9px] font-semibold tracking-[0.12em] text-neutral-500 uppercase", children: "Pantone" }), _jsx("p", { className: "mt-0.5 text-xs font-semibold text-neutral-900", children: color.pantone })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-neutral-500 uppercase", children: "Hex" }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Copy, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-neutral-400" }), _jsx(PrintCopyButton, { label: `${color.pantone} hex`, onToast: onToast, value: color.hex })] })] }), _jsx(PrintValueGroup, { color: color, label: "RGB", onToast: onToast, values: rgbValues }), _jsx(PrintValueGroup, { color: color, label: "CMYK", onToast: onToast, values: cmykValues })] })] }) })] }));
+}
+function PrintColorGroups({ groups, onToast, }) {
+    if (!groups.length)
+        return null;
+    return (_jsxs("section", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-neutral-900", children: "Print Colors" }), _jsx("p", { className: "text-sm text-neutral-600", children: "Pantone-aligned swatches for merch, packaging, and print production." })] }), groups.map((group) => (_jsxs("section", { className: "space-y-5", children: [_jsx("h4", { className: "text-base font-semibold text-neutral-900", children: group.label }), _jsx("div", { className: "grid grid-cols-3 gap-3 sm:grid-cols-5 lg:grid-cols-7 xl:grid-cols-10", children: group.items.map((color) => (_jsx(PrintColorCard, { color: color, onToast: onToast }, `${group.label}-${color.pantone}`))) })] }, group.label)))] }));
+}
+function AvatarIconColorChip({ option, selected, onSelect, }) {
+    return (_jsxs("button", { "aria-pressed": selected, className: "flex w-16 cursor-pointer flex-col items-start gap-2 text-center", onClick: onSelect, type: "button", children: [_jsx("span", { className: `block aspect-square w-16 rounded-md border transition-colors ${selectionRing(selected)}`, style: { backgroundColor: normalizeHexColor(option.color) } }), _jsx("span", { className: "w-16 text-xs leading-4 font-medium text-neutral-700", children: option.label })] }));
+}
+function AvatarColorChip({ option, selected, onSelect, }) {
+    return (_jsxs("button", { "aria-pressed": selected, className: "flex w-16 cursor-pointer flex-col items-start gap-2 text-center", onClick: onSelect, type: "button", children: [_jsx("span", { className: `block aspect-square w-16 rounded-md border transition-colors ${selectionRing(selected)}`, style: option.previewStyle ??
+                    (option.color
+                        ? { backgroundColor: normalizeHexColor(option.color) }
+                        : transparentPreviewStyle) }), _jsx("span", { className: "w-16 text-xs leading-4 font-medium text-neutral-700", children: option.label })] }));
+}
+function AvatarCustomColorChip({ draftValue, inputLabel, open, option, pickerValue, placeholder, selected, onChange, onClose, onDraftChange, onOpen, }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        function closeOnOutsidePointer(event) {
+            if (event.target instanceof Node &&
+                !containerRef.current?.contains(event.target)) {
+                onClose();
+            }
+        }
+        function closeOnEscape(event) {
+            if (event.key === 'Escape')
+                onClose();
+        }
+        document.addEventListener('pointerdown', closeOnOutsidePointer);
+        document.addEventListener('keydown', closeOnEscape);
+        return () => {
+            document.removeEventListener('pointerdown', closeOnOutsidePointer);
+            document.removeEventListener('keydown', closeOnEscape);
+        };
+    }, [onClose, open]);
+    return (_jsxs("div", { className: "relative flex w-16 flex-col items-start gap-2 text-center", ref: containerRef, children: [_jsxs("button", { "aria-expanded": open, "aria-haspopup": "dialog", "aria-pressed": selected, className: "flex w-16 cursor-pointer flex-col items-start gap-2", onClick: onOpen, type: "button", children: [_jsx("span", { className: `block aspect-square w-16 rounded-md border transition-colors ${selectionRing(selected)}`, style: option.previewStyle ??
+                            (option.color
+                                ? { backgroundColor: normalizeHexColor(option.color) }
+                                : transparentPreviewStyle) }), _jsx("span", { className: "w-16 text-xs leading-4 font-medium text-neutral-700", children: option.label })] }), open ? (_jsxs("div", { "aria-label": inputLabel, className: "absolute top-full left-1/2 z-30 mt-3 w-56 -translate-x-1/2 rounded-md border border-slate-200 bg-white p-3 text-left shadow-xl", role: "dialog", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Custom" }), _jsx("button", { "aria-label": "Close custom color picker", className: "inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 hover:text-slate-900", onClick: onClose, type: "button", children: _jsx(CloseIcon, {}) })] }), _jsxs("div", { className: "mt-3 grid grid-cols-[3rem_minmax(0,1fr)] items-end gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: [_jsx("span", { children: "Pick" }), _jsx("input", { "aria-label": `${inputLabel} picker`, className: "h-9 w-12 cursor-pointer rounded-md border border-slate-300 bg-white p-1", onChange: (event) => onChange(event.currentTarget.value), type: "color", value: pickerValue })] }), _jsxs("label", { className: "flex min-w-0 flex-col gap-1 text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: [_jsx("span", { children: "Hex" }), _jsx("input", { "aria-label": `${inputLabel} hex`, className: "h-9 min-w-0 rounded-md border border-slate-300 bg-white px-2.5 font-mono text-sm tracking-normal text-slate-900 uppercase", onChange: (event) => onDraftChange(event.currentTarget.value), maxLength: 7, placeholder: placeholder, type: "text", value: draftValue })] })] })] })) : null] }));
+}
+function AvatarShapeChip({ label, selected, shape, onSelect, }) {
+    return (_jsxs("button", { "aria-pressed": selected, className: "flex w-16 cursor-pointer flex-col items-start gap-2 text-center", onClick: onSelect, type: "button", children: [_jsx("span", { className: `flex aspect-square w-16 items-center justify-center rounded-md border bg-white transition-colors ${selectionRing(selected)}`, children: _jsx("span", { className: `block h-8 w-8 bg-[#2b333f] ${getAvatarShapeClass(shape)}` }) }), _jsx("span", { className: "w-16 text-xs leading-4 font-medium text-neutral-700", children: label })] }));
+}
+function AvatarBorderThicknessChip({ label, selected, thickness, onSelect, }) {
+    const previewThickness = thickness === 'none'
+        ? 1
+        : Math.max(2, Math.round((avatarBorderThicknessOptions.find((option) => option.value === thickness)?.ratio ?? 0) * 14));
+    return (_jsxs("button", { "aria-pressed": selected, className: "flex w-16 cursor-pointer flex-col items-start gap-2 text-center", onClick: onSelect, type: "button", children: [_jsx("span", { className: `flex aspect-square w-16 items-center justify-center rounded-md border bg-white transition-colors ${selectionRing(selected)}`, children: _jsx("span", { className: "block h-8 w-8 rounded-[4px] bg-white", style: {
+                        boxShadow: thickness === 'none'
+                            ? `inset 0 0 0 ${previewThickness}px #cbd5e1`
+                            : `inset 0 0 0 ${previewThickness}px #0d2249`,
+                    } }) }), _jsx("span", { className: "w-16 text-xs leading-4 font-medium text-neutral-700", children: label })] }));
+}
+function AvatarSizeChip({ selected, size, onSelect, }) {
+    return (_jsxs("button", { "aria-pressed": selected, className: "flex w-16 cursor-pointer flex-col items-start gap-2 text-center", onClick: onSelect, type: "button", children: [_jsx("span", { className: `flex aspect-square w-16 items-center justify-center rounded-md border bg-white font-mono text-sm font-semibold text-neutral-800 transition-colors ${selectionRing(selected)}`, children: size }), _jsxs("span", { className: "w-16 text-xs leading-4 font-medium text-neutral-700", children: [size, "px"] })] }));
+}
+function AvatarGenerator({ assets, brandLabel, canUseDevActions, colorSections, colors, endpoints, }) {
+    const previewCanvasRef = useRef(null);
+    const iconOptions = useMemo(() => inferAvatarIconOptions(assets, colors), [assets, colors]);
+    const [iconKey, setIconKey] = useState(iconOptions[0]?.key ?? '');
+    const [background, setBackground] = useState('transparent');
+    const [backgroundCustomDraft, setBackgroundCustomDraft] = useState('');
+    const [backgroundCustomHex, setBackgroundCustomHex] = useState('');
+    const [backgroundCustomOpen, setBackgroundCustomOpen] = useState(false);
+    const [border, setBorder] = useState('primary');
+    const [borderCustomDraft, setBorderCustomDraft] = useState('');
+    const [borderCustomHex, setBorderCustomHex] = useState('');
+    const [borderCustomOpen, setBorderCustomOpen] = useState(false);
+    const [borderThickness, setBorderThickness] = useState('none');
+    const [shape, setShape] = useState('square');
+    const [padding, setPadding] = useState(18);
+    const [avatarSize, setAvatarSize] = useState(1024);
+    const [status, setStatus] = useState('');
+    const [isInstallingFavicon, setInstallingFavicon] = useState(false);
+    const customPreviewColors = useMemo(() => findCustomPreviewColors(colors, colorSections), [colorSections, colors]);
+    const customPickerFallback = getColorPickerFallback(customPreviewColors);
+    const backgroundOptions = useMemo(() => makeFixedBackgroundOptions(customPreviewColors, backgroundCustomHex), [backgroundCustomHex, customPreviewColors]);
+    const borderOptions = useMemo(() => makeFixedBorderOptions(colors, customPreviewColors, borderCustomHex), [borderCustomHex, colors, customPreviewColors]);
+    const selectedIconOption = iconOptions.find((option) => option.key === iconKey) ?? iconOptions[0] ?? null;
+    const selectedAsset = selectedIconOption?.asset ?? null;
+    const selectedBackground = getColorOption(backgroundOptions, background);
+    const selectedBorder = getColorOption(borderOptions, border);
+    const backgroundColor = selectedBackground?.color ?? null;
+    const borderColor = selectedBorder?.color ?? '#05070b';
+    const avatarFilePrefix = slugify(brandLabel) || 'brand';
+    const borderThicknessPixels = getAvatarBorderThickness(borderThickness, avatarSize);
+    const iconWidthPercent = 100 - padding * 2;
+    const previewSurfaceStyle = !backgroundColor || shape !== 'square' ? transparentPreviewStyle : undefined;
+    const canInstallFavicon = canUseDevActions && Boolean(endpoints?.favicon);
+    useEffect(() => {
+        if (!selectedIconOption && iconOptions[0]) {
+            setIconKey(iconOptions[0].key);
+        }
+    }, [iconOptions, selectedIconOption]);
+    useEffect(() => {
+        const canvas = previewCanvasRef.current;
+        if (!canvas || !selectedAsset)
+            return;
+        let isCurrent = true;
+        drawAvatarCanvas({
+            backgroundColor,
+            borderColor,
+            borderThickness: borderThicknessPixels,
+            canvas,
+            iconSrc: selectedAsset.previewUrl,
+            iconWidthPercent,
+            shape,
+            size: avatarSize,
+            isCurrent: () => isCurrent,
+        }).catch(() => {
+            if (isCurrent)
+                setStatus('Could not render avatar preview.');
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [
+        avatarSize,
+        backgroundColor,
+        borderColor,
+        borderThicknessPixels,
+        iconWidthPercent,
+        selectedAsset,
+        shape,
+    ]);
+    function resetAvatarGenerator() {
+        setIconKey(iconOptions[0]?.key ?? '');
+        setBackground('transparent');
+        setBackgroundCustomDraft('');
+        setBackgroundCustomHex('');
+        setBackgroundCustomOpen(false);
+        setBorder('primary');
+        setBorderCustomDraft('');
+        setBorderCustomHex('');
+        setBorderCustomOpen(false);
+        setBorderThickness('none');
+        setShape('square');
+        setPadding(18);
+        setAvatarSize(1024);
+        setStatus('');
+    }
+    async function createAvatarCanvas(targetSize = avatarSize) {
+        if (!selectedAsset)
+            throw new Error('Choose an icon first.');
+        const canvas = document.createElement('canvas');
+        await drawAvatarCanvas({
+            backgroundColor,
+            borderColor,
+            borderThickness: getAvatarBorderThickness(borderThickness, targetSize),
+            canvas,
+            iconSrc: selectedAsset.previewUrl,
+            iconWidthPercent,
+            shape,
+            size: targetSize,
+        });
+        return canvas;
+    }
+    async function downloadAvatar(targetSize = avatarSize, fileName) {
+        const canvas = await createAvatarCanvas(targetSize);
+        const blob = await new Promise((resolve, reject) => {
+            canvas.toBlob((result) => {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(new Error('Could not export PNG.'));
+            }, 'image/png');
+        });
+        const objectUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = objectUrl;
+        link.download = fileName ?? `${avatarFilePrefix}-avatar-${targetSize}px.png`;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+    }
+    async function downloadFavicons() {
+        for (const faviconSize of [16, 32, 180, 192, 512]) {
+            await downloadAvatar(faviconSize, faviconSize === 180
+                ? 'apple-touch-icon.png'
+                : `favicon-${faviconSize}x${faviconSize}.png`);
+        }
+        setStatus('Downloaded favicon PNGs.');
+    }
+    async function installFavicons() {
+        if (!endpoints?.favicon)
+            return;
+        setInstallingFavicon(true);
+        setStatus('Installing favicon files...');
+        try {
+            const canvas = await createAvatarCanvas(1024);
+            const response = await fetch(endpoints.favicon, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ imageDataUrl: canvas.toDataURL('image/png') }),
+            });
+            const result = (await response.json());
+            if (!response.ok) {
+                throw new Error(result.error ?? 'Could not install favicon files.');
+            }
+            setStatus(`Installed ${result.files?.length ?? 0} favicon files.`);
+        }
+        catch (error) {
+            setStatus(error instanceof Error ? error.message : 'Could not install favicon files.');
+        }
+        finally {
+            setInstallingFavicon(false);
+        }
+    }
+    function applyBackgroundCustomPickerHex(value) {
+        setBackgroundCustomOpen(true);
+        setBorderCustomOpen(false);
+        const normalized = normalizeOptionalHexColor(value);
+        if (!normalized)
+            return;
+        setBackgroundCustomDraft(normalized);
+        setBackgroundCustomHex(normalized);
+        setBackground('custom');
+    }
+    function applyBackgroundCustomTextHex(value) {
+        setBackgroundCustomOpen(true);
+        setBorderCustomOpen(false);
+        setBackgroundCustomDraft(value);
+        const normalized = normalizeOptionalHexColor(value);
+        if (!normalized)
+            return;
+        setBackgroundCustomHex(normalized);
+        setBackground('custom');
+    }
+    function ensureBorderVisible() {
+        if (borderThickness === 'none')
+            setBorderThickness('thin');
+    }
+    function applyBorderCustomPickerHex(value) {
+        setBorderCustomOpen(true);
+        setBackgroundCustomOpen(false);
+        const normalized = normalizeOptionalHexColor(value);
+        if (!normalized)
+            return;
+        setBorderCustomDraft(normalized);
+        setBorderCustomHex(normalized);
+        setBorder('custom');
+        ensureBorderVisible();
+    }
+    function applyBorderCustomTextHex(value) {
+        setBorderCustomOpen(true);
+        setBackgroundCustomOpen(false);
+        setBorderCustomDraft(value);
+        const normalized = normalizeOptionalHexColor(value);
+        if (!normalized)
+            return;
+        setBorderCustomHex(normalized);
+        setBorder('custom');
+        ensureBorderVisible();
+    }
+    function selectBackgroundOption(option) {
+        if (option.key === 'custom') {
+            setBackgroundCustomOpen(true);
+            setBorderCustomOpen(false);
+            return;
+        }
+        setBackground(option.key);
+        setBackgroundCustomOpen(false);
+    }
+    function selectBorderOption(option) {
+        if (option.key === 'custom') {
+            setBorderCustomOpen(true);
+            setBackgroundCustomOpen(false);
+            return;
+        }
+        setBorder(option.key);
+        setBorderCustomOpen(false);
+        ensureBorderVisible();
+    }
+    if (!assets.length)
+        return null;
+    return (_jsxs("section", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-slate-950", children: "Avatar Generator" }), _jsx("p", { className: "mt-1 text-sm text-slate-600", children: "Make a profile-ready PNG from the approved icon." })] }), _jsxs("div", { className: "grid gap-5 lg:grid-cols-[minmax(0,1fr)_24rem] lg:items-stretch", children: [_jsxs("div", { className: "relative grid gap-y-12 rounded-md border border-slate-200 bg-white p-6 md:grid-cols-[minmax(0,1fr)_1px_minmax(0,1fr)]", children: [_jsx("button", { "aria-label": "Reset avatar generator", className: "absolute top-3 left-3 z-10 inline-flex h-8 w-8 cursor-pointer items-center justify-center text-slate-500 transition hover:text-blue-700", onClick: resetAvatarGenerator, title: "Reset avatar generator", type: "button", children: _jsx(ResetIcon, {}) }), _jsxs("div", { className: "flex w-max max-w-full flex-col gap-4 justify-self-center md:col-start-1 md:row-start-1", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Icon" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-4", children: iconOptions.map((option) => (_jsx(AvatarIconColorChip, { option: option, selected: selectedIconOption?.key === option.key, onSelect: () => setIconKey(option.key) }, option.key))) })] }), _jsxs("div", { className: "flex w-max max-w-full flex-col gap-4 justify-self-center md:col-start-1 md:row-start-2", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Background" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-4", children: backgroundOptions.map((option) => option.key === 'custom' ? (_jsx(AvatarCustomColorChip, { draftValue: backgroundCustomDraft, inputLabel: "Custom background color", open: backgroundCustomOpen, option: option, pickerValue: backgroundCustomHex || customPickerFallback, placeholder: customPickerFallback, selected: backgroundCustomOpen || selectedBackground?.key === option.key, onChange: applyBackgroundCustomPickerHex, onClose: () => setBackgroundCustomOpen(false), onDraftChange: applyBackgroundCustomTextHex, onOpen: () => {
+                                                setBackgroundCustomOpen(true);
+                                                setBorderCustomOpen(false);
+                                            } }, option.key)) : (_jsx(AvatarColorChip, { option: option, selected: selectedBackground?.key === option.key, onSelect: () => selectBackgroundOption(option) }, option.key))) })] }), _jsxs("div", { className: "flex w-max max-w-full flex-col gap-4 justify-self-center md:col-start-1 md:row-start-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Shape" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-4", children: avatarShapeOptions.map((option) => (_jsx(AvatarShapeChip, { label: option.label, shape: option.value, selected: shape === option.value, onSelect: () => setShape(option.value) }, option.value))) })] }), _jsx("div", { "aria-hidden": "true", className: "relative hidden self-stretch md:col-start-2 md:row-span-3 md:row-start-1 md:block", children: _jsx("span", { className: "absolute -top-3 -bottom-3 left-1/2 w-px -translate-x-1/2 bg-gradient-to-b from-transparent via-slate-200 to-transparent" }) }), _jsxs("div", { className: "flex w-max max-w-full flex-col gap-4 justify-self-center md:col-start-3 md:row-start-1", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Border color" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-4", children: borderOptions.map((option) => option.key === 'custom' ? (_jsx(AvatarCustomColorChip, { draftValue: borderCustomDraft, inputLabel: "Custom border color", open: borderCustomOpen, option: option, pickerValue: borderCustomHex || customPickerFallback, placeholder: customPickerFallback, selected: borderCustomOpen || selectedBorder?.key === option.key, onChange: applyBorderCustomPickerHex, onClose: () => setBorderCustomOpen(false), onDraftChange: applyBorderCustomTextHex, onOpen: () => {
+                                                setBorderCustomOpen(true);
+                                                setBackgroundCustomOpen(false);
+                                            } }, option.key)) : (_jsx(AvatarColorChip, { option: option, selected: selectedBorder?.key === option.key, onSelect: () => selectBorderOption(option) }, option.key))) })] }), _jsxs("div", { className: "flex w-max max-w-full flex-col gap-4 justify-self-center md:col-start-3 md:row-start-2", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Border thickness" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-4", children: avatarBorderThicknessOptions.map((option) => (_jsx(AvatarBorderThicknessChip, { label: option.label, thickness: option.value, selected: borderThickness === option.value, onSelect: () => setBorderThickness(option.value) }, option.value))) })] }), _jsxs("div", { className: "flex w-max max-w-full flex-col gap-4 justify-self-center md:col-start-3 md:row-start-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Size" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-4", children: avatarSizeOptions.map((size) => (_jsx(AvatarSizeChip, { size: size, selected: avatarSize === size, onSelect: () => setAvatarSize(size) }, size))) })] })] }), _jsxs("div", { className: "flex min-h-80 flex-col items-center justify-center gap-5 rounded-md border border-slate-200 bg-white p-5 text-center shadow-sm", children: [_jsx("span", { className: `flex aspect-square w-full max-w-64 items-center justify-center overflow-hidden ${getAvatarShapeClass(shape)}`, style: previewSurfaceStyle, children: _jsx("canvas", { ref: previewCanvasRef, "aria-label": "Avatar preview", className: "block aspect-square w-full" }) }), _jsxs("label", { className: "flex w-full max-w-64 flex-col gap-3", children: [_jsx("span", { className: "flex items-center justify-between gap-3", children: _jsx("span", { className: "text-xs font-semibold tracking-[0.12em] text-slate-500 uppercase", children: "Icon padding" }) }), _jsx("input", { className: "w-full cursor-pointer accent-[#3a89c0]", max: "34", min: "0", onChange: (event) => setPadding(Number(event.currentTarget.value)), type: "range", value: padding })] }), _jsxs("button", { className: "inline-flex cursor-pointer items-center gap-1 rounded-md bg-[#2b333f] px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-[#1d232b]", onClick: () => void downloadAvatar(), type: "button", children: [_jsx(DownloadIcon, {}), _jsxs("span", { children: ["Download PNG (", avatarSize, "px)"] })] }), _jsxs("button", { className: "inline-flex cursor-pointer items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-800 transition-colors hover:border-slate-400 hover:bg-slate-50", onClick: () => void downloadFavicons(), type: "button", children: [_jsx(DownloadIcon, {}), _jsx("span", { children: "Download favicon PNGs" })] }), canInstallFavicon ? (_jsxs("button", { className: "inline-flex cursor-pointer items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-800 transition-colors hover:border-slate-400 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60", disabled: isInstallingFavicon, onClick: () => void installFavicons(), type: "button", children: [_jsx(UploadIcon, {}), _jsx("span", { children: isInstallingFavicon ? 'Installing favicon...' : 'Install as favicon' })] })) : null, status ? (_jsx("p", { className: "max-w-64 text-sm font-medium text-slate-500", children: status })) : null] })] })] }));
+}
+function BannerPresetSelect({ disabled, label, onChange, options, value, }) {
+    return (_jsxs("fieldset", { className: "space-y-2", children: [_jsx("legend", { className: "text-xs font-semibold tracking-[0.16em] text-neutral-500 uppercase", children: label }), _jsx("select", { className: "h-8 w-full cursor-pointer rounded-md border border-neutral-300 bg-white px-2.5 text-xs font-medium text-neutral-800 transition-colors hover:border-[#0d2249] hover:bg-slate-50 hover:text-slate-950 focus:border-[#0d2249] focus:ring-[#0d2249] disabled:cursor-not-allowed disabled:opacity-60", disabled: disabled, onChange: (event) => onChange(event.currentTarget.value), value: value, children: options.map((option) => (_jsx("option", { value: option.key, children: option.label }, option.key))) })] }));
+}
+function BannerDotGroup({ disabled, label, onChange, options, value, }) {
+    return (_jsxs("fieldset", { className: "space-y-2", children: [_jsx("legend", { className: "text-xs font-semibold tracking-[0.16em] text-neutral-500 uppercase", children: label }), _jsx("div", { className: "inline-flex rounded-md border border-neutral-300 bg-white p-1", children: options.map((option) => {
+                    const selected = value === option.key;
+                    return (_jsxs("button", { "aria-label": `${label}: ${option.label}`, className: `flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-all hover:bg-slate-100 hover:shadow-[inset_0_0_0_1px_#64748b] disabled:cursor-not-allowed disabled:opacity-40 ${selected
+                            ? 'bg-slate-100 shadow-[inset_0_0_0_1px_#0d2249]'
+                            : 'bg-white'}`, disabled: disabled, onClick: () => onChange(option.key), title: option.label, type: "button", children: [_jsx("span", { className: "h-4 w-4 rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.18)]", style: { backgroundColor: option.hex } }), _jsx("span", { className: "sr-only", children: option.label })] }, option.key));
+                }) })] }));
+}
+const bannerAlignmentIcons = {
+    center: AlignCenter,
+    left: AlignLeft,
+    right: AlignRight,
+};
+function BannerAlignmentGroup({ disabled, onChange, options, value, }) {
+    return (_jsxs("fieldset", { className: "space-y-2", children: [_jsx("legend", { className: "text-xs font-semibold tracking-[0.16em] text-neutral-500 uppercase", children: "Align" }), _jsx("div", { className: "inline-flex rounded-md border border-neutral-300 bg-white p-1", children: options.map((option) => {
+                    const Icon = bannerAlignmentIcons[option.key] ?? AlignCenter;
+                    const selected = value === option.key;
+                    return (_jsxs("button", { "aria-label": `Align ${option.label.toLowerCase()}`, className: `flex h-7 w-8 cursor-pointer items-center justify-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-60 ${selected
+                            ? 'bg-[#0d2249] text-white hover:bg-slate-800'
+                            : 'text-slate-700 hover:bg-slate-100 hover:text-slate-950 hover:shadow-[inset_0_0_0_1px_#64748b]'}`, disabled: disabled, onClick: () => onChange(option.key), title: option.label, type: "button", children: [_jsx(Icon, { "aria-hidden": true, className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: option.label })] }, option.key));
+                }) })] }));
+}
+function BannerPresetControls({ controls, endpoint, onToast, onUpdated, }) {
+    function getMarkColorOptions(markVariantKey) {
+        const markVariant = controls.markVariants.find((variant) => variant.key === markVariantKey);
+        if (markVariant?.colorOptions?.length)
+            return markVariant.colorOptions;
+        if (!markVariant?.colorKeys?.length)
+            return controls.colors;
+        const filtered = controls.colors.filter((color) => markVariant.colorKeys?.includes(color.key));
+        return filtered.length ? filtered : controls.colors;
+    }
+    function getDefaultMarkColor(markVariantKey) {
+        return (getMarkColorOptions(markVariantKey)[0]?.key ??
+            '');
+    }
+    const defaultState = useMemo(() => {
+        const markVariant = controls.markVariants[0]?.key ?? '';
+        return {
+            alignment: 'center',
+            backgroundColor: controls.colors[0]?.key ?? '',
+            markColor: getDefaultMarkColor(markVariant),
+            markVariant,
+            pattern: controls.patterns[0]?.key ?? 'diagonal-sweep',
+            secondaryColor: controls.colors[2]?.key ?? controls.colors[0]?.key ?? '',
+        };
+    }, [controls]);
+    const [state, setState] = useState(defaultState);
+    const [isApplying, setApplying] = useState(false);
+    const markColorOptions = getMarkColorOptions(state.markVariant);
+    async function apply(nextState) {
+        setApplying(true);
+        try {
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(nextState),
+            });
+            const result = (await response.json());
+            if (!response.ok) {
+                throw new Error(result.error ?? 'Could not update banner presets.');
+            }
+            onUpdated();
+        }
+        catch (error) {
+            onToast(error instanceof Error ? error.message : 'Could not update banner presets.', 'error');
+        }
+        finally {
+            setApplying(false);
+        }
+    }
+    function update(key, value) {
+        const nextState = { ...state, [key]: value };
+        if (key === 'markVariant') {
+            const nextMarkColorOptions = getMarkColorOptions(String(value));
+            if (!nextMarkColorOptions.some((option) => option.key === nextState.markColor)) {
+                nextState.markColor = nextMarkColorOptions[0]?.key ?? '';
+            }
+        }
+        setState(nextState);
+        void apply(nextState);
+    }
+    return (_jsx("div", { className: "mt-6 w-full rounded-md border border-slate-200 bg-white p-3", children: _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-[minmax(9rem,1fr)_auto_auto_auto_minmax(9rem,1fr)] lg:items-start", children: [_jsx(BannerPresetSelect, { disabled: isApplying, label: "Mark", onChange: (value) => update('markVariant', value), options: controls.markVariants, value: state.markVariant }), _jsx(BannerDotGroup, { disabled: isApplying, label: "Color", onChange: (value) => update('markColor', value), options: markColorOptions, value: state.markColor }), _jsx(BannerAlignmentGroup, { disabled: isApplying, onChange: (value) => update('alignment', value), options: controls.alignments, value: state.alignment }), _jsx(BannerDotGroup, { disabled: isApplying, label: "Base", onChange: (value) => update('backgroundColor', value), options: controls.colors, value: state.backgroundColor }), _jsx(BannerPresetSelect, { disabled: isApplying, label: "Pattern", onChange: (value) => update('pattern', value), options: controls.patterns, value: state.pattern })] }) }));
+}
+function BannerCard({ asset, canUpload, endpoint, isCustom, previewVersion, onCustomStateChange, onToast, onUpdated, }) {
+    const inputRef = useRef(null);
+    const [isReplacing, setReplacing] = useState(false);
+    const [isResetting, setResetting] = useState(false);
+    const previewUrl = previewVersion
+        ? `${asset.previewUrl}?v=${previewVersion}`
+        : asset.previewUrl;
+    const previewWidth = Math.round(asset.width * bannerPreviewScale);
+    async function replaceBanner(file) {
+        if (!endpoint)
+            return;
+        const formData = new FormData();
+        formData.append('assetId', asset.id);
+        formData.append('file', file);
+        setReplacing(true);
+        onToast('Uploading custom banner...', 'info');
+        try {
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                body: formData,
+            });
+            const result = (await response.json());
+            if (!response.ok) {
+                throw new Error(result.error ?? 'Could not replace banner image.');
+            }
+            onCustomStateChange(asset.id, result.isCustom ?? true);
+            onToast('Custom banner uploaded.');
+            onUpdated();
+        }
+        catch (error) {
+            onToast(error instanceof Error ? error.message : 'Could not replace banner image.', 'error');
+        }
+        finally {
+            setReplacing(false);
+        }
+    }
+    async function resetBanner() {
+        if (!endpoint)
+            return;
+        setResetting(true);
+        onToast('Resetting banner...', 'info');
+        try {
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'reset', assetId: asset.id }),
+            });
+            const result = (await response.json());
+            if (!response.ok) {
+                throw new Error(result.error ?? 'Could not reset banner image.');
+            }
+            onCustomStateChange(asset.id, result.isCustom ?? false);
+            onToast('Banner reset to default.');
+            onUpdated();
+        }
+        catch (error) {
+            onToast(error instanceof Error ? error.message : 'Could not reset banner image.', 'error');
+        }
+        finally {
+            setResetting(false);
+        }
+    }
+    function handleFileChange(event) {
+        const file = event.currentTarget.files?.[0];
+        event.currentTarget.value = '';
+        if (file)
+            void replaceBanner(file);
+    }
+    return (_jsxs("article", { className: "max-w-full overflow-hidden rounded-lg border border-neutral-200 bg-white", style: { width: previewWidth }, children: [_jsx("div", { className: "relative w-full overflow-hidden border-b border-neutral-200 bg-slate-100", style: { aspectRatio: `${asset.width} / ${asset.height}` }, children: _jsx("img", { src: previewUrl, alt: asset.title, className: "h-full w-full object-cover", loading: "lazy" }) }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-neutral-900", children: asset.title }), _jsx("p", { className: "mt-1 font-mono text-xs text-neutral-500", children: asset.description })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [asset.downloads.map((download) => (_jsx(AssetDownloadButton, { download: download }, `${asset.id}-${download.fileName}`))), canUpload ? (_jsxs(_Fragment, { children: [_jsx("input", { accept: "image/png,image/jpeg,image/webp,image/svg+xml", className: "sr-only", onChange: handleFileChange, ref: inputRef, type: "file" }), _jsxs("button", { className: "inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-800 transition-colors hover:border-neutral-400 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-60", disabled: isReplacing, onClick: () => inputRef.current?.click(), type: "button", children: [_jsx(UploadIcon, {}), _jsx("span", { children: isReplacing ? 'Uploading...' : 'Upload Custom' })] }), isCustom ? (_jsx("button", { "aria-label": "Reset to default", className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-300 bg-white text-neutral-800 transition-colors hover:border-neutral-400 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-60", disabled: isReplacing || isResetting, onClick: () => void resetBanner(), title: "Reset to default", type: "button", children: _jsx(ResetIcon, {}) })) : null] })) : null] })] })] }));
+}
+function BannerGroup({ canUseDevActions, customBannerIds, endpoints, group, previewVersion, onCustomStateChange, onToast, onUpdated, }) {
+    return (_jsxs("section", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold tracking-[0.12em] text-neutral-500 uppercase", children: group.label }), group.description ? (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: group.description })) : null] }), _jsx("div", { className: "flex flex-col gap-4", children: group.items.map((asset) => (_jsx(BannerCard, { asset: asset, canUpload: canUseDevActions && Boolean(endpoints?.bannerUpload), endpoint: endpoints?.bannerUpload, isCustom: customBannerIds.has(asset.id), onCustomStateChange: onCustomStateChange, onToast: onToast, onUpdated: onUpdated, previewVersion: previewVersion }, asset.id))) })] }));
+}
+function Lightbox({ asset, onClose, }) {
+    const lightboxDownload = asset ? getLightboxDownload(asset) : null;
+    useEffect(() => {
+        if (!asset)
+            return;
+        function closeOnEscape(event) {
+            if (event.key === 'Escape')
+                onClose();
+        }
+        window.addEventListener('keydown', closeOnEscape);
+        return () => window.removeEventListener('keydown', closeOnEscape);
+    }, [asset, onClose]);
+    if (!asset)
+        return null;
+    return (_jsx("div", { "aria-modal": "true", className: "fixed inset-0 z-[120] bg-black/70 p-4 sm:p-8", onMouseDown: (event) => {
+            if (event.target === event.currentTarget)
+                onClose();
+        }, role: "dialog", children: _jsx("div", { className: "flex min-h-full items-center justify-center", children: _jsxs("div", { className: "w-full max-w-5xl overflow-hidden rounded-lg bg-white shadow-2xl", children: [_jsx("div", { className: "flex min-h-[60vh] items-center justify-center bg-[#f7f7f7] px-8 py-10 sm:px-12", children: _jsx("div", { className: "max-w-full overflow-auto rounded-md border border-neutral-300 p-4 shadow-sm", style: transparentPreviewStyle, children: _jsx("img", { src: lightboxDownload?.url ?? asset.previewUrl, alt: asset.title, className: "block h-auto max-h-[70vh] w-auto max-w-full" }) }) }), _jsxs("div", { className: "flex flex-col gap-4 border-t border-neutral-200 p-5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-neutral-900", children: asset.title }), _jsx("p", { className: "mt-1 font-mono text-xs text-neutral-500", children: lightboxDownload?.fileName ?? assetFileLabel(asset) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("button", { className: "rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-800 transition-colors hover:border-neutral-400 hover:bg-neutral-50", onClick: onClose, type: "button", children: "Close" }), asset.downloads.map((download) => (_jsx(AssetDownloadButton, { download: download }, `${asset.id}-${download.fileName}`)))] })] })] }) }) }));
+}
+export function BrandKitPage({ bannerControls, canUseDevActions = true, endpoints, manifest, }) {
+    const [selectedAsset, setSelectedAsset] = useState(null);
+    const [toasts, setToasts] = useState([]);
+    const toastSequence = useRef(0);
+    const [bannerPreviewVersion, setBannerPreviewVersion] = useState(0);
+    const [customBannerIds, setCustomBannerIds] = useState(() => new Set(manifest.bannerGroups.flatMap((group) => group.items.filter((asset) => asset.isCustom).map((asset) => asset.id))));
+    const avatarAssets = useMemo(() => findAvatarAssets(manifest.assetGroups), [manifest.assetGroups]);
+    const brandColorRows = useMemo(() => createColorRows(manifest), [manifest]);
+    const assetCount = useMemo(() => manifest.assetGroups.reduce((total, group) => total + group.items.length, 0), [manifest.assetGroups]);
+    const bannerAssetCount = useMemo(() => manifest.bannerGroups.reduce((total, group) => total + group.items.length, 0), [manifest.bannerGroups]);
+    const totalAssetCount = assetCount + bannerAssetCount;
+    const heroAsset = useMemo(() => findHeroAsset(manifest.assetGroups), [manifest.assetGroups]);
+    const footerAsset = useMemo(() => findFooterAsset(manifest.assetGroups), [manifest.assetGroups]);
+    const currentYear = new Date().getFullYear();
+    const brandLabel = manifest.brand.shortName ?? manifest.brand.name;
+    const homeUrl = manifest.brand.homeUrl ?? '/';
+    const allDownloadHref = `${manifest.route}/download/all`;
+    const bannerDownloadHref = `${manifest.route}/download/banners`;
+    const canInstallFavicons = canUseDevActions && process.env.NODE_ENV !== 'production';
+    const canUseBannerActions = canUseDevActions;
+    const canUseCustomBannerUploads = canUseDevActions && process.env.NODE_ENV !== 'production';
+    function showToast(message, tone = 'success') {
+        const id = Date.now() + toastSequence.current;
+        toastSequence.current += 1;
+        setToasts((current) => [...current, { id, message, tone }].slice(-4));
+        window.setTimeout(() => {
+            setToasts((current) => current.filter((toast) => toast.id !== id));
+        }, 3200);
+    }
+    function updateCustomBannerState(assetId, isCustom) {
+        setCustomBannerIds((current) => {
+            const next = new Set(current);
+            if (isCustom) {
+                next.add(assetId);
+            }
+            else {
+                next.delete(assetId);
+            }
+            return next;
+        });
+    }
+    function scrollToSection(event, sectionId) {
+        event.preventDefault();
+        const target = document.getElementById(sectionId);
+        if (!target)
+            return;
+        window.history.pushState(null, '', `#${sectionId}`);
+        target.scrollIntoView({ behavior: 'smooth' });
+    }
+    return (_jsxs("div", { className: "min-h-screen bg-slate-50 text-slate-950", children: [_jsx("header", { className: "border-b border-slate-200 bg-white", children: _jsx("div", { className: "mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_360px] lg:items-center", children: [_jsxs("div", { children: [_jsx("a", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase transition-colors hover:text-neutral-950", href: homeUrl, children: brandLabel }), _jsx("h1", { className: "mt-3 font-display text-5xl font-medium text-slate-950", children: "Brand Kit" }), _jsx("p", { className: "mt-4 max-w-2xl text-base leading-7 text-slate-600", children: deterministicIntro }), _jsxs("nav", { className: "mt-8 flex flex-wrap items-center gap-3", "aria-label": "Brand Kit sections", children: [_jsxs("a", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-neutral-700 underline-offset-4 transition-colors hover:text-neutral-950 hover:underline", href: "#logos", onClick: (event) => scrollToSection(event, 'logos'), children: [_jsx(ArrowDown, { "aria-hidden": true, className: "h-3.5 w-3.5" }), _jsx("span", { children: "Logos" })] }), _jsxs("a", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-neutral-700 underline-offset-4 transition-colors hover:text-neutral-950 hover:underline", href: "#colors", onClick: (event) => scrollToSection(event, 'colors'), children: [_jsx(ArrowDown, { "aria-hidden": true, className: "h-3.5 w-3.5" }), _jsx("span", { children: "Colors" })] }), manifest.bannerGroups.length ? (_jsxs("a", { className: "inline-flex items-center gap-1.5 pr-2 text-sm font-medium text-neutral-700 underline-offset-4 transition-colors hover:text-neutral-950 hover:underline sm:pr-4", href: "#banners", onClick: (event) => scrollToSection(event, 'banners'), children: [_jsx(ArrowDown, { "aria-hidden": true, className: "h-3.5 w-3.5" }), _jsx("span", { children: "Banners" })] })) : null, _jsx("span", { className: "text-sm text-slate-500", children: formatAssetCount(totalAssetCount) }), manifest.downloads.allAssets ? (_jsx(DownloadAllButton, { href: allDownloadHref })) : null] })] }), heroAsset ? (_jsx("div", { className: "flex items-center justify-start lg:justify-end", children: _jsx("div", { className: "relative flex aspect-[673/489] w-full max-w-xs items-center justify-center", children: _jsx("img", { src: heroAsset.previewUrl, alt: heroAsset.title, className: "h-full w-full object-contain" }) }) })) : null] }) }) }), _jsxs("main", { children: [_jsx("section", { className: "border-b border-slate-200 bg-slate-50", id: "logos", children: _jsxs("div", { className: "mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8", children: [_jsxs("div", { className: "max-w-2xl", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: "Logos" }), _jsx("h2", { className: "mt-3 font-display text-4xl font-medium text-slate-950", children: "Approved marks" })] }), _jsxs("div", { className: "mt-10 space-y-12", children: [manifest.assetGroups.map((group) => (_jsx(AssetGroup, { downloadHref: `${manifest.route}/download/${group.key}`, group: group, onPreview: setSelectedAsset }, group.key))), _jsx(AvatarGenerator, { assets: avatarAssets, brandLabel: brandLabel, canUseDevActions: canInstallFavicons, colorSections: manifest.colorSections, colors: manifest.brandColors, endpoints: endpoints })] })] }) }), _jsx("section", { className: "bg-white", id: "colors", children: _jsxs("div", { className: "mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8", children: [_jsxs("div", { className: "max-w-2xl", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: "Colors" }), _jsx("h2", { className: "mt-3 font-display text-4xl font-medium text-slate-950", children: "Color system" })] }), _jsxs("div", { className: "mt-12 space-y-14", children: [_jsxs("section", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-slate-950", children: "Brand Colors" }), _jsx("p", { className: "mt-1 text-sm text-slate-600", children: "Core digital colors for product and web work." })] }), _jsx("div", { className: "space-y-4", children: brandColorRows.map((section) => (_jsxs("section", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-semibold tracking-[0.12em] text-neutral-500 uppercase", children: section.label }), _jsx("div", { className: "space-y-4", children: section.rows.map((row, index) => (_jsx("div", { className: `grid gap-4 ${section.columns === 2
+                                                                        ? 'sm:grid-cols-2'
+                                                                        : 'sm:grid-cols-2 lg:grid-cols-3'}`, children: row.map((color) => (_jsx(ColorCard, { color: color, onToast: showToast }, color.name))) }, `${section.label}-${index}`))) })] }, section.label))) })] }), _jsx(PrintColorGroups, { groups: manifest.printColorGroups ?? [], onToast: showToast })] })] }) }), manifest.bannerGroups.length ? (_jsx("section", { className: "border-y border-slate-200 bg-slate-50", id: "banners", children: _jsxs("div", { className: "mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [_jsxs("div", { className: "max-w-2xl", children: [_jsx("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: "Banners" }), _jsx("h2", { className: "mt-3 font-display text-4xl font-medium text-slate-950", children: "Social profile assets" }), _jsx("p", { className: "mt-4 text-base leading-7 text-slate-600", children: "Ready-to-use PNG cover images sized for each platform." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-slate-500", children: formatAssetCount(bannerAssetCount) }), manifest.downloads.bannerAssets ? (_jsx(DownloadAllButton, { href: bannerDownloadHref })) : null] })] }), canUseBannerActions && endpoints?.bannerPresets && bannerControls ? (_jsx(BannerPresetControls, { controls: bannerControls, endpoint: endpoints.bannerPresets, onToast: showToast, onUpdated: () => setBannerPreviewVersion(Date.now()) })) : null, _jsx("div", { className: "mt-12 space-y-10", children: manifest.bannerGroups.map((group) => (_jsx(BannerGroup, { canUseDevActions: canUseCustomBannerUploads, customBannerIds: customBannerIds, endpoints: endpoints, group: group, onCustomStateChange: updateCustomBannerState, onToast: showToast, onUpdated: () => setBannerPreviewVersion(Date.now()), previewVersion: bannerPreviewVersion }, group.key))) })] }) })) : null] }), _jsx("footer", { className: "border-t border-slate-200 bg-white", children: _jsxs("div", { className: "mx-auto flex max-w-7xl flex-col gap-4 px-4 py-8 sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8", children: [footerAsset ? (_jsx("div", { className: "relative h-12 w-40", children: _jsx("img", { src: footerAsset.previewUrl, alt: footerAsset.title, className: "h-full w-full object-contain" }) })) : null, _jsxs("p", { className: "text-sm text-slate-500 md:text-right", children: ["\u00A9 ", currentYear, " ", manifest.brand.name, ". All rights reserved."] })] }) }), _jsx(Lightbox, { asset: selectedAsset, onClose: () => setSelectedAsset(null) }), _jsx(ToastStack, { toasts: toasts })] }));
+}
+//# sourceMappingURL=brandkit-page.js.map