chore: sync dev changes to main

[KYBee]

작업 배경

• dev 브랜치에 누적된 작업을 main 브랜치와 동기화하기 위한 PR입니다.
• dev -> main 병합 과정에서 발생한 충돌을 해결했습니다.

작업 내용

• 최신 main을 기준으로 최신 dev 변경사항 동기화
• 브랜치 간 충돌 해결
• 동기화 결과에 대한 패키지 정책 및 배포 가능성 검증

확인

• env CI=true mise exec -- pnpm install --frozen-lockfile
• mise exec -- pnpm lint
• mise exec -- pnpm test -- run
• mise exec -- pnpm typecheck
• mise exec -- pnpm build
• mise exec -- pnpm lint:publish
• git diff --check

[changeset-bot]

🦋 Changeset detected

Latest commit: 3de8949

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@sipe-team/accordion	Patch
@sipe-team/grid	Patch
@sipe-team/flex	Minor
@sipe-team/side	Patch
@sipe-team/avatar	Patch
@sipe-team/checkbox	Patch
@sipe-team/tokens	Minor
@sipe-team/reset	Patch
docs	Patch
@sipe-team/badge	Patch
@sipe-team/button	Patch
@sipe-team/card	Patch
@sipe-team/chip	Patch
@sipe-team/divider	Patch
@sipe-team/input	Patch
@sipe-team/radio	Patch
@sipe-team/skeleton	Patch
@sipe-team/switch	Patch
@sipe-team/theme	Patch
@sipe-team/typography	Patch

Not sure what this means? Click here to learn what changesets are.

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

[coderabbitai]

Walkthrough

The pull request adds publishability checks and release serialization, updates token and package build outputs, introduces responsive Flex props, fixes Avatar and Checkbox behavior, and adds a reusable documentation Preview component with new Accordion, Avatar, Button, Checkbox, and Typography guides.

Changes

Design system build and documentation

