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

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

@@ -0,0 +1,32 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Popover (L1 primitive)
+
+Anchored floating panel.
+
+**when** Small editor/filter anchored to a control. Menus of commands → `DropdownMenu`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/popover.tsx` · family: Surface · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Popover` | `actionsRef?` `defaultOpen?` `defaultTriggerId?` `handle?` `modal?` `onOpenChange?` `onOpenChangeComplete?` `open?` `triggerId?` |
+| `PopoverContent` | `align?` `alignOffset?` `finalFocus?` `initialFocus?` `render?` `side?` `sideOffset?` |
+| `PopoverDescription` | `render?` |
+| `PopoverHeader` | — |
+| `PopoverTitle` | `render?` |
+| `PopoverTrigger` | `closeDelay?` `delay?` `handle?` `nativeButton?` `openOnHover?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Popover><PopoverTrigger asChild><Button>筛选</Button></PopoverTrigger><PopoverContent>…</PopoverContent></Popover>
+```

package/skills/monkey-mini-app/references/contracts/progress-ring.md

@@ -1,13 +1,25 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # ProgressRing
 
+Circular determinate progress.
+
+**when** One percent-done value in a tight space (card corner, table cell).
+
 `import { ProgressRing } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/progress-ring.tsx` · blocks
+`packages/ui/src/blocks/progress-ring.tsx` · family: Feedback & status · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
+| `size` | `number \| undefined` |  |  |
 | `value` | `number` | ✓ |  |
+
+## Example
+
+```tsx
+<ProgressRing value={45} size={56} />
+```

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

@@ -0,0 +1,39 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Progress (L1 primitive)
+
+Linear determinate progress bar.
+
+**when** Full-width scan/import progress. Compact circle → `ProgressRing`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/progress.tsx` · family: Feedback & status · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Progress` | `format?` `getAriaValueText?` `locale?` `max?` `min?` `render?` `value` |
+| `ProgressIndicator` | `render?` |
+| `ProgressLabel` | `render?` |
+| `ProgressTrack` | `render?` |
+| `ProgressValue` | `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Progress value={scan.progress} />
+```
+
+## 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.
+
+- **[progress-01.tsx](../examples/progress/progress-01.tsx)** — Progress — Determinate percentage bar for a known-length task (upload, batch done/total); use Spinner when progress is unknown.

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

@@ -0,0 +1,33 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Questionnaire (L1 primitive)
+
+**when** Structured ask-the-user blocks; you persist the answers.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/questionnaire.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Questionnaire` | `defaultItem?` `item?` `items?` `onItemChange?` `shortcuts?` |
+| `QuestionnaireActions` | — |
+| `QuestionnaireChoice` | `checked?` `disabled?` `render?` `value` |
+| `QuestionnaireChoiceDescription` | — |
+| `QuestionnaireChoices` | `render?` |
+| `QuestionnaireDescription` | `render?` |
+| `QuestionnaireError` | `render?` |
+| `QuestionnaireInput` | `render?` `type?` |
+| `QuestionnaireItem` | `invalid?` `multiple?` `name` `onStatusChange?` `required?` |
+| `QuestionnaireNext` | `render?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `QuestionnairePrevious` | `render?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `QuestionnaireProgress` | `render?` |
+| `QuestionnaireSkip` | `render?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `QuestionnaireSubmit` | `render?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `QuestionnaireTitle` | `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

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

@@ -1,18 +1,24 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # RadarChart
 
+Multi-axis radar chart.
+
+**when** Comparing an item across 4–8 dimensions (scores, coverage).
+
 `import { RadarChart, ChartConfig } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/radar-chart.tsx` · blocks
+`packages/ui/src/blocks/radar-chart.tsx` · family: Chart & data · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
 | `config` | `ChartConfig` | ✓ |  |
 | `data` | `{ label: string; value: number; }[]` | ✓ |  |
 | `dataKey` | `string \| undefined` |  |  |
+| `size` | `number \| undefined` |  |  |
 
 ## Types
 
@@ -21,3 +27,9 @@
 ```ts
 Record< string, { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> } ) >
 ```
+
+## Example
+
+```tsx
+<RadarChart data={[{ label: "性能", value: 70 }]} />
+```

package/skills/monkey-mini-app/references/contracts/radio-group.md

