@bearmenu/ui 0.8.17 → 0.8.18

package/dist/chunk-NSNEANOQ.js

@@ -1,104 +0,0 @@
-import { Separator } from './chunk-NWZGSLPU.js';
-import { Skeleton } from './chunk-XBBEX4SF.js';
-import { cn } from './chunk-FEK5XGZW.js';
-import { Radio } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
-var TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
-function TimelineHourPuck({
-  time,
-  isLive,
-  liveLabel,
-  variant = "station",
-  className
-}) {
-  const isChip = variant === "chip";
-  return /* @__PURE__ */ jsxs("span", { className: cn("relative flex justify-center", className), children: [
-    isLive && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes ${LIVE_PUCK_PULSE_CLASS} {
-            0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 40%, transparent); }
-            50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 0%, transparent); }
-          }
-          .${LIVE_PUCK_PULSE_CLASS} {
-            animation: ${LIVE_PUCK_PULSE_CLASS} 2.4s ease-in-out infinite;
-          }
-          @media (prefers-reduced-motion: reduce) {
-            .${LIVE_PUCK_PULSE_CLASS} { animation: none; }
-          }
-        ` }),
-    /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "whitespace-nowrap font-mono tabular-nums",
-          isChip ? cn(
-            "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] px-1 text-[12px] font-medium",
-            isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
-          ) : cn(
-            "rounded-[7px] border bg-background px-[7px] py-[3px] text-[12.5px] font-medium",
-            isLive ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS) : "border-border text-foreground"
-          )
-        ),
-        children: [
-          isChip && isLive && /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-          time
-        ]
-      }
-    ),
-    isLive && !!liveLabel && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          isChip ? "sr-only" : cn(
-            "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
-            "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
-          )
-        ),
-        children: liveLabel
-      }
-    )
-  ] });
-}
-function TimelineBand({ lane, children, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-stretch", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-[var(--timeline-lane)] shrink-0", children: lane }),
-    /* @__PURE__ */ jsx("div", { className: "relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children })
-  ] });
-}
-function sk(width, height, radiusPx = 12) {
-  return /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      style: { width, height: `${height}px`, borderRadius: `${radiusPx}px` }
-    }
-  );
-}
-function TimelineBandSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-stretch", className), "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-[var(--timeline-lane)] shrink-0 flex-col gap-3", children: [
-      sk("100%", 297, 12),
-      sk("70%", 18),
-      sk("45%", 13)
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-[10px]", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        sk("100%", 190, 12),
-        sk("85%", 15),
-        sk("55%", 12)
-      ] }, index)) }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-[11px] py-2", children: [
-        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-[34px] w-[34px] shrink-0 rounded-md" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-          sk("60%", 13),
-          sk("40%", 11.5)
-        ] })
-      ] }, index)) })
-    ] })
-  ] });
-}
-
-export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck };

package/dist/components/hour-band.d.ts

@@ -1,66 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-/**
- * HourBand — one hour on the timeline's axis, with that hour's events beside it.
- *
- * The mobile timeline is an app list, not a page: a 58px gutter carrying a
- * filled hour chip with a hairline dropping from beneath it, and the hour's
- * rows to the right, separated by hairlines of their own. The rows carry no
- * timestamp — this band IS the timestamp, which is why `EventCard` has
- * `hideWhen` and `EventCompactRow` has `hideTime`.
- *
- * The chip is the shared `TimelineHourPuck` in its `chip` variant, so the
- * desktop spine's station and this gutter's label are one object with two
- * looks rather than two objects that drift. The hairline starts BELOW the chip
- * rather than running behind it: a chip is a label at the top of its hour, a
- * station is a tick on a continuous rail, and the two read differently.
- *
- * `isLive` tints the chip and the hairline with `--success`; the live label is
- * kept for screen readers (the chip variant hides it visually). The playhead —
- * the exact current time — is a separate `TimelinePlayhead` rendered between
- * bands by the caller, because an hour spans sixty minutes and "now" is one of
- * them.
- *
- * ROWS ARE SEPARATED HERE, NOT IN THE ROW. `EventCompactRow` deliberately
- * draws no divider (its container does — see its docblock), so this band wraps
- * each child and rules between them. The wrapper, not the child, carries the
- * rule, so the row's own negative-margin hover wash is untouched. Children are
- * read with `Children.toArray`, which drops `null`/`false` so a conditional
- * first row never inherits a rule meant for a second; pass rows as siblings,
- * not inside a fragment — a fragment is one child and gets one wrapper.
- */
-type HourBandProps = {
-    /** The hour, already formatted and localised — "20:00". */
-    time: string;
-    /** Marks this as the hour currently in progress. */
-    isLive?: boolean;
-    /** Screen-reader text for the live hour, e.g. "Now on". Required to render it. */
-    liveLabel?: string;
-    /** The hour's events. Each direct child is one row or card. */
-    children: React.ReactNode;
-    /**
-     * `rows` (default): compact rows, ruled between with a Separator. `cards`:
-     * poster cards, stacked with a 16px gap and no rules — a card is its own
-     * frame, and a hairline between two posters reads as a third object.
-     */
-    layout?: "rows" | "cards";
-    className?: string;
-};
-declare function HourBand({ time, isLive, liveLabel, children, layout, className, }: HourBandProps): react_jsx_runtime.JSX.Element;
-type HourBandSkeletonProps = {
-    /** Rows to reserve space for. */
-    cardCount?: number;
-    className?: string;
-};
-/**
- * The mobile timeline's loading state, mirroring `HourBand` exactly — same
- * gutter, same hairline, same row rhythm — so nothing jumps when data lands.
- *
- * The chip is blocked out at its real size rather than omitted: it is a fixed
- * 58x24 lozenge, so a grey one reads as "a time goes here" without inventing
- * a time. Row footprints mirror `EventCompactRowSkeleton`.
- */
-declare function HourBandSkeleton({ cardCount, className, }: HourBandSkeletonProps): react_jsx_runtime.JSX.Element;
-
-export { HourBand, type HourBandProps, HourBandSkeleton, type HourBandSkeletonProps };

package/dist/components/hour-band.js

@@ -1,81 +0,0 @@
-import { TimelineHourPuck, TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-NSNEANOQ.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
-import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
-import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function HourBand({
-  time,
-  isLive,
-  liveLabel,
-  children,
-  layout = "rows",
-  className
-}) {
-  const isCards = layout === "cards";
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 pt-2.5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS), children: [
-      /* @__PURE__ */ jsx(
-        TimelineHourPuck,
-        {
-          time,
-          isLive,
-          liveLabel,
-          variant: "chip"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Separator,
-        {
-          orientation: "vertical",
-          className: cn(
-            "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2",
-            isLive && "bg-success/30"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex min-w-0 flex-1 flex-col", isCards && "gap-4 pb-2"),
-        children: React.Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
-          !isCards && index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-          child
-        ] }, index))
-      }
-    )
-  ] });
-}
-function HourBandSkeleton({
-  cardCount = 2,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 pt-2.5", className), "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS), children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-[58px] rounded-[7px]" }),
-      /* @__PURE__ */ jsx(
-        Separator,
-        {
-          orientation: "vertical",
-          className: "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsxs("div", { children: [
-      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 py-[11px]", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[10px]" }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-3/4" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-[11.5px] w-1/2" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-[22px] w-16 rounded-full" })
-        ] })
-      ] })
-    ] }, index)) })
-  ] });
-}
-
-export { HourBand, HourBandSkeleton };

package/dist/components/hour-group.d.ts

@@ -1,67 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-/**
- * HourGroup — an hour heading inside `<TimelineBand>`'s content column: a
- * time, a rule, and a count, with that hour's rows beneath and an optional
- * trailing note (e.g. "3 more not shown").
- *
- * ── `spine` — the desktop default ────────────────────────────────────────
- * Inside a `<TimelineBand>`, pass `spine` and the hour renders as a
- * `TimelineHourPuck` out ON the axis, centred on this heading's own rule,
- * instead of as inline text at the head of the content column. Every hour of
- * the day then reads as a station on the same rail, which is the entire point
- * of the rail; the band itself no longer draws any hour, so there is nothing
- * left to collide with.
- *
- * The offset is `calc(var(--timeline-spine) * -0.5)` — half the gutter, back
- * from the content column's left edge, which lands on the hairline. Written
- * with `*-0.5` rather than `/2` because a slash inside a Tailwind arbitrary
- * value collides with the opacity-modifier parse. The `w-0` wrapper plus the
- * puck's own `justify-center` is what centres it, so no `-translate-x-1/2` is
- * needed and the live label centres on the same line for free.
- *
- * `spine` implies the inline time is suppressed — no caller should have to
- * pass `spine hideTime` to avoid printing the hour twice.
- *
- * Keep the rule and the count. The rule is the only thing tying a puck to the
- * rows it labels across the empty gutter; without it the puck reads as a
- * sticker rather than a station on a track. The count carries information
- * present nowhere else and terminates the rule so it doesn't dissolve.
- *
- * Where a group's rows already carry their own timestamps, `hideTime` drops the
- * time and keeps the rule and count, so the hour is stated exactly once.
- *
- * `size="sm"` is the mobile variant, shrinking the type a half-step and
- * matching `<HourBand>`'s own top offset (18px) rather than the desktop
- * default (22px).
- */
-type HourGroupProps = {
-    /** The hour, already formatted and localised — "20:00". */
-    time: string;
-    /**
-     * Render the hour as a puck out on `<TimelineBand>`'s spine instead of as
-     * inline text. The desktop timeline's default; implies `hideTime`.
-     */
-    spine?: boolean;
-    /** Marks this hour as the one currently in progress. `spine` only. */
-    isLive?: boolean;
-    /** Shown under the puck when live, e.g. "NOW". `spine` only. */
-    liveLabel?: string;
-    /**
-     * Drop the leading time, keeping the rule and count. For groups whose rows
-     * state their own time.
-     */
-    hideTime?: boolean;
-    /** Caller-composed, e.g. "2 events" — mirrors `EventDayHeader`'s `meta`. */
-    countLabel: string;
-    /** Trailing note shown after the rows, e.g. "3 more not shown". */
-    note?: string;
-    /** The hour's rows. */
-    children?: React.ReactNode;
-    size?: "sm" | "default";
-    className?: string;
-};
-declare function HourGroup({ time, spine, isLive, liveLabel, hideTime, countLabel, note, children, size, className, }: HourGroupProps): react_jsx_runtime.JSX.Element;
-
-export { HourGroup, type HourGroupProps };

package/dist/components/hour-group.js

@@ -1,59 +0,0 @@
-import { TimelineHourPuck } from '../chunk-NSNEANOQ.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
-import '../chunk-XBBEX4SF.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function HourGroup({
-  time,
-  spine,
-  isLive,
-  liveLabel,
-  hideTime,
-  countLabel,
-  note,
-  children,
-  size = "default",
-  className
-}) {
-  const isSm = size === "sm";
-  return (
-    // The group's top padding lives HERE, not on the heading row, and that is
-    // load-bearing for `spine`: `top-1/2` resolves against the heading row's
-    // PADDING box while `items-center` centres the rule in its CONTENT box, so
-    // with `pt-[22px]` on the row the puck landed 19.25px down and the rule at
-    // 30.25px — 11px apart, the puck visibly riding above the line it is
-    // supposed to sit on. Unpadded, both resolve against the same box and the
-    // puck's centre, the rule and the spine hairline are one line.
-    /* @__PURE__ */ jsxs("div", { className: cn(isSm ? "pt-[18px]" : "pt-[22px]", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", spine && "relative"), children: [
-        spine && /* @__PURE__ */ jsx(
-          TimelineHourPuck,
-          {
-            time,
-            isLive,
-            liveLabel,
-            className: "absolute left-[calc(var(--timeline-spine)*-0.5)] top-1/2 w-0 -translate-y-1/2"
-          }
-        ),
-        !hideTime && !spine && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "font-mono text-muted-foreground tabular-nums",
-              isSm ? "text-[11.5px]" : "text-xs"
-            ),
-            children: time
-          }
-        ),
-        /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
-        /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground/70", isSm ? "text-[10.5px]" : "text-[11px]"), children: countLabel })
-      ] }),
-      children,
-      note && /* @__PURE__ */ jsx("p", { className: "pt-[9px] text-[11.5px] text-muted-foreground", children: note })
-    ] })
-  );
-}
-
-export { HourGroup };

package/dist/components/timeline-band.d.ts

@@ -1,64 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-/**
- * The mobile axis gutter, shared by `HourBand` and `TimelinePlayhead` so the
- * hour chips and the current-time label sit in one column. 58px is the width
- * of a five-glyph 24-hour label ("20:00") in the chip's mono type plus its
- * padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
- * reasons the events surfaces format 24-hour everywhere.
- */
-declare const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
-type TimelineHourPuckProps = {
-    /** The hour, already formatted and localised — or an em dash for a quiet day. */
-    time: string;
-    /** Marks this as the hour currently in progress. */
-    isLive?: boolean;
-    /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
-    liveLabel?: string;
-    /**
-     * `station` (default): the bordered puck that sits ON the hairline, for the
-     * desktop spine. `chip`: a filled, fixed-width lozenge with the hairline
-     * starting BELOW it, for the mobile gutter — an app's time label, not a
-     * station on a rail. In `chip` the live label is visually hidden: the tinted
-     * chip plus a small on-air glyph are the visible signal (the glyph so the
-     * state never rests on colour alone once the pulse is reduced away) and the
-     * label stays for screen readers only.
-     */
-    variant?: "station" | "chip";
-    className?: string;
-};
-/**
- * The station on the timeline's axis — ONE object, positioned by its host:
- * `HourGroup` centres it on its own heading rule out in the desktop spine,
- * `HourBand` pins it to the top of the mobile gutter.
- *
- * Extracted because it was hand-rolled twice and the copies had already
- * drifted — this one bordered and `rounded-[7px] px-[7px]`, `hour-band.tsx`'s
- * borderless and `rounded-md px-1.5`. The `bg-background` fill punches through
- * the hairline so the rail reads as continuous behind the label rather than
- * butting into it.
- *
- * The live label is absolutely positioned rather than a flex sibling: hosts
- * centre this puck with `-translate-y-1/2`, and a two-item column would centre
- * the STACK, lifting the puck off the line it exists to sit on.
- */
-declare function TimelineHourPuck({ time, isLive, liveLabel, variant, className, }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
-type TimelineBandProps = {
-    /** The lane column — usually a poster card, or empty for a quiet hour. */
-    lane: React.ReactNode;
-    /** The content column, normally one `<HourGroup spine>` per hour. */
-    children: React.ReactNode;
-    className?: string;
-};
-declare function TimelineBand({ lane, children, className }: TimelineBandProps): react_jsx_runtime.JSX.Element;
-type TimelineBandSkeletonProps = {
-    className?: string;
-};
-/**
- * Holds the lane/spine/content geometry so nothing jumps when data lands.
- * The spine renders its hairline with no puck — there's no hour to show yet.
- */
-declare function TimelineBandSkeleton({ className }: TimelineBandSkeletonProps): react_jsx_runtime.JSX.Element;
-
-export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, type TimelineBandProps, TimelineBandSkeleton, type TimelineBandSkeletonProps, TimelineHourPuck, type TimelineHourPuckProps };

package/src/components/hour-band.stories.tsx

@@ -1,182 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { HourBand, HourBandSkeleton } from "./hour-band";
-import { EventCard } from "./event-card";
-import { EventCompactRow } from "./event-compact-row";
-import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
-
-const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
-
-const formatters: EventFormatters = {
-  time: () => "20:00",
-  day: () => "Thu, Sep 3",
-  price: (amount) => `${amount} RON`,
-};
-
-const event = (id: string, title: string, place: string, fee?: number): EventPreview => ({
-  id,
-  title,
-  location: place,
-  place_name: place,
-  starts_at: "2026-09-03T20:00:00",
-  entry_fee: fee,
-});
-
-const meta: Meta<typeof HourBand> = {
-  title: "Events/HourBand",
-  component: HourBand,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[390px] bg-background px-4">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "One hour of the mobile timeline: a 58px gutter with a filled hour chip and a hairline dropping from beneath it, and that hour's rows beside it, ruled between. The rows carry no timestamp of their own — the band is the timestamp, which is why cards render with `hideWhen` and compact rows with `hideTime`.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof HourBand>;
-
-export const Default: Story = {
-  args: {
-    time: "21:00",
-    children: (
-      <>
-        <EventCard
-          event={event("1", "Karaoke Night", "VIBE OffSeason")}
-          labels={labels}
-          formatters={formatters}
-          hideWhen
-        />
-        <EventCard
-          event={event("2", "Urban Sounds at Caro", "Caro", 0)}
-          labels={labels}
-          formatters={formatters}
-          hideWhen
-        />
-      </>
-    ),
-  },
-};
-
-/** The live hour: tinted chip and hairline. The live label is screen-reader only in this variant. */
-export const Live: Story = {
-  args: {
-    time: "20:00",
-    isLive: true,
-    liveLabel: "NOW ON",
-    children: (
-      <EventCard
-        event={event("3", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
-        labels={labels}
-        formatters={formatters}
-        hideWhen
-        liveStatus="Live now · ends around 23:00"
-      />
-    ),
-  },
-};
-
-/** The shipped mobile shape: compact rows, ruled between, inside one band. */
-export const CompactRows: Story = {
-  render: () => (
-    <HourBand time="20:00" isLive liveLabel="Now on">
-      <EventCompactRow
-        event={event("r1", "Klausen Quiz by GOtrivia", "Klausen Pubhouse", 20)}
-        labels={labels}
-        formatters={formatters}
-        hideTime
-        tags={["Drinks", "Games"]}
-      />
-      <EventCompactRow
-        event={event("r2", "Quiz Night at Café del Mars", "Del Mars", 10)}
-        labels={labels}
-        formatters={formatters}
-        hideTime
-        tags={["Games"]}
-      />
-    </HourBand>
-  ),
-};
-
-/** A single event in a quiet hour. */
-export const OneEvent: Story = {
-  args: {
-    time: "19:00",
-    children: (
-      <EventCard
-        event={event("4", "Quiz Night", "Flying Circus")}
-        labels={labels}
-        formatters={formatters}
-        hideWhen
-      />
-    ),
-  },
-};
-
-/** Consecutive bands — the hairline should read as one continuous axis. */
-export const StackedHours: Story = {
-  render: () => (
-    <>
-      <HourBand time="20:00" isLive liveLabel="NOW ON">
-        <EventCard
-          event={event("5", "Psihotrop Live", "Atelier Café", 50)}
-          labels={labels}
-          formatters={formatters}
-          hideWhen
-          liveStatus="Live now · ends around 23:00"
-        />
-      </HourBand>
-      <HourBand time="21:00">
-        <EventCard
-          event={event("6", "Charity Concert & Afterparty", "Flying Circus", 30)}
-          labels={labels}
-          formatters={formatters}
-          hideWhen
-        />
-      </HourBand>
-      <HourBand time="22:00">
-        <EventCard
-          event={event("7", "Schoolotheque Afterparty with Machedon", "Flying Circus", 25)}
-          labels={labels}
-          formatters={formatters}
-          hideWhen
-        />
-      </HourBand>
-    </>
-  ),
-};
-
-/**
- * Loading. The chip is blocked out at its fixed 58x24 size — a grey lozenge
- * of that exact shape reads as "a time goes here" without inventing one — and
- * the rows mirror `EventCompactRowSkeleton`.
- */
-export const Loading: Story = {
-  render: () => <HourBandSkeleton />,
-};
-
-/** Loading beside loaded, so gutter and card geometry drift is visible at a glance. */
-export const LoadingVsLoaded: Story = {
-  render: () => (
-    <div className="grid grid-cols-2 gap-6">
-      <HourBandSkeleton cardCount={1} />
-      <HourBand time="21:00">
-        <EventCard
-          event={event("8", "Karaoke Night", "VIBE OffSeason")}
-          labels={labels}
-          formatters={formatters}
-          hideWhen
-        />
-      </HourBand>
-    </div>
-  ),
-};