@monkey-mini-app/dsh-mini-app 0.1.1 → 0.1.4

package/skills/monkey-mini-app/references/contracts/kanban-issue-panel.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # KanbanIssuePanel
 
+Slide-over detail panel for a `Kanban` card.
+
+**when** Board + click-to-edit issue. Pair with `Kanban`'s selected card.
+
 `import { KanbanIssuePanel, KanbanCard, KanbanComment } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/kanban-issue-panel.tsx` · products
+`packages/ui/src/products/kanban-issue-panel.tsx` · family: Surface · type: product
 
 ## Props
 
@@ -43,3 +47,9 @@
 | `body` | `string` | ✓ |  |
 | `id` | `string` | ✓ |  |
 | `time` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<KanbanIssuePanel card={card} open={open} onOpenChange={setOpen} />
+```

package/skills/monkey-mini-app/references/contracts/kanban.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Kanban
 
@@ -8,7 +8,7 @@ DnD board: columns + cards. Move cards across columns via drag.
 
 `import { Kanban, KanbanComment, KanbanCard, KanbanColumn } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/kanban.tsx` · products
+`packages/ui/src/products/kanban.tsx` · family: Data & tables · type: product
 
 ## Props
 
@@ -62,3 +62,11 @@ DnD board: columns + cards. Move cards across columns via drag.
 ```tsx
 <Kanban columns={cols} cards={cards} onCardsChange={setCards} onCardClick={open} />
 ```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[kanban-01.tsx](../examples/kanban/kanban-01.tsx)** — Kanban — Card board with drag between columns, plus the issue detail sheet — the workflow/pipeline view; use Table/DataGrid when you need sorting and totals. — _*Drag between columns · click a card for Jira details*_

package/skills/monkey-mini-app/references/contracts/kbd.md

@@ -0,0 +1,20 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Kbd (L1 primitive)
+
+**when** Documenting ⌘K-style shortcuts in help panels.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Kbd, KbdGroup } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/kbd.tsx` · family: Layout & structure · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Kbd` | — |
+| `KbdGroup` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/label.md

@@ -0,0 +1,33 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Label (L1 primitive)
+
+Accessible field label.
+
+**when** Always bind `htmlFor` — bare text labels are not accessible.
+
+`import { Label } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/label.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Label` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Label htmlFor="name">名称</Label>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[label-01.tsx](../examples/label/label-01.tsx)** — Label — Accessible field label wired by htmlFor; the piece that makes a bare Input keyboard/AT-usable.

package/skills/monkey-mini-app/references/contracts/list-detail.md

@@ -0,0 +1,46 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# ListDetail
+
+Two-pane record browser: the list holds its place while the selected record scrolls on its own. This is the shape agents get wrong without help — a flex child with no `min-h-0` grows to fit its content, so the whole page scrolls, the toolbar slides away, and the two panes are never independent. Both panes scroll here by construction, and the record pane collapses to a full-width view below `md` instead of squashing.
+
+**when** Page shape: click a row, then read or edit that one record beside the list — orders, tickets, contacts, log lines
+
+`import { ListDetail } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/list-detail.tsx` · family: Layout & structure · type: block
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
+| `defaultSize` | `number \| undefined` |  | Collection pane share of the width, 0-100. Default 34. |
+| `detail` | `ReactNode` |  | The record pane. Pass `undefined` for "nothing selected" — `empty` renders instead. |
+| `empty` | `ReactNode` |  | Placeholder for the record pane while nothing is selected. |
+| `list` | `ReactNode` | ✓ | The collection pane: list, table, board — anything you scroll through. |
+| `minSize` | `number \| undefined` |  | Collection pane floor, so a long record title cannot push it away. Default 18. |
+| `mobileView` | `"list" \| "detail" \| undefined` |  | Narrow screens show one pane at a time. The app owns which one. |
+| `onMobileBack` | `(() => void) \| undefined` |  | Renders a back control on the record pane below `md`. No-op on wide screens. |
+| `toolbar` | `ReactNode` |  | Search / filters / create button. Fixed above the panes; it never scrolls. |
+
+## Example
+
+```tsx
+<ListDetail
+  toolbar={<SearchInput />}
+  list={<OrderList />}
+  detail={order ? <OrderCard order={order} /> : undefined}
+  empty={<div>Pick an order</div>}
+  mobileView={order ? "detail" : "list"}
+  onMobileBack={() => setOrder(null)}
+/>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[list-detail-01.tsx](../examples/list-detail/list-detail-01.tsx)** — ListDetail — Records browser at a fixed height: a long ticket list on the left, the selected ticket on the right, each pane scrolling on its own. — _*Scroll either pane — the toolbar and the other pane stay put*_

