gloomberb 0.16.3 → 0.16.4

package/src/components/layout/shell/menu.ts

@@ -15,7 +15,7 @@ import {
   type ShortcutDisplayMode,
 } from "../../../utils/shortcut-labels";
 import { PANE_MANAGEMENT_ACCELERATORS, type PaneManagementAccelerators } from "./shortcuts";
-import { t } from "../../../i18n";
+import { t, tf } from "../../../i18n";
 import { displayWidth } from "../../../utils/format";
 import { fireAndForget } from "../../../utils/fire-and-forget";
 
@@ -42,6 +42,14 @@ export interface PaneMenuQuickSetting {
   toggle: () => void;
 }
 
+/** Move to New Layout and Move Back as the pane menu offers them; either may be absent. */
+export interface PaneMenuLayoutMove {
+  /** Absent when the pane is alone in its layout. */
+  moveToNewLayout?: () => void;
+  /** Present when the pane was moved here from another layout. */
+  moveBack?: { layoutName: string; onSelect: () => void };
+}
+
 /**
  * The pane's own actions at the top of its menu: every footer hint with its
  * key, a footer shortcut such as `!`, then what the pane's kit controls add
@@ -93,6 +101,7 @@ export function menuForPane(
   quickSettings: PaneMenuQuickSetting[] = [],
   fullscreen?: { active: boolean; toggle: () => void },
   paneItems: ContextMenuItem[] = [],
+  layoutMove: PaneMenuLayoutMove = {},
 ): ContextMenuItem[] {
   const baseActions: ContextMenuItem[] = [...paneItems];
   if (baseActions.length > 0) baseActions.push(contextMenuDivider("pane:own-actions-divider"));
@@ -147,6 +156,24 @@ export function menuForPane(
     });
   }
 
+  if (layoutMove.moveToNewLayout) {
+    baseActions.push({
+      id: "move-to-new-layout",
+      label: "Move to New Layout",
+      accelerator: accelerators.newLayout,
+      onSelect: layoutMove.moveToNewLayout,
+    });
+  }
+  if (layoutMove.moveBack) {
+    baseActions.push({
+      id: "move-back",
+      label: tf("Move Back to {layout}", { layout: layoutMove.moveBack.layoutName }),
+      // The shortcut moves a pane back only when it is alone, where Move to New Layout is not offered.
+      accelerator: layoutMove.moveToNewLayout ? undefined : accelerators.newLayout,
+      onSelect: layoutMove.moveBack.onSelect,
+    });
+  }
+
   if (pane.floating) {
     baseActions.push({
       id: "dock",

package/src/components/layout/shell/pane/actions.ts

@@ -172,7 +172,8 @@ export function useShellPaneActions({
       paneTypes: pluginRegistry.panes,
       apply: persistLayout,
       notify: pluginRegistry.notify,
-      onRevert: () => pluginRegistry.updateLayout(visibleLayout),
+      // Back through the shell's save, which puts hidden panes back too.
+      onRevert: () => persistLayout(visibleLayout),
     });
     return true;
   }, [contentHeight, persistLayout, pluginRegistry, visibleLayout, width]);

package/src/components/layout/shell/pane/layers.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo, useRef, type RefObject } from "react";
 import { Box, type BoxRenderable, type LiveBoxFrame } from "../../../../ui";
 import { resolveOccludedPaneIds } from "../pane-occlusion";
 import type {
@@ -9,8 +9,8 @@ import type {
   ResolvedPane,
 } from "../../../../layout/pane-manager";
 import { colors } from "../../../../theme/colors";
-import { constrainFloatingRectToBounds } from "../drag";
-import { useLiveBoxFrame, useLiveDrag, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
+import { constrainFloatingRectToBounds, sameRect } from "../drag";
+import { useLiveBoxFrame, useLiveDrag, useLiveResizeRect, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
 import { pathKey } from "../../window-edit/mode";
 import { FloatingPaneWrapper } from "../../floating-pane";
 import { PaneContent } from "../../pane/content";
@@ -207,7 +207,16 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
   getPaneQuickSettings,
   actions,
   zIndex,
-}: PaneLayerProps & { rect: FloatingRect; zIndex: number }) {
+  frameRef,
+  contentPinned = false,
+}: PaneLayerProps & {
+  rect: FloatingRect;
+  zIndex: number;
+  /** Desktop: the frame a resize sizes outside React. */
+  frameRef?: RefObject<BoxRenderable | null>;
+  /** Desktop: a resize is under way, so the content keeps the size it last rendered at. */
+  contentPinned?: boolean;
+}) {
   const paneId = pane.instance.instanceId;
   const quickSettings = usePaneQuickSettings(getPaneQuickSettings, paneId);
   const nativeMove = nativePaneChrome && movable;
@@ -252,6 +261,7 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
             onResizeMouseDown={nativeMove ? (event) => actions.floatResizeStart(paneId, rect, event) : undefined}
             onResizeMouseDrag={nativeMove ? actions.drag : undefined}
             onResizeMouseDragEnd={nativeMove ? actions.drag : undefined}
+            frameRef={frameRef}
           >
             <PaneFooterKeys paneId={paneId} footer={footer} focused={focused} />
             <PaneContent
@@ -265,6 +275,7 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
               inView={inView}
               onClose={actions.close}
               closePane={actions.close}
+              pinned={contentPinned}
             />
           </FloatingPaneWrapper>
         );
