@xemahq/ui-kernel 0.10.0 → 0.11.1

package/src/ui/chrome/page-shell.tsx

@@ -1,8 +1,8 @@
 import { FileQuestion, type LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
 
-import { useHostBridge, type PageBackTarget } from '../../lib/biome-host';
 import EmptyState from './EmptyState';
+import { useHostBridge, type PageBackTarget } from '../../lib/biome-host';
 import { Tabs, TabsList, TabsTrigger } from '../primitives/tabs';
 
 interface TabDef {
@@ -44,38 +44,52 @@ interface PageShellProps {
  * page-meta store) and renders an optional tab strip + action row above the
  * scrollable content canvas. Host-framework-agnostic: reaches the page-meta
  * store through the kernel `HostBridge` singleton, never a host import.
+ *
+ * ── WHY THIS DISPATCHES INSTEAD OF BRANCHING ──────────────────────────────
+ *
+ * `embedded` means "the host page already owns the topbar — render only my
+ * body". But `usePageMeta` used to be called UNCONDITIONALLY, above the
+ * `embedded` check, and the page-meta store is a STACK ("nested pages can push
+ * their own meta; on unmount the outer meta is restored"). So an embedded shell
+ * pushed its own title, description, eyebrow, backTo and topbarActions OVER its
+ * host's — the precise opposite of what embedding means. The host's back button
+ * and title silently became the child's for as long as the child was mounted.
+ *
+ * A hook cannot be called conditionally, so the fix is structural: this
+ * component calls NO hooks and only chooses. The embedded variant never reaches
+ * the page-meta hook because it is a different component, not a later branch.
  */
-export default function PageShell({
-  icon: _Icon,
-  title,
-  description,
+export default function PageShell(props: Readonly<PageShellProps>) {
+  return props.embedded ? (
+    <EmbeddedPageShell {...props} />
+  ) : (
+    <FullPageShell {...props} />
+  );
+}
+
+/**
+ * Embedded body. Registers NO page meta — the host page owns the topbar.
+ * Renders only the child content plus an optional sub-tab strip + actions.
+ */
+function EmbeddedPageShell({
   children,
   actions,
   tabs,
   activeTab,
   onTabChange,
-  maxWidth,
-  embedded,
-  eyebrow,
-  backTo,
-  topbarActions,
 }: Readonly<PageShellProps>) {
-  // Single source of truth for the topbar title. Pages that bypass
-  // PageShell call the page-meta hook directly; PageShell wraps the same
-  // hook so consumers don't need to register meta twice.
-  useHostBridge().pageMeta.usePageMeta({ title, description, eyebrow, backTo, topbarActions });
-  if (embedded) {
-    // Embedded mode: the host page already provides the title + tabs +
-    // context, so we render ONLY the child content + any sub-tab strip +
-    // actions inline. This eliminates the legacy duplicate icon-and-title
-    // row that previously stole vertical space.
+  {
     return (
       <div className="flex h-full min-h-0 flex-col bg-paper">
         {(tabs && tabs.length > 0) || actions ? (
           <div className="shrink-0 border-b border-rule bg-paper-elev/40">
             <div className="flex items-center gap-3 px-4 py-2 lg:px-6">
               {tabs && tabs.length > 0 && (
-                <Tabs value={activeTab} onValueChange={onTabChange} className="flex-1 min-w-0">
+                <Tabs
+                  value={activeTab}
+                  onValueChange={onTabChange}
+                  className="flex-1 min-w-0"
+                >
                   <div className="overflow-x-auto">
                     <TabsList className="h-7 bg-transparent p-0 gap-0">
                       {tabs.map((tab) => (
@@ -86,7 +100,9 @@ export default function PageShell({
                         >
                           {tab.label}
                           {tab.count !== undefined && (
-                            <span className="ml-1.5 text-caption tabular-nums opacity-70">{tab.count}</span>
+                            <span className="ml-1.5 text-caption tabular-nums opacity-70">
+                              {tab.count}
+                            </span>
                           )}
                           {tab.indicator && (
                             <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-warning" />
@@ -98,16 +114,50 @@ export default function PageShell({
                 </Tabs>
               )}
               {!tabs && <div className="flex-1" />}
-              {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+              {actions && (
+                <div className="flex items-center gap-2 shrink-0">
+                  {actions}
+                </div>
+              )}
             </div>
           </div>
         ) : null}
         <div className="flex-1 overflow-auto min-h-0">
-          <div className="flex h-full min-h-0 flex-col px-4 pb-4 pt-3 lg:px-6">{children}</div>
+          <div className="flex h-full min-h-0 flex-col px-4 pb-4 pt-3 lg:px-6">
+            {children}
+          </div>
         </div>
       </div>
     );
   }
+}
+
+/**
+ * Full page. Owns the topbar meta for the route it renders.
+ */
+function FullPageShell({
+  title,
+  description,
+  children,
+  actions,
+  tabs,
+  activeTab,
+  onTabChange,
+  maxWidth,
+  eyebrow,
+  backTo,
+  topbarActions,
+}: Readonly<PageShellProps>) {
+  // Single source of truth for the topbar title. Pages that bypass
+  // PageShell call the page-meta hook directly; PageShell wraps the same
+  // hook so consumers don't need to register meta twice.
+  useHostBridge().pageMeta.usePageMeta({
+    title,
+    description,
+    eyebrow,
+    backTo,
+    topbarActions,
+  });
 
   return (
     <div className={`flex h-full min-h-0 flex-col ${maxWidth ?? ''}`}>
@@ -116,7 +166,11 @@ export default function PageShell({
         <div className="shrink-0 border-b border-border/50 px-4 sm:px-5 lg:px-8">
           <div className="flex min-h-[34px] flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-3 sm:py-0">
             {tabs && tabs.length > 0 && (
-              <Tabs value={activeTab} onValueChange={onTabChange} className="flex-1 min-w-0">
+              <Tabs
+                value={activeTab}
+                onValueChange={onTabChange}
+                className="flex-1 min-w-0"
+              >
                 <div className="overflow-x-auto">
                   <TabsList className="h-7 bg-transparent p-0 gap-0">
                     {tabs.map((tab) => (
@@ -127,7 +181,9 @@ export default function PageShell({
                       >
                         {tab.label}
                         {tab.count !== undefined && (
-                          <span className="ml-1.5 text-caption tabular-nums opacity-60">{tab.count}</span>
+                          <span className="ml-1.5 text-caption tabular-nums opacity-60">
+                            {tab.count}
+                          </span>
                         )}
                         {tab.indicator && (
                           <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-warning" />

package/src/ui/chrome/status-badge.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
-
 import { cn } from '../cn';
 import { getStatusStyle } from '../design-tokens';
 import { Badge } from '../primitives/badge';
 
+import type { ReactNode } from 'react';
+
 export type StatusBadgeSize = 'xs' | 'sm' | 'md';
 
 export interface StatusBadgeProps {
@@ -68,8 +68,12 @@ export default function StatusBadge({
         className,
       )}
     >
-      {dot && <span className={cn('shrink-0 rounded-full', sz.dot, style.dot)} />}
-      {children ?? <span className="capitalize">{status.replace(/_/g, ' ')}</span>}
+      {dot && (
+        <span className={cn('shrink-0 rounded-full', sz.dot, style.dot)} />
+      )}
+      {children ?? (
+        <span className="capitalize">{status.replace(/_/g, ' ')}</span>
+      )}
     </Badge>
   );
 }

package/src/ui/design-tokens.ts

@@ -142,8 +142,16 @@ export const STATUS_STYLES: Record<string, StatusStyle> = {
   manual_review: WARNING_STYLE,
 };
 
+/**
+ * Style for an unrecognised status. Same value `STATUS_STYLES.pending` carries —
+ * referenced as the fragment rather than re-read out of the open `Record`, so
+ * the fallback is structurally guaranteed instead of being a second lookup that
+ * can itself miss (e.g. if the `pending` key were ever renamed).
+ */
+const DEFAULT_STATUS_STYLE: StatusStyle = INFO_STYLE;
+
 export function getStatusStyle(status: string): StatusStyle {
-  return STATUS_STYLES[status] ?? STATUS_STYLES.pending;
+  return STATUS_STYLES[status] ?? DEFAULT_STATUS_STYLE;
 }
 
 // ── Priority Styles ────────────────────────────────────────────────
@@ -156,6 +164,17 @@ export interface PriorityStyle {
   label: string;
 }
 
+// Lowest priority — also the style for an unrecognised priority. Named so the
+// map entry and `getPriorityStyle`'s fallback are the same proven value rather
+// than a second `Record` lookup that can itself miss.
+const PRIORITY_LOW_STYLE: PriorityStyle = {
+  badge: 'bg-paper-elev text-ink-3 border-border',
+  text: 'text-ink-3',
+  bg: 'bg-muted/30',
+  border: 'border-border',
+  label: 'Low',
+};
+
 export const PRIORITY_STYLES: Record<string, PriorityStyle> = {
   p0: {
     badge: 'bg-destructive text-white border-destructive',
@@ -178,17 +197,11 @@ export const PRIORITY_STYLES: Record<string, PriorityStyle> = {
     border: 'border-warning/30',
     label: 'Medium',
   },
-  p3: {
-    badge: 'bg-paper-elev text-ink-3 border-border',
-    text: 'text-ink-3',
-    bg: 'bg-muted/30',
-    border: 'border-border',
-    label: 'Low',
-  },
+  p3: PRIORITY_LOW_STYLE,
 };
 
 export function getPriorityStyle(priority: string): PriorityStyle {
-  return PRIORITY_STYLES[priority] ?? PRIORITY_STYLES.p3;
+  return PRIORITY_STYLES[priority] ?? PRIORITY_LOW_STYLE;
 }
 
 // ── Severity Styles ────────────────────────────────────────────────
@@ -285,15 +298,28 @@ export const IMPORTANCE_STYLES: Record<number, { badge: string; label: string; s
 
 // ── Risk Level Styles ──────────────────────────────────────────────
 
-export const RISK_LEVEL_STYLES: Record<string, { badge: string; text: string }> = {
-  low: { badge: 'bg-success/15 text-success dark:text-success border-success/30', text: 'text-success dark:text-success' },
+export interface RiskLevelStyle {
+  badge: string;
+  text: string;
+}
+
+// Lowest risk — also the style for an unrecognised level. Named for the same
+// reason as PRIORITY_LOW_STYLE: the fallback must be a proven value, not a
+// second lookup into the open `Record`.
+const RISK_LOW_STYLE: RiskLevelStyle = {
+  badge: 'bg-success/15 text-success dark:text-success border-success/30',
+  text: 'text-success dark:text-success',
+};
+
+export const RISK_LEVEL_STYLES: Record<string, RiskLevelStyle> = {
+  low: RISK_LOW_STYLE,
   medium: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', text: 'text-warning dark:text-warning' },
   high: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', text: 'text-warning dark:text-warning' },
   critical: { badge: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30', text: 'text-destructive dark:text-destructive' },
 };
 
-export function getRiskLevelStyle(level: string): { badge: string; text: string } {
-  return RISK_LEVEL_STYLES[level] ?? RISK_LEVEL_STYLES.low;
+export function getRiskLevelStyle(level: string): RiskLevelStyle {
+  return RISK_LEVEL_STYLES[level] ?? RISK_LOW_STYLE;
 }
 
 // ── Agent Source Styles ────────────────────────────────────────────

package/src/ui/index.ts

@@ -92,6 +92,11 @@ export {
   type EmptyStateLinkComponent,
 } from './chrome/EmptyState';
 export { StateCard } from './chrome/StateCard';
+export {
+  RecordCardList,
+  type RecordCardField,
+  type RecordCardListProps,
+} from './chrome/RecordCardList';
 export { default as PageHeader, PageToolbar } from './chrome/PageHeader';
 export { default as LoadingState, type LoadingStateVariant } from './chrome/LoadingState';
 export { default as AsyncBoundary } from './chrome/AsyncBoundary';

package/src/ui/primitives/async-combobox.tsx

@@ -3,10 +3,10 @@ import { ChevronsUpDown, Loader2, Search } from 'lucide-react';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 
 import { cn } from '../cn';
-import { useDebouncedValue } from '../hooks/use-debounced-value';
 import { Button } from './button';
 import { Input } from './input';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { useDebouncedValue } from '../hooks/use-debounced-value';
 
 export interface AsyncComboboxProps<T> {
   /** Unique key prefix for query caching to avoid collisions between combobox instances. */
@@ -99,7 +99,9 @@ export function AsyncCombobox<T>({
   };
 
   const showTypeToSearchHint =
-    !isLoading && minSearchLength > 0 && debouncedSearch.length < minSearchLength;
+    !isLoading &&
+    minSearchLength > 0 &&
+    debouncedSearch.length < minSearchLength;
   const showEmptyMessage = !isLoading && searchEnabled && results.length === 0;
 
   return (
@@ -156,7 +158,9 @@ export function AsyncCombobox<T>({
             )}
 
             {showEmptyMessage && (
-              <p className="text-body-1 text-ink-3 text-center py-4">{emptyMessage}</p>
+              <p className="text-body-1 text-ink-3 text-center py-4">
+                {emptyMessage}
+              </p>
             )}
 
             {!isLoading &&

package/src/ui/primitives/badge.tsx

@@ -1,16 +1,25 @@
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import * as React from 'react';
 
 import { cn } from '../cn';
 import { badgeVariants } from './badge-variants';
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+import type { VariantProps } from 'class-variance-authority';
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
 
 const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   ({ className, variant, ...props }, ref) => {
-    return <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      />
+    );
   },
 );
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge';
 
 export { Badge };

package/src/ui/primitives/button.tsx

@@ -1,10 +1,11 @@
-import { Slot } from "@radix-ui/react-slot";
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
 
 import { cn } from '../cn';
 import { buttonVariants } from './button-variants';
 
+import type { VariantProps } from 'class-variance-authority';
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
@@ -13,10 +14,16 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
   },
 );
-Button.displayName = "Button";
+Button.displayName = 'Button';
 
 export { Button };

package/src/ui/primitives/overflow-tabs.tsx

@@ -83,7 +83,9 @@ export function OverflowTabs({
   // Measure container width and react to resizes.
   useEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const ro = new ResizeObserver((entries) => {
       const w = entries[0]?.contentRect.width ?? el.clientWidth;
       setContainerWidth(w);
@@ -97,7 +99,9 @@ export function OverflowTabs({
   // when the tab list itself changes (new tabs, label edits).
   useLayoutEffect(() => {
     const el = measureRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const children = Array.from(el.children) as HTMLElement[];
     setTabWidths(children.map((c) => c.getBoundingClientRect().width));
   }, [tabs]);
@@ -118,36 +122,53 @@ export function OverflowTabs({
     const vis: OverflowTab[] = [];
     const over: OverflowTab[] = [];
     let used = 0;
-    for (let i = 0; i < tabs.length; i++) {
-      const w = tabWidths[i] + (vis.length > 0 ? gap : 0);
+    for (const [i, tab] of tabs.entries()) {
+      const natural = tabWidths[i];
+      if (natural === undefined) {
+        // Unreachable: the length-parity guard above already returned. Kept as a
+        // real check because the alternative — treating a missing measurement as
+        // 0px — would lay tabs out against a budget they don't actually fit.
+        // Fall back to the same all-visible layout the parity guard renders.
+        return { visible: tabs, overflow: [] as readonly OverflowTab[] };
+      }
+      const w = natural + (vis.length > 0 ? gap : 0);
       // A pinned tab is never collapsed — it stays visible whatever the budget
       // says, so a panel's permanent first tab can't hide behind "More…".
-      if (tabs[i].pinned === true || used + w <= budget) {
-        vis.push(tabs[i]);
+      if (tab.pinned === true || used + w <= budget) {
+        vis.push(tab);
         used += w;
       } else {
-        over.push(tabs[i]);
+        over.push(tab);
       }
     }
     // Force the active tab into the visible set if it ended up in overflow.
-    const activeIdx = tabs.findIndex((t) => t.value === value);
-    if (activeIdx !== -1) {
-      const activeTab = tabs[activeIdx];
+    // `find` (not `findIndex` + lookup) so the hit is typed as present.
+    const activeTab = tabs.find((t) => t.value === value);
+    if (activeTab !== undefined) {
       const inVisible = vis.some((t) => t.value === activeTab.value);
       if (!inVisible) {
         // Swap the last visible for the active one to keep the budget OK.
         const dropped = vis.pop();
-        if (dropped) over.unshift(dropped);
+        if (dropped) {
+          over.unshift(dropped);
+        }
         vis.push(activeTab);
         const removeIdx = over.findIndex((t) => t.value === activeTab.value);
-        if (removeIdx !== -1) over.splice(removeIdx, 1);
+        if (removeIdx !== -1) {
+          over.splice(removeIdx, 1);
+        }
       }
     }
     return { visible: vis, overflow: over };
   }, [tabs, tabWidths, containerWidth, gap, moreTriggerWidth, value]);
 
   return (
-    <div className={cn('relative -mb-px flex items-end border-b border-rule', className)}>
+    <div
+      className={cn(
+        'relative -mb-px flex items-end border-b border-rule',
+        className,
+      )}
+    >
       {/* Off-screen measurement layer — renders ALL tabs so widths are real. */}
       <div
         ref={measureRef}
@@ -156,7 +177,12 @@ export function OverflowTabs({
         style={{ visibility: 'hidden' }}
       >
         {tabs.map((t) => (
-          <TabPill key={`measure-${t.value}`} tab={t} active={false} onClick={() => undefined} />
+          <TabPill
+            key={`measure-${t.value}`}
+            tab={t}
+            active={false}
+            onClick={() => undefined}
+          />
         ))}
       </div>
 
@@ -199,11 +225,15 @@ export function OverflowTabs({
               <DropdownMenuItem
                 key={t.value}
                 onClick={() => onChange(t.value)}
-                className={cn(t.value === value && 'bg-accent/60 text-foreground')}
+                className={cn(
+                  t.value === value && 'bg-accent/60 text-foreground',
+                )}
               >
                 <span className="flex-1 truncate">{t.label}</span>
                 {t.count !== undefined && (
-                  <span className="ml-2 text-caption tabular-nums text-ink-4">{t.count}</span>
+                  <span className="ml-2 text-caption tabular-nums text-ink-4">
+                    {t.count}
+                  </span>
                 )}
                 {t.indicator && (
                   <span

package/src/ui/primitives/preview-device-frame.tsx

@@ -96,10 +96,14 @@ function ScaledBezel({ bezel, children }: ScaledBezelProps) {
 
   useLayoutEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const compute = (): void => {
       const { clientWidth, clientHeight } = el;
-      if (clientWidth === 0 || clientHeight === 0) return;
+      if (clientWidth === 0 || clientHeight === 0) {
+        return;
+      }
       // Leave a tiny margin so the shadow is not clipped.
       const margin = 24;
       const availW = Math.max(0, clientWidth - margin);
@@ -163,10 +167,14 @@ function ResponsiveViewport({
 
   useLayoutEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const compute = (): void => {
       const { clientWidth, clientHeight } = el;
-      if (clientWidth === 0 || clientHeight === 0) return;
+      if (clientWidth === 0 || clientHeight === 0) {
+        return;
+      }
       const margin = 24;
       const availW = Math.max(0, clientWidth - margin);
       const availH = Math.max(0, clientHeight - margin);

package/src/ui/primitives/tag-multi-select.tsx

@@ -30,7 +30,10 @@ export interface TagMultiSelectProps {
   disabled?: boolean;
 }
 
-const CHIP_CLASSES: Record<NonNullable<TagMultiSelectProps['chipVariant']>, string> = {
+const CHIP_CLASSES: Record<
+  NonNullable<TagMultiSelectProps['chipVariant']>,
+  string
+> = {
   default: 'bg-primary/10 text-primary border-primary/20',
   secondary: 'bg-secondary text-secondary-foreground border-secondary',
   success: 'bg-success/10 text-success border-success/20',
@@ -63,7 +66,9 @@ export function TagMultiSelect({
 
   const filteredOptions = useMemo(() => {
     const q = search.trim().toLowerCase();
-    if (!q) return options;
+    if (!q) {
+      return options;
+    }
     return options.filter(
       (o) =>
         o.label.toLowerCase().includes(q) ||
@@ -93,7 +98,9 @@ export function TagMultiSelect({
   };
 
   const addCustom = () => {
-    if (!canAddCustom) return;
+    if (!canAddCustom) {
+      return;
+    }
     onChange([...value, normalizedSearch]);
     setSearch('');
     inputRef.current?.focus();
@@ -104,8 +111,13 @@ export function TagMultiSelect({
       e.preventDefault();
       if (canAddCustom) {
         addCustom();
-      } else if (filteredOptions.length === 1) {
-        toggle(filteredOptions[0].value);
+      } else {
+        // Enter with exactly one remaining match selects it.
+        const onlyMatch =
+          filteredOptions.length === 1 ? filteredOptions[0] : undefined;
+        if (onlyMatch !== undefined) {
+          toggle(onlyMatch.value);
+        }
       }
     }
   };
@@ -137,7 +149,9 @@ export function TagMultiSelect({
                   variant="outline"
                   className={cn('text-body-1 gap-1 pr-1', chipClass)}
                 >
-                  <span className="truncate max-w-[160px]">{opt?.label ?? val}</span>
+                  <span className="truncate max-w-[160px]">
+                    {opt?.label ?? val}
+                  </span>
                   <button
                     type="button"
                     onClick={(e) => remove(val, e)}
@@ -183,7 +197,9 @@ export function TagMultiSelect({
         <ScrollArea className="max-h-56">
           <div className="p-1">
             {filteredOptions.length === 0 && !canAddCustom && (
-              <p className="text-body-1 text-ink-3 text-center py-3">{emptyMessage}</p>
+              <p className="text-body-1 text-ink-3 text-center py-3">
+                {emptyMessage}
+              </p>
             )}
 
             {filteredOptions.map((opt) => {
@@ -209,7 +225,9 @@ export function TagMultiSelect({
                     {selected && <Check className="h-4 w-4" />}
                   </span>
                   <span className="flex-1 min-w-0">
-                    <span className="font-medium block truncate">{opt.label}</span>
+                    <span className="font-medium block truncate">
+                      {opt.label}
+                    </span>
                     {opt.hint && (
                       <span className="text-body-1 text-ink-3 block truncate">
                         {opt.hint}
@@ -228,7 +246,10 @@ export function TagMultiSelect({
               >
                 <Plus className="h-4 w-4 text-ink-3" />
                 <span>
-                  Add <span className="font-mono font-medium">{normalizedSearch}</span>
+                  Add{' '}
+                  <span className="font-mono font-medium">
+                    {normalizedSearch}
+                  </span>
                 </span>
               </button>
             )}

package/src/ui/primitives/url-preview-chrome.tsx

@@ -9,6 +9,7 @@
  * implementation.
  */
 import { RotateCw } from 'lucide-react';
+
 import type { ReactElement, ReactNode } from 'react';
 
 const TRAFFIC_LIGHTS = ['#e5645a', '#e8b13d', '#5bb35b'] as const;