@bearmenu/ui 0.8.4 → 0.8.7

package/src/components/poster-stack.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * PosterStack — three overlapping, gently rotated posters that float, the
+ * hub hero's aside slot in the source design.
+ *
+ * Two motion rules, both mandatory:
+ *   1. Stops entirely under `prefers-reduced-motion: reduce` — enforced via
+ *      an injected `<style>` media query rather than relying on Tailwind's
+ *      `motion-reduce:` variant, because the float is a custom `@keyframes`
+ *      animation Tailwind cannot express, and only a `!important` CSS rule
+ *      reliably beats the element's own inline `animation` style.
+ *   2. Pauses while the stack is scrolled off-screen — an IntersectionObserver
+ *      toggles `animation-play-state` on the three poster nodes so nothing
+ *      spends a paint budget while it isn't visible. Skipped entirely when
+ *      reduced motion is on, since nothing is animating to pause.
+ */
+
+export type PosterStackPoster = {
+  /** Absent renders a neutral placeholder block instead of an image. */
+  src?: string;
+  alt: string;
+};
+
+export type PosterStackProps = {
+  /** Rendered in order; only the first three are shown. */
+  posters: PosterStackPoster[];
+  className?: string;
+};
+
+const POSTER_STACK_OBSERVER_ROOT_MARGIN = "200px";
+
+const POSTER_STACK_ANIMATION_STYLE = `
+@keyframes ds-poster-stack-float-1 { to { transform: rotate(-5deg) translateY(-16px); } }
+@keyframes ds-poster-stack-float-2 { to { transform: rotate(3deg) translateY(14px); } }
+@keyframes ds-poster-stack-float-3 { to { transform: rotate(6deg) translateY(-11px); } }
+@media (prefers-reduced-motion: reduce) {
+  [data-ds-poster-stack-item] { animation: none !important; }
+}
+`;
+
+type PosterSlotConfig = {
+  positionClassName: string;
+  restTransform: string;
+  animationName: string;
+  animationDurationMs: number;
+  zIndexClassName?: string;
+};
+
+const POSTER_SLOTS: PosterSlotConfig[] = [
+  {
+    positionClassName: "left-[6px] top-[34px] w-[120px] md:left-0 md:top-[52px] md:w-[196px]",
+    restTransform: "rotate(-5deg)",
+    animationName: "ds-poster-stack-float-1",
+    animationDurationMs: 9000,
+  },
+  {
+    positionClassName: "left-[110px] top-0 w-[140px] md:left-[168px] md:w-[232px]",
+    restTransform: "rotate(3deg)",
+    animationName: "ds-poster-stack-float-2",
+    animationDurationMs: 11000,
+    zIndexClassName: "z-[3]",
+  },
+  {
+    positionClassName: "left-[238px] top-[58px] w-[120px] md:left-[378px] md:top-24 md:w-[196px]",
+    restTransform: "rotate(6deg)",
+    animationName: "ds-poster-stack-float-3",
+    animationDurationMs: 10000,
+  },
+];
+
+/** A warm, drop-shadowed decorative float — not a content surface, so the
+ * shadow is an art-directed literal rather than a `--shadow-card` token. */
+const POSTER_SHADOW = "0 22px 50px oklch(0.3 0.02 60 / 0.24)";
+
+export function PosterStack({ posters, className }: PosterStackProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const posterRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const [failedIndices, setFailedIndices] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const playState = entry.isIntersecting ? "running" : "paused";
+        for (const poster of posterRefs.current) {
+          if (poster) poster.style.animationPlayState = playState;
+        }
+      },
+      { rootMargin: POSTER_STACK_OBSERVER_ROOT_MARGIN }
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
+
+  return (
+    <div ref={containerRef} className={cn("relative h-[250px] md:h-[400px]", className)}>
+      <style>{POSTER_STACK_ANIMATION_STYLE}</style>
+
+      {visiblePosters.map((poster, index) => {
+        const slot = POSTER_SLOTS[index];
+        const showPoster = !!poster.src && !failedIndices.has(index);
+        return (
+          <div
+            key={poster.alt || index}
+            ref={(node) => {
+              posterRefs.current[index] = node;
+            }}
+            data-ds-poster-stack-item
+            className={cn(
+              "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
+              slot.positionClassName,
+              slot.zIndexClassName
+            )}
+            style={{
+              transform: slot.restTransform,
+              boxShadow: POSTER_SHADOW,
+              animationName: slot.animationName,
+              animationDuration: `${slot.animationDurationMs}ms`,
+              animationTimingFunction: "ease-in-out",
+              animationIterationCount: "infinite",
+              animationDirection: "alternate",
+            }}
+          >
+            {showPoster && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={poster.src}
+                alt={poster.alt}
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+                onError={() =>
+                  setFailedIndices((current) => new Set(current).add(index))
+                }
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/poster-tape.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PosterTape, type PosterTapeItem } from "./poster-tape";
+
+const items: PosterTapeItem[] = [
+  { id: "1", title: "Warehouse Rave", meta: "SAT 20:00" },
+  { id: "2", title: "Jazz on the Rooftop", meta: "FRI 19:30" },
+  { id: "3", title: "Open Mic Night", meta: "THU 21:00" },
+  { id: "4", title: "Street Food Market", meta: "SUN 12:00" },
+  { id: "5", title: "Vinyl & Vermouth", meta: "WED 18:00" },
+  { id: "6", title: "Psihotrop — From the Beginning to Infinity", meta: "SAT 22:00" },
+];
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof PosterTape> = {
+  title: "Events/PosterTape",
+  component: PosterTape,
+  tags: ["autodocs"],
+  args: { items },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The closing tape: small 4:5 posters drifting past at a slower, quieter speed than the featured rail. Built on `<DriftRail>` — same seamless loop and pause mechanics, just smaller items and a 60s default.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PosterTape>;
+
+/** No poster URLs supplied — every tile falls back to `<EventPosterFallback>`, same as `<EventCard>`. */
+export const Default: Story = {};
+
+export const Linked: Story = {
+  args: {
+    items: items.map((item) => ({ ...item, href: `/events/${item.id}` })),
+  },
+};
+
+export const Faster: Story = {
+  args: { durationSeconds: 24 },
+};
+
+/**
+ * Titles wrap in full at the tape's 132px width. This is the surface the
+ * report came from — "Movie Night: Futni m…", "Juventus vs AC Milan…" — and
+ * `<DriftRail>` lays its items out `items-stretch`, so a wrapped title makes
+ * the tape taller without breaking the seamless loop or the poster row's
+ * alignment.
+ */
+export const LongTitles: Story = {
+  args: {
+    items: [
+      { id: "1", title: "Movie Night: Futni må ikke være så vanskelig", meta: "SAT 20:00" },
+      { id: "2", title: "Juventus vs AC Milan — Serie A, live on the big screen", meta: "SUN 21:45" },
+      { id: "3", title: "Afterwork Karaoke at the Old Brewery Courtyard", meta: "THU 18:30" },
+      { id: "4", title: "Open Mic", meta: "WED 21:00" },
+    ],
+  },
+};

package/src/components/poster-tape.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/utils";
+import { DriftRail } from "./drift-rail";
+import { EventPosterFallback } from "./event-poster-fallback";
+
+/**
+ * PosterTape — the closing marquee: small 4:5 posters drifting past at a
+ * slower, quieter speed than `<DriftRail>`'s default. Built on top of
+ * `<DriftRail>` rather than re-implementing the loop: both share the exact
+ * same seam-free-duplication and pause mechanics (`IntersectionObserver` +
+ * `prefers-reduced-motion`), and `<PosterTape>` only owns the item markup and
+ * a slower default speed.
+ */
+export type PosterTapeItem = {
+  id: string;
+  title: string;
+  /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
+  meta: string;
+  posterUrl?: string;
+  href?: string;
+  /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: ReactNode;
+};
+
+export type PosterTapeLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: PosterTapeLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type PosterTapeProps = {
+  items: PosterTapeItem[];
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<PosterTapeLinkProps>;
+  durationSeconds?: number;
+  className?: string;
+};
+
+const POSTER_TAPE_DEFAULT_DURATION_SECONDS = 60;
+
+function PosterTapeItemCard({
+  item,
+  LinkComponent,
+}: {
+  item: PosterTapeItem;
+  LinkComponent: React.ComponentType<PosterTapeLinkProps>;
+}) {
+  const [imgError, setImgError] = useState(false);
+  const showPoster = !!item.posterUrl && !imgError;
+
+  const body = (
+    <>
+      <div className="aspect-[4/5] w-full overflow-hidden rounded-xl bg-muted">
+        {showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={item.posterUrl}
+            alt={item.title}
+            title={item.title}
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          (item.fallback ?? <EventPosterFallback />)
+        )}
+      </div>
+      {/* The tape is 132px wide, which is exactly why the title used to read
+          "Movie Night: Futni m…". It wraps in full instead. `<DriftRail>` lays
+          its items out `items-stretch`, so a taller card only makes the tape
+          taller — the posters stay on one line and the loop's duplicate pass
+          is still pixel-identical, because both passes render the same items. */}
+      <div className="mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]">
+        {item.title}
+      </div>
+      <div className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
+        {item.meta}
+      </div>
+    </>
+  );
+
+  const itemClasses = "block w-[132px] shrink-0";
+
+  if (item.href) {
+    return (
+      <LinkComponent
+        href={item.href}
+        className={cn(
+          itemClasses,
+          "rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        )}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  return <div className={itemClasses}>{body}</div>;
+}
+
+export function PosterTape({
+  items,
+  linkComponent: LinkComponent = DefaultLink,
+  durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
+  className,
+}: PosterTapeProps) {
+  return (
+    <DriftRail durationSeconds={durationSeconds} className={className}>
+      {items.map((item) => (
+        <PosterTapeItemCard key={item.id} item={item} LinkComponent={LinkComponent} />
+      ))}
+    </DriftRail>
+  );
+}

package/src/components/poster-wall.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PosterWall, PosterWallSkeleton } from "./poster-wall";
+
+function tile(color: string) {
+  return {
+    src:
+      "data:image/svg+xml;utf8," +
+      encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${color}"/></svg>`),
+  };
+}
+
+const TILE_COLORS = ["#7c5a3a", "#5a4a3a", "#8a6a4a", "#3a2a1a", "#6a4a2a", "#4a3a2a"];
+
+function tiles(count: number) {
+  return Array.from({ length: count }, (_, index) => tile(TILE_COLORS[index % TILE_COLORS.length]));
+}
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof PosterWall> = {
+  title: "Events/PosterWall",
+  component: PosterWall,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The hub's masthead — a dark tiled photo grid behind a sweeping light and a veil. `children` is a slot; the wall only owns the chrome and the container sizing/alignment for `variant`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PosterWall>;
+
+export const Default: Story = {
+  args: {
+    tiles: tiles(48),
+    children: (
+      <>
+        <div className="font-mono text-xs uppercase tracking-[0.2em] text-white/70">
+          Events this weekend
+        </div>
+        <h1 className="max-w-md text-4xl font-black tracking-[-0.02em]">
+          Where the city goes tonight
+        </h1>
+      </>
+    ),
+  },
+};
+
+/** The bottom-aligned mobile treatment: shorter wall, top-fading veil, fewer/larger tiles. */
+export const Compact: Story = {
+  args: {
+    variant: "compact",
+    tiles: tiles(36),
+    children: (
+      <>
+        <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-white/70">
+          This weekend
+        </div>
+        <h1 className="text-2xl font-black tracking-[-0.02em]">Where the city goes tonight</h1>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div className="mx-auto w-[375px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No tiles supplied — every slot falls back to the striped placeholder. */
+export const NoTiles: Story = {
+  args: { children: <h1 className="text-3xl font-black">No poster data yet</h1> },
+};
+
+/** The tile grid at rest — no sweeping light in the loading state. */
+export const Skeleton: Story = {
+  render: () => <PosterWallSkeleton />,
+};
+
+/** The compact mobile masthead's loading state. */
+export const SkeletonCompact: Story = {
+  render: () => (
+    <div className="mx-auto w-[375px]">
+      <PosterWallSkeleton variant="compact" />
+    </div>
+  ),
+};

package/src/components/poster-wall.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * PosterWall — the hub's full-bleed masthead: a dark tiled photo grid behind a
+ * sweeping light and a veil, with the caller's content laid over it.
+ *
+ * The wall is deliberately dark and un-themed (fixed dark tokens, not
+ * `background`/`foreground`) in both light and dark mode — it's a photo
+ * backdrop, the same reasoning `EventCard`'s black overlay pills use over a
+ * poster image, not a themed surface.
+ *
+ * `children` is a slot: PosterWall only owns the tiles/light/veil chrome and
+ * the container's size, alignment and padding for the given `variant`. All
+ * overlay typography belongs to the caller.
+ *
+ * The sweep is a genuine `@keyframes` animation (not Framer Motion) because
+ * its exact timing is part of the design spec and it needs to keep running
+ * indefinitely at zero React cost — the keyframes are scoped to this file via
+ * a `<style>` tag since editing the DS's global stylesheet is out of scope
+ * for this component.
+ */
+
+const POSTER_WALL_DESKTOP_TILE_COUNT = 48;
+const POSTER_WALL_COMPACT_TILE_COUNT = 36;
+const POSTER_WALL_SWEEP_KEYFRAMES_ID = "ds-poster-wall-sweep-keyframes";
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = () => setReduced(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  return reduced;
+}
+
+function useInViewport<T extends Element>(): [React.RefObject<T | null>, boolean] {
+  const ref = React.useRef<T | null>(null);
+  const [inView, setInView] = React.useState(true);
+
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      threshold: 0,
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return [ref, inView];
+}
+
+export type PosterWallTile = {
+  src?: string;
+};
+
+export type PosterWallProps = {
+  /** Background tiles. Desktop renders 48, `compact` renders 36 — shorter arrays are padded with placeholders. */
+  tiles?: PosterWallTile[];
+  /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
+  variant?: "default" | "compact";
+  /** The overlay content — fully caller-composed. */
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export function PosterWall({ tiles, variant = "default", children, className }: PosterWallProps) {
+  const isCompact = variant === "compact";
+  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const slots = Array.from({ length: tileCount }, (_, index): PosterWallTile => tiles?.[index] ?? {});
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [wallRef, inView] = useInViewport<HTMLDivElement>();
+  const isSweepPaused = prefersReducedMotion || !inView;
+
+  return (
+    <div
+      ref={wallRef}
+      className={cn(
+        "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
+        isCompact ? "h-[330px]" : "h-[420px]",
+        className
+      )}
+    >
+      <style>{`
+        @keyframes ${POSTER_WALL_SWEEP_KEYFRAMES_ID} {
+          0% { transform: translateX(-30%); }
+          100% { transform: translateX(30%); }
+        }
+      `}</style>
+
+      <div
+        className={cn(
+          "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+          isCompact ? "grid-cols-6" : "grid-cols-12"
+        )}
+        aria-hidden
+      >
+        {slots.map((tile, index) =>
+          tile.src ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              key={index}
+              src={tile.src}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div
+              key={index}
+              className="h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]"
+            />
+          )
+        )}
+      </div>
+
+      {/* Reduced motion and off-screen both resolve to "paused" via JS, not a
+          `motion-reduce:` class — the animation properties are inline styles
+          (so `animation-duration` can stay a plain string), and an inline
+          style always outranks a class on the same property. */}
+      <div
+        className="absolute -inset-[20%]"
+        style={{
+          background:
+            "radial-gradient(circle at 30% 50%, oklch(1 0 0 / 0.34) 0%, transparent 42%)",
+          animationName: POSTER_WALL_SWEEP_KEYFRAMES_ID,
+          animationDuration: "18s",
+          animationTimingFunction: "linear",
+          animationIterationCount: "infinite",
+          animationPlayState: isSweepPaused ? "paused" : "running",
+        }}
+        aria-hidden
+      />
+
+      <div
+        className="absolute inset-0"
+        style={{
+          background: isCompact
+            ? "linear-gradient(to top, oklch(0.2 0.01 60 / 0.93) 0%, oklch(0.2 0.01 60 / 0.7) 55%, oklch(0.2 0.01 60 / 0.35) 100%)"
+            : "linear-gradient(90deg, oklch(0.2 0.01 60 / 0.88) 0%, oklch(0.2 0.01 60 / 0.55) 55%, oklch(0.2 0.01 60 / 0.2) 100%)",
+        }}
+        aria-hidden
+      />
+
+      <div
+        className={cn(
+          "relative flex h-full min-w-0 flex-col text-white",
+          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type PosterWallSkeletonProps = {
+  /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
+  variant?: "default" | "compact";
+  className?: string;
+};
+
+/** The tile grid at rest — the sweeping light never renders in the loading state. */
+export function PosterWallSkeleton({ variant = "default", className }: PosterWallSkeletonProps) {
+  const isCompact = variant === "compact";
+  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
+        isCompact ? "h-[330px]" : "h-[420px]",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+          isCompact ? "grid-cols-6" : "grid-cols-12"
+        )}
+      >
+        {Array.from({ length: tileCount }, (_, index) => (
+          <Skeleton key={index} className="h-full w-full rounded-none bg-white/10" />
+        ))}
+      </div>
+
+      <div
+        className="absolute inset-0"
+        style={{
+          background: isCompact
+            ? "linear-gradient(to top, oklch(0.2 0.01 60 / 0.93) 0%, oklch(0.2 0.01 60 / 0.7) 55%, oklch(0.2 0.01 60 / 0.35) 100%)"
+            : "linear-gradient(90deg, oklch(0.2 0.01 60 / 0.88) 0%, oklch(0.2 0.01 60 / 0.55) 55%, oklch(0.2 0.01 60 / 0.2) 100%)",
+        }}
+      />
+
+      <div
+        className={cn(
+          "relative flex h-full min-w-0 flex-col",
+          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+        )}
+      >
+        <Skeleton className={cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52")} />
+        <Skeleton className={cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")} />
+      </div>
+    </div>
+  );
+}