# GlassPanel

> Frosted glass over the page field: page, light and nested variants, padding steps and an optional bloom.

Category: Layout and surfaces. Docs page: https://rime.mjsons.net/components/glass-panel

## Installation

```bash
npx shadcn@latest add KezLahd/rime/glass-panel
```

GlassPanel is the signature surface: a translucent white fill, a lit edge, a specular top line and a two-layer shadow over the coloured page field. page holds a screen's main content (one or two per screen), light is for screens that are mostly panel, nested is a glass block inside a panel.

It publishes --inner-radius (its radius minus its padding, floored at --r-2xs) so anything flush inside it is concentric. bloom adds a soft corner light for the one place to act; the flat preset turns it off.

## Usage

```tsx
import { GlassPanel } from "@/components/ui";

<GlassPanel padding="lg">…</GlassPanel>
```

## Props: GlassPanel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"page" \| "light" \| "nested"` | `"page"` | page = the signature panel, radius 20, two-layer shadow (one or two per screen). light = for screens that are mostly panel, so the page does not go milky. nested = a glass row or block inside a page panel, radius 16, no heavy shadow. |
| `padding` | `"none" \| "sm" \| "md" \| "lg"` | `"md"` |  |
| `as` | `"div" \| "section" \| "article" \| "aside" \| "header"` | `"div"` |  |
| `bloom` | `boolean` |  | Soft corner light, the reference "something to act on here" signal. Use sparingly. Off in the public system (--bloom-opacity: 0). |
| `tabbed` | `boolean` |  | Squares the top-left corner so FolderTabs can sit on it. Set by FolderTabs. |

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes.

## Examples

### Variants

```tsx
<GlassPanel>Page</GlassPanel>
<GlassPanel variant="light">Light</GlassPanel>
<GlassPanel variant="nested" padding="sm">Nested</GlassPanel>
<GlassPanel bloom>With bloom</GlassPanel>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--bloom-opacity` | `1` |
| `--panel-pad-lg` | `calc(24px * var(--density))` |
| `--panel-pad-md` | `calc(20px * var(--density))` |
| `--panel-pad-sm` | `calc(12px * var(--density))` |
| `--panel-radius-nested` | `var(--r-xl)` |
| `--panel-radius-page` | `var(--r-2xl)` |
| `--r-flat` | `var(--panel-radius)` |

System tokens it reads: `--blur-panel`, `--blur-panel-light`, `--blur-row`, `--density`, `--glass-edge`, `--glass-fill`, `--glass-fill-light`, `--glass-fill-nested`, `--r-2xl`, `--r-2xs`, `--r-xl`, `--rgb-bloom-a`, `--rgb-brand`, `--rgb-contact`, `--rgb-white`, `--shadow-panel`, `--shadow-panel-light`, `--shadow-specular`.

## Accessibility

- Glass needs contrast checks on its worst-case background: check every ink in the Studio's Contrast tab, which measures against the glass over the field.

## Do

- Use one page panel per job on a screen.

## Don't

- No bento grids of panels; no left accent bars.