@@ -0,0 +1,20 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# RadioGroup (L1 primitive)
+
+**when** 2–5 mutually exclusive options. Many options → `Select`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { RadioGroup, RadioGroupItem } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/radio-group.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `RadioGroup` | `disabled?` `form?` `inputRef?` `name?` `onValueChange?` `readOnly?` `render?` `required?` `value?` |
+| `RadioGroupItem` | `disabled?` `inputRef?` `nativeButton?` `readOnly?` `render?` `required?` `value` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Rating
 
+Star rating.
+
+**when** Feedback/score capture, 1–max.
+
 `import { Rating } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/rating.tsx` · composites
+`packages/ui/src/composites/rating.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -13,3 +17,9 @@
 | `max` | `number \| undefined` |  |  |
 | `onChange` | `((value: number) => void) \| undefined` |  |  |
 | `value` | `number \| undefined` |  |  |
+
+## Example
+
+```tsx
+<Rating value={r} onChange={(v) => set(v)} />
+```

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # RelativeDatePicker
 
+Preset ranges (today / last 7 days) → a concrete date range.
+
+**when** Dashboard filters where “last 7 days” beats two calendars.
+
 `import { RelativeDatePicker, RelativePreset } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/relative-date-picker.tsx` · composites
+`packages/ui/src/composites/relative-date-picker.tsx` · family: Calendar & date · type: composite
 
 ## Props
 
@@ -22,3 +26,17 @@
 ```ts
 "today" | "7d" | "30d" | "sprint" | "custom"
 ```
+
+## Example
+
+```tsx
+<RelativeDatePicker onChange={(range, preset) => set(range)} />
+```
+
+## 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.
+
+- **[relative-date-picker-01.tsx](../examples/relative-date-picker/relative-date-picker-01.tsx)** — RelativeDatePicker — Preset ranges ('last 7 days', 'this month') that resolve to absolute timestamps on submit — the usual filter on dashboards and log screens.

package/skills/monkey-mini-app/references/contracts/request-inspector.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # RequestInspector
 
+Side-by-side HTTP request/response panel.
+
+**when** Debugging one API call: method, url, bodies. Multiple calls streaming → `LogViewer`.
+
 `import { RequestInspector } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/request-inspector.tsx` · blocks
+`packages/ui/src/blocks/request-inspector.tsx` · family: Discovery & inspect · type: block
 
 ## Props
 
@@ -14,3 +18,9 @@
 | `request` | `string \| undefined` |  |  |
 | `response` | `string \| undefined` |  |  |
 | `url` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<RequestInspector method="POST" url="/api/x" response="{\"ok\":true}" />
+```

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