package/skills/monkey-mini-app/references/contracts/log-viewer.md

@@ -1,13 +1,54 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # LogViewer
 
-`import { LogViewer } from "@monkey-mini-app/ui"`
+Virtualized streaming log viewer with level colors, search, and auto-scroll.
 
-`packages/ui/src/products/log-viewer.tsx` · products
+**when** Streaming / CLI-style log output
+
+`import { LogViewer, LogLevel, LogEntry } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/products/log-viewer.tsx` · family: Realtime · type: product
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
-| `lines` | `string[]` | ✓ |  |
+| `autoScroll` | `boolean \| undefined` |  |  |
+| `className` | `string \| undefined` |  |  |
+| `entries` | `LogEntry[]` | ✓ |  |
+| `lineNumbers` | `boolean \| undefined` |  |  |
+| `maxHeight` | `number \| undefined` |  |  |
+| `onClear` | `(() => void) \| undefined` |  |  |
+| `timestamps` | `boolean \| undefined` |  |  |
+| `title` | `string \| undefined` |  |  |
+
+## Types
+
+### `LogLevel`
+
+```ts
+"info" | "warn" | "error" | "debug" | "verbose"
+```
+
+### `LogEntry`
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `level` | `LogLevel` | ✓ |  |
+| `message` | `string` | ✓ |  |
+| `timestamp` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<LogViewer entries={[{ level: "info", message: "boot" }, { level: "error", message: "boom" }]} />
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[log-viewer-01.tsx](../examples/log-viewer/log-viewer-01.tsx)** — LogViewer — Thousands of streamed log lines: virtualised rows with level colouring and auto-follow; never render logs with a plain map.

package/skills/monkey-mini-app/references/contracts/markdown-editor.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # MarkdownEditor
 
+Markdown edit + preview toggle.
+
+**when** Authoring md bodies. Read-only render → `Markdown`.
+
 `import { MarkdownEditor, MarkdownEditorMode } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/markdown-editor.tsx` · products
+`packages/ui/src/products/markdown-editor.tsx` · family: Rich text · type: product
 
 ## Props
 
@@ -22,3 +26,17 @@
 ```ts
 "edit" | "split" | "preview"
 ```
+
+## Example
+
+```tsx
+<MarkdownEditor value={md} onChange={(v) => set(v)} />
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[markdown-editor-01.tsx](../examples/markdown-editor/markdown-editor-01.tsx)** — MarkdownEditor — Write markdown with a live preview pane and a mode toggle (edit / split / preview) for docs and descriptions. — _*Left CodeMirror, right live GFM preview*_

package/skills/monkey-mini-app/references/contracts/markdown.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Markdown
 
+Render a markdown string.
+
+**when** Model output, README-ish bodies. Children must be a string.
+
 `import { Markdown } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/markdown.tsx` · products
+`packages/ui/src/products/markdown.tsx` · family: Rich text · type: product
 
 ## Props
 
@@ -12,3 +16,9 @@
 |---|---|:---:|---|
 | `children` | `string` | ✓ |  |
 | `className` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<Markdown>{text}</Markdown>
+```

package/skills/monkey-mini-app/references/contracts/marker.md

@@ -0,0 +1,30 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Marker (L1 primitive)
+
+**when** Small state markers inside a sentence or legend.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Marker, MarkerContent, MarkerIcon, markerVariants } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/marker.tsx` · family: Layout & structure · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Marker` | `render?` `variant?=default/separator/border` |
+| `MarkerContent` | — |
+| `MarkerIcon` | — |
+| `markerVariants` (hook/util) | `class?` `variant?=default/separator/border` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[marker-01.tsx](../examples/marker/marker-01.tsx)** — Marker — Small inline marker (icon + text) used to annotate a list row or timeline step with its state/file type.

package/skills/monkey-mini-app/references/contracts/menubar.md

