feat(react): `Header` by junghyeonsu · Pull Request #1375 · daangn/seed-design

junghyeonsu · 2026-03-20T03:02:16Z

Summary

웹 전용 Header 컨테이너 컴포넌트 추가 (Root / Left / Center / Right 3-slot compound component)
Rootage 없이 글로벌 디자인 토큰 직접 참조하는 recipe 패턴 사용 (pull-to-refresh 선례)
Variants: tone (layer | transparent), divider (boolean)

Test plan

bun qvism:generate — CSS 생성 확인
bun packages:build — 빌드 성공
bun test:all — 585 pass, 0 fail

🤖 Generated with Claude Code

coderabbitai · 2026-03-20T03:02:22Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ddee8825-26bb-441d-b0be-04282a5017da

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch junghyeonsu/header-component

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

changeset-bot · 2026-03-20T03:02:24Z

⚠️ No Changeset found

Latest commit: 1027869

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-03-20T03:12:13Z

Alpha Preview (Docs)

Branch Preview URL: https://junghyeonsu-header-component.seed-design.pages.dev
Preview URL: https://301e5243.seed-design.pages.dev
Commit: da6b66a

github-actions · 2026-03-20T06:05:53Z

Alpha Preview (Stackflow SPA)

Branch Preview URL: https://junghyeonsu-header-component.seed-design-stackflow-spa.pages.dev
Preview URL: https://3fed89d4.seed-design-stackflow-spa.pages.dev
Commit: da6b66a

github-actions · 2026-03-20T06:06:11Z

Alpha Preview (Storybook)

Branch Preview URL: https://junghyeonsu-header-component.seed-design-storybook.pages.dev
Preview URL: https://075d1501.seed-design-storybook.pages.dev
Commit: da6b66a

malangcat · 2026-03-23T17:07:25Z

데스크톱 컴포넌트를 같은 층위에 밀어넣는게 좋은 선택같지는 않네요. stackflow처럼 패키지라도 분리하는게 어떨까 싶긴 합니다.

junghyeonsu · 2026-03-24T06:48:59Z

@malangcat action-button과 같이 데스크탑에서도 사용되고, 모바일에서도 사용되는 컴포넌트는 그대로 두되,
데스크탑에서만 사용되는 컴포넌트는 최소한 패키지 분리를 하라는 의견이신거죠?

아마 애셔가 얘기해주신 부분이 최소한의 맥락 분리라고 예상하긴한데, (stackflow를 언급해주신 부분에서 그런 생각이 들었습니다.)

@seed-design/stackflow 은 "모바일"을 내포하고 있다고 생각했고
@seed-design/something (분리될 패키지)는 "데스크탑"
@seed-design/react 는 react 의 이름을 갖고 있으니 모바일, 데스크탑 공용의 느낌을 내포하는 것
으로 얘기해주신 게 맞을까요?

같은 패키지에 두는 건 왜 좋은 선택이 아닌지에 대한 의견이 더 궁금해요 애셔

