@eifi1/ui-kit 0.14.2 → 0.15.1

package/src/feedback/feedback-thread.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type { ReactNode, Ref } from "react";
-import { Paperclip, Send } from "lucide-react";
+import { ImageIcon, ImageOff, Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatDate, formatRelativeTime } from "../lib/format";
 import { Button, EmptyState, Spinner, Textarea } from "../components/ui";
@@ -336,18 +336,7 @@ function DefaultAttachment({
   size: (bytes: number) => string;
 }) {
   const { name, url, type } = attachment;
-  if (url && type?.startsWith("image/")) {
-    return (
-      <a href={url} target="_blank" rel="noopener noreferrer" className="block">
-        <img
-          src={url}
-          alt={name}
-          loading="lazy"
-          className="h-20 w-20 rounded border border-[var(--border)] object-cover"
-        />
-      </a>
-    );
-  }
+  if (url && type?.startsWith("image/")) return <ImageThumbnail url={url} name={name} />;
   const content = (
     <>
       <Paperclip className="size-3.5 shrink-0" aria-hidden />
@@ -368,6 +357,40 @@ function DefaultAttachment({
   );
 }
 
+/** An image attachment's thumbnail. The box is drawn before the picture arrives —
+ *  `loading="lazy"` leaves it empty until it nears the viewport, and a URL that has
+ *  expired never fills it — and an empty bordered square read as a broken layout, not
+ *  as a picture. So the box carries an image glyph underneath until the picture
+ *  covers it, and swaps it for a broken-image glyph when the load fails. */
+function ImageThumbnail({ url, name }: { url: string; name: string }) {
+  // Keyed on the URL, so a message whose attachment is replaced tries the new one.
+  const [failedUrl, setFailedUrl] = useState<string | null>(null);
+  const failed = failedUrl === url;
+  const Glyph = failed ? ImageOff : ImageIcon;
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="relative block h-20 w-20 overflow-hidden rounded border border-[var(--border)] bg-[var(--bg-surface-2)]"
+    >
+      <Glyph aria-hidden className="absolute inset-0 m-auto size-6 text-[var(--text-muted)]" />
+      {!failed && (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
+        <img
+          src={url}
+          alt={name}
+          loading="lazy"
+          onError={() => setFailedUrl(url)}
+          className="relative h-full w-full object-cover"
+        />
+      )}
+      {/* The <img> and its alt are gone once it failed; the link still needs a name. */}
+      {failed && <span className="sr-only">{name}</span>}
+    </a>
+  );
+}
+
 /** The time, refreshed once a minute while `active`, so "2 minutes ago" does not stay
  *  "just now" on a page left open. Read in state rather than in render, which must be
  *  pure. */

package/src/lib/strip-fade.ts

@@ -0,0 +1,82 @@
+import { useLayoutEffect, useState, type RefObject } from "react";
+
+// How far the fade at a scrolled strip's cut edge reaches, and how much room a tab
+// brought into view keeps from that edge so the fade never lies on top of it.
+export const TAB_FADE_PX = 24;
+
+/**
+ * Shared by Tabs' strip and AppShell's scrolling phone sub-nav; internal, not part of
+ * the package's surface.
+ *
+ * Which ends of a sideways-scrolling strip have tabs cut off behind them, as the
+ * `mask-image` that fades those ends out — or `undefined` while everything fits.
+ *
+ * A strip that overflowed used to stop dead at its edge: the last tab sliced through
+ * mid-word, and nothing on a phone (whose scrollbars are overlays that only show
+ * while you drag) said there was more to reach. A fade is the cue — the letters
+ * thin out rather than end — and it is measured, not assumed, so a strip that fits
+ * is painted exactly as before. Physical `left`/`right` in the gradient, because
+ * `mask-image` has no logical directions; the reading direction is read from the
+ * element, and `scrollLeft` is a magnitude here because an RTL strip counts it
+ * negative from the start edge.
+ */
+export function useStripFade(
+  ref: RefObject<HTMLElement | null>,
+): { mask: string | undefined; overflow: "start" | "end" | "both" | undefined } {
+  const [edges, setEdges] = useState({ left: false, right: false, rtl: false });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const hidden = el.scrollWidth - el.clientWidth;
+      const scrolled = Math.abs(el.scrollLeft);
+      const rtl = getComputedStyle(el).direction === "rtl";
+      const atStart = scrolled > 1;
+      const atEnd = hidden - scrolled > 1;
+      const left = rtl ? atEnd : atStart;
+      const right = rtl ? atStart : atEnd;
+      setEdges((prev) =>
+        prev.left === left && prev.right === right && prev.rtl === rtl ? prev : { left, right, rtl },
+      );
+    };
+    measure();
+    el.addEventListener("scroll", measure, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(el);
+    // The tabs, too: a label or a badge that grows changes the overflow without
+    // resizing the strip's own box.
+    for (const child of Array.from(el.children)) observer?.observe(child);
+    return () => {
+      el.removeEventListener("scroll", measure);
+      observer?.disconnect();
+    };
+  });
+  if (!edges.left && !edges.right) return { mask: undefined, overflow: undefined };
+  const l = edges.left ? `transparent, #000 ${TAB_FADE_PX}px` : "#000";
+  const r = edges.right ? `#000 calc(100% - ${TAB_FADE_PX}px), transparent` : "#000";
+  const rtl = edges.rtl;
+  const start = rtl ? edges.right : edges.left;
+  const end = rtl ? edges.left : edges.right;
+  return {
+    mask: `linear-gradient(to right, ${l}, ${r})`,
+    overflow: start && end ? "both" : start ? "start" : "end",
+  };
+}
+
+/**
+ * Scroll `item` into view inside `strip` — the strip only (`scrollBy` on it, never
+ * `scrollIntoView`, which would scroll the page too) — far enough to clear the fade.
+ * A no-op when the strip fits or the item is already clear of both edges.
+ */
+export function scrollIntoStrip(strip: HTMLElement, item: HTMLElement): void {
+  if (strip.scrollWidth <= strip.clientWidth) return;
+  const s = strip.getBoundingClientRect();
+  const t = item.getBoundingClientRect();
+  const delta =
+    t.left < s.left + TAB_FADE_PX
+      ? t.left - s.left - TAB_FADE_PX
+      : t.right > s.right - TAB_FADE_PX
+        ? t.right - s.right + TAB_FADE_PX
+        : 0;
+  if (delta !== 0) strip.scrollBy({ left: delta });
+}

package/src/rhf/form.tsx

@@ -197,7 +197,9 @@ export function FormItem({ className, ...rest }: FormItemProps) {
   const value = useMemo(() => ({ id, mounted, mark }), [id, mounted, mark]);
   return (
     <FormItemContext.Provider value={value}>
-      <div data-slot="form-item" {...rest} className={cn("grid gap-1", className)} />
+      {/* `content-start`: stretched to a taller neighbour's height in a grid row, the
+          item gave the extra to its rows and its control sat lower (showcase audit). */}
+      <div data-slot="form-item" {...rest} className={cn("grid content-start gap-1", className)} />
     </FormItemContext.Provider>
   );
 }

package/src/shell/app-shell.tsx

@@ -1,10 +1,11 @@
-import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { Link, NavLink, matchPath, useLocation } from "react-router";
 import { ChevronRight, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
+import { scrollIntoStrip, useStripFade } from "../lib/strip-fade";
 import { dirOf, type Direction } from "../lib/direction";
 import { readStored, writeStored } from "../lib/safe-storage";
 import { Tooltip } from "../components/tooltip";
@@ -140,6 +141,15 @@ export interface AppShellProps extends ComponentPropsWithoutRef<"div"> {
    *  bottom bar — the phone's counterpart of the sidebar's second level. Default true;
    *  `false` keeps the single bar, where a group entry only links to its own `to`. */
   mobileSubNav?: boolean;
+  /**
+   * How the phone sub-nav lays out a group with more pages than fit on one row.
+   * `"wrap"` (default): every page in view, on as many rows as it takes — the bar
+   * grows. `"scroll"`: one row that scrolls sideways, faded at a cut edge, with the
+   * current page scrolled into view. A long group took four rows (~130px) of a 390px
+   * screen above the bottom bar (showcase audit); scrolling gives that back at the
+   * price of pages hidden past the edge, so it is the app's call, per shell.
+   */
+  mobileSubNavLayout?: "wrap" | "scroll";
   /**
    * Lay the shell out inside its PARENT'S box instead of the viewport: `h-full` rather
    * than `h-dvh`, its own scroll container at every width, a bottom bar pinned to the
@@ -255,6 +265,7 @@ export function AppShell({
   expandLabel,
   subNav = "flyout",
   mobileSubNav = true,
+  mobileSubNavLayout = "wrap",
   toggleGroupLabel,
   embedded: embeddedProp,
   className,
@@ -433,7 +444,7 @@ export function AppShell({
           ref={navRef}
           className="md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]"
         >
-          {mobileSubNav && <MobileSubNav nav={nav} />}
+          {mobileSubNav && <MobileSubNav nav={nav} layout={mobileSubNavLayout} />}
           <nav
             data-tour="nav"
             className="grid"
@@ -586,8 +597,17 @@ function MobileNavItem({ item }: { item: AppShellNavItem }) {
  * It slides in over 200ms (fade only under reduced motion) and wraps onto more rows
  * rather than scrolling, so every page of the group is in view at once.
  */
-function MobileSubNav({ nav }: { nav: AppShellNavItem[] }) {
+function MobileSubNav({ nav, layout }: { nav: AppShellNavItem[]; layout: "wrap" | "scroll" }) {
   const { pathname } = useLocation();
+  const scroll = layout === "scroll";
+  const listRef = useRef<HTMLUListElement>(null);
+  const fade = useStripFade(listRef);
+  // The current page into view — the row only, never the page.
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const current = list?.querySelector<HTMLElement>('[aria-current="page"]');
+    if (scroll && list && current) scrollIntoStrip(list, current);
+  }, [scroll, pathname]);
   const group = nav.find(
     (item) =>
       !!item.items?.length &&
@@ -604,10 +624,17 @@ function MobileSubNav({ nav }: { nav: AppShellNavItem[] }) {
       className="animate-subnav border-b border-[var(--border)]"
     >
       <ul
-        // Wraps onto as many rows as the group needs rather than scrolling sideways: a
-        // sideways row hides pages past the edge, and every page of the group in view
-        // is the point of the row. The bar grows with it — `--app-nav-h` measures it.
-        className="flex flex-wrap gap-1.5 px-3 py-2"
+        ref={listRef}
+        // `wrap` (default) takes as many rows as the group needs: a sideways row hides
+        // pages past the edge, and every page of the group in view is the point of the
+        // row. The bar grows with it — `--app-nav-h` measures it. `scroll` is the app's
+        // opt-in trade: one row, the cut edge faded (see mobileSubNavLayout).
+        className={cn(
+          "flex gap-1.5 px-3 py-2",
+          scroll ? "overflow-x-auto overscroll-x-contain [scrollbar-width:none]" : "flex-wrap",
+        )}
+        data-overflow={scroll ? fade.overflow : undefined}
+        style={scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : undefined}
       >
         {group.items!.map((sub) => (
           <li key={sub.to} className="shrink-0">

package/src/wizard/stepper-nav.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo } from "react";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactElement, ReactNode } from "react";
 import { Check } from "lucide-react";
 import { cn } from "../lib/cn";
@@ -88,6 +88,25 @@ export function StepperNav<TData extends Record<string, unknown>>({
   const l = useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels);
   const cancelTitleId = useId();
 
+  // The step area never shrinks below the tallest step shown so far, so the button
+  // bar does not jump up and down as Next and Back move between a long step and a
+  // short one. This replaces a fixed `min-h-[300px]` (carried over from Kastlan,
+  // whose steps are all long forms), which did the same for steps under 300px but
+  // left a short wizard — two fields a step — with a ~200px hole above its buttons.
+  // Measured rather than guessed: the floor is whatever the app's own steps need.
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentFloor, setContentFloor] = useState(0);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const h = el.offsetHeight;
+      setContentFloor((floor) => (h > floor ? h : floor));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   const contextValue = useMemo(
     () => ({
       registerStepValidate: wizard.registerStepValidate,
@@ -235,7 +254,9 @@ export function StepperNav<TData extends Record<string, unknown>>({
 
       {/* Step content */}
       <WizardContextProvider value={contextValue}>
-        <div className="min-h-[300px]">{children}</div>
+        <div style={contentFloor > 0 ? { minHeight: contentFloor } : undefined}>
+          <div ref={contentRef}>{children}</div>
+        </div>
       </WizardContextProvider>
 
       {/* Submit error */}