@ai-matrx/design-system 0.86.364 → 0.86.366

package/dist/swipe-deck.css

@@ -290,6 +290,12 @@
 .matrx-sd-tag { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.04em; text-transform: none; font-size: 12px; color: var(--sd-fg); padding: 2px 8px; border-radius: 10px; background: var(--sd-pill); border: 1px solid var(--sd-line); }
 .matrx-sd-tag svg { width: 12px; height: 12px; color: hsl(var(--success)); stroke-width: 3; flex: none; }
 .matrx-sd .matrx-sd-hero { font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; margin: 0; padding: 0; text-wrap: balance; overflow-wrap: normal; font-size: 40px; color: var(--sd-fg); }
+/* `titleSize="page"`: the card reads like a page — a page-title line in a reading-width column, the body is the point. */
+.matrx-sd-layer[data-sd-title="page"] { justify-content: flex-start; padding-top: clamp(4px, 2cqh, 24px); }
+.matrx-sd-layer[data-sd-title="page"] .matrx-sd-card { max-width: 760px; }
+.matrx-sd-layer[data-sd-title="page"] .matrx-sd-kicker { margin-bottom: 0.5em; }
+.matrx-sd .matrx-sd-layer[data-sd-title="page"] .matrx-sd-hero { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); font-weight: var(--matrx-type-display-weight, 600); line-height: 1.2; letter-spacing: -0.015em; }
+.matrx-sd-layer[data-sd-title="page"] .matrx-sd-body { margin-top: 4px; max-width: none; }
 .matrx-sd-hero[data-quoted]::before { content: "“"; }
 .matrx-sd-hero[data-quoted]::after { content: "”"; }
 .matrx-sd-part {

package/dist/swipe-deck.d.cts

@@ -544,6 +544,17 @@ interface SwipeDeckProps {
     readonly controller?: DeckController;
     /** Show each item's choices on the card, by their direction (a quiz). Default: when the item has its own answers. */
     readonly choicesOnCard?: boolean | "auto";
+    /**
+     * How big the card's own text is: `fit` (default) grows it to fill the card (a word, a short line);
+     * `page` holds it at a page-title size in a reading-width column, for a card whose body is the point
+     * (evidence to read before answering).
+     */
+    readonly titleSize?: "fit" | "page";
+    /**
+     * Draw the answers off the edges (`more`) as the card's row of buttons (default true). `false` when the
+     * host draws every answer itself in its body through `context.answer`; their keyboard shortcuts stay.
+     */
+    readonly moreOnCard?: boolean;
     /** The copy corner's text (default: the item, or the whole deck at a pick or the end). */
     readonly copyText?: (context: SwipeDeckCopyContext) => string;
     /** Where "the walkthrough already played" is remembered; `null` never plays it on its own. */

package/dist/swipe-deck.d.ts

@@ -544,6 +544,17 @@ interface SwipeDeckProps {
     readonly controller?: DeckController;
     /** Show each item's choices on the card, by their direction (a quiz). Default: when the item has its own answers. */
     readonly choicesOnCard?: boolean | "auto";
+    /**
+     * How big the card's own text is: `fit` (default) grows it to fill the card (a word, a short line);
+     * `page` holds it at a page-title size in a reading-width column, for a card whose body is the point
+     * (evidence to read before answering).
+     */
+    readonly titleSize?: "fit" | "page";
+    /**
+     * Draw the answers off the edges (`more`) as the card's row of buttons (default true). `false` when the
+     * host draws every answer itself in its body through `context.answer`; their keyboard shortcuts stay.
+     */
+    readonly moreOnCard?: boolean;
     /** The copy corner's text (default: the item, or the whole deck at a pick or the end). */
     readonly copyText?: (context: SwipeDeckCopyContext) => string;
     /** Where "the walkthrough already played" is remembered; `null` never plays it on its own. */

package/dist/swipe-deck.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   ErrorBox
-} from "./chunk-5Z5GTXKL.js";
+} from "./chunk-FEITX4L3.js";
 import {
   Input
 } from "./chunk-TDMVH77G.js";
-import "./chunk-HS6GMHKZ.js";
+import "./chunk-CZGTZJPS.js";
 import "./chunk-WAT2XW7L.js";
 import {
   ArrowDownIcon,
@@ -143,6 +143,10 @@ function fitText(box, inner, text2, min, max) {
   else box.removeAttribute("data-sd-overflow");
   return size;
 }
+function markOverflow(box, inner) {
+  if (inner.offsetHeight > box.clientHeight + 1) box.setAttribute("data-sd-overflow", "");
+  else box.removeAttribute("data-sd-overflow");
+}
 function keepFitted(box, run) {
   run();
   let alive = true;
@@ -1963,7 +1967,8 @@ function SwipeDeck(props) {
                   conflict,
                   labels,
                   suggestedDir,
-                  more: cardMoreShown,
+                  more: props.moreOnCard === false ? [] : cardMoreShown,
+                  titleSize: props.titleSize ?? "fit",
                   detail: detailNow,
                   onDetail: (d) => setCardDetail({ id: step.item.id, detail: d }),
                   body: cardContext && props.renderCardBody ? props.renderCardBody(cardContext) : null,
@@ -2063,6 +2068,7 @@ function CardView({
   onChoose,
   more,
   onChooseMore,
+  titleSize,
   detail,
   onDetail,
   body,
@@ -2095,9 +2101,11 @@ function CardView({
     const box = layer.current;
     if (!box || !inner.current || !hero.current) return;
     return keepFitted(box, () => {
-      if (inner.current && hero.current) fitText(box, inner.current, hero.current, 20, heroMax(box));
+      if (!inner.current || !hero.current) return;
+      if (titleSize === "fit") fitText(box, inner.current, hero.current, 20, heroMax(box));
+      else markOverflow(box, inner.current);
     });
-  }, [item.text, partsKey, item.members?.length, more.length]);
+  }, [item.text, partsKey, item.members?.length, more.length, titleSize]);
   const nodes = [];
   for (let i = 0; i < tokens.length; ) {
     const p = parts.find((x) => x.start === i);
@@ -2128,6 +2136,7 @@ function CardView({
       ref: layer,
       className: "matrx-sd-layer",
       "data-sd-item": item.id,
+      "data-sd-title": titleSize === "page" ? "page" : void 0,
       "aria-label": [item.kicker, item.text].filter(Boolean).join(": "),
       onDoubleClick: (e) => {
         const t = e.target instanceof Element ? e.target.closest("[data-sd-t]") : null;