@eifi1/ui-kit 0.16.0 → 0.17.0

package/src/components/ui.tsx

@@ -2269,8 +2269,33 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
    * nor on `inset`, which has no border to make louder (its tone is a fill).
    */
   toneStrength?: "soft" | "strong";
+  /**
+   * Wash the card in the tone's quiet `-bg` surface as well as framing it. A toned
+   * card is a border and a title colour, at either strength — the wash belongs to
+   * `AlertBanner`, the message, not to a card that holds a form — so it stays
+   * off by default. Some tiles want both: keksdose's password / delete-account tile
+   * was `toneFrameClass(tone)` (border AND wash) before 0.16, and after moving to
+   * `toneStrength="strong"` it re-added `bg-[var(--danger-bg)]` by hand. The wash is
+   * layered OVER the card's own `--bg-surface` (as AlertBanner's `elevated` does), so
+   * the dark theme's translucent tints stay a card, not a hole to the page below.
+   *
+   * No effect without `tone`, nor on `inset`, whose tone is already the fill.
+   */
+  toneFill?: boolean;
+  /**
+   * The parts' type scale. `"compact"`: CardTitle `text-sm font-medium`,
+   * CardDescription `text-xs` and the CardHeader's title-to-description gap
+   * `gap-0.5` — the small settings / admin card. keksdose wrote those three classes by
+   * hand on ~25 cards. Set here, they reach the parts through context; a class on a
+   * part still wins, and a Card nested inside starts again from its own density.
+   *
+   * Default `"comfortable"`: the parts as they have always been.
+   */
+  density?: CardDensity;
 }
 
+export type CardDensity = "comfortable" | "compact";
+
 export type CardTone = "warning" | "danger" | "info" | "success";
 
 // The title is reached through its `data-slot`, so the tone needs no context and a
@@ -2312,6 +2337,16 @@ const CARD_PADDING_STRONG: Record<NonNullable<CardProps["padding"]>, string> = {
   md: "p-[15px]",
 };
 
