@jelinek/ui 0.3.0

package/dist/components/PageHero.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { hasContext, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { CONTAINER_CONTEXT } from './container-context.js';
+	import Eyebrow from './Eyebrow.svelte';
+
+	type Variant = 'brown' | 'magenta' | 'black';
+	type Level = 'h1' | 'h2' | 'h3' | 'h4';
+
+	interface Props {
+		/** Colour shared by the eyebrow and the underline bar — jelinek.css
+		 * never pairs `.eyebrow--magenta` with `.rule--black` or similar (see
+		 * ui/barvy-v-akci.html and brand/znacka.html), so one prop drives both
+		 * instead of two that could disagree. */
+		variant?: Variant;
+		/** Heading tag. Every real `.page-hero` in the guide uses `<h1>` — kept
+		 * overridable since jelinek.css's underline selector,
+		 * `:is(h1, h2, h3):has(+ .rule)`, supports three levels (the
+		 * guide's OWN non-hero usage of the same rule, e.g.
+		 * ui/barvy-v-akci.html's `.demo` blocks, underlines a bare `<h2>`).
+		 *
+		 * `h4` is still accepted and still gets h4 typography, but as of the
+		 * Task 31 merge it gets NO underline bar — the guide narrowed that
+		 * selector to h1-h3. See HEADING_BASE / RULE_BAR below. */
+		level?: Level;
+		/** Set when a `ChapterNav` renders directly above this hero — same
+		 * flag SiteHeader already takes, see its prop for the full seam
+		 * explanation. Changes how much top padding this hero reserves for
+		 * the floating header (+ chapter nav) above it. */
+		hasChapterNav?: boolean;
+		/** Whether this hero's content already sits inside something that
+		 * insets it — a `Container` ancestor, or your own app's equivalent
+		 * max-width/padding wrapper. Left `undefined` (the default), this is
+		 * auto-detected via `Container`'s own Svelte context: present ->
+		 * `PageHero` skips its internal `.container`-equivalent wrapper
+		 * (jelinek.css never applies that inset twice); absent -> `PageHero`
+		 * supplies it itself, so standalone usage (this hero as the first
+		 * thing on a page, no `Container` anywhere) still matches the guide
+		 * instead of rendering flush against the browser edge.
+		 *
+		 * Context can only see the KIT's own `Container` — it can't detect a
+		 * consumer's OWN, non-kit layout div doing the same job. Set this
+		 * explicitly to override the auto-detection for that case: `true` if
+		 * something ALREADY insets this hero (suppresses the internal
+		 * wrapper, even with no `Container` in the tree), `false` to force
+		 * the internal wrapper on (even inside a `Container`, if you
+		 * deliberately want the extra inset). */
+		contained?: boolean;
+		eyebrow?: Snippet;
+		heading: Snippet;
+		/** Content below the underline — a lede paragraph, buttons, etc. Every
+		 * real `.page-hero` in the guide has this; kept optional since
+		 * jelinek.css itself allows a bare eyebrow+heading (brand/znacka.html). */
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		variant = 'brown',
+		level = 'h1',
+		hasChapterNav = false,
+		contained,
+		eyebrow,
+		heading,
+		children,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLElement> = $props();
+
+	// `hasContext` must run synchronously during this component's own
+	// initialization (Svelte's lifecycle rule for context APIs) — captured
+	// into a plain const here, NOT inside `$derived`'s callback, since that
+	// callback's re-run timing isn't guaranteed to still be within this
+	// component's setup phase. `contained` (the escape hatch above) wins
+	// when the consumer sets it explicitly; otherwise fall back to whatever
+	// `Container` (if any encloses this component) published.
+	const ambientContainer = hasContext(CONTAINER_CONTEXT);
+	const isContained = $derived(contained ?? ambientContainer);
+
+	// jelinek.css:672-677 (.page-hero): background var(--bg-gray) ->
+	// bg-surface-gray. The box-shadow/clip-path pair is the guide's own
+	// full-bleed technique (its comment: "celoplošný šedý pruh bez vodorovného
+	// posuvníku; sahá i za menu" — a full-width grey stripe with no horizontal
+	// scrollbar, reaching behind the floating header too) — reproduced as
+	// BOTH arbitrary values together, per task direction, since either alone
+	// would either not bleed or reintroduce the scrollbar. `var(--bg-gray)`
+	// is written via its mapped Tailwind theme name, --color-surface-gray,
+	// same technique SiteHeader.svelte's dark inset shadow uses for
+	// --JELINEK-BLACK, so this still tracks dark mode (--bg-gray flips at
+	// tokens.css:77) with no separate dark: variant needed.
+	// padding-bottom is the passthrough token --space-section (token-map.js
+	// keeps space-* off the Tailwind theme on purpose — see its own comment —
+	// so this stays an arbitrary var() reference, not a spacing utility).
+	const OUTER =
+		'bg-surface-gray shadow-[0_0_0_100vmax_var(--color-surface-gray)] ' +
+		'[clip-path:inset(0_-100vmax)] pb-[var(--space-section)]';
+
+	// jelinek.css:339 (.container) — jelinek.css:672 gives `.page-hero`
+	// itself explicit ZERO horizontal padding, relying ENTIRELY on
+	// `.page-hero` always being a direct child of `<main class="container">`
+	// (ui/komponenty.html, brand/*.html) for its content's inset. The guide
+	// therefore applies exactly ONE `.container`'s worth of padding to that
+	// content, never zero, never two.
+	//
+	// review round 2 (Critical) found this component reproduced neither —
+	// no inset at all when rendered with no ambient Container (its most
+	// natural standalone usage: this hero as the first thing on a page).
+	// review round 3 (Critical, follow-up) found the round-2 fix overcorrected:
+	// unconditionally rendering this wrapper matches the STANDALONE case but
+	// DOUBLES the padding in the NESTED case (this kit's own showcase, which
+	// wraps every route's content in `Container`) — `section.x`/`h1.x`
+	// measured 24px apart at every viewport width tested, on top of
+	// whatever the ambient Container already contributed, where the guide's
+	// own total is one `px-6` (24px), not two.
+	//
+	// Fixed by rendering this wrapper CONDITIONALLY on `isContained` (see
+	// `contained` prop + `CONTAINER_CONTEXT` above): a `Container` ancestor
+	// already does this component's job, so render nothing extra; no
+	// `Container` ancestor (context absent) means this hero must do it
+	// itself, exactly once. `.container`'s exact values, reproduced as an
+	// inner wrapper around the content only — NOT by composing the
+	// `Container` component even in the "render it" branch, so that a
+	// consumer who imports both `Container` and `PageHero` from this kit
+	// never has two literally-different-but-identical wrapper implementations
+	// to keep in sync. Same "carry your own centering rather than assume an
+	// ancestor" call SiteHeader.svelte's `__inner` already makes, refined
+	// here to not assume the OPPOSITE (no ancestor) unconditionally either.
+	const INNER = 'mx-auto w-full max-w-page px-6';
+
+	// jelinek.css:657-667 (padding-top). Same mobile-first shape and SAME
+	// `min-[640px]` breakpoint as +layout.svelte's own `mainPadding` — this
+	// component models exactly the condition that calculation exists for, so
+	// it must follow it rather than invent a second breakpoint value that
+	// could drift from it.
+	//
+	// Task 26 — the `.02px` epsilon is gone. It existed only to convert the
+	// guide's INCLUSIVE `@media (max-width: 620px)` into a mobile-first
+	// `min-width` without leaving a gap. The guide's hero rule is itself
+	// mobile-first now. `min-[640px]:` is therefore an exact translation.
+	// Task 30 moved the boundary from 621 to 640: the guide converged on the
+	// designer's 640/1024/1440 ladder, and 621 was an artifact of the
+	// `--ratio` tiers that no longer exist. Grid no longer needs an epsilon
+	// either — its `.grid--*` rules are mobile-first `min-width` now too.
+	//
+	// TASK 33 — THE FLAT PHONE `pt-7` IS GONE, AND SO IS THE BREAKPOINT IN THE
+	// no-chapter-nav CASE. The designer's 74ef043 made the header float on the
+	// phone too (`position: absolute`, previously in normal flow / then briefly
+	// `sticky` on our side), precisely so the hero's grey band runs UNDER it and
+	// no seam shows above the bar. The hero therefore has to reserve the header's
+	// height at EVERY width, and the guide's base rule now reads
+	// `padding: calc(var(--header-h) + 28px) 0 …` with no `@media` companion —
+	// `--header-h` re-resolves itself at the breakpoint (70px phone → 94px from
+	// 640px up, tokens.css), so one expression covers both.
+	//
+	// What still needs the breakpoint is the chapter-nav case, and for a
+	// different reason: the chapter bar is `display: none` below 640px (its
+	// entries move into the header's burger panel), so there is no strip to
+	// reserve until the bar exists.
+	const paddingTop = $derived(
+		hasChapterNav
+			? 'pt-[calc(var(--header-h)_+_28px)] min-[640px]:pt-[calc(var(--header-h)_+_var(--subnav-h)_+_20px)]'
+			: 'pt-[calc(var(--header-h)_+_28px)]'
+	);
+
+	// The heading-underline mechanism. jelinek.css draws this via
+	// `:is(h1, h2, h3):has(+ .rule)` on the HEADING (jelinek.css:407-414)
+	// — an `<hr class="rule">` sibling that is itself `display: none`
+	// (jelinek.css:406) and exists only as a marker for `:has()` to find,
+	// because the guide is hand-written HTML with no components. A component
+	// controls its own markup, so this is reproduced as `after:*` utilities
+	// on the heading directly instead — no marker element, no sibling
+	// selector, no `.rule` class name in a kit that otherwise ships no CSS
+	// class names of its own. Per task direction: if this were wrong it
+	// should be argued against rather than implemented, and on reading the
+	// CSS it is not wrong — `:has()` is a hook for the guide's own flat HTML,
+	// not a rule about how the bar itself is drawn, and dropping it changes
+	// no rendered pixel.
+	//
+	// TASK 31 — THE SELECTOR LOST h4. It was `:is(h1, h2, h3, h4)` and is now
+	// `:is(h1, h2, h3)` across all five of the guide's rules (:407-414). So an
+	// `<h4>` followed by `<hr class="rule">` now renders NO bar in the guide,
+	// and neither does `level="h4"` here. The `<hr>` stays hidden either way
+	// (`.rule { display: none }` is unconditional), so nothing about the guide's
+	// own pages changed visibly: grepping every heading/`.rule` pairing in
+	// brand/*.html, ui-old/*.html and index.html finds only h1 (16 of them) and
+	// h2 (69) — no h3 or h4 pairing exists anywhere, so h4 was already dead in
+	// that selector before it was removed. That is also why this is reproduced
+	// as "h4 keeps its typography but loses the bar" rather than by narrowing
+	// the `Level` type: the change removes an underline, not a heading level,
+	// and the guide's h1-h6 typography rule (:355-361) still covers h4
+	// unchanged. Narrowing the prop type would be a breaking API change the
+	// stylesheet does not ask for.
+	//
+	// The three declarations below split accordingly. HEADING_BASE holds what
+	// the shared `h1…h6` rule gives EVERY level; RULE_BAR holds everything that
+	// comes from the `:has(+ .rule)` rules and so applies to h1-h3 only.
+	//
+	// jelinek.css:355 (the shared `h1, h2, h3, h4, h5, h6` rule): font-primary
+	// (GT Walsheim Bold), font-weight 700, `margin: 0 0 0.4em`.
+	// This heading is markup this component GENERATES itself (unlike, say,
+	// ProductCard's <h3>, which already sits inside Card's own DOM and so
+	// reaches a real ambient `<h3>` element rule) — every other component in
+	// this kit that touches a heading relies on `base.css` reproducing
+	// jelinek.css:355-361 for exactly that reason: `base.css` is OPTIONAL
+	// (its own file header documents legitimate reasons to skip it), and a
+	// consumer who does is entitled to every OTHER component still matching
+	// the guide by default. This is the one component that renders a bare
+	// heading tag as self-generated markup, so it is the one exposed to that
+	// gap, and must carry its own typography rather than assume it.
+	// `mb-[0.4em]` is that shorthand's bottom half, and it is what an h4 now
+	// actually gets — RULE_BAR's `mb-0` overrides it for h1-h3, exactly as
+	// jelinek.css:407 does.
+	const HEADING_BASE = 'font-primary font-bold mt-0 mb-[0.4em]';
+
+	// jelinek.css:407 (`width: fit-content; max-width: 100%; margin-bottom:
+	// 0`) -> w-fit max-w-full mb-0. This is what makes the bar exactly 75% of
+	// the heading's OWN TEXT width rather than 75% of the section's width:
+	// without `w-fit` the heading (a block element) would stretch to fill its
+	// container, and the `after:w-[75%]` bar below inherits ITS OWN
+	// containing block from the heading's fitted box, not the page-hero's.
+	// jelinek.css:408-411 (`content: ""; display: block; height: 3px; width:
+	// 75%; border-radius: 2px; margin: 16px 0 24px`) -> the after: block.
+	// margin is a 3-value shorthand (top 16px, left/right 0, bottom 24px) ->
+	// after:mt-4 after:mb-6 (no explicit mx-0: Tailwind's default margin on a
+	// generated pseudo-element is already 0). height/border-radius are not on
+	// any Tailwind scale (nearest radius token, radius-button, is 8px) ->
+	// kept arbitrary, same as Tag/CodeCopy's own off-scale literals.
+	const RULE_BAR =
+		"w-fit max-w-full mb-0 after:content-[''] " +
+		'after:block after:h-[3px] after:w-[75%] after:rounded-[2px] after:mt-4 after:mb-6';
+
+	// Which levels the guide's `:is(h1, h2, h3):has(+ .rule)` covers.
+	const hasRule = $derived(level !== 'h4');
+
+	// jelinek.css:356-359 (h1-h4; h5/h6 have no counterpart here since `Level`
+	// stops at h4). Note this list is NOT the same set as the underline's
+	// `:is(h1,h2,h3)` any more — h4 is a real, styled level that simply has no
+	// bar (see above).
+	// Only size/line-height (+ h1's own letter-spacing) vary per level, per
+	// the guide's own comment at jelinek.css:345-347 ("Mění se jen velikost a
+	// řádkování; řez zůstává" — only size and leading change; the typeface
+	// stays constant, already covered by HEADING_BASE above).
+	//
+	// `Level` is typed to exactly `'h1' | 'h2' | 'h3' | 'h4'`, so `pnpm check`
+	// rejects `level="h5"` at compile time — but a consumer bypassing
+	// TypeScript (plain JS, or an `as any`) could still pass one through at
+	// runtime. `LEVEL_TYPE[level]` would then be `undefined`, and `cn()`
+	// (clsx underneath) silently drops an `undefined` argument rather than
+	// throwing — the heading would still render, just with no size/leading
+	// of its own (falling back to the browser's UA default, or base.css's if
+	// imported), no error to signal why. Low severity (needs bypassing the
+	// type system to hit) but worth naming, since it fails silently rather
+	// than loudly.
+	const LEVEL_TYPE: Record<Level, string> = {
+		h1: 'text-step6 leading-[1.1] tracking-[-0.01em]',
+		h2: 'text-step5 leading-[1.1]',
+		h3: 'text-step4 leading-[1.2]',
+		h4: 'text-step3 leading-[1.2]'
+	};
+
+	// jelinek.css:410 (default, --JELINEK-BROWN), :412 (--magenta), :413
+	// (--black) -> after:bg-jelinek-*. Same brown/magenta/black set as
+	// Eyebrow's own VARIANT, and for the same reason (division re-theme
+	// remaps --JELINEK-BROWN under [data-division="mattress"], magenta/black
+	// don't move). :414's white variant is deliberately NOT included here: it
+	// pairs with `.eyebrow--white`, which does not exist in jelinek.css, and
+	// every real `.rule--white` usage sits on a dark PANEL, never inside a
+	// `.page-hero` (grep confirms: brand/aplikace.html's is standalone) — a
+	// white bar on this component's own always-grey band has no real-world
+	// counterpart to be faithful to.
+	const RULE_VARIANT: Record<Variant, string> = {
+		brown: 'after:bg-jelinek-brown',
+		magenta: 'after:bg-jelinek-magenta',
+		black: 'after:bg-jelinek-black'
+	};
+</script>
+
+<!-- Factored into a local snippet so the "already contained" and "must
+     contain itself" branches below render the identical markup instead of
+     two copies drifting apart. -->
+{#snippet content()}
+	{#if eyebrow}
+		<Eyebrow {variant}>{@render eyebrow()}</Eyebrow>
+	{/if}
+	<!-- RULE_BAR and RULE_VARIANT are both gated on `hasRule`: an h4 gets the
+	     guide's h4 typography and no underline, per `:is(h1, h2, h3)`. -->
+	<svelte:element
+		this={level}
+		class={cn(
+			HEADING_BASE,
+			LEVEL_TYPE[level],
+			hasRule && RULE_BAR,
+			hasRule && RULE_VARIANT[variant]
+		)}
+	>
+		{@render heading()}
+	</svelte:element>
+	{#if children}
+		{@render children()}
+	{/if}
+{/snippet}
+
+<section {...rest} class={cn(OUTER, paddingTop, className)}>
+	{#if isContained}
+		{@render content()}
+	{:else}
+		<div class={INNER}>
+			{@render content()}
+		</div>
+	{/if}
+</section>

package/dist/components/PageHero.svelte.d.ts

@@ -0,0 +1,55 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Variant = 'brown' | 'magenta' | 'black';
+type Level = 'h1' | 'h2' | 'h3' | 'h4';
+interface Props {
+    /** Colour shared by the eyebrow and the underline bar — jelinek.css
+     * never pairs `.eyebrow--magenta` with `.rule--black` or similar (see
+     * ui/barvy-v-akci.html and brand/znacka.html), so one prop drives both
+     * instead of two that could disagree. */
+    variant?: Variant;
+    /** Heading tag. Every real `.page-hero` in the guide uses `<h1>` — kept
+     * overridable since jelinek.css's underline selector,
+     * `:is(h1, h2, h3):has(+ .rule)`, supports three levels (the
+     * guide's OWN non-hero usage of the same rule, e.g.
+     * ui/barvy-v-akci.html's `.demo` blocks, underlines a bare `<h2>`).
+     *
+     * `h4` is still accepted and still gets h4 typography, but as of the
+     * Task 31 merge it gets NO underline bar — the guide narrowed that
+     * selector to h1-h3. See HEADING_BASE / RULE_BAR below. */
+    level?: Level;
+    /** Set when a `ChapterNav` renders directly above this hero — same
+     * flag SiteHeader already takes, see its prop for the full seam
+     * explanation. Changes how much top padding this hero reserves for
+     * the floating header (+ chapter nav) above it. */
+    hasChapterNav?: boolean;
+    /** Whether this hero's content already sits inside something that
+     * insets it — a `Container` ancestor, or your own app's equivalent
+     * max-width/padding wrapper. Left `undefined` (the default), this is
+     * auto-detected via `Container`'s own Svelte context: present ->
+     * `PageHero` skips its internal `.container`-equivalent wrapper
+     * (jelinek.css never applies that inset twice); absent -> `PageHero`
+     * supplies it itself, so standalone usage (this hero as the first
+     * thing on a page, no `Container` anywhere) still matches the guide
+     * instead of rendering flush against the browser edge.
+     *
+     * Context can only see the KIT's own `Container` — it can't detect a
+     * consumer's OWN, non-kit layout div doing the same job. Set this
+     * explicitly to override the auto-detection for that case: `true` if
+     * something ALREADY insets this hero (suppresses the internal
+     * wrapper, even with no `Container` in the tree), `false` to force
+     * the internal wrapper on (even inside a `Container`, if you
+     * deliberately want the extra inset). */
+    contained?: boolean;
+    eyebrow?: Snippet;
+    heading: Snippet;
+    /** Content below the underline — a lede paragraph, buttons, etc. Every
+     * real `.page-hero` in the guide has this; kept optional since
+     * jelinek.css itself allows a bare eyebrow+heading (brand/znacka.html). */
+    children?: Snippet;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;
+declare const PageHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHero = ReturnType<typeof PageHero>;
+export default PageHero;

package/dist/components/Pager.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import type { NavItem } from './nav.js';
+
+	interface Props {
+		prev?: NavItem;
+		next?: NavItem;
+		prevLabel?: string;
+		nextLabel?: string;
+		class?: string;
+	}
+
+	let {
+		prev,
+		next,
+		prevLabel = 'Předchozí kapitola',
+		nextLabel = 'Další kapitola',
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLElement> = $props();
+
+	// jelinek.css:1114 (.pager): flex, space-between, 16px gap, and — this is
+	// what the brief got wrong — `margin: 44px 0 10px`, an asymmetric
+	// top/bottom margin, NOT the brief's `pt-6 border-t` (that border doesn't
+	// exist anywhere in the source). Both values land exactly on Tailwind's
+	// default scale: 44px = mt-11, 10px = mb-2.5. Kept as literal margin
+	// (unlike Card/Alert's dropped margins) on the same "chrome, not a
+	// reusable content atom" reasoning as SiteFooter's mt-[60px] — see that
+	// component's comment.
+	//
+	// Task 26 (audit M3, third part) — `.pager` now wraps. It used to be
+	// `display: flex` with no wrap and `flex: 1` on the links, so on a narrow
+	// viewport the two boxes never broke onto separate lines; they just shrank
+	// together, down to a measured 156px each on a 375px phone. The guide now
+	// carries `flex-wrap: wrap` (jelinek.css:1114) with a 200px flex-basis on
+	// the links (:1116), which puts the break where the CONTENT stops fitting
+	// rather than at a breakpoint: two 200px cards plus the 16px gap need
+	// 416px of content width, so they stack below roughly a 464px viewport
+	// and sit side by side above it. No media query, so nothing here is
+	// variant-prefixed either.
+	const ROOT = 'mt-11 mb-2.5 flex flex-wrap justify-between gap-4';
+
+	// jelinek.css:1115-1121 (.pager a): 16px/20px padding (py-4 px-5), border,
+	// rounded-card, colour text-black (text-fg), shadow-resting resting →
+	// shadow-interactive on hover.
+	// Task 31 — the transition is now `box-shadow var(--dur-base) var(--ease)`
+	// (jelinek.css:1120), so the duration and easing are named rather than left
+	// to Tailwind's defaults. Duration agreed already (0.15s = 150ms); the
+	// EASING did not — Tailwind's default is cubic-bezier(0.4, 0, 0.2, 1) and
+	// the guide's --ease is the `ease` keyword. See Button.svelte for the full
+	// note, including why this is not fixed once globally in extras.css.
+	// jelinek.css:337 (`.tile, .pager a { font-weight: 400 }`) overrides the
+	// global bold anchor default — font-normal. jelinek.css:373-377 puts pager
+	// links (and their nested spans) on font-secondary.
+	// jelinek.css:240 (dark mode only): the top border lightens to
+	// --border-highlight-white — not in the token map's Utility column, so
+	// referenced directly as the raw custom property via an arbitrary value
+	// rather than a named class.
+	// `flex-[1_1_200px]`, not `flex-1` — Tailwind's `flex-1` is `flex: 1 1 0%`,
+	// a zero basis, which is exactly why the old row never wrapped (items with
+	// a 0 basis can always be squeezed into the line). jelinek.css:1116 is
+	// `flex: 1 1 200px`; the 200px basis is what makes ROOT's `flex-wrap`
+	// actually fire. Changing one without the other is a no-op.
+	const LINK =
+		'max-w-[340px] flex-[1_1_200px] rounded-card border border-border-subtle px-5 py-4 font-secondary ' +
+		'font-normal text-fg no-underline shadow-resting hover:shadow-interactive ' +
+		'transition-shadow duration-[var(--dur-base)] ease-[var(--ease)] ' +
+		'dark:border-t-[var(--border-highlight-white)]';
+
+	// jelinek.css:1123 (.pager a span): block, 0.78rem (not on the --step
+	// scale), text-muted1.
+	const SUBLABEL = 'block text-[0.78rem] text-fg-muted1';
+</script>
+
+<nav {...rest} class={cn(ROOT, className)}>
+	{#if prev}
+		<a href={prev.href} class={LINK}>
+			<span class={SUBLABEL}>{prevLabel}</span>
+			<!-- No classes on <strong>: it inherits colour (text-fg) and font
+			     (font-secondary) from the <a> above, and browsers already bold
+			     <strong> by default — jelinek.css has no rule that changes its
+			     size or family beyond what the parent link already sets. -->
+			<strong>← {prev.label}</strong>
+		</a>
+	{/if}
+	{#if next}
+		<!-- jelinek.css:1124 (.pager a.next): text-align:right + margin-left:auto,
+		     applied unconditionally whenever a "next" link exists — kept
+		     unconditional here too (harmless when prev is also present, since
+		     justify-between already separates them; load-bearing when prev is
+		     absent, keeping the lone link right-aligned rather than flex-start). -->
+		<a href={next.href} class={cn(LINK, 'ml-auto text-right')}>
+			<span class={SUBLABEL}>{nextLabel}</span>
+			<strong>{next.label} →</strong>
+		</a>
+	{/if}
+</nav>

package/dist/components/Pager.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { NavItem } from './nav.js';
+interface Props {
+    prev?: NavItem;
+    next?: NavItem;
+    prevLabel?: string;
+    nextLabel?: string;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;
+declare const Pager: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pager = ReturnType<typeof Pager>;
+export default Pager;

package/dist/components/Panel.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Variant = 'light' | 'dark' | 'brown' | 'magenta';
+
+	interface Props {
+		variant?: Variant;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		variant,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// CSS FIDELITY — the brief gave Panel a single hardcoded look
+	// (bg-surface-gray). jelinek.css:486-492 actually defines FOUR modifier
+	// variants on top of the unmodified default:
+	//
+	// jelinek.css:474-482 (shared box system with .card/.demo/.tile/.swatch):
+	// --box-fill defaults to var(--bg-white) and --box-accent is never
+	// touched by any of these variants (only --box-fill/--box-primary are),
+	// so — same reasoning as Card/Tile — the border gradient always
+	// collapses to a flat 1px border-border-subtle regardless of variant;
+	// only the fill changes.
+	// jelinek.css:483 `.panel, .card, .demo { padding: 24px; margin-bottom:
+	// 1.5rem }` — 24px is exactly p-6 (the brief's p-8/32px was wrong).
+	// margin-bottom is dropped per standing rule 5 (content atom, N per
+	// grid; jelinek.css:485 zeroes this exact margin inside `.grid`, which is
+	// the rule's own confirmation that it's page-layout convenience, not a
+	// property of "panel" — same call Card already made).
+	// jelinek.css:322-325/327-331 (shared block): font-secondary font-light,
+	// nested strong/b → font-medium.
+	//
+	// jelinek.css:486 `.panel--light { --box-fill: var(--bg-gray) }` →
+	// bg-surface-gray.
+	// jelinek.css:487-488 `.panel--dark { --box-fill: var(--bg-black); color:
+	// var(--text-white) }` plus `.panel--dark h1, h2, h3 { color:
+	// var(--text-white) }` → bg-surface-black text-fg-inverse, and nested
+	// h1/h2/h3 pinned to text-fg-inverse too (reproduced as compound
+	// arbitrary variants on the root, same pattern Tile/Card use for their
+	// own nested-element rules, since children is an opaque Snippet).
+	// jelinek.css:491 `.panel--brown { --box-fill: var(--bg-brown);
+	// --box-primary: var(--JELINEK-BROWN) }` → bg-surface-brown.
+	// jelinek.css:492 `.panel--magenta { --box-fill: var(--bg-magenta);
+	// --box-primary: var(--JELINEK-MAGENTA) }` → bg-surface-magenta.
+	// TASK 34 — CORRECTION. This comment used to claim --box-primary "only ever
+	// feeds the dark-mode inset highlight on `.tile`" and that ".panel has no
+	// box-shadow rule that consumes it anywhere", and dropped it on that basis.
+	// The claim was false. jelinek.css:251-257 is exactly that rule:
+	//
+	//   :root[data-theme="dark"] .panel, .card, .demo, .swatch, .logo-tool {
+	//     box-shadow: inset 0 2px 1px -1px var(--box-primary);
+	//   }
+	//
+	// .panel is the FIRST selector in it. So the guide's .panel in dark mode
+	// computes `inset 0 2px 1px -1px rgb(128,128,128)` (--box-primary is the
+	// flat 50% grey his 4ec82cd put on :root, jelinek.css:135) while the kit
+	// computed `box-shadow: none` — a live visual divergence on four guarded
+	// lock groups. Reproduced here rather than merely documented, because the
+	// rule is unconditional for these surfaces in dark mode and there is
+	// nothing to interpret.
+	//
+	// Consequence for the variants: --box-primary is NO LONGER inert, so
+	// jelinek.css:705-706's per-variant overrides have to come with it. Brown
+	// and magenta panels tint their own top highlight with the divisional
+	// colour; light/dark do not touch it (jelinek.css:700-701) and keep the
+	// :root grey.
+	const BASE =
+		'rounded-card border border-border-subtle bg-surface p-6 font-secondary font-light ' +
+		'[&_strong]:font-medium [&_b]:font-medium ' +
+		'dark:shadow-[inset_0_2px_1px_-1px_var(--box-primary)]';
+
+	const VARIANT: Record<Variant, string> = {
+		light: 'bg-surface-gray',
+		dark: 'bg-surface-black text-fg-inverse [&_h1]:text-fg-inverse [&_h2]:text-fg-inverse [&_h3]:text-fg-inverse',
+		brown: 'bg-surface-brown [--box-primary:var(--JELINEK-BROWN)]',
+		magenta: 'bg-surface-magenta [--box-primary:var(--JELINEK-MAGENTA)]'
+	};
+</script>
+
+<div {...rest} class={cn(BASE, variant && VARIANT[variant], className)}>
+	{@render children()}
+</div>

package/dist/components/Panel.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Variant = 'light' | 'dark' | 'brown' | 'magenta';
+interface Props {
+    variant?: Variant;
+    class?: string;
+    children: Snippet;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/components/ProductCard.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import Button from './Button.svelte';
+	import Card from './Card.svelte';
+
+	interface Props {
+		title: string;
+		description?: string;
+		image?: string;
+		imageAlt?: string;
+		href?: string;
+		ctaLabel?: string;
+		color?: 'brown' | 'magenta' | 'black';
+		/** Optional badge rendered above the title, e.g. <Tag variant="instock">. */
+		tag?: Snippet;
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		image,
+		imageAlt = '',
+		href,
+		ctaLabel = 'Detail produktu',
+		color = 'brown',
+		tag,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// No `.product-card` class exists in jelinek.css — this is a composition
+	// of Card + Button + (via the `tag` snippet) Tag, not a standalone CSS
+	// rule. Its structure and spacing are taken from the guide's own worked
+	// example, ui/komponenty.html:253-281, reproduced value-for-value where
+	// that markup gives one (18px inner padding, 10px gap under the tag,
+	// 8px/4px heading margin), and by ordinary judgment where it doesn't
+	// (there's no other source of truth to check those calls against).
+</script>
+
+<Card {...rest} padded={false} class={cn('overflow-hidden', className)}>
+	{#if image}
+		<!-- jelinek.css:510 (.photo): rounded-image object-cover w-full. The
+		     demo (ui/komponenty.html:255) overrides the radius to 0 inline and
+		     adds aspect-ratio:4/3: the image sits flush against the card's own
+		     rounded top corners, and `overflow-hidden` on the card above does
+		     the rounding instead — a rounded image here would double up as a
+		     visible seam inside the rounded card. `rounded-none` is written
+		     explicitly, not just omitted, to keep that override visible. -->
+		<img src={image} alt={imageAlt} class="aspect-[4/3] w-full rounded-none object-cover" />
+	{/if}
+	<div class="p-[18px]">
+		{#if tag}
+			<div class="mb-2.5">{@render tag()}</div>
+		{/if}
+		<!-- jelinek.css:652 (`.card h3`) already reaches this <h3> through
+		     Card's own [&_h3]:text-step1 [&_h3]:leading-[1.3] descendant rule
+		     (Card.svelte) — repeating text-step1/leading here would duplicate
+		     Card, not correct it. text-fg is still needed: Card sets no text
+		     color of its own (the static site's .card h3 inherits its color
+		     from body), so without it this heading would fall back to
+		     whichever default the consuming app happens to have. mt-2/mb-1
+		     reproduce the demo's inline `margin:8px 0 4px` exactly — no CSS
+		     rule sets this margin (it's specific to that one demo instance),
+		     but both values already sit on Tailwind's default spacing scale. -->
+		<h3 class="mt-2 mb-1 text-fg">{title}</h3>
+		{#if description}
+			<!-- jelinek.css:306 (.small) + shared .muted (jelinek.css:303): a
+			     fixed --step-down1 size at line-height 1.1 (not on Tailwind's
+			     leading scale, kept arbitrary) and the muted1 text color.
+			     font-weight 300 already comes from Card's own
+			     font-secondary/font-light, inherited here — not re-stated. -->
+			<p class="mb-4 text-step-down1 leading-[1.1] text-fg-muted1">{description}</p>
+		{/if}
+		{#if href}
+			<Button {href} {color} fullWidth>{ctaLabel}</Button>
+		{/if}
+	</div>
+</Card>