@@ -0,0 +1,29 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Resizable (L1 primitive)
+
+Draggable split panes.
+
+**when** Master-detail or editor + preview inside the app body.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/resizable.tsx` · family: Layout & structure · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `ResizableHandle` | `disabled?` `disableDoubleClick?` `elementRef?` `withHandle?` |
+| `ResizablePanel` | `collapsedSize?` `collapsible?` `defaultSize?` `disabled?` `elementRef?` `groupResizeBehavior?=preserve-relative-size/preserve-pixel-size` `maxSize?` `minSize?` `onResize?` `panelRef?` |
+| `ResizablePanelGroup` | `defaultLayout?` `disableCursor?` `disabled?` `elementRef?` `groupRef?` `onLayoutChange?` `onLayoutChanged?` `orientation?=vertical/horizontal` `resizeTargetMinimumSize?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<ResizablePanelGroup orientation="horizontal"><ResizablePanel>list</ResizablePanel><ResizableHandle /><ResizablePanel>detail</ResizablePanel></ResizablePanelGroup>
+```

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

@@ -0,0 +1,31 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Reveal
+
+Entrance reveal — fade and rise, with a per-item `delay` for a stagger. This is the kit's front door to the platform `motion` build (`/mma/vendors/motion.js`, one shared React). Use it for the common case and reach for `import { motion, AnimatePresence } from "motion/react"` when you need exit, layout, or gesture animation — `AnimatePresence` in particular is what keeps a removing row from vanishing mid-transition.
+
+**when** A card, row, or section appearing on first paint or after a filter change. Not for a hover/press response (one property: use a Tailwind `transition`) and not for animating an element out (use `AnimatePresence`).
+
+`import { Reveal } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/reveal.tsx` · family: Animation · type: block
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `children` | `React.ReactNode` | ✓ |  |
+| `className` | `string \| undefined` |  |  |
+| `delay` | `number \| undefined` |  | Stagger in ms — pass `i * 60` for a list. |
+| `distance` | `number \| undefined` |  | Rise distance in px. `0` fades in place. |
+| `style` | `React.CSSProperties \| undefined` |  |  |
+
+## Example
+
+```tsx
+{rows.map((r, i) => (
+  <Reveal key={r.id} delay={i * 60}>
+    <Card>{r.title}</Card>
+  </Reveal>
+))}
+```

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # RichTextEditor
 
+Lightweight rich-text editor (contentEditable + toolbar), same idea as `react-simple-wysiwyg`. HTML is browser-generated — sanitize server-side if needed.
+
+**when** Notes/descriptions you store as **HTML**. Markdown → `MarkdownEditor`; code → `CodeEditor`. Sanitize server-side before rendering elsewhere.
+
 `import { RichTextEditor } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/rich-text-editor.tsx` · products
+`packages/ui/src/products/rich-text-editor.tsx` · family: Rich text · type: product
 
 ## Props
 
@@ -13,3 +17,11 @@
 | `onChange` | `((html: string) => void) \| undefined` |  |  |
 | `placeholder` | `string \| undefined` |  |  |
 | `value` | `string \| undefined` |  |  |
+
+## 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.
+
+- **[rich-text-editor-01.tsx](../examples/rich-text-editor/rich-text-editor-01.tsx)** — RichTextEditor — WYSIWYG editing with a local contentEditable toolbar (bold/list/quote) — no CDN, no dependency; use when users are not writing raw markdown. — _*Tiptap — toolbar is live*_

package/skills/monkey-mini-app/references/contracts/run-timeline.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # RunTimeline
 
+Timeline of run phases with duration + status.
+
+**when** CI/agent/job phases on a time axis. Plain ordered events → `Timeline`.
+
 `import { RunTimeline, TimelineItem } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/run-timeline.tsx` · blocks
+`packages/ui/src/blocks/run-timeline.tsx` · family: Realtime · type: block
 
 ## Props
 
@@ -22,3 +26,17 @@
 | `id` | `string` | ✓ |  |
 | `time` | `string \| undefined` |  |  |
 | `title` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<RunTimeline items={[{ id: "p1", title: "checkout", status: "pass", time: "3s" }]} />
+```
+
+## 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.
+
+- **[run-timeline-01.tsx](../examples/run-timeline/run-timeline-01.tsx)** — RunTimeline — Ordered steps of one job (queued → running → done) with per-step status; denser than a Table when the story is sequence.

package/skills/monkey-mini-app/references/contracts/scroll-area.md

