Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions .codex/hooks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"description": "Impeccable design detector: runs after Edit/Write/apply_patch on UI files and surfaces findings as system reminders.",
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write|apply_patch",
"hooks": [
{
"type": "command",
"command": "node \"/Users/alexsoyes/.agents/skills/impeccable/scripts/hook.mjs\"",
"timeout": 5,
"statusMessage": "Checking UI changes"
}
]
}
]
}
}
87 changes: 87 additions & 0 deletions aidd_docs/tasks/2026_06/2026_06_30_safari_pdf_print/phase-1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
---
status: done
---

# Instruction: Stabilize Print Rendering

Part of [`plan.md`](./plan.md).

## Architecture projection

```txt
.
├── app/
│ ├── src/styles/sections/print.css 🔁
│ └── tests/e2e/print.spec.ts ✅
└── aidd_docs/tasks/2026_06/2026_06_30_safari_pdf_print/
├── spec.md ✅
├── plan.md ✅
└── phase-1.md ✅
```

## User Journey

```mermaid
---
title: Safari PDF Print
---
flowchart TD
Reader["Reader opens manifesto"]
BrowserPrint["Browser switches to print media"]
PrintStyles["Print stylesheet flattens layout"]
PdfOutput["PDF contains complete readable content"]

Reader --> BrowserPrint
BrowserPrint --> PrintStyles
PrintStyles --> PdfOutput
```

## Wireframe

```txt
┌─────────────────────────────────────┐
│ (1) Cover │
├─────────────────────────────────────┤
│ (2) Definition │
├─────────────────────────────────────┤
│ (3) Values │
├─────────────────────────────────────┤
│ (4) Principles │
├─────────────────────────────────────┤
│ (5) Signatures + footer │
└─────────────────────────────────────┘
```

1. Cover: printed as a document title page.
2. Definition: dictionary and comparison content visible in normal flow.
3. Values: every value row and supporting visual content visible.
4. Principles: every commitment visible without hover, reveal, or scroll state.
5. Signatures + footer: signatory wall and document footer included.

## Tasks to do

### `1)` Print stylesheet

> Make print media use a paged document flow instead of the interactive screen layout.

1. Reset clipped overflow, sticky/fixed positioning, transforms, animations, transitions, and reveal opacity under `@media print`.
2. Flatten the document layout to one column and remove sidebar/interactivity from the printable output.
3. Add current section classes to print-specific spacing, borders, and page-break behavior.
4. Keep visual content visible while preventing large blocks from being clipped or hidden.

### `2)` Print test

> Prove representative content survives print-media rendering.

1. Add a Playwright test that emulates `print` media.
2. Assert major page sections are visible.
3. Assert representative definition, value, principle, signature, and footer text exists in the rendered print document.

## Test acceptance criteria

| Task | Acceptance criteria |
| ---- | ------------------- |
| 1 | Print CSS includes `Definition`, `Values`, `Principles`, `Signature`, and footer in normal paged flow with screen-only UI hidden. |
| 1 | Reveal and animated content is force-visible in print media. |
| 2 | `npx playwright test tests/e2e/print.spec.ts` passes. |
| 2 | `npm run build` passes. |
38 changes: 38 additions & 0 deletions aidd_docs/tasks/2026_06/2026_06_30_safari_pdf_print/plan.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
objective: "Make the manifesto homepage reliably printable as a complete Safari PDF."
status: reviewed
---

# Plan: Safari PDF Print

## Overview

| Field | Value |
| ----- | ----- |
| **Goal** | Flatten screen-only layout and animation behavior under print media so Safari includes the complete manifesto in generated PDFs. |
| **Source** | User request: "rend la page printable en pdf avec toutes les informations à l'intérieur, sur Safari ça ne fonctionne pas" |

## Phases

| # | Phase | File |
| - | ----- | ---- |
| 1 | Stabilize print rendering | [`phase-1.md`](./phase-1.md) |

## Resources

