@tailor-platform/app-shell 1.14.0 → 1.16.0

package/skills/app-shell-patterns/references/patterns/interaction-multi-select.md

@@ -1,22 +1,11 @@
 ---
-slug: pattern/interaction/multi-select
-name: Multi Select
-category: pattern
-subcategory: interaction
+title: Multi Select
 description: Floating bottom action bar for bulk operations on selected list rows
-requiredImports: [Table, Checkbox, Button, Menu]
-tags: [bulk, selection, toolbar, floating-bar, multi-select, batch]
-do:
-  - ANY list page where rows can be acted on in bulk (archive, assign, export, approve, delete)
-  - Selection is initiated by clicking a leading-column checkbox on rows
-  - Selection state needs to persist across pagination and filter changes
-dont:
-  - A list where bulk action is genuinely impossible (single-select only)
-  - A pure picker/selector inside a Dialog whose footer already gates the action
-  - Destructive bulk action triggered without confirmation — pair with interaction/confirm
 ---
 
-# pattern/interaction/multi-select
+<!-- GENERATED by docs-kit from docs-src/patterns/interaction-multi-select.docs.outline.md — do not edit by hand. -->
+
+# Multi Select
 
 ## When to Use
 
@@ -47,19 +36,14 @@ Floating action bar appears the moment selection count goes from 0 → 1, anchor
 
 ## Page Implementation
 
+<example-preview name="interaction-multi-select"></example-preview>
+
 ```tsx
-/* pattern: interaction/multi-select */
-import { useState } from "react";
-import { Button, Table, Menu } from "@tailor-platform/app-shell";
-import type { Order } from "./mock";
-
-type Props = {
-  orders: Order[];
-  onArchive: (ids: string[]) => void;
-  onExport: (ids: string[]) => void;
-};
-
-export default function MultiSelect({ orders, onArchive, onExport }: Props) {
+function InteractionMultiSelect() {
+  const orders = mockOrders;
+  const onArchive = (ids: string[]) => window.alert(`Archiving ${ids.length}`);
+  const onExport = (ids: string[]) => window.alert(`Exporting ${ids.length}`);
+
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
   const toggleRow = (id: string) => {
@@ -87,7 +71,7 @@ export default function MultiSelect({ orders, onArchive, onExport }: Props) {
       <Table.Root>
         <Table.Header>
           <Table.Row>
-            <Table.Head className="astw:w-10">
+            <Table.Head className="w-10">
               <input
                 type="checkbox"
                 checked={selectedIds.size === orders.length && orders.length > 0}
@@ -155,6 +139,8 @@ export default function MultiSelect({ orders, onArchive, onExport }: Props) {
 }
 ```
 
+<!-- source: multi-select.tsx -->
+
 ## Constraints
 
 - Count label + Clear button are always present in the bar

package/skills/app-shell-patterns/references/patterns/interaction-toast.md

@@ -1,21 +1,11 @@
 ---
-slug: pattern/interaction/toast
-name: Toast
-category: pattern
-subcategory: interaction
+title: Toast
 description: Lightweight feedback after mutations — success or error notifications
-requiredImports: [Button]
-tags: [toast, feedback, notification, mutation, success, error]
-do:
-  - Feedback after a mutation (create, update, delete) — success or error
-  - Lightweight async signal that doesn't need to block the UI
-  - Confirming work the user just initiated
-dont:
-  - Destructive action that has not yet executed — use interaction/confirm
-  - Long-running blocking operation — use an inline progress UI, not a toast
 ---
 
-# pattern/interaction/toast
+<!-- GENERATED by docs-kit from docs-src/patterns/interaction-toast.docs.outline.md — do not edit by hand. -->
+
+# Toast
 
 ## When to Use
 
@@ -25,31 +15,17 @@ dont:
 
 ## Page Implementation
 