@@ -0,0 +1,20 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# ScrollArea (L1 primitive)
+
+**when** A bounded panel (list in a card). Whole-page scroll → plain div.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { ScrollArea, ScrollBar } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/scroll-area.tsx` · family: Layout & structure · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `ScrollArea` | `overflowEdgeThreshold?` `render?` |
+| `ScrollBar` | `keepMounted?` `orientation?=vertical/horizontal` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

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

@@ -1,13 +1,31 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Scrollspy
 
+Anchor nav that highlights the section in view.
+
+**when** Long settings/report page with jump links.
+
 `import { Scrollspy } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/scrollspy.tsx` · blocks
+`packages/ui/src/blocks/scrollspy.tsx` · family: Navigation · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `sections` | `{ id: string; label: string; }[]` | ✓ |  |
+
+## Example
+
+```tsx
+<Scrollspy sections={[{ id: "overview", 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.
+
+- **[scrollspy-01.tsx](../examples/scrollspy/scrollspy-01.tsx)** — Scrollspy — Section nav that highlights whichever section is currently in view — long settings/docs pages; wire it to element ids.

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # SearchInput
 
+Search box with debounce.
+
+**when** Filter-as-you-type against `DataGrid`/lists — use `onDebouncedChange` for network calls.
+
 `import { SearchInput } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/search-input.tsx` · composites
+`packages/ui/src/composites/search-input.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -15,3 +19,9 @@
 | `onDebouncedChange` | `((value: string) => void) \| undefined` |  |  |
 | `placeholder` | `string \| undefined` |  |  |
 | `value` | `string \| undefined` |  |  |
+
+## Example
+
+```tsx
+<SearchInput onDebouncedChange={(q) => call("list", { q })} />
+```

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

@@ -0,0 +1,36 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Select (L1 primitive)
+
+Dropdown single-choice from a fixed list.
+
+**when** Closed set of options (searchable/large → `Autocomplete` or `DataGrid` filter).
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/select.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Select` | `actionsRef?` `autoComplete?` `defaultOpen?` `disabled?` `form?` `highlightItemOnHover?` `inputRef?` `isItemEqualToValue?` `items?` `itemToStringLabel?` `itemToStringValue?` `modal?` +9 |
+| `SelectContent` | `align?` `alignItemWithTrigger?` `alignOffset?` `finalFocus?` `render?` `side?` `sideOffset?` |
+| `SelectGroup` | `render?` |
+| `SelectItem` | `disabled?` `label?` `nativeButton?` `render?` `value?` |
+| `SelectLabel` | `render?` |
+| `SelectScrollDownButton` | `keepMounted?` `render?` |
+| `SelectScrollUpButton` | `keepMounted?` `render?` |
+| `SelectSeparator` | `orientation?` `render?` |
+| `SelectTrigger` | `disabled?` `nativeButton?` `render?` `size?=default/sm` |
+| `SelectValue` | `placeholder?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Select value={v} onValueChange={set}><SelectTrigger><SelectValue placeholder="选择" /></SelectTrigger><SelectContent><SelectItem value="a">A</SelectItem></SelectContent></Select>
+```

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

@@ -0,0 +1,27 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Separator (L1 primitive)
+
+Horizontal/vertical rule.
+
+**when** Grouping inside panels.
+
+`import { Separator } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/separator.tsx` · family: Layout & structure · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Separator` | `orientation?` `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.
+
+- **[separator-01.tsx](../examples/separator/separator-01.tsx)** — Separator — Horizontal or vertical rule that inherits theme spacing, for splitting toolbar groups and metadata rows.

package/skills/monkey-mini-app/references/contracts/settings-split.md

@@ -0,0 +1,53 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# SettingsSplit
+
+Preferences / long-form page: a jump list that always matches the sections it scrolls to. Hand-rolled, this shape fails in three quiet ways: the nav's `href="#x"` and the section's `id` drift apart and the highlight never moves; the whole page scrolls so the nav scrolls out of view with the content it navigates; and a save bar placed after the content disappears below the fold. Here the ids come from one array, the nav and the content are independent scrollers, the jump list collapses to a pinned row when the panel is narrow, and `footer` is a sibling of the scroller — always visible, never part of the scroll.
+
+**when** Page shape: a settings page, integration config, or a long report with anchored sections
+
+`import { SettingsSplit, SettingsSection } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/settings-split.tsx` · family: Layout & structure · type: block
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
+| `footer` | `React.ReactNode` |  | Pinned to the bottom of the **content** pane — an unsaved-changes bar belongs to what it applies to, not to the window. |
+| `nav` | `React.ReactNode` |  | Anything above the jump list: page title, search, a plan badge. |
+| `navWidth` | `number \| undefined` |  | Jump-list width on wide screens, px. Default 224. |
+| `sections` | `SettingsSection[]` | ✓ | The page's sections, in nav order. |
+
+## Types
+
+### `SettingsSection`
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `content` | `React.ReactNode` | ✓ |  |
+| `description` | `string \| undefined` |  | One line under the heading — what this section is for. |
+| `id` | `string` | ✓ | The anchor id. The preset puts it on the section **and** hands the same value to the jump list, so a nav that silently never highlights is not reachable from outside. |
+| `label` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<SettingsSplit
+  sections={[
+    { id: "general", label: "通用", content: <GeneralForm /> },
+    { id: "hooks", label: "Webhook", description: "出站事件", content: <HooksForm /> },
+  ]}
+  nav={<PageHeader title="设置" />}
+  footer={dirty ? <UnsavedBar onSave={save} /> : undefined}
+/>
+```
+
+## 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.
+
+- **[settings-split-01.tsx](../examples/settings-split/settings-split-01.tsx)** — SettingsSplit — A settings page in a fixed-height panel: the jump list tracks the section you are reading, each side scrolls on its own, and the unsaved bar stays pinned to the content pane. — _*Scroll the sections — the nav highlight follows; edit a field and the save bar appears without the layout moving*_

package/skills/monkey-mini-app/references/contracts/severity-chip.md

@@ -1,13 +1,23 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # SeverityChip
 
+Chip for severity/blocker level.
+
+**when** P0–P4, blocker/critical columns. Run outcome → `StatusBadge`.
+
 `import { SeverityChip } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/severity-chip.tsx` · blocks
+`packages/ui/src/blocks/severity-chip.tsx` · family: Feedback & status · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `severity` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<SeverityChip severity="critical" />
+```