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

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

@@ -0,0 +1,40 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Empty (L1 primitive)
+
+Empty-state block: media + title + description + action.
+
+**when** Any list/panel with no rows — pair media with an `Illu*`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/empty.tsx` · family: Feedback & status · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Empty` | `description?` |
+| `EmptyContent` | — |
+| `EmptyDescription` | — |
+| `EmptyHeader` | — |
+| `EmptyMedia` | `variant?=default/icon` |
+| `EmptyTitle` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Empty><EmptyHeader><EmptyMedia variant="icon"><IlluEmpty /></EmptyMedia><EmptyTitle>还没有数据</EmptyTitle><EmptyDescription>点右上角添加</EmptyDescription></EmptyHeader></Empty>
+```
+
+## 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.
+
+- **[empty-01.tsx](../examples/empty/empty-01.tsx)** — Empty — First-run / no-results state with illustration slot, title, description and a primary action; use instead of a blank card.

package/skills/monkey-mini-app/references/contracts/env-badge.md

@@ -1,13 +1,23 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # EnvBadge
 
+Coloured pill for an environment name.
+
+**when** prd / stg / dev markers in headers and tables.
+
 `import { EnvBadge } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/env-badge.tsx` · blocks
+`packages/ui/src/blocks/env-badge.tsx` · family: Feedback & status · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `env` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<EnvBadge env="production" />
+```

package/skills/monkey-mini-app/references/contracts/env-table.md

@@ -0,0 +1,46 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# EnvTable
+
+Read-only env var table with masked values and copy.
+
+**when** Settings / deploy preview / secrets display
+
+`import { EnvTable, Environment, EnvVariable } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/env-table.tsx` · family: Data & tables · type: block
+
+## Props
+
+Extends `Omit<React.ComponentProps<"div">, "children" | "title">` — those HTML/ARIA props are not repeated below.
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `defaultRevealed` | `boolean \| undefined` |  | Start with all values revealed. Defaults to false. |
+| `title` | `string \| undefined` |  | Optional heading above the table. |
+| `variables` | `EnvVariable[]` | ✓ | Environment variables to display. |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Types
+
+### `Environment`
+
+```ts
+| "production" | "preview" | "development" | (string & {})
+```
+
+### `EnvVariable`
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `description` | `string \| undefined` |  | Optional description shown below the key. |
+| `environment` | `Environment \| undefined` |  | Target environment. When provided, renders as a pill. |
+| `key` | `string` | ✓ | Variable name (e.g. DATABASE_URL). |
+| `value` | `string` | ✓ | Variable value. Masked by default. |
+
+## Example
+
+```tsx
+<EnvTable variables={[{ key: "API_URL", value: "https://…", environment: "production" }]} />
+```

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

@@ -1,50 +1,58 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # EventCalendar
 
-Month / week / day calendar. Event shape: { id, title, start, end, allDay? }.
-Drag empty slots to create; click event to edit. Week/day have all-day row.
+Full calendar (day / week / month / year / agenda). Event shape matches yassir-jeraidi/full-calendar: { id, title, startDate, endDate, color, description, user }.
 
 **when** Scheduling, on-call, release windows
 
-`import { EventCalendar, CalendarView, CalendarEvent } from "@monkey-mini-app/ui"`
+`import { EventCalendar, TCalendarView, IUser, TEventColor } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/event-calendar.tsx` · products
+`packages/ui/src/products/event-calendar.tsx` · family: Calendar & date · type: product
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `className` | `string \| undefined` |  |  |
-| `events` | `CalendarEvent[]` | ✓ |  |
-| `onDayClick` | `((date: Date) => void) \| undefined` |  |  |
-| `onEventClick` | `((event: CalendarEvent) => void) \| undefined` |  |  |
-| `onEventsChange` | `((events: CalendarEvent[]) => void) \| undefined` |  |  |
-| `onValueChange` | `((date: Date) => void) \| undefined` |  |  |
-| `onViewChange` | `((view: CalendarView) => void) \| undefined` |  |  |
-| `value` | `Date \| undefined` |  |  |
-| `view` | `CalendarView \| undefined` |  |  |
+| `date` | `Date \| undefined` |  |  |
+| `events` | `IEvent[]` | ✓ |  |
+| `onEventsChange` | `((events: IEvent[]) => void) \| undefined` |  |  |
+| `users` | `IUser[] \| undefined` |  |  |
+| `view` | `TCalendarView \| undefined` |  |  |
 
 ## Types
 
-### `CalendarView`
+### `TCalendarView`
 
 ```ts
-"month" | "week" | "day"
+"day" | "week" | "month" | "year" | "agenda"
 ```
 
