Adapting to width

import type { ReactNode } from 'react';
import { useRef } from 'react';
import { useContainerSize, windowClassOf, windowClasses } from '@envsemble/envui';

function ChartPanel({ chart, legend }: { chart: ReactNode; legend: ReactNode }) {
  // The legend moves under the chart when the panel itself is compact, wherever it is placed.
  const panel = useRef<HTMLDivElement>(null);
  const size = useContainerSize(panel);
  const narrow = size !== undefined && windowClassOf(size.inlineSize) === 'compact';
  return (
    <div ref={panel}>
      {chart}
      {narrow ? <details>{legend}</details> : legend}
    </div>
  );
}

// The width where a window class starts, for code of your own: '37.5rem'.
const medium = windowClasses.medium;

/* Details beside the report from the expanded window class up; compact first. */
.report {
  display: grid;
  gap: var(--env-space-6);
}
@container env-window (width >= 52.5rem) {
  .report {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

Window classes

• The classes are Material's window size classes. They start at 600, 840 and 1200 px at the default text size, and are in rem, so they follow the reader's text size: with larger text, a window counts as a narrower class.
• Measured on a container, never the viewport: a page embedded in a smaller frame gets the class of its own width. Menus, dialogs and sheets measure the window they open in.
• container="env-window" on a primitive makes a region a window of its own, such as a preview. Don't give envUI's other env-* container names to your own.
• Compact first: write the compact layout as the default and switch up with width >=. Where no env-window is found, no query matches and the compact layout shows. CSS can't read the --env-window-class-* tokens inside a query, so write the width.

The words of the figures

• Components follow their space: nothing to do; envUI components query their container, never the viewport.
• Popups fit the window: nothing to do; menus, dialogs and sheets measure the window they open in.

Containers only

envUI has no width media queries: components respond to their container, so a component in a narrow pane lays out as on a phone.

• Do the same for a region of your own with container: my-region / inline-size and @container my-region (width >= 37.5rem).
• Media queries not about width stay: pointer, forced colors, reduced motion, contrast and color scheme.
• useContainerSize is for what CSS can't do, such as rendering something else when a panel is narrow. Where only styles change, a container query does it without script and without a first render that differs.

Stacking order

• Take a level for what a layer is: a sticky toolbar of your own takes var(--env-z-sticky). A step between levels is a small calc(), such as calc(var(--env-z-sticky) + 1).
• envUI's popups are portaled to the end of the document; keep your own layers below --env-z-backdrop. envUI's Stylelint config reports a literal z-index.

TypeScript declarations provide the complete public API.