@bearmenu/ui 0.8.17 → 0.8.18

package/src/components/event-card.tsx

@@ -55,8 +55,22 @@ export type EventCardProps = {
    * `Coverflow`) — it crops less than `3/4` and is not the same as it.
    */
   posterAspect?: "4/3" | "3/4" | "4/5";
-  /** Larger title — the featured/highlight slot. Never a clamp: the title wraps in full either way. */
-  emphasis?: boolean;
+  /**
+   * Larger title — the featured/highlight slot. Never a clamp: the title
+   * wraps in full either way. `"lg"` applies it from the `lg` breakpoint
+   * only: the timeline's day hero is an ordinary card in the phone column and
+   * the lane's feature poster on desktop, one node.
+   */
+  emphasis?: boolean | "lg";
+  /**
+   * `card` (default) at every width. `row-lg`: the card below `lg`, and from
+   * `lg` the compact row `EventCompactRow` draws — a 64px portrait poster
+   * beside the text, overlay pills off, the fee as a chip on the tags row.
+   * The timeline demotes an hour's later events to rows on desktop only, and
+   * a server render cannot swap components per viewport; this is the one
+   * node that paints both.
+   */
+  density?: "card" | "row-lg";
   /** Top-left overlay pill (the design's "Busy" hype marker). Include its icon. */
   badge?: React.ReactNode;
   /** Bottom-left overlay pill naming the category. Include its icon. */