@@ -278,8 +289,11 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
  * On the desktop a move never renders: the pane's layer is promoted at the
  * press and each frame of the move only writes its transform (see
  * `useLiveBoxFrame`), so nothing inside it re-renders, lays out or repaints
- * until the release commits the new position. A resize, and every terminal
- * frame, redraws it at the drag's rect.
+ * until the release commits the new position. A resize writes the frame's
+ * size the same way, on the same layer, and the header, body and footer
+ * stretch with it; the content keeps its size and renders at the new one a
+ * few times a second (`useLiveResizeRect`). Every terminal frame redraws it
+ * at the drag's rect.
  */
 const FloatingPaneLayer = memo(function FloatingPaneLayer({
   live,
@@ -293,13 +307,20 @@ const FloatingPaneLayer = memo(function FloatingPaneLayer({
   const slide = frame.nativePaneChrome;
   const selectRedraw = useCallback((geometry: LiveDragGeometry) => {
     if (geometry.floating?.paneId !== paneId) return null;
-    // A desktop move follows on the pane's own layer instead.
-    if (slide && geometry.paneDrag?.paneId === paneId) return null;
+    // A desktop move or resize follows by restyling the pane instead.
+    if (slide && (geometry.paneDrag?.paneId === paneId || geometry.paneResize?.paneId === paneId)) return null;
     return geometry.floating.rect;
   }, [paneId, slide]);
   const dragRect = useLiveDrag(live, selectRedraw);
+  const selectResizing = useCallback((geometry: LiveDragGeometry) => (
+    slide && geometry.paneResize?.paneId === paneId
+  ), [paneId, slide]);
+  const resizing = useLiveDrag(live, selectResizing);
   const layerRef = useRef<BoxRenderable | null>(null);
   const frameOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    // A resize keeps the pane on its own layer too: the panes it uncovers or
+    // covers never repaint, only the pane does.
+    if (geometry.paneResize?.paneId === paneId) return { dx: 0, dy: 0 };
     if (geometry.paneDrag?.paneId !== paneId) return null;
     const moving = geometry.floating?.paneId === paneId ? geometry.floating.rect : null;
     // Promoted from the press, so the first move already only slides it.
@@ -308,8 +329,28 @@ const FloatingPaneLayer = memo(function FloatingPaneLayer({
     return { dx: at.x - rect.x, dy: at.y - rect.y };
   } : null), [contentHeight, paneId, rect.x, rect.y, slide, width]);
   useLiveBoxFrame(live, layerRef, frameOf);
-  const preview = dragRect ? constrainFloatingRectToBounds(dragRect, width, contentHeight) : rect;
-  const content = <FloatingPaneFrame {...frame} rect={preview} zIndex={zIndex} />;
+  const frameRef = useRef<BoxRenderable | null>(null);
+  const sizeOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    if (geometry.paneResize?.paneId !== paneId || geometry.floating?.paneId !== paneId) return null;
+    const at = constrainFloatingRectToBounds(geometry.floating.rect, width, contentHeight);
+    return { width: at.width, height: at.height };
+  } : null), [contentHeight, paneId, slide, width]);
+  useLiveBoxFrame(live, frameRef, sizeOf);
+  const resizeRect = useLiveResizeRect(live, paneId, slide);
+  const preview = dragRect
+    ? constrainFloatingRectToBounds(dragRect, width, contentHeight)
+    : resizeRect && !sameRect(resizeRect, rect)
+      ? constrainFloatingRectToBounds(resizeRect, width, contentHeight)
+      : rect;
+  const content = (
+    <FloatingPaneFrame
+      {...frame}
+      rect={preview}
+      zIndex={zIndex}
+      frameRef={slide ? frameRef : undefined}
+      contentPinned={resizing}
+    />
+  );
   if (!slide) return content;
   return (
     <Box

package/src/components/layout/shell/pane/management-shortcuts.ts

@@ -33,6 +33,7 @@ interface ShellPaneManagementShortcutOptions {
   startWindowMode(paneId?: string, mode?: WindowEditMode): void;
   toggleFocusedPaneFullscreen(): boolean;
   toggleFocusedPaneFloating(): boolean;
+  toggleFocusedPaneNewLayout(): boolean;
 }
 
 export function useShellPaneManagementShortcuts({
@@ -54,6 +55,7 @@ export function useShellPaneManagementShortcuts({
   startWindowMode,
   toggleFocusedPaneFullscreen,
   toggleFocusedPaneFloating,
+  toggleFocusedPaneNewLayout,
 }: ShellPaneManagementShortcutOptions): void {
   const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
   const keybindings = useKeybindings();
@@ -153,6 +155,9 @@ export function useShellPaneManagementShortcuts({
       case "toggle-floating":
         handled = toggleFocusedPaneFloating();
         break;
+      case "new-layout":
+        handled = toggleFocusedPaneNewLayout();
+        break;
       case "pop-out":
         handled = popOutFocusedPane();
         break;

package/src/components/layout/shell/pane/new-layout.ts

@@ -0,0 +1,116 @@
+import { useCallback, type Dispatch } from "react";
+import { formatAdvertisedChord, type ResolvedKeybindings } from "../../../../app/keybindings";
+import { tf } from "../../../../i18n";
+import {
+  createSavedLayoutId,
+  paneMoveBackTarget,
+  paneNewLayoutBlock,
+  type PaneMoveBackTarget,
+  type PaneNewLayoutBlock,
+} from "../../../../layout/pane-layout-move";
+import type { PluginRegistry } from "../../../../plugins/registry";
+import { resolveTickerForPane, type AppAction, type AppState } from "../../../../state/app/context";
+import { findPaneInstance } from "../../../../types/config";
+import type { ShortcutDisplayMode } from "../../../../utils/shortcut-labels";
+import { getBasePaneDisplayTitle } from "../../pane/title";
+import type { PaneMenuLayoutMove } from "../menu";
+
+const BLOCK_MESSAGES: Partial<Record<PaneNewLayoutBlock, string>> = {
+  "only-pane": "Already the only pane in this layout",
+  "no-ticker": "Select a ticker in the list this pane follows first",
+};
+
+// The first move of a session says how to undo it; after that the layout tab is enough.
+let moveBackHintShown = false;
+
+interface UseShellPaneLayoutMovesOptions {
+  closePaneMenu: () => void;
+  dispatch: Dispatch<AppAction>;
+  keybindings: ResolvedKeybindings;
+  /** Leaves anything that shows this pane over the layout, such as fullscreen, before it moves. */
+  leavePane: (paneId: string) => void;
+  pluginRegistry: PluginRegistry;
+  shortcutDisplayMode: ShortcutDisplayMode;
+  stateRef: { current: AppState };
+}
+
+/**
+ * Move to New Layout and Move Back for the shell's pane menu, its shortcut
+ * and the command bar. The layout work is in `layout/pane-layout-move`.
+ */
+export function useShellPaneLayoutMoves({
+  closePaneMenu,
+  dispatch,
+  keybindings,
+  leavePane,
+  pluginRegistry,
+  shortcutDisplayMode,
+  stateRef,
+}: UseShellPaneLayoutMovesOptions) {
+  const blockFor = useCallback((paneId: string): PaneNewLayoutBlock | null => {
+    const state = stateRef.current;
+    return paneNewLayoutBlock(state.config.layout, paneId, (instanceId) => resolveTickerForPane(state, instanceId));
+  }, [stateRef]);
+
+  const moveBackTargetFor = useCallback(
+    (paneId: string): PaneMoveBackTarget | null => paneMoveBackTarget(stateRef.current.config, paneId),
+    [stateRef],
+  );
+
+  const movePaneToNewLayout = useCallback((paneId: string): boolean => {
+    const block = blockFor(paneId);
+    if (block === "missing" || block === "detached") return false;
+    const blockMessage = block ? BLOCK_MESSAGES[block] : undefined;
+    if (blockMessage) {
+      pluginRegistry.notify({ body: blockMessage, type: "info" });
+      return true;
+    }
+    const state = stateRef.current;
+    const instance = findPaneInstance(state.config.layout, paneId);
+    if (!instance) return false;
+    const def = pluginRegistry.panes.get(instance.paneId);
+    const name = (def ? getBasePaneDisplayTitle(state, instance, def, pluginRegistry.panes) : instance.title)?.trim()
+      || instance.paneId;
+    closePaneMenu();
+    leavePane(paneId);
+    dispatch({ type: "MOVE_PANE_TO_NEW_LAYOUT", paneId, name, sourceLayoutId: createSavedLayoutId() });
+    if (!moveBackHintShown) {
+      moveBackHintShown = true;
+      const shortcut = formatAdvertisedChord(keybindings, "pane-new-layout", shortcutDisplayMode);
+      pluginRegistry.notify({
+        body: shortcut
+          ? tf("Moved to a layout of its own. {shortcut} moves it back.", { shortcut })
+          : "Moved to a layout of its own. Move Back in its menu returns it.",
+        type: "info",
+      });
+    }
+    return true;
+  }, [blockFor, closePaneMenu, dispatch, keybindings, leavePane, pluginRegistry, shortcutDisplayMode, stateRef]);
+
+  const movePaneBack = useCallback((paneId: string): boolean => {
+    if (!moveBackTargetFor(paneId)) return false;
+    closePaneMenu();
+    leavePane(paneId);
+    dispatch({ type: "MOVE_PANE_BACK", paneId });
+    return true;
+  }, [closePaneMenu, dispatch, leavePane, moveBackTargetFor]);
+
+  /** The shortcut: a pane alone in the layout it was moved to goes back, any other gets a layout of its own. */
+  const togglePaneNewLayout = useCallback((paneId: string | null): boolean => {
+    if (!paneId) return false;
+    if (blockFor(paneId) === "only-pane" && movePaneBack(paneId)) return true;
+    return movePaneToNewLayout(paneId);
+  }, [blockFor, movePaneBack, movePaneToNewLayout]);
+
+  /** What the pane menu offers: Move to New Layout unless the pane is alone, Move Back when it came from elsewhere. */
+  const paneLayoutMoveMenu = useCallback((paneId: string): PaneMenuLayoutMove => {
+    const block = blockFor(paneId);
+    const back = moveBackTargetFor(paneId);
+    return {
+      ...(block === null || block === "no-ticker" ? { moveToNewLayout: () => { movePaneToNewLayout(paneId); } } : {}),
+      ...(back ? { moveBack: { layoutName: back.name, onSelect: () => { movePaneBack(paneId); } } } : {}),
+    };
+  }, [blockFor, moveBackTargetFor, movePaneBack, movePaneToNewLayout]);
+
+  return { movePaneBack, movePaneToNewLayout, paneLayoutMoveMenu, togglePaneNewLayout };
+}

package/src/components/layout/shell/shortcuts.ts

@@ -12,6 +12,7 @@ export type PaneManagementShortcut =
   | "menu"
   | "settings"
   | "toggle-fullscreen"
+  | "new-layout"
   | "toggle-floating"
   | "pop-out"
   | "copy-screenshot"
@@ -28,6 +29,7 @@ const PANE_ACTION_TO_SHORTCUT: Partial<Record<CoreKeybindingActionId, PaneManage
   "pane-menu": "menu",
   "pane-settings": "settings",
   "pane-fullscreen": "toggle-fullscreen",
+  "pane-new-layout": "new-layout",
   "pane-float": "toggle-floating",
   "pane-pop-out": "pop-out",
   "pane-screenshot": "copy-screenshot",
@@ -42,7 +44,7 @@ const PANE_ACTION_TO_SHORTCUT: Partial<Record<CoreKeybindingActionId, PaneManage
 };
 
 export type PaneManagementAccelerators = Record<
-  "menu" | "settings" | "fullscreen" | "toggleFloating" | "popOut" | "copyScreenshot" | "exportCsv" | "share" | "close"
+  "menu" | "settings" | "fullscreen" | "newLayout" | "toggleFloating" | "popOut" | "copyScreenshot" | "exportCsv" | "share" | "close"
   | "closeAllFloating" | "layoutGallery" | "gridlockAll" | "windowMode" | "windowResizeMode",
   string | undefined
 >;
@@ -53,6 +55,7 @@ export function paneManagementAccelerators(keybindings: ResolvedKeybindings): Pa
     menu: menuAcceleratorFor(keybindings, "pane-menu"),
     settings: menuAcceleratorFor(keybindings, "pane-settings"),
     fullscreen: menuAcceleratorFor(keybindings, "pane-fullscreen"),
+    newLayout: menuAcceleratorFor(keybindings, "pane-new-layout"),
     toggleFloating: menuAcceleratorFor(keybindings, "pane-float"),
     popOut: menuAcceleratorFor(keybindings, "pane-pop-out"),
     copyScreenshot: menuAcceleratorFor(keybindings, "pane-screenshot"),
@@ -98,7 +101,7 @@ export function inputCaptureAllowsPaneManagementShortcut(
   // A screenshot does not edit the field that captured input. Keep it available
   // from composers (ASKG, chat, etc.) on both desktop modifier layouts.
   if (shortcut === "copy-screenshot") return event.ctrl || event.meta || event.super === true;
-  if (shortcut === "toggle-fullscreen") return event.meta || event.super === true;
+  if (shortcut === "toggle-fullscreen" || shortcut === "new-layout") return event.meta || event.super === true;
   if (shortcut !== "close" && shortcut !== "close-all-floating") return false;
   return event.meta || event.super || event.targetEditable !== true;
 }

package/src/components/layout/shell/visible-layout.ts

@@ -1,8 +1,22 @@
 import {
   removeUnavailablePaneTypes,
+  restoreHiddenPanes,
   type PaneTypeAvailability,
 } from "../../../layout/pane-manager";
-import type { LayoutConfig } from "../../../types/config";
+import type { PluginRegistry } from "../../../plugins/registry";
+import type { LayoutConfig, PaneInstanceConfig } from "../../../types/config";
+
+/** The pane types of every plugin that is switched off. */
+export function collectDisabledPaneIds(
+  pluginRegistry: Pick<PluginRegistry, "getPluginPaneIds">,
+  disabledPlugins: readonly string[],
+): Set<string> {
+  const paneIds = new Set<string>();
+  for (const pluginId of new Set(disabledPlugins)) {
+    for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) paneIds.add(paneId);
+  }
+  return paneIds;
+}
 
 export function resolveShellVisibleLayout(
   layout: LayoutConfig,
@@ -15,3 +29,32 @@ export function resolveShellVisibleLayout(
     { disabledPaneIds },
   );
 }
+
+/** A pane the shell leaves off screen: its plugin is off, or nothing registered its type. */
+function isShellHiddenPane(
+  instance: PaneInstanceConfig,
+  disabledPaneIds: ReadonlySet<string>,
+  registeredPaneIds: PaneTypeAvailability,
+): boolean {
+  const registered = typeof registeredPaneIds === "function"
+    ? !!registeredPaneIds(instance.paneId)
+    : registeredPaneIds.has(instance.paneId);
+  return !registered || disabledPaneIds.has(instance.paneId);
+}
+
+/**
+ * What to save after an edit made on the visible layout: the edit, with every
+ * pane the shell hid put back from the saved layout.
+ */
+export function restoreShellHiddenPanes(
+  saved: LayoutConfig,
+  edited: LayoutConfig,
+  disabledPaneIds: ReadonlySet<string>,
+  registeredPaneIds: PaneTypeAvailability,
+): LayoutConfig {
+  return restoreHiddenPanes(
+    saved,
+    edited,
+    (instance) => isShellHiddenPane(instance, disabledPaneIds, registeredPaneIds),
+  );
+}

package/src/components/layout/status-bar.tsx

@@ -13,6 +13,7 @@ import { blendHex, hoverBg } from "../../theme/colors";
 import { t, tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppDispatch, useAppSelector } from "../../state/app/context";
+import { useAppChromeShown } from "./presentation";
 import { useViewport } from "../../react/input";
 import {
   advertisedChord,
@@ -53,6 +54,7 @@ import {
   useClaimedStatusWidgetColumns,
   usePublishStatusWidgetRoom,
 } from "./status-widget-space";
+import { StarPromptStatusLine } from "../../app/star-prompt/status-line";
 
 type StatusBarEvent = { stopPropagation?: () => void; preventDefault?: () => void };
 type HoveredControl = string | null;
@@ -145,7 +147,7 @@ export function StatusBar({ onOpenChangelog }: { onOpenChangelog?: (version: str
   const { width: termWidth } = useViewport();
   const layouts = useAppSelector((state) => state.config.layouts);
   const activeLayoutIdx = useAppSelector((state) => state.config.activeLayoutIndex);
-  const statusBarVisible = useAppSelector((state) => state.statusBarVisible);
+  const statusBarVisible = useAppChromeShown().statusBar;
   const layout = useAppSelector((state) => state.config.layout);
   const { transientLayout } = useTransientLayout();
   const [hoveredControl, setHoveredControl] = useState<string | null>(null);
@@ -498,6 +500,7 @@ function TerminalStatusBar({
       {showTidyWindows && <TerminalTidyWindows {...props} />}
       <Box flexGrow={1} minWidth={0} />
       <StatusBarSummary nativePaneChrome={false} {...props} />
+      <StarPromptStatusLine />
       <PluginSlot name="status:widget" />
       <StatusBarFeedback nativePaneChrome={false} {...props} />
     </Box>

package/src/components/markdown-text.tsx

@@ -30,23 +30,27 @@ interface ParsedLine {
   indent?: number;
 }
 
+// A backslash escapes the punctuation markdown would read ("\\*" is a star), and
+// an italic span may hold a bold one ("*covers **96%** of value*").
 const INLINE_RE =
-  /(\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>[^*]+)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
+  /(\\(?<escaped>[\\`*_~#>[\]()-])|\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>(?:[^*]|\*\*[^*]+\*\*)+?)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
 
 function parseInlineMarkdown(text: string): StyledSegment[] {
   const segments: StyledSegment[] = [];
   let cursor = 0;
 
-  INLINE_RE.lastIndex = 0;
+  const pattern = new RegExp(INLINE_RE.source, "g");
   let match: RegExpExecArray | null;
-  while ((match = INLINE_RE.exec(text)) !== null) {
+  while ((match = pattern.exec(text)) !== null) {
     if (match.index > cursor) {
       segments.push({ text: text.slice(cursor, match.index) });
     }
-    if (match.groups?.bold != null) {
+    if (match.groups?.escaped != null) {
+      segments.push({ text: match.groups.escaped });
+    } else if (match.groups?.bold != null) {
       segments.push({ text: match.groups.bold, bold: true });
     } else if (match.groups?.italic != null) {
-      segments.push({ text: match.groups.italic, italic: true });
+      for (const inner of parseInlineMarkdown(match.groups.italic)) segments.push({ ...inner, italic: true });
     } else if (match.groups?.code != null) {
       segments.push({ text: match.groups.code, code: true });
     } else if (match.groups?.strike != null) {

package/src/components/metric-treemap/heat-surface.tsx

@@ -209,6 +209,17 @@ function useItemsById<T>(scene: MetricTreemapScene<T>, items: readonly MetricTre
 
 const VISIBLE_FADE_DISTANCE = 0.03;
 
+/** Text up a tall tile reads bottom to top, as a chart's vertical axis title does; the move sits right of the ticker. */
+const VERTICAL_LABEL_STYLE: CSSProperties = {
+  position: "relative",
+  display: "block",
+  flexShrink: 0,
+  maxHeight: "100%",
+  overflow: "hidden",
+  writingMode: "vertical-rl",
+  transform: "rotate(180deg)",
+};
+
 const DomHeatTile = memo(function DomHeatTile({
   id, rect, canvasWidth, canvasHeight, gap, label, value, valueSuffix, background, foreground,
   selected, reducedMotion, glide, pulseCount, events,
@@ -230,7 +241,10 @@ const DomHeatTile = memo(function DomHeatTile({
   events: SurfaceEvents;
 }) {
   const text = heatTileLabelPx(rect.width - gap * 2, rect.height - gap * 2, label, value);
-  const shownValue = heatTileValueWithSuffix(value, valueSuffix, { width: rect.width - gap * 2, valuePx: text.valuePx });
+  const shownValue = heatTileValueWithSuffix(value, valueSuffix, {
+    width: (text.vertical ? rect.height : rect.width) - gap * 2,
+    valuePx: text.valuePx,
+  });
   // Where this tile sat before the last relayout, kept to slide it from there.
   const placedRef = useRef(rect);
   const glideRef = useRef<{ dx: number; dy: number; count: number }>({ dx: 0, dy: 0, count: 0 });
@@ -305,13 +319,23 @@ const DomHeatTile = memo(function DomHeatTile({
   const lineStyle: CSSProperties = {
     position: "relative",
     display: "block",
-    maxWidth: "100%",
+    maxWidth: text.vertical ? undefined : "100%",
     overflow: "hidden",
     whiteSpace: "nowrap",
     textAlign: "center",
     letterSpacing: 0,
     color: foreground,
   };
+  const lines = (
+    <>
+      {text.tier !== "none" && (
+        <Text style={{ ...lineStyle, fontSize: text.tickerPx, fontWeight: 700, lineHeight: 1.12 }}>{label}</Text>
+      )}
+      {text.tier === "full" && value && (
+        <Text style={{ ...lineStyle, fontSize: text.valuePx, fontWeight: 500, lineHeight: 1.12 }}>{shownValue}</Text>
+      )}
+    </>
+  );
   return (
     <Box
       data-gloom-role="heat-tile"
@@ -347,12 +371,7 @@ const DomHeatTile = memo(function DomHeatTile({
           }}
         />
       )}
-      {text.tier !== "none" && (
-        <Text style={{ ...lineStyle, fontSize: text.tickerPx, fontWeight: 700, lineHeight: 1.12 }}>{label}</Text>
-      )}
-      {text.tier === "full" && value && (
-        <Text style={{ ...lineStyle, fontSize: text.valuePx, fontWeight: 500, lineHeight: 1.12 }}>{shownValue}</Text>
-      )}
+      {text.vertical ? <Box style={VERTICAL_LABEL_STYLE}>{lines}</Box> : lines}
     </Box>
   );
 });

package/src/components/metric-treemap/heat-tiles.ts

@@ -11,11 +11,16 @@ export interface HeatTileLabel {
   /** Font sizes in px, for the desktop and the web. */
   tickerPx: number;
   valuePx: number;
+  /** The label runs up the tile: it fits only along a tall tile's length. */
+  vertical: boolean;
 }
 
 /** Advance of one monospace glyph, in em. */
 const MONO_CHAR_EM = 0.62;
+/** The margin either side of the text while it has room to grow. */
 const TILE_PAD_X_PX = 3;
+/** The margin it gives way to rather than drop below its smallest size. */
+const MIN_TILE_PAD_X_PX = 1;
 const TILE_PAD_Y_PX = 2;
 const MAX_TICKER_PX = 26;
 const MIN_TICKER_PX = 9;
@@ -27,36 +32,62 @@ const LINE_HEIGHT = 1.12;
 /** Text grows with the tile's area, not just its width, so a long thin tile stays calm. */
 const AREA_FONT_DIVISOR = 4.4;
 
-const NO_LABEL: HeatTileLabel = { tier: "none", tickerPx: 0, valuePx: 0 };
+const NO_LABEL: HeatTileLabel = { tier: "none", tickerPx: 0, valuePx: 0, vertical: false };
 
-export function heatTileLabelPx(width: number, height: number, ticker: string, value: string | null): HeatTileLabel {
-  const innerWidth = width - TILE_PAD_X_PX * 2;
+/**
+ * The largest font size at which text `ems` glyph advances long crosses
+ * `width` with the full margin. Rather than drop below `floor`, the text takes
+ * the margin, down to the narrowest one.
+ */
+function sizeAcross(width: number, ems: number, floor: number): number {
+  const size = (width - TILE_PAD_X_PX * 2) / ems;
+  if (size >= floor) return size;
+  return (width - MIN_TILE_PAD_X_PX * 2) / ems >= floor ? floor : size;
+}
+
+/** The label laid across a `width` by `height` box. */
+function fitLabel(width: number, height: number, ticker: string, value: string | null): HeatTileLabel {
+  const roomWidth = width - MIN_TILE_PAD_X_PX * 2;
   const innerHeight = height - TILE_PAD_Y_PX * 2;
-  if (innerWidth <= 0 || innerHeight <= 0 || ticker.length === 0) return NO_LABEL;
-  const byWidth = innerWidth / (ticker.length * MONO_CHAR_EM);
+  if (roomWidth <= 0 || innerHeight <= 0 || ticker.length === 0) return NO_LABEL;
   // Area caps big tiles only; a small one may still use the smallest readable size.
   const byArea = Math.max(MIN_FULL_TICKER_PX, Math.sqrt(width * height) / AREA_FONT_DIVISOR);
-  const cap = Math.min(MAX_TICKER_PX, byWidth, byArea);
+  const lines = innerHeight / LINE_HEIGHT;
 
   if (value) {
-    const valueByWidth = innerWidth / (value.length * MONO_CHAR_EM * VALUE_SCALE);
-    const byHeight = innerHeight / (LINE_HEIGHT * (1 + VALUE_SCALE));
-    const tickerPx = Math.min(cap, valueByWidth, byHeight);
+    const tickerPx = Math.min(
+      MAX_TICKER_PX,
+      byArea,
+      sizeAcross(width, ticker.length * MONO_CHAR_EM, MIN_FULL_TICKER_PX),
+      sizeAcross(width, value.length * MONO_CHAR_EM * VALUE_SCALE, MIN_FULL_TICKER_PX),
+      // Both lines stacked, with the move at its own floor when the ticker is small.
+      lines / (1 + VALUE_SCALE),
+      lines - MIN_VALUE_PX,
+    );
     const valuePx = Math.max(MIN_VALUE_PX, tickerPx * VALUE_SCALE);
-    if (
-      tickerPx >= MIN_FULL_TICKER_PX
-      && value.length * MONO_CHAR_EM * valuePx <= innerWidth
-      && (tickerPx + valuePx) * LINE_HEIGHT <= innerHeight
-    ) {
-      return { tier: "full", tickerPx, valuePx };
+    if (tickerPx >= MIN_FULL_TICKER_PX && value.length * MONO_CHAR_EM * valuePx <= roomWidth) {
+      return { tier: "full", tickerPx, valuePx, vertical: false };
     }
   }
 
-  const tickerPx = Math.min(cap, innerHeight / LINE_HEIGHT);
-  if (tickerPx >= MIN_TICKER_PX) return { tier: "ticker", tickerPx, valuePx: 0 };
+  const tickerPx = Math.min(MAX_TICKER_PX, byArea, sizeAcross(width, ticker.length * MONO_CHAR_EM, MIN_TICKER_PX), lines);
+  if (tickerPx >= MIN_TICKER_PX) return { tier: "ticker", tickerPx, valuePx: 0, vertical: false };
   return NO_LABEL;
 }
 
+/**
+ * The label is laid across the tile where it fits that way, and otherwise up
+ * a tall tile, so a tile the layout stood on end is labelled as it would be
+ * lying down: a tall tile narrower than its ticker still carries it. A flat
+ * strip too short for a line stays blank rather than show a letter on its side.
+ */
+export function heatTileLabelPx(width: number, height: number, ticker: string, value: string | null): HeatTileLabel {
+  const across = fitLabel(width, height, ticker, value);
+  if (across.tier !== "none" || height <= width) return across;
+  const along = fitLabel(height, width, ticker, value);
+  return along.tier === "none" ? NO_LABEL : { ...along, vertical: true };
+}
+
 /**
  * The move with its qualifier (an after-hours move's AH) where that still fits
  * at the size the move alone was given, else the move alone. The qualifier