Layer / File(s)	Summary
Publishability and token build pipeline .github/workflows/*, package.json, packages/tokens/*, scripts/*, packages/*/tsup.config.ts	Package tarballs are validated with publint and attw; release runs are serialized; token CSS and declaration barrels are generated and exported; shared tsup configuration is adopted.
Component behavior and asset fixes packages/avatar/*, packages/checkbox/*, packages/button/*	Avatar fallback errors are prevented from recursively re-triggering, checkbox icons are embedded as data URIs, and checkbox default state uses the destructured prop.
Responsive Flex props and layout packages/flex/*	Flex layout and gap props accept sm, md, and lg values, with responsive CSS, Storybook coverage, and tests for overrides, nesting, and asChild.
Documentation site and component guides www/docs/components/*, www/src/components/Preview/*, www/docusaurus.config.ts, www/package.json	The site builds token styles and vanilla-extract files, adds an interactive Preview, and documents Accordion, Avatar, Button, Checkbox, and Typography.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• sipe-team/side#73: Related CSS styles.css package export changes.
• sipe-team/side#82: Introduces the Flex component extended by the responsive prop changes.
• sipe-team/side#287: Related token build pipeline and CSS export work.

Suggested labels: enhancement, documentation

Suggested reviewers: froggy1014

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the PR’s main purpose: syncing dev changes into main.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/sync-dev-to-main-kybee

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/avatar/src/Avatar.css.ts	100.00% <ø> (ø)
packages/avatar/src/Avatar.tsx	100.00% <100.00%> (ø)
packages/button/src/Button.test.tsx	100.00% <ø> (ø)
packages/checkbox/src/Checkbox.css.ts	100.00% <ø> (ø)
packages/checkbox/src/Checkbox.tsx	92.79% <100.00%> (ø)
packages/flex/src/Flex.css.ts	100.00% <ø> (ø)
packages/flex/src/Flex.test.tsx	100.00% <100.00%> (ø)
packages/flex/src/Flex.tsx	100.00% <100.00%> (ø)

🚀 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.

[coderabbitai]

Actionable comments posted: 11

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/checkbox/src/Checkbox.tsx (1)

52-62: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Cover the defaultChecked and controlled/uncontrolled paths.

The supplied packages/checkbox/src/Checkbox.test.tsx coverage only verifies the no-prop default false case. Add tests for defaultChecked={true}, controlled updates, and uncontrolled user changes.

As per path instructions, component tests must cover props, edge cases, and controlled/uncontrolled behavior.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/checkbox/src/Checkbox.tsx` around lines 52 - 62, Add coverage in
Checkbox.test.tsx for defaultChecked={true}, controlled checked updates, and
uncontrolled user interaction changes, using the Checkbox component’s existing
test patterns. Verify the initial and updated checked states for each path while
preserving the existing no-prop default-false coverage.

Source: Path instructions

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/ci.yaml:
- Around line 35-38: Update the workflow steps using actions/checkout and
jdx/mise-action to reference trusted full commit SHAs instead of mutable tags,
and add persist-credentials: false to the checkout step’s with configuration.
Preserve the existing pull-request head SHA ref behavior.

In @.storybook/preview.ts:
- Around line 4-7: Move the `@sipe-team/tokens/styles.css` import ahead of
external package imports in the Storybook preview module, keeping the prescribed
import-group ordering and a blank line separating it from the next group.

In `@packages/avatar/src/Avatar.tsx`:
- Around line 47-52: Add a regression test in Avatar.test.tsx for the Avatar
fallback flow: after the initial error swaps the source to fallback, dispatch a
second error on the same image and verify the fallback is not applied again.
Preserve the existing first-fallback assertion and exercise the onError handling
around the Avatar component.
- Around line 47-52: Replace the DOM onerror clearing in Avatar’s image error
handler with a ref or state guard that permits the fallback source to be
assigned only once. Reset this guard whenever the image src changes, and
preserve the existing fallback assignment behavior without relying on
currentTarget.onerror.

In `@packages/checkbox/src/Checkbox.css.ts`:
- Around line 47-52: Update CHECK_ICON_URL and INDETERMINATE_ICON_URL to remove
the hardcoded white SVG fill and use the approved theme-aware token-backed mask
or background color approach. Preserve both icon shapes and ensure their
rendered color resolves through the checkbox theme token contract.

In `@packages/flex/src/Flex.css.ts`:
- Around line 9-14: Update the mediaQuery definition in Flex.css.ts to import
and reuse the breakpoints/breakpointQuery contract from `@sipe-team/tokens`,
replacing the duplicated numeric media-query literals while preserving the
existing md and lg keys and generated query behavior.

In `@packages/flex/src/Flex.test.tsx`:
- Around line 253-280: Add a responsive breakpoint test near the existing “adds
responsive classes for md and lg breakpoint values” case that omits the middle
md value, such as align={{ sm: 'center', lg: 'flex-end' }}. Assert the generated
classes preserve sm and lg while leaving md unspecified so CSS cascade
inheritance remains responsible for the intermediate value, covering the
fallback behavior of getResponsiveClassNames/getResponsiveGapStyle.

In `@packages/tokens/config.js`:
- Around line 298-314: Update the generated declarations in barrelDts to add
local import type bindings for PrimitiveToken and SemanticToken before the
DesignToken alias, while preserving the existing extension-specific re-exports
and cssVar declaration.

In `@www/docs/components/avatar.mdx`:
- Around line 74-77: Update the API table entry for fallback in the avatar
documentation to describe its actual behavior: it supplies the replacement URL
when src fails, rather than being a general replacement image URL. Keep the
existing JSX fallback example and no-src text behavior unchanged.

In `@www/src/components/Preview/index.tsx`:
- Around line 17-37: Add Vitest and React Testing Library coverage for the
Preview component’s showCode behavior: assert the code is initially hidden, then
verify clicking the toggle reveals the code and updates the label, and clicking
again hides the code and restores the label. Configure the test to run in the
happy-dom environment and target the Preview component and its toggle button.

In `@www/src/components/Preview/styles.module.css`:
- Line 50: Update the Stylelint configuration for CSS Modules so the :global()
selector in .code :global(.theme-code-block) is recognized as valid, or add a
narrowly scoped suppression for this selector; preserve the existing styling
behavior and avoid disabling unrelated selector validation.

---

Outside diff comments:
In `@packages/checkbox/src/Checkbox.tsx`:
- Around line 52-62: Add coverage in Checkbox.test.tsx for
defaultChecked={true}, controlled checked updates, and uncontrolled user
interaction changes, using the Checkbox component’s existing test patterns.
Verify the initial and updated checked states for each path while preserving the
existing no-prop default-false coverage.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: ff32ffce-42d0-4142-8caf-b3df32661dfe

📥 Commits

Reviewing files that changed from the base of the PR and between 2d61377 and 3de8949.

⛔ Files ignored due to path filters (11)

• .changeset/accordion-grid-compile-styles.md is excluded by !.changeset/**
• .changeset/bright-flex-responsive.md is excluded by !.changeset/**
• .changeset/fix-avatar-error-loop-and-aschild.md is excluded by !.changeset/**
• .changeset/fix-checkbox-assets-and-controlled.md is excluded by !.changeset/**
• .changeset/fix-token-css-chain.md is excluded by !.changeset/**
• .changeset/reset-css-export-path.md is excluded by !.changeset/**
• .changeset/tokens-token-names-resolution.md is excluded by !.changeset/**
• packages/checkbox/src/public/check.svg is excluded by !**/*.svg
• packages/checkbox/src/public/indeterminate.svg is excluded by !**/*.svg
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !**/pnpm-lock.yaml
• www/static/img/avatar/sipe.png is excluded by !**/*.png

📒 Files selected for processing (34)

• .github/workflows/ci.yaml
• .github/workflows/release.yaml
• .github/workflows/tokens.yaml
• .storybook/preview.ts
• package-policy.json
• package.json
• packages/accordion/tsup.config.ts
• packages/avatar/src/Avatar.css.ts
• packages/avatar/src/Avatar.tsx
• packages/button/src/Button.test.tsx
• packages/checkbox/src/Checkbox.css.ts
• packages/checkbox/src/Checkbox.tsx
• packages/flex/src/Flex.css.ts
• packages/flex/src/Flex.stories.tsx
• packages/flex/src/Flex.test.tsx
• packages/flex/src/Flex.tsx
• packages/grid/tsup.config.ts
• packages/reset/package.json
• packages/tokens/config.js
• packages/tokens/package.json
• packages/tokens/tsup.config.ts
• scripts/checkPackageConsistency.ts
• scripts/checkPublishability.sh
• www/docs/components/_TEMPLATE.md
• www/docs/components/accordion.mdx
• www/docs/components/avatar.mdx
• www/docs/components/button.mdx
• www/docs/components/checkbox.mdx
• www/docs/components/typography.mdx
• www/docusaurus.config.ts
• www/package.json
• www/src/components/Preview/index.tsx
• www/src/components/Preview/styles.module.css
• www/src/theme/MDXComponents.tsx

💤 Files with no reviewable changes (1)

• packages/button/src/Button.test.tsx

[coderabbitai]

🔒 Security & Privacy | 🟠 Major | ⚡ Quick win

Pin action revisions and disable checkout credential persistence.

This job executes PR-controlled package lifecycle code. Pin both actions to trusted full commit SHAs and set persist-credentials: false; the job does not need Git credentials after checkout.

Suggested hardening

-    - uses: actions/checkout@v4
+    - uses: actions/checkout@<trusted-full-commit-sha>
       with:
         ref: ${{ github.event.pull_request.head.sha }}
-    - uses: jdx/mise-action@v2
+        persist-credentials: false
+    - uses: jdx/mise-action@<trusted-full-commit-sha>

🧰 Tools

🪛 zizmor (1.26.1)

[warning] 35-37: credential persistence through GitHub Actions artifacts (artipacked): does not set persist-credentials: false

(artipacked)

---

[error] 35-35: unpinned action reference (unpinned-uses): action is not pinned to a hash (required by blanket policy)

(unpinned-uses)

---

[error] 38-38: unpinned action reference (unpinned-uses): action is not pinned to a hash (required by blanket policy)

(unpinned-uses)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/ci.yaml around lines 35 - 38, Update the workflow steps
using actions/checkout and jdx/mise-action to reference trusted full commit SHAs
instead of mutable tags, and add persist-credentials: false to the checkout
step’s with configuration. Preserve the existing pull-request head SHA ref
behavior.

Source: Linters/SAST tools

[coderabbitai]

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Move the scoped token import before external imports.

@sipe-team/* imports must precede external packages and be separated by a blank line.

Suggested import order

+// Defines the `--side-*` custom properties that components reference. Without this the
+// vanilla-extract bridge resolves to undefined vars and spacing/radius/typography collapse.
+import '`@sipe-team/tokens/styles.css`';
+
 import 'sanitize.css';
 import 'sanitize.css/typography.css';
-
-// Defines the `--side-*` custom properties that components reference. Without this the
-// vanilla-extract bridge resolves to undefined vars and spacing/radius/typography collapse.
-import '`@sipe-team/tokens/styles.css`';

As per coding guidelines, **/*.{ts,tsx} files must use import order: node → react → @sipe-team/* → @vanilla-extract/* → @radix-ui/* → external packages → relative paths, with blank lines between groups.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.storybook/preview.ts around lines 4 - 7, Move the
`@sipe-team/tokens/styles.css` import ahead of external package imports in the
Storybook preview module, keeping the prescribed import-group ordering and a
blank line separating it from the next group.

Source: Coding guidelines

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add a regression test for a failing fallback.

The supplied packages/avatar/src/Avatar.test.tsx case only validates the first fallback swap. Add coverage that dispatches a second error and verifies the fallback is not applied repeatedly.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/avatar/src/Avatar.tsx` around lines 47 - 52, Add a regression test
in Avatar.test.tsx for the Avatar fallback flow: after the initial error swaps
the source to fallback, dispatch a second error on the same image and verify the
fallback is not applied again. Preserve the existing first-fallback assertion
and exercise the onError handling around the Avatar component.

Source: Path instructions

---

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Locate Avatar.tsx and related tests"
git ls-files | rg '(^|/)Avatar\.tsx$|avatar|Avatar' || true

echo
echo "Inspect packages/avatar/src/Avatar.tsx"
if [ -f packages/avatar/src/Avatar.tsx ]; then
  nl -ba packages/avatar/src/Avatar.tsx | sed -n '1,140p'
fi

echo
echo "Search for Avatar tests/usages"
rg -n "Avatar|fallback|onError|src =" packages -g '*.tsx' -g '*.ts' -g '*.test.*' || true

echo
echo "Package/dependency versions or React usage hints"
for f in package.json packages/*/package.json pnpm-lock.yaml package-lock.json yarn.lock; do
  [ -f "$f" ] && echo "--- $f" && rg -n '"react"|"react-dom"|react-dom-bindings|`@types/react`' "$f" -C 1 || true