@@ -0,0 +1,34 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Menubar (L1 primitive)
+
+**when** Rarely right for a panel-width mini-app — prefer `Tabs` / `DropdownMenu`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/menubar.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Menubar` | `disabled?` `loopFocus?` `modal?` `orientation?` `render?` |
+| `MenubarCheckboxItem` | `checked?` `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `onCheckedChange?` `render?` |
+| `MenubarContent` | `align?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `MenubarGroup` | `render?` |
+| `MenubarItem` | `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `render?` `variant?=default/destructive` |
+| `MenubarLabel` | `inset?` `render?` |
+| `MenubarMenu` | `actionsRef?` `closeParentOnEsc?` `defaultOpen?` `defaultTriggerId?` `disabled?` `handle?` `highlightItemOnHover?` `loopFocus?` `modal?` `onOpenChange?` `onOpenChangeComplete?` `open?` +2 |
+| `MenubarPortal` | `container?` `keepMounted?` `render?` |
+| `MenubarRadioGroup` | `disabled?` `onValueChange?` `render?` `value?` |
+| `MenubarRadioItem` | `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `render?` `value` |
+| `MenubarSeparator` | `orientation?` `render?` |
+| `MenubarShortcut` | — |
+| `MenubarSub` | `actionsRef?` `closeParentOnEsc?` `defaultOpen?` `disabled?` `highlightItemOnHover?` `loopFocus?` `onOpenChange?` `onOpenChangeComplete?` `open?` `orientation?` |
+| `MenubarSubContent` | `align?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `MenubarSubTrigger` | `closeDelay?` `delay?` `disabled?` `inset?` `label?` `nativeButton?` `openOnHover?` `render?` |
+| `MenubarTrigger` | `closeDelay?` `delay?` `disabled?` `handle?` `nativeButton?` `openOnHover?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/message-scroller.md

@@ -0,0 +1,24 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# MessageScroller (L1 primitive)
+
+**when** Streaming chat output. Logs by timestamp → `LogViewer`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/message-scroller.tsx` · family: Realtime · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `MessageScroller` | — |
+| `MessageScrollerButton` | `behavior?` `direction?` `render?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `MessageScrollerContent` | `spacerClassName?` |
+| `MessageScrollerItem` | `messageId?` `scrollAnchor?` |
+| `MessageScrollerProvider` | `autoScroll?` `defaultScrollPosition?` `scrollEdgeThreshold?` `scrollMargin?` `scrollPreviousItemPeek?` |
+| `MessageScrollerViewport` | `preserveScrollOnPrepend?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/message.md

@@ -0,0 +1,24 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Message (L1 primitive)
+
+**when** Assistant/user turns. Timestamped log rows → `LogViewer`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/message.tsx` · family: Surface · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Message` | `align?=start/end` |
+| `MessageAvatar` | — |
+| `MessageContent` | — |
+| `MessageFooter` | — |
+| `MessageGroup` | — |
+| `MessageHeader` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/mini-calendar.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # MiniCalendar
 
+Compact month grid, day cell only.
+
+**when** Inside a popover or sidebar. Full page with events → `EventCalendar`.
+
 `import { MiniCalendar } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/mini-calendar.tsx` · composites
+`packages/ui/src/composites/mini-calendar.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -13,3 +17,17 @@
 | `className` | `string \| undefined` |  |  |
 | `onChange` | `((date: Date \| undefined) => void) \| undefined` |  |  |
 | `value` | `Date \| undefined` |  |  |
+
+## Example
+
+```tsx
+<MiniCalendar value={d} onChange={(v) => set(v)} />
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[mini-calendar-01.tsx](../examples/mini-calendar/mini-calendar-01.tsx)** — MiniCalendar — An always-visible inline calendar (no popover) — side rail of a scheduler, or date filtered next to a list.

package/skills/monkey-mini-app/references/contracts/native-select.md

@@ -0,0 +1,21 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# NativeSelect (L1 primitive)
+
+**when** Short option lists where a plain select is enough and `Select` is overkill.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/native-select.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `NativeSelect` | `size?=default/sm` |
+| `NativeSelectOptGroup` | — |
+| `NativeSelectOption` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/navigation-menu.md

