@reinvented/design 0.2.0 → 0.2.1

package/docs/components/scroll-area.md

@@ -0,0 +1,17 @@
+# ScrollArea
+## Skeleton Code
+```vue
+<script setup>
+import { ScrollArea } from '@reinvented/design'
+</script>
+<template>
+  <ScrollArea class="h-72 w-48 rounded-md border">
+    <div class="p-4">
+      <!-- Scrollable content -->
+    </div>
+  </ScrollArea>
+</template>
+```
+## Gotchas
+- Must have explicit height set via class
+- Use instead of native scrollbars per DS rules

package/docs/components/select.md

@@ -0,0 +1,31 @@
+# Select
+## When to Use
+- Single-value selection from a list of options
+- When NOT to use: multi-select (use Checkbox group), binary toggle (use Switch)
+
+## Skeleton Code
+```vue
+<script setup>
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@reinvented/design'
+</script>
+
+<template>
+  <Select>
+    <SelectTrigger class="w-[180px]">
+      <SelectValue placeholder="Select a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+```
+
+## Gotchas
+- Use `placeholder` on `SelectValue` for the empty state text
+- Supports `v-model` via `modelValue` prop on `Select`

package/docs/components/separator.md

@@ -0,0 +1,14 @@
+# Separator
+## Skeleton Code
+```vue
+<script setup>
+import { Separator } from '@reinvented/design'
+</script>
+<template>
+  <Separator />                         <!-- Horizontal -->
+  <Separator orientation="vertical" />  <!-- Vertical -->
+</template>
+```
+## Gotchas
+- Use between logical sections, not decoratively
+- Vertical separators need a container with `flex` and explicit height

package/docs/components/sheet.md

@@ -0,0 +1,32 @@
+# Sheet
+## When to Use
+- Side panels for details or filters
+- Mobile navigation drawers
+- Quick edit forms that need more space than a dialog
+
+## Skeleton Code
+```vue
+<script setup>
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Button } from '@reinvented/design'
+</script>
+<template>
+  <Sheet>
+    <SheetTrigger as-child>
+      <Button variant="outline">Open</Button>
+    </SheetTrigger>
+    <SheetContent>
+      <SheetHeader>
+        <SheetTitle>Edit Profile</SheetTitle>
+        <SheetDescription>Make changes to your profile here.</SheetDescription>
+      </SheetHeader>
+      <!-- Content here -->
+    </SheetContent>
+  </Sheet>
+</template>
+```
+## Side Variants
+Use `side` prop on `SheetContent`: `"top"`, `"bottom"`, `"left"`, `"right"` (default: `"right"`).
+
+## Gotchas
+- Default width is `sm:max-w-sm` — override with class if wider content needed
+- Mobile: use `side="bottom"` for bottom sheets

package/docs/components/skeleton.md

@@ -0,0 +1,20 @@
+# Skeleton
+## Skeleton Code
+```vue
+<script setup>
+import { Skeleton } from '@reinvented/design'
+</script>
+<template>
+  <!-- Match shape of real content -->
+  <div class="flex items-center gap-3">
+    <Skeleton class="w-10 h-10 rounded-full" />
+    <div class="flex-1 space-y-2">
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-3 w-1/2" />
+    </div>
+  </div>
+</template>
+```
+## Gotchas
+- Must match the shape of actual content layout
+- Never show bare spinner — always show skeletons matching the data shape

package/docs/components/table.md

@@ -0,0 +1,33 @@
+# Table
+## Sub-components
+`Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`
+
+## Skeleton Code
+```vue
+<script setup>
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@reinvented/design'
+</script>
+<template>
+  <Table>
+    <TableCaption>A list of your recent invoices.</TableCaption>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Invoice</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead class="text-right">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="item in items" :key="item.id">
+        <TableCell class="font-medium">{{ item.invoice }}</TableCell>
+        <TableCell>{{ item.status }}</TableCell>
+        <TableCell class="text-right">{{ item.amount }}</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
+```
+## Gotchas
+- Use `text-right` for numeric columns
+- Use `font-medium` for the primary identifier column
+- For empty state, show a full-width row with empty state message

package/docs/components/tabs.md

@@ -0,0 +1,23 @@
+# Tabs
+## Skeleton Code
+```vue
+<script setup>
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@reinvented/design'
+</script>
+<template>
+  <Tabs default-value="overview">
+    <TabsList>
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="analytics">Analytics</TabsTrigger>
+      <TabsTrigger value="settings">Settings</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">Overview content</TabsContent>
+    <TabsContent value="analytics">Analytics content</TabsContent>
+    <TabsContent value="settings">Settings content</TabsContent>
+  </Tabs>
+</template>
+```
+## Gotchas
+- Use `default-value` for uncontrolled, `v-model` for controlled
+- Tab values must be unique strings
+- Keep tab labels short (1-2 words)

