@vegastack/design 0.7.31 → 0.7.33

package/dist/{chunk-OHGNXG5G.js → chunk-6CWBD6NJ.js}

@@ -43,6 +43,13 @@ var prose = {
   ul: "[&_ul]:my-3 [&_ul]:ms-6 [&_ul]:list-disc [&_ul]:text-foreground [&_ul]:marker:text-muted-foreground [&_ul.contains-task-list]:list-none",
   ol: "[&_ol]:my-3 [&_ol]:ms-6 [&_ol]:list-decimal [&_ol]:text-foreground [&_ol]:marker:text-muted-foreground",
   li: "[&_li]:mt-1.5 [&_li]:leading-relaxed",
+  // Task lists, one shape for both producers: `MarkdownView` tags the GFM list
+  // `data-type="taskList"` and each item `data-type="taskItem"` with its body in a
+  // `data-slot="task-item-content"` box, which is exactly the DOM Tiptap's `TaskItem` node view
+  // renders — so the checkbox IS the marker, the body wraps beside it, and a nested list indents
+  // under the body in view and edit alike. A cell's or item's paragraph inherits its ink so a
+  // Tiptap `<td><p>` reads the same as GFM's bare `<td>`.
+  taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-1 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1 [&_td_p]:text-inherit [&_th_p]:text-inherit",
   blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
   // Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
   // is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).

package/dist/create-animated-icon.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-OHGNXG5G.js";
+} from "./chunk-6CWBD6NJ.js";
 
 // src/icons/create-animated-icon.tsx
 import * as React from "react";

package/dist/icons/index.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "../chunk-OHGNXG5G.js";
+} from "../chunk-6CWBD6NJ.js";
 
 // src/icons/icon.tsx
 import "react";

package/dist/index.cjs