* chore(docs): add chromatic viewport modes baseline Add VIEWPORT_MODES and viewport options to storybook for chromatic visual snapshot baselines across breakpoints. Hardcoded values will be replaced with @seed-design/css/breakpoints when responsive styling lands. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * chore(docs): apply chromatic viewport modes to layout stories Add chromatic: { modes: VIEWPORT_MODES } to Box, Flex, Grid, Stack stories to establish visual snapshot baselines across breakpoints. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * feat(css, react): add breakpoint constants and ResponsiveValue type Introduce viewport breakpoint system for responsive styling support: - Add @seed-design/css/breakpoints with breakpoint names, values, and media queries - Add ResponsiveValue<T> type and isResponsiveObject type guard in react package - Export ResponsiveValue type from @seed-design/react public API Breakpoints: base(0), sm(480), md(768), lg(1280), xl(1440) DES-1314, DES-1318 Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(postcss-responsive): add PostCSS plugin for responsive CSS variable cascade chains Introduce postcss-responsive plugin that transforms `--responsive` marker suffixed CSS custom properties into breakpoint-aware cascade chains. Register in qvism-preset and add markers to 20 Box style properties (padding, bleed, width/height, display, flexDirection, gap). Generated CSS includes per-breakpoint fallback vars and @media overrides. Adapted from Reshaped (MIT) postcss.responsive.mjs DES-1324, DES-1317 Co-Authored-By: Claude Opus 4.6 <[email protected]> # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css * feat(react): add responsive value support to useStyleProps Extend useStyleProps to accept ResponsiveValue<T> for layout-related props (width, height, padding, bleed, display, flexDirection, gap). Single values now output -base suffixed CSS variables to work with the postcss-responsive cascade chain. Co-Authored-By: Claude Opus 4.6 <[email protected]> * fix(react): fix StyleProps consumer compatibility for responsive values - Icon: use UnwrapResponsive<StyleProps["height"]> since --seed-icon-size is outside the --seed-box-* cascade chain (no responsive icon sizing yet) - ResponsivePair: replace handleDimension(gap) with var(--seed-box-gap) CSS variable reference to support responsive gap values - Export UnwrapResponsive utility type for external consumers - Unexport handlePaddingWithSafeArea (internal only) Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(react): add responsive utility props for layout components Add responsive Grid columns/rows, hideFrom/showFrom visibility controls for Box/Flex/Grid, and vStackFrom/hStackFrom direction switching for Stack components. Export BreakpointThreshold type for consumers. Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor * fix(react): move Grid display from .seed-grid CSS to Box's --seed-box-display Previously .seed-grid hardcoded display:grid, which silently overrode --seed-box-display and broke <Grid display="none">. Now Grid passes display="grid" through Box like Flex does, unifying the pattern and enabling hideFrom/showFrom to work correctly. Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(react): add JS runtime responsive hooks Add useBreakpoint, useBreakpointValue hooks and optional BreakpointProvider for JS-level responsive behavior (variant switching, conditional rendering). - Module-level singleton matchMedia store with lazy init and ref counting - useSyncExternalStore for tearing-safe concurrent mode support - Hybrid: works without provider, optional BreakpointProvider for SSR defaults - Cascade resolution matching CSS min-width semantics Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): replace resolveDisplay with generic resolveThreshold Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): restructure visibility utils with internal resolveThreshold - resolveThreshold is now a generic internal utility (not exported) - resolveDisplay wraps it with display-specific API ({base, hideFrom, showFrom}) - hideFrom takes precedence if both hideFrom and showFrom are provided Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): implement hideFrom via CSS variable cascade, remove showFrom - hideFrom now directly injects `--seed-box-display-{bp}: none` into inline style, leveraging the existing CSS variable cascade chain. This makes hideFrom completely independent of the user's display prop. - Remove showFrom from all components (Box, Flex, Grid) due to fundamental conflict with user's display prop — restoring the original display value at a breakpoint requires knowing what it is. - Remove visibility.ts utility (no longer needed). - Restore Flex/Grid to dev-branch pattern: hardcoded display default with ...rest spread allowing user override. Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(react): allow responsive display values on Flex and Grid Wrap Flex `display` and Grid `display` prop types with ResponsiveValue<> so users can pass responsive objects directly: <Flex display={{ base: "none", md: "flex" }} /> <Grid display={{ base: "none", lg: "grid" }} /> This naturally covers the showFrom use case without a dedicated prop. Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): remove vStackFrom/hStackFrom from Stack components Deferred to gradual introduction; users can use Flex with responsive flexDirection directly for the same effect. Co-Authored-By: Claude Opus 4.6 <[email protected]> * chore: add comment * fix: better type ResponsiveObject<T> * chore: format * docs * docs * test: add tests for multiple viewports # Conflicts: # docs/stories/utils/parameters.ts * test: add nested layout composition stories for Box Add layout and nested stacks conditions (both static and responsive) to Box stories for visual regression testing with Chromatic viewport modes. Co-Authored-By: Claude Opus 4.6 <[email protected]> * chore: generate * fix: fix recipes using box variables * fix: fix ResponsivePair inline styles * fix: revert changes in action button recipe since it doesn't have seed-box class * fix: bleed* can take responsive objects * fix(css, qvism-preset): use --responsive marker in recipes for style prop override Recipes that expose style props via Pick<StyleProps, ...> need their own CSS variable cascade chain so that resolveResponsive's -base suffix inline styles can override recipe defaults. Without .seed-box class on these components, the cascade chain from base.css is not available. Using --responsive marker lets postcss-responsive generate the full cascade chain (-base, -sm, -md, -lg, -xl + media queries) directly in each recipe's CSS output. Affected recipes: skeleton, bottom-sheet, help-bubble, list-item Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix: fix reponsivepair * fix * docs * test: remove unrelated case * feat: add gap fallback to responsivepair * fix: remove unsafe casting * test: add ResponsivePair stories * docs: changeset * feat(qvism-preset): add breakpoint helper for recipes Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> # Conflicts: # docs/stories/utils/parameters.ts