package/docs/layouts/dashboard.md

@@ -0,0 +1,70 @@
+# Dashboard Layout
+
+## When to Use
+- App home/overview pages
+- Stats summaries with key metrics
+- Quick-access to recent items
+
+## Skeleton Code
+
+```vue
+<script setup>
+import {
+  Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton,
+} from '@reinvented/design'
+import { Activity, Users, CreditCard, DollarSign } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+    <!-- Page Header -->
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">Dashboard</h1>
+      <p class="text-muted-foreground">Overview of your workspace.</p>
+    </div>
+
+    <!-- Stats Grid -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between pb-2">
+          <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
+          <DollarSign class="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <p class="text-2xl font-bold">$45,231</p>
+          <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+        </CardContent>
+      </Card>
+      <!-- Repeat for other stats -->
+    </div>
+
+    <!-- Content Grid -->
+    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
+      <Card class="col-span-4">
+        <CardHeader>
+          <CardTitle>Overview</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <!-- Chart or main content -->
+        </CardContent>
+      </Card>
+      <Card class="col-span-3">
+        <CardHeader>
+          <CardTitle>Recent Activity</CardTitle>
+          <CardDescription>Latest actions in your workspace.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <!-- Activity list -->
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Stats row**: 4-column grid of metric cards
+- **Content grid**: Asymmetric grid (4/7 + 3/7) for main content + sidebar
+- **Card headers**: Icon + title aligned horizontally
+- **Responsive**: Stack to 2-col then 1-col on smaller screens

package/docs/layouts/detail-page.md

@@ -0,0 +1,83 @@
+# Detail Page Layout
+
+## When to Use
+- Viewing a single item's complete information
+- Item detail with related data sections
+- Edit-in-place forms
+
+## Skeleton Code
+
+```vue
+<script setup>
+import {
+  Button, Badge, Separator, Tabs, TabsContent, TabsList, TabsTrigger,
+  Card, CardContent, CardHeader, CardTitle, Skeleton,
+  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+} from '@reinvented/design'
+import { ArrowLeft, Pencil, Trash2 } from 'lucide-vue-next'
+
+const item = ref(null)
+const loading = ref(true)
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+    <!-- Breadcrumb -->
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem><BreadcrumbLink href="/items">Items</BreadcrumbLink></BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem><BreadcrumbPage>{{ item?.name }}</BreadcrumbPage></BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
+    <!-- Page Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <h1 class="text-2xl font-bold tracking-tight">{{ item?.name }}</h1>
+        <Badge>{{ item?.status }}</Badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline"><Pencil class="mr-2 h-4 w-4" /> Edit</Button>
+        <Button variant="destructive"><Trash2 class="mr-2 h-4 w-4" /> Delete</Button>
+      </div>
+    </div>
+
+    <Separator />
+
+    <!-- Tabbed Content -->
+    <Tabs default-value="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="overview" class="space-y-6">
+        <!-- Detail Cards -->
+        <div class="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader><CardTitle>Details</CardTitle></CardHeader>
+            <CardContent>
+              <dl class="space-y-3">
+                <div>
+                  <dt class="text-sm text-muted-foreground">Created</dt>
+                  <dd class="text-sm font-medium">{{ item?.createdAt }}</dd>
+                </div>
+              </dl>
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Breadcrumb** at the top for back navigation
+- **Header**: Title + badge + action buttons
+- **Tabbed sections** for detailed content
+- **Detail cards** in a 2-column grid for metadata
+- **Separator** between header and tabbed content

package/docs/layouts/index.md

@@ -1,32 +1,45 @@
-# Layouts Index
+# Layout Documentation
 
-Page-level layout components with slots. Each layout is a Vue component in `src/layouts/` AND documented here with skeleton code and usage guidance.
+## Decision Tree
+
+Use this tree to choose the right layout for each view:
+
+```
+Is this a list of items?
+├─ Yes → List Page (list-page.md)
+├─ No
+│  ├─ Is this showing a single item's details?
+│  │  ├─ Yes → Detail Page (detail-page.md)
+│  │  ├─ No
+│  │  │  ├─ Is this a dashboard/overview?
+│  │  │  │  ├─ Yes → Dashboard (dashboard.md)
+│  │  │  │  ├─ No
+│  │  │  │  │  ├─ Is this a settings/configuration page?
+│  │  │  │  │  │  ├─ Yes → Settings Page (settings-page.md)
+│  │  │  │  │  │  ├─ No
+│  │  │  │  │  │  │  ├─ Is this a multi-step process?
+│  │  │  │  │  │  │  │  ├─ Yes → Step Wizard (step-wizard.md)
+│  │  │  │  │  │  │  │  ├─ No
+│  │  │  │  │  │  │  │  │  ├─ Is this a simple form?
+│  │  │  │  │  │  │  │  │  │  ├─ ≤5 fields → Modal Form (use Dialog)
+│  │  │  │  │  │  │  │  │  │  ├─ >5 fields → Full Page Form (detail-page.md variant)
+```
 
 ## Available Layouts
 
 | Layout | File | Use for |
 |--------|------|---------|
