Document Shell Standard · Planning

Overview

The Document Shell defines a consistent presentation layer for every document page under console.pattayatogether.com. It is OPT-IN: pages that want the shell link assets/document-shell.css + assets/document-shell.js and add class="ds-page" on body. Legacy pages continue to work untouched.

Key Point

One shell · 18 sections · 2 reading modes · notes-loop built-in · export-ready. Pages opt in one-by-one. No forced migration.

Summary

Universal Document Shell ใช้ CSS/JS ร่วมที่ docs/assets/document-shell.{css,js}. หน้าใดเลือก opt-in จะได้: back-to-console, breadcrumb, identity header + badges, mode switch (Sequential / Importance), 15–18 sub-tabs, section blocks ที่มีสีเป็นระบบ, reading-flow grid, glossary, references, checklist, changelog, export affordance, และ Notes/Requirements loop พร้อม summary counter. Body text ≥ 16px (บังคับ). Note text 14px. Content full-width ด้วย gutter clamp.

The 18 required sections

#	Section	Purpose	Section class
1	Back to console	Always-visible escape to main portal	.ds-topbar .ds-backhome
2	Breadcrumb	Location chain	.ds-breadcrumb
3	Identity (title + subtitle + badges)	What this is in one look	.ds-identity
4	Key Point	The single most important takeaway	.ds-section--key
5	Executive Summary	3 paragraphs · 60-second read	.ds-section--summary
6	Purpose	Why this document exists	.ds-section--purpose
7	Role in ecosystem	Where this fits in the system	.ds-section--role
8	Audience	Who should read first	.ds-section--audience
9	Recommended before-reading	Reading prerequisites	.ds-reading-block.before
10	Recommended next-reading	Natural continuation	.ds-reading-block.next
11	Related docs	Siblings / peers	.ds-related
12	What's missing · gaps	Honest list of holes	.ds-section--missing
13	Glossary	Page-specific term definitions	.ds-section--glossary
14	References	Internal + external links	.ds-section--references
15	Revision / Change log	History of this doc	.ds-section--changelog
16	Export	Print / copy / download affordance	.ds-section--export
17	Notes / Requirements	Live note loop	.ds-section--notes
18	Checklist	Actionable remaining items	.ds-section--checklist

Pages MAY omit sections that have no honest content, but SHOULD NOT fake content. When omitted, the shell simply does not render that tab button.

Typography · color · full-width

Body text: 16px minimum (paragraph + list item)
Notes text: 14px (ONLY inside .ds-note)
H1: clamp(40, 6vw, 64) · Bebas Neue · gradient teal→blue→purple
H2: 32px · Bebas Neue · colored by section family
Badges / pills: 14px · Space Mono · uppercase
Code: 15px · teal-tinted
Layout: .ds-shell has no max-width · uses clamp(20px, 3vw, 48px) gutter
Section colors: key=pink · summary=teal · purpose=blue · role=purple · audience=amber · reading=blue-soft · missing=rose · glossary/references=neutral · checklist=green · changelog=neutral · export=amber · notes=purple-blue

Sub-tabs · 2 modes

Sequential: Overview → Context/Purpose → Audience → Main content → Reading flow → Checklist → Glossary → References → Changelog → Export → Notes.

Importance: Key Point → Summary → Main content → Risks/Missing → Checklist → Related → Notes → References.

Selected mode is remembered in localStorage["ds.mode"]. Each tab button declares which modes it participates in via data-modes="sequential,importance". The switch is pure client-side; deep-links to a specific tab can be added later.

How pages opt in

Add to the page's <head>:

<link rel="stylesheet" href="assets/document-shell.css">
<script src="assets/document-shell.js" defer></script>

Set the root attribute:

<html data-ds-doc-id="/<stable-path>.html">
<body class="ds-page">

Then compose the page from .ds-topbar, .ds-identity, .ds-modeswitch, .ds-tabs, and one .ds-tabpanel per section. The shell handles the rest.

Checklist · remaining work

☐ Opt-in planning pages one by one
☐ Opt-in runtime pages one by one
☐ Coordinate with B session on KB pages (presentation-layer only)
☐ Add data-ds-doc-id to every opted-in page
☐ Ensure Key Point / Summary / Glossary / Checklist content is real (not fake)
☐ Server-side notes persistence
☐ AI sweep implementation (Batch 7+)

What's missing · honest gaps

No server-side notes persistence · browser-local only
No AI sweep scheduler · model document only
Legacy pages are not retrofitted · shell is opt-in
Mobile fallback below 480px is minimal
Deep-link to specific tab not implemented

Glossary

Opt-in: A page becomes "shell-enabled" by linking the CSS/JS and adding class="ds-page" on body. No other pages are affected.
Section family: The CSS modifier (--key, --summary, --purpose, etc.) that colors a section consistently across pages.
data-modes: Attribute on tab buttons declaring which reading modes show this tab.

References

Change log

Date	Change
2026-04-19	v1.0 · initial spec · accompanies Batch 6 Document-IA

Notes / Requirements

Honest state: localStorage scaffold · no backend · see document-note-system.html.