@turk.net/mui 3.0.8 → 3.0.9

package/.opencode/rules/design-compliance.md

@@ -70,6 +70,15 @@ sx={{ bgcolor: 'var(--brand-background-1-rest)' }}
 - WithSidebar: `@turknet/onehub/layouts/page/WithSidebar`
 - **MUST NOT** use MUI Drawer or AppBar directly
 
+**Figma "Header tab navigation" layer → TabBased layout:**
+Eğer Figma tasarımında `"Header tab navigation"` isimli bir layer varsa, bu sayfa TabBased layout içinde bir **sekme** olarak geliştirilmelidir. Header'ı sayfa içinde tekrar oluşturma — layout otomatik olarak sağlar.
+
+**Figma "Card" / "Container" layer → Paper elevation={2}:**
+Eğer Figma'da `"Card"` veya `"Container"` isimli bir layer şu stillere sahipse:
+- Background: `#FAFAFA` veya beyaz
+- Box Shadow: `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)`
+→ `<Paper elevation={2}>` kullan. Tema default `borderRadius: 8px` verir; Figma köşeliyse `sx={{ borderRadius: 0 }}` ile override et.
+
 ### ICONS — MUST use OneHub icon system
 
 - Import from `@turknet/onehub/icons` (SVG components, preferred)

package/.opencode/skills/turknet-onehub-component-usage/SKILL.md

@@ -436,6 +436,55 @@ You MUST use the `elevation` prop with values **0-24 only**:
 
 ---
 
+## 📐 Layout & Figma Recognition
+
+### Figma "Header tab navigation" → TabBased Layout
+
+**When a Figma design contains a layer named `"Header tab navigation"`:**
+
+This is the TabBased layout header. The page MUST be developed as a **tab** within the TabBased layout — do NOT implement the header in your page component.
+
+```tsx
+// ❌ WRONG — Recreating the layout header
+function MyPage() {
+  return (
+    <Box>
+      <AppBar>...</AppBar>  // ← TabBased header'ı sayfada tekrar oluşturma!
+      <Box>page content</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT — Page content only, layout provides header
+function MyPageContent() {
+  return (
+    <Box>
+      <Typography variant="display.xs.bold">Page Title</Typography>
+      {/* sadece sayfa içeriği */}
+    </Box>
+  );
+}
+```
+
+### Figma "Card" / "Container" → Paper elevation={2}
+
+**When a Figma design contains a layer named `"Card"` or `"Container"`** with background `#FAFAFA` / white and shadow `0 0 2px + 0 1px 2px rgba`:
+
+→ Use `<Paper elevation={2}>` from `@mui/material`
+
+```tsx
+// ✅ CORRECT — Match Figma shadow2
+<Paper elevation={2}>
+  <Box sx={{ p: theme.spacing(4) }}>
+    {/* card content */}
+  </Box>
+</Paper>
+```
+
+Paper default borderRadius: `8px` (theme). Override with `sx={{ borderRadius: 0 }}` if Figma shows sharp corners.
+
+---
+
 ## 🚨 Common Mistakes to Avoid
 
 ### Mistake 1: Custom Button Component

package/COMPONENT_MAP.md

@@ -392,28 +392,67 @@ Tab styling is handled by theme overrides. Use standard MUI Tabs API.
 
 ---
 
-## Cards
+## Card / Container → Paper
 
-**MUI Component:** `Card` / `Paper` from `@mui/material`
+**MUI Component:** `Paper` from `@mui/material`
 
-| Property | Value |
-|----------|-------|
+### Figma Detection Rule
+
+**When you see a Figma layer named `"Card"` or `"Container"`** with these style characteristics:
+
+- Background: `var(--Neutral-Background-2-Rest, #FAFAFA)` or white
+- Box Shadow: `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)` (Figma `shadow2`)
+
+→ **Use `<Paper elevation={2}>`**
+
+```tsx
+// ✅ CORRECT — Figma "Card" / "Container" layer → Paper elevation={2}
+<Paper elevation={2} sx={{ /* sadece ihtiyaç varsa override */ }}>
+  {/* card content */}
+</Paper>
+```
+
+### Figma Styles → MUI Mapping
+
+| Figma Style | MUI Prop | Value |
+|-------------|----------|-------|
+| `shadow2` (0 0 2px + 0 1px 2px) | `elevation` | `{2}` |
+| `background: #FAFAFA` / white | background | `neutral.background[1].rest` (tema default) |
+| `borderRadius: 8px` | borderRadius | `theme.shape.borderRadius` (tema default) |
+| `borderRadius: 0px` (köşeli tasarım) | `sx` | `sx={{ borderRadius: 0 }}` ile override |
+
+### Corner Radius Behavior
+
+- Tema default olarak `borderRadius: 8px` uygular
+- Figma'daki layer köşeli (0px borderRadius) ise: `<Paper elevation={2} sx={{ borderRadius: 0 }}>`
+- Figma'daki layer daha yuvarlaksa: `sx={{ borderRadius: ... }}` ile override edilebilir
+
+### Paper Default Properties (from Theme)
+
+| Property | Theme Value |
+|----------|-------------|
 | **Border Radius** | `theme.shape.borderRadius` (8px) |