-### `CalendarEvent`
+### `IUser`
 
 | field | type | required | note |
 |---|---|:---:|---|
-| `allDay` | `boolean \| undefined` |  |  |
-| `end` | `Date` | ✓ |  |
 | `id` | `string` | ✓ |  |
-| `start` | `Date` | ✓ |  |
-| `title` | `string` | ✓ |  |
+| `name` | `string` | ✓ |  |
+| `picturePath` | `string \| null` | ✓ |  |
+
+### `TEventColor`
+
+```ts
+| "blue" | "green" | "red" | "yellow" | "purple" | "orange"
+```
 
 ## Example
 
 ```tsx
 <EventCalendar events={events} onEventsChange={setEvents} view="week" />
 ```
+
+## 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.
+
+- **[event-calendar-01.tsx](../examples/event-calendar/event-calendar-01.tsx)** — EventCalendar — Month view of events the user can drag/resize, with the model kept in app state via onEventsChange.

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

@@ -0,0 +1,34 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Field (L1 primitive)
+
+**when** Any form row that must read well and stay accessible.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/field.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Field` | `orientation?=vertical/horizontal/responsive` |
+| `FieldContent` | — |
+| `FieldDescription` | — |
+| `FieldError` | `errors?` |
+| `FieldGroup` | — |
+| `FieldLabel` | — |
+| `FieldLegend` | `variant?=label/legend` |
+| `FieldSeparator` | — |
+| `FieldSet` | — |
+| `FieldTitle` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Field><FieldLabel htmlFor="n">名称</FieldLabel><Input id="n" /><FieldDescription>显示在列表里</FieldDescription></Field>
+```

package/skills/monkey-mini-app/references/contracts/file-dropzone.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # FileDropzone
 
+Drag-drop + click file picker.
+
+**when** Getting a local File into the app (then upload via `ctx.http` in the api layer).
+
 `import { FileDropzone } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/file-dropzone.tsx` · products
+`packages/ui/src/products/file-dropzone.tsx` · family: Form · type: product
 
 ## Props
 
@@ -12,3 +16,17 @@
 |---|---|:---:|---|
 | `files` | `File[] \| undefined` |  |  |
 | `onFiles` | `((files: File[]) => void) \| undefined` |  |  |
+
+## Example
+
+```tsx
+<FileDropzone onFiles={(fs) => set(fs)} />
+```
+
+## 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.
+
+- **[file-dropzone-01.tsx](../examples/file-dropzone/file-dropzone-01.tsx)** — FileDropzone — Drag-drop or click-to-pick file list with per-file name/size and a clear action; the UI half only — upload belongs in main.api.ts.

package/skills/monkey-mini-app/references/contracts/file-tree.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # FileTree
 
+Expandable file/dir tree (icons built in).
+
+**when** Repo/zip contents where selection matters. Plain nested list → `TreeView`.
+
 `import { FileTree, TreeNode } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/file-tree.tsx` · blocks
+`packages/ui/src/blocks/file-tree.tsx` · family: Data & tables · type: block
 
 ## Props
 
@@ -21,3 +25,9 @@
 | `children` | `TreeNode[] \| undefined` |  |  |
 | `id` | `string` | ✓ |  |
 | `label` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<FileTree nodes={[{ name: "src", children: [{ name: "main.api.ts" }] }]} />
