@bearmenu/ui 0.8.9 → 0.8.10

package/src/components/concept-convergence.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConceptConvergence } from "./concept-convergence";
+
+function photo(hue: number) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="400"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 30% 62%)"/><stop offset="1" stop-color="hsl(${hue} 20% 28%)"/></linearGradient></defs><rect width="320" height="400" fill="url(#g)"/><circle cx="90" cy="120" r="60" fill="hsl(${hue} 40% 80%)" opacity=".6"/></svg>`
+    )
+  );
+}
+
+const meta: Meta<typeof ConceptConvergence> = {
+  title: "Menu/ConceptConvergence",
+  component: ConceptConvergence,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-[oklch(0.21_0.012_55)] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    aliases: [
+      { label: "Papanași", price: "18 lei" },
+      { label: "Papanasi cu smantana si dulceata", price: "24 lei" },
+      { label: "Papanași de casă", price: "28 lei" },
+      { label: "Papanasi (2 buc)", price: "32 lei" },
+      { label: "Papanași cu fineți", price: "44 lei" },
+    ],
+    concept: { title: "Papanași", photoUrl: photo(30), badge: "32 names" },
+    scale: ["8 lei", "45 kitchens", "44 lei"],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Many names, one dish, drawn on the explainer's dark stage. The kitchens' own spellings of a dish, each with its price, converge on the concept they were matched into — the proof the concepts explainer opens with. Chips are white on ink; the concept card is a room's real photograph on the shared `PhotoGround`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptConvergence>;
+
+export const Default: Story = {};
+
+/** No photograph for the lead room: the ground with the initial. */
+export const NoPhoto: Story = {
+  args: { concept: { title: "Ciorbă de burtă", badge: "12 names" } },
+};

package/src/components/concept-convergence.tsx

@@ -0,0 +1,90 @@
+import { cn } from "../lib/utils";
+import { Badge } from "./badge";
+import { Convergence } from "./convergence";
+import { PhotoGround } from "./photo-ground";
+
+/**
+ * ConceptConvergence — many names, one dish, drawn on a dark stage.
+ *
+ * The explainer's proof: the kitchens' OWN spellings of a dish, each with its
+ * price, converging on the one concept they were matched into. Five visibly
+ * different strings under one photograph with one price column say what a
+ * paragraph about "matching" cannot.
+ *
+ * Drawn for the explainer's dark stage, and only there: the chips are white
+ * on ink, not a family's hue — the tint was doing no work once the stage
+ * went dark, and the spellings are the point, not the kitchens' cuisines.
+ * The concept card is the venue's real photograph, never the item's (which
+ * is generated), on the same ground as every photographed card.
+ */
+
+export type ConceptConvergenceAlias = {
+  /** The kitchen's spelling, verbatim. */
+  label: string;
+  /** Pre-formatted, e.g. "32 lei". */
+  price: string;
+};
+
+export type ConceptConvergenceProps = {
+  aliases: ConceptConvergenceAlias[];
+  concept: {
+    title: string;
+    /** A room's photograph — venue photography only. */
+    photoUrl?: string;
+    /** "32 names" — the badge on the card. */
+    badge: string;
+  };
+  /**
+   * Low, middle and high of the ruler under the diagram, e.g.
+   * `["8 lei", "45 kitchens", "44 lei"]`. All three, or none.
+   */
+  scale?: [string, string, string];
+  className?: string;
+};
+
+export function ConceptConvergence({ aliases, concept, scale, className }: ConceptConvergenceProps) {
+  return (
+    <div className={cn("flex flex-col gap-3 text-white", className)}>
+      <Convergence
+        linesClassName="text-white/30"
+        sources={aliases.map((alias, index) => (
+          <span
+            key={index}
+            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-full bg-white/10 px-2.5 text-[11.5px] text-white"
+          >
+            <span className="min-w-0 truncate">{alias.label}</span>
+            <span className="shrink-0 tabular-nums text-white/60">{alias.price}</span>
+          </span>
+        ))}
+        target={
+          <span className="relative isolate block aspect-[4/5] w-[112px] overflow-hidden rounded-[16px] shadow-[0_8px_24px_oklch(0_0_0/0.35)]">
+            <PhotoGround
+              className="-z-10"
+              mode="stack"
+              photos={[concept.photoUrl]}
+              initials={concept.title.charAt(0).toLocaleUpperCase()}
+              overlay
+              loading="eager"
+            />
+            <Badge variant="overlay" className="absolute left-2 top-2">
+              {concept.badge}
+            </Badge>
+            <span className="absolute inset-x-2 bottom-2 block text-balance font-serif text-[17px] font-semibold leading-tight tracking-[-0.02em] [text-shadow:0_1px_8px_oklch(0_0_0/0.5)]">
+              {concept.title}
+            </span>
+          </span>
+        }
+      />
+
+      {scale && (
+        <div className="flex items-center gap-2 text-[11px] tabular-nums text-white/60">
+          <span>{scale[0]}</span>
+          <span aria-hidden className="h-px flex-1 bg-white/20" />
+          <span className="font-semibold text-white">{scale[1]}</span>
+          <span aria-hidden className="h-px flex-1 bg-white/20" />
+          <span>{scale[2]}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/convergence.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MessageSquareQuote } from "lucide-react";
+import { Convergence } from "./convergence";
+
+const meta: Meta<typeof Convergence> = {
+  title: "Menu/Convergence",
+  component: Convergence,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Many things on the left becoming one thing on the right. The DS draws the shape — the fanned stack, the hairlines curving into one point — and the caller draws the nodes. `ConceptConvergence` is the dish version; this story is the reviews version, redacted lines converging on a mention count.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Convergence>;
+
+export const Reviews: Story = {
+  render: () => (
+    <Convergence
+      linesClassName="text-white/30"
+      sources={Array.from({ length: 6 }, (_, index) => (
+        <span key={index} className="flex items-center gap-2" aria-hidden>
+          <MessageSquareQuote className="h-4 w-4 text-white/40" />
+          <span className="h-2 rounded-full bg-white/20" style={{ width: 48 + ((index * 37) % 60) }} />
+        </span>
+      ))}
+      target={
+        <span className="flex flex-col items-center rounded-[18px] bg-white/10 px-5 py-4 text-white shadow-[0_8px_24px_oklch(0_0_0/0.35)]">
+          <span className="text-[40px] font-extrabold leading-none tabular-nums">56</span>
+          <span className="mt-1 text-[11px] text-white/70">mentions</span>
+        </span>
+      }
+    />
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-[oklch(0.21_0.012_55)] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/convergence.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { motion, useReducedMotion, type Variants } from "framer-motion";
+import { cn } from "../lib/utils";
+import { duration, ease, springSnappy, stagger } from "../lib/motion";
+
+/**
+ * Convergence — many things on the left becoming one thing on the right.
+ *
+ * The diagram the explainers are built on: several spellings of a dish
+ * converging on one concept; a column of reviews converging on one mention
+ * count. The DS draws the SHAPE — a stack of sources, hairlines curving into
+ * a single point, the target — and the caller draws the nodes, because what a
+ * source is (a chip, a redacted line, a thumbnail) is the caller's data.
+ *
+ * ## The motion tells the story
+ *
+ * Three beats on mount, overlapping, under 700ms: the many arrive (each
+ * source slides in from the left, staggered), the lines draw toward the one
+ * (each curve starts once its source is about half visible, so cause reads
+ * before effect), and the one lands (the target scales in on a snappy spring
+ * while the last lines are still in flight — it catches them rather than
+ * waiting for a clean hand-off). Self-contained: the sheet this sits in
+ * animates by CSS `data-state`, which nothing here could await, and the
+ * `delayChildren` already puts the content a beat behind the surface.
+ *
+ * `useReducedMotion` owns the fallback — the stylesheet's global rule only
+ * shortens CSS transitions and does not reach Framer's own scheduler. Under
+ * it the diagram renders settled and fades in once. `animate={false}` is a
+ * separate switch for static reuse (a docs frame), independent of the
+ * reader's setting.
+ *
+ * ## Why the lines are an SVG and not borders
+ *
+ * A curve from each source to one point cannot be a border on anything. The
+ * SVG stretches to the sources column's height (`preserveAspectRatio: none`)
+ * and keeps its hairlines at one pixel through `vector-effect`, so the curves
+ * follow however tall the stack is without the stroke thickening with it.
+ * `pathLength` is normalised by Framer to the path's own space, so the draw
+ * is unaffected by the stretch.
+ */
+
+/** The first line starts once the first source is about half visible. */
+const LINE_LEAD = 0.15;
+/** The target lands before the last line finishes — it catches them. */
+const TARGET_DELAY = 0.38;
+
+const sourcesContainer: Variants = {
+  hidden: {},
+  show: { transition: { delayChildren: 0.06, staggerChildren: stagger.tight } },
+};
+
+const sourceItem: Variants = {
+  hidden: { opacity: 0, x: -8 },
+  show: { opacity: 1, x: 0, transition: { duration: duration.quick, ease: ease.enter } },
+};
+
+const targetItem: Variants = {
+  hidden: { opacity: 0, scale: 0.92 },
+  show: { opacity: 1, scale: 1, transition: { delay: TARGET_DELAY, ...springSnappy } },
+};
+
+export type ConvergeLinesProps = {
+  /** How many sources the lines leave from. */
+  count: number;
+  /** Draw the curves in, source by source. Off: drawn already. */
+  animate?: boolean;
+  className?: string;
+};
+
+const LINES_WIDTH = 40;
+const LINES_HEIGHT = 100;
+
+export function ConvergeLines({ count, animate = true, className }: ConvergeLinesProps) {
+  const mid = LINES_HEIGHT / 2;
+  return (
+    <svg
+      aria-hidden
+      viewBox={`0 0 ${LINES_WIDTH} ${LINES_HEIGHT}`}
+      preserveAspectRatio="none"
+      className={cn("h-full w-10 text-border", className)}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const y = ((index + 0.5) / count) * LINES_HEIGHT;
+        const d = `M0 ${y} C ${LINES_WIDTH / 2} ${y}, ${LINES_WIDTH / 2} ${mid}, ${LINES_WIDTH} ${mid}`;
+        const stroke = {
+          d,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 1.5,
+          strokeLinecap: "round" as const,
+          vectorEffect: "non-scaling-stroke" as const,
+        };
+        return animate ? (
+          <motion.path
+            key={index}
+            {...stroke}
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ pathLength: 1, opacity: 1 }}
+            transition={{
+              delay: LINE_LEAD + index * stagger.tight,
+              duration: duration.standard,
+              ease: ease.standard,
+            }}
+          />
+        ) : (
+          <path key={index} {...stroke} />
+        );
+      })}
+    </svg>
+  );
+}
+
+export type ConvergenceProps = {
+  /** The many. One node each; the stack fans slightly so it reads as a spread, not a list. */
+  sources: ReactNode[];
+  /** The one. */
+  target: ReactNode;
+  /** The entrance choreography. Off for static reuse; the reader's reduced-motion setting is honoured either way. */
+  animate?: boolean;
+  /** The curves' colour, e.g. `"text-white/30"` on a dark stage. Defaults to the border. */
+  linesClassName?: string;
+  className?: string;
+};
+
+export function Convergence({
+  sources,
+  target,
+  animate = true,
+  linesClassName,
+  className,
+}: ConvergenceProps) {
+  const reduce = useReducedMotion();
+  const run = animate && !reduce;
+  const fadeOnly = animate && reduce;
+
+  return (
+    <motion.div
+      className={cn("grid grid-cols-[minmax(0,1fr)_auto_auto] items-center", className)}
+      initial={fadeOnly ? { opacity: 0 } : false}
+      animate={fadeOnly ? { opacity: 1 } : undefined}
+      transition={{ duration: duration.quick, ease: ease.standard }}
+    >
+      <motion.div
+        className={cn(
+          "flex min-w-0 flex-col items-start justify-center gap-2 py-1",
+          /* The fan: the middle sources sit a little further right than the
+             ends, so five chips read as one hand of cards, not as a menu. */
+          "[&>*:nth-child(2)]:translate-x-1.5 [&>*:nth-child(3)]:translate-x-3 [&>*:nth-child(4)]:translate-x-1.5"
+        )}
+        variants={run ? sourcesContainer : undefined}
+        initial={run ? "hidden" : false}
+        animate={run ? "show" : undefined}
+      >
+        {sources.map((node, index) => (
+          <motion.div key={index} className="flex max-w-full" variants={run ? sourceItem : undefined}>
+            {node}
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="self-stretch">
+        <ConvergeLines count={sources.length} animate={run} className={linesClassName} />
+      </div>
+
+      <motion.div
+        className="flex items-center"
+        variants={run ? targetItem : undefined}
+        initial={run ? "hidden" : false}
+        animate={run ? "show" : undefined}
+      >
+        {target}
+      </motion.div>
+    </motion.div>
+  );
+}

package/src/components/explainer-steps.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ExplainerSteps } from "./explainer-steps";
+
+const meta: Meta<typeof ExplainerSteps> = {
+  title: "Menu/ExplainerSteps",
+  component: ExplainerSteps,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    steps: [
+      { text: "We read 32 spellings of papanași and matched them to one dish.", figure: "32", unit: "names" },
+      { text: "Prices compare like for like: every one is a portion of the same dish.", figure: "8–44", unit: "lei" },
+      { text: "Open any dish and see what every other kitchen charges for it.", figure: "45", unit: "kitchens" },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "How something works, as numbered rules: a numeral in a ring, one line, and the live figure that proves it with its unit. A thread joins the numerals; the last is filled, because the rules end where the reader is asked to act. A step without a figure shows none.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ExplainerSteps>;
+
+export const Default: Story = {};
+
+/** The third rule has no number, so it shows none. */
+export const UnevenFigures: Story = {
+  args: {
+    steps: [
+      { text: "The reviews of every place in Cluj-Napoca, read in full.", figure: "791", unit: "places" },
+      { text: "A mention is one review naming the item.", figure: "68", unit: "here" },
+      { text: "The most-named lists are ranked on it, so the top is what the city keeps talking about." },
+    ],
+  },
+};

package/src/components/explainer-steps.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * ExplainerSteps — how something works, as numbered rules a reader can scan.
+ *
+ * Each step is a numeral in a ring, one line of prose, and the live figure
+ * that proves the line, right-aligned with its unit. A thread runs from one
+ * numeral to the next so the three read as a sequence, and the last numeral
+ * is filled: the rules end where the reader is asked to do something.
+ *
+ * A step without a figure shows none — an invented number in the column is
+ * worse than an empty one. But a list where no step has a figure should be
+ * prose, not steps.
+ *
+ * Server-safe. Data in, not children: a server component composes these from
+ * translated strings and numbers, and an array is easier to number than a
+ * child list is to clone.
+ */
+
+export type ExplainerStepItem = {
+  /** One line. Two at most on a phone; a third is a paragraph and belongs elsewhere. */
+  text: ReactNode;
+  /** The live figure, pre-formatted. */
+  figure?: string;
+  /** A unit or caption beside the figure, e.g. "names". */
+  unit?: string;
+};
+
+export type ExplainerStepsProps = {
+  steps: ExplainerStepItem[];
+  className?: string;
+};
+
+export function ExplainerSteps({ steps, className }: ExplainerStepsProps) {
+  return (
+    <ol className={cn("flex flex-col", className)}>
+      {steps.map((step, index) => {
+        const isLast = index === steps.length - 1;
+        return (
+          <li key={index} className="relative flex gap-3.5 pb-5 last:pb-0">
+            {/* The thread, from this numeral to the next. */}
+            {!isLast && (
+              <span
+                aria-hidden
+                className="absolute bottom-0 left-[11px] top-7 w-px bg-border"
+              />
+            )}
+            <span
+              aria-hidden
+              className={cn(
+                "relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold tabular-nums",
+                isLast
+                  ? "bg-primary text-primary-foreground"
+                  : "border border-border bg-background text-muted-foreground"
+              )}
+            >
+              {index + 1}
+            </span>
+            <p className="min-w-0 flex-1 pt-0.5 text-[14px] leading-[1.45] text-foreground">{step.text}</p>
+            {step.figure && (
+              <span className="shrink-0 pt-0.5 text-right text-[15px] font-bold leading-[1.45] tabular-nums text-foreground">
+                {step.figure}
+                {step.unit && (
+                  <span className="ml-1 text-[11px] font-normal text-muted-foreground">{step.unit}</span>
+                )}
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/glass-ground.tsx

@@ -0,0 +1,129 @@
+import type { CSSProperties } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * GlassGround — a frosted, inked caption rising out of one edge of a
+ * photograph.
+ *
+ * Layers over a `PhotoGround`: two masked `backdrop-blur`s (the frost) and
+ * an ink gradient (the contrast), running in one direction — absent where the
+ * photograph is the subject, solid where the type is. `MenuFamilyBlock` drew
+ * this first; this is the same idea with the stops as data, so a card can say
+ * "clear for 128px, then glass" without a sixth copy of the gradient strings.
+ *
+ * ## Why two blurs, and why the ramps are eased
+ *
+ * One blur under a linear mask has an edge: the eye reads the line where
+ * sharp becomes soft, however gently the mask fades it in. Two blurs — a
+ * light one that starts early and a heavier one that starts late — make the
+ * softening itself a gradient (the "progressive blur" of a phone's lock
+ * screen), and every ramp here is an ease-in through five stops rather than
+ * a straight line, because a straight ramp has a visible crease at each end
+ * where its slope changes.
+ *
+ * ## Why the stops are custom properties
+ *
+ * Tailwind emits only the classes it can read verbatim, so the gradients
+ * cannot be assembled from props into a class. The classes below are literal
+ * and read `--glass-*` variables; the component writes those inline, having
+ * interpolated the quarter stops in JS (`clear` and `full` must share a
+ * unit). Same mechanism as `HueChip`'s hue. The ink's colour is the
+ * package's one scrim literal, `oklch(0.16 0.012 55)`, never `var(--scrim)`.
+ *
+ * ## The ramp ends where the type begins
+ *
+ * `clear` is where the frost starts, `full` where it and the ink are solid.
+ * Set `full` to the exact seam the content starts at — a ramp that runs past
+ * the seam puts the first row of type on half-frost.
+ */
+
+export type GlassStops = {
+  /** Which way the ink runs — toward the type. */
+  direction: "to bottom" | "to right";
+  /** Where the frost begins, e.g. `"0px"` or `"24%"`. */
+  clear: string;
+  /** Where frost and ink are solid — the seam the content starts at. Same unit as `clear`. */
+  full: string;
+};
+
+export type GlassGroundProps = {
+  stops: GlassStops;
+  /** Stops from `lg`. Omit to keep the same ramp at every width. */
+  lgStops?: GlassStops;
+  /**
+   * How dark the ink gets at the far edge, 0–1. `0.96` is a caption the
+   * photograph is only a texture under; `0.4` is a photograph the caption is
+   * drawn on — the type is lifted, the room stays a room.
+   */
+  peak?: number;
+  /**
+   * How much the frost softens the photograph where it is solid. `xl` turns
+   * a room into colour; `sm` keeps it a room and only takes the edge off the
+   * detail behind the type.
+   */
+  blur?: "sm" | "md" | "lg" | "xl";
+  className?: string;
+};
+
+/* Ease-in through the ramp: the fraction of the way from `clear` to `full`
+   at which each stop sits, and the share of the peak it carries. */
+const STOPS = [0, 0.25, 0.5, 0.75, 1] as const;
+const EASE = [0, 0.06, 0.25, 0.56, 1] as const;
+
+/** The light blur starts at once and is solid halfway; the heavy one starts halfway. */
+const FROST_SOFT =
+  "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s0),rgba(0,0,0,0.25)_var(--glass-s1),black_var(--glass-s2))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s0),rgba(0,0,0,0.25)_var(--glass-lg-s1),black_var(--glass-lg-s2))]";
+const FROST_HEAVY =
+  "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s1),rgba(0,0,0,0.25)_var(--glass-s2),rgba(0,0,0,0.6)_var(--glass-s3),black_var(--glass-s4))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s1),rgba(0,0,0,0.25)_var(--glass-lg-s2),rgba(0,0,0,0.6)_var(--glass-lg-s3),black_var(--glass-lg-s4))]";
+
+const INK =
+  "bg-[linear-gradient(var(--glass-dir),oklch(0.16_0.012_55_/_0)_var(--glass-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)] lg:bg-[linear-gradient(var(--glass-lg-dir),oklch(0.16_0.012_55_/_0)_var(--glass-lg-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-lg-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-lg-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-lg-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-lg-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)]";
+
+/** Literal, for the scanner: the light and the heavy blur per strength. */
+const BLUR = {
+  sm: ["backdrop-blur-[2px]", "backdrop-blur-sm"],
+  md: ["backdrop-blur-sm", "backdrop-blur-md"],
+  lg: ["backdrop-blur-md", "backdrop-blur-lg"],
+  xl: ["backdrop-blur-lg", "backdrop-blur-xl"],
+} as const;
+
+/** "72px" → [72, "px"]; "24%" → [24, "%"]. */
+function measure(value: string): [number, string] {
+  const match = value.trim().match(/^(-?\d*\.?\d+)\s*([a-z%]*)$/i);
+  if (!match) throw new Error(`GlassGround: cannot read stop "${value}"`);
+  return [Number(match[1]), match[2] || "px"];
+}
+
+/** The five ramp positions between `clear` and `full`, as CSS lengths. */
+function positions(clear: string, full: string): string[] {
+  const [from, unit] = measure(clear);
+  const [to] = measure(full);
+  return STOPS.map((fraction) => `${from + (to - from) * fraction}${unit}`);
+}
+
+export function GlassGround({
+  stops,
+  lgStops = stops,
+  peak = 0.96,
+  blur = "xl",
+  className,
+}: GlassGroundProps) {
+  const base = positions(stops.clear, stops.full);
+  const lg = positions(lgStops.clear, lgStops.full);
+  const style = {
+    "--glass-dir": stops.direction,
+    "--glass-lg-dir": lgStops.direction,
+    ...Object.fromEntries(base.map((position, index) => [`--glass-s${index}`, position])),
+    ...Object.fromEntries(lg.map((position, index) => [`--glass-lg-s${index}`, position])),
+    ...Object.fromEntries(EASE.slice(1).map((share, index) => [`--glass-a${index + 1}`, String(peak * 0.8 * share)])),
+    "--glass-a-peak": String(peak),
+  } as CSSProperties;
+
+  return (
+    <span aria-hidden className={cn("pointer-events-none absolute inset-0 block", className)} style={style}>
+      <span className={cn("absolute inset-0", BLUR[blur][0], FROST_SOFT)} />
+      <span className={cn("absolute inset-0", BLUR[blur][1], FROST_HEAVY)} />
+      <span className={cn("absolute inset-0", INK)} />
+    </span>
+  );
+}

package/src/components/hub-surface.tsx

@@ -30,7 +30,17 @@ export function HubSurface({ flush, className, children }: HubSurfaceProps) {
       className={cn(
         "rounded-[18px] border border-border bg-card shadow-none",
         flush ? "overflow-hidden" : "px-3.5 py-4",
-        "lg:overflow-visible lg:rounded-none lg:bg-transparent lg:p-0 lg:shadow-none",
+        /*
+         * `lg:border-0` is load-bearing and was missing.
+         *
+         * Above `lg` this surface stops being a card — the background, the
+         * radius, the padding and the shadow are all dropped so the section
+         * sits on the page. The border was not, so every section on every
+         * desktop page kept a 1px rectangle around content that no longer had
+         * a card behind it. A caller that genuinely wants an edge at desktop
+         * adds `lg:border` in `className`, which lands after this in `cn`.
+         */
+        "lg:overflow-visible lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none",
         className
       )}
     >