docs: align public examples with emitted output and default breakpoints

.changepacks/changepack_log_build_error_docs.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "packages/eslint-plugin/package.json": "Patch",
+    "packages/react/package.json": "Patch"
+  },
+  "note": "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",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_docs_accuracy.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "apps/landing/package.json": "Patch"
+  },
+  "note": "Documentation examples now preserve Button event handlers and show the CSS actually emitted for values, colors, keyframes, fonts and atomic rule reuse. Documentation only: no new build errors.",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_docs_breakpoints.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "apps/landing/package.json": "Patch"
+  },
+  "note": "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.",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_extractor_docs.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch"
+  },
+  "note": "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.",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_known_limitations.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/react/package.json": "Patch"
+  },
+  "note": "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",
+  "date": "2026-10-01T00:00:00.000Z"
+}

README.md

@@ -7,7 +7,7 @@
 </h3>
 
 <p align="center">
-    <strong>Zero Config · Zero FOUC · Zero Runtime · Complete CSS-in-JS Syntax Coverage</strong>
+    <strong>Zero Config · Zero FOUC · Zero Runtime · Build-Time CSS-in-JS</strong>
 </p>
 
 ---
@@ -41,7 +41,7 @@ English | [한국어](README_ko.md)
 
 Traditional CSS-in-JS solutions force you to choose between developer experience and performance. Devup UI eliminates this trade-off entirely by processing all styles at build time using a Rust-powered preprocessor.
 
-- **Complete Syntax Coverage**: Every CSS-in-JS pattern you know — variables, conditionals, responsive arrays, pseudo-selectors — all fully supported
+- **Broad Syntax Coverage**: Variables, conditionals, responsive arrays, pseudo-selectors, `styled()`, Emotion's `css` prop and more compile at build time; anything the build cannot know is a [located build error](https://devup-ui.com/docs/build-errors), never a silent miss ([supported syntax & limitations](https://devup-ui.com/docs/limitations))
 - **Familiar API**: `styled()` API compatible with styled-components and Emotion patterns
 - **True Zero Runtime**: No JavaScript execution for styling at runtime. Period.
 - **Smallest Bundle Size**: Optimized class names (`a`, `b`, ... `aa`, `ab`) minimize CSS output
@@ -111,47 +111,73 @@ Devup UI transforms your components at build time. Class names are generated usi
 
 **Basic transformation:**
 
+Generated class and CSS variable names may change between versions, build state, and prefix settings; do not manually reuse them.
+
+You write:
+
 ```tsx
-// You write:
-const variable = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
+import { Box } from '@devup-ui/react'
+
+const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
+```
 
-// Devup UI generates:
-const variable = <div className="a b c" />
+Devup UI generates:
 
-// With CSS:
-// .a { background-color: red; }
-// .b { padding: 1rem; }
-// .c:hover { background-color: blue; }
+```tsx
+import "@devup-ui/react/devup-ui.css";
+const example = <div className="a b c" />;
+```
+
+With CSS:
+
+```css
+/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.b{background:red}.c{padding:16px}.a:hover{background:blue}
 ```
 
 **Dynamic values become CSS variables:**
 
+You write:
+
 ```tsx
-// You write:
+import { Box } from '@devup-ui/react'
+
 const example = <Box bg={colorVariable} />
+```
 
-// Devup UI generates:
-const example = <div className="a" style={{ '--a': colorVariable }} />
+Devup UI generates:
 
-// With CSS:
-// .a { background-color: var(--a); }
+```tsx
+import "@devup-ui/react/devup-ui.css";
+const example = <div className="a" style={{ "--b": colorVariable }} />;
+```
+
+With CSS:
+
+```css
+/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:var(--b)}
 ```
 
-**Complex expressions and responsive arrays — fully supported:**
+**Complex expressions and responsive arrays:**
+
+You write:
 
 ```tsx
-// You write:
+import { Box } from '@devup-ui/react'
+
 const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+```
+
+Devup UI generates:
+
+```tsx
+import "@devup-ui/react/devup-ui.css";
+const example = <div className={`a b ${isActive ? "c" : "d"}`} style={{ "--e": dynamicColor }} />;
+```
 
-// Devup UI generates:
-const example = (
-  <div
-    className={`a b ${isActive ? 'c' : 'd'}`}
-    style={{ '--d': dynamicColor }}
-  />
-)
+With responsive CSS for each breakpoint:
 
-// With responsive CSS for each breakpoint
+```css
+/*! 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}.d{background:var(--e)}}
 ```
 
 **Type-safe theming:**

README_ko.md

@@ -7,7 +7,7 @@
 </h3>
 
 <p align="center">
-    <strong>Zero Config · Zero FOUC · Zero Runtime · 모든 CSS-in-JS 문법 완벽 지원</strong>
+    <strong>Zero Config · Zero FOUC · Zero Runtime · 빌드 타임 CSS-in-JS</strong>
 </p>
 
 ---
