docs: align public examples with emitted output and default breakpoints

[owjs3901]

Refs #693 (W23: DOC-02/03/04/06/09/11/13/14/17/18, CSS-09). #753 위에 쌓은 PR이며 #732와 #753이 먼저 병합되어야 합니다. CI 실행을 위해 base는 main입니다. 고유 변경은 2b6c03ec 이후의 문서 커밋 6개이며 최종 head는 d1dd51d388dbc5ab761fb57bdc23ce2ef7de0f3c입니다.

요약

• 잘못된 변환/축약 예제를 실제 WASM 출력으로 교체하고 테마 설정과 vanilla-extract의 지원 범위를 정확하게 설명합니다. 추출 구현, 의존성, 워크플로는 변경하지 않았습니다.
• 기본 브레이크포인트를 0/480/768/992/1280/1600으로 맞추고, 실제 Theme::default()와 공개 문서의 숫자/범위 표를 비교하는 테스트 2개를 추가합니다.
• ci: pin actions and toolchains, scope permissions per event, and generate the benchmark tables from one result #744/#735가 이미 고치는 영역은 실제 해당 PR의 텍스트와 프로브로 대조한 뒤 중복 수정하지 않았습니다. 두 root README의 비중첩 변환 예제 영역은 추가로 실제 출력에 맞추고 양쪽 언어를 일치시켰습니다.

동작