done

Repository: sipe-team/side

Length of output: 732

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Inspect packages/avatar/src/Avatar.tsx"
if [ -f packages/avatar/src/Avatar.tsx ]; then
  awk '{printf "%6d\t%s\n", NR, $0}' packages/avatar/src/Avatar.tsx | sed -n '1,160p'
fi

echo
echo "Search for Avatar tests/usages"
rg -n "Avatar|fallback|onError|src =" packages -g '*.tsx' -g '*.ts' -g '*.test.*' || true

echo
echo "Package/dependency versions or React usage hints"
for f in package.json packages/*/package.json pnpm-lock.yaml package-lock.json yarn.lock; do
  [ -f "$f" ] && echo "--- $f" && rg -n '"react"|"react-dom"|react-dom-bindings|`@types/react`' "$f" -C 1 || true
done

Repository: sipe-team/side

Length of output: 45850

---

🌐 Web query:

React DOM event handlers addEventListener vs removing assigned onerror property

💡 Result:

In React applications, the distinction between using React event handlers and native DOM event listeners (such as setting an onerror property or using addEventListener) centers on how React manages the DOM [1][2][3]. React Event Handlers vs. Native Listeners React does not attach native event listeners directly to every JSX element [4][3]. Instead, it uses a technique called event delegation: React attaches a small set of listeners to the root container of your application [1][4][3]. When a native event bubbles up to the root, React catches it, wraps it in a cross-browser "SyntheticEvent," and dispatches it to the appropriate React component based on the fiber tree [5][1][4]. 1. React Event Handlers (e.g., onClick, onChange): These should be your default choice [2]. They are automatically cleaned up when components unmount, provide a normalized API across all browsers, and integrate seamlessly with React's scheduling and state management [5][6][3]. 2. Native DOM Listeners (e.g., element.onerror, addEventListener): If you assign a function directly to an element property like onerror, or use addEventListener on a DOM node in a useEffect hook, you are bypassing React's event system [1][2]. Key Risks and Considerations: - Manual Management: Native listeners are not managed by React. You must manually add them (usually in a useEffect hook) and remove them (in the cleanup function) to avoid memory leaks [7][3]. - Event Bubbling Discrepancies: React’s SyntheticEvents only bubble through the React component tree [1][4]. Stopping propagation in a React handler (e.g., e.stopPropagation) does not prevent the event from reaching native listeners attached to the DOM [2][4]. - Global Exceptions (window.onerror): While React handlers manage UI interactions, global error reporting often relies on native window listeners [8]. For example, window.onerror is a legacy property that handles synchronous runtime errors, while window.addEventListener('error', ..., true) is required to catch resource loading errors (like failed images or scripts) that do not bubble [9][8]. Recommendation Always use React’s built-in event handlers for application logic [2]. Use native listeners only when absolutely necessary—such as for global browser events (e.g., window resize, scroll on the document) or specific DOM requirements that React does not expose—and ensure you always clean them up in the appropriate lifecycle hook [1][3].

Citations:

• 1: https://interviewlane.com/questions/how-do-react-synthetic-events-differ-from-native-dom-events
• 2: https://ryankubik.com/blog/dont-mix-react-synthetic-and-native-events
• 3: https://frontendatlas.com/react/trivia/react-why-event-delegation
• 4: https://interviewlane.com/questions/how-does-react-handle-event-delegation
• 5: https://legacy.reactjs.org/docs/events.html
• 6: https://quarterly.dev/article/synthetic-events-in-react
• 7: https://stackoverflow.com/questions/37933733/is-assigning-a-function-to-window-onerror-preferable-to-window-addeventlistener
• 8: https://js-error.com/core-javascript-error-handling-boundaries/mastering-windowonerror-and-global-event-listeners/
• 9: https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event

---

Do not rely on currentTarget.onerror = null to stop React’s handler.

React attaches the JSX onError through its event system, so clearing the DOM onerror property leaves the React listener registered. If the fallback also fails, the handler can run again and assign the same broken source repeatedly.

Use a ref/state guard so the fallback image is attempted only once and reset the guard when src changes.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/avatar/src/Avatar.tsx` around lines 47 - 52, Replace the DOM onerror
clearing in Avatar’s image error handler with a ref or state guard that permits
the fallback source to be assigned only once. Reset this guard whenever the
image src changes, and preserve the existing fallback assignment behavior
without relying on currentTarget.onerror.

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Use a theme-aware token for the checkbox icon color.

Both inline SVGs hardcode fill='white', bypassing the token contract and potentially producing poor contrast in light or custom themes. Use a token-backed CSS mask/background approach or another approved theme-aware icon color.

As per coding guidelines, source files must not hardcode color values; as per path instructions, checkbox styles must remain theme-aware and avoid hardcoded colors.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/checkbox/src/Checkbox.css.ts` around lines 47 - 52, Update
CHECK_ICON_URL and INDETERMINATE_ICON_URL to remove the hardcoded white SVG fill
and use the approved theme-aware token-backed mask or background color approach.
Preserve both icon shapes and ensure their rendered color resolves through the
checkbox theme token contract.

Sources: Coding guidelines, Path instructions

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check whether `@sipe-team/tokens` currently exposes any breakpoint-related tokens,
# and whether other packages hardcode the same 780px/1060px values.
rg -n "breakpoint" packages/tokens -i
rg -n "780px|1060px" packages -g '!**/Flex.css.ts'

