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

package/skills/monkey-mini-app/references/contracts/confirm-dialog.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # ConfirmDialog
 
+Controlled yes/no dialog with loading-safe confirm.
+
+**when** Any destructive action. Needs a form inside → compose `Dialog` yourself.
+
 `import { ConfirmDialog } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/confirm-dialog.tsx` · composites
+`packages/ui/src/composites/confirm-dialog.tsx` · family: Surface · type: composite
 
 ## Props
 
@@ -17,3 +21,17 @@
 | `onOpenChange` | `(open: boolean) => void` | ✓ |  |
 | `open` | `boolean` | ✓ |  |
 | `title` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<ConfirmDialog open={open} title="删除这条？" onConfirm={remove} onOpenChange={setOpen} />
+```
+
+## 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.
+
+- **[confirm-dialog-01.tsx](../examples/confirm-dialog/confirm-dialog-01.tsx)** — ConfirmDialog / Toast — Destructive-action guard — one click opens a yes/no dialog, cancel keeps state; pair with toast for the result. Do not hand-roll a Dialog for confirmations.

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

@@ -0,0 +1,41 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# ContextMenu (L1 primitive)
+
+**when** Row/canvas operations. Trigger-button actions → `DropdownMenu`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/context-menu.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `ContextMenu` | `actionsRef?` `closeParentOnEsc?` `defaultOpen?` `disabled?` `highlightItemOnHover?` `loopFocus?` `onOpenChange?` `onOpenChangeComplete?` `open?` `orientation?` |
+| `ContextMenuCheckboxItem` | `checked?` `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `onCheckedChange?` `render?` |
+| `ContextMenuContent` | `align?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `ContextMenuGroup` | `render?` |
+| `ContextMenuItem` | `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `render?` `variant?=default/destructive` |
+| `ContextMenuLabel` | `inset?` `render?` |
+| `ContextMenuPortal` | `container?` `keepMounted?` `render?` |
+| `ContextMenuRadioGroup` | `disabled?` `onValueChange?` `render?` `value?` |
+| `ContextMenuRadioItem` | `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `render?` `value` |
+| `ContextMenuSeparator` | `orientation?` `render?` |
+| `ContextMenuShortcut` | — |
+| `ContextMenuSub` | `actionsRef?` `closeParentOnEsc?` `defaultOpen?` `disabled?` `highlightItemOnHover?` `loopFocus?` `onOpenChange?` `onOpenChangeComplete?` `open?` `orientation?` |
+| `ContextMenuSubContent` | `align?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `ContextMenuSubTrigger` | `closeDelay?` `delay?` `disabled?` `inset?` `label?` `nativeButton?` `openOnHover?` `render?` |
+| `ContextMenuTrigger` | `render?` |
+
+_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.
+
+- **[context-menu-01.tsx](../examples/context-menu/context-menu-01.tsx)** — ContextMenu — Right-click menu bound to a region (a row, a canvas cell) with grouped items and separators.

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

@@ -1,13 +1,23 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Copyable
 
+Inline text with a copy button.
+
+**when** IDs, hashes, URLs, tokens the user pastes elsewhere.
+
 `import { Copyable } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/copyable.tsx` · composites
+`packages/ui/src/composites/copyable.tsx` · family: Discovery & inspect · type: composite
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `value` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<Copyable value="i_1724918400" />
+```

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # CurrencyInput
 
+Amount input with grouping + currency prefix.
+
+**when** Money fields; keeps the raw string out of your state.
+
 `import { CurrencyInput } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/currency-input.tsx` · composites
+`packages/ui/src/composites/currency-input.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -13,3 +17,9 @@
 | `currency` | `string \| undefined` |  |  |
 | `onChange` | `((value: string) => void) \| undefined` |  |  |
 | `value` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<CurrencyInput currency="CNY" onChange={(v) => set(v)} />