@@ -72,6 +72,13 @@ var prose = {
   ul: "[&_ul]:my-3 [&_ul]:ms-6 [&_ul]:list-disc [&_ul]:text-foreground [&_ul]:marker:text-muted-foreground [&_ul.contains-task-list]:list-none",
   ol: "[&_ol]:my-3 [&_ol]:ms-6 [&_ol]:list-decimal [&_ol]:text-foreground [&_ol]:marker:text-muted-foreground",
   li: "[&_li]:mt-1.5 [&_li]:leading-relaxed",
+  // Task lists, one shape for both producers: `MarkdownView` tags the GFM list
+  // `data-type="taskList"` and each item `data-type="taskItem"` with its body in a
+  // `data-slot="task-item-content"` box, which is exactly the DOM Tiptap's `TaskItem` node view
+  // renders — so the checkbox IS the marker, the body wraps beside it, and a nested list indents
+  // under the body in view and edit alike. A cell's or item's paragraph inherits its ink so a
+  // Tiptap `<td><p>` reads the same as GFM's bare `<td>`.
+  taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-1 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1 [&_td_p]:text-inherit [&_th_p]:text-inherit",
   blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
   // Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
   // is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).

package/dist/index.d.cts

@@ -70,6 +70,7 @@ declare const prose: {
     readonly ul: "[&_ul]:my-3 [&_ul]:ms-6 [&_ul]:list-disc [&_ul]:text-foreground [&_ul]:marker:text-muted-foreground [&_ul.contains-task-list]:list-none";
     readonly ol: "[&_ol]:my-3 [&_ol]:ms-6 [&_ol]:list-decimal [&_ol]:text-foreground [&_ol]:marker:text-muted-foreground";
     readonly li: "[&_li]:mt-1.5 [&_li]:leading-relaxed";
+    readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-1 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1 [&_td_p]:text-inherit [&_th_p]:text-inherit";
     readonly blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic";
     readonly code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground";
     readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-3 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground";

package/dist/index.d.ts

@@ -70,6 +70,7 @@ declare const prose: {
     readonly ul: "[&_ul]:my-3 [&_ul]:ms-6 [&_ul]:list-disc [&_ul]:text-foreground [&_ul]:marker:text-muted-foreground [&_ul.contains-task-list]:list-none";
     readonly ol: "[&_ol]:my-3 [&_ol]:ms-6 [&_ol]:list-decimal [&_ol]:text-foreground [&_ol]:marker:text-muted-foreground";
     readonly li: "[&_li]:mt-1.5 [&_li]:leading-relaxed";
+    readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-1 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1 [&_td_p]:text-inherit [&_th_p]:text-inherit";
     readonly blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic";
     readonly code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground";
     readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-3 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground";

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   mergeRefs,
   prose,
   proseClassName
-} from "./chunk-OHGNXG5G.js";
+} from "./chunk-6CWBD6NJ.js";
 export {
   FLOATING,
   TIMINGS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.31",
+  "version": "0.7.33",
   "description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
     "test": "node test/compare.test.mjs && node test/check-updates.test.mjs && node test/skills-install.test.mjs && node test/doctor.test.mjs"
   },
   "dependencies": {
-    "@vegastack/design-tokens": "^0.7.18",
+    "@vegastack/design-tokens": "^0.7.33",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0",
     "tsconfig-paths": "^4.2.0",

package/skills/vegastack-design-system/SKILL.md

@@ -90,8 +90,8 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
   toggle, then views as `Tabs` (default variant, `TabsList size="sm"`, optional leading icons), then
   the layout switch (`ViewToggle`), furthest right. Filters are `FilterBarFacet` /
   `DateRangeFilter` chips (compact, rounded-md, tinted when set) on the toggled row; people facets
-  take `itemToSecondaryLabel={(p) => p.email}`. Use Tabs for scope/views, `ViewToggle` for
-  Grid | List | Board. Tables are `DataList` with `sortable` columns (`compare`, `sortFirst`,
+  take `itemToSecondaryLabel={(p) => p.email}`. Toolbar switches use default Tabs — never a ToggleGroup or line
+  Tabs: `Tabs` for scope, `ViewToggle` (default Tabs, icons) for Grid | List | Board. Tables are `DataList` with `sortable` columns (`compare`, `sortFirst`,
   `sortMode="client"`) and `rowActions` (the ⋯ column, always last); row links are never underlined.
 - **`alert`** for an in-content notice — `variant` is `default · destructive · success · warning ·
 info`, each an ink on the `card` surface with a required icon; **`announcement-banner`** only for
@@ -167,7 +167,7 @@ A component's name undersells it. Before composing something by hand, check this
   edge: give it `data-slot="sheet-cancel"` and `SheetFooter` pushes it left with `me-auto`.
 - **Feedback after an action** → `toast.add({ title })`.
 - **A recording's text beside its player** → `Transcript` (follows `currentTime`, seeks through
-  `onSeek`, searches; `TranscriptSpeakers` + `onSpeakerRename` for speaker chips) with a `docked`
+  `onSeek`, searches; `onSpeakerRename` makes each turn's speaker name inline-editable) with a `docked`
   `AudioPlayer` at the bottom of the column — or, when playback must survive navigation, one
   `AudioPlayerProvider` in the app shell, `GlobalAudioPlayer` at the end of the main column and
   `useGlobalPlayer().open(track, { at })` / `useGlobalPlayerTime()` on the page.
@@ -281,6 +281,13 @@ descendant rules (`[&_h1]:…`), which means an element-level class on a child *
 by setting a class on the rendered element. Under the page's own headings, `MarkdownView headingOffset={n}` moves every
 heading down `n` levels (capped at h6) so the outline never skips back up.
 
+**Markdown is read with `MarkdownView` and edited with `TextEdit format="markdown"`** — never a
+textarea, a local prose class, or a hand-rolled editor. For in-place editing, swap the view for
+`<TextEdit format="markdown" variant="ghost" onSave onCancel />`: ghost is borderless with no inset,
+so the text does not move, and Save/Cancel sit at the toolbar's end (⌘/Ctrl+Enter saves, Esc
+cancels). Pick `toolbar="minimal"` for comments, `"standard"` (default) for notes and summaries,
+`"full"` for documents; the schema follows the toolbar. Keep `variant="outline"` inside forms.
+
 `muted`, `accent` and `secondary` share one value in this base, and all three are kept: name the one
 whose ROLE you mean, so a consumer can retune one without moving the others.
 
@@ -367,7 +374,7 @@ contract.
 **Don't**
 
 - Hardcode a hex, a px value, or a raw Tailwind palette class (`bg-neutral-900`, `text-red-500`).
-- Add a focus ring, outline or glow. No focus rings anywhere except Tabs: `base.css` paints a subtle
+- Add a focus ring, outline or glow. No focus rings anywhere, Tabs included: `base.css` paints a subtle
   background tint on `:focus-visible` and text entry tints its border instead; `ring-3`,
   `ring-ring/50`, `focus-visible:ring-*` and `focus-visible:outline-*` are rejected by lint.
 - Leave a neutral hover on a button inside a tinted container — a status `Alert` already gives its

package/skills/vegastack-design-system/references/components.md

@@ -120,7 +120,7 @@ starts with `icon-` is a component and never an icon.
 - **`pagination`** — Page navigation — previous/next, numbered page links, an ellipsis for long ranges, and the active page.
 - **`sidebar`** — A collapsible app navigation rail — header/content/footer, labelled groups, menu items with active and open (menu-trigger) states, and an expand/collapse trigger.
 - **`stepper`** — A bounded linear process as an ordered list — seven step states on a numbered rail that fills in behind you, aria-current=step, orientation chosen from the step count, and a compact summary below a container width.
-- **`tabs`** — Layered content sections — default (segmented) or line variants, compact size, optional leading icons and counts, horizontal or vertical, full keyboard navigation. Use Tabs for scope/views (My tasks | Team tasks); use an icon ToggleGroup for List/Board layout switches. The one component that keeps a focus ring.
+- **`tabs`** — Layered content sections — default (segmented) or line variants, compact size, optional leading icons and counts, horizontal or vertical, full keyboard navigation. Toolbar switches use default Tabs: scope (My tasks | Team tasks) and views, whose List/Board/Grid switch is ViewToggle (default Tabs with icons). The one component that keeps a focus ring.
 
 ## Feedback
 
@@ -137,7 +137,7 @@ starts with `icon-` is a component and never an icon.
 
 - **`app-shell`** — The shared dashboard layout — a skip-linked sidebar + header + scrollable main region, composing Sidebar/SidebarTrigger into one reusable, hash-tracked shell.
 - **`aspect-ratio`** — Constrains its children to a given width-to-height ratio.
-- **`board`** — Kanban lanes — full-height lanes that scroll their cards inside, sticky headers with a collapse menu, + Add at each lane's foot, Nothing here / Drop here empty zones, per-lane skeletons and load-on-scroll paging; live pointer and touch drag (lift, make room, settle, edge auto-scroll), a keyboard pick-up/move/drop model, a lossless per-card Move menu, optimistic moves with rollback and a toast, and one lane at a time on a phone.
+- **`board`** — Kanban lanes — full-height lanes that scroll their cards inside, sticky headers with a collapse menu, + Add at each lane's foot, Nothing here / Drop here empty zones, per-lane skeletons and load-on-scroll paging; live pointer and touch drag (lift, make room, settle, edge auto-scroll), a keyboard pick-up/move/drop model, a per-card ⋯ menu of the card's own actions, optimistic moves with rollback and a toast, and one lane at a time on a phone.
 - **`direction`** — Base UI's DirectionProvider and useDirection — the text-direction context components read.
 - **`record-layout`** — A record page's main column beside a sticky right rail of cards, with an ⓘ Details sheet in its place on small screens.
 - **`resizable`** — Accessible resizable panel groups and layouts with keyboard support — horizontal or vertical, nestable, with an optional visible grip.