| Source | Verified |
| ------ | -------- |
| `app/src/styles/sections/print.css` | Existing print rules are narrow and miss current sections such as `Definition`. |
| `app/src/styles/sections/base.css` | Screen styles use clipped overflow and reveal transforms that should be neutralized for print. |
| `app/src/styles/sections/layout.css` | The sticky spec index and viewport-height sidebar should not drive paged layout. |
| `app/src/styles/sections/{cover,values,principles,signature}.css` | Screen sections use large paddings, min-heights, transforms, and animated visual states. |
| `app/tests/e2e/*.spec.ts` | Playwright already drives browser checks; a focused print-media test fits the suite. |

## Decisions

| Decision | Why |
| -------- | --- |
| Keep the fix in print CSS plus a print-media e2e test. | The failure is browser paged-layout behavior, not content generation. |
| Hide the sticky navigation and interactive controls for print. | The PDF must prioritize the document body and not depend on sidebar or client interaction. |
| Force print-visible states for reveal/animated content. | Safari may snapshot before scroll-driven or JS-driven animation states become visible. |
| Avoid Safari-specific hacks where standard print rules work. | A deterministic print stylesheet is easier to maintain across browsers. |
52 changes: 52 additions & 0 deletions aidd_docs/tasks/2026_06/2026_06_30_safari_pdf_print/review.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Review: Safari PDF Print

The print-media implementation meets the task acceptance criteria and the focused validation passes; one minor code-health cleanup remains around residual print-rule duplication.

- **Verdict**: approve
- **Diff scope**: `HEAD...working tree` (tracked `app/src/styles/sections/print.css` plus untracked task/test files)
- **Axes run**: code, functional, relevancy
- **Date**: 2026_06_30
- **Findings**: 0 critical, 0 warning, 1 minor

Verdict: `approve` = ship it; `changes-requested` = fix the warnings or fixable criticals first; `blocked` = a critical that must not merge. The overall verdict is the strictest across the axes run.

## Code

Clean-code findings on the changed lines (or "Not run").

| Sev | Category | Location | Issue | Suggested fix |
| --- | -------- | -------- | ----- | ------------- |
| minor | code-health | `app/src/styles/sections/print.css:98`; existing overlap in `app/src/styles/sections/cover.css:227` and `app/src/styles/sections/signature.css:630` | The new work centralizes print layout in `print.css`, but older section-local `@media print` blocks still define overlapping cover/signature print behavior. Current cascade is coherent because `print.css` imports later, but the print source of truth is split. | In a cleanup pass, move or remove the residual section-local print blocks so `print.css` is the canonical print stylesheet. |

## Functional

Each acceptance criterion traced to the diff (or "Not run").

| Criterion | Met | Evidence / gap |
| --------- | --- | -------------- |
| Printable document includes cover, definition, values, principles, signatures, and footer. | Yes | `print.css` includes explicit print rules for `.cover`, `.definition`, `.values`, `.principles`, `.signature`, and `footer.doc-footer` (`app/src/styles/sections/print.css:79`). `print.spec.ts` asserts those selectors are visible (`app/tests/e2e/print.spec.ts:8`). WebKit print-media probe found all six visible and counted 4 value rows, 12 principles, and 39 signature cards. |
| Screen rendering remains unchanged. | Yes | The stylesheet change is entirely scoped under `@media print` (`app/src/styles/sections/print.css:2`), and the new test file only exercises print media. No normal-media CSS or component markup is changed. |
| Interactive-only controls are not required in PDF output. | Yes | `print.css` hides `.spec-index`, `.skip-link`, `#tweaks`, `.cover-cta`, `.sign-cta`, `.share-popup`, `.confetti-emoji`, and `.sig-linkedin` (`app/src/styles/sections/print.css:51`). The Playwright test asserts `.cover-cta`, `.sign-cta`, and `.spec-index` compute to `display: none` in print (`app/tests/e2e/print.spec.ts:41`). |
| Manifesto remains English-only. | Yes | The changed CSS adds no content, and the new test assertions use existing English manifesto strings only. |
| Print-media browser check verifies major sections are visible. | Yes | `npx playwright test tests/e2e/print.spec.ts` passed in both configured projects; the WebKit one-off print-media DOM/style probe also passed via `http://localhost:4399/`. |
| Print-media browser check verifies representative definition, value, principle, signature, and footer text. | Yes | `print.spec.ts` asserts representative text for definition, values, principles, signatures, and footer (`app/tests/e2e/print.spec.ts:12`). WebKit probe confirmed the same text using DOM `textContent`. |
| Existing build and tests still pass. | Yes | `npm run build` passed, `npm test` passed with 3 files / 52 tests, and `npx playwright test tests/e2e/print.spec.ts` passed with 2 tests. |
| Phase AC: Definition, Values, Principles, Signature, and footer are in normal paged flow with screen-only UI hidden. | Yes | Layout wrappers are flattened to `display: block`, auto dimensions, no containment, and visible overflow (`app/src/styles/sections/print.css:37`); screen-only UI is hidden (`app/src/styles/sections/print.css:51`). |
| Phase AC: Reveal and animated content is force-visible in print media. | Yes | Global print rules remove animation/transform/overflow constraints (`app/src/styles/sections/print.css:7`), reveal/value/demo/signature descendants are forced to opacity 1 and no transform (`app/src/styles/sections/print.css:62`), and the test asserts representative computed opacity/transform states (`app/tests/e2e/print.spec.ts:24`). |

