tailor-platform · IzumiSy · May 13, 2026
diff --git a/.oxfmtrc.json → .oxfmtrc.jsonc b/.oxfmtrc.json → .oxfmtrc.jsonc
@@ -1,4 +1,4 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "ignorePatterns": [".github/workflows/*.lock.yml", "**/CHANGELOG.md"]
+  "ignorePatterns": [".github/workflows/*.lock.yml", "**/CHANGELOG.md"],
 }
diff --git a/docs/components/activity-card.md b/docs/components/activity-card.md
@@ -7,46 +7,38 @@ description: Timeline of recent document activities with avatars and overflow di
 
 The `ActivityCard` component displays a timeline of recent activities (e.g. changes on a PO, SO, or GR document). Each entry shows an avatar, user name, description, and timestamp. A limited number of activities are shown in the card; additional activities are available via a clickable overflow that opens a dialog with a scrollable full list.
 
-## Import
-
-```tsx
-import {
-  ActivityCard,
-  type ActivityCardItem,
-  type ActivityCardBaseItem,
-  type ActivityCardProps,
-} from "@tailor-platform/app-shell";
-```
-
 Use `ActivityCardItem` for each item in the standalone API. Use `ActivityCardBaseItem` as the minimum constraint when extending items for the compound API.
 
 ## Basic Usage
 
-```tsx
-const items = [
-  {
-    id: "1",
-    actor: { name: "Hanna", avatarUrl: "/avatars/hanna.jpg" }, // avatarUrl is optional
-    description: "changed the status from DRAFT to CONFIRMED",
-    timestamp: new Date("2025-03-21T09:00:00"),
-  },
-  {
-    id: "2",
-    actor: { name: "Pradeep Kumar" },
-    description: "created this PO",
-    timestamp: new Date("2025-03-21T15:16:00"),
-  },
-  {
-    id: "3",
-    // no actor — system event with no specific subject
-    description: "Status automatically changed to EXPIRED",
-    timestamp: new Date("2025-03-20T10:00:00"),
-  },
-];
-
-export function DocumentUpdates() {
-  return <ActivityCard items={items} title="Updates" />;
-}
+```tsx preview height="400"
+import { ActivityCard } from "@tailor-platform/app-shell";
+
+export default (
+  <ActivityCard
+    title="Updates"
+    items={[
+      {
+        id: "1",
+        actor: { name: "Hanna", avatarUrl: "/avatars/hanna.jpg" }, // avatarUrl is optional
+        description: "changed the status from DRAFT to CONFIRMED",
+        timestamp: new Date("2025-03-21T09:00:00"),
+      },
+      {
+        id: "2",
+        actor: { name: "Pradeep Kumar" },
+        description: "created this PO",
+        timestamp: new Date("2025-03-21T15:16:00"),
+      },
+      {
+        id: "3",
+        // no actor — system event with no specific subject
+        description: "Status automatically changed to EXPIRED",
+        timestamp: new Date("2025-03-20T10:00:00"),
+      },
+    ]}
+  />
+);
 ```
 
 ## Overflow and dialog
@@ -85,10 +77,35 @@ Each activity must include: `id`, `description`, `timestamp` (Date or string). O
 
 Use the compound API when you need fully custom item rendering — custom icons, links, badges, or mixed item kinds. Items still must satisfy `ActivityCardBaseItem` (`id` + `timestamp`). You extend `ActivityCardBaseItem` with any additional fields you need.
 
-### Import
+### Example
 
-```tsx
+```tsx preview height="400"
 import { ActivityCard, type ActivityCardBaseItem } from "@tailor-platform/app-shell";
+
+export default (
+  <ActivityCard.Root
+    items={[
+      { id: "1", timestamp: new Date(), kind: "approval", label: "PO approved" },
+      { id: "2", timestamp: new Date(), kind: "update", message: "Status changed to CONFIRMED" },
+    ]}
+    title="Updates"
+    groupBy="day"
+  >
+    <ActivityCard.Items>
+      {(item) =>
+        item.kind === "approval" ? (
+          <ActivityCard.Item>
+            <p style={{ color: "green" }}>{item.label}</p>
+          </ActivityCard.Item>
+        ) : (
+          <ActivityCard.Item>
+            <p style={{ fontWeight: "bold" }}>{item.message}</p>
+          </ActivityCard.Item>
+        )
+      }
+    </ActivityCard.Items>
+  </ActivityCard.Root>
+);
 ```
 
 ### Parts
@@ -119,39 +136,6 @@ import { ActivityCard, type ActivityCardBaseItem } from "@tailor-platform/app-sh
 | `children`  | `React.ReactNode` | -       | Content for the item row (text, badges, links, etc.).                                      |
 | `className` | `string`          | -       | Additional CSS classes.                                                                    |
 
-### Example
-
-```tsx
-import { ActivityCard, type ActivityCardBaseItem } from "@tailor-platform/app-shell";
-
-interface MyItem extends ActivityCardBaseItem {
-  kind: "approval" | "update";
-  label?: string;
-  message?: string;
-}
-
-const items: MyItem[] = [
-  { id: "1", timestamp: new Date(), kind: "approval", label: "PO approved" },
-  { id: "2", timestamp: new Date(), kind: "update", message: "Status changed to CONFIRMED" },
-];
-
-<ActivityCard.Root items={items} title="Updates" groupBy="day">
-  <ActivityCard.Items<MyItem>>
-    {(item) =>
-      item.kind === "approval" ? (
-        <ActivityCard.Item indicator={<ApprovedIcon />}>
-          <p>{item.label}</p>
-        </ActivityCard.Item>
-      ) : (
-        <ActivityCard.Item>
-          <p>{item.message}</p>
-        </ActivityCard.Item>
-      )
-    }
-  </ActivityCard.Items>
-</ActivityCard.Root>;
-```
-
 ---
 
 ## See also