+```

package/skills/monkey-mini-app/references/contracts/dashboard-shell.md

@@ -0,0 +1,41 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# DashboardShell
+
+Overview page with a pinned header + KPI strip and exactly one scrolling body. The failure this exists for: the page is a plain column, `overflow-auto` ends up on the outermost div, and the first chart the user scrolls past takes the header and the KPI row with it — a dashboard whose numbers scroll away is not a dashboard. The aside gets its own scroller when there is room for two, and folds under `main` into the single body scroller when there is not, rather than becoming a third half-height pane.
+
+**when** Page shape: metrics up top, charts below, optional activity rail — ops overviews, monitor walls
+
+`import { DashboardShell } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/dashboard-shell.tsx` · family: Layout & structure · type: block
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `aside` | `ReactNode` |  | Activity feed / top offenders. Sits beside `main` on wide screens, stacks under it when narrow. |
+| `asideWidth` | `number \| undefined` |  | Aside width in px on wide screens. Default 320. |
+| `className` | `string \| undefined` |  |  |
+| `header` | `ReactNode` |  | Title row / `PageHeader`. Pinned: it stays while the content scrolls under it. |
+| `kpis` | `ReactNode` |  | KPI strip. Pinned with the header — the point of a dashboard is that the numbers hold. |
+| `main` | `ReactNode` | ✓ | Charts and tables. The scrolling body. |
+
+## Example
+
+```tsx
+<DashboardShell
+  header={<PageHeader title="值班" description="每 5 秒" />}
+  kpis={<div className="grid grid-cols-4 gap-3">{cards}</div>}
+  main={<Charts />}
+  aside={<ActivityFeed items={items} />}
+/>
+```
+
+## 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.
+
+- **[dashboard-shell-01.tsx](../examples/dashboard-shell/dashboard-shell-01.tsx)** — DashboardShell — Ops overview in a fixed-height panel: the header and KPI strip stay pinned while the charts scroll, and the activity rail scrolls on its own beside them. — _*Scroll the chart column — the numbers stay; narrow the panel and the rail folds underneath*_

package/skills/monkey-mini-app/references/contracts/data-grid.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DataGrid
 
@@ -8,7 +8,7 @@ Product table: sort, column filter popover, global search, pagination.
 
 `import { DataGrid, SearchVariant, DataGridColumnMeta, DataGridFeatures } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/data-grid.tsx` · products
+`packages/ui/src/products/data-grid.tsx` · family: Data & tables · type: product
 
 ## Props
 
@@ -47,9 +47,7 @@ Product table: sort, column filter popover, global search, pagination.
 
 | field | type | required | note |
 |---|---|:---:|---|
-| `autoResetPageIndex` | `boolean \| undefined` |  | TanStack `autoResetPageIndex` — reset to page 1 when the `data` array
-reference changes (default true). Turn off for inline edits / appends that
-must keep the current page; pair with a `key` remount for structural loads. |
+| `autoResetPageIndex` | `boolean \| undefined` |  | TanStack `autoResetPageIndex` — reset to page 1 when the `data` array reference changes (default true). Turn off for inline edits / appends that must keep the current page; pair with a `key` remount for structural loads. |
 | `columnResize` | `boolean \| undefined` |  |  |
 | `columnSearch` | `boolean \| undefined` |  |  |
 | `columnVisibility` | `boolean \| undefined` |  |  |
@@ -83,5 +81,14 @@ const [page, setPage] = useState(0)
   pageIndex={page}
   onPageIndexChange={setPage}
 />
-// “回到第 1 页”按钮：setPage(0)；结构性重载也可用 key 重挂
+// “back to page 1” button: setPage(0); for a structural reload you can also remount via key
 ```
+
+## 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.
+
+- **[data-grid-01.tsx](../examples/data-grid/data-grid-01.tsx)** — DataGrid — The default table for anything bigger than a static list: column sort (asc→desc→off), global search box, pagination — all from props, no external state library. — _*Sort cycles asc → desc → none*_
+- **[data-grid-02.tsx](../examples/data-grid/data-grid-02.tsx)** — DataGrid · custom cells — Same grid but the columns render rich cells (avatar, progress bar, status badge) via cell renderers — the pattern for 'run list' style screens. — _*Avatar, progress, badges, row expand, selection, CSV*_

package/skills/monkey-mini-app/references/contracts/date-picker.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DatePicker
 
