@bearmenu/ui 0.7.1 → 0.8.1

package/src/components/avatar.tsx

@@ -23,22 +23,32 @@ const avatarVariants = cva(
   }
 );
 
-const AvatarContext = React.createContext<VariantProps<typeof avatarVariants>["size"]>("default");
+type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+
+const AvatarContext = React.createContext<AvatarSize>("default");
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
     VariantProps<typeof avatarVariants>
->(({ className, size = "default", ...props }, ref) => (
-  <AvatarContext.Provider value={size}>
-    <AvatarPrimitive.Root
-      ref={ref}
-      data-slot="avatar"
-      className={cn(avatarVariants({ size }), className)}
-      {...props}
-    />
-  </AvatarContext.Provider>
-));
+>(({ className, size, ...props }, ref) => {
+  // An explicit `size` always wins; otherwise inherit from the nearest
+  // AvatarGroup (context defaults to "default", so a standalone Avatar with no
+  // size behaves exactly as before).
+  const inheritedSize = React.useContext(AvatarContext);
+  const resolvedSize = size ?? inheritedSize;
+
+  return (
+    <AvatarContext.Provider value={resolvedSize}>
+      <AvatarPrimitive.Root
+        ref={ref}
+        data-slot="avatar"
+        className={cn(avatarVariants({ size: resolvedSize }), className)}
+        {...props}
+      />
+    </AvatarContext.Provider>
+  );
+});
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
@@ -62,7 +72,7 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     data-slot="avatar-fallback"
     className={cn(
-      "flex size-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
+      "flex size-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground",
       className
     )}
     {...props}