Repository: sipe-team/side

Length of output: 1081

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== tokens breakpoint exports =="
sed -n '1,80p' packages/tokens/src/layout/breakpoints.ts
echo
sed -n '1,80p' packages/tokens/src/layout/index.ts
echo
sed -n '1,80p' packages/tokens/src/layout/responsiveStyle.ts
echo

echo "== Flex.css.ts context =="
sed -n '1,220p' packages/flex/src/Flex.css.ts
echo

echo "== package metadata exports for tokens =="
for f in packages/tokens/package.json package.json; do
  if [ -f "$f" ]; then
    echo "-- $f --"
    cat "$f" | sed -n '1,180p'
  fi
done

Repository: sipe-team/side

Length of output: 9451

---

Use the token breakpoint contract instead of copying numeric breakpoints.

@sipe-team/tokens exposes breakpoints and breakpointQuery, and breakpointQuery already generates the same 780px/1060px media queries. Import and reuse those values instead of duplicating broken literals locally.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/flex/src/Flex.css.ts` around lines 9 - 14, Update the mediaQuery
definition in Flex.css.ts to import and reuse the breakpoints/breakpointQuery
contract from `@sipe-team/tokens`, replacing the duplicated numeric media-query
literals while preserving the existing md and lg keys and generated query
behavior.

Sources: Coding guidelines, Path instructions

[coderabbitai]

📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add coverage for partial breakpoint definitions (skipping a breakpoint).

All new responsive tests always supply sm, md, and lg together. The trickiest part of getResponsiveClassNames/getResponsiveGapStyle is the cascade when a middle breakpoint is omitted (e.g. align={{ sm: 'center', lg: 'flex-end' }} with no md) — no test currently locks in that md correctly falls through to the inherited sm/CSS-cascade value instead of being forced to a default. A future refactor could silently break that fallback without failing any test.

As per path instructions, "packages/*/src/*.test.tsx: ... Testing component variants, props, and edge cases."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/flex/src/Flex.test.tsx` around lines 253 - 280, Add a responsive
breakpoint test near the existing “adds responsive classes for md and lg
breakpoint values” case that omits the middle md value, such as align={{ sm:
'center', lg: 'flex-end' }}. Assert the generated classes preserve sm and lg
while leaving md unspecified so CSS cascade inheritance remains responsible for
the intermediate value, covering the fallback behavior of
getResponsiveClassNames/getResponsiveGapStyle.