+Single calendar date (day precision).
+
+**when** Filtering or storing one day. With a clock → `DateTimePicker`.
+
 `import { DatePicker } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/date-picker.tsx` · composites
+`packages/ui/src/composites/date-picker.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -15,3 +19,17 @@
 | `onChange` | `((date: Date \| undefined) => void) \| undefined` |  |  |
 | `placeholder` | `string \| undefined` |  |  |
 | `value` | `Date \| undefined` |  |  |
+
+## Example
+
+```tsx
+<DatePicker 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.
+
+- **[date-picker-01.tsx](../examples/date-picker/date-picker-01.tsx)** — DatePicker — Pick a single calendar date; popover trigger shows the formatted value and supports clearing.

package/skills/monkey-mini-app/references/contracts/date-range-picker.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DateRangePicker
 
@@ -8,7 +8,7 @@ Popover date range with month/year chrome.
 
 `import { DateRangePicker } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/date-range-picker.tsx` · composites
+`packages/ui/src/composites/date-range-picker.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -24,3 +24,11 @@ Popover date range with month/year chrome.
 ```tsx
 <DateRangePicker value={range} onChange={setRange} />
 ```
+
+## 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.
+
+- **[date-range-picker-01.tsx](../examples/date-range-picker/date-range-picker-01.tsx)** — DateRangePicker — Pick from/to as one value — one popover, both endpoints validated together, so you never re-check 'to > from' yourself.

package/skills/monkey-mini-app/references/contracts/date-time-picker.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DateTimePicker
 
+Date + time, optional timezone.
+
+**when** Scheduling moments, not days.
+
 `import { DateTimePicker } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/date-time-picker.tsx` · composites
+`packages/ui/src/composites/date-time-picker.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -16,3 +20,17 @@
 | `placeholder` | `string \| undefined` |  |  |
 | `timezone` | `string \| undefined` |  |  |
 | `value` | `Date \| undefined` |  |  |
+
+## Example
+
+```tsx
+<DateTimePicker 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.
+
+- **[date-time-picker-01.tsx](../examples/date-time-picker/date-time-picker-01.tsx)** — DateTimePicker — Date + time + timezone edited as a single value in one popover, for scheduling where the zone matters (CI triggers, shifts). — _*One popover: calendar + time*_

package/skills/monkey-mini-app/references/contracts/date-time-range-picker.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DateTimeRangePicker
 
+From/to moments, all-day toggle.
+
+**when** Run windows, on-call shifts.
+
 `import { DateTimeRangePicker, DateTimeRange } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/date-time-range-picker.tsx` · composites
+`packages/ui/src/composites/date-time-range-picker.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -22,3 +26,17 @@
 |---|---|:---:|---|
 | `end` | `Date \| undefined` |  |  |
 | `start` | `Date \| undefined` |  |  |
+
+## Example
+
+```tsx
+<DateTimeRangePicker onChange={(r) => set(r)} />
+```
+
+## 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.
+
+- **[date-time-range-picker-01.tsx](../examples/date-time-range-picker/date-time-range-picker-01.tsx)** — DateTimeRangePicker — A time span with both endpoints at day+time precision (log/incident investigation windows). — _*Two DateTimePickers; allDay switches to a date range*_

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

@@ -1,13 +1,23 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DescriptionList
 
+Label/value pairs, two columns.
+
+**when** Detail/inspector panel of a selected row — the default “show one record” view.
+
 `import { DescriptionList } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/description-list.tsx` · blocks
+`packages/ui/src/blocks/description-list.tsx` · family: Layout & structure · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `items` | `{ label: string; value: string; }[]` | ✓ |  |
+
+## Example
+
+```tsx
+<DescriptionList items={[{ label: "状态", value: "运行中" }]} />
+```

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

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DetailPanel
 
@@ -8,7 +8,7 @@ Right-side inspector Sheet for a selected row/entity.
 
 `import { DetailPanel } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/detail-panel.tsx` · blocks
+`packages/ui/src/blocks/detail-panel.tsx` · family: Surface · type: block
 
 ## Props
 
