makersclaw 0.7.0 → 0.8.1

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",