Snackbar

<div style={{ ...col, gap: '0.75rem', maxWidth: '720px' }}>
      <Snackbar
        tone="info"
        message="Info message goes here."
        onDismiss={() => {}}
      />
      <Snackbar
        tone="success"
        message="Success message goes here."
        action={{ label: 'Action', onClick: () => {} }}
        onDismiss={() => {}}
      />
      <Snackbar
        tone="warning"
        message="Warning message goes here."
        action={{ label: 'Action', onClick: () => {} }}
        onDismiss={() => {}}
      />
      <Snackbar
        tone="error"
        message="Error message goes here."
        action={{ label: 'Action', onClick: () => {} }}
        onDismiss={() => {}}
      />
    </div>

<div style={{ ...col, gap: '1.25rem' }}>
      {SIZES.map((size) => (
        <section key={size} style={col}>
          <h3 style={heading}>size=&quot;{size}&quot;</h3>
          <div style={{ ...col, gap: '0.5rem' }}>
            {TONES.map((tone) => (
              <Snackbar
                key={tone}
                size={size}
                tone={tone}
                message="Message goes here."
                action={{ label: 'Action', onClick: () => {} }}
                onDismiss={() => {}}
              />
            ))}
          </div>
        </section>
      ))}
    </div>

<div style={{ ...col, gap: '1rem', maxWidth: '720px' }}>
      <section style={col}>
        <div style={caption}>Message only</div>
        <Snackbar tone="info" message="Message goes here." />
      </section>
      <section style={col}>
        <div style={caption}>Message + dismiss (× only)</div>
        <Snackbar
          tone="success"
          message="Message goes here."
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>Message + action (no ×)</div>
        <Snackbar
          tone="info"
          message="Message goes here."
          action={{ label: 'Action', onClick: () => {} }}
        />
      </section>
      <section style={col}>
        <div style={caption}>Message + action + dismiss (Figma full surface)</div>
        <Snackbar
          tone="warning"
          message="Message goes here."
          action={{ label: 'Action', onClick: () => {} }}
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>Custom icon override</div>
        <Snackbar
          tone="info"
          message="Message goes here."
          icon={<StarIcon />}
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>icon=&#123;null&#125; — drops the icon entirely</div>
        <Snackbar
          tone="info"
          message="Message goes here."
          icon={null}
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>Disabled action</div>
        <Snackbar
          tone="info"
          message="Message goes here."
          action={{ label: 'Action', onClick: () => {}, disabled: true }}
          onDismiss={() => {}}
        />
      </section>
    </div>

<SnackbarProvider placement="bottom-center" maxVisible={1}>
      <div style={{ ...col, gap: '1rem', minHeight: 360 }}>
        <h3 style={heading}>useSnackbar() hook — imperative .show / .dismiss</h3>
        <div style={{ ...caption, maxWidth: 540 }}>
          Click any button to enqueue a snackbar. The provider keeps a FIFO
          queue and surfaces one at a time (Material M3 default). Click
          &quot;Burst 4&quot; to see the queue cycle through 5s timers.
          Hover any visible snackbar to pause its auto-dismiss timer.
          Errors are persistent — close them with the × button.
        </div>
        <QueueDemoButtons />
      </div>
    </SnackbarProvider>

<SnackbarProvider placement="bottom-center">
      <div style={{ ...col, minHeight: 320 }}>
        <h3 style={heading}>Hover the snackbar to pause its timer</h3>
        <CountdownInner />
      </div>
    </SnackbarProvider>

<SnackbarProvider placement="bottom-center">
      <div style={{ ...col, minHeight: 280 }}>
        <h3 style={heading}>Persistent error — never auto-dismisses</h3>
        <PersistentErrorInner />
      </div>
    </SnackbarProvider>

{
    const [placement, setPlacement] = useState<SnackbarPlacement>('bottom-center');
    return (
      <div style={{ ...col, minHeight: 320 }}>
        <h3 style={heading}>Pick a placement, then trigger</h3>
        <div style={row}>
          {PLACEMENTS.map((p) => (
            <button
              key={p}
              type="button"
              style={{
                ...demoButton,
                background:
                  p === placement
                    ? 'var(--oshon-color-primary-100, #e0fafa)'
                    : demoButton.background,
                borderColor:
                  p === placement
                    ? 'var(--oshon-color-primary-500, #00afb3)'
                    : demoButton.border as string,
              }}
              onClick={() => setPlacement(p)}
            >
              {p}
            </button>
          ))}
        </div>
        <SnackbarProvider key={placement} placement={placement} offset={24}>
          <PlacementInner placement={placement} />
        </SnackbarProvider>
      </div>
    );
  }

<SnackbarProvider placement="top-right" regionLabel="App notifications">
      <div style={{ ...col, minHeight: 280 }}>
        <h3 style={heading}>Region landmark wiring</h3>
        <RegionLandmarkInner />
      </div>
    </SnackbarProvider>