@press2ai/theme-specialist-glossy 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@press2ai/theme-specialist-glossy",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Classless, AI-first glossy theme. Framework-agnostic templates (Hono, Astro, raw HTML). Semantic HTML, Schema.org microdata, JSON-LD — built for LLM crawlers.",
   "type": "module",
   "license": "MIT",

package/src/ai.ts

@@ -59,7 +59,7 @@ export function getAiManifest(opts: {
 
     powered_by: {
       name: '@press2ai/theme-specialist-glossy',
-      version: '3.0.0',
+      version: '3.0.2',
       homepage: 'https://www.npmjs.com/package/@press2ai/theme-specialist-glossy',
     },
 

package/src/styles/base.ts

@@ -33,19 +33,6 @@ body {
   letter-spacing: -.011em;
 }
 
-/* --- HEADER --- */
-body > header {
-  position: sticky; top: 0; z-index: 50;
-  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
-  border-bottom: 1px solid var(--border);
-}
-body > header nav {
-  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
-  height: 48px; display: flex; align-items: center; justify-content: space-between;
-}
-body > header nav a { color: var(--fg-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
-body > header nav a strong { font-size: 1rem; font-weight: 700; color: var(--fg); }
-
 /* --- MAIN (container) --- */
 main { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
 main > * + * { margin-top: var(--g5); }
@@ -72,26 +59,6 @@ label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--
 button, input[type="submit"] { background: var(--accent); color: var(--surface); border: none; border-radius: var(--pill); padding: var(--g2) var(--g4); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--ease); }
 button:hover, input[type="submit"]:hover { opacity: .85; }
 
-/* --- FOOTER --- */
-body > footer {
-  border-top: 1px solid var(--border); background: var(--surface);
-  padding: var(--g5) 0 var(--g4); margin-top: var(--g6);
-}
-body > footer > small {
-  display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
-  color: var(--fg-faint); font-size: .8rem;
-}
-body > footer a { color: var(--fg-muted); transition: color var(--ease); text-decoration: none; }
-body > footer a:hover { color: var(--accent); }
-body > footer > small > nav {
-  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4); margin-bottom: var(--g4);
-}
-body > footer > small > nav section { all: unset; display: block; }
-body > footer > small > nav strong { display: block; font-size: .8rem; font-weight: 600; color: var(--fg); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--g2); }
-body > footer > small > nav p { font-size: .8rem; line-height: 1.6; color: var(--fg-faint); margin: 0; max-width: 36ch; }
-body > footer > small > nav a { display: block; font-size: .8rem; line-height: 2; }
-body > footer > small > p { padding-top: var(--g3); border-top: 1px solid var(--border); }
-
 /* --- RESPONSIVE --- */
 @media (max-width: 640px) {
   :root { --pad: var(--g2); }

package/src/styles/index.ts

@@ -1,15 +1,17 @@
+// CSS for each component lives next to its HTML in `../templates/`.
+// This file is the dispatcher that the consumer calls via `composeCss('hero', ...)`.
+
 import { css as base } from './base.ts';
-import { css as header } from './header.ts';
-import { css as footer } from './footer.ts';
-import { css as hero } from './hero.ts';
-import { css as statBar } from './stat-bar.ts';
-import { css as categoryNav } from './category-nav.ts';
-import { css as steps } from './steps.ts';
-import { css as catalogGrid } from './catalog-grid.ts';
-import { css as profileCard } from './profile-card.ts';
-import { css as profileArticle } from './profile-article.ts';
-import { css as pagination } from './pagination.ts';
 import { css as forms } from './forms.ts';
+import { headerCss as header, footerCss as footer } from '../templates/layout.ts';
+import { css as hero } from '../templates/hero.ts';
+import { css as statBar } from '../templates/stat-bar.ts';
+import { css as categoryNav } from '../templates/category-nav.ts';
+import { css as steps } from '../templates/steps.ts';
+import { css as catalogGrid } from '../templates/catalog-grid.ts';
+import { css as profileCard } from '../templates/profile-card.ts';
+import { css as profileArticle } from '../templates/profile-article.ts';
+import { css as pagination } from '../templates/pagination.ts';
 
 const components: Record<string, string> = {
   hero,

package/src/templates/catalog-grid.ts

@@ -0,0 +1,18 @@
+import { esc } from './helpers.ts';
+
+// Selector matches `<section>` whose direct child is the article cards rendered
+// by `profileCard()`. Cards themselves are styled by profile-card.ts using the
+// same selector head — the two files share this invariant.
+const R = 'main > section:has(> article[itemscope])';
+
+export const css = `${R} { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3); }
+${R} > h2 { grid-column: 1 / -1; }
+@media (max-width: 640px) { ${R} { grid-template-columns: 1fr; } }`;
+
+export function catalogGrid(p: { title: string; filters?: string; cards: string }): string {
+  return `<section>
+<h2>${esc(p.title)}</h2>
+${p.filters ?? ''}
+${p.cards}
+</section>`;
+}

package/src/templates/catalog.ts

@@ -1,83 +1,10 @@
-import { esc } from './helpers.ts';
-
-export interface CatalogHeroProps {
-  badge?: string;
-  title: string;
-  subtitle?: string;
-  searchAction?: string;
-  searchPlaceholder?: string;
-  searchValue?: string;
-  ctas?: { label: string; href: string }[];
-}
-
-export function catalogHero(p: CatalogHeroProps): string {
-  const badge = p.badge ? `<p><small>${esc(p.badge)}</small></p>` : '';
-  const subtitle = p.subtitle ? `<p>${esc(p.subtitle)}</p>` : '';
-  const search = p.searchAction !== undefined ? `<form role="search" action="${esc(p.searchAction ?? '/')}" method="get">
-<input type="search" name="q" placeholder="${esc(p.searchPlaceholder ?? 'Szukaj...')}" value="${esc(p.searchValue ?? '')}" />
-<button type="submit">Szukaj</button>
-</form>` : '';
-  const ctas = p.ctas?.length ? `<nav>${p.ctas.map(
-    c => `<a href="${esc(c.href)}">${esc(c.label)}</a>`
-  ).join('\n')}</nav>` : '';
-  return `<hgroup>
-${badge}
-<h1>${p.title}</h1>
-${subtitle}
-${search}
-${ctas}
-</hgroup>`;
-}
-
-const STAT_ICONS: Record<string, string> = {
-  people: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
-  city: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01"/></svg>',
-  free: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
-};
-
-export function statBar(items: { value: string; label: string; icon?: string }[], summary?: string): string {
-  const divs = items.map(i => {
-    const icon = i.icon && STAT_ICONS[i.icon] ? `<span>${STAT_ICONS[i.icon]}</span>` : '';
-    return `<div>${icon}<dt>${esc(i.value)}</dt><dd>${esc(i.label)}</dd></div>`;
-  }).join('\n');
-  const summaryP = summary ? `<p>${esc(summary)}</p>` : '';
-  return `<section aria-label="Statystyki">${summaryP}<dl aria-hidden="true">\n${divs}\n</dl></section>`;
-}
-
-export function categoryNav(items: { href: string; label: string }[], ariaLabel = 'Kategorie'): string {
-  if (!items.length) return '';
-  const links = items.map(i => `<a href="${esc(i.href)}">${esc(i.label)}</a>`).join('');
-  return `<nav aria-label="${esc(ariaLabel)}">${links}</nav>`;
-}
-
-export function steps(title: string, items: { title: string; description: string }[]): string {
-  const lis = items.map(i => `<li><strong>${esc(i.title)}</strong><span>${esc(i.description)}</span></li>`).join('\n');
-  return `<section>\n<h2>${esc(title)}</h2>\n<ol>\n${lis}\n</ol>\n</section>`;
-}
-
-export function catalogGrid(p: { title: string; filters?: string; cards: string }): string {
-  return `<section>
-<h2>${esc(p.title)}</h2>
-${p.filters ?? ''}
-${p.cards}
-</section>`;
-}
-
-
-export interface PaginationProps {
-  current: number;
-  total: number;
-  baseHref?: string;
-  extraParams?: string;
-  prevLabel?: string;
-  nextLabel?: string;
-}
-
-export function pagination(p: PaginationProps): string {
-  if (p.total <= 1) return '';
-  const base = p.baseHref ?? '/';
-  const extra = p.extraParams ?? '';
-  const prev = p.current > 1 ? `<a href="${esc(base)}?p=${p.current - 1}${extra}">${esc(p.prevLabel ?? '\u2190 Poprzednia')}</a>` : '';
-  const next = p.current < p.total ? `<a href="${esc(base)}?p=${p.current + 1}${extra}">${esc(p.nextLabel ?? 'Następna \u2192')}</a>` : '';
-  return `<nav><p>${prev} Strona ${p.current} z ${p.total} ${next}</p></nav>`;
-}
+// Public entry point — kept for backwards compatibility with anything importing
+// `@press2ai/theme-specialist-glossy/catalog`. The functions live in their own
+// files now (each co-located with its CSS); this file just re-exports them.
+
+export { catalogHero, type CatalogHeroProps } from './hero.ts';
+export { statBar } from './stat-bar.ts';
+export { categoryNav } from './category-nav.ts';
+export { steps } from './steps.ts';
+export { catalogGrid } from './catalog-grid.ts';
+export { pagination, type PaginationProps } from './pagination.ts';

package/src/templates/category-nav.ts

@@ -0,0 +1,20 @@
+import { esc } from './helpers.ts';
+
+// Selector matches `<nav>` direct child of `main` that contains `<a>` — i.e.
+// the bare list-of-anchors nav rendered below. Hero's CTA <nav> sits inside
+// <hgroup>, not <main>, so it is not affected.
+const R = 'main > nav:has(> a)';
+
+export const css = `${R} { display: flex; flex-wrap: wrap; gap: var(--g1); }
+${R} > a {
+  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--g2);
+  border-radius: var(--pill); font-size: .8rem; font-weight: 500;
+  background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted); transition: all var(--ease);
+}
+${R} > a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }`;
+
+export function categoryNav(items: { href: string; label: string }[], ariaLabel = 'Kategorie'): string {
+  if (!items.length) return '';
+  const links = items.map(i => `<a href="${esc(i.href)}">${esc(i.label)}</a>`).join('');
+  return `<nav aria-label="${esc(ariaLabel)}">${links}</nav>`;
+}

package/src/templates/helpers.ts

@@ -8,3 +8,7 @@ export function esc(s: string | undefined | null): string {
 export function fullName(p: Profile): string {
   return `${p.firstName} ${p.lastName}`;
 }
+
+// Full-bleed escape from the centered `main` container — so a section can paint
+// edge-to-edge while its content stays aligned to var(--container).
+export const BREAKOUT = `margin-inline: calc(50% - 50vw); padding-inline: var(--pad);`;

package/src/templates/hero.ts

@@ -1,5 +1,47 @@
 import type { Profile } from '../schema.ts';
-import { esc, fullName } from './helpers.ts';
+import { esc, fullName, BREAKOUT } from './helpers.ts';
+
+// Both `hero(profile)` and `catalogHero(props)` render the SAME outer element
+// `<hgroup>` and share this CSS. If you split them visually, give one a
+// distinguishing wrapper/attribute and update the selector below.
+const R = 'main > hgroup';
+
+export const css = `${R} {
+  ${BREAKOUT} text-align: center; overflow: hidden; position: relative; isolation: isolate;
+  padding-block: var(--g6) var(--g5);
+  background: radial-gradient(ellipse 70% 50% at 20% 30%, var(--accent-glow) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 20%, rgba(13,148,136,.12) 0%, transparent 55%), linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
+  border-bottom: 1px solid var(--border);
+}
+${R}::before {
+  content: ''; position: absolute; inset: 0;
+  background-image: linear-gradient(rgba(124,92,252,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,252,.04) 1px, transparent 1px);
+  background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%); z-index: -1;
+}
+${R} > * { position: relative; }
+${R} > p:first-child { display: inline-flex; margin-bottom: var(--g4); }
+${R} > p:first-child small {
+  display: inline-flex; align-items: center; gap: var(--g1);
+  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
+  padding: var(--g1) var(--g2); border: 1px solid var(--border); border-radius: var(--pill);
+  font-weight: 600; color: var(--teal); box-shadow: var(--shadow);
+}
+${R} > p:first-child small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00d24a; box-shadow: 0 0 0 3px rgba(0,210,74,.2); }
+${R} h1 { max-width: 18ch; margin: 0 auto var(--g3); }
+${R} p { font-size: 1.25rem; line-height: 1.55; max-width: 38rem; margin: 0 auto var(--g3); }
+form[role="search"] {
+  display: flex; max-width: 495px; height: 48px; margin: var(--g4) auto 0;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill);
+  overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--ease);
+}
+form[role="search"]:focus-within { border-color: var(--accent); box-shadow: 0 4px 16px var(--accent-glow); }
+form[role="search"] input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--fg); padding: 0 var(--g3); font-size: 1rem; font-family: var(--font); outline: none; }
+form[role="search"] input::placeholder { color: var(--fg-faint); }
+form[role="search"] button { flex-shrink: 0; height: 100%; border: none; background: var(--accent); color: var(--surface); padding: 0 var(--g4); font-size: 1rem; font-weight: 600; font-family: var(--font); cursor: pointer; border-radius: 0; }
+form[role="search"] button:hover { opacity: .85; }
+@media (max-width: 640px) {
+  ${R} { padding-block: var(--g5) var(--g4); }
+  form[role="search"] { height: 40px; }
+}`;
 
 export function hero(p: Profile): string {
   const name = fullName(p);
@@ -20,3 +62,32 @@ ${badge}
 ${ctaBlock}
 </hgroup>`;
 }
+
+export interface CatalogHeroProps {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+  searchAction?: string;
+  searchPlaceholder?: string;
+  searchValue?: string;
+  ctas?: { label: string; href: string }[];
+}
+
+export function catalogHero(p: CatalogHeroProps): string {
+  const badge = p.badge ? `<p><small>${esc(p.badge)}</small></p>` : '';
+  const subtitle = p.subtitle ? `<p>${esc(p.subtitle)}</p>` : '';
+  const search = p.searchAction !== undefined ? `<form role="search" action="${esc(p.searchAction ?? '/')}" method="get">
+<input type="search" name="q" placeholder="${esc(p.searchPlaceholder ?? 'Szukaj...')}" value="${esc(p.searchValue ?? '')}" />
+<button type="submit">Szukaj</button>
+</form>` : '';
+  const ctas = p.ctas?.length ? `<nav>${p.ctas.map(
+    c => `<a href="${esc(c.href)}">${esc(c.label)}</a>`
+  ).join('\n')}</nav>` : '';
+  return `<hgroup>
+${badge}
+<h1>${p.title}</h1>
+${subtitle}
+${search}
+${ctas}
+</hgroup>`;
+}

package/src/templates/index.ts

@@ -1,6 +1,10 @@
 export { layout, type LayoutProps } from './layout.ts';
-export { hero } from './hero.ts';
+export { hero, catalogHero, type CatalogHeroProps } from './hero.ts';
 export { profileCard } from './profile-card.ts';
 export { profileArticle } from './profile-article.ts';
-export { catalogHero, catalogGrid, statBar, categoryNav, steps, pagination, type CatalogHeroProps, type PaginationProps } from './catalog.ts';
+export { statBar } from './stat-bar.ts';
+export { categoryNav } from './category-nav.ts';
+export { steps } from './steps.ts';
+export { catalogGrid } from './catalog-grid.ts';
+export { pagination, type PaginationProps } from './pagination.ts';
 export { esc, fullName } from './helpers.ts';

package/src/templates/layout.ts

@@ -1,5 +1,43 @@
 import { esc } from './helpers.ts';
 
+// Header/footer CSS lives here because the matching HTML is built inline by
+// `layout()` below — `body > header > nav` and `body > footer > small`.
+// Change the markup, change the selector. Don't split these apart again.
+
+export const headerCss = `body > header {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
+  border-bottom: 1px solid var(--border);
+}
+body > header nav {
+  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
+  height: 48px; display: flex; align-items: center; justify-content: space-between;
+}
+body > header nav a { color: var(--fg-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
+body > header nav a strong { font-size: 1rem; font-weight: 700; color: var(--fg); }`;
+
+export const footerCss = `body > footer {
+  border-top: 1px solid var(--border); background: var(--surface);
+  padding: var(--g5) 0 var(--g4); margin-top: var(--g6);
+}
+body > footer > small {
+  display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
+  color: var(--fg-faint); font-size: .8rem;
+}
+body > footer a { color: var(--fg-muted); transition: color var(--ease); text-decoration: none; }
+body > footer a:hover { color: var(--accent); }
+body > footer > small > nav {
+  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4); margin-bottom: var(--g4);
+}
+body > footer > small > nav section { all: unset; display: block; }
+body > footer > small > nav strong { display: block; font-size: .8rem; font-weight: 600; color: var(--fg); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--g2); }
+body > footer > small > nav p { font-size: .8rem; line-height: 1.6; color: var(--fg-faint); margin: 0; max-width: 36ch; }
+body > footer > small > nav a { display: block; font-size: .8rem; line-height: 2; }
+body > footer > small > p { padding-top: var(--g3); border-top: 1px solid var(--border); }
+@media (max-width: 640px) {
+  body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g3); }
+}`;
+
 export interface LayoutProps {
   title: string;
   description?: string;
@@ -12,7 +50,7 @@ export interface LayoutProps {
   footerContent?: string;
 }
 
-const THEME_VERSION = '3.0.0';
+const THEME_VERSION = '3.0.2';
 
 export function layout(props: LayoutProps, body: string): string {
   const {

package/src/templates/pagination.ts

@@ -0,0 +1,31 @@
+import { esc } from './helpers.ts';
+
+// Selector matches `<nav>` containing `<p>` — the shape of `pagination()`.
+// category-nav uses `<nav>` containing `<a>` directly, not `<p>`, so they don't collide.
+const R = 'main > nav:has(> p)';
+
+export const css = `${R} > p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: 1rem; color: var(--fg-faint); }
+${R} a {
+  height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
+  border-radius: var(--pill); background: var(--surface); border: 1px solid var(--border);
+  font-size: .8rem; font-weight: 500; transition: all var(--ease); text-decoration: none;
+}
+${R} a:hover { border-color: var(--accent); color: var(--accent); }`;
+
+export interface PaginationProps {
+  current: number;
+  total: number;
+  baseHref?: string;
+  extraParams?: string;
+  prevLabel?: string;
+  nextLabel?: string;
+}
+
+export function pagination(p: PaginationProps): string {
+  if (p.total <= 1) return '';
+  const base = p.baseHref ?? '/';
+  const extra = p.extraParams ?? '';
+  const prev = p.current > 1 ? `<a href="${esc(base)}?p=${p.current - 1}${extra}">${esc(p.prevLabel ?? '\u2190 Poprzednia')}</a>` : '';
+  const next = p.current < p.total ? `<a href="${esc(base)}?p=${p.current + 1}${extra}">${esc(p.nextLabel ?? 'Następna \u2192')}</a>` : '';
+  return `<nav><p>${prev} Strona ${p.current} z ${p.total} ${next}</p></nav>`;
+}

package/src/templates/profile-article.ts

@@ -1,6 +1,29 @@
 import type { Profile } from '../schema.ts';
 import { esc, fullName } from './helpers.ts';
 
+// Selector root MUST match the outer element below (`<article itemscope>` inside <main>).
+// If you change the HTML root, change R — and vice versa. Keep them in this file together.
+const R = 'main > article[itemscope]';
+
+export const css = `${R} { max-width: 667px; }
+${R} > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--fg); }
+${R} > header h1 { font-size: 2.441rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: var(--g1); }
+${R} > header p { font-size: 1.25rem; color: var(--fg-muted); margin: 0; }
+${R} > header small { display: block; margin-top: var(--g1); font-size: .8rem; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
+${R} address { font-style: normal; font-size: 1rem; color: var(--fg-muted); padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--border); }
+${R} section { margin: var(--g4) 0; padding-top: var(--g3); border-top: 1px solid var(--border); }
+${R} section h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--g2); }
+${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g1); }
+${R} ul li { font-size: .8rem; font-weight: 500; color: var(--fg-muted); }
+${R} ul li:not(:last-child)::after { content: ','; }
+${R} dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--g1) var(--g3); }
+${R} dt { font-size: .8rem; color: var(--fg-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+${R} dd { margin: 0; font-size: 1rem; }
+@media (max-width: 640px) {
+  ${R} dl { grid-template-columns: 1fr; gap: 2px 0; }
+  ${R} dt { margin-top: var(--g2); }
+}`;
+
 export function profileArticle(p: Profile): string {
   const name = fullName(p);
   const socials = Object.entries(p.social ?? {}).filter(([, v]) => v);

package/src/templates/profile-card.ts

@@ -1,6 +1,33 @@
 import type { Profile } from '../schema.ts';
 import { esc, fullName } from './helpers.ts';
 
+// Card sits inside catalog grid: `<section><h2>...</h2><article>...</article>...</section>`.
+// Selector targets the article only when wrapped by such a section — keep that
+// shape in sync with `catalogGrid()` in catalog-grid.ts.
+const R = 'main > section:has(> article[itemscope]) > article[itemscope]';
+
+export const css = `${R} {
+  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
+  padding: var(--g3); display: flex; flex-direction: column;
+  box-shadow: var(--shadow); transition: all var(--ease);
+}
+${R}:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--border-strong); }
+${R} > div[aria-hidden] {
+  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+  font-size: .8rem; font-weight: 700; color: var(--surface); background: var(--accent); margin-bottom: var(--g2);
+}
+${R} header { margin-bottom: var(--g1); }
+${R} h2 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
+${R} h2 a { color: var(--fg); text-decoration: none; }
+${R} h2 a:hover { color: var(--accent); }
+${R} header p { font-size: .8rem; color: var(--fg-faint); margin: 0; }
+${R} header p:has([itemprop="address"]) { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
+${R} header p:has([itemprop="address"])::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }
+${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
+${R} ul li { background: var(--accent-soft); color: var(--accent); padding: 1px var(--g1); border-radius: var(--pill); font-size: .7rem; font-weight: 500; }
+${R} > a:last-child { display: inline-flex; margin-top: auto; padding-top: var(--g2); font-size: .8rem; font-weight: 600; color: var(--accent); }
+${R} > a:last-child:hover { color: var(--fg); }`;
+
 export function profileCard(p: Profile, href: string): string {
   const name = fullName(p);
   const initials = `${(p.firstName?.[0] ?? '').toUpperCase()}${(p.lastName?.[0] ?? '').toUpperCase()}`;

package/src/templates/stat-bar.ts

@@ -0,0 +1,31 @@
+import { esc } from './helpers.ts';
+
+// Selector matches `<section>` whose direct child is `<dl>` — that's how
+// `statBar()` below renders. If you change the wrapper, update the selector.
+const R = 'main > section:has(> dl)';
+
+export const css = `${R} > dl { display: flex; justify-content: center; gap: var(--g5); }
+${R} > dl div { text-align: center; }
+${R} > dl div > span:has(> svg) {
+  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
+  margin: 0 auto var(--g1); background: var(--accent-soft); border-radius: 50%; color: var(--accent);
+}
+${R} > dl div > span:has(> svg) > svg { width: 18px; height: 18px; }
+${R} > dl dt { font-size: 1.563rem; font-weight: 800; line-height: 1.2; color: var(--accent); }
+${R} > dl dd { margin: 2px 0 0; font-size: .8rem; color: var(--fg-faint); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
+@media (max-width: 640px) { ${R} > dl { gap: var(--g3); } }`;
+
+const STAT_ICONS: Record<string, string> = {
+  people: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
+  city: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01"/></svg>',
+  free: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
+};
+
+export function statBar(items: { value: string; label: string; icon?: string }[], summary?: string): string {
+  const divs = items.map(i => {
+    const icon = i.icon && STAT_ICONS[i.icon] ? `<span>${STAT_ICONS[i.icon]}</span>` : '';
+    return `<div>${icon}<dt>${esc(i.value)}</dt><dd>${esc(i.label)}</dd></div>`;
+  }).join('\n');
+  const summaryP = summary ? `<p>${esc(summary)}</p>` : '';
+  return `<section aria-label="Statystyki">${summaryP}<dl aria-hidden="true">\n${divs}\n</dl></section>`;
+}

package/src/{styles → templates}/steps.ts

@@ -1,5 +1,8 @@
-import { BREAKOUT } from './_shared.ts';
+import { esc, BREAKOUT } from './helpers.ts';
+
+// Selector matches `<section>` containing `<ol>` — that's the shape of `steps()` below.
 const R = 'main > section:has(> ol)';
+
 export const css = `${R} {
   ${BREAKOUT} background: var(--surface); padding-block: var(--g5);
   border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
@@ -22,3 +25,8 @@ ${R} > ol > li::before {
 ${R} > ol > li strong { display: block; font-size: 1rem; margin-bottom: 4px; }
 ${R} > ol > li span { font-size: .8rem; line-height: 1.5; color: var(--fg-faint); }
 @media (max-width: 640px) { ${R} > ol { grid-template-columns: 1fr; } }`;
+
+export function steps(title: string, items: { title: string; description: string }[]): string {
+  const lis = items.map(i => `<li><strong>${esc(i.title)}</strong><span>${esc(i.description)}</span></li>`).join('\n');
+  return `<section>\n<h2>${esc(title)}</h2>\n<ol>\n${lis}\n</ol>\n</section>`;
+}

package/src/styles/_shared.ts

@@ -1 +0,0 @@
-export const BREAKOUT = `margin-inline: calc(50% - 50vw); padding-inline: var(--pad);`;

package/src/styles/catalog-grid.ts

@@ -1,4 +0,0 @@
-const R = 'main > section:has(> article[itemscope])';
-export const css = `${R} { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3); }
-${R} > h2 { grid-column: 1 / -1; }
-@media (max-width: 640px) { ${R} { grid-template-columns: 1fr; } }`;

package/src/styles/category-nav.ts

@@ -1,8 +0,0 @@
-const R = 'main > nav:has(> a)';
-export const css = `${R} { display: flex; flex-wrap: wrap; gap: var(--g1); }
-${R} > a {
-  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--g2);
-  border-radius: var(--pill); font-size: .8rem; font-weight: 500;
-  background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted); transition: all var(--ease);
-}
-${R} > a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }`;

package/src/styles/footer.ts

@@ -1,23 +0,0 @@
-export const css = `body > footer {
-  border-top: 1px solid var(--line); background: var(--white); padding: var(--g5) 0 var(--g4);
-}
-body > footer > small {
-  display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
-  color: var(--ink-3); font-size: var(--t-xs);
-}
-body > footer a { color: var(--ink-2); transition: color var(--ease); }
-body > footer a:hover { color: var(--violet); }
-body > footer > small > nav {
-  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4); margin-bottom: var(--g4);
-}
-body > footer > small > nav section { all: unset; display: block; }
-body > footer > small > nav strong {
-  display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink);
-  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--g2);
-}
-body > footer > small > nav p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch; }
-body > footer > small > nav a { display: block; font-size: var(--t-xs); line-height: 2; }
-body > footer > small > p { padding-top: var(--g3); border-top: 1px solid var(--line); }
-@media (max-width: 640px) {
-  body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g3); }
-}`;

package/src/styles/header.ts

@@ -1,11 +0,0 @@
-export const css = `body > header {
-  position: sticky; top: 0; z-index: 50;
-  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
-  border-bottom: 1px solid var(--line);
-}
-body > header nav {
-  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
-  height: 48px; display: flex; align-items: center; justify-content: space-between;
-}
-body > header nav a { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
-body > header nav a strong { font-size: var(--t-md); font-weight: 700; color: var(--ink); }`;

package/src/styles/hero.ts

@@ -1,38 +0,0 @@
-import { BREAKOUT } from './_shared.ts';
-const R = 'main > hgroup';
-export const css = `${R} {
-  ${BREAKOUT} text-align: center; overflow: hidden; position: relative; isolation: isolate;
-  padding-block: var(--g6) var(--g5);
-  background: radial-gradient(ellipse 70% 50% at 20% 30%, var(--accent-glow) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 20%, rgba(13,148,136,.12) 0%, transparent 55%), linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
-  border-bottom: 1px solid var(--border);
-}
-${R}::before {
-  content: ''; position: absolute; inset: 0;
-  background-image: linear-gradient(rgba(124,92,252,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,252,.04) 1px, transparent 1px);
-  background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%); z-index: -1;
-}
-${R} > * { position: relative; }
-${R} > p:first-child { display: inline-flex; margin-bottom: var(--g4); }
-${R} > p:first-child small {
-  display: inline-flex; align-items: center; gap: var(--g1);
-  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
-  padding: var(--g1) var(--g2); border: 1px solid var(--border); border-radius: var(--pill);
-  font-weight: 600; color: var(--teal); box-shadow: var(--shadow);
-}
-${R} > p:first-child small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00d24a; box-shadow: 0 0 0 3px rgba(0,210,74,.2); }
-${R} h1 { max-width: 18ch; margin: 0 auto var(--g3); }
-${R} p { font-size: 1.25rem; line-height: 1.55; max-width: 38rem; margin: 0 auto var(--g3); }
-form[role="search"] {
-  display: flex; max-width: 495px; height: 48px; margin: var(--g4) auto 0;
-  background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill);
-  overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--ease);
-}
-form[role="search"]:focus-within { border-color: var(--accent); box-shadow: 0 4px 16px var(--accent-glow); }
-form[role="search"] input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--fg); padding: 0 var(--g3); font-size: 1rem; font-family: var(--font); outline: none; }
-form[role="search"] input::placeholder { color: var(--fg-faint); }
-form[role="search"] button { flex-shrink: 0; height: 100%; border: none; background: var(--accent); color: var(--surface); padding: 0 var(--g4); font-size: 1rem; font-weight: 600; font-family: var(--font); cursor: pointer; border-radius: 0; }
-form[role="search"] button:hover { opacity: .85; }
-@media (max-width: 640px) {
-  ${R} { padding-block: var(--g5) var(--g4); }
-  form[role="search"] { height: 40px; }
-}`;

package/src/styles/pagination.ts

@@ -1,8 +0,0 @@
-const R = 'main > nav:has(> p)';
-export const css = `${R} > p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: 1rem; color: var(--fg-faint); }
-${R} a {
-  height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
-  border-radius: var(--pill); background: var(--surface); border: 1px solid var(--border);
-  font-size: .8rem; font-weight: 500; transition: all var(--ease); text-decoration: none;
-}
-${R} a:hover { border-color: var(--accent); color: var(--accent); }`;

package/src/styles/profile-article.ts

@@ -1,19 +0,0 @@
-const R = 'main > article[itemscope]';
-export const css = `${R} { max-width: 667px; }
-${R} > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--fg); }
-${R} > header h1 { font-size: 2.441rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: var(--g1); }
-${R} > header p { font-size: 1.25rem; color: var(--fg-muted); margin: 0; }
-${R} > header small { display: block; margin-top: var(--g1); font-size: .8rem; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
-${R} address { font-style: normal; font-size: 1rem; color: var(--fg-muted); padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--border); }
-${R} section { margin: var(--g4) 0; padding-top: var(--g3); border-top: 1px solid var(--border); }
-${R} section h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--g2); }
-${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g1); }
-${R} ul li { font-size: .8rem; font-weight: 500; color: var(--fg-muted); }
-${R} ul li:not(:last-child)::after { content: ','; }
-${R} dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--g1) var(--g3); }
-${R} dt { font-size: .8rem; color: var(--fg-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
-${R} dd { margin: 0; font-size: 1rem; }
-@media (max-width: 640px) {
-  ${R} dl { grid-template-columns: 1fr; gap: 2px 0; }
-  ${R} dt { margin-top: var(--g2); }
-}`;

package/src/styles/profile-card.ts

@@ -1,22 +0,0 @@
-const R = 'main > section:has(> article[itemscope]) > article[itemscope]';
-export const css = `${R} {
-  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
-  padding: var(--g3); display: flex; flex-direction: column;
-  box-shadow: var(--shadow); transition: all var(--ease);
-}
-${R}:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--border-strong); }
-${R} > div[aria-hidden] {
-  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
-  font-size: .8rem; font-weight: 700; color: var(--surface); background: var(--accent); margin-bottom: var(--g2);
-}
-${R} header { margin-bottom: var(--g1); }
-${R} h2 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
-${R} h2 a { color: var(--fg); text-decoration: none; }
-${R} h2 a:hover { color: var(--accent); }
-${R} header p { font-size: .8rem; color: var(--fg-faint); margin: 0; }
-${R} header p:has([itemprop="address"]) { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
-${R} header p:has([itemprop="address"])::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }
-${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
-${R} ul li { background: var(--accent-soft); color: var(--accent); padding: 1px var(--g1); border-radius: var(--pill); font-size: .7rem; font-weight: 500; }
-${R} > a:last-child { display: inline-flex; margin-top: auto; padding-top: var(--g2); font-size: .8rem; font-weight: 600; color: var(--accent); }
-${R} > a:last-child:hover { color: var(--fg); }`;

package/src/styles/stat-bar.ts

@@ -1,11 +0,0 @@
-const R = 'main > section:has(> dl)';
-export const css = `${R} > dl { display: flex; justify-content: center; gap: var(--g5); }
-${R} > dl div { text-align: center; }
-${R} > dl div > span:has(> svg) {
-  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
-  margin: 0 auto var(--g1); background: var(--accent-soft); border-radius: 50%; color: var(--accent);
-}
-${R} > dl div > span:has(> svg) > svg { width: 18px; height: 18px; }
-${R} > dl dt { font-size: 1.563rem; font-weight: 800; line-height: 1.2; color: var(--accent); }
-${R} > dl dd { margin: 2px 0 0; font-size: .8rem; color: var(--fg-faint); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
-@media (max-width: 640px) { ${R} > dl { gap: var(--g3); } }`;