@cocoar/vue-ui 3.2.0-beta.6 → 3.2.0-beta.8

package/bin/cli.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+// `npx @cocoar/vue-ui skill` — install the Agent Skill that ships in this package.
+//
+// The skill sits in skills/cocoar-vue-ui/ at the package root. The skills CLI (npx skills,
+// https://github.com/vercel-labs/skills) installs skills from git repos and local folders but
+// has no npm source, so the plain command would be `npx skills add ./node_modules/@cocoar/vue-ui`.
+// This bin resolves that path for the caller and hands everything else — agent detection,
+// install directories, lockfile, `npx skills update` — to the skills CLI. Extra arguments pass
+// through (`-g`, `-a claude-code`, `--copy`, `-y`, …).
+
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const skillDir = path.join(packageDir, 'skills', 'cocoar-vue-ui');
+const [command, ...rest] = process.argv.slice(2);
+
+if (command !== 'skill' || rest.includes('--help') || rest.includes('-h')) {
+  console.log(`Usage: npx @cocoar/vue-ui skill [skills-cli options]
+
+Installs the Cocoar UI Vue Agent Skill for Claude Code, Cursor, Codex, Copilot and other
+agents via the skills CLI (npx skills add). Options are passed through, for example:
+
+  npx @cocoar/vue-ui skill                 interactive: pick agents
+  npx @cocoar/vue-ui skill -y              accept defaults
+  npx @cocoar/vue-ui skill -g              install user-wide instead of into the project
+  npx @cocoar/vue-ui skill -a claude-code  target one agent
+
+Skill source: ${skillDir}`);
+  process.exit(command === 'skill' ? 0 : 1);
+}
+
+if (!existsSync(path.join(skillDir, 'SKILL.md'))) {
+  console.error(`No skill found at ${skillDir} — this build of @cocoar/vue-ui does not ship one.`);
+  process.exit(1);
+}
+
+// npx is a .cmd shim on Windows, which Node only runs through a shell; quote the path for it.
+const windows = process.platform === 'win32';
+const quote = (arg) => (windows && /[\s"]/.test(arg) ? `"${arg.replace(/"/g, '\\"')}"` : arg);
+const result = spawnSync('npx', ['--yes', 'skills', 'add', packageDir, ...rest].map(quote), {
+  stdio: 'inherit',
+  shell: windows,
+});
+
+if (result.error) {
+  console.error(`Could not run the skills CLI (${result.error.message}).`);
+  console.error(`Install it by hand instead: npx skills add ${packageDir}`);
+  process.exit(1);
+}
+process.exit(result.status ?? 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/vue-ui",
-  "version": "3.2.0-beta.6",
+  "version": "3.2.0-beta.8",
   "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,7 +38,11 @@
       "types": "./dist/fonts.d.ts"
     }
   },
+  "bin": {
+    "cocoar-vue-ui": "./bin/cli.mjs"
+  },
   "files": [
+    "bin",
     "dist",
     "styles",
     "skills"
@@ -51,7 +55,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@cocoar/vue-localization": "3.2.0-beta.6",
+    "@cocoar/vue-localization": "3.2.0-beta.8",
     "@fontsource/cascadia-code": "^5.2.3",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",

package/skills/cocoar-vue-ui/references/components/calendar/agenda-view.md

@@ -351,3 +351,22 @@ interface CalendarApi<TMeta> {
 | `event` | `{ event, item }` | Per-row renderer. `item` is the full `AgendaEventItem` (event + `isContinuation` flag). |
 | `dayGroupHeader` | `{ date, item, isToday }` | Per-day header renderer (same component renders the inline + floating overlay). |
 | `empty` | — | Empty state. Shown only when the list draws nothing — no events in the window, `showEmptyDays` off — and no load is in flight. No default; without the slot the surface stays blank. Rendered as a non-interactive overlay so the list stays mounted. Inside `<CoarCalendar>` use the `agendaEmpty` slot. |
+| `weekStripStart` | `WeekStripSlotScope` | Day agenda only. Content at the start of the seven-day week strip, e.g. a previous-week button. |
+| `weekStripEnd` | `WeekStripSlotScope` | Day agenda only. Content at the end of the week strip, e.g. a next-week button. |
+
+### Day agenda week strip
+
+`view="dayAgenda"` renders a seven-day strip above the list; tapping a day moves the builder cursor. The strip has two slots for host controls at either end. Both receive the same `WeekStripSlotScope`: `cursor` (selected day), `weekStart` / `weekEnd` (the strip's window), `goTo(date)` and `shiftWeek(n)` — `-1` pages to the previous week, `1` to the next. The slot content sizes itself; the seven day buttons take the remaining width.
+
+```vue
+<CoarAgendaView :builder="builder" view="dayAgenda">
+  <template #weekStripStart="{ shiftWeek }">
+    <button type="button" aria-label="Vorige Woche" @click="shiftWeek(-1)">‹</button>
+  </template>
+  <template #weekStripEnd="{ shiftWeek }">
+    <button type="button" aria-label="Nächste Woche" @click="shiftWeek(1)">›</button>
+  </template>
+</CoarAgendaView>
+```
+
+Inside `<CoarCalendar>` the same slots exist under the same names and reach the day agenda when it is the active view.

package/skills/cocoar-vue-ui/references/components/calendar/coar-calendar.md

@@ -1558,7 +1558,8 @@ The builder is **flat** — every setter lives directly on it. There are no sub-
 | `dayColumnCount(n)` | `MaybeRefOrGetter<number>` | Minimum complete columns in Multi-day mode. Clamped to `1…7`. |
 | `dayColumnMinWidth(px)` | `MaybeRefOrGetter<number>` | Target width used to derive extra Multi-day columns. |
 | `density(d)` | `MaybeRefOrGetter<'comfortable' \| 'compact'>` | Row / padding tightness. |
-| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | Month-cell pill hint. Default `3`. |
+| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | Single-day pills a Details month cell shows before the rest fold into `+N`. Default `2`, like iOS. |
+| `monthMaxVisibleLanes(n)` | `MaybeRefOrGetter<number \| null>` | Multi-day lanes a month week row shows before the remaining bars fold into the covered days' `+N`. Default `2`; `null` = the row grows with every lane. |
 | `agendaLengthDays(n)` | `MaybeRefOrGetter<number>` | Days the agenda window covers. Default `30`. |
 | `showEmptyDays(b)` | `MaybeRefOrGetter<boolean>` | Render headers for empty days (agenda). |
 | `availableViews(v)` | `MaybeRefOrGetter<readonly CalendarView[]>` | Filter the view-switcher. |
@@ -1630,6 +1631,7 @@ Variant-specific slots (`pill`, `multiDayBar`, `allDayEvent`) still exist on the
 | `allDayEvent` | `{ event, layout }` | All-day band renderer (week / day). |
 | `pill` | `{ event, pill }` | Month single-day pill. |
 | `agendaEmpty` | — | Agenda empty state (forwarded to `<CoarAgendaView>`'s `empty` slot). Shown only when the agenda draws nothing and no load is in flight; no default. |
+| `weekStripStart` / `weekStripEnd` | `WeekStripSlotScope` | Day agenda: host controls at either end of the seven-day week strip (e.g. previous / next week via `shiftWeek(±1)`). Forwarded to `<CoarAgendaView>`. |
 | `multiDayBar` | `{ event, bar }` | Month multi-day bar. |
 | `dayHeader` | `{ date, isToday, isWeekend }` | Per-day column header (week / day). |
 

package/skills/cocoar-vue-ui/references/components/calendar/month-view.md

@@ -8,7 +8,7 @@ The shell's Month view follows the iOS structure: months scroll continuously and
 |---|---|
 | Compact | 52 px base week rows; per-day events combine into a segmented colour capsule. |
 | Stacked | 68 px base rows; compact individual event marks. |
-| Details | 94 px base rows; titles, assignees, multi-day bars and row expansion. |
+| Details | 94 px base rows; titles, assignees, multi-day bars and a `+N` row for whatever does not fit. |
 | List | Compact month selector plus the selected day's event list; stacked in narrow containers and side-by-side from 720 px. |
 
 The regular Month choices use `<CoarContinuousMonthView>`. `<CoarMonthView>` remains exported as the lower-level single-month section for widgets and custom compositions.
@@ -426,15 +426,26 @@ Full reference: see [the composer's API reference](./coar-calendar.md#api-refere
 | `firstDayOfWeek(d)` | `0..6 \| undefined` | locale-aware | `0` = Sunday, `1` = Monday, … |
 | `monthDensity(d)` | `'compact' \| 'stacked' \| 'details'` | `'details'` | Presentation used by continuous Month. |
 | `shadeWeekends(b)` | `MaybeRefOrGetter<boolean>` | `true` | Shades Saturday / Sunday cells and weekday headers. Set `false` for an unshaded appearance. |
-| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | `3` | Pill cap hint. The library never truncates — pills always reach the DOM — but the collapsed-cell height reserves space for ~`n` pills before the cell starts to scroll. |
+| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | `2` | Single-day pills a **Details** cell shows before the rest fold into the `+N` row. Stacked and Compact use fixed limits (2 marks / 6 capsule segments) like iOS. |
+| `monthMaxVisibleLanes(n)` | `MaybeRefOrGetter<number \| null>` | `2` | Multi-day lanes a week row shows. Bars past the cap leave the band and count into the `+N` of every day they cover; `null` lets the row grow with every lane. |
 | `eventRenderer(r)` | `EventRenderer<TMeta>` | — | Universal renderer. Branch on `ctx.layout?.kind === 'monthPill' \| 'monthBar'` for variant-specific rendering — see the example above. |
 | `dayHeaderRenderer(r)` | `DayHeaderRenderer` | — | Weekday-strip header (Mon / Tue / ...). |
 
-## Per-cell expansion
+## Overflow — the `+N` row
 
-Each cell has a kebab trigger (top-right of the day-number row, hover-reveal on desktop, always visible on touch). Clicking it opens a context menu with **Show more events** / **Show fewer events**, which expands or collapses the entire **row** (single-row mode — opening one collapses any other previously-expanded row). Right-click / long-press on the cell body opens the same menu at the pointer.
+Month rows have a fixed height per density plus the height of the week's multi-day lane band, and that band is capped too: a row shows at most `monthMaxVisibleLanes` lanes (default **2**). A multi-day bar past the cap leaves the band entirely — it is never clipped mid-row — and counts into the `+N` of every day it covers. `null` restores the unbounded band of the iOS port, where a week grows with every lane.
 
-The collapsed cell uses a height that fits ~`maxEventsPerCell` pills + the multi-day-bar lane area; expanded rows grow to a fixed maximum so all overflowing pills are reachable via scroll.
+A Details cell renders its first `maxEventsPerCell` single-day pills (default **2**) and folds the rest, together with the folded bars covering the day, into one `+N` row in the subtle text colour. Stacked shows 2 marks and Compact 6 capsule segments and, like iOS, cap silently — their marks carry no titles, so the day has to be opened either way. Cells never scroll, and there is no per-cell menu or row expansion.
+
+On the web the `+N` row is a button (accessible name "N more events", `aria-haspopup="dialog"`). It opens a **day sheet** over that one cell: a small dialog aligned to the cell's top-left edge that lists every event of the day — the multi-day events covering it first (visible lanes, then folded ones), then the single-day pills — and scrolls when the list is long. The sheet opens downward and flips upward when the space below inside the scroll container is short; it never expands the row or the grid. Every pill in the sheet is a live pill with the grid's own wiring — drag it onto any other day, move it with the keyboard, double-click it for `onEventDoubleClick`. The sheet closes on Escape, its close control, a pointerdown outside it, another `+N`, or when the month changes; focus returns to the `+N` button.
+
+A tap on the cell body still fires `onDateClick` (the `+N` button does not), so a host that prefers its own day surface keeps working unchanged.
+
+In the grid itself hidden events are not in the DOM, so keyboard focus and drag-and-drop there reach only the visible pills; the sheet is where the rest become reachable. Drop onto a full cell works either way: a drag preview takes the last visible slot so the target is always visible.
+
+```ts
+builder.monthDensity('details').maxEventsPerCell(3); // three titles, then +N
+```
 
 ## Drag and drop
 

package/skills/cocoar-vue-ui/references/guide/getting-started.md

@@ -91,26 +91,23 @@ in your project knows the library's API and the mistakes it would otherwise make
 `skills/` folder at the package root and takes no part in your build: nothing is loaded unless you
 install it.
 
-With the [skills CLI](https://github.com/vercel-labs/skills) (no extra tooling; Claude Code,
-Cursor, Codex, Copilot and others):
+Once `@cocoar/vue-ui` is installed, one command installs the skill of exactly that version:
 
 ```bash
-# From the installed package — matches the version you use
-npx skills add ./node_modules/@cocoar/vue-ui
-
-# Or straight from GitHub — the latest docs
-npx skills add cocoar-dev/cocoar-ui-vue
+npx @cocoar/vue-ui skill
 ```
 
-With [agentskills-cli](https://mysticmind.github.io/agentskills-cli/) (a .NET tool that also
-reads npm packages):
+It hands the package's skill folder to the [skills CLI](https://github.com/vercel-labs/skills),
+which detects the agents in your project (Claude Code, Cursor, Codex, Copilot and others) and
+asks where to install. Its options pass through: `-y` accepts the defaults, `-g` installs
+user-wide instead of into the project, `-a claude-code` targets one agent.
 
-```bash
-agentskills-cli add @cocoar/vue-ui
-```
+Two alternatives: `npx skills add cocoar-dev/cocoar-ui-vue` takes the latest docs straight from
+GitHub, and [agentskills-cli](https://mysticmind.github.io/agentskills-cli/) (a .NET tool that
+also reads npm packages) installs it with `agentskills-cli add @cocoar/vue-ui`.
 
 Either places the skill in `.claude/skills/` for Claude Code and `.agents/skills/` for the
-agents that read the standard; `-g` installs it globally instead. Without a tool, copy
+agents that read the standard. Without a tool, copy
 `node_modules/@cocoar/vue-ui/skills/cocoar-vue-ui/` into the same folder by hand.
 
 The skill is generated from these docs, so it says what the docs say for the version you