- **Missing behaviors**: none against the stated acceptance criteria.
- **Unplanned behaviors**: none. The only visible behavior changes are scoped to print media.
- **Edge-case gaps**: no automated saved-PDF artifact comparison; validation uses print-media DOM/style checks as the task plan requires. The WebKit proxy check passed.

## Relevancy

Does the change belong (or "Not run"). Every finding ties to evidence, never an opinion.

| Sev | Lens | Location / rule | Misfit | Suggested fix |
| --- | ---- | --------------- | ------ | ------------- |
| minor | rot | Project baseline: no information duplication; `app/src/styles/sections/print.css:2`, `app/src/styles/sections/cover.css:227`, `app/src/styles/sections/signature.css:630` | Print behavior now lives mostly in `print.css`, but small legacy print blocks remain in section styles. This is not functionally contradictory today, but it leaves maintainers with multiple places to check for print behavior. | Consolidate the residual section-local print rules into `print.css` in a later cleanup. |

## Follow-up

- **Top fixes** (ranked): consolidate residual section-local print rules into `app/src/styles/sections/print.css` when convenient.
- **Notes**: Validation run in this review: `npm run build` passed; `npm test` passed (3 files, 52 tests); `npx playwright test tests/e2e/print.spec.ts` passed (2 tests); WebKit print-media DOM/style probe passed on `http://localhost:4399/` with all major sections visible and representative content present. Checklist result: DRY partial because of the minor residual print-rule duplication; naming/docs/code coherent; no over-engineering observed for the Safari print scope; no debug leftovers found by `rg` for console/debugger/TODO/test-only markers in the changed task files.
35 changes: 35 additions & 0 deletions aidd_docs/tasks/2026_06/2026_06_30_safari_pdf_print/spec.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Safari PDF Print

## Target

Allow the manifesto homepage to be printed or saved as a PDF in Safari with the complete manifesto content visible and readable.

## Hard constraints

- The printable document includes the cover, definition, values, principles, signatures, and footer content.
- Screen rendering must remain unchanged for normal browsing.
- Interactive-only controls and affordances must not be required for the PDF to contain the information.
- The manifesto remains English-only.

## Non-goals

- Add a dedicated PDF export service.
- Add browser-specific user instructions or visible print help text to the page.
- Redesign the screen layout.
- Change manifesto editorial content.

## Done-when

- A print-media browser check verifies that the major homepage sections are visible under `print` media.
- A print-media browser check verifies that representative value, principle, definition, signature, and footer text are present in the rendered document.
- Existing build and test commands still pass.

## Stakeholders

- Decider: project owner.
- Owner: manifesto app maintainers.
- Consumer: readers who print or save the manifesto as PDF from Safari.

## Context

Safari/WebKit print rendering is sensitive to screen-only layout constraints such as sticky positioning, viewport heights, clipped overflow, transforms, and reveal animations. The current app already has print CSS, but it does not fully flatten the current page structure for paged output.
Loading