@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/service-card.tsx

@@ -11,7 +11,11 @@ import { EyeClassicIcon } from '../icons-v2-generated/interface/eye-classic-icon
 import { EyeOffClassicIcon } from '../icons-v2-generated/interface/eye-off-classic-icon';
 import { OpenframeLogoIcon } from '../icons-v2-generated/logos/openframe-logo-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { FloatingTooltip } from './floating-tooltip';
+import { loadingItemProps, useLoadingScope } from './loading-scope';
+import { Tag } from './tag';
 import { TruncateText } from './truncate-text';
 
 export type ServiceCardRowAction = {
@@ -40,7 +44,28 @@ export interface ServiceCardProps {
   icon?: React.ReactNode;
   tag?: ServiceCardTag;
   rows: ServiceCardRow[];
+  /**
+   * The values are still being read: the frame, icon, title, subtitle, tag and each row's label are drawn for real
+   * (an empty title is a bar), and each row's value is a bar in the row's own value box, without its actions. A
+   * loading scope does the same.
+   */
+  loading?: boolean;
   className?: string;
+  /** `data-*` markers (`data-loading-item` on a read list's card), on the card's root in both forms. */
+  [key: `data-${string}`]: unknown;
+}
+
+/** A row's label column and its value box, read by the row and its skeleton (the same box). */
+const SERVICE_CARD_ROW_CLASS = 'flex min-w-0 items-center gap-3';
+const SERVICE_CARD_ROW_LABEL_CLASS = 'w-20 shrink-0 text-ods-text-primary text-h6 content-md:w-24';
+const SERVICE_CARD_VALUE_BOX_CLASS =
+  'flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 content-md:px-4';
+/** The value box's actions (reveal, copy, open), loaded and loading. */
+const SERVICE_CARD_ACTIONS_CLASS = 'flex flex-shrink-0 items-center gap-2 pl-3';
+
+/** A row's actions: copy by default, open with a link, reveal for a secret, then what the row states. */
+function rowActions(row: ServiceCardRow): ServiceCardRowAction {
+  return { copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions };
 }
 
 function MaskedValue({ value, isRevealed }: { value: string; isRevealed: boolean }) {
@@ -48,7 +73,18 @@ function MaskedValue({ value, isRevealed }: { value: string; isRevealed: boolean
   return <span>{'•'.repeat(Math.min(value.length, 12))}</span>;
 }
 
-export function ServiceCard({ title, subtitle, icon, tag, rows, className }: ServiceCardProps) {
+export function ServiceCard({
+  title,
+  subtitle,
+  icon,
+  tag,
+  rows,
+  loading: loadingProp,
+  className,
+  ...props
+}: ServiceCardProps) {
+  // ONE switch: in a page's loading state (or while the host reads the values) every value is a bar.
+  const loading = useLoadingScope() || !!loadingProp;
   const resolvedIcon = icon ?? (
     <OpenframeLogoIcon
       secondaryColor="var(--color-accent-primary)"
@@ -58,7 +94,7 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
   );
 
   return (
-    <div className={cn('rounded-lg border border-ods-border bg-ods-card p-6', className)}>
+    <div className={cn('rounded-lg border border-ods-border bg-ods-card p-6', className)} {...loadingItemProps(props)}>
       {/* Header */}
       <div className="mb-4 flex items-start justify-between gap-4">
         <div className="flex min-w-0 items-center gap-4">
@@ -66,39 +102,47 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
             {resolvedIcon}
           </div>
           <div className="min-w-0">
-            <TruncateText variant="h3">{title}</TruncateText>
-            {subtitle && (
-              <TruncateText variant="h6" tone="secondary">
-                {subtitle}
-              </TruncateText>
+            {loading && !title ? (
+              <TextLineSkeleton type="h3" className="w-40 max-w-full" />
+            ) : (
+              <TruncateText variant="h3">{title}</TruncateText>
+            )}
+            {loading && subtitle === '' ? (
+              <TextLineSkeleton type="h6" className="w-56 max-w-full" />
+            ) : (
+              subtitle && (
+                <TruncateText variant="h6" tone="secondary">
+                  {subtitle}
+                </TruncateText>
+              )
             )}
           </div>
         </div>
-        {tag && (
-          <div className="self-start whitespace-nowrap rounded-full border border-ods-border bg-ods-bg px-3 py-1 font-semibold text-ods-text-primary text-h6">
-            {tag.label}
-          </div>
-        )}
+        {/* The tag is read with the values: the lib `Tag`, which draws its own skeleton while loading. */}
+        {tag && <Tag label={tag.label} variant="outline" className="shrink-0 self-start" loading={loading} />}
       </div>
 
       {/* Rows */}
       <div className="space-y-3">
         {rows.map((row, idx) => (
-          <ServiceCardRowItem key={idx} row={row} />
+          <ServiceCardRowItem key={idx} row={row} loading={loading} />
         ))}
       </div>
     </div>
   );
 }
 
-function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
+/**
+ * One row, loaded and loading. The label column is drawn when the row has a label (`''` is a label still being read:
+ * a bar in the column); the value is a bar in the value box (in the row's own face) while it is read; the actions are
+ * the row's own, drawn for real, disabled while the value is read.
+ */
+function ServiceCardRowItem({ row, loading: loadingProp }: { row: ServiceCardRow; loading: boolean }) {
+  const loading = useLoadingScope() || loadingProp;
   const [revealed, setRevealed] = useState(false);
   const { copy, copied } = useCopyToClipboard();
   const { ref: valueRef, isTruncated: valueTruncated } = useIsTruncated<HTMLDivElement>(row.value);
-  const actions = useMemo<ServiceCardRowAction>(
-    () => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }),
-    [row],
-  );
+  const actions = useMemo<ServiceCardRowAction>(() => rowActions(row), [row]);
 
   const displayValue = row.isSecret ? (
     <MaskedValue value={row.value} isRevealed={revealed} />
@@ -113,59 +157,78 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
     window.open(row.href, '_blank', 'noopener,noreferrer');
   };
 
+  // A label column only where the loaded row has one; while loading, a label not here yet is a bar in it.
+  const labelColumn = loading ? row.label !== undefined : !!row.label;
+
   return (
-    <div className="flex min-w-0 items-center gap-3">
-      {row.label && <div className="w-20 shrink-0 text-ods-text-primary text-h6 content-md:w-24">{row.label}</div>}
-      <div
-        className={cn(
-          'flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 content-md:px-4',
-          row.monospace ? 'font-mono' : '',
+    <div className={SERVICE_CARD_ROW_CLASS}>
+      {labelColumn && (
+        <div className={SERVICE_CARD_ROW_LABEL_CLASS}>
+          {row.label || <TextLineSkeleton type="inherit" className="w-full" />}
+        </div>
+      )}
+      <div className={cn(SERVICE_CARD_VALUE_BOX_CLASS, row.monospace ? 'font-mono' : '')}>
+        {loading ? (
+          <TextLineSkeleton type="inherit" className="w-40 max-w-full" />
+        ) : (
+          // No tooltip while a secret is masked — the old native `title` leaked the raw value on hover.
+          <FloatingTooltip
+            content={row.value}
+            side="top"
+            disabled={!valueTruncated || (row.isSecret && !revealed)}
+            triggerClassName="min-w-0"
+            className="max-w-xs [overflow-wrap:anywhere]"
+          >
+            <div ref={valueRef} className="truncate text-ods-text-primary">
+              {displayValue}
+            </div>
+          </FloatingTooltip>
         )}
-      >
-        {/* No tooltip while a secret is masked — the old native `title` leaked the raw value on hover. */}
-        <FloatingTooltip
-          content={row.value}
-          side="top"
-          disabled={!valueTruncated || (row.isSecret && !revealed)}
-          triggerClassName="min-w-0"
-          className="max-w-xs [overflow-wrap:anywhere]"
-        >
-          <div ref={valueRef} className="truncate text-ods-text-primary">
-            {displayValue}
-          </div>
-        </FloatingTooltip>
-        <div className="flex flex-shrink-0 items-center gap-2 pl-3">
+        <div className={SERVICE_CARD_ACTIONS_CLASS}>
           {actions.reveal && (
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
+              type="button"
+              disabled={loading}
+              tabIndex={loading ? -1 : undefined}
               onClick={() => setRevealed(v => !v)}
-              className="rounded p-2 text-ods-text-secondary hover:bg-ods-card"
               aria-label={revealed ? 'Hide' : 'Reveal'}
             >
-              {revealed ? <EyeOffClassicIcon className="h-5 w-5" /> : <EyeClassicIcon className="h-5 w-5" />}
-            </button>
+              {revealed ? (
+                <EyeOffClassicIcon className="text-ods-text-secondary" />
+              ) : (
+                <EyeClassicIcon className="text-ods-text-secondary" />
+              )}
+            </Button>
           )}
 
           {actions.copy && (
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
+              type="button"
+              disabled={loading}
+              tabIndex={loading ? -1 : undefined}
               onClick={handleCopy}
-              className={cn(
-                'rounded p-2 transition-colors hover:bg-ods-card',
-                copied ? 'text-ods-success' : 'text-ods-text-secondary',
-              )}
-              aria-label={`Copy ${row.label ?? 'value'}`}
+              aria-label={`Copy ${row.label || 'value'}`}
             >
-              {copied ? <CheckIcon size={20} /> : <Copy01Icon size={20} />}
-            </button>
+              {copied ? <CheckIcon className="text-ods-success" /> : <Copy01Icon className="text-ods-text-secondary" />}
+            </Button>
           )}
 
           {actions.open && row.href && (
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
+              type="button"
+              disabled={loading}
+              tabIndex={loading ? -1 : undefined}
               onClick={openInNewTab}
-              className="rounded p-2 text-ods-text-secondary hover:bg-ods-card"
-              aria-label={`Open ${row.label ?? 'link'}`}
+              aria-label={`Open ${row.label || 'link'}`}
             >
-              <ExternalLink className="h-5 w-5" />
-            </button>
+              <ExternalLink className="text-ods-text-secondary" />
+            </Button>
           )}
         </div>
       </div>

package/src/components/ui/slack-channel-chip.tsx

@@ -42,7 +42,7 @@ export function SlackChannelChip({ name, href, className }: SlackChannelChipProp
 }
 
 /** A SlackChannelChip while its channel is read: Slack's mark (static), the channel's name a bar of its line. */
-export function SlackChannelChipSkeleton({ className }: { className?: string }) {
+function SlackChannelChipSkeleton({ className }: { className?: string }) {
   return (
     <span className={cn(CHIP_CLASS, className)} aria-hidden>
       <SlackIcon className={MARK_CLASS} />

package/src/components/ui/snap-carousel.tsx

@@ -7,17 +7,140 @@ import { useResumableTimeout } from '../../hooks/ui/use-resumable-timeout';
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
+import { useLoadingScope } from './loading-scope';
 
 /** The row under the track: the dots, the counter, the pause and the two arrows (the arrows set its height). */
 const SNAP_CAROUSEL_CONTROLS_CLASS = 'mt-3 flex items-center gap-2';
+/** The gap between two slides, in px (the track's and the step's). */
+export const SNAP_CAROUSEL_GAP_PX = 12;
+/** The track: one row of slides that snaps and scrolls sideways (read by the carousel and by a host's loading form). */
+export const SNAP_CAROUSEL_TRACK_CLASS = 'scrollbar-hide flex snap-x snap-mandatory overflow-x-auto';
+/** One slide of the track, in the carousel's own box. A host drawing its slides' loading form uses it too. */
+export function SnapCarouselSlide({
+  className,
+  readItem = false,
+  children,
+  ...aria
+}: {
+  className?: string;
+  /** The slide is an item of ONE read list (`data-loading-item`). */
+  readItem?: boolean;
+  children: ReactNode;
+  'aria-label'?: string;
+  'aria-current'?: 'true';
+}) {
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      {...aria}
+      className={cn('flex shrink-0 grow-0 snap-start', className)}
+      data-loading-item={readItem || undefined}
+    >
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+export interface SnapCarouselControlsProps {
+  /** How many slides the track holds (one dot each). */
+  count: number;
+  /** The slide in view. Default 0. */
+  index?: number;
+  prevLabel?: string;
+  nextLabel?: string;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  /** The carousel advances by itself: the active dot fills over the wait. */
+  wait?: { durationMs: number; ranMs: number; running: boolean } | null;
+  /** The counter is announced (`aria-live`); off while the carousel plays by itself. Default true. */
+  announce?: boolean;
+  /** The slides are read: the row draws its loading form (the dots and arrows real and inert, the counter a bar). In a
+   *  loading scope it does the same. */
+  loading?: boolean;
+  className?: string;
+}
 
 /**
- * The carousel's controls row while its slides load: the same box (margin and
- * height), empty. A skeleton of a carousel is its slides' skeleton over this,
- * so the block keeps its height when the slides land.
+ * The row under a carousel's track: a dot per slide, the counter ("2 / 5") and the two arrows. Loading, it is the
+ * same row, inert: the dots and arrows as they are (static controls), the counter (read data) a bar.
  */
-export function SnapCarouselControlsSkeleton({ className }: { className?: string }) {
-  return <div aria-hidden className={cn(SNAP_CAROUSEL_CONTROLS_CLASS, 'h-11', className)} />;
+export function SnapCarouselControls({
+  count,
+  index = 0,
+  prevLabel = 'Previous',
+  nextLabel = 'Next',
+  onPrevious,
+  onNext,
+  wait = null,
+  announce = true,
+  loading: loadingProp = false,
+  className,
+}: SnapCarouselControlsProps) {
+  // ONE switch: in a page's loading state, or while the slides are read, the row is inert and its counter a bar.
+  const loading = useLoadingScope() || loadingProp;
+  return (
+    <div
+      className={cn(SNAP_CAROUSEL_CONTROLS_CLASS, className)}
+      aria-hidden={loading || undefined}
+      inert={loading || undefined}
+    >
+      <span className="flex gap-1.5" aria-hidden>
+        {Array.from({ length: count }, (_, dotIndex) => (
+          <span
+            key={dotIndex}
+            className={cn(
+              'relative h-1.5 overflow-hidden rounded-full transition-[width] duration-200 motion-reduce:transition-none',
+              dotIndex === index ? 'w-6' : 'w-1.5',
+              // A carousel that never advances by itself marks its slide with a whole dot.
+              dotIndex === index && !wait ? 'bg-ods-text-primary' : 'bg-ods-border',
+            )}
+          >
+            {dotIndex === index && wait && (
+              // Re-keyed per slide so a NEW slide starts from empty; a pause keeps its place.
+              <DotFill key={index} durationMs={wait.durationMs} ranMs={wait.ranMs} running={wait.running} />
+            )}
+          </span>
+        ))}
+      </span>
+      {loading ? (
+        <span className="ml-auto mr-1">
+          <TextLineSkeleton type="h5" className="w-10" />
+        </span>
+      ) : (
+        <span
+          className="ml-auto mr-1 whitespace-nowrap text-ods-text-secondary text-h5"
+          aria-live={announce ? 'polite' : 'off'}
+        >
+          {index + 1} / {count}
+        </span>
+      )}
+      <Button
+        variant="outline"
+        size="icon"
+        type="button"
+        aria-label={prevLabel}
+        disabled={loading || index === 0}
+        onClick={onPrevious}
+        className="shrink-0"
+      >
+        <Chevron02LeftIcon size={20} />
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        type="button"
+        aria-label={nextLabel}
+        disabled={loading || index === count - 1}
+        onClick={onNext}
+        className="shrink-0"
+      >
+        <Chevron02RightIcon size={20} />
+      </Button>
+    </div>
+  );
 }
 
 export interface SnapCarouselProps<T> {
@@ -40,8 +163,6 @@ export interface SnapCarouselProps<T> {
   className?: string;
 }
 
-const GAP_PX = 12;
-
 /**
  * The active dot's fill: how much of the slide's wait has been run. It starts
  * from where the wait stands (`ranMs`, nothing for a new slide) and runs to
@@ -104,7 +225,7 @@ export function SnapCarousel<T>({
 
   const slideStep = useCallback(() => {
     const first = trackRef.current?.firstElementChild as HTMLElement | null;
-    return first ? first.offsetWidth + GAP_PX : 0;
+    return first ? first.offsetWidth + SNAP_CAROUSEL_GAP_PX : 0;
   }, []);
 
   const goTo = useCallback(
@@ -166,68 +287,32 @@ export function SnapCarousel<T>({
         role="group"
         aria-roledescription="carousel"
         aria-label={label}
-        className="scrollbar-hide flex snap-x snap-mandatory overflow-x-auto"
-        style={{ gap: GAP_PX }}
+        className={SNAP_CAROUSEL_TRACK_CLASS}
+        style={{ gap: SNAP_CAROUSEL_GAP_PX }}
       >
         {items.map((item, itemIndex) => (
-          <div
+          <SnapCarouselSlide
             key={getKey ? getKey(item, itemIndex) : itemIndex}
-            role="group"
-            aria-roledescription="slide"
             aria-label={`${itemIndex + 1} / ${count}`}
             // Never `aria-hidden`: the neighbouring slides are on screen and their links take focus.
             aria-current={itemIndex === index ? 'true' : undefined}
-            className={cn('flex shrink-0 grow-0 snap-start', slideClassName)}
-            data-loading-item={readItems || undefined}
+            className={slideClassName}
+            readItem={readItems}
           >
-            <div className="min-w-0 flex-1">{renderItem(item, itemIndex)}</div>
-          </div>
+            {renderItem(item, itemIndex)}
+          </SnapCarouselSlide>
         ))}
       </div>
-      <div className={SNAP_CAROUSEL_CONTROLS_CLASS}>
-        <span className="flex gap-1.5" aria-hidden>
-          {items.map((_, dotIndex) => (
-            <span
-              key={dotIndex}
-              className={cn(
-                'relative h-1.5 overflow-hidden rounded-full transition-[width] duration-200 motion-reduce:transition-none',
-                dotIndex === index ? 'w-6' : 'w-1.5',
-                // A carousel that never advances by itself marks its slide with a whole dot.
-                dotIndex === index && !showsWait ? 'bg-ods-text-primary' : 'bg-ods-border',
-              )}
-            >
-              {dotIndex === index && showsWait && (
-                // Re-keyed per slide so a NEW slide starts from empty; a pause keeps its place.
-                <DotFill key={index} durationMs={autoAdvanceMs} ranMs={ranMs} running={playing} />
-              )}
-            </span>
-          ))}
-        </span>
-        <span
-          className="ml-auto mr-1 whitespace-nowrap text-ods-text-secondary text-h5"
-          aria-live={playing ? 'off' : 'polite'}
-        >
-          {index + 1} / {count}
-        </span>
-        <button
-          type="button"
-          aria-label={prevLabel}
-          disabled={index === 0}
-          onClick={() => goTo(index - 1)}
-          className="grid h-11 w-11 shrink-0 place-items-center rounded-full border border-ods-border text-ods-text-primary outline-none transition-colors hover:bg-ods-card focus-visible:ring-2 focus-visible:ring-ods-focus disabled:cursor-default disabled:text-ods-text-secondary disabled:opacity-50 disabled:hover:bg-transparent"
-        >
-          <Chevron02LeftIcon size={20} />
-        </button>
-        <button
-          type="button"
-          aria-label={nextLabel}
-          disabled={index === count - 1}
-          onClick={() => goTo(index + 1)}
-          className="grid h-11 w-11 shrink-0 place-items-center rounded-full border border-ods-border text-ods-text-primary outline-none transition-colors hover:bg-ods-card focus-visible:ring-2 focus-visible:ring-ods-focus disabled:cursor-default disabled:text-ods-text-secondary disabled:opacity-50 disabled:hover:bg-transparent"
-        >
-          <Chevron02RightIcon size={20} />
-        </button>
-      </div>
+      <SnapCarouselControls
+        count={count}
+        index={index}
+        prevLabel={prevLabel}
+        nextLabel={nextLabel}
+        onPrevious={() => goTo(index - 1)}
+        onNext={() => goTo(index + 1)}
+        wait={showsWait ? { durationMs: autoAdvanceMs, ranMs, running: playing } : null}
+        announce={!playing}
+      />
     </div>
   );
 }

package/src/components/ui/square-avatar.tsx

@@ -7,7 +7,7 @@ import { AVATAR_SIZE, AVATAR_SIZE_PX } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from './loading-scope';
+import { loadingItemProps, useLoadingScope } from './loading-scope';
 
 interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
   src?: string;
@@ -29,6 +29,9 @@ interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
    *  defaults (`text-xs font-medium text-ods-text-primary`) via tailwind-merge,
    *  so callers can shrink/recolor the initials for compact avatars. */
   initialsClassName?: string;
+  /** The person is still being read: the avatar draws its skeleton (its own size and corner) and fetches no image.
+   *  A loading scope does the same. */
+  loading?: boolean;
 }
 
 /** The avatar's corner at each variant, read by the avatar and by its skeleton. */
@@ -50,16 +53,27 @@ const SquareAvatar = memo(
         fallback,
         variant = 'square',
         initialsClassName,
+        loading,
         style,
         ...props
       },
       ref,
     ) => {
-      // In a loading scope the avatar is its skeleton, and its image is not fetched.
-      const held = useLoadingScope();
+      // ONE switch: while the host reads the person, or in a loading scope, the avatar is its skeleton, and its image
+      // is not fetched.
+      const inScope = useLoadingScope();
+      const held = inScope || !!loading;
       const authedSrc = useAuthedImageSrc(held ? undefined : src);
       if (held) {
-        return <SquareAvatarSkeleton size={size} sizePx={sizePx} variant={variant} className={className} />;
+        return (
+          <SquareAvatarSkeleton
+            size={size}
+            sizePx={sizePx}
+            variant={variant}
+            className={className}
+            {...loadingItemProps(props)}
+          />
+        );
       }
       const resolvedSrc = authedSrc;
       const sizeClasses = AVATAR_SIZE;
@@ -135,14 +149,19 @@ SquareAvatar.displayName = 'SquareAvatar';
 export { SquareAvatar };
 
 /** A SquareAvatar while its person is read: a box of the avatar's own size and corner. */
-export function SquareAvatarSkeleton({
+function SquareAvatarSkeleton({
   size = 'md',
   sizePx,
   variant = 'square',
   className,
-}: Pick<SquareAvatarProps, 'size' | 'sizePx' | 'variant' | 'className'>) {
+  ...props
+}: Pick<SquareAvatarProps, 'size' | 'sizePx' | 'variant' | 'className'> & {
+  /** The avatar's markers (`data-loading-item`), forwarded like the loaded avatar's. */
+  [marker: `data-${string}`]: unknown;
+}) {
   return (
     <UnifiedSkeleton
+      {...loadingItemProps(props)}
       className={cn(
         'shrink-0',
         sizePx === undefined && AVATAR_SIZE[size],