+```

package/skills/monkey-mini-app/references/contracts/filter-bar.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # FilterBar
 
@@ -8,7 +8,7 @@ Horizontal wrap row for filters and toolbar controls.
 
 `import { FilterBar } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/filter-bar.tsx` · blocks
+`packages/ui/src/blocks/filter-bar.tsx` · family: Data & tables · type: block
 
 ## Props
 

package/skills/monkey-mini-app/references/contracts/form-sheet.md

@@ -0,0 +1,51 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# FormSheet
+
+Create / edit form over a list you do not want to lose. The usual build has three cracks: the header and footer scroll away with the fields (so the Cancel button is somewhere the user has to hunt for), Enter in a text field submits *something else* or nothing because there is no form around the inputs, and Escape closes a sheet full of unsaved edits. Here only the body is a scroller — header, form and footer are siblings inside a flex column — the fields and the footer share one `<form onSubmit>`, and a dirty sheet asks first.
+
+**when** Page shape: focused create/edit over a list — new record, edit record, wizard-less config
+
+`import { FormSheet } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/form-sheet.tsx` · family: Layout & structure · type: block
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `children` | `React.ReactNode` | ✓ | The scrolling form fields. |
+| `className` | `string \| undefined` |  |  |
+| `description` | `React.ReactNode` |  |  |
+| `dirty` | `boolean \| undefined` |  | Ask before throwing edits away. The app owns the check; the preset owns the prompt. |
+| `footer` | `React.ReactNode` |  | Action row, pinned. Put the primary control in here with `type="submit"`. |
+| `header` | `React.ReactNode` |  | Anything below the title: a badge, a record id, a tab strip. |
+| `onOpenChange` | `(open: boolean) => void` | ✓ |  |
+| `onSubmit` | `((e: FormEvent<HTMLFormElement>) => void) \| undefined` |  | One submit path for the whole sheet: Enter in a field and the footer button land here. |
+| `open` | `boolean` | ✓ |  |
+| `side` | `"top" \| "right" \| "bottom" \| "left" \| undefined` |  |  |
+| `title` | `React.ReactNode` | ✓ |  |
+| `width` | `string \| number \| undefined` |  |  |
+
+## Example
+
+```tsx
+<FormSheet
+  open={Boolean(editing)}
+  onOpenChange={(o) => !o && setEditing(null)}
+  title="Edit issue"
+  dirty={dirty}
+  onSubmit={save}
+  footer={<Button type="submit">Save</Button>}
+>
+  <Input name="summary" />
+</FormSheet>
+```
+
+## 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.
+
+- **[form-sheet-01.tsx](../examples/form-sheet/form-sheet-01.tsx)** — FormSheet — Edit a record over the list: title pinned, fields scrolling between the header and the action row, Enter and Save sharing one submit, and closing a dirty sheet asking first. — _*Change a field, then hit Escape — the discard prompt appears; without a change it closes straight away*_

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

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Gantt
 
+Task bars on a date axis.
+
+**when** Plans/schedules with start+end per row. Ordered events → `Timeline`.
+
 `import { Gantt, GanttTask } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/gantt.tsx` · products
+`packages/ui/src/products/gantt.tsx` · family: Calendar & date · type: product
 
 ## Props
 
@@ -22,3 +26,17 @@
 | `id` | `string` | ✓ |  |
 | `start` | `Date` | ✓ |  |
 | `title` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<Gantt tasks={[{ id: "t1", name: "联调", start: "2026-09-01", end: "2026-09-05" }]} />
+```
+
+## 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.
+
+- **[gantt-01.tsx](../examples/gantt/gantt-01.tsx)** — Gantt — Time-phased bars for planning (tasks against a date axis) where dependency order and overlap matter more than exact times.

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

@@ -1,14 +1,26 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Gauge
 
+Arc gauge for one 0–100 metric.
+
+**when** A single health/capacity number that needs a zone (SLO, disk). Series over time → `Sparkline`.
+
 `import { Gauge } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/gauge.tsx` · blocks
+`packages/ui/src/blocks/gauge.tsx` · family: Chart & data · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
 | `label` | `string \| undefined` |  |  |
+| `size` | `number \| undefined` |  |  |
 | `value` | `number` | ✓ |  |
+
+## Example
+
+```tsx
+<Gauge value={73} label="磁盘" />
+```

package/skills/monkey-mini-app/references/contracts/hover-card.md