malangcat · 2026-03-24T09:13:04Z

음... 처음 빌드할때 프로젝트의 목표 자체가 웹뷰에 들어갈 모바일 제품만을 위한 것이였어서, react라는 패키지명을 사용했는데 데스크톱 관심사를 포함하게 되면 패키지명이 애매해지긴 하네요.

저라면 rootage 스펙부터 전부 따로 구성할 것 같긴 합니다. 결국 데스크톱 관심사에서는 typography부터 컴포넌트들의 사이즈 요구사항들이 전부 달라지게 될 가능성이 커서요.

ecosystem은 어떤 시스템을 만들더라도 공유될 수 있는 영역, packages는 모바일 제품, 즉 당근 앱을 위한 영역인 것이 의도였습니다.

junghyeonsu · 2026-03-24T15:23:20Z

@malangcat 웹 디자인시스템 rootage - recipe - react의 레이어를 따로 구성하는건 동의해요.
결국 typography와 같은 rootage가 따로 나오면 그 위로 올라와서 Text와 같은 Primitive도 따로 쓰여야 해서..
아예 다른 맥락이라고 이해를 하는게 더 쉬울수도 있겠군요..

저는 문서 페이지 때문에 한 레포에 다 담아야 관리가 쉬울 것 같은데, 근데 현재의 모노레포 구조도 조금 애매하네요.

packages는 모바일 제품 이라는 건 현재 packages에서는 웹 제품에 대한 관심사는 아예 들어가지 않는걸 생각하신걸까요?
packages 안에서 mobile, desktop(desktop? or web? web이 조금 더 맞는거같네요.)으로 나뉘어서 각각 rootage, recipe, react, css가 있는 방식은 어떤가요?
패키지명이 또 고민이네요...

malangcat · 2026-03-25T02:24:00Z

@malangcat 웹 디자인시스템 rootage - recipe - react의 레이어를 따로 구성하는건 동의해요.

결국 typography와 같은 rootage가 따로 나오면 그 위로 올라와서 Text와 같은 Primitive도 따로 쓰여야 해서..

아예 다른 맥락이라고 이해를 하는게 더 쉬울수도 있겠군요..

저는 문서 페이지 때문에 한 레포에 다 담아야 관리가 쉬울 것 같은데, 근데 현재의 모노레포 구조도 조금 애매하네요.

packages는 모바일 제품 이라는 건 현재 packages에서는 웹 제품에 대한 관심사는 아예 들어가지 않는걸 생각하신걸까요?

packages 안에서 mobile, desktop(desktop? or web? web이 조금 더 맞는거같네요.)으로 나뉘어서 각각 rootage, recipe, react, css가 있는 방식은 어떤가요?

패키지명이 또 고민이네요...

packages/ 안에서 다시 mobile, desktop으로 분류하거나... 패키지명은 저도 모르겠네요 완전히 모바일만을 전제로 했던 네이밍이라 ㅋㅋㅋㅋ

junghyeonsu · 2026-03-25T03:02:47Z

@malangcat ㅋㅋ 그래도 같이 얘기해주셔서 감사합니다. 그래도 어느정도 감이 잡히긴 했어요