@@ -0,0 +1,27 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# NavigationMenu (L1 primitive)
+
+**when** Not for mini-apps with one screen — use `Tabs` or `AppShell` sidebar.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/navigation-menu.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `NavigationMenu` | `actionsRef?` `align?` `closeDelay?` `delay?` `onOpenChangeComplete?` `onValueChange?` `orientation?=vertical/horizontal` `render?` `value?` |
+| `NavigationMenuContent` | `keepMounted?` `render?` |
+| `NavigationMenuIndicator` | `render?` |
+| `NavigationMenuItem` | `render?` `value?` |
+| `NavigationMenuLink` | `active?` `closeOnClick?` `render?` |
+| `NavigationMenuList` | `render?` |
+| `NavigationMenuPositioner` | `align?` `alignOffset?` `anchor?` `arrowPadding?` `collisionAvoidance?` `collisionBoundary?` `collisionPadding?` `disableAnchorTracking?` `positionMethod?=absolute/fixed` `render?` `side?` `sideOffset?` +1 |
+| `NavigationMenuTrigger` | `nativeButton?` `render?` |
+| `navigationMenuTriggerStyle` (hook/util) | `class?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/notification-center.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # NotificationCenter
 
+Grouped notification list with unread state.
+
+**when** Inbox/alert panel. Audit log (read-only, with time) → `ActivityFeed`.
+
 `import { NotificationCenter, NotificationItem } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/notification-center.tsx` · blocks
+`packages/ui/src/blocks/notification-center.tsx` · family: Feedback & status · type: block
 
 ## Props
 
@@ -21,3 +25,9 @@
 | `body` | `string \| undefined` |  |  |
 | `id` | `string` | ✓ |  |
 | `title` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<NotificationCenter items={[{ id: "n1", title: "构建失败", unread: true }]} />
+```

package/skills/monkey-mini-app/references/contracts/number-field.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # NumberField
 
+Numeric input with min/max/step + steppers.
+
+**when** Any number the user edits — keeps NaN out of your state.
+
 `import { NumberField } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/number-field.tsx` · composites
+`packages/ui/src/composites/number-field.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -15,3 +19,17 @@
 | `onChange` | `((value: number) => void) \| undefined` |  |  |
 | `step` | `number \| undefined` |  |  |
 | `value` | `number \| undefined` |  |  |
+
+## Example
+
+```tsx
+<NumberField min={0} max={100} value={n} onChange={(v) => set(v)} />
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[number-field-01.tsx](../examples/number-field/number-field-01.tsx)** — NumberField — Numeric input with stepper buttons and clamped min/max, so quantity fields never receive NaN or out-of-range text. — _*Plus/minus and typing*_

package/skills/monkey-mini-app/references/contracts/page-header.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # PageHeader
 
@@ -8,7 +8,7 @@ Page title row with optional description and right-side actions.
 
 `import { PageHeader } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/page-header.tsx` · blocks
+`packages/ui/src/blocks/page-header.tsx` · family: Layout & structure · type: block
 
 ## Props
 

package/skills/monkey-mini-app/references/contracts/pagination.md

@@ -0,0 +1,33 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Pagination (L1 primitive)
+
+**when** Only when you page by hand; `DataGrid` does this itself.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/pagination.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Pagination` | — |
+| `PaginationContent` | — |
+| `PaginationEllipsis` | — |
+| `PaginationItem` | — |
+| `PaginationLink` | `isActive?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` |
+| `PaginationNext` | `isActive?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `text?` |
+| `PaginationPrevious` | `isActive?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `text?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[pagination-01.tsx](../examples/pagination/pagination-01.tsx)** — Pagination — Numbered page nav with prev/next and an active page, driven by your own state; DataGrid already includes this when you need a full table.

package/skills/monkey-mini-app/references/contracts/password-field.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # PasswordField
 
+Secret input with reveal toggle.
+
+**when** Typing a token/password into your own state. **Never** persist it to storage.
+
 `import { PasswordField } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/password-field.tsx` · composites
+`packages/ui/src/composites/password-field.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -12,3 +16,9 @@
 |---|---|:---:|---|
 | `onChange` | `((value: string) => void) \| undefined` |  |  |
 | `value` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<PasswordField value={p} onChange={(v) => set(v)} />
+```

package/skills/monkey-mini-app/references/contracts/phone-input.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # PhoneInput
 
+Phone number input with formatting.
+
+**when** CN/mobile numbers.
+
 `import { PhoneInput } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/phone-input.tsx` · composites
+`packages/ui/src/composites/phone-input.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -12,3 +16,9 @@
 |---|---|:---:|---|
 | `onChange` | `((value: string) => void) \| undefined` |  |  |
 | `value` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<PhoneInput value={t} onChange={(v) => set(v)} />
+```