-| **Background** | `--neutral-background-1-rest` |
-| **Default Elevation** | `theme.shadows[0]` (none) |
-| **Elevated** | `theme.shadows[3]` (4px blur) |
+| **Background** | `var(--palette-neutral-background-1-rest)` |
+| **Border** | `1px solid var(--palette-neutral-stroke-3-rest)` |
+| **Elevation 0** | Flat (no shadow) |
+| **Elevation 2** | Very subtle shadow (Figma shadow2 equivalent) |
+| **Elevation 4** | Dropdown level |
+| **Elevation 8** | Dialog level |
 
 ---
 
-## Paper
+## Cards (Alternative)
 
-**MUI Component:** `Paper` from `@mui/material`
+**MUI Component:** `Card` from `@mui/material`
+
+`Card` extends `Paper` with the same styling. Use `Card` when you need `CardContent`, `CardHeader`, `CardActions`, `CardMedia` sub-components. Otherwise prefer `Paper`.
 
 | Property | Value |
 |----------|-------|
 | **Border Radius** | `theme.shape.borderRadius` (8px) |
-| **Border** | `--neutral-stroke-3-rest` (`1px solid #f0f0f0`) |
 | **Background** | `--neutral-background-1-rest` |
+| **Default Elevation** | `theme.shadows[0]` (none) |
+| **Elevated** | Use `elevation` prop |
 
 ---
 
@@ -429,6 +468,57 @@ Tab styling is handled by theme overrides. Use standard MUI Tabs API.
 
 ---
 
+## TabBased Layout Recognition
+
+**When you see a Figma layer named `"Header tab navigation"`:**
+
+This is the **TabBased layout header** — a 56px toolbar with navigation buttons (menu, plus, notifications, calendar, settings, help, bug).
+
+**CRITICAL RULE:** AI agents MUST NOT implement this header as part of a page component. The page content MUST be designed as a **tab within the existing TabBased layout**.
+
+```tsx
+// ❌ WRONG — Sayfa içinde Header tab navigation'ı tekrar oluşturma
+function MyPage() {
+  return (
+    <Box>
+      {/* Header tab navigation'ı burada oluşturma! */}
+      <AppBar>...</AppBar>
+      <Box>sayfa içeriği</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT — Sayfa içeriğini TabBased layout'ta bir sekme olarak oluştur
+// Sayfa, redux tabSlice üzerinden açılır, layout otomatik sağlanır
+function MyPageContent() {
+  return (
+    <Box sx={{ p: theme.spacing(4) }}>
+      {/* sadece sayfa içeriği — header/AppBar YOK */}
+      <Typography variant="display.xs.bold">Sayfa Başlığı</Typography>
+      ...
+    </Box>
+  );
+}
+```
+
+### TabBased Layout Header Specs (from Figma)
+
+| Element | Spec |
+|---------|------|
+| **Height** | `56px` |
+| **Horizontal Padding** | `32px` |
+| **Left content** | Navigation buttons (menu toggle, add tab) |
+| **Right content** | Action buttons (notifications, calendar, settings, help, bug report) |
+| **Background** | Theme-handled |
+| **Layout** | `@turknet/onehub/layouts/app/TabBased` |
+
+### What This Means for Page Development
+
+- **Header tab navigation layer varsa:** Bu sayfa bir TabBased sekmesidir. Sayfa içeriğini geliştir, header'ı layout'a bırak.
+- **Header tab navigation layer yoksa:** Sayfa bağımsız bir sayfadır (örn. login, ayarlar). Kendi header/footer'ını içerebilir.
+
+---
+
 ## Date Picker
 
 **MUI Component:** `DatePicker` from `@mui/x-date-pickers`
@@ -564,4 +654,6 @@ The following MUI components do NOT have theme overrides and MUST NOT be used:
 | A date picker | `DatePicker` (from `@mui/x-date-pickers`) |
 | A search with dropdown | `Autocomplete` |
 | Navigation tabs | `Tabs` + `Tab` |
-| A card container | `Card` / `Paper` |
+| A card/container (layer name "Card" / "Container") | `Paper elevation={2}` |
+| A card container (generic) | `Card` / `Paper` |
+| "Header tab navigation" layer | DO NOT implement — use TabBased layout instead |