* chore(docs): add chromatic viewport modes baseline Add VIEWPORT_MODES and viewport options to storybook for chromatic visual snapshot baselines across breakpoints. Hardcoded values will be replaced with @seed-design/css/breakpoints when responsive styling lands. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * chore(docs): apply chromatic viewport modes to layout stories Add chromatic: { modes: VIEWPORT_MODES } to Box, Flex, Grid, Stack stories to establish visual snapshot baselines across breakpoints. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * feat(css, react): add breakpoint constants and ResponsiveValue type Introduce viewport breakpoint system for responsive styling support: - Add @seed-design/css/breakpoints with breakpoint names, values, and media queries - Add ResponsiveValue<T> type and isResponsiveObject type guard in react package - Export ResponsiveValue type from @seed-design/react public API Breakpoints: base(0), sm(480), md(768), lg(1280), xl(1440) DES-1314, DES-1318 Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(postcss-responsive): add PostCSS plugin for responsive CSS variable cascade chains Introduce postcss-responsive plugin that transforms `--responsive` marker suffixed CSS custom properties into breakpoint-aware cascade chains. Register in qvism-preset and add markers to 20 Box style properties (padding, bleed, width/height, display, flexDirection, gap). Generated CSS includes per-breakpoint fallback vars and @media overrides. Adapted from Reshaped (MIT) postcss.responsive.mjs DES-1324, DES-1317 Co-Authored-By: Claude Opus 4.6 <[email protected]> # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css * feat(react): add responsive value support to useStyleProps Extend useStyleProps to accept ResponsiveValue<T> for layout-related props (width, height, padding, bleed, display, flexDirection, gap). Single values now output -base suffixed CSS variables to work with the postcss-responsive cascade chain. Co-Authored-By: Claude Opus 4.6 <[email protected]> * fix(react): fix StyleProps consumer compatibility for responsive values - Icon: use UnwrapResponsive<StyleProps["height"]> since --seed-icon-size is outside the --seed-box-* cascade chain (no responsive icon sizing yet) - ResponsivePair: replace handleDimension(gap) with var(--seed-box-gap) CSS variable reference to support responsive gap values - Export UnwrapResponsive utility type for external consumers - Unexport handlePaddingWithSafeArea (internal only) Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(react): add responsive utility props for layout components Add responsive Grid columns/rows, hideFrom/showFrom visibility controls for Box/Flex/Grid, and vStackFrom/hStackFrom direction switching for Stack components. Export BreakpointThreshold type for consumers. Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor * fix(react): move Grid display from .seed-grid CSS to Box's --seed-box-display Previously .seed-grid hardcoded display:grid, which silently overrode --seed-box-display and broke <Grid display="none">. Now Grid passes display="grid" through Box like Flex does, unifying the pattern and enabling hideFrom/showFrom to work correctly. Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(react): add JS runtime responsive hooks Add useBreakpoint, useBreakpointValue hooks and optional BreakpointProvider for JS-level responsive behavior (variant switching, conditional rendering). - Module-level singleton matchMedia store with lazy init and ref counting - useSyncExternalStore for tearing-safe concurrent mode support - Hybrid: works without provider, optional BreakpointProvider for SSR defaults - Cascade resolution matching CSS min-width semantics Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): replace resolveDisplay with generic resolveThreshold Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): restructure visibility utils with internal resolveThreshold - resolveThreshold is now a generic internal utility (not exported) - resolveDisplay wraps it with display-specific API ({base, hideFrom, showFrom}) - hideFrom takes precedence if both hideFrom and showFrom are provided Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): implement hideFrom via CSS variable cascade, remove showFrom - hideFrom now directly injects `--seed-box-display-{bp}: none` into inline style, leveraging the existing CSS variable cascade chain. This makes hideFrom completely independent of the user's display prop. - Remove showFrom from all components (Box, Flex, Grid) due to fundamental conflict with user's display prop — restoring the original display value at a breakpoint requires knowing what it is. - Remove visibility.ts utility (no longer needed). - Restore Flex/Grid to dev-branch pattern: hardcoded display default with ...rest spread allowing user override. Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(react): allow responsive display values on Flex and Grid Wrap Flex `display` and Grid `display` prop types with ResponsiveValue<> so users can pass responsive objects directly: <Flex display={{ base: "none", md: "flex" }} /> <Grid display={{ base: "none", lg: "grid" }} /> This naturally covers the showFrom use case without a dedicated prop. Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(react): remove vStackFrom/hStackFrom from Stack components Deferred to gradual introduction; users can use Flex with responsive flexDirection directly for the same effect. Co-Authored-By: Claude Opus 4.6 <[email protected]> * chore: add comment * fix: better type ResponsiveObject<T> * chore: format * docs * docs * test: add tests for multiple viewports # Conflicts: # docs/stories/utils/parameters.ts * test: add nested layout composition stories for Box Add layout and nested stacks conditions (both static and responsive) to Box stories for visual regression testing with Chromatic viewport modes. Co-Authored-By: Claude Opus 4.6 <[email protected]> * chore: generate * fix: fix recipes using box variables * fix: fix ResponsivePair inline styles * fix: revert changes in action button recipe since it doesn't have seed-box class * fix: bleed* can take responsive objects * fix(css, qvism-preset): use --responsive marker in recipes for style prop override Recipes that expose style props via Pick<StyleProps, ...> need their own CSS variable cascade chain so that resolveResponsive's -base suffix inline styles can override recipe defaults. Without .seed-box class on these components, the cascade chain from base.css is not available. Using --responsive marker lets postcss-responsive generate the full cascade chain (-base, -sm, -md, -lg, -xl + media queries) directly in each recipe's CSS output. Affected recipes: skeleton, bottom-sheet, help-bubble, list-item Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix: fix reponsivepair * fix * docs * test: remove unrelated case * feat: add gap fallback to responsivepair * fix: remove unsafe casting * test: add ResponsivePair stories * docs: changeset * feat(qvism-preset): add breakpoint helper for recipes Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> # Conflicts: # docs/stories/utils/parameters.ts # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

