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

package/skills/monkey-mini-app/references/examples/context-menu/context-menu-01.tsx

@@ -0,0 +1,29 @@
+/**
+ * @exampleOf ContextMenu
+ * @title ContextMenu
+ * @scenario Right-click menu bound to a region (a row, a canvas cell) with grouped items and separators.
+ */
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@monkey-mini-app/ui";
+
+export default function ContextMenu01Example() {
+  return (
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger className="rounded-lg border px-3 py-6 text-sm">
+          Right click here
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuGroup>
+            <ContextMenuItem>Inspect</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/dashboard-shell/dashboard-shell-01.tsx

@@ -0,0 +1,78 @@
+/**
+ * @exampleOf DashboardShell
+ * @title DashboardShell
+ * @scenario 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.
+ * @hint Scroll the chart column — the numbers stay; narrow the panel and the rail folds underneath
+ */
+import {
+  ActivityFeed,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DashboardShell,
+  PageHeader,
+  Sparkline,
+  StatCard,
+} from "@monkey-mini-app/ui";
+
+const series = (seed: number, n = 24) =>
+  Array.from({ length: n }, (_, i) => ({
+    value: 40 + Math.round(28 * Math.abs(Math.sin((i + seed) / 3))),
+  }));
+
+const FEED = Array.from({ length: 14 }, (_, i) => ({
+  id: `e${i}`,
+  title: [
+    "node-3 restarted by scheduler",
+    "p95 back under 120 ms",
+    "queue depth 1.2k → 300",
+    "nightly export finished",
+    "certificate renews in 6 days",
+  ][i % 5],
+  time: `${String(23 - (i % 12)).padStart(2, "0")}:${String((i * 7) % 60).padStart(2, "0")}`,
+}));
+
+export default function DashboardShell01Example() {
+  return (
+    <div className="h-[460px]">
+      <DashboardShell
+        header={<PageHeader title="值班总览" description="每 5 秒刷新 · 头部与指标不会跟着内容滑走" />}
+        kpis={
+          <div className="grid grid-cols-4 gap-3 px-4 pb-3">
+            <StatCard title="Requests" value="18.4k" delta="+6%" trend="up" />
+            <StatCard title="p95" value="112 ms" delta="-9 ms" trend="down" />
+            <StatCard title="Errors" value="3" trend="flat" />
+            <StatCard title="Queue" value="290" delta="-910" trend="down" />
+          </div>
+        }
+        main={
+          <div className="flex flex-col gap-3 p-4">
+            {[
+              ["Throughput", 1],
+              ["Latency p95", 5],
+              ["Saturated workers", 9],
+              ["Retries", 13],
+              ["Queue depth", 17],
+            ].map(([title, seed]) => (
+              <Card key={String(title)}>
+                <CardHeader>
+                  <CardTitle className="text-sm font-normal">{title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <Sparkline data={series(Number(seed))} />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        }
+        aside={
+          <div className="flex flex-col gap-2 p-4">
+            <p className="text-muted-foreground text-xs tracking-widest uppercase">Activity</p>
+            <ActivityFeed items={FEED} />
+          </div>
+        }
+      />
+    </div>
+  );
+}

package/skills/monkey-mini-app/references/examples/data-grid/data-grid-01.tsx

@@ -0,0 +1,34 @@
+/**
+ * @exampleOf DataGrid
+ * @title DataGrid
+ * @scenario 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.
+ * @hint Sort cycles asc → desc → none
+ */
+import { type ColumnDef, DataGrid, StatusBadge } from "@monkey-mini-app/ui";
+
+type Run = { id: string; name: string; owner: string; duration: string; status: string };
+
+const runs: Run[] = [
+  { id: "1", name: "login-spec", owner: "Ada", duration: "1.2s", status: "pass" },
+  { id: "2", name: "checkout-spec", owner: "Lin", duration: "4.8s", status: "fail" },
+  { id: "3", name: "search-spec", owner: "Ada", duration: "0.9s", status: "pass" },
+  { id: "4", name: "upload-spec", owner: "Kai", duration: "12.0s", status: "blocked" },
+  { id: "5", name: "grid-spec", owner: "Lin", duration: "3.1s", status: "flaky" },
+  { id: "6", name: "auth-spec", owner: "Kai", duration: "2.0s", status: "running" },
+];
+
+const columns: ColumnDef<Run>[] = [
+  { accessorKey: "name", header: "Name", meta: { sort: true, search: "text" } },
+  { accessorKey: "owner", header: "Owner", meta: { sort: true, search: "text" } },
+  { accessorKey: "duration", header: "Duration", meta: { sort: true, search: "text" } },
+  {
+    accessorKey: "status",
+    header: "Status",
+    meta: { sort: true, search: "text" },
+    cell: ({ getValue }) => <StatusBadge status={String(getValue())} />,
+  },
+];
+
+export default function DataGrid01Example() {
+  return <DataGrid columns={columns} data={runs} pageSize={4} searchPlaceholder="Search runs…" />;
+}

package/skills/monkey-mini-app/references/examples/data-grid/data-grid-02.tsx

@@ -0,0 +1,88 @@
+/**
+ * @exampleOf DataGrid
+ * @title DataGrid · custom cells
+ * @scenario Same grid but the columns render rich cells (avatar, progress bar, status badge) via cell renderers — the pattern for 'run list' style screens.
+ * @hint Avatar, progress, badges, row expand, selection, CSV
+ */
+import { Avatar, AvatarFallback, type ColumnDef, DataGrid, Progress, StatusBadge } from "@monkey-mini-app/ui";
+
+type Ticket = {
+  id: string;
+  key: string;
+  title: string;
+  owner: string;
+  progress: number;
+  status: string;
+};
+
+const tickets: Ticket[] = [
+  { id: "1", key: "TMS-1201", title: "Grid sort reset", owner: "Ada", progress: 80, status: "pass" },
+  { id: "2", key: "TMS-1208", title: "Kanban details", owner: "Lin", progress: 45, status: "running" },
+  { id: "3", key: "TMS-1210", title: "Calendar views", owner: "Kai", progress: 20, status: "blocked" },
+  { id: "4", key: "TMS-1214", title: "Markdown split", owner: "Ada", progress: 100, status: "pass" },
+];
+
+const ticketColumns: ColumnDef<Ticket>[] = [
+  {
+    accessorKey: "key",
+    header: "Key",
+    meta: { sort: true, search: "text" },
+    cell: ({ getValue }) => (
+      <span className="font-mono text-xs text-muted-foreground">{String(getValue())}</span>
+    ),
+  },
+  { accessorKey: "title", header: "Title", meta: { sort: true, search: "text" } },
+  {
+    accessorKey: "owner",
+    header: "Owner",
+    meta: { sort: true, search: "text" },
+    cell: ({ getValue }) => {
+      const name = String(getValue());
+      return (
+        <span className="inline-flex items-center gap-2">
+          <Avatar className="size-5">
+            <AvatarFallback className="text-[9px]">{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          {name}
+        </span>
+      );
+    },
+  },
+  {
+    accessorKey: "progress",
+    header: "Progress",
+    meta: { sort: true, search: "none" },
+    cell: ({ getValue }) => (
+      <div className="w-28">
+        <Progress value={Number(getValue())} />
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    meta: { sort: true, search: "text" },
+    cell: ({ getValue }) => <StatusBadge status={String(getValue())} />,
+  },
+];
+
+export default function DataGrid02Example() {
+  return (
+    <>
+      <DataGrid
+        columns={ticketColumns}
+        data={tickets}
+        pageSize={10}
+        features={{ rowSelection: true, csvExport: true }}
+        searchPlaceholder="Search tickets…"
+        renderExpanded={(row) => (
+          <div className="text-sm">
+            <span className="font-mono text-muted-foreground">{row.key}</span>
+            {" — "}
+            {row.title} assigned to {row.owner}
+          </div>
+        )}
+      />
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/date-picker/date-picker-01.tsx

@@ -0,0 +1,14 @@
+/**
+ * @exampleOf DatePicker
+ * @title DatePicker
+ * @scenario Pick a single calendar date; popover trigger shows the formatted value and supports clearing.
+ */
+import * as React from "react";
+
+import { DatePicker } from "@monkey-mini-app/ui";
+
+export default function DatePicker01Example() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date("2026-08-26"));
+
+  return <DatePicker value={date} onChange={setDate} />;
+}

package/skills/monkey-mini-app/references/examples/date-range-picker/date-range-picker-01.tsx

@@ -0,0 +1,14 @@
+/**
+ * @exampleOf DateRangePicker
+ * @title DateRangePicker
+ * @scenario Pick from/to as one value — one popover, both endpoints validated together, so you never re-check 'to > from' yourself.
+ */
+import * as React from "react";
+
+import { type DateRange, DateRangePicker } from "@monkey-mini-app/ui";
+
+export default function DateRangePicker01Example() {
+  const [range, setRange] = React.useState<DateRange | undefined>();
+
+  return <DateRangePicker value={range} onChange={setRange} />;
+}

package/skills/monkey-mini-app/references/examples/date-time-picker/date-time-picker-01.tsx

@@ -0,0 +1,16 @@
+/**
+ * @exampleOf DateTimePicker
+ * @title DateTimePicker
+ * @scenario Date + time + timezone edited as a single value in one popover, for scheduling where the zone matters (CI triggers, shifts).
+ * @hint One popover: calendar + time
+ */
+import * as React from "react";
+
+import { DateTimePicker } from "@monkey-mini-app/ui";
+
+export default function DateTimePicker01Example() {
+  const [dt, setDt] = React.useState<Date | undefined>(new Date("2026-08-26T09:15:00"));
+  const [zone, setZone] = React.useState("Asia/Shanghai");
+
+  return <DateTimePicker value={dt} onChange={setDt} timezone={zone} onTimezoneChange={setZone} />;
+}

package/skills/monkey-mini-app/references/examples/date-time-range-picker/date-time-range-picker-01.tsx

@@ -0,0 +1,15 @@
+/**
+ * @exampleOf DateTimeRangePicker
+ * @title DateTimeRangePicker
+ * @scenario A time span with both endpoints at day+time precision (log/incident investigation windows).
+ * @hint Two DateTimePickers; allDay switches to a date range
+ */
+import * as React from "react";
+
+import { DateTimeRangePicker } from "@monkey-mini-app/ui";
+
+export default function DateTimeRangePicker01Example() {
+  const [dtRange, setDtRange] = React.useState<{ start?: Date; end?: Date }>({});
+
+  return <DateTimeRangePicker value={dtRange} onChange={setDtRange} />;
+}

package/skills/monkey-mini-app/references/examples/detail-panel/detail-panel-01.tsx

@@ -0,0 +1,21 @@
+/**
+ * @exampleOf DetailPanel
+ * @title DetailPanel
+ * @scenario Slide-over for record details that keeps the list visible and scroll position intact — the alternative to navigating away or a Dialog.
+ */
+import * as React from "react";
+
+import { Button, DetailPanel } from "@monkey-mini-app/ui";
+
+export default function DetailPanel01Example() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open inspector</Button>
+      <DetailPanel open={open} onOpenChange={setOpen} title="login-spec" description="Last run">
+        Failed at step 2
+      </DetailPanel>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/dialog/dialog-01.tsx

@@ -0,0 +1,30 @@
+/**
+ * @exampleOf Dialog
+ * @title Dialog
+ * @scenario Modal flow with trigger/content/header/footer composition and focus trapping; the base for forms that must interrupt the page.
+ */
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@monkey-mini-app/ui";
+
+export default function Dialog01Example() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button />}>Open dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit run</DialogTitle>
+            <DialogDescription>Change metadata and save.</DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/diff-viewer/diff-viewer-01.tsx

@@ -0,0 +1,10 @@
+/**
+ * @exampleOf DiffViewer
+ * @title DiffViewer
+ * @scenario Two strings side by side (unified/split) with added/removed counts — reviewing a config or code change before applying it.
+ */
+import { DiffViewer } from "@monkey-mini-app/ui";
+
+export default function DiffViewer01Example() {
+  return <DiffViewer original={"a\nb\n"} modified={"a\nc\n"} />;
+}

package/skills/monkey-mini-app/references/examples/dropdown-menu/dropdown-menu-01.tsx

@@ -0,0 +1,31 @@
+/**
+ * @exampleOf DropdownMenu
+ * @title DropdownMenu
+ * @scenario Click-to-open action menu on a button, with groups, labels and shortcut hints; for row-level 'more actions'.
+ */
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@monkey-mini-app/ui";
+
+export default function DropdownMenu01Example() {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger render={<Button variant="outline" />}>Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem>Copy</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/duration-input/duration-input-01.tsx

@@ -0,0 +1,20 @@
+/**
+ * @exampleOf DurationInput
+ * @title DurationInput
+ * @scenario Enter a length of time (hours + minutes), not a calendar date — timeouts, SLAs, shift lengths.
+ * @hint Hours and minutes, not a text box
+ */
+import * as React from "react";
+
+import { DurationInput } from "@monkey-mini-app/ui";
+
+export default function DurationInput01Example() {
+  const [duration, setDuration] = React.useState("2h 30m");
+
+  return (
+    <>
+      <DurationInput value={duration} onChange={(v) => setDuration(v)} />
+      <p className="text-muted-foreground mt-2 text-xs">{duration}</p>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/editors.md

@@ -0,0 +1,11 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Examples · editors
+
+Multi-component demos: layout/pattern recipes with no single subject component.
+Copy the whole file into `ui.tsx` (or split it) — imports are `react` + `@monkey-mini-app/ui` only.
+
+| example | what it shows | scenario |
+|---|---|---|
+| [`misc-editors-01.tsx`](./misc-editors/misc-editors-01.tsx) | DiffViewer | DiffViewer driven by app state — switch files and unified/split mode from a toolbar, the shape of a PR review screen. |
+| [`misc-editors-02.tsx`](./misc-editors/misc-editors-02.tsx) | JiraWiki | JiraWiki markup rendered live next to the raw Textarea source (wiki tables, code blocks, colours). |

package/skills/monkey-mini-app/references/examples/empty/empty-01.tsx

@@ -0,0 +1,19 @@
+/**
+ * @exampleOf Empty
+ * @title Empty
+ * @scenario First-run / no-results state with illustration slot, title, description and a primary action; use instead of a blank card.
+ */
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@monkey-mini-app/ui";
+
+export default function Empty01Example() {
+  return (
+    <>
+      <Empty>
+        <EmptyHeader>
+          <EmptyTitle>Nothing here</EmptyTitle>
+          <EmptyDescription>Create the first item.</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/event-calendar/event-calendar-01.tsx

@@ -0,0 +1,53 @@
+/**
+ * @exampleOf EventCalendar
+ * @title EventCalendar
+ * @scenario Month view of events the user can drag/resize, with the model kept in app state via onEventsChange.
+ */
+import * as React from "react";
+
+import { type CalendarEvent, EventCalendar } from "@monkey-mini-app/ui";
+
+const calUser = { id: "u1", name: "Ada", picturePath: null };
+
+export default function EventCalendar01Example() {
+  const [events, setEvents] = React.useState<CalendarEvent[]>([
+    {
+      id: 1,
+      title: "Release freeze",
+      startDate: "2026-08-26T10:00:00",
+      endDate: "2026-08-26T11:30:00",
+      color: "blue",
+      description: "",
+      user: calUser,
+    },
+    {
+      id: 2,
+      title: "QA sync",
+      startDate: "2026-08-26T10:30:00",
+      endDate: "2026-08-26T11:00:00",
+      color: "orange",
+      description: "",
+      user: calUser,
+    },
+    {
+      id: 3,
+      title: "Oncall",
+      startDate: "2026-08-26T00:00:00",
+      endDate: "2026-08-28T00:00:00",
+      color: "green",
+      description: "coverage",
+      user: calUser,
+    },
+    {
+      id: 4,
+      title: "Design review",
+      startDate: "2026-08-27T14:00:00",
+      endDate: "2026-08-27T15:00:00",
+      color: "purple",
+      description: "",
+      user: calUser,
+    },
+  ]);
+
+  return <EventCalendar events={events} onEventsChange={setEvents} view="month" />;
+}

package/skills/monkey-mini-app/references/examples/file-dropzone/file-dropzone-01.tsx

@@ -0,0 +1,14 @@
+/**
+ * @exampleOf FileDropzone
+ * @title FileDropzone
+ * @scenario 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.
+ */
+import * as React from "react";
+
+import { FileDropzone } from "@monkey-mini-app/ui";
+
+export default function FileDropzone01Example() {
+  const [files, setFiles] = React.useState<File[]>([]);
+
+  return <FileDropzone files={files} onFiles={setFiles} />;
+}

package/skills/monkey-mini-app/references/examples/form-sheet/form-sheet-01.tsx

@@ -0,0 +1,85 @@
+/**
+ * @exampleOf FormSheet
+ * @title FormSheet
+ * @scenario 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.
+ * @hint Change a field, then hit Escape — the discard prompt appears; without a change it closes straight away
+ */
+import * as React from "react";
+
+import { Button, FormSheet, Input, NativeSelect, StatusBadge } from "@monkey-mini-app/ui";
+
+export default function FormSheet01Example() {
+  const [open, setOpen] = React.useState(true);
+  const [summary, setSummary] = React.useState("Nightly export drops the last sheet");
+  const [status, setStatus] = React.useState("InProgress");
+  const [dirty, setDirty] = React.useState(false);
+  const [saved, setSaved] = React.useState(0);
+
+  const edit = () => setDirty(true);
+
+  return (
+    <div className="text-muted-foreground flex h-[420px] items-center justify-center text-sm">
+      <p>The sheet is open — scroll the fields, then press Escape.</p>
+
+      <FormSheet
+        open={open}
+        onOpenChange={setOpen}
+        title="Edit issue"
+        description="OPS-1042 · opened 3 days ago"
+        header={
+          <div className="mt-2 flex items-center gap-2">
+            <StatusBadge status={status} />
+            {saved > 0 ? <span className="text-xs">saved {saved}×</span> : null}
+          </div>
+        }
+        dirty={dirty}
+        onSubmit={() => {
+          setDirty(false);
+          setSaved((n) => n + 1);
+          setOpen(false);
+        }}
+        footer={
+          <>
+            <Button type="submit" disabled={!dirty}>
+              Save
+            </Button>
+            <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-3">
+          {Array.from({ length: 8 }, (_, i) => i).map((i) => (
+            <label key={i} className="flex flex-col items-start gap-1 text-sm">
+              <span className="text-xs">{i === 0 ? "Summary" : `Field ${i + 1}`}</span>
+              {i === 0 ? (
+                <Input
+                  value={summary}
+                  onChange={(e) => {
+                    setSummary(e.target.value);
+                    edit();
+                  }}
+                />
+              ) : i === 2 ? (
+                <NativeSelect
+                  value={status}
+                  onChange={(e) => {
+                    setStatus(e.target.value);
+                    edit();
+                  }}
+                >
+                  <option>To Do</option>
+                  <option>InProgress</option>
+                  <option>Done</option>
+                </NativeSelect>
+              ) : (
+                <Input defaultValue={`value ${i + 1}`} onChange={edit} />
+              )}
+            </label>
+          ))}
+        </div>
+      </FormSheet>
+    </div>
+  );
+}

package/skills/monkey-mini-app/references/examples/forms.md

@@ -0,0 +1,16 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Examples · forms
+
+Multi-component demos: layout/pattern recipes with no single subject component.
+Copy the whole file into `ui.tsx` (or split it) — imports are `react` + `@monkey-mini-app/ui` only.
+
+| example | what it shows | scenario |
+|---|---|---|
+| [`misc-forms-01.tsx`](./misc-forms/misc-forms-01.tsx) | Input / Textarea | Free-text pair side by side: single-line Input vs multi-line Textarea, both controlled — the baseline before picking a specialised field. |
+| [`misc-forms-02.tsx`](./misc-forms/misc-forms-02.tsx) | Checkbox / Switch / Radio | Three boolean-ish choices compared: Checkbox (agree), Switch (instant-effect setting), RadioGroup (one of N). Pick by semantics, not looks. |
+| [`misc-forms-03.tsx`](./misc-forms/misc-forms-03.tsx) | Select / NativeSelect | Custom styled Select (compound parts, own trigger width) next to NativeSelect, which uses the OS picker — cheaper on mobile and keyboard. |
+| [`misc-forms-04.tsx`](./misc-forms/misc-forms-04.tsx) | Phone / Password / Currency / Copyable | Format-aware text fields that validate while typing: PhoneInput, PasswordField (mask toggle), CurrencyInput, plus Copyable for read-only tokens/ids. |
+| [`misc-forms-05.tsx`](./misc-forms/misc-forms-05.tsx) | SearchInput / Autocomplete | Two ways to narrow a list: SearchInput (free text with clear) vs Autocomplete (suggest from a fixed option list). |
+| [`misc-forms-06.tsx`](./misc-forms/misc-forms-06.tsx) | TagInput / UserPicker / Rating / ColorPicker | Compact pickers that all store their own value shape: TagInput (string[]), UserPicker (user object), Rating (0–5), ColorPicker (hex). |
+| [`misc-forms-07.tsx`](./misc-forms/misc-forms-07.tsx) | Cascader / Transfer | Multi-value selection patterns: Cascader walks a nested option tree, Transfer moves whole items between available/selected lists. |

package/skills/monkey-mini-app/references/examples/gantt/gantt-01.tsx

@@ -0,0 +1,29 @@
+/**
+ * @exampleOf Gantt
+ * @title Gantt
+ * @scenario Time-phased bars for planning (tasks against a date axis) where dependency order and overlap matter more than exact times.
+ */
+import { Gantt } from "@monkey-mini-app/ui";
+
+export default function Gantt01Example() {
+  return (
+    <>
+      <Gantt
+        tasks={[
+          {
+            id: "t1",
+            title: "Grid",
+            start: new Date("2026-08-01"),
+            end: new Date("2026-08-10"),
+          },
+          {
+            id: "t2",
+            title: "Demo",
+            start: new Date("2026-08-08"),
+            end: new Date("2026-08-20"),
+          },
+        ]}
+      />
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/input/input-01.tsx

@@ -0,0 +1,10 @@
+/**
+ * @exampleOf Input
+ * @title Input
+ * @scenario Plain single-line text bound to state; combine with Label/InputGroup rather than styling the native input.
+ */
+import { Input } from "@monkey-mini-app/ui";
+
+export default function Input01Example() {
+  return <Input id="demo-name" placeholder="Ada" />;
+}