@@ -0,0 +1,21 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# HoverCard (L1 primitive)
+
+**when** Peek a user/issue without navigating. Needs a decision → `Dialog`.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { HoverCard, HoverCardContent, HoverCardTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/hover-card.tsx` · family: Surface · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `HoverCard` | `actionsRef?` `defaultOpen?` `defaultTriggerId?` `handle?` `onOpenChange?` `onOpenChangeComplete?` `open?` `triggerId?` |
+| `HoverCardContent` | `align?` `alignOffset?` `render?` `side?` `sideOffset?` |
+| `HoverCardTrigger` | `closeDelay?` `delay?` `handle?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

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

@@ -0,0 +1,24 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# InputGroup (L1 primitive)
+
+**when** Search/url/amount fields with adornments; keep validation in `NumberField` etc.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/input-group.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `InputGroup` | — |
+| `InputGroupAddon` | `align?=inline-end/inline-start/block-start/block-end` |
+| `InputGroupButton` | `focusableWhenDisabled?` `nativeButton?` `render?` `size?=xs/sm/icon-xs/icon-sm` `type?=button/submit/reset` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `InputGroupInput` | — |
+| `InputGroupText` | — |
+| `InputGroupTextarea` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

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

@@ -0,0 +1,33 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Input (L1 primitive)
+
+Single-line text input.
+
+**when** Plain text. Numbers → `NumberField`; secrets → `PasswordField`; search → `SearchInput`.
+
+`import { Input } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/input.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Input` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Input value={v} onChange={(e) => set(e.target.value)} placeholder="名称" />
+```
+
+## 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.
+
+- **[input-01.tsx](../examples/input/input-01.tsx)** — Input — Plain single-line text bound to state; combine with Label/InputGroup rather than styling the native input.

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

@@ -0,0 +1,36 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Item (L1 primitive)
+
+**when** A uniform list row when `DataGrid` is too heavy.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/item.tsx` · family: Layout & structure · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Item` | `render?` `size?=default/xs/sm` `variant?=default/outline/muted` |
+| `ItemActions` | — |
+| `ItemContent` | — |
+| `ItemDescription` | — |
+| `ItemFooter` | — |
+| `ItemGroup` | — |
+| `ItemHeader` | — |
+| `ItemMedia` | `variant?=image/default/icon` |
+| `ItemSeparator` | `orientation?` `render?` |
+| `ItemTitle` | — |
+
+_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.
+
+- **[item-01.tsx](../examples/item/item-01.tsx)** — Item — A uniform row (title + description + trailing actions) inside menus, lists and cards, with an outline variant for grouping.

package/skills/monkey-mini-app/references/contracts/jira-wiki.md

@@ -1,15 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # JiraWiki
 
-Render Jira wiki markup to tokens (headings, lists, tables, [^file], -strike-).
-Style via className / classNames; full control via parseJiraWiki().
+Render Jira wiki markup to tokens (headings, lists, tables, [^file], -strike-). Style via className / classNames; full control via parseJiraWiki().
 
 **when** Jira description / comment body
 
 `import { JiraWiki, JiraWikiClassNames } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/jira-wiki.tsx` · products
+`packages/ui/src/products/jira-wiki.tsx` · family: Rich text · type: product
 
 ## Props
 

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

@@ -1,22 +1,21 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # JqlInput
 
-CodeMirror JQL editor with field/function completion (host injects fields).
+JQL query field: CodeMirror 6 (esm.sh, on demand) with syntax highlighting and field/operator/value completion that opens as you type. Falls back to a plain textarea when the CDN is unreachable — the query still edits.
 
-**when** Issue search / saved filters
+**when** Issue search / saved filters. Needs a real field list: pass `fields`.
 
 `import { JqlInput, JqlSuggestItem } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/jql-input.tsx` · products
+`packages/ui/src/products/jql-input.tsx` · family: Form · type: product
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `className` | `string \| undefined` |  |  |
-| `fields` | `JqlSuggestItem[] \| undefined` |  |  |
-| `functions` | `JqlSuggestItem[] \| undefined` |  |  |
+| `fields` | `JqlSuggestItem[] \| undefined` |  | Field names offered by completion (from your JQL backend). |
 | `height` | `string \| undefined` |  |  |
 | `onChange` | `((value: string) => void) \| undefined` |  |  |
 | `value` | `string` | ✓ |  |
@@ -27,11 +26,19 @@ CodeMirror JQL editor with field/function completion (host injects fields).
 
 | field | type | required | note |
 |---|---|:---:|---|
-| `detail` | `string \| undefined` |  |  |
 | `name` | `string` | ✓ |  |
+| `type` | `string \| undefined` |  |  |
 
 ## Example
 
 ```tsx
-<JqlInput value={jql} onChange={setJql} fields={[{ name: "status" }]} />
+<JqlInput value={jql} onChange={setJql} fields={[{ name: "status" }, { name: "assignee" }]} />
 ```
+
+## 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.
+
+- **[jql-input-01.tsx](../examples/jql-input/jql-input-01.tsx)** — JqlInput — Query-language field with syntax feedback (JQL/SQL-ish filters) — the CodeMirror-powered sibling of SearchInput. — _*CodeMirror JQL · type to complete fields*_

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

@@ -1,13 +1,31 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # JsonViewer
 
+Collapsible JSON tree.
+
+**when** API responses/config. Plain text with wrapping → `CodeBlock`.
+
 `import { JsonViewer } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/json-viewer.tsx` · products
+`packages/ui/src/products/json-viewer.tsx` · family: Discovery & inspect · type: product
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
 | `value` | `unknown` | ✓ |  |
+
+## Example
+
+```tsx
+<JsonViewer value={data} />
+```
+
+## 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.
+
+- **[json-viewer-01.tsx](../examples/json-viewer/json-viewer-01.tsx)** — JsonViewer — Collapsible tree over an API response payload; use for debugging output instead of <pre>{JSON.stringify(...)}.