makersclaw 0.8.0 → 0.8.2

package/templates/next/files/components/ui/field.jsx

@@ -23,10 +23,14 @@ const CONTROL = `w-full ${BOX}`;
 const ownWidth = (className) => /(?:^|\s)!?(?:w|size)-/.test(className ?? "");
 
 /** Label, control, hint and error in one stack. Pass `id`; the label
- *  points at it. `error` (a string) marks the control invalid. */
+ *  points at it. `error` (a string) marks the control invalid.
+ *  Two Fields side by side in a grid row are stretched to the taller one;
+ *  `content-start` keeps the shorter one's label and control at the top
+ *  where they were (without it the grid spread them apart, and Start
+ *  date's box sat lower than Target date's when only Target had a hint). */
 export function Field({ id, label, hint, error, required, className, children }) {
   return (
-    <div className={cx("grid gap-1.5", className)}>
+    <div className={cx("grid content-start gap-1.5", className)}>
       {label ? (
         <label htmlFor={id} className="text-sm font-medium text-foreground">
           {label}
@@ -177,15 +181,24 @@ export function Textarea({ className, invalid, rows = 4, autoGrow = false, minRo
  * `options` is empty it renders `empty` (a short muted line, or nothing
  * when `empty` is null) rather than a disabled dropdown. For "pick a
  * saved record or make a new one" use RecordSwitcher (components/parts).
+ * A width in `className` (w-40, w-fit, w-[12rem], size-10) sets the width of
+ * the whole control, as it does on an Input (0.8.1).
  */
 export function Select({ options, empty = "Nothing to choose yet.", className, invalid, children, ...rest }) {
   if (options && options.length === 0 && !children) {
     return empty ? <p className="text-sm text-muted-foreground">{empty}</p> : null;
   }
+  // As Input: a width in className (w-40, w-auto, w-[12rem], size-10) is
+  // honoured. The chevron sits on the wrapper, so the width goes to the
+  // wrapper and the select fills it; the rest of className stays on the
+  // select. Without one it is as wide as its column, as before.
+  const tokens = String(className ?? "").split(/\s+/).filter(Boolean);
+  const own = tokens.filter((t) => /^!?(?:w|size)-/.test(t));
+  const others = tokens.filter((t) => !own.includes(t));
   return (
-    <span className="relative block">
+    <span className={cx("relative block", own.join(" "))}>
       <select
-        className={cx(CONTROL, "appearance-none pr-9", className)}
+        className={cx(CONTROL, "appearance-none pr-9", others.join(" "))}
         aria-invalid={invalid ? true : undefined}
         {...rest}
       >

package/templates/next/files/components/ui/icon.jsx

@@ -186,6 +186,19 @@ const PATHS = {
   "calendar-check": "M3 5h18v16H3zM16 3v4M8 3v4M3 10h18M9 15.5l2 2 4-4",
   "trash-2": "M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 11v6M14 11v6",
   network: "M9 2h6v6H9zM2 16h6v6H2zM16 16h6v6h-6zM12 8v4M5 16v-4h14v4",
+  // Automations (flow-editor and the blocks around it): one glyph per kind
+  // of step, drawn to the same 24 box. calendar-clock is a schedule's
+  // trigger, split a condition's fork, braces a set of values, timer a
+  // wait, plug a connected tool, bot the agent, workflow another
+  // automation, book-open a read of the company brain.
+  "calendar-clock": "M12 21H5V5h14v7M3 10h18M8 3v4M16 3v4M17.5 14a4 4 0 1 0 .01 0M17.5 16v2l1.2.8",
+  split: "M3 12h5c3 0 3-6 6-6h6M8 12c3 0 3 6 6 6h6M17 3l3 3-3 3M17 15l3 3-3 3",
+  braces: "M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1",
+  timer: "M10 2h4M12 8v5l3 2M12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z",
+  plug: "M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0V7ZM12 17v5",
+  bot: "M12 3v3M5 8h14v11H5ZM9 13h.01M15 13h.01M2 13v3M22 13v3M9 17h6",
+  workflow: "M3 4h7v7H3zM14 13h7v7h-7zM10 7.5h2.5a2 2 0 0 1 2 2V13",
+  "book-open": "M12 6c-2-2-5-3-9-3v15c4 0 7 1 9 3 2-2 5-3 9-3V3c-4 0-7 1-9 3ZM12 6v15",
 };
 
 const BRANDS = {

package/templates/next/files/components/ui/index.js

@@ -5,7 +5,7 @@ export { cx } from "./cx";
 export { Icon, ICON_NAMES } from "./icon";
 export { Button, IconButton } from "./button";
 export { Field, Input, TimeInput, Textarea, Select, Switch, Checkbox } from "./field";
-export { Card, Notice, Badge, Kicker, Empty } from "./notice";
+export { Card, ActionCard, Notice, Badge, Kicker, Empty } from "./notice";
 export { Sheet, Confirm } from "./sheet";
 export { Tabs, TabPanel } from "./tabs";
 export { Menu, MenuPanel } from "./menu";
@@ -49,6 +49,7 @@ export { Steps } from "./steps";
 export { Separator, Kbd, KbdGroup, AspectRatio } from "./separator";
 export { ScrollArea } from "./scroll-area";
 export { AppLayout, DocumentLayout } from "./layout";
+export { PageLayout } from "./page";
 export { Slider } from "./slider";
 export { InputGroup, PasswordInput } from "./input-group";
 export { Image } from "./image";

package/templates/next/files/components/ui/layout.jsx

@@ -51,8 +51,22 @@ import { Sheet } from "./sheet";
 //   inspectorWidth in px (360; 240 to 560). Builds have needed 300 and 440
 //   inspectorAt    md · lg (the default) · xl: the width from which the
 //                  inspector sits beside the content
+//   inspectorIn    window (the default): inspectorAt is the window's
+//                  width (768 · 1024 · 1280 px) · frame: it is the
+//                  width of the body between the rail and the dock
+//                  (42 · 48 · 64 rem), so an agent dock that takes a
+//                  quarter of the window makes the inspector go under
+//                  the work when there is no room, not squeeze it
 //   footer         under the content, always in view (the save state,
 //                  the composer, the commands for what is above)
+//   dock           a column beside the whole body (rail, content and
+//                  inspector), under the header, that the app's own
+//                  block draws: the agent's dock (blocks/agent-dock).
+//                  It sizes itself, remembers its width and, where the
+//                  body is too narrow, lays itself over the app as a
+//                  sheet; the layout only gives it a place in the row
+//                  and takes no part in its width. Nothing when it is
+//                  not given
 //   height         viewport (the default): the frame is the window's
 //                  height · parent: it fills a bounded parent. Nested,
 //                  it is parent whatever this says
@@ -108,7 +122,60 @@ const BESIDE = {
   },
 };
 
+// The same classes by the width of the body's own column (a container
+// query on the frame between the rail and the dock), for an app whose dock
+// takes a quarter of the window: md is a body 42rem wide, lg 48rem, xl 64rem.
+const BESIDE_FRAME = {
+  md: {
+    main: "@2xl:grid @2xl:grid-cols-[minmax(0,1fr)_var(--app-inspector)] @2xl:grid-rows-[minmax(0,1fr)_auto]",
+    flow: "@2xl:contents",
+    content: "@2xl:col-start-1 @2xl:row-start-1",
+    scrolls: "@2xl:min-h-0 @2xl:overflow-y-auto @2xl:overscroll-contain",
+    inspector: "@2xl:col-start-2 @2xl:row-span-2 @2xl:row-start-1 @2xl:max-h-none @2xl:min-h-0 @2xl:overflow-y-auto @2xl:border-l @2xl:border-t-0",
+    footer: "@2xl:col-start-1 @2xl:row-start-2",
+  },
+  lg: {
+    main: "@3xl:grid @3xl:grid-cols-[minmax(0,1fr)_var(--app-inspector)] @3xl:grid-rows-[minmax(0,1fr)_auto]",
+    flow: "@3xl:contents",
+    content: "@3xl:col-start-1 @3xl:row-start-1",
+    scrolls: "@3xl:min-h-0 @3xl:overflow-y-auto @3xl:overscroll-contain",
+    inspector: "@3xl:col-start-2 @3xl:row-span-2 @3xl:row-start-1 @3xl:max-h-none @3xl:min-h-0 @3xl:overflow-y-auto @3xl:border-l @3xl:border-t-0",
+    footer: "@3xl:col-start-1 @3xl:row-start-2",
+  },
+  xl: {
+    main: "@5xl:grid @5xl:grid-cols-[minmax(0,1fr)_var(--app-inspector)] @5xl:grid-rows-[minmax(0,1fr)_auto]",
+    flow: "@5xl:contents",
+    content: "@5xl:col-start-1 @5xl:row-start-1",
+    scrolls: "@5xl:min-h-0 @5xl:overflow-y-auto @5xl:overscroll-contain",
+    inspector: "@5xl:col-start-2 @5xl:row-span-2 @5xl:row-start-1 @5xl:max-h-none @5xl:min-h-0 @5xl:overflow-y-auto @5xl:border-l @5xl:border-t-0",
+    footer: "@5xl:col-start-1 @5xl:row-start-2",
+  },
+};
+
+// inspectorIn="frame": the body's column is the container the BESIDE_FRAME
+// classes answer to. Off, it is nothing: the children, in the same place.
+function FrameBox({ on, children }) {
+  if (!on) return children;
+  return (
+    <div data-layout-frame className={cx("@container flex min-h-0 min-w-0 flex-1 flex-col", LETS_GO)}>
+      {children}
+    </div>
+  );
+}
+
 const REGION = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+
+// The inspector holds its width and its contents fit it (UI review X4: a
+// shelf's row ran out of the panel and its title was cut at the edge). A
+// grid with no grid-cols-* has one `auto` column, and `auto` grows to its
+// widest child's minimum width, past the panel; the usual inspector is
+// exactly `<div className="grid content-start gap-3 p-4">`. So the panel's
+// own direct children may not grow it (min-w-0), a direct child that is a
+// grid with no columns of its own gets the one column that can shrink
+// (minmax(0,1fr)), and nothing paints past the panel's edge (overflow-x
+// hidden: a wide child wraps or truncates, it does not sideways-scroll).
+const INSPECTOR_FIT =
+  "min-w-0 max-w-full overflow-x-hidden [&>*]:min-w-0 [&>.grid:not([class*=grid-cols])]:grid-cols-[minmax(0,1fr)]";
 const LETS_GO = "print:block print:h-auto print:min-h-0 print:overflow-visible";
 
 export function AppLayout({
@@ -125,14 +192,18 @@ export function AppLayout({
   inspectorLabel = "Details",
   inspectorWidth,
   inspectorAt = "lg",
+  inspectorIn = "window",
   footer,
+  dock,
   height = "viewport",
   className,
 }) {
   const nested = useContext(Nested);
   const bounded = nested || height === "parent";
   const fill = contentMode === "fill";
-  const at = BESIDE[inspectorAt] ?? BESIDE.lg;
+  const byFrame = inspectorIn === "frame";
+  const table = byFrame ? BESIDE_FRAME : BESIDE;
+  const at = table[inspectorAt] ?? table.lg;
   const hasInspector = inspector != null && inspector !== false;
   const hasNavigation = navigation != null && navigation !== false;
   const shared = hasInspector && !fill; // below `at`: content and inspector in one scroll region
@@ -197,6 +268,7 @@ export function AppLayout({
             </div>
           ) : null}
 
+          <FrameBox on={byFrame && hasInspector}>
           <div data-layout-main className={cx("flex min-h-0 min-w-0 flex-1 flex-col", hasInspector && at.main, LETS_GO)}>
             <div
               ref={flowRef}
@@ -238,7 +310,8 @@ export function AppLayout({
                   aria-label={inspectorLabel}
                   tabIndex={0}
                   className={cx(
-                    "min-w-0 shrink-0 border-t border-border print:hidden",
+                    "shrink-0 border-t border-border print:hidden",
+                    INSPECTOR_FIT,
                     REGION,
                     fill && "max-h-[45%] overflow-y-auto overscroll-contain",
                     at.inspector,
@@ -254,6 +327,8 @@ export function AppLayout({
               </div>
             ) : null}
           </div>
+          </FrameBox>
+          {dock != null && dock !== false ? dock : null}
         </div>
       </div>
     </Nested.Provider>

package/templates/next/files/components/ui/notice.jsx

@@ -53,6 +53,76 @@ export function Card({
   );
 }
 
+const STATUS_ICON = {
+  success: { name: "circle-check", box: "text-success" },
+  warning: { name: "warning", box: "text-warning" },
+  danger: { name: "warning", box: "text-destructive" },
+  neutral: { name: "info", box: "text-muted-foreground" },
+};
+
+/** A card that is one step the member takes: a title (with an icon), what
+ *  it does, optionally the state it is in, and ONE action under it.
+ *  Stacked, always: the status line above a full-width button, so neither
+ *  squeezes the other and the button's label has the room it needs.
+ *
+ *  Cards in a row are the same height, and their buttons line up (UI
+ *  review X6). A card stretches to the height of its row, and the status
+ *  and the action are pinned to the card's bottom: title, words, children,
+ *  then whatever room is left, then the status, then the button. So in a
+ *  row of four the buttons sit on one line, however long each card's words
+ *  are, and a status line in only some of them sits just above its button.
+ *  It was `self-start` (each card only as tall as its own words) from 0.8.1's
+ *  first cut: that meant ragged heights and buttons at different heights.
+ *  The big empty block it was meant to stop came from a squeezed row (check
+ *  rule 16, squeeze), not from stretching, and it cannot come back here:
+ *  the spare room is a gap above the footer, never a blank box below it.
+ *    icon         a kit icon name, before the title
+ *    title        the step ("Connect your mailbox")
+ *    description  what it does, in a sentence or two (muted)
+ *    children     anything between the description and the state (a price
+ *                 line, a form, a list of rows)
+ *    status       { tone: success · warning · danger · neutral, children } the
+ *                 state it is in, with its mark, above the action. Say
+ *                 "Connected" only when the thing exists (an account, a file).
+ *    action       the one button (or a link), laid full width below
+ *    fit          true: only as tall as its own words (self-start), for ONE
+ *                 card on its own beside something unrelated. Never for
+ *                 cards in a row: check rule 19 (stretch) refuses a row of
+ *                 ActionCards that sets self-start, or items-start on the row
+ *  For a card that holds a table or a list, use Card (padding none). For
+ *  a screen's boxes in general: Card, ActionCard, Notice, never a hand-drawn
+ *  bordered div. */
+export function ActionCard({ icon, title, description, status, action, className, children, fit = false, as: Tag = "section" }) {
+  const mark = status ? (STATUS_ICON[status.tone] ?? STATUS_ICON.neutral) : null;
+  return (
+    <Tag
+      className={cx(
+        "flex min-w-0 flex-col gap-2.5 rounded-lg border border-border bg-card p-4 text-sm text-card-foreground",
+        fit && "self-start",
+        className,
+      )}
+    >
+      <h2 className="flex min-w-0 items-center gap-2 font-semibold leading-tight">
+        {icon ? <Icon name={icon} size={16} className="shrink-0 text-muted-foreground" /> : null}
+        <span className="min-w-0">{title}</span>
+      </h2>
+      {description ? <p className="text-muted-foreground">{description}</p> : null}
+      {children}
+      {status || action ? (
+        <div className="mt-auto grid gap-2.5">
+          {status ? (
+            <div className="flex items-start gap-2 border-t border-border pt-2.5 text-[13px]">
+              <Icon name={mark.name} size={14} className={cx("mt-0.5 shrink-0", mark.box)} />
+              <div className="min-w-0">{status.children}</div>
+            </div>
+          ) : null}
+          {action ? <div className="grid">{action}</div> : null}
+        </div>
+      ) : null}
+    </Tag>
+  );
+}
+
 /** One line the user should read, with an optional action. `tone`
  *  neutral · info · success · warning · danger. Colour is the signal, so
  *  status tones are for status only — never decoration. */

package/templates/next/files/components/ui/page.jsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { cx } from "./cx";
+
+// PageLayout — a screen's main area with an optional side column, taking the
+// full height of the content it sits in. The MAIN is the column that scrolls.
+// The SIDE is the fixed one: it holds its place, top to bottom, while the
+// main scrolls, and it is short.
+//
+// Why (UI review X12, 2026-10-12): Project Roadmap's Today ended at 680px in
+// a 1240px window. The screen drew its own two-column grid inside the
+// scrolling content, so it was only as tall as its words: the side column's
+// divider stopped halfway down and the bottom half of the window was empty.
+// Every screen with a side drew that grid by hand. This is the one.
+// `npm run check` (rule 23, page) refuses a hand-drawn main + side with a
+// ruled <aside>.
+//
+// What goes in the side, and what never does (UI review X13, 2026-10-12:
+// Newsletter Engine's first run was a short intro on the left and a long
+// "Name it" form in the right column. "this can only work if one column is
+// fixed, usually the 3rd column, and the middle one is scrolling"): the side
+// is a summary, the next step, a small panel, a few facts, a short list. It
+// never needs a scroll of its own. A form, a paste box, a long list, a
+// shelf of examples belong in the MAIN, where the page scrolls: a step that
+// opens reveals its own card there. The side's own scroll is a last resort
+// for a window shorter than the side (the bar is thin to say so), never how
+// a long thing is meant to be read. `npm run check` (rule 27, sidelong)
+// refuses a side column that holds a form or a long list.
+//
+// It lives INSIDE an AppLayout (the shell or the screen's own): the layout
+// owns the window's height, this fills the content region it is given. Use
+// the AppLayout's `contentMode="fill"` and give its content no padding
+// (omit `contentClassName`): the columns pad themselves, so the divider can
+// run to the edges. In contentMode scroll it fills the same.
+//
+//   children     the main area
+//   side         the side column, the FIXED one: short things (a summary, the
+//                next step, a record's facts, a small panel). It stays put
+//                while the main scrolls; never a long form or a long list.
+//                Without it the page is one scrolling column
+//   sideWidth    px (304; 220 to 560)
+//   sideAt       md · lg (the default) · xl: the width of THIS page from
+//                which the side sits beside the main (42 · 48 · 64 rem). It
+//                is the page's own width, not the window's: an open agent
+//                dock takes a quarter of the window, and the page must not
+//                be squeezed by it. Narrower, the side goes under the main in
+//                one scroll, nothing hidden behind a button
+//   mainLabel    the main area's name for a screen reader ("Content")
+//   sideLabel    the side's name ("Details")
+//   padded       default true: p-4 sm:p-6 on the main, p-4 on the side. false
+//                for a page that draws its own edges
+//   fill         true: the main is a flex column, so a child with `flex-1`
+//                (a list, a table) grows into the height instead of stopping
+//                where its rows end. With the side beside it, or alone; with
+//                the side under it (narrow) the page is one scroll and there
+//                is no height to grow into
+//   className, mainClassName, sideClassName   spacing and token backgrounds
+//                (bg-muted). Never a height or an overflow: the layout owns those
+const px = (value, fallback, min, max) => {
+  const n = Number(value);
+  return `${Number.isFinite(n) && n > 0 ? Math.min(max, Math.max(min, Math.round(n))) : fallback}px`;
+};
+
+// Tailwind reads class names whole from the source, so every size is written
+// out. md is a page 42rem wide, lg 48rem, xl 64rem (the AppLayout's
+// inspectorIn="frame" sizes).
+const BESIDE = {
+  md: {
+    grid: "@2xl:grid-cols-[minmax(0,1fr)_var(--page-side)] @2xl:grid-rows-[minmax(0,1fr)] @2xl:overflow-hidden",
+    column: "@2xl:min-h-0 @2xl:overflow-y-auto @2xl:overscroll-contain",
+    side: "@2xl:border-l @2xl:border-t-0 @2xl:[scrollbar-width:thin]",
+  },
+  lg: {
+    grid: "@3xl:grid-cols-[minmax(0,1fr)_var(--page-side)] @3xl:grid-rows-[minmax(0,1fr)] @3xl:overflow-hidden",
+    column: "@3xl:min-h-0 @3xl:overflow-y-auto @3xl:overscroll-contain",
+    side: "@3xl:border-l @3xl:border-t-0 @3xl:[scrollbar-width:thin]",
+  },
+  xl: {
+    grid: "@5xl:grid-cols-[minmax(0,1fr)_var(--page-side)] @5xl:grid-rows-[minmax(0,1fr)] @5xl:overflow-hidden",
+    column: "@5xl:min-h-0 @5xl:overflow-y-auto @5xl:overscroll-contain",
+    side: "@5xl:border-l @5xl:border-t-0 @5xl:[scrollbar-width:thin]",
+  },
+};
+
+const REGION = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+const LETS_GO = "print:block print:h-auto print:min-h-0 print:overflow-visible";
+
+export function PageLayout({ children, side, sideWidth, sideAt = "lg", mainLabel = "Content", sideLabel = "Details", padded = true, fill = false, className, mainClassName, sideClassName }) {
+  const has = side != null && side !== false;
+  const at = BESIDE[sideAt] ?? BESIDE.lg;
+  return (
+    <div data-page-layout className={cx("@container flex min-h-0 min-w-0 flex-1 flex-col", LETS_GO, className)}>
+      <div
+        data-page-scroll
+        style={{ "--page-side": px(sideWidth, 304, 220, 560) }}
+        className={cx(
+          "grid min-h-0 min-w-0 flex-1 grid-cols-[minmax(0,1fr)] content-start",
+          has ? cx("overflow-y-auto overscroll-contain", at.grid) : "grid-rows-[minmax(0,1fr)] overflow-hidden",
+          LETS_GO,
+        )}
+      >
+        <div
+          data-page-main
+          role="region"
+          aria-label={mainLabel}
+          tabIndex={0}
+          className={cx("min-w-0", REGION, has ? at.column : "min-h-0 overflow-y-auto overscroll-contain", fill && "flex flex-col", padded && "p-4 sm:p-6", LETS_GO, mainClassName)}
+        >
+          {children}
+        </div>
+        {has ? (
+          <aside
+            data-page-side
+            aria-label={sideLabel}
+            tabIndex={0}
+            className={cx("min-w-0 border-t border-border print:hidden", REGION, at.column, at.side, padded && "p-4", sideClassName)}
+          >
+            {side}
+          </aside>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/templates/next/files/components/ui/stat.jsx

@@ -355,6 +355,17 @@ const METER_SIZES = { thin: { track: "h-1", mark: "h-3" }, md: { track: "h-2", m
  *               bar's
  *   center      a ring's middle instead of the percent: a string or a node
  *               ("4.2 GB", an Icon); null leaves it empty
+ *   compact     the bar alone (the ring alone, for shape="ring"): no label,
+ *               no numbers, no caption, no target line, so it fits where
+ *               words spill: a top bar, a table cell, a card corner. The
+ *               label and the numbers are not lost: a screen reader hears
+ *               them as always, and the bar's tooltip (`title`) shows
+ *               "label: used of limit". Give it its width in className
+ *               (w-14, w-24); size thin reads best in a top bar. Without
+ *               compact a Meter draws its label as visible text, which
+ *               spills in a box under about 8rem (the Newsletter's "15,000
+ *               cr left" ran into Find, UI review X1; check rule 20,
+ *               meter, refuses it)
  */
 export function Meter({
   value,
@@ -373,6 +384,7 @@ export function Meter({
   size = "md",
   shape = "bar",
   center,
+  compact = false,
   className,
   ...rest
 }) {
@@ -416,21 +428,24 @@ export function Meter({
     "aria-valuetext": said,
   };
 
+  // The tooltip of a compact meter: the name, then the numbers a reader hears.
+  const tip = compact ? (label ? `${label}: ${said}` : said) : undefined;
+
   if (shape === "ring") {
     return (
       <MeterRing
-        {...{ pct, over, overBad, barTone, valueTone, valueClass, label, shown, caption, hasTarget, targetMark, targetPct, center, size, className, meterProps, rest }}
+        {...{ pct, over, overBad, barTone, valueTone, valueClass, label, shown, caption, hasTarget, targetMark, targetPct, center, size, className, meterProps, rest, compact, tip }}
         targetText={hasTarget ? `Target ${format(target)}${u}` : null}
       />
     );
   }
 
   const s = METER_SIZES[size] ?? METER_SIZES.md;
-  const footer = caption || (hasTarget && size === "md");
+  const footer = !compact && (caption || (hasTarget && size === "md"));
 
   return (
-    <div className={cx("grid gap-1.5", className)}>
-      {label || shown ? (
+    <div className={cx("grid min-w-0 gap-1.5", className)} title={tip}>
+      {!compact && (label || shown) ? (
         <div aria-hidden="true" className="flex items-baseline justify-between gap-3 text-sm">
           <span className="min-w-0 truncate font-medium text-foreground">{label}</span>
           {shown ? (
@@ -499,7 +514,7 @@ const RING_SIZES = {
 RING_SIZES.thin = RING_SIZES.sm;
 
 // Meter shape="ring": the same numbers, drawn as an arc from twelve o'clock.
-function MeterRing({ pct, overBad, barTone, valueTone, valueClass, label, shown, caption, hasTarget, targetMark, targetPct, targetText, center, size, className, meterProps, rest }) {
+function MeterRing({ pct, overBad, barTone, valueTone, valueClass, label, shown, caption, hasTarget, targetMark, targetPct, targetText, center, size, className, meterProps, rest, compact, tip }) {
   const g = RING_SIZES[size] ?? RING_SIZES.md;
   const c = g.px / 2;
   const r = c - g.w / 2;
@@ -521,10 +536,10 @@ function MeterRing({ pct, overBad, barTone, valueTone, valueClass, label, shown,
   const tick = (d) => [c + Math.cos(a) * d, c + Math.sin(a) * d];
   const [x1, y1] = tick(r - g.w / 2 - 1.5);
   const [x2, y2] = tick(r + g.w / 2 + 1.5);
-  const side = label || shown || caption || (hasTarget && size !== "sm");
+  const side = !compact && (label || shown || caption || (hasTarget && size !== "sm"));
 
   return (
-    <div className={cx("flex min-w-0 items-center", g.gap, className)}>
+    <div className={cx("flex min-w-0 items-center", g.gap, className)} title={tip}>
       <div {...meterProps} className="relative shrink-0" style={{ width: g.px, height: g.px }} {...rest}>
         <svg aria-hidden="true" width={g.px} height={g.px} viewBox={`0 0 ${g.px} ${g.px}`} className="block overflow-visible">
           {/* raw: an SVG gauge — the kit has no smaller part to draw an arc. */}

package/templates/next/files/components/ui/toast.jsx

@@ -37,7 +37,8 @@ import { Spinner } from "./feedback";
 //
 // Newest in front; the rest stack behind and fan out on hover or focus,
 // and every timer pauses while they do (and while the tab is hidden).
-// Close with the ×, Escape, or a sideways swipe. Screen readers hear each
+// Close with the ×, Escape, or a sideways swipe (touch and pen; a mouse
+// selects the text instead, so an error can be copied). Screen readers hear each
 // toast once through a live region (assertive for .error). A toast is
 // never the only record of something that matters: an error the user
 // must act on is a Notice on the surface.
@@ -343,7 +344,8 @@ function ToastItem({ t, index, top, beyond, offset, expanded, clip, paused, onHe
   }
 
   function onPointerDown(e) {
-    if (e.button !== 0 || e.target.closest("button, a, input, textarea, select")) return;
+    // A mouse selects the words (to copy an error); only touch and pen swipe.
+    if (e.pointerType === "mouse" || e.button !== 0 || e.target.closest("button, a, input, textarea, select")) return;
     drag.current = { x: e.clientX, at: e.timeStamp };
     e.currentTarget.setPointerCapture(e.pointerId);
   }
@@ -392,7 +394,8 @@ function ToastItem({ t, index, top, beyond, offset, expanded, clip, paused, onHe
         if (e.key === "Escape") dismiss(t.id);
       }}
       className={cx(
-        "pointer-events-auto absolute inset-x-0 select-none",
+        "pointer-events-auto absolute inset-x-0 select-text",
+        dragging && "select-none",
         "transition-[opacity,translate,transform,height] duration-300 ease-out motion-reduce:transition-none",
         top ? "top-0 starting:-translate-y-full" : "bottom-0 starting:translate-y-full",
         "starting:opacity-0",