@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.733

package/src/components/agent-identity.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, type ReactNode } from 'react';
 import {
   AGENT_IDENTITIES_API_PATH,
   useAgentIdentities,
   type AgentIdentityIcon,
   type AgentIdentityIcons,
 } from '../hooks/use-agent-identities';
+import { HEX_PATTERN } from '../utils/ods-color-utils';
 
 export { AGENT_IDENTITIES_API_PATH, type AgentIdentityIcon, type AgentIdentityIcons };
 
@@ -107,3 +108,21 @@ export function useAgentIdentityIcon(slug: string | null | undefined): AgentIden
   }, [unprovided, slug]);
   return identities?.get(slug ?? '');
 }
+
+/**
+ * Each agent identity's accent, as a lookup by slug: the hex colour its
+ * identity stores, or undefined when it names none (the caller then draws the platform's
+ * accent). THE way anything is drawn in an agent's colour: never a colour
+ * chosen per agent in a component. A lookup, not one value, because a row of
+ * agents (a tab per agent) needs every one of them.
+ */
+export function useAgentAccents(): (slug: string | null | undefined) => string | undefined {
+  const identities = useContext(AgentIdentityContext);
+  return useCallback(
+    slug => {
+      const accent = identities?.get(slug ?? '')?.accent;
+      return typeof accent === 'string' && HEX_PATTERN.test(accent) ? accent : undefined;
+    },
+    [identities],
+  );
+}

package/src/components/chat/embeddable-chat.tsx

@@ -481,6 +481,22 @@ export interface EmbeddableChatProps {
     items: ChatContextItem[];
     onRemove?: (item: ChatContextItem) => void;
   };
+  /**
+   * Host content pinned between the thread and the composer: the thread
+   * scrolls above it, the composer stays below, and it keeps its place while
+   * the thread grows (e.g. a guided tour the host attaches to one
+   * conversation, deciding by `mingoState.activeDialogId`). Rendered wherever
+   * the composer is - a conversation or the new-chat surface - and never on
+   * the chat list. Sized by its content: a tall block is the host's to cap or
+   * scroll. `null`/unset leaves the layout as it was.
+   */
+  aboveComposer?: React.ReactNode;
+  /**
+   * v2: what the list's "What to ask Mingo?" opens. Default: a new chat, the
+   * same as "Start New Chat"; a host with its own suggestions surface (a
+   * guided tour in a conversation of its own) points it there instead.
+   */
+  onWhatToAsk?: () => void;
 }
 
 // =============================================================================