-| [List Page](list-page.md) | `list-page.md` | Browsing collections (tasks, members, notifications) |
-| [Detail Page](detail-page.md) | `detail-page.md` | Viewing a single item with full context |
-| [Dashboard](dashboard.md) | `dashboard.md` | Overview with stats, charts, recent activity |
-| [Modal Form](modal-form.md) | `modal-form.md` | Create/edit dialogs with form fields |
-| [Settings Page](settings-page.md) | `settings-page.md` | Configuration with sectioned form |
-
-## Choosing a Layout
-
-```
-What is the user doing?
-  ├── Browsing a list of things → List Page
-  ├── Looking at one specific thing → Detail Page
-  ├── Getting an overview / summary → Dashboard
-  ├── Creating or editing something → Modal Form (default) or Settings Page (complex)
-  └── Configuring settings → Settings Page
-```
+| [List Page](list-page.md) | ✅ | Filterable, searchable lists of items |
+| [Detail Page](detail-page.md) | ✅ | Single item view with actions |
+| [Dashboard](dashboard.md) | ✅ | Overview grids with stats and summaries |
+| [Settings Page](settings-page.md) | ✅ | Configuration with sidebar nav |
+| [Step Wizard](step-wizard.md) | ✅ | Multi-step guided processes |
+| Modal Form | — | Use Dialog component (≤5 fields) |
 
-## Layout Component Structure
+## General Layout Rules
 
-All layout components follow the same convention:
-- Accept a `class` prop for customization
-- Use named slots for content areas (header, content, footer, etc.)
-- Handle responsive breakpoints internally
-- Use DS tokens for spacing and typography
+1. **Max content width**: `max-w-7xl mx-auto` for main content
+2. **Page padding**: `px-4 sm:px-6 lg:px-8`
+3. **Section spacing**: `space-y-6` between major sections
+4. **Page header pattern**: Title + description + primary action
+5. **Responsive**: All layouts must work at mobile (320px+), tablet (768px+), desktop (1024px+)

package/docs/layouts/list-page.md

@@ -0,0 +1,107 @@
+# List Page Layout
+
+## When to Use
+- Browse a collection of items (tasks, users, apps)
+- Filterable, searchable, sortable data
+- Paginated or infinite-scroll lists
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+  Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+  Card, CardContent, Badge, Skeleton,
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from '@reinvented/design'
+import { Plus, Search, MoreHorizontal } from 'lucide-vue-next'
+
+const search = ref('')
+const filter = ref('all')
+const items = ref([]) // from GraphQL query
+const loading = ref(true)
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+    <!-- Page Header -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold tracking-tight">Items</h1>
+        <p class="text-muted-foreground">Manage your items.</p>
+      </div>
+      <Button><Plus class="mr-2 h-4 w-4" /> New Item</Button>
+    </div>
+
+    <!-- Filters Bar -->
+    <div class="flex items-center gap-4">
+      <div class="relative flex-1 max-w-sm">
+        <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input v-model="search" class="pl-9" placeholder="Search items..." />
+      </div>
+      <Select v-model="filter">
+        <SelectTrigger class="w-[150px]">
+          <SelectValue placeholder="Filter" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All</SelectItem>
+          <SelectItem value="active">Active</SelectItem>
+          <SelectItem value="archived">Archived</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="space-y-3">
+      <Skeleton v-for="i in 5" :key="i" class="h-16 w-full rounded-lg" />
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="items.length === 0" class="flex flex-col items-center justify-center py-12 text-center">
+      <div class="rounded-full bg-muted p-4 mb-4">
+        <Search class="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h3 class="text-lg font-semibold">No items found</h3>
+      <p class="text-muted-foreground mt-1">Get started by creating your first item.</p>
+      <Button class="mt-4"><Plus class="mr-2 h-4 w-4" /> Create Item</Button>
+    </div>
+
+    <!-- Data State -->
+    <div v-else class="space-y-3">
+      <Card v-for="item in items" :key="item.id" class="hover:shadow-sm transition-shadow">
+        <CardContent class="flex items-center justify-between p-4">
+          <div class="flex items-center gap-3">
+            <div>
+              <p class="font-medium">{{ item.name }}</p>
+              <p class="text-sm text-muted-foreground">{{ item.description }}</p>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge>{{ item.status }}</Badge>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon">
+                  <MoreHorizontal class="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Header**: Title + description + primary CTA
+- **Filters**: Search + dropdown filters in a row
+- **Three states**: Loading (skeletons), empty, data
+- **Item cards**: Name + description + badge + action menu
+- **Empty state**: Icon + message + CTA