@@ -25,3 +25,11 @@ Right-side inspector Sheet for a selected row/entity.
 ```tsx
 <DetailPanel open={!!id} onOpenChange={() => setId(null)} title="Run #12">{body}</DetailPanel>
 ```
+
+## 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.
+
+- **[detail-panel-01.tsx](../examples/detail-panel/detail-panel-01.tsx)** — DetailPanel — Slide-over for record details that keeps the list visible and scroll position intact — the alternative to navigating away or a Dialog.

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

@@ -0,0 +1,44 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Dialog (L1 primitive)
+
+Modal overlay: Trigger + Content(+Header/Footer).
+
+**when** Focused edit/confirm flow. Needs no focus takeover → `Sheet`. Destructive yes/no → `ConfirmDialog`. Size it with `width` on `DialogContent`: the base caps at `sm:max-w-sm`, so a `max-w-*` in `className` loses at ≥sm.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/dialog.tsx` · family: Surface · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Dialog` | `actionsRef?` `defaultOpen?` `defaultTriggerId?` `disablePointerDismissal?` `handle?` `modal?` `onOpenChange?` `onOpenChangeComplete?` `open?` `triggerId?` |
+| `DialogClose` | `nativeButton?` `render?` |
+| `DialogContent` | `finalFocus?` `initialFocus?` `render?` `showCloseButton?` `width?` |
+| `DialogDescription` | `render?` |
+| `DialogFooter` | `showCloseButton?` |
+| `DialogHeader` | — |
+| `DialogOverlay` | `forceRender?` `render?` |
+| `DialogPortal` | `container?` `keepMounted?` `render?` |
+| `DialogTitle` | `render?` |
+| `DialogTrigger` | `handle?` `nativeButton?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Dialog open={open} onOpenChange={setOpen}><DialogTrigger asChild><Button>编辑</Button></DialogTrigger><DialogContent><DialogHeader><DialogTitle>标题</DialogTitle></DialogHeader>…<DialogFooter><Button onClick={save}>保存</Button></DialogFooter></DialogContent></Dialog>
+```
+
+## 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.
+
+- **[dialog-01.tsx](../examples/dialog/dialog-01.tsx)** — Dialog — Modal flow with trigger/content/header/footer composition and focus trapping; the base for forms that must interrupt the page.

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

@@ -1,16 +1,35 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DiffViewer
 
+Unified or split diff view.
+
+**when** Comparing two versions of text. Pass `original` + `modified` strings.
+
 `import { DiffViewer } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/diff-viewer.tsx` · products
+`packages/ui/src/products/diff-viewer.tsx` · family: Discovery & inspect · type: product
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `fileName` | `string \| undefined` |  |  |
+| `language` | `string \| undefined` |  |  |
 | `mode` | `"unified" \| "split" \| undefined` |  |  |
 | `modified` | `string` | ✓ |  |
 | `original` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<DiffViewer original={a} modified={b} language="ts" mode="split" />
+```
+
+## 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.
+
+- **[diff-viewer-01.tsx](../examples/diff-viewer/diff-viewer-01.tsx)** — DiffViewer — Two strings side by side (unified/split) with added/removed counts — reviewing a config or code change before applying it.

package/skills/monkey-mini-app/references/contracts/donut-chart.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DonutChart
 
+Ring chart with centre label.
+
+**when** Part-of-whole (≤6 slices): storage usage, status split. More categories → `StackedBarChart`.
+
 `import { DonutChart, ChartConfig, Slice } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/donut-chart.tsx` · blocks
+`packages/ui/src/blocks/donut-chart.tsx` · family: Chart & data · type: block
 
 ## Props
 
@@ -31,3 +35,9 @@ Record< string, { label?: React.ReactNode icon?: React.ComponentType } & ( | { c
 | `fill` | `string` | ✓ |  |
 | `name` | `string` | ✓ |  |
 | `value` | `number` | ✓ |  |
+
+## Example
+
+```tsx
+<DonutChart data={[{ label: "OK", value: 82, color: "var(--primary)" }]} center="82%" />
+```

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

@@ -0,0 +1,29 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Drawer (L1 primitive)
+
+**when** Mobile-ish bottom sheet on narrow panels. Desktop detail → `Sheet`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/drawer.tsx` · family: Surface · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Drawer` | `actionsRef?` `defaultOpen?` `defaultSnapPoint?` `defaultTriggerId?` `disablePointerDismissal?` `handle?` `modal?` `onOpenChange?` `onOpenChangeComplete?` `onSnapPointChange?` `open?` `showSwipeHandle?` +5 |
+| `DrawerClose` | `nativeButton?` `render?` |
+| `DrawerContent` | `finalFocus?` `initialFocus?` `render?` |
+| `DrawerDescription` | `render?` |
+| `DrawerFooter` | — |
+| `DrawerHeader` | — |
+| `DrawerOverlay` | `forceRender?` `render?` |
+| `DrawerPortal` | `container?` `keepMounted?` `render?` |
+| `DrawerSwipeHandle` | — |
+| `DrawerTitle` | `render?` |
+| `DrawerTrigger` | `handle?` `nativeButton?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

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

