sh-ui-cli 0.85.1 → 0.86.1

package/templates/vite-standalone/_arch/flat/src/lib/styles/tokens.css

@@ -0,0 +1,203 @@
+/* Generated by @sh-ui/tokens — do not edit directly */
+/* base=neutral radius=md mode=light-dark */
+
+/* sh-ui:theme-colors-start */
+:root {
+  --background: #FFFFFF;
+  --background-subtle: #FAFAFA;
+  --background-muted: #F5F5F5;
+  --background-inverse: #0A0A0A;
+  --foreground: #0A0A0A;
+  --foreground-muted: #525252;
+  --foreground-subtle: #A3A3A3;
+  --foreground-inverse: #FFFFFF;
+  --border: #E5E5E5;
+  --border-strong: #D4D4D4;
+  --primary: #171717;
+  --primary-foreground: #FAFAFA;
+  --primary-hover: #262626;
+  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
+  --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+  --danger-foreground: #FFFFFF;
+  --success: #16A34A;
+  --success-foreground: #FFFFFF;
+  --warning: #D97706;
+  --warning-foreground: #FFFFFF;
+  --info: #2563EB;
+  --info-foreground: #FFFFFF;
+  --sidebar-bg: #FAFAFA;
+  --sidebar-fg: #0A0A0A;
+  --sidebar-border: #E5E5E5;
+  --sidebar-accent: #F5F5F5;
+  --sidebar-accent-fg: #0A0A0A;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark) {
+    --background: #0A0A0A;
+    --background-subtle: #171717;
+    --background-muted: #262626;
+    --background-inverse: #FFFFFF;
+    --foreground: #FAFAFA;
+    --foreground-muted: #A3A3A3;
+    --foreground-subtle: #737373;
+    --foreground-inverse: #0A0A0A;
+    --border: #262626;
+    --border-strong: #404040;
+    --primary: #FAFAFA;
+    --primary-foreground: #171717;
+    --primary-hover: #E5E5E5;
+    --danger: #DC2626;
+    --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+    --danger-foreground: #FFFFFF;
+    --success: #22C55E;
+    --success-foreground: #052E16;
+    --warning: #F59E0B;
+    --warning-foreground: #451A03;
+    --info: #3B82F6;
+    --info-foreground: #172554;
+    --sidebar-bg: #171717;
+    --sidebar-fg: #FAFAFA;
+    --sidebar-border: #262626;
+    --sidebar-accent: #262626;
+    --sidebar-accent-fg: #FAFAFA;
+  }
+}
+.dark {
+  --background: #0A0A0A;
+  --background-subtle: #171717;
+  --background-muted: #262626;
+  --background-inverse: #FFFFFF;
+  --foreground: #FAFAFA;
+  --foreground-muted: #A3A3A3;
+  --foreground-subtle: #737373;
+  --foreground-inverse: #0A0A0A;
+  --border: #262626;
+  --border-strong: #404040;
+  --primary: #FAFAFA;
+  --primary-foreground: #171717;
+  --primary-hover: #E5E5E5;
+  --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+  --danger-foreground: #FFFFFF;
+  --success: #22C55E;
+  --success-foreground: #052E16;
+  --warning: #F59E0B;
+  --warning-foreground: #451A03;
+  --info: #3B82F6;
+  --info-foreground: #172554;
+  --sidebar-bg: #171717;
+  --sidebar-fg: #FAFAFA;
+  --sidebar-border: #262626;
+  --sidebar-accent: #262626;
+  --sidebar-accent-fg: #FAFAFA;
+}
+/* sh-ui:theme-colors-end */
+
+:root {
+  /* sh-ui:theme-radius-start */
+  --radius: 0.5rem;
+  /* sh-ui:theme-radius-end */
+  /* sh-ui:theme-space-start */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  /* sh-ui:theme-space-end */
+  /* sh-ui:theme-text-start */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  /* sh-ui:theme-text-end */
+  /* sh-ui:theme-weight-start */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  /* sh-ui:theme-weight-end */
+  /* sh-ui:theme-shadow-start */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  /* sh-ui:theme-shadow-end */
+  /* sh-ui:theme-duration-start */
+  --duration-fast: 120ms;
+  --duration-base: 160ms;
+  --duration-slow: 200ms;
+  /* sh-ui:theme-duration-end */
+  /* sh-ui:theme-ease-start */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-ease-end */
+  /* sh-ui:theme-control-start */
+  --control-sm: 2rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.5rem;
+  /* sh-ui:theme-control-end */
+  /* sh-ui:theme-border-width-start */
+  --border-width: 1px;
+  --border-width-strong: 2px;
+  /* sh-ui:theme-border-width-end */
+  /* sh-ui:theme-gradient-start */
+  --gradient-primary: linear-gradient(135deg, #171717 0%, #525252 100%);
+  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
+  --gradient-overlay: linear-gradient(180deg, #000000 0%, #1F1F1F 100%);
+  /* sh-ui:theme-gradient-end */
+  --opacity-disabled: 0.5;
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-dropdown: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+  --z-tooltip: 700;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+}
+
+/* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    --control-sm: 2.75rem;
+    --control-md: 2.75rem;
+  }
+}
+
+/* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
+@media (prefers-contrast: high) {
+  :root {
+    --foreground-subtle: #767676;
+    --border: #767676;
+    --border-strong: #595959;
+  }
+  .dark {
+    --foreground-subtle: #B3B3B3;
+    --border: #757575;
+    --border-strong: #999999;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --foreground-subtle: #B3B3B3;
+      --border: #757575;
+      --border-strong: #999999;
+    }
+  }
+}

package/templates/vite-standalone/_arch/flat/src/lib/utils/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/vite-standalone/_arch/flat/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './lib/styles/globals.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/vite-standalone/_arch/flat/tsconfig.app.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2022",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/lib/*": ["./src/lib/*"],
+      "@/components/*": ["./src/components/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/vite-standalone/_arch/fsd/sh-ui.config.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://raw.githubusercontent.com/sanghyeonKim0201/sh-ui/live/packages/cli/sh-ui.schema.json",
+  "platform": "react",
+  "cssFramework": "tailwind",
+  "theme": {
+    "base": "neutral",
+    "radius": "md",
+    "mode": "light-dark"
+  },
+  "paths": {
+    "tokens": "src/shared/styles/tokens.css",
+    "cssEntry": "src/shared/styles/globals.css",
+    "styles": "src/shared/styles",
+    "components": "src/shared/ui",
+    "utils": "src/shared/lib/utils.ts"
+  },
+  "aliases": {
+    "components": "@/shared/ui",
+    "utils": "@/shared/lib/utils",
+    "ui": "@/shared/ui"
+  }
+}

package/templates/vite-standalone/_arch/fsd/src/App.tsx

@@ -0,0 +1,13 @@
+import { GlobalProvider } from '@/app/providers/GlobalProvider';
+import { RootLayout } from '@/app/layouts/RootLayout';
+import Home from './Home';
+
+export default function App() {
+  return (
+    <GlobalProvider>
+      <RootLayout>
+        <Home />
+      </RootLayout>
+    </GlobalProvider>
+  );
+}

package/templates/vite-standalone/_arch/fsd/src/app/layouts/RootLayout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+export function RootLayout({ children }: { children: ReactNode }) {
+  return <div className="min-h-screen bg-background text-foreground">{children}</div>;
+}

package/templates/vite-standalone/_arch/fsd/src/app/providers/GlobalProvider/index.tsx

@@ -0,0 +1,13 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { type ReactNode, useState } from 'react';
+import { createQueryClient } from '@/shared/api/queryClient';
+import { ThemeProvider } from '../theme/ThemeProvider';
+
+export function GlobalProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => createQueryClient());
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ThemeProvider>
+  );
+}

package/templates/vite-standalone/_arch/fsd/src/app/providers/theme/ThemeProvider.tsx

@@ -0,0 +1,59 @@
+import { createContext, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+type ThemeContextValue = {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const STORAGE_KEY = 'theme';
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function resolveTheme(theme: Theme): 'light' | 'dark' {
+  return theme === 'system' ? getSystemTheme() : theme;
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return 'system';
+    return (localStorage.getItem(STORAGE_KEY) as Theme) ?? 'system';
+  });
+
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => resolveTheme(theme));
+
+  useEffect(() => {
+    const resolved = resolveTheme(theme);
+    setResolvedTheme(resolved);
+    document.documentElement.classList.toggle('dark', resolved === 'dark');
+  }, [theme]);
+
+  useEffect(() => {
+    if (theme !== 'system') return;
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      const resolved = getSystemTheme();
+      setResolvedTheme(resolved);
+      document.documentElement.classList.toggle('dark', resolved === 'dark');
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [theme]);
+
+  const setTheme = useCallback((next: Theme) => {
+    setThemeState(next);
+    if (next === 'system') localStorage.removeItem(STORAGE_KEY);
+    else localStorage.setItem(STORAGE_KEY, next);
+  }, []);
+
+  const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}

package/templates/vite-standalone/_arch/fsd/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import '@/shared/styles/globals.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/vite-standalone/_arch/fsd/src/shared/api/queryClient.ts

@@ -0,0 +1,12 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+}

package/templates/vite-standalone/_arch/fsd/src/shared/hooks/useTheme.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ThemeContext } from '@/app/providers/theme/ThemeProvider';
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider');
+  return ctx;
+}

package/templates/vite-standalone/_arch/fsd/src/shared/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/vite-standalone/_arch/fsd/src/shared/styles/globals.css

@@ -0,0 +1,35 @@
+/* sh-ui:external-imports-start
+ *   외부 폰트 / 아이콘셋 / 디자인시스템 URL @import 는 반드시 이 블록 안에 둘 것. */
+/* sh-ui:external-imports-end */
+
+@import 'tailwindcss';
+@import './tokens.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-muted: var(--background-muted);
+  --color-background-inverse: var(--background-inverse);
+  --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
+  --color-foreground-inverse: var(--foreground-inverse);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-ring: var(--ring);
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-sidebar-bg: var(--sidebar-bg);
+}

package/templates/vite-standalone/_arch/fsd/src/shared/styles/tokens.css

@@ -0,0 +1,203 @@
+/* Generated by @sh-ui/tokens — do not edit directly */
+/* base=neutral radius=md mode=light-dark */
+
+/* sh-ui:theme-colors-start */
+:root {
+  --background: #FFFFFF;
+  --background-subtle: #FAFAFA;
+  --background-muted: #F5F5F5;
+  --background-inverse: #0A0A0A;
+  --foreground: #0A0A0A;
+  --foreground-muted: #525252;
+  --foreground-subtle: #A3A3A3;
+  --foreground-inverse: #FFFFFF;
+  --border: #E5E5E5;
+  --border-strong: #D4D4D4;
+  --primary: #171717;
+  --primary-foreground: #FAFAFA;
+  --primary-hover: #262626;
+  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
+  --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+  --danger-foreground: #FFFFFF;
+  --success: #16A34A;
+  --success-foreground: #FFFFFF;
+  --warning: #D97706;
+  --warning-foreground: #FFFFFF;
+  --info: #2563EB;
+  --info-foreground: #FFFFFF;
+  --sidebar-bg: #FAFAFA;
+  --sidebar-fg: #0A0A0A;
+  --sidebar-border: #E5E5E5;
+  --sidebar-accent: #F5F5F5;
+  --sidebar-accent-fg: #0A0A0A;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark) {
+    --background: #0A0A0A;
+    --background-subtle: #171717;
+    --background-muted: #262626;
+    --background-inverse: #FFFFFF;
+    --foreground: #FAFAFA;
+    --foreground-muted: #A3A3A3;
+    --foreground-subtle: #737373;
+    --foreground-inverse: #0A0A0A;
+    --border: #262626;
+    --border-strong: #404040;
+    --primary: #FAFAFA;
+    --primary-foreground: #171717;
+    --primary-hover: #E5E5E5;
+    --danger: #DC2626;
+    --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+    --danger-foreground: #FFFFFF;
+    --success: #22C55E;
+    --success-foreground: #052E16;
+    --warning: #F59E0B;
+    --warning-foreground: #451A03;
+    --info: #3B82F6;
+    --info-foreground: #172554;
+    --sidebar-bg: #171717;
+    --sidebar-fg: #FAFAFA;
+    --sidebar-border: #262626;
+    --sidebar-accent: #262626;
+    --sidebar-accent-fg: #FAFAFA;
+  }
+}
+.dark {
+  --background: #0A0A0A;
+  --background-subtle: #171717;
+  --background-muted: #262626;
+  --background-inverse: #FFFFFF;
+  --foreground: #FAFAFA;
+  --foreground-muted: #A3A3A3;
+  --foreground-subtle: #737373;
+  --foreground-inverse: #0A0A0A;
+  --border: #262626;
+  --border-strong: #404040;
+  --primary: #FAFAFA;
+  --primary-foreground: #171717;
+  --primary-hover: #E5E5E5;
+  --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+  --danger-foreground: #FFFFFF;
+  --success: #22C55E;
+  --success-foreground: #052E16;
+  --warning: #F59E0B;
+  --warning-foreground: #451A03;
+  --info: #3B82F6;
+  --info-foreground: #172554;
+  --sidebar-bg: #171717;
+  --sidebar-fg: #FAFAFA;
+  --sidebar-border: #262626;
+  --sidebar-accent: #262626;
+  --sidebar-accent-fg: #FAFAFA;
+}
+/* sh-ui:theme-colors-end */
+
+:root {
+  /* sh-ui:theme-radius-start */
+  --radius: 0.5rem;
+  /* sh-ui:theme-radius-end */
+  /* sh-ui:theme-space-start */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  /* sh-ui:theme-space-end */
+  /* sh-ui:theme-text-start */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  /* sh-ui:theme-text-end */
+  /* sh-ui:theme-weight-start */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  /* sh-ui:theme-weight-end */
+  /* sh-ui:theme-shadow-start */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  /* sh-ui:theme-shadow-end */
+  /* sh-ui:theme-duration-start */
+  --duration-fast: 120ms;
+  --duration-base: 160ms;
+  --duration-slow: 200ms;
+  /* sh-ui:theme-duration-end */
+  /* sh-ui:theme-ease-start */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-ease-end */
+  /* sh-ui:theme-control-start */
+  --control-sm: 2rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.5rem;
+  /* sh-ui:theme-control-end */
+  /* sh-ui:theme-border-width-start */
+  --border-width: 1px;
+  --border-width-strong: 2px;
+  /* sh-ui:theme-border-width-end */
+  /* sh-ui:theme-gradient-start */
+  --gradient-primary: linear-gradient(135deg, #171717 0%, #525252 100%);
+  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
+  --gradient-overlay: linear-gradient(180deg, #000000 0%, #1F1F1F 100%);
+  /* sh-ui:theme-gradient-end */
+  --opacity-disabled: 0.5;
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-dropdown: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+  --z-tooltip: 700;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+}
+
+/* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    --control-sm: 2.75rem;
+    --control-md: 2.75rem;
+  }
+}
+
+/* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
+@media (prefers-contrast: high) {
+  :root {
+    --foreground-subtle: #767676;
+    --border: #767676;
+    --border-strong: #595959;
+  }
+  .dark {
+    --foreground-subtle: #B3B3B3;
+    --border: #757575;
+    --border-strong: #999999;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --foreground-subtle: #B3B3B3;
+      --border: #757575;
+      --border-strong: #999999;
+    }
+  }
+}

package/templates/vite-standalone/_arch/fsd/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2022",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}