@press2ai/theme-therapy-soft 0.1.0

package/README.md

@@ -0,0 +1,19 @@
+# @press2ai/theme-therapy-soft
+
+Warm classless theme for therapy verticals (`otwarty-terapeuta`).
+
+Sage greens + warm beiges, Crimson Text serif headings, Inter body. Structurally compatible with `@press2ai/engine` `TrenerTheme` interface — drop-in replacement for `@press2ai/theme-specialist-glossy` in CEIDG verticals.
+
+## Usage
+
+```ts
+import {
+  layout, profileCard, profileArticle, esc,
+  catalogHero, catalogGrid, statBar, categoryNav, pagination,
+} from '@press2ai/theme-therapy-soft/templates';
+import { composeCss } from '@press2ai/theme-therapy-soft/styles';
+
+const CSS_TAG = `<style>${composeCss('hero', 'statBar', 'categoryNav', 'catalogGrid', 'profileCard', 'profileArticle', 'pagination', 'forms')}</style>`;
+```
+
+Pair with `createVerticalApp` from `@press2ai/engine/ceidg-vertical`.

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@press2ai/theme-therapy-soft",
+  "version": "0.1.0",
+  "description": "Warm sage/beige classless theme for therapy verticals. Crimson Text serif + Inter. Structurally compatible with @press2ai/engine TrenerTheme.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://www.npmjs.com/package/@press2ai/theme-therapy-soft",
+  "keywords": [
+    "hono",
+    "cloudflare-workers",
+    "classless",
+    "semantic",
+    "therapy",
+    "schema-org",
+    "press2ai"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./templates": "./src/templates/index.ts",
+    "./styles": "./src/styles/index.ts"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { composeCss, allCss } from './styles/index.ts';
+export type { TherapyProfile } from './templates/helpers.ts';

package/src/styles/base.ts

@@ -0,0 +1,86 @@
+export const css = `:root {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
+
+  --g1: 0.5rem; --g2: 0.8125rem; --g3: 1.3125rem; --g4: 2.125rem; --g5: 3.4375rem; --g6: 5.5625rem; --g7: 9rem;
+  --t-xs: 0.8125rem; --t-sm: 1rem; --t-md: 1.25rem; --t-lg: 1.625rem; --t-xl: 2.125rem; --t-2xl: 2.875rem; --t-3xl: 3.75rem;
+  --container: 1180px; --pad: var(--g4);
+  --w-6: 520px; --w-8: 720px; --w-10: 880px; --measure: 38rem;
+
+  --sage-50: #f7f5f2;
+  --sage-100: #efece7;
+  --sage-200: #dde2dd;
+  --sage-400: #a8baa8;
+  --sage-500: #8ea78e;
+  --sage-600: #7a8f7a;
+  --sage-700: #6a7f6a;
+  --sage-800: #4f5f4f;
+
+  --beige-50: #faf5ef;
+  --beige-100: #f3ece4;
+  --beige-200: #e8ddd0;
+
+  --stone-300: #d6d3d1;
+  --stone-400: #a8a29e;
+  --stone-500: #78716c;
+  --stone-600: #57534e;
+  --stone-700: #44403c;
+  --stone-900: #1c1917;
+
+  --emerald-100: #d1fae5;
+  --emerald-700: #047857;
+  --amber-100: #fef3c7;
+  --amber-700: #b45309;
+
+  --bg: var(--sage-50);
+  --card: var(--beige-50);
+  --ink: var(--stone-900);
+  --ink-2: var(--stone-600);
+  --ink-3: var(--stone-500);
+  --line: var(--stone-300);
+  --line-soft: var(--beige-200);
+  --accent: var(--sage-600);
+  --accent-h: var(--sage-700);
+  --accent-soft: var(--sage-100);
+
+  --r: 4px; --r-lg: 8px; --pill: 999px;
+  --shadow: 0 1px 2px rgba(60,50,40,.04);
+  --shadow-md: 0 4px 16px rgba(60,50,40,.06), 0 1px 3px rgba(60,50,40,.04);
+  --shadow-up: 0 12px 28px rgba(60,50,40,.10), 0 2px 6px rgba(60,50,40,.04);
+  --ease: 220ms cubic-bezier(.4,0,.2,1);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
+body {
+  font-family: var(--font-sans); font-weight: 400;
+  color: var(--ink); background: var(--bg); line-height: 1.65; overflow-x: clip;
+}
+h1, h2, h3, h4 {
+  color: var(--ink); font-family: var(--font-serif); font-weight: 600;
+  letter-spacing: -0.01em; line-height: 1.15;
+}
+h1 { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-3xl)); margin-bottom: var(--g3); }
+h2 { font-size: clamp(var(--t-lg), 3vw, var(--t-xl)); margin-bottom: var(--g2); }
+h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; margin-bottom: var(--g2); }
+h4 { font-size: var(--t-sm); font-weight: 600; }
+p {
+  font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2);
+  margin-bottom: var(--g2); max-width: var(--measure);
+}
+a { color: var(--accent-h); text-decoration: none; transition: color var(--ease); }
+a:hover { color: var(--ink); }
+small { font-size: var(--t-xs); color: var(--ink-3); }
+strong { color: var(--ink); font-weight: 600; }
+main {
+  max-width: var(--container); margin-inline: auto;
+  padding-inline: var(--pad); padding-top: 0; padding-bottom: 0;
+}
+main:not(:has(> section, > article, > div, > nav)) {
+  padding-top: var(--g5); padding-bottom: var(--g5);
+}
+main > * + * { margin-top: var(--g6); }
+@media (max-width: 640px) {
+  :root { --pad: var(--g3); }
+  main { padding: 0 var(--pad) var(--g4); }
+  main > * + * { margin-top: var(--g5); }
+}`;

package/src/styles/catalog-grid.ts

@@ -0,0 +1,21 @@
+export const css = `section:has(> article[itemscope]) {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--g3);
+}
+section:has(> article[itemscope]) > h2 {
+  grid-column: 1 / -1; text-align: center; margin-bottom: var(--g4);
+  font-family: var(--font-serif); font-weight: 400;
+  font-size: clamp(var(--t-lg), 3vw, var(--t-xl));
+}
+section:has(> article[itemscope]) > h2::before {
+  content: 'Nasi terapeuci'; display: block;
+  font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500;
+  color: var(--sage-700); letter-spacing: 0.1em; text-transform: uppercase;
+  margin-bottom: var(--g2);
+}
+section:has(> article[itemscope]) > nav[aria-label] {
+  grid-column: 1 / -1; margin-bottom: var(--g3);
+}
+@media (max-width: 640px) {
+  section:has(> article[itemscope]) { grid-template-columns: 1fr; }
+}`;

package/src/styles/category-nav.ts

@@ -0,0 +1,12 @@
+export const css = `nav[aria-label] {
+  display: flex; flex-wrap: wrap; gap: var(--g1); justify-content: center;
+}
+nav[aria-label] a {
+  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--g3);
+  font-size: var(--t-xs); font-weight: 500;
+  background: var(--beige-50); border: 1px solid var(--line);
+  color: var(--ink-2); transition: all var(--ease);
+}
+nav[aria-label] a:hover {
+  background: var(--sage-100); border-color: var(--sage-400); color: var(--sage-700);
+}`;

package/src/styles/footer.ts

@@ -0,0 +1,29 @@
+export const css = `body > footer {
+  border-top: 1px solid var(--line-soft); background: var(--beige-50);
+  padding: var(--g6) 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(--ink-3); font-size: var(--t-xs);
+}
+body > footer a { color: var(--ink-2); transition: color var(--ease); }
+body > footer a:hover { color: var(--accent-h); }
+body > footer > small > nav {
+  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g5);
+  margin-bottom: var(--g5); padding-bottom: var(--g4);
+  border-bottom: 1px solid var(--line-soft);
+}
+body > footer > small > nav section { all: unset; display: block; }
+body > footer > small > nav strong {
+  display: block; font-family: var(--font-sans); font-size: var(--t-xs);
+  font-weight: 600; color: var(--ink); margin-bottom: var(--g2);
+}
+body > footer > small > nav p { font-size: var(--t-xs); line-height: 1.7; color: var(--ink-3); margin: 0; max-width: 36ch; }
+body > footer > small > nav a { display: block; font-size: var(--t-xs); line-height: 2; color: var(--ink-2); }
+body > footer > small > nav a:hover { color: var(--accent-h); }
+body > footer > small > p {
+  font-size: var(--t-xs); color: var(--ink-3); text-align: left;
+}
+@media (max-width: 640px) {
+  body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g3); }
+}`;

package/src/styles/forms.ts

@@ -0,0 +1,20 @@
+export const css = `form:not([role="search"]) label {
+  display: block; font-size: var(--t-sm); color: var(--ink-2);
+  font-weight: 500; margin-bottom: var(--g1); font-family: var(--font-sans);
+}
+form:not([role="search"]) input[type="text"] {
+  display: block; width: 100%; margin-top: var(--g1); height: 48px;
+  padding: 0 var(--g3); background: var(--beige-50); border: 1px solid var(--line);
+  color: var(--ink); font-size: var(--t-sm); font-family: var(--font-sans);
+  transition: border-color var(--ease);
+}
+form:not([role="search"]) input[type="text"]:focus {
+  outline: none; border-color: var(--sage-600);
+}
+form:not([role="search"]) button[type="submit"] {
+  margin-top: var(--g3); height: 48px; padding: 0 var(--g4);
+  border: none; background: var(--sage-600); color: var(--beige-50);
+  font-size: var(--t-sm); font-weight: 500; font-family: var(--font-sans);
+  cursor: pointer; transition: background var(--ease);
+}
+form:not([role="search"]) button[type="submit"]:hover { background: var(--sage-700); }`;

package/src/styles/header.ts

@@ -0,0 +1,16 @@
+export const css = `body > header {
+  background: var(--beige-50); border-bottom: 1px solid var(--line-soft);
+}
+body > header nav {
+  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
+  height: 80px; display: flex; align-items: center; justify-content: space-between;
+}
+body > header nav a {
+  color: var(--ink-2); text-decoration: none; font-size: var(--t-xs);
+  font-weight: 500; transition: color var(--ease);
+}
+body > header nav a:hover { color: var(--ink); }
+body > header nav a strong {
+  font-family: var(--font-serif); font-size: var(--t-md); font-weight: 600;
+  color: var(--ink); letter-spacing: 0;
+}`;

package/src/styles/hero.ts

@@ -0,0 +1,68 @@
+export const css = `hgroup {
+  position: relative; text-align: center; isolation: isolate;
+  padding: var(--g7) var(--pad) var(--g6);
+  margin-inline: calc(50% - 50vw);
+  background: var(--sage-100);
+  border-bottom: 1px solid var(--line-soft);
+}
+hgroup > * { position: relative; max-width: var(--w-10); margin-inline: auto; }
+hgroup > p:first-child {
+  display: inline-flex; margin: 0 auto var(--g3); padding: 0;
+}
+hgroup > p:first-child small {
+  display: inline-flex; align-items: center; gap: var(--g1);
+  background: var(--beige-50); padding: var(--g1) var(--g2);
+  border: 1px solid var(--sage-200); border-radius: var(--pill);
+  font-size: var(--t-xs); font-weight: 500; color: var(--sage-700);
+  letter-spacing: 0.04em; text-transform: uppercase;
+}
+hgroup > p:first-child small::before {
+  content: ''; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--sage-500); box-shadow: 0 0 0 3px rgba(142,167,142,.25);
+}
+hgroup h1 {
+  font-family: var(--font-serif); font-weight: 400;
+  max-width: 22ch; margin: 0 auto var(--g4); color: var(--stone-900);
+  letter-spacing: -0.015em;
+}
+hgroup > p:not(:first-child) {
+  font-family: var(--font-sans); font-size: var(--t-md); font-weight: 400;
+  line-height: 1.6; color: var(--ink-2); max-width: var(--measure);
+  margin: 0 auto var(--g4);
+}
+hgroup > nav {
+  display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
+  margin-top: var(--g4); margin-bottom: 0;
+}
+hgroup > nav > a {
+  display: inline-flex; align-items: center; height: 52px; padding: 0 var(--g4);
+  font-weight: 500; font-size: var(--t-sm); transition: all var(--ease);
+  background: var(--beige-50); color: var(--ink); border: 1px solid var(--line);
+}
+hgroup > nav > a:first-child {
+  background: var(--sage-600); color: var(--beige-50); border-color: transparent;
+}
+hgroup > nav > a:first-child:hover { background: var(--sage-700); }
+hgroup > nav > a:not(:first-child):hover { background: var(--beige-100); }
+form[role="search"] {
+  display: flex; max-width: var(--w-6); height: 52px;
+  margin: var(--g4) auto 0; background: var(--beige-50);
+  border: 1px solid var(--line); overflow: hidden; transition: all var(--ease);
+}
+form[role="search"]:focus-within { border-color: var(--sage-600); }
+form[role="search"] input {
+  flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink);
+  padding: 0 var(--g3); font-size: var(--t-sm); font-family: var(--font-sans); outline: none;
+  -webkit-appearance: none; appearance: none;
+}
+form[role="search"] input::placeholder { color: var(--ink-3); }
+form[role="search"] button {
+  flex-shrink: 0; height: 100%; border: none; background: var(--sage-600); color: var(--beige-50);
+  padding: 0 var(--g4); font-size: var(--t-sm); font-weight: 500;
+  font-family: var(--font-sans); cursor: pointer; transition: background var(--ease);
+}
+form[role="search"] button:hover { background: var(--sage-700); }
+@media (max-width: 640px) {
+  hgroup { padding: var(--g5) var(--pad) var(--g4); }
+  hgroup > nav > a, form[role="search"] { height: 44px; }
+}`;

package/src/styles/index.ts

@@ -0,0 +1,32 @@
+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 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';
+
+const components: Record<string, string> = {
+  hero,
+  statBar,
+  categoryNav,
+  catalogGrid,
+  profileCard,
+  profileArticle,
+  pagination,
+  forms,
+};
+
+const layoutCss = base + '\n' + header + '\n' + footer;
+
+export function composeCss(...names: string[]): string {
+  return layoutCss + '\n' + names.map(n => components[n] ?? '').join('\n');
+}
+
+export const allCss = layoutCss + '\n' + Object.values(components).join('\n');
+
+export { base, header, footer, hero, statBar, categoryNav, catalogGrid, profileCard, profileArticle, pagination, forms };

package/src/styles/pagination.ts

@@ -0,0 +1,13 @@
+export const css = `main > nav p {
+  display: flex; align-items: center; justify-content: center; gap: var(--g3);
+  font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-sans);
+}
+main > nav a {
+  height: 40px; display: inline-flex; align-items: center; padding: 0 var(--g3);
+  background: var(--beige-50); border: 1px solid var(--line);
+  font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
+  transition: all var(--ease);
+}
+main > nav a:hover {
+  background: var(--sage-100); border-color: var(--sage-400); color: var(--sage-700);
+}`;

package/src/styles/profile-article.ts

@@ -0,0 +1,56 @@
+export const css = `main > article {
+  max-width: var(--w-8); margin-inline: auto;
+  padding: var(--g6) 0;
+}
+main > article > header {
+  padding-bottom: var(--g4); margin-bottom: var(--g4);
+  border-bottom: 1px solid var(--line-soft);
+}
+main > article > header h1 {
+  font-family: var(--font-serif); font-weight: 400;
+  font-size: clamp(var(--t-xl), 5vw, var(--t-2xl));
+  letter-spacing: -0.01em; line-height: 1.1; margin-bottom: var(--g1);
+}
+main > article > header p {
+  font-size: var(--t-md); color: var(--sage-700); margin: 0; font-weight: 400;
+  font-style: italic; font-family: var(--font-serif);
+}
+main > article address {
+  font-style: normal; font-size: var(--t-sm); color: var(--ink-2);
+  padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--line-soft);
+}
+main > article address strong { color: var(--ink-3); font-weight: 500; }
+main > article section {
+  margin: var(--g4) 0; padding-top: var(--g4); border-top: 1px solid var(--line-soft);
+}
+main > article section h2 {
+  font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage-700);
+  margin: 0 0 var(--g3);
+}
+main > article section > p {
+  font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.7;
+  color: var(--ink-2); max-width: none;
+}
+main > article ul {
+  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1);
+}
+main > article ul li {
+  font-size: var(--t-xs); font-weight: 500; color: var(--sage-800);
+  padding: var(--g1) var(--g2); background: var(--sage-100);
+}
+main > article dl {
+  display: grid; grid-template-columns: 9rem 1fr; gap: var(--g2) var(--g3);
+}
+main > article dt {
+  font-size: var(--t-xs); color: var(--ink-3); font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.06em;
+}
+main > article dd { margin: 0; font-size: var(--t-sm); color: var(--ink); }
+main > article dd a { color: var(--sage-700); }
+main > article dd a:hover { color: var(--ink); }
+@media (max-width: 640px) {
+  main > article { padding: var(--g4) 0; }
+  main > article dl { grid-template-columns: 1fr; gap: 2px 0; }
+  main > article dt { margin-top: var(--g2); }
+}`;

package/src/styles/profile-card.ts

@@ -0,0 +1,57 @@
+const S = 'section:has(> article[itemscope]) > article[itemscope]';
+export const css = `${S} {
+  position: relative; background: var(--beige-50); border: 1px solid var(--line-soft);
+  padding: var(--g3); display: flex; flex-direction: column;
+  box-shadow: var(--shadow); transition: all var(--ease);
+}
+${S}:hover {
+  border-color: var(--sage-400); box-shadow: var(--shadow-md);
+}
+${S} > div[aria-hidden] {
+  width: 56px; height: 56px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-serif); font-size: var(--t-md); font-weight: 600;
+  color: var(--beige-50); background: var(--sage-600);
+  margin-bottom: var(--g3); flex-shrink: 0;
+}
+${S} header { margin-bottom: var(--g2); }
+${S} h2 {
+  font-family: var(--font-serif); font-size: var(--t-md); font-weight: 600;
+  line-height: 1.25; margin: 0 0 var(--g1); letter-spacing: 0;
+}
+${S} h2 a { color: var(--ink); }
+${S} h2 a:hover { color: var(--sage-700); }
+${S} header p {
+  font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); margin: 0 0 2px;
+}
+${S} header p:has([itemprop="address"]) {
+  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--g1);
+  color: var(--stone-500);
+}
+${S} header p:has([itemprop="address"])::before {
+  content: '\u00b7'; color: var(--sage-500); font-weight: 700;
+}
+${S} [itemprop="description"] {
+  font-size: var(--t-xs); line-height: 1.6; margin: var(--g2) 0 0; color: var(--ink-2);
+}
+${S} ul {
+  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px;
+  margin: var(--g2) 0 0;
+}
+${S} ul li {
+  background: var(--sage-100); color: var(--sage-800);
+  padding: 3px var(--g1); font-size: 0.75rem; font-weight: 500;
+}
+${S} > a:last-child {
+  display: inline-flex; align-items: center; justify-content: center;
+  margin-top: auto; padding: var(--g2) 0;
+  background: var(--sage-600); color: var(--beige-50);
+  font-size: var(--t-xs); font-weight: 500;
+  margin-left: calc(-1 * var(--g3)); margin-right: calc(-1 * var(--g3));
+  margin-bottom: calc(-1 * var(--g3));
+  transition: background var(--ease);
+}
+${S} > article > a:last-child:hover,
+${S} > a:last-child:hover { background: var(--sage-700); color: var(--beige-50); }
+${S} > * + * { margin-top: 0; }
+${S} > a:last-child { margin-top: var(--g3); }`;

package/src/styles/stat-bar.ts

@@ -0,0 +1,31 @@
+export const css = `section[aria-label="Statystyki"] {
+  background: var(--beige-50); border-top: 1px solid var(--line-soft);
+  border-bottom: 1px solid var(--line-soft);
+  margin-inline: calc(50% - 50vw); padding: var(--g5) var(--pad);
+}
+section[aria-label="Statystyki"] > p {
+  text-align: center; font-size: var(--t-md); font-weight: 400; line-height: 1.6;
+  color: var(--ink); margin: 0 auto var(--g4); max-width: var(--measure);
+  font-family: var(--font-serif); font-style: italic;
+}
+section[aria-label="Statystyki"] > dl {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--g4); max-width: var(--w-10); margin: 0 auto; padding: 0;
+}
+section[aria-label="Statystyki"] > dl div { text-align: center; }
+section[aria-label="Statystyki"] > dl div > span:has(> svg) {
+  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
+  margin: 0 auto var(--g2); color: var(--sage-600);
+}
+section[aria-label="Statystyki"] > dl div > span:has(> svg) > svg { width: 24px; height: 24px; }
+section[aria-label="Statystyki"] > dl dt {
+  font-family: var(--font-serif); font-size: var(--t-2xl); font-weight: 400;
+  line-height: 1.1; color: var(--stone-900);
+}
+section[aria-label="Statystyki"] > dl dd {
+  margin: var(--g1) 0 0; font-size: var(--t-xs); line-height: 1.4;
+  color: var(--ink-3); font-weight: 400;
+}
+@media (max-width: 640px) {
+  section[aria-label="Statystyki"] > dl { grid-template-columns: repeat(2, 1fr); gap: var(--g3); }
+}`;

package/src/templates/catalog.ts

@@ -0,0 +1,77 @@
+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="1.5"><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="1.5"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>',
+  free: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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 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>`;
+}

package/src/templates/helpers.ts

@@ -0,0 +1,22 @@
+export function esc(s: string | undefined | null): string {
+  if (!s) return '';
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export interface TherapyProfile {
+  slug: string;
+  firstName: string;
+  lastName: string;
+  jobTitle: string;
+  city?: string;
+  bio?: string;
+  photo?: string;
+  specialties: string[];
+  languages: string[];
+  business: { name?: string; taxId?: string; classification: string[] };
+  social: Record<string, string>;
+}
+
+export function fullName(p: TherapyProfile): string {
+  return `${p.firstName} ${p.lastName}`;
+}

package/src/templates/index.ts

@@ -0,0 +1,5 @@
+export { layout, type LayoutProps } from './layout.ts';
+export { profileCard } from './profile-card.ts';
+export { profileArticle } from './profile-article.ts';
+export { catalogHero, catalogGrid, statBar, categoryNav, pagination, type CatalogHeroProps, type PaginationProps } from './catalog.ts';
+export { esc, fullName, type TherapyProfile } from './helpers.ts';

package/src/templates/layout.ts

@@ -0,0 +1,61 @@
+import { esc } from './helpers.ts';
+
+export interface LayoutProps {
+  title: string;
+  description?: string;
+  jsonLd?: object;
+  siteName?: string;
+  homeHref?: string;
+  baseUrl?: string;
+  headExtra?: string;
+  navExtra?: string;
+  footerContent?: string;
+}
+
+const THEME_VERSION = '0.1.0';
+
+export function layout(props: LayoutProps, body: string): string {
+  const {
+    title,
+    description,
+    jsonLd,
+    siteName = 'press2ai',
+    homeHref = '/',
+    headExtra = '',
+    navExtra = '',
+    footerContent,
+  } = props;
+
+  const footer = footerContent ??
+    `Powered by <a href="https://www.npmjs.com/org/press2ai">press2ai</a> &middot;
+     <a href="https://www.npmjs.com/package/@press2ai/theme-therapy-soft/v/${THEME_VERSION}">@press2ai/theme-therapy-soft v${THEME_VERSION}</a>`;
+
+  return `<!doctype html>
+<html lang="pl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)}</title>
+${description ? `<meta name="description" content="${esc(description)}">` : ''}
+<meta property="og:title" content="${esc(title)}">
+${description ? `<meta property="og:description" content="${esc(description)}">` : ''}
+${jsonLd ? `<script type="application/ld+json">${JSON.stringify(jsonLd).replace(/</g, '\\u003c')}</script>` : ''}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+${headExtra}
+</head>
+<body>
+<header>
+<nav>
+<a href="${esc(homeHref)}"><strong>${esc(siteName)}</strong></a>
+${navExtra}
+</nav>
+</header>
+<main>${body}</main>
+<footer>
+<small>${footer}</small>
+</footer>
+</body>
+</html>`;
+}

package/src/templates/profile-article.ts

@@ -0,0 +1,85 @@
+import { esc, fullName, type TherapyProfile } from './helpers.ts';
+
+export function profileArticle(p: TherapyProfile): string {
+  const name = fullName(p);
+  const socials = Object.entries(p.social ?? {}).filter(([, v]) => v);
+
+  const address = p.city
+    ? `<address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
+<strong>Miasto: </strong>
+<span itemprop="addressLocality">${esc(p.city)}</span>,
+<span itemprop="addressCountry">PL</span>
+</address>`
+    : '';
+
+  const bio = p.bio
+    ? `<section>
+<h2>O mnie</h2>
+<p itemprop="description">${esc(p.bio)}</p>
+</section>`
+    : '';
+
+  const specialties = p.specialties.length > 0
+    ? `<section>
+<h2>Specjalizacje</h2>
+<ul>
+${p.specialties.map(s => `<li itemprop="knowsAbout">${esc(s)}</li>`).join('\n')}
+</ul>
+</section>`
+    : '';
+
+  const languages = p.languages.length > 0
+    ? `<section>
+<h2>Języki</h2>
+<ul>
+${p.languages.map(l => `<li itemprop="knowsLanguage">${esc(l)}</li>`).join('\n')}
+</ul>
+</section>`
+    : '';
+
+  const socialUrlPrefix: Record<string, string> = {
+    linkedin: 'https://linkedin.com/in/',
+    youtube: 'https://youtube.com/@',
+    tiktok: 'https://tiktok.com/@',
+    facebook: 'https://facebook.com/',
+    twitter: 'https://x.com/',
+    instagram: 'https://instagram.com/',
+  };
+  const contactItems = socials.map(([n, handle]) => {
+    const prefix = socialUrlPrefix[n] ?? `https://${esc(n)}.com/`;
+    return `<dt>${esc(n)}</dt><dd><a href="${prefix}${esc(handle as string)}" rel="noopener">@${esc(handle as string)}</a></dd>`;
+  });
+
+  const contact = contactItems.length > 0
+    ? `<section>
+<h2>Kontakt</h2>
+<dl>
+${contactItems.join('\n')}
+</dl>
+</section>`
+    : '';
+
+  const business = p.business?.name
+    ? `<section>
+<h2>Dane firmy</h2>
+<dl>
+<dt>Nazwa</dt><dd>${esc(p.business.name)}</dd>
+${p.business.taxId ? `<dt>NIP</dt><dd>${esc(p.business.taxId)}</dd>` : ''}
+${(p.business.classification?.length ?? 0) > 0 ? `<dt>PKD</dt><dd>${p.business.classification!.map(c => esc(c)).join(', ')}</dd>` : ''}
+</dl>
+</section>`
+    : '';
+
+  return `<article itemscope itemtype="https://schema.org/Person">
+<header>
+<h1 itemprop="name">${esc(name)}</h1>
+<p itemprop="jobTitle">${esc(p.jobTitle)}</p>
+</header>
+${address}
+${bio}
+${specialties}
+${languages}
+${contact}
+${business}
+</article>`;
+}