-```tsx
-/* pattern: interaction/toast */
-import { Button, useToast } from "@tailor-platform/app-shell";
-
-type Props = {
-  orderId: string;
-  onApprove: () => Promise<void>;
-};
+<example-preview name="interaction-toast"></example-preview>
 
-export default function ToastExample({ orderId, onApprove }: Props) {
+```tsx
+function InteractionToast() {
   const toast = useToast();
-
-  const handleApprove = async () => {
-    try {
-      await onApprove();
-      toast.success(`Order ${orderId} approved`);
-    } catch {
-      toast.error("Failed to approve order. Try again.");
-    }
-  };
-
-  return <Button onClick={handleApprove}>Approve</Button>;
+  return <Button onClick={() => toast.success("Order ORD-1024 approved")}>Approve</Button>;
 }
 ```
 
+<!-- source: toast-example.tsx -->
+
 ## Copy Rules
 
 - Success: name what happened, including the object identifier. "Order #1234 created", "Product archived".

package/skills/app-shell-patterns/references/patterns/list-dense-scan.md

@@ -1,35 +1,11 @@
 ---
-slug: pattern/list/dense-scan
-name: Dense Scan List
-category: pattern
-subcategory: list
+title: Dense Scan List
 description: High-density scannable list backed by GraphQL connections with DataTable, sort, filters, and pagination
-requiredImports:
-  [
-    DataTable,
-    useDataTable,
-    useCollectionVariables,
-    createColumnHelper,
-    Layout,
-    Card,
-    Button,
-    Badge,
-    Link,
-    Menu,
-    Tabs,
-  ]
-tags: [table, bulk-action, filter, pagination, datatable, connection]
-do:
-  - Browsing many records of one entity type (orders, POs, products) with GraphQL pagination
-  - Operators sort, filter, and select rows; row click navigates to detail
-  - Optionally a bucket control (Tabs) aligned to one categorical dimension (status, type)
-dont:
-  - Side-by-side match/reconcile views comparing two grids
-  - A tiny/static list where DataTable would be heavyweight — use Table.Root manually
-  - Inline editable cells — use pattern/detail or pattern/form/modal instead
 ---
 
-# pattern/list/dense-scan
+<!-- GENERATED by docs-kit from docs-src/patterns/list-dense-scan.docs.outline.md — do not edit by hand. -->
+
+# Dense Scan List
 
 ## When to Use
 
@@ -39,73 +15,22 @@ dont:
 
 ## Column Definition
 
-```tsx
-import type { Column } from "@tailor-platform/app-shell";
-import { Badge } from "@tailor-platform/app-shell";
-
-export type Order = {
-  id: string;
-  orderNumber: string;
-  customer: string;
-  status: "draft" | "confirmed" | "shipped" | "delivered";
-  amount: number;
-  createdAt: string;
-};
-
-// Primary status column — filled semantic variants (one per row).
-// Secondary status columns (e.g. delivery, billing) use outline-* instead.
-const statusVariant = {
-  draft: "neutral",
-  confirmed: "info",
-  shipped: "warning",
-  delivered: "success",
-} as const;
-
-export const columns: Column<Order>[] = [
-  { label: "Order #", accessor: (row) => row.orderNumber },
-  { label: "Customer", accessor: (row) => row.customer },
-  {
-    label: "Status",
-    render: (row) => <Badge variant={statusVariant[row.status]}>{row.status}</Badge>,
-  },
-  {
-    // Numeric columns right-align so digits line up. `type: "money" | "number"`
-    // auto-right; with a custom `render` set `align` explicitly.
-    label: "Amount",
-    align: "right",
-    render: (row) => `${row.amount.toLocaleString()}`,
-  },
-  { label: "Created", accessor: (row) => row.createdAt },
-];
-```
+Columns are defined with `createColumnHelper` (see the example below) — each column has a `label` and an `accessor`, or a custom `render` for cells like status badges.
 
 ## Page Implementation
 
-```tsx
-/* pattern: list/dense-scan */
-import { DataTable, Layout, useDataTable, Button, Input } from "@tailor-platform/app-shell";
-import type { Order } from "./columns";
-import { columns } from "./columns";
-import type { DataTableData } from "@tailor-platform/app-shell";
-
-type Props = {
-  data: DataTableData<Order>;
-  onCreateClick: () => void;
-};
+<example-preview name="dense-scan"></example-preview>
 
-export default function DenseScanList({ data, onCreateClick }: Props) {
-  const table = useDataTable({ data, columns });
+```tsx
+function DenseScan() {
+  const table = useDataTable({ data: { rows: orders, total: orders.length }, columns });
 
   return (
-    // `fill` pins the page chrome for table-first pages: the title, toolbar,
-    // column header row, and pagination footer stay visible at every viewport
-    // height — only the table's rows region scrolls. Omit `fill` on pages
-    // that should flow and scroll naturally (forms, dashboards, articles).
-    <Layout fill>
+    <Layout>
       <Layout.Header
         title="Orders"
         actions={[
-          <Button key="create" onClick={onCreateClick}>
+          <Button key="create" size="sm">
             Create Order
           </Button>,
         ]}