@@ -41,7 +41,7 @@
 
 기존 CSS-in-JS 솔루션들은 개발자 경험과 성능 사이에서 타협을 강요했습니다. Devup UI는 Rust 기반 전처리기를 통해 모든 스타일을 빌드 타임에 처리함으로써 이 트레이드오프를 완전히 제거합니다.
 
-- **완전한 문법 지원**: 변수, 조건문, 반응형 배열, 가상 선택자 등 모든 CSS-in-JS 패턴을 완벽하게 지원
+- **폭넓은 문법 지원**: 변수, 조건문, 반응형 배열, 가상 선택자, `styled()`, Emotion `css` prop 등을 빌드 타임에 컴파일합니다. 빌드가 알 수 없는 것은 조용히 빠지지 않고 [위치가 표시된 빌드 오류](https://devup-ui.com/docs/build-errors)가 됩니다 ([지원 문법과 한계](https://devup-ui.com/docs/limitations))
 - **익숙한 API**: styled-components, Emotion과 호환되는 `styled()` API 제공
 - **진정한 제로 런타임**: 런타임에서 스타일링을 위한 JavaScript 실행이 전혀 없습니다
 - **가장 작은 번들 크기**: 최적화된 클래스명(`a`, `b`, ... `aa`, `ab`)으로 CSS 출력 최소화
@@ -111,47 +111,73 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
 
 **기본 변환:**
 
+생성된 클래스명과 CSS 변수명은 버전, 빌드 상태, 접두사 설정에 따라 달라질 수 있으므로 직접 재사용하지 마세요.
+
+개발자가 작성:
+
 ```tsx
-// 개발자가 작성:
+import { Box } from '@devup-ui/react'
+
 const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
+```
 
-// Devup UI가 생성:
-const generated = <div className="a b c" />
+Devup UI가 생성:
 
-// CSS:
-// .a { background-color: red; }
-// .b { padding: 1rem; }
-// .c:hover { background-color: blue; }
+```tsx
+import "@devup-ui/react/devup-ui.css";
+const example = <div className="a b c" />;
+```
+
+CSS:
+
+```css
+/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.b{background:red}.c{padding:16px}.a:hover{background:blue}
 ```
 
 **동적 값은 CSS 변수로 변환:**
 
+개발자가 작성:
+
 ```tsx
-// 개발자가 작성:
+import { Box } from '@devup-ui/react'
+
 const example = <Box bg={colorVariable} />
+```
 
-// Devup UI가 생성:
-const generated = <div className="a" style={{ '--a': colorVariable }} />
+Devup UI가 생성:
 
-// CSS:
-// .a { background-color: var(--a); }
+```tsx
+import "@devup-ui/react/devup-ui.css";
+const example = <div className="a" style={{ "--b": colorVariable }} />;
+```
+
+CSS:
+
+```css
+/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:var(--b)}
 ```
 
-**복잡한 표현식과 반응형 배열 — 완벽 지원:**
+**복잡한 표현식과 반응형 배열:**
+
+개발자가 작성:
 
 ```tsx
-// 개발자가 작성:
+import { Box } from '@devup-ui/react'
+
 const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+```
+
+Devup UI가 생성:
+
+```tsx
+import "@devup-ui/react/devup-ui.css";
+const example = <div className={`a b ${isActive ? "c" : "d"}`} style={{ "--e": dynamicColor }} />;
+```
 
-// Devup UI가 생성:
-const generated = (
-  <div
-    className={`a b ${isActive ? 'c' : 'd'}`}
-    style={{ '--d': dynamicColor }}
-  />
-)
+각 브레이크포인트에 대한 반응형 CSS:
 
-// 각 브레이크포인트에 대한 반응형 CSS 생성
+```css
+/*! 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}.d{background:var(--e)}}
 ```
 
 **타입 세이프 테마:**

apps/landing/src/app/(detail)/docs/LeftMenu.tsx

@@ -36,6 +36,8 @@ export function LeftMenu() {
         Core Concepts
       </MenuItem>
       <MenuItem to="/docs/features">Features</MenuItem>
+      <MenuItem to="/docs/limitations">Supported Syntax & Limitations</MenuItem>
+      <MenuItem to="/docs/build-errors">Build Errors</MenuItem>
       <MenuItem
         subMenu={[
           {

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -24,28 +24,22 @@ function App() {
 }
 ```
 
-The Button component defined above will render like this:
+With the build plugin configured, the Button component is transformed into a native
+`button`. The React event handler remains a function expression, not a string
+attribute. This is the extracted code and CSS from an isolated run with an empty
+theme and the default prefix; generated names depend on extraction state and prefix.
 
-```tsx
+```text
+import "@devup-ui/react/devup-ui.css";
 function App() {
-  return (
-    <button className="a b c" onClick="alert('clicked!!')">
+	return <button onClick={() => alert("clicked!!")} className="a b c">
       click me
-    </button>
-  )
+    </button>;
 }
 ```
 
-```css
-.a {
-  background: red;
-}
-.b {
-  width: 100px;
-}
-.c {
-  height: 100px;
-}
+```text
+/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{height:100px}.c{width:100px}
 ```
 
 If you pass a number without a unit to a style property, it will be automatically scaled by 4.