Add a composable Header component with Root/Left/Center/Right slots for web layouts. Uses global design tokens directly without rootage spec, following the pull-to-refresh pattern. Variants: tone (layer/transparent), divider (boolean) Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…ponent Add Primitive.header to react-primitive and refactor HeaderRoot to use withProvider instead of manual forwardRef + splitVariantProps pattern, fixing asChild prop leak and aligning with compound component conventions. Co-Authored-By: Claude Opus 4.6 <[email protected]>

Add 3 header block templates using ActionButton ghost variant: - header-1: simple logo + profile (seller center style) - header-2: logo + nav links + search/CTA (main site style) - header-3: logo + tab nav + utilities (business style) Also fix Header right slot alignment with margin-left: auto. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Block files export default `Header` instead of `Header1`/`Header2`/`Header3`. File numbering distinguishes templates; consumers use alias imports. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…tion - Replace inline Logo components with SVG logos from block-icons - Add block-icons.tsx shared library with 당근 brand logos - Create header.mdx with BlockPreview for header-1/2/3 - Add Blocks section to React docs navigation - Update registry-block.ts with proper snippets and dependencies Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…k build Inline Object.values(breakpoints) to avoid top-level const duplication caused by Storybook's webpack loader pipeline (react-docgen-loader). Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

The restore-keys prefix match was restoring outdated build artifacts (e.g., missing hideFrom type in Box component) causing CI failures. Only exact key matches should be used for build output cache. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

… errors The Next.js webpack cache was restoring stale TypeScript compilation results via restore-keys prefix match, causing type errors for newly added exports (hideFrom, FooterLinkText, useBreakpoint, etc.). Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…ale type errors" This reverts commit b7c2c97.

This reverts commit 889130a.

…ync-and-improve # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

…er-4 block - Replace tone: "layer" | "transparent" with transparent: true | false - Add header-4 block template demonstrating transparent header - Improve block descriptions to match footer naming convention - Regenerate CSS recipes Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…cks to zero-padded - Add HeaderActionButton recipe and React component - Add HeaderToggleButton recipe and React component (for future Menu integration) - Rename block IDs from header-1/2/3/4 to header-01/02/03/04 - Update block templates to use Header.ActionButton instead of generic ActionButton - Update header recipe: paddingX 24px, left/center/right gap 16px - Update MDX and registry to match new block naming - Regenerate CSS and registry Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…ttons - Use HStack with gap="x2" px="x4" for button containers in blocks - Add size="small" to all Header.ActionButton usages - Replace inline div styles with @seed-design/react layout components Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

…oggleButton - Add Header.Root size variant: medium (72px) / small (56px) - Remove layout variant from HeaderActionButton and HeaderToggleButton - Move suffixIcon size to size variant (small: 12px, medium: 14px) - Apply SuffixIcon with IconArrowUpRightFill in header-03 block Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

- Replace Daangn logos with inline placeholder SVG in header-01~03 - Wash header block copy to generic product names (SaaS, platform, B2B) - Keep header-04 as Daangn example with inlined logo SVG - Remove block-icons.tsx and its registry entry (no longer used by headers) Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