항목	결과
DOC-02	수정: Button은 native button으로 바뀌며 함수 onClick이 그대로 남습니다. 문자열 이벤트 속성 예제를 없앴습니다.
DOC-03	수정: margin:0 0 0 0, padding:16.0000px가 그대로 나오는 것을 설명합니다. keyframes 이름, font-family, global layer, atomic 중복 제거 출력도 실제 결과입니다.
DOC-04	수정: RGBA 절반 투명 빨강은 #FF000080이며 #f000이 아닙니다. 일반 CSS minifier나 모든 값의 최단 출력을 보장하지 않습니다.
DOC-06	수정: variant별 색상 맵, 기본 df/theme.d.ts, df/*.d.ts, 플러그인의 설정 가능한 distDir를 설명합니다.
DOC-09	수정: 선행 합성 스택의 later-part-wins 동작을 유지하면서 일반 모듈의 theme-variable 읽기 한계를 구분하고, 위치가 표시되는 기존 오류와 .css.ts로 옮기는 해결법을 설명합니다. stylesheet 예제의 vars/base export와 space/PRIMARY 정의도 완성하여 실제로 실행됩니다.
DOC-11	벤치마크/caveat는 #744에서 이미 해결: 실제 #744 텍스트를 확인했고 해당 영역(원래 80–112행)은 변경하지 않았습니다. 그 아래의 기본/동적/반응형 변환 예제 3개는 두 README 모두 실제 base 프로브 출력으로 교체했습니다(--b, --e, 16px, 정확한 클래스/CSS 매핑). 버전/상태/접두사에 따라 생성 이름이 바뀔 수 있다는 안내를 언어별로 한 번 넣었습니다.
DOC-13	수정: extractor README의 오래된 Box/dp* 출력을 실제 native div, 클래스, CSS 변수와 CSS로 교체했습니다.
DOC-14	#744에서 이미 해결: WASM 템플릿 README를 실제 API/빌드/상태/오류 안내로 교체합니다. 실제 #744 README와 현재 생성된 선언의 API를 대조했고 여기서는 중복 수정하지 않았습니다.
DOC-17	#735에서 이미 해결: 비어 있던 ESLint 패키지 README에 구성/규칙/지원 위치 설명을 넣습니다. 실제 #735 개요를 확인했고 여기서는 변경하지 않았습니다.
DOC-18	#735에서 이미 해결, 관련 static-value 안내는 base의 #697에도 존재: 실제 README의 literal import → SIZE/GAP/UNIT, HOVER, 정확한 함수/내장 계산을 현재 빌드로 재현했습니다. 런타임 값/변경된 객체/외부 함수 호출은 거부됩니다.
CSS-09	수정: typography의 잘못된 1024/1640을 canonical 992/1600으로 고쳤습니다. 이미 맞던 ranges 표도 동기화 테스트가 검사하며 공개 Markdown/MDX의 같은 기본값 오류가 더 없는지 확인했습니다.

검증한 빌드

#732와 같은 병합 순서 계약에 따라 #701~#731 선행 PR이 병합된 뒤의 동작을 문서화합니다. 이 브랜치 base 2b6c03ec의 빌드와 읽기 전용 w27-composition-rest의 빌드(#706~#730 + #736/#745)를 사용했습니다. Button/최적화/extractor 출력은 양쪽에서 같습니다. 합성 예제의 충돌 클래스 제거(button = "b c")는 선행 합성 스택의 실제 출력입니다.

DOC-09의 정확한 조사 예제 case-058.ts/case-059.ts는 base/main 동작, 위 합성 스택, 읽기 전용 w22-js-semantics 빌드(through #756)에서 같은 theme-variable 오류를 냅니다. 실제 theme.css.ts/tokens.ts를 제공하여 import가 정상 해석되어도 일반 모듈의 vars.space는 실패합니다. consuming 모듈을 .css.ts로 바꾸면 성공합니다. 뒤의 #733+ PR 동작을 페이지에 출시된 것처럼 앞당겨 쓰지는 않았습니다.

실제 출력 예시

각 예제는 새 프로세스에서 빈 테마와 기본 접두사로 프로브했습니다. 생성된 클래스/변수/애니메이션 이름은 추출 상태와 접두사에 따라 달라집니다.

Button:

import "@devup-ui/react/devup-ui.css";
function App() {
	return <button onClick={() => alert("clicked!!")} className="a b c">
      click me
    </button>;
}

/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{height:100px}.c{width:100px}

단위/비율:

/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.e{aspect-ratio:16/9}.d{aspect-ratio:5/1}.a{margin:0 0 0 0}.b{padding:16.0000px}.c{width:0}.h{width:100%}.g{width:16rem}.f{width:64px}

색상:

/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.d{background:#000}.a{background:#F00}.b{background:#FF000080}.c{background:#FFF}

extractor:

/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{color:white}.c{margin:8px}.d{padding:8px}.e{text-align:var(--f)}

반응형 기본값:

/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}@media(min-width:480px){.b{background:blue}}@media(min-width:768px){.c{background:green}}@media(min-width:992px){.d{background:yellow}}@media(min-width:1280px){.e{background:purple}}@media(min-width:1600px){.f{background:orange}}

새로 생기는 오류

없습니다. 문서와 동기화 테스트만 변경했습니다. 일반 모듈에서 vars.colors.bg/vars.space를 style()에 넣을 때의 located css() 오류는 이미 있던 오류입니다.

남는 한계

• DOC-09의 일반 모듈 theme-contract/imported theme-variable gap 자체는 별도 구현 PR에서 수정합니다(코디네이터가 fix(extractor): locate diagnostics and enforce deterministic evaluation #757 이후 스택으로 배정). 이 PR은 오류를 숨기거나 런타임으로 넘기지 않고 현재 가능한 stylesheet 경로를 안내합니다.
• ci: pin actions and toolchains, scope permissions per event, and generate the benchmark tables from one result #744/#735는 아직 열린 PR이며 이 base에 포함되지 않습니다. benchmark 영역과 WASM/ESLint README의 해당 PR 변경을 중복 작성하지 않았습니다. 코디네이터의 추가 지시에 따라 비중첩 root README 예제는 수정했으며, 기존의 오래된 변수명/단위 출력 보고는 이 커밋으로 해결했습니다.
• 값/색상 최적화는 확인된 결과의 설명이며 모든 문자열/모든 CSS 문법의 최단 출력 보장은 아닙니다.
• 로컬 Markdown/MDX LSP는 없고 Rust LSP daemon은 timeout이므로 깨끗한 LSP 결과라고 주장하지 않습니다. 실제 compiler/clippy, lint, 빌드, 브라우저 검증 결과를 사용합니다.

검증

• WASM/루트 bun run build, landing build, cargo fmt --all, cargo +1.99 clippy --workspace --all-targets --message-format short -- -D warnings, cargo test --workspace 통과.
• 최종 전체 staged tree만 둔 commit hook 통과: lint 오류 0(기존 경고 2), Bun 5474 pass / 0 fail, 커버리지 100%. 변경 파일은 문서 8개, integration test 1개, Patch changepack 3개뿐입니다. 최종 두 커밋에 stash 명령을 사용하지 않았습니다.
• 로컬 Windows Rust tarpaulin은 **97.98% (13312/13587)**로 보고되므로 로컬 Rust 100%라고 적지 않습니다. Linux CI의 --fail-under 100 검증은 별도로 확인합니다.
• 동기화 테스트 2개 통과. typography 문서만 992 → 1024로 바꾸면 typography 테스트 실패, production default만 992 → 993으로 바꾸면 두 테스트 실패, ranges 표의 상한만 991 → 990으로 바꾸면 ranges 테스트 실패를 직접 확인하고 모두 즉시 복원했습니다.
• 실제 export를 Playwright Chromium으로 열어 변경된 5개 route를 desktop 1440/mobile 375에서 모두 확인했습니다: HTTP 200, 올바른 본문/제목, 페이지 전체 가로 overflow 없음. 인접 Docs 링크 navigation도 통과했습니다. 서버/브라우저는 foreground 실행 안에서 종료했습니다.
• 독립 GPT gate reviewer APPROVE, 최신 screenshot 10개를 모두 확인했으며 범위 내 blocker 없음. 새 root README delta의 독립 재검토도 APPROVE이며, 두 파일의 생성 출력 9개 code fence가 일치하고 protected prefix/benchmark 영역이 그대로임을 확인했습니다.
• 체인지팩은 apps/landing/package.json, bindings/devup-ui-wasm/package.json의 Patch입니다. 추출 구현/의존성/워크플로는 변경하지 않았습니다.
• 초기 실행 37251379299는 모든 코드 검증/다른 잡을 통과하고 Codecov CLI 다운로드의 TLS handshake 및 GPG signature 실패만 남았습니다. 워크플로를 변경하거나 재실행 루프를 돌리지 않았습니다.
• 이전 전체 문서/test head CI 37260402909의 확정 결론은 **failure (Codecov 외부 장애만)**입니다. b11bb0e9b8ab91f7be6a9340107cec04370cdfd5 실행임을 API로 확인했습니다. 전체 CI가 green이라고 주장하지 않습니다.
• Linux Rust 100.00% (9812/9812), Bun 5482 pass / 0 fail, 함수/라인 커버리지 모두 100.00%. preload-race regression 6개도 통과했습니다. CI의 실제 테스트 수는 로컬 5474와 다르며 위 수치는 원본 publish 로그로 대조했습니다.
• publish의 빌드/배포 tarball 검증/lint/테스트/landing 빌드 및 두 CSS 모드 E2E는 모두 통과했습니다(E2E 각 134개). benchmark, vinext-rsc-css-e2e, landing-next-e2e 잡도 모두 success입니다.
• 유일한 실패는 Upload to codecov.io: cli.codecov.io 다운로드에서 curl: (35) ... sslv3 alert handshake failure, 이어 GPG signature 파일 누락입니다. 작업 지침의 Codecov outage 규칙을 적용하여 워크플로 변경/재실행 루프 없이 기록했습니다. 장애가 복구되면 코디네이터가 실패한 잡을 재실행해야 합니다.
• Codecov 실패 뒤 Verify clean publish checkout과 Run changepacks/action@main은 skipped이므로 통과했다고 적지 않습니다.
• root README 수정을 포함한 최신 head d1dd51d388dbc5ab761fb57bdc23ce2ef7de0f3c의 CI 37264387871도 **failure (Codecov 외부 장애만)**으로 확정되었습니다. API와 원본 로그를 직접 대조했습니다: Rust 100.00% (9812/9812), Bun 5482 pass / 0 fail, 함수/라인 100.00%, preload-race 6개, landing E2E 두 모드 각 134개 통과입니다.
• 최신 실행의 vinext-rsc-css-e2e, landing-next-e2e, benchmark는 모두 success이며 유일한 실패는 같은 Codecov CLI TLS handshake/GPG 파일 누락입니다. 뒤의 clean-publish/changepacks-action은 skipped입니다. 외부 장애 규칙에 따라 코드/워크플로를 변경하거나 재실행하지 않고 코디네이터에게 실행 ID와 증거를 전달합니다.

[github-actions]

Changepacks

@devup-ui/wasm@1.0.83 → 1.0.84 - bindings/devup-ui-wasm/package.json

Patch

• Typography documents the emitted default breakpoints, and source-backed integration tests keep the public breakpoint lists and range bounds synchronized with the production defaults. No runtime changes or new build errors.
• The extractor guide shows reproducible native-element output, generated CSS-variable bindings, and actual atomic CSS rather than obsolete class names. Documentation only: no new build errors.

@devup-ui/bun-plugin@1.0.22 → 1.0.23 - packages/bun-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/wasm' via a local workspace dependency

@devup-ui/components@0.1.60 → 0.1.61 - packages/components/package.json

Patch

• Auto-update: depends on '@devup-ui/react' via a local workspace dependency

@devup-ui/eslint-plugin@1.0.22 → 1.0.23 - packages/eslint-plugin/package.json

Patch

• The @devup-ui/react README and the css-utils-literal-only rule docs link their mention of build errors to the new Build Errors reference (https://devup-ui.com/docs/build-errors), which lists the build errors grouped by API; the docs sidebar lists the page after Supported Syntax & Limitations, whose Build errors section links to it. Documentation only: no new build errors

@devup-ui/next-plugin@1.0.90 → 1.0.91 - packages/next-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/wasm' via a local workspace dependency

@devup-ui/react@1.0.44 → 1.0.45 - packages/react/package.json

Patch

• The @devup-ui/react README and the css-utils-literal-only rule docs link their mention of build errors to the new Build Errors reference (https://devup-ui.com/docs/build-errors), which lists the build errors grouped by API; the docs sidebar lists the page after Supported Syntax & Limitations, whose Build errors section links to it. Documentation only: no new build errors
• The README no longer claims every CSS-in-JS pattern compiles: it describes what the build compiles and that anything it cannot know is a CSS variable or a located build error, and links the new Supported Syntax & Limitations page, which lists what compiles, the style override rules (where a later part wins and where the CSS cascade decides), Baseline 2024 browser support, that a component taking the css prop must pass className and style on, the runtime-only APIs and how each is handled, and the known limitations

@devup-ui/reset-css@1.0.31 → 1.0.32 - packages/reset-css/package.json

Patch

• Auto-update: depends on '@devup-ui/react' via a local workspace dependency

@devup-ui/rsbuild-plugin@1.0.67 → 1.0.68 - packages/rsbuild-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/wasm' via a local workspace dependency

@devup-ui/vite-plugin@1.0.73 → 1.0.74 - packages/vite-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/wasm' via a local workspace dependency

@devup-ui/webpack-plugin@1.0.71 → 1.0.72 - packages/webpack-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/wasm' via a local workspace dependency

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
bindings/devup-ui-wasm/src/lib.rs	100.00% <ø> (ø)
libs/css/src/theme_tokens.rs	100.00% <ø> (ø)
libs/extractor/src/lib.rs	100.00% <ø> (ø)
libs/extractor/src/tailwind.rs	100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.