@@ -0,0 +1,49 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# DropdownMenu (L1 primitive)
+
+Command menu on a trigger.
+
+**when** Row `MoreHorizontal` actions. Free-form panel content → `Popover`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/dropdown-menu.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `DropdownMenu` | `actionsRef?` `closeParentOnEsc?` `defaultOpen?` `defaultTriggerId?` `disabled?` `handle?` `highlightItemOnHover?` `loopFocus?` `modal?` `onOpenChange?` `onOpenChangeComplete?` `open?` +2 |
+| `DropdownMenuCheckboxItem` | `checked?` `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `onCheckedChange?` `render?` |
+| `DropdownMenuContent` | `align?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `DropdownMenuGroup` | `render?` |
+| `DropdownMenuItem` | `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `render?` `variant?=default/destructive` |
+| `DropdownMenuLabel` | `inset?` `render?` |
+| `DropdownMenuPortal` | `container?` `keepMounted?` `render?` |
+| `DropdownMenuRadioGroup` | `disabled?` `onValueChange?` `render?` `value?` |
+| `DropdownMenuRadioItem` | `closeOnClick?` `disabled?` `inset?` `label?` `nativeButton?` `render?` `value` |
+| `DropdownMenuSeparator` | `orientation?` `render?` |
+| `DropdownMenuShortcut` | — |
+| `DropdownMenuSub` | `actionsRef?` `closeParentOnEsc?` `defaultOpen?` `disabled?` `highlightItemOnHover?` `loopFocus?` `onOpenChange?` `onOpenChangeComplete?` `open?` `orientation?` |
+| `DropdownMenuSubContent` | `align?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `DropdownMenuSubTrigger` | `closeDelay?` `delay?` `disabled?` `inset?` `label?` `nativeButton?` `openOnHover?` `render?` |
+| `DropdownMenuTrigger` | `closeDelay?` `delay?` `disabled?` `handle?` `nativeButton?` `openOnHover?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<DropdownMenu><DropdownMenuTrigger asChild><Button><Icon.MoreHorizontal /></Button></DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem onClick={edit}>编辑</DropdownMenuItem></DropdownMenuContent></DropdownMenu>
+```
+
+## 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.
+
+- **[dropdown-menu-01.tsx](../examples/dropdown-menu/dropdown-menu-01.tsx)** — DropdownMenu — Click-to-open action menu on a button, with groups, labels and shortcut hints; for row-level 'more actions'.

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # DurationInput
 
+Duration text field (e.g. `1h30m`) with minutes.
+
+**when** Timeouts/estimates where you store minutes but type human units.
+
 `import { DurationInput } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/duration-input.tsx` · composites
+`packages/ui/src/composites/duration-input.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -12,3 +16,17 @@
 |---|---|:---:|---|
 | `onChange` | `((value: string, minutes: number) => void) \| undefined` |  |  |
 | `value` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<DurationInput value="45m" onChange={(v, min) => set(min)} />
+```
+
+## 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.
+
+- **[duration-input-01.tsx](../examples/duration-input/duration-input-01.tsx)** — DurationInput — Enter a length of time (hours + minutes), not a calendar date — timeouts, SLAs, shift lengths. — _*Hours and minutes, not a text box*_