@@ -77,8 +91,12 @@ export type EventCardProps = {
    * locale, and "is this live" depends on the app's clock, not the DS's.
    */
   liveStatus?: string;
-  /** Hide the day/time line — the timeline supplies its own hour heading. */
-  hideWhen?: boolean;
+  /**
+   * Hide the day/time line — the timeline supplies its own hour heading.
+   * `"below-lg"` hides it on the phone only: the desktop lane's hero sits
+   * beside whatever hour is passing and has to carry its own start time.
+   */
+  hideWhen?: boolean | "below-lg";
   /**
    * Already over — dims the poster, mutes the title and shows the `endedLabel`
    * chip. Never row-level opacity, which composites the text below AA. Same
@@ -111,6 +129,7 @@ export const EventCard = memo(function EventCard({
   formatters,
   posterAspect = "4/3",
   emphasis,
+  density = "card",
   badge,
   tagLabel,
   tags,
@@ -129,7 +148,10 @@ export const EventCard = memo(function EventCard({
 }: EventCardProps) {
   const [imgError, setImgError] = useState(false);
   const showEnded = isEnded && !!endedLabel;
-  const time = hideWhen ? "" : formatters.time(event.starts_at);
+  // `"below-lg"` still renders the line (hidden by CSS on the phone), so the
+  // time is formatted whenever the line can show anywhere.
+  const time = hideWhen === true ? "" : formatters.time(event.starts_at);
+  const isRowLg = density === "row-lg";
 
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
@@ -146,6 +168,8 @@ export const EventCard = memo(function EventCard({
             : posterAspect === "4/5"
               ? "aspect-[4/5]"
               : "aspect-[4/3]",
+          // The compact row's poster from `lg`: 64px, portrait, tighter radius.
+          isRowLg && "lg:aspect-[4/5] lg:w-16 lg:shrink-0 lg:rounded-[10px]",
         )}
       >
         {showPoster ? (
@@ -164,8 +188,14 @@ export const EventCard = memo(function EventCard({
         )}
 
         {/* Top overlay row — hype badge left, entry fee right. The empty span
-            keeps the fee pill right-aligned when there is no badge. */}
-        <div className="absolute inset-x-2 top-2 flex items-start justify-between gap-2">
+            keeps the fee pill right-aligned when there is no badge. Off on a
+            64px row poster, where the fee moves to the tags row. */}
+        <div
+          className={cn(
+            "absolute inset-x-2 top-2 flex items-start justify-between gap-2",
+            isRowLg && "lg:hidden",
+          )}
+        >
           {badge ? (
             <span className={cn(PILL_BASE, "bg-black/55 text-white")}>
               {badge}
@@ -187,7 +217,12 @@ export const EventCard = memo(function EventCard({
         </div>
 
         {tagLabel && (
-          <div className="absolute inset-x-2 bottom-2 flex gap-1">
+          <div
+            className={cn(
+              "absolute inset-x-2 bottom-2 flex gap-1",
+              isRowLg && "lg:hidden",
+            )}
+          >
             <span className={cn(PILL_BASE, "bg-black/55 text-white")}>
               {tagLabel}
             </span>
@@ -195,6 +230,8 @@ export const EventCard = memo(function EventCard({
         )}
       </div>
 
+      {/* The text column — a wrapper so `row-lg` can lay it beside the poster. */}
+      <div className={cn("flex min-w-0 flex-col", isRowLg && "lg:flex-1")}>
       {/* NEVER CLAMPED, in any variant. The title is the one thing a card
           exists to say, and "Movie Night: Futni m…" says none of it — the
           truncated form was the reported defect. It wraps to as many lines as
@@ -205,9 +242,11 @@ export const EventCard = memo(function EventCard({
       <h3
         className={cn(
           "mt-2.5 leading-[1.35]",
-          emphasis
+          emphasis === true
             ? "text-lg font-bold tracking-[-0.02em]"
             : "text-sm font-semibold",
+          emphasis === "lg" && "lg:text-lg lg:font-bold lg:tracking-[-0.02em]",
+          isRowLg && "lg:mt-0 lg:text-[13.5px]",
           isEnded && "text-muted-foreground",
         )}
       >
@@ -219,8 +258,13 @@ export const EventCard = memo(function EventCard({
         <span className="truncate">{venue}</span>
       </div>
 
-      {!hideWhen && (
-        <div className="mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground">
+      {hideWhen !== true && (
+        <div
+          className={cn(
+            "mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground",
+            hideWhen === "below-lg" && "hidden lg:flex",
+          )}
+        >
           <span>{dayLabel ?? formatters.day(event.starts_at)}</span>
           {/* An empty time is "hour unknown" (see `EventFormatters.time`): the
               day stands alone, no dangling separator. Consumers used to have
@@ -244,13 +288,21 @@ export const EventCard = memo(function EventCard({
         </div>
       )}
 
-      {tags && tags.length > 0 && (
+      {/* The row look carries the fee as a chip here, where the compact row
+          puts it — the poster is too small for an overlay pill. */}
+      {((tags && tags.length > 0) || (isRowLg && fee.kind === "free")) && (
         <TagGroup className="mt-1.5">
-          {tags.map((tag) => (
+          {tags?.map((tag) => (
             <Tag key={tag} size="sm">
               {tag}
             </Tag>
           ))}
+          {isRowLg && fee.kind === "free" && (
+            <Tag size="sm" variant="success" className="hidden font-bold lg:inline-flex">
+              <Gift className="h-3 w-3" aria-hidden />
+              {labels.free}
+            </Tag>
+          )}
         </TagGroup>
       )}
 
@@ -268,13 +320,18 @@ export const EventCard = memo(function EventCard({
           </Tag>
         </div>
       )}
+      </div>
     </>
   );
 
   const rootClasses = cn(
     "flex min-w-0 flex-col text-left",
+    // The compact row from `lg`: poster beside text, the row's own padding
+    // and negative gutter so the hover wash bleeds like `EventCompactRow`'s.
+    isRowLg && "lg:-mx-2.5 lg:flex-row lg:items-start lg:gap-[11px] lg:rounded-lg lg:px-2.5 lg:py-2",
     (href || onClick) &&
       "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
+    (href || onClick) && isRowLg && "lg:hover:bg-foreground/5",
     className,
   );
 

package/src/components/event-day-header.tsx

@@ -47,10 +47,12 @@ export type EventDayHeaderProps = {
    */
   action?: React.ReactNode;
   /**
-   * Larger desktop scale: 58px day number, 18px weekday, 12.5px meta,
-   * against the mobile 40/15/11.5.
+   * `sm`: the phone scale (30px day number, 15px weekday, 11.5px meta).
+   * `default`: the desktop scale (58 / 18 / 12.5). `responsive`: `sm` below
+   * `lg` and `default` from it, in one node — for a server render that
+   * cannot know the viewport.
    */
-  size?: "sm" | "default";
+  size?: "sm" | "default" | "responsive";
   href?: string;
   linkComponent?: React.ComponentType<EventDayHeaderLinkProps>;
   onClick?: () => void;
@@ -70,6 +72,9 @@ export function EventDayHeader({
 }: EventDayHeaderProps) {
   const isInteractive = !!href || !!onClick;
   const large = size === "default";
+  // `responsive` is the phone scale with every `default` class as an `lg:`
+  // twin — one node for a server-rendered timeline.
+  const responsive = size === "responsive";
 
   const body = (
     <>
@@ -78,21 +83,27 @@ export function EventDayHeader({
           "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
           // `sm` is the phone scale: 30px, the design's app day head. 40px
           // was a page-scale number that took a third of a 390px row.
-          large ? "text-[58px]" : "text-[30px] leading-[0.86]"
+          large ? "text-[58px]" : "text-[30px] leading-[0.86]",
+          responsive && "lg:text-[58px] lg:leading-[0.82]"
         )}
       >
         {dayNumber}
       </div>
-      <div className={large ? "pb-1" : "pb-0.5"}>
+      <div className={cn(large ? "pb-1" : "pb-0.5", responsive && "lg:pb-1")}>
         <div
-          className={cn("font-extrabold tracking-[-0.015em]", large ? "text-lg" : "text-[15px]")}
+          className={cn(
+            "font-extrabold tracking-[-0.015em]",
+            large ? "text-lg" : "text-[15px]",
+            responsive && "lg:text-lg"
+          )}
         >
           {weekday}
         </div>
         <div
           className={cn(
             "mt-0.5 text-muted-foreground",
-            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]"
+            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]",
+            responsive && "lg:whitespace-nowrap lg:text-[12.5px]"
           )}
         >
           {meta}
@@ -132,6 +143,7 @@ export function EventDayHeader({
       className={cn(
         "relative flex w-full items-end gap-3 pb-3 pt-[18px]",
         large && "gap-[18px] pb-4",
+        responsive && "lg:gap-[18px] lg:pb-4",
         className
       )}
     >

package/src/components/event-door.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventDoor, EventDoorSkeleton } from "./event-door";
+import { SnapRail } from "./snap-rail";
+
+function photo(label: string, fill: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><rect width="320" height="320" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="22" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+const DOORS = [
+  { name: "Concerts", fill: "#7a5c46" },
+  { name: "Parties", fill: "#4a6a5c" },
+  { name: "Live music", fill: "#6a5c8a" },
+  { name: "Stand-up", fill: "#8a6a4a" },
+  { name: "Theatre", fill: "#4a5a7a" },
+  { name: "Workshops", fill: "#5a7a4a" },
+  { name: "Markets", fill: "#7a4a5a" },
+  { name: "Film", fill: "#4a4a4a" },
+];
+
+const meta: Meta<typeof EventDoor> = {
+  title: "Events/EventDoor",
+  component: EventDoor,
+  tags: ["autodocs"],
+  args: {
+    name: "Concerts",
+    href: "#concerts",
+    imageSrc: photo("stage", "#7a5c46"),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[104px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A category's entry point: a square photograph of the kind of night, a scrim, the name inside the image, no count. The 1:1 shape with the name inside is what says door rather than event. Always an anchor.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventDoor>;
+
+export const Default: Story = {};
+
+/** No image — the poster fallback carries the tile. */
+export const NoImage: Story = {
+  args: { imageSrc: undefined },
+};
+
+/** The hub's door row on a phone: a snap rail of squares, three and a third visible. */
+export const Row: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[375px] px-4" style={{ "--page-gutter": "1rem" } as React.CSSProperties}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <nav aria-label="Browse by kind">
+      <SnapRail itemWidth="xs" gap="sm" bleed="page">
+        {DOORS.map((door) => (
+          <EventDoor
+            key={door.name}
+            name={door.name}
+            href={`#${door.name}`}
+            imageSrc={photo(door.name.toLowerCase(), door.fill)}
+          />
+        ))}
+      </SnapRail>
+    </nav>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => <EventDoorSkeleton />,
+};

package/src/components/event-door.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventDoor — a square tile that is a category's entry point: a photograph of
+ * the KIND of night (a stage, a dance floor, a terrace), a scrim, the name.
+ *
+ * A door and an event row must not look alike. `CategoryDeck` fans four event
+ * posters and prints a count, which reads as "these four events"; a card with
+ * a single event's poster reads as "tap = that event" and changes daily. The
+ * 1:1 shape with the name INSIDE the image is what says "door, not event", and
+ * it carries no count — a count is a claim about scale the hub's figures
+ * already make, and on a door it competes with the name.
+ *
+ * Always an anchor: a door with no destination is not a door, so `href` is
+ * required. The scrim is a gradient over a photograph, which is mode-
+ * independent — the same measured treatment `DoorwayTiles` uses.
+ */
+
+export type EventDoorLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventDoorLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventDoorProps = {
+  /** The category's name — the anchor's accessible name and the tile's label. */
+  name: string;
+  href: string;
+  imageSrc?: string;
+  /** Rendered when `imageSrc` is absent or fails. Defaults to `<EventPosterFallback />`. */
+  fallback?: React.ReactNode;
+  linkComponent?: React.ComponentType<EventDoorLinkProps>;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  className?: string;
+};
+
+export function EventDoor({
+  name,
+  href,
+  imageSrc,
+  fallback = <EventPosterFallback />,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: EventDoorProps) {
+  const [failed, setFailed] = useState(false);
+  const showImage = !!imageSrc && !failed;
+
+  return (
+    <LinkComponent
+      href={href}
+      onClick={onClick}
+      className={cn(
+        "group relative block aspect-square overflow-hidden rounded-xl bg-muted",
+        "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+    >
+      {showImage ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={imageSrc}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none"
+          onError={() => setFailed(true)}
+        />
+      ) : (
+        fallback
+      )}
+      <span
+        aria-hidden
+        className="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black/65 via-black/45 to-transparent"
+      />
+      <span className="absolute inset-x-2 bottom-2 line-clamp-2 text-[12.5px] font-bold leading-[1.2] tracking-[-0.01em] text-white">
+        {name}
+      </span>
+    </LinkComponent>
+  );
+}
+
+export function EventDoorSkeleton({ className }: { className?: string }) {
+  return <Skeleton className={cn("aspect-square w-full rounded-xl", className)} />;
+}

package/src/components/event-hub-hero.tsx

@@ -47,6 +47,12 @@ export type EventHubHeroProps = {
   statsLabel?: string;
   /** The right-column slot — the poster stack in the source design. */
   aside?: React.ReactNode;
+  /**
+   * The text column's last row, under the figures — the hub's tonight state
+   * strip. The figures say scale; this says what is on right now, and it is
+   * the one thing on the first screen a reader can tap into the timeline.
+   */
+  footer?: React.ReactNode;
   className?: string;
 };
 
@@ -57,12 +63,16 @@ export function EventHubHero({
   stats,
   statsLabel,
   aside,
+  footer,
   className,
 }: EventHubHeroProps) {
   return (
     <div
       className={cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 16px between the text column and the aside on a phone: with a
+        // tappable poster stack the aside is content, not decoration, and
+        // gets the within-section rhythm rather than a section gap.
+        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
         className
       )}
     >
@@ -131,6 +141,7 @@ export function EventHubHero({
             );
           })}
         </div>
+        {footer && <div className="order-4 pt-1.5 lg:order-none lg:pt-2">{footer}</div>}
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}
@@ -141,15 +152,17 @@ export function EventHubHero({
 export type EventHubHeroSkeletonProps = {
   /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
   aside?: React.ReactNode;
+  /** Reserves the `footer` row — the tonight strip's 52px. */
+  footer?: boolean;
   className?: string;
 };
 
-export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps) {
+export function EventHubHeroSkeleton({ aside, footer, className }: EventHubHeroSkeletonProps) {
   return (
     <div
       aria-hidden="true"
       className={cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
         className
       )}
     >
@@ -174,6 +187,11 @@ export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonP
             </div>
           ))}
         </div>
+        {footer && (
+          <div className="order-4 pt-1.5 lg:order-none lg:pt-2">
+            <Skeleton className="h-[52px] w-full rounded-[14px]" />
+          </div>
+        )}
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}

package/src/components/event-tonight-strip.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventTonightStrip, EventTonightStripSkeleton } from "./event-tonight-strip";
+
+const meta: Meta<typeof EventTonightStrip> = {
+  title: "Events/EventTonightStrip",
+  component: EventTonightStrip,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[343px] bg-surface-2 p-4 md:w-[520px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's state line under the hero: what is on right now, what is later tonight, and one tap into the timeline. Copy is caller-composed and carries only absolute facts (counts, wall-clock times) so an ISR snapshot can never say something false. Tone `none` renders a non-interactive status line.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventTonightStrip>;
+
+export const Live: Story = {
+  args: {
+    tone: "live",
+    lead: "3 live now",
+    details: ["12 more tonight", "next at 20:00"],
+    actionLabel: "Open tonight in the schedule",
+    href: "#events-day-2026-09-17",
+  },
+};
+
+export const Tonight: Story = {
+  args: {
+    tone: "tonight",
+    lead: "9 tonight",
+    details: ["first at 19:00"],
+    actionLabel: "Open tonight in the schedule",
+    href: "#events-day-2026-09-17",
+  },
+};
+
+export const Quiet: Story = {
+  args: {
+    tone: "quiet",
+    lead: "Nothing on tonight",
+    details: ["next Fri 20:00", "7 events"],
+    actionLabel: "Open Friday in the schedule",
+    href: "#events-day-2026-09-19",
+  },
+};
+
+export const Over: Story = {
+  args: {
+    tone: "quiet",
+    lead: "Tonight's events are over",
+    details: ["next tomorrow 18:00", "4 events"],
+    actionLabel: "Open tomorrow in the schedule",
+    href: "#events-day-2026-09-18",
+  },
+};
+
+export const None: Story = {
+  args: {
+    tone: "none",
+    lead: "Nothing scheduled in the next 14 days",
+    details: ["Check back soon"],
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <EventTonightStripSkeleton />,
+};

package/src/components/event-tonight-strip.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EventTonightStrip } from "./event-tonight-strip";
+import { EventDoor } from "./event-door";
+import { PosterStack } from "./poster-stack";
+
+describe("EventTonightStrip", () => {
+  it("is an anchor with the lead, the details and the action as its name", () => {
+    render(
+      <EventTonightStrip
+        tone="live"
+        lead="3 live now"
+        details={["12 more tonight", "next at 20:00"]}
+        actionLabel="Open tonight in the schedule"
+        href="/events/schedule#events-day-2026-09-17"
+      />
+    );
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "/events/schedule#events-day-2026-09-17");
+    expect(link).toHaveAccessibleName(
+      "3 live now 12 more tonight next at 20:00. Open tonight in the schedule"
+    );
+  });
+
+  it("renders a status line, not a link, when there is nothing to open", () => {
+    render(<EventTonightStrip tone="none" lead="Nothing scheduled" />);
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(screen.getByRole("status")).toHaveTextContent("Nothing scheduled");
+  });
+});
+
+describe("EventDoor", () => {
+  it("is an anchor named by the category, with the image decorative", () => {
+    render(<EventDoor name="Concerts" href="/events/concerts" imageSrc="/stage.webp" />);
+    const link = screen.getByRole("link", { name: "Concerts" });
+    expect(link).toHaveAttribute("href", "/events/concerts");
+    expect(screen.getByRole("presentation", { hidden: true })).toHaveAttribute("alt", "");
+  });
+});
+
+describe("PosterStack", () => {
+  it("makes a captioned poster an anchor named by its caption", () => {
+    // The float's reduced-motion check reads matchMedia, which jsdom lacks.
+    window.matchMedia = () => ({ matches: true }) as MediaQueryList;
+    render(
+      <PosterStack
+        posters={[
+          { src: "/a.jpg", alt: "A poster", caption: "Subcarpați live", href: "/events/e/a" },
+          { src: "/b.jpg", alt: "B poster" },
+        ]}
+      />
+    );
+    const link = screen.getByRole("link", { name: "Subcarpați live" });
+    expect(link).toHaveAttribute("href", "/events/e/a");
+    // The uncaptioned poster stays decorative: no anchor, its own alt.
+    expect(screen.getAllByRole("link")).toHaveLength(1);
+    expect(screen.getByAltText("B poster")).toBeInTheDocument();
+  });
+});