Source: Path instructions

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

pnpm exec tsc --noEmit --strict --module NodeNext --moduleResolution NodeNext packages/tokens/dist/ts/index.d.ts

Repository: sipe-team/side

Length of output: 623

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== repo files matching packages/tokens/config.js and dist ts =="
git ls-files | rg '(^|/)packages/tokens/config\.js$|packages/tokens/|dist/' | head -200

echo
echo "== config.js relevant lines =="
if [ -f packages/tokens/config.js ]; then
  nl -ba packages/tokens/config.js | sed -n '260,330p'
fi

echo
echo "== package outlines around token types =="
for f in $(git ls-files | rg 'packages/tokens/src/.*\.ts$'); do
  echo "-- $f --"
  rg 'export (?:interface|type|class|const) (PrimitiveToken|SemanticToken|# DesignToken|DesignToken|Primitive|Semantic)' "$f" || true
done

Repository: sipe-team/side

Length of output: 1262

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== packages/tokens/config.js relevant section =="
python3 - <<'PY'
from pathlib import Path
p = Path('packages/tokens/config.js')
lines = p.read_text().splitlines()
for i in range(250, 335):
    if 0 <= i < len(lines):
        print(f'{i+1:5}: {lines[i]}')
PY

echo
echo "== token type declarations =="
python3 - <<'PY'
import re
from pathlib import Path

