@vegastack/design 0.7.31 → 0.7.32

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.32",
   "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": {

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
@@ -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.
 

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