package/LLM_GUIDELINES.md

@@ -398,6 +398,60 @@ text.xs.{regular|medium|semibold|bold}        → 12px
 
 ---
 
+## Layout & Figma Recognition
+
+### Figma "Header tab navigation" → TabBased Layout
+
+**When a Figma design contains a layer named `"Header tab navigation"`:**
+
+This indicates the page uses the TabBased layout (56px header toolbar with navigation buttons). The page content MUST be developed as a **tab** within the existing TabBased layout.
+
+```tsx
+// ❌ WRONG — Do NOT implement the header in your page
+function MyPage() {
+  return (
+    <Box>
+      <AppBar position="static">...</AppBar>  // ← NEVER do this
+      <Box>page content</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT — Page as a tab, layout provides header automatically
+function MyPageContent() {
+  return (
+    <Box>
+      <Typography variant="display.xs.bold">Page Title</Typography>
+      {/* page content only */}
+    </Box>
+  );
+}
+```
+
+**Layout is handled by:** `@turknet/onehub/layouts/app/TabBased`
+
+### Figma "Card" / "Container" → Paper
+
+**When a Figma design contains a layer named `"Card"` or `"Container"`** with:
+- Background: `var(--Neutral-Background-2-Rest, #FAFAFA)` or white
+- Box Shadow: `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)`
+
+→ Use `<Paper elevation={2}>` from `@mui/material`
+
+```tsx
+// ✅ CORRECT
+<Paper elevation={2}>
+  <Box sx={{ p: theme.spacing(4) }}>
+    <Typography variant="text.md.medium">Card Title</Typography>
+    {/* card content */}
+  </Box>
+</Paper>
+```
+
+Paper has `8px` borderRadius by default (from theme). If the Figma design has sharp corners, override with `sx={{ borderRadius: 0 }}`.
+
+---
+
 **Last Updated**: May 2026
 **Version**: 2.0+
 **Package**: @turknet/onehub

package/PAGE_PATTERNS.md

@@ -495,6 +495,66 @@ enqueueSnackbar('Something went wrong', { variant: 'error' });
 
 ---
 
+---
+
+## Pattern 9: Figma Layer → Layout Decision
+
+### 9.1 — "Header tab navigation" Layer → TabBased Layout
+
+**When a Figma design contains a layer named `"Header tab navigation"`:**
+
+This is the TabBased layout's header (56px toolbar with navigation/action buttons). The page is designed as a **tab** within the existing TabBased layout.
+
+**CRITICAL:** Do NOT implement this header in the page component. The header is handled by `@turknet/onehub/layouts/app/TabBased`.
+
+```tsx
+// ❌ WRONG
+function MyPage() {
+  return (
+    <Box>
+      <AppBar>...</AppBar>   // ← Bunu yapma!
+      <Box>content</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT
+// Sayfa TabBased layout altında sekme olarak açılır
+// Sadece içeriği geliştir, header'ı layout sağlar
+function MyPageContent() {
+  return (
+    <Box sx={{ p: theme.spacing(4) }}>
+      <Typography variant="display.xs.bold">Sayfa Başlığı</Typography>
+      {/* sayfa içeriği */}
+    </Box>
+  );
+}
+```
+
+### 9.2 — "Card" / "Container" Layer → Paper
+
+**When a Figma design contains a layer named `"Card"` or `"Container"`** with these styles:
+
+| Style | Value |
+|-------|-------|
+| Background | `var(--Neutral-Background-2-Rest, #FAFAFA)` or white |
+| Box Shadow | `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)` |
+
+→ **Use `<Paper elevation={2}>`** from `@mui/material`
+
+```tsx
+<Paper elevation={2}>
+  <Box sx={{ p: theme.spacing(4) }}>
+    <Typography variant="text.md.medium">Card Title</Typography>
+    {/* card content */}
+  </Box>
+</Paper>
+```
+
+**Corner radius:** Paper has `8px` borderRadius by default (from theme). If Figma shows sharp corners (0px), override with `sx={{ borderRadius: 0 }}`.
+
+---
+
 ## Quick Decision Guide
 
 | If you need to... | Use Pattern |
@@ -507,3 +567,5 @@ enqueueSnackbar('Something went wrong', { variant: 'error' });
 | Show feedback message | Pattern 6: Notifications |
 | Handle no-data state | Pattern 7: Empty State |
 | Handle loading state | Pattern 8: Loading State |
+| Figma has "Header tab navigation" layer | Pattern 9.1: TabBased layout tab |
+| Figma has "Card" / "Container" layer | Pattern 9.2: Paper elevation={2} |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turk.net/mui",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "A theme library customized for Material UI (v9).",
   "keywords": [
     "mui",