@@ -1045,6 +1061,8 @@ function EmbeddableChatInner({
   guidePendingPrompt,
   onGuidePromptConsumed,
   contextMemory,
+  aboveComposer,
+  onWhatToAsk,
   handleRef,
 }: EmbeddableChatProps & { handleRef?: React.Ref<EmbeddableChatHandle> }) {
   // `shell` 'none' / 'inline' means the consumer hosts us inside their own panel
@@ -2397,8 +2415,8 @@ function EmbeddableChatInner({
     onNewChat: leaveArchiveThen(handleNewChat),
     onOpenArchive: headerOnOpenArchive && (archiveOpen ? closeArchive : headerOnOpenArchive),
     archiveActive: archiveOpen,
-    // The suggestions a new chat opens on.
-    onWhatToAsk: leaveArchiveThen(handleNewChat),
+    // The suggestions a new chat opens on, unless the host has a surface of its own.
+    onWhatToAsk: leaveArchiveThen(onWhatToAsk ?? handleNewChat),
     statusOf: dialogStatusOf,
     onRequestRename: mingoCaps.canRename ? setRenameTarget : undefined,
     onRequestArchive: mingoCaps.canArchive ? setArchiveTarget : undefined,
@@ -2987,6 +3005,15 @@ function EmbeddableChatInner({
                           </div>
                         </div>
 
+                        {/* Host block pinned above the composer (`aboveComposer`):
+                            the thread's own bottom padding separates them, the
+                            composer's horizontal inset is repeated so the two line up. */}
+                        {aboveComposer != null && aboveComposer !== false && (
+                          <div className="shrink-0 px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
+                            {aboveComposer}
+                          </div>
+                        )}
+
                         <ChatAttachmentChipStrip
                           attachments={stagedAttachments}
                           onRemove={removeAttachment}

package/src/components/chat/utils/icon-library.tsx

@@ -90,6 +90,13 @@ export const ICON_ALIASES: Readonly<Record<string, IconRef>> = {
   video: { set: 'VideoRecorderIcon' },
   headphones: { set: 'HeadphoneIcon' },
 
+  // The two LLM brands offered by `ICON_OPTIONS`. Their brand-colored glyphs
+  // are the only picker entries that hardcode a fill (#000 / #D97757), so they
+  // ignored the chip accent and sat black and orange in a cyan grid; the grey
+  // variants fill with `currentColor` like every other brand logo here.
+  'openai-logo': { set: 'OpenaiLogoGreyIcon' },
+  'anthropic-logo': { set: 'AnthropicLogoGreyIcon' },
+
   // Figma-canonical aliases (node 7363:205938) — kept for Storybook
   // fixtures and any older feed entries still using the long names.
   'clickup-logo': CLICKUP_GREY,

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

@@ -13,6 +13,7 @@ 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 { DEVICE_WALLPAPER_CLASS } from '../../ui/device-wallpaper';
 import type { RemoteSessionFixture } from '../fixtures/remote-session';
 
 function DesktopShortcut({ icon, label }: { icon: ReactNode; label: string }) {
@@ -56,7 +57,7 @@ function TaskbarApp({ icon, active = false }: { icon: ReactNode; active?: boolea
  */
 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={`absolute inset-0 flex flex-col overflow-hidden ${DEVICE_WALLPAPER_CLASS}`}>
       <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">

package/src/components/ui/device-wallpaper.ts

@@ -0,0 +1,7 @@
+/**
+ * THE wallpaper of a drawn device screen (the remote desktop in the product
+ * demo, the phone's lock screen): one gradient across the two brand colours,
+ * so every device a page draws is lit the same way.
+ */
+export const DEVICE_WALLPAPER_CLASS =
+  'bg-gradient-to-br from-ods-flamingo-cyan-secondary via-ods-bg-surface to-ods-flamingo-pink-secondary';

package/src/components/ui/feature-list.tsx

@@ -2,6 +2,7 @@
 
 import type React from 'react';
 import { Button } from './button';
+import { NumberedStep } from './numbered-step';
 
 export interface FeatureListItemData {
   /** Shown in the boxed slot. Not used by the `numbered` variant. */
@@ -21,11 +22,16 @@ export interface FeatureListProps {
    */
   variant?: 'boxed' | 'numbered';
   /**
-   * `numbered` only. The step being shown now: it stays at full strength with
-   * its marker lit and the others step back, so the list reads as "you are here" beside a timed
-   * demo. Omit for a plain list where every step is equal.
+   * `numbered` only. The step being shown now: its marker and its title take
+   * the accent and its description reads at full strength, so the list reads as
+   * "you are here" beside a timed demo. Omit for a plain list where every step is equal.
    */
   activeIndex?: number;
+  /**
+   * `numbered` only. The colour of the step being shown (a CSS colour, such as
+   * the hex of the agent whose demo it is). Omitted, it is the platform's accent.
+   */
+  accent?: string;
   /**
    * `numbered` only. Makes every step a button: choosing one reports its index
    * (a demo jumps to that step). Omit for a list that is only read.
@@ -39,6 +45,7 @@ export function FeatureList({
   iconBoxSize = 72,
   variant = 'boxed',
   activeIndex,
+  accent,
   onSelect,
 }: FeatureListProps) {
   if (variant === 'numbered') {
@@ -47,32 +54,19 @@ export function FeatureList({
       <ol className={`flex flex-col gap-[var(--spacing-system-lf)] ${className}`}>
         {items.map((item, index) => {
           const current = dims && index === activeIndex;
-          const row = (
-            <>
-              <span
-                className={`grid h-7 w-7 shrink-0 place-items-center rounded-full border transition-colors duration-200 text-h5 motion-reduce:transition-none ${
-                  current
-                    ? 'border-ods-flamingo-pink bg-ods-flamingo-pink-secondary text-ods-text-primary'
-                    : 'border-ods-border text-ods-text-secondary'
-                }`}
-              >
-                {index + 1}
-              </span>
-              <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-                <h3 className="text-ods-text-primary text-h4">{item.title}</h3>
-                <p className="text-ods-text-secondary text-h6">{item.description}</p>
-              </div>
-            </>
+          // Every numbered step on a page is the one `NumberedStep`.
+          const step = (
+            <NumberedStep
+              number={index + 1}
+              title={item.title}
+              description={item.description}
+              current={current}
+              accent={accent}
+              className={onSelect ? 'w-full' : undefined}
+            />
           );
-          const layout = 'flex items-start gap-[var(--spacing-system-sf)]';
           return (
-            <li
-              key={index}
-              aria-current={current ? 'step' : undefined}
-              className={`transition-opacity duration-200 motion-reduce:transition-none ${
-                dims && !current ? 'opacity-55 focus-within:opacity-100 hover:opacity-100' : ''
-              }`}
-            >
+            <li key={index} aria-current={current ? 'step' : undefined}>
               {onSelect ? (
                 // The unified Button with no box of its own (`wrap`): it brings the
                 // target, the focus ring and the keyboard semantics; the row is the look.
@@ -81,12 +75,12 @@ export function FeatureList({
                   size="wrap"
                   fullWidth
                   onClick={() => onSelect(index)}
-                  className={`${layout} justify-start whitespace-normal text-left hover:bg-transparent active:bg-transparent`}
+                  className="items-start justify-start whitespace-normal text-left hover:bg-transparent active:bg-transparent"
                 >
-                  {row}
+                  {step}
                 </Button>
               ) : (
-                <div className={layout}>{row}</div>
+                step
               )}
             </li>
           );

package/src/components/ui/index.ts

@@ -45,7 +45,6 @@ export * from './modal';
 export * from './modal-v2';
 export * from './modal-guarded-close';
 export * from './admin-form-drawer';
-export * from './playback-toggle';
 export * from './admin-form-modal';
 export * from './separator';
 export * from './sheet';
@@ -238,6 +237,9 @@ export { LazyMount, type LazyMountProps } from './lazy-mount';
 export * from './app-window-frame';
 export * from './product-screen-frame';
 export * from './phone-frame';
+export * from './notification-stack';
+export * from './numbered-step';
+export * from './device-wallpaper';
 export * from './analyzing-state';
 export * from './incident-feed';
 export * from './status-line';

package/src/components/ui/notification-stack.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { useEffect, useState, type ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+export interface NotificationStackItem {
+  key: string;
+  node: ReactNode;
+}
+
+export interface NotificationStackProps {
+  /** What has arrived so far, OLDEST FIRST. The newest is drawn on top. */
+  items: readonly NotificationStackItem[];
+  /** How many are shown whole when a new one has just arrived. Default 3. */
+  maxExpanded?: number;
+  /** How long they all stay whole after an arrival before the oldest starts to fold. Default 1800. */
+  lingerMs?: number;
+  /** The pause between one fold and the next: they go one at a time, never together. Default 900. */
+  foldEveryMs?: number;
+  className?: string;
+}
+
+/** The most card edges drawn for the folded pile: past two a pile only reads as "more". */
+const MAX_PILE_EDGES = 2;
+
+// Gentle on purpose: a notification eases into place and the ones under it
+// drift down with it. Soft springs with no overshoot; nothing snaps or bounces.
+const ARRIVE = { type: 'spring', stiffness: 90, damping: 22, mass: 1 } as const;
+const PUSH = { type: 'spring', stiffness: 60, damping: 20, mass: 1.1 } as const;
+const FOLD = { type: 'spring', stiffness: 140, damping: 28, mass: 1 } as const;
+
+/**
+ * Notifications as a phone keeps them: the most recent on top, the list
+ * starting where its host puts it (the lock screen: right under the clock). A
+ * new one DROPS IN FROM ABOVE into the top place and PUSHES the ones still
+ * whole DOWN. They stay
+ * whole for a moment (`lingerMs`, long enough to see that one more joined
+ * them), then fold away ONE AT A TIME, oldest first (`foldEveryMs` apart):
+ * each slips behind the ones above it and leaves its edge under the newest,
+ * until only the newest is whole on a pile of edges. Nothing that arrived is
+ * taken away, and the eye follows every one of them.
+ *
+ * The caller passes only what has arrived, oldest first; each `node` is the
+ * notification itself (`NotificationTile`). Under reduced motion the stack
+ * changes in place, with no travel.
+ */
+export function NotificationStack({
+  items,
+  maxExpanded = 3,
+  lingerMs = 1800,
+  foldEveryMs = 900,
+  className,
+}: NotificationStackProps) {
+  const reducedMotion = useReducedMotion();
+  const count = items.length;
+  const opened = Math.min(maxExpanded, count);
+
+  // How many are whole now. A new arrival joins the ones still whole (the ones
+  // already folded stay folded); a list that restarts opens afresh. State
+  // derived from the prop during render, React's own pattern for it.
+  const [seenCount, setSeenCount] = useState(count);
+  const [whole, setWhole] = useState(opened);
+  const [justArrived, setJustArrived] = useState(false);
+  if (seenCount !== count) {
+    setSeenCount(count);
+    setWhole(count > seenCount ? Math.min(opened, whole + (count - seenCount)) : opened);
+    setJustArrived(true);
+  }
+
+  // Fold the oldest whole one: the first after the linger, each next one a beat later.
+  useEffect(() => {
+    if (whole <= 1) return undefined;
+    const timer = setTimeout(
+      () => {
+        setWhole(current => current - 1);
+        setJustArrived(false);
+      },
+      justArrived ? lingerMs : foldEveryMs,
+    );
+    return () => clearTimeout(timer);
+  }, [whole, justArrived, lingerMs, foldEveryMs]);
+
+  const shown = items.slice(-Math.max(1, Math.min(whole, count))).reverse();
+  const folded = Math.min(MAX_PILE_EDGES, Math.max(0, count - shown.length));
+  const still = { duration: 0 };
+
+  return (
+    <div className={cn('flex w-full flex-col gap-1.5 pb-2.5', className)}>
+      <AnimatePresence initial={false} mode="popLayout">
+        {shown.map((item, index) => (
+          <motion.div
+            key={item.key}
+            layout={reducedMotion ? false : 'position'}
+            // It drops in from above, into the top place.
+            initial={{ opacity: 0, y: reducedMotion ? 0 : -20, scale: reducedMotion ? 1 : 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1, transition: reducedMotion ? still : ARRIVE }}
+            // Folding: it slips up behind the one above it.
+            exit={{
+              opacity: 0,
+              y: reducedMotion ? 0 : -28,
+              scale: reducedMotion ? 1 : 0.94,
+              transition: reducedMotion ? still : FOLD,
+            }}
+            // The push: how the ones already there make room.
+            transition={reducedMotion ? still : PUSH}
+            // `isolate`: the pile's edges sit behind the notification, never behind the screen.
+            className="relative isolate min-w-0"
+          >
+            {/* The pile: one edge per folded notification, under the last whole one. */}
+            {index === shown.length - 1 && (
+              <AnimatePresence initial={false}>
+                {Array.from({ length: folded }, (_, edge) => (
+                  <motion.span
+                    key={edge}
+                    aria-hidden
+                    initial={{ opacity: 0, y: 0 }}
+                    animate={{ opacity: 1 - (edge + 1) * 0.3, y: (edge + 1) * 6 }}
+                    exit={{ opacity: 0, y: 0 }}
+                    transition={reducedMotion ? still : FOLD}
+                    className="absolute inset-0 rounded-2xl border border-ods-border bg-ods-card"
+                    style={{ scaleX: 1 - (edge + 1) * 0.06, zIndex: -1 - edge }}
+                  />
+                ))}
+              </AnimatePresence>
+            )}
+            {item.node}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/ui/numbered-step.tsx

@@ -0,0 +1,81 @@
+import { cn } from '../../utils/cn';
+
+export interface StepNumberProps {
+  /** The step's number, as shown (1-based). */
+  number: number;
+  /** The step being shown now: its ring and number take the accent. */
+  current?: boolean;
+  /** The lit colour (a CSS colour, such as the hex an agent's identity stores). Omitted, it is the platform's accent. */
+  accent?: string;
+  className?: string;
+}
+
+/**
+ * THE number of a numbered step, wherever a page counts steps: a bold number
+ * in a ring. Grey at rest, the accent when it is the current one.
+ */
+export function StepNumber({ number, current = false, accent, className }: StepNumberProps) {
+  return (
+    <span
+      className={cn(
+        'grid h-6 w-6 shrink-0 place-items-center rounded-full border-2 font-bold transition-colors duration-200 text-h6 motion-reduce:transition-none',
+        current ? !accent && 'border-ods-accent text-ods-accent' : 'border-ods-text-secondary text-ods-text-secondary',
+        className,
+      )}
+      style={current && accent ? { borderColor: accent, color: accent } : undefined}
+    >
+      {number}
+    </span>
+  );
+}
+
+export interface NumberedStepProps extends StepNumberProps {
+  title: string;
+  description?: string;
+  /** The title's element. Default `h3`. */
+  titleAs?: 'h3' | 'h4' | 'p';
+}
+
+/**
+ * THE head of a numbered step: its number (`StepNumber`), its title and one
+ * line under it. One look everywhere steps are counted (a list of steps beside
+ * a demo, the head of a column of a flow). At rest the title reads at full
+ * strength and the description steps back; the current one's number and title
+ * take the accent and its description reads at full strength.
+ */
+export function NumberedStep({
+  number,
+  title,
+  description,
+  current = false,
+  accent,
+  titleAs: Title = 'h3',
+  className,
+}: NumberedStepProps) {
+  return (
+    <div className={cn('flex items-start gap-[var(--spacing-system-xs)]', className)}>
+      <StepNumber number={number} current={current} accent={accent} />
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <Title
+          className={cn(
+            'm-0 transition-colors duration-200 text-h3 motion-reduce:transition-none',
+            current ? !accent && 'text-ods-accent' : 'text-ods-text-primary',
+          )}
+          style={current && accent ? { color: accent } : undefined}
+        >
+          {title}
+        </Title>
+        {description && (
+          <p
+            className={cn(
+              'm-0 transition-colors duration-200 text-h4 motion-reduce:transition-none',
+              current ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+            )}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/phone-frame.tsx

@@ -1,39 +1,103 @@
-import type { ReactNode } from 'react';
+'use client';
+
+import { useSyncExternalStore, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { DEVICE_WALLPAPER_CLASS } from './device-wallpaper';
+import { LockCameraGlyph } from './phone-glyphs/lock-camera-glyph';
+import { LockFlashlightGlyph } from './phone-glyphs/lock-flashlight-glyph';
+import { StatusBarGlyphs } from './phone-glyphs/status-bar-glyphs';
 
 export interface PhoneFrameProps {
-  /** Lock-screen date line, e.g. "Thursday, October 1". */
+  /** A fixed lock-screen date line ("Thursday, October 1"). Omitted, it is today's, in the visitor's own locale. */
   dateLabel?: string;
-  /** Lock-screen clock, e.g. "5:09". */
+  /** A fixed lock-screen clock ("5:09"). Omitted, it is the visitor's own time, kept current. */
   timeLabel?: string;
-  /** The notification slot, directly under the clock. One at a time. */
+  /** The notifications, right under the clock, the newest first (`NotificationStack`). */
   children?: ReactNode;
   className?: string;
 }
 
+/** How often the clock is re-read. The label only changes with the minute, so most readings change nothing. */
+const CLOCK_TICK_MS = 1000;
+
+function subscribeToClock(onTick: () => void): () => void {
+  const timer = setInterval(onTick, CLOCK_TICK_MS);
+  return () => clearInterval(timer);
+}
+
+/** "9:41": the hour and minute as a lock screen shows them, with no AM/PM. */
+function readClock(): string {
+  const parts = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).formatToParts(new Date());
+  const part = (type: string) => parts.find(p => p.type === type)?.value ?? '';
+  return `${part('hour')}:${part('minute')}`;
+}
+
+/** "Monday, October 12". */
+function readDate(): string {
+  return new Intl.DateTimeFormat(undefined, { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date());
+}
+
+// The server cannot know the visitor's time: it (and the hydrating render) draw none, in the same box.
+const noTime = () => '';
+
+/** One of the lock screen's two round shortcuts. A drawing: it does nothing. */
+function LockShortcut({ children }: { children: ReactNode }) {
+  return (
+    <span className="grid size-[34px] place-items-center rounded-full bg-ods-text-primary/35 text-ods-text-primary backdrop-blur-md">
+      {children}
+    </span>
+  );
+}
+
 /**
- * A phone lock screen: island, date, clock, and one notification slot directly
- * under the clock, where a notification that has just arrived is read first
- * (it drops in from the top of the screen). Decorative chrome for showing what
- * lands on a phone.
+ * A phone lock screen: the status bar and island, the date and clock on the
+ * device wallpaper (`DEVICE_WALLPAPER_CLASS`, the one every drawn device
+ * shares), the notifications stacked under the clock, then the two
+ * shortcuts and the home indicator. Decorative chrome for showing what lands
+ * on a phone.
+ *
+ * The clock is REAL: the visitor's own date and time, kept current, unless a
+ * caller fixes them. The server draws neither (it cannot know them); their
+ * lines keep their height, so nothing moves when they appear.
  *
- * It is sized by its class (default 236 x 480), never scaled, so the text
+ * It is sized by its class (default 299 x 617), never scaled, so the text
  * inside stays the size the page set.
  */
 export function PhoneFrame({ dateLabel, timeLabel, children, className }: PhoneFrameProps) {
+  const liveTime = useSyncExternalStore(subscribeToClock, readClock, noTime);
+  const liveDate = useSyncExternalStore(subscribeToClock, readDate, noTime);
+  const time = timeLabel ?? liveTime;
+  const date = dateLabel ?? liveDate;
   return (
     <div
-      className={cn('h-[480px] w-[236px] shrink-0 rounded-[44px] border border-ods-border bg-black p-2.5', className)}
+      className={cn('h-[617px] w-[299px] shrink-0 rounded-[48px] border border-ods-border bg-black p-2.5', className)}
     >
-      <div className="flex h-full flex-col items-center rounded-[36px] bg-ods-bg px-2.5 py-3.5">
-        <span className="h-6 w-20 rounded-full bg-black" aria-hidden />
-        {dateLabel && <span className="mt-4 text-ods-text-secondary text-h6">{dateLabel}</span>}
-        {timeLabel && (
-          <span className="text-[56px] font-medium leading-[60px] tracking-tight text-ods-text-primary">
-            {timeLabel}
-          </span>
-        )}
-        <div className="mt-4 flex min-h-0 w-full flex-1 flex-col gap-1.5">{children}</div>
+      <div className={cn('relative flex h-full flex-col overflow-hidden rounded-[38px]', DEVICE_WALLPAPER_CLASS)}>
+        <div
+          className="grid shrink-0 grid-cols-[1fr_auto_1fr] items-center px-5 pt-2.5 text-ods-text-primary"
+          aria-hidden
+        >
+          <span className="font-semibold tabular-nums text-h6">{time}</span>
+          <span className="h-6 w-20 rounded-full bg-black" />
+          <StatusBarGlyphs className="h-2.5 w-[54px] justify-self-end" />
+        </div>
+        <div className="flex shrink-0 flex-col items-center pt-4 text-ods-text-primary">
+          <span className="min-h-[var(--font-line-space-h4-body)] text-h4">{date}</span>
+          <span className="h-[68px] text-[64px] font-bold tabular-nums leading-[68px] tracking-tight">{time}</span>
+        </div>
+        {/* Right under the clock, growing down; clipped at the foot, so a tall stack never runs over the shortcuts. */}
+        <div className="flex min-h-0 w-full flex-1 flex-col justify-start overflow-hidden px-2.5 pb-3 pt-4">
+          {children}
+        </div>
+        <div className="flex shrink-0 items-center justify-between px-8" aria-hidden>
+          <LockShortcut>
+            <LockFlashlightGlyph className="size-[34px]" />
+          </LockShortcut>
+          <LockShortcut>
+            <LockCameraGlyph className="size-[34px]" />
+          </LockShortcut>
+        </div>
+        <span className="mx-auto mb-2 mt-3 h-1 w-24 shrink-0 rounded-full bg-ods-text-primary" aria-hidden />
       </div>
     </div>
   );

package/src/components/ui/phone-glyphs/lock-camera-glyph.tsx

@@ -0,0 +1,14 @@
+// The camera shortcut of the drawn phone's lock screen, as the design draws it. It belongs to `PhoneFrame` and
+// nothing else, so it is not part of the icon set. It takes the text colour around it.
+
+/** The camera shortcut's glyph, in its 34px round button's own box. */
+export function LockCameraGlyph({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 34.0257 34.0257" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M10.4883 23.8176H23.5348C25.0193 23.8176 25.7758 23.0753 25.7758 21.6051V14.1326C25.7758 12.6624 25.0193 11.9273 23.5348 11.9273H21.4936C20.9297 11.9273 20.7585 11.8131 20.4373 11.4563L19.8663 10.8139C19.5095 10.4214 19.1455 10.2073 18.4104 10.2073H15.5627C14.8276 10.2073 14.4636 10.4214 14.1068 10.8139L13.5358 11.4563C13.2146 11.806 13.0362 11.9273 12.4795 11.9273H10.4883C8.99665 11.9273 8.24726 12.6624 8.24726 14.1326V21.6051C8.24726 23.0753 8.99665 23.8176 10.4883 23.8176ZM17.0115 21.7122C14.849 21.7122 13.1147 19.985 13.1147 17.8082C13.1147 15.6386 14.849 13.9114 17.0115 13.9114C19.174 13.9114 20.9012 15.6386 20.9012 17.8082C20.9012 19.985 19.1669 21.7122 17.0115 21.7122ZM21.3794 15.1818C21.3794 14.6965 21.8076 14.2682 22.3072 14.2682C22.7996 14.2682 23.2207 14.6965 23.2207 15.1818C23.2207 15.6885 22.7996 16.0953 22.3072 16.1025C21.8076 16.1025 21.3794 15.6956 21.3794 15.1818ZM17.0115 20.6273C18.5674 20.6273 19.8235 19.3784 19.8235 17.8082C19.8235 16.2452 18.5674 14.9891 17.0115 14.9891C15.4556 14.9891 14.1924 16.2452 14.1924 17.8082C14.1924 19.3784 15.4628 20.6273 17.0115 20.6273Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/ui/phone-glyphs/lock-flashlight-glyph.tsx

@@ -0,0 +1,14 @@
+// The flashlight shortcut of the drawn phone's lock screen, as the design draws it. It belongs to `PhoneFrame` and
+// nothing else, so it is not part of the icon set. It takes the text colour around it.
+
+/** The flashlight shortcut's glyph, in its 34px round button's own box. */
+export function LockFlashlightGlyph({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 34.0257 34.0257" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M13.8216 11.1597H20.8833V10.8248C20.8833 9.94557 20.4507 9.5269 19.6133 9.5269H15.0916C14.2543 9.5269 13.8216 9.94557 13.8216 10.8248V11.1597ZM16.5151 25.1505H18.1898C19.0272 25.1505 19.4528 24.7318 19.4528 23.8526V16.442C19.4528 15.7093 19.6273 15.179 19.8924 14.7743L20.346 14.1044C20.667 13.609 20.8833 13.1415 20.8833 12.5483V11.9762H13.8216V12.5483C13.8216 13.1415 14.038 13.609 14.3589 14.1044L14.8055 14.7743C15.0777 15.179 15.2451 15.7093 15.2451 16.442V23.8526C15.2451 24.7318 15.6778 25.1505 16.5151 25.1505ZM17.3525 19.7845C16.7803 19.7845 16.4105 19.3658 16.4105 18.7796V16.8677C16.4105 16.2746 16.7803 15.8768 17.3525 15.8908C17.9177 15.8978 18.2945 16.2955 18.2945 16.8677V18.7796C18.2945 19.3658 17.9177 19.7845 17.3525 19.7845ZM17.3525 19.289C17.6595 19.289 17.9247 19.0308 17.9247 18.7168C17.9247 18.4028 17.6595 18.1377 17.3525 18.1377C17.0385 18.1377 16.7733 18.4028 16.7733 18.7168C16.7733 19.0308 17.0385 19.289 17.3525 19.289Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}