diff --git a/docs/components/app-shell.md b/docs/components/app-shell.md
@@ -55,7 +55,6 @@ function App() {
 
 ```tsx
 import { Building } from "lucide-react";
-
 <AppShell title="My App" icon={<Building />} modules={modules}>
   {/* ... */}
 </AppShell>;
@@ -124,7 +123,6 @@ When `rootComponent` is set, the root page is treated as a first-class navigatio
 
 ```tsx
 import { redirectTo } from "@tailor-platform/app-shell";
-
 <AppShell basePath="/app" modules={modules} rootComponent={() => redirectTo("/app/dashboard")}>
   {/* ... */}
 </AppShell>;
@@ -307,7 +305,6 @@ Typically, you'll use `SidebarLayout`:
 
 ```tsx
 import { SidebarLayout } from "@tailor-platform/app-shell";
-
 <AppShell modules={modules}>
   <SidebarLayout />
 </AppShell>;

diff --git a/docs/components/attachment.md b/docs/components/attachment.md
@@ -18,13 +18,12 @@ import type { AttachmentItem, AttachmentOperation } from "@tailor-platform/app-s
 
 Use `useAttachment` to manage upload/delete state locally, then flush operations to your backend on submit via `applyChanges`. Spread the returned `props` directly onto `<Attachment />`.
 
-```tsx
+```tsx preview height="400"
 import { Attachment, Card, useAttachment } from "@tailor-platform/app-shell";
 import type { AttachmentOperation } from "@tailor-platform/app-shell";
 
-function ProductForm() {
+export default function ProductForm() {
   const { props, applyChanges } = useAttachment({
-    initialItems: existingAttachments,
     accept: "image/*,.pdf",
   });
 
@@ -38,7 +37,7 @@ function ProductForm() {
   }
 
   return (
-    <Card.Root>
+    <Card.Root style={{ flex: 1 }}>
       <Card.Header title="Product images" description="PNG, JPG, or PDF — max 10 MB per file." />
       <Card.Content>
         <Attachment

diff --git a/docs/components/autocomplete.md b/docs/components/autocomplete.md
@@ -15,12 +15,16 @@ import { Autocomplete } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
-```tsx
-<Autocomplete
-  items={["Apple", "Banana", "Cherry"]}
-  placeholder="Type a fruit..."
-  onValueChange={(value) => console.log(value)}
-/>
+```tsx preview align="start"
+import { Autocomplete } from "@tailor-platform/app-shell";
+
+export default (
+  <Autocomplete
+    items={["Apple", "Banana", "Cherry"]}
+    placeholder="Type a fruit..."
+    onValueChange={(value) => console.log(value)}
+  />
+);
 ```
 
 ## Props
@@ -60,13 +64,18 @@ interface ItemGroup<T> {
 
 ## Grouped Suggestions
 
-```tsx
-const cities = [
-  { label: "Japan", items: ["Tokyo", "Osaka", "Kyoto"] },
-  { label: "France", items: ["Paris", "Lyon", "Marseille"] },
-];
+```tsx preview align="start" height="350"
+import { Autocomplete } from "@tailor-platform/app-shell";
 
-<Autocomplete items={cities} placeholder="Search cities..." />;
+export default (
+  <Autocomplete
+    placeholder="Search cities..."
+    items={[
+      { label: "Japan", items: ["Tokyo", "Osaka", "Kyoto"] },
+      { label: "France", items: ["Paris", "Lyon", "Marseille"] },
+    ]}
+  />
+);
 ```
 
 ## Object Items with mapItem

diff --git a/docs/components/avatar.md b/docs/components/avatar.md
@@ -15,11 +15,15 @@ import { Avatar } from "@tailor-platform/app-shell";
 
 ## Basic usage
 
-```tsx
-<Avatar.Root>
-  <Avatar.Image src="/user.png" alt="Jane Doe" />
-  <Avatar.Fallback>JD</Avatar.Fallback>
-</Avatar.Root>
+```tsx preview
+import { Avatar } from "@tailor-platform/app-shell";
+
+export default (
+  <Avatar.Root>
+    <Avatar.Image src="/user.png" alt="Jane Doe" />
+    <Avatar.Fallback>JD</Avatar.Fallback>
+  </Avatar.Root>
+);
 ```
 
 ## Parts
@@ -42,16 +46,22 @@ import { Avatar } from "@tailor-platform/app-shell";
 
 ## Sizes
 
-```tsx
-<Avatar.Root size="sm">
-  <Avatar.Fallback>AB</Avatar.Fallback>
-</Avatar.Root>
-<Avatar.Root size="default">
-  <Avatar.Fallback>CD</Avatar.Fallback>
-</Avatar.Root>
-<Avatar.Root size="lg">
-  <Avatar.Fallback>EF</Avatar.Fallback>
-</Avatar.Root>
+```tsx preview wrap="row"
+import { Avatar } from "@tailor-platform/app-shell";
+
+export default (
+  <>
+    <Avatar.Root size="sm">
+      <Avatar.Fallback>AB</Avatar.Fallback>
+    </Avatar.Root>
+    <Avatar.Root size="default">
+      <Avatar.Fallback>CD</Avatar.Fallback>
+    </Avatar.Root>
+    <Avatar.Root size="lg">
+      <Avatar.Fallback>EF</Avatar.Fallback>
+    </Avatar.Root>
+  </>
+);
 ```
 
 ## Types