+// The wash as a background IMAGE over the card's opaque `--bg-surface` — see
+// `toneFill`. A plain `bg-[var(--danger-bg)]` would REPLACE the surface, and the dark
+// theme's washes are a translucent tint.
+const CARD_TONE_WASH: Record<CardTone, string> = {
+  warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
+  danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
+  info: "bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]",
+  success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]",
+};
+
 const CARD_TONES_STRONG: Record<CardTone, string> = {
   warning: "border-2 border-[var(--warning)]",
   danger: "border-2 border-[var(--danger-border-strong)]",
@@ -2326,6 +2361,9 @@ const CARD_TONES_STRONG: Record<CardTone, string> = {
  */
 const CardPaddedContext = createContext(false);
 
+/** The {@link CardProps.density} of the nearest Card — the parts' type scale. */
+const CardDensityContext = createContext<CardDensity>("comfortable");
+
 export function Card({
   className,
   children,
@@ -2333,6 +2371,8 @@ export function Card({
   variant = "default",
   tone,
   toneStrength = "soft",
+  toneFill = false,
+  density = "comfortable",
   padding,
   ...rest
 }: CardProps) {
@@ -2347,6 +2387,7 @@ export function Card({
     <div
       data-tone={tone}
       data-tone-strength={strong ? "strong" : undefined}
+      data-density={density === "compact" ? "compact" : undefined}
       {...rest}
       className={cn(
         variant === "inset"
@@ -2365,12 +2406,15 @@ export function Card({
             ),
         toned && (bordered ? toned.border : toned.fill),
         strong && tone && CARD_TONES_STRONG[tone],
+        toneFill && bordered && tone && CARD_TONE_WASH[tone],
         toned?.title,
         ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],
         className,
       )}
     >
-      <CardPaddedContext.Provider value={ownPadding !== undefined}>{children}</CardPaddedContext.Provider>
+      <CardPaddedContext.Provider value={ownPadding !== undefined}>
+        <CardDensityContext.Provider value={density}>{children}</CardDensityContext.Provider>
+      </CardPaddedContext.Provider>
     </div>
   );
 }
@@ -2415,6 +2459,7 @@ export type CardFooterProps = ComponentPropsWithoutRef<"div">;
 
 export function CardHeader({ className, stackAction = false, ...props }: CardHeaderProps) {
   const padded = useContext(CardPaddedContext);
+  const compact = useContext(CardDensityContext) === "compact";
   return (
     <div
       data-slot="card-header"
@@ -2433,6 +2478,7 @@ export function CardHeader({ className, stackAction = false, ...props }: CardHea
         // never inherits an ancestor header's two columns.
         "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
         padded ? "px-0 pt-0" : "px-6 pt-6",
+        compact && "gap-0.5",
         // One column under `sm`, and the action back into the flow (DOM order, so
         // after the description when it is written after it), at the start edge.
         // The descendant selector outranks CardAction's own placement classes.
@@ -2446,10 +2492,18 @@ export function CardHeader({ className, stackAction = false, ...props }: CardHea
 }
 
 export function CardTitle({ className, as: Tag = "div", ...props }: CardTitleProps) {
-  return <Tag data-slot="card-title" className={cn("font-semibold leading-none", className)} {...props} />;
+  const compact = useContext(CardDensityContext) === "compact";
+  return (
+    <Tag
+      data-slot="card-title"
+      className={cn(compact ? "text-sm font-medium" : "font-semibold", "leading-none", className)}
+      {...props}
+    />
+  );
 }
 
 export function CardDescription({ className, ...props }: CardDescriptionProps) {
+  const compact = useContext(CardDensityContext) === "compact";
   return (
     <div
       data-slot="card-description"
@@ -2457,7 +2511,7 @@ export function CardDescription({ className, ...props }: CardDescriptionProps) {
       // field captions). It was `--money-neutral`, a MONEY token that happened to be
       // a similar grey — and a palette that re-tunes the money colours moved every
       // card's description with them.
-      className={cn("text-sm text-[var(--text-muted)]", className)}
+      className={cn(compact ? "text-xs" : "text-sm", "text-[var(--text-muted)]", className)}
       {...props}
     />
   );

package/src/i18n/locales/en.ts

@@ -0,0 +1,116 @@
+import { DEFAULT_UI_KIT_LABELS } from "../defaults";
+import { formatFileSize } from "../kit-labels";
+import type { UiKitLabels } from "../kit-labels";
+
+/**
+ * The kit's English words with every count and file size formatted for
+ * `numberLocale` — `uiKitLabelsEn("en-CH")` reads "12’345 rows", where the defaults
+ * print "12345". For `<UiKitProvider labels={uiKitLabelsEn("en-CH")}>`.
+ *
+ * A factory and not a constant on purpose: {@link DEFAULT_UI_KIT_LABELS} prints counts
+ * raw and has since 0.1, so an app that passes nothing must keep seeing exactly that.
+ * Formatting is something an app asks for, by calling this.
+ *
+ * Derived rather than copied: every word is the default's own, spread in, and only the
+ * labels that print a number are restated — with the same wording and the same
+ * singular/plural split — so a key added to the defaults is here the moment it lands.
+ * Row and line numbers (`lineItems.row`, `measuredGrid.cell`) are positions, not
+ * counts, and stay as the defaults print them, as in the other catalogues.
+ */
+export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
+  const num = new Intl.NumberFormat(numberLocale);
+  const n = (value: number) => num.format(value);
+  const d = DEFAULT_UI_KIT_LABELS;
+
+  return {
+    ...d,
+    feedbackAttachment: {
+      ...d.feedbackAttachment,
+      attachmentLimit: (max) =>
+        `Up to ${n(max)} ${max === 1 ? "attachment" : "attachments"} — remove one to add another.`,
+    },
+    measuredGrid: {
+      ...d.measuredGrid,
+      points: (count) => (count === 1 ? "1 point" : `${n(count)} points`),
+      problems: (count) =>
+        count === 1 ? "1 cell is not a number" : `${n(count)} cells are not numbers`,
+    },
+    dataTable: {
+      ...d.dataTable,
+      filterResults: (shown, total) => `${n(shown)} of ${n(total)} rows`,
+      pageChanged: (page, totalPages) => `Page ${n(page)} of ${n(totalPages)}`,
+      pageRange: (from, to, total) => `${n(from)}–${n(to)} / ${n(total)}`,
+      rowCount: (total) => n(total),
+      columnsCount: (visible, total) => `Columns (${n(visible)}/${n(total)})`,
+    },
+    calendarHeatmap: {
+      ...d.calendarHeatmap,
+      truncated: (count) =>
+        `Showing the most recent days; ${n(count)} earlier ${count === 1 ? "day is" : "days are"} not shown.`,
+    },
+    combobox: {
+      ...d.combobox,
+      selectedCount: (count) => `${n(count)} selected`,
+      resultCount: (count) => (count === 1 ? "1 result" : `${n(count)} results`),
+      minChars: (count) =>
+        count === 1 ? "Type at least 1 character" : `Type at least ${n(count)} characters`,
+    },
+    multiSelect: {
+      ...d.multiSelect,
+      selectedCount: (count) => n(count),
+    },
+    chipInput: {
+      ...d.chipInput,
+      atLimit: (max) => `Limit of ${n(max)} reached`,
+    },
+    iconPicker: {
+      ...d.iconPicker,
+      resultCount: (count) => (count === 1 ? "1 icon" : `${n(count)} icons`),
+    },
+    bulkActionBar: {
+      ...d.bulkActionBar,
+      selected: (count) => `${n(count)} selected`,
+    },
+    file: {
+      // The kit's own `Intl` unit formatting, pinned to this locale ("3.4 MB").
+      size: (bytes) => formatFileSize(bytes, numberLocale),
+    },
+    filePicker: {
+      ...d.filePicker,
+      rejectedCount: (name, maxFiles) =>
+        `“${name}” was not added: at most ${n(maxFiles)} ${maxFiles === 1 ? "file" : "files"}`,
+      rejectedMany: (count) => `${n(count)} files were not added`,
+      rejectedPick: (count) =>
+        count === 1 ? "The file was not added" : `None of the ${n(count)} files were added`,
+      selected: (count, firstName) =>
+        count === 1 ? `“${firstName}” selected` : `${n(count)} files selected`,
+    },
+    wizard: {
+      ...d.wizard,
+      step: (current, total) => `Step ${n(current)} of ${n(total)}`,
+    },
+    tour: {
+      ...d.tour,
+      step: (current, total) => `${n(current)} / ${n(total)}`,
+    },
+    passwordStrength: {
+      ...d.passwordStrength,
+      ruleLength: (minLength) => `At least ${n(minLength)} characters`,
+      tooLong: (maxBytes) =>
+        `At most ${n(maxBytes)} characters (accents and emoji count for more than one).`,
+    },
+    floatingPanel: {
+      ...d.floatingPanel,
+      badge: (count) => `${n(count)} new`,
+    },
+    imageGrid: {
+      ...d.imageGrid,
+      item: (index, count) => `Image ${n(index)} of ${n(count)}`,
+    },
+    lightbox: {
+      ...d.lightbox,
+      counter: (index, count) => `${n(index)} / ${n(count)}`,
+      position: (index, count) => `Image ${n(index)} of ${n(count)}`,
+    },
+  };
+}

package/src/rhf/line-items.tsx

@@ -24,7 +24,8 @@
  * list's `error`. Each cell's `render` gets `name`, the row's path
  * (`"components.2"`), to bind its field to.
  *
- * `summary`, `fieldLabels` and `narrowColumns` pass through to {@link LineItems}. With
+ * `summary`, `fieldLabels`, `narrowColumns`, `removePlacement` and `removeAlign` pass
+ * through to {@link LineItems}. With
  * `fieldLabels="floating"` a cell's `fieldLabel` is the column's name; the bound
  * fields' own `label` is a `FormLabel` ABOVE the control, so for the floating
  * one render the kit field through `RhfField`:

package/src/search/global-search.tsx

@@ -42,8 +42,20 @@ export const DEFAULT_GLOBAL_SEARCH_LABELS: GlobalSearchLabels = {
 export interface GlobalSearchSource {
   /** Stable key — the effect that runs the source is keyed by it, not by identity. */
   id: string;
-  /** The group its results are shown under (an entry's own `group` is ignored). */
+  /** The group its results are shown under (an entry's own `group` is ignored) — unless
+   *  `groups` is set, where it is only the home of entries that name no declared group. */
   group: string;
+  /**
+   * Split ONE request into several groups — kastlan's record search answers with
+   * properties, units, contacts, leases and invoices at once, and one source per group
+   * meant a dedupe layer so the network still saw one request. Each entry is then shown
+   * under the group its own `group` names: a declared `key` (shown by its `label`) or a
+   * plain string (key and heading at once). The groups appear in THIS order whatever the
+   * answer's order, each kept to `limit` rows; an entry naming no declared group falls
+   * under `group`. While the request runs, or when it fails, the source shows one status
+   * line under its first group, not one per group. Unset: one group, as before.
+   */
+  groups?: readonly (string | GlobalSearchSourceGroup)[];
   /** Called with the trimmed query. Its results are shown AS GIVEN — the source ranked
    *  them — and never re-filtered by the index's matcher. `signal` aborts when the query
    *  moves on or the palette closes; a stale answer is dropped either way. */
@@ -52,7 +64,7 @@ export interface GlobalSearchSource {
   minChars?: number;
   /** Quiet period after the last keystroke before it is asked. Default 200ms. */
   debounceMs?: number;
-  /** Rows kept. Default: `indexOptions.groupLimit` (8). */
+  /** Rows kept — per group, when `groups` is set. Default: `indexOptions.groupLimit` (8). */
   limit?: number;
   /** Mask every row of this source for session replay, hints (amounts) included. An
    *  entry's own `redact` still wins. */
@@ -62,6 +74,13 @@ export interface GlobalSearchSource {
   onError?: (error: unknown) => void;
 }
 
+/** One of a multi-group source's groups: the `key` its entries name in `group`, and the
+ *  heading shown — so a server's type ("unit") need not be translated per entry. */
+export interface GlobalSearchSourceGroup {
+  key: string;
+  label: string;
+}
+
 /** What a custom trigger gets: everything the default button uses. */
 export interface GlobalSearchTriggerProps {
   open: () => void;
@@ -90,7 +109,7 @@ export interface GlobalSearchProps {
    * neither re-indexes nor loops, and the icons and handlers used are always the latest.
    */
   entries?: readonly SearchEntry[];
-  /** The async sources, each streamed into its own group. */
+  /** The async sources, each streamed into its own group — or several (`groups`). */
   sources?: readonly GlobalSearchSource[];
   /** What the empty query shows, under the `suggestions` heading. */
   suggestions?: readonly GlobalSearchSuggestion[];
@@ -311,7 +330,17 @@ function GlobalSearchImpl({
   const byId = useMemo(() => new Map(list.map((e) => [e.id, e])), [sig]);
 
   const sourceKey = (sources ?? [])
-    .map((s) => [s.id, s.group, s.minChars ?? 2, s.debounceMs ?? 200, s.limit, s.redact].join("\u0001"))
+    .map((s) =>
+      [
+        s.id,
+        s.group,
+        (s.groups ?? []).map((g) => (typeof g === "string" ? g : `${g.key}\u0003${g.label}`)).join("\u0004"),
+        s.minChars ?? 2,
+        s.debounceMs ?? 200,
+        s.limit,
+        s.redact,
+      ].join("\u0001"),
+    )
     .join("\u0002");
   const sourceList = useMemo(() => sources ?? [], [sourceKey]);
 
@@ -434,10 +463,12 @@ function GlobalSearchImpl({
     for (const source of sourceList) {
       if (q.length < (source.minChars ?? 2)) continue;
       const result = sourceResults[source.id];
+      const declared = (source.groups ?? []).map((g) => (typeof g === "string" ? { key: g, label: g } : g));
       const status = (label: string, icon: ReactNode): CommandItem => ({
         id: `src:${source.id}:status`,
         label,
-        group: source.group,
+        // One line for the one request, under the group that will head its answer.
+        group: declared[0]?.label ?? source.group,
         icon,
         kind: "status",
         onSelect: noop,
@@ -448,10 +479,30 @@ function GlobalSearchImpl({
         out.push(status(pl.loading, <Loader2 className="size-3.5 animate-spin" />));
       } else if (result.status === "error") {
         out.push(status(pl.error ?? DEFAULT_COMMAND_PALETTE_LABELS.error!, <AlertCircle className="size-3.5" />));
-      } else {
+      } else if (!declared.length) {
         for (const entry of result.entries.slice(0, source.limit ?? groupLimit)) {
           out.push(toItem(`src:${source.id}:`, entry, source.group, source.redact ?? redactLabels));
         }
+      } else {
+        // Bucket by the entry's own group, then emit in the DECLARED order — the answer's
+        // order must not reshuffle the headings between keystrokes. Within a group the
+        // source's ranking stands. The group key is in the row id: two record types may
+        // share an id ("1"), and the palette keys rows by it.
+        const buckets = new Map<string, { label: string; entries: SearchEntry[] }>();
+        for (const g of declared) buckets.set(g.key, { label: g.label, entries: [] });
+        const rest: SearchEntry[] = [];
+        for (const entry of result.entries) {
+          const bucket = entry.group === undefined ? undefined : buckets.get(entry.group);
+          (bucket ? bucket.entries : rest).push(entry);
+        }
+        const limit = source.limit ?? groupLimit;
+        const emit = (key: string, label: string, list: SearchEntry[]) => {
+          for (const entry of list.slice(0, limit)) {
+            out.push(toItem(`src:${source.id}:${key}:`, entry, label, source.redact ?? redactLabels));
+          }
+        };
+        for (const [key, { label, entries: list }] of buckets) emit(key, label, list);
+        emit("~", source.group, rest);
       }
     }