@@ -85,14 +95,14 @@ const AvatarBadge = React.forwardRef<
     tone?: "success" | "warning" | "destructive" | "muted";
   }
 >(({ className, placement = "bottom-right", tone = "success", ...props }, ref) => {
-  const size = React.useContext(AvatarContext) ?? "default";
+  const size = React.useContext(AvatarContext);
   return (
     <span
       ref={ref}
       data-slot="avatar-badge"
       className={cn(
         "absolute block rounded-full ring-background",
-        badgeOffset[size as keyof typeof badgeOffset],
+        badgeOffset[size],
         placement === "top-right" ? "right-0 top-0" : "bottom-0 right-0",
         tone === "success" && "bg-success",
         tone === "warning" && "bg-warning",
@@ -106,37 +116,83 @@ const AvatarBadge = React.forwardRef<
 });
 AvatarBadge.displayName = "AvatarBadge";
 
+// The "+N" chip tracks the group's avatar size. Its label sits one step below
+// the matching Avatar text rung — a two-glyph "+12" needs more room inside the
+// same circle than a one-glyph initial. `default` reproduces the pre-0.8
+// hardcoded appearance (size-10 text-xs) exactly.
+const avatarGroupOverflowVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground ring-2 ring-background",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-[9px]",
+        sm: "size-8 text-[10px]",
+        default: "size-10 text-xs",
+        lg: "size-12 text-sm",
+        xl: "size-16 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
 const AvatarGroup = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { max?: number; spacing?: "tight" | "default" | "loose" }
->(({ className, children, max, spacing = "default", ...props }, ref) => {
+  React.HTMLAttributes<HTMLDivElement> & {
+    max?: number;
+    spacing?: "tight" | "default" | "loose";
+    /**
+     * Size for the whole group: sets the "+N" overflow chip and is inherited by
+     * child `Avatar`s that don't set their own `size`. Defaults to "default".
+     */
+    size?: AvatarSize;
+  }
+>(({ className, children, max, spacing = "default", size, ...props }, ref) => {
+  const inheritedSize = React.useContext(AvatarContext);
+  const resolvedSize = size ?? inheritedSize;
   const items = React.Children.toArray(children);
   const visible = max ? items.slice(0, max) : items;
   const overflow = max ? items.length - max : 0;
 
   return (
-    <div
-      ref={ref}
-      data-slot="avatar-group"
-      className={cn(
-        "flex items-center",
-        spacing === "tight" && "-space-x-3",
-        spacing === "default" && "-space-x-2",
-        spacing === "loose" && "-space-x-1",
-        "[&>*]:ring-2 [&>*]:ring-background",
-        className
-      )}
-      {...props}
-    >
-      {visible}
-      {overflow > 0 && (
-        <span className="relative inline-flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background">
-          +{overflow}
-        </span>
-      )}
-    </div>
+    <AvatarContext.Provider value={resolvedSize}>
+      <div
+        ref={ref}
+        data-slot="avatar-group"
+        className={cn(
+          "flex items-center",
+          spacing === "tight" && "-space-x-3",
+          spacing === "default" && "-space-x-2",
+          spacing === "loose" && "-space-x-1",
+          "[&>*]:ring-2 [&>*]:ring-background",
+          className
+        )}
+        {...props}
+      >
+        {visible}
+        {overflow > 0 && (
+          <span
+            data-slot="avatar-group-overflow"
+            className={avatarGroupOverflowVariants({ size: resolvedSize })}
+          >
+            +{overflow}
+          </span>
+        )}
+      </div>
+    </AvatarContext.Provider>
   );
 });
 AvatarGroup.displayName = "AvatarGroup";
 
-export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, avatarVariants };
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  avatarVariants,
+  avatarGroupOverflowVariants,
+};
+export type { AvatarSize };

package/src/components/badge.tsx

@@ -37,10 +37,22 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  /**
+   * Element to render. Defaults to `div`.
+   *
+   * Use `"span"` when the badge sits inside a `<button>` or a `<p>` — their
+   * content model is phrasing content, so a `div` in there is invalid HTML.
+   * That is the common case for a badge sitting inline with a title on a
+   * clickable row.
+   */
+  as?: "div" | "span";
+}
 
-function Badge({ className, variant, live, ...props }: BadgeProps) {
-  return <div data-slot="badge" className={cn(badgeVariants({ variant, live }), className)} {...props} />;
+function Badge({ className, variant, live, as: Tag = "div", ...props }: BadgeProps) {
+  return (
+    <Tag data-slot="badge" className={cn(badgeVariants({ variant, live }), className)} {...props} />
+  );
 }
 
 export { Badge, badgeVariants };

package/src/components/breadcrumb.tsx

@@ -59,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("font-medium text-foreground", className)}
+      className={cn("font-semibold text-foreground", className)}
       {...props}
     />
   );

package/src/components/button.tsx

@@ -6,7 +6,7 @@ import { cn } from "../lib/utils";
 import { useHaptic } from "../hooks/use-haptic";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
   {
     variants: {
       variant: {
@@ -21,6 +21,21 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         glass: "glass glass-hover text-foreground",
+        /**
+         * Chrome sitting ON a photo — share, close, favourite over a hero or
+         * card image. `glass` is the wrong tool there: it resolves
+         * `text-foreground`, which is near-black in light mode and disappears
+         * into a dark photo.
+         *
+         * Deliberately NOT theme-aware, and so deliberately different from
+         * `Badge`'s `overlay` (`bg-foreground/70 text-background`, which
+         * inverts). A photo is equally a photo in both themes — this chrome has
+         * to contrast with the image beneath it, not with the app canvas, so it
+         * stays dark-on-light-glyph either way. Reconcile Badge to this, not the
+         * reverse, if the two are ever unified.
+         */
+        overlay:
+          "bg-black/40 text-white backdrop-blur-sm hover:bg-black/60 focus-visible:ring-white/70",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:

package/src/components/calendar.tsx

@@ -58,7 +58,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-semibold",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
@@ -67,7 +67,7 @@ function Calendar({
         ),
         dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
-          "font-medium select-none",
+          "font-semibold select-none",
           captionLayout === "label"
             ? "text-sm"
             : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",

package/src/components/circular-progress.tsx

@@ -89,7 +89,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
           />
         </svg>
         {showLabel && !indeterminate && (
-          <span className="absolute text-xs font-medium tabular-nums text-foreground">
+          <span className="absolute text-xs font-semibold tabular-nums text-foreground">
             {Math.round(percent)}%
           </span>
         )}

package/src/components/command.tsx

@@ -41,7 +41,7 @@ const CommandDialog = ({
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -110,7 +110,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     )}
     {...props}

package/src/components/currency-input.tsx

@@ -139,7 +139,7 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
         <div className="relative">
           <span
             aria-hidden
-            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground"
+            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-muted-foreground"
           >
             {currency}
           </span>

package/src/components/description-list.tsx

@@ -40,7 +40,7 @@ const DescriptionTerm = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLE
     <dt
       ref={ref as React.Ref<HTMLElement>}
       data-slot="description-term"
-      className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", className)}
+      className={cn("text-xs font-semibold uppercase tracking-wide text-muted-foreground", className)}
       {...props}
     />
   )

package/src/components/dropdown-menu.tsx

@@ -161,7 +161,7 @@ function DropdownMenuLabel({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      className={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
       {...props}
     />
   );

package/src/components/field.tsx

@@ -136,7 +136,7 @@ const FieldLegend = React.forwardRef<HTMLLegendElement, React.HTMLAttributes<HTM
     <legend
       ref={ref}
       data-slot="field-legend"
-      className={cn("px-1 text-sm font-medium text-foreground", className)}
+      className={cn("px-1 text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )

package/src/components/input-group.tsx

@@ -92,7 +92,7 @@ const InputGroupButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAtt
       type={type}
       data-slot="input-group-button"
       className={cn(
-        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
+        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
         className
       )}
       {...props}

package/src/components/input.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const inputVariants = cva(
-  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
   {
     variants: {
       size: {

package/src/components/item.tsx

@@ -81,7 +81,7 @@ const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
     <div
       ref={ref}
       data-slot="item-title"
-      className={cn("truncate text-sm font-medium text-foreground", className)}
+      className={cn("truncate text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )

package/src/components/kbd.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const kbdVariants = cva(
-  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-medium text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
+  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-semibold text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
   {
     variants: {
       size: {

package/src/components/label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-200"
+  "text-sm font-semibold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-200"
 );
 
 const Label = React.forwardRef<

package/src/components/place-about-tab.tsx

@@ -49,6 +49,46 @@ import type {
   PlacePreview,
 } from "./place-types";
 
+/**
+ * The sheet's reading order, by what a visitor opens it to find out.
+ *
+ *   getting there   map (own slot, always first) → hours → contact
+ *   transacting     ordering
+ *   practical       busyness → amenities → accessibility → payment → parking
+ *   corroboration   reputation
+ *   reference       cuisines → landmarks → description
+ *
+ * `accessibility` sits ahead of `payment` and `parking` on purpose: for the
+ * people who need it, it is not a nice-to-have detail to be found after two
+ * blocks about how to pay.
+ *
+ * `description` goes last, not first. A place page already carries a tagline
+ * and a review verdict above this sheet, so a third prose block about the same
+ * venue is the least new information here — it opened the sheet, pushing the
+ * opening hours below the fold.
+ */
+const SECTION_ORDER = [
+  "hours",
+  "contact",
+  "ordering",
+  "busyness",
+  "amenities",
+  "accessibility",
+  "payment",
+  "parking",
+  "reputation",
+  "cuisines",
+  "landmarks",
+  "description",
+] as const;
+
+/** A key this list doesn't know sorts to the END, keeping its incoming relative
+ *  order — so a section added later appears last rather than silently leading. */
+function sectionRank(key: string): number {
+  const i = SECTION_ORDER.indexOf(key as (typeof SECTION_ORDER)[number]);
+  return i === -1 ? Number.MAX_SAFE_INTEGER : i;
+}
+
 export interface PlaceAboutTabProps {
   place: PlacePreview;
   labels: PlaceAboutTabLabels;
@@ -56,6 +96,22 @@ export interface PlaceAboutTabProps {
   mapSlot?: React.ReactNode;
   /** Slot for an embedded busyness chart. Rendered only when both this prop and `place.busyness` are present. */
   busynessSlot?: React.ReactNode;
+  /**
+   * Slot for "how to order from here" — delivery platforms and the like.
+   * Sits directly after contact, because it answers the same question contact
+   * does (how do I transact with this venue) and is the most actionable thing
+   * the sheet carries.
+   *
+   * Named for its MEANING, not its position, so a later reordering doesn't turn
+   * the prop name into a lie.
+   */
+  orderingSlot?: React.ReactNode;
+  /**
+   * Slot for "what the rest of the web says / where else this venue lives" —
+   * third-party ratings and the venue's own profiles. Sits after the practical
+   * block: it is corroboration, wanted after the facts, not before them.
+   */
+  reputationSlot?: React.ReactNode;
   /** Fires when the user clicks a contact link (phone/website/social). */
   onLinkClick?: (kind: PlaceLinkKind, url: string) => void;
   className?: string;
@@ -67,7 +123,12 @@ function humanizeEnum(value: string): string {
 
 function SectionHeading({ children }: { children: React.ReactNode }) {
   return (
-    <Text as="h3" variant="body-sm" weight="semibold" className="text-foreground">
+    <Text
+      as="h3"
+      variant="body-sm"
+      weight="semibold"
+      className="text-foreground"
+    >
       {children}
     </Text>
   );
@@ -132,6 +193,8 @@ export function PlaceAboutTab({
   labels,
   mapSlot,
   busynessSlot,
+  orderingSlot,
+  reputationSlot,
   onLinkClick,
   className,
 }: PlaceAboutTabProps) {
@@ -147,23 +210,26 @@ export function PlaceAboutTab({
     labels.accessibilityLabels[key] || humanizeEnum(key);
   const getParkingLabel = (key: string): string =>
     labels.parkingLabels[key] || humanizeEnum(key);
-  const getTypeLabel = (key: string): string => labels.typeLabels[key] || humanizeEnum(key);
+  const getTypeLabel = (key: string): string =>
+    labels.typeLabels[key] || humanizeEnum(key);
   const getStatusLabel = (key: string): string =>
     labels.statusLabels[key] || humanizeEnum(key);
 
   const hasDescription = Boolean(
-    place.generative_summary || place.review_summary || place.description
+    place.generative_summary || place.review_summary || place.description,
   );
   const hasDescriptionChips = Boolean(place.type || place.business_status);
   const hasContact = Boolean(
     place.location?.address ||
-      place.phone ||
-      place.website_url ||
-      place.socials?.instagram_url ||
-      place.socials?.facebook_url
+    place.phone ||
+    place.website_url ||
+    place.socials?.instagram_url ||
+    place.socials?.facebook_url,
   );
   const hasSchedule = Boolean(place.schedule);
-  const hasBusyness = Boolean(busynessSlot && place.busyness && place.busyness.length > 0);
+  const hasBusyness = Boolean(
+    busynessSlot && place.busyness && place.busyness.length > 0,
+  );
   const hasCuisines = (place.cuisines?.length ?? 0) > 0;
   const hasAmenities = (place.amenities?.length ?? 0) > 0;
   const hasPayment = (place.payment_options?.length ?? 0) > 0;
@@ -236,7 +302,12 @@ export function PlaceAboutTab({
                   {place.location.address}
                 </Text>
                 {neighborhood && (
-                  <Text as="p" variant="body-sm" color="muted" className="mt-0.5">
+                  <Text
+                    as="p"
+                    variant="body-sm"
+                    color="muted"
+                    className="mt-0.5"
+                  >
                     {neighborhood}
                   </Text>
                 )}
@@ -248,7 +319,10 @@ export function PlaceAboutTab({
                 onClick={() => handleLinkClick("phone", place.phone)}
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                <Phone className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Phone
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm">
                   {place.phone}
                 </Text>
@@ -262,7 +336,10 @@ export function PlaceAboutTab({
                 onClick={() => handleLinkClick("website", place.website_url)}
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors break-all"
               >
-                <Globe className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Globe
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm" className="break-all">
                   {place.website_url}
                 </Text>
@@ -273,10 +350,15 @@ export function PlaceAboutTab({
                 href={place.socials.instagram_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                onClick={() => handleLinkClick("instagram", place.socials?.instagram_url)}
+                onClick={() =>
+                  handleLinkClick("instagram", place.socials?.instagram_url)
+                }
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                <Instagram className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Instagram
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm">
                   {labels.instagram}
                 </Text>
@@ -287,10 +369,15 @@ export function PlaceAboutTab({
                 href={place.socials.facebook_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                onClick={() => handleLinkClick("facebook", place.socials?.facebook_url)}
+                onClick={() =>
+                  handleLinkClick("facebook", place.socials?.facebook_url)
+                }
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                <Facebook className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Facebook
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm">
                   {labels.facebook}
                 </Text>
@@ -341,7 +428,9 @@ export function PlaceAboutTab({
         <section className="px-4 space-y-2">
           <SectionHeading>{labels.cuisines}</SectionHeading>
           <ChipRow
-            items={place.cuisines!.map((c) => c.charAt(0).toUpperCase() + c.slice(1))}
+            items={place.cuisines!.map(
+              (c) => c.charAt(0).toUpperCase() + c.slice(1),
+            )}
           />
         </section>
       ),
@@ -378,7 +467,9 @@ export function PlaceAboutTab({
       node: (
         <section className="px-4 space-y-2">
           <SectionHeading>{labels.accessibility}</SectionHeading>
-          <ChecklistGrid items={place.accessibility_features!.map(getAccessibilityLabel)} />
+          <ChecklistGrid
+            items={place.accessibility_features!.map(getAccessibilityLabel)}
+          />
         </section>
       ),
     });
@@ -404,7 +495,10 @@ export function PlaceAboutTab({
           <SectionHeading>{labels.nearbyLandmarks}</SectionHeading>
           <div className="space-y-2">
             {place.landmarks!.map((landmark, i) => (
-              <div key={i} className="flex justify-between items-baseline gap-3">
+              <div
+                key={i}
+                className="flex justify-between items-baseline gap-3"
+              >
                 <Text as="span" variant="body-sm">
                   {landmark.name}
                 </Text>
@@ -426,6 +520,25 @@ export function PlaceAboutTab({
     });
   }
 
+  if (orderingSlot) {
+    sections.push({
+      key: "ordering",
+      node: <section className="px-4">{orderingSlot}</section>,
+    });
+  }
+  if (reputationSlot) {
+    sections.push({
+      key: "reputation",
+      node: <section className="px-4">{reputationSlot}</section>,
+    });
+  }
+
+  // Sorted, not pushed in order: the reading order is a product decision and
+  // belongs in ONE greppable list, not implied by the physical sequence of a
+  // dozen `if` blocks 250 lines apart — which is how it came to open on a
+  // description while "is it open" sat fourth.
+  sections.sort((a, b) => sectionRank(a.key) - sectionRank(b.key));
+
   return (
     <div className={cn("space-y-6 pt-4", className)}>
       {mapSlot}

package/src/components/place-card.tsx

@@ -83,7 +83,7 @@ export const PlaceCard = memo(function PlaceCard({
           {ratingDisplay !== null && (
             <div className="flex items-center gap-1">
               <Star className="w-4 h-4 fill-primary text-primary" aria-hidden="true" />
-              <span className="font-medium text-sm">{ratingDisplay}</span>
+              <span className="font-semibold text-sm">{ratingDisplay}</span>
               {reviewCount !== undefined && reviewCount !== null && (
                 <span className="text-xs text-muted-foreground">({reviewCount})</span>
               )}