@cyberskill/design 1.7.0 → 1.7.2

package/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "1.7.0"
+version: "1.7.2"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:

package/README.md

@@ -6,7 +6,7 @@
 
 ## Start here
 
-This is the **entrance document** for the CyberSkill Design System — VERSION **1.7.0** (see `VERSION`). The **product site** is Storybook at **`/`** on `design.cyberskill.world` (host-only; local: `npm run storybook`). Operator documentation is published in the Storybook **Docs** sidebar (and the Documentation Library at `/docs/viewer.html`). Legacy `/dashboard`, `/dashboard.html`, and `/playground/*` redirect to `/`. One sentence: a warm, Vietnamese-first, enterprise-grade system where every surface resolves four independent axes — **Theme** (light · dark · system) × **Element** (Ngũ Hành product identity: Kim · Mộc · Thủy · Hỏa · Thổ, 15 variants) × **Language** (EN · VI) × **Style** (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default).
+This is the **entrance document** for the CyberSkill Design System — VERSION **1.7.2** (see `VERSION`). The **product site** is Storybook at **`/`** on `design.cyberskill.world` (host-only; local: `npm run storybook`). Operator documentation is published in the Storybook **Docs** sidebar (and the Documentation Library at `/docs/viewer.html`). Legacy `/dashboard`, `/dashboard.html`, and `/playground/*` redirect to `/`. One sentence: a warm, Vietnamese-first, enterprise-grade system where every surface resolves four independent axes — **Theme** (light · dark · system) × **Element** (Ngũ Hành product identity: Kim · Mộc · Thủy · Hỏa · Thổ, 15 variants) × **Language** (EN · VI) × **Style** (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default).
 
 **Quick start by audience**
 - **Designers** — open Storybook (**Foundations / Components / Templates / Pages / Docs**). **Templates** lists all 85 starting points (Gallery → Atomic View, plus category stories including the 38-document VN A4 suite (Employment Suite + commercial framework) under **Templates → HR**). Flip Theme × Element × Language × Style live via the Storybook toolbar, Atomic View, and the Elements Geometry specimen.
@@ -15,7 +15,7 @@ This is the **entrance document** for the CyberSkill Design System — VERSION *
 
 - **Static / open-spec** (e.g. Google Stitch) — start at **`DESIGN.md`** (generated open-spec) → `llms.txt` → `tokens/tokens.dtcg.json`. Build **static** UI with `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/`. **Do not** treat `templates/**/*.dc.html` as source of truth.
 
-- **Implementers** — npm package **`@cyberskill/design@1.7.0`** (see `docs/consuming.md`; grant in `docs/consumer-grant.md` — still UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Browser demo:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, legacy `_esm/cs.mjs`). Or link **`styles.css`** from a clone/subtree (one file = everything), or copy a `templates/<slug>/` folder and edit one line in its `ds-base.js` (one-line rebind, validated end-to-end Jul 2026). Scope identity with `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Release signal: tip SHA + `docs/release-notes.md` (VERSION is **1.7.0**; no CHANGELOG).
+- **Implementers** — npm package **`@cyberskill/design@1.7.2`** (see `docs/consuming.md`; grant in `docs/consumer-grant.md` — still UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Browser demo:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, legacy `_esm/cs.mjs`). Or link **`styles.css`** from a clone/subtree (one file = everything), or copy a `templates/<slug>/` folder and edit one line in its `ds-base.js` (one-line rebind, validated end-to-end Jul 2026). Scope identity with `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Release signal: tip SHA + `docs/release-notes.md` (VERSION is **1.7.2**; no CHANGELOG).
 
 - **Maintainers** — `docs/doctrine.md` (expansion + verification), then `CONTRIBUTING.md` and `docs/quality-gates.md`.
 
@@ -170,7 +170,7 @@ Copied assets live in `assets/`: `logo-mark.svg` / `logo-mark.png` (official mas
 
 Highlights: **Button** — Umber primary; variants primary/secondary/tertiary/ghost/danger/danger-ghost; sizes xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select / NativeSelect** share one `.cs-field` frame (label + description/error; diacritic/IME-safe). **DataTable** — caption, scoped headers, per-column render, idle/loading/error/empty triad. **Card** — warm panel + header/body/footer. **Logo** renders the exact official mark; **Icon** drives the in-repo line-icon set. The **AI-native** family carries the brand's explainability doctrine — disclosure, human review, wish capture, and confidence, all stated in words (never colour alone).
 
-**Install / package name.** This monolith publishes as **`@cyberskill/design`** (live at **1.7.0**; grant in `docs/consumer-grant.md` governs *use* — package remains UNLICENSED). Do **not** install `@cyberskill/react` for this tree — that name is historical marketing-site inventory, not this package.
+**Install / package name.** This monolith publishes as **`@cyberskill/design`** (live at **1.7.2**; grant in `docs/consumer-grant.md` governs *use* — package remains UNLICENSED). Do **not** install `@cyberskill/react` for this tree — that name is historical marketing-site inventory, not this package.
 
 **Source inventory vs. extensions.** An earlier CyberSkill surface shipped six primitives — `Button`, `TextField`, `Dialog`, `DataTable`, `AIDisclosureBadge`, `HumanReviewGate` — plus a brand `Logo`. Everything else in **this** package is an **intentional extension** built in the brand's own token vocabulary so consumers have a complete working kit: `Icon` (the marketing site's real in-repo line-icon set), the standard Forms / Feedback / Data / Navigation / Overlays primitives (search, stepper, slider, file upload, list, description list, timeline, accordion, kbd, code block, sidebar, steps, command palette, popover, drawer, and more), added AI-native pieces (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) that formalise the Lumi wish-flow, and the `LumiAvatar` mascot. None invent new visual language — they reuse the anchors, surfaces, type, and motion already defined.
 
@@ -283,7 +283,7 @@ Every template resolves to one of six archetypes, framed by `templates/doc-templ
 ## Index / manifest
 
 ```
-styles.css                 ← single entry point (@import manifest only) · VERSION 1.7.0
+styles.css                 ← single entry point (@import manifest only) · VERSION 1.7.2
 tokens/                    fonts · colors · typography · spacing · elevation · motion · component-tokens · elements (Ngũ Hành packs)
 base/                      reset · typography · components · forms · feedback · data · navigation · ai · controls · collections · shell · glass · interaction · a11y · responsive
 components/                button · textfield · dialog · datatable · forms · feedback · data · navigation · overlays · ai · logo · icon · brand

package/SKILL.md

@@ -17,7 +17,7 @@ If the user invokes this skill without any other guidance, ask them what they wa
 | **Bundler React (Next/Vite/SSR)** | `docs/consuming.md` | `import { Button } from "@cyberskill/design"` + `styles.css`. React is a peer. |
 | **Maintainers** | `docs/doctrine.md` | Expansion + verification; Storybook Docs at `design.cyberskill.world`. |
 
-Dual-path detail: `docs/consuming.md`. Release signal: tip SHA + `docs/release-notes.md` (VERSION is **1.7.0**; no CHANGELOG).
+Dual-path detail: `docs/consuming.md`. Release signal: tip SHA + `docs/release-notes.md` (VERSION is **1.7.2**; no CHANGELOG).
 
 - **`README.md`** — the entrance + design guide + manifest: anchor immutables, CONTENT FUNDAMENTALS (voice = warm/direct/honest/respectful, Vietnamese-first, the "wish" metaphor), VISUAL FOUNDATIONS, ICONOGRAPHY, and the component/kit index. Read it first.
 
@@ -43,7 +43,7 @@ Dual-path detail: `docs/consuming.md`. Release signal: tip SHA + `docs/release-n
 
 ## Exporting
 
-Every artifact exports, all paths preserving Vietnamese Unicode (see `docs/conventions.md` → Export paths). Decks → **editable PPTX** (`gen_pptx`, force VN per slide via `__dcSetProps`); documents (any with `@page{size}` / `omelette-owns-print`) → **PDF + editable DOCX** from one **Tải / Download** menu (`templates/_vendor/doc-export.js`, live `.cs-sheet`, no CDN; CI PDF via Playwright); emails / product pages / any DC → **standalone offline HTML** (make a same-folder `*-standalone.html` copy with static `<link>`/`<script>` resource tags, then `super_inline_html`). Contribution/expansion process is **`docs/doctrine.md`** + the decision log in `docs/conventions.md`; deep-verification harnesses live in `_audit/` (see `_audit/README.md`).
+Every artifact exports, all paths preserving Vietnamese Unicode (see `docs/conventions.md` → Export paths). Decks → **editable PPTX** (`gen_pptx`, force VN per slide via `__dcSetProps`); documents (any with `@page{size}` / `omelette-owns-print`) → **PDF + editable DOCX** from one **Tải / Download** menu (`templates/_vendor/doc-export.js`, live `.cs-sheet`, Flate PDF + OOXML walk, no CDN; CI PDF via Playwright); emails / product pages / any DC → **standalone offline HTML** (make a same-folder `*-standalone.html` copy with static `<link>`/`<script>` resource tags, then `super_inline_html`). Contribution/expansion process is **`docs/doctrine.md`** + the decision log in `docs/conventions.md`; deep-verification harnesses live in `_audit/` (see `_audit/README.md`).
 
 ## Hard rules
 
@@ -63,7 +63,7 @@ Every artifact exports, all paths preserving Vietnamese Unicode (see `docs/conve
 
 - Voice stays warm/direct/honest/respectful — never fun/playful/edgy. Products are "wishes" that Lumi helps grant.
 
-- Expansion rule: when any set grows (element/variant, icon, component, language), update every deliverable in the same change — tokens, cards + related guidelines, contract trio, all template enums, Storybook toolbar / Atomic View, docs incl. every related document/README — and grep the old list to prove it. Full text: `docs/doctrine.md`. VERSION **1.7.0** (auto-bumps on `main`; owner may still force a bump; no changelog).
+- Expansion rule: when any set grows (element/variant, icon, component, language), update every deliverable in the same change — tokens, cards + related guidelines, contract trio, all template enums, Storybook toolbar / Atomic View, docs incl. every related document/README — and grep the old list to prove it. Full text: `docs/doctrine.md`. VERSION **1.7.2** (auto-bumps on `main`; owner may still force a bump; no changelog).
 
 - **Stitch / non-DC tools must not consume `*.dc.html` as source of truth.** Those files need the Design Components compiler (tweaks, `x-import`, `__dcSetProps`). Generate static UI from `DESIGN.md` / DTCG / `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/` instead. DC authoring requires a compiler session (Claude Design, or a full clone with the compiler).
 

package/VERSION

@@ -1 +1 @@
-1.7.0
+1.7.2

package/_ds_bundle.js