package/src/templates/profile-card.ts

@@ -0,0 +1,26 @@
+import { esc, fullName, type TherapyProfile } from './helpers.ts';
+
+export function profileCard(p: TherapyProfile, href: string): string {
+  const name = fullName(p);
+  const initials = `${(p.firstName?.[0] ?? '').toUpperCase()}${(p.lastName?.[0] ?? '').toUpperCase()}`;
+
+  const city = p.city ? `<span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><span itemprop="addressLocality">${esc(p.city)}</span></span>` : '';
+
+  const bio = p.bio ? `<p itemprop="description">${esc(p.bio)}</p>` : '';
+
+  const specs = p.specialties.length > 0
+    ? `<ul>${p.specialties.slice(0, 3).map(s => `<li>${esc(s)}</li>`).join('')}</ul>`
+    : '';
+
+  return `<article itemscope itemtype="https://schema.org/Person">
+<div aria-hidden="true">${initials}</div>
+<header>
+<h2><a href="${esc(href)}" itemprop="url"><span itemprop="name">${esc(name)}</span></a></h2>
+<p><span itemprop="jobTitle">${esc(p.jobTitle)}</span></p>
+${city ? `<p>${city}</p>` : ''}
+</header>
+${bio}
+${specs}
+<a href="${esc(href)}">Zobacz profil &rarr;</a>
+</article>`;
+}