commit d1ad8aa Author: Joo Chanhwi <[email protected]> Date: Fri Apr 3 14:54:55 2026 +0900 refactor: refactor mode declaration & parsing; generate (#1399) * feat(rootage): add viewport-width token collection with mode descriptions Add viewport-width as a new TokenCollection axis (base/sm/md/lg/xl) for responsive design support. Also introduce ModeEntry type to allow optional descriptions on collection modes. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * refactor: simplify ModeDeclaration schema; fix consumers; implement basic css language for viewport-width * refactor * revert: revert collections description; generate --------- Co-authored-by: 정현수 <[email protected]> Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit c5e270b Author: 정현수 <[email protected]> Date: Fri Apr 3 11:10:18 2026 +0900 feat(rootage): add viewport-width token collection with mode descriptions (#1396) * feat(rootage): add viewport-width token collection with mode descriptions Add viewport-width as a new TokenCollection axis (base/sm/md/lg/xl) for responsive design support. Also introduce ModeEntry type to allow optional descriptions on collection modes. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * chore: bun install Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * refactor(rootage): unify ModeEntry type to object-only format Remove string support from ModeEntry type, requiring all modes to use { id: string; description?: string } format. This simplifies the parser logic by eliminating typeof string branching in token-collections.ts. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * docs(rootage): improve viewport-width mode descriptions Use orientation-aware language (세로/가로 모드) and consistent word pairs (좁은/넓은), fix 데스크탑 → 데스크톱 spelling. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit 2a881df Author: Joo Chanhwi <[email protected]> Date: Fri Apr 3 20:03:46 2026 +0900 chore: release alpha commit 8f8bd74 Author: Joo Chanhwi <[email protected]> Date: Fri Apr 3 19:59:08 2026 +0900 feat: breakpoint & responsive styling support (#1326) commit d0a224f Author: Joo Chanhwi <[email protected]> Date: Fri Apr 3 20:23:21 2026 +0900 chore: generate document index commit 14c7d11 Author: 정현수 <[email protected]> Date: Fri Apr 3 18:30:36 2026 +0900 feat(ci): add supply chain security analysis to Renovate dependency review (#1409) Add multi-layered supply chain attack detection to the Renovate dependency review workflow: - Pre-scan steps: install scripts check and audit before Claude analysis - New Claude prompt stages for install script inspection (step-2.5) and supply chain trust analysis (step-3.5) - Detect malicious patterns: env exfiltration, network requests, dynamic code execution, obfuscation - Package trust signals: download count, age, maintainer changes, typosquatting detection - Enhanced prompt injection defenses for untrusted external sources - Extended allowedTools for security-related commands - Security analysis tables in output format Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit b1942cf Author: Joo Chanhwi <[email protected]> Date: Fri Apr 3 14:15:18 2026 +0900 docs: remove V3 references and use Sprout/SEED naming (#1404) * docs: remove V3 changelog sections from component docs Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * docs: replace V2/V3 references with Sprout/SEED in migration and codemod docs Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * docs: rename V2/V3 table headers to 이전/SEED in migration components Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit 14f68c9 Author: Joo Chanhwi <[email protected]> Date: Thu Apr 2 17:02:55 2026 +0900 docs: update identity-placeholder assetstorage URLs (#1402) * docs: update identity-placeholder assetstorage URLs * docs: update identity-placeholder assetstorage URLs commit 5f0e089 Author: 정현수 <[email protected]> Date: Thu Apr 2 14:34:48 2026 +0900 fix(ci): replace workflow_dispatch with issue_comment trigger for renovate review (#1401) * fix(ci): replace workflow_dispatch with issue_comment trigger for renovate review The workflow_dispatch trigger caused failures because claude-code-action's track_progress option is not supported for that event type. Replace it with an issue_comment trigger (/renovate-review) following the same pattern as claude-code-review.yml. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): use commit SHA instead of branch ref for checkout Pin checkout to the exact commit SHA to prevent TOCTOU attacks where the branch could be updated between PR metadata lookup and checkout. Resolves CodeQL "Untrusted Checkout TOCTOU" and "Checkout of untrusted code in trusted context" alerts. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): add renovate branch guard and await reaction promises Address CodeRabbit review feedback: - Validate PR is renovate/* targeting dev before checkout (issue_comment path) - Add await to all createForIssueComment() calls to ensure proper error propagation Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): block fork PRs from triggering renovate review Add head.repo.full_name validation to prevent forked repositories from bypassing the renovate branch guard and accessing secrets through the issue_comment trigger path. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): add same-repo guard to pull_request path Ensure fork PRs with renovate/* branch names are also blocked in the pull_request trigger path, matching the issue_comment path's security. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit 25e58ae Author: 정현수 <[email protected]> Date: Wed Apr 1 16:43:16 2026 +0900 docs(mcp): add multi-tool quick install commands (#1400) * docs(mcp): add multi-tool quick install commands for Figma and Docs MCP Add copy-paste CLI commands for Claude Code, Codex CLI, Gemini CLI, and Claude Desktop to both Figma MCP and Docs MCP documentation. Figma MCP gets a new "Quick Install" section with PAT/WebSocket guidance upfront. Move --mode option docs to the server registration step where it contextually belongs. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(docs): fix bold markdown rendering for PAT text Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit b3c761d Author: 정현수 <[email protected]> Date: Wed Apr 1 14:51:18 2026 +0900 ci: add automated dependency analysis for Renovate PRs (#1398) * ci: add automated dependency analysis for Renovate PRs Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): address CodeRabbit review feedback for renovate workflow - Add concurrency group to cancel stale runs on synchronize - Replace gh pr comment with sticky comment mechanism to avoid duplicates - Add prompt injection defense for untrusted external content - Remove gh pr comment from allowedTools Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): strengthen prompt injection defense with explicit tool scoping Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * feat(ci): add /analyze-deps slash command trigger for renovate workflow Support manual triggering via PR comment `/analyze-deps` so existing PRs can be analyzed without needing a new push event. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): replace issue_comment with pull_request_target label trigger issue_comment runs in the base branch context with write permissions, making it vulnerable to untrusted code execution from PR branches. Switch to pull_request_target + label trigger instead — labels require repo write access, so only trusted collaborators can trigger analysis. The label is auto-removed after triggering to allow re-triggering. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> * fix(ci): pin action SHAs, remove id-token, use workflow_dispatch Address remaining CodeRabbit review feedback: - Pin actions/checkout and claude-code-action to commit SHAs - Remove unnecessary id-token: write permission - Replace pull_request_target with workflow_dispatch to avoid "checkout of untrusted code in trusted context" security warning Manual trigger: Actions tab → Run workflow → enter PR number. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]> commit cae744c Author: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Date: Tue Mar 31 10:59:01 2026 +0900 chore(deps): update dependency bun to v1.3.11 (#1360) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> commit 5d7a9df Author: 유세은 <[email protected]> Date: Mon Mar 30 20:34:17 2026 +0900 feat(docs): add per-package per-version changelog llms.txt routes (#1372) * feat(docs): add per-package per-version changelog llms.txt routes Add structured changelog endpoints for LLM consumption: - /llms/changelog/llms.txt — package index - /llms/changelog/{package}/llms.txt — version list + full changelog - /llms/changelog/{package}/{version}.txt — changes from that version onward Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(docs): extract changelog utils and move llms routes under /llms/react/updates/changelog - Extract shared changelog logic from use-changelog-viewer-data.ts into lib/changelog-data.ts (server+client) and lib/changelog-llms.ts (server) - Remove use-changelog-viewer-data.ts hook, use plain function import instead - Move per-package/version llms routes from /llms/changelog/ to /llms/react/updates/changelog/ for URL consistency - Dependency resolve in llms.txt output shows actual changes from referenced packages (e.g. [email protected] changes inline) Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(docs): add llms.txt link button to changelog filter bar Co-Authored-By: Claude Opus 4.6 <[email protected]> * feat(docs): make LLMs.txt button reflect changelog query params Replace static llms.txt link in filter bar with a dynamic ChangelogLLMOptions wrapper that reads ?package and ?version query params to resolve the correct llms.txt URL. Co-Authored-By: Claude Opus 4.6 <[email protected]> * fix(docs): wrap ChangelogLLMOptions in Suspense for useSearchParams Co-Authored-By: Claude Opus 4.6 <[email protected]> * fix(docs): remove duplicate v prefix and fix multiline list items in changelog llms.txt Co-Authored-By: Claude Opus 4.6 <[email protected]> * refactor(docs): extract shared changelog route helpers and clean up imports - Move toSlug, toPackageName, getSources to changelog-llms.ts - Merge duplicate EntryLookup import/re-export into single line - Add compareSemver to ResolveAndGroupParams type directly Co-Authored-By: Claude Opus 4.6 <[email protected]> * fix(docs): strip @seed-design/ prefix from changelog llms.txt URL slug Co-Authored-By: Claude Opus 4.6 <[email protected]> * fix(docs): sanitize version in changelog llms.txt URL path segments Encode version strings with encodeURIComponent to prevent route breakage from reserved characters in changelog headers. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>

junghyeonsu self-assigned this Mar 20, 2026

junghyeonsu changed the title ~~feat(react): add Header web container component~~ feat(react): Header Mar 20, 2026

junghyeonsu changed the title ~~feat(react): Header~~ feat(react): Header Mar 20, 2026

junghyeonsu force-pushed the junghyeonsu/header-component branch from 10641ed to 9513f74 Compare March 23, 2026 07:44

junghyeonsu force-pushed the junghyeonsu/header-component branch from 856568e to f3458b7 Compare March 24, 2026 02:56

chore: release alpha

d988335

te6-in and others added 4 commits March 26, 2026 17:29

chore: release alpha

f68692f

Merge branch 'alpha' of github.com:daangn/seed-design into alpha

7314bf4

bun install

fd8b4c2

junghyeonsu changed the base branch from dev to alpha March 26, 2026 08:54

junghyeonsu force-pushed the junghyeonsu/header-component branch from f3458b7 to 10a089a Compare March 26, 2026 08:54

junghyeonsu and others added 6 commits March 27, 2026 11:30

Merge branch 'dev' into alpha

6196df5

refactor(docs): unify Header block export names to Header

c5d2560

Block files export default `Header` instead of `Header1`/`Header2`/`Header3`. File numbering distinguishes templates; consumers use alias imports. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

fix(docs): resolve Header import name conflict in block templates

110cf8e

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

junghyeonsu and others added 2 commits March 27, 2026 11:32

feat(docs): add package-install commands to Header block MDX

9b3802f

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

junghyeonsu force-pushed the junghyeonsu/header-component branch from 91c7cbd to 9b3802f Compare March 27, 2026 02:32

junghyeonsu and others added 15 commits March 30, 2026 15:17

bun install

5af93c8

trigger docs deploy

ba9f6c2

Update README.md

88c652f

generate

1e7635a

Revert "fix(ci): remove restore-keys from Next.js cache to prevent st…

f582c2c

…ale type errors" This reverts commit b7c2c97.

Revert "fix(ci): remove restore-keys to prevent stale build cache"

0db0e3e

This reverts commit 889130a.

Merge remote-tracking branch 'origin/alpha' into junghyeonsu/header-s…

d7346a6

…ync-and-improve # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

te6-in force-pushed the alpha branch 3 times, most recently from f7abd57 to 6f2415a Compare April 7, 2026 09:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): `Header`#1375

feat(react): `Header`#1375
junghyeonsu wants to merge 30 commits intoalphafrom
junghyeonsu/header-component

junghyeonsu commented Mar 20, 2026

Uh oh!

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

Review skipped

Uh oh!

changeset-bot bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

malangcat commented Mar 23, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 •

edited

Loading

Uh oh!

malangcat commented Mar 24, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 •

edited

Loading

Uh oh!

malangcat commented Mar 25, 2026

Uh oh!

junghyeonsu commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

junghyeonsu commented Mar 20, 2026

Summary

Test plan

Uh oh!

coderabbitai bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

changeset-bot bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Docs)

Uh oh!

github-actions bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Stackflow SPA)

Uh oh!

github-actions bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Storybook)

Uh oh!

malangcat commented Mar 23, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

malangcat commented Mar 24, 2026

Uh oh!

junghyeonsu commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

malangcat commented Mar 25, 2026

Uh oh!

junghyeonsu commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

changeset-bot bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

junghyeonsu commented Mar 24, 2026 •

edited

Loading

junghyeonsu commented Mar 24, 2026 •

edited

Loading