@@ -1,4 +1,4 @@
-/* @ds-bundle: {"format":4,"namespace":"CyberSkillDesignSystem_847b3c","components":[{"name":"AIDisclosureBadge","sourcePath":"components/ai/AIDisclosureBadge.jsx"},{"name":"ChatMessage","sourcePath":"components/ai/ChatMessage.jsx"},{"name":"CitationList","sourcePath":"components/ai/CitationList.jsx"},{"name":"ConfidenceMeter","sourcePath":"components/ai/ConfidenceMeter.jsx"},{"name":"HumanReviewGate","sourcePath":"components/ai/HumanReviewGate.jsx"},{"name":"PromptInput","sourcePath":"components/ai/PromptInput.jsx"},{"name":"PromptSuggestions","sourcePath":"components/ai/PromptSuggestions.jsx"},{"name":"TypingIndicator","sourcePath":"components/ai/TypingIndicator.jsx"},{"name":"LumiAvatar","sourcePath":"components/brand/LumiAvatar.jsx"},{"name":"Button","sourcePath":"components/button/Button.jsx"},{"name":"ButtonGroup","sourcePath":"components/button/ButtonGroup.jsx"},{"name":"FloatingActionButton","sourcePath":"components/button/FloatingActionButton.jsx"},{"name":"Accordion","sourcePath":"components/data/Accordion.jsx"},{"name":"AspectRatio","sourcePath":"components/data/AspectRatio.jsx"},{"name":"Avatar","sourcePath":"components/data/Avatar.jsx"},{"name":"AvatarGroup","sourcePath":"components/data/Avatar.jsx"},{"name":"Card","sourcePath":"components/data/Card.jsx"},{"name":"CardHeader","sourcePath":"components/data/Card.jsx"},{"name":"CardBody","sourcePath":"components/data/Card.jsx"},{"name":"CardFooter","sourcePath":"components/data/Card.jsx"},{"name":"Carousel","sourcePath":"components/data/Carousel.jsx"},{"name":"Chart","sourcePath":"components/data/Chart.jsx"},{"name":"CodeBlock","sourcePath":"components/data/CodeBlock.jsx"},{"name":"Collapsible","sourcePath":"components/data/Collapsible.jsx"},{"name":"Comment","sourcePath":"components/data/Comment.jsx"},{"name":"DescriptionList","sourcePath":"components/data/DescriptionList.jsx"},{"name":"Divider","sourcePath":"components/data/Divider.jsx"},{"name":"Image","sourcePath":"components/data/Image.jsx"},{"name":"Item","sourcePath":"components/data/Item.jsx"},{"name":"Kbd","sourcePath":"components/data/Kbd.jsx"},{"name":"List","sourcePath":"components/data/List.jsx"},{"name":"ListItem","sourcePath":"components/data/List.jsx"},{"name":"Masonry","sourcePath":"components/data/Masonry.jsx"},{"name":"QRCode","sourcePath":"components/data/QRCode.jsx"},{"name":"ScrollArea","sourcePath":"components/data/ScrollArea.jsx"},{"name":"Sortable","sourcePath":"components/data/Sortable.jsx"},{"name":"Splitter","sourcePath":"components/data/Splitter.jsx"},{"name":"Stat","sourcePath":"components/data/Stat.jsx"},{"name":"Terminal","sourcePath":"components/data/Terminal.jsx"},{"name":"Timeline","sourcePath":"components/data/Timeline.jsx"},{"name":"Tooltip","sourcePath":"components/data/Tooltip.jsx"},{"name":"Tree","sourcePath":"components/data/Tree.jsx"},{"name":"Watermark","sourcePath":"components/data/Watermark.jsx"},{"name":"DataGrid","sourcePath":"components/datatable/DataGrid.jsx"},{"name":"DataTable","sourcePath":"components/datatable/DataTable.jsx"},{"name":"TreeTable","sourcePath":"components/datatable/TreeTable.jsx"},{"name":"Dialog","sourcePath":"components/dialog/Dialog.jsx"},{"name":"Alert","sourcePath":"components/feedback/Alert.jsx"},{"name":"Badge","sourcePath":"components/feedback/Badge.jsx"},{"name":"EmptyState","sourcePath":"components/feedback/EmptyState.jsx"},{"name":"ProgressBar","sourcePath":"components/feedback/ProgressBar.jsx"},{"name":"Result","sourcePath":"components/feedback/Result.jsx"},{"name":"Skeleton","sourcePath":"components/feedback/Skeleton.jsx"},{"name":"Spinner","sourcePath":"components/feedback/Spinner.jsx"},{"name":"StatusIndicator","sourcePath":"components/feedback/StatusIndicator.jsx"},{"name":"Tag","sourcePath":"components/feedback/Tag.jsx"},{"name":"ToastStack","sourcePath":"components/feedback/Toast.jsx"},{"name":"Toast","sourcePath":"components/feedback/Toast.jsx"},{"name":"Calendar","sourcePath":"components/forms/Calendar.jsx"},{"name":"Cascader","sourcePath":"components/forms/Cascader.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"ColorPicker","sourcePath":"components/forms/ColorPicker.jsx"},{"name":"Combobox","sourcePath":"components/forms/Combobox.jsx"},{"name":"DatePicker","sourcePath":"components/forms/DatePicker.jsx"},{"name":"Editor","sourcePath":"components/forms/Editor.jsx"},{"name":"FileUpload","sourcePath":"components/forms/FileUpload.jsx"},{"name":"Form","sourcePath":"components/forms/Form.jsx"},{"name":"FormField","sourcePath":"components/forms/Form.jsx"},{"name":"FormFieldArray","sourcePath":"components/forms/Form.jsx"},{"name":"FormWizard","sourcePath":"components/forms/Form.jsx"},{"name":"InlineEdit","sourcePath":"components/forms/InlineEdit.jsx"},{"name":"InputGroup","sourcePath":"components/forms/InputGroup.jsx"},{"name":"InputOTP","sourcePath":"components/forms/InputOTP.jsx"},{"name":"Mentions","sourcePath":"components/forms/Mentions.jsx"},{"name":"NativeSelect","sourcePath":"components/forms/NativeSelect.jsx"},{"name":"NumberField","sourcePath":"components/forms/NumberField.jsx"},{"name":"Radio","sourcePath":"components/forms/RadioGroup.jsx"},{"name":"RadioGroup","sourcePath":"components/forms/RadioGroup.jsx"},{"name":"Rating","sourcePath":"components/forms/Rating.jsx"},{"name":"SearchField","sourcePath":"components/forms/SearchField.jsx"},{"name":"SegmentedControl","sourcePath":"components/forms/SegmentedControl.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Slider","sourcePath":"components/forms/Slider.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"TagInput","sourcePath":"components/forms/TagInput.jsx"},{"name":"Textarea","sourcePath":"components/forms/Textarea.jsx"},{"name":"TimePicker","sourcePath":"components/forms/TimePicker.jsx"},{"name":"Toggle","sourcePath":"components/forms/Toggle.jsx"},{"name":"Transfer","sourcePath":"components/forms/Transfer.jsx"},{"name":"TreeSelect","sourcePath":"components/forms/TreeSelect.jsx"},{"name":"CS_ICONS","sourcePath":"components/icon/Icon.jsx"},{"name":"Icon","sourcePath":"components/icon/Icon.jsx"},{"name":"Logo","sourcePath":"components/logo/Logo.jsx"},{"name":"CS_LOGO_VIEWBOX","sourcePath":"components/logo/logo-data.js"},{"name":"CS_LOGO_MARK_INNER","sourcePath":"components/logo/logo-data.js"},{"name":"Anchor","sourcePath":"components/navigation/Anchor.jsx"},{"name":"BackTop","sourcePath":"components/navigation/BackTop.jsx"},{"name":"Breadcrumb","sourcePath":"components/navigation/Breadcrumb.jsx"},{"name":"CommandPalette","sourcePath":"components/navigation/CommandPalette.jsx"},{"name":"Dock","sourcePath":"components/navigation/Dock.jsx"},{"name":"HotKeys","sourcePath":"components/navigation/HotKeys.jsx"},{"name":"Link","sourcePath":"components/navigation/Link.jsx"},{"name":"Menu","sourcePath":"components/navigation/Menu.jsx"},{"name":"MenuItem","sourcePath":"components/navigation/Menu.jsx"},{"name":"Menubar","sourcePath":"components/navigation/Menubar.jsx"},{"name":"NavigationMenu","sourcePath":"components/navigation/NavigationMenu.jsx"},{"name":"Pagination","sourcePath":"components/navigation/Pagination.jsx"},{"name":"Sidebar","sourcePath":"components/navigation/Sidebar.jsx"},{"name":"NavItem","sourcePath":"components/navigation/Sidebar.jsx"},{"name":"Steps","sourcePath":"components/navigation/Steps.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"},{"name":"Tab","sourcePath":"components/navigation/Tabs.jsx"},{"name":"Toolbar","sourcePath":"components/navigation/Toolbar.jsx"},{"name":"AlertDialog","sourcePath":"components/overlays/AlertDialog.jsx"},{"name":"ContextMenu","sourcePath":"components/overlays/ContextMenu.jsx"},{"name":"Drawer","sourcePath":"components/overlays/Drawer.jsx"},{"name":"HoverCard","sourcePath":"components/overlays/HoverCard.jsx"},{"name":"OverlayProvider","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"Popconfirm","sourcePath":"components/overlays/Popconfirm.jsx"},{"name":"Popover","sourcePath":"components/overlays/Popover.jsx"},{"name":"Tour","sourcePath":"components/overlays/Tour.jsx"},{"name":"TextField","sourcePath":"components/textfield/TextField.jsx"}],"sourceHashes":{"components/_i18n/i18n.js":"c8fc9f74a4c0","components/_i18n/strings.js":"0e63dc7515d8","components/_utils/cx.js":"ad6a747ea116","components/ai/AIDisclosureBadge.jsx":"4c8954aa2d79","components/ai/ChatMessage.jsx":"344e9c13fcfe","components/ai/CitationList.jsx":"4d12ef868ff3","components/ai/ConfidenceMeter.jsx":"68cf2bba3a9e","components/ai/HumanReviewGate.jsx":"922b278dca5c","components/ai/PromptInput.jsx":"7634643dafa5","components/ai/PromptSuggestions.jsx":"02d64117ecfa","components/ai/TypingIndicator.jsx":"149e3a0c7ef8","components/brand/LumiAvatar.jsx":"b6444360cf80","components/button/Button.jsx":"6d902a925eed","components/button/ButtonGroup.jsx":"1a1481f6fb93","components/button/FloatingActionButton.jsx":"ce49fe4129a3","components/data/Accordion.jsx":"fed81278cefd","components/data/AspectRatio.jsx":"6c1e8703891e","components/data/Avatar.jsx":"88c8f59334e6","components/data/Card.jsx":"96e1f9ef44a9","components/data/Carousel.jsx":"caf09a766c42","components/data/Chart.jsx":"1953e9fef120","components/data/CodeBlock.jsx":"04e0bd2507e2","components/data/Collapsible.jsx":"3d961fef83f8","components/data/Comment.jsx":"81469a910d80","components/data/DescriptionList.jsx":"ce50d72546bb","components/data/Divider.jsx":"2d08b4a7b18e","components/data/Image.jsx":"0ea06cfe1532","components/data/Item.jsx":"7e1ac68c4e96","components/data/Kbd.jsx":"3b3d867cbdd8","components/data/List.jsx":"5c221b19efe0","components/data/Masonry.jsx":"a65508731d79","components/data/QRCode.jsx":"6acaf577a7fc","components/data/ScrollArea.jsx":"c2e2ec304b1e","components/data/Sortable.jsx":"ed7615a9469a","components/data/Splitter.jsx":"d231064601e9","components/data/Stat.jsx":"35734a801a71","components/data/Terminal.jsx":"9d419686bea8","components/data/Timeline.jsx":"22058a781a98","components/data/Tooltip.jsx":"3f30c6b1bf1d","components/data/Tree.jsx":"a1d33dec0451","components/data/Watermark.jsx":"66b7b71488d8","components/data/qr-encode.js":"14e8de77df5f","components/datatable/DataGrid.jsx":"c84fe5d5b8cc","components/datatable/DataTable.jsx":"2a7c3bda5142","components/datatable/TreeTable.jsx":"597c35135ebb","components/dialog/Dialog.jsx":"8ef7722c37c4","components/feedback/Alert.jsx":"4dbf685af3e1","components/feedback/Badge.jsx":"e691ae1634f8","components/feedback/EmptyState.jsx":"5ba1437e6d81","components/feedback/ProgressBar.jsx":"c63a431e9eed","components/feedback/Result.jsx":"c168f8dcb009","components/feedback/Skeleton.jsx":"86ee345cb412","components/feedback/Spinner.jsx":"cad2ed4008a6","components/feedback/StatusIndicator.jsx":"d27a5fc3db2a","components/feedback/Tag.jsx":"13d288da9f38","components/feedback/Toast.jsx":"6a7832751669","components/forms/Calendar.jsx":"8a66cbe766af","components/forms/Cascader.jsx":"63f35db7101d","components/forms/Checkbox.jsx":"2badb7b3b72b","components/forms/ColorPicker.jsx":"d04db0ee7678","components/forms/Combobox.jsx":"3f2fb4d28922","components/forms/DatePicker.jsx":"7a6c18e1e635","components/forms/Editor.jsx":"194484fb9dc4","components/forms/FileUpload.jsx":"509dfaff8bea","components/forms/Form.jsx":"6945025a205f","components/forms/InlineEdit.jsx":"5ffb40598769","components/forms/InputGroup.jsx":"06d6c22420d0","components/forms/InputOTP.jsx":"c3a5d02ffebc","components/forms/Mentions.jsx":"3924619137f3","components/forms/NativeSelect.jsx":"d6f6d300f75d","components/forms/NumberField.jsx":"44975fd25721","components/forms/RadioGroup.jsx":"1a64f7600e01","components/forms/Rating.jsx":"bd5c94741d63","components/forms/SearchField.jsx":"2a12c65900ec","components/forms/SegmentedControl.jsx":"1f143c62fb56","components/forms/Select.jsx":"009495d18845","components/forms/Slider.jsx":"213b7b9edec9","components/forms/Switch.jsx":"3cdf185f757c","components/forms/TagInput.jsx":"2d1554422097","components/forms/Textarea.jsx":"cf244fee0e37","components/forms/TimePicker.jsx":"abd6e54b2983","components/forms/Toggle.jsx":"a5378fd66713","components/forms/Transfer.jsx":"dd0c02d1014e","components/forms/TreeSelect.jsx":"a5b1b91d1d6a","components/icon/Icon.jsx":"280fba8477db","components/logo/Logo.jsx":"445c5f5fbd40","components/logo/logo-data.js":"f1a251a50c8f","components/navigation/Anchor.jsx":"491fb330e718","components/navigation/BackTop.jsx":"5cac0081fc20","components/navigation/Breadcrumb.jsx":"45636f3b0a51","components/navigation/CommandPalette.jsx":"51c25b8416eb","components/navigation/Dock.jsx":"3073e2870c65","components/navigation/HotKeys.jsx":"f0f707a3335d","components/navigation/Link.jsx":"d4fe3fcffd2c","components/navigation/Menu.jsx":"999e1659f8b3","components/navigation/Menubar.jsx":"1aa64f59891e","components/navigation/NavigationMenu.jsx":"020279fd7f79","components/navigation/Pagination.jsx":"a1fc19bfd104","components/navigation/Sidebar.jsx":"d578b013ad33","components/navigation/Steps.jsx":"e26c4a18cdfc","components/navigation/Tabs.jsx":"16964d61f349","components/navigation/Toolbar.jsx":"0f1f25d9e0c5","components/overlays/AlertDialog.jsx":"dcfbb7f61506","components/overlays/ContextMenu.jsx":"e3fb63e7b74f","components/overlays/Drawer.jsx":"a1c719da3f62","components/overlays/HoverCard.jsx":"5cfabde80960","components/overlays/OverlayManager.jsx":"6b58c4dad9da","components/overlays/Popconfirm.jsx":"55f08dba5f38","components/overlays/Popover.jsx":"1582f7fa5533","components/overlays/Tour.jsx":"707cd7464f0c","components/textfield/TextField.jsx":"c06bd9729f20","tokens/tokens.js":"ed1c735bcda9"},"inlinedExternals":[],"unexposedExports":[{"name":"attachFocusTrap","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"cx","sourcePath":"components/_utils/cx.js"},{"name":"focusableSelector","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"formatCurrency","sourcePath":"components/_i18n/i18n.js"},{"name":"formatDate","sourcePath":"components/_i18n/i18n.js"},{"name":"formatNumber","sourcePath":"components/_i18n/i18n.js"},{"name":"getOverlayManager","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"getPath","sourcePath":"components/forms/Form.jsx"},{"name":"makeT","sourcePath":"components/_i18n/i18n.js"},{"name":"monthName","sourcePath":"components/_i18n/i18n.js"},{"name":"qrMatrix","sourcePath":"components/data/qr-encode.js"},{"name":"reorderItems","sourcePath":"components/data/Sortable.jsx"},{"name":"resolveLang","sourcePath":"components/_i18n/i18n.js"},{"name":"setPath","sourcePath":"components/forms/Form.jsx"},{"name":"strings","sourcePath":"components/_i18n/strings.js"},{"name":"tokens","sourcePath":"tokens/tokens.js"},{"name":"tr","sourcePath":"components/_i18n/i18n.js"},{"name":"useLang","sourcePath":"components/_i18n/i18n.js"},{"name":"useOverlayLayer","sourcePath":"components/overlays/OverlayManager.jsx"}]} */
+/* @ds-bundle: {"format":4,"namespace":"CyberSkillDesignSystem_847b3c","components":[{"name":"AIDisclosureBadge","sourcePath":"components/ai/AIDisclosureBadge.jsx"},{"name":"ChatMessage","sourcePath":"components/ai/ChatMessage.jsx"},{"name":"CitationList","sourcePath":"components/ai/CitationList.jsx"},{"name":"ConfidenceMeter","sourcePath":"components/ai/ConfidenceMeter.jsx"},{"name":"HumanReviewGate","sourcePath":"components/ai/HumanReviewGate.jsx"},{"name":"PromptInput","sourcePath":"components/ai/PromptInput.jsx"},{"name":"PromptSuggestions","sourcePath":"components/ai/PromptSuggestions.jsx"},{"name":"TypingIndicator","sourcePath":"components/ai/TypingIndicator.jsx"},{"name":"LumiAvatar","sourcePath":"components/brand/LumiAvatar.jsx"},{"name":"Button","sourcePath":"components/button/Button.jsx"},{"name":"ButtonGroup","sourcePath":"components/button/ButtonGroup.jsx"},{"name":"FloatingActionButton","sourcePath":"components/button/FloatingActionButton.jsx"},{"name":"Accordion","sourcePath":"components/data/Accordion.jsx"},{"name":"AspectRatio","sourcePath":"components/data/AspectRatio.jsx"},{"name":"Avatar","sourcePath":"components/data/Avatar.jsx"},{"name":"AvatarGroup","sourcePath":"components/data/Avatar.jsx"},{"name":"Card","sourcePath":"components/data/Card.jsx"},{"name":"CardHeader","sourcePath":"components/data/Card.jsx"},{"name":"CardBody","sourcePath":"components/data/Card.jsx"},{"name":"CardFooter","sourcePath":"components/data/Card.jsx"},{"name":"Carousel","sourcePath":"components/data/Carousel.jsx"},{"name":"Chart","sourcePath":"components/data/Chart.jsx"},{"name":"CodeBlock","sourcePath":"components/data/CodeBlock.jsx"},{"name":"Collapsible","sourcePath":"components/data/Collapsible.jsx"},{"name":"Comment","sourcePath":"components/data/Comment.jsx"},{"name":"DescriptionList","sourcePath":"components/data/DescriptionList.jsx"},{"name":"Divider","sourcePath":"components/data/Divider.jsx"},{"name":"Image","sourcePath":"components/data/Image.jsx"},{"name":"Item","sourcePath":"components/data/Item.jsx"},{"name":"Kbd","sourcePath":"components/data/Kbd.jsx"},{"name":"List","sourcePath":"components/data/List.jsx"},{"name":"ListItem","sourcePath":"components/data/List.jsx"},{"name":"Masonry","sourcePath":"components/data/Masonry.jsx"},{"name":"QRCode","sourcePath":"components/data/QRCode.jsx"},{"name":"ScrollArea","sourcePath":"components/data/ScrollArea.jsx"},{"name":"Sortable","sourcePath":"components/data/Sortable.jsx"},{"name":"Splitter","sourcePath":"components/data/Splitter.jsx"},{"name":"Stat","sourcePath":"components/data/Stat.jsx"},{"name":"Terminal","sourcePath":"components/data/Terminal.jsx"},{"name":"Timeline","sourcePath":"components/data/Timeline.jsx"},{"name":"Tooltip","sourcePath":"components/data/Tooltip.jsx"},{"name":"Tree","sourcePath":"components/data/Tree.jsx"},{"name":"Watermark","sourcePath":"components/data/Watermark.jsx"},{"name":"DataGrid","sourcePath":"components/datatable/DataGrid.jsx"},{"name":"DataTable","sourcePath":"components/datatable/DataTable.jsx"},{"name":"TreeTable","sourcePath":"components/datatable/TreeTable.jsx"},{"name":"Dialog","sourcePath":"components/dialog/Dialog.jsx"},{"name":"Alert","sourcePath":"components/feedback/Alert.jsx"},{"name":"Badge","sourcePath":"components/feedback/Badge.jsx"},{"name":"EmptyState","sourcePath":"components/feedback/EmptyState.jsx"},{"name":"ProgressBar","sourcePath":"components/feedback/ProgressBar.jsx"},{"name":"Result","sourcePath":"components/feedback/Result.jsx"},{"name":"Skeleton","sourcePath":"components/feedback/Skeleton.jsx"},{"name":"Spinner","sourcePath":"components/feedback/Spinner.jsx"},{"name":"StatusIndicator","sourcePath":"components/feedback/StatusIndicator.jsx"},{"name":"Tag","sourcePath":"components/feedback/Tag.jsx"},{"name":"ToastStack","sourcePath":"components/feedback/Toast.jsx"},{"name":"Toast","sourcePath":"components/feedback/Toast.jsx"},{"name":"Calendar","sourcePath":"components/forms/Calendar.jsx"},{"name":"Cascader","sourcePath":"components/forms/Cascader.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"ColorPicker","sourcePath":"components/forms/ColorPicker.jsx"},{"name":"Combobox","sourcePath":"components/forms/Combobox.jsx"},{"name":"DatePicker","sourcePath":"components/forms/DatePicker.jsx"},{"name":"Editor","sourcePath":"components/forms/Editor.jsx"},{"name":"FileUpload","sourcePath":"components/forms/FileUpload.jsx"},{"name":"Form","sourcePath":"components/forms/Form.jsx"},{"name":"FormField","sourcePath":"components/forms/Form.jsx"},{"name":"FormFieldArray","sourcePath":"components/forms/Form.jsx"},{"name":"FormWizard","sourcePath":"components/forms/Form.jsx"},{"name":"InlineEdit","sourcePath":"components/forms/InlineEdit.jsx"},{"name":"InputGroup","sourcePath":"components/forms/InputGroup.jsx"},{"name":"InputOTP","sourcePath":"components/forms/InputOTP.jsx"},{"name":"Mentions","sourcePath":"components/forms/Mentions.jsx"},{"name":"NativeSelect","sourcePath":"components/forms/NativeSelect.jsx"},{"name":"NumberField","sourcePath":"components/forms/NumberField.jsx"},{"name":"Radio","sourcePath":"components/forms/RadioGroup.jsx"},{"name":"RadioGroup","sourcePath":"components/forms/RadioGroup.jsx"},{"name":"Rating","sourcePath":"components/forms/Rating.jsx"},{"name":"SearchField","sourcePath":"components/forms/SearchField.jsx"},{"name":"SegmentedControl","sourcePath":"components/forms/SegmentedControl.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Slider","sourcePath":"components/forms/Slider.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"TagInput","sourcePath":"components/forms/TagInput.jsx"},{"name":"Textarea","sourcePath":"components/forms/Textarea.jsx"},{"name":"TimePicker","sourcePath":"components/forms/TimePicker.jsx"},{"name":"Toggle","sourcePath":"components/forms/Toggle.jsx"},{"name":"Transfer","sourcePath":"components/forms/Transfer.jsx"},{"name":"TreeSelect","sourcePath":"components/forms/TreeSelect.jsx"},{"name":"CS_ICONS","sourcePath":"components/icon/Icon.jsx"},{"name":"Icon","sourcePath":"components/icon/Icon.jsx"},{"name":"Logo","sourcePath":"components/logo/Logo.jsx"},{"name":"CS_LOGO_VIEWBOX","sourcePath":"components/logo/logo-data.js"},{"name":"CS_LOGO_MARK_INNER","sourcePath":"components/logo/logo-data.js"},{"name":"Anchor","sourcePath":"components/navigation/Anchor.jsx"},{"name":"BackTop","sourcePath":"components/navigation/BackTop.jsx"},{"name":"Breadcrumb","sourcePath":"components/navigation/Breadcrumb.jsx"},{"name":"CommandPalette","sourcePath":"components/navigation/CommandPalette.jsx"},{"name":"Dock","sourcePath":"components/navigation/Dock.jsx"},{"name":"HotKeys","sourcePath":"components/navigation/HotKeys.jsx"},{"name":"Link","sourcePath":"components/navigation/Link.jsx"},{"name":"Menu","sourcePath":"components/navigation/Menu.jsx"},{"name":"MenuItem","sourcePath":"components/navigation/Menu.jsx"},{"name":"Menubar","sourcePath":"components/navigation/Menubar.jsx"},{"name":"NavigationMenu","sourcePath":"components/navigation/NavigationMenu.jsx"},{"name":"Pagination","sourcePath":"components/navigation/Pagination.jsx"},{"name":"Sidebar","sourcePath":"components/navigation/Sidebar.jsx"},{"name":"NavItem","sourcePath":"components/navigation/Sidebar.jsx"},{"name":"Steps","sourcePath":"components/navigation/Steps.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"},{"name":"Tab","sourcePath":"components/navigation/Tabs.jsx"},{"name":"Toolbar","sourcePath":"components/navigation/Toolbar.jsx"},{"name":"AlertDialog","sourcePath":"components/overlays/AlertDialog.jsx"},{"name":"ContextMenu","sourcePath":"components/overlays/ContextMenu.jsx"},{"name":"Drawer","sourcePath":"components/overlays/Drawer.jsx"},{"name":"HoverCard","sourcePath":"components/overlays/HoverCard.jsx"},{"name":"OverlayProvider","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"Popconfirm","sourcePath":"components/overlays/Popconfirm.jsx"},{"name":"Popover","sourcePath":"components/overlays/Popover.jsx"},{"name":"Tour","sourcePath":"components/overlays/Tour.jsx"},{"name":"TextField","sourcePath":"components/textfield/TextField.jsx"}],"sourceHashes":{"components/_i18n/i18n.js":"c8fc9f74a4c0","components/_i18n/strings.js":"0e63dc7515d8","components/_utils/cx.js":"ad6a747ea116","components/ai/AIDisclosureBadge.jsx":"4c8954aa2d79","components/ai/ChatMessage.jsx":"344e9c13fcfe","components/ai/CitationList.jsx":"4d12ef868ff3","components/ai/ConfidenceMeter.jsx":"68cf2bba3a9e","components/ai/HumanReviewGate.jsx":"922b278dca5c","components/ai/PromptInput.jsx":"7634643dafa5","components/ai/PromptSuggestions.jsx":"02d64117ecfa","components/ai/TypingIndicator.jsx":"149e3a0c7ef8","components/brand/LumiAvatar.jsx":"b6444360cf80","components/button/Button.jsx":"6d902a925eed","components/button/ButtonGroup.jsx":"1a1481f6fb93","components/button/FloatingActionButton.jsx":"ce49fe4129a3","components/data/Accordion.jsx":"fed81278cefd","components/data/AspectRatio.jsx":"6c1e8703891e","components/data/Avatar.jsx":"88c8f59334e6","components/data/Card.jsx":"96e1f9ef44a9","components/data/Carousel.jsx":"caf09a766c42","components/data/Chart.jsx":"1953e9fef120","components/data/CodeBlock.jsx":"04e0bd2507e2","components/data/Collapsible.jsx":"3d961fef83f8","components/data/Comment.jsx":"81469a910d80","components/data/DescriptionList.jsx":"ce50d72546bb","components/data/Divider.jsx":"2d08b4a7b18e","components/data/Image.jsx":"0ea06cfe1532","components/data/Item.jsx":"7e1ac68c4e96","components/data/Kbd.jsx":"3b3d867cbdd8","components/data/List.jsx":"5c221b19efe0","components/data/Masonry.jsx":"a65508731d79","components/data/QRCode.jsx":"6acaf577a7fc","components/data/ScrollArea.jsx":"c2e2ec304b1e","components/data/Sortable.jsx":"ed7615a9469a","components/data/Splitter.jsx":"d231064601e9","components/data/Stat.jsx":"35734a801a71","components/data/Terminal.jsx":"9d419686bea8","components/data/Timeline.jsx":"22058a781a98","components/data/Tooltip.jsx":"3f30c6b1bf1d","components/data/Tree.jsx":"a1d33dec0451","components/data/Watermark.jsx":"66b7b71488d8","components/data/qr-encode.js":"14e8de77df5f","components/datatable/DataGrid.jsx":"c84fe5d5b8cc","components/datatable/DataTable.jsx":"2a7c3bda5142","components/datatable/TreeTable.jsx":"597c35135ebb","components/dialog/Dialog.jsx":"8ef7722c37c4","components/feedback/Alert.jsx":"4dbf685af3e1","components/feedback/Badge.jsx":"e691ae1634f8","components/feedback/EmptyState.jsx":"5ba1437e6d81","components/feedback/ProgressBar.jsx":"c63a431e9eed","components/feedback/Result.jsx":"c168f8dcb009","components/feedback/Skeleton.jsx":"86ee345cb412","components/feedback/Spinner.jsx":"cad2ed4008a6","components/feedback/StatusIndicator.jsx":"d27a5fc3db2a","components/feedback/Tag.jsx":"13d288da9f38","components/feedback/Toast.jsx":"6a7832751669","components/forms/Calendar.jsx":"8a66cbe766af","components/forms/Cascader.jsx":"63f35db7101d","components/forms/Checkbox.jsx":"2badb7b3b72b","components/forms/ColorPicker.jsx":"d04db0ee7678","components/forms/Combobox.jsx":"3f2fb4d28922","components/forms/DatePicker.jsx":"7a6c18e1e635","components/forms/Editor.jsx":"194484fb9dc4","components/forms/FileUpload.jsx":"509dfaff8bea","components/forms/Form.jsx":"6945025a205f","components/forms/InlineEdit.jsx":"5ffb40598769","components/forms/InputGroup.jsx":"06d6c22420d0","components/forms/InputOTP.jsx":"c3a5d02ffebc","components/forms/Mentions.jsx":"3924619137f3","components/forms/NativeSelect.jsx":"d6f6d300f75d","components/forms/NumberField.jsx":"44975fd25721","components/forms/RadioGroup.jsx":"1a64f7600e01","components/forms/Rating.jsx":"bd5c94741d63","components/forms/SearchField.jsx":"2a12c65900ec","components/forms/SegmentedControl.jsx":"1f143c62fb56","components/forms/Select.jsx":"009495d18845","components/forms/Slider.jsx":"213b7b9edec9","components/forms/Switch.jsx":"3cdf185f757c","components/forms/TagInput.jsx":"2d1554422097","components/forms/Textarea.jsx":"cf244fee0e37","components/forms/TimePicker.jsx":"abd6e54b2983","components/forms/Toggle.jsx":"a5378fd66713","components/forms/Transfer.jsx":"dd0c02d1014e","components/forms/TreeSelect.jsx":"a5b1b91d1d6a","components/icon/Icon.jsx":"280fba8477db","components/logo/Logo.jsx":"445c5f5fbd40","components/logo/logo-data.js":"f1a251a50c8f","components/navigation/Anchor.jsx":"491fb330e718","components/navigation/BackTop.jsx":"5cac0081fc20","components/navigation/Breadcrumb.jsx":"45636f3b0a51","components/navigation/CommandPalette.jsx":"51c25b8416eb","components/navigation/Dock.jsx":"3073e2870c65","components/navigation/HotKeys.jsx":"f0f707a3335d","components/navigation/Link.jsx":"d4fe3fcffd2c","components/navigation/Menu.jsx":"999e1659f8b3","components/navigation/Menubar.jsx":"1aa64f59891e","components/navigation/NavigationMenu.jsx":"020279fd7f79","components/navigation/Pagination.jsx":"a1fc19bfd104","components/navigation/Sidebar.jsx":"d578b013ad33","components/navigation/Steps.jsx":"e26c4a18cdfc","components/navigation/Tabs.jsx":"16964d61f349","components/navigation/Toolbar.jsx":"0f1f25d9e0c5","components/overlays/AlertDialog.jsx":"dcfbb7f61506","components/overlays/ContextMenu.jsx":"e3fb63e7b74f","components/overlays/Drawer.jsx":"a1c719da3f62","components/overlays/HoverCard.jsx":"5cfabde80960","components/overlays/OverlayManager.jsx":"6b58c4dad9da","components/overlays/Popconfirm.jsx":"55f08dba5f38","components/overlays/Popover.jsx":"1582f7fa5533","components/overlays/Tour.jsx":"707cd7464f0c","components/textfield/TextField.jsx":"c06bd9729f20","tokens/tokens.js":"c4638b1eba09"},"inlinedExternals":[],"unexposedExports":[{"name":"attachFocusTrap","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"cx","sourcePath":"components/_utils/cx.js"},{"name":"focusableSelector","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"formatCurrency","sourcePath":"components/_i18n/i18n.js"},{"name":"formatDate","sourcePath":"components/_i18n/i18n.js"},{"name":"formatNumber","sourcePath":"components/_i18n/i18n.js"},{"name":"getOverlayManager","sourcePath":"components/overlays/OverlayManager.jsx"},{"name":"getPath","sourcePath":"components/forms/Form.jsx"},{"name":"makeT","sourcePath":"components/_i18n/i18n.js"},{"name":"monthName","sourcePath":"components/_i18n/i18n.js"},{"name":"qrMatrix","sourcePath":"components/data/qr-encode.js"},{"name":"reorderItems","sourcePath":"components/data/Sortable.jsx"},{"name":"resolveLang","sourcePath":"components/_i18n/i18n.js"},{"name":"setPath","sourcePath":"components/forms/Form.jsx"},{"name":"strings","sourcePath":"components/_i18n/strings.js"},{"name":"tokens","sourcePath":"tokens/tokens.js"},{"name":"tr","sourcePath":"components/_i18n/i18n.js"},{"name":"useLang","sourcePath":"components/_i18n/i18n.js"},{"name":"useOverlayLayer","sourcePath":"components/overlays/OverlayManager.jsx"}]} */
 
 (() => {
 
@@ -4874,7 +4874,7 @@ try { (() => {
 const tokens = {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.7.0",
+    "version": "1.7.2",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.7.0).
+// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.7.2).
 // No build step: import this module directly in a browser. It ensures React 19.2.8 via umd-react
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
 // ../_ds_bundle.js once, resolves the compiler-assigned namespace BY PREFIX (never a hardcoded suffix),
@@ -32,7 +32,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "1.7.0";
+export const VERSION = "1.7.2";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/docs/contrast-report.md

@@ -1,6 +1,6 @@
 # Contrast report — elemental pairings (APCA)
 
-Generated · sweep at VERSION 1.7.0.
+Generated · sweep at VERSION 1.7.2.
 
 Published on Storybook **Docs** at `design.cyberskill.world`.
 

package/docs/conventions.md

@@ -38,7 +38,7 @@ Style’s sole pack today is **liquid-glass**. Immutable under all axes: Umber/O
 
 **New element variant** — stay inside the element's oklch envelope; set the 10 `--cs-accent-*` contract tokens (incl. `--cs-accent-on-strong` ≥4.5:1 on `-strong`) plus `--cs-color-text-accent`/`--cs-color-link` (APCA-check both); the aurora wash inherits from the element via `.cs-aurora-wash` (override the class rule only if the variant truly needs its own image); gradient partner (`grad-b`) must follow Tương sinh.
 
-**Ship check** — run the compiler check until clean, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). VERSION **1.7.0** (auto-bumps on `main`).
+**Ship check** — run the compiler check until clean, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). VERSION **1.7.2** (auto-bumps on `main`).
 
 ## Decision log (owner-approved)
 
@@ -64,7 +64,7 @@ Every template exports; the right path depends on the archetype. All paths prese
 | Archetype | Path | Notes |
 |---|---|---|
 | Deck (`*-deck`, `slide-deck`) | **PPTX (editable)** | `gen_pptx` at 960×540; force VN per-slide with `showJs: __dcSetProps(__dcRootName(),{language:'Tiếng Việt'})`. Text exports as native runs; only the Logo is an image. |
-| Document (any with `@page{size:…}` / `<meta name="omelette-owns-print">`) | **PDF + editable DOCX** | One **Tải / Download** control (`data-omelette-chrome`, print-stripped) from `templates/_vendor/doc-export.js` via `ds-base.js`, with a PDF \| DOCX menu. Both formats are built from the live `.cs-sheet` so the file matches the HTML preview. **PDF** = raster of the rendered sheet (JPEG pages, fallback: print a same-origin sheet clone — not the Storybook URL); CI still uses Playwright `page.pdf`. **DOCX** = editable OOXML walked from that same sheet (tables, bilingual cell paras, umber headings, VN Unicode; running header is the short brand line, not a duplicated lockup); ZIP via `CompressionStream` — no CDN. Decks stay PPTX. |
+| Document (any with `@page{size:…}` / `<meta name="omelette-owns-print">`) | **PDF + editable DOCX** | One **Tải / Download** control (`data-omelette-chrome`, print-stripped) from `templates/_vendor/doc-export.js` via `ds-base.js`, with a PDF \| DOCX menu. Both formats are built from the live `.cs-sheet` so the file matches the HTML preview. **PDF** = one Flate DeviceRGB page of the painted sheet at scale 3 (MediaBox aspect = the card — do not JPEG-blur, slice to A4, or stretch leftover slices); fallback: print a same-origin sheet clone — not the Storybook URL. CI still uses Playwright `page.pdf` for the print path. **DOCX** = editable OOXML walked from that same sheet (header flex as logo\|number table, measured font sizes/colors, tables + colspan, yellow `--cs-doc-fill` blanks, bilingual cell paras, umber headings, VN Unicode; Word header/footer stay empty so the sheet lockup is not duplicated); ZIP via `CompressionStream` — no CDN. Decks stay PPTX. |
 | Email / product page / any DC | **Standalone offline HTML** | The DC loads CSS + bundle dynamically via `ds-base.js`, which `super_inline_html` can't see. To bundle: make a `*-standalone.html` copy **in the same folder** (keeps `./support.js` relative) with **static** `<link rel="stylesheet" href="../../styles.css">` + `<script src="../../_ds_bundle.js">` in the raw `<head>` (both inlinable) instead of `ds-base.js`, plus a `<template id="__bundler_thumbnail">`. Bake the target language into the props default. Then `super_inline_html`. |
 | Any | **Editor-native + Claude Code handoff** | The whole project is dev-handoff-ready (compiled bundle + `.d.ts` + `prompt.md` per component); generate the package on request via the handoff skill. |
 

package/docs/quality-gates.md

@@ -52,7 +52,7 @@ Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expa
 | Axe smoke | `_audit/axe-smoke.html` + `_audit/lib/axe-fixtures.js` | axe-core 4.10.0 (vendored at `_audit/vendor/axe.min.js`) serious/critical WCAG 2 A/AA rules on every public primary (inventory-locked fixtures; bilingual EN·VI) — Dialog, AlertDialog, Drawer, Tour, CommandPalette, and Menu mount open, and Cascader / TreeSelect / Menubar / Combobox surfaces are expanded before the scan; gate-equivalent Storybook a11y enforcement (no separate test-runner) | 0 serious/critical findings (`__axesmoke`) | Hard | Fast board CI |
 | Print smoke | `_audit/print-smoke.html` | **Every** `omelette-owns-print` document declares print-ownership meta and A4/Letter `@page` hooks the PDF/DOCX export path relies on | ≥60 print docs, 0 missing hooks (`__printsmoke`) | Hard | Fast board CI |
 | Support no-eval (Node) | `_audit/ci/test-support-no-eval.mjs` | Canonical `templates/_vendor/support.js` + all template copies are identical and contain no Function-constructor / `eval(` call sites (CSP-safe inline-script runtime) | Exit 0 | Hard | Unit test |
-| Doc export (Node+PW) | `_audit/ci/test-doc-export.mjs` | Every print template under site CSP: no EvalError, one Download menu (PDF\|DOCX), PDF `%PDF` + A4/Letter MediaBox, DOCX ZIP + `word/document.xml` + VN diacritics + ≥70% sheet-text overlap | Exit 0 | Hard | Unit test |
+| Doc export (Node+PW) | `_audit/ci/test-doc-export.mjs` | Every print template under site CSP: no EvalError, one Download menu (PDF\|DOCX), Playwright PDF `%PDF` + A4/Letter MediaBox, downloaded `buildPdfBlob` is one unstretched FlateDecode page of the live sheet (framework), DOCX ZIP + `word/document.xml` + VN diacritics + ≥70% sheet-text overlap + yellow fills/colspan + header lockup text (HĐNT) on framework | Exit 0 | Hard | Unit test |
 | DOCX source parity (Node) | `_audit/ci/test-docx-source-parity.mjs` | DC text vs committed fixtures under `_audit/fixtures/hr-suite-docx-text/` for every mapped HR instrument | ≥85% phrase overlap; exit 0 | Hard | Unit test |
 | Pixel CI | `_audit/pixel-ci.html` + `_audit/ci/pixel-diff.mjs` | 15 curated baselines exist; Playwright capture script performs real % pixel compare; last report must be clean (`drifted[]` empty) | Contract + clean compare (`__pixelci.pass`); drift or missing report fails | Hard | Fast board CI (compare step feeds the row) + `pixel-diff` job |
 

package/docs/release-notes.md

@@ -1,6 +1,6 @@
 # Release Notes
 
-Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. VERSION **1.7.0** (auto-bumps on push to `main` from Conventional Commits; owner may still force a bump). Technical continuity is the repo tip; product-facing continuity is this page (mirrored in Storybook **Release Notes**). Published on Storybook **Docs** at `design.cyberskill.world`.
+Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. VERSION **1.7.2** (auto-bumps on push to `main` from Conventional Commits; owner may still force a bump). Technical continuity is the repo tip; product-facing continuity is this page (mirrored in Storybook **Release Notes**). Published on Storybook **Docs** at `design.cyberskill.world`.
 
 ## Release — `@cyberskill/design@1.3.10`
 

package/docs/vi/contrast-report.md

@@ -1,6 +1,6 @@
 # Báo cáo contrast — cặp elemental (APCA)
 
-Tạo · quét tại VERSION 1.7.0.
+Tạo · quét tại VERSION 1.7.2.
 
 Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 

package/docs/vi/conventions.md

@@ -38,7 +38,7 @@ Pack Style duy nhất hiện nay là **liquid-glass**. Bất biến dưới mọ
 
 **Element variant mới** — ở trong envelope oklch của element; đặt 10 token hợp đồng `--cs-accent-*` (gồm `--cs-accent-on-strong` ≥4.5:1 trên `-strong`) cộng `--cs-color-text-accent`/`--cs-color-link` (APCA-check cả hai); aurora wash kế thừa từ element qua `.cs-aurora-wash` (chỉ override class rule nếu variant thật sự cần ảnh riêng); đối tác gradient (`grad-b`) phải theo Tương sinh.
 
-**Ship check** — chạy compiler check đến sạch, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION **1.7.0** (auto-bump trên `main`).
+**Ship check** — chạy compiler check đến sạch, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION **1.7.2** (auto-bump trên `main`).
 
 ## Decision log (owner duyệt)
 
@@ -64,7 +64,7 @@ Mọi template export; đường đúng phụ thuộc archetype. Mọi đường
 | Archetype | Đường | Ghi chú |
 |---|---|---|
 | Deck (`*-deck`, `slide-deck`) | **PPTX (editable)** | `gen_pptx` ở 960×540; ép VN từng slide với `showJs: __dcSetProps(__dcRootName(),{language:'Tiếng Việt'})`. Text export như native runs; chỉ Logo là ảnh. |
-| Document (mọi cái có `@page{size:…}` / `<meta name="omelette-owns-print">`) | **PDF + DOCX chỉnh sửa được** | Một nút **Tải / Download** (`data-omelette-chrome`, ẩn khi in) từ `templates/_vendor/doc-export.js` qua `ds-base.js`, menu PDF \| DOCX. Cả hai format dựng từ `.cs-sheet` sống để file khớp preview HTML. **PDF** = raster sheet đã render (trang JPEG; fallback: in bản clone same-origin — không phải URL Storybook); CI vẫn dùng Playwright `page.pdf`. **DOCX** = OOXML editable walk từ cùng sheet (bảng, đoạn bilingual trong ô, heading umber, Unicode VN; header Word là dòng brand ngắn, không nhân đôi lockup); ZIP qua `CompressionStream` — không CDN. Deck vẫn PPTX. |
+| Document (mọi cái có `@page{size:…}` / `<meta name="omelette-owns-print">`) | **PDF + DOCX chỉnh sửa được** | Một nút **Tải / Download** (`data-omelette-chrome`, ẩn khi in) từ `templates/_vendor/doc-export.js` qua `ds-base.js`, menu PDF \| DOCX. Cả hai format dựng từ `.cs-sheet` sống để file khớp preview HTML. **PDF** = một trang Flate DeviceRGB của sheet đã vẽ, scale 3 (tỉ lệ MediaBox = thẻ — không JPEG mờ, không cắt A4 hay kéo dãn lát cuối); fallback: in bản clone same-origin — không phải URL Storybook. CI vẫn dùng Playwright `page.pdf` cho đường in. **DOCX** = OOXML editable walk từ cùng sheet (flex header thành bảng logo\|số, cỡ/màu chữ đo được, bảng + colspan, ô vàng `--cs-doc-fill`, đoạn bilingual trong ô, heading umber, Unicode VN; header/footer Word để trống để không nhân đôi lockup); ZIP qua `CompressionStream` — không CDN. Deck vẫn PPTX. |
 | Email / product page / mọi DC | **Standalone offline HTML** | DC load CSS + bundle động qua `ds-base.js`, mà `super_inline_html` không thấy. Để bundle: tạo bản `*-standalone.html` **cùng thư mục** (giữ `./support.js` relative) với `<link rel="stylesheet" href="../../styles.css">` + `<script src="../../_ds_bundle.js">` **static** trong raw `<head>` (cả hai inline được) thay `ds-base.js`, cộng `<template id="__bundler_thumbnail">`. Nướng ngôn ngữ đích vào props default. Rồi `super_inline_html`. |
 | Bất kỳ | **Editor-native + Claude Code handoff** | Cả project sẵn sàng handoff-dev (compiled bundle + `.d.ts` + `prompt.md` mỗi component); generate package theo request qua handoff skill. |
 

package/docs/vi/quality-gates.md

@@ -52,7 +52,7 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | Axe smoke | `_audit/axe-smoke.html` + `_audit/lib/axe-fixtures.js` | Rule serious/critical WCAG 2 A/AA của axe-core 4.10.0 (vendored tại `_audit/vendor/axe.min.js`) trên mọi public primary (fixture khoá inventory; bilingual EN·VI) — Dialog, AlertDialog, Drawer, Tour, CommandPalette và Menu mount mở, còn Cascader / TreeSelect / Menubar / Combobox được bung trước khi quét; tương đương enforcement a11y Storybook (không test-runner riêng) | 0 finding serious/critical (`__axesmoke`) | Hard | Fast board CI |
 | Print smoke | `_audit/print-smoke.html` | **Every** `omelette-owns-print` document declares print-ownership meta and A4/Letter `@page` hooks the PDF/DOCX export path relies on | ≥60 print docs, 0 missing hooks (`__printsmoke`) | Hard | Fast board CI |
 | Support no-eval (Node) | `_audit/ci/test-support-no-eval.mjs` | Canonical `templates/_vendor/support.js` + all template copies are identical and contain no Function-constructor / `eval(` call sites (CSP-safe inline-script runtime) | Exit 0 | Hard | Unit test |
-| Doc export (Node+PW) | `_audit/ci/test-doc-export.mjs` | Every print template under site CSP: no EvalError, one Download menu (PDF\|DOCX), PDF `%PDF` + A4/Letter MediaBox, DOCX ZIP + `word/document.xml` + VN diacritics + ≥70% sheet-text overlap | Exit 0 | Hard | Unit test |
+| Doc export (Node+PW) | `_audit/ci/test-doc-export.mjs` | Mọi template in dưới CSP site: không EvalError, một menu Download (PDF\|DOCX), PDF Playwright `%PDF` + MediaBox A4/Letter, `buildPdfBlob` tải về là một trang FlateDecode không méo của sheet sống (framework), DOCX ZIP + `word/document.xml` + dấu VN + ≥70% chồng text sheet + fill vàng/colspan + text lockup header (HĐNT) trên framework | Exit 0 | Hard | Unit test |
 | DOCX source parity (Node) | `_audit/ci/test-docx-source-parity.mjs` | DC text vs committed fixtures under `_audit/fixtures/hr-suite-docx-text/` for every mapped HR instrument | ≥85% phrase overlap; exit 0 | Hard | Unit test |
 | Pixel CI | `_audit/pixel-ci.html` + `_audit/ci/pixel-diff.mjs` | 15 baseline curated tồn tại; script Playwright capture so sánh % pixel thật; report gần nhất phải sạch (`drifted[]` rỗng) | Hợp đồng + compare sạch (`__pixelci.pass`); drift hoặc thiếu report → fail | Hard | Fast board CI (bước compare nuôi hàng) + job `pixel-diff` |
 

package/docs/vi/release-notes.md

@@ -1,6 +1,6 @@
 # Ghi chú phát hành
 
-Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION **1.7.0** (auto-bump khi push lên `main` từ Conventional Commits; owner vẫn có thể force bump). Chân lý kỹ thuật là tip repo; chân lý hướng sản phẩm là trang này (đồng bộ Storybook **Release Notes**). Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION **1.7.2** (auto-bump khi push lên `main` từ Conventional Commits; owner vẫn có thể force bump). Chân lý kỹ thuật là tip repo; chân lý hướng sản phẩm là trang này (đồng bộ Storybook **Release Notes**). Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Release — `@cyberskill/design@1.3.10`
 

package/llms.txt

@@ -1,6 +1,6 @@
 # CyberSkill Design System
 
-> HTML-first, Vietnamese-first design system, VERSION **1.7.0**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 85 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each **capability** to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.7.0**, no CHANGELOG.
+> HTML-first, Vietnamese-first design system, VERSION **1.7.2**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 85 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each **capability** to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.7.2**, no CHANGELOG.
 
 The portable contract covers browser and bundler entry points: `styles.css` · `_esm/cs.mjs` legacy · `_ds_bundle.js` · tokens work without a build step; `_esm/react.mjs` is bundler-native JSX (Next/Vite must transpile — not a bare-browser import). The DC layer (`templates/**/*.dc.html`) needs a **Design Components compiler**. **Google Stitch must not treat `*.dc.html` as source of truth** — use `DESIGN.md`, DTCG, `styles.css`, kitchen-sink, and `.cs-*` static HTML instead. Dual path: [docs/consuming.md](docs/consuming.md). The full non-negotiables list lives in `CONTRIBUTING.md` and `docs/doctrine.md`. Operator docs are published on the Storybook **Docs** sidebar at `design.cyberskill.world`.
 
@@ -31,7 +31,7 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [templates/](templates/): 85 copyable starting points (`.dc.html`); `email-safe/` send-ready emails; `kitchen-sink.html`; `playground.html`
 - [guidelines/](guidelines/): specimen cards + `atomic-view.html` (portable component grid) — host product surface is Storybook at `/`
 - [examples/static-hello/](examples/static-hello/): zero-install static consumer (Stitch / plain HTML)
-- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.7.0` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
+- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.7.2` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
 - [examples/native/](examples/native/): SwiftUI / Compose / Flutter sample apps + store scaffolds — Compose is **Android Studio**-first (no committed `gradlew`; see `examples/native/README.md`)
 - [ui_kits/](ui_kits/): product recreations — status-hub · website · deck
 - [fonts/](fonts/): self-hosted Be Vietnam Pro (UI) + Space Grotesk (opt-in display, `--cs-font-family-display`) + JetBrains Mono woff2
@@ -48,7 +48,7 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 Published on Storybook **Docs** (`design.cyberskill.world`) and in [docs/viewer.html](docs/viewer.html) (EN|VI).
 
 - [docs/consuming.md](docs/consuming.md): adopting & upgrading, DC-capable vs static dual path, package name `@cyberskill/design`; first registry install at [examples/npm-hello/](examples/npm-hello/) (Lumi · Hỏa · plasma); native mirrors at [examples/native/](examples/native/) (SwiftUI / Compose / Flutter samples)
-- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.7.0` Trusted Publishing / grant pointer
+- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.7.2` Trusted Publishing / grant pointer
 - [docs/consumer-grant.md](docs/consumer-grant.md): written npm grant (CyberSkill portfolio; UNLICENSED)
 - [docs/conventions.md](docs/conventions.md): authoring rules (naming grammar, the four axes)
 - [docs/design-styles.md](docs/design-styles.md): the live styling axes and the fixed liquid-glass treatment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberskill/design",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "private": false,
   "publishConfig": {
     "access": "public"

package/templates/_vendor/doc-export.js

@@ -6,6 +6,7 @@
  */
 (() => {
   const UMBER = '45210E';
+  const DOC_FILL = 'FDE68A';
   const A4 = { w: 11906, h: 16838, name: 'A4', ptW: 595.28, ptH: 841.89 };
   const LETTER = { w: 12240, h: 15840, name: 'Letter', ptW: 612, ptH: 792 };
   function pageSizeFromCss() {
@@ -123,23 +124,44 @@
     return el.getAttribute && el.getAttribute('data-omelette-chrome') != null;
   }
 
+  function isDocFillColor(bg) {
+    return bg && /rgb\(\s*253\s*,\s*230\s*,\s*138\s*\)/i.test(bg);
+  }
+
+  function rgbToHex(rgb) {
+    const m = rgb && String(rgb).match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+    if (!m) return null;
+    const r = Number(m[1]);
+    const g = Number(m[2]);
+    const b = Number(m[3]);
+    if (r < 25 && g < 25 && b < 25) return null;
+    const hex = [r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('').toUpperCase();
+    return hex === '000000' ? null : hex;
+  }
+
+  function halfPt(fontSize) {
+    const px = parseFloat(fontSize);
+    if (!px) return null;
+    return Math.max(14, Math.round((px * 72) / 96) * 2);
+  }
+
   function textRuns(el) {
     const parts = [];
-    const walk = (node, italic, bold, color) => {
+    const walk = (node, italic, bold, color, fill, size) => {
       if (node.nodeType === 3) {
         const raw = node.textContent || '';
         if (!raw) return;
         if (!raw.replace(/\s+/g, '').length) {
-          if (parts.length) parts.push({ t: ' ', italic, bold, color });
+          if (parts.length) parts.push({ t: ' ', italic, bold, color, fill, size });
           return;
         }
-        parts.push({ t: raw.replace(/\s+/g, ' '), italic, bold, color });
+        parts.push({ t: raw.replace(/\s+/g, ' '), italic, bold, color, fill, size });
         return;
       }
       if (node.nodeType !== 1) return;
       if (isChrome(node)) return;
       const tag = node.tagName.toLowerCase();
-      if (tag === 'script' || tag === 'style' || tag === 'noscript') return;
+      if (tag === 'script' || tag === 'style' || tag === 'noscript' || tag === 'svg') return;
       const st = window.getComputedStyle(node);
       const nextItalic = italic || st.fontStyle === 'italic' || tag === 'i' || tag === 'em';
       const nextBold =
@@ -151,10 +173,33 @@
       let nextColor = color;
       if (/^h[1-6]$/.test(tag) || (st.color && /rgb\(\s*69\s*,\s*33\s*,\s*14\s*\)/.test(st.color))) {
         nextColor = UMBER;
+      } else {
+        nextColor = rgbToHex(st.color) || color;
+      }
+      const nextFill = fill || (isDocFillColor(st.backgroundColor) ? DOC_FILL : null);
+      const nextSize = halfPt(st.fontSize) || size;
+      const kids = [...node.childNodes];
+      for (let i = 0; i < kids.length; i++) {
+        const before = parts.length;
+        walk(kids[i], nextItalic, nextBold, nextColor, nextFill, nextSize);
+        const nxt = kids[i + 1];
+        if (parts.length > before && nxt) {
+          const last = parts[parts.length - 1];
+          const nextRaw = nxt.textContent || '';
+          if (last && last.t && !/\s$/.test(last.t) && nextRaw.replace(/\s+/g, '') && !/^\s/.test(nextRaw)) {
+            parts.push({
+              t: ' ',
+              italic: nextItalic,
+              bold: nextBold,
+              color: nextColor,
+              fill: nextFill,
+              size: nextSize,
+            });
+          }
+        }
       }
-      for (const c of node.childNodes) walk(c, nextItalic, nextBold, nextColor);
     };
-    walk(el, false, false, null);
+    walk(el, false, false, null, null, null);
     const merged = [];
     for (const r of parts) {
       const prev = merged[merged.length - 1];
@@ -162,7 +207,9 @@
         prev &&
         prev.italic === r.italic &&
         prev.bold === r.bold &&
-        prev.color === r.color
+        prev.color === r.color &&
+        prev.fill === r.fill &&
+        prev.size === r.size
       ) {
         prev.t += r.t;
       } else {
@@ -182,6 +229,8 @@
         if (r.bold) rPr.push('<w:b/>');
         if (r.italic) rPr.push('<w:i/>');
         if (r.color) rPr.push(`<w:color w:val="${r.color}"/>`);
+        if (r.fill) rPr.push(`<w:shd w:val="clear" w:fill="${r.fill}"/><w:highlight w:val="yellow"/>`);
+        if (r.size) rPr.push(`<w:sz w:val="${r.size}"/><w:szCs w:val="${r.size}"/>`);
         rPr.push('<w:rFonts w:ascii="Arial" w:hAnsi="Arial" w:cs="Arial"/>');
         const pr = rPr.length ? `<w:rPr>${rPr.join('')}</w:rPr>` : '';
         return `<w:r>${pr}<w:t xml:space="preserve">${xmlEscape(r.t)}</w:t></w:r>`;
@@ -189,11 +238,25 @@
       .join('');
   }
 
+  function pPrXml(el, style) {
+    const bits = [];
+    if (style) bits.push(`<w:pStyle w:val="${style}"/>`);
+    if (el) {
+      const st = window.getComputedStyle(el);
+      const ta = st.textAlign;
+      if (ta === 'center') bits.push('<w:jc w:val="center"/>');
+      else if (ta === 'right' || ta === 'end') bits.push('<w:jc w:val="right"/>');
+      const before = Math.max(0, Math.round((parseFloat(st.marginTop) || 0) * 15));
+      const after = Math.max(0, Math.round((parseFloat(st.marginBottom) || 0) * 15));
+      if (before || after) bits.push(`<w:spacing w:before="${before}" w:after="${after}"/>`);
+    }
+    return bits.length ? `<w:pPr>${bits.join('')}</w:pPr>` : '';
+  }
+
   function paraXml(el, style) {
     const runs = textRuns(el);
     if (!runs.length && !el.querySelector?.('br')) return '';
-    const pPr = style ? `<w:pPr><w:pStyle w:val="${style}"/></w:pPr>` : '';
-    return `<w:p>${pPr}${runsToXml(runs)}</w:p>`;
+    return `<w:p>${pPrXml(el, style)}${runsToXml(runs)}</w:p>`;
   }
 
   function cellInnerXml(cell, fillWhite) {
@@ -214,11 +277,32 @@
     return `<w:p>${runsToXml(paint(textRuns(cell)))}</w:p>`;
   }
 
+  function cellColSpan(cell) {
+    return Math.max(1, Number(cell.getAttribute('colspan')) || 1);
+  }
+
+  function rowColCount(tr) {
+    return [...tr.children].reduce((n, c) => n + cellColSpan(c), 0);
+  }
+
   function tableXml(table) {
     const rows = [...table.querySelectorAll(':scope > tbody > tr, :scope > thead > tr, :scope > tr')];
     if (!rows.length) return '';
-    const gridCols = Math.max(...rows.map((r) => r.children.length), 1);
-    const colW = Math.floor(9000 / gridCols);
+    const gridCols = Math.max(...rows.map(rowColCount), 1);
+    let colWidths;
+    if (gridCols === 2) {
+      const tableW = table.getBoundingClientRect().width || 1;
+      const sample = rows.find((r) => r.children.length >= 2) || rows[0];
+      const c0 = sample && sample.children[0];
+      const ratio = c0 ? c0.getBoundingClientRect().width / tableW : 0.28;
+      const col0 = Math.round(9000 * Math.min(0.42, Math.max(0.18, ratio)));
+      colWidths = [col0, 9000 - col0];
+    } else {
+      const even = Math.floor(9000 / gridCols);
+      colWidths = Array.from({ length: gridCols }, () => even);
+    }
+    const gridColsXml = colWidths.map((w) => `<w:gridCol w:w="${w}"/>`).join('');
+    const colW = colWidths[0];
     let xml = `<w:tbl><w:tblPr><w:tblW w:w="5000" w:type="pct"/><w:tblBorders>
       <w:top w:val="single" w:sz="4" w:color="C9B8A8"/>
       <w:left w:val="single" w:sz="4" w:color="C9B8A8"/>
@@ -226,16 +310,22 @@
       <w:right w:val="single" w:sz="4" w:color="C9B8A8"/>
       <w:insideH w:val="single" w:sz="4" w:color="C9B8A8"/>
       <w:insideV w:val="single" w:sz="4" w:color="C9B8A8"/>
-    </w:tblBorders></w:tblPr><w:tblGrid>${'<w:gridCol w:w="' + colW + '"/>'.repeat(gridCols)}</w:tblGrid>`;
+    </w:tblBorders></w:tblPr><w:tblGrid>${gridColsXml}</w:tblGrid>`;
     for (const tr of rows) {
       xml += '<w:tr>';
       for (const cell of tr.children) {
         const bg = window.getComputedStyle(cell).backgroundColor;
         const umberFill = bg && /rgb\(\s*69\s*,\s*33\s*,\s*14\s*\)/.test(bg);
-        const shade = umberFill
-          ? `<w:tcPr><w:shd w:val="clear" w:fill="${UMBER}"/><w:tcW w:w="${colW}" w:type="dxa"/></w:tcPr>`
-          : `<w:tcPr><w:tcW w:w="${colW}" w:type="dxa"/></w:tcPr>`;
-        xml += `<w:tc>${shade}${cellInnerXml(cell, umberFill)}</w:tc>`;
+        const yellowFill = isDocFillColor(bg);
+        const span = cellColSpan(cell);
+        const spanXml = span > 1 ? `<w:gridSpan w:val="${span}"/>` : '';
+        const fillXml = umberFill
+          ? `<w:shd w:val="clear" w:fill="${UMBER}"/>`
+          : yellowFill
+            ? `<w:shd w:val="clear" w:fill="${DOC_FILL}"/>`
+            : '';
+        const tw = colWidths.slice(0, span).reduce((n, w) => n + w, 0);
+        xml += `<w:tc><w:tcPr>${fillXml}${spanXml}<w:tcW w:w="${tw}" w:type="dxa"/></w:tcPr>${cellInnerXml(cell, umberFill)}</w:tc>`;
       }
       xml += '</w:tr>';
     }
@@ -257,10 +347,11 @@
     const kids = [...el.children].filter((c) => c.nodeType === 1 && !isChrome(c));
     if (kids.length < 2) return '';
     const colW = Math.floor(9000 / cols);
+    const gridColsXml = Array.from({ length: cols }, () => `<w:gridCol w:w="${colW}"/>`).join('');
     let xml = `<w:tbl><w:tblPr><w:tblW w:w="5000" w:type="pct"/><w:tblBorders>
       <w:top w:val="nil"/><w:left w:val="nil"/><w:bottom w:val="nil"/><w:right w:val="nil"/>
       <w:insideH w:val="nil"/><w:insideV w:val="nil"/>
-    </w:tblBorders></w:tblPr><w:tblGrid>${'<w:gridCol w:w="' + colW + '"/>'.repeat(cols)}</w:tblGrid>`;
+    </w:tblBorders></w:tblPr><w:tblGrid>${gridColsXml}</w:tblGrid>`;
     for (let i = 0; i < kids.length; i += cols) {
       xml += '<w:tr>';
       for (let c = 0; c < cols; c++) {
@@ -274,19 +365,168 @@
     return xml;
   }
 
-  function sheetBodyXml(sheet) {
+  function drawingRun(relId, cx, cy) {
+    return `<w:r><w:drawing>
+      <wp:inline distT="0" distB="0" distL="0" distR="0">
+        <wp:extent cx="${cx}" cy="${cy}"/>
+        <wp:docPr id="${relId.replace(/\D/g, '') || '1'}" name="img"/>
+        <a:graphic>
+          <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
+            <pic:pic>
+              <pic:nvPicPr><pic:cNvPr id="0" name="image.png"/><pic:cNvPicPr/></pic:nvPicPr>
+              <pic:blipFill><a:blip r:embed="${relId}"/><a:stretch><a:fillRect/></a:stretch></pic:blipFill>
+              <pic:spPr>
+                <a:xfrm><a:off x="0" y="0"/><a:ext cx="${cx}" cy="${cy}"/></a:xfrm>
+                <a:prstGeom prst="rect"><a:avLst/></a:prstGeom>
+              </pic:spPr>
+            </pic:pic>
+          </a:graphicData>
+        </a:graphic>
+      </wp:inline>
+    </w:drawing></w:r>`;
+  }
+
+  function findSvg(el) {
+    if (!el || el.nodeType !== 1) return null;
+    if (el.tagName.toLowerCase() === 'svg') return el;
+    const light = el.querySelector?.('svg');
+    if (light) return light;
+    if (el.shadowRoot) {
+      const sh = el.shadowRoot.querySelector('svg');
+      if (sh) return sh;
+    }
+    for (const c of el.children || []) {
+      const nested = findSvg(c);
+      if (nested) return nested;
+    }
+    return null;
+  }
+
+  async function addSvgPng(svg, bag) {
+    const box = svg.getBoundingClientRect();
+    const cssW = Math.max(box.width || parseFloat(svg.getAttribute('width')) || 18, 12);
+    const cssH = Math.max(box.height || parseFloat(svg.getAttribute('height')) || cssW, 12);
+    const scale = 3;
+    const w = Math.max(1, Math.round(cssW * scale));
+    const h = Math.max(1, Math.round(cssH * scale));
+    try {
+      const clone = svg.cloneNode(true);
+      clone.setAttribute('width', String(cssW));
+      clone.setAttribute('height', String(cssH));
+      if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      const xml = new XMLSerializer().serializeToString(clone);
+      if (/foreignObject/i.test(xml)) return '';
+      const blob = new Blob([xml], { type: 'image/svg+xml;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      try {
+        const img = await loadImage(url);
+        const c = document.createElement('canvas');
+        c.width = w;
+        c.height = h;
+        const ctx = c.getContext('2d');
+        ctx.drawImage(img, 0, 0, w, h);
+        const bytes = dataUrlToBytes(c.toDataURL('image/png'));
+        const n = bag.media.length + 1;
+        const relId = `rIdImg${n}`;
+        bag.media.push({ name: `word/media/image${n}.png`, bytes, relId });
+        const emu = Math.round(cssW * 9525);
+        return drawingRun(relId, emu, Math.round(emu * (h / w)));
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+    } catch (_) {
+      return '';
+    }
+  }
+
+  async function groupInnerXml(els, bag) {
+    let drawings = '';
+    const textEls = [];
+    for (const el of els) {
+      const svg = findSvg(el);
+      if (svg) drawings += await addSvgPng(svg, bag);
+      if (!svg || textRuns(el).length) textEls.push(el);
+    }
+    let runs = [];
+    for (const el of textEls) {
+      const next = textRuns(el);
+      if (
+        runs.length &&
+        next.length &&
+        !/\s$/.test(runs[runs.length - 1].t) &&
+        !/^\s/.test(next[0].t)
+      ) {
+        runs.push({
+          t: ' ',
+          italic: next[0].italic,
+          bold: next[0].bold,
+          color: next[0].color,
+          fill: next[0].fill,
+          size: next[0].size,
+        });
+      }
+      runs.push(...next);
+    }
+    if (!drawings && !runs.length) return `<w:p>${runsToXml([])}</w:p>`;
+    return `<w:p>${pPrXml(textEls[0] || els[0])}${drawings}${runsToXml(runs)}</w:p>`;
+  }
+
+  async function flexAsTable(el, bag) {
+    const st = window.getComputedStyle(el);
+    if (st.display !== 'flex' && st.display !== 'inline-flex') return '';
+    const dir = st.flexDirection || 'row';
+    if (dir === 'column' || dir === 'column-reverse') return '';
+    const kids = [...el.children].filter((c) => c.nodeType === 1 && !isChrome(c));
+    if (kids.length < 2) return '';
+    const hasLogo = kids.some((c) => {
+      const t = c.tagName.toLowerCase();
+      return t === 'svg' || t === 'x-import' || !!findSvg(c);
+    });
+    if (!hasLogo && kids.length !== 2) return '';
+    let split = -1;
+    for (let i = 1; i < kids.length; i++) {
+      const inline = kids[i].style?.marginLeft || '';
+      const attr = kids[i].getAttribute?.('style') || '';
+      if (inline === 'auto' || /margin-left\s*:\s*auto/i.test(attr)) {
+        split = i;
+        break;
+      }
+    }
+    if (split < 0) {
+      if (kids.length === 2) split = 1;
+      else return '';
+    }
+    const left = await groupInnerXml(kids.slice(0, split), bag);
+    const right = await groupInnerXml(kids.slice(split), bag);
+    return `<w:tbl><w:tblPr><w:tblW w:w="5000" w:type="pct"/><w:tblBorders>
+      <w:top w:val="nil"/><w:left w:val="nil"/><w:bottom w:val="nil"/><w:right w:val="nil"/>
+      <w:insideH w:val="nil"/><w:insideV w:val="nil"/>
+    </w:tblBorders></w:tblPr><w:tblGrid><w:gridCol w:w="6200"/><w:gridCol w:w="2800"/></w:tblGrid>
+    <w:tr>
+      <w:tc><w:tcPr><w:tcW w:w="6200" w:type="dxa"/></w:tcPr>${left}</w:tc>
+      <w:tc><w:tcPr><w:tcW w:w="2800" w:type="dxa"/></w:tcPr>${right}</w:tc>
+    </w:tr></w:tbl>`;
+  }
+
+  async function sheetBodyXml(sheet, bag) {
     const blocks = [];
-    const visit = (nodes) => {
+    const visit = async (nodes) => {
       for (const el of nodes) {
         if (el.nodeType !== 1) continue;
         if (isChrome(el)) continue;
         const tag = el.tagName.toLowerCase();
+        const svg = findSvg(el);
+        if (svg && (tag === 'svg' || !textRuns(el).length)) {
+          const drawing = await addSvgPng(svg, bag);
+          if (drawing) blocks.push(`<w:p>${drawing}</w:p>`);
+          continue;
+        }
         if (tag === 'table') {
           blocks.push(tableXml(el));
           continue;
         }
         if (/^h[1-6]$/.test(tag)) {
-          blocks.push(paraXml(el, 'Heading1'));
+          blocks.push(paraXml(el, tag === 'h1' ? 'Heading1' : 'Heading2'));
           continue;
         }
         const gridXml = gridAsTable(el);
@@ -294,12 +534,17 @@
           blocks.push(gridXml);
           continue;
         }
+        const flexXml = await flexAsTable(el, bag);
+        if (flexXml) {
+          blocks.push(flexXml);
+          continue;
+        }
         if (tag === 'p' || tag === 'div' || tag === 'section' || tag === 'li') {
           const hasBlock = [...el.children].some((c) =>
-            /^(DIV|TABLE|SECTION|UL|OL|H1|H2|H3|H4|H5|H6)$/.test(c.tagName),
+            /^(DIV|TABLE|SECTION|UL|OL|H1|H2|H3|H4|H5|H6|X-IMPORT)$/.test(c.tagName),
           );
           if (hasBlock && tag !== 'p') {
-            visit([...el.children]);
+            await visit([...el.children]);
           } else {
             const px = paraXml(el);
             if (px) blocks.push(px);
@@ -307,33 +552,38 @@
           continue;
         }
         if (tag === 'ul' || tag === 'ol') {
-          visit([...el.children]);
+          await visit([...el.children]);
           continue;
         }
-        visit([...el.children]);
+        const leftover = paraXml(el);
+        if (leftover) blocks.push(leftover);
+        else await visit([...el.children]);
       }
     };
-    visit([...sheet.children]);
+    await visit([...sheet.children]);
     return blocks.filter(Boolean).join('');
   }
 
   function headerFooterText() {
-    return {
-      header: 'CyberSkill · Hiện Thực Hoá Ý Chí',
-      footer: 'CyberSkill · MST 0316475200 · info@cyberskill.world',
-    };
+    // Sheet already carries lockup + footer. Word chrome stays empty so the
+    // file does not duplicate the card into header/footer.
+    return { header: '', footer: '' };
   }
 
   async function buildDocxBlob(sheet) {
     const page = pageSizeFromCss();
     const enc = new TextEncoder();
     const { header, footer } = headerFooterText();
-    const body = sheetBodyXml(sheet);
+    const bag = { media: [] };
+    const body = await sheetBodyXml(sheet, bag);
 
+    const pngDefault = bag.media.length
+      ? `\n  <Default Extension="png" ContentType="image/png"/>`
+      : '';
     const contentTypes = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
   <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
-  <Default Extension="xml" ContentType="application/xml"/>
+  <Default Extension="xml" ContentType="application/xml"/>${pngDefault}
   <Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/>
   <Override PartName="/word/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml"/>
   <Override PartName="/word/header1.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml"/>
@@ -345,11 +595,18 @@
   <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/>
 </Relationships>`;
 
+    const mediaRels = bag.media
+      .map(
+        (m) =>
+          `  <Relationship Id="${m.relId}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/${m.name.split('/').pop()}"/>`,
+      )
+      .join('\n');
     const docRels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
   <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/>
   <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/header" Target="header1.xml"/>
   <Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/footer" Target="footer1.xml"/>
+${mediaRels}
 </Relationships>`;
 
     const styles = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
@@ -362,37 +619,35 @@
     <w:name w:val="heading 1"/><w:basedOn w:val="Normal"/><w:qFormat/>
     <w:rPr><w:b/><w:color w:val="${UMBER}"/><w:sz w:val="28"/></w:rPr>
   </w:style>
+  <w:style w:type="paragraph" w:styleId="Heading2">
+    <w:name w:val="heading 2"/><w:basedOn w:val="Normal"/><w:qFormat/>
+    <w:rPr><w:b/><w:color w:val="${UMBER}"/><w:sz w:val="24"/></w:rPr>
+  </w:style>
 </w:styles>`;
 
     const headerXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <w:hdr xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
-  <w:p><w:pPr><w:pBdr><w:bottom w:val="single" w:sz="6" w:color="C9B8A8"/></w:pBdr></w:pPr>
-    <w:r><w:rPr><w:b/><w:color w:val="${UMBER}"/><w:sz w:val="18"/></w:rPr>
-      <w:t xml:space="preserve">${xmlEscape(header)}</w:t></w:r>
-  </w:p>
+  <w:p>${header ? `<w:r><w:t xml:space="preserve">${xmlEscape(header)}</w:t></w:r>` : ''}</w:p>
 </w:hdr>`;
 
     const footerXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <w:ftr xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
-  <w:p>
-    <w:r><w:rPr><w:sz w:val="16"/><w:color w:val="6B5D4F"/></w:rPr>
-      <w:t xml:space="preserve">${xmlEscape(footer)} · </w:t></w:r>
-    <w:r><w:fldChar w:fldCharType="begin"/></w:r>
-    <w:r><w:instrText xml:space="preserve"> PAGE </w:instrText></w:r>
-    <w:r><w:fldChar w:fldCharType="end"/></w:r>
-  </w:p>
+  <w:p>${footer ? `<w:r><w:t xml:space="preserve">${xmlEscape(footer)}</w:t></w:r>` : ''}</w:p>
 </w:ftr>`;
 
     const documentXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"
-  xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">
+  xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
+  xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing"
+  xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
+  xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
   <w:body>
     ${body || '<w:p><w:r><w:t></w:t></w:r></w:p>'}
     <w:sectPr>
       <w:headerReference w:type="default" r:id="rId2"/>
       <w:footerReference w:type="default" r:id="rId3"/>
       <w:pgSz w:w="${page.w}" w:h="${page.h}"/>
-      <w:pgMar w:top="1440" w:right="1134" w:bottom="1134" w:left="1134" w:header="720" w:footer="720"/>
+      <w:pgMar w:top="360" w:right="360" w:bottom="360" w:left="360" w:header="0" w:footer="0"/>
     </w:sectPr>
   </w:body>
 </w:document>`;
@@ -405,6 +660,7 @@
       { name: 'word/styles.xml', bytes: enc.encode(styles) },
       { name: 'word/header1.xml', bytes: enc.encode(headerXml) },
       { name: 'word/footer1.xml', bytes: enc.encode(footerXml) },
+      ...bag.media.map((m) => ({ name: m.name, bytes: m.bytes })),
     ]);
     return new Blob([zip], {
       type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
@@ -461,7 +717,7 @@
     return out;
   }
 
-  function jpegPagesToPdf(pages, mediaW, mediaH) {
+  function imagePagesToPdf(pages, mediaW, mediaH) {
     const enc = new TextEncoder();
     const nl = enc.encode('\n');
     const chunks = [enc.encode('%PDF-1.4\n')];
@@ -493,10 +749,11 @@
         pageId,
         `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${mediaW.toFixed(2)} ${mediaH.toFixed(2)}] /Resources << /XObject << /Im0 ${imgId} 0 R >> >> /Contents ${contentId} 0 R >>`,
       );
+      const filter = page.filter || 'FlateDecode';
       pushObj(
         imgId,
-        `<< /Type /XObject /Subtype /Image /Width ${page.w} /Height ${page.h} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${page.jpeg.length} >>`,
-        page.jpeg,
+        `<< /Type /XObject /Subtype /Image /Width ${page.w} /Height ${page.h} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /${filter} /Length ${page.bytes.length} >>`,
+        page.bytes,
       );
       const contentBytes = enc.encode(content);
       pushObj(contentId, `<< /Length ${contentBytes.length} >>`, contentBytes);
@@ -518,6 +775,27 @@
     return concatBytes([body, enc.encode(xref), enc.encode(trailer)]);
   }
 
+  function canvasRgb(ctx, w, h) {
+    const src = ctx.getImageData(0, 0, w, h).data;
+    const rgb = new Uint8Array(w * h * 3);
+    let j = 0;
+    for (let i = 0; i < src.length; i += 4) {
+      rgb[j++] = src[i];
+      rgb[j++] = src[i + 1];
+      rgb[j++] = src[i + 2];
+    }
+    return rgb;
+  }
+
+  async function deflateZlib(u8) {
+    const cs = new CompressionStream('deflate');
+    const writer = cs.writable.getWriter();
+    writer.write(u8);
+    writer.close();
+    const ab = await new Response(cs.readable).arrayBuffer();
+    return new Uint8Array(ab);
+  }
+
   function relBox(el, origin, sheet) {
     const r = el.getBoundingClientRect();
     return {
@@ -640,9 +918,15 @@
 
   async function rasterizeSheet(sheet) {
     const page = pageSizeFromCss();
-    const scale = 2;
-    const painted = await paintSheet(sheet, scale);
-    const { canvas, width, height, ctx } = painted;
+    let scale = 3;
+    let painted;
+    try {
+      painted = await paintSheet(sheet, scale);
+    } catch (_) {
+      scale = 2;
+      painted = await paintSheet(sheet, scale);
+    }
+    const { canvas, ctx } = painted;
     let ink = true;
     try {
       ink = canvasHasInk(ctx, canvas.width, Math.min(canvas.height, 400));
@@ -650,28 +934,26 @@
       ink = true;
     }
     if (!ink) throw new Error('blank-raster');
-    const pageH = Math.round(width * (page.h / page.w) * scale);
-    const pages = [];
-    let y = 0;
-    while (y < canvas.height - 1) {
-      const ch = Math.min(pageH, canvas.height - y);
-      const slice = document.createElement('canvas');
-      slice.width = canvas.width;
-      slice.height = Math.max(1, ch);
-      const sctx = slice.getContext('2d');
-      sctx.fillStyle = '#ffffff';
-      sctx.fillRect(0, 0, slice.width, slice.height);
-      sctx.drawImage(canvas, 0, y, canvas.width, ch, 0, 0, canvas.width, ch);
-      pages.push({
-        jpeg: dataUrlToBytes(slice.toDataURL('image/jpeg', 0.92)),
-        w: slice.width,
-        h: slice.height,
-      });
-      y += pageH;
-      if (pages.length > 40) break;
-    }
-    if (!pages.length) throw new Error('no-pages');
-    return jpegPagesToPdf(pages, page.ptW, page.ptH);
+    // One PDF page = the whole card. Lossless Flate RGB (not JPEG) so type
+    // stays sharp; scale 3 ≈ 288 dpi on the A4-width MediaBox.
+    const ptW = page.ptW;
+    const ptH = ptW * (canvas.height / canvas.width);
+    try {
+      const rgb = canvasRgb(ctx, canvas.width, canvas.height);
+      const bytes = await deflateZlib(rgb);
+      return imagePagesToPdf(
+        [{ bytes, w: canvas.width, h: canvas.height, filter: 'FlateDecode' }],
+        ptW,
+        ptH,
+      );
+    } catch (_) {
+      const jpeg = dataUrlToBytes(canvas.toDataURL('image/jpeg', 0.95));
+      return imagePagesToPdf(
+        [{ bytes: jpeg, w: canvas.width, h: canvas.height, filter: 'DCTDecode' }],
+        ptW,
+        ptH,
+      );
+    }
   }
 
   async function buildPdfBlob(sheet) {

package/tokens/element-seeds.json

@@ -1,7 +1,7 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.7.0",
+    "version": "1.7.2",
     "note": "OKLCH seed contract for the 15 element packs × light/dark (30 sets). SoT for scripts/generate-element-packs.mjs — do not hand-edit tokens/elements.css. Owner bar (Jul 2026): soft/middle/deep clearly distinct; middle intensity synced across elements; harmonious role palettes; light↔dark same-hue identity. Public variant names unchanged."
   },
   "intensity": {

package/tokens/native/CSTokens.kt

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.7.0 · source sha256 c1e69d03df03c124…
+// release v1.7.2 · source sha256 1e71e4553ab540dd…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html

package/tokens/native/CSTokens.swift

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.7.0 · source sha256 c1e69d03df03c124…
+// release v1.7.2 · source sha256 1e71e4553ab540dd…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html

package/tokens/native/cs_tokens.dart

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.7.0 · source sha256 c1e69d03df03c124…
+// release v1.7.2 · source sha256 1e71e4553ab540dd…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html

package/tokens/provenance.json

@@ -1,10 +1,10 @@
 {
   "system": "CyberSkill Design System",
-  "release": "1.7.0",
+  "release": "1.7.2",
   "source": "tokens/tokens.dtcg.json",
-  "sourceSha256": "c1e69d03df03c12412835e06ba087c8a73a3c418007d9f47cdbcea85c5dadf53",
+  "sourceSha256": "1e71e4553ab540dd0154ece1315b9a5148525ebdf7197d99400a6bc067b277c3",
   "dtcgStamp": {
-    "version": "1.7.0",
+    "version": "1.7.2",
     "generated": "2026-07-23"
   },
   "conversions": {
@@ -36,17 +36,17 @@
     {
       "file": "tokens/native/CSTokens.swift",
       "lang": "swift",
-      "sha256": "ca83e3cf8b01f7acc8c06ca1aded61b64350818c91426ff026e576eec2bfd788"
+      "sha256": "b4a7f3e5315bbb5de5469ea9b18e01906e739fd3d38c25d51026b30343509004"
     },
     {
       "file": "tokens/native/CSTokens.kt",
       "lang": "kotlin",
-      "sha256": "bceb1925ac096d02637e24a78efdf8b18527fa95fdc76a5395de2d734b451256"
+      "sha256": "662502acc441f711495ddb29a9129937b88466f337a365a7ed36bef11822cb8c"
     },
     {
       "file": "tokens/native/cs_tokens.dart",
       "lang": "dart",
-      "sha256": "4c0702c11721596654f91aba4f8dc0d85dcf7027a50449ab94f9bf992f0ee69d"
+      "sha256": "4bc9f7c849a82f8f5932c63b199d44d86d50868f8fc895a2980f77869b68cd19"
     }
   ]
 }

package/tokens/tokens.dtcg.json

@@ -3,7 +3,7 @@
   "$extensions": {
     "com.cyberskill": {
       "system": "CyberSkill Design System",
-      "version": "1.7.0",
+      "version": "1.7.2",
       "generated": "2026-07-23",
       "source": "tokens/tokens.json",
       "note": "Scope overrides (dark/system theme · 15 element×variant packs) are carried under $extensions.overrides keyed by CSS selector — apply the matching selector on :root/ancestor to activate.",

package/tokens/tokens.js

@@ -1,8 +1,8 @@
-// CyberSkill design tokens — generated from tokens/*.css (v1.7.0). Do not edit by hand.
+// CyberSkill design tokens — generated from tokens/*.css (v1.7.2). Do not edit by hand.
 export const tokens = {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.7.0",
+    "version": "1.7.2",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },

package/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.7.0",
+    "version": "1.7.2",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },