sh-ui-cli 0.84.0 → 0.85.1

package/data/changelog/versions.json

@@ -2,6 +2,31 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.85.1",
+      "date": "2026-05-13",
+      "title": "scaffold globals.css 에 external-imports sentinel — 폰트/디자인시스템 URL @import footgun 차단",
+      "type": "patch",
+      "highlights": [
+        "**4개 globals.css 템플릿에 `sh-ui:external-imports-start/-end` sentinel 블록 추가** — `@import 'tailwindcss'` 위에 명시적으로 외부 URL `@import` 자리 표시. 기존엔 사용자가 `@import 'tailwindcss'` 바로 아래에 폰트 URL `@import` 추가하면 (자연 직관) CSS spec (\"모든 `@import` 는 다른 rule 보다 앞에 와야 함\") 위반으로 Turbopack/lightningcss 가 `@import rules must precede all rules aside from @charset and @layer statements` 로 dev server 즉사. 라인 번호가 번들 후 (2874:8 류) 라 디버깅 동선이 길어 첫 인상에서 30분 헤매던 footgun.",
+        "**적용 범위**: `ui-app-template/src/styles/globals.css` (monorepo) · `nextjs-standalone/app/globals.css` (standalone fsd 의 베이스) · `nextjs-standalone/_arch/flat/app/globals.css` · `nextjs-standalone/_arch/mes/app/globals.css`. sentinel 안에 `@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');` 류 예시도 주석으로 포함 — 새 사용자가 어디에 둘지 한눈에 발견.",
+        "**기존 프로젝트 마이그레이션은 별도 codemod 로 후속** — 현재는 신규 스캐폴드에만 sentinel emit. 기존 globals.css 자동 수술은 `sh_ui_migrate` 명령에 추후 추가."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.85.1"
+    },
+    {
+      "version": "0.85.0",
+      "date": "2026-05-13",
+      "title": "Sidebar floating variant — --sidebar-floating-padding 토큰 + icon collapsed 폭 자동 보정",
+      "type": "minor",
+      "highlights": [
+        "**`--sidebar-floating-padding` 토큰 신설 (DX 3)** — floating variant 의 outer 카드 가장자리 spacing 이 `var(--space-2)` 하드코딩이라 사용자가 키우려고 outer padding override 시 inner 카드 height calc 가 추종 안 돼 하단이 잘리던 결함. outer padding · inner height(`100svh - 2 * floating-padding`) · inner top 모두 같은 변수 참조. `<SidebarProvider style={{ ['--sidebar-floating-padding']: '0.75rem' }}>` 으로 한 번에 조정.",
+        "**floating + icon collapsed 폭 자동 보정 (DX 2)** — outer aside 48px 에서 floating padding 16px 빼면 inner 카드가 32px 로 옹색해지던 결함. `[data-variant=\"floating\"][data-collapsible=\"icon\"]` 조합 시 outer width = `--sidebar-width-icon + 2 * --sidebar-floating-padding` 으로 자동 보정. inner usable 폭이 non-floating 의 48px 와 동일. 사용자가 매번 `--sidebar-width-icon` 을 inline style 로 보정하던 atlas 워크어라운드 일소.",
+        "**v0.82.2 changelog 정정** — 이전 \"알려진 이슈\" 로 기록한 `@base-ui/react@1.4.1` id mismatch 는 Base UI 결함이 **아니었음**. atlas 측 `zustand + persist` 미들웨어 (`useSyncExternalStore` 통합) 가 Next.js 16 streaming SSR 의 트리 일관성을 어긋나게 만들어 React `useId()` 가 인코딩하는 트리 path 가 server/client 에서 달라진 것. atlas 가 zustand 를 React Query (server state) + cookie-backed hook (client state) 로 대체하니 모든 hydration mismatch 즉시 해소. Base UI 1.4.1 그대로 사용 안전. v0.82.2 entry 의 알려진 이슈 줄 제거.",
+        "3 변종 모두 적용 — plain `styles.css` / module `styles.module.css` 의 floating 블록 + tailwind `sidebarRoot` 의 padding · innerWrap height/top. 모두 토큰의 fallback `var(--space-2)` 를 그대로 유지해 기존 동작 동일."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.85.0"
+    },
     {
       "version": "0.84.0",
       "date": "2026-05-13",
@@ -43,8 +68,7 @@
       "title": "RootLayout themeInitScript 가 'system' 케이스 누락하던 FOUC 결함 수정",
       "type": "patch",
       "highlights": [
-        "**RootLayout 의 FOUC 차단 inline script 가 `theme === 'system'` 케이스를 처리 안 해 새로고침 시 light → dark 깜빡임이 남던 결함 수정** — 기존 스크립트는 `t === 'dark'` 또는 `!t && system pref dark` 만 처리, `t === 'system'` 일 땐 next-themes 가 resolve 한 후에야 `.dark` 가 박혀 한 frame 흰 깜빡임. next-themes 의 `setTheme('system')` 호출 직후 localStorage 에 `'system'` 문자열이 들어가는데 이 케이스가 누락. matrix 정정: `'dark'` → `.dark`, `'light'` → none, `'system'`/unset → system pref 따라감. 6개 RootLayout 템플릿 (nextjs-app · nextjs-standalone × flat/mes/fsd) 일괄 수정.",
-        "**알려진 이슈 (이번 릴리즈 미반영)** — `@base-ui/react` 1.4.1 의 id 생성기가 Dialog/DropdownMenu/Popover Trigger 에서 server/client id 불일치로 hydration mismatch console error 발생. upstream 이슈 — 1.4.1 이 npm 최신이라 dep bump 로 해결 불가. 기능 영향은 없고 console error 만 뜸. 향후 Base UI 픽스 버전 나오면 peerDep 갱신."
+        "**RootLayout 의 FOUC 차단 inline script 가 `theme === 'system'` 케이스를 처리 안 해 새로고침 시 light → dark 깜빡임이 남던 결함 수정** — 기존 스크립트는 `t === 'dark'` 또는 `!t && system pref dark` 만 처리, `t === 'system'` 일 땐 next-themes 가 resolve 한 후에야 `.dark` 가 박혀 한 frame 흰 깜빡임. next-themes 의 `setTheme('system')` 호출 직후 localStorage 에 `'system'` 문자열이 들어가는데 이 케이스가 누락. matrix 정정: `'dark'` → `.dark`, `'light'` → none, `'system'`/unset → system pref 따라감. 6개 RootLayout 템플릿 (nextjs-app · nextjs-standalone × flat/mes/fsd) 일괄 수정."
       ],
       "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.82.2"
     },

package/data/registry/react/components/sidebar/index.tailwind.tsx

@@ -172,8 +172,10 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   collapsible?: "offcanvas" | "icon" | "none";
 }
 
+// v0.85.0+ — floating variant 의 outer padding + inner h/top 이 모두 --sidebar-floating-padding
+// 토큰 (default var(--space-2)) 을 추종. DX 2: floating+icon collapsed 시 outer width 자동 보정.
 const sidebarRoot =
-  "flex flex-col w-[var(--sidebar-width)] shrink-0 bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] border-r border-[var(--sidebar-border)] transition-[width] duration-[var(--duration-slow)] relative z-[5] data-[side=right]:border-r-0 data-[side=right]:border-l data-[side=right]:order-1 data-[state=collapsed]:data-[collapsible=offcanvas]:w-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-r-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-l-0 data-[state=collapsed]:data-[collapsible=offcanvas]:overflow-hidden data-[state=collapsed]:data-[collapsible=icon]:w-[var(--sidebar-width-icon)] data-[variant=floating]:border-none data-[variant=floating]:p-[var(--space-2)] data-[variant=floating]:bg-transparent data-[variant=inset]:bg-transparent data-[variant=inset]:border-none motion-reduce:transition-none";
+  "flex flex-col w-[var(--sidebar-width)] shrink-0 bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] border-r border-[var(--sidebar-border)] transition-[width] duration-[var(--duration-slow)] relative z-[5] data-[side=right]:border-r-0 data-[side=right]:border-l data-[side=right]:order-1 data-[state=collapsed]:data-[collapsible=offcanvas]:w-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-r-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-l-0 data-[state=collapsed]:data-[collapsible=offcanvas]:overflow-hidden data-[state=collapsed]:data-[collapsible=icon]:w-[var(--sidebar-width-icon)] data-[state=collapsed]:data-[collapsible=icon]:data-[variant=floating]:w-[calc(var(--sidebar-width-icon)+2*var(--sidebar-floating-padding,var(--space-2)))] data-[variant=floating]:border-none data-[variant=floating]:p-[var(--sidebar-floating-padding,var(--space-2))] data-[variant=floating]:bg-transparent data-[variant=inset]:bg-transparent data-[variant=inset]:border-none motion-reduce:transition-none";
 
 export function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: SidebarProps) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -198,7 +200,7 @@ export function Sidebar({ side = "left", variant = "sidebar", collapsible = "off
 
   const innerWrap =
     variant === "floating"
-      ? "flex flex-col h-[calc(100svh-1rem)] sticky top-[var(--space-2)] overflow-hidden border border-[var(--sidebar-border)] rounded-[var(--radius)] bg-[var(--sidebar-bg)]"
+      ? "flex flex-col h-[calc(100svh-2*var(--sidebar-floating-padding,var(--space-2)))] sticky top-[var(--sidebar-floating-padding,var(--space-2))] overflow-hidden border border-[var(--sidebar-border)] rounded-[var(--radius)] bg-[var(--sidebar-bg)]"
       : "flex flex-col h-[100svh] sticky top-0 overflow-hidden";
 
   return wrap(

package/data/registry/react/components/sidebar/styles.css

@@ -83,18 +83,26 @@
   padding: var(--space-2);
 }
 
-/* variant: floating */
+/* variant: floating
+ * --sidebar-floating-padding (v0.85.0+) — 카드 가장자리 spacing. SidebarProvider 에
+ *   inline style 로 덮어쓰면 outer padding + inner height/top 자동 추종.
+ *   기본 var(--space-2). */
 .sh-ui-sidebar[data-variant="floating"] {
   border: none;
-  padding: var(--space-2);
+  padding: var(--sidebar-floating-padding, var(--space-2));
   background: transparent;
 }
 .sh-ui-sidebar[data-variant="floating"] .sh-ui-sidebar__inner {
   border: 1px solid var(--sidebar-border);
   border-radius: var(--radius);
   background: var(--sidebar-bg);
-  height: calc(100svh - 1rem);
-  top: var(--space-2);
+  height: calc(100svh - 2 * var(--sidebar-floating-padding, var(--space-2)));
+  top: var(--sidebar-floating-padding, var(--space-2));
+}
+/* DX 2 (v0.85.0+) — floating + icon collapsed 조합 시 outer width 자동 보정.
+ * outer = icon + 2 * floating-padding 으로 키워 inner usable 폭을 non-floating 과 동일하게 유지. */
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"][data-variant="floating"] {
+  width: calc(var(--sidebar-width-icon) + 2 * var(--sidebar-floating-padding, var(--space-2)));
 }
 
 /* variant: inset (메인 영역이 카드 형태) */

package/data/registry/react/components/sidebar/styles.module.css

@@ -83,18 +83,22 @@
   padding: var(--space-2);
 }
 
-/* variant: floating */
+/* variant: floating — --sidebar-floating-padding (v0.85.0+) cascaded variable */
 .sidebar[data-variant="floating"] {
   border: none;
-  padding: var(--space-2);
+  padding: var(--sidebar-floating-padding, var(--space-2));
   background: transparent;
 }
 .sidebar[data-variant="floating"] .sidebar__inner {
   border: 1px solid var(--sidebar-border);
   border-radius: var(--radius);
   background: var(--sidebar-bg);
-  height: calc(100svh - 1rem);
-  top: var(--space-2);
+  height: calc(100svh - 2 * var(--sidebar-floating-padding, var(--space-2)));
+  top: var(--sidebar-floating-padding, var(--space-2));
+}
+/* DX 2 (v0.85.0+) — floating + icon outer width 자동 보정 */
+.sidebar[data-state="collapsed"][data-collapsible="icon"][data-variant="floating"] {
+  width: calc(var(--sidebar-width-icon) + 2 * var(--sidebar-floating-padding, var(--space-2)));
 }
 
 /* variant: inset (메인 영역이 카드 형태) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.84.0",
+  "version": "0.85.1",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/templates/nextjs-standalone/_arch/flat/app/globals.css

@@ -1,3 +1,9 @@
+/* sh-ui:external-imports-start
+ *   외부 폰트 / 아이콘셋 / 디자인시스템 URL @import 는 반드시 이 블록 안에 둘 것.
+ *   `@import 'tailwindcss'` 아래에 추가하면 CSS spec 위반으로 Turbopack 이 즉사.
+ *   예: @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); */
+/* sh-ui:external-imports-end */
+
 @import 'tailwindcss';
 @import '../lib/styles/tokens.css';
 

package/templates/nextjs-standalone/_arch/mes/app/globals.css

@@ -1,3 +1,9 @@
+/* sh-ui:external-imports-start
+ *   외부 폰트 / 아이콘셋 / 디자인시스템 URL @import 는 반드시 이 블록 안에 둘 것.
+ *   `@import 'tailwindcss'` 아래에 추가하면 CSS spec 위반으로 Turbopack 이 즉사.
+ *   예: @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); */
+/* sh-ui:external-imports-end */
+
 @import 'tailwindcss';
 @import '../src/lib/styles/tokens.css';
 

package/templates/nextjs-standalone/app/globals.css

@@ -1,3 +1,9 @@
+/* sh-ui:external-imports-start
+ *   외부 폰트 / 아이콘셋 / 디자인시스템 URL @import 는 반드시 이 블록 안에 둘 것.
+ *   `@import 'tailwindcss'` 아래에 추가하면 CSS spec 위반으로 Turbopack 이 즉사.
+ *   예: @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); */
+/* sh-ui:external-imports-end */
+
 @import 'tailwindcss';
 @import '../src/shared/styles/tokens.css';
 

package/templates/ui-app-template/src/styles/globals.css

@@ -1,3 +1,10 @@
+/* sh-ui:external-imports-start
+ *   외부 폰트 / 아이콘셋 / 디자인시스템 URL @import 는 반드시 이 블록 안에 둘 것.
+ *   `@import 'tailwindcss'` 아래에 추가하면 CSS spec ("모든 @import 는 다른 rule 보다
+ *   앞에 와야 함") 위반으로 Turbopack/lightningcss 가 parsing 거부 → dev server 즉사.
+ *   예: @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); */
+/* sh-ui:external-imports-end */
+
 @import 'tailwindcss';
 
 @source "../../../../../../apps/**/*.{ts,tsx}";