for p in sorted(Path('packages/tokens/src').rglob('*.ts')):
    text = p.read_text()
    candidates = ['PrimitiveToken', 'SemanticToken', 'DesignToken', 'Primitive', 'Semantic']
    hits = [(i+1, line.strip()) for i, line in enumerate(text.splitlines()) if any(c in line for c in candidates) and not line.strip().startswith('//')]
    if hits:
        print(f'-- {p} --')
        for lineno, line in hits[:10]:
            print(f'{lineno:5}: {line}')
PY

echo
echo "== generated index d.ts behavior source check =="
python3 - <<'PY'
from pathlib import Path
config = Path('packages/tokens/config.js').read_text()
if 'barrelDts' not in config:
    print('barrelDts not found')
else:
    m = re.search(r'const barrelDts = \([^)]*\) =>[\s\S]*?\.join\(', config)
    print(m.group(0)[:1200] if m else 'not matched')
PY

Repository: sipe-team/side

Length of output: 3571

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== all PrimitiveToken/SemanticToken/DesignToken usages =="
python3 - <<'PY'
from pathlib import Path
for p in sorted(Path('.').rglob('*')):
    if not p.is_file():
        continue
    s = str(p)
    if '.git' in s.split('/',1)[0]:
        continue
    try:
        text = p.read_text()
    except Exception:
        continue
    if any(tok in text for tok in ('PrimitiveToken', 'SemanticToken', 'DesignToken')):
        print(f'-- {p} --')
        for i, line in enumerate(text.splitlines():
            if i < 1000 and any(tok in line for tok in ('PrimitiveToken', 'SemanticToken', 'DesignToken')):
                print(f'{i+1}: {line.strip()}')
PY

echo
echo "== package package.json =="
if [ -f packages/tokens/package.json ]; then
  python3 - <<'PY'
import json
from pathlib import Path
print(json.dumps(json.loads(Path('packages/tokens/package.json').read_text()), indent=2))
PY
fi

echo
echo "== TypeScript / tsup availability =="
command -v tsc || true
command -v tsup || true
if [ -f package.json ]; then
  python3 - <<'PY'
import json
p=json.load(open('package.json'))
print("scripts:", {k:p.get("scripts",{}).get(k) for k in ("build","dev","test") if k in p.get("scripts",{})})
print("dev deps:", {k:v for k,v in p.get("devDependencies",{}).items() if k in ("typescript","tsup","`@types/node`")})
PY
fi

Repository: sipe-team/side

Length of output: 360

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== all PrimitiveToken/SemanticToken/DesignToken usages =="
rg -n --glob '!*.lock' --glob '!dist/**' --glob '!node_modules/**' 'PrimitiveToken|SemanticToken|DesignToken' . || true

echo
echo "== package/package files relevant to token package =="
for f in package.json packages/tokens/package.json packages/tokens/tsconfig.json packages/tokens/tsup.config.ts; do
  if [ -f "$f" ]; then
    echo "-- $f --"
    cat -n "$f"
  fi
done

echo
echo "== TypeScript/tsup availability =="
command -v tsc || true
command -v tsup || true

echo
echo "== read-only TypeScript declaration shape probe =="
tmpdir="$(mktemp -d)"
cd "$tmpdir"
cat > primitive.d.ts <<'EOF'
export interface PrimitiveToken { kind: 'primitive'; value: string }
export declare const value: PrimitiveToken
EOF
cat > semantic.d.ts <<'EOF'
export interface SemanticToken { kind: 'semantic'; value: string }
export declare const value: SemanticToken
EOF
cat > index.d.ts <<'EOF'
/** Auto-generated — do not edit directly. */
export * from './primitive';
export * from './semantic';
export type DesignToken = PrimitiveToken | SemanticToken;
export declare function cssVar<T extends DesignToken>(token: T): `var(--${T})`;
EOF
if command -v tsc >/dev/null 2>&1; then
  tsc --noEmit --strict --module NodeNext --moduleResolution NodeNext index.d.ts || true
else
  echo "tsc unavailable; skipped"
fi

Repository: sipe-team/side

Length of output: 6672

---

Bind the re-exported token types before using them.

export * from ... does not introduce local PrimitiveToken and SemanticToken bindings, so the generated DesignToken declaration can fail with Cannot find name .... Add import type declarations for the used tokens before defining DesignToken.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/tokens/config.js` around lines 298 - 314, Update the generated
declarations in barrelDts to add local import type bindings for PrimitiveToken
and SemanticToken before the DesignToken alias, while preserving the existing
extension-specific re-exports and cssVar declaration.

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
ast-grep outline packages/avatar/src/Avatar.tsx --items all
rg -n -C 8 'fallback|onError|<img' packages/avatar/src/Avatar.tsx

Repository: sipe-team/side

Length of output: 2354

---

🏁 Script executed:

#!/bin/bash
sed -n '1,150p' www/docs/components/avatar.mdx

Repository: sipe-team/side

Length of output: 4819

---

Align fallback’s documented behavior.

The JSX fallback example and no-src text behavior are accurate, but the API table says fallback is a replacement image URL if src fails. That is wrong: current behavior replaces src with fallback on error, and the table should describe it as either that replacement URL or remove the misleading “replacement image URL” wording.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@www/docs/components/avatar.mdx` around lines 74 - 77, Update the API table
entry for fallback in the avatar documentation to describe its actual behavior:
it supplies the replacement URL when src fails, rather than being a general
replacement image URL. Keep the existing JSX fallback example and no-src text
behavior unchanged.

[coderabbitai]

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Add coverage for the code-toggle behavior.

This new stateful component has no accompanying test. Cover the initial hidden state and both toggle transitions with Vitest and React Testing Library in happy-dom.

As per coding guidelines, “Add or update Vitest coverage for all behavior changes” and “Write component tests with Vitest and @testing-library/react in happy-dom environment.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@www/src/components/Preview/index.tsx` around lines 17 - 37, Add Vitest and
React Testing Library coverage for the Preview component’s showCode behavior:
assert the code is initially hidden, then verify clicking the toggle reveals the
code and updates the label, and clicking again hides the code and restores the
label. Configure the test to run in the happy-dom environment and target the
Preview component and its toggle button.

Source: Coding guidelines

[coderabbitai]

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Resolve the Stylelint error for the CSS Modules selector.

Line 50 triggers selector-pseudo-class-no-unknown. Configure Stylelint for CSS Modules syntax, or locally suppress this known-valid :global() selector.

Proposed local suppression

+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 .code :global(.theme-code-block) {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	.code :global(.theme-code-block) {
	/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
	.code :global(.theme-code-block) {

🧰 Tools

🪛 Stylelint (17.14.0)

[error] 50-50: Unknown pseudo-class selector ":global" (selector-pseudo-class-no-unknown)

(selector-pseudo-class-no-unknown)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@www/src/components/Preview/styles.module.css` at line 50, Update the
Stylelint configuration for CSS Modules so the :global() selector in .code
:global(.theme-code-block) is recognized as valid, or add a narrowly scoped
suppression for this selector; preserve the existing styling behavior and avoid
disabling unrelated selector validation.

Source: Linters/SAST tools