package/docs/layouts/settings-page.md

@@ -0,0 +1,79 @@
+# Settings Page Layout
+
+## When to Use
+- User preferences
+- App configuration
+- Account management
+
+## Skeleton Code
+
+```vue
+<script setup>
+import {
+  Button, Input, Label, Separator, Switch, Textarea,
+  Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
+} from '@reinvented/design'
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex flex-col md:flex-row gap-8">
+
+      <!-- Sidebar Nav -->
+      <nav class="w-full md:w-48 space-y-1">
+        <a v-for="section in sections" :key="section.id"
+           :href="`#${section.id}`"
+           class="block rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+           :class="{ 'bg-muted text-foreground': activeSection === section.id }">
+          {{ section.label }}
+        </a>
+      </nav>
+
+      <!-- Settings Content -->
+      <div class="flex-1 space-y-6 max-w-2xl">
+        <Card id="profile">
+          <CardHeader>
+            <CardTitle>Profile</CardTitle>
+            <CardDescription>Update your personal information.</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="space-y-2">
+              <Label for="name">Name</Label>
+              <Input id="name" placeholder="Your name" />
+            </div>
+            <div class="space-y-2">
+              <Label for="bio">Bio</Label>
+              <Textarea id="bio" placeholder="About you" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save Changes</Button>
+          </CardFooter>
+        </Card>
+
+        <Card id="notifications">
+          <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>Choose what notifications you receive.</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-medium">Email notifications</p>
+                <p class="text-sm text-muted-foreground">Receive updates via email.</p>
+              </div>
+              <Switch />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Sidebar nav** on left, content on right
+- **Each section** is a Card with header + form fields + save button
+- **Switch rows**: Label + description on left, Switch on right
+- **Mobile**: sidebar stacks above content

package/docs/layouts/step-wizard.md

@@ -0,0 +1,73 @@
+# Step Wizard Layout
+
+## When to Use  
+- Multi-step processes (onboarding, app creation, checkout)
+- 3–7 steps where each depends on the previous
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle, Progress } from '@reinvented/design'
+import { Check } from 'lucide-vue-next'
+
+const currentStep = ref(0)
+const steps = [
+  { title: 'Details', component: 'StepDetails' },
+  { title: 'Configuration', component: 'StepConfig' },
+  { title: 'Review', component: 'StepReview' },
+]
+const progress = computed(() => ((currentStep.value + 1) / steps.length) * 100)
+</script>
+
+<template>
+  <div class="max-w-2xl mx-auto px-4 py-8 space-y-8">
+
+    <!-- Step Indicator -->
+    <div class="space-y-4">
+      <Progress :model-value="progress" />
+      <div class="flex justify-between">
+        <div v-for="(step, i) in steps" :key="i" class="flex items-center gap-2 text-sm">
+          <div
+            class="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium"
+            :class="i <= currentStep ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'"
+          >
+            <Check v-if="i < currentStep" class="h-3 w-3" />
+            <span v-else>{{ i + 1 }}</span>
+          </div>
+          <span :class="i <= currentStep ? 'text-foreground' : 'text-muted-foreground'">{{ step.title }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step Content -->
+    <Card>
+      <CardHeader>
+        <CardTitle>{{ steps[currentStep].title }}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <component :is="steps[currentStep].component" />
+      </CardContent>
+      <CardFooter class="flex justify-between">
+        <Button variant="outline" :disabled="currentStep === 0" @click="currentStep--">
+          Previous
+        </Button>
+        <Button v-if="currentStep < steps.length - 1" @click="currentStep++">
+          Next
+        </Button>
+        <Button v-else @click="submit">
+          Complete
+        </Button>
+      </CardFooter>
+    </Card>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Progress bar** + step circles at top
+- **Single card** with dynamic content
+- **Previous/Next** buttons in card footer
+- **Narrower max-width** than other layouts (`max-w-2xl`)
+- Completed steps show ✓, current step highlighted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reinvented/design",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {