@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/components/appearance-labels.ts

@@ -1,63 +0,0 @@
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import type { ContrastMode } from "../theme/contrast";
-import type { TextSize } from "../theme/text-size";
-
-/**
- * The `appearance` namespace (0.32, docs/text-size-harmonization.md §6): the words of the
- * two new settings in the core `appearance` group — `TextSizeSetting` and
- * `ContrastSetting` — and of any quick switch an app builds from the same vocabulary (the
- * showcase's top bar). Like every kit label: prop > `<UiKitProvider labels={{ appearance
- * }}>` > English.
- */
-export interface AppearanceLabels {
-  /** The text-size setting's name. */
-  textSize: string;
-  /** One line under it: what changes, so "Large" is not mistaken for zoom. */
-  textSizeHelp: string;
-  /** The three steps, in {@link TEXT_SIZES} order. */
-  textSizes: Record<TextSize, string>;
-  /** The contrast setting's name. */
-  contrast: string;
-  /** One line under it. */
-  contrastHelp: string;
-  /** The three choices, in {@link CONTRAST_MODES} order. */
-  contrastModes: Record<ContrastMode, string>;
-  /**
-   * The account could not keep the pick (`useAccountAppearance`'s `pickTextSize` /
-   * `pickContrast` rejected): this device keeps it, the account doesn't. For the app's
-   * toast or the line under the setting (0.32.1, keksdose's 0.32 report).
-   */
-  saveFailed: string;
-  /** The date-format setting's name (0.46, `DateFormatSetting`). */
-  dateFormat: string;
-  /** One line under it: the format is its own choice, apart from the language. */
-  dateFormatHelp: string;
-  /** Its first option, followed by that language's sample: "Follow language — 01 Aug 2026". */
-  dateFormatAuto: string;
-  /** `AccountMenuTextSize`'s A− button (0.46, keksdose live #426): one step smaller. */
-  textSmaller: string;
-  /** Its A+ button: one step larger. */
-  textLarger: string;
-}
-
-export const DEFAULT_APPEARANCE_LABELS: AppearanceLabels = {
-  textSize: "Text size",
-  textSizeHelp: "Larger letters, and a layout that makes room for them.",
-  textSizes: { normal: "Normal", large: "Large", xlarge: "Extra large" },
-  contrast: "Contrast",
-  contrastHelp: "More contrast darkens quiet text and lines, and thickens focus frames. System follows this device.",
-  contrastModes: { system: "System", standard: "Standard", more: "More" },
-  saveFailed: "Couldn't save this to your account. It still applies on this device.",
-  dateFormat: "Date format",
-  dateFormatHelp:
-    "How dates are written throughout the app. Independent of the interface language, so you can read the app in English and still see German dates.",
-  dateFormatAuto: "Follow language",
-  textSmaller: "Smaller text",
-  textLarger: "Larger text",
-};
-
-/** The `appearance` namespace, resolved — English, then the provider, then `labels`. For
- *  an app's catalogue entries and quick switches, without restating the defaults. */
-export function useAppearanceLabels(labels?: LabelOverride<AppearanceLabels>): AppearanceLabels {
-  return useKitLabels("appearance", DEFAULT_APPEARANCE_LABELS, labels);
-}

package/src/components/authed-image-labels.ts

@@ -1,11 +0,0 @@
-// The English words of ./authed-image, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./authed-image re-exports them.
-
-import type { AuthedImageLabels } from "./authed-image";
-
-export const DEFAULT_AUTHED_IMAGE_LABELS: AuthedImageLabels = {
-  loading: "Loading image…",
-  loadError: "Image couldn’t be loaded",
-  failedImage: (alt) => `${alt}: image couldn’t be loaded`,
-};

package/src/components/authed-image.tsx

@@ -1,209 +0,0 @@
-import { useState } from "react";
-import type { ImgHTMLAttributes, ReactNode } from "react";
-import { ImageOff } from "lucide-react";
-
-import { cn } from "../lib/cn";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { SKELETON_CLASS } from "./skeleton";
-import { useAuthedSrc } from "../hooks/use-authed-src";
-import type { AuthedFetcher, UseAuthedSrcResult } from "../hooks/use-authed-src";
-import { DEFAULT_AUTHED_IMAGE_LABELS } from "./authed-image-labels";
-
-/** The two states an image can be in besides "there". */
-export interface AuthedImageLabels {
-  /** Read out while the bytes are on their way (the skeleton itself is silent). */
-  loading: string;
-  /** Shown, small, in place of an image that could not be fetched or decoded. */
-  loadError: string;
-  /** The failed tile's accessible name, given the image's alt. */
-  failedImage: (alt: string) => string;
-}
-
-// Defined in ./authed-image-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_AUTHED_IMAGE_LABELS };
-
-export interface AuthedImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children"> {
-  /** The image's URL — an API path when a {@link fetcher} is given. */
-  src: string | null | undefined;
-  /** Required: an image without a text alternative is a gap a reader falls into.
-   *  `""` for a purely decorative one. */
-  alt: string;
-  /** The app's authenticated GET (see {@link useAuthedSrc}). Left out, `src` is loaded
-   *  by the browser as usual and this is an `<img>` with loading and error states. */
-  fetcher?: AuthedFetcher | null;
-  /** Classes for the box around the image (the placeholders fill it). */
-  wrapperClassName?: string;
-  /**
-   * Wrap the image in a link to itself, opening in a new tab — kastlan's
-   * `AuthedImage` did, because an object URL is the only address of a protected image
-   * a browser tab can open. The link's href is the `blob:` URL, never the API path.
-   */
-  link?: boolean;
-  /** Replaces the default skeleton while loading. */
-  loadingFallback?: ReactNode;
-  /**
-   * Replaces the default "couldn't load" tile. `null` renders nothing in its place —
-   * an optional photo slot that simply stays empty; only `undefined` (left out) means
-   * the default tile.
-   */
-  errorFallback?: ReactNode;
-  /**
-   * Keep a click on the image (and the Enter that follows its `link`) from reaching an
-   * ancestor — a thumbnail in a DataTable row or a clickable card opens itself instead
-   * of also running the row's action. As TextLink's and IconButton's `stopPropagation`.
-   */
-  stopPropagation?: boolean;
-  labels?: LabelOverride<AuthedImageLabels>;
-}
-
-/**
- * An image with a loading state, an error state and — given a `fetcher` — the app's
- * authentication. Replaces kastlan's `shared/components/authed-image.tsx`, which
- * rendered NOTHING until the blob arrived and nothing at all if it never did: a card
- * with a photo slot either had the photo or was silently shorter.
- *
- * Two failures are one state here: the fetch failing (401, 404, offline) and the
- * browser failing to decode what arrived (`onError` on the `<img>`, e.g. a PDF served
- * where an image was expected).
- */
-export function AuthedImage({
-  src,
-  alt,
-  fetcher,
-  wrapperClassName,
-  className,
-  link,
-  loadingFallback,
-  errorFallback,
-  stopPropagation,
-  labels: labelsProp,
-  onLoad,
-  onError,
-  ...rest
-}: AuthedImageProps) {
-  const labels = useKitLabels("authedImage", DEFAULT_AUTHED_IMAGE_LABELS, labelsProp);
-  const fetched = useAuthedSrc(src, { fetcher });
-  return (
-    <ImageStates
-      fetched={fetched}
-      alt={alt}
-      labels={labels}
-      className={className}
-      wrapperClassName={wrapperClassName}
-      link={link}
-      loadingFallback={loadingFallback}
-      errorFallback={errorFallback}
-      stopPropagation={stopPropagation}
-      imgProps={rest}
-      onLoad={onLoad}
-      onError={onError}
-    />
-  );
-}
-
-/**
- * The rendering half of {@link AuthedImage}, for a caller that already holds a
- * {@link useAuthedSrc} result (the lightbox needs the object URL for its download link
- * as well). Internal to the package.
- */
-export function ImageStates({
-  fetched,
-  alt,
-  labels,
-  className,
-  wrapperClassName,
-  link,
-  loadingFallback,
-  errorFallback,
-  stopPropagation,
-  imgProps,
-  onLoad,
-  onError,
-}: {
-  fetched: UseAuthedSrcResult;
-  alt: string;
-  labels: AuthedImageLabels;
-  className?: string;
-  wrapperClassName?: string;
-  link?: boolean;
-  loadingFallback?: ReactNode;
-  errorFallback?: ReactNode;
-  stopPropagation?: boolean;
-  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children" | "onLoad" | "onError">;
-  onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
-  onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
-}) {
-  // Decode state, per src: keyed so a new picture starts over rather than inheriting
-  // the previous one's "loaded" or "broken".
-  const [decode, setDecode] = useState<{ src: string | null; state: "loaded" | "error" } | null>(null);
-  const decoded = decode && decode.src === fetched.src ? decode.state : "pending";
-  const failed = fetched.status === "error" || decoded === "error";
-  const waiting = !failed && (fetched.status === "loading" || (fetched.src !== null && decoded === "pending"));
-
-  const img = fetched.src !== null && !failed && (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
-    <img
-      {...imgProps}
-      src={fetched.src}
-      alt={alt}
-      onLoad={(e) => {
-        setDecode({ src: fetched.src, state: "loaded" });
-        onLoad?.(e);
-      }}
-      onError={(e) => {
-        setDecode({ src: fetched.src, state: "error" });
-        onError?.(e);
-      }}
-      className={cn(
-        // Kept in the tree while it decodes (the browser needs it there to load at
-        // all), but invisible, so the skeleton is what shows.
-        decoded === "pending" && "opacity-0",
-        className,
-      )}
-    />
-  );
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction: only fences the image's own clicks off from an ancestor's handler
-    <span
-      onClick={stopPropagation ? (e) => e.stopPropagation() : undefined}
-      onKeyDown={stopPropagation ? (e) => e.key === "Enter" && e.stopPropagation() : undefined}
-      data-image-state={failed ? "error" : waiting ? "loading" : fetched.status === "idle" ? "idle" : "ready"}
-      className={cn("relative block overflow-hidden", wrapperClassName)}
-      aria-busy={waiting || undefined}
-    >
-      {link && img && fetched.src ? (
-        <a href={fetched.src} target="_blank" rel="noreferrer noopener" className="block h-full w-full">
-          {img}
-        </a>
-      ) : (
-        img
-      )}
-      {waiting &&
-        (loadingFallback ?? (
-          <span className={cn(SKELETON_CLASS, "absolute inset-0 block rounded-none")}>
-            <span className="sr-only">{labels.loading}</span>
-          </span>
-        ))}
-      {failed &&
-        // `=== undefined`, not `??`: `null` is the caller asking for nothing at all.
-        (errorFallback !== undefined ? (
-          errorFallback
-        ) : (
-          <span
-            // `role="img"` with the alt as its name: the picture that failed still
-            // occupies its place in the reading order, and "couldn't be loaded" is
-            // the one fact a reader needs about it.
-            role="img"
-            aria-label={alt ? labels.failedImage(alt) : labels.loadError}
-            className="flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-hover p-2 text-center text-xs text-muted"
-          >
-            <ImageOff aria-hidden className="size-5 shrink-0" />
-            <span aria-hidden className="line-clamp-2">
-              {labels.loadError}
-            </span>
-          </span>
-        ))}
-    </span>
-  );
-}