@flamingo-stack/openframe-frontend-core 0.0.710 → 0.0.712

package/src/components/product-demo/screens/remote-desktop-picture.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { VolumeUpIcon } from '../../icons-v2-generated/audio-and-visual/volume-up-icon';
+import { ChromeIcon } from '../../icons-v2-generated/brand-logos/chrome-icon';
+import { WindowsIcon } from '../../icons-v2-generated/brand-logos/windows-icon';
+import { PrinterIcon } from '../../icons-v2-generated/devices/printer-icon';
+import { WifiIcon } from '../../icons-v2-generated/devices/wifi-icon';
+import { FolderIcon } from '../../icons-v2-generated/documents/folder-icon';
+import { SearchIcon } from '../../icons-v2-generated/interface/search-icon';
+import { TrashIcon } from '../../icons-v2-generated/interface/trash-icon';
+import { StopIcon } from '../../icons-v2-generated/media-playback/stop-icon';
+import { CheckCircleIcon } from '../../icons-v2-generated/signs-and-symbols/check-circle-icon';
+import { MinusIcon } from '../../icons-v2-generated/signs-and-symbols/minus-icon';
+import { XmarkIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-icon';
+import type { RemoteSessionFixture } from '../fixtures/remote-session';
+
+function DesktopShortcut({ icon, label }: { icon: ReactNode; label: string }) {
+  return (
+    <div className="flex w-20 flex-col items-center gap-[var(--spacing-system-xxs)]">
+      <span className="flex size-10 items-center justify-center rounded-md bg-ods-card/70 text-ods-text-primary">
+        {icon}
+      </span>
+      <span className="w-full truncate text-center text-ods-text-primary text-h6">{label}</span>
+    </div>
+  );
+}
+
+function ServiceRow({ name, state }: { name: string; state: string }) {
+  return (
+    <div className="flex items-center gap-[var(--spacing-system-xs)] py-[var(--spacing-system-xs)]">
+      <CheckCircleIcon className="h-5 w-5 flex-shrink-0 text-ods-success" />
+      <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h4">{name}</span>
+      <span className="flex-shrink-0 text-ods-text-secondary text-h6">{state}</span>
+    </div>
+  );
+}
+
+function TaskbarApp({ icon, active = false }: { icon: ReactNode; active?: boolean }) {
+  return (
+    <span
+      className={`flex size-8 items-center justify-center rounded-md text-ods-text-primary ${
+        active ? 'border-b-2 border-ods-accent bg-ods-bg-surface' : ''
+      }`}
+    >
+      {icon}
+    </span>
+  );
+}
+
+/**
+ * What the stream shows: the device's own desktop, filling the screen box the
+ * way a live session does. A wallpaper with its shortcuts, the printer's
+ * settings window open after the spooler was restarted, and the task bar. A
+ * drawing, standing in for the host's live canvas.
+ */
+export function RemoteDesktopPicture({ desktop }: { desktop: RemoteSessionFixture['desktop'] }) {
+  return (
+    <div className="absolute inset-0 flex flex-col overflow-hidden bg-gradient-to-br from-ods-flamingo-cyan-secondary via-ods-bg-surface to-ods-flamingo-pink-secondary">
+      <div className="relative min-h-0 flex-1">
+        {/* A narrow box shows the window alone: the shortcuts would leave it no room. */}
+        <div className="absolute left-[var(--spacing-system-sf)] top-[var(--spacing-system-sf)] hidden flex-col gap-[var(--spacing-system-sf)] content-md:flex">
+          <DesktopShortcut icon={<TrashIcon className="h-5 w-5" />} label="Recycle Bin" />
+          <DesktopShortcut icon={<FolderIcon className="h-5 w-5" />} label="Scans" />
+          <DesktopShortcut icon={<ChromeIcon className="h-5 w-5" />} label="Chrome" />
+        </div>
+
+        <div className="absolute bottom-[var(--spacing-system-mf)] left-[var(--spacing-system-mf)] right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] flex flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card shadow-lg content-md:left-28">
+          <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)] border-b border-ods-border bg-ods-bg-surface px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)]">
+            <PrinterIcon className="h-4 w-4 flex-shrink-0 text-ods-text-secondary" />
+            <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h6">Printers &amp; scanners</span>
+            <MinusIcon className="h-4 w-4 flex-shrink-0 text-ods-text-secondary" />
+            <StopIcon className="h-3 w-3 flex-shrink-0 text-ods-text-secondary" />
+            <XmarkIcon className="h-4 w-4 flex-shrink-0 text-ods-text-secondary" />
+          </div>
+          <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-sf)] p-[var(--spacing-system-mf)]">
+            <div className="flex items-center gap-[var(--spacing-system-sf)]">
+              <span className="flex size-12 flex-shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-primary">
+                <PrinterIcon className="h-6 w-6" />
+              </span>
+              <div className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate text-ods-text-primary text-h3">{desktop.printer}</span>
+                <span className="truncate text-ods-text-secondary text-h6">Default printer</span>
+              </div>
+              <span className="flex-shrink-0 rounded-md bg-ods-success-secondary px-[var(--spacing-system-xs)] py-[var(--spacing-system-xxs)] text-ods-success text-h5">
+                Ready
+              </span>
+            </div>
+            <div className="flex flex-col divide-y divide-ods-border border-t border-ods-border">
+              <ServiceRow name="Print Spooler" state={`Restarted ${desktop.clock}`} />
+              <ServiceRow name="Print queue" state="0 documents waiting" />
+              <ServiceRow name="Test page" state="Printed" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)] border-t border-ods-border bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xxs)]">
+        <TaskbarApp icon={<WindowsIcon className="h-4 w-4" />} />
+        <span className="hidden h-8 w-40 items-center gap-[var(--spacing-system-xs)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-xs)] text-ods-text-secondary text-h6 content-md:flex">
+          <SearchIcon className="h-4 w-4 flex-shrink-0" />
+          Search
+        </span>
+        <TaskbarApp icon={<FolderIcon className="h-4 w-4" />} />
+        <TaskbarApp icon={<ChromeIcon className="h-4 w-4" />} />
+        <TaskbarApp icon={<PrinterIcon className="h-4 w-4" />} active />
+        <span className="ml-auto flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)] text-ods-text-primary">
+          <WifiIcon className="h-4 w-4" />
+          <VolumeUpIcon className="h-4 w-4" />
+          <span className="flex flex-col items-end leading-tight text-h6">
+            <span>{desktop.clock}</span>
+            <span className="text-ods-text-secondary">{desktop.date}</span>
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/product-demo/screens/remote-session.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useMemo } from 'react';
+import { RemoteDesktopChatPanel, RemoteDesktopView } from '../../features/remote-session';
+import { useProductDemoCast } from '../cast';
+import { buildRemoteSessionFixture } from '../fixtures/remote-session';
+import type { ProductScreenViewProps } from '../types';
+import { RemoteDesktopPicture } from './remote-desktop-picture';
+
+const noop = () => {};
+const keepDraft = () => Promise.resolve(false);
+
+/**
+ * The product's remote desktop page mid-session: the device header, the remote
+ * desktop filling the screen box, the session chat beside it. No "Back": a
+ * picture has nowhere to go back to. The narrow rendering hides the chat.
+ */
+export default function RemoteSessionScreen({ compact = false }: ProductScreenViewProps) {
+  const cast = useProductDemoCast();
+  const fixture = useMemo(() => buildRemoteSessionFixture(cast), [cast]);
+  return (
+    <div className="flex h-full flex-col bg-ods-bg">
+      {/* The page's header row is gone with "Back": the device bar keeps its distance from the top. */}
+      <div className="h-[var(--spacing-system-l)] flex-shrink-0" />
+      <div className="min-h-0 flex-1">
+        <RemoteDesktopView
+          {...fixture.view}
+          onEnterFullscreen={noop}
+          onExitFullscreen={noop}
+          onOpenSettings={noop}
+          chatOpen={!compact}
+          onToggleChat={noop}
+          screen={<RemoteDesktopPicture desktop={fixture.desktop} />}
+          chat={
+            compact ? null : (
+              // The side column needs the room of the wide layout; a narrow frame keeps the screen alone.
+              <div className="hidden min-h-0 content-md:flex">
+                <RemoteDesktopChatPanel {...fixture.chat} sending={false} onSend={keepDraft} variant="side" />
+              </div>
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/product-demo/screens/software-update.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useMemo } from 'react';
+import { DeviceSelector } from '../../features/devices';
+import {
+  PACKAGE_SEARCH_LABEL,
+  PACKAGE_SEARCH_PLACEHOLDER,
+  type PackageSearchSlotProps,
+  SoftwareActionForm,
+} from '../../features/software';
+import { Autocomplete } from '../../ui';
+import { useProductDemoCast } from '../cast';
+import { buildSoftwareUpdateFixture } from '../fixtures/software-update';
+import type { ProductScreenViewProps } from '../types';
+
+const noop = () => {};
+
+const HIDDEN_WHEN_COMPACT = ['organization'];
+
+/** "Software Name" with the fixture's package picked: the product's field, minus its catalog search. */
+function StaticPackageField({ value }: PackageSearchSlotProps) {
+  return (
+    <Autocomplete
+      label={PACKAGE_SEARCH_LABEL}
+      labelVariant="large"
+      options={value ? [{ value: value.id, label: value.name, description: value.description ?? undefined }] : []}
+      value={value?.id ?? null}
+      onChange={noop}
+      placeholder={PACKAGE_SEARCH_PLACEHOLDER}
+    />
+  );
+}
+
+const renderPackageSearch = (field: PackageSearchSlotProps) => <StaticPackageField {...field} />;
+
+const NO_NARROWING = { columnFilters: [], tags: [] };
+
+/**
+ * The product's Update Software page: Chrome through WinGet, scheduled for
+ * tonight, with the devices picked for it on the "Selected Devices" tab. The
+ * page's title row is left out (the job is named above the picture), so the
+ * frame starts at the package. The form is in its densest arrangement (one
+ * package, the run choice beside its start, no search row over a fixed list),
+ * so the frame reaches the devices: what gets updated is in the picture. The
+ * narrow rendering drops the picker's customer column.
+ */
+export default function SoftwareUpdateScreen({ compact = false }: ProductScreenViewProps) {
+  const cast = useProductDemoCast();
+  const fixture = useMemo(() => buildSoftwareUpdateFixture(cast), [cast]);
+  const selected = useMemo(
+    () => fixture.devices.filter(device => fixture.selectedIds.has(device.id)),
+    [fixture.devices, fixture.selectedIds],
+  );
+  return (
+    <div className="h-full bg-ods-bg pt-[var(--spacing-system-l)]">
+      <div className="h-full">
+        <SoftwareActionForm
+          action={fixture.action}
+          showHeader={false}
+          // The picture's arrangement: one package, the run choice and its start on one row, the devices right under.
+          addRows={false}
+          runModeLayout="inline"
+          showDeviceHeading={false}
+          onSubmit={noop}
+          timing={fixture.timing}
+          initialValues={fixture.initialValues}
+          renderPackageSearch={renderPackageSearch}
+          renderDevicePicker={() => (
+            <DeviceSelector
+              devices={selected}
+              loading={false}
+              selectedIds={fixture.selectedIds}
+              showSelectionModeRadio={false}
+              showToolbar={false}
+              hideColumns={compact ? HIDDEN_WHEN_COMPACT : undefined}
+              // The picker's server mode is how a host says which tab is open: the picture shows what was picked.
+              server={{
+                activeTab: 'selected',
+                onTabChange: noop,
+                search: '',
+                onSearchChange: noop,
+                narrowing: NO_NARROWING,
+                onNarrowingChange: noop,
+                selectedCount: selected.length,
+                totalCount: selected.length,
+                onAdd: noop,
+                onRemove: noop,
+                onAddAll: noop,
+                onRemoveAll: noop,
+              }}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/product-demo/screens/tickets-board.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Board } from '../../features/board';
+import { useProductDemoCast } from '../cast';
+import { buildTicketsBoardFixture } from '../fixtures/tickets-board';
+import type { ProductScreenViewProps } from '../types';
+
+const noop = () => {};
+
+/**
+ * The lanes folded in the wide picture: the two that carry the story (what the
+ * agents are on, what waits for a technician) stay open at full width, so no
+ * lane is cut by the frame.
+ */
+const FOLDED = { ON_HOLD: true, RESOLVED: true };
+
+/** The product's ticket board; the narrow rendering shows the lanes that carry the story. */
+export default function TicketsBoardScreen({ compact = false }: ProductScreenViewProps) {
+  const cast = useProductDemoCast();
+  const board = useMemo(() => buildTicketsBoardFixture(cast), [cast]);
+  const columns = compact ? board.filter(column => column.id !== 'ON_HOLD') : board;
+  return (
+    <div className="h-full bg-ods-bg p-[var(--spacing-system-m)]">
+      <Board columns={columns} onChange={noop} initialCollapsed={compact ? undefined : FOLDED} />
+    </div>
+  );
+}

package/src/components/product-demo/types.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from 'react';
+
+/** What every product screen of the registry takes. */
+export interface ProductScreenViewProps {
+  /** The narrow rendering: fewer columns, secondary panels hidden. */
+  compact?: boolean;
+}
+
+/** A product screen module: the product's own view, fed by its fixture. */
+export type ProductScreenComponent = ComponentType<ProductScreenViewProps>;

package/src/components/ui/index.ts

@@ -234,6 +234,7 @@ export { LazyMount, type LazyMountProps } from './lazy-mount';
 // Product-demo stage primitives (marketing pages): window + phone chrome, the
 // incident feed, the swipe carousel and the sticky call-to-action bar.
 export * from './app-window-frame';
+export * from './product-screen-frame';
 export * from './phone-frame';
 export * from './incident-feed';
 export * from './status-line';

package/src/components/ui/product-screen-frame.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { type CSSProperties, type ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { LAYOUT_STEPS } from '../../styles/layout-steps';
+import { cn } from '../../utils/cn';
+import { CollisionBoundaryContext, PortalContainerContext } from './portal-container';
+
+/** The widest content step: a product screen is drawn at this width and scaled to its frame. */
+export const PRODUCT_SCREEN_DESIGN_WIDTH = LAYOUT_STEPS['2xl'].content;
+
+/**
+ * A narrower layout width for a frame that is itself narrow (a hero's window, a
+ * tab panel): the product's desktop layout at its smallest, so the scaled text
+ * stays readable.
+ */
+export const PRODUCT_SCREEN_READABLE_WIDTH = LAYOUT_STEPS.lg.content;
+
+/** Under this frame width the screen is not scaled: it takes the product's own narrow layout. */
+export const PRODUCT_SCREEN_SCALE_FROM = LAYOUT_STEPS.md.content;
+
+/** The frame's CSS variable that carries the screen's scale. */
+const SCALE_VAR = '--product-screen-scale';
+
+export interface ProductScreenFrameProps {
+  /** The product screen: the product's own component with fixture data. */
+  children: ReactNode;
+  /** What the picture shows, for assistive tech (the content itself is hidden from it). */
+  label: string;
+  /** Height of the frame; the screen is cropped to it. A number is px. */
+  height: number | string;
+  /** Whose accent the screen carries. Default `openframe`. */
+  appType?: string;
+  /** Width the screen is laid out at before scaling. Default the widest content step. */
+  designWidth?: number;
+  /** The frame width from which the screen is scaled; under it the product's narrow layout renders. Default the content `md` step. */
+  scaleFrom?: number;
+  /** Fade the cropped bottom edge into the surface behind the frame. Default true. */
+  fade?: boolean;
+  className?: string;
+}
+
+/**
+ * A product screen shown as a picture on a marketing page.
+ *
+ * The child is the real product component. The frame is a content area, so
+ * every `content-*` layout switch inside reads the FRAME's width, never the
+ * window's. From the content `md` step up the child is laid out at
+ * `designWidth` and scaled down to the frame (a transform does not change the
+ * width a container query reads, so it keeps its desktop layout); under that
+ * step it is not scaled and renders the product's own narrow layout.
+ *
+ * It is a picture: the content is `inert` and hidden from assistive tech, and
+ * the frame is `role="img"` with `label`. Overlays the content opens (a menu a
+ * fixture shows open) portal into the frame and collide with its edges, and
+ * the frame's `data-app-type` gives them the product's accent too.
+ */
+export function ProductScreenFrame({
+  children,
+  label,
+  height,
+  appType = 'openframe',
+  designWidth = PRODUCT_SCREEN_DESIGN_WIDTH,
+  scaleFrom = PRODUCT_SCREEN_SCALE_FROM,
+  fade = true,
+  className,
+}: ProductScreenFrameProps) {
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [frame, setFrame] = useState<HTMLDivElement | null>(null);
+  const [portalHost, setPortalHost] = useState<HTMLDivElement | null>(null);
+  // Which layout the screen takes. `pending` until measured: the frame keeps its
+  // box and shows nothing, so the first paint is never the unscaled screen.
+  // React holds only this (it changes at two widths); the scale itself changes
+  // with every pixel of a resize, so it is written to a CSS variable on the
+  // frame and never re-renders the screen.
+  const [mode, setMode] = useState<'pending' | 'scaled' | 'native'>('pending');
+
+  useLayoutEffect(() => {
+    const element = frameRef.current;
+    if (!element) return undefined;
+    setFrame(element);
+    const measure = () => {
+      const width = element.clientWidth;
+      const scaled = width >= scaleFrom && width < designWidth;
+      element.style.setProperty(SCALE_VAR, String(scaled ? width / designWidth : 1));
+      setMode(scaled ? 'scaled' : 'native');
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [designWidth, scaleFrom]);
+
+  const screenStyle: CSSProperties =
+    mode === 'scaled'
+      ? {
+          width: designWidth,
+          // The crop is in frame pixels, so the unscaled box is taller by the same factor.
+          height: `calc(100% / var(${SCALE_VAR}))`,
+          transform: `scale(var(${SCALE_VAR}))`,
+          transformOrigin: 'top left',
+        }
+      : // Unscaled, the screen still needs to be the containing block of anything the
+        // product pins with `position: fixed` (a form's action bar), or it escapes to the window.
+        { width: '100%', height: '100%', transform: 'translateZ(0)' };
+
+  return (
+    <div
+      ref={frameRef}
+      role="img"
+      aria-label={label}
+      data-app-type={appType}
+      className={cn('relative overflow-hidden', className)}
+      style={{ height }}
+    >
+      <PortalContainerContext.Provider value={portalHost}>
+        <CollisionBoundaryContext.Provider value={frame}>
+          <div
+            inert
+            aria-hidden
+            className={cn('ods-content-area', mode === 'pending' && 'invisible')}
+            style={screenStyle}
+          >
+            <div className="ods-content-scope">{children}</div>
+            <div ref={setPortalHost} style={{ display: 'contents' }} />
+          </div>
+        </CollisionBoundaryContext.Provider>
+      </PortalContainerContext.Provider>
+      {fade && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-ods-bg to-transparent"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ui/radio-group.tsx

@@ -56,14 +56,23 @@ interface RadioGroupBlockProps extends Omit<ComponentPropsWithoutRef<typeof Radi
    * - `grouped`: options share a single outer border with dividers between rows.
    */
   variant?: 'separated' | 'grouped';
+  /**
+   * `vertical` (default): one option per row. `horizontal`: the options side
+   * by side in equal columns, for a short choice on a wide form.
+   */
+  orientation?: 'vertical' | 'horizontal';
   /** Error message displayed below the group (also triggers red borders) */
   error?: string;
   itemClassName?: string;
 }
 
 const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>, RadioGroupBlockProps>(
-  ({ className, options, variant = 'separated', error, itemClassName, disabled, ...props }, ref) => {
+  (
+    { className, options, variant = 'separated', orientation = 'vertical', error, itemClassName, disabled, ...props },
+    ref,
+  ) => {
     const isGrouped = variant === 'grouped';
+    const isHorizontal = orientation === 'horizontal';
     return (
       <div className={cn('relative flex w-full flex-col', className)}>
         <RadioGroupPrimitive.Root
@@ -72,14 +81,16 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
           // scrolls to) the first control that failed validation. The GROUP is
           // the field here; the individual options are not separately invalid.
           data-invalid={error ? true : undefined}
+          orientation={orientation}
           className={cn(
             'w-full',
             isGrouped
               ? cn(
-                  'flex flex-col overflow-hidden rounded-[6px] border bg-ods-card',
+                  'flex overflow-hidden rounded-[6px] border bg-ods-card',
+                  isHorizontal ? 'flex-row items-stretch' : 'flex-col',
                   error ? 'border-ods-error' : 'border-ods-border',
                 )
-              : 'grid gap-2',
+              : cn('grid gap-2', isHorizontal && 'auto-cols-fr grid-flow-col'),
           )}
           disabled={disabled}
           {...props}
@@ -95,6 +106,7 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                 aria-disabled={isDisabled || undefined}
                 className={cn(
                   'flex w-full items-center gap-3',
+                  isHorizontal && 'min-w-0 flex-1',
                   'transition-colors duration-200',
                   isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
                   // Hover / active move the BACKGROUND only, like Input and
@@ -104,7 +116,7 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   isGrouped
                     ? cn(
                         'bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]',
-                        !isLast && 'border-b',
+                        !isLast && (isHorizontal ? 'border-r' : 'border-b'),
                         error ? 'border-ods-error' : 'border-ods-border',
                       )
                     : cn(

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

@@ -8,6 +8,18 @@ import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
 import { PlaybackToggle } from './playback-toggle';
 
+/** 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 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.
+ */
+export function SnapCarouselControlsSkeleton({ className }: { className?: string }) {
+  return <div aria-hidden className={cn(SNAP_CAROUSEL_CONTROLS_CLASS, 'h-11', className)} />;
+}
+
 export interface SnapCarouselProps<T> {
   items: readonly T[];
   renderItem: (item: T, index: number) => ReactNode;
@@ -23,6 +35,8 @@ export interface SnapCarouselProps<T> {
   slideClassName?: string;
   prevLabel?: string;
   nextLabel?: string;
+  /** A slide to bring into view whenever this value changes (a link that names it). Only the track moves, never the page. */
+  focusIndex?: number;
   className?: string;
 }
 
@@ -69,6 +83,7 @@ export function SnapCarousel<T>({
   slideClassName = 'basis-[300px]',
   prevLabel = 'Previous',
   nextLabel = 'Next',
+  focusIndex,
   className,
 }: SnapCarouselProps<T>) {
   const trackRef = useRef<HTMLDivElement | null>(null);
@@ -95,6 +110,16 @@ export function SnapCarousel<T>({
     [count, slideStep],
   );
 
+  // Only a change of `focusIndex` moves the track: `goTo` is read through a ref,
+  // so more items arriving never pulls a visitor back to a slide named earlier.
+  const goToRef = useRef(goTo);
+  useEffect(() => {
+    goToRef.current = goTo;
+  }, [goTo]);
+  useEffect(() => {
+    if (focusIndex !== undefined && focusIndex >= 0) goToRef.current(focusIndex);
+  }, [focusIndex]);
+
   const onScroll = useCallback(() => {
     const track = trackRef.current;
     const step = slideStep();
@@ -162,7 +187,7 @@ export function SnapCarousel<T>({
           </div>
         ))}
       </div>
-      <div className="mt-3 flex items-center gap-2">
+      <div className={SNAP_CAROUSEL_CONTROLS_CLASS}>
         <span className="flex gap-1.5" aria-hidden>
           {items.map((_, dotIndex) => (
             <span

package/src/components/ui/tag.tsx

@@ -15,6 +15,11 @@ const tagVariants = cva(['inline-flex items-center justify-center rounded-md', '
     size: {
       default: 'h-8 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-xsf)] text-h5',
       large: 'h-12 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)] font-bold text-h3',
+      // A sentence, not a label: body type in the case it was written in (a
+      // question a visitor can ask), on the same chip surface. One line, always:
+      // a longer sentence clips and shows whole in the label's tooltip.
+      sentence:
+        'h-9 gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-h6',
     },
     variant: {
       primary: ['bg-ods-accent text-ods-text-on-accent', 'hover:bg-ods-accent-hover active:bg-ods-accent-active'],

package/src/hooks/ui/index.ts

@@ -6,6 +6,7 @@ export * from './use-deferred-error';
 export * from './use-drag-and-drop-enabled';
 export * from './use-focus-trap';
 export * from './use-header-height';
+export * from './use-sticky-toolbar';
 export * from './use-horizontal-scrollbar';
 export * from './use-image-edge-color';
 export * from './use-is-truncated';