feat(app-shell): add render prop to AppShellRailItem

.github/workflows/ci.yml

@@ -18,8 +18,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - uses: actions/setup-node@v4
         with:
@@ -39,8 +37,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - uses: actions/setup-node@v4
         with:
@@ -60,8 +56,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - uses: actions/setup-node@v4
         with:
@@ -81,8 +75,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - uses: actions/setup-node@v4
         with:
@@ -108,8 +100,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - uses: actions/setup-node@v4
         with:

.prettierignore

@@ -0,0 +1,4 @@
+pnpm-lock.yaml
+bun.lock
+storybook-static
+*.log

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 100
+}

CLAUDE.md

@@ -44,17 +44,18 @@ packages/
 ### Component Organization
 
 Components in `packages/design-system/src/components/` follow atomic design:
+
 - `atoms/` - Basic building blocks (Button, Input, Badge, etc.)
 - `molecules/` - Combined components (Card, Tabs, Dialog, etc.)
 - `organisms/` - Complex sections (Sidebar, NavigationMenu, AppShell, etc.)
 
 ### Key Files
 
-| File | Purpose |
-|------|---------|
-| `packages/design-system/agents.md` | Component usage rules (MUST READ) |
-| `packages/design-system/src/styles/globals.css` | CSS variables, theming, dark mode |
-| `packages/design-system/lib/utils.ts` | `cn()` utility (clsx + tailwind-merge) |
+| File                                            | Purpose                                |
+| ----------------------------------------------- | -------------------------------------- |
+| `packages/design-system/agents.md`              | Component usage rules (MUST READ)      |
+| `packages/design-system/src/styles/globals.css` | CSS variables, theming, dark mode      |
+| `packages/design-system/lib/utils.ts`           | `cn()` utility (clsx + tailwind-merge) |
 
 ## Critical: Component Styling Rules
 
@@ -105,7 +106,7 @@ const buttonVariants = cva('...', {
   variants: {
     variant: {
       // ... existing variants
-      warning: 'bg-yellow-500 text-white',  // Add new variant
+      warning: 'bg-yellow-500 text-white', // Add new variant
     },
   },
 });

README.md

@@ -28,14 +28,14 @@ This starts Storybook at http://localhost:6006
 
 ## Commands
 
-| Command | Description |
-|---------|-------------|
+| Command          | Description                |
+| ---------------- | -------------------------- |
 | `pnpm storybook` | Start Storybook dev server |
-| `pnpm build` | Build all packages |
-| `pnpm typecheck` | Type check all packages |
-| `pnpm lint` | Lint all packages |
-| `pnpm test` | Run tests |
-| `pnpm format` | Format code with Prettier |
+| `pnpm build`     | Build all packages         |
+| `pnpm typecheck` | Type check all packages    |
+| `pnpm lint`      | Lint all packages          |
+| `pnpm test`      | Run tests                  |
+| `pnpm format`    | Format code with Prettier  |
 
 ## Building
 

apps/example/eslint.config.mjs

@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -9,8 +9,6 @@ const compat = new FlatCompat({
   baseDirectory: __dirname,
 });
 
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')];
 
 export default eslintConfig;

apps/example/next.config.ts

@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   /* config options here */

apps/example/postcss.config.mjs

@@ -1,6 +1,6 @@
 const config = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
   },
 };
 

apps/example/src/app/(app)/controls/page.tsx

@@ -90,7 +90,7 @@ export default function ControlsPage() {
     return allControlCategories.filter(
       (category) =>
         category.name.toLowerCase().includes(query) ||
-        category.description.toLowerCase().includes(query)
+        category.description.toLowerCase().includes(query),
     );
   }, [searchQuery]);
 
@@ -107,8 +107,12 @@ export default function ControlsPage() {
 
       <Stack gap="4">
         <HStack gap="4">
-          <Badge>{passedControls} of {totalControls} controls passing</Badge>
-          <Badge variant="secondary">{totalControls > 0 ? Math.round((passedControls / totalControls) * 100) : 0}% complete</Badge>
+          <Badge>
+            {passedControls} of {totalControls} controls passing
+          </Badge>
+          <Badge variant="secondary">
+            {totalControls > 0 ? Math.round((passedControls / totalControls) * 100) : 0}% complete
+          </Badge>
         </HStack>
 
         <DataTableHeader>

apps/example/src/app/(app)/cybersecurity/page.tsx

@@ -48,9 +48,21 @@ const securityMetrics = [
 
 const recentThreats = [
   { id: 1, type: 'Phishing Attempt', severity: 'high', time: '2 hours ago', status: 'blocked' },
-  { id: 2, type: 'Suspicious Login', severity: 'medium', time: '5 hours ago', status: 'investigating' },
+  {
+    id: 2,
+    type: 'Suspicious Login',
+    severity: 'medium',
+    time: '5 hours ago',
+    status: 'investigating',
+  },
   { id: 3, type: 'Malware Detection', severity: 'high', time: '1 day ago', status: 'resolved' },
-  { id: 4, type: 'Data Exfiltration Attempt', severity: 'critical', time: '2 days ago', status: 'blocked' },
+  {
+    id: 4,
+    type: 'Data Exfiltration Attempt',
+    severity: 'critical',
+    time: '2 days ago',
+    status: 'blocked',
+  },
 ];
 
 export default function CybersecurityPage() {
@@ -63,16 +75,26 @@ export default function CybersecurityPage() {
           <Card key={metric.title}>
             <CardContent>
               <Stack gap="2">
-                <Text size="sm" variant="muted">{metric.title}</Text>
+                <Text size="sm" variant="muted">
+                  {metric.title}
+                </Text>
                 <HStack align="baseline" gap="xs">
-                  <Text size="lg" weight="semibold">{metric.value}</Text>
+                  <Text size="lg" weight="semibold">
+                    {metric.value}
+                  </Text>
                   {metric.suffix && <Text variant="muted">{metric.suffix}</Text>}
                 </HStack>
                 <HStack gap="1" align="center">
-                  {metric.status === 'good' && <CheckmarkFilled size={12} className="text-green-600" />}
+                  {metric.status === 'good' && (
+                    <CheckmarkFilled size={12} className="text-green-600" />
+                  )}
                   {metric.status === 'warning' && <Warning size={12} className="text-yellow-600" />}
-                  {metric.status === 'critical' && <WarningAltFilled size={12} className="text-red-600" />}
-                  <Text size="xs" variant="muted">{metric.change} from last week</Text>
+                  {metric.status === 'critical' && (
+                    <WarningAltFilled size={12} className="text-red-600" />
+                  )}
+                  <Text size="xs" variant="muted">
+                    {metric.change} from last week
+                  </Text>
                 </HStack>
               </Stack>
             </CardContent>
@@ -90,25 +112,40 @@ export default function CybersecurityPage() {
 
             <Stack gap="none">
               {recentThreats.map((threat) => (
-                <div key={threat.id} className="flex items-center justify-between py-3 border-b border-border/40 last:border-0">
+                <div
+                  key={threat.id}
+                  className="flex items-center justify-between py-3 border-b border-border/40 last:border-0"
+                >
                   <HStack gap="3" align="center">
-                    <div className={`size-8 rounded-full flex items-center justify-center ${
-                      threat.severity === 'critical' ? 'bg-red-100 text-red-600' :
-                      threat.severity === 'high' ? 'bg-orange-100 text-orange-600' :
-                      'bg-yellow-100 text-yellow-600'
-                    }`}>
+                    <div
+                      className={`size-8 rounded-full flex items-center justify-center ${
+                        threat.severity === 'critical'
+                          ? 'bg-red-100 text-red-600'
+                          : threat.severity === 'high'
+                            ? 'bg-orange-100 text-orange-600'
+                            : 'bg-yellow-100 text-yellow-600'
+                      }`}
+                    >
                       <WarningAltFilled size={16} />
                     </div>
                     <Stack gap="none">
-                      <Text size="sm" weight="medium">{threat.type}</Text>
-                      <Text size="xs" variant="muted">{threat.time}</Text>
+                      <Text size="sm" weight="medium">
+                        {threat.type}
+                      </Text>
+                      <Text size="xs" variant="muted">
+                        {threat.time}
+                      </Text>
                     </Stack>
                   </HStack>
-                  <Badge variant={
-                    threat.status === 'blocked' ? 'default' :
-                    threat.status === 'resolved' ? 'secondary' :
-                    'outline'
-                  }>
+                  <Badge
+                    variant={
+                      threat.status === 'blocked'
+                        ? 'default'
+                        : threat.status === 'resolved'
+                          ? 'secondary'
+                          : 'outline'
+                    }
+                  >
                     {threat.status}
                   </Badge>
                 </div>
@@ -126,28 +163,36 @@ export default function CybersecurityPage() {
               <Stack gap="2">
                 <HStack justify="between">
                   <Text size="sm">Network Security</Text>
-                  <Text size="sm" weight="medium">92%</Text>
+                  <Text size="sm" weight="medium">
+                    92%
+                  </Text>
                 </HStack>
                 <Progress value={92} />
               </Stack>
               <Stack gap="2">
                 <HStack justify="between">
                   <Text size="sm">Endpoint Protection</Text>
-                  <Text size="sm" weight="medium">88%</Text>
+                  <Text size="sm" weight="medium">
+                    88%
+                  </Text>
                 </HStack>
                 <Progress value={88} />
               </Stack>
               <Stack gap="2">
                 <HStack justify="between">
                   <Text size="sm">Identity & Access</Text>
-                  <Text size="sm" weight="medium">95%</Text>
+                  <Text size="sm" weight="medium">
+                    95%
+                  </Text>
                 </HStack>
                 <Progress value={95} />
               </Stack>
               <Stack gap="2">
                 <HStack justify="between">
                   <Text size="sm">Data Protection</Text>
-                  <Text size="sm" weight="medium">78%</Text>
+                  <Text size="sm" weight="medium">
+                    78%
+                  </Text>
                 </HStack>
                 <Progress value={78} />
               </Stack>

apps/example/src/app/(app)/design/loading/page.tsx

@@ -27,19 +27,17 @@ export default function LoadingStatePage() {
           This page demonstrates the loading state of PageLayout
         </PageHeaderDescription>
         <PageHeaderActions>
-          <Button
-            variant="outline"
-            onClick={() => setIsLoading(!isLoading)}
-          >
+          <Button variant="outline" onClick={() => setIsLoading(!isLoading)}>
             {isLoading ? 'Show Content' : 'Show Loading'}
           </Button>
         </PageHeaderActions>
       </PageHeader>
 
       <Stack gap="lg">
         <Text>
-          The PageLayout component supports a <code className="bg-muted px-1.5 py-0.5 rounded text-sm">loading</code> prop
-          that displays skeleton placeholders while content is being fetched.
+          The PageLayout component supports a{' '}
+          <code className="bg-muted px-1.5 py-0.5 rounded text-sm">loading</code> prop that displays
+          skeleton placeholders while content is being fetched.
         </Text>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -49,7 +47,9 @@ export default function LoadingStatePage() {
               <CardDescription>View your metrics</CardDescription>
             </CardHeader>
             <CardContent>
-              <Text variant="muted" size="sm">Quick access to your dashboard analytics and insights.</Text>
+              <Text variant="muted" size="sm">
+                Quick access to your dashboard analytics and insights.
+              </Text>
             </CardContent>
           </Card>
 
@@ -59,7 +59,9 @@ export default function LoadingStatePage() {
               <CardDescription>Generate reports</CardDescription>
             </CardHeader>
             <CardContent>
-              <Text variant="muted" size="sm">Create and export detailed compliance reports.</Text>
+              <Text variant="muted" size="sm">
+                Create and export detailed compliance reports.
+              </Text>
             </CardContent>
           </Card>
 
@@ -69,7 +71,9 @@ export default function LoadingStatePage() {
               <CardDescription>Configure options</CardDescription>
             </CardHeader>
             <CardContent>
-              <Text variant="muted" size="sm">Customize your workspace and preferences.</Text>
+              <Text variant="muted" size="sm">
+                Customize your workspace and preferences.
+              </